Web技术应用基础_d06.ppt

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

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

3、位置,JavaScript,7,1.任务要求要求页面上有两幅图像及有关图像的说明的文字，当用户用鼠标左键单击页面时，图像交换位置。,例6.1,JavaScript,8,ex6-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,JavaScript,9,请单

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

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

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

7、pt调入HTML文件将JavaScript代码以扩展名“.js”单独存放语法:,JavaScript,16,6.2.2JavaScript书写格式区分大小写可以没有可见行结束标志，换行符作为行终止符。也可以用(;)作为一行终止符。C语言、C和Java语言中，使用分号(;)作一行的结束标志如果需要把几行代码写在一行，使用分号(;)分开。vara=3varb=6varc=0vara=3;b=6;c=0,JavaScript,17,为了使程序清晰易读，采用缩进格式来书写。可以用两种方法进行注释。注释方法与C相同。/：从注释标记“/”起直到行尾的字符都被忽略。/*/：在“/*”与“*/”之间的字符都被

8、忽略。,JavaScript,18,6.2.3基本数据类型1.数据类型数值型(整数和浮点数)字符型布尔型(取值为true或false)空值2.常量值保持不变的量,JavaScript,19,3.变量关键字“var”声明变量并分配存储空间，var为可选项vara=3/声明变量，并赋初值a=3/省略关键字varvara/声明变量后,赋值a=6三种方法等效，但不能既不用关键字“var”也不赋初置。变量名必须以字母或下划线“_”开始，后面的字符可以是字母、数字或下划线例：abc、a_12、myvar、MyVar,JavaScript,20,JavaScript内部定义的保留字不能用作变量名。JavaS

9、cript区分大小写的，变量Num与变量num是两个不同的变量。JavaScript的变量采用了弱类型(Looselytyped)表达方式,变量在声明时不必显式说明它的类型，而是在使用时根据数据的类型来确定变量的类型。在函数体外声明为全局变量JavaScript提供四种类型变量：数值型：36，3.1415926，-3.1E12等字符串型：“Hello!”逻辑型：true，false空值型：null,JavaScript,21,4.表达式表达式是由变量、常量和运算符按一定规则组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有三种表达式:算术表达式、串表达式和逻辑表达式。,J

10、avaScript,22,5.运算符.对象访问、数组下标、()括号；+增、-减、-取负、位逻辑非、！逻辑非；delete、new、Typeof、this；*乘、/除、%取模、+加、-减；移位、大于、=大于等于、=等于、!=不等于；n,JavaScript,31,6.4JavaScript对象6.4.1JavaScript对象概述对象具有:属性(properties)方法(methods)3种对象:JavaScript内建对象浏览器环境提供的对象自定义对象,JavaScript,32,6.4.2自定义对象语法：function对象名称(属性列表)this.属性1=参数1this.属性2=参数2t

11、his.方法1=函数名1this.方法2=函数名2,JavaScript,33,创建对象实例语法：对象实例名=new对象名称(属性值列表),JavaScript,34,functionstudent(id,name,url)this.id==namethis.url=urlthis.display=student_display,JavaScript,MyStudent=newstudent(000001,林琳,),定义学生对象,学生对象实例,35,6.4.3对象属性和方法的引用,JavaScript,1.对象属性的引用语法：对象实例名.属性成员名例,MyStudent.

12、name=林琳。,36,语法：对象实例名n例,MyStudent0=000001MyStudent1=林琳MyStudent2=或：MyStudentid=000001MyStudentname=林琳MyStudenturl=,JavaScript,37,2.对象方法的引用语法：对象实例名.方法名称()例如：MyStudent.display(),JavaScript,38,6.4.4对象的操作1.forin语句forin是操作对象的语句，也称遍历。遍历是指逐一通过一个对象的所有属性，它的计数值是对象中的属性个数。语法：for(变量in对象)语句段,JavaScript,39,2.with语句

13、语法：with(对象实例名)语句段例：with(MyStudent)id=000001name=林琳url=,JavaScript,40,6.this关键词用户引用当前所指的对象，格式:this属性名,JavaScript,41,6.4.5事件驱动与事件处理onClick:鼠标左键单击对象时发生Onload:网页载入浏览器时发生onUnload:用户离开当前页面时发生onMouseOver:鼠标移到对象上时发生onMouseOut:鼠标离开对象上时发生,JavaScript,42,6.4.6例6.4,JavaScript,例6.4,43,例6.4JavaScrip对象应用functionstu

14、dent(id,name,url)this.id==namethis.url=urlthis.display=student_display,JavaScript,44,functionstudent_display()document.writeln(id=+thisid+)document.writeln(name=+thisname+)document.writeln(url=+thisurl+)MyStudent=newstudent(000001,林琳,“)MyStudent.display(),JavaScript,45,6.5window对象在JavaScr

15、ipt中的应用6.5.1window对象构成对象有用户建立的对象，也有系统提供的内建对象。Window对象是内建对象中的最顶层对象。Window对象指的是浏览器窗口对象。,JavaScript,46,JavaScript,47,6.5.2window对象的属性1.window对象主要属性,JavaScript,48,6.5.3window对象的方法1.window对象的主要方法alert():创建带“确定”按钮的对话框confirm():创建带“确定”和“取消“按钮对话框close():关闭当前打开的浏览器窗口open():打开一个新浏览器窗口prompt():创建带“确定”、“取消“按钮及输

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

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

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

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

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

21、ent对象按键事件:onKeyDown:按下按键时发生onKeyPress:按下按键时发生onKeyDown事件，然后产生onKeyPress事件onKeyUp:放开按键时发生onHelp:按下系统定义的帮助键时发生,JavaScript,65,6.5.4window对象应用案例例6.8文本框内容互换任务要求：页面上有2个文本框，用户在第1个文本框输入内容后，点击第2个文本框，将在第2个文本框内显示第1个文本框的内容。,JavaScript,例6.8,66,6.7JavaScript内置对象JavaScript不是纯面向对象语言，不具备面向对象语言特性，如封装、继承和重载.JavaScript

22、没有类功能，不能通过类来创建对象。JavaScript创建对象有属性和方法，对象被创建后，可以象使用函数一样来使用。用户除了自己创建对象外，JavaScript还提供了许多内置对象供用户使用。6.7.1String对象,JavaScript,67,6.7.2Math对象6.7.3Array对象语法：数组对象实例名=newArray()例如：vararr1=newArray()vararr2=newArray(8),JavaScript,68,4.7.4.Date对象Date对象主要用于对系统日期和时间的操作。没有属性，有多种方法。语法形式：MyDate=newDate()建立了一个日期变量My

23、Date，如果没有特别指定时间，将把系统的机内时间放入MyDate变量。表7-13列举了Date对象主要方法和他们的使用说明,JavaScript,69,6.7.5JavaScript内置对象应用案例例6.9,JavaScript,例6.9,70,JavaScript内置对象应用案例,JavaScript,71,varBooks=newArray()Books0=newBook(算法与数据结构,严蔚敏陈文博,清华大学出版社)Books1=newBook(XML/JSP网页编程教材,吴艾,北京希望电子出版社)Books2=newBook(英华大字典,郑易里,商务印书馆)点击按钮查阅详细信息书名:作者:出版社:,JavaScript,72,6.8JavaScripy应用案例6