The most interesting, but difficult, in writing a script is designing it so that it can take decision while is executed.
Using conditional instructions can make programs to test various conditions and then decide how to manipulate the datas.

JavaScript uses the following conditional instructions:

The if() statement

The general form of this instruction is the following:
if (condition){
 //Code to be executed if condition is true
}
- 'condition' can be any logical expresion.
- If 'condition' returns TRUE, executes the code within curly braces, otherwise, when the condition returns false, it passes over the cod.

Here's an example. The following script prints 'Hello' if the hour is greater than 11.
<script>
// if hour > 11, it writes: Hello
let hour = 12;
if(hour >11){
 document.write('<h4>Hello</4>');
}
</script>

The if() else statement

In the previous example we saw that it displays 'Hello!' if 'hour>11' and if not, nothing happens.
Using the instruction if() else we can set commands to be executed when the condition of the if() is FALSE.
- Syntax:
if(condition){
 // code to be executed if condition is True
}
else {
 // code rto be executed if condition is False
}
- 'condition' can be any logical expresion.
If 'condition' return TRUE it is executed the code inside the first braces (that belongs to if()), otherwise, when the condition returns false it is executed the code of the second group of braces (after else).

Here's an example. The following script prints "Good morning" if the hour is greater than 11, otherwise display "It's ... o`clock'.

We use the Date object to get current hour, will be explained in another lesson.

<script>
// if 'time' < 11, prints: Good morning
// Otherwise 'It's ... o`clock'
var d = new Date()
var time = d.getHours()
if(time<11){
 document.write('<h4>Good morning</h4>')
}
else {
 document.write('<h4>It`s ' +time+ ' o`clock</h4>')
}
</script>

The else if() instruction

The else if() instruction is added after if(), and before 'else'.
This instruction is used to check if another condition is True after 'if()', to execute another code when 'if()' is FALSE, but the condition from else if() is TRUE.

- Syntax:
if(condition_1){
 //code to be executed if this condition is True
}
else if(condition_2){
 //code to be executed if condition_1 is False and condition_2 is True
}
else {
 //codul care va fi executat cand ambele: conditie_1 si conditie_2 sunt FALSE
}
- 'condition_1' and 'conditie_2' can be any logical expresion.
First it is checked 'condition_1', if the result is TRUE it will be executed the code from if(). But if it is FALSE, it will be checked the condition from else if() (conditie_2). If 'condition_2', is True, it will be executed the code from else if(), but if 'condition_2' is FALSE, it will be executed the code from 'else'.

- Example, the following code writes "Good morning" if the hour is greater than 5 and less than 11, otherwise, if the hour is between 11 and 19 displays 'Good day', otherwise, it shows: 'It's ... o`clock'.
<script>
//if the hour is between 5 and 11, it writes: Good morning
//if it is between 11 and 19, it writes: Good day
//otherwise: It's ... o`clock
var d = new Date();
let hour = d.getHours();
if(hour >5 && hour <11){
 document.write('<h4>Good morning</h4>');
}
else if(hour >=11 && hour <19){
 document.write('<h4>Good day</h4>');
}
else {
 document.write('<h4>It\'s '+hour+' o`clock</h4>');
}
</script>

After the if() instruction you can add several sets of else if(); and 'else' is optional.


switch() statement

The switch() instruction is used to compare a value with others from a list.

Syntax:
switch(expresion){
case value1:
code executed if expresion = value1 break case value2: code executed if expresion = value2 break case value3: code executed if expresion = value3 break default: code executed if expresion is other then value1, valoare2 or valoare3 }
- First we have a single expression between parentheses (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.

Here is a sample script that displays a message depending on weekdays:
<script>
var d = new Date();
var day = d.getDay();

switch(day) {
 case 5:
 document.write('Today is friday');
 case 6:
 document.write('Today is saturday');
 case 0:
 document.write('Today is sunday');
 default:
 document.write('There is a lot until saturday');
}
</script>
- The variable 'day' takes the number of the week-day from the variable 'd' (Sunday = 0, Monday = 1, ...).
- The switch() statement compares the value of 'day' with the value of each case. If there is a match, the block of code associated with that 'case' is executed.
- If none of the values of 'case' match the variable 'day', will execute the code associated with 'default'.

Here is another example where the 'case', uses string values (it will display the text: Brother).
<script>
var nume = 'Marius';
switch (nume) {
 case 'Cristi':
 document.write('Friend');
 break
 case 'Marius':
 document.write('Brother');
 break
 case 'Maria':
 document.write('Sister');
 break
 default:
 document.write('Somebody else');
}
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
Conditional statements if, else, switch

Last accessed pages

  1. Add and Remove HTML elements and Content with jQuery (26499)
  2. Contact page - CoursesWeb (29287)
  3. Tabs effect with CSS (29949)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (36633)
  5. querySelector and querySelectorAll (12787)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (718)
  2. Contact page - CoursesWeb (701)
  3. Tabs effect with CSS (698)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (228)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (170)