Jumping into jQuery and JavaScript Syntax

This chapter is from the book

jQuery and JavaScript in 24 Hours, Sams Teach Yourself

Learn More Buy

This chapter is from the book

This chapter is from the book 

jQuery and JavaScript in 24 Hours, Sams Teach Yourself

Learn More Buy

Understanding JavaScript Syntax, continued

Implementing Looping

Looping is a means to execute the same segment of code multiple times. This is extremely useful when you need to perform the same tasks on a set of DOM objects, or if you are dynamically creating a list of items.

JavaScript provides functionality to perform for and while loops. The following sections describe how to implement loops in your JavaScript.

while Loops

The most basic type of looping in JavaScript is the while loop. A while loop tests an expression and continues to execute the code contained in its {} brackets until the expression evaluates to false.

For example, the following while loop executes until the value of i is equal to 5:

var i = 1;
while (i<5){
  document.write("Iteration " + i + "<br>");
  i++;
}

The resulting output to the browser is as follows:

Iteration 1
Iteration 2
Iteration 3
Iteration 4

do/while Loops

Another type of while loop is the do/while loop. This is useful if you always want to execute the code in the loop at least once and the expression cannot be tested until the code has executed at least once.

For example, the following do/while loop executes until the value of day is equal to Wednesday:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
var i=0;
do{
  var day=days[i++];
  document.write("It's " + day + "<br>");
} while (day != "Wednesday");

The resulting output to the browser is

It's Monday
It's Tuesday
It's Wednesday

for Loops

The JavaScript for loop allows you to execute code a specific number of times by using a for statement that combines three statements into one using the following syntax:

for (statement 1; statement 2; statement 3;){
  code to be executed;
}

The for statement uses those three statements as follows when executing the loop:

• statement 1—Executed before the loop begins and not again. This is used to initialize variables that will be used in the loop as conditionals.
• statement 2—Expression that is evaluated before each iteration of the loop. If the expression evaluates to true, the loop is executed; otherwise, the for loop execution ends.
• statement 3—Executed each iteration after the code in the loop has executed. This is typically used to increment a counter that is used in statement 2.

To illustrate a for loop, check out the following example. The example not only illustrates a basic for loop, it also illustrates the capability to nest one loop inside another:

for (var x=1; x<=3; x++){
  for (var y=1; y<=3; y++){
    document.write(x + " X " + y + " = " + (x*y) + "<br>");
  }
}

The resulting output to the web browser is as follows:

1 X 1 = 1
1 X 2 = 2
1 X 3 = 3
2 X 1 = 2
2 X 2 = 4
2 X 3 = 6
3 X 1 = 3
3 X 2 = 6
3 X 3 = 9

for/in Loops

Another type of for loop is the for/in loop. The for/in loop executes on any data type that can be iterated on. For the most part, you will use the for/in loop on arrays and objects. The following example illustrates the syntax and behavior of the for/in loop in a simple array:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
for (var idx in days){
  document.write("It's " + days[idx] + "<br>");
}

Notice that the variable idx is adjusted each iteration through the loop from the beginning array index to the last. The resulting output is

It's Monday
It's Tuesday
It's Wednesday
It's Thursday
It's Friday

Interrupting Loops

When working with loops, at times you need to interrupt the execution of code inside the code itself without waiting for the next iteration. There are two ways to do this using the break and continue keywords.

The break keyword stops execution of the for or while loop completely. The continue keyword, on the other hand, stops execution of the code inside the loop and continues on with the next iteration. Consider the following examples:

Using a break if the day is Wednesday:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
for (var idx in days){
  if (days[idx] == "Wednesday")
    break;
  document.write("It's " + days[idx] + "<br>");
}

When the value is Wednesday, loop execution stops completely:

It's Monday
It's Tuesday

Using a continue if the day is Wednesday:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
for (var idx in days){
  if (days[idx] == "Wednesday")
    continue;
  document.write("It's " + days[idx] + "<br>");
}

Notice that the write is not executed for Wednesday because of the continue; however, the loop execution did complete:

It's Monday
It's Tuesday
It's Thursday
It's Friday

Creating Functions

One of the most important parts of JavaScript is making code that is reusable by other code. To do this, you combine your code into functions that perform specific tasks. A function is a series of code statements combined in a single block and given a name. The code in the block can then be executed by referencing that name.

Defining Functions

Functions are defined using the keyword function followed by a function name that describes the use of the function, list of zero or more arguments in () parentheses, and a block of one or more code statements in {} brackets. For example, the following is a function definition that writes “Hello World” to the browser.

function myFunction(){
  document.write("Hello World");
}

To execute the code in myFunction(), all you need to do is add the following line to the main JavaScript or inside another function:

myFunction();

Passing Variables to Functions

Frequently, you will need to pass specific values to functions that they will use when executing their code. Values are passed in comma-delimited form to the function. The function definition will need a list of variable names in the () parentheses that match the number being passed in. For example, the following function accepts two arguments, a name and city, and uses them to build the output string:

function greeting(name, city){
  document.write("Hello " + name);
  document.write(". How is the weather in " + city);
}

