 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.
|
