网页编程技术第4章JavaS.ppt

《网页编程技术第4章JavaS.ppt》由会员分享，可在线阅读，更多相关《网页编程技术第4章JavaS.ppt（86页珍藏版）》请在三一办公上搜索。

1、网页编程技术,彭 丽旅游学院教育科学与技术系,第4章 使用JavaScript编写网页,4.1 JavaScript概述,4.2 JavaScript语法基础,4.3 JavaScript内置对象和函数,4.4 JavaScript的事件与事件处理程序,第4章 使用JavaScript编写网页,4.1 JavaScript概述 Netscape公司为了进一步扩充它的浏览器的功能，开发了一种可以嵌入在Web主页中的编程语言。在早期这种语言叫做LiveScript，后来为了利用Sun公司开发的Java语言的功能并借用它的流行性，把它改名为JavaScript。前身叫做Livescript，是一种基

2、于对象和事情驱动、并有安全性的解释性（就是说，代码执行不进行预编译）脚本语言。通过 JavaScript，您可以重构整个 HTML 文档。我们可以添加、移除、改变或重排页面上的项目。,JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、Mozilla、Firefox、Netscape、和 Opera。,4.1.1 JavaScript的特点1JavaScript是一种脚本语言2JavaScript是基于对象的语言3JavaScript是事件驱动的语言4JavaScript是安全的语言5JavaScript是与平台无关的语

3、言,第4章 使用JavaScript编写网页,而基于对象的基本特征，就是采用事件驱动(event-driven)。,通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。,4.1.2 JavaScript的功能JavaScript 为 HTML 设计师提供了一种编程工具 JavaScript 可以将动态的文本放入 HTML 页面 JavaScript 可以对事件作出响应 JavaScript 可以读写 HTML 元素 JavaScript 可被用来验证数据 JavaScript 可被用来检测访问者的浏览器 JavaS

4、cript 可被用来创建 cookies,第4章 使用JavaScript编写网页,4.1.3 JavaScript与其他语言的比较1JavaScript与Java2JavaScript与VBScript3.javaScript与Jscript,第4章 使用JavaScript编写网页,4.1.3 JavaScript与其他语言的比较1、Javascript和java 是两个公司开发的两个不同产品，作用和用途不一样，但两者语法上有很多相似之处，javascript并不是java的子集。在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言。Java（由太阳微系统公司开发）很

5、强大，同时也是更复杂的编程语言，就像同级别的 C 和 C+。,第4章 使用JavaScript编写网页,4.1.3 JavaScript与其他语言的比较3、Javascript和Jscript 最开始web上只有静态的html,为了满足更好的交互需求，netscape开发了在Navigator中使用的LiveScript语言，后改名为JavaScript,Microsoft发行jscript用于internet explorer。最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,它是一种国际标准化的javasc

6、ript版本。现在的主流浏览器都支持这种版本。我们写程序的时候最好写而不是，因为javascript是一个通用的名称，所有浏览器都认识，而jscript只有IE认识。,第4章 使用JavaScript编写网页,4.1.4 JavaScript与HTML 为了运用JavaScript控制HTML页面上的对象，JavaScript的代码必须与HTML代码结合在一起。将JavaScript嵌入HTML页面时，必须使用SCRIPT标签，该标签使用形式如下：/JavaScript代码标签通知浏览器，有脚本嵌入到标签中。,/document.write(Hello World!);上面的代码会在 HTML

7、 页面中产生这样的输出：Hello World!,4.1.5 JavaScript在HTML中的位置一般在 head部分放JavaScript 用到的函数的定义，在body部分调用执行。实例head 部分 包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。body 部分 执行位于 body 部分的脚本。外部 JavaScript 如何访问外部脚本。注意：外部文件的js不能包含 标签。然后把.js 文件指定给 标签中的“src”属性，就可以使用这个外部文件了。,第4章 使用JavaScript编写网页,4.2 JavaScript语法基础 JavaScri

