The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.
[Easy as Pie] Unobtrusive JavaScript
phazm.com — If you are just learning JavaScript, or have been coding JavaScript obtrusively, this is a great article to get you started on the 'best practices' way of coding JavaScript -- Unobtrusively. FTA: "...This post is the first in a continuing series of DIY tutorials, which aims to make things as simple as possible..."
ChapStik- 757 diggs
- digg it
- cristiv, on 12/17/2007, -14/+4Thanks for the article, I enjoyed it.
- diidiiidiid, on 12/17/2007, -10/+7that tutorial was a piece of cake
- ChapStik, on 12/17/2007, -4/+6Zing!
- jjustin01, on 12/17/2007, -3/+1No...it's BAM!!!
- NinjaBoy, on 12/17/2007, -0/+9The cake is a lie.
- ChapStik, on 12/17/2007, -4/+6Zing!
- Narcism, on 12/17/2007, -12/+9Who has.. javascript disabled?
- joelito, on 12/17/2007, -2/+16the most popular screen readers used by blind users don't like javascript very much. And of course, there's paranoid users that disable javascript for "security" reasons.
- hyperair, on 12/17/2007, -5/+2"Security" indeed. Gotta be the stupidest idea I've ever heard.
- RoboDonut, on 12/17/2007, -0/+3Not necessarily security. Some people just don't like websites that decide to resize/move your browser window without reason, or this "Web 2.0" nonsense with it's crazy "DHTML"/Ajax.
- hifiDesign, on 12/17/2007, -0/+10Hmmm... the same people who create their own default style sheets... Geeks!
- pwim, on 12/17/2007, -2/+5Not all devices support javascript. For instance if I'm browsing the web using my phone.
- commentbot, on 12/17/2007, -2/+5I'm using Opera Mini and it DOES have Javascript enabled by default.
- maexus, on 12/17/2007, -0/+7Do all phones use Opera Mini?
- hwn67, on 01/11/2008, -0/+1My N95 uses a safari clone. No problems there...
- commentbot, on 12/17/2007, -2/+5I'm using Opera Mini and it DOES have Javascript enabled by default.
- chedabob, on 12/17/2007, -3/+12I have noscript installed, which disables it on all sites except ones that I trust.
- hyperair, on 12/17/2007, -4/+8And that makes your browser more secure? Don't make me laugh. When the first Javascript virus emerges, please notify me.
- Tippis, on 12/17/2007, -0/+11Actually, yes, it does, not because JS itself can do any damage to your system (unless the interpreter is bugged to hell), but it can quite easily launch other things that *will* hurt you, and do so without you knowing it.
Killing JS also kills most cross-scripting attacks and other attempts at ID- and session hijacking. - chedabob, on 12/17/2007, -1/+3I don't just use it for the javascript protection. There's only so much ABP can do, NoScript handles the rest.
- Terr01, on 12/18/2007, -0/+1Well, there's no technical reason that successful XSS attacks could not let an attacker make your browser transfer money to him from your online banking site of choice.
- Tippis, on 12/17/2007, -0/+11Actually, yes, it does, not because JS itself can do any damage to your system (unless the interpreter is bugged to hell), but it can quite easily launch other things that *will* hurt you, and do so without you knowing it.
- InsaneMachine, on 12/17/2007, -1/+2I have the same here, as a bonus, it blocks most of the ads as well, so I don't have to add lots of adblock filters. Also use it one or two sites that are like: "oh it seems you right clicked, can't let you do that dave"
- NinjaBass, on 12/17/2007, -0/+1Just run Linux. What's a virus?
- MeatBiProduct, on 12/17/2007, -2/+1I'll tell you what a virus is if you tell me what a rootkit is and which is worse to have.
- hyperair, on 12/17/2007, -4/+8And that makes your browser more secure? Don't make me laugh. When the first Javascript virus emerges, please notify me.
- xutopia, on 12/17/2007, -0/+5web crawlers
- joelito, on 12/17/2007, -2/+16the most popular screen readers used by blind users don't like javascript very much. And of course, there's paranoid users that disable javascript for "security" reasons.
- Zaggynl, on 12/17/2007, -4/+8http://www.phazm.com/images/dontpanic.png
ahaha - VidaGeek, on 12/17/2007, -5/+0Example borked in FireFox?
- ChapStik, on 12/17/2007, -0/+2shouldn't be? You have noscript on?
- jjustin01, on 12/17/2007, -3/+0I have the same issue with Firefox. And yes, I have javascript on.
Nothing better then a javascript tutorial site that is not cross-browser friendly. LOL!
- IllBeBack, on 12/17/2007, -1/+3Mmmmmmmmmmmm pie..............
- TofuMatt, on 12/17/2007, -7/+0A handy tutorial for JS newbies. It's really important to teach web developers that your site can't rely on JS to function (unless it's Google Maps) -- letting them know how to build accessible JavaScript is awesome.
At least until we all have iPhones and iPod Touches ;) - krnldmp, on 12/17/2007, -13/+1Javascript is lard.
- brownthaclown, on 12/17/2007, -12/+2I'm trying to get this to work.
window.onload = function()
{ uncool_digger = document.getElementsByTagName("uncool_diggers");
for(i=0;i- j3one, on 12/17/2007, -1/+23fail
- RoboDonut, on 12/17/2007, -0/+1*****
- jjustin01, on 12/17/2007, -2/+9What is really entertaining about a lot of coding "best practices", is they change from one person to the next and it always depends on who is giving the lecture. Last month, another "best practices" site said to not use handlers unless they were needed. This site is says to use them just to simply add an onclick event to your anchor tags.
What if I have 100 links on my page and I want to add an onclick event to just two of the links? This site makes it sound as if his/her methods of "best practices" would work the best when in fact his code would be more inefficient.
And yes, while I do agree that separating the layers of the application from one another is a great "best practice" sometimes, from an application performance stand point, it doesn't always work out that way.
Of course, this is always debatable since no one ever seems to agree, and of course I could always be wrong (depending on who replies).- emehrkay, on 12/17/2007, -0/+8If you have 100 links and you only want to apply action to two of them, you should apply some sort of hook to those two elements (rel, title, class, etc) and have the JS in the onload block select based on that hook and apply the elements to the links in that array...
- jjustin01, on 12/17/2007, -2/+1but, again, this adds unnecessary overhead to your application because now your application (which is essentially running on the client's machine power) is having to process an array consisting of 100 URLs in order to add onclick handler to just two elements. I don't see how this is more efficient then adding the onlick handler directly to those elements if you know which ones elements they will be each time.
Now, if you're dealing a dynamic environment where it may not be the same two elements each time, I agree with you, but that's not what I am talking about.- emehrkay, on 12/17/2007, -1/+3I dont think that the argument is what is faster, but what is accessible/unobtrusive.
While having inline JS is easier to code, less of a memory footprint, and may execute the code faster (article is on ajaxian.com somwhere), in most cases it is seen as a thing of the past. If JS is turned off, I may still want my stuff to work, does not - maexus, on 12/17/2007, -0/+2That's like saying it's unnecessary overhead to have class and id's assigned and just use inline CSS. Seperate content, style and behaviour.
- jjustin01, on 12/17/2007, -0/+2maexus, you're missing the point. This has nothing to do with assigning a structured format to your code. This is about running event handlers on an unnecessary number of elements when you know specifically which two elements it will be.
This is especially true in cases where there will be large amount interactive JavaScript taking place and will very quickly hog memory. I realize the argument from your guys' standpoint. I do agree that is very critical to separate the layers of the application. And I am not suggesting inline code anywhere. What I am suggesting, however, is element specific code.
An example. I have to two divs I want to capture an onlick for. Rather then looping through the array of elements for every freaking DIV tag in the DOM, I could target those specific DIV tags by the ID's and capture the onclick them specifically. You could still do this through a JS file and not have any inline code whatsoever. It would be more efficient then looping through an entire array of a 100 or more DIV, A, etc. tags within the DOM. That is all I am saying. No inline code anywhere.
Does that make more sense? - MeatBiProduct, on 12/17/2007, -0/+1Processing power on the client is free - processing power on your server is not.
- jjustin01, on 12/17/2007, -0/+1The processing power on the client is not free if it causes people to have bad user experiences with your website and you lose traffic and that loss of traffic equates to loss of revenue.
- emehrkay, on 12/17/2007, -0/+1of course it isnt free. As an example; Digg eats up so much memory because of the way they have their js setup
- MeatBiProduct, on 12/19/2007, -0/+1i think sites like youtube, digg, myspace, facebook, and more prove you wrong. They are all heavily JS'd out.
The point of a rich user experience isn't providing the user with bad experiences. Done properly you can handle tons of work client side and save your server for what its meant to do - provide data not process templates.
- emehrkay, on 12/17/2007, -1/+3I dont think that the argument is what is faster, but what is accessible/unobtrusive.
- jjustin01, on 12/17/2007, -2/+1but, again, this adds unnecessary overhead to your application because now your application (which is essentially running on the client's machine power) is having to process an array consisting of 100 URLs in order to add onclick handler to just two elements. I don't see how this is more efficient then adding the onlick handler directly to those elements if you know which ones elements they will be each time.
- scottschiller, on 12/18/2007, -0/+1Even simpler - use an "event delegation"-style approach. Christian Heilmann (Y! dude) has a blog post with some good info on this. Basically, you watch onclick() events at a high level (on the parent element of the 100 links you want, or the body etc.) Then when onclick() fires, you can check to see if the element is a target you're interested in (className matches what you want, or the node is a child of the parent you're targeting, etc.) This way, you only have one event handler and far less resources consumed - particularly for IE.
Chris also happens to have a rather funny-sounding domain name, bonus geek points.
http://www.wait-till-i.com/2006/09/24/event-handli ...
- emehrkay, on 12/17/2007, -0/+8If you have 100 links and you only want to apply action to two of them, you should apply some sort of hook to those two elements (rel, title, class, etc) and have the JS in the onload block select based on that hook and apply the elements to the links in that array...
- Frecklefoot, on 12/17/2007, -16/+2My question is, why are people using JavaScript. I know it is used for many cool things, including using the Google Maps API. But I question why. From my experience, it is one of the poorest scripting systems ever developed and incompatible as can be. It's worse than VB. Why write an article about best practices for an API that is the poster child for really bad languages?
- Tippis, on 12/17/2007, -1/+7Because JavaScript has an undeservedly bad reputation -- the problem isn't with the language, but with the immensely inconsistent implementations across browsers. As a scription language (at least in the later versions, and most certainly in v2.0), it blows quite a few "real" languages out of the water in terms of what it can do.
The language is excellent -- the reputation (due to a history of flawed implementations and a, frankly, idiotic choice of name) is apalling. - flytronix, on 12/17/2007, -5/+3Java is worse.
- Thisistooboring, on 12/17/2007, -0/+10Wait... VB is a scripting language? Ohhh, you mean VBScript... the bastard child of the most popular programming language in existence.
From your experience... I'd be willing to bet that "your experience" is a high school computer science class.
- Tippis, on 12/17/2007, -1/+7Because JavaScript has an undeservedly bad reputation -- the problem isn't with the language, but with the immensely inconsistent implementations across browsers. As a scription language (at least in the later versions, and most certainly in v2.0), it blows quite a few "real" languages out of the water in terms of what it can do.
- smergs, on 12/17/2007, -3/+4Dugg. Started a new job recently and I know nothing about JavaScript and they use it a little here. I'm sure it will be a good read for me since I've never touched it.
- jschrab, on 12/17/2007, -1/+11Please look into jQuery, Mootools and/or Prototype as soon as possible. Having yet another code base running around for onDOMready event handling won't help you.
The example here would be very brief with Mootools (for example - jQuery or Prototype would be just as brief, I imagine) ...
window.addEvent('domready', function() {
$$('#mylinks a').addEvent('click',function() { alert(this.title); return false; });
});- MeatBiProduct, on 12/17/2007, -1/+2please learn javascript before using a framework. The Javascript Definitive Guides from Oreilly are a good start.
Learning a framework first and javascript second is not.
- MeatBiProduct, on 12/17/2007, -1/+2please learn javascript before using a framework. The Javascript Definitive Guides from Oreilly are a good start.
- jschrab, on 12/17/2007, -1/+11Please look into jQuery, Mootools and/or Prototype as soon as possible. Having yet another code base running around for onDOMready event handling won't help you.
- PolarZoe, on 12/17/2007, -2/+13jQyuery, seriously, this will make your javascript life much easier.
Has features for onclick and ondomload and stuff.- darkvad0r, on 12/17/2007, -5/+1Or if you're a java developer, just use Google Web Toolkit (and worry no more about browser quirks).
- emehrkay, on 12/17/2007, -1/+3same could be said for just about any JS library
- maexus, on 12/17/2007, -1/+2I love jQuery but it's a rocky road depending on frameworks vs learning the language.
- kevin45, on 12/17/2007, -2/+8use jQuery and get ***** done in an hour in what would take raw JS coders a day.
- xutopia, on 12/17/2007, -2/+1 jQuery is looking more and more like the kiddie tool. Seriously whenever anything JS related is posted we have a few young ones speak about how great jQuery is. Is it any better than other library? If so why?
- maexus, on 12/17/2007, -0/+3I haven't used another library but love jQuery. It very fast at getting results I need.
- ell0bo, on 12/17/2007, -0/+1I wouldn't consider myself a kiddie when it comes to JS and writing apps. JQuery is by far the best thing I've worked on, and it's really light weight. You want to add more bloat? it's easy to add extensions. I used to maintain my own JS library for years, but when IE 7 came out I had all these annoying little bugs that crept in. Now with jQuery I have that taken care of. I took the time to re do my entire library, and now not only does it run faster but it's a lot cleaner to look at. I am glad someone talked me into trying jQuery, I recommend you to too.
- kevin45, on 12/17/2007, -0/+3Good enough for Digg, Nintendo, IBM and others. Do you think you know better than these companies?
- ell0bo, on 12/17/2007, -0/+2actually IBM was using Dojo when I was there last, although that was two years ago and maybe they smarted up. However considering how things were there and why I didn't return... I doubt it.
- MeatBiProduct, on 12/17/2007, -1/+2No but I also don't give a ***** what others are using. World of Warcraft uses XML and XSLT's and you don't see every site running around using that ***** so get ***** with your 'good enough for them then i should use it' mentallity.
Besides that - YUI is where its at XHR 4 LIFE.- mike503, on 12/17/2007, -0/+0YUI is neat, if you like a half a meg worth of javascript on your page...
- scottschiller, on 12/18/2007, -0/+1Gzip + YUI compressor FTW. (Recommended For all JS/CSS in fact, not just YUI.)
- mike503, on 12/17/2007, -0/+0YUI is neat, if you like a half a meg worth of javascript on your page...
- Daniel15, on 12/18/2007, -0/+1I've never used jQuery... Is it any better than Mootools? I'm using Mootools at the moment.
- xutopia, on 12/17/2007, -2/+1 jQuery is looking more and more like the kiddie tool. Seriously whenever anything JS related is posted we have a few young ones speak about how great jQuery is. Is it any better than other library? If so why?
- robmcm, on 12/17/2007, -2/+1AKA Hijax. Read more here: http://domscripting.com/blog/display/41
- spiritditch, on 12/17/2007, -3/+1The pie is a lie.
- wranlon, on 12/17/2007, -3/+0I do agree with late binding event handlers whenever possible ( my article on this topic: http://www.imnmotion.com/documents/html/technical/ ... ), however, I think it is a mistake to hardcode those bindings. The web application or content should have a clean, no-style, no-script version, which is decorated as desired. In that case, it wouldn't matter that the event handler is defined inline, or in a loop, or through some other obtuse mechanism (I wrote that, too: http://www.imnmotion.com/projects/engine/ ).
What's important is that it is easy to extend, easy to maintain, and doesn't suck up an unnecessary amount of bandwidth. - Rkstar, on 12/17/2007, -3/+1I just tried the guy's "example" on IE for the Mac (I know... who uses IE on the Mac any more... I just don't have Windows IE accessible right now), and as I expected, it broke. When you give a hard link in addition to a onclick, in my experience, IE always goes to the link... which 99% of the time you don't want.
- MeatBiProduct, on 12/17/2007, -0/+2No one uses IE5 on the Mac - which is notorious for being broken and not running anything right. I don't know whats worse the fact that you tested it in IE5 or the fact that you actually came to digg to post about it. NO ONE USES IE5 ON THE MAC - PLEASE MOVE ON!
- scottschiller, on 12/18/2007, -0/+1This is inaccurate.
At least 3 people use it. :)- ChapStik, on 12/18/2007, -0/+1And those 3 people are just looking for sites that break in IE5, not actually browsing with it.
- scottschiller, on 12/18/2007, -0/+1This is inaccurate.
- joelito, on 12/19/2007, -0/+1I don't know. But in one of my latest jobs the graphic designers didn't knew there was any other browser for their Macs until I started using Safari on those.
- MeatBiProduct, on 12/17/2007, -0/+2No one uses IE5 on the Mac - which is notorious for being broken and not running anything right. I don't know whats worse the fact that you tested it in IE5 or the fact that you actually came to digg to post about it. NO ONE USES IE5 ON THE MAC - PLEASE MOVE ON!
- thefinger, on 12/18/2007, -0/+1from a totally end-user point of view, how about a js implementation that doesn't make Digg go into that infuriating slo-mo when I log in with js enabled. This is a problem in Firefox, a bit less so with IE, and Opera least of all.
- dark0823, on 12/19/2007, -0/+1this make as simple
- hwn67, on 01/11/2008, -0/+1It took me 2 hours to learn jQuery, it saved me 60 hours since.
Another promising project is php.js, using PHP functions in JavaScript can make life easier. Just found this yesterday:
http://digg.com/programming/Javascript_MD5
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official 
© Digg Inc. 2008 — Content posted by Digg users is 