Web开发技术（java）--JSP基础知识(HTML+JavaScript+CSS).ppt

《Web开发技术（java）--JSP基础知识(HTML+JavaScript+CSS).ppt》由会员分享，可在线阅读，更多相关《Web开发技术（java）--JSP基础知识(HTML+JavaScript+CSS).ppt（155页珍藏版）》请在三一文库上搜索。

1、1,Web开发技术（java） - JSP基础知识(HTML+JavaScript+CSS),东北大学东软信息学院 计算机系网络工程教研室,2,内容提要,本章首先网页的工作原理 介绍HTML的发展历史、HTML的文档结构、了HTML的各种常用标记：文字标记、图片标记、超级链接标记，等等 介绍JavaScript中的变量、数组、表达式、运算符、流程控制语句、JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用 最后介绍CSS的基本使用方法，如何让CSS与HTML协同工作,3,JSP应用项目结构,浏览器端用户界面的开发： HTML，开发静态网页 JavaScript，简单

2、的事件响应，输入验证。 CSS，浏览页面的美观 Applet，应用于客户端,4,JSP应用项目结构,服务器端业务逻辑处理的开发： Java语言基础 JSP知识 Servlet知识 JavaBeans知识,5,JSP应用项目结构,数据库的开发： 数据库的原理和设计 数据库的创建及维护 SQL语言以及存储过程等,6,HTTP请求/响应模型,访问Web服务器的过程 资源可以是各式各样的 一个原封不动返回浏览器的简单HTML文件 一个动态生成响应的程序。,客户,请求,响应,资源,程序,7,JSP示例(Hello.jsp), 你好 , 你好 你好 ,8,HTML基础,JSP示例： helloworld

3、经过对上述JSP文件的分析我们发现: JSP=HTML+JSP元素，因此需要对HTML进行一番研究,9,HTML基础,HTML (Hyper Text Markup Language)语言简介 超文本标记语言HTML源于标准通用化标记语言SGML（Standard General Markup Language）是SGML的子集（XML同样也是其子集），由Web的发明者Tim和Daniel于1990年创立。 HTML是一门标记型语言，只要记住各个标记的用法即可 可以用任何文本编辑器来编写HTML页面，只要将创建的页面保存为html或htm即可 在客户端浏览器可以查看所编写的源代码,10,HTM

4、L的编辑和运行环境,HTML的编辑环境 所见及所得的编辑器，如：Dreamweaver、FrontPage 任何文本编辑工具，如：记事本、EditPlus HTML的运行环境 浏览器 Internet Explorer 6 FireFox1.5 由于各浏览器对HTML的支持有差别，所以尽量避免使用非规范的HTML标记,11,HTML语言简介,HTML的基本语法 HTML文件由标记和文本组成，格式为： 在浏览器中显示的文本 标记名和“”之间不能有空格 属性通过属性控制各种输出效果，格式为： 受到属性影响的文本 例如：属性示例 属性之间没有顺序，且只能加于起始标记中。,12,HTML语言简介,标记

5、可以分为单标记和双标记两种： 单标记单独使用，如： 双标记成对使用，如： 对于同一段文本，可以使用多个嵌套标记来共同作用，产生一定的效果，但需要注意标记出现的顺序。 网页标题 网页标题 （错误） HTML语言不区分大小写,13,HTML注释,HTML注释 HTML的注释标记为“”和“”可以插入到HTML文本的任何地方 例如： HTML或JSP文件中HTML注释将发送到客户端浏览器，但不显示 这与后面将要讲解的JSP注释不同：JSP注释的内容不会发送到客户端，但在注释出现的位置出现一个空行,14,HTML文件的基本结构,HTML文件的基本结构 HTML文件以开头，以结束 HTML文件包括头部和主

