HTML与Javascript简单基础.ppt

上传人:re****.1 文档编号:571503479 上传时间:2024-08-11 格式:PPT 页数:132 大小:1.06MB
返回 下载 相关 举报
HTML与Javascript简单基础.ppt_第1页
第1页 / 共132页
HTML与Javascript简单基础.ppt_第2页
第2页 / 共132页
HTML与Javascript简单基础.ppt_第3页
第3页 / 共132页
HTML与Javascript简单基础.ppt_第4页
第4页 / 共132页
HTML与Javascript简单基础.ppt_第5页
第5页 / 共132页
点击查看更多>>
资源描述

《HTML与Javascript简单基础.ppt》由会员分享,可在线阅读,更多相关《HTML与Javascript简单基础.ppt(132页珍藏版)》请在金锄头文库上搜索。

1、1第第10章章 HTML与与Javascript HTML语言语言 HTML与与XML、XHTML的关系的关系 Javascript 语言概述语言概述Javascript的变量、常量、数据类型、表的变量、常量、数据类型、表达式达式Javascript程序语句程序语句 Javascript函数与事件处理函数与事件处理 Javascript对象对象 浏览器对象浏览器对象2一、一、 HTML语言语言HTML(HyperTextMarkupLanguage超文本标识语言)是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。通过HTML,将所需要表达的信息按某种规则写成H

2、TML文档,通过专用的浏览器来识别,并将这些HTML翻译成可以识别的信息,就是所见到的网页。3HTML文档的编写方法文档的编写方法手工直接编写记事本等,保存为.htm或.html格式使用可视化HTML编辑器(方便、快捷)Dreamweaver、Frontpage等为何要学习HTML呢?因为HTML语言是所有网页的基础,用HTML语言制作的网页可以更精确的控制页面的排版,代码更优化,实现更多的功能。使用可视化工具生成的网页都含有大量的冗余代码(10%)。从而使网页的访问速度降低,浪费存储空间。4一个典型的一个典型的HTML文本的基本结构形式如下:文本的基本结构形式如下: 文本标题文本标题 网页主

3、体内容网页主体内容 上述文档用到四种标记符,其意义如下:上述文档用到四种标记符,其意义如下: 首部首部主体主体HTML 文档的基本结构文档的基本结构5(1)html标记符标记符- 这两个标记符是这两个标记符是HTMLHTML文档的标记符。文档的标记符。处于文处于文档的最前端,表示文档的开始,即浏览器从档的最前端,表示文档的开始,即浏览器从开始解开始解释。释。 而而则标记位于文档的最后,表示则标记位于文档的最后,表示HTMLHTML文档的结文档的结束。束。和和之间是之间是 htmlhtml文档的内容。文档的内容。 (2)head标记符标记符 - 是是HTMLHTML文档头标记符,用来描述文档头标

4、记符,用来描述HTMLHTML首部的内容,首部的内容,说明文档的整体信息。所有首部信息并不会出现在利用说明文档的整体信息。所有首部信息并不会出现在利用WWWWWW浏览器所看到的窗体中。浏览器所看到的窗体中。 通常与某些标记符一起使通常与某些标记符一起使用,如用,如标记符。标记符。用于说明用于说明HTMLHTML文档首部的有关信息,如文档的标题、向文档首部的有关信息,如文档的标题、向搜索引擎说明的网页的关键词、网页作者、网页使用的搜索引擎说明的网页的关键词、网页作者、网页使用的字符集等。字符集等。该标记是可选的,如果没有,浏览器仍会解读文档。该标记是可选的,如果没有,浏览器仍会解读文档。 6(3

5、)tilte标记符标记符 - 指定网页文档的标题。通常来说,指定网页文档的标题。通常来说,每一份文档都应该有一个标题来简述这一份文档的特色或是每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于主题。对于WWWWWW浏览器而言,标题所在的位置虽然依照浏览浏览器而言,标题所在的位置虽然依照浏览器的不同而不同,但是大部分都位于浏览器的最上方。器的不同而不同,但是大部分都位于浏览器的最上方。 (4)body标记符标记符 - 用于定义用于定义HTMLHTML文档的主体部分,位于首部下文档的主体部分,位于首部下面。在面。在 和和 标记符之间的文字,都可以显示标记符之间的文字,都可以显示在浏览器

6、窗口中。在浏览器窗口中。 7HTML文档中的注释文档中的注释HTML文档中的注释,采用“!”标记。“”表示注释结束。HTML文档中的注释可以出现在文档的任何部分。例如:8HTML语言的语法规则语言的语法规则 HTML标记不区分大小写;需要说明的是,虽然HTML标记对大小写是不敏感的,如和的作用的相同的,但建议在HTML4中使用小写标记,因为万维网联盟(W3C)已经规定:在XHTML(下一代HTML)中,必须使用小写标记。关于XHTML语言,在本章第二节中介绍。9HTML语言的语法规则语言的语法规则HTML标记的一般格式标记的一般格式受影响的文本或图像等内容例如:简单网页实例为开始标记,其中,h

7、ref为a标记元素的属性,“sample.html”为属性值。为结束标记。文字信息“简单网页实例”是位于两个标记之间的、被修饰的文本对象。10常用的常用的HTML标记标记本节简要介绍几种常用的HTML标记。根据其作用,我们将要介绍的HTML标记划分为如下几类:1、页面(page)标记2、文字格式(textstyle)标记3、图像(image)标记4、表格(table)标记5、表单(form)标记6、其它标记111、页面标记、页面标记主要介绍6个标记:html,head,body,title,meta,ahtml,head,body,title已经介绍过了。下面讲解meta,a标记12metam

8、eta标记标记meta用于对文件特征的描述。meta标签用于网页的与中,meta标签的用处很多。meta的属性有两种:name 和 http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。name的值可为: generator,keywords,description,auther等.name=“generator”,用以说明生成工具(如MicrosoftFrontPage4.0)等;name=“keywords”,向搜索引擎说明你的网页的关键词;name=“d

9、escription”,告诉搜索引擎你的站点的主要内容;name=“author”,告诉搜索引擎你的站点的制作者。13meta 标记举例标记举例14meta 标记举例标记举例15metameta标记标记- - http-equiv属性属性http-equiv可取值:Content-Type,Content-Language,Refresh,windows-Target等。说明网页使用的字符集。如中文为gb2312-80,英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集。用以说明网页制作所使用的文字以及语言;定时让网页在指定的时间n内,

