JavaScript Decision

Quite often in life we tend to make decision due the condition we found ourselves, for example I get easily agitated when I see blood or open wound, even the sight or smell of drugs or hospital irritate me, maybe this is one of the reasons why I hardly fell ill or may be because my genotype is AA, since I understood this I there not thinks of making a career in medicine or any of such related field.

Same can be said about programming, as you see in the previous examples, programming allow you to perform or make different decision based on one or more conditions.

You use the If… Else statement to make decision I JavaScript or similar languages, see syntax below:


If… Else

First let’s take a look at the If… statement, this statement is use to execute some code only if a specified condition is true.

Syntax

if (condition)
   {
     code to be executed if condition is true
}


Below is an example that make use of the If… statement.

<script type="text/javascript">
var age = 15;
if (age < 18) {
 
   document.write("<b>Sorry:</b> you are not eligible to register");
}
</script>


The example above could have been more interesting If we ask the user to enter their age via form, but we have hand-coded the age to 15, so that we don’t get things too complicated at this state; but later in this book we will learn how to retrieve or process form.

Our main point in the example above is the if… statement, as you can see the condition check to see if the value in the variable age is less than 18, and in this case the condition is  TRUE and the message contained in document.write() is displayed on the screen, notice if you initialize or change the value of the variable to 20  var age = 20, you will not to see anything on the screen, which is not so logical. Therefore to handle this unexpected or FLASE condition we will need to extent the if statement to If… else

We use the If… else together to execute a code if the condition is TRUE or FALSE

Syntax
if (condition)
 {
     code to be executed if condition is true
 }
else
 {
     code to be executed if condition false
 }


Below is a modified version of our last program, using the If…Else statement.

<script type="text/javascript">
var age = 20;
if (age < 18)
{
   document.write("<b>Sorry:</b> you are not eligible to register");
}else{
   document.write("<b>Welcome:</b> to our program.");
}
</script>


With the Else… statement present in our program now, if you run or test this code, the else block will be executed because the variable age value is 20 which is not less than 18.

Multiple If… else statements or Switch statement
It is a common phenomenon in our higher institution whenever we are learning about the multiple if...else statement or switch statement we often write this simple program to compute our CGPA. Either we are writing a CGPA grade program or a Salary grade program, either multiple if… else or switch statement can be use (both does the same thing, except that the switch is said to be more effective and involve less code, but personally I don’t prefer it, neither do I use it much in my programs, I often settle for the multiple if…else instead.)

Before we start getting dirty with code, let’s relate this statements with a real life experience. You know our life can be very multi-tasking (another computer term that involves doing more than one thing at a time, although we don’t really multi-task but we are often face with challenges) For example you have 10,000 naira, and want to buy a book for that professional exam if the same may guarantee your promotion in the nearest future, or use the money to develop and host that informative website if that your job give’s no room for promotion or use that money to buy that new smart phone because you think you don’t have the time and resources to manage that informative website and the list goes on.

As you can see from the illustration above that everything revolves around making decision based on multiple conditions to arrive at just one result or outcome.

This is what multiple if...else statement or switch statement is use for, to select one of many blocks of code to be executed.


Let’s take a look at multiple if...else statement first.
Syntax

if (condition1)
{
      code to be executed if condition1 is true
}
else if (condition2)
{
      code to be executed if condition2 is true
}
 else if (condition3)
 {
      code to be executed if condition3 is true
}
else
{
      code to be executed if either of the three conditions is true
}

Now we are going to look at a practical application of this statement using a salary grading program but before we do, I will like to introduction us to form handling using JavaScript so that we can take this example (salary grading program) by asking our user to enter the level of the staff before we can do the processing.

Tip on JavaScript debugging
While running most of the JavaScript samples in this book I notice that debugging in JavaScript remains a challenge, personally I think Internet explorer web browser does this better and support JavaScript better than other browsers. By default Internet explorer reports error and makes debugging fairly easy without additional ads-on or tools.


For example I omitted the closing bracket in this line of code document.write("Hello Ben”; instead of document.write("Hello Ben”); on like other browser internet explorer shows an empty screen, but also show an error notice at the status bar. See the screenshot below.

I double click this “Error notification” icon (close to Done) and I get a dialogue box, shown below.

Then I click the “Show detail” button, (if not already clicked) to see the error detail as shown in the screenshot below.



Next »


Adding interaction using JavaScript »

Integrating JavaScript to your webpage »

Showing something on the screen »

Variables and Operators »

Decision »

Form Handling »

Looping »

Function »

Events »

Handling error »

Using Objects »