- 1. JavaScript（第一部分）五月培训计划第二讲主讲：移动应用软件部 — 赵兵
- 2. 章节内容JavaScript简介 JavaScript组成 ECMAScript基础 JavaScript的对象 BOM、DOM 事件 错误处理及调试 Ajax
- 3. JavaScript简介 JavaScript诞生于1995年。当时，它的主要目的是处理以前由服务器端语言（如Perl）负责的一些输入验证操作。在JavaScript问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator（网景公司开发的网络浏览器）希望通过JavaScript来解决这个问题。在人们普遍使用电话拔号上网的年代，能够在客户端完成一些基本的验证任务绝对是令人兴奋的。毕竟，拨号上网的速度之慢，导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验……
- 4. 自此以后，JavaScript逐渐成为市面上常见浏览器必备的一项特色功能。如今，JavaScript的用途早已不再局限于简单的数据验证，而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。今天的JavaScript已经成为一门功能全面的编程语言，能够处理复杂的计算和交互。作为Web的一个重要组成部分，JavaScript的重要性是不言而喻的，就连手机浏览器，甚至那些专为残障人士设计的浏览器等非常规浏览器都支持它……
- 5. 1997年，以JavaScript 1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）。该协会指定39号技术委员会（TC39，Technical Committee #39）负责“标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义” 。TC39由来自Netscape、Sun、微软、Borland及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了ECMA-262——定义一种名为ECMAScript（发音为“ek-ma-script”）的新脚本语言的标准（ECMAScript是ECMA制定的标准化脚本语言）。
- 6. JavaScript组成JavaScriptECMAScriptDOMBOM
- 7. ECMAScript仅仅是一个描述，定义了脚本语言的属性，方法和对象。就是对实现该标准规定的各个方面内容的语言的描述。 语法 类型 语句 关键字 保留字 运算符 对象
- 8. JavaScript实现了ECMAScript，Adobe ActionScript和OpenView ScriptEase同样也实现了ECMAScript。ECMAScriptJavaScriptScriptEaseActionScript
- 9. DOM（Document Object Model）文档对象模型，是HTML和XML的应用程序接口。
Sample Page Hello World!
htmlheadtitleSample PagebodypHello World! - 10. BOM（Browser Object Model）浏览器对象模型 弹出新的浏览器窗口。 移动、关闭浏览器窗口以及调整窗口大小。 提供Web浏览器详细信息的navigator对象。 提供装在到浏览器中页面的详细信息的location对象。 提供用户屏幕分辨率详细信息的screen对象。 对cookie的支持。 XMLHttpRequest和IE的ActiveXObject自定义对象。
- 11. ECMAScript基础JavaScript语法 变量、作用域和内存问题 引用类型
- 12. 变量变量的定义，使用var var test = "hello"; 变量名：必须以字母、下划线、或美元$符号开头 var test; var $test; var _$test; //一般用于私有变量
- 13. 语法变量是弱类型（可以用来保存任何类型的数据） var color = “red”; var num = 6; var flag = true; 区分大小写 var abc = 123; var ABC = "www"; 每句后面的分号可有可无 为了增强兼容性和易理解性，最好还是加入；
- 14. 变量的作用域变量是使用var定义的。如省略var操作符，就成了全局变量。 function test(){ hello = ‘hello’; //全局变量 var message = ‘hi’; //局部变量 } alert(message); //undefined alert(hello); //’hello’
- 15. 数据类型5种简单数据类型（基本数据类型） Undefined Null Boolean Number String 1种复杂数据类型 Object
- 16. 类型检测 typeof操作符可以对变量的数据类型进行类型检测。 typeof是一个操作符而不是函数。 “undefined” -- 值未定义 “boolean” -- 布尔值 “string” -- 字符串 “number” -- 数值 “object” -- 对象或null “function” -- 函数 var message = “some thing”; alert(typeof message); // “string” alert(typeof 2); // “number”
- 17. Undefined类型 Undefined类型只有一个值，即特殊的undefined。 变量未初始化时，这个变量值就是undefined。 var message; alert(message == underfined); //true
- 18. Null类型 Null类型也只有一个值，即Null。 var car = null; alert(typeof car); // “object” Null值表示一个空对象指针，这也正是typeof检测返回”object”的原因。
- 19. Boolean类型 该类型只有两个字面值：true 和 false。 true 不一定等于1，false 不一定等于0。 通过转型函数Boolean()转为对应的Boolean值。 var message = “Hello world!”; var messageAsBoolean = Boolean(message);
- 20. Boolean类型转换规则数据类型转为true转为falseBooleantruefalseString任何非空字符串“”（空字符串）Number任何非零数字值（包括无穷大）0和NaNObject任何对象nullUndefinedundefined
- 21. Number类型 使用IEEE754格式来表示整数和浮点数值。 最基本字面量格式是十进制整数。 var intNum = 55; //整数 八进制（以8为基数）（第一位必须是0，然后是数字序列（0~7），如果超出范围，0被忽略，后面数值当作十进制数值解析）。 var octalNum1 = 070; //八进制的56 var octalNum2 = 079; //无效，解析为79 十六进制（以16为基数）（前两位必须是0x，后跟十六进制数字（0~9&A~F（可以大小写）））。 var hexNum1 = 0xA; //十六进制的10 进行算术计算时，所有八进制十六进制数值最终都将被转换成十进制数值。
- 22. 浮点数值 所谓浮点数值，就是数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。 小数点前可以没有整数，但不推荐。 var floatNum1 = 0.1; var floatNum2 = .1; // 有效，不推荐 保存浮点数值需要的内存空间为整数值的两倍，因此ECMAScript会不失时机地将浮点数转换为整数。 var floatNum1 = 1.; // 小数点后面没有整数 ，解析为1 var floatNum2 = 10.0; // 整数，解析为10 对于极大或极小的数值，可以用科学计数法e表示法（e前面的数值乘以10的指数次幂）。 var floatNum1 = 3.125e7; // 等于31250000，3.125乘以10的7次 方 var floatNum2 = 3e-7; // 等于0.0000003 浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。 0.1+0.2≠0.3=0.30000000000000004
- 23. 数值范围 由于内存限制，ECMAScript并不能保存世界上所有的数值。 最小值：Number.MIN_VALUE（大多数浏览器中，这个值=5e-324）。 最大值：Number.MAX_VALUE（大多数浏览器中，这个值=1.7976931348623157e+308）。 如果超出JavaScript数值范围，将被自动转换成特殊的Infinity值。负数转为-Infinity（负无穷），正数转为Infinity（正无穷）。 正负无穷值不是能够参与计算的数值，因此无法继续参与下一次的计算。 可以使用isFinite()函数验证某些值是否超出表示范围。
- 24. NaNNaN，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值却未返回数值的情况（这样就不会抛出错误了）。 例如：在其他编程语言中，任何数值除以0都会导致错误，从而停止代码的执行。但在ECMAScript中，任何数值除以0会返回NaN，从而不会影响其他代码的执行。 任何涉及NaN的操作（例如NaN/10）都会返回NaN。 NaN与任何值都不相等，包括NaN本身。 alert(NaN == NaN); // false ECMAScript通过isNaN()函数确定参数是否“不是数值”。 alert(isNaN(NaN)); // true alert(isNaN(10)); // false alert(isNaN(“blue”)); // true
- 25. String类型String类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。 字符串可以由双引号（””）或（’’）表示。 var firstName = “zhao”; var lastName = ‘bing’; 任何字符串的长度都可以通过访问其length属性取得。 var text = “This is a letter”; alert(text.length); // 输出16
- 26. 字符字面量String 数据类型包含一些特殊的字符字面量，也叫转义序列，用于表示非打印字符，或者具有其他用途的字符。 字符字面量含义\n换行\t制表\b空格\r回车\f进纸\\斜杠\’单引号（’）。例如：’He said, \’hey.\’’\”双引号（”）。例如：’He said, \”hey.\”’\xnn以十六进制代码nn表示的一个字符（其中n为0~F）。例如：\x41表示”A”\unnnn以十六进制代码nnnn表示的一个Unicode字符（其中n为0~F）。例如：\u03a3表示希腊字符Σ（sigma）
- 27. 字符串的特点ECMAScript中的字符串是不可变的，字符串一旦创建，它们的值就不能改变。 var lang = “Java”; lang = lang + “Script”; 1.创建一个能容纳10个字符的新字符串。 2.在这个字符串中填充”Java”和”Script”。 3.销毁原来的字符串”Java”和”Script”。
- 28. 转换为字符串1.使用几乎每个值都有的toString()方法（null和undefined除外）。 var age = 11; var ageAsString = age.toString(); // 字符串”11” var found = true; var foundAsString = found.toStirng(); // 字符串”true" toString()方法可以传递一个参数：输出数值的基数。 var num = 10; alert(num.toString()); // “10” alert(num.toString(2)); // “1010” alert(num.toString(8)); // “12” alert(num.toString(10)); // “10” alert(num.toString(16)); // “a”
- 29. 转换为字符串2.使用转型函数String()。 这个函数能将任何类型的值转换为字符串。 String()函数遵循下列转换规则： 1.如果值有toString()方法，则调用该方法（没有参数）并返回相应的结果。 2.如果值是null，则返回”null”。 3.如果值是undefined，则返回”undefined”。
- 30. Object类型ECMAScript中的对象就是一组数据和功能的集合。 var o = new Object(); var o = new Object; // 有效，不推荐省略圆括号 ECMAScript中，（就像java.lang.Object对象一样）Object类型是所有它的实例的基础。
- 31. Object类型Object所具有任何属性和方法同样存在于更具体的对象中。 constructor – 构造函数，保存着用于创建当前对象的函数。 hasOwnProperty(propertyName) – 用于检查给定的属性在当前对象实例中是否存在。 isPrototypeOf(object) – 用于检查传入的对象是否是另一个对象的原型。 propertyIsEnumerable(propertyName) – 用于检查给定的属性是否能够使用for-in语句来枚举。 toString() – 返回对象的字符串表示。 valueOf() – 返回对象的字符串、数值或布尔值表示，通常与toString()方法的返回值相同。
- 32. 函数函数使用function关键字来声明，后跟一组参数以及函数体。 function functionName(arg0, arg1,…,argN){ statements } 函数在定义时不必指定是否返回值。 位于return语句之后的任何代码不会执行。 function sum(num1, num2){ return num1 + num2; alert(“Hello world”); // 代码不会执行 }
- 33. 理解参数函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。 函数体内可以通过arguments对象来访问参数数组，从而获取传递给函数的每一个参数。 function sayHi(){ alert(“Hello ” + arguments[0] + arguments[1]); } sayHi(“xxx”, “how are you today?”); function howManyArgs(){ alert(arguments.length); } howManyArgs(“string”, 45); // 22 howManyArgs(); // 0
- 34. 没有重载函数不能像传统意义上那样实现重载。 function fun(num){ return num + 100; } function fun(num){ return num + 200; } var result = fun(100); alert(result); // 300
- 35. 基本类型和引用类型的值变量可能包含两种不同类型的值：基本类型&引用类型。 基本类型值是那些保存在栈内存中的简单数据段。 引用类型值是保存在堆内存中的对象。11 （Number类型）true （Boolean类型）null （Null类型） （Object类型）“hello” （String类型）undefined （Undefined类型）ObjectObjectObject
- 36. 没有块级作用域在其他类C的语言中，由花括号封闭的代码块都有自己的作用域。 if(true){ var color = “blue”; } alert(color); // “blue” 在类C的语言中，color会在if语句执行完毕后被销毁。但是在JavaScript中，if语句中的变量声明会将变量添加到当前执行环境。 for(var i=0; i<10; i++){ doSomething(i); } alert(i); //10
- 37. 引用类型在ECMAScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。它常被称为类，但这种称呼并不妥当。引用类型的值（对象）是引用类型的一个实例。 尽管ECMAScript从技术上讲是一门面向对象的语言，但它并不具备传统的面向对象所支持的类和接口等基本结构。
- 38. 引用类型Object类型 Array类型 Date类型 RegExp类型 Function类型 基本包装类型 Boolean类型 Number类型 String类型 内置对象 Global对象 Math对象
- 39. Array类型ECMAScript数组的每一项可以保存任何类型的数据。 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。 创建数组两种方式。 使用Array构造函数。 var colors = new Array(); var colors = new Array(20); var colors = new Array(“red”, ”blue”, ”green”); 使用数组字面量表示法。 var colors = [“red”, ”blue”, ”green”]; var names = []; // 创建一个空数组 var values = [1,2,]; // 不建议，可能会创建一个包含2或3项的数组
- 40. Array对象常用方法方法描述concat()连接两个或更多的数组，并返回结果。join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()删除并返回数组的最后一个元素。push() 向数组的末尾添加一个或更多元素，并返回新的长度。reverse()颠倒数组中元素的顺序。shift()删除并返回数组的第一个元素。slice() 从某个已有的数组返回选定的元素。sort()对数组的元素进行排序。splice()删除元素，并向数组添加新元素。unshift()向数组的开头添加一个或更多元素，并返回新的长度。
- 41. RegExp类型创建一个正则表达式 第一种方法： var reg = /pattern/; 第二种方法： var reg = new RegExp('pattern');
- 42. 正则表达式的exec方法简介语法： reg.exec(str); 其中str为要执行正则表达式的目标字符串。 例如： 将会输出test，因为正则表达式reg会匹配str('testString')中的’test’子字符串，并且将其返回。
- 43. 数量:c{n}{1}表示一个的意思。 /c{1}/只能匹配一个c。 /c{2}/则会匹配两个连续的c。 以此类推, /c{n}/则会匹配n个连续的c。 reg = /c{1}/; str='china'; var result=str.match(reg);; 返回结果c
- 44. c{n}reg = /c{2}/; str='china'; var result=str.match(reg); 返回结果null，表示没有匹配成功。 reg = /c{2}/; str='ccVC???'; var result=str.match(reg); 返回结果cc
- 45. c{m,n}reg = /c{3,4}/; //str='ccVC???';//str.match(reg)=null; //str='cccTest'; //str.match(reg)=“ccc”; //str='ccccTest';//str.match(reg);=“cccc” //str='cccccTest';// str.match(reg);=“cccc”
- 46. c{n,}c{1,}表示1个以上的c。例如： reg = /c{1,}/; str='china'; str.match(reg);// c str='cccccTest'; str.match(reg); //ccccc再次说明了正则表达式会尽量多地匹配 reg = /c{2,}/; str=‘china'; str.match(reg); //null
- 47. *,+,?*,+,? *表示0次或者多次，等同于{0,}，即 c* 和c{0,} 是一个意思。 +表示一次或者多次，等同于{1,}，即 c+ 和c{1,} 是一个意思。 最后，?表示0次或者1次，等同于{0,1}，即 c? 和c{0,1} 是一个意思。
- 48. RegExp类型贪婪：先看整个字符串是否匹配。如果没有匹配，就去掉该字符串的最后一个字符，并再次尝试。如果还没有匹配，就再去掉一个字符，一直到发现一个匹配字符串或不剩任何字符为止。（以上讨论都是贪婪匹配） 懒惰：先看字符串的第一个字母，如果不匹配，就读入下一个字符，组成2个字符的字符串，如果还未匹配，就继续读入字符，知道发现匹配或这个字符串也没发现匹配为止。（与贪婪相反） 支配：只对整个字符串进行匹配。
- 49. 对比贪婪惰性支配描述????+零次或出现一次**?*+零次或多次++?++一次或多次出现{n}{n}?{n}+恰好n次出现{n,m}{n,m}?{n,m}+至少n次至多次出现{n,}{n,}?{n,}+至少n次出现
- 50. 一些常用匹配^表示只匹配字符串的开头。 与^相反，$则只匹配字符串结尾的字符 ‘.’会匹配字符串中除了换行符\n之外的所有字符 ‘.’也匹配字符’.’本身。 reg = /.+/; str='bbs.blueidea.com'; str.match(reg);
- 51. 或'|'二选一，正则表达式中的或，"|" reg = /^b|c.+/; str='cainiao'; str.match(reg); 匹配掉整个cainiao。 reg = /^b|c.+/; str='bbs.blueidea.com'; str.match(reg); 结果只有一个b，而不是整个字符串。因为上面正则表达式的意思是，匹配开头的b或 者是c.+。
- 52. 括号(),[]上例中修改成： reg = /^(b|c).+/; str='bbs.blueidea.com'; str.match(reg);//匹配bbs.blueidea.com [abc]表示a或者b或者c中的任意一个字符。 反字符集合[^abc]
- 53. 数字与非数字\d表示数字的意思，相反，\D表示非数字。例如： reg = /\d/; str='cainiao8'; execReg(reg,str); 返回的匹配结果为8，因为它是第一个数字字符。 reg = /\D/; str='cainiao8'; execReg(reg,str); 返回c，第一个非数字字符
- 54. 特殊符号\f 匹配换页符， \n 匹配换行符， \r 匹配回车， \t 匹配制表符， \v 匹配垂直制表符。 \s 匹配单个空格 注意小写
- 55. 单词字符\w表示单词字符，等同于字符集合[a-zA-Z0-9] 注意不包括中文
- 56. 正则表达式的修饰符全局匹配，修饰符g 不区分大小写，修饰符i 行首行尾，修饰符m // 匹配字符串中所有”at”的实例 var pattern1 = /at/g; // 匹配第一个”bat”或”cat”，不区分大小写 var pattern2 = /[bc]at/I; // 匹配所有以”at”结尾的3个字符的组合，不区分大小写 var pattern3 = /.at/gi;
- 57. 面向对象程序设计ECMAScript中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。 ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。” 严格来说，对象是一组没有特定顺序的值。 简单来说，就是一组名值对，其中值可以是数据或函数。
- 58. 创建对象var person = new Object(); // 创建一个名为person的对象 // 并为它添加三个属性（name、age和job） person.name = “zhangsan”; person.age = 29; person.job = “Software Engineer”; // 一个方法 person.sayName = function(){ alert(this.name); } person.sayName(); 早期的开发人员经常使用以上模式创建新对象。 以上方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。
- 59. 对象设计模式工厂模式 构造函数模式 原型模式 构造函数与原型组合模式 动态原型模式 寄生构造函数模式 稳妥构造函数模式
- 60. 原型PersonprototypePerson PrototypeconstructornameagejobsayNamePerson1Person2_proto__proto_“zhangsan”“Software”29(function)
- 61. 继承许多OO语言都支持两种继承方式：接口继承&实现继承。 接口继承只继承方法签名。 实现继承则继承实际的方法。 ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。
- 62. 实现继承原型链 借用构造函数 组合继承 原型式继承 寄生式继承 寄生组合式继承
- 63. 匿名函数匿名函数就是没有名字的函数，有时候也称为拉姆达（lambda）函数。 function funName(arg0, arg1, arg2){ // 函数体 } 等价于： var funName = function(){ // 匿名函数 // 函数体 } 区别：前者在代码执行以前被加载到作用域中，后者在代 码执行到那一行的时候才会有定义。 匿名函数是一种非常强大的工具，其用途非常之多。
- 64. 匿名函数的应用递归 闭包 模仿块级作用域 私有变量
- 65. 下一讲 “JavaScript第二部分&jQuery”
- 66. THANKS!>>谢谢观看
