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