บทเรียนที่ 24 แนะนำ For Loops
ภาษาโปรแกรมคอมฯทุกๆภาษา มีวิธีที่จะสร้างทางเลือกได้ (ภาษาอังกฤษเรียก branching แปลว่าการสร้างกิ่งก้านสาขา) อย่างในจาวาสคริป สร้างทางเลือกได้โดยใช้ if และทุกๆภาษาก็มีวิธีทำซ้ำหรือวนชุดคำสั่ง(looping techniques ซึ่ง loop แปลว่า รอบ) ซึ่งในจาวาสคริปก็สามารถทำได้โดยใช้ While loops และ For loops
โดยทั่วไปแล้ว คุณจะใช้ For loops ก็ต่อเมื่อคุณทราบจำนวนครั้งหรือรอบที่ต้องการให้ชุดคำสั่งนั้นทำงาน และใช้ While loops เมื่อคุณไม่แน่ใจว่า จะวนชุดคำสั่งกี่รอบ ในตัวอย่างนี้เป็นตัวอย่างของ For loops
สคริป
<HTML><HEAD></HEAD>
<BODY><center>
<H2>เราจะเริ่มนับตั้งแต่ 1 ถึง 5...</H2>
<SCRIPT language="javascript">
for (i=1; i<=5; i=i+1)
{document.write(i + "<BR>");}
</script>
<p> ...นับเสร็จแล้วครับ
</center></BODY></HTML>
<BODY><center>
<H2>เราจะเริ่มนับตั้งแต่ 1 ถึง 5...</H2>
<SCRIPT language="javascript">
for (i=1; i<=5; i=i+1)
{document.write(i + "<BR>");}
</script>
<p> ...นับเสร็จแล้วครับ
</center></BODY></HTML>
ผลของสคริป
เราจะเริ่มนับตั้งแต่ 1 ถึง 5...
1 2 3 4 5
...นับเสร็จแล้วครับ
มาแยกโครงสร้างของสคริปกันครับ
· อย่างแรกเลย...สคริปนี้ดูสั้นเหลือเกินใช่มั้ยครับ ยังกับว่าคุณมาพักผ่อนในบทเรียนนี้ และนี่คือส่วนแรกของสคริป...
<SCRIPT language="javascript"> for (i=1; i<=5; i=i+1) {document.write(i + "<BR>");} </script>
· for (i=1; i<=5; i=i+1) สามารถแยกออกเป็น 3 ส่วน ซึ่งแต่ละส่วนแยกออกจากกันด้วยเครื่องหมาย ;
· i=1 ไอเท่ากับหนึ่ง เป็นการกำหนดเลขเริ่มต้นของจำนวนรอบที่จะวน ในกรณีนี้เลขเริ่มต้นคือ 1 ซึ่งคุณอาจกำหนดให้เป็น 10 หรือ 100 ได้ ให้คิดว่าเป็นเลขเริ่มต้นของการเริ่มวนชุดคำสั่ง
· i<=5 ไอน้อยกว่าเท่ากับห้า เป็นการกำหนดเงื่อนไขที่จะหยุดการวนชุดคำสั่ง ในกรณีนี้ชุดคำสั่งจะทำงานซ้ำก็ต่อเมื่อค่าไอจะน้อยกว่าเหนือเท่ากับ 5 หากค่าไอสูงกว่านี้ ชุดคำสั่งจะหยุดทำงาน
· i=i+1 ไอเท่ากับไอบวกหนึ่ง เป็นการกำหนดการเพิ่มขึ้นของค่าไอ เพื่อให้การวนชุดคำสั่งทำงานได้ ตอนแรกสุดค่าไอเท่ากับหนึ่งใช่มั้ยครับ พอผ่านการทำงานครั้งแรก(เขียนเลข 1 ในหน้าจอ) ค่าไอจะเพิ่มขึ้น 1 (จากการทำหนด i=i+1) เป็น 2 แล้วพอทำงานซ้ำอีกค่าไอก็จะเพิ่มขึ้นไปเรื่อยๆ เมื่อไอเท่ากับ 6 ชุดคำสั่งจะหยุดทำงาน ตามที่เรากำหนดไว้ในส่วน i<=5 ซึ่งคุณม่จำเป็นต้องกำหนดให้บวกหนึ่งเสมอไปครับ จะบวกสองหรือบวกสามก็ได้(ซึ่งจะทำให้วนได้น้อยครั้งในกรณีนี้)
· คุณไม่จำเป็นต้องกำหนดให้เป็น i อย่างเดียวเท่านั้น คุณสามารถใช้ตัวอักษรหรือชื่ออื่น เหมือนการกำหนดชื่อตัวแปรล่ะครับ คุณจะใช้เป็น a ก็ได้ เป็น odiflj ยังไงก็ได้ครับ (ให้อยู่ในกฎของการกำหนดชื่อตัวแปร) เวลานำไปใช้ก็ให้ใช้ชื่อที่กำหนดนะครับ
· ต่อมาเป็นส่วนของ {document.write(i + "<BR>");} เป็นคำสั่งที่แสดงค่าไอขึ้นบนหน้าจอครับ และทำการเว้นบรรทัดแต่ละค่าด้วยคำสั่ง HTML คือ <BR>
· for จะทำให้ชุดคำสั่งทำงานซ้ำ 5 รอบ ซึ่งจะทำให้เกิดการเขียน 5 ครั้ง ในแต่ละครั้งทำให้ค่าไอเพิ่มขึ้นทีละหนึ่ง จึงเป็นการเขียนเลขหนึ่งถึงห้า เราสามารถที่จะทำให้ การเขียนหนึ่งถึงล้าน ง่ายเหมือนกับการเขียนหนึ่งถึงห้านี่ล่ะครับ แต่มันจะแปลงพื้นที่หน้าจอมากสุดๆ
แบบฝึกหัด
ให้คุณสร้างเอกสาร HTML ที่ด้านบนสุดมีเขียนว่า "ให้คอมนับหนึ่งถึงหมื่นอย่างรวดเร็ว!" ซึ่งคลุมด้วย <H1> ให้อยู่ตรงกลางหน้าด้วยนะครับ โดยใช้พื้นหลังสีขาว แล้วก็เขียนจาวาสคริปที่ทำให้คอมฯนับจาก 1 ถึง 10000(ใช่แล้วครับหนึ่งหมื่น! เวลาเขียนใน for อย่าใช้เครื่องหมายลูกน้ำแบบนี้นะครับ 10,000) แล้วเขียนลงในบนหน้าจอ โดยไม่ต้องเว้นบรรทัด แต่เว้นวรรคในการเขียนแต่ละครั้ง ทันทีที่นับถึงหมื่น พื้นหลังจะเปลี่ยนเป็นสีเหลือง(yellow) และมีกล่องข้อความเตือน(alert) ขึ้นว่า "พื้นหลังเป็นสีเหลืองแล้ว!" แล้วเมื่อผู้ใช้กด OK จะเริ่มนับหนึ่งถึงหมื่นอีกครั้ง แต่นับในใจ(เครื่อง) ไม่ต้องเขียนบนหน้าจอ พอนับเสร็จพื้นหลังจะเปลี่ยนเป็นสีชมพู(pink) โชคดีครับ อ้อ !... ผมเกือบลืมบอกไป... i=i+1 สามารถเขียนได้อีกแบบหนึ่งครับคือ.. i++ ซึ่งให้ความหมายคือ เพิ่มหนึ่งเหมือนกันครับ ใช้ i++ จะพิมพ์สั้นกว่า ง่ายกว่า ข้อแนะนำ : หากคุณใช้คอมรุ่นเก่ามากๆ การนับหนึ่งถึงหมื่น อาจทำให้เครื่องคุณค้าง คุณอาจใช้ห้าพันแทนได้ คำใบ้ : ภายชุดคำสั่ง(ปีกกา) คุณไม่จำเป็นต้องใส่คำสั่งใดๆเพิ่มเข้าไปอีก
เฉลย
<HTML> <HEAD></HEAD> <BODY> <center><H1>ให้คอมนับหนึ่งถึงหมื่นอย่างรวดเร็ว!</H1> <script language="javascript"> for (i=1;i<=10000;i++) {document.write(i+" ")} document.bgColor="yellow" alert("พื้นหลังเป็นสีเหลืองแล้ว!") for (i=1;i<=10000;i++) {} document.bgColor="pink" </SCRIPT> </center></BODY></HTML>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น