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 注释标签:<!--XXX//-->

  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)

      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、命名规则

  • 变量对大小写敏感:yY 是两个不同的变量;(因为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=10y=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("文本");

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

  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("显示带折行的警告框"+'\n'+"显示带折行的警告框");
  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、创建函数的语法:

  1. function 函数名(var1,var2,...,varX)
  2. {
  3. 代码...
  4. }

  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 循环。

  语法:

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

  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 时循环执行代码。

  语法:

  1. while (条件表达式)
  2. {
  3. 需执行的代码
  4. }

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

  语法:

  1. do
  2. {
  3. 需执行的代码
  4. }
  5. 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 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

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

  1. for (变量 in 对象)
  2. {
  3. 在此执行代码
  4. }

  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 事件。

  语法:

  1. try
  2. {
  3. //在此运行代码
  4. }
  5. catch(err)
  6. {
  7. //在此处理错误
  8. }

  (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="此页面存在一个错误。\n\n"
  14. txt+="错误描述: " + err.description + "\n\n";
  15. txt+="点击OK继续。\n\n";
  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 会停止执行并抛出错误信息。

  1. 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)语法:

  1. onerror=handleErrfunction handleErr(msg,url,l)
  2. {
  3. //Handle the error here
  4. return true or false
  5. }

  浏览器是否显示标准的错误消息,取决于 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.\n\n";
  15. txt+="Error: " + msg + "\n";
  16. txt+="URL: " + url + "\n";
  17. txt+="Line: " + l + "\n\n";
  18. txt+="Click OK to continue.\n\n";
  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、换行

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


JavaScript学习基础部分的更多相关文章

  1. JavaScript学习基础篇【第1篇】: JavaScript 入门

    JavaScript 快速入门 JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中,由<script>...< ...

  2. JavaScript学习 - 基础(二) - 基础类型/类型转换

    基础类型 - 数字类型(Number) 1.最基本的数据类型 2.不区分整型数值和浮点型数值 3.所有数字采用64位浮点格式存储,相当于Java和C语言中double格式 4.能表示的最大值 +- 1 ...

  3. JavaScript学习 - 基础(一)

    ECMAscript ECMAscript是一个重要的标准,但它并不是JAVAscript唯一的部分,当然,也不是唯一标准化的部分,实际上,一个完整的JAVAscript实现是由一下3个不同的部分组成 ...

  4. JavaScript学习基础

    基本语法    JavaScript语法和Java语言类似,每个语句以 : 结束,语句块用 {...}包起来.JavaScript并不强制要求在每个语句的结尾加: ,但是建议都加上,不给自己找麻烦.  ...

  5. JavaScript学习基础2

    ##JavaScript基本对象 1 .function:函数(方法)对象 * 创建: 1.var fun =new Function(形式参数,方法体): 2.function 方法名(参数){ 方 ...

  6. JavaScript学习基础1

    ##JavaScript: # 概念:一门运行在客户端的脚本语言 *运行在客户端浏览器中的.属于前端三件套之一,属于静态资源,每一个浏览器都有JavaScript的解析引擎 *脚本语言:不需要编译,直 ...

  7. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  8. JavaScript学习 - 基础(七) - DOM event(事件)

    DOM event(事件) 定义事件: // 定义事件: //方式一,直接在标签上定义事件 // 方式二: var a11 = document.getElementsByName('a11')[0] ...

  9. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

随机推荐

  1. Bestcoder Round# 80

    [1003 Sequence] 指数循环节,注意a mod p = 0的情况.此时你的循环节如果返回0,这时你会输出1,而实际上应该是0 #include <algorithm> #inc ...

  2. MyBatis学习---使用MyBatis_Generator生成Dto、Dao、Mapping

    由于MyBatis属于一种半自动的ORM框架,所以主要的工作将是书写Mapping映射文件,但是由于手写映射文件很容易出错,所以查资料发现有现成的工具可以自动生成底层模型类.Dao接口类甚至Mappi ...

  3. CSS中a标签样式的“爱恨”原则

    CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 1 :link 2 :visited 3 :h ...

  4. handler的理解笔记

    应用程序启动时,Android首先会开启一个主线程,如果此时需要一个耗时的操作,你不能把这些操作放在主线程中,如果你放在主线程中的话,界面会出现假死现象,这个时候我们需要把这些耗时的操作,放在一个子线 ...

  5. 【iCore2模块】VGA模块样板谍照!

    基于 iCore2 双核心板的 VGA模块样机做出来好久了,经过一个多月的努力奋战,该模块的代码已经写完,硬件也测试完毕,性能很好.下面贴几张图: 照片一: 为了节约时间,打样用的是绿色的板子,不过批 ...

  6. Web 在线文件管理器学习笔记与总结(7)重命名文件

    rename($oldname,$newname) 重命名文件或目录 <<<EOF EOF; 使用heredoc 技术,来部分实现界面与代码的准分离 重命名时,需要验证新文件名的合法 ...

  7. MySQL DATE_FORMAT() 函数

    定义和用法 DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据. 语法 DATE_FORMAT(date,format) date 参数是合法的日期.format 规定日期/时间的输出 ...

  8. VIM常用快捷键~网页上查找

    转自~木枫林 转自~鸟哥的私房菜 第十章.vim 程序编辑器 第十章.vim 程序编辑器 最近更新日期:2009/08/20 2. vi 的使用 2.1 简易执行范例 2.2 按键说明 2.3 一个案 ...

  9. PHP调用java的class

    PHP调用java的class   转:http://hi.baidu.com/lei0827/blog/item/28439a4e923234ced1c86a18.html PHP调用java的cl ...

  10. A20的板子笔记

    除了串口可以登入控制台,还可以用SSH2. ftp连接的时候要打开  vi /usr/sbin/stupid-ftpd.conf 修改端口,修改完端口,登入的时候root的密码跟以前不一样,可以从st ...