There are various methods of invoking scripts in HTML pages. Basically, a script can be written in a discrete block in the document, can be written into the HTML element attributes (this is mainly what this section of the HTMLib describes), or can be given in the URL of a hypertext anchor. (Also, there is an Internet Explorer specific method, using the ID attribute)
1. Calling a discrete
For example, if as part of a HTML document, you had a button in the page, that when pressed, displayed a 'Hello' message on the screen. Using the first method mentioned above, the HTML could be written as :
<INPUT TYPE="button" NAME="btnHello" VALUE="Click for greeting">
. . .
When the button is pressed, the script is invoked. It knows that it refers to the button, by using the buttons
NAME value in the name of the script routine, followed by the event that executes the script (in this case
OnClick, i.e. when the button is clicked). This would appear thus :
2. Using a scripting attribute
As mentioned above, scripting can also be included as an attribute of the HTML element itself. Using this method for the same button as above would require the same general
<INPUT> declaration, but include the
OnClick event in the element thus :
<INPUT TYPE="button" NAME="btnHello2" VALUE="Click for greeting" OnClick="pressed">
. . .
alert "Hello again"
This would appear (in much the same way as above) like
2a. Including the script in the scripting attribute
The above example, uses the
OnClick scripting event handler to execute the script defined in a separate
<SCRIPT> block. It is also possible using this method with such a simple script, to include the script in the
OnClick event in the
<INPUT> definition, avoiding the overhead of writing a separate script block. This could be done by using :
<INPUT TYPE="button" NAME="btnHello3" VALUE="Click for greeting" OnClick="alert 'We have got to stop meeting like this'">
Which would appear in the document like :
NOTE : Take note of the use of the ' character surrounding the message to display, rather than double quotes characters (") previously used. This is because the script function is already enclosed in double quotes, as an attribute of the element. Using double quotes to surround the message would cause an error in the script.
2b. An Internet Explorer specific method of 2a.
<SCRIPT> element can also be used, using
EVENT= syntax. For example, the first example given above, could also be written as :
<INPUT TYPE="button" NAME="btnHello4" VALUE="Click for greeting">
<SCRIPT FOR="btnHello4" EVENT="OnClick" LANGUAGE="VBScript">
alert "Enough examples, my head hurts!"
This would appear as :
NOTE : With the above example, it is necessary for the
<INPUT> element to be enclosed in its parent
<FORM> element for the scripting to work. Also, only Internet Explorer (at the time of writing) supports this scripting method.
3. Scripting as a URL
As mentioned in the first paragraph, script events can also be included as URL's. For example :
Would display as : This is the link text
<A HREF="vbscript:...."> syntax.
However, Internet Explorer allows for cross-language referencing. You can use the above construct to call a scripting function, which can be a Visual Basic Script function. For example :
Give it a try : This is the link text
As you will see further in this scripting reference section, the anchor (
<A>) element also supports various events using the above methods. This allows scripting to be combined with hypertext links, so that the link is not exclusively executing a script.
4. Using the ID attribute
Internet Explorer can support scripting functions using the ID attribute. For example, a standard
<A> element, given an
ID attribute can be scripted as :
<A ID="eglink" HREF="another_page.html">This is the link text</A>
<!-- Sub eglink_OnClick()
alert "Are you bored of this yet?"
which would work as : This is the link text
NOTE : Due to this method using the
ID attribute, it is Internet Explorer specific. Also note the use of the double parenthesis ('()') characters after the scripting event in the script block. Without these, the script wouldn't work. Also note that navigation to the document specified in the
HREF attribute will be attempted always. In this example, it points to a non-existent document which can cause an error.
Where to position Script functions in the document
There is much debate about where
<SCRIPT> ... </SCRIPT> blocks should be positioned within the document. Generally, it is considered best to include script blocks in the
<HEAD> ... </HEAD> section of the document. This is so that you can be sure that any script functions used by any of the scriptable elements will be available before the elements that use the scripts are displayed. For instance, if you have some
<A> links that rely on a script function for their functionality (for example, changing documents in two frames at the same time) and the script function is below them in the document, the script function will not be evaluated by the browser until after the links have been displayed. If the user clicks one of the links as the document is downloading, then the browser will throw a scripting error.
On the next pages, the various standard HTML elements that support scripting event handlers as attributes will be described. Keep in mind the above method variations though, as different solutions will require different methods.
© 1995-1998, Stephen Le Hunte