JAVAWEB网页设计课件之第二章.ppt

1、Date:2022年5月15日星期日1Web系统开发技术Date:2022年5月15日星期日2第第2章章 复习复习描述手工建立描述手工建立Web应用的过程应用的过程描述通过描述通过MyEclipse建立建立Web应用的过程应用的过程Date:2022年5月15日星期日3第第3章章 静态网页开发技术静态网页开发技术3.1 背景知识背景知识3.2 HTML3.2.1 HTML基础基础3.2.2 常用标记常用标记3.2.3 表格表格3.2.4 表单及常用控件表单及常用控件3.3 JavaScript3.4 CSSDate:2022年5月15日星期日43.1 背景知识背景知识Date:2022年5月1

2、5日星期日5HTTP协议的工作过程协议的工作过程四个过程：建立连接、发送请求、发送响应、关闭连四个过程：建立连接、发送请求、发送响应、关闭连接接建立连接建立连接：通过申请套接字（：通过申请套接字（Scoket），客户打开一个套接），客户打开一个套接字，并将自己绑定到该端口上。字，并将自己绑定到该端口上。发送请求发送请求：打开一个连接后，客户机将请求发送到服务器指：打开一个连接后，客户机将请求发送到服务器指定的端口，并完成提出请求动作。定的端口，并完成提出请求动作。发送响应发送响应：服务器在处理完用户的请求以后，要想客户机发：服务器在处理完用户的请求以后，要想客户机发送相应信息。送相应信息。关闭

3、连接关闭连接：通信双方通过关闭套接字的办法关闭连接：通信双方通过关闭套接字的办法关闭连接Date:2022年5月15日星期日6统一资源定位符（统一资源定位符（URL）实例实例：http:/:80/cs/news.htmlURL的构成：的构成：http:/ 代表超文本传输协议，通知服务器显示代表超文本传输协议，通知服务器显示Web页面页面WWW Web服务器的主机名服务器的主机名，Web服务器所在的域名服务器所在的域名:80,端口号，默认为端口号，默认为80CS 服务器上的子目录服务器上的子目录news.html文件夹中的一个文件夹中的一个html文件文件Date:2022年5月15日星期日73

4、.2 HTMLDate:2022年5月15日星期日83.2.1 HTML基础基础Date:2022年5月15日星期日9HTML基础基础超文本标记语言超文本标记语言HTML源于标准通用化标记语言源于标准通用化标记语言SGML（Standard General Markup Language）是）是SGML的子集的子集（XML同样也是其子集），由同样也是其子集），由Web的发明者的发明者Tim和和Daniel于于1990年创立。年创立。HTML是一门标记型语言，只要记住各个标记的用法即是一门标记型语言，只要记住各个标记的用法即可可可以用任何文本编辑器来编写可以用任何文本编辑器来编写HTML页面，只

5、要将创建页面，只要将创建的页面保存为的页面保存为html或或htm即可。即可。在客户端浏览器可以查看所编写的源代码。在客户端浏览器可以查看所编写的源代码。Date:2022年5月15日星期日10HTML语言简介语言简介HTML的基本语法的基本语法HTML文件由标记和文本组成，格式为：文件由标记和文本组成，格式为：在浏览器中显示的文本在浏览器中显示的文本标记名和标记名和“”之间不能有空格之间不能有空格属性通过属性控制各种输出效果，格式为：属性通过属性控制各种输出效果，格式为：受到属性影响的文本受到属性影响的文本例如：例如：属性示例属性示例属性之间没有顺序，且只能加于起始标记中。属性之间没有顺序，

6、且只能加于起始标记中。Date:2022年5月15日星期日11HTML语言简介语言简介标记可以分为单标记和双标记两种：标记可以分为单标记和双标记两种：单标记单独使用，如：单标记单独使用，如：双标记成对使用，如：双标记成对使用，如：对于同一段文本，可以使用多个嵌套标记来共同作用，产生对于同一段文本，可以使用多个嵌套标记来共同作用，产生一定的效果，但需要注意标记出现的顺序。一定的效果，但需要注意标记出现的顺序。网页标题网页标题网页标题网页标题 （错误）（错误）HTML语言不区分大小写语言不区分大小写Date:2022年5月15日星期日12HTML注释注释HTML注释注释HTML的注释标记为的注释标

