Course Outline
Below is an outline of the course, broken down by week. See mycourses for official due dates and dropboxes.
Week 1 (8/24 - 8/28)
Topics
- Review of Basic Web App Structure:
- HTML/CSS
- JS
- Detecting page load
- Selecting HTML elements on the page
- Event handlers
- JS Review:
- Did the page load?
- window.onload - Window Event Handlers
- Selecting elements on the page:
- Properties and methods of a DOM element - Element
- document.querySelector()
- document.querySelectorAll()
- document.getElementsByTagName()
- document.getElementById()
- Handling Events:
- "Caveman" Debugging:
- Did the page load?
- Intro Canvas:
- Methods:
- canvas.getContext('2d')
- ctx.fillRect(x,y,w,h)
- ctx.beginPath()
- ctx.closePath()
- ctx.moveTo(x,y)
- ctx.lineTo(x,y)
- ctx.stroke()
- ctx.fill()
- ctx.fillText("text")
- ctx.measureText("text")
- Canvas State attributes (Canvas Spec)
- ctx.fillStyle
- ctx.strokeStyle
- ctx.lineWidth
- ctx.shadowBlur
- ctx.shadowColor
- ctx.shadowOffsetX
- ctx.shadowOffsetY
- ctx.font
- ctx.textAlign
- ctx.textBaseline
- Methods:
Assignments
Slides
ICE
- Hello Canvas - topics:
- get reference to canvas drawing API
- set the fill and stroke colors
- stroke and fill rectangles
- fill text
- set the current font and text alignment
- shadows
- lines
- simple polygonal shapes
- Shape Viewer
Links
DOM Links
- MDN - API Reference
- MDN - window.alert()
- MDN - console.log()
- MDN - window
- MDN - var
- MDN - Element
- MDN - HTMLElement
- MDN - Global Event Handlers
- MDN - document.querySelector()
Canvas Reference
Week 2 (8/31 - 9/4)
Topics
- JavaScript Debugger
- More Canvas:
- Methods:
- ctx.arc()
- ctx.strokeText()
- State Properties:
- ctx.globalAlpha
- Methods:
- Buttons Sending Data:
- event.target
- anonymous functions
- Custom Data
Assignments
ICE
- - Shape Viewer (Buttons drawing rects, triangles, arcs)
- - Speed Circles - optional
- - Canvas Paint-1
Links
Demos
Week 3 (9/7 - 9/11)
(Monday 9/7 - Labor Day - no classes)
Topics
- More Canvas:
- ctx.clearRect()
- ctx.drawImage()
- Gradients:
- ctx.createLinearGradient()
- gradient.addColorStop()
- More JS:
- element.addEventListener()
- element.removeEventListener()
- Canvas Grapher ICE:
- arrays and array.push
- for loops
- Math.sin
Assignments
- Canvas Paint-2
- Audio Visualizer
Links
Canvas Paint-2 Links
Web Audio Links
Week 4 (9/14 - 9/18)
Topics
- Canvas Visualizer ICE:
- file reader
- array buffers/typed arrays
- web audio API
- request animation frame
- callbacks
Assignments
- ...
Links
- ...
Week 5 (9/21 - 9/25)
Topics
- JS Design Patterns
Assignments
- ...
Links
- ...
Week 6 (9/28 - 10/2)
Topics
- Canvas Transforms & Animations
Assignments
- ...
Links
- ...
Week 7 (10/5 - 10/9)
Topics
- Canvas Wrap-up
Assignments
- ...
Links
- ...
Week 8 (10/12 - 10/16)
(Monday 10/12 - No classes - Columbus Day)
(Tuesday 10/13 follows Monday schedule)
Topics
- Midterm Written Exam
Assignments
- ...
Links
- ...
Week 9 (10/19 - 10/23)
Topics
- Web Services:
- Web Services
- GET/POST
- URI / URL Syntax
- Query Strings
- REST
- XHR
- JSON
- JSONP
- Ajax
- JQuery
Assignments
- ...
Links
- ...
Week 10 (10/26 - 10/30)
Topics
- Web Services Continued
Assignments
- ...
Links
- ...
Week 11 (11/2 - 11/6)
Topics
- Intro to PHP
- PHP Forms
Assignments
- ...
Links
- ...
Week 12 (11/9 - 11/13)
Topics
- PHP:
- Web Services
- JSON API
- Simple RSS Proxy
Assignments
- ...
Links
- ...
Week 13 (11/16 - 11/20)
Topics
- Storing data in the cloud with the Parse Service
- Client/Server Project
Assignments
- ...
Links
- ...
Week 14 (11/23-11/24)
(Class only meets Monday 11/23 - Thanksgiving Break Week)
Topics
- ...
Assignments
- ...
Links
- ...
Week 15 (11/30 - 12/4)
Topics
- ...
Assignments
- ...
Links
- ...
Week 16 (12/7 - 12/11)
Topics
- ...
Assignments
- ...
Links
- ...
Finals Week (Monday 12/14 - Friday 12/18)
You will present your final projects during finals week: Time/Date TBA