第4章JavaScript概述.ppt

1、第四章 JavaScript脚本语言,主讲人:陈轶,2007-1-9,第六章 JavaScript基础概念（陈轶）,2,第六章 JavaScript基础概念,学习目标： 了解JavaScript的基本概念。 对JavaScript有初步的印象。 掌握JavaScript的基本语法 了解流程控制结构。 掌握JavaScript的条件、循环等流程控制语法。 JavaScript的函数 了解什么是事件，事件处理的运用。 掌握JavaScript的常见内置对象。,2007-1-9,第六章 JavaScript基础概念（陈轶）,3,第六章 JavaScript基础概念,主要内容： JavaScript概

2、述 初识JavaScript程序 常见的数据类型 变量(Variable) 数组(Array) 常量(Constant) 运算符(Operator),条件语句ifelse 选择语句switchcase 计数循环语句 for 循环语句forin 条件式循环with 注释语句 返回语句return 函数 事件处理 事件处理方法 JavaScript预定义的事件处理器 JavaScript内置对象,2007-1-9,第六章 JavaScript基础概念（陈轶）,4,4.1 JavaScript概述,JavaScript程序语言是NetScape与Sun公司合作产生的一种脚本语言。 JavaScrip

3、t是一种基于对象(Object)和事件驱动(Event Driven),并具有安全性能的脚本语言。它可以和HTML等实现与WEB客户交互作用。 JavaScript是简单的。主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计。 JavaScript可以用文本编辑器进行编辑。,2007-1-9,第六章 JavaScript基础概念（陈轶）,5,4.1 JavaScript概述,JavaScript是安全的。它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。 JavaScript是动态的，它可以直接对用

4、户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。 JavaScript是跨平台的，它依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。,2007-1-9,第六章 JavaScript基础概念（陈轶）,6,4.2 初识JavaScript程序,第一个JavaScript程序 运行结果见HTML6_1.html。,2007-1-9,第六章 JavaScript基础概念（陈轶）,7,4.2 初识JavaScript程序,程序解析： 告诉浏览器在此标记内的部分是JavaScript代码 函数doc

5、ument.write()输出信息 ：为了防止部分浏览器无法显示JavaScript程序时，就把程序视为注释忽略。,2007-1-9,第六章 JavaScript基础概念（陈轶）,8,4.2 初识JavaScript程序,第二个JavaScript程序 运行结果见Html6_4.html。,2007-1-9,第六章 JavaScript基础概念（陈轶）,9,4.3 JavaScript常见的数据类型,JavaScript支持三种基本数据类型: 数值型 字符串 布尔型 JavaScript支持复合数据类型 无序的集合 有序的集合,2007-1-9,第六章 JavaScript基础概念（陈轶）,1

6、0,4.3 JavaScript常见的数据类型,数值型 整数 十进制：34 八进制：023 十六进制：0 x12 特别的数字量NaN，用以表示一个变量或函数的返回值不是数字。 实数 小数表示 指数表示 在JavaScript中整数和实数并没有严格区分，二者在程序中可以自由地转换。,2007-1-9,第六章 JavaScript基础概念（陈轶）,11,4.3 JavaScript常见的数据类型,内部定义常量 JavaScript中有Math对象定义常用的数字常量。如Math.Pi、Math.E等 特殊值,2007-1-9,第六章 JavaScript基础概念（陈轶）,12,4.3 JavaScr

7、ipt常见的数据类型,字符串 由单引号或双引号界定的一串字符； 如果在一对双引号之间出现单引号，可以视之为字符串的一部分； 如果在一对单引号之间出现双引号，可以视之为字符串的一部分； 如果在单引号之间出现了单引号,可将内部的单引号用转义字符表示;如Cant表示成Cant 可以直接获得字符串的长度； s=“do what you want”; s.length,2007-1-9,第六章 JavaScript基础概念（陈轶）,13,4.3 JavaScript常见的数据类型,JavaScript的转义字符示例,2007-1-9,第六章 JavaScript基础概念（陈轶）,14,4.3 JavaS

8、cript常见的数据类型,布尔类型 （：true；：false） null 没有值，表示不是有效的对象、数组、数字、字符串、布尔数等； undefined 可以是一个没有声明的变量； 是一个已经创建但没有赋值的变量； 可以是一个并不存在的对象属性；,2007-1-9,第六章 JavaScript基础概念（陈轶）,15,4.4 变量,什么是变量 变量是在程序中声明一个名字，使计算机提供一个预留的内存空间，来存储任何数字或者文字。 在一个JavaScript函数的外部声明的变量是外部变量，在函数内部声明和使用的变量是为内部变量。,2007-1-9,第六章 JavaScript基础概念（陈轶）,16

