HTML5 and JavaScript Projects (eBook)

Jeanine Meyer is a Professor 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 11
About the Technical Reviewer 12
Acknowledgments 13
Introduction 14
Chapter 1: Building the HTML5 Logo: Drawing on Canvas with Scaling and Semantic Tags 17
Introduction 17
Project History and Critical Requirements 20
HTML5, CSS, and JavaScript features 22
Drawing Paths on Canvas 22
Placing Text on Canvas and in the Body of a Document 25
Coordinate Transformations 26
Using the Range Input Element 28
Building the Application and Making It Your Own 30
Testing and Uploading the Application 37
Summary 37
Chapter 2: Family Collage: Manipulating Programmer-Defined Objects on a Canvas 38
Introduction 38
Critical Requirements 41
Autoplay Policy 41
HTML5, CSS, and JavaScript Features 42
JavaScript Objects 42
External File of Specifications 44
Rect 45
Oval 46
Picture 47
Videoblock 47
Heart 48
Creating the Elements 50
Drawing 52
Checking for a Mouse Over Object 57
User Inter face 61
Saving the Canvas to an Image 66
Building the Application and Making It Your Own 67
Testing and Uploading the Application 92
Summary 92
Chapter 3: Bouncing Video: Animating and Masking HTML5 Video 93
Introduction 93
Project History and Critical Requirements 100
HTML5, CSS, and JavaScript Features 101
Definition of the Body and the Window Dimensions 101
Animation 103
Video Drawing Frames on Canvas or As a Movable Element 109
Video Drawn on Canvas 109
Movable Video Element 111
Traveling Mask 112
User Interface 115
Building the Application and Making It Your Own 116
Making the Application Your Own 129
Testing and Uploading the Application 130
Summary 131
Chapter 4: Map Maker: Combining Google Maps and the  Canvas 132
Introduction 132
Latitude and Longitude and Other Critical Requirements 144
HTML5, CSS, and JavaScript Features 150
The Google Maps API 150
Canvas Graphics 153
Cursor 157
JavaScript Events 158
Calculating Distance and Rounding Values for Display 163
Building the Application and Making It Your Own 165
Testing and Uploading the Application 178
Summary 178
Chapter 5: Map Portal: Using Google Maps to Access Your Media 179
Introduction 179
Project History and Critical Requirements 187
HTML5, CSS, and JavaScript Features 188
Google Maps API for Map Access and Event Handling 188
Project Content in External File 191
Distances and Tolerances 193
Regular Expressions Used to Create the HTML 194
Dynamic Creation of HTML5 Markup and Positioning 195
Hint Button 198
Building the Application and Making It Your Own 199
The Quiz Application 199
Testing and Uploading the Application 213
Summary 213
Chapter 6: Add to 15 Game 214
Introduction 214
General Requirements for a Game 216
HTML5, CSS, and JavaScript 217
Styling in CSS 217
JavaScript Arrays 218
Setting Up the Game 220
Responding to a Player Move 220
Generating the Computer Move 221
Building the Application and Making It Your Own 222
Testing and Uploading the Application 232
Summary 232
Chapter 7: Origami Directions: Using Math-Based Line Drawings, Photographs, and Videos 233
Introduction 233
Critical Requirements 243
HTML5, CSS, JavaScript Features, and Mathematics 244
Overall Mechanism for Steps 244
User Interface 248
Coordinate Values 248
Utility Functions for Display 250
Utility Functions for Calculation 253
Step Line Drawing Functions 255
Displaying a Photograph 264
Presenting and Removing a Video 264
Building the Application and Making It Your Own 265
Testing and Uploading the Application 298
Summary 299
Chapter 8: Jigsaw Video 300
Introduction 300
Background and Critical Requirements 306
HTML5, CSS, JavaScript, and Programming Features 306
Creating the Base Picture 307
Dynamically Created Elements 307
Setting Up the Game 309
Handling Player Actions 310
Using Mouse Events 311
Calculating If the Puzzle Is Complete 313
Preparing, Positioning, and Playing the Video and Making It Hidden or Visible 314
Building the Application and Making It Your Own 315
Testing and Uploading the Application 327
Summary 327
Chapter 9: US States Game: Building a Multiactivity Game 329
Introduction 329
Critical Requirements 340
HTML5, CSS, JavaScript Features, Programming Techniques, and Image Processing 341
Acquiring the Image Files for the Pieces and  Determining Offsets 341
Creating Elements Dynamically 349
User Interface Overall 350
User Interface for Asking the Player to Click a State 351
User Interface for Asking the Player to Name a State 352
Spreading Out the Pieces 354
Setting Up the Jigsaw Puzzle 355
Saving and Recreating the State of the Jigsaw Game and Restoring the Original Map 357
Building the Application and Making It Your Own 361
Testing and Uploading the Application 382
Summary 382
Chapter 10: Responsive Design and Accessibility 383
Introduction 383
Critical Requirements 388
Screen Size and Dimension 389
Touch 389
Screen Reader and Tabs 389
HTML, CSS, and JavaScript Features 390
Meta Tags 390
HTML and CSS Use of Percentages and Auto 391
CSS @media 392
The HTML alt Attribute and Semantic Elements 392
HTML tabIndex 393
JavaScript Use of Width and Height Properties 393
Creating Elements Dynamically 394
Choosing From List 395
Mouse Events, Touch Events, and Key Events 396
Building the Reveal Application and Making It Your Own 398
Testing and Uploading the Reveal Application 412
Building the Countries/Capitals Quiz and Making It Your Own 412
Testing and Uploading the Countries/Capitals Quiz Application 422
Testing and Uploading the Jigsaw Turning to Video Application 422
Summary 423
Index 424