Signs That Your JavaScript Skills Need Updating

Wednesday, March 18, 2009

JavaScript has made some improvements in its “state of the art” over the last several years, despite your best attempts to ignore the language.

Yes, you.

The language hasn’t changed, but the tools, practices, runtimes, and general body of knowledge have all grown and matured. Yes, it’s still a dynamic language, and we all know that you think dynamic languages are more dangerous than a loaded gun, but you can’t ignore the language any longer. JavaScript is everywhere. Why, just the other day I turned on “Who Wants To Be A Millionaire?”, and what did I see?

javascript millionaire

Here are some signs that you might be behind the times.

1. If you still mix JavaScript and markup …

<head>
    <script type="text/javascript">
        function doStuff() {
            alert("boo");
        }    
    </script>
</head>

<html>
 <body onload="doStuff();">
    ...
 </body> 
</html>

… you should read up about unobtrusive JavaScript. In addition to the performance benefits of keeping script in a .js file that a browser can cache, you also separate your presentation concerns from script behavior and allow yourself to focus on writing better script.

2. If you still use document.getElementById and assign functions to onclick …

var header = document.getElementById("header");
header.onclick = headerClick;

… then you really need to start using one or more JavaScript libraries. There are many great libraries available – just look around. They help isolate you from variations in the browser environments, increase your productivity, and allow you to write more maintainable code.

Other obsolete patterns:

3. Using document.all or document.write

4. Using global variables and global functions

5. Rolling your own browser detection code

6. Debugging with alert messages

Once you learn modern JavaScript idioms and tools, you’ll never look back at these old anti-patterns.


Comments
Simon Segal Wednesday, March 18, 2009
Scott

That is a disaster for me! I have made a career out of actively avoiding Javascript. Whilst I don't hate dynamic languages (I'm big into IronRuby right now), I am essentially a Desktop / Service Oriented kind of guy and asp.net just isn't my thing. I am however buoyed by Silverlight's entrance into the browser development space. Are you telling me that I cant away anymore without getting deeply into Javascript? Or is this post best directed to the core web developer? If I cant continue to ignore Javascript, then you may as well amputate one of my limbs. BTW, in most multiple choice tests, you can usually immediately eliminate two of the four questions as being untenable and I know which one would have been my first choice ;)
Tom Hudson Wednesday, March 18, 2009
Very well said!

The only thing for me: while I agree that JavaScript libraries are a great thing - they aren't ALWAYS necessary. I quite often find myself writing very small bits of JavaScript that need to be as fast as possible. Using a library in such circumstances seems unnecessary - getElementById() still has a place in my heart :-P
James Wednesday, March 18, 2009
I don't agree with #2. You mention that "[libraries] help isolate you from variations in the browser environments" - while this may be true I don't see how it's applicable to your example. These fancy libraries still use the same rudimentary methods behind the scenes.
J&amp;#233;r&amp;#233;mie Wednesday, March 18, 2009
Hey ! But it's our french “Who Wants To Be A Millionaire?" presenter !
scott Wednesday, March 18, 2009
@Simon - Yes, this was mostly aimed at the core web developer. I think Silverlight is fantastic, btw, but it's still not applicable to every application. You know, I never did say what the correct answer was to the millionaire question :)
James Brechtel Wednesday, March 18, 2009
@James

Not really. getElementById may be called for doing ID lookups, but jQuery for instance lets you find elements in a much more flexible manner (using CSS style selectors) and let you operate on many at once.

Also, in the case of 'element.onclick=', the fancy libraries typically use addListener which lets you have multiple event handlers for one event. I think there are other benefits to addListener over setting the event explicitly, but I don't know them off the top of my head.
Milan Negovan Wednesday, March 18, 2009
Dude, wicked! This is exactly what I plan to talk about at the UG meeting next month: http://www.lidotnetusersgroup.com

Mind if I borrow your "points" (with proper attribution)?
scott Wednesday, March 18, 2009
@Jérémie - yes, this is the French version of the show :)

@James - ... plus non-destructive event subscription can be subtlety different across browsers.

@Milan - Awesome. I don't mind at all.
&amp;#216;yvind Wednesday, March 18, 2009
So, now I see six signs and have a solution to just one of them.
scott Wednesday, March 18, 2009
@Øyvind You are looking for the spoon? :)
Brad Mead Thursday, March 19, 2009
>despite your best attempts to ignore
>the language.

>Yes, you.

Too funny man. That IS me ;-)
&amp;#216;yvind Neshaug Saturday, March 21, 2009
@Scott

Nah, just wanted you to post more of your solution / ideas to your signs ;)

1: This one is explained and okay.
2: This one is also partially explained since you link to the unobtrusive blog. I know YUI, Extjs and jQuery, so I could use one of them to achieve it.
3: Never used it to anything but experimental code. So why is it used what do you do to solve it?
4: I'm clear here as well, came from Java straight to YUI namespace stuff.
5: Using the libraries for this.
6: Using firebug to debug in firefox, but what would you use to debug in other browsers? The YUI logger panel?

I liked the blog topic and the content, just that I felt like calling you on the phone after I read it. ;)
scott Sunday, March 22, 2009
@Øyvind -

Let me be lazy again and point to some links :)

#3: www.sitepoint.com/...

http://docs.jquery.com/Attributes/html#val

#6: IE8 has a decent script debugger, and Visual Studio isn't bad in 2008 (but could be much better). The Chrome debugger is still primitive - I'm sure someone will eventually step up with a good plug-in. In general I stick to Firebug then VS2008.

I don't have much experience with YUI, unfortunately.


Justin Kohnen Tuesday, March 24, 2009
Scott-

I'm an avid reader, and I love your posts.

However:

I'm a little fuzzy on number 4. I think I know what you're referring to, but what is a better way to implement functions and variables?

I'd find it more helpful if you could give examples of the better way of doing things. Telling me I'm doing it wrong only gets me half way there. ;)

scott Tuesday, March 24, 2009
@Justin Thanks! I'm glad you enjoy it.

Here is a good article that covers some details of #4: blogger.ziesemer.com/...

Hope that helps!
&amp;#216;yvind Wednesday, March 25, 2009
Thanks for the tips scott! :)
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!