6、体两个部分 基本结构为： 网页标题 例2-1.html,Head的内容可以是标题和元信息（网页关键字、文本文件地址、创作信息等网页信息说明）,15,HTML文件的基本结构,HMTL文件标题标记 网页标题 标记是可选的，可以没有标记，而单独使用标记 HTML的标记不可以直接出现在要显示的内容中，如果需要显示则必须使用相应的转义符代替： 例2-2.htm,16,浏览器对空白的处理,浏览器忽略 开头和结尾的空格 换行 缩进 连续的空格、换行、缩进 只保留一个 特殊情况除外 例如中包括的内容,17,HTML文件的基本结构,HTML文件的主体标记 主题内容 background设置网页的背景图像 bgc

7、olor 设置网页的北京颜色 text 设置文本的字体颜色 link 设置未被访问过的超文本链接的颜色，默认为蓝色 vlink 设置已被访问国的超文本链接的颜色，默认为紫色 alink 色或者当鼠标移至超文本链接的颜色，默认为红色 注：HTML颜色的取值可以用英文单词或以引导的十六进制代码表示，颜色代码由六个数字组成，即#RRGGBB,每一位都是一位十六进制的数字，从0F，可以产生1677万多种颜色。 也是一个可选标记,18,文字格式标记,文字格式标记 设置标题 标题内容 属性align,用来设置标题在页面中的对其方式：left(左对齐，默认)、center（居中）、right（右对齐） 属性

8、n,用来指定标题的大小，可以取16的整数，取1时字体最大，取6时字体最小 标记显示宋体字 标记会自动在标题后加入一个空行，不必再使用标记再加入空行。 在一个标题中无法使用不同大小的字体 例2-3.html,使用设置标题的大小,19,文字格式标记,设置字体 标记可以用来设置文字的字体，颜色以及字号。 face属性，用来设置文字的字体，可能的取值为宋体、黑体、隶书等等，但需要注意除非客户端支持这些字体，否则无法显示期望的效果。 Size属性，用来设置文字的大小，数字的取值范围从17，取1时最小，取7时最大。 Color属性，用来设置文字的颜色，颜色的取值遵从前面所讲的规范。 例2-4.html,用

9、设置字体的样式。,20,文字格式标记,设置字体的颜色 利用标记中text属性，可以设定整个网页的颜色 利用标记中的color属性，可以设定段落、短语或字词的颜色 和设置字体颜色时的优先级 当和同时设定字体的颜色时，设置的字体颜色优先。 例 2-5.html,设置字体的颜色,21,文字格式化标记,其他字体标记 设置字型，即文字的风格，如加粗、斜体、带下划线、上标、下标等等，例：2-6.html。 其他字体标记 加粗 斜体 下划线 删除线 倾斜 强调显示 放大显示 正常显示 放大显示 ,22,文字版面标记,文字版面标记 通过文字版面标记可以设置换行、文字分段、对齐等等。 换行标记 强制换行标记，放

10、到一行的末尾，可使后面的问题换到下一行，而有不会在行与行之间留下空行。其格式为： 前一行要显示文字需要换行显示的文字 强制不换行标记，使某些文字不因过长而分两行显示， 对于数学格式等特殊文本的显示非常有作用。格式为： 需要在同一行中显示的问题,23,文字版面标记,段落标记 强制段落标记,放在一段文字的开头或者末尾，定义一个新段落的开始，不但能使后面的文字进行换行，而且还能在两段之间留一空行。格式为： 前一段落后一段落 标记可以看作是强制换行标记和一个空行 非换行空格符号，“nbsp” 当在编辑html文件需要输入多个空格时，浏览器对这些标记进行解析时，只会保留一个空格。但使用该标记可以实现段首

11、空两行的效果。 例2-7.html,换行标记和段落标记的使用,24,文字版面标记,对齐标记 设置段落标记，格式为： 要显示的文字 属性align用来设置段落的对齐方式，可以为left、center、或right。默认值为left。 原来是个双标记，但从html 2.0开始变为单标记，当然也可以加上结束标记来控制效果产生的范围。 居中标记，确保标记中间的内容居中显示，作用相当于： 要显示的内容 其格式为： 需要居中显示的内容 例2-8.html,25,文字版面标记-列表标记,案例名称：使用有序列表 有序列表 热爱祖国 热爱人民 无序列表 热爱祖国 热爱党 ,26,文字版面格式,显示预排版格式 用

