HTML与Javascript简单基础.ppt

第10章 HTML与Javascript,HTML语言 HTML与XML、XHTML的关系 Javascript 语言概述 Javascript的变量、常量、数据类型、表达式 Javascript程序语句 Javascript函数与事件处理 Javascript对象 浏览器对象,一、 HTML语言,HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档。 通过HTML，将所需要表达的信息按某种规则写成HTML文档，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，就是所见到的网页。,HTML文档的编写方法,手工直接编写 记事本等，保存为 .htm 或 .html格式 使用可视化HTML编 辑 器（方便、快捷） Dreamweaver、 Frontpage等 为何要学习HTML呢？ 因为HTML语言是所有网页的基础，用HTML语言制作的网页可以更精确的控制页面的排版，代码更优化，实现更多的功能。 使用可视化工具生成的网页都含有大量的冗余代码（10%）。从而使网页的访问速度降低，浪费存储空间。,一个典型的HTML文本的基本结构形式如下： 文本标题 网页主体内容 上述文档用到四种标记符，其意义如下：,首部,主体,HTML 文档的基本结构,（1）html标记符- 这两个标记符是HTML文档的标记符。处于文档的最前端，表示文档的开始，即浏览器从开始解释。 而则标记位于文档的最后，表示HTML文档的结束。和之间是 html文档的内容。 （2）head标记符 - 是HTML文档头标记符，用来描述HTML首部的内容，说明文档的整体信息。所有首部信息并不会出现在利用WWW浏览器所看到的窗体中。 通常与某些标记符一起使用，如标记符。 用于说明HTML文档首部的有关信息，如文档的标题、向搜索引擎说明的网页的关键词、网页作者、网页使用的字符集等。 该标记是可选的，如果没有，浏览器仍会解读文档。,（3）tilte标记符 - 指定网页文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于WWW浏览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最上方。 （4）body标记符 - 用于定义HTML文档的主体部分，位于首部下面。在 和 标记符之间的文字，都可以显示在浏览器窗口中。,HTML文档中的注释,HTML文档中的注释，采用“！”标记。 “”表示注释结束。 HTML文档中的注释可以出现在文档的任何部分。 例如： ,HTML语言的语法规则,HTML标记不区分大小写； 需要说明的是，虽然HTML 标记对大小写是不敏感的，如 和 的作用的相同的，但建议在HTML4 中使用小写标记，因为万维网联盟 (W3C) 已经规定：在 XHTML（下一代 HTML）中，必须使用小写标记。 关于XHTML语言，在本章第二节中介绍。,HTML语言的语法规则,HTML标记的一般格式 受影响的文本或图像等内容 例如： 简单网页实例 为开始标记，其中，href为a标记元素的属性，“sample.html”为属性值。 为结束标记。文字信息 “简单网页实例” 是位于两个标记之间的、被修饰的文本对象。,常用的HTML标记,本节简要介绍几种常用的HTML标记。根据其作用，我们将要介绍的HTML标记划分为如下几类： 1、页面(page)标记 2、文字格式(text style )标记 3、图像(image)标记 4、表格(table)标记 5、表单(form)标记 6、其它标记,1、页面标记,主要介绍6 个标记： html, head, body, title, meta, a html, head, body, title已经介绍过了。 下面讲解meta, a标记,meta标记,meta用于对文件特征的描述。meta 标签用于网页的与中，meta 标签的用处很多。 meta 的属性有两种：name 和 http-equiv。 name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。 name的值可为： generator,keywords,description，auther等. name=“generator” ， 用以说明生成工具（如Microsoft FrontPage 4.0 ）等 ； name = “keywords” ， 向搜索引擎说明你的网页的关键词； name=“description” ，告诉搜索引擎你的站点的主要内容； name=“author” ，告诉搜索引擎你的站点的制作者。,meta 标记举例,meta 标记举例,meta标记- http-equiv属性,http-equiv可取值：Content-Type，Content-Language，Refresh，windows-Target等。 说明网页使用的字符集。如中文为gb2312-80，英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集。 用以说明网页制作所使用的文字以及语言； 定时让网页在指定的时间n内，跳转到页面http:/yourlink。 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用。,body 标记,格式： . . 功能说明：该标记定义了HTML文件的主要内容与显示格式，是整个网页文件的核心。,body标记的属性说明,bgcolor：设置页面的背景颜色值。默认为白色。 background：设置页面的背景图像文件名。 text：设置网页的文本颜色值，默认为黑色。 link ： 设置尚未被访问的超链接文本的颜色，默认为蓝色。 vlink ：设置已被访问的超链接文本的颜色，默认为紫色。 alink ：设置正被访问的超链接文本的颜色，默认为红色。 leftmargin：设置页面左边的空白量。空白量可以是数值，或是相对于页面宽度的百分比。 topmargin：设置页面顶端的空白量。空白量可以是数值，或是相对于页面高度的百分比。,HTML中颜色的表示,颜色值可以是颜色的英文单词，如red (红)、green (绿)、blue (蓝)、yellow (黄)、black (黑)、white (白)等， 也可以是#号加16进制的红绿蓝(red-green-blue, RGB) 值来表示，格式为#rrggbb。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f。如#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色，#000000表示黑色。,格式： . 功能说明：href属性设置要链接到的URL地址值。上述语法格式中的URL代表要链接到的网页、网站或电子邮件地址，可以是绝对地址，也可以是相对地址。如：，sample.htm ，mailto:等。 target属性 设置显示超链接内容的窗口名，在“Window_Name“处写上该窗口名。如果没有指定此属性，则默认为当前窗口。如果target属性设置窗口名不存在，则打开一个新的(浏览器)窗口显示超链接的内容。,a 标记-超链接标记, 第一种情况：跳转到另一个网页 访问263网站 第二种情况：跳转到本页面的另外一个地方 这种情况要求先在本网页中要跳转到的地方定义一个“锚点”，锚点标记的格式为 . ，在“name“处输入命名的锚点符号。锚点符号由字母开头，后跟字母数字组成的符号串。在需要跳转的地方插入如下格式的超链接标记： . 其中，在“#name“处输入已经定义的锚点符号。例如： 跳转到“下一个链接点“ 下一个链接点 第三种情况：跳转到另一个页面的某个地方 首先要在被链接的网页中定义锚点，这样在当前网页中可以指定超链接到这个锚点。跳转到另一个页面的某个地方的超链接标记的格式为： . ,a 标记-三种超链接情况,锚标签和 name 属性,name 属性用于创建被命名的锚点（named anchors）。当使用命名锚点（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。 以下是命名锚点的语法： Text to be displayed name 属性用于命名锚点。锚点的名称由字母开头，后跟字母数字组成的符号串。,2、文字格式(text style )标记,（1） 标题设置标记 （2）段落标记 （3）换行标记 （4）分区显示标记 （5） 无序列表标记 （6）有序列表标记,2、文字格式(text style )标记,（1） 标题设置标记 - 标记可定义标题。 定义最大的标题。 定义最小的标题。 元素用来描述网页中最上层的标题。 一般把 用于最顶层的标题， 和 用于较低的层级。 格式： 功能说明：HTML规定了6种标题类型，它们是h1、h2、h3、h4、h5、h6。格式说明中的#表示1、2、3、4、5、6中的数字。 属性align用于设置被修饰文字的对齐方式，对齐方式可以是left（居左）,right（居右）,center（居中），默认为left。,标题标记举例： 这是标题 1 这是标题 2 这是标题 3 这是标题 4 这是标题 5 这是标题 6,2、文字格式(text style )标记,（2） 段落标记 格式: 。 功能说明：设置当前段的结束和下一段的开始。若未设置align属性，则相当于两个标记。 属性: align: 段落对齐方式，可以为left，right， center，默认为left。 例如： 节日快乐 ,2、文字格式(text style )标记,（3）换行标记 格式: 功能说明: 换行标记是一个单标记。使下面的文字另起一行显示。,2、文字格式(text style )标记,（4）分区显示标记 格式： 文本或图像 功能说明：用于文字块或图像的分区块显示。三种对齐方式：left，center，right。,分区标记实例, 分区标记的应用实例 分区标记的应用实例 居左显示居左 显示 居右显示居右 显示 居中显示居中 显示 ,2、文字格式(text style )标记,（5） 无序列表标记 格式： 列表项目1 列表项目2 列表项目3 . 功能说明：无序列表的每个项目前有一个项目符号。和标记必须成组使用。无序列表的每个项目前的项目符号可以相同，也可以不同。项目符号类型未指定时，默认为实心圆。 属性 type： 表示项目符号类型，其值为disc(实心圆)、circle（空心圆）、square（实心方块），默认时为disc。,无序列表标记实例, 一个无序列表： 春天 夏天 秋天 ,2、文字格式(text style )标记,（6）有序列表标记 格式： 列表项目1 列表项目2 列表项目3 说明：列表的序号可以为数字和字母。 属性： type： 有五种序号类型，分别为：1（阿拉伯数字）、A（大写英文字母）、 a（小写英文字母）、 （大写罗马字母）、 （小写罗马字母）。 start：开始序号。 列表可以嵌套，从而把网页分为多个层次。有序列表和无序列表不仅自身可以嵌套，而且彼此可以互相嵌套。,有序列表标记实例, 一个有序列表： 春天 夏天 秋天 ,3、图像标记,格式： 属性： src： 其值为要加入到网页中的图像文件及其存放路径的说明。 width：图像的宽度。其值可以为数值（像素点数），也可以为相对窗口的百分比。 height：图像的高度。其值可以为数值（像素点数），也可以为相对窗口的百分比。 alt ： 在浏览器尚未完全载入图像时，在图像位置显示的文字。,4、表格标记,格式： 标题文字 表头1 表头2 表头n 表项1 表项2 表项n 表项1 表项2 表项n ,表格标记实例, 水果 重量 苹果 10公斤 ,5、表单标记,格式： ,（1） 标记,标记用于为用户输入创建 HTML 表单。 表单包含 input，select, textarea等 元素。 属性： action：表单的处理方式，通常是e-mail地址或网址。 method ：表单数据传送到服务器的方式。共有两种方法：POST 方法和 GET 方法。 采用 POST 方式时，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。 采用 GET 方式时，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action属性的 URL 之后。这两者之间用问号进行分隔。,（2）标记,主要用来设计表单中提供给用户的输入形式。 属性： type：设置要加入表单项目的类型。有如下7种类型： text：设置普通文本输入框，输入的文本以标准字符显示。同时使用size和maxlength属性可以设置文本输入框的大小以及文本最大长度。 password： 设置密码文本输入框，输入的文本以“*”显示。同时使用size和maxlength属性可以设置文本输入框的大小以及文本最大长度。 checkbox： 设置复选框。在name属性设置复选框的名称，该名称用于脚本语言编程中对该表项的控制。设置复选框的例子:,radio： 设置单选框。在name属性设置单选框的名称。一般单选框会有一组待选项，需要为该单选框的每个选项值，分别使用标记进行设置，而且，他们的name属性都相同。checked属性用于设置初始选定的项。如: Banana Apple Orange,hidden：设置表单的隐藏元素。 submit：设置提交按钮。提交按钮的功能是将表单的内容送给action中的网址或邮箱。 reset：设置重置按钮。重置按钮的功能是清除输入到表单中的全部内容。按钮名使用value属性设置，若未指定按钮名，则默认为“reset”。,(3 ) 和标记,用于设置弹出式选择栏。其格式参见下面例子： Banana Apple Orange ,(4) 标记,用于设置多行文本的输入区。格式为： 例如： 用户姓名：李维 个人身份：学生 单位名称：北京信息科技大学 ,6. 框架标记,格式： . ,框架集实例,（1） 标记的属性, rows： 设置横向分割的框架数目，例如rows=“30%,20%,50%“,横向分割了三个框架，每个框架的大小按相对于窗口的百分比指定，当然，也可以给出每个窗口的绝对像素数。若框架大小指定为“*”，则表示自动分配框架大小。 cols： 设置纵向分割的框架数目，例如cols=“40%,30%,30%“,纵向分割了三个框架，每个框架的大小按相对于窗口的百分比指定，当然，也可以给出每个窗口的绝对像素数。若框架大小指定为“*”，则表示自动分配框架大小。 border： 设置框架的边框的宽度。单位为像素点。 bordercolor： 设置边框的颜色。 framespacing： 设置各框架间的空白，单位为像素点。 frameborder： 设置有无边框，值为yes表示有边框，为no表示无边框。,（2）标记的属性, src： 表示该框架对应的源文件。 name：指定框架名。框架名必须以字母开头。 marginwidth： 设置框架内容与左右边框的空白。 marginheight：设置框架内容与上下边框的空白。 scrolling：设置框架的卷滚条，其值为yes或 no或 auto。缺省值是 auto。 noresize：表示不允许改变窗口的大小。缺省设置允许各窗口改变大小。,二、 HTML与XML、XHTML的关系,XML 简介 什么是XML XML 与 HTML的差异 XML的用途 XHTML 简介 什么是XHTML XHTML 与 HTML 之间的差异 XHTML 语法 XHTML 定义的三种文件类型声明,XML 简介,什么是XML ? XML 是EXtensible Markup Language的简称，即可扩展标记语言。XML是Web表示结构化信息的一种标准文本格式。 XML 与 HTML的差异 HTML的各个标记都是固定不变的;而XML的标记由网页设计者自己来定义。 XML 和 HTML 是为不同的目的而设计的。 XML 能比HTML提供更大的灵活性，但不能取代HTML语言。 XML的用途 XML 不是对 HTML 的替代，而是对HTML的补充。在大多数Web 应用程序中，XML 用于传输数据，而 HTML 用于格式化并显示数据。,XHTML 简介,什么是XHTML XHTML是EXtensible HyperText Markup Language的简称，即可扩展超文本标记语言。XHTML 与 HTML 4.01 兼容。XHTML 是以 XML 重构的 HTML 4.01。 XHTML语法 与 HTML 之间的差异 （1）XHTML 元素必须被关闭，而HTML的有些元素不用关闭。 （2） XHTML 标记名和属性名必须用小写字母。 （3）属性不能简写，属性值必须加引号。 （4）用 id 属性代替 name 属性。 XHTML 定义的三种文件类型声明 XHTML 定义了包括XHTML Transitional（过渡类型）、Strict（严格类型）、Frameset（框架类型）三种文件类型声明。使用最普遍的是 XHTML Transitional。,三、 Javascript 语言概述,Javascript是一种可以嵌入在HTML文件中的客户端脚本语言，浏览器在载入HTML文件时，对嵌入在HTML文件中的Javascript代码，逐行解释、执行。 Javascript语言不依赖于特定的机器和操作系统，所以说它是独立于平台的。 Javascript语句为什么能在浏览器中执行呢？这是由于在浏览器程序中包含了一个Javascript解释器，专门处理嵌入在HTML文件中的Javascript语句所描述的动作。,Javascript语言的前身叫作LiveScript。自从SUN公司推出著名的Java语言之后，Netscape公司引进了SUN公司有关Java的程序设计概念，将自己原有的LiveScript重新进行了设计，并更名为Javascript。 JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用 。 JavaScript 的正式名称是 “ECMAScript“。这个标准由 ECMA 组织发展和维护。,Javascript脚本在网页中的位置与执行,1在网页中如何放置Javascript脚本 使用HTML 的 标记，把 Javascript脚本代码插入 HTML 页面当中。如： 。 Javascript脚本可以放在网页的head 部分和body 部分。,2Javascript脚本何时被执行 位于 head 部分的脚本和位于 body 部分的 Javascript脚本执行时机不同。 当页面载入到浏览器时，位于 body 部分的 Javascript脚本会立即执行；而位于head 部分的脚本，只有当被调用或事件被触发时才会执行（此时由于脚本放置在head 部分，可以确保在需要脚本被使用之前，它已经被载入了）。 3外部脚本文件的创建与链接 将 Javascript脚本写入一个外部文件之中，并以“.js”为后缀保存这个文件。 使用标记的src属性，可以将该外部脚本文件包含到HTML文档中。 例如： ,简单实例,【例10-4】使用Javascript在浏览器中显示一串文字，并弹出一个信息提示框。 今后我们将共同学习Javascript知识！ ,浏览效果如图10-4和图10-5所示。图10-5为点击信息提示框的“确定”按钮后的运行结果。 图10-4 图10-5,四、 Javascript的变量、 常量、数据类型、表达式,（一） Javascript的变量 可以在程序中用一个变量来存放一个值，这样在需要这个值的地方就可以用这个变量来代表。一个变量存放的值可以是数字、文字或对象。 一个好的变量名有助于增加程序的可读性，使程序易于理解。 对于变量,必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。,1. 变量的命名,Javascript中的变量命名同其计算机语言非常相似。规则如下： Javascript变量以字母或下划线（“_”）开头，后面可跟字母数字符号。 不能使用Javascript中的关键字作为变量名。,2. 变量的类型和变量的声明,在Javascript中变量的类型可以是： number(数值)类型； boolean（布尔）类型 string（字符串）类型 function（函数）类型 object（对象）类型 但变量的类型并不是象其它语言（如c语言）一样用类型标识符显式说明，而是根据变量被赋给的值来隐式确定的。 在Javascript中，变量通常用关键字var来声明。 例如: var mytest , x , y; 该例子定义了名字分别为mytest ，x , y的三个变量，但没有赋予它们值。这三个变量的类型目前还不能确定，只有给它们赋值后才能知道。 又例：var mytest = “This is a book“； 该例子定义了一个名为mytest变量, 同时赋予了它的值。根据赋予它的值，变量mytest是string 类型的。,3、变量的作用域,根据定义的位置不同，变量可以分为局部变量、全局变量。 全局变量是指在函数外部定义的变量。 局部变量是指在一个函数内部定义的变量。只有该函数能访问这个变量。每当函数被调用时，此变量被创建。当函数调用结束时，此变量被撤销。 变量的作用范围称为变量的作用域。 全局变量定义在所有函数体之外，其作用范围是所有函数； 局部变量定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,（二） Javascript的五种数据类型,在Javascript中包括5种数据类型： number(数值)、boolean（逻辑型或布尔型）、string（字符串）、function（函数）、object（对象）类型。 number类型的变量可以容纳一个整数或者一个实数值，如-19，2.6777等。 boolean类型的变量可以容纳一个true或false。 string 类型的变量容纳任何被赋给它的字符串，包括空字符串。如“abcdefg“ 字符串是用双引号（“）或单引号（）括起来的符号串。 object类型的变量能够存储其他对象。一个被赋null值的变量被认为是object类型的。,（三） Javascript的常量,Javascript的常量通常又称字面常量，它们是在脚本的执行过程中不能改变的数据。 (1) 整型常量：可以使用十进制、八进制和十六进制的格式来表示。 十进制整数：不以0开头的数字序列。如：123，2000，329。 八进制整数：以0作为引导数字，后面的数字可以是0到7的任何排列。如：012，04650，0771。 十六进制整数：以0x作为引导，后面的数字可以包括数字0到9以及字母a到f或A到F的任何排列。如：0x10，0x46ab，0xa7b1。,(2) 实型常量 实型常量是由整数部分加小数部分表示，如12.32、-190.9 。 标准或科学计数法表示。科学计数法中的指数部分是一个e或E加上一个整数（正数或负数）组成。科学计数法表示的数如5.3E7、4e-5等。 (3) 布尔型值 布尔常量只有两种状态：true(逻辑真)或false（逻辑假）。 它主要用来说明或代表一种状态或标志。 (4) 字符串常量 使用单引号（）或双引号（“）括起来的零个或多个字符。如 “This is a book of Javascript “、“3245“、“ewrt234234“ 、“（空串）等。,(5) 特殊字符 在Javascript中有些以反斜杠（“”）开头的不可显示的特殊字符： b 表示退格 f 表示换页 n 表示换行 r 表示回车 t 表示制表符(Tab符) 表示单引号 “ 表示双引号 （6） 空值null Javascript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个null值。,（四）、运算符和表达式,按优先级从高到低顺序排列运算符： 求反运算符：！ 算术运算符:+,- ；*,/,% ；+，- 字符串连接符：+ （串连接） 比较运算符：,=,= ；=，!= 逻辑运算符：&，| 条件运算符：？： 赋值运算符：=,说明：在算术运算符一组和比较运算符一组中，按优先顺序由高到低排列，不同级用“；”号隔开，同级用“，”间隔。,一个表达式就是由任何合适的常量、变量和运算符相连接而组成的式子，这个式子有一个唯一的值。这个值的类型可以是前面讲过的Javascript的5种数据类型中的任何一种，包括数值、逻辑值、字符串等，还可以是一个对象。,五、 Javascript程序语句,JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。 Javascript程序代码是由一系列Javascript语句组成的。这些语句包括： 变量声明及赋值语句； 流程控制语句； 函数定义语句； 对象操作语句。 本节讨论流程控制语句： 条件和分支语句 （if语句，switch语句） 循环语句（for,while,do while,break,continue）,1. if语句,基本格式： if（表达式） 语句; else 语句; 功能：若表达式的值为true，则执行语句；否则执行语句。 说明： if -else 语句是Javascript中最基本的控制语句，通过它可以改变语句的执行顺序。 若if后的语句有多行，则必须使用花括号将其括起来。 当语句1或语句2又是一个if语句时，就构成了if语句的嵌套形式。 else部分可以没有，此时称为单分支的if语句。,If语句举例, /如果 time,2、 switch语句,switch语句可以根据一个变量或表达式的不同取值而采取不同的处理方法，所以又称为分支语句。 其语法格式为： switch (expression) case label1： 语句段1;break; case label2： 语句段2;break; default: 语句段n; ,说明： switch语句在执行时，先计算表达式expression的值。然后比较expression的值与哪个label相等，找到一个label后，就自动转向对应的语句执行。 如果expression的值与任何label都不匹配，switch 中的default部分的语句将被自动执行。执行完相应的语句后，跳出switch语句。如果switch分支中的break语句不写，则执行完本分支的语句后，自动执行下一条case语句。,switch语句举例, /根据今天是星期几，将在网页上显示相应的问候语 var d=new Date() theDay=d.getDay() switch (theDay) case 5: document.write(“Finally Friday”) ;break; case 6: document.write(“Super Saturday“); break; case 0: document.write(“Sleepy Sunday“); break; default: document.write(“Im looking forward to this weekend!“) ,3、循环语句 for,格式: for（初始表达式；条件表达式；增量表达式） 语句集； 功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体. 说明： 一般用一个初始化表达式来初始化一个用做循环计数器的变量，即循环控制变量； 条件表达式用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出循环。 增量表达式：主要定义循环控制变量在每次循环时按什么方式变化. 这三个表达式不是必须的，它们是可省缺的。如果条件表达式省缺，则认为条件是真。,for循环的实例, var i=0; for (i=0;i“) ,4、while循环,格式： while（条件） 语句集； 说明： while语句不断的测试一个条件，如果条件始终成立，则这个循环会一致持续下去，直到条件不再成立为止。,While循环实例, var i=0 while (i“) i=i+1 ,5、do while 循环语句,格式： do 语句集； while（条件）； 说明： dowhile语句首先不管while中的条件是否成立，总是先执行一次循环。完成第一次循环后，dowhile语句才试图判定while中的条件，如果成立，就继续循环；如果条件不成立，就跳到循环后的第一条语句去执行。,do while 循环语句举例, var i=0 do document.write(“The number is “ + i) document.write(“) i=i+1 while (i,输出结果： The number is 0,6、break 和 continue,break语句结束其所在的for、while以及dowhile整个循环，并把程序的控制权交给循环后的第一条语句。 continue语句结束其所在的for、while以及dowhile循环的本次循环，并立即开始下一个循环。即使得程序流程跳过本次循环内剩余的语句而进入下一次循环。,break举例, var i=0 for (i=0;i“) ,The number is 0 The number is 1 The number is 2,continue 举例, var i=0 for (i=0;i“) ,The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10,六、Javascript函数与事件处理,1、 Javascript函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 函数定义： function 函数名(参数1，参数2，) 函数执行部分; ,页面载入时，函数中的脚本不会被执行，只有函数被调用时，函数中的脚本才被执行。因此，通常将处理事件的脚本写入一个函数，并在页面中事件触发对象的标记中调用该函数，如例10-7中的 onclick=“displaymessage()”，从而响应触发的事件。 包含函数的块通常放在页面的部分。因为每当页面被加载时，区域中的内容比区域的内容先被加载。这样可以保证在另一个脚本需要立即调用它们时，函数是可用的。,函数举例1, function displaymessage( ) alert(“Hello World!“) ,说明：如果将本例中的块中内容改为只有“alert(“Hello world!“);”，即不将“alert(“Hello world!“);”写入一个函数，那么当页面被载入时就会执行。而本例中，当用户点击按钮时，脚本才会执行。在网页中给按钮添加了 onClick 事件，这样按钮被点击时函数才会执行。,2、return 语句 return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。 return语句的语法为： return 表达式； 如果省去了return后面的表达式，或函数定义中没有使用return语句，函数的返回值将不确定。,3、函数的调用 函数调用的格式为： 函数名(实际参数1，实际参数2，); 这里的实际参数是传递给函数的形式参数的的值，其值可以是常量、变量或其它表达式,函数举例2,函数的定义： function prod(a,b) x=a*b; return x; 函数调用： product=prod(2,3);,说明： 1、调用上面这个函数时，必须传入两个参数： 2、从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中,4Javascript内置函数 内置函数不属于任何对象，在Javascript语句的任何地方都可以使用这些函数。 内置函数也称系统函数。这里介绍函数eval() 和parseInt() （1）函数eval(str)：返回字串表达式str的值。 例如，test=eval(“8+9+5/2“); 则test的值为19.5 （2）函数parseInt(str,radix): 试图从一个字符串str中提取一个整数，其中radix是数的进制。如果字符串str中存在除了数字、符号、小数点和指数符号以外的字符，parseInt函数就停止转换，返回已有的结果。如果第一个字符就不能转换，则返回“NaN”值,表明字符串中不存在数字符号。 例如， parseInt(“123“,8),该函数的返回值为八进制数173。,事件和事件处理,1. 事件的概念 通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。 事件定义了用户与Web页面交互时产生的各种操作。例如，用鼠标单击一个超链接或按钮时，就会产生一个onClick（单击）事件，浏览器会自动调用事件处理函数处理这个事件。浏览器在大部分时间里都在等待事件的发生，并在事件发生时，自动调用事件处理函数，完成事件的处理。,2. 事件处理 浏览器为了响应某个事件而进行的处理过程称为事件处理。为了实现事件的处理，需要完成如下工作（以处理onClick事件为例）。 每当一个事件发生时，Javascript解释器就会自动查找界面对象中事件属性，调用注册在上面的事件处理函数。 例如，在HTML文件中可以使用如下的语句： 上述语句表明,要单击的Web页面对象是名为calc的按钮，处理的事件为onclick，事件处理函数为clickButton()。,3. 常用事件及其处理 下面讨论Javascript的常用事件：浏览器事件；鼠标事件；其它事件。 (1) 浏览器事件 onLoad事件：装入一个文档 当浏览器完成装入一个窗口或一个帧集合中所有的帧时， 产生该事件。 onUnLoad事件：退出一个文档 当Web页面退出时引发onUnLoad事件。 onSubmit事件：提交一个表单对象 onSubmit事件在完成信息输入，准备将信息提交给服务器处理时发生。 onReset事件：重置一个表单对象。 当一个表单对象被提交以及被重置时，触发onReset事件。,(2) 鼠标事件, onMouseDown事件：按下鼠标 当按下鼠标上一个键时，发生onMouseDown事件。 onMouseMove事件：鼠标移动 在浏览器界面移动鼠标则发生onmouseMove事件。 onMouseOver事件：鼠标悬停 鼠标悬停在一个界面对象时发生onMouseOver事件。 onMouseOut事件：鼠标滑出界面对象 当鼠标滑出一个界面对象时，发生onMouseOut事件。, onMouseUp事件：释放鼠标上一个键 释放鼠标上一个键时发生onMouseUp事件。 onClick事件：单击一个对象 当用户单击鼠标按钮时，产生onClick事件。 onFocus事件：获得焦点 当表单（form）对象中的文本输入框（text）对象、文本输入区（textarea）对象或者选择框（select）对象获得焦点时，引发onFocus事件。 onBlur事件：失去焦点 当表单（form）对象中的文本输入框（text）对象、文本输入区（textarea）对象或者选择框（select）对象不再拥有焦点时，引发onBlur事件。,(3) 其它事件, onChange事件：改变事件 当利用text或textarea元素输入字符值改变时发生onChange事件，同时当在select表格项中一个选项状态改变后也会引发该事件。 例： onSelect事件：选中事件 当text或textarea对象中的文字被加亮后，引发该事件。,【例10-9】 一个自动装载和自动卸载的例子,即当装入HTML文档时调用loadform()函数,而关闭该文档时则首先调用unloadform()函数。, 事件演示 ,该网页的浏览效果见下页。,网页文件在浏览器中刚载入时的显示效果,在浏览器中执行“文件”|“关闭窗口”命令后的显示效果,七、Javascript对象,JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object - oriented）。 例如，它不支持分类、继承和封装等面向对象的基本特征。但这并不意味着不能用JavaScript语言开发面向对象的程序。 JavaScript脚本语言的主要目的是提供对浏览器和服务器对象的灵活控制，快速方便地产生web页面中的各种对象以及控制这些对象的行为。,1. 对象的属性和方法,JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。 属性可以说是变量的集合体,在对象实施其所需要行为的过程中，属性实现信息的装载； 方法是指对属性所进行的操作,其实就是对象所拥有的函数。 对象的属性还可以是一个对象，这样就构成了一个层次化的结构。 通过专门的运算符 new 实现对象的实例化，并且需要为这个对象实例命名。,对象实例属性的引用 共有三种形式来访问对象实例的属性： 点标志法； 用属性名作下标的数组法； 用属性序号作下标的数组法.,(1) 点标志法： 格式： 对象实例名.属性名 这种方式称为使用点（.）运算符方式。 例如：有一个对象实例 myCar，它有三个属性color，brand，owner，则可以写如下语句为对象实例的属性赋值： myCar.color = “white“; myCar.brand = “Benz“; myCar.owner = “liu“;,(2) 用属性名作下标的数组法 JavaScript的一个特点是对象的属性和一个数组关联，这个数组称为对象的关联数组。 数组名用对象实例的名，数组的下标用属性名表示。 这样可以采用对象数组的下标实现属性的引用。 例如： myCar“color“ = “white“; myCar“brand“ = “; myCar“owner“ = “liu“;,(3) 用属性序号作下标的数组法 这种方法与第2种方法基本相同，区别之处在于数组的下标是属性的序号，序号从0开始。 例如： myCar0 = “white“; myCar1 = “; myCar2 = “liu“;,对象方法的引用 在JavaScript中对象方法的引用形式为： 对象实例名.对象方法名（参数表）。 例如，使用JavaScript的内部对象document的write ()方法，可写为： document.write(“my document“);,2. 对象的操作,在JavaScript中提供了几个用于操作对象的语句、关键字和运算符。 (1) for.in语句 格式： for（对象属性名 in 已知对象名） 该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。 该语句的优点就是无需知道对象中属性的个数即可进行操作。,例如：下列函数是显示对象的属性内容： function showData(object) for (var i=0; i30;i+) document.write(objecti)； 而使用for.in语句，则根本不需要知道对象属性的个数，例如： function showData(object) for(var prop in object) document.write( objectprop )； ,(2) with语句,在该语句体内，任何对变量的引用被认为是这个对象的属性，从而节省一些代码。格式为： with 对象实例名 . 所有在with语句后的花括号中的语句，都是在with 关键字后的对象实例的作用域中的。,(3) this关键字,this是对当前对象的引用. 在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象. 为此JavaScript提供了一个用于将对象指定当前对象的关键字this。 例如：,参看第111张幻灯片中定义的构造函数,(4) new运算符,虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象实例，以满足某一特定的要求。 使用new运算符可以创建一个新的对象实例。其创建对象实例使用如下格式： 对象实例名= new 对象名(parameters table); 例如：创建日期对象实例： newDate = new Date() birthday = new Date (December 12.1998) 则创建对象实例newDate、birthday。,3、 创建用户自己的对象,创建对象需要完成以下任务： 定义一个构造函数用来说明对象的属性，同时也对属性值进行初始化。构造函数名必须与对象名相同； 创建对象的方法，并把这些方法注册到对象上（在构造函数中进行注册）； 使用new运算符创建对象的实例。 因此，创建一个对象需要定义若干个函数，除了一个构造函数外，其余为对象的每个方法所对应的函数。,构造函数的一般形式为：,function 构造函数名(参数1，参数2，参数n) this.属性1=参数1； this.属性2=参数2； this.属性n=参数n； this.方法1=函数名； this.方法2=函数名； ,返回,4、 JavaScript的内置对象和函数,为了减轻用户的工作量，JavaScript特地把一些程序设计的常用模块设计成内置的对象和函数。 这些内置对象和函数的功能已经由Ja