Conditional statements are used to perform different actions based on different conditions.
1. Conditional statement
Usually when writing code, you always need to perform different actions for different decisions. You can use conditional statements in your code to do this.
In JavaScript, we can use the following conditional statements:
- If statement - use this statement to execute code only if the specified condition is true
- if...else statement - executes code when the condition is true, and other code when the condition is false
- if...else if....else statement - use this statement to select one of multiple code blocks to execute
- switch statement - use this statement to select one of multiple code blocks to execute
2.if statement
The statement executes code only if the specified condition is true.
Syntax (use lowercase IF. Using capital letters (IF) will generate JavaScript errors! )
if (condition)
{
//Code executed when the condition is true
}
Example:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>If the time is earlier than 20:00，Will get greetings "Good day". </p> 10 <button onclick="myFunction()">click here</button> 11 <p id="demo"></p> 12 <script> 13 function myFunction(){ 14 var x=""; 15 var time=new Date().getHours(); 16 if (time<20){ 17 x="Good day"; 18 } 19 document.getElementById("demo").innerHTML=x; 20 } 21 </script> 22 23 </body> 24 </html>
Result:
2.if...else statement
Use the if....else statement to execute code when the condition is true and other code when the condition is false.
grammar
if (condition)
{
//Code executed when the condition is true
}
else
{
//Code executed when the condition is not true
}
Example:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>Click this button to get a time-based greeting.</p> 10 <button onclick="myFunction()">click here</button> 11 <p id="demo"></p> 12 <script> 13 function myFunction(){ 14 var x=""; 15 var time=new Date().getHours(); 16 if (time<20){ 17 x="Good day"; 18 } 19 else{ 20 x="Good evening"; 21 } 22 document.getElementById("demo").innerHTML=x; 23 } 24 </script> 25 26 </body> 27 </html>
3.if...else if...else statement
Use the if....else if...else statement to select one of multiple code blocks to execute.
grammar
if (condition1)
{
//Code executed when condition 1 is true
}
else if (condition2)
{
//Code executed when condition 2 is true
}
else
{
//Code executed when neither condition 1 nor condition 2 is true
}
Example:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Yubaba</title> 5 </head> 6 <body> 7 8 <script type="text/javascript"> 9 var d = new Date(); 10 var time = d.getHours(); 11 if (time<10) 12 { 13 document.write("<b>Good morning</b>"); 14 } 15 else if (time>=10 && time<16) 16 { 17 document.write("<b>Today is good.</b>"); 18 } 19 else 20 { 21 document.write("<b>Good evening!</b>"); 22 } 23 </script> 24 <p> 25 This example demonstrates if..else if...else Sentence. 26 </p> 27 28 </body> 29 </html>
Result:
