Professional JavaScript | 21 | WebReference

Professional JavaScript | 21


Professional JavaScript

JavaScript Entities

An HTML entity reference is a bit of HTML syntax that lets difficult-to-type characters be represented. Examples are a non-breaking space(&nbsp;) and an accented A(&Aacute;). JavaScript entities are an extension to this syntax. This example draws two horizontal lines, but cleverly computes the lengths of the lines (which are normally specified as an HTML attribute) from some JavaScript variables and a bit of math. You couldn't do this without JavaScript, as either a <HR> tag has a fixed WIDTH attribute in plain HTML or none at all. The first line shows total units sold, the second the percent of a batch of 1000 units sold:

    var pixels_per_unit = 25.4;
    var total_units = 8;
  Bar graph showing number of units:<BR>
  <HR ALIGN=LEFT SIZE=10 WIDTH="&{pixels_per_unit * total_units};"><BR>
  Bar graph showing units as a percentage of 1000:<BR>
  <HR ALIGN=LEFT SIZE=10 WIDTH="&{(pixels_per_unit*total_units/1000) * 100};%">

It's the values of the WIDTH attribute of the <HR> tags that contains the JavaScript entities. Everything between the curly braces is evaluated as a script and the result replaces the entity at the end, same as an HTML entity. Unlike HTML entity references, these can only be used in the value part of an HTML tag attribute, as shown, not in normal HTML content. Notice in the second <HR> that the result of the JavaScript entity is concatenated with '%'. Whatever other characters are in the value part of the tag attribute will concatenate with the JavaScript entity's value. Any JavaScript expression can be used between the braces. JavaScript entities are of limited use. They are supported only in Navigator 3.0+, and in fact the HTML 4.0 standard advises against persisting with the use of this feature. It's there if you want it.

JavaScript URLs

A JavaScript URL is a special kind of URL. Mostly, URLs contain some kind of address that leads to a file, an e-mail account, or a terminal session when that hypertext link is clicked on. JavaScript URLs are different in that they don't retrieve or send anything, except as a side effect. What they do instead is cause the immediate execution of a bit of script, without the overhead of any request to a web server.

JavaScript URLs only occupy a single line, so if they contain more than one JavaScript statement, semi-colons should be used. There are three places to put JavaScript URLs.


All Netscape browsers, plus Internet Explorer 4+ support this functionality.

javascript:Math.PI * radius * radius
javascript:if ( top.page_number ) { alert(top.page_number.hits); }
The web browser user can type JavaScript URLs directly into the browser in the same way as for any URL. You can use the browser as a simple calculator, as in the first line above. A more common use is as a debugging aid, shown in the other two lines ('alert()' is a browser host function–more on that later). Typing JavaScript URLs interactively lets you examine any hidden (or not so hidden) contents of an HTML page, such as variables or properties. The URL has access to all the pages in the current window if frames are present. Here is a simple example based on this HTML source:
<BODY>Test content</BODY>

From this next screen shot you can see the JavaScript URL typed, the content and title of the page, and the small alert box window that is the result of the JavaScript URL. Note that the title of the main window agrees with the data the URL dug out of the document and displayed in the small window:


There's a lot happening in the above example. For now just accept that JavaScript URLs can get information out of HTML documents. The Windows and Frames chapter describes the rest of what's going on here.

If the URL is just typed as follows: 'javascript:' a special interpreter window appears that allows plain JavaScript to be typed in and executed straight away without the javascript: prefix. Here's a picture of the Netscape JavaScript interactive interpreter:


To get this display, first we typed 'javascript:' where URLs are normally typed. Then, in order to get the output shown, we typed the following into the input box at the bottom:

3 + 4
"Testing" + 1 + "2" + 3
Created: February 12, 2001
Revised: March 5, 2001