Guest Author - Julie L Baumler

When you put JavaScript in a web browser, how does the browser know that it is a script it should run, and not HTML to use as markup or text to display? The answer is usually to put it between <script> and </script> tags. (Small bits of JavaScript can be used for the value of HTML tags' event attributes, but that's another article.) You can use the <script> tag in the head or the body of a document. It is common to put JavaScript functions in a script section in the document head and then call those functions in the body. This is often a handy way to keep your code organized. The <script> tag takes several attributes. The most important, and required, attribute is type, which is used to tell the browser what language the script is written in. For JavaScript, this will always be type="text/javascript". Because web browsers just ignore tags they don't understand and print the content of the tag (remember HTML is a markup language, so by default everything else is the document), when you put your script in the body of the document it is a good idea to use HTML comments to hide your script from them. JavaScript will ignore the opening HTML comment (<!--) but you need to put a JavaScript single line comment (//) in front of your closing HTML comment (-->.) Your page should look something like this:

<script type="text/javascript">
<!--
Your script goes here
//-->

You can also put your JavaScript in another file and use the script tag to read it in. The file just has to have an accessible url. This can help with both organizing and hiding your commands from browsers that don't understand the script tag. In order to do this you use the src attribute. For example:

<script type="text/javascript" src="http://www.baumler.com/javascript/file.js" charset="en" defer="defer"></script>

If you are putting this in an XHTML document, you can use /> to close the script tag, rather than immediately following it with </script>, but this is not valid HTML and may or may not work depending on the browser.

You will notice I added two additional optional attributes to the example above. The charset attribute is used to define the charset of the data between the script tags. The defer="defer" is the only valid use of the defer element. It tells the browser that the rest of the page does not depend on the contents of this file in order to load and therefore the browser can defer loading the file or load it simultaneously with the rest of the page. This would be useful, for instance, if you were loading functions that would be called in response to user actions.