zoukankan html css js c++ java

JavaScript学习基础部分

JavaScript学习基础

一、简介

　　1、JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。

　　2、JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

　　3、JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护。

　　4、JavaScript主要能做什么：

　　　　（1）可以读取及改变 HTML 元素的内容。

　　　　（2）JavaScript 可以将动态的文本放入 HTML 页面：

　　　　　　　　类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write("<h1>" + name + "</h1>")

　　　　（3）JavaScript 可以对事件作出响应：

　　　　　　　　可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。

　　　　（4）JavaScript 可被用来验证数据：

　　　　　　　　在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。

　　　　（5）JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。　　　　　　　

　　　　（6）JavaScript 可被用来创建 cookies：可被用来存储和取回位于访问者的计算机中的信息。

二、JavaScript实现

1、如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 <script> 标签（同时使用 type 属性来定义脚本语言）。这样，<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。

　　eg：document.write（） 字段是标准的 JavaScript 命令，用来向页面写入输出。如果我们不使用 <script> 标签，浏览器就会把 document.write("Hello World!")
当作纯文本来处理，也就是说会把这条命令本身写到页面上。

 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 </head>
 7 
 8 <body>
 9 </script>
10 <script type="text/javascript">
11     document.write("Hello World!");
12 </script>
13 document.write("Hello World!");
14 </body>
15 </html>

　效果：

2、与老的浏览器打交道：

那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签：

1 <html>
2 <body>
3 <script type="text/javascript">
4 <!--
5 document.write("Hello World!");
6 //-->
7 </script>
8 </body>
9 </html>

　　注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。此代码的效果和正常书写的代码一样：

3、JS脚本的放置位置

　　页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。

　　（1）位于head部分：

　　　　　　当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。

　　（2）位于body部分：

　　　　　　在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

　　（3）外部JavaScript：

　　　　　　有时，我们也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。注意：外部文件不能包含 <script> 标签。然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了

　　eg：外部js文件（名为HelloWorld.js)

　　　　 1 document.write("Hello World!");

　　　　源文件：

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript" src="HelloWorld.js">
10 </script>
11 </body>
12 </html>

　　效果：

4、JavaScript 代码

　　JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。代码块：JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。

5、注释

　　单行的注释以 // 开始，多行注释以 /* 开头，以 */ 结尾。（可以使用注释来防止代码执行。）

三、JavaScript变量

1、命名规则

变量对大小写敏感：y 和 Y 是两个不同的变量；（因为JavaScript对大小写敏感）
变量必须以字母或下划线开始

2、声明/创建JavaScript变量-通过 var 语句

　　eg：var x=5;var str="Hello World";

3、如果所赋值的变量还未进行过声明，该变量会自动声明。

　　eg：上述语句还可以直接写为：x=5;str="Hello World";

4、重新声明 JavaScript 变量

　　eg：var x=5;var x; //该语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。

四、JavaScript运算符

1、JavaScript 算术运算符

　　给定 y=5，下面的表格解释了这些算术运算符：

2、JavaScript赋值运算符

　　给定 x=10 和 y=5，下面的表格解释了赋值运算符：

3、用于字符串的 + 运算符：运算符用于把文本值或字符串变量加起来（连接起来）。

　　*要想在两个字符串之间增加空格，需要把空格插入一个字符串之中。（“ ”）

　　*如果把数字与字符串相加，结果将成为字符串。

eg：

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     var str1="This is";
11     var str2="a nice day";
12     document.write(str1+str2);
13     document.write("<br>");    //换行
14     document.write(str1+" "+str2);
15     document.write("<br>");
16     var x1=5+5;
17     var x2="5"+"5";
18     var x3=5+"5";
19     var x4="5"+5;
20     document.write(x1);document.write("<br>");
21     document.write(x2);document.write("<br>");
22     document.write(x3);document.write("<br>");
23     document.write(x4);document.write("<br>");
24 </script>
25 </body>
26 </html>

　　效果：

4、比较运算符：在逻辑语句中使用，以测定变量或值是否相等。

　　给定 x=5，下面的表格解释了比较运算符：

5、逻辑运算符：用于测定变量或值之间的逻辑

　　给定 x=6 以及 y=3，下表解释了逻辑运算符：

6、条件运算符：基于某些条件对变量进行赋值

