网站设计参考书javascript入门

1、网站设计网站设计主讲人：刘轶群主讲人：刘轶群网站设计网站设计Javascript 入门Yiqun,Liu网站设计网站设计 开发工具建议 如何学习JS 基础数据类型 数组 函数 对象 异常处理课课程内内容网站设计网站设计 Firefox + firebug开发开发工具建议议网站设计网站设计 IE + 开发人员工具开发开发工具建议议网站设计网站设计 标准的Javascript参考手册 学习JS开发框架的源代码 ExtJs , JQuery, prototype , 学习JS开源控件 JQuery 控件等 学会搜索 判断关键字 读懂英文文档 思考和总结 这样做有什么好处？如何学习学习JS网站设计网站

2、设计 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 = 0 xFF 科学计数法 1e1, 2e+3, 2e-3 非特殊要求，请使用

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 v

4、ar 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没有字

5、符类型 单引号和双引号 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基础数础数据类类型网站设计网站设计 布尔

6、值 比较操作符基础数础数据类类型=比较前被比较对象将转为相同数据类型。如果被比较对象值相等，返回true=如果被比较对象值和类型都相等，返回true!=比较前被比较对象将转为相同数据类型如果被比较对象值不相等，返回true!=如果被比较对象值或类型不相等，返回true网站设计网站设计 布尔值基础数础数据类类型var b4 = 2!=2; / falsevar b41 = 2=2; / true var b42 = 2!=2; / truevar b43 = 2=2; / false网站设计网站设计 null, undefined基础数础数据类类型var nl1 = null;alert(typ

7、eof nl1); / objectalert(nl1); / nullvar nl2 = 1 + null; alert(nl2); / 1alert nl3 = 1*null;alert(nl3); /0 var u1 = ;alert(typeof u1.nonexistent); / undefinedalert(u1.nonexistent); / undefined var u2 = 1 + undefined; alert(u2); / NaN var u3 = 1 * undefined;alert(u3); / NaN网站设计网站设计数组数组var a = 1,2,3;ale

8、rt (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; ale

9、rt(typeof a3); / string alert(a30); / oalert(typeof a30); / stringalert(a31); / n网站设计网站设计 JS的函数非常强大，几乎所有的工作，都是由函数完成的。 参数 如果调用时的参数个数 函数声明的参数个数，未赋值的参数将被设置为undefined arguments代表调用时全部参数的数组函数数例：使用arguments实现动态参数函数:function sumAll() var result = 0; for(var i=0,length=arguments.length;i 28网站设计网站设计 可以使用var变

10、量指向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(

11、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) retur

12、n 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();网站设计网站设计

13、 变量作用域 在函数内部定义的变量，在整个函数范围可见，在函数外不可见 在代码块中定义的变量，在代码块外部可见（上升到函数级别） 函数在被声明时就创建了他们的变量作用域(运行环境)，而非运行时函数数网站设计网站设计 变量作用域函数数var r5 = global“;function func1() alert(r5); / undefinded var r5 = local; alert(r5); / “local”func1();网站设计网站设计 变量作用域函数数网站设计网站设计 变量作用域函数数网站设计网站设计var a = 1;var func = null;var func2 = fu

14、nction() 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实例 基本数据类型、对象、

15、数组、函数 允许动态创建对象的属性 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 Barsikcat.

16、talk() Im Barsik. Mrrr, miaow!网站设计网站设计 构造函数对对象function Cat(/*String*/ name) = name; this.talk = function() return Im ++. Mrrr, *!; var cat2 = Cat(“Rose);typeof cat2 TypeError: cat2 has no “Rose网站设计网站设计 构造函数 对象被创建时，构造函数被隐含的赋值给对象的constructor属

17、性对对象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 truecat instanceof Object trueo instanceof Object trueo 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, y : 2对对