แผนการจัดการเรียนรู้วิชาจาวาเดกส์ทอปเบื้องต้น

ประโยคการควบคมุ อื่นๆเพ่ิมเติม (other control statements) ประโยคในการควบคุมทิศทางกําหนดใหโปรแกรมทํางานของผูเขียนโปรแกรม นอกเหนือจากวธิ ีในการกาํ หนดผา นทางเงื่อนไข ผา นทางการวนลูป เปนหลักแลวยังมีประโยคท่ี นาสนใจเพ่ิมเติม ที่สามารถนํามาชวยในการแกปญหาในการเขียนโปรแกรมท่ีไมปกติได เม่ือ ตองการกระโดด (jump) ออกจากบล็อกของลูปการทํางานปกติ ไปยังจุดการทํางานจุดอ่ืนได ประโยคดงั กลาวประกอบดว ย ประกอบดว ย break, continue และ return อปุ กรณ 1. เครื่องคอมพิวเตอร 2. ระบบอนิ เทอรเ นต็ สาํ หรับการคนควา 3. ตวั โปรแกรม Edit Plus 4. ตวั โปรแกรมภาษาจาวา 5. หนว ยความจําเคลอ่ื นท่ี (Handy Drive หรือ External Hard disk) วธิ ที ดลอง 1. เปดโปรแกรมภาษาจาวา โปรแกรม Edit Plus บนเครือ่ งคอมพิวเตอรข องนักศึกษา 2. ตรวจสอบทีอ่ ยูของคําสั่งตา งในโปรแกรม Edit Plus กอนใชง าน 3. เขียนโปรแกรมตาม ตัวอยาง 4.1 เปนตัวอยางโปรแกรมการกําหนดแสดงขอความ GoodMorning เมื่อรับคา 0-11 แสดงขอความ GoodAfterNoon เมื่อรับคา 12-18 และ แสดงขอ ความ GoodEverning เม่อื รบั คา 19-24 4. เม่ือพิมพโปรแกรมแลวใหนักศึกษาทําการส่ังใหโปรแกรมภาษาจาวาทําการแปลภาษา สั่ง run และเขียนผลการทํางานของโปรแกรม ต้งั แตเร่มิ ทําการรบั คาจากคียบอรด และผลการ ประมวลผลโปรแกรม 5. เขียนโปรแกรมตาม ตัวอยาง 4.2 โปรแกรมการใช for loop ใหนักศึกษาทําการวิเคราะห โปรแกรม วาสามารถนาํ ไปใชงานไดหรือไม ใหนกั ศกึ ษาทําการปรับปรงุ โคดใหสามารถ run ได ตามท่นี ักศกึ ษาตอ งการ 6. ทําการแปลภาษาโปรแกรม สั่งใหโปรแกรมทํางาน และใหนักศึกษาเขียนผลการทํางาน โปรแกรม 7. ใหนักศึกษาทําการเขียนโปรแกรมตัวอยาง 4.3 โปรแกรมการใช do…while loop ให นักศึกษาทําการวิเคราะหโปรแกรม วาสามารถนําไปใชงานไดดานใด ใหนักศึกษาทําการ ปรบั ปรงุ โคดใหส ามารถ run ได ตามทีน่ ักศกึ ษาตองการ 8. จงเขียนโปรแกรม Java ใหรับคาช่ือของผูเขียนโปรแกรม ทําการพิมพ 5 คร้ัง เพ่ือทําการ คํานวณ การบวกจาก 1 ถึง 100 โดยทบี่ วกเฉพาะเลขค่ี (1, 3, 5, . . . ) -------------------------------------

การทดลองท่ี 5 คลาสและออ็ บเจกต วัตถุประสงค 1. เพ่ือใหสามารถเขยี นโปรแกรมในงานดว ยการใชโครงสรางคลาส 2. เพ่ือใหสามารถสรางอ็อบเจกตป ระกอบการเขียนโปรแกรมได 3. เพือ่ ใหสามารถมคี วามสามารถในการวิเคราะหแยกแยะการทํางานของแตละอ็บเจกต และ สังเคราะหโปรแกรมใหส ามารถนําคลาสที่สรางข้นึ หรือคลาสจากไลบรารีมาใชง านได 4. เพ่อื ใหเ กิดทกั ษะในการแกปญหาโปรแกรมภาษาจาวาได ความรพู ื้นฐาน การเขยี นโปรแกรมเชิงวัตถุ จงึ เปน การเขยี นโปรแกรมท่ีสามารถเขาถึงในการแกปญหาได โดยมี แนวคดิ จากธรรมชาติมากําหนดเปนหลกั ในการเขียนโปรแกรม มีองคประกอบสําคัญคือ คลาส แพ็กเกจ และ อ็อบเจกต มรี ายละเอยี ดดงั นี้ คลาส เปนเปรียบเสมือนกับภาชนะที่รวบรวมวัตถุ(object) โดยในแตละวัตถุประกอบดวย ตัว แปร และสองเมธอด ความหมายของคลาส คือเปนที่รวบรวมอ็อบเจกตหนึ่งอ็อบเจกต หรือมากกวา หนงึ่ อ็อบเจกต หรือเรยี กคลาสวา เปนพมิ พเ ขียวในการสรางอ็อบเจกต โดยขอมูลท่ีอยูในคลาสในแตละ คลาส สามารถเรยี ก หรอื นาํ มาใชม าใชง านภายนอกคลาสได แพ็กเกจ การเขียนโปรแกรมภาษาเชิงวัตถุ ดวยภาษาจาวามีการเรียกใชงานคลาสท่ีเปน แพ็กเกจอยางสมํ่าเสมอ เพ่ืออํานวยความสะดวกแกผูพัฒนาโปรแกรมไดอยางตอเนื่อง แพ็กเกจที่เปน สวนสําคัญสําหรับผูเร่ิมตนในการพัฒนาโปรแกรมภาษาจาวา ควรรูและนํามาใชงานบางสวนดังน้ี java.applet เปน แพ็กเกจทีเ่ กบ็ คลาสดา น Applet สว น java.awtเปนแพ็กเกจที่เก็บคลาส ดาน GUI(Graphic User Interface) แยกจาก swing และ java.beans เปนแพ็กเกจท่ีเก็บคลาส ดา น beans เปนตน อ็อบเจกต มีรปู แบบในการสราง ประกอบดว ย 3 แบบ คอื ที่ 1. ประกาศ instance class ดวย class_name Object_ identifier ; โดยการเตรียมพืน้ ทีบ่ นหนว ยความจาํ สาํ หรับ instance class ทส่ี รา งขึ้นดวย Object_ identifier = new class_name ([class_parameter]); 2. ประกาศ instance พรอ มเตรียมพนื้ ท่บี นหนวยความจําสําหรบั instance ท่ีสรางใหม class name Object_ identifier = new class_name(); 3. สรา งออ็ บเจกตโดยไมประกาศตวั แปรอ็อบเจกตเพ่ือใชอ างอิงอ็อบเจกตได new class_name();

