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/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 Vivek at the specified email below.
Date/TimeTuesday and Thursday between 8:30 AM and 9:20 AM (50 minutes)
Units2 Pass/Fail
InstructorsVivek Nair (vnair611@gmail.com)
Staff emailTBD
Office hoursVivek: 7 PM on Thursdays online through Skype (username: vnair611). Send me a request and let's chat!
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


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?

Warmup Assignment: 42 Flavors

Week 3 (4/16 - 4/20)

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

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.

Assignment 2: Yelp

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.

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.

Assignment 3: Newsfeed

Week 8 (5/21 - 5/25)

8.1 and 8.2 URL Shortener

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

Week 9 (5/28 - 6/1)

9.1 callback(success);

Funny videos and next steps. Good luck with finals!

Introduction to the React web framework. Workshop will take place on May 31st at 8 PM. Location TBD. This workshop is entirely optional.

Bundle of all files


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