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 used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1"></div></body>';
$dochtml = new DOMDocument();
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    //
Conditional statements if, else, switch

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (16370)
  2. Read Excel file data in PHP - PhpExcelReader (69213)
  3. AJAX with POST and PHP (13049)
  4. PHP MySQL - WHERE and LIKE (20781)
  5. PHP MySQL - INSERT INTO (12050)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2005)
  2. Tabs effect with CSS (1954)
  3. Contact page - CoursesWeb (1951)
  4. Insert, Select and Update NULL value in MySQL (1012)
  5. PHP getElementById and getElementsByTagName (596)