10、跳转到页面http:/yourlink。强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用。16body body 标记标记格式: . . 功能说明:该标记定义了HTML文件的主要内容与显示格式,是整个网页文件的核心。17body标记的属性说明标记的属性说明bgcolor:设置页面的背景颜色值。默认为白色。background:设置页面的背景图像文件名。 text:设置网页的文本颜色值,默认为黑色。link:设置尚未被访问的超链接文本的颜色,默认为蓝色。vlink:设置已被访问的超链接文本的颜色,默认为紫色。 alink:设置正被访问的超链接文本的颜色,默认为

11、红色。leftmargin:设置页面左边的空白量。空白量可以是数值,或是相对于页面宽度的百分比。topmargin:设置页面顶端的空白量。空白量可以是数值,或是相对于页面高度的百分比。18HTML中中颜色的表示颜色的表示颜色值可以是颜色的英文单词,如red(红)、green(绿)、blue(蓝)、yellow(黄)、black(黑)、white(白)等,也可以是#号加16进制的红绿蓝(red-green-blue,RGB)值来表示,格式为#rrggbb。16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f。如#FF0000表示红色,#00FF00表示绿色,#0000

12、FF表示蓝色,#000000表示黑色。19格式格式:.功能说明功能说明:href属性设置要链接到的URL地址值。上述语法格式中的URL代表要链接到的网页、网站或电子邮件地址,可以是绝对地址,也可以是相对地址。如:http:/,sample.htm,mailto:等。target属性属性 设置显示超链接内容的窗口名,在Window_Name处写上该窗口名。如果没有指定此属性,则默认为当前窗口。如果target属性设置窗口名不存在,则打开一个新的(浏览器)窗口显示超链接的内容。 a 标记标记-超链接标记超链接标记20第一种情况:跳转到另一个网页第一种情况:跳转到另一个网页访问263网站第二种情况:

13、跳转到本页面的另外一个地方第二种情况:跳转到本页面的另外一个地方这种情况要求先在本网页中要跳转到的地方定义一个“锚点”,锚点标记的格式为.,在name处输入命名的锚点符号。锚点符号由字母开头,后跟字母数字组成的符号串。在需要跳转的地方插入如下格式的超链接标记:.其中,在#name处输入已经定义的锚点符号。例如:跳转到下一个链接点下一个链接点第三种情况:跳转到另一个页面的某个地方第三种情况:跳转到另一个页面的某个地方首先要在被链接的网页中定义锚点,这样在当前网页中可以指定超链接到这个锚点。跳转到另一个页面的某个地方的超链接标记的格式为:.a a 标记标记-三种超链接情况三种超链接情况21锚标签和

14、锚标签和 name 属性属性name属性用于创建被命名的锚点(namedanchors)。当使用命名锚点(namedanchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。以下是命名锚点的语法:Texttobedisplayedname属性用于命名锚点。锚点的名称由字母开头,后跟字母数字组成的符号串。222、文字格式、文字格式(text style )标记标记(1) 标题设置标记标题设置标记(2)段落标记)段落标记(3)换行标记)换行标记(4)分区显示标记)分区显示标记 (5) 无序列表标记无序列表标记 (6)有序列表标记)有序列表标记2

15、32、文字格式、文字格式(text style )标记标记(1) 标题设置标记标题设置标记 - 标记可定义标题。标记可定义标题。 定义最大的标题。定义最大的标题。 定义最小的标题。定义最小的标题。 元素用来描述网页中最上层的标题。元素用来描述网页中最上层的标题。一般把一般把 用于最顶层的标题,用于最顶层的标题, 和和 用于较用于较低的层级。低的层级。格式:格式: 功能说明:功能说明:HTML规定了规定了6种标题类型,它们是种标题类型,它们是h1、h2、h3、h4、h5、h6。格式说明中的。格式说明中的#表示表示1、2、3、4、5、6中的数字。中的数字。属性属性align用于设置被修饰文字的对齐

16、方式,对齐方用于设置被修饰文字的对齐方式,对齐方式可以是式可以是left(居左)(居左),right(居右)(居右),center(居中)(居中),默认为,默认为left。24标题标记举例标题标记举例:这是标题1这是标题2这是标题3这是标题4这是标题5这是标题6252、文字格式、文字格式(text style )标记标记(2) 段落标记段落标记格式格式: 。 功能说明:设置当前段的结束和下一段的功能说明:设置当前段的结束和下一段的开始。若未设置开始。若未设置align属性,则属性,则相当于相当于两个两个标记。标记。属性属性: align: 段落对齐方式,可以为段落对齐方式,可以为left,ri

17、ght, center,默认为,默认为left。例如:例如: 节日快乐节日快乐 262、文字格式、文字格式(text style )标记标记(3)换行标记)换行标记格式格式: 功能说明功能说明: 换行标记是一个单标记。使下换行标记是一个单标记。使下面的文字另起一行显示。面的文字另起一行显示。272、文字格式、文字格式(text style )标记标记(4)分区显示标记)分区显示标记 格式:格式: 文本或图像文本或图像 功能说明:用于文字块或图像的分区块显功能说明:用于文字块或图像的分区块显示。三种对齐方式:示。三种对齐方式:left,center,right。28分区标记实例分区标记的应用实例

18、分区标记的应用实例居左显示居左显示居右显示居右显示居中显示居中显示292、文字格式、文字格式(text style )标记标记(5) 无序列表标记无序列表标记格式:格式: 列表项目列表项目1 列表项目列表项目2 列表项目列表项目3 . 功能说明:无序列表的每个项目前有一个项目符号。功能说明:无序列表的每个项目前有一个项目符号。和和标记必须成组使用。无序列表的每个项目前标记必须成组使用。无序列表的每个项目前的项目符号可以相同,也可以不同。项目符号类型未指的项目符号可以相同,也可以不同。项目符号类型未指定时,默认为实心圆。定时,默认为实心圆。属性属性type: 表示项目符号类型,其值为表示项目符号