7、记为“”和和“”可以插入到可以插入到HTML文本文本的任何地方。的任何地方。例如：例如：HTML或或JSP文件中文件中HTML注释将发送到客户端浏览器，但不注释将发送到客户端浏览器，但不显示。显示。这与后面将要讲解的这与后面将要讲解的JSP注释不同：注释不同：JSP注释的内容不会发注释的内容不会发送到客户端，但在注释出现的位置出现一个空行。送到客户端，但在注释出现的位置出现一个空行。Date:2022年5月15日星期日13HTML文件的基本结构文件的基本结构HTML文件的基本结构文件的基本结构HTML文件以文件以开头，以开头，以结束结束HTML文件包括头部文件包括头部和主体和主体两个部分两个部

8、分基本结构为：基本结构为：网页标题例例html_1.htmlHeadHead的内容可以是标题和元信息的内容可以是标题和元信息（网页关键字、文本文件地址、（网页关键字、文本文件地址、创作信息等网页信息说明）创作信息等网页信息说明）Date:2022年5月15日星期日14HTML文件的基本结构文件的基本结构HMTL文件标题标记文件标题标记 网页标题网页标题标记是可选的，可以没有标记是可选的，可以没有标记，而单独使用标记，而单独使用标记标记HTML的标记不可以直接出现在要显示的内容中，如果的标记不可以直接出现在要显示的内容中，如果需要显示则必须使用相应的转义符代替：需要显示则必须使用相应的转义符代替

9、：例例html_2.htmDate:2022年5月15日星期日15HTML文件的基本结构文件的基本结构HTML文件的主体标记文件的主体标记 主题内容主题内容background设置网页的背景图像设置网页的背景图像bgcolor 设置网页的北京颜色设置网页的北京颜色text 设置文本的字体颜色设置文本的字体颜色注：注：HTML颜色的取值可以用颜色的取值可以用英文单词英文单词或以或以引导的十六进制代码引导的十六进制代码表表示，颜色代码由六个数字组成，即示，颜色代码由六个数字组成，即#RRGGBB,每一位都是一位十六进每一位都是一位十六进制的数字，从制的数字，从0F，可以产生，可以产生1677万多种

10、颜色。万多种颜色。也是一个可选标记也是一个可选标记例例body.bgcolor.html和和body.text.htmlDate:2022年5月15日星期日163.2.2 常用标记常用标记Date:2022年5月15日星期日17文字格式标记文字格式标记文字格式标记文字格式标记设置标题设置标题标题内容标题内容属性属性align,用来设置标题在页面中的对其方式：用来设置标题在页面中的对其方式：left(左对齐，默认左对齐，默认)、center（居中）、（居中）、right（右对齐）（右对齐）属性属性n,用来指定标题的大小，可以取用来指定标题的大小，可以取16的整数，取的整数，取1时字体最大，时字体

11、最大，取取6时字体最小时字体最小标记显示宋体字标记显示宋体字标记会自动在标题后加入一个空行，不必再使标记会自动在标题后加入一个空行，不必再使用用标记再加入空行。标记再加入空行。在一个标题中无法使用不同大小的字体在一个标题中无法使用不同大小的字体例例hn.htmDate:2022年5月15日星期日18文字格式标记文字格式标记设置字体设置字体标记可以用来设置文字的字体，颜色以及字号。标记可以用来设置文字的字体，颜色以及字号。face属性，用来设置文字的字体，可能的取值为宋体、黑体、属性，用来设置文字的字体，可能的取值为宋体、黑体、隶书等等，但需要注意除非客户端支持这些字体，否则无法隶书等等，但需要

12、注意除非客户端支持这些字体，否则无法显示期望的效果。显示期望的效果。Size属性，用来设置文字的大小，数字的取值范围从属性，用来设置文字的大小，数字的取值范围从17，取取1时最小，取时最小，取7时最大。时最大。Color属性，用来设置文字的颜色，颜色的取值遵从前面所讲属性，用来设置文字的颜色，颜色的取值遵从前面所讲的规范。的规范。例例font.size.htmlDate:2022年5月15日星期日19文字格式标记文字格式标记设置字体的颜色设置字体的颜色利用利用标记中标记中text属性，可以设定整个网页的颜色属性，可以设定整个网页的颜色利用利用标记中的标记中的color属性，可以设定段落、短语或

