<4D F736F F D20B8EAB054BEC7ACECA4A4A4DFB1D0A7F72DB6C0A540B6A95F ADD7A5BFAAA95F2E646F63>

Size: px

Start display at page:

Download "<4D F736F F D20B8EAB054BEC7ACECA4A4A4DFB1D0A7F72DB6C0A540B6A95F ADD7A5BFAAA95F2E646F63>"

怡池
5 years ago
Views:

1 壹課程說明單元名稱 JAVA 語言 : 程式設計專題單元摘要 JAVA 視窗環境程式設計物件導向程式設計模組化程式設計設計者黃世隆 ( 臺北市立大理高中 ) 1. 了解 JAVA 視窗程式設計環境學習目標課綱範圍 2. 認識模組化程式基本觀念 3. 透過繪圖類別了解物件導向程式觀念 4. 透過 JAVA 視窗程式設計整合學生創意, 進行作品展現與分享 5. 電腦與問題解決 5.4 電腦解題實作電腦解題工具介紹解題實作教學節數 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.$

2 貳教學活動計畫 ( 敘述活動細節教學工具教學策略等 ) 教學活動時間說明 1. 教師可先行展示 JAVA 開發環境之安裝 2. 可先自昇陽公司網站下載下載以下程式或更新版本 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( 需先註冊 )

3 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.

4 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()// 設定視窗基本按鈕

5 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;}

6 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 教師示範

7 修改 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 指令如下空心矩形 g.drawrect ( int x,int y,int width,int height); 其中 ( x, y) 表示矩形左上角之座標,width height 分別表示寬與長實心矩形 g.fillrect ( int x,int y,int width,int height); 其中 ( x, y) 表示矩形左上角之座標,width height 分別表示寬與長畫圓周 g.drawoval(int x,int y,int width,int height); 其中 ( x, y) 表示左上角之座標,width height 分別表示水平距離與垂直距離實心圓 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.

8 水平距離與垂直距離 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.

9 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.

getsource()==b3) job=3; 之後新增 else if(e.getsource()==b4) job=4; 2.

10 2.2.1 於 Button b1,b2,b3; 後加一 b4, 變為 Button b1,b2,b3,b4; 於 b3=new Button(" 實心梯形 "); 後新增一行如 b4=new Button(" 開心地笑 "); 於 add(b3); 後新增一行如 add(b4); 於 b3.addactionlistener(this); 後新增一行如 b4.addactionlistener(this); 新增本行時請務必注意是否加在 } 內於 else if(e.getsource()==b3) job=3; 之後新增 else if(e.getsource()==b4) job=4; 於 case 3: 內略 ; break;} 之後新增 case 4: 繪圖內容 4; break;} 同學即完成欲增加之按鈕, 及按鈕所對應之繪圖內容在執行程式後, 可檢視 class 視窗簡單練習教師可帶領學生實作, 如何建立第 5 個按鈕同時老師提醒學生草圖的繪製工作是否完成 1. for 的應用 1.1 請參考學生實作關於迴圈之應用 1 節

11 如果學生的每一顆子彈, 都是逐個逐個的繪製, 則程式顯得冗長, 因此我們可利用 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); } 圖形則為下圖, 教師亦可利用此圖解釋內切圓繪圖的原理

12 關於陣列之應用 1 節 3. 其他 3.1 教學建議如果有時間, 教師可加入亂數產生方法 (int)(math.random()), 會讓你的大雨射擊情境更有感覺喔! 1. 關於陣列 : 學生問老師教了線條圓形矩形, 那麼三角形怎畫呢? 1.1 關於三角形與其他多邊形, 引入陣列觀念介紹, 以增加圖形的豐富度 1.2 指令如下 ( 避免太多符號, 在此以實例代替 ) 折線 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) [ ] 表示陣列至此學生學了三種括號, 其中 } 表示主程式或類別內容 ;() 表方法 ;[ ] 表示陣列空心多邊形 int[]x=100,150,125}; int[]y=100,100,110}; g.drawpolygon(x,y,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 顏色的設定方式

13 Color X=new Color(x1,x2,x3); g.setcolor(x);// 其中 X 表示自定的顏色名稱, x1 表示紅色 (R) 強度, x2 表示綠色 (G) 強度, x3 表示藍色 (B) 強度, x1 x2 x3 的值介於之間 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 命令格式, 分為三部分 g.setfont(new Font(" 字型 ", Font. 特效, 大小 )); // 字型可設細明體標楷體 Serif Monospaced 等 // 特效有一般 (PLAIN) 粗體 (BOLD) 斜體 (ITALIC) g.setcolor(color. 顏色常數 ); // 除了既有的顏色參數外, 使用者也可自定 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);

14 // 在指定位置繪出文字內容 break; } 結果如下 : 2. 教師在學生實做過程中, 可在教學資料或投影片理, 整理本單元所有指令並列表, 幫助同學複習及檢索實務經驗分享一如果時間仍有餘裕或學生學習意願不低, 則關於繼承之應用, 如筆劃粗細的設定, 可利用 Graphics2D 類別說明之, 即 Graphics2D() 擁有 Graphics() 的功能, 但 Graphics 2D() 的部分功能 Graphics() 並沒有二教師可利用範例傳送時, 將所有指令傳給同學, 先將部份未教授指令註解化, 再逐步引入, 提醒學生指令只要理解後, 複製貼上調整座標即可, 不必逐個輸入, 重點在於如何展現自己的創意

Microsoft PowerPoint - ch03

Microsoft PowerPoint - ch03 第三章基礎繪圖 (Basic Graphics) 3 1 簡介 3 2 Graphics Class 3 3 3 直線繪製 3 4 長方形繪製 3 5 橢圓形繪製 3 6 弧線繪製 3 7 多邊形繪製 3 8 圖形剪裁 3 9 圖形複製 3 10 習題 (Exercises) 3 1 簡介在基礎圖文繪製上, 除了前章所探討的文字繪製之外, 本章將介紹基礎圖形之繪製類別 Graphics 提供了各類圖形之繪製方法程序,