คำสั่งแบบมีเงื่อนไขใช้เพื่อดำเนินการต่างๆ ตามเงื่อนไขที่ต่างกัน
บ่อยครั้งมากเมื่อคุณเขียนโค้ด คุณต้องการดำเนินการที่แตกต่างกันเพื่อการตัดสินใจที่แตกต่างกัน
คุณสามารถใช้คำสั่งแบบมีเงื่อนไขในโค้ดของคุณเพื่อทำสิ่งนี้ได้
ใน JavaScript เรามีคำสั่งแบบมีเงื่อนไขดังต่อไปนี้:
ใช้ if เพื่อระบุบล็อกของโค้ดที่จะดำเนินการ หากเงื่อนไขที่ระบุเป็นจริง
ใช้ else เพื่อระบุบล็อกของโค้ดที่จะดำเนินการ หากมีเงื่อนไขเดียวกัน เท็จ
ใช้ else if เพื่อระบุเงื่อนไขใหม่ที่จะทดสอบ หากเงื่อนไขแรกเป็นเท็จ
ใช้ switch เพื่อระบุบล็อกทางเลือกมากมายของโค้ดที่จะดำเนินการ
คำสั่ง switch อธิบายไว้ในบทถัดไป
ifใช้คำสั่ง if เพื่อระบุบล็อกของโค้ด JavaScript จะถูกดำเนินการหากเงื่อนไขเป็นจริง
if (condition) {
// block of code to be executed if the condition is true
}โปรดทราบว่า if เป็นตัวพิมพ์เล็ก ตัวอักษรตัวพิมพ์ใหญ่ (If หรือ IF) จะสร้างข้อผิดพลาด JavaScript
กล่าวทักทาย "วันดี" หากเวลานั้นน้อยกว่านั้น 18:00:
if (hour < 18) {
greeting = "Good day";
}ผลลัพธ์ของการทักทายจะเป็น:
<script>
d=new Date();
var time=d.getHours();
if (time<20)
{
document.write("Good day");
}
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if</h2>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>
elseใช้คำสั่ง else เพื่อระบุบล็อกของโค้ดที่ต้องการ ดำเนินการหากเงื่อนไขเป็น เท็จ.
if (condition) {
// block of code to be executed if the condition is true
}
else {
// block of code to be executed if the condition is false
}ถ้าชั่วโมงน้อยกว่า 18 ให้สร้าง "วันดี" ทักทาย หรือ "สวัสดีตอนเย็น":
if (hour < 18) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}ผลลัพธ์ของการทักทายจะเป็น:
<script>
d=new Date();
var time=d.getHours();
if (time<20)
{
document.write("Good day");
}
else
{
document.write("Good evening");
}
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
else ifใช้คำสั่ง else if เพื่อระบุเงื่อนไขใหม่หากเงื่อนไขแรกเป็นเท็จ
if (condition1) {
// block of code to be executed if condition1 is true
}
else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}หากเวลาน้อยกว่า 10:00 น. ให้สร้างข้อความ "ดี เช้า" ทักทายถ้าไม่ใช่แต่เวลาไม่ถึง 20.00 น. ให้สร้างคำทักทาย "วันดี" หรือจะเป็น "สวัสดีตอนเย็น":
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}ผลลัพธ์ของการทักทายจะเป็น:
<script>
d=new Date();
time=d.getHours();
if (time<10)
{
document.write("Good morning");
}
else if (time<20)
{
document.write("Good day");
}
else
{
document.write("Good evening");
}
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const time = new Date().getHours();
let greeting;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
ลิงค์สุ่ม
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p id="demo"></p>
<script>
let text;
if (Math.random() < 0.5) {
text = "<a href='https://w3schools.com'>Visit W3Schools</a>";
} else {
text = "<a href='https://wwf.org'>Visit WWF</a>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>