เรื่อง

จุดประสงค์การเรียนรู้จุดประสงค์การเรียนรู้ เนื้อหา/ สื่อการเรียนรู้ แบบทดสอบ สาระสำคัญ แบบฝึกหัด หน่วยที่ 1 : โปรแกรมภาษาขั้นพื้นฐาน ภาษา JavaScript เรื่อง ข้อมูลอ้างอิง

จุดประสงค์การเรียนรู้จุดประสงค์การเรียนรู้ เนื้อหา/ สื่อการเรียนรู้ แบบทดสอบ สาระสำคัญ แบบฝึกหัด แบบทดสอบก่อนเรียน แบบทดสอบหลังเรียน JavaScript ภาษา ข้อมูลอ้างอิง

จุดประสงค์การเรียนรู้จุดประสงค์การเรียนรู้ เนื้อหา/ สื่อการเรียนรู้ แบบทดสอบ สาระสำคัญ แบบฝึกหัด จุดประสงค์การเรียนรู้ 1. บอกลักษณะและวิธีการสร้างโปรแกรม JavaScript ได้ 2. มีทักษะในการสร้างโปรแกรมด้วย JavaScript ข้อมูลอ้างอิง

จุดประสงค์การเรียนรู้จุดประสงค์การเรียนรู้ เนื้อหา/ สื่อการเรียนรู้ แบบทดสอบ สาระสำคัญ แบบฝึกหัด สาระสำคัญ HTML และ JavaScript เป็นโปรแกรมภาษาที่ใช้สำหรับสร้างและตกแต่งเว็บไซต์ที่นำเสนอบนอินเทอร์เน็ต มีหลักการทำงาน 3 ขั้นตอน คือ การเขียนโค้ด การคอมไพล์ และการรันโปรแกรม ซึ่ง HTML สามารถทำงานได้โดยไม่ต้องอาศัย JavaScript แต่ JavaScript จะต้องใช้ HTML ช่วยในการรันโปรแกรม ข้อมูลอ้างอิง

จุดประสงค์การเรียนรู้จุดประสงค์การเรียนรู้ เนื้อหา/ สื่อการเรียนรู้ แบบทดสอบ สาระสำคัญ แบบฝึกหัด แบบทดสอบก่อนเรียน แบบทดสอบมีทั้งหมด 5 ข้อ ถ้าพร้อมแล้วให้คลิกที่ปุ่มเริ่มทำแบบทดสอบ ข้อมูลอ้างอิง

จุดประสงค์การเรียนรู้จุดประสงค์การเรียนรู้ เนื้อหา/ สื่อการเรียนรู้ แบบทดสอบ สาระสำคัญ แบบฝึกหัด เนื้อหา/สื่อการเรียนรู้ • JavaScript คืออะไร • การเขียนคำสั่ง JavaScript • การเขียนโค้ด JavaScript • การใส่คำอธิบาย (Comment) • Attributes ในแท็กScript • วิธีแทรก JavaScript Code ลงใน HTML • รูปแบบ script • วิธีซ่อน 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> <script language="javascript"> document.write("Hello world"); </script> ตัวอย่าง Script1

รูปแบบ script กำหนดชนิดและลักษณะของภาษาที่ใช้ภายในแท็กScript <script type="text/javascript">... คำสั่งที่เราจะเขียน javascript............ </script> <script type="text/javascript">document.write(“สวัสดีครับ"); </script> ตัวอย่าง Script2

รูปแบบ 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 Script3 Script2

การเขียนคำสั่ง 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"> document.write(“Hello world”); // เขียนข้อความว่า Hello world บรรทัดนี้ไม่ใช่คอมเม้นต์ 4. /* โปรแกรมนี้สร้างขึ้นมาเพื่อทดลองใช้ 5. หากมีข้อสงสัยโปรติดต่อ บริษัท*/ 6. บรรทัดนี้ก็ไม่ใช่คอมเม้นต์ คอมเม้นต์แบบหลายบรรทัด

**อย่างไรก็ตาม เราไม่สามารถแสดงผลหน้าเว็บด้วย JavaScript เพียงอย่างเดียวได้ เราจะต้องเขียน script แทรกเข้าไปรวมกับ HTML เพื่อทำงานร่วมกันเพราะ HTML เป็นตัวหลักในการทำเว็บ**

วิธีแทรก JavaScript Code ลงใน HTML สามารถทำได้ 2 วิธีหลักๆ คือ 1. เขียน Code Javascriptลงไปในหน้าเว็บเพจนั้นๆเลย ข้อดีคือ ทำได้รวดเร็ว ซึ่งสามารถแทรกเข้าไป ในหน้าเพจที่ต้องการแทรกไปได้เลยโดยการใส่ Tag <script> และ </script> คร่อมคำสั่งต่างๆของ JavaScript

วิธีแทรก JavaScript Code ลงใน HTML • <html> • <head> • </head> • <body> • <script type="text/javascript"> • document.write("Hello world"); • </script> • </body> • </html> ถ้าเป็นการประกาศ ฟังก์ชั่น หรือกำหนดค่าตัวแปรจะ นิยมทำในส่วน <Head>...</Head> แต่ถ้าเป็นคำสั่งให้ทำงานจริงจะใส่ในส่วน <Body>...</Body>

วิธีแทรก JavaScript Code ลงใน HTML 2. การทำ Include file หรือการแทรกโค๊ด JavaScript อีกวิธีหนึ่ง จะเป็นการเรียกผ่านไฟล์ ซึ่งวิธีแบบนี้จะเหมาะสำหรับโค๊ด หรือ คำสั่งที่มีการเรียกใช้บ่อยๆ เพื่อลดในการเขียนชุดคำสั่ง แต่เราจะเรียกมาใช้แทน การเขียนเข้าไปในหน้าเพจนั้นๆเลยโดยการระบุ แอตทริบิวต์SRC

วิธีแทรก JavaScript Code ลงใน HTML • <html> • <head> • <script language="JavaScript" src="myjavascript.js"> • </script> • </head> • </html> ในส่วนนี้ src=”myjavascript.js” ให้เราระบุที่อยู่ของไฟล์ Javascript

วิธีซ่อน JavaScript Code ใน HTML เป็นวิธีการป้องกันการแสดงผลผิดพลาดจาก บราวเซอร์ที่ไม่รู้จัก JavaScript โดยใช้เครื่องหมาย  ใส่คร่อม code JavaScript ของเราก็จบ เวลาที่เบราเซอร์อ่าน ถ้ามันรู้จัก JavaScript ของเราก็จะทำงาน ถ้ามันไม่รู้จัก JavaScript มันก็จะข้าม Script ของเราไป เพราะมันจะเห็นเครื่องหมาย comment นั่นเอง

วิธีซ่อน JavaScript Code ใน HTML • <html> • <head> • <script type="text/javascript"> •  • </script> • </head> • </html> สัญลักษณ์เริ่มต้นการซ่อน Script สัญลักษณ์ยกเลิกการซ่อน Script

จุดประสงค์การเรียนรู้จุดประสงค์การเรียนรู้ เนื้อหา/ สื่อการเรียนรู้ แบบทดสอบ สาระสำคัญ แบบฝึกหัด ใบงาน/แบบฝึกหัด คำชี้แจง จงใส่เครื่องหมายถูก () หน้าข้อที่ถูกและใส่เครื่องหมายผิด () หน้าข้อที่ผิด ________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/792d165169a836b12b91183ba1dee69a/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/ ข้อมูลอ้างอิง

เรื่อง

เรื่อง

Presentation Transcript