การใช้ if, if else, if else if ใน Javascript

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

การใช้ if, if else และ if else if ในภาษา Javascript โดยทั่วไป เป็นการใช้เพื่อให้โปรแกรมตัดสินใจ ซึ่ง Syntax ในการเขียน ตามด้านล่างเลยครับ

Syntax if ใน Javascript
if(condition){ 
	statement 1;
	statement 2;
	...
}

condition คือเงื่อนไงที่ต้องการ statement ก็คือคำสั่งในโปรแกรม อาจประกอบด้วยหลายคำสั่ง ถ้าหากมีคำสั่งมากกว่าหนึ่งให้ใส่วงเล็บปีกกา{} ครอบคำสั่งทั้งหมดไว้ แต่ถ้ามีเพียงคำสั่งเดียวไม่ต้องใส่วงเล็บปีกกาก็ได้ ถ้าหากไม่มีคำสั่งใด ๆ ให้ใส่วงเล็บเปล่า หรือใส่เครื่องหมาย ; ไว้ก็ได้

ตัวอย่างการใช้ if ใน Javascript

ใส่คะแนน : <input id="score" type="text" name="score" />
<input type="button" value="ดูเกรด" onclick="useif()" />
<span id="show"></span>

ใส่คะแนน : 



โปรแกรมนี้รับค่าคะแนนมาจากการ id ที่มีชื่อว่า score นั่นคือจากใน text นั่นเอง จากนั้นเราใช้ if เพื่อตรวจสอบไปแต่ละเกรด จะเห็นว่าเราใช้แต่ if ตามหลัง if มีแค่คำสั่งเดียว ไม่ต้องใส่วงเล็บปีกกาครอบก็ได้ โปรแกรมนี้จะตรวจสอบทุก if นั่นคือตรวจสอบว่าน้อยกว่า 50 ต่อไป ก็ มากกว่า 50 และ น้อยกว่า 60 หรือไม่ และตรวจสอบไปเรื่อย ๆ ทุก ๆ เกรดถ้าคะแนน น้อยกว่า 50 แล้วปริ้น F ออกมา แต่ก็ต้องตรวจสอบว่าเป็นเกรด D C B หรือ A หรือไม่ แล้วก็ต้องตรวจสอบ isNaN นั่นคือเป็นตัวเลขหรือไม่ และก็ตรวจสอบว่าได้กรอกข้อมูลเข้ามาหรือไม่

Syntax if else ใน Javascript
if(condition){ 
	statement 1;
	statement 2;
	...
}
else{
	statement 1;
	statement 2;
	...
}

โปรแกรมจะเข้าสู่การทำงานในบล็อก else ได้ ก็ต่อเมื่อ การทำงานใน if เป็นเท็จ

ตัวอย่างการใช้ if else ใน Javascript

ใส่คะแนน : <input id="score2" type="text" name="score" />
<input type="button" value="ดูเกรด" onclick="useifelse()" />
<span id="show2"></span>

ใส่คะแนน : 



โปรแกรมนี้เราใช้ if else ตอนแรกก็ตรวจสอบว่าน้อยกว่า 50 หรือไม่ ถ้าใช่ ก็ปริ้น F ออกมา แต่ถ้าไม่ใช่ก็ไปทำที่ else ใน else ก็ไปตรวจสอบ if ใน else อีกที หรือที่เรียกกันว่า if ซ้อน if นั่นเอง จาก if ซ้อน if เราก็สามารถลดรูปกลายเป็นโปรแกรมที่สามนั่นคือ if else if

Syntax if else if ใน Javascript
if(condition1){ 
	statement 1;
	statement 2;
	...
}
else if(condition2){ 
	statement 1;
	statement 2;
	...
}
else{
	statement 1;
	statement 2;
	...
}

การใช้ if else if จะทำการตรวจสอบ condition แต่ละอัน ถ้าอันไหนเป็นจริง ก็จะทำงานในบล็อกนั้น
ตัวอย่างการใช้ if else if ใน Javascript

ใส่คะแนน : <input id="score3" type="text" name="score" />
<input type="button" value="ดูเกรด" onclick="useifelseif()" />
<span id="show3"></span>

ใส่คะแนน : 



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