dean.edwards.name/weblog/2006/06/levels/

Levels of JavaScript Knowledge

Inspired by Roger Johansson’s Levels of HTML Knowledge:

  1. alert("Hello World");
    
  2. var WORLD = "World";
    function hello(who) {
    	alert("Hello " + who);
    };
    hello(WORLD);
    
  3. <button onclick="hello(WORLD)">Say Hello</button>
    
  4. <button id="hello">Say Hello</button>
    
    var button = document.all.hello;
    button.onclick = function() {
    	hello(WORLD);
    };
    
  5. var button = document.getElementById("hello");
    button.addEventListener("click", function(event) {
    	hello(WORLD);
    }, false);
    
  6. var Hello = new Binding({
    	greet: function(who) {
    		alert("Hello " + who);
    	},
    	
    	onclick: function() {
    		this.greet(Hello.WORLD)
    	}
    }, {
    	WORLD: "World"
    });
    document.bind("#hello", Hello);
    

Comments (111)

Leave a comment

this.greet(Hello+WORLD) instead of this.greet(Hello.WORLD)

  • Comment by: Naonak
  • Posted:

@Naonak – Nope. The code is right.

  • Comment by: -dean
  • Posted:

Great :-)

  • Comment by: Chris
  • Posted:

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 by: Rahul
  • Posted:

Is level 5 the level that mere mortals might aspire to, like Roger’s list? :)

I didn’t even know there was a level 6. Freaky.

  • Comment by: john
  • Posted:

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 by: -dean
  • Posted:

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 by: Robin
  • Posted:

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 by: toly
  • Posted:

@toly – you’re right! I’ll update the example. Directly assigning event handlers? What was I thinking? ;-)

  • Comment by: -dean
  • Posted:

So what level are you if you use jQuery?

$(window).load(
  function()
  {
    $('#hello').click(
      function()
      {
        alert("Hello World");
      }
    );
  }
);
  • Comment by: Sam
  • Posted:

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 by: Neil Mix
  • Posted:

Friday Humor Dean Edwards has a fun post on Levels of JavaScript Knowledge. Heh — do the means justify the end? …

  • Trackback by: Neil Mix
  • Posted:

Perhaps a series of ‘Levels of [foo] Knowledge’ is going to develop. Where [foo] = XML, XSL, PHP, MySQL etc

  • Comment by: Sam
  • Posted:

Level 7: alert(“Hello World”);

  • Comment by: Philip
  • Posted:

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 :P

  • Comment by: Philip
  • Posted:

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 by: sandro pasquali
  • Posted:

How well do you know JavaScript?

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?

@Sam – jQuery is Level $.

@Neil – cool work on Narrative JavaScript. You actually found a use for Narcissus!

  • Comment by: -dean
  • Posted:

Ok, ok. So I am level 5 lol

:D

  • Comment by: naonak
  • Posted:

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 by: sosa
  • Posted:

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?

Oh, my! I’m still in lvl 1. But I’m not worried, coz I’m in level 10^9 in PERL :)

:D

  • Comment by: Paulo Maximo
  • Posted:

btw, level 1 seems to be most practical ;) Why would anyone write all that code to do an alert?

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 by: Jim Ley
  • Posted:

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 ;)

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 by: Neil Mix
  • Posted:

I guess I’ll be posting my levels of intoxication next. ;-)

@Jim – You did notice that this post was tagged “Humour” right? ;-)

  • Comment by: -dean
  • Posted:

[...] « See Windows Vista Levels Of JavaScript Knowledge Levels Of JavaScript Knowledge This entry was posted on Sa [...]

You’ve obviously not spent enough time in JS newsgroups or IRC to not spell out “Don’t do it” messages Dean :)

  • Comment by: Jim Ley
  • Posted:

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 by: Poncho
  • Posted:

Ahhh, the 4th one, the horrors of document.all.

  • Comment by: kourge
  • Posted:

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');

@Justin: Perhaps a “Levels of Drunken JavaScript” post? It’d be just like this post, only in reverse.

[...] own and textile plugins. (tags: TeX mathematics mathml web hack markup markdown textile) Levels of JavaScript Knowledge Completing the trilogy. (tags: javascript web) [...]

Level 7 wouldn’t define the functions every time that statement is executed :p.

@Dustin – shouldn’t that be:

YAHOO.utils.standard.messaging.widget.alert('Hello World');

