Javascript is the most popular web language right now. Its popularity will keep on rising and for sure it will stay as a very-sought-after language for at least 10 years more. Apart from the fact that Javascript deals with the latest interesting technologies in the web, learning Javascript will be one of the best decisions that you can take professionally.
My advice for the young Javascript developers is to keep their basics right. And basics can be right only when you follow the right steps.
Step 1 - Start With Pure Javascript. Don't Start With jQuery
Starting with jQuery is one of the worst things that you can do to yourself. It is just like you are trying to learn words before knowing alphabets. Writing in pure Javascript will keep your foundations strong. You will learn that the HTML DOM is the basis of all Javascript. You will learn the role of the DOM in a web page.
If you want you can leave out Javascript objects at this point. It will come up at a later point.
I strongly recommend you to write at least 3000 lines of pure Javascript code before moving to step 2.
Useful links :
The HTML DOM Document Object
JavaScript Tutorial
Step 2 - It is time to enjoy jQuery
jQuery will make things enormously simple for you. Migrating from writing code in pure Javascript to jQuery — you will feel that you have come to heaven. Use jQuery plugins.
One of the most important questions you should ask what a jQuery object is. Also now is the time to have at least an average idea of Javascript objects.
I strongly recommend you to spend 4-6 months writing jQuery code. You should come to a point where you are bored of writing the same old jQuery code and want to learn something new.
Useful links :
The jQuery Object
Working with objects
Step 3 - Do Some HTML5 Canvas Coding
Till now you would be having a strong idea on how to manipulate elements in a web page. HTML5 Canvas is special — you can control every pixel inside a canvas element. For people wanting to go into HTML5 game development, Canvas is the holy grail.
Canvas coding will show you a very different aspect of Javascript, that is why coding at least a sample canvas application is recommended.
Useful links :
HTML5 Canvas Tutorials
Step 4 - Code a jQuery Plugin
The point behind coding a jQuery plugin is to give yourself an advanced idea about Javascript objects. Although Javascript is not object oriented, everything in Javascript is an object. If you want to be an expert Javascript programmer, having a deep idea of Javascript objects is the way to go.
Useful links :
How to Create a Basic Plugin
Object.prototype
Step 5 - Learn About Web Animations
You are now ready to learn a bit about browser internals. You will learn how the browser renders elements on the page and methods on how to make this rendering optimized through your code. Web animations are very performance oriented. To have a smooth animation your Javascript code should be well optimized. You will try to make the frame rate of your animations same as the screen refresh rate (60 frames per second) so that the animations look smooth.
A 60 fps target frame rate is required not only for smooth animations but to have a smooth user experience as well. Facebook uses such methods in its infinite scrolling of posts.
Useful links :
Render-tree Construction, Layout, and Paint
Step 6 - Work On a Javascript MVC Framework
Javascript MVC Frameworks are used in the creation of single page web applications and are pretty powerful. Work on a framework such as Backbone or Angular or React.
At this point you may be tempted enough to leave out a framework. But a framework will show you many aspects of Javascript that you could not have imagined.
Useful links :
Backbone.js Tutorial - Beginners