Attaching Scripts to documents

Attaching Scripts

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 <SCRIPT> block
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"> . . . <SCRIPT LANGUAGE="VBScript">  </SCRIPT>

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 :

NOTE : The above example uses Visual Basic Script, but JavaScript can also be used in this way.

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"> . . . <SCRIPT LANGUAGE="VBScript">  </SCRIPT>

This would appear (in much the same way as above) like

NOTE : As in the first example, this example uses Visual Basic Script, but JavaScript can also be used in this way.

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.
The <SCRIPT> element can also be used, using FOR= and EVENT= syntax. For example, the first example given above, could also be written as :

<FORM> <INPUT TYPE="button" NAME="btnHello4" VALUE="Click for greeting"> <SCRIPT FOR="btnHello4" EVENT="OnClick" LANGUAGE="VBScript">  </SCRIPT> </FORM>

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 :

<A HREF="javascript:alert('You can never have enough examples')">This is the link text</A>

Would display as : This is the link text

NOTE : At the time of writing, only JavaScript was supported using this method. It works in both Netscape and Internet Explorer. Future versions of Internet Explorer will include support for a <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 :

<A HREF="javascript:Exec_function()">This is the link text</A> <SCRIPT LANGUAGE="VBScript">  </SCRIPT>

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> <SCRIPT LANGUAGE="VBScript">  </SCRIPT>

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.