搜索
网页制作案例教程毋建军郑宝昆郭锐编著清华大学出版社第11章Javascript网页应用本章学习目标（知识要点）JavaScript对象基本概念、类型和使用JavaScript内置对象应用Browser对象应用HTMLDOM对象应用JavaScript事件和事件处理机制JavaScript常用的基本事件JavaScript表单验证应用JavaScript网页特效应用本章学习导航JavaScript是制作网页动态效果的基本应用，在网站开发中，尤其是用户注册、用户登录、表单验证、网页滚动广告、网页特效等方面，都离不开JavaScript脚本语言的使用，因此，掌握JavaScript常用的对象、常用事件及其处理方法，是快速开发网页动态功能，必不可少的技能。本章内容在全书知识结构中所处位置如图所示基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护11.1Javascript对象11.1.1对象的基本概念1、什么是对象对象用于描述客观世界存在的特定实体。2、对象的属性和方法对象就是属性和方法的集合。属性是作为对象成员的一组变量，表明对象的状态。方法是作为对象成员的函数表明对象所具有的行为，通过访问或设置对象的属性，并且调用对象的方法，就可以对对象进行各种操作，从而获得需要的功能。3、JavaScript对象JavaScript中的对象同样也是由属性（properties）和方法（methods）两个基本的元素的构成的。用来描述对象特性的一组数据，也就是若干个变量，称为属性；用来操作对象特性的若干个动作，也就是若干函数，称为方法。JavaScript的对象也是一种特殊的数据类型，它不仅可以保存一组不同类型的数据（称做“对象的属性”），而且还可以包含有关“处理”这些数据的函数（称做“对象的方法”）11.1.2JavaScript对象类型和使用1、JavaScript对象类型JavaScript对象的类型分为四种：JavaScript本地对象和内置对象Browser对象（BOM）HTMLDOM对象自定义对象在JavaScript中，常用的内置对象有：数组对象(Array)、字符串对象(String)、数学对象(Math)、日期(Date)对象等。Browser对象（BOM）包括：Window对象、Navigator对象、Screen对象、History对象、Location对象。HTMLDOM对象包括：Document对象、Event对象、Anchor对象、Form对象、Frame对象、Link对象、Table对象等。2、对象的使用1）引用对象的途径（1)创建新对象。（2)JavaScript内部核心对象（3)由浏览器环境中提供创建新对象格式：对象实例名=new对象名(参数表);2）有关对象操作语句（1）for...in语句（2）with语句（3）this关键词（4）new运算符3、对象的属性对象属性的引用有三种方式（1）使用点（．）运算符属性的使用格式为：对象名.属性名=属性值;（２）通过对象的下标实现引用如：university[0]=“安徽省”（３）通过字符串的形式实现如：university[Province]=“安徽省”4、对象的方法JavaScript的方法是函数。如Window对象的关闭（Close）方法、打开（Open）方法等。方法只能在代码中使用，其用法依赖于方法所需的参数个数以及它是否具有返回值。在JavaScript中，对象方法的引用非常简单。只需在对象名和方法之间用点分隔就可指明该对象的某一种方法，并加以引用。其格式为：对象名.方法()5、对象的事件事件就是对象上所发生的事情。事件是预先定义好的、能够被对象识别的动作，如单击（Click）事件、双击（DblClick）事件、装载（Load）事件、鼠标移动（MouseMove）事件等，不同的对象能够识别不同的事件。通过事件，可以调用对象的方法，以产生不同的执行动作。11.1.3JavaScript内置对象1、数组对象(Array)1）什么是数组一个数组可以包含多个数组元素。数组中数组元素的个数称为数组长度。2）创建和访问数组一个数组元素由数组名、一对方括号[]和这对括号中的下标组合起来表示3）数组对象的定义方法数组对象的定义有三种方法：var数组对象名=newArray();var数组对象名=newArray(数组元素个数);var数组对象名=newArray(第1个数组元素的值,第2个数组元素的值,...);4）for…in语句处理数组for…in的格式是：for(变量in数组)循环体语句;2、字符串对象(String)1）字符串对象的定义方法其格式为：字符串变量名=字符串;字符串变量名=newString(字符串);2）字符串对象的属性字符串对象的最常用属性是length，功能是得到字符串的字符个数。3）字符串对象的方法String对象的最常用属性和方法length、toLowerCase()、toUpperCase()、charAt(index)、substr(start,len)、anchor(anchorname)等3、数学对象(Math)1）数学对象常用的方法Math对象的属性是数学中常用的常量，如圆周率PI，自然对数的底E等。2）在调用Math对象的属性和方法时，直接写成：Math.属性和Math.方法。4、日期(Date)对象1）日期对象的定义（1）创建日期对象实例，并赋值为当前时间，其格式为：var日期对象名=newDate();（2）创建日期对象实例，其格式为：var日期对象名=newDate(milliseconds);（3）使用特定的表示日期和时间的字符串string，为创建的对象实例赋值。其格式为：var日期对象名=newDate(string);（4）按照年、月、日、时、分、秒、毫秒的顺序，为创建的对象实例赋值。其格式为：var日期对象名=newDate(year,month,day,hours,mintues,seconds,milliseconds);2）日期对象的方法（1）获取日期、时间的方法getYear()、getMonth()等（2）设置日期和时间的方法setFullYear()、setMonth()等（3）格式转换的方法toGMTString()、toLocaleString()等11.1.4Browser对象（BOM）1、窗口对象(Window)Window对象类结构Window对象的主要方法有：open(URL,windowName,parameterList)：根据页面地址、窗口名称、窗口风格打开一个窗口。alert(text)：弹出警告框，参数为警告信息。confirm(text)：弹出确认框，参数为确认信息。prompt(text,defaultText)：弹出提示框，参数为提示信息和缺省值。Window对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。2、location对象window对象的location属性包含了当前页面的地址(URL)信息，你可以直接改变此属性值，将其设置成新的地址(URL)：window.location=或者location=3、history对象history对象是一个很有用的对象，此对象记录着浏览器所浏览过的每一个页面，这些页面组成了一个历史记录列表。history对象具有三个主要方法：forward()、back()、go()4、Screen对象Screen对象提供有关显示器的信息。常用来判别用户显示器的分别率，对象的所有属性都是只读的。Screen对象应用如：functionshow(){alert(您当前电脑的分辨率是:+screen.width+×+screen.height);}5、Navigator对象使用Navigator对象可以查看用户正在使用的浏览器的信息。11.1.5HTMLDOM对象1、Document对象Document对象是Window对象的属性，它表示当前页文档，封装了当前页元素信息。通过document对象可以访问HTML文档包含的任何HTML元素，如各种表格、表单、图像、超链接等。2、Form对象1）表单概念表单（Form）:它构成了Web页面的基本元素。formName=Form1INPUTtype=text...Inputtype=text...Inpupbyne=text.../formformName=Form2INPUTtype=text...Inputtype=text.../form在Forms[1]中共有三个基本元素，而Forms[2]中只有两个元素。表单对象最主要的功能就是能够直接访问HTML文档中的表单，它封装了相关的HTML代码：Formname=表的名称Ttrget=指定信息的提交窗口action=接收表单程序对应的URLmethod=信息数据传送方式(get/post)enctype=表单编码方式[onsubmit=JavaScript代码]/Form２)表单对象的方法表单对象的方法只有两个：submit()、reset方法，submit该方法主要用于实现表单信息的提交,reset方法主要是实现信息的重置。３)表单对象的属性表单对象中的属性主要包括以下：elements、name、action、target、encoding、method.４)访问表单对象(1)通过标识访问表单(2)通过数组来访问表单11.1.6自定义对象1、初始化对象初始化对象的一般格式为：对象={属性1:属性值1;属性2:属性值2;...属性n:属性值n};2、定义对象的构造函数这种方法的一般格式为：function对象名(属性1,属性2,...属性n){this.属性1=属性值1;this.属性2=属性值2;...this.属性n=属性值n;this.方法1=函数名1;this.方法2=函数名2;...this.方法m=函数名m;}3、创建对象实例newObject=newobject();其中newObject是新的对象，Object已经定义好的对象。4、对象方法的使用实质对象的方法就是一个函数FunctionName11.2JavaScript事件处理11.2.1事件和事件处理机制1、事件的定义事件是为了增强网页的交互性，使浏览器响应用户操作的一种机制。浏览器事件包括两种：一种是常见的用户与网页进行交互过程中产生的事件，这种事件是用户在浏览器中直接触发的另外一种就是浏览器本身的一些动作也可以产生事件，这种事件可能不是用户直接触发的，但是归根结底是用户间接触发的，在数量上较少。2、事件处理事件处理是浏览器为响应发生的某个事件而进行的处理过程。在JavaScript中，它是网页交互的重要内容。浏览器在程序运行的大部分时间里都在等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理的过程。3、指定事件处理程序（1）直接HTML标记中指定。（2）在script标签中编写针对特定对象的特定事件的JavaScript的事件处理代码，需要使用for属性指定对象，使用event属性指定