認識 Array 矩陣與熟悉 loop 的控制結構

認識Array矩陣與熟悉loop的控制結構 李大偉交通大學

課程內容 • 什麼是陣列（array）？ • 為什麼需要使用陣列（array） • 熟悉loop的控制結構 • 利用 array 發撲克牌

什麼是陣列 Array？ • 陣列是將一群變數（或記憶空間）排成一列，然後依序編號。因此可以照編號來找到每一個變數（或記憶空間）。當你問：「第1個變數裡存的是什麼資料？」第1個變數就會告訴你，它存的是什麼。當你問：「第25個變數裡存的是什麼資料？」第25個變數就會告訴你，它存的是什麼。這是很有用的概念，因為你不需要將一群變數一一取不同的名字，然後一個一個把資料放進去。現在只要編號碼即可，然後利用迴圈控制程序，就可把所有的資料拿出處理運算之。

什麼是陣列 Array？ 在此有6個不同的變數名稱：d1、d2、d3 … 在此只有1個的變數名稱：d，但卻有6個不同編號的變數

n=Math.floor(6*Math.random()+1) if (n= =1){p1.src=dice1.gif} else if(n= =2){p1.src=dice2.gif} else if(n= =3){p1.src=dice3.gif} else if(n= =4){p1.src=dice4.gif} else if(n= =5){p1.src=dice5.gif} else if(n= =6){p1.src=dice6.gif} n=Math.floor(6*Math.random()+1) p1.src = d[n] 再談「擲骰子遊戲」如果利用array，程式可以簡化到只剩兩行指令如下：

var d = new Array(6); 這是宣告 d 是一群已經排好隊並編號變數（如上），d 的編號是從0開始，一直到6。事實上是d這個array有 7 個變數。矩陣 d 儲存資料的方式，可以像右上角，一筆一筆的寫在程式上。也可以像右下角使用for loop幫忙。 d[1] = “dice1.gif”; d[2] = “dice2.gif”; d[3] = “dice3.gif”; d[4] = “dice4.gif”; d[5] = “dice5.gif”; d[6] = “dice6.gif”; 陣列的宣告方式及其儲存資料的方式 for ( n=1; n<=6; n=n+1) { d[n] = “dice”+n+ “.gif”; }

認識 for 的 loop 控制語法 ntotal =0 for ( ntotal = 0; ntotal < x; ntotal = ntotal + 1 ) { …………………….. } ntotal < x false true …….……. …….……. ntotal = ntotal + 1

如何連發3張不同的撲克牌 • 首先將撲克牌的圖檔名稱存於 card 的 array 中 • 產生1到13的任意整數，此為第一張撲克牌的大小，即 c1＝ 1~13的任一整數。 • p1.src = card[c1] • 再產生第二張撲克牌的大小，即 c2＝ 1~13的任一整數。但是c2 != c1 • c2＝ 1~13的任一整數 • while ( c2 = = c1) {c2＝ 1~13的任一整數} • p2.src = card[c2] • 再產生第三張撲克牌的大小，即 c3＝ 1~13的任一整數。但是 c3 != c1 而且 c3 != c1 • c3＝ 1~13的任一整數 • while ( c3 = = c1 || c3 = = c2) {c3＝ 1~13的任一整數} • p3.src = card[c3]

製作「發撲克牌」的表單 • 開啟FrontPage，將空白網頁以「index.htm」存於「我的文件\WWW\js-10」 • 在我的講義網頁，選按「 ※下載「發撲克牌」的教材」，將所有的圖片下載於「我的文件\WWW\js-10」 • 先在「一般」狀態，輸入標題「發撲克牌」，在下一行插入3張相同的圖片「0.gif」 • 在「骰子計數器」的下面選按「插入」「表單」「按鈕」，然後將「提交」「重新輸入」刪除。將「按鈕」的內容改為「發牌」

