Professional JavaScript | 19 | WebReference

Professional JavaScript | 19

1234
[previous] [next]

Professional JavaScript

Inline Scripts
This example illustrates adding scripts to HTML, and using a function. All indenting is just for readability.

<HTML>
 <HEAD>
  <SCRIPT>
   function weather_comment()
   {
     if ( !Math.random )     // doesn't exist in Navigator 2.0
     {
      document.write('<PRE> -- weather called off due to rain --</PRE>');
     }
     else if ( Math.floor((Math.random()*2)) == 0 ) 
     {
      document.write("<STRONG>It's just awful.</STRONG>\n");
     }
     else
     {
      document.write("<EM>How wonderful it is!</EM>\n");
     }
   }
  </SCRIPT>
 </HEAD>
 <BODY>
  <P>Weather report for today:</P>
  <SCRIPT>
   weather_comment();       // add special stuff
  </SCRIPT>
  <P>End of report.</P>
 </BODY>
</HTML>

In the <HEAD> of the example, an inline script is used which does nothing except create a function. This is similar to the other activities that go on in the <HEAD> – no document content, but plenty of other setup information. Then, in the body, an inline script calls that new function which runs the infamous document.write(). The output of the document.write() is added to the plain HTML as it is displayed on the screen. This means the body part of the HTML will ultimately appear to be either this:


  <P> Weather report for today:</P>
<STRONG> It's just awful.</STRONG>
  <P> End of report.</P>
or this:

  <P> Weather report for today:</P>
<EM>How wonderful it is!</EM>
  <P> End of report.</P>
or for Netscape Navigator 2.02, which has no Math.random() method, this:

  <P> Weather report for today:</P>
<PRE> -- weather called off due to rain -- </PRE>
  <P> End of report.</P>
and then will be rendered by the browser appropriately.

The important thing to note here is that while this example has managed to affect the HTML delivered to the user, once that HTML is delivered, it's impossible to change it again by this approach. We could use other fancy tricks such as Dynamic HTML to modify the HTML after it's rendered, but this technique only applies to the process of initial display.

Where to Put <SCRIPT>

An HTML document consists of a <HEAD> and <BODY> or a <HEAD> and a <FRAMESET>. There are three reasonable places to put <SCRIPT> tags:

In theory, the head contains no document content, only meta-information about the document. In theory, the head is completely read by the browser before any body elements are displayed. This makes the head a good place to put any JavaScript that does invisible setup. This means declaring all functions, native objects and variables in the head, and avoiding executing document.write() when the head is loaded, although both Internet Explorer and Navigator will handle output from the head if you use document.write() there anyway.

Another good reason for putting as much script as possible in the head is that the JavaScript interpreter only knows that functions, objects and variables exist after the browser has reached the point where they are created in the HTML document. If functions are declared at the bottom of the document and called from the top, you will get 'function undefined' errors all over the place. If data is declared at the bottom of the document and called from the top, you'll have the same problem.

The body is the obvious place to put inline code that can vary the HTML output. If the script in the body starts looking complex or repetitive, consider putting it in a function declared in the head, and just call it from the body. At the end of the body is a good place to put any JavaScript code that you want to happen when the tags and objects it works on are already displayed on the screen.

Documents containing a frameset instead of a body can't have any JavaScript inside the frameset (except JavaScript URLS, see below). This is a nuisance if you want to vary the frameset details using inline scripts. Instead, you can put a <SCRIPT> tag after the </HEAD> tag, and use it to write out the whole <FRAMESET> content (or the whole <BODY> content), avoiding the problem altogether. Since there aren't any ordinary tags in a frameset document, you're safe to do this, unless your script starts looking inside the contents of each frame. That's bad because each frame also has to load a document, and you can have the same unloaded object problem again.

Overall, browsers supporting JavaScript are quite liberal about where you can technically put <SCRIPT> tags. A script can be responsible for quite a lot of a given document's content as this rather suspect (but generally browser friendly) HTML example shows:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<SCRIPT>
  with ( document )
  {
   write('<HTML><HEAD>\n');
   write('<TITLE>Nearly all JavaScript!</TITLE>\n');
   write('</HEAD><BODY>\n');
   write('Who needs plain HTML?\n');
   write('<BR><HR></BODY></HTML>');
  }
</SCRIPT>
Further Variants

These first examples show all the common ways of embedding JavaScript into an HTML file. There are also some additional browser-specific methods. Netscape Navigator 4.0 (and the equivalent Communicator suite) has enhanced security options for JavaScript. The benefits of using these are twofold: your scripts can be protected from prying eyes, and your scripts can do more powerful things. This subject is explained in the security chapter, Chapter 18, including how the ARCHIVE and ID attributes can be used together. Common to both browsers at versions 4+ is support for JAR files, also explained under security.

1234
[previous] [next]
and Created: February 12, 2001
Revised: March 5, 2001

URL: http://webreference.com/programming/javascript/professional/chap4/