《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-10_第1页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-10_第2页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-10_第3页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-10_第4页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-10_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第十章对象化编程

目标理解对象的概念。对时间、文字、图像属性的应用。掌握基本对象的应用和自定义对象。掌握Document对象和window对象的属性、方法。概述、专业术语本章介绍JavaScript中的对象：如何自定义对象，对象的引用，对象的属性和方法的引用，数组的使用。JavaScript中最常用的内置对象，它们是时间、文字、图像、Math等等术语词汇表定义在此章节中使用的术语自定义对象JavaScript对象的生成1）JavaScript的核心对象：包括同基本数据类型相关的对象，例如：String、Number等；以及其他能简化JavaScript操作的对象，例如Math、Date对象。JavaScript核心对象见右表

核心对象说明Array提供一个数组模型，用来储存大量地址连续类型相同或相似的数据，将同类的数据组织在一起进行相关操作Boolean对应于原始逻辑数据类型，其所有的属性和方法继承自Object对象。值为真表示true，值为假表示falseDate提供了操作日期和时间的方法，可以表示从微秒到年的所有时间和日期。使用Date读取日期和时间时，其结果依赖于客户端的时钟Function提供构造新函数的模板，JavaScript中构造的函数是Function对象的一个实例，通过函数名实现对该对象的引用Math内置的Math对象可以用来处理各种数学运算，且定义了一些常用的常数。如：PI表示圆周率的值。各种运算被定义为Math对象的内置方法，可直接调用Number对应于原始数据类型的内置对象，对象的实例返回某数值类型Object包含所有JavaScript对象所共享的基本功能，并提供生成其他对象如Boolean等对象的模板和基本操作方法String和原始的字符串类型相对应，包含多种方法实现字符串操作。如：字符串检查、抽取字符串、连接字符串等自定义对象2）浏览器对象：它覆盖的范围非常广泛，包括了被绝大多数浏览器所支持的对象，如用于控制浏览器窗口和用户交互界面的window对象。3）自定义对象：是用户为实现个性化的需要，自己定义的对象。和其他对象一样，我们可以自己定义对象的属性、方法和事件。4）文本对象：顾名思义就是文本域构成的对象。它在DOM中定义，同时被赋予了很多特殊的方法，如：InsertData()、AppendData()等。自定义对象对象的构成JavaScript中的对象由属性和方法两个基本的元素构成。对象的使用和创建JavaScript提供了几个操作对象的语句、关键字及运算符。(1)for…in语句(2)with语句(3)this关键字(4)new运算符自定义对象(1)使用点(.)运算符university.Name="云南省";university.City="昆明市";(2)通过对象的下标实现引用university[0]="云南省";university[1]="昆明市";functionshowuniversity(object)for(varj=0;j<2;j++)document.write(object[j]);(3)通过字符串的形式实现university["Name"]="云南省";university["City"]="昆明市";2.对象方法的引用objectName.methods()methods()方法实质上是一个函数。如引用university对象中的showmy()方法，则可使用：document.write(university.showmy());with(Math){document.write(cos(35));document.write(cos(80));}自定义对象JavaScript中的数组1.数组（Array）对象在JavaScript中，数组是一种特殊的变量，它可以一次保存多个值。2.创建数组实例

varmyStudent=newArray();myStudent[0]="张三";myStudent[1]="李四";myStudent[2]="王五";自定义对象另外JavaScript中还提供了几个操作数组的函数，我们常用的函数如下：

join()——将数组中的所有元素合并到一个字符串中；

pop()——移除数组的最后一个元素；

push()——在数组的最后插入一个新元素；

reverse()——颠倒数组元素的排列顺序；

shift()——移除数组的第一个元素；

slice()——从一个数组中选择元素；

sort()——对数组进行排序。自定义对象三、对象元素的访问通过对象位置访问对象元素示例代码见课本10-1自定义对象在浏览器中打开该网页，效果如下：点击第一个按钮，出现下面的对话框：

图10-2点击第一个按钮出现的对话框然后关闭此对话框，点击第二个按钮，出现下面的对话框

