You'll need to properly place a JavaScript in an HTML page to prevent errors. Fortunately, it isn't particularly difficult.
There are two ways, putting a JavaScript directly in
your page or including a separate JavaScript file in your
pages.
Also, you have to know about the <NOSCRIPT> tag.
The most common 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 because of old browsers that don't recognize the <SCRIPT>-tag. They'll ignore the tags themselves, but will 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 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>
It depends. If you want to write something in the page, you'll need to put the script in the correct place, of course.
In most other cases, it's best to put them in the <HEAD>. This 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 isn't loaded yet. Result: user pushes button and gets JavaScript Error Message Alerts, because the browser can't find the script (yet).
So: Unless there's a good reason to do otherwise, place your scripts in the <HEAD>
defer
attribute defers executing the script until
the document has been parsed completely.defer
attribute can cause nasty surprises when combined
with a JavaScript include.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.
You can also 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="js.js"></SCRIPT>
Now whenever the page is loaded, the browser also puts the script in the file js.js in the page. Not 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 last modified script. To view the include, download http://www.xs4all.nl/~ppk/js/js.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. (The same goes for LINK tags, see the CSS Disabling page for more info.)
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. I include the function lastMod()
in each page: it is
meant to calculate the
last modified date. On each page I do
if (self.lastMod) document.write(lastMod())
So I first check if the function lastMod() is present and only execute it if it is (ie. if includes are supported).
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.
Inside 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 very 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.