Apply JavaScripts Wisely | Speed Up Your Site[c] Web Site Optimization

JavaScripts can be included in an (X)HTML document in any of four ways:

In an external file
Between a pair of <script>...</script> tags
In an event handler
After the javascript: pseudo-protocol in an URL

Let's use our minimal Mondrian to demonstrate them all:

 <!DOCTYPE html       PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Piet Mondrian's Home Page</title> <script src="/scripts/foo.js" defer="defer" type="text/javascript"></script> <script type="text/javascript">       var foo = 1; </script> </head> <body>       <h1>Piet Mondrian: Abstract Impressionist</h1>       <p>Mondrian was one of the great abstract masters...</p>       <p><a onmouseover="window.status='Mondrian Home Page'; return true;"; href="http://  www.mondrian.com">Mondrian.com</a></p> <p><a href="javascript:window.open('http://www.mondrian.com/')">Mondrian.com</a></p> </body> </html>

In honor of Mondrian and expediency, let's focus squarely on the first two options. Event handlers can be used to link behavior to elements ( ideally with functions), but the javascript: pseudo-protocol should be avoided as the only reference of a link. The 11 percent of people without JavaScript won't be able to access this content. ^[3] This is not exactly user friendly. ^[4] A number of sites rely on JavaScripteven government sites that should be easily accessible like http://www.canadapost.ca/.

^[3] TheCounter.com, "JavaScript Stats," in Global Statistics 2002 [online], (Darien, CT: Jupitermedia Corporation, October, 2002), available from the Internet at http://www. thecounter .com/stats/.

^[4] Pamela L. O'Connell, "Site Unseen?," New York Times , 14 February 2002, Circuits section, D3. Shirley Kaiser of WebStandards.org and I were quoted in this story about Olympics.com, a site that required JavaScript.

Here's the syntax of the script element:

<script>
Function:	Defines an executable script
Attributes:	`CHARSET` , `DEFER` , `LANGUAGE(deprecated)` , `SRC` , `TYPE`
Examples:	<script type="text/javascript" src="/scripts/foo.js"></script> <script type="text/javascript" src="/f.js" defer="defer"></script> /* optimized */
End tag:	`</script>` , not optional
Alternate:	`<noscript>alternate content</noscript>`
Used in:	`<head>` , `<body>`