Gene Michael Stover
created Monday, 11 August 2003
Copyright © 2003 by Gene Michael Stover. All rights reserved. Permission to copy, store, & view this document unmodified & in its entirety is granted.
It's time for me to learn JavaScript. Here are my experiments while I learn JavaScript. They are preserved here for your reading enjoyment, for posterity, & (most likely) for me when I need to remember how to do something.
Here's a simple experiment to determine whether a browser has JavaScript. If it has JavaScript, you should see a message that says "congratulations(?), you have JavaScript". Otherwise, you should see some JavaScript source code, probably mangled. If you don't see the source code, you definitely should not see the congratulations.
The page with this test is got-javascript.html. If you want to view the source, visit that link & use the "View Page Source" or similarly named feature of your web browser.
With Mozilla 1.2.1, I see the congratulations message; I expected as much. With Lynx, I do not see the congratulations message, & I'm pleasantly surprised that I don't see the JavaScript source code.
Let's generate something more interesting, though still not quite interesting. Let JavaScript generate a numbered list of colors. We'll let HTML do the numbering, with an ordered list (OL), but JavaScript will generate the LI nodes from a hard-coded array.
The program is numcol.html.
Now I'll take the numcol.html program & move the JavaScript code into a function. I'll define the function in the HTML HEAD section. Where numcol.html has executable code, I'll call the function.
The program is numcolfun.html.
For the record, the output of this program is indistinguishable from that of the previous program.
Now I'll make a program that loads JavaScript functions from another file.
The program is outsrc.html. The file of functions (well, one function) is outsrc0.js.
If JavaScript spends a long time generating HTML, does the browser display the part of the page that is already generated? Let's see.
long0.html contains a JavaScript program that generates a list of Fibonacci numbers. It generates the numbers using a recursive definition of Fibonacci which consumes lots of CPU time. If the browser displays all HTML as it is generated & parsed, then you'll see the list generated slowly. If the browser waits until all HTML is generated, then you won't see any of the list until it is entirely generated.
For the record, with Mozilla 1.2.1, there is a pause while the table of generated before any of the page is displayed. I'm not surprised because the JavaScript book I'm using said that the browser's HTML parser must pause while it waits for the JavaScript to execute. According to that rule, I would be surprised if the list was displayed one row at a time. On the other hand, I guess it would be possible for a browser to display the HTML that came before a section of JavaScript. So a browser might have displayed the paragraph that comes before the list while the JavaScript section generated the list. But it doesn't.
Now to test the HTML onclick event. oc0.html contains a button that displays an alert box when you click on it. Well, it does for some browsers.
oc1.html is like the previous program (oc0.html) except that it uses a link instead of a button.
Now this program is very interesting. The incident at work which led me to learn JavaScript was a broken web application. I tracked the problem to a link that looked like the one in oc1.html. That link is defined like this: <A HREF="#" ONCLICK="alert('You clicked the link.');">Click Me</A>.
To a non-JavaScript programmer (me), that looked a little weird, but it didn't take long to figure out that it was intended to execute some JavaScript code whenever someone clicked in the link. When someone clicked on the link at work, nothing happened.
I thought the problem might be that Microsoft's Internet Exploder 6 does not support JavaScript events fully. At least that's what I have heard but not verified for myself.
This test, which I tried with Mozilla 1.2.1, has the same results, no effect when I click on that link.
So I started thinking that the onclick event doesn't apply to the A tag, but when I read some HTML documentation about the onclick, I see that it is supported for the anchor (A) tag. Or at least it was in 1997.
Maybe more recent browsers prefer to convey onclick information about links in another way. Time for another test.
oc2.html is yet another experiment with JavaScript & a link. Instead of trying to execute a JavaScript expression in response to an onclick event, it'll use a javascript URL.
Aha. Clicking on the link in this test does display a message box. At least it does for Mozilla 1.2.1.
End.