課程目標

能夠新增元素到陣列

課程內容

因為我們不再使用「在各處胡亂更新各處 DOM」的寫法

現在要認真開始學習,如何在 JavaScript 中,用各種變數、資料型別,建立出 data model

這一課來學學新增元素到陣列的方法

<button onclick="more()">
  more
</button>
var fruits = ["apple", "banana"];

function more()
{
  fruits.push("orange");
  console.log(fruits);
}

非常簡單,使用陣列的 .push() 函式就可以

在 JavaScript 中,陣列相關操作的函式、寫法,有非常多種

我的建議是,各種寫法都可以,如果你有查到,隨便挑你喜歡的用就可以了

課後作業

接續上一課作業,這次來實作「新增事項」

請在 html 的部份加入「輸入資料的 UI」,大概類似這樣

<input type="text">
<button onclick="add()">新增</button>
<div id="root">
</div>

接著請將 add 函式完成,過程中不能直接更新 DOM,而是先去更新 data model,接著 render,用這種方式間接更新 DOM

function add()
{
  // 請寫出此函式內容(更新 todos 陣列)

  render();
}

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


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!

按讚的人:

共有 20 則留言

我有點不清楚意思@@ 是指不在input裡設id或class,要想辦法取到input的值嗎?

不是,id 跟 class 那些可以自由加

但在 add() 函式內,之前都是直接找到元素 .append() 新元素進去,這樣是直接更新 DOM

這一課要改成:去更新 var todos = [] 這個陣列的內容,更新完之後,再執行 render()

請問是這樣嗎? https://jsfiddle.net/birdie2019/7haz6fLj/15/

按讚的人:

沒錯!寫得很好,順利完成!

按讚的人:

作業繳交 https://jsfiddle.net/hr7fyoav/14/

按讚的人:

寫得很好,順利完成!

交作業 https://jsfiddle.net/superyngo/f3jzo49d/7/

按讚的人:

寫得很好,順利完成!

交作業 https://jsfiddle.net/evon0306/h2j375vz/2/

按讚的人:

交作業,再麻煩站長了,謝謝! https://jsfiddle.net/jm85xqnL/1/

按讚的人:

https://jsfiddle.net/wimp9487/tvxLhbgy/38/ 交作業!

按讚的人:

https://jsfiddle.net/ZooeyLai/rpbLqmnd/1/ 交作業~

按讚的人:

寫得很好,順利完成!

作業繳交

https://jsfiddle.net/mb2902911/7qa9wL31/1/

按讚的人:

交作業 https://codepen.io/adens123/pen/PoVENmw

按讚的人:

交作業了 https://jsfiddle.net/jge3q54o/

按讚的人:

交作業了~ https://jsfiddle.net/erika_sun/v9rp1f3k/38/

按讚的人:

2024.02.15 https://jsfiddle.net/9akhz21r/1/

按讚的人: