Basic JavaScript Tutorial

(element style manipulation)

Over the years I have taken oogles of information from the web development community. It's safe to say that I would not be where I am today if it wasn't for the generous sharing of knowledge done by those more intelligent than I. So, I feel that giving a little back to the community would be the karmic thing to do. So here it is...enjoy and feel free to email me if you have any issues with the scripts below....

Getting started

JavaScript is a powerful tool for web development that is applicable to even the most basic sites. Any time you roll over an image and it changes, this is most likely enabled by JavaScript. If you are going to use this tutorial I am assuming that you have a basic knowledge of programming HTML, CSS, and a basic understanding of JavaScript. My intention is not to teach you JavaScript, but supply a few of the building blocks to write more complex scripts. There are also a few nifty scripts that will make your user's experience that much bettwer.

To start with there are a few basic snippits of code that will make your scripts work with all types of browsers. Unfortunately CSS standards and document structures are not entirely similar from browser to browser so an important part of working with JavaScript is to determine which type of browser your user is viewing your page with.

Part one: Browser detection

Let us start by opening your favorite text editor, creating a new document, and saving it as a JavaScript file by naming it "filenameGoesHere.js". Now paste the text below into the first few lines of the document.

IS_DOM = (document.getElementById) ? true : false;
IS_IE = (document.all) ? true : false;
IS_IE50 = (navigator.userAgent.indexOf("IE 5.0") != -1);
IS_Mac = (navigator.appVersion.indexOf("Mac") != -1);
IS_IE5Mac = IS_IE && IS_Mac && IS_DOM;
var browserName = navigator.appName;

The code above just does some testing using browser specific syntax to determine which methods to use throughout your scripts. Once you have determined which browser the user is viewing your page with, you can write "if then" statements which will run different versions of the same code to ensure the same results for disperate browsers. Now we are ready to dig in and write some really neat scripts

Part two: find a layer

Often times when writing scripts, the goal will be to manipulate a CSS layers or other HTML elements. To do this, your script must be able to store the specific element of interest into a variable object. Once this is done you can access all of that layer's properties using the object (variable) where it has been stored. You have to be mindful when doing this because each browser's "document object model" is a little different, in other words the syntax in which you access the elements in your document via JavaScript. And this is where the code above comes into play.

You are going to create a function with the code below that can be accessed anywhere in HTML document that your newly created JavaScript file is attached to or the JavaScript file itself.

function findObj(sID){

var oObject; oObject = false;
if (IS_DOM) {
   if (document.getElementById(sID)) {
      oObject = document.getElementById(sID);
   }
} else if (IS_IE) {
   if (document.all[sID]) {
      oObject = document.all[sID];
   }
}
return oObject;

}

This code takes the variable "sID" (the id of your HTML level element) and uses the browser variables you created earlier in the file to determine how to find the element. The function then return a JavaScript object variable. This function alone doesn't do anything on the HTML level, but as you will see is an indespensable function when manipulating CSS layers and other HTML elements.

Notice that we only used two different browser variables. The others are not necessary in this simple function, but there are times when you need to know more about the browser your user is viewing your site with. So just keep those variables in your JavaScript library for the future, when you are writing more complex scripts.

Part three: Manipulating a DIV element

Now we are going to use the last function to do a simple manipulation of a <div> element. First lets create a simple HTML document and insert the following code into the body of the document.

<table width="400" border="0" cellspacing="2" cellpadding="1"><tr><td>
    <input type="checkbox" name="showLayer" value="sweetness" onclick="toggleObjDisplay('hiddenLayer')">
    Do It!!
</td><td>
    <div id="hiddenLayer" style="display:none;">
       <h3> look! the hiddden layer can be seen =) </h3>
    </div>
</td></tr></table>

Now you will need to attach the JavaScript file like it was a CSS style sheet. Instert this code into the <head> section of your HTML document:

<script src="jsLib.js" type="text/javascript"></script>

Save the file and return to your JavaScript file.

part four: The final Function

Now we are going to create the function that will show and hide the hidden layer in your HTML document. Add the following function below your "findObj" code.

function toggleObjDisplay(divID){

    var targetObj = findObj(divID);

    if(targetObj.style.display == 'none'){
        targetObj.style.display = 'block';
    }else{
        targetObj.style.display = 'none';
    }
}

Your HTML code uses this function in its "onClick" event handler. You could alternatively use "onMouseOut" or any other event for that matter. This function takes the id of the layer you want to manipulate, then passes that id to the findObj function which returns an object for you to work with. The function then uses that object to change the HTML level layer's "display" CSS property. If the layer is visible, it hides it, if hidden makes it visible.

part five: Try it out!

Ok, your ready to try it out =) As you can see, this could be used multiple places throughout your web sites to add a little more interactivity for your users. Enjoy and feel free to play around with the possibilities. You can change pretty much any simple CSS style with this script, not just the "display" property.Just replace "targetObj.display" to "targetObj.YourStylehere" where YourStyleHere is the style you want to change. Most JavaScript equivalents of CSS styles are the same, if the style is hyphenated just remove the - and capitalize the second word. Here is a short list of some of the commonly used CSS styles and their JavaScript equivalents to give you the idea of how it works:

Look for more toots (tutorials) coming soon...

Download the JavaScript file here → display.js