JavaScript 語法 資料型態 (Data Types) 運算子 (Operators)
JavaScript 語言 (JavaScript Programming Language)
JavaScript(簡稱JS)是目前廣泛被用於web瀏覽器的腳本語言(scripting language)，JavaScript屬於直譯語言 (interpreted language)，
不需事先編譯 (compile)，直接在瀏覽器(browser)上執行(最常見於web客戶端瀏覽器)。
JavaScript 如何使用
<script>
... JavaScript 程式碼 ...
</script>
JavaScript 程式碼可以寫在 script 標籤 (HTML tag) 中被瀏覽器執行。而 <script> 標籤可以放在網頁 HTML 的任何地方，像是 <body> 或 <head> 中。
瀏覽器遇到 <script> 標籤時，會停止解析 HTML 文件，來先執行 <script> 裡面的 JS 程式碼，等到執行完程式碼，才會繼續解析接下來的 HTML 文件。
引用 JavaScript 檔案
<script src="JavaScript 檔案位址.js"></script> 註:一般此句是放在 <head> 內
JavaScript 檔案的副檔名，以 .js 結尾。JavaScript 程式碼是寫在 獨立檔案 裡面 (
檔名.js )，檔案內就不用加上 <script> 標籤喔！
JavaScript 語法
JavaScript 程式指令，稱作語句 (statement)，一個程式會由許多語句組成，而瀏覽器會由上至下、由左到右依序執行這些語句。
JavaScript 的每一個語句以分號 ; 來做結束。
註解 (Comment)
寫給開發人員自己看的註釋，註解語法是告訴瀏覽器忽略和不要執行這段語句。
單行註解(雙斜線 //) 和 多行註解 (用 /* 和 */ 符號，被包住在中間的所有字都是註解 */)。
變數 (variable)
用 var 關鍵字來宣告一個變數，用 = 等號來設定一個值 (value) 給變數
var x;
x = 100;
也可以在宣告變數的同時 指定值：
var x = 100;
取的變數名稱 稱做識別字(identifier)，識別字只允許使用字母 a-z A-Z, 數字 0-9, 底線 _ 和錢符號 $
識別字 的開頭 只能是 字母、底線或錢符號，而且大小寫有別的。不能使用JavaScript 的 保留字。
有區分大小寫 (case sensitive)
不像HTML，JavaScript語句是有區分大小寫的，無論是對於變數、函數或物件名稱，如 alert() 寫成 Alert() 是會產生錯誤的。
JavaScript 保留字 是保留來給特殊用途或特定語法使用的，所以不能用來當作 變數名稱，
JavaScript 的保留字有：
break case catch const continue debugger default delete do else finally for function if in instanceof new return switch this throw
try typeof var void while with null true false class enum export extends import super
implements interface let package private protected public static yield
運算子 (Operator)
指定運算子 (assignment operator) = 等號，算術運算子 (arithmetic operator) + - * / ( 加、減、乘、除 )
JavaScript 資料型態 (Data Types)
資料型態 說的是一個 變數 (variable) 裡面儲存的是什麼類型的資料 (value)。
在 JavaScript 中，可以分為兩大類資料型態：
第一種是基本資料型態 (primitive data types)，基本資料型態包含了：
布林值 (Boolean) : 只包含兩種值 true / false
null : null 是一個特殊值 (keyword)，表示這變數裡面沒有東西
undefined : undefined 也是一個特殊值 (keyword)，表示值還沒有定義或還未指定
數值 (Number) : 數值類型的值，像是 42 / 3.14159 / 0
字串 (String) : 像是 'hello world' / 汽車
Symbol
第二種是複合資料型態 (composite data types)，包含了：
陣列 (Array) : 陣列用來儲存多個資料，陣列中的資料數量，就是這個陣列的長度 (length)
物件 (Object) : 基本上，基本資料型態以外的都是物件型態
typeof
typeof 運算字用來判斷一個運算元 (operand) 是什麼資料型態。 例如：
console.log(typeof 'hello'); // 輸出 string
console.log(typeof 123); // 輸出 number
console.log(typeof true); // 輸出 boolean
指定運算子 (Assignment Operators)
指定運算子 用來指定一個 值 給一個 變數。
| 運算子 | 例子 | 說明 |
|---|
| = | x = y | 將 y 值 指定給 x 變數 |
| += | x += y | 意思跟 x = x + y 一樣，將 x y 相加後的值指定回 x 變數 |
| -= | x -= y | 意思跟 x = x - y 一樣，將 x y 相減後的值指定回 x 變數 |
| *= | x *= y | 意思跟 x = x * y 一樣，將 x y 相乘後的值指定回 x 變數 |
| /= | x /= y | 意思跟 x = x / y 一樣，將 x y 相除後的值指定回 x 變數 |
| %= | x %= y | 意思跟 x = x % y 一樣，將 x 除以 y 的餘數指定回 x 變數 |
| **= | x **= y | 意思跟 x = x ** y 一樣，將 x 的 y 次方值指定回 x 變數 |
| <<= | x <<= y | 意思跟 x = x << y 一樣，將 x 所有位元左移 y 位，右邊的位元補入 0 後的值指定回 x 變數 |
| >>= | x >>= y | 意思跟 x = x >> y 一樣，將 x 所有位元右移 y 位，最左邊的位元 (sign bit) 補入跟原本最左位元一樣值後指定回 x 變數 |
| >>>= | x >>>= y | 跟 >>= 一樣，但最左邊的位元補 0 |
| &= | x &= y | 意思跟 x = x & y 一樣，將 x y 做位元 AND 運算後的值指定回 x 變數 |
| ^= | x ^= y | 意思跟 x = x ^ y 一樣，將 x y 做位元 XOR 運算後的值指定回 x 變數 |
| |= | x |= y | 意思跟 x = x | y 一樣，將 x y 做位元 OR 運算後的值指定回 x 變數 |
比較運算子 (Comparison Operators)
用來 比較運算子兩邊 運算元 的關係，比較後傳回 true 或 false。運算元可以是數值、字串、表達式 (expression) 或物件等。
對於不同型態的值，JavaScript 會嘗試將他們轉型 (type conversion) 到同樣型態後，再做比較，通常是先轉到數值型態。
| 運算子 | 例子 | 說明 |
|---|
| == | 3 == var1
'3' == var1 | 如果兩邊相等就返回 true |
| != | var1 != 4
var2 != '3' | 如果兩邊不相等就返回 true |
| === | 3 === var1 | 跟 == 的差異在於，=== 不會自動嘗試轉型，型態和值都一樣才會返回 true |
| !== | var1 !== '3'
3 !== '3' | 跟 != 的差異在於，!== 不會自動嘗試轉型，型態或值不一樣都會返回 true |
| > | var2 > var1
var1 > 2 | 如果左邊運算元大於右邊的就返回 true |
| >= | var2 >= var1
var1 >= 3 | 如果左邊運算元大於或等於右邊的就返回 true |
| < | var2 < var1
var1 < 2 | 如果左邊運算元小於右邊的就返回 true |
| <= | var2 <= var1
var1 <= 3 | 如果左邊運算元小於或等於右邊的就返回 true |
算術運算子 (Arithmetic Operators)
算術運算子用來做常見的數值運算。
| 運算子 | 例子 | 說明 |
|---|
| + | var1 + 10 | 加法 |
| - | var1 - var2 | 減法 |
| * | 10 * 10 | 乘法 |
| / | var1 / 10 | 除法 |
| % | 12 % 5 | (餘數) 模數運算子 (Remainder)，以某運算式的值除以另一個運算式的值，並傳回餘數。12 % 5 等於 2 |
| ++ | ++10
++x
x++ | 遞增運算子 (Increment)，每次將變數的值加一。
如果運算子在變數之前，則會在執行運算式之前修改值。如果運算子在變數之後，則會在執行運算式之後修改值。
例1: ++10 等於 11
例2: j = ++k 則 j 的值是 k 的原始值加一
例3: j = k++ 則 j 的值是 k 的原始值，k 會在其值指派給 j 之後遞增
|
| -- | --10
--x
x-- | 遞減運算子 (Decrement)，每次將變數的值減一。
如果運算子在變數之前，則會在執行運算式之前修改值。如果運算子在變數之後，則會在執行運算式之後修改值。
例1: --10 等於 9
例2: j = --k 則 j 的值是 k 的原始值減一
例3: j = k-- 則 j 的值是 k 的原始值，k 會在其值指派給 j 之後遞減
|
| - | -x
-3 | 一元負運算子 (Unary negation)，例如 -x 如果 x 是 3 則 -x 就是負數 3 |
| + | +3
+true | 一元正運算子 (Unary plus)，用在數值上沒啥意義；通常用來做型別轉換，將運算元轉成數值型態。例如 +true 會將布林值 true 轉型成數值 1 |
位元運算子 (Bitwise Operators)
用來做二進制的位元運算，位元運算子會將運算元看作 32 bits 位元來做運算，然後運算完後會返回數值型態的結果。
| 運算子 | 例子 | binary 運算 | 結果 | 說明 |
|---|
| & | 15 & 9 | 1111 & 1001 = 1001 | 9 | Bitwise AND 運算，如果兩個位元都是 1，結果就是 1，否則是 0 |
| | | 15 | 9 | 1111 | 1001 = 1111 | 15 | Bitwise OR 運算，如果任何一個位元是 1，結果就是 1，否則是 0 |
| ^ | 15 ^ 9 | 1111 ^ 1001 = 0110 | 6 | Bitwise XOR 運算，如果位元不相同，結果是 1，否則是 0 |
| ~ | ~15 | ~00000000...00001111 = 11111111...11110000 | -16 | Bitwise NOT 運算，將所有位元的 0 變成 1，1 變成 0 |
Bitwise shift 運算子: (9 的二進制是 1001)
| 運算子 | 例子 | 說明 |
|---|
| << | 9 << 2 = 36 | 左移運算 (Left shift)，將所有位元向左移 n 個位置，右邊的位元補入 0 |
| >> | 9 >> 2 = 2 | 右移運算 (Sign-propagating right shift)，將所有位元向右移 n 個位置，最左邊的位元 (sign bit) 補入跟原本最左位元一樣值，保持正負數一致 |
| >>> | 19 >>> 2 = 4 | 補零右移 (Zero-Fill Right Shift)，跟 >> 一樣，但最左邊的位元補 0 |
邏輯運算子 (Logical Operators)
邏輯運算子用來做布林值 (boolean) 的運算，運算結果傳回 true 或 false。
在真假判斷式中，所有東西都可以轉換為布林值，而除了 null, 數值 0, NaN, 空字串 '' 和 undefined 是 false，其他的值都是 true。
| 運算子 | 例子 | 說明 |
|---|
| && | expr1 && expr2 | Logical AND，如果 expr1 和 expr2 都是 true，就會傳回 true， 否則傳回 false |
| || | expr1 || expr2 | Logical OR，如果 expr1 或 expr2 是 true，就會傳回 true，否則傳回 false |
| ! | !expr | Logical NOT，如果 expr 是 true，就傳回 false，否則傳回 true |
但 && 和 || 還有比較特別的地方，如果運算元的值 不是 布林值，實際上會傳回其中一個運算元的值，看下面 例子：
var foo = 'Cat' && 'Dog'; // foo 是 Dog
var foo = false && 'Cat'; // foo 是 false // 因為 && 遇到 false 的運算元，就會直接返回，不會繼續再往下判斷
var foo = 'Cat' || 'Dog'; // foo 是 Cat // 因為 || 遇到 true 的運算元，就會直接返回，不會繼續再往下判斷
var foo = false || 'Cat'; // foo 是 Cat
三元運算子 (Conditional (ternary) operator)
condition ? val1 : val2
如果 condition 是 true， 就傳回 val1 的結果，否則傳回 val2 的結果。 例如：
var status = (age >= 18) ? 'adult' : 'minor';
// 如果 age 變數大於等於 18，則 status 就會是 adult ; 反之，如果 age 變數小於 18，則 status 就會是 minor
運算子優先權 (Operator precedence)
各種運算子在處理上的優先次序 (precedence) 是依一般算術規則，先乘除後加減，如果你有一些運算要優先處理，可以放在 () 小括號裡面，例如：
100 + 50 / 2 = 125 , (100 + 50) / 2 = 75
這邊整理出 JavaScript 各種運算子的優先權，由高至低排列：
| 運算子 | 優先權 |
|---|
| member | . [ ] |
| call / create instance | ( ) new |
| negation/increment | ! ~ - + ++ -- typeof void delete |
| multiply/divide | * / % |
| addition/subtraction | + - |
| bitwise shift | << >> >>> |
| relational | < <= > >= in instanceof |
| equality | == != === !== |
| bitwise-and | & |
| bitwise-xor | ^ |
| bitwise-or | \ |
| logical-and | && |
| logical-or | || |
| conditional | ?: |
| assignment | = += -= *= /= %= <<= >>= >>>= &= ^= |
| comma | , |
