Use a Cabeça! HTML5 Programming   Ingles
610 pág.

Use a Cabeça! HTML5 Programming Ingles


DisciplinaDesenvolvimento de Software2.062 materiais17.812 seguidores
Pré-visualização50 páginas
example
<!doctype html>
<html lang=&quot;en&quot;>
<head>
 <title>Phrase-o-matic</title>
<meta charset=&quot;utf-8&quot;>
<style>
body {
 font-family: verdana, Helvetica, sans-serif;
}
</style>
function makePhrases() {
 var words1 = [&quot;24/7&quot;, &quot;multi-Tier&quot;, &quot;30,000 foot&quot;, &quot;B-to-B&quot;, &quot;win-win&quot;];
 var words2 = [&quot;empowered&quot;, &quot;value-added&quot;, &quot;oriented&quot;, &quot;focused&quot;, &quot;aligned&quot;];
 var words3 = [&quot;process&quot;, &quot;solution&quot;, &quot;tipping-point&quot;, &quot;strategy&quot;, &quot;vision&quot;];
 var rand1 = Math.floor(Math.random() * words1.length);
 var rand2 = Math.floor(Math.random() * words2.length);
 var rand3 = Math.floor(Math.random() * words3.length);
 var phrase = words1[rand1] + &quot; &quot; + words2[rand2] + &quot; &quot; + words3[rand3];
 var phraseElement = document.getElementById(&quot;phrase&quot;);
 phraseElement.innerHTML = phrase;
}
window.onload = makePhrases;
</head>
<body>
 <h1>Phrase-o-Matic says:</h1>
 <p id=&quot;phrase&quot;></p>
