Learning Javascript

A 12 week introduction to JavaScript curriculum for weekly JavaScript Discussion Group sessions.

Syllabus

Core Reading

• Learning JavaScript, 3rd edition (2016)
• You Don't Know JavaScript (2019) and/or You Don't Know JavaScript Yet (2020-2021, in progess)
• JavaScript: The Good Parts (2008)
• JavaScript Patterns by Stoyan Stefanov (2010)
• Learning JavaScript Design Patterns by Addy Osmani (2012)

Additional Reading

• JavaScript: the Definitive Guide, 7th edition (2020)
• Eloquent JavaScript (2018)
• Beginning JavaScript, 5th edition (2015)

Learning Tips

• Skim the chapter headers, read quickly, and then read again more throughoughly.
• Don't skim over the code examples. Read all the code and try to understand how it works.
• Have an open JavaScript console nearby to test the code that you're reading.
• Watch videos at faster than normal speed, up to 2x speed.
• Take Coursera’s Learning How to Learn course.

Programming Tips

• If you have to do something more than three times, find a way to automate it.
• If you find yourself copying and pasting code within your application, consider creating shared code (a shared Array, Object, or Function).

Table of Contents

1. Preparation
2. Data Types, Control Flow, and Loops
3. Basic Debugging
4. Functions
5. Arrays and Objects
6. Strings, Date/Time, Math
7. The BOM, DOM, and Handling Events
8. Introduction to Node JS
9. Working with Data
10. ES6+ and Shorthand JS
11. Programming Paradigms
12. Programming Design Patterns
13. Projects

---

Preparation

1. Get the books.
2. Create a Codepen account.
3. Create a GitHub account.
4. Download VS Code or use your favorite IDE.

Introductory Lessons

1. A Dao of Web Design
2. Watch: Enhance! by Jeremy Keith [1:03:13]
3. Watch: The Long Web by Jeremy Keith [56:31]
4. Work through the JavaScript Primer
   1. JS in the console
   2. JS on the web (CodePen)
   3. JS in files (.js files)
   4. JS in the terminal (Node.js)
5. Learning JavaScript
   1. Your First Application [1-14]
   2. JavaScript Development [15-24]
6. JavaScript: The Good Parts
   1. Good Parts

Data Types, Control Flow, and Loops

[90 minutes reading]

1. You Don't Know JS Yet: Get Started
2. Learning JavaScript
   1. Literals, Variables, Constants, and Data Types [25-46]
   2. Control Flow [47-70]
   3. Expressions and Operators [71-92]
3. JavaScript: The Good Parts
   1. Grammar
4. Beginning JavaScript
   1. Chapter 1 (Introduction to JavaScript and the Web) [1-16]
   2. Chapter 2 (Data Types and Variables) [17-55]
   3. Chapter 3 (Decisions and Loops) [56-86]

Exercises

In the JavaScript console:

1. Store a variable.
2. Write code that counts down from 10 to 1.
3. Write code that outputs a tetraktys. Write into the page:
4. <script>
5. <link>

Functions

[90 minutes reading + 1 article + 4? hour practice]

1. Learning JavaScript
   1. Functions [93-106]
   2. Learning JavaScript: Scope [107-120]
2. Beginning JavaScript: Chapter 4 (Functions and Scope) [87-98]
   1. Callbacks
   2. Closures
   3. Recursion
3. JavaScript: The Good Parts
   1. Functions
4. You Don't Know JS Yet: Scope & Closures
5. JavaScript Patterns by Stoyan Stefanov: Chapter 4 (Functions)

Exercises

1. Write and run a function that takes two numbers and adds them together.

Basic Debugging

[30 minutes reading + 22 minutes video + 3 articles]

1. Article: Code Conventions for the JavaScript Programming Language
2. Beginning JavaScript: Chapter 18 (Common Mistakes, Debugging, and Error Handling) [549-583]
3. 10 Mistakes That JavaScript Beginners Often Make
4. Debugging JavaScript: Understanding JavaScript Error Messages
5. Debugging in the Browser
   • Watch: Google Chrome Debugging: Debugging JavaScript using Breakpoints with the Google Chrome Developer Tools [11:24]
   • Watch: Firefox Debugging: Debugging JavaScript by Using Breakpoints (in Firefox/Firebug) [10:43]
   • Internet Explorer Debugging: How to use F12 Developer Tools to Debug your Webpages

Arrays and Objects

[90 minutes reading]

1. Learning JavaScript:
   1. Arrays and Array Processing [121-136]
   2. Objects and Object-Oriented Programming [137-152]
2. Beginning JavaScript: Chapter 5 (JavaScript --- An Object-Based Language) [99-152]
3. JavaScript: The Good Parts
   1. Objects
   2. Arrays
4. You Don't Know JS: this & Object Prototypes
   1. Chapter 1: this Or That?
   2. Chapter 2: this All Makes Sense Now!
   3. Chapter 3: Objects
5. JavaScript Patterns by Stoyan Stefanov: Chapter 5 (Object Creation Patterns)

Exercises

1. Write and run a function ....

Strings, Date/Time, Math

[90 minutes reading + 5 hour practice time]