8、pt是一种易学易用的脚本语言，目的是面向与用户动态交互的脚本开发，扩展HTML页面的功能，而不是开发大型复杂的程序，所以相对而言，JavaScript的语法规则较少而且较为简单。但作为一门编程语言，它有自己的语法规则，自己的关键字、指令和对象。,4.2 JavaScript语法基础,4.2.1 Javascrip的保留关键字,4.2 JavaScript语法基础,4.2.2 变量1JavaScript的数据类型 变量的定义,未定义数据类型(unDefined)如果对象属性不存在,声明了变量但从未赋 值,将返回undefined,4.2 JavaScript语法基础,2变量的定义JavaScri

9、pt中采用弱类型变量，变量可以不做声明和不做类型说明，而在使用或赋值时确定类型。但为了形成良好的编程风格，变量应该采取先定义再使用的方法。JavaScript中变量的定义用关键字var来实现。例如，定义一个名为id的变量：var id;var x=5;var carname=Volvo;y=“hello”;/如果您所赋值的变量还未进行过声明，该变量会自动声明。,4.2 JavaScript语法基础,3变量的命名变量的命名要遵循如下的规则：（1）变量名不能与保留字冲突。（2）变量名必须以字母或者下划线（_）或者$开头，不能用数字或者其他非字母字符作为变量名开头。（3）变量名中不能包含空格。（4）

10、JavaScript是区分大小写的，所以给变量命名时要考虑大小写的问题。,4.2 JavaScript语法基础,4.2.3 表达式与运算符按照运算符的功能可以分为：算术运算符:+,-,*,/,%,+,-,-(取负）逻辑运算符:&,|,!比较运算符:=，！=，,=,=赋值运算符:=，+=，-=，*=，/=，%=条件运算符：？：字符串连接运算符：+,4.2 JavaScript语法基础,1.算术运算符:+,-,*,/,%,+,-,-(取负)例如:设X=6,则Y=+X:Y的值是Y=X+:Y的值是X=-X:X的值是X=X-:Y的值是,7,6,5,6,4.2 JavaScript语法基础,2.逻辑运算符

11、:&,|,!(1)”&”:当表达式两边的逻辑值都是true时结果为true,否则结果为false。例如：21&54，结果为true 21&51|51|54,其结果也为true（3）”！“：当表达式的逻辑值为true时返回结果false,当表达式的逻辑值为false时返回结果true。例如：！(21)结果为false。,4.2 JavaScript语法基础,3.比较运算符:=，=，！=，,=,=,；x=“5”为true,4.2 JavaScript语法基础,4.赋值运算符:=，+=，-=，*=，/=，%=（1）“+=”：表示左、右两边数相加，结果赋给左边变量。例如：X=5，Y=5，X+=Y将10

12、赋给了X。（2）“-=”：表示左、右两边数相减，结果赋给左边变量。例如：X=5，Y=5，X-=Y将0赋给了X。（3）“*=”：表示左、右两边数相乘，结果赋给左边变量。例如：X=5，Y=5，X*=Y将25赋给了X。（4）“/=”：表示右边数除左边数，结果赋给左边变量。例如：X=5，Y=5，X/=Y将1赋给了X。（5）“%=”：表示右边数除左边数，余数赋给左边变量。例如：X=25，Y=7，X%=Y将4赋给了X。,4.2 JavaScript语法基础,5.条件运算符：？：（1）表达式结构如下：（条件）？结果1：结果2（2）运算过程是：首先计算条件（逻辑表达式或比较表达式）的值，值为true表达式的值

13、为结果1，值为false表达式的值为结果2。例如：（day=“星期六”）？“今天是周末”：“今天不是周末”,4.2 JavaScript语法基础,6.字符串连接运算符：+字符串运算符只有一个合并运算符“+”，表示两个字符串的合并，例如：abc+“您好！”，这个表达式的值为“abc您好！”。注意：如果把数字与字符串相加，结果将成为字符串x=5+5;document.write(x);/10document.write();x=5+5;document.write(x);/55document.write();,4.2 JavaScript语法基础,7.运算符优先级优先级从高到低顺序为：（1）乘、

14、除、模（*、/、%）。（2）加、减（+、-）。（3）比较（、=、=、=、!=、=)。（4）逻辑与（&)。（5）逻辑或（|)。（6）条件(?:)。例如：(4*5+1822)?”对”:”错“的值为什么？,错,4.2 JavaScript语法基础,8.一个完整的程序var question=10+20是多少?;var answer=30;var x1=计算正确;var x2=计算错误;var x5=prompt(question,0);var output=(x5=answer)?x1:x2;document.write(output);程序效果演示,4.2 JavaScript语法基础,4.2.4

