1 / 206

แนะนำ การเขียนภาษาจาวาสคริปต์ ( JavaScript Language)

บทที่ 4. แนะนำ การเขียนภาษาจาวาสคริปต์ ( JavaScript Language). สัญญา เครือหงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยนเรศวร. วัตถุประสงค์การเรียนรู้ประจำบท. เพื่อศึกษาหลักการทำงานของภาษา Script ที่ประมวลผลฝั่ง Client

sarai
Télécharger la présentation

แนะนำ การเขียนภาษาจาวาสคริปต์ ( JavaScript Language)

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. บทที่ 4 แนะนำการเขียนภาษาจาวาสคริปต์(JavaScript Language) สัญญา เครือหงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยนเรศวร

  2. วัตถุประสงค์การเรียนรู้ประจำบทวัตถุประสงค์การเรียนรู้ประจำบท • เพื่อศึกษาหลักการทำงานของภาษา Script ที่ประมวลผลฝั่ง Client • เพื่อให้หลักการเขียนโปรแกรมภาษา Javascript

  3. กิจกรรมการเรียนการสอนกิจกรรมการเรียนการสอน • บรรยายโดยผู้สอนและใช้เอกสารประกอบการสอนของผู้สอน • สอนโดยใช้สื่อคอมพิวเตอร์ผ่านเครื่องฉาย • อภิปรายในชั้นเรียนร่วมกัน • ให้นิสิตค้นคว้าเพิ่มเติมจากตำราและเอกสารที่เกี่ยวข้อง • ทำแบบฝึกหัดท้ายบท

  4. การประเมินผล • ประเมินผลจากการตอบคำถามและอภิปรายในชั้นเรียน • ทำแบบฝึกหัดท้ายบท • ทำรายงานส่ง

  5. JavaScript คืออะไร ภาษาจาวาสคริปต์ถูกพัฒนาโดย เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปจึงได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถติดต่อใช้งานกับภาษาจาวาได้ และได้ปรับปรุง LiveScriptใหม่เมื่อ ปี 2538 แล้วตั้งชื่อใหม่ว่า JavaScript

  6. ลักษณะการทำงานของ JavaScript JavaScript เป็นภาษาสคริปต์เชิงวัตถุ หรือเรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming) เป้าหมายในการออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนเอกสารด้วยภาษา HTML และภาษาจาวาได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server)

  7. โดยมีลักษณะการทำงานดังนี้โดยมีลักษณะการทำงานดังนี้ 1. Navigator JavaScript เป็น Client-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งไคลเอนต์ (หมายถึงฝั่งเครื่อง คอมพิวเตอร์ของผู้ใช้ ไม่ว่าจะเป็นเครื่องพีซี เครื่องแมคอินทอช หรือ อื่น ๆ) จึงมีความเหมาะสมต่อการใช้งานของผู้ใช้ทั่วไปเป็นส่วนใหญ่ 2. LiveWire JavaScript เป็น Server-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งเซิร์ฟเวอร์ (หมายถึงฝั่งเครื่อง คอมพิวเตอร์ของผู้ให้บริการเว็บ โดยอาจจะเป็นเครื่องของซันซิลิคอมกราฟิกส์ หรือ อื่น ๆ) สามารถใช้ได้เฉพาะกับ LiveWireของเน็ตสเคป โดยตรง

  8. Client-Side Script (บทที่1) 3. HTML stream (from .htm page) Returned to browser 2. Web Server locate .html File Web Server 4. Browser Process Client-side script 5. Browser Processes HTML And displays Pages 1. Client Request Webpage Client

  9. JavaScript กับ HTML ภาษา JavaScript สามารถเขียนรวมอยู่ในไฟล์เดียวกันกับ HTML ได้ โดยมีการเขียน 2 วิธี ดังนี้ • เขียนด้วยชุดคำสั่งและฟังก์ชันของ JavaScript เอง • เขียนตามเหตการณ์ที่เกิดขึ้นตามการใช้งานจากชุดคำสั่งของ HTML

  10. JavaScript กับ HTML (ต่อ) เมื่อเริ่มใช้งาน โปรแกรมบราวเซอร์ จะอ่านข้อมูลจากส่วนบนของเพจ HTML และทำงานไปตามลำดับจาก บนลงล่าง (top-down) โดยเริ่มที่ส่วน<HEAD>...</HEAD> ก่อนจากนั้นจึงทำงานในส่วน<BODY>...</BODY> เป็นลำดับ <HTML> <head> <script Language ="JavaScript"> ...................................... </script> </head> <body> <script Language ="JavaScript"> .................................................. </script> </BODY> </HTML>

  11. ตัวแปร ตัวแปร (Variable) หมายถึง ชื่อหรือสัญลักษณ์ที่ตั้งขึ้นสำหรับการเก็บค่าใด ๆ ที่ไม่คงที่ โดยการจองเนื้อที่ในหน่วยความจำของระบบเครื่องที่เก็บข้อมูลซึ่งสามารถอ้างอิงได้ มีขนาดขึ้นอยู่กับชนิดของข้อมูลและค่าของข้อมูล ซึ่งค่าในตัวแปรนี้สามารถเปลี่ยนแปละได้ตามคำสั่งในการประมวลผล

  12. การตั้งชื่อ(Identifier, Name) การตั้งชื่อ (Identifier or Name) เป็นชื่อที่ตั้งขึ้นมาเพื่อกำหนดให้เป็นชื่อของโปรแกรมหลัก, ฟังก์ชัน, ตัวแปร, ค่าคงที่, คำสั่ง และคำสงวน โดยมีหลักการตั้งชื่อว่า • ขึ้นต้นด้วยตัวอักษรในภาษาอังกฤษ ตามด้วยตัวอักษรหรือตัวเลขใด ๆ ก็ได้ • ห้ามเว้นช่องว่าง • ห้ามใช้สัญลักษณ์พิเศษ ยกเว้นขีดล่าง (_) และดอลล่าร์ ($) • สำหรับความยาวของชื่อใน JavaScript จะมีความยาวเท่าใดก็ได้ แต่ที่นิยมใช้ ไม่เกิน 20 ตัวอักษร • การตั้งชื่อมีข้อพึงระวังว่า จะต้องไม่ซ้ำกับคำสงวน (Reserve word) และตัวอักษรของชื่อจะจำแนกแตกต่างกันระหว่างอักษรตัวพิมพ์เล็กกับอักษรตัวพิมพ์ใหญ่ • ควรจะตั้งชื่อโดยให้ชื่อนั้นมีสื่อความหมายให้เข้ากับข้อมูล สามารถอ่านและเข้าใจได้

  13. คำสงวน(Reserve word) คำสงวน (Reserve word) เป็นคำที่มีความหมายเฉพาะตัวในภาษา JavaScript สงวนไม่ให้มีการตั้งชื่อซ้ำกับชื่อโปรแกรม, ฟังก์ชัน, ตัวแปร, ค่าคงที่ และคำสั่ง คำสงวน สามารถเรียกใช้ได้ทันทีโดยไม่ต้องมากำหนดความหมายใหม่แต่อย่างใด

  14. ชนิดข้อมูลของตัวแปร(Data Type) ชนิดของข้อมูลของตัวแปร (Data Type) เป็นการกำหนดประเภทค่าของข้อมูลให้กับตัวแปร เพื่อให้เหมาะสมกับการอ้างอิงข้อมูลจากตัวแปรในการใช้งาน มี4ชนิด ได้แก่ • number ข้อมูลชนิดตัวเลข ประกอบด้วย เลขจำนวนเต็ม (Integer) และเลขจำนวนจริง (Floating) • logical ข้อมูลทางตรรกะ มี 2 สถานะ คือ จริง (True) และเท็จ (False) • string ข้อมูลที่เป็นข้อความ ซึ่งจะต้องกำหนดไว้ในเครื่องหมายคำพูด ("...") • null  ไม่มีค่าข้อมูลใดๆ ซึ่งค่า null ใช้สำหรับการยกเลิกพื้นที่เก็บค่าของตัวแปรออกจากหน่วยความจำ

  15. การประกาศตัวแปร(Declarations) การประกาศตัวแปร (Declarations) เป็นการกำหนดชื่อและชนิดข้อมูลให้กับตัวแปรเพื่อนำไปใช้ในโปรแกรม โดยการตั้งชื่อจะต้องคำนึงถึงค่าของข้อมูลและ ชนิดของข้อมูลที่อ้างอิง นอกจากนี้การตั้งชื่อควรให้สื่อความหมายของข้อมูล และอักษรของชื่อจะจำแนกแตกต่างกันระหว่างอักษรตัวพิมพ์เล็กกับอักษรตัวพิมพ์

  16. การกำหนดค่าให้กับตัวแปรการกำหนดค่าให้กับตัวแปร รูปแบบ ชื่อตัวแปร = ค่าของข้อมูล โดยที่...ค่าของข้อมูล ได้แก่1. ข้อมูลที่เป็นตัวเลข โดยกำหนดตัวเลขไปได้เลย เช่น num = 500 2. ข้อมูลในทางตรรกะ ได้แก่ จริง (True) หรือ เท็จ (False) เช่น test = True; 3. ข้อมูลสตริง ให้กำหนดอยู่ในเครื่องหมายคำพูด ("...") เช่น name = “Sanya";

  17. การกำหนดค่าให้กับตัวแปร (ต่อ) ตัวแปรมี 2จำพวก 1. ตัวแปรแบบโกลบัล (Global) ตัวแปรจำพวกนี้จะมีค่าคงอยู่ในหน่วยความจำตลอดการทำงานของโปรแกรม ทำให้สามารถเรียกใช้ได้จากทุก ๆ ส่วนของโปรแกรม รวมถึงภายในฟังก์ชันต่าง ๆ ด้วย ซึ่งเป็นการกำหนดชื่อตัวแปรไว้ที่โปรแกรมหลักโดยไม่ได้อยู่ภายในขอบเขตฟังก์ชันใด ๆ 2.ตัวแปรแบบโลคัล (Local)เป็นการกำหนดตัวแปรไว้ภายในขอบเขตฟังก์ชันใด ๆ เป็นตัวแปรที่มีค่าคงอยู่ และสามารถเรียกใช้ได้เฉพาะ ภายในขอบเขตของฟังก์ชันนั้น ๆ เท่านั้น

  18. ค่าคงที่(Literal,Constant) ค่าคงที่ (Literal หรือ Constant) หมายถึง ค่าของข้อมูลที่เมื่อกำหนดแล้วจะทำการเปลี่ยนแปลงค่าเป็นอย่างอื่นไม่ได้ ชนิดข้อมูลของค่าคงที่ได้แก่ • เลขจำนวนเต็ม (Integer) เป็นตัวเลขที่ไม่มีเศษทศนิยม สามารถเขียนให้อยู่ในแบบ เลขฐานสิบ (0-9), เลขฐานสิบหก (0-9, A-F) หรือ เลขฐานแปด (0-7) โดยการเขียนเลขฐานแปดให้ นำหน้าด้วย O (Octenary)ส่วนการเขียนเลขฐานสิบหกให้นำหน้าด้วย Ox หรือ OX (Hexadenary)

  19. ค่าคงที่ (ต่อ) • เลขจำนวนจริง (Floating)ใช้รูปแบบการเขียนโดยประกอบไปด้วยตัวเลข จุดทศนิยมและตัวเลขยกกำลัง E (Exponential) เช่น  5.00E2จะหมายถึงค่า 5.00 คูณด้วย 10 ยกกำลัง 2 จะมีค่าเป็น 500 3.141E5จะหมายถึงค่า 3.141 คูณด้วย 10 ยกกำลัง 5 จะมีค่าเป็น314,1000 • ค่าบูลีน (Boolean) เป็นค่าคงที่เชิงตรรกะ คือมีค่าเป็น จริง(True) และ เท็จ(False) เท่านั้น • ข้อความสตริง (String) เป็นค่าคงที่แบบข้อความที่อยู่ภายในเครื่องหมายคำพูด ("..." หรือ '...') เช่น "บริษัท เอ็กซ์ทรีม จำกัด", 'นางนฤมล เวชตระกูล'

  20. รหัสคำสั่งพิเศษ รหัสคำสั่งพิเศษ (Character escape code) เป็นการกำหนดรหัสเพื่อควบคุมงานพิมพ์สตริงโดยใช้เครื่องหมาย \ (Backslash) นำหน้าตัวอักษรที่ต้องการกำหนดเป็นรหัส เพื่อให้กลายเป็นรหัสคำสั่งพิเศษ \bหมายถึง ลบไปทางซ้าย (Back Space) \fหมายถึง เลื่อนกระดาษไปอีก 1 หน้า (Form Feed) \nหมายถึง ขึ้นบรรทัดใหม่ (New Line) \rหมายถึง ตรวจสอบการกด Enter (Return) และการเลื่อนขึ้นบรรทัดใหม่ของหน้าระดาษ \tหมายถึง เลื่อนตำแหน่งไปทางขวา 1 ช่วงแท็บ (Tab) \\ หมายถึง เติมเครื่องหมาย \ (Backslash) \" หมายถึง เติมเครื่องหมายคำพูด

  21. ข้อคำสั่ง (Statement) ข้อคำสั่ง (Statement) คือ ถ้อยแถลงหรือข้อความคำสั่งที่สั่งให้จาวาสคริปต์ ดำเนินงานตามลำดับที่ได้สั่งไว้ การเขียนข้อคำสั่งจะสิ้นสุดหรือจบข้อคำสั่งด้วยเครื่องหมาย เซมิโคล่อน (;) ตัวอย่างการกำหนดข้อคำสั่ง 2 คำสั่ง กำหนดให้ตัวแปร name เก็บชื่อSanyaให้พิมพ์ประโยคข้อความว่า My name is Sanyaจะกำหนดได้ดังนี้ name = “Sanya";document.write("My name is "+name);

  22. นิพจน์ (Expression) นิพจน์ (Expression) เป็นข้อคำสั่งที่ใช้กำหนดค่าของข้อมูล เช่น การบวกตัวเลข การเปรียบเทียบข้อมูล โดยการกำหนดชื่อของตัวแปร ตามด้วยเครื่องหมายที่ต้องการกระทำ (Operations) ต่อข้อมูลเป็นผลให้เกิดค่าข้อมูลใหม่ค่าหนึ่งให้กับตัวแปรเพื่อนำไปใช้งาน นิพจน์ JavaScript มีด้วยกัน 3 ชนิดดังนี้ 1. นิพจน์คณิตศาสตร์ (Arithmetic) เช่น ให้ตัวแปร numเก็บตัวเลข 5000 จะเขียนได้ดังนี้num= 5000; 2. นิพจน์ตรรกะ (Logical) เป็นนิพจน์ในการเปรียบเทียบข้อมูล เช่น กำหนดให้a = 50; 3. นิพจน์ข้อความ (String) เช่น ให้ตัวแปร name เก็บชื่อSanya จะเขียนได้ดังนี้name = “Sanya";

  23. ตัวดำเนินการ(Operator) ตัวดำเนินการ (Operator) หมายถึง เครื่องหมายกำหนดกรรมวิธีทางคณิตศาสตร์, พีชคณิต, บูลีน, การเปรียบเทียบ ระหว่างข้อมูล 2 ตัว ซึ่งเรียกว่า โอประแรนด์(Operand) โดยอาจมีค่าเป็นตัวเลข ข้อความ ค่าคงที่ หรือตัวแปรต่าง ๆ

  24. ชนิดของตัวดำเนินการ ตัวดำเนินการคณิตศาสตร์ ใช้สำหรับคำนวณโอประแรนด์ที่เป็นค่าคงที่หรือตัวแปรก็ได้ โดยให้ค่าผลลัพธ์เป็นตัวเลขค่าเดียว โอประเรเตอร์ เชิงคณิตศาสตร์ที่คนส่วนใหญ่รู้จักคุ้นเคยกันมากที่สุดได้แก่ +หมายถึง เครื่องหมายการบวก-หมายถึง เครื่องหมายการลบ * หมายถึง เครื่องหมายการคูณ/หมายถึง เครื่องหมายการหาร%หมายถึง เครื่องหมายหาเศษที่ได้จากการหารที่เรียกว่า โมดูลัส(Modulus)++หมายถึง เครื่องหมายการเพิ่มค่าที่เรียกว่า อินครีเมนต์(increment) โดยจะเพิ่มค่าครั้งละ 1 --หมายถึง เครื่องหมายการลดค่าที่เรียกว่า ดีครีเมนต์(decrement) โดยจะลดค่าครั้งละ 1  (-) หมายถึง เครื่องหมายแปลงค่าให้กลายเป็นค่าตรงกันข้ามกับค่าเดิมที่เรียกว่า ยูนารีนีเกชัน (unary negation)

  25. ชนิดของตัวดำเนินการ (ต่อ) ตัวดำเนินการเชิงเปรียบเทียบ (Comparison operator) หมายถึง เครื่องหมายในการเปรียบเทียบข้อมูล ผลลัพธ์ที่ได้จะมีค่าตรรกบูลลีนเป็น จริง (True) และ เท็จ (False) ได้แก่            == หมายถึง เครื่องหมายเท่ากับ           != หมายถึง เครื่องหมายไม่เท่ากับ           > หมายถึง เครื่องหมายมากกว่า           >= หมายถึง เครื่องหมายมากกว่าหรือเท่ากับ           < หมายถึง เครื่องหมายน้อยกว่า           <= หมายถึง เครื่องหมายน้อยกว่าหรือเท่ากับ

  26. ชนิดของตัวดำเนินการ (ต่อ) ตัวดำเนินการกำหนดค่า (Assignment operator) หมายถึง เครื่องหมายในการกำหนดให้ตัวแปรที่อยู่ทางฝั่งซ้าย มีค่าเท่ากับค่าเดิมในตัวแปรนั้น "กระทำ" (บวก, ลบ, คูณ, หาร) กับอีกตัวแปรหนึ่งที่อยู่ทางฝั่งขวา ได้แก่ x = y หมายถึง กำหนดค่า y ให้กับตัวแปร xx+= y หมายถึง เพิ่มค่า y ให้กับตัวแปร x (x = x + y) x -= y หมายถึง ลบค่า y ออกจากตัวแปร x (x = x - y) x *= y หมายถึง กำหนดค่า x คูณกับค่า y ให้กับตัวแปร x (x = x * y)x /= y หมายถึง กำหนดค่า x หารกับค่า y ให้กับตัวแปร x (x = x / y) x %= y หมายถึง กำหนดเศษที่ได้จากการหารค่า x ด้วยค่า y ให้กับตัวแปร x (x = x % y)

  27. ชนิดของตัวดำเนินการ (ต่อ) ตัวดำเนินการกำหนดค่า (ต่อ) x <<= y หมายถึง เลื่อนบิตในตัวแปร x ไปทางซ้าย y บิต (x = x << y)x >>= y หมายถึง เลื่อนบิตในตัวแปร x ไปทางขวา y บิต (x = x >> y)x >>>= y หมายถึง เลื่อนบิตแบบซีโรฟิลล์ในตัวแปร x ไปทางขวา y บิต (x = x >>> y)x &= y หมายถึง เก็บค่า x AND y ในตัวแปร x (x = x & y)x ^= y หมายถึง เก็บค่า x XOR y ในตัวแปร x (x = x ^ y)x |= y หมายถึง เก็บค่า x OR y ในตัวแปร x (x = x | y)

  28. ชนิดของตัวดำเนินการ (ต่อ) ตัวดำเนินการเชิงตรรกะ (Logical operator) เป็นเครื่องหมายที่ให้ค่าจริง (True) และ เท็จ (False) ในการเปรียบเทียบ ประกอบด้วยเครื่องหมาย &&หมายถึง และ(AND) จะเป็นจริงเมื่อค่าที่ใช้เปรียบเทียบทั้ง 2 ค่าเป็นจริงทั้งคู่||หมายถึง หรือ(OR) จะเป็นจริงเมื่อค่าที่ใช้เปรียบเทียบทั้ง 2 ค่าเป็นจริงทั้งคู่หรือจริงเพียงค่าใด ค่าหนึ่ง !หมายถึง ปฎิเสธ(NOT) เป็นการแปลงค่าตรงกันข้าม จากจริงจะเป็นเท็จ และ จากเท็จจะเป็นจริ

  29. ชนิดของตัวดำเนินการ (ต่อ) ตัวดำเนินการเชิงข้อความ (String operator) เป็นการเชื่อมประโยคข้อความเข้าด้วยกัน (concatenation) โดยใช้เครื่องหมายบวก (+) เป็นตัวกระทำ เช่น Name = “Alex"; Say = "Hey "+Name;ผลลัพธ์ที่ได้ Say จะมีข้อความเป็น Hey Alex

  30. ชนิดของตัวดำเนินการ (ต่อ) ตัวดำเนินการระดับบิต (Bitwise operator) เป็นการดำเนินการเชิงตรรกะในระดับบิต โดยจะใช้มุมมองในแบบเลขฐาน 2 มาจัดการกับข้อมูล มีรายละเอียดดังนี้   x & y หมายถึง ให้ผลลัพธ์การเทียบบิตแบบ AND ระหว่าง x กับ y x | y หมายถึง ให้ผลลัพธ์การเทียบบิตแบบ OR ระหว่าง x กับ y           x ^ y หมายถึง ให้ผลลัพธ์การเทียบบิตแบบ XOR ระหว่าง x กับ y~x หมายถึง เพิ่มค่าบิตให้ 1 จากนั้นจะให้ผลลัพธ์ของบิตมีค่าตรงข้าม           x << y หมายถึง เลื่อนบิตในตัวแปร x ไปทางซ้าย y บิต           x >> y หมายถึง เลื่อนบิตในตัวแปร x ไปทางขวา y บิต           x >>> y หมายถึง เลื่อนบิตแบบซีโรฟิลล์ในตัวแปร x ไปทางขวา y บิต

  31. ลำดับความสำคัญของตัวดำเนินการลำดับความสำคัญของตัวดำเนินการ ลำดับที่ 1 ( ) ลำดับที่ 2 ++ -- ! ~ลำดับที่ 3 * / % ลำดับที่ 4 + -ลำดับที่ 5 << >> >> ลำดับที่ 6 < <= > >=ลำดับที่ 7 == != ลำดับที่ 8 &ลำดับที่ 9^ ลำดับที่ 10 |ลำดับที่ 11 && ลำดับที่ 12 ||ลำดับที่ 13 = += -= *= /= %= <<= >>= >>>= &= ^= !=

  32. ตัวอย่าง <HTML> <head> <script Language ="JavaScript"> document.write("hello1"); </script> </head> <body> <script Language ="JavaScript"> document.write("hello2"); </script> </BODY> </HTML>

  33. คำสั่งควบคุมการทำงาน • การกำหนดเงื่อนไข ได้แก่ IF, IF ELSE, IF ELSE IF, SWITCH CASE, WITH, EXPRESSION เป็นต้น • คำสั่งควบคุมการทำงานวนซ้ำ ได้แก่ FOR, While, Do While, คำสั่ง break และ continue ของประโยควนซ้ำ

  34. คำสั่งควบคุมการทำงาน IF • คำสั่ง if คือ ใช้ตรวจสอบเงื่อนไข ถ้าหากว่าเงื่อนไขเป็นจริง ก็จะทำตามคำสั่งที่กำหนด • syntax: If(condition){ structure; } <script Language ="JavaScript"> var num = 100; if (num>=100) { alert("The winner"); document.write("more than 100 Baht"); } </script>

  35. คำสั่งควบคุมการทำงาน IF ELSE • คำสั่ง if คือ ใช้ตรวจสอบเงื่อนไข ถ้าหากว่าเงื่อนไขเป็นจริง ก็จะทำตามคำสั่งที่กำหนด ส่วน else จะหมายถึง ถ้าไม่ตรงตามเงื่อนไขใดๆ ให้ทำตามคำสั่งที่กำหนดใน else • syntax: if ( condition ) { structure; }else{ structure; } <script Language ="JavaScript"> var num = 50; if (num>=100) { document.write("more than 100 Baht"); }else{ document.write("less than 100 Baht"); } </script>

  36. คำสั่งควบคุมการทำงาน IF ELSE IF • คำสั่ง if คือ ใช้ตรวจสอบเงื่อนไข ถ้าหากว่าเงื่อนไขเป็นจริง ก็จะทำตามคำสั่งที่กำหนด ส่วน else จะหมายถึง ถ้าไม่ตรงตามเงื่อนไขใดๆ ให้ทำตามคำสั่งที่กำหนดใน else syntax: if(condition){ structure; }else if(condition){ structure; }else{ structure; } <script Language ="JavaScript"> var num = 60; if(num>=100) { document.write("get 100 Baht"); }else if(num>=50) { document.write("get 50 Baht"); }else{ document.write("get 0 Baht"); } </script>

  37. คำสั่งควบคุมการทำงาน SWITCH CASE • คำสั่ง switch case คือ จะตรวจสอบค่าของตัวแปร ถ้าตรงตามเงื่อนไขใดก็จะทำตามคำสั่งนั้นๆ จนกว่าจะเจอ คำสั่ง break • syntax: <script Language ="JavaScript"> var num = 70; switch(num){ case 100 : document.write("get 100 Baht"); break; case 50 : document.write("get 50 Baht"); break; default : document.write("get 0 Baht"); break; } </script> switch(variable) { case value_1 : structure; break; case value_2 : structure; break; default : structure; break; }

  38. คำสั่งควบคุมการทำงาน FOR • คำสั่ง for คือ จะทำงานเมื่อเงื่อนไขเป็นจริง และจะจบการทำงานเมื่อเงื่อนไขเป็นเท็จ โดยแต่ละรอบของการวนลูป จะมีการเพิ่มค่าตามที่กำหนด syntax: For( ค่าเริ่มต้น; เงื่อนไข; การเพิ่มค่า ) { structure; } <script Language ="JavaScript"> for(vari=1; i<20; i++ ) { document.write( i + " get 100 Baht<br>"); } </script>

  39. คำสั่งควบคุมการทำงาน WHILE • คำสั่ง while คือ จะทำงานเมื่อเงื่อนไขเป็นจริง และจะจบการทำงานเมื่อเงื่อนไขเป็นเท็จ • syntax: <script Language ="JavaScript"> var num = 10; while ( num > 0 ) { document.write( num + " get 100 Baht<br>"); num--; } </script> • while(เงื่อนไข) { • structure; • }

  40. คำสั่งควบคุมการทำงาน DO WHILE • คำสั่ง do while คือ จะทำงานก่อน 1 ครั้ง แล้วหลังจากนั้นจะทำงานก็ต่อเมื่อเงื่อนไขยังเป็นจริงอยู่ และจะจบการทำงานเมื่อเงื่อนไขเป็นเท็จ syntax: do{ structure; }while( เงื่อนไข ); <script Language ="JavaScript"> var num = 10; do{ document.write( num + " get 100 Baht<br>"); num--; }while(num>0); </script>

  41. การใช้ Break และ Continue • Break; เพื่อหยุดและออกจากการทำงานวนลูป • Continue; เพื่อหยุดการทำงานวนลูปรอบปัจจุบัน และไปทำงานในรอบต่อไป

  42. คำสั่งควบคุมการทำงานEXPRESSIONคำสั่งควบคุมการทำงานEXPRESSION • คำสั่ง expression คือ ใช้กำหนดคำสั่งแบบมีเงื่อนไข • syntax: variable = condition ? value_when_true : value_when_false ; <script Language ="JavaScript"> var num=100; varstr = (num==100) ? alert("many") : alert( "little") ; </script>

  43. คำสั่งควบคุมการทำงาน WITH • คำสั่ง with ใช้เพื่อที่จะระบุ object เพียงครั้งเดียว แล้วเรียกใช้ property หรือ method ต่างของ object นั้นๆ ได้เลย ( สามารถช่วยลดเวลาการทำงานของโปรแกรมได้ ) • syntax: with(object) { property; method; } <script Language ="JavaScript"> with(Math){ alert(E); alert(PI); } </script>

  44. Object Class • toString() • ใช้แปลงชนิดข้อมูล ของชื่อตัวแปรที่กำหนด ให้เป็น string varnum = 25; alert ( num.toString() ); • toString(base) • ใช้แปลงเลขฐาน จากฐาน 10 ไปเป็นฐาน 2, 8, 16 varnum = 25; alert(num.toString(2)); alert(num.toString(8)); alert(num.toString(16)); • <script Language ="JavaScript"> varnum = 25; alert(num.toString(2)); alert(num.toString(8)); alert(num.toString(16)); • </script>

  45. Object Class (ต่อ) • toString(10) • ใช้แปลงเลขฐาน จากฐาน 2, 8, 16 ไปเป็นฐาน 10 varoctnum = 0702; varhexnum = 0xAF; alert ( octnum.toString(10) ); alert ( hexnum.toString(10) ); หมายเหตุ การกำหนดค่าของเลขฐาน 8 ต้องมี 0 นำหน้า การกำหนดค่าของเลขฐาน 16 ต้องมี 0x นำหน้า

  46. Object Class (ต่อ) • constructor; • ใช้คืนค่า constructor ที่สร้าง object นี้ขึ้นมา ( ชื่อคลาสนั่นเอง ) varstr = new String(“iamsanya"); alert(str.constructor); • prototype;ใช้สร้าง Property หรือ Method ใหม่ให้กับ object varstr = new String ( "iamsanya1" ); str.propotype.getName= function () { return "iamsanya2"; } alert(str.getName() );

  47. Object Class (ต่อ) • valueOf()ใช้คืนค่า ค่าข้อมูล ของ object varstr = new String (“iamsanya" ); alert (str.valueOf() ); • hasOwnProperty( property );ใช้กำหนด Property ให้กับ object varstr = new String ( "BambooLabCode" ); str.hasOwnProperty( "name" ) alert ( str.name ); • isPrototypeOf( parent_object );ใช้กำหนดให้ object สิบทอดมาจาก parent_object varstr = new STring ( "BambooLabcode" ); varname; name.isPrototypeOf ( str );

  48. กำหนด Event, Action • Eventคือเหตุการณ์ต่างๆที่เกิดขึ้น เช่น ผู้ใช้คลิกเมาส์ ผู้ใช้กดปุ่มบนคีย์บอร์ด การพิมพ์ข้อมูลลงในฟอร์ม เป็นต้น • Actionคือการกระทำใดๆเมื่อมีเหตุการณืเกิดขึ้น เช่น เมื่อเกิดเหตุการณ์ที่ผู้ใช้คลิกเมาส์ การกระทำ ( action ) คือจะกำหนดให้ปรากฏ Message Box เป็นต้น • Event Bubble เป็นการตรวจจับ Event จากโค้ดภายในสุด ( tag ในสุด ) แล้วทำงานตามลำดับออกมาข้างนอกสุด ( tag นอกสุด ) เช่น browser IE • Event Propagation เป็นการตรวจจับ Event จากโค้ดภายนอกสุด ( tag นอกสุด ) แล้วทำงานตามลำดับเข้าไปข้างในสุด ( tag ในสุด ) เช่น browser Netscape

  49. Event ใน JavaScript • content:onLoadจะทำงานเมื่อ มีการโหลด window หรือ frame ขึ้นมา • onUnLoadจะทำงานเมื่อ มีการกดปิด web page • onErrorจะทำงานเมื่อ มีความผิดพลาดเกิดขึ้นบน web page • onAbortจะทำงานเมื่อ มีการยกเลิกการทำงาน เช่น การหยุด download • onMoveจะทำงานเมื่อ มีการย้าย window หรือ frame • onResizeจะทำงานเมื่อ มีการปรับขนาดของ window หรือ frame • onScrollจะทำงานเมื่อ มีการเลื่อน scrollbar • onFocusจะทำงานเมื่อ object นั้นๆได้รับ focus • onBlurจะทำงานเมื่อ object นั้นๆสูญเสีย focus • onDblClickจะทำงานเมื่อ มีการ double click ที่ Object นั้นๆ • onClickจะทำงานเมื่อ มีการ click ที่ object นั้นๆ • onSubmitจะทำงานเมื่อ มีการกด submit ใน form • onResetจะทำงานเมื่อ มีการกด reset ใน form

  50. Event ใน JavaScript (ต่อ) • onMouseMoveจะทำงานเมื่อ มีการเลื่อนเมาส์อยู่บน object • onMouseOverจะทำงานเมื่อ มีการเลื่อนเมาส์อยู่บน object นั้นๆครั้งแรก • onMouseOutจะทำงานเมื่อ มีการเลื่อนเมาส์ออกจาก object นั้นๆครั้งแรก • onMouseDownจะทำงานเมื่อ มีการคลิกเมาส์ลงบน object นั้นๆ • onMouseUpจะทำงานเมื่อ มีการปล่อยเมาส์ที่คลิกลงบน object นั้น • onKeyPressจะทำงานเมื่อ มีการกดปุ่มใดๆบน keyboard บน object นั้นๆ • onKeyDownจะทำงานเมื่อ มีการกดปุ่มใดๆบน Keyboard บน object นั้นๆ • onKeyUpจะทำงานเมื่อ มีการปล่อยปุ่มที่กดบน Keyboard บน object นั้น • onSelectจะทำงานเมื่อ มีการลาแถบสีคลุมข้อความในช่องรับข้อมูล • onChangeจะทำงานเมื่อ ข้อมูลในช่องรับข้อมูลมีการเปลี่ยนแปลง

More Related