html与javascript简单基础（）

,单击此处编辑母版标题样式,131,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,第,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 和 -equiv。,name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。,name的值可为： generator,keywords,description，auther等.,name=“generator” ， 用以说明生成工具（如Microsoft FrontPage 4.0 ）等 ；,name = “keywords” ， 向搜索引擎说明你的网页的关键词；,name=“description” ，告诉搜索引擎你的站点的主要内容；,name=“author” ，告诉搜索引擎你的站点的制作者。,meta 标记举例,meta 标记举例,meta标记- -equiv属性,-equiv可取值：Content-Type，Content-Language，Refresh，windows-Target等。, 说明网页使用的字符集。如中文为gb2312-80，英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集。,用以说明网页制作所使用的文字以及语言；,定时让网页在指定的时间n内，跳转到页面 :/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代表要链接到的网页、网站或电子邮件地址，可以是绝对地址，也可以是相对地址。如： :/yahoo ，sample.htm ，mailto:liumeiyan2003tom等。,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,部分。,2,Javascript,脚本何时被执行,位于,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 10,则页面显示,Good morning,/,否则将看到问候语,Good day .,var d = new Date(),var time = d.getHours(),if (time 10), document.write(Good morning!) ,else document.write(Good day!) ,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=3;i+),document.write(The number is + i),document.write(),4、while循环,格式：,while,（条件）,语句集；,说明：,while,语句不断的测试一个条件，如果条件始终成立，则这个循环会一致持续下去，直到条件不再成立为止。,While循环实例,var i=0,while (i=3),document.write(The number is + i),document.write(),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 (i0),输出结果：,The number is 0,6、break 和 continue,break语句结束其所在的for、while以及dowhile整个循环，并把程序的控制权交给循环后的第一条语句。,continue语句结束其所在的for、while以及dowhile循环的本次循环，并立即开始下一个循环。即使得程序流程跳过本次循环内剩余的语句而进入下一次循环。,break举例,var i=0,for (i=0;i=10;i+),if (i=3)break,document.write(The number is + i),document.write(),The number is 0,The number is 1,The number is 2,continue 举例,var i=0,for (i=0;i=10;i+),if (i=3)continue,document.write(The number is + i),document. write(),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,的变量中,4,Javascript,内置函数,内置函数不属于任何对象，在,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(),函数。,!-,function loadform() alert(,这是一个自动装载例子,!); ,function unloadform() alert(,这是一个卸载例子,!); ,/-