Sergio Majluf

Creative JavaScript (Spring 2014)

Repository for Creative JavaScript at NYU ITP, Spring 2014

How do the tools and platforms we work with shape the things we create? How do creative and computational ideas transform across media, and what does it mean to create for the internet? Using p5.js, a new Processing library for the web, students will learn the basics of the JavaScript language and explore interactive media online. In addition to canvas graphics, the course will also cover HTML5 and DOM manipulation, working with APIs, data and JSON, interactivity across a range of devices, and the integration and use of other JS libraries. Strategies for code organization and structure, sharing and documentation, and version control (GitHub) will also be discussed. This is a beginner level class, though students should have taken Introduction to Computational Media or have similar experience. This two-credit course will meet the last seven weeks of the semester.

#Section Pages and Homework Links

• Lauren McCarthy, Tuesdays, 9:30am-12:00pm, Section Info
• Daniel Shiffman, Fridays, 12:30pm-3:00pm, Section Info
• All Notes and Homework Pages

#Mailing List

• Join ITP Creative JS Google Group.

#Syllabus

###Week 1

• Course intro / expectations
• Intro to workflow with p5.js: editor, server, console
• Processing > p5.js conversion
• Intro to JavaScript: basics

###Week 2

• “Classes” and prototypes
• Inheritance

###Week 3

• Beyond the canvas: HTML, CSS, DOM manipulation.

###Week 4

• p5.js with data / APIs (callbacks)

###Week 5

• Instantiating p5, namespacing.
• Encapsulation, closures and scope.
• Integrating other JS libraries / frameworks.

###Week 6

• Extensions: interfacing with hardware, working with mobile.
• Debugging techniques for JS.
  • Tutorial: good practices

###Week 7

• Final project presentations

#Resources

• p5.js on GitHub
• p5.js CDN

###Learning / Intro

• CodeAcademy: JavaScript
• How to learn JavaScript properly
• JavaScript the right way
• Code School
• JavaScript garden
• A re-introduction to JS by Mozilla
• JavaScript 101 from JQuery

###Reference

• JavaScript: The Definitive Guide
• Eloquent JavaScript, Marijn Haverbeke
• Beginning JavaScript, Paul Wilton and Jeremy McPeak

###Tools

• Checking code: JSLint / JSHint
• Browser debugging: Chrome Developer Tools (tutorial) / Firebug (tutorial)
• Sharing code snippets (useful for asking questions): gist.github.com