Placing JavaScript in your pages

See section 4D of the book. The <noscript> tag is treated in section 2F.

JavaScript includes are not supported by Netscape 2 and Explorer 3.

<noscript> is not supported by Netscape 2.

This page has been translated into French and Turkish.

You need to properly place a JavaScript in an HTML page to make sure the browser executes it. It isn't particularly difficult, but you do have to separate behavior (JavaScript) and structure (XHTML).

Although there are two ways of doing this, using JavaScript includes is the best way because that makes sure your JavaScript code will reside outside your HTML file. This makes your pages easier to maintain, since they contain only XHTML. It also allows you to modify the behaviour of your entire site by editing one single file.

You can also put a JavaScript directly in your page, but this method is deprecated. We'll also take a short look at the <noscript> tag.

JavaScript Includes

JavaScript includes are not supported by Netscape 2 and Explorer 3.

Included JavaScript files may not be refreshed in some browsers, no matter how often you hit Reload. Solution: enter the URL of the .js file in the location bar, load it, hit Reload, go back to the HTML page and reload it.

You should include a JavaScript file in your pages. This has several advantages:

  1. By updating one file, you update your script on all pages.
  2. The pages themselves become slightly lighter, because the include file is cached by the browser, so it doesn't have to be reloaded every time the user loads a new page.

I include a JavaScript file on every page on this site as follows:

<script src="../quirksmode.js"></script>

Now whenever the page is loaded, the browser also puts the script in the file quirksmode.js in the page. Note that you do not see the script in your source code, you just see the include tag. Nonetheless the functions and variables in the included file are available to scripts on each page.

I use this include for scripts that I want available on each page, like the TOC script. To view the include, download http://www.quirksmode.org/quirksmode.js.

On this page I include a special script that contains the function testIt(). Try executing it to test your browser's support of includes.

Avoiding errors in ancient browsers

Do not put a <script> tag in the included file, just the raw JavaScript code. Always place the include in the <head>. Netscape 3.01 has grave trouble with code included anywhere else. In addition, configure the server to send MIME type application/x-javascript with the .js file. Any other type causes Netscape 3 (at least, maybe more browsers) to ask the user whether he wants to download or open the file, no doubt causing tons of confusion.

Do not add an ID to a <script> tag. While it is allowed in Explorer, adding 'ID' to the tag disables the tag in Netscape 4, so that the script isn't executed.

If you want to make sure that browsers that don't support includes don't give error messages, you can do either of the following. Suppose you include the function lastMod() in each page. When you call it, first check if it exists:

if (self.lastMod) document.write(lastMod())

Another method would be

<script>
function lastmod() {}
</script>
<script src="js.js"></script>

First define an empty function lastMod(), if includes are supported it is overwritten by the actual function. Thus the function always exists, even if it does nothing in ancient browsers.

<noscript>

<noscript> is not supported by Netscape 2.

Within the <noscript> tag you can put some HTML that will only be shown when the browser of your users does not support JavaScript or has JavaScript disabled. It's occasionally useful to say sorry to non-JavaScript users or to present an alternative to them.

The tag works as follows: No-script browsers do not know it, so they ignore it and print out whatever's between them. Script browsers know it and don't show the bit inside the tag when JavaScript is enabled.

Unfortunately Netscape 2 doesn't support this useful tag, so that Netscape 2 users will see both the script and the noscript version. There's nothing you can do about it. Fortunately Netscape 2 isn't widely used any more.

The defer attribute

Only in Explorer 4+ on Windows the defer attribute defers executing the script until the document has been parsed completely.

The W3C HTML 4.0 specification specifies the defer attribute for script tags:

<script language="javascript" type="text/javascript" defer>

Originally, this is nothing more than a hint to the browser that the script inside the tags does not modify the content of the web page (by doing a document.write, for instance). Therefore the browser does not need to wait for the entire script to be parsed and evaluated, it can immediately go on parsing the HTML. On older systems this might save some parsing time.

However, Explorer 4+ on Windows has slightly changed the meaning of defer. Any code inside deferred script tags is only executed when the page has been parsed entirely. For instance, take

<body>
<script language="javascript" type="text/javascript" defer>
<!--
alert(document.forms[0].elements.length);
// -->
</script>

<form>
<input value="Bla">
</form>
</body>

Normally the alert would give an error: the document does not (yet) contain any form at the moment it is executed. By adding defer to the script tag, however, the alert is deferred until after parsing and correctly gives 1 as the length of the form.


Deprecated: Direct JavaScripts

Do not use direct JavaScripts for the reasons explained in section 2C of the book. This section is only maintained for historical reasons.

The simplest method is to place your scripts directly in the page.

How to place

<script language="javascript" type="text/javascript">
<!--

script goes here

// -->
</script>

First, you tell the browser that a script is coming, that it's a JavaScript and that the MIME-type is "text/javascript". Most validators protest against leaving the TYPE out, but browsers execute the code anyway.

<script language="javascript" type="text/javascript">

Then you open an HTML-comment. This is to protect very old browsers that don't recognize the <script>-tag. They'll ignore the tags themselves, but they print out anything that's between them: the script itself. Since this is incomprehensible to most users and doesn't have anything to do with the content of the page, it's necessary to comment the script out.

<!--

Then comes the script itself. After that it's necessary to close the HTML-comment again. However, if you'd just type

-->

browsers that do understand JavaScript will try to interpret this as a JavaScript command. Of course, it isn't, so they give JavaScript Error Message Alerts.
Therefore, it is necessary to put the HTML-end-comment after a JavaScript comment (//).

// -->

Finally, end the script and return to normal HTML.

</script>

Where to place

Generally you place JavaScripts in the <head> of a page. Only when you want to write a message in the page, you'll have to place the script in the correct place in the HTML.

Placing scripts in the <head> makes sure that any functions are loaded before the buttons, links or other things that call them are loaded. If you put your scripts at the very end of a page, it is possible that a user already sees part of the page including a button with a JavaScript function call, while the rest of the page hasn't loaded yet. Result: user pushes button and gets JavaScript Error Message Alerts, because the browser can't find the script (yet).

Unless there's a good reason to do otherwise, place your scripts in the <head>