layout	permalink
default	/

Advanced JavaScript syllabus

If you are a teacher or interested in the design of the course, see the meta document.

Course: INFO1-CE9766, NYU SCPS
Instructor: Aidan Feldman, alf9@nyu.edu
Need help?
- - It sends message digests to people who aren't active in the room, so feel free to ask a question even if no one's around.
- Look through and create issues
- Office Hours during Hacker Hours (see schedule)
- Email for 1-on-1 help, or to set up a time to meet

Course Description

Learn best practices in JavaScript in this intensive, five-session course. Topics include data encapsulation, closures, binding, inheritance, and name spacing. Discover some of the lesser-known, yet useful, features of the language, such as how to debug JavaScript problems on different browsers and improve performance. Create interactive webpages using third-party JavaScript libraries.

Computers are provided in the lab, though you are encouraged to bring a laptop for in-class exercises.

Prerequisites

INFO1-CE9755 - JavaScript (syllabus) or equivalent
Understanding of variables, data types, control flow, and basic function usage in JavaScript
Strong intermediate knowledge of HTML, and at least basics of CSS
Basic jQuery knowledge (DOM interaction like adding/removing elements/classes, etc.)

These won't be enforced by the instructor, but you will be pretty lost without understanding those concepts. If you need a refresher, take a look at the Beginner Materials.

Course Overview

We will dive into the nuances of JavaScript, how prototypal inheritance compares to classical inheritance, and how this can be used to build dynamic and complex web applications. Modern tools like jQuery and BackboneJS will be discussed, but students will learn the building blocks of these frameworks and after this course be able to understand what is happening under the hood. The focus will be on development for browsers, though most applies to other systems like Node.js, Phonegap, etc. Topics covered include:

