Javascript基础教程.ppt

Javascript 基础教程,Nicholas Lin,开发工具建议 如何学习JS 基础数据类型 数组 函数 对象 异常处理,课程内容,Firefox + firebug,开发工具建议,IE8 + 开发人员工具,开发工具建议,标准的Javascript参考手册 /js/js_reference.asp 学习JS开发框架的源代码 ExtJs , JQuery, prototype , 学习JS开源控件 JQuery 控件等 学会搜索 判断关键字 读懂英文文档 思考和总结 这样做有什么好处？,如何学习JS,JS基础数据类型 number string boolean null undefined 非基础类型的JS实例，都是对象 object, function, array 判断JS数据类型： var value = 1; alert(typeof value); “number”,基础数据类型,数值 数值常量： NaN: not a number，唯一不能和自身进行比较的值 Infinity: 正无穷 - Infinity: 负无穷 数值表达 进制表示（八进制非规范） 255 = 0377 = 0xFF 科学计数法 1e1, 2e+3, 2e-3 非特殊要求，请使用十进制表示,基础数据类型,数值 数值范围 JS中的数值型数据包含整数和浮点数，但alert值都以双精度浮点型表示。 双精度浮点型表示的整数范围：-2E53至2E53； 双精度表示的浮点数范围：2.2250E-308至1.7976E308； Number对象的特殊常量 1) Number.MAX_VALUE 2) Number.MIN_VALUE 3) Number.POSITIVE_INFINITY 4) Number.NEGATIVE_INFINITY 5) Number.NaN,基础数据类型,数值 运算规则 任意数值和NaN做预算，结果都是NaN var x = 1/0; / x = Infinity var y = -1/0; / y = - Infinity var z = 0/0; / z = NaN var m = 0 + “1”; / m = 1 var n = 0 + “string”; / n = NaN,基础数据类型,数值 注意事项 在运算前应对值进行校验，判断是否是符合要求的数值 在运算后应对结果进行校验，判断是否返回了预期的结果 如果在数值计算中可能存在字符串，应事先转换，或采用下面的方式： var x = +(str1) - num1*num2,基础数据类型,字符串 JS没有字符类型 单引号和双引号 var s1 = “some string“; var s2 = some string; 和数值进行运算时，会自动转换为数值 NaN or Other,基础数据类型,字符串 常见操作 拼接 长字符拼接使用Array.join方法 截取 substr, substring 遍历 charAt 拆分 split 正则表达式 常用于值校验：邮编，电话，e-mail，日期,基础数据类型,布尔值 所有对象在if判断中都是true，除非它是: 空字符串 null undefined false NaN 0,基础数据类型,布尔值 比较操作符,基础数据类型,= 比较前被比较对象将转为相同数据类型。 如果被比较对象值相等，返回true = 如果被比较对象值和类型都相等，返回true,!= 比较前被比较对象将转为相同数据类型 如果被比较对象值不相等，返回true != 如果被比较对象值或类型不相等，返回true,布尔值,基础数据类型,var b4 = 2!=“2“; / false var b41 = 2=“2“; / true var b42 = 2!=“2“; / true var b43 = 2=“2“; / false,null, undefined,基础数据类型,var nl1 = null; alert(typeof nl1); / object alert(nl1); / null var nl2 = 1 + null; alert(nl2); / 1 alert nl3 = 1*null; alert(nl3); /0,var u1 = ; alert(typeof u1.nonexistent); / undefined alert(u1.nonexistent); / undefined var u2 = 1 + undefined; alert(u2); / NaN var u3 = 1 * undefined; alert(u3); / NaN,数组,var a = 1,2,3; alert (typeof a); alert (a); alert (a0); alert (a5); a5 = “some string“; alert (a); delete a2; alert (a); delete a5; alert (a); a.length = 2; alert(a);, “object“ 1,2,3 1 undefined 1,2,3,“some string“ 1,2, “some string“ 1,2, 1,2,字符串和数组 都有length属性 都可以用i方式访问 在一组同名复选框取选中值时，容易出错 先判断值的 类型是否object,数组,var a3 = “one“; alert(typeof a3); / string alert(a30); / o alert(typeof a30); / string alert(a31); / n,JS的函数非常强大，几乎所有的工作，都是由函数完成的。 参数 如果调用时的参数个数 函数声明的参数个数，未赋值的参数将被设置为undefined arguments代表调用时全部参数的数组,函数,例：使用arguments实现动态参数函数: function sumAll() var result = 0; for(var i=0,length=arguments.length;i 28,可以使用var变量指向Function对象 var func = function() return false; function t() return false; var func2 = t; 函数的构造函数: Function var func = new Function(“a,b“, “return a+b;“); 注意：尽量避免将函数或表达式以字符串方式编写； eval, setTimeout, setInterval,函数,匿名函数 可以在调用函数时，传递匿名函数作为参数 常见于回调函数 可以直接定义一个函数并马上执行它 常见于Jquery插件,函数,function execute(func) alert(func(); execute(function() return “hello, im anonymous function!“; ); (function(a,b) alert(a-b); )(5,3);,回调函数 将函数A作为函数B的参数，以便函数B可以调用函数A setTimeout, setInterval,函数,function execute(func) alert(func(); execute(function() return “hello, im anonymous function!“; ); var sum = function(a, b) return a + b; ; function calculate = function(a, b, func) return func(a, b); ; var result = calculate(4, 5, sum);,内部函数 可以在函数内部定义新的函数 在函数外部不可见 保持全局作用域干净，并实现封装和私有化,函数,function outerFunc() var innerFunc = function() alert(“innerFunction: do some work.“); alert(“outerFunc: do some work.“); innerFunc(); ,变量作用域 在函数内部定义的变量，在整个函数范围可见，在函数外不可见 在代码块中定义的变量，在代码块外部可见（上升到函数级别） 函数在被声明时就创建了他们的变量作用域(运行环境)，而非运行时,函数,变量作用域,函数,var r5 = “global“; function func1() alert(r5); / undefinded var r5 = “local“; alert(r5); / “local” func1();,变量作用域,函数,变量作用域,函数,var a = 1; var func = null; var func2 = function() var b = 4; func = function() alert(a + b); func2(); func(); / 结果是?,函数,变量作用域,非基本数据类型的JS实例都是对象 Array, Function, JSON, ActiveX, DOM, XMLHTTPRequest, 常见对象写法： var obj = name : “myObj”, getName : function() return ; ;,对象,对象的属性以键值对方式表示 数组使用索引方式存储元素 对象的属性可以赋值为任何JS实例 基本数据类型、对象、数组、函数 允许动态创建对象的属性 object.newProp =“value”; 思考: 如何动态删除对象的属性？ 传值方式为引用传递 this, p, this.func(),对象,构造函数(Constructor),对象,function Cat(/*String*/ name) = name; this.talk = function() return “Im “++“. Mrrr, miaow!“; var cat = new Cat(“Barsik“); typeof cat object “Barsik“ cat.talk() “Im Barsik. Mrrr, miaow!“,构造函数,对象,function Cat(/*String*/ name) = name; this.talk = function() return “Im “++“. Mrrr, miaow!“; var cat2 = Cat(“Barsik“); typeof cat2 undefined TypeError: cat2 has no properties “Barsik“,构造函数 对象被创建时，构造函数被隐含的赋值给对象的constructor属性,对象,var cat = new Cat(“Barsik“); var constr = cat.constructor; function Cat(name) var cat3 = cat.constructor(“Murzik“); cat3.talk() “Im Murzik. Mrrr, miaow!“,构造函数 instanceof: 判断是否由某个构造函数创建,对象,var cat = new Cat(“Barsik“); var o = ; cat instanceof Cat true cat instanceof Object true o instanceof Object true o instanceof Cat false,call, apply 允许对象暂时借用某个方法 可以用于实现对象的继承 var func = function(xOffset, yOffset) this.x += xOffset; this.y += yOffset; ; var obj = x : 1, y : 2; func.call(obj, 3, 4); / obj = x : 4, y : 6 func.apply(obj, -3, -4); / obj = x : 1