Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！
這篇文章專給…
- 彷彿聽過，對JS似曾相似，但從來沒有真正了解
- 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
- 覺得跟前端工程師錯頻，想了解一下他們星球的語言
- 想學互動式網頁設計，創建屬於自己的第一個網頁天堂
📌 首先，我們來暖暖身，複習一下何謂變數，又何謂宣告變數？
如果把變數比喻成一個個空箱子，撰寫程式的我們就是個居家收納達人，我們可以任意地、隨興地把任何和喜歡的東西（像是襪子、內褲、撲克牌等）擺入不同箱子中。於是，原本空的箱子隨著時間內容物就變得越趨豐富，一個個箱子也逐漸出現有了差異。但你一定會疑惑說都是一樣的箱子要怎麼光看表面就知道裡頭裝了些什麼，這時候就要使用到妙用「標籤紙」來讓每個承裝不同性質物品的箱子擁有名字標籤 (name tag)。而宣告變數就是將箱子取名、並告訴大家裡面收納了什麼的過程，像是我們可以定義一個變數為 irisIsTheQueen：
var irisIsTheQueen = 87;
那麼從這時開始有個叫做 IrisIsTheQueen 的變數，而它的裡頭的值就是 87。
var irisIsTheQueen = 87; console.log(irisTheDumb);
但是若突然問電腦說 IrisTheDumb 是什麼意思，它一定會當場驚呆（想說你怎麼可以講出實話）然後給你一串 “IrisTheDumb is not defined.” 由此可見，如果要電腦找出某個箱子，就必須指名道姓，也必須確定該箱子有裝過東西（有被定義過）唷！
🦖 恐龍君小補充：
變數的範圍有分為全域 (global) 和區域 (local) ，其依據變數擺放位置不同而產生不同效力。
- 全域 (Global) 變數：通用於全部範圍，通通都被囊括。
- 區域 (Local) 變數：僅限於特定函式區域，區域變數的定義不會連動整體一起更改。
🧲 For example,
const irisBaby = () => {
let baby = 'littleI';
console.log(baby); // littleI
};
irisBaby(); // littleI
console.log(baby);
// ReferenceError: baby is not defined我已經把會出現結果於兩斜線（//） 後列出。
() => 此符號為「箭頭函式」，為函式的簡要寫法，若全部展出來長這樣：const irisBaby = function() {….}
由上面舉例可見，在函式內定義的 baby 並不會對函式外的顯示有影響，所以在 { } 外要求印出 console.log(baby); 僅會顯示一大串的英文字 ReferenceError: baby is not defined… ，表示 baby 這個變數還未被定義過（未被儲存於記憶體中過）。相對地，如果改成以下例子，就沒有前一個例子變數遮蔽的情況。
const isSmallIris = 'genius'
const printsmallIris = () => {
return smallIris; // genius
};
console.log(printsmallIris()); // genius
console.log(isSmallIris); // genius因為我們事先將 isSmallIris 定義在函式之外，因此當我們要求電腦顯示 isSmallIris 時，console.log(isSmallIris) 的結果就會產生 “genius”。若要列印出 printmallIris() 也會同樣地會得到想要的效果。因此，我們寫 JS 時必須特別注意定義的「位置和方式」，才不會讓電腦很問號❓唷！（然後又得花時間debug…)
📌 一起來看看JS運算子 (Operator) 有哪些吧！
🔎 這裡只介紹最常用的唷～（如果看完我的介紹對更深入的內容有興趣的話，文末會放上連結，方便日後閱讀完本文後自行自修研究🤓
1. 算術運算子 (Arithmetic Operators)
💛 最基本的運算子就是連小學老師都有教的「加、減、乘、除」
+ 加
– 減
* 乘
/ 除
🧲 For example,
1 + 2 = 3;
1 – 2 = -1;
2 * 2 = 4
2 / 2 = 1;
💛 再來就是國中老師最愛擺出來嚇唬我們的餘數定理🙈 不過不擔心，這裡沒有要折騰你，就是談談單純餘數就好
% 餘數
🧲 For example,
10 % 3 = 1 // 10 除 3 餘 1
聰明的你，應該不難猜到我們 JS 中判斷「奇偶數」的方法～就是讓隨意一個數字 % 2，若餘數結果是 1 該數字即是奇數，能整除的就是偶數嘍！
999999 % 2 = 1 // 奇數
💛 最後一組特別運算子，長成「加加」或「減減」型態，分別表示「加一」或「減一」
+ + 連加１（遞增）— 英文為：increment
– – 連減１（遞減）— 英文為：decrement
🧲 For example,
++a 相似 a++ = a + 1 // 等同於「 a 加一 」
b = ++a 相似 a++ = a + 1 // 等同於「 b 等於 a 加一 」
🎥 插播 💿
「加加」(++) 或「減減」 (–) 放前放後示意上的微小差異就不進行探究，先把結論記起來即可！
🦖 恐龍君小補充：
「加、減、乘、除」符號也可用於連接字串 (String)，譬如說：
var beVerb = "is"
console.log('Iris ' + beVerb + ' intelligent.') // 列應出 "Iris is intelligent."🔔 提醒：記得加空格唷！
我們會把「加、減、乘、除」也視為「字串運算子 (String Operators)」，因為他們也有同時串連字串的ㄎ功能。
2. 指定運算子 (Assignment Operators)
💛 指定運算子顧名思義需要指定一個值給某一變數，譬如若要將 b 值指定給 a 變數（“b is assigned to a”），可以寫成
a = b;
呈上，同理：若要將 a + 1的值指定給 a 變數 ，要表示成：
a = a + 1;
🚫 千萬不要唸成「a 的值等於 a + 1的值」（大錯特錯！）
💛 再來我要來一個常見的特殊寫法，有點類似上一點的「加加」和「減減」，這個特殊寫法長這樣：
a += 1
寫法雖與前一行型態不同，但意思完全相同～ 可以說這是 a = a + 1的懶人（聰明）寫法😎
📎 小結：a = a + 1 === a += 1
同理：
c = c – 3 === c -= 3
f = f * c === f *= c
很容易吧！
3. 比較運算子 (Comparison Operators)
比較運算子相似於我們平時熟悉的「大於、小於和等於」，當然有大於、小於和等於就會有「大於等於、小於等於和不等於」，以下我逐一帶過～
💛 等號（==）
🧲 For example,
6 == 2 * 3 // 兩邊相等，以兩個等號（==）表示
💛 不等號（!=）
‘Iris’ != ‘genius’ // 兩邊不等，用一個驚嘆號（!）一個等號（=）表示
💛 大於（>）、小於（<）、大於等於（>=）、小於等於（<=）
5487 > 87 // 大於
87 < 520 // 小於
3 >= 3 // 大於等於
3 <= 99999 // 小於等於
🦖 恐龍君小補充：
== 不等於 === ，前者「 == 」表示寬鬆的等於（值相等即可），後者表示嚴格定義的等於（值和樣態都不必需相等）
3 == “3” // true 兩邊雖相等，但等號左邊為數字、右邊為字串
3 === 3 // true 兩邊完全相等，所謂完全相等指的是「值」和「樣態」都必須相等
3 === “3” // false 左邊為數字、右邊為字串，在嚴格定義下兩邊不等
4. 邏輯運算子 (Logical Operators)
💛 邏輯AND ，符號表示方式：&&
若前後都是「 true 」，答案才會回傳「 true 」；只要任一邊答案是「 false 」，結果就為「 false 」。理所當然地，如果兩邊都是「 false 」，答案也會是「 false 」，即高中數學交集的概念。
💛 邏輯OR ，符號表示方式：||
只要前後任一者為「 true 」，答案就為「 true 」，即高中數學聯集的概念。
💛 邏輯NOT，符號表示方式：!
即「否定」的概念，「 true 」的 邏輯NOT是「 false 」；「 false 」的 邏輯NOT是「 true 」，就這麼簡單。
🧲 For example, 我們來看看以下情況下會是什麼結果，如果可以話也可以一起跟著做練習唷！
var irisa = true || true; // 回傳結果 true var irisb = false && true; // 回傳結果 false var irisc = false || true; // 回傳結果 true var irisd = false || (3 == “3”); // 回傳結果 false var irise = false && (3 == “3”); // 回傳結果 false var irisf = 'Intelligent' || 'Superb'; // 回傳結果 ‘Intelligent’ var irisg= 'Intelligent' && 'Superb'; // 回傳結果 'Superb' var irish = ! false; // 回傳結果 true
5. 位元運算子 (Bitwise Operators)
位元運算子與 2 進位法密切相關，因此不熟悉 2 進位法的人可能要先惡補一下再進行這個 part 嘍！
先備知識：
10 以 2 進位法表示：1010 (2 + 8 = 10)
15 以 2 進位法表示：1110 (2 + 4 + 8 = 15)
這邊位元運算子的概念其實與上面邏輯雷同，但取而代之的是 2 進位法思維。
🧲 For example, 以上舉了兩個數字 10 和 15 為例…
💛 & (AND) 兩邊皆須為 1 ，回傳值才會為 1
1010
1110
& ——–(and)
1010 (2 + 8 = 10)
💛 | (OR) 任一邊 1 即回傳值 1
1010
1110
| ——– (or)
1110 (2 + 4 + 8 = 15)
💛 ^ (XOR) 兩邊一樣回傳 0，兩邊不同回傳 1
1010
1110
^ ——– (xor)
0100 (0 + 0 + 8 = 8)
<< 表示「左移」
0100 << 1 // 往左移一位變成 1000； 值從 4 變成 8 （乘兩倍）
>> 表示「右移」
0100 >> 1 // 往右移一位變成 0010； 值從 4 變成 2 （除兩倍）
📌 接著，我們來瞭解一下什麼是 if-else，什麼又是 else if 吧！
這裡說的 if-else 就是我們耳熟能詳的「條件式」，以下用最簡明易懂的說法舉例，希望有了解我的用心～ （對！就是 18 歲的部分！😏
🧲 For example,
if (irisAge > 18) {
console.log(‘It can’t be true’);
} else {
console.log(‘So young a girl!’);
}當 Iris 的年紀的值大於 18 時，回傳訊息： ‘It can’t be true’；除了這個情況之外的年齡值都回傳：‘So young a girl!’
現在我們加入 else if 觀念：
if (irisAge > 18) {
console.log(‘It can’t be true.’);
} else if (irisAge = 18) {
console.log(‘Iris is blooming.’);
} else {
console.log(‘So young a girl!’);
}當 Iris 的年紀的值大於 18 時，一樣回傳訊息： ‘It can’t be true’；當Iris年紀等於 18 時，回傳：‘Iris is blooming.’，除了這個情況之外的年齡值都回傳：‘So young a girl!’
📌 再來，讓我來說說最簡單不需要太多腦版本的「迴圈」觀念吧！
第一部，所謂「迴圈」就是不斷重複一個動作（就像跳針），不過如果你的腦袋都還正常又不想電腦燒壞，應該都不會想讓迴圈無限巡迴，所以正常來說，迴圈都會有終止點。話不多說，直接來看看範例吧！
🧲 For example,
var iris = 87
do {
console.log(iris);
iris += 2
} while (iris < 8787); // 回傳結果為從 87 到 8785 的奇數while 「當」iris 這個變數小於 8787 的情況下，do 「做」以下動作：印出 iris 的對應值，並把 iris 值加 2。以上示範為 do … while 語法，當然還有其他寫法，但我們要的是入門的對吧？
📌 最後，簡單介紹 JS 的常用內建函式後，就可以收工嘍～（耶
1. eval(string)：eval 中輸入的字串或變數會被直接當做程式碼執行
2. isFinite(number)：用於判斷一個數字是否是為有限數值
3. isNaN(xxx)：用於判斷是否為非數字
- 以下兩者為「分析函數」
4. parseInt()：將參數轉換為字串時，會忽略字串前的空格，直到找到第一個非空格的字元。
5. parseFloat()：從第一個字元開始解析參數的每個字元，一路到字串末尾，或解析到碰到一個無效的浮點數字字元為止。
6. number():
若為 Boolean 值，「true」和「false」值將分別被轉換為 1 和 0；若是數字值，僅進行簡單的傳入和返回；若為 null，則會返回 0；最後，如果是 undefined ，則返回NaN。
7. escape()：將字串編碼
8. unescape()：將碼字串解碼
🔥下集預告🔥
下次我們將會介紹Javascript中的大魔王 → ReactJS！有沒有很期待呀～
偷偷跟你們說～小白🙆♀我的JS都是跟Glove大師學的😎
如果對於ReactJS有興趣，或是想增進JS能力（更深入了解），這裡連結我會放上學習資源連結，供想進修的人做參考～
Glove 也有在 Udemy 上開設 JS 課程、打基礎React課程歐！（中文教學）
另外，想做免費練習我這邊介紹Codcaedemy可以做參考（不過是英文的唷🧡～）
希望以上心得筆記和資訊有助於大家更了解JS的運作～ 如果覺得獲益良多歡迎繼續關注我！
有任何問題都不吝指教（底下留言💬），大家一起學習、一起進步喲🗣
那～我們下禮拜見嘍！👋👋👋
references 參考資料：
- https://www.fooish.com/javascript/operator.html
- https://ithelp.ithome.com.tw/articles/10204290
- https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators
- https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/loop.html
- https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects
- https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/250542/
