DHTML4-JavaScript核心

1、HandsOnJavaScript CoreHandsOn回顾回顾l什么是表单？表单有什么用？什么是表单？表单有什么用？l表单的常用属性？表单的常用属性？l说出说出4个常用的表单元素及其常用属性？个常用的表单元素及其常用属性？l说出说出4个常用的表单元素及其常用属性？个常用的表单元素及其常用属性？l说出其余常用的表单元素及其常用属性？说出其余常用的表单元素及其常用属性？l框架及其常用属性？框架及其常用属性？l可以在可以在HTML中加入哪些多媒体？如何加入？中加入哪些多媒体？如何加入？l说出说出display与与visibility的异同点？的异同点？HandsOn目标目标l理解什么是理解什么是

2、JavaScriptl理解理解JavaScript的语法基础的语法基础l了解了解JavaScript核心核心l熟悉熟悉JavaScript常用函数及类常用函数及类HandsOn澄清误解澄清误解lJavaScript是是Java的变种吗？的变种吗？ JavaScript确实受到了确实受到了Java的启发，但是与的启发，但是与Java本质上是不同的本质上是不同的两者的关系类似雷锋与雷峰塔的关系两者的关系类似雷锋与雷峰塔的关系lJavaScript简单吗？简单吗？很多人认为很多人认为JavaScript是一种简单的脚本语言是一种简单的脚本语言而非程序设计语言而非程序设计语言实际上，实际上，JavaS

3、cript是一种具有丰富功能的程是一种具有丰富功能的程序设计语言，其在执行复杂的任务将会变得非序设计语言，其在执行复杂的任务将会变得非常复杂常复杂HandsOn什么是什么是JavaScriptlJavaScriptJavaScript是一种具有是一种具有面向对象能力的，面向对象能力的，解释型解释型的程序设计语言。在句法结构上与的程序设计语言。在句法结构上与JavaJava相似。相似。l是一种松散类型的语言，即变量不必有一是一种松散类型的语言，即变量不必有一个明确的类型。个明确的类型。l本名本名LiveScriptLiveScript，由，由SunSun和和NetscapeNetscape开发，

4、开发，之所以叫之所以叫JavaScriptJavaScript，是，是当时网景为了营当时网景为了营销考虑与销考虑与SunSun公司达成协议的结果，后来公司达成协议的结果，后来ECMAECMA对其进行了标准化，之后的官方名称对其进行了标准化，之后的官方名称为为ECMAScriptECMAScript。HandsOnJavaScript版本版本HandsOnJavaScript用途用途lJavaScript应用应用客户端客户端JavaScript当把一个当把一个JavaScript解释器嵌入到解释器嵌入到Web浏览器当中浏览器当中这是这是JavaScript应用最为广泛的一个领域应用最为广泛的一个

5、领域服务器端服务器端JavaScript嵌入到嵌入到Web Server，比如微软的，比如微软的IIS嵌入到其他应用嵌入到其他应用可以嵌入到可以嵌入到C#语言中脚本化语言中脚本化C#脚本化脚本化Flash的的ActionScriptHandsOnJavaScript语法基础语法基础lJavaScript在语法上与在语法上与Java、C#语言是十语言是十分相似的：分相似的：两者都遵循两者都遵循C系语言的语法以及书写风格系语言的语法以及书写风格两者都支持面向对象两者都支持面向对象两者的标识符都两者的标识符都区分大小写区分大小写JavaScript拥有与拥有与C#大部分运算符大部分运算符拥有几乎相同

6、的拥有几乎相同的选择、分支、循环选择、分支、循环语句语句都支持异常以及其捕获都支持异常以及其捕获都支持正则表达式都支持正则表达式HandsOnl两者都遵循两者都遵循C系语言的语法以及书写风格，系语言的语法以及书写风格，这主要体现在：这主要体现在：使用成对的大括号划分作用域使用成对的大括号划分作用域注释方式支持注释方式支持行尾注释和块注释行尾注释和块注释标识符必须与字母标识符必须与字母_$开头，后面可以是数字字开头，后面可以是数字字母或母或$_支持转义字符支持转义字符有保留字和关键字有保留字和关键字HandsOn不同之处不同之处lJavaScript与与C#也有很多不同之处，而这也有很多不同之处

7、，而这正是我们本节课内容的重点：正是我们本节课内容的重点：JavaScript是一种是一种解释型解释型的的动态脚本动态脚本语言语言JavaScript是一种是一种弱类型弱类型的语言的语言JavaScript有一些额外的运算符有一些额外的运算符JavaScript有函数有函数JavaScript通过通过原型原型方式实现面向对象方式实现面向对象JavaScript中的数组及常用类中的数组及常用类HandsOn解释执行解释执行lJavaScript是一种脚本语言，这意味着：是一种脚本语言，这意味着：它是解释执行的，不需要编译它是解释执行的，不需要编译编程速度快，且脚本文件的大小明显小于同类编程速度快