13、字词属性，可以设定段落、短语或字词的颜色的颜色和和设置字体颜色时的优先级设置字体颜色时的优先级当当和和同时设定字体的颜色时，同时设定字体的颜色时，设置的字体颜设置的字体颜色优先。色优先。例例font.color.htmlDate:2022年5月15日星期日20文字格式化标记文字格式化标记其他字体标记其他字体标记设置字型，即文字的风格，如加粗、斜体、带下划线、上标、设置字型，即文字的风格，如加粗、斜体、带下划线、上标、下标等等下标等等.例例font.other.html.Date:2022年5月15日星期日21文字版面标记文字版面标记文字版面标记文字版面标记通过文字版面标记可以设置换行、文字分段

14、、对齐等等。通过文字版面标记可以设置换行、文字分段、对齐等等。换行标记换行标记强制换行标记强制换行标记，放到一行的末尾，可使后面的问题，放到一行的末尾，可使后面的问题换到下一行，而有不会在行与行之间留下空行。其格式换到下一行，而有不会在行与行之间留下空行。其格式为：为： 前一行要显示文字前一行要显示文字需要换行显示的文字需要换行显示的文字强制不换行标记强制不换行标记，使某些文字不因过长而分两，使某些文字不因过长而分两行显示，行显示，对于数学格式等特殊文本的显示非常有作用。对于数学格式等特殊文本的显示非常有作用。格式为：格式为：需要在同一行中显示的问题需要在同一行中显示的问题Date:2022年

15、5月15日星期日22文字版面标记文字版面标记段落标记段落标记强制段落标记强制段落标记,放在一段文字的开头或者末尾，定义一个放在一段文字的开头或者末尾，定义一个新段落的开始，不但能使后面的文字进行换行，而且还能在新段落的开始，不但能使后面的文字进行换行，而且还能在两段之间留一空行。格式为：两段之间留一空行。格式为： 前一段落前一段落后一段落后一段落标记可以看作是强制换行标记标记可以看作是强制换行标记和一个空行和一个空行非换行空格符号，非换行空格符号，“nbsp”当在编辑当在编辑html文件需要输入多个空格时，浏览器对这些标记进行文件需要输入多个空格时，浏览器对这些标记进行解析时，只会保留一个空格

16、。但使用该标记可以实现段首空两行的解析时，只会保留一个空格。但使用该标记可以实现段首空两行的效果。效果。例例br.p.htmlDate:2022年5月15日星期日23文字版面标记文字版面标记对齐标记对齐标记设置段落标记，格式为：设置段落标记，格式为： 要显示的文字要显示的文字属性属性align用来设置段落的对齐方式，可以为用来设置段落的对齐方式，可以为left、center、或、或right。默认值为默认值为left。原来是个双标记，但从原来是个双标记，但从html 2.0开始变为单标记，当然也可以开始变为单标记，当然也可以加上结束标记来控制效果产生的范围。加上结束标记来控制效果产生的范围。居

17、中标记，居中标记，确保标记中间的内容确保标记中间的内容居中居中显示，作用相当于：显示，作用相当于：要显示的内容要显示的内容其格式为：其格式为：需要居中显示的内容需要居中显示的内容p.htmlDate:2022年5月15日星期日24文字版面格式文字版面格式显示预排版格式显示预排版格式用于保留在编辑环境中已经排好的段落格式，其中可能包括用于保留在编辑环境中已经排好的段落格式，其中可能包括一些一些html标记所不能控制的符号，如回车、多个空格等等标记所不能控制的符号，如回车、多个空格等等例例pre.html分区显示标记分区显示标记 文本或者图象文本或者图象作用：设定字图表格的显示位置，当在很多段落中

18、设置对其作用：设定字图表格的显示位置，当在很多段落中设置对其方式的时候，常采用方式的时候，常采用标记，应用于样式表时非标记，应用于样式表时非常有用。常有用。例例 div.htmlDate:2022年5月15日星期日25图像标记图像标记图像标记图像标记向网页中加入图片，通常使用向网页中加入图片，通常使用gif或或jpeg格式格式还可以设置图像的替代文本、布局等属性还可以设置图像的替代文本、布局等属性其格式为：其格式为：Date:2022年5月15日星期日26图像标记图像标记设置图像和文本之间的关系设置图像和文本之间的关系可以设置图文混排版面，如其间的空白，图文的对齐，文本可以设置图文混排版面，如

