Free Ebook Computer Programming on Javascript: Voodoo's Introduction to Javascript.pdf

JavaScript hierarchy

JavaScript organizes all elements on a web-page in a hierarchy. Every element is seen as a object. Each object can have certain properties and methods. With the help of JavaScript you can easily manipulate the objects. For this it is very important to understand the hierarchy of HTMLobjects. You will quickly understand how this works with the help of an example. The following code is a simple HTML-page.

We want to be able to get information about the different objects and manipulate them. For this we must know how to access the different objects. You can see the name of the objects in the hierarchy. If you now want to know how to address the first image on the HTML-page you have to look at the hierarchy. You have to start from the top. The first object is called document. The first image the page is represented through images[0]. This means that we can access this object through JavaScript with document.images[0]. If you for example want to know what the user entered into the first form element you must first think about how to access this object. Again we start from the top of our hierarchy. Follow the path to the object called elements[0] - put all the names of the object you pass together. This means you can access the first textelement through:

But how can we now get to know the entered text? .......more

In order to find out which properties and methods an object offers you have to look into a JavaScript reference (for example Netscape's documentation or the reference in my book). There you will see that a textelement has got the property value. This is the text entered into the textelement. Now we can read out the value with this line of code:

name= document.forms[0].elements[0].value;

The string is stored in the variable name. We can now work with this variable. For example we can create a popup window with alert("Hi " + name). If the input is 'Stefan' the command alert("Hi " + name) will open a popup window with the text 'Hi Stefan'. If you have large pages it might get quite confusing by addressing the different objects with numbers - for example document.forms[3].elements[17] or was it document.forms[2].elements[18]? To avoid this problem you can give unique names to the different objects. You can see in our HTML-code that we wrote for example:.........

Top