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.
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 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:
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.
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>
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.
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.
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.
<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>
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>