Categories:

Practical Uses of JavaScript entities

I remember when I first stumbled across JavaScript entities, the excitement I felt over the possibilities it could open up. Since then, I have found myself using this feature over and over again. In this final section of this tutorial, I'll present some practical examples of how JavaScript entities can be used, drawing from my own experiences.

In the first example, I'll show how JavaScript entities can be used to consolidate the declaration of HTML attributes into one place. Take a look at the following example:

<script language="JavaScript1.2">
var layerwidth="300px"
var layerheight="150px"
var layerbackground="image.gif"
var layersrc="http://javascriptkit.com/layer.htm"
</script>

<layer width="&{layerwidth};" height="&{layerheight" background="&{layerbackground};" layersrc="&{layersrc}"></layer>

Using JavaScript entities to consolidate HTML attribute declarations can be very useful if you're creating a script that someone else will be editing afterwards. By putting all declarations into one place, it makes life a lot easier for that other party to edit and make changes to the code.

Another invaluable use of JavaScript entities is to help fix the infamous bug of Netscape 4's CSS attribute "display". The display attribute affects whether an element is rendered on the page or not (a value of ''  renders the element, and "none" hides it). In IE, this attribute can be dynamically manipulated, so elements can display and disappear on demand, as in the example of the folding menu script. However, while NS 4 browsers do support the display attribute, it does NOT support the dynamic manipulation of it. Once the display attribute is initially set to a value of "none", the element in question ceases to exist, forever. The bug to overcome is how to set this attribute to "none" in a way that NS 4 browsers don't interpret it, while at the same time, IE browsers do, so further manipulation can be done on it (as in the case with any typical folding menu script). Take a look at how JavaScript entities can help:

<script>
//display the element in NS 4
var nscss="display:''"
</scrip>

<span style="display:none" style="&{nscss};">Some text</span>

The above <span> will not be initially visible to IE 4+ users, while for NS 4 users, it will. Remember, we want the element to appear for NS 4 users, since NS 4 doesn't have a way to make the element appear once it's hidden. Traditionally, authors had to use complex, messy techniques to make an element disappear in IE browsers, but appear in NS 4. With JavaScript entities, it's a snap. Two actual examples of this technique at work would be the scripts Folding Menu Tree and Contractible Headers.

While I love to show you more examples of the usefulness of JavaScript entities to you as a scripter, it's getting kind of late (in fact, it's early morning while I'm writing this tutorial), and I must get some rest now. Whether or not you're convinced at the moment that JavaScript entities are a great a powerful ally is one thing, simply understanding how to use them is another. Just know for now the later, and in time, the former will be known to you as well.