网页制作案例教程 清华大学出版社 课件第11章 JavaScript网页应用

1、 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社第11章 Javascript网页应用 本章学习目标（知识要点）nJavaScript对象基本概念、类型和使用nJavaScript内置对象应用nBrowser对象应用nHTML DOM对象应用nJavaScript事件和事件处理机制nJavaScript常用的基本事件nJavaScript表单验证应用nJavaScript网页特效应用本章学习导航nJavaScript是制作网页动态效果的基本应用，在网站开发中，尤其是用户注册、用户登录、表单验证、网页滚动广告、网页特效等方面，都离不开JavaScript脚本语言的使用，因此，掌握J

2、avaScript常用的对象、常用事件及其处理方法，是快速开发网页动态功能，必不可少的技能。 n本章内容在全书知识结构中所处位置如图所示 基础篇HTML篇CSS篇JavaScript篇提高篇网 页 设 计 与 开 发 流 程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护11.1 Javascript对象对象11.1.1 对象的基本概念对象的基本概念n1、什么是对

3、象 n对象用于描述客观世界存在的特定实体。 n 2、对象的属性和方法 n对象就是属性和方法的集合。属性是作为对象成员的一组变量，表明对象的状态。 n方法是作为对象成员的函数表明对象所具有的行为， 通过访问或设置对象的属性，并且调用对象的方法，就可以对对象进行各种操作，从而获得需要的功能。 n3、JavaScript对象 nJavaScript中的对象同样也是由属性（properties）和方法（methods）两个基本的元素的构成的。n用来描述对象特性的一组数据，也就是若干个变量，称为属性；n用来操作对象特性的若干个动作，也就是若干函数，称为方法。n JavaScript的对象也是一种特殊的数

4、据类型，它不仅可以保存一组不同类型的数据（称做“对象的属性”），而且还可以包含有关“处理”这些数据的函数（称做“对象的方法”） 11.1.2 JavaScript对象类型和使用对象类型和使用n 1、JavaScript对象类型 n JavaScript对象的类型分为四种：nJavaScript 本地对象和内置对象 nBrowser 对象（BOM）nHTML DOM 对象n自定义对象n在JavaScript中，常用的内置对象有：数组对象(Array)、字符串对象(String)、数学对象(Math)、日期(Date)对象等。 nBrowser 对象（BOM）包括：Window对象、Navigat

5、or对象、Screen对象、History对象、Location对象。 nHTML DOM 对象包括：Document对象、Event对象、Anchor对象、Form对象、Frame对象、Link对象、Table对象等。 n2、对象的使用n1）引用对象的途径 n（1)创建新对象。n（2)JavaScript内部核心对象 n（3)由浏览器环境中提供 创建新对象格式：对象实例名=new 对象名(参数表); n 2）有关对象操作语句 n（1）for.in语句 n（2）with语句 n（3）this关键词 n（4）new运算符 n3、对象的属性n对象属性的引用有三种方式 n（1）使用点（）运算符 属性

6、的使用格式为：对象名.属性名 = 属性值; n（）通过对象的下标实现引用 如：university0=“安徽省” n（）通过字符串的形式实现 如：universityProvince=“安徽省” n 4、对象的方法nJavaScript的方法是函数。如Window对象的关闭（Close）方法、打开（Open）方法等。 方法只能在代码中使用，其用法依赖于方法所需的参数个数以及它是否具有返回值。n 在JavaScript中，对象方法的引用非常简单。只需在对象名和方法之间用点分隔就可指明该对象的某一种方法，并加以引用。其格式为： 对象名.方法()n5、 对象的事件n 事件就是对象上所发生的事情。n事

7、件是预先定义好的、能够被对象识别的动作，如单击（Click）事件、双击（DblClick）事件、装载（Load）事件、鼠标移动（MouseMove）事件等，不同的对象能够识别不同的事件。通过事件，可以调用对象的方法，以产生不同的执行动作。 11.1.3 JavaScript内置对象内置对象n1、数组对象(Array)n 1）什么是数组 n一个数组可以包含多个数组元素。数组中数组元素的个数称为数组长度。 n2）创建和访问数组 n一个数组元素由数组名、一对方括号 和这对括号中的下标组合起来表示 n3）数组对象的定义方法 n 数组对象的定义有三种方法： var 数组对象名=new Array();

