610 pág.

# Use a Cabeça! HTML5 Programming Ingles

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).
www.it-ebooks.info
48 Chapter 2
variable and iteration exercise
BE the Browser
Each of the JavaScript snippets on
Your job is to play browser, and
evaluate each snippet
question below the code.
var tops = 5;
while (tops > 0) {
for (var spins = 0; spins < 3; spins++) {
}
tops = tops - 1;
}
var count = 0;
for (var i = 0; i < 5; i++) {
count = count + i;
}
for (var berries = 5; berries > 0; berries--) {
}
Snippet 1
Snippet 3
Snippet 2
What count does the alert show?
How many times do you see
How many berries did you eat?
for (scoops = 0; scoops < 10; scoop++) {
}
alert(&quot;life without ice cream isn't the same&quot;);
Snippet 4
How many scoops of ice cream did you eat?
end of the chapter.
www.it-ebooks.info
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) {
}
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) {
} 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.
www.it-ebooks.info
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) {
} else if (scoops > 9) {
alert(&quot;Eat faster, the ice cream is going to melt!&quot;);
} else if (scoops == 2) {
} else if (scoops == 1) {
} 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.
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.
www.it-ebooks.info
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;
}
}
phrase
i < 3 i < 4
i++
i--
word5
word4
word3
word2
word1
word0
else if
i == 3
i == 4
i = 3
else if (i == 0)
i = 0
+
else
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.
www.it-ebooks.info
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
page, and, a bit more down the road, how
you write code to react to things happening in
So, while we\u2019re not done with JavaScript yet,
your wait is over; it\u2019s time to see how markup
and behavior work together...
www.it-ebooks.info
you are here 4 53
javascript and the dom
HTML file
<body>
statement
statement
statement
The most common way to add code to
your pages is to put a element
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.
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.