1 / 30

อ.กันทิมา อ่อนละออ E-mail : kantima@sci.buu.ac.th

การเขียนโปรแกรมด้วย JavaScript ตอนที่3. อ.กันทิมา อ่อนละออ E-mail : kantima@www.sci.buu.ac.th. Loop. Loop เป็นโปรแกรมสั่งให้ทำงานวนซ้ำตามเงื่อนไข JavaScript มี loop 2 แบบ คือ for loop และ while loop ชุดของคำสั่งใน loop จะอยู่ใน { } ซึ่งจะถูกให้ทำงาน

mabyn
Download Presentation

อ.กันทิมา อ่อนละออ E-mail : kantima@sci.buu.ac.th

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 ตอนที่3 อ.กันทิมา อ่อนละออ E-mail : kantima@www.sci.buu.ac.th E-mail:kantima@www.sci.buu.ac.th

  2. Loop • Loop เป็นโปรแกรมสั่งให้ทำงานวนซ้ำตามเงื่อนไข • JavaScript มี loop 2 แบบ คือ for loop และ while loop • ชุดของคำสั่งใน loop จะอยู่ใน { } ซึ่งจะถูกให้ทำงาน หรือไม่ทำงานตามเงื่อนไขที่กำหนด • เมื่อจบการทำงานใน loop ก็จะไปทำตามคำสั่งที่อยู่ ถัดจาก loop ต่อไป E-mail:kantima@www.sci.buu.ac.th

  3. For loop • For loop จะทำงานวนซ้ำทุกคำสั่งใน loop เมื่อเงื่อนไขที่กำหนดหลังคำสั่ง loop เป็นจริง และจะเลิกวนซ้ำเมื่อเงื่อนไขเป็นเท็จ • รูปแบบ for (initial-exp;condition; update-exp) { enclosed-statements; } E-mail:kantima@www.sci.buu.ac.th

  4. การทำงานของ for loop 1. เมื่อเริ่มต้น For loop จะกำหนดค่าให้ตัวแปรตามนิพจน์ initial-exp แล้วไปตรวจสอบเงื่อนไขใน condition 2. ถ้าเงื่อนไขเป็นจริง จะทำตามคำสั่งใน loop แต่ถ้าเงื่อนไขเป็นเท็จ จะโดดไปทำคำสั่งใต้ loop และจะเลิกวนซ้ำ 3. เมื่อจบการทำงานในแต่ละ loop จะวนขึ้นไปทำงานตามนิพจน์ update-exp แล้วตรวจสอบเงื่อนไข condition ใหม่ เหมือนข้อ 2 E-mail:kantima@www.sci.buu.ac.th

  5. ตัวอย่าง for loop (1) • for (j = 1 ; j <= 6 ; j++) { document.write(j, (“ Noon<br>“) ; } document.write(“Finish”) E-mail:kantima@www.sci.buu.ac.th

  6. ตัวอย่าง for loop (2) • x = 4; for (I = 0 ; I <= x ; I++) { y = x + 1 ; document.write(y, “;”) } • ให้ศึกษาโปรแกรมตัวอย่าง เกี่ยวกับการใช้คำสั่ง for loop จาก • JS3-1.html เรื่องแกะข้ามรั้ว E-mail:kantima@www.sci.buu.ac.th

  7. While loop • While loop เป็นการทำงานวนซ้ำแบบเดียวกับ for loop จะตรวจสอบเฉพาะเงื่อนไขที่กำหนดหลังคำสั่ง while ไม่มีการทำกับตัวแปรในเงื่อนไข แต่ปล่อยให้เป็นหน้าที่ของโปรแกรมต้องดำเนินการ • จึงยืดหยุ่นกว่า • รูปแบบ while (condition) { statements } E-mail:kantima@www.sci.buu.ac.th

  8. การตรวจสอบเงื่อนไข 1. เมื่อเริ่มต้นทำงาน จะตรวจสอบเงื่อนไขใน condition ทันที 2. ถ้าเงื่อนไขเป็นจริง จะทำตามคำสั่งใน loop แต่ถ้าเงื่อนไขเป็นเท็จ จะโดดไปทำคำสั่งใต้ loop และจะเลิกวนซ้ำ 3. เมื่อจบการทำงานในแต่ละ loop จะวนขึ้นไปตรวจสอบเงื่อนไขใน condition ใหม่ เหมือนข้อ 2 E-mail:kantima@www.sci.buu.ac.th

  9. ตัวอย่าง while loop (1) • j = 1 while ( j<= 5 ) { document.write(j,” Hello<br>”); j++ } document.write(”Finish”); E-mail:kantima@www.sci.buu.ac.th

  10. ตัวอย่าง while loop (2) • var I = 0; var x = 0; while ( I < 5 ) { I++; x = I*I; document.write(I, “ “,x<br>); } • ให้ศึกษาโปรแกรมตัวอย่าง เกี่ยวกับการใช้คำสั่ง while loop จาก • JS3-2.html เรื่อง มาท่องสูตรคูณกันดีกว่า E-mail:kantima@www.sci.buu.ac.th

  11. คำสั่ง Break • ใช้สั่งให้หยุดการทำงานใน for loop หรือ while loop คือ ออกจาก loop แล้วให้โปรแกรมไปทำงานคำสั่งที่อยู่ถัดจาก loop ต่อไป • จะใช้คำสั่ง if ช่วยตรวจสอบเงื่อนไขการออกจาก loop • รูปแบบ while (codition1){ if (condition2) break } else { statements} } • ให้ศึกษาโปรแกรมตัวอย่างจาก JS3-3.html เรื่อง ค่าแรงเด็ก E-mail:kantima@www.sci.buu.ac.th

  12. คำสั่ง Continue • ใช้หยุดการทำงานใน loop แล้วให้ไปทำที่ต้น loop ด้วย เงื่อนไขตามกำหนด • สำหรับ while loop จะกลับไปที่ condition ที่อยู่ต้น loop • สำหรับ for loop จะส่งกลับไปทำงานที่นิพจน์ update-exp • จะใช้คำสั่ง if ช่วยตรวจสอบเงื่อนไขการออกจาก loop เช่นเดียวกับคำสั่ง break • ให้ศึกษาโปรแกรมตัวอย่าง จาก JS3-4.html เรื่อง หารลงตัว E-mail:kantima@www.sci.buu.ac.th

  13. Array Object • Array object เป็นชุดของตัวแปรที่มี index เป็นตัวกำกับ • เมื่อมีการสร้าง Array object ขึ้นมา ก็จะมี length หรือ size (จำนวนสมาชิก) ของ Array เกิดขึ้น • Size ของ Array จะเท่ากับค่า index สูงสุด บวก 1 • สมาชิกของ Array จะถูกจัดเรียงจาก 0 เป็นต้นไป E-mail:kantima@www.sci.buu.ac.th

  14. การสร้าง new Array • Array จะถูกสร้าง โดยใช้ คำสั่ง new Array() • อาจจะกำหนดค่า size เริ่มแรกให้ Array ได้ เช่น var cards = new Array (52) • จะเกิด Array ชื่อ cards ที่มี 52 elements คือ cards[0], card[1], … , cards[51] • จากคำสั่ง age = new Array (5) จะได้ตัวแปร array 5 ตัว คือ age [0], age [1], age [2], age [3], age [4] E-mail:kantima@www.sci.buu.ac.th

  15. การสร้าง new Array จากข้อมูล • เราสามารถสร้าง new Array โดยการกำหนดข้อมูล เริ่มต้นให้ได้ • ข้อมูลแต่ละตัวจะไปกำหนดสมาชิกให้ new Array พร้อม index • ตัวอย่าง var suits = new Array (“clubs”,”hearts”,”spades”, “diamonds”) • Array ชื่อ suits จะมีสมาชิก 4 ตัว เป็น suits[0], suits[1], suits[2], และ suits[3] พร้อมทั้งค่าที่กำหนดตามลำดับ E-mail:kantima@www.sci.buu.ac.th

  16. การสร้าง new Array โดยไม่กำหนด length • เราอาจจะสร้าง array โดยไม่ต้องกำหนด length ตั้งแต่แรก • เมื่อใดที่กำหนดค่าให้ตัวแปร array ใดขึ้น ก็จะทำให้เกิด array ที่มี index สูงสุดขึ้น • ตัวอย่าง ให้ var name = new Array() และ name[15] = “Fon” • จะเกิด array name ขึ้น 16 element จาก index 0-15 ทันที • ให้ศึกษาโปรแกรมตัวอย่าง จาก JS3-5.html เรื่อง วันนี้วันอะไร E-mail:kantima@www.sci.buu.ac.th

  17. SELECT tag • SELECT เป็น tag ที่ใช้สร้างรูปแบบการป้อนข้อมูล ที่มี OPTIONให้เลือกหลายรายการ • มีลักษณะเป็น drop-down menu • ช่วยประหยัดพื้นที่การแสดงผลบนจอภาพ • ช่วยให้ความสะดวกแก่ user E-mail:kantima@www.sci.buu.ac.th

  18. รูปแบบ SELECT < SELECT NAME = fieldname > < OPTION > item 1 < OPTION > item 2 : < OPTION > item … < /SELECT > E-mail:kantima@www.sci.buu.ac.th

  19. Attribute ของ SELECT • NAME เป็นการกำหนดชื่อฟิลด์ (fieldname) ใช้เก็บข้อมูล • MULTIPLE ช่วยให้มี scroll bar เมื่อมีรายการเลือก มากกว่า 4 บรรทัด (ปกติไม่เกิน 4) • SIZE = n ใช้กำหนดจำนวนบรรทัดรายการเลือก ให้ เท่ากับ n ที่เหลือใช้ scroll bar E-mail:kantima@www.sci.buu.ac.th

  20. OPTION tag • OPTION tag ใช้กำหนดรายการเลือก โดยแสดงข้อความตามต้องการ • attribute SELECTED ใช้กำหนดค่า default ให้ OPTION เพียงหนึ่งรายการ • จะแสดงแถบสีให้แก่ตัวเลือกที่เป็น SELECTED • ให้ศึกษาโปรแกรมตัวอย่าง จาก JS3-6.html เรื่อง มาตามนัด E-mail:kantima@www.sci.buu.ac.th

  21. String Object • String object เป็นตัว Variable ที่มีค่าคงที่ที่เป็น string ในตัวเอง • String methods คือ functions ที่ใช้กระทำต่อ string object ที่จะให้เกิดผลตามมาเพื่อนำไปใช้ได้ • รูปแบบ x = stringObject.method( ) • ผลที่ได้อาจเป็น string หรือ char หรือ number E-mail:kantima@www.sci.buu.ac.th

  22. Property ของ String • length เป็น property ของ string ที่ใช้บอกจำนวนตัวอักขระใน string หรือความยาวของ string • นำ property มาใช้โดยการเขียนต่อจาก string ดังตัวอย่าง • document.write(“Bangsaen”.length) จะได้ผลเป็น 8 • หรือ len = “Nongmon”.length เป็นการส่งค่า 7 ไปไว้ในตัวแปร len E-mail:kantima@www.sci.buu.ac.th

  23. String Functions (1) 1. toUpperCase ( ) 2. toLowerCase ( ) 3. length 4. indexOf (…) 5. lastIndex Of (…) 6. charAt (…) 7. substring (…) E-mail:kantima@www.sci.buu.ac.th

  24. String Functions (2) Methods เกี่ยวกับเปลี่ยนตัวอักษร • toUpperCase() เปลี่ยน string ให้เป็นอักษรตัวใหญ่ ทั้งหมด • toLowerCase() เปลี่ยน string ให้เป็นอักษรตัวเล็ก ทั้งหมด • ตัวอย่าง ให้ a = “Happy New Year” b = a.toUpperCase() ---> b = “HAPPY NEW YEAR” c = a.toLowerCase() ---> c = “happy new year” E-mail:kantima@www.sci.buu.ac.th

  25. String Functions (3) Method indexOf() และ lastIndexOf() ใช้หาตำแหน่งของตัวอักขระใน string • ให้ name = “Preeyanut” • offset = name.indexOf(“P”) ---> 0 offset = name.indexOf(“y”) ---> 4 offset = name.indexOf(“y”,2) ---> 1 • offset = name.lastIndexOf(“e”) ---> 5 • offset = name.indexOf(“x”) ---> -1 E-mail:kantima@www.sci.buu.ac.th

  26. String Functions (4) Method charAt() ใช้บอกตัวอักขระใน string เมื่อกำหนดตำแหน่งให้ • รูปแบบ stringObject.charAt(index) • x = “Panida”.charAt(0) ---> x = P x = “Panida”.charAt(3) ---> x = i x = “Panida”.charAt(7) ---> x = ““ E-mail:kantima@www.sci.buu.ac.th

  27. String Functions (5) Method substring ใช้ส่งออกส่วนหนึ่งของ string ที่กำหนด • รูปแบบ stringObject.substring (strartIndex, lastIndex) เมื่อ startIndex เป็นดัชนีเริ่มต้น และ เป็นดัชนีสุดท้าย • clip = “Kob Suwanan”.substring(4, 2) ---> clip = “Su” • clip = “Kob Suwanan”.substring(1, 5) ---> clip = “ob Su” • clip = “Kob Suwanan”.substring(0, 0) ---> clip = ““ E-mail:kantima@www.sci.buu.ac.th

  28. HTML-Specific Functions 1. anchor(“anchorName”) 7. italics() 2. big() 8. link(URL) 3. blink() 9. small() 4. bold() 10. strike() 5. FontSize(sizeValue) 11. sub() 6. fontColor(colorValue) 12. sup() E-mail:kantima@www.sci.buu.ac.th

  29. ตัวอย่าง HTML-Specific Functions • “Walt Disney”.big() ---> <BIG>Walt Disney</BIG> • “Donald Duck”.bold() ---> <B> Donald Duck </B> • “Donald Duck”.anchor(“hero”) ---> <A NAME = “hero”>Donald Duck</A> • “Micky Mouse”.link(“micky.html”) ---> <A HREF = “micky.html”>Micky Mouse</A> • ให้ศึกษาโปรแกรมตัวอย่าง จาก JS3-7.html เรื่อง ป้ายโฆษณา E-mail:kantima@www.sci.buu.ac.th

  30. คำถาม ? E-mail:kantima@www.sci.buu.ac.th

More Related