Web技术应用基础_d06.ppt

1、1,第6章 JavaScript,JavaScript,2,JavaScript,了解JavaScript作用、工作机制和特点； 了解Window对象构成、属性和方法 掌握Window对象基本使用方法 学会JavaScript的基本语法规则 熟练掌握JavaScript编程技巧,脚本（Script)应用知识点与技术要求：,Script是一种介于HTML与高级编程语言(如：Java、VB和C+等)之间的特殊语言，是由一组可以在Web服务器或客户端浏览器运行的命令的组合。脚本把网页对象和浏览器对象集成并组装起来，使网页具有动态效果和交互功能 。,3,6.1 JavaScript概述,6.1.1 J

2、JavaScript运行机制 脚本是一种能够完成某些功能的小程序段。这些程序段在程序运行过程中被逐行解释执行，脚本语言可嵌入HTML页面，并被浏览器解释执行。 服务器端脚本： 在服务器上运行的脚本程序 客户端脚本：在客户机上运行的脚本程序,JavaScript,4,JavaScript是一种嵌入HTML文档中的、跨平台、基于对象和事件驱动的脚本语言，它即可以在客户端运行也可以运行在服务器上。,JavaScript,5,6.1.2 JavaScript特点 1. JavaScript是一种脚本语言 2.基于对象 3.事件驱动 4.动态 5. 安全 6.与平台无关,JavaScript,6,6.1

3、.3 JavaScript应用示例,图像互换位置,JavaScript,7,1.任务要求 要求页面上有两幅图像及有关图像的说明的文字，当用户用鼠标左键单击页面时，图像交换位置。,例6.1,JavaScript,8,ex6-01.html代码清单 JavaScript应用案例 function ChangeImage() var dog_top=dog.style.top var dog_left=dog.style.left dog.style.top=cat.style.top dog.style.left=cat.style.left cat.style.top=dog_top cat.s

4、tyle.left=dog_left ,JavaScript,9, 请单击页面 cat dog ,JavaScript,10,代码说明 (1) 第16至19行： 和是块容器标记，之间可以容纳多个不同的HTML标记和语言元素。 id=cat，指定该块容器的id值是cat。 (2) 第3至12行：当用户单击页面时，由使用JavaScript脚本语言编写的ChangeImage()函数完成事件的处理，即图像交换位置的动作。,JavaScript,11,标记位于和标记之间，在标记中的脚本段将在页面主体(即在标记中的内容)被浏览器载入之前解释执行。 标记位于和标记之间时,这一段脚本程序将在HTML文档被

5、浏览器载入过程中被解释执行 属性language是script标记的必须指定的基本属性。一般被指定为JavaScript或VBScript。 runat=Server表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。 脚本代码放在HTML的注释标记之间，这样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。,JavaScript,12,6.2 JavaScript基本语法 JavaScript是一种跨平台、基于对象(Object) 、事件驱动(Event Driven) 脚本语言，可以在于浏览器上运行,也可以运行在服务器

6、上。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言部分包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。,作用：与HTML超文本标记语言、 Java小程序 一起在一个Web页面中链接多个对象，与Web客户交互 。,JavaScript,13,6.2.1 在HTML文档中调入或嵌入JavaScript 1.JavaScript嵌入HTML文件 语法规则： language 默认值：JavaScript,JavaScript,例6.2,14,例6.2 JavaSc

7、ript嵌入HTML document.write(Hello World!) ,JavaScript,15,2.将JavaScript调入HTML文件 将JavaScript代码以扩展名“.js”单独存放 语法: ,JavaScript,16,6.2.2 JavaScript书写格式 区分大小写 可以没有可见行结束标志，换行符作为行终止符。 也可以用(;)作为一行终止符。 C语言、C和Java语言中，使用分号(;)作一行的结束标志 如果需要把几行代码写在一行，使用分号(;) 分开。 var a=3 var b=6 var c=0 var a=3; b=6; c=0,JavaScript,17

8、,为了使程序清晰易读，采用缩进格式来书写。 可以用两种方法进行注释。注释方法与C相同。 /：从注释标记“/”起直到行尾的字符都被忽略。 /* */：在“/*”与“*/”之间的字符都被忽略。,JavaScript,18,6.2.3 基本数据类型 1. 数据类型 数值型(整数和浮点数) 字符型 布尔型(取值为true 或false ) 空值 2. 常量 值保持不变的量,JavaScript,19,3. 变量 关键字“var” 声明变量并分配存储空间，var 为可选项 var a=3 /声明变量，并赋初值 a=3 /省略关键字var var a /声明变量后,赋值 a=6 三种方法等效，但不能既不用

9、关键字“var” 也不赋初置。 变量名必须以字母或下划线“_”开始，后面的字符可以是字母、数字或下划线例：abc、a_12、myvar、MyVar,JavaScript,20,JavaScript内部定义的保留字不能用作变量名。JavaScript 区分大小写的，变量Num与变量num是两个不同的变量。 JavaScript的变量采用了弱类型(Loosely typed)表达方式,变量在声明时不必显式说明它的类型，而是在使用时根据数据的类型来确定变量的类型。 在函数体外声明为全局变量 JavaScript提供四种类型变量： 数值型： 36，3.1415926，-3.1E12等 字符串型： “H

