Javascript For Loop

by JUICE13:380 Comments
คำสั่ง for
เป็นคำสั่งที่ทำให้โปรแกรมทำงานซ้ำ ๆ ตามจำนวนรอบที่กำหนด
โดยจะต้องรู้จำนวนรอบการทำงาน ที่แน่นอน

รูปแบบคำสั่ง

for(ค่าตัวแปรเริ่มต้น; เงื่อนไข; การเปลี่ยนค่าตัวแปร)
{
  //คำสั่ง
}

ตัวอย่าง

<html>
 <head>
  <title> step-juice.blogspot.com:: javascript for loop </title>
 </head>
 <body>
  <script language="JavaScript">
 for(var i = 1; i <= 12; i++)
 {
  document.write(i +" ");
 }
  </script>
 </body>
</html>

ผลลัพธ์ของโปรแกรม
โปรแกรมจะแสดงเลข 1-12 ออกมา

1 2 3 4 5 6 7 8 9 10 11 12

อธิบายโปรแกรม
บรรทัดที่ 7

for(var i = 1; i <= 12; i++)
var i = 1; คือค่าเริ่มต้น

i <= 12;
คือเงื่อนไงในการทำซ้ำ ในที่นี้เงื่อนไขคือ i น้อยกว่าหรือเท่ากับ 12 หรือไม่
ให้กับไปดูที่ค่าเริ่มต้นครับ ค่าเริ่มต้นคือ i = 1 ใช่ไหมครับเพราะฉะนั้น i น้อยกว่าหรือไม่เท่ากับ 12 แน่นอน
โปรแกรมจึงทำซ้ำไปเรื่อยๆ ครับ จนกว่าจะเท่ากับ 12 ^^
แล้ว i มันจะเท่ากับ 12 ได้ยังไง มาดูที่ตรงนี้ครับ

i++ เจ้าตัวนี้นี่เองที่เพิ่มค่า i ไปอีก 1 อย่างที่บอกครับโปรแกรมจะทำซ้ำไปเรื่อย ๆ จนกว่า i จะเท่ากับ 12
เพราะฉะนั้นมันจะกลับมาทำ i++ ไปเรื่อย ๆ ครับ พอมันบวก i มา 12 รอบ มันจะเป็น 1 + 12 =13 ใช่ไหมครับ ^^
เงื่อนไขคือ i <= 12 แต่ตอนนี้ i มันไป 13 แล้วครับ ไม่ตรงเงื่อนไข ออกจากการทำซ้ำทันที ^^ งงไหมฮ่ะๆๆๆๆ

บรรทัดที่ 9

document.write(i +" ");
เป็นการเขียนข้อความลงไปในหน้าเว็บครับ ในที่นี้ผมให้มันเขียนคำว่า i + " " คือ i เป็นตัวเลขบวกช่องว่าง(" ")
ลงไป 12 รอบครับ ผลลัพธ์เลยออกมาเป็น 1 - 12 โดยมีช่องว่างต่อท้ายลงไปเสมอ

ต่อไปเรามาประยุกต์ใช้ for loop กันเล่นๆ ดีกว่าครับ โดยผมจะเขียนโปรแกรมแสดงสูตรคูณออกมา
เอาล่ะมาเริ่มกันเลย

โปรแกรมแสดงแม่สูตรคูณ ตามตัวเลขที่ป้อนเข้าไป

<html>
 <head>
  <title> step-juice.blogspot.com:: โปรแกรมแสดงแม่สูตรคูณ </title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <script language="JavaScript">
 function show()
 {
  var number = document.getElementById("number").value;
  var objDiv = document.getElementById("divShow");
  for(var i = 1; i<=12; i++)
  {  
   objDiv.innerHTML += number + " x " + i + " = " +  parseInt(number) * i + "< br  />"; // tag br ใน blog มันเขียนติดกันไม่ได้ แก้ให้มันติดกันด้วยนะครับ -*-
 }
 }
 </script>
 </head>
 <body>
 สูตรคูณแม่ <input type="text" name="number" id="number"> <input type="button" value="แสดงแม่สูตรคูณ" onclick="show()">
 <div id="divShow"></div>
 </body>
</html>

ผลลัพธ์


ไว้ผมจะมาอธิบายโปรแกรมทีหลังครับ

0 ความคิดเห็น