JavaScript for Beginners - Basic Concepts Conditionals and Loops (P: VIII)

The If Statement

Very often when you write code, you want to perform different actions based on different conditions. You can do this by using conditional statements in your code.

Use if to specify a block of code that will be executed if a specified condition is true

The statements will be executed only if the specified condition is true.

Example:

Result:

If the condition evaluates to false, the alert statement is skipped and the program continues with the line after the if statement’s closing curly brace.

Note: Note the if is in lowercase letters. Uppercase letters (If or IF) will generates an error

The if else Statement

Use the else statement to specify a block of code that will execute if the condition is false

The example below demonstrates the use if an if... ese statement

The above example says:

- If num1 is greater than num2, alert “This is my first condition”
- Else, alert “This is my second condition”.

The browser will print the second condition, as the 10 is not greater than 20.

The if else if Statement

You can use else if statement to specify a new condition if the first condition is false

The above code says;

-          If course is equal to 1, alert “HTML”
-          Else, if course is equal to 2, alert “CSS”
-          If none of the above condition is true, then alert, “JavaScript”

Course is equal to 1, so we get the following result

Note: The final else statement and should be always written after the if and else if statements

The switch Statement

In cases when you need to test for multiple conditions, writing if else statements for each condition might be not the best solution. The switch statement is used to perform different actions based on different conditions.

Syntax:

The switch expression is evaluated once. The value of the expression is compared with the values of each case. If there is a match, the associate block of code is executed.

Note: you can archive the same result with multiple if… else statements, but the switch statement is more effective in such situations.

Consider the following example.

When JavaScript code reaches a break keyword it breaks out of the switch block. This will stop the execution of more code and case testing inside the block

Note: Usually, a break should be put in each case statement.

The default keyword specifies the code if there is no case to match

Note: The default block can be omitted, if there is no need to handle the case when no match is found

Loops
Loops can execute a block of code a number of time. They are handy in cases in which you want to run the same code repeatedly, adding a different value each time

JavaScript has three types of loops; for, while and do while

The for Loop

The for loop is commonly used when creating a loop

The syntax

Statement 1 is executed before the loop (code block) starts.

Statement 2 defines the condition for running the loop (the code block)

Statement 3 is executed each time after the loop (the code block) has been executed

The example below creates a for loop that prints numbers 1 through 4.

In this example, statement 1 set a variable before the loop starts (var i=1).

Statement 2 defines the condition for the loop to run (I must be less than or equal to 4).

Statement 3 increases a value (i++) each time the code block in the loop has been executed.

Result

Also, you can initiate more than one value in statement 1, using commas (,) to separate them.

Note: if you omit statement 2, you must provide a break inside the loop. Otherwise, the loop will never end.

The while Loop

The while loop repeats through a block of code, as long as a specified condition is true.

Syntax:

Note: The condition can be any conditional statement that returns true or false.

Consider the following example

The loop will continue to run as long as I less than or equal to, 5. Each time the loop runs it will increase by one

Result:

If you forget to increase the variable used in the condition, the loop will never end.

The Do… while Loop

The Do… while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, and then it will repeat the loop as long as the condition is true.

Syntax: