Where do I begin learning all the different JavaScript technologies/libraries?

Question

I'm building a site that's sort of a cross between StackOverflow and Digg (only a different genre). Typically in the past I would have just built it using ASP.Net web forms. However I want to use this project as a way to learn new technologies. I'm using ASP.Net Mvc which is really great, but I need to learn/use some kind of javascript libraries.

For instance, when someone votes on a post I want it to be updated with the vote count immediately, or if someone types in text into the "tags" textbox, I want it to give a drop-down of currently used tags etc. Basically I want to provide a lot of the AJAXy stuff for my site.

So my question is where to I begin? I feel bombarded with so many options and I'm not sure where to start or even what they are. Can someone straighten me out and provide some explanation and direction?

• JSON
• JQuery
• MS-AJAX

I'm sure there are bunch of others I can recall at the moment.

Answer 1

You should definitely start with the basics of Javascript. Start with things like printing "Hello World" to the page. Move on to basic language features like variables, loops, conditionals, and functions. I recommend the W3Schools Introduction to Javascript. Don't get too caught up in trying to do object-oriented programming in Javascript. It is painful and confusing, even for some experienced Javascript programmers.

Next I strongly recommend learning to use a cross-browser Javascript library, rather than trying to do everything by hand (specifically: interacting with the DOM, performing XmlHttpRequests aka AJAX calls, etc.). I recommend the jQuery library. It provides a solid foundation for all of the cool AJAX-y things you want to do, and there are loads of plugins available for it.

jQuery is a Javascript framework that allows easy and reliable interactions with the Document Object Model (DOM). In simplest terms, the DOM is the representation of all the HTML elements in a web page. The DOM is slightly different from browser to browser, and interacting with it "by hand" is tedious and error prone. jQuery solves this problem by essentially doing all the hard work behind the scenes. It is much more powerful than that, really, but that's the major feature. It also provides support for page events, custom events, plugins, CSS manipulation, and much more.

JSON is another term you mentioned. It stands for JavaScript Object Notation. JSON is simply a lightweight way to represent structures in Javascript (and other languages too, actually). To be honest, the Wikipedia JSON Article provides a much better summary of how JSON is used with AJAX than I ever could, so you might want to give it a read.

Here is the basic order of events:

1. Your Javascript code makes an AJAX call to a web page. You can do this using the AJAX functions in jQuery.
2. The result produced by that web page is a JSON object. For example, it might produce a string that looks like: { 'firstname':'Robert', 'lastname':'Smith' }
3. The result is received by your AJAX call and evaluated using the special Javascript "eval" function.
4. You are left with a native Javascript object that you can work with in your code. You can then do stuff like: document.write('Hello ' + result.firstname + ' ' + result.lastname)

Here are a few useful links I have collected over the past year or so that have helped me. I hope they help you too!

• How jQuery Works
• jQuery Plugins
• 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources
• 75 (Really) Useful JavaScript Techniques
• AutoCompleter Tutorial

The most important thing to remember is: learn by doing. Experiment. Try new things. Make a bunch of proof of concept pages. With Javascript, that's really the best way to get your feet wet. Good luck!

Answer 2

Start by learning the basics of Javascript. It's important you know how to use it's internals before you dive into deeper abstractions. Mozila has a fantastic resource on Javascript, including an overview guide.

Next, pick up a good framework, it will help you a great deal performing DOM manipulations, which is what Javascript is generally used for. A framework will save much time on cross-browser implementation differences and provide a good base to develop from. There is plenty of selection here, and you'll do fine with either of the popular choices. Personally, I'd pick jQuery for its concise API and great plug-in library.

Along the way you'll learn the definitions of distinct features / notations, such as JSON (which means Javascript Object Notation, and is used to define portable data structures in Javascript). For any specific questions you have, you can always google or come back to SO ;)