10、ello!” 逻辑型： true，false 空值型：null,JavaScript,21,4. 表达式 表达式是由变量、常量和运算符按一定规则组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有三种表达式:算术表达式、串表达式和逻辑表达式。,JavaScript,22,5. 运算符 .对象访问、数组下标、()括号； +增、-减、-取负、位逻辑非、！逻辑非； delete、new、Typeof、this； *乘、/除、%取模、+加、-减； 移位、大于、=大于等于、= =等于、!=不等于； n ,JavaScript,31,6.4 JavaScript对象 6.4.1 Jav

11、aScript对象概述 对象具有: 属性(properties) 方法(methods) 3种对象: JavaScript内建对象 浏览器环境提供的对象 自定义对象,JavaScript,32,6.4.2 自定义对象 语法： function 对象名称(属性列表) this.属性1=参数1 this.属性2=参数2 this.方法1=函数名1 this.方法2=函数名2 ,JavaScript,33,创建对象实例 语法： 对象实例名=new 对象名称(属性值列表),JavaScript,34,function student(id,name,url) this.id=id =

12、name this.url=url this.display=student_display ,JavaScript,MyStudent=new student(000001,林琳, ),定义学生对象,学生对象实例,35,6.4.3 对象属性和方法的引用,JavaScript,1.对象属性的引用 语法： 对象实例名.属性成员名 例, MyS=林琳。,36,语法： 对象实例名n 例, MyStudent0= 000001 MyStudent1= 林琳 MyStudent2= 或： MyStudentid= 000001 MyStudentname= 林琳 MyStudent

13、url= ,JavaScript,37,2.对象方法的引用 语法： 对象实例名.方法名称() 例如： MyStudent.display(),JavaScript,38,6.4.4 对象的操作 1. forin语句 forin是操作对象的语句，也称遍历。 遍历是指逐一通过一个对象的所有属性，它的计数值是对象中的属性个数。语法： for(变量 in 对象) 语句段 ,JavaScript,39,2. with 语句 语法 ： with(对象实例名) 语句段 例： with(MyStudent) id=000001 name=林琳 url= ,JavaScript,40,6.this关键词 用户引

14、用当前所指的对象，格式 : this 属性名,JavaScript,41,6.4.5 事件驱动与事件处理 onClick: 鼠标左键单击对象时发生 Onload: 网页载入浏览器时发生 onUnload: 用户离开当前页面时发生 onMouseOver:鼠标移到对象上时发生 onMouseOut:鼠标离开对象上时发生,JavaScript,42,6.4.6 例6.4,JavaScript,例6.4,43,例6.4 JavaScrip对象应用 function student(id,name,url) this.id=id =name this.url=url this.dis

15、play=student_display ,JavaScript,44,function student_display() document.writeln(id=+thisid+) document.writeln(name=+thisname+) document.writeln(url=+thisurl+) MyStudent=new student(000001,林琳,“ ) MyStudent.display() ,JavaScript,45,6.5 window对象在JavaScript中的应用 6.5.1 window对象构成 对象有用户建立的对象，也有系统提供的内建对象。 W

16、indow对象是内建对象中的最顶层对象。Window对象指的是浏览器窗口对象 。,JavaScript,46,JavaScript,47,6.5.2 window对象的属性 1.window对象主要属性,JavaScript,48,6.5.3 window对象的方法 1.window对象的主要方法 alert():创建带“确定”按钮的对话框 confirm():创建带“确定”和“取消“按钮对话框 close():关闭当前打开的浏览器窗口 open():打开一个新浏览器窗口 prompt():创建带“确定”、“取消“按钮及输入字符串字段对话框 setTimeout():设置一个时间控制器 cle

17、arTimeout():清除原来时间控制器内时间设置,JavaScript,49,2.JavaScript的接口元素 alert(提示)：显示警告框，“提示”是可选项， 警告框中输出的内容。 例：alert(对不起，用户名错误。),JavaScript,50, prompt(提示,缺省值)：显示提示框，等待用户输入文本，用户选择“确认”按钮，返回文本框中内容，选择“取消”按钮，返回一个空字符串。 “提示”和“缺省值”都是可选项，“缺省值”是文本框默认值 例：prompt(请输入姓名：),JavaScript,51,comfirm(提示)：显示确认框，等待用户选择按钮。“提示”可选的，是在提示框

18、中显示的内容，用户可以根据提示选择“确定”或“取消”按钮 例：confirm(MyString +“你好！ 链接到 ex07-002.html页面？),JavaScript,52,6.5.4 window对象的事件 onLoad：网页载入浏览器时发生 onUnLoad：网页从浏览器窗口中删除时发生 onBeforeUnLoad：网页被关闭前发生 OnResize：用户调整窗口大小时发生 OnScroll：用户滚动窗口时发生 OnError：载入的网页产生错误时发生,JavaScript,53,6.5.5 window对象应用案例 1.状态栏内容更新,JavaScript,例6.5,54,Jav

