JavaScript Placement: Script Tags and Source Files

Accessing and manipulating HTML elements is what JavaScript Web development is all about. To interact with elements in an HTML document, scripts need to be bound to that document. This lesson will discuss using script tags to do just that.

Script Tags inside Head and Body Tags

Your scripts can be placed within an HTML document, between opening and closing script tags. Script tags can be in the document's head or body.

<head>

 <script language="JavaScript">
  document.bgColor="#00cc00"
 </script>

</head>



<body>

 <script language="JavaScript">
  document.bgColor="#00cc00"
 </script>

</body>

NOTE: script placement will directly affect your script's results in the following case:
When

your script refers to HTML elements
these references are global, i.e. outside a function body
your script is further up in the hierarchy than the HTML element

The following example demonstrates an error in placement.

<html>

 <body>

   <script>
     document.forms[0].elements[0].focus();
// this will throw an error because it is loaded before the form element is loaded 
   </script>

   <form>
    <input type="text">
   </form>

 </body>

</html>

Source Files

JavaScript can be placed in a separate source file, apart from the HTML. The source file is then linked to the document by adding the "src" attribute to the opening script tag, with the name (and path) of the file as its value.

<head>
<script language="JavaScript" src="myExternalJavaScript.js"></script>
</head>

External JavaScript files cannot contain HTML, and must have the ".js" extension. Source file names follow the same rules as HTML document names. Additional statements may NOT be placed between an opening and closing script tag pair when they link to a source file.

Script Tag Notes

Your script tag should have the "language" attribute with "JavaScript" as its value. If your document is written in XHTML, be sure to make the word "JavaScript" lowercase, and use the "type" attribute with "text/javascript" as its value.

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

You may have seen the word "JavaScript" appended with a version number. There are three supported versions of JavaScript, the first, which needs no declaration, 1.2 and 1.3. Although version numbers are not required, appending including it is one way to weed out older browsers that may not support the latest language functionality. For instance, including "1.2" or "1.3" will keep non DHTML browsers from attempting to execute scripts.

<script language="JavaScript1.3"> // no space between javascript and the version number!

To hide scripts from any browser that does not support JavaScript (or if your document is written in XHTML), place an HTML comment directly below the opening script tag, and a closing HTML comment directly above the closing script tag, preceded by a JavaScript line comment. I don't use them in my examples because I assume my visitors will have a JavaScript capable browser!

<script language="JavaScript">
<--
statements here...
// -->
</script>

JavaScript Comments

Speaking of comments, you can and should have comments in your JavaScript. Comments are used to keep notes in your script which are helpful to you and others who will need to read the script later. To comment out a single line, place 2 forward slashes before the line.

// this is my comment

To comment out an entire block, place a forward slash followed by an asterisk at the beginning of the block, and the same characters in opposite order at the end of the block.

/* here is my
entire comment
block */

>>Objects, Properties and Methods
>>The Dot Syntax
>>Dot Syntax Alternatives
>>JavaScript Statements
>>JavaScript Placement: Script Tags and Source Files
>>JavaScript Placement: Event Handlers