8、，且脚本文件的大小明显小于同类C程序文件程序文件以效率为代价，运行速度与静态编译型语言相以效率为代价，运行速度与静态编译型语言相比要慢得多，而且占用更多的内存比要慢得多，而且占用更多的内存通常十分灵活，同其它语言编写的程序组件之通常十分灵活，同其它语言编写的程序组件之间通信功能很强大间通信功能很强大 HandsOn弱类型弱类型lJavaScript是一种弱类型的语言，这意味是一种弱类型的语言，这意味着：着：变量的类型可以随需要任意转换，并且通常是变量的类型可以随需要任意转换，并且通常是自动的自动的变量可以不需要声明类型，在运行时会自动确变量可以不需要声明类型，在运行时会自动确定变量的类型定变量

9、的类型HandsOn变量声明变量声明l在在JavaScript中，要使用一个变量之前，要中，要使用一个变量之前，要先声明它：先声明它：var i ; var sum;var i , sum;for( var i = 0; i 10; i+) /doing something.如果没有声明一个变量就使用它，如果没有声明一个变量就使用它，JavaScript将隐将隐式声明其为全局变量式声明其为全局变量HandsOnJavascript数据类型数据类型lJavascript支持以下数据类型：支持以下数据类型：基本数据类型：基本数据类型：数字数字 所有数字都是由所有数字都是由浮点数浮点数类型表示的类型

10、表示的当一个算术运算产生一个未定义的结果当一个算术运算产生一个未定义的结果(如如0/0)，则，则会返回一个非数字的特殊值，会返回一个非数字的特殊值，NaN，有专门的函数，有专门的函数isNaN()来检测这个值来检测这个值字符串字符串无无char类型，由类型，由(或或“)扩起来的扩起来的Unicode字符序列字符序列字符串的字符串的length属性表示字符串的长度属性表示字符串的长度支持支持substring()、charAt()、indexOf()等方法，但等方法，但没有没有trim()方法方法HandsOn基本数据类型基本数据类型布尔型值布尔型值true | falsenull代表”无对象“

11、的值undefined使用一个并未声明的变量使用一个并未声明的变量使用一个已经声明但还未赋值的变量使用一个已经声明但还未赋值的变量使用一个不存在的对象属性使用一个不存在的对象属性上述这三种情况会返回一个上述这三种情况会返回一个undefined值值l可以使用typeof 运算符返回描述变量类型的字符串HandsOn函数函数引用数据类型：引用数据类型：函数函数类似于类似于C#中的方法，使用中的方法，使用function关键字定义关键字定义函数，函数可以有形式参数，但是这些函数，函数可以有形式参数，但是这些形式参数形式参数不能指定类型不能指定类型function square(x) return

12、x*x; 等价于等价于var square = function(x) return x*x; JavaScript不会检查传入参数的个数，不会检查传入参数的个数，参数多的参数多的时候多余的参数会被忽略，参数不够的时候少的时候多余的参数会被忽略，参数不够的时候少的参数会被赋予参数会被赋予undefinedHandsOn数组数组数组数组有编号值的有序集合有编号值的有序集合var a = new Array(); 等价于等价于 var a = ;var b = 1,2,3,4,5,6;JavaScript中的数组可以有任意个数的元素中的数组可以有任意个数的元素，可以在任意时刻改变元素个数，可以在任

13、意时刻改变元素个数var a = new Array(10); a10 = 10; atom = 15; a-1.24 = 5;JavaScript中的数组中中的数组中可以存放不同类型的可以存放不同类型的元素元素，并且是稀疏的，这意味着下标可以不，并且是稀疏的，这意味着下标可以不连续连续HandsOn对象对象对象对象已命名值的无序集合已命名值的无序集合var empty = var homer = name: 张三张三, age: 20 等价于等价于 var homer = new Object(); = 张三张三; homer.age = 20;通过通过homer.na

14、me可以访问属性可以访问属性nameHandsOn包装类包装类l三种基本数据类型分别对应有一个包装类：三种基本数据类型分别对应有一个包装类：基本数据类型基本数据类型包装类包装类数字数字Number字符串字符串String布尔布尔Boolean当一个基本数据类型调用一个方法时，这个时候基当一个基本数据类型调用一个方法时，这个时候基本数据类型会自动装箱成对应的包装类对象，然后本数据类型会自动装箱成对应的包装类对象，然后调用对象的方法。调用对象的方法。HandsOn基本类型转换基本类型转换字符串字符串str数字数字num布尔布尔bflagstr 0;Number(str);num.toString(

15、);String(num);num+”;Boolean(num);!num;Number(bflag);bflag-0;Boolean(str);!str;bflag.toString();String(bflag);bflag+”;HandsOn数据类型之间的转换关系数据类型之间的转换关系值值字符串字符串数字数字布尔布尔未定义的值未定义的值“undefined”NaNfalsenull“null”0false非空字符串非空字符串不变不变数值或数值或NaNtrue空字符串空字符串不变不变0false0“0”不变不变falseNaN“NaN”不变不变falsetrue“true”1不变不变fal

