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.
// if hour > 11, it writes: Hello
let hour = 12;
if(hour >11){

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:
 // 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.

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

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:
 //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'.
//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>');

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.

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:
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');
 document.write('There is a lot until saturday');
- 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).
var nume = 'Marius';
switch (nume) {
 case 'Cristi':
 case 'Marius':
 case 'Maria':
 document.write('Somebody else');

Daily Test with Code Example

Which tag is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert(""); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Conditional statements if, else, switch

Last accessed pages

  1. Simple Admin Login PHP Script (2889)
  2. PHP getElementById and getElementsByTagName (27746)
  3. Add Tag to Selected Text in textarea with JavaScript (1626)
  4. JSON syntax in JavaScript (4197)
  5. Recursive function to create Multi-Level Menu in JavaScript (3255)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2496)
  2. Contact page - CoursesWeb (2392)
  3. Tabs effect with CSS (2391)
  4. Insert, Select and Update NULL value in MySQL (1117)
  5. PHP getElementById and getElementsByTagName (990)