林大媽的JavaScript基礎知識（二）：編寫JavaScript代碼前的一些簡單工做

時間 2019-12-08

標籤大媽 javascript 基礎知識編寫代碼一些簡單欄目 JavaScript 简体版

原文原文鏈接

　　在介紹JavaScript語法前，咱們須要知道，學習語法必需要多利用手敲代碼來鞏固記憶。所以，因爲JavaScript的特性，它不能像C++和Java同樣獨立地編譯及運行，咱們須要在調試運行JavaScript前建立好它的HTML載體。本文主要介紹了使用vs code搭建網頁開發環境的一些簡單操做、HTML文檔模板標籤的部分做用和網頁開發時的一些注意事項，有基礎的同窗能夠跳過。css

　　事實上，咱們能夠用任何的文本編輯器來編寫代碼，甚至是一個記事本。編寫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

完成安裝後，打開並選定文件目錄，新建一個後綴爲.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.一、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文檔。ui

　　JavaScript調試方法：在網頁中點擊F12，會彈出瀏覽器調試窗口，點擊「Console（控制檯）」，能夠看到咱們輸出的內容或者編寫想要添加進去的JavaScript代碼，在調試時，咱們一般但願輸出一箇中間值看錯誤是否是在這裏發生，這時候咱們通常會用到這些語句： console.log(someElement); 或者 alert(someElement); 經過讀這些函數的名字咱們就能夠猜到它們的做用。搜索引擎

　　最後的最後，在同目錄下新建一個demo.js文件，並在<body>標籤的末尾處添加一句：編碼

　　咱們就能夠將JavaScript代碼嵌入到HTML文檔中了。若是要添加CSS文件，則在<head>標籤中嵌套一句：

　　<script>標籤其實也能夠寫在<head>標籤中，只是瀏覽器會按順序加載頁面，寫在<body>末尾意味着瀏覽器會先把HTML的內容加載好並最早呈現給用戶，而最後再加載其餘的交互功能，也包括操做DOM的語句。這樣就避免了相似

var element = document.getElementById("aElement");

　　這樣的語句獲取不到這個元素而不能正常執行。