16、se“false”0不变不变非非0数字数字数字字符串值数字字符串值 不变不变trueHandsOn额外的运算符额外的运算符l除了除了C#当中的运算符外，当中的运算符外，JavaScript还包还包括：括：相等运算符相等运算符(=)与等同运算符与等同运算符(=)= 表示值相同表示值相同“1” = true=表示值相同，并且类型也相同表示值相同，并且类型也相同注意：注意：null与与undefined相等但不等同相等但不等同对象的比较是地址的比较，只有地址相等才相等对象的比较是地址的比较，只有地址相等才相等HandsOnJavaScript实现面向对象实现面向对象lJavaScript目前版本不支

17、持真正的类，但是目前版本不支持真正的类，但是JavaScript中可以定义伪类中可以定义伪类(pseudo-class)来实来实现面向对象，做到这一点的就是现面向对象，做到这一点的就是构造函数和原型构造函数和原型对象对象。构造函数：设计来和构造函数：设计来和new运算符一起使用的函运算符一起使用的函数，此时该函数就与数，此时该函数就与C#、Java当中的构造方法当中的构造方法类似类似function Rectangle( w, h )this.width = w; /定义一个属性this.height = h; /定义一个方法this.area = function() return this

18、.width * this.height var rect1 = new Rectangle(3,5);var a = rect1.area(); HandsOn原型原型l上述方案有效的模拟了类，但它仍不是最优的，上述方案有效的模拟了类，但它仍不是最优的，原因在于大多数情况下，每个对象中的属性值可原因在于大多数情况下，每个对象中的属性值可能不同，但是方法一般是相同的：能不同，但是方法一般是相同的：在上面的例子中，在上面的例子中，Rectangle类中的每个对象类中的每个对象的的area()方法应当都是相同的方法应当都是相同的,但上述例子中写但上述例子中写法会导致每一个对象都包含一个自己的法会导

19、致每一个对象都包含一个自己的area(),导致内存空间的浪费以及效率的降低。导致内存空间的浪费以及效率的降低。因此，我们应当想到将方法和不变的属性放在因此，我们应当想到将方法和不变的属性放在一个位置，所有对象都共同拥有它，这样以来一个位置，所有对象都共同拥有它，这样以来既提高了效率，又节省了空间，那么在既提高了效率，又节省了空间，那么在JavaScript中，这个位置就叫做原型。中，这个位置就叫做原型。HandsOnprototypel原型是这样一种对象：每个原型是这样一种对象：每个JavaScript对象当对象当中都包含一个原型对象，每个对象都从其原型中都包含一个原型对象，每个对象都从其原型

20、对象中对象中继承继承方法和不变的属性。方法和不变的属性。对于任意对象对于任意对象Object，其原型对象就是，其原型对象就是Ototypel原型存在的意义：原型存在的意义：使用原型明显减少对象所需内存数量使用原型明显减少对象所需内存数量可以为已经存在的对象动态添加方法可以为已经存在的对象动态添加方法HandsOn改进改进Rectanglel此时，此时，Rectangle类就可以加以改进：类就可以加以改进：function Rectangle( w, h)this.width = w;this.height = h; /添加原型方法添加原型方法Rtoty

21、pe.area = function()return this.width * this.height;var rec = new Rectangle(); /创建一个对象创建一个对象var area = rec.area(); /调用对象方法调用对象方法HandsOn原型应用原型应用l通过原型不仅可以扩展自定义类，还可以通过原型不仅可以扩展自定义类，还可以扩展内建类型。扩展内建类型。前面提到，前面提到，String类型没有类型没有trim()方法，而此方法，而此方法在实际当中经常使用，我们可以扩展：方法在实际当中经常使用，我们可以扩展： Stotype.trim = fun

22、ction () return this.replace(/(s*)|(s*$)/g, ); 一般情况下要慎用扩展内建类型，这样就更一般情况下要慎用扩展内建类型，这样就更改了改了JavaScript核心核心不允许为不允许为Ototype添加属性和方法添加属性和方法HandsOn常用函数与类常用函数与类HandsOnl全局函数全局函数l全局对象全局对象ArrayDateMathRegExpHandsOn全局函数全局函数l全局函数全局函数可以直接使用可以直接使用函数名称函数名称说明说明encodeURI()decodeURI()转义某些字符串对转义某些字符串对URI编码编码将转义

