Learn JavaScript Properly - Awesome Guideline

There has a lot of JavaScript tutorial on the internet. But all tutorial isn't effective. I've collected the tutorial from SexyJS. It's the best guideline for learning JS I've ever seen. Also, many experienced JS developer references the guideline.

You must see the post about CodeCademy JavaScript Index.

Below of the post, you'll get the download link of PDF's.

Weeks 1 and 2 (Introduction, Data Types, Expressions, and Operators

1.      If you do not already know HTML and CSS very well, complete the Web Fundamentals Track on Codecademy.

Read the Introduction and Chapters 1 and 2 of Professional JavaScript for Web Developers.

2.      Work through the Introduction to JavaScript section of the JavaScript Track on Codecademy.

3.      Read the Preface and Chapters 3 and 4 of Professional JavaScript for Web Developers. You can skip the section on “Bitwise Operators”; it is hardly likely you will use those in your JavaScript career.

And again, make sure you stop and write the example code in your browser’s console (or JSFiddle) and experiment—change some of the variables and tweak the code a bit.

4.      Read chapter 5 of JavaScript: The Definitive Guide. No reading for Professional JavaScript for Web Developers, you have learned the material already in the last chapter.

5.      And work through sections 2 to 5 of the JavaScript Track on Codecademy.

Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)

1.      Read my post JavaScript Objects in Detail

Read chapter 6 of Professional JavaScript for Web Developers. NOTE: Only read the “Understanding Objects” section.

Any of the 3 is fine, although the 2 textbooks go into more detail: the extra detail you can skip confidently, if you read and thoroughly understand my post.

2.      Read chapters 5 and 7 of Professional JavaScript for Web Developers

3.      At this juncture, you should be spending a lot of time writing code in your browser’s console and testing if-else statements, for loops, Arrays, Functions, Objects, and more. It is critically important that you know (and keep practicing) how to code independently (without help from Codecademy) in your browser. By the time you get back to Codecademy, you shouldn’t need any help or hints. Every assignment should be easy for you.

If you are still struggling with Codecademy, go back to your browser and keep hacking away. This is where you will learn the most. This is analogous to Lebron James honing his skills as a youth in the “streets” (the neighborhood basketball courts), or to Bill Gates hacking away in his basement.

There is tremendous value in your hacking away and learning bit by bit on your own. You have to see the value in this strategy, and you have to embrace it and trust that it will work.

False Sense of Accomplishment When Using Codecademy

The biggest problem with Codecademy is that the hints and little code snippets help you so much that you have a false sense of accomplishment when you are progressing through the exercises easily. You wouldn’t know it at the time, but much of what you are doing is not on your own.

// Only one question is in this array, but you will add all the questions.var allQuestions = [{question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0}];

— Add client-side data validation: make sure the user answers each question before proceeding to the next question.
— Add a “Back” button to allow the user to go back and change her answer. The user can go back up to the first question. For the questions that the user has answered already, be sure to show the radio button selected, so that the user is not forced to answer the questions again, which she has completed.
— Use jQuery to add animation (fade out the current question and fade in the next question).
— Test the quiz on IE 8 and 9, and fix any bugs. This will give you a good workout
— Store the quiz questions in an external JSON file.
— Add user authentication: allow users log in, and save their login credentials to local storage (HTML5 browser storage).
— Use cookies to remember the user, and show a “Welcome, First Name” message when the user returns to the quiz.
— Use Twitter Bootstrap for the entire page layout, including the quiz elements to make it look more professional. As an added bonus, use the tabs user interface component from Twitter Bootstrap and show 4 different quizzes, one on each tab.
—
— Learn Handlebars.js and add Handlebars.js templating to the quiz. You should no longer have any HTML in your JavaScript code. Your quiz is getting more advanced bit by bit.
— Keep a record of all the users who take the quiz and show each user how her score ranks amongst the scores from other quiz-takers.
— Keep a record of all the users who take the quiz and show each user how her score ranks amongst the scores from other quiz-takers.

1. Javascript the definitive guide 8th edition

2. Professional JavaScript for Web Developers - 3rd.Edition Jan.2012.Wrox

Now, Codecademy is still great for helping you to learn how to code, particularly in the manner in which it guides you through the process of developing small projects and small applications from very basic code constructs like if statements, for loops, functions, and variables.

4.      Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).

5.      While you are on Codecademy, go ahead and build the 5 little Basic Projects on the Projects track. After this, you are done with Codecademy. And this is a good thing, because the more you work on your own, the faster you will learn and the better prepared you will be to start programming on your own.

6.      Read chapters 8, 9, 10, 11, 13, and 14 of Professional JavaScript for Web Developers. This book does not cover jQuery, and the jQuery coverage on Codecademy is insufficient. Follow this jQuery course—it is free: http://try.jquery.com/

7.      Work through the entire jQuery course at http://try.jquery.com/

Your First Project—A Dynamic Quiz

At this juncture, you have learned enough to build a solid web application that is manageable. Don’t proceed any further until you can successfully build this application I describe below. As I noted earlier, if you are stuck, ask questions on Stack Overflow and reread sections of the book to properly understand the concepts.

You are building a JavaScript quiz application (you will use HTML and CSS as well) that will function as follows:

·         It is a simple quiz that has radio button choices, and it will show the user her score upon completion.

·         The quiz can show any number of questions and any number of choices.

·         Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.

·         Use an array to store all the questions. Each question, along with its choices and correct answer, should be stored in an object. The array of questions should look similar to this:

·         Dynamically (with document.getElementById or jQuery) add the next question and remove the current question from the screen, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.

·         You can ask for help in the comments below or preferably on Stack Overflow. You are likely to get a prompt and accurate answer on Stack Overflow.

Weeks 5 and 6 (Regular Expressions, Window Object, Events, jQuery)

1.      Read the chapters 20 and 23 of Professional JavaScript for Web Developers.

2.      Remember to keep typing out all the example codes in Firefox console and tweak each piece of code to experiment with it to really understand how it works and what it does.

3.      At this point, you should be very comfortable with JavaScript, probably feeling like a Jedi. You are not quite a Jedi yet, you must keep using your newly acquired knowledge and skills as often as possible to keep learning and improving.

4.      Improve Your Quiz Application From Earlier:

Weeks 7 and, if necessary 8 (Classes, Inheritance, more HTML5)

1.      Read my blog post, OOP In JavaScript: What You NEED to Know.

Or read chapters 6 (only the “Object Creation” and “Inheritance” sections this time) 16, 22, and 24 of Professional JavaScript for Web Developers. NOTE: The reading in this section of the book is the most technical reading you will encounter in this entire road map. It is up to you if you want to read all of it. You should at least learn the Prototype Pattern, Factory Pattern, and Prototypal Inheritance. You don’t have to know all the other patterns.

2.      Improve Your Quiz Application Even Further:

3.      Later (after you have learned Backbone.js and Node.js), you will use these two technologies to refactor your quiz code and turn the same quiz into a sophisticated, single-page, modern web application built with the latest JavaScript frameworks. And you will store the users’ authentication credentials and scores in a MongoDB database.

4.      Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind).

PDF Download links:

1. Javascript the definitive guide 8th edition

2. Professional JavaScript for Web Developers - 3rd.Edition Jan.2012.Wrox

Share the post if you like. Also, you can share your comment about the post.

Thanks.

Author: ThemePackNet