<!doctype html>
副程式與 onclick 事件驅動

<!doctype html>
<html>
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
               function go(){
                       alert("Hello.");
               }
        </script>
</head>
<body>
<button onclick="go();">我是按鈕</button>
</body>
</html>



input 輸入 與 span 輸出介面
<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>Document</title>
        <script>
                function go1(){
                        var x = document.getElementById("in").value;
                        var y = document.getElementById("out1");
                        var z = document.getElementById("out2");
                        y.innerHTML = x + " 您好~";
                        z.textContent = "JavaScript 測試.";
                }
        </script>
</head>
<body>
<button onclick="go1();">我是按鈕</button><br><br>
<input type="text" id="in" value="內定字" /><br><br>
<span id="out1"> </span><br>
<span id="out2"> </span>
</body>
</html>









onmouseover 與 onmouseout 事件驅動

<html>
<head> </head>
<script>
    function trans(x) {
        x.src="images/a4-1.gif";
    }
    function normal(x) {
        x.src="images/a4-0.gif";
    }
</script>
<body>
         <img src="images/a4-0.gif" onmouseover="trans(this)" onmouseout="normal(this)" alt=""/><br><br>
         滑鼠移過去以後改變圖像<br>
</body>
</html>



上面圖片參考網址：http://ms2.ctjh.ntpc.edu.tw/~luti/99-2week16.htm