Advance Javascript Skills

1. Read my post JavaScript Objects in Detail

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

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.

   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/

   And you can read chapter 19 of JavaScript: The Definitive Guide, if you have the book, for more on jQuery.

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

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:

1. It is a simple quiz that has radio button choices, and it will show the user her score upon completion.
2. The quiz can show any number of questions and any number of choices.
3. 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.
4. 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:
5. 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}];
6. 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.
7. 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.

1. Read 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:
   — 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.

1. Read my blog post, OOP In JavaScript: What You NEED to Know.
2. 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.
3. Improve Your Quiz Application Even Further:
   — 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.
4. 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.
5. Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind).

1. Read the entire Effective JavaScript book.
   This is my favorite JavaScript book. Every page is packed with incredible tips and insightful techniques. I kept whispering, “A Ha,” on many pages.

   It provides you with 68 excellent JavaScript techniques and concepts that you need to know as a JavaScript developer.

2. While reading the book, practice the concepts in WebStorm or your browser’s console to reinforce and completely understand the topics through hands-on practice. Simply trying to memorize everything you have learned without practicing is a great way to ensure you will forget them and never completely understand them.

1. Read the entire JavaScript Patterns book. Since we are trained JavaScript apprentices, we needn’t develop an application while learning the advanced JavaScript techniques. We only have to know and understand all the advanced techniques, so we can whip them out and use them or look them up and use them, when the need arises.
2. Additional: Since there are a few hours to spare this week, you should have enough time to watch Douglas Crockford’s Advanced JavaScript Videos. They are not too lengthy.