欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

探索JavaScript应用技术领域

创建时间:2013年08月31日 20:29  阅读次数:(9605)
分享到:
在介绍完了JavaScript编程语言本身的亮点之后,现在将目光转向JavaScript的应用领域。

(1)BOM
浏览器对象模型(BrowserObject Model,BOM)是由浏览器实现的,可供JavaScript程序调用的一组对象,通过它JavaScript代码可以完成与“控制”浏览器进程相关的许多工作。BOM由一系列相关的对象构成,主要有以下六个:
window对象,前面也说过,它是JavaScript的最顶层对象,其它的BOM对象都是windows对象的属性。
document对象表示浏览器中加载页面的文档对象;
location对象包含了浏览器当前的URL信息;
navigator对象包含了浏览器本身的信息;
screen对象包含了客户端屏幕及渲染能力的信息;
history对象包含了浏览器访问网页的历史信息。

当浏览器装载网页完毕之后,这几大对象就可用了。

基于BOM的编程很简单,主要就是使用JavaScript访问这些对象的相关属性和调用它们的相关方法,查查技术手册(诸如《JavaScript权威指南》那样厚达1000多页的书)就OK了。

(2)DOM
Web网页本身是一个纯文本形式的文档,是由许多嵌套的HTML元素所构成,如果直接按照字符串来处理文档,相当地不便。

浏览器装入HTML文档之后,依据文档中包容的内容,创建出一棵树,并把这棵树称为“DOM(Document Object Model,文档对象模型)”,程序员们通常直接称之为DOM树。

事实上,Web前端编程主要就是围绕着DOM树而展开的。使用JavaScript可以很方便地操控整个DOM树。其基本步骤可以简化为以下两步:

(1)从DOM树中选取要操作的节点(或节点集合),有多种方式完成这一工作,最常用的就是document对象所提供的getElementById( ):
var div = document.getElementById("info");

其它的JavaScript库或框架,比如jQuery,提供了更多更方便的方式选择节点,但其最终目的都是一样的——选择要操控的DOM节点。

(2)针对选择的节点对象,设置其属性、调用其方法或响应其事件:
div.innerHTML = "Hello,JavaScript";

记住这两点之后,花些时间看看DOM文档,知道我们可以使用哪些方法、事件和属性,也就够了,在编程上并没有什么特殊之处。

这里特别地说说事件,DOM规范定义了两种事件:冒泡型和捕获型。这两种类型事件的在DOM树中传输方向正好相反,一个从触发事件的节点向上传播到DOM树的根节点,另一个则从DOM树的根节点向下传播到触发事件的节点。把握这两者的区别在实际开发中很重要,同时注意不同浏览器和不同版本浏览器的具体实现会有所区别。

(3)AJAX与JSON
AJAX其实它是一个很古老的技术,IE浏览器很早就支持它。后来,Google在其Google Map中应用AJAX实现了让人惊讶的Web体用体验,一下子让AJAX成为炙手可热的技术。

AJAX的思想其实很简单:
使用浏览器实现的XmlHttpRequest对象在“后台”向Web服务器发出请求,Web服务器收到请求之后,向浏览器发回数据,浏览器收到之后更新页面。

以下是简化过的完成某次AJAX数据交换功能的示例代码:
var myRequest;

//1:依据浏览器的类别创建相应的对象
if (window.XMLHttpRequest) {
   //非IE浏览器
    myRequest = new  XMLHttpRequest();

} else if (window.ActiveXObject) {
     //IE浏览器
    myRequest = new  ActiveXObject("Microsoft.XMLHTTP");
}

// 2: 响应XMLHttpRequest对象的readystatechange事件,为其定义回调代码:
myRequest.onreadystatechange = function(){
    if (myRequest.readyState=== 4) {
       //收到的数据放在myRequest.responseText中,接着可使用DOM来更新页面
        ……
    }
};

// 发送请求
myRequest.open('GET', 'simple.json', true);
myRequest.send(null);

可以看到,数据取回以后,通常使用DOM来更新页面。

服务端返回什么样格式的数据完全可以由开发者自行决定,现在比较流行的是直接返回JSON格式的数据,一是方便,JavaScript能直接解析它;二是数据紧凑,JSON比XML数据量要小得多,三是跨平台性好,目前许多手机应用都采用JSON来从服务器上提取数据。

