<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> DOMIntro
<Advanced Topics >

Advanced JS

Where Do We Go From Here?: Now that we have laid a foundation in JS, we can go several directions. The following are topics of interest, areas of further study, and things not to be missed as we learn and grow while learning more about what is becoming a central language of the web!

Anonymous Functions: We learned early on that we could wire our functions to an event like the loading of a page. To do this, we wired to the onload event handler of the body tag:

<body onload="myFunction();">

We can do this in an alternative way by using the window.onload:

window.onload=function(){ ...code... }

Here is some more info:Combining Window Events Creating Anonymous Functions

Event Listeners: Until now we have used event handlers like onclick() to trigger JS functions. Using this method, there is a separate attribute for each event, which makes JavaScript mix directly with the HTML markup.

Lately it has been popular to separate the JS from the HTML (like we did with the anonymous function above) creating what is called unobtrusive JavaScript.

We can wire our JS to trigger without placing event handlers inside the HTML at all. The W3C DTD files do not support the countless event attributes, which frequently cause your markup to be invalid. Also, if JS is turned off, the code appears nowhere in the HTML, facilitating a cleaner separation.

If we have a link named "myLink":

<a id="myLink">Link</a>

We can wire to it's click event thus:

function linkClicked(e) {
var target = e.target;
target.style.color = "green";

var link = document.getElementById("myLink");
link.addEventListener('click', linkClicked, false);

The disadvantage (if there is one) is that we must now view our JS include file to determine how JS is to our document, as the HTML document itself will not give you a hint!

Here is some more on Event Listeners: Too Easy JS Event Handlers DOM Events



Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved