JavaScript学习基础部分

2022-05-17 16:23:40

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!")
当作纯文本来处理，也就是说会把这条命令本身写到页面上。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 </script>

 <script type="text/javascript">

     document.write("Hello World!");

 </script>

 document.write("Hello World!");

 </body>

 </html>

　效果：

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

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

 <html>

 <body>

 <script type="text/javascript">

 <!--

 document.write("Hello World!");

 //-->

 </script>

 </body>

 </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!");

　　　　源文件：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript" src="HelloWorld.js">

 </script>

 </body>

 </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：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     var str1="This is";

     var str2="a nice day";

     document.write(str1+str2);

     document.write("<br>");    //换行

     document.write(str1+" "+str2);

     document.write("<br>");

     var x1=5+5;

     var x2="5"+"5";

     var x3=5+"5";

     var x4="5"+5;

     document.write(x1);document.write("<br>");

     document.write(x2);document.write("<br>");

     document.write(x3);document.write("<br>");

     document.write(x4);document.write("<br>");

 </script>

 </body>

 </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：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     function dis_alert1() {

         alert("显示警告框");

     }

     function dis_alert2() {

         alert("显示带折行的警告框"+'\n'+"显示带折行的警告框");

     }

 </script>

 <input type="button" value="显示警告框" onclick="dis_alert1()" />  <!--onclick表示点击时该事件发生-->

 <input type="button" value="显示带折行的警告框" onclick="dis_alert2()" />

 </body>

 </html>

　　效果：

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

　　语法：confirm("文本")；

　　eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     function dis_confirm() {

         confirm("是否关闭确认框");

     }

 </script>

 <input type="button" value="显示确认框" onclick="dis_confirm()" />  <!--onclick表示点击时该事件发生-->

 </body>

 </html>

　　效果：

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

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

　　eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     function dis_prompt() {

         prompt("显示提示框","hello");

     }

 </script>

 <input type="button" value="显示提示框" onclick="dis_prompt()" />  <!--onclick表示点击时该事件发生-->

 </body>

 </html>

　　效果：

七、JavaScript 函数

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

1、创建函数的语法：

function 函数名(var1,var2,...,varX)

  {

  代码．．．

  }

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

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

3、JavaScript 变量的生存期：

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

4、实例

　　（1）带参数的函数

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script type="text/javascript">

     function demo1(x) {

         var a=x+9;

         document.write(a);

     }

 </script>

 </head>

 <body>

 <input type="button" value="结果" onclick="demo1(5)" />  <!--onclick表示点击时该事件发生-->

 </body>

 </html>

　　结果：

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

　　（2）带返回值的函数

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script type="text/javascript">

     function demo1() {

         return("Hello World!");

     }

 </script>

 </head>

 <body>

 <script type="text/javascript">

     document.write(demo1());

 </script>

 </body>

 </html>

　　效果：

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script type="text/javascript">

     function demo(a,b) {

         return(a*b);

     }

 </script>

 </head>

 <body>

 <script type="text/javascript">

     document.write(demo(8,4));

 </script>

 </body>

 </html>

　　效果：　　　　

八、JavaScript 循环

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

　　语法：

for (变量=开始值;变量<=结束值;变量=变量+步进值)

{

    需执行的代码

}

　　eg：循环输出标题：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     for (i = 1; i <= 6; i++){

         document.write("<h" + i + ">这是标题 " + i)

         document.write("</h" + i + ">")

     }

 </script>

 </body>

 </html>

　　效果：　　

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

　　语法：

while (条件表达式)

{

    需执行的代码

}

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

　　语法：

do

{

    需执行的代码

}

while (条件表达式)

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     var i=0;

     for (i=0;i<=10;i++){

         if (i==3){break;}

         document.write("The number is " + i);

         document.write("<br />");

     }

 </script>

 </body>

 </html>

　结果：　

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     var i=0;

     for (i=0;i<=10;i++){

         if (i==3){continue;}

         document.write("The number is " + i);

         document.write("<br />");

     }

 </script>

 </body>

 </html>

　　　　　　结果：

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

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

for (变量 in 对象)

{

    在此执行代码

}

　　eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

 <script type="text/javascript">

     var x;

     var mycars = new Array();  //array() 函数用于创建数组。

     mycars[0] = "Saab";

     mycars[1] = "Volvo";

     mycars[2] = "BMW";

     for (x in mycars){

         document.write(mycars[x] + "<br />");

     }

 </script>

 </script>

 </body>

 </html>

　　　　效果：

九、JavaScript 事件

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

　　事件举例：

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

1、onload 和 onunload

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

eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script type="text/javascript">

     function hello() {

         alert("Hello World!");

     }

     function bye() {

         alert("God Bye!");

     }

 </script>

 </head>

 <body onload="hello()" onunload="bye()">

 </body>

 </html>

　　　　　　效果：

2、onFocus, onBlur 和 onChange

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script type="text/javascript">

     function hello() {

         alert("Hello World!");

     }

     function bye() {

         alert("God Bye!");

     }

     function myFunction() {

         var x=document.getElementById("fname");

         x.value=x.value.toUpperCase();

     }

 </script>

 </head>

 <body>

     输入框1<input type="text" onfocus="hello()" /><br />

     输入框2<input type="text" onblur="bye()" /><br />

     输入你的名字: <input type="text" id="fname" onchange="myFunction()"><!--onChange 事件的例子。当你离开输入框后，函数将被触发，将小写字母转为大写字母。-->

 </body>

 </html>

　　效果：

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

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

3、onSubmit

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

　　eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script type="text/javascript">

     function myFunction() {

         alert("表单已提交");

     }

 </script>

 </head>

 <body>

     <form onsubmit="myFunction()">

           输入名字: <input type="text" name="fname" />

           <input type="submit" value="提交" />

     </form>

 </body>

 </html>

　　　　　　效果：

4、onMouseOver 和 onMouseOut

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

eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

     <table border="1" cellpadding="10" cellspacing="0">

         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>

         </tr>

         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>

         </tr>

         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>

         </tr>

         <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

             <td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td>

         </tr>

     </table>

 </body>

 </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 语句，这样当错误发生时可以采取更适当的措施。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script type="text/javascript">

     var txt=""

     function message() {

         try {

               adddlert("Welcome guest!");

           }

         catch(err){

               txt="此页面存在一个错误。\n\n"

             txt+="错误描述: " + err.description + "\n\n";

             txt+="点击OK继续。\n\n";

             alert(txt);

         }

     }

 </script>

 </head>

 <body>

     <input type="button" value="View message" onclick="message()" />

 </body>

 </html>

　　　　效果：

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

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

throw(exception)

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

　　（2）实例：

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

     <script type="text/javascript">

         var x=prompt("Enter a number between 0 and 10:","")

         try{

             if(x>10) throw "Err1";

             else if(x<0) throw "Err2";

         }

         catch(er){

             if(er=="Err1")  alert("Error! The value is too high");

             if(er == "Err2") alert("Error! The value is too low") ;

         }

     </script>

 </body>

 </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）实例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 </head>

 <body>

     <script type="text/javascript">

         onerror=handleErr;

         var txt="";

         function handleErr(msg,url,l){

             txt="There was an error on this page.\n\n";

             txt+="Error: " + msg + "\n";

             txt+="URL: " + url + "\n";

             txt+="Line: " + l + "\n\n";

             txt+="Click OK to continue.\n\n";

             alert(txt);

             return true;

         }

         function message(){

             adddlert("Welcome guest!");

         }

     </script>

     <input type="button" value="View message" onclick="message()" />

 </body>

 </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学习基础

相关文章