8、var 数组对象名=new Array(数组元素个数); var 数组对象名=new Array(第1个数组元素的值, 第2个数组元素的值, .); n 4）forin语句处理数组 nforin的格式是： for(变量 in 数组) 循环体语句;n2、字符串对象(String)n1）字符串对象的定义方法 n其格式为： 字符串变量名 = 字符串; 字符串变量名 = new String(字符串); n 2）字符串对象的属性 n 字符串对象的最常用属性是length，功能是得到字符串的字符个数。 n3）字符串对象的方法 nString对象的最常用属性和方法length、toLowerCase()、

9、toUpperCase()、charAt(index)、substr(start,len)、 anchor(anchorname)等 n3、数学对象(Math) n1）数学对象常用的方法 nMath对象的属性是数学中常用的常量，如圆周率PI，自然对数的底E等。 n2）在调用Math对象的属性和方法时，直接写成： Math.属性和Math.方法。 n4、日期(Date)对象n1） 日期对象的定义n（1） 创建日期对象实例，并赋值为当前时间，其格式为： var 日期对象名 = new Date();n（2）创建日期对象实例，其格式为： var日期对象名 = new Date(millisecond

10、s);n（3） 使用特定的表示日期和时间的字符串string，为创建的对象实例赋值。 其格式为：var日期对象名 = new Date(string);n（4） 按照年、月、日、时、分、秒、毫秒的顺序，为创建的对象实例赋值。其格式为： var日期对象名 = new Date(year,month,day,hours,mintues,seconds,milliseconds); n 2）日期对象的方法 n（1）获取日期、时间的方法 getYear()、 getMonth()等n （2）设置日期和时间的方法 setFullYear()、setMonth()等 n （3）格式转换的方法 toGMTS

11、tring() 、 toLocaleString()等11.1.4 Browser 对象（对象（BOM）n1、窗口对象(Window)Window对象类结构 nWindow对象的主要方法有：n open(URL,windowName,parameterList)：根据页面地址、窗口名称、窗口风格打开一个窗口。nalert(text)：弹出警告框，参数为警告信息。n confirm(text)：弹出确认框，参数为确认信息。nprompt(text,defaultText)：弹出提示框，参数为提示信息和缺省值。nWindow 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，W

12、indow 对象是全局对象，所有的表达式都在当前的环境中计算。 n2、location 对象nwindow对象的 location 属性包含了当前页面的地址 (URL) 信息，你可以直接改变此属性值，将其设置成新的地址 (URL)： window.location = http:/; 或者 location = http:/; n3、history 对象 nhistory 对象是一个很有用的对象，此对象记录着浏览器所浏览过的每一个页面，这些页面组成了一个历史记录列表。history 对象具有三个主要方法： forward() 、back() 、go() n4、Screen对象nScreen 对

13、象提供有关显示器的信息。常用来判别用户显示器的分别率，对象的所有属性都是只读的。 nScreen 对象应用如：function show () alert(您当前电脑的分辨率是: + screen.width + + screen.height); n5、Navigator对象n使用Navigator对象可以查看用户正在使用的浏览器的信息。 11.1.5 HTML DOM对象对象n1、Document对象nDocument对象是Window对象的属性，它表示当前页文档，封装了当前页元素信息。通过document对象可以访问HTML文档包含的任何HTML元素，如各种表格、表单、图像、超链接等。

14、n2、Form对象n 1）表单概念n表单（Form）:它构成了Web页面的基本元素。 在Forms1中共有三个基本元素，而Forms2中只有两个元素。 n表单对象最主要的功能就是能够直接访问HTML文档中的表单，它封装了相关的HTML代码： n) 表单对象的方法 n表单对象的方法只有两个：submit()、reset方法，submit该方法主要用于实现表单信息的提交,reset方法主要是实现信息的重置。 n)表单对象的属性 n表单对象中的属性主要包括以下：elements、name、action、target 、encoding 、method. n)访问表单对象 n(1)通过标识访问表单 n

15、(2)通过数组来访问表单 11.1.6 自定义对象自定义对象n1、初始化对象 n初始化对象的一般格式为：n对象= 属性1:属性值1;属性2:属性值2;.属性n:属性值n; n2、定义对象的构造函数n 这种方法的一般格式为： function 对象名(属性1,属性2,.属性n) this.属性1=属性值1; this.属性2=属性值2; . this.属性n=属性值n; this.方法1=函数名1; this.方法2=函数名2; . this.方法m=函数名m; n3、创建对象实例newObject=new object(); 其中newObject是新的对象，Object已经定义好的对象。 n

