Javascript If Else

by JUICE13:563 Comments
การเลือกทำ if...else

คำสั่ง if คือคำสั่งที่ใช้ตรวจสอบว่า เงื่อนไขหนึ่ง ๆ เป็นจริงหรือไม่ หากเป็นจริง
ให้ทำคำสั่งบางอย่าง แต่ถ้าเป็นเท็จก็ไม่ทำ
เอาล่ะทีนี้เรามาดูตัวอย่างกัน

<html>
 <head>
  <title> Step-Juice Javascript If else </title>
 </head>
 <body>
 <script language="JavaScript">
  if(3 > 2) // 3 > มากกว่า 2 จริงป่าว
   alert("true"); // ถ้าเป็นจริง alert คำว่า true ออกมา
 </script>
 </body>
</html>

คำสั่ง else ใช้ร่วมกับคำสั่ง if เมื่อต้องการให้ทำคำสั่งบางอย่างในกรณีที่เงื่อนไข เป็นเท็จ
แบบว่าถ้าเงื่อนไขเป็นจริง ให้ทำคำสั่งหนึ่ง แต่ถ้าเป็นเท็จ ก็ให้ทำอีกคำสั่งหนึ่ง เช่น

<html>
 <head>
  <title> Step-Juice Javascript If else </title>
 </head>
 <body>
 <script language="JavaScript">
  if(3 < 2) // 3 น้อยกว่า 2 ใช่หรือไม่ แน่นอนว่าไม่จริง -*-
   alert("true"); // จริงให้ alert คำว่า ture
  else 
   alert("false"); // เท็จให้ alert คำว่า false 
 </script>
 </body>
</html>

คำสั่ง else if ใช้ร่วมกับ คำสั่ง if ใช้ในกรณีที่เรามีหลาย ๆ เงื่อนไข และแต่ล่ะเงื่อนไข
ต้องการให้ทำคำสั่ง ที่แตกต่างกัน

เอาล่ะต่อไปมาดูตัวอย่างที่ใช้หากินเกี่ยวกับ else if กันเลย ฮ่ะๆๆ นั้นก็คือโปรแกรมคำนวณเกรดนั้นเอง

<html>
 <head>
  <title> step-juice.blogspot.com โปรแกรมคำนวณเกรด  </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
 function calculateGrade()
 {
  var g = document.getElementById("g").value;
  var objDiv = document.getElementById("showGrade");
  if(g >= 80)
   objDiv.innerHTML = "ได้เกรด A";
  else if(g >= 70)
   objDiv.innerHTML = "ได้เกรด B";
  else if(g >= 60)
   objDiv.innerHTML = "ได้เกรด C";
  else if(g >= 50)
   objDiv.innerHTML = "ได้เกรด D";
  else
   objDiv.innerHTML = "ได้เกรด F";
 }
</script>
 </head>
 <body>
  เกรด <input type="text" name="g" id="g"><input type="button" value="คำนวณเกรด" onclick="calculateGrade()">
  <div id="showGrade"></div>
 </body>
</html>

อธิบายโปรแกรม
บรรทัดที่ 6 function calculateGrade() เป็นการสร้างฟังก์ชั่นสำหรับคำนวณเกรด ขึ้นมา
เอาไว้ผมจะเขียนอธิบายเรื่อง function ในบทความหน้าครับ ^^
มาดูต่อกันในบรรทัดที่ 8
var g = document.getElementById("g").value;

บรรทัดนี้เป็นการเข้าไปอ่านค่าใน Element ที่เป็น TextBox และเก็บค่าไว้ในตัวแปร g

มาต่อที่บรรทัดที่ 9
var objDiv = document.getElementById("showGrade");

บรรทัดนี้คือการเข้าถึง Element ที่เป็น Tag Div เพื่อกำหนดค่าให้มันแสดงเกรดออกมา
หากไม่เข้าใจ บรรทัดที่ 8-9 ให้กลับไปดูในบทความที่ชื่อว่า Javascript การแสดงข้อความใน Tag Div ได้ครับ

เอาล่ะต่อไปเรามาดูประเด็นหลักของเราดีกว่า ก็คือเจ้าตัว else if นั้นเอง
ในบรรทัดที่ 10
if(g >= 80)

เช็คว่า g มีค่ามากกว่า หรือ เท่ากับ 80 ใช่หรือไม่ หากใช่จะแสดงข้อความ ได้เกรด A

ต่อไปเรามาดูกันที่บรรทัด 12
else if(g >= 70)

นี่คือเงื่อนไขถัดมา จะทำในกรณีที่เงื่อนไขก่อนหน้าไม่เป็นจริง คือถ้าเงื่อนไขแรกไม่เป็นจริงงั้น g มีค่ามากกว่า
หรือ เท่ากับ 70 ใช่หรือไม่ ถ้าใช่จะแสดงข้อความ ได้เกรด B

มาถึงตรงนี้ทุกคนคงเข้าใจกันหมดแล้ว ^^ ผมคงไม่ต้องอธิบายในเงื่อนไขต่อๆไป :p
งั้นขอข้ามไปที่บรรทัด 24
เกรด <input type="text" name="g" id="g"><input type="button" value="คำนวณเกรด" onclick="calculateGrade()">

เห็นที่ผมไฮไลท์เป็นสีแดงไหมครับ ให้ดูตรงคำว่า onclick="calculateGrade()"
นี่เป็น Event ของ button หรือ ปุ่ม นั้นแหละครับ ใช้เมื่อต้องการให้ทำคำสั่งบางอย่าง
เมื่อมีการคลิกที่ปุ่ม ในที่นี้ผมต้องการให้ทำ function calculateGrade() หรือ function สำหรับ คำนวณเกรด
ที่เราเขียนขึ้นมานั่นเอง

เอาล่ะทีนี้เรามารันโปรแกรมดูกันดีกว่า


จากภาพผมกรอกตัวเลข 79 เข้าไปใน TextBox จากนั้นกดปุ่มคำนวณเกรด
ผลลัพธ์แสดงออกมาด้านล่างเป็นคำว่า ได้เกรด B
ตื่นเต้น!! จริง ๆ เลยครับ เขียนโปรแกรมนี่มันสนุกจริงๆ ฮ่าๆๆ
ลองเปลี่ยนตัวเลขเป็นเลขอื่น แล้วกดปุ่มคำนวณเกรด ดูนะครับ

เอาล่ะสำหรับบทความ Javascript If Else ก็คงจบเพียงเท่านี้
พบกันใหม่บทความหน้าครับ

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