前言

下一篇文章 JavaScript基礎–02-變量

JavaScript背景

Web前端有三層：

• HTML：從語義的角度，描述頁面結構

• CSS：從審美的角度，描述樣式（美化頁面）

• JavaScript：從交互的角度，描述行為（實現業務邏輯和頁面控制）

發展歷史

JavaScript誕生于1995年。網景公司的員工布蘭登 ? 艾奇（Brendan Eich，1961年～）在1995年開發出了 JavaScript 語言。

JavaScript是由網景公司（Netscape）發明，最初命名為LiveScript；1995年12月與SUN公司合作，因市場宣傳需要，改名為 JavaScript。

JavaScript是Sun注冊并授權給Netscape使用的商標。后來 Sun 公司 被Oracle收購，JavaScript版權歸Oracle所有。

備注：由于 Sun 公司當時的Java 語言特別火，所以為了傍大牌，就借勢改名為JavaScript。如同“北大”和“北大青鳥”的關系。“北大青鳥”就是傍“北大”大牌。

同時期還有其他的網頁語言，比如VBScript、JScript等等，但是后來都被JavaScript打敗了，所以現在的瀏覽器中，只運行一種腳本語言就是JavaScript。

1996年，微軟為了搶占市場，推出了JScript在IE3.0中使用。

1996年11月網景公司將JS提交給ECMA(國際標準化組織)成為國際標準，用于對抗微軟。

JavaScript是世界上用的最多的腳本語言。

JavaScript的發展：蒸蒸日上

2003年之前，JavaScript被認為“牛皮鮮”，用來制作頁面上的廣告，彈窗、漂浮的廣告。什么東西讓人煩，什么東西就是JavaScript開發的。所以很多瀏覽器就推出了屏蔽廣告功能。

2004年，JavaScript命運開始改變。那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。并且，那時候人們逐漸開始提升用戶體驗了。Ajax有一些應用場景。比如，當我們在百度搜索框搜文字時，輸入框下方的智能提示，可以通過Ajax實現。比如，當我們注冊網易郵箱時，能夠及時發現用戶名是否被占用，而不用調到另外一個頁面。從2005年開始，幾乎整個B/S開發界都在熱情地追捧AJAX。

2007年喬布斯發布了第一款iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。JavaScript在移動頁面中，也是不可或缺的。并且這一年，互聯網開始標準化，按照W3C規則三層分離，JavaScript越來越被重視。

2010年，人們更加了解HTML5技術，HTML5推出了一個東西叫做Canvas（畫布），工程師可以在Canvas上進行游戲制作，利用的就是JavaScript。

2011年，Node.js誕生，使JavaScript能夠開發服務器程序了。

如今，WebApp已經非常流行，就是用網頁技術開發手機應用。手機系統有iOS、安卓。比如公司要開發一個“攜程網”App，就需要招聘三隊人馬，比如iOS工程師10人，安卓工程師12人，前端工程師8人。共30人，開發成本大；而且如果要做需求迭代，就要改3個版本。現在，假設公司都用web技術，用html+css+javascript這一套技術就可以開發多種終端的頁面。也易于迭代（網頁一改變，所有的終端都生效了）。

雖然目前WebApp（Web應用）在功能和性能上的體驗遠不如Native App（原生應用），但是“在原生App中內嵌一部分H5頁面”已經是一種趨勢。

JavaScript的發展，正在大放異彩，正如周愛民的《JavaScript語言精髓與編程實戰》中所描述的那樣：

是ECMA賦予了JavaScript新的能力和活力。

在2015年6月，ES6發布了。這個ECMAScript版本幾乎集成了當時其他語言夢寐以求的所有明星特性，并優雅地、不留后患地解決了幾乎所有的JavaScript遺留問題—當然，其中那些最大的、最本質的和核心的問題其實都已經在ES5推出時通過“嚴格模式（strict mode）”解決了。

ES6提出了四大組件：Promise、類、模塊、生成器/迭代器。這事實上是在并行語言、面向對象語言、結構化語言和函數式語言四個方向上的奠基工作。相對于這種重要性來說，其他類似于解構、展開、代理等看起來很炫很實用的特性，反倒是浮在表面的繁華了。

主流引擎廠商開始通過ES6釋放出它們的能量，于是JavaScript在許多新的環境中被應用起來，大量的新技術得以推動，例如，WebAssembly、Ohm、Deeplearn.js、TensorFlow.js、GPU.js、GraphQL、NativeScript等。有了Babel這類項目的強大助力，新規范得以“讓少數人先用起來”，而標準的發布也一路披荊斬棘，以至于實現了“一年一更”。

JavaScript介紹

JavaScript入門易學性

• JavaScript對初學者比較友好、簡單易用。可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執行程序。

• JavaScript是有界面效果的（相比之下，C語言只有白底黑字）。

• JavaScript是弱變量類型的語言，變量只需要用 var/let/const 來聲明。而Java中變量的聲明，要根據變量的類型來定義。

比如Java中需要定義如下變量：

