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