Web应用开发——网页设计基础

1、Web应用开发网页设计基础第2章 网页设计基础2.1 HTML与XML2.2 利用CSS布局网页2.3 JavaScript客户端编程 2.1 HTML与XML 超文本标记语言（Hyper Text Markup Language，简称HTML）是Web页面的标记性语言，通过一定的格式标记文本及图像等元素，使之在浏览器中显示出不同内容和风格的网页。2.1.1 HTML文档的基本结构HTML文档拥有一种“嵌套”结构4html标签定义一个网页head标签定义网页的头部body标签定义网页的主体p标签启动一个段落title标签定义网页的标题HTML 文档的基本结构5 页面标记 文字和段落标记 超链接

2、标记 列表标记 表格标记 表单标记2.1.2 HTML文档的主要标记 （1）页面标记 . . . . . . 背景色彩和文字色彩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. （2）文字和段落标记标题字体 h#./h# HTML headings are defin

3、ed with the to tags. #=16；h1为最大字，h6为最小字字体标记 font./font (1)字体大小 font size=#./font (2)文字颜色 font color=#rrggbb./font (3)粗体字 b./b (4)斜体字 i./i 颜色名称和对应的十六进制数码Black = #000000Green = #008000Silver = #C0C0C0Lime = #00FF00Gray = #808080Olive = #808000White = #FFFFFFYellow = #FFFF00Maroon = #800000Navy = #0000

4、80Red = #FF0000Blue = #0000FFPurple = #800080Teal = #008080Fuchsia = #FF00FFAqua = #00FFFF给文本设置一些特殊格式，如粗体、斜体、下划线、上下标等。 （3）字体样式标记物理样式标记 属 性说明属性说明黑体字上标斜体字下标加下划线小字体加删除线大字体出逻辑样式标记 属 性说 明输出需要强调的文本（通常是斜体加黑体）输出加重文本（通常也是斜体加黑体）输出引用方式的字体，通常是斜体为文本加上删除线（4）文字布局分段和换行标记 段落 (可以看作是空行) 换行 例如：你好吗？很好。 你好吗？很好。文字的对齐(Alig

5、nment) . . #=left, center, right DIV标记 DIV标记用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为和。 单独的DIV标记不能完成任何工作，必须与align属性联合使用。位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。 文本或图像 水平线标记 水平线标记在网页中添加一条水平线，将不同的信息分开。 内部链接 请单击查看1.htm中的内容 外部链接 链接到主页 远程登录 书签链接 （1）在同一页面中，要使用书签名： 超链接标题名称 （2）在不同页面之间，要使用链接的URL地址： 超链接标题名称(5) 超链接标记 (Lin

6、k)（6）列表标记（List Tags）无序列表无序列表使用的一对标签是，每一个列表项前使用。其结构如下： 第一项 第二项 第三项 TodayTommorow Today Tommorow 有序列表有序列表使用的一对标签是，每一个列表项前使用。其结构如下所示： 第一项 第二项 第三项 有序列表的type属性取值 取值说 明type=1列表项用数字编号（1,2,3.），默认值type=A列表项用大写字母编号（A,B,C.）type=a列表项用小写字母编号（a,b,c.）type=I列表项用大写罗马数字编号（,.）type=i列表项用小写罗马数字编号（i,ii,iii.）定义列表 (Definit

7、ion lists)定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。列表项使用标明，说明性文字使用表示。 第一项 叙述第一项的定义 第二项 叙述第二项的定义 第三项 叙述第三项的定义 例2-1 列表标记的使用示例 列表标记示例 无序列表 Photoshop Illustrator CorelDraw 有序列表 Photoshop Illustrator CorelDraw 定义列表 Photoshop Adobe公司的图像处理软件 Illustrator Adobe公司的矢量绘图软件 CorelDraw Corel公司的图形图像软件 （7）表格标记（Tabl

