The Bits of JavaScript that Every Designer Needs to Know

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.

Bits of JavaScript

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:

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:

<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.

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:

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:

<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:

<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:

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

CSS

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:

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

Correct:

 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.

JavaScript Event

<button onClick="changeImage()">Change Image</button>

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.

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

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.

JavaScript Libraries

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!

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    True story – exactly the basics you need. Good article, Kayla. Keep it up.

    • Bali,
    • June 7, 2010
    / Reply

    Very sort artical….I think every designer know it.

    You should explain some advance technique.

      • jo,
      • June 8, 2010
      / Reply

      I dont agree with bali…Most of Designers are dont know javascrpt.they only copy and paste the js.so this type of tutorials helps to improve their coding skills…thanks….

    1. / Reply

      I think a lot of developers/people in general forget about the masses out there that dont neccessarily know every aspect of our profession and not everyone is on the same level.

      Starting from the basics is perfect.
      If you are way beyond the basics, articles like this were not for you anyway, so maybe you should look elsewhere.

      For me, this was a good article. Keep ’em coming!

    • tgpo,
    • June 7, 2010
    / Reply

    It’s all about events. Learn them and your design life will be much easier.

  2. / Reply

    It is very useful work .Thanks a lot for the posting…

  3. / Reply

    Important to point out that you set an element’s style using the .style attribute, but in a lot of browsers you can’t access styles set within .css or .

    Scripts like jQuery and MooTools use methods that get the ‘computed’ style.

  4. / Reply

    Yes, this article is basic…no problem with that. However, I think it falls a bit into that grey area of being too basic for someone who has any knowledge of JS, and perhaps not basic enough for someone who has no knowledge of JS.

    For example, what does the “document” in “document.getElementById(…)” mean? What happens if I don’t use that? Why is my JS breaking if I don’t know what this is doing and leave it out?

    It sounds silly, but way back in the day when I was just learning JS, I did stupid stuff like this all the time. It wasn’t until I read a bit about the DOM that I began to understand why things like this are important and, more importantly, how they open up the world of JS. At the end of the day, it’s better to know the right things up front, rather than just knowing how to get things to work. The latter will inevitably lead to confusion and frustration down the road.

    For all that said, I think it’s a good article–thanks for sharing!

  5. / Reply

    Thanks for the valuable info… Honestly, I’m really rubbish at Javascript :b

    Cheers!

  6. / Reply

    Nice roundup for beginners !!

    Guys keep trying , JS isn’t that hard , just put some effort

  7. / Reply

    Alert(). That’s probably the biggest asset in JS. Without it, the internet would be a vast barren land full of errors

    • anas,
    • June 14, 2010
    / Reply

    i think the style attribute is accessed differently depending on the browser version…

  8. / Reply

    Thanks! As a “copy & paste” JS user, I found your article easy to understand and tempting enough to make me want to learn more.

    • Jonny,
    • June 20, 2010
    / Reply

    hehe i just finished college with web designer degree, believe it or not no one told me that web designers need to learn java, interesting hun? well now i know,..it looks overwhelming for me,,

    • Alex,
    • June 26, 2010
    / Reply

    Hi Kayla,

    Thank you very much for your post, i’m a fresh web developer working with php and mysql, and wanted to start the basics on javascript so i can add an nice user interface.
    Your article gaved me the basisc steps into discovering javascript, really well and nice explained ! :)
    *Also helped me figure out how to improve an administration panel! Thanks!

    Best regards,
    Alex :)

  9. / Reply

    i think the style attribute is accessed differently depending on the browser version.

  10. / Reply

    Very Nicely presented article which covers basics right.

    • Dave,
    • August 25, 2010
    / Reply

    The only issue I have with the article is in the Events section… you violate one of the current web standards by putting JavaScript inside the HTML to trigger the event. That’s not the recommended “right way” to do it anymore.

    If you are learning JS, find tutorials that show you how to properly create functions and call them without adding markup to your HTML document. The beauty of JavaScript is that it can be so flexible. Example: instead of attaching an event to each of your buttons in order to open a link in a new window (image the code bloat with 10+ links that need this), you create a function that opens the window and let JavaScirpt apply it to all of your tags.

    If you want to invest some time into learning JavasScirpt, Jeffrey Way has some great JavaScript screencasts at nettuts: http://net.tutsplus.com/articles/web-roundups/who-needs-university-the-best-nettuts-screencast-training-courses/

  11. / Reply

    Thank you for this great article. Javascript is something I will be learning soon! This has helped me see the benefits of using it.

    • sewa,
    • October 3, 2011
    / Reply

    many convenience offered fair applications for designing all if the current lot do not know web design challenge java script .. I agree that the article is called a lot of help for web design..

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Elegant Themes Coupon Code: 20% discount

While most other WordPress theme sites charge per theme, Elegant Themes is an amazing deal as you pay just once for access to 87 premium WordPress themes and a…

WrapPixel Coupon – 25% Discount

If you’re looking for an HTML or PSD template for your next website, checkout the selection of templates at WrapPixel made for web developers, designers, and agencies. You can…