「發撲克牌」的物件名稱 <img name=“p1"> 圖片：其名為 “p1” <img name=“p2"> 圖片：其名為 “p2” <img name=“p3"> 圖片：其名為 “p3” type="button" name="B1" 按鈕：其名為 “B1” <form name=“F1"> 表單：其名為 “F1”

發牌function的寫法 • var card = new Array(13); • card[0] = “0.gif”; … (將撲克牌的圖檔名稱存於 card 的 array 中） • function play( ) • { • c1＝ 1~13的任一整數 • p1.src = card[c1] • c2＝ 1~13的任一整數 • while ( c2 = = c1) {c2＝ 1~13的任一整數} • p2.src = card[c2] • c3＝ 1~13的任一整數 • while ( c3 = = c1 || c3 = = c2) {c3＝ 1~13的任一整數} • p3.src = card[c3] • }

作業一 • 請在「發牌」的按鈕旁邊加上「蓋牌」，使得按下「蓋牌」時，所有的牌的圖案皆為「0.gif」 • 發好牌之後，就不准任何人在換牌。即再按「發牌」就無效，除非先按「蓋牌」。如果不小心再按一次「發牌」，除了不再發牌，並用alert的指令警告使用者「你（妳）必須先按 “蓋牌”，才能重新 “發牌”。」 • 提示請用一個global variable來達成此任務，如： • var used=“not yet”

如何利用global variable來判斷是否使用過此函式？ • var used=“not yet” • function play() • { • if (used == “not yet”) • {…….}else{……} • used = “already” • } • function cover() • { • ………….. • used = “not yet” • }

作業二 • 請在「發牌」「蓋牌」的按鈕旁邊加上「1、3牌互換」，使得按下「 1、3牌互換」時，第1及3張牌的圖案互換 • 在按下「1、3牌互換」必須先檢查是否已經發好牌，如果還沒發好牌，並用alert的指令警告使用者「你（妳）必須先按 “發牌”，才可以使第1及3張牌的圖案互換」 • 提示請增加一個新的variable來達成此任務。

如何讓第 1 及 3 張牌互換？ • p1.src = p3.src; • p3.src = p1.src; • 這樣的寫法正確嗎？

JS Homework 10-1 • 作業一：發撲克牌 • 按下「發牌」時連發3張不同的撲克牌（15%） • 請在「發牌」的按鈕旁邊加上「蓋牌」，使得按下「蓋牌」時，所有的牌的圖案皆為「0.gif」（15%） • 發好牌之後，就不准任何人在換牌。即再按「發牌」就無效，除非先按「蓋牌」。如果不小心再按一次「發牌」，除了不再發牌，並用alert的指令警告是用者「你（妳）必須先按「蓋牌」，才能重新發牌」。（15%） • 請在「發牌」「蓋牌」的按鈕旁邊加上「1、3牌互換」，使得按下「 1、3牌互換」時，第1及3張牌的圖案互換（15%） • 在按下「1、3牌互換」必須先檢查是否已經發好牌，如果還沒發好牌，並用alert的指令警告使用者「你（妳）必須先按 “發牌”，才可以使第1及3張牌的圖案互換」

JS Homework 10-2 • 作業二：比大的擲骰子遊戲（40%） • 在我的講義網頁，選按「 ※下載「骰子」的教材」，將所有的圖片下載於「我的文件\WWW\js-10」 • 請製作如右圖的表單 • 按下按鈕之後，去呼叫一函式。而此函式會自動產生兩個1~6的任意整數d1及d2，然後依照所產生的數字更換圖片的內容。 • 若d1+d2>7則在結果文字方塊顯示「贏了！」 • 若d1+d2<=7則在結果文字方塊顯示「輸了！」

作業繳交方式 • 請在今天（12月30日）午夜十二點將自己的網站寫在BB的JavaScript Homework 10 • 12月30日午夜十二點以前繳交滿分100分 • 12月30日午夜十二點以後就不需要繳交，以0分計算

認識 Array 矩陣與熟悉 loop 的控制結構