12、于保留在编辑环境中已经排好的段落格式，其中可能包括一些html标记所不能控制的符号，如回车、多个空格等等 例2-9.html,预排版格式的使用 分区显示标记 文本或者图象 作用：设定字图表格的显示位置，当在很多段落中设置对其方式的时候，常采用标记，应用于样式表时非常有用。 例 2-10.html,分区显示标记的应用。,27,图像标记,图像标记 向网页中加入图片，通常使用gif或jpeg格式 还可以设置图像的替代文本、布局等属性 其格式为： ,28,图像标记,设置图片的对齐方式 图像可以放在页面的左边(left)、中间(center)、右边(right). 实现居中的办法有两种： 使用标记 使用

13、的align属性进行设置 格式分别为: ,29,图像标记,设置图像和文本之间的关系 可以设置图文混排版面，如其间的空白，图文的对齐，文本环绕图形等等。有一下几种常见用法： 设置图像与文本之间的空白，使页面看起来不至于过分紧凑。 标记的和属性可以实现此功能。其格式为： 文本和图形在垂直方向的对齐。利用的align属性可以设定他们在垂直方向的对齐。其格式为： 文本文本 其中Align的可能取值为： top：文本与图像的顶部对齐 middle：文本与图像的中央对齐 bottom：文本与图像的底部对齐,30,多媒体标记,设置音频 加入背景音乐 使用标记能够在页面中加入背景音乐，格式为： 加入背景音乐文

14、件的格式为.wav、.au、.mid 当autostart取值为true时，声音文件传输完毕后自动播放。 当loop等于-1或INFINITE时，声音一直播放，直到用户关闭该网页。,31,多媒体标记,嵌入声音与视频播放器 该标记用于嵌入声音与视频。,32,超文本链接标记,超文本连接标记 这种标记也称为锚点，通过一个单词、一句话或者图片等，实现一个页面到另外一个页面的跳转。 具有以上特点的词、句、或图片就称为锚点，可以利用标记中相应的属性来设置颜色。 超文本连接标记的格式为： a href=“”|name=“” target=“_blank|_self|_parent|_top” Href，取值

15、为一个URL，是目标资源的地址 Name，参考点，不能和href同时使用，指的是本文档内的一个字符串。 Target，指定如何打开目标页面. 例2-12_2.html,演示超级连接的使用。,33,超文本链接标记,创建指向邮件地址的超链 需要在href属性的取值中加入mailto:,其格式为： 热点文本 例如，邮件地址为,建立如下连接： 联系,34,创建表格,表格标签主要包含下列几项 -表格标记，双标记，表格的整体外观由标记的属性决定 - 表行标记，双标记，表示表格中新的一行的开始； - 表头标记，双标记，标记的文字按照粗体字显示 - 表项(定义表格的具体数据) ，数据的内容放在标记之间。 例

16、表格详细属性名及取值参见下表：,35,标记的主要属性,36,标记的主要属性,37,标记的主要属性,例2-12.html,演示表格的各种用法。,38,创建表格,使用标记给表格加上标题 标题 Align的取值分别表示标题在表格的左、右、中、上、下。 Valign设置标题在表的上部还是下部。,39,创建表格,跨多行多列的表格 使用标记的rowspan和colspan属性可以制作跨多行或跨多列的表格。 跨多行的表元或者 食品 主食素菜荤菜 米饭韭菜猪肉 跨多列的表元或者 食品主食米饭 素菜韭菜 荤菜猪肉 ,40,表单作用,实现动态交互的基础 表单的作用是提供一个友好的界面，从用户方面收集信息，当用户通

17、过键入文本或选择列表框或下拉菜单等方式填好表单上的所需信息并将表单提交后，服务器就可以得到表单中包含的信息，然后由服务器上的相应的程序进行处理。表单是WWW上最流行的交互特性之一，也是动态HTML技术的基础。,表单,表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。 表单信息的处理过程如下：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序（例如CGI，ASP，PHP，JSP等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。,42,表单设计,表单应包含说明性文字、

