iT邦幫忙

2021 iThome 鐵人賽

DAY 2
2
Modern Web

JavaScript Easy Go!系列 第 2

#2 JavaScript Crash Course 1

今天來教教 JavaScript 的基礎語法:註解變數常數迴圈條件函式 以及 運算
目的是希望至少能讓你看得懂程式在做什麼,所以教學會較為簡略。

準備試玩 JavaScript 的環境

有兩個建議方法,則一即可:

  1. 打開一個瀏覽器新視窗,在畫面中按右鍵,點選 檢查,選擇 console 分頁
  2. 前往 jsconsole.com

無論是哪一個方法,你都應該會找到一個打字的地方,貼上以下程式碼,再按下 Enter 試試。

console.log("嗨,你好!")

你應該會看到 嗨,你好!

我建議你在學 JavaScript 時把每個範例都丟到 console 去執行看看,會比較容易理解程式在做什麼。

先看段程式碼

這段程式碼

// This is JavaScript
let str = "Hello, World!";

function say(s) {
    console.log(s);
}

say(str);

執行後會得到:

Hello, World!

你可能會覺得我什麼都還沒說就直接給你看程式碼到底是在搞什麼?

我希望你依照「由上往下執行」的原則,先花 30 秒看著它,記起來,如果可以則試著理解它。

記好了嗎?

其實過程就是:

  1. 建立資料 str,其值為「Hello, World!」
  2. 定義動作 say,其執行時需要給它一個資料 s
  3. 執行動作 say,並以 str 做為 say 需要的資料 s

試著把 變數參數 代換看看,這段程式其實就是執行:

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 宣告的變數範圍是在 {} 之內,意即你在某 {} 內宣告的變數,只能在該 {} 中存取
  • {} 中變數名稱是唯一的,不可重複宣告

補充:

常數

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(繼續的條件) {
    // 做事
}

檢查 繼續的條件 是否成立,成立就執行內部的東西,反之則跳出。一直循環直到跳出。

Break & Continue

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

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
現在有個概念就好,之後實際用到時就會比較容易了解了。

MDN 對所有運算子完整的說明

補充

  • JavaScript 中的 ; 不是必要的,但我比較習慣加上。

延伸閱讀

因為目的是「看懂」程式,內容有些過度簡化的部分,如果想要深入理解,在這提供兩個資料網站給有興趣的人:

  1. w3schools.com
  2. MDN

依經驗來看,多看看程式碼與範例,你就會寫了。這兩個網站都是很好的學習資源。

看不懂?

請留言跟我說,這是我第一次寫教學文,一定有一大堆需要改進的地方。
如果對於內容有疑問,我一定會盡可能回覆。


每日鐵人賽熱門 Top 10 (0915)

以 9/15 12:00 ~ 9/16 12:00 文章觀看數增加值排名

  1. +297 [Day14] 家裡WiFi被媽媽鎖了怎麼辦? 教你用Python破解WiFi密碼 !
    • 作者: lulu_meat
    • 系列:奇怪的知識增加了!原來程式還可以這樣用?!
  2. +213 [Day13] 搶 PS5 程式怎麼寫? 動態爬蟲詳細教學!
    • 作者: lulu_meat
    • 系列:奇怪的知識增加了!原來程式還可以這樣用?!
  3. +212 [Day15] 明天是女友的生日卻忘記準備禮物? 教你三秒做出愛心照片牆!
    • 作者: lulu_meat
    • 系列:奇怪的知識增加了!原來程式還可以這樣用?!
  4. +190 [Angular 深入淺出三十天:表單與測試] Day01 - 前言
    • 作者: Leo
    • 系列:Angular 深入淺出三十天:表單與測試
  5. +167 卡夫卡的藏書閣【Book1】- 大綱和Kafka基礎介紹
    • 作者: daniel_ho
    • 系列:『卡夫卡的藏書閣』程序猿必須懂的Kafka開發與實作
  6. +158 D14 第七週 前端基礎 JavaScript
    • 作者: sixwings
    • 系列:程式導師實驗計畫第五期 回顧筆記
  7. +155 Day-1 : Hello Wali 起手式
    • 作者: 瓦力每天笑嘻嘻
    • 系列:海邊囝仔帶阿公阿嬤一起學 Ruby On Rails
  8. +148 Day15 - WooCommerce 金流串接實戰
    • 作者: oberon
    • 系列:機智接案生活 - WooCommerce 金流串接實戰
  9. +142 [Day11] 打完疫苗睡死要怎麼發文? 讓程式幫你完成鐵人賽!
    • 作者: lulu_meat
    • 系列:奇怪的知識增加了!原來程式還可以這樣用?!
  10. +131 [Day9] 記得色情守門員嗎? 教你用Python做簡易版守門員!
    • 作者: lulu_meat
    • 系列:奇怪的知識增加了!原來程式還可以這樣用?!

原本想再報一個自我挑戰組每天發的,但發現報名時間已經過了...


上一篇
#1 JavaScript Easy Go!
下一篇
#3 JavaScript Crash Course 2
系列文
JavaScript Easy Go!31

1 則留言

0
limitx0
iT邦新手 5 級 ‧ 2021-09-16 18:48:39

Thanks

我要留言

立即登入留言