學習筆記-【前端速成】JavaScript JS 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端

透過3個小時快速對JS有個基礎認識，並且可以實作一個簡易的to do list，從實作中更了解JS。

今日重點：

1. JavaScript JS 2021 快速入門

2. 學習變數、陣列與物件、流程控制 if else、switch case、迴圈控制 for、while、函數Function、類別Class、HTML DOM操作、備忘錄小APP。

3. 建立一個備忘錄app來實作

學習筆記：

關鍵

1. 取得元素控制權

2. 監聽按鈕、獲得新的內容

3. 改變元素內容

4. 監聽按鈕、移除元素內容

5. 整理重複的內容，變成共用的函式

取得元素控制權

const content = document.getElementById(“content”);
const date = document.getElementById("date");
const time = document.getElementById("time");
const addedBtn = document.getElementById("addedBtn");
const deletedBtn = document.getElementById("deletedBtn");
const list = document.getElementById("list");

監聽按鈕、獲得新的內容

const listContent = [];
addedBtn.addEventListener("click", function () {
  listContent.push({
    content: content.value,
    date: date.value,
    time: time.value,
  });
});

改變元素內容

let contentText = '';
listContent.forEach(function (item) {
  contentText = contentText +`
  <div class="item">
    <div>
      <p>內容：${item.content}</p>
      <p>時間：${item.date}${item.time}</p>
    </div>
  </div>
  `;
});

list.innerHTML = contentText;

監聽按鈕、移除元素內容

deletedBtn.addEventListener(‘click’, function(){
  listContent.pop();
  let contentText = '';
  listContent.forEach(function (item) {
  contentText = contentText +`
    <div class="item">
      <div>
        <p>內容：${item.content}</p>
        <p>時間：${item.date}${item.time}</p>
      </div>
    </div>
    `;
  });
list.innerHTML = contentText;
});

整理重複的內容，變成共用的函式

addedBtn.addEventListener(“click”, function () {
  listContent.push({
    content: content.value,
    date: date.value,
    time: time.value,
  });
  render();
});
deletedBtn.addEventListener('click', function(){
  listContent.pop();
  render();
});

上面的render();是將原本兩個監聽事件重複的內容整理成一個函式

function render(){
  let contentText = '';
  listContent.forEach(function (item) {
    contentText = contentText +`
      <div class="item">
        <div>
          <p>內容：${item.content}</p>
          <p>時間：${item.date}${item.time}</p>
        </div>
      </div>
      `;
  });
list.innerHTML = contentText;
});

小秘訣：

可以到w3schools尋找需要的語法，有很多教學跟使用範例

參考資料

github : 備忘錄APP的原始碼

YT影片：【前端速成】JavaScript JS 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端