19、其间的空白，图文的对齐，文本环绕图形等等。有一下几种常见用法：环绕图形等等。有一下几种常见用法： 设置图像与文本之间的空白设置图像与文本之间的空白，使页面看起来不至于过分紧凑。，使页面看起来不至于过分紧凑。标记的标记的和和属性可以实现此功能。其格式属性可以实现此功能。其格式为：为： 文本和图形在垂直方向的对齐文本和图形在垂直方向的对齐。利用。利用的的align属性可以设定属性可以设定他们在垂直方向的对齐。其格式为：他们在垂直方向的对齐。其格式为：文本文本文本文本其中其中Align的可能取值为：的可能取值为： top：文本与图像的顶部对齐：文本与图像的顶部对齐 middle：文本与图像的中央对齐

20、：文本与图像的中央对齐 bottom：文本与图像的底部对齐：文本与图像的底部对齐Date:2022年5月15日星期日27超文本链接标记超文本链接标记超文本连接标记超文本连接标记这种标记也称为锚点，通过一个单词、一句话或者图片等，这种标记也称为锚点，通过一个单词、一句话或者图片等，实现一个页面到另外一个页面的跳转。实现一个页面到另外一个页面的跳转。具有以上特点的词、句、或图片就称为锚点，可以利用具有以上特点的词、句、或图片就称为锚点，可以利用标记中相应的属性来设置颜色。标记中相应的属性来设置颜色。超文本连接标记的格式为：超文本连接标记的格式为： a href=“”|name=“” target=

21、“_blank|_self|_parent|_top”Href，取值为一个，取值为一个URL，是目标资源的地址，是目标资源的地址Name，参考点，不能和，参考点，不能和href同时使用，指的是本文档内的一个字同时使用，指的是本文档内的一个字符串。符串。Target，指定如何打开目标页面，指定如何打开目标页面.例例href.html,演示超级连接的使用。演示超级连接的使用。Date:2022年5月15日星期日28超文本链接标记超文本链接标记创建指向邮件地址的超链创建指向邮件地址的超链需要在需要在href属性的取值中加入属性的取值中加入mailto:,其格式为：其格式为：热点文本热点文本例如，邮件

22、地址为例如，邮件地址为,建立如下连接：建立如下连接：联系联系Date:2022年5月15日星期日29多媒体标记多媒体标记设置音频设置音频加入背景音乐加入背景音乐使用使用标记能够在页面中加入背景音乐，格式为标记能够在页面中加入背景音乐，格式为：当当autostart取值为取值为true时，声音文件传输完毕后自动播放。时，声音文件传输完毕后自动播放。当当loop等于等于-1或或INFINITE时，声音一直播放，直到用户关闭时，声音一直播放，直到用户关闭该网页。该网页。Date:2022年5月15日星期日30插入多媒体文件插入多媒体文件loop的值为的值为true，则循环播放。，则循环播放。Date

23、:2022年5月15日星期日31课堂练习课堂练习创建网页文件创建网页文件test.html，要求整个网页的背景颜色为，要求整个网页的背景颜色为淡黄色，文本颜色为红色。以二级标题，黑体字居中淡黄色，文本颜色为红色。以二级标题，黑体字居中显示显示“HTML字体练习字体练习”，以，以“隶书，加粗，斜体，蓝隶书，加粗，斜体，蓝色，字号为色，字号为5”显示你的班级姓名学号，换行，设置超显示你的班级姓名学号，换行，设置超级链接级链接“校园网校园网”，地址为，地址为。Date:2022年5月15日星期日323.2.3 表格表格Date:2022年5月15日星期日33创建表格创建表格创建表格创建表格创建简单的

24、表格（仅定义行和列）创建简单的表格（仅定义行和列）-表格标记，双标记，表格的整体外观由表格标记，双标记，表格的整体外观由标记的属性决定标记的属性决定 - 表行标记，单标记，表示表格中新的一行的开始；表行标记，单标记，表示表格中新的一行的开始； - 表头标记，双标记，表头标记，双标记，标记的文字按照粗体字显示标记的文字按照粗体字显示 - 表项表项(定义表格的具体数据定义表格的具体数据) ，数据的内容放在，数据的内容放在标记之间。标记之间。表格的一般形式为：表格的一般形式为： 第一列表头第一列表头 第二列表头第二列表头 第一行第一列第一行第一列第一行第二列第一行第二列 第二行第一列第二行第一列第二

