Invoking Javascript

written 23 May 2006
Google site search

ContentsIntroductionBasicIntermediateAdvancedFuturePolicyInfrastructure
You need the Tcl Plugin to read this page. If this spot  is not green (v2) or cyan (v3)you may want to download the latest Tcl Plugin.

1   Invoking Javascript        

JavaScript can be invoked in a number of ways. Because it is treated as the de facto webpage scripting language, it is handled differently to other Plugins. The way it operates on the page is also different. Plugins generally use a seperate intepreter for each invocation on the webpage. With JavaScript, it is assumed you want to take control of the whole webpage, so multiple scripts on the page execute in the one namespace. This can cause problems if you want to use two different recipes on one page which use the same variable or function names for different things.

1.1   Invoking JavaScript in the <head> section        

You can write JavaScript inline in the <head> section like this:
<script type='text/javascript' >
    //javascript statements here
    . . .
</script>
A line commencing // is a javascript comment line. The language attribute is now deprecated, type should be used instead.

You source a file of JavaScript into the browser page like this:

<script type='text/javascript' src='javascriptfile.js' ></script>
You can have multiple <script> tags. It is not wise to rely on the order of the JavaScript tags because sourced files will arrive later than inline JavaScript code.

1.2   Invoking JavaScript in the <body> section        

You can write JavaScript inline in the <body> section, but here you must protect the JavaScript by putting it in html comments so that browsers which do not recognize the <script> tag do not include the code as ordinary text.
<script type='text/javascript' >
    <!-- hide from non-js browsers
    //javascript statements here
    . . .
    // -->
</script>
Javascript ignores lines beginning <!-- within the <script> tag. The // --> is a javascript comment which protects the end of the html comment tag.

Multiple scripts can be used in the <body>, which all execute in the one namespace for functions and global variables along with the scripts in the <head> section.

1.3   Invoking JavaScript at a certain time        

There are four major points in time when you might want to execute JavaScript elements:

1.3.1   Invoking as the document loads        

In-line Javascript statements in the <body> are executed as they load. In order to prevent this they should be put in function declarations which are invoked at the appropriate time.

1.3.2   On completion of the document loading        

Once the page has loaded, including .js source files, you can start your javascript processing by using the onload option of the <body> tag.
 <body onload='jsinit()' >
When the document loads an onload event handler is fired which automatically executes an onload() JavaScript function, if you have one. So for the latest browsers this can be done. To get older browsers to play along use the onload option above which will trigger the function which you name, in this case jsinit().

(The onload event can also be used with images to response to image loading)

1.3.3   In response to user action        

There is a host of event handlers which can be invoked. Here are some of the more common:

1.3.3.1   onclick        

The onclick event is fired in relation to an object on the webpage when the user presses and releases the primary mouse button over the object, <Button-1>. If the webpage object supports a click() method then that click() function will be invoked. If the object is an <a> tag with an intrinsic onclick action and you want to override it, your JavaScript function must return a value of false.

1.3.3.2   ondblclick        

ondoubleclick is similar onclick. In this case the onclick event fires first (on the first click) so the interaction needs to be handled. If you use doubleclick to do something then the onclick should only be used to show passive information such as highlight.

1.3.3.3   onmouseover (onmouseenter)         

This together with onmouseout is typically used for image rollover highlighting effects. A similar effect is achieved on just the text in a button by using the :hover style in CSS. If you are going to use this technique instead of CSS :hover, then look at changing the whole image look (lighten, brighten, redden) rather than just changing the text appearance in the image.

1.3.3.4   onmouseout (omouseleave)        

Here is a simple framework for doing image rollovers.
    if ( document.images ) {
        // precache 'off' button images
        var offImgArray = new Array();
        offImgArray\\["home"] = new Image (60,30);
        . . . <i>one entry per button</i>

        // off image array - set 'off' image path for each button
        offImgArray\\["home"].src = "image/homeoff.jpg";
        . . . <i>one entry per button</i>

        // precache all 'on' buttom images
        var onImgArray = new Array();
        onImgArray\\["home"] = new Image(60,30);
        . . . <i>one entry per button</i> 

        // on image array - set 'on' image path for each button
        onImgArray\\["home"].src = "images/homeon.jpg;
        . . . <i> one entry per button</i>

        // functions that swap images
        function imageOn(imgName) {
            if (document.images) {
                document.images\\[imgName].src = onImgArray\\[imgName].src
            }
        }

        function imageOff(imgName) {
            if (document.images) {
                document.images\\[imgName].src = offImgArray\\[imgName].src;
            }
        }

        function setMsg(msg) {
            window.status = msg;
            return true;
        }
    }
Invoke the rollover like this:
<a href='home.html'  onmouser='imageOn("home"); return setMsg("home.html")' onmouseout='imageOff('home'); return setMsg("")' >
<img src='images/homeoof.jpg' name='home' height='30' width='60' border='0' />
</a>

1.3.3.5   onmousedown onmouseup        

These are used in connection with drag and drop and may be used for other effects.

1.3.4   Invoking by other scripts        

A JavaScript command can invoke a Javascript function at any point by the usual method. JavaScript can also invoke an event on an object by using the fireEvent("eventType"\\[.eventObjectRef]) method.

©2000 - 2006 WEBSCOOL This page last updated 25 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.