18、用于用户填写的输入框、提交和重置按钮等。 表单中包含的主要元素有： Button Radio Checkbox File Text Hidden image Submit Reset password textarea Select 用HTML设计表单的常用标记有： 、,43,表单设计,表单标记 表单标记,用于设置表单的起始位置，并指定处理表单数据程序的URL地址，格式为： 例2-13.html，表单的综合演示。,44,表单设计,表单输入标记 表单输入标记,在表单中输入频繁，大部分表单内容需要使用此标记进行组织，其语法为： 注：其中粉红色的属性尤为重要。 例2-14.html,演示input的

19、各种用法。,45,表单设计,下拉列表标记 下拉列表标记用于在表单中插入一个下拉列表，需要与标记配合使用，下拉列表中的每一个选项都是通过标记来定义的，其语法如下： Name表示下拉列表的名称；size表示一次显示的选项数，multiple表示该下拉列表是否是多选的。 选项标记：用来定义下拉列表的选项，其语法形式为： 语法1： value 语法2：实际显示值 例2-15.html,演示select 的使用。,46,表单设计,多行文本输入标记 用于浏览者发表意见，填写信息可以输入比较多的文字，其基本格式为： 文本 Name属性，设定文本框的名称 Cols属性，表示文本框的宽度 Rows属性，表示文本

20、框的高度 例子2-16.html,演示标记的使用。,47,框架标记,框架标记与共同作用实现 . 定义在一个窗口中帧的布局 常用属性 rows=“.”设定行的数目 cols=“.”设定列的数目 onload=“.”当载入文档时的内部事件触发器 onunload=“.”当卸载文档时的内部事件触发器 注释：FRAMESET可以嵌套，FrameSet出现的页面body标记不允许出现。,48,框架标记,用于定义定义一个帧 属性：name=“.”定义帧的名字 scr=“.”定义在帧中显示的内容的来源 frameborder=“.“定义帧之间的边界(0或1) margwidth=“.”设置帧的边界和其中内容

21、之间的间距 margheight=“.”设置帧的边界和其中内容之间的间距化 noresize=“.”使帧的尺寸不能变 scrolling=“.“设置滚动条的表示方式(auto, yes, no),49,框架标记,内嵌框架标记。iframe和frame功能一样，不同的是它是个浮动框架，你可以把Iframe布置在你网页中的任何位置，包括层中，这种极大的自由度可以给网页设计带来很大的灵活性 。,50,JavaScript,51,主要内容,什么是JavaScript以及为什么使用JavaScript 如何放置JavaScript代码 JavaScript语言 JavaScript函数 JavaScri

22、pt事件 JavaScript对象 如何对Form表单进行验证,52,JavaScript简介,javaScript语言简介 JavaScript语言是NetScape公司开发的一种基于对象的、由浏览器负责解释执行的、弱类型的描述性脚本语言。 用于在HTML页面中增加交互能力 JavaScript是解释性语言（意味着使用其编写的脚本不需要事先编译） JavaScript是通过嵌入到HTML语言中实现的，可以出现在HTML的任何地方，它弥补了HTML语言的缺陷，是Java与HTML折衷的选择 IE3.0和NetScape3.0以上的浏览器都支持JavaScript语言。 动态网页分为两种 一种是

23、服务器端动态，主要由JSP、PHP、ASP等等技术实现。 一种是客户端动态，主要由JavaScript、VBScript语言实现。,53,JavaScript简介,JavaScript与java之间的主要区别： 基于对象和面向对象。JavaScript语言是基于对象和事件驱动的脚本语言；Java语言是面向对象的语言，可以设计独立的程序 解释执行和编译执行 JavaScript是一种解释性的语言，是将文本格式的代码发送到客户端由浏览器负责解释执行。Java代码在执行之前必须编译成字节码文件，由虚拟机负责执行。 弱类型和强类型。JavaScript是弱类型变量，即变量在使用前不需要声明，由解释器负