15、 基本语句1条件语句（1）if语句格式：if(表达式)语句块;,（2）if-else语句 if(表达式)语句块1;else 语句块2;,例如：根据当前时间判断是白天还是夜晚 var mess1=;document.write();day=new Date();hr=day.getHours();if(hr=6)程序效果演示,4.2 JavaScript语法基础,（3）switch语句switch(表达式)case 值1：语句1;break;case 值2：语句2;break;case 值n：语句n;break;default：语句;,var mess1=“”;day=new Date();hr

16、=day.getHours();switch(hr=0)程序效果演示,4.2 JavaScript语法基础,2循环语句（1）for语句for(初始表达式；循环条件表达式；计数器表达式)语句块；,4.2 JavaScript语法基础,（2）while语句while(循环条件表达式)语句块；计数器表达式；（3）do-while语句 do 语句块;计数器表达式;while(循环条件表达式),for(var i=1;i”);document.write(i+”.”+prompt(活动+i，活动类型);改写成while或者dowhile 循环？,（4）break 和 continue 语句 breakb

17、reak 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。实例：var i=0 for(i=0;i),结果：The number is 0The number is 1 The number is 2,Continuecontinue 命令会终止当前的循环，然后从下一个值继续运行。实例：var i=0 for(i=0;i);,结果：The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6The number is 7 The num

18、ber is 8 The number is 9 The number is 10,4.2 JavaScript语法基础,3其他语句(了解）（1）for-in语句 for(变量 in 对象)代码块；（2）with语句 with(对象)代码块；（3）return语句（4）注释/单行注释，/*多行注释*/,with语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意Math的重复使用：x=Math.cos(3*Math.PI)+Math.sin(Math.LN10)y=Math.tan(14*Math.E)当使用with语句时，代码变得更短且更易读：with(Math)x=cos(3*

19、PI)+sin(LN10)y=tan(14*E),对应于一个对象的每个属性，或一个数组的每个元素，执行一个或多个语句。for(variable in object|array)statements 参数variable:必选项。一个变量，它可以是 object 的任一属性或 array 的任一元素。object,array:可选项。要在其上遍历的对象或数组。function ForInDemo()/创建某些变量。var a,key,s=;/初始化对象。a=“a”:“Athens”,“b”:“Belgrade”,“c”:“Cairo”/可以通过a.a,a.b,a.c的方式/迭代属性。for(ke

20、y in a)s+=akey+完整程序的效果演示,4.2 JavaScript语法基础,4.2.4 函数JavaScript不区分函数和过程，它只有函数。1函数的定义 function 函数名(参数1,参数2.)代码块；2函数的参数：在函数定义时确定参数，然后按照确定的参数进行传递调用。3函数返回值：可以使用return语句返回常量、变量，也可以是表达式等。4.函数包括静态函数和动态函数,4.2.5 其他说明空格JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：name=Hege“name=Hege 换行您可以在文本字符串内部使

21、用反斜杠对代码进行折行。下面的例子是正确的：document.write(Hello World!)但是不能像这样折行：document.write(Hello World!),插入特殊字符反斜杠用来在文本字符串中插入引号、斜杠和其他特殊字符。比较常见的如下：,例如：var txt=“We are the so-called”Vikings“from the north.document.write(txt)JavaScript 会输出文本字符串：We are the so-called Vikings from the north.,4.3 JavaScript的内置对象和函数,JavaSc

22、ript中的内置对象，包括数学（Math）对象、字符串（String）对象、日期（Date）对象、时间（Time）对象和数组（Array）对象、逻辑对象、window对象及其子对象等。,4.3 JavaScript的内置对象和函数,4.3.1 Math对象Math对象不需要用new操作符创建对象，而是可以直接使用，所以又被称作是静态的对象。调用方式为：Math.数学函数名(参数表)1Math对象的属性(参见教材P347)2Math对象的方法(参见教材P347),3 Math对象举例:使用Math对象alert(“圆周率PI的5次方四舍五入后的值是:”+Math.round(Math.pow(M

23、ath.PI,5);运行结果见 math.htm,4.3 JavaScript的内置对象和函数,4.3.2 String对象字符串是由0或多个字符组成的序列。在JavaScript中，字符串是通过在其首尾添加成对的单引号（）或双引号（“”）来说明的。String中的函数不能直接使用类名String加函数名，而是要创建String类型的对象，在对象的后面加上函数名。,4.3 JavaScript的内置对象和函数,1String对象的定义(两种)一种是直接将字符串赋值给变量：str1=hello;另一种是使用new运算符创建字符串:str2=new String(hello);2String对象的

24、属性_length(表字符串中的字符个数),3String对象的方法,例1:计算字符串的长度例2:为字符串添加样式例3:查找字符串-indexof例4:字符串的其它相关操作,4.字符串的使用举例,4.3 JavaScript的内置对象和函数,4.3.3 Date对象JavaScript中没有专门的日期类型，Date对象中不仅包括日期，还包括时间。1Date对象的定义 var 对象名=new Date(参数)注意：如果没有参数,Date 对象将自动使用当前的日期和时间作为其初始值。例如:var myDate=new Date()/当前的日期和时间2Date对象的方法 见附录,4.3 JavaSc

25、ript的内置对象和函数,3.举例举例1：Date()的默认值为当前的日期和时间：date1.htm举例2:代码运行时间的计算：date2.htm举例3:返回1970 年到今天有多少年:getTime.html举例4:重新设置日期:setFullYear.html举例5:显示一个钟表:clock.html,4.3 JavaScript的内置对象和函数,4.3.4 Array对象数组是一系列元素的有序集合，它的强大功能是不可替代的。在JavaScript中，可以使用Array数组对象来完成对数组的操作。1Array对象的定义:使用关键字new来创建例如：var Tips=new Array(6)

26、;2.Array对象的赋值:两种方法第一种:先定义后赋值 var mycars=new Array()/可以任意个元素 mycars0=Saab mycars1=Volvo mycars2=BMW,也可以使用一个整数自变量来控制数组的容量：var mycars=new Array(3)/该数组的容量限定为3mycars0=Saab mycars1=Volvo mycars2=BMW 第二种:定义的时候初始化var mycars=new Array(Saab,Volvo,BMW),3.数组的访问:数组名下标var mycars=new Array(Saab,Volvo,BMW)document.

27、write(mycars0)/输出Saab 4.修改已有数组中的值修改已有数组中的值，只要向指定下标号添加一个新值即可：mycars0=Opel;,5Array对象的属性,6Array对象的方法,7 Array对象举例每次随机显示一句话一个使用数组对象的例子Tips=new Array(6);Tips0=“每日一语(1)”;Tips1=“每日一语(2)”;Tips2=“每日一语(3)”;Tips3=“每日一语(4)”;Tips4=“每日一语(5)”;Tips5=“每日一语(6)”;index=Math.floor(Math.random()*Tips.length);,4.3 JavaScri

28、pt的内置对象和函数,document.write(“”+Tipsindex+”);运行结果见 array.htm更多示例:for-in-访问数组 数组的链接-concat 用数组的元素组成字符串-join 文字数组-sort 数字数组-sort(),4.3.4 Boolean（逻辑）对象Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。使用关键词 new 来定义 Boolean 对象。语法:var myBoolean=new Boolean()如果逻辑对象无初始值或者其值为 0、-0、null、false、undefined 或者 NaN，那么对象的值为 f

29、alse。否则，其值为 true（即使当自变量为字符串 false 时）！,下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。var myBoolean=new Boolean()var myBoolean=new Boolean(0)var myBoolean=new Boolean(null)var myBoolean=new Boolean()var myBoolean=new Boolean(false)var myBoolean=new Boolean(NaN),下面的所有的代码行均会创初始值为 true 的 Boolean 对象：var myBoolean=

30、new Boolean(true)var myBoolean=new Boolean(true)var myBoolean=new Boolean(false)var myBoolean=new Boolean(Richard),Boolean 对象属性Boolean 对象方法,示例:Boolean.html广告.html(有关网页坐标的先要知识）,.3.浏览器navigator 对象JavaScript navigator 对象包含了有关访问者浏览器的所有信息。Navigator 对象有两个常用属性：appName：appName属性返回浏览器的名称，比如，Netscape 或者 Micro

31、soft Internet Explorer。appVersion 存有浏览器的版本信息（其他信息中的一项）示例：检测浏览器及版本 检测浏览器更多信息检测浏览器全部信息根据浏览器类型提醒用户,appVersion 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat()的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。,4.3 JavaScript的内置对象和函数,4.3.6窗口（window）对象及其子对象4.3.6.1 窗口对象窗口对象处于对象层次的顶端，提供了用于处理浏览器窗口的属性和

32、方法。由于顶层对象没有父对象，所以使用window对象时可以直接引用window对象的属性和方法。例如：newwin=open(“confirm.htm”,“打开新窗口的方式,height=200,width=400,top=200,left=200,toolbar=no,menubar=no,scrollbar=no,resizeable=no,location=no,status=no);,取值可以为：_self：当前窗口_blank：空白窗口_parent：当前窗口的父窗口_top：框架网页的顶层窗口自己取的新名字：为打开的窗口取名,关于window对象的open方法其他参数见参考文件：

33、window_open()举例：模拟我校网络注销,4.3 JavaScript的内置对象和函数,4.3.6.2窗口对象的子对象document对象document对象的属性和方法见附录P344举例1：源代码及效果见document1.htm通过document对象的属性和方法可以访问HTML文档元素,并且具有和HTML文档标记一样的功能。以这种方式访问HTML文档元素所使用的document对象的属性就是all,它是一个非常特殊的属性,但这个属性只有IE支持。举例2：设计一个文档，要求在页面上显示出该文档所使用的所有的HTML标记。源代码及效果见document2.htm,4.3 JavaSc

34、ript的内置对象和函数,4.3.6.3窗口对象的子对象history对象history对象代表浏览器使用的历史列表，使用户可以追踪窗口中曾经使用过的URL。举例：设计一个页面，要求点击历史时使浏览器执行它时显示原来执行过的页面。源代码及效果见history.htm,4.3 JavaScript的内置对象和函数,4.3.6.4窗口对象的子对象screen对象和location对象screen对象在window对象中代表用户屏幕，处理用户屏幕相关的一些属性（例如屏幕分辨率等）。location对象在window对象中代表当前窗口装入文档的URL。例如:设计一个页面,它将根据用户屏幕的分辨率显示不

35、同的页面,如果屏幕分辨率小于800*600就转去执行源码,否则就在Web页面上输出当前用户的屏幕分辨率。源代码及效果见screenandlocation.htm,4.3 JavaScript的内置对象和函数,4.3.6.5窗口对象的子对象form对象 form对象一般是通过标记创建,在网页中添加一个标记就相当于创建了一个form 对象.如果创建form对象时给它设置了名字属性,那么就可以通过设定的名字来访问这个form对象。举例：例1：设计一个页面，要求列出form对象的所有元素名称。源代码及效果见form.htm例2：设计一个登陆页面，密码和用户名正确后才进入欢迎页面源代码：登陆1 登陆2

36、登陆3 登陆4(了解),4.3 JavaScript的内置对象和函数,4.3.6.6窗口（window）对象的使用 对window对象的使用来说，主要集中在窗口的打开和关闭、窗口状态设置、定时执行程序和各种对话框的使用等四个方面。（1）对话框的使用 在JavaScript程序中可以使用对话框进行输入输出，实现程序和用户的交互。JavaScript中提供有3种对话框，即警示、确认和提示对框。只要在程序中直接调用window对象的3个方法：alert()、confirm()和prompt()就可以使用这3种对话框。,警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮

37、才能继续进行操作。语法：alert(文本)实例：使用window对象的alert（）方法设计一个页面，要求在显示页面的其他内容之前先显示一个警示对话框。源代码及效果见alert.htm,确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取，那么返回值为 false。语法：confirm(文本)实例：使用window对象的confirm（）方法设计一个页面，要求根据用户在确认对话框内的不同回答显示不同的内容。源代码及效果见confirm.htm,提示框提示框经常用于提示用户在进入页面

38、前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt(文本,默认值)实例：使用window对象的prompt（）方法设计一个页面，要求用户在提示对话框内输入自己的姓名，然后根据用户输入的结果在页面上显示欢迎信息。源代码及效果见prompt.htm,（2）窗口的打开和关闭 使用window对象的open（）和close（）方法可以实现窗口的打开和关闭操作。例如：源代码及效果见openandclose.htm,4.3 JavaScript的内置对象和函数,(3)窗口

39、状态的设置进行窗口状态设置主要是使用window对象的status属性和一些控制窗口特征的方法来实现。例：设计一个状态和大小不断发生变化的页面，同时在浏览器状态栏显示窗口的大小和位置等信息。源代码及效果见status.htm,4.3 JavaScript的内置对象和函数,(4)定时执行程序使用window对象的定时执行程序功能需要用到window对象的setTimeout()、setInterval()、clearTimeout()和clearInterval()等方法。例如：设计一个页面，要求显示一个数字，每隔1秒数字减少1次，直到减少到0为止。源代码及效果见settimerun.htm,4

40、.3 JavaScript的内置对象和函数,4.3 JavaScript的内置对象和函数,4.3.6 内置函数（1）escape()：将字符串中的非字母数字字符转换为按格式%XX表示的数字,其中,XX表示那些字符对应的ASCII码值的16进制数。它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符%20，从而能够在 URL 中传递这些字符.（2）unescape()：对字符串进行解码。（3）eval()：计算字符串表达式的值。（4）parseInt()：用于将字符串开头的数字分解出来，转换为整数,若字符串不是数字开头,返回NaN。（5）parseFloat()：用于将字

41、符串开头的数字分解出来，转换为浮点数,若字符串不是数字开头,返回NaN。（6）isNaN()：判断一个表达式是否是数值。,var ss=tom/sa就为tom%20%26%20show,4.3 JavaScript的内置对象和函数,4.3.7 自定义对象（1）通过对象初始化来创建，格式为：对象=属性1:属性值1,属性2:属性值2,.,属性n:属性值n（2）通过定义对象的构造方法创建对象 function 对象名(属性1,属性2,.,属性n)this.属性1=属性值1;this.属性2=属性值2;.this.属性n=属性值n;this.方法1=函数名1;this.方法2=函数名2;.this.方

42、法n=函数名n;举例,ForInDemo()/创建某些变量。var a,key,s=;/初始化对象。a=a:Athens,b:Belgrade,c:Cairo/迭代属性。for(key in a)s+=akey+,4.4 JavaScript的事件与事件处理程序,事件举例：鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意：事件通常与函数配合使用，当事件发生时函数才会执行。,JavaScript常见的事件有blur、click、change、focus、load、unload、mouseover、select和submit。事件处理程序是响应某

43、个事件而进行的具体操作活动，每个事件JavaScript都指定了相应的事件处理程序，程序名由事件名前加on组成，例如blur事件的事件处理程序名为onblur,通过事件处理程序名调用程序的具体内容，即编成人员指定的函数、自定义的函数或指定对象的方法设计完成的任务与功能。,常用事件与对象之间的对应关系(一),常用事件与对象之间的对应关系(二),常用事件与对象之间的对应关系(三),4.4 JavaScript的事件与事件处理程序,例1：添加页面到收藏夹function folder()window.external.AddFavorite(http:/,新浪首页);你关闭网页时会让你把该页添加到收

44、藏夹,运行结果,4.4 JavaScript的事件与事件处理程序,例2：使用onchange事件处理程序确认在页面中输入的数据。function ac()alert(感谢您的合作！);confirm(您想继续吗);function tonumber(x)if(parseInt(x),4.4 JavaScript的事件与事件处理程序,请输入您的姓名：请输入一个大于于5的数：,结果演示,例3：下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：,例4：计时器：利用开始按钮和结束按钮来计时例5：添加了JavaScript的图像映射例

45、：按钮动画例：设置cookie什么是cookie?cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。,有关cookie的例子：名字 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 Welcome John Doe!的欢迎词。而名字则是从 cookie 中取回的。密码 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。日期 cookie 当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息：Your last visit was on Tuesday August 11,2005!。日期也是从 cookie 中取回的。,