Why am I finding Javascript/jQuery so difficult to get right?

Question

My background is in C and I've picked up PHP, mySQL, HTML, CSS without too much issue.

But I'm finding Javascript/jQuery surprisingly difficult to get right. Very frustrating. Why?

1. It seems to violate a number of traditional programming principles (e.g. variable scope)

2. Undefined variables seem to appear out of nowhere and already have values associated with them. For example (from the jQuery docs):

   $("a").click(function(event) {     event.preventDefault();     $('<div/>')           .append('default ' + event.type + ' prevented')           .appendTo('#log'); }); 

   What exactly is "event"? Do I have to use this variable name? Should I just assume that this object is magically instantiated with the right stuff and I can use any of the methods list at the JQuery API?

3. There seems to be bunch of random rules (e.g. return false to stop a default action, but sometimes this doesn't work?)

4. Non-deterministic behavior when debugging. (e.g. I refresh the browser, try something and get result X for JS variables I'm watching in Firebug. I refresh again and I get result Y?)

5. Very messy looking code that is hard to follow. What happens when? I'm using Firebug and Chrome Developer Tools, but I'm not getting enough visibility.

It seems like everyday there's some random JS "rule" that comes up that I've never seen before in any of my JS books or tutorials.

What do I need to do to make Javascript/jQuery more deterministic, controlled, and logical to me?

Are there any resources that explain Javascript's quirks/gotchas?

Thanks!

Answer 1

1) It seems to violate a number of traditional programming principles (e.g. variable scope)

You need to declare variables using var, else it will go into the global scope.

2) Undefined variables seem to appear out of nowhere and already have values associated with them (how did this happen?)

This is possibly related to 1) and/or 4).

3) There seems to be bunch of random rules (e.g. return false to stop a default action, but sometimes this doesn't work?)

You need to let the handler return false as well. E.g. form onsubmit="return functionname()". You also need to return from the "main" function, not only from a closure (a function inside a function), referring to your previous question. It would only return into the "main" function and continue on.

4) Non-deterministic behavior when debugging. (e.g. I refresh the browser, try something and get result X for JS variables I'm watching in Firebug. I refresh again and I get result Y?)

Probably the code was executed before the HTML DOM was finished populating. You need to hook on window.onload or $(document).ready() whenever you want to execute stuff during page load.

5) Very messy looking code that is hard to follow. What happens when? I'm using Firebug and Chrome Developer Tools, but I'm not getting enough visibility.

I bet that you're talking about jQuery source? It's just a large library. You should after all not worry about this when debugging. Rather worry about your own code. However, make sure that you're looking at the unminified version of jQuery's source code.

---

See also:

• JavaScript: the bad parts
• What should every JavaScript programmer know

Answer 2

Douglas Crockford's "Javascript: The Good Parts" was an invaluable resource. Javascript plays a lot more like Lua, Lisp, or Python than C, it just happens to LOOK like C.

Link provided to Amazon; I snagged mine from O'Reilly.