HTML5移动开发之路(26)——JavaScript回顾1_第1页
HTML5移动开发之路(26)——JavaScript回顾1_第2页
HTML5移动开发之路(26)——JavaScript回顾1_第3页
HTML5移动开发之路(26)——JavaScript回顾1_第4页
HTML5移动开发之路(26)——JavaScript回顾1_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、 很久没有怎么用过JavaScript了，感觉有点生疏，最近在看关于HTML5移动开发方面的资料，有一种直觉告诉我，JavaScript昨天、今天很重要，明天会更重要。现在好多基于JavaScript的框架给我们的开发带来了很大便利，但是要更好的使用这些工具，我们就必须对JavaScript有一个更高的认识，翻开以前的笔记，开始复习吧。一、JavaScript的作用1、数据验证2、操作网页（网页的动态效果）3、操作窗口4、ajax技术核心之一二、JavaScript的组成1、ECMAScript规范ECMAScript 规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字

2、、运算符、对象和语句等，它不属于任何浏览器。ECMAScript 标准定义了 JavaScript 脚本中最为核心的内容，是 JavaScript 脚本的“骨架”，有了“骨架”，就可以在它上面进行扩展，如 DOM（文档对象模型）和 BOM（浏览器对象模型）。历史：1995年12月升阳公司与网景通讯公司一起引入了JavaScript。1996年3月，网景通讯公司发表了支持JavaScript的网景导航者2.0。由于JavaScript作为网页的客户端脚本语言非常成功，微软于1996年8月引入了Internet Explorer3.0，这个软件支持一个“约”与JavaScript相容的JScrip

3、t。1996年11月网景通讯公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMA-262的第一个版本于1997年6月被Ecma组织采纳。ECMAScript是由ECMA-262标准化的脚本语言的名称。JavaScript和JScript与ECMAScript相容，但包含超出ECMAScript的功能。2、DOMDOM 是“ Document Object Model ”的缩写，简称“ 文件对象模型 ”，由W3C制定规范。DOM 定义了 JavaScript 操作 HTML 文档的接口，提供了访问 HTML 文档（如body、form、div、textarea等）的

4、途径以及操作方法。3、HTML DOMw3c dom是规范  出现的时间比较晚html dom不是规范(各个浏览器自己的)出现的时间比较早，w3c dom还没有出现(dom 0)很多浏览器还支持一下一些对象SelectOptionTableTableRowTableCell4、BOMBOM 是“ Browser Object Model ”的缩写，简称“ 浏览器对象模型 ”。BOM 定义了 JavaScript 操作浏览器的接口，提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法。遗憾的是，BOM 只是 ECMAScript 的一个扩展，没有任何相关标

5、准，W3C也没有对该部分作出规范，每个浏览器厂商都有自己的 BOM 实现，这可以说是 BOM 的软肋所在。通常情况下，浏览器特定的（即非 W3C 标准规定的）JavaScript 扩展都被看作 BOM 的一部分，主要包括：· 关闭、移动浏览器及调整浏览器窗口大小；· 弹出新的浏览器窗口；· 提供浏览器详细信息的定位对象；· 提供载入到浏览器窗口的文档详细信息的定位对象；· 提供用户屏幕分辨率详细信息的屏幕对象；· 提供对cookie的支持；· 加入ActiveXObject类扩展BOM，通过JavaScript实例化Acti

6、veX对象。三、JavaScript数据类型1、基本数据类型numberstringbooleannullundefined2、复杂数据类型ArrayFunctionMathDateNumberStringRegExpErrorAgumentsObject四、JavaScript中的事件处理机制1、绑定事件处理代码的方式（1）绑定到html标记上 <input type="button" onclick="f1()"/>（2）绑定到dom节点上 var obj = document.getElementById(id);&

7、#160;obj.onclick = f1; /绑定到dom节点之上html view plain copy print?1. <html>  2.     <!-  绑定事件处理代码   ->  3.     <head>  4.         <scr

8、ipt>    5.         <!-这部分代码保存到活动对象里面，script里面执行完还没有生成树->  6.             function f1()  7.          &

9、#160;      alert('hello');  8.               9.         </script>  10.     </head>   

10、  11.     <body style="font-size:30px;">  12.         <input id="b1" type="button" value="点我吧"/>  13.       

11、  <script>  14.             var obj = document.getElementById('b1');  15.             obj.onclick = f1; /绑

12、定到dom节点上  16.         /好处：可以将js代码和html代码分开  17.         </script>  18.     </body>  19. </html>   html代码与javascript代码分开存放javasc

13、ript view plain copy print?1. function f1()  2.     alert('hello');  3.    4. /window.onload表示当整个html文档全部解析完毕，  5. /也就是说整个dom树已经生成之后，浏览器会产生一个load事件  6. window.onload = function() 

14、60;7.     var obj = document.getElementById('b1');  8.     obj.onclick = f1;  9. ;  10. /load事件不是用户参与产生的，是浏览器自己产生的  11. /下面事件是用于触发的  12. /click  blur  mouseo