int a; 整數（負數，0， 整數）
float a; 浮點數單精度（小數，分數）
double a; 浮點數雙精度（小數，分數）
String a; 字符串（' "" '," '' ",``）
boolean a; 布爾值（true，false）

而JavaScript中，只需要用一種方式來定義：

// ES5 寫法
var a; // 定義變量// ES6 寫法
const a; // 定義常量，不變的量，在初始化的時候賦值，其余任何時間都不可改變
let a;	// 變量，和var有一定區別

JavaScript是腳本語言

JavaScript是腳本語言。

JavaScript運行在用戶的終端網頁上，而不是服務器上，此時我們稱之為“前端語言”。就是服務于頁面的交互和視覺，不能直接操作數據庫。

后臺語言是運行在服務器上的，比如PHP、ASP、JSP等等，這些語言都能夠操作數據庫，都能夠對數據庫進行“增刪改查”操作。

備注：Node.js是用 JavaScript 開發的，我們也可以用 Node.js 技術進行服務器端編程。

JavaScript的組成

JavaScript基礎分為三個部分：

• ECMAScript：JavaScript 的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。

• DOM：Document Object Model（文檔對象模型），操作頁面上的元素的API。比如讓盒子移動、變色、改變大小、輪播圖等等。

• BOM：Browser Object Model（瀏覽器對象模型），操作瀏覽器部分功能的API。通過BOM可以操作瀏覽器窗口，比如彈框、控制瀏覽器跳轉、獲取瀏覽器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的語法；DOM 和 BOM 瀏覽器運行環境為 JS提供的API。

JavaScript 的特點

特點1：解釋型語言

JavaScript 是解釋型語言，不需要事先被翻譯為機器碼；而是邊翻譯邊執行（翻譯一行，執行一行）。

什么是「解釋型語言」？詳見下一段。

由于少了實現編譯這一步驟，所以解釋型語言開發起來尤為方便，但是解釋型語言運行較慢也是它的劣勢。不過解釋型語言中使用了JIT技術，使得運行速度得以改善。

特點2：單線程

特點3：ECMAScript標準

ECMAScript是一種由 ECMA 國際（前身為歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）制定和發布的腳本語言規范。

JavaScript是由公司開發而成的，問題是不便于其他的公司拓展和使用。所以歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名為ECMAScript。

簡單來說，ECMAScript不是一門語言，而是一個標準。ECMAScript 規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準。

ECMAScript在2015年6月，發布了ECMAScript 6版本（ES6），語言的能力更強（也包含了很多新特性）。但是，瀏覽器的廠商不會那么快去追上這個標準，需要一段時間。

ECMA賦予了JavaScript新的能力和活力。

編程語言的分類

翻譯器

計算機不能直接理解任何除機器語言以外的語言，所以必須要把程序員所編寫的語言翻譯成機器語言，計算機才能執行程序。程序語言翻譯成機器語言的工具，被稱為翻譯器。

由此可見，所謂的“翻譯”，指的是翻譯成計算機能夠執行的指令。

翻譯器翻譯的方式有兩種：一種是編譯，另一種是解釋。兩種方式之間的區別在于翻譯的時機不同。

• 編譯器：在代碼執行之前，事前把所有的代碼一次性翻譯好，生成中間代碼文件，然后整體執行。

• 解釋器：邊翻譯，邊執行（在代碼執行時進行及時翻譯，并立即執行）。當編譯器以解釋的方式運行時，也稱之為解釋器。

對應的語言，稱之為“編譯型語言”、“解釋型語言”。

編譯型語言

• 定義：事先把所有的代碼一次性翻譯好，然后整體執行。

• 優點：運行更快。

• 不足：移植性不好，不跨平臺。

• 編譯型語言舉例：c、c++

比如說，c語言的代碼文件是.c后綴，翻譯之后文件是.obj后綴，系統執行的是 obj 文件；再比如， java 語言的代碼文件是.java后綴，翻譯之后的文件是.class后綴。（注意，Java 語言不是嚴格的 編譯型語言，這個一會兒會講）

解釋型語言

• 定義：邊翻譯邊執行（翻譯一行，執行一行），不需要事先一次性翻譯。

• 優點：移植性好，跨平臺。

• 缺點：運行更慢。

• 解釋型語言舉例：JavaScript、php、Python。

Java語言

Java 語言既不是編譯型語言，也不是解釋型語言。翻譯過程：

（1）編譯：.java代碼文件先通過 javac 命令編譯成.class文件。

（2）執行：.class文件再通過 jvm 虛擬機，解釋執行。有了 jvm 的存在，讓 java 跨平臺了。

開始寫第一行JavaScript代碼

JavaScript 代碼的書寫位置在哪里呢？這個問題，也可以理解成：引入 js 代碼，有哪幾種方式。

方式1：行內式

代碼舉例：

<input type="button" value="點我點我" onclick="alert('編程的一拳超人')" />

完整的可執行代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="button" value="點我點我" onclick="alert('編程的一拳超人的方式1')" /></body>
</html>

