JavaScript and HTML Script Tags

Douglas Crockford
www.crockford.com

 

The <script> Tag

The script tag has two purposes:

  1. It identifies a block of script in the page.
  2. It loads a script file.

Which it does depends on the presence of the src attribute. A </script> close tag is required in either case.

A script tag can contain these attributes:

src="url"

The src attribute is optional. If it is present, then its value is a url which identifies a .js file. The loading and processing of the page pauses while the browser fetches, compiles, and executes the file. The content between the <script src="url"> and the </script> should be blank.

If the src attribute is not present, then the content text between the <script> and the </script> is compiled and executed. The script should not contain the sequence

</

because it could be confused with the </script>. Inserting a backslash between < and / in strings avoids the problem.

<\/

The backslash will be ignored by the JavaScript compiler.

Do not use the <!-- //--> hack with scripts. It was intended to prevent scripts from showing up as text on the first generation browsers Netscape 1 and Mosaic. It has not been necessary for many years. <!-- //--> is supposed to signal an HTML comment. Comments should be ignored, not compiled and executed. Also, HTML comments are not to include --, so a script that decrements has an HTML error.

language="javascript"

This attribute has been deprecated. It was used to select other programming languages and specific versions of JavaScript. You don't need it. Don't use it.

type="text/javascript"

This attribute is optional. Since Netscape 2, the default programming language in all browsers has been JavaScript. In XHTML, this attribute is required and unnecessary. In HTML, it is better to leave it out. The browser knows what to do.

defer

This attribute was intended to alter the timing of component loading in pages. It is not well supported and should not be used.

for="name" event="name"

This attribute is a Microsoft feature for declaring event handlers. It is not standard. Don't use it.

Placement

A <script src="url"></script> will block the downloading of other page components until the script has been fetched, compiled, and executed. It is better to call for the script as late as possible, so that the loading of images and other components will not be delayed. This can improve the perceived and actual page loading time. So it is usually best to make all <script src="url"></script> the last features before the </body>. An in-page <script> does not have a significant impact on loading time.

If a script is defining functions or data that are used by other functions, then the defining must be done before use. So the defining scripts must come before the using scripts.

document.write

The document.write method provides a way of incorporating strings into the HTML content of the page. There are better ways to do that, such as .innerHTML and .createElement or HTML cloning patterns. Use of document.write should be avoided.

document.write is recklessly dependent on timing. If document.write is called before the onload event, it appends or inserts text into the page. If it is called after onload, it completely replaces the page, destroying what came before.

document.write encourages bad structure, in which script and markup are intermingled. A cleaner structure has minimal interaction between markup and script.

The Script Tag Hack

The src attribute, surprisingly, is not constrained by the Same Origin Policy. This means that a script element can be created which can go to any server, fetch a script, and execute it. If the script causes the delivery of JSON-encoded data, then this is a very useful thing. Unfortunately, there is no way to constrain the script or to inspect it before it executes. It runs with the same authority as scripts from the page. So the script can access and use its cookies. It can access the originating server using the user's authorization. It can inspect the DOM and the JavaScript global object, and send any information it finds anywhere in the world. The Script Tag Hack is not secure and should be avoided.