Javascript基礎語法
如何在頁面中插入Javascript？
我們可以像添加 CSS 那樣將 JavaScript 添加到 HTML 頁面中。CSS<link>使用元素鏈接外部樣式表，使用<style> 元素向 HTML 嵌入內部樣式表，JavaScript 這里只需一個元素<script>。
內部Javascript
首先，新建index.html。放在一個文件中
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//編寫Javascript代碼
</script>
</body>
</html>
<script type="text/javascript">表示在<script></script>之間的是文本類型(text),javascript是為了告訴瀏覽器里面的文本是屬於JavaScript語言。
外部Javascript
能不能把 JavaScript 代碼放置在一個外部文件中呢？我們來研究一下
-
首先，在剛才的html文件所在的目錄下創建一個名為script.js的新文件。請確保文件擴展名為.js,只有這樣才能被識別為Javascript代碼。
-
將
script元素替換為<script src="script.js" async></script>
3.在script.js文件中，我們就可以編寫Javascript代碼
認識Javascript語句和注釋
JavaScript語句
在前言篇中，我們了解到Javascript代碼最終是被瀏覽器解釋運行的，可以簡單的認為這些語句是發給瀏覽器的一些指令。這些指令的作用是告訴瀏覽器要做的事情。
每一句Javascript代碼都以;作為結束當前語句。
看看下面的代碼：
<script type="text/javascript">
alert("MJJ!");
</script>
上述代碼中的alert("MJJ!");就是一個Javascript語句。
注意
;分號必須是英文狀態下的，同樣，JS中的代碼和符號都要在英文狀態下輸入。- 雖然分號
;也可以不寫，但我們要養成良好的編程習慣，記得在語句末尾寫上分號。
注釋
跟HTML和CSS一樣，在JS中也會用到注釋。它的高效使用可以提高代碼的可讀性，幫助自己和別人閱讀和理解您所編寫的Javascript代碼。注釋可分為單行注釋和多行注釋兩種。
單行注釋
在JS中以//凱歐知道行末的字符被視為行注釋，注釋是給開發人員看的，Javascript引擎在執行JS代碼的時候回自動忽略。
//這是一行注釋
alert("MJJ!");//這也是注釋
多行注釋
另一種注釋使用/**/把多行字符包裹起來，把一大塊視為一個注釋：
/*注釋從這里開始
這里是注釋
這里還是注釋
注釋結束*/
存儲你所需要的信息（變量）
變量的概念，從字面意義上來看叫可變的量，它和我們初中代碼的方程變量是一樣的。
x = 5
y = 6
x + y = 11
name = "王聰聰"
從編程角度講，變量是用於存儲某種/某些數值的容器。我們可以把變量看作一個紙箱子。為了區分紙箱子，可以用A、B名稱代表不同的盒子。A和B就是盒子的名字（也就是變量的名字）。A中可以存儲王聰聰，B中可以存儲30。
聲明變量
如果我們使用紙箱子裝東西，是不是先要找到紙箱子，那在JS中要想使用紙箱子（變量），你需要做的是先把它造出來——更准確的說，要聲明一個變量（找到紙箱里）。聲明變量使用關鍵字var，語法如下
var 變量名;
var就相當於找紙箱子的動作。
變量名可以任意取名，但要遵循命名規則：
-
變量必須使用字母、下划線(_)或者美元符($)開始。
-
可以使用任意多個英文字母、數字、下划線()或者美元符($)組成。
-
不能使用Javascript關鍵字和Javascript保留字來進行命名
-
變量名嚴格區別大小寫，如A何a是兩個不同的變量
正確： myName _myName $name錯誤： 6name //開頭不能用數字 %name //開頭不能用除(_ $)外特殊符號，如(% + / * 等) name+name //開頭中間不能使用除(_ $)外特殊符號，如(% + /*)
當然，既然我們可以一個一個的找紙箱子，也可以一次性的找多個紙箱子，所以var還可以一次聲明多個變量，變量之間用,逗號隔開。
var x,y;
變量賦值
我們可以把變量看作一個紙盒子，盒子用來存放物品，那如何在變量中存儲內容呢？
我們可以使用"="等號給變量存儲內容
var x = 5;//聲明變量x並將5賦值給x
我們也可以這樣寫：
var x; //聲明變量x
x = 5; //給變量x賦值
注意：這里的"="號的作用是給變量賦值，不是等於號。
更新變量
變量可以看作一個紙盒子，盒子中可以存儲物品，那我也可以去更改存儲的物品。同樣，一旦變量賦值，我們也可以給它一個不同的值來更新它。如：
var x = 5;
x = 10;
變量類型
計算機顧名思義就是可以做數學計算的機器。因為，計算機程序理所應當然地可以處理各種數值。但是，計算機能處理的遠遠不止數值，它可以處理文本、圖形、音頻、視頻、網頁等各種各樣的數據，不同的數據，需要定義不同的數據類型。
Number(數值)
你可以在變量中存儲數字，無論這些數字是像30(整數)這樣，或者像1.234這樣的小數(浮點數)。Javascript不區分整數和浮點數，統一用Number表示。與其它編程語言（Javas）不同的是在JS中你不需要聲明一個變量的類型。比如這樣都是合法的：
var x = 123;
var y = 1.213;
var z = -99;
String(字符串)
字符串是文本的一部分。當你給一個變量賦值給字符串時，你需要用單引號或雙引號把值包括起來，如"王聰聰"和'王聰聰'等等。如下所示：
var name = '王聰聰';
var en = "abc";
單引號和雙引號引用的字符串沒有任何區別
Boolean(布爾值)
布爾值和布爾代數的表示完全一致，最簡單的布爾代數只有兩個元素0和1，將它應用於邏輯中，解釋0為假(false)，1為真(true)。同理，為JS中的Boolean的值也只有2中：true和false。他們通常被用於在適當的代碼之后，測試條件是否成立，比如 3 > 4。這是個表達式，我們都知道3是不會大於4的，所以返回了false。如下代碼：
3>4; //這是一個false值
4>=3;//這是一個true值
以上三種數據類型是我們接下來的本章節經常使用到的。那么在JS中除了像Number、String、Boolean這些極易理解的數據類型，還有像null、undefined、Array、Object、Function數據類型,后面的章節你會更加的了解這些內容。
數字和運算符
人人都愛數學
不得不說在高中學習期間，讓我感覺到最有成就感的當屬快速的解答一道數學題，抬頭挺胸等待老師的答案，™的，老師公布答案，發現錯了哈哈，其實我個人還是非常愛數學的。
有些人喜歡數學，有些人可能討厭數學，還有人介於兩者之間。但我們不得否認，數學是生活的一部分，我們離不開它。比如每個月坐地鐵吃飯開銷，你都會算算自己支付寶中的money，哪怕你上菜市場買菜，都想去跟大爺大媽砍點價。生活中無處不在地算數。
那當然，當我們學習編寫Javascript程序（或任何其他語言），我們所做的很多事情都依賴於處理數值數據，計算新值，得到我們最終的結果。那幸運的是，Javascript有一套可用的全功能的數學功能，接下來我們就重點來學習Javascript中的數學運算吧。
算數運算符
| 運算符 | 名稱 | 作用 | 示例 |
|---|---|---|---|
+ |
加法 | 兩個數相加。 | 6 + 9 |
- |
減法 | 從左邊減去右邊的數。 | 20 - 15 |
* |
乘法 | 兩個數相乘。 | 3 * 7 |
/ |
除法 | 用右邊的數除左邊的數 | 10 / 5 |
% |
求余(有時候也叫取模) | 在你將左邊的數分成同右邊數字相同的若干整數部分后，返回剩下的余數 | 8 % 3 (返回 2，將8分成3份，余下2 。) |
以最簡單的加法為例
10 + 7;
9 * 6;
80 % 3
你也可以嘗試在變量中聲明和初始化一些數字，並嘗試使用總和中的數字。
var num = 10;
num = num + 2;
什么是表達式呢？表達式與數學中的定義相似，表達式是指具有一定的值、用操作符把常數和變量連接起來的代數式。一個表達式可以包含常數或變量。
我們嘗試一下更加復雜的表達式，如：
5 + 10 * 3;
num % 9 * num;
num + num / 8 + 2;
上面的結果，可以超出你的意淫的想法。比如第一道很多同學可能認為是45。其實答案是35。接下來下面的課程中會告訴你答案為什么。
運算符優先級
我們先來看看上面的最后一個例子，例如num的值為40，
num + num / 8 + 2;
一般人，會這樣去運算:40+40等於80，然后8+2等於10，最后80除以10等於8。
如果將以上運算符在瀏覽器的控制台中輸入看一下，你會發現輸出的結果為47：
- 隨意打開一個空白的網頁，f12審查元素。
這是因為運算符優先級，一些運算符將在計算總和的記過中被應用與其它的運算符。Javascript中的運算符優先級與數學運算符優先級相同—乘法和除法總是先完成，然后再算加法和減法。當然了，你也會立馬想到如果我想覆蓋掉運算符優先級，是不是跟數學的一樣，加上（）括號呢？是的。比如下面才是我們想要的結果8。
(num + num) / (8 + 2);
遞增和遞減運算符
有時候，我們需要反復地對一個數值進行添加或減去一個。這個時候我們可以使用增量(++)或遞減(—)運算符來完成。
定義一個新的變量賦值為3。將這個新的變量進行遞增操作
var x = 3;
x++;//相當於x = x + 1;
在控制台中執行以上操作嗎，你會看到返回值為4。這是因為瀏覽器返回當前值，然后增加變量。如果您再次返回變量值，則可以看到它已經遞增：
x;
有的童鞋可能問了，這有什么用啊?目前我們可能使用++和--還做不了任何操作它們常用循環中。例如，你的口袋里有1000塊錢，每天打工賺100塊，7天之后一共有多少啊？這個時候我們配合循環，在加上遞增操作，就能實現我們想要的結果。
賦值運算符
賦值運算符是向變量分配值的運算符。比如：
var x = 3;//將3賦值給變量x
var y = 4;//將4賦值給變量y
x = y; //將變量y的值賦值以定義的變量x,那么變量x重新賦值。x和y有相同的值，4
但是還有一些更復雜的類型，他們提供了有用的快捷方式，可以使您的代碼更加清潔和高效。
如下：
var x = 3;
x = x + 4;
//可以簡寫成
var x = 3;
x += 4;//等價於 x = x + 4;
最常見的如下：
| 運算符 | 名稱 | 作用 | 示例 | 等價於 |
|---|---|---|---|---|
+= |
遞增賦值 | 右邊的數值加上左邊的變量，然后再返回新的變量。 | x = 3;x += 4; |
x = 3;x = x + 4; |
-= |
遞減賦值 | 左邊的變量減去右邊的數值，然后再返回新的變量。 | x = 6;x -= 3; |
x = 6;x = x - 3; |
*= |
乘法賦值 | 左邊的變量乘以右邊的數值，然后再返回新的變量。 | x = 2;x *= 3; |
x = 2;x = x * 3; |
/= |
除法賦值 | 左邊的變量除以右邊的數值，然后再返回新的變量。 | x = 10;x /= 5; |
x = 10;x = x / 5; |
字符串
我們將了解在學習JavaScript時，您應該了解的關於字符串的所有常見事項，例如創建字符串、在字符串中轉義引號，和連接字符串。
語言的力量
語言對人類非常重要——它們是我們交流的重要組成部分。由於Web是一種主要基於文本的媒介，旨在讓人們進行交流和分享信息，因此對我們來說，掌握它所出現的單詞是很有用的。HTML為我們的文本提供了結構和意義， CSS 允許我們精確地設計它的樣式，JavaScript包含許多操作字符串的特性，創建定制的歡迎消息，在需要時顯示正確的文本標簽，將術語排序到所需的順序，等等。
創建一個字符串
1.首先，在控制台中輸入下面的代碼：
var string = 'hello world';
string;
就像我們處理數字一樣，我們聲明一個變量，用一個字符串值初始化它，然后返回值。這里惟一的區別是，在編寫字符串時，我們需要在字符串上加上引號（單引號和雙引號都可以）。
2.如果你之前定義了變量字符串，下面的操作將會起作用
var string = 'hello world';
var newString = string;
newString;
將string的值賦值給badString,賦值之后，兩個字符串的值相等。
單引號和雙引號
在js中可以使用單引號和雙引號來表示字符串。
唯一要注意的是不一致的引號混用代碼可能會讓人很迷惑。特別是如果您在同一個字符串中使用不同的引號！
下面將返回一個錯誤
var name = 'why a apple?";
瀏覽器會認為字符串沒有被關閉。
例如，以下兩種情況是可以的：
var shj = 'Would you eat a "apple"?';
var desc = "I'm MJJ";
轉義字符串中的字符
如果'本身也是一個字符，那就可以用""括起來，比如"I'm MJJ"包含的字符是I，'，m，空格，M，J,J這6個字符。
如果字符串內部既包含'又包含""怎么辦？可以用轉義字符\來標識。比如：
'I\'m \"MJJ\"';
更多細節請參考轉義符號
拼接字符串
拼接是一個很花哨的編程詞，意思是"拼接在一起"。在Javascript中拼接字符串使用加號(+)操作符，之前我們是拿+來做數字加法運算，但是在這種情況下，它做了一下不同的事情。
在控制台中嘗試以下操作：
var one = 'hello ';
var two = 'MJJ';
var joined = one + two;
joined;
變量joined的值為"hello MJJ"
數字和字符串
1.如果一個字符串和一個數字連接時，會發生什么呢？如下：
"MJJ" + 234;
如果在控制台中輸出，你可能會看到一個意向不到的結果。它竟然沒有報錯，運行的很好。
這是因為瀏覽器很聰明的將數字轉換成字符串，並將這兩個字符串拼接在一起。
2.用引號來包括兩個數字，進行+運算。
var myNum = '18' + '30';
查看控制台，會發現打印的結果為'1830'。
typeof myNum;//String
我們可以用typeof操作符來檢查變量是一個數字還是一個字符串。會發現是一個String的數據類型。
數字和字符串之間可以互相轉換么？
3.如果我們定義一個空的字符串，再加上一個數字，那是否就能讓數字轉換成字符串了呢？
var myNum = "" + 234;
typeof myNum;
4.可以通過Javascript提供的Number()把任何的內容轉換成數字。
var myStr = '123';
var myNum = Number(myStr);
typeof myNum;
5.另外每一個數字都有一個名為toString()的方法，它可以將數值轉換成字符串。
var myNum = 123;
var myStr = myNum.toString();
關於什么是方法？可以簡單的認為它是一個功能，一個造某個產品的辦法 ，把myNum可以看作對象，那這個對象它有個辦法能造出自己的產品來，那就是toString()方法 能將數值轉換成數值類型。
數組
我們之前學變量，一個變量只能存儲一個內容。這里以產品為例。每個產品存儲在一個單獨的變量中。然后你想存儲10個、100個甚至1000個產品呢？就需要10個、100個、1000個變量來存儲。如果需要存儲更多的產品，那就會變得更加麻煩。那么Javascript的數組是你最友好的小伙伴，它就解決了我們存儲多個產品的問題。一個數組的變量可以存放多個產品。好比是倉庫，倉庫里有很多這樣的產品。
如下我們如果用數組來存儲多個人。
數組是一個值的集合，每個值都有一個索引號，從0開始，每個索引都有一個相應的值，根據需要添加更多數值。
創建數組
數組由方括號構成，其實包含用逗號分隔的成員。
-
假設我們想在一個數組中存儲一個購物清單——我們會像下面這樣做。
var shopping = ['香蕉','蘋果','牛奶','紅牛']; -
在上述情況下，數組中的每個成員都是一個字符串。牢記，在數組中可以包含任何類型的元素—字符串、數字、對象(后面會講到)、另一個變量，甚至是另一個數組。
var random = ['tree',789,[0,1,2]];
訪問和修改數組元素
-
因為數組中的每個元素是有索引值的，所以我們可以通過索引值來獲取對應的元素值。
shopping[0];//'香蕉' -
通過新值來修改數組中的元素。例如：
shopping[0] = '榴蓮'; console.log(shopping);//['榴蓮','蘋果','牛奶','紅牛']; -
數組中包含數組的話稱之為多維數組。你可以通過將兩組方括號鏈接在一起來訪問數組中的另一個數組。例如上面例子中的random數組，如果你想訪問此數組的另一個數組的第三個元素的值。
random[2][2];//2
獲取數組的長度
你可以通過使用length屬性獲取數組的長度(查看數組有多少個元素)。
shopping.length;//4
通常length屬性也有其他的用途，但常用於循環(后面循環課程中會講解)
條件判斷
在任何的編程語言中，代碼需要依靠不同的輸入作出決定並且采取行動。例如，在游戲中，如果玩家的生命值變成了0，那么游戲就結束了。在天氣應用中，如果在早晨運行，就顯示一張日出的圖片；如果在晚上，就顯示星星和月亮的圖片。接下來，我們將探索在JavaScript中所謂的條件語句是怎樣工作的。
只需一個條件你就可擁有......
人類（以及其他的動物）無時無刻都在做決定，這些決定都影響着他們的生活，從小事（“我是談一個女朋友還是談好兩個女盆友”）到重要的大事（“我應該留在老家享受安逸的生活，還是應該去北上廣深大干一番，回來贏取白富美”）
條件語句結構允許我們來描述在JavaScript中這樣的選擇，從不得不作出的選擇（例如：“一個片還是兩個片”）到產生的結果或這些選擇（也許是“談一個女朋友”可能會“仍然覺得人生不夠完美”，或者是“吃兩個女朋友”可能會“感覺到可以了，但老媽覺得女朋友不好，再談一個”。）
if..else語句
讓我們看看到目前為止你將會在JavaScript中用到的最常見的條件語句類型 —if…else語句
最基本的if..else語法
基本的if…else語法看起來像下面的偽代碼
if(可以的話){
//我要談女朋友
}else{
//不可以談女朋友
}
- 關鍵字 if，並且后面跟隨括號。
- 要測試的條件，放到括號里（通常是“這個值大於另一個值嗎”或者“這個值存在嗎”）。這個條件會利用比較運算符我們會在最后的模塊中討論）進行比較，並且返回true或者false。
- 一組花括號，在里面我們有一些代碼——可以是任何我們喜歡的代碼，並且只會在條件語句返回true的時候運行。
- 關鍵字else。
- 另一組花括號，在里面我們有一些代碼——可以是任何我們喜歡的代碼，並且當條件語句返回值不是true的話，它才會運行。
這段代碼真的非常易懂——它說“如果（if）條件（condition）返回true，運行代碼A，否則（else）運行代碼B”
注意：你不一定需要else和第二個花括號——下面的代碼也是符合語法規則的
if(可以的話){
//我要談女朋友
}
//不可以談女朋友
不過，這里你需要注意——在這種情況下，第二段代碼不被條件語句控制，所以它總會運行，不管條件返回的是true還是false。這不一定是一件壞事，但這可能不是你想要的——你經常只想要運行一段代碼或者另一段，而不是兩個都運行。
最后，有時候你可能會看到 if…else 語句沒有寫花括號，像下面的速記風格：
if (可以的話)
可以談女盆友;
else
不可以談女朋友;
這是完全有效的代碼，但不建議這樣使用——因為如果有花括號進行代碼切割的話，整體代碼被切割為多行代碼，更易讀和易用。
一個更加真實的例子
為了更好的理解這種語法，讓我們考慮一個真實的例子。想像一個孩子被他的父母要求幫助他們做家務。父母可能會說“嗨，寶貝兒，如果你幫我去購物，我會給你額外的零花錢，這樣你就能買得起你想要的玩具了。”在JavaScript中，我們可以這樣表示：
var shoppingDone = false;
if (shoppingDone === true) {
var childsAllowance = 10;
} else {
var childsAllowance = 5;
}
這段代碼顯示的結果是變量 shoppingDone 總是返回 false， 意味着對我們的窮孩子來說很失望。如果孩子去購物的話，就需要依靠我們提供機制來使父母把變量 shoppingDone 變成 true。
else if
上述例子提供我們兩種選擇或結果，但我們如果想要多個選擇和結果呢？
有一種方法來讓你的 if…else 連接你的額外的選擇和結果——使用else if 。每一個額外的選擇要求放到 if() { ... } 和 else { ... } 里——看看下面更多涉及到的例子，比如天氣預報的例子。
var weather = 'sunny';
if(weather == 'sunny'){
//天氣非常棒，可以出去玩耍了
}else if(weather == 'rainy'){
//天氣下雨了，只能在家里呆着
}else if(weather == 'snowing'){
//天氣下雪了，可以出去滑雪了
}
比較運算符
比較運算符通常是用來比較兩個數值是否相等，或者是兩個文本的內容是否一樣。在Javascript中的運算符有如下幾種：
===和!==——判斷一個值是否嚴格等於，或不等於另一個。==和!=—— 判斷一個值是否等於，或不等於另一個<和>——判斷一個值是否小於，或大於另一個。<=和>=——判斷一個值是否小於或等於，或者大於或等於另一個。
那么第一種和第二種嚴格等於和下面的等於有啥區別呢？看個例子。
var a = 5;
var b = '5';
var isEqual = a == b; //true 因為在比較的時候，瀏覽器會把數值5轉換成字符串5去比較
var isEqual2 = a === b; //false 因為a和b比較的不僅僅是值的相等，還比較它們的數據類型
同理，!==和!==跟上面例子是一樣的結論。
嵌套if ... else
將另一個if ... else 語句放在另一個中 - 嵌套它是完全可行的。例如，我們可以更新我們的天氣預報應用程序，以顯示更多的選擇，具體取決於溫度:
var weather = 'sunny';
if(weather == 'sunny'){
if(temperature > 30){
//還是在家里吹空調吧
}else if(temperature<=30){
//天氣非常棒，可以出去玩耍了
}
}
即使代碼全部一起工作，每個if ... else語句完全獨立於另一個。
邏輯運算符：&& ,||,和！
如果要測試多個條件，而不需要編寫嵌套if ... else語句，邏輯運算符可以幫助您。當在條件下使用時，前兩個執行以下操作：
&&— 邏輯與; 使得並列兩個或者更多的表達式成為可能，只有當這些表達式每一個都返回true時，整個表達式才會返回true.||— 邏輯或; 當兩個或者更多表達式當中的任何一個返回true則整個表達式將會返回true.- ! — 邏輯非; 對一個布爾值取反, 非true返回false,非false返回true.
舉一個邏輯 && 的例子, 上述嵌套if..else那段代碼片段可以寫成下面這樣:
var weather = 'sunny';
if(weather == 'sunny' && temperature > 30){
//還是在家里吹空調吧
}else if(weather == 'sunny' && temperature<=30){
//天氣非常棒，可以出去玩耍了
}
所以，只有當weather === 'sunny'並且temperature < 30都返回true時，第一個代碼塊才能運行。
讓我們快速看一個||的例子：
var mathScore = 88;
var enlishScore = 90;
if(mathScore > 70 || enlishScore > 95){
console.log('才可以玩游戲');
}else{
console.log('在家里寫作業');
}
switch語句
if...else 語句能夠很好地實現條件代碼，但是它們還是有缺點的。 它們主要適用於您只有幾個選擇的情況，每個都需要相當數量的代碼來運行，和/或 的條件很復雜的情況（例如多個邏輯運算符）。 對於只想將變量設置一系列為特定值的選項或根據條件打印特定語句的情況，語法可能會很麻煩，特別是如果您有大量選擇。
switch語句在這里是你的朋友——他們以單個表達式/值作為輸入，然后查看多個選項，直到找到與該值相匹配的選項，執行相應的代碼。來點靈感：
switch (expression) {
case choice1:
run this code
break;
case choice2:
run this code instead
break;
default:
actually, just run this code
}
- 關鍵字
switch, 后跟一組括號. - 括號內的表達式或值.
- 關鍵字
case, 后跟一個選項的表達式/值，后面跟一個冒號. - 如果選擇與表達式匹配，則運行一些代碼.
- 一個
break語句, 分號結尾. 如果先前的選擇與表達式/值匹配，則瀏覽器在此停止執行代碼塊，並執行switch語句之后的代碼. - 你可以添加任意的 case 選項
- 關鍵字
default, 后面跟隨和case完全相同的代碼模式 (選項 3–5), except thatdefault之后不需要再有選項, 並且您不需要break語句, 因為之后沒有任何運行代碼. 如果之前沒有選項匹配，則運行default選項.
看個例子重寫天氣預報：
var weather = 'sunny';
switch(weather){
case 'sunny':
//天氣非常棒，可以出去玩耍了
break;
case 'rainy':
//天氣下雨了，只能在家里呆着
break;
case 'snowing':
//天氣下雪了，可以出去滑雪了
break;
default:
//哪里也不出去
}
三元運算符
三元運算符它解決了像if..else塊較少的代碼。如果你只有兩個通過true/false條件選擇。語法如下：
(codition) ? run this code : run this code instead;
讓我們看一下極簡的例子：
var isResult = 1 > 2 '真的' : '假的' ;
我們知道1是不大於2的，它返回了假的。所以isResult的值為'假的'。
循環
要計算1+2+3，我們可以直接寫表達式：
var total = 1+2+3; //6
要計算1+2+3+...+10。勉強也能寫出來
但是，要計算1+2+3+...+10000,直接寫表達式就不可能了。
為了讓計算機能計算成千上萬次的重復運算，我們就需要循環。
for循環基本用法
Javascript的循環有兩種，一種是for循環，通過初始化條件、結束條件和遞增條件來循環執行語句塊，語法如下：
for(初始化條件;結束條件;遞增條件){
//run this code
}
上述例子，如果我想計算1到10000之間的數的和。
var total = 0;
var i;
for(i = 1;i <= 10000; i++){
total = total+ i;
}
console.log(total);//50005000
讓我們來分析一下for循環的控制條件：
- i = 1,這是初始條件，將變量i設置為1
- i<=10000這是判斷條件，滿足時就繼續循環，不滿足則退出循環
- i++ 這是最后循環后的遞增條件，由於每次循環后變量i都會+1。因為它終將在若干次循環后不滿足判斷條件
i<=10000則退出循環
for用於遍歷數組
for循環最常用的地方是利用索引來遍歷數組：
var shopping = ['香蕉','蘋果','牛奶','紅牛'];
var x;
for(var i = 0; i < shopping.length; i ++){
x = shopping[i];
console.log(x);
}
使用break退出循環
for循環的3個條件都是可以省略的，如果沒有退出循環的判斷條件，就必須使用break語句退出循環，否則就是死循環：
var x = 0;
for (;;) { // 將無限循環下去
if (x > 100) {
break; // 通過if判斷來退出循環
}
x ++;
}
continue語句
continue語句中斷循環中的迭代,如果出現了指定的條件,然后繼續循環中的下一個迭代.
var x;
for(var i = 0; i <= 10; i++){
if(i == 3) continue;
x = x + "這個數字是" + i
}
break和continue的區別
看完上面兩個語句的介紹，兩者的區別應該很清晰了，可以說沒必要繼續看下面的。
如果還有一點點的疑惑，下面再來用通俗的語言做一下描述。
假設有皇帝要選美女，那么這時候循環語句開啟，美女挨個讓皇帝過目。
break陛下，不貪心，選中一個美女之后，就終止了選美。
continue陛下，可能比較貪心，選中以后，喊了一句“下一個”，也就是繼續循環的進行。
while循環
for 不是JavaScript中唯一可用的循環類型。for循環在已知循環的初始和結束條件時非常有用。而上述忽略了條件的fox循環容易讓人看不清循環的邏輯。此時在Javascript中的另一種循環則是while循環，使用它最佳。
while循環只有一個判斷條件，條件滿足，就不斷循環，條件不滿足則退出循環。
語法如下：
初始化條件
while(判斷循環結束條件){
//code to run
遞增條件
}
看個栗子：比如我們要計算100以內所有奇數之和，可以用while循環實現。
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
在循環內部變量n不斷自減，直到變為-1時，不再滿足while條件，循環退出。
do...while循環
最后一種循環是do { ... } while()循環，它和while循環的唯一區別在於，不是在每次循環開始的時候判斷條件，而是在每次循環完成的時候判斷條件：
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
用do { ... } while()循環要小心，循環體會至少執行1次，而for和while循環則可能一次都不執行。
函數
什么是函數
在Javascript中另一個基本概念是函數，它允許你在一個代碼塊中存儲一段用於處理一個任務的代碼，然后在任何你需要的時候用一個簡短的命令來調用，而不是把相同的代碼寫很多次。
比如我們要完成多組數和的功能。
var sum;
sum = 3 + 2;
console.log(sum);
sum = 7 + 8;
console.log(sum);
... //不停重復兩行代碼
如果想實現8組數的和，就需要16行diamante，實現的越多，代碼行也就越多。這個時候我們把完成特地功能的代碼塊放到一個函數里，直接調用該函數，就省去了重復輸入大量代碼的麻煩。
由此可見，函數的作用，可以寫一次性代碼，然后反復的重用這個代碼。
代碼如下：
var sum = 0;
//只需要編寫一次
function sum(a,b){
sum = a + b;
console.log(sum);
}
sum(3,2);
sum(5,6);
sum(8,10);
...//只需調用函數即可
定義函數
一個函數定義(也稱為函數聲明，或函數語句)由一些列的function關鍵字組成。例如，以下代碼是一個簡單的計算多組數的和的函數，我們給它命名為sum。
function sum(a,b){
//函數體;
}
- function為函數的關鍵字
- sum為函數的名稱
- sum后面跟隨的
()中的內容叫函數參數列表，a和b用逗號隔開 - 定義函數的Javascript語句，用大括號
{}括起來。
函數調用
函數定義好后，它是不能自動執行的，需要調用它，直接在需要的位置寫函數名。
function sum(a,b){
console.log(a+b);
}
sum(3,5);//調用函數，直接寫函數名
我們把定義函數時傳入的兩個參數a和b叫形參(形式參數，一個將來被代替的參數)，調用函數時傳入的兩個參數叫實參(實際的參數)。
如果向在定義函數時添加多個形參。可以在后面添加多個，注意參數之間用逗號隔開。
函數返回值
我們在計算兩個數之和的時候，可以給函數一個返回值，每次調用該函數，你就能計算出兩個數之和。
function sum(a,b){
return a+b
}
var result = sum(4,5);
通過在函數體中return關鍵字 將計算的結果返回，調用函數之后你會得到該返回值，並用變量result接收。
函數表達式
雖然上面的函數定義在語法上是一個語句，但函數可以由函數表達式創建。這樣的函數可以是匿名的;它不必有一個名稱。例如，函數sum也可以這樣去定義：
var sum = function(a,b){
return a + b;
}
sum(4,5);
但是這種方式只會令人費解，所以我們不要這樣做！創建功能時，最好只要堅持第一種函數定義的方式就可以。
函數作用域和沖突
處理函數時，作用域是非常重要的一個概念。當你創建函數時，函數內定義的變量和其它東西都在它們自己的單獨的范圍內，意味着它們被鎖在自己獨立的房間內。
所有的函數的最外層被稱為全局作用域。在全局作用域內定義的值可以任意地方訪問。
Javascript主要是由於安全性和組織性。有時不希望變量可以在代碼中的任何地方訪問。
例如，假設你有一個HTML文件，它調用兩個外部的Javascript文件，並且他們都有一個相同的名稱定義的變量和函數：
<!-- my HTML file -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
hello();
</script>
//first.js
var name = 'Tom';
function hello() {
alert('Hello ' + name);
}
//second.js
var name = 'Jack';
function hello() {
alert('Hello ' + name);
}
這兩個函數都是用hello()形式調用，但是你只能訪問到 second.js文件的hello()函數。second.js 在源代碼中后應用到HTML中，所以它的變量和函數覆蓋了 first.js 中的。我們稱為這種行為叫代碼沖突。
將代碼鎖定在函數中避免了這樣的問題，並能解決我們代碼沖突的問題
有點像一個動物園。獅子，斑馬，老虎和企鵝都保留在自己的園子中，只能拿到到它們園子中的東西 —— 與其函數作用域相同。如果他們能進入其他園子，就會出現問題。不同的動物會在不熟悉的棲息地內感到真的不舒服 - 一只獅子或老虎會在企鵝的水多的，冰冷的的領域中感到可怕。最糟糕的是，獅子和老虎可能會嘗試吃企鵝！
動物園管理員就像全局作用域 - 他或她有鑰匙訪問每個園子，重新投喂食物，照顧生病的動物等。
看個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Function scope example</title>
</head>
<body>
<script>
var x = 1;
function a() {
var y = 2;
}
function b() {
var z = 3;
}
function output(value){
return value;
}
console.log(output(x)); // 1
console.log(output(y)); // Uncaught ReferenceError: y is not defined
console.log(output(z)); // Uncaught ReferenceError: z is not defined
</script>
</body>
</html>
后面兩個都應該返回錯誤，這是為什么？由於函數作用域,y和z被鎖定在函數a()和b()函數中，所以output()從全局作用域調用時無法訪問他們。
但是，從另一個函數里面調用呢？
function a() {
var y = 2;
output(y);
}
function b() {
var z = 3;
output(z);
}
function output(value){
return value;
}
a();
b();
打印出對應的結果。這樣是沒有問題的，因為output()函數在其他函數的內部被調用。在這種情況下，輸出變量的定義和函數的調用都在同一個作用域中(注：即函數作用域)。output()它可以在任何地方被調用，因為它在全局作用域中被定義。
修改你的代碼如下，如下所示：
function a() {
var y = 2;
output(x);
}
function b() {
var z = 3;
output(x);
}
a();
b();
函數 a()和b()都應該輸出x---1的值。這些沒有問題，因為即使output()的調用與x的定義不在同一個作用域內，但x是一個全局變量，所以在所有代碼中都可用。
注意：相同的范圍規則不適用於循環（for（）{...}）和條件塊（if（）{...}） - 它們看起來非常相似，但它們不一樣！小心不要讓這些困惑。
注意：ReferenceError：“x”未定義錯誤是您遇到的最常見的錯誤。如果您收到此錯誤，並且確定您已經定義了該問題的變量，請檢查它的范圍。
函數內部的函數
在任何地方你都可以調用函數，甚至可以在另一個函數中調用函數。這通常被用作保持代碼整潔的方式。如果你有一個復雜的函數，如果將其分解成幾個子函數，它更容易理解：
function myBigFunction() {
var myValue;
subFunction1();
subFunction2();
subFunction3();
}
function subFunction1() {
console.log(myValue);
}
function subFunction2() {
console.log(myValue);
}
function subFunction3() {
console.log(myValue);
}
只需確保在函數內使用的值正確的范圍. 上面的例子會拋出一個錯誤ReferenceError：MyValue沒有被定義，因為盡管myValue變量與函數調用的作用域相同, 但在函數定義內沒有定義 - 調用函數時運行的實際代碼。為了使這個工作，你必須將值作為參數傳遞給函數，如下所示：
function myBigFunction() {
var myValue = 1;
subFunction1(myValue);
subFunction2(myValue);
subFunction3(myValue);
}
function subFunction1(value) {
console.log(value);
}
function subFunction2(value) {
console.log(value);
}
function subFunction3(value) {
console.log(value);
}