share
Stack OverflowHelp! I've learned jQuery... now I want to learn JavaScript
[+73] [12] Derek Adair
[2010-11-24 17:00:37]
[ javascript jquery web-applications ]
[ http://stackoverflow.com/questions/4269426/help-ive-learned-jquery-now-i-want-to-learn-javascript ] [DELETED]

I am a self-taught web developer/programmer. I started out about two years ago by learning how to make simple dynamic websites with HTML/CSS/PHP. Then I started dabbling with animation...

Enter jQuery [1]

I've become quite proficient with jQuery over the last year and I've even started making my own plugins. I've spent most of my effort learning how to beautify websites with fancy effects and what not.

Upon tackling my first full-blown application, I realized how under-developed my knowledge of JavaScript actually is. jQuery has allowed me to rely on its framework so heavily that I rarely use any interesting functions, techniques, or whatever that are 'native' to the JavaScript language.

For example:

I have a basic understanding of what a closure [2] is... but I am unsure where this technique can actually benefit me. Although as I understand it, that's what my jQuery plugins do with (function ($){//plugin code here})(jQuery). I've seen many posts/blogs/whatever about memory leaks [3] and circular references [4] which is concerning.

I'm frustrated because I can wrap my head around the basic concepts of what these are just by reading the articles, but I'm finding that the deeper I go the more I don't understand. The vocabulary alone is burdensome. Let alone how to actually use these techniques/functions/language features.

I am trying to figure out what I don't know

I'm looking to gather any advice, techniques, articles, books, videos, snippets, examples, potential pitfalls... really anything you have regarding application development with JavaScript.

(30) @peterJ: OP is trying to understand the fundamentals of the javascript language. There's no jQuery method for that. - user113716
(11) @peterJ why does he want to dive down deeper? Because he wants to learn more? Because it will help him become a better developer? Because he's bored? I don't think it matters that much. :) - Gordon Gustafson
(6) @peterJ - jQuery is largely a layer over the DOM API. Understanding the basics of javascript is entirely separate. - user113716
(1) your statement about (function ($) { }) (jQuery) actually isn't being done for the purpose of closures. It is being done to scope the $ to project it from other libraries that define $, thus allowing you to still use $ for jQuery calls without worry. You might happen to be doing a closure at the same time, because closures in JS are lexical/function specific (as opposed to block specific in some other languages). - Matt
(2) @Derek - Keep in mind that there's a distinction between the javascript language and the DOM API. Concepts like closures are specific to the language. But if you're interested in breaking your dependence on jQuery in building web applications, then part of your endeavor should be to know the DOM API. - user113716
@peterJ - jQuery is not a language, it is a framework. I look at understanding the language this framework uses as a great way to enhance my skills using the framework. - Derek Adair
@Matt - is it a closure though? i'm not sure... - Derek Adair
@Derek - There have been many great discussions on SO regarding closures. Here's one. The discussion in the comments talks about when you have a closure, and when you don't. - user113716
@patrick dw - I'm not really trying to break the jQuery dependancy. I just want to enhance my skills as a developer as much as possible and these seems like a really straight forward way to do it. - Derek Adair
(3) @Derek it can perform a closure, but is not in of itself a closure. Think of it this way (simplified): usually, when you call a method or a function, you have to pass to it the parameters you want the function to use. However, languages like JS which support anonymous functions, the functions can also access a variable that was defined in the code surrounding the anonymous function definition. In order for these functions to access these "outer" variables, the variables are captured by what is called a closure. It can be a tricky topic, and not well suited for a comment. - Matt
(1) +1 for actually understanding that jQuery !== JavaScript, most people don't seem to know that these days :/ - Ivo Wetzel
@Derek - Ok, wasn't sure if that was part of the objective. Though in my opinion, web apps can be improved in some areas by decreasing your use of jQuery (or any library) when it isn't really needed. - user113716
@Derek per closures, most of the books mentioned in the answers will address them. Lots of good pre-existing discussions on them in SO as well, such as stackoverflow.com/questions/111102/… - Matt
Thank you for all of this awesome information. I've come a LONG way in a short time with javascript. I've actually created my own namespace! ha! seriously SO rocks my socks. - Derek Adair
You could also check out eventedmind.com/courses/1-advanced-javascript-concepts. It's the first two chapters of a course I'm putting together. - cmather
[+38] [2010-11-24 17:05:08] Gordon Gustafson [ACCEPTED]

