Objects

What are Objects?

Javascript is a client-side, object-oriented language. Client-side means the code is processed on the client's computer rather than the website server. Hence, it poses security risks if the user ventures to risky sites. However, Javascript can be disabled to minimize the risk. Object-oriented means you can execute events on objects or when objects are changed.

Each element on an HTML page is potentially an object. Javascript allows you to manipulate these objects. There are a couple of ways of manipulating objects. Here's the short and sweet:

• Your browser assigns a number to each object when the page is loaded. Hence, each image has a number, each p has a number, each link has a number, etc. You can reference this number to "do" something with the object. Different browsers handle this differently. Hence, you may see cross-browser incompatibility.
• You can assing an ID to each object and manipulate the object by referencing the ID. This is perhaps the easiest way and will be covered here.

How to Define and Reference Objects

Objects are defined with the id attribute. Any object can have an id. For example, if you want to identify a paragraph as the introduction, you add the id attribute to the HTML p tag:

HTML <p id="intro" class="intro">This is what my introductory paragraph looks like.</p>

Each id has to be unique. You cannot assign two or more objects the same id. Once the object is given an id, it can be referenced with the document.getElementById('myObject') method. This method works with Internet Explorer, Firefox, and Chrome, which covers the major broswers. Hence, this is the easiest way to reference an object.

How to Change CSS Class with Javascript

The following example will show you how Javascript works with the object id's to change the CSS class. Let's define the class called "intro" and a class called "hl" in a file called examples.css.

CSS - examples.css p.intro { font-family: Arial, Tahoma; font-size: 12pt; color: red; margin: 1px; padding: 1px; } p.hl { font-family: Arial, Tahoma; font-size: 12pt; color: blue; background: yellow; margin: 1px; padding: 1px; }

The following is what the style looks like so far (without the border):

Now, let's add Javascript to modify this object using its id. The method that changes the class name is document.getElementById(object).className. Hence, we define a function in file examples.js called highlight that will highlight this paragraph.

Javascript - examples.js function highlight(myObj) { document.getElementById(myObj).className = "hl"; }

Now, what event should trigger the highlight? We have events such as onfocus, onhover, onblur, onchange, onclick etc. Not all these event types work on all objects. We will use onclick event for this example. I will add this to the paragraph object.

HTML <p id="intro" class="intro" onclick="highlight('intro')">This is what my introductory paragraph looks like.</p>

And here is the result. Click to highlight the paragraph element.

Once the paragraph is highlighted, clicking on it again will not reset it, because our Javascript only highlights it. We haven't written how to reset it back. Let's modify the code with conditions to reset it.

Javascript - examples.js function highlight(myObj) { document.getElementById(myObj).className = "hl"; } function highlight_new(field) { var myObj = document.getElementById(field); if (myObj.className == "intro") { myObj.className = "hl"; } else { myObj.className = "intro"; } }

I have defined a variable to the object that we get using document.getElementById method. Once the variable is defined, then any property can be changed, such as className, without having to use document.getElementById each time. Note the if and else structure with the braces. Here is live example with the new function:

HTML <p id="intro2" class="intro" onclick="highlight_new('intro2')">This is what my introductory paragraph looks like.</p>

Note: I changed the id for the paragraph in the second example because each id has to be unique. You cannot have two objects with the same id.

How to Change Document Text

Javascript can let you dynamically change text of paragraph elements, span elements, a elements, etc. The following topic introduces child and node elements. I will skip the explanation on what these are except mention that we are concerned with changing the text of the first child which is the element itself.

Suppose you have defined a text paragraph for colors and you want to change the text with links.

HTML <span id="colors">My Color</span><br/> <a href="" onclick="changeValue('colors','Red');return false;">Change to Red</a> <a href="" onclick="changeValue('colors','Blue');return false;">Change to Blue</a> Javascript - examples.js function changeValue(myObj,text) { document.getElementById(myObj).firstChild.nodeValue = text; }

The function that makes this work is below. The arguments 'colors' and 'Red' are passed as variables to the function changeValue. The .firstChild attribute refers to the self element, namely the text within the span element named "colors". The .nodeValue property sets the text to the color.

Note: Note that many of Javascript methods, attributes, and properties are case-sensitive. Pay attention to this as you may not get the desired result if the case is not correct.

Now, you have actually learned how to change properties of self object by clicking on self object and changing an object by clicking on another object.

Toggling Visibility of Objects

You may wish to hide and show some elements. Javascript allows you to show and hide elements with the .style.display property.

HTML <div id="mydiv"> <p>My div that I want to hide and show.</p> </div> <a href="#" onclick="toggleVis('mydiv'); return false">Show/Hide</a> Javascript - examples.js function toggleVis(myObj) { var myel = document.getElementById(myObj); if (myel.style.display == "none") { myel.style.display = 'block'; } else { myel.style.display = 'none'; } }

There are many other manipulations that can be done with Javascript. See Brainjar.com for more on manipulating text.

Next: Form Manipulation