這篇文章主要介紹了JavaScript簡(jiǎn)介,都是非?;A(chǔ)的內(nèi)容,有需要的小伙伴參考下吧。
本文不是參考手冊(cè)式文章,僅適用于對(duì)JS產(chǎn)生一個(gè)大致的認(rèn)知,如需JS的詳細(xì)語(yǔ)法與應(yīng)用請(qǐng)移步w3school
JavaScript是什么?
JavaScript的誕生
在1995年前后,當(dāng)時(shí)世界上的主流帶寬為28.8Kbps,現(xiàn)在世界平均下載帶寬為21.9Mbps(數(shù)據(jù)來(lái)源于)。當(dāng)時(shí)的網(wǎng)民,每提交一次表單,都需要等待很久才能收到服務(wù)器的回應(yīng),甚至很可能等了幾分鐘收到的卻是說(shuō)缺少了某一項(xiàng)。為了改善用戶體驗(yàn),嵌入瀏覽器客戶端的能實(shí)現(xiàn)簡(jiǎn)單表單判斷的腳本誕生了,這就是JavaScript。
JavaScript最早是工作于Netscape (網(wǎng)景公司)的 Brendan Eich為即將在1995年發(fā)行的NetscapeNavigator 2.0(NN2.0)開(kāi)發(fā)的,當(dāng)時(shí)叫做LiveScript。由于當(dāng)時(shí)是和非常熱門(mén)的Sun公司合作的,為了趕上當(dāng)時(shí)的潮流——Java語(yǔ)言,這門(mén)語(yǔ)言被命名為JavaScript。
JavaScript跟Java有什么關(guān)系?
這也是外行人聽(tīng)到JavaScript的第一反應(yīng),也是這門(mén)語(yǔ)言被詬病最多的問(wèn)題之一。
嚴(yán)格的說(shuō),沒(méi)有半毛錢(qián)關(guān)系。如果非要扯上關(guān)系,也許就是兩者的部分函數(shù)相同、面向?qū)ο笏枷?、判斷結(jié)構(gòu)、循環(huán)語(yǔ)句相同等等等等,但這些顯然不是Java的專(zhuān)利,而是編程語(yǔ)言的共識(shí)。
JavaScript的標(biāo)準(zhǔn)化及發(fā)展歷史
JavaScript推出時(shí),用戶體驗(yàn)更好的NN 瀏覽器主宰了瀏覽器市場(chǎng),而微軟一直在追趕。在推出IE3的時(shí)候,微軟發(fā)布了VBScript并以JScript為名,實(shí)際上和Netscape的JavaScript沒(méi)有多大區(qū)別(用今天的話來(lái)講就是山寨)。面對(duì)微軟的競(jìng)爭(zhēng),Netscape和Sun公司將自己的JavaScript草案提交給ECMA(歐洲計(jì)算機(jī)制造商協(xié)會(huì))對(duì)JavaScript進(jìn)行了標(biāo)準(zhǔn)化,最后形成了ECMAScript 的第一個(gè)版本(ECMA-262)。
有意思的是,網(wǎng)景公司在標(biāo)準(zhǔn)化JavaScript之后,內(nèi)部卻出現(xiàn)了問(wèn)題,JavaScript的研究停滯,而微軟則趁機(jī)趕超,推出了IE4,內(nèi)置了第一個(gè)遵循ECMA規(guī)范的JavaScript引擎,比NN提前了一年。再加上微軟系統(tǒng)逐步占領(lǐng)計(jì)算機(jī)操作系統(tǒng)市場(chǎng),其預(yù)裝的IE瀏覽器市場(chǎng)份額逐漸加大,NN不斷被擠占市場(chǎng)。然而,當(dāng)微軟失去了最大的對(duì)手后,它就沒(méi)有了發(fā)展的動(dòng)力,IE6~IE8,無(wú)論是界面渲染還是腳本執(zhí)行,都互不兼容,成為瀏覽器史上的一朵奇葩,也是前端開(kāi)發(fā)者的噩夢(mèng)。
代碼如下:
1.v1 1997年06月 首版
2.v2 1998年06月 格式修正,以使得其形式與ISO/IEC16262國(guó)際標(biāo)準(zhǔn)一致
3.v3 1999年12月 強(qiáng)大的正則表達(dá)式,更好的文字鏈處理,新的控制指令,異常處理,錯(cuò)誤定義更加明確,數(shù)輸出的格式化及其它改變
4.v4 未完成...可能更明確的類(lèi)的定義,命名空間等等...
5.v5 2009年12月 新增“嚴(yán)格模式(strict mode)”,一個(gè)子集用作提供更徹底的錯(cuò)誤檢查,以避免結(jié)構(gòu)出錯(cuò)。澄清了許多第3版本的模糊規(guī)范,and accommodates behaviour of real-world implementations that differed consistently from that specification。增加了部分新功能,如getters及setters,支持JSON以及在物件屬性上更完整的反射。
****2004年6月歐洲計(jì)算機(jī)制造商協(xié)會(huì)發(fā)表了ECMA-357標(biāo)準(zhǔn),它是ECMAScript的一個(gè)擴(kuò)延,它也被稱(chēng)為E4X(ECMAScript for XML)。
JavaScript跟ECMAScript有什么關(guān)系?
其實(shí)問(wèn)題應(yīng)該是JavaScript、JScript、ECMAScript三者有什么關(guān)系。實(shí)際上,ECMAScript是總的規(guī)范,JavaScript和JScript都是依照這個(gè)規(guī)范開(kāi)發(fā)的,和ECMAScript相容,但包含了超出ECMAScript的功能。不過(guò),現(xiàn)在無(wú)論是哪種,都通稱(chēng)為JavaScript,只因其最早出現(xiàn),影響力最大,名字流傳至今。
JavaScript能干什么?
網(wǎng)頁(yè)上面,一切需要邏輯處理的操作都可以由JavaScript來(lái)完成。譬如:
代碼如下:
•表單驗(yàn)證
•動(dòng)畫(huà)效果
•網(wǎng)頁(yè)游戲
•倒計(jì)時(shí)
•……
還有很多很多種應(yīng)用,在這里不贅述,相信大家學(xué)會(huì)這門(mén)語(yǔ)言之后會(huì)發(fā)現(xiàn)很多應(yīng)用到的地方。
為什么要學(xué)JavaScript?
1.因?yàn)槟銊e無(wú)選擇,只有JavaScript可以控制所有常用的瀏覽器,而且JavaScript是世界上最重要的編程語(yǔ)言之一,學(xué)習(xí)web技術(shù)必須學(xué)會(huì)JavaScript。
2.JavaScript是一種優(yōu)美的語(yǔ)言,它很好,所以我們要學(xué)
JavaScript的定位
代碼如下:
1.JavaScript是一門(mén)輕量級(jí)的腳本語(yǔ)言,不需要編譯,由JavaScript解析引擎解析運(yùn)行(一般指瀏覽器,當(dāng)然不排除node之類(lèi)的解析器)
2.JavaScript擁有非函數(shù)式語(yǔ)言特性、函數(shù)式語(yǔ)言特性和動(dòng)態(tài)語(yǔ)言特性,它的語(yǔ)法非常靈活
3.JavaScript是一門(mén)面向?qū)ο蟮木幊陶Z(yǔ)言,在JavaScript界有一句話:萬(wàn)物皆對(duì)象。其繼承是基于原型的繼承(我之前已經(jīng)專(zhuān)門(mén)寫(xiě)了一篇闡述原型繼承的文章)
4.JavaScript是一門(mén)類(lèi)C語(yǔ)言,所以只要學(xué)過(guò)C的人都很容易上手JavaScript
5.JavaScript的編寫(xiě)不需要編譯器,而只需要文本編輯器(記事本就免了,這里強(qiáng)烈推薦sublime text)
JavaScript有什么?
現(xiàn)在大家用的JavaScript包含了三大部分:DOM、BOM、ECMAScript(或稱(chēng)core js)。
DOM
這里默認(rèn)大家對(duì)HTML、CSS至少有所了解,如果是直接跳過(guò)HTML、CSS來(lái)看本文的話,先看此處。
DOM,文檔對(duì)象模型(document object model)
我們知道,XHTML要求標(biāo)簽必須閉合,嵌套必須正確。而標(biāo)簽的嵌套,就產(chǎn)生了父子關(guān)系(或者說(shuō),祖先-后代關(guān)系)。而DOM,提供了大量的API,讓我們可以輕松操作DOM樹(shù)。后面我會(huì)開(kāi)一篇文章專(zhuān)門(mén)講JS DOM。
使用DOM,我們能動(dòng)態(tài)修改頁(yè)面內(nèi)容,調(diào)整樣式等等,這也是JS多樣化的一個(gè)體現(xiàn)。
BOM
BOM,瀏覽器對(duì)象模型(brower object model)
和DOM類(lèi)似,只不過(guò)主體變成了瀏覽器。瀏覽器同樣提供了大量的API,其中部分對(duì)JS開(kāi)放,為我們提供了操作瀏覽器窗口的方法。
常見(jiàn)用處:
代碼如下:
1.彈出新瀏覽器窗口的能力;
2.移動(dòng)、關(guān)閉和更改瀏覽器窗口大小的能力;
3.可提供WEB瀏覽器詳細(xì)信息的導(dǎo)航對(duì)象;
4.可提供瀏覽器載入頁(yè)面詳細(xì)信息的本地對(duì)象;
5.可提供用戶屏幕分辨率詳細(xì)信息的屏幕對(duì)象;
6.支持Cookies;
7.Internet Explorer對(duì)BOM進(jìn)行擴(kuò)展以包括ActiveX對(duì)象類(lèi),可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)ActiveX對(duì)象。
ECMAScript core
也叫JS core,隨便怎么叫,意思一樣,都是表示JS這門(mén)語(yǔ)言的核心組成,包括變量定義,垃圾回收,語(yǔ)法,作用域等等。和上面提到的DOM和BOM不同,它們只要求我們能使用這些API,而ECMAScript core則是這門(mén)語(yǔ)言的精髓所在,需要不斷鉆研。下一章將進(jìn)一步講JS的語(yǔ)法。
JavaScript的使用
行內(nèi)式
行內(nèi)式即寫(xiě)在標(biāo)簽中的JavaScrip,例如我們?cè)贖TML中寫(xiě)入:
代碼如下:
<button onclick="alert('be clicked');">點(diǎn)擊</button>
當(dāng)我們點(diǎn)擊按鈕時(shí),將會(huì)彈框顯示"be clicked"。
但注意,強(qiáng)烈不建議這么做,因?yàn)檫@樣會(huì)給維護(hù)帶來(lái)巨大的麻煩,每次需要更改事件我們都需要先找到該元素,然后修改其javascript內(nèi)容,而且這些javascript代碼也無(wú)法復(fù)用。
另外,寫(xiě)在標(biāo)簽中的事件需要帶'on',而且標(biāo)簽內(nèi)只能通過(guò)事件引入js,而不能寫(xiě)簡(jiǎn)單的js表達(dá)式
內(nèi)嵌式
內(nèi)嵌式即在html的script標(biāo)簽中寫(xiě)js代碼,做法是在HTML中新增一個(gè)script標(biāo)簽,然后在標(biāo)簽中間插入你的任意js代碼,如下:
代碼如下:
<html>
<body>
<button id="btn">點(diǎn)擊</button>
</body>
<script>
<span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");</span><pre name="code" class="javascript"> btn.onclick = function() {
alert("be clicked");
}
</script></html>
用內(nèi)嵌式的話,就比行內(nèi)式自由很多,可以寫(xiě)更多的代碼,也可以避免引號(hào)的轉(zhuǎn)義問(wèn)題,維護(hù)也變得更輕松。但問(wèn)題也是存在的,這些代碼只能適用于這個(gè)頁(yè)面,而無(wú)法被其他頁(yè)面使用。
外聯(lián)式
外聯(lián)式把以上兩種形式的缺點(diǎn)全部解決了。做法如下:
先新建一個(gè)文件,把后綴改為.js。例如,我們新建一個(gè)click.js文件,然后把剛才寫(xiě)的內(nèi)嵌式里面的js代碼拷貝進(jìn)去(注意不包括script標(biāo)簽)
代碼如下:
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("be clicked");
}
然后在HTML中通過(guò)script標(biāo)簽引入
代碼如下:
<html>
<body>
<button id="btn">點(diǎn)擊</button>
</body>
<script src="click.js"></script>
</html>
這樣的好處在于同樣的js代碼可以被多個(gè)HTML頁(yè)面共享,壞處是增加了文件數(shù),增大了請(qǐng)求所需時(shí)間,所以應(yīng)增強(qiáng)代碼的復(fù)用性,并且最后要合并js文件(把不同的js文件合并成一個(gè)js文件)
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