8、e Tags） 表格的基本语法 定义表格 . 定义表格的标题 定义表格行 . 定义表头 . 定义表的单元格 . 设定表格的属性 【1】设定边框的宽度 table border=# 【2】设定边框的颜色 table bordercolor=#rrggbb 【3】调整表格宽度，高度 table width=# height=# 【4】设定表格的背景色 table bgcolor=#rrggbb 一个最简单的带边框的表格 FoodDrinkSweetA B CX Y Z FoodDrinkSweetABCXYZ表格 - 跨多行、多列的表元 (Table Span)（1）跨多列的表元 Morning

9、Menu Food Drink Sweet ABC （2）跨多行的表元 Morning Menu Food A Drink B Sweet C （9）表单标记（Form Tags）表单是用户和Web应用程序、Web数据库进行交互的界面。# = text,password,checkbox,radio, submit,reset action属性 指明处理数据的程序的URL地址method属性 指明数据提交的方法表单信息传递给服务器的两种方式： GET/ POSTGET方法: 将信息封装在一个URL中提交给Server(数据长度受限)。 http:/mypath/myscript.pl?user

10、name=v1&password=v2 POST方法: 将信息封装在一个Message Body中提交给服务器(表单大小不受限)。 复选框 单选框 文本域 单行文字输入 密码输入 多行文本域 选择域 显示内容1 显示内容2 显示内容n 按钮域（1）提交按钮：单击提交按钮，可以实现表单内容的提交。 （2）重置按钮：单击重置按钮，可以清除表单中已经输入的内容。 （3）普通按钮：使用普通按钮可以通过调用函数完成其他操作。 菜单和列表域例：表单的综合应用 表单的综合应用 您的姓名：您的个人主页地址： 您的建议 您的密码：确认密码：所在城市：北京上海个人爱好：看书 打球 音乐性别：男 女2.1.3 XM

11、L基本概念 XML（eXtensible Markup Language，扩展性标识语言）是由万维网联盟W3C定义的，它提供了一种描述结构数据的格式。XML可以定义语义标记，是元标记语言。XML不像HTML那样只能使用规定的标记，用户可以自己定义需要的标记。XML文档是纯文本，可用文本编辑器创建。一个典型的XML文档 Everyday Italian Giada De Laurentiis 2005 30.00 Harry Potter J K. Rowling 2005 29.99 Learning XML Erik T. Ray 2003 39.95 XML文档树 例：一个XML文档boo

12、kstore.xml XML实现内容与形式的分离。 XML扩展性比HTML强。 XML的语法比HTML严格。 XML具有良好的自描述性。 XML与HTML的不同 2.1.4 XML文档的语法规则结构良好的（Well-formed）XML文档 如果某个文档符合XML语法规范，那么我们就说这个文档是“结构良好”的文档。有效的（Validate）XML文档 指通过了DTD验证的，具有良好结构的XML文档。XML语法元素： 文本内容 声明： XML声明是告诉浏览器将要处理的文档是XML文件。 version属性指明文档遵循哪个版本的XML规范。 encoding属性指示文档中字符使用的编码标准。注释：

13、 属性： 25000 32结构良好的XML文档需满足：下面是一个合理的HTML文档，但却完全不符合XML格式要求： 西安欢迎你 西安欢迎你西安欢迎你 有且仅有一个根元素； 所有的XML标记必须成对出现，将数据包围在中间； 所有的XML标记必须正确嵌套； XML标记对大小写敏感； 所有元素的属性值必须加引号。2.1.5 验证XML的有效性DTD（Document Type Definition，文档类型定义）是对XML文档所做的规范和约定，它指定了一系列XML文档必须遵守的规则。DTD由许多约定和声明语句构成，这些语句可以包含在XML文档内部，称为内部DTD，也可以独立保存为一个文件，称为外部D

14、TD。 1）内部DTD 下面就是一个带有 DTD 的 XML 文档：!DOCTYPE person George Man 28当DTD 被包含在 一个XML 文档中，那么它包装在一个 DOCTYPE 声明里： 2）外部DTD 假设有一个XML文档，它引用了一个外部DTD文档person.dtdGeorgeMan28假如 DTD 位于 XML 文档的外部，那么它应被封装在一个 DOCTYPE 定义中：XML Schema XML Schema是W3C开发的一种新的约束XML文档的模式，是一种特殊的XML文件，遵循XML的语法规则。与DTD相比，XML Schema具有如下优点：（1）可以更容易地

