Day12 前端網頁開發(3) CSS與分檔撰寫

2024 iThome 鐵人賽

DAY 11

佛心分享-IT 人自學之術

什麼都摸一點！拒絕當不沾鍋！系列第 12 篇

16th鐵人賽

kkeea1020

2024-09-05 06:19:45

187 瀏覽

分享至

“Let us take you into a deeper experience, make a moment a lasting conveyable memory. Let us help build your tribe.”
― Deep Immersion

上一篇做完的程式太過於冗長，所以我們來試著用JavaScript的語法進行優化：

<script>
    let count = 0;
    function updateCount()
    {
        countDisplay.textContent = `Count: ${count}`; 
    }
    const countDisplay = document.getElementById('count');
    const decrementButton = document.getElementById('decrement');
    const resetButton = document.getElementById('reset');
    const incrementButton = document.getElementById('increment');
    decrementButton.addEventListener("click", () => {
        count--;
        updateCount(); 
    });
    resetButton.addEventListener("click", () => {
        count = 0;
        updateCount();
    });
    incrementButton.addEventListener("click", () => {
        count++;
        updateCount();
    });
</script>

我們把原先按按鈕觸發的函數變成匿名函數，這是因為我們之前寫的decrement、reset、increment函數都只用來給單一個事件觸發，所以沒必要特地給該函數名稱，增加可讀性！

(不然原先的寫法可能會讓閱讀Source code的人以為該函數有可能還會在其他地方被使用)

接下來新增一些CSS樣式，另外我將文字與按鈕用一個div 標籤(用於將一坨東西組成一個群體)，有興趣的可以看一下其他提供的屬性：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        h1 {
            font-size: 2em;
        }
        .container {
            text-align: center;
        }
        #decrement{
            background-color: red;
        }
        #reset{
            background-color: white;
        }
        #increment{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="count">Count: 0</h1>
        <button id="decrement">-1</button>
        <button id="reset">Reset</button>
        <button id="increment">+1</button>
    </div>
    ...

大概可以看出CSS的用法，.container的’.’代表class，’#’代表id，都沒加就是標籤。

延伸思考：為什麼要把CSS放在head內呢?

分檔撰寫

一個顯而易見的問題就是將CSS和JavaScript都放在HTML裡面會導致程式結構非常混亂，讓我們把它們分檔撰寫後，再從HTML讀入！

再創建兩個檔案：hello.js和hello.css：

// hello.js
let count = 0;
function updateCount() {
    countDisplay.textContent = `Count: ${count}`;
}
const countDisplay = document.getElementById('count');
const decrementButton = document.getElementById('decrement');
const resetButton = document.getElementById('reset');
const incrementButton = document.getElementById('increment');
decrementButton.addEventListener("click", () => {
    count--;
    updateCount();
});
resetButton.addEventListener("click", () => {
    count = 0;
    updateCount();
});
incrementButton.addEventListener("click", () => {
    count++;
    updateCount();
});

/* hello.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

h1 {
    font-size: 2em;
}

.container {
    text-align: center;
}

#decrement {
    background-color: red;
}

#reset {
    background-color: white;
}

#increment {
    background-color: green;
}

接下來我們只要在hello.html中引入就好：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入CSS檔案 -->
    <link rel="stylesheet" href="hello.css">
</head>
<body>
    <div class="container">
        <h1 id="count">Count: 0</h1>
        <button id="decrement">-1</button>
        <button id="reset">Reset</button>
        <button id="increment">+1</button>
        <!-- 引入JS檔案 -->
        <script src="hello.js"></script>
    </div>
</body>
</html>

下一篇做個簡單的Todo-List~