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="http://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.