23、后的字符串解码将转义后的字符串解码eval()计算参数中表达式的值，返回结果计算参数中表达式的值，返回结果isNaN()如果是如果是NaN，返回，返回trueparseInt()从字符串解析一个整数从字符串解析一个整数escape()unescape()用转移序列替换某些字符来编码用转移序列替换某些字符来编码编码编码(解码解码)成成Unicode格式格式HandsOnArraylArray类常用方法类常用方法 var arr = 1,2,3; 方法名称方法名称示例示例说明说明concat()arr.concat(4,5)给数组添加元素给数组添加元素join()arr.join(+)将数组元素使

24、用分隔符连接将数组元素使用分隔符连接成字符串成字符串pop()arr.pop()删除并返回最后一个元素删除并返回最后一个元素push()arr.push(4)添加到数组末尾并返回长度添加到数组末尾并返回长度reverse()arr.reverse()颠倒数组元素顺序颠倒数组元素顺序sort()arr.sort()数组排序数组排序HandsOnDatelDate类常用方法类常用方法 var date = new Date();方法名称方法名称方法说明方法说明getDate()返回一个月的第几天返回一个月的第几天getDay()返回一周的第几天返回一周的第几天getFullYear()返回返回4位

25、年份位年份getTime()返回返回Date()对象的毫秒数对象的毫秒数toString()本地时间日期字符串本地时间日期字符串toLocaleString()本地时间本地格式化日期字符串本地时间本地格式化日期字符串与与C#中的中的Date相似，相似， Date也可以根据毫秒数构建，或根也可以根据毫秒数构建，或根据年月日时分秒构建据年月日时分秒构建HandsOnMathlMath类常用方法类常用方法方法名称方法名称方法说明方法说明max() / min()参数可以为参数可以为0个或多个，最大个或多个，最大/最小值最小值random()0到到1之间随机数之间随机数ceil() / floor()

26、大于此数的最小整数大于此数的最小整数/小于此数的最大整数小于此数的最大整数round()四舍五入四舍五入sin() / cos()正正/余弦余弦Math还有以下常量：还有以下常量：Math.EMath.PIHandsOnRegExplRegExp是是JavaScript中的处理正则表达式中的处理正则表达式的语句对象，类似于的语句对象，类似于Java中的中的Pattern类，类，类似于类似于C#中的中的Match。var regexp = new RegExp(a+);等价于等价于 var regexp = / a+ / ; 其中位于其中位于“/”定界符之间的部分就是将要在目标定界符之间的部分就

27、是将要在目标对象中进行匹配的模式对象中进行匹配的模式 HandsOnRegExplRegExp类常用方法类常用方法方法名称方法名称方法说明方法说明test()如果匹配返回如果匹配返回trueexec()如果不匹配返回如果不匹配返回null, 如果匹配返回如果匹配返回一个数组，这个数组的第一个数组，这个数组的第0个元素就个元素就是匹配的文本是匹配的文本lRegExp类常用属性：类常用属性：global 是否支持全局匹配是否支持全局匹配ignoreCase 是否支持忽略大小写匹配是否支持忽略大小写匹配HandsOn常用正则常用正则aaaAAA.match(new RegExp(a+);aaaAAA

28、A.replace( /a/g , b);aaaAAA.search(/a+/);String类当中有类当中有3个方法支持使用正则表达式：个方法支持使用正则表达式：方法名称方法名称方法说明方法说明match()与与RegExp类的类的exec()相同相同replace()返回替换后的字符串返回替换后的字符串search()返回第一个配置的起始位置索引返回第一个配置的起始位置索引，如果不存在返回，如果不存在返回-1HandsOn常用正则常用正则l验证邮箱验证邮箱 /w-+(.w-+)*w-+(.w-+)+$/l验证手机验证手机 /0*(13|15)d9$/HandsOn总结（一）总结（一）lJavaScript是一种脚本语言，使用它可以创建客户端是一种脚本语言，使用它可以创建客户端脚本和服务器端脚本。脚本和服务器端脚本。l可以使用不同的方法将可以使用不同的方法将JavaScript语句插入到语句插入到HTML文文档中。档中。lJavaScript支持的基本数据类型有数字型、逻辑型或支持的基本数据类型有数字型、逻辑型或布尔型布尔型 、字符串型、字符串型 和空型。和空型。l JavaScript支持的运算符包括：算术运算符、比较运支持的运算符包括：算术运算符、比较运算符、逻辑运算符、字符串运算符和求值运算符。算符、逻辑运算符、字符串运算符和求值运算符。l数组用于存储具