15、描述文档结构；（2）可以方便地定义数据类型；（3）可重用性。W3C规定，一个XML Schema文档的根标记必须是“schema”，名称空间必须是“/2001/XMLSchema”，下面是它的基本形式： XML Schema 2.1.6 XML文档的显示 单独用XML不能显示页面，须使用格式化技术。显示XML文件常见的有：CSS（Cascading Style Sheets）样式表XSL（eXtensible Stylesheet Language）样式语言CSS 样式表 案例名称：CSS样式表程序名称：greeting.cssGREETING font-size: 48pt; font-we

16、ight: bold;案例名称：调用CSS的XML文件程序名称：greeting.xmlHello！XSL样式语言 XSL 是一种可以将XML文档转化成浏览器能够识别的HTML文档的语言。 XSL由两部分组成：一是转化XML文档；二是格式化XML文档。 通常，XSL是通过将每一个XML元素“翻译”为HTML元素，来实现这种转换的。 XSL样式表自身也是一个XML文档。XSL样式表的例子程序名称： persons.xml （调用XSL的XML文件） 小张 25 66666666 小王 26 66666667 程序名称：persons.xsl（XSL文件） 姓名 年龄 电话 XSL文件以一个XML

17、声明开始。 xsl:stylesheet元素声明这是一个样式表文件。 语句表示XML的源文档在当前目录下。XHTMLXML+HTMLXHTML(eXtensible HyperText Markup Language)是“遵循XML规范”的HTML，比HTML要严格。使用DOCTYPE元素指定所遵循的标准：44遵循XHTML的基本规范标签必须严格嵌套 。标签名和属性名必须小写 。标签必须严格配对，即使是空元素也要封闭。每个属性都必须赋值，属性值用双引号括起来 。45DHTML = HTML/XHTML + CSS + JavaScriptDHTML（Dynamic HTML）HTML/XHTM

18、L用于定义文档结构CSS确定信息的外在表现形式JavaScript则用于编程以便动态操控CSS和HTML462.2 利用CSS布局网页CSS的基本概念： CSS是一种标记性语言，它用于控制网页样式，并允许将网页内容与显示样式分离，为网页里的元素创建在浏览器中的表现样式。CSS以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等。 例 一个简单的HTML网页（welcome.htm） 欢迎你到西安来！ 欢迎你常到西安来！ 2.2 利用CSS布局网页在上例的HTML文件中加入CSS代码（welcome_css.htm） 欢迎你到西安来！ 欢迎你常到西安来！ 说明：注释标签是

19、避免不支持CSS的浏览器将CSS内容作为网页的正文显示出来 CSS的主要特点（1）体现了“内容结构和格式控制相分离”的原则。（2）更容易控制页面的布局。使用外部CSS文件可以方便地修改网页的显示效果而不必修改网页本身；可以同时定义多个网页的显示风格。（3）可以制作出更小、下载更快的网页。（4）可以更快更容易地维护及更新大量的网页。（5）良好的浏览器兼容性。在HTML中使用CSS样式表，主要分为三种方式： 内嵌样式（Inline Style） 内部样式表（Internal Style Sheet） 外部样式表（External Style Sheet） 2.2.1 在HTML中使用CSS 在内部

20、使用定义CSS 代码 例如：西安欢迎你 西安欢迎你 521. 内嵌样式2. 内部样式表 在中编写CSS代码 CSS规则 使用链接外部CSS文件（如mycss.css ） 3. 外部样式表 使用import指令引入外部CSS文件 import mycss.css;4. 使用import指令引入外部CSS文件5. 样式表的优先级顺序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，它们的优先顺序如下： （1）浏览器缺省- 优先级最低 （2）外部样式表 （3）内部样式表（位于标签内部）（4）内嵌样式（在HTML元素内部

