網頁的大腦--JavaScript

2023 iThome 鐵人賽

DAY 4

Modern Web

蛤架一個網站好貴喔，那我自己來系列第 4 篇

15th鐵人賽

anngood

團隊好想放假大學

2023-09-19 20:27:17

192 瀏覽

分享至

大家好，今天我們要來講HTML的大腦—JavaScript。

JavaScript是什麼?

首先，我們要來了解JavaScript到底是什麼。
JavaScript是一種用於網頁開發的多用途語言，可以用來為網頁添加動態功能、處理事件、與用戶互動等。如果說HTML是一個人，CSS就是他的衣服，JavaScript就會是他的腦袋。
JavaScript是一種物件導向的程式語言，因為它在設計上將重點放在了物件的概念上，通過物件、類、繼承等概念，使得程式碼的組織和管理變得模組化，同時也使得代碼的重用性更高。

我們先來示範基礎的JavaScript用法:
HTML

<!DOCTYPE html>
<html>
<head>
    <title>我的第一個網頁</title>
    <link rel="stylesheet" type="text/css" href="ann.css">
</head>
<body>
    <h1>Hello World</h1>
    <button class="click_me" onclick="sayHello()">按我</button>
    <p id="message"></p>
    <script src="ann.js"></script>
</body>
</html>

CSS

body {
    font-size:20px;
    background-color: #f0f0f0;
}
h1 {
    color:red;
}
#message{
    color:blue;
}
.click_me{
     width: 100px;
}

JavaScript

function sayHello() {
    document.getElementById("message").textContent = "Hello World";
}

上面的button是js裡面的一種標籤，代表按鈕。我先設置一個click_me的class，方便以後修改。
onclick="sayHello()代表當點擊button會呼叫sayHello()的function。
而我們sayHello()的function寫在.js裡面，透過使用 document.getElementById() 來找到具有特定 id 屬性的元素(message)，然後將元素的內容設置為 "Hello World"。
在css的部分也有針對#message這id及.click_me的class進行修改，所以實際demo出來的網頁會變成這樣。

按完按鈕後