2024-09-09 JavaScript 系列六：第5課 ── 熟悉匿名函式

發表於 分類於 閱讀次數：
2024-09-09 JavaScript 系列六：第5課 ── 熟悉匿名函式

JavaScript 系列六：第5課 ── 熟悉匿名函式
課程目標
能夠在陣列更新元素

繼續熟悉 anonymous function 的觀念

課程內容
這課先介紹一種資料型態：布林（boolean）

這種資料型態，幾乎所有程式語言都有，是一種寫程式必備的基本資料型態

1
2
3
4
5
6
7
8
9
10
var x = true;
var y = false;

if (x) {
  alert('hello x');
}

if (y) {
  alert('hello y');
}

布林值只有 true 跟 false 兩種，在 if/else 條件流程控制中，會影響程式流程

這種型態，也是建造 data model 時一定會用到的型態

在 JavaScript 更新陣列元素的方法，一樣有非常多種

這邊介紹一種根據索引更新的方法

1
2
3
4
5
var fruits = ['apple', 'banana', 'orange'];

fruits[2] = 'lemon';

console.log(fruits)

老話一句，就是實務上，你就根據情況，隨便找一個能用的方式，來操作陣列就對了

課後作業
接續上一課作業，這次來實作「已完成」按鈕

data model 的結構請更新成這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var todos = [
  {
    title: "倒垃圾",
    category: "normal",
    isCompleted: false
  },
  {
    title: "繳電話費",
    category: "important",
    isCompleted: false
  },
  {
    title: "採買本週食材",
    category: "urgent",
    isCompleted: false
  },
];

請更新 render 函式，讓 UI 看起來像這樣

  • 倒垃圾 [標示為已完成][刪除]

  • 繳電話費 [標示為已完成][刪除]

  • 採買本週食材 [標示為已完成][刪除]
    如果倒完垃圾了，就可以點擊按鈕，來備註已完成，這時才顯示 （已完成） 文字

  • 倒垃圾（已完成）[標示為未完成][刪除]

  • 繳電話費 [標示為已完成][刪除]

  • 採買本週食材 [標示為已完成][刪除]
    然後在 render 過程中，動態產生 button 的時候，將 .onclick 屬性設定為一個 arrow function

這個 arrow function 不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM

1
2
3
4
5
toggleBtn.onclick = () => {
  // 請寫出此 arrow function 內容（更新 todos 陣列）

  render();
};

做出以上功能，你就完成這次的課程目標了！

文章取自: https://codelove.tw/@howtomakeaturn/post/Ja66Xa
by 站長阿川