25、行第二列第二行第二列 属性名及取值参见下表：属性名及取值参见下表：Date:2022年5月15日星期日34标记的主要属性标记的主要属性属性名称属性名称属性值属性值功能功能BORDERSize设置表格边框的粗细，其取值为正数，单设置表格边框的粗细，其取值为正数，单位是象素，省略则不带边框。位是象素，省略则不带边框。WIDTHSize设置表格宽度，取值为象素数或者百分比设置表格宽度，取值为象素数或者百分比HEIGHTSize设置表格高度，设置表格高度， 取值为象素数或者百分比取值为象素数或者百分比CELLSPACINGSize单元格的边距，指的是字与单元格边框的单元格的边距，指的是字与单元格边框的

26、距离，距离， 单位是象素单位是象素CELLPADDINGSize单元格间距，指的是单元格之间的距离，单元格间距，指的是单元格之间的距离，单位是象素单位是象素BACKGROUNDURL设置表格背景图案设置表格背景图案BGCOLORColorvalue设置表格的背景色设置表格的背景色ALIGNLeft，right设置对其格式设置对其格式COLSSize设置表格列数设置表格列数Date:2022年5月15日星期日35标记的主要属性标记的主要属性属性名称属性名称属性值属性值功能功能BGCOLORColorvalue设置行中所有单元格的背景颜色设置行中所有单元格的背景颜色ALIGNLeft,right,

27、center设置行中的对其方式设置行中的对其方式VALIGNTop，middle，bottom,baseline设置行中单元格的垂直对其格式设置行中单元格的垂直对其格式BACKGROUNDURL设置行钟单元格的背景图像设置行钟单元格的背景图像BORDERCOLORColorvalue设置边框颜色设置边框颜色Date:2022年5月15日星期日36标记的主要属性标记的主要属性属性名称属性名称属性值属性值功能功能BORDERCOLORColorvalue设置边框颜色设置边框颜色WIDTHSize设置单元格的宽度设置单元格的宽度HEIGHTSize设置单元格的高度设置单元格的高度ROWSPANNum

28、设置单元格所占的行数设置单元格所占的行数COLSPANNum设置单元格所占的列数设置单元格所占的列数BGCOLORColorvalue设置单元格的背景色设置单元格的背景色ALIGNLeft,right,center设置行中的对其方式设置行中的对其方式VALIGNTop，middle，bottom,baseline设置行中单元格的垂直对其格式设置行中单元格的垂直对其格式例例simpletable.html,border_1.html,border_2.html.Date:2022年5月15日星期日37创建表格创建表格使用使用标记给表格加上标题标记给表格加上标题标题标题 align的取值分别表示标

29、题在表格的左、右、中、上、下。的取值分别表示标题在表格的左、右、中、上、下。valign设置标题在表的上部还是下部。设置标题在表的上部还是下部。Date:2022年5月15日星期日38创建表格创建表格跨多行多列的表格跨多行多列的表格使用使用标记的标记的rowspan和和colspan属性可以属性可以制作跨多行或跨多列的表格。制作跨多行或跨多列的表格。跨多行的表元跨多行的表元或者或者例例rowspan.html跨多列的表元跨多列的表元或者或者例例colspan.htmlDate:2022年5月15日星期日39列表标记列表标记案例名称：使用有序列表案例名称：使用有序列表有序列表 热爱祖国 热爱人民

30、无序列表 热爱祖国 热爱党Date:2022年5月15日星期日403.2.4 表单及其常用控件表单及其常用控件Date:2022年5月15日星期日41表单表单 表单的功能是收集用户信息实现系统与用户交互。比如表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。信箱的注册页面就是一个十分典型的表单页面。表单信息的处理过程如下：当单击表单中的提交按钮时，表单表单信息的处理过程如下：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序中的信息就会上传到服务器中，然后由服务器端的应用程序（例如（例如CGI，ASP，PHP，