</body>
</html>
Try my new 
Phrase-o-Matic and 
you\u2019ll be a slick talker 
just like the boss or those 
guys in marketing.
You didn\u2019t think our serious business 
application from Chapter 1 was serious 
enough? Fine. Try this one, if you need 
something to show the boss.
Check out this code for the 
hot new Phrase-o-Matic app 
and see if you can figure out 
what it does before you go on...
www.it-ebooks.info
you are here 4 71
javascript and the dom
function makePhrases() {
}
window.onload = makePhrases;
The Phrase-O-Matic
We hope you figured out this code is the perfect tool 
for creating your next start-up marketing slogan. It has 
created winners like \u201cWin-win value-added solution\u201d 
and \u201c24/7 empowered process\u201d in the past and we have 
high hopes for more winners in the future. Let\u2019s see how 
this thing really works:
First, we define the makePhrases function, which we run after the page has fully 
loaded so we know we can safely access the DOM:
We run makePhrases as soon 
as the page is done loading.
With that out of the way we can write the code for the makePhrases function. Let\u2019s start 
by setting up three arrays. Each will hold words that we\u2019ll use to create the phrases. We\u2019ll 
use the short cut for creating these arrays:
var words1 = [&quot;24/7&quot;, &quot;multi-Tier&quot;, &quot;30,000 foot&quot;, &quot;B-to-B&quot;, &quot;win-win&quot;];
var words2 = [&quot;empowered&quot;, &quot;value-added&quot;, &quot;oriented&quot;, &quot;focused&quot;, &quot;aligned&quot;];
var words3 = [&quot;process&quot;, &quot;solution&quot;, &quot;tipping-point&quot;, &quot;strategy&quot;, &quot;vision&quot;];
We create a variable named words1, that we 
can use to reference the first array.
1
2
All the code for makePhrases goes here, we\u2019ll get to it in a sec...
We\u2019re defining a function named 
makePhrases, that we can call later.
We\u2019re putting five strings in the array. Feel free to 
change these to the latest buzzwords out there.
And here are two more arrays of words, assigned 
to two new variables, words2 and words3.
www.it-ebooks.info
72 Chapter 2
how phrase-o-matic works
We\u2019re almost done, we have the phrase, now we just have to display it. By now you 
already know the drill: we\u2019re going to use getElementById to locate our paragraph 
element and then use its innerHTML to put the new phrase there.
var phraseElement = document.getElementById(&quot;phrase&quot;);
phraseElement.innerHTML = phrase;
5
Then we set the content of 
the <p> element to the phrase.
Okay, we\u2019ve got three new arrays of nice buzzwords; now, what we\u2019re going to do is 
randomly choose one word from each, and then put them together to create a phrase.
Here\u2019s how we choose one word from each array:
var rand1 = Math.floor(Math.random() * words1.length);
var rand2 = Math.floor(Math.random() * words2.length);
var rand3 = Math.floor(Math.random() * words3.length);
var phrase = words1[rand1] + &quot; &quot; + words2[rand2] + &quot; &quot; + words3[rand3];
We create one random number for each array and assign it to a 
new variable (rand1, rand2, and rand3 respectively).
3
This code generates a random number based on the number of items in each array 
(in our case five, but feel free to add more to any array, it will still work).
Now we create the slick marketing phrase by taking each randomly choosen word 
and concatenating them all together, with a nice space in between for readability:
4
We define another variable to hold the phrase.
We use each random number to 
index into the word arrays...
We get the <p> element with 
the id \u201cphrase\u201d.
www.it-ebooks.info
you are here 4 73
javascript and the dom
Okay, finish that last line of code, have one more look over it all 
and feel that sense of accomplishment before you load it into your 
browser. Give it a test drive and enjoy the phrases.
6
Just reload the page for endless start-up possibilities (okay, not endless, but work with us here, we\u2019re trying to make this simple code exciting!).
Here\u2019s what ours 
looks like!
Q: What exactly is Math, and what do 
Math.random and Math.floor do?
A: Math is a built-in JavaScript library that 
has a bunch of math-related functions in it. 
Math.random generates a random number 
between 0 and 1. We multiply that by the 
number of items in the array (which we get 
using the length property of the array) to 
get a number between 0 and the length of 
the array. The result is likely to be a floating 
point number, like 3.2, so we use Math.floor 
to make sure we get an integer number that 
we can use as an index into the array to 
pick the random word. All Math.floor does is 
drop the numbers after the decimal point in 
a floating point number. For example, Math.
floor(3.2) is 3.
Q: Where can I find documentation on 
things like Math?
A: A great reference for JavaScript is 
JavaScript: The Definitive Guide by David 
Flanagan (O'Reilly).
Q: Earlier you said that you can 
store primitives (like number, string and 
boolean) in variables or objects. But 
we\u2019re storing arrays in variables. So what 
is an array, a primitive or an object?
A: Good catch! An array is a special 
kind of object that\u2019s built into JavaScript. 
It\u2019s special because you can use numerical 
indexes to access the values stored in the 
array, something you can\u2019t do with other 
(non-array) objects, or objects that you 
create yourself. You\u2019ll learn how to create 
your own objects in Chapter 4. 
Q: What happens if I try to access an 
array index that doesn\u2019t exist? Like if I 
have 5 words stored in myWords and I 
tried to access myWords[10]. 
A: You get undefined, which, if you recall, 
is the value of a variable that hasn\u2019t been 
assigned a value yet.
Q: Can I remove an item from an 
Array? If so, what happens to the index of 
the other elements?
A: You can remove an item from an Array, 
and you can do it a couple of different ways. 
You could set the value of the array at the 
index to null; for example, myArray[2] = null. 
But that would mean the length of the Array 
stays the same. Or you can remove the 
item altogether (using the function splice). 
In that case, the indexes of the items that 
come after the one you remove will all shift 
down by 1. So if myArray[2] = \u201cdog\u201d and 
myArray[3] = \u201ccat\u201d, and you remove \u201cdog\u201d, 
then myArray[2] = \u201ccat\u201d and the length of 
your array is 1 shorter than it was.
www.it-ebooks.info
74 Chapter 2
Learning 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.
We haven\u2019t figured 
out the digital to 
analog conversion 
yet, so you\u2019ll need 
to supply your own 
real treats.
www.it-ebooks.info
you are here 4 75
javascript and the dom
 ƒ Declare a JavaScript variable using var.
 ƒ Number,