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

Use a Cabeça! HTML5 Programming Ingles


DisciplinaDesenvolvimento de Software2.062 materiais17.814 seguidores
Pré-visualização50 páginas
to degrade ______.
6. Much simpler than the HTML 4.01 version.
7. The standard scripting language of HTML5.
9. This attribute of the link and script tags is no longer 
needed in HTML5.
10. The official style standard for HTML5.
12. New ______ in HTML add semantics and structure.
www.it-ebooks.info
you are here 4 33
getting to know HTML5
Canvas
Local Storage
Geolocation
Offline Web Apps
New Elements
CSS3
Forms
Audio & Video
Web Workers
SOlUTion
We\u2019re 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.
You might have used me in HTML 4 to enter information, but 
I\u2019m even better in HTML5. I can require that you fill out fields, 
and I can more easily verify that you\u2019ve typed an email, URL or 
phone number where you\u2019re supposed to. 
You used to need a plug-in for us, but now we\u2019re first class 
members of the HTML family of elements. Wanna watch or 
listen to something? You need us.
Using me, you can draw right into your web page. With me, you 
can draw text, images, lines, circles, rectangles, patterns and 
gradients. I\u2019ll bring out your inner artist.
I\u2019m the most stylish one in the family. You\u2019ve probably used me 
before, but did you know I can now animate your elements, give 
them great rounded corners and even drop shadows?
Use me as a bit of local storage in every user\u2019s browser. Need 
to store a few preferences, some shopping cart items, or maybe 
even stash a huge cache for efficiency? I\u2019m your API.
Need applications that work even when you aren\u2019t connected to 
the network? I can help.
I\u2019m the API that can tell you where you are, and I play nice with 
Google maps. 
You\u2019ll want me whenever you need several scripts running 
concurrently and in the background, so your user interface 
remains responsive.
We\u2019ve already talked about the \u201cfamily of technologies\u201d so much we feel like they\u2019re, well, family. But then again we 
really haven\u2019t gotten to know them yet, so isn\u2019t it about time? You\u2019ll find the whole family below. Go ahead, mingle, 
see if you can figure out who is who. We\u2019ve gone ahead and figured one out for you. And don\u2019t worry, we know this is 
your first time meeting the HTML5 family members, so here is the solution.
www.it-ebooks.info
34 Chapter 1
exercise solutions
HTML5cross Solution
D
1
S
2
H
3
A M E L E S
4
S G
5
O T C D
6
R J
7
H
8
T
9
M L O M A T I C
10
R
11
E C O N N A I S S A N C E
12
Y L S I C C V L
A
13
P I S 4 S P T E A E
E 1
14
0 0 T Y F S M
1 P U C E
W
15
H I L E L R N
L I T
Y P S
X
16
H T M L
Across
2. __________ plug could also be called spam. 
[SHAMELESS] 
8. Product that cleans up your HTML5 is three steps. 
[HTMLOMATIC] 
11. Your mission was browser __________. 
[RECONNAISSANCE] 
13. The real power of HTML5 is the Javascript ____. [APIS] 
14. JavaScript is ______ times faster than a decade ago. 
[100] 
15. Use a ______ loop to print verses of a song. [WHILE] 
16. Got the dear john letter. [XHTML] 
Down
1. The ________ is an internal representation of a web page. 
[DOM] 
3. The version of HTML before HTML5. [HTML401] 
4. The <_______> tag tells the browser what follows is 
JavaScript, not HTML. [SCRIPT] 
5. We want our web experiences to degrade ______. 
[GRACEFULLY] 
6. Much simpler than the HTML 4.01 version. [DOCTYPE] 
7. The standard scripting language of HTML5. [JAVASCRIPT] 
9. This attribute of the link and script tags is no longer needed 
in HTML5. [TYPE] 
10. The official style standard for HTML5. [CSS] 
12. New ______ in HTML add semantics and structure. 
[ELEMENTS] 
www.it-ebooks.info
this is a new chapter 35
Introducing JavaScript and the DOM2
A Little Code
JavaScript is going to take you to new places. You 
already know all about HTML markup (otherwise known as structure) 
and you know all about CSS style (otherwise known as presentation), 
but what you\u2019ve been missing is JavaScript (otherwise known as 
behavior). If all you know about are structure and presentation, sure, 
you can create some great-looking pages, but they\u2019re still just pages. 
When you add behavior with JavaScript, you can create an interactive 
experience; or, even better, you can create full blown web applications. 
Get ready to add the most interesting and versatile skill in your web 
toolkit: JavaScript and programming! 
And if you need 
more motivation, 
the most lucrative!
www.it-ebooks.info
36 Chapter 2
how javascript works
The Way JavaScript Works
Our goal is to write JavaScript code that runs in the 
browser when your web page is loaded\u2014that 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 application than a document. 
Let\u2019s look at how all that works:
html
head
title script
body
h1 ph2
em
You create your HTML 
markup and your 
JavaScript code and put 
them in files, say 
index.html and index.js 
(or they both can go in 
the HTML file). 
Writing
<html>
<head>
 var x = 49;
<body>
<h1>My first JavaScript</h1>
<p></p>
 x = x + 2;
</body>
</html>
1
JavaScript continues 
executing, using the 
DOM to examine the 
page, change it, receive 
events from it, or ask 
the browser to retrieve 
other data from the 
web server.
3
Running
The browser retrieves and 
loads your page, parsing 
its contents from top to 
bottom.
As it encounters JavaScript, 
the browser parses the 
code and checks it for 
correctness, and then 
executes the code. 
The browser also builds an 
internal model of the HTML 
page, called the DOM.
Browser
2
Loading
html
head
title script
body
h1 ph2
em
www.it-ebooks.info
you are here 4 37
javascript and the dom
What can you do with JavaScript?
var temp = 98.6;
var beanCounter = 4;
var reallyCool = true;
var motto = &quot;I Rule&quot;;
temp = (temp - 32) * 5 / 9;
motto = motto + &quot; and so do you!&quot;;
var pos = Math.random();
statements
looping
conditionals
Once you\u2019ve got a page with a element (or a 
reference to a separate JavaScript file), you\u2019re ready to 
start coding. JavaScript is a full-fledged programming 
language and you can do pretty much anything with it you 
can with other languages, and even more because we\u2019re 
programming inside a web page!
You can tell JavaScript to:
1 make a statement
2 do things more than once, or twice
3 make decisions
Create a variable and assign values, add things together, 
calculate things, use built-in functionality from a 
JavaScript library.
while (beanCounter > 0) {
 processBeans();
 beanCounter = beanCounter - 1;
}
Perform statements over and over, as many times as you need to.
if (isReallyCool) {
 invite = &quot;You're invited!&quot;;
} else {
 invite = &quot;Sorry, we're at capacity.&quot;;
}
Write code that is conditional, depending on the state of your app.
www.it-ebooks.info
38 Chapter 2
declaring variables
Declaring a variable
Variables hold things. With JavaScript they can hold lots of 
different things. Let\u2019s declare a few variables that hold things:
var winners = 2;
var boilingPt = 212.0;
var name = &quot;Dr. Evil&quot;;
var isEligible = false;
Integer numeric values.
Or floating point numeric values.
Or, strings of characters (we 
call those \u201cstrings,\u201d for short).
Or a boolean value, 
which is true or false.
winners
2
name
\u201cD
r. E
vil
\u201d
isEligible
fal
se
boilingPt
21
2.0
Variables are 
containers for 
holding values. 
JavaScript 
variables don\u2019t 
have strict types, 
so any variable 
can hold a 
number,