Encapsulation, closures and scope
Classical vs. prototypal inheritance
The event loop
AJAX and JSONP
- local
- remote (e.g. Foursquare)
Creating MVC-style models (a'la Backbone.js) from scratch
Test- and Pseudocode-Driven Development

Topics will be demonstrated through live-code examples/slides, available at advanced-js.github.io/deck. Additional exercises will completed in-class.

See this interview for more background.

Homework/Projects

All assignments are listed within the Course Outline.

Workflow

If you're using GitHub Desktop, these general instructions will help:

Enabling Edit->Automatically Sync after Committing is recommended. Here are the steps:

Fork the repository for the exercise/project (found under github.com/advanced-js).
Clone the repository to your computer.
Open the index.html file in a browser and open the Developer Tools.
Modify the files to complete your solution.
Refresh the index.html page to see the results, and repeat.
Make sure all of your code is committed.
Push/sync up to GitHub.
Create a pull request on the original repository. All assignments are due at the start of the following class, unless otherwise specified.
You can continue to push fixes and improvements until the close date (listed in Classes) – just add a comment in the pull request to let me know it's been updated.

When the pull request is created, you should see a message saying that "the Travis CI build is in progress" – this means that your solution is being automatically checked for syntax errors. If this "build" ends up failing (which will show a red "X"), click through the "details" link and scroll to the bottom to see what the errors were. Per the requirements below, please fix the issues and push up the changes.

Feedback will be given in the pull request, so please respond with your thoughts and questions! You are welcome to open the pull request early as a work-in-progress if you are stuck and want to ask a question. Note that your solution will also be live at http://USERNAME.github.io/EXERCISE.

Versions

For exercises with multiple Versions (V1, V2, etc.) listed in the README: these are intended as guidelines for how to complete the assignments in the smallest/simplest possible increments. You are expected to reach the highest Version for each assignment by the due date. See also: extra credit.

Requirements

These apply to real life, as well.

Travis CI build should pass, which includes:
- All HTML files should pass W3C Markup Validation.
- All written JS should pass JSHint.
Must apply "good programming style" learned in class
- Functions should be "short" (see Sandi Metz's rules for developers).
- Optimize for readability.
  - "Programs must be written for people to read, and only incidentally for machines to execute." -Harold Abelson
- Avoid using anonymous callbacks within other functions, especially if the callback is more than one or two lines.
- For projects, use Object-Oriented Programming.
Any borrowed code must be properly annotated.

Extra Credit

Bonus points for:

Automated tests
Creativity (as long as requirements are fulfilled)
Anything listed under BONUS in the README of the exercise.

Course Outline

Class 1

Are you new to front-end web development? Here's a secret: no one else really knows what they're doing either.
— Nicolas (@necolas) January 17, 2013

Introduction
- Put name on sticky note on back of monitor
- Discuss what the class is going to cover
- Everyone introduce themselves
  - Name
  - What you "do"
  - What are your goals for the class?
  - What's something in JS (or technology) you worry that your peers understand but you don't?
Setup
- How many people are comfortable with Git/GitHub?
- Install GitHub Desktop
  - If you are comfortable with Git already, you can skip this.
- Sign up for GitHub
GitHub workflow
- Walk through workflow
- Create pull request on students repository
Explain how slides work
Get through countdown_exercise slide
Talk through requirements

Homework

Join the chat room.
Set up your GitHub profile.
Access NYU Classes page, where grades will be posted.
- Documentation
Read JavaScript Garden.
Finish up and submit echo and countdown exercises.
Complete blink exercise.

Class 2

Look at various approaches for countdown()
- Show recursive solution
Developer Tools walkthrough
- Elements (HTML)
- Console (JS)
- Scripts (JS)
Pair program to build Memory v1 (see pairing tips)
Cover OOP, though "oop_inheritance" slide
- Encapsulation example
- Look at Backbone.js Events

Homework

Read Mozilla's Introduction to Object-Oriented Javascript
OOP exercise, through V2
Memory v2 (individual)

Class 3

Code review Memory
Get through oop_inheritance slide
Cover automated testing
Cover AJAX/CORS/JSONP (files)
- Network tab in Developer Tools

Homework

Class 4

Finish slides
Getting Serious example
- Quick intro to Backbone.js
  - Boilerplate
  - Click the Box example app
  - TDD?
Multiple async
- Promises/jQuery.Deferred
- Possibly show async library?

Homework

Learn about AJAX
Mashup
Improve your previous assignments

Class 5

Present and code review Mashup projects
Possible topics (vote?):
- Node.js
  - Server "Hello World" (from Node.js homepage)
    - HTTP module docs
  - HTTP requests
    - Status codes
    - Headers
  - CommonJS?
- Regular Expressions
  - Convert live input from a text area, e.g.
    - Link Twitter handles
    - Substitute select words for emoji, using emoji-css
- Object-Oriented design
- Code Retreat – possible "problems":
  - Game of Life
  - Tic Tac Toe

Pairing Tips

Three people is possible, but two works best
Agree on an editor and environment that you're both comfortable with
The person who's less experienced/comfortable should have more keyboard time
Switch who's "driving" regularly
Make sure to save the code and send it to both people

Resources

Required Reading

Beginner Materials

This class assumes you are confident with this material, but in case you need a brush-up...

Codecademy – JavaScript and jQuery
Eloquent JavaScript by Marijn Haverbeke, Chapters 1-5
Want to learn JavaScript in 2015?
How jQuery Works
see also – Other Lists

HTML/CSS/JS Sandboxes

Frameworks

Framework comparison: TodoMVC
Testing

Reference

Mozilla Developer Network and Learn JavaScript
w3schools
JavaScript: The Definitive Guide by David Flanagan
Simplified JavaScript Jargon

More Examples

map/reduce (in Underscore)

Grading

Class Participation – 30%
Homework – 70%

Statements on Plagiarism

SCPS

New York University takes plagiarism very seriously and regards it as a form of fraud. The definition of plagiarism that has been adopted by the School of Continuing and Professional Studies is as follows: "Plagiarism is presenting someone else's work as though it were one's own. More specifically, plagiarism is to present as one's own words quoted without quotation marks from another writer; a paraphrased passage from another writer’s work; or facts or ideas gathered, organized, and reported by someone else, orally and/or in writing. Since plagiarism is a matter of fact, not of the student's intention, it is crucial that acknowledgement of the sources be accurate and complete. Even where there is not a conscious intention to deceive, the failure to make appropriate acknowledgement constitutes plagiarism. Penalties for plagiarism range from failure for a paper or course to dismissal from the University.

Instructor

Reuse and building upon ideas or code are major parts of modern software development. As a professional programmer you will never write anything from scratch. This class is structured such that all solutions are public. You are encouraged to learn from the work of your peers. I won't hunt down people who are simply copying-and-pasting solutions, because without challenging themselves, they are simply wasting their time and money taking this class.

Please respect the terms of use and/or license of any code you find, and if you reimplement or duplicate an algorithm or code from elsewhere, credit the original source with an inline comment.

advanced-js/syllabus

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 5

Uh oh!

Languages

Error
Looks like something went wrong!

Packages