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

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

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

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

4、数据 JavaScript 可被用来检测访问者的浏览器 JavaScript 可被用来创建 cookies,第4章 使用JavaScript编写网页,4.1.3 JavaScript与其他语言的比较 1JavaScript与Java 2JavaScript与VBScript 3. javaScript与Jscript,第4章 使用JavaScript编写网页,4.1.3 JavaScript与其他语言的比较 1、Javascript和java 是两个公司开发的两个不同产品，作用和用途不一样，但两者语法上有很多相似之处，javascript并不是java的子集。 在概念和设计方面，Java 和

5、JavaScript 是两种完全不同的语言。Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C+。,第4章 使用JavaScript编写网页,4.1.3 JavaScript与其他语言的比较 3、Javascript和Jscript 最开始web上只有静态的html,为了满足更好的交互需求，netscape开发了在Navigator中使用的LiveScript语言，后改名为JavaScript, Microsoft发行jscript用于internet explorer。 最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种

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

7、。, / document.write(Hello World!); 上面的代码会在 HTML 页面中产生这样的输出： Hello World!,4.1.5 JavaScript在HTML中的位置 一般在 head部分放JavaScript 用到的函数的定义，在body部分调用执行。 实例 head 部分 包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。 body 部分 执行位于 body 部分的脚本。 外部 JavaScript 如何访问外部脚本。 注意：外部文件的js不能包含 标签。 然后把 .js 文件指定给 标签中的 “src” 属性，就可以使

8、用这个外部文件了。,第4章 使用JavaScript编写网页,4.2 JavaScript语法基础 JavaScript是一种易学易用的脚本语言，目的是面向与用户动态交互的脚本开发，扩展HTML页面的功能，而不是开发大型复杂的程序，所以相对而言，JavaScript的语法规则较少而且较为简单。但作为一门编程语言，它有自己的语法规则，自己的关键字、指令和对象。,4.2 JavaScript语法基础,4.2.1 Javascrip的保留关键字,4.2 JavaScript语法基础,4.2.2 变量 1JavaScript的数据类型 变量的定义,未定义数据类型(unDefined ) 如果对象属性不

9、存在,声明了变量但从未赋 值,将返回undefined,4.2 JavaScript语法基础,2变量的定义 JavaScript中采用弱类型变量，变量可以不做声明和不做类型说明，而在使用或赋值时确定类型。但为了形成良好的编程风格，变量应该采取先定义再使用的方法。JavaScript中变量的定义用关键字var来实现。例如，定义一个名为id的变量： var id; var x=5; var carname=Volvo; y=“hello”;/如果您所赋值的变量还未进行过声明，该变量会自动声明。 ,4.2 JavaScript语法基础,3变量的命名 变量的命名要遵循如下的规则： （1）变量名不能与保

10、留字冲突。 （2）变量名必须以字母或者下划线（_）或者$开头，不能用数字或者其他非字母字符作为变量名开头。 （3）变量名中不能包含空格。 （4）JavaScript是区分大小写的，所以给变量命名时要考虑大小写的问题。,4.2 JavaScript语法基础,4.2.3 表达式与运算符 按照运算符的功能可以分为： 算术运算符:+,-,*,/,%,+,-,-(取负） 逻辑运算符: document.write(x); /10 document.write(); x=5+5; document.write(x); /55 document.write(); ,4.2 JavaScript语法基础,7.

11、运算符优先级 优先级从高到低顺序为： （1）乘、除、模（*、/、%）。 （2）加、减（+、-）。 （3）比较（、=、=、= =、!=、= = =)。 （4）逻辑与（ 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

12、; 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=day.getHours(); switch(hr=0) 程序效果演示

13、,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 语句 break break 命令可以终止循环的运行，然

14、后继续执行循环之后的代码（如果循环之后有代码的话）。 实例： var i=0 for (i=0;i) ,结果： The number is 0 The number is 1 The number is 2,Continue continue 命令会终止当前的循环，然后从下一个值继续运行。 实例： 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 6 The number is 7 The number

15、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语句时，代码变得更短且更易

