一、串接在一起吧

到目前為止學過了好多東西，CSS、HTML、變數、Array、forEach()、DOM 和 Event。每一個看起來都只是小小的功能，但其實把它們組合起來，就可以做出真正會互動的網頁啦!!!

今天就來做一個簡單的「技能清單」。

二、建立按鈕

1. 建立HTML

先建立一個簡易的HTML，建設如下:
這次的功能要做到在點擊按鈕時下方會列出一個清單。

<body>
    <h1 id="title">我的技能</h1>
    <button id="button">顯示我的技能</button>
    <ul id="skillsList"></ul>
    
    <script src="index.js"></script>
</body>

2. 建立JavaScript

1. 先準備技能資料建立一個 skills 的Array，放入四個技能。
2. 找到按鈕，這裡 document.querySelector() 是我們前面學過的 DOM 方法，可以用來找到 HTML 元素。
3. 找到技能清單，一樣使用 document.querySelector() ，但是是存到 skillsList ，之後會將建立好的 <li> 存到 <ul>中。
4. 再來是Event事件，點擊按鈕觸發事件，會列出清單。
5. 接著這裡使用forEach()，它會依序處理 skills 裡面的每一筆資料。
6. document.createElement() 可以用 JavaScript 建立 HTML 元素所以這邊就是將 <li></li> 建立起來然後存到 li 這個變數。
7. 把目前 skill 放進 li 裡面。
8. 前面只是「建立」<li>，它還沒有真正出現在網頁上，appendChild() 就是把這個 <li> 加到 skillsList 裡面。

const skills = ["HTML" , "CSS" , "GSAP" , "JavaScript"];
const button = document.querySelector("#button");
const skillsList = document.querySelector("#skillsList");
button.addEventListener("click", function() {
     skills.forEach(skill => {
        const li = document.createElement("li");
        li.textContent = skill;
        skillsList.appendChild(li);
     });
});

👉🏻 準備技能資料 → 找到按鈕和技能清單 → 點擊按鈕 → forEach 一個一個拿技能 → 建立 <li> → 把技能名稱放進 <li> → 把 <li> 加到網頁

!!!!但是這裡要注意，點擊按鈕時，它會重複出現一樣的技能，為了避免這個情況發生可以新增一段短短的程式碼。

3. 重複出現怎麼辦?

在重複出現的情況下，技能資料會一直無限循環的以清單方式呈現出來，這時候新增一段:

const skills = ["HTML" , "CSS" , "GSAP" , "JavaScript"];
const button = document.querySelector("#button");
const skillsList = document.querySelector("#skillsList");
button.addEventListener("click", function() {
    
    skillsList.innerHTML = ""; //新增這段
    
     skills.forEach(skill => {
        const li = document.createElement("li");
        li.textContent = skill;
        skillsList.appendChild(li);
     });
});

這裡不管點擊幾次清單都不會再重複出現，只會一直呈現四個技能在版面上。

三、結論

到這裡，我們已經不只是練習一個語法，而是把這幾天學到的東西真正組合起來。這也是我覺得學 JavaScript 開始變有趣的地方。因為你會發現：

原來前面學的每一個小技能，最後真的都可以拿來做成一個有趣的網站。
下一篇開始，就要進入一個新的世界。既然別人已經寫好了這麼多好用又好玩的技能，為什麼我們還要全部自己寫？

接下來，就來認識 JavaScript Library!!!!!