JavaScript簡介_javascript技巧

本文不是參考手冊式文章，僅適用於對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中寫入：

複製程式碼 程式碼如下:

點選

當我們點擊按鈕時，將會彈框顯示"be clicked"。
但注意，強烈不建議這麼做，因為這樣會給維護帶來巨大的麻煩，每次需要更改事件我們都需要先找到該元素，然後修改其javascript內容，而且這些javascript程式碼也無法重複使用。

另外，寫在標籤中的事件需要帶'on'，而且標籤內只能透過事件引入js，而不能寫簡單的js表達​​式

內嵌式

內嵌式即在html的script標籤中寫js程式碼，做法是在HTML中新增一個script標籤，然後在標籤中間插入你的任意js程式碼，如下：

複製程式碼 程式碼如下:

   
        點選
   
    <script><br /> <span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");<pre name="code" class="javascript">     onclick = function() {<br />             alert("be clicked");<br />         }<br /> </script>

用內嵌式的話，就比行內式自由很多，可以寫更多的程式碼，也可以避免引號的轉義問題，維護也變得更輕鬆。但問題也是存在的，這些程式碼只能適用於這個頁面，而無法被其他頁面使用。

外聯式

外聯式把以上兩種形式的缺點都解決了。做法如下：

先新建一個文件，把後綴改為.js。例如，我們新建一個click.js文件，然後把剛才寫的內嵌式裡面的js程式碼拷貝進去（注意不包括script標籤）

複製程式碼 程式碼如下:

var btn = document.getElementById("btn");
btn.onclick = function() {
     alert("be clicked");
}

然後在HTML中透過script標籤引入

複製程式碼 程式碼如下:

   
        點選
   
   

這樣的好處在於同樣的js程式碼可以被多個HTML頁面共享，壞處是增加了檔案數，增大了請求所需時間，所以應增強程式碼的複用性，並且最後要合併js檔案（把不同的js檔合併成一個js檔）