Overview

JavaScript is a ubiquitous programming language on the web. It powers animations, audio/video, geolocation, data visualization, peer-to-peer communication, web storage, and, most recently, servers. Facebook, Twitter, Gmail, and Dropbox, to name a few popular websites, all use JavaScript heavily. In fact, Dropbox explicitly requires "Mastery of javascript" for one of their software engineer positions.

It's clear that JavaScript has real-world applications, and that's exactly what this course focuses on. Each of the projects and in-class activities is based on some existing product. After finishing this course, students will have implemented their own versions of Instagram, Piazza, and Yelp, among other sites. Indeed, this course is focused on pragmatic, applicable knowledge.

Course logistics

ApplicationThe course is limited to 40 students, who will be selected by application. The application is available at https://goo.gl/forms/0pXFAgQDjngOn1Wv1 . The deadline for submission is 1/13/2018 (Saturday) at 11:59PM. Class will still be held during the first week (1/8/18 - 1/12/18). If your enrollment deadline is earlier than January 15th, the anticipated admission release date, please contact Vivek at the specified email below.
Date/TimeTBD
LocationTBD
Units2 Pass/Fail
InstructorsVivek Nair (vnair611@gmail.com)
Staff emailcs42-win1718-staff@lists.stanford.edu
Office hoursVivek: TBD
Grading criteriaSee lecture 1.
Late day policyYou have 3 late days, exactly 24 hours each. Additional extensions are only offered in case of documented medical illness and family emergencies. If you exceed your allotted late days, you will receive no credit for that assignment and for the class overall.
PrerequisitesCS107 (or equivalent experience)
Explore courseshttp://goo.gl/naINjW

Schedule

Week 1 (1/8 - 1/12)

1.1 JS Fundamentals

Basic syntactic structure and elements of Javascript: variables, types, conditionals, loops, functions. Brief overview of HTML.

1.2 Instagram I Activity

We'll implement a basic version of Instagram together in class! Download the starter files before-hand.

Week 2 (1/15 - 1/19)

2.1 & 2.2 HTML, Callbacks, Objects, DOM I

What exactly are callbacks, and why do we use them? What is HTML, and how does it interface with JavaScript?

Warmup Assignment: 42 Flavors

Week 3 (1/22 - 1/26)

3.1 DOM II, Events

Traversing the DOM with selectors. Attaching handlers to elements that fire when interesting events occur.

3.2 DOM Attributes

Modifying attributes, inserting/deleting elements, and relative traversal.

Assignment 1: Piazza

Week 4 (1/29 - 2/2)

4.1 Task List I Activity

Creating a task list using our knowledge of the DOM, events, and callbacks.

4.2 Task List II Activity

For take two, we'll employ templating and event delegation to decompose and simplify our task list implementation.

Week 5 (2/5 - 2/9)

5.1 HTTP Requests and Responses

What happens when you visit a site in your web browser? What is HTTP and what are the various request types? How do you pass parameters in requests?

Making HTTP requests with JavaScript, domain names, and the same origin policy. Extending our Instagram app by pulling photos off Flickr.

Assignment 2: Yelp

Week 6 (2/12 - 2/16)

6.1 Instagram II Activity

Adding realtime commenting to our Instagram app.

6.2 Node.js and Express

Server-side JavaScript with Node.js and Express. Modules, route handling, and static assets.

Week 7 (2/19 - 2/23)

7.1 Soundcloud Finder

Searching and playing songs dynamically from Soundcloud.

7.2 MongoDB

Integrating MongoDB, a NoSQL document database, into Node.js applications for persistence.

Assignment 3: Newsfeed

Week 8 (2/26 - 3/2)

Shorten me maybe? Creating your own URL shortener, like bit.ly.

8.2 Objects and Prototypal Inheritance

New operator, constructors, this keyword, and prototype chains.

Week 9 (3/5 - 3/9)

9.1 Objects and Prototypal Inheritance (cont.)

New operator, constructors, this keyword, and prototype chains.

Using objects and inheritance to implement the classic game of snake.

Week 10 (3/12 - 3/16)

10. callback(success);

Interview questions, funny videos, and next steps. Good luck with finals!

Readings

View
Course reader
View
Git handout
View
Templating handout
View
localStorage handout
View
Event delegation handout
View
MongoDB handout