Web Development 網站開發 (7) - Javascript 基本程式語法
Javascript 是一種程式語言，其核心觀念跟其他程式語言是大同小異。語言的核心元素包含了變數 variable、函式 function、判斷式 if else 以及迴圈 for loop。利用以上的觀念做排列組合可以達成一連串的邏輯處理。
Javascript 是一種程式語言，其核心觀念跟其他程式語言是大同小異。語言的核心元素包含了變數 variable、函式 function、判斷式 if else 以及迴圈 for loop。利用以上的觀念做排列組合可以達成一連串的邏輯處理。
變數 variable
變數的目的是用來儲存資料，這些資料可以在程式執行的過程中被使用、被修改。
變數使用前建議先宣告，雖然 Javascript 允許直接使用變數，但使用未經宣告的變數是非常不推薦。變數宣告有 const 、 let 、var，其中 var 是屬於舊的方法，建議使用 const 跟 let 就好。使用 const 宣告的變數在宣告過後就不能再改變，let 可以允許變數資料的修改。
// 變數宣告
const a = 1;
let b = 2;
const c = a + b;
console.log(a, b, c) // 印出 1, 2, 3
a = 2; // 出錯 - Uncaught TypeError: Assignment to constant variable.
b = 1 // ok變數宣告的時候不需要指定型態，一些基本型態包含 Boolean, Null, Undefined, Number, String, Object 等。
const a = 3;
typeof a; // number
const b = 3.13;
typeof b; // number
const c = true;
typeof c // boolean
const d = "Hello World";
typeof d // string
const e = ""
typeof e // string
typeof undefined // undefined
typeof null // object
// array (array is an object)
const f = [1, 2]
typeof f // object
// object
const g = { a: 1, b: 2 }
函式 function
如果有一些邏輯是需要重複使用的話，函式可以針對這些邏輯做封裝，每一次呼叫函數的時候就會做一樣的事情。定義函數時可以賦予函數名稱，我們可以把一段有意義的邏輯放在函數裡，這也增加了程式的可讀性。
// 定義一個函數 add，其意義就是把兩個數加起來
// 定義函數的時候，裡面的邏輯還不會被執行，需要等此函數被呼叫
// add 後面的 a, b 為此函數的參數，會在函示被呼叫的時候傳進來
// return 則是函式執行完要回傳給呼叫方的資料
function add(a, b) {
const _sum = a + b;
return _sum;
}
// 第一次執行函數
// 1, 2 會被傳進 function add 當作變數 a, b
// line 7 把加總的結果 (3) 再傳回這裡
add(1, 2); // 3
// 幣二次執行函數
// 10, 100 會被傳進 function add 當作變數 a, b
// line 7 把加總的結果 (110) 再傳回這裡
add(10, 100); // 110
判斷式 if else
判斷式的語意就是 if else 這樣的直接，if 後面的條件要求的是 Boolean 的一個條件式。Boolean 這個資料型態就只有兩種 true and false 。
const a = 1;
// 先判斷 if 後面的判斷是是不是成立 (true)，如果成立 (true) 就會執行 if 裡的東西
// 也就是 line 6
if (a == 1) {
alert("a is 1");
}
// a 不等於 2, 所以 a == 2 的結果會是 false，也就是程式不會執行 if 裡的東西 (line 11)
if (a == 2) {
alert("a is 2");
}
function checkIfValueIsOne(x) {
// 如果 x = 1 的時候會執行 line 17, 否則執行 line 19
if (x == 1) {
alert("value is 1");
} else {
alert("value is not 1");
}
}
checkIfValueIsOne(1); // alert value is 1
checkIfValueIsOne(2); // alert value is not 1
更多的判斷可以用 if + else if + else ，也可以自行查看 switch 的用法！
迴圈 for loop
在程式語言裡，如果要重複性的做某件事時，你就需要使用迴圈。
// for (初始時執行; 重複執行條件; 每回合結束完要做的是)
// 以下 for 的執行順序為：
// step 1: 初始時會先做 let i = 0;
// step 2: 因為 i < 10，滿足執行條件，所以進入line 9執行 console.log('hi')
// step 3: for loop 裡的邏輯執行完畢，執行 i++，也就是把i加上1的動作。
// 重複 step 2 直到條件不滿足後停止
for (let i = 0; i < 10; i++) {
console.log('hi');
}
// 最後的結果會是hi被印了10次，每一回合的i是 0,1,2,3,4,5,6,7,8,9還記得上面的資料型態介紹裡有一種型態是 array ? array 就是一個序列的空間讓你存放多筆資料。 在使用 array 的時候很常會搭配 for loop 。
const a = [1, 2, 3, 4, 5]; // 宣告 a 是一個內容為1-5的 array
// 程式的世界裡幾乎都是以 0 為起始，
// 如果要對 array 取值的話就是用 arr[index] 的方式
a[0] // 得到 a 這個 array 的第 0 個元素，也就是 1
a[1] // 2
a[2] // 3
// 更新 array 的某個元素值
a[2] = 10 // 打 a 的第二個元素更新為 10，此時 a = [1, 2, 10, 4, 5]
a.length // 獲取 a 的長度, = 5
// 走訪 array 的所有值然後把它印出來
// 以下會印出 1, 2, 10, 4, 5
for (let i = 0; i < a.length; i++) {
console.log(a[i]);
}
// 把 a 裡的所有元素都 +1
// 以下會印出 2, 3, 11, 5, 6
for (let i = 0; i < a.length; i++) {
a[i] = a[i] + 1;
}
以上的 for loop 語法可能可讀性不是這麼高，不過卻是目前大部分程式語言都在用的方法。在 Javascript 的世界裡大家更愛用的其實是 我們稱之為 functional programming 的一些走訪語法譬如 forEach, map, filter, find 等等。
const a = [1, 2, 3, 4, 5];
// 走訪方法 1
for (let i = 0; i < a.length; i++) {
console.log(a[i]);
}
// 方法 2 forEach，與方法 1 是一樣的邏輯
a.forEach((item) => {
console.log(item)
})Javascript 是一種程式語言，知識內容肯定遠不止這些，有興趣的人可以更深入的研究。推薦 w3schools 的教學 https://www.w3schools.com/js/
