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

Use a Cabeça! HTML5 Programming Ingles

DisciplinaDesenvolvimento de Software2.059 materiais17.812 seguidores
Pré-visualização50 páginas
and for loops seem the same to me. When do I use which?
A: In general you can do the same things with a for or a while; however, as you can see with the ice cream example, the for loop 
is a little more compact, and you might argue the while loop is more readable. So, it really is a matter of which fits best given your 
situation. In general, for loops get used more for iterating over a fixed number of values (say, over the items in a shopping cart), 
and while loops are used more to loop until a condition is met (say, giving the user a test until he gets it right).
48 Chapter 2
variable and iteration exercise
BE the Browser
Each 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;
while (tops > 0) {
 for (var spins = 0; spins < 3; spins++) {
 alert(&quot;Top is spinning!&quot;);
 tops = tops - 1;
var count = 0;
for (var i = 0; i < 5; i++) {
 count = count + i;
alert(&quot;count is &quot; + count);
for (var berries = 5; berries > 0; berries--) {
 alert(&quot;Eating a berry&quot;);
Snippet 1
Snippet 3
Snippet 2
What count does the alert show?
How many times do you see 
the alert, \u201cTop is spinning!\u201d?
How many berries did you eat?
for (scoops = 0; scoops < 10; scoop++) {
 alert(&quot;There's more ice cream!&quot;);
alert(&quot;life without ice cream isn't the same&quot;);
Snippet 4
How many scoops of ice cream did you eat?
Check your answers at the 
end of the chapter.
you are here 4 49
javascript and the dom
We\u2019ve been using boolean expressions in for and while statements as 
a conditional test to decide whether to continue looping. You can also 
use them to make decisions in JavaScript. Here\u2019s an example:
if (scoops < 3) {
 alert(&quot;Ice cream is running low!&quot;);
Here\u2019s our boolean expression, testing to see how many scoops are left. 
Make decisions with JavaScript
if (cashInWallet > 5) {
 order = \u201cI\u2019ll take the works: cheeseburger, fries and a coke\u201d;
} else {
 order = \u201cI\u2019ll just have a glass of water\u201d;
If there are < 3 scoops left we then execute the code block.
We can string together more than one test too:
if (scoops < 3) {
 alert(&quot;Ice cream is running low!&quot;);
} else if (scoops > 9) {
 alert(&quot;Eat faster, the ice cream is going to melt!&quot;);
Add as many tests with \u201celse if\u201d as you need, each with its own associated code block that will be executed when the condition is true.
50 Chapter 2
javascript conditionals
You can provide a catchall for your if statements as well\u2014a final else that is run if 
all the other conditions fail. Let\u2019s add a few more if/elses and also a catchall:
Making more decisions... and, adding a catchall
if (scoops == 3) {
 alert(&quot;Ice cream is running low!&quot;);
} else if (scoops > 9) {
 alert(&quot;Eat faster, the ice cream is going to melt!&quot;);
} else if (scoops == 2) {
 alert(&quot;Going once!&quot;);
} else if (scoops == 1) {
 alert(&quot;Going twice!&quot;);
} else if (scoops == 0) {
} else {
 alert(&quot;Still lots of ice cream left, come and get it.&quot;);
Notice we changed this to only happen when scoops is precisely 3.
Here\u2019s our catchall; if none of the conditions above are true, then this block is guaranteed to execute.
var scoops = 10;
while (scoops >= 0) {
 scoops = scoops - 1;
alert(&quot;life without ice cream isn't the same&quot;);
Insert the code above here...
Write the output here.
We\u2019ve added additional conditions to have a countdown to zero scoops.
Take the code above and insert it into the while loop below. Walk through the 
while loop and write down the alerts in the sequence they occur. Check your 
answer at the end of the chapter.
you are here 4 51
javascript and the dom
var word1 = &quot;a&quot;;
var word2 = &quot;nam&quot;;
var word3 = &quot;nal p&quot;;
var word4 = &quot;lan a c&quot;;
var word5 = &quot;a man a p&quot;;
var phrase = &quot;&quot;;
for (var i = 0; ______; _____) {
 if (i == 0) {
 phrase = ________________;
 else if (i == 1) {
 phrase = ________________ + word4;
 _________ (i == 2) {
 _______________ = phrase + word1 + word3;
 _________ (________) {
 phrase = phrase + ________ + word2 + word1;
i < 3 i < 4
else if
i == 3
i == 4
i = 3
else if (i == 0)
i = 0
A palindrome is a sentence that can 
be read the same way backwards 
and forwards! Here\u2019s the 
palindrome you should see if the 
magnets are all in the right places.
Code Magnets
This code prints out a well-known palindrome in an alert. The problem is that some of the 
code was on fridge magnets and fell on the floor. It\u2019s your job to put the code back together 
again to make the palindrome work. Watch out; there were a few magnets already on the 
floor that don\u2019t belong here, and you\u2019ll have to use some of the magnets more than once! 
Check your answer at the end of the chapter before you go on.
52 Chapter 2
how to put javascript in a page
I was told we\u2019d 
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\u2019s what 
we\u2019ve done so far: you know how to declare 
and use JavaScript variables, and you 
know how to build basic statements and 
expressions. You also know how to use all 
those together to write conditional code with 
if/else statements, not to mention do things 
iteratively with while and for statements. 
With that under your belt, now we\u2019re going to 
see how to place JavaScript in your page, and 
more importantly, how JavaScript interacts 
with your page. That is, how you determine 
what\u2019s in your page, how you change your 
page, and, a bit more down the road, how 
you write code to react to things happening in 
your pages.
So, while we\u2019re not done with JavaScript yet, 
your wait is over; it\u2019s time to see how markup 
and behavior work together...
you are here 4 53
javascript and the dom
HTML file
How and where to add JavaScript to your pages
Place your script inline, 
in the <head> element. 
The most common way to add code to 
your pages is to put a element 
in the head of your page. When you add 
JavaScript in the <head> element, it is 
executed as soon as the browser parses 
the head (which it does first!), before it has 
parsed the rest of the page. 
Add your script by referencing 
a separate JavaScript file.
You can also link to a separate file 
containing JavaScript code. Put the URL 
of the file in the src attribute of the 
opening tag and make sure 
you close the script element with 
. If you\u2019re linking to a file in 
the same directory, you can just use the 
name of the file.
Add your code in the body 
of the document, either inline 
or as a link to a separate file.
Or, you can put your code right in the 
body of your HTML. Again, enclose your 
JavaScript code in the element 
(or reference a separate file in the src 
attribute). JavaScript in the body of your 
page is executed when the browser parses 
the body (which it does, typically, top 
To use JavaScript you\u2019ve got to add it to a web page. But where and how? You