31、JSP等）进行处理，处理后将用户提等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。客户端浏览器上。 Date:2022年5月15日星期日42表单作用表单作用实现动态交互的基础实现动态交互的基础表单的作用是提供一个友好的界面，从用户方面收集信息，表单的作用是提供一个友好的界面，从用户方面收集信息，当用户通过键入文本或选择列表框或下拉菜单等方式填好表当用户通过键入文本或选择列表框或下拉菜单等方式填好表单上的所需信息并将表单提交后，服务器就可以得到表单中单上的所需信息并将表单提交后，服务器就可以得

32、到表单中包含的信息，然后由服务器上的相应的程序进行处理。表单包含的信息，然后由服务器上的相应的程序进行处理。表单是是WWWWWW上最流行的交互特性之一，也是动态上最流行的交互特性之一，也是动态HTMLHTML技术的基础。技术的基础。Date:2022年5月15日星期日43表单设计表单设计表单应包含说明性文字、用于用户填写的输入框、提交和重置按钮等。表单应包含说明性文字、用于用户填写的输入框、提交和重置按钮等。表单中包含的主要元素有：表单中包含的主要元素有：ButtonRadioCheckboxFileTextHiddenimageSubmitResetpasswordtextareaSelec

33、t用用HTML设计表单的常用标记有：设计表单的常用标记有：、Date:2022年5月15日星期日44表单设计表单设计表单标记表单标记表单标记表单标记,用于设置表单的起始位置，并指定处理表用于设置表单的起始位置，并指定处理表单数据程序的单数据程序的URL地址，格式为：地址，格式为：Date:2022年5月15日星期日45表单设计表单设计表单输入标记表单输入标记表单输入标记表单输入标记,在表单中输入频繁，大部分表单内容需要使用此标记进行在表单中输入频繁，大部分表单内容需要使用此标记进行组织，其语法为：组织，其语法为：注：其中注：其中粉红色粉红色的属性尤为重要。的属性尤为重要。例例input.htm

34、lDate:2022年5月15日星期日46表单设计表单设计下拉列表标记下拉列表标记下拉列表标记用于在表单中插入一个下拉列下拉列表标记用于在表单中插入一个下拉列表，需要与表，需要与标记配合使用，下拉列表中的每一个选项都标记配合使用，下拉列表中的每一个选项都是通过是通过标记来定义的，其语法如下：标记来定义的，其语法如下：Name表示下拉列表的名称；表示下拉列表的名称；size表示一次显示的选项数，表示一次显示的选项数，multiple表示该表示该下拉列表是否是多选的。下拉列表是否是多选的。选项标记选项标记：用来定义下拉列表的选项，其语法形式为：用来定义下拉列表的选项，其语法形式为：语法语法1： v

35、alue语法语法2：实际显示值实际显示值例例select.htmlDate:2022年5月15日星期日47表单设计表单设计多行文本输入标记多行文本输入标记用于浏览者发表意见，填写信息可用于浏览者发表意见，填写信息可以输入比较多的文字，其基本格式为：以输入比较多的文字，其基本格式为：文本文本Name属性，设定文本框的名称属性，设定文本框的名称Cols属性，表示文本框的宽度属性，表示文本框的宽度Rows属性，表示文本框的高度属性，表示文本框的高度例子例子textarea.htmlDate:2022年5月15日星期日48表单设计表单设计综合实例：综合实例：form.html.Date:2022年5月

36、15日星期日493.3 JavaScriptDate:2022年5月15日星期日503.3.1 JavaScript基础基础Date:2022年5月15日星期日51JavaScript简介简介JavaScript语言是语言是NetScape公司开发的一种基于对象公司开发的一种基于对象的、事件驱动的、由浏览器负责解释执行的、弱类型的、事件驱动的、由浏览器负责解释执行的、弱类型的描述性脚本语言。的描述性脚本语言。IE3.0和和NetScape3.0以上的浏览器都支持以上的浏览器都支持JavaScript语言。语言。与与HTML以及以及Applet一起用于开发客户端用户界面。一起用于开发客户端用户界

37、面。JavaScript是通过嵌入到是通过嵌入到HTML语言中实现的，可以出语言中实现的，可以出现在现在HTML的任何地方，它弥补了的任何地方，它弥补了HTML语言的缺陷，语言的缺陷，是是Java与与HTML折衷的选择。折衷的选择。Date:2022年5月15日星期日52JavaScript特点特点解释型的脚本语言，采用小程序端的方式实现编程，不需解释型的脚本语言，采用小程序端的方式实现编程，不需要事先编译；要事先编译；是基于对象的语言，可以运用已经创建好的对象，结合对是基于对象的语言，可以运用已经创建好的对象，结合对象的方法和脚本实现所需的功能；象的方法和脚本实现所需的功能；是事件驱动的语言