สวนคอนสตรัคเตอร เปนการสรางอ็อบเจกตพรอมกับการกําหนดคาเริ่มตนใหกับแอทตริบิวต ตาง ๆ ของออ็ บเจกตท ีไ่ ดสรา งข้ึนดวยคียเ วรด new โดยคอนสตรัคเตอรจะถูกเรียกใชใหทํางาน อตั โนมตั ิ เมอื่ ทําการสรา งออบเจ็คข้ึน ในขณะที่สรางแตละอินสแตนซข้ึนมาที่มีช่ือเดียวกันกับ คลาส ซึ่งสามารถกําหนดเปน public ไวหนา modify ไดเทา นั้น อุปกรณ 1. เคร่อื งคอมพิวเตอร 2. ระบบอินเทอรเ น็ต สําหรับการคน ควา 3. ตัวโปรแกรม Edit Plus 4. ตัวโปรแกรมภาษาจาวา 5. หนว ยความจําเคล่ือนที่ (Handy Drive หรือ External Hard disk) วิธีทดลอง 1. เปดโปรแกรมภาษาจาวา โปรแกรม Edit Plus บนเคร่ืองคอมพวิ เตอรของนักศึกษา 2. ตรวจสอบที่อยูของคําสัง่ ตา งในโปรแกรม Edit Plus กอ นใชง าน 3. เขียนโปรแกรมตาม ตัวอยาง 5.1 เปนตัวอยางโปรแกรมการสรางคลาสลักษณะคอนสตรัค เตอร และการสงคาเมื่อมีการสรางอ็อบเจกต ทําการบันทึกคลาสเปน Lab5_1 ทําการ ทดสอบโปรแกรม 4. เม่ือพิมพโปรแกรมแลวใหนักศึกษาทําการส่ังใหโปรแกรมภาษาจาวาทําการแปลภาษา สั่ง run และเขียนผลการทํางานของโปรแกรม ตั้งแตเรม่ิ ทําการรบั คาจากคียบอรด และผลการ ประมวลผลโปรแกรม 5. เขียนโปรแกรมตาม ตัวอยาง 5.2 โปรแกรมการใชคลาส ใหนักศึกษาทําการวิเคราะห โปรแกรม วาสามารถนําไปใชงานไดหรือไม ใหนักศึกษาทําการปรับปรุงโคดใหไดผลตามท่ี นักศกึ ษาตองการ 6. ใหนกั ศึกษาทําการศึกษาแพ็กเกจของโปรแกรมภาษาจาวา เพ่ิมเติมจาก ตัวอยางโปรแกรม 5.3 7. ทําการแปลภาษาโปรแกรม ส่ังใหโปรแกรมทํางาน และใหนักศึกษาเขียนผลการทํางาน โปรแกรม 8. ใหน ักศึกษาทําการเขยี นโปรแกรมตามตัวอยางโปรแกรมท่ี 5.4 ใหส ามารถทาํ งานรบั จาก ผใู ชง าน จํานวน 2 คา แลวนํามาคาํ นวณ พรอมแสดงผลการคํานวณดวย Dialog ของ Packet -------------------------------------

การทดลองท่ี 6 การใชงานแอพเพ็ต วัตถุประสงค 1. เพอ่ื ใหสามารถเขียนโปรแกรมจาวาดวยเทคโนโลยแี อพเพ็ตได 2. เพือ่ ใหส ามารถนําโคดแอพเพ็ตมาทํางานรว มกับเวบ็ เพจได 3. เพ่ือใหสามารถมคี วามสามารถในการวิเคราะหแยกแยะการทาํ งานของแตล ะเทรดได 4. เพอ่ื ใหเ กิดทกั ษะในการแกปญหาโปรแกรมภาษาจาวาได ความรูพื้นฐาน ในการสรางโคดจาวาแอพเพ็ตตองการสรางอ็อบเจกตท่ีไดทําการขยายมาจากคลาส ตน แบบชื่อ java.applet.Applet ดวยคยี เวิรด extends ดงั ตัวอยางการสรางออ็ บเจกต ดังนี้ public class FirstApplet extends java.applet.Applet { public void paint (Graphics g) { ตัวโคดของสง่ิ ที่ตองการใหแ สดงสูหนาจอภาพ } } เม่ือ FirstApplet.java ถูกคอมไพลแลวจะได FirstApplet.java.class จากน้ันจะตองมี HTML page ท่ีมี APPLET tag ท่ีเรียก FirstApplet.java.class ใหทํางานอยูใน ไฟล JavaApplet.html และทําการเรียก Applet มาใชง านดวย appletviewer (ภาพดา นลาง)

