Learning Javascript

Like many front end developers I've come to Javascript late. Of course I could go and grab one of the many Javascript libraries out there. But I'm making an effort to learn Javascript. Thankfully it isn't as hard as you might think.

I'm going to be writing a series of articles in which I outline my experiences of learning Javascript. I am not an expert and specifically I'm a beginner with a good background in standards based CSS and XHTML who wants to learn modern Javascript. So if you don't understand something leave a comment, and if you are an expert then please chip in. Hopefully this will help others to start learning these skills.

Getting the philosophy

Just like Web Standards for XHTML and CSS, learning Javascript is much easier if you grasp some underlying principles. The first is Graceful Degradation. This means that whilst you use all of the great things that Javascript brings it is important that the site still functions on older browsers and / or with certain options turned off. From an XHTML and CSS stance an example of this would be adding alt tags. If images are turned off then users get the alt text.

This goes hand in hand with Progressive Enhancement. Progressive Enhancement is meant to sound the death of Graceful Degradation but in fact the two are very similar. Progressive Enhancement means that users with modern, capable browsers get a better and more rich experience than users on older browsers. So someone with a really old browser will get a sparce HTML page whilst someone with the latest browser will get all the bells and whistles. Progressive Enhancement is comfortable with that, serving a richer experience to users who can handle it.

What both of these philosophies have in common is the separation of markup from style and keeping Javascript out of the markup. Starting with valid, semantic and clean markup will mean you can follow either route.

For me Graceful Degradation is a half empty glass, whilst Progressive Enhancement is half full. They are both similar in what they are looking to achieve - a working site for all users.

Old methods - Javascript in the document

At this point you might want to view the example or download the source code

This might seem very familiar to front end developers who have made the transition to CSS. Historically Javascript was placed in the markup, just like font tags. Javascript was in between the body tags, it was in links, it was in onclick events.

<a onclick="oldJS(); return false;" href="#">old school javascript</a>
<a onclick="javascript: oldJS(); return false;" href="#">more old school javascript</a>
<a href="javascript: oldJS();">yet more old school javascript</a> 

This is bad for a number of reasons: accessibility, browser support, maintenance and the fact that it causes real problems when javascript is turned off. It can cause search engine spiders to stop indexing a page too if there are javascript errors.

The modern method - use the DOM

If you are a CSS coder then you are probably familiar with the DOM. This is the Document Object Model. You probably use it to create rules and access elements within the document for your CSS. The good news is that if you understand it Javascript gives you more flexibility to find, create, amend and delete elements within your document. And all without going back to the server or using an AJAX call. If you don't understand it there is a short tutorial from a CSS perspective available here.

Using the DOM we can find a link with the id "good-js" and do something with it. In this case we will attach an onclick event to it.

function modernJS() {
    
    // Check the browser supports getElementById so we can find our link
    if(!document.getElementById) { return; }
    
    // Find the trigger link with the DOM. This looks for the id good-js
    var goodJs = document.getElementById("good-js");
    
    // If it isn't there return
    if (!goodJs) { return; }
    
    // We've made it here so a link with with the id good-js exists. Wait for onclick and do something
    goodJs.onclick = function()
        {
        alert("That's better isn't it. No need to make the markup dirty!");
        return false;
        }
} 

Attaching the function to onload

Adding the function to the onload event is basically getting it ready for when the user triggers it with the event. In this case it is an onclick, but it needs to be ready when the page loads.

Traditionallly window.onload was used but this wasn't perfect so a number of onload scripts have been created. Most Javascript libraries have scripts that handle onload. Simon Willison wrote a short script that seems to do the trick.

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(modernJS); 

You will see that we have asked the function to load in the modernJS function when the page loads. So everything is ready.

The markup

Using the DOM and onload we can keep our markup clean and lean. It also means that if Javascript is turned off then the user is taken through to alternative content rather going nowhere.

<a id="good-js" href="non_js_content.html">The modern way of doing it</a> 

So when a user with Javascript clicks the link the modernJS function is fired. If they don't have Javascript they will be taken to another page. So it is good for all users, search engines and accessibility. We have separated our markup and Javascript and hopefully you can see why this is important.

If you've made it this far you can download the source code or view the example

Join the fun

OK - you could go out and grab a Javascript library. But isn't it time you started learning what was really going on? If you disagree with anything written here please leave a comment. This is meant to help people learn.

Comments

Clive Walker Mar 15 2007

I am in a similar position to you in that I have come to JS late. You may have read it but DOM Scripting by Jeremy Keith is a good read. It’s aimed at CSS designers. There’s also a follow-up book called Bulletproof Ajax. Just the thing for a clunkhead like me!

I’m afraid I have used JS libraries but this is mainly because time is usually limited. Clients do not want to pay for me to learn something. They want a good solution, usually by yestereday. JQuery is my current favourite JS library because it’s quite small.

David Mar 27 2007

I like this method shown here a lot. But I am a bit confused on something. See by adding the onclick function to the link you can specify what ID you want. I’m sure you understand what I am saying, but in this example you use the function modernJS. So if I believe correctly you can only use that function once for the good-js ID or you would have to add every ID you want into the script. Do you get what I’m trying to say. Is there another way around this? Good work!

George Ornbo Mar 27 2007

@David - You can use the DOM to attach functions to events on multiple elements. The following selects all links within a div called “my-div” and fires a function onclick for any of the links

var myDiv = document.getElementById("my-div");
// Get all the links within my-div
var myLinks = myDiv.getElementsByTagName("a");
// Loop through them and attach a function to the onclick
for ( var i=0; i < myLinks.length; i++) {
   myLinks[i].onclick = function() {
   // Whatever you want to happen onclick here
} 

The DOM is very powerful in navigating a document so you can pretty much target anything within your document and attach something to it.

Jeremy Kirk Mar 28 2007

Very nice! This article is written very well, and is understandable for the common web designer. In my opinion, it is better articulated than many hotly marketed JavaScript books. If I were asked to recommend a book, however, I would recommend the book, “JavaScript Demystified”. It seems to explain things easily as well.

Lately, I have also been focusing on JS. I am finally leaving the mindset that JavaScript is doomed to complicated browser differences. Object testing is a great idea, and it’s definitely more reliable than browser detection. Apparently the dHTML days are long gone and the sun is starting to shine on JavaScript once again (but in a better standards-based atmosphere). Where have I been? I find it interesting that (if coded correctly) JS can be in it’s own layer, and can degrade gracefully without the <noscript> tags.

Thanks for the article. As always they are very useful.

Chinese SEO Services May 23 2008