The Bits of JavaScript that Every Designer Needs to Know

Although not programmers, every web designer needs to know at least a bit of JavaScript to do decently in one's career. XHTML and CSS are great, but they can only do so much for a web page. Adding the interactivity and/or special effects that JavaScript can allow can not only enhance a design, but also lead to a more pleasant user experience.


This is not going to be an in-depth post on JavaScript, or anything like object-oriented material. Instead, this post will cover the basics of JavaScript that every designer must know to become better designers. In this post, we'll cover some JavaScript features (and trends) that focus more on user experience and design elements themselves.

Accessing HTML Elements with JavaScript

Once a web page is loaded in plain HTML, it is set. There's no more the browser can do with it to alter the image of a button, the style of a form, or the display of certain pieces of content. What the user sees is what the user gets.
However, JavaScript can play an excellent role in changing up the page after it's loaded. This means we can do image rollovers (changing the image after the first image has been loaded), and we can change the style of a form as the user interacts with it. We can also use JavaScript to do some even cooler things, like show or hide divs for tabbed content.

How to Change up the HTML

So how do you change the HTML of a page after it's loaded to do all the neat things we've mentioned above? First, we must access the element:

view source

print?

1	document.getElementById("elementid").HTMLATTRIBUTE = "value";

Once we've gotten a hold of a piece of HTML with JavaScript, we can change its attribute to whatever we like. Our main piece of code here is a built-in JavaScript function: getElementById(). With it, as long as we give any HTML element an id, we can grab it with our JavaScript code. Let's take a look at a more specific example below:

view source

print?

1	<img id="slideshowimage" src="flower.jpg" alt="An image of a flower." />

Above is some basic HTML showing an image, with an id of "sideshowimage". We can use the id to style it any way we want in our stylesheet, just as anyone would expect. We've also given our image an alt tag with an adequate description.

view source

print?

1	document.getElementById("slideshowimage").src = "bear.jpg";

Now, by using our JavaScript to grab out "slideshowimage" id element, we can change the source of our image. We can also change the alt tag to make it more relevant:

view source

print?

1	document.getElementById("slideshowimage").alt = "An image of a bear by the water.";

JavaScript has now altered our code, which with only HTML and CSS was set, to the following code:

view source

print?

1	<img id="slideshowimage" src="bear.jpg" alt="An image of a bear by the water." />

Easy enough right? Simple knowledge of this kind of JavaScript action is the start to making pages more dynamic.

Accessing CSS with JavaScript

Accessing CSS styles is very similar to getting and changing the HTML attributes via JavaScript. In fact, it technically is changing an HTML attribute itself: the style attribute:

view source

print?

1	<img src="image.gif" alt="An Image" id="myImage" style="padding: 5px; background: #fff; border: 1px solid #ccc;" />

As anyone can guess, we just place style for the HTML attribute when accessing the image:

view source

print?

1	document.getElementById("elementid").style.STYLEATTRIBUTE = "value";

Because the style attribute in HTML can hold so many different values, we must get a bit more specific with our JavaScript code. We have to include "style" then the name of the specific CSS attribute afterwards. To clarify, below are the correct and incorrect ways of changing up the CSS:
Incorrect:

view source

print?

1	document.getElementById("elementid").style = "padding: 5px; background: #fff; border: 1px solid #ccc;";

Correct:

view source

print?

1	document.getElementById("elementid").style.padding = "10px"; document.getElementById("elementid").style.backgroundColor = "#aaa"; document.getElementById("elementid").style.border = "1px solid #555";

One more thing to point out is that CSS styles can vary a bit from JavaScript's style syntax. For example, notice that in JavaScript, to change the background color we had to use backgroundColor. In CSS, we would use background or background-color. For the most part JavaScript abides by camelCase (first word lower case, and all remaining words capitalized, no spaces/dashes/underscores). However, if any others have you stumped there are plenty of resources online.

Events: Making it All Actually Happen

Just as the word implies, JavaScript events make things happen. We've covered so far the syntax for how to alter code, but we currently have no way to trigger it. Events are what do this.
The onClick event is one of the more popular JavaScript events. It can be applied to any HTML element, and when the described event happens — when the element is clicked — the event inside the quotes is triggered.

view source

print?

1	<button onClick="changeImage()">Change Imagebutton>

The code above creates a basic HTML button, and uses the onClick attribute for a JavaScript event. When the user clicks the button, the changeImage() function is called.

view source

print?

1	<button onClick="this.style.border = '2px solid #555'">Change Borderbutton>

We can also put our JavaScript code directly in our event, without going to an external function. Note that we had to change our double quotes into single quotes within our JavaScript code, to keep our HTML from getting confused on when the attribute begins and ends. We can also use the "this" keyword to access the element we're currently in — no need to grab an element by its ID if we're already there.

Other Important and Commonly-Used Events

onLoad — Used in the tag of an HTML page. The event triggers when the page is loaded. Example: (Calls the sayHello() function right when the page is loaded. Will re-trigger on every Refresh.)
onBlur — Triggers when an element is clicked, and then clicked off. A common use of this is in forms for validation. If a user clicked on field, then clicks away, onBlur can run a validation function or any other piece of JavaScript code. Basically, onBlur triggers when something is clicked away from.
onFocus — The opposite of onBlur. Triggers when an element that can be focused is clicked. For example, a form input field.
onMouseDown, onMouseUp, onMouseOut, onMouseOver — All used with the interaction of the mouse. This is usually how image rollovers are created. When the mouse moves over an image - onMouseOver, the image changes, and then changes again when it moves away from the image - onMouseOut. onMouseDown and onMouseUp are similar, but with actual clicks of the mouse.
Check out Events and Event Handlers for more information on events and a more descriptive list of available events to use.

JavaScript Libraries

While JavaScript can do a lot on its own, libraries are increasing in popularity because they can provide even more features. Of course, what designers like most, is that these new libraries can provide a lot more in terms of design.

Many designers just jump into learning JavaScript through a library like jQuery or Mootools. However, a step-by-step guide to easy jQuery tabs or something similar will not help anyone as a designer long-term. It is still essential to learn the basics of plain JavaScript before jumping into using a JavaScript library.
While learning JavaScript is a great start, any library requires its own learning curve and has its own syntax or plugins. For a list of all JavaScript libraries, and even features organized by special features and effects, check out the JavaScript Libraries website. Despite the many options for JavaScript libraries, there are two that are most popular: jQuery and Mootools.
Learning how to work with these two, or any other libraries, is a great way to expand JavaScript's capabilities. However, that is for another post. In the meantime, be sure to check out at least the jQuery and Mootools websites.

Conclusion

Anyone can see that JavaScript can be a powerful force to adding interaction and variation to web pages. Yet, even with all we've covered above, we've only touched the surface of what JavaScript can really do — for either developers or designers.
If you'd like to get more advanced, be sure to check out what AJAX, along with JavaScript has to offer, or just get into some more advanced JavaScript topics, from arrays to object-oriented programming. Also be sure to check out some of the resources we have listed above to find out more. Your web applications will be able to go much further with just a bit more learning!