Week7 duangkamon

1. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
Week 7 เรื่อง Polygon / Bermuda
1. เริ่มต้นโดยเปิดหน้าการทางานใหม่ขึ้นมา New > HTML Page
2. จะแสดงโครงสร้าง Code ดังหน้าต่างดังภาพด้านบน

2. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
3. กด Enter มาทางานที่บรรทัดที่ 10 ให้พิมพ์ <style> และในบรรทัดที่ 11 กาหนด Style ให้พิมพ์#map
คือการเริ่มต้นในเรื่อง Full Fame
4. บรรทัดที่ 12 ใช้ float : left; เพื่อชิดซ้าย

3. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
5. บรรทัดที่ 13 height:100%; เพื่อความสูงให้ชิดของบนและล่าง
6. บรรทัดที่ 18 และ 19 เป็นเรื่องของ ระยะห่างด้านบน กับเรื่องการเว้นวรรคด้านหน้า กาหนดค่าเป็น 0

4. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
7. ในบรรทัดที่ 24 มีความสาคัญมาก เพื่อการแสดงผล เมื่อไม่มีในส่วนนี้ ผลลัพธ์จะไม่แสดงผล
8. ต่อมาก่อนการประกาศตัวแปร ทาการเปิดและปิด <script> ในบรรทัดที่ 25 และ 26

5. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
9. ต่อการ <script> เราจะตามด้วย function initMap() เพื่อเตรียมการประกาศตัวแปล
10. ทาหารประกาศตัวแปร โดยพิมพ์ var map = new google.maps.Map()

6. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
11. ต่อมาเพิ่ม Object โดยพิมพ์ในวงเล็บ (document.getElementByTd(‘map’),{})
12. บรรทัดที่ 28 คือการกาหนดพิกัด เนบิวล่า

7. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
13. บรรทัดที่ 29 เป็นการปรับตาแหน่ง กาหนดที่ 5
14. บรรทัดที 30 เป็นการกาหนดการแสดงผลแบบ ภูมิประเทศ จึงกาหนดเป็น terrain

8. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
15. ไป Copy Code จากสัปดาห์ที่แล้ว ในบรรทัดที่ 52-53
16. Copy บรรทัดที่ 52-53

9. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
17. นา Code มาวาง ต่อจาก </script>
18. จากนั้น Save ให้เรียบร้อย แล้วทดสอบเปิดหน้าเว็บ

10. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
19. จะแสดงผลดังภาพด้านบน
20. ในบรรทัดที่ 32 เราจะใส่ Code วาดโพลิกอนสามเหลี่ยมให้แสดงในหน้าเว็บจากคาสั่ง

11. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
21. ใส่ค่าพิกัดให้เรียบร้อยกาหนดโพลิกอนสามเหลี่ยม มีทั้งหมด 4 จุด ในที่นี้ให้นับกลับมาที่จุดเริ่มต้นด้วย
22. บรรทัดที่ 38 เป็นการอ้างอิงโพลิกอน

12. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
23. ต่อมาเลือกการใส่สีให้ขอบโพลิกอน
24. โดยการ Search google เรื่อง color html

13. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
25. เมื่อได้สีที่ต้องการแล้ว นามาพิมพ์ในบรรทัดที่ 40 strokeColor:’#F804BF’,
26. เมื่อได้สีขอบโพลิกอนแล้วต่อมาเลือกสีให้พื้นที่โพลิกอน

14. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
27. เมื่อได้สีที่ต้องการแล้ว นามาพิมพ์ในบรรทัดที่ 43 fillColor:’#F8D804’
28. บรรทัดที่ 46 ให้พิมพ์burmuda.setMap(map); เพื่อเตรียมการแสดงผล

15. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
29. จากนั้น Reface หน้าเว็บอีกครั้ง จะแสดงผลโพลิกอนตามพิกัดที่เราตั้งไว้