To call the greeting() function, we need to pass in a name value and a city value. The value can be a direct value or a previously defined variable. To illustrate this, the following code will execute the greeting() function with a name variable and a direct string for the city:

var name = "Brad";
greeting(name, "Florence");

Returning Values from Functions

Often, functions will need to return a value to the calling code. Adding a return keyword followed by a variable or value will return that value from the function. For example, the following code calls a function to format a string, assigns the value returned from the function to a variable, and then writes the value to the browser:

function formatGreeting(name, city){
  var retStr = "";
  retStr += "Hello <b>" + name + "</b><br>";
  retStr += "Welcome to " + city + "!";
 return retStr;
}
var greeting = formatGreeting("Brad", "Rome");
document.write(greeting);

You can include more than one return statement in the function. When the function encounters a return statement, code execution of the function is stopped immediately. If the return statement contains a value to return, that value is returned. The following example shows a function that tests the input and returns immediately if it is zero:

function myFunc(value){
  if (value == 0)
    return;
  code_to_execute_if_value_nonzero;
}

01 <!DOCTYPE html>
02 <html>
03   <head>
04     <title>Hour 5-4</title>
05     <meta charset="utf-8" />
06     <script>
07       var moonData = {"Earth":["Luna"],
08                        "Jupiter":["Io", "Europa"],
09                        "Saturn":["Titan", "Rhea"],
10                        "Mars":["Phobos"]};
11       function writeIt(){
12         for (planet in moonData){
13           var moons = moonData[planet];
14           for (moonIdx in moons){
15             var moon = moons[moonIdx];
16             var listItem = makeListItem(planet, moon);
17             document.write(listItem);
18           }
19         }
20       }
21       function makeListItem(name, value){
22         var itemStr = "<li>" + name + ":&nbsp;" + value + "</li>";
23         return itemStr;
24       }
25     </script>
26   </head>
27   <body onload="writeIt()">
28   </body>
29 </html>

Understanding Variable Scope

After you start adding conditions, functions, and loops to your JavaScript applications, you need to understand variable scoping. Variable scope is simply this: “what is the value of a specific variable name at the current line of code being executed."

JavaScript enables you to define both a global and a local version of the variable. The global version is defined in the main JavaScript, and local versions are defined inside functions. When you define a local version in a function, a new variable is created in memory. Within that function, you will be referencing the local version. Outside that function, you will be referencing the global version.

To understand variable scoping a bit better, consider the following code:

01 <script>
02   var myVar = 1;
03   function writeIt(){
04     var myVar = 2;
05     document.write(myVar);
06     writeMore();
07   }
08   function writeMore(){
09     document.write(myVar);
10   }
11 </script>

The global variable myVar is defined on line 2. Then on line 4, a local version is defined within the writeIt() function. So, line 5 will write 2 to the document. Then in line 6, writeIt() is called. Because there is no local version of myVar defined in writeIt(), the value of the global myVar is written in line 9.

Adding Error Handling

An important part of JavaScript coding is adding error handling for instances where there may be problems. By default, if a code exception occurs because of a problem in your JavaScript, the script fails and does not finish loading. This is not usually the desired behavior.

Try/Catch Blocks

To prevent your code from totally bombing out, use try/catch blocks that can handle problems inside your code. If JavaScript encounters an error when executing code in a try/catch block, it will jump down and execute the catch portion instead of stopping the entire script. If no error occurs, all of the try will be executed and none of the catch.

For example, the following try/catch block will execute any code that replaces your_code_here. If an error occurs executing that code, the error message followed by the string ": happened when loading the script" will be written to the document:

try {
    your_code_here
} catch (err) {
  document.write(err.message + ": happened when loading the script");
}

Throw Your Own Errors

You can also throw your own errors using a throw statement. The following code illustrates how to add throws to a function to throw an error, even if a script error does not occur:

01 <script>
02   function sqrRoot(x) {
03     try {
04       if(x=="")    throw "Can't Square Root Nothing";
05       if(isNaN(x)) throw "Can't Square Root Strings";
06       if(x<0)      throw "Sorry No Imagination";
07       return "sqrt("+x+") = " + Math.sqrt(x);
08     } catch(err){
09       return err;
10     }
11   }
12   function writeIt(){
13     document.write(sqrRoot("four") + "<br>");
14     document.write(sqrRoot("") + "<br>");
15     document.write(sqrRoot("4") + "<br>");
16     document.write(sqrRoot("-4") + "<br>");
17   }
18 </script>

The function sqrRoot() accepts a single argument x. It then tests x to verify that it is a positive number and returns a string with the square root of x. If x is not a positive number, the appropriate error is thrown and returned to writeIt().

Using finally

Another valuable tool in exception handling is the finally keyword. A finally keyword can be added to the end of a try/catch block. After the try/catch blocks are executed, the finally block is always executed. It doesn’t matter if an error occurs and is caught or if the try block is fully executed.

Following is an example of using a finally block inside a web page:

function testTryCatch(value){
  try {
    if (value < 0){
      throw "too small";
    } else if (value > 10){
      throw "too big";
    }
    your_code_here
  } catch (err) {
    document.write("The number was " + err.message");
  } finally {
    document.write("This is always written.");
  }
}