21、） - 优先级最高 2.2.2 CSS 基本语法 /*这里是注释 */ HTML标签 属性:属性值;属性:属性值 说明： CSS内部的注释以“/*”开始，以“*/”结束； 属性的定义用“ ”包含； 定义多个属性时，各个属性间用“；”分隔。例如： h1 color:red; font-size:15pt; text-align:center p color:black; font-size:10pt; text-indent:1pxCSS文档由一条或多条CSS规则组成通常CSS规则由三部分组成，分别是： 选择器、属性和属性值。562.2.2 CSS 样式规则的基本结构HTML页面中的标记都是通过

22、不同的CSS选择器去控制的。常用的CSS选择器主要包括以下几种：HTML标签选择器（HTML selector）类选择器（Class selector）id选择器（id selector）伪类选择器（Pseudo-classes selector）派生选择器（Contextual Selector）2.2.2 CSS 选择器用于设定HTML文档中指定标签的显示样式58p color:Red; font-size:25px; 1. HTML 标签选择器 定义类：指定标签.类名属性:属性值;属性:属性值;. 或 .类名属性：属性值；属性：属性值；.引用类： 59 .red_large_text c

23、olor:Red; font-size:25px; this is a paragraph.北京大学定义一个类别选择器在不同元素中应用类别选择器在一个HTML文档中，为同一HTML标签指定不同的样式，或同一样式类被不同的HTML标签元素所应用，可以使用类选择器。2. 类选择器（Class selector） 3.ID 选择器定义ID #ID名 属性：属性值；属性：属性值 引用ID #a color: red #b color: blue 段落1文字段落2文字有一些特殊的HTML元素可以拥有不同的状态。例如，用于定义超链接的标签就可以处于“未被访问”、“已被访问过”、“鼠标悬浮其上”等几种状态。

24、对于这种元素，CSS使用伪类选择器来给其不同的状态定义样式。 4. 伪类选择器HTML元素:伪类名 属性:属性值; 属性:属性值; 例如， a:link color: #FF0000 /* 未被访问的链接 红色 */ a:visited color: #00FF00 /* 已被访问过的链接 绿色 */ a:hover color: #FFCC00 /* 鼠标悬浮在上的链接 橙色 */ a:active color: #0000FF /* 鼠标点中激活链接 蓝色 */ 5. 派生选择器 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。 父元素 子元素 属性:属性值; 属性:属性值; 例

25、如， p em color:red 段落中用em强调的字是 红色 的标题中用em强调的字 不是红色 的2.2.3 样式规则的继承 样式规则的继承是指嵌套的HTML子元素会继承外层的父元素所设置的样式规则。例如，有这样的CSS规则： body font-family: Verdana, sans-serif; p font-family: Times, Times New Roman, serif; 2.2.4 常见的样式属性 字体属性 文本属性 背景属性 边框属性 边距属性 列表样式属性 定位属性(显示、隐藏和移动)1. 字体属性2. 文本属性3.背景属性4.边框属性 5. 边距属性 例： 设

26、置元素的上下左右边距（宽度相同）CSS边距属性 margin.D1border: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盒子模式大部分网页都采用一种“块”状结构，块之间可以相互嵌套，通过“块”的排列与定位实现网页的总体布局。这种块状布局通常采用D

27、IV来进行编排，即CSS盒子模式(Box model)。 假设我们在一个平面上，把不同大小和颜色的盒子，以一定的顺序和间隙摆放好，看到的就是如图3-4所示的一个盒子（Box）。盒子由里向外依次是：content、padding、border、margin。 CSS盒子模型 CSS将所有的HTML块元素看成是一个盒子，每个盒子都由以下部分组成： 内容(content)：所有HTML元素的内容，如文本和图片。内容区域的宽和高用width 和 height属性来表示。间隙(padding)：设置元素内容到元素边框的距离,即围绕content提供的空白。边框(border)：设定一个元素的边线。边距(

28、margin)：设置一个元素所占空间的边缘到相邻元素之间的距离。 2.3 JavaScript客户端编程JavaScript是一种基于对象的脚本语言，主要用于开发Web应用程序的客户端部分。JavaScript代码由浏览器解释执行，实现一些数据验证、页面动态显示等效果。JavaScript由Netscape公司开发，在1995年配合其浏览器推出，与Java并无本质联系，但其语法与Java非常相近。2.3.1 JavaScript概述脚本的执行原理应用服务器IEIE解析HTML标签和JavaScript脚本从服务器端下载含JavaScript的页面返回响应客户端请求含JS的页面发送请求1用户输入