There are several books about just JavaScript and not jQuery that should be able to help.

JavaScript the Definitive Guide [1]

JavaScript: The Good Parts [2]

Secrets of a JavaScript Ninja [3] (thanks to James Kovacs [4] for this recommendation)

and many more... [5]

Here's some specific articles on 'Advanced JavaScript'.

Memoization [6]

Memory leaks, circular references, and closures [7]

and just about [8] everything else [9]

[1] http://rads.stackoverflow.com/amzn/click/0596805527
[2] http://oreilly.com/catalog/9780596517748
[3] http://www.manning.com/resig/
[4] http://stackoverflow.com/users/251305/james-kovacs
[5] http://stackoverflow.com/questions/74884/good-javascript-books
[6] http://osteele.com/archives/2006/04/javascript-memoization
[7] http://www.ibm.com/developerworks/web/library/wa-memleak/
[8] http://ejohn.org/apps/learn/
[9] http://sixrevisions.com/javascript/6-advanced-javascript-techniques-you-should-know/

(4) +1 - the best js programmers i know love 'js: the good parts' - Sebastian Patane Masuelli
(10) For more advanced folks, John Resig's Secrets of a JavaScript Ninja is excellent. He draws examples from jQuery, Prototype, and other libraries, but it is more about advanced JavaScript than a particular library. - James Kovacs
@James - looks like an answer to me ;-) - Derek Adair
@Derek - I didn't include it as a separate answer as Crazy did a good job summarizing some starting resources. "Secrets" is fantastic once you already have a decent understanding of JavaScript and want to go deeper. Thanks for the vote of confidence. - James Kovacs
You could also check out eventedmind.com/courses/1-advanced-javascript-concepts. It's the first two chapters of a course I'm putting together. - cmather
Don't forget the JavaScript Handbook by O'Reilly.... Helped me quite a lot. - think123
1
[+7] [2010-11-24 17:30:50] tim

don't miss lord crockford's " crockford on javascript [1]" lecture series

[1] http://yuiblog.com/crockford/

2
[+6] [2010-11-24 17:08:20] Adam

Read Douglas Crawford's JavaScript classic, JavaScript: The Good Parts [1]. It should give you some ideas aboout OOP in JavaScript and prototypal inheritance. You can find other useful resources on the author's website http://javascript.crockford.com/

I also find that O'Reily's cookbook series can give you ideas about how to use languages in ways you have not thought of. JavaScript Cookbook [2] and JQuery Cookbook [3]

Of course reading the questions here on SO can help [4].

As always the documentation is your friend. I use Mozilla's Development Center [5] for JavaScript and JQuery has excellent documentation [6].

[1] http://rads.stackoverflow.com/amzn/click/0596517742
[2] http://rads.stackoverflow.com/amzn/click/0596806132
[3] http://stackoverflow.com/questions/tagged/javascript
[4] http://stackoverflow.com/questions/tagged/javascript
[5] https://developer.mozilla.org/En/JavaScript
[6] http://docs.jquery.com/Main_Page

I've been trying to use the MDC as much as possible... but I'm afraid a lot of it is still over my head... - Derek Adair
3
[+5] [2010-11-26 09:16:33] mdikici

This [1] is the best article about javascript module pattern i found. You can also have a basic idea about what is closure and object scope in javascript.

[1] http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

wow that is really good! - Derek Adair
This deserves more upvotes for sure - Derek Adair
4
[+4] [2010-11-24 17:10:54] MaMa

I would recommend reading Javascript: The Good Parts, as an essential tutorial to JavaScript.

I would also highly recommend reading through the jQuery source, since the project is familiar to you, it is very well documented and follows good coding conventions.


5
[+4] [2010-11-24 19:47:29] Fatih

