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. .

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 30 students, who will be selected by application. The application is available at https://goo.gl/forms/6XNbKKoRcm00w75y2. The deadline for submission is 4/9/2018 (Monday) at 11:59PM. Class will still be held during the first week (4/2/18 - 4/6/18). If your enrollment deadline is earlier than April 10th, the anticipated admission release date, please contact the staff at one of the specified email below.
Date/TimeTuesday and Thursday from 4:30 PM to 5:20 PM (50 minutes)
LocationBuilding 200-303
Units2 Pass/Fail
InstructorsKarthik Viswanathan (karthik.ksv@gmail.com)
Vivek Nair (vnair611@gmail.com)
Staff emailcs42-spr1718-staff@lists.stanford.edu
Office hoursKarthik: Thursdays 5:30 PM to 6:30 PM in Tressider
Vivek: Tuesdays 5:30 PM to 6:30 PM in Tressider
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 (4/2 - 4/6)

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 (4/9 - 4/13)

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?

Week 3 (4/16 - 4/20)

3.1 & 3.2 DOM II, Events and DOM Attributes

Traversing the DOM with selectors. Attaching handlers to elements that fire when interesting events occur. Modifying attributes, inserting/deleting elements, and relative traversal.

Due 4/26 at 11:59 PM

Warmup Assignment: 42 Flavors

Week 4 (4/23 - 4/27)

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.

Due 5/10 at 11:59 PM

Assignment 1: Piazza

Week 5 (4/30 - 5/4)

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.

Week 6 (5/7 - 5/11)

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.

Due 5/24 at 11:59 PM

Assignment 2: Yelp

Week 7 (5/14 - 5/18)

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.

Week 8 (5/21 - 5/25)

8.1 and 8.2 URL Shortener

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

Due 6/7 at 11:59 PM

Assignment 3: Newsfeed

Week 9 (5/28 - 6/1)

9.1 callback(success)

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