Learning JavaScript the Right Way


Full Curriculum is here: JavaScript is Sexy

Books: Either JavaScript the Definitive Guide or Professional JavaScript for Web Developers

Optional Book:
Eloquent JavaScript

Tools:

JSFiddle
Cloud 9 IDE
JSBin
GitHub

Started the week of 03.31.14

Week 1 - 2 (Introduction, Data Types, Expressions, and Operators

  1. Chapter 1 PJWD
  2. Chapter 2 PJWD
  3. Intro to Javascript Code Academy
  4. Chapter 3 PJWD
  5. Chapter 4 PJWD
  6. Section 2 - 5 JavaScript Track of Code Academy

Week 3-4 (Objects, Arrays, Functions, DOM, jQuery)

UPDATE: You should work on Code Academy Sections (at least the first section of Objects) before reading about Objects in the books. This section might realistically take 3 weeks instead of 2.

Eloquent JavaScript needs to be considered as one of the primary textbooks, particularly if you have limited programming experience.

weeks 3-4 contain too much content, and it is more realistic for the content to be completed in 4-6 weeks.

  1. Read post on JavaScript Objects
  2. Read chapter 6 of PJWD. NOTE: Only read the “Understanding Objects” section.
  3. Read Chapter 5 & 7 of PJWD
  4. Code Academy Sections 6-8
  5. Code Academy build the 5 basic **projects** in the project track.
  6. Read chapters 13, 15, 16, and 19 of JavaScript: The Definitive Guide. Or 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/

Build Dynamic Quiz Project

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:

// 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}];

` * 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 chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.
    Or 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.

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