29、23JavaScript可以做什么控制文档的外观和内容：通过Document对象的write方法可以在浏览器解析文档时将HTML写入文档中。验证表单输入内容：在客户端验证表单中的输入，避免向服务器提交非法数据，节约服务器资源。客户端计算和处理：从表单中读取输入数据并进行计算。设置和检索cookie：将用户名、账号等信息持久地保存于Cookie中，在用户下一次访问网站时自动地读取这些信息。捕捉用户事件并相应地调整页面：根据键盘或鼠标的动作，使页面的某一部分变得可编辑。与服务器端应用程序进行交互：这是AJAX技术的基础，可在后台获取服务器端数据，并更新局部页面。在网页中嵌入JavaScript脚本

30、 脚本的基本结构 var count=0; document.write(淘宝网欢迎您！); for ( i=0; i5; i+ ) document.write(淘宝网欢迎您！); BODY部分的内容如何使用JavaScript实现此部分内容？示例：引入JavaScript脚本的方式有3种：使用标记在HTML文档中直接嵌入脚本在HTML文档中链接JavaScript源文件在HTML标记内添加JavaScript代码 方式1：在HTML文档中直接嵌入脚本 方式2：在HTML文档中链接JavaScript源文件document.write (Hello, world!) ; alert (Hel

31、lo, world!); 示例：test01.html示例：test01.js 在标记内添加脚本测试 在标记内添加脚本测试方式3：在HTML标记中嵌入JavaScript脚本示例：test02.html在JavaScript中，常用的字符串输入输出方法有document对象的write()方法、window对象的alert()方法、文本框及消息输入框等。消息框包括确认框、提示框等。 使用JavaScript输入与输出信息document. write(“待输出的字符串”); /向页面输出文本 window.alert (“待输出的字符串”); /弹出带“确定”按钮的对话框 confirm (“

32、待输出的字符串”); /确认框 prompt(提示文本,默认值) /提示输入框 确认框示例 function test() var value = confirm(确定要执行该操作吗？); alert(你的选择是：+value); 确认框示例测试示例：test04.html 提示输入框示例 function test() var value = prompt(请输入你的名字,佚名) alert(您的名字是： + value); 提示输入框示例测试示例：test05.html2.3.2 JavaScript基本语法1.基本语法示意2. 变量 var count; count = 5;定义变量赋值

33、var x, y, z = 10;var count = 10;同时声明和赋值变量声明多个变量 变量名通常以字母，也可以以下划线或者$符号开头 变量名大小写敏感，即x和X为不同的变量数据类型 string（字符串）类型：是用单引号或双引号括起来的一个或几个字符。number（数值）类型：可以是整数和浮点数。boolean（布尔）类型：值为true或者false。object（对象）类型：用于定义对象。运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别字符串运算符：+算术运算符：+、-、 * 、 / 、%、+、-、-(求反)比较运算符：=、!=、=

34、、=逻辑运算符：&、|、！位运算符：&、|、赋值运算符：=、+=、-=、*=、/=、%= 等3. 运算符4.流程控制if条件语句switch多分支语句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:

