zoukankan      html  css  js  c++  java
  • JavaScript入门

    一、请做好准备

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>热身</title>
     6 </head>
     7 
     8 <body>
     9    <p id="p1">我是第一段文字</p>
    10    <p id="p2">我是第二段文字</p>
    11    
    12    <script type="text/javascript">
    13     document.write("hello");//输出内容为"hello"。
    14     document.getElementById("p1").style.color="blue";//将第一段文字的颜色设置为蓝色。
    15    </script>
    16 </body>
    17 </html>
    1-1 热身.html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>插入JS代码</title>
     6 <script type="text/javascript">
     7  document.write("开启JS之旅");
     8 </script>
     9 </head>
    10 
    11 <body>
    12 </body>
    13 </html>
    1-2 插入JS代码.html
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>引用JS文件</title>
     6 <script src="script.js"></script>
     7 </head>
     8 
     9 <body>
    10 </body>
    11 </html>
    1-3 引用JS文件.html
    1 // JavaScript Document
    2 document.write("引用JS文件!");
    script.js
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>if...else</title>
     6 <script type="text/javascript">
     7  var myage=16;
     8  if(myage>=18)
     9  {
    10      document.write("恭喜你,已经成年了!");
    11      }
    12      else
    13      {
    14           document.write("未满18岁,小屁孩!");
    15          }
    16 </script>
    17 </head>
    18 
    19 <body>
    20 </body>
    21 </html>
    1-4 if...else.html
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>函数调用</title>
     6 <script type="text/javascript">
     7  function contxt()
     8  {
     9      alert("哈哈,调用函数了!");
    10      }
    11 </script>
    12 </head>
    13 
    14 <body>
    15 <form>
    16   <input type="button"  value="点击我!" onclick="contxt()"/>
    17 </form>
    18 </body>
    19 </html>
    1-5 函数调用.html

    二、请和我互动(常用互动方法)

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>document.write</title>
     6 <script type="text/javascript">
     7  var mystr="我是";
     8  var mychar="JavaScript";
     9  document.write(mychar+"<br>");
    10  document.write(mystr+"JavaScript的忠实粉丝!");
    11 </script>
    12 </head>
    13 
    14 <body>
    15 </body>
    16 </html>
    2-1输出内容.html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>alert</title>
     6 <script type="text/javascript">
     7 function rec()
     8 {
     9   var mychay="I love JavaScript";
    10   alert("mychar");
    11 }
    12 </script>
    13 </head>
    14 
    15 <body>
    16 <form>
    17   <input name="button" type="button" onClick="rec()" value="点击我,弹出对话框" />
    18 </form>
    19 </body>
    20 </html>
    2-2 警告(alert 消息对话框).html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>confirm</title>
     6 <script type="text/javascript">
     7 function rec()
     8 {
     9      var mymessage=confirm("你是女士吗?");
    10      if(mymessage==true)
    11      {
    12          document.write("你是女士!");
    13          }
    14          else
    15          {
    16             document.write("你是男士!"); 
    17              }
    18     }
    19 </script>
    20 </head>
    21 
    22 <body>
    23 <form>
    24  <input name="button" type="button" value="点击我,弹出对话框!" onClick="">
    25 </form>
    26 </body>
    27 </html>
    2-3 确认(confirm 消息对话框).html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>prompt</title>
     6 <script type="text/javascript">
     7  function rec()
     8  {
     9      var score;//score变量,用来存储用户输入的成绩值
    10      score=prompt("你的分数是多少?");
    11      if(score>=90)
    12      {
    13          document.write("你很棒!");
    14          }
    15          else if(score>=75)
    16          {
    17              document.write("不错哟!");
    18              }
    19              else if(score>=60)
    20          {
    21              document.write("要加油!");
    22              }
    23              else
    24              {
    25                 document.write("要努力了!"); 
    26              }
    27      }
    28 </script>
    29 </head>
    30 
    31 <body>
    32 <form>
    33   <input name="button" type="button" onClick="rec()" value="点击我,对成绩作评价!"
    34 </form>
    35 </body>
    36 </html>
    2-4 提问(prompt 消息对话框).html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>window.open</title>
     6 <script>
     7 function Wopen(){
     8      window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no,status=no,scrollbars=yes')
     9     }
    10 </script>
    11 </head>
    12 
    13 <body>
    14 <input name="button" type="button" onClick="Wopen()" value="点击我,打开新窗口!">
    15 </body>
    16 </html>
    2-5 打开新窗口(window.open).html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>close</title>
     6 <script type="text/javascript">
     7  var mywin=window.open("http://www.imooc.com");
     8  mywin.close();
     9 </script>
    10 </head>
    11 
    12 <body>
    13 </body>
    14 </html>
    2-6 关闭窗口(window.close).html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title> new document </title>
     6   <script type="text/javascript">  
     7     function openWindon(){
     8     var dakai=confirm("是否打开新窗口");
     9     if(dakai==true){
    10         var wangzhi=prompt("请输入网址:","http://www.imooc.com/");
    11            window.open('wangzhi','width=400px,height=500px,menubar=no,toolbar=no')
    12     }else{
    13         alert("Bye bye!");
    14     }
    15    }   
    16     //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
    17     
    18     
    19   </script> 
    20 </head> 
    21 <body> 
    22  <form>
    23       <input type="button" value="新窗口打开网站" onclick="openWindon()" /> 
    24  </form>
    25 </body>
    26 </html>
    2-7 编程练习.html

    三、你也有控制权(DOM操作)

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>document.getElementById</title>
     6 </head>
     7 
     8 <body>
     9 <p id="con">JavaScript</p>
    10 <script type="text/javascript">
    11   var mychar=document.getElementById("con");
    12   document.write("结果"+mychar);
    13   //输出获取的P标签。
    14 </script>
    15 </body>
    16 </html>
    3-1 通过ID获取元素.html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>innerHTML</title>
     6 </head>
     7 
     8 <body>
     9 <h2 id="con">javascript</h2>
    10 <p>JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
    11 <script type="text/javascript">
    12  var mychar=document.getElementById("con");
    13  document.write("原标题"+mychar.innerHTML+"<br>");
    14  mychar.innerHTML="Hello world";
    15  document.write("修改后的标题:"+mychar.innerHTML);//输出修改后的h2标签内容
    16 </script>
    17 </body>
    18 </html>
    3-2 innerHTML 属性.html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>display</title>
     6 <script type="text/javascript">
     7   function hidetext()
     8   {
     9       var mychar=document.getElementById("con");
    10       mychar.style.display="none";
    11       }
    12   function showtext()
    13   {
    14       var mychar=document.getElementById("con");
    15       mychar.style.display="block";
    16       }
    17       
    18 </script>
    19 </head>
    20 
    21 <body>
    22 <h1>JavaScript</h1>
    23 <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具</p>
    24 <form>
    25    <input type="button" onClick="hidetext()" value="隐藏内容">
    26    <input type="button" onClick="showtext()" value="显示内容">
    27 </form>
    28 </body>
    29 </html>
    3-4 显示和隐藏(display属性).html
     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>className属性</title>
     6 <style>
     7  body{font-size:16px;}
     8  .one{
     9      border:1px solid #eee;
    10      width:230px;
    11      height:50px;
    12      background-color:#ccc;
    13      color:red;
    14      }
    15  .two{
    16      border:1px solid #eee;
    17      width:230px;
    18      height:50px;
    19      background-color:#9CF;
    20      color:blue;
    21      }
    22 </style>
    23 </head>
    24 
    25 <body>
    26 <p id="p1">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    27 <input type="button" value="添加样式" onClick="add()">
    28 
    29 <p id="p2">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    30 <input type="button" value="改变外观" onClick="modify()">
    31 <script type="text/javascript">
    32  function add()
    33  {
    34      var p1=document.getElementById("p1");
    35      p1.className="one";
    36  }
    37   function modify()
    38  {
    39      var p2=document.getElementById("p2");
    40      p2.className="two";
    41  }
    42 </script>
    43 </body>
    44 </html>
    3-5 控制类名(className 属性).html

    四、第4章 编程挑战

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>className属性</title>
     6 <style>
     7  body{font-size:16px;}
     8  .one{
     9      border:1px solid #eee;
    10      width:230px;
    11      height:50px;
    12      background-color:#ccc;
    13      color:red;
    14      }
    15  .two{
    16      border:1px solid #eee;
    17      width:230px;
    18      height:50px;
    19      background-color:#9CF;
    20      color:blue;
    21      }
    22 </style>
    23 </head>
    24 
    25 <body>
    26 <p id="p1">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    27 <input type="button" value="添加样式" onClick="add()">
    28 
    29 <p id="p2">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    30 <input type="button" value="改变外观" onClick="modify()">
    31 <script type="text/javascript">
    32  function add()
    33  {
    34      var p1=document.getElementById("p1");
    35      p1.className="one";
    36  }
    37   function modify()
    38  {
    39      var p2=document.getElementById("p2");
    40      p2.className="two";
    41  }
    42 </script>
    43 </body>
    44 </html>
    4-1 编程挑战.html
  • 相关阅读:
    MyBatis进阶(一)
    git命令整理
    今天的任务--git练习
    深入浅出JavaScript(一)
    数据结构_树_二叉搜索树
    网络_体系结构
    数据结构_树
    算法_五大经典搜索算法
    SpringMVC入门
    spring 线程异步执行
  • 原文地址:https://www.cnblogs.com/daipianpian/p/4492918.html
Copyright © 2011-2022 走看看