19、类型,其值为disc(实心圆实心圆)、circle(空心圆)、(空心圆)、square(实心方块),默认时为(实心方块),默认时为disc。30无序列表标记实例 一个无序列表:一个无序列表: 春天春天 夏天夏天 秋天秋天 312、文字格式、文字格式(text style )标记标记(6 6)有序列表标记)有序列表标记格式:格式: 列表项目列表项目1 /1 列表项目列表项目2 /2 列表项目列表项目3 /3 / 说明:列表的序号可以为数字和字母。说明:列表的序号可以为数字和字母。属性:属性: typetype: 有五种序号类型,分别为:有五种序号类型,分别为:1 1(阿拉伯(阿拉伯数字)、数字)

20、、A A(大写英文字母)、(大写英文字母)、 a a(小写英文字母)、(小写英文字母)、 (大写罗马字母)、(大写罗马字母)、 (小写罗马字母)。(小写罗马字母)。 startstart:开始序号。:开始序号。列表可以嵌套,从而把网页分为多个层次。有序列表和列表可以嵌套,从而把网页分为多个层次。有序列表和无序列表不仅自身可以嵌套,而且彼此可以互相嵌套。无序列表不仅自身可以嵌套,而且彼此可以互相嵌套。 32有序列表标记实例一个有序列表:春天夏天秋天333、图像标记、图像标记格式:格式: 属性:属性:src: 其值为要加入到网页中的图像文件及其存放路其值为要加入到网页中的图像文件及其存放路径的说明

21、。径的说明。 width:图像的宽度。其值可以为数值(像素点数),:图像的宽度。其值可以为数值(像素点数),也可以为相对窗口的百分比。也可以为相对窗口的百分比。 height:图像的高度。其值可以为数值(像素点数):图像的高度。其值可以为数值(像素点数),也可以为相对窗口的百分比。,也可以为相对窗口的百分比。 alt : 在浏览器尚未完全载入图像时,在图像位置显在浏览器尚未完全载入图像时,在图像位置显示的文字。示的文字。344、表格标记、表格标记格式:标题文字表头1表头2表头n表项1表项2表项n表项1表项2表项n35表格标记实例表格标记实例 水果水果 重量重量 苹果苹果 10公斤公斤 365、

22、表单标记、表单标记格式:格式: 37(1) 标记标记标记用于为用户输入创建HTML表单。表单包含input,select,textarea等元素。属性:action:表单的处理方式,通常是e-mail地址或网址。method:表单数据传送到服务器的方式。共有两种方法:POST方法和GET方法。采用POST方式时,浏览器将会按照下面两步来发送数据。首先,浏览器将与action属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。采用GET方式时,浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的

23、action属性的URL之后。这两者之间用问号进行分隔。38(2)标记标记主要用来设计表单中提供给用户的输入形式。属性:type:设置要加入表单项目的类型。有如下7种类型:text:设置普通文本输入框,输入的文本以标准字符显示。同时使用size和maxlength属性可以设置文本输入框的大小以及文本最大长度。password:设置密码文本输入框,输入的文本以“*”显示。同时使用size和maxlength属性可以设置文本输入框的大小以及文本最大长度。checkbox:设置复选框。在name属性设置复选框的名称,该名称用于脚本语言编程中对该表项的控制。设置复选框的例子:39radio:设置单选框

24、。在name属性设置单选框的名称。一般单选框会有一组待选项,需要为该单选框的每个选项值,分别使用标记进行设置,而且,他们的name属性都相同。checked属性用于设置初始选定的项。如:BananaAppleOrange40hidden:设置表单的隐藏元素。submit:设置提交按钮。提交按钮的功能是将表单的内容送给action中的网址或邮箱。reset:设置重置按钮。重置按钮的功能是清除输入到表单中的全部内容。按钮名使用value属性设置,若未指定按钮名,则默认为“reset”。41(3 ) 和和标记标记用于设置弹出式选择栏。其格式参见下面例子:BananaAppleOrange42(4)

25、标记标记用于设置多行文本的输入区。格式为:例如:用户姓名:李维个人身份:学生单位名称:北京信息科技大学436. 框架标记框架标记格式:.44框架集实例框架集实例45(1) 标记的属性标记的属性rows:设置横向分割的框架数目,例如rows=30%,20%,50%,横向分割了三个框架,每个框架的大小按相对于窗口的百分比指定,当然,也可以给出每个窗口的绝对像素数。若框架大小指定为“*”,则表示自动分配框架大小。cols:设置纵向分割的框架数目,例如cols=40%,30%,30%,纵向分割了三个框架,每个框架的大小按相对于窗口的百分比指定,当然,也可以给出每个窗口的绝对像素数。若框架大小指定为“*

26、”,则表示自动分配框架大小。border:设置框架的边框的宽度。单位为像素点。bordercolor:设置边框的颜色。framespacing:设置各框架间的空白,单位为像素点。frameborder:设置有无边框,值为yes表示有边框,为no表示无边框。46(2)标记的属性标记的属性src:表示该框架对应的源文件。name:指定框架名。框架名必须以字母开头。marginwidth:设置框架内容与左右边框的空白。marginheight:设置框架内容与上下边框的空白。scrolling:设置框架的卷滚条,其值为yes或no或auto。缺省值是auto。noresize:表示不允许改变窗口的大小

27、。缺省设置允许各窗口改变大小。47二、二、 HTML与与XML、XHTML的关系的关系XML简介什么是XMLXML与HTML的差异XML的用途XHTML简介什么是XHTMLXHTML与HTML之间的差异XHTML语法XHTML定义的三种文件类型声明48XML 简介简介什么是XML?XML是EXtensibleMarkupLanguage的简称,即可扩展标记语言。XML是Web表示结构化信息的一种标准文本格式。XML与HTML的差异HTML的各个标记都是固定不变的;而XML的标记由网页设计者自己来定义。XML和HTML是为不同的目的而设计的。XML能比HTML提供更大的灵活性,但不能取代HTML

28、语言。XML的用途XML不是对HTML的替代,而是对HTML的补充。在大多数Web应用程序中,XML用于传输数据,而HTML用于格式化并显示数据。49XHTML 简介简介什么是XHTMLXHTML是EXtensibleHyperTextMarkupLanguage的简称,即可扩展超文本标记语言。XHTML与HTML4.01兼容。XHTML是以XML重构的HTML4.01。XHTML语法与HTML之间的差异(1)XHTML元素必须被关闭,而HTML的有些元素不用关闭。(2)XHTML标记名和属性名必须用小写字母。(3)属性不能简写,属性值必须加引号。(4)用id属性代替name属性。XHTML定

29、义的三种文件类型声明XHTML定义了包括XHTMLTransitional(过渡类型)、Strict(严格类型)、Frameset(框架类型)三种文件类型声明。使用最普遍的是XHTMLTransitional。50三、三、 Javascript 语言概述语言概述Javascript是一种可以嵌入在HTML文件中的客户端脚本语言,浏览器在载入HTML文件时,对嵌入在HTML文件中的Javascript代码,逐行解释、执行。Javascript语言不依赖于特定的机器和操作系统,所以说它是独立于平台的。Javascript语句为什么能在浏览器中执行呢?这是由于在浏览器程序中包含了一个Javascri

30、pt解释器,专门处理嵌入在HTML文件中的Javascript语句所描述的动作。51Javascript语言的前身叫作LiveScript。自从SUN公司推出著名的Java语言之后,Netscape公司引进了SUN公司有关Java的程序设计概念,将自己原有的LiveScript重新进行了设计,并更名为Javascript。JavaScript 被数百万计的网页用来改进设被数百万计的网页用来改进设计、验证表单、检测浏览器、创建计、验证表单、检测浏览器、创建cookies,以及更多的应用,以及更多的应用。JavaScript的正式名称是ECMAScript。这个标准由ECMA组织发展和维护。52

31、Javascript脚本在网页中的位置与执行脚本在网页中的位置与执行 1在网页中如何放置Javascript脚本使用HTML的标记,把Javascript脚本代码插入HTML页面当中。如:。Javascript脚本可以放在网页的head部分和body部分。532Javascript脚本何时被执行位于head部分的脚本和位于body部分的Javascript脚本执行时机不同。当页面载入到浏览器时,位于body部分的Javascript脚本会立即执行;而位于head部分的脚本,只有当被调用或事件被触发时才会执行(此时由于脚本放置在head部分,可以确保在需要脚本被使用之前,它已经被载入了)。3外部

32、脚本文件的创建与链接将Javascript脚本写入一个外部文件之中,并以“.js”为后缀保存这个文件。使用标记的src属性,可以将该外部脚本文件包含到HTML文档中。例如:54简单实例简单实例【例10-4】使用Javascript在浏览器中显示一串文字,并弹出一个信息提示框。今后我们将共同学习Javascript知识!55浏览效果如图10-4和图10-5所示。图10-5为点击信息提示框的“确定”按钮后的运行结果。图10-4图10-556四、四、 Javascript的变量、的变量、 常量、数据类型、表达式常量、数据类型、表达式(一)(一) Javascript的变量的变量可以在程序中用一个变量

33、来存放一个值,这样在需要这个值的地方就可以用这个变量来代表。一个变量存放的值可以是数字、文字或对象。一个好的变量名有助于增加程序的可读性,使程序易于理解。对于变量,必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。571. 变量的命名变量的命名Javascript中的变量命名同其计算机语言非常相似。规则如下:Javascript变量以字母或下划线(“_”)开头,后面可跟字母数字符号。不能使用Javascript中的关键字作为变量名。582. 变量的类型和变量的声明变量的类型和变量的声明在Javascript中变量的类型可以是:number(数值)类型;boolean(布尔)类型str

34、ing(字符串)类型function(函数)类型object(对象)类型但变量的类型并不是象其它语言(如c语言)一样用类型标识符显式说明,而是根据变量被赋给的值来隐式确定的。在Javascript中,变量通常用关键字var来声明。例如:varmytest,x,y;该例子定义了名字分别为mytest,x,y的三个变量,但没有赋予它们值。这三个变量的类型目前还不能确定,只有给它们赋值后才能知道。又例:varmytest=Thisisabook;该例子定义了一个名为mytest变量,同时赋予了它的值。根据赋予它的值,变量mytest是string类型的。593、变量的作用域、变量的作用域根据定义的位

35、置不同,变量可以分为局部变量、全局变量。全局变量全局变量是指在函数外部定义的变量。局部变量局部变量是指在一个函数内部定义的变量。只有该函数能访问这个变量。每当函数被调用时,此变量被创建。当函数调用结束时,此变量被撤销。变量的作用范围称为变量的作用域。全局变量全局变量定义在所有函数体之外,其作用范围是所有函数;局部变量局部变量定义在函数体之内,只对其该函数是可见的,而对其它函数则是不可见的。60(二)(二) Javascript的五种数据类型的五种数据类型在Javascript中包括5种数据类型:number(数值)、boolean(逻辑型或布尔型)、string(字符串)、function(函

36、数)、object(对象)类型。number类型的变量可以容纳一个整数或者一个实数值,如-19,2.6777等。boolean类型的变量可以容纳一个true或false。string类型的变量容纳任何被赋给它的字符串,包括空字符串。如abcdefg字符串是用双引号()或单引号()括起来的符号串。object类型的变量能够存储其他对象。一个被赋null值的变量被认为是object类型的。61(三)(三) Javascript的常量的常量Javascript的常量通常又称字面常量,它们是在脚本的执行过程中不能改变的数据。(1)整型常量:可以使用十进制、八进制和十六进制的格式来表示。十进制整数:不以

37、0开头的数字序列。如:123,2000,329。八进制整数:以0作为引导数字,后面的数字可以是0到7的任何排列。如:012,04650,0771。十六进制整数:以0x作为引导,后面的数字可以包括数字0到9以及字母a到f或A到F的任何排列。如:0x10,0x46ab,0xa7b1。62(2)实型常量实型常量是由整数部分加小数部分表示,如12.32、-190.9。标准或科学计数法表示。科学计数法中的指数部分是一个e或E加上一个整数(正数或负数)组成。科学计数法表示的数如5.3E7、4e-5等。(3)布尔型值布尔常量只有两种状态:true(逻辑真)或false(逻辑假)。它主要用来说明或代表一种状态

38、或标志。(4)字符串常量使用单引号()或双引号()括起来的零个或多个字符。如ThisisabookofJavascript、3245、ewrt234234、(空串)等。63(5)特殊字符在Javascript中有些以反斜杠(“”)开头的不可显示的特殊字符:b表示退格f表示换页n表示换行r表示回车t表示制表符(Tab符)表示单引号表示双引号(6)空值nullJavascript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个null值。64(四)、运算符和表达式(四)、运算符和表达式按优先级从高到低顺序排列运算符:求反运算符:!算术运算符:+,-;*,/,%;+,-字符

