Basic JavaScript Tutorial

JavaScript is a way to add behavior to your document. For instance, you could make the contents of your paragraph fly around when you click it. Please don't make paragraphs fly around, okay?

JavaScript

JavaScript:

<div id="div1" onclick="alert('You clicked on element');">Text here</div>

This sends an alert to the user that you have clicked on the div. Since this JavaScript is defined inside your document, it can get weird having tons of JavaScript functions tied to each element. It is better to use unobtrusive JavaScript. Although it is a little more work, using unobtrusive JavaScript will allow you to keep the JavaScript in a seperate file and not muk-up your XHTML.

Unobtrusive JavaScript

JavaScript:

var x = document.getElementById('div1');
    x.onclick = function () {
    alert('You clicked on element with the id of div1');
}

Here it searches the document for an element with id of "div1". When it finds the element, that element is store to a variable named "x". The second line attaches an onclick event that alerts the user that they have clicked on it. Great! Now our document is seperate from the behavior of the document!

This starter kit illustrates a basic behavior and an unobtrusive version of that behavior. As always, you can view the source to check out the code.

View the JavaScript starter kit example pages

Download the JavaScript Starter Kit

W3 Schools on JavaScript
JavaScript Authoring Information

Again, Google 'JavaScript' and you will find a million tutorials and examples.