38、，可以直接对用户的输入做出响应，不是事件驱动的语言，可以直接对用户的输入做出响应，不需要服务器的支持，减少了浏览器和服务器之间的通信量，需要服务器的支持，减少了浏览器和服务器之间的通信量，提高了响应速度。提高了响应速度。变量类型采用弱类型，未使用严格的数据类型变量类型采用弱类型，未使用严格的数据类型是一种安全的语言，只能通过浏览器实现信息浏览或动态是一种安全的语言，只能通过浏览器实现信息浏览或动态交互，不允许访问本地硬盘或将数据存到服务器上，不允交互，不允许访问本地硬盘或将数据存到服务器上，不允许对网络文档进行修改和删除，从而有效防止数据的丢失。许对网络文档进行修改和删除，从而有效防止数据的丢

39、失。是一种与平台无关的语言，依赖于浏览器本身，与操作系是一种与平台无关的语言，依赖于浏览器本身，与操作系统无关，从而实现了一定程度的统无关，从而实现了一定程度的”一次编写，随处运行一次编写，随处运行“。Date:2022年5月15日星期日53JavaScript嵌入嵌入HTML使用使用标签将标签将JavaScript代码嵌入代码嵌入到到HTML中。中。格式如下：格式如下：Javascript代码；代码；/script标记有两个主要属性：标记有两个主要属性：language，脚本语言的类型，可以为，脚本语言的类型，可以为javaScript或或liveScriptsrc,包含包含javaScri

40、pt源代码的文件，以源代码的文件，以”.js”为扩展名，可以是为扩展名，可以是javaScript以文件的形式加载到以文件的形式加载到html文件中文件中Date:2022年5月15日星期日54JavaScript实例实例 JavaScript示例示例 alert(这是第一个这是第一个javaScript的例子的例子) Date:2022年5月15日星期日553.3.2 JavaScript中的对象中的对象Date:2022年5月15日星期日56JavaScript支持的对象支持的对象浏览器环境中提供的对象，浏览器环境中提供的对象，提供反映当前加载的提供反映当前加载的Web页面及其内容以及浏览

41、器当前会话信息，如常页面及其内容以及浏览器当前会话信息，如常用的用的window、document、history、location等等。等等。下图是这些对象之间的关系：下图是这些对象之间的关系：Date:2022年5月15日星期日57JavaScript支持的对象支持的对象JavaScript的内置对象的内置对象，是若干与当前窗口或加载的，是若干与当前窗口或加载的文件无关的对象，如文件无关的对象，如String、Date、Math等；等；用户自己定义的对象。用户自己定义的对象。在在JavaScript中，有两种方法创建用户自定义对象：中，有两种方法创建用户自定义对象： 通过对象初始化来创建，

42、创建的同时完成对象的初始化。通过对象初始化来创建，创建的同时完成对象的初始化。对象对象属性属性1：属性值：属性值1，属性值，属性值2：属性值：属性值2，属性，属性n：属性值：属性值n 通过使用对象的构造方法创建对象通过使用对象的构造方法创建对象Date:2022年5月15日星期日58document对象对象document对象反映对象反映JavaScript中中HTML文档的特性。文档的特性。document对象的方法对象的方法clear():清除文档窗口清除文档窗口close():关闭当前输出流关闭当前输出流open(MIME Type):打开允许打开允许write和和writeln()方法

43、写到文档方法写到文档窗口的流，窗口的流，MIME Type是可选的字符串，它确定有是可选的字符串，它确定有Navigator或插件支持的文档类型或插件支持的文档类型(即即text/html，image/gif等等)write():将文本和将文本和HTML写入到指定的文档写入到指定的文档wirteln():将文本和将文本和HTML写入到指定的文档并换行写入到指定的文档并换行Date:2022年5月15日星期日59windows对象对象Window对象的方法对象的方法alert（message）:在对话框中显示在对话框中显示message消息消息close()：关闭窗口：关闭窗口confirm()