(4)各种JavaScript框架
当前在互联网上可以找到N种JavaScript框架或库,各有各的用途,各有各的应用场景。有大量的书籍和资料介绍这些框架,在此就不废话了。如果你时间有限,并且是初学者,那我建议你只要好好学习jQuery就够了,这是一个当前应用极为广泛的成熟的框架,设计得非常出色,你可以举一反三,再学习其他框架也并不困难。

(5)服务端的JavaScript——Node.js
JavaScript最初是一种运行在浏览器环境中的脚本语言,但Google推出的了一个名为Node.js的JavaScript运行环境,使用其研发的JavaScript V8引擎,使得JavaScript代码可以运行在服务端。

Node.js采用事件驱动和异步I/O,高度模块化,性能表现相当优异,属于近几年的技术热点,有机会时我针对它另写篇文章向大家介绍。

(6)开发Win8与智能手机应用
当前主流的智能手机操作系统——iOS和Android,其浏览器都配备了JavaScript脚本引擎,并且对HTML5特性的支持比较好。因此,现在有许多使用JavaScript开发的移动Web应用,开拓了JavaScript应用的新天地。

顺便说一下,使用JavaScript也能在微软的Windows 8中开发新的Windows 8类型的应用并放到Windows商店上去卖,但目前其前景并不算明朗,感兴趣的朋友可以自行钻研一下。

有关移动Web开发技术,计划放在另外的文章中介绍。

三、我的JavaScript学习建议
不管你对JavaScript感觉如何,只要你从事互联网应用开发,JavaScript就是你绕不过去的。因此,本小节就针对初学者谈谈JavaScript的学习建议。

我总结了一下,JavaScript大致可以分为以下几个学习阶段: 
(1)开始起步:这一阶段主要是学习与掌握基本语法 
比如了解JavaScript有哪些关键字,有哪些数据类型,变量作用域是如何定义的,分支与循环语句如何编写等等,这没什么好说的,几乎是学习所有编程语言都要完成的工作。

只要你学过C/Java/C#/C++,掌握JavaScript基本语法用不了两小时。

(2)深入探索:这一阶段主要是把握JavaScript特性,学习典型编程技巧,理解相应内部机理 
通常这一阶段需要阅读大量的JavaScript技术书籍,并花费相当的时间编写各种小的Demo,才能真正掌握好JavaScript编程语言,为下一阶段打下基础。需要重点把握的内容在前文己有介绍。

(3)学以致用:基于各种JavaScript库(或直接使用JavaScript)编写实际应用,并进一步地学习JavaScript相关的技术,比如Node.js或进一步学习开发智能手机Web应用等技术。

这就没什么好说的啦,依据你的工作与学习需求,选择相应的内容来学习。不打算成为JavaScript专家的话,大多数人应该都会长期停留在这一阶段。

(4)游刃有余:处于这一阶段的人,己经具备编写浏览器兼容性和可重用可扩展的库或框架的能力
这部分人精通JavaScript同时又有自己的想法,往往会致力于开发新JavaScript库及框架,或者是进一步扩充JavaScript的具体应用领域。

(5)开彊拓土:设计全新的脚本编程语言和运行平台
这活个人英雄主义可能就行不通了,现在通常是由大公司或“大牛人”来做,比如Google推出了V8引擎,还设计了一种JavaScript的替代语言——Dart(https://www.dartlang.org/),意图弥补JavaScript的缺陷。

而C#的设计者——AndersHejlsberg,就参与了微软推出的TypeScript(http://www.typescriptlang.org/)脚本编程语言的设计与研发工作。与TypeScript类似的另一种知名的脚本编程语言是CoffeeScript(http://coffeescript.org/),它们都构建了一套“自认为”更合理的语法体系,但并不实现自己的脚本运行引擎,而是把程序代码“编译(Complile)”成标准的JavaScript代码,在现有的JavaScript引擎上运行。

小结:
JavaScript虽是一种有着近20年历史的编程语言,但其生命力却日见旺盛,伴随着互联网的发展,它己经成为21世纪最重要的编程语言之一。

[本文作者:金旭亮]P
来源:http://blog.csdn.net/bitfan/article/details/10362461
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 51+57=? 的结果(结果是:108)
结  果: