1、HTML、CSS和JSWeb技术与应用主主 讲讲 教教 师：邹红艳师：邹红艳E-Mail地址：地址：主要内容主要内容 2HTMLHTML1CSCSS S样式表样式表2JavascriptJavascript3 3常用的常用的HTML标记标记q 标题文字标记标题文字标记 标题文字标题文字 q 文字样式标记文字样式标记 “color”“face”“size”q 文字对齐标记文字对齐标记 q 分段标记分段标记 q 换行标记换行标记 q 水平线标记水平线标记 q 预格式化标记预格式化标记e-01.HTML文字块标记文字块标记移动文字标记移动文字标记有序列表标记有序列表标记无序列表标记无序列表标记列表项
2、标记列表项标记表格标记表格标记定义表格行标记定义表格行标记定义表格单元格标记定义表格单元格标记定义列标题标记定义列标题标记表单标记表单标记框架集标记框架集标记框架标记框架标记框架标记框架标记多媒体标记多媒体标记其他的其他的HTML标记标记 5滚动字幕滚动字幕 “插入插入”-“标签标签”q标记常用属性标记常用属性align属性，设定活动字幕的位置，取值可以是属性，设定活动字幕的位置，取值可以是left、center、right、top或或bottom。bgcolor属性，设定活动字幕的背景颜色，一般是十六进制数。属性，设定活动字幕的背景颜色，一般是十六进制数。direction属性，设定活动字幕
3、的滚动方向，取值可以是属性，设定活动字幕的滚动方向，取值可以是left、right、up或或down。behavior属性，设定滚动的方式，主要有三种方式：属性，设定滚动的方式，主要有三种方式：behavior=“scroll”表示由一端滚动到表示由一端滚动到另一端；另一端；behavior=“slide”表示由一端快速滑动到另一端，且不再重复；表示由一端快速滑动到另一端，且不再重复；behavior=“alternate”表示在两端之间来回滚动。表示在两端之间来回滚动。height和和width属性，设定滚动字幕的高度和宽度。属性，设定滚动字幕的高度和宽度。hspace和和vspace属性，
4、设定滚动字幕的左右边框和上下边框的宽度。属性，设定滚动字幕的左右边框和上下边框的宽度。scrollamount属性，设定活动字幕的滚动距离。属性，设定活动字幕的滚动距离。scrolldelay属性，用于设定滚动两次之间的延迟时间。属性，用于设定滚动两次之间的延迟时间。loop属性，用于设定滚动的次数，当属性，用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。表示一直滚动下去，直到页面更新。q例：例：超链接和多媒体示例超链接和多媒体示例e-02.HTML 6超链接标记超链接标记q链接文本或链接文本或图像图像qhref指出转向的指出转向的URL。target属性指出该超链接指属性
5、指出该超链接指向的向的HTML文档在指定目标窗口中打开，文档在指定目标窗口中打开，target属属性取值及其说明如下表所示。性取值及其说明如下表所示。名称名称说明说明_blank将链接的内容显示在新的浏览器窗口中。将链接的内容显示在新的浏览器窗口中。_self将链接的内容显示在当前窗口中。将链接的内容显示在当前窗口中。_parent将链接的内容显示在父窗口中。将链接的内容显示在父窗口中。_top将链接的内容显示在浏览器主窗口中。将链接的内容显示在浏览器主窗口中。自定义自定义URL在自定义的窗口中显示在自定义的窗口中显示超链接标记的使用超链接标记的使用q上一页上一页q q电子信箱地址电子信箱地址
6、q 播放音乐文件播放音乐文件q 播放影像文件播放影像文件 7 8页面多媒体技术页面多媒体技术q图像标记图像标记 width、heightimg src=“URL”q背景音乐标记背景音乐标记Loop=-1表示循环播放表示循环播放 9页面多媒体技术页面多媒体技术-续续q音乐和影像文件音乐和影像文件 其功能是创建一个空的表格，并指定表格的整体外观，此时在浏览器中看不到该表格，只有添加行后才能看到。表格标记常用的属性如下：nborder=size：设置表格边框大小。nwidth=size：设置表格的宽度（像素或百分比）。nheight=size：设置表格的高度（像素或百分比）。ncellspacing
7、=size：设置单元格间距。ncellpadding=size：设置单元格的填充距。nbackground=URL：设置表格背景图像。nbgcolor=colorvalue：设置表格背景色。nalign=alignstyle：设置对齐方式，alignstyle可取值left（左对齐）、center（居中）和right（右对齐）值之一。ncols=size：设置表格的列数。表格表格使用只是定义空表格，还需要定义表标题、行、列标题和单元格。1.定义表标题用法：其功能是定义表格的表标题，其属性较少使用。2.定义行用法：其功能是定义表格的一行。对于每一行，可以定义行属性，常用的行属性如下：nbgcol
8、or=colorvalue：设置行背景颜色。nbackground=URL：设置表格行的背景图像。nalign=alignstyle：设置行对齐方式，alignstyle可取值left（左对齐）、center（居中）和right（右对齐）值之一。nvalign=valignstyle：设置行中单元格垂直对齐方式，valignstyle可取值top（顶端对齐）、middle（居中）、bottom（底端对齐）和baseline（基线对齐）值之一。定制表格定制表格3.定义列标题用法：其功能是定义一个列标题。对于每一行，可以定义行属性，常用的行属性如下：nbgcolor=colorvalue：设置列标
9、题背景颜色。nbackground=URL：设置列标题背景图像。nalign=alignstyle：设置列标题对齐方式，alignstyle可取值left（左对齐）、center（居中）和right（右对齐）值之一。nvalign=valignstyle：设置列标题垂直对齐方式，valignstyle可取值top（顶端对齐）、middle（居中）、bottom（底端对齐）和baseline（基线对齐）值之一。定制表格定制表格4.定义单元格用法：在每一行中可以定义若干单元格。单元格的常用属性如下：nbgcolor=colorvalue：设置单元格背景颜色。nbackground=URL：设置表格
10、单元格的背景图像。nrowspan=num：设置单元格所占的行数。ncolspan=num：设置单元格所占的列数。nalign=alignstyle：设置对齐方式。nvalign=valignstyle：设置单元格垂直对齐方式。nwidth=size：设置单元格宽度。nheight=size：设置单元格高度。定制表格定制表格例：表格例：表格e-03.html表单表单qHTML提供的表单（提供的表单（form）是用来将用户输入的数）是用来将用户输入的数据从浏览器传递给据从浏览器传递给Web服务器的。服务器的。q语法：语法：q主要属性主要属性例如：例如：，当用户点击本表单的提交按，当用户点击本表单
11、的提交按钮以后，执行钮以后，执行Web服务器上的服务器上的t-03.aspx文件将接文件将接收用户输入的信息。收用户输入的信息。15表单控件表单控件(第三章将详细介绍第三章将详细介绍)16在与之间可以嵌入各种控件，也称为表单域标记。它们的通用格式为：其中，type属性设置该控件的类型，id确定该控件在整个文档中id值。在Visual Studio.NET 中，工具箱的“HTML”选项卡上提供下列HTML控件：Input（Button）控件：INPUT type=button元素。Input（Submit）控件：INPUT type=submit元素。Input（Reset）控件：INPUT t
12、ype=reset元素。Input（Checkbox）控件：INPUT type=checkbox元素。Input（Radio）控件：INPUT type=radio元素。Input（Hidden）控件：INPUT type=hidden元素。Input（Text）控件：INPUT type=text元素。Input（Password）控件：INPUT type=password元素。Select控件：多重选择框元素。例：例：e-04.html和和e-04.aspx的运行效果的运行效果 17层次块标记层次块标记和和 18q层次块标记层次块标记div（逻辑分区（逻辑分区division）层次块标
13、记层次块标记用于定义网页上的一个矩形块，中间可以用于定义网页上的一个矩形块，中间可以包含引起行中断的标记，如包含引起行中断的标记，如标记等。标记等。层次块标记的一般形式是：层次块标记的一般形式是：q标记属性标记属性 Id属性属性，用于标记一个，用于标记一个块，以便引用该块。块，以便引用该块。q在行内定义一个区域，也就是一行内可以被在行内定义一个区域，也就是一行内可以被划分成好几划分成好几个区域，从而实现某种特定效果。和个区域，从而实现某种特定效果。和标记相比，标记相比，在在CSS定定义中属于一个行内元素，而义中属于一个行内元素，而是块级元素是块级元素 q和和没有默认的显示样式没有默认的显示样式
14、，必须使用，必须使用style属性和属性和class样式样式类定义图层块的位置、大小、显示属性等类定义图层块的位置、大小、显示属性等。19CSS（层叠样式表）（层叠样式表）q CSS（Cascading Style Sheets）是）是W3C定义和维定义和维护的护的标准标准，是一种用来为结构化文档（如，是一种用来为结构化文档（如HTML文档文档或或XML文档）添加文档）添加样式样式（字体、间距和颜色等）的（字体、间距和颜色等）的计计算机语言算机语言。20CSS（层叠样式表）概述（层叠样式表）概述q CSS（Cascading Style Sheets）是）是W3C定义和维护的定义和维护的标准标
15、准，是一种用来为结构化文档（如是一种用来为结构化文档（如HTML文档或文档或XML文档）添加文档）添加样样式式（字体、间距和颜色等）的（字体、间距和颜色等）的计算机语言计算机语言。q XHTML能限定浏览器中网页元素的显示格式，但可控性不强，能限定浏览器中网页元素的显示格式，但可控性不强，如统一网站风格需要逐个网页去修改。如统一网站风格需要逐个网页去修改。弥补弥补XHTML在显示上的不足，提供更为丰富的样式；在显示上的不足，提供更为丰富的样式；将将XHTML文件的信息内容和它的显示样式、布局分离开；文件的信息内容和它的显示样式、布局分离开；可以进行集中样式管理。一个可以进行集中样式管理。一个C
16、SS样式文件可以作用到多样式文件可以作用到多个个XHTML文件，这样，当要同时改变多个文件，这样，当要同时改变多个XHTML网页风网页风格时，只要修改格时，只要修改CSS样式文件即可。样式文件即可。http:/www.w3.org/Style/CSS/21定义定义CSS样式样式q每个每个CSS样式有两个主要部分：选择器（如样式有两个主要部分：选择器（如h1）和声明（如和声明（如color:blue）。声明由一个属性）。声明由一个属性（color）及其值（）及其值（blue）组成。）组成。q根据定义的不同用途，根据定义的不同用途，CSS样式包括样式包括基于元素的样式基于元素的样式基于类的样式基于
17、类的样式基于基于ID的样式。的样式。221 基于元素的样式基于元素的样式 q基于元素的样式将基于元素的样式将重新定义重新定义指定指定XHTML元素的属性元素的属性q样式规则为：样式规则为：定义：标记定义：标记，如，如:h3color:red；font-size:14px;HTML文件：文件：，如，如:q例子：例子：h1color:green;text-align:center;font-style:italic;font-family:隶书隶书;font-size:x-large;232 基于类的样式基于类的样式 q同一个基于类的样式可以应用于不同的同一个基于类的样式可以应用于不同的XHTML
18、元素或某个元素或某个XHTML元素的子集（如应元素的子集（如应用于部分段落而不是全部段落）。定义时，要用于部分段落而不是全部段落）。定义时，要在选择器名前加在选择器名前加“.”，如对类名，如对类名tt定义为红色定义为红色的样式规则为：的样式规则为：.tt color:#ff0000;q在页面中，用在页面中，用class=类名类名的方法调用，如：的方法调用，如：243 基于基于ID的样式的样式 q id 选择器可以为标有特定选择器可以为标有特定 id 的的 HTML 元素指定特定元素指定特定的样式。定义时，需在选择器（的样式。定义时，需在选择器（ID名）前加名）前加“#”。定。定义：义：#标记标
19、记 q 例：在网页例：在网页CSS布局中主要靠层布局中主要靠层“div”实现，而实现，而“div”的样式常采用基于的样式常采用基于ID的样式。如要对定义的层的样式。如要对定义的层设置背景色为绿色的样式规则设置背景色为绿色的样式规则为：为：#tt background-color:#008000;q id 选择器具有一些类选择器所没有的功能，选择器具有一些类选择器所没有的功能，JavaScript程序利用程序利用ID来定位和处理网页的各个部分。来定位和处理网页的各个部分。注意：注意：当三种样式运用于同个当三种样式运用于同个XHTML元素时，基于元素时，基于ID的的样式优先级最高，其次是基于类的样
20、式，最后是基于样式优先级最高，其次是基于类的样式，最后是基于元素的样式。元素的样式。25CSS样式位置样式位置qCSS样式规则可以放在不同的位置，包括：样式规则可以放在不同的位置，包括：与与XHTML元素的内联元素的内联位于页面的位于页面的元素中元素中外部样式表（外部样式表（.css文件）中。文件）中。在VS中通过“网站”|“添加新项”，选择“样式表”来添加样式表（.css文件）。css优先级优先级qid优先级高于优先级高于class的样式的样式q后面的样式覆盖前面的样式后面的样式覆盖前面的样式q指定的高于继承的样式指定的高于继承的样式q行内样式高于内部或外部样式行内样式高于内部或外部样式 总
21、结：单一的总结：单一的(id)高于共用的高于共用的(class)，有指定的用指，有指定的用指定的，无指定则继承离它最近的定的，无指定则继承离它最近的 注意：注意：不同位置不同位置CSS样式规则的优先级是内联样式最样式规则的优先级是内联样式最高，其次是页面中的高，其次是页面中的CSS样式，最后是外部样式表样式，最后是外部样式表。26 27应用应用CSS样式的三种方式样式的三种方式q 直接定义直接定义style属性属性q 在在HTML文档内定义内部样式表文档内定义内部样式表q 外部外部(链接链接)样式单样式单 281.直接定义直接定义style属性属性q 语法语法q q 例子：例子：e-05.HT
22、ML 29 2.定义内部样式表定义内部样式表e-06.HTML 30例：使用例：使用CSS控制文字显示特性控制文字显示特性e-07.HTML 313.链接外部样式表链接外部样式表q将样式表定义为一个独立的将样式表定义为一个独立的CSS样式文件，扩展名样式文件，扩展名为为.css；q使用该样式表的使用该样式表的HTML文件在头部用文件在头部用标记链标记链接到这个接到这个CSS样式文件即可。样式文件即可。q优点：不但本页可以调用，其它页面也可以调用，优点：不但本页可以调用，其它页面也可以调用，是最常用的一种形式。是最常用的一种形式。e-08.HTMLrel：表示链接的类型，如样式表：表示链接的类型
23、，如样式表；href：指定：指定CSS样式文件，是一个样式文件，是一个URL；type：指出样式的类别，是一个包含：指出样式的类别，是一个包含CSS的文本文件；的文本文件；32例样式表文件：例样式表文件：style1.css 33例：例：e-09.htm引用样式表引用样式表style2.css qcss样式表：样式表：style2.css q源程序：源程序：e-09.htme-09.HTMLstyle2.css 34CSS属性属性 1.字体字体属性属性字体（字体（font-family）字号（字号（font-size）字体风格（字体风格（font-style）字体加粗（字体加粗（font-we
24、ight）字体变化（字体变化（font-variant）字体综合设置（字体综合设置（font）属性）属性 35CSS属性属性 2.颜色和背景属性颜色和背景属性（前景）颜色（color）背景颜色（background-color）背景图象（background-image）背景重复（background-repeat）背景附属方式(background-attachment)背景图象位置(background-position)背景属性（background）36CSS属性属性 3.文本属性文本属性字符间隔（字符间隔（letter-spacing）文本修饰（文本修饰（text-decoratio
25、n）大小写转换（大小写转换（text-transform）文本横向排列（文本横向排列（text-align）文本纵向排列（文本纵向排列（vertical-align）文本缩排（文本缩排（text-indent）行高（行高（line-height）超链接的四种样式超链接的四种样式qa:link color:#0000FF/*未访问的链接未访问的链接*/qa:visited color:#00FF00/*已访问的链接已访问的链接*/qa:hover color:#FF0000/*鼠标移动到链接上鼠标移动到链接上*/qa:active color:#FF00FF/*选定的链接选定的链接,执行链执行链
26、接的时候接的时候*/37例：超链接样例（例：超链接样例（e-10.html）38例：超链接样例（例：超链接样例（e-11.html）q链接在默认状态下是内联元素，转链接在默认状态下是内联元素，转换为块级元素后可以设置宽度和高换为块级元素后可以设置宽度和高度。度。display:block。39CSS 框模型概述框模型概述qDIV排版的核心所在。排版的核心所在。q通过由通过由CSS定义的大定义的大小不一的盒子和盒子嵌小不一的盒子和盒子嵌套来编排网页。这种排套来编排网页。这种排版方式的网页代码简洁版方式的网页代码简洁，表现和内容相分离，表现和内容相分离，维护方便。维护方便。40用用css制作按钮（
27、制作按钮（e-12.html）41用用css制作横向列表菜单（制作横向列表菜单（e-13.html）42用图片美化的横向导航（用图片美化的横向导航（e-14.html）43用用css制作下拉及多级弹出菜单（制作下拉及多级弹出菜单（e-15.html）44第一行设置二级菜单的灰色边框；宽度设置成和一级菜单宽度相同，第二行的width:85px再加上第一行上设置的边框左右各1px后正好是87px，和一级菜单宽度相同。margin:0是为了清除掉继承一级菜单中margin-left:2px；最后一行设置鼠标划过时的样式。把二级菜单隐藏，当鼠标划过时显示出来。用用css制作横向图文列表（制作横向图文列
28、表（e-16.html）45 46表格和表格和CSS布局布局q思想思想表格用于定位网页内容（通过大小不一的表格和表格嵌表格用于定位网页内容（通过大小不一的表格和表格嵌套来定位排版网页内容套来定位排版网页内容CSS用于控制网页格式用于控制网页格式q优点优点网页内容和网页格式分离，易于网站的维护。网页内容和网页格式分离，易于网站的维护。案例案例1：表格布局：个人主页：表格布局：个人主页e-20.html 47案例案例2：DIV布局：布局：e-21.html 48案例案例3：DIV布局：布局：e-22.html 49Css的效果：的效果：e-22-f.html 50 51案例案例4：“表格表格+CS
29、S”排版网页排版网页q 练习文件练习文件 tablecss.htmq 最终文件最终文件 tablecss-end.htmq 任务要求任务要求 学会在页面中使用学会在页面中使用“表格表格+CSS”进行排版进行排版q 操作过程操作过程 打开打开tablecss.htm 建立建立CSS文档文档tablecss.css，内有，内有4个个css规则：规则：52“表格表格+CSS”排版网页（续）排版网页（续）q 操作过程操作过程.left_tdbgall类选择器：类选择器：/*表格样式定义表格样式定义*/.left_tdbgall width:170px;/*定义表格宽度定义表格宽度*/height:23
30、7px;/*定义表格高度定义表格高度*/background-color:#666666;/*定义背景颜色为灰色定义背景颜色为灰色*/border:1px solid#0099FF;/*定义表格边框为定义表格边框为1像素蓝色细线像素蓝色细线*/53“表格表格+CSS”排版网页（续）排版网页（续）q 操作过程操作过程.left_top类选择器：类选择器：.left_top /*顶部单元格背景、文字、段落格式等定义顶部单元格背景、文字、段落格式等定义*/color:#FFFFFF;/*定义文字颜色定义文字颜色*/height:27px;/*定义单元格高度定义单元格高度*/width:170px;/
31、*定义单元格宽度定义单元格宽度*/text-align:left;/*定义段落对齐方式为左对齐定义段落对齐方式为左对齐*/background-image:url(image/tb_title.gif);/*定义单元格背景图像定义单元格背景图像*/background-position:center;/*定义背景图像居中定义背景图像居中*/background-repeat:no-repeat;/*定义背景图像不重复定义背景图像不重复*/padding-left:25px;/*设置方框中填充对象的左边距为设置方框中填充对象的左边距为20像素像素*/font-size:12px;/*定义文字大小
32、定义文字大小*/vertical-align:middle;/*定义文字在单元格垂直方向居中对齐定义文字在单元格垂直方向居中对齐*/54“表格表格+CSS”排版网页（续）排版网页（续）q 操作过程操作过程.left_mid类选择器：类选择器：.left_mid /*中部单元格背景、文字、段落格式等定义中部单元格背景、文字、段落格式等定义*/padding:5px;/*定义填充内容的边距定义填充内容的边距*/height:200px;/*定义单元格高度定义单元格高度*/width:170px;/*定义单元格宽度定义单元格宽度*/font-size:12px;/*定义文字大小定义文字大小*/bac
33、kground-color:#CCCCCC;/*定义背景颜色为浅灰色定义背景颜色为浅灰色*/color:#000000;/*定义文字颜色定义文字颜色*/list-style-position:outside;/*定义列表位置为内部定义列表位置为内部*/list-style-image:url(image/main_arrow.gif);55“表格表格+CSS”排版网页（续）排版网页（续）q 操作过程操作过程.left_end类选择器：类选择器：.left_end /*底部单元格背景、文字、段落格式等定义底部单元格背景、文字、段落格式等定义*/height:10px;/*定义单元格高度定义单元格
34、高度*/width:170px;/*定义单元格宽度定义单元格宽度*/font-size:11px;/*定义文字大小定义文字大小*/color:#FFFFFF;/*定义文字颜色定义文字颜色*/text-align:right;/*定义段落对齐方式为左对齐定义段落对齐方式为左对齐*/background-color:#3399FF;/*定义背景颜色为浅蓝色定义背景颜色为浅蓝色*/56“表格表格+CSS”排版网页（续）排版网页（续）q 操作过程（设置操作过程（设置Class属性）属性）在在tablecss.htm中插入一个中插入一个3行行1列的表格列的表格整个表格采用整个表格采用.left_tdbg
35、all第第1个单元格输入个单元格输入“最新文章最新文章”，并采用，并采用“.left_top”样式样式第第2个单元格输入列表内容，并采用个单元格输入列表内容，并采用“.left_mid”样式样式第第3个单元格输入个单元格输入“more”，并采用，并采用“.left_end”样式样式57三、三、JavaScript常识常识 qJavaScript是由网景公司（是由网景公司（NetScape）开发）开发的基于对象和事件驱动的解释型语言。作为一的基于对象和事件驱动的解释型语言。作为一种脚本语言可以直接嵌入到种脚本语言可以直接嵌入到XHTML页面中，页面中，不需要不需要Web服务器端的解释执行即可由浏
36、览器服务器端的解释执行即可由浏览器实现动态网页处理。实现动态网页处理。q目前，所有的浏览器均支持目前，所有的浏览器均支持JavaScript。58典型的典型的JavaScript用途用途q在在XHTML中创建动态文本。中创建动态文本。q响应客户端事件。响应客户端事件。q页面上显示时间。页面上显示时间。q可以读取并改变可以读取并改变XHTML元素的内容。元素的内容。q在数据提交到服务器之前，验证这些数据。在数据提交到服务器之前，验证这些数据。q可检测访问者的浏览器，并根据检测到的浏览可检测访问者的浏览器，并根据检测到的浏览器类型载入相应的页面。器类型载入相应的页面。q用来创建用来创建cookie
37、s。q关闭窗口。关闭窗口。593.1 JavaScript代码位置代码位置1.在在元素中元素中2.在在元素中元素中3.独立的独立的.js文件文件中中q注意：包含于注意：包含于元素中的元素中的JavaScript肯肯定会执行，而定会执行，而元素中的元素中的JavaScript只只有被调用才执行。有被调用才执行。601 在在元素中元素中q元素中的元素中的JavaScript代码包含于代码包含于元素之间，只有在被调用或当事件被触发时才元素之间，只有在被调用或当事件被触发时才会执行。会执行。61例例:元素中的元素中的JavaScript代码代码j-01.htmq程序说明：程序说明：当网页执行到当网页执
38、行到元素时，触发元素时，触发load事件，事件，再调用再调用message()函数，最后在浏览器中显示函数，最后在浏览器中显示“在在”信息。信息。622 在在元素中元素中 q与与元素中的元素中的JavaScript类似，类似，元素中的元素中的JavaScript代码也要包含于代码也要包含于之间。之间。63例：例：元素中的元素中的JavaScript代码代码q源程序：源程序：j-02.htm在页面载入时执行在页面载入时执行docment.write方法输出方法输出XHTML文本文本“在在<body>元素中元素中”，浏览，浏览器上显示效果是器上显示效果是“在在元素中元素中”。q注意：注意：
39、“”用用“>”表示。表示。643 在独立的在独立的.js文件中文件中 q独立的独立的.js文件常用于多个页面需要调用相同文件常用于多个页面需要调用相同JavaScript代码的情形。代码的情形。q通常把所有通常把所有.js文件放在同一个脚本文件夹中，文件放在同一个脚本文件夹中，这样容易管理。这样容易管理。q在调用外部在调用外部JavaScript文件时，需在文件时，需在元素中加入元素中加入src属性值，指定外部属性值，指定外部js文件的位文件的位置。置。65例例:j-03.htm 调用独立的调用独立的j-03.js文件文件 q 程序说明：程序说明：在在j-03.htm文件中，文件中，src
40、属性表示独立的属性表示独立的.js文件文件存放位置；当网页执行存放位置；当网页执行到到元素时，触发元素时，触发load事件并调用事件并调用j-03.js中中的的message()函数。函数。q 注意：注意：在在.js中不要包含中不要包含元素。元素。66例例j-04:检测浏览器类型检测浏览器类型q本 实 例 将 检 测 浏 览 器 类 型，如 果 浏 览 器 为本 实 例 将 检 测 浏 览 器 类 型，如 果 浏 览 器 为Netscape或或4.0以上版本的以上版本的IE，则显示，则显示“您的浏您的浏览器满足要求！览器满足要求！”，否则显示，否则显示“请更新您的浏览请更新您的浏览器器”。q源
41、程序：源程序：j-04.htmq程序说明：程序说明：“/”表示语句注释；表示语句注释；navigator.appName返回返回“浏览器名浏览器名”；navigator.appVersion返回返回“浏览器版本号浏览器版本号”；parseFloat()将字符型数据转化为浮点型数据；将字符型数据转化为浮点型数据；67例例:j-05 按钮动画按钮动画q源程序源程序：j-05.htm和和j-05-01.html(DR自动生自动生成交换图片相关程序成交换图片相关程序)q程序说明：程序说明：网页载入后显示网页载入后显示eg_mouse2.jpg；当鼠标指针指向图；当鼠标指针指向图片时触发片时触发mouseover事件调用事件调用mouseOver()函数显示函数显示eg_mouse.jpg，移开时触发，移开时触发mouseout事件调用事件调用mouseOut()函数显示函数显示eg_mouse2.jpg；单击后链接；单击后链接到到。68例例:j-06 计时器在不同页面的显示计时器在不同页面的显示q源程序：源程序：j-06.htm、t-06.aspx和和e-04.htmlq程序说明：程序说明：网页载入后调用网页载入后调用startTime()函数在函数在div层层txt上上显示当前系统时间。显示当前系统时间。
