第一個JS範例 - tw511教學網

在進一步介紹 JavaScript 之前，我們首先看一個 JavaScript 範例。通過這個範例，我們將陸續引入一些知識點。在本節，我們不會詳細介紹這些知識點。此處引入它們的目的是為了讓大家了解這些知識點的大致概念，這樣之後在介紹這些知識點時不會太突兀。

例 1 的功能是：初始狀態顯示一個寬度和高度都為 200px，且背景顏色為灰色的 div；當將游標移到 div 上時 div 的寬度變為 400px，背景顏色變為粉紅色；當將游標從 div 上移出時 div 的寬度和背景顏色都恢復為初始樣式。

通過分析可知，上述功能包含兩種效果：一是初始效果，二是動態效果。由此我們可以按照使用 JavaScript 實現網頁動態變化效果的步驟來實現上述功能需求：初始效果可以使用 CSS 來設定，而游標移入、移出所產生的動態效果則使用 JavaScript 來實現。具體程式碼如下所示：

【例 1】第一個 JavaScript 範例。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一個JavaScript範例</title>
<style>
     /*設定div的寬度、高度和背景樣式*/
     div{
         width:200px;
         height:200px;
         background:#CCC;
     }
</style>
</head>
<body>
<div id="div1"></div>
<script>
     //使用document物件呼叫getElmentById()方法獲取文件中的元素
     var oDiv = document.getElementById("div1"); // ①
     //游標移入div上時呼叫函數修改div樣式
     oDiv.onmousemover = changeStyle; // ②
     //alert("hi");   // ③
     //游標移出div時呼叫函數恢復div最初樣式
     oDiv.onmouseout = resetStyle; // ④
     //oDiv.onmouseout=resetStyl;// ⑤
     //alert("hello");     // ⑥
     //定義函數，修改div的寬度和背景顏色
     function changeStyle(){ // ⑦
         oDiv.style.width = "400px";
         oDiv.style.background = "#FCF";
     }
     //定義函數，將div的寬度和背景樣式恢復為最初狀態
     function resetStyle(){ // ⑧
         oDiv.style.width = "200px";
         oDiv.style.background = "#CCC";
     }
</script>
</body>
</html>

上述程式碼在 Chrome 瀏覽器中執行後的初始效果和游標移出 div 後的效果完全一樣，如圖 1 所示。

圖 1：初始效果和游標移出 div 後的效果