39、串连接符:+(串连接)比较运算符:,=,=;=,!=逻辑运算符:&,|条件运算符:?:赋值运算符:=说明:在算术运算符一组和比较运算符一组中,按优先顺序由高到低排列,不同级用“;”号隔开,同级用“,”间隔。一个表达式就是由任何合适的常量、变量和运算符相连接而组成一个表达式就是由任何合适的常量、变量和运算符相连接而组成的式子,这个式子有一个唯一的值。这个值的类型可以是前面讲的式子,这个式子有一个唯一的值。这个值的类型可以是前面讲过的过的JavascriptJavascript的的5 5种数据类型中的任何一种,包括数值、逻辑值、种数据类型中的任何一种,包括数值、逻辑值、字符串等,还可以是一个对象。

40、字符串等,还可以是一个对象。 65五、五、 Javascript程序语句程序语句JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。Javascript程序代码是由一系列Javascript语句组成的。这些语句包括:变量声明及赋值语句;流程控制语句;函数定义语句;对象操作语句。本节讨论流程控制语句:条件和分支语句(if语句,switch语句)循环语句(for,while,dowhile,break,continue)661. if语句语句基本格式:if(表达式)语句;else语句;功能:若表达式的值为true,则执行语句;否则执行语句。说明:if-else语句是J

41、avascript中最基本的控制语句,通过它可以改变语句的执行顺序。若if后的语句有多行,则必须使用花括号将其括起来。当语句1或语句2又是一个if语句时,就构成了if语句的嵌套形式。else部分可以没有,此时称为单分支的if语句。67If语句举例语句举例/如果time10,则页面显示Goodmorning/否则将看到问候语Goodday.vard=newDate()vartime=d.getHours()if(time10)document.write(Goodmorning!)elsedocument.write(Goodday!)682、 switch语句语句switch语句可以根据一个变

42、量或表达式的不同取值而采取不同的处理方法,所以又称为分支语句。其语法格式为:switch(expression)caselabel1:语句段1;break;caselabel2:语句段2;break;default:语句段n;说明:switch语句在执行时,先计算表达式expression的值。然后比较expression的值与哪个label相等,找到一个label后,就自动转向对应的语句执行。如果expression的值与任何label都不匹配,switch中的default部分的语句将被自动执行。执行完相应的语句后,跳出switch语句。如果switch分支中的break语句不写,则执行完

43、本分支的语句后,自动执行下一条case语句。69switch语句举例语句举例/根据今天是星期几,将在网页上显示相应的问候语vard=newDate()theDay=d.getDay()switch(theDay)case5:document.write(“FinallyFriday”);break;case6:document.write(SuperSaturday);break;case0:document.write(SleepySunday);break;default:document.write(Imlookingforwardtothisweekend!)703、循环语句、循环语句

44、 for 格式:for(初始表达式;条件表达式;增量表达式)语句集;功能:实现条件循环,当条件成立时,执行语句集,否则跳出循环体.说明:一般用一个初始化表达式来初始化一个用做循环计数器的变量,即循环控制变量;条件表达式用于判别循环停止时的条件。若条件满足,则执行循环体,否则跳出循环。增量表达式:主要定义循环控制变量在每次循环时按什么方式变化.这三个表达式不是必须的,它们是可省缺的。如果条件表达式省缺,则认为条件是真。71for循环的实例循环的实例vari=0;for(i=0;i=3;i+)document.write(Thenumberis+i)document.write()724、whil

45、e循环循环格式:while(条件)语句集;说明:while语句不断的测试一个条件,如果条件始终成立,则这个循环会一致持续下去,直到条件不再成立为止。73While循环实例循环实例vari=0while(i=3)document.write(Thenumberis+i)document.write()i=i+1745、do while 循环语句循环语句格式:do语句集;while(条件);说明:dowhile语句首先不管while中的条件是否成立,总是先执行一次循环。完成第一次循环后,dowhile语句才试图判定while中的条件,如果成立,就继续循环;如果条件不成立,就跳到循环后的第一条语句去

46、执行。75do while 循环语句举例循环语句举例vari=0dodocument.write(Thenumberis+i)document.write()i=i+1while(i0)输出结果:Thenumberis0766、break 和和 continuebreak语句结束其所在的for、while以及dowhile整个循环,并把程序的控制权交给循环后的第一条语句。continue语句结束其所在的for、while以及dowhile循环的本次循环,并立即开始下一个循环。即使得程序流程跳过本次循环内剩余的语句而进入下一次循环。77break举例举例vari=0for(i=0;i=10;i+

47、)if(i=3)breakdocument.write(Thenumberis+i)document.write()Thenumberis0Thenumberis1Thenumberis278continue 举例举例vari=0for(i=0;i=10;i+)if(i=3)continuedocument.write(Thenumberis+i)document.write()Thenumberis0Thenumberis1Thenumberis2Thenumberis4Thenumberis5Thenumberis6Thenumberis7Thenumberis8Thenumberis9T

48、henumberis1079六、六、Javascript函数与事件处理函数与事件处理1、Javascript函数 函数是由事件驱动的或者当它被调用时执函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。行的可重复使用的代码块。函数定义:函数定义: function 函数名函数名(参数参数1,参数,参数2,) 函数执行部分函数执行部分; 80页面载入时,函数中的脚本不会被执行,只有函数被调页面载入时,函数中的脚本不会被执行,只有函数被调用时,函数中的脚本才被执行。因此,通常将处理事件用时,函数中的脚本才被执行。因此,通常将处理事件的脚本写入一个函数,并在页面中事件触发对象的标记的脚本写入

49、一个函数,并在页面中事件触发对象的标记中调用该函数,如例中调用该函数,如例10-7中的中的 onclick=“displaymessage()”,从而响应触发的事件。,从而响应触发的事件。包含函数的包含函数的块通常放在页面的块通常放在页面的部分。因部分。因为每当页面被加载时,为每当页面被加载时,区域中的内容比区域中的内容比区域的内容先被加载。这样可以保证在另一个脚本需要区域的内容先被加载。这样可以保证在另一个脚本需要立即调用它们时,函数是可用的。立即调用它们时,函数是可用的。81函数举例函数举例1functiondisplaymessage()alert(HelloWorld!)说明:如果将本