　　　　语法：variablename=(condition)?value1:value2 ；

　　condition是一个判断语句，其值为Boolean类型，若值为true，variablename=value1；若值为false，variablename=value2.

7、运算符的优先级

　　表达式按照从左至右的规则来求值，在这个大原则下，需要按照运算符的优先级来进行求值

优先级	运算符	说明
1	（）【】 .	圆括号、方括号、点号
2	！ - ++ -- typedef void	求反及递增运算符
3	* / %	乘除及求模
4	+ -	加减运算
5	< <= > >=	关系运算符
6	== !=	相等运算符
7	&&	逻辑与
8	\|\|	逻辑或
9	= += -= *= /= %=	赋值运算符

五、条件语句

1、if....else

　　（1）语法：if (条件){条件成立时执行此代码} else {条件不成立时执行此代码}；

　　　　**在语法中没有 else。仅仅当条件为 true 时，代码才会执行。**

　　（2）If...else if...else 语句：

　　　　语法：if (条件1){条件1成立时执行代码}
　　　　　　　　else if (条件2){条件2成立时执行代码}
　　　　　　　　else{条件1和条件2均不成立时执行代码}　

2、switch

　　语法：switch(n){
   　　　　　　case 1: 执行代码块 1；break；
   　　　　　　case 2:执行代码块 2； break；
   　　　　　　default:如果n即不是1也不是2，则执行此代码；
   　　　　}

　　　　switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case
　　相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。

六、JavaScript消息框

1、警告框：警告框经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作。

　　语法：alert("文本")；

　　*带折行的警告框只需在文字中间加上' '即可

