The Essential Guide to HTML5 (eBook)

Jeanine Meyer is Professor Emerita at Purchase College/SUNY and past Coordinator of the Mathematics/Computer Science Board of Study.  Before Purchase, she taught at Pace University and worked at IBM Research and other parts of IBM and at other companies. She is the author of 4 books and co-author of 3 more on topics ranging from educational uses of multimedia, programming (two published by Apress), databases and number theory. She earned a PhD in computer science at the Courant Institute at New York University, an MA in mathematics at Columbia, and a SB (the college used the Latin form) in mathematics from the University of Chicago.  She is a member of Phi Beta Kappa, Sigma Xi, Association of Women in Science, Association of Computing Machinery, and a featured reviewer for ACM Computing Reviews. Jeanine is trying but remains a beginner at Spanish and piano.

Table of Contents 5
About the Author 10
About the Technical Reviewer 11
Acknowledgments 12
Introduction 13
Chapter 1: The Basics 16
Introduction 16
Critical Requirements 19
HTML5, CSS, and JavaScript Features 19
Basic HTML Structure and Tags 19
Using Cascading Style Sheets 25
JavaScript Programming 28
Using a Text Editor 30
Building the Applications 33
Testing and Uploading the Application 40
Summary 41
Chapter 2: Dice Game 42
Introduction 42
Critical Requirements 45
HTML5, CSS, and JavaScript Features 46
Pseudo-Random Processing and Mathematical Expressions 46
Variables and Assignment Statements 47
Programmer-Defined Functions 49
Conditional Statements: if and switch 51
Drawing on the Canvas 54
Displaying Text Output Using a Form 65
Building the Application and Making It Your Own 66
Throwing a Single Die 68
Throwing Two Dice 75
The Complete Game of Craps 82
Making the Application Your Own 91
Testing and Uploading the Application 93
Summary 94
Chapter 3: Bouncing Ball 95
Introduction 95
Critical Requirements 99
HTML5, CSS, JavaScript Features 100
Drawing a Ball or an Image or Images 100
Gradients with a Side Trip to Explain Arrays 104
Setting Up a Timing Event 109
Calculating a New Position and Collision Detection 111
Validation 113
Stopping and Resuming Animation Triggered by Buttons 115
HTML Page Reload 116
Preloading Images 116
Building the Application and Making It Your Own 117
Testing and Uploading the Application 135
Summary 136
Chapter 4: Cannonball and Slingshot 137
Introduction 137
Critical Requirements 141
HTML5, CSS, and JavaScript Features 143
Arrays and Programmer-Defined Objects 143
Rotations and Translations for Drawing 146
Drawing Line Segments 151
Mouse Events for Pulling on the Slingshot 153
Changing the List of Items Displayed Using Array Splice 155
Distance Between Points 156
Building the Application and Making It Your Own 157
Cannonball: With Cannon, Angle, and Speed 164
Slingshot: Using a Mouse to Set Parameters of Flight 174
Testing and Uploading the Application 186
Summary 186
Chapter 5: The Memory (aka Concentration) Game 188
Introduction 188
Critical Requirements 194
HTML5, CSS, JavaScript Features 195
Representing Cards 196
Using Date for Timing 197
Providing a Pause 198
Drawing Text 199
Drawing Polygons 202
Shuffling Cards 203
Implementing Clicking on a Card 204
Preventing Certain Types of Cheating 205
Building the Application and Making It Your Own 206
Testing and Uploading the Application 228
Summary 228
Chapter 6: Quiz 230
Introduction 230
Critical Requirements for a Quiz Game 234
HTML5, CSS, and JavaScript Features 235
Storing and Retrieving Information in Arrays 235
Creating HTML During Program Execution 238
Using CSS in the Style Element 240
Responding to Player Moves 241
Presenting Audio and Video 243
Checking the Player's Answer 244
Building the Application and Making It Your Own 245
Testing and Uploading the Application 256
Summary 256
Chapter 7: Mazes 258
Introduction 258
Critical Requirements 266
HTML5, CSS, and JavaScript Features 267
Representation of Walls and the Token 267
Mouse Events to Build and Position a Wall 268
Detecting the Arrow Keys 269
Collision Detection: Token and Any Wall 271
Using Local Storage 275
Encoding Data for Local Storage 283
Radio Buttons 285
Building the Application and Making It Your Own 286
Creating the Second Maze Application 298
Testing and Uploading Application 309
Summary 310
Chapter 8: Rock, Paper, Scissors 312
Introduction 312
Critical Requirements 316
HTML5, CSS, and JavaScript Features 317
Providing Graphical Buttons for the Player 317
Generating the Computer Move 323
Displaying Results Using Animation 328
Audio and DOM Processing 331
Starting Off 334
Building the Application and Making It Your Own 335
Testing and Uploading the Application 346
Summary 347
Chapter 9: Hangman 348
Introduction 348
Critical Requirements 356
HTML5, CSS, JavaScript Features 357
Storing a Word List as an Array Defined in an  External Script File 358
Generating and Positioning HTML Markup, then Changing the Markup to Buttons, and then Disabling the Buttons 359
Creating Progressive Drawings on a Canvas 362
Maintaining the Game State and Determining a Win or Loss 365
Checking a Guess and Revealing Letters in the Secret Word by Setting textContent 366
Building the Application and Making It Your Own 367
Testing and Uploading the Application 381
Summary 382
Chapter 10: Blackjack 383
Introduction 383
Critical Requirements 390
HTML5, CSS, and JavaScript Features 391
Source for Images for Card Faces and Setting Up the Image Objects 391
Creating the Programmer-Defined Object for the Cards 392
Starting a Game 393
Dealing the Cards 394
Shuffling the Deck 399
Capturing Key Presses 400
Using Header and Footer Element Types 402
Building the Application and Making It Your Own 403
Testing and Uploading the Application 419
Summary 420
Index 421