scilpt นางสาวมณฑารัตน์ บุญประดิษฐ์ 58670038

1. การเขียน Java & Python ในภาษาhtml
โดย
นางสาวมณฑารัตน์ บุญประดิษฐ์
รหัสนิสิต 58670038 กลุ่ม 3301
เสนอ
อาจารย์ฤกษณะ อิ่มสวาสดิ์

2. LAB Week2 Javascript messagebook
ทาการเปิดโปรแกรม Edit plus

3. จากนั้นทาการเขียนโปรแกรม ด้วยHTML ไปที่ File>>> New> >>HTML
Page
เมื่อเปิดขึ้นมา จะมี code ขึ้นมาให้เราอัตโนมัติ โดยจะประกอบด้วย ส่วน ของ
html head และ body

4. จากนั้นบรรทัดที่11 ใส่คาสั่งว่าเราจะป้อนคาว่าอะไร
คาว่า สวัสดีชาว GI ทุกท่าน หากไม่ใส่ document.write โปรแกรมก็จะไม่รู้ว่า
ต้องการอะไร

5. ถ้าจะเพิ่มการบอกวันที่และเวลาที่เราทาการ update โดยใช้คาสั่ง
document.lastModifiedเป็นที่บอกเวลาที่เราupdate ล่าสุด
จากนั้น บันทึก > เปิดงานในที่เราบันทึกที่ขึ้นรูป google > ดับเบิ้ลคลิก แล้วจะ
ขึ้นเว็บงานที่เราบันทึกแสดงออกมา

6. ผลลัพธ์ที่ได้
กลับไปที่โปรแกรม

7. ถ้าพิมพ์ alert ขึ้นเป็น ป๊ อปอัพ(Pop-up) แจ้งเตือน

8. จากนั้น บันทึก > เปิดงานในที่เราบันทึกที่ขึ้นรูป google > ดับเบิ้ลคลิก แล้วจะ
ขึ้นเว็บงานที่เราบันทึกแสดงออกมา
ถ้าพิมพ์confirmจะขึ้น ยืนยัน เพื่อให้เลือก

9. จากนั้น บันทึก > เปิดงานในที่เราบันทึกที่ขึ้นรูป google > ดับเบิ้ลคลิก แล้วจะ
ขึ้นเว็บงานที่เราบันทึกแสดงออกมา
ถ้าพิมพ์promptจะขึ้นเป็น กล้องข้อความ

10. ***การทา messagebook มี3แบบ
1alert เตือน
2 confirm ยืนยัน
3 prompt กล้องข้อความ

11. LAB WEEK3 Javascript กับ HTMLถามอายุ
เข้าโปรแกรม EditPlusขึ้นมาเพื่อเขียนโปรแกรม

12. จากนั้นกด ปุ่ ม ctrl+N
คาสั่งโดยใช้ HTML
จะพิมพ์คาสั่งลงไป Test คือชื่อ post จะบอกการแสดงผล text ตัวนี้คือชนิด
ที่เราจะให้กรอกข้อมูล นั้นก็คือกล่องข้อความ

13. form ทาหน้าที่เหมือนไปรษณีย์
ใส่ชื่อForm name = "test" method = เราจะพิมพ์เวลาใส่ข้อความ"post"
action = "ไว้ใส่ข้อมูลจะโพสต์อะไร"
Input type = "text"จะขึ้นข้อความที่เราเอาคาสั่งใส่ไปแล้ว
Size ก็คือขนาดขอข้อความ นั้นก็คืออายุ คือตัวเลขโดยเราจะใช้ตัวเลขนั้นก็คือ
ตัวเลข 3 ตัว
จากนั้นกดเซฟและตั้งชื่อ
Button name = "submit"สร้างปุ่ มยอมรับ
จะได้ปุ่ มคลิก
On click จะได้ปุ่ ม send data ส่งข้อความที่คลิกได้

