1 / 24

รายวิชาเทคโนโลยีสารสนเทศ 5 (ง 33102) กลุ่มสาระการงานอาชีพและเทคโนโลยี

รู้จัก JavaScript. รายวิชาเทคโนโลยีสารสนเทศ 5 (ง 33102) กลุ่มสาระการงานอาชีพและเทคโนโลยี. สิ่งที่นักเรียนต้องศึกษาจากเอกสารในวันนี้ ประวัติความเป็นมา (หน้า 1) ตารางเปรียบเทียบความแตกต่างระหว่าง JavaScript และ Java (หน้า 1) ทบทวนโครงสร้าง HTML (หน้า2-3)

christine-witt
Download Presentation

รายวิชาเทคโนโลยีสารสนเทศ 5 (ง 33102) กลุ่มสาระการงานอาชีพและเทคโนโลยี

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. รู้จัก JavaScript รายวิชาเทคโนโลยีสารสนเทศ 5 (ง 33102) กลุ่มสาระการงานอาชีพและเทคโนโลยี

  2. สิ่งที่นักเรียนต้องศึกษาจากเอกสารในวันนี้สิ่งที่นักเรียนต้องศึกษาจากเอกสารในวันนี้ ประวัติความเป็นมา (หน้า 1) ตารางเปรียบเทียบความแตกต่างระหว่าง JavaScript และ Java (หน้า 1) ทบทวนโครงสร้าง HTML (หน้า2-3) วิธีการเขียนคำสั่ง JavaScript (หน้า 3-4 ) ตัวแปร (หน้า 5) และการส่งค่าเข้าสู่ฟังก์ชั่น (หน้า 6) หลังจากนั้นทำแบบฝึกหัดหน่วยที่ 1 ข้อที่ 1 และข้อ ที่ 2

  3. JavaScript คือ ? รู้จัก JavaScript • สรุป JavaScript คือ ภาษาประมวลผล จัดเป็นภาษาสคริปต์ที่มีผู้นิยมใช้งานมากที่สุดและสามารถใช้ร่วมกับราวเซอร์ เช่น Internet Explorer Firefox GoogleChorme Netscape และ Opera โดยภาษาประมวลผลสามารถทำการคำนวณ ประกาศตัวแปร ซึ่งแตกต่างจากภาษา HTML ที่เป็นภาษาแสดงผลทำให้ไม่มีความสามารถดังกล่าวจึงต้องมีการเพิ่ม JavaScript ที่เป็นภาษาประมวลผลเข้ามาช่วย

  4. JavaScript กับ Java คือตัวเดียวกันหรือไม่ ? รู้จัก JavaScript • ผู้ใช้จะพบคำว่า Java ซึ่งใกล้เคียงกับคำว่า JavaScript ซึ่งคนส่วนใหญ่มักเข้าใจผิดว่าเป็นภาษาเดียวกันจึงแยกออกเป็นตารางเพื่อเปรียบเทียบให้เข้าใจดังนี้

  5. เริ่มต้นการเขียน JavaScriptลองดูตัวอย่างง่ายๆ ในการเขียนโปรแกรม JavaScript มีวิธีการเขียนทั่วๆ ไปดังนี้ 1 <HTML>2 <HEAD>3 <SCRIPT LANGUAGE = “JAVASCRIPT”>4 <!--5 FUNCTION HELLOWORLD()6 {7 ALERT(“HelloWorld”);8 }9 //-->10 </SCRIPT></HEAD>11 <BODY>12 < A HREF = “JAVASCRIPT:HELLOWORLD()”>HELLO</A>13 </BODY>14 </HTML> 1.การเขียนสามารถเขียนจากซ้ายไปขวาบนลงล่าง เรียงลำดับไปเรื่อยๆหากต้องการจบคำสั่งใดๆ จะต้องตามด้วยเครื่องหมาย เซมิโคล่อน ( ; ) เช่นบรรทัดที่ 7 2.กลุ่มคำสั่ง เมื่อเขียนคำสั่งหลายๆ คำสั่งในโปรแกรมเดียวกันเพื่อให้มองดูเป็นกลุ่มคำสั่งเดียวกันสามารถใช้เครื่องหมายปีกกาเปิดและปิด ( { }) เช่นบรรทัดที่ 6-8 3.ตัวพิมพ์ใหญ่พิมพ์เล็กเป็นเรื่องสำคัญเช่น เมื่อเราตั้งชื่อฟังก์ชั่น(บรรทัดที่ 5)ว่า HELLOWORLD ซึ่งต่างจาก helloworldจะถือว่าเป็นคนละตัวกันทำให้โปรแกรมไม่สามารถทำงานได้

  6. ตำแหน่งการเขียน JavaScriptในโครงสร้างภาษา HTML เราสามารถฝัง JavaScript ไว้ที่ตำแหน่งใดก็ได้ดังนี้ • ตำแหน่งส่วนหัวของเอกสาร HTML ส่วนใหญ่มักจะนิยมแทรกลงไปในส่วนนี้ <HEAD>….</HEAD> เพราะสามารถเรียกใช้ฟังก์ชั่นจากส่วนใดๆ ของเว็บเพจก็ได้ • ตำแหน่งส่วนตัวของเอกสาร HTML สามารถทำได้เช่นกัน <BODY>…</BODY> แต่การเรียกใช้ฟังก์ชั่น จะเรียกใช้ได้เฉพาะส่วนของเว็บเพจที่อยู่ใต้โค๊ตJavaScript เท่านั้น • เป็นค่าในอีเวนต์ (Event) ของแท็กคำสั่ง HTML คือการเขียนคำสั่งเฉพาะจุดคือในแท็กคำสั่ง HTML ที่ระบุเท่านั้น • เก็บไว้ในไฟล์แยกต่างหาก โดยเก็บไว้ในนามสกุล .Js เช่นหากเราสร้างคำสั่งแล้วเก็บไว้ในไฟล์ชื่อ title1.js และเมื่อเราแก้ไขในไฟล์ title1.js ก็จะมีผลทำให้ไฟล์ HTML แก้ไขไปด้วย รู้จัก JavaScript

  7. พื้นฐานการเขียน JavaScript รู้จัก JavaScript • ตัวแปร คือการจองพื้นที่ไว้ใช้เก็บข้อมูล ใช้พักข้อมูลและใช้เรียกดูข้อมูล ผู้ใช้สามารถตั้งชื่อตัวแปรและกำหนดค่าของตัวแปรได้ function HelloWorld(){myname = “joe”alert(“Hello”+myname);} จากตัวอย่าง เราได้ประกาศตัวแปรชื่อ mynameและในตัวแปรเก็บค่าคำว่าว่า “joe” ไว้จากนั้นเรียกคำสั่ง alert เพื่อแสดงข้อความว่า “Hello” ต่อด้วยค่าที่เก็บไว้ในตัวแปร myname เป็นอันจบฟังก์ชั่นนี้

  8. พื้นฐานการเขียน JavaScript รู้จัก JavaScript • การส่งค่าเข้าสู่ฟังก์ชั่น ในบางครั้งผู้ใช้ต้องสร้างข้อมูลบางบางอย่างเพื่อนนำไปใช้ในการประมวลผล เช่น การบวกเลข 2 จำนวนซึ่งก็ต้องมีการส่งค่าเลข 2 จำนวนเพื่อที่จะนำไปบวกเพื่อแสดงผลลัพธ์ function HelloWorld(){myname = prompt (“what is your name ”,”);alert(“Hello”+myname);} จากตัวอย่างเป็นคำสั่ง prompt ที่เป็นคำสั่งแสดงกล่องข้อความเพื่อรองรับข้อมูลจากผู้ใช้มาใส่ลงในตัวแปร จากนั้นเมื่อผู้ใช้ได้พิมพ์ชื่อลงในปุ่มกดแล้ว ตัวแปรจะนำชื่อไปเก็บไว้ แล้วจะแสดงข้อความว่า “Hello” ต่อด้วยค่าที่เก็บไว้ในตัวแปร myname เป็นอันจบฟังก์ชั่นนี้

  9. รายวิชาเทคโนโลยีสารสนเทศ 5 กลุ่มสาระการงานอาชีพและเทคโนโลยี ตัวแปรใน JavaScript

  10. ในการเขียนคำสั่งใน JavaScript บางครั้งเราจำเป็นต้องมีการจดจำข้อมูล เช่น เมื่อต้องการบวกตัวเลข 2 จำนวน (หลายๆหลัก) เราจะทำการทดเลข 2 ตัวนั้นลงบนกระดาษก่อนแล้วจึงนำมาบวกกัน ซึ่งกระดาษทดทำหน้าที่เหมือนเป็นหน่วยความจำชั่วคราว ตัวแปรใน JavaScript ก็มีความหมายในทำนองเดียวกัน คือมีหน้าที่ไว้เก็บข้อมูลชั่วคราวในระหว่างการทำงานของโปรแกรม ตัวแปรใน JavaScript

  11. การตั้งชื่อตัวแปร มีกฎการตั้งชื่อดังนี้ • ตั้งชื่อโดยใช้ตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ หรือเล็ก (A-Z, a-z) ตัวเลข (0-9) และเครื่องหมายขีดล่าง( _) • ห้ามตั้งชื่อนำหน้าด้วยตัวเลข เช่น “007_spy”  • ห้ามมีช่องว่างในชื่อ เช่น “number of fish” หากต้องการเว้นให้ใช้ เครื่องหมายขีดล่าง( _) เช่น number_of _fish • ห้ามตั้งชื่อกับคำสงวน • การตั้งชื่อตัวพิมพ์ใหญ่และพิมพ์เล็กจัดเป็นคนละชื่อกัน เช่น TOTAL คนละตัวกับ total • ชื่อของตัวแปรยาวได้ไม่จำกัดแต่ต้องอยู่ในบรรทัดเดียวกัน ตัวแปรใน JavaScript

  12. คำสงวนใน JavaScript คำสงวน (Reserved word) หมายถึงคำที่ภาษาสงวนไว้เป็นคำที่ใช้ในโปรแกรมและมีหน้าที่เฉพาะอยู่แล้ว จึงห้ามนำมาตั้งเป็นชื่อของตัวแปร เพราะอาจจะทำให้โปรแกรมเกิดความผิดพลาดได้ โดยคำสงวนเหล่านี้ได้แก่ ตัวแปรใน JavaScript

  13. abstract else instanceof super booleanenumint switch break export interface synchronized byte extends let this case false long throw catch final native throws char finally new transient class float null true const for package try continue function private typeof debugger goto protected var default if public void delete implements return volatile do import short while double in static with ตัวแปรใน JavaScript

  14. ชนิดข้อมูลของตัวแปร ตัวแปรสามารถเก็บข้อมูลประเภทต่างๆ ได้ดังนี้ • ข้อมูลตัวเลข (Number) เก็บเลขจำนวนเต็มและจำนวนทศนิยม • ข้อมูลตรรกะ (Boolean) เก็บค่าความจริงและเท็จ (True / False) • ข้อมูลสตริง (String) เก็บค่าข้อความ เช่น Hello\ • ข้อมูลว่าง (Object) เก็บค่าว่างเปล่า ไม่มีข้อมูล ตัวแปรใน JavaScript

  15. การกำหนดค่าให้ตัวแปร โดยเราจะใช้เครื่องหมายเท่ากับ (=) ในการกำหนดค่าเข้าไปเก็บในตัวแปร เช่น Total = 30 หมายถึง ตัวแปรชื่อ Total เก็บค่า 30 ตัวแปรใน JavaScript

  16. การใช้งานอาร์เรย์ (Array) อาร์เรย์คือการนำตัวแปรหลายๆ ตัวที่มีชนิดของข้อมูลเหมือนกันมาจัดรวมอยู่เป็นกลุ่ม โดยตัวแปรแต่ละตัวเราจะเรียกว่า สมาชิก “Member” ในอาร์เรย์การประกาศตัวแปรอาร์เรย์สามารถทำได้ดังนี้ ตัวแปรใน JavaScript ชื่ออาร์เรย์ = new Array(จำนวนสมาชิก) scores= new Array(4)

  17. การอ้างอิงสมาชิกในอาร์เรย์เราจะใช้ เลขอินเด็กซ์(Index) โดยสมาชิกตัวแรกจะเริ่มจากศูนย์ จนถึงสมาชิกทั้งหมดตัวสุดท้าย ดังตัวอย่าง โดยมีวิธีการอ้างอิง 2 แบบคือ แบบทีละสมาชิก และแบบครั้งเดียวทุกสมาชิก ตัวแปรใน JavaScript ชื่ออาร์เรย์[อินเด็กซ์] = ค่า ตัวอย่างscores[0] = 10;

  18. แบบครั้งเดียวทุกสมาชิกแบบครั้งเดียวทุกสมาชิก ตัวแปรใน JavaScript ชื่ออาร์เรย์ = [ ค่าของสมาชิกตัวแรก , ค่าของสมาชิกตัวที่สอง....]; ตัวอย่าง scores = new Array[10,40,120,55];

  19. จากคำสั่งจะเห็นว่ามีอาร์เรย์ที่มีสมาชิกทั้งหมด 4 ตัว เก็บค่า 10 40 120 55 ในสมาชิกแต่ละตัวตามลำดับ เราสามารถนำสมาชิกแค่ละตัวมาใช้งานได้เหมือนตัวแปรดังนี้ ตัวแปรใน JavaScript • total Scores= scores[0]+ scores[2]+ scores[3]; • Document.write(totalScores);

  20. การใช้งานสตริง (string) การใช้งานสตริง สตริงคือ ข้อความเราสามารถอ้างอิงอักขระแต่ละตัวได้ด้วย CharAtเช่น test= “This is a test” document.write(test.CharAt(0)); ผลลัพธ์แสดงอักขระ Tdocument.write(test.CharAt(11)); ผลลัพธ์แสดงอักขระ edocument.write(test.CharAt(8)); ผลลัพธ์แสดงอักขระ a ตัวแปรใน JavaScript

  21. การทำงานสตริงย่อย (Substring) บางครั้งเราต้องการเพียงบางส่วนออกมาใช้งาน ซึ่งก็สามารถทำได้ดังนี้ ตัวแปรใน JavaScript ชื่อตัวแปรสตริง.substring(อินเด็กซ์เริ่ม,อินเด็กซ์จบ);

  22. Alpha = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;alert(Alpha.charAt(0)); แสดงอักขระ Aalert(Alpha.charAt(25)); แสดงอักขระ Zalert(Alpha.charAt(0,4)); แสดงอักขระ ABCDalert(Alpha.charAt(10,12)); แสดงอักขระ KLalert(Alpha.charAt(12,10)); แสดงอักขระ KL ไม่ใช่ LKalert(Alpha.charAt(6,7)); แสดงอักขระ Galert(Alpha.charAt(24,26)); แสดงอักขระ YZalert(Alpha.charAt(0,26)); แสดงอักขระ A ถึง Zalert(Alpha.charAt(7,7)); แสดงข้อความว่าง ตัวแปรใน JavaScript

  23. จากคำสั่งกำหนดตัวแปรสตริงชื่อ Alpha เก็บอักขระค่า A-Z จากนั้นเราใช้ substring ดึงส่วนย่อยออกมา โดยใช้วิธีการอินเด็กซ์ในการอ้างอิงตำแหน่ง ตัวแปรใน JavaScript

  24. การค้นหาสตริงย่อย เราสามารถค้นหาสตริงย่อยในสตริงที่เราต้องการได้ โดยใช้ indexOf ชื่อตัวแปรสตริง. indexOf(“สตริงที่ใช้ค้นหา”); ในการค้นหาตำแหน่ง หากพบจะแสดงค่าอินเด็กซ์ออกมา แต่หากหาไม่พบจะแสดงค่าลบหนึ่ง ดังตัวอย่าง test= “This is a test” ;alert(test.indexOf(“This”)); ผลลัพธ์จะแสดงตำแหน่งที่ 0alert(test.indexOf(“this”)); ผลลัพธ์จะแสดงตำแหน่งที่ -1 ตัวแปรใน JavaScript

More Related