JavaScript脚本语言基础.ppt
第第4章章 JavaScript脚本语言基础脚本语言基础 4.1 4.1 JavaScriptJavaScript简介简介4.2 4.2 JavaScriptJavaScript语法基础语法基础4.3 4.3 JavaScriptJavaScript中的内置对象和函数中的内置对象和函数 4.4 4.4 JavaScriptJavaScript范例范例4.1 JavaScript简介简介NetscapeNetscape公司为了进一步扩充它的浏览器的公司为了进一步扩充它的浏览器的功能，开发了一种可以嵌入在功能，开发了一种可以嵌入在WebWeb主页中的编主页中的编程语言。在早期这种语言叫做程语言。在早期这种语言叫做LiveScriptLiveScript，后来为了利用后来为了利用SunSun公司开发的公司开发的JavaJava语言的功能语言的功能并借用它的流行性，把它改名为并借用它的流行性，把它改名为JavaScriptJavaScript。本章首页本章首页4.1 JavaScript简介简介4.1.1 4.1.1 JavaScriptJavaScript的特点的特点1 1JavaScriptJavaScript是一种脚本语言是一种脚本语言2 2JavaScriptJavaScript是基于对象的语言是基于对象的语言3 3JavaScriptJavaScript是事件驱动的语言是事件驱动的语言4 4JavaScriptJavaScript是安全的语言是安全的语言5 5JavaScriptJavaScript是与平台无关的语言是与平台无关的语言4.1 JavaScript简介简介4.1.2 4.1.2 JavaScriptJavaScript与其他语言的比较与其他语言的比较1 1JavaScriptJavaScript与与JavaJava2 2JavaScriptJavaScript与与VBScript VBScript 3 3JavaScriptJavaScript与与LiveWire LiveWire 4 4JavaScriptJavaScript与与PerlPerl4.1 JavaScript简介简介4.1.3 JavaScript4.1.3 JavaScript与与HTMHTM为为了了运运用用JavaScriptJavaScript控控制制HTMLHTML页页面面上上的的对对象象，JavaScriptJavaScript的的代代码码必必须须与与HTMLHTML代代码码结结合合在在一一起起。将将JavaScriptJavaScript嵌嵌入入HTMLHTML页页面面时时，必必须须使使用用SCRIPTSCRIPT标签，该标签使用形式如下：标签，该标签使用形式如下：/JavaScript代码代码标标签签 SCRIPT通通知知浏浏览览器器，有有脚脚本本嵌嵌入入到到标标签中。签中。4.2 JavaScript语法基础语法基础 JavaScript JavaScript是一种易学易用的脚本语言，是一种易学易用的脚本语言，目的是面向与用户动态交互的脚本开发，扩目的是面向与用户动态交互的脚本开发，扩展展HTMLHTML页面的功能，而不是开发大型复杂的页面的功能，而不是开发大型复杂的程序，所以相对而言，程序，所以相对而言，JavaScriptJavaScript的语法规的语法规则较少而且较为简单。但作为一门编程语言，则较少而且较为简单。但作为一门编程语言，它有自己的语法规则，自己的关键字、指令它有自己的语法规则，自己的关键字、指令和对象。和对象。4.2 JavaScript语法基础语法基础4.2.1 4.2.1 变量变量1 1JavaScriptJavaScript的数据类型的数据类型类型类型说明说明字符串类型字符串类型用引号引起的一串字符用引号引起的一串字符数值类型数值类型整数或者实数整数或者实数布尔类型布尔类型逻辑值，有真或假两种逻辑值，有真或假两种空类型空类型代表一个空值代表一个空值对象类型对象类型代表代表JavaScriptJavaScript中的一些对象中的一些对象4.2 JavaScript语法基础语法基础2 2变量的定义变量的定义JavaScriptJavaScript中采用弱类型变量，变量可以不中采用弱类型变量，变量可以不做声明和不做类型说明，而在使用或赋值时做声明和不做类型说明，而在使用或赋值时确定类型。但确定类型。但为了形成良好的编程风格，变为了形成良好的编程风格，变量应该采取先定义再使用的方法。量应该采取先定义再使用的方法。JavaScriptJavaScript中变量的定义用关键字中变量的定义用关键字varvar来实现。来实现。例如，定义一个名为例如，定义一个名为idid的变量：的变量：var id;本章首页本章首页4.2 JavaScript语法基础语法基础3 3变量的命名变量的命名变量的命名要遵循如下的规则：变量的命名要遵循如下的规则：（1 1）变量名不能与保留字冲突。）变量名不能与保留字冲突。（2 2）变量名必须以字母或者下划线（）变量名必须以字母或者下划线（_ _）开）开头，不能用数字或者其他非字母字符作为变量头，不能用数字或者其他非字母字符作为变量名开头。名开头。（3 3）变量名中不能包含空格。）变量名中不能包含空格。（4 4）JavaScriptJavaScript是区分大小写的，所以给变是区分大小写的，所以给变量命名时要考虑大小写的问题。量命名时要考虑大小写的问题。4.2 JavaScript语法基础语法基础4.2.2 4.2.2 表达式与运算符表达式与运算符按照运算符的功能可以分为：按照运算符的功能可以分为：算术运算符。算术运算符。位运算符。位运算符。逻辑运算符。逻辑运算符。比较运算符。比较运算符。赋值运算符。赋值运算符。其他运算符。其他运算符。4.2 JavaScript语法基础语法基础4.2.3 4.2.3 基本语句基本语句1 1条件语句条件语句（1 1）ifif语句格式：语句格式：if(表达式表达式)语句块语句块;（2 2）if-elseif-else语句语句 if(表达式表达式)语句块语句块1;else 语句块语句块2;4.2 JavaScript语法基础语法基础（3）switch语句语句switch(表达式表达式)case 值值1：语句：语句1;break;case 值值2：语句：语句2;break;case 值值n：语句语句n;break;default：语句语句;4.2 JavaScript语法基础语法基础2 2循环语句循环语句（1 1）forfor语句语句for(初始表达式；循环条件表达式；计数器表达式初始表达式；循环条件表达式；计数器表达式)语句块；语句块；（2 2）whilewhile语句语句while(循环条件表达式循环条件表达式)语句块；语句块；计数器表达式；计数器表达式；4.2 JavaScript语法基础语法基础（3 3）do-whiledo-while语句语句 do 语句块语句块;计数器表达式计数器表达式;while(while(循环条件表达式循环条件表达式)（4 4）labellabel语句语句 label:label:代码块；代码块；（5 5）breakbreak语句语句 break;break;或或break label;break label;（6 6）continuecontinue语句语句 continue;continue;或或continue label;continue label;4.2 JavaScript语法基础语法基础3 3其他语句其他语句（1 1）for-infor-in语句语句 for(变量变量 in 对象对象)代码块；代码块；（2 2）withwith语句语句 with(对象对象)代码块；代码块；（3 3）returnreturn语句语句（4 4）注释）注释 4.2 JavaScript语法基础语法基础4.2.4 4.2.4 函数函数JavaScriptJavaScript不区分函数和过程，它只有函数。不区分函数和过程，它只有函数。1 1函数的定义函数的定义 founction 函数名函数名(参数参数1,参数参数2.)代码块；代码块；2 2函函数数的的参参数数：在在函函数数定定义义时时确确定定参参数数，然然后后按按照确定的参数进行传递调用。照确定的参数进行传递调用。3 3函函数数返返回回值值：可可以以使使用用returnreturn语语句句返返回回常常量量、变量，也可以是表达式等。变量，也可以是表达式等。4.3 JavaScript的内置的内置对对象和函数象和函数 JavaScript JavaScript中的内置对象，包括数学中的内置对象，包括数学（MathMath）对象、字符串（对象、字符串（StringString）对象、日期对象、日期（DateDate）对象、时间（对象、时间（TimeTime）对象和数组对象和数组（ArrayArray）对象等。对象等。4.3 JavaScript的内置的内置对对象和函数象和函数4.3.1 4.3.1 MathMath对象对象MathMath对对象象不不需需要要用用newnew操操作作符符创创建建对对象象，而而是可以直接使用，所以又被称作是静态的对象。是可以直接使用，所以又被称作是静态的对象。调用方式为：调用方式为：Math.数学函数名数学函数名(参数表参数表)1 1MathMath对象的属性对象的属性2 2MathMath对象的方法对象的方法本章首页本章首页4.3 JavaScript的内置的内置对对象和函数象和函数4.3.2 4.3.2 StringString对象对象StringString中中的的函函数数不不能能直直接接使使用用类类名名StringString加加函函数数名名，而而是是要要创创建建StringString类类型型的的对对象象，在在对对象的后面加上函数名。象的后面加上函数名。1 1StringString对象的定义对象的定义 str1=hello;str2=new String(hello);2 2StringString对象的属性对象的属性3 3StringString对象的方法对象的方法 4.3 JavaScript的内置的内置对对象和函数象和函数4.3.3 4.3.3 DateDate对象对象JavaScriptJavaScript中中没没有有日日期期类类型型，DateDate对对象象中中不不仅包括日期，还包括时间。仅包括日期，还包括时间。1 1DateDate对象的定义对象的定义var var 对象名对象名=new Date(new Date(参数参数););2 2DateDate对象的方法对象的方法4.3 JavaScript的内置的内置对对象和函数象和函数4.3.4 4.3.4 ArrayArray对象对象数数组组是是一一系系列列元元素素的的有有序序集集合合，它它的的强强大大功功能能是是不不可可替替代代的的。在在JavaScriptJavaScript中中，可可以以使使用用ArrayArray数组对象来完成对数组的操作。数组对象来完成对数组的操作。1 1ArrayArray对象的定义对象的定义使用关键字使用关键字newnew来创建。来创建。2 2ArrayArray对象的属性对象的属性3 3ArrayArray对象的方法对象的方法4.3 JavaScript的内置的内置对对象和函数象和函数4.3.5 4.3.5 内置函数内置函数（1 1）escape()escape()：对字符串进行编码。对字符串进行编码。（2 2）unescapeunescape()()：对字符串进行解码。对字符串进行解码。（3 3）evaleval()()：将将字字符符串串转转换换为为实实际际代代表表的的语语句句或或运算。运算。（4 4）parseIntparseInt()()：将其他类型的数据转换成整数。将其他类型的数据转换成整数。（5 5）parseFloatparseFloat()()：将将其其他他类类型型的的数数据据转转换换成成浮浮点数。点数。（6 6）isNaNisNaN()()：判断一个表达式是否是数值。判断一个表达式是否是数值。4.3 JavaScript的内置的内置对对象和函数象和函数4.3.6 4.3.6 自定义对象自定义对象（1 1）通过对象初始化来创建，格式为：）通过对象初始化来创建，格式为：对对象象=属属性性1:属属性性值值1,属属性性2:属属性性值值2,.,属属性性n:属属性性值值n（2 2）通过定义对象的构造方法创建对象通过定义对象的构造方法创建对象 function 对象名对象名(属性属性1,属性属性2,.,属性属性n)this.属性属性1=属性值属性值1;this.属性属性2=属性值属性值2;.this.属性属性n=属性值属性值n;this.方法方法1=函数名函数名1;this.方法方法2=函数名函数名2;.this.方法方法n=函数名函数名n;本章首页本章首页4.4 JavaScript范例范例 导导航航栏栏在在网网页页上上起起着着举举足足轻轻重重的的作作用用。导导航航栏栏有有很很多多种种，目目录录式式导导航航栏栏是是非非常常常常用用也也非非常常有有魅魅力力的的一一种种导导航航栏栏，它它的的效效果果是是当当鼠鼠标标移移动动到到导导航航文文字字上上时时，下下面面会会自自动动出出现现链链接接的的菜菜单单。下下面面举举例例说说明明如何使用如何使用JavaScriptJavaScript脚本编写目录式导航栏。脚本编写目录式导航栏。具体代码见具体代码见P111P111，例例4-124-12。
