CHAPTER 4 - JAVASCRIPT
4.2 CONDITIONAL STATEMENT AND
LOOPING STATEMENT
Learning Outcome
1. Explain the condition statement.
2. Write program using conditional statement.
3. Identify the structure of loop statement.
4. Solve problem using looping statement.
If … else
❖ Conditional statements are used to perform different actions based on
different conditions.
<p>Click the button to display a time-based greeting:</p>
Output before:
<button it</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
Output after:
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
[Link]("demo").innerHTML = greeting;
}
</script>
NESTED IF
❖ Use the else if statement to specify a new condition if the first
condition is false.
<p>Click the button to get a time-based greeting:</p>
<button it</button> Output before:
<p id="demo"></p>
<script>
function myFunction() {
var greeting;
var time = new Date().getHours(); Output after:
if (time < 5) {
greeting = "Good morning";
} else if (time > 6 && time < 11) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
[Link]("demo").innerHTML = greeting;
}
</script>
<p id="demo"></p>
SWITCH CASE <script>
var day;
❖ The switch statement is switch (new Date().getDay()) {
used to perform different case 0:
actions based on different day = "Sunday";
break;
conditions. case 1:
Output
❖ This is how it works: day = "Monday";
break;
• The switch expression is
case 2:
evaluated once. day = "Tuesday";
• The value of the expression is break;
compared with the values of case 3:
each case. day = "Wednesday";
• If there is a match, the break;
associated block of code is case 4:
day = "Thursday";
executed.
break;
❖ The getDay() method case 5:
returns the weekday as a day = "Friday";
break;
number between 0 and 6. case 6:
• (Sunday=0, Monday=1, day = "Saturday";
Tuesday=2 ..) }
[Link]("demo").innerHTML = "Today is " +
day;
</script>
SWITCH CASE Output
❖ The switch statement is used
to perform different actions
based on different
conditions.
❖ This is how it works: <p id="demo"></p>
• The switch expression is
evaluated once. <script>
var text;
• The value of the expression is
compared with the values of switch (new Date().getDay()) {
each case. case 6:
• If there is a match, the text = "Today is Saturday";
associated block of code is break;
executed. case 0:
text = "Today is Sunday";
❖ The getDay() method returns
break;
the weekday as a number default:
between 0 and 6. text = "Looking forward to the Weekend";
• (Sunday=0, Monday=1, }
Tuesday=2 ..) [Link]("demo").innerHTML = text;
</script>
EXERCISE
❖ If time is less than 10:00, create a "Good morning" greeting, if not,
but time is less than 20:00, create a "Good day" greeting, otherwise
a "Good evening".
❖ 1. Write an if statement with the following condition: 10 is greater than 5
2. If the condition is true, display "I did it!".
<!DOCTYPE html>
❖ Change the value of <html>
<body>
the variable firstName
to make the if <p id="demo"></p>
statement run. <script>
var firstName = "Greg";
if (firstName === "John") {
[Link]("demo").innerHTML = "Hello
John!";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
EXERCISE <body>
<input id="myInput" type="text" value="Apple">
<button Fruit</button>
<p id="demo"></p>
• The switch
<script>
statement is function checkFruit() {
var text;
missing a case for var fruits = [Link]("myInput").value;
"Apple". Add it, switch(fruits) {
case "Banana":
and set text to text = "Banana is good!";
break;
"How you like case "Orange":
text = "I am not a fan of orange.";
them apples?" break;
// add case here
default:
text = "I have never heard of that fruit.";
}
[Link]("demo").innerHTML = text;
}
</script>
</body>
</html>
For loop
• Loops can execute a block of code a number of times.
• Loops are handy, if you want to run the same code over
and over again, each time with a different value.
For loop
• The for loop is often the tool you will use when you want
to create a loop.
• The for loop has the following syntax:
• Example:
For loop
<!DOCTYPE html> Output
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
[Link]("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
While loop <html>
<body>
Output
• The while loop loops <h2>JavaScript while</h2>
through a block of
code as long as a <p id="demo"></p>
specified condition is
true. <script>
var text = "";
• In the following
var i = 0;
example, the code in
while (i < 10) {
the loop will run, over
text += "<br>The number is " + i;
and over again, as
i++;
long as a variable (i)
}
is less than 10:
[Link]("demo").innerH
TML = text;
</script>
</body>
</html>
Output
Do…while loop <!DOCTYPE html>
<html>
<body>
• The loop will always be <h2>JavaScript do ... while</h2>
executed at least once, <p id="demo"></p>
even if the condition is
<script>
false, because the code var text = “”;
block is executed var i = 0;
before the condition is do {
tested: text += "<br>The number is " + i;
i++;
}
while (i < 10);
[Link]("demo").innerHTML =
text;
</script>
</body>
</html>
EXERCISE
❖ Print text “I love Javascript” 5 times by using For loop.
❖ Print text “Javascript is powerful tool” 5 times by using While loop.
❖ Print text “You are advance in Javascript” 5 times by using
Do…While loop
<!DOCTYPE html>
<html>
<body>
❖ The do/while loop
should output 0 1 2 3 <p id="demo"></p>
4. Try to fix it!
<script>
var i = 0;
do {
[Link]("demo").innerHTML += i + "<br>";
i++;
}
while ()
</script>
</body>
</html>
