2-1 在沒有 React 以前...，用原生 JavaScript 做一個簡單的計數器

在開始學習 React 以前，我們先來用原生的 JavaScript 來完成一個簡單的計數器，順便複習一下 JavaScript 和 DOM 事件的操作。在後面的單元中，我們會再把這個這個計數器改成用 React 來寫，這麼做的目的是讓你感受使用原生 JavaScript 寫和用 React 寫這兩者差別，體會 React 幫前端工程師解決了什麼樣的痛點。

Imgur

本章節 Github 說明頁#

在這個章節中，將會使用 CodePen 這個線上編輯器來完成，所有的程式碼也都會放在 CodePen 上可供檢視，但為了避免使用者需要手動輸入網址這個麻煩的過程，筆者把所有本章節會使用到的連結、程式碼片段、或是其他的補充說明，都放到本章節 Github 的說明頁上：

Imgur

因此當讀者在閱讀本章的每一單元前，可以先到本章節的 Github 說明頁：

Imgur

完成一個簡單的計數器畫面#

我們先用 CodePen 完成一個簡單的計數器畫面。

首先在 HTML 的部分主要分成三個部分，分別對應到畫面上的「向上箭頭」、「數字」、「向下箭頭」，因此這裡用三個 div 來區分：

<!-- HTML -->
<div class="container">
<!-- 向上箭頭 -->
<div class="chevron chevron-up"></div>
<!-- 數字 -->
<div class="number">256</div>
<!-- 向下箭頭 -->
<div class="chevron chevron-down"></div>
</div>

由於畫面和樣式的調整並不是這本書的重點，所以這裡會很快地說明 HTML 結構，CSS 的部分大家則可以直接透過下方提供的 CodePen 連結打開即可（亦可直接點擊 Github 說明頁的「原生 JavaScript - 計數器起始樣板」），我們已經把 HTML 和 CSS 的部分都建立好了，大家只需要專注在 JavaScript 的部分即可：

Imgur

https://codepen.io/PJCHENder/pen/OJMyGmK

這時候你應該就可以看到頁面上出現計數器的畫面。

如果你想要用一個「完整的頁面」來檢視目前的畫面，可以在 CodePen 右上方點選「Change View」之後按下「Debug mode」：

Imgur

這時會跳出一個獨立的頁面，如果有需要 Debug 的話，使用這個 Debug 頁面較不會被 CodePen 中的其他元素所干擾，因此也更容易找到元素在網頁中的位置。另外，你只需要按下儲存，這個頁面就會保存一份在你的 Dashboard 中了。

讓計數器動起來#

現在已經完成了計數器的畫面，接著我們希望當使用者點擊「向上箭頭」的時候數字增加，當使用者點擊「向下箭頭」的時候數字減少，可以怎麼做呢？

你可以先花 5 ~ 10 分鐘的時間試著嘗試看看，這裡會用到的幾個關鍵字包括 querySelector、addEventListener。如果嘗試了 10 分鐘還沒做出來的話，也不用氣餒，回憶一下你剛剛試著用什麼方法解決這個問題，然後繼續看一下去可以怎麼做。

因為使用者點擊滑鼠的時候要改變數字，所以勢必要去監聽使用者對於「箭頭」的「點擊事件」，因此：

  1. 先透過 querySelector 去選到「箭頭」的元素（即，upElement 和 downElement）
  2. 使用者「點擊」箭頭後要更新網頁中的數字部分，因此一樣透過 querySelector 去選到「數字」元素（即，numberElement）
  3. 透過 addEventListener 監聽使用者的點擊事件（click）
  4. 在增加或減少網頁上的數字前，要先知道「當前網頁上的數字」是多少，這裡可以透過 numberElement.textContent 取得，同時這裡因為取得的數字是字串，所以需先透過 Number() 方法，將字串轉成數值，以便進行加減。
  5. 當前網頁上的數值（currentNumber）進行加減後，透過 textContent 給回修改後的數字。
// JavaScript
// STEP 1: 透過 querySelector 選擇到 HTML 中的「箭頭」元素
const upElement = document.querySelector('.chevron-up');
const downElement = document.querySelector('.chevron-down');
// STEP 2: 透過 querySelector 選擇到 HTML 中的「數字」元素
const numberElement = document.querySelector('.number');
// STEP 3: 監聽 click 事件，並執行對應的行為
upElement.addEventListener('click', (e) => {
// STEP 4: 取得當前網頁上的數字
const currentNumber = Number(numberElement.textContent);
// STEP 5: 將數字增加後帶回網頁上
numberElement.textContent = currentNumber + 1;
});
downElement.addEventListener('click', (e) => {
const currentNumber = Number(numberElement.textContent);
numberElement.textContent = currentNumber - 1;
});

如此，就可以在使用者點擊按鈕之後讓計數器產生對應的變化。完成之後按下儲存，這個頁面就會保存在你的 Dashboard 中了。

換你了：用原生 JavaScript 撰寫簡易的計數器#

現在，請你參考上面的步驟，用原生的 JavaScript 完成計數器的功能吧！

完整的程式碼和畫面可以點擊 Github 說明頁上的「原生 JavaScript - 計數器成品」連結，或透過 QR Code 一樣可以到相同的網址查看：

Imgur

https://codepen.io/PJCHENder/pen/VwevJrz

在沒有 React 以前#

從這個練習中我們可以留意到，在沒有 React 或其他前端框架之前：

  • 如果要處理 DOM 事件（例如，點擊），會需要先透過 JavaScript 選到特定的 HTML 元素後，再透過綁定事件的方式（即，addEventListener）來針對畫面進行直接的修改。
  • 如果想要變更畫面，同樣需要先透過 JavaScript 選擇了某個 HTML 元素後（即，document.querySelector()），才針對這個元素進行修改和操作。

一般當畫面需要變更的資料不多時，透過這種方式確實沒什麼問題，但若我們的畫面中有許多部分都能夠根據使用者的互動去做對應的變化時（例如，Instagram 上有許多貼文都能點擊按愛心），每次都要先選到特定元素，接著才能去綁定事件並修改畫面的動作會變得非常繁瑣，除了程式碼會越來越難以維護之外，直接對畫面進行許多操作也可能會導致效能變差。

那麼，透過 React 可以怎麼幫我們解決這樣的問題呢？讓我們繼續閱讀下去吧。

補充：調整成自己喜歡的 CodePen 設定#

透過 CodePen 的設定，可以將程式編輯的畫面調整成自己偏好的樣式。方式是點擊右上角的頭像後，點選「Setting」：

Imgur

這裡面可以進行許多不同的偏好設定，你可以選擇喜歡的佈景主題、字型、字體大小、縮排長度等等：

imgur

參考#

Edit this page