Transcript script
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
ภาษา JavaScript
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
แบบทดสอบก่อนเรียน
แบบทดสอบหลังเรียน
JavaScript
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
จุดประสงค์ การเรียนรู้
1. บอกลักษณะและวิธีการสร้ างโปรแกรม
JavaScript ได้
2. มีทักษะในการสร้ างโปรแกรมด้ วย JavaScript
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
สาระสาคัญ
HTML และ JavaScript เป็ นโปรแกรมภาษาที่ใช้ สาหรั บ
สร้ างและตกแต่ งเว็บไซต์ ที่นาเสนอบนอินเทอร์ เน็ต มี หลักการ
ทางาน 3 ขั้นตอน คือ การเขียนโค้ ด การคอมไพล์ และการรั น
โปรแกรม ซึ่ ง HTML สามารถทางานได้ โดยไม่ ต้องอาศั ย
JavaScript แต่ JavaScript จะต้ องใช้ HTML ช่ วยในการรั น
โปรแกรม
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
แบบทดสอบก่ อนเรียน
แบบทดสอบมีท้งั หมด 5 ข้ อ
ถ้ าพร้ อมแล้ วให้ คลิกทีป่ ุ่ มเริ่มทาแบบทดสอบ
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
เนือ้ หา/สื่ อการเรียนรู้
ข้ อมูลอ้างอิง
JavaScript คืออะไร
การเขียนโค้ ด JavaScript
Attributes ในแท็ก Script
รูปแบบ script
การเขียนคาสั่ ง JavaScript
การใส่ คาอธิบาย (Comment)
วิธีแทรก JavaScript Code ลงใน HTML
วิธีซ่อน JavaScript Code ใน HTML
Java Script คืออะไร
เป็ นภาษาสคริ ปต์สาหรับเว็บเพจ
เป็ นภาษาประมวลผล(Programming
language)
ยึดโครงสร้างและพัฒนามาจากภาษาซี
( C language) เป็ นต้นแบบ
Java Script คืออะไร
ใช้การประมวลผลแบบ interpreter คือ
การแปลภาษาทีละบรรทัด
เป็ นโปรแกรมย่อยๆที่สามารถฝังตัวอยู่
ใน HTML
Java Script คืออะไร
ผลิตโดยบริ ษทั Netscape Communications
เมื่อปี พ.ศ. 2538 ช่วงแรกใช้ชื่อว่า Mocha และ
LiveScript ตามลาดับ ต่อมาได้ร่วมกับบริ ษทั
Sun ร่ วมกันสร้างบราวเซอร์Netscape
Navigator 2.0 และต้องการให้ใช้ร่วมกับ Java
ได้ดว้ ยทาให้ทางบริ ษทั จึงเปลี่ยนชื่อมาเป็ น
JavaScript จนถึงปัจจุบนั
Java Script คืออะไร
สามารถทางานบนเว็บเพจได้สะดวกกว่า
และสามารถเรี ยกดูได้โดยไม่ตอ้ งติดตั้ง
เพิ่มเติม
ถูกใช้ในหลาย ๆ เว็บเพจเพื่อเพิ่มฟังก์ชนั่
ในการทางาน, การตรวจสอบรู ปแบบ,
การติดต่อ กับเซิร์ฟเวอร์ และอื่น ๆ อีก
มากมาย
Java Script คืออะไร
เป็ นภาษาสริ ปต์ที่ถูกใช้กนั อย่างแพร่ หลาย
และเป็ นที่นิยมในอินเตอร์เน็ต และ
บราวเซอร์หลักๆ สามารถใช้งานภาษา
สคริ ปต์น้ ีได้ เช่น Internet Explorer,
Firefox, Chrome, Opera, Safari ฯลฯ
การเขียนโค้ ด Javascript
• สัญลักษณ์ < ……> นี้ เรี ยกว่า
Tag (แท็ก)
• โดยทัว่ ไป Javascript จะใช้ในการ
จัดการองค์ประกอบทัว่ ไปของ
HTML
การเขียนโค้ ด Javascript
• แท็ก <script> จะแจ้งเตือนเบราว์เซอร์ ให้
ทาการตีความข้อความทั้งหมดที่อยูภ่ ายใน
แท็ก <script> ไปยังสคริ ปต์
• โค้ดของ Javascript นั้น จะอยูภ่ ายใน
แท็ก <script>...</script>
Attributes ที่สาคัญในแท็ก Script
ในแท็ก Script มีแอททริ บิวต์ที่สาคัญอยู่ 2 ตัว
นัน่ คือ language กับ type
language แอททริ บิวต์น้ ีเป็ นการกาหนด
ภาษาที่ใช้ของ Script โดยจะตั้งเป็ น
<script language="javascript">
Attributes ที่สาคัญในแท็ก Script
type แอททริ บิวต์น้ ีเป็ นการกาหนดชนิด
และลักษณะของภาษาที่ใช้ภายในแท็ก
Script โดยจะตั้งเป็ น
<script type="text/javascript">
รู ปแบบ script การกาหนดภาษา
ที่ใช้ ของ Script
<script language="javascript">
... คาสัง่ ที่เราจะเขียน javascript............
</script>
ตัวอย่ าง Script1
<script language="javascript">
document.write("Hello world");
</script>
รู ปแบบ script กาหนดชนิดและลักษณะ
ของภาษาที่ใช้ ภายในแท็ก Script
<script type="text/javascript">
... คาสัง่ ที่เราจะเขียน javascript............
</script>
ตัวอย่ าง Script2
<script type="text/javascript">
document.write(“สวัสดีครับ");
</script>
รูปแบบ script เต็ม
<script language="javascript" type="text/javascript">
... คาสัง่ ที่เราจะเขียน javascript............
</script>
ตัวอย่ าง Script3
<script language="javascript" type="text/javascript">
document.write(“ยินดีตอ้ นรับเข้าสู่ เว็บเพจของเรา");
</script>
อธิบาย script
จากตัวอย่ าง Script1 / Script2 / Script3
จะมีการใช้ คาสั่ ง document.write(“......ข้ อความ...........”)
ซึ่งเป็ นคาสั่ งที่ให้ แสดงผลลัพธ์ ที่หน้ าเว็บ
ผลลัพธ์ ที่ได้ มีดังนี้
Script1
Script2
Script3
การเขียนคาสั่ ง Javascript
การเขียนคาสั่ ง เขียนจากซ้ ายไปขวา บน
ลงล่ าง และจบแต่ ละคาสั่ งด้ วยเครื่องหมาย
Semicolon (;)
สามารถรวมคาสั่ งเป็ นชุดเดียวกันเป็ น
กลุ่มคาสั่ ง (JavaScript Blocks) โดยใช้
เครื่องหมาย Curly bracket {…}
การเขียนคาสั่ ง Javascript
Javascript เป็ น case-sensitive
language นั่นหมายถึง การใช้ ตัวพิมพ์ เล็กพิมพ์ ใหญ่ ถอื เป็ นคนละตัวกัน เช่ น
HELLO กับ hello หรือ Hello ทั้ง 3 ตัว
จัดเป็ นคนละตัวกัน เมื่อพิมพ์ชื่อผิดก็จะ
ส่ งผลทาให้ ไม่ สามารถเรียกใช้ ฟังก์ ชั่นได้
การเขียนคาสั่ ง Javascript
tab และช่องว่าง ไม่มีผลต่อการเขียน
โปรแกรม นัน่ คือ คุณสามารถเขียน
บรรทัดที่ 1 แล้วเว้นไปบรรทัดที่ 10 ก็ไม่มี
ผลต่อการแปรของโปรแกรม
การใส่ คาอธิบาย (Comment)
การใส่ คาอธิบาย ( Comment) การใส่
คาอธิบายในคาสั่ งเพือ่ ประโยชน์ ในการ
แก้ ไขหรือ เมื่อผู้อนื่ เข้ ามาดูกจ็ ะทาให้
ทราบถึงคาสั่ งนั้นๆ การใส่ คาอธิบาย
มีวธิ ีการอยู่ 2 วิธีคอื
การใส่ คาอธิบาย (Comment)
คอมเม้นต์แบบบรรทัดเดียว โดยใช้
เครื่ องหมาย // สิ่ งที่อยูห่ ลังจากเครื่ องหมายนี้
คือคอมเม้นต์
คอมเม้นต์แบบหลายบรรทัด โดยใช้
เครื่ องหมาย /* และปิ ดด้วยเครื่ องหมาย */ สิ่ ง
ที่อยูร่ ะหว่างเครื่ องหมายสองตัวนี้คือคอมเม้ต์
การใส่ Comments ใน JavaScript
คอมเม้ นต์ แบบบรรทัดเดียว
1. <script type="text/javascript">
2. document.write(“Hello world”); // เขียนข้ อความว่ า Hello world
3. บรรทัดนีไ้ ม่ ใช่ คอมเม้ นต์
4. /* โปรแกรมนีส้ ร้ างขึน้ มาเพือ่ ทดลองใช้
5. หากมีข้อสงสั ยโปรติดต่ อ บริษัท*/
6. บรรทัดนีก้ ไ็ ม่ ใช่ คอมเม้ นต์
คอมเม้ นต์ แบบหลายบรรทัด
**อย่ างไรก็ตาม เราไม่ สามารถ
แสดงผลหน้ าเว็บด้ วย JavaScript
เพียงอย่ างเดียวได้ เราจะต้ องเขียน
script แทรกเข้ าไปรวมกับ HTML
เพือ่ ทางานร่ วมกัน เพราะ HTML
เป็ นตัวหลักในการทาเว็บ**
วิธีแทรก JavaScript Code ลงใน HTML
สามารถทาได้ 2 วิธีหลักๆ คือ
1. เขียน Code Javascript ลงไปในหน้าเว็บเพจ
นั้นๆเลย ข้อดีคือ ทาได้รวดเร็ ว ซึ่งสามารถ
แทรกเข้าไป ในหน้าเพจที่ตอ้ งการแทรกไปได้
เลย โดยการใส่ Tag <script> และ </script>
คร่ อมคาสัง่ ต่างๆของ JavaScript
วิธีแทรก JavaScript Code ลงใน HTML
ถ้ าเป็ นการประกาศ
ฟังก์ชั่น หรือกาหนดค่ าตัว
แปรจะ นิยมทาในส่ วน
<Head>...</Head>
แต่ ถ้าเป็ นคาสั่ งให้ ทางาน
จริงจะใส่ ในส่ วน
<Body>...</Body>
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello world");
</script>
</body>
</html>
วิธีแทรก JavaScript Code ลงใน HTML
2. การทา Include file หรื อการแทรกโค๊ด
JavaScript อีกวิธีหนึ่ง จะเป็ นการเรี ยกผ่านไฟล์
ซึ่งวิธีแบบนี้จะเหมาะสาหรับโค๊ด หรื อ คาสัง่ ที่
มีการเรี ยกใช้บ่อยๆ เพื่อลดในการเขียนชุดคาสัง่
แต่เราจะเรี ยกมาใช้แทน การเขียนเข้าไปในหน้า
เพจนั้นๆเลย โดยการระบุ แอตทริ บิวต์ SRC
วิธีแทรก JavaScript Code ลงใน HTML
<html>
<head>
<script language="JavaScript" src="myjavascript.js">
</script>
ในส่ วนนี้ src=”myjavascript.js”
</head>
ให้ เราระบุทอี่ ยู่ของไฟล์ Javascript
</html>
วิธีซ่อน JavaScript Code ใน HTML
เป็ นวิธีการป้ องกันการแสดงผลผิดพลาดจาก
บราวเซอร์ ทไี่ ม่ รู้ จกั JavaScript โดยใช้ เครื่องหมาย
<!-- ...--> ใส่ คร่ อม code JavaScript ของเราก็จบ
เวลาที่เบราเซอร์อ่าน ถ้ามันรู ้จกั JavaScript ของเราก็
จะทางาน ถ้ามันไม่รู้จกั JavaScript มันก็จะข้าม
Script ของเราไป เพราะมันจะเห็นเครื่ องหมาย
comment นัน่ เอง
วิธีซ่อน JavaScript Code ใน HTML
สั ญลักษณ์ เริ่มต้ น
การซ่ อน Script
สั ญลักษณ์ ยกเลิก
การซ่ อน Script
<html>
<head>
<script type="text/javascript">
<!-document.write("Hello world");
//-->
</script>
</head>
</html>
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
ใบงาน/แบบฝึ กหัด
คาชี้แจง จงใส่ เครื่องหมายถูก () หน้ าข้ อทีถ่ ูกและใส่ เครื่องหมายผิด () หน้ าข้ อที่ผดิ
________1. JavaScript จัดเป็ นภาษาประมวลผล ประมวลผล
(Programming language)
________2. JavaScript เหมือนกับภาษา HTML
________3. JavaScript ใช้ การประมวลผลแบบ Compiler
________4. JavaScript และ Java คือ ภาษาเดียวกัน
________5. ตาแหน่ งการเขียนคาสั่ ง JavaScript สามารถเขียนได้ ที่ส่วน
Body เท่ านั้น
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
ใบงาน/แบบฝึ กหัด
________6. ตาแหน่ งการเขียนคาสั่ ง JavaScript สามารถเขียนได้ ที่ส่วน
Head
________7. ตัวแปรคือ การจองพืน้ ที่เพือ่ เก็บข้ อมูล
________8. การส่ งค่ าเข้ าสู่ ฟังก์ ชั่น (prompt) สามารถทาโดยผู้ใช้ งาน
________9. การเขียนคาสั่ ง JavaScript เขียนจากบนลงล่ าง
________10. ตัวแปร HELLO กับ hello หรือ Hello ทั้ง 3 ตัวจัดเป็ นตัว
แปรเดียวกัน
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
แบบทดสอบหลังเรียน
แบบทดสอบมีท้งั หมด 5 ข้ อ
ถ้ าพร้ อมแล้ วให้ คลิกทีป่ ุ่ มเริ่มทาแบบทดสอบ
ข้ อมูลอ้างอิง
จุดประสงค์
การเรียนรู้
สาระสาคัญ
แบบทดสอบ
เนือ้ หา/
สื่อการเรียนรู้
แบบฝึ กหัด
ข้ อมูลอ้ างอิง
http://www.doesystem.com/792d165169a836b12b91183ba1dee69
a/Javascript-Basic.htm
http://www.thaigoodview.com/node/51120
http://realdev.truehits.net/javascript/charpter1.php
http://www.freewebs.com/maneemana/
http://www.codetukyang.com/java/button/
http://www.codetukyang.com/java/
http://writejavascript.blogspot.com/
ข้ อมูลอ้างอิง