Intermediate JavaScript

In our first two Introduction to JavaScript (Part 1) & (Part 2) we introduced many basic concepts, such as variables, if – else statements, loops, and functions.

In this example, we want to expand on those concepts a little. We will look at a new type of variable, called the array, nested if-else statements, breaks, and functions that take parameters and return values based upon what is run.

Arrays

The variables that we’ve looked at so far are sometimes referred to as a singleton. This is because it contains a single value. But what if I have a collection of people, items, etc.

Let’s say for a moment that I have a group of employees, and I wanted to track all of their names. I could do something like:

var name1 = "Bob";
var name2 = "Sue";
var name3 = "Fred";

I could then go on until I had a variable for each person in the company. However, that would be a bit inefficient.

Or, I could use an array. An array is a collection of variables, so we use the same name to reference them collectively, then we use an index to specify which one we are talking about.

For example:

var names = new Array("Bob", "Sue", "Fred" );

Here we’ve created a single variable, and then there are multiple “compartments” to hold each of the values. These compartments are indexed by a number, starting at 0, and going up by one for each next element. Let’s expand our previous example:

var names = new Array("Bob", "Sue", "Fred" );
alert( names[0] ); // display the first element
names[2] = "Sam";  // change the value in an array
alert( names[2] ); // see the change in the array's value
names[] = "George";  // puts a new element into the array, at the end.

Additionally, JavaScript arrays provide other means of adding, removing, and updating their contents.

Arrays work real well with loops, as you will often want to loop through an array, so you can see every element. What is nice, is that JavaScript easily provides for us a get the length of an array. For example:

alert(names); // may not going to give you want you want...
for(var i = 0; i < names.length; i++) {
  alert(names[i]);
}

 

Nested Conditions

Nesting is the process of embedding a block of code, inside another block. Nested conditions is the process of having an if statement, inside of another if statement. This is where more complex logic is needed.

Consider an example where you are checking to see if someone can legally drive. They must be of a certain age, and have a license. If you want to display a message about each possible outcome, you will need to put an if-else statement inside your if block, as is shown below:

var age = 17;
var hasLicense = false;

if( age >= 16 ) {
  if( hasLicense) {
    alert("You are legally allowed to drive.");
  } else {
    alert("You must possess a license to be able to legally drive.");
  }
} else {
  alert("You are too young to drive.");
}

Additionally you may have noticed if( hasLicense). This condition doesn't appear to test anything. That is because the data type is a boolean value. Boolean variables are already only true or false, so you are giving it that value. This means you don't have to test.

Essentially if( hasLicense) is equivalent to if( hasLicense == true ).

Watch On YouTube

Breaks

Breaks are the ability to "break out" of a current block of code, like a loop.

Consider the following - you are looking to see if a value exists in an array, so you choose to step through the array with a loop. Well, once you find your result, you don't need to keep searching - so a break could make your script much faster.

It would look something like this:

var names = new Array("Bob", "Sue", "Fred", "Frank", 
        "Mary", "Gale", "Allison", "Rick", "Joe" );
var found = false;
var searchTerm = "Sue";

for(var i = 0; i < names.length; i++ ) {
  if (names[i] == searchTerm) {
    found = true;
	break;
  }
  document.write(i + "
");
}

if(found) {
  alert ("We found " + searchTerm + ".");
} else {
  alert ("We coudn't find " + searchTerm + " in the list.");
}

Breaks can be used in other cases as well - such as in a switch (a more advanced decision tool), and more. But this gives you a good initial view.

Watch on YouTube

Advanced Functions

Previously we've looked at calling a function that did some simple function. However, we've seen from the built in JavaScript functions, that there is so much more potential. This potential comes from two different areas: parameters, and return values.

Parameters

Parameters are values passed too a function. Like when we pass a value to the alert box to have it display something. Generally, when we define our function, we will determine what parameters it should accept.

The ability to pass one or more parameters, means that our functions can be much more powerful, as we can expand, and change what it is that they do.

Consider a simple function that is to display a name and age in an alert box, on the screen, etc. If we didn't use parameters, we would need to have dozens, maybe hundreds or even thousands of functions. With a parameter, we can simplify, and only need one function, and just get the two values passed into the function, as is shown below:

// define values
var name = "Bob";

function displayNameAge(fname, fage) {
  alert(fname + " is " + fage + " years old.");
}

displayNameAge(name, 21);

Notice that your parameters can be passed either a variables, or as a literal value.

Return Values

Another powerful tool for a function is to allow it to return some value. This has been seen in built in functions like the Math functions. When the function completes, it can return a value to the program. This value can then be stored in a variable, used immediately, or ignored (although this is not usually a smart thing to do).

Returning a value is useful, as it provides a way to abstract a complex scenario, and simplify it down to a single resultant.

Consider the function below which determines the area of two dimensions.

var width = 13;
var length = 24;
var area = area(width, length);

function area( w, l) {
  return w * l;
}

 

Intermediate JavaScript was originally found on Access 2 Learn