認識程式語言(JavaScript)
-
JavaScript-1
Lesson1
【實作一：寵物石頭】
<html> <head> <title>網頁程式設計</title> <script type="text/javascript"> function touchRock() { var userName = prompt("請問您如何稱呼？", '請輸入您的名字。'); if (userName) { alert("很高興能認識您，" + userName + "。"); document.getElementById("rockImg").src="rock_happy.png"; } } </script> </head> <body onload="alert("哈囉, 我是你的寵物石頭。");"> <div style="margin-top:100px; text-align:center"> <img id="rockImg" src="rock.png" alt="iRock" style="pointer" onclick="touchRock();" /> </div> </body> </html>【圖片】
rock.png 
rock_happy.png Lesson2
【實作二：甜甜圈計算】
<!DOCTYPE html> <html> <head> <title>網頁程式設計</title> <script type="text/javascript"> function placeOrder(form) { const DONUTPRICE = 30; var total = 0; var numCakeDonuts = parseInt(document.getElementById("cakedonuts").value); var total = numCakeDonuts * DONUTPRICE; if (document.getElementById("username").value == "") alert("請輸入您的姓名。"); else if (document.getElementById("cakedonuts").value == "") alert("請輸入您要訂購的甜甜圈數量。"); else // Submit order to server.. form.submit(); alert("您訂購了" + numCakeDonuts + "個甜甜圈，每個甜甜圈" + DONUTPRICE + "元，您總共需付" + total + "元。"); } </script> </head> <body> <div id="frame"> <form id="orderform" name="orderform" action="" method="POST"> <div class="field"> 姓名：<input type="text" id="username" name="username" value=""> <div class="field"> 甜甜圈數量：<input type="text" id="cakedonuts" name="cakedonuts" value=""> </div> <div class="field"> <input type="button" value="送出" onclick="placeOrder(this.form);"> </div> </form> </div> </body> </html>Lesson3
【實作三：全民猜猜樂】
<!DOCTYPE html> <html> <head> <title>網頁程式設計</title> <script type="text/javascript"> function changeScene(option) { var message = ""; if (option == 1) { message = "這是紫黃色的三色堇"; curScene = 1; } else if (option == 2) { message = "這是黃紫色的三色堇"; curScene = 2; } else if (option == 3) { message = "這是粉棕色的三色堇"; curScene = 3; } else { message = "這是淡藍色的三色堇"; curScene = 4; } document.getElementById("sceneimg").src = "scene" + curScene + ".png"; alert(message); } </script> </head> <body> <div style="margin-top:100px; text-align:center"> <img id="sceneimg" src="scene1.png" alt="Stick Figure Advengure"><BR> 請選擇： <input type="button" id="decision1" value="1號" onclick="changeScene(1)"> <input type="button" id="decision2" value="2號" onclick="changeScene(2)"> <input type="button" id="decision3" value="3號" onclick="changeScene(3)"> <input type="button" id="decision4" value="4號" onclick="changeScene(4)"> </div> </body> </html>【圖片】
scene1.png 
scene2.png 
scene3.png 
scene4.png Lesson4
【實作四：電影院劃位工具】
<!DOCTYPE html> <html> <head> <title>網頁程式設計</title> <script type="text/javascript"> var seats = [ [false, true, false, true, true, true, false, true, false], [false, true, false, false, true, false, true, true, true], [true, true, true, true, true, true, false, true, false], [true, true, true, false, true, false, false, true, false], ]; var selSeat = -1 function initSeats() { // Initalize the appearance of all seats for (var i = 0; i < seats.length; i++) { for (var j = 0; j < seats[i].length; j++) { if (seats[i][j]) { // Set the seat to available document.getElementById("seat" + ( i * seats[i].length + j )).src = "seat_avail.png"; } else { // set the seat to unavailable document.getElementById("seat" + ( i * seats[i].length + j )).src = "seat_unavail.png"; } } } } function findSeat() { // If seats already selected, reinitialize all seats to clear them if ( selSeat >= 0 ) { selSeat = -1; initSeats(); } // Search through all the seats for availableilty var i = 0; var finished = false; while ((i < seats.length) && !finished) { // Search through all the seats for availability for (var j = 0; j < seats[i].length; j++) { if (j + 2 < seats[i].length && seats[i][j] && seats[i][j+1] && seats[i][j+2]) { // Set the seat selection and update the appearance of the seat // selSeat = i * seats[i].length + j; // document.getElementById("seat" + ((i * seats[i].length + j)+0)).src = "seat_select.png"; // document.getElementById("seat" + ((i * seats[i].length + j)+1)).src = "seat_select.png"; // document.getElementById("seat" + ((i * seats[i].length + j)+2)).src = "seat_select.png"; // Prompt the user to accept the seat var accept = confirm("第" + (i+1) + "排的座位 " + (j+1) + " 到座位 " + (j+3) + " 有空位，請問您要預訂嗎？"); if ( accept ) { // Set the seat selection and update the appearance of the seat selSeat = i * seats[i].length + j; document.getElementById("seat" + ((i * seats[i].length + j)+0)).src = "seat_select.png"; document.getElementById("seat" + ((i * seats[i].length + j)+1)).src = "seat_select.png"; document.getElementById("seat" + ((i * seats[i].length + j)+2)).src = "seat_select.png"; finished = true; break; } else { i++; selSeat = -1; document.getElementById("seat" + (i* seats[i].length + j+0)).src = "seat_unavail.png"; document.getElementById("seat" + (i* seats[i].length + j+1)).src = "seat_unavail.png"; document.getElementById("seat" + (i* seats[i].length + j+2)).src = "seat_unavail.png"; } } } } } </script> </head> <body onload="initSeats();"> <div style="margin-top:25px; text-align:center"> <input type="button" id="findseat" value="查詢位置" onclick="findSeat();"><BR> <img id="seat0" src=""> <img id="seat1" src=""> <img id="seat2" src=""> <img id="seat3" src=""> <img id="seat4" src=""> <img id="seat5" src=""> <img id="seat6" src=""> <img id="seat7" src=""> <img id="seat8" src=""> <img id="seat9" src=""> <img id="seat10" src=""> <img id="seat11" src=""> <img id="seat12" src=""> <img id="seat13" src=""> <img id="seat14" src=""> <img id="seat15" src=""> <img id="seat16" src=""> <img id="seat17" src=""> <img id="seat18" src=""> <img id="seat19" src=""> <img id="seat20" src=""> <img id="seat21" src=""> <img id="seat22" src=""> <img id="seat23" src=""> <img id="seat24" src=""> <img id="seat25" src=""> <img id="seat26" src=""> <img id="seat27" src=""> <img id="seat28" src=""> <img id="seat29" src=""> <img id="seat30" src=""> <img id="seat31" src=""> <img id="seat32" src=""> <img id="seat33" src=""> <img id="seat34" src=""> <img id="seat35" src=""> </div> </body> </html>【圖片】
seat_avail.png 
seat_select.png 
seat_unavail.png 以上教材參考自「深入淺出JavaScript(2008)。Michael Morrison原著。莊惠渟編譯。OREILLY出版。」