DHTML4-JavaScript核心.ppt

JavaScript Core,回顾,什么是表单？表单有什么用？ 表单的常用属性？ 说出4个常用的表单元素及其常用属性？ 说出4个常用的表单元素及其常用属性？ 说出其余常用的表单元素及其常用属性？ 框架及其常用属性？ 可以在HTML中加入哪些多媒体？如何加入？ 说出display与visibility的异同点？,目标,理解什么是JavaScript 理解JavaScript的语法基础 了解JavaScript核心 熟悉JavaScript常用函数及类,澄清误解,JavaScript是Java的变种吗？ JavaScript确实受到了Java的启发，但是与Java本质上是不同的 两者的关系类似雷锋与雷峰塔的关系 JavaScript简单吗？ 很多人认为JavaScript是一种简单的脚本语言而非程序设计语言 实际上，JavaScript是一种具有丰富功能的程序设计语言，其在执行复杂的任务将会变得非常复杂,什么是JavaScript,JavaScript是一种具有面向对象能力的，解释型的程序设计语言。在句法结构上与Java相似。 是一种松散类型的语言，即变量不必有一个明确的类型。 本名LiveScript，由Sun和Netscape开发，之所以叫JavaScript，是当时网景为了营销考虑与Sun公司达成协议的结果，后来ECMA对其进行了标准化，之后的官方名称为ECMAScript。,JavaScript版本,JavaScript用途,JavaScript应用 客户端JavaScript 当把一个JavaScript解释器嵌入到Web浏览器当中这是JavaScript应用最为广泛的一个领域 服务器端JavaScript 嵌入到Web Server，比如微软的IIS 嵌入到其他应用 可以嵌入到C#语言中脚本化C# 脚本化Flash的ActionScript,JavaScript语法基础,JavaScript在语法上与Java、C#语言是十分相似的： 两者都遵循C系语言的语法以及书写风格 两者都支持面向对象 两者的标识符都区分大小写 JavaScript拥有与C#大部分运算符 拥有几乎相同的选择、分支、循环语句 都支持异常以及其捕获 都支持正则表达式,两者都遵循C系语言的语法以及书写风格，这主要体现在： 使用成对的大括号划分作用域 注释方式支持行尾注释和块注释 标识符必须与字母_$开头，后面可以是数字字母或$_ 支持转义字符 有保留字和关键字,不同之处,JavaScript与C#也有很多不同之处，而这正是我们本节课内容的重点： JavaScript是一种解释型的动态脚本语言 JavaScript是一种弱类型的语言 JavaScript有一些额外的运算符 JavaScript有函数 JavaScript通过原型方式实现面向对象 JavaScript中的数组及常用类,解释执行,JavaScript是一种脚本语言，这意味着： 它是解释执行的，不需要编译 编程速度快，且脚本文件的大小明显小于同类C程序文件 以效率为代价，运行速度与静态编译型语言相比要慢得多，而且占用更多的内存 通常十分灵活，同其它语言编写的程序组件之间通信功能很强大,弱类型,JavaScript是一种弱类型的语言，这意味着： 变量的类型可以随需要任意转换，并且通常是自动的 变量可以不需要声明类型，在运行时会自动确定变量的类型,变量声明,在JavaScript中，要使用一个变量之前，要先声明它： var i ; var sum; var i , sum; for( var i = 0; i 10; i+) /doing something. 如果没有声明一个变量就使用它，JavaScript将隐式声明其为全局变量,Javascript数据类型,Javascript支持以下数据类型： 基本数据类型： 数字 所有数字都是由浮点数类型表示的 当一个算术运算产生一个未定义的结果(如0/0)，则会返回一个非数字的特殊值，NaN，有专门的函数isNaN()来检测这个值 字符串 无char类型，由(或“)扩起来的Unicode字符序列 字符串的length属性表示字符串的长度 支持substring()、charAt()、indexOf()等方法，但没有trim()方法,基本数据类型,布尔型值 true | false null 代表”无对象“的值 undefined 使用一个并未声明的变量 使用一个已经声明但还未赋值的变量 使用一个不存在的对象属性 上述这三种情况会返回一个undefined值 可以使用typeof 运算符返回描述变量类型的字符串,函数,引用数据类型： 函数 类似于C#中的方法，使用function关键字定义函数，函数可以有形式参数，但是这些形式参数不能指定类型 function square(x) return x*x; 等价于 var square = function(x) return x*x; JavaScript不会检查传入参数的个数，参数多的时候多余的参数会被忽略，参数不够的时候少的参数会被赋予undefined,数组,数组有编号值的有序集合 var a = new Array(); 等价于 var a = ; var b = 1,2,3,4,5,6; JavaScript中的数组可以有任意个数的元素，可以在任意时刻改变元素个数 var a = new Array(10); a10 = 10; a“tom“ = 15; a-1.24 = 5; JavaScript中的数组中可以存放不同类型的元素，并且是稀疏的，这意味着下标可以不连续,对象,对象已命名值的无序集合 var empty = var homer = “name“: “张三“, “age“: 20 等价于 var homer = new Object(); = “张三“; homer.age = 20; 通过可以访问属性name,包装类,三种基本数据类型分别对应有一个包装类：,当一个基本数据类型调用一个方法时，这个时候基本数据类型会自动装箱成对应的包装类对象，然后调用对象的方法。,基本类型转换,数据类型之间的转换关系,额外的运算符,除了C#当中的运算符外，JavaScript还包括： 相等运算符(=)与等同运算符(=) = 表示值相同 “1” = true =表示值相同，并且类型也相同 注意： null与undefined相等但不等同 对象的比较是地址的比较，只有地址相等才相等,JavaScript实现面向对象,JavaScript目前版本不支持真正的类，但是JavaScript中可以定义伪类(pseudo-class)来实现面向对象，做到这一点的就是构造函数和原型对象。 构造函数：设计来和new运算符一起使用的函数，此时该函数就与C#、Java当中的构造方法类似 function Rectangle( w, h ) this.width = w; /定义一个属性 this.height = h; /定义一个方法 this.area = function() return this.width * this.height var rect1 = new Rectangle(3,5); var a = rect1.area();,原型,上述方案有效的模拟了类，但它仍不是最优的，原因在于大多数情况下，每个对象中的属性值可能不同，但是方法一般是相同的： 在上面的例子中，Rectangle类中的每个对象的area()方法应当都是相同的,但上述例子中写法会导致每一个对象都包含一个自己的area(),导致内存空间的浪费以及效率的降低。 因此，我们应当想到将方法和不变的属性放在一个位置，所有对象都共同拥有它，这样以来既提高了效率，又节省了空间，那么在JavaScript中，这个位置就叫做原型。,prototype,原型是这样一种对象：每个JavaScript对象当中都包含一个原型对象，每个对象都从其原型对象中继承方法和不变的属性。 对于任意对象Object，其原型对象就是Ototype 原型存在的意义： 使用原型明显减少对象所需内存数量 可以为已经存在的对象动态添加方法,改进Rectangle,此时，Rectangle类就可以加以改进： function Rectangle( w, h) this.width = w; this.height = h; /添加原型方法 Rtotype.area = function() return this.width * this.height; var rec = new Rectangle(); /创建一个对象 var area = rec.area(); /调用对象方法,原型应用,通过原型不仅可以扩展自定义类，还可以扩展内建类型。 前面提到，String类型没有trim()方法，而此方法在实际当中经常使用，我们可以扩展： Stotype.trim = function () return this.replace(/(s*)|(s*$)/g, ); 一般情况下要慎用扩展内建类型，这样就更改了JavaScript核心 不允许为Ototype添加属性和方法,常用函数与类,全局函数 全局对象 Array Date Math RegExp,全局函数,全局函数可以直接使用,Array,Array类常用方法 var arr = 1,2,3;,Date,Date类常用方法 var date = new Date();,与C#中的Date相似， Date也可以根据毫秒数构建，或根据年月日时分秒构建,Math,Math类常用方法,Math还有以下常量： Math.E Math.PI,RegExp,RegExp是JavaScript中的处理正则表达式的语句对象，类似于Java中的Pattern类，类似于C#中的Match。 var regexp = new RegExp(a+); 等价于 var regexp = / a+ / ; 其中位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式,RegExp,RegExp类常用方法,RegExp类常用属性： global 是否支持全局匹配 ignoreCase 是否支持忽略大小写匹配,常用正则,aaaAAA.match(new RegExp(a+); aaaAAAA.replace( /a/g , b); aaaAAA.search(/a+/);,String类当中有3个方法支持使用正则表达式：,常用正则,验证邮箱 /w-+(.w-+)*w-+(.w-+)+$/ 验证手机 /0*(13|15)d9$/,总结（一）,JavaScript是一种脚本语言，使用它可以创建客户端脚本和服务器端脚本。 可以使用不同的方法将JavaScript语句插入到HTML文档中。 JavaScript支持的基本数据类型有数字型、逻辑型或布尔型 、字符串型 和空型。 JavaScript支持的运算符包括：算术运算符、比较运算符、逻辑运算符、字符串运算符和求值运算符。 数组用于存储具有相同数据类型的一组值变量 条件语句包括：if .else和分支语句switch。 循环语句包括for循环、dowhile、while、break & continue语句。 JavaScript具有一些预定义函数，也可以创建自定义函数。,练习,1 做一个简单的脚本，例如：页面载入时提示问好。 2 利用脚本循环输出数组各个元素 3 字符串的处理，包括大小写的转化，字符串的截取，字符串的长度。 4 输出当前日