第3讲——脚本语言——JavaScript.ppt

《第3讲——脚本语言——JavaScript.ppt》由会员分享，可在线阅读，更多相关《第3讲——脚本语言——JavaScript.ppt（68页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第3讲 脚本语言脚本语言了解JavaScript掌握JavaScript的语法结构会编写JavaScript的应用程序 学习目标本章主要内容1 在在HTML中插入中插入JavaScript2 变量、数据类型与表达式变量、数据类型与表达式3 JavaScript对象实例与函数对象实例与函数4 JavaScript的选择语句的选择语句5 JavaScript的循环语句的循环语句6 JavaScript事件与事件处理程序事件与事件处理程序7 JavaScript应用实例应用实例8 思考与上机思考与上机1 在HTML中插入JavaScript JavaScript是Java的子集，具有Java语言的基

2、本语句，具有Java语言的基本特性，是由对象、对象属性与对象方法（函数）构成的，是一种基于对象和事件驱动、具有安全性的脚本语言，其主要特点是比Java语言容易理解，能与HTML语言一起完成显示页面信息的任务。1.1 什么是什么是JavaScript 1.2 在在HTML文档中插入文档中插入JavaScript的方的方式式 例例 3.1 一个包含有JavaScript语言的HTML文档（P41）。/*隐藏下面JavaScript语句多行注释多行不显示多行不显示的情况*/document.write(这是我们第一次使用JavaScript语言)/隐藏一行效果图1.2 在在HTML文档中插入文档中插

3、入JavaScript的方的方式式（1）插入插入JavaScript语言的语言的标记码标记码从上例中可以看出JavaScript语言是通过标记码对插入到HTML文档中的，而且可以放在HTML文档中的任何地方。它以开始，以结束。插入JavaScript语言的语法格式：JavaScript语句 （2）JavaScript命令的大小写之别命令的大小写之别JavaScript与Java命令一样区别大小写。因此，在3-1.htm中的JavaScript命令代码都是小写字母，如例子中的document.write()语句。1.2 在在HTML文档中插入文档中插入JavaScript的方的方式式（3）Jav