14. จากนั้นเซฟจะได้ผลลัพธ์ที่เราสามารถเชื่อมลิงค์ได้
มีปุ่ มคลิกแต่คลิกยังไงก็ไม่มีอะไรเกิดขึ้นเพราะเรายังไม่ใส่เงื่อนไข
Submitชื่อที่เรียกภายใน code ของมัน ทุกอย่างต้องมีชื่อของมัน
จะได้ผลลัพธ์ จากเปิดหน้าWebขึ้นมาจะแสดงผล

15. function demo เอาไว้เก็บอายุ
if(test.age.value > 50) ตั้งเงื่อนไข ถ้ามากกว่า50ก็จะแก่
alert("You are old!!!"); คุณแก่
else จะตรงข้ามกับif { ยังไม่แก่alert("You are young(*_*)");

16. ***ถ้ายังไม่ใส่เลขแล้วคลิกส่ง จะขึ้นคุณยังไม่แก่

17. การถามเกรด
เราจะพิมพ์คาสั่งเราไป โดย var คือการประกาศตัวแปร

18. จากนั้น บันทึก > เปิดงานในที่เราบันทึกที่ขึ้นรูป google > ดับเบิ้ลคลิก แล้วจะ
ขึ้นเว็บงานที่เราบันทึกแสดงออกมา

19. ถ้าใส่101 โปรแกรมจะขึ้นF
จริงๆต้องได้ A ให้กลับไปแก้ if(score >=80)

20. Week4 Javascript+google map api
เปิดโปรแกรม
เปิดgoogle map>>>กดsimple map

21. ขึ้นหน้านี้ เลื่อนลง แล้วกดรูปกระดาษ2แผ่นหรือcoppy
แล้วกลับไปที่โปรแกรม
กดctrl v

22. จะcoppy code วาง
แล้วcoppy บรรทัดที่33 ลบคาหลัง key= แล้ววางคาที่coppyมาใส่

23. ลบบรรทัดแรก เปิดหน้า2
บันทึกแล้วเซฟ แล้ว

24. คลิก
จะขึ้นหน้าแผนที่ที่ออสเตรเลีย

25. กดดาวเทียมแล้วไปที่ sydneyถ้าจะมาไทยให้มาที่บรรทัดที่27
แล้วแก้เลข

26. แล้วกด ctrl s
เข้าซอยสดใส

27. ขึ้นครึ่งภาพ

30. ถ้าอยากให้แสดงผลต้องใส่ตัวที่ไฮไลท์ลงไป

31. ตัวที่ไฮไลทเป็นการเรียกแผนที่
getElementById('map')
ไอดี ชื่อ แมพ

32. ถ้าลบs
จะไม่ขึ้น ไม่ปรากฏหน้าเว็บ

33. LAB WEEK5 Drawing on the map and KML
นาคีร์จากการทา Google Map APLS week4 มาใช้
ทาการใส่คีร์ไปในโค้ชที่กาหนดให้ ซึ่งโค้ชที่ได้นามาจากเว็บ
developers.google.com

34. กาหนดค่า Lat,Lng ที่เราต้องการ
ทาการกด save

35. ต่อมาทาการใส่เครื่องหมายหมุดหรือจุด เราสมารถเลือกเปลี่ยนหมุด หรือ
Marker ตามที่เราต้องการ เพื่อให้สอดคล้องกับการสื่อความในแผนที่ ทาได้
ดังนี้ เติมบรรทัดที่ 30 พิมพ์ var Marker = new google.maps.Marker
การทา KML ไฟล์ เปิดโปรแกรม google Earth มา เปิดรูปหลายเหลี่ยมใหม่

36. ทาการวาดpolygonในตาแหน่งที่เราต้องการ

37. ทาการ save โดยไปที่แถบด้านซ้ายมือ คลิกขวาตรงข้อมูลpolygonที่เราสร้างไว้
แล้วไปที่ บันทึกสถานที่เป็น
กลับไปที่เว็บ developers.google.com เพื่อหา icon

38. จากนั้นทาการใส่ icon ลงไป
ทาการกด save ข้อมูล
1. เปิดข้อมูลที่ save ไว้ขึ้นมา ก็จะปรากฏ Marker ที่เราทาการจุดไว้บน
แผนที่หน้าเว็บ

40. LAB WEEK6 KML

41. เปิดโปรแกรม google Earth มา เปิดรูปหลายเหลี่ยมใหม่
ทาการวาด polygon โดยการใส่สีให้ขอบเขต และตั้งชื่อให้กับ polygon

42. ทาการ save ข้อมูล polygon ที่เราวาด โดยไปที่แถบด้านซ้ายมือ

43. เมื่อทาการ save เสร็จแล้ว ก็จะปรากฏดั่งรูป โดยที่ตาแหน่งที่วาด polygon ก็
จะปรากฏชื่อขึ้นมาดั่งที่เราตั้งค่าไว้
ทาการพิมพ์โค้ชในโปรแกรม Edit plus ดั่งรูป

44. เอาไฟล์อัพโหลดบนเว็บไซต์ก่อน โดยไปเปิดที่เว็บ sites.google.com ทาการ
เข้าสู่ระบบ และทาการสร้างเว็บไซต์ส่วนตัว
ไปที่สร้าง> ตั้งชื่อเว็บไซต์ของคุณ > ตาแหน่งของเว็บไซต์
ติ๊กถูกตรงช่องด้านล่าง

45. ก็จะได้เว็บไซต์ขึ้นมาหนึ่งเว็บ

46. จากนั้นคลิกที่สร้างหน้าตรงแถบข้างบนขวา
จะปรากฏดั่งรูปและทาการตั้งชื่อหน้าเว็บ

47. ต่อมาทาการอัพโหลดไฟล์ที่เราสร้าง polygon ใน Goolgle Earth เข้ามาบน
เว็บไซต์

48. เมื่ออัพโหลดไฟล์เสร็จแล้วทาการคัดลอกที่อยู่ลิงค์ของไฟล์ที่พึ่งอัพโหลดไป
กลับมาที่โปรแกรม Edit plus โดยในบรรทัดที่ 38 วางลิงค์ URL ที่ทาการคัด
ลองลงไป

49. ทาการ save ข้อมูล

50. ทาการเปิดไฟล์ที่เราสร้างโพลีกอนขึ้นมา

51. ทาการวางโค้ชแล้วกด save
ผลลัพธ์ดั่งภาพ
LAB WEEK7
1. พิมพ์โค้ชลงไปในโปรแกรม จากนั้นไปที่ File > New > HTML page

52. Copy ข้อมูล float , height , width มาใส่ในหน้าต่างใหม่ โดย float คือการทา
ให้แผนที่ชิดฝั่งใดฝั่งหนึ่ง จะอยู่ตรงกลางซ้ายหรือขวา height บอกขนาดของ
แผนที่ และ width บอกความกว้าง
ทาการพิมพ์ข้อมูลส่วนของตัว Body html ลงไป

53. พิมพ์ <div id = “map” ></div> ถ้าไม่มีบรรทัดนี้แผนที่จะไม่ปรากฏ ซึ่งเป็น
บรรทัดที่สาคัญมาก

54. กาหนดการซูมของตัวแผนที่
พิมพ์โค้ชตามรูป

55. ทาการ save จะปรากฏแผนที่บนเว็บดั่งรูป
ทาจุดมาร์ค เพื่อวาดเส้นสามเหลี่ยมเบอร์มิวด้า ประกาศตัวแปลทั้งหมด 4 ตัว
แปร

56. ทาการพิมพ์ตัวแปรใส่สีที่หมุด โดยเส้นของสี StrokeOpacity : 0.5;
ความหนาของเส้น StrokeWeight: 2,เติมสีข้างใน fillcolor
กด save จะได้ผลลัพธ์ดั่งภาพ

57. LAB WEEK8 การสร้างกล่องเครื่องมือในแผนที่บนหน้าเว็บ
เปิดโปรแกรที่ชื่อ EditPlus จากนั้นไปที่ File > New > HTML page
ทาการ copy โค้ชมาวางไว้

58. ทาการแก้ไขโค้ชตรงบรรทัดที่ 53
ทาการกด save

59. จะได้ผลลัพธ์ดั่งภาพ

60. LAB WEEK9 Python
เปิดโปรแกรมที่ชื่อ IDLE (Python GUI) จะได้หน้าต่างดั่งภาพ
กาหนดตัวแปร แล้วพิมพ์คาที่เราต้องการจะให้แสดง

61. จากนั้นกาหนดตัวแปร วิธีการแสดงผล > sum
ถ้าอยากให้เลข 10 อยู่ใน a เลข 15 อยู่ใน b มาแสดงบนหน้าต่างสามารถทาได้
ดั่งนี้

62. ถ้าอยากรู้ชนิดของตัว c ยกกาลังเป็นตัวเลขชนิดไหน สามรถทาได้ดังนี้
สามารถใช้หมวดคณิตศาสตร์เป็นการคานวณ คือ import math

63. เช่น หมวดในการซื้อทีวี

65. LAB WEEK10
การใช้ if ในการบอกอายุ ใช้ตัวแปร age ในการจัดเก็บช่วงอายุสามารถทาได้ดั่ง
นี้
ใส่เงื่อนไข >>> if age > = 60 ถ้าคุณอายุมากกว่า 60 คุณแก่ แต่ถ้าคุณอายุน้อย
กว่า คุณอ่อนจัง

66. การสร้างรหัส passworsd เปิดหน้าต่างใหม่ขึ้นมาดั่งรูปจากนั้นพิมพ์โค้ชลงไป
จากนั้นไปที่แถบเครื่องมือด้านบน คลิกตรง run > run module

67. ก็จะขึ้นหน้าต่างให้เราป้อนรหัสลงไป
การทา Buffer หรือการสร้างแนวกันชน จากโปรแกรม Arcmap โดยไปที่แถบ
เครื่องมือด้านบนที่ชื่อว่า Python

68. จะปรากฏหน้าต่างดั่งรูป
พิมพ์โค้ชลงไป โดยที่มีการดึงข้อมูลตัวแผนที่จากโฟล์เดอร์ที่เราเก็บงานไว้

69. พิมพ์คาสั่งลงไปเพื่อให้เกิดแนวกันชนที่เราต้องการ
ทาการ Enter ลงมาจะปรากฏหน้าต่างดั่งรูป

70. LAB WEEK 11
เปิดโปรแกรม ArcGIS และเปิดหน้าต่าง Python window พิมพ์คาสั่งตามภาพ
ในช่อง Python

71. จะปรากฏภาพแผนที่โลก ดังภาพ
พิมพ์คาสั่งลงไปตามภาพ เพื่อทาการเปลี่ยนสีของภาพแผนที่โลก

72. คลิกขวาตาแหน่งดังภาพ เลือก save as layer file
ตั้งชื่อ และ save

73. นาข้อมูลจุดความร้อนที่ copy มาวางใน Excell
ทาการ save as แล้วสังเกตที่ type ด้วย ต้องเป็น Excell97-2003 Workbook(*.
xls) - ปิด Excell และ notepad ของข้อมูลจุดความร้อน

74. พิมพ์คาสั่งที่ทาการไฮไลท์ไว้ ดังภาพ จะปรากฏจุดความร้อนที่เราทาข้อมูลใน
โปรแกรม Excell ก่อนหน้า บนภาพ

75. LAB WEEK 12 Interporest
เปิดข้อมูล น้าฝนและอุณหภูมิ ใน facebook กลุ่มขึนมา คลิกที่ภาคกลาง แล้ว
เลือกจังหวัดชลบุรี พิมพ์ข้อมูลชื่อสถานที่และปริมาณน้าฝนลงไป โดยดูข้อมูล
มาจากตารางข้อมูลที่โหลดมาข้างต้น ไป search ใน google earth ตามต้า
แหน่งของสถานที่ที่เราพิมพ์ชื่อลงไป เพื่อเอาค่า Lat , Long ไปพิมพ์ใสในช่อง
X , Y ในตาราง

76. Save as แล้วสังเกต Type ด้วย ว่าเป็น excel 97 – 2003 workbook (*.xls)
ปิดโปรแกรม Excel - เปิด ArcGIS จะได้ภาพขอบเขต ม.บูรพา โดยวิธีการ
ดังนี 1. เขียนค้าสั่งลงไป ดังภาพ

77. เมื่อ Enter แล้วจะได้ปริมาณน้าฝนดั่งภาพ

78. LAB WEEK 13 การผสมสีในแผนที่ จากดาวเทียม Landsat5
เปิดโปรแกรม ArcGIS ขึ้นมา พิมพ์คาสั่งลงไปตามภาพ เพื่อทาการเรียก
ภาพถ่ายดาวเทียม Band 3,Band4,Band5
พิมพ์คาสั่ง arcpy.CompositeBands_management ซึ่งเป็นคาสั่งที่ใช้ในการ
ผสมสี

79. กาหนดแต่ละแบนว่าจะให้เป็นสีอะไร ( แปลงพืชพรรณเป็นสีแดงหรือส้ม )
พิมพ์คาสั่งดังภาพ ( แปลงพืชพรรณเป็นสีฟ้าหรือน้าเงิน )
กด Enter ลงมาจะได้ดั่งภาพ

80. เปิด IDLE (Python GUI) ในคอมพิวเตอร์ออกมา จะได้หน้าต่างดังภาพ

81. แล้วกดเปิดหน้าต่างใหม่ออกมาด้วย File > New file จะได้หน้าต่าง 2 หน้าต่าง
ดังภาพ
พิมพ์คาสั่งลงไปเพื่อทาการดาวน์โหลดไฟล์

82. จากนั้นทาการกด save

83. LAB WEEK14 NDVI
เปิดโปรแกรมที่ชื่อ Python Shell ขึ้นมา จากนั้นไปที่ File > New Window
ได้หน้าต่างใหม่มาอีก 1 หน้า ดังภาพ

84. พิมพ์คาว่า Import arcpy,string ลงไป string คือหมวดตัวอักษรและเพื่อ
นาเข้าข้อมูลต่างๆที่จะใช้เขียนในภาษา Python ที่จะจัดแสดงตัวหน้าที่
พิมพ์คาสั่ง ดังภาพ เพื่อกาหนด Folder ปลายทาง ตั้งชื่อชิ้นงานที่ทา โดย
ชิ้นงานจะถูกเก็บไว้ใน Folder Landsat5

85. พิมพ์คาสั่งเรียกเปิดไฟล์ภาพ B4 และ B3
ทาการกด save เข้าไปที่ File >Save as

86. ย่อหน้าต่าง IDLE ลงมา แล้วเปิดโปรแกรม ArcMap ขึ้นมา

87. ทาการเรียกไฟล์ที่ทาใน IDLE เมื่อกี้ออกมา โดยคลิกขวาในหน้าต่าง Python
แล้ว Load เลือก Folder งานที่ทาใน IDLE ก่อนหน้านี้( NDVI.py ) แล้ว open

88. คาสั่งที่พิมพ์ใน IDLE ก่อนหน้านี้ จะปรากฏในหน้าต่าง python ดังภาพ แล้ว
กด Enter
จะได้รูปภาพปรากฏออกมา ดังภาพ ภาพนี้ คือ ภาพที่ผ่านการทา NDVI แล้ว

89. GUI (Graphical User Interface) คลิกขวา My Toolboxes ดังภาพ ตั้งชื่อ

90. คลิกขวาที่ Folder “My Toolboxes” ตรง Folder ที่ตั้งชื่อเมื่อกี้เลือก Script
ดังภาพ

91. ตั้งชื่อ (Name) , Label , Description ตั้งค่า ดังภาพ
ช่อง scriptfile คลิกเขาไปเลือก Folder NDVI.py (ที่ทาการบันทึกไว้แล้ว แล้ว
open > Next

92. การตั้งค่า Input Output ตั้งค่าต่างๆ ดังภาพ

93. ดับเบิ้ลคลิกที่ NDVI ที่สร้างแล้ว ดังภาพ จะปรากฏหน้าต่างออกมา
Input เข้าไปใน Folder “Landsat5” เลือก Band 4 และ Band 3 ดังภาพ

94. เลือกที่ภาพที่เรา Save ไว้ก่อนหน้านี้

95. กด Yes

96. จะปรากฏหน้าต่างดั่งรูป