35、 alert(今天是星期一); break; case 2: alert(今天是星期二); break; case 3: alert(今天是星期三); break; case 4: alert(今天是星期四); break; case 5: alert(今天是星期五); break; case 6: alert(今天是星期六); break; default: alert(今天是星期日); 示例：test06.htmlfor、while循环语句for(初始化; 条件; 增量) 语句集; while(条件) 语句集;for循环语句打印乘法口诀 for (var i = 1 ; i = 9 ; i

36、+) for (var j = 1 ; j = 9 ; j+) if (j=i) /只打印下三角 document.write (t + j + * + I + = + (i*j) ); document.write (); /换行 示例：test07.htmlBreak 语句出现在循环语句或switch语句内，用于强行跳出循环或switch语句。在嵌套循环中，break语句只跳出当前循环体，并不跳出整个嵌套循环。Continue语句用在循环结构中，作用是跳过循环体内剩余的语句而提前进入下一次循环。sum =0；i=0；while（true） i+； if（i100）break； if（i%2

37、 = =0）continue； sum = sum +i；示例：5.异常处理语句抛出异常：throw捕获异常：try处理异常：catch清理现场：finally!- var n1 = 7 ; var n2 = 0; try if ( n2=0 ) throw new Error(“除0”); document. write( n1/n2 ); catch ( err ) document. write( “出错” + err. message); finally delete n1; delete n2; document. write (“操作完成”); - 6.函数函数是已命名的代码块，其

38、中的语句作为一个整体被调用执行，且只有在调用时才会执行。函数定义通常放在HTML文档的块中，也可以放在其他位置，但要确保先定义后使用。函数可以由事件触发调用，也可以由脚本中的代码调用创建函数function 函数名( 参数1,参数2， ) 语句体; 调用函数 函数调用一般和表单元素的事件一起使用，格式为： 事件名“函数名” ;function showHello( ) var count=document.myForm.txtCount.value ; for(i=0; icount; i+) document.write(HelloWorld);表示单击此按钮时，调用函数showHello(

39、 )执行示例：按用户输入的次数显示问候语说明：函数名是调用函数时所引用的名称，在同一个脚本文件里函数名必须唯一。形式参数表用以接收传入数据，在调用函数时，其实参的个数和类型必须与形参相一致。大括号中是函数的执行语句，如果要返回一个值，则应该在最后一行使用return语句。函数调用方式语句调用事件调用 function add(a,b) return (a+b); var result = add(2,3); alert( a与b两数之和为 + result); javascript函数的事件调用 function showmessage( ) alert(这是JavaScript事件调用函数)

40、; 变量的作用域在函数之外定义的变量为全局变量，可在各个函数之间共享。在函数内部使用var声明的变量为局部变量，只在当前函数内部有效但那些在函数内部没有用var声明的变量，在赋值后也会被当做全局变量使用。function inc (n) y = + n;return (y);var x=3;var sum = inc(x) + y;alert (sum); /sum的值是8示例：说明：函数inc的内部没有用var声明变量y，当inc函数执行完后，局部变量y变成了一个全局变量，它的值仍然存在，所以inc(x)+y 的值是8。但是，如果将inc(x)+y 改成 y+inc(x)，就会发生错误，因为

41、y会先被引用到，此时y还没有被声明，所以产生错误。在客户端脚本中，JavaScript通过事件响应来获得与用户的交互。 Javascript标准事件：（1）onload 和 onUnload事件 （2）onClick事件 （3）onFocus、onBlur和onChange事件 （4）onMouseOver 和 onMouseOut事件 （5）onSubmit事件 9.事件处理（Event Driven） / 页面代码示例： click me Click Me / 表单内容1、什么是对象JavaScript是一种基于对象的语言（Object-Based ），而不是面向对象的语言（object-

42、oriented ），因为它没有提供面向对象语言的核心特性：抽象、继承、重载。JavaScript使用的对象可以分为三类：内置对象：由JavaScript语言本身提供宿主对象：由JavaScript的运行环境（浏览器）提供用户定义对象：用户可以创建自己的对象，或创建自己的类并实例化对象。2.3.3 JavaScript对象编程2、有关对象操作的语句New关键词：创建新的对象格式：var obj = new ObjectType( Parameters )例如：var d = new Date(“2009-9-1”); var today = new Date(); With语句：设置代码运行的