? ;-)

  • Comment by: -dean
  • Posted:

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 by: hellstrike
  • Posted:

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 by: Chris
  • Posted:

Apologies for posting twice, but looks like I missed out on the number 40 spot. Dang, no prize!

  • Comment by: Chris
  • Posted:

Argh .. Why do difficult things when simpliest thing is enought ? Let me stay in level 1 ;)

Otro nivel Se han publicado alrededor de la diseño-desarrollo-blogósfera gringa algunos interesantes post titulados ¿Cual es tu nivel de x, donde x puede ser CSS,HTML,Javascript y seguramente otros ira apareciendo. Me ha dado gusto ver mis su…

[...] ir de unos ejemplos puedes saber qué nivel de conocimiento de JavaScript tienes. Éste es el link: http://dean.edwards.name/weblog/2006/06/levels/ Yo creo que tengo sobre el nivel 4. ¿Y tú, qué nivel tienes? Esta entr [...]

level 5 for me sigh… :’(

  • Comment by: dandyna
  • Posted:

[...] es Web Knowledge Levels Levels of HTML knowledge Levels of CSS knowledge Your HTML level Levels of JavaScript Knowledge. Levels of Accessibility Knowledge [...]

[...] inspired Roger to write Levels of HTML knowledge and that got followed by Levels of Javascript knowledge, the levels of Accessibility knowledge etc. Instead of leaving a co [...]

[...] cript June 4, 2006 – Noises Come stai messo con JavaScript? Testa la tua conoscenza di JavaScript! Si parte da: alert(”Hello World”); Per ar [...]

[...] ark” title=”Permanent Link: Stufen der JavaScript-Kompetenz”> Eine lustige Aufschlüsselung von Stufen des JavaScript-Wissens findet man bei Dean Edwards. Level 1 beginnt m [...]

[...] nte, inspirado en los 2 anteriores, Dan Edwards hizo lo propio para JavaScript con su post Levels of JavaScript Knowledge, que sin ser tan explicito en su explicación, el [...]

[...] (tags: Tech Internet Web2.0) Levels of JavaScript Knowledge [...]

Quick Link: Levels of JavaScript Knowledge Levels of JavaScript Knowledge by Dean Edwards. I don’t mean to brag but I’m already a level 3. I think I need 500 more experience points to make it to level 4….

Whoo-hoo, I’m a level 5!

  • Comment by: Avi Flax
  • Posted:

Good samples – I like to see examples like these. Im at a level 3.

I grew to level 6 a while ago thanks to behaviour and prototype :-)

* Showers the author with praise *

Keep it up

‘that really representative? Glad to see that I make it level 4 while being quite a JS/DOM noob ;)

[...] Забавные тесты уровня ваших познаний в HTML, CSS, и JavaScript. У меня пятый уровень по всем пунктам, а у вас? [...]

Huzzah! I’m the third (other than dean) that considers himself a lvl 6! huzzah I say!

  • Comment by: Alex Lein
  • Posted:

Huzzah!

  • Comment by: -dean
  • Posted:

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 by: Theodor Zoulias
  • Posted:

[...] nowledge. You can click into each one to see what your level might be, but here are mine: Levels of JavaScript Knowledge: I’m almost to Level 5. Level 5 uses a little DOM scripting [...]

@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 by: -dean
  • Posted:

How well do you know JavaScript? Dean Edwards, a well-known name in the HTML/CSS/JavaScript world, has whipped up a little test to gauge

Level 6… no fair though, you’re using Prototype and not just native JS.

I am a mixture of four and five (based on the tiny samples in each example).

  • Comment by: Kim Siever
  • Posted:

Level 5 for me, looks like I have some work to do…

  • Comment by: Rob Bolton
  • Posted:

[...] June 6th, 2006 Dean Edwards publicó hace poco un post llamado “Levels of JavaScript Knowledge”, bastante interesante ya que vengo hablando de lo important [...]

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 by: Theodor Zoulias
  • Posted:

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 by: chocolateboy
  • Posted:

