Mozilla JavaScript Learning Material
I can't resist commenting on the style of the page. There are comments like:
JavaScript is a very easy language to start programming with. All you need is a text editor and a web browser to get started.
And:
JavaScript is a great programming language for introductory computer languages. It allows instant feedback to the new student and teaches them about tools they will likely find useful in their real life. This is in stark contrast to C, C++ and Java which are really only useful for dedicated software developers.
And then the first code example is:
<span onclick="alert ('Hello World!');">Click Here</span>
With zero explanation besides a list of mouse "events" other than onclick. To be fair, the code works. When slotted into an empty browser page, it comes up as shown below:
and if you click over the text it comes up as shown below:
The second code example is a more complex and wordy way of achieving the same thing:
<script type="text/javascript">
function onclick_callback ()
{
alert ("Hello, World!");
}
</script>
<span onclick="onclick_callback();">Click Here</span>
Slotting that into an empty web page achieves exactly the same as shown in the illustrations above.
The third code example shows an even more complex way of achieving almost the same thing:
<script type="text/javascript">
function onclick_callback(event)
{
var eType = event.type;
/* the following is for compatability */
/* Moz populates the target property of the event object */
/* IE populates the srcElement property */
var eTarget = event.target || event.srcElement;
alert ("Captured Event (type="+ eType +", target="+ eTarget);
}
</script>
<span onclick="onclick_callback(event);">Click Here</span>
This shows the same text as before and the following message:
The fourth code example introduces still more complexity, and this time the message box (shown below) is invoked by a larger range of possible mouse events:
<script type="text/javascript">
function mouseevent_callback(event)
{
/* The following is for compatability */
/* IE does NOT by default pass the event object */
/* obtain a ref to the event if one was not given */
if (!event) event = window.event;
/* obtain event type and target as earlier */
var eType = event.type;
var eTarget = event.target || event.srcElement;
alert(eType +' event on element with id: '+ eTarget.id);
}
function onload ()
{
/* obtain a ref to the 'body' element of the page */
var body = document.body;
/* create a span element to be clicked */
var span = document.createElement('span');
span.id = 'ExampleSpan';
span.appendChild(document.createTextNode ('Click Here!'));
/* register the span object to receive specific mouse events */
span.onmousedown = mouseevent_callback;
span.onmouseup = mouseevent_callback;
span.onmouseover = mouseevent_callback;
span.onmouseout = mouseevent_callback;
/* display the span on the page */
body.appendChild(span);
}
</script>
This is great, but it's not really what I'm looking for.
Comments