Tutorial 16: Client-Side Scripting 101 - HTML with Style | 4

Tutorial 16: Client-Side Scripting 101

Embedding scripts into HTML documents

There are several ways to insert a script into an HTML document. Most of the time, you will be using the SCRIPT element.

The SCRIPT element

Context:

The SCRIPT element can appear in either the HEAD or BODY elements.

Contents:

The contents of the SCRIPT element is not considered HTML, and should be a script to be executed

Tags:

Both the start- and end-tags are required.

Attributes for the SCRIPT element

SRC (URI)

Location of an external script

TYPE (Content type)

The MIME Content type of the script

LANGUAGE (Character Data)

The language of the script

DEFER (Boolean)

If this attribute is present, the script does not have to be read and executed immediately

You can use the SCRIPT element in two ways. One is to use the SRC attribute to link to a script that is separate from the document itself, as in the following example.

<SCRIPT
 TYPE="text/ecmascript"
 LANGUAGE="JavaScript"
 SRC="https://www.acme.com/scripts/foo.js"
>
</SCRIPT>

The other is to include the script as the contents of the element, as below.

<SCRIPT
 TYPE="text/ecmascript"
 LANGUAGE="JavaScript"
>
<!--
today = new Date();
document.write("The time right now is " + 
               today.toString())
//-->
</SCRIPT>

Hiding scripts with HTML comments

Notice that I've enclosed the contents of the script above in an HTML comment (<!-- and -->). The reason for this is that old browsers that don't recognize the SCRIPT element will probably try and render the contents of the element as HTML. So why don't script-capable browsers also consider this a comment? The answer is that the contents of the SCRIPT element are not considered HTML, and so the comment start and comment end delimiters are considered part of the script (and, in the case of JavaScript, the comment start delimiter is ignored, while in the example above the comment end delimiter is hidden inside a JavaScript comment; this might not work with all scripting languages, however). This is the exact same technique used to hide style sheets contained in STYLE elements, as was discussed in Tutorial 6.

URL: https://www.webreference.com/html/tutorial16/3.html

Produced by Stephanos Piperoglou
Created: September 15, 1999
Revised: September 27, 1999