50、例中的块中内容改为只有“alert(Helloworld!);”,即不将“alert(Helloworld!);”写入一个函数,那么当页面被载入时就会执行。而本例中,当用户点击按钮时,脚本才会执行。在网页中给按钮添加了onClick事件,这样按钮被点击时函数才会执行。822、return 语句语句return语句用来规定从函数返回的值。因此,需要返回某个值的函数必须使用这个return语句。return语句的语法为:return表达式;如果省去了return后面的表达式,或函数定义中没有使用return语句,函数的返回值将不确定。833、函数的调用函数调用的格式为:函数名(实际参数1,实际参数

51、2,);这里的实际参数是传递给函数的形式参数的的值,其值可以是常量、变量或其它表达式84函数举例函数举例2函数的定义:functionprod(a,b)x=a*b;returnx;函数调用:product=prod(2,3);说明:1、调用上面这个函数时,必须传入两个参数:2、从prod()函数的返回值是6,这个值会存储在名为product的变量中854Javascript内置函数内置函数不属于任何对象,在Javascript语句的任何地方都可以使用这些函数。内置函数也称系统函数。这里介绍函数eval()和parseInt()(1)函数eval(str):返回字串表达式str的值。例如,tes

52、t=eval(8+9+5/2);则test的值为19.5(2)函数parseInt(str,radix):试图从一个字符串str中提取一个整数,其中radix是数的进制。如果字符串str中存在除了数字、符号、小数点和指数符号以外的字符,parseInt函数就停止转换,返回已有的结果。如果第一个字符就不能转换,则返回“NaN”值,表明字符串中不存在数字符号。例如,parseInt(123,8),该函数的返回值为八进制数173。86事件和事件处理事件和事件处理 1.事件的概念通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(EventDrive

53、r)。而对事件进行处理程序或函数,我们称之为事件处理程序(EventHandler)。事件定义了用户与Web页面交互时产生的各种操作。例如,用鼠标单击一个超链接或按钮时,就会产生一个onClick(单击)事件,浏览器会自动调用事件处理函数处理这个事件。浏览器在大部分时间里都在等待事件的发生,并在事件发生时,自动调用事件处理函数,完成事件的处理。872.事件处理浏览器为了响应某个事件而进行的处理过程称为事件处理。为了实现事件的处理,需要完成如下工作(以处理onClick事件为例)。每当一个事件发生时,Javascript解释器就会自动查找界面对象中事件属性,调用注册在上面的事件处理函数。例如,在

54、HTML文件中可以使用如下的语句:上述语句表明,要单击的Web页面对象是名为calc的按钮,处理的事件为onclick,事件处理函数为clickButton()。883.常用事件及其处理下面讨论Javascript的常用事件:浏览器事件;鼠标事件;其它事件。(1)浏览器事件onLoad事件:装入一个文档当浏览器完成装入一个窗口或一个帧集合中所有的帧时,产生该事件。onUnLoad事件:退出一个文档当Web页面退出时引发onUnLoad事件。onSubmit事件:提交一个表单对象onSubmit事件在完成信息输入,准备将信息提交给服务器处理时发生。onReset事件:重置一个表单对象。当一个表单

55、对象被提交以及被重置时,触发onReset事件。89(2) 鼠标事件鼠标事件onMouseDown事件:按下鼠标当按下鼠标上一个键时,发生onMouseDown事件。onMouseMove事件:鼠标移动在浏览器界面移动鼠标则发生onmouseMove事件。onMouseOver事件:鼠标悬停鼠标悬停在一个界面对象时发生onMouseOver事件。onMouseOut事件:鼠标滑出界面对象当鼠标滑出一个界面对象时,发生onMouseOut事件。90onMouseUp事件:释放鼠标上一个键释放鼠标上一个键时发生onMouseUp事件。onClick事件:单击一个对象当用户单击鼠标按钮时,产生onC

56、lick事件。onFocus事件:获得焦点当表单(form)对象中的文本输入框(text)对象、文本输入区(textarea)对象或者选择框(select)对象获得焦点时,引发onFocus事件。onBlur事件:失去焦点当表单(form)对象中的文本输入框(text)对象、文本输入区(textarea)对象或者选择框(select)对象不再拥有焦点时,引发onBlur事件。91(3) 其它事件其它事件onChange事件:改变事件当利用text或textarea元素输入字符值改变时发生onChange事件,同时当在select表格项中一个选项状态改变后也会引发该事件。例:onSelect事件

57、:选中事件当text或textarea对象中的文字被加亮后,引发该事件。92【例例10-9】 一个自动装载和自动卸载的例子一个自动装载和自动卸载的例子,即即当装入当装入HTML文档时调用文档时调用loadform()函数函数,而关闭而关闭该文档时则首先调用该文档时则首先调用unloadform()函数。函数。事件演示该网页的浏览效果见下页。93网页文件在浏览器中刚载入时的显示效果在浏览器中执行“文件”|“关闭窗口”命令后的显示效果94七、七、Javascript对象对象JavaScript语语言言是是基基于于对对象象的的(Object-Based),而而不不是面向对象的(是面向对象的(obje

58、ct - oriented)。)。例例如如,它它不不支支持持分分类类、继继承承和和封封装装等等面面向向对对象象的的基基本本特特征征。但但这这并并不不意意味味着着不不能能用用JavaScript语语言言开开发发面面向向对对象的程序。象的程序。JavaScript脚脚本本语语言言的的主主要要目目的的是是提提供供对对浏浏览览器器和和服服务务器器对对象象的的灵灵活活控控制制,快快速速方方便便地地产产生生web页页面面中中的的各各种种对象以及控制这些对象的行为。对象以及控制这些对象的行为。 951. 1. 对象的属性和方法对象的属性和方法JavaScript中的对象是由属性(properties)和方法

59、(methods)两个基本的元素的构成的。属性可以说是变量的集合体,在对象实施其所需要行为的过程中,属性实现信息的装载;方法是指对属性所进行的操作,其实就是对象所拥有的函数。对象的属性还可以是一个对象,这样就构成了一个层次化的结构。通过专门的运算符 new实现对象的实例化,并且需要为这个对象实例命名。96对象实例属性的引用 共有三种形式来访问对象实例的属性:点标志法;用属性名作下标的数组法;用属性序号作下标的数组法. 97(1)点标志法:格式:对象实例名.属性名这种方式称为使用点(.)运算符方式。例如:有一个对象实例myCar,它有三个属性color,brand,owner,则可以写如下语句为

