1.2 JavaScript的開發(fā)工具

隨著JavaScript的發(fā)展，大量優(yōu)秀的開發(fā)工具接踵而來。能夠開發(fā)現(xiàn)代網(wǎng)頁的開發(fā)工具非常多，例如記事本、Sublime Text、HBuilder、VS Code等。找到一個適合自己的開發(fā)工具，不僅可以加快學(xué)習(xí)速度，而且在以后的開發(fā)過程中能及時發(fā)現(xiàn)問題、少走彎路。下面我們就來介紹兩款簡單、易用的開發(fā)工具。

1.2.1 使用記事本開發(fā)

記事本是最原始的JavaScript開發(fā)工具之一，它最大的優(yōu)點就是不需要獨立安裝，只要安裝Windows操作系統(tǒng)，使用系統(tǒng)自帶的記事本，就可以開發(fā)JavaScript應(yīng)用程序。對于計算機硬件條件有限的讀者來說，記事本是最好的JavaScript應(yīng)用程序開發(fā)工具之一。

【例1-1】下面介紹如何將記事本作為JavaScript的編輯器，編寫第一個JavaScript腳本（實例位置：源碼\第1單元\1-1）。

（1）打開記事本。

（2）在記事本的工作區(qū)域輸入以下HTML標(biāo)記符和JavaScript代碼。

（3）編輯完畢后，選擇“文件”/“保存”命令，在彈出的“另存為”對話框中，輸入文件名，將其保存為.html格式或.htm格式。雙擊該文件，以上代碼的運行結(jié)果會在瀏覽器中顯示，如圖1-7所示。

1.2.2 使用VS Code開發(fā)

Visual Studio Code（簡稱VS Code）開發(fā)工具，是一款由Microsoft開發(fā)的免費、開源代碼編輯器。它是一個輕量級的跨平臺編輯器，適用于Windows、macOS和Linux操作系統(tǒng)。它內(nèi)置對JavaScript、TypeScript和Node.js的支持，并且擁有豐富的其他語言和運行時擴展生態(tài)系統(tǒng)。

訪問VS Code官網(wǎng)下載安裝包，需要選擇對應(yīng)系統(tǒng)的安裝包，直接下載即可，如圖1-8所示。

【例1-2】下面通過一個實例了解使用VS Code如何進(jìn)行開發(fā)。

（1）在桌面上創(chuàng)建一個名為sourceCode（在VS Code中顯示為SOURCE CODE）的文件夾，然后通過VS Code打開（Windows快捷鍵：Crtl+K+O。macOS快捷鍵：command+O）該文件夾，如圖1-9所示。

（2）在該文件夾下面新建一個index.html文件，輸入源碼內(nèi)容如下。

（3）雙擊index.html文件，瀏覽器可以運行該文件，結(jié)果如圖1-10所示。