分析：

• 可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中（以 on 開頭的屬性），比如放在上面的 onclick點擊事件中。

• 這種書寫方式，不推薦使用，原因是：可讀性差，尤其是需要編寫大量 JS代碼時，容易出錯；引號多層嵌套時，也容易出錯。

• 關于代碼中的「引號」，在HTML標簽中，我們推薦使用雙引號, JS 中我們推薦使用單引號。

方式2、內嵌式

我們可以在html 頁面的 <body> 標簽里放入<script type=”text/javascript”></script>標簽對兒，并在<script>里書寫JavaScript 代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript">// 在這里寫 js 代碼alert('編程的一拳超人的方式2');console.log('bianchengdeyiquanchaoren 方式2');</script>
</body>
</html>

分析：

• text表示純文本，因為JavaScript也是一個純文本的語言。

• 可以將多行JS代碼寫到 <script> 標簽中。

• 內嵌式 JS 是學習時常用的方式。

方式3：引入外部的 JS 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 引入外部的 js 文件 --><script src="tool.js"></script>
</body>
</html>

上面這段代碼，依然是放到body標簽里，可以和內嵌的js代碼并列。

另外，引用外部 JS文件的 script 標簽中間不可以再寫代碼。

總結：

我們在實戰開發中，基本都是采用方式3，因為這種方式，可以確保 html 文件和 js 文件是分開的，有利于代碼的結構化和復用。很少會有人把一大堆 js 代碼塞到 html 文件里。

JS一些簡單的語法規則

學習程序，是有規律可循的，程序會有有相同的部分，這些部分就是一種規定，不能更改，我們成為：語法。

（1）JavaScript對換行、縮進、空格不敏感。每一條語句以分號結尾。

也就是說：

代碼一：

<script type="text/javascript">alert("今天藍天白云")alert("我很高興");
</script>

等價于代碼二：

<script type="text/javascript">alert("今天藍天白云");alert("我很高興");
</script>

備注：每一條語句末尾要加上分號，雖然分號不是必須加的，如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源。

（2）所有的符號，都是英語的。比如括號、引號、分號。

如果你用的是搜狗拼音，建議不要用shift切換中英文（可以在搜狗軟件里進行設置），不然很容易輸入中文的分號；建議用ctrl+space切換中英文輸入法。

（3）嚴格區分大小寫。

注釋

我們不要把 HTML、CSS、JavaScript三者的注釋格式搞混淆了。

HTML 的注釋

<!-- 我是注釋  -->

CSS的注釋

<style type="text/css">/*我是注釋*/p{font-weight: bold;font-style: italic;color: red;}</style>

注意：CSS只有/* */這種注釋，沒有//這種注釋。而且注釋要寫在<style>標簽里面才算生效哦。

JavaScript 的注釋

單行注釋：

// 我是注釋

多行注釋：

/*多行注釋1多行注釋2
*/

補充：VS Code中，單行注釋的快捷鍵是「Ctrl + /」，多行注釋的默認快捷鍵是「Alt + Shift + A」。

當然，如果你覺得多行注釋的默認快捷鍵不方便，我們還可以修改默認快捷鍵。操作如下：

VS Code --> 首選項 --> 鍵盤快捷方式 --> 查找“注釋”這兩個字 --> 將原來的快捷鍵修改為「Ctrl + Shift + /」。

Javascript 輸入輸出語句

彈出警告框：alert語句

我們要學習的第一個語句，就是alert語句。

代碼舉例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>alert('編程的一拳超人');</script></body>
</html>

alert（英文翻譯為“警報”）的用途：彈出“警告框”。

上面的代碼中，如果寫了兩個alert()語句的話，網頁的效果是：彈出第一個警告框，點擊確定后，繼續彈出第二個警告框。

控制臺輸出：console.log(“”)

console.log("")表示在控制臺中輸出。console表示“控制臺”，log表示“輸出”。

在Chrome瀏覽器中，按F12即可打開控制臺，選擇「console」欄，即可看到打印的內容。

console.log("")效果如下：

控制臺是工程師、程序員調試程序的地方。程序員經常使用這條語句輸出一些東西，來測試程序是否正確。

普通人是不會在意控制臺的，但是有些網站另藏玄機。有個很有意思的地方是，百度首頁的控制臺，悄悄地放了一段招聘信息：

畢竟做前端的人是經常使用控制臺的。

總結：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己調試用的。

彈出輸入框：prompt()語句

prompt()就是專門用來彈出能夠讓用戶輸入的對話框。用得少，測試的時候偶爾會用。

JS代碼如下：

var a = prompt("請隨便輸入點什么東西吧");
console.log(a);

上方代碼中，用戶輸入的內容，將被傳遞到變量 a 里面，并在控制臺打印出來。

prompt()語句中，用戶不管輸入什么內容，都是字符串。

alert()和prompt()的區別：

• alert() 可以直接使用。

• prompt() 會返回用戶輸入的內容。我們可以用一個變量，來接收用戶輸入的內容。

·