Index
A
- addEventListener() / Time for action – adding touch event handlers, Spawning a web worker
- addHitEffect() method / Time for action – checking the notes
- addNote() method / Time for action – adding the audio sequencer, Time for action – adding notes
- addTask() method / Time for action – creating a tasklist, Time for action – building a data model, Time for action – implementing the bindings
- addTaskElement() method / Time for action – creating a tasklist, Time for action – effects in action, Time for action – hiding task details, Time for action – implementing the bindings, Time for action – loading the task list
- Ajax
- about / Introduction to Ajax
- ajax() method / Making Ajax requests
- Ajax requests
- creating / Making Ajax requests
- weather widget, creating / Time for action – creating a weather widget
- XML data, acquiring / Time for action – getting XML data
- JSON data, acquiring / Time for action – getting JSON data
- animated notes, Piano Hero game
- creating / Creating animated notes
- append() method / Time for action – creating a tasklist, Time for action – adding notes
- application
- browser window, filling / Time for action – expanding the application
- AppStorage object / Time for action – creating a localStorage wrapper
- arc() method / Arcs and circles
- array.splice() method / Time for action – building a data model
- attributes, HTML5 <audio> element
- src / The HTML5 <audio> element
- autoplay / The HTML5 <audio> element
- controls / The HTML5 <audio> element
- loop / The HTML5 <audio> element
- muted / The HTML5 <audio> element
- preload / The HTML5 <audio> element
- auto / The HTML5 <audio> element
- none / The HTML5 <audio> element
- metadata / The HTML5 <audio> element
- Audacity
- about / Audacity
- Audio API
- about / The HTML5 Audio API
- audio files
- about / Loading audio files
- audioManager.getAudio() / Time for action – loading the notes, Time for action – creating the splash panel
- AudioManager object
- audio sequencer, Piano Hero game
- audio tools
- about / Audio tools
- FreeSound.org / FreeSound.org
- Audacity / Audacity
- autofocus attribute
- about / Autofocus
B
- background-origin property
- about / Background images
- background styles
- about / Backgrounds
- linear gradients / Linear gradients
- radial gradients / Radial gradients
- background images / Background images
- CSS sprites / CSS sprites
- black and white effect
- implementing / Time for action – black and white
- box-shadow property
- about / Box shadows
- parameters / Box shadows
- box shadows
- about / Box shadows
C
- cache manifest
- creating / Time for action – creating a cache manifest
- callback function / Time for action – building a data model
- Canvas2D / Time for action – creating a canvas pad
- canvas2d.getCanvasPoint() method / Time for action – showing the coordinates
- canvas> element / HTML5 canvas
- canvas API
- about / Getting a context
- using / Canvas basics
- transformations / Transformations
- image, exporting / Time for action – exporting an image
- touch events, handling / Handling touch events
- canvas pad
- about / Canvas pad
- creating / Time for action – creating a canvas pad, What just happened?
- coordinates, displaying / Time for action – showing the coordinates
- CanvasPadApp.toolbarButtonClicked() method / Time for action – adding the toolbar object
- changes
- queuing up / Queuing up changes
- saves, delaying / Time for action – delaying the saves
- checkNote() method / Time for action – checking the notes
- checkTextInput() method / Time for action – adding a text tool
- circle tool
- clear() method / Time for action – using the mouse to draw
- clearTimeout() method / Time for action – creating AudioSequencer
- clone() method / Time for action – implementing a template
- closePath() method / Paths and strokes
- Closure Compiler
- color input type
- about / Color
- content delivery network (CDN) / The components of an HTML5 application
- context properties
- changing / Changing context properties
- context properties, HTML5 canvas
- penWidth / Context properties
- strokeStyle / Context properties
- fillStyle / Context properties
- globalAlpha / Context properties
- lineCap / Context properties
- lineJoin / Context properties
- adding / Time for action – adding context properties
- coords object
- about / HTML5 Geolocation API
- latitude field / HTML5 Geolocation API
- longitude field / HTML5 Geolocation API
- accuracy field / HTML5 Geolocation API
- speed field / HTML5 Geolocation API
- heading field / HTML5 Geolocation API
- CSS3
- about / CSS3 overview
- CSS3 colors
- about / CSS3 colors
- RGB colors / CSS3 colors
- HSL colors / CSS3 colors
- CSS3 effect
- rounded corners / Rounded corners
- shadows / Shadows
- background / Backgrounds
- transitions / Transitions
- transforms / Transforms
- stylesheets / Dynamic stylesheets
- CSS3 transforms
- about / Transforms
- CSS file
- creating / Time for action – creating the CSS file
- CSS sprites
- about / CSS sprites
- gradient images, adding / Time for action – adding a gradient and button images
- button images, adding / Time for action – adding a gradient and button images
- cubic-bezier function / Transitions
- current_observation element / Time for action – getting XML data
- custom data attributes
- about / Custom data attributes
D
- 2D transform functions
- rotate() function / Transforms
- translate() function / Transforms
- scale() function / Transforms
- skew() function / Transforms
- data-option attribute / Time for action – adding the toolbar object
- data binding
- custom attributes used / Data binding with custom attributes
- data model, building / Time for action – building a data model
- implementing / Time for action – implementing the bindings
- datalist input type
- about / Datalist
- date input type
- about / Date
- dollar sign identifier
- about / The dollar sign identifier
- DOM
- done() method / Making Ajax requests
- drawCircle() method / Time for action – adding a circle tool
- drawEllipse() method / Time for action – adding an Ellipse tool
- drawImage() method / Time for action – loading an image file
- drawing actions
- adding, to HTML5 canvas / Adding drawing actions
- creating / Time for action – creating drawing actions
- saving / Time for action – saving and restoring
- restoring / Time for action – saving and restoring
- drawing tools
- adding / Adding drawing tools
- line tool, adding / Time for action – adding a line tool
- rectangles, drawing / Drawing rectangles
- rectangle tool, adding / Time for action – adding a rectangle tool
- circles, drawing / Arcs and circles
- arcs, drawing / Arcs and circles
- circle tool, adding / Time for action – adding a circle tool
- drawLine() method / Time for action – adding a line tool
- drawMandelbrot() method / Time for action – creating a Mandelbrot application
- drawPoints() method / Time for action – using the mouse to draw
- drawRect() method / Drawing rectangles
- drawText() method / Time for action – adding a text tool
E
- each() method / Time for action – loading the task list
- effects
- adding, to task list / Time for action – effects in action
- adding, to effect menu / Adding effects
- Ellipse tool
- email input type
- about / Email
- empty() method / Time for action – loading the task list
- escape() function / Time for action – loading the notes
- escape time algorithm / The Mandelbrot set
- executeWorker() method / Time for action – using a web worker
F
- fadeToggle() method / Time for action – hiding task details
- File API
- about / The File API
- image file, loading / Time for action – loading an image file, What just happened?
- FileReader object / The File API
- fill() method / Paths and strokes
- fillRect() method / Time for action – adding a rectangle tool
- fillStyle property / Context properties
- filter() method / Time for action – adding a theme selector
- focus() method
- about / Autofocus
- FreeSound.org
- about / FreeSound.org
G
- game panel, Piano Hero game
- creating / Time for action – creating the game panel
- GamePanel object / Time for action – creating the game panel
- geolocation data
- acquiring / Time for action – getting geolocation data
- get() method / Making Ajax requests
- getAudio() / Time for action – loading the notes
- getCanvasPoint() method / Time for action – showing the coordinates, Time for action – using the mouse to draw
- getColor() / Time for action – implementing the algorithm
- getColor() method / Time for action – implementing the algorithm
- getContext() method / Getting a context
- getCurrentPosition() method / HTML5 Geolocation API
- getCurrentWeather() method / Time for action – calling the weather service
- getImageData() method / Adding effects, Time for action – the imageEffects object
- getIterations() / Time for action – implementing the algorithm
- getKeys() method / Time for action – creating a localStorage wrapper
- getLocation() method / Time for action – getting geolocation data
- getMandelbrotX() / Time for action – implementing the algorithm
- getMandelbrotY() / Time for action – implementing the algorithm
- getPianoKeyElement() / Time for action – adding keyboard events
- getPianoKeyElement() method / Time for action – adding keyboard events, Time for action – creating the game panel, Time for action – adding notes
- getTaskIndex() method / Time for action – building a data model
- getTasks() method / Time for action – building a data model
- getValue() method / Time for action – creating a localStorage wrapper
- getWeatherReport() method / Time for action – creating a weather widget, Time for action – calling the weather service
- globalAlpha property / Context properties
- gradient generator
- URL / Radial gradients
H
- hideMenus() / Time for action – implementing a reusable toolbar
- HSL colors
- about / CSS3 colors
- Hue / CSS3 colors
- Saturation / CSS3 colors
- Lightness / CSS3 colors
- HTML5
- custom data attributes / Custom data attributes
- HTML5 <audio> element
- about / The HTML5 <audio> element
- attributes / The HTML5 <audio> element
- HTML5 application
- components / The components of an HTML5 application
- HTML file, creating / Time for action – creating the HTML file
- CSS file, creating / Time for action – creating the CSS file
- JavaScript file, creating / Time for action – creating the JavaScript file
- creating / Creating our first application
- tasklist, creating / Time for action – creating a tasklist
- task, removing from tasklist / Time for action – removing a task from the list
- tasks, moving within tasklist / Time for action – moving tasks within the list
- HTML5 Application Cache
- web application, for release API / HTML5 Application Cache
- HTML5 Audio API
- about / The HTML5 Audio API
- play() / The HTML5 Audio API
- pause() / The HTML5 Audio API
- canPlayType(type) / The HTML5 Audio API
- currentTime / The HTML5 Audio API
- volume / The HTML5 Audio API
- ended / The HTML5 Audio API
- HTML5 Audio overview
- about / HTML5 audio overview
- HTML5 <audio> element / The HTML5 <audio> element
- HTML5 Audio API / The HTML5 Audio API
- audio files / Loading audio files
- HTML5 canvas
- about / HTML5 canvas
- clearing / Clearing the canvas
- context properties / Context properties
- lines, drawing / Drawing lines
- toolbar, creating / Creating a toolbar
- toolbar, adding / Adding a toolbar
- drawing actions, adding / Adding drawing actions
- drawing tools, adding / Adding drawing tools
- HTML5 Geolocation API
- about / HTML5 Geolocation API
- geolocation data, getting / Time for action – getting geolocation data
- HTML5 input types
- HTML5 piano application
- creating / HTML5 piano application
- virtual piano, creating / Time for action – creating a virtual piano
- notes, loading / Time for action – loading the notes
- notes, playing / Time for action – playing the notes
- keyboard events, adding / Keyboard events, Time for action – adding keyboard events
- sustain control, adding / Time for action – adding a sustain control
- volume control, adding / Time for action – adding a volume control
- HTML5Application Cache API
- about / HTML5 Application Cache
- cache manifest, creating / Time for action – creating a cache manifest
- HTML file
- creating / Time for action – creating the HTML file
- HTML templates
- about / HTML templates
- implementing / Time for action – implementing a template
- task, editing in list / Time for action – editing a task in the list
- Hue
- about / CSS3 colors
I
- icon_url element / Time for action – getting XML data
- image distortion effect
- implementing / Image distortion
- waves, making / Time for action – making waves
- imageEffects object
- creating / Time for action – the imageEffects object
- importScripts() method / Implementing a web worker
- initKeyboard() method / Time for action – playing the notes, Time for action – creating the game panel
- inSetColor object / Time for action – implementing the algorithm
- inSetColor variable / Time for action – implementing the algorithm
- intervalId variable / Time for action – adding the audio sequencer
- invert() method / Time for action – the imageEffects object
- isAppKey() method / Time for action – creating a localStorage wrapper
- isInputTypeSupported() method / Time for action – creating the game panel
- isPlaying() / Time for action – creating AudioSequencer
J
- JavaScript file
- JSON.stringify() method / Time for action – creating a localStorage wrapper
- JSON data
- acquiring / Time for action – getting JSON data
- JSONP
- about / Cross-site scripting and JSONP
- working / Cross-site scripting and JSONP
K
- keyboard events
- about / Keyboard events
- adding, to piano application / Time for action – adding keyboard events
- keyCodesToNotes object / Time for action – adding keyboard events
- keyCodesToNotes variable / Time for action – creating the game panel
- keyDown() method / Time for action – playing the notes, Time for action – creating the game panel
- keydown event handler / Time for action – adding keyboard events
- keypress() event handler / Time for action – creating a tasklist
- keyUp() method / Time for action – playing the notes, Time for action – creating the game panel
L
- Lightness
- about / CSS3 colors
- linear gradients
- about / Linear gradients
- lineCap property / Context properties
- lineJoin property / Context properties
- lines, drawing on canvas
- stroking / Paths and strokes
- path, creating / Paths and strokes
- mouse, using / Time for action – using the mouse to draw
- lineTo() method / Paths and strokes
- line tool
- adding / Time for action – adding a line tool
- loadAudio() method / Time for action – loading the notes, Time for action – creating the splash panel, Time for action – creating the controller
- loadTheme() method / Time for action – adding a theme selector
- localStorage
- about / Saving the state of the application
- limitations / Saving the state of the application
- localStorage wrapper
M
- main() function
- makeWaves() method / Time for action – making waves
- Mandelbrot
- drawing / The Mandelbrot set
- algorithm, implementing / Time for action – implementing the algorithm
- using, as web worker / Time for action – Mandelbrot using a web worker
- Mandelbrot application
- Mandelbrot fractals / The Mandelbrot set
- MandelbrotGenerator object / Time for action – implementing the algorithm
- Mandelbrot set
- Wikipedia page / The Mandelbrot set
- Math.sin() method / Image distortion
- menuItemClicked() method / Time for action – implementing a reusable toolbar, Time for action – adding the toolbar object, Time for action – adding a rectangle tool, Time for action – the imageEffects object
- moveTo() method / Paths and strokes
N
- newAction() method / Time for action – creating drawing actions
- notes, Piano Hero game
- adding / Time for action – adding notes
- animating / Time for action – animating the notes
- number input type
- about / Number
O
- offset() method / Time for action – showing the coordinates
- onAudioEvent() method / Time for action – adding the audio sequencer
- onChangeTaskDetails() method / Time for action – implementing the bindings
- onChangeTaskName() method / Time for action – editing a task in the list
- onChangeTheme() private method / Time for action – adding a theme selector
- onEditTaskName() method / Time for action – editing a task in the list
- onKeyDown() event handler / Time for action – creating the game panel
- onKeyDown() method / Time for action – adding keyboard events
- onKeyUp() event handler / Time for action – creating the game panel
- onload event handler / Time for action – loading an image file
- onLoadFile() event handler method / Time for action – loading an image file
- onMenuItemClicked() method / Time for action – implementing a reusable toolbar
- onMouseDown() / Time for action – using the mouse to draw
- onMouseMove() method / Time for action – using the mouse to draw
- onMouseMove event handler / Time for action – showing the coordinates
- onMouseUp() event handler / Time for action – using the mouse to draw
- onSelectTask() method / Time for action – effects in action
- onTouchEnd() handler / Time for action – adding touch event handlers
- onTouchMove() handler / Time for action – adding touch event handlers
- ontouchstart method / Handling touch events
P
- <progress> element / Time for action – creating the splash panel
- parameters, arc() method
- centerX / Arcs and circles
- centerY / Arcs and circles
- radius / Arcs and circles
- endAngle / Arcs and circles
- counterclockwise / Arcs and circles
- parameters, box-shadow property
- h-offset / Box shadows
- v-offset / Box shadows
- blur-radius / Box shadows
- spread-radius / Box shadows
- color / Box shadows
- inset / Box shadows
- parameters, transition property
- property / Transitions
- duration / Transitions
- timing-function / Transitions
- delay / Transitions
- penDown() method / Time for action – using the mouse to draw, Time for action – creating drawing actions, Time for action – adding a text tool
- penUp() method / Time for action – creating drawing actions
- penWidth property / Context properties
- Photo Pad
- about / Photo Pad
- creating / Time for action – creating Photo Pad
- PianoHeroApp object / Time for action – creating the game panel
- Piano Hero game
- creating / Creating Piano Hero
- flowchart / Creating Piano Hero
- splash panel, creating / Time for action – creating the splash panel
- game panel, creating / Time for action – creating the game panel
- controller, creating / Time for action – creating the controller
- audio sequencer, creating / Creating an audio sequencer
- song, playing / Playing a song, Time for action – adding the audio sequencer
- animated notes, creating / Creating animated notes
- notes, adding / Time for action – adding notes
- notes, animating / Time for action – animating the notes
- user input, handling / Handling user input
- ending / Ending the game
- results panel, creating / Time for action – creating the results panel
- play() method / Time for action – playing the notes
- playbackRate() / Time for action – creating AudioSequencer
- playEvent() method / Time for action – creating AudioSequencer
- populateWeather() method / Time for action – getting XML data, Time for action – getting JSON data, Time for action – calling the weather service
- post() method / Making Ajax requests
- postMessage() method / Spawning a web worker, Implementing a web worker
- pressPianoKey() method / Time for action – adding keyboard events, Time for action – creating the game panel, Time for action – animating the notes
- putImageData() method / Adding effects, Time for action – the imageEffects object
Q
- quitGame() method / Time for action – creating the controller
R
- radial gradients
- about / Radial gradients
- range input type
- about / Range
- readAsArrayBuffer() method / The File API
- readAsBinaryString() method / The File API
- readAsDataURL() method / The File API, Time for action – loading an image file
- readAsText() method / The File API
- rebuildTaskList() / Time for action – loading the task list
- rectangle tool
- redraw() method / Time for action – creating drawing actions, Time for action – adding a circle tool, Time for action – adding a text tool
- releasePianoKey() method / Time for action – adding keyboard events, Time for action – creating the game panel, Time for action – animating the notes
- release script, web application
- creating / Time for action – creating a release script
- remove() method / Time for action – removing a task from the list
- removeAll() method / Time for action – creating a localStorage wrapper
- removeTask() method / Time for action – building a data model
- removeValue() method / Time for action – creating a localStorage wrapper
- restorePen() method / Time for action – creating drawing actions
- results panel, Piano Hero game
- rgb() specifier
- about / CSS3 colors
- rgba() specifier
- about / CSS3 colors
- RGB colors
- about / CSS3 colors
- rotate() function
- about / Transforms
- rotate() method
- about / Transformations
- rounded corners
- about / Rounded corners
S
- Saturation
- about / CSS3 colors
- savePen() method / Time for action – creating drawing actions
- saveTaskList() method / Time for action – storing the tasklist, Time for action – implementing the bindings, Time for action – delaying the saves
- sayHello() function / Time for action – using a web worker
- scale() function
- about / Transforms
- scale() method
- about / Transformations
- sepia effect
- implementing / Time for action – sepia
- sessionStorage
- setInterval() function / Time for action – adding the audio sequencer
- setItem() method / Saving the state of the application
- setOptions() method / Time for action – adding the audio sequencer
- setPixel() / Time for action – implementing the algorithm
- setPixel() method / Time for action – implementing the algorithm
- setStatus() method / Time for action – delaying the saves
- setTheme() method / Time for action – adding a theme selector
- setTimeout() function / Time for action – delaying the saves, Time for action – creating AudioSequencer, Web workers
- setValue() method / Time for action – creating a localStorage wrapper
- shadows
- adding / Shadows
- box shadows / Box shadows
- text shadows / Text shadows
- show() public method / Time for action – creating the game panel
- showCoordinates() method / Time for action – showing the coordinates
- showError() method / Time for action – creating the splash panel, Time for action – getting XML data
- showMenu() method / Time for action – implementing a reusable toolbar
- showOptions() method / Time for action – creating the splash panel
- showPanel() method / Time for action – creating the controller
- showScore() method / Time for action – creating the results panel
- showTextInput() method / Time for action – adding a text tool
- skew() function
- about / Transforms
- slideToggle() method / Time for action – hiding task details
- splash panel, Piano Hero game
- creating / Time for action – creating the splash panel
- sprite sheet
- about / CSS sprites
- start() method
- startGame() method / Time for action – creating the splash panel, Time for action – creating the game panel, Time for action – creating the controller, Time for action – adding the audio sequencer
- startPlayback() method / Time for action – creating AudioSequencer, Time for action – adding the audio sequencer
- startWorker() method / Time for action – Mandelbrot using a web worker
- stopPlayback() / Time for action – adding the audio sequencer
- stopPlayback() method / Time for action – creating AudioSequencer
- stopWorker() method / Time for action – Mandelbrot using a web worker
- stroke() method / Paths and strokes
- strokeRect() method / Time for action – adding a rectangle tool
- strokeStyle property / Context properties
- stylesheets
- about / Dynamic stylesheets
- implementing / Dynamic stylesheets
- theme selector, adding / Time for action – adding a theme selector
- sustain control
- adding, to piano application / Time for action – adding a sustain control
- sustain variable / Time for action – creating the game panel
T
- TaskAtHand.start() method / Time for action – adding a theme selector
- TaskAtHandApp object / Time for action – implementing the bindings
- task details
- task list
- effects, adding / Time for action – effects in action
- loading / Time for action – loading the task list
- tasklist, HTML5 application
- creating / Time for action – creating a tasklist
- task, removing / Time for action – removing a task from the list
- tasks, moving / Time for action – moving tasks within the list
- storing / Time for action – storing the tasklist
- loading / Time for action – loading the tasklist
- terminate() method / Time for action – Mandelbrot using a web worker
- text() method / Time for action – creating a tasklist
- text-input element / Time for action – adding a text tool
- text shadows
- about / Text shadows
- style, changing / Time for action – styles in action
- text tool
- adding / Time for action – adding a text tool
- time input type
- about / Time
- toBlackAnWhite() method / Time for action – black and white
- toDataURL() method / Time for action – exporting an image
- toggleClass() method / Time for action – hiding task details
- toggleDetails() method / Time for action – hiding task details
- toolbar, HTML5 canvas
- creating / Creating a toolbar, Time for action – creating a toolbar
- reusable toolbar, implementing / Time for action – implementing a reusable toolbar
- toolbar object, adding / Time for action – adding the toolbar object
- menu items, initializing / Time for action – initializing menu items
- toolbarButtonClicked() method / Time for action – implementing a reusable toolbar, Time for action – adding the toolbar object, Time for action – exporting an image
- toSepia() method / Time for action – making waves
- touch event handlers
- touch events
- handling / Handling touch events
- about / Handling touch events
- touchstart / Handling touch events
- touchmove / Handling touch events
- touchend / Handling touch events
- transform() method
- about / Transformations
- transformations
- about / Transformations
- transition property
- about / Transitions
- parameters / Transitions
- transitions
- about / Transitions
- translate() function
- about / Transforms
- translate() method
- about / Transformations
U
- updateNotes() method / Time for action – adding the audio sequencer, Time for action – animating the notes, Time for action – checking the notes, Time for action – creating the results panel
- updateProgress() method / Time for action – creating the splash panel
- url input type
- about / URL
- user input handling
- notes, checking / Time for action – checking the notes
V
- virtual piano
- creating / Time for action – creating a virtual piano
- notes, loading / Time for action – loading the notes
- notes, playing / Time for action – playing the notes
- volume control
- adding, to piano application / Time for action – adding a volume control
- volume variable / Time for action – creating the game panel
W
- watchPosition() method / HTML5 Geolocation API
- WCF API / Using web services
- Weather Underground service / Weather Underground
- weather widget
- creating / Time for action – creating a weather widget
- web application, for release
- JavaScript, combining / Combining and compressing JavaScript
- JavaScript, compressing / Combining and compressing JavaScript
- release script, creating / Time for action – creating a release script
- web services
- using / Using web services
- Weather Underground / Weather Underground
- XSS / Cross-site scripting and JSONP
- JSONP / Cross-site scripting and JSONP
- Web Storage
- about / Saving the state of the application
- localStorage / Saving the state of the application
- sessionStorage / Saving the state of the application
- web workers
- about / Web workers
- spawning / Spawning a web worker
- implementing / Implementing a web worker, Time for action – using a web worker
- debugging / Debugging web workers
X
- XML data
- acquiring / Time for action – getting XML data
- XSS
- about / Cross-site scripting and JSONP
Y
- YUI Compressor