16、 4、对象方法的使用 n实质对象的方法就是一个函数FunctionName 11.2 JavaScript事件处理 11.2.1 事件和事件处理机制事件和事件处理机制 n1、事件的定义 n事件是为了增强网页的交互性，使浏览器响应用户操作的一种机制。 n浏览器事件包括两种：n一种是常见的用户与网页进行交互过程中产生的事件，这种事件是用户在浏览器中直接触发的n另外一种就是浏览器本身的一些动作也可以产生事件，这种事件可能不是用户直接触发的，但是归根结底是用户间接触发的，在数量上较少。 n2、事件处理 n事件处理是浏览器为响应发生的某个事件而进行的处理过程。 n在JavaScript中，它是网页交互的

17、重要内容。浏览器在程序运行的大部分时间里都在等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理的过程。n3、指定事件处理程序n（1）直接HTML标记中指定。 n（2）在标签中编写针对特定对象的特定事件的JavaScript的事件处理代码，需要使用for属性指定对象，使用event属性指定事件。 n（3）在JavaScript代码中设置事件处理。 11.2.2 事件对象事件对象n绝大多数的浏览器能够较好地支持JavaScript的事件模型，这里所说的事件模型是指包括基本事件模型在内的现代事件模型。基本事件模型只能够处理基本的事件，现代事件模型能够应用于类似桌面应用的网页应用程

18、序之中，它的更新主要是指增加了“事件对象”。 n事件对象用于获得和设置当前事件发生时的有关信息，例如返回用户是否按下了Alt、Ctrl、Shift键的信息等。 Internet Explorer 4+中的事件对象的属性 11.2.3 JavaScript基本事件基本事件n基本的JavaScript事件主要有如下3种：n1、鼠标单击动作触发的事件，包括Click、MouseOut、MouseOver、MouseDown、MouserUp等事件。n2、键盘按键动作触发的事件，包括KeyDown、KeyPress、KeyUp等事件n3、浏览器自身触发的事件，包括Load、Unload等。 n1、鼠标

19、事件n鼠标事件是指响应用户的鼠标动作的事件，这些动作包括鼠标的单击、双击，以及将单击分解为按下和放开、鼠标的移动、鼠标的移入和移出。 n有：Click、dblClick 、MouseDown、MouseUp MouseOver、MouseOut 、MouseMoven2、键盘事件n键盘事件是响应用户的键盘输入的事件，要求页面内必须有激活对象。 n常用的键盘事件：KeyDown 、KeyPress和KeyUp n3、Load页面加载事件 nLoad事件时当浏览器加载网页或图像后触发的，Load事件的处理程序可以在其他所有的JavaScript程序和网页之前被执行，可以用来完成网页中所作用数据的初

20、始化，例如，弹出提示窗口、显示欢迎信息或密码认证窗口等。 n4、Unload页面卸载事件nUnload事件发生在用户在浏览器地址栏中输入一个新的URL，或者使用浏览器中载入一个新的网页，或者浏览器被关闭时。在浏览器载入下一个新的网页之前，系统产生一个Unload事件，它跟Load事件的功能相反。编程中常常使用Load事件载入新网页，使用Unload事件结束网页。 n5、Focus捕获焦点事件n将一个对象(文本框、文本区域、选择框等)变为工作目标时，即光标进入该对象中，触发Focus事件。用户可以通过鼠标单击或按键盘的Tab键时让一个对象获得焦点。 n6、Blur失去焦点事件nBlur事件与Fo

21、cus事件时两个相对的事件。当文字插入点或鼠标指针移离一个form内的对象(如按钮、文本框、文本区域等)或移离window及frame的范围，触发blur事件。 n7、Sumbit提交表单数据事件nSumbit事件通常在 标记中声明，通常会有一个Submit（送出数据）按钮，当用户完成信息输入，准备将信息提交给服务器时发生。 n8、Reset重置表单数据事件nReset事件通常也是在标记中声明的，通常会关联到一个Reset按钮，当用户完成信息输入，单击Reset按钮，触发Reset事件，它会清除form内已输入的数据，便于用户重新输入。 n9、Change选项变化事件n当一个文本框、文本区域、

