壹 課程說明單元名稱 JAVA 語言 : 程式設計專題單元摘要 JAVA 視窗環境程式設計 物件導向程式設計 模組化程式設計 設計者黃世隆 ( 臺北市立大理高中 ) 1. 了解 JAVA 視窗程式設計環境 學習目標課綱範圍 2. 認識模組化程式基本觀念 3. 透過繪圖類別了解物件導向程式觀念 4. 透過 JAVA 視窗程式設計整合學生創意, 進行作品展現與分享 5. 電腦與問題解決 5.4 電腦解題實作 5.4.1 電腦解題工具介紹 5.4.2 解題實作 教學節數 8 節 (400 分鐘 ) 先備知識評量方法 程式設計基本概念, 如變數 條件判斷 重複迴圈 教室電腦中已安裝 JAVA 開發程式 j2sdk 與編輯環境 JCreator 1. 專題演練與實作 2. 作品觀摩 芹澤浩著, 周明憲譯 ( 民 92) Java 2D/3D 繪圖程式設計實例應用 台北 : 博碩 賈蓉生 胡大源 林金池著 ( 民 93) Java 概論與實作 - 網路動畫遊戲 參考資源 入門程式 台北 : 碁峰 吳逸賢 吳目誠著 ( 民 93) 精彩 Java2 程式設計 台北 : 網奕 賈蓉生 胡大源 林金池著 ( 民 93) JAVA2 入門與網路動畫遊戲設計 台北 : 松崗 粘添壽著 ( 民 96) 程式藝術館 -Java 程式語言 台北 : 學貫
貳 教學活動計畫 ( 敘述活動細節 教學工具 教學策略等 ) 教學活動 時間 說明 1. 教師可先行展示 JAVA 開發環境之安裝 2. 可先自昇陽公司網站下載 http://java.com/zh_tw/download/index.jsp 下載以下程式或更新版本 3. 為方便路徑設定, 儲存檔案夾可設定為 C:\Java\jdk1.5.0_10 4. 設定路徑方式為 : 4.1 開始 設定 控制台 系統 選擇 進階, 點選 環境變數 程式編譯環境介紹 0.5 節 4.2 在 user 的使用者變數 中, 選擇 path, 點選 編輯, 增加內容為 C:\Java\jdk1.5.0_10\bin;C:\Java\jre1.5.0_10\bin, 並按 確定 4.3 選擇 classpath, 點選 編輯, 增加內容為 C:\Java\jdk1.5.0_10\lib;C:\Java\jre1.5.0_10\lib, 並按 確定 4.4 點選完相關 確定 後, 路徑設定結束 5. 自以下網址下載編輯程式 JCreator( 需先註冊 ) http://www.jcreator.com/installation.htm
5.1 安裝並啟動 JCreator, 並依 4.2 設定相關路徑 6. 重開機後, 即可使用 教師可進行示範, 協助學生進行安裝 ; 或老師之前已進行 JAVA 教學, 也可鼓勵學生回家進行安裝 1. 啟動範例程式後, 畫面如下 檔案檢視區 類別檢視區 程式編輯區 執行訊息區 專題程式架構說明 1.5 節 2. 教師可利用類別檢視區, 先行向學生介紹 JAVA 的模組化程式設計觀念 3. 點選 Run Project 若在執行訊息區出現 Process completed, 且能正常出現下圖, 表示程式執行無誤
4. 由以上 class 視窗知本程式組成如下 : 4.1 視窗物件 ( 範例為 J001()) 4.2 使用 ActionEvent 方法, 並於程式中簡稱為 e, 同學可視為一變數, 作為傳入 actionperformed() 之參數 4.3 主程式 main() 4.4 繪圖 paint(), 使用 Graphics 類別, 並於程式中簡稱為 g 4.5 變數類 : 按鈕物件名稱 b1 b2 b3 4.6 變數類 : 用以指定任務之變數 job 以上各項名稱, 先呈現物件 ( 程式 ), 後呈現設定變數, 以字母順序羅列之 5. 進一步的說明本範例程式之內容 import java.awt.*; // 匯入繪圖之所需功能 import java.awt.event.*; // 匯入繪圖之所需功能 public class J001 extends Frame implements ActionListener// J001 全部程式從此開始 int job; // 指定工作之變數 Button b1,b2,b3;// 按鈕 public J001()// 視窗與相關物件建立 super(" 黃世隆的作業 ");// 視窗名稱顯示 setsize(400,400);// 設定大小視窗 setvisible(true);// 設定是否可見, 其中 true 為可見,false 則為隱藏 addwindowlistener(new WindowAdapter()// 設定視窗基本按鈕
public void windowclosing(windowevent e) System.exit(0); } } ); // 視窗基本按鈕設定結束 b1=new Button(" 三角形 ");//b1 代表按鈕一, 按鈕外觀顯示文字為三角形 b2=new Button(" 折線 ");// b3=new Button(" 實心梯形 ");// add(b1);// 在視窗中加入按鈕一 add(b2);// 在視窗中加入按鈕二 add(b3);// 在視窗中加入按鈕三 setlayout(new FlowLayout(FlowLayout.CENTER,10,300)); // 使用流動式版面配置, 元件將由左至右置中對齊 b1.addactionlistener(this); // 在 b1 按鈕建立傾聽機制, 委託 ActionListener 處理得到的訊息 b2.addactionlistener(this); // 在 b2 按鈕建立傾聽機制, 餘同 b1 b3.addactionlistener(this); // 在 b3 按鈕建立傾聽機制, 委託 ActionListener 處理得到的訊息 }//J001 視窗與相關物件建立結束 public void actionperformed(actionevent e)// 接收和處理傾聽事件 // 使用條件判斷結構 if(e.getsource()==b1) job=1;// 當按下 b1 時, 執行 job 值 =1 的內容 else if(e.getsource()==b2) job=2;// 按下 b2 按鈕時, 執行 job 值 =2 的內容 else if(e.getsource()==b3) job=3;// 按下 b3 按鈕時, 執行 job 值 =3 的內容 repaint();// 表示重新繪圖 }// 接收和處理傾聽事件結束 public void paint (Graphics g)// 繪圖功能, 處理執行傳送來的訊息 switch(job) // 建立多選一機制, 設定功能如下 case 1: 繪圖內容 1 break;}
case 2: 繪圖內容 2 break;} case 3: 繪圖內容 3 break;} }//switch 功能結束, 點選按鈕 1 則執行繪圖內容 1 之指令, 繪出三角形, 餘類推 } // 繪圖指令結束 public static void main(string args[])// 主程式部分 J001 homework = new J001(); // 產生一個新的視窗物件, 指定給 homework homework.show();// 秀出視窗與繪圖結果 }// 主程式結束 }// 全部程式結束 簡單練習 教師可先將範例程式提供予學生, 並指定學生將 : 1. 修改程式名稱 ( 如將 J001 改為班級座號 stu10504, 需要更改哪些地方 ) 2. 修改視窗名稱 3. 修改視窗預設大小 教學提示 1. 或許本程式架構略嫌複雜, 教師可利用其他方式 ( 如戲劇演出 ) 取代解說, 可加深學生學習印象 2. 教師可解釋 事件 如何使本程式執行之流程 : 滑鼠按鈕 -> 按鈕接收並送出訊息 -> 傾聽機制 (Action Listener) 接收 ( 程式碼須加入 implement ActionListener)-> 啟動 action Performed() 方 法 -> 執行 Action Event 所設定的動作 3. 教師一開始可先將學習重點聚焦在繪圖功能上, 同時結合校方推動之相關教育主題 ( 如品德教育 兩性教育 生命教育 生態教育等 ), 鼓勵學生繪製簡易之 4 格 ( 或以上 ) 簡單漫畫, 並先行構思草稿 ( 草稿可先打一次分數, 同時檢視學生是否融入教學情境, 有時學生繪製草圖太複雜或輕率, 教師亦可適時有效介入 ) 基本繪圖指令使用 1 節 1. 基本繪圖 1.1Graphics 類別具有繪圖方法 設定字型 選擇顏色等功能 1.2 視窗座標系統為以左上角為原點 1.3 教師示範
修改 b1=new Button(" 繪直線 "); 更改 case 1 內容 case 1: g.setcolor(color.red); g.drawline(0,28,140,140); g.drawline(0,100,100,100); break;} 1.4 程式說明 g 表示 Graphics 類別, 而 g.drawline() 表示 Graphics 類別的畫直線方法 ( 也可以想成畫直線函數 ), 其格式 為 drawline(int x1,int y1,int x2,int y2); 表示 (x1, y1) 至 (x2, y2) 兩點連成一線 1.5 執行結果如圖 (0,0) 在此 (0,28) 在此 (140,140) 在此 2. 了解畫直線後, 進一步學畫矩形與圓 2.1 指令如下 2.1.1 空心矩形 g.drawrect ( int x,int y,int width,int height); 其中 ( x, y) 表示矩形左上角之座標,width height 分別表示寬與長 3.1.2 實心矩形 g.fillrect ( int x,int y,int width,int height); 其中 ( x, y) 表示矩形左上角之座標,width height 分別表示寬與長 3.1.3 畫圓周 g.drawoval(int x,int y,int width,int height); 其中 ( x, y) 表示左上角之座標,width height 分別表示水平距離與垂直距離 3.1.4 實心圓 g.filloval(int x,int y,int width,int height); 其中 ( x, y) 表示左上角之座標,width height 分別表示
水平距離與垂直距離 2.2 教師示範修改 b2=new Button(" 矩形與圓 "); 更改 case 2 內容 case 2: g.setcolor(color.blue); g.drawrect(40,40,100,100);// 空心矩形 g.drawoval(40,40,100,100);// 空心圓 g.drawrect(180,40,100,100);// 空心矩形 g.filloval(180,40,100,100);// 實心圓 break;} 2.3 執行結果如圖, 希望教師能誘導學生建立 內切圓 的觀念 (40,40) (180,40) 2.4 利用正方形建立矩形與圓的圖形觀念後, 教師可以引導學生實作 矩形 橢圓, 並構思基本圖案, 如小汽車 人像表情等 如何新增物件 1 節 1. 新增繪圖功能 1.1 在前述的教學內容中, 學生可結合數學課所學之三角函數 弧度量 之觀念, 增加人像表情變化 1.2 關於畫弧形指令 g.draw Arc(int x,int y,int width,int height, int start, int end ); 其中 ( x, y) 表示左上角之座標,width height 分別表示水平距離與垂直距離,start 與 end 分別表示開始角度與結束角度 1.3 修改 b3=new Button(" 程式設計有點難 "); 更改 case3 內容 case 3: g.setcolor(color.black); g.drawoval(40,68,150,150);// 臉 g.setcolor(color.red);// 眉毛顏色
g.fillrect(60,108,20,3);// 左眉 g.fillrect(150,108,20,3);// 右眉 g.drawarc(80,168,70,30,0,180);// 嘴巴 break;} 簡單練習 教師可帶領學生如何將 不高興 表情改為 高興 表情 教學建議 教師在完成以上繪圖指令之教學後, 可以再告知學生 : 類別下有方法, 如繪圖類別下有許多繪圖指令 2. 在進行作業期間, 學生的問題 : 老師我的連環漫畫如果有四格, 但是老師的範例只有三個按鈕, 怎辦? 2.1 檢視程式架構宣告 class 建立 (): 建立視窗架構, 同時建立按鈕與事件傾聽 } 建立 actionperformed(): 利用 If 架構, 按鈕對應到不同繪圖功能 } 建立 Graphic(): 利用相關繪圖函數, 繪出自己的圖案 } 建立主程式 main(): 執行本程式並秀出繪圖結果 } } 2.2 新增按鈕的步驟
2.2.1 於 Button b1,b2,b3; 後加一 b4, 變為 Button b1,b2,b3,b4; 2.2.2 於 b3=new Button(" 實心梯形 "); 後新增一行如 b4=new Button(" 開心地笑 "); 2.2.3 於 add(b3); 後新增一行如 add(b4); 2.2.4 於 b3.addactionlistener(this); 後新增一行如 b4.addactionlistener(this); 新增本行時請務必注意是否加在 } 內 2.2.5 於 else if(e.getsource()==b3) job=3; 之後新增 else if(e.getsource()==b4) job=4; 2.2.6 於 case 3: 內略 ; break;} 之後新增 case 4: 繪圖內容 4; break;} 同學即完成欲增加之按鈕, 及按鈕所對應之繪圖內容 2.2.7 在執行程式後, 可檢視 class 視窗 簡單練習 教師可帶領學生實作, 如何建立第 5 個按鈕 同時老師提醒學生草圖的繪製工作是否完成 1. for 的應用 1.1 請參考學生實作 關於迴圈之應用 1 節
如果學生的每一顆子彈, 都是逐個逐個的繪製, 則程式顯得冗長, 因此我們可利用 for 迴圈, 除了縮短程式內容外, 也便於日後修改, 試想你的戰鬥機如果調整了位置, 你所發射的 20 顆砲彈 ( 辛辛苦苦畫的 ) 也要調整 ( 改 20 次 ), 是一件很麻煩的事情 1.2 以新增 b5 內容為例 case 5: g.setcolor(color.black); for(int i=0;i<=9;i++) g.fillrect(50+40*i,80,10,5); g.fillrect(50+40*i,180,10,5); } break;} 要注意的是, 水平間隙 ( 上例為 40) 設定時, 需大於每顆子彈的水平尺寸 (10), 才會有間隔發射的效果 2.for 的另外一種應用學生問 近視眼一圈一點的眼鏡 怎麼畫? 2.1 程式內容為 for (int i=0;i<=10;i++) g.drawoval(40+10*i,120+10*i,200-20*i,200-20*i); g.drawoval(250+5*i,120+5*i,200-10*i,200-10*i); } 2.2 第一行程式為左圖, 間隔較大, 第二行則為右圖 2.3 如果學生想設計 另一種子彈發射 的感覺, 則修改以上程式碼為 for (int i=0;i<=10;i++) g.drawoval(40,120,200-20*i,200-20*i); } 圖形則為下圖, 教師亦可利用此圖解釋 內切圓繪圖 的原理
關於陣列之應用 1 節 3. 其他 3.1 教學建議如果有時間, 教師可加入亂數產生方法 (int)(math.random()), 會讓你的 大雨 射擊情境 更有感覺喔! 1. 關於陣列 : 學生問 老師教了線條 圓形 矩形, 那麼三角形怎畫呢? 1.1 關於三角形與其他多邊形, 引入 陣列 觀念介紹, 以增加圖形的豐富度 1.2 指令如下 ( 避免太多符號, 在此以實例代替 ) 1.2.1 折線 int[]x=100,200,200,100,100,180 }; int[]y=100,100,200,200,120,120}; g.drawpolyline(x,y,6);// 表示有 6 個點,5 段折線 ; 6 個頂點依序為 (100,100),(200,100)(200,200), (100,200),(100,120),(180,120) [ ] 表示陣列 至此學生學了三種括號, 其中 } 表示主程式或類別內容 ;() 表方法 ;[ ] 表示陣列 1.2.2 空心多邊形 int[]x=100,150,125}; int[]y=100,100,110}; g.drawpolygon(x,y,3);// 此為三角形, 需提醒學生注意頂點須依序設定, 順時針或逆時針皆可 ; 曾有學生繪製梯形時, 出現兩個三角形之圖案, 即為頂點未依序排列之故 1.2.3 實心多邊形 簡單練習 教師可鼓勵學生猜想此一指令, 沒錯即是將 draw 改為 fill, 即是 int[]x=100,150,125}; int[]y=100,100,110}; g.fillpolygon(x,y,3); 1.3 教學提示 如果學生在一個按鈕中須出現兩個以上的多邊形時, 則須設定 int[] x1= }; int[] y1=....}; g. 指令 (x1,y1,n);// 畫第一個圖案 int[] x2= }; int[] y2=....}; g. 指令 (x2,y2,n);// 畫第二個圖案依序類推 2. 設定顏色 : 學生問 除了 red,black,blue 外, 可以訂出自己想要的顏色嗎? 2.1 顏色的設定方式
Color X=new Color(x1,x2,x3); g.setcolor(x);// 其中 X 表示自定的顏色名稱, x1 表示紅色 (R) 強度, x2 表示綠色 (G) 強度, x3 表示藍色 (B) 強度, x1 x2 x3 的值介於 0-255 之間 2.2 設定說明, 如紫色 :(175,0,225) 棕色 :(100,10,20) 2.3 應用 Color p1=new Color(175,0,225); g.setcolor(p1); int[]x=100,150,125}; int[]y=100,100,110}; g.fillpolygon(x,y,3); 即繪岀紫色實心三角形 作品實作與觀摩 2 節 1. 學生問 老師我的圖完成了, 可否按鈕後出現圖案與文字說明呢? 1.1 在繪圖類別中, 所有功能都是用畫的, 文字顯示豈能例外? 字串為 string, 畫為 draw, 所以顯示文字功能為 drawstring() 1.2 命令格式, 分為三部分 1.2.1 g.setfont(new Font(" 字型 ", Font. 特效, 大小 )); // 字型可設細明體 標楷體 Serif Monospaced 等 // 特效有一般 (PLAIN) 粗體 (BOLD) 斜體 (ITALIC) 1.2.2 g.setcolor(color. 顏色常數 ); // 除了既有的顏色參數外, 使用者也可自定 1.2.3 g.drawstring(" 字串內容 ", int x,int y); //int x 與 int y 表示字串在視窗內的位置 1.3 應用例 case 6: Color c1=new Color(120,120,120); g.setcolor(c1); // 設定字體顏色為自定顏色 g.setfont(new Font(" 標楷體 ", Font.BOLD,20)); // 設定字體為標楷體 粗體與 20 點字 g.drawstring(" 程式終於完成囉 ", 100,100);
// 在指定位置繪出文字內容 break; } 結果如下 : 2. 教師在學生實做過程中, 可在教學資料或投影片理, 整理本單元所有指令並列表, 幫助同學複習及檢索 實務經驗分享 一 如果時間仍有餘裕或學生學習意願不低, 則關於繼承之應用, 如筆劃粗細的設定, 可利用 Graphics2D 類別說明之, 即 Graphics2D() 擁有 Graphics() 的功能, 但 Graphics 2D() 的部分功能 Graphics() 並沒有 二 教師可利用範例傳送時, 將所有指令傳給同學, 先將部份未教授指令註解化, 再逐 步引入, 提醒學生指令只要理解後, 複製 貼上 調整座標即可, 不必逐個輸入, 重點在於如何展現自己的創意