ภาพแสดงการ APPLET tag อยใู นไฟล JavaApplet.html ในการทํางานรวมกันระหวางแท็กแอพเพ็ต กับ HTML สามารถทําการสงพารามิเตอรที่อยู ภายใตแ ท็ก <APPLET> กับ </APPLET> โดยมรี ูปแบบ <APPLET CODE = \"AppletFile.class\" width = 300 height =100> <PARAM NAME = “ชอ่ื ของพารามิเตอร 1” VALUE = “คา ขอ มูลของพารามเิ ตอร 1”> … <PARAM NAME = “ชือ่ ของพารามิเตอร N” VALUE = “คาขอมลู ของพารามเิ ตอร N”> </APPLET> โดยพารามิเตอร เปนลักษณะ Case-Sensitive กลาวคือ ถาเปนช่ือเดียวกันแตคนละลักษณะ ตวั พิมพ ถือวาเปนช่อื พารามิเตอร คนละตวั กนั จงึ สามารถใช ในการเก็บคา ขอมูลคนพารามเิ ตอรละตวั การสรางกราฟกแสดงผลสูหนาจอภาพ สามารถทําไดโดยใชเมธอด ท่ีอยูในแพ็คเก็ต java.awt เชน setColor() และ setFont() สวนเมธอดที่ทําการสรางลักษณะรูปรางตางๆ ไดแกเมธอด drawString(), drawLine(), drawRect(), fillRect(), drawRoundRect(), fillRoundRect(), drawOval(), fillOval(), drawArc(), fillArc(), drawPolygon(), fillPolygon() และเมธอด drawPolyline() ดังตัวอยาง การกําหนดสีใหไปใชกับอ็อบเจกตที่ตองการแสดงกราฟก มีรูปแบบการ โคด setColor(Object ส)ี ; การกาํ หนดเสียงของแอพเพต็ ทําไดโ ดยการเรียกเมธอดสาํ หรับใชงานการนําเสียงมาเก็บไว ที่ตัวแปรไดดวยเมธอด getAudioClip() และเมธอดส่ังการควบคุมเสียง เมธอดสั่งใหเปดเสียง AudioClip.play() เมธอดสั่งวนรอบเสียง AudioClip.loop() และเมธอดปดเสียง AudioClip.stop()

เปนตน ซงึ่ ไฟลเสยี งท่นี าํ มาใชง านควรอยูทโ่ี ฟลเดอรเดยี วกับโคด จาวา และชนิดของไฟลเสียงท่ีสนับสนุน ไดแก .wav .au และ .midi เปนตน การกําหนดภาพของแอพเพ็ตสามารถเรียกใชงานไดอยางสะดวก ไดดวยถาตองการนํา ภาพมาเก็บไวที่ตัวแปรไดดวยเมธอด getImage() และเมธอดสั่งแสดงภาพไดดวยเมธอด g.drawImage(“ไฟลภาพ”, 0, 0, null) ซึ่งไฟลภาพท่ีนํามาใชงานควรอยูท่ีโฟลเดอรเดียวกับโคดจาวา และชนดิ ของไฟลภาพท่ีแอพเพ็ตสนบั สนนุ ไดแก .gif และ .jpg เปน ตน แอพเพต็ กับเทรดสําหรบั ภาพเคลอื่ นไหว ภาพเคลื่อนไหวสามารถสรางขึ้นได โดยการนํา ภาพน่ิงหลายๆ ภาพมาฉายตอเนื่องกันดวยความเร็วสูง ทําใหเกิดภาพลวงตาของการเคลื่อนไหว ซึ่งใน การดําเนินการตองอาศัยการทํางานของ เทรด ซึ่งเทรด ก็คือ สวนประกอบยอยของการโปรเซส (ประมวลผล) ดังนั้น เทรด จึงเปนงานยอยๆ ของการประมวลผลในขบวนการทํางานของโปรเซสเซอร ถาในการทํางานของซีพียู 1 โปรเซส ที่มีการทํางานหลายๆ เทรด (งานยอย) การสรางเทรดในแพ็กเกจ ของแอพเพ็ต เปนการเรียกเมธอด run() ซึ่งระบบก็ตองมีสวนประกอบการทํางานเทรดของเมธอด paint() ประกอบทุกครงั้ อยางนอ ย 1 เทรด ตัวอยาง การสรางคลาสท่ีมีการอินเตอรเฟส (interface) เท รดเปนสวนยอยนั่นเอง เชน public class ClassName implements Runnable {…} หรือสรางคลาส ดวย public class ClassName extends Thread {…} ในการสรางภาพเคล่ือนไหว กอนทําการสราง ตองเตรียมภาพท่ีตองการนํามาแสดง และพื้นหลังที่ตองการใหภาพน่ิง จํานวนตามท่ีตองการสราง ภาพเคลือ่ นไหวในท่ีน้ีตอ งทาํ การเตรยี มแฟมขอมลู ที่เปนนามสกลุ .gif มารวมใชงานการสรางเปน ตน อปุ กรณ 1. เครื่องคอมพวิ เตอร 2. ระบบอนิ เทอรเนต็ สําหรับการคนควา 3. ตัวโปรแกรม Edit Plus 4. ตวั โปรแกรมภาษาจาวา 5. หนวยความจาํ เคลือ่ นท่ี (Handy Drive หรอื External Hard disk) วธิ ีทดลอง 1. เปดโปรแกรมภาษาจาวา โปรแกรม Edit Plus บนเคร่อื งคอมพิวเตอรของนักศึกษา 2. ตรวจสอบที่อยูของคาํ สง่ั ตา งในโปรแกรม Edit Plus กอนใชงาน 3. เขยี นโปรแกรมตามตัวอยาง 6.1 โปรแกรมในการกําหนดสี สรางรูปส่ีเหล่ียม และ เติมสีใน รูปเหล่ียม ที่ในการใชเมธอดการสรางกราฟกดวยเมธอด setColor()และเมธอด drawRect() ซึ่งมีรูปแบบการโคด คือ drawRect(x, y, w, h) โดย x, y เปนจุดเริ่มตนของ รูปสี่เหล่ียม สวน w เปน ความกวางของรูปส่ีเหล่ียม และ h เปนความสูงของรูปสี่เหลี่ยม และการเติมสลี งในรปู เหลี่ยม 4. ใหนักศึกษาเขียนอธิบาย โดยทําการวิเคราะหการทํางานของแตคําส่ัง ในแตละบรรทัดวา ทาํ งานอยา งไรโดยนําผลการทดลองมาประกอบการอธิบาย

