大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、JavaScript 概述

1、JavaScript簡介

JavaScript歷史
要了解JavaScript，我們首先要回顧一下JavaScript的誕生。在上個世紀的1995年，當時的網景公司正憑藉其Navigator瀏覽器成為Web時代開啟時最著名的第一代網際網路公司。由於網景公司希望能在靜態HTML頁面上新增一些動態效果，於是叫Brendan Eich這哥們在兩週之內設計出了JavaScript語言。你沒看錯，這哥們只用了10天時間。

為什麼起名叫JavaScript？原因是當時Java語言非常紅火，所以網景公司希望借Java的名氣來推廣，但事實上JavaScript除了語法上有點像Java，其他部分基本上沒啥關係。

ECMAScript
因為網景開發了JavaScript，一年後微軟又模仿JavaScript開發了JScript，為了讓JavaScript成為全球標準，幾個公司聯合ECMA（European Computer Manufacturers Association）組織定製了JavaScript語言的標準，被稱為ECMAScript標準。所以簡單說來就是，ECMAScript是一種語言標準，而JavaScript是網景公司對ECMAScript標準的一種實現。

那為什麼不直接把JavaScript定為標準呢？因為JavaScript是網景的註冊商標。不過大多數時候，我們還是用JavaScript這個詞。如果你遇到ECMAScript這個詞，簡單把它替換為JavaScript就行了。

JavaScript版本
JavaScript語言是在10天時間內設計出來的，雖然語言的設計者水平非常NB，但誰也架不住“時間緊，任務重”，所以，JavaScript有很多設計缺陷。

此外，由於JavaScript的標準——ECMAScript在不斷髮展，最新版ECMAScript 6標準（簡稱ES6）已經在2015年6月正式釋出了，所以，講到JavaScript的版本，實際上就是說它實現了ECMAScript標準的哪個版本。

由於瀏覽器在釋出時就確定了JavaScript的版本，加上很多使用者還在使用IE8這種古老的瀏覽器，這就導致你在寫JavaScript的時候，要照顧一下老使用者，不能一上來就用最新的ES6標準寫，否則，老使用者的瀏覽器是無法執行新版本的JavaScript程式碼的。

2、JS作用

• 驗證表單（以前的網速慢）
• 頁面特效（PC端的網頁效果）
• 移動端（移動web和app）
• 非同步和伺服器互動（AJAX）
• 服務端開發（nodejs）

3、語言型別

js是一種指令碼語言，不僅是指令碼語言還是弱型別的指令碼語言。

指令碼語言是一種解釋性語言，解釋性語言是相對於編譯性語言而言的。

編譯型語言：編譯程式碼，把程式碼編譯成CPU認識的語言(檔案)，然後整體的執行。

解釋型語言：一行一行解析，解析一行執行一行。

弱型別語言：簡單理解定義一個變數，可以有多種資料型別。（如：var）

4、前端組成

HTML：提供網頁上顯示的內容（結構）

CSS：美化網頁（樣式）

JavaScript：控制網頁行為（行為）

5、js組成

js = ECMAScript + DOM + BOM + 高階

ECMAScript（前身為歐洲計算機制造商協會）：JavaScript的語法規範

DOM（Document Object Model 的文件物件模型簡稱）：JavaScript操作網頁上元素的API

BOM（Browser Object Model 的瀏覽器物件模型簡稱）：JavaScript操作瀏覽器部分功能的API

6、js書寫位置

內嵌式：
　　一般放在body的最後，有時放在head標籤中（需要寫頁面載入函式）。
外鏈式：
　　src=”外部js檔案路徑”

7、JS基礎知識

輸出語句

console.log("內容");       // 在控制檯列印輸出內容
alert("內容");                 // 彈窗顯示內容
document.write("內容");   // 在頁面書寫內容，其內容可以識別標籤，比如：document.write("<h1>你好</h1>")

其他語句

alert("內容");       // 彈出對話方塊
prompt("提示資訊"); // 可以在彈出的對話方塊輸入內容給後臺
confirm("")           // 彈出對話方塊，有是否按鈕

js程式碼的注意問題：

1. 在一對script的標籤中有錯誤的js程式碼，那麼該錯誤的程式碼後面的js程式碼不會執行。
2. 如果第一對的script標籤中有錯誤，不會影響後面的script標籤中的js程式碼執行。
3. script標籤裡面可以寫的內容：type="text/javascript" 標準寫法，或者language="JavaScript"，都是可以省略的，原因是在html開頭寫了遵循h5標準。
4. script標籤可以出現多對。
5. 如果使用引入外部js檔案的方式，那麼不要在script標籤裡面寫任何js程式碼，如果想寫，就新開一對script標籤。