19、aScript,window对象属性的应用 ,55, ,JavaScript,56,2.打开一个新窗口,JavaScript,例6.6,57,例6.6 window对象的open()方法 window对象的open()方法 ,JavaScript,58,3.客户端输入信息验证 例6.67：在客户端验证用户输入数据。页面上有一个超级链接，当用户点击链接时，由prompt提示框提示用户输入姓名，然后JavaScript程序验证用户输入，如果输入正确弹出确认框confirm，若用户在确认框选择“确认”按钮，则链接到网站；如果输入错误，出现警告框alert，输出对不起，输入错误。，程序终止,例6.7,

20、JavaScript,59,JavaScript接口元素应用 ,JavaScript,60,脚本应用, 你好！欢迎光临tomcat！ ,61,6.6 document对象在JavaSCript中应用 6.6.1 document对象 属性 alinkColor：活动超级链接的颜色 bgColor：页面背景颜色 fgColor：页面前景颜色 linkColor：页面中未曾访问过的超级链接的颜色 vlinkColor：页面中曾经访问过的超级链接的颜色 lastModified：最后一次修改页面的时间 Location：页面的URL地址 Title：页面的标题,JavaScript,62,6.6.2

21、 document对象方法 clear():清除文件窗口内的数据c lose():关闭文档 open():打开文档 write():向当前文档写入数据,JavaScript,63,document对象鼠标事件 : onClick: 单击鼠标左键时发生 ondblClick: 双击鼠标左键时发生 onMouseDown: 按下鼠标左键时发生 onMouseMove: 移动鼠标时发生 onMouseOut:鼠标离开对象时发生 onMouseOver:鼠标移到对象上时发生 onMouseUp:放开鼠标左键时发生 onSelectStart:开始选取对象内容时发生 onDragStart:以拖曳方式选

22、取对象时发生,JavaScript,64,document对象按键事件: onKeyDown: 按下按键时发生 onKeyPress: 按下按键时发生 onKeyDown事件，然后产生onKeyPress事件 onKeyUp:放开按键时发生 onHelp:按下系统定义的帮助键时发生,JavaScript,65,6.5.4 window对象应用案例 例6.8 文本框内容互换 任务要求：页面上有2个文本框，用户在第1个文本框输入内容后，点击第2个文本框，将在第2个文本框内显示第1个文本框的内容。,JavaScript,例6.8,66,6.7 JavaScript内置对象 JavaScript不是纯

23、面向对象语言，不具备面向对象语言特性，如封装、继承和重载.JavaScript没有类功能，不能通过类来创建对象。JavaScript创建对象有属性和方法，对象被创建后，可以象使用函数一样来使用。用户除了自己创建对象外，JavaScript还提供了许多内置对象供用户使用。 6.7.1 String对象,JavaScript,67,6.7.2 Math对象 6.7.3 Array对象 语法： 数组对象实例名=new Array() 例如： var arr1=new Array() var arr2=new Array(8),JavaScript,68,4.7.4.Date对象 Date对象主要用于

24、对系统日期和时间的操作。 没有属性，有多种方法。语法形式： MyDate=new Date() 建立了一个日期变量MyDate，如果没有特别指定时间，将把系统的机内时间放入MyDate变量。 表7-13列举了Date对象主要方法和他们的使用说明,JavaScript,69,6.7.5 JavaScript内置对象应用案例 例6.9,JavaScript,例 6.9,70, JavaScript内置对象应用案例 ,JavaScript,71, var Books=new Array() Books0=new Book(算法与数据结构,严蔚敏 陈文博,清华大学出版社) Books1=new Boo

25、k(XML/JSP网页编程教材,吴艾,北京希望电子出版社) Books2=new Book(英华大字典,郑易里,商务印书馆) 点击按钮查阅详细信息 书 名: 作 者: 出版社: ,JavaScript,72,6.8JavaScripy应用案例 6.8.1 数字钟 例6.10： 制作一个页面，页面上显示“单击此处启动数字钟并统计页面持续时间”。当用户单击文字时，启动数字钟，用以显示当前时刻和网页的持续时间,例6.10,JavaScript,73,例6.10 启动数字钟统计页面持续时间 !- function Eclock() var MyDate2=new Date() var MyTime2=

26、MyDate2.getTime() var TimeString2=现在的时间是: +MyDate2.getHours()+时+ MyDate2.getMinutes()+分 +MyDate2.getSeconds()+秒 var MyHours3=0;MyMinutes3=0 var MySeconds4=Math.round(MyTime2-MyTime1)/1000) MyHours3=Math.round(MySeconds4-1800)/3600) MyMinutes3=Math.round(MySeconds4-30)%3600)/60),JavaScript,74,if(MyMinutes3=60) MyMinutes3=0 MySeconds4=Math.round(MySeconds4%3600) MySeconds3=Math.round(MySeconds4%60) var TimeString3=持续时间是: +MyHours3+时+MyMinutes3+分+MySeconds3+秒 Clock.innerHTML=TimeString2+ TimeString3 setTimeout (Eclock(),1000) - ,JavaScript,75, ,JavaScript,76, 单击此处启动数字钟并统计网页持续时间 ,Ja