在介紹JavaScript語法前，我們需要知道，學習語法必須要多利用手敲代碼來鞏固記憶。因此，由於JavaScript的特性，它不能像C++和Java一樣獨立地編譯及運行，我們需要在調試運行JavaScript前創建好它的HTML載體。本文主要介紹了使用vs code搭建網頁開發環境的一些簡單操作、 ...
在介紹JavaScript語法前，我們需要知道，學習語法必須要多利用手敲代碼來鞏固記憶。因此，由於JavaScript的特性，它不能像C++和Java一樣獨立地編譯及運行，我們需要在調試運行JavaScript前創建好它的HTML載體。本文主要介紹了使用vs code搭建網頁開發環境的一些簡單操作、HTML文檔模板標簽的部分作用和網頁開發時的一些註意事項，有基礎的同學可以跳過。
事實上，我們可以用任何的文本編輯器來編寫代碼，甚至是一個記事本。編寫JavaScript代碼的方式有很多，可以直接在HTML文檔中添加<script></script>標簽並嵌套JavaScript語句，也可以新建一個.js尾碼的文件，並用<script src="(這個js文件的文件名).js"進行引用。在編寫多個網頁後我們會發現，將內容（HTML）、設計（CSS）和交互（JavaScript）分離是一個思路非常清晰的做法。由於visual studio code對JavaScript以及前端開發的極力支持，本文以visual studio code來舉例。我們登陸visual studio code官網（https://code.visualstudio.com/Download）下載安裝好了以後，打開vs code，這時我們的編輯器是英文版的，通過選擇左側這個矩形圖標的擴展按鈕，它是vs code進行眾多開發配置的關鍵，通過安裝各類擴展，vs code可以完成許多工作，我們搜索“Chinese”並安裝，重啟vs code以後就完成了簡單的中文版開發環境的搭建。
完成安裝後，打開並選定文件目錄，新建一個尾碼為.html的文件，輸入一個英文感嘆號“!”，按Tab，vs code就會自動幫你生成一段html模板代碼，現在我們來解析一下這段模板每句話的意思：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 11 </body> 12 </html>
首先， <!DOCTYPE html> 表示該文檔是一個HTML5文檔，相應地，如果你想要創建其他標記語言文檔，例如XML1.1、HTML4.01 Strict等等，就要改變這句話裡面的“html”為其他內容，可以自行上網查找。
其次，<html></html>標簽規定了整一個文檔的開始與結束，它有一個lang屬性，意思是這個文檔內容的語言類型，例如這裡的值是“en”，表示是英文的；如果值是“zh-CN”，它表示該文檔內容語言是中國大陸的中文。這個屬性的作用在於幫助瀏覽器檢測語言類型並且啟動翻譯操作。例如我在中文操作系統下運行Google Chrome，當檢測到我的文檔中lang屬性的值是en時，瀏覽器就會在右上角提醒我：
接下來，<head></head>標簽中又預設嵌套了<meta><title>等標簽。<meta>標簽中指定類似瀏覽器編碼、初始化該網頁時瀏覽器的大小、該網頁的關鍵字（這一點主要是針對搜索引擎對你頁面信息的爬取效率）等等的屬性，這一些內容我們稱之為這個網頁的元信息（meta的中文翻譯就是元，不是人民幣的元，是最小單位的概念）。而<title></title>中則可以填入這個頁面的標題，我們可以通過標簽的名字非常直觀地讀懂它們的用途。我們編寫程式時為變數取名，也要儘量做到見名知意。
最後，<body></body>中嵌套你希望在文本中加入的內容，後續在編寫HTML文檔時我們會繼續介紹。
快捷打開網頁的方法：下載“View In Browser”插件，安裝，在vs code界面左側的資源管理器中右鍵點擊我們剛剛創建的HTML文件，選擇“View In Browser”，直接在瀏覽器打開這個HTML文檔。
JavaScript調試方法：在網頁中點擊F12，會彈出瀏覽器調試視窗，點擊“Console（控制台）”，可以看到我們輸出的內容或者編寫想要添加進去的JavaScript代碼，在調試時，我們通常希望輸出一個中間值看錯誤是不是在這裡發生，這時候我們一般會用到這些語句： console.log(someElement); 或者 alert(someElement); 通過讀這些函數的名字我們就可以猜到它們的作用。
最後的最後，在同目錄下新建一個demo.js文件，併在<body>標簽的末尾處添加一句：
<script src="./demo.js"></script>
我們就可以將JavaScript代碼嵌入到HTML文檔中了。如果要添加CSS文件，則在<head>標簽中嵌套一句：
<link href="./demo.css">
<script>標簽其實也可以寫在<head>標簽中，只是瀏覽器會按順序載入頁面，寫在<body>末尾意味著瀏覽器會先把HTML的內容載入好並最先呈現給用戶，而最後再載入其他的交互功能，也包括操作DOM的語句。這樣就避免了類似
var element = document.getElementById("aElement");
這樣的語句獲取不到這個元素而不能正常執行。
