HTML+CSS网页设计指南 (6)

null第14章 JavaScript入门第14章 JavaScript入门将JavaScript引入HTML的目的在于实现客户与浏览器的动态交互。在上章中我们已经初步体验了其效果。JavaScript是基于对象的脚本语言，即所有的编程均以对象为出发点。把JavaScript中的元素划分给大大小小的对象，对象中仍然包含对象。比如，在描述银行系统时，银行员工具有名字、职位、考核成绩等属性，同时还必须包括员工可以执行的存款、核算、打印单据等操作，在设计网页时，要访问每一个员工的属性和操作该怎么实现呢？本章将详细阐述这些。 本章的主要 知识点 高中化学知识点免费下载体育概论知识点下载名人传知识点免费下载线性代数知识点汇总下载高中化学知识点免费下载 有： 对象的概念、DOM是什么。 JavaScript中的一个重要数据结构——数组。 JavaScript中常用的内部对象。 window对象的属性、方法和事件。 document对象的属性、方法和事件。 一个JavaScript实现的动态页面。14.1 了解一下何为“对象”14.1 了解一下何为“对象”“对象”这个词相信都不陌生，在很多计算机语言都有这个概念，所以才称这些编程语言为面向对象的， 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 示这是一类事物。在生活中，如果你是一个销售商，你把你的产品卖给您的客户，那么你的客户就是你的销售对象，其实这与编程语言中的“对象”颇有相似性。JavaScript中的对象指的是指JavaScript这门语言所服务的一类事物。14.1.1 JavaScript对象概述14.1.1 JavaScript对象概述JavaScript中的对象与面向对象编程语言中的类的概念相似，是对一类事物的描述。但是与面向对象的编程语言不同的是，JavaScript对象没有抽象、继承、重载等功能。JavaScript中的对象一般包括属性和方法两个基本元素。 对象的属性是反映对象某些特定性质的，是信息的装载单位，可以理解为变量。例如：窗口的大小、文字的颜色等。而对象的方法是表示对对象可以执行的操作，这些操作能够按照设计者的意图被执行，可以理解为函数。例如：提交表单、鼠标单击的处理函数等。 对象是一个抽象的概念，将其具体化之后就是对象实例，也就是说对象与对象实例是一般与具体的关系。例如：“汽车”表示一类有发动机、四轮的事物，是一个对象，而“奥迪A6”表示一种特定型号的汽车，是一个对象实例。 那么对象和对象实例是怎么联系的呢？答案是构造函数。构造函数是用来创建对象实例的函数。在定义对象时可以自己定义构造函数，如果没有定义的解释器会默认的定义一个构造函数。如以下这个例子。 var objectInstance=new objectName([参数列表]) ;14.1.2 DOM介绍14.1.2 DOM介绍在JavaScript中许多对象，设计者通过怎样的方式来组织这些对象呢？这就需要了解一个新概念——DOM。 DOM（Document Object Model），文档对象模型，它是W3C的标准。它的功能是把浏览器支持的文档（包括HTML, XML, XHTML）当作一个对象来解析。DOM实际上是一个操作文档里面所包含的内容的一个编程的API，允许开发人员从文档中读取、搜索、修改、增加和删除数据。 说明：DOM是与平台和语言无关的，就是说只要是支持DOM的平台和编程语言，都可以用来编写文档。 DOM里面有专门的HTML和XML的对象模型。用它们来操作文档元素非常方便。DOM可以视为一种API的应用。也就是说，将文件视为一个文件对象，通过程序语言调用DOM对象，来对该文件的某些特定数据进行访问操作。并且利用程序将获取的对象数据做更进一步的应用。可以利用DOM方法和属性去通过语言如（VBScript、JavaScript、ASP）操作XML文件。14.2 JavaScript中的数组14.2 JavaScript中的数组JavaScript中数组是最常用的数据结构之一，是用一个变量来存储一组数据，是一组数据的集合。每个数据是数组的一个元素，每一个数据都有相应的索引，因为数组是严格有序的。索引号以0开始，直到数组的length-1。为了存取数组中的任意一个元素，需要采用“数组名[索引号]”的形式。与其他编程语言不同的是，同一个JavaScript数组的元素可以是不同的数据类型。 JavaScript的数组属于核心语言对象，而不是文档对象模型。JavaScript的数组大小不要求确定。将数据收集到数组中可简化数据管理。例如，通过使用数组，方法只使用一个参数就可以将一组名称传递给函数。14.2.1 定义数组和操作数组14.2.1 定义数组和操作数组JavaScript中的数组定义方法一般来说有3种：一种是匿名的方式；一种是通过new Array()；另一种是在定义时直接赋值。 （1）匿名方式定义的格式是： var arrA=[]; （2）通过new Array()定义的格式是： var arrA=new Array(); （3）定义时直接赋值的写法是： arrA=['2000','2004','2008'];14.2.2 多维数组14.2.2 多维数组JavaScript中严格地将没有多维数组。然而这种数据结构是非常需要的。在开发过程中可以通过数组嵌套来实现，即数组元素本身又是数组。例如：管理一组奥运志愿者的信息，小组包括5名志愿者，而每名志愿者的信息包括姓名、年龄、籍贯、学校、所属小组和编号等。此时就可以用嵌套数组来定义。格式如下： 数组变量名[子数组索引号][子数组中的元素索引号] 这是一个嵌套数组的例子。 var arr=[["zhangsan",23,"031256"],["Lisi",22,"031266"],["Wangwu",21,"031245"]]; 这个数组中包含3个子数组，每个子数组描述个人的信息，包括姓名、年龄、编号。通过arr[i]（i=0,1,2）来访问任何一个子数组，而通过arr[i][j]（i,j=0,1,2）来访问子数组中的任何一个元素。14.3 内部对象 14.3 内部对象 JavaScript中有一些常用的内部对象（也叫核心对象），在引用某些对象的属性和方法时不需要使用new关键字来创建对象实例，而是可以直接采用“对象名.成员”的格式来访问。这样的对象叫静态对象，与之对应，需要用new关键字来创建对象实例的对象，称之为动态对象。常用的内部对象有：Math对象、Date对象和String对象。14.3.1 Math对象14.3.1 Math对象JavaScript中提供了一些数学工具，可以大大的节省开发者的时间，而无须将精力耗费在求绝对值、平方根，以及三角函数值等数学处理上。这个对象与JavaScript中的其他对象不同，开发者无需通过new来生成对象实例。Math是静态对象，直接通过对象引用相应的属性和方法就行。 Math对象的属性通常是常数，其使用的方法很多，包括三角函数、反三角函数，还有一些预定义的数学函数。14.3.2 Date对象14.3.2 Date对象生活中，人们通过月历年历等方法计数“准确的某年某月某日”。在JavaScript中，有专门这样的一个对象用来描述日期和时间。这个对象是Date对象，它的日期和时间是按照GMT（即格林威治时间）来计量的。在计算机内部日期时间是一个整数，这个整数是从1970年1月1日0点0分0秒起，相对某个日期时间的以毫秒为单位的数值，通过这个数值可以计算出其相应的具体日期时间。 Date对象的最简单的构造函数是Date()，格式写法是： var today=new Date(); 上面的方法定义了Date对象的实例，也可以通过构造函数来表示过去或者将来的某个时间。例如： var past=new Date(2000,1,1); //创建一个对象实例，值是2000年1月1日 var tomorrow=new Date(2012,6,6); //创建一个对象实例，值是2012年6月6日14.3.3 String对象14.3.3 String对象String对象是动态对象，需要通过new String()创建对象实例来调用属性和方法。事实上任何一个字符串常量都是一个String对象，可以直接采用“字符串常量.属性（方法）”的格式来调用String对象的属性和方法。 typeof(new String("Beijing2008")); typeof("Beijing2008"); 前者返回的是object类型，而后者返回的是string类型。 常用的String对象属性有constructor属性和length属性。 constructor属性：表示创建对象的函数。例如： stringA= new String("Beijing2008"); //创建一个字符串对象实例 if(stringA.constructor==String) //检查是否创建了一个字符串对象实例 alert(stringA); 由运行可知，判断条件为真，执行了弹出对话框显示字符串的操作。另外一个属性是length属性，它是String对象最常用的属性之一。 length属性：返回字符串的长度，例如： stringA= new String("Beijing2008"); //创建一个字符串对象实例 leng=stringA.length; 或者也可以写为： stringA="Beijing2008"; //创建一个字符串对象实例 leng=stringA.length;14.4 window对象14.4 window对象window对象在文档对象模型的最高层，代表浏览器的整个窗口，是最大的一个对象，因为所有的事件都发生在窗口中。开发者可以通过window对象的属性、方法和事件处理来控制浏览器的显示效果。不必专门在JavaScript代码中创建window对象。当打开浏览器以后会自动打开一个窗口，这个窗口就是一个可用的window对象。在调用其属性和方法时，不需要用“window.xxx”的格式，可以省略window这个前缀。14.4.1 window对象属性14.4.1 window对象属性在JavaScript语言中，window属性有很多，接下来，通过这样的一个实例来观察这些属性的效果。这其中包含name属性、closed属性和opener属性。 name属性是设置或获取表明窗口名称的值。 closed属性是获取引用窗口是否已关闭。 opener属性是设置或获取创建当前窗口的引用。 具体在案例中的使用如代码14-3和代码14-4的页面，这是应用window对象的JavaScript程序。14.4.2 window对象方法14.4.2 window对象方法所谓方法即是如何通过window对象属性，来使这些属性发挥各自的作用。和属性一样，window对象属性所对应的使用方式也有很多。本节中通过一系列不同属性的使用方法，来了解一些常用window对象的属性调用。 open()，close()方法：产生新窗口的方法就是window.open()。例如： 01 var newWindow1=window.open("world.html","world","height=300,width=400"); 02 var newWindow2=window.open("../world.html","we","height=100, resizable=no"); 03 var newWindow3=window.open 04 ("http://www.sohu.com/","sohu","height=100,width=200,resizable=no, 05 menubar=yes,toolbar=no"); 上述例子定义了变量（如：newWindow1），当运行window.open()方法时将新窗口的引用赋给变量newWindow1，之后就可以通过引用newWindow1调用方法来控制新窗口。open()方法有3个参数，第一个参数是要打开的页面的URL，当新窗口与主窗口在同一目录下时，直接写文件名就行，如上述代码第1句。当新窗口与主窗口不在同一目录下时，则写新窗口的相对路径，如代码第2句。当然新窗口也可以是绝对路径或者是http地址，如第3个示例。第2个参数是新窗口的名称，如果打开新窗口时为空，之后还可通过window.name设置。其中第3个参数是窗口风格的设置。14.4.3 事件14.4.3 事件在操作浏览器时，大多数使用者多半的动作都是通过鼠标操作引起的，另一些就是敲击键盘引起，因为鼠标和键盘是日常生活中最常用的输入设备。那么用户与浏览器交互怎么实现？输入设备引起的事件怎么处理？什么时候处理？这就得求助于事件和事件处理程序了。window对象的事件是最令人入迷的部分之一。没有事件处理程序就会显得死板，不够灵活。 window对象的事件处理程序要放在标签的时间属性设置中，如： onload="window_onload()14.5 document对象14.5 document对象document对象是window对象的一个对象属性，代表浏览器窗口中装载的整个HTML文档。文档中的每个HTML元素都对应着JavaScript对象。设计者要结合HTML标签和JavaScript产生最佳效果。因为document代表整个HTML文档，是其他HTML元素的根结点，其他节点可以通过document引用。document的属性和方法一般来设置页面文档的外观和内容。14.5.1 document对象属性14.5.1 document对象属性document对象的属性实现的功能使用HTML中的标签也可以实现，从其表面效果来看是差不多的，但是与事件处理程序结合使用的时候就体现出了二者的不同。常用的属性如表14.2所示。14.5.2 document对象方法14.5.2 document对象方法document对象的方法最常用的就是writeln()方法，以下是一些常用的document对象方法，如表14.3所示。14.5.3 document对象事件14.5.3 document对象事件document对象常用的事件处理程序就是window对象中介绍的通用事件，此处不再赘述。代码14-8通过看一个document对象的例子，来演示其属性和方法的使用。 【本节示例参考：资料光盘\第14章\14-8 document对象的属性和方法document.html】14.6 案例：一个运用JavaScript实现的动态页面14.6 案例：一个运用JavaScript实现的动态页面通过前面的学习已经知道JavaScript可以用来实现表单验证，例如登陆某个论坛时需要填写用户名和密码；还可以响应鼠标单击事件、键盘敲击事件、窗口移动事件、窗口大小改变事件、文档载入事件、文档卸载事件等等。 这就是JavaScript为什么能创建动态HTML页面，从而实现用户与浏览器交互。使得在有限的页面中展现更多的内容，使网站更加生动，吸引更多的浏览者，给用户良好的体验。14.6.1 能够调用JavaScript方法的HTML页面14.6.1 能够调用JavaScript方法的HTML页面在了解了HTML、CSS和JavaScript后，就可以动手设计一个漂亮的页面了，这个漂亮除了指外观，还有功能和实用的感觉。来看实例吧，代码14-10中尽可能的包含了前面介绍的对象及其属性、方法和事件。 【本节示例参考：资料光盘\第14章\14-10 JavaScript实现的动态页面goodLogin.html】14.6.2 用JavaScript实现的方法14.6.2 用JavaScript实现的方法代码14-10是本案例的主体框架，设置该网页的样式和结构。在网页头部实现了显示当前时间的功能。其中登录验证函数checkChar、checkName和login则在下面的JavaScript代码中实现，另外，图标在窗体中移动的功能也是由代码14-11实现。14.6.3 演示动态页面效果14.6.3 演示动态页面效果在运行时，将代码14-11放在代码14-10的任意部分都可以，这体现了JavaScript的一个特点，因为JavaScript代码是放在标签对之间，因此不管放在什么位置都具有较好的可读性。代码整合后，使用浏览器打开页面。如图14.19所示。 图中的标题上显示着当前时间，有供用户填写用户名和密码的文本框。还有一张笑脸的GIF图像浮动在文字上方，并且在各个窗口间不停移动。当碰到窗口边界时，图像会改变移动的方向，如同碰到墙壁被弹开的一样。 在这个页面中，如果用户在用户名中输入由字母组成的名字可以的，但是当输入数字时就弹出警告对话框提示“必须输入a-z的字母”，这是通过触发onkeypress事件来实现的，当事件被触发时调用checkChar()函数检查按键是否是字母。如图14.20所示。14.7 小结14.7 小结本章对于JavaScript的探讨仅仅是停留在帮助读者能够从HTML知识过渡到JavaScript的学习，是为了帮助读者今后学习JavaScript做一个入门的启发。本章介绍的知识点有， 对象和DOM的概念。有一个宏观的概念，了解学习的知识在网页设计中的位置。 JavaScript的数组的定义和使用方法。 JavaScript中常用的三个内部对象：Math对象、Date对象和String对象。 处在文档对象模型的最高层，代表浏览器的整个窗口的window对象及其属性、方法和事件，这部分用处很大，所以花了很大篇幅来介绍。 最后在案例中介绍了一个实用的文档对象——document对象，及其属性、方法和事件。 在第15章中，将介绍几种常见的帮助页面设计人员工作的得力助手——可视化编辑软件。设计人员利用这些工具，可以实现更快的工作效率和更好的设计效果。14.8 本章习题14.8 本章习题一、填空题 1．DOM指________________。 2．内部对象有3种对象，分别是________、________和________。 3．数组的定义是________________________________________。 二、选择题 1．在内部对象中，用来描述日期的对象是（ ） A Math对象 B Date对象 C String对象 D window对象 2．window对象的方法中，alert()方法是指（ ） A 产生新窗口 B 弹出一个警告对话框显示参数 C 显示一个具有OK和Cancel按钮的对话框 D 显示一个用户可以输入信息的对话框，并返回用户输入的内容