16、读： with(Math) x = cos(3 * 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”

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

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

19、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对象 Math对象不需要用new操作符创建对象，而是可以直接使用，所以又被称作是静态的对象。 调用方式为： Math.数学函数名(参数表) 1Mat

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

21、avaScript的内置对象和函数,1String对象的定义(两种) 一种是直接将字符串赋值给变量： str1=hello; 另一种是使用new运算符创建字符串: str2=new String(hello); 2String对象的属性_length(表字符串中的字符个数),3String对象的方法,例1:计算字符串的长度 例2:为字符串添加样式 例3:查找字符串-indexof 例4:字符串的其它相关操作,4.字符串的使用举例,4.3 JavaScript的内置对象和函数,4.3.3 Date对象 JavaScript中没有专门的日期类型，Date对象中不仅包括日期，还包括时间。 1Date

22、对象的定义 var 对象名=new Date(参数) 注意：如果没有参数,Date 对象将自动使用当前的日期和时间作为其初始值。 例如:var myDate=new Date() /当前的日期和时间 2Date对象的方法 见附录,4.3 JavaScript的内置对象和函数,3.举例 举例1： Date()的默认值为当前的日期和时间 ：date1.htm 举例2 : 代码运行时间的计算：date2.htm 举例3: 返回1970 年到今天有多少年 :getTime.html 举例4: 重新设置日期: setFullYear.html 举例5: 显示一个钟表: clock.html,4.3 Ja

23、vaScript的内置对象和函数,4.3.4 Array对象 数组是一系列元素的有序集合，它的强大功能是不可替代的。在JavaScript中，可以使用Array数组对象来完成对数组的操作。 1Array对象的定义:使用关键字new来创建 例如：var Tips=new Array(6); 2. Array对象的赋值:两种方法 第一种:先定义后赋值 var mycars=new Array() /可以任意个元素 mycars0=Saab mycars1=Volvo mycars2=BMW,也可以使用一个整数自变量来控制数组的容量： var mycars=new Array(3) /该数组的容量限

24、定为3 mycars0=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 Array对象举例每次随机显示一句话 一个使用数组对象的例子 Tips=new Arra

25、y(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.htm 更多示例: for-in-访问数组 数组的链接-concat 用数组的元素组成字符串-join 文字数组-sort 数字数组 - sort(),4.3.

26、4 Boolean（逻辑）对象 Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。 使用关键词 new 来定义 Boolean 对象。 语法: var myBoolean=new Boolean( ) 如果逻辑对象无初始值或者其值为 0、-0、null、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 false 时）！,下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。 var myBoolean=new Boolean() var myBoolean=new Bo

27、olean(0) var myBoolean=new Boolean(null) var myBoolean=new Boolean() var myBoolean=new Boolean(false) var myBoolean=new Boolean(NaN),下面的所有的代码行均会创初始值为 true 的 Boolean 对象： var myBoolean=new Boolean(true) var myBoolean=new Boolean(true) var myBoolean=new Boolean(false) var myBoolean=new Boolean(Richard)

28、,Boolean 对象属性 Boolean 对象方法,示例: Boolean.html 广告.html (有关网页坐标的先要知识）,.3.浏览器navigator 对象 JavaScript navigator 对象包含了有关访问者浏览器的所有信息。Navigator 对象有两个常用属性： appName ：appName属性返回浏览器的名称，比如，Netscape 或者 Microsoft Internet Explorer。 appVersion 存有浏览器的版本信息（其他信息中的一项） 示例： 检测浏览器及版本 检测浏览器更多信息 检测浏览器全部信息 根据浏览器类型提醒用户,appVer

29、sion 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。,4.3 JavaScript的内置对象和函数,4.3.6窗口（window）对象及其子对象 窗口对象 窗口对象处于对象层次的顶端，提供了用于处理浏览器窗口的属性和方法。由于顶层对象没有父对象，所以使用window对象时可以直接引用window对象的属性和方法。 例如： newwin=open(“confirm.htm”,“打开新窗口的方式,height=20

30、0,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.3 JavaScript的内置对象和函数,窗口对象的子对象document对象 document对象的属性和方法

31、见附录P344 举例1：源代码及效果见document1.htm 通过document对象的属性和方法可以访问HTML文档元素,并且具有和HTML文档标记一样的功能。以这种方式访问HTML文档元素所使用的document对象的属性就是all,它是一个非常特殊的属性,但这个属性只有IE支持。 举例2：设计一个文档，要求在页面上显示出该文档所使用的所有的HTML标记。源代码及效果见document2.htm,4.3 JavaScript的内置对象和函数,窗口对象的子对象history对象 history对象代表浏览器使用的历史列表，使用户可以追踪窗口中曾经使用过的URL。 举例：设计

32、一个页面，要求点击历史时使浏览器执行它时显示原来执行过的页面。 源代码及效果见history.htm,4.3 JavaScript的内置对象和函数,窗口对象的子对象screen对象和location对象 screen对象在window对象中代表用户屏幕，处理用户屏幕相关的一些属性（例如屏幕分辨率等）。location对象在window对象中代表当前窗口装入文档的URL。 例如: 设计一个页面,它将根据用户屏幕的分辨率显示不同的页面,如果屏幕分辨率小于800*600就转去执行源码,否则就在Web页面上输出当前用户的屏幕分辨率。 源代码及效果见screenandlocation.ht

33、m,4.3 JavaScript的内置对象和函数,窗口对象的子对象form对象 form对象一般是通过标记创建,在网页中添加一个标记就相当于创建了一个form 对象.如果创建form对象时给它设置了名字属性,那么就可以通过设定的名字来访问这个form对象。 举例： 例1：设计一个页面，要求列出form对象的所有元素名称。 源代码及效果见form.htm 例2：设计一个登陆页面，密码和用户名正确后才进入欢迎页面 源代码：登陆1 登陆2 登陆3 登陆4(了解),4.3 JavaScript的内置对象和函数,窗口（window）对象的使用 对window对象的使用来说，主

34、要集中在窗 口的打开和关闭、窗口状态设置、定时执行 程序和各种对话框的使用等四个方面。 （1）对话框的使用 在JavaScript程序中可以使用对话框进行输入 输出，实现程序和用户的交互。JavaScript中 提供有3种对话框，即警示、确认和提示对框。 只要在程序中直接调用window对象的3个方法： alert() 、confirm()和prompt()就可以使用这3种对话框。,警告框 警告框经常用于确保用户可以得到某些信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法： alert(文本) 实例：使用window对象的alert（）方法设计一个页面，要求在显示页面的其他

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

36、那么返回值为输入的值。如果用户点击取消，那么返回值为 null。 语法： prompt(文本,默认值) 实例：使用window对象的prompt（）方法设计一个页面，要求用户在提示对话框内输入自己的姓名，然后根据用户输入的结果在页面上显示欢迎信息。源代码及效果见prompt.htm,（2）窗口的打开和关闭 使用window对象的open（）和close（）方法可以实现窗口的打开和关闭操作。 例如：源代码及效果见openandclose.htm,4.3 JavaScript的内置对象和函数,(3)窗口状态的设置 进行窗口状态设置主要是使用window对象的status属性和一些控制窗口特征的方法

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

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

39、。 （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.方法n=函数名n; 举例,ForInDemo() / 创建某些变量。 var a, key, s = ; / 初始化对象。 a = a : Athens , b : Belgrade, c : Cairo / 迭