以下是正文。
JavaScript簡介
Web前端有三層：
-
HTML：從語義的角度，描述頁面結構
-
CSS：從審美的角度，描述樣式（美化頁面）
-
JavaScript：從交互的角度，描述行為（提升用戶體驗）
JavaScript歷史背景介紹
布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。
一開始JavaScript叫做LiveScript，但是由於當時Java這個語言特別火，所以為了傍大牌，就改名為JavaScript。如同“北大”和“北大青鳥”的關系。“北大青鳥”就是傍“北大”大牌。
同時期還有其他的網頁語言，比如VBScript、JScript等等，但是后來都被JavaScript打敗了，所以現在的瀏覽器中，只運行一種腳本語言就是JavaScript。
JavaScript和ECMAScript的關系
ECMAScript是一種由Ecma國際（前身為歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）制定的標准。
JavaScript是由公司開發而成的，問題是不便於其他的公司拓展和使用。所以歐洲的這個ECMA的組織，牽頭制定JavaScript的標准，取名為ECMAScript。
簡單來說，ECMAScript不是一門語言，而是一個標准。符合這個標准的比較常見的有：JavaScript、Action Script（Flash中用的語言）。就是說，你JavaScript學完了，Flash中的程序也就輕而易舉了。
ECMAScript在2015年6月，發布了ECMAScript 6版本，語言的能力更強（也包含了很多新特性）。但是，瀏覽器的廠商不能那么快去追上這個標准。
JavaScript的發展：蒸蒸日上
2003年之前，JavaScript被認為“牛皮鮮”，用來制作頁面上的廣告，彈窗、漂浮的廣告。什么東西讓人煩，什么東西就是JavaScript開發的。所以瀏覽器就推出了屏蔽廣告功能。
2004年，JavaScript命運開始改變，那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。並且，那時候人們逐漸開始提升用戶體驗了。Ajax有一些應用場景。比如，當我們在百度搜索框搜文字時，輸入框下方的智能提示，可以通過Ajax實現。比如，當我們注冊網易郵箱時，能夠及時發現用戶名是否被占用，而不用調到另外一個頁面。
2007年喬布斯發布了第一款iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。
JavaScript在移動頁面中，也是不可或缺的。並且這一年，互聯網開始標准化，按照W3C規則三層分離，JavaScript越來越被重視。
2010年，人們更加了解HTML5技術，HTML5推出了一個東西叫做Canvas（畫布），工程師可以在Canvas上進行游戲制作，利用的就是JavaScript。
2011年，Node.js誕生，使JavaScript能夠開發服務器程序了。
如今，WebApp已經非常流行，就是用網頁技術開發手機應用。手機系統有iOS、安卓。比如公司要開發一個“攜程網”App，就需要招聘三隊人馬，比如iOS工程師10人，安卓工程師10人，前端工程師10人。共30人，開發成本大；而且如果要改版，要改3個版本。現在，假設公司都用web技術，用html+css+javascript技術就可以開發App。也易於迭代（網頁一改變，所有的終端都變了）。
雖然目前WebApp在功能和性能上的體驗遠不如Native App，但是“WebApp慢慢取代Native App”很有可能是未來的趨勢。
JavaScript入門易學性
-
JavaScript對初學者比較友好。
-
JavaScript是有界面效果的（比如C語言只有白底黑字）。
-
JavaScript是弱變量類型的語言，變量只需要用var來聲明。而Java中變量的聲明，要根據變量的類型來定義。
比如Java中需要定義如下變量：
int a;
float a;
double a;
String a;
boolean a;
而JavaScript中，只用定義一個變量：
var a;
- JavaScript不用關心其他的一些事情（比如內存的釋放、指針等），更關心自己的業務。
JavaScript是前台語言
JavaScript是前台語言，而不是后台語言。
JavaScript運行在用戶的終端網頁上，而不是服務器上，所以我們稱為“前台語言”。JavaScript就是一個簡單的制作頁面效果的語言，就是服務於頁面的交互效果、美化、絢麗、不能操作數據庫。
后台語言是運行在服務器上的，比如PHP、ASP、JSP等等，這些語言都能夠操作數據庫，都能夠對數據庫進行“增刪改查”操作。Node.js除外。
JavaScript的組成
JavaScript基礎分為三個部分：
-
ECMAScript：JavaScript的語法標准。包括變量、表達式、運算符、函數、if語句、for語句等。
-
DOM：操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
-
BOM：操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
PS：JS機械重復性的勞動幾乎為0，基本都是創造性的勞動。而不像HTML、CSS中margin、padding都是機械重復勞動。
JavaScript的特點
（1）簡單易用：可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執行程序。
（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。
（3）基於對象：內置大量現成對象，編寫少量程序可以完成目標
開始寫第一行JavaScript代碼
寫JavaScript代碼的位置
頁面中，我們可以在<body>標簽里放入<script type=”text/javascript”></script>標簽對兒，並在<script>里書寫JavaScript程序：
<script type="text/javascript">
</script>
text表示純文本，因為JavaScript也是一個純文本的語言。
PS：在Sublime Text里，輸入<sc后，按tab鍵，可以自動補齊。
alert語句
我們要學習的第一個語句，就是alert語句。
<script type="text/javascript">
alert("生命壹號");
</script>
alert（英文翻譯為“警報”）的用途：彈出“警告框”。
alert("")警告框的效果如下：
這個警告框，在IE瀏覽器中長這樣：
上面的代碼中，如果寫了兩個alert()語句的話，網頁的效果是：彈出第一個警告框，點擊確定后，繼續彈出第二個警告框。
語法規則
學習程序，是有規律可循的，就是程序是有相同的部分，這些部分就是一種規定，不能更改，我們成為：語法。
（1）JavaScript對換行、縮進、空格不敏感。
也就是說：
代碼一：
<script type="text/javascript">
alert("今天藍天白雲");
alert("我很高興");
</script>
等價於代碼二：
<script type="text/javascript">
alert("今天藍天白雲");alert("我很高興");
</script>
備注：每一條語句末尾要加上分號，雖然分號不是必須加的，但是為了程序今后要壓縮，如果不加分號，壓縮之后將不能運行。
（2）所有的符號，都是英語的。比如括號、引號、分號。
如果你用的是搜狗拼音，建議不要用shift切換中英文（可以在搜狗軟件里進行設置），不然很容易輸入中文的分號；建議用ctrl+space切換中英文輸入法。
注釋
我們不要把html、CSS、JavaScript三者的注釋格式搞混淆了。
（1）html的注釋：
<!-- 我是注釋 -->
（2）CSS的注釋：
<style type="text/css">
/*
我是注釋
*/
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>
注意：CSS只有/* */這種注釋，沒有//這種注釋。而且注釋要寫在<style>標簽里面才算生效哦。
（3）JavaScript的注釋：
單行注釋：
// 我是注釋
多行注釋：
/*
多行注釋1
多行注釋2
*/
備注：sublime中，單行注釋的快捷鍵是ctrl+/，多行注釋的快捷鍵是ctrl+shift+/。
Javascript 網頁中輸出信息的寫法
彈出警告框：alert("")
我們在上一段講到了alert語句，這里不再贅述。
控制台輸出：console.log("")
console.log("")表示在控制台中輸出。console表示“控制台”，log表示“輸出”。
控制台在Chrome瀏覽器的F12中。控制台是工程師、程序員調試程序的地方。程序員經常使用這條語句輸出一些東西，來測試程序是否正確。
console.log("")效果如下：
普通人是不會在意控制台的，但是有些網站另藏玄機。有個很有意思的地方是，百度首頁的控制台，悄悄地放了一段招聘信息：
畢竟做前端的人是經常使用控制台的。
接下來，我們開始學習JavaScript語法。
用戶輸入：prompt()語句
prompt()就是專門用來彈出能夠讓用戶輸入的對話框。
JS代碼如下：
var a = prompt("請隨便輸入點什么東西吧");
console.log(a);
上方代碼中，用戶輸入的內容，將被傳遞到變量 a 里面。
效果如下：
prompt()語句中，用戶不管輸入什么內容，都是字符串。
alert和prompt的區別：
alert("從前有座山"); //直接使用，不需要變量
var a = prompt("請輸入一個數字"); // 必須用一個變量，來接收用戶輸入的值
直接量：數字和字符串
“直接量”即常量，也稱為“字面量”。看見什么，它就是什么。
簡單的直接量有2種：數字、字符串。
（1）數值的直接量的表達非常簡單，寫上去就行了，不需要任何的符號。例如：
1 alert(886); //886是數字，所以不需要加引號。
（2）字符串也很簡單，但一定要加上引號。可以是單詞、句子等。
溫馨提示：100是數字，"100"是字符串。
變量
變量的定義和賦值
變量舉例如下：
var a = 100;
如下圖所示：
var是英語“variant”變量的縮寫。后面要加一個空格，空格后面的東西就是“變量名”，
-
定義變量：var就是一個關鍵字，用來定義變量。所謂關鍵字，就是有特殊功能的小詞語。關鍵字后面一定要有空格隔開。
-
變量的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變量。
-
變量名：我們可以給變量任意的取名字。
PS：在JavaScript中，永遠都是用var來定義變量，這和C、Java等語言不同。
變量要先定義，才能使用。比如，我們不設置變量，直接輸出：
<script type="text/javascript">
console.log(a);
</script>
控制台將會報錯：
正確寫法：
var a; // 定義
a = 100; //賦值
console.log(a); //輸出100
有經驗的程序員，會把定義和賦值寫在一起：
var a = 100; //定義，並且賦值100
console.log(a); //輸出100
變量的命名規范
變量名有命名規范：只能由英語字母、數字、下划線、美元符號$構成，且不能以數字開頭，並且不能是JavaScript保留字。
下列的單詞，叫做保留字，就是說不允許當做變量名，不用記：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
大寫字母是可以使用的，並且大小寫敏感。也就是說A和a是兩個變量。
var A = 250; //變量1
var a = 888; //變量2
變量的類型
變量里面能夠存儲數字、字符串等。變量會自動的根據存儲內容的類型不同，來決定自己的類型。
數值型：number
如果一個變量中，存放了數字，那么這個變量就是數值型的。
var a = 100; //定義了一個變量a，並且賦值100
console.log(typeof a); //輸出a變量的類型
上方代碼的輸出結果為：
number
typeof()表示“獲取變量的類型”，語法為：
typeof 變量
在JavaScript中，只要是數，就是數值型(number)的。無論整浮、浮點數（即小數）、無論大小、無論正負，都是number類型的。
字符串型：string
現有如下代碼：
var a = "abcde";
var b = "傳智播客";
var c = "123123";
var d = "哈哈哈哈哈";
var e = ""; //空字符串
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
控制台輸出如下：
sting
sting
sting
sting
sting
連字符和加號的區別
鍵盤上的+可能是連字符，也可能是數字的加號。如下：
console.log("我" + "愛" + "你"); //連字符，把三個獨立的漢字，連接在一起了
console.log("我+愛+你"); //原樣輸出
console.log(1+2+3); //輸出6
輸出：
我愛你
我+愛+你
6
總結：如果加號兩邊都是數值，此時是加。否則，就是連字符（用來連接字符串）。
舉例1：
var a = "1";
var b = 2;
console.log(a + b);
控制台輸出：
12
舉例2：
var a = 1;
var b = 2;
console.log("a" + b); //"a"就不是變量了！所以就是"a"+2 輸出a2
控制台輸出：
a2
於是我們明白了，在變量中加入字符串進行連接，可以被同化為字符串。
變量值的傳遞（賦值）
語句：
a = b;
把b的值賦給a，b不變。
將等號右邊的值，賦給左邊的變量；等號右邊的變量，值不變。
來做幾個題目。
舉例1：
//a b c
var a = 1; //1
var b = 2; //1 2
var c = 3; //1 2 3
a = b + c; //5 2 3
b = c - a; //5 -2 3
c = a * b; //5 -2 -10
console.log(a);
console.log(b);
console.log(c);
輸出：
5
-2
-10
舉例2：
//a b c
var a = 1;
var b = 2;
var c = 3; //1 2 3
a = a + b; //3 2 3
b = b + a; //3 5 3
c = c + b; //3 5 8
console.log(a); //3
console.log(b); //5
console.log(c); //8
輸出：
3
5
8
舉例3：
//a b
var a = "1";
var b = 2; //"1" 2
a = a + b; //"12" 2
b = b + a; //"12" "212"
console.log(a); //輸出12
console.log(b); //輸出212
輸出：
12
212
舉例4：
//a b
var a = "1";
var b = 2;
a = b + a; //"21" 2
b = b + a; //"21" "221"
console.log(a); //21
console.log(b) //221
效果：
21
221
舉例5：（這個例子比較特殊，字符串減去數字）
var a = "3";
var b = 2;
console.log(a-b);
效果：（注意，字符串 - 數值 = 數值）
1
變量格式轉換
用戶的輸入
我們在上面的內容里講過，prompt()就是專門用來彈出能夠讓用戶輸入的對話框。重要的是：用戶不管輸入什么，都是字符串。
parseInt()：字符串轉數字
parseInt()可以將字符串轉數字。parse表示“轉換”，Int表示“整數”（注意Int的拼寫）。例如：
字符串轉數字的方法：
parseInt(“5”);
得到的結果是數字5。
parseInt()還具有以下特性：
（1）帶有自動凈化的功能；只保留字符串最開頭的數字，后面的中文自動消失。例如：
console.log(parseInt("2017年在公眾號上寫了6篇文章");
控制台輸出：
2017
（2）自動帶有截斷小數的功能：取整，不四舍五入。
例1：
var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
控制台輸出：
9
例2：
var a = parseInt(5.8 + 4.7);
console.log(a);
控制台輸出：
10
我的公眾號
想學習代碼之外的軟技能？不妨關注我的微信公眾號：生命團隊（id：vitateam）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
