The browser is the servant of at least three masters: HTML, CSS, and JavaScript – collectively referred to as “Dynamic HTML” and all of which are specified by the programmer (directly, or perhaps indirectly via other code-generating programs and scripts). To understand what we can and cannot do (and sometimes to find ways of circumventing the latter), it is necessary to keep in mind the division of labor between these three languages and how their roles change with time.
Let’s look at the role of these languages at the time when the page is being “parsed” and the browser is painting the first rendering of it onto the screen.
1. HTML. First, the browser paints the page in accordance with tags and properties in the initial HTML that was sent by the server, usually in response to a client request that specified a URL. (This HTML might be the entire contents of a file that was placed on the server’s disk by the webmaster, but it might also be the output of a server-side program such as a CGI Perlscript. However, the origin does not matter; both sources are just HTML, to the browser.)
2.
CSS. Cascading
Style Sheets (if any) may tell the browser how to interpret some of the HTML
tags differently, as well as how to render them when painting the screen. XML, DTD, and other languages and extensions
may also affect the browser’s interpretation of the HTML.
3.
JavaScript. Much
of the JavaScript embedded in the program is ignored at this stage,
particularly if it is in functions that will be called by the event
handles. In
In particular, JavaScript code that is within a function definition is not executed unless the function is executed, either as the result ..+++
+++
++++++++++++
+++ (designed not to interfere with HTML –) (?!)
… at the mercy of the HTML syntax – so that browser may ignore.
JS is a “guest” within the HTML page.
++++ Three places:
1. Between <SCRIPT> … </SCRIPT> tags.
a. HEAD
b. BODY
2. Tag property string
a. Event property e.g.
b. other – Any property!! e.g. WIDTH=”gimmeNumber()”
3. JS variables as an “entity” – “materialized” as part of the HTML – substitution (like #define)
a. In text
b. As a property
+++ Discuss each
+++++++++++++
+++++
+++ tag property=”JS in a string“
<A onMouseOver=”seenNearby(this)” onMouseOut=”scurriedAway(this)>
<FORM onSubmit=”validateAndSubmit(this.form)”>
<INPUT onChange=”instantCheck(this)” onClick=”gotcha(this)”>
The basic limitation of a JavaScript event handler is analogous to that of a custodial employee assigned to the limited task of maintaining a beautiful tree that has been elaborately decorated with ornaments and lights, and put on display (perhaps to celebrate Solstice, Yule, Christmas, or whatever). When a light goes off, or when an ornament becomes shabby or falls off, the caretaker is permitted to replace the burnt bulb or missing ornament with another. At his discretion, he may choose a different color bulb or an entirely different ornament, provided it fits in the same socket or on the same hook, but he may not add any new sockets or hooks the decorated tree – because that would mean reopening the “official tree decoration project,” which has already been completed, and redecorating the entire tree again from scratch.
Alternatively, he also has the option to go out and purchase a new “popup” tree and use his new ideas to decorate it instead. For this tree, however, the decoration project is over, and he is forbidden from adding any new sockets or hooks, or even changing anything that would alter the overall outline and layout of the decorated tree.
The average caretaker, in this situation, will probably be content with just doing his job, faithfully replacing burnouts with a similar color and doing a simple rollover for smudged satin balls, half-eaten candy canes, and so forth -- thus preserving a fairly stable and constant appearance for visitors and passersby.
The artistic caretaker will at first bristle with stifled creativity at being forbidden to “enhance” the tree or even making it less boring by having it glitter and change dynamically with time.
The more clever and daring of these may find ways to “push the envelope” and maybe even to surreptitiously “bend the rules” or do something in a guise to which a different rule applies,
without getting “caught,” blowing a breaker, or making the tree come crashing down. His object is to “get away with” achieving a level of artistry that is not in the job description, and thereby win a new audience of lingering visitors and admirers.
Yes, I am sneakily alluding to web pages! Lingering admirers is what feeds eCommerce
as well as traffic by shop windows.
Imagine the tree caretaker who buys or builds (from plans in some book) a ++++
… plugs in an adapter to fit a different-sized bulb into a standard socket.
… picks up a little gadget to turn the lights blink on and off, modulates them in morse code for a while, and then reads a bout a circuit to make them spell out any name typed into a keyboard by a visitor.
… He cannot change the hooks, and most of them are too weak for the fancy ones. However, helium-filled ornaments might solve the hook problem.
… Then there are other possibilities,
such as holograms, strobe lights, and background music.
(Fireworks are tempting, but not just now.)
With innovation that somehow circumvent the seeming constraints of the shop window,
this tree becomes the most-noticed one on the block,
and the store that it fronts is helped on its way to becoming the best-known spot in the village.
Now, what of the caretaker and his future?
Well, there is always the chance that the greedy storeowner will assume that his discount coupons are the secret pf his newfound success, leaving the clever caretaker with pride and satisfaction as his only reward (beyond an occasional compliment from a packag-laden visitor).
However, MIS systems sometimes have a way of identifying true cost/benefit relationships. And the skills of the tree-programmer are quite portable, too.
Coming down to earth now (or moving beyond the solstice season), the impatient reader may well ask about the adapters and helium and holograms available in JavaScript, to circumvent the seeming limitations imposed by the document.close method when the curtain goes up for a web page.
+++
?? Tree = DOM / decorate it
++++++++++++= Stick in some coding, above, to break/spice it up.
++++ Talk more-specifically about event handler.