今天來教教 JavaScript 的基礎語法：註解、變數、常數、迴圈、條件、函式 以及 運算。
目的是希望至少能讓你看得懂程式在做什麼，所以教學會較為簡略。
有兩個建議方法，則一即可：
檢查，選擇 console 分頁無論是哪一個方法，你都應該會找到一個打字的地方，貼上以下程式碼，再按下 Enter 試試。
console.log("嗨，你好！")
你應該會看到 嗨，你好！
我建議你在學 JavaScript 時把每個範例都丟到 console 去執行看看，會比較容易理解程式在做什麼。
這段程式碼
// This is JavaScript
let str = "Hello, World!";
function say(s) {
console.log(s);
}
say(str);
執行後會得到：
Hello, World!
你可能會覺得我什麼都還沒說就直接給你看程式碼到底是在搞什麼？
我希望你依照「由上往下執行」的原則，先花 30 秒看著它，記起來，如果可以則試著理解它。
記好了嗎？
其實過程就是：
試著把 變數 和 參數 代換看看，這段程式其實就是執行：
console.log("Hello, World!");
然後 console 就會出現 Hello, World! 了！
如果你還是不太能想像程式執行的過程，可以把程式碼貼到 console 試試。
我們在上面提到了幾個東西：註解、變數、函式，接下來就讓我們進入主題吧！
/* 我
是
多行
註解*/
let a = 1; // 我是單行註解
JavaScript 中的註解有兩種：
單行註解
單行註解用 // 表示，其右邊的部分就是註解。
多行註解
多行註解用 /* 當作起頭， */ 當作結尾，其中間的所有東西都是註解
let a = true; // 布林值 bool
let b = 100; // 數字 number
let c = "一串字"; // 字串 string
let d = [ 10, 20, 30, "Hi", true ]; // 陣列 array
let e = { name: "Tom", age: 1000 }; // 物件 object
JavaScript 中的 let 可用來宣告變數。
// 宣告
let 變數名稱 = 初始值
// 修改
變數名稱 = 新的值
let 宣告的變數範圍是在 {} 之內，意即你在某 {} 內宣告的變數，只能在該 {} 中存取{} 中變數名稱是唯一的，不可重複宣告補充：
- 你可能看過
var，它也是宣告變數，但作用域只受 file block 及 function block 影響。- 其實 array 的類型也是 object，可想成
{0: val1, 1: val2, ...}- 你可能會想讀讀 typeof 來看看各種變數的類型
const name = "Charlie"; // 不可修改
常數使用 const 宣告，其與變數類似，但宣告後即不得修改。
有趣的是，如果你宣告參數為 object 型態，其裡面的東西是可以改的。
const obj = {
x: 100
};
const arr = [];
// 這是允許的
obj.x = 500;
arr.push(true);
// i++ 就等於 i += 1 ，也就是把 i 加一
for(let i = 0; i < 10; i++) {
console.log(i);
}
while(true) {
console.log("Infinite Loop");
}
迴圈就是一直重複執行 {} 中的動作。
FOR LOOP 的構成如下：
for(一開始要做的事; 繼續的條件; 每次完成後做的事) {
// 做其他事
}
一開始要做的事 會在進入迴圈前執行一次，
然後檢查 繼續的條件 是否成立，成立就執行內部的東西，反之則跳出。
每次跑完內部的事情時，會先執行 每次完成後做的事 再做下一輪的檢查。
WHILE LOOP 就更簡單了：
while(繼續的條件) {
// 做事
}
檢查 繼續的條件 是否成立，成立就執行內部的東西，反之則跳出。一直循環直到跳出。
for(let i = 0; i < 100; i++) {
console.log(i);
break;
}
for(let i = 0; i < 100; i++) {
if(i % 2 === 1) continue;
console.log(i);
}
break 會跳出整個迴圈。continue 則跳過一次循環。
// Math.random() 會隨機產生 0 ~ 1 的數
// 所以這有 1/2 的機會執行
if(Math.random() < 0.5) {
console.log("符合條件");
}
if 條件就像是 while 迴圈，但只執行一次 (符合條件) 或零次 (不符合條件)。
let r = Math.random();
// if else
if(r < 1/3) {
} else if(r < 2/3) {
} else {
}
let a = Math.floor(Math.random() * 3) // 可能會是 0 or 1 or 2
// switch
switch(r) {
case 0:
...
break;
case 1:
...
break;
case 2:
...
break;
}
// 宣告一個叫 sum 的函式
function sum(number1, number2) {
return number1 + number2;
}
// 這個跟上面基本上是相同的
let sum = (n1, n2) => n1 + n2;
函式其實就是一連串的動作，以及做動作所需的東西 (參數)。
// 函式宣告
function 函式名稱(參數以逗點分隔) {
/*
做的事情
可以很多
*/
return 回傳值
}
() 內的是參數，{} 內的是動作。
function 有一點需要注意：它會在 block ({}) 中上浮。什麼意思呢？
就是 function abc () {} 寫在後面時 (例如第 1481 行)，可以在前面 (例如第 114 行) 呼叫執行。
就像是提前至 function abc () {} 所在 block 的最上面先宣告。
名稱 = (參數以逗點分隔) => 回傳值
看起來比較簡潔，但如果搞不清楚
this不要亂用
function(...) { ... }
沒有名字，常在做為參數代入其他函式時使用
async function () {}
async () => {}
這個東西是非同步函式，它很特別會回傳 Promise，明天會說。
運算其實很直觀：
let a = 10, b = 10;
a + 1;
console.log(a);
a = a + 1; // a += 1
console.log(a);
b++;
console.log(b);
唯一要注意的，就是運算本身是不會影響到原本的變數的，還需要賦值 (=)。
常用的算數運算子有 + - * /，順便賦值的有 += -= *= /=，可以自己玩玩看。
比較運算子有 < <= > >= == ===。
其中較需要解釋的是 == 與 === 的差異，兩者對於不同型別之間的比較會有不同結果，=== 比較嚴格， == 比較寬鬆。
console.log(1 == "1"); // true
console.log(1 === "1"); // false
另外需要知道的是 || 表示 or、&& 表示 and
現在有個概念就好，之後實際用到時就會比較容易了解了。
; 不是必要的，但我比較習慣加上。因為目的是「看懂」程式，內容有些過度簡化的部分，如果想要深入理解，在這提供兩個資料網站給有興趣的人：
依經驗來看，多看看程式碼與範例，你就會寫了。這兩個網站都是很好的學習資源。
請留言跟我說，這是我第一次寫教學文，一定有一大堆需要改進的地方。
如果對於內容有疑問，我一定會盡可能回覆。
以 9/15 12:00 ~ 9/16 12:00 文章觀看數增加值排名
+297 [Day14] 家裡WiFi被媽媽鎖了怎麼辦? 教你用Python破解WiFi密碼 !
+213 [Day13] 搶 PS5 程式怎麼寫? 動態爬蟲詳細教學!
+212 [Day15] 明天是女友的生日卻忘記準備禮物? 教你三秒做出愛心照片牆!
+190 [Angular 深入淺出三十天：表單與測試] Day01 - 前言
+167 卡夫卡的藏書閣【Book1】- 大綱和Kafka基礎介紹
+158 D14 第七週 前端基礎 JavaScript
+155 Day-1 : Hello Wali 起手式
+148 Day15 - WooCommerce 金流串接實戰
+142 [Day11] 打完疫苗睡死要怎麼發文? 讓程式幫你完成鐵人賽!
+131 [Day9] 記得色情守門員嗎? 教你用Python做簡易版守門員!
原本想再報一個自我挑戰組每天發的，但發現報名時間已經過了...
iThome鐵人賽
看影片追技術