15、ver submit change  html view plain copy print?1. <html>  2.     <!-  绑定事件处理代码   ->  3.     <head>  4.         &l

16、t;script src="myjs2.js"></script>  5.     </head>     6.     <body style="font-size:30px;">  7.         <input id=&q

17、uot;b1" type="button" value="点我吧"/>  8.     </body>  9. </html>   这种绑定方式的优点是：可以js代码与html代码分离，方便代码的维护但是这种方式的缺点是：不方便传参，需要使用匿名函数实现参数的传递javascript view plain copy print?1. /如果想传参数可以写一个

18、匿名函数  2.   3. function f1(info)  4.     alert('hello'+info);  5.    6. /window.onload表示当整个html文档全部解析完毕，  7. /也就是说整个dom树已经生成之后，浏览器会产生一个load事件  8. window.onload = function()  

19、;9.     var obj = document.getElementById('b1');  10.     obj.onclick = function()  /匿名函数  11.         f1('zs');  /传参数  12.  

20、;     13. ;  14. /load事件不是用户参与产生的，是浏览器自己产生的  15. /下面事件是用于触发的  16. /click  blur  mouseover submit change  （3）使用每个浏览器自己的绑定方式建议少用，因为浏览器兼容性问题2、事件对象（1）如何获得事件对象点击按钮>产生事件对象>找到事件源IE:直接使用eventfirefox:需要在方法当中添

21、加event参数如果要同时兼容ie,firefox只需要在方法当中添加event参数（2）事件对象的作用clientX,clientY获得鼠标点击的坐标html view plain copy print?1. <html>  2.     <head>  3.         <script>  4.     

22、        /只能在IE上运行  5.             function f1() /输出用户点击时鼠标的坐标  6.             /window省略不写  7.  

23、               alert(event.clientX + ' ' + event.clientY);  8.               9.      &#

24、160;      /在firefox上面运行,IE也支持  10.             function f2(event)  11.                 alert(event.client

25、X + ' ' + event.clientY);  12.               13.         </script>  14.     </head>  15.  

26、   <body style="font-size:30px;font-style:italic;">  16.         <a href="javascript:;" onclick="f1();">only ie not firefox</a><br/><br/> &#

27、160;17.         <a href="javascript:;" onclick="f2(event);">ie and firefox</a>  18.     </body>  19. </html>   找到事件源（产生事件的那个对象）ie: event.srcE

28、lementfirefox: event.targethtml view plain copy print?1. <html>  2.     <head>  3.         <script>  4.             /

29、只能在火狐上运行  5.             function f3(e)  6.                 /通过事件对象找到事件源  7.         

30、        var obj = e.target; /obj就是那个链接<a>  8.                 alert(obj.innerHTML);  9.        

31、0;      10.             /只能在IE上面运行  11.             function f4(e)  12.          

32、;       var obj = e.srcElement;  13.                 alert(obj.innerHTML);  14.            

33、0;  15.             /可以在IE和火狐上面运行  16.             function f5(e)  17.             /j

34、s当中任意数据类型都可以转换成true或者false  18.                 var obj = e.target | e.srcElement;  19.               

35、60; alert(obj.innerHTML);   20.               21.         </script>  22.     </head>  23.     <

36、body style="font-size:30px;font-style:italic;">  24.         <a href="javascript:;" onclick="f5(event);  25.         ">get the first

37、0;resorce</a><br/><br/>  26.         <a href="javascript:;" onclick="f5(event);  27.         ">get the second resorce</a>

38、0; 28.     </body>  29. </html>   3、事件冒泡当一个事件产生后，浏览器会在该事件的节点上查找有没有相应的事件处理代码，如果有则浏览器调用相应的事件处理代码来处理，处理完成后，该事件会继续向上抛给父节点继续处理如果没有，也会将事件继续向上抛给父节点继续处理html view plain copy print?1. <html>  2.    

39、0;<head>  3.         <script>  4.             function clickA()  5.               &

40、#160; alert('你点击了连接');  6.               7.             function clickDiv()  8.         

41、0;       alert('你点击了Div');  9.               10.         </script>  11.         &

42、lt;style>  12.             #d1  13.                 width:200px;  14.          

43、60;      height:200px;  15.                 background-color:red;  16.               17.   

44、;      </style>  18.     </head>  19.     <body style="font-size:30px;font-style:italic;">  20.         <div id="d

45、1" onclick="clickDiv();">  21.             <a href="javascript:;" onclick="clickA();">click5</a>  22.         </

46、div>  23.     </body>  24. </html>   如何取消事件冒泡：event.cancelBubble = true;html view plain copy print?1. <html>  2.     <head>  3.       

47、;  <script>  4.             function clickA(e)  5.                 alert('你点击了连接');  6.   &

48、#160;             e.cancelBubble = true;  7.               8.             function clickDiv(e)  9.           &

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论