《JavaScript语言I》由会员分享，可在线阅读，更多相关《JavaScript语言I（58页珍藏版）》请在金锄头文库上搜索。
1、第六讲 JavaScript 语言 参考书： Danny Goodman作业四：用JavaScript完成一个计算器用户只需用鼠标即可操作你的计算器尽可能使计算器功能完整主要内容背景几个简单例子语言基本要素JavaScript的对象模型JavaScript的事件模型背景JavaScript - 使网页“可执行”的又一种手段 网页内容从信息到程序网页内容从信息到程序, , 具有革命性的意义具有革命性的意义. .Netscape的技术 (1995, after Java, 原来称为LiveScript), 与Java没有什么直接关系所带来的好处 分担服务器的部分工作分担服务器的部分工作 减轻对网络
2、的压力减轻对网络的压力 改善与用户交互作用的质量改善与用户交互作用的质量理解JavaScriptJavaScript是一种脚本语言JavaScript是基于对象的语言JavaScript是事件驱动的语言JavaScript是安全的语言JavaScript是平台无关的语言JavaScript是廉价的(不需任何附加的软件)JavaScript与其他语言比较JavaScript不是JavaJavaScript与VBScriptJavaScript与PerlJavaScript与Java的比较Aspects Aspects JavaJava JavaScript JavaScript ownerown
3、er Sun Microsystems Sun Microsystems Netscape Netscape natural of the language natural of the language Object oriented Object oriented Object based Object based execution mechanism execution mechanism compiled/interpreted compiled/interpreted interpreted interpreted networking capability networking
4、capability strong strong little little graphics capabilitygraphics capabilitystrong strong little little interaction with HTML interaction with HTML weak weak strong strong best for best for dynamic web pagesdynamic web pagesinteractive but plain interactive but plain webpages webpages 基本工作方式源程序直接嵌入
5、HTML文档中 script language=“JavaScript”外外部部程程序序结结合合到到HTMLHTML文文档档中中 src=“myscript.js”浏览器解释执行客户端和服务器端的JavaScript有公共的语言核心机制- -比如变量控制结构比如变量控制结构, ,数据类型等数据类型等语言对象模型上不一致- -客户端客户端ScriptScript关心文档中的对象关心文档中的对象- -服务器端的服务器端的ScriptScript关心管理用户和服务器连接的对象关心管理用户和服务器连接的对象主要能力控制文档的内容和表现控制浏览器的行为和文档的内容相互作用和用户交互在客户方读写cooki
6、e 对图像进行操作无能为力之处图形 (对比Java有很强的图形能力)读写客户方文件 (和Java applet一样)网络 (对比Java applet可以和发出它的服务器连接), 除了可以引起浏览器去读一个URL外.多线程 (Java支持多线程)典型例子-1: 文档内容和表现 HTMLSCRIPT Language=“JavaScript” document.write();document.write();document.write(Hello, Web !);document.write(Hello, Web !);document.write();document.write();Ho
7、w are you today ? How are you today ? 典型例子-2: 浏览器行为window.status window.status = Internetics = I + S + S= Internetics = I + S + SSee status barSee status bar典型例子-3: 和内容的作用 HEAD SCRIPT =JavaScriptfunction function compute(form) compute(form) if if (confirm(Are (confirm(Are you you sure?)sure?)form.fo
8、rm.resultresult.value .value = = eval(form.eval(form.exprexpr.value).value)else else alert alert (Please (Please input input again) again) Enter Enter an an expression: expression: INPUT SIZE=15 INPUT Result: Result: INPUT SIZE=15 典型例子-4: 和用户的交互 SCRIPT LANGUAGE=JavaScriptfunction checkNum(str,min,ma
9、x) function checkNum(str,min,max) if (str=) alert(Enter a number in the field, please.) if (str=) alert(Enter a number in the field, please.) return false return false for (var i=0; istr.length;i+) var ch=str.substring(i,i+1) for (var i=0; istr.length;i+) var ch=str.substring(i,i+1) if (ch 9) alert(
10、Try a number , please.) if (ch 9) alert(Try a number , please.) return false return false var val=parseInt(str, 10); if (val max) var val=parseInt(str, 10); if (val max) alert(Try a number from 1 to 10.); return false alert(Try a number from 1 to 10.); return false return true return true function t
11、hanks() function thanks() alert(Thank you for your input.) alert(Thank you for your input.) Enter a small number : INPUT NAME=num onChange = Enter a small number : 典型例子-5-1: 建立cookie HTMLtemp = test=internet;temp = test=internet;expiration = new Date(new expiration = new Date(new Date().getTime()+36
12、00000);Date().getTime()+3600000);temp += ;expires=+expiration.toGMTString();temp += ;expires=+expiration.toGMTString();document.cookie = temp;document.cookie = temp;A cookie has been setA cookie has been set典型例子-5-2: 收回cookie HTMLtemp = document.cookie;temp = document.cookie;document.write(temp)docu
13、ment.write(temp)A cookie has been retrieved magically !A cookie has been retrieved magically !典型例子-6: 摆弄图像 HTMLfunction replace() function replace() document. document.replacedreplaced.src = wcc.gif” .src = wcc.gif” img src=lxm.gif name=height=150input type=button value=go onclick=replace()JavaScrip
14、t语言基本要素（1）数据类型变量与表达式数据类型转换表达式与操作符数据类型String “hello” hello n(“hello” hello n(换行）换行） t(tab)t(tab)Number 4.54.5Boolen true falsetrue falseNULL null nullObject Function 变量与表达式 创建变量创建变量 var anumber = 137; / var anumber = 137; / 变量的值是一个数变量的值是一个数 var anumber1=2;var anumber1=2; var astring = “1”; / var astr
15、ing = “1”; / 变量的值也可以是一个字符串变量的值也可以是一个字符串 var astring1=“hello”;var astring1=“hello”; 变量名变量名 以字母开头，不能有空格以字母开头，不能有空格 组合命名，组合命名，myAgemyAge 表达式表达式 xx= astring1+astring /xx= astring1+astring /结果是结果是x=“hello1”x=“hello1” xx=anumber+anumber1 /xx=anumber+anumber1 /结果是结果是xx=139xx=139 xx=anumber+astring /xx=anum
16、ber+astring /结果是结果是xx=“1371”xx=“1371”数据类型转换转换字符串为数值 ParseInt(“42”,10) = 42ParseInt(“42”,10) = 42 ParseFloat(“42.33”,10) = 42 (ParseFloat(“42.33”,10) = 42 (截断小数，四舍五入）截断小数，四舍五入）转换数值为字符串 最简单的方法是空串与数值字符相加最简单的方法是空串与数值字符相加 “”+2500=“2500” “”+2500=“2500”表达式与操作符 JavaScript JavaScript 表达式和基本操作符类似于表达式和基本操作符类似于
17、C C， PERL PERL，和和 Java Java 赋值操作符有赋值操作符有=, +=, -=, *=, /=, %=, =, =, +=, -=, *=, /=, %=, =, =, &=, =, |= . =, &=, =, |= . 其中其中 x += y; x += y; 表示表示 x= x + y; x= x + y; x %= y; x %= y; 表示表示 x = x%y; / x mod(y) x = x%y; / x mod(y) 条件表达式条件表达式: : status = (age = 18) ? adult : status = (age = 18) ? adult
18、 : minor; minor; 算数操作符和通常的用法相同，包括算数操作符和通常的用法相同，包括 + + 和负号和负号 -, -, y = +x; / x y = +x; / x 加加 1 1 ，并把结果送给，并把结果送给 y y 表达式与操作符 （ contd) 位逻辑运算符位逻辑运算符 & ( & (与与) | () | (或或) () (异或异或) ) 用于对两个用于对两个32 32 位整型数按位进行逻辑运算位整型数按位进行逻辑运算 按位右移，最高位的符号位按位右移，最高位的符号位( (位位31)31)保留并复制填充保留并复制填充左端左端 零填充右移，不对符号位作特殊处理零填充右移，不
19、对符号位作特殊处理 布尔操作符有布尔操作符有 & ( & (与与), | (), | (或或), ! (), ! (非非) ) ，只能对布尔，只能对布尔变量使用变量使用 比较操作符有比较操作符有 =, , =, , , =, , =, !=. 连接操作符连接操作符 + + 用于连接两个字符串用于连接两个字符串 x= Hello ; y= World!; x + y x= Hello ; y= World!; x + y 为为 Hello World! Hello World! 语言基本要素(2)没有没有else else if. if. if( condition ) .if( conditi
20、on ) . else .else . for for 和和 whilewhile. . for( for( 初始化表达式初始化表达式; ; 条件条件; ; 增值表增值表达式达式) ) 执行语句执行语句; . ; . while(while(条件条件) ) 条件为真执条件为真执行行.; .; break break 可以用在可以用在 for for 或或 while while 循环中，使循环中循环中，使循环中断，跳到断，跳到forfor或或whilewhile循循 环结束的位置。环结束的位置。continue continue 用在用在 for for 或或 while while 循环可以
21、跳过循环体循环可以跳过循环体中剩余的语句，直接中剩余的语句，直接 进行循环的下一次迭代进行循环的下一次迭代. . 全局变量和局部变量全局变量和局部变量对象模型 JavaScriptJavaScript被称为是被称为是“ “基于对象的基于对象的” (” (而不是面向对象的而不是面向对象的) ) 有对象的概念有对象的概念: : 数据和操作的封装数据和操作的封装, , 但没有继承的概念但没有继承的概念 从定义的角度看从定义的角度看, , JavaScriptJavaScript程序中有两种对象程序中有两种对象 JavaScriptJavaScript提供的提供的内置对象内置对象 （built-in
22、object)built-in object) 程序中定义的对象程序中定义的对象 一个对象是一个由变量、其他对象或方法组成的一个集合一个对象是一个由变量、其他对象或方法组成的一个集合. . 在一个对象中包含的其他对象和变量被称为特性在一个对象中包含的其他对象和变量被称为特性 ( (property) property) 在一个对象内的函数在一个对象内的函数( (function)function)称为这个对象的方法称为这个对象的方法( ( method) method) 在一个特定的对象中的一些特性的序列称为数组在一个特定的对象中的一些特性的序列称为数组, , 例如例如documentdocu
23、ment对象中的对象中的imageimage. . 多维数组是由含有数组特性的对象数组构造的多维数组是由含有数组特性的对象数组构造的. . JavaScript 的内置对象 文档对象，文档对象，HTMLHTML文档及其显示环境相联的对象文档及其显示环境相联的对象, , 例例如如window, documentwindow, document 核心语言对象（全局对象）核心语言对象（全局对象） 字符串对象（字符串对象（StringString） 数学对象（数学对象（Math)Math) 日期对象日期对象( (Date)Date) 数组对象数组对象( (Array)Array)对应于HTML文档及其
24、相关环境的对象-文档对象浏览器将这些系统对象组织成一个层次结构. Window, Window, 对应于一个显示文档的窗口对应于一个显示文档的窗口, , 这个层次这个层次结构的根结构的根 location, Windowlocation, Window对象的一个属性对象的一个属性, , 对应于当前对应于当前URL.URL. history, history, 又一个属性又一个属性, , 对应于用户曾经访问过的对应于用户曾经访问过的URL.URL. document, document, 又一个属性又一个属性, , 对应所加载的文档对应所加载的文档. . .JavaScript的文档对象模型Ja
25、vaScript的文档对象模型(contd)注意：前面的文档对象模型只是牵制层次关系，不是继承层次关系。没有对象继承一个高于系列之上的对象属性或方法。不存在任何方向上对象到对象的自动消息传递，通过文档或表单对象发送消息给它，所有对象引用一定是清楚的。对象引用 当一个文档加载到浏览器后，它所有的对象都按照浏当一个文档加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。览器的文档对象所规定的严格层次结构存放到内存。 要有一种方法让要有一种方法让ScriptScript指出它要的是哪一个对象，这指出它要的是哪一个对象，这就是对象引用。就是对象引用。 JavaScript
26、JavaScript用严格的层次结构引导用严格的层次结构引导ScriptScript至文档的任何至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路径中各个相连的对象之间用有层次，直至对象名，路径中各个相连的对象之间用句点分开。句点分开。对象引用（contd) 变量可以写成下面的形式变量可以写成下面的形式: : 父对象父对象. .特性特性11索引索引1.1.特性特性2.2.最后特性最后特性 索引索引N N 对象的方法对象的方法( (method)method)可以如此引用：可以如此引用： 对象对象 . .特性特性. .方
27、法方法( (参数组参数组) ) 一个含有典型特性和方法的对象的例子一个含有典型特性和方法的对象的例子 document document 是对应一个是对应一个 . .htmlhtml文档的对象文档的对象, , 浏览器读进文档浏览器读进文档后生成后生成. . document.writeln document.writeln 是这个对象的一个方法，输出带换行的字是这个对象的一个方法，输出带换行的字符串符串 document.location document.location 是该对象的一个特性，含有它的是该对象的一个特性，含有它的URL URL Window对象: 从浏览器程序的角度来看它cl
28、ass Window class Window 浏览器执行起来后就创建这样一个对象浏览器执行起来后就创建这样一个对象 Location location; Location location; String defaultStatus; String defaultStatus; History history; History history; void alert(String); void alert(String); String prompt(String); String prompt(String); Window window; Window window; 指向自己指向自己
29、Window self; Window self;指向自己指向自己 Document document; Document document; Window open(String, String); Window open(String, String); void close(Window); . void close(Window); . 网页中的网页中的JavaScriptJavaScript就是在这个对象的环境中执行的就是在这个对象的环境中执行的, , 可以可以引用这个对象的变量引用这个对象的变量, , 调用函数等调用函数等 . . 上述只是上述只是WindowWindow对象的对象
30、的2020个属性个属性,10,10个方法和个方法和5 5个事件处理个事件处理过程的一部分过程的一部分Window对象: 从浏览器程序的角度来看它alert() alert() 和和 window.alert() window.alert()是等价的是等价的 var newwin = open(“someURL”, “MyNewWindow”)var newwin = open(“someURL”, “MyNewWindow”) 将将打开一个新浏览器窗口打开一个新浏览器窗口, ,并将一个指定的内容读并将一个指定的内容读进新窗口进新窗口. .在原始窗口中然后可用在原始窗口中然后可用newwinne
31、wwin来操作新的窗口来操作新的窗口. .在新的窗口中在新的窗口中, JavaScript, JavaScript可用可用openeropener来和原始来和原始窗口交流窗口交流. .只能只能closeclose自己打开的窗口自己打开的窗口 ! ( ! (不是每个浏览器都不是每个浏览器都这样这样smart !)smart !)举例:Open another window with JavaScriptOpen another window with JavaScriptx = open(newwin.html,NewWin)x = open(newwin.html,NewWin)x.defau
32、ltStatus = Hello, new fellow ! This is from your x.defaultStatus = Hello, new fellow ! This is from your creator.creator.This is a text in original windowThis is a text in original windowOpen another window with JavaScriptOpen another window with JavaScriptopener.defaultStatus = Hello, my creator !o
33、pener.defaultStatus = Hello, my creator !alert(The window is to beclosed); close(self); alert(The window is to beclosed); close(self); This is a text in new windowThis is a text in new window 用户对象的定义 JavaScriptJavaScript定义定义“ “类类”, “”, “函数函数” ”的语法是一样的的语法是一样的, , 而且这样的函而且这样的函数就成了该类的构造函数数就成了该类的构造函数 ! !
34、 用户用函数定义来定义类用户用函数定义来定义类, , 然后用然后用newnew语句创建该类的一个实例语句创建该类的一个实例 function add() function add() this.result = this.left + this.right; this.result = this.left + this.right; function MyClass(n) function MyClass(n) this.left = n; this.right = 6; this.result = 0; this. this.left = n; this.right = 6; this.re
35、sult = 0; this.sum = addsum = add; ; x = new MyClass(4); x.sum(); document.write(x.result);x = new MyClass(4); x.sum(); document.write(x.result);with 语句: 程序的简便写法使得引用方法时可以省略相关对象的名字例如我们常写document.write(.)我们也可以写成with (document) write(.) 如果语句很多, 显然就有意义了.对象与数组JavaScriptJavaScript将对象也看成是一个数组将对象也看成是一个数组. .
36、 如果如果x x是是一对象一对象, , 那么那么x0, x1, x0, x1, 分别指它的第一分别指它的第一, , 第二个成员第二个成员等等等等. . 这个特性反过来可以用于定义语义上类似于这个特性反过来可以用于定义语义上类似于数组的对象数组的对象: function MakeArray(size) function MakeArray(size) this.length = size; this.length = size; for( var i=1; i=size; i+ ) for( var i=1; i=size; i+ ) thisi = 0; thisi = 0; 对象与数组 (c
37、ontd)var maxNumObj = 10; var maxNumObj = 10; objs = new MakeArray(maxNumObj); objs = new MakeArray(maxNumObj); for( var n=1; n = maxNumObj; n+) for( var n=1; n = maxNumObj; n+) objsn = new SomeClass(n); objsn = new SomeClass(n); / / 设设objs objs 的元素为某类对象的元素为某类对象objsi.propertyobjsi.property就指就指objsobj
38、s数组的第数组的第I I个元素的个元素的某种特性某种特性如果将如果将MakeArrayMakeArray这样的函数用于另外的函数这样的函数用于另外的函数中中, , 我们就可以得到多维数组的效果我们就可以得到多维数组的效果. .对象与数组 (contd)JavaScript提供了一个Array对象,用来创建数组teachers = new Array(3) teachers0=“Li” teachers0=“Li” teachers1=“Sun” teachers1=“Sun” teachers1=“wang”teachers1=“wang”teachers = new Array(“Li”,
39、“Sun”, “wang”)JavaScript的Math 对象该对象不可创建，该对象是自动存在的访问对象的方法 Math.property|method(parameter.parameter)Math.property|method(parameter.parameter) JavaScript的Math 对象(contd) Math Math 有一套特性有一套特性( (内部常数内部常数) ) 包括包括 E, LN10, LN2, PI, SQRT1_2, SQRT2, E, LN10, LN2, PI, SQRT1_2, SQRT2, 所以有所以有Math.PI = 3.14159 Ma
40、th.PI = 3.14159 等等. . MathMath方法包括方法包括 Math.random() Math.random() 返回返回 0 0 到到 1 1 之间的伪随机数之间的伪随机数 Math.abs(x) Math.abs(x) 返回返回 x x 的绝对值的绝对值 Math.max(x1,x2) Math.max(x1,x2) 返回数值返回数值 x1 x1 和和 x2 x2 中的最大值中的最大值 Math.cos(x) Math.cos(x) 返回弧度为返回弧度为 x x 的角的的角的 cosine cosine 值值 Math.round(x) Math.round(x) 按照
41、离按照离 x x 最近的正整数或负整数取整最近的正整数或负整数取整 JavaScript的Date 对象创建一个日期对象： var dateObjectName = var dateObjectName = newnew Date(parameters) Date(parameters)访问对象的方法 dateObjectName. method()dateObjectName. method()JavaScript的Date 对象(contd) Date Date 对象能力强大对象能力强大, , 包括包括 21 21个方法个方法 today = new Date(); / today = n
42、ew Date(); / 设置设置 today today 为当前日期和时为当前日期和时间间 asiwrite = new Date(February 26, 1996 asiwrite = new Date(February 26, 1996 15:13:00); / 15:13:00); / 按说明的日期和时间设置按说明的日期和时间设置 asiwrite asiwrite 注意注意, , Java Java 和和 JavaScript JavaScript 在内部都是以从在内部都是以从19701970年年1 1月月1 1日日 00:00:00 00:00:00开始累计毫秒数来记录时间的开始
43、累计毫秒数来记录时间的. . 类似于类似于 Java, Date.UTC(Java, Date.UTC(用一串数字表示日期用一串数字表示日期) ) 和和 Date.parse(Date.parse(用文本串表示日期用文本串表示日期) ) 是是 class class 或或 static static 方法方法 还有象还有象 getMonth getMonth 这样的方法可以从一个日期中抽这样的方法可以从一个日期中抽出月份出月份, , 等等等等. . JavaScript的String对象创建一个字符串对象： var myString = new String(“characters”)访问对象
44、的方法 string.property|method JavaScript的String对象(contd) 任意字符串或含有字符串的变量都是任意字符串或含有字符串的变量都是s stringtring对象对象lengthlength成员记录了字符串的长度成员记录了字符串的长度( (字符数字符数) ) 串中的字符从左向右以串中的字符从左向右以 0 0 到到 actualstring.length-1actualstring.length-1索引索引 newstring = astring.substring(index1,index2); newstring = astring.substring
45、(index1,index2); / / 返回一个位置在返回一个位置在 index1 . index2-1index1 . index2-1的字符的字符串串 特别是如果特别是如果 index2 index1, index2 index1, 子串返回子串返回 index2 index2 . index1-1. index1-1部分部分 ! ! 事件模型事件: 用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。 例如加载一张网页，点击一个超链，等。事件处理程序的引入（如何使一段JavaScript程序和事件的发生联系起来？）一些例子Navigator4的事件模型元素对象 事
46、件window Blur, Focus, Load, Unload,window Blur, Focus, Load, Unload, DragDrop, Move, Resize DragDrop, Move, ResizeLayer Blur, Focus, Load, MouseOut, MouseOverLayer Blur, Focus, Load, MouseOut, MouseOver onMouseup onMouseuplink Click , MouseOver, MouseOut, link Click , MouseOver, MouseOut, DbClick, Mo
47、useDown, MouseUp DbClick, MouseDown, MouseUparea MouseOut, MouseOver, Clickarea MouseOut, MouseOver, Clickimage Abort, Error, Loadimage Abort, Error, Loadform Submit, Resetform Submit, ResetNavigator4的事件模型(contd)元素对象 事件text, textarea Blur, KeyDowntext, textarea Blur, KeyDownpassword Change, Focus, S
48、elect, KeyPress, KeyUppassword Change, Focus, Select, KeyPress, KeyUpall buttons Click, MouseDown, MouseUpall buttons Click, MouseDown, MouseUpselect Blur, Change, Focusselect Blur, Change, FocusfileUpload Blur, Focus, SelectfileUpload Blur, Focus, Select事件处理程序的引入 “ “onon事事件件名名” ”是是JavaScriptJavaScr
49、ipt规规定定的的对对应应事事件件处处理理程程序序柄柄（ event event handlerhandler） 的的 名名 字字 。 例例 如如 onClick, onClick, onfocus, onfocus, onSubmit, onSubmit, 等等等等. . 第第一一种种引引入入方方式式：事事件件处处理理程程序序柄柄名名以以属属性性名名的的形形式式在在HTMLHTML文文本本中中某某某某些些些些适适适适当当当当的的的的标标记记中中出出现现, , 而而对对应应的的属属性性值值是是由由网网页页编编写写者者提提供供的的JavaScriptJavaScript程程序序段段（或或事事件件
50、处处理理函函 数数 名名 ） onChange=“isNumber(this)” 第第二二种种引引入入方方式式：将将事事件件处处理理函函数数名名赋赋给给浏浏览览器器为为网网页页 创创 建建 的的 相相 应应 对对 象象 的的 对对 应应 属属 性性 （ propertyproperty） document.forms0.age.onchange=isNumberdocument.forms0.age.onchange=isNumber例子: 让事件处理程序作为“属性值” 这这 里里 ，事事 件件 处处 理理 程程 序序 柄柄的的 名名 字字 是是 “ “case case insensitiv
51、e”insensitive”。这这与与HTMLHTML文文本本中中对对标标记记的的属属性性名的松散要求是一致的。名的松散要求是一致的。 注意引号的用法注意引号的用法 OnLoadOnLoad在在网网页页完完全全加加载载完完后后执执行行( (即即包包括括图图像像, ,appletapplet等等) ) OnUnLoadOnUnLoad在网页退出之前执行在网页退出之前执行例子: (see demo event-1) some text return true ; else return false; ” some text 如如果果return return falsefalse给给onClick
52、, onClick, 则则浏浏览览器器不不访访问问HREFHREF指指定定的网址的网址 statusstatus是是暂暂时时量量, , 只只是是在在事事件件发发生生时时有有效效; ; defaultStatusdefaultStatus是缺省量是缺省量, , 在没有其它事件发生时也有效在没有其它事件发生时也有效.例子: 定时事件的应用 目目标标是是编编写写一一网网页页，使使得得当当用用户户关关注注到到含含有有该该网网页页的的浏浏览览器器窗窗口口时时，其其状状态态区区域域显显示示一一串串动动画画文文字，而当注意力移开后停止显示。字，而当注意力移开后停止显示。 onblur = ”if (time
53、rrunning) clearTimeout(xxx); return true; 与定时事件有关的与定时事件有关的WindowWindow对象方法的应用对象方法的应用 timer_id timer_id = = setTimeout(“setTimeout(“函函数数名名” ”，毫毫秒秒数数）, , 在在指指定定时时间间过过后后执执行行该该函函数数. . Timer_idTimer_id在在此此作作为为一一个个定定时时器器的的标标识识. . clearTimeout(timer_id), clearTimeout(timer_id), 取取消消一一个个定定时时器器, , 意意味味着着不不再再
54、执行和它相关的计时操作执行和它相关的计时操作. . HEADvar text = Welcome to PACTvar text = Welcome to PACT group at Peking University!; group at Peking University!; var len = text.length; var width= 50; var pos = 1 - width; var len = text.length; var width= 50; var pos = 1 - width; var timerrunning = false; var xxx=null;va
55、r timerrunning = false; var xxx=null;function scrollText() function scrollText() pos+; var scroller = ; pos+; var scroller = ; if (pos = len) pos = 1-width; if (pos = len) pos = 1-width; if (pos0) / if (pos0) / 下面的算法确定下面的算法确定scroller, scroller, 形成动画效果形成动画效果 for (var i=1; i=Math.abs(pos); i+) scrolle
56、r += ; for (var i=1; i=Math.abs(pos); i+) scroller += ; scroller += text.substring(0,width-i+1); scroller += text.substring(0,width-i+1); else scroller += text.substring(pos,width+pos); else scroller += text.substring(pos,width+pos); window.status = scroller; window.status = scroller; xxx = setTimeo
57、ut(“scrollText()”,100); / 100 xxx = setTimeout(“scrollText()”,100); / 100毫秒后再执行毫秒后再执行 与表格(FORM)有关事件的例子 Really erase ALL data and start over ?)onSubmitonSubmit在在表表格格提提交交之之前前执执行行, , 若若返返回回false, false, 则则不不提提交交. . 这这就就是是在在客客户户方方验验证证用用户户输输入入的的典典型型方方式式. . confirmconfirm是是WindowWindow对对象象的的一一个个方方法法, , ve
58、rify()verify()是一个必须由用户提供的函数。是一个必须由用户提供的函数。和和 framesframes是是 WindowWindow的的 属属 性性 类类 似似 , , formsforms是是DocumentDocument的一个数组属性的一个数组属性. . 与FORM元素有关事件的例子 onClick=alert(important);return true;只是当第一个按钮被只是当第一个按钮被clickclick后出现警示信息。后出现警示信息。 onChange=alert(blahblah); return true;INPUT TYPE=text name=xyz onF
59、ocus=alert(testing);return true;FormForm有有elementselements数数组组属属性性, , 这这些些元元素素中中的的namename可直接用来引用相应元素可直接用来引用相应元素. .关于图像 IMG src= onLoad= onLoad onLoad 图图像像成成功功装装载载后后执执行行，onAbort onAbort 当当用用户户中中断断装载过程时执行装载过程时执行 图图像像的的预预取取与与替替换换: : JavaScriptJavaScript的的动动画画技技术术( (尽尽管管很很弱弱) ) image2= new Image();scri
60、pt image2= new Image(); image2.src=“second.gif”; image2.src=“second.gif”; document.demo.src = image2.src; document.demo.src = image2.src; 不难想象结合定时事件的应用实现动画效果。不难想象结合定时事件的应用实现动画效果。例子: clock.html htmevar timerID = null; var timerrunning = false; var timerID = null; var timerrunning = false; function st
61、opclock() function stopclock() if (timerrunning) clearTimeout(timerID); timerrunning = false; if (timerrunning) clearTimeout(timerID); timerrunning = false; function showtime() function showtime() date = new Date(); date = new Date(); timeValue = date.getHours() + : + timeValue = date.getHours() + :
62、 + date.getMinutes()+:+date.getSeconds(); date.getMinutes()+:+date.getSeconds(); document. document.clockclock. .faceface. .valuevalue = timeValue; = timeValue; timerID = setTimeout(showtime(), 1000); timerrunning = true; timerID = setTimeout(showtime(), 1000); timerrunning = true;form name= input type=text name= input type=text name=control size=12
