Why do I find Javascript / jQuery so hard to get?

Question

My background is in C, and I chose PHP, mySQL, HTML, CSS without too much trouble.

But I find Javascript / jQuery surprisingly hard to reach. Very frustrating. Why?

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

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

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

  What is an "event"? Should I use this variable name? Should I just assume that this object is magically created with the right material, and can I use any of the list of methods in the jQuery API ?

• There seem to be a lot of random rules (e.g. return false to stop the default action, but sometimes this doesn't work?)

• Non-deterministic debugging behavior. (for example, I update the browser, try to do something and get the result X for the JS variables that I look in Firebug. Do I update again and get the result Y?)

• Very dirty looking code that is hard to execute. What happens when? I use Firebug and tools for Chrome developers, but I do not get enough visibility.

It seems that some random JS-rule appears in everyday life, which I have never seen before in any of my books or textbooks JS.

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

Are there any resources that explain the quirks of Javascript / gotchas?

Thank!

Answer 1

Douglas Crockford " Javascript: The Good Parts " was an invaluable resource. Javascript is much more like Lua, Lisp or Python than C, it just happens like LOOK, for example C.

Link provided by Amazon; I grabbed me by O'Reilly.

Answer 2

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

You need to declare variables with var , otherwise 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 seem to be a lot of random rules (e.g. return false to stop the default action, but sometimes it doesn't work?)

You must also allow the handler to return false. For example. form onsubmit="return functionname()" . You also need to return from the "main" function, and not just from the closure (function inside the function), referring to your previous question . It will return only to the "main" function and continue to work.

4) Non-deterministic behavior during debugging. (for example, refresh the browser, try something and get the result X for the JS variables that I look in Firebug. Am I updated again and get the result Y?)

The code was probably executed before the HTML DOM was populated. You need to connect to window.onload or $(document).ready() whenever you want to execute material while the page is loading.

5) Very dirty looking code that is hard to execute. What happens when? I use Firebug and tools for Chrome developers, but I do not get enough visibility.

Bet you say jQuery source? It is just a big library. In the end, you should not worry about this when debugging. Rather worry about your own code. However, make sure you look at the uninitiated version of jQuery source code.

---

See also:

• JavaScript: the bad parts
• What Every JavaScript Programmer Should Know

Answer 3

Honestly, I think you have a good understanding. Some of my freezes were similar. The way I am advancing is "good, if so, as it is, then so it is." Just accept the features and plow ahead. PHP does some of the same things (variables can appear out of nowhere, etc.). Just enter the code you want to encode, and if it works, then great!

Then, after you get to this point, start tearing down the profiler and see if there is anything that you can optimize.

Here are a few things:

If you understand CSS, then jQuery selectors should be easy. As for the code, it's easy if you can deal with chaining and JSON. EDIT: also, the jQuery documentation about everything will be GREAT! And there is no shortage of jQuery experts in SO to help us noobs (and hopefully we can return the benefit to the new noob).

There is an opportunity to work. (Basically) everything written outside a function or object is on a global scale. If you are inside an object or function and use var , this sets the scope of the variable

Javascript is not like C-language (C ++ or even PHP). It uses prototypes to handle relationships between classes and objects, rather than subclass schemes.

The # 1 that threw me for the loop is that any JS that appears anywhere on the page or that has been included in the <script> tags is an honest game. If you have a global variable in one script, you can use the same variable in a completely different script, and it will work. This may be what you mean by variables that appear out of nowhere. In addition, there are some DOM variables that can simply be "mapped".

In any case, I think that if you just plow ahead, you will get a few “AHA” moments. I am a relative noob for programming, but I am constantly growing until I depend on something that does not have a big impact on the actual execution of the code.

Answer 4

• It is a prototype-based inheritance language and is influenced by functional programming languages ​​and a paradigm, so it is not completely OO / procedural like other languages. Variables are assumed to be global unless declared with var .

• Please provide an example?

• return false exits the function, as with any language return statement. preventDefault() will be a DOM method to override default link behavior

• Javascript is primarily used on the client side. Since there are many user agents, each of them has a different DOM implementation, which is very contradictory than JS itself. Again, please include a real-world example to get a definitive answer.

• You will find randomly looking code in any language, and perhaps your lack of understanding perceives the code as messy when in fact it is not so bad. Or maybe you are looking at some kind of miniature / obfuscated code.

I recommend http://eloquentjavascript.net/ for exploring aspects of Javascript.

Things you learn from the link above

• lambdas
• closing
• Prototype inheritance
• Event Based Programming
• Debugging
• Dom

Answer 5

JavaScript: Good Details by Douglas Crockford - A Good Start

In your case, applications ("bad parts" and "terrible parts") may be the most interesting :)

Answer 6

Crockford's " Javascript: The Good Parts " provides some common JS templates that help with variable privatization and scaling. This is for javascript in general. For jQuery, I just use the API. Also, Yui Theater javascript videos are pretty good

Answer 7

Javascript can be a little complicated, and some of its functional aspects confuse people. If you really learn and understand the language, you will find it really useful, most people just by chance start using it, and then just hate it.

Read javascript the good parts of crockford, this is really useful: http://javascript.crockford.com/

Also make sure you understand closure . This is a fundamental phenomenon that people do not receive, but often use.

Answer 8

In terms of the scope variable, there are local and global variables. In this example, you can see one of the getchyas variable scope:

 var thisIsAGlobalVariable function anon () { var thisIsALocalVariable thisIsAGlobalVariable = 5; //if you don't use the var prefix inside a fn, it becomes global } 

Answer 9

It’s difficult for you because:

• javascript has a different kind of syntax.
• javascript dificult for debugging
• javascript does not have autocompletion, e.g. C #, etc.) or does it
• javascript has illogical rules (they become logical after you know them)
• everything can be done in 1000 ways, and when you are looking for a solution, you will find answers for the year 2000 :), where C #, php basically have a good practical function u "should / could" use

However, I started using js / jquery six months ago with the same considerations as you, and I stuck with it, and now I use it every day to improve my web applications.

I just like it (especially jquery). This is a life saver, I know what and where to look, I can handle it.

Everything seems logical.

If I can give you one piece of advice: javascript / jquery is a sour apple, but just hanging there, a bit of a trough, and you won’t regret it.

also, loooot of people uses it and is always ready to lend a hand if necessary (I know that I know)

Answer 10

Javascript is complicated. You do not have a compiler that monitors your back. To compensate, unit testing is becoming more important. I did unit testing with jQuery / QUnit, but recently I started using Jasmine ( http://github.com/pivotal/jasmine ) and I recommend it at 200%, Its a great testing platform.

If you are not familiar with testing or testing with javascript, I would highly recommend finding unit tests for other OSS javascript projects (hopefully for code that you could use) and see how they test it.

With unit tests, you will make the same mistakes, but catch them much earlier and with less grief. And if your tests are good, errors will not return after you fix tham.

Answer 11

I don’t know how much UI design you have done in C, but an event variable only appears when it is dispatched by the caller and the handler needs to process the object. If you read the event object, the confusion in q # 2 should disappear.

There is no event handling in PHP, so I think you have not encountered this problem in the past. JavaScript is a programming language with its own purpose, so it was designed to work for that specific purpose.

Answer 12

You may need to associate your code with the HTML onclick="event()" button to disable it as an event.