Professional JavaScript | 20 | WebReference

Professional JavaScript | 20

1234
[previous]

Professional JavaScript

Four Traps

JavaScript code stored in a document by itself is a straightforward matter. Embedding JavaScript into an HTML document, which has another kind of content and format altogether introduces some problems.

Firstly, you can't use </SCRIPT> inside inline JavaScript. When a browser picks through a file's text, it looks for tags indicating where various bits of information begin and end. Once it sees a <SCRIPT> tag it goes on the hunt for a matching </SCRIPT>, which eventually results in an error or a mess. So this example is problematic:


<HTML><BODY>                                     // Example 1
<SCRIPT>
var warning = 'do not ever put </SCRIPT> literally in a string';
</SCRIPT>
</BODY></HTML>

The whole output of this HTML example for old browsers is likely to be:

literally in a string';

when no output was probably intended. Newer browsers, Internet Explorer 4+ and Netscape 4.5+ produce no output (correct) but the variable warning is set to:

do not ever put literally in a string

So these browsers manage to ignore the tag altogether. A better approach is to chop up the tag like this:


var script_tag = '</SCR'+'IPT>';                 // Example 2
var warning = 'do not ever put ' + script_tag + ' literally in a string';

Secondly, a similar problem occurs with printing any 'special' HTML characters. An example:


<HTML><BODY><SCRIPT>                             // Example 3
   // who's shorter? 
   // (He is – she grew up, and he's earlier in the alphabet anyway).
   document.write(('Danny DeVito' < 'Shirley Temple') ?'Danny < Shirley'
                                                      :'Shirley < Danny');
</SCRIPT></BODY></HTML>

The HTML produced looks like this, with the only output being Danny:


<HTML><BODY>
Danny<Shirley
</BODY></HTML>
<Shirley surely looks like a tag, but is unknown to the browser and therefore ignored. Do this instead:
// common knowledge anyway
document.write('Danny<Shirley');   // also use this trick for > and &

Here, we're relying on the alternative entity syntax provided by HTML for characters such as <, > and &. There aren't any new JavaScript features here, just a better choice of HTML.

Thirdly, if the HTML file containing JavaScript script is publicly available on the Internet, there is another problem. There are many browsers that not only don't support a scripting language, but they haven't even heard of the <SCRIPT> tag also. When a browser discovers an unknown tag, it is discarded and ignored. In this case, example 2 is likely to produce this ugly output for the reader's consumption:


var script_tag = ''; var warning = 'do not ever put ' + script_tag + ' literally in a string;

No modern browser has this problem, but it's impossible to tell what some people are using. You may be doing a blind person, or someone else who relies on a rare browser, a favor if you remember to solve this. There is a special feature of JavaScript that can help you out. If the first line of a JavaScript script is the HTML comment start symbol, then the JavaScript interpreter will ignore it, even though it is a JavaScript syntax error. This lets JavaScript code look like HTML comments for browsers with no clue about scripts. This is specific to browsers. An example:


<HTML><BODY><SCRIPT>
<!-- hide from old, stupid browsers
document.write('JavaScript rules, but not everywhere!');
// end comment --> 
</SCRIPT></BODY></HTML>

The last problem has more to do with HTML rendering of tags than the tags themselves. Recall the weather example above. In that example, the document.write() calls contain strings that are terminated by the new line character '\n', meaning "start a new line at this point". In the generated HTML that results, you can see this has happened, because the 'End of report' line in the generated HTML starts on a line by itself. However, when the HTML is rendered for the user, new lines don't have any effect on the displayed output. This is because newlines are the same thing as white space in HTML. Therefore they are only useful when someone looks at the HTML source. Another example:


document.write('red\n');
document.write('blue\n');
document.write('yellow\n');

This does not visibly produce three lines of output. It appears to the user as: red blue yellow

To insist on separate lines in the user output, use a <BR> HTML tag instead of a newline.

Taking all these traps into account, the 'Hello World!\n' example of Chapter 1 can be re-written and used as a template on which we can base all of our future JavaScripted HTML pages:


<HTML>
 <HEAD>
  <TITLE>First script ever</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--hide it from old browsers
     var my_hello = 'Hello, World!';
 
    function say_it(stuff)
       {
          document.write(stuff)
       }
  // finish hiding --> 
  </SCRIPT>
 </HEAD>
 <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--hide it from old browsers
     say_it(my_hello);
  // finish hiding --> 
  </SCRIPT>
 </BODY>
</HTML>

This is a good general pattern to follow, even though it looks complicated for such a simple use.

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

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