How to Register a Domain Name for Your HTML5 and CSS3 Site
How to Create a New JavaScript File in Komodo Edit
10 Stellar Web Resources for HTML5 and CSS3

How to Use JavaScript’s continue Statement

The continue statement in JavaScript stops processing for the current loop cycle. However, in HTML programming, processing continues with the next loop cycle. Although you would generally use a break statement to stop loop processing in the event of a non-recoverable error, the continue statement lets you create a loop that can recover from errors. In this respect, loops can differentiate between hard errors and soft errors.

The continue statement is also quite useful for a number of programming techniques, such as filtering. When the loop encounters a situation where an argument, a data item, or an array element is outside the filtering criteria, it can exclude that element by not processing it but continuing on with the next argument, data item, or array element.

Filtering is an exceptionally important task for applications to perform because users rarely provide clean data — that is, data without erroneous artifacts included.

How to work with Array objects in depth

Array objects often require complex handling of data to produce the desired results. For example, the array could contain different data types, and you might need to sort through them to find only the data you need. Fortunately, the Array object provides a number of methods and properties to make interacting with them in loops easier. The following list describes the Array object properties:

  • constructor: Displays a string showing the prototype used to define the object. In this case, you see “function Array() { [native code] }”.

  • length: Returns the length of the array in elements.

  • prototype: Provides the means for adding both properties and methods to an object.

The Array object also provides a number of useful methods. You can use these methods to modify the array dynamically during processing and to enhance the ability of the for loop to produce useful results. The following list describes each of the Array object methods:

  • concat(): Creates a single array by joining two or more arrays.

  • indexOf(): Locates a specific element within an array and returns the position of that element.

  • join(): Creates a single string from all of the elements within an array.

  • lastIndexOf(): Locates the last location of a specific element within an array and returns the position of that element.

  • pop(): Removes the last element of an array and returns that element.

  • push(): Adds new elements to the end of an array and returns the new array length.

  • reverse(): Reverses the order of the elements in an array.

  • shift(): Removes the first element of an array and returns that element.

  • slice(): Produces a copy of part of an array and returns that part.

  • sort(): Sorts the elements of an array.

  • splice(): Adds or removes elements to or from an array as specified in the arguments.

  • toString(): Outputs the individual values of each element of an array as a string.

  • unshift(): Adds new elements to the beginning of an array and returns the new length.

  • valueOf(): Outputs the native value of each of the elements of an array.

How to interact with an array

One of the more interesting ways to use the continue statement is as a means for filtering data. When the incoming data doesn’t meet some requirement, you filter it out. The following example demonstrates a technique for filtering array data to produce a clean array that you can then process without error.

The main reason to perform this task is that you need to use the array repetitively and filtering it each time would prove time consuming, needlessly slowing application performance.

function FilterArray()
{
  // Define the original array.
  var OriginalData = new Array(
   "Red", "Orange", "Yellow", 1,
   "Green", true, "Blue");
 
  // Define an array to receive the filtered data.
  var FilteredData = new Array();
  // Show the original data.
  DisplayArray(OriginalData, "Original");
 
  // Filter the data.
  for (var i = 0; i < OriginalData.length; i++)
  {
   // Check for the correct data type.
   if (typeof(OriginalData[i]) != 'string')
   {
     // Go to the next item.
     continue;
   }
  
   // Add the matching item to the array.
   FilteredData.push(OriginalData[i]);
  }
 
  // Show the filtered data.
  DisplayArray(FilteredData, "Filtered");
}

The example begins by creating an array, OriginalData, with some errant data in it. The array is supposed to contain strings, but you can see that it includes both numeric and Boolean data items. The example also creates FilteredData, which currently contains nothing but will eventually contain all the useful data from OriginalData.

Filtering occurs in the for loop. If the current array element isn’t of type string, then the code continues to the next loop iteration. However, when the element is of type string, the code uses the push() method to add the current array element to FilteredData.

Notice the calls to DisplayArray(). This is an example of taking code out of a function and placing it in a supplementary function to make the code easier to understand. In addition, it ensures that each function performs a single task. In this case, DisplayArray() outputs the array data to a specific location onscreen as shown here:

function DisplayArray(TheArray, DisplayID)
{
  // Create an output string.
  var DisplayString = "<ul>"
 
  // Build the display string.
  for (var i = 0; i < TheArray.length; i++)
  {
   DisplayString += "<li>" + TheArray[i] + "</li>";
  }
 
  // Complete the list.
  DisplayString += "</ul>";
 
  // Display the data.
  document.getElementById(DisplayID).innerHTML =
   DisplayString;
}

DisplayArray() accepts two inputs: an array to process and the identifier of a screen element to receive the data. The usual checks were omitted from this function for the sake of clarity, but if you were creating this function for a production environment, you’d definitely include them.

In this case, DisplayArray() used an unordered (bulleted) list to display the data onscreen. So, DisplayString receives the starting tag to initialize the string. The array adds list items (<li> tags) to DisplayString — one for each array element. The ending <ul> tag is added after the for loop completes, and the item is displayed onscreen in the correct display element.

image0.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create Cascading Style Sheets (CSS) Simply and Easily
How to Use IrfanView’s Built-In Effects for HTML5 and CSS3 Programming
How to Create Web Forms with HTML5
How to Create File Upload Fields in HTML5
How to Throw Errors in JavaScript to Program with HTML
Advertisement

Inside Dummies.com