60、对象实例的属性赋值:myCar.color=white;myCar.brand=Benz;myCar.owner=liu;98(2)用属性名作下标的数组法JavaScript的一个特点是对象的属性和一个数组关联,这个数组称为对象的关联数组。数组名用对象实例的名,数组的下标用属性名表示。这样可以采用对象数组的下标实现属性的引用。例如:myCarcolor=white;myCarbrand=;myCarowner=liu;99(3)用属性序号作下标的数组法这种方法与第2种方法基本相同,区别之处在于数组的下标是属性的序号,序号从0开始。例如:myCar0=white;myCar1=;myCar2=l

61、iu;100对象方法的引用在JavaScript中对象方法的引用形式为:对象实例名.对象方法名(参数表)。例 如 , 使 用 JavaScript的 内 部 对 象document的write()方法,可写为:document.write(mydocument);1012. 2. 对象的操作对象的操作 在JavaScript中提供了几个用于操作对象的语句、关键字和运算符。(1)for.in语句格式:for(对象属性名in已知对象名)该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量;而不是使用计数器来实现的。该语句的优点就是无需知道对象中属性

62、的个数即可进行操作。102例如:下列函数是显示对象的属性内容:functionshowData(object)for(vari=0;i30;i+)document.write(objecti);而使用for.in语句,则根本不需要知道对象属性的个数,例如:functionshowData(object)for(varpropinobject)document.write(objectprop);103(2) with语句语句在该语句体内,任何对变量的引用被认为是这个对象的属性,从而节省一些代码。格式为:with对象实例名. 所有在with语句后的花括号中的语句,都是在with关键字后的对象实例

63、的作用域中的。104(3) this关键字关键字this是对当前对象的引用. 在JavaScript由于对象的引用是多层次,多方位的,往往一个对象的引用又需要对另一个对象的引用,而另一个对象有可能又要引用另一个对象,这样有可能造成混乱,最后自己已不知道现在引用的那一个对象. 为此JavaScript提供了一个用于将对象指定当前对象的关键字this。例如:参看第111张幻灯片中定义的构造函数105(4) new运算符运算符虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象实例,以满足某一特定的要求。使用new运算符可以创建一个新的对象实例。

64、其创建对象实例使用如下格式:对象实例名=new对象名(parameterstable);例如:创建日期对象实例:newDate=newDate()birthday=newDate(December12.1998)则创建对象实例newDate、birthday。1063、 创建用户自己的对象创建用户自己的对象 创建对象需要完成以下任务:定义一个构造函数用来说明对象的属性,同时也对属性值进行初始化。构造函数名必须与对象名相同;创建对象的方法,并把这些方法注册到对象上(在构造函数中进行注册);使用new运算符创建对象的实例。 因此,创建一个对象需要定义若干个函数,除了一个构造函数外,其余为对象的每个

65、方法所对应的函数。107构造函数的一般形式为:构造函数的一般形式为:function构造函数名(参数1,参数2,参数n)this.属性1=参数1;this.属性2=参数2;this.属性n=参数n;this.方法1=函数名;this.方法2=函数名;返回1084、 JavaScript的内置对象和函数的内置对象和函数 为了减轻用户的工作量,JavaScript特地把一些程序设计的常用模块设计成内置的对象和函数。这些内置对象和函数的功能已经由JavaScript解释器实现了,用户只需直接使用它们即可。JavaScript的内置对象和函数有很多,本节只介绍常用的几个内置对象和函数,在介绍内置对象包

66、含的方法时,也只介绍常用的方法。109(1 1)内置对象)内置对象 内置对象可以用在任何普通对象可以用到的地方。除Math对象外,其他内置对象在使用时,必须使用new运算符创建对象实例,通过对象实例引用对象的属性和方法,这种对象称为动态对象。而Math对象是静态对象,使用的时候直接使用对象名Math,却不用创建实例。110 String String 对象对象 作用:实现对字符串的处理。定义一个字符串变量采用如下语句: varmyString=newString(); String 对象的属性length,提供当前字符串的长度。例如:varmyStr1=newString(ThisisaJav

67、aScriptProgram)varmyStringlength=myStr1.lengthmyStringlength的值为myStr1字串的长度,即29。111常用string对象的方法charAt(pos):返回指定位置pos处的字符。indexOf(substr):给出指定的子字符串substr的位置,若找不到,就取-1。toLowerCase():把字符串中的字符全部转成小写toUpperCase():把字符串中的字符全部转成大写112MathMath对象对象Math对象可以用来处理各种数学运算。主要方法:sin(a)返回a的正弦cos(a)返回a的余弦asin(a)返回a的反正弦a

68、cos(a)返回a的反余弦tan(a)返回a的正切atan(a)返回a的反正切round(a)返回a的四舍五入的取整值sqrt(a)返回a的平方根pow(a,b)返回乘幂113DateDate对象对象Date对象可以用来处理有关日期和时间的操作。必须使用new 运算符创建一个实例。例如: MyDate = new Date() Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。例如:获取日期的时间方法: getYear(): 返回年数 getMonth():返回此年内的月份 getDate(): 返回此月内的日期 getDay():返回此周内的星期几114ArrayArra

69、y对象对象数组是把多个同类的数据组织在一起的有效手段JavaScript通过实例化Array对象来定义一个数组。 例如: myArray = new Array() 注意: 数组的下标从0开始。1151)创建数组)创建数组 创建数组的方法有三种,下面以定义一个名为“myArray”的数组为例来说明。varmyArray=newArray()varmyArray=newArray(3)varmyArray=newArray(red,green,yellow)第1种方法创建了一个长度为0的数组,为其指定元素时,数组的长度自动延伸。第2种方法创建了一个长度为3的数组。第3种方法创建了一个长度为3的数

70、组,并且为这三个元素myArray0、myArray1、myArray2分别赋值为“red”、“green”、“yellow”。1162)给数组赋值)给数组赋值采用前两种方法创建数组后需要给数组元素单独赋值。例如,可以给前面定义的数组赋值如下:myArray0=_blank;myArray1=热点;myArray2=F12;1173)输出数组元素的值)输出数组元素的值调用document的write()方法,可输出数组元素的值。例如:用于输出元素myArray0值的语句为:document.write(myArray0);4)数组对象的)数组对象的length属性属性数组对象的length属性

