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?
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
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 ;)
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
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.
Mind if I borrow your "points" (with proper attribution)?
@James - ... plus non-destructive event subscription can be subtlety different across browsers.
@Milan - Awesome. I don't mind at all.
>the language.
>Yes, you.
Too funny man. That IS me ;-)
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. ;)
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.
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. ;)
Here is a good article that covers some details of #4: blogger.ziesemer.com/...
Hope that helps!