图10-3点击第二个按钮出现的对话框自定义对象通过name属性访问对象元素通过对象名访问对象元素是我们最易理解的方式，它比较形象和直观。通过下面的实例，我们将很快的掌握利用此方式访问元素的基本格式和方法。示例代码见课本10-2在浏览器中打开该网页，单击按钮，显示下面的效果：DOM模型介绍HTML文档对象模型定义了一整套完整的标准方法来访问和操纵HTML文档。DOM是DocumentObjectModel的缩写，它是由万维网联盟定义的。现在各种流行的浏览器都支持DOM标准，这样使得JavaScript能够更好地控制整个网页、实现各种网页功能以及制作各种特效。（一）什么是DOM（二）DOM对象模型window对象window对象的方法窗口（window）对象所提供的方法主要有以下2个：（1）open(“URL”、“窗口名称”、“窗口特征”)

该方法用于打开一个新窗口，其中有3个参数。其中窗口特征：窗口的特征参数，即控制窗口的显示样式，详见下表。（2）close()该方法用于关闭一个窗口，没有参数设置。参数名说明width控制窗口的宽度height控制窗口的高度scrollbars控制是否显示滚动条toolbar控制是否显示工具栏，yes为显示，no为不显示menubar控制是否显示菜单栏location控制是否显示地址栏，yes为显示，no为不显示directories控制是否更新信息按钮，yes为显示，no为不显示status控制是否显示状态栏，yes为显示，no为不显示resizable控制是否固定窗口大小，yes为允许，no为不允许window对象window对象的应用下面就以实例来看看窗口对象的具体使用方法。1.打开新窗口在下面的例子中我们用window.open()方法来打开一个新的页面。示例代码见课本10-4window对象全屏显示示例代码见课本10-6效果如下window对象3.打开窗口的动态变化示例代码见课本10-7效果如下window对象4.窗口内边框的设置示例代码见课本10-8window对象5.关闭窗口示例代码见课本10-9Document对象6.窗口焦点的控制示例代码见课本10-10效果如下Document对象该网页调用的xt.htm文件内容如下。示例代码10-11：xt.html

<html><head><title>失去焦点时自动关闭</title></head><bodyonBlur="window.close()"><imgsrc="pic.jpg"width="306"height="190"/></body></html>window对象History和Location对象

History对象的go(x)方法也能实现浏览器的前进和后退功能，x说明前进或者后退的页数。当x为正时表示前进，等价于forward()方法，x为负时表示后退，等价于back()方法。forward()、back()方法和go()方法是History对象的常用方法。代码见课本10-12Document对象在浏览器中打开这个网页，其效果如图10-13所示。该网页调用的history_goback.html文件内容见课本10-13。Document对象Location对象也是在JavaScript运行时自动生成创建的，它相当于浏览器中的地址栏，包含有关于当前URL地址的信息，提供了一种重新加载当前URL的方法，此外，它还可以解析URL。属性名说明host服务器名hostname通常等于host，有时会省略wwwhref返回完整的URL信息reload重新加载当前页面replace替换当前文档Document对象Document是浏览器的HTML文档，通过Document对象可以访问HTML文档中的所有元素和事件，在浏览器对象模型中起着及其重要的作用。它有哪些相关属性和方法来实现自身的功能呢？下面我们将详细学习它的有关属性和方法。示例代码见课本10-14其效果如图10-14所示。Document对象（二）制作浮动的广告图片示例代码见课本10-15效果如下Document对象制作带关闭按钮的浮动窗口cookie的使用制作全选效果时间对象1.时间的显示方法名功能getYear()获取当前年份getMonth()获取当前月份getDate()获取当前日数getHours()获取小时数getMinutes()获取分钟数getSeconds()获取当前秒数getTime()获取当前毫秒数getDay()获取当前星期数方法名功能setYear()设置年份setMonth()设置月数setDate()设置日数setHours()设置小时数setMinutes()设置分钟数setSeconds()设置秒数setTime()设置毫秒数2.日期的显示总结JavaScript中对象自身引用的关键字“this”，创建对象的关键字是“new”。

JavaScrpt中对象的属性、方法引用要用“.”。

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论