Web开发技术（java）JSP基础知识(HTML+JavaScript+CSS)

IT Education & TrainingDate:2021年9月27日星期一1Web开发技术（java）- JSP基础知识(HTML+JavaScript+CSS)东北大学东软信息学院东北大学东软信息学院 计算机系网络工程教研计算机系网络工程教研室室IT Education & TrainingDate:2021年9月27日星期一2内容提要内容提要本章首先网页的工作原理本章首先网页的工作原理介绍介绍HTML的发展历史、的发展历史、HTML的文档结构、了的文档结构、了HTML的各种的各种常用标记：文字标记、图片标记、超级链接标记，等等常用标记：文字标记、图片标记、超级链接标记，等等介绍介绍JavaScript中的变量、数组、表达式、运算符、流程控中的变量、数组、表达式、运算符、流程控制语句、制语句、JavaScript的函数、内置对象、浏览器对象的层次的函数、内置对象、浏览器对象的层次和和DOM模型的建立和使用模型的建立和使用 最后介绍最后介绍CSS的基本使用方法，如何让的基本使用方法，如何让CSS与与HTML协同工协同工作作IT Education & TrainingDate:2021年9月27日星期一3JSP应用项目结构应用项目结构浏览器端用户界面的开发：浏览器端用户界面的开发：HTML，开发静态网页，开发静态网页JavaScript，简单的事件响应，输入验证。，简单的事件响应，输入验证。CSS，浏览页面的美观，浏览页面的美观Applet，应用于客户端，应用于客户端数据库WAN浏览器浏览器HTTPWeb 容器容器JDBCIT Education & TrainingDate:2021年9月27日星期一4JSP应用项目结构应用项目结构服务器端业务逻辑处理的开发：服务器端业务逻辑处理的开发：Java语言基础语言基础JSP知识知识Servlet知识知识JavaBeans知识知识数据库WAN浏览器浏览器HTTPWeb 容器容器JDBCIT Education & TrainingDate:2021年9月27日星期一5JSP应用项目结构应用项目结构数据库的开发：数据库的开发：数据库的原理和设计数据库的原理和设计数据库的创建及维护数据库的创建及维护SQL语言以及存储过程等语言以及存储过程等数据库WAN浏览器浏览器HTTPWeb 容器容器JDBCIT Education & TrainingDate:2021年9月27日星期一6HTTP请求请求/响应模型响应模型访问访问Web服务器的过程服务器的过程资源可以是各式各样的资源可以是各式各样的一个原封不动返回浏览器的简单一个原封不动返回浏览器的简单HTML文件文件一个动态生成响应的程序。一个动态生成响应的程序。客户请求响应资源程序IT Education & TrainingDate:2021年9月27日星期一7JSP示例示例(Hello.jsp) % for ( int i=0; i 你好 你好 你好 IT Education & TrainingDate:2021年9月27日星期一8HTML基础基础JSP示例：示例： helloworld 经过对上述经过对上述JSP文件的分析我们发现文件的分析我们发现:JSP=HTML+JSP元素，因此需要对元素，因此需要对HTML进行一番研究进行一番研究IT Education & TrainingDate:2021年9月27日星期一9HTML基础基础HTML (Hyper Text Markup Language)语言简介语言简介超文本标记语言超文本标记语言HTML源于标准通用化标记语言源于标准通用化标记语言SGML（Standard General Markup Language）是）是SGML的子集的子集（XML同样也是其子集），由同样也是其子集），由Web的发明者的发明者Tim和和Daniel于于1990年创立。年创立。HTML是一门标记型语言，只要记住各个标记的用法即是一门标记型语言，只要记住各个标记的用法即可可可以用任何文本编辑器来编写可以用任何文本编辑器来编写HTML页面，只要将创建页面，只要将创建的页面保存为的页面保存为html或或htm即可即可在客户端浏览器可以查看所编写的源代码在客户端浏览器可以查看所编写的源代码IT Education & TrainingDate:2021年9月27日星期一10HTML的编辑和运行环境的编辑和运行环境HTML的编辑环境所见及所得的编辑器，如：Dreamweaver、FrontPage任何文本编辑工具，如：记事本、EditPlusHTML的运行环境浏览器Internet Explorer 6FireFox1.5由于各浏览器对HTML的支持有差别，所以尽量避免使用非规范的HTML标记IT Education & TrainingDate:2021年9月27日星期一11HTML语言简介语言简介HTML的基本语法的基本语法HTML文件由标记和文本组成，格式为：文件由标记和文本组成，格式为：在浏览器中显示的文本在浏览器中显示的文本标记名和标记名和“”之间不能有空格之间不能有空格属性通过属性控制各种输出效果，格式为：属性通过属性控制各种输出效果，格式为：受到属性影响的文本受到属性影响的文本例如：例如：属性示例属性示例属性之间没有顺序，且只能加于起始标记中。属性之间没有顺序，且只能加于起始标记中。IT Education & TrainingDate:2021年9月27日星期一12HTML语言简介语言简介标记可以分为单标记和双标记两种：标记可以分为单标记和双标记两种：单标记单独使用，如：单标记单独使用，如：双标记成对使用，如：双标记成对使用，如：对于同一段文本，可以使用多个嵌套标记来共同作用，产生对于同一段文本，可以使用多个嵌套标记来共同作用，产生一定的效果，但需要注意标记出现的顺序。一定的效果，但需要注意标记出现的顺序。网页标题网页标题网页标题网页标题 （错误）（错误）HTML语言不区分大小写语言不区分大小写IT Education & TrainingDate:2021年9月27日星期一13HTML注释注释HTML注释注释HTML的注释标记为的注释标记为“”和和“”可以插入到可以插入到HTML文本文本的任何地方的任何地方例如：例如：HTML或或JSP文件中文件中HTML注释将发送到客户端浏览器，但不注释将发送到客户端浏览器，但不显示显示这与后面将要讲解的这与后面将要讲解的JSP注释不同：注释不同：JSP注释的内容不会发注释的内容不会发送到客户端，但在注释出现的位置出现一个空行送到客户端，但在注释出现的位置出现一个空行IT Education & TrainingDate:2021年9月27日星期一14HTML文件的基本结构文件的基本结构HTML文件的基本结构文件的基本结构HTML文件以文件以开头，以开头，以结束结束HTML文件包括头部文件包括头部和主体和主体两个部分两个部分基本结构为：基本结构为：网页标题例例2-1.htmlHeadHead的内容可以是标题和元信息的内容可以是标题和元信息（网页关键字、文本文件地址、（网页关键字、文本文件地址、创作信息等网页信息说明）创作信息等网页信息说明）IT Education & TrainingDate:2021年9月27日星期一15HTML文件的基本结构文件的基本结构HMTL文件标题标记文件标题标记 网页标题网页标题标记是可选的，可以没有标记是可选的，可以没有标记，而单独使用标记，而单独使用标记标记HTML的标记不可以直接出现在要显示的内容中，如果的标记不可以直接出现在要显示的内容中，如果需要显示则必须使用相应的转义符代替：需要显示则必须使用相应的转义符代替：例例2-2.htmIT Education & TrainingDate:2021年9月27日星期一16浏览器对空白的处理浏览器忽略开头和结尾的空格换行缩进连续的空格、换行、缩进只保留一个特殊情况除外例如中包括的内容IT Education & TrainingDate:2021年9月27日星期一17HTML文件的基本结构文件的基本结构HTML文件的主体标记文件的主体标记 主题内容主题内容background设置网页的背景图像设置网页的背景图像bgcolor 设置网页的北京颜色设置网页的北京颜色text 设置文本的字体颜色设置文本的字体颜色link 设置未被访问过的超文本链接的颜色，默认为蓝色设置未被访问过的超文本链接的颜色，默认为蓝色vlink 设置已被访问国的超文本链接的颜色，默认为紫色设置已被访问国的超文本链接的颜色，默认为紫色alink 色或者当鼠标移至超文本链接的颜色，默认为红色色或者当鼠标移至超文本链接的颜色，默认为红色注：注：HTML颜色的取值可以用颜色的取值可以用英文单词英文单词或以或以引导的十六进制代码引导的十六进制代码表示，颜色表示，颜色代码由六个数字组成，即代码由六个数字组成，即#RRGGBB,每一位都是一位十六进制的数字，从每一位都是一位十六进制的数字，从0F，可以产生，可以产生1677万多种颜色。万多种颜色。也是一个可选标记也是一个可选标记IT Education & TrainingDate:2021年9月27日星期一18文字格式标记文字格式标记文字格式标记文字格式标记设置标题设置标题标题内容标题内容属性属性align,用来设置标题在页面中的对其方式：用来设置标题在页面中的对其方式：left(左对齐，默认左对齐，默认)、center（居中）、（居中）、right（右对齐）（右对齐）属性属性n,用来指定标题的大小，可以取用来指定标题的大小，可以取16的整数，取的整数，取1时字体最大，时字体最大，取取6时字体最小时字体最小标记显示宋体字标记显示宋体字标记会自动在标题后加入一个空行，不必再使标记会自动在标题后加入一个空行，不必再使用用标记再加入空行。标记再加入空行。在一个标题中无法使用不同大小的字体在一个标题中无法使用不同大小的字体例例2-3.html,使用使用设置标题的大小设置标题的大小IT Education & TrainingDate:2021年9月27日星期一19文字格式标记文字格式标记设置字体设置字体标记可以用来设置文字的字体，颜色以及字号。标记可以用来设置文字的字体，颜色以及字号。face属性，用来设置文字的字体，可能的取值为宋体、黑体、属性，用来设置文字的字体，可能的取值为宋体、黑体、隶书等等，但需要注意除非客户端支持这些字体，否则无法隶书等等，但需要注意除非客户端支持这些字体，否则无法显示期望的效果。显示期望的效果。Size属性，用来设置文字的大小，数字的取值范围从属性，用来设置文字的大小，数字的取值范围从17，取取1时最小，取时最小，取7时最大。时最大。Color属性，用来设置文字的颜色，颜色的取值遵从前面所讲属性，用来设置文字的颜色，颜色的取值遵从前面所讲的规范。的规范。例例2-4.html,用用设置字体的样式。设置字体的样式。IT Education & TrainingDate:2021年9月27日星期一20文字格式标记文字格式标记设置字体的颜色设置字体的颜色利用利用标记中标记中text属性，可以设定整个网页的颜色属性，可以设定整个网页的颜色利用利用标记中的标记中的color属性，可以设定段落、短语或字词属性，可以设定段落、短语或字词的颜色的颜色和和设置字体颜色时的优先级设置字体颜色时的优先级当当和和同时设定字体的颜色时，同时设定字体的颜色时，设置的字体颜设置的字体颜色优先。色优先。例例 2-5.html,设置字体的颜色设置字体的颜色IT Education & TrainingDate:2021年9月27日星期一21文字格式化标记文字格式化标记其他字体标记其他字体标记设置字型，即文字的风格，如加粗、斜体、带下划线、上标、下标等设置字型，即文字的风格，如加粗、斜体、带下划线、上标、下标等等，例：等，例：2-6.html。 其他字体标记其他字体标记 加粗加粗 斜体斜体 下划线下划线 删除线删除线 倾斜倾斜 强调显示强调显示 放大显示放大显示 正常显示正常显示 放大显示放大显示 IT Education & TrainingDate:2021年9月27日星期一22文字版面标记文字版面标记文字版面标记文字版面标记通过文字版面标记可以设置换行、文字分段、对齐等等。通过文字版面标记可以设置换行、文字分段、对齐等等。换行标记换行标记强制换行标记强制换行标记，放到一行的末尾，可使后面的问题换到下一，放到一行的末尾，可使后面的问题换到下一行，而有不会在行与行之间留下空行。其格式为：行，而有不会在行与行之间留下空行。其格式为： 前一行要显示文字前一行要显示文字需要换行显示的文字需要换行显示的文字强制不换行标记强制不换行标记，使某些文字不因过长而分两行显示，使某些文字不因过长而分两行显示，对对于数学格式等特殊文本的显示非常有作用。格式为：于数学格式等特殊文本的显示非常有作用。格式为：需要在同一行中显示的问题需要在同一行中显示的问题IT Education & TrainingDate:2021年9月27日星期一23文字版面标记文字版面标记段落标记段落标记强制段落标记强制段落标记,放在一段文字的开头或者末尾，定义一个放在一段文字的开头或者末尾，定义一个新段落的开始，不但能使后面的文字进行换行，而且还能在新段落的开始，不但能使后面的文字进行换行，而且还能在两段之间留一空行。格式为：两段之间留一空行。格式为： 前一段落前一段落后一段落后一段落标记可以看作是强制换行标记标记可以看作是强制换行标记和一个空行和一个空行非换行空格符号，非换行空格符号，“nbsp”当在编辑当在编辑html文件需要输入多个空格时，浏览器对这些标记进行文件需要输入多个空格时，浏览器对这些标记进行解析时，只会保留一个空格。但使用该标记可以实现段首空两行的解析时，只会保留一个空格。但使用该标记可以实现段首空两行的效果。效果。例例2-7.html,换行标记和段落标记的使用换行标记和段落标记的使用IT Education & TrainingDate:2021年9月27日星期一24文字版面标记文字版面标记对齐标记对齐标记设置段落标记，格式为：设置段落标记，格式为： 要显示的文字要显示的文字属性属性align用来设置段落的对齐方式，可以为用来设置段落的对齐方式，可以为left、center、或、或right。默认值为默认值为left。原来是个双标记，但从原来是个双标记，但从html 2.0开始变为单标记，当然也可以开始变为单标记，当然也可以加上结束标记来控制效果产生的范围。加上结束标记来控制效果产生的范围。居中标记，居中标记，确保标记中间的内容确保标记中间的内容居中居中显示，作用相当于：显示，作用相当于：要显示的内容要显示的内容其格式为：其格式为：需要居中显示的内容需要居中显示的内容例例2-8.html,IT Education & TrainingDate:2021年9月27日星期一25文字版面标记文字版面标记-列表标记列表标记案例名称：使用有序列表案例名称：使用有序列表有序列表 热爱祖国 热爱人民无序列表 热爱祖国 热爱党IT Education & TrainingDate:2021年9月27日星期一26文字版面格式文字版面格式显示预排版格式显示预排版格式用于保留在编辑环境中已经排好的段落格式，其中可能包括用于保留在编辑环境中已经排好的段落格式，其中可能包括一些一些html标记所不能控制的符号，如回车、多个空格等等标记所不能控制的符号，如回车、多个空格等等例例2-9.html,预排版格式的使用预排版格式的使用分区显示标记分区显示标记 文本或者图象文本或者图象作用：设定字图表格的显示位置，当在很多段落中设置对其作用：设定字图表格的显示位置，当在很多段落中设置对其方式的时候，常采用方式的时候，常采用标记，应用于样式表时非标记，应用于样式表时非常有用。常有用。例例 2-10.html,分区显示标记的应用。分区显示标记的应用。IT Education & TrainingDate:2021年9月27日星期一27图像标记图像标记图像标记图像标记向网页中加入图片，通常使用向网页中加入图片，通常使用gif或或jpeg格式格式还可以设置图像的替代文本、布局等属性还可以设置图像的替代文本、布局等属性其格式为：其格式为：IT Education & TrainingDate:2021年9月27日星期一28图像标记图像标记设置图片的对齐方式设置图片的对齐方式图像可以放在页面的左边图像可以放在页面的左边(left)、中间、中间(center)、右边、右边(right).实现居中的办法有两种：实现居中的办法有两种：使用使用标记标记使用使用的的align属性进行设置属性进行设置格式分别为格式分别为: IT Education & TrainingDate:2021年9月27日星期一29图像标记图像标记设置图像和文本之间的关系设置图像和文本之间的关系可以设置图文混排版面，如其间的空白，图文的对齐，文本可以设置图文混排版面，如其间的空白，图文的对齐，文本环绕图形等等。有一下几种常见用法：环绕图形等等。有一下几种常见用法： 设置图像与文本之间的空白设置图像与文本之间的空白，使页面看起来不至于过分紧凑。，使页面看起来不至于过分紧凑。标记的标记的和和属性可以实现此功能。其格式属性可以实现此功能。其格式为：为： 文本和图形在垂直方向的对齐文本和图形在垂直方向的对齐。利用。利用的的align属性可以设定属性可以设定他们在垂直方向的对齐。其格式为：他们在垂直方向的对齐。其格式为：文本文本文本文本其中其中Align的可能取值为：的可能取值为： top：文本与图像的顶部对齐：文本与图像的顶部对齐 middle：文本与图像的中央对齐：文本与图像的中央对齐 bottom：文本与图像的底部对齐：文本与图像的底部对齐IT Education & TrainingDate:2021年9月27日星期一30多媒体标记多媒体标记设置音频设置音频加入背景音乐加入背景音乐使用使用标记能够在页面中加入背景音乐，格式为标记能够在页面中加入背景音乐，格式为：加入背景音乐文件的格式为加入背景音乐文件的格式为.wav、.au、.mid当当autostart取值为取值为true时，声音文件传输完毕后自动播放。时，声音文件传输完毕后自动播放。当当loop等于等于-1或或INFINITE时，声音一直播放，直到用户关闭时，声音一直播放，直到用户关闭该网页。该网页。IT Education & TrainingDate:2021年9月27日星期一31多媒体标记多媒体标记嵌入声音与视频播放器嵌入声音与视频播放器该标记用于嵌入声音与视频。该标记用于嵌入声音与视频。IT Education & TrainingDate:2021年9月27日星期一32超文本链接标记超文本链接标记超文本连接标记超文本连接标记这种标记也称为锚点，通过一个单词、一句话或者图片等，这种标记也称为锚点，通过一个单词、一句话或者图片等，实现一个页面到另外一个页面的跳转。实现一个页面到另外一个页面的跳转。具有以上特点的词、句、或图片就称为锚点，可以利用具有以上特点的词、句、或图片就称为锚点，可以利用标记中相应的属性来设置颜色。标记中相应的属性来设置颜色。超文本连接标记的格式为：超文本连接标记的格式为： a href=“”|name=“” target=“_blank|_self|_parent|_top”Href，取值为一个，取值为一个URL，是目标资源的地址，是目标资源的地址Name，参考点，不能和，参考点，不能和href同时使用，指的是本文档内的一个字同时使用，指的是本文档内的一个字符串。符串。Target，指定如何打开目标页面，指定如何打开目标页面.例例2-12_2.html,演示超级连接的使用。演示超级连接的使用。IT Education & TrainingDate:2021年9月27日星期一33超文本链接标记超文本链接标记创建指向邮件地址的超链创建指向邮件地址的超链需要在需要在href属性的取值中加入属性的取值中加入mailto:,其格式为：其格式为：热点文本热点文本例如，邮件地址为例如，邮件地址为,建立如下连接：建立如下连接：联系联系IT Education & TrainingDate:2021年9月27日星期一34创建表格创建表格表格标签主要包含下列几项表格标签主要包含下列几项-表格标记，双标记，表格表格标记，双标记，表格的整体外观由的整体外观由标记的属性标记的属性决定决定 - 表行标记，双标记，表示表表行标记，双标记，表示表格中新的一行的开始；格中新的一行的开始； - 表头标记，双标记，表头标记，双标记，标标记的文字按照粗体字显示记的文字按照粗体字显示 - 表项表项(定义表格的具体数据定义表格的具体数据) ，数据的内容放在数据的内容放在标记之标记之间。间。例例表格详细属性名及取值参见下表：表格详细属性名及取值参见下表：IT Education & TrainingDate:2021年9月27日星期一35标记的主要属性标记的主要属性属性名称属性名称属性值属性值功能功能BORDERSize设置表格边框的粗细，其取值为正数，单设置表格边框的粗细，其取值为正数，单位是象素，省略则不带边框。位是象素，省略则不带边框。WIDTHSize设置表格宽度，取值为象素数或者百分比设置表格宽度，取值为象素数或者百分比HEIGHTSize设置表格高度，设置表格高度， 取值为象素数或者百分比取值为象素数或者百分比CELLSPACINGSize单元格的边距，指的是字与单元格边框的单元格的边距，指的是字与单元格边框的距离，距离， 单位是象素单位是象素CELLPADDINGSize单元格间距，指的是单元格之间的距离，单元格间距，指的是单元格之间的距离，单位是象素单位是象素BACKGROUNDURL设置表格背景图案设置表格背景图案BGCOLORColorvalue设置表格的背景色设置表格的背景色ALIGNLeft，right设置对其格式设置对其格式COLSSize设置表格列数设置表格列数IT Education & TrainingDate:2021年9月27日星期一36标记的主要属性标记的主要属性属性名称属性名称属性值属性值功能功能BGCOLORColorvalue设置行中所有单元格的背景颜色设置行中所有单元格的背景颜色ALIGNLeft,right,center设置行中的对其方式设置行中的对其方式VALIGNTop，middle，bottom,baseline设置行中单元格的垂直对其格式设置行中单元格的垂直对其格式BACKGROUNDURL设置行钟单元格的背景图像设置行钟单元格的背景图像BORDERCOLORColorvalue设置边框颜色设置边框颜色IT Education & TrainingDate:2021年9月27日星期一37标记的主要属性标记的主要属性属性名称属性名称属性值属性值功能功能BORDERCOLORColorvalue设置边框颜色设置边框颜色WIDTHSize设置单元格的宽度设置单元格的宽度HEIGHTSize设置单元格的高度设置单元格的高度ROWSPANNum设置单元格所占的行数设置单元格所占的行数COLSPANNum设置单元格所占的列数设置单元格所占的列数BGCOLORColorvalue设置单元格的背景色设置单元格的背景色ALIGNLeft,right,center设置行中的对其方式设置行中的对其方式VALIGNTop，middle，bottom,baseline设置行中单元格的垂直对其格式设置行中单元格的垂直对其格式例例2-12.html,演示表格的各种用法。演示表格的各种用法。IT Education & TrainingDate:2021年9月27日星期一38创建表格创建表格使用使用标记给表格加上标题标记给表格加上标题标题标题 Align的取值分别表示标题在表格的左、右、中、上、下。的取值分别表示标题在表格的左、右、中、上、下。Valign设置标题在表的上部还是下部。设置标题在表的上部还是下部。IT Education & TrainingDate:2021年9月27日星期一39创建表格创建表格跨多行多列的表格跨多行多列的表格使用使用标记的标记的rowspan和和colspan属性可以制作跨多行或跨多列属性可以制作跨多行或跨多列的表格。的表格。跨多行的表元跨多行的表元或者或者食品食品/th主食主食素菜素菜荤菜荤菜米饭米饭韭菜韭菜猪肉猪肉跨多列的表元跨多列的表元或者或者食品食品主食主食米饭米饭素菜素菜韭菜韭菜荤菜荤菜猪肉猪肉IT Education & TrainingDate:2021年9月27日星期一40表单作用表单作用实现动态交互的基础实现动态交互的基础表单的作用是提供一个友好的界面，从用户方面收集信息，表单的作用是提供一个友好的界面，从用户方面收集信息，当用户通过键入文本或选择列表框或下拉菜单等方式填好表当用户通过键入文本或选择列表框或下拉菜单等方式填好表单上的所需信息并将表单提交后，服务器就可以得到表单中单上的所需信息并将表单提交后，服务器就可以得到表单中包含的信息，然后由服务器上的相应的程序进行处理。表单包含的信息，然后由服务器上的相应的程序进行处理。表单是是WWWWWW上最流行的交互特性之一，也是动态上最流行的交互特性之一，也是动态HTMLHTML技术的基础。技术的基础。IT Education & TrainingDate:2021年9月27日星期一41表单表单 表单的功能是收集用户信息实现系统与用户交互。比如表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。信箱的注册页面就是一个十分典型的表单页面。表单信息的处理过程如下：当单击表单中的提交按钮时，表单表单信息的处理过程如下：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序中的信息就会上传到服务器中，然后由服务器端的应用程序（例如（例如CGI，ASP，PHP，JSP等）进行处理，处理后将用户提等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。客户端浏览器上。 IT Education & TrainingDate:2021年9月27日星期一42表单设计表单设计表单应包含说明性文字、用于用户填写的输入框、提交和重置按钮等。表单应包含说明性文字、用于用户填写的输入框、提交和重置按钮等。表单中包含的主要元素有：表单中包含的主要元素有：ButtonRadioCheckboxFileTextHiddenimageSubmitResetpasswordtextareaSelect用用HTML设计表单的常用标记有：设计表单的常用标记有：、IT Education & TrainingDate:2021年9月27日星期一43表单设计表单设计表单标记表单标记表单标记表单标记,用于设置表单的起始位置，并指定处理表用于设置表单的起始位置，并指定处理表单数据程序的单数据程序的URL地址，格式为：地址，格式为：例例2-13.html，表单的综合演示。，表单的综合演示。IT Education & TrainingDate:2021年9月27日星期一44表单设计表单设计表单输入标记表单输入标记表单输入标记表单输入标记,在表单中输入频繁，大部分表单内容需要使用此标记进行在表单中输入频繁，大部分表单内容需要使用此标记进行组织，其语法为：组织，其语法为：注：其中注：其中粉红色粉红色的属性尤为重要。的属性尤为重要。例例2-14.html,演示演示input的各种用法。的各种用法。IT Education & TrainingDate:2021年9月27日星期一45表单设计表单设计下拉列表标记下拉列表标记下拉列表标记用于在表单中插入一个下拉列下拉列表标记用于在表单中插入一个下拉列表，需要与表，需要与标记配合使用，下拉列表中的每一个选项都标记配合使用，下拉列表中的每一个选项都是通过是通过标记来定义的，其语法如下：标记来定义的，其语法如下：Name表示下拉列表的名称；表示下拉列表的名称；size表示一次显示的选项数，表示一次显示的选项数，multiple表示该表示该下拉列表是否是多选的。下拉列表是否是多选的。选项标记选项标记：用来定义下拉列表的选项，其语法形式为：用来定义下拉列表的选项，其语法形式为：语法语法1： value语法语法2：实际显示值实际显示值例例2-15.html,演示演示select 的使用。的使用。IT Education & TrainingDate:2021年9月27日星期一46表单设计表单设计多行文本输入标记多行文本输入标记用于浏览者发表意见，填写信息可用于浏览者发表意见，填写信息可以输入比较多的文字，其基本格式为：以输入比较多的文字，其基本格式为：文本文本Name属性，设定文本框的名称属性，设定文本框的名称Cols属性，表示文本框的宽度属性，表示文本框的宽度Rows属性，表示文本框的高度属性，表示文本框的高度例子例子2-16.html,演示演示标记的使用。标记的使用。IT Education & TrainingDate:2021年9月27日星期一47框架标记框架标记框架标记框架标记与与共同作用实现共同作用实现.定义在一个窗口中帧的布局定义在一个窗口中帧的布局常用属性常用属性 rows=“.”设定行的数目设定行的数目cols=“.”设定列的数目设定列的数目onload=“.”当载入文档时的内部事件触发器当载入文档时的内部事件触发器onunload=“.”当卸载文档时的内部事件触发器当卸载文档时的内部事件触发器注释：注释：FRAMESET可以嵌套，可以嵌套，FrameSet出现的页面出现的页面body标标记不允许出现。记不允许出现。IT Education & TrainingDate:2021年9月27日星期一48框架标记框架标记用于定义定义一个帧用于定义定义一个帧属性：属性：name=“.”定义帧的名字定义帧的名字scr=“.”定义在帧中显示的内容的来源定义在帧中显示的内容的来源frameborder=.定义帧之间的边界定义帧之间的边界(0或或1) margwidth=“.”设置帧的边界和其中内容之间的间距设置帧的边界和其中内容之间的间距margheight=“.”设置帧的边界和其中内容之间的间距化设置帧的边界和其中内容之间的间距化noresize=“.”使帧的尺寸不能变使帧的尺寸不能变scrolling=.设置滚动条的表示方式设置滚动条的表示方式(auto, yes, no)IT Education & TrainingDate:2021年9月27日星期一49框架标记框架标记内嵌框架标记内嵌框架标记。iframe和和frame功能一样，功能一样，不同的是它是个浮动框架，你可以把不同的是它是个浮动框架，你可以把Iframe布置在你布置在你网页中的任何位置，包括网页中的任何位置，包括层中，这种极大的自层中，这种极大的自由度可以给由度可以给网页设计网页设计带来很大的灵活性带来很大的灵活性 。IT Education & TrainingDate:2021年9月27日星期一50JavaScriptIT Education & TrainingDate:2021年9月27日星期一51主要内容主要内容什么是什么是JavaScript以及为什么使用以及为什么使用JavaScript如何放置如何放置JavaScript代码代码JavaScript语言语言JavaScript函数函数JavaScript事件事件JavaScript对象对象如何对如何对Form表单进行验证表单进行验证IT Education & TrainingDate:2021年9月27日星期一52JavaScript简介简介javaScript语言简介语言简介JavaScript语言是语言是NetScape公司开发的一种基于对象的、由公司开发的一种基于对象的、由浏览器负责解释执行的、弱类型的描述性浏览器负责解释执行的、弱类型的描述性脚本语言脚本语言。用于在用于在HTML页面中增加交互能力页面中增加交互能力JavaScript是解释性语言（意味着使用其编写的脚本不需要是解释性语言（意味着使用其编写的脚本不需要事先编译）事先编译）JavaScript是通过嵌入到是通过嵌入到HTML语言中实现的，可以出现在语言中实现的，可以出现在HTML的任何地方，它弥补了的任何地方，它弥补了HTML语言的缺陷，是语言的缺陷，是Java与与HTML折衷的选择折衷的选择IE3.0和和NetScape3.0以上的浏览器都支持以上的浏览器都支持JavaScript语言。语言。动态网页分为两种动态网页分为两种一种是服务器端动态，主要由一种是服务器端动态，主要由JSP、PHP、ASP等等技术实现。等等技术实现。一种是客户端动态，主要由一种是客户端动态，主要由JavaScript、VBScript语言实现。语言实现。IT Education & TrainingDate:2021年9月27日星期一53JavaScript简介简介JavaScript与与java之间的主要区别：之间的主要区别：基于对象和面向对象基于对象和面向对象。JavaScript语言是基于对象和事件驱语言是基于对象和事件驱动的脚本语言；动的脚本语言；Java语言是面向对象的语言，可以设计独立语言是面向对象的语言，可以设计独立的程序的程序解释执行和编译执行解释执行和编译执行 JavaScript是一种解释性的语言，是将是一种解释性的语言，是将文本格式的代码发送到客户端由浏览器负责解释执行。文本格式的代码发送到客户端由浏览器负责解释执行。Java代码在执行之前必须编译成字节码文件，由虚拟机负责执行。代码在执行之前必须编译成字节码文件，由虚拟机负责执行。弱类型和强类型弱类型和强类型。JavaScript是弱类型变量，即变量在使用是弱类型变量，即变量在使用前不需要声明，由解释器负责确定变量的数据类型，而前不需要声明，由解释器负责确定变量的数据类型，而Java是一种强类型语言，所有的变量在事情之前必须声明，并且是一种强类型语言，所有的变量在事情之前必须声明，并且只能存放声明类型的数据。只能存放声明类型的数据。IT Education & TrainingDate:2021年9月27日星期一54JavaScript简介简介动态联编和静态联编动态联编和静态联编。JavaScript采用动态联编，即采用动态联编，即对象的引用在运行时进行检查，如不运行就无法实现对象的引用在运行时进行检查，如不运行就无法实现对对象引用的检查。而对对象引用的检查。而Java采用静态连接，即采用静态连接，即Java对对象引用在编译时进行，以使得编译器能够实现强类型象引用在编译时进行，以使得编译器能够实现强类型检查。检查。代码格式不一样代码格式不一样， Java是SUN公司推出的新一代面向对象的程序设计语言，与HTML并无关系,而JavaScript是Netscape公司的产品，其目的是为了扩展其浏览器功能，需要嵌入在HTML中进行执行。IT Education & TrainingDate:2021年9月27日星期一55JavaScript语言简介语言简介JavaScript语言的特点：语言的特点：解释型解释型的脚本语言，采用小程序端的方式实现编程，不需要事的脚本语言，采用小程序端的方式实现编程，不需要事先编译；先编译；是是基于对象基于对象的语言，可以运用已经创建好的对象，结合对象的的语言，可以运用已经创建好的对象，结合对象的方法和脚本实现所需的功能方法和脚本实现所需的功能是是事件驱动事件驱动的语言，可以直接对用户的输入做出响应，不需要的语言，可以直接对用户的输入做出响应，不需要服务器的支持，减少了浏览器和服务器之间的通信量，提高了服务器的支持，减少了浏览器和服务器之间的通信量，提高了响应速度。响应速度。变量类型采用变量类型采用弱类型弱类型，未使用严格的数据类型，未使用严格的数据类型是一种安全的语言，只能通过浏览器实现信息浏览或动态交互，是一种安全的语言，只能通过浏览器实现信息浏览或动态交互，不允许访问本地硬盘或将数据存到服务器上，不允许对网络文不允许访问本地硬盘或将数据存到服务器上，不允许对网络文档进行修改和删除，从而有效防止数据的丢失。档进行修改和删除，从而有效防止数据的丢失。是一种是一种与平台无关与平台无关的语言，依赖于浏览器本身，与操作系统无的语言，依赖于浏览器本身，与操作系统无关，从而实现了一定程度的关，从而实现了一定程度的”一次编写，随处运行一次编写，随处运行“。IT Education & TrainingDate:2021年9月27日星期一56JavaScript简介简介JavaScript代码的加入：代码的加入：使用使用标签将标签将javaScript代码潜入到代码潜入到HTML中。中。格式如下：格式如下：Javascript代码；代码；/script标记有两主要属性：标记有两主要属性：Language，脚本语言的类型，可以为，脚本语言的类型，可以为javaScript或或liveScriptSrc,包含包含javaScript源代码的文件，以源代码的文件，以”.js”为扩展名，可以是为扩展名，可以是javaScript以文件的形式加载到以文件的形式加载到html文件中文件中JavaScript代码可以嵌入在HTML的任何位置，但一般推荐将其放在标签中IT Education & TrainingDate:2021年9月27日星期一57网页中引入网页中引入JavaScript 案例名称：第一个案例名称：第一个JavaScript程序程序程序名称：程序名称：2-24.htm document.write(这是以JavaScript输出的!);IT Education & TrainingDate:2021年9月27日星期一58JavaScript中的注释JavaScript中的注释和中的注释和Java基本一致，也分为单行和多行注释。基本一致，也分为单行和多行注释。注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。 单行注释：使用单行注释：使用/符号对单行信息进行注释符号对单行信息进行注释 多行注释：使用多行注释：使用/*.*/对多行信息进行注释对多行信息进行注释例子：例子：/下面的下面的alert()是弹出一个对话框是弹出一个对话框/*下面的下面的alert()是弹出一个对话框是弹出一个对话框*/alert(这是第一个这是第一个JavaScript例子例子!);IT Education & TrainingDate:2021年9月27日星期一59JavaScript基本语法基本语法主要包括：基本语法主要包括： 数据类型 变量和数组的定义 表达式和运算符流程控制函数定义IT Education & TrainingDate:2021年9月27日星期一60数据类型数据类型JavaScript脚本语言同其他语言一样，有自己的基本数据类型、脚本语言同其他语言一样，有自己的基本数据类型、表达式和算术运算符以及程序的基本框架结构。表达式和算术运算符以及程序的基本框架结构。JavaScript的常见数据类型：的常见数据类型：字符串：abc hello 你好数字：包括整数数字和浮点型数字 布尔值：true 和false 空值：null特殊字符：又叫转义字符 b 表示退格 n 表示换页 t 表示Tab符号 r 表示回车符 表示双引号本身 表示单引号本身 表示反斜线 IT Education & TrainingDate:2021年9月27日星期一61变量变量JavaScript变量的定义：变量的定义：Javascript中采用弱类型变量，变量可以不做声明或不做类中采用弱类型变量，变量可以不做声明或不做类型声明，而在使用是确定类型。型声明，而在使用是确定类型。例如：例如：x=100、y“abc”等等等等但是，声明变量的好处是能够及时发现程序中的错误。但是，声明变量的好处是能够及时发现程序中的错误。javaScript中变量的定义使用关键字中变量的定义使用关键字var来实现。来实现。例如：例如：Var id;声明变量必须明确变量的命名、类型及作用域。声明变量必须明确变量的命名、类型及作用域。IT Education & TrainingDate:2021年9月27日星期一62声明变量声明变量案例名称：使用变量案例名称：使用变量程序名称：程序名称：2-25.htmvar strWelcome = 欢迎您！;var iCounter = 10;iCounter = iCounter + 1;document.write(strWelcome);document.write(iCounter);IT Education & TrainingDate:2021年9月27日星期一63变量变量JavaScript变量的命名：变量的命名：（1）变量命名必须以一个英文字母或是下划线为开头，）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是也就是变量名第一个字符必须是A到到Z或是或是a到到z之间的字之间的字母或是母或是“_”。（2）变量名长度在）变量名长度在0255字符之间。字符之间。（3）除了首字符，其他字符可以使用任何合法字符、数）除了首字符，其他字符可以使用任何合法字符、数字及下划线，但是不可以使用空格。字及下划线，但是不可以使用空格。（4）不可以使用）不可以使用JavaScript的运算符号，例如：的运算符号，例如：+，等。，等。（5）不可以使用）不可以使用JavaScript用到的保留字，例如：用到的保留字，例如：sqrt（开方），（开方），parseInt（转换成整型）等。（转换成整型）等。（6）在）在JavaScript中，变量名大小写是有所区别的，例中，变量名大小写是有所区别的，例如：变量如：变量s12和和S12是不同的两个变量。是不同的两个变量。JavaScript变量的作用域：变量的作用域：全局变量，全局变量， 定义在函数体之外，作用范围是所有函数。定义在函数体之外，作用范围是所有函数。局部变量，定义在函数体内，作用范围是本函数。局部变量，定义在函数体内，作用范围是本函数。IT Education & TrainingDate:2021年9月27日星期一64声明数组声明数组用用new和和Array关键字，关键字，new代表建立一个新的对象，代表建立一个新的对象，Array是是JavaScript内置的一个对象内置的一个对象由于由于JavaScript区分大小写，所以区分大小写，所以Array的首字母必须是大写。的首字母必须是大写。数组声明：数组声明：var 数组变量名数组变量名= new Array() 创建时指定数组长度var week = new Array(7) 创建时不指定数组长度，自动延伸数组的长度var week = new Arrary()数组的长度：使用数组的数组的长度：使用数组的length属性来获得数组的长度属性来获得数组的长度week.lengthIT Education & TrainingDate:2021年9月27日星期一65使用数组使用数组案例名称：使用数组案例名称：使用数组程序名称：程序名称：2-26.htmvar arrUserName = new Array(2);arrUserName0 = Bill;arrUserName1 = Bob;document.write(arrUserName0);document.write();document.write(arrUserName1);document.write();IT Education & TrainingDate:2021年9月27日星期一66运算符运算符JavaScript的运算符的运算符数学运算符：数学运算符：加法运算符加法运算符”+”减法运算符减法运算符“-”乘法运算符乘法运算符”*”除法运算符除法运算符“/”取模运算符取模运算符“%”递增运算符递增运算符“+”递减运算符递减运算符”-”位运算符：位运算符：按位与按位与”&”按位或按位或”|”按位异或按位异或”按位取非按位取非”左移操作符左移操作符”逻辑右移操作逻辑右移操作符符”IT Education & TrainingDate:2021年9月27日星期一67算术运算符算术运算符 案例名称：算术运算符案例名称：算术运算符程序名称：程序名称：2-27.htm document.write(3*2); document.write(); document.write(3/2); document.write(); document.write(3%2);/取余数IT Education & TrainingDate:2021年9月27日星期一68字符串运算符的使用方法字符串运算符的使用方法 案例名称：字符串运算符案例名称：字符串运算符程序名称：程序名称：2-29.htmvar strHello = 网页编程;var strResult = 你好，;strResult += strHello;/等价于：strResult = strResult + strHello;document.write(strResult);IT Education & TrainingDate:2021年9月27日星期一69运算符运算符逻辑运算符逻辑运算符逻辑与逻辑与&”逻辑或逻辑或”|”逻辑非逻辑非“！”比较运算符比较运算符等于等于“=”不等于不等于”!=”小于小于”小于等于小于等于”=”严格等于严格等于”=”严格不等于严格不等于”!=”赋值运算符赋值运算符”=”+=”-=”*=”/=”%=”&=”|=”=”=”=”IT Education & TrainingDate:2021年9月27日星期一70逻辑运算符逻辑运算符逻辑运算符包括：与运算符逻辑运算符包括：与运算符“&”、或运算符、或运算符“|”和取反和取反运算符运算符“！”案例名称：逻辑运算符案例名称：逻辑运算符程序名称：程序名称：2-28.htm document.write(true&false); document.write(); document.write(false&false); document.write(); document.write(true|false); document.write(); document.write(!false);IT Education & TrainingDate:2021年9月27日星期一71运算符运算符其他运算符其他运算符条件操作符条件操作符”(condition)?:val1;val2”,唯一的三目运算符唯一的三目运算符成员选择运算符成员选择运算符“.”,来引用对象的属性和方法来引用对象的属性和方法下标运算符下标运算符，用来应用数组的元素，如：，用来应用数组的元素，如：arry8逗号运算符逗号运算符，用来分开不同的值，如：，用来分开不同的值，如：var a，b函数调用运算符函数调用运算符，用来表示函数的调用，如，用来表示函数的调用，如function（）（）“new”，创建指定对象的实例，如：，创建指定对象的实例，如：new myObject。delete，用来删除对象，对象的属性，数组元素。，用来删除对象，对象的属性，数组元素。typeof，用来返回操作数的类型，类如，用来返回操作数的类型，类如 typeof true，返回为，返回为boolean。void，用于定义函数，表示不返回任何