《【精品】web编程基础－css、javascript、jquery第二部分 javascript（可编辑.ppt》由会员分享，可在线阅读，更多相关《【精品】web编程基础－css、javascript、jquery第二部分 javascript（可编辑.ppt（87页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Web编程基础CSS、JavaScript、jQuery第二部分 JavaScriptWEB编程基础教学目标教学目标通过这一部分的学习让学生掌握通过这一部分的学习让学生掌握JavaScript的基础知识、基本语法和常用方法。的基础知识、基本语法和常用方法。能够熟练对网页图片、文本、菜单等对象进行网能够熟练对网页图片、文本、菜单等对象进行网页特效制作。页特效制作。网页图片滚动特效制作网页图片滚动特效制作JavaScriptJavaScript基础知识。基础知识。JavaScript的变量、运算符、条件语句、循环语句和的变量、运算符、条件语句、循环语句和JavaScript事件。事件。JavaSc
2、ript中的字符串对象、日期对象、数组对象、中的字符串对象、日期对象、数组对象、逻辑对象、算数对象使用方法。逻辑对象、算数对象使用方法。WEB编程基础教学内容教学内容重点：重点：1、JavaScript语法基础语法基础 2、JavaScript常用语句常用语句 3、JavaScript对象对象难点：难点：JavaScript对象的使用对象的使用WEB编程基础教学重难点教学重难点网页图片滚动特效制作网页图片滚动特效制作WEB编程基础 以前我们学过用标签使得对象滚动，但是它没有办法使得图片实现无缝隙的滚动。若需要对象无缝隙滚动，就要采用 DIV+CSS+JavaScript 来实现。一、图片滚动效
3、果一、图片滚动效果图图1 1 图片滚动效果图图片滚动效果图网页图片滚动特效制作网页图片滚动特效制作WEB编程基础1、JavaScript 简介（简称：JS）JavaScript JavaScript 能做什么？能做什么？JavaScript 被用来验证数据 在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。JavaScript 可被用来检测访问者的浏览器 JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。JavaScript 可被用来创建 cookies JavaScript 可被用来存储和取回位于访问者的计算机中的信息。
4、二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础2、JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（1）如何把 JavaScript 放入 HTML 页面上面的代码会在 HTML 页面中产生这样的输出：Hello World!二、关键技术二、关键技术document.write(HelloWorld!);网页图片滚动特效制作网页图片滚动特效制作WEB编程基础2、JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（1）如何把 JavaScript 放入 HTM
5、L 页面 如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 标签（同时使用 type 属性来定义脚本语言）。这样，和 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础2、JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（1）如何把 JavaScript 放入 HTML 页面 把 document.write 命令输入到 与之间后，浏览
6、器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 Hello World!。注意：注意：如果我们不使用 标签，浏览器就会把 document.write(“Hello World!”)当作纯文本来处理，也就是说会把这条命令本身写到页面上。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础2、JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（2）如何与老的浏览器打交道那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTM
7、L 注释标签：注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础2、JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（3）JavaScript放置 当页面载入时，会执行位于 body 部分的 JavaScript。当被调用时，位于 head 部分的 JavaScript 才会被执行。head 部分：包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。body 部分
8、：执行位于 body 部分的脚本。外部 JavaScript：二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础3、JavaScript 语句JavaScript 是由浏览器执行的语句序列。JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。（1）JavaScript 代码JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。本例向网页输出一个标题：二、关键技术二、关键技术document.write(Thisisaheader);网页图片滚动特效制作网页图片滚动特效制作WEB编程基础3、
9、JavaScript 语句（2）JavaScript 代码块 JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。本例向网页输出一个标题：上例的用处不大。仅仅演示了代码块的使用而已。通常，代码块用于在函数或条件语句中把若干语句组合起来（比方说如果条件满足，就可以执行这个语句分组了）。二、关键技术二、关键技术document.write(Thisisaheader);网页图片滚动特效制作网页图片滚动特效制作WEB编程基础4、JavaScript 注释 JavaScript 注释可用于增强代码的可读性。可以添加注释来对 JavaScri
10、pt 进行解释，或者提高其可读性。（1）JavaScript 单行注释 单行的注释以/开始。二、关键技术二、关键技术/这行代码输出标题：document.write(Thisisaheader);网页图片滚动特效制作网页图片滚动特效制作WEB编程基础4、JavaScript 注释（2）JavaScript 多行注释 多行注释以/*开头，以*/结尾。二、关键技术二、关键技术/*下面的代码将输出一个标题和两个段落*/document.write(Thisisaheader);document.write(Thisisaparagraph);document.write(Thisisanotherp
11、aragraph);网页图片滚动特效制作网页图片滚动特效制作WEB编程基础4、JavaScript 注释（3）使用注释来防止执行 使用单行或者多行注释可以设置不执行相应的JavaScript语句。（4）在行末使用注释 可以在行末使用单行注释来对JavaScript进行解释。二、关键技术二、关键技术document.write(Hello);/输出Hellodocument.write(World);/输出World网页图片滚动特效制作网页图片滚动特效制作WEB编程基础5、JavaScript 变量 正如代数一样，JavaScript 变量用于保存值或表达式。可以给变量起一个简短名称，比如 x，
12、或者更有描述性的名称，比如 length。JavaScript 变量也可以保存文本值，比如 carname=Volvo。JavaScript JavaScript 变量名称的规则：变量名称的规则：变量对大小写敏感（y 和 Y 是两个不同的变量）变量必须以字母或下划线开始注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础5、JavaScript 变量（1）声明（创建）JavaScript 变量 在 JavaScript 中创建变量经常被称为“声明”变量。可以通过 var 语句来声明 JavaScri
13、pt 变量：在以上声明之后，变量并没有值，不过可以在声明它们时向变量赋值：注释：在为变量赋文本值时，请为该值加引号。二、关键技术二、关键技术varx;varcarname;varx=5;varcarname=Volvo;网页图片滚动特效制作网页图片滚动特效制作WEB编程基础5、JavaScript 变量（2）向 JavaScript 变量赋值 通过赋值语句向 JavaScript 变量赋值：变量名在=符号的左边，而需要向变量赋的值在=的右侧。在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。二、关键技术二、关键技术x=5;carname=Volvo;网页图片
14、滚动特效制作网页图片滚动特效制作WEB编程基础5、JavaScript 变量（3）向未声明的 JavaScript 变量赋值 如果您所赋值的变量还未进行过声明，该变量会自动声明。这些语句：与这些语句的效果相同：二、关键技术二、关键技术x=5;carname=Volvo;varx=5;varcarname=Volvo;网页图片滚动特效制作网页图片滚动特效制作WEB编程基础5、JavaScript 变量（4）重新声明 JavaScript 变量 如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置
15、或清除。二、关键技术二、关键技术varx=5;varx;网页图片滚动特效制作网页图片滚动特效制作WEB编程基础5、JavaScript 变量（5）JavaScript 算数 正如代数一样，您可以使用 JavaScript 变量来做算术：6、JavaScript 运算符运算符=用于赋值。运算符+用于加值。二、关键技术二、关键技术y=x-5;z=y+5;网页图片滚动特效制作网页图片滚动特效制作WEB编程基础6、JavaScript 运算符运算符=用于给 JavaScript 变量赋值。算术运算符+用于把值加起来。在以上语句执行后，x 的值是 7。（1）JavaScript 算术运算符算术运算符用于
16、执行变量与/或值之间的算术运算。给定 y=5，下面的表格解释了这些算术运算符：二、关键技术二、关键技术y=5;z=2;x=y+z;网页图片滚动特效制作网页图片滚动特效制作WEB编程基础6、JavaScript 运算符（1）JavaScript 算术运算符 二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础6、JavaScript 运算符（2）JavaScript赋值运算符赋值运算符用于给 JavaScript 变量赋值。给定 x=10 和 y=5，下面的表格解释了赋值运算符：二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础6、JavaS
17、cript 运算符（3）JavaScript比较和逻辑运算符 比较和逻辑运算符用于测试 true 或 false。1）比较运算符比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定 x=5，下面的表格解释了比较运算符：二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础6、JavaScript 运算符（3）JavaScript比较和逻辑运算符 1）比较运算符 如何使用？如何使用？可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：if(age18)document.write(Too young);二、关键技术二、关键技术网页图片滚动特效制作网页图
18、片滚动特效制作WEB编程基础6、JavaScript 运算符（3）JavaScript比较和逻辑运算符 2）逻辑运算符逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础6、JavaScript 运算符（3）JavaScript比较和逻辑运算符 3）条件运算符JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。语法语法 例子例子 如果变量 visitor 中的值是“PRES”，则向变量 greeting 赋值“Dear President”，否则赋值“Dear”。
19、二、关键技术二、关键技术variablename=(condition)?value1:value2greeting=(visitor=PRES)?DearPresident:Dear;网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaScript If.Else 语句JavaScript 中的条件语句用于完成不同条件下的行为。条件语句条件语句 在编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。在 JavaScript 中，我们可以使用下面几种条件语句：if if 语句：语句：在一个指定的条件成立时执行代码。if.else if.els
20、e 语句：语句：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。if.else if.else if.else if.else 语句：语句：使用这个语句可以选择执行若干块代码中的一个。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaScript If.Else 语句（1）If 语句 如果希望指定的条件成立时执行代码，就可以使用这个语句。语法：语法：if(条件)条件成立时执行代码 注意：请使用小写字母。使用大写的 IF 会出错！二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaScript If.Else
21、 语句（1）If 语句实例实例 1 1：执行结果：Good morning二、关键技术二、关键技术/WriteaGoodmorninggreetingif/thetimeislessthan10vard=newDate()vartime=d.getHours()if(time10)document.write(Goodmorning)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaScript If.Else 语句（1）If 语句实例实例 2 2：注意：请使用双等号(=)来比较变量！注意：在语法中没有 else。仅仅当条件为 true 时，代码才会执行。二、关键技术二、关键技
22、术/WriteLunch-time!ifthetimeis11vard=newDate()vartime=d.getHours()if(time=11)document.write(Lunch-time!)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaScript If.Else 语句（2）If.else 语句 如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用 if.else 语句。语法：语法：if(条件)条件成立时执行此代码else条件不成立时执行此代码二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaSc
23、ript If.Else 语句（2）If.else 语句实例：实例：执行结果：Good morning二、关键技术二、关键技术vard=newDate()vartime=d.getHours()if(time10)document.write(Goodmorning!)elsedocument.write(Goodday!)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaScript If.Else 语句（3）If.else if.else 语句 当需要选择多套代码中的一套来运行时，请使用 if.else if.else 语句。语法：语法：二、关键技术二、关键技术if(条件1
24、)条件1成立时执行代码else if(条件2)条件2成立时执行代码else条件1和条件2均不成立时执行代码网页图片滚动特效制作网页图片滚动特效制作WEB编程基础7、JavaScript If.Else 语句（3）If.else if.else 语句实例：实例：执行结果：Good morning二、关键技术二、关键技术vard=newDate()vartime=d.getHours()if(time10)document.write(Goodmorning)elseif(time10&time16)document.write(Goodday)elsedocument.write(HelloWo
25、rld!)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础8、JavaScript Switch 语句JavaScript 中的条件语句用于完成基于不同条件的行为。如果希望选择执行若干代码块中的一个，你可以使用 switch 语句：语法：语法：二、关键技术二、关键技术switch(n)case 1:执行代码块 1 break case 2:执行代码块 2 break default:如果n即不是1也不是2，则执行此代码 网页图片滚动特效制作网页图片滚动特效制作WEB编程基础8、JavaScript Switch 语句工作原理：switch 后面的(n)可以是表达式，也可以（并通常）是变量
26、。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础9、JavaScript消息框 可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。（1）警告框 警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：语法：alert(文本)二、关键技术二、关键技术function disp_alert()alert(我是警告框！)网页图片滚动特效制作网页图片滚动特效
27、制作WEB编程基础9、JavaScript消息框（2）确认框 确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：语法：confirm(文本)二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础9、JavaScript消息框（2）确认框二、关键技术二、关键技术function show_confirm()var r=confirm(Press a button!);if(r=true)alert(You pressed OK!
28、);else alert(You pressed Cancel!);网页图片滚动特效制作网页图片滚动特效制作WEB编程基础9、JavaScript消息框（3）提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：语法：prompt(文本,默认值)二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础9、JavaScript消息框（3）提示框二、关键技术二、关键技术function disp_prompt()var
29、name=prompt(请输入您的名字,Bill Gates)if(name!=null&name!=)document.write(你好！+name+今天过得怎么样？)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础10、JavaScript函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 部分。二、关键技术二、关键技术f
30、unctiondisplaymessage()alert(HelloWorld!)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础10、JavaScript函数（1）如何定义函数语法：语法：function 函数名(var1,var2,.,varX)代码 var1,var2 等指的是传入函数的变量或值。和 定义了函数的开始和结束。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础10、JavaScript函数（1）如何定义函数无参数的函数必须在其函数名后加括号：function 函数名()代码注意：别忘记 JavaScript 中大小写字母的重要性。funct
31、ion 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础10、JavaScript函数（2）return 语句 return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。例子：例子：下面的函数会返回两个数相乘的值（a 和 b）：当您调用上面这个函数时，必须传入两个参数：product=prod(2,3)。而从 prod()函数的返回值是 6，这个值会存储在名为 product 的变量中。二、关键技术二、关
32、键技术functionprod(a,b)x=a*breturnx网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环 JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true 时）。在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。JavaScript 有两种不同种类的循环：for：将一段代码循环执行指定的次数while:当指定的条件为 true 时循环执行代码 二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScrip
33、t 循环（1）JavaScript for 循环 将一段代码循环执行指定的次数。语法：语法：for(变量=开始值;变量=结束值;变量=变量+步进值)需执行的代码实例：实例：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环（1）JavaScript for 循环注释注释：步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。二、关键技术二、关键技术vari=0for(i
34、=0;i=10;i+)document.write(Thenumberis+i)document.write()Thenumberis0Thenumberis1Thenumberis2Thenumberis3Thenumberis4Thenumberis5Thenumberis6Thenumberis7Thenumberis8Thenumberis9Thenumberis10网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环（2）JavaScript While 循环 JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true
35、 时）。1）while 循环 while 循环用于在指定条件为 true 时循环执行代码。语法：语法：while(变量=结束值)需执行的代码注意：除了=，还可以使用其他的比较运算符。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环（2）JavaScript While 循环 1）while 循环 下面的例子定义了一个循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。二、关键技术二、关键技术vari=0while(i=10)document.write(Thenumbe
36、ris+i)document.write()i=i+1Thenumberis0Thenumberis1Thenumberis2Thenumberis3Thenumberis4Thenumberis5Thenumberis6Thenumberis7Thenumberis8Thenumberis9Thenumberis10网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环（2）JavaScript While 循环 2）do.while 循环 do.while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 t
37、rue 时，它会继续这个循环。所以可以这么说，do.while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。语法：语法：do 需执行的代码while(变量=结束值)二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环（2）JavaScript While 循环 2）do.while 循环 二、关键技术二、关键技术vari=0dodocument.write(Thenumberis+i)document.write()i=i+1while(i0)Thenumberis0网页图片滚动特效制作网
38、页图片滚动特效制作WEB编程基础11、JavaScript 循环（3）JavaScript Break 和 Continue 1）Break Break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。二、关键技术二、关键技术vari=0for(i=0;i=10;i+)if(i=3)breakdocument.write(Thenumberis+i)document.write()Thenumberis0Thenumberis1Thenumberis2网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环（3）JavaScript
39、Break 和 Continue 2）Continue Continue 命令会终止当前的循环，然后从下一个值继续运行。二、关键技术二、关键技术vari=0for(i=0;i=10;i+)if(i=3)continuedocument.write(Thenumberis+i)document.write()Thenumberis0Thenumberis1Thenumberis2Thenumberis4Thenumberis5Thenumberis6Thenumberis7Thenumberis8Thenumberis9Thenumberis10网页图片滚动特效制作网页图片滚动特效制作WEB编程
40、基础11、JavaScript 循环（4）JavaScript for.in 语句 for.in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。for.in 语句用于对数组或者对象的属性进行循环操作。for.in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。语法：语法：for(变量 in 对象)在此执行代码“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。二、关键技术二、关键技术网页图片滚动特效制作网页图片滚动特效制作WEB编程基础11、JavaScript 循环（4）JavaScript for.in 语句 二、关键技术二、关键
41、技术varxvarmycars=newArray()mycars0=Saabmycars1=Volvomycars2=BMWfor(xinmycars)document.write(mycarsx+)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术12、JavaScript 事件 事件是可以被 JavaScript 侦测到的行为。（1）事件 JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onCli
42、ck 事件来触发某个函数。事件在 HTML 页面中定义。网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术12、JavaScript 事件事件举例：事件举例：鼠标点击页面或图像载入鼠标悬浮于页面的某个热点之上在表单中选取输入框确认表单键盘按键注意：注意：事件通常与函数配合使用，当事件发生时函数才会执行。网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术12、JavaScript 事件（2）onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器
43、类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：Welcome John Doe!。网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术12、JavaScript 事件（3）onFocus,onBlur 和 onChange onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
44、下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail()函数就会被调用。网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术12、JavaScript 事件（4）onSubmit onSubmit 用于在提交表单之前验证所有的表单域。下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm()函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm()函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。网页图片滚动特效制作网页图片滚动特效制
45、作WEB编程基础二、关键技术二、关键技术12、JavaScript 事件（5）onMouseOver 和 onMouseOutonMouseOver 和 onMouseOut 用来创建“动态的”按钮。下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术13、JavaScript 对象 JavaScript 是面向对象的编程语言(OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。属性属性指与对象有关的值。方法方法指对象可以执行的行为（或者可以
46、完成的功能）。（1）JavaScript 字符串(String)对象 字符串对象用于处理已有的字符块。使用字符串对象的长度属性length来计算字符串的长度例如：var txt=Hello world!document.write(txt.length)执行结果为：12网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术13、JavaScript 对象（1）JavaScript 字符串(String)对象使用indexOf()来定位字符串中某一个指定的字符首次出现的位置。例如：var str=Hello world!document.write(str.indexOf
47、(Hello)执行结果为：0使用match()来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。例如：var str=Hello world!document.write(str.match(world)执行结果为：world网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术13、JavaScript 对象（2）JavaScript Date（日期）对象1）定义日期Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：var myDate=new Date()2）操作日期通过
48、使用针对日期对象的方法，我们可以很容易地对日期进行操作。在下面的例子中，我们为日期对象设置了一个特定的日期(2008 年 8 月 9 日)：var myDate=new Date()myDate.setFullYear(2008,7,9)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术13、JavaScript 对象（2）JavaScript Date（日期）对象任务1 使用 Date()方法获得当日的日期document.write(Date()网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术13、JavaScript 对象（2）J
49、avaScript Date（日期）对象任务2 使用 setFullYear()设置具体的日期。var d=new Date()d.setFullYear(1992,10,3)document.write(d)网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术13、JavaScript 对象（2）JavaScript Date（日期）对象任务3 使用 getDay()和数组来显示星期var d=new Date()var weekday=new Array(7)weekday0=星期日weekday1=星期一weekday2=“星期二”weekday3=星期三wee
50、kday4=星期四weekday5=星期五weekday6=星期六document.write(今天是+weekdayd.getDay()网页图片滚动特效制作网页图片滚动特效制作WEB编程基础二、关键技术二、关键技术13、JavaScript 对象（3）JavaScript Array（数组）对象数组对象的作用是：使用单独的变量名来存储一系列的值。1）定义数组数组对象用来在单独的变量名中存储一系列的值。我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：var myArray=new Array()网页图片滚动特效制作网页图片滚动特效制作WEB编程基础