JavaScript教程.doc

JavaScript 教程 什么是 JavaScript？ JavaScript 被设计用来向 HTML 页面添加交互行为。 JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。 JavaScript 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。 JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。 所有的人无需购买许可证均可使用 JavaScript。 Java 和 JavaScript 是相同的吗？不同！在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言。Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C+。JavaScript 能做什么？JavaScript 为 HTML 设计师提供了一种编程工具 HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。 JavaScript 可以将动态的文本放入 HTML 页面 类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write( + name + ) JavaScript 可以对事件作出响应 可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。 JavaScript 可以读写 HTML 元素 JavaScript 可以读取及改变 HTML 元素的内容。 JavaScript 可被用来验证数据 在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。 JavaScript 可被用来检测访问者的浏览器 JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。 JavaScript 可被用来创建 cookies JavaScript 可被用来存储和取回位于访问者的计算机中的信息。 真实的名称是 ECMAScriptJavaScript 的正式名称是 ECMAScript。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。在 1998 年，该标准成为了国际 ISO 标准 (ISO/IEC 16262)。这个标准仍然处于发展之中。HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。实例生成文本 如何在页面中写文本 生成普通文本和标签 如何使用 JavaScript 在页面中写入普通文本和标签。 如何把 JavaScript 放入 HTML 页面document.write(Hello World!);上面的代码会在 HTML 页面中产生这样的输出：Hello World! 实例解释：如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 标签（同时使用 type 属性来定义脚本语言）。这样， 和 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。.document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。把 document.write 命令输入到 与之间后，浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 Hello World!。document.write(Hello World!);TIY注意：如果我们不使用 标签，浏览器就会把 document.write(Hello World!) 当作纯文本来处理，也就是说会把这条命令本身写到页面上。TIY如何与老的浏览器打交道那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签：注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。当页面载入时，会执行位于 body 部分的 JavaScript。当被调用时，位于 head 部分的 JavaScript 才会被执行。实例head 部分 包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。 body 部分 执行位于 body 部分的脚本。 外部 JavaScript 如何访问外部脚本。 在哪里放置 JavaScript页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。位于 head 部分的脚本：当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。.位于 body 部分的脚本：在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。.在 body 和 head 部分的脚本：你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。.使用外部 JavaScript有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。注意：外部文件不能包含 标签。然后把 .js 文件指定给 标签中的 src 属性，就可以使用这个外部文件了：.提示：您可以把 .js 文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。JavaScript 是由浏览器执行的语句序列。JavaScript 语句JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。这个 JavaScript 语句告诉浏览器向网页输出 Hello world：document.write(Hello world);通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在 web 上的 JavaScript 案例中也常常会看到这种情况。分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。注释：通过使用分号，可以在一行中写多条语句。JavaScript 代码JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。本例向网页输出一个标题和两个段落：document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);TIYJavaScript 注释可用于增强代码的可读性。JavaScript 注释可以添加注释来对 JavaScript 进行解释，或者提高其可读性。单行的注释以 / 开始。本例用单行注释来解释代码：/ 这行代码输出标题：document.write(This is a header);/ 这行代码输出段落：document.write(This is a paragraph);document.write(This is another paragraph);TIYJavaScript 多行注释多行注释以 /* 开头，以 */ 结尾。本例使用多行注释来解释代码：/*下面的代码将输出一个标题和两个段落*/document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);TIY使用注释来防止执行在本例中，我们用注释来阻止一行代码的执行：document.write(This is a header);document.write(This is a paragraph);/document.write(This is another paragraph);TIY在本例中，我们用注释来阻止若干行代码的执行：/*document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);*/TIY在行末使用注释在本例中，注释放置在语句的行末：document.write(Hello); / 输出 Hello document.write(World); / 输出 World JavaScript 变量变量是用于存储信息的容器：x=5; length=66.10;还记得在学校里学过的代数吗？当您回忆在学校学过的代数课程时，想到的很可能是：x=5, y=6, z=x+y 等等。还记得吗，一个字母可以保存一个值（比如 5），并且可以使用上面的信息计算出 z 的值是 11。您一定没有忘记，对吧。这些字母称为变量，变量可用于保存值 (x=5) 或表达式 (z=x+y)。JavaScript 变量正如代数一样，JavaScript 变量用于保存值或表达式。可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。JavaScript 变量也可以保存文本值，比如 carname=Volvo。JavaScript 变量名称的规则： 变量对大小写敏感（y 和 Y 是两个不同的变量） 变量必须以字母或下划线开始 注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。实例在脚本执行的过程中，可以改变变量的值。可以通过其名称来引用一个变量，以此显示或改变它的值。本例为您展示原理。声明（创建） JavaScript 变量在 JavaScript 中创建变量经常被称为“声明”变量。您可以通过 var 语句来声明 JavaScript 变量：var x;var carname;在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值：var x=5;var carname=Volvo;注释：在为变量赋文本值时，请为该值加引号。向 JavaScript 变量赋值通过赋值语句向 JavaScript 变量赋值：x=5;carname=Volvo;变量名在 = 符号的左边，而需要向变量赋的值在 = 的右侧。在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。向未声明的 JavaScript 变量赋值如果您所赋值的变量还未进行过声明，该变量会自动声明。这些语句：x=5;carname=Volvo; 与这些语句的效果相同：var x=5;var carname=Volvo; 重新声明 JavaScript 变量如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。var x=5;var x; 在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。JavaScript 算术正如代数一样，您可以使用 JavaScript 变量来做算术：y=x-5;z=y+5; 在本教程的下一节中，您将学习能够在 JavaScript 变量间使用的运算符。JavaScript 运算符运算符 = 用于赋值。运算符 + 用于加值。运算符 = 用于给 JavaScript 变量赋值。算术运算符 + 用于把值加起来。y=5;z=2;x=y+z; 在以上语句执行后，x 的值是 7。JavaScript 算术运算符算术运算符用于执行变量与/或值之间的算术运算。给定 y=5，下面的表格解释了这些算术运算符：运算符描述例子结果+加x=y+2 x=7 -减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1+累加x=+yx=6 -递减x=-yx=4 JavaScript 赋值运算符赋值运算符用于给 JavaScript 变量赋值。给定 x=10 和 y=5，下面的表格解释了赋值运算符：运算符例子等价于结果=x=yx=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0用于字符串的 + 运算符+ 运算符用于把文本值或字符串变量加起来（连接起来）。如需把两个或多个字符串变量连接起来，请使用 + 运算符。txt1=What a very;txt2=nice day;txt3=txt1+txt2;在以上语句执行后，变量 txt3 包含的值是 What a verynice day。要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：txt1=What a very ;txt2=nice day;txt3=txt1+txt2;或者把空格插入表达式中：txt1=What a very;txt2=nice day;txt3=txt1+ +txt2;在以上语句执行后，变量 txt3 包含的值是：What a very nice day对字符串和数字进行加法运算请看这些例子：x=5+5;document.write(x);x=5+5;document.write(x);x=5+5;document.write(x);x=5+5;document.write(x);TIY规则是：如果把数字与字符串相加，结果将成为字符串。JavaScript 比较和逻辑运算符比较和逻辑运算符用于测试 true 或 false。比较运算符比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定 x=5，下面的表格解释了比较运算符：运算符描述例子=等于x=8 为 false=全等（值和类型）x=5 为 true；x=5 为 false!=不等于x!=8 为 true大于x8 为 false小于x=大于或等于x=8 为 false=小于或等于x=8 为 true如何使用可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：if (age18) document.write(Too young);您将在本教程的下一节中学习更多有关条件语句的知识。逻辑运算符逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：运算符描述例子&and(x 1) 为 true|or(x=5 | y=5) 为 false!not!(x=y) 为 true条件运算符JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。语法variablename=(condition)?value1:value2例子greeting=(visitor=PRES)?Dear President :Dear ;如果变量 visitor 中的值是 PRES，则向变量 greeting 赋值 Dear President ，否则赋值 Dear。JavaScript If.Else 语句JavaScript 中的条件语句用于完成不同条件下的行为。实例If 语句 如何编写一个 If 语句。 If.else 语句 如何编写 if.else 语句。 If.else if.else 语句 如何编写 if.else if.else 语句 随机链接 本例演示一个随机的链接，当您单击这个链接时，会打开某个随机的网站。 条件语句在您编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。在 JavaScript 中，我们可以使用下面几种条件语句：if 语句 在一个指定的条件成立时执行代码。 if.else 语句 在指定的条件成立时执行代码，当条件不成立时执行另外的代码。 if.else if.else 语句 使用这个语句可以选择执行若干块代码中的一个。 switch 语句 使用这个语句可以选择执行若干块代码中的一个。 If 语句如果希望指定的条件成立时执行代码，就可以使用这个语句。语法：if (条件)条件成立时执行代码 注意：请使用小写字母。使用大写的 IF 会出错！实例 1/Write a Good morning greeting if/the time is less than 10var d=new Date()var time=d.getHours()if (time10) document.write(Good morning)实例 2/Write Lunch-time! if the time is 11var d=new Date()var time=d.getHours()if (time=11) document.write(Lunch-time!)注意：请使用双等号 (=) 来比较变量！注意：在语法中没有 else。仅仅当条件为 true 时，代码才会执行。If.else 语句如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用 if.else 语句。语法：if (条件)条件成立时执行此代码else条件不成立时执行此代码实例/If the time is less than 10,/you will get a Good morning greeting./Otherwise you will get a Good day greeting.var d = new Date()var time = d.getHours()if (time 10) document.write(Good morning!)elsedocument.write(Good day!)If.else if.else 语句当需要选择多套代码中的一套来运行时，请使用 if.else if.else 语句。语法：if (条件1)条件1成立时执行代码else if (条件2)条件2成立时执行代码else条件1和条件2均不成立时执行代码实例：var d = new Date()var time = d.getHours()if (time10)document.write(Good morning)else if (time10 & time16)document.write(Good day)elsedocument.write(Hello World!)JavaScript Switch 语句JavaScript 中的条件语句用于完成基于不同条件的行为。实例Switch 语句 如何编写一个 Switch 语句。 JavaScript Switch 语句如果希望选择执行若干代码块中的一个，你可以使用 switch 语句：语法：switch(n) case 1: 执行代码块 1 break case 2: 执行代码块 2 break default: 如果n即不是1也不是2，则执行此代码 工作原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。实例：/You will receive a different greeting based/on what day it is. Note that Sunday=0,/Monday=1, Tuesday=2, etc.var d=new Date()theDay=d.getDay()switch (theDay) case 5: document.write(Finally Friday) break case 6: document.write(Super Saturday) break case 0: document.write(Sleepy Sunday) break default: document.write(Im looking forward to this weekend!)JavaScript 消息框可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。实例警告框 带有折行的警告框 确认框 提示框 警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert(文本)确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm(文本)提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt(文本,默认值)JavaScript 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。实例函数 如何调用函数。 带有参数的函数 如何向函数传递变量，以及如何在函数中使用该变量。 带有参数的函数 2 如何向函数传递多个变量，以及如何在函数中使用这些变量。 返回值的函数 如何从函数返回值。 带有参数并返回值的函数 如何向函数输入两个参数值，并返回值。 JavaScript 函数将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 部分。function displaymessage()alert(Hello World!)亲自试一试假如上面的例子中的 alert(Hello world!) 没有被写入函数，那么当页面被载入时它就会执行。现在，当用户击中按钮时，脚本才会执行。我们给按钮添加了 onClick 事件，这样按钮被点击时函数才会执行。在 JS 事件这一章，你会学到更多关于 JavaScript 事件的知识。如何定义函数创建函数的语法：function 函数名(var1,var2,.,varX) 代码 var1, var2 等指的是传入函数的变量或值。 和 定义了函数的开始和结束。注意：无参数的函数必须在其函数名后加括号：function 函数名()代码注意：别忘记 JavaScript 中大小写字母的重要性。function 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。return 语句return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。例子下面的函数会返回两个数相乘的值（a 和 b）：function prod(a,b)x=a*breturn x当您调用上面这个函数时，必须传入两个参数：product=prod(2,3)而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。JavaScript For 循环JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true 时）。实例For 循环 如何编写 loop 循环来按照指定的次数执行相同的代码。 循环产生 HTML 标题 如何使用Loop循环来产生不同的HTML标题。 JavaScript 循环在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。JavaScript 有两种不同种类的循环：for 将一段代码循环执行指定的次数 while 当指定的条件为 true 时循环执行代码 for 循环在脚本的运行次数已确定的情况下使用 for 循环。语法：for (变量=开始值;变量=结束值;变量=变量+步进值) 需执行的代码实例：解释：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。注释：步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。var i=0for (i=0;i=10;i+)document.write(The number is + i)document.write()结果：The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9The number is 10while 循环我们将在下一节中学习 while 循环。JavaScript While 循环JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true 时）。实例While 循环 利用 while 循环在指定条件为 true 时来循环执行代码。 Do while 循环 利用 do.while 循环在指定条件为 true 时来循环执行代码。在即使条件为 false 时，这种循环也会至少执行一次。这是因为在条件被验证前，这个语句就会执行。 while 循环while 循环用于在指定条件为 true 时循环执行代码。语法：while (变量=结束值) 需执行的代码注意：除了=，还可以使用其他的比较运算符。实例：解释：下面的例子定义了一个循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。var i=0while (i=10)document.write(The number is + i)document.write()i=i+1结果：The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9The number is 10do.while 循环do.while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do.while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。语法：do 需执行的代码while (变量=结束值)实例：var i=0do document.write(The number is + i)document.write()i=i+1while (i0)结果：The number is 0JavaScript Break 和 Continue有两种可以用在循环中的语句：break 和 continue。实例break 语句 使用 break 语句来终止循环。 continue 语句 使用 continue 语句来终止当前的循环，然后从下一个值继续执行。 JavaScript break 和 continue 语句有两种特殊的语句可用在循环内部：break 和 continue。Breakbreak 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。实例：var i=0for (i=0;i=10;i+)if (i=3)breakdocument.write(The number is + i)document.write()结果：The number is 0The number is 1The number is 2Continuecontinue 命令会终止当前的循环，然后从下一个值继续运行。实例：var i=0for (i=0;i=10;i+)if (i=3)continuedocument.write(The number is + i)document.write()结果：The number is 0The number is 1The number is 2The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9The number is 10JavaScript for.in 语句for.in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。实例for.in 语句 如何使用 for.in 语句来遍历数组内的元素。 JavaScript for.in 语句for.in 语句用于对数组或者对象的属性进行循环操作。for . in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。语法：for (变量 in 对象) 在此执行代码“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。实例：使用 for . in 循环遍历数组。var xvar mycars = new Array()mycars0 = Saabmycars1 = Volvomycars2 = BMWfor (x in mycars)document.write(mycarsx + )JavaScript 事件事件是可以被 JavaScript 侦测到的行为。事件JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。事件举例： 鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意：事件通常与函数配合使用，当事件发生时函数才会执行。如果需要更多有关 Javascript 可识别事件的知识，请阅读我们的 JavaScript 事件参考手册。onload 和 onUnload当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：Welcome John Doe!。onFocus, onBlur 和 onChangeonFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。onSubmitonSubmit 用于在提交表单之前验证所有的表单域。下面是一个使用 onSubm