　　eg：

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     function dis_alert1() {
11         alert("显示警告框");
12     }
13     function dis_alert2() {
14         alert("显示带折行的警告框"+'
'+"显示带折行的警告框");
15     }
16 </script>
17 <input type="button" value="显示警告框" onclick="dis_alert1()" />  <!--onclick表示点击时该事件发生-->
18 <input type="button" value="显示带折行的警告框" onclick="dis_alert2()" /> 
19 </body>
20 </html>

　　效果：

2、确认框：确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

　　语法：confirm("文本")；

　　eg：

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     function dis_confirm() {
11         confirm("是否关闭确认框");
12     }
13 </script>
14 <input type="button" value="显示确认框" onclick="dis_confirm()" />  <!--onclick表示点击时该事件发生-->
15 </body>
16 </html>

　　效果：

3、提示框：提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

　　语法：prompt("文本","默认值")；

　　eg：

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     function dis_prompt() {
11         prompt("显示提示框","hello");
12     }
13 </script>
14 <input type="button" value="显示提示框" onclick="dis_prompt()" />  <!--onclick表示点击时该事件发生-->
15 </body>
16 </html>

　　效果：

七、JavaScript 函数

　　函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。函数在页面起始位置定义，即 <head> 部分。

1、创建函数的语法：

function 函数名(var1,var2,...,varX)
  {
  代码．．．
  }

　　var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。无参数的函数必须在其函数名后加括号：

2、return 语句：用来规定从函数返回的值。

3、JavaScript 变量的生存期：

　　当我们在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。我们可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。如果我们在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

4、实例

　　（1）带参数的函数

 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 type="text/javascript">
 7     function demo1(x) {
 8         var a=x+9;
 9         document.write(a);
10     }
11 </script>
12 </head>
13 
14 <body>
15 <input type="button" value="结果" onclick="demo1(5)" />  <!--onclick表示点击时该事件发生-->
16 </body>
17 </html>

　　结果：

　　-------------------->

　　（2）带返回值的函数

 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 type="text/javascript">
 7     function demo1() {
 8         return("Hello World!");
 9     }
10 </script>
11 </head>
12 
13 <body>
14 <script type="text/javascript">
15     document.write(demo1());
16 </script>
17 </body>
18 </html>

　　效果：

　　（3）带参数和返回值的函数

 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 type="text/javascript">
 7     function demo(a,b) {
 8         return(a*b);
 9     }
10 </script>
11 </head>
12 
13 <body>
14 <script type="text/javascript">
15     document.write(demo(8,4));
16 </script>
17 </body>
18 </html>

　　效果：　　　　

八、JavaScript 循环

1、for循环：在脚本的运行次数已确定的情况下使用 for 循环。

　　语法：

for (变量=开始值;变量<=结束值;变量=变量+步进值) 
{
    需执行的代码
}

　　eg：循环输出标题：

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     for (i = 1; i <= 6; i++){
11         document.write("<h" + i + ">这是标题 " + i)
12         document.write("</h" + i + ">")
13     }
14 
15 </script>
16 </body>
17 </html>

　　效果：　　

2、while循环：while 循环用于在指定条件为 true 时循环执行代码。

　　语法：

while (条件表达式)
{
    需执行的代码
}

3、do...while 循环：
　　do...while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do...while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。

　　语法：

do
{
    需执行的代码
}
while (条件表达式)

4、循环语句中用来终止循环：
　　（1）break：break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     var i=0;
11     for (i=0;i<=10;i++){
12         if (i==3){break;}
13         document.write("The number is " + i);
14         document.write("<br />");
15     }
16 </script>
17 </body>
18 </html>

　结果：　

　　（2）continue：continue 命令会终止当前的循环，然后从下一个值继续运行。

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     var i=0;
11     for (i=0;i<=10;i++){
12         if (i==3){continue;}
13         document.write("The number is " + i);
14         document.write("<br />");
15     }
16 </script>
17 </body>
18 </html>

　　　　　　结果：

5、For...In 声明：用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

　　语法：“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。

for (变量 in 对象)
{
    在此执行代码
}

　　eg：

 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 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10     var x;
11     var mycars = new Array();  //array() 函数用于创建数组。
12     mycars[0] = "Saab";
13     mycars[1] = "Volvo";
14     mycars[2] = "BMW";
15 
16     for (x in mycars){
17         document.write(mycars[x] + "<br />");
18     }
19 </script>
20 
21 </script>
22 </body>
23 </html>

　　　　效果：

九、JavaScript 事件

　　事件是可以被 JavaScript 侦测到的行为。事件通常与函数配合使用，当事件发生时函数才会执行。

　　事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

1、onload 和 onunload

　　当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。

eg：

 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 type="text/javascript">
 7     function hello() {
 8         alert("Hello World!");
 9     }
10     
11     function bye() {
12         alert("God Bye!");
13     }
14 
15 </script>
16 </head>
17 
18 <body onload="hello()" onunload="bye()">
19 
20 </body>
21 </html>

　　　　　　效果：

2、onFocus, onBlur 和 onChange

　　onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。onfocus 事件在对象获得焦点时发生。onfocus 通常用于 <input>, <select>, 和<a>.

 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 type="text/javascript">
 7     function hello() {
 8         alert("Hello World!");
 9     }
10     
11     function bye() {
12         alert("God Bye!");
13     }
14     
15     function myFunction() {
16         var x=document.getElementById("fname");
17         x.value=x.value.toUpperCase();
18     }
19 
20 </script>
21 </head>
22 
23 <body>
24     输入框1<input type="text" onfocus="hello()" /><br />
25     输入框2<input type="text" onblur="bye()" /><br />
26     输入你的名字: <input type="text" id="fname" onchange="myFunction()"><!--onChange 事件的例子。当你离开输入框后，函数将被触发，将小写字母转为大写字母。-->
27 
28 </body>
29 </html>

　　效果：

鼠标放在输入框1时：鼠标放在输入框2然后离开时：

输入名字：离开名字的输入框后：

3、onSubmit

　　onSubmit 用于在提交表单之前验证所有的表单域。当用户单击表单中的确认按钮时，onSubmit中的函数就会被调用。假若域的值无效，此次提交就会被取消。onSubmit中的函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

　　eg：

 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 type="text/javascript">
 7     function myFunction() {
 8         alert("表单已提交");
 9     }
10 
11 </script>
12 </head>
13 
14 <body>
15     <form onsubmit="myFunction()">
16           输入名字: <input type="text" name="fname" />
17           <input type="submit" value="提交" />
18     </form>
19 </body>
20 </html>

　　　　　　效果：

4、onMouseOver 和 onMouseOut

　　onMouseOver 和 onMouseOut 用来创建“动态的”按钮。onmouseover 事件会在鼠标指针移动到指定的元素上时发生，onMouseOut与之相反。

eg：

 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 </head>
 7 
 8 <body>
 9     <table border="1" cellpadding="10" cellspacing="0">
10         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
11             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>
12         </tr>
13         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
14             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>
15         </tr>
16         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
17             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>
18         </tr>
19         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
20             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>
21         </tr>
22     </table>
23 </body>
24 </html>

　　　　效果：

十、JavaScript中获取错误的方法

1、try...catch语句：作用是测试代码中的错误。try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。

　　　　（1）有两种在网页中捕获错误的方法：

使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

　　注意：chrome、opera 和 safari 浏览器不支持 onerror 事件。

　　语法：

try
{
   //在此运行代码
}
catch(err)
{
   //在此处理错误
}

　　（2）实例：

　　用在用户点击按钮时显示 "Welcome guest!" 这个消息。不过 message() 函数中的 alert() 被误写为 adddlert()。这时错误发生了。可以添加 try...catch 语句，这样当错误发生时可以采取更适当的措施。

 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 type="text/javascript">
 7     var txt=""
 8     function message() {
 9         try {
10               adddlert("Welcome guest!");
11           }
12         catch(err){
13               txt="此页面存在一个错误。

"
14             txt+="错误描述: " + err.description + "

";
15             txt+="点击OK继续。

";
16             alert(txt);
17         }
18     }
19 </script>
20 
21 </head>
22 
23 <body>
24     <input type="button" value="View message" onclick="message()" />
25 </body>
26 </html>

　　　　效果：

2、throw 声明：作用是创建 exception（异常或错误）。可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。

　　（1）语法：throw 语句抛出一个错误。当错误发生时， JavaScript 会停止执行并抛出错误信息。

throw(exception)

　　exception 可以是字符串、整数、逻辑值或者对象。

　　（2）实例：

　　实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。

 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 </head>
 7 
 8 <body>
 9     <script type="text/javascript">
10         var x=prompt("Enter a number between 0 and 10:","")
11         try{ 
12             if(x>10) throw "Err1";
13             else if(x<0) throw "Err2";
14         } 
15         catch(er){
16             if(er=="Err1")  alert("Error! The value is too high");
17             if(er == "Err2") alert("Error! The value is too low") ;
18         }
19     </script>
20 
21 </body>
22 </html>

　　效果：

---------->

--------->

3、onerror 事件

　　使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

　　（1）语法：

onerror=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

　　浏览器是否显示标准的错误消息，取决于 onerror 的返回值。如果返回值为 false，则在控制台 (JavaScript console) 中显示错误消息。反之则不会。

　　（2）实例：

 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 </head>
 7 
 8 <body>
 9     <script type="text/javascript">
10         onerror=handleErr;
11         var txt="";
12 
13         function handleErr(msg,url,l){
14             txt="There was an error on this page.

";
15             txt+="Error: " + msg + "
";
16             txt+="URL: " + url + "
";
17             txt+="Line: " + l + "

";
18             txt+="Click OK to continue.

";
19             alert(txt);
20             return true;
21         }
22 
23         function message(){
24             adddlert("Welcome guest!");
25         }
26 
27     </script>
28     <input type="button" value="View message" onclick="message()" />
29 
30 </body>
31 </html>

　　效果：

十一、JavaScript 特殊字符

　　反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

eg：在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。

　　**实际上在DW中输入语句var txt1="We are the so-called "Vikings" from the north."系统会报错，程序将无法运行。

十二、注意事项

1、JavaScript 对大小写敏感

　　名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数，同样，变量 "myVar" 和变量 "myvar" 也是不同的。JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时，请注意字符的大小写。

2、空格

　　JavaScript 会忽略多余的空格。所以可以在代码中添加适当的空格，使得代码的可读性更强。

3、换行

　　可以在文本字符串内部使用反斜杠对代码进行折行。

查看全文

相关阅读:
C++中整型变量的存储大小和范围
 A1038 Recover the Smallest Number (30 分)
A1067 Sort with Swap(0, i) (25 分)
A1037 Magic Coupon (25 分)
A1033 To Fill or Not to Fill (25 分)
A1070 Mooncake (25 分)
js 获取控件
 C#代码对SQL数据库添加表或者视图
 JS 动态操作表格
 jQuery取得下拉框选择的文本与值

原文地址：https://www.cnblogs.com/jasmine-95/p/5011221.html