9、,4.4 变量,变量的名称 变量名可以包含0-9、大写或小写的拉丁字母和下划线； 变量名的首字符必须是字母或下划线； 变量名中不能有空格或其他标点符号； 区分大小写； 不可以使用保留字； 变量名的长度在一行以内；,2007-1-9,第六章 JavaScript基础概念（陈轶）,17,4.4 变量,JavaScript中的变量声明 JavaScript语言中可以不必事先声明变量名称。 变量利用“=”进行赋值。 变量名称=值 例如：aa=50 建议使用var语句来声明变量。 var value=10 在使用一个与外部变量重名的内部变量时候，必须使用var语句声明一个函数的内部变量。 例子见HTML

10、6_2.html。,注意：,2007-1-9,第六章 JavaScript基础概念（陈轶）,18,4.5 常量,什么是常量 常量是一种不会改变的数,也就是说原来就存在于程序软件内,而且不会任意改变它所代表的值。NaN、null等都是JavaScript规定好的。,2007-1-9,第六章 JavaScript基础概念（陈轶）,19,4.6 运算符,数学运算符,2007-1-9,第六章 JavaScript基础概念（陈轶）,20,4.6 运算符,举例HTML6_3.html。 赋值运算 = 将值从右到左 与其他运算符组成复合赋值运算(+=、-=等）,+也可以进行“字符串连接”,注意：,2007-

11、1-9,第六章 JavaScript基础概念（陈轶）,21,4.6 运算符,关系运算，例子见HTML6_4.html。,2007-1-9,第六章 JavaScript基础概念（陈轶）,22,4.6 运算符,逻辑运算符,4.6 运算符,位逻辑运算,2007-1-9,第六章 JavaScript基础概念（陈轶）,23,2007-1-9,第六章 JavaScript基础概念（陈轶）,24,4.6 运算符,其他操作符 例子见HTML6_4.html。 条件操作符(?:) new操作符 创建一个对象实例 delete操作符 删除对象、对象的属性、或数组中的元素，删除成功返回真值，删除失败返回假值。,20

12、07-1-9,第六章 JavaScript基础概念（陈轶）,25,4.6 运算符,this 引用当前的对象 in 判断运算符左边的值是其右边对象的一个属性名，是为真，否为假； instanceof 判断是实例化的值；,2007-1-9,第六章 JavaScript基础概念（陈轶）,26,4.6 运算符,void运算符 舍弃运算数的值，返回一个undefined。 typeof运算符 返回一个字符串，说明数据的类型。 ，逗号运算符,2007-1-9,第六章 JavaScript基础概念（陈轶）,27,4.7 数组(Array),什么是数组 数组是由许多名称相同的变量聚集在一起，数组的用法和普通变

13、量是一样的，也可以存入任何数据类型，不同点就是它在内存中占据的是一块连续的空间，可以依序来给它们编号，再依编号来使用它们。 数组的下标小于232-1。,2007-1-9,第六章 JavaScript基础概念（陈轶）,28,4.7 数组(Array),创建数组 创建空数组 var a=new Array() 创建包含不同类型元素的数组 var b=new Array(21,3.5,”heart”); 指定大小的数组 var c=new Array(3); 定义并指定元素 var d=“now”,”future”,”past”;,数组的好处在于一次可以声明多个变量,2007-1-9,第六章 Jav

14、aScript基础概念（陈轶）,29,4.7 数组(Array),Array对象的方法 join()：把所有的元素连接成串； reverse()：把数组中元素的位置颠倒； sort()：数组中元素排序； concat()：连接两个数组； slice()：返回数组的一部分； splice()：插入或删除数组元素； push()：在数组尾部加入数组元素； pop()：删除数组的最后一个元素，返回删除的值；,2007-1-9,第六章 JavaScript基础概念（陈轶）,30,4.7 数组(Array),unshift()：在数组的前面添加元素； shift()：在数组的开头删除数组元素； toSt

15、ring()：把多个元素转换成字符串； 例子见HTML6_4.html。,4.8 对象,JavaScript 是面向对象的。 对象（object）是属性的无序集合，每个属性存放一个原始值、对象或函数”,2007-1-9,第六章 JavaScript基础概念（陈轶）,31,4.8 对象,对象包含属性和方法两部分。 对象的属性和方法的访问方式 对对象中属性的访问可以通过“对象名.属性名”的方式进行，同样，要调用对象中定义好的方法可以通过“对象名.方法名”的形式实现。 也可以将对象的属性看作是一个属性数组，因此可以通过访问数组下标的形式访问对象的属性，数组下标可以用数字或者属性名表示。,2007-1

16、-9,第六章 JavaScript基础概念（陈轶）,32,4.8对象,若student是一个定义过的对象，它包含name、stunum和age三个属性，当我们要给这三个属性赋值时可以通过以下方式实现： = John student.stunum = 12345 student.age = 20,2007-1-9,第六章 JavaScript基础概念（陈轶）,33,4.8对象,自定义对象 使用关键字function来声明。其语法形式为： function 对象名（属性列表） this.属性1= 参数1 this.属性2= 参数2 this.方法1= 函数1 this.属

17、性2= 函数2 创建对象实例 使用new关键字,2007-1-9,第六章 JavaScript基础概念（陈轶）,34,4.8对象,如要定义一个student对象，它的属性为name、stunum和age，可以通过以下语句实现： function student（Name, StuNum, Age） = Name this.stunum = StuNum this.age = Age var s = new student（John,12345,20） 书Page71，程序清单4-2,2007-1-9,第六章 JavaScript基础概念（陈轶）,35,2007-1-9,第七

18、章 JavaScript流程控制（陈轶）,36,4.9 条件语句if,单一选择： 格式：if 条件 程序代码 双向选择： 格式： if 条件 程序代码一 else 程序代码二 例子见HTML7_1.html,2007-1-9,第七章 JavaScript流程控制（陈轶）,37,4.9 条件语句if,多项选择 格式：if 条件 程序代码一 else if 程序代码二 else if 程序代码三 else 程序代码(N+1) 例子见HTML7_2.html。,2007-1-9,第七章 JavaScript流程控制（陈轶）,38,4.10 选择语句switchcase,格式： switch(变量）

19、case 值一： 程序代码一 break; case 值二： 程序代码二 break; . default:： 程序代码(N+1),2007-1-9,第七章 JavaScript流程控制（陈轶）,39,4.11 循环语句for,格式： for(初始表达式；循环条件；递增表达式) 程序代码 举例见HTML7_3.html。,2007-1-9,第七章 JavaScript流程控制（陈轶）,40,4.12 循环语句while,格式 while(循环条件) 程序代码 do 程序代码 while(循环条件)； 例：用JavaScript实现九九乘法表的输出。 例子见HTML7_4.html。,2007-

20、1-9,第七章 JavaScript流程控制（陈轶）,41,4.13 循环语句forin,格式： for(变量 in 对象) 程序代码 例：列举对象document的所有属性。 见HTML7_5.html。,2007-1-9,第七章 JavaScript流程控制（陈轶）,42,4.14 label语句,格式 label:代码块 例如： highscore: if(score80) break highscore; document.write(“HighScore”); ,2007-1-9,第七章 JavaScript流程控制（陈轶）,43,4.15 break语句,格式： break 用于s

21、witch和循环语句中进行跳出转向。 跳出标记语句，见label语句。 例:用break label实现九九乘法表。 见HTML7_6.html。,2007-1-9,第七章 JavaScript流程控制（陈轶）,44,4.16 continue,格式 continue continue 标记； 结束本层循环 例：用continue label实现九九乘法表。 见HTML7_4.html。,2007-1-9,第七章 JavaScript流程控制（陈轶）,45,4.17 with语句,格式 with(对象) 代码块 with语句用于声明代码块的缺省对象。 例：with(document) writ

22、e(“JavaScript”); 见HTML7_4.html。,2007-1-9,第七章 JavaScript流程控制（陈轶）,46,4.18 其他语句,注释 单行注释/ 多行注释/* .*/ return 语句 用于函数中，返回函数处理的结果给调用函数的语句。,4.18 其他语句,在Internet往往会遇到运行错误。如果不对运行错误进行处理，会影响用户访问网页的质量，javascript提供了两种处理错误的方式： trycatch:用来测试代码中的错误。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用) 使用 onerror 事件。这是用于捕获错误的老式方法。(Ne

23、tscape 3 以后的版本可用),4.18 其他语句,TryCatch try /运行代码,有可能出现问题 catch(err) /在此处理错误 例：见HTML6_9.html,4.18 其他语句,Throw Throw 声明 throw 声明的作用是创建 exception（异常）。throw与 try.catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。 例：见HTML6_11.html,2007-1-9,第七章 JavaScript流程控制（陈轶）,50,4.19函数,函数定义 function 函数名(参数表) 代码块 函数的调用 函数名(实参); 作为数据的函数 函

24、数可以作为数据赋值给变量. 见例子HTML7_11.html 常用的全局函数 eval(字符串)：执行字符串，例eval(“3+4”) isNaN(表达式)：判断表达式是否是一个数值类型的数据。,2007-1-9,第七章 JavaScript流程控制（陈轶）,51,4.20函数,number(对象)：将对象转换成数值； string(对象)：将对象转换成字符串； escape(字符串)：将字符串编码成ISO-Latin-1字符集的编码。 unescape(字符串)：将字符串解码还原。 例子见HTML7_9.html。 递归函数 函数自我调用。 例：编写JavaScript程序实现n!的运算。

25、程序见HTML7_10.html。,2007-1-9,第八章 JavaScript事件和对象,52,4.21 JavaScript的事件,什么是事件？ 事件是说明用户与WEB页交互操作时产生的操作。如用户单击按钮或输入窗体数据时，就会产生一个事件，浏览器在事件发生时，进行相应地处理。响应某个事件而进行的处理过程称为事件处理。 进行这种处理的代码称为事件处理器。,2007-1-9,第八章 JavaScript事件和对象,53,4.21 JavaScript的事件,2007-1-9,第八章 JavaScript事件和对象,54,4.21 JavaScript的事件,2007-1-9,第八章 Jav

26、aScript事件和对象,55,4.21 JavaScript的事件,事件句柄 是界面对象的一个属性，以存储特定的事件处理函数的信息。当一个事件发生，JavaScript就会自动查找界面对象中对应的事件句柄，调用与之相关联的事件处理函数。一般句柄的形式总是事件的名称前面加上前缀on。,2007-1-9,第八章 JavaScript事件和对象,56,4.21 JavaScript的事件,鼠标事件 MouseOver - onMouseOver MouseOut - onMouseOut MouseMove - onMouseMove MouseDown - onMouseDown MouseUp

27、 - onMouseUp Click - onClick Blur - onBlur Focus - onFocus,2007-1-9,第八章 JavaScript事件和对象,57,4.21 JavaScript的事件,链接事件 mouseOver onMouseOver mouseOut onMouseOut Click onClick 例:实现一个URL链接在鼠标经过、鼠标移出、鼠标单击不同时出现不同的图形。见HTML8_1.html。,2007-1-9,第八章 JavaScript事件和对象,58,4.21 JavaScript的事件,窗口事件 装入窗口 onLoad 退出窗口 onUn

28、load 装入窗口时出错 onError 窗口得到输入焦点属性 onFocus 窗口失去输入焦点属性 onBlur 例：首次装入HTML文件时，显示“欢迎你”的提示信息。当退出窗口，显示“再见，下次再来！”的提示信息。 见HTML8_2.html。,2007-1-9,第八章 JavaScript事件和对象,59,4.22 JavaScript的内置对象,对象 封装数据和方法，具有信息隐藏的性质 JavaScript的内置对象 String对象 Math对象 Date对象 Array对象 Number对象 Boolean对象 Event对象 RegExp对象,2007-1-9,第八章 JavaS

29、cript事件和对象,60,4.22 JavaScript的内置对象,String对象 常见的方法 charAt(index)charCodeAt(index) concat(string)fromCharCode(v1,.) indexOf(index)lastIndexOf(s,index) slice(start,end)split(string) substr(start,len)substring(s,end) toLowerCase()toUpperCase() toString() valueof(),2007-1-9,第八章 JavaScript事件和对象,61,4.22 Ja

30、vaScript的内置对象,生成标记的方法 anchor(name) blink() fixed() link(url) strike() sub() sup() String对象的示例见HTML8_4.html。,2007-1-9,第八章 JavaScript事件和对象,62,4.22 JavaScript的内置对象,Math对象 常见方法 abs(x) min(x) ceil(x) pow(x,y) cos(x) round(x) sin(x) sqrt(x) exp(x) tan(x) floor(x) log(x) max(x),2007-1-9,第八章 JavaScript事件和对象

31、,63,4.22 JavaScript的内置对象,Date对象 常见的方法 getDate() getUTCDate() getDay() getUTCDay() getFullYear() getUTCFullYear() getHours() getUTCHours() getMilliseconds() getUTCMilliseconds() getMinutes() getUTCMinutes() getMonth() getUTCMonth() getSeconds() getUTCSeconds() getTime() getUTCTime() 例：显示本机的日期和时间。见HTM

32、L8_3.html。,2007-1-9,第八章 JavaScript事件和对象,64,4.23 浏览器对象,window,frames,history,navigator,location,event,document,screen,浏览器对象示意,2007-1-9,第八章 JavaScript事件和对象,65,4.23 浏览器的对象,window对象 表示显示文档的WEB浏览器的窗口，或窗口中显示文档的一个框架。处于对象层次的最顶端，它提供了处理navigator窗口的方法和属性 常见方法： open(url,WindowName,parameterlist):创建一个新窗口。 close(

33、):关闭一个窗口。 alert(text):警告窗口。 confirm(text):弹出确认域。 promt(text,Defaulttext):弹出提示框。 setTimeout(表达式，时间)定时设置。 clearTimeout(timer)：取消以前的设定。 setInterval(表达式，时间):设定一个时间间隔。,2007-1-9,第八章 JavaScript事件和对象,66,4.23 浏览器的对象,clearInterval(timer):取消时间间隔设定。 back():后退。 forward():前进。 home():返回主页。 stop():停止装载网页 属性 frame:帧

34、。 status:状态栏信息。 location:当前窗口URL信息。 history:历史。 defaultstatus:默认状态，它的值显示在窗口的状态栏中。 top:包括的是用以实现所有的下级窗口的窗口。 window.指的是当前窗口 self:引用当前窗口。 例:显示变化的时间.见HTML8_5.html.,2007-1-9,第八章 JavaScript事件和对象,67,4.23 浏览器对象,navigator对象 提供有关浏览器的信息 属性 appName:提供字符串形式的浏览器名称。 appVersion:反映浏览器的版本号。 appCodeName:浏览器的代码名称。 userA

35、gent:用户代理标识。 mineTypes:可以使用的mine类型信息。 plugins:可以使用的插件信息。 languages:语言设定。 platform:浏览器适用的平台名称。 例子见HTML8_6.html,HTML8_6_1.html,2007-1-9,第八章 JavaScript事件和对象,68,4.23 浏览器的对象,document对象 document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用 document对象的属性 frames：窗口中每个框架的对象的数组 parent：指明当前窗口或框架的父窗口 status：窗口状

36、态栏的信息 window：当前窗口 self：引用当前窗口,2007-1-9,第八章 JavaScript事件和对象,69,4.23 浏览器的对象,document对象中主要有三个对象:anchors、links、forms,此外all和images anchors anchors对象指的是 标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息. 例子见HTML8_4.html. links links对象指的是用 标记的连接一个超文本或超媒体的元素作为一个特定的URL. 属性有: Hash:如果URL包含#，该方法将返回该符号之后的内容. Host/hostname:

37、服务器的名字 href:当前载入页面的URL pathname:URL中主机名后的部分,2007-1-9,第八章 JavaScript事件和对象,70,Port:请求的端口 Protocol:URL中请求的协议 search:查询字符串,执行get请求的”?”后的内容 target:打开网页的窗口状况,document的常见方法 close() :关闭用 document.open() 方法打开的输出流，并显示选定的数据。 getElementById() :返回对拥有指定 id 的第一个对象的引用。 getElementsByName() :返回带有指定名称的对象集合。 getElement

38、sByTagName() :返回带有指定标签名的对象集合。 open() :打开一个流，以收集来自任何 document.write() 或 document.writeln() :方法的输出。 write(): 向文档写 HTML 表达式 或 JavaScript 代码。 writeln() :等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 例子见HTML8_9.html,HTML4_DoM.html,forms form对象是文档对象的一个元素，它含有多种格式的对象储存信息,可用来动态改变文档的行为。通过document.forms数组来使得在同一个页面上可以有多个相

39、同的窗体. 例子见HTML8_10.html. 例:编写一个表单中所有元素不能为空的程序.见HTML8_11.html.,2007-1-9,第八章 JavaScript事件和对象,73,4.23 浏览器的对象,location对象 提供了与当前打开的URL一起工作的方法和属性. location的常见方法 reload():从Web服务器再次载入当前显示的页面. replace():指定URL代替历史列表中的当前URL. location常见属性 Hash:如果URL包含#，该方法将返回该符号之后的内容. host:服务器的名字 href:当前载入页面的URL pathname:URL中主机名后的部分 Port:请求的端口 Protocol:URL中请求的协议 search:查询字符串,执行get请求的”?”后的内容 例子见HTML8_7.html.,2007-1-9,第八章 JavaScript事件和对象,74,4.23 浏览器的对象,history对象 history对象提供了与历史清单有关的信息,利用它实现导航 常见方法： back(); forward(); go(int),2007-1-