4、aScript的注释标记的注释标记JavaScript有自己的注释标记。用来告诉浏览器将JavaScript语句隐藏起来不显示。JavaScript注释标记的语法格式：/一行注释 /*多行注释*/说明：/标记注释一行，即一行不显示，而/*/标记可以将多行隐藏起来不显示。（4）document对象及对象及write方法方法document对象为JavaScript内置的文档对象，它具有write（）方法，可以在页面中显示指定的文字 1.3 使用使用JavaScript对象属性与方法对象属性与方法 创建一个包含多个创建一个包含多个JavaScript对象的文档对象的文档例例 3.2（P43）上次修

5、改时间：document.write(document.lastModified)alert(欢迎你第二次使用JavaScript)prompt(请输入你的姓名：,张驰)效果图上例知识点分析（1）调用对象方法和属性的方式调用对象方法和属性的方式上例中使用了document对象的write()方法和lastModified属性。write()方法的功能是输出圆括号内的参数值到窗口。JavaScript语言通过对象定义其方法，通过对象名.方法名来调用对象的方法完成指定的功能。write()方法完成显示信息的任务，显示的信息由圆括号对内的参数提供。调用对象方法和使用对象属性有如下语法格式：对象名.方

6、法名（参数）对象名.属性名上例知识点分析（2）alert方法的功能方法的功能在3-2.htm中还使用了window对象的alert方法，它的功能是显示一个带有提示信息的对话框，alert()方法一般用于提示或提醒用户某一事情。调用alert方法的语法格式：alert(提示信息)alert()方法前面没有对象名，这是因为alert()方法为window对象的方法，没有指明对象名，JavaScript默认为window对象。上例知识点分析（3）prompt()方法的功能方法的功能在3-2.htm中还使用了window对象的prompt()方法，它的功能是显示一个可以让用户输入信息的对话框。输入信息

7、对话框由“提示信息”，“初值”、一个“确定”按钮和一个“取消”按钮组成调用prompt()方法的语法格式：prompt(提示信息，初值)prompt()方法的括号中包括了两个字符串，一个是要显示的信息，一个是输入文本框内显示的初始信息 2 JavaScript变量、数据类型与表达式变量、数据类型与表达式变量与常量变量与常量变量是计算机提供的存放数据的内存空间的代号。变量的功能就是保存数据，存放在变量中的数据可以改变常量是计算机中存放固定不变数据的内存空间的代号。在JavaScript中使用变量和常量前要先声明其代号，即变量名 2.1 声明声明JavaScript变量的方法变量的方法例例 3.3

8、 带有JavaScript变量，并给变量赋值的文档(P45)var name=prompt(请输入你的姓名：,张驰)var x=7var y=8document.write(欢迎你，+name)document.write(x+y=+(x+y)上例知识点归纳上例知识点归纳（1）声明变量的方法声明变量的方法 var 变量名=数据值（2）选取变量名的规则选取变量名的规则 变量名对大小写非常敏感，大小写字母代表不同的变量。另外，变量名称的长度是任意的，但必须遵循以下规则：第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符($)。后续的字符可以是字母、数字、下划线或美元符。变量名称

9、不能是JavaScript的关键字。2.2 JavaScript的数据类型的数据类型 1数值数据类型数值数据类型 数值数据类型包括整型int，浮点型float2字符串类型字符串类型string 字符串数据必须使用单引号或双引号括起来。3逻辑类型逻辑类型boolean boolean 数据类型的值只有两个：true与false。4空数据类型空数据类型null null数据类型只有一个值null，表示没有任何值5undefined 未定义数据类型未定义数据类型 undefined数据类型只有一个值undefined，表示变量 被创建后未给该变量赋值。6Object对象类型对象类型2.3 JavaS

10、cript的运算符的运算符 按照运算符的运算规律来划分有如下6种运算符：1赋值运算符赋值运算符 赋值运算符有如下6种类型：“=”表示将右边数赋值给左边变量。“+=”表示左、右两边数相加，结果赋给左边变量。“=”表示左、右两边数相减，结果赋给左边变量。“*=”表示左、右两边数相乘，结果赋给左边变量。“/=”表示右边数除左边数，结果赋给左边变量。“%=”表示右边数除左边数，余数赋给左边变量。2.3 JavaScript的运算符的运算符2算术运算符算术运算符算术运算符有加“+”、减“-”、乘“*”、除“/”、余“%”和取负X=-X、加1“+”，减1“-”等。例如Y=+5，Y的值为6；例如Y=-6，Y

11、的值为5。3字符串运算符字符串运算符字符串运算符只有一个合并运算符“+”，表示将两个字符串合并在一起，例如：abc+”你好！”，合并后的值为“abc你好！2.3 JavaScript的运算符的运算符4比较运算符比较运算符比较运算符有如下6种类型：“”：如果两边数据相等返回true。例如：22返回true；“！”：如果两边数据不相等返回true；例如：“THE”！“TH”返回true；“”：如果左边数大于右边数返回true；例如：21返回true；“”：如果左边数大于或等于右边数返回true；“1&51&54，其结果为false。“|”：称为逻辑或，例如，21|51|54，其结果也为true。“

12、！”：称为逻辑非，当表达式的逻辑值为true时返回结果false，当表达式的逻辑值为false时返回结果true。例如：！21结果为false。2.3 JavaScript的运算符的运算符6条件运算符条件运算符 条件运算符只有一个“？”，条件运算符与上面的运算符略有不同。条件表达式的结构如下。(条件)？结果1：结果27运算符优先级运算符优先级 当表达式里有多种运算符号的时候，其优先级从高到低顺序为：乘、除、模（*、/、%）加、减（、）比较（、！）逻辑与（&）逻辑或（|）条件（?）2.3 JavaScript的运算符的运算符1.JavaScript表达式表达式JavaScript表达式是Java

13、Script变量、常量、运算符以及表达式的任意组合。表达式在使用上是先计算后使用，因此，不管一个表达式有多么复杂，其最终结果都是一个有确定类型和大小的数值，表达式的类型确定其值的数据类型。2.JavaScript表达式的类型表达式的类型JavaScript的表达式有6种类型：赋值表达式，算术表达式，字符串表达式、比较表达式、逻辑表达式和条件表达式。例例 3.4 使用JavaScript表达式，给出表达式结果（P48）。var question=10+20是多少？;var answer=30;var x1=计算正确;var x2=计算错了;var x5=prompt(question,0);va

14、r output=(x5=answer)?x1:x2;document.write(output);如图所示对话框，输入30并单击“确定”按钮后，会出现图所示页面。3 JavaScript对象实例与函数1什么是对象实例什么是对象实例在JavaScript中有许多已定义好的内置对象，如窗口对象window、文档对象document、日期对象Date等。对象实例即对象的一个具体例子，可以用任意名字来定义对象实例。对象实例是一个具体的对象，它具有原对象的一切属性和方法，通过对象实例还可以定义新的属性和方法。有的对象的属性与方法必须通过对象实例才能调用。3.1 什么是对象实例什么是对象实例例例 3.5

15、 包含Date对象实例（P50）。today=new Date()document.write(现在的时间是：,today.getHours(),:,today.getMinutes()document.write(今天的日期是：,today.getMonth()+1,/,today.getDate(),/,today.getYear()知识点归纳（1）创建对象实例的方式 创建对象实例的语法格式：实例名=new 对象名（）（2）通过对象实例调用原对象的属性与方法Date()的对象实例today能调用Date()的属性与方法，在创建对象实例today时如果未在Date()中指定具体日期与时间，将

16、使用本地计算机的当前时间初始化实例对象，因此，通过today对象的get.方法可以得到当前时间与日期。注意getMonth属性所取得的月份范围是从0到11，必须加1以才能代表现实中的1月至12月。3.2 创建创建JavaScript的自定义函数的自定义函数 1什么是什么是JavaScript函数函数JavaScript的函数是执行某个指定任务或功能的一系列JavaScript命令的集合。通过调用一个函数名能方便地实现函数中定义的功能。JavaScript已经定义好一些内置函数，在编写JavaScript脚本时可以直接使用。这里要介绍的是根据任务和活动的具体内容自定义函数的方式。JavaScri

17、pt的函数与JavaScript的方法相似，不同之处是方法与某个对象有关系，通过对象才能使用其方法。而函数与任何对象都没有关系，可直接调用 例例 3.6 一个包含产生随机数的自定义函数（P51）。function RandomNumber()today=new Date();num=Math.abs(Math.sin(today.getTime();return num;document.write(这是自定义函数RandomNumber()产生的随机数:,RandomNumber();创建自定义函数的方法创建自定义函数的语法格式：function 函数名(参数1，参数2，)命令块return

18、 x JavaScript通过函数命令块中的return关键字给出函数的返回值.JavaScript函数也可以不带返回值，不使用return关键字即可 函数不会自动运行，只有通过调用函数的命令才能运行该函数，执行函数中定义的功能 4 JavaScript的选择语句 if-else单选语句的结构if-else语句的语法格式：if 条件 JavaScript命令 else 其他 命令4.1 if-else 单选语句单选语句 4.1 if-else 单选语句单选语句 嵌套使用if-else的语法格式：if 条件1 JavaScript命令else if 条件2 JavaScript命令 else 其

19、他 命令 例例 3.7 使用if-else单选语句。（P53）var mess1=;document.write();day=new Date();hr=day.getHours();if(hr=6)&(hr 18)mess1=现在是白天，该工作了。;else mess1=现在是黑夜，该休息了！;document.write(mess1);document.write();4.2 switch多选语句多选语句 switch多选语句是解决多种情况选择的最好方案。switch多选语句的结构switch多选语句的语法格式：switch(条件表达式)case 常量值1:语句1;break;case 常

20、量值2:语句2;break;.default:语句n;例例 3.8 使用switch多选语句（P54）var mess1=;day=new Date();hr=day.getHours();switch(hr=0)&(hr=5)&(hr=7)&(hr=12)&(hr=15)&(hr=17)&(hr=18)&(hr 19)?7:8)case 1:document.write(深夜了，注意身体,该休息了！);break;case 2:document.write(清晨好，这么早就上网呀？);break;case 3:document.write(早上好，一天之际在于晨，又是美好的一天！);brea

21、k;case 4:mess1=该吃午饭啦！有什么好吃的？;break;case 5:mess1=又要开始工作了吧?有什么收获呀？;break;case 6:mess1=该休息一下了！准备吃饭吧！;break;case 7:mess1=吃过晚饭了吗？;break;default:mess1=一天过的可真快！今天过的好吗？;document.write(mess1)4.2 switch多选语句多选语句switch多选语句的执行顺序先计算switch 后的“条件表达式”，然后将表达式的值与各个case后的“常量值”比较，如果表达式的值与某个常量的值相等，就执行该常量值后面的语句。如果都不相等，就执行

22、default下面的语句。碰到break语句程序流程将跳出switch语句体。default子句default子句可以没有命令语句，即什么都不执行，直接跳出分支语句。如果有命令语句，当case语句都不成立时，执行default子句中的命令。4.2 switch多选语句多选语句使用switch多选语句要注意的事项：case后面的常量必须是整数或字符型数据，而且不能有相同的值。通常在每一个case中都应使用break语句提供一个出口，使程序流程能够跳出多选语句。否则，在第一个满足条件case后面的所有语句都会被执行，这种情况叫做落空。5 JavaScript的循环语句循环语句 for循环语句的语法

23、格式：for(初值；条件；步长表达式)命令功能：功能：循环前先计算条件，值为true（真）时，执行循环语句中的命令，值为false（假）时跳出循环语句，每循环一次计数变量增加或减少一个步长单位的值。其中，初值用来设置计数变量并给它赋值。初值表达式能够用var来声明一个新变量。步长表达式用来说明计数变量的变化规律。一般用i、j、k、l等作为循环的计数变量。5.1for循环语句 5.2 forin循环语句循环语句 forin循环语句可用于在对象的所有属性内自动移位。forin循环语句的语法格式：for (j in 对象)命令语句 循环会从0增加j，直到达到该对象中的最后一个属性的下标为止。5.3

24、while循环语句循环语句while循环语句的语法格式：while(条件)命令 break continuewhile循环中的条件可以是JavaScript逻辑表达式。条件为true是，执行循环体中的命令语句。break语句可以随时终止循环，即使循环没有结束也如此。continue语句可跳到循环体中命令语句的第一句开始下一次循环。while循环一定要注意其结束方式，以防陷入死循环中出不来。break、continue命令在其他循环中同样可用。例例 3.10 使用for循环，随机显示不同图像文件的文档（P57）。a=3;var pp=Math.random();var p1=Math.round

25、(pp*(a-1)+1;var pic=;document.write(pic);刷新会显示不同的图片刷新会显示不同的图片知识点归纳知识点归纳（1）隐式方式声明变量的方式在3-10.htm可以发现，声明变量时有的变量用了var关键字，有的没有用var关键字。不用var声明的变量是以隐式方式定义的变量。（2）this的作用在JavaScript中this有特殊的作用，它表示当前的对象。这里的对象是指函数c1。（3）Array数组对象在3-10.htm还使用了Array数组对象。其实例对象b为一个一维的包含3个元素的数组变量。（4）使用图像文件夹脚本程序用到的三张图片文件要先存放在与当前文件夹的子

26、文件夹img中，名字分别为1.gif，2.gif，3.gif。使用图像文件夹可以区别管理不同格式的文件。6 JavaScript的事件与事件处理程序 6.1 什么是事件什么是事件 事件通常是指用户在页面上通过鼠标进行活动时产生的一种行为，如单击某个按钮就是一个事件，改变了表单的文本域或在链接上移动鼠标也是事件。归纳起来，JavaScript的事件可以分为如下3种类型：页面之间跳转的事件，主要是超链接事件。浏览器自身引起的事件。表单内部元素同页面中元素的交互事件。事件应用对象发生条件事件处理器Blur窗口和所有表单元素用户从窗口或表单中移开输入焦点onBlurChange文本框、文本区、单选框等

27、用户改变元素值onChangeClick按钮、单选按钮、复选框、链接用户在表单元素或在链接上单击onClickError图像、窗口装载文档或图像时出错onErrorFocus窗口和所有表单元素用户在窗口或表单元素上聚焦onFocusLoad文档体用户装载页onLoadMouseDown文档、按钮、链接用户按下一个鼠标键onMouseDownMouseMove默认用户移动光标onMouseMoveMouseOver链接用户在链接上移动光标onMouseOverMove窗口用户或脚本移动窗口onMoveReset表单用户重置表单onResetResize窗口用户或脚本改变窗口大小onResizeS

28、elect文本框、文本区用户选择表单元素的输入域onSelectSubmit表单用户提交表单onSubmitUnload文档体用户退出页面onUnload 6.2 自定义函数构成的事件处理程序自定义函数构成的事件处理程序例例 3.11 使用onload事件处理程序将页面添加到用户收藏夹的文档（P59）。function folder()window.external.AddFavorite(http:/,新浪首页)你希望把新浪首页添加到收藏夹吗？在浏览器打开网页，将弹出如图所示对话框，单击【确定】按钮，可添加“新浪首页”地址到当前用户浏览器的收藏夹中。知识点归纳知识点归纳（1）load（载入页

29、面）事件与onload事件处理器3-11.htm中在load（载入页面）事件发生时，将触发onload事件处理器调用自定义函数folder()，执行函数中定义的JavaScript命令完成指定的任务。（2）external.AddFavorite()方法external.AddFavorite()方法的功能是在IE浏览器中自动打开“添加到收藏夹”对话框，在名称文本框会出现方法中确定的名称，如本例中的“新浪首页”，方法中的网址http:/可以添加到收藏夹中。external.AddFavorite()方法只能在IE浏览器中使用。6.3 由由JavaScript命令构成的事件处理程序命令构成的事件

30、处理程序 1在程序中通过事件处理器调用在程序中通过事件处理器调用JavaScript的命令语句的命令语句例例 3.12 使用onchange事件处理器确认用户在页面中输入的数据（P60）。请输入你的姓名：请输入一个小于5的数：input type=text onchange=if(parseInt(this.value)知识点归纳知识点归纳（1）确认对话框当change（正在进行的活动改变时）事件发生时，触发onchange事件处理器直接调用JavaScript命令alert(感谢你的合作！)与confirm(你想继续吗？)打开提示对话框与确认对话框。（2）转换函数parseInt3-12.h

31、tm中使用转换函数parseInt(this.value),将string类型的数据this.value（用户在文本框输入的数据）转换为整型数据。6.4 通过命令按钮实现数据计算功能通过命令按钮实现数据计算功能 通过程序中的命令按钮调用事件处理器通过程序中的命令按钮调用事件处理器onclick 例3.13(P61)function c1(form)form.results.value=eval(form.entry.value);请输入一个算术表达式：这个表达式的结果为：效果图 7 JavaScript应用实例 7.1 创建保存JavaScript的脚本代码的js文件（1）js文件JavaSc

32、ript代码可以单独存放在一个文件内，并以.js作为文本文件的后缀名。注意js文件里不能有或其他注释语句。（2）在HTML文档调用js文件的方式在html文件中如果要使用js文件，要在script标记码中使用src属性指定js文件的存放路径。参见下面的代码：1 创建创建js文件文件 3-14.js var a,passwort;a=1234;passwort=prompt(请你输入口令!,);if(passwort=a)location.href=3-15.htm;else alert(对不起，你输入的口令不对!);location.href=3-16.htm;2.创建载入创建载入js文件的文

33、件的HTML文档文档 3.显示欢迎的显示欢迎的HTML文件文件例例 3.16 显示欢迎文字的静态页面文档（3-15.htm）。欢迎你进入我的网站！4.显示再见的显示再见的HTML文件文件例例 3.17 显示再见文字的静态页面文档（3-16.htm）。再见！效果图在页面上滚动显示的菜单 1创建创建js文件文件例例 3.20 创建在页面上具有滚动菜单功能的js文件（3-19.js）。var index=7link=new Array(6);text=new Array(6);link0=3-1.htm;link1=3-2.htm;link2=3-3.htm;link3=3-4.htm;link4=

34、3-5.htm;link5=3-6.htm;link6=3-7.htm;text0=新闻1;text1=新闻2;text2=菜单一;text3=菜单二;text4=菜单三;text5=菜单四;text6=菜单五;document.write();for(i=0;iindex;i+)document.write( );document.write(texti+);document.write()2创建包含创建包含js文件的文件的HTML文件文件例例 3.21 创建包含3-19.js文件的htm文件（3-20.htm）。注意！一会儿，在页面上能看到滚动的菜单。在浏览器打开3-20.htm

35、网页，可以看到如图所示页面。浏览器对象模型(BOM)浏览器对象模型(BOM)BOM是browser object model的缩写，简称浏览器对象模型.BOM提供了独立于内容而与浏览器窗口进行交互的对象.由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window,其它对象都是通过它延伸出来的，也可以称为window的子对象.BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性.浏览器对象模型(BOM)由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的：document.write(test);window.doc

36、ument.write(test);另外W3school有关于window对象的详细介绍：http:/ 思考 JavaScript有什么特点？如何将JavaScript脚本代码嵌入到HTML文档？JavaScript有哪些常见对象？如何定义JavaScript变量？变量与常量有什么区别？如何创建JavaScript自定义函数？JavaScript有哪些类型的表达式？JavaScript有哪些类型的事件？如何触发事件过程？上机练习编写一个可以随意确定N的数值并显示出12。N的和的页面。编写一个可以根据输入不同购物款数额，如500元以下、500到1000元、1000到2000元，分别显示给不同优惠券的页面。编写一个包含计算圆面积函数Y1，并可随意输入半径并显示圆面积值的页面文件。编写一个包含计算立方函数Y2，使用文本框输入数值，通过单击“确定”按钮调用Y1并显示该数值立方值的页面文件。编写一个动态网页，实现在不同时间显示不同的问候、不同图片的功能。编写一个页面文件：包含名称为“计算”命令按钮，当鼠标移到“计算”命令按钮上在状态栏显示“计算”功能的说明文字，鼠标离开“计算”命令按钮清除状态栏文字的功能。编写一个带有滚动菜单的动态网页。