If you are involved with web design for a while, and if you don’t program, you may at some point wonder if you’d like to program. Some designers feel frustrated that they can’t achieve certain effects without relying on a programmer. Many such designers would feel empowered if they knew how to program. Some hold back from learning programming because they think it will be too hard. Is it hard? Sure, but then so is CSS. My feeling is that if you can get CSS you can probably get most other forms of web programming. And, anwyway, CSS 3 is going to allow “conditional logic” so even those designers who merely hope to keep up with CSS are going to become programmers in the end.

Below I’m going to talk about Javascript and some very basic tricks you can do on a web page. But first, I need to convey certain very basic programming concepts, such as what is a variable.

A variable is like a container. You put stuff into it, and then later you get stuff out of it. Most of the time you use the equal sign to put stuff into a variable. You can make up almost any word that you want and use that as the name of your variable. The only restriction on variable names is that you must avoid using one of the magic words that Javascript itself uses (words like Date, Math, while).

This is how you would create a variable called howManyHats and give it a value of 2:

howManyHats = 2

howManyHats is a variable, meaning its value can change over time. If we do this, then we change the value of howManyHats to 4:

howManyHats = 2 + 2

You can now treat howManyHats as if it is the number 4, so this next line reads as if we are saying “2 + 4″ :

howManyHats = 2 + howManyHats

Now howManyHats has a value of 6.

Variables can hold values other than numbers. They can hold a string of characters:

colorOfHome = “Blue”

colorOfHome now has a value of “Blue.” You can see this by using the Javascript command “alert()”, which opens a dialog box on your screen, and shows you whatever you’ve put inside of its parentheses:

alert(colorOfHome)

If you did all this on a webpage you’d get a dialog box that opens and says “Blue”.

Okay, but all that is boring stuff. Here is where it starts to get interesting. Variables can hold more than numbers and strings of characters. They can also hold references to elements on your webpage. And when you have a reference to an element on your webpage, you can change any of its CSS values.

Suppose you have a div like this:

<div id=”descriptions_of_homes”>
1234 Beech Street, Larksville, VA 22909 - a beautiful old colonial house
</div>

Javascript has a special, magic command that will get a reference to any element on a web page. We will create a new variable and call it descriptionDiv and store in it a reference to the div above:

descriptionDiv = document.getElementById(”descriptions_of_homes”)

Now we could make this div disappear, by changing the value of its CSS “display”: property:

descriptionDiv.style.display = “none”

The above line may seem a bit arbitrary at first. Essentially, the browser is keeping track of every element on the page, and also all the style information associated with those elements. You can use Javascript to change those CSS values. Once you have a reference to an element, you can alter any aspect of it.

Style information is just one major category of information that the browser is keeping track of, regarding each element. There is also the text and HTML that is inside of each element. For instance, if you wanted to change the text in the div above, now that you’ve got a reference to it, you can change its inner text like this:

descriptionDiv.innerHTML = “804 Avon St, Charlottesville, VA 22902 - a large, 90 year old house”

The browser now acts as if the div had been written this way:

<div id=”descriptions_of_homes”>
804 Avon St, Charlottesville, VA 22902 - a large, 90 year old house
</div>

So innerHTML and style are two major categories of information that the browser keeps track for every element on the page, and you can alter either through Javascript. The style category of information is broken down into various sub-categories, such as display, padding, margin, float, etc - all the CSS properties. If you want to make this div visible again and give it a red background, you’d do something like this:

descriptionDiv.style.display = “block”
descriptionDiv.style.backgroundColor = “#aa0000″

Most of the time, we want some Javascript code to happen because of something the visitor to our website has done. For instance, we might want to wait till the user clicks on a button, and then we want some Javascript code to happen. We might, for instance, want a div to become visible when the visitor has their mouse over an image, and then we want the same div to disappear when the visitor is no longer moused over the image. We could set an action to occur by writing those actions into the image tag, but we’d have to first understand what a “function” is in Javascript. I’ll explain that in one second, but just so you know how we are going to use these actions (called functions) here is what the image tag would look like:

<img src=”beautifulHome.jpg” onMouseOver=”showDiv();” onMouseOut=”hideDiv();” >

What the above image tag means is that whenever the visitor to your website moves their mouse cursor over your image, then the action known as “showDiv” should occur, and whenever the visitor moves their mouse cursor out of your image, then the action known as “hideDiv” should occur.

How are these actions created? In the head section of your webpage, you would put this code:

<script type=”text/javascript”>
function showDiv() {
    descriptionDiv = document.getElementById(”descriptions_of_homes”)
    descriptionDiv.style.display = “block”
}

function hideDiv() {
    descriptionDiv = document.getElementById(”descriptions_of_homes”)
    descriptionDiv.style.display = “none”
}
</script>

So what is happening is, up in the head of your web page, we are creating a script block, and inside of that script block, we are creating some named actions by using the “function” keyword. The “function” keyword has the magic power to create blocks of Javascript code, and allows us to name these blocks. These blocks of Javascript code don’t actually run when we first define them, instead, the code inside these blocks only runs if we later call these blocks of code from the web page itself. And how is that done? Well, we’ve already seen how to trigger these blocks of code when we created our image tag:

<img src=”beautifulHome.jpg” onMouseOver=”showDiv();” onMouseOut=”hideDiv();” >

Are you able to follow this? I’d suggest that if you’re able to follow me so far, then you too can be a computer programmer. You can take the code here and use it on your own webpage. If you’d like to customize this code, discovering how to do so would be one way to begin to understand more about Javascript.

Some caveats: I’m leaving out a lot for the sake of simplicity, but the above code seems to me like a good starting point. I choose to use Javascript for this post, but I could have used PHP, Action Script, Cold Fusion, or any other language to give you a sense of web programming. I choose Javascript only because I’m addressing myself to web designers and I thought they might be able to see the most immediate potential in being able to write their own Javascript code.

If you’ve the slightest interest in learning more, there are many good tutorials on the web, and I’d like also suggest the new book by Shelley Powers.