1. Learning JavaScript:
   1. Date and Time [209-218]
   2. Math [219-226]
2. JavaScript: The Good Parts
   1. Regular Expressions
   2. Methods
3. Beginning JavaScript
   1. Chapter 6 (String Manipulation) [153-192]­
   2. Chapter 7 (Date, Time, and Timers) [193-204]

Exercises

1. Write a function that outputs a reverse string.
2. Write a function that counts the number of times a single letter is in a word.
3. Write a function the identifies if a word is a plaindrome.
4. Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.

The BOM, DOM, and Handling Events

[90 minutes reading + 2 articles + project time]

1. Learning JavaScript: JavaScript in the Browser [247-265]
2. Beginning JavaScript
   1. Chapter 8 (Programming the Browser) [205-228]
   2. Chapter 9 (DOM Scripting) [229-270]
   3. Chapter 10 (Events) [271-334]
   4. Chapter 11 (HTML Forms: Interacting with the User) [335-390]
3. JavaScript Patterns by Stoyan Stefanov: Chapter 8 (DOM and Browser Patterns)

Project

1. Create a Carousel

Introduction to Node JS

1. Learning JavaScript: Node [265-282]
2. Additional: 100 Days of Node

Exercises

1. Install Node, npm

Working with Data

[70 minutes reading + 2 articles]

1. Learning JavaScript: Asynchronous Programming [189-208]
2. Beginning JavaScript
   1. Chapter 12 (JSON) [391-402]
   2. Chapter 13 (Data Storage) [403-434]
   3. Chapter 14 (Ajax) [435-462]
3. Working with HTML5 data attributes

Project

1. Create a Quiz
2. Improve Your Quiz
3. Create a ToDo list

ES6+ and Shorthand JS

1. JavaScript --- Just another introduction to ES6 [5:00]
2. Toolsday.io: Solved by ES6 (ES2015) [19:41]
3. How to simplify your codebase with map(), reduce(), and filter() in JavaScript
4. 25+ JavaScript Shorthand Coding Techniques

Exercises

1. Rewrite “FizzBuzz” to be as short as possible.

Programming Paradigms

[4 articles + additional reading + project work]

1. Introduction to Object-Oriented JavaScript
2. Prototypal Inheritance in JavaScript
3. JavaScript: The Good Parts
   1. Inheritance
4. Learning JavaScript: Functions and the Power of Abstract Thinking [173-188]
5. You Don't Know JS: this & Object Prototypes
   1. Chapter 4: Mixing (Up) "Class" Objects
   2. Chapter 5: Prototypes
   3. Chapter 6: Behavior Delegation
6. JavaScript Patterns by Stoyan Stefanov: Chapter 6 (Code Reuse Patterns)
7. Prototypal Inheritance: The Two Pillars of JavaScript --- Part 1: How to Escape the 7th Circle of Hell
8. Functional Programming: The Two Pillars of JavaScript --- Pt 2: Functional Programming [14:00]

Exercise

1. Rewrite one of the projects using Classes
2. Rewrite one of the projects using Functional programming concepts
3. Rewrite one of the projects using Prototypal Objects-linking-to-other-Objects

Programming Design Patterns

[1 book + additional reading + project work]

1. JavaScript Patterns by Stoyan Stefanov: Chapter 7 (Design Patterns)
2. Learning JavaScript Design Patterns
3. Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript: Chapter 4

---

Projects

Create an Accordion

Requirements:

1. Create an accordion widget that you can open and close.
2. It should be closed on page load.
3. The initial button should contain text.
4. It should open to reveal a few paragraphs of text.

Create a Carousel

Requirements:

1. Build a Carousel with previous slide and next slide buttons.
2. The Carousel could contain any number of slides.
3. Display a slide number.
4. Each slide should be able to contain any HTML markup.
5. Toggle classes to animate the slide motion.

Create a Quiz

Requirements:

1. Create a simple multiple choice quiz that has radio button choices.
2. The quiz could show any number of questions and any number of choices.
3. 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 (Notice that only one question is in this example array; you will add many questions): var allQuestions = [{question: "Who is the strongest Avenger?", choices: ["Hulk", "Thor", "Point Break", "Iron Man"], correctAnswer: 0}];
4. Dynamically remove the current question and add the next question, when the user clicks the "Next" button. The Next button will be the only button to navigate this version of the quiz.
5. 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.

Improve Your Quiz

Requirements:

1. Add client-side data validation: make sure the user answers each question before proceeding to the next question.
2. 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.
3. Add animation (fade out the current question and fade in the next question).
4. Test the quiz on all browsers and fix any bugs. This will give you a good workout
5. Store the quiz questions in an external JSON file.
6. Add user authentication: allow users to log in, and save their login credentials to local storage (HTML5 browser storage).
7. Use a cookie to remember the user, and show a "Welcome, 'First Name'" message when the user returns to the quiz.

Create a To Do List

Requirements:

1. Prepopulate an array with a list of items.
2. Display the list of items.
3. An input field should allow the user to add an item to the list.
4. A delete button should allow the user to remove an item from the list.
5. An edit button should allow the user to update a list item.
6. Use local-session storage to maintain the state in the browser.