43、对象格式： with object 说明：任何对变量的引用被认为是这个对象的属性。2.3.3 JavaScript对象编程有关对象操作的语句for in 语句：格式：For（属性名 in 对象名） 含义：用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。该语句的优点是无需知道数组的元素个数或对象的属性个数，就可以安全的遍历。例如：for(var prop in object) document.write(objectprop)；2.3.3 JavaScript对象编程1、String对象：用于操纵和处理文本字符串声明一个String对象：var str = “Hello”; 或

44、：var str = new String( “Hello” ) ;只有一个属性：Length：返回字符串的长度方法：toLowerCase() ：转换成小写toUpperCase() ：转换成大写indexOf( charactor, fromIndex )：字符串查找lastIndexOf(charactor)：查找最后一次出现的子串 substring( start, end )：字符串截取charAt(pos)：返回串中指定位置的一个字符oncat(str1, str2)：字符串拼接replace()、split（）等常用JavaScript对象 var msg = Hello + W

45、orld ; / +用于字符串，可以实现字符串拼接var msg = concat (“Hello”, “World”); / 和上句等效document.writeln ( msg.length ); / 输出字符串的长度10var idx = msg.indexOf (World); / 检索子串出现的位置，这里为5/ 截取从第5个字符往后到第10个字符之间的所有字符（“World”）document.writeln( msg.substring(idx,10) ); document.writeln (msg.toUpperCase(); / 输出为HELLOWORLD示例：2、Arra

46、y对象可以在单个变量中存储多个值 格式：var myArr = new Array(); var myArr = new Array(3); var myArr = new Array( “January”, “February” ); var myArr = “January”, “February” ;访问数组元素元素赋值：myArr0 = “January”;引用元素：document.write( myArr ) ; document.write( myArr0, myArr1 ) ;length属性：用于设置或返回数组中的元素个数 方法：concat() 、sort()等常用Java

47、Script对象 var mycars = new Array(); / 创建数组对象，可以不指定元素个数mycars0 = BMW; mycars1 = AUDI; / 为数组元素赋值var yourcars = new Array(3); / 创建数组对象并指定元素个数var hiscars = new Array (Buick, Benz); / 创建数组对象并同时赋值for (x in mycars) / 遍历数组元素，x能得到元素下标 document.write(mycarsx + ) / 输出数组元素示例：var arr1 = new Array (Tom, Jerry)var

48、arr2 = new Array (Bingo)var arr = arr1.concat(arr2); / 连接两个数组，生成新的数组document.write (arr.join( | ); / 将arr中的元素拼接成字符串，使用“|”分隔arr = new Array(7, 5, 3, 8, 6);document.write (arr.sort(); / 对数组元素进行排序3、Date对象：提供有关日期、时间的操作创建：Var MyDate = New Date()；Var MyDate = New Date(2009，9，1)；方法：获取日期和时间：getYear( )、getMo

49、nth( )、getDate( )、getDay( )、getHours( )设置日期和时间：setYear( )、setMonth( )、setDate( )、setDay( )、setHours( ) 注意: Date对象的月份可接收的数值为0-11，代表1-12月。 常用JavaScript对象 function startTime() var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds();m = checkTime(m); s = checkTime(s); do

50、cument.getElementById (clock). innerHTML = 本地时间： + h + : + m + : + s;setTimeout( startTime() , 500); function checkTime(i) if (i10) i = 0 + i; return i 示例：页面时钟4、Math对象：提供一些数学常数以及运算函数创建：直接使用，不需创建属性：PI、E、LN10、LN2、SQRT1-2 、SQRT2 方法绝对值函数：abs()正弦余弦函数：sin(),cos()反正弦反余弦函数：asin(), acos() 正切反正切函数：tan(),atan(

51、)四舍五入函数：round()求平方根函数：sqrt()基于几方次的值：Pow(base, exponent)常用JavaScript对象 var pi_val = Math.PI; / 获得PI值var sin_val = Math.sin(pi_val); / 计算sin(PI)var sqrt_val = Math.sqrt(5); / 求5的平方根var rnd_val = Math.round(sqrt_val); / 对5的平方根取整document.write (PI= + pi_val + );document.write (sin(PI)= + sin_val + );doc

52、ument.write (sqrt(5)= + sqrt_val + );document.write (round(sqrt(5)= + rnd_val + );示例：使用Math对象http:/window 窗口对象location地址对象FORM表单对象浏览器对象的分层结构window.document.myform.text1 document文档对象status 状态栏对象浏览器宿主对象 浏览器宿主对象模型 浏览器作为JavaScript的运行环境，提供了一系列的宿主对象；通过这些对象，JavaScript可以获取浏览器的信息，并控制浏览器执行指定的操作。. 1、Window对象：

53、Window 对象表示浏览器中打开的窗口。 Window作为顶层对象，在访问它的属性和方法时，无需指定对象名。Window对象的常用属性status：指定浏览器状态栏中显示的临时消息 screen： 有关客户端的屏幕和显示性能的信息history：有关客户访问过的URL的信息location：有关当前 URL 的信息document：表示浏览器窗口中的HTML文档Opener：代表使用open方法打开当前窗口的窗口Self：代表当前窗口Top：代表所有框架中的顶层窗口Frames：集合对象，代表当前窗口中的框架集，从而可以获取并操纵所有的子窗口Window对象的常用方法alert (“提示信息

54、”)：显示一个带有提示信息和确定按钮的对话框 confirm (“提示信息”)：显示一个带提示信息、确定和取消按钮的对话框 open (“url”, “name”)：打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档close( )：关闭当前窗口moveTo ( ix，iy )：移动到指定位置resizeTo ( iwidth, iheight )：调整到指定大小setTimeout (“函数名”, 毫秒数 ) ：经过指定毫秒后执行某函数setInterval (“函数名”, 毫秒数 ) ：以指定的时间间隔反复执行某函数clearInterva

55、l ( intervalID ) ：清除定时设置navigate (URL)：导航到新页面1、Window对象：function openwindow( ) window.status=系统当前状态：您正在注册用户.; if (window.screen.width = 1024 & window.screen.height = 768) window.open(register.html); else window.alert(请设置分辨率为1024x768，然后再打开); function closewindow( ) if(window.confirm(您确认要退出系统吗？) windo

56、w.close( ); 在窗口状态栏中设置文本设置窗口的高度使用open方法打开新窗口弹出警告对话框弹出确认对话框关闭当前窗口添加单击事件open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或1为允许 location： 是否显示地址栏，yes或1为允许 status：是否

57、显示状态栏内的信息，yes或1为允许；Open方法的一般用法：function openwindow( ) window.status=系统当前状态：您正在注册用户.; if (window.screen.width = 1024 & window.screen.height = 768) open(register.html, 注册窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(请设置分辨率为1024x768，然后再打开); f

58、unction closewindow( ) if(window.confirm(您确认要退出系统吗？) window.close( ); 使用 Open 方法打开注册新窗口添加单击事件2、location对象：代表浏览器所打开的网页地址常用属性href：返回或设置页面的URL，可导航到新页面protocol：返回或设置网址中的协议部分host：返回或设置网址中的主机号port：返回或设置网址中的端口号pathname：返回或设置网址中的路径名search：返回或设置网址中的请求字符串方法reload( )：重新加载页面，等同于工具栏上的刷新按钮assign()：加载一个新的页面replace

59、()：打开另一个URL，替代当前网址document.write (当前位置： + location.href + );document.write (主机名称： + location.host + ); document.write (请求路径： + location.pathname + );document.write (主机端口： + location.port + );document.write (请求字符串： + location.search + );示例：使用location对象获取详细地址信息location.assign (“http:/localhost/login.a

60、spx”);location.replace (“http:/localhost/index.html”);location.reload ();示例：调用location对象的方法说明：由于这里操作的都是当前窗口的location对象，所以省略了窗口名； 若要访问其它窗口的位置，则应使用“窗口名.location”的格式var newwin = window.open (“http:/localhost/login.htm”, “_blank”) ;document.write( newwin.location ) ;3、history对象：浏览器的浏览历史常用属性Length：返回浏览历史