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/
ข้ อมูลอ้างอิง