22、选择框中的鼠标指针移离该对象时，若对象的内容发生改变，就会触发Change事件。 n10、Select文本内容选择事件 n当一个文本框，文本区域对象中的文本被选中时就会触发select事件。 11.3 使用使用Javascript验证表单验证表单n使用JavaScript进行用户登录页面验证n步骤：n1、编写checkLogin(form,page)函数，该函数需要两个参数，第一个为需要验证的表单对象，第二个参数为从提交登录的页面访问其他页面所在的路径。实现用户名和密码是否输入的验证和鼠标聚焦。 function checkLogin(form,page) if(form.username.v

23、alue=)alert(用户名不能为空);form.username.focus();return false; else if(form.password.value=)alert(用户密码不能为空);form.password.focus();return false;else /如果有用户名和密码，则验证其有效性 if(form.username.value=admin) & (form.password.value=123)/*如果用户名为admin、密码为123,则让页面转向管理员页面products_showusers.html */ form.action=page+pr

24、oduct/products_showusers.html;return true;else if(form.username.value=user) & (form.password.value=123) /* 如果用户名为user、密码为123,则让页面转向用户页面products1.html */form.action=page+product/products1.html;return true;else /如果无效 则不作任何响应 return false ; n2、把上述函数代码，单独保存在acesys.js文件中，并放在以js命名的文件夹中，然后在网站AscentSys医

25、药网站系统首页index.html中，在标签中添加对目录下js/acesys.js文件的引用，代码如下： n3、在form表单中添加对JavaScript脚本函数checkLogin(form,page)的调用，代码如下： ncheckLogin(this, ./)函数中实参数this表单当前form表单，第二个实参./表示当前路径下页面。 n4、程序运行结果如下图 n使用文本框验证用户名以及输入的年龄是否有效，用户名不能包含非法字符年龄范围12-110之间n1、编写JavaScript脚本函数checkValidAge(s)，验证年龄文本框中输入的是否数字以及是否在范围之内。代码如下： fu

26、nction checkValidAge(s) var i,ch,age; for(i=0;is.length;i+) ch = s.charAt(i); if(ch9) alert(请输入数字!); return false; age = parseInt(s); if(age110) alert(请输入真实年龄!); return false; return true;n2、编写表单验证函数CheckAge()，调用form表单对象，获取输入的年龄，并使用函数checkValidAge（）进行验证输入的年龄是否合法，代码如下： function CheckAge() var f; f =

27、document.form; if(checkValidAge(f.age.value) alert(您刚才输入的年龄是:+f.age.value); else /如果输入的是无效年龄 f.age.focus(); /设置焦点 f.age.select(); /选中age中的已有内容 n3、编写验证输入用户名的函数isIllegalCharacter(obj)，在键盘弹起时，验证用户名输入是否存在非法字符，如：/(?:等，代码如下： function isIllegalCharacter(obj)var str = /(?:u4e00-u9fa5*w*s*)+$/;if(!str.test(o

28、bj.value)alert(包含非法字符);n4、编写form表单，在用户名文本框中使用keyup事件调用isIllegalCharacter(obj)函数验证输入的用户名，在年龄文本框中使用change选项调用CheckAge()函数验证输入的年龄，代码如下： 姓名： 年龄： n5、程序运行结果如下图所示 11.4 使用使用Javascript创建页面特效创建页面特效 n页面弹出小视窗页面或图片 n1、编写JavaScript脚本代码，实现弹出小视窗页面或者图片。代码如下： n2、编写基本HTML结构页面，添加JavaScript脚本代码在标签中。 n3、程序运行结果如下图所示 n使用Ja

29、vaScript实现滚动广告 n1、编写JavaScript脚本函数和数组，广告图片存放在数组bannerAD1内，代码如下： !-第一个图片var bannerAD1=new Array();var bannerAD1link1=new Array();var adNum1=0;bannerAD10=images/10.jpg;bannerAD11=images/12.jpg;bannerAD12=images/15.jpg;bannerAD13=images/16.jpg;bannerAD14=images/17.jpg; bannerAD15=images/18.jpg;bannerAD

30、16=images/19.jpg;bannerAD17=images/21.jpg;bannerAD18=images/22.jpg;function setTransition1() if (document.all) bannerAD1rotator.filters.revealTrans.Transition=Math.floor(Math.random()*23); bannerAD1rotator.filters.revealTrans.apply(); function playTransition1() if (document.all) bannerAD1rotator.filters.revealTrans.play()function nextAd1() if(adNum1n2、在标签中，使用DIV