I barely comprehend level 5 and level 6′s syntax just looks insane! :( I hate JS :(

  • Comment by: x
  • Posted:

6 but document.bind(“#hello”, Hello); should stay in onload ;)

@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 by: michaelp420
  • Posted:

@michaelp420 – I’m using XBL to apply the syntax highlighting.

  • Comment by: -dean
  • Posted:

7:

alert("Hello World");

I guess I’m at level $5.

  • Comment by: Montoya
  • Posted:

level 7 is realizing the web stack has finally hit the wall.

  • Comment by: crunky dude
  • Posted:

[...] t to determine your CSS level Rate Your JavaScript Power See Dean Edward’s blog to determine your JavaScript level Rate Your Accessibility Dexterity Finally, visit the Fawny blog [...]

[...] Quick Link: Levels of JavaScript Knowledge Levels of JavaScript Knowledge by Dean Edwards. I don’t mean to brag but I’m already [...]

I wasn’t aware that JS humor exists. Very good!

  • Comment by: Dado
  • Posted:

[...] latest fad passing through the web design blog world. So we have levels of HTML knowledge, levels of javascript knowledge, levels of web accessibility knowledge, heavily tongue-in-cheek an [...]

There shouldn’t be DOM stuff here. :P 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 :P good stuff). God Bless y’all and remember that Jesus Christ is the Way, the Truth and the Life.

  • Comment by: Simon
  • Posted:

Kinda JS coders Who are u?

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 by: esigchas
  • Posted:

[...] I’m stealing this idea straight from these three guys (1, 2, 3) and adapting it to the world of SEO/M. Here’s my take on what the various levels of knowledge are in the search microcosm – I’ve tried to provide examples as well: [...]

[...] I’m stealing this idea straight from these three guys (1, 2, 3) and adapting it to the world of SEO/M. Here’s my take on what the various levels of knowledge are in the search microcosm – I’ve tried to provide examples as well: [...]

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 by: David V.
  • Posted:

:) I have added to the ‘levels’ meme The Ten Levels of SEO

var i;i=1;while(i>0){alert("Stoopid")}i++;

What level am I?

@Edward Clarke: You are at an infinite loop. Cheers!

  • Comment by: Bill Gates
  • Posted:

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 by: James
  • Posted:

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

[...] Dean Edwards’s Levels of JavaScript knowledge. I’m definitely a level 5. [...]

[...] I have posted a bit on RSS and while I am not a “super” expert on RSS but I am a big fan and I have posted a bit on this topic in the past so when I saw the following link: “Levels of JavaScript Knowledge” which was based on “Levels of HTML Knowledge” which was in turn based on “Levels of CSS Knowledge” I thought – what better way to describe what I have seen lately as we hire for PaperThin. [...]

@Edward Clarke

Control structures are for wusses!

(function(){alert('stoopid'); arguments.callee();})();

  • Comment by: Michiel
  • Posted:

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 by: Matthew Morrison
  • Posted:

LOL! Great list! I’m at 5 aspiring to begin coding like 6. It’s a weird transition.

[...] Jenny posted about an interesting article over at Particletree called Levels of Web Development Knowledge. My favorite article, which I was cracking up over, was Dean Edwards’ Levels of JavaScript Knowledge, which actually has 6 variants of JavaScript Hello World code to demonstrate 6 levels of JavaScript developer expertise. I love it! [...]

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 by: kuba
  • Posted:

[...] JS [...]

[...] I found this page on Behavior Driven Development really interesting. This reminds me of posts such as the Levels of JavaScript Knowledge, Levels of HTML knowledge and the Levels of Accessibility Knowledge. [...]

[...] This one gets rough… Levels of Javascript Knowledge [...]

[...] JavaScript [...]

[...] Selon Dean Edwards, il y a six niveaux de connaissance JavaScript. Auquel êtes-vous ? (c’est vieux mais c’est toujours intéressant) [...]

[...] continue [...]

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,{}))

  • Comment by: Werdn
  • Posted:

[...] [java script / jQuery quizzes] http://dhtmlkitchen.com/jstest/jquery/quiz.jsp http://www.planetpdf.com/developer/article.asp?ContentID=6337 http://www.w3schools.com/js/js_quiz.asp http://dean.edwards.name/weblog/2006/06/levels/ [...]

[...] http://dean.edwards.name/weblog/2006/06/levels/ 1. [...]

[...] http://dean.edwards.name/weblog/2006/06/levels/ Posted in Coding Forum SHARE THIS Twitter Facebook Delicious StumbleUpon E-mail « How to make the WordPress header image hyperlinked? » vBulletin & HTML No Comments Yet [...]

[...] [...]

So to get to level 6 it only takes to be inefficient code writer poser? Happy to be in level 5.

  • Comment by: Mario
  • Posted:

Leave A Comment

Line and paragraph breaks automatic, email address never displayed. Some HTML allowed.