An Introduction to JavaScript – Part II

In the first part of an Introduction to JavaScript, we looked at basic syntax, variables, comments, and displaying information to the user. Now we are going to expand upon that base to look to the next options.

Making Decisions

Almost every program will need to only run certain sections of the code. This means skipping over sections that are unnecessary.

This means that you will need to be able to ask a question to the computer. Computer’s can only handle yes no types of questions. This is often called a Boolean.

If Statement

The if statement is the most common type. It’s basic form is if(<condition>) { /* do something */ }. An example follows.

if ( x < 5 ) {
  alert( " x is too small " );
}

The one or more commands can be run from within the braces. Inside the parentheses, you will need to have a condition that generates a Boolean value. Conditions are normally determined from conditional operators such as >, <, >=, <=. These are fairly standard. However there are two more conditional operators; a double equal sign (==) checks for equality. You would also need a not equals check - the != combination.

The Else Clause

Sometimes you need to perform some an action when the condition was not true. Luckily there is an easy way, the else clause. It follows a basic form of else { /* code */ }. It of course requires an if statement before it, for example:

if( x < 5 ) {
  alert( "x is too small");
} else {
  alert ( "x is big enough" );
}

Repeating Actions

It isn't uncommon for a program to need to repeat a series of commands. Sometimes a given number of times, sometimes until a condition is no longer true.

For Loop

The for loop is designed to run a given number of times, like over a counter. It is made up of several sections - the initialization, the condition, and the modifier. An example would be:

for( var i = 0; i < 10; i++ ) {
  document.write(i + "
");
}

While Loop

The while loop is designed to continue to run while a condition is true. It is much simpler than the for loop, as it only has a single section, the condition. Initialization phase, and modification need to occur separately. Consider the following while loop to mimic the previous for loop:

var i = 0;
while( i < 10 ) {
  document.write(i + "
");
  i++;
}

Better Organizing Through Abstraction

Sometimes you will find that you are writing a long section of code. It may get to a point where you can no longer easily maintain it. At that point, you will want to abstract parts of it.

You may also find yourself needing to repeat yourself, not like in a loop, but at different points. So instead of rewriting sections of your code over and over, you may choose to abstract it.

Abstracting your code means to break your program down into smaller sections, so they can be called independently. In programming, this abstraction is called a function. It generally means you will give it a name, and when you call that name, like you would call a JavaScript command, any commands inside of the function will execute.

We abstract our code through functions so that the code is easier to follow, and easier to maintain. For example - I could have a section of code which calculates the interest on a loan, or I could call a function I wrote. The function would contain the same code, but it would be easier to read as part of the main program.

Likewise, let's say I had a section of code that needed to be repeated in several different spots. I have to update it based upon some new business rule. If I use a function, I update it once, and then every time it is called, the updated version is used. However, if I don't use a function, I may end of forgetting to update the code in one or more places.

Here is an example of some simple functions:

function displayDate() {
  var today = new Date();
  var showDate = (today.getMonth() + 1) + "/" 
      + today.getDay() + "/" + today.getFullYear();
  alert(showDate);
}
function displayHi() {
  alert('Hi');
}

displayHi();
displayDate();
displayHi();

Look in the Intermediate JavaScript to get more advanced info on functions, data types, and more.

Watch on YouTube

An Introduction to JavaScript – Part II was originally found on Access 2 Learn