71、的值为该数组对象的长度,即元素的个数。例如:对于前面定义的数组myArray,myArray.length的值为3。118(2) 内置函数内置函数 内置函数也称系统函数,它们不属于任何对象,在JavaScript语句的任何地方都可以使用这些函数。这里仅介绍函数eval() 和parseInt()。eval(str):返回字串表达式str的值。 例如:test=eval(“8+9+5/2”); 则test的值为19.5。119parseInt(str,radix) 试图从一个字符串str中提取一个整数,其中radix是数的进制。 如果字符串str中存在除了数字、符号、小数点和指数符号以外的字符,

72、parseInt函数就停止转换,返回已有的结果。如果第一个字符就不能转换,则返回“NaN”值,表明字符串中不存在数字符号。例如: parseInt(“123”,8),返回值为八进制数173。 120八、浏览器对象八、浏览器对象使用浏览器载入一个网页时,浏览器会根据网页的内容产生一些与相应的页面对应的对象供JavaScript使用。另外,根据浏览器本身的配置和属性,还有一些对象供JavaScript程序使用。浏览器对象就是网页和浏览器本身各种实体元素在JavaScript程序中的体现。常用的浏览器对象:navigator对象window对象document对象location对象histroy对

73、象121(一)(一) 文档对象模型(文档对象模型( HTML DOM)HTML DOM 定义了访问和操作定义了访问和操作HTML文档的标准方法。文档的标准方法。HTML DOM 把把 HTML 文档呈现为带有元素、属性和文文档呈现为带有元素、属性和文本的树结构(节点树)。本的树结构(节点树)。根据根据DOM,HTML文档中的每个成分都是一个节点。文档中的每个成分都是一个节点。HTML DOM是这样规定的:是这样规定的:整个文档是一个文档节点整个文档是一个文档节点 每个每个HTML标签是一个元素节点标签是一个元素节点 包含在包含在HTML元素中的文本是文本节点元素中的文本是文本节点 每一个每一个

74、HTML属性是一个属性节点属性是一个属性节点 注释属于注释节点注释属于注释节点 122节点的层次节点的层次节点彼此都有等级关系。文本节点是最低级别的节点。实例:网页文件与对应的节点树文档标题我的标题我的链接该网页的节点树123(二)浏览器对象(二)浏览器对象使用浏览器载入一个网页时,浏览器会根据网页的内容产生一些与相应的页面对应的对象供Javascript使用。Browser 对象对象DOMWindowDOMNavigatorDOMScreenDOMHistoryDOMLocation这里只介绍navigator对象,window对象的常用属性和方法。其余对象的使用请参考javascript参

75、考手册。124window对象对象window对象代表一个浏览器窗口或一个框架。window对象会在或每次出现时被自动创建window对象是浏览器对象中其他大部分对象的祖先(如图所示)一般在Javascript程序中隐式地引用该对象,即自动在其他对象前加上window对象。 例如,程序中的 document.write() 即 window.document.write()。125window对象常用的方法对象常用的方法open(URL,窗口名,参数表):创建一个新的浏览器窗口。close():关闭一个浏览器窗口。alert(text):弹出一个信息框。setTimeout(expressio

76、n,time):定时设置,在一定时间后自动执行expression描述的代码,使用time设置时间,单位是毫秒。例如:myTimer=setTimeout(showMessage(),10000);clearTimeout(timer):取消以前的定时设置。例如:clearTimeout(myTimer);126navigator对象对象navigator对象提供关于整个浏览器环境的信息。它的3个常用属性为:appName:提供浏览器名;appVersion:浏览器的版本号;appCodeName:用字符串表示的当前浏览器的代码名字。例如语句document.write(navigator.a

77、ppName);则输出当前所用浏览器的名字。127(三)(三)document对象对象document对象代表整个HTML文档,可用来访问页面中的所有元素。每个window对象都有一个document对象。document对象的属性结构对应于html网页的每一个超连接、表单等元素的组织结构。128(1)document对象常用的属性对象常用的属性all用于访问文档中所有HTML元素的数组,仅限于IE浏览器。anchors用于访问文档中所有Anchor对象的数组。forms用于访问文档中所有Form对象(表单对象)的数组。images用于访问文档中所有Image对象的数组。links用于访问文档

78、中所有Area和Link对象的数组。body提供对元素的直接访问。title表示当前文档的标题。URL表示当前文档的URL。129(2)document对象常用的方法对象常用的方法getElementById()返回对拥有指定id的第一个对象的引用。getElementsByName()返回带有指定名称的对象集合。getElementsByTagName()返回带有指定标签名的对象的集合。write()向文档写入文本信息。writeln()等同于write()方法,不同的是在文本信息后写一个换行符。clear():整个地清除浏览器窗口的内容。其中getElementsByTagName()方法

79、的应用实例参见教材第10.8.6节的网页实例。130(3)Html标记中标记中class属性的访问方法属性的访问方法在很多html标记中都有的class属性。HTMLDOM中大部分元素都有className属性,用于设置或返回该HTML元素的类属性。此属性的使用参见第10.8.6节的实例。在该例中,使用className获取了元素的类属性,通过重新给该元素的className属性赋值,修改了元素的类属性,从而使页面元素获得动态效果。varrows=document.getElementsByTagName(tr);/获取标记为tr全部元素for(vari=0;irows.length;i+)r

80、owsi.onmouseover=function()/鼠标在行上面的时候this.className+=altrow;/,给该行应用类altrowrowsi.onmouseout=function()/鼠标离开时,去掉该行标记中的class属性,即用空串替换类名“altrow”this.className=this.className.replace(altrow,);131(4)form 对象的访问对象的访问form对象代表一个表单。在HTML文档中每出现一次,form对象就会被创建。form对象的elements属性,表示包含表单中所有元素的数组。例如,表单“sampleForm”有个名

81、为“mytext”的文本框对象,则可以用document.formsi.elementsj来访问。其中的i表示当前表单在整个网页中是第几个表单,j表示该元素是表单的第几个元素,排序均按出现顺序,从0开始计数。文本框对象的值用属性value表示,如果要给文本框中放置值“hello!”,可以采用如下赋值语句实现:document.formsi.elementsj.value=hello!;还可以采用第二种方法的实现对表单对象的访问,即用“document.sampleForm.mytext”表示表单的文本框,对其赋值的操作可以写作:document.sampleForm.mytext.vlaue=hello!;

展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 高等教育 > 研究生课件

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号