Several popular uses of JavaScript such as image preloading, browser detection, URL parsing and others are discussed here in detail with code samples provided.

Web Technology:Common JavaScript examples
Control the page:
Show table of contents,
Change page style,
Adjust text size
Introduction
T
C
F
<

Sections of this article are based on various bits of JavaScript that are the backend of the user interface for projecttree.

URL parsing

<

URL parsing could be useful for several reasons. It could allow reuse of html and JavaScript code as it does on the Photo Albums page where it is possible to specify the album id in the URL and that album will be loaded when the page opens. It could be done to override stylesheet preferences if a method was implemented to parse the location of a custom stylesheet and then apply it to the page. It is also used in the photo pop-up window of this site to load the correct image.

First we need to read the query string and put the variables into an easily accessible structure.

function parsequery(){ var arg_pairs = new Object(); arg_pairs.names = new Array(); arg_pairs.values = new Array(); var query = location.search.substring(1); if(query == "") { return null; } var pairs = query.split("\&"); for(var i = 0; i < pairs.length; i++){ var pos = pairs[i].indexOf('='); if(pos == -1){ continue; } var arg_name = pairs[i].substring(0,pos); var arg_value = pairs[i].substring(pos+1); arg_pairs.names[i] = arg_name; arg_pairs.values[i] = arg_value; } return arg_pairs; }
Example 1

The first three lines initialize variables that will be used to store parsed values. Then the contents of the query string, ie everything after the question mark in the URL is assigned as a string to the query variable. Line 6 will return if there are no parameters to be parsed. If there are, we will break up the string into parts that contain the variable name and content. These parts will be stored in an array, one element per pair. Next we break up the pairs into individual name and value arrays. We will be able to reference a particular value by name because the index at which the matching pair stored in different arrays is the same. Lastly we return the full arg_pairs object with the two arrays. Now we can get any value in the following fashion.

var url_pairs = parsequery(); var firstvalue = url_pairs.values[0]; var firstname = url_pairs.names[0];
Example 2

The above works, but it's rather cumbersome. It would make more sense to request a particular value by name and if it exists have it returned. The following code does just that. We loop over the array containing the names of all variables we parsed and if any name matches the one that was requested, the value is returned. Otherwise we finish the loop and return null.

function getqueryparam(arg_pairs, paramname){ for(var i = 0; i < arg_pairs.names.length; i++){ if(arg_pairs.names[i] == paramname){ return arg_pairs.values[i]; } } return null; }
Example 3

Now we can get a particular value by name like this.

var url_pairs = parsequery(); var firstvalue = getqueryparam(url_pairs, "name_of_first_variable");
Example 4

If firstvalue is null then a varialbe by the name of "name_of_first_variable" was not in the URL query string.

Browser detection

<

There are many ways to detect the browser that is being used to view a site. Most often however we need to determine if the client is running a Microsoft browser or something else. There are several ways to determine that as well, one is presented below.

var isie = (window && window.createPopup) ? 1 : 0;
Example 5

Window and window.createPopup object and methods are part of the IE tool set, hence if we can reference them, we are using Internet Explorer. Simple, yet effective.

Image preloading

<

Image preloading techniques are widely used to prevent the viewer from seeing the content until it has finished downloading from the host. It is popular enough that Macromedia has a script for this included in their web authoring tool. Various solutions exist for this one is presented below.

var timer = null; var images = new Array(); function init(){ images[0] = new Image(); images[0].src = "/img/somepicture.jpg"; images[1] = new Image(); images[1].src = "/img/anotherimage.jpg"; images[2] = new Image(); images[2].src = "/img/samplephoto.jpg"; timer = setInterval("check()", 250); return; } function check(){ for(var i = 0; i < images.length; i++){ if(!pics[i].complete){ return; } } clearInterval(timer); images = null; return; }
Example 6

First we define two variables to be global for the script. Both the methods need access to them. The timer variable will store a reference to a timer that will executed the check function every 250 milliseconds and the images array will contain the images we want to preload. In the init function we will initialize the array to contain image objects that we want to load. The src parameter of the JavaScript Image object contains the path to the picture. After all the objects are created, we will start a timer that will call the check function. The interval is set to 250 milliseconds. You may want to adjust that depending on the size of the images you are loading and the connection speed of your target audience. There is no reason to call the check function too often. When check is called we will loop over the array of our images and return if any of them have not finished loading. Image.complete parameter returns true is the image was downloaded from the server. This behavior is not universal for all the browsers. Internet Explorer will return false if the image loading failed. Finally if all the images were downloaded we clear the timer and free the memory being used by the image array. Keep in mind that if you are preloading a large number of images, this method could use up quite a bit of the end-user's memory. On this site images are preloaded on the front page that are used for the tree branches. Until they are all loaded, the visible area of the browser is covered by a layer. Note that the images we reference in the init method must be present in the html file some place.

More JavaScript samples
<

Examples of browser cookie storage and parsing are available in the Controlling style and text with JavaScript and More common JavaScript examples articles.

Contributors
<

Mark has contributed to this article.

This document was printed from projecttree.com. Copyright 2003-2004 Mike Radin. Distribution for profit is strictly prohibited without express permission. Non-profit distribution is allowed if the author is properly credited. You can always find the most up-to-date version at http://www.projecttree.com/jscode.html
20040509.12 - projecttree