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

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!

Source: Tips4all