JavaScript快速上手
阿新 • • 發佈：2022-05-09
任務說明：
JavaScript語言有許多語法概念，如函式、事件等。本篇內容只是快速入門介紹，將完成一個網頁基礎互動性功能的實現，以此對JavaScript進行一個基礎認知。
在學習本內容之前，應該已經掌握了一些基礎HTML和CSS知道，如各種標籤的使用，簡單的網頁佈局等。
任務描述：
在頁面上放置3個按鈕，分別為“換紅背景”、“換綠背景”、“換藍背景”，單擊對應按鈕後，頁面背景更換為對應的背景顏色。
任務分解
- 在HTML頁面上放置4個按鈕
- 對4個按鈕分別進行點選事件監聽
- 分別完成4個按鈕點選後的業務功能邏輯程式碼(換背景色)
任務實施
任務一:在HTML頁面上放置4個按鈕
- 建立一個HTML檔案
- 完成以下HTML程式碼編寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>快速入門</title> </head> <body> <button type="button">換紅背景</button> <button type="button">換綠背景</button> <button type="button">換藍背景</button> </body> </html>
任務二：對每個按鈕分別進行點選事件監聽
- 在HTML檔案中，使用script標籤包裹JavaScript程式碼
<head>
<meta charset="utf-8">
<title>快速入門</title>
<script type="text/javascript">
// 在這裡面編寫JavaScript程式碼
</script>
</head>
JavaScript的引入共有3種不同方式，這裡我們用的是嵌入式（直接在HTML中使用Script標籤，在裡面編寫JavaScript程式碼）。別外還有行內式和外鏈式。
script標籤可以放在head內（如上），也可以放在body內，或者放在body後面皆可，只是放在不同位置，執行的時間、先後順序是不同的（HTML是自上而下解析執行的）。
- 增加按鈕的onclick屬性
<head>
<meta charset="utf-8">
<title>快速入門</title>
<script type="text/javascript">
function toRed(){
alert("換紅背景?")
}
function toGreen(){
alert("換綠背景?")
}
function toBlue(){
alert("換藍背景?")
}
</script>
</head>
<body>
<button type="button" onclick="toRed()">換紅背景</button>
<button type="button" onclick="toGreen()">換綠背景</button>
<button type="button" onclick="toBlue()">換藍背景</button>
</body>
當程式程式碼量達到一定數量時，當一段(2行以上就可認為是段)程式碼要重複使用時，為了便於閱讀和維護，我們可以將程式碼模組化、元件化。因此會將一些常用的、重複的功能模組程式碼編寫為函式，之後通過呼叫一個個的函式來完成指定任務，即減少了重複性程式碼，又能使程式碼更加清晰、有條理。
JavaScript提供了一些常用的內建函式，如對話方塊、日誌輸出等等，這些內建函式我們可以直接使用即可。如以上程式碼中 6、9、12行 的程式碼：
alert("換紅背景?")
除了這些內建函式，我們在完成一些功能程式碼時，還需要根據具體情況自定義函式，如以上程式碼中的 5-13行，就共自定義了3個函式。自定義函式的基礎語法如下：
function 函式名(){
// 函式體...
}
事件：