1、Web应用开发应用开发网页设计基础网页设计基础v2.1 HTML与XMLv2.2 利用CSS布局网页v2.3 JavaScript客户端编程 2.1 HTML与与XML 超文本标记语言（Hyper Text Markup Language，简称，简称HTML）是Web页面的标记性语言，通过一定的格式标记文本及图像等元素，使之在浏览器中显示出不同内容和风格的网页。2.1.1 HTML文档的基本结构HTML文档拥有一种“嵌套”结构4html标签定义一个网页head标签定义网页的头部body标签定义网页的主体p标签启动一个段落title标签定义网页的标题HTML 文档的基本结构文档的基本结构5l 页
2、面标记页面标记l 文字和段落标记文字和段落标记l 超链接标记超链接标记l 列表标记列表标记l 表格标记表格标记l 表单标记表单标记2.1.2 HTML文档的主要标记 .bgcolor-背景色彩 text-非可链接文字的色彩 link-可链接文字的色彩 alink-正被点击的可链接文字的色彩 vlink-已经点击(访问)过的可链接文字的色彩#=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue,RGB)值来表示。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.q标题字体标题字体 h#h#./h#/h#HTML headings are d
3、efined with the to tags.#=16；h1为最大字，h6为最小字q字体标记字体标记 fontfont./font/font (1)字体大小 font size=#font size=#./font/font (2)文字颜色 font color=#font color=#rrggbbrrggbb./font/font (3)粗体字 b b./b/b(4)斜体字 i i./i/i 颜色名称和对应的十六进制数码Black =#000000Green =#008000Silver =#C0C0C0Lime =#00FF00Gray =#808080Olive =#808000Wh
4、ite =#FFFFFFYellow =#FFFF00Maroon =#800000Navy =#000080Red =#FF0000Blue =#0000FFPurple =#800080Teal =#008080Fuchsia=#FF00FFAqua =#00FFFFv 给文本设置一些特殊格式，如粗体、斜体、下划线、上下标等。物理样式标记 属 性说明属性说明黑体字上标斜体字下标加下划线小字体加删除线大字体出逻辑样式标记 属 性说 明输出需要强调的文本（通常是斜体加黑体）输出加重文本（通常也是斜体加黑体）输出引用方式的字体，通常是斜体为文本加上删除线q分段和换行标记分段和换行标记 段落段落(
5、可以看作是空行可以看作是空行)换行换行 例如：你好吗？很好。你好吗？很好。q文字的对齐文字的对齐(Alignment)Alignment).#=left,center,right#=left,center,right p DIV DIV标记标记 DIV标记用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为和。单独的DIV标记不能完成任何工作，必须与align属性联合使用。位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。文本或图像文本或图像 p 水平线标记水平线标记 水平线标记在网页中添加一条水平线，将不同的信息分开。内部链接内部链接 请单击查看请单击查看
6、1.htm中的内容中的内容 外部外部链接链接 链接到主页链接到主页 远程登录远程登录n 书签链接书签链接（1）在同一页面中，要使用书签名：）在同一页面中，要使用书签名：超链接标题名称超链接标题名称（2）在不同页面之间，要使用链接的）在不同页面之间，要使用链接的URL地址：地址：超链接标题名称超链接标题名称v 无序列表使用的一对标签是，每一个列表项前使用。其结构如下：第一项 第二项 第三项 TodayTommorow l Today l Tommorow v 有序列表使用的一对标签是，每一个列表项前使用。其结构如下所示：v 第一项 第二项 第三项 有序列表的type属性取值 取值说 明type=
7、1列表项用数字编号（1,2,3.），默认值type=A列表项用大写字母编号（A,B,C.）type=a列表项用小写字母编号（a,b,c.）type=I列表项用大写罗马数字编号（,.）type=i列表项用小写罗马数字编号（i,ii,iii.）v 定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。v 列表项使用标明，说明性文字使用表示。第一项 叙述第一项的定义 第二项 叙述第二项的定义 第三项 叙述第三项的定义 例2-1 列表标记的使用示例 列表标记示例列表标记示例 无序列表无序列表 Photoshop Illustrator CorelDraw 有序列表有序列表
8、 Photoshop Illustrator CorelDraw 定义列表定义列表 Photoshop Adobe公司的图像处理软件公司的图像处理软件 Illustrator Adobe公司的矢量绘图软件公司的矢量绘图软件 CorelDraw Corel公司的图形图像软件公司的图形图像软件 q 表格的基本语法表格的基本语法 定义表格 .定义表格的标题 定义表格行 .定义表头 .定义表的单元格 .q 设定表格的属性设定表格的属性 【1】设定边框的宽度 table border=table border=#【2】设定边框的颜色 table table bordercolorbordercolor=
9、#=#rrggbbrrggbb 【3】调整表格宽度，高度 table width=#height=table width=#height=#【4】设定表格的背景色 table table bgcolorbgcolor=#=#rrggbbrrggbbq 一个最简单的带边框的表格一个最简单的带边框的表格 table border FoodFoodDrinkDrinkSweetSweet A B CA B C X Y ZX Y Z FoodDrinkSweetABCXYZq表格表格-跨多行、多列的表元跨多行、多列的表元(Table Span)（1）跨多列的表元）跨多列的表元 Morning Menu
10、 Food Drink Sweet ABC （2）跨多行的表元）跨多行的表元 Morning Menu Food A Drink B Sweet C 表单是用户和Web应用程序、Web数据库进行交互的界面。#=text,password,checkbox,radio,submit,reset v action属性属性 指明处理数据的程序的指明处理数据的程序的URL地址地址v method属性属性 指明数据提交的方法指明数据提交的方法表单信息传递给服务器的两种方式：GET/POSTGET方法方法:将信息封装在一个URL中提交给Server(数据长度受限)。http:/ POST方法方法:将信息封
11、装在一个Message Body中提交给服务器(表单大小不受限)。v 复选框复选框 v 单选框单选框 文本域文本域v 单行文字输入单行文字输入 v 密码输入密码输入 v 多行文本域多行文本域 选择域选择域 显示内容显示内容1 显示内容显示内容2 显示内容显示内容n 按钮域按钮域（1）提交按钮：单击提交按钮，可以实现表单内容的提交。（2）重置按钮：单击重置按钮，可以清除表单中已经输入的内容。（3）普通按钮：使用普通按钮可以通过调用函数完成其他操作。菜单和列表域菜单和列表域例：表单的综合应用 表单的综合应用 您的姓名：您的个人主页地址：您的建议 您的密码：确认密码：所在城市：北京上海个人爱好：看书
12、 打球 音乐性别：男 女2.1.3 XML基本基本概念概念 v XML（eXtensible Markup Language，扩展性标识语言）是由万维网联盟W3C定义的，它提供了一种描述结构数据的格式。v XML可以定义语义标记，是元标记语言。XML不像HTML那样只能使用规定的标记，用户可以自己定义需要的标记。v XML文档是纯文本，可用文本编辑器创建。一个典型的一个典型的XML文档文档 Everyday Italian Giada De Laurentiis 2005 30.00 Harry Potter J K.Rowling 2005 29.99 Learning XML Erik T
13、.Ray 2003 39.95 XML文档树 例：一个XML文档bookstore.xmlv XML实现内容与形式的分离。v XML扩展性比HTML强。v XML的语法比HTML严格。v XML具有良好的自描述性。XML与HTML的不同 2.1.4 XML文档的语法规则文档的语法规则v结构良好的（结构良好的（Well-formed）XML文档文档 如果某个文档符合如果某个文档符合XML语法规范，那么我们就说这个文档是语法规范，那么我们就说这个文档是“结构良好结构良好”的文档的文档。v有效的（有效的（Validate）XML文档文档 指通过了指通过了DTD验证的，具有良好结构的验证的，具有良好结
14、构的XML文档。文档。XML语法语法v元素元素：文本内容 v声明声明：XML声明是告诉浏览器将要处理的文档是XML文件。version属性指明文档遵循哪个版本的XML规范。encoding属性指示文档中字符使用的编码标准。v注释注释：v属性属性：25000 32下面是一个合理的下面是一个合理的HTML文档，但却完全不符合文档，但却完全不符合XML格式要求：格式要求：西安欢迎你 西安欢迎你西安欢迎你 u 有且仅有一个根元素；u 所有的XML标记必须成对出现，将数据包围在中间；u 所有的XML标记必须正确嵌套；u XML标记对大小写敏感；u 所有元素的属性值必须加引号。2.1.5 验证验证XML的
15、有效性的有效性l DTD（Document Type Definition，文档类型定义）是对XML文档所做的规范和约定，它指定了一系列XML文档必须遵守的规则。l DTD由许多约定和声明语句构成，这些语句可以包含在XML文档内部，称为内部DTD，也可以独立保存为一个文件，称为外部DTD。1）内部DTD v 下面就是一个带有 DTD 的 XML 文档：!DOCTYPE person George Man 28当DTD 被包含在 一个XML 文档中，那么它包装在一个 DOCTYPE 声明里：2）外部DTD v 假设有一个XML文档，它引用了一个外部DTD文档person.dtdGeorgeMan
16、28假如 DTD 位于 XML 文档的外部，那么它应被封装在一个 DOCTYPE 定义中：XML Schema v XML Schema是W3C开发的一种新的约束XML文档的模式，是一种特殊的XML文件，遵循XML的语法规则。v 与DTD相比，XML Schema具有如下优点：（1）可以更容易地描述文档结构；（2）可以方便地定义数据类型；（3）可重用性。v W3C规定，一个XML Schema文档的根标记必须是“schema”，名称空间必须是“http:/www.w3.org/2001/XMLSchema”，下面是它的基本形式：XML Schema 2.1.6 XML文档的显示文档的显示 v
17、单独用XML不能显示页面，须使用格式化技术。v 显示XML文件常见的有：CSS（Cascading Style Sheets）样式表样式表 XSL（eXtensible Stylesheet Language）样式语言样式语言CSS 样式表样式表 案例名称：案例名称：CSS样式表样式表程序名称：程序名称：greeting.css GREETING font-size:48pt;font-weight:bold;案例名称：调用案例名称：调用CSS的的XML文件文件程序名称：程序名称：greeting.xml Hello！XSL样式语言样式语言 XSL 是一种可以将XML文档转化成浏览器能够识别的
18、HTML文档的语言。XSL由两部分组成：一是转化XML文档；二是格式化XML文档。通常，XSL是通过将每一个XML元素“翻译”为HTML元素，来实现这种转换的。XSL样式表自身也是一个XML文档。XSL样式表的例子样式表的例子程序名称：程序名称：persons.xml（调用调用XSL的的XML文件文件）小张 25 66666666 小王 26 66666667 程序名称：程序名称：persons.xsl（XSL文件文件）姓名 年龄 电话 v XSL文件以一个XML声明开始。v xsl:stylesheet元素声明这是一个样式表文件。v 语句表示XML的源文档在当前目录下。v XHTML(eXt
19、ensible HyperText Markup Language)是“遵循XML规范”的HTML，比HTML要严格。v 使用DOCTYPE元素指定所遵循的标准：44遵循遵循XHTML的基本规范的基本规范v 标签必须严格嵌套。v 标签名和属性名必须小写。v 标签必须严格配对，即使是空元素也要封闭。v 每个属性都必须赋值，属性值用双引号括起来。45vDHTML（Dynamic HTML）lHTML/XHTML用于定义文档结构lCSS确定信息的外在表现形式lJavaScript则用于编程以便动态操控CSS和HTML462.2 利用CSS布局网页v CSS的基本概念：的基本概念：CSS是一种标记性语
20、言，它用于控制网页样式，并允许将网页内容与显示样式分离，为网页里的元素创建在浏览器中的表现样式。CSS以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等。v 例例 一个简单的一个简单的HTML网页（网页（welcome.htm）欢迎你到西安来！欢迎你常到西安来！2.2 利用CSS布局网页在上例的HTML文件中加入CSS代码（welcome_css.htm）h1 font-style:italic;color:red;display:inline;欢迎你到西安来！欢迎你常到西安来！欢迎你常到西安来！说明：注释标签是避免不支持CSS的浏览器将CSS内容作为网页的正文显示出
21、来 CSS的主要特点的主要特点（1）体现了“内容结构和格式控制相分离”的原则。（2）更容易控制页面的布局。使用外部CSS文件可以方便地修改网页的显示效果而不必修改网页本身；可以同时定义多个网页的显示风格。（3）可以制作出更小、下载更快的网页。（4）可以更快更容易地维护及更新大量的网页。（5）良好的浏览器兼容性。在HTML中使用CSS样式表，主要分为三种方式：v 内嵌样式（Inline Style）v 内部样式表（Internal Style Sheet）v 外部样式表（External Style Sheet）2.2.1 在HTML中使用CSS在内部使用定义CSS 代码 例如：西安欢迎你 西安
22、欢迎你 521.内嵌样式内嵌样式2.内部样式表内部样式表 在中编写CSS代码 CSS规则规则 使用链接外部CSS文件（如mycss.css）3.外部样式表外部样式表 使用import指令引入外部CSS文件 import mycss.css;4.使用使用import指令引入外部指令引入外部CSS文件文件5.样式表的优先级顺序 v 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？v 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，它们的优先顺序如下：（1）浏览器缺省-优先级最低（2）外部样式表（3）内部样式表（位于标签内部）（4）内嵌样式（在HTML元素内部）-优先
23、级最高 2.2.2 CSS 基本语法 /*这里是注释这里是注释*/HTML标签标签 属性属性:属性值属性值;属性属性:属性值属性值 说明：说明：l CSS内部的注释以内部的注释以“/*”开始，以开始，以“*/”结束；结束；l 属性的定义用属性的定义用“”包含；包含；l 定义多个属性时，各个属性间用定义多个属性时，各个属性间用“；”分隔。分隔。例如：例如：h1 color:red;font-size:15pt;text-align:center p color:black;font-size:10pt;text-indent:1pxv CSS文档由一条或多条CSS规则组成v 通常CSS规则由三部
24、分组成，分别是：选择器、属性和属性值。562.2.2 CSS 样式规则的基本结构HTML页面中的标记都是通过不同的CSS选择器去控制的。常用的CSS选择器主要包括以下几种：lHTML标签选择器（HTML selector）l类选择器（Class selector）lid选择器（id selector）l伪类选择器（Pseudo-classes selector）l派生选择器（Contextual Selector）2.2.2 CSS 选择器v用于设定HTML文档中指定标签的显示样式58p color:Red;font-size:25px;1.HTML 标签选择器 定义类：定义类：指定标签指定标
25、签.类名类名 属性属性:属性值属性值;属性属性:属性值属性值;.;.或或 .类名类名 属性：属性值；属性：属性值；属性：属性值；属性：属性值；.引用类：引用类：.red_large_text color:Red;font-size:25px;this is a paragraph.北京大学定义一个类别选择器定义一个类别选择器在不同元素中应用类别选择器在不同元素中应用类别选择器在一个HTML文档中，为同一HTML标签指定不同的样式，或同一样式类被不同的HTML标签元素所应用，可以使用类选择器。2.2.类选择器（类选择器（Class selector）3.ID 选择器定义定义IDID#IDID名名
26、 属性：属性值；属性：属性值属性：属性值；属性：属性值 引用引用IDID style Type=text/#a a color:red color:red#b color:blue#b color:blue p id=段落段落1 1文字文字段落段落2 2文字文字v 有一些特殊的HTML元素可以拥有不同的状态。例如，用于定义超链接的标签就可以处于“未被访问”、“已被访问过”、“鼠标悬浮其上”等几种状态。对于这种元素，CSS使用伪类选择器来给其不同的状态定义样式。4.伪类选择器HTML元素元素:伪类名伪类名 属性属性:属性值属性值;属性属性:属性值属性值;例如，a:link color:#FF00
27、00 /*未被访问的链接 红色*/a:visited color:#00FF00 /*已被访问过的链接 绿色*/a:hover color:#FFCC00 /*鼠标悬浮在上的链接 橙色*/a:active color:#0000FF /*鼠标点中激活链接 蓝色*/5.派生选择器 v 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。父元素父元素 子元素子元素 属性属性:属性值属性值;属性属性:属性值属性值;例如，p em color:red 段落中用em强调的字是 红色红色 的标题中用em强调的字 不是红色不是红色 的2.2.3 样式规则的继承 v 样式规则的继承是指嵌套的HTML子元
28、素会继承外层的父元素所设置的样式规则。v 例如，有这样的CSS规则：body font-family:Verdana,sans-serif;p font-family:Times,Times New Roman,serif;l 字体属性字体属性l 文本属性文本属性l 背景属性背景属性l 边框属性边框属性l 边距属性边距属性l 列表样式属性列表样式属性l 定位属性定位属性(显示、隐藏和移动显示、隐藏和移动)1.1.字体属性字体属性2.2.文本属性文本属性3.3.背景属性背景属性4.4.边框属性边框属性 5.边距属性边距属性 例：设置元素的上下左右边距（宽度相同）CSS边距属性 margin.D1
29、border:1px solid#FF0000;.D2border:1px solid gray;.D3margin:1cm;border:1px solid gray;没有margin上面的div没有设置边距属性，仅设置了边框属性(border)下面的div设置了边距属性，边距1厘米，表示上下左右边距都为1厘米margin设为1cm6.列表样式属性列表样式属性 7.间隙属性间隙属性 8.定位属性定位属性 2.2.5 CSS盒子模式v 大部分网页都采用一种“块”状结构，块之间可以相互嵌套，通过“块”的排列与定位实现网页的总体布局。这种块状布局通常采用DIV来进行编排，即CSS盒子模式(Box
30、model)。v 假设我们在一个平面上，把不同大小和颜色的盒子，以一定的顺序和间隙摆放好，看到的就是如图3-4所示的一个盒子（Box）。盒子由里向外依次是：content、padding、border、margin。CSS盒子模型 CSS将所有的HTML块元素看成是一个盒子，每个盒子都由以下部分组成：l内容(content)：所有HTML元素的内容，如文本和图片。内容区域的宽和高用width 和 height属性来表示。l间隙(padding)：设置元素内容到元素边框的距离,即围绕content提供的空白。l边框(border)：设定一个元素的边线。l边距(margin)：设置一个元素所占空间
31、的边缘到相邻元素之间的距离。2.3 JavaScript2.3 JavaScript客户端编程客户端编程lJavaScriptJavaScript是一种基于对象的脚本语言，主要用于开是一种基于对象的脚本语言，主要用于开发发WebWeb应用程序的客户端部分。应用程序的客户端部分。lJavaScriptJavaScript代码由浏览器解释执行，实现一些数据验代码由浏览器解释执行，实现一些数据验证、页面动态显示等效果。证、页面动态显示等效果。lJavaScriptJavaScript由由NetscapeNetscape公司开发，在公司开发，在19951995年配合其浏年配合其浏览器推出，与览器推出，
32、与JavaJava并无本质联系，但其语法与并无本质联系，但其语法与JavaJava非非常相近。常相近。2.3.1 JavaScript概述概述应用应用服务器服务器IEIE解析解析HTML标签和标签和JavaScript脚本脚本从服务器端下载含从服务器端下载含JavaScript的页面的页面返回响应返回响应客户端请求含客户端请求含JS的页面的页面发送请求发送请求1用户输入用户输入23l 控制文档的外观和内容：控制文档的外观和内容：通过通过DocumentDocument对象的对象的writewrite方法可以在浏览器方法可以在浏览器解析文档时将解析文档时将HTMLHTML写入文档中。写入文档中。
33、l 验证表单输入内容：验证表单输入内容：在客户端验证表单中的输入，避免向服务器提交非在客户端验证表单中的输入，避免向服务器提交非法数据，节约服务器资源。法数据，节约服务器资源。l 客户端计算和处理：客户端计算和处理：从表单中读取输入数据并进行计算。从表单中读取输入数据并进行计算。l 设置和检索设置和检索cookie：将用户名、账号等信息持久地保存于将用户名、账号等信息持久地保存于CookieCookie中，在中，在用户下一次访问网站时自动地读取这些信息。用户下一次访问网站时自动地读取这些信息。l 捕捉用户事件并相应地调整页面：捕捉用户事件并相应地调整页面：根据键盘或鼠标的动作，使页面的某根据键
34、盘或鼠标的动作，使页面的某一部分变得可编辑。一部分变得可编辑。l 与服务器端应用程序进行交互：与服务器端应用程序进行交互：这是这是AJAXAJAX技术的基础，可在后台获取服技术的基础，可在后台获取服务器端数据，并更新局部页面。务器端数据，并更新局部页面。脚本的基本结构脚本的基本结构 var count=0;document.write(淘宝网欢迎您！淘宝网欢迎您！);for(i=0;i5;i+)document.write(淘宝网欢迎您！淘宝网欢迎您！);BODY部分的内容部分的内容如何使用如何使用JavaScript实现此部分内容？实现此部分内容？l 使用标记在HTML文档中直接嵌入脚本l
35、在HTML文档中链接JavaScript源文件l 在HTML标记内添加JavaScript代码 document.write(Hello,world!);alert(Hello,world!);示例：示例：test01.html示例：示例：test01.js 在标记内添加脚本测试 在标记内添加脚本测试示例：示例：test02.html在JavaScript中，常用的字符串输入输出方法有document对象的write()方法、window对象的alert()方法、文本框及消息输入框等。消息框包括确认框、提示框等。document.write(“待输出的字符串待输出的字符串”);/向页面输出文本
36、向页面输出文本 window.alert(“待输出的字符串待输出的字符串”);/弹出带弹出带“确定确定”按钮的对按钮的对话框话框 confirm(“待输出的字符串待输出的字符串”);/确认框确认框 prompt(提示文本提示文本,默认值默认值)/提示输入框提示输入框 确认框示例 function test()var value=confirm(确定要执行该操作吗？);alert(你的选择是：+value);确认框示例测试示例：示例：test04.html 提示输入框示例 function test()var value=prompt(请输入你的名字,佚名)alert(您的名字是：+value)
37、;提示输入框示例测试示例：示例：test05.html2.3.2 JavaScript2.3.2 JavaScript基本语法基本语法函数函数异常处理异常处理控制语句控制语句运算符运算符变量变量基本语法基本语法 var count;count=5;定义变量定义变量赋值赋值var x,y,z=10;var count=10;同时声明和赋值变量同时声明和赋值变量声明多个变量声明多个变量l 变量名通常以字母，也可以以下划线或者变量名通常以字母，也可以以下划线或者$符号开头符号开头l 变量名大小写敏感，即变量名大小写敏感，即x和和X为不同的变量为不同的变量数据类型 l string（字符串）类型：是用
38、单引号或双引号括起来的一个或几个字符。l number（数值）类型：可以是整数和浮点数。l boolean（布尔）类型：值为true或者false。l object（对象）类型：用于定义对象。l运算符对一个或多个变量或值（操作数）进行运算，并返回运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值一个新值l根据所执行的运算，运算符可分为以下类别根据所执行的运算，运算符可分为以下类别字符串运算符：字符串运算符：+算术运算符：算术运算符：+、-、*、/、%、+、-、-(-(求反求反)比较运算符：比较运算符：=、!=!=、=、=逻辑运算符：逻辑运算符：&、|、！、！位运算符：位运算符：&、|
39、、赋值运算符：赋值运算符：=、+=+=、-=-=、*=、/=/=、%=%=等等 ifif条件语句条件语句 switchswitch多分支语句多分支语句if(条件条件)/JavaScript代码代码;else /JavaScript代码代码;switch(表达式表达式)case 常量常量1:JavaScript语句语句1;break;case 常量常量2:JavaScript语句语句2;break;.default:JavaScript语句语句3;switch语句示例 var now =new Date();var date=now.getDay();switch(date)case 1:ale
40、rt(今天是星期一);break;case 2:alert(今天是星期二);break;case 3:alert(今天是星期三);break;case 4:alert(今天是星期四);break;case 5:alert(今天是星期五);break;case 6:alert(今天是星期六);break;default:alert(今天是星期日);示例：示例：test06.html forfor、whilewhile循环语句循环语句for(初始化初始化;条件条件;增量增量)语句集语句集;while(条件条件)语句集语句集;for循环语句打印乘法口诀 for(var i=1;i=9;i+)for(
41、var j=1;j=9;j+)if(j=i)/只打印下三角 document.write(t+j+*+I+=+(i*j);document.write();/换行 示例：示例：test07.html Break Break 语句语句 出现在循环语句或出现在循环语句或switchswitch语句内，用于强行跳出循环或语句内，用于强行跳出循环或switchswitch语语句。句。在嵌套循环中，在嵌套循环中，breakbreak语句只跳出当前循环体，并不跳出整个嵌语句只跳出当前循环体，并不跳出整个嵌套循环。套循环。ContinueContinue语句语句 用在循环结构中，作用是跳过循环体内剩余的语句
42、而提前进入下用在循环结构中，作用是跳过循环体内剩余的语句而提前进入下一次循环。一次循环。sum=0；i=0；while（true）i+；if（i100）break；if（i%2=0）continue；sum=sum+i；示例：示例：l 抛出异常：抛出异常：throwthrowl 捕获异常：捕获异常：trytryl 处理异常：处理异常：catchcatchl 清理现场：清理现场：finallyfinally!-var n1=7;var n2=0;try if(n2=0)throw new Error(“除除0”);document.write(n1/n2);catch(err)document.
43、write(“出错出错”+err.message);finally delete n1;delete n2;document.write(“操作完成操作完成”);-l 函数是已命名的代码块，其中的语句作为一个整体被调用执行，且函数是已命名的代码块，其中的语句作为一个整体被调用执行，且只有在调用时才会执行。只有在调用时才会执行。l 函数定义通常放在函数定义通常放在HTMLHTML文档的文档的块中，也可以放在其他位置，块中，也可以放在其他位置，但要确保先定义后使用。但要确保先定义后使用。l 函数可以由事件触发调用，也可以由脚本中的代码调用函数可以由事件触发调用，也可以由脚本中的代码调用 创建函数创
44、建函数function 函数名(参数1,参数2，)语句体;调用函数调用函数 函数调用一般和表单元素的事件一起使用，格式为：事件名“函数名”;function showHello()var count=document.myForm.txtCount.value;for(i=0;icount;i+)document.write(HelloWorld);表示单击此按钮时，调用函数表示单击此按钮时，调用函数showHello()执行执行示例：按用户输入的次数显示问候语示例：按用户输入的次数显示问候语l 函数名是调用函数时所引用的名称，在同一个脚本文件里函数名必函数名是调用函数时所引用的名称，在同一个
45、脚本文件里函数名必须唯一。须唯一。l 形式参数表用以接收传入数据，在调用函数时，其实参的个数和类形式参数表用以接收传入数据，在调用函数时，其实参的个数和类型必须与形参相一致。型必须与形参相一致。l 大括号中是函数的执行语句，如果要返回一个值，则应该在最后一大括号中是函数的执行语句，如果要返回一个值，则应该在最后一行使用行使用returnreturn语句。语句。l 语句调用语句调用l 事件调用事件调用 function add(a,b)return(a+b);var result=add(2,3);alert(a与与b两数之和为两数之和为+result);javascript函数的事件调用函数的
46、事件调用 function showmessage()alert(这是这是JavaScript事件调用函数事件调用函数);l 在函数之外定义的变量为全局变量，可在各个函数之间共享。在函数之外定义的变量为全局变量，可在各个函数之间共享。l 在函数内部使用在函数内部使用varvar声明的变量为局部变量，只在当前函数内部有效声明的变量为局部变量，只在当前函数内部有效l 但那些在函数内部没有用但那些在函数内部没有用varvar声明的变量，在赋值后也会被当做全局声明的变量，在赋值后也会被当做全局变量使用。变量使用。function inc(n)y=+n;return(y);var x=3;var sum
47、=inc(x)+y;alert(sum);/sum的值是的值是8l 函数函数incinc的内部没有用的内部没有用varvar声明变量声明变量y y，当，当incinc函数执行完后，局部变量函数执行完后，局部变量y y变成变成了一个全局变量，它的值仍然存在，所以了一个全局变量，它的值仍然存在，所以inc(x)+y inc(x)+y 的值是的值是8 8。l 但是，如果将但是，如果将inc(x)+y inc(x)+y 改成改成 y+inc(x)y+inc(x)，就会发生错误，因为，就会发生错误，因为y y会先被引用会先被引用到，此时到，此时y y还没有被声明，所以产生错误。还没有被声明，所以产生错误
48、。在客户端脚本中，在客户端脚本中，JavaScript通过事件响应来获得与用户的交通过事件响应来获得与用户的交互。互。Javascript标准事件：标准事件：（1）onload 和 onUnload事件（2）onClick事件（3）onFocus、onBlur和onChange事件（4）onMouseOver 和 onMouseOut事件（5）onSubmit事件 /页面代码页面代码 click me Click Me /表单内容表单内容lJavaScriptJavaScript是一种是一种基于对象基于对象的语言（的语言（Object-Based），而不），而不是是面向对象面向对象的语言（的语
49、言（object-oriented），因为它没有提供面向），因为它没有提供面向对象语言的核心特性：抽象、继承、重载。对象语言的核心特性：抽象、继承、重载。lJavaScriptJavaScript使用的对象可以分为三类：使用的对象可以分为三类：内置对象：由内置对象：由JavaScriptJavaScript语言本身提供语言本身提供 宿主对象：由宿主对象：由JavaScriptJavaScript的运行环境（浏览器）提供的运行环境（浏览器）提供 用户定义对象：用户可以创建自己的对象，或创建自用户定义对象：用户可以创建自己的对象，或创建自己的类并实例化对象。己的类并实例化对象。2.3.3 Java
50、Script2.3.3 JavaScript对象编程对象编程lNewNew关键词：创建新的对象关键词：创建新的对象格式：格式：var obj=new ObjectType(Parameters)var obj=new ObjectType(Parameters)例如：例如：var d=new Date(“2009-9-1”);var d=new Date(“2009-9-1”);var today=new Date();var today=new Date();l WithWith语句：设置代码运行的对象语句：设置代码运行的对象格式：格式：with object 说明说明：任何对变量的引用被认
