个人网页设计与制作-毕业论文_第1页
个人网页设计与制作-毕业论文_第2页
个人网页设计与制作-毕业论文_第3页
个人网页设计与制作-毕业论文_第4页
个人网页设计与制作-毕业论文_第5页
已阅读5页,还剩40页未读 继续免费阅读

下载本文档

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

文档简介

1、. ;. 西安电子科技大学网络学院毕业设计西安电子科技大学网络学院毕业设计 个人网页设计与制作 二二一一年九月年九月 . ;. 摘摘 要要 本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网 页设计与制作语言的基础上,着重使用 JavaScript 作为工具语言进行网页设计与 制作的实际操作,分别对基于对象的 JavaScript 语言、内部对象系统的使用及 WEB 页面信息交互窗口和框架进行详细描述,并利用具体的实例进行验证。 本论文主要章节如下,第一章:绪论,本章主要介绍网页设计的相关知识。 第二章:网页设计语言概述,本章主要介绍网页设计的语言HTML,以及用 于编辑 HT

2、ML 语言的软件,为后续工作奠定基础。第三章:基于对象的 JavaScript 语言,本章介绍了基于对象的 JavaScript 中常用内部对象属性、方法的 使用。第四章:内部对象系统的使用,本章主要介绍使用浏览器的内部对象系统, 可实现与 HTML 文档进行交互。第五章:WEB 页面信息的交互窗体与框架, 本章主要介绍实现网页的动态交互,必须掌握有关窗体对象(Form)和框架对象 (Frames)更为复杂的知识。 关键词:关键词: 网页制作 网页设计 HTML ASP Abstract Methods, tools of web design and production are resea

3、rched and studied. based on introducing the web design and production of language, JavaScript language are used as a tool to operate the actual web design and production. Object-based JavaScript language and the use of internal object system and interactive WEB page of information - window and frame

4、 are decrypted in detail. Concrete examples are verified. The main sections of this paper are as follows, Chapter I: Introduction, this chapter introduces the web design knowledge. Chapter II: an overview of web design language, this chapter introduces the language of web design - HTML, as well as s

5、oftware for editing HTML language, lay the foundation for the follow-up. Chapter III: object-based JavaScript language, this chapter introduces the JavaScript based on commonly used objects within the object properties, methods of use. Chapter IV: the use of internal object system, this chapter intr

6、oduces the browsers internal object system can be realized to interact with HTML documents. Chapter V: WEB page interaction information - form and framework, this chapter introduces the realization of dynamic interactive web pages, you must master the form object (Form) and the framework of the obje

7、ct (Frames) more complex knowledge. . ;. . ;. 目目 录录 第一章 绪论 .1 1.1 网页设计概述.1 1.2 网页设计的要素.1 1.3 本论文工作.2 第二章 网页设计语言概述 .3 2.1 HTML 语言介绍 .3 2.2 常用的 HTML 语言编辑软件.4 2.3 本章小结.9 第三章 基于对象的 JAVASCRIPT 语言 .10 3.1 对象的基础知识.10 3.2 常用对象的属性和方法 .13 3.3 本章小结.18 第四章 内部对象系统的使用 .19 4.1 浏览器对象层次及其主要作用 .19 4.2 文档对象功能及其作用 .19

8、4.3 内部对象系统实例 .21 4.4 本章小结.23 第五章 WEB 页面信息的交互窗体与框架.24 5.1 窗体基础知识 .24 5.2 窗体中的基本元素.25 5.3 窗体对象实例 .29 5.4 框架.32 5.5 框架的访问.34 5.6 本章小结.37 第六章 结 论 .38 致 谢 .39 参考文献 .40 . ;. . ;. 第一章第一章 绪论绪论 随着 21 世纪的到来,人们更深切地感受到计算机在生活和工作中的作用越 来越重要,越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的 需要,更是事业发展的需要。网页设计与制作是计算机能力的具体表现,本章 主要介绍网页设计的

