昨天終於成功讓按鈕會變色、放大，甚至還會往上跳一下。

看起來好像很厲害。

結果今天想說，那不然來讓按鈕真的做點事情好了！

例如：

按一下按鈕，畫面上的文字就跟著改變。

結果按下去。

……

沒反應。

再按一次。

……

還是沒反應。

不是欸！昨天滑鼠過去你還會打招呼，今天叫你做點事情就開始裝死是不是 ==

所以今天終於輪到 JavaScript 登場啦！

CSS 跟 JavaScript 到底差在哪？

前面幾天一直在跟 CSS 奮鬥。

從置中、Flexbox、Grid，到昨天的 Hover 效果。

但仔細想想，這些大部分都還是在處理：

網頁要長什麼樣子？

東西要怎麼排列？

滑鼠移過去要變成什麼樣子？

但如果今天想要：

「使用者按下按鈕後，改變畫面上的文字。」

這時候就可以透過 JavaScript 來處理。

簡單來說，我目前會先這樣記：

• HTML： 負責網頁的結構跟內容。
• CSS： 負責網頁的外觀跟排版。
• JavaScript： 負責處理互動與程式邏輯。

如果把網頁想成一個人……

HTML 是骨架。

CSS 是衣服跟造型。

JavaScript 就是讓這個人可以開始做事情。

不然前面打扮得漂漂亮亮，結果叫他動一下，他只會站在那邊 XD

先來一顆會做事的按鈕

今天先不做太複雜的東西。

目標很簡單：

按一下按鈕，讓文字改變！

先準備 HTML：

<h1 id="message">你今天過得好嗎？</h1>

<button id="btn" type="button">
  點我一下！
</button>

目前畫面上會出現一段文字跟一顆按鈕。

但是這時候不管怎麼按，文字都不會改變。

畢竟我們還沒告訴它：

「欸！有人點你的時候，你要做什麼啦！」

JavaScript：來，開始上班！

接著在 HTML 的 </body> 前面加上：

<script>
  const btn = document.querySelector("#btn");
  const message = document.querySelector("#message");

  btn.addEventListener("click", function () {
    message.textContent = "今天也是努力活著的一天 XD";
  });
</script>

然後重新整理網頁。

按一下按鈕。

原本的：

「你今天過得好嗎？」

就會變成：

「今天也是努力活著的一天 XD」

欸！！！

終於有反應了！！！

原來你不是不會做事，是我之前根本沒交代你要幹嘛。

好啦，錯怪你了 XD

等等，剛剛那幾行到底在忙什麼？

雖然功能成功了，但還是來拆一下剛剛的程式碼。

首先 javascript：

const btn = document.querySelector("#btn");

document.querySelector() 可以用來找到網頁中符合指定 CSS 選擇器的第一個元素。

這裡的 #btn 就是找到 html：

<button id="btn">

接著 javascript：

const message = document.querySelector("#message");

就是找到剛剛那段文字。

這樣 JavaScript 才知道：

「喔～所以你要我去找這顆按鈕跟這段文字。」

不然它怎麼知道我要改哪裡？

總不能叫它自己通靈吧 XD

addEventListener：有人點你，記得回應一下！

再來是今天最重要的地方 javascript：

btn.addEventListener("click", function () {
  message.textContent = "今天也是努力活著的一天 XD";
});

其中 javascript：

addEventListener("click", ...)

就是幫按鈕設定一個事件監聽器。

當使用者點擊這顆按鈕時，就執行裡面的程式碼。

而 javascript：

message.textContent = "今天也是努力活著的一天 XD";

就是把原本的文字內容改掉。

所以整個流程其實就是：

找到按鈕 → 等待點擊 → 找到文字 → 修改文字。

嗯。。。。。。。

聽起來突然很簡單欸。

但至少這次不是只看懂別人的程式碼，而是真的讓畫面有反應了！

再來玩一下：按一下換一句話！

既然都會改文字了，那乾脆再多玩一點。

這次準備幾句不同的文字，每按一次就換一句。

HTML 一樣：

<h1 id="message">今天想說什麼？</h1>

<button id="btn" type="button">
  點我一下！
</button>

JavaScript 改成：

const btn = document.querySelector("#btn");
const message = document.querySelector("#message");

const messages = [
  "今天也是努力活著的一天 XD",
  "你是不是又在摸魚？",
  "不要再按了啦！！！",
  "好啦，最後一次！"
];

let index = 0;

btn.addEventListener("click", function () {
  message.textContent = messages[index];

  index = (index + 1) % messages.length;
});

這樣每按一次，就會顯示不同的文字。

按到最後一句之後，還會重新回到第一句。

這裡順便用到了：

const：宣告不需要重新指定值的變數。

let：宣告之後還需要重新指定值的變數。

messages：用陣列放想顯示的文字。

至於這行：

index = (index + 1) % messages.length;

主要就是讓索引每次加一，超過最後一筆時再回到第一筆。

很好，現在連按鈕都開始會跟我頂嘴了 XD

今天的小心得

今天終於從 CSS 進到 JavaScript。

前面一直在處理：

「這個東西怎麼排？」

「怎麼讓它置中？」

「怎麼讓它變色？」

今天終於可以開始處理：

「使用者做了什麼，網頁接下來要做什麼？」

而且實際自己寫一次之後，發現一個簡單的按鈕互動，其實就已經包含不少東西。

像是：

• 找到 HTML 元素
• 監聽使用者操作
• 執行對應的程式
• 修改畫面內容

雖然今天只是改幾句文字，但總算讓網頁不再只是站著給我看。

好啦！

Day 14，第二週完成！

30 天挑戰目前進度：

14 / 30

已經快一半了欸！！！

但後面還有 16 天。

嗯……

先不要算了，不然壓力突然又來了 ==

第三週繼續！

至於接下來要跟 JavaScript 吵什麼架……

明天的我再決定 XD