JavaScript 學習之路-起步
這是一篇講 JavaScript 基礎的文章,接下來會更新這個系列文章。
JavaScript 誕生於 1995 年,至今已經有 20 幾年了,在最新的 ofollow,noindex">JavaScript 2018 年度報告 中,許多人依舊認為這門語言正在朝著好的方向去發展,從最開始的默默無聞到如今的未來可期,JavaScript 作為前端開發者的一門學習語言,一定會被更多愛好程式設計的人喜歡。如果想了解和學習 JavaScript,請往下看。
ECMAScript
在瞭解 JavaScript 前,首先要了解 ECMAScript ,它是由 ECMA-262 定義的一門語言。它規定了一些基本的語法、變數、語句、操作符以及物件等等內容, 而 JavaScript 去實現了它 ,也就是說,JavaScript 去實現了 ECMAScript,我們經常說 JS 的新版本,實際上是 ECMAScript 的新版本,最被人經常用的是第五個版本(ES5) 還有ES6,它包含了許多新知識新特性。簡而言之,JavaScript 的概念更廣,它包含了 ECMAScript ,除此之外還有文件物件模型 (DOM) 和瀏覽器物件模型 (BOM) 。
兩種使用方式
不同於其它程式語言,JavaScript 內嵌於瀏覽器中,許多主流瀏覽器都支援 JavaScript。開啟 Chrome 瀏覽器,按 F12 或滑鼠右鍵選擇審查元素,就可以看到控制檯,在控制檯上就可以書寫 JS 程式碼,例如你可以在控制檯輸入 console.log('hello world!');
就可以看到下方出現了一句熟悉 hello world!
。

image
這是寫 JS 程式碼最快速便捷的方式,但一般我們都是在編輯器中完整地完成整個專案,關於編輯器各人有各人的愛好,稍後會列出常用的幾個編寫 JS 程式碼的編輯器。
來到了編輯器中,我們新建一個字尾名為 .html 的檔案,在裡面寫有關 JS 的程式碼,如果你連 HTML 都不認識,可以到 w3school 去線上學習基礎的 HTML 知識。不出所料,一個基本的 html 檔案的頭應該是下面這樣的:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 這裡是內容程式碼 --> </body> </html>
JavaScript 使用 <script>
標籤來巢狀程式碼,所有的 JS 相關的程式碼都放在裡面,而 <script>
標籤可以放在 <head></head>
中,也可放在 <body></body>
中,最好放在後者,因為瀏覽器解析時是從上至下解析這段程式碼,放在 <head> 中很容易因為解析慢而導致下方 <body> 中的內容未渲染出來,從而影響使用者體驗。
<script>
有幾個常用的屬性,最常看到的就是 type
和 src
了, type
屬性顧名思義,指定了屬性含義,常用值是 text/javascript
,讓人知道這裡面寫的都是 JavaScript 型別的標籤程式碼; src
屬性也是經常看見的,指定了一個外部的 href 連結, JavaScript 有兩種引入方式,一種是直接在 <script></script> 標籤裡面寫程式碼,另外一種就是建立一個字尾名為 .js 的檔案,然後通過 src 連結進來使用。
<script>
標籤有一個 defer
屬性,這個屬性的作用是告訴瀏覽器等所有內容都解析完後再來執行這個指令碼,也就是起到一個 延遲執行指令碼 的作用。
<script>
標籤還有一個 async
屬性,適用於外部引入的 .js 檔案,作用是告訴瀏覽器不比等它執行,可以非同步先去載入其它內容。
以上幾個屬性的使用方式如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" defer="defer" src="××.js"></script> <script type="text/javascript" async src="××.js"></script> </head> <body> <!-- 這裡是內容程式碼 --> </body> </html>
文件模式
IE5.5 開始引入了文件模式這個概念,它會影響 css 內容的呈現,也會一定程度上影響到 JavaScript 的執行。文件模式只需要記住有混雜模式和標準模式兩個,在混雜模式下,不同瀏覽器下執行的會有很大差異,因此不被人所推薦,一般都是用的標準模式,這個標準模式我們也很熟悉了,就是在 html 檔案經常看到的
<!DOCTYPE html>
不支援 JavaScript
當遇到瀏覽器不支援 JavaScript 指令碼或者指令碼被禁用了怎麼辦?這時候可以用到 <noscript>
標籤,它會在瀏覽器不支援 JS 指令碼時候顯示,而其他情況下不會有什麼影響,所以為了使用者體驗,可以在程式碼里加上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 這裡是內容程式碼 --> <noscript> <p>您的瀏覽器不支援 JavaScript ,請升級。</p> </noscript> </body> </html>
這樣,當遇到不支援 JS 時,這段文字就會顯示出來,提醒使用者升級或更換瀏覽器。
編輯器
最後,有許多可以編寫 JavaScript 程式碼的軟體。就我知道的有以下這些:
以上這幾個軟體基本都用過,現在在用 PhpStorm ,它跟 WebStorm 差不多,只不過多了對 php 檔案的支援,很多人都是用的 WebStorm ,它程式碼提示等做得很好,頁面看起來也還行,缺點應該是開啟的時候挺慢,最重要的是,時不時地就過期需要去找註冊碼,當然,有條件的話還是付費支援正版的好,聽說學生去申請可以有授權使用,不過太麻煩了懶得去弄。
總結
希望你看完以後能夠知道 JavaScript 的誕生年份、與 ECMAScript 的關係、引入 js 的兩種方式、文件模式以及 <noscript>
這些內容,瞭解這些有助於以後更好的學習。