JavaScript/The SCRIPT Tag

From Wikibooks, the open-content textbooks collection

Current revision (unreviewed)

[edit] Script Tags

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

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

while a script tag 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 is in one file, which is convenient for quick developemnt and testing. Having your javascript in a separate file is recommendable for javascript functions which can potentially be used in more than one page, and also to separate content from behaviour.

[edit] Scripting Language

The tags <script></script>, by themselves 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 tag 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 obseleted in April 2006 by RFC 4329 ^[1] in favour of application/javascript, it is still preferable to continue using text/javascript due to HTML validators' and Internet Explorer web browsers' inability to understand application/javascript ^[2]

[edit] 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>

[edit] Inline HTML comment markers

The inline HTML comments are to prevent older browsers that do not understand JavaScript from displaying it in plain text.

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

The // is a comment delimiter, which prevents the end comment tag --> from being interpreted as JavaScript.

The usage of comment markers is rarely required nowdays, as the browsers that do not recognise JavaScript 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 on, browsers were able to interprete javascript.^[3]

[edit] Inline XHTML JavaScript

In XHTML, the method is somewhat different:

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

Note that both the <![CDATA[ tags are commented out. This prevents the browser from mistakenly interpreting strings with XHTML tags as if they were actual XHTML tags.

[edit] 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 recommend 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>

[edit] Location of script elements

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

A standard location is within the <head> tag. Placement within the <body> however is allowed.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Web page title</title>
    <script type="text/javascript" src="script.js">
</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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Web page title</title>
</head>
<body>
<!-- HTML code here -->
<script type="text/javascript" src="script.js">
</body>
</html>