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:

1. The "if" statement

The general form of this instruction is the following:
if (condition) {
  The code will be executed if condition is true
- 'condition' can be any logical expresion.
- If 'ondition' return TRUE, executes the code within curly braces, otherwise, when the condition returns false, it passes over the code.
Here's an example. The following script prints "Hello" if the hour is greater than 11.
- We use the Date object, will be explained in another lesson.
<script type="text/javascript"><!--
// if the hour > 11, prints Hello!
var d = new Date();
var time = d.getHours();
if (time>11) {
- We defined the variable 'd', whose value is an object with the current date, then the variable 'time' takes only the hour from the variable 'd'. The condition of 'if' statement checks if 'time' is greater than 11 and if True executes the command of the braces, which displays the message.
If the hour is less than 11, the script will do nothing.

2. The "if ... else" statement

In the previous example we saw that it displays "Hello!" if "time>11" and if not, nothing happens.
Using the instruction "if ... else" we can set commands to be executed when the condition of "if" instruction" is FALSE.
The general form of the "if ... else" instruction is:
if (condition) {
  The code will be executed if condition is True
else {
  The code will be executed if condition is False
- 'condition' can be any logical expresion.
If 'ondition' 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 again the previous example, this time using the "if ... else" statement.
The script displays "Hello!" if the hour is greater than 11, otherwise display "It's ... o`clock".
<script type="text/javascript"><!--
// if 'time' > 11, prints Hello!
// Otherwise "It's ... o`clock"
var d = new Date()
var time = d.getHours()
if (time>11) {
else {
  document.write("<b>It`s " +time+ " o`clock</b>")
- If 'time' is less than 11 the script will execute the code of second braces group, from "else".

3. switch statement

This instruction is used to compare a value with others from a list.

The syntax of switch instruction is:
switch (expresion) {
case value1:
    code executed if expresion = value1
case value2:
    code executed if expresion = value2
case value3:
    code executed if expresion = value3
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 type="text/javascript"><!--
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.
<script type="text/javascript"><!--
var nume = "Marius";
switch (nume) {
 case "Cristi":
 case "Marius":
 case "Maria":
   document.write("Somebody else");
- Will return Brother.

Daily Test with Code Example

Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="" title=""></a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Conditional statements if, else, switch

Last accessed pages

  1. Flash Games - Free online Games (11166)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (52265)
  3. Get the value of the selected /checked checkboxes in a form (23932)
  4. Zuma Deluxe (27238)
  5. Qwop (20723)

Popular pages this month

  1. Qwop (4729)
  2. Bubbles3 (4343)
  3. Butterfly Kyodai (3092)
  4. Zuma Deluxe (2869)
  5. Backgammon (1464)