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

上传人:wuy****n92 文档编号:91226900 上传时间:2023-05-24 格式:PPT 页数:86 大小:496.50KB
返回 下载 相关 举报
网页编程技术第4章JavaS.ppt_第1页
第1页 / 共86页
网页编程技术第4章JavaS.ppt_第2页
第2页 / 共86页
点击查看更多>>
资源描述

《网页编程技术第4章JavaS.ppt》由会员分享,可在线阅读,更多相关《网页编程技术第4章JavaS.ppt(86页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

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

2、公司开发的Java语言的功能并借用它的流行性,把它改名为JavaScript。n前身叫做Livescript,是一种基于对象和事情驱动、并有安全性的解释性(就是说,代码执行不进行预编译)脚本语言。n通过 JavaScript,您可以重构整个 HTML 文档。我们可以添加、移除、改变或重排页面上的项目。nJavaScript 是因特网上最流行的脚本语言,并是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说且可在所有主要的浏览器中运行,比方说 Internet Explorer、Mozilla、Firefox、Netscape、和、和 Opera。4.1.1 JavaScript的

3、特点1JavaScript是一种脚本语言2JavaScript是基于对象的语言3JavaScript是事件驱动的语言4JavaScript是安全的语言5JavaScript是与平台无关的语言第第4章章 使用使用JavaScript编写网页编写网页而基于对象的基本特征,就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。4.1.2 JavaScript的功能nJavaScript 为 HTML 设计师提供了一种编程工具 nJavaScript 可以将动态的文本放入 HTM

4、L 页面 nJavaScript 可以对事件作出响应 nJavaScript 可以读写 HTML 元素 nJavaScript 可被用来验证数据 nJavaScript 可被用来检测访问者的浏览器 nJavaScript 可被用来创建 cookies 第第4章章 使用使用JavaScript编写网页编写网页4.1.3 JavaScript与其他语言的比较1JavaScript与Java2JavaScript与VBScript3.javaScript与Jscript第第4章章 使用使用JavaScript编写网页编写网页4.1.3 JavaScript与其他语言的比较1、Javascript和j

5、avan 是两个公司开发的两个不同产品,作用和用途不一样,但两者语法上有很多相似之处,javascript并不是java的子集。n在概念和设计方面,Java 和 JavaScript 是两种完全不同的语言。Java(由太阳微系统公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C 和 C+。第第4章章 使用使用JavaScript编写网页编写网页4.1.3 JavaScript与其他语言的比较3、Javascript和Jscriptu 最开始web上只有静态的html,为了满足更好的交互需求,netscape开发了在Navigator中使用的LiveScript语言,后改名为JavaS

6、cript,Microsoft发行jscript用于internet explorer。u 最初的jscript和javascript差异过大,web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,它是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。我们写程序的时候最好写而不是,因为javascript是一个通用的名称,所有浏览器都认识,而jscript只有IE认识。第第4章章 使用使用JavaScript编写网页编写网页4.1.4 JavaScript与HTML 为了运用JavaScript控制HTML页面上的对象,JavaScript的

7、代码必须与HTML代码结合在一起。将JavaScript嵌入HTML页面时,必须使用SCRIPT标签,该标签使用形式如下:/JavaScript代码标签通知浏览器,有脚本嵌入到标签中。/document.write(Hello World!);上面的代码会在 HTML 页面中产生这样的输出:Hello World!4.1.5 JavaScript在HTML中的位置n一般在一般在 head部分放部分放JavaScript 用到的函数的定义,在用到的函数的定义,在body部分调部分调用执行。用执行。n实例实例head 部分部分 包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数

8、前,脚本已经载入了。body 部分部分 执行位于 body 部分的脚本。外部外部 JavaScript 如何访问外部脚本。注意:注意:外部文件的js不能包含 标签。然后把.js 文件指定给 标签中的“src”属性,就可以使用这个外部文件了。第第4章章 使用使用JavaScript编写网页编写网页 4.2 JavaScript语法基础 JavaScript是一种易学易用的脚本语言,目的是面向与用户动态交互的脚本开发,扩展HTML页面的功能,而不是开发大型复杂的程序,所以相对而言,JavaScript的语法规则较少而且较为简单。但作为一门编程语言,它有自己的语法规则,自己的关键字、指令和对象。4.

9、2 JavaScript语法基础语法基础4.2.1 Javascrip的保留关键字4.2 JavaScript语法基础语法基础4.2.2 变量1JavaScript的数据类型 变量的定义类型类型(关键字)关键字)说明说明字符串类型字符串类型(String)用引号引起的一串字符(用引号引起的一串字符(“”,)数数值值类类型型(int,float,double)整数或者实数整数或者实数布尔类型(布尔类型(boolean)逻辑值,有真或假两种(逻辑值,有真或假两种(true,false)空类型(空类型(null)代表一个空值代表一个空值对象类型(对象类型(Object)代表代表JavaScriptJ

10、avaScript中的一些对象中的一些对象未定义数据类型(unDefined)如果对象属性不存在,声明了变量但从未赋 值,将返回undefined 4.2 JavaScript语法基础语法基础2变量的定义JavaScript中采用弱类型变量,变量可以不做声明和不做类型说明,而在使用或赋值时确定类型。但为了形成良好的编程风格,变量应该采取先定义再使用的方法。JavaScript中变量的定义用关键字var来实现。例如,定义一个名为id的变量:var id;var x=5;var carname=Volvo;y=“hello”;/如果您所赋值的变量还未进行过声明,该变量会自动声明。4.2 JavaS

11、cript语法基础语法基础3变量的命名变量的命名要遵循如下的规则:(1)变量名不能与保留字冲突。(2)变量名必须以字母或者下划线(_)或者$开头,不能用数字或者其他非字母字符作为变量名开头。(3)变量名中不能包含空格。(4)JavaScript是区分大小写的,所以给变量命名时要考虑大小写的问题。4.2 JavaScript语法基础语法基础4.2.3 表达式与运算符按照运算符的功能可以分为:算术运算符:+,-,*,/,%,+,-,-(取负)逻辑运算符:&,|,!比较运算符:=,!=,,=,1&54,结果为true 21&51|51|54,其结果也为true(3)”!“:当表达式的逻辑值为true

12、时返回结果false,当表达式的逻辑值为false时返回结果true。例如:!(21)结果为false。4.2 JavaScript语法基础语法基础3.比较运算符:=,=,!=,,=,=;x=“5”为true4.2 JavaScript语法基础语法基础4.赋值运算符:=,+=,-=,*=,/=,%=(1)“+=”:表示左、右两边数相加,结果赋给左边变量。例如:X=5,Y=5,X+=Y将10赋给了X。(2)“-=”:表示左、右两边数相减,结果赋给左边变量。例如:X=5,Y=5,X-=Y将0赋给了X。(3)“*=”:表示左、右两边数相乘,结果赋给左边变量。例如:X=5,Y=5,X*=Y将25赋给了

13、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表达式的值为结果1,值为false表达式的值为结果2。例如:(day=“星期六”)?“今天是周末”:“今天不是周末”4.2 JavaScript语法基础语法基础6.字符串连接运算符:+n字符串运算符只有一个合并运算

14、符“+”,表示两个字符串的合并,例如:abc+“您好!”,这个表达式的值为“abc您好!”。n注意:如果把数字与字符串相加,结果将成为字符串x=5+5;document.write(x);/10document.write();x=5+5;document.write(x);/55document.write();4.2 JavaScript语法基础语法基础7.运算符优先级优先级从高到低顺序为:(1)乘、除、模(*、/、%)。(2)加、减(+、-)。(3)比较(、=、=、=、!=、=)。(4)逻辑与(&)。(5)逻辑或(|)。(6)条件(?:)。例如:(4*5+1822)?”对”:”错“的值为

15、什么?错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 基本语句1条件语句(1)if语句格式:if(表达式)语句块;(2)if-else语句 if(表达式)语句块1;else 语句块2;例如:根据当前时间

16、判断是白天还是夜晚例如:根据当前时间判断是白天还是夜晚 var mess1=;document.write();day=new Date();hr=day.getHours();if(hr=6)&(hr18)mess1=现在是白天现在是白天,该工作了。该工作了。;else mess1=现在是黑夜,该休息了!现在是黑夜,该休息了!;document.write(mess1);document.write();程序效果演示4.2 JavaScript语法基础语法基础(3)switch语句switch(表达式)case 值1:语句1;break;case 值2:语句2;break;case 值n:语

17、句n;break;default:语句;var mess1=“”;day=new Date();hr=day.getHours();switch(hr=0)&(hr=5)&(hr=7)&(hr=12)&(hr=15)&(hr=17)&(hr=18)&(hr19)?7:8)case 1:mess1=“深夜了,注意身体,该休息了!深夜了,注意身体,该休息了!”;break;case 2:mess1=“清晨好,这么早就上网了呀?清晨好,这么早就上网了呀?”;break;case 3:mess1=“早上好,又是美好的一天!早上好,又是美好的一天!”;break;case 4:mess1=“该吃午饭啦!

18、该吃午饭啦!”;break;case 5:mess1=“又要开始工作了!又要开始工作了!”;break;case 6:mess1=“准备吃晚饭了!准备吃晚饭了!”;break;case 7:mess1=“早上好,又是美好的一天!早上好,又是美好的一天!”;break;default:mess1=“一天过的真快!今天过的好吗?一天过的真快!今天过的好吗?”;document.write(mess1);程序效果演示程序效果演示4.2 JavaScript语法基础语法基础2循环语句(1)for语句for(初始表达式;循环条件表达式;计数器表达式)语句块;例如:var name=prompt(“请写出

19、你的姓名:”,“lp”);document.write(“这是”+name+”喜欢的3种活动”);for(var i=1;i=3;i+)document.write(“”);document.write(i+”.”+prompt(活动+i,活动类型);效果演示4.2 JavaScript语法基础语法基础(2)while语句while(循环条件表达式)语句块;计数器表达式;(3)do-while语句 do 语句块;计数器表达式;while(循环条件表达式)for(var i=1;i=3;i+)document.write(“”);document.write(i+”.”+prompt(活动+i,

20、活动类型);改写成while或者dowhile 循环?(4)break 和 continue 语句 breaknbreak 命令可以终止循环的运行,然后继续执行循环之后的代码(如果循环之后有代码的话)。n实例:实例:var i=0 for(i=0;i=10;i+)if(i=3)break;document.write(The number is +i)document.write()结果:结果:The number is 0The number is 1 The number is 2 Continuencontinue 命令会终止当前的循环,然后从下一个值继续运行。n实例:var i=0 f

21、or(i=0;i=10;i+)if(i=3)continue;document.write(The number is +i);document.write();结果:结果: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 number is 8 The number is 9 The number is 10 4.2 JavaScript语法基础语法基础3其他语句 (了解)(1)for-in语句 for(变量 in

22、 对象)代码块;(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*PI)+sin(LN10)y=tan(14*E)对应于一个对象的每个属性,或一个数组的每个元素,执行一个或多个语句。对应于一个对象的每个属性,或一个数组的每个元素,执行一个或多个语句

23、。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的方式的方式 /迭代属性

24、。迭代属性。for(key in a)s+=akey+ /s+=key+“ ”;/得到的得到的s将是将是”a b c”return(s);完整程序的效果演示完整程序的效果演示4.2 JavaScript语法基础语法基础4.2.4 函数JavaScript不区分函数和过程,它只有函数。1函数的定义 function 函数名(参数1,参数2.)代码块;2函数的参数:在函数定义时确定参数,然后按照确定的参数进行传递调用。3函数返回值:可以使用return语句返回常量、变量,也可以是表达式等。4.函数包括静态函数和动态函数4.2.5 4.2.5 其他说明其他说明n空格空格nJava

25、Script 会忽略多余的空格。所以您可以在代码中添加适当的空格,使得代码的可读性更强。n下面的两行是等效的:name=Hege“name =Hege n换行换行n您可以在文本字符串内部使用反斜杠对代码进行折行。n下面的例子是正确的:document.write(Hello World!)但是不能像这样折行:document.write (Hello World!)n插入特殊字符插入特殊字符n反斜杠用来在文本字符串中插入引号、斜杠和其他特殊字符。比较常见的如下:特殊字符输出单引号”双引号反斜杠bn例如:var txt=“We are the so-called”Vikings“from the

26、 north.document.write(txt)JavaScript 会输出文本字符串:We are the so-called Vikings from the north.4.3 JavaScript的内置的内置对对象和函数象和函数JavaScript中的内置对象,包括数学(Math)对象、字符串(String)对象、日期(Date)对象、时间(Time)对象和数组(Array)对象、逻辑对象、window对象及其子对象等。4.3 JavaScript的内置的内置对对象和函数象和函数4.3.1 Math对象nMath对象不需要用new操作符创建对象,而是可以直接使用,所以又被称作是静态

27、的对象。n调用方式为:Math.数学函数名(参数表)1Math对象的属性(参见教材P347)2Math对象的方法(参见教材P347)3 Math对象举例:使用Math对象alert(“圆周率PI的5次方四舍五入后的值是:”+Math.round(Math.pow(Math.PI,5);运行结果见 math.htm4.3 JavaScript的内置的内置对对象和函数象和函数4.3.2 String对象n字符串是由0或多个字符组成的序列。在JavaScript中,字符串是通过在其首尾添加成对的单引号()或双引号(“”)来说明的。nString中的函数不能直接使用类名String加函数名,而是要创建

28、String类型的对象,在对象的后面加上函数名。4.3 JavaScript的内置的内置对对象和函数象和函数1String对象的定义(两种)n 一种是直接将字符串赋值给变量:str1=hello;n 另一种是使用new运算符创建字符串:str2=new String(hello);2String对象的属性_length(表字符串中的字符个数)3 3StringString对象的方法对象的方法例1:计算字符串的长度例2:为字符串添加样式例3:查找字符串-indexof例4:字符串的其它相关操作4.字符串的使用举例字符串的使用举例4.3 JavaScript的内置的内置对对象和函数象和函数4.3.

29、3 Date对象nJavaScript中没有专门的日期类型,Date对象中不仅包括日期,还包括时间。1Date对象的定义 var 对象名=new Date(参数)注注意意:如如果果没没有有参参数数,Date 对象将自动使用当前的日期和时间作为其初始值。例如:var myDate=new Date()/当前的日期和时间2Date对象的方法 见附录4.3 JavaScript的内置的内置对对象和函数象和函数3.举例n举例1:Date()的默认值为当前的日期和时间:date1.htmn举例2:代码运行时间的计算:date2.htmn举例3:返回1970 年到今天有多少年:getTime.htmln举

30、例4:重新设置日期:setFullYear.htmln举例5:显示一个钟表:clock.html4.3 JavaScript的内置的内置对对象和函数象和函数4.3.4 Array对象n数组是一系列元素的有序集合,它的强大功能是不可替代的。在JavaScript中,可以使用Array数组对象来完成对数组的操作。1Array对象的定义:使用关键字new来创建例如:var Tips=new Array(6);2.Array对象的赋值:两种方法第一种:先定义后赋值 var mycars=new Array()/可以任意个元素 mycars0=Saab mycars1=Volvo mycars2=BMW

31、 也可以使用一个整数自变量来控制数组的容量: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.write(mycars0)/输出Saab 4.修改已有数组中的值修改已有数组中的值,只要向指定下标号添加一个新值即可:mycars0=Opel;5Array对象的属性6Array对象的方法7 Ar

32、ray对象举例每次随机显示一句话一个使用数组对象的例子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 JavaScript的内置的内置对对象和函数象和函数document.write(“”+Tipsindex+”);运行结果见 array.htmn更多示例:for-in-访问数组 数组的链接-concat 用数组的元素组成

33、字符串-join 文字数组-sort 数字数组-sort()4.3.4 Boolean(逻辑)对象(逻辑)对象nBoolean(逻辑)对象用于将非逻辑值转换为(逻辑)对象用于将非逻辑值转换为逻辑值(逻辑值(true 或者或者 false)。)。n使用关键词使用关键词 new 来定义来定义 Boolean 对象。对象。n语法语法:var myBoolean=new Boolean()n如果逻辑对象无初始值或者其值为 0、-0、null、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 false 时)!n下面的所有的代码行均会

34、创建初始值为 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)n下面的所有的代码行均会创初始值为 true 的 Boolean 对象:var myBoolean=new Boolean(true)var myBoolean=new Boolean(true)v

35、ar myBoolean=new Boolean(false)var myBoolean=new Boolean(Richard)nBoolean 对象属性nBoolean 对象方法 n示例:nBoolean.htmln广告.html (有关网页坐标的先要知识).3.浏览器navigator 对象对象nJavaScript navigator 对象包含了有关访问者浏览器的所有信息。Navigator 对象有两个常用属性:nappName:appName属性返回属性返回浏览器的名称,比如,Netscape 或者 Microsoft Internet Explorer。nappVersion 存有

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

37、w对象时可以直接引用window对象的属性和方法。n例如: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方法其他参数见参考文件:window_open()举例:模拟我校网络注销4

38、.3 JavaScript的内置的内置对对象和函数象和函数4.3.6.2窗口对象的子对象document对象ndocument对象的属性和方法见附录P344n举例1:源代码及效果见document1.htmn通过document对象的属性和方法可以访问HTML文档元素,并且具有和HTML文档标记一样的功能。以这种方式访问HTML文档元素所使用的document对象的属性就是all,它是一个非常特殊的属性,但这个属性只有IE支持。n举例2:设计一个文档,要求在页面上显示出该文档所使用的所有的HTML标记。源代码及效果见document2.htm4.3 JavaScript的内置的内置对对象和函数

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

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

41、页面n源代码:登陆1 登陆2 登陆3 登陆4(了解)4.3 JavaScript的内置的内置对对象和函数象和函数4.3.6.6窗口(window)对象的使用n 对window对象的使用来说,主要集中在窗口的打开和关闭、窗口状态设置、定时执行程序和各种对话框的使用等四个方面。(1)对话框的使用 在JavaScript程序中可以使用对话框进行输入输出,实现程序和用户的交互。JavaScript中提供有3种对话框,即警示、确认和提示对框。只要在程序中直接调用window对象的3个方法:alert()、confirm()和prompt()就可以使用这3种对话框。警告框警告框n警告框经常用于确保用户可以

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

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

44、码及效果见openandclose.htm4.3 JavaScript的内置的内置对对象和函数象和函数(3)窗口状态的设置n进行窗口状态设置主要是使用window对象的status属性和一些控制窗口特征的方法来实现。n例:设计一个状态和大小不断发生变化的页面,同时在浏览器状态栏显示窗口的大小和位置等信息。n源代码及效果见status.htm4.3 JavaScript的内置对象和函数的内置对象和函数(4)定时执行程序n使用window对象的定时执行程序功能需要用到window对象的setTimeout()、setInterval()、clearTimeout()和clearInterval()

45、等方法。n例如:设计一个页面,要求显示一个数字,每隔1秒数字减少1次,直到减少到0为止。n源代码及效果见settimerun.htm4.3 JavaScript的内置对象和函数的内置对象和函数4.3 JavaScript的内置的内置对对象和函数象和函数4.3.6 内置函数(1)escape():将字符串中的非字母数字字符转换为按格式%XX表示的数字,其中,XX表示那些字符对应的ASCII码值的16进制数。它用于转义不能用明文正确发送的任何字符。比如,电话号码中的空格将被转换成字符%20,从而能够在 URL 中传递这些字符.(2)unescape():对字符串进行解码。(3)eval():计算字

46、符串表达式的值。(4)parseInt():用于将字符串开头的数字分解出来,转换为整数,若字符串不是数字开头,返回NaN。(5)parseFloat():用于将字符串开头的数字分解出来,转换为浮点数,若字符串不是数字开头,返回NaN。(6)isNaN():判断一个表达式是否是数值。var ss=tom&show;var sa=escape(ss);/sa就为tom%20%26%20show4.3 JavaScript的内置的内置对对象和函数象和函数4.3.7 自定义对象(1)通过对象初始化来创建,格式为:对象=属性1:属性值1,属性2:属性值2,.,属性n:属性值n(2)通过定义对象的构造方法

47、创建对象 function 对象名(属性1,属性2,.,属性n)this.属性1=属性值1;this.属性2=属性值2;.this.属性n=属性值n;this.方法1=函数名1;this.方法2=函数名2;.this.方法n=函数名n;举例ForInDemo()/创建某些变量。var a,key,s=;/初始化对象。a=a:Athens,b:Belgrade,c:Cairo /迭代属性。for(key in a)s+=akey+ return(s);4.4 JavaScript的事件与事件处理程序的事件与事件处理程序n事件举例:事件举例:n鼠标点击 n页面或图像载入 n鼠标悬浮于页面

48、的某个热点之上 n在表单中选取输入框 n确认表单 n键盘按键 n注意:注意:事件通常与函数配合使用,当事件发生时函数才会执行。nJavaScript常见的事件有blur、click、change、focus、load、unload、mouseover、select和submit。n事件处理程序是响应某个事件而进行的具体操作活动,每个事件JavaScript都指定了相应的事件处理程序,程序名由事件名前加on组成,例如blur事件的事件处理程序名为onblur,通过事件处理程序名调用程序的具体内容,即编成人员指定的函数、自定义的函数或指定对象的方法设计完成的任务与功能。常用事件与对象之间的对应关系

49、常用事件与对象之间的对应关系(一一)事件事件简述简述适用对象适用对象onAbort载入图象失败载入图象失败ImageonBlur失去焦点失去焦点Button,checkbox,fileupload,frame,password,radio,select,text,textarea,windowonChange改变改变Fileupload,radio,select,text,texareaonClick单击单击Button,checkbox,document,linkonDbClick双击双击Area,checkbox,document,linkonError载入图象错载入图象错imageonF

50、ocus获得焦点获得焦点Button,checkbox,fileupload,frame,password,radio,select,text,textarea,windowonKeyDown键按下键按下Document,image,link,textarea常用事件与对象之间的对应关系常用事件与对象之间的对应关系(二二)事件简述适用对象onKeyPress按键按键Document,image,link,textareaonKeyUp键弹起键弹起Document,image,link,textareaonLoad载入文件载入文件Document,imageonMove移动移动frameonMo

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育专区 > 大学资料

本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

工信部备案号:黑ICP备15003705号© 2020-2023 www.taowenge.com 淘文阁