Inspired by Roger Johansson’s Levels of HTML Knowledge:
alert("Hello World");var WORLD = "World"; function hello(who) { alert("Hello " + who); }; hello(WORLD);<button onclick="hello(WORLD)">Say Hello</button>
<button id="hello">Say Hello</button>
var button = document.all.hello; button.onclick = function() { hello(WORLD); };var button = document.getElementById("hello"); button.addEventListener("click", function(event) { hello(WORLD); }, false);var Hello = new Binding({ greet: function(who) { alert("Hello " + who); }, onclick: function() { this.greet(Hello.WORLD) } }, { WORLD: "World" }); document.bind("#hello", Hello);
Comment: #1.
this.greet(Hello+WORLD) instead of this.greet(Hello.WORLD)
Comment: #2.
@Naonak - Nope. The code is right.
Comment: #3.
Great
Comment: #4.
Naonak obviously didn’t pass the level 6 test :B
Kind of a big jump between 5 and 6, don’t you think? Compared to the previous jumps between 3/4 and 4/5.
Comment: #5.
Is level 5 the level that mere mortals might aspire to, like Roger’s list?
Comment: #6.
I didn’t even know there was a level 6. Freaky.
Comment: #7.
A bit of explanation is needed I guess.
Level 5 is supposed to be standard unobtrusive JavaScript. Level 6 is the next level and involves objects and behavioral extensions. Rahul is right. There is a big jump between level 5 and 6. Maybe that’s why there are so few good JavaScript programmers?
Comment: #8.
Well, I’m glad I’m at level 5 at least
But still, the jump to 6 is huge. I’d like to learn more but I’m really only working on double-AA accessible sites at the moment which doesn’t leave a lot of room for advanced Javascript, when you have to ensure the site works fine without.
Comment: #9.
I would’ve thought that lvl 5 would be using addEventListener or addEvent to attach the alert to the button. That might be a better step between 4 and 6. ..Or is that too close to lvl 6?
Comment: #10.
@toly - you’re right! I’ll update the example. Directly assigning event handlers? What was I thinking?
Comment: #11.
So what level are you if you use jQuery?
$(window).load( function() { $('#hello').click( function() { alert("Hello World"); } ); } );Comment: #12.
This is great, Dean. I love it.
Perhaps this should be levels of DHTML knowledge? Levels of *JavaScript* knowledge would surely have to include tidbits spanning from variables that begin with $ to recursive anonymous functions with closures.
Comment: #13.
Comment: #14.
Perhaps a series of ‘Levels of [foo] Knowledge’ is going to develop. Where [foo] = XML, XSL, PHP, MySQL etc
Comment: #15.
Level 7: alert(”Hello World”);
Comment: #16.
although for 5, I’d be more tempted to do something like this:
var buttons = document.getElementsByTagName("button"); function greet(event) { hello(this.id); } for(var i=0; i<buttons.length; i++) buttons[i].addEventListener("click", greet, false);…for forward compatibility
Comment: #17.
6 is still rather mundane. the fact that many javascript programmers aren’t comfortable with (strained) object declarations like the one given isn’t really a test of javascript per se — indeed, i know many “procedural fans” that are better javascript programmers than most. I would think interesting use of ::factory type code generation techniques (functions as datatypes and such) would separate the men from the boys more effectively. perhaps a level `$`?
And of course there is the level `dean.edwards` …
Comment: #18.
Comment: #19.
I would figure that level five would assign the event using the method described in your JavaScript Tip #1 post.
Incidently, will there be any more tips posted? Since many users here seem to be unfamiliar with level 6, maybe an explanation might be suitable for a tip #2?
Comment: #20.
@Sam - jQuery is Level $.
@Neil - cool work on Narrative JavaScript. You actually found a use for Narcissus!
Comment: #21.
Ok, ok. So I am level 5 lol
Comment: #22.
Oh man! According to this test I’m in level 6, but there has to be something wrong, Because I know that I’m not a great coder, just a fancy one.
Comment: #23.
You’re lucky I didn’t just write up that post where I was going to make fun of the next person who made a “Levels of” post. Seeing as how JavaScript was the most logical one to come up next, it was going to happen sooner or later.
I refuse to answer my level. This is just a ridiculous way for developers to show off. So do we get badges for certain levels?
Comment: #24.
Oh, my! I’m still in lvl 1. But I’m not worried, coz I’m in level 10^9 in PERL
Comment: #25.
btw, level 1 seems to be most practical
Why would anyone write all that code to do an alert?
Comment: #26.
Level 6 is just bad, very bad, it’s absolutely insane, you don’t add a bind method to a host object, as you have no idea if a host object can be extended in that way (it’s not even a given in IE, let alone rare browsers - and nor is there any standard that requires it.)
Equally the rest makes little obvious sense, just more obfuscation for the hell of it.
Comment: #27.
Yes, but Philip, I think you forgot that a reversed while loop (or better yet, a Duff’s loop) is much faster in ECMAScript/JavaScript/JScript
Comment: #28.
Dean - thanks, but I am forever in awe of your amazing skills. I’ve learned lots about JS by looking through your code.
(me: level 5 striving to return to level 1)
Comment: #29.
I guess I’ll be posting my levels of intoxication next.
Comment: #30.
@Jim - You did notice that this post was tagged “Humour” right?
Comment: #31.
Comment: #32.
You’ve obviously not spent enough time in JS newsgroups or IRC to not spell out “Don’t do it” messages Dean
Comment: #33.
For complex tasks, I think I’m somewhere between level 5 & 6, but for this particular task, I’d go for number 4. I tend not to use an awful lot of javascript though
Cheers;
Poncho
Comment: #34.
Ahhh, the 4th one, the horrors of
document.all.Comment: #35.
Dean, I take back anything I ever said. I for one also didn’t see the tag on this post for humor. That just proves our case as JavaScripters. Indeed, who needs a “Levels of” for JavaScript. As if any of us really cares. This post ’tis most definitely a true reflection of who we are
It makes me feel much better knowing this was done in humor 
Hey, since we’re on a humor kick…
YAHOO.widget.alert('Hello World');Comment: #36.
@Justin: Perhaps a “Levels of Drunken JavaScript” post? It’d be just like this post, only in reverse.
Comment: #37.
Comment: #38.
Level 7 wouldn’t define the functions every time that statement is executed :p.
Comment: #39.
@Dustin - shouldn’t that be:
YAHOO.utils.standard.messaging.widget.alert('Hello World');?
Comment: #40.
what’s so bad in level between #1 and #3 ? Programming means to find a way to solve a problem … the way I choose in unimportant but It must work .. or ?
Comment: #41.
Woohoo, looks like I will be comment number 40. A nice round number. I hereby claim my prize. (I’ll have JavaScript for Dummies, please.)
Joking apart though, I’m disappointed not to see anyone (yet) trying to sneak that self.close - or whatever it is - thingy that causes the window to shut (and totally dumbfounds the unsuspecting reader) into their comment. That would have to be JavaScript level -1 (used by smartass types who haven’t got a clue about scripting and think it’s a really clever joke.) Maybe it should be reserved for last comment of all eh?
My own level of JS knowledge? Strictly cut and paste, although I do try to use only reputable sources on the rare occasions when I do use scripting.
Comment: #42.
Apologies for posting twice, but looks like I missed out on the number 40 spot. Dang, no prize!
Comment: #43.
Argh .. Why do difficult things when simpliest thing is enought ? Let me stay in level 1
Comment: #44.
Comment: #45.
Comment: #46.
level 5 for me sigh… :’(
Comment: #47.
Comment: #48.
Comment: #49.
Comment: #50.
Comment: #51.
Comment: #52.
Comment: #53.
Comment: #54.
Whoo-hoo, I’m a level 5!
Comment: #55.
Good samples - I like to see examples like these. Im at a level 3.
Comment: #56.
I grew to level 6 a while ago thanks to behaviour and prototype
* Showers the author with praise *
Keep it up
Comment: #57.
‘that really representative? Glad to see that I make it level 4 while being quite a JS/DOM noob
Comment: #58.
Comment: #59.
Huzzah! I’m the third (other than dean) that considers himself a lvl 6! huzzah I say!
Comment: #60.
Huzzah!
Comment: #61.
Here comes the nasty comment. I was forced to come with JavaScript disabled, to avoid killing again the Firefox process after a total UI freeze. There are not many sites in the web that cannibalize there visitors CPU and RAM so wildly. There are not many level 6 JavaScripters either. I wonder if there is a connection between these two statistics.
Comment: #62.
Comment: #63.
@Theodor - I scanned my referrals logs to find out what browser you were using - Firefox 1.0.7. So I uninstalled my version of Firefox and downloaded FF1.0.7. And… I can’t recreate your problem. If you want to give me more information then that would help.
Comment: #64.
Comment: #65.
Level 6… no fair though, you’re using Prototype and not just native JS.
Comment: #66.
I am a mixture of four and five (based on the tiny samples in each example).
Comment: #67.
Level 5 for me, looks like I have some work to do…
Comment: #68.
Comment: #69.
Firefox 1.0.7 with six trusty extensions and some hand-made greasemonkey scripts. Disabling greasemonkey doesn’t stop the issue reproducing itself. Disabling JavaScript does. Quite hastly I concluded that some sort of heavy scripting triggers this behaviour, but looking afterwards the source I can’t find a single script tag to blame. Mysterious. A 3-4 seconds UI freeze is normal and expected phenomenon in this site for me. Total browser hanging is not.
Comment: #70.
Ahem:
/* Level 42: Include name.dean.edwards.js (or name/dean/edwards.js) and (Ajile or jspkg or JSAN or ...) to set up the com.humour namespace. */ (function() { var $ = name.dean.edwards; com.humour.Hello = new $.Binding({ greet: function(who) { alert("Hello " + who); }, onclick: function() { this.greet(com.humour.Hello.WORLD) } }, { WORLD: "World" }); $.Binding.bind(document, "#hello", com.humour.Hello); })();Newbie!
Comment: #71.
I barely comprehend level 5 and level 6’s syntax just looks insane!
I hate JS 
Comment: #72.
6 but document.bind(”#hello”, Hello); should stay in onload
Comment: #73.
@Theodor
No problems here but i’m using ff1.5 However, you make a good point about the site using js. I liked the way that the code samples were color when i showed up with js enabled. That effect doesn’t occur with js disabled. But for the life of me i can’t figure out 1) what is triggering the js and 2) where it is located?
@Dean — can you fill me in on how you’re running the js on enabled browsers to color your code samples?
Comment: #74.
@michaelp420 - I’m using XBL to apply the syntax highlighting.
Comment: #75.
7:
alert("Hello World");Comment: #76.
I guess I’m at level $5.
Comment: #77.
level 7 is realizing the web stack has finally hit the wall.
Comment: #78.
Comment: #79.
Comment: #80.
I wasn’t aware that JS humor exists. Very good!
Comment: #81.
Comment: #82.
There shouldn’t be DOM stuff here.
Level 7 should see some inheritance code using prototype or at least some multidimensional array stuff. I’m Level 6. Took a long time to understand prototype. I got up to speed by doing lots of reading and practice coding using Flash ActionScript and reading up on abstraction, encapsulation etc (all the OOP stuff) written by Grady Booch’s “Object-Oriented Analysis and Design with Applications (2nd Edition)” (got a copy from my Uni library). Praise God! Wish you guys and gals all the best in understanding code. I also want to point you guys and gals in http://www.joelonsoftware.com (read the archives 
good stuff). God Bless y’all and remember that Jesus Christ is the Way, the Truth and the Life.
Comment: #83.
Comment: #84.
I’m level 4 and I didn’t even say a word. I realized I’ve got a lot of work to do. I’ve just started learning DOM☻
Comment: #85.
Comment: #86.
Comment: #87.
Level 8:
This example starts every 10.000 miliseconds (=10 sec.) the function init(). With that, you can build guestbooks, chats, forums and more!
function init(){
alert(”Hello World”);
}
window.setTimeout(”init()”, 10000);
Comment: #88.
Comment: #89.
var i;i=1;while(i>0){alert("Stoopid")}i++;What level am I?
Comment: #90.
@Edward Clarke: You are at an infinite loop. Cheers!
Comment: #91.
Nice article. I reckon i am at Level 5. But Level 5 “looks” better in coding that level 6. Which framework uses level 6. anyways ?
Comment: #92.
I personally prefer level 3, but I don’t use js very often at all. I don’t quite understand level 6, but that’s ok, because even if I did, I would probably never use it
I also had Firefox lockup issues on this page. I received it two or three times in a row when trying to open the page in a background tab, but it worked ok when I opened it up in the current tab. I don’t usually use Firefox, so not sure what to tell you.
Running 1.5.0.6 on Debian GNU/Linux
Comment: #93.
Comment: #94.
Comment: #95.
@Edward Clarke
Control structures are for wusses!
(function(){alert('stoopid'); arguments.callee();})();Comment: #96.
Any room for actionscript:
var num:Number = new Number();
onEnterFrame = function() { num = (Math.round((getBytesTotal() / getBytesLoaded())*100); if(getBytesTotal == getBytesLoaded){ this.myPreloader_mc._visible = false; gotoAndStop(2); } else { this.dynText_txt.text = num; _root.myPreloader_mc.gotoAndStop(num); } }
thought I would submit that since I just started programming in Javascript but know actionscript almost at the advanced level :}.
Comment: #97.
LOL! Great list! I’m at 5 aspiring to begin coding like 6. It’s a weird transition.
Comment: #98.
Comment: #99.
Nice, is better than html and CSS level of knowledge, because of its simplicity, and that you didn’t have to create new Javascript Specification to be on level 6. Very Nice
Comment: #100.
Comment: #101.
Comment: #102.
Comment: #103.
Comment: #104.
Comment: #105.
Comment: #106.
level 1 ))
eval(function(p,a,c,k,e,r){e=String;if(!”.replace(/^/,String)){while(c–)r[c]=k[c]||c;k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(’\\b’+e(c)+’\\b’,'g’),k[c]);return p}(’0(”1 2″);’,3,3,’alert|Hello|World’.split(’|'),0,{}))