5. ใหนักศึกษาเขียนโปรแกรม ตามตัวอยางท่ีในการใชเมธอดการสรางกราฟกดวยเมธอด setColor()และเมธอด drawRoundRect(20,10,100,100,50,50) ซ่ึงมีรูปแบบการโคด คือ drawRoundRect(x, y, w1, h1, w2, h2) โดย x, y เปนจุดเริ่มตนของรูปสี่เหลี่ยม สวน w1 เปนความกวางของรูปสี่เหล่ียม และ h1 เปนความสูงของรูปสี่เหลี่ยม สวน w2 เปนความกวางของรูปส่ีเหลี่ยมของท่ีใชกําหนดความโคงของมุมสี่เหล่ียม และ h2 เปน ความสูงของรูปสี่เหลี่ยมของท่ีใชกําหนดความโคงของมุมส่ีเหลี่ยม แสดงภาพท่ี 6.17 และ การเตมิ สีลงในรูปเหลย่ี มเมธอด fillRoundRect() 6. ใหนักศึกษาเขียนโปรแกรมตาม ตัวอยาง 6.2 โปรแกรมในการแสดงคาของเมธอด drawRoundRect() กบั เมธอด fillRoundRect() 7. ทําการแปลภาษาโปรแกรม สงั่ ใหโ ปรแกรมทาํ งาน ใหผ ลการทํางานแสดงภาพที่ 6.18 8. ใหน ักศกึ ษาเขียนใหนักศึกษาเขียนอธิบาย โดยทําการวิเคราะหการทํางานของแตคําสั่ง ใน แตล ะบรรทดั วา ทํางานอยา งไรโดยนาํ ผลการทดลองมาประกอบการอธบิ าย 9. เขียนโปรแกรมตาม ตัวอยาง ตัวอยาง 6.3 โปรแกรมในการแสดงคาของเมธอด drawOval() กับเมธอด fillOval() 10. ใหนักศึกษาเขียนอธิบาย โดยทําการวิเคราะหการทํางานของแตคําสั่ง ในแตละบรรทัดวา ทาํ งานอยางไร และใหเขยี นผลการทาํ งานของโปรแกรม 11. ใหนักศึกษาทําการคนควาในการเขียนโคด โดยใช g .setColor(), drawRect(), fillRect(), fillOval() ใหสามารถ แสดงผลการทาํ งานโปรแกรม (ภาพที่ 6.19) 12. ใหนกั ศึกษาทําการคน ควาในการเขยี นเมธอด drawArc(), fillArc(), drawPolygon(), fillPolygon() และเมธอด drawPolyline() 13. จงเขยี นโคดใหม ภี าพเคลื่อนไหวของแอพเพ็ตอยางนอย 2 ภาพ และเขียนเหตุผลการแสดง คา ของโคดวาไดผ ลทีแ่ สดงการทาํ งานเปน เพาะเหตใุ ด 14. จากโคดดา นลางพรอมเขียนเหตผุ ลการแสดงคาของโคดวา ไดผลทแ่ี สดงเพราะเหตุใด import java.awt.*; import java.applet.*; public class ImageExApplet extends java.applet.Applet { Image imgEx; public void init() { } imgEx = getImage(getCodeBase(), \"bravo.gif\"); public void paint(Graphics g) { g.drawImage(imgEx, 100, 100, null); } } -------------------------------------

การทดลองท่ี 7 สว นตดิ ตอ กบั ผูใชแ บบกราฟก วัตถปุ ระสงค 1. เพอื่ ใหสามารถเขียนโปรแกรมจาวาสรางสว นตดิ ตอ กับผใู ชแบบกราฟกได 2. เพ่ือใหส ามารถนาํ สว นตดิ ตอกบั ผใู ชแ บบกราฟกมาทํางานรว มกบั เสยี งและภาพได 3. เพ่ือใหสามารถมีความสามารถในการวิเคราะหแยกแยะการทํางานของสวนติดตอกับผูใช แบบกราฟก ได 4. เพ่ือใหเ กดิ ทักษะในการแกปญหาโปรแกรมภาษาจาวาได ความรพู ้ืนฐาน GUI มีสวนประกอบหลกั ดงั น้ี Containers เปนสวนท่ีทําหนาท่ีในเก็บ Components ตางๆ ท่ีตองแสดงหนาเว็บ ตามที่ กําหนด ซ่ึงอาจเปนโครงรางในการออกแบบการวาง layout (เชน flow หรือ grid) และสวนของ container สามารถเกบ็ สวนทีเ่ ปน sub-containers ไดก ารโปรแกรม GUI ใน Container จะตอง มี frame, Dialog และ Applet (Top-Level Containers) ซึ่งในสวนของ frame ได จัดเตรียมสว นที่เปน main window Components เปนสวนประกอบเปนสวนท่ีแสดงขอมูล บนหนาจอเว็บ เชน Button, Label, and TextField เปนตน ในการโปรแกรม GUI ทุก component ตองถูกวางใน container โดยทุก component สามารถวางดวยเมธอด add (Component c) มีผลทําให Container สามารถเขามาทํางานได การโปรแกรม GUI ดว ย Swing และ AWT ข้นั ตอนท่ี 1 สรา ง JFrame ดวย JFrame fName = new JFrame(\"Title\"); ขน้ั ตอนที่ 2 สราง JPanel ซึง่ เปน component และตองนํา JPanel ไปวางบนในสวนของ container ในทนี่ ี้ ก็คือ JFrame ซึง่ มีรูปแบบของการสราง JPanel คือ JPanel pName = new JPanel(manager);

ข้นั ตอนที่ 3 สรา งคลาสทเ่ี ปน Component 3.1 สว นท่เี ปน ปุม (Button) สามารถสรา งโดยมรี ูปแบบการสราง ดงั นี้ JButton bName = new JButton(text, icon); 3.2 ปา ยแสดงขอ ความ (Label) มีรูปแบบการสราง ดงั น้ี JLabel lName = new JLabel(text, icon, alignment); 3.3 ชองรับขอ ความ (TextField) มีรปู แบบการสรา ง ดังน้ี JTextField tName = new JTextField (text, length); 3.4 ชอ งรับรหัสผา น (PasswordField) มรี ูปแบบการสรา ง ดงั น้ี JPasswordField pwName = new JPasswordField (text, length); 3.5 ตวั เลอื กหนงึ่ รายการ (RadioButton) มรี ูปแบบการสราง ดังนี้ JRadioButton rbName = new JRadioButton (text, icon, boolValue); 3.6 รายการขอ มูล (List) มรี ูปแบบการสรางรายการขอ มูล ดงั น้ี JList ltName = new JList (item); 3.7 ตวั เลือกรายการมากกวาหน่ึงตวั เลือก (CheckBox) มรี ปู แบบการสรางรายการขอมูล ดงั นี้ JCheckBox ckName = new JCheckBox (text, icon); 3.8 ตัวเลอื กรายการหนงึ่ ตัวเลือก (ComboBox) มรี ปู แบบการสรา งรายการขอมูล ดังนี้ JComboBox cbName = new JComboBox (item); 3.9 เมนู (Menu) มรี ปู แบบและขั้นตอนในการสรา งเมนู ดังน้ี 3.9.1 สรา งเมนบู ารดว ย JMenuBar MyMenuBar = new JMenuBar(); 3.9.2 สรา งเมนดู วย JMenu MyMenu = new JMenu(StringName); 3.9.3 รายการเมนูยอยJMenuItem MyMenuItem = new JMenuItem(iTemName); 3.9.4 การเพมิ่ รายการเมนยู อ ยลงในเมนูดวย MyMenu.add(MyMenuItem); 3.9.5 การเพ่ิมเมนูลงในเมนูบารด วย MyMenuBar.add(MyMenu); 3.9.6 การสั่งใหเมนบู ารลงในเฟรมดว ย FrameName.setJMenuBar(MyMenuBar);

ข้ันตอนท่ี 4 การจัดวางองคป ระกอบ (Layout Manager) FlowLayout เปนการจัดวางองคประกอบใหทําการแสดงท่ีเรียงลําดับตามบรรทัดแรกใหเต็ม บรรทัดกอนจึงทําการใหแสดงในบรรทัดถัดไป จนครบองคประกอบท่ีถูกสั่งใหทําการแสดง ซึ่งมีรูปแบบ ดังนี้ JPanel flName = new JPanel(); flName.setLayout(new FlowLayout()); BorderLayout เปนการจัดวางองคประกอบใหแสดงตามทิศทั้ง 5 ตําแหนง คือทิศเหนือ (North) ทิศใต (South) ทิศตะวันออก (East) ทิศตะวันตก (West) และจัดใหอยูก่ึงกลาง ซึ่งมีรูปแบบ ดังนี้ JPanel bflName = new JPanel(); flName.setLayout(new BorderLayout()); GridLayout เปนการจัดวางองคป ระกอบใหท าํ การแสดงในชอง (grid) เปนลักษณะตารางซึ่งมี รูปแบบดงั น้ี JPanel glName = new JPanel(); glName.setLayout(new GridLayout(Row, Column)); สราง Basic Event Handling โดยมลี ะข้ันตอนในการสราง ดังน้ี 1. สรางออบเจกต JRadioButton ดว ย JRadioButton rB = new JRadioButton (\"Single Choice\"); 2. กําหนด Event ใหกบั ออบเจกต JRadioButton และ addActionListener ( listener ) เปนคาํ สัง่ ที่ใชใ นการดักฟงเหตกุ ารณเม่ือมีการคลิกท่คี อมโพเนนต ดวย rB.addActionListener ( new ActionListener ( ) 3. การคนื คาคอมโพเนนต เมื่อมกี ารเกดิ เหตุการณ (Event) ข้นึ ดว ย JRadioButton rB = ( JRadioButton ) event.getSource ( ); 4. การตรวจสอบสถานะของ RadioButton วา ถกู เลอื กอยูหรือไมถกู เลือกอยู ดว ย boolean isSelected = radioButton.isSelected ( ); 5. การแสดง Message Dialog ดว ย JOptionPane.showMessageDialog ( null, \"Click to selected.\" );

อุปกรณ 1. เครือ่ งคอมพวิ เตอร 2. ระบบอนิ เทอรเนต็ สาํ หรบั การคนควา 3. ตัวโปรแกรม Edit Plus 4. ตัวโปรแกรมภาษาจาวา 5. หนวยความจําเคล่ือนท่ี (Handy Drive หรอื External Hard disk) วิธที ดลอง 1. เปดโปรแกรมภาษาจาวา โปรแกรม Edit Plus บนเครื่องคอมพิวเตอรข องนักศึกษา 2. ตรวจสอบทอี่ ยูของคําสงั่ ตางในโปรแกรม Edit Plus กอ นใชงาน 3. ใหนักศึกษาเขียนโปรแกรม ตามตัวอยางท่ี 7.1 ในการใช Frame และ Panel พรอมการ กาํ หนดสี 4. ใหนักศึกษาเขียนอธิบาย โดยทําการวิเคราะหการทํางานของแตคําส่ัง ในแตละบรรทัดวา ทํางานอยางไรโดยนําผลการทดลองมาประกอบการอธิบาย 5. ใหนกั ศกึ ษาเขียนโปรแกรม โดยใชเครื่องมือ ComboBox ใหไดผลการทํางานโปรแกรม ดัง ภาพท่ี 7.19 6. ใหนักศึกษาเขียนโปรแกรมตาม ตัวอยาง 7.3 โปรแกรมในการแสดงคาของเมธอด drawOval() กบั เมธอด fillOval() 7. ทําการแปลภาษาโปรแกรม ส่งั ใหโปรแกรมทาํ งาน ใหผ ลการทาํ งาน 8. ใหนักศึกษาทําการคนควาทําการเขียน ActionListener รองรับการคลิกเมาส และการรัน ขอ ความลงใน TextBox จาํ นวน 20 ตัวอกั ษร 9. ใหนักศึกษาเขียน GUI ใหสามารถรับคามาทําการคํานวณคณิตศาสตรอยางมีระบบ 1 โปรแกรม -------------------------------------

การทดลองท่ี 8 การตดิ ตอกบั กับแฟม ขอ มลู วัตถปุ ระสงค 1. เพอื่ ใหส ามารถเขยี นโปรแกรมจาวาสรา งการตดิ ตอ กับแฟมขอมลู ได 2. เพือ่ ใหส ามารถนาํ สวนการตรวจจับดว ย การใชค ําสั่ง try … catch / finally 3. เพ่ือใหสามารถเขยี นโปรแกรมจาวาสรา งการติดตอ ดว ยคารแ ร็คเตอรส ตรมี ได 4. เพอื่ ใหส ามารถมคี วามสามารถในการวิเคราะหแยกแยะการทาํ งานแฟม ขอมลู ได 5. เพ่ือใหเกดิ ทักษะในการแกปญหาโปรแกรมภาษาจาวาได ความรพู ้ืนฐาน ในการสงขอมูลระหวางตัวโปรแกรม กับแหลงท่ีเก็บขอมูลจะเปนกระบวนการท่ีเกิดข้ึนได 2 ลักษณะคอื การอา น (Read) กบั การเขยี น (Write) การอานไฟลสตรีม (File Stream Reading) ตองมีการตรวจสอบความถูกตองหรือ การดัก จับ เออเรอร (Error) ท้ังดานอินพุตและเอาตพุต (IOException) วาแฟมขอมูลท่ีไดทําการติดตอน้ันมี อยูจริง หรือมีขอมูลอยูหรือไม ถาไมมีการทํางานของ IOException จะทําการฟองชนิดของการ Error ใหผใู ชโ ปรแกรมทราบขอผิดพลาด มีรปู แบบดังนี้ public static void main(String[] args) throws IOException สามารถสง่ั งาน ดงั น้ี File filename = new File(“path”); FileInputStream fInput = new FileInputStream(filename); fInput.read(); การเขยี นไฟลส ตรมี (File Stream Writing) มีรูปแบบการสั่งงาน ดังนี้ File filename = new File(“path”); FileOutputStream fOutput = new FileOutputStream(filename, append); fOutput.write(data);

การใชคําส่ัง try … catch / finally เปนการจัดการ Exception มีโครงสรางการทํางาน คลา ยกบั กลุม คําสง่ั if / else กลา วคอื ถา มกี ารตรวจสอบเงื่อนไข ในท่ีน้ีคือ Exception ท่ีอยูหลัง try วา มีเหตุการณเกิดขึ้น ถือวาถูกตอง ก็จะใหโปรแกรมมาประมวลผลหลังคําสั่ง catch สวน finally เปน ชดุ คาํ สั่งใหทําทกุ เหตกุ ารณกอนออกจาก try คารแรค็ เตอรส ตรีม เปนสตรมี ทีม่ กี ารจัดการขอมูลท่ีไดท ําการติดตอกับแฟมขอมูล เมื่อทําการ เรยี กใชแ ฟม ขอมูลทไี่ มมอี ยใู นหนวยความจํา ก็จะทําการสรางแฟมขอมูลขึ้นมาตอบสนองการติดตอของ Stream ไดท ันที การอานขอ มลู คารแ รค็ เตอรส ตรีม มรี ูปแบบดงั น้ี File filename = new File(“path”); FileReader fInput = new FileReader(filename); data = fInput.write(); การเขียนขอมลู คารแ รค็ เตอรส ตรมี มรี ปู แบบดังน้ี File filename = new File(“path”); FileWriter fOutput = new FileWriter(filename [, append]); fOutput.write(data); อปุ กรณ 1. เคร่ืองคอมพิวเตอร 2. ระบบอนิ เทอรเ นต็ สาํ หรบั การคน ควา 3. ตวั โปรแกรม Edit Plus 4. ตวั โปรแกรมภาษาจาวา 5. หนวยความจาํ เคล่อื นที่ (Handy Drive หรอื External Hard disk)

วธิ ที ดลอง 1. เปดโปรแกรมภาษาจาวา โปรแกรม Edit Plus บนเคร่อื งคอมพิวเตอรข องนักศึกษา 2. ตรวจสอบท่ีอยูของคาํ สงั่ ตางในโปรแกรม Edit Plus กอนใชง าน 3. ใหนกั ศึกษาเขียนโปรแกรม ตามตัวอยา งที่ 8.1 การใช Byte Stream และทําการจัดเตรียม แฟมขอมูลท่ีใชในการติดตอกับโปรแกรมแกม ช่ือ D:/Java/DataForLaB8.txt และ LaB8Out.txt 4. ใหไดผลการทํางาน ขอมูลในแฟม D:/Java/DataForLaB8.txt แสดงภาพที่ 8.13ม 8.14 และ 8.15 5. ใหนักศึกษาเขียนอธิบาย โดยทําการวิเคราะหการทํางานของแตคําส่ัง ในแตละบรรทัดวา ทาํ งานอยางไรโดยนาํ ผลการทดลองมาประกอบการอธบิ าย 6. ใหน กั ศกึ ษาเขยี นโปรแกรม เรื่อง try… catch ใหไดผลการทาํ งานโปรแกรม (ภาพที่ 8.16) 7. ใหนักศึกษาเขียนโปรแกรมตาม ตัวอยาง 8.3 โปรแกรมในการแสดง character stream โดยใช try… catch รวมกับการใชคําสั่งการติดตอแฟมขอมูลระดับไฟล ดวยคําส่ัง FileReader และ FileWriter 8. ใหน กั ศึกษาเขยี นผลการทดลองของโปรแกรมและอธบิ าย การทํางานมาพอเขา ใจ 9. ใหนักศึกษาทําการคนควาทําการเขียน ใหนักศึกษาทําการคนควาทําการเขียน Buffer Stream รองรับการปอ นขอมลู จาํ นวน 10 ตัวอักษร 10. ใหน กั ศกึ ษาทาํ การคน ควาทําการเขียนขอ มูลดวยคลาส PrinterWriter -------------------------------------

การทดลองท่ี 9 การประยุกตการติดตอฐานขอ มลู กับเครอื ขาย วัตถปุ ระสงค 1. เพ่อื ใหสามารถเขยี นโปรแกรมจาวาบนเนต็ บนี สไ ด 2. เพือ่ ใหส ามารถเช่ือมตอเน็ตบนี สกับมายเอ็สคิวแอลได 3. มที ักษะการโปรแกรมใชมายเอ็สควิ แอลบนเครือขา ยได ความรูพื้นฐาน การติดต้งั เนต็ บนี ส สามารถดาวนโ หลดไดท ่ี https://netbeans.org/downloads/ การใชง านเน็ตบีนส เรียกโปรแกรมเน็ตบนี ส จาก Start->All Programs ->NetBeans->NetBeans IDE 8.0 สรา งโปรเจค็ (Project ) ดว ยการเลอื กรายการเมนู File->New Project สั่งใหทํางาน ส่ังใหทาํ การทดสอบและการทํางานของโคด ดว ยการคลิกปุม Play การติดตงั้ AppServ การติดตั้งระบบเครือขายคอมพิวเตอร สําหรับการเขียนการควบคุมหนาเว็บไซต โปรแกรมฐานขอมูลมายเอ็สคิวแอล (MySQL) และ phpMyAdmin ซึ่งชุดพัฒนาสามารถ ดาวนโ หลด ไดท่ี http://sourceforge.net/projects/appserv/files/

การเชอ่ื มตอ เน็ตบนี สกับมายเอส็ คิวแอล เปดโปรแกรม NetBeans เพ่ือทําการเปด Services ของ Database ผานทาง Driver ใหส ามารถเช่อื มตอ MySQL ทําการเปด Services ก็สามารถนํา NetBeans ทําการเชื่อมตอกับ MySQL ผานทาง Localhost ทําการกําหนด Configuration ใหกับ Host ที่เปน localhost คือ User Name : คือ root สว น Password : คอื อยา งนอย 4 ตวั อกั ษร การเพ่ิม Library ของ NetBeans กบั MySQL jdbc Driver การกําหนดใหมกี ารทํางานรว มกนั ระหวาง NetBeans กับ MySQL มีความจําเปนตอง อาศัย Driver ของฐานขอมูล MySQL อยางตอเน่ือง ในการแปลงขอมูลระหวางกัน สามารถ การเพ่ิม Library ของ NetBeans กบั MySQL jdbc Driver โดยการคลิกขวาท่ี Libraries แลว ทําการเลือก Add Library ทําการเลอื ก MySQL JDBC Driver การกาํ หนดคุณลกั ษณะมายเอ็สคิวแอล การกําหนดสามารถทําไดโดยการคลิกขวาท่ี Databases->MySQL Server at localalhost: 3306 [root] (disconnection) แลวทําการเลือก Properties ทําการกําหนด Administration Password เปน 1234 (สามารถเวนวางไวได) ตามที่ กําหนดขณะทําการติดตั้ง และเม่ือตองการใหมีการจํารหัส สามารถทําไดโดยการทํา เคร่ืองหมายในบล็อก Remember Password แลว คลกิ OK ทําการกําหนดคุณสมบัติของผูบริหารระบบไดโดยการคลิกแท็บ Admin Properties โดยทําการกําหนดในสวนของ Path/URL to admin tool: สวนของ Path to start command: และสวนของ Path to stop command: ซึง่ มปี ุม Browse อปุ กรณ 1. เคร่ืองคอมพวิ เตอร 2. ระบบอินเทอรเ น็ต สําหรับการคน ควา 3. ตัวโปรแกรม NetBeans 4. ตวั โปรแกรม Appserv 5. ตวั โปรแกรม MySQL 6. หนว ยความจําเคลอ่ื นที่ (Handy Drive หรือ External Hard disk)

วธิ ที ดลอง 1. ใหนกั ศึกษาทําการติดตัง้ NetBeans ไวที่ Dive D: 2. ใหนกั ศึกษาทําการสราง Project ช่อื HelloBeans ไวท่ี D:\\Breans 3. ใหโคดใหแสดง ชือ่ รหสั นักศึกษา และสาขาวชิ าของนกั ศกึ ษา 4. ใหท าํ การทดสอบการทาํ งานของโคด และใหบันทึกผลการทํางานโปรแกรม 5. ใหนกั ศึกษาทําการติดตั้ง MySQL ดวย Appserv ลงในไวท่ี Drive D: 6. ใหนักศึกษาทําการทดสอบการทํางานของ NetBeans กับ MySQL ใหสมบูรณ -------------------------------------

การทดลองท่ี 10 การประยุกตการติดตอ ฐานขอมลู กับเครอื ขาย วตั ถปุ ระสงค 1. เพอ่ื ใหสามารถใหเ นต็ บีนสเช่อื มตอ กบั MySQL ได 2. เพอื่ ใหสามารถสรางฐานขอ มลู ดวยเน็ตบีนส บนมายเอส็ คิวแอลได 3. มที ักษะการสรา งตารางบนมายเอ็สคิวแอลของเครือขา ยได ความรูพ ้ืนฐาน สรางและทาํ การเชอ่ื มตอ ฐานขอ มูลใหพรอ มใชงาน การติดตอกับฐานขอมูลสามารถกระทําไดโดยการกระทําผานทางตัวอิดิเตอรของมายเอ็สคิว แอล (SQL editor) ซ่ึงตวั NetBeans IDE ไดต ิดต้ัง SQL Editor สามารถทาํ การสรา งฐานขอมูลใหมท่ีใช ในการงานได ดวยทําการสรางฐานขอมูลโดยการคลิกขวาที่โนด MySQL Server at locationhost: 3306 [root] และเลือกรายการเมนูยอย Create Database ระบบจะมีกลองขอความ Create MySQL Database ใหท าํ การกรอกชื่อฐานขอ มูลลงในชอ ง New Database Name: แลวทําการคลกิ OK สรางตารางใหกับฐานขอมูล (Creating Database Tables) การสรางตารางฐานขอมูลสามารถทําไดสองวิธีคือ สรางตารางไดจากกลองขอความ (Dialog) กบั การสรางตารางโดยใชต ัว SQL Editor ดังน้ี การสรางตารางดวย SQL Editor (Using the SQL Editor) การสรางตารางจาก SQL Editor ของ NetBeans IDE มขี ั้นตอนดังน้ี • จากตัว Explorer ของ Database เมื่อทําการขยายแลวใหทําการเชื่อมตอโนด จะมี โฟลเดอรยอยตอจาก jbdc:mysql://localhost:3306/mynewdatabase… จาํ นวน 3 โฟลเดอรย อย Tables Views และ Procedures • จากนัน้ ใหท ําการคลกิ ขวาท่ีโฟลเดอร Tables แลวทําการเลือก Execute Command จะไดพ้นื ทีว่ า งของ main window ที่ใชใ นการสรางโคดของ SQL Editor • ทาํ ใหม พี นื้ ทขี่ อง SQL editor สามารถทาํ การสรางตารางไดต ามตองการ

การสรา งตารางดวย Table Dialog (Using the Create Table Dialog) สรางตารางไดดว ยการทํางานของทลี่ ะ Dialog ซ่งึ ในตวั อยา งนจ้ี ะทาํ การสรางตารางชื่อ Subject มขี ัน้ ตอน ดังนี้ • ตัว Explorer เม่ือทําการขยายแลวตัวExploreของDatabaseจะมีโฟลเดอร ยอยตอจาก ก jbdc:mysql://localhost:3306/mynewdatabase… มี โฟลเดอรยอย Tables ทําการคลิกขวาที่โฟลเดอร Tables แลวทําการเลือก Create Table ตัวกลองขอความท่ีใชสรางตาราง (Create Table Dialog) ถูกเปดข้ึน ใหทําการพิมพชื่อตารางลงในชอง Table Name: Subject และ ทาํ การคลกิ ปุม Add column • เมื่อไดทําการกําหนดช่ือตารางเปน Subject เพ่ือทําการสรางขอมูล ดวยการ พมิ พขอมลู ลงใน Dialog • ทําการเพิ่มคอลัมนใหกับตาราง Subject ดวยการคลิกปุม Add column ทํา การพิมพข อ มูล เปนตัวกาํ หนดตารางโดยทําการสรา งใหค รบทั้ง 3 รายการ • เม่ือทําการสรางตารางครบตามท่ีไดออกแบบขอมูลในตารางที่ 10.1 แลว สามารถทําการตรวจขอมูลได การส่ังงานตารางขอมลู (Working with Table Data) ในการส่ังใหการทํางานรวมกันระหวางตารางขอมูลบน SQL Editor ของ NetBeans สามารถ ใหทํางานในรูปแบบของ SQL queries บนฐานขอมูลไดหลากหลาย การปรับปรุงแกไขโครงสรางของ ฐานขอมูล การเพิ่ม(add) การแกไข(modify) และการลบ(delete) รวมทั้งเพิ่มรายการขอมูล (record หรือ row) ลงในตารางขอมูล Counselor การสงั่ การงานฐานขอ มูลดวย Script (Running an SQL Script) ในการจดั การเรื่องตารางขอมูลของ NetBeans สามารถสงั่ ใหท าํ งานไดโ ดยตรงดวยการดาวน โหลดท่ี https://netbeans.org/project_downloads/samples/Samples/Java%20Web/ifpwafcad.sql แลว ทําการบนั ทึกไวในตาํ แหนงเดียวกับโปแกรม NetBeans IDE อยู ในท่เี ปน C:\\Program Files (x86)\\NetBeans 8.0\\bin สครปิ ตจ ะทําการสรา งตาราง 2 ตารางที่คลายกับการสรางตาราง Counselor และ Subject โดยสคริปตไดทําการเปลย่ี นชอ่ื ตารางเปน Counselor2 และ Subject2 ตามลําดบั ในการสง่ั สครปิ ตท ํางานสามารถดําเนนิ การได

แนะนําการโปรแกรมบนเครือขา ยดว ยจาวา การนําโคดที่ไดทําการบันทึกไวที่ C:\\AppServ\\www ไปทําการเก็บไวบนเครือขาย คอมพิวเตอรจริง หรือ IP Address จริง เปนการทํางานจริงของการเขียนโปแกรมบนเครือขาย คอมพิวเตอรไ ด ซ่ึงเปนการสรา งเว็บไซตบน MySQL database server ซง่ึ MySQL เปนฐานขอมูล ท่ีใชในการจัดการกับขอมูลที่ใชในการประยุกตใชบนเว็บ ดวยอาจเปนเพราะ MySQL มีความโดดเดน ดา นความเรว็ (speed) ดา นการยดื หยุน (flexibility) และดานความเปนธรรมชาติ (reliability) MySQL ใชภาษา SQL ในการเขียนซึ่งมีโครงสรางของภาษาเปน Query Language สําหรับการเขาถึง และการ ประมวลผลขอมลู ท่อี ยูใ นฐานขอมลู จึงทําให MySQL เปน ระบบมีความนยิ มมากท่ีสุดในปจจุบัน อุปกรณ 1. เคร่ืองคอมพวิ เตอร 2. ระบบอนิ เทอรเนต็ สําหรบั การคนควา 3. เครื่องคอมพิวเตอรควรมีซอฟตแ วร NetBeans IDE เวอรช ่ัน 7.2, 7.3, 7.4, 8.0 4. เครือ่ งคอมพวิ เตอรควรมีซอฟตแ วร Java Development Kit (JDK) เวอรช ่ัน 7 หรือ 8 5. เครื่องคอมพวิ เตอรค วรมซี อฟตแ วร MySQL database server เวอรชน่ั 5.x 6. หนว ยความจาํ เคล่อื นที่ (Handy Drive หรือ External Hard disk) วธิ ที ดลอง 1. ใหนักศึกษาทําการทดสอบการทาํ งานของ NetBeans กับ MySQL ใหสมบรู ณ 2. ใหนกั ศึกษาทําการสรางฐานขอมลู ทนี่ ักศกึ ษาตองการ 1 ฐานขอ มูล 3. ใหนักศึกษาสรางตารางท่ีใชในการเกบ็ รายชื่อเพื่อนในหองเรียนอยางนอย 20 รายช่ือ 4. เมอ่ื สรางตารางสาํ เรจ็ ตามตองการแลว a. ฐานขอ มูลตองสามารถเพ่ิมช่ือเพือ่ นได b. ฐานขอมูลตองสามารถลบชื่อเพือ่ นได c. ฐานขอ มลู ตองสามารถแทรกชอื่ เพื่อนได 5. ใหนกั ศึกษานาํ ฐานขอ มลู วางทเี่ ครอื ขายจําลองหรือ IP จรงิ ตามความเหมาะสม -------------------------------------