• 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:
    • element.onclick
  • "Caveman" Debugging:
    • console.log()
• 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 Properties:
    • ctx.fillStyle
    • ctx.strokeStyle
    • ctx.lineWidth
    • ctx.shadowBlur
    • ctx.shadowColor
    • ctx.shadowOffsetX
    • ctx.shadowOffsetY
    • ctx.font
    • ctx.textAlign
    • ctx.textBaseline

Slides

• Canvas Intro
• 230 Review

ICE

• Hello Canvas
• Hello Canvas 2
• Canvas App-1

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

• w3.org - Canvas API
• HTML Canvas Deep Dive

• No class 9/1 - Labor Day
• Last day Add/Drop 9/2
• JavaScript Debugger
• More Canvas:
  • Methods:
    • ctx.arc()
    • ctx.strokeText()
  • State Properties:
    • ctx.globalAlpha
• Buttons Sending Data:
  • event.target
  • anonymous functions
  • Custom Data

ICE

• - Canvas App-1 (Buttons drawing rects, triangles, arcs)
• - Speed Circles
• - Canvas Paint-1

Links

• HTML5 Custom Data attributes
• Canvas Cheat Sheet

Demos

• Speed Circles-1
• Speed Circles-2

• 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

ICE

• Canvas Paint-2
• Audio Visualizer

Canvas Paint-2 Links

• ctx.drawImage() example
• Linear Gradient Example

Web Audio Links

• MDN - Web Audio API
• MDN - Using Web Audio API
• w3c - Web Audio Spec
• html5rocks.com - Web Audio Intro
• Web Audio and SoundCloud Demo
• canvas deep dive - Web Audio
• developer.apple.com - using WebAudio

• Canvas Visualizer ICE:
  • file reader
  • array buffers/typed arrays
  • web audio API
  • request animation frame
  • callbacks

• JS Design Patterns

• Canvas Transforms & Animations

• Canvas Wrap-up

• Midterm Written Exam

• 10/13 (Mon) No classes
• 10/14 (Tues) Classes follow a Monday schedule

• Web Services:
  • Web Services
  • GET/POST
  • URI / URL Syntax
  • Query Strings
  • REST
  • XHR
  • JSON
  • JSONP
  • Ajax
  • JQuery

• Web Services Continued

• Intro to PHP
• PHP Forms

• PHP:
  • Web Services
  • JSON API
  • Simple RSS Proxy

• PHP
  • Sessions
  • Login Page

• Catch up

• No class 11/26-11/28 (Wed. - Fri.)

• PHP & SQLite

• Review
• Final Written Exam - Last Day of Class

Important Deadlines

• Final Written Exam will be given on your last day of class (either Tuesday 12/09 or Wednesday 12/10)
• Online course evaluations close TBA - please complete the survey!
• There is a mandatory class meeting during finals week to view your final projects:
  • Section 02 - Mon. 12/15, 10:15AM - 12:15PM
  • Section 03 - Fri. 12/12/2014, 10:15AM - 12:15PM
  • Section 04 - Tues. 12/16/2014, 10:15AM - 12:15PM