《Web技术应用基础_d06》由会员分享，可在线阅读，更多相关《Web技术应用基础_d06（103页珍藏版）》请在金锄头文库上搜索。
1、第6章JavaScript1第6章JavaScript学习要点： 理解脚本的基本概念，JavaScript运行机制 熟练掌握将JavaScript语句嵌入HTML文档，和调入外部JS文件方法 应用JavaScript基本语法、控制语句和函数完成JavaScript程序设计 掌握window对象、document对象和JavaScript内置对象的属性和方法的应用 熟练应用JavaScript编制事件处理程序26.1 JavaScript6.1 JavaScript概述概述6.1.1JavaScript运行机制运行机制脚本脚本:完成某种功能的小程序段.接近高级语言，不具有高级语言复杂、严谨的语法
2、规则。脚本语言功能脚本语言功能:能够对页面功能进行管理与控制，具有动态效果，完成计算、表单客户端验证、游戏编写和页面特效制作等工作。客户端脚本客户端脚本:在客户机上运行的脚本程序，客户端产生动态效果。服务器端脚本服务器端脚本:在服务器上运行的脚本程序，支持数据库通信，与客户交互，产生动态效果。脚本语言主要有:VBScript和和JavaScript第6章JavaScript3JavaScript运行过程:(1)浏览器地址栏目输入请求页面的URL(页面嵌入了JavaScript程序段)。(2)浏览器将请求发送到服务器。(3)服务器响应请求，将嵌入JavaScript的HTML文档发送到客户端。(
3、4)客户端浏览器从上到下逐行解释执行HTML标记和JavaScript脚本，并把JavaScript脚本交脚本引擎执行，把执行结果向客户展示。第6章JavaScript46.1.2JavaScript特点特点1.JavaScript是一种脚本语言是一种脚本语言2.基于对象基于对象3.事件驱动事件驱动4.动态动态5.安全安全6.与平台无关与平台无关第6章JavaScript56.1.3 6.1.3 JavaScriptJavaScript应用示例应用示例 图像互换位置图像互换位置 第6章JavaScript1.任务要求要求页面上有两幅图像及有关图像的说明的文字，当用户用鼠标左键单击页面时，图像交
4、换位置。 例例6.16ex6-01.html代码代码清单清单JavaScript应用案例应用案例functionChangeImage()vardog_top=dog.style.topvardog_left=dog.style.leftdog.style.top=cat.style.topdog.style.left=cat.style.leftcat.style.top=dog_topcat.style.left=dog_left第6章JavaScript事件响应函数，图像互换位置定义脚本嵌入HTML脚本段7请单击页请单击页面面catdog第6章JavaScriptdiv块 的 id为do
5、g鼠标单击事件，调用ChangeImage()函数div块的id为cat8 标记位于标记位于和和标记之间，在标记之间，在标记中的脚本段将在页面主体标记中的脚本段将在页面主体(即在即在标记中的内容标记中的内容)被浏览器载入之前解释执行。被浏览器载入之前解释执行。 标记位于标记位于和和标记之间时标记之间时,这这一段脚本程序将在一段脚本程序将在HTML文档被浏览器载入过程中文档被浏览器载入过程中被解释执行被解释执行 属性属性language是是script标记的必须指定的基本属性。标记的必须指定的基本属性。一般被指定为一般被指定为JavaScript或或VBScript。 runat=Server表
6、示该段脚本在服务器端执行，如果表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。省略，则表示该段脚本将发送到客户端运行。 脚本代码放在脚本代码放在HTML的注释标记的注释标记之间，这之间，这样做既不影响支持脚本的浏览器正确解释执行脚本样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。作注释而旁路掉。第6章JavaScript96.2JavaScript基本语法基本语法JavaScript由由JavaScript核心语言、核心语言、JavaScript客户端扩展和客户端扩展和J
7、avaScript服务器端扩服务器端扩展三部分组成。核心语言部分包括展三部分组成。核心语言部分包括JavaScript的基本语法和的基本语法和JavaScript的内置对象，在客户的内置对象，在客户端和服务器端均可运行。端和服务器端均可运行。作用：作用：与HTML超文本标记语言、Java小程序一起在一个Web页面中链接多个对象，与Web客户交互。第6章JavaScript106.2.1在在HTML文档中调入或嵌入文档中调入或嵌入JavaScript1.嵌入嵌入JavaScript使用标记把JavaScript语句嵌入HTML文档语法规则：语法规则：language默认值：默认值：JavaScr
8、ipt例例6.2第6章JavaScript11例6.2JavaScript嵌入嵌入HTMLdocument.write(HelloWorld!)第6章JavaScript122.链接外部链接外部JavaScript将将JavaScript代码以扩展名代码以扩展名“.js”单独存放单独存放语法语法:第6章JavaScript13ex6-03.js清单如下：document.write(HelloWorld!)ex6-03.html清单如下:链接JS外部文件链接JS外部文件第6章JavaScript146.2.2JavaScript书写格式书写格式 区分大小写区分大小写 可以可以没有可见行结束标志
9、，没有可见行结束标志，换行符换行符作为行终止符。作为行终止符。也可以用也可以用(;)作为一行终止符。作为一行终止符。C语言、语言、C和和Java语言中，使用分号语言中，使用分号(;)作一行的结束标志作一行的结束标志 如果需要把几行代码写在一行，使用分号如果需要把几行代码写在一行，使用分号(;)分开。分开。vara=3varb=6varc=0vara=3;b=6;c=0第6章JavaScript15 为了使程序清晰易读，采用缩进格式来书写。为了使程序清晰易读，采用缩进格式来书写。 可以用两种方法进行注释。注释方法与可以用两种方法进行注释。注释方法与C相同。相同。/：从注释标记：从注释标记“/”起
10、直到行尾的字符都被起直到行尾的字符都被忽略。忽略。/*/：在：在“/*”与与“*/”之间的字符都被忽之间的字符都被忽略。略。第6章JavaScript166.2.3基本数据类型基本数据类型1.数据类型数据类型 数值型数值型(整数和浮点数整数和浮点数) 字符型字符型 布尔型布尔型(取值为取值为true或或false) 空值空值2.常量常量值保持不变的量值保持不变的量第6章JavaScript173.变量变量关键字关键字“var”声明变量并分配存储空间，声明变量并分配存储空间，var为为可选项可选项 vara=3/声明变量，并赋初值声明变量，并赋初值 a=3/省略关键字省略关键字var vara/
11、声明变量后声明变量后,赋值赋值a=6三种方法等效，但不能既不用关键字三种方法等效，但不能既不用关键字“var”也不赋初置。也不赋初置。变量名必须以变量名必须以字母字母或下划线或下划线“_”开始，后面的字符可以开始，后面的字符可以是字母、数字或下划线例：是字母、数字或下划线例：abc、a_12、myvar、MyVar第6章JavaScript18JavaScript内部定义的保留字不能用作变量名。内部定义的保留字不能用作变量名。JavaScript区分区分大大小小写的，变量写的，变量Num与变量与变量num是两是两个不同的变量。个不同的变量。JavaScript的变量采用了的变量采用了弱类型弱类
12、型(Looselytyped)表达表达方式方式,变量在声明时不必显式说明它的类型，而是在变量在声明时不必显式说明它的类型，而是在使用时使用时根据数据的类型来确定变量的类型。根据数据的类型来确定变量的类型。在函数体外声明为全局变量在函数体外声明为全局变量JavaScript提供四种类型变量：提供四种类型变量：数值型：数值型：36，3.1415926，-3.1E12等等字符串型：字符串型：“Hello!”逻辑型：逻辑型：true，false空值型：空值型：null第6章JavaScript194.表达式表达式表达式是由变量、常量和运算符按一定规则组成的表达式是由变量、常量和运算符按一定规则组成的集
13、合，表达式的值可以是数字、字符串或布尔量。集合，表达式的值可以是数字、字符串或布尔量。JavaScriptJavaScript有三种表达式有三种表达式: :算术表达式、串表达式算术表达式、串表达式和逻辑表达式。和逻辑表达式。第6章JavaScript205.运算符运算符.对象访问、数组下标、()括号；+增、-减、-取负、位逻辑非、！逻辑非；delete、new、Typeof、this；*乘、/除、%取模、+加、-减；移位、小于、大于、=大于等于、=等于、!=不等于；&位或、位异或、|位与、&与、|逻辑或；=赋值；(Jscript是弱变量型的，可以重复赋值)?:条件运算。优先次序从前到后！第6章
14、JavaScript216.3JavaScript控制结构和函数控制结构和函数6.3.1JavaScript控制结构控制结构1.ifelseif(条件条件)/如果条件为如果条件为true，进行处理。进行处理。else/如果条件为如果条件为false，进行处理。进行处理。如果不需要处理如果不需要处理false情况，可不写情况，可不写else语句段，例如：语句段，例如：if(条件条件)/如果条件为如果条件为true，进行处理。进行处理。第6章JavaScript222.switch语句语句switch(表达式表达式)case值值1：语句集语句集1breakcase值值2：语句集语句集2breakd
15、efault:语句集语句集break第6章JavaScript如果表达式值等于值1，执行语句集1如果表达式值与常量都不匹配，执行default语句集233.forfor循环语句设置了一个计数器计算循环次数，达到循循环语句设置了一个计数器计算循环次数，达到循环次数后结束循环。环次数后结束循环。for(初始化表达式；初始化表达式；条件；条件；增量表达式增量表达式)语句集语句集第6章JavaScript244.循环语句循环语句whilewhile循环语句不直接指明循环次数，具体循环次数由循环语句不直接指明循环次数，具体循环次数由运行时情况决定，满足循环条件执行循环体语句，不运行时情况决定，满足循环条
16、件执行循环体语句，不满足循环条件退出循环体。满足循环条件退出循环体。语法规则语法规则：while(条件条件)语句段语句段break语句：根据条件终止循环。语句：根据条件终止循环。continue语句：根据条件，跳过循环体内剩余语句，语句：根据条件，跳过循环体内剩余语句，进入下一次循环。进入下一次循环。第6章JavaScript256.3.2函数函数函数必须先定义，后使用。函数必须先定义，后使用。浏览器先执行浏览器先执行HTML文文档中的档中的模块，模块，JavaScript中常把自定义函数放中常把自定义函数放在在模块中，在模块中，在HTML文档主体文档主体中调用中调用函数。函数。函数定义的规则
17、如下：函数定义的规则如下：function函数名函数名(参数列表参数列表)函数体函数体function：关键字，使解释程序知道后面定义函数关键字，使解释程序知道后面定义函数函数名函数名：可以是任何合法的标识符：可以是任何合法的标识符参数列表参数列表：函数的参数列表，多个参数用逗号分开：函数的参数列表，多个参数用逗号分开函数体函数体：函数执行的运算函数执行的运算第6章JavaScript266.3.3JavaScript基本语法的应用案例基本语法的应用案例例例6.4例例6.46.4第6章JavaScript27例例6.4JavaScript基本语法应用案例基本语法应用案例/脚本语言是脚本语言是J
18、avaScriptfunctionMyArray(n)/定义函数定义函数MyArraythis.length=nfor(iin4)thisi=0第6章JavaScript28MyArray=newArray(4)MyArray1=WebMyArray2=技术技术MyArray3=应用应用MyArray4=基础！基础！document.open()for(varn=1;nMyArray.length;n+)document.write(MyArrayn);document.close()第6章JavaScript296.4JavaScript对象对象6.4.1JavaScript对象概述对象概述
19、对象具有: 属性(properties) 方法(methods)3种对象: JavaScript内建对象 浏览器环境提供的对象 自定义对象第6章JavaScript306.4.2自定义对象自定义对象语法：语法：function对象名称对象名称(属性列表属性列表)this.属性属性1=参数参数1this.属性属性2=参数参数2this.方法方法1=函数名函数名1this.方法方法2=函数名函数名2第6章JavaScript31创建对象实例语法：对象实例名=new对象名称(属性值列表)第6章JavaScript32functionstudent(id,name,url)this.id=idthis
20、.name=namethis.url=urlthis.display=student_displayMyStudent=newstudent(000001,林琳林琳,http:/)定义学生对象定义学生对象学生对象学生对象实例实例第6章JavaScript对象实例名对象实例名=new对象名称(属性值列表)33student(id,name,url)MyStudentid:000001name:林琳url:http:/YourStudentid:000002name:李四url:http:/定义学生对象对象实例，具体学生第6章JavaScript346.4.3对象属性和方法的引用对象属性和方法的引
21、用1.对象属性的引用对象属性的引用语法：语法：对象实例名对象实例名.属性成员名属性成员名例例,MyStudent.name=“林琳林琳”第6章JavaScript35语法：语法：对象实例名对象实例名n例例,MyStudent0=000001MyStudent1=林琳林琳MyStudent2=http:/或：或：MyStudentid=000001MyStudentname=林琳林琳MyStudenturl=http:/第6章JavaScript362.对象方法的引用对象方法的引用语法：语法：对象实例名对象实例名.方法名称方法名称()例如：例如：MyStudent.display()第6章Jav
22、aScript376.4.4对象的操作对象的操作1.forin语句语句forin是操作对象的语句，也称是操作对象的语句，也称遍历遍历。遍历是指逐遍历是指逐一通过一个对象的所有属性，它的计数值是对象中一通过一个对象的所有属性，它的计数值是对象中的的属性个数属性个数。语法：。语法：for(变量变量in对象对象)语句段语句段第6章JavaScript382.with语句语句语法语法：with(对象实例名对象实例名)语句段语句段例：例：with(MyStudent)id=000001name=林琳林琳url=http:/第6章JavaScript396.this关键词关键词用户引用当前所指的对象，格式
23、:this属性名属性名第6章JavaScript406.4.5事件驱动与事件处理事件驱动与事件处理第6章JavaScript发生火灾事件调用消防车处理火灾事件日常生活中的事件事件处理程序客户触发键盘事件调用事件处理程序响应键盘事件JavaScript中的事件客户触发键盘事件41事件名称说明onClick鼠标左键单击页面对象时发生。如，鼠标左键单击按钮等onChange对象内容发生改变时发生。如文本框内容改变时onFocus对象获得焦点（鼠标）时发生onBlur对象失去焦点（鼠标）时发生onload网页载入浏览器时发生，发生对象为HTML的标记onUnload用户离开当前页面时发生，发生对象为H
24、TML的标记onMouseOver鼠标移到对象上时发生onMouseOut鼠标离开对象上时发生onMouseMove鼠标在对象上移动时发生onMouseDown 鼠标在对象上按下时发生onMouseUp鼠标在对象上释放时发生onSubmit表单提交时发生。如单击“提交”按钮，产生onSubmit事件onResize窗口大小改变时发生第6章JavaScript426.4.61.对象的定义与创建对象的定义与创建例例6.5例例6.5第6章JavaScript43例例6.5JavaScrip对象应用对象应用functionstudent(id,name,url)this.id=idthis.name=
25、namethis.url=urlthis.display=student_display第6章JavaScript44functionstudent_display()document.writeln(id=+thisid+)document.writeln(name=+thisname+)document.writeln(url=+thisurl+)MyStudent=newstudent(000001,林琳林琳,“http:/)MyStudent.display()第6章JavaScript45第6章JavaScript2.用户输入信息验证用户输入信息验证例例6.6界面上有一个输入卡号文本
26、框和一个密码框输入卡号后，验证用户输入卡号的格式是否正确（要求输入以10起头的6位数）如果输入不正确，提示客户重新输入，卡号输入正确后才能输入密码。46第6章JavaScriptex6-06.html代码清单如下：验证信用卡号functioninput()/获得鼠标焦点事件，清空输入卡号文本框，输入卡号if(document.myForm.card.value=请输入10开始的6位数字10xxxx)document.myForm.card.value=47第6章JavaScriptfunctionverify()/响应失去鼠标焦点事件，验证卡号输入格式是否正确varcardNumber=doc
27、ument.myForm.card.valueif(cardNumber.substr(0,2)!=10|isNaN(cardNumber)alert(输入格式错误,请重新输入!)document.myForm.card.focus()48获得鼠标焦点，调用input()函数失去鼠标焦点，调用verify()函数请输入卡号：请输入密码：第6章JavaScript496.5window对象在对象在JavaScript中的应用中的应用6.5.1window对象构成对象构成对象有用户建立的对象，也有系统提供的对象有用户建立的对象，也有系统提供的内建对象内建对象。Window对象是内建对象中的对象是内
28、建对象中的最顶层对象。最顶层对象。Window对象指的是浏览器对象指的是浏览器窗口对象窗口对象。第6章JavaScript50第6章JavaScriptwindowlocationdocumenthistorylinkbodyanchorformimageselectionappletseventnavigatorbuttoncheckboxtextoptionpasswordselectsubmitradioreset51(1)浏览器窗口，顶层Window对象(2)页面文档内容，document对象(3)文档内的表单，名为myForm(4)表单文本框，名为card(4)表单密码框，名为pas
29、s顶层window对象第2层document对象第3层form对象第4层text对象第6章JavaScript526.5.3window对象的属性对象的属性1.window对象主要属性对象主要属性属性名称属性名称说明说明范例范例name当前窗口名字当前窗口名字window.nameparent当前窗口父窗口当前窗口父窗口parent.nameparent.nameself当前打开窗口当前打开窗口self.status=“self.status=“你你好好”top窗口集合中最顶层窗口窗口集合中最顶层窗口top.nametop.namestatus设置当前打开窗口状态设置当前打开窗口状态栏的显示数
30、据栏的显示数据self.status=“self.status=“欢欢迎迎”defaultStatus当前窗口状态栏的显示当前窗口状态栏的显示数据数据self.defaultStatself.defaultStatusus=“=“欢迎欢迎”第6章JavaScript536.5.4window对象的方法对象的方法1.window对象的主要方法对象的主要方法第6章JavaScript方法名称说明使用范例alert()创建一个带提示信息和“确定”按钮的对话框window.alert(请输入姓名！)confirm()创建带提示信息、“确定”和“取消”按钮对话框window.confirm(链接到goo
31、gle?)close()关闭当前打开的浏览器窗口window.close()open()打开一个新的浏览器窗口window.open(URL,新窗口名,新窗口设置)prompt()创建一个带提示信息、“确定”、“取消”按钮及输入字符串字段的对话框window.prompt(请输入姓名!)setTimeout()设置一个时间控制器window.setTimeout(clearTimeOut(),3000)clearTimeout() 清除原来时间控制器内的设置window.clearTimeout()542.JavaScript的接口元素的接口元素 alert(提示提示)：显示显示警告框警告框，
32、“提示提示”是可选项，是可选项，警警告框中输出的内容。告框中输出的内容。例：例：alert(alert(对不起，用户名错误。对不起，用户名错误。)第6章JavaScript55 prompt(提示提示,缺省值缺省值)：显示显示提示框提示框，等待用户输，等待用户输入文本，用户选择入文本，用户选择“确认确认”按钮，返回文本框中内容，按钮，返回文本框中内容，选择选择“取消取消”按钮，返回一个空字符串。按钮，返回一个空字符串。“提示提示”和和“缺省值缺省值”都是可选项，都是可选项，“缺省值缺省值”是文本框默认值是文本框默认值例：例：prompt(prompt(请输入姓名：请输入姓名：)第6章JavaS
33、cript56comfirm(提示提示)：显示显示确认框确认框，等待用户选择按钮。，等待用户选择按钮。“提示提示”可选的，是在提示框中显示的内容，用户可可选的，是在提示框中显示的内容，用户可以根据提示选择以根据提示选择“确定确定”或或“取消取消”按钮按钮例：例：confirm(MyString+“你好！你好！链接到链接到ex07-002.html页面？页面？)第6章JavaScript576.5.5window对象的事件对象的事件onLoad：网页载入浏览器时发生：网页载入浏览器时发生onUnLoad：网页从浏览器窗口中删除时发生：网页从浏览器窗口中删除时发生onBeforeUnLoad：网页
34、被关闭前发生：网页被关闭前发生OnResize：用户调整窗口大小时发生：用户调整窗口大小时发生OnScroll：用户滚动窗口时发生：用户滚动窗口时发生OnError：载入的网页产生错误时发生：载入的网页产生错误时发生第6章JavaScript586.5.6window对象应用案例对象应用案例1.状态栏内容更新状态栏内容更新例例6.7第6章JavaScript59window对象属性的应用对象属性的应用第6章JavaScript60第6章JavaScript612.打开一个新窗口打开一个新窗口例例6.8第6章JavaScript62例6.8window对象的对象的open()方法方法window
35、对象的对象的open()方法方法第6章JavaScript633.客户端输入信息验证客户端输入信息验证例例6.9：在客户端验证用户输入数据。页面上有一个超在客户端验证用户输入数据。页面上有一个超级链接，当用户点击链接时，由级链接，当用户点击链接时，由prompt提示框提示用提示框提示用户输入姓名，然后户输入姓名，然后JavaScript程序验证用户输入，如程序验证用户输入，如果输入正确弹出确认框果输入正确弹出确认框confirm，若用户在确认框选择若用户在确认框选择“确认确认”按钮，则链接到网站；如果输入错误，出现按钮，则链接到网站；如果输入错误，出现警告框警告框alert，输出输出对不起，输
36、入错误。对不起，输入错误。，程序终止，程序终止例例6.9第6章JavaScript64JavaScript接口元素应用接口元素应用第6章JavaScript65你好！欢迎光临你好！欢迎光临tomcat！第6章JavaScript666.6document对象在对象在JavaSCript中应用中应用 6.6.1 document6.6.1 document对象对象的属性的属性第6章JavaScript属性名称说明范例alinkColor活动超级链接色document.alinkColor=redbgColor背景色document.bgColor=ff0000fgColor前景色document
37、.fgColor=ff000flinkColor未曾访问过的超级链接的颜色document.linkColor=bluevlinkColor访问过的超级链接的颜色document.vlinkColor=greenlastModified 最后一次修改页面时间date=lastModifiedlocation页面的URL地址url_info=document.locationtitle页面的标题tit_info=document.title676.6.2document对象的方法第6章JavaScript方法名称说明范例clear()清除文件窗口内数据document.clear()close(
38、)关闭文档document.close()open()打开文档document.open()write()向当前文档写入数据document.write(你好)writeln()向当前文档写入数据，并换行document.write(你好)getElementById(对象id)获得指定id对象的元素document.getElementById(advImage).style.pixelTopgetElementByName(对象名对象名)获得指定对象名的一组同名对象元素document.getElementByName(MyCheckbox)68第6章JavaScript6.6.3docu
39、ment对象的事件表6-13document对象鼠标事件及其使用鼠标事件使用说明鼠标事件使用说明onClick单击鼠标左键时发生onMouseOver鼠标移到对象上时发生ondblClick双击鼠标左键时发生onMouseUp释放鼠标左键时发生onMouseDown 按下鼠标左键时发生onSelectStart开始选取对象内容时发生onMouseMove 在对象上移动鼠标时发生onDragStart以拖曳方式选取对象时发生onMouseOut鼠标离开对象时发生69表6-14document对象按键事件及其使用第6章JavaScript按键事件使用说明onKeyDown 用户按下按键时发生onK
40、eyPress用户按下按键时发生onKeyDown事件，然后产生onKeyPress事件，如果用户按住按键不放，则产生一系列onKeyPress事件onKeyUp用户释放按键时发生onHelp用户按下系统定义的帮助键时发生706.6.4document对象应用案例对象应用案例例例6.8文本框内容互换文本框内容互换任务要求：页面上有任务要求：页面上有2个文本框，用户在第个文本框，用户在第1个文本框个文本框输入内容后，点击第输入内容后，点击第2个文本框，将在第个文本框，将在第2个文本框内个文本框内显示第显示第1个文本框的内容。个文本框的内容。例例6.10第6章JavaScript71documen
41、t对象应用将文字输入文本框1单击文本框2显示文本框1内容第6章JavaScript例例6.10726.7JavaScript内置对象内置对象6.7.1String对象对象1.创建String对象使用格式：var字符串变量名=字符串例如：varstr1=“HelloWorld!”var字符串变量名=newString（字符串）例如：varstr1=newString（“HelloWorld!”）2.字符串对象属性length:返回字符串的长度。第6章JavaScript73方法名称说明范例big()增加字符串显示字体的大小str1.big()small()减小字符串文本的大小str1.small
42、()italics()以斜体字显示字符串str1.italics()bold()以粗体字显示字符串str1.bold()blink()字符串闪烁显示str1.blink()fixed()以固定字高显示字符串str1.fixed()fontcolor()设置字体显示颜色str1.fontcolor(red)fontsize(size)设置字体大小str1.fontsize(5)strike()显示带删除划线的字符串str1.strike()sub()把文本显示成下标str1.sub()sup()把文本显示成上标str1.sup()第6章JavaScript74方法名称说明范例toLowerCas
43、e()将字符转换为小写str1.toLowerCase()toUpperCase()将字符转换为大写str1.toUpperCase()indexOf(str,start-position)从start-position位置开始，从左到右查找并返回str子字符串位置，如果找不到返回-1str1.indexOf(he,3)charAt(index)返回指定位置处的字符，第一个位置为0str1.charAt(3)substring(start,end)返回start与end位置之间的子串str1.substring(4,8)第6章JavaScript756.7.2Math对象对象第6章JavaSc
44、ript属性名称说明范例E常数eMath.E=2.718281LN1010的自然对数Math.LN10=2.302585LN22的自然对数Math.LN2=0.693147LOG2E以2为底E的对数Math.LOG2E=1.442695LOG10E以10为底E的对数Math.LOG10E=0.434294PI圆周率Math.PI=3.141592SQRT1_20.5的平方根Math.SQRT1_2=0.707106SQRT22的平方根Math.SQRT2=1.41421376方法名称方法名称说明明范例范例sin(x),cos(x)返回x正、余弦值，单位弧度Math.sin(1)=0.84147
45、0asin(x),acos(x)返回x反正、余弦值Math.asin(1)=1.570796tan(x),atan(x)返回x正切、反正切值，单位弧度Math.tan(1)=1.557407sqrt(x)返回x平方根Math.sqrt(9)=3pow(bv,ev)以bv为底的ev次方Math.pow(2,3)=8abs(x)返回x绝对值Math.abs(-6)=6random()返回01的随机数Math.random()min(x,y)返回x和y中较小的数Math.min(6,8)=6max(x,y)返回x和y中较大的数Math.max(6,8)=8round(x)把x参数舍入到最接近的整数M
46、ath.round(2.667)=3ceil(x)返回大于或等于x的最接近整数Math.ceil(3.889)=4floor(x)返回小于或等于x的最接近整数Math.floor(3.889)=3第6章JavaScript776.7.3Array对象语法：语法：数组对象实例名数组对象实例名=newArray()例如：例如：vararr1=newArray()vararr2=newArray(8)第6章JavaScript78第6章JavaScript79第6章JavaScript804.7.4.Date对象对象Date对象主要用于对系统日期和时间对象主要用于对系统日期和时间的操作。的操作。没有
47、属性，有多种方法。语法没有属性，有多种方法。语法形式：形式：var日期对象实例名日期对象实例名=newDate()例如，例如，MyDate=newDate()建立了一个日期变量建立了一个日期变量MyDate，如果没有特别指定时如果没有特别指定时间，将把系统的机内时间放入间，将把系统的机内时间放入MyDate变量。变量。第6章JavaScript81方法名称说明范例getYear()返回对象实例年份，MyDate.getYear()getMonth()返回对象实例月份，值011，0是1月MyDate.getMonth()getDate()返回对象实例日期,值为131MyDate.getDate(
48、)getDay()返回对象实例星期，值06，0星期日 MyDate.getDay()getHours()返回小时，其值为023MyDate.getHours()getMinutes()返回分钟，其值为059MyDate.getMinutes()getSeconds()返回秒数，其值为059MyDate.getSeconds()getTime()返回表示时间的整数，从1970年1月1日00：00：00开始，以毫秒为单位MyDate.getTime()setYear(timevalue)设置年份,timevalue为大于1900的整数MyDate.setYear(2008)setMonth(tim
49、evalue)设置月份数,值为011，0代表1月MyDate.setMonth(7)setDate(timevalue)设置日期,值为131MyDate.setDate(20)setDay()设置星期，其值为06，0表示星期日 MyDate.setDay(5)第6章JavaScript82方法名称说明范例setHours(timevalue)设置小时数,timevalue的值为023 MyDate.setHours(12)setMinutes(timevalue) 设置分钟数,timevalue的值为059 MyDate.setMinutes(30)setSeconds(timevalue)
50、设置秒数,timevalue的值为059MyDate.setSeconds(30)setTime()设置用长整数表示的时间，从1970年1月1日00：00：00开始，以毫秒为单位进行计算MyDate.setTime(2000)第6章JavaScript836.7.5JavaScript内置对象应用案例例6.11例例6.11第6章JavaScript84JavaScript内置对象应用案例内置对象应用案例第6章JavaScript85varBooks=newArray()Books0=newBook(算法与数据结构算法与数据结构,严蔚敏严蔚敏陈文博陈文博,清华大学出版社清华大学出版社)Books
51、1=newBook(XML/JSP网页编程教材网页编程教材,吴艾吴艾,北京希望电子出版社北京希望电子出版社)Books2=newBook(英华大字典英华大字典,郑易里郑易里,商务印书馆商务印书馆)点击按钮查阅详细信息点击按钮查阅详细信息书书名名:作作者者:出版社出版社:第6章JavaScript866.8JavaScripy应用案例应用案例6.8.1数字钟数字钟例例6.12： 制作一个页面，页面上显示制作一个页面，页面上显示“单击此处启动单击此处启动数字钟并统计页面持续时间数字钟并统计页面持续时间”。当用户单击文字时，。当用户单击文字时，启动数字钟，用以显示当前时刻和网页的持续时间启动数字钟，
52、用以显示当前时刻和网页的持续时间例例6.12第6章JavaScript87例例6.12启动数字钟统计页面持续时间启动数字钟统计页面持续时间!-functionEclock()varMyDate2=newDate()varMyTime2=MyDate2.getTime()varTimeString2=现在的时间是现在的时间是:+MyDate2.getHours()+时时+MyDate2.getMinutes()+分分+MyDate2.getSeconds()+秒秒varMyHours3=0;MyMinutes3=0varMySeconds4=Math.round(MyTime2-MyTime1)
53、/1000)MyHours3=Math.round(MySeconds4-1800)/3600)MyMinutes3=Math.round(MySeconds4-30)%3600)/60)第6章JavaScript88if(MyMinutes3=60)MyMinutes3=0MySeconds4=Math.round(MySeconds4%3600)MySeconds3=Math.round(MySeconds4%60)varTimeString3=持续时间是持续时间是:+MyHours3+时时+MyMinutes3+分分+MySeconds3+秒秒Clock.innerHTML=TimeSt
54、ring2+TimeString3setTimeout(Eclock(),1000)-第6章JavaScript89第6章JavaScript90单击此处启动数字钟并统计网页持续时间单击此处启动数字钟并统计网页持续时间第6章JavaScript916.8.2状态栏文字滚动显示状态栏文字滚动显示例例6.13 例例6.136.13第6章JavaScript92 例例6.13状态栏文字滚动显示状态栏文字滚动显示!-varScrText=欢迎学习欢迎学习“Web技术应用基础技术应用基础”!varLenText=ScrText.lengthvarWidth=80varPos=1-Widthfunctio
55、nScroll()Pos+varScroller=if(Pos=LenText)Pos=1-Width第6章JavaScript93if(Pos0)for(vari=1;i单击页面注意状态栏的变化单击页面注意状态栏的变化第6章JavaScript946.8.2随机改变页面背景色例6.14例例6.14第6章JavaScript95例6.14背景色随机改变背景色随机改变varmybool=falsecolor_bar=newArray(3)for(vari=0;i255)mybool=falsecontinuecolor_bari=start_nummybool=truemybool=false第
56、6章JavaScript96vara=color_bar0.toString(16)if(a.length2)a=(0+a)varb=color_bar1.toString(16)if(b.length2)b=(0+b)varc=color_bar2.toString(16)if(c.length2)c=(0+c)varmkcolor=(+#+a+b+c+)document.bgColor=mkcolordocument.write(背景背景色是：色是：+mkcolor+)第6章JavaScript976.8.4鼠标跟随例6.15例例6.15第6章JavaScript98例6.15鼠标跟随鼠标
57、跟随第6章JavaScript100鼠标移鼠标移动图像跟随效果动图像跟随效果第6章JavaScript101小结JavaScript易学好用，对学过一门高级语言的读者，只要注意它们的不同处就可以了。JavaScript是嵌入或链接到HTML文档中的。JavaScript是基于对象的，对象有属性和方法。熟练掌握window对象、document对象和JavaScript内置对象的属性和方法的使用。window对象是打开网页时的浏览器窗口，document对象是浏览器显示的HTML文档，其下层常用对象之一是表单form，其结构windowdocumentform。第6章JavaScript102完完第6章JavaScript103