I just suggest Nicholas Zakas's Professional JavaScipt for Web Developer. It is a really great book starts from language basics and covers deep topics in JS and also advanced technics. This book is my indispensable.

Professional JavaScript for Web Developers @Amazon [1]

Then a JavaScript developer needs to read "The Real JavaScript Master" Douglas Crockford's JavaScript: The Good Parts book. It is the industries milestone.

The Master's Milestone @Amazon [2]

[1] http://rads.stackoverflow.com/amzn/click/047022780X
[2] http://rads.stackoverflow.com/amzn/click/0596517742

6
[+2] [2010-11-24 17:19:04] Stephen

This is by no means a full resource, but the information here is definetely worth a read:

Let's make the web faster [1]

It's an article about optimizing your JavaScript, written by software engineers at Google who made GMail and Chrome. Really good stuff if you're looking to improve your code.

If you're really in the mood to chop up some cool web applications, you should try to grok Closure Library [2]. Some of it is rocket surgery, but you can learn a lot of good habits and best practices by working with the framework. (It's the same framework that runs GMail and Google docs)

Also, always remember to run your code through JSLint [3]. It'll make you cry!

[1] http://code.google.com/speed/articles/optimizing-javascript.html
[2] http://code.google.com/closure/library/
[3] http://jslint.com/

7
[+2] [2010-11-24 19:42:00] ilpoldo

After I picked up jQuery, with a year of Ruby on Rails on my shoulders, I stumbled on:

Javascript Object Oriented Programming [1].

It really helped me getting the hang of javascript and made me appreciate a more functional style while fitting it all in my object oriented mindset.

After that book I actually went back to my ruby code and deleted some classes and functions here and there and replaced them with procs (functions you can throw around)

[1] https://www.packtpub.com/object-oriented-javascript-applications-libraries/book

8
[+2] [2010-11-24 23:48:31] cambraca

You could go through jQuery's source. You can learn some fun stuff about javascript from that ;)


9
[+1] [2010-11-24 17:08:07] Sebastian Patane Masuelli

I'm on the same exact boat. Personally decided to go back to basics and do all the javasript tutorials at the W3Schools [1]. If there's better resources out there for understanding how to best code js for those without CS backgrounds, i'd love to see them.

[1] http://w3schools.com/js/default.asp

(2) stackoverflow.com/questions/4269426/… - Fatih
this doesn't really address the question... ps hilarious plug lorenzo +1 for that - Derek Adair
@Derek: i guess you have a point, when i answered it there were no other answers, i was just trying to help. That's why i gave CrazyJuggler a +1 when i saw his anwser later. - Sebastian Patane Masuelli
thank you for your time my friend! - Derek Adair
10
[+1] [2010-11-24 20:27:29] tkahn

I learned a lot by writing my own jQuery plugin. It gave me a hands on project that posed some interesting problems and forced me to learn more about the inner workings of JavaScript.

If you take it one step further and publish your plugin at the jQuery web site, you will have people that download, use and comment on your code. Knowing that you will put effort into making sure that the code you release is good. Of course you'll always make mistakes, but that's part of the process.

Regarding memory leaks when you work with jQuery, I found that using the .data() method [1] is a good way of storing data in a safe way (avoiding circular references and thus memory leaks).

So, come up with an interesting or just fun idea for a jQuery plugin and start coding! If the plugin is a user interface plugin, consider basing it on the jQuery UI widget factory. It's a great base for developing new user interface plugins.

Best of luck!

/Thomas Kahn

[1] http://api.jquery.com/data/

do you have any interesting resources regarding the jQuery data method? more particularly something that may outline its inner workings. - Derek Adair
Here's a tutorial that has some interesting info: tutorialzine.com/2010/11/jquery-data-method And if you are really interested, you can always open up the source code for jQuery itself and snoop around to see how it works. code.jquery.com/jquery-latest.js - tkahn
11
[+1] [2011-04-21 17:20:24] Rakshit Pai

Eloquent Javascript [1] is a good starting point, follow that up with Javascript: The Good Parts [2]

[1] http://eloquentjavascript.net/
[2] http://rads.stackoverflow.com/amzn/click/0596517742

12