第二章 设计Web表单 一、 网页结构与元标记 二、 文本与表格标记 三、 图像与链接标记 四、 表单标记 五、 样式表及其基本属性 六、 CSS盒状模型与表单修饰 七、 JavaScript基础 八、 DOM与表单交互
一、网页结构与元标记
HTML概述 HyperText Markup Language 常见网页类型 编写方法 浏览方法 超文本标记语言、网页设计语言和编写规范 静态网页：.htm、.html 动态网页：.asp、.jsp、.php 编写方法 使用文本编辑器：记事本 使用工具软件：FrontPage、Dreamweaver 浏览方法 将网页文件存储到网站根目录中, 如: c:/AppServ/www 在IE地址栏输入：http://127.0.0.1/网页文件名 第2章 设计表单
1. 网页结构 网页结构 <html> <head> <title>网页标题</title> 注：尖括号“<”和“>”内的内容称为元素，说明标记（标签）的意义，不区分大小写。 网页标题标记 <html> <head> <title>网页标题</title> </head> <body> ··· ··· </body> </html> 网页起止标记 头部标记 主体标记 第2章 设计表单
1. 网页结构 注释标记 头部标记 <!-- 注释内容 --> 网页头部 网页标题 元标记<meta> <!-- 注释内容 --> 头部标记 网页头部 <head>头部内容</head> 网页标题 显示在窗口标题栏中 <title>网页标题</title> 元标记<meta> 第2章 设计表单
1. 网页结构 主体标记 <body [bgcolor=# | text=# | link=# | alink=# | vlink=# | background=#]> </body> 常用颜色 红 red， 黄 yellow， 蓝 blue， 黑 black，白 white， 灰 gray 参见文档“网页常用颜色.doc” 背景颜色 字符颜色 等待、按下和按下后，超链接的颜色 指定背景图片 第2章 设计表单
1. 网页结构 主体中常用标记 编辑标记 区块标记 <p> (强制分段，结束标记</p>可选) <br> (强制换行，没有结束标记) 区块标记 居中元素 <center>要居中的内容 </center> 块元素（可以包含<p>标记） <div></div> 行内元素（可以被<p>标记包含） <span></span> 第2章 设计表单
2. 元标记 元(Meta)标记位置 Meta标记作用 设置搜索引擎关键字 单标记，必须位于网页头部标记中 格式：<meta name=“text” content=“text”> Meta标记作用 定义使用字符集、语言、作者等信息 实现自动刷新、进入和退出等特效 设置搜索引擎关键字 <meta name=“keywords” content=“搜索关键词”> <meta name=“description” content=“网页概述”> 第2章 设计表单
2. 元标记 Meta标记的http-equiv属性 格式：<meta http-equiv =# content=#> equivalent：当量,相等,等价 2. 元标记 Meta标记的http-equiv属性 格式：<meta http-equiv =# content=#> 1.Content-Language 设定页面使用的语言： <meta http-equiv="Content-Language" content="zh-cn"> 2.Content-Type 设定页面使用的字符集： <meta http-equiv="Content-Type" content="text/html;charset=gb2312“> 第2章 设计表单
2. 元标记 Meta标记的http-equiv属性 3. Refresh 设定自动刷新并指向新页面(跳转)： 4. Page-Enter <meta http-equiv="Refresh" content="3;URL=http://www.sgksw.net/"> 4. Page-Enter 设定进入页面时的特殊效果： <meta http-equiv="Page-Enter" content="revealTrans(duration=1,transition=14)"> 参见文档”网页META标记.doc” 第2章 设计表单
练习一 第2章.txt 例2.1 (我的网页) 例2.2 (Meta标记) 第2章 设计表单
二、文本与表格标记
1. 文本标记 特殊字符 ©版权符号：© ®注册符号：® 标题标记 空格字符： <hn [color=# | align=#]>标题文字</hn> n=1|2|3|4|5|6：数字越小，字体越大 第2章 设计表单
1. 文本标记 字体标记 字型标记 <font face=# size=# color=# align=#> <b></b>(加粗) <i></i>(倾斜) <u></u>(下划线) 尽量不用——因为超级链接标记默认带下划线 此标记淘汰中, 有时显示脚本出错 第2章 设计表单
2. 表格概述 表格的作用 表格是网页中的常见元素 需要明确的问题 排列页面文字 调整页面布局 定位页面图片 表格有哪些组成元素 各元素分别使用什么标记 第2章 设计表单
2. 表格概述 表格的组成 表格标题：位于 表格框线之外！ 列名行 数据行 单元格 第2章 设计表单
3. 表格标记 表格基本属性 <table width=# height=# border=# align=# cellspacing=# cellpadding=#> 边框大小,默认为0 格间距, 默认为2 填充距, 默认为1 第2章 设计表单
3. 表格标记 表格结构标记 <table> </table> <caption>表题 </caption> <tr> <th>列名1</th> <th>列名2</th> ······ </tr> <td>数据1</td><td>数据2</td> ······ ······ </table> 默认在表格上方居中显示 默认在单元格中居中对齐 列名行 单元格 数据行 默认在单元格中左对齐 第2章 设计表单
3. 表格标记 表格其它属性 <table bgcolor=# bordercolor=# background=# frame=# rules=# > 框线颜色,默认灰色 背景图像 内边框: rows(行分隔线),cols(列分隔线),none 外边框样式：void(不显示), hsides(仅上下边框) 第2章 设计表单
3. 表格标记 合并单元格 横向合并(跨列) 纵向合并(跨行) 举例 <th colspan=# > 或 <td colspan=# > 横向延长单元格，#代表所延长的列数 纵向合并(跨行) <th rowspan=# > 或 <td rowspan=# > 纵向延长单元格，#代表所延长的行数 举例 <td colspan=3>横向合并3个数据单元格</td> 第2章 设计表单
练习二 第2章.txt 例2.3 (字符标记) 例2.4 (文本标记) 例2.5 (表格标记) 基本目标 高级目标 第2章 设计表单
三、图像与链接标记
1. 引用图像标记 引用图片 引用路径 <img src=# [alt=说明文字 | 当鼠标移到图片区域时显示 引用图片 <img src=# [alt=说明文字 | align=# | border=# | width= # | height=# ]> 引用路径 绝对路径 用于引用当前站点以外的文件，常用URL表示 相对路径 用于引用当前站点的文件 从当前文件夹开始的相对路径 从根文件夹开始的相对路径 第2章 设计表单
1. 引用图像标记 URL Uniform Resource Locator (统一资源定位符) http://www.sgksw.net/head/head.jpg 网络协议：http 主机域名(或IP地址)：sgksw.net (根文件夹) 文件路径：/head/head.jpg 引用该图片的标记 <img src=“http://www.sgksw.net/head/head.jpg” alt=“这是外网中的图片”> 第2章 设计表单
1. 引用图像标记 从当前文件夹开始的相对路径 ../a.jpg b.bmp gif/d.gif ../images/c.jpg 已知四张图片的存储位置如下，在文件夹htm中的网页文件如何引用这些图片？ 例2.6(图片标记) 父文件夹 父 ../a.jpg b.bmp 子文件夹 子 gif/d.gif 兄弟 ../images/c.jpg 第2章 设计表单
1. 引用图像标记 从根文件夹开始的相对路径 /a.jpg /htm/b.bmp /htm/gif/d.gif /images/c.jpg 总是从当前站点的根文件夹(/)开始 已知四张图片的存储位置如下，如何引用这些图片？ 更改例2.5(引用图片)所设计的网页 /a.jpg /htm/b.bmp /htm/gif/d.gif /images/c.jpg 第2章 设计表单
1. 引用图像标记 引用图像有哪两种路径？ 相对路径有几种? ../a.txt b.htm htm/abc/c.doc 绝对路径 用于引用当前站点以外的文件，常用URL 相对路径 用于引用当前站点的文件 相对路径有几种? 从当前文件夹开始的相对路径 说出右图文件所处的相对路径 从根文件夹开始的相对路径 总是从根文件夹开始的完整路径 ../a.txt b.htm htm/abc/c.doc ../images/c.jpg 第2章 设计表单
2. 超级链接标记 链接到文件(超级链接) 链接到电邮(电邮链接) 链接到本页(锚记链接) “关闭窗口”的链接 <a href=#>提示文字</a> 链接到电邮(电邮链接) <a href=“mailto: 电邮地址”>提示文字</a> 链接到本页(锚记链接) 先在目标处命名锚记：<a name=“hi”></a> 再链接到该锚记：<a href=“#hi”>提示文字</a> “关闭窗口”的链接 <a href=“javascript:window.close()”>关闭窗口</a> 第2章 设计表单
2. 超级链接标记 链接文件的打开位置 target= _blank | _parent | _self | _top <a href=url target=# >提示文字</a> 默认在当前窗口中打开链接文件，要在其它位置打开，必须使用关键字 target指定 target= _blank | _parent | _self | _top _blank：新窗口(保持当前窗口不变) _parent：父窗口(替换父窗口) _self：当前窗口(替换当前窗口，可以省略) _top：顶层窗口(替换整个显示窗口) 第2章 设计表单
练习三 第2章.txt 例2.6 (图像标记) 例2.7 (链接标记) 第2章 设计表单
1. 表单与表单元素 2. 文本框和密码框 3. 单选钮和复选框 4. 列表选择框 5. 文本域和按钮 6. 文件框和控件集 四、表单标记 1. 表单与表单元素 2. 文本框和密码框 3. 单选钮和复选框 4. 列表选择框 5. 文本域和按钮 6. 文件框和控件集
1. 表单与表单元素 表单的作用 表单元素(控件) 动态网页的核心对象，主要负责数据采集功能，实现浏览器与服务器之间的信息交互 表单域 采集数据的网页在浏览器端运行：.htm、.html 处理数据的网页在服务器端运行：.asp、.jsp、.php 表单元素(控件) 表单域 包含文本框、密码框、隐藏框、文本域、单选钮、复选框、列表选择框、文件上传框、控件集等。 命令按钮 包括提交按钮、复位按钮和一般按钮。 第2章 设计表单
1. 表单与表单元素 表单标记结构 表单标记可以出现在网页的任何部位 包含处理数据程序的URL和提交数据的方式。 <form name=# action=“*.php” method=#> 表单元素（表单域+命令按钮） </form> name：表单名称，便于引用 action：指定处理数据的程序文件 动态网页，在服务器端（后端）运行 method：指定提交数据的方式 get：提交少量数据，发送时会显示在地址栏中 post：提交大量数据，发送时不可见，安全性高 第2章 设计表单
1. 表单与表单元素 表单元素 表单元素：表单域+命令按钮 表单元素必须位于表单起止标记之间 每个元素都有一个名称 每个元素都有两个值 由name属性指定，以便处理表单时引用 每个元素都有两个值 初始值：由网页设计者预先指定 当前值：根据用户的交互操作确定 第2章 设计表单
1. 表单与表单元素 常用表单元素 文本框 单选钮 密码框 复选框 列表选择框 控件集 文本域 命令按钮 第2章 设计表单
2. 文本框和密码框 文本框 密码框 隐藏框 <input type=“text” name=# value=# size=# maxlength=#> name：设定名称(变量名)，以便处理数据时引用 value：设定初始值 size：设定文本框大小——在屏幕上显示的宽度 maxlength：允许输入的最多字符数 密码框 type=“password”，输入时，字符显示为“*” 隐藏框 type=“hidden”，用于收集不可见内容 第2章 设计表单
3. 单选钮和复选框 单选钮 <input type=“radio” name=# value=# checked> 成组出现，一组单选钮 必须具有相同的名称(name)，名称不同的单选钮属于不同的组 必须选一个，只能选一个（相互排斥） checked：设为初始值(默认值) 复选框(检查框) type=“checkbox” 一组复选框不能具有相同的名称(NAME) 可以不选、选一个、选多个、全选（相互兼容） 第2章 设计表单
4. 列表选择框 提供一个列表供选择（下拉列表） <select name=# size=# multiple> <option value=#>选项1</option> <option value=# selected>选项2</option> ··· ··· <option value=#>选项n</option> </select> size：显示行数 multiple：允许多重选择 value：选择项的值 selected：设为初始值，默认为选项1的值。 第2章 设计表单
5. 文本域和按钮 文本域（多行文本框） 命令按钮 <textarea name=# rows=# cols=#> 默认显示的文字 </textarea> 亦称多行文本框，用于多行输入，浏览器会自动应用滚动条 命令按钮 <input type=“submit” value=“提交”> < input type=“reset” value=“重置”> < input type=“button” value=“按钮” onclick=#> 第2章 设计表单
6. 文件框和控件集 文件(上传)框 控件集 <input type=“file” name=# size=#> 划分表单区域，用于对控件进行分组 <fieldset> <legend>区域标题</legend> ……(若干控件) </fieldset> 第2章 设计表单
练习四 第2章.txt 例2.8 (我的表单) 第2章 设计表单
样式表的特点与分类 样式表的定义与应用 样式表的基本属性 五、样式表及其基本属性 样式表的特点与分类 样式表的定义与应用 样式表的基本属性
1. 样式表的特点与分类 层叠样式表特点 Cascading Style Sheets 用来定义HTML元素的外观（字体，颜色等） 实现网页内容结构与其表现形式的分离 一处定义，多处应用，事半功倍 精简页面代码，提高下载速度 适合所有浏览器，兼容性好 多项样式定义将会层叠成一项 第2章 设计表单
1. 样式表的特点与分类 样式表的分类 内联样式(Inline Style) 内部样式表(Internal Style Sheet) 写在HTML标记里面，只对所在标签起作用。 内部样式表(Internal Style Sheet) 写在网页<head>里面，对所在页面起作用。 外部样式表(External Style Sheet) 写在单独的文本文件 (常以.css标识)中 某个网页需要时，在<head>里面引用，即起作用。 第2章 设计表单
2. 样式表的定义与应用 内联样式的书写 style= “属性1:属性值1;属性2:属性值2” 举例 属性和属性值之间用冒号(:)连接 两个属性之间以分号(;)隔开 举例 定义段落的字体大小和颜色 <p style="font-size:14px;color:red"> font-size 和 color 是属性 14px 和 red是对应的属性值 第2章 设计表单
2. 样式表的定义与应用 内部样式表的位置 写在网页的<head>区域中，具体如下： <style type="text/css"> <!-- h1{font-size:14px;color:red;} --> </style> HTML注释标记表示：如果浏览器不支持样式表可以忽略 第2章 设计表单
2. 样式表的定义与应用 内部样式表的书写 选择器{属性1:属性值1;属性2:属性值2} 例：h1 {font-size:14px; color:red;} h1是选择器，font-size 和 color 是属性 14px 和 red是对应的属性值 最后一个属性值后可以不用分号(一般用分号) 对多个选择器设置相同的属性和属性值时，可以采用组合写法，例 h1,h2,h3,h4,h5,h6 {font-size:14px; color:red;} 各个选择器间用逗号(,)分隔 第2章 设计表单
2. 样式表的定义与应用 内部样式表的书写 font-size:14px; } 为了可读性和修改方便，通常分行书写 h1 { color:red; } 左括号与选择器同行，右括号与选择器同列 注释方法 样式表的注释以/*开始，以*/结束 ，如/*注释内容 */ 第2章 设计表单
2. 样式表的定义与应用 选择器的命名 类选择器与标识符选择器的区别 标签选择器 类(class)选择器 id(标识符)选择器 如img{…………}，对所有img标记起作用 类(class)选择器 如.myfont{……}，对指定class=myfont的标记起作用 id(标识符)选择器 如#myp{……} ，对指定id=myp的标记起作用 类选择器与标识符选择器的区别 定义时前导符号不同，class用“.”，id用“#” class选择器在每个页面可以无限次使用 id选择器在每个页面只能使用一次，必须唯一 第2章 设计表单
2. 样式表的定义与应用 派生选择器 外部样式表的位置 外部样式表的书写 继承原有选择器样式，再单独定制一个或多个特殊样式 写在文本文件中 如h1 strong{……} (两个选择器之间空一格) 外部样式表的位置 写在文本文件中 外部样式表的书写 用记事本书写 保存为.css文件 第2章 设计表单
2. 样式表的定义与应用 内联样式的应用 内部样式表的应用 外部样式表的应用 嵌入法—直接嵌入标记中 导入法 链入法 在标记中，用class指定类，或用id指定标识符 外部样式表的应用 链入法 在网页<head>区域，写链入语句： <link href= "mycss.css" rel="stylesheet" type="text/css"> 第2章 设计表单
3. 样式表的基本属性 字体属性 设置页面中字体的表现形式,包括四种: 族类—font-family (字族) 宋体、仿宋_GB2312、黑体、楷体_GB2312 大小—font-size (尺寸) 绝对大小：small, medium, large 相对大小：smaller, larger (缩小或增大一级) 具体数值：mm(毫米), pt(点), px(像素) 百分比：% 第2章 设计表单
3. 样式表的基本属性 字体属性 风格—font-style (样式) 粗细—font-weight (浓淡) normal(正常), italic (斜体) 粗细—font-weight (浓淡) 名称：normal(普通), bold(加粗) 数值：100-900, 400以下正常，以上为加粗 第2章 设计表单
3. 样式表的基本属性 颜色属性 颜色的三种表示法 前景颜色 背景颜色 注意区别 名称：red, yellow, blue, black,white,pink,orange RGB：rgb(255,0,0), rgb(0,255,0), rgb(0,0,255) HEX：#ff0000, #000000, #ffffff 前景颜色 color 背景颜色 background-color (默认为透明transparent) 注意区别 <body text=# bgcolor=#> 第2章 设计表单
3. 样式表的基本属性 文本属性 文本转换 text-transform (只对英文有效) 文本修饰 text-decoration capitalize (首字母大写) uppercase (大写) lowercase(小写) 文本修饰 text-decoration underline (下划线), overline (上划线) line-through (删除线), blink (闪烁) 字符间距 letter-spacing 用数值表示，在正常间距上加或减这个数值 第2章 设计表单
3. 样式表的基本属性 文本属性 注意区别 行高 line-height 首行缩进 text-indent 水平对齐 text-align left, right, center justify (均匀分布，分散对齐) 垂直对齐 vertical-align (缩写valign) top, middle, bottom sub (下标位), super (上标位) 注意区别 <sup> (上标), <sub> (下标), <s> (删除) 用于 区块 标记 第2章 设计表单
练习五 第2章.txt 例2.9 (应用样式一) 例2.10 (应用样式二) 第2章 设计表单
六、盒状模型与表单修饰 CSS盒状模型 用样式表修饰表单
1. CSS盒状模型 盒状模型 CSS中的重要概念，CSS中无处不在 由四个属性组合形成，其中“内容”是必备的 content（内容，它可以是文字、图片等） padding（内边距或空白，内容到边框之间的距离） border（边框，设置内容的边框线粗细和样式等 ） margin（外边距或边界，设 置一块内容与另一块内容之 间的距离 ） 第2章 设计表单
1. CSS盒状模型 内边距属性 可对上右下左四个方向分别设置 综合写法 简略写法 如padding-top，padding-right .box1{padding:5px 5px 5px 10px;} 作用顺序是上-右-下-左 简略写法 只设一个值，它将作用于全部四个边。 设置两个值，第一个为上下，第二个为左右。 设置三个值，第一个为上，第二个为左右，第三个为下。 第2章 设计表单
1. CSS盒状模型 边框属性 边框宽度 border-width 边框样式 border-style 边框颜色 border-color 可以细分，如左边框宽度 border-left-width 边框样式 border-style 可以细分，如左边框样式 border-left-style 边框颜色 border-color 可以细分，如左边框颜色 border-left-color 边框border 综合写法，设置四个边框的宽度、样式和颜色 格式：border: border-width border-style border-color; 示例：.bk01 {border:3px solid #FF0000;} 顺序：依次设置宽度、样式、颜色 第2章 设计表单
1. CSS盒状模型 边框样式属性值 8种边框样式 类3D效果 第2章 设计表单
1. CSS盒状模型 外边距属性 可对上右下左四个方向分别设置 综合写法 简略写法 如margin-top，margin-right .box1{margin:5px 5px 5px 10px;} 作用顺序是上-右-下-左 简略写法 只设一个值，它将作用于全部四个边。 设置两个值，第一个为上下，第二个为左右。 设置三个值，第一个为上，第二个为左右，第三个为下。 第2章 设计表单
2. 用样式表修饰表单 输入框样式 按钮样式 超链接样式 .iput{width:100px;height:30px;border:2px inset;} 按钮样式 .butn{width:100px;height:30px; font-size:18px; font-weight:900; background-color:#e9e9e9;color:#008000} 超链接样式 a{color: blue;text-decoration: none;} a:hover{color: red;} //悬停时颜色 a:active{color: green;} //点击时颜色 第2章 设计表单
练习六 第2章.txt 对例2.9应用超链接样式，观察浏览效果 用样式表修饰例2.8(我的表单)，观察浏览效果 第2章 设计表单
JavaScript概述 JavaScript基本语法 JS函数与流程控制 JS对象与事件
1. JavaScript 概述 性质 作用 基于对象和事件驱动，并具有安全性能的一种脚本语言。 HTML只提供静态信息，嵌入JavaScript代码可以实现客户端动态效果。 即时校验表单，提高运行效率 制作特殊效果，丰富网页内容 响应用户事件，实现动态交互 第2章 设计表单
1. JavaScript 概述 JS是一种脚本语言 采用小程序段的方式实现编程。 在程序运行过程中被逐行地解释，是一种解释性语言，不需要事先编译。 基本结构形式与C、C++、VB、Delphi类似。 与HTML标识结合在一起，便于使用和操作 能运用自己已经创建的对象 第2章 设计表单
1. JavaScript 概述 简单性 安全性 动态性 跨平台性 基于Java的紧凑设计 未使用严格的数据类型 对运行环境要求较低 不允许访问本地硬盘，也不能将数据存入到服务器上 动态性 直接在客户端对用户的输入作出响应 表单先在本地部分校验，再提交到Web服务器 跨平台性 可以在不同的操作系统上运行 第2章 设计表单
1. JavaScript 概述 内部与外部代码 外部代码（JS文件） 类似内部样式表与外部样式表 内部代码：嵌入到HTML文件中 外部代码：以文件形式独立保存 外部代码（JS文件） 可用任何文本编辑器编辑 通常用“.js”为扩展名标识 引用语句： <script type =“text/JavaScript" src= " *.js" ></script> 比较<link type="text/css“ href= "mycss.css" rel="stylesheet“> 第2章 设计表单
1. JavaScript 概述 编码规范 JavaScript代码可以出现在HTML的任何位置 <script Language =“JavaScript”> alert(“弹出一个提示框”); document.write(“输出字符串” ); </script> 分行书写，用分号结束一行（可省略） 注释方法与PHP一样 单行注释：// 多行注释：/*…………*/ 第2章 设计表单
2. JavaScript 基本语法 数据类型 数值型 字符串型：“开源数据库应用实务” 逻辑型（布尔型）：true, false 整型：123 浮点型：123.45, 1.23E10 字符串型：“开源数据库应用实务” 逻辑型（布尔型）：true, false 空值型：Null 未定义型（Undefined） 对象型（Object） 第2章 设计表单
2. JavaScript 基本语法 JavaScript变量 以字母或下划线开头，不能包含空格和加减号 变量名严格区分大小写，User与user不同 简单地用var来定义所有变量，变量类型由赋值语句隐含确定。 如果money=1000，则money可参与整型数操作； 如果money= “1000”，则money可参与字符串操作； 如果money=false，则money可参与逻辑操作。 变量可以先赋予一种类型的值，再根据需要赋予另一种类型的值。 第2章 设计表单
2. JavaScript 基本语法 JavaScript运算符 ① 算术运算符：+、-、*、/、%、++、--等。 ② 逻辑运算符：&&、||、! 等。 ③ 比较运算符：<、<=、>、>=、= =、!= 等。 ④ 字符串运算符：+，用于连接两个字符串。 ⑤ 赋值运算符：=、+=、-=、*=、 ／=、 ％=等。 ⑥ 三目运算符: 条件表达式?表达式1:表达式2。 若条件表达式为真，结果值为表达式1 若条件表达式为假，结果值为表达式2 第2章 设计表单
3. JS函数与流程控制 函数格式 调用方法 <Script Language ="JavaScript"> function 函数名(形参1,形参2,…) { 函数体 } </Script> 调用方法 函数名(实参1,实参2,…) 第2章 设计表单
3. JS函数与流程控制 If语句 If…else语句 Switch语句 Switch(表达式) { case 值1; 语句段; break; case 值2； …… } 第2章 设计表单
3. JS函数与流程控制 For循环 For…in循环 While循环 do…while循环 程序转移语句 Break：中断语句序列 Continue：中断本次循环，继续下一次循环 For(a in arrayName) { document.write(a); } 第2章 设计表单
4. JS对象与事件 对象及其分类 对象是一种集合性的数据类型，网页中的按钮、网页文档和窗口等都是对象。万物皆对象 对象由属性和方法两个基本元素组成 属性：反映对象的某些特定性质，如背景色、长度等 方法：对象要执行的任务（对属性数据进行的操作） JavaScript中的对象 JS内置对象：Array、Date、String、Math 浏览器对象模型(DOM)中的对象 用户自定义对象 第2章 设计表单
4. JS对象与事件 对象属性的引用 对象方法的引用 使用点“.”运算符：对象名.属性名 使用下标引用：对象名[下标] 使用字符串引用：对象名[“属性名”] 对象方法的引用 对象名.方法名(参数表) 实质上是一个函数 第2章 设计表单
4. JS对象与事件 事件 事件处理 常用事件 用户与网页交互时产生的操作称为事件 浏览器等待事件发生，自动调用事件处理函数 浏览器为了响应某个事件而进行的处理过程，叫做事件处理 事件处理程序可以是任意JS语句，但一般是函数 常用事件 一般由对窗口、表单对象、鼠标等的操作引起。如onload、onfocus、onsubmit、onclick等 第2章 设计表单
练习七 第2章.txt 例2.11(JS基础) 例2.12(JS显示日期) 例2.13(事件处理) 第2章 设计表单
DOM对象模型 DOM对象模型的应用 JS与表单交互
1. DOM对象模型 文档对象模型 对象的引用 Document Object Model，DOM 提供了一种按顺序、层次方式访问文档中各个对象及其内容的结构化方式 是W3C制订的标准 World Wide Web Consortium (万维网联盟，理事会) 对象的引用 各层次对象之间用点号“.”连接，如一个表单元素的value属性的完整路径为 window.document.myform.text1.value; 顶层对象，引用时省略 第2章 设计表单
1. DOM对象模型 Window(窗口)对象 Status属性 Open方法 打开浏览器窗口，就会自动创建window对象 window.open(theURL,winName,features); 参数features是一个由逗号分隔的选项列表 Menubar =yes,no 是否显示菜单栏 Toolbar =yes,no 是否显示工具栏 Location =yes,no 是否显示地址栏 Status =yes,no 是否显示状态栏 Scrollbars =yes,no 是否显示滚动条 Resizable =yes,no 是否可以改变大小 第2章 设计表单
1. DOM对象模型 Document(文档)对象 Document对象属性和方法的引用 是window对象的子对象，是最常用的对象之一 提供了访问文档中所有元素的属性和方法 Document对象属性和方法的引用 当前窗口文档： Document.属性名 指定窗口文档： 窗口名. Document.属性名 向文档中写入文字：Document.write( ) 第2章 设计表单
用于在指定的毫秒数后调用函数或计算表达式 1. DOM对象模型 关闭窗口的三种方式 以按钮方式 < INPUT onclick=window.close() type=button value=关闭窗口> 以链接方式 <a href="javascript:window.close()">关闭窗口</a> 以自动方式 <script language="JavaScript"> setTimeout("self.close()",5000); </script> 用于在指定的毫秒数后调用函数或计算表达式 第2章 设计表单
1. DOM对象模型 Form(表单)对象 Form表单对象是document对象的子对象 网页文档中所有表单是一个数组 Form对象的引用 Document.forms[] ，下标从0开始 Form对象的引用 Document.forms[index] Document.表单名 表单元素是表单对象的子对象 Document.表单名.elements[index] Document.表单名.表单元素名 第2章 设计表单
2. DOM对象模型的应用 例16（动态切换链接标志图片） 例15（窗口对象） 第2章 设计表单
3. JS与表单交互 表单的前端校验 例16（表单校验一) 由表单的onsubmit事件触发一个校验函数 <form ………… onsubmit=“return func()”> 例16（表单校验一) 对例8(我的表单)进行前端校验，要求： 用户姓名不少于2个字符， 密码不少于6个字符 逐一校验，不通过时用 alert()函数给出提示，返回后相应表单域清空并获得焦点 适当修饰网页和表单元素 第2章 设计表单
3. JS与表单交互 表单前端逐一校验方法 先设计表单,为每个表单域命名,并在表单标记<form>中加入onsubmit事件指定校验函数。 一般在网页头部编写JS校验函数，如 function Form_Submit() //定义校验函数 { if(document.form1.pwd.value.length<6) alert(“密码不能少于6个字符!”); //弹出提示框 document.form1.pwd.value=“”; //表单域清空 document.form1.pwd.focus(); //表单域获焦点 return false; } 第2章 设计表单
3. JS与表单交互 例17（表单校验二) 对例8(我的表单)进行前端校验，要求： 适当修饰网页和表单元素 用户姓名不少于2个字符 密码不少于6个字符 整体校验，不通过用 alert()函数分行给出提示 适当修饰网页和表单元素 第2章 设计表单
3. JS与表单交互 表单前端整体校验方法 设定义一个返回变量并赋空值。如 逐个校验表单域，不通过时返回一行提示。如 var msg=“”; 逐个校验表单域，不通过时返回一行提示。如 msg+=“姓名至少两个字符\n”; //\n为换行符号 检查返回变量的长度，若大于0，说明有表单域未通过校验，此时弹出提示框。如 if(msg.length>0) { alert(msg); return false; } 第2章 设计表单
实训项目二 设计一个“欢迎免费注册”表单 1. 文件名regist.htm，网页标题和页面标题都是“欢迎免费注册”,表单数据提交给程序文件regist.php处理; 2. 表单含有帐号、姓名、密码、确认密码、性别（单选）、兴趣爱好（多选）、年级（选项列表）、联系方式（文本域）等内容； 3. 要求：帐号至少8个字符，姓名至少2个字符，密码至少6个字符，确认密码与密码必须相同，在表单 中对相应项目附加提示信息； 4. 对表单进行前端校验，若不符合要求，用alert()函数分行给出提示； 5. 请适当修饰表单元素，网页背景颜色、字体颜色、按钮背景颜色自定。 第2章 设计表单