9、相关知识。 1.11.1 网页设计概述网页设计概述 网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开 展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去 谈电子商务是不可能的。企业的网址被称为“网络商标” ,也是企业无形资产的 组成部分,而网站是 INTERNET 上宣传和反映企业形象和文化的重要窗口。 1.21.2 网页设计的要素网页设计的要素 网页设计的两大要素是:整体风格和色彩搭配。 一、确定网站的整体风格 在这里,我提供给大家一些参考经验: 1将你的标志 logo,尽可能的放在每个页面上最突出的位置。 2突出你的标准色彩。 3总结一句能反映贵站精髓

10、的宣传标语! 4相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在 网站中出现的所有标题字的阴影效果的设置应该是完全一致的! 二、网页色彩的搭配 1用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度, 这样的页面看起来色彩统一,有层次感。 2用两种色彩。先选定一种色彩,然后选择它的对比色。 3用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿; 或者土黄,土灰,土蓝。 在网页配色中,还要切记一些误区: 1不要将所有颜色都用到,尽量控制在三至五种色彩以内。 2背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便 突出主要文字内容。 . ;. 1.31

11、.3 本论文工作本论文工作 本论文主要是对网页设计与制作的语言基础上进行探讨,主要内容如下: 第一章:绪论 本章主要介绍网页设计的相关知识。 第二章:网页设计语言概述 本章主要介绍网页设计的语言HTML,以及用于编辑 HTML 语言的软 件,为后续工作奠定基础。 第三章:基于对象的 JavaScript 语言 本章介绍了基于对象的 JavaScript 中常用内部对象属性、方法的使用。 第四章:内部对象系统的使用 本章主要介绍使用浏览器的内部对象系统,可实现与 HTML 文档进行交互。 它的作用是将相关元素组织包装起来,提供给程序设计人员使用,从而减轻编 程人的劳动,提高设计 Web 页面的能

12、力。 第五章:WEB 页面信息的交互窗体与框架 本章主要介绍实现网页的动态交互,必须掌握有关窗体对象(Form)和框 架对象(Frames)更为复杂的知识。 第六章:总结 . ;. 第二章第二章 网页设计语言概述网页设计语言概述 2.1 HTMLHTML 语言介绍语言介绍 HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标 示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。 HTML 文本是由 HTML 命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。HTML 的结构包括头部(Head) 、主体