24、责确定变量的数据类型，而Java是一种强类型语言，所有的变量在事情之前必须声明，并且只能存放声明类型的数据。,54,JavaScript简介,动态联编和静态联编。JavaScript采用动态联编，即对象的引用在运行时进行检查，如不运行就无法实现对对象引用的检查。而Java采用静态连接，即Java对象引用在编译时进行，以使得编译器能够实现强类型检查。 代码格式不一样， Java是SUN公司推出的新一代面向对象的程序设计语言，与HTML并无关系,而JavaScript是Netscape公司的产品，其目的是为了扩展其浏览器功能，需要嵌入在HTML中进行执行。,55,JavaScript语言简介,Ja

25、vaScript语言的特点： 解释型的脚本语言，采用小程序端的方式实现编程，不需要事先编译； 是基于对象的语言，可以运用已经创建好的对象，结合对象的方法和脚本实现所需的功能 是事件驱动的语言，可以直接对用户的输入做出响应，不需要服务器的支持，减少了浏览器和服务器之间的通信量，提高了响应速度。 变量类型采用弱类型，未使用严格的数据类型 是一种安全的语言，只能通过浏览器实现信息浏览或动态交互，不允许访问本地硬盘或将数据存到服务器上，不允许对网络文档进行修改和删除，从而有效防止数据的丢失。 是一种与平台无关的语言，依赖于浏览器本身，与操作系统无关，从而实现了一定程度的”一次编写，随处运行“。,56,

26、JavaScript简介,JavaScript代码的加入： 使用标签将javaScript代码潜入到HTML中。 格式如下： Javascript代码； /script 标记有两主要属性： Language，脚本语言的类型，可以为javaScript或liveScript Src,包含javaScript源代码的文件，以”.js”为扩展名，可以是javaScript以文件的形式加载到html文件中 JavaScript代码可以嵌入在HTML的任何位置，但一般推荐将其放在标签中,57,网页中引入JavaScript,案例名称：第一个JavaScript程序 程序名称：2-24.htm docum

27、ent.write(“这是以JavaScript输出的!“); ,58,JavaScript中的注释,JavaScript中的注释和Java基本一致，也分为单行和多行注释。 注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。 单行注释：使用/符号对单行信息进行注释 多行注释：使用/*/对多行信息进行注释 例子： /下面的alert()是弹出一个对话框 /* 下面的alert()是弹出一个对话框 */ alert(“这是第一个JavaScript例子!“); ,59,JavaScript基本语法,基本语法主要包括： 数据类型 变量和数组的定义 表达式和运算符 流程控制 函数定义,60,

28、数据类型,JavaScript脚本语言同其他语言一样，有自己的基本数据类型、表达式和算术运算符以及程序的基本框架结构。 JavaScript的常见数据类型： 字符串：“abc“ hello “你好“ 数字：包括整数数字和浮点型数字 布尔值：true 和false 空值：null 特殊字符：又叫转义字符 b 表示退格 n 表示换页 t 表示Tab符号 r 表示回车符 “ 表示双引号本身 表示单引号本身 表示反斜线,61,变量,JavaScript变量的定义： Javascript中采用弱类型变量，变量可以不做声明或不做类型声明，而在使用是确定类型。 例如：x=100、y“abc”等等 但是，声明

29、变量的好处是能够及时发现程序中的错误。 javaScript中变量的定义使用关键字var来实现。 例如： Var id; 声明变量必须明确变量的命名、类型及作用域。,62,声明变量,案例名称：使用变量 程序名称：2-25.htm var strWelcome = “欢迎您！“; var iCounter = 10; iCounter = iCounter + 1; document.write(strWelcome); document.write(iCounter); ,63,变量,JavaScript变量的命名： （1）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须

