< Continued from page 1

So now that you know how to attach JavaScript into a web page unobtrusively and how to provide hooks in the web page for the JavaScript to interact with it is time to look at the actual JavaScript that we need to have in that helloworld.js file in order to display the words "Hello World" in our paragraph.

function sayHello() {  document.getElementById('hello').innerHTML = 'Hello World';}window.onload = sayHello;


We are already introducing four different aspects of JavaScript in this first example that a more traditional approach would have left until much later on. The first of these concepts is that of the function. A function is a block of JavaScript code that will run whenever that function is called. The code within the function runs sequentially whenever the function is called. In our code here we have a function called sayHello. This particular way of defining a function (the simplest of the three ways provided in javaScript starts with the word function, is followed by the name of the function with open and close parentheses after it (we'll look at what can be put in there later0 and finally the code to be run contained within open and close braces.

The next piece of our JavaScript is document.getElementById() which is our introduction to the DOM. This is the most commonly used DOM command and as its name suggests is a way for JavaScript to reference something within the HTML that has a specific id attached.

In this instance it is providing a link to our paragraph. JavaScript uses dots to separate parts of the code for accessing the DOM and the browser in order to identify which property or method associated with that object that we want to access. In this instance we wish to access the getElementById method on the document object (which is the way javaScript references the web page) in order to access a specific id within the page.

innerHTML is the property of our paragraph that we wish to update. This particular property is not officially a part of the DOM but is supported by all major browsers and provides us with the simplest way of actually assigning something into the HTML tag that we are referencing. JavaScript uses the = symbol to indicate that the value on the right should be assigned to the variable or property on the left and so we will be assigning the text "Hello World" into the content of the paragraph tag with the id of "hello" when the sayHello function is run.

So that code will do exactly what we want when we run the sayHello function. There is one slight complication though to explain why we have placed our command inside a function instead of running it directly. In order for the code to work and actually write the words into the paragraph the paragraph with that id must exist at the time when the code to reference the paragraph is run. If the id can't be found then the code will give an error. We have our JavaScript attached to the head of our page (where unobtrusive JavaScript belongs) which means that the code will be loaded and run before the content of the body of the page finishes loading. At least the code would attempt unsuccessfully to run if it were not contained within a function. because the code is inside a function it doesn't run straight away but instead waits for the function to be called before it runs. So now all we need to do is to tell he code to run after the paragraph has loaded in the page.

The easiest way to do this is to set up an event handler. The window.onload event handler is triggered when the page finishes loading. The last statement in our code assigns the sayHello function to be run when that event occurs and hence the text "Hello World" gets added into the paragraph just as soon as the rest of the page finishes loading.

You will probably come across many other hello world tutorials for JavaScript that involve way less code than this. The difference is that by coding things this way we keep the JavaScript and the HTML completely separate which both makes maintaining your page much easier and also should give your page a higher ranking in the search engines since the content isn't diluted by having JavaScript scattered through it.

More of This Tutorial

• 2 Events
• 3 Visitor Triggered Events
• 4 Timed Events
• 5 Testing Conditions
• 6 Feature Sensing
• 7 Alternate Tag Location
• 8 Functions and Methods
• 9 Passing Parameters
• 10 Variables/Properties
• 11 Objects
• 12 Arrays
• 13 Nodelists
• 14 Loops
• 15 Numbers
• 16 Strings
• 17 Dates
• 18 Alert
• 19 Other Objects
• 20 Extending Objects
• 21 Creating Objects
• 22 Collision Proofing
• 23 JavaScript and Forms
• 24 Updating the Web Page
• 25 Obsolete JavaScript