Head First HTML5 Programming

Page 2

actionURI(https://freepdf-books.com /):www.freepdf-books.com Head FirstHTML5 ProgrammingWeb Design & Development/HTMLWhatwill you learnfrom this book?“If you aspireto createmodern web apps onany platform, you needthe thorough introduc¬tionto keyHTML5features provided byHead FirstHTML5Pr...

Page 4

Advance Praise for Head First HTML5 Programming“Straightforward, informative and entertaining, Head First HTML5 Programming is a must for anyone wanting to get started with HTML5 or just to refresh their skills. The Head First series helps me to keep my technical skills up to date allowing me t...

Page 6

Other related books from O’ReillyHTML5 Up and RunningHTML5 CanvasHTML5: The Missing ManualHTML5 GeolocationHTML5 Graphics with SVG and CSS3HTML5 FormsHTML5 MediaOther books in O’Reilly’s Head First seriesHead First C#Head First JavaHead First Object-Oriented Analysis and Design (OOA&D)H...

Page 8

Head First HTML5 Programmingby Eric Freeman and Elisabeth RobsonCopyright © 2011 Eric Freeman and Elisabeth Robson. All rights reserved.Printed in the United States of America.Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.O’Reilly Media books may be ...

Page 10

viiithe authorsAuthors of Head First HTML5 ProgrammingElisabeth is a software engineer, writer, and trainer. She has been passionate about technology since her days as a student at Yale University, where she earned a Masters of Science in Computer Science and designed a concurrent, visual program...

Page 12

xtable of contents1 37,Welcome to Webville getting to know HTML5 38,Upgrade to HTML5 TOD 38,AY! 38, 38,2 40,Introducing the 40,HTML5-o-Matic, update your 40,HTML now! 40, 40,4 43,You’re closer to HTML5 43,markup than you think 43, 43,7 47,HTML5 Exposed: Confessions 47,of 47, the newest ...

Page 14

xiitable of contents3 121,A Little Interactivityevents, handlers and all that jazz 122,Get ready for Web 122,ville Tunes 122, 122,86 123,Getting started... 123, 123,87 124,But nothing happens when 124,I click “Add Song” 124, 124,88 125,Handling Events 125, 125,89 126,Making a Plan... 12...

Page 16

xivtable of contents5 201,Geolocationmaking your html location aware 202,Location, Location, Location 202, 202,166 203,The Lat and Long 203,of 203, it... 203, 203,167 204,How the Geolocation API determines 204,your location 204, 204,168 208,Just where are you anywa 208,y? 208, 208,172 212,...

Page 18

xvitable of contents 318,Our new startup: 318,TweetShirt 318, 318,282 319,Checking out the “comps” 319, 319,283 322,How to get a canv 322,as into your web page 322, 322,286 324,How to see your can 324,vas 324, 324,288 326,Drawing on the Canvas 326, 326,290 331,Failing gracefully 331, 3...

Page 20

xviiitable of contents 450,How browser storage works (1995 - 2010) 450, 450,414 453,How HTML5 Web storage w 453,orks 453, 453,417 454,Note to self... 454, 454,418 460,Were Local Storage and the Array separated at 460,birth? 460, 460,424 465,Creating the interface 465, 465,429 466,Now let’...

Page 22

xxtable of contents 568,#1 Modernizr 568, 568,532 569,#2 Audio 569, 569,533 570,#3 jQuery 570, 570,534 22,#4 XHTML is dead, long 22,live XHTML 22, 22,536 573,#5 SVG 573, 573,537 574,#6 Offline web apps 574, 574,538 575,#7 Web sockets 575, 575,539 576,#8 More canvas API 576, 576,540 578,#...

Page 24

xxii introhow to use this book12Who is this book for?Who should probably back away from this book?If you can answer “yes” to all of these:If you can answer “yes” to any of these:this book is for you.this book is not for you.[Note from marketing: this book is for anyone with a credit card...

Page 26

xxiv introhow to use this bookSo what does it take to learn something? First, you have to get it, then make sure you don’t forget it. It’s not about pushing facts into your head. Based on the latest research in cognitive science, neurobiology, and educational psychology, learning takes a lot...

Page 28

xxvi introhow to use this bookHere’s what WE did:We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s concerned, a picture really is worth a thousand words. And when text and pictures work together, we embedded the text in the pictures because your brai...

Page 30

xxviii introhow to use this bookRead meThis is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we’re working on at that point in the book. And the first time through, you need to begin at the beginning, b...

Page 32

xxx introThe technical review teamthe review teamPaul BarryDavid PowersRebeca Duhn-KahnTrevor FarlowLou BarrBert BatesNo simple reviewer here, he’s also the series creator! Man, talk about pressure...Our Master Technical Reviewer.Our 110% effort reviewer. He even ran around in the middle of th...

Page 34

xxxii introacknowledgmentsEven more Acknowledgments!And finally, thanks to Kathy and BertLast, and anything but least, to Kathy Sierra and Bert Bates, our partners in crime and the BRAINS who created the series. We hope, once again, we’ve done the series justice. Kathy SierraHard at work resea...

Page 36

actionURI(https://freepdf-books.com /):www.freepdf-books.com actionURI(https://freepdf-books.com /):https://freepdf-books.com

Page 38

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Head First Lounge</title> <...;

Page 40

4 Chapter 1update your htmlStep 1 is going to amaze you: follow along, we’re going to start at the top of the Head First Lounge HTML and update the doctype to give it that new HTML5 shine. Here’s the old HTML 4.01 version of the doctype:<!doctype html>No more Googling to remember what ...

Page 42

6 Chapter 1beyond markupWait a sec, all this fuss about HTML5 and this is all I needed to do? What is the rest of this book about?Okay, okay, you got us. So far, we’ve been talking about updating your older HTML pages so that they’re ready to take advantage of everything HTML5 has to offer. ...

Page 44

8 Chapter 1exercise solutionHere’s the updated code:<!doctype html><html> <head> <title>Head First Lounge</title> <meta charset=“utf-8"> <link rel=“stylesheet" href=“lounge.css"> <script src=“lounge.js">&l...;

Page 46

10 Chapter 1what you should knowWe don’t expect you to know HTML5, yet.If you’ve never had exposure to HTML5 before, that’s okay, but you should have worked with HTML, and there are some basics you should know about like elements, tags, attributes, nesting, the difference between semantic ...

Page 48

12 Chapter 1the html5 landscapeWould the REAL HTML5 please stand up...HTML5 is all about multimedia, getting rid of plug-ins and using the new native support for audio and video.No, it’s all about more descriptive markup.Actually, it’s about rich Internet clients. Instead of building clients...

Page 50

14 Chapter 1how html5 worksHow HTML5 really works...So we’ve said HTML5 is made up of a family of technologies, but what does that mean? Well you already know there’s the HTML markup itself, which has been expanded to include some new elements; there are also lots of additions to CSS with CS...

Page 52

16 Chapter 1html5 family membersCanvasLocal StorageGeolocationOffline Web AppsNew MarkupCSS3We’re here to help with the structure and semantic meaning of your page, including new ways of making sections, headers, footers and navigation in your pages.FormsYou might have used me in HTML 4 to ent...

Page 54

18 Chapter 1browser reconnaissanceYOUR FIRST MISSION: BROWSER RECONNaISSaNCE SOLUTIONBrowservideoaudioCanvasWeb StorageGeolocationWeb WorkersOffline Web appsFirefoxSafariChromeMobile WebkitOperaIE 6, 7IE 8IE 9FeatureWe’ve cheated on our answers and filled them in for 2015. Yours should reflect...

Page 56

20 Chapter 1html5 common questionsQ: I heard that the HTML5 Standard isn’t going to be a final recommendation until 2022! Is that true? And, if so, why are we bothering?A: The W3C is the standards body that formally recommends the HTML5 standard, and what you need to know about the W3C is that...

Page 58

22 Chapter 1what javascript can doWhat can you do with JavaScript?JavaScript opens up a whole new universe of expression and functionality to your web pages. Let’s look at just a few things you might do with JavaScript and HTML5...With HTML5 & JavaScript you can create a 2D drawable surfa...

Page 60

24 Chapter 1getting to know javascriptHead First: Welcome, JavaScript. We’re glad you could work us into your busy schedule. Let me just put it out there: HTML5 is becoming quite a celebrity—what’s your take on this?JavaScript: I’m not someone who seeks the limelight, I’m a behind the ...

Page 62

26 Chapter 1your first javascriptvar drink = "Energy Drink";Declare a variable, and assign it a value of “Energy Drink”.var lyrics = "";Declare another variable and assign it empty string value.var cans = 99;Declare another variable and assign it a number value, 99.while ...

Page 64

28 Chapter 1more html5 fine pointsQ: Why was there nothing in the body of that HTML except the script?A: We chose to start with an empty body because we created all the content for this page using JavaScript code. Now, sure, we could have just typed the song lyrics directly into the body element...

Page 66

30 Chapter 1what is html5, really++= Congratulations, you’ve finished Chapter 1 and written your first HTML5!Before you run off to the next chapter, we’ve got one more task for you to drive it all home. Use the magnets below to fill in the formula that solves the equation of “what...

Page 68

32 Chapter 1exercise solutionsHTML5crossIt’s time to give the right side of your brain a break and put that left side to work. All these words are HTML‑related and from this chapter. 12345678910111213141516Across2. __________ plug could also be called spam.8. Product that cleans up your HTML...

Page 70

34 Chapter 1exercise solutionsHTML5cross SolutionD1S2H3A M E L E S4SG5OTCD6RJ7H8T9M L O M A TIC10R11E C O N N AIS S A N C E12YLSICCVLA13PIS4SPTEAEE11400TYFSM1PUCEW15HIL ELRNLITYPSX16H T M LAcross2. __________ plug could also be called spam. [SHAMELESS] 8. Product that cleans up your HTML5 is thr...

Page 72

36 Chapter 2how javascript worksThe Way JavaScript WorksOur goal is to write JavaScript code that runs in the browser when your web page is loaded—that code might respond to user actions, update or change the page, communicate with web services, and in general make your page feel more like an ...

Page 74

38 Chapter 2declaring variablesDeclaring a variableVariables hold things. With JavaScript they can hold lots of different things. Let’s declare a few variables that hold things:var winners = 2;var boilingPt = 212.0;var name = "Dr. Evil";var isEligible = false;Integer numeric values.O...

Page 76

40 Chapter 2naming variablesHow to name your variablesYou might be wondering how you pick names for your variables? If you’re used to naming ids in your HTML elements, you’ll find variables very similar. There are only a few rules for creating names:var thisIsNotaJoke;var _myvariable;var $im...

Page 78

42 Chapter 2naming variablesWebville Guide to Better NamingChoose names that mean something. Variable names like _m, r and foo might mean something to you but they are generally frowned upon in Webville. Not only are you likely to forget them over time, your code will be much more readable with ...

Page 80

44 Chapter 2variable exercisesNot this kind of expression!Express Yourself!Based on what you know so far about JavaScript variables, expressions and statements, see if you can figure out which of these are legal and which might cause an error. From the following list, circle the statements that...

Page 82

46 Chapter 2javascript iterationDoing things over and over...If we did everything just once in a JavaScript program it would probably be a pretty boring program. You do a lot of things multiple times—you rinse, lather, repeat, until hair is clean, or, keep driving until you reach your destinat...

Page 84

48 Chapter 2variable and iteration exerciseBE the BrowserEach of the JavaScript snippets on this page is a separate piece of code. Your job is to play browser, and evaluate each snippet of code and answer a question about the result. Write your answer to the question below the code.var tops = 5;...

Page 86

50 Chapter 2javascript conditionalsYou can provide a catchall for your if statements as well—a final else that is run if all the other conditions fail. Let’s add a few more if/elses and also a catchall:Making more decisions... and, adding a catchallif (scoops == 3) { alert("Ice cream ...

Page 88

52 Chapter 2how to put javascript in a pageI was told we’d be putting JavaScript in our web pages. When are we going to get there, or are we just going to keep playing around with JavaScript?Yes, that is the point. First, you needed to know a few basics. Here’s what we’ve done so far: you...

Page 90

54 Chapter 2interaction with a pageJavaScript and HTML are two different things. HTML is markup and JavaScript is code. So how do you get JavaScript to interact with the markup in your page? You use the Document Object Model. How JavaScript interacts with your pageIt’s through reading, reacti...

Page 92

56 Chapter 2introducing the document object modeldocument is always at the top. document is a special part of the tree that you can use in JavaScript to get access to the entire DOM. These are like the branches of the tree.These are like the leaves of the tree (because there are no elements insi...

Page 94

58 Chapter 2relationship between javascript and the domOr, how two totally different technologies hooked up.HTML and JavaScript are from different planets for sure. The proof? HTML’s DNA is made of declarative markup that allows you to describe a set of nested elements that make up your pages....

Page 96

60 Chapter 2using getelementbyidOnce getElementById gives you an element, you’re ready do something with it (like change its text to “Red Alert: hit by phaser fire!”). To do that, we typically assign the element to a variable so we can refer to the element thoughout our code; let’s do ...

Page 98

62 Chapter 2testing the dom code<!doctype html><html lang="en"><head> <title>Planets</title> <meta charset="utf-8"> <script> var planet = document.getElementById("greenplanet"); planet.innerHTML = "Red alert: h...

Page 100

64 Chapter 2waiting for the page to load<script>function init() { var planet = document.getElementById("greenplanet"); planet.innerHTML = "Red alert: hit by phaser fire!";}window.onload = init;</script>You can’t mess with the DOM until the page has fully l...

Page 102

66 Chapter 2more dom functionalityLook up and retrieve one or more elements from the DOM.So, what else is a DOM good for anyway?The DOM can do a fair bit more than we’ve seen so far and we’ll be using a lot of its other functionality as we move forward in the book, but for now let’s just t...

Page 104

68 Chapter 2using an arrayAdding another item to the arrayAt any time you can keep adding new items to your array simply by using the next, unused index, like this:tempByHour[5] = 61;012345And now that we know how to get length of an array, let’s see if we can combine what you know about loops...

Page 106

70 Chapter 2phrase-o-matic example<!doctype html><html lang="en"><head> <title>Phrase-o-matic</title><meta charset="utf-8"><style>body { font-family: verdana, Helvetica, sans-serif;}</style><script>function makePhras...

Page 108

72 Chapter 2how phrase-o-matic worksWe’re almost done, we have the phrase, now we just have to display it. By now you already know the drill: we’re going to use getElementById to locate our paragraph element and then use its innerHTML to put the new phrase there.var phraseElement = document....

Page 110

74 Chapter 2Learning a language is hard work and it requires you not only work your brain, but that you also rest your brain. So after this chapter take some well needed downtime, have a treat on us, but before you go, check out the bullet points and do the crossword to make things really stick....

Page 112

76 Chapter 2crossword exerciseHTML5CrossTime to work a different part of your brain with a crossword. Have fun!12345678910111213141516171819Across2. 5 < 10 is a _________ expression.7. You can add your JavaScript to the ________ or body of your HTML.8. ____________ is the root of the DOM tre...

Page 114

78 Chapter 2exercise solutions1015510BE the Browser SolutionEach of the JavaScript snippets on this page is a separate piece of code. Your job is to play browser, and evaluate each snippet of code and answer a question about the result. Write your answer to the question below the code.var tops =...

Page 116

80 Chapter 2exercise solutionsvar word1 = "a";var word2 = "nam";var word3 = "nal p";var word4 = "lan a c";var word5 = "a man a p";var phrase = "";for (var i = 0; __________; __________) { if (i == 0) { phrase = _______________...

Page 118

82 Chapter 2exercise solutions<!doctype html><html lang="en"><head> <title>My Playlist</title> <meta charset="utf-8"> <script> ____________ addSongs() { var song1 = document.______________("________"); var _____ = ...

Page 120

84 Chapter 2exercise solutionsHTML5Cross SolutionB1B2O O3L E A NG4OBJ5S6ROJH7E A DD8O C U M E N TL9E T T E RVREECM10A R K U PII11N D E XATSPPNC12A M E LC13O N V E R TLE14ORA15R R A YLDW16HIL ENSEPL17E N G T HG18E T E L E M E N T B YI D19TIOFMAcross2. 5 < 10 is a _________ expression. [BOOLEAN...

Page 122

86 Chapter 3introducing webville tunesGet ready for Webville TunesOkay, we’ve dragged you through a lot of JavaScript fundamentals so far in this book, and while we’ve talked a good game on building web apps, we don’t have a lot to show for it, yet. So, now we’re going to get serious (no...

Page 124

88 Chapter 3about button click events““Well, yes and no. Nothing appears to happen, but your browser knows you clicked on the button (depending on your browser, you will also see the button depress). The real question is how do we get the button to do something when you click on it? And wha...

Page 126

90 Chapter 3coding the button handlerfunction handleButtonClick() { alert("Button was clicked!");}Making a Plan...Getting access to the “Add Song” button1. Set up a handler to handle the user’s click on the “Add Song” button.2. Write the handler to get the song name the us...

Page 128

92 Chapter 3how add song worksfunction init() { var button = document.getElementById("addButton"); button.onclick = handleButtonClick;}function handleButtonClick() { alert("Button was clicked!");}Don’t worry, if and when I’m clicked on, you’ll literally be the ...

Page 130

94 Chapter 3getting the song from the domGetting the song nameHere’s the body part of the DOM.Using the getElementById method, we can get a handle to the songTextInput input element in the form.bodyul id=”playlist”forminput id=”addButton”input id=”songTextInput” value=”Blue Sued...

Page 132

96 Chapter 3exercise solutionsfunction handleButtonClick() { var textInput = document.getElementById("songTextInput"); var songName = textInput.value; alert("adding " + songName);}Rework the handleButtonClick function below to obtain the name of the song the user h...

Page 134

98 Chapter 3creating new elementsFor the playlist shown here, draw the DOM as it looks after you’ve added all these songs. Notice the order in which the songs are added to the page, and make sure the elements are in the right places in the DOM too. We’ve gone ahead and done one for you. Chec...

Page 136

100 Chapter 3adding new elementsAdding an element to the DOMTo add a new element to the DOM you have to know where you want to put it. Well, we do know where to put it: we’re going to put the <li> element in the <ul> element. But how do we do that? Let’s take another look at the ...

Page 138

102 Chapter 3review of the playlist app1The first thing you did was set up an event handler to handle the user’s click on the “Add Song” button. You created a function, handleButtonClick, and set the onclick property of the “Add Song” button to this function.You did a lot in this chapt...

Page 140

104 Chapter 3Ready Bake CodeWe’ve gone ahead and baked a little code for you to save your playlists. For now you just need to type it in and make two tiny changes to your existing code and you’ll have an HTML5-stored playlist.We’ll be covering all the specifics of storing things locally in...

Page 142

106 Chapter 3storing the playlistfunction init() { var button = document.getElementById("addButton"); button.onclick = handleButtonClick; loadPlaylist();} function handleButtonClick() { var textInput = document.getElementById("songTextInput"); var songName = te...

Page 144

108 Chapter 3review of event handlers and the dom ƒThere are lots of events happening in your browser all the time. If you want to respond to these events, you need to handle the events with event handlers. ƒA button click event is triggered when you click on a button in a web page. ƒYou han...

Page 146

110 Chapter 3exercise solutionsFor the playlist shown here, draw the DOM as it looks after you’ve added all these songs. Notice the order in which the songs are added to the page, and make sure the elements are in the right places in the DOM too. Here’s our solution.Here’s the rest of the ...

Page 148

actionURI(https://freepdf-books.com /):www.freepdf-books.com actionURI(https://freepdf-books.com /):https://freepdf-books.com

Page 150

114 Chapter 4defining your own functions<script> var guessInput = document.getElementById("guess"); var guess = guessInput.value; var answer = null; var answers = [ "red", "green", "blue"]; var index = Math.fl...

Page 152

116 Chapter 4how functions workHow a function worksfunction bark(dogName, dogWeight) { if (dogWeight <= 10) { return dogName + " says Yip"; } else { return dogName + " says Woof"; }}Okay, first we need a function.Let’s say you’ve just written your ne...

Page 154

118 Chapter 4importance of functions and objectsI keep tellin’ you, all of the HTML5 APIs are chock-full of functions, objects and all that advanced JavaScript stuff...If we could have another moment to talk...We know, we know, by Chapter 4 you thought you’d be flying in an HTML5 jetpack by...

Page 156

120 Chapter 4parameters and argumentsI’m not sure I get the difference between a parameter and an argument—are they just two names for the same thing?No, they’re different.When you define a function you can define it with one or more parameters. function cook(degrees, mode, duration) { /...

Page 158

122 Chapter 4exercise on parametersUse your knowledge of functions and passing arguments to parameters to evaluate the code below. After you’ve traced through the code, write the value of each variable below. Check your answers with the solution at the end of the chapter before you go on.funct...

Page 160

124 Chapter 4local and global scopevar avatar = "generic";var skill = 1.0;var pointsPerLevel = 1000;var userPoints = 2008;function getavatar(points) { var level = points / pointsPerLevel; if (level == 0) { return "Teddy bear"; } else if (level == 1) { ret...

Page 162

126 Chapter 4shadowing variablesYou “shadow” your global.Here’s what that means: say you have a global variable beanCounter and you then declare a function, like this:When you do this, any references to beanCounter within the function refer to the local variable and not the global. So we s...

Page 164

128 Chapter 4functions as valuesfunction addOne(num) { return num + 1;}var plusOne = addOne;var result = plusOne(1);Oh, did we mention functions are also values?OK, you’ve used variables to store numbers, boolean values, strings, arrays, all kinds of things, but did we mention you can also ...

Page 166

130 Chapter 4pep talk before introducing objectsAuthors? Hello? Hello? I'm the girl who bought the HTML5 book, remember me? What does all this have to do with HTML5???Well we thought we’d covered that already... but if it looks like we’ve picked you up and have driven you halfway around the ...

Page 168

132 Chapter 4objects and propertiesvar fido = { name: "Fido", weight: 40, breed: "Mixed", loves: ["walks", "fetching balls"]};Dogname: “Fido”weight: 40breed: “Mixed”loves: [“walks”, “fetching balls”]And a set of properties...W...

Page 170

134 Chapter 4what objects can doThe Dot Operator .The dot operator (.) gives you access to an object’s properties. In general it’s easier to read than the [“string”] notation: ● fido.weight is the size of fido. ● fido.breed is the breed of fido. ● fido.name is the name of fido. �...

Page 172

136 Chapter 4objects as argumentsLet’s talk about passing objects to functionsWe’ve already talked a bit about how arguments are passed to functions—arguments are passed by value, so if we pass an integer, the corresponding function parameter gets a copy of the value of that integer for it...

Page 174

138 Chapter 4introducing webville cinema appThe Webville Cinema has come to us for help with their JavaScript API; let’s start simple and design the movie object for them. What we need is a couple of movie objects that each include a title, a genre, a movie rating (1-5 stars) and a set of show...

Page 176

140 Chapter 4implementing next showingfunction getNextShowing(movie) { var now = new Date().getTime(); for (var i = 0; i < movie.showtimes.length; i++) { var showtime = getTimeFromString(movie.showtimes[i]); if ((showtime - now) > 0) { return "Next showi...

Page 178

142 Chapter 4objects and methodsObjects can have behavior too...You didn’t think objects were just for storing numbers, strings and arrays did you? Objects are active, they can do things. Dogs don’t just sit there: they bark, run, play catch and a dog object should too! Given everything you�...

Page 180

144 Chapter 4reworking a function as a methodWe’ve taken the liberty of removing the movie parameter, and all the references to it. Which leaves us with this code:Let’s get the movie parameter out of there...var movie1 = { title: "Plan 9 from Outer Space", genre: "Cult C...

Page 182

146 Chapter 4code reuse and methodsAh, good eye.You have great instincts if you recognized that we are duplicating code when we copy getNextShowing into more than one movie object. One of the aims of “object-oriented” programming is to maximize code reuse—here we’re not reusing any code,...

Page 184

148 Chapter 4using a constructorDon’t worry about building all those objects yourself; we’ll construct them for you.Now let’s use our constructorNow that we’ve got our factory built, we can use it to create some dogs. There’s only one thing we haven’t told you, which is that you nee...

Page 186

150 Chapter 4a movie constructorfunction _____________(_________, __________, rating, showtimes) { this.title = _________; this.genre = genre; this.________________ = rating; this.showtimes = ________________; this.getNextShowing = function() { var now = new Date().getTime(...

Page 188

152 Chapter 4exercise solutionfunction ____________(___________, ____________, rating, showtimes) { this.title = ___________; this.genre = genre; this.________________ = rating; this.showtimes = ________________; this.getNextShowing = function() { var now = new Date().getTi...

Page 190

154 Chapter 4tour of common objectsmovietitle genre rating showtimes getNextShowingCongrats, you’ve made it through functions and objects! Now that you know all about them, and before we end the chapter, let’s take a few moments to check out JavaScript objects in the wild; that is, in their...

Page 192

156 Chapter 4how window.onload worksWe’ve been writing “alert”, not “window.alert”... how does the browser know we want the window alert method?Window is the global object.It may seem a little weird, but the window object acts as your global environment, so the names of any properties ...

Page 194

158 Chapter 4the element objectOne more object to think about: your element objectsWe shouldn’t forget when we’re working with methods like getElementById that the elements they return are also objects! Okay, you might not have realized this, but now that you know, you might be starting to t...

Page 196

160 Chapter 4review of functions and objects ƒTo create a function, use the function keyword with parentheses to hold parameters, if there are any. ƒFunctions can be named, or be anonymous. ƒNaming rules for functions are the same as naming rules for variables. ƒThe body of a function goes b...

Page 198

162 Chapter 4exercise solutionsUse your knowledge of functions and passing arguments to parameters to evaluate the code below. After you’ve traced through the code, write the value of each variable below. Here’s our solution.function dogsage(age) { return age * 7;}function rectanglearea(w...

Page 200

actionURI(https://freepdf-books.com /):www.freepdf-books.com actionURI(https://freepdf-books.com /):https://freepdf-books.com

Page 202

166 Chapter 5the geolocation apiQ: I heard Geolocation isn’t a real API?A: Geolocation is not considered a first-class member of the existing HTML5 standard, but that said, it is a standard of the W3C, widely supported and pretty much everyone includes Geolocation in the list of important HTML...

Page 204

168 Chapter 5determining locationHow the Geolocation API determines your locationYou don’t have to have the newest smartphone to be location aware. Even desktop browsers are joining the game. You might ask, how would a desktop browser determine its location if it doesn’t have GPS or any othe...

Page 206

170 Chapter 5method of determining locationIt’s cool we’ve got so many ways to know where we are. How am I going to know which method my device is using?You’re not.The short answer is “you’re not,” as the browser implementation is going to determine how location is determined. But th...

Page 208

172 Chapter 5using the geolocation apiJust where are you anyway?<!doctype html><html><head> <meta charset="utf-8"> <title>Where am I?</title> <script src="myLoc.js"></script> <link rel="stylesheet" href="my...

Page 210

174 Chapter 5reviewing geolocation codeWhat we just did...Now that we’ve got some geolocation code up and running (and, again, if you’re not seeing a location yet, hold on, we’re getting to some debugging techniques in just a sec), let’s walk through the code in a little more detail:if (...

Page 212

176 Chapter 5how get current position worksHow it all fits togetherBrowsergeolocation APIBrowserBrowser calls getCurrentPositiongeolocation then asks the user for permission.If the user gives permission, then geolocation uses the best means it can to get the browser’s location (GPS, triangulat...

Page 214

178 Chapter 5I did not give permission for my location to be used.My position wasn’t available.After a few seconds, I got a message indicating there was a request timeout.Nothing happened at all, no location and no error alert.Your Diagnostic Results HereSomething else ________________________...

Page 216

180 Chapter 5ready bake code to compute distancefunction degreesToRadians(degrees) { var radians = (degrees * Math.PI)/180; return radians;}We’ll see more of this function in the Canvas chapter.Ever wanted to know how to compute the distance between two points on a sphere? You’ll find ...

Page 218

182 Chapter 5adding google mapsYou know, seeing my location as 34.20472, -90.57528 is great, but a map would really come in handy right now!<script src="http://maps.google.com/maps/api/js?sensor=true"></script>This is the location of the Google Maps JavaScript API.Make sure...

Page 220

184 Chapter 5page goal headervar map;function showMap(coords) { var googleLatandLong = new google.maps.LatLng(coords.latitude, coords.longitude); var mapOptions = { zoom: 10, center: googleLatandLong, mapTypeId: goo...

Page 222

186 Chapter 5page goal headerIt would be more useful if you could see exactly where you’re located on the map. If you’ve used Google Maps, then you’re probably familiar with the push pins used to mark the location of items you search for. For example, if you search for Space Needle in Seat...

Page 224

188 Chapter 5page goal headerOffRoad DiversionGet all the code for addMarker added, update showMap to call addMarker and reload the page. You’ll see a map with a marker with your location on it. Try clicking on the marker. You’ll get a pop-up window with your latitude and longitude. This ...

Page 226

190 Chapter 5geolocation api detailsMeanwhile back at the Geolocation API...We’ve already travelled a fair distance with the Geolocation API: we’ve determined our location, computed distances to other locations, handled the error states of the API and even added a map using the Google Maps A...

Page 228

192 Chapter 5tracking movement“Wherever you go, there you are”The orgin of this phrase has been hotly debated. Some claim the first real mention of it was in the film Buckaroo Banzai, others draw its origin from Zen Buddhist text, still others cite various books, movies and popular songs. N...

Page 230

194 Chapter 5using watchpositionSo now we need to add button click handlers for the two buttons. We’ll add them to the getMyLocation function only if there is geolocation support. And, since we’re going to control all the geolocation tracking using the two buttons, we’ll remove the existi...

Page 232

196 Chapter 5testing user trackingTime to get moving!Make sure you’ve got all the new code typed in and reload your page, myLoc.html. Now, to truly test this page you’re going to need to “relocate” to have your position updated. So take a walk, jump on your bike, get in the car, or use w...

Page 234

198 Chapter 5overview of geolocation objectsYou’ve got some Options...So far we’ve stayed away from the third parameter of getCurrentPosition (and watchPosition): the positionOptions parameter. With this parameter we can control how geolocation computes its values. Let’s look at the three...

Page 236

200 Chapter 5exercise on using geolocation optionsI’ll use a cached position if the browser has one that’s less than 10 minutes old, otherwise, I want a fresh position.Below you’ll see a few options for the geolocation API. For each option, match it to its behavior.{maximumage:600000}{time...

Page 238

202 Chapter 5Wouldn’t it be fun to see how fast your browser can find your location? We could make it as hard for your browser as we can: ƒ let’s ask it to enable high accuracy, ƒ let’s not allow it to use a cache (by setting maximumAge to 0) ƒ let’s time it by setting the time...

Page 240

204 Chapter 5adding a path to the mapLet’s finish this app!When you sit back and think about it, with just a little HTML and JavaScript you’ve created a web app that not only can determine your location, but it can also track and display it in near real time. Wow, HTML sure has grown up (an...

Page 242

206 Chapter 5optimizing marker usagevar ___________________;function displayLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var div = document.getElementById("location"); div.innerHTML = "You are at Latitude: &qu...;

Page 244

208 Chapter 5exercise solutionsHTML5crossYou’ve traveled quite far in this chapter with your first JavaScript API. Make it stick with this crossword.1234567891011Across4. Longitude is measured from _____________, England.7. Accuracy has implications for your app because it can affect _________...

Page 246

210 Chapter 5exercise solutionsWrite what you think this does here.This code turns our app into a Hot/Cold game. It displays a “getting hotter” message if you’re moving closer to the WickedlySmart HQ, or “getting colder” if you’re moving farther away. If you’re within 0.1 km of the...

Page 248

212 Chapter 5exercise solutionsHTML5cross SolutionP1T2N3ARG4R E E N W I C HM5WTAAH6B7A T T E R YONXAOGIVE8R R O RUMEKLB9U C K A R O O B A N Z AIA10C C U R A C YMSITAW11I C K E D L Y S M A R TIGNYOEENAcross4. Longitude is measured from _____________, England. [GREENWICH] 7. Accuracy has implicati...

Page 250

214 Chapter 6the mighty gumball appThis just in: Mighty Gumball, Inc., an innovative company that builds and deploys real gumball machines, has contacted us for some help. If you’re not up on them, they’ve recently network-enabled their gumball machines to track sales in near real time.Now i...

Page 252

216 Chapter 6overview of mighty gumballYou probably need a little background beyond Mighty Gumball’s short note. Here’s what we’ve got: first, they’ve got gumball machines all over the country sending sales reports to a Mighty Gumball server, which combines all those reports and makes t...

Page 254

218 Chapter 6preparing the markupWhile we’re waiting on those specs from Mighty Gumball, let’s get some HTML going.You’re probably getting the idea we don’t need a lot of HTML markup to get a web app off the ground, and you’re right. All we need is a place to put our sales reports as t...

Page 256

220 Chapter 6using xmlhttprequestHow to make a request from JavaScriptOkay, so we know we can retrieve data with HTTP, but how? We’re going to write a little code to create an actual HTTP request and then ask the browser to make the request on our behalf. After it’s made the request, the bro...

Page 258

222 Chapter 6how to access an http responseOne thing I didn’t notice is how we get the data from the HTTP call. I see the onload function, but no code to access the data? Did I miss something?We just hadn’t quite got there yet. The data from the HTTP GET retrieval can be found in the respons...

Page 260

224 Chapter 6exercise solutionwindow.onload = function () { var url = "http://wickedlysmart.com/ifeelluckytoday"; var request = ______________________ ____________________________ { if (________________________) { displayLuck(_______________________); ...

Page 262

226 Chapter 6introducing jsonYou might (or might not) remember that XML was going to save us all—a data format that was human readable and machine parseable, a data format that was going to support all the data needs of the world. And when XMLHttpRequest was first developed, XML was indeed the...

Page 264

228 Chapter 6reviewing the mightygumball specificationshttp://gumball.wickedlysmart.com/Thanks for taking this on!!!We’ve got all the sales from the Gumball machines aggregated and being served from our central server at:We’ve chosen JSON as our data format and if you hit the above URL, you�...

Page 266

230 Chapter 6how to test locallyIt’s time for another test drive, but we have a little detour to take care of first. The Mighty Gumball engineers asked us to test locally before hitting their production server, which is a good idea. But to do that we need the data to live on a server so that ...

Page 268

232 Chapter 6If you don’t want to set up your own server, you can always use a remote server, but you’ll need to host your HTML, JavaScript and CSS, as well as the JSON file, all on the same server (we’ll talk later about why this is crucial) in order to follow along with this example. Mos...

Page 270

234 Chapter 6testing mighty gumball version oneRemember we’re sending an HTTP request to get the data in sales.json, which we’re just dumping into the <div> for now. Looks like it worked! If you’re having trouble, check each file independently through your browser and make sure it is...

Page 272

236 Chapter 6adding json supportfunction updateSales(responseText) { var salesDiv = document.getElementById("sales"); var sales = JSON.parse(responseText); for (var i = 0; i < sales.length; i++) { var sale = sales[i]; var div = document.createElement("div...

Page 274

238 Chapter 6a problem with mighty gumballA Live Test Drive...Make sure your URL change is saved in your mightygumball.js file on your server, if you want to keep retrieving your HTML from there, or to your local hard drive if you are using localhost. From there you know what to do: point your b...

Page 276

240 Chapter 6interviewing xmlhttprequestHead First: Welcome back to the second part of the interview, XMLHttpRequest. I wanted to ask you about browser support—are you available in only the newer browsers only?XMLHttpRequest: The guys don’t call me “old man” for nothing; I’ve been supp...

Page 278

242 Chapter 6reviewing what went wrongRemember, we left you with a cliffhanger? A bug.We had all the code working just fine using our local server, but as soon as we moved to the live server on the Web, it failed!What we expected:What we got:Ajay, the Quality Assurance Guy, got pretty upset.Here...

Page 280

244 Chapter 6browser security overviewFirst the user (through the browser) makes a request for an HTML page (and, of course, any associated JavaScript and CSS):The page needs some data from GoodDomain.com so it makes a XMLHttpRequest for the data:21Server happily serves you your page.Your browse...

Page 282

246 Chapter 6reviewing our optionsNice job, all this code and this won’t even work? Can’t we just copy our files to the Mighty Gumball servers?Usually the answer is yes. Say you were a developer working on code for Mighty Gumball, then you’d typically have access to their servers (or to p...

Page 284

248 Chapter 6introducing jsonpJoe: Totally! But, what is it?Jim: Sounds like it is another way to get data from web services into our apps.Frank: I’m useless here, I’m just the creative guy.Jim: Frank, I don’t think this is that bad. I quickly google’d JSONP and basically it is a way of ...

Page 286

250 Chapter 6the guru teaches jsonpWeb Developer: It’s similar to dog.js, but it calls a function animalSays. It also has two arguments not one: the animal type, and the animal sound.Guru: Write the function animalSays and add it in a <script> element in the head of your HTML file, above...

Page 288

252 Chapter 6jsonp overviewMeet JSONPYou’ve probably figured out that JSONP is a way to retrieve JSON objects by using the <script> tag. It’s also a way of retrieving data (again, in the form of JSON objects) that avoids the same-origin security issues we saw with XMLHttpRequest. Let�...

Page 290

254 Chapter 6dealing with callbackshttp://gumball.wickedlysmart.com/?callback=updateSalesI see how to use the <script> tag to make the browser go retrieve JavaScript, and how the server can put its data in that JavaScript. What about the function name though? How does the web service know ...

Page 292

256 Chapter 6reimplementation planLet’s update the Mighty Gumball web appIt’s time to update your Mighty Gumball code with JSONP. Other than removing the existing code that deals with the XMLHttpRequest call, all the changes are minor. Let’s make those changes now:Remove our XMLHttpReques...

Page 294

258 Chapter 6testing jsonpTest drive your new JSONP-charged codeIf you’ve made all your changes, it’s time for a test drive. Reload mightygumball.html into your browser. You’re now loading Mighty Gumball sales data using your web app and JSONP. The page should look the same as when you wer...

Page 296

260 Chapter 6a chat with xmlhttprequest and jsonpTonight, we have two popular methods of retrieving data from your browser.Tonight’s talk: XMLHttpRequest and JSONPXMLHttpRequest:No offense meant, but aren’t you kind of a hack? I mean your purpose is to retrieve code, and people are using you...

Page 298

262 Chapter 6exercising your brain with jsonpYou came up a little short. I thought I was going to see a constantly updated stream of sales from my gumball machines. Sure, I could hit refresh on my browser, but then I see only the newest reports, and only when I manually refresh. That’s not w...

Page 300

264 Chapter 6making jsonp dynamicThen we need to implement our JSONP code in the handler, so that each time it is called it makes a request to get the latest Mighty Gumball sales reports. Here’s what we need to do:We're going to remove the JSONP <script> element from the Mighty Gumball ...

Page 302

266 Chapter 6testing an interval timerA time-driven test driveThis should be fun. Make sure you’ve typed in the handleRefresh function and also made the changes to the onload handler. Save everything and load it into your browser. You’ll see a stream of alerts, and you’ll have to close you...

Page 304

268 Chapter 6jsonp dom insertionHow do we insert the script into the DOM?We’re almost there, we just need to insert our newly created script element. Once we do that the browser will see it and do its thing, causing the JSONP request to be made. Now, to insert the script requires a little bit ...

Page 306

270 Chapter 6closeup of more dom methodsThe replaceChild method tells the <head> element to replace one of its children, oldScriptElement, with a new child, newScriptElement.Our new <script> elementThe <script> that’s already in the page.head.replaceChild(newScriptElement, ol...

Page 308

272 Chapter 6handling the browser cacheWe almost forgot: watch out for the dreaded browser cacheWe’re almost ready to go here, but there’s a small detail we need to take care of, and it’s one of those “if you’ve never done it before, how would you know you need to address it” kind of...

Page 310

274 Chapter 6using a web service parameterYou got it.And to keep track of the last sales report received we’re going to need to make some additions to the updateSales function, where all the processing of the sales data happens. First, though, we should declare a variable to hold the time of t...

Page 312

276 Chapter 6You’ve outdone yourselves! This works great and now I can totally keep up with sales at my desk or when I’m mobile. I’m starting to really think there is something to these web apps. Just think what we’re going to be able to do with gumball machines, JSON, and all those HTML...

Page 314

278 Chapter 6giving your brain some exerciseHTML5crossWow, you got your apps talking to the Web in this chapter! Time for some left‑brain activity to help it all sink in.123456789101112 13141516Across2. The pattern of using XMLHttpRequest to get data from servers is sometimes called ______.5. ...

Page 316

280 Chapter 6exercise solutionsHTML5cross SolutionC1AA2J3A X4LAM5G 2 2 0 0LT6VLBWC7AP8A D DI N GLSC9CTICD10A T AKTJ11FRLEUFIIE12M13B A R R A S S E DHPFA14AYA15C TIV E X O B J E C TNRAGNYEIRP16A D DI N GAcross2. The pattern of using XMLHttpRequest to get data from servers is sometimes called ____...

Page 318

282 Chapter 7the new start-up tweetshirtOur new start-up: TweetShirtOur motto is “if it’s worth tweeting on Twitter, it’s worth wearing on a t-shirt.” After all, half the battle of calling yourself a journalist is being willing to put your words in print, so what better place than printi...

Page 320

284 Chapter 7reviewing requirementsTake another look at the requirements on the previous page. How do you think you can accomplish this using HTML5? Remember, one requirement is making sure your site works across as many device formats and sizes as possible?Check all the possibilities below (and...

Page 322

286 Chapter 7adding a canvas to your pageHow to get a canvas into your web pageFrank was right, in some ways a canvas is like an <img> element.You add a canvas like this:<canvas id="lookwhatIdrew" width="600" height="200"></canvas>And the browser a...

Page 324

288 Chapter 7adding css for your canvas<!doctype html><html lang="en"><head> <title>Look What I Drew</title> <meta charset="utf-8"> <style> canvas { border: 1px solid black; } </style></head>&l...;

Page 326

290 Chapter 7drawing on a canvas<!doctype html><html lang="en"><head> <title>Look What I Drew</title> <meta charset="utf-8" /> <style> canvas { border: 1px solid black; } </style> <script> wind...

Page 328

292 Chapter 7reviewing how canvas code worksvar context = canvas.getContext("2d");context.fillRect(10, 10, 100, 100);This is a bit of protocol we have to follow before we can start drawing on the canvas.Try this out and you should see a black rectangle appear. Try changing the values f...

Page 330

294 Chapter 7canvas and internet explorerIE supports canvas only in versions 9 and later, so you should code your page to let your users know.Here’s the deal: if you really really need to support canvas functionality in Internet Explorer (again, pre-version 9), then you can check out the Explo...

Page 332

296 Chapter 7reviewing the implementation planFrank: Sure, but also we need the user interface for the user to specify all this. I mean we’ve got the mock-up, but we need to implement it.Judy: You’re right Frank. Not much point in going further without the interface.Joe: Isn’t that just HT...

Page 334

298 Chapter 7BE the BrowserBelow, you’ll find the form for the t-shirt interface. Your job is to play like you’re the browser and to render the interface. After you’re done, compare your interface to the one on the previous page to see if you did it correctly.<form><p> <l...

Page 336

300 Chapter 7creating the htmlFirst, let’s get the HTML in placeEnough talk! Let’s build this thing. Before we do anything else, we just need a simple HTML page. Update your index.html file so it looks like this:<!doctype html><html lang="en"><head> <title&...

Page 338

302 Chapter 7adding the javascriptTime to get computational, with JavaScriptMarkup is great, but it’s the JavaScript that brings the TweetShirt web application together. We’re going to put some code into tweetshirt.js. Right now, we want to take the baby step of just putting random squares o...

Page 340

304 Chapter 7implementing the squaresfunction drawSquare(canvas, context) { var w = Math.floor(Math.random() * 40); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.fillStyle = "lightblue"; context.fillRect(x, y...

Page 342

306 Chapter 7fixing the squares codeWhy are we seeing the old squares and the new squares when we preview?This is actually kind of a cool effect... but it’s not what we wanted. We want the new squares to replace the old squares each time we press preview (just like we’ll also want the new tw...

Page 344

308 Chapter 7reviewing fill styleQ: I was expecting we’d set the background color of the squares and the canvas by passing in a color value to fillRect. I don’t really get how fillStyle works. How does it affect what fillRect does?A: Great question. This is a little different from how you mi...

Page 346

310 Chapter 7introducing paths and arcsAnd, a couple of hours later...Frank: I don’t know what’s going on, I’ve double checked everything, but, no matter what I do, when I call fillCircle, I get nothing on the canvas.Judy: Well, show me your fillCircle method.Frank: What do you mean by my ...

Page 348

312 Chapter 7how to draw with pathsSo you have a path! Now what?You use the path to draw lines and fill in your shape with color, of course! Go ahead and create a simple HTML5 page with a canvas element and type in all the code so far. Give it a test run, too.Trace another line from the previous...

Page 350

314 Chapter 7looking at the arc methodBreaking down the arc methodcontext.arc(x, y, radius, startangle, endangle, direction)x,y The x and y parameters determine where the center of the circle will be located in your canvas.radius This parameter is used to specify 1/2 the width of the circl...

Page 352

316 Chapter 7getting experience with arcWhat we need right now is a good example. Let’s say that you want to trace an arc over a circle that is centered at x=100, and y=100 and you want the circle to be 150 pixels wide (or, a radius of 75). And, the path you want to trace is just 1/4 of the ci...

Page 354

318 Chapter 7adding the circlesBack to writing the TweetShirt circle codefunction previewHandler() { var canvas = document.getElementById("tshirtCanvas"); var context = canvas.getContext("2d"); fillBackgroundColor(canvas, context); var selectObj = document.getElem...

Page 356

320 Chapter 7Whew! That was a fun set of pages we just went through. We don’t know about you, but we’re ready for some cookies. How about taking a short cookie break? But, don’t think we aren’t going to give you something fun to do while you’re having them (check on the exercise to the...

Page 358

322 Chapter 7adding the jsonp for twitterYou’re back, you’re rested, refreshed, and we’re on the home stretch to getting this start-up off the ground. When you look at all the work we’ve done, all we really have left is to display the tweets and the other text in the canvas preview.Now, ...

Page 360

324 Chapter 7testing tweetshirt with twitterTest driving TweetsLet’s do a quick test drive. Make sure you’ve got all the code added to tweetshirt.js and index.html. Also make sure you’re using a Twitter username that has recent tweets in your script src URL (so you’ll be sure you see som...

Page 362

326 Chapter 7structure and presentation discussionThat’s a really good point.Now let’s work through why it’s set up this way. Remember that canvas is designed to give you a way to present graphics within the browser. Everything in the canvas is considered presentation, not content. So whil...

Page 364

328 Chapter 7closer look at text in the canvasCanvas Text Up CloseNow that you’ve had a chance to draw your first text in the canvas, it’s time to take a closer look at the text methods and properties available in the canvas API. As you found out in the exercise this is a fairly low-level AP...

Page 366

330 Chapter 7drawing textGiving drawText a spinNow that you’ve got more of the API in your head, go ahead and get the code you created in the Magnet Code exercise typed in— here it is with the magnets nicely translated to code:Take a shot at completing the drawText function. You need to get...

Page 368

332 Chapter 7launching tweetshirtYes! It works. We’re ready to launch!!Guys, I hate to burst your bubble, but you’re not done yet. You’re supposed to put an image of the Twitter bird on the t-shirt too!There’s the tweet on the t-shirt preview. Nice!Remember the TweetShirt founder?A quick...

Page 370

334 Chapter 7adding the imageYet another test driveDouble check your code and get in another test drive! Wow, this is really looking polished now. Give it a few tries; try it with circles or squares. You’ll notice that we used a png with a transparent background so that the circles and squares...

Page 372

336 Chapter 7canvas metadataNo, that requires a little extra work.The canvas is really meant to be a simple drawing surface. When you draw a shape, the canvas just sees it as pixels. The canvas isn’t aware of the specifics of what you’re drawing, and it doesn’t keep track of any shapes. It...

Page 374

338 Chapter 7review of canvas ƒCanvas is an element you place in your page to create a drawing space. ƒThe canvas has no default style or content until you provide it (so you won’t see it on the page until you draw something in it or add a border with CSS). ƒYou can have more than one canva...

Page 376

340 Chapter 7some fun for your brainHTML5crossWe’re looking forward to checking out the <canvas> and <video> scoop in the next chapter. In the meantime, cement your new canvas knowledge with a quick crossword and perhaps a cup of tea.12345678910111213141516Across4. Everything on th...

Page 378

342 Chapter 7exercise solutionsPseudo-code Magnets SolutionUse your pseudo-magical coding powers to arrange the pseudo code below. We need to write the pseudo-code for the drawSquare function. This function takes a canvas and context and draws one randomly sized square on the canvas. Here’s ou...

Page 380

344 Chapter 7exercise solutionsfunction drawSmileyFace() { var canvas = document.getElementById("smiley"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(300, 300, 200, 0, degreesToRadians(360), true); context.fillStyle = "#ffffcc&...

Page 382

346 Chapter 7exercise solutionsSee if you can piece together the drawBird function from all the pieces Judy gave us. The drawBird function takes a canvas and context, and draws the bird onto the canvas. You can assume that with this function we’re placing “twitterBird.png” at the locatio...

Page 384

actionURI(https://freepdf-books.com /):www.freepdf-books.com actionURI(https://freepdf-books.com /):https://freepdf-books.com

Page 386

350 Chapter 8announcing webville televisionWebville TV—all the content you’ve been waiting for, like Destination Earth, The Attack of the 50’ Woman, The Thing, The Blob, and it wouldn’t be beyond us to throw in a few ’50s educational films. What else would you expect in Webville? But t...

Page 388

352 Chapter 8video formats can cause issuesYes, it’s probably the video format.While the browser makers have agreed on what the <video> element and API look like in HTML5, not everyone can agree on the actual format of the video files themselves. For instance if you are on Safari, H.264 ...

Page 390

354 Chapter 8overview of video attributesClosely inspecting the video attributes...The src attribute is just like the <img> element’s src—it is a URL that tells the video element where to find the source file. In this case, the source is video/preroll.mp4. (If you downloaded the code f...

Page 392

356 Chapter 8video format overviewWe wish everything was as neat and tidy as the video element and its attributes, but as it turns out, video formats are a bit of a mess on the Web. What’s a video format? Think about it this way: a video file contains two parts, a video part and an audio part,...

Page 394

358 Chapter 8managing video formatsHow to juggle all those formats...So we know it’s a messy world with respect to video format, but what to do? Depending on your audience you may decide to provide just one format of your video, or several. In either case, you can use one <source> elemen...

Page 396

360 Chapter 8questions about video encoding and playbackQ: Is there any hope of getting to one container format or codec type in the next few years? Isn’t this why we have standards?A: There probably won’t be one encoding to rule them all anytime soon—as we said earlier, this topic interse...

Page 398

362 Chapter 8supporting flash videoI think Flash video is still important and I want to make sure I have a fallback if my users’ browsers don’t support HTML5 video.No problem.There are techniques for falling back to another video player if your preferred one (whether that be HTML5 or Flash o...

Page 400

364 Chapter 8how a playlist worksA little content “programming” on Webville TVSo far we’ve got one single video up and running on Webville TV. What we’d really like is a programming schedule that serves up a playlist of videos. Let’s say we want to do this on Webville TV:123Show a litt...

Page 402

366 Chapter 8implementing a playlistImplementing Webville TV’s playlist<script src="webvilletv.js"></script>Now we’re going to use JavaScript and the video API to implement the Webville TV playlist. Let’s start by adding a link to a JavaScript file in webvilletv.html;...

Page 404

368 Chapter 8testing the playlistGood question.When we were using multiple source tags we could count on the browser to sort through one or more video formats and decide if it could play any of them. Now that we’re using code we’re just giving the video element a single option. So how do we ...

Page 406

370 Chapter 8dealing with formats againwindow.onload = function() { playlist = ["video/preroll", "video/areyoupopular", "video/destinationearth"]; video = document.getElementById("video"); video.addEventListen...

Page 408

372 Chapter 8our message to youI keep tellin’ you, it’s not just about JavaScript... you’ve gotta see the big picture. Building web apps is about markup, CSS, and JavaScript and its APIs. At some point we have to treat you like a real developer.In this book we’ve (hopefully) helped you e...

Page 410

374 Chapter 8checking out the starring you video boothBelow you’ll see our demo unit complete with a user interface. What we’ve got is a video screen where users will see their video played back. They’ll be able to apply a filter like “old-time western” or “sci-fi,” see how it look...

Page 412

376 Chapter 8looking at the existing codeSo let’s crack open the JavaScript (videobooth.js). It looks like all the interface buttons work, they just don’t do anything interesting, yet. But it’s important that we understand how these are set up because the buttons are going to invoke the co...

Page 414

378 Chapter 8setting up button handlersfunction setvideo(e) { var id = e.target.getattribute("id"); if (id == "video1") { pushUnpushButtons("video1", ["video2"]); } else if (id == "video2") { pushUnpushButtons("video2&...

Page 416

380 Chapter 8an early testWe haven’t done much writing code, but we are reading and understanding code, and that can be just as good. So load the videobooth.html file into your browser and check out the buttons. Give them a good testing. For extra credit, add some alerts into the handler funct...

Page 418

382 Chapter 8exercise solutionAll the player controls use the handleControl handler.Radio buttons, play and pause can’t be selected at the same time.Loop and Mute are toggle buttons, they can be used independently of any other buttons.All these are radio buttons; we allow just one effect to be...

Page 420

384 Chapter 8supporting the custom video controlsImplementing the video controlsAlright, time to get to those buttons! Now, it’s important to point out that for this project, we’re going to implement our own video controls. That is, rather than use the built-in video controls, we’re going...

Page 422

386 Chapter 8dealing with video ended eventTaking care of a loose end...There’s a little loose end we need to take care of to really make these buttons work like they should. Here’s the use case: let’s say you’re playing a video and you don’t have loop selected, and the video plays to ...

Page 424

388 Chapter 8video element interviewHead First: Welcome, Video. I’m going to jump right to the topic on everyone’s minds, and that would be YOU and the Canvas element.Video: Meaning?Head First: Allegedly nights out on the town, early morning breakfasts together. Need I say more?Video: What i...

Page 426

390 Chapter 8plan for implementing video effects1We know we’ve still got to hook up those buttons that control the effects. So we’re going to do that first.2We’re going to learn a little about video processing and check out the “scratch buffer” technique for adding our effects.3We’re...

Page 428

392 Chapter 8overview of video processingHow video processing worksWhat we’ve done so far is given ourselves a way to assign a function to the effectsFunction global variable as a result of clicking on the effects buttons in the interface. For now, just take that knowledge and tuck it in the b...

Page 430

394 Chapter 8using a scratch buffereffectFunction( )3We iterate over scratch buffer, pixel by pixel, passing each pixel to our effects function for processing.4After all the pixels in the scratch buffer are processed, we copy them from the scratch buffer canvas to the display canvas.5And the...

Page 432

396 Chapter 8implementing frame processingWriting the code to process the videoWe’ve got a video element, a buffer that’s a canvas, and a canvas that is going to display the final video frames. And we’ve also got them stacked on one another so we see only the top display canvas, which will...

Page 434

398 Chapter 8frame rates and timersWe wish we could.You’re absolutely right: what we’d love to do is have our handler called once for every frame, but the video API doesn’t give us a way to do that. It does give us an event named timeupdate that can be used to update a running time displa...

Page 436

400 Chapter 8exercise in implementing video effectsThis book isn’t really about video processing and effects, but it sure is fun. Below we’ve got the western and sci-fi effects. Look through the code and make notes on the right as to how each works. Oh, and we added an extra one—what does ...

Page 438

402 Chapter 8IN THE LABORATORYObviously we’ve only scratched the surface in terms of video processing, and we’re sure you can think of more creative effects than those we came up with. Go ahead and think up a few, implement them, and document them here. Have you invented something really coo...

Page 440

404 Chapter 8video streamingNo.There is no standard for streaming video with HTML5. As a matter of fact the problem isn’t HTML5, there isn’t really a supported standard for streaming video anywhere—but there are plenty of proprietary ones. Why? There are a number of reasons ranging from th...

Page 442

406 Chapter 8handling video errorsDealing with errors is complex business and how you deal with errors depends a lot on your application, and what would be appropriate for the app and your users. That said, we can at least get you started and point you in the right direction. Let’s take Webvil...

Page 444

408 Chapter 8review of the video api ƒYou can play video by using the <video> element with a few simple attributes. ƒThe autoplay attribute starts playback on page load, but use only when appropriate. ƒThe controls attribute causes the browser to expose a set of playback controls. ƒThe...

Page 446

410 Chapter 8exercise solutionsThis book isn’t really about video processing and effects, but it sure is fun. Below we’ve got the western and sci-fi effects. Look through the code and make notes on the right as to how each works. Oh, and we added an extra one—what does it do? Here’s our ...

Page 448

412 Chapter 8actionURI(https://freepdf-books.com /):www.freepdf-books.com actionURI(https://freepdf-books.com /):https://freepdf-books.com

Page 450

414 Chapter 9history of browser storageHow browser storage works (1995 - 2010)Building a shopping cart? Need to store some user preferences for your site? Or just need to stash some data that you need to be associated with each user? That’s where browser storage comes in. Browser storage gives...

Page 452

416 Chapter 9how web storage worksCookies have been with us a long time, but you might be able to think of some ways they could be improved on.Check all the items below that you think make cookies problematic:There’s only 4k to work with, my app needs more storage than that.Sending the cookie ...

Page 454

418 Chapter 9using web storageNote to self...Pick up dry cleaningNeed a system for getting things done? It’s hard to improve on the old Post-it note system (more commonly known as stickies). You know how it works: you jot down your “to do” item, stick it somewhere, and once you’ve done t...

Page 456

420 Chapter 9how the local storage api worksSure. Here it is in a nutshell: your browser provides you with a local store—space on your own computer, in your browser—that a page can make use of to store key/value pairs. You created a few key/value pairs, stored them away using the local stora...

Page 458

422 Chapter 9questions about local storageQ: First you said “Web Storage” and then you started talking about “local storage.” Are they the same?A: The Web standard is named “Web Storage” but most people just call it local storage (in fact, the browsers even expose the API through the...

Page 460

424 Chapter 9how local storage is like an arrayLocal storage has another side you haven’t seen yet. Not only does localStorage provide the getter and setter methods (that is, getItem and setItem), it also allows you to treat the localStorage object as an associative array. What does that mea...

Page 462

426 Chapter 9storage technologies chatTonight we have the incumbent browser storage technology, the “Cookie” along with the new front runner, Local Storage.Tonight’s talk: Cookie and Local StorageCookie:There he is, the golden boy, Local Storage. I’ve been in this business for over a dec...

Page 464

428 Chapter 9the stickies appNow that you’ve had a little time to play with Web Storage, let’s take this implementation further. We’re going to create a Sticky Notes application so you can see your stickies and add new ones. Let’s take a peek at what we’re going to build before we bui...

Page 466

430 Chapter 9writing the stickies javascriptwindow.onload = init;function init() { for (var i = 0; i < localStorage.length; i++) { var key = localStorage.key(i); if (key.substring(0, 6) == "sticky") { var value = localStorage.getItem(key); addS...

Page 468

432 Chapter 9creating stickies with codefunction createSticky() { var value = document.getElementById("note_text").value; var key = "sticky_" + localStorage.length; localStorage.setItem(key, value); addStickyToDOM(value);}And the code to create a new sticky note:W...

Page 470

434 Chapter 9diagnosing browser storageWouldn’t it be great if there were a tool to directly view the items in your localStorage? Or a tool to delete items or even clear the whole thing out and start over when you are debugging? Well, all the major browsers ship with built-in developer tools t...

Page 472

436 Chapter 9a problem with stickiesAh, you’ve discovered a major design flaw.Alright, it’s time to come clean: we’ve built a great little app so far, and it should work perfectly for years to come as long as you don’t introduce any other items into the localStorage (like Joel did with h...

Page 474

438 Chapter 9storing arraysIf only I could store an array in localStorage. We could use it to hold all the keys of the stickies and we could also always easily know the number of stickies we’re storing. But we all know localStorage stores only strings, so even though an array would be dreamy, ...

Page 476

440 Chapter 9rewriting stickies using an array Okay, we know roughly how we’re going to keep track of our stickies using an array, but let’s take this a little further and make sure we can iterate through and display all the stickies. In the current code we display all the stickies in the in...

Page 478

442 Chapter 9adding a unique idWhat needs to change?We have two things that need to change in createSticky. First, we need a new way to generate a key for each sticky that is unique. We also need to alter the code so that it stores the sticky in the stickiesArray in localStorage.Q: What are mill...

Page 480

444 Chapter 9integrating all the codefunction init() { var button = document.getElementById("add_button"); button.onclick = createSticky; var stickiesarray = getStickiesarray(); for (var i = 0; i < stickiesarray.length; i++) { var key = stickiesarray[i]; va...

Page 482

446 Chapter 9another feature request: deleteIt’s hard to manage my busy life if I can’t get rid of these stickies after I’m done with them. Can you add a delete function?Deleting sticky notesShe’s right, this app isn’t going to be very successful if we can’t remove stickies. We’ve ...

Page 484

448 Chapter 9exercise solution(1) Remove the sticky with the key “sticky_1304220006342” from localStorage using the localStorage.removeItem method.(2) Get the stickiesArray.(3) Remove element with key=“sticky_1304220006342” from the stickiesArray.(4) Write stickiesArray back into localS...

Page 486

450 Chapter 9selecting stickies with html and javascriptHow do you select a sticky to delete?function addStickyToDOM(key, value) { var stickies = document.getElementById("stickies"); var sticky = document.createElement("li"); sticky.setattribute("id", key);...

Page 488

452 Chapter 9deleting stickies from the domNice work! Now, can you give me a way to color code my stickies? You know yellow for urgent, blue for ideas, pink for backburner, that kind of thing?Okay, test it...Get all that code in, load the page, add and delete some stickies. Quit your browser, lo...

Page 490

454 Chapter 9using json to store colorlocalStoragekey: “sticky_1304391836840”value: {“value”:”Cancel cable tv, who needs it now?”,”color”:”LightPink”}function createSticky() { var stickiesarray = getStickiesarray(); var currentDate = new Date(); var colorSelectObj =...

Page 492

456 Chapter 9testing color stickiesTest drive sticky note colorsBefore running the Note to Self app again, you’ll need to clear out your localStorage first because the previous version of our stickies didn’t have any color stored in them, and now we’re using a different format for our stic...

Page 494

458 Chapter 9We’ve told you that you have five whole megabytes of storage on every user’s browser, but while five megabytes sounds like a lot, remember that all your data is stored in the form of a string rather than in a byte-efficient data format. Take a long number, say, the national debt...

Page 496

460 Chapter 9info about session storageI’ve been beta testing my shopping cart app and users don’t want their shopping cart sticking around in the browser. How can I remove all the shopping cart items when the user closes the browser? Did I choose the wrong technology?No Luke, there is anoth...

Page 498

462 Chapter 9ways to use web storageNow that you know localStorage, how are you going to use it?I’m going to store playlists with metadata for my users. They’ll be able to store their favorite clips along with the timecode where they left off viewing.I’m using sessionStorage for my new eco...

Page 500

464 Chapter 9review of web storage ƒWeb Storage is a store in your browser and an API you can use to save and retrieve items from the store. ƒMost browsers provide at least 5 megabytes of storage per origin. ƒWeb Storage consists of local storage and session storage. ƒLocal storage is persis...

Page 502

466 Chapter 9exercise solutionsfunction shellGame() { localStorage.setItem("shell1", "pea"); localStorage.setItem("shell2", "empty"); localStorage.setItem("shell3", "empty"); localStorage["shell1"] = "empty&qu...;

Page 504

468 Chapter 9exercise solutionsWe’ve told you that you have five whole megabytes of storage on every user’s browser, but while five megabytes sounds like a lot, remember that all your data is stored in the form of a string rather than in a byte-efficient data format. Take a long number, say,...

Page 506

470 Chapter 9exercise solutionsgetItemlengthQUOTA_EXCEEDED_ERRsetItemremoveItemkeyI take keys and values and write them into the localStorage. Now keep in mind if there’s an item with that key already in the localStorage, I’m not going to warn you, I’m just going to overwrite it so you bet...

Page 508

actionURI(https://freepdf-books.com /):www.freepdf-books.com actionURI(https://freepdf-books.com /):https://freepdf-books.com

Page 510

474 Chapter 10javascript threadsThe Dreaded Slow ScriptOne of the great things about JavaScript is it does only one thing at a time. It’s what we like to call “single-threaded.” Why’s that great? Because it makes programming straightforward. When you have lots of threads of execution hap...

Page 512

476 Chapter 10javascript web workersAdding another thread of control to helpBefore HTML5, we were stuck with one thread of control in our pages and apps, but with Web Workers we’ve now got a way to create another thread of control to help out. So, if you’ve got code that takes a long time to...

Page 514

478 Chapter 10how web workers workHow Web Workers workBrowserLet’s take a look at a day in the life of a Web Worker: how workers are created, how they know what to do, and how they get results back to your main browser code.To use Web Workers, the browser first has to create one or more worker...

Page 516

480 Chapter 10dom accessWhy not allow workers to access the DOM? I mean this seems like a lot of trouble to pass messages back and forth when all of these workers are running in the same browser.To keep things efficient. One reason the DOM and JavaScript have been so successful is that we’re ...

Page 518

482 Chapter 10watch out for browser support Almost all the modern browsers support Web Workers, but there is one exception: Internet Explorer 9. The good news is that for IE10 and later, you can count on Web Workers, but with IE9 and all the IE versions before it, you’ll have to suppl...

Page 520

484 Chapter 10writing a worker managerNow that you know how to create a worker (and how easy it is), let’s start working on our manager.js code. We’ll keep this code simple and create just one worker for now. Create a file named manager.js and add this code:Writing Manager.jsAnd we’re usin...

Page 522

486 Chapter 10your first workerWriting the worker’s message handleronmessage = pingPong;function pingPong(event) { if (event.data == "ping") { postMessage("pong"); }}When the worker receives a message from the main code, the pingPong function will be called, an...

Page 524

488 Chapter 10BE the BrowserIt’s time to pretend you’re the browser evaluating JavaScript. For each bit of code below, act like you’re the browser and write its output in the lines provided. You can assume this code is using the same worker.js we just wrote:window.onload = function() { ...

Page 526

490 Chapter 10exercise to use compact workerquote.html<!doctype html><html lang="en"> <head> <title>Quote</title> <meta charset="utf-8"> </head><body> <p id="quote"></p> <script> ...

Page 528

492 Chapter 10including javascript code in a workerwindow.onload = function() { var numWorkers = 3; var workers = []; for (var i = 0; i < numWorkers; i++) { var worker = new Worker("worker.js"); worker.onmessage = function(event) { alert(event....

Page 530

494 Chapter 10the mandelbrot setVirtual Land GrabExplorers of the Mandelbrot Set have already grabbed areas of the virtual countryside and given them names like the lovely “Seahorse Valley,” “Rainbow Islands,” and the dreaded “Black Hole.” And given the value of physical real estate...

Page 532

496 Chapter 10computing fractalsfor (i = 0; i < numberOfRows; i++) { var row = computeRow(i); drawRow(row);}How to compute a Mandelbrot SetLet’s take a look at how you’d typically structure your code to compute a Mandelbrot Set before we get workers involved. We don’t want to foc...

Page 534

498 Chapter 10how to compute with workersNext, the browser code doles out a different part of the image for each worker to compute:The first region of the image is mine!The browser hands out pieces of the image to be computed by each worker.WorkerWorkerWorkerWorkerWorker12345I’ve got 2!3 here!...

Page 536

500 Chapter 10how workers improve applicationsWhat does it matter if I break up the task and distribute it to workers? I mean, my computer still has the same CPU, how could the computation get any faster?It can be faster in two ways... First consider an application that has a lot of “computing...

Page 538

502 Chapter 10exercise your brain doing some code designfor (i = 0; i < numberOfRows; i++) { var taskForRow = createTaskForRow(i); var row = computeRow(taskForRow); drawRow(row);}Here’s our pseudo-code now, what do you need to do to add Web Workers?You’ve certainly got a lot of b...

Page 540

504 Chapter 10ready bake fractal codeWe have to tell you we were planning on an entire chapter on the wonders of computing the Mandelbrot Set... we planned to explain it to you in detail, including a history of Benoit Mandelbrot, how he discovered it, all its amazing properties, pixel optimizati...

Page 542

506 Chapter 10ready bake fractal codeReady Bake Code Continued...function setupGraphics() { canvas = document.getElementById("fractal"); ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var width = ((i_max - i...

Page 544

508 Chapter 10how to manage workers and tasksI’m idleI’m idleI’m idleI’m idleI’m idleI’m idleI’m idleWorkerWorkerWorkerWorkerWorkerWorkerWorkerWorkerI’m idleWith the Ready Bake Code out of the way, let’s now turn our attention to writing the code that is going to create and han...

Page 546

510 Chapter 10starting your fractal workersGetting the workers startedOkay we’ve got a few things to knock out: we need to start the workers, we need to write the function that can process the work that comes back from the workers and, well, we need to write the code for the worker too. Let’...

Page 548

512 Chapter 10close up on fractal tasksA little pit stop...That was a lot of code in just a few pages. Let’s take a quick pit stop, and refuel our tanks and stomachs. We also thought you might want to get a quick peek behind the scenes and see what the worker tasks and results look like (they ...

Page 550

514 Chapter 10processing worker resultsfunction processWork(worker, workerResults) { drawRow(workerResults); reassignWorker(worker);}We hand the results to drawRow to draw the pixels to the canvas.And our worker is all free, so we can reassign it to another task. To do that let’s write a...

Page 552

516 Chapter 10testing and improvementsfunction handleClick(x, y) { var width = r_max - r_min; var height = i_min - i_max; var click_r = r_min + width * x / canvas.width; var click_i = i_max + height * y / canvas.height; var zoom = 8; r_min = click_r - width/zoom; r_max = cli...

Page 554

518 Chapter 10managing fractal generationsThe anal-retentive chef coderThere’s just one more thing, and we could let this one go, but the code just doesn’t seem correct without it. Think through this with us: you’ve got a bunch of workers happily working on their rows and all of the sudden...

Page 556

520 Chapter 10IN THE LABORATORYOur machine with eight cores. One core is maxed out and can’t compute any harder. The other seven are doing nothing to help.Now our eight cores are really working hard, and our fractal computation is WAY faster.We have eight cores in our machine, and so in the Fr...

Page 558

522 Chapter 10more worker api functionalityHandle errors in workersworker.onerror = function(error) { document.getElementById("output").innerHTML = "There was an error in " + error.filename + " at line number " + error.lineno + ": "...;

Page 560

524 Chapter 10review of web workers ƒWithout Web Workers, JavaScript is single-threaded, meaning it can do only one thing at a time. ƒIf you give a JavaScript program too much to do, you might get the slow script dialog. ƒWeb Workers handle tasks on a separate thread so your main JavaScript c...

Page 562

526 Chapter 10exercise solutionsBE the Browser SolutionIt’s time to pretend you’re the browser evaluating JavaScript. window.onload = function() { var worker = new Worker("worker.js"); worker.onmessage = function(event) { alert("Worker says " + event.data); ...

Page 564

528 Chapter 10exercise solutionsHTML5cross SolutionL1OI2T3O4B J E C T SMHAPRT5C6N7M8U L TI C O R EEO9N M E S S A G ESRARMWM10TTD11O MP12I N G P O N GEOSILSRCM13A N D E L B R O TSARAXM14A N A G E RITGEPS15E A H O R S EETSJ16A M E S H E N S T RI D G EAcross4. You can pass ______ to workers using p...

Page 566

actionURI(https://freepdf-books.com /):www.freepdf-books.com actionURI(https://freepdf-books.com /):https://freepdf-books.com

Page 568

532 Appendixmodernizr and audio#1 ModernizrOne thing you’ve probably noticed in this book, is that when you want to detect browser support for an API, there is no uniform way of doing so; in fact, almost every API is detected in a different way. For geolocation, for instance, we look for the g...

Page 570

534 AppendixjQuery#3 jQueryjQuery is a JavaScript library that is aimed at reducing and simplifying much of the JavaScript code and syntax that is needed to work with the DOM, use Ajax and add visual effects to your pages. jQuery is an enormously popular library that is widely used and expandabl...

Page 572

536 AppendixXHTML and SVG#4 XHTML is dead, long live XHTMLWe were pretty tough on XHTML in this book, first with the “XHTML is dead” discussion, and then later with “JSON versus XML”. The truth is, when it comes to XHTML, it is only XHTML 2 and later that has died, and in fact, you can w...

Page 574

538 Appendixoffline web apps and web sockets#6 Offline web appsIf you’ve got a smartphone or tablet, you’re probably accessing the Web on the go, and with WiFi and cellular networks, you’re connected almost all the time. But what about those times when you’re not? Wouldn’t it be great ...

Page 576

540 Appendixmore canvas api#8 More canvas APIWe had fun with the canvas in Chapter 7, building our TweetShirt startup. But there are lots of other fun canvas-related things you can do and we wanted to touch on a few more of them here. We mentioned very briefly that you can save and restore the c...

Page 578

542 Appendixselectors api and more#9 Selectors APIYou already know how to select elements from the DOM using document.getElementById; we’ve used it throughout this book as a way to get HTML and JavaScript working together. You’ve also seen how to use document.getElementsByTagName (this metho...

Page 580

544 Appendixhtml5 guide to new constructionI can’t believe the book is almost over. Before you go, we’ve got a little parting gift for you from the City of Webville; it’s the guide to the HTML5 elements (and what’s new in CSS3) that we promised you. Isn’t Webville great?!actionURI(htt...

Page 582

546 Appendixhtml5 semantic elements<section>A <section> is a “generic document”. You could use <section> to mark up, oh, say a Guide to HTML. Or to enclose the HTML for a game. A <section> is not a generic container—that’s <div>’s job. And remember, use &l...;

Page 584

548 Appendixcss3 propertiesWebville Guide to CSS3 PropertiesNow that you’ve got your new building blocks into place, it’s time to think about some interior design. You’ll want to make all your new construction look good, right?Adding style to your new construction with CSS3New propertiesTh...

Page 586

550 Indexthe indexappendChild methodelement object 194,158in addStickyToDOM function (example) 486,450ul object method 137,101Apple’s HTTP Live Streaming 440,404application/xhtml+xml MIME type 572,536arc method, canvas context 349, 313direction, startAngle, and endAngle parameters ...

Page 588

552 Indexthe index<canvas> elementadding border using CSS 324,288adding to web page 322, 286cubicle conversation about the <canvas> element 321,285partnership with <video> element 375, 339, 424,388case sensitivity in JavaScript 77,41cell phone triangulation 205,169ch...

Page 590

554 Indexthe indexdegradation, graceful 55,19degreesangles measured in 352,316converting to radians 353,317latitude and longitude in, converting to decimal values 203,167degreesToRadians function 216, 180, 353,317, 355,319, 380,344deleteSticky function (example) 485,449event object...

Page 592

556 Indexthe indexeventsanchor click event 412,376button click event 126, 90, 127,91, 128,92, 129,93cache, notification of 574,538canvas click event 383, 347, 419,383, 551,515dragstart and dragend events 579, 543image load event 369,333properties for event handlers in objects 190,...

Page 594

558 Indexthe indexfunctions, continuedSharpen Your Pencil exercise 158,122, 198,162using as values 165,129as values 164,128variables defined in 159, 123, 196,160Ggeneration, fractal (example) 554,518geolocation 201,165–212accuracy of location 227,191adding a Google marker to you...

Page 596

560 Indexthe indexintegersconversions to floating point numbers in expressions 81,45converting from strings 459, 423storing in localStorage as strings 459,423interface transformations on elements, using jQuery 571, 535Internet Explorer. See also browserscanvas support, versions 9 and later...

Page 598

562 Indexthe indexLinuxApache server, configuring MIME types 407,371setting up server on 267, 231listsadding songs to playlist with JavaScript (example) 101, 65, 118,82creating <li> elements 135,99filling in items using array (example) 105, 69finding all child <li> elements o...

Page 600

564 Indexthe index.mp4 video files 388, 352MP4 container 393, 357MPEG-LA group 393, 357multi-core processors 536,500muted property, video object 421, 385Nnamesof functions 157, 121guide to better naming of variables 78, 42local and global variables with same name 162,126localStorage ke...

Page 602

566 Indexthe indexpostMessage methodWeb Sockets 575,539worker object 520,484, 547,511, 548,512<p> (paragraph) elements, changing using JavaScript 98,62preload attribute, <video> element 390, 354presentation, separate from content, in canvas 362, 326previewHandler function (...

Page 604

568 Indexthe indexsrc attribute<script> element 89, 53, 254,218, 285,249updating with setAttribute 303,267<source> element 394,358, 395,359<video> element 389,353, 390,354src propertyaudio object 569, 533image object 369,333video object 406,370startWorkers funct...

Page 606

570 Indexthe indexvideo, continuedgetting demo videos ready 419, 383helper functions 415,379implementing video controls 420, 384–386overview of video processing 428, 392setEffect and setVideo handlers 414,378switching test videos 423,387video processing using scratch buffer 429,393w...

Page 608

572 Indexthe index“Wherever you go, there you are.” (Geolocation example) 228,192while loops 82,46deciding between for loops and 83, 47evaluating (example) 84, 48example in JavaScript 62,26if/else statements in 86,50white space in JavaScript code 75, 39width and height attributes&...

Page 610