30、是A到Z或是a到z之间的字母或是“_”。 （2）变量名长度在0255字符之间。 （3）除了首字符，其他字符可以使用任何合法字符、数字及下划线，但是不可以使用空格。 （4）不可以使用JavaScript的运算符号，例如：+，等。 （5）不可以使用JavaScript用到的保留字，例如：sqrt（开方），parseInt（转换成整型）等。 （6）在JavaScript中，变量名大小写是有所区别的，例如：变量s12和S12是不同的两个变量。 JavaScript变量的作用域： 全局变量， 定义在函数体之外，作用范围是所有函数。 局部变量，定义在函数体内，作用范围是本函数。,64,声明数组,用new和

31、Array关键字，new代表建立一个新的对象，Array是JavaScript内置的一个对象 由于JavaScript区分大小写，所以Array的首字母必须是大写。 数组声明：var 数组变量名= new Array() 创建时指定数组长度 var week = new Array(7) 创建时不指定数组长度，自动延伸数组的长度 var week = new Arrary() 数组的长度：使用数组的length属性来获得数组的长度 week.length,65,使用数组,案例名称：使用数组 程序名称：2-26.htm var arrUserName = new Array(2); arrUse

32、rName0 = “Bill“; arrUserName1 = “Bob“; document.write(arrUserName0); document.write(“); document.write(arrUserName1); document.write(“); ,66,运算符,JavaScript的运算符 数学运算符： 加法运算符”+” 减法运算符“-” 乘法运算符”*” 除法运算符“/” 取模运算符“%” 递增运算符“+” 递减运算符”-”,位运算符： 按位与”&” 按位或”|” 按位异或” 按位取非” 左移操作符” 逻辑右移操作符”,67,算术运算符,案例名称：算术运算符 程序

33、名称：2-27.htm document.write(3*2); document.write(“); document.write(3/2); document.write(“); document.write(3%2);/取余数 ,68,字符串运算符的使用方法,案例名称：字符串运算符 程序名称：2-29.htm var strHello = “网页编程“; var strResult = “你好，“; strResult += strHello; /等价于：strResult = strResult + strHello; document.write(strResult); ,69,运算

