8. บรรทัดที่ 12 พิมพ์document.write (‚สวัสดีชาวGIทุกท่าน‛)
ให้ทาการ save ไปที่File >> Save As
document เป็น Object ส่วน write
เป็น Method ของ
9. เปิด Folder ที่ต้องการsave ตั้งชื่อไฟล์ >> Save as Type เลือกเป็น HTML
เมื่อทาการ Save เรียบร้อยแล้วไปเปิด Folder ที่ทาการ save คลิกขวาที่ไฟล์ >> Open with >> Google
Chome
14. ทาการ save >> เปิดไฟล์.HTML >> Open with Google
จะปรากฏหน้าต่างการแจ้งเตือนดังภาพ
พิมพ์window.prompt (‚คุณอยากกินอะไร?‛);
การสร้าง Text box พร้อม(Prompt)เพื่อให้ผู้ใช้
ป้อนข้อมูลก่อนเข้าไปยังระบบหรือเข้าหน้าเว็บ
ดูตัวอย่าง
15. ทาการ save >> เปิดไฟล์.HTML >> Open with Google
จะปรากฏหน้าต่างการแจ้งเตือนดังภาพ
Week 3 HTML+Javascript โครงสร้างของ Javascript
เปิดโปรแกรม EditPlus 3ขึ้นมา ไปที่แถบเครื่องมือ File >> New >> HTML Pages
20. พิมพ์function demo() ในบรรทัดที่5
ในบรรทัดทิ่ 7และ13 เป็การกาหนดตัวแปร โดยCode คือ การแสดงว่า ถ้ามีอายุมากกว่า 50 จะปรากกฎ
หน้าต่าง You are old ถ้าน้อยกว่า 50 จะปรากฏหน้าต่าง You are young
22. เมื่อพิมพ์57 แล้วกด send data จะปรากฏ You are old!!!!
เมื่อพิมพ์ 57 แล้วกด send data จะปรากฏ You are old!!!!
23. Week 4 Javascript+google map api
เปิด Google แล้วทาการค้นหา google map api javascript แล้วเลือก Website แรก
สร้าง Key โดยไปที่ GUIDES >> GET A KEY >> CREAT A NEW PROJECT >> CREAT AND
ENABLE API จะปรากฏโค้ดขึ้นมา ทาการคัดลอก KEY
25. ใส่ Code ข้างล่างนี้ลงไปในโปรแกรม EditPlus 3
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
56. Week 7 Drawing
เปิดโปรแกรม EditPlusขึ้นมา >> File >> New >> HTMLPages
ทาการคัดลอก Code
<!DOCTYPE html>
<html>
<head>
<title>Drawing tools</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
57. }
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js…">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 13.277605, lng: 100.926524},
zoom: 15
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
},
markerOptions: {icon:
'https://developers.google.com/…/e…/full/images/beachflag.png'},
circleOptions: {
fillColor: '#00ff88',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
การเขียนคาสั่ง Drawing
การสร้างเครื่องมือวาด
การสร้างเครื่องมือวาด Code
การสร้างเครื่องมือ โดยมีจุด วงกลม
เส้น
