Topics and Outcomes
I. Course Learning Outcomes
(at the end of this course, the student will be able to ...)
- JavaScript and W3C DOM (most of this is now covered in IGME-230 - Web Site Design and Implementation)
- discuss the following web standards entities: W3C, WHATWG, ECMA
- discuss the following browser engines: Webkit, Blink, Mozilla, IE
- explain what the W3C DOM is
- explain what it means when we say that JS variables are "dynamically typed"
- declare JS variables in the local or global scope.
- write both named and anonymous functions
- work with the following built-in JS classes: Array, Date, Function, Math, Number, Object
- write JS that detects when a web page has completely loaded
- write JS that is able to get a reference to one or more DOM elements on the page.
- write event handling JS code that responds to mouse and button clicks and utilizes the JS Event object
- write JS that can modify the text and attributes of existing HTML elements
- write JS that can create new HTML elements, set their text and attributes, and add them to the page DOM
- utilize each of these W3C DOM methods:
getElementsByTagName(), getElementById(), querySelector(), querySelectorAll(), getAttribute(), setAttribute(), appendChild(), removeChild()
- store application data in arrays and a JS Object literal
- explain what
"use strict";
does - see ejohn.org and developer.mozilla.org
- explain what the
this
keyword represents in JS
- Advanced JS
- define and discuss JS closures - see Stack Overflow and developer.mozilla.org
- write OOP JS code utilizing function constructors
- write JS code utilizing the module pattern
- write JS code that utilizes timer functions such as
setInterval()
or requestAnimationFrame()
- Polling Keyboard/Keyboard Events
- Accessing Mouse Position
- <canvas> tag and Canvas 2D API:
- Getting a reference to 2D context - canvasElement.getContext("2d")
- Canvas drawing state attributes - strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign,textBaseline, globalAlpha, globalCompositeOperation
- Drawing state stack management - save(), restore()
- Transformation methods - scale(), rotate(), translate(), transform(), setTransform()
- Transformation concepts - matrix, identity
- Rectangles - clearRect(), strokeRect(),fillRect() in conjunction with applicable state attributes
- Text - fillText(), strokeText(), measureText() in conjunction with applicable state attributes
- Image drawing -drawImage(), createPattern()
- Composing modes - set with globalCompositeOperation, possible values include: source-over, source-in, source-out and others
- Gradients - createRadialGradient(), createLinearGradient()
- Pixel Manipulation - createImageData(), getImageData(), putImageData(), canvas.toDataURL()
- "Read Only" Web Applications
- utilize HTML form elements and jQuery.ajax() to load JSON-P web service data from another domain.
- validate user input for appropriate values
- dynamically modify the ajax query string to change the results returned by the web service.
- write code that parses the JSON-P data returned by the web service.
- write code that modifies the page DOM in order to display the data in a meaningful way
- Server-side programming PHP:
- HTTP Protocol, status codes, headers
- PHP Language Concepts:
- Variables and Scope
- Data types - int, string, float, boolean
- Operators
- Writing Functions
- Indexed and associative arrays
- require/include
- Superglobals - $_SERVER, $_GET, $_POST
- Creating Read/Write Web Apps:
- Creating a read-only XML & JSON web service with PHP
- Utilizing the Parse service (or Azure) to read/write data to the cloud.
II. Course Outline by Topic
- Module 1 - Canvas Weeks: Weeks 1-7
- Module 2 - JS Single Page Web App: Weeks 8-11
- Module 3 - PHP, data modeling, creating web services: Weeks 12-15
III. Course Outline by Exercises/Projects
- Drawing App Exercise
- Audio Visualizer Mini-project
- Canvas Game ICEs (Space Shooter, Breakout)
- Canvas Game or Interactive Experience Project
- Web Service App Project
- Web App with Cloud Storage Mini-project