34、符,逻辑运算符 逻辑与&” 逻辑或”|” 逻辑非“！” 比较运算符 等于“=” 不等于”!=” 小于” 小于等于”=” 严格等于”=” 严格不等于”!=”,赋值运算符 ”=” ”+=” ”-=” ”*=” ”/=” ”%=” ”&=” ”|=” ”=” ”=” ”=”,70,逻辑运算符,逻辑运算符包括：与运算符“&”、或运算符“|”和取反运算符“！”,案例名称：逻辑运算符 程序名称：2-28.htm document.write(true ,71,运算符,其他运算符 条件操作符”(condition)?:val1;val2”,唯一的三目运算符 成员选择运算符“.”,来引用对象的属性和方法 下标

35、运算符，用来应用数组的元素，如：arry8 逗号运算符，用来分开不同的值，如：var a，b 函数调用运算符，用来表示函数的调用，如function（） “new”，创建指定对象的实例，如：new myObject。 delete，用来删除对象，对象的属性，数组元素。 typeof，用来返回操作数的类型，类如 typeof true，返回为boolean。 void，用于定义函数，表示不返回任何数值，如void mfun(). this:用来引用当前的对象。,72,运算符,运算符的优先级,73,表达式,javaScript的表达式 表达式，是变量、常量、布尔以及运算符的集合，可以对变量进行赋值

36、、改变、计算等一系列操作。 表达式可以分为： 算术表达式 字符串表达式 赋值表达式 布尔表达式,74,常用语句,JavaScript的条件和分支语句 If条件语句 If语句是最基本、最简单的条件语句。 If语句的格式： If(条件) 语句块； else 语句块； ,75,if语句,案例名称：if语句 程序名称：2-31.htm var iHour = 13; if (iHour ,76,常用语句,Switch分支语句 对一个表达式进行多次判断，每一种的取值都采取不同的处理方法。 switch语句的格式: Switch(表达式) case 值1:语句1； break; case 值n:语句n；

37、break; default: 语句n1； ,77,switch语句,案例名称：switch语句 程序名称：2-32.htm var val = “; var i = 5; switch(i) case 3: val = “三“; break; case 4: val = “四“; break; case 5: val = “五“; break; default: val = “不知道“; document.write(val); ,78,常用语句,JavaScript循环语句 for语句 For循环语句是反复地执行一段程序，并且在每次循环后处理变量，直到循环表达式不满足。 for语句的格式:

38、 for(变量初始化；循环条件表达式；修改变量) 语句块； 例2-23.html,演示for语句的用法,79,for 语句,案例名称：for 语句 程序名称：2-33.htm var iSum = 0; for(var i = 0; i ,80,常用语句,for-in语句 for-in语句与for语句类似，循环范围是一个对象的所有属性或者数组中的一组元素，用于循环访问一个对象的所有属性。 for-in语句的格式: For(变量 in 对象或数组) 语句块； ,81,常用语句,while语句 while语句会在条件成立一直循环执行一些语句块，直到条件不成立为止，不是执行固定的次数 while语句

39、在执行体之前先检查循环条件，条件不满足一次也不执行，直接退出。 while语句的格式 while(循环条件表达式) 语句块； 变量修改； ,82,while 语句,案例名称：while 语句 程序名称：2-34.htm var iSum = 0; var i = 0; while( i,83,常用语句,do-while语句 do-while语句会不管条件是否成立，先执行一次循环体，然后再检查循环条件，条件满足则继续执行，直到条件不满足，退出。 do-while语句的格式 do 语句块； 变量修改； while(循环条件表达式),84,常用语句,其他常用语句： label语句 label语句用来

40、为任意的语句添加标号。 label语句的格式： label:代码块； break语句 break语句用于无条件地跳出switch语句或者循环结构 continue语句 continue语句是结束本轮循环，开始执行下一轮循环。 return语句 将函数的处理结果返回给调用函数的语句。,85,break语句,案例名称：break语句 程序名称：2-35.htm for(i = 1; i “); ,86,continue语句,案例名称：continue语句 程序名称：2-36.htm for(i = 1; i “); ,87,常用语句,with语句 用来声明代码块中的缺省对象，代码块可以直接使用wi

41、th语句声明对象的属性和方法，而不必写出其完整的引用，任何不指定对象的属性引用将就被认作是缺省对象的。 with语句的格式 with(对象名) 代码块 ,var x,y; var r=10; with(Math) a=PI*r*r; x=r*cos(PI); y=r*sing(PI/2); ,88,练习,使用JavaScript实现如下所示九九乘法表。 效果演示,89,常用语句,javaScript函数定义语句 JavaScript函数可以封装那些在程序中可能需要多次使用的模块，并可以作为事件驱动处理程序。 函数的定义： 使用函数前一定要先进行定义 函数定义分为三个部分：函数名、参数列表和函数

42、体。 定义函数的格式为： function 函数名(参数1，参数2) 函数执行部分； 函数返回部分 例2-20.html，演示javaScript函数的定义和调用。,90,函数定义和调用,案例名称：函数定义和调用 程序名称：2-37.htm function getSqrt(iNum) var iTemp = iNum * iNum; document.write(iTemp); getSqrt(8); ,函数定义,函数调用,91,函数的返回值,案例名称：函数的返回值 程序名称：2-38.htm function f(y) var x = y * y; return x; for(x = 0;

43、 x “); ,92,常用语句,函数名 程序通过函数名来调用函数 函数名与变量的命名规则相同，是大小写敏感的。 函数的参数 调用函数时，变量、常量都可以作为参数传递； 参数的传递是以传值的方式进行的。 例如： Hello(“jason”) var user=“jason” hello(user); 也可以在定义函数时不指定使用的参数，javaScript会在每次调用该函数时自动生成arguments数组，并建立与参数列表有关的属性。 Functionname.arguments,是一个数组，每一个参数对应其中的一个元素，可以使用该数组来访问调用时所传送的参数。 Functionname.arg

44、uments.length，是一个整型变量，表示传递参数的个数。 可以使用这两个属性产生参数个数可变的函数。 例221.html,演示参数可变的函数。,93,常用语句,函数有时候需要有返回值，可以使用return语句，将需要返回的值放在return后面，可以是常量、变量以及有唯一确定值的有效表达式。 例2-22.html,演示函数的返回值,94,事件调用函数,javascript是基于对象(object-based)的语言，而基于事件的基本特征，就是采用事件驱动(event-driven)。 事件： 就是Web页面在浏览器处于活动状态时发生的各种事情。如：浏览器加载、卸载一个页面，用户单击鼠标

45、、移动鼠标，以及按下键盘的某个键 事件调用函数： 当发生了某个事件之后去调用函数进行处理的方式。 事件调用函数的格式： on事件名 事件处理函数,95,事件调用函数举例, function clickme() alert(“按钮被点击“); 演示效果,96,事件调用函数举例,案例名称：单击事件 程序名称：2-39.htm ,97,事件,鼠标事件 鼠标事件共由6个： onMouseDown:在对象上按下鼠标键的时候 onMouseUp:在对象上按下鼠标建后，放开鼠标建的时候 onMouseOut:当鼠标离开对象的时候。 onClick:当对象被点击的时候 onMouseOver:当鼠标悬停与对象

46、上方的时候 onMouseMove:当鼠标移动的时候,98,事件,键盘事件 键盘事件共3个： onKeyDown:在键盘上按下某键的时候； onKeyUp:当键盘上松开某键的时候； onKeyPress:在键盘上按住某键的时候,99,事件,焦点事件 焦点事件共有2个： onFocus:发生在窗口得到焦点的时候 onBlur:发生在焦点失去焦点的时候,100,javaScript对象,window对象的事件处理程序（body,frame） onLoad：当窗口或框架完成加载是执行的javaScript代码 onUnload:当窗口或框架内的文档退出时执行的JavaScript代码,101,事件,

47、加载和卸载窗口事件： onLoad:发生在文档全部加载完毕的时候，全部加载完毕意味着不但HTML文件，而且包含的图片、插件、空间、小程序等全部加载完毕。 onUnload:发生在用户退出文档（或者关闭窗口、或者到另一个页面去）的时候。,102,事件,调整窗口事件： onResize:发生在窗口被调整大小的时候。,103,事件,其他事件 onChange:发生在文本输入区的内容被修改，然后焦点从文本输入区移走之后，主要用于实时检测输入的有效性，或者立即修改文档的内容。 onError:当发生错误时触发该事件，其事件处理程序通常叫做“错误处理程序（Error Handler）”,用来处理错误。 o

48、nReset:发生在表单的“重置”按钮被点击（按下并放开）的时候触发。 onSubmit:发生在表单的“提交”按钮被点击（按下并放开）的时候触发。,104,事件调用函数举例,下拉列表是常用的一种网页元素，一般利用ONCHANGE事件来处理。,案例名称：处理下拉列表 程序名称：2-40.htm 北京 上海 广州 function func() alert(“你选择了“ + selAddr.value); ,105,JavaScript对象,javaScript语言是基于对象的（Object-Based），而不是面向对象的(Objected-oriented). javascript没有提供抽象、

49、继承、重载等有关面向对象的许多功能，而是把其他语句所创建的复杂对象统一起来，形成一个强大的对象系统。 但是，javaScript语言还是具有面向对象的基本特征，可以根据需要创建自己的对象，扩大JavaScript的应用范围。 对象是具有一定共同特征的集合体，有属性和方法两个基本元素构成。 属性(properties),是之对象的特征。 方法(methods),是指对属性进行的操作。 对象属性和方法的引用：对象.属性 对象.方法 对象在引用之间必须存在，否则毫无意义，而且会出现错误信息。,106,JavaScript中的对象,内置对象 JavaScript将一些非常常用的功能预先定义成对象，用户可以直接使用，这种对象就是内置对象 浏览器对象 网页和浏览器本身的各种元素在JavaScript程序中的体现 它使JavaScript可以定位、改变内容以及展示HTML页面的所有元素 自定义