13、(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明 的具体内容。 2.1.1 HTML 语言的特点 HTML 文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入, 这也是 WWW 盛行的原因之一,HTML 语言的特点如下: 1、简易性,HTML 版本升级采用超集方式,从而更加灵活方便。 2、可扩展性,HTML 语言的广泛应用带来了加强功能,增加标识符等要求, HTML 采取子类元素的方式,为系统扩展带来保证。 3、平台无关性。虽然 PC 机大行其道,但使用 MAC 等其他机器的大有人 在,HTML 可以使用在广泛的平台上,这也是 WWW 盛行的另一个原因。 2.1

14、.2 HTML 语言的编辑软件 HTML 的本质是文本,需要浏览器的解释,HTML 的编辑器大体可以分为 三种: 1、基本编辑软件,使用 WINDOWS 自带的记事本或写字版都可以编写, 当然,如果你用 WPS 来编写,也可以。不过存盘时请使用.htm 或.html 作为扩 展名,这样浏览器就可以解释执行了。 2、半所见即所得软件,这种软件能大大提高开发效率,它可以使你在很短 的时间内做出 Homepage,且可以学习 HTML,这种类型的软件主要有 HOTDOG,还有国产的软件网页作坊。 3、所见即所得软件,使用最广泛的编辑器,完全可以一点不懂 HTML 的 知识就可以做出网页,这类软件主要

15、有 Frontpage,DREAMWEAVER、Delphi、Eclipse、UltraEdit。 一个 HTML 文件由一个 HTML 元素组成,即文件以开始。以 . ;. 结束,文档中其他元素及其属性的声明都是 HTML 的元素体。 HTML 元素的元素体和元素体由两大部分组成,即头元素 和体元素。头元素和体元素的元素体又由其 他元素、文本和注释等组成。 一个标准的 HTML 文件应该具备如下结构: 标记一个 HTML 文件的开始 HTML 文件的文件头部分开始 文件头部分内容 HTML 文件的文件头部分结束 HTML 文件的文件体部分开始 文件体 HTML 文件的文件部分结束 标记该 H

16、TML 文件结束 有些元素只能出现在头元素中,如 meta、title 等元素,而大多数的元素只 能出现在体元素中。在头元素中的元素表示的是该 HTML 文件的一般信息,比 如该文件的标题、来源、作者、版本、字符集和关键字等,这些元素与书写的 顺序无关,它们只是表明该 HTML 文件的属性值。但出现在元素体中的元素则 是要注意书写顺序的,改变了它们的书写顺序就会改变 HTML 文件在浏览器上 输出的形式。 2.2 常用的常用的 HTMLHTML 语言编辑软件语言编辑软件 2.2.1 Dreamweaver Dreamweaver 是美国 Adobe(原 Macromedia,2005 年被 A

17、dobe 收购)公司开 发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对 专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作 出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的 WYSIWYG 编辑器,更是优秀的代码编辑器,有代码加亮,代码提示等丰富功 能,提供各种示例代码,并支持 Javascript,PHP,ASP,JSP 等多种脚本语言。最新 版本为 CS4,发布于 2008 年 9 月。 2.2.2 ASP ASP 技术是 Microsoft 公司开发的一套全新的服务器端脚本程序环境。它可 以根据客户端的不同请求,在服务器端经过相应的

18、ASP 程序处理生成不同的静 . ;. 态 HTML 页面并穿回给浏览器。ASP 自身有很多优点,这些优点使它成为了当 今世界网络上应用最多的脚本设计环境。 1、什么是 ASP ASP 的全称是 Active Server Pages,中文名称叫做动态服务器网页,其功能 在于可以使用它来开发运行在 Windows 服务器平台上的动态网页和网页。尽管 我们常把“ASP 脚本”挂在嘴边,但 ASP 既不是一种编程语言,也不是开发工 具软件,同样也不是一种应用程序,它实际上是一种开发动态网页的技术。 2、ASP 的脚本语言 ASP 的脚本语言可以是 VBScript 或者 Jscript,也可以是两

19、者的结合,所以 任何一种文本编辑器都能编辑 ASP 脚本,当然不同的编辑器开发调试效率是不 一样的。和通常的 VBScript 和 Jscript 应用程序不同,ASP 所有的程序都是在服 务器端运行的,而不是在浏览器或者客户端执行的,这样用户就不必担心自己 的浏览器能否运行所编写的 ASP 代码了。 程序执行完毕,服务器仅将执行的结果返回给客户端浏览器,这样即使客 户端的浏览器不支持 VBScript 或 Jscript,但是仍然可以浏览动态的网页。 VBScript 是 IIS 默认的脚本语言,当然可以在 IIS 中更改默认的脚本语言。如果 改成 Jscript,那么默认的脚本语言就是 J

20、script。因为 VBScript 在属性和方法上 的灵活表现方式更适合作为服务器的脚本,所以推荐大家用 VBScript 作为 ASP 的默认脚本语言。 3、ASP 的运行环境 由于 ASP 是一种服务器的脚本语言,所以并不是所有的 Web 服务器都具 有这个功能。ASP 是由 Microsoft 公司推出的,当然在目前页只有 Microsoft 公 司推出的服务器能实现 ASP 的强大功能,其他的一些服务器在安装了 ASP 组 件后才能实现这个功能。 Microsoft 公司推出的支持 ASP 的 Web 服务器有以下几个: Microsoft Internet Information

21、Server version (IIS); Microsoft Peer Web Server; Microsoft Personal WebServer (PWS); 其中前两个主要是为 Microsoft 公司的 Windowns NT /2000 /XP 系统开发的, 当然它们的功能以及稳定性都要强很多。目前大型的站点大多是有 IIS 作为服 务器,而 PWS 是为一般的 PC 用户开发的。 既然 ASP 是在服务器端执行的,因此访问这些以.asp 为后缀的文件时,就 不能使用实际的物理路径,而只能用虚拟路径。使用虚拟路径访问 ASP 最简单 的方法就是将 ASP 文件拷贝到 IIS 的

22、安装目录中 (默认的安装目录为 . ;. C:Inetpubwwwroot),然后就可以通过 IE 浏览器直接访问了。 访问文件名为“index.asp”的 ASP 文件,如果在 IE 浏览器中用物理路径访 问,本来期望的结果是不会出现的,浏览器只会显示普通的 HTML 页面。为此 应该将“index.asp”文件拷贝到服务器目录下,然后通过虚拟路径来访问该页 面。如果程序没有错的话即可看到预期的效果。 4、ASP 的工作原理 通过上述介绍,大家应该了解到一个 ASP 页面从服务器端传送到客户端的 原理与一般静态 HTML 页面是不同的。 从客户端的一 URL 请求到服务器反馈一个页面给浏览器

23、,其大致的流程如 下: (1) 用户在客户端浏览器中输入一个网址,与服务器建立连接。 (2) 服务器根据用户请求的网址在硬盘上找到相应的文件。 (3) 如果文件是普通的 HTML 文档,那么服务器将直接把该文件传送到客 户端。 (4) 如果文件是服务器脚本,那么服务器将运行这个文件。如果需要查询 数据库,则通过 ADO 组件连接 ODBC 或 DSN 数据源访问数据库。进行了一系 列的运算和解释后,将最终结果形成一个纯 HTML 文档。 (5) 把这个文档传送到客户端。 (6) 结束这次连接。 由于最后传送给客户端的是一个纯 HTML 文本文件,因此用户在浏览器上 是看不到 ASP 文件的源代

24、码的。 5、ASP 的开发工具 使用 ASP 进行网路编程,选择一个合适的开发工具是很重要的。ASP 对开 发工具没有特殊的要求,只要具有文本编辑器功能的工具均可。因此 ASP 的开 发工具很多,比较好的由 Visual Interdev、Dreamweaver 等。 Dreamweaver 是一个集成的 Web 应用软件开发系统,包括开发、发行以及 管理数据库驱动的 Web 应用软件所需的所有的功能,所以一般情况下推荐使用 Dreamweaver。 2.2.3 JavaScript 一、JavaScript 概述 JavaScript 是一种基于对象(Object)和事件驱动(Event D

25、riven)并具有安全性 能的脚本语言。使用它的目的是与 HTML 超文本标记语言、Java 脚本语言 (Java 小程序)一起实现在一个 Web 页面中链接多个对象,与 Web 客户交互 . ;. 作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的 HTML 语言中实现的。它的出现弥补了 HTML 语言的缺陷,它是 Java 与 HTML 折衷的选择,具有以下几个基本特点: 1、是一种脚本编写语言 JavaScript 是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本 语言一样,JavaScript 同样已是一种解释性语言,它提供了一个易的开发过程。 它的基本结构形式与

26、 C、C+、VB、Delphi 十分类似。但它不像这些语言 一样,需要先编译,而是在程序运行过程中被逐行地解释。它与 HTML 标识结 合在一起,从而方便用户的使用操作。 2、基于对象的语言。 JavaScript 是一种基于对象的语言,同时以可以看作一种面向对象的。这意 味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对 象的方法与脚本的相互作用。 3、简单性 JavaScript 的简单性主要体现在:首先它是一种基于 Java 基本语句和控制 流之上的简单而紧凑的设计, 从而对于学习 Java 是一种非常好的过渡。其次它 的变量类型是采用弱类型,并未使用严格的数据类型。

27、4、安全性 JavaScript 是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存 入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息 浏览或动态交互。从而有效地防止数据的丢失。 5、动态性的 JavaScript 是动态的,它可以直接对用户或客户输入做出响应,无须经过 Web 服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓 事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为 “事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当 事件发生后,可能会引起相应的事件响应。 6、跨平台性 JavaScr

28、ipt 是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计 算机,并支持 JavaScript 的浏览器就可正确执行。从而实现了“编写一次,走遍 天下”的梦想。 实际上 JavaScript 最杰出之处在于可以用很小的程序做大量的事。无须有 高性能的电脑,软件仅需一个字处理软件及一浏览器,无须 WEB 服务器通道, 通过自己的电脑即可完成所有的事情。 . ;. 总之,JavaScript 是一种新的描述语言,它可以被箝入到 HTML 的文件之 中。 JavaScript 语言可以做到回应使用者的需求事件 (如:form 的输入) ,而 不用任何的网路来回传输资料,所以当一位使用者输入一项

29、资料时,它不用经 过传给伺服端 (server)处理,再传回来的过程,而直接可以被客户端 (client) 的 应用程式所处理。 JavaScript 和 Java 很类似,但到底并不一样! Java 是一种比 JavaScript 更复杂许多的程式语言,而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那麽注重程式技巧,所以许多 Java 的特性在 Java Script 中并不 支援。 二、JavaScript 和 Java 的区别 虽然 JavaScript 与 Java 有紧密的联系,但却是两个公司开发的不同的两个 产品。Java 是 SUN 公司推出

30、的新一代面向对象的程序设计语言,特别适合于 Internet 应用程序开发;而 JavaScript 是 Netscape 公司的产品,其目的是为了扩 展 Netscape Navigator 功能,而开发的一种可以嵌入 Web 页面中的基于对象和事 件驱动的解释性语言, 它的前身是 Live Script;而 Java 的前身是 Oak 语言。下 面对两种语言间的异同作如下比较: 1、基于对象和面向对象 Java 是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对 象。 JavaScript 是种脚本语言,它可以用来制作与网络无关的,与用户交互作用 的复杂软件。它是一种基于对象(O

31、bject Based)和事件驱动(Event Driver)的 编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。 2、解释和编译 两种语言在其浏览器中所执行的方式不一样。Java 的源代码在传递到客户 端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解 释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。 JavaScript 是一种解释性编程语言,其源代码在发往客户端执行之前不需经 过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。 3、强变量和弱变量 两种语言所采取的变量是不一样的。 Java 采用强类型变量检查,即所有变量在编

32、译之前必须作声明。如: Integer x; String y; . ;. x=1234; x=4321; 其中 X=1234 说明是一个整数,Y=4321 说明是一个字符串。 JavaScript 中变量声明,采用其弱类型。即变量在使用前不需作声明,而是 解释器在运行时检查其数据类型,如: x=1234; y4321; 前者说明 x 为其数值型变量,而后者说明 y 为字符型变量。 4、代码格式不一样 Java 是一种与 HTML 无关的格式,必须通过像 HTML 中引用外媒体那么 进行装载,其代码以字节代码的形式保存在独立的文档中。 JavaScript 的代码是一种文本字符格式,可以直接嵌

33、入 HTML 文档中,并 且可动态装载。编写 HTML 文档就像编辑文本文件一样方便。 5、嵌入方式不一样 在 HTML 文档中,两种编程语言的标识不同,JavaScript 使用 .来标识,而 Java 使用.来标识。 6、静态联编和动态联编 Java 采用静态联编,即 Java 的对象引用必须在编译时的进行,以使编译器 能够实现强类型检查。 JavaScript 采用动态联编,即 JavaScript 的对象引用在运行时进行检查,如 不经编译则就无法实现对象引用的检查。 2.3 本章小结本章小结 本章主要介绍了网页设计语言 HTML 和 JavaScript, . ;. 第三章第三章 基于

34、对象的基于对象的 JavaScriptJavaScript 语言语言 JavaScript 语言是基于对象的(Object-Based) ,而不是面向对象的(object- oriented) 。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、 继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对 象统一起来,从而形成一个非常强大的对象系统。 虽然 JavaScript 语言是一门基于对象的,但它还是具有一些面向对象的基 本特征。它可以根据需要创建自己的对象,从而进一步扩大 JavaScript 的应用 范围,增强编写功能强大的 Web 文档。 3.1 对象的基础知

35、识对象的基础知识 3.1.1 对象的基本结构 JavaScript 中的对象是由属性(properties)和方法(methods)两个基本的元素的 构成的。前者是对象在实施其所需要行为的过程中,实现信息的装载单位,从 而与变量相关联;后者是指对象能够按照设计者的意图而被执行,从而与特定 的函数相联。 3.1.2 引用对象的途径 一个对象要真正地被使用,可采用以下几种方式获得: (1)引用 JavaScript 内部对象; (2)由浏览器环境中提供; (3)创建新对象。 这就是说一个对象在被引用之前,这个对象必须存在,否则引用将毫无意 义,而出现错误信息。从上面中我们可以看出 JavaScri

36、pt 引用对象可通过三种 方式获取。要么创建新的对象,要么利用现存的对象。 3.1.3 有关对象操作语句 JavaScript 不是一纯面向对象的语言,它设有提供面向对象语言的许多功能, 因此 JavaScript 设计者之所以把它你“基于对象”而不是面向对象的语言,在 JavaScript 中提供了几个用于操作对象的语句和关键字及运算符。 (1) 、For.in 语句 格式如下: For(对象属性名 in 已知对象名) . ;. 说明: 该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将 一个已知对象的所有属性反复置给一个变量;而不是使用计数器来实现的。 该语句的优点就是无需知

37、道对象中属性的个数即可进行操作。 例:下列函数是显示数组中的内容: Function showData(object) for (var X=0; X30;X+) document.write(objecti); 该函数是通过数组下标顺序值,来访问每个对象的属性,使用这种方式首 先必须知道数组的下标值,否则若超出范围,则就会发生错误。而使 For.in 语 句,则根本不需要知道对象属性的个数,见下: Function showData(object) for(var prop in object) document.write(objectprop); 使用该函数时,在循环体中,For 自动将

38、的属性取出来,直到最后为此。 (2)with 语句 使用该语句的意思是:在该语句体内,任何对变量的引用被认为是这个对 象的属性,以节省一些代码。 with object . 所有在 with 语句后的花括号中的语句,都是在后面 object 对象的作用域的。 (3)this 关键字 this 是对当前的引用,在 JavaScript 由于对象的引用是多层次,多方位的, 往往一个对象的引用又需要对另一个对象的引用,而另一个对象有可能又要引 用另一个对象,这样有可能造成混乱,最后自己已不知道现在引用的那一个对 象,为此 JavaScript 提供了一个用于将对象指定当前对象的语句 this。 (4

39、)New 运算符 虽然在 JavaScript 中对象的功能已经是非常强大的了。但更强大的是设计 人员可以按照需求来创建自己的对象,以满足某一特定的要求。使用 New 运算 符可以创建一个新的对象。其创建对象使用如下格式: Newobject=NEW Object(Parameters table); 其中 Newobject 创建的新对象:object 是已经存在的对象; parameters table 参数表;new 是 JavaScript 中的命令语句。 . ;. 如创建一个日期新对象 newData=New Data() birthday=New Data (December 12

40、.1998) 之后就可使 NewData、birthday 作为一个新的日期对象了。 3.1.4 对象属性的引用 对象属性的引用可由下列三种方式之一实现: (1)使用点(.)运算符 university.Name=“云南省” university.city=“昆明市” university.Date=1999 其中 university 是一个已经存在的对象,Name、City、Date 是它的三个属 性,并通过操作对其赋值。 (2)通过对象的下标实现引用 university0=“云南” university1=“昆明市” university2=1999 通过数组形式的访问属性,可以使用循

41、环操作获取其值。 function showunievsity(object) for (var j=0;j2; j+) document.write(objectj) 若采用 For.in 则可以不知其属性的个数后就可以实现: Function showmy(object) for (var prop in this) docament.write(thisprop); (3)通过字符串的形式实现 universityName=“云南” universityCity=“昆明市” universityDate=1999 3.1.5 对象的方法的引用 在 JavaScript 中对象方法的引用是

42、非常简单的。 ObjectName.methods() 实际上 methods()=FunctionName 方法实质上是一个函数。 如引用 . ;. university 对象中的 showmy()方法,则可使用: document.write (university.showmy() 或:document.write(university) 如:引用 math 内部对象中 cos()的方法 则: with(math) document.write(cos(35); document.write(cos(80); 若不使用 with 则引用时相对要复杂些: document.write(Ma

43、th.cos(35) document.write(math.sin(80) 3.2 常用对象的属性和方法常用对象的属性和方法 JavaScript 为我们提供了一些非常有用的常用内部对象和方法。用户不需要 用脚本来实现这些功能。这正是基于对象编程的真正目的。 在 JavaScript 提供了 string(字符串) 、math(数值计算)和 Date(日期) 三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提 供了非常有利的条件。 3.2.1 常用内部对象 在 JavaScript 中对于对象属性与方法的引用,有两种情况:其一是说该对 象是静态对象,即在引用该对象的属性或方

44、法时不需要为它创建实例;而另一 种对象则在引用它的对象或方法是必须为它创建一个实例,即该对象是动态对 象。 对 JavaScript 内部对象的引用,以是紧紧围绕着它的属性与方法进行的。 因而明确对象的静动性对于掌握和理解 JavaScript 内部对象是具有非常重要的 意义。 1、串对象 string 对象:内部静态性。 访问 properties 和 methods 时,可使用(.)运算符实现。 基本使用格式:objectNp/methods (1)串对象的属性 该对象只有一个属性,即 length。它表明了字符串中的字符个数,包括所 有符号。例: . ;. mytest=T

45、his is a JavaScript mystringlength=mytest.length 最后 mystringlength 返回 mytest 字串的长度为 20。 (2)串对象的方法 string 对象的方法共有个。主要用于有关字符串在 Web 页面中的显示、 字体大小、字体颜色、字符的搜索以及字符的大小写转换。 其主要方法如下: 锚点 anchor():该方法创建如用 Html 文档中一样的 anchor 标记。使用 anchor 如用 Html 中(A Name=)一样。通过下列格式访问: string.anchor(anchorName)。 有关字符显示的控制方法 big 字

46、体显示, Italics()斜体字显示,bold()粗体字显示,blink()字符闪烁显示, small()字符用小体字显示,fixed()固定高亮字显示、fontsize(size)控制字体大 小等。 字体颜色方法;fontcolor(color) 字符串大小写转换 toLowerCase()小写转换,toUpperCase()大写转换。下列把一个给定的串 分别转换成大写和小写格式: string=stringValue.toUpperCase 和 string=stringValue.toLowerCase。 字符搜索:indexOfcharactor,fromIndex 从指定 form

47、Indtx 位置开始搜索 charactor 第一次出现的位置。 返回字串的一部分字串:substring(start,end) 从 start 开始到 end 的字符全部返回。 2、算术函数的 math 对象 功能:提供除加、减、乘、除以外的一引些自述运算。如对数,平方根等 。 静动性:静态对象 (1)主要属性 math 中提供了个属性,它们是数学中经常用到的常数、以为底的 自然对数、以为底的自然对数 LN2、3.14159 的 PI、1/2 的平方根 SQRT1-2,2 的平方根为 SQRT2。 (2)主要方法 绝对值:abs() 正弦余弦值:sin(),cos() . ;. 反正弦反余弦

48、 :asin(), acos() 正切反正切:tan(),atan() 四舍五入:round() 平方根:sqrt() 基于几方次的值:Pow(base,exponent) 3、日期及时间对象 功能:提供一个有关日期和时间的对象。 静动性:动态性,即必须使用 New 运算符创建一个实例。 例:MyDate=New Date() Date 对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。 (1)获取日期的时间方法 getYear(): 返回年数 getMonth():返回当月号数 getDate(): 返回当日号数 getDay():返回星期几 getHours():返回小时数 g

49、etMintes(:返回分钟数 getSeconds():返回秒数 getTime() : 返回毫秒数 (2)设置日期和时间: setYear();设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMintes():设置分钟数 setSeconds():设置秒数 setTime ():设置毫秒数 3.2.2 JavaScript 中的系统函数 JavaScript 中的系统函数又称内部方法。它提供了与任何对象无关的系统函 数,使用这些函数不需创建任何实例,可直接用。 1、返回字符串表达式中的值: 方法名:eval(字串表达式)

50、 ,例: . ;. test=eval(8+9+5/2); 2、返回字符串 ASCI 码: 方法名:unEscape (string) 3、返回字符的编码: 方法名:escape(character) 4、返回实数: parseFloat(floustring); 5、返回不同进制的数: parseInt(numbestring ,rad.X) 其中 radix 是数的进制,numbs 字符串数 3.2.3 举例 下面是一个时钟显示的 JavaScript 文档。在文档中用了非常多的函数。 Test4_1.htm 时钟 function showClock() function hideClo

51、ck() var timerID = null var timerRunning = false function stopClock() if(timerRunning) clearTimeout(timerID); timerRunning = false document.clock.face.value = ; . ;. function showTime() var now = new Date(); var year = now.getYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hour

52、s = now.getHours(); var mins = now.getMinutes(); var secs = now.getSeconds(); var timeVal = ; timeVal += (hours = 12) ? hours : hours - 12); timeVal += (mins 10) ? :0 : :) + mins; timeVal += (secs = 10) ? :0 : :) + secs; timeVal += (hours 12) ? AM : PM); timeVal += (month 10) ? on 0 : on ) + month +

53、 -; timeVal += date + - + year; document.clock.face.value = timeVal; timerID = setTimeout(showTime(), 1000); timerRunning = true function startClock() stopClock(); showTime(); function windowOpener( indexnum ) var loadpos=date.html+#+indexnum; controlWindow=window.open(loadpos,date,toolbar=no,locati

54、on=no, directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes, width=620,height=400); form 时钟 . ;. 3.3 本章小结本章小结 本讲介绍了基于对象的 JavaScript 中常用内部对象属性、方法的使用。 . ;. 第四章第四章 内部对象系统的使用内部对象系统的使用 使用浏览器的内部对象系统,可实现与 HTML 文档进行交互。它的作用是 将相关元素组织包装起来,提供给程序设计人员使用,从而减轻编程人的劳动, 提高设计 Web 页面的能力。 4.1 浏览器对象层次及其主要作用浏览器

55、对象层次及其主要作用 除了前面提到过的文档 document 对象外,Navigator 浏览器中还提供了窗 口(Window)对象以及历史(History)和位置(Location)对象。 浏览器对象(Navigator):提供有关浏览器的信息 窗口对象(Windows):Window 对象处于对象层次的最顶端,它提供了处理 Navigator 窗口的方法和属性。 位置对象(Location):Location 对象提供了与当前打开的 URL 一起工作的方 法和属性,它是一个静态的对象。 历史对象(History):History 对象提供了与历史清单有关的信息。 文档对象(Document):document 对象包含了与文档元素(elements)一起工作 的对象,它将这些元素封装起来供编程人员使用。 网页设计与制作人员利用这些对象,可以对 WWW 浏览器环境中的事件进 行控制并作出处理。在 JavaScript 中提供了非常丰富的内部方法和属性,从而 减轻了编程人员

温馨提示

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

评论

0/150

提交评论