44、:在有在有OK和和Cancle按钮的对话框中显示按钮的对话框中显示Message，并按照用户单击的按钮返回真或假。并按照用户单击的按钮返回真或假。open(url,name,features):在名为在名为name的窗口中打开，如果的窗口中打开，如果name不存在就以不存在就以name为名字创建一个窗口，为名字创建一个窗口，features是可是可选的字符串变量，包含新窗口的特征列表。选的字符串变量，包含新窗口的特征列表。prompt(message,response):在带有文本输入框的窗口中显在带有文本输入框的窗口中显示示message，并用缺省的，并用缺省的response返回用户在文本

45、输入框返回用户在文本输入框中输入的字符串。中输入的字符串。setTimeout(expression,time):在在time之后计算之后计算expressionclearTimeout(name):用名字取消实现暂停。用名字取消实现暂停。Date:2022年5月15日星期日60string对象对象在在JavaScript中，一个字符串是一个中，一个字符串是一个string对象。对象。string对象，提供给特定的字符串完成各种处理的属性与对象，提供给特定的字符串完成各种处理的属性与方法，如搜索字符串、提取子串等。方法，如搜索字符串、提取子串等。string对象的定义对象的定义可以有两种方式创

46、建一个字符串对象：可以有两种方式创建一个字符串对象：Str1=“hello”;Str2=new string(“hello”);String对象的属性对象的属性String对象只有一个属性对象只有一个属性length，表示字符串的长度。，表示字符串的长度。例如例如:MyStr=“hello JavaScript World”length=MyStr.lengthDate:2022年5月15日星期日61string对象对象string对象的方法对象的方法String对象的方法共有对象的方法共有19个，主要用于对有关字符串在个，主要用于对有关字符串在Web页面中的显示、字体大小、字体颜色、字符搜索

47、以及字符的页面中的显示、字体大小、字体颜色、字符搜索以及字符的大小写转换大小写转换第一类，关于字符串的运算：第一类，关于字符串的运算：charAt(位置位置)indexOf(子串，起始位置索引子串，起始位置索引)lastIndexOf(子串，起始位置索引子串，起始位置索引)SubString（起始位置索引，结束位置索引）（起始位置索引，结束位置索引）toLowerCase()toUpperCase()Date:2022年5月15日星期日62string对象对象string对象的方法对象的方法第二类、关于字符串在第二类、关于字符串在web页面中的显示处理，即用来给字页面中的显示处理，即用来给字符

48、串的前后加上符串的前后加上HTML标签：标签：fontsize(字号字号)fontcolor(颜色颜色)bold()italics()blink()strike()sub()sup()fixed()big()small()anchor()Date:2022年5月15日星期日63Date对象对象Date对象，提供一个有关日期和时间的对象。对象，提供一个有关日期和时间的对象。Date对象的定义对象的定义必须使用必须使用new运算符创建一个实例运算符创建一个实例var 对象名对象名=new Date()(表示当前的日期和时间表示当前的日期和时间)var 对象名对象名=new Date(年年,月月,日

49、日)var 对象名对象名=new Date(年年,月月,日日,时时,分分,秒秒)var 对象名对象名=new Date(年年,月月,日日,时时:分分:秒秒)Date对象的属性对象的属性Date对象没有提供可以直接访问的属性，只有获取和设置日对象没有提供可以直接访问的属性，只有获取和设置日期和时间的方法。期和时间的方法。Date:2022年5月15日星期日64Date对象对象Date对象的主要方法有：对象的主要方法有：getYear():返回年份返回年份getMonth()返回当月于号，返回当月于号，011,0为为1月月getDate():返回当前日号数返回当前日号数getDay():返回星期几

50、，返回星期几，06，0为星期日为星期日getHours():返回小时数，返回小时数，023getMintes():返回分钟数，返回分钟数，059getSeconds():返回描述，返回描述，059getTimes():返回毫秒数，自返回毫秒数，自1970年年1月月1日零时以来的毫秒日零时以来的毫秒数数Date:2022年5月15日星期日653.3.3 JavaScript中事件中事件Date:2022年5月15日星期日66事件：事件：是某个对象发出的消息，标志者某个特定行是某个对象发出的消息，标志者某个特定行为的发生或某个特定的条件成立。为的发生或某个特定的条件成立。由鼠标或热键引发的一连串程