JavaScript/Placing the code

The script element

All JavaScript, when placed in an HTML document, needs to be within a script element. A script element is used to link to an external JavaScript file, or to contain inline scripting (script snippets in the HTML file). A script element to link to an external JavaScript file looks like:

<script type="text/javascript" src="script.js"></script>

while a script element that contains inline JavaScript looks like:

<script type="text/javascript">
  // JavaScript code here
</script>

Inline scripting has the advantage that both your HTML and your JavaScript are in one file, which is convenient for quick development and testing. Having your JavaScript in a separate file is recommended for JavaScript functions that can potentially be used in more than one page, and also to separate content from behaviour.

Scripting language

The script element will work in most browsers, because JavaScript is currently the default scripting language. It is strongly recommended though to specify what type of script you are using in case the default scripting language changes.

The scripting language can be specified individually in the script element itself, and you may also use a meta tag in the head of the document to specify a default scripting language for the entire page.

<meta http-equiv="Content-Script-Type" content="text/javascript" />

While the text/javascript was formally obsoleted in April 2006 by RFC 4329 ^[1] in favour of application/javascript, it is still preferable to continue using text/javascript due to old HTML validators and old Web browsers such as Internet Explorer 5 that are unable to understand application/javascript. ^[2]

Inline JavaScript

Using inline JavaScript allows you to easily work with HTML and JavaScript within the same page. This is commonly used for temporarily testing out some ideas, and in situations where the script code is specific to that one page.

<script type="text/javascript">
  // JavaScript code here
</script>

Inline HTML comment markers

The inline HTML comments are to prevent older browsers that do not understand the script element from displaying the script code in plain text.

<script type="text/javascript">
  <!--
  // JavaScript code here
  // -->
</script>

Older browsers that do not understand the script element will interpret the entire content of the script element above as one single HTML comment, beginning with "<!--" and ending with "-->", effectively ignoring the script completely. If the HTML comment was not there, the entire script would be displayed in plain text to the user by these browsers.

Current browsers that know about the script element will ignore the first line of a script element, if it starts with "<!--". In the above case, the first line of the actual JavaScript code is therefore the line "// JavaScript code here".

The last line of the script, "// -->", is a one line JavaScript comment that prevents the HTML end comment tag "-->" from being interpreted as JavaScript.

The use of comment markers is rarely required nowadays, as the browsers that do not recognise the script element are virtually non-existent. These early browsers were Mosaic, Netscape 1, and Internet Explorer 2. From Netscape 2.0 in December 1995 and Internet Explorer 3.0 in August 1996 onward, those browsers were able to interpret JavaScript.^[3] Any modern browser that doesn't support JavaScript will still recognize the <script> tag and not display it to the user.

Inline XHTML JavaScript

In XHTML, the method is somewhat different:

<script type="text/javascript">
  // <![CDATA[
  // [Todo] JavaScript code here!
  // ]]>
</script>

Note that the <![CDATA[ tag is commented out. The // prevents the browser from mistakenly interpreting the <![CDATA[ as a JavaScript statement (that would be a syntax error).

Linking to external scripts

JavaScript is commonly stored in a file so that it may be used by many web pages on your site. This makes it much easier for updates to occur and saves space on your server. This method is recommended for separating behavior (JavaScript) from content ((X)HTML) and it prevents the issue of incompatibility with inline comments in XHTML and HTML.

Add src="script.js" to the opening script tag. Replace script.js with the path to the .js file containing the JavaScript.

Because the server provides the content type when the file is requested, specifying the type is optional when linking to external scripts. It's still advised to specify the type as text/javascript, in case the server isn't set up correctly, and to prevent HTML validation complaints.

<script type="text/javascript" src="script.js"></script>

Location of script elements

The script element may appear almost anywhere within the HTML file.

A standard location is within the head element. Placement within the body however is allowed.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- HTML code here -->
</body>
</html>

There are however some best practices for speeding up your web site ^[4] from the Yahoo! Developer Network that specify a different placement for scripts, to put scripts at the bottom, just before the </body> tag. This speeds up downloading, and also allows for direct manipulation of the DOM while the page is loading.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
</head>
<body>
<!-- HTML code here -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Reference

1. ↑ RFC 4329: Scripting Media Types
2. ↑ "application/javascript" and "application/ecmasscript" media types not recognized.
3. ↑ w:JavaScript#History and naming
4. ↑ Yahoo: best practices for speeding up your web site