Section D. The script tag | ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006

D. The <script> tag

You have to include your scripts in the HTML page, and you have to start them at the right moment.

You include scripts in your page by means of a <script> tag. This tag can be used in two ways:

You can give the tag an src attribute; the browser will automatically download the script from the indicated location.
You can insert JavaScript code between the <script></script> tags.

Note that one <script> tag cannot fulfill both functions. It either imports an external file, or it contains JavaScript code.

Of these two methods, the first one is clearly preferable. As we saw in 2C, unobtrusive scripting requires your scripts to be totally separate from the HTML page, just as your CSS is totally separate. Therefore you should always import one or more .js files that contain the behavior layer of your site instead of directly writing your JavaScript commands in the HTML page.

This also allows you to write one script file and use it on many pages. For instance, Dropdown Menu was written to be used in all pages on my client's site, and was therefore included in all of them. Plus, if I change the .js file, these changes will automatically propagate to all pages in the site. This is a clear maintenance benefit.

Syntax

This is the syntax for including a script:

<head> <title>Example scripts - Sandwich Picker</title> <link rel="stylesheet" href="sandwiches.css"> <script type="text/javascript" src="/books/1/521/1/html/2/sandwiches.js"></script> </head>

The <script> tag has an src attribute that points to the location of the script and a type="text/javascript" attribute that tells the browser you're importing JavaScript. It also requires a closing tag: </script>.

You can also include scripts from other domains. JavaScript's same-source policy (see 1B) doesn't apply to such scripts, since you, as the Webmaster, explicitly decide to include them and thus implicitly judge them to be safe.

language attribute

Sometimes a language attribute is added to the <script> tag. This attribute serves to specify the exact JavaScript version being used. As we saw in 1B, the JavaScript version number is not important, and you shouldn't use it.

defer attribute

The purpose of the defer attribute is rather vague: Officially it merely serves as an indication that the script being loaded does not contain any commands that change the HTML, most importantly document.write().

Defer in Explorer

Internet Explorer executes scripts with a defer attribute only when the page has been completely loaded. At the time of writing it is impossible to say whether that is a correct interpretation of http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPT, since the definition there is rather vague.

<script> tags with JavaScript content

As I said, you can also put your script directly between the <script></script> tagsbut remember that unobtrusive JavaScripting calls for an end to this practice (see 2C). This is the syntax:

<script type="text/javascript"> alert('Hello world!'); </script>

Of course you can use as many lines of script as you need.

If you're using XHTML, the content of the <script> tag must be defined as CDATA, which tells the XML/HTML parser not to parse the contents, but to send it on as is to the script engine.

<script type="text/javascript"> //<![CDATA[ alert('Hello world!'); //]]> </script>

Note the JavaScript comments //. It is necessary to hide the CDATA definition characters from the JavaScript interpreter. Since they are not JavaScript, but rather XHTML, the interpreter would choke on them.

Using multiple scripts

You're allowed to add an unlimited number of scripts to an HTML document. For instance, the Edit Style Sheet and Dropdown Menu scripts work on the same HTML page, and since I use separate .js files for the two scripts, I include both:

<script type="text/javascript" src="/books/1/521/1/html/2/dropdown.js"></script> <script type="text/javascript" src="/books/1/521/1/html/2/editstyles.js"></script>

I created separate .js files for two reasons. First of all, they are independent scripts that should not influence each other, and which might be maintained by different programmers at different times.

Second, Dropdown Menu is used throughout the entire site of my client, but Edit Style Sheet is only used in one administration page. Therefore I include dropdown.js in every page, but editstyles.js only in the administration page.

All scripts that you import end up in the global object of the HTML page. In practice, this means that if you define one variable in several script files, the last definition takes precedence. For instance, if dropdown.js and editstyles.js both contain a variable importantVariable, it gets the value defined in editstyles.js because that's the last script you imported.