You are on page 1of 609

Use a Cabea!

Programao em HTML5 O guia amigo do seu crebro


(Head First) Use a Cabea!
(Head First)

Design e Desenvolvimento Web/HTML


Se voc deseja criar
Use a
Use a Cabea!
(Head First)
Programao
em HTML5
Programao
Livros da srie O que voc aprender neste livro? aplicativos web modernos
em diversas plataformas, Cabea!
Voc quer criar pginas que sejam dinmicas, interativas, cheias de
Use a Cabea! necessria uma (Head First)
Se voc responder sim para as
dados e conectadas. Espere, pginas web? Por que no usar HTML5 introduo minuciosa
para criar verdadeiros aplicativos web? E, por que no usar tcnicas perguntas abaixo, este livro foi feito

em HTML5
aos principais aspectos para voc!
Use a Cabea! Programao modernas que os apliquem em seu navegador do desktop to facilmen-
te quanto em um dispositivo mvel? E, claro, voc vai querer isso com HTML5 como a fornecida
Paul Barry pelo Use a Cabea!
as tecnologias mais novas de HTML5, como geolocalizao, vdeo, dese- Voc tem um computador
Use a Cabea! Python nho em 2D, armazenamento web, web workers e mais. Certo? Programao em HTML5. com um navegador web e um
Paul Barrry Os autores no s editor de texto?
O livro Use a Cabea! Programao em HTML5 seu ingresso para guiam-no por profundas
aprender como construir aplicativos web usando padres de hoje e
Use a Cabea! C# 2 Edio implementaes para Voc quer aprender,
as melhores prticas de amanh. claro que voc aprender o bsi-

em HTML5
Andrew Stellman co das novas APIs de HTML5 neste livro, mas, melhor ainda, tambm clientes do mundo real, compreender, lembrar e
como tambm oferecem Um guia de

Programao
aprender como essas APIs interagem com suas pginas, como so criar aplicaes web usando
Use a Cabea! PHP & MySQL detalhes valiosos ao as melhores tcnicas e os
dinamizadas pelo JavaScript e como us-las para construir aplicativos aprendizagem para
Lynn Beighley web que vo impressionar seu chefe e encantar seus amigos. longo do caminho. padres mais recentes?
criar aplicativos web
Use a Cabea! Anlise de Dados Danny Goodman, com JavaScript
Construa ve Voc prefere conversas
Michael Milton rdadeiros ap Autor de
localizao, licativos web estimulantes em jantares
desenho em que usam
Is HTML5 e JavaScript Bible Aprenda os segredos
Aprenda como usar AP 2
local, vdeos D, festivos a palestras
e muito mais. armazenamento
Use a Cabea! Rails 2 Edio
pginas interativas.
JavaScript para criar ..
Revisada do guru da HTML5 acadmicas secas e maantes?
Eric Freeman e Elisabeth
Dawn Griffiths Robson sabem que a
Se voc responder sim para alguma
verdadeira educao
Use a Cabea! Ajax das perguntas abaixo, fique longe
uma experincia
Brett McLaughlin deste livro!
multidimensional. Com
Use a Cabea! HTML com CSS e seu excelente contedo, Carregue HTML5 e
Voc muito iniciante para
XHTML grficos, humor e JavaScript direto
escrever pginas da web?
Eric Freeman, Elisabeth descries analgicas, no seu crebro
Freeman o livro Use a Cabea! Descubra por que Voc j est desenvolvendo
Programao em HTML5 tudo o que seus aplicativos web e procurando
Use a Cabea! JavaScript traz o compartilhamento
amigos sabem sobre um livro de referncia
Michael Morrison de conhecimento
vdeo provavelmente sobre HTML5?
Use a Cabea! SQL
Por que este livro to diferente? impresso a um nvel
completamente diferente! esteja errado
Lynn Beighley Pensamos que seu tempo valioso demais para ser desperdiado Voc tem medo de tentar
lutando com novos conceitos. Usando o que h de mais avanado Steve Horelick, criador da algo novo? Prefere um
Use a Cabea! Padres de em pesquisa sobre teoria de aprendizado e cincia cognitiva para aclamada srie de tratamento de canal a tentar
Projetos 2 Edio realizar uma aprendizagem multissensorial, o livro Use a Cabea! Evite problemas Fique atento a combinar listras com xadrez?
TV Reading Rainbow; Freeman &
Eric Freeman, Elisabeth Programao em HTML5 utiliza um formato visualmente rico, dese-
constrangedores armadilhas comuns
nhado para o jeito como seu crebro trabalha e fugindo daquela Editor, macProVideo.com Robson
Freeman de navegadores Voc acredita que um livro
abordagem estritamente textual que lhe d sono. de suporte a
tcnico no pode ser srio
navegadores se filmes educativos bregas
ISBN 978-85-7608-845-5
dos anos 1950 e APIs
JavaScript antropomorfizadas
esto nele?
twitter.com/alta_books

facebook.com/altabooks www.altabooks.com.br Eric Freeman & Elisabeth Robson

DTP_Head_First_HTML5_Capa_050214.indd 1 05/06/2014 17:02:13


Primeiros Elogios ao Use a Cabea! Programao em HTML5

HTML5 o futuro da web. Quantas vezes voc ouviu isso? Se realmente quiser entender
a famlia de tecnologias que constituem HTML5, leia este livro! O Use a Cabea! Programao
em HTML5 o livro definitivo sobre HTML5 para todos, de iniciantes a desenvolvedores
experientes.
Aaron LaBerge, CEO, Fanzter, Inc.

Este livro uma viagem agradvel pelos novos territrios selvagens de HTML5, onde todos
provavelmente teremos de lutar com escorpies por anos. Ele guia-nos atravs dos conceitos
bsicos, de modo que possamos entender os objetivos do projeto da HTML5, e tambm
atravs de cada rea, para conhecermos os arredores. Da mesma forma que todos os livros
da srie Use a Cabea!, ele substitui a recitao rida por exploses vivas e memorveis
de conhecimento cheio de fatos. Sempre terei o site da especificao do HTML5 para
propsito de referncia, mas preferiria *aprender* animadamente.
Ken Arnold, Design/Build Hub, Peak Impact, Inc.

Um livro obrigatrio sobre HTML5, que continua a tradio da srie Use a Cabea! de ser
espirituoso, divertido, cheio de exemplos e muito inteligente!
Danny Mavromatis, Sr Software Architect, ABC Television Group

Use a Cabea! Programao em HTML5 faz um timo trabalho ao explicar muitos dos
aspectos-chave de HTML5 de uma forma divertida e fcil de entender. Com seu estilo
altamente visual e numerosos exemplos de cdigo, conceitos complexos como o canvas e a
programao assncrona so simplificados e ilustrados, tornando-os diretos e interessantes.
Michael S. Scherotter, Principal Architect Evangelist, Microsoft Corporation

HTML5 um bolo com muitas camadas de tecnologias. Use a Cabea! Programao em HTML5
assa esse bolo e depois joga-o em sua cara. Voc consumir essa delcia e ficar feliz.
Josh Rhoades, cofundador da BrightHalf

Com Use a Cabea! Programao em HTML5, a multiplicidade do HTML5 abordada de


mltiplas formas, o que torna divertido o trabalho rduo de aprender.
Ward Cunningham, inventor do Wiki

HTML5 a tecnologia nova mais impressionante para o desenvolvimento de sites. Os


desenvolvedores mal podem esperar para us-lo para criar pginas flexveis e de mdia
rica, que tambm funcionem bem em tablets e smartphones. Use a Cabea! Programao em
HTML5 a melhor e mais divertida forma de colocar esta tecnologia nova e interessante no
seu crebro. Eu o recomento enfaticamente!
Marianne Marck, SVP Technology, Blue Nile Inc.

PFCG_HeadFirstHTML5Prog.indb 1 05/06/2014 16:16:49


Primeiros Elogios ao Use a Cabea! Programao em HTML5

Direto, informativo e divertido, Use a Cabea! Programao em HTML5 obrigatrio para


qualquer pessoa que queira iniciar em HTML5 ou apenas refrescar sua memria. A srie
Use a Cabea! ajuda a manter meu conhecimento atualizado, permitindo-me apoiar melhor
meus desenvolvedores e projetos.
Todd Guill, Project Manager, AllRecipes.com

No o DHTML do seu av! Use a Cabea! Programao em HTML5 pinta um cenrio


promissor e confiante da web atravs da HTML5, enquanto lhe habilita a codificar a sua
prpria entrada l. Se voc estiver procurando um guia definitivo, acessvel e s vezes
bastante divertido para este padro, no procure mais.
Manny Otto, Web Producer and Creative

Os autores acertaram na mosca conhecimento em JavaScript a chave para o HTML5.


Mesmo se voc nunca tiver escrito um programa em JavaScript antes, eles lhe iniciaro
atravs de projetos divertidos e prticos.
David Powers, autor de PHP Solutions: Dynamic Web Design Made Easy

PFCG_HeadFirstHTML5Prog.indb 2 05/06/2014 16:16:50


Elogios a Outros Livros de Eric Freeman e Elisabeth Robson

A admirvel clareza, humor e doses substanciais de inteligncia deste livro o tornam o tipo
que ajuda at mesmo aos no programadores a pensar bem sobre a resoluo de problemas.
Cory Doctorow, coeditor de Boing Boing e autor de Down and Out in the Magic
Kingdom e Someone Comes to Town, Someone Leaves Town

Sinto-me como se quinhentos quilos de livros tivessem sido tirados de cima da minha cabea.
Ward Cunningham, inventor do Wiki e fundador do Hillside Group

Este livro est prximo da perfeio, devido forma pela qual combina conhecimento e
legibilidade. Ele fala com autoridade e lido maravilhosamente. um dos poucos livros
de software que j li que me parece indispensvel. (Eu colocaria talvez dez livros nesta
categoria, no mximo.)
David Gelernter, professor de Cincia da Computao, Yale University e autor
de Mirror Worlds e Machinery Beauty

Eu literalmente amo este livro. Na verdade, beijei este livro na frente da minha esposa.
Satish Kumar

Tome cuidado. Se voc for algum que l noite antes de dormir, ter de restringir o Use a
Cabea! Programao em HTML com CSS & XHTML leitura diurna. Este livro acorda seu crebro.
Pauline McNamara, Center for New Technologies and Education, Fribourg
University, Sua

Use a Cabea Programao em HTML com CSS & XHTML uma introduo completamente
coerente s prticas de anteviso na marcao e apresentao de pginas web. Antecipa
corretamente as dvidas dos leitores e lida com elas na hora. A abordagem altamente grfica
e incremental simula com preciso a melhor forma de aprender este assunto: fazendo uma
pequena alterao e vendo-a no navegador para entender o que cada novo item significa.
Danny Goodman, autor de Dynamic HTML: The Definitive Guide

A web seria um lugar muito melhor, se cada autor de HTML comeasse lendo este livro.
L. David Baron, Technical Lead, Layout & CSS, Mozilla Corporation
http://dbaron.org/

O Use a Cabea! Programao em HTML com CSS & XHTML lhe ensina como fazer as coisas
certas desde o incio, sem fazer com que todo o processo parea massacrante. HTML, quando
explicado apropriadamente, no mais complicado do que a prpria lngua portuguesa, e
eles fazem um trabalho excelente mantendo cada conceito ao alcance de seus olhos.
Mike Davidson, President & CEO, Newsvine, Inc.

PFCG_HeadFirstHTML5Prog.indb 3 05/06/2014 16:16:50


Outros livros da srie Use a Cabea!

Use a Cabea! Ajax


Use a Cabea! Ajax Profissional
Use a Cabea! lgebra
Use a Cabea! Anlise e Projeto Orientado ao Objeto
Use a Cabea! Anlise de Dados
Use a Cabea! C#, Traduo da 2 Edio
Use a Cabea! Desenvolvimento de Software
Use a Cabea! Desenvolvendo para iPhone
Use a Cabea! Estatstica
Use a Cabea! Excel
Use a Cabea! Fsica
Use a Cabea! Geometria 2D
Use a Cabea! HTML com CSS & XHTML, Traduo da 2 Edio
Use a Cabea! Java 2 Edio
Use a Cabea! JavaScript
Use a Cabea! Padres de Projetos 2 Edio
Use a Cabea! Programao
Use a Cabea! PHP & MySQL
Use a Cabea! PMP
Use a Cabea! Python
Use a Cabea! Rails, Traduo da 2 Edio
Use a Cabea! Redes de Computadores
Use a Cabea! Servlets & JSP 2 Edio
Use a Cabea! SQL
Use a Cabea! Web Design

A compra deste contedo no prev o atendimento e fornecimento de suporte tcnico operacional, instalao ou configurao
do sistema de leitor de ebooks. Em alguns casos, e dependendo da plataforma, o suporte poder ser obtido com o fabricante do
equipamento e/ou loja de comrcio de ebooks.

PFCG_HeadFirstHTML5Prog.indb 4 05/06/2014 16:16:50


Use a Cabea!
Programao em HTML 5
desenvolvendo aplicativos para web com JavaScript

No seria um sonho, se houvesse um


livro de HTML5 que no presumisse
que voc j saiba o que DOM,
eventos e APIs logo na terceira
pgina? Isso provavelmente
apenas uma fantasia...
Eric Freeman
Elisabeth Robson

PFCG_HeadFirstHTML5Prog.indb 5 05/06/2014 16:16:51


Use a Cabea! Programao em HTML5
Copyright 2014 da Starlin Alta Editora e Consultoria Eireli.

Translated from original Head First HTML5 Programming 2011 by Eric Freeman and Elisabeth Robson. ISBN 978-1-449-
39054-9. This translation is published and sold by permission OReilly Media, Inc. The owner of all rights to publish and sell the
same. PORTUGUESE language edition published by Starlin Alta Editora e Consultoria Eireli. Copyright 2014 by Starlin Alta
Editora e Consultoria Eireli.
Todos os direitos reservados e protegidos por Lei. Nenhuma parte deste livro, sem autorizao prvia por escrito da editora,
poder ser reproduzida ou transmitida.
Erratas: No site da editora relatamos, com a devida correo, qualquer erro encontrado em nossos livros. Procure pelo ttulo do livro.
Marcas Registradas: Todos os termos mencionados e reconhecidos como Marca Registrada e/ou Comercial so de responsabilidade
de seus proprietrios. A Editora informa no estar associada a nenhum produto e/ou fornecedor apresentado no livro.
Impresso no Brasil 1 Edio, 2014
Vedada, nos termos da lei, a reproduo total ou parcial deste livro.

Produo Editorial Superviso Grfica Design Editorial Captao e Contratao Vendas Atacado e Varejo
Editora Alta Books Angel Cabeza Auleriano Messias de Obras Nacionais Daniele Fonseca
Aurlio Silva Cristiane Santos Viviane Paiva
Gerncia Editorial Superviso de Marco Pace comercial@altabooks.com.br
Anderson Vieira Qualidade Editorial J. A. Rugeri
Sergio Luiz de Souza autoria@altabooks.com.br Marketing e Promoo
Editoria Informtica
Thi Alves Superviso de Texto marketing@altabooks.com.br
Jaciara Lima Ouvidoria
ouvidoria@altabooks.com.br

Claudia Braga Livia Brazil Milena Lepsch Rodrigo Araujo


Equipe Editorial Hannah Carriello Marcelo Vieira Milena Souza
Letcia Vitria Mayara Coelho Natlia Gonalves

Traduo Copidesque Reviso Tcnica Reviso Gramatical Diagramao


Leonardo Castilhone Alessandra Santos Flvio Augusto Glria Melgarejo Lucia Quaresma
Silveira Milena Dias
Analista de
Tecnologia

Rua Viva Cludio, 291 Bairro Industrial do Jacar


CEP: 20970-031 Rio de Janeiro Tels.: (21) 3278-8069/8419
www.altabooks.com.br e-mail: altabooks@altabooks.com.br
www.facebook.com/altabooks www.twitter.com/alta_books

PFCG_HeadFirstHTML5Prog.indb 6 05/06/2014 16:16:51


Para Steve Jobs, que promoveu a HTML5 a tal ponto
que este livro dever vender um zilho de cpias...
E para Steve Jobs, porque ele nosso heri.

PFCG_HeadFirstHTML5Prog.indb 7 05/06/2014 16:16:51


os autores

Autores de Use a Cabea! Programao em HTML5


Elisabeth
Robson

Eric Freeman

Eric descrito pela cocriadora da srie Use a Elisabeth uma engenheira de software,
Cabea!, Kathy Sierra, como um daqueles raros escritora e treinadora. Ela apaixonada por
indivduos fluentes na linguagem, prtica e tecnologia desde seu tempo como estudante na
cultura de mltiplos domnios: hackeamento Yale University, onde concluiu seu Mestrado em
moderno, vice-presidncia corporativa, Cincia da Computao, ao mesmo tempo em que
engenheiro e grupos de pesquisa. desenvolveu uma linguagem de programao visual e
Profissionalmente, Eric concluiu, h pouco tempo, arquitetura de software.
cerca de uma dcada como executivo de empresa Elisabeth est envolvida com a internet desde muito
de mdia tendo ocupado o cargo de CTO da tempo; ela ajudou a criar o site vencedor de prmios,
Disney Online & Disney.com na The Walt Disney The Ada Project, um dos primeiros desenhados para
Company. Eric dedica agora seu tempo para a auxiliar as mulheres da Cincia da Computao
WickedlySmart, uma empresa jovem cocriada a encontrarem informaes sobre carreira e
com Elisabeth. orientao online.
Com relao a sua formao, Eric cientista Ela atualmente cofundadora da WickedlySmart,
da computao, estudou com o erudito da uma experincia de educao online centrada em
indstria David Gelernter, durante seu trabalho tecnologias web, onde cria livros, artigos, vdeos
em Ph.D. na Yale University. Sua dissertao e muito mais. Anteriormente, como diretora de
considerada como o trabalho de referncia em Projetos Especiais na OReilly Media, Elisabeth
alternativas metfora do desktop, e tambm produziu workshops ao vivo e cursos online numa
como a primeira implementao de ramos de variedade de tpicos tcnicos e desenvolveu sua
atividade, um conceito que ele e o Dr. Gelernter paixo por criar experincias de aprendizado para
desenvolveram. ajudar pessoas a entenderem a tecnologia. Antes
Em seu tempo livre, Eric profundamente de seu trabalho com a OReilly, Elisabeth passava
envolvido com a msica; voc encontrar o ltimo seu tempo jogando p mgico na The Walt Disney
projeto de Eric, uma colaborao com o pioneiro Company, onde liderou pesquisas na rea de
da msica ambiente, Steve Roach, disponvel desenvolvimento em mdia digital.
na App Store para o iPhone, sob o nome de Quando no est na frente de seu computador,
Immersion Station. Elisabeth est escalando, pedalando ou andando
Eric mora com sua esposa e com sua pequena filha em de caiaque por a, com sua cmera pendurada no
Bainbridge Island. Sua filha uma visitante constante pescoo, ou cozinhando refeies vegetarianas.
do estdio de Eric, onde ela adora ligar e desligar os Mande um e-mail para ela em beth@
botes de seus sintetizadores e efeitos de som. Eric wickedlysmart.com ou visite seu blog http://
tambm apaixonado por educao e nutrio para elisabethrobson.com.
crianas e busca maneiras de aprimor-las.
Escreva para Eric, eric@wickedlysmart.com
ou visite seu site http://ericfreeman.com.

viii

PFCG_HeadFirstHTML5Prog.indb 8 05/06/2014 16:16:52


Contedo (Sumrio)

Contedo (A Coisa Real)


Introduo
Seu crebro em Programao HTML5. Aqui est voc
tentando aprender algo, enquanto seu crebro est lhe fazendo um favor
se certificando de que o aprendizado no tenha sucesso. Seu crebro est
pensando: Melhor deixar mais espao para coisas mais importantes,
como quais animais selvagens evitar e se uma m ideia esquiar na neve
pelado. Ento, como enganar seu crebro para que ele pense que sua
vida depende de saber HTML5 e JavaScript?

A quem se destina este livro? xxii


Sabemos o que voc est pensando. xxiii
E sabemos o que o seu crebro est pensando. xxiii
Metacognio: pensando sobre pensar xxv
Reviso Tcnica  xxx
Agradecimentosxxxi

ix

PFCG_HeadFirstHTML5Prog.indb 9 05/06/2014 16:16:52


Contedo (Sumrio)

conhecendo a HTML5

1
Bem-vindo a Webville
A HTML tem estado em uma corrida louca. claro,
comeou como uma simples linguagem de marcao, porm, mais
recentemente, tem desenvolvido mais msculos. Agora, temos
uma linguagem ajustada para criar verdadeiros aplicativos web com
armazenamento local, desenho 2D, suporte offline, sockets, threads
e mais. A histria da HTML nem sempre foi bela e cheia de dramas
(falaremos sobre isso tudo), mas, neste captulo, primeiro daremos
uma pequena volta por Webville para ter uma ideia de tudo o que se
relaciona com HTML5. Vamos l, suba, estamos indo para Webville, e
comearemos indo de zero a HTML5 em 3,8 pginas.

Atualize para HTML5 hoje! 2


Apresentando o HTML-o-mtico, atualize sua HTML agora! 4
Voc est mais prximo da marcao em HTML5
do que imagina! 7
HTML5 Exposto: Confisses da verso mais
nova de HTML 11
A VERDADEIRA HTML5, por favor, levante-se ... 12
Como HTML5 realmente funciona... 14
Quem Faz o Qu? 16
Sua Primeira Misso: Reconhecimento de Navegadores 17
O que voc pode fazer com JavaScript? 22
Escrevendo JavaScript Seriamente 25
Escrevendo JavaScript Seriamente Revisto... 26
html

head body
Pontos de Bala 31
title script h1 h2 p Exerccio Soluo 33
em

Canvas Vdeo

Local
Cache Storage udio
Sockets Offline

Web Arrastar
Workers & Soltar Geolocalizao
Formulrios

PFCG_HeadFirstHTML5Prog.indb 10 05/06/2014 16:16:53


Contedo (Sumrio)

2
apresentando JavaScript e DOM
Um Pouco de Cdigo
JavaScript lhe levar a novos lugares. Voc j sabe tudo
sobre marcao HTML (conhecida como estrutura) e sabe tudo sobre
estilo CSS (conhecido como apresentao), mas ainda est faltando
o JavaScript (conhecido como comportamento). Se tudo o que voc
souber for relacionado estrutura e apresentao, certamente poder
criar algumas pginas com tima aparncia, mas elas ainda sero apenas
pginas. Quando voc adiciona comportamento com JavaScript, pode
criar uma experincia interativa ou, melhor ainda, pode criar aplicativos
web completos. Apronte-se para adicionar a habilidade mais interessante
e verstil ao seu kit de ferramentas web: JavaScript e programao!

Como JavaScript funciona 36


O que voc pode fazer com JavaScript? 37
Declarando uma varivel 38
Como dar nomes s suas variveis 40
Tornando-se Expressivo 43
Fazendo coisas repetidamente... 46
Tome decises com JavaScript 49
Tomando mais decises... e adicionando um default 50
Como e onde adicionar JavaScript s suas pginas 53
Como JavaScript interage com sua pgina 54
Como cozinhar seu prprio DOM 55
Uma primeira prova de DOM 56
HTML5 de Marte, JavaScript de Vnus 58
Faa um test drive nos planetas 62
Voc no pode mexer com o DOM at a pgina estar
inteiramente carregada 64
Ento, em que mais o DOM bom, afinal? 66
Podemos conversar sobre JavaScript novamente?
Ou, como armazenar mltiplos valores em JavaScript 67
O Phrase-o-Matic 71
Pontos de Bala 75
Exerccio Soluo 77

xi

PFCG_HeadFirstHTML5Prog.indb 11 05/06/2014 16:16:53


Contedo (Sumrio)

3
eventos, manipuladores e todo esse balano
Um Pouco de Interao
Voc ainda no alcanou seu usurio. Voc aprendeu os
conceitos bsicos sobre JavaScript, mas ser que consegue interao
com seus usurios? Quando as pginas respondem a entradas deles, no
so mais apenas documentos; so aplicativos vivos e interativos. Neste
captulo, voc aprender a lidar com uma forma de entrada de usurio e
a conectar um elemento <form> antigo de HTML a cdigo real. Talvez
soe perigoso, mas poderoso. Aperte seu cinto de segurana. Este
um captulo que vai diretamente ao ponto, em que vamos de zero a
aplicativos interativos em um segundo.

Apronte-se para o Webville Tunes 86


Iniciando... 87
Mas nada acontece quando clico em Adicionar Msica 88
Lidando com Eventos 89
Criando um Plano... 90
Obtendo acesso ao boto Adicionar Msica 90
Dando um manipulador de clique para o boto 91
Um olhar mais prximo no que acabou de acontecer... 92
Obtendo o nome da msica 94
Como adicionamos uma msica pgina? 97
Como criar um novo elemento 99
Adicionando um elemento ao DOM 100
Junte tudo... 101
... e faa um test drive 101
Reviso o que acabamos de fazer 102
Como adicionar o Cdigo Pronto para Assar... 105
Integrando seu Cdigo Pronto para Assar 106
Pontos de Bala 108
Exerccio Soluo 110

xii

PFCG_HeadFirstHTML5Prog.indb 12 05/06/2014 16:16:54


Contedo (Sumrio)

4
funes e objetos em JavaScript
JavaScript Srio
Voc j pode se chamar de scripter? Provavelmente, voc
j sabe fazer bastante coisa em JavaScript. No entanto, quem quer ser um
scripter quando pode ser um programador? hora de ficarmos srios e
acelerar um pouco hora de voc aprender sobre funes e objetos.
Eles so a chave para escrever um cdigo que seja mais poderoso,
melhor organizado e de mais fcil manuteno. Eles tambm so
amplamente usados pelas APIs JavaScript HTML5, de modo que, quanto
melhor voc entend-los, mais rapidamente poder passar para uma nova
API e comear a lidar com ela. Prepare-se: este captulo ir requerer sua
ateno exclusiva...

Expandindo seu vocabulrio 114


Como adicionar suas prprias funes 115
Como uma funo funciona 116
A Anatomia de uma Funo 121
Variveis Locais e Globais 123
Conhecendo o escopo das suas variveis locais e globais 124
Ah, mencionamos que funes tambm so valores? 128
Algum disse Objetos?! 131
Como criar um objeto em JavaScript 132
Algumas coisas que voc pode fazer com objetos 133
Vamos falar sobre passar objetos para funes 136
Objetos podem ter comportamento tambm... 142
Enquanto isso, de volta ao Cine Webville... 143
Adicionando a palavra-chave this 145
Como criar um construtor 147
Como this realmente funciona? 149
Faa o test drive do seu construtor direto do
cho da fbrica 153
O que o objeto window mesmo? 155
Um exame mais de perto em window.onload 156
Outro exame no objeto document 157
Um exame mais prximo em document.getElementById 157
Mais um objeto sobre o qual se pensar: seus
elementos objetos 158
Pontos de Bala 160

xiii

PFCG_HeadFirstHTML5Prog.indb 13 05/06/2014 16:16:54


Contedo (Sumrio)

5
tornando ativa sua localizao html
Geolocalizao
Aonde quer que v, l est voc. s vezes, saber onde se est faz toda a
diferena (principalmente para um aplicativo web). Neste captulo, vamos
mostrar como criar pginas da web que so localizveis em alguns
casos, ser possvel apontar o local exato dos usurios e, em outros, ser
apenas possvel determinar a rea da cidade em que se encontram (mas
ainda assim saberemos qual a cidade!). Infelizmente, s vezes no ser
possvel determinar nada em relao a sua localizao, o que pode se
dar por motivos tcnicos ou apenas por no querer ningum se metendo
em suas vidas. V descobrir sozinho. De qualquer modo, neste captulo,
vamos explorar uma API JavaScript: Geolocalizao. Arranje o melhor
dispositivo de localizao que puder (mesmo que seja seu computador
pessoal) e vamos comear.

Localizao, Localizao, Localizao 166


A Latitude e a Longitude da Questo... 167
Como a API de Geolocalizao determina sua localizao 168
Mas diz a: onde voc est? 172
Como tudo se encaixa 176
Revelando nossa localizao secreta... 179
Escrevendo o cdigo para encontrar a distncia 181
Como adicionar um mapa sua pgina 183
Colocando um alfinete... 186
Outras coisas legais que voc pode fazer com a
API do Google Maps 188
Podemos falar sobre sua preciso? 191
Onde quer que v, l est voc 192
Inicializando o aplicativo 193
Retrabalhando nosso antigo cdigo... 194
Hora de seguir em frente! 196
Voc tem algumas opes... 198
O mundo das timeouts e maximum age... 199
No Tente Isso em Casa (Levando a Geolocalizao
at o Limite) 202
Vamos finalizar este aplicativo! 204
Integrando nossa nova funo 205
Pontos de Bala 207
Exerccio Soluo 209

xiv

PFCG_HeadFirstHTML5Prog.indb 14 05/06/2014 16:16:54


Contedo (Sumrio)

6
falando com a web
Aplicativos Extrovertidos
Voc esteve na sua pgina por muito tempo. Est na
hora de sair um pouquinho, conversar com outros servios web, recolher
informaes e trazer isso tudo de volta para poder construir timas
experincias, mesclando o que h de melhor nelas. Essa uma parte
muito importante, quando escrevemos aplicativos HTML5 modernos,
mas, para isso, preciso saber como conversar com os servios web.
Neste captulo, vamos fazer exatamente isso e incorporar alguns dados, a
partir de um servio web real, bem na sua pgina. Depois de ter aprendido
como fazer isso, voc ser capaz de se aproximar e tocar qualquer servio
web que quiser. Vamos inclusive apresent-lo nova e mais badalada
linguagem utilizada para se falar com os servios web. Ento, venha. Voc
usar mais algumas APIs: as APIs de comunicao.

Mighty Gumball quer um aplicativo web 214


Um pouco mais de informao sobre a Mighty Gumball 216
Ento como fazemos requisies aos servios web? 219
Como fazer uma requisio a partir do JavaScript 220
Deixando um pouco o XML, conhecendo JSON 226
Escrevendo uma funo de handler onload 229
Mostrando os dados das vendas de chicletes 230
Como configurar seu prprio Servidor Web 231
Retrabalhando nosso cdigo para fazer uso do JSON 236
Seguindo para o Servidor em Tempo Real 237
Que suspense! 239
Lembra que deixamos voc com um suspense? Um bug. 242

Cuidado com o suspense


O que Poltica de Segurana do Browser? 244

neste captulo!
Ento, quais so nossas opes? 247
Conhea o JSONP 252
Mas o que o P de JSON? 253
Vamos atualizar o aplicativo web Mighty Gumball 256
Passo 1: Dando um jeito no elemento script... 264
Passo 2: Agora hora do timer 265
Passo 3: Reimplementando o JSONP 267
Quase esquecemos: cuidado com a terrvel
cache do browser 272
Como remover relatrios de vendas duplicados 273
Atualizando a URL JSON para incluir o lastreporttime 275
Pontos de Bala 277
xv

PFCG_HeadFirstHTML5Prog.indb 15 05/06/2014 16:16:54


Contedo (Sumrio)

7
descobrindo seu artista interior
O Canvas
A HTML deixou de ser apenas uma linguagem
marcao. Com o novo elemento canvas da HTML5, voc tem o
poder de criar, manipular e destruir pixels, bem nas suas mos. Neste
captulo, usaremos o elemento canvas para descobrir o artista que vive em
voc chega de falar que o HTML s semntico e sem apresentao;
com o canvas, vamos pintar e desenhar com cores. Agora, tudo uma
questo de apresentao. Vamos aprender como posicionar um canvas em
suas pginas, como desenhar texto e grficos (usando JavaScript, claro)
e at mesmo como lidar com browsers que no suportam o elemento
canvas. Canvas no apenas uma maravilha que s serve para uma coisa:
voc ver muito mais em outros captulos neste livro.

L5
Um novo projeto HTvoMc
Nossa nova partida: TweetShirt 282

est esperand o po r Verificando os esboos 283


l!
para ser tirado do pape Como pr um canvas em sua pgina 286
Como ver seu canvas 288
Desenhando no Canvas 290
Fracassando graciosamente 295
TweetShirt: Viso Geral 297
Primeiro, vamos organizar o HTML 300
Agora, vamos adicionar o <form> 301
Hora de ficar computacional com JavaScript 302
Escrevendo a funo drawSquare 304
Adicione a chamada para fillBackgroundColor 307
Enquanto isso, l na TweetShirt.com... 309
Desenhando com Nerds 311
Desvendando o mtodo arc 314
Provando um pouco do uso do arco 316
Eu digo grau, voc diz radiano 317
Voltando a escrever o cdigo dos crculos da TweetShirt 318
Escrevendo a funo drawCircle... 319
Obtendo seus tutes 323
Texto no Canvas de Perto 328
V testar o drawText 330
Completando a funo drawText 331
Pontos de Bala 338
Exerccio Soluo 341

xvi

PFCG_HeadFirstHTML5Prog.indb 16 05/06/2014 16:16:54


Contedo (Sumrio)

8
no a TV de seu pai
Vdeo
No precisamos de plugin. Afinal, vdeo agora um membro de
primeira-classe da famlia HTML s jogar um elemento <video> em
sua pgina e o ter instantaneamente, mesmo em vrios dispositivos. O
vdeo, no entanto, muito mais que apenas um elemento; tambm uma
API JavaScript que nos permite controlar a reproduo, criar nossas prprias
interfaces de vdeo personalizadas e integr-lo com o resto do HTML de
maneiras completamente novas. Falando em integrao... Lembre-se de
que existe aquela conexo entre vdeo e canvas que falamos a respeito
voc ver que unir vdeo e canvas nos d uma poderosa nova forma de
processar vdeo em tempo real. Neste captulo, vamos comear por rodar
vdeos numa pgina e, ento, veremos o que a API JavaScript tem de
melhor. Venha. Voc ficar encantado ao ver o que possvel fazer com
algumas tags, marcao, JavaScript e vdeo & canvas.

Conhea a TV Webville 350


O HTML, vamos botar pra quebrar... 351
Como funciona o elemento vdeo? 353
Inspecionando de perto os atributos do vdeo... 354
O que voc precisa saber sobre formatos de vdeo 356
Como manejar todos aqueles formatos... 358
No me disseram que haveria APIs? 363
Chame esses Mtodos 363
Um pouco de contedo de programao na TV Webville 364
Ento, o que h com aquele cdigo do event handler? 367
Como funciona o mtodo canPlayType 369
Descompactando a Unidade Demo 375
Investigando o resto do cdigo de origem 376
Os handlers setEffect e setVideo 378
Implementando seus controles de vdeo 384
Alternando vdeos de teste 387
Est na hora de alguns efeitos especiais 389
Como funciona o processamento de vdeo 392
Sintonize na TV Webville... Como processar o vdeo usando um scratch buffer 393
Implementando um scratch buffer com canvas 395
Agora precisamos escrever alguns efeitos 399
Como usar error events 406
Pontos de Bala 408
Exerccio Soluo 410
xvii

PFCG_HeadFirstHTML5Prog.indb 17 05/06/2014 16:16:54


Contedo (Sumrio)

9
armazenando coisas localmente
Web Storage
Cansado de empurrar os dados de seu cliente para
dentro de um pequeno armrio cookie? Isso foi divertido
nos anos 1990, mas temos necessidades muito maiores hoje em dia com
os aplicativos web. E se dissssemos que poderamos conseguir cinco
megabytes para voc no navegador do usurio? Provavelmente, olharia
para ns como se estivssemos tentando vender uma ponte para voc no
Brooklyn. Bem, no precisa ser ctico a API Web Storage HTML5 faz
exatamente isso! Neste captulo, vamos mostrar tudo que voc precisa
para armazenar qualquer objeto localmente, no dispositivo de seu usurio,
e se aproveitar disso na experincia web.

Como funciona o armazenamento do


navegador (1995 2010) 414
difcil lidar com minha Como o Web Storage HTML5 funciona 417
vida agitada, se no consigo
me livrar dessas notas Nota para si mesmo... 418
depois de concluir minhas O Local Storage e o Array foram separados
tarefas. Poderia adicionar
uma funo para deletar? na maternidade? 424
Criando a interface 429
Agora, vamos adicionar JavaScript 430
Completando a interface do usurio 431
Precisamos parar para um reparo na agenda 434
Manuteno Faa-Voc-Mesmo 435
Ns temos a tecnologia 439
Retrabalhando nosso aplicativo para usar um array 440
Convertendo createSticky para usar um array 441
Deletando sticky notes 446
A funo deleteSticky 449
Como selecionar uma nota para ser deletada? 450
Como fazer a nota ser deletada a partir do evento 451
Delete a nota do DOM, tambm 452
Atualize a interface do usurio para que possamos
especificar uma cor 453
JSON.stringify no s para Arrays 454
Usando o novo stickyObj 455
No Tente Isto em Casa (ou Jogar pelos Ares
seus 5 Megabytes) 458
Agora que voc conhece o localStorage, como ir us-lo? 462
Pontos de Bala 464
Exerccio Soluo 466
xviii

PFCG_HeadFirstHTML5Prog.indb 18 05/06/2014 16:16:55


Contedo (Sumrio)

10
pondo o javascript para funcionar
Web Workers (os Trabalhadores da Web)
Script lento voc quer continuar executando-o? Se voc j
gastou tempo suficiente com o JavaScript ou pesquisando na web,
provavelmente j viu a mensagem script lento (slow script). Com todos
esses processadores multi ncleo fazendo parte da sua mquina novinha,
como pode um script estar rodando to lentamente? Isso acontece
porque o JavaScript s pode fazer uma coisa por vez. Contudo, com o
HTML5 e os Web Workers, tudo isso muda. Voc agora tem a habilidade
de gerar seus prprios trabalhadores JavaScript para obter maior volume
de trabalho feito. Se estiver apenas tentando desenhar um aplicativo mais
responsivo, ou s quiser exigir o mximo que o CPU de sua mquina pode
trabalhar, os Web Workers esto aqui para ajudar. Ponha seu chapu de
gerente JavaScript e vamos pr alguns pees para trabalhar!

O terrvel script lento 474


Como o JavaScript gasta seu tempo 474
Quando o single-thread fica RUIM 475
Adicionando outro thread de controle para ajudar 476
Como trabalham os Web Workers 478
Seu primeiro Web Worker... 483
Escrevendo Manager.js 484
Recebendo mensagens do worker 485
Agora vamos escrever o worker 486
Expropriao Virtual 494
Como calcular um Mandelbrot Set 496
Como usar mltiplos workers 497
Vamos construir o aplicativo Fractal Explorer 503
Cdigo Pronto para Assar 504
Criando workers e dando-lhes tarefas... 508
Escrevendo o cdigo 509
Pondo os workers para comear 510
Implementando o worker 511
De volta ao cdigo: como processar os resultados
dos workers 514
Encaixando o canvas na janela do navegador 517
O codificador chef do Sr. Explicadinho 518
No Laboratrio 520
Pontos de Bala 524
Exerccio Soluo 526
xix

PFCG_HeadFirstHTML5Prog.indb 19 05/06/2014 16:16:55


Contedo (Sumrio)

^
Apndice: Os dez tpicos mais importantes
(que no vimos)
Vimos muita coisa e voc
j praticamente terminou
este livro. Sentiremos sua falta,
mas, antes de deixarmos voc ir,
queremos lhe oferecer pelo mundo
um pouco mais de preparao.
Claro que no h como ensinar tudo
o que voc precisa saber nesse,
relativamente, pequeno captulo.
Na verdade, ns, originalmente,
inclumos tudo o que voc precisava saber sobre HTML5, reduzindo o
tamanho da fonte para .00004. Tudo caberia, mas ningum conseguiria
ler. Ento, jogamos a maior parte fora e mantivemos o melhor para este
apndice dos Dez Mais.

N0 1 Modernizr 532
N0 2 udio 533
N0 3 jQuery 534
N0 4 XHTML est morto, vida longa ao XHTML 536
N0 5 SVG 537
N0 6 Aplicativos web offline 538
N0 7 Web Sockets 539
N0 8 Mais API canvas 540
N0 9 Seletores API 542
N0 10 Tem muito mais! 543
O Guia HTML5 para Nova Construo 545
Guia Webville para Elementos Semnticos HTLM5 546

i
Guia Webville para Propriedades CSS3 548

ndice 549

xx

PFCG_HeadFirstHTML5Prog.indb 20 05/06/2014 16:16:56


a introduo

como usar este livro


Introduo
No acredito que eles
colocaram isso em um
livro de programao
HTML5!

Seu crebro em Programaoo pr HTML5.


ente: Aqui est voc
ondemos quest em
tentando
o, resp seu crebroISest
a seenquanto
Nestalgo, lheum ML5?
livro soum HT se certificando
brefavor
SO em
r que eles colocaram
aprender fazendo
de que o, po
Eontaprendizado no tenha sucesso. Seu crebro est pensando: Melhor
deixar mais espao para coisas mais importantes, como quais animais selvagens
evitar e se uma m ideia esquiar na neve pelado. Ento, como enganar seu
crebro para que ele pense que sua vida depende de saber HTML5 e JavaScript?

voc est aqui xxi

PFCG_HeadFirstHTML5Prog.indb 21 05/06/2014 16:16:57


como usar este livro

A quem se destina este livro?


Se voc responder sim a todas estas perguntas:

1 Voc tem um computador com um navegador web e


um editor de texto?

2 Voc quer aprender, entender, lembrar e criar aplicativos web


usando as melhores tcnicas e os padres mais recentes?

3 Voc prefere uma conversa estimulante em um jantar festivo


a palestras ridas, desinteressantes e acadmicas?

este livro para voc.

Quem provavelmente deve fugir deste livro?


Se voc responder sim a algumas destas perguntas:
Veja em Use a Cabea!
HTML com CSS e XHTML
1 Voc completamente novo na escrita de pginas uma excelente introduo ao
web? desenvolvimento web e depois
Voc j est desenvolvendo aplicativos web e
volte e junte-se a ns.
2
procurando um livro de referncia sobre HTML5?

3 Voc tem medo de experimentar algo diferente?


Voc preferiria fazer um tratamento dentrio de
canal a misturar listras com xadrez? Voc acredita
que um livro tcnico no pode ser srio se filmes
educativos ruins da dcada de 1950 e APIs JavaScript
antropomorfizadas estiverem nele?

este livro no para voc.

[Observao do marketing: est


livro para qualquer pessoa come um
carto de crdito. Dinheiro vivo
tambm bom Dan]

xxii introduo

PFCG_HeadFirstHTML5Prog.indb 22 05/06/2014 16:16:58


a introduo

Sabemos o que voc est pensando.


Como este pode ser um livro de programao HTML5 srio?
O que aconteceu com todos os grficos?
Seu cr
Eu posso realmente aprender desta maneira? ISTO eimbro acha que
portante.
E sabemos o que o seu crebro est pensando.
Seu crebro precisa de novidades. Est sempre buscando, examinando,
esperando por algo diferente. Ele foi criado assim e isso ajuda voc a
permanecer vivo.
Ento, o que o seu crebro faz com todas as coisas rotineiras,
comuns e normais que voc encontra? Tudo o que ele puder para
impedir que elas interfiram na funo real dele: gravar coisas
que importam. Ele no se d ao trabalho de gravar as coisas
desinteressantes; elas nunca passam pelo filtro isto obviamente
no importante.
Como o seu crebro sabe o que importante? Suponha que voc v
caminhar ao ar livre e um tigre pule na sua frente. O que acontece
dentro da sua cabea e corpo?
Os neurnios disparam. As emoes so acionadas. As substncias qumicas irrompem.
assim que o seu crebro sabe...
timo. S mais
Isto deve ser importante! No se esquea! 640 pginas ridas,
Agora, imagine que voc esteja em casa ou em uma desinteressantes e
biblioteca. uma regio segura, aquecida e sem tigres. ro acha chatas.
Voc est estudando ou tentando aprender algum Seu creOb no
tpico tcnico difcil, que o seu chefe acha que que IST nte.
levar uma semana, dez dias, no mximo. importa
Apenas um problema. Seu crebro est tentando lhe
fazer um grande favor. Ele est tentando assegurar
que este contedo obviamente no importante no
atravanque recursos escassos. Recursos que
so melhor gastos armazenando as coisas
realmente importantes. Assim como os tigres.
Como o perigo do fogo. Como voc nunca
deve esquiar na neve de bermudas novamente.
No h uma forma simples de dizer ao seu
crebro: Ei, crebro, muito obrigado, mas
no importa o quo chato este livro seja, e
o quo pouco estou marcando na escala
Richter emocional agora, eu realmente quero
que voc grave esse assunto..

voc est aqui xxiii

PFCG_HeadFirstHTML5Prog.indb 23 05/06/2014 16:16:58


como usar este livro

um livro da srie Use a Cabea! um aprendiz.


Entendemos que o leitor de entender,
lugar, voc tem que
a apr en de r alg um a coisa? Em primeiro . Ba sea do na pesquisa
srio par r fatos na sua cabea
Ento, o que neces cer . N o em pu rra age m precisa
que no esque cional, a aprendiz
depois se assegurar iva , ne uro bio log ia e psicologia educa
ncia cog nit seu creb ro.
mais recente em ci . Sabemos o que liga
e texto em uma pgina
de muito mais do qu
do Use a Cabea!:
ns do s pr in cp io s de aprendizagem veis do que
Algu so muito mais record
ser visual. Imagens
Faa is efetiva muito ma
nam a aprendizagem
apenas palavras e tor est ud os de transferncia e
89 % em
(uma melhoria de at compreensveis.
torna as coisas mais
lembrana). Tambm imas de
ras dentro ou prx
Coloque as palav aci on ada s e os estudantes
estejam rel
grficos aos quais s ma ior de
ade at duas veze
tero uma probabilid s ao con te do .
acionado
resolver problemas rel
Em estudos
loquial e pessoal.
Use um estilo co nh o at 40% melhor
ram um desempe
recentes, alunos tive diretamente ao
, se o contedo falasse
em testes posteriores oq uia l, em vez de
ssoa e na forma col
leitor, em primeira pe em vez de pal est rar. No se
histrias
em tom formal. Conte ma is ate no: uma
A que voc prestaria
leve a srio demais.
uma palestra?
nte em um jantar festivo ou
companhia interessa
mais
rendiz pense com
o um
e tenh
Vejo qu
Faa com que o ap
ra
Hora de ac
ordar, ador pa
avr as, a me nos que voc e do manipul r contar
e. Em out ras pal h um cli qu
so, m el ho
profundidad
is
ce muita usuri o. para el e.
s neurnios, no aconte
exercite ativamente seu que ser mo tiva do,
Um leitor tem
coisa na sua cabea. problemas,
ivado, curioso e inspirado para resolver
incent con hec ime nto . Para
e gerar novo
chegar a concluses exe rcc ios e questes que
des afios,
isso, voc precisa de envolvam
, alm de atividades que
provoquem o raciocnio s.
ebro e mltiplos sentido tivemos a
ambos os lados do cr do leitor. Todos j
enha a ateno rmanecer
Obtenha e mant s no con sig o pe
cia re alm en te qu ero aprender isso, ma n o a coi sas que
experin ro presta ate
ira pgina. Seu creb radas.
acordado aps a prime ntes, cha ma tiva s, ine spe
interessantes, difere
so fora do comum, o dif cil no tem que ser tedios
o. Seu
tp ico tc nic
Aprender um novo se no for .
ito mais rapidamente
crebro aprender mu e de
em os que a sua capacidad
qu e na s em o e s deles. Agora sab on al. Vo c lem bra
To do emoci
dependente do conte o, no
lembrar algo muito Vo c lem bra quando sente algo. N
a qu e d im po rt nci a. cac ho rro.
daq uilo garoto e seu
trias tristes sobre um erso, mas o
estamos falando de his sa, cur ios ida de , div
emoes como surpre quando voc resolve
Estamos falando de ou o mximo! que vem
tim en to de S e difcil
que...? e o sen s pessoas acham qu
pro ble ma , apr en de o que todas as outra o do qu e voc da
um mais tcnic
algo que o Bob sou
ou percebe que sabe
engenharia no sabe.

xxiv introduo

PFCG_HeadFirstHTML5Prog.indb 24 05/06/2014 16:16:59


a introduo

Metacognio: pensando sobre pensar


Se voc realmente quiser aprender, e quiser aprender mais rpido e profundamente, preste
ateno em como voc presta ateno. Pense em como voc pensa.
Aprenda como voc aprende. Fico imaginando
como posso enganar
A maioria de ns no fez cursos sobre metacognio ou teoria de
meu crebro para
aprendizagem quando estvamos crescendo. As pessoas esperavam
lembrar dessas
que aprendssemos, mas raramente nos ensinavam a aprender.
coisas...
Supomos porm que, se voc est segurando este livro, realmente
quer aprender sobre desenvolvimento em HTML5, provavelmente
no quer gastar muito tempo e, j que criar mais aplicativos
no futuro, precisa lembrar do que l. Para isso, tem que entender.
Para tirar o maior proveito deste livro, ou de qualquer livro ou
experincia de aprendizagem, responsabilize-se pelo
seu crebro. Seu crebro e este contedo.
O truque fazer com que seu crebro veja o
material novo que voc est aprendendo como
Realmente Importante. Crucial para o seu bem-
estar. To importante quanto um tigre. Caso
contrrio, voc ficar em uma batalha constante,
com seu crebro fazendo seu melhor para impedir
que o novo contedo permanea.
Ento, como que voc faz para que seu
crebro ache que esse HTML5 (e JavaScript) um tigre faminto?
Existe a forma lenta e tediosa, ou a mais rpida e eficaz. A forma lenta tem a ver com repeties.
Voc obviamente sabe que pode aprender e lembrar, mesmo os tpicos mais desinteressantes, se
ficar repetindo a mesma coisa no seu crebro. Com repeties suficientes, seu crebro diz: Isto no
parece importante para ele, mas ele fica olhando a mesma coisa vrias vezes, ento acho que deve ser.
A forma mais rpida fazer qualquer coisa que aumente a atividade do crebro, especialmente
tipos diferentes de atividade cerebral. As coisas na pgina anterior so uma parte importante
da soluo, e so todas coisas que foram provadas como eficazes na ajuda para que seu crebro
trabalhe a seu favor. Por exemplo, estudos mostram que colocar palavras dentro das imagens
que elas descrevem (em vez de em algum outro lugar na pgina, como um cabealho ou no
texto do corpo) faz com que seu crebro tente encontrar sentido no modo em que as palavras
e a imagem se relacionam, e isto faz com que mais neurnios disparem. Mais neurnios
disparando = mais chances do seu crebro entender que isso algo ao qual vale a pena prestar
ateno, e possivelmente gravar.
Um estilo coloquial ajuda porque as pessoas tendem a prestar mais ateno quando percebem
que esto em uma conversa, j que devem seguir o assunto e esperar seu final. O incrvel
que seu crebro no se importa necessariamente que a conversa seja entre voc e um livro!
Por outro lado, se o estilo do texto for formal e rido, seu crebro percebe da mesma maneira
que quando voc assiste a uma palestra, sentado em uma sala cheia de ouvintes passivos. No
preciso permanecer acordado.
Imagens e estilo coloquial, no entanto, so apenas o incio.
voc est aqui xxv

PFCG_HeadFirstHTML5Prog.indb 25 05/06/2014 16:16:59


como usar este livro

Aqui est o que NS fazemos:


Usamos imagens, porque seu crebro ligado em imagens, no em
textos. No que diz respeito ao seu crebro, uma figura realmente vale
mil palavras. Quando texto e imagens trabalham juntos, inserimos o
texto na figura porque seu crebro funciona mais efetivamente quando
o texto est dentro da coisa a qual ele se refere, diferentemente de em
um ttulo ou enterrado no texto em algum lugar.
Usamos redundncia, dizendo a mesma coisa de formas diferentes, porque seu
crebro ligado por novidades, e usamos imagens e ideias com pelo menos o
mesmo contedo emocional, porque seu crebro ajustado para prestar ateno
bioqumica das emoes. Isso faz com que voc sinta que algo tem maior
probabilidade de ser lembrado, mesmo que esse sentimento no seja nada mais
que um pouco de humor, surpresa ou interesse.
Usamos um estilo coloquial pessoal, porque seu crebro ajustado para prestar
mais ateno quando acredita que voc est em uma conversa do que se achar
que voc est ouvindo passivamente uma apresentao. Seu crebro faz isso
Sinta-se como
mesmo quando voc est lendo. o Navegador
Inclumos muitas atividades, porque seu crebro ajustado para aprender e
lembrar mais quando voc faz coisas do que quando l sobre elas. Tornamos os
exerccios desafiadores, mas viveis, porque o que a maioria das pessoas prefere.
Usamos mltiplos estilos de aprendizagem, porque voc talvez prefira PONTO DE BALA
procedimentos passo a passo, ou entender o contexto geral primeiro, ou ainda
s quer ver um exemplo. Independentemente, porm de sua preferncia de
aprendizagem, todos se beneficiam vendo o mesmo contedo representado de
mltiplas formas.
Inclumos contedo para os dois lados do seu crebro, porque, quanto mais do
seu crebro voc envolve, maior a probabilidade de aprender e lembrar, e mais
tempo consegue permanecer focado. J que trabalhar um lado do crebro muitas
vezes significa dar ao outro lado uma chance de descansar, voc pode ser mais
produtivo aprendendo por um perodo mais longo.
Inclumos histrias e exerccios que apresentam mais de um ponto de vista,
porque seu crebro adaptado para aprender mais profundamente, quando
forado a fazer avaliaes e julgamentos.
Inclumos desafios, com exerccios, fazendo perguntas que nem sempre tm
uma resposta direta, porque seu crebro adaptado para aprender e lembrar
quando tem de trabalhar em algo. Pense nisso voc no consegue colocar seu
corpo em forma apenas observando pessoas na ginstica. Fizemos o nosso melhor
para assegurar, que quando voc estiver trabalhando com afinco, esteja fazendo
pelas coisas certas. E que voc no est gastando um dentrito extra processando um
exemplo difcil de entender, ou analisando um texto conciso demais, cheio de
jarges ou difcil.
Usamos pessoas. Em histrias, exemplos, imagens etc, porque, bem, porque
voc uma pessoa, e seu crebro presta mais ateno a pessoas do que a coisas.
xxvi introduo

PFCG_HeadFirstHTML5Prog.indb 26 05/06/2014 16:17:00


a introduo

Veja o que fazer para que seu crebro


se curve em sinal de submisso
Ento, fizemos a nossa parte. O resto com voc. Estas dicas
so um ponto de partida; oua seu crebro e descubra o que
funciona para voc e o que no. Experimente coisas novas.
Corte isto e cole
na sua geladeira.

1 V devagar. Quanto mais voc 6 Converse sobre o que est lendo.


entende, menos tem de memorizar. Em voz alta.
No leia apenas. Pare e pense. Quando o Falar ativa uma parte diferente do
livro lhe fizer uma pergunta, no pule para crebro. Se voc estiver tentando
a resposta. Imagine que algum realmente entender algo, ou aumentar sua chance
esteja lhe fazendo a pergunta. Quanto mais de lembrar disso mais tarde, fale em
profundamente voc forar seu crebro a voz alta. Melhor ainda, tente explicar
pensar, maior a chance de aprender e lembrar. isso em voz alta para outra pessoa. Voc
aprender mais rapidamente, e talvez
2 Faa os exerccios. Faa suas
prprias anotaes. descubra ideias que no sabia que estavam
Ns os colocamos, mas, se os fizssemos por l enquanto lidava com isso.
voc, seria como se outra pessoa fizesse os 7 Oua seu crebro.
seus exerccios fsicos. No olhe apenas os Preste ateno se o seu crebro est
exerccios. Use um lpis. H muita evidncia sendo sobrecarregado. Se voc estiver
de que atividade fsica ao aprender pode comeando a apenas ler por cima
aumentar o aprendizado. e esquecer o que leu, hora de um
intervalo. Assim que voc passar de um
3 Leia as sees No existem
perguntas idiotas. determinado ponto, no aprender mais
Isso significa todas elas. No so quadros rapidamente tentando ler mais, e pode
laterais opcionais so parte do contedo at prejudicar o processo.
central! No os pule. 8 Sinta algo!
4 Que isso seja a ltima coisa que Seu crebro precisa saber que isto
voc leia antes de ir dormir. Ou pelo importante. Envolva-se com as histrias.
menos a ltima coisa desafiadora. Crie seus prprios ttulos para as fotos.
Parte do aprendizado (especialmente a Suspirar por causa de uma piada ruim
transferncia para a memria de longo prazo) ainda melhor do que no sentir nada.
acontece aps voc fechar o livro. Seu crebro 9 Crie algo!
precisa de tempo sozinho, para processar Aplique isto ao seu trabalho dirio; use
mais. Se voc colocar algo novo durante esse o que voc est aprendendo para tomar
tempo de processamento, algo do que voc decises sobre seus projetos. Faa algo
acabou de aprender ser perdido. para obter alguma experincia alm dos
exerccios e atividades deste livro. Tudo
5 Beba gua. Em grande quantidade.
Seu crebro trabalha melhor com um belo o que voc precisa de um lpis e um
banho de fludos. A desidratao (que pode problema para resolver... um problema
acontecer antes de voc sentir sede) diminui que possa se beneficiar do uso de
a funo cognitiva. ferramentas e tcnicas que voc estiver
usando para a prova.

voc est aqui xxvii

PFCG_HeadFirstHTML5Prog.indb 27 05/06/2014 16:17:01


como usar este livro

Leia-me
Isto uma prtica de aprendizado, no um livro de referncia. Ns tiramos
deliberadamente tudo que poderia atrapalhar o aprendizado do que quer que estejamos
trabalhando nesse ponto do livro. Na primeira vez, voc precisa comear do incio, porque o
livro faz suposies sobre o que voc j viu e aprendeu.

Esperamos que voc conhea HTML e CSS.


Se voc no conhecer marcao HTML (ou seja, tudo sobre documentos HTML, incluindo
elementos, atributos, estrutura de propriedades, estrutura versus apresentao), ento
pegue o livro Use a Cabea! HTML com CSS e XHTML antes de comear este livro. Em caso
contrrio, deve estar pronto para ler.

Alguma experincia ajuda, mas no esperamos que voc conhea


JavaScript.
Se voc tiver alguma experincia em programao ou scripting (mesmo se no for com
JavaScript), ela lhe ajudar. No esperamos, porm, que voc j conhea JavaScript; na
verdade, este livro projetado para seguir o Use a Cabea! HTML com CSS e XHTML, que
no tem scripting.

Ns o incentivamos a usar mais de um navegador neste livro.


Incentivamos voc a testar as pginas e aplicativos web em diversos navegadores. Isto lhe dar
a experincia de ver as diferenas entre navegadores e possibilitar a criao de pginas que
funcionem bem em uma diversidade deles. Recomendamos enfaticamente o Google Chrome
e o Apple Safari para uso com este livro, como so, de modo geral, os mais atualizados com
os padres correntes. Recomendamos, no entanto, que voc tambm experimente as verses
mais recentes dos outros principais navegadores, incluindo o Internet Explorer, Firefox e
Opera, assim como navegadores mveis em dispositivos com iOS e Android.

As atividades NO so opcionais.
Os exerccios e atividades no so complementos; eles fazem parte do contedo central
do livro. Alguns deles so para auxiliar a memria, alguns para entender e alguns lhe
ajudaro a aplicar o que aprendeu. No pule os exerccios. At palavras cruzadas so
importantes elas lhe ajudaro a gravar os conceitos no seu crebro. Mais importante,
so boas para dar ao seu crebro uma chance de pensar nas palavras e termos que voc
aprendeu em um contexto diferente.

A redundncia intencional e importante.


Uma diferena clara de um livro da srie Use a Cabea! que queremos que voc realmente
grave. Queremos que voc termine o livro lembrando do que aprendeu. A maioria dos livros
de referncia no tem reteno e lembrana como objetivo, mas este livro sobre aprender,
de modo que voc ver alguns dos mesmos conceitos aparecerem mais de uma vez.

Os exerccios do Poder do Crebro no tm respostas.


Para alguns deles, no h uma resposta certa e, para outros, parte da experincia de aprendizado
das atividades do Poder do Crebro para voc decidir se e quando suas respostas esto corretas.
Em alguns desses exerccios, voc encontrar dicas para lhe indicar o caminho certo.
xxviii introduo

PFCG_HeadFirstHTML5Prog.indb 28 05/06/2014 16:17:01


a introduo

Requisitos de software
Para escrever cdigo em HTML5 e JavaScript, voc precisa de um editor de textos, um
navegador e, s vezes, um servidor web (pode estar hospedado localmente no seu
desktop pessoal).
Os editores de textos que recomendamos para o Windows so o PSPad, TextPad ou EditPlus
(mas voc pode usar o Bloco de Notas, se precisar). Se estiver em um sistema Linux, tem muitos
editores de textos internos, e acreditamos que voc no precise que ns falemos sobre eles.
Esperamos que voc tenha instalado pelo menos dois navegadores (veja a pgina anterior).
Em caso contrrio, faa isso agora. Tambm vale a pena gastar seu tempo aprendendo
sobre como usar as ferramentas de desenvolvedor do navegador; cada um dos principais
navegadores tem ferramentas internas, que voc pode usar para inspecionar o console
JavaScript (voc pode ver erros, assim como mostrar resultados usando o console.log,
uma alternativa til a alert), uso do armazenamento web, o DOM, o estilo de CSS
aplicado aos elementos e muito mais. Alguns navegadores tm at plugins para ferramentas
adicionais de desenvolvedor. Voc no precisa dessas ferramentas para o livro, mas, se
desejar gastar o tempo investigando como us-las, o desenvolvimento ser mais fcil.
Alguns recursos HTML5 e APIs JavaScript requerem que voc fornea arquivos a partir
de um servidor web real em vez de carregando o arquivo (i.e., sua URL comear com
http:// em vez de file://). Identificamos em quais exemplos voc precisar de um
servidor nos lugares apropriados do livro, mas, se voc estiver motivado, recomendamos que
siga em frente e instale um servidor no seu computador agora. Para Mac e Linux, o Apache
j est incluso, de modo que voc s precisa assegurar-se de que sabe acess-lo e sabe onde
colocar seus arquivos para que possa fornec-los usando seu servidor local. Para Windows,
voc precisar instalar o Apache ou o IIS; se voc for usar o Apache, h muitas ferramentas
open source, como o WAMP e XAMPP, que so razoavelmente fceis de instalar.
isso! Divirta-se...

voc est aqui xxix

PFCG_HeadFirstHTML5Prog.indb 29 05/06/2014 16:17:01


como usar este livro

David Powers
Reviso Tcnica
Paul Barry Bert Bates

r; Paul um
No apenas um reeviso experiente, No um simples revisor
autor Use a Cab a!a Cabea! Python Nosso Revisor Tcnico Master aqui, ele tambm o
tendo escrito UseProgramao criador da srie! Cara,
e Use a Cabea! bota presso nisso...
Rebeca Duhn-Kahn
Trevor Farlow
Lou Barr

Nosso revisor dos 110%


Tentamos dizer a ela que s de esforo. Ele at
precisaria nos ajudar com os correu no meio da noite
grficos, mas ela no pde de pijamas pra testar
evitar e tambm foi uma Rebeca atuou como segundo par de olhos; nosso cdigo geogrfico.
revisora tcnica eminente. nos salvou a pele em detalhes de cdigo
que ningum mais viu (inclusive ns!)
Nossos revisores:
Somos extremamente gratos nossa reviso tcnica. A equipe inteira provou o quanto
precisvamos de seu conhecimento tcnico e ateno a detalhes. David Powers, Rebeca
Dunn-Krhan, Trevor Farlow, Paul Berry, Louise Barr e Bert Bates no deixaram nada sem
exame na sua reviso e o livro muito melhor por causa disso. Vocs so timos!

xxx introduo

PFCG_HeadFirstHTML5Prog.indb 30 05/06/2014 16:17:03


a introduo

Agradecimentos
Mais revisores tcnicos ainda:
Este est se tornando um tema recorrente nos nossos livros, Nota para o Editor:
mas queramos dar mais uma reverncia a David Powers, nosso poderamos prender
estimado revisor tcnico e autor de muitos livros, incluindo PHP este cara para os
Solutions: Dynamic Web Developing Made Easy. Os comentrios de nossos prximos trs
David sempre resultam em melhorias significativas no texto e livros? Ver se podemos
dormimos melhor noite sabendo que passou pelo David, ento torn-lo exclusivo.
alcanamos a marca tcnica. Obrigado novamente, David.

Na OReilly:
Courtney Nash recebeu a difcil tarefa de gerenciar no
apenas o livro Use a Cabea! Programao em HTML5, mas
tambm a ns! Courtney no apenas clareou todos os
caminhos para ns, como tambm aplicou a presso
delicada que cada editor precisava para que o livro sasse.
Mais importante que tudo, porm, Courtney forneceu
feedback extremamente valioso sobre o livro e seu
contedo, o que resultou em alguns trabalhos significativos
no mesmo. Este livro muito melhor devido ao esforo de
Courtney. Obrigado.

Courtney Nash

Lou Barr tambm foi parte essencial deste livro


e contribuiu de muitas formas de revisora,
projetista de produo, projetista web, at a luta
no Photoshop. Obrigado Lou, no poderamos
t-lo feito sem voc!

Lou Barr, de novo! (E o Toby).


E obrigado a algumas outras pessoas que ajudaram a fazer isso acontecer:
Gostaria de agradecer o resto da equipe da OReilly pelo apoio de uma
centena de formas diferentes. Essa equipe inclui Mike Hendrickson, Mike
Loukides, Laurel Ruma, Karen Shaner, Sanders Kleinfeld, Kristen Borg,
Karen Montgomery, Rachel Monaghan, Julie Hawks e Nancy Reinhardt.

voc est aqui xxxi

PFCG_HeadFirstHTML5Prog.indb 31 05/06/2014 16:17:03


Agradecimentos

Mais agradecimentos ainda!*


E obrigado a algumas outras pessoas:
James Henstridge escreveu o cdigo original que se tornou o
visualizador de fractais do Captulo 10, o qual formatamos para
nossos propsitos para uso no livro. Desculpe algum cdigo que
tenhamos introduzido e que possa no ter sido to elegante
quanto a sua verso original. O ator e artista Laurence Zankowski,
eternamente estereotipado como CEO Starbuzz, reapareceu
generosamente neste livro e auxiliou a testar o aplicativo de
vdeo do Captulo 8 (imperdvel). A Bainbridge Island Downtown
Association gentilmente nos permitiu usar seu excelente logotipo, Ele est de
projetado por Denise Harris, para o WickedlySmart Headquarters. vooooolta!!!!
Obrigado Anthony Vizzari e A&A Studios por nos permitir usar uma
foto do seu fabuloso quiosque de fotos. Nosso exemplo inicial de
TweetShirt usa alguns dos belos cones do Internet Archive, no qual
ficam os filmes que usamos para a Webville TV. E obrigado a Daniel
Steinberg por estar sempre disponvel para ajudar.
Bert Bates
Kathy Sierra
E, finalmente, obrigado Kathy e Bert
E, por fim, mas no menos
importante, a Kathy Sierra e
Bert Bates, nossos cmplices e os
CREBROS que criaram a srie.
Esperamos, mais uma vez, ter feito
justia a ela.

Pesquisando para o Use a


Cabea! Mtodo Parelli.

*O grande nmero de agradecimentos porque estamos testando a teoria de que todos os mencionados
em um agradecimento de livro compraro pelo menos uma cpia, provavelmente mais, considerando
parentes e tudo mais. Se voc gostaria de estar nos agradecimentos do nosso prximo livro, e tem uma
famlia grande, escreva para ns.
xxxii introduo

PFCG_HeadFirstHTML5Prog.indb 32 05/06/2014 16:17:04


1 conhecendo a HTML5
Bem-vindo a Webville

Estamos indo para Webville!


H tantas construes timas em
HTML5 sendo feitas, que seramos
loucos se morssemos em outro lugar.
Vamos l, siga-nos, e mostraremos
todas as novidades ao longo
do caminho.

A HTML tem estado em uma corrida


louca. claro, comeou como uma simples
Ateno: A XHTML
linguagem de marcao, porm, mais recentemente,
recebeu uma carta de
tem desenvolvido mais msculos. Agora, temos uma despedida em 2009
linguagem ajustada para criar verdadeiros aplicativos e a visitaremos mais
web com armazenamento local, desenho 2D, suporte tarde no segmento
Onde eles esto agora.
offline, sockets, threads e mais. A histria da HTML
nem sempre foi bela e cheia de dramas (falaremos
sobre isso tudo), mas, neste captulo, primeiro daremos
uma pequena volta por Webville para ter uma ideia de
tudo o que se relaciona com HTML5. Vamos l, suba,
estamos indo para Webville, e comearemos indo de
zero a HTML5 em 3,8 pginas.

este um novo captulo 1

PFCG_HeadFirstHTML5Prog.indb 1 05/06/2014 16:17:05


como c funciona

Atualize para HTML5


Atuhoje!
alize para HTML5 hoje!
Por que esperar?
Use o meu HTML5-o-mtico e faa isso em
apenas trs etapas simples

remos
V agora mesmo! Por tempo limitado, pega
mbe nta e, em
aquela sua pgina HTML velha e mola
apenas trs etapas simples , a atualizaremos
para HTML5.
Pode mesmo ser assim to fcil?
onstrao
Pode apostar; na verdade, j temos uma dem
preparada para voc.
dias
Veja esta HTML cansada, gasta e que j teve
bem na
melhores; ns a transformaremos em HTML5
frente dos seus olhos:
HTML 4.01//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
ent="text/html; charset=UTF-8">
<meta http-equiv="content-type" cont
<title>Head First Lounge</title>
eet" href="lounge.css">
<link type="text/css" rel="stylesh
cript" src="lounge.js"></script>
<script type="text/javas
</head> Isto tudo HTML 4.01voc normal da
talvez
<body> Head First Lounge, quear, no se
se lembre (se no lembr sa lembrar).
h1>
<h1>Welcome to Head First Lounge</
<p>
<img src="drinks.gif" alt="Drinks"
> preocupe, voc no preci
</p>
<p>
<a href="elixirs.html">elixirs</a>,
Join us any evening for refreshing
a game or two of Tap Tap Revolution.
conversation and maybe
; BYOWS (Bring Your Own Web Server).
Wireless access is always provided
</p>
</body>
</html>

Veja o quo fcil escrever HTML5


to em HTML 4.01 (a verso anterior a
Comece revisando este HTML, que est escri
e refresque sua memria sobre o que cada
HTML5). Examine com ateno cada linha
anota es na pgina. Veremos como passar
parte faz. Sinta-se vontade para fazer
isso para HTML5 nas prximas pginas.
2 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 2 05/06/2014 16:17:09


conhecendo a HTML5

Aps examinar com cuidado a HTML da pgina 2, voc


consegue ver alguma marcao que possa mudar com
HTML5? Ou que voc gostaria que mudasse? Apontaremos
uma para voc: a definio doctype:

Isto s significa
, que este padro Esta parte diz que estamos usando
ype para html
Este o doctga
est disponvel a verso 4.01 de HTML e que esta
certo! publicamente. marcao est escrita em Ingls.
estamos no lu r
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Isto aponta para um arquivo


que identifica este padro.
Lembre-se de que a definio doctype deve ficar no topo do seu arquivo HTML e
informa ao navegador o tipo do seu documento; neste caso, HTML 4.01. Usando um
doctype, o navegador consegue ser mais preciso no modo como interpreta e renderiza
suas pginas, portanto, ele altamente recomendvel.
Ento, usando seus poderes de deduo, como voc acha que a definio de doctype
para HTML5 se parecer? Escreva aqui (voc pode voltar para ver sua resposta em um
segundo aps abordarmos esse assunto):

aqui.
Sua resposta vai

voc est aqui 3

PFCG_HeadFirstHTML5Prog.indb 3 05/06/2014 16:17:09


atualize seu html

Apresentando o HTML-o-mtico
Apresentando HTML-O-MTICO,, atualizeatualize
sua HTMLsua HTML
agora!
agora!
O Passo 1 te deixar impressionado: siga-nos, comearemos no topo do

ASSO 1
Head First Lounge HTML e atualizaremos o doctype para dar a ele esse
P novo brilho de HTML5.
Aqui est a verso antiga HTML 4.01 do doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Agora, voc talvez tenha imaginado que substituiremos cada


Pedimos desculpas
meno de 4 por 5 no doctype, certo? Ah, no. Aqui est queles que
a parte incrvel: o novo doctype para HTML5 simplesmente: tatuaram o
<!doctype html> doctype 4.01 ecer.
para no esqu
No h mais necessidade de pesquisar no Google para lembrar como o
doctype, ou copiar e colar de outro arquivo; este doctype to simples que
voc simplesmente conseguir se lembrar dele.
Tem mais...
Este doctype no apenas para HTML5; ele para todas as verses
futuras de HTML. Em outras palavras, nunca mais mudar. Alm disso, ele
funcionar em navegadores mais antigos tambm.

HTML Standas ards nos


3 C
Os ca ra s d os W
qu e d es t a ve z ser sim mesmo.
asseguraram

Se voc for f dos programas de TV Extreme Makeovers ou The Biggest

P ASSO 2 Loser, ir gostar do Passo 2. Neste passo, temos a tag meta de contedo...
Aqui, veja as imagens do antes e depois:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
4)
ANTES (HTML
<meta charset="utf-8">
5)
DEPOIS (HTML

Sim, a nova tag meta emagreceu est muito mais simples. Quando voc
especificar a tag na HTML5, apenas faa isso junto com um caractere de
codificao. Acredite ou no, todos os navegadores (antigos e novos) j
entendem esta descrio meta, de modo que voc pode us-la em qualquer
pgina e funciona.

4 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 4 05/06/2014 16:17:09


conhecendo a HTML5

Agora, vamos ao Passo 3, aquele que junta tudo. Aqui tambm iremos

PASSO
3 focar o elemento <head> e atualizar a tag link. Aqui est o que temos
agora: um link do tipo text/css que aponta para uma planilha:
<link type="text/css" rel="stylesheet" href="lounge.css">
Modo antigo
Para atualizar isto para HTML5, s precisamos remover o atributo do
tipo. Por qu? Porque CSS foi declarado como o padro, e estilo default,
para HMTL5. Assim, aps removermos o atributo de tipo, o novo link se
parece com o seguinte:
<link rel="stylesheet" href="lounge.css">
HTML5

Por voc ter agido rapidamente, temos um bnus especial. Tornaremos


sua vida ainda mais fcil simplificando a tag de script. Com HTML5,

BNUS JavaScript agora a linguagem de script padro e default, de modo que


voc pode remover o atributo de tipo das suas tags de script tambm.
Aqui est como a nova tag de script fica sem o atributo type:
No se preocupe se voc no
<script src="lounge.js"></script> souber muito sobre a tag de
script ainda. Chegaremos l
Ou, se voc tiver algum cdigo inline, pode simplesmente escrever seu
script desta forma:
<script>

var youRock = true;


o
Todo o seu cdi igaqui.
</script>
JavaScript va
Falaremos mais
sobre JavaScript
em breve.

AD
O Parabns, voc agora est qualificado
IC
R TIF para atualizar qualquer HTML
CE
para HTML5!
Como um usurio HTML5-o-Mtico treinado, voc tem as
ferramentas que precisa para pegar qualquer pgina HTML
vlida e atualiz-la para HTML5. Agora, est na hora de colocar sua
certificao em prtica!
voc est aqui 5

PFCG_HeadFirstHTML5Prog.indb 5 05/06/2014 16:17:10


alm do markup

Espere um momento. Todo


esse rebulio em torno de
HTML5 e isso tudo o que
eu preciso fazer? Sobre o
que o resto do livro?

OK, OK, voc nos pegou. At aqui, temos


falado sobre atualizar suas pginas HTML mais antigas,
de modo que estejam prontas para aproveitar tudo que
HTML5 tem a oferecer. Como voc pode ver, se estiver
familiarizado com HTML 4.01, ento est em tima
forma, porque HTML5 um superconjunto de HTML
4.01 (o que significa que praticamente tudo nela ainda
suportado em HTML5) e tudo o que voc precisa
saber como especificar seu doctype e o resto das tags
no elemento <head> para iniciar-se em HTML5.
Contudo, voc est certo. Estvamos brincando. claro
que h mais em HTML5 do que apenas a atualizao
de alguns elementos. Na verdade, o que deixa todos
entusiasmados a capacidade de criar pginas
interativas e ricas (ou at aplicativos web sofisticados)
e, para suportar isso, o HTML5 fornece uma famlia
inteira de tecnologias, que funcionam junto com a
linguagem de marcao HTML5.
No entanto, espere um pouco; antes de chegarmos l,
temos um pouco mais de trabalho a fazer para assegurar
que estamos prontos com nossa marcao.

6 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 6 05/06/2014 16:17:10


conhecendo a HTML5

Voc est mais prximo da marcao


em HTML5 doVoc
queest imagina!
mais prximo da marcao em HTML5
do que imagina!
Aqui est um pouco de HTML antiga que precisa de
atualizao. Trabalhe pelo processo HTML5-o-Mtico e
atualize esta HTML para HTML5. Siga em frente e rabisque
no livro, faa um esboo sobre o cdigo de marcao
existente e adicione qualquer cdigo de marcao novo
que precisar. Ajudamos um pouco destacando as reas que
precisam de alterao.
Quando tiver terminado, digite (ou pegue os arquivos do
exerccio e faa suas alteraes, se preferir), carregue no
seu navegador, sente-se e aprecie seu primeiro HTML5. Ah,
e voc encontrar nossas respostas na prxima pgina.
Para baixar todo o cdigo e arquivos de exemplo
deste livro, por favor visite http://wickedlysmart.
com/hfhtml5.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Head First Lounge</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="lounge.css">
<script type="text/javascript" src="lounge.js"></script>
</head>
<body>
<h1>Welcome to Head First Lounge</h1>
<p>
<img src="drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing <a href="elixirs.html">elixirs</a>,
conversation and maybe a game or two of Tap Tap Revolution.
Wireless access is always provided; BYOWS (Bring Your Own Web Server).
</p>
</body>
</html>

voc est aqui 7

PFCG_HeadFirstHTML5Prog.indb 7 05/06/2014 16:17:11


soluo de exerccio

Voc est mais prximo da marcao em HTML5


do que imagina!
Aqui est um pouco de HTML antiga que precisa de
atualizao. Trabalhe pelo processo HTML5-o-Mtico e
atualize esta HTML para HTML5. Siga em frente e rabisque
no livro, faa um esboo sobre o cdigo de marcao
existente e adicione qualquer cdigo de marcao novo
que precisar. Ajudamos um pouco destacando as reas que
precisam de alterao.
Aqui est a nossa soluo.

Aqui est o cdigo atualizado:

Aqui esto quatro


<!doctype html> O doctype linhas que alteramos
para tornar a nossa
<html> pgina HTML do
<head> Head First Lounge
<title>Head First Lounge</title> oficialmente HTML5.
<meta charset=utf-8"> a tag meta...
<link rel=stylesheet" href=lounge.css"> ... a tag link...
<script src=lounge.js"></script> ... e a tag de script...
</head>
<body>
<h1>Welcome to Head First Lounge</h1>
<p>
<img src="drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing <a href="elixirs.html">elixirs</a>,
conversation and maybe a game or two of Tap Tap Revolution.
Wireless access is always provided; BYOWS (Bring Your Own Web Server).
</p>
</body>
</html>

No acredita em ns?
Experimente http://
validator.w3.org/ e ver
ela validada como
HTML5. De verdade!

8 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 8 05/06/2014 16:17:11


conhecendo a HTML5

P: Como isto funciona nos navegadores antigos?


O novo doctype, meta e assim por diante... de
R: verdade, especialmente at que HTML5 seja
suportada 100%. Examinaremos estas duas questes
alguma forma os navegadores mais antigos neste captulo e por todo o livro.
trabalham com esta nova sintaxe?
P:
R:
Por que isto importa? Eu acabei de digitar
Sim, atravs de um pouco de inteligncia e sorte. uma pgina sem um doctype e tag meta e ela
Veja os atributos de tipo nas tags de link e script; faz funcionou bem. Por que eu preciso me preocupar
sentido eliminar este atributo com HTML5 porque CSS se isso est totalmente correto?
e JavaScript agora so os padres (e certamente so as
tecnologias default para definio de estilo e scripting). R: Os navegadores so timos ao desconsiderar
pequenos erros em arquivos HTML, porm, incluindo o
Todavia, acabou que os navegadores j supunham os
defaults de CSS e JavaScript. Assim, as estrelas se doctype e tags meta corretos, voc assegurar que os
alinharam e o novo padro de marcao j suportado navegadores saibam exatamente o que quer, em vez
nos navegadores h anos. O mesmo verdade sobre o de terem de imaginar. Alm disso, eles usaro o modo
doctype e a tag meta. padro, que o que voc quer. Lembre-se de que o

P: E o novo doctype? Ele parece simples demais


agora; ele nem tem uma verso do DTD.
modo padro aquele no qual o navegador supe que
voc est escrevendo em HTML em conformidade com
um padro, ento, usa essas regras para interpretar

R: Sim, parece um pouco mgico que, aps anos de


uso de doctypes complexos, agora podemos simplific-
sua pgina. Se voc no especificar um doctype, alguns
navegadores podem entrar em um modo estranho e
supor que a sua pgina web escrita para navegadores
lo para estamos usando HTML. O que houve foi o mais antigos, quando o padro no era bem esse,
seguinte: HTML era baseada em um padro chamado interpretando-a de forma incorreta (ou supondo que
SGML, e esse padro requeria a forma complexa do tenha sido escrita incorretamente).
doctype e DTD. O novo padro se afastou de SGML como
uma forma de simplificar a linguagem HTML e torn-la P: O que aconteceu com XHTML? Parece que
h alguns anos era o futuro?
mais flexvel. Assim, no precisamos mais da forma
complexa. Alm disso, conforme dissemos anteriormente,
houve um pouco de sorte no fato de que quase todos R: Sim, era, mas a a flexibilidade venceu a sintaxe
estrita e, no processo, XHTML (XHTML 2, para ser
os navegadores s procuram HTML no doctype para
assegurar que esto analisando um documento HTML. preciso) morreu e HTML5 nasceu para ser mais tolerante

P: Voc estava brincando quanto a ela


nunca mais mudar novamente? Eu achava que
na forma pela qual as pessoas escrevem pginas web
(e na forma pela qual os navegadores as exibem). Dito
isso, no se preocupe, porque saber XHTML s ir lhe
o uso de verses era muito importante para os tornar um autor melhor de contedo HTML5 (e voc
navegadores. Por que no usar <!doctype apreciar HTML5 muito mais). A propsito, se voc
html5>? No significa que no haver uma realmente gostar de XML, ainda h uma forma de
HTML6. Certo? escrever seu HTML5 da forma estrita. Falaremos mais

R: O uso do doctype evoluiu com os desenvolvedores


de navegadores usando-o para fazer com que estes
sobre isso posteriormente...

P: O que UTF-8?
renderizassem as coisas no seu prprio modo padro.
Agora que temos um padro mais real, o doctype de R: UTF-8 uma codificao de caracteres que
possui suporte para muitos alfabetos, incluindo no
HTML5 informa o navegador que este documento
HTML padro, seja da verso 5, 6 ou qual for. ocidentais. Voc provavelmente j viu outros conjuntos

P: Bem, suponho que diferentes navegadores


tero capacidades diferentes em um determinado
de caracteres sendo usados, mas UTF-8 est sendo
promovido como o novo padro. bem mais curto e fcil
de lembrar do que as codificaes anteriores
momento. Como lido com isso? de caracteres.

voc est aqui 9

PFCG_HeadFirstHTML5Prog.indb 9 05/06/2014 16:17:11


o que voc deveria saber

No esperamos que voc j conhea HTML5, ainda.


Se voc nunca viu HTML5 antes, no tem problema,
mas j deve ter trabalhado com HTML, e h alguns
fundamentos que deve conhecer sobre elementos, tags,
atributos, aninhamento, a diferena entre marcao
semntica e adio de estilo, e assim por diante.
Se voc no estiver familiarizado com tudo isso,
faremos uma pequena sugesto (e uma propaganda
sem-vergonha): h outro livro que precede este, Use
a Cabea! HTML com CSS e XHTML - 2 Edio, e voc
deveria l-lo. Se j estiver um pouco familiarizado com
linguagens de marcao, talvez queira l-lo por cima ou
us-lo como referncia enquanto l este livro.

Tambm inclumos um pequeno


guia da marcao HTML5 e
CSS no apndice. Se voc s
quiser uma viso geral rpida
sobre as novas adies, d uma
lida nelas no final do livro.

10 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 10 05/06/2014 16:17:12


conhecendo a HTML5

HTML5 Exposto: Confisses da verso mais nova de


A entrevista desta semana:
HTML Confisses da verso mais nova de HTML
Use a Cabea: Bem-vinda, HTML5. Toda a web est falando sobre voc. Para ns, voc se parece
muito com a HTML 4. Por que todos esto to entusiasmados?
HTML5: Todos esto entusiasmados porque estou possibilitando uma nova gerao de aplicativos e
experincias web.
Use a Cabea: Certo, mas por que HTML 4 ou at mesmo a promessa de XHTML no fizeram isso?
HTML5: XHTML 2 ficou em um beco sem sada. Todos que escreviam pginas web reais a detestaram.
XHTML reinventou a forma pela qual escrevemos marcao para uma pgina web e teria tornado
obsoletas todas as pginas que j estavam l. Eu disse Ei, espere um minuto, posso fazer coisas novas
e adotar tudo o que j existe l. Quero dizer, se algo funciona, por que reinventar a roda? Esta a
minha filosofia.
Use a Cabea: Parece estar funcionando, mas, voc sabe, alguns dos caras da padronizao ainda
esto dizendo que a web ficaria melhor seguindo seus padres puros.
HTML5: Sabe, eu no me importo. Eu ouo as pessoas por a escrevendo pginas web reais
como elas esto me usando e como eu posso ajudar? Em segundo lugar, na minha lista esto os
desenvolvedores criando os navegadores web. Em ltimo lugar na minha lista, esto os caras da
padronizao. Eu os ouvirei, mas no se isso discordar do que os verdadeiros usurios esto fazendo.
Use a Cabea: Por que no?
HTML5: Porque, se os usurios e os criadores de navegadores discordarem dos caras da padronizao,
este ser um ponto irrelevante. Felizmente as pessoas que trabalham na especificao HTML5
concordam totalmente comigo, e esta a nossa filosofia.
Use a Cabea: Voltando verso anterior de HTML, voc disse que um superconjunto de HTML
4.01. Isto significa que voc tem compatibilidade retroativa, certo? Quer dizer que teremos que
continuar lidando com todos os projetos ruins do passado?
HTML5: Prometo que farei o melhor possvel para lidar com qualquer coisa do passado que seja
jogada em mim. Isso no significa, porm, que esta seja a forma de me tratar. Eu quero que os autores
de pginas web sejam treinados no padro mais recente e me usem da melhor maneira possvel. Desta
forma, eles podero realmente me levar at os meus limites. De qualquer forma, exibirei uma pgina
antiga da melhor forma que puder, se no estiver atualizada.
Use a Cabea: Minha prxima pergunta ...
HTML5: Espere um pouco! Com todas essas perguntas sobre o meu passado, no estamos falando
sobre o que importante. No que diz respeito minha marcao, minha misso pessoal adotar a web
como ela , adicionar alguns elementos estruturados novos que tornem mais fcil a vida dos autores
web e auxiliar todos os implementadores de navegadores a suportar semntica consistente em torno
da minha marcao. Estou aqui realmente para mostrar minha nova proposta: aplicativos web...
Use a Cabea: ... Desculpa, HTML5, s temos tempo para isto. Obrigado. Certamente falaremos
sobre qualquer coisa que voc queira na prxima entrevista.
HTML5: Argh, eu odeio quando isso acontece!!!

voc est aqui 11

PFCG_HeadFirstHTML5Prog.indb 11 05/06/2014 16:17:12


o panorama html5

A VERDADEIRA HTML5, por favor, levante-se ...


Ok, voc nos aguentou com humor na stira do HTML5-o-Mtico e temos certeza que
j imaginou que h muito mais em HTML5 do que isso. O que se diz que HTML5
remove a necessidade de plugins, pode ser usada para tudo, desde pginas simples
at jogos do tipo Quake e uma cobertura para sobremesas. HTML5 parece ser algo
diferente para cada pessoa...

HTML5 tem a ver com


multimdia, se livrar de
plugins e usar o novo No, tem a ver
suporte nativo para udio mais com marcao
e vdeo. descritiva.

Na verdade, tem a ver com aplicaes ricas


na internet. Em vez de criar aplicaes com
plugins como o Flash, agora posso usar canvas,
transforms e JavaScript para fazer interfaces
e animaes interessantes.

12 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 12 05/06/2014 16:17:12


conhecendo a HTML5

O interessante em HTML5 o
armazenamento e funcionalidade
de cache no lado cliente. Voc pode
dizer acesso offline web?

Estou entusiasmado
porque posso usar web
workers para tornar
JavaScript mais eficiente
e minha pgina parecer
mais responsiva.

Tambm h muita coisa nova


em CSS que podemos usar em
HTML5. Seletores avanados,
animaes e sim sombras!

No esquea dos
dispositivos mveis. Quero
poder escrever pginas web
que saibam onde estou.

A boa notcia que HTML5 todas essas coisas. Quando as


pessoas falam em HTML5, querem dizer uma famlia de tecnologias
que, quando combinadas, lhe do uma nova palheta para criar
pginas e aplicativos web.
voc est aqui 13

PFCG_HeadFirstHTML5Prog.indb 13 05/06/2014 16:17:13


como funciona o html5

Como HTML5 realmente funciona...


Voc encontra
Ento ns dissemos que HTML5 constituda por uma famlia de um belo guia
tecnologias, mas o que isso significa? Bem, voc j sabe que existe Webville da nova
a marcao HTML por si s, que se expandiu para incluir alguns marcao HTML5
elementos novos; tambm h muitos acrscimos a CSS e CSS3 que lhe e propriedades
do mais poder ainda para definir o estilo das suas pginas. Depois, CSS3 no apndice.
h o turbo charger: JavaScript, e um conjunto novo de APIs JavaScript
que esto disponveis para voc.
Vamos examinar o segundo plano e ver como tudo isso se junta:
2 Quando o navegador carrega sua
O navegador carrega um documento, pgina, tambm cria um modelo
1
que inclui marcao escrita em HTML do seu documento interno que
e estilo escrito em CSS. contm todos os elementos da
sua marcao HTML.

html

head body

title script h1 h2 p

em

aqui que fica ... chamamos esta rvore de


interessante: para cada Document Object Model ou
elemento da sua HTML, o DOM. voc ver muito mais
o navegador cria um DOM neste livro porque ele
objeto que o representa desempenha um papel vital no
e o coloca em uma modo pelo qual adicionamos
estrutura de rvore com comportamento a pginas com
todos os outros elementos. JavaScript (chegaremos l em
breve, no Captulo 2).
O estilo da pgina (se houver algum)
vem de CSS3, que foi expandido de
CSS2 para incluir muitos idiomas
comuns que esto em uso pela web
(como sombras e bordas arredondadas).
s, como voc
Com HTML5, a marcao tem algumas melhnsoria elem entos
viu nas tags do elemento <head>, e h algu
emo s algu ns nest e livro).
adicionais que voc pode usar (ver

14 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 14 05/06/2014 16:17:13


conhecendo a HTML5

Nos
3 Enquanto o navegador est
carregando sua pgina, tambm est Bastidores
carregando seu cdigo JavaScript,
que geralmente comea a ser
executado apenas depois que a
pgina carregada.
Usando JavaScript, voc pode interagir
com sua pgina manipulando o DOM, reagir
a eventos gerados pelo usurio ou pelo
navegador, ou usar todas as suas novas APIs.

JavaScript interage com sua


pgina atravs do DOM.

4 As APIs lhe do acesso a udio,


APIs, tambm conhecidas
vdeo, desenhos em 2D no canvas,
como Application Programming
armazenamento local e outras timas
Interfaces, expem um
tecnologias necessrias para criar aplicativos.
conjunto de objetos, mtodos
Lembre-se de que, para usar todas estas
e propriedades que podemos
APIs, precisamos de JavaScript.
usar para acessar toda
a funcionalidade destas
tecnologias. Examinaremos
muitas dessas APIs neste livro.

Canvas Vdeo
Conhea as
APIs JavaScript
Arma-
Cache zenamento
Local
udio
Sockets Offline

Web Arrastar
Workers & Geolocalizao
Formulrios Soltar

voc est aqui 15

PFCG_HeadFirstHTML5Prog.indb 15 05/06/2014 16:17:14


membros da famlia html5

Quem Faz o Qu?

J falamos tanto sobre a famlia de tecnologias que achamos que elas so... bem, uma
famlia. Ocorre que ainda no a conhecemos bem. Ento, ser que no est na hora? Voc
encontrar a maior parte da famlia abaixo. V em frente e socialize-se, veja se consegue
descobrir quem quem. Ns nos adiantamos e j descobrimos uma para voc. No se
preocupe. Sabemos que este o seu primeiro encontro com os membros da famlia HTML5,
ento as respostas esto no final do captulo.

Usando-me, voc pode desenhar direto na sua pgina


CSS3 web. Comigo, voc consegue desenhar texto, imagens,
retas, crculos, retngulos, padres e gradientes.

Voc talvez j tenha me usado em HTML 4 para digitar


Web Workers informaes, mas estou melhor ainda em HTML5.
Posso requerer que voc preencha todos os campos
e posso verificar mais facilmente se voc digitou um
e-mail, URL ou nmero de telefone onde deveria.
Formulrios
Voc precisava de um plugin para ns, mas agora
somos membros de primeira classe da famlia de
elementos HTML. Quer assistir ou ouvir algo?
Aplicativos Web Offline Precisa de ns.
Estamos aqui para ajudar com a estrutura e significado
semntico da sua pgina, incluindo novas formas de
criar sees, cabealhos, rodaps e navegao.
udio e Vdeo
Sou o mais estiloso da famlia. Voc provavelmente
j me usou antes, mas sabia que agora posso animar
seus elementos, dar a eles bordas arredondadas e at
Nova Marcao mesmo sombras?
Use-me como um pouco de armazenamento local no
navegador de cada usurio. Precisa armazenar novas
preferncias, alguns itens de carrinhos de compras, ou
talvez at mesmo um grande cache para aumentar a
Armazenamento eficincia? Eu sou a sua API.
Local Precisa de aplicativos que funcionem mesmo quando
no estiver conectado rede? Posso ajudar.

Canvas Sou a API que pode lhe informar onde voc est, e me
saio bem com o Google Maps.

Voc ir me querer sempre que precisar que diversos


Geolocalizao scripts sejam executados concorrentemente e em
segundo plano, de modo que sua interface de usurio
continue responsiva.

16 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 16 05/06/2014 16:17:15


conhecendo a HTML5

SUA MISSO...
Sua Primeira Misso: Reconhecimento de Navegadores
... se voc aceit-la, fazer o reconhecimento de todos os navegadores
HTML. Temos certeza de que voc ouviu que alguns navegadores esto
ar
prontos para HTML5 e que alguns no esto. Precisamos que voc veja qu
iv
od
bem de perto, porque a verdade est l fora... oc
as
o:
ht
ml
5

O:
M E I RA MISS RES
SUA P R I
N T O D E NAVEGADO DICA: V
C O N H E C I ME VEGADOR
ABAIXO (
RE XXXXXXXX ORTE EM
C A D A N A
IZADOS C
SUP
O M E SSAS
X. O ATUAL
ESCUBRA ATUAL DE TML, XX
SAIA E D O NVEL QUE EST UPPORT.H
X X X X L G U N S R ECURSOS
F H T M L 5 / BROWSERS O R . P ARA CADA
XXX
A R A E N C ONTRAR A D L Y S M A RT.COM/H E N T E D O NAVEGAD
A ELE SUA
AQUI P E
T T P : / /WWW.WIC
K
V E R S O MAIS REC S U P O R TADO, D
H R
COISAS: .CONSIDE
RE A A; SE FO RTA HTML
5
UMA MARC ELE SUPO
C U R S O , COLOQUE Q U A N T O X I M A M ISSO!
NAVEGADO
R/RE
J E T I V A SOBRE O P E G A R SUA PR
B T E
NOTA SU PIDAMEN
PRPRIA VENHA RA
A N D O R E TORNAR,
QU

vos Web
b
mento We

izao

ers

Aplicati
e
Web Work

in
Geolocal
Recurso

Armazena

Offl
Canvas
udio
Vdeo

r
Navegado

Firefox

Safari

Chrome

Mobile
WebKit

Dispositivos Opera
iOS e
IE 6, 7
Android
(entre IE 8
outros)
IE 9

voc est aqui 17

PFCG_HeadFirstHTML5Prog.indb 17 05/06/2014 16:17:15


reconhecimento de navegador

ar

SO:
qu

EIRA MIS
iv

DORES
od

P R I M
E NAVEGAssas respostas e as preen o em
chemos
oc
S U A O D
as
N T
o:
I M E
RECONHEC s no moment
ht

TrapaceamosAna em refletir oos que voc


ml
ev
5
s su a s d
SOLUO para 2015 . o, mas acham
o o livr
que estiver levendr o futuro.
gostaria de

vos Web
b
mento We

izao

ers

Aplicati
Offline
Web Work
Geolocal
Recurso

Armazena
Canvas
udio
Vdeo

r
Navegado

Firefox

Safari

Chrome

Mobile
Webkit

Opera

IE 6, 7

IE 8

IE 9

Embora demore um pouco at que o padro esteja a pleno vapor, voc


usar navegadores que suportam integralmente HTML5 muito antes
disso. Na verdade, em navegadores modernos, muitos recursos j so
suportados. por isso que uma boa ideia comear a usar HTML5
agora. Alm disso, comeando agora, voc poder impressionar seus
amigos e colegas de trabalho com todo o seu conhecimento de ponta.

E ganhar aquele aumento em breve!

18 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 18 05/06/2014 16:17:16


conhecendo a HTML5

Espere um pouco. Se eu comear a usar HTML5


agora, todos os usurios de navegadores mais
antigos no ficaro alienados? Ou terei que
escrever duas verses da minha pgina web,
uma para navegadores que suportem HTML5 e
uma para navegadores mais antigos?

Espere um pouco, respire fundo.


Em primeiro lugar, HTML5 um superconjunto de
HTML e, assim, seu objetivo deve ser escrever apenas
uma pgina HTML. Voc est certo quanto ao fato de
que os recursos suportados por um navegador podem
ser diferentes, dependendo do quo atualizado o
navegador est e como seus usurios o atualizam.
Assim, precisamos ter em mente que alguns dos
recursos mais novos de HTML5 podem no ser
suportados, o que nos leva de volta questo de como
lidar com isso.
Um dos princpios de projeto por trs de HTML5
permitir s suas pginas degradarem-se sem rupturas
isto significa que, caso o navegador do seu usurio no
suporte algum recurso novo, voc deve fornecer uma
alternativa significativa. Neste livro, mostraremos a
voc como escrever suas pginas para fazer isso.
A boa notcia que todos os navegadores esto indo na
direo do padro HTML5 e tecnologias relacionadas
(at mesmo os navegadores de dispositivos mveis)
e assim, com o tempo, a degradao sem rupturas
ser mais uma exceo do que a regra (embora voc
sempre v querer fazer o que pode para dar aos seus
usurios uma experincia significativa, no importa o
navegador que estejam usando).

voc est aqui 19

PFCG_HeadFirstHTML5Prog.indb 19 05/06/2014 16:17:16


perguntas frequentes sobre o html5

P: Ouvi que o padro HTML5 no ser uma


recomendao final at 2022! verdade? Se for, por
P: Chrome, Safari, Firefox e muitos navegadores de
dispositivos mveis... o mundo no est ficando pior?
que estamos nos importando? Como asseguraremos que nossas pginas funcionem em

R: O W3C o corpo de padronizao que recomenda


formalmente o padro HTML5, e o que voc precisa saber
todos esses navegadores?

R: Embora haja muita competio saudvel no mercado de


sobre o W3C que so conservadores, to conservadores que navegadores (desktop e dispositivos mveis), na verdade, muitos
prefeririam esperar at que algumas geraes de navegadores deles so baseados em alguns mecanismos HTML comuns. Por
HTML5 tivessem surgido e ido embora antes de darem suas exemplo, o Chrome, o Safari e os navegadores de dispositivos
assinaturas. No h problema: o padro deve ser terminado mveis no Android e iPhone so todos baseados no WebKit, um
nos prximos anos e os criadores de navegadores esto no mecanismo de navegador open source. Assim, na sua maioria, suas
caminho de implement-lo. Desta forma, sim, pode demorar pginas funcionaro em mltiplos navegadores sem muito esforo.
um pouco at que HTML5 seja uma recomendao final,
mas deve ser um padro estvel em 2014, e para todos os P: Por que no simplesmente usar Flash para resolver
questes de mltiplos navegadores?
propsitos prticos voc deve iniciar-se agora em HTML5.

P: O que acontece aps HTML5 ganhar sua


verso final?
R: Flash uma tima ferramenta para muitas aplicaes e
certamente no desktop difundido em sistemas operacionais

R: HTML6? No temos ideia, mas talvez o que quer


que seja vir com carros voadores, roupas com foguetes
e navegadores. HTML5 e sua famlia de tecnologias esto
tentando permitir que voc faa com padres abertos muitas
das mesmas coisas que Flash pode fazer. Assim, que caminho
e jantar em uma plula. Lembre-se de que, mesmo se voc deveria tomar? Uma coisa para se pensar a quantidade
adotarmos HTML6, o doctype no mudar. Supondo que o de investimento indo para tecnologias HTML5 dentro do Google,
W3C mantenha sua promessa e verses futuras de HTML Apple, Microsoft e outros. A longo prazo, HTML5 ser um player
permaneam compatveis com verses mais antigas, imenso, e no espao mvel j . Assim, embora a escolha seja
estaremos em boa forma para o que quer que venha a seguir. sua, e temos certeza de que ambos vo existir por muito tempo,
a indstria est indo na direo de padres abertos.

Arqueologia
HTML
Fizemos algumas escavaes e descobrimos um cdigo inserido em
uma pgina HTML. Esperamos que voc possa nos ajudar a entend-lo
para sabermos o que significa. No se preocupe; no esperamos que voc
entenda este cdigo. Estamos apenas tentando esquentar seu crebro
com um pouco de argumentao dedutiva...
<script>
var walksLike = "duck";
var soundsLike = document.getElementById("soundslike");
if (walksLike == "dog") { Uma dica: o documento
soundsLike.innerHTML = "Woof! Woof!"; representa a pgina
} else if (walksLike == "duck") { HTML inteira, e
soundsLike.innerHTML = "Quack, Quack";
} else {
getElementById
soundsLike.innerHTML = "Crickets..."; provavelmente tenha
} a ver com ids e
</script> elementos HTML.
20 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 20 05/06/2014 16:17:17


conhecendo a HTML5

Estou dizendo, se voc quiser


mesmo criar aplicativos web usando
HTML5, tem algo que voc precisa
saber sobre JavaScript...

Temos que conversar.


Se voc est conosco desde o Use a Cabea! HTML com CSS e XHTML (ou
leu o livro at aqui sem pensar em us-lo para acender a lareira), sabemos
que provavelmente tenha uma boa compreenso do uso de linguagens
de marcao e folhas de estilo para criar pginas web de tima aparncia.
Conhecer essas duas tecnologias pode levar voc longe...
Com HTML5, porm, as coisas esto mudando: pginas web esto se tornando
experincias ricas (e aplicativos completos), que tm comportamento, so
atualizadas durante a execuo e interagem com o usurio. Criar estes tipos
de pginas requer um pouco de programao e, se voc for escrever cdigo
para o navegador, h apenas um jogo na cidade: JavaScript. Ns no podemos
pensar em
Agora, se voc j programou ou escreveu scripts simples, estar bem: uma melhor ou
JavaScript (apesar de alguns rumores) uma linguagem fantstica e lhe mais divertida
guiaremos por tudo o que voc precisa saber para escrever os aplicativos deste maneira de
livro. Se voc no tiver programado antes, faremos tudo que pudermos para aprender a
lhe ajudar pelo caminho. Em qualquer caso, um dos grandes benefcios de programar!
JavaScript o quo acessvel ela para programadores novatos.
Ento, o que faremos agora? Vamos apresentar rapidamente um pouco
de JavaScript e depois mergulharemos realmente fundo no Captulo 2. Na
verdade, por enquanto, no se preocupe demais com cada detalhe s
queremos que voc sinta um gostinho de JavaScript.

voc est aqui 21

PFCG_HeadFirstHTML5Prog.indb 21 05/06/2014 16:17:18


o que o javascript pode fazer

O que voc pode fazer com JavaScript?


JavaScript abre um novo universo inteiro de
expresso e funcionalidade para suas pginas Interaja com suas pginas de
web. Vejamos apenas algumas coisas que voc novas maneiras que funcionem
pode querer fazer com JavaScript e HTML5... para o desktop e dispositivos
mveis.
Com HTML5 e JavaScript, voc pode criar
uma superfcie 2D desenhvel na sua
pgina, sem necessidade de plugins.

Faa com que suas


pginas percebam a
localizao de seus
usurios para mostrar a
eles o que est prximo,
lev-los a uma caa
ao tesouro, dar-lhes
coordenadas ou juntar
pessoas com interesses
comuns na mesma rea. Use web workers para turbinar seu cdigo
JavaScript e executar algumas computaes
complexas ou tornar seu aplicativo mais
responsivo. Voc pode at fazer um uso melhor
do processador multicore do seu usurio!
Acesse qualquer servio
web e traga os dados
para seu aplicativo,
quase em tempo real.

No h necessidade
Coloque dados
de plugins para
em cache
executar vdeos.
localmente usan
do
armazenamento Crie seus prprios
no navegador pa controles de
ra
acelerar aplicativo execuo de vdeo
s
mveis. usando HTML e
JavaScript.

Integre suas pginas com


o Google Maps e at deixe
seus usurios registrarem sua
movimentao em tempo real.

22 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 22 05/06/2014 16:17:20


conhecendo a HTML5

Diga adeus aos cookies


de navegadores e use
o armazenamento local
com base no navegador.

Usando JavaScript, voc pod


e
armazenar localmente mu
itas
preferncias e dados para
seus
usurios, no navegador, e
at
disponibiliz-los para acesso
offline.

O navegador claramente no mais


apenas para documentos tediosos.
Com JavaScript, voc pode
desenhar pixels diretamente nele.

Turbine seus
formulrios
Construa experincias
com JavaScript
em vdeo completas que
para fornecer
al. incorporem vdeos de
interatividade re
modos novos.
Use o poder de JavaScript
para criar processamento
completo de vdeo no seu
navegador. Crie efeitos
especiais e at manipule
diretamente pixels de vdeo.

Voc provavelmente deve estar


pensando que pesquisamos
a web exaustivamente para
descobrir os exemplos mais
interessantes que podamos,
certo? No. Tudo o que fizemos
foi pegar as capturas de telas
dos exemplos do resto deste
livro. No interessante? Ento
agora que voc est em Webville,
est na hora de aprender o
jargo local: JavaScript. Vamos
l comear.
voc est aqui 23

PFCG_HeadFirstHTML5Prog.indb 23 05/06/2014 16:17:22


conhecendo javascript

A entrevista desta semana:


Confisses de uma Linguagem de Scripting

Use a Cabea: Bem-vinda, JavaScript. Ficamos felizes por voc ter conseguido nos inserir
na sua agenda ocupada. Deixe-nos fazer uma colocao: HTML5 est se tornando uma
celebridade o que voc acha disso?
JavaScript: No sou algum que busca o estrelato, sou um tipo de pessoa que gosta de ficar
em segundo plano. Ou seja, muito do crdito que vai para o HTML5 deveria ser meu.
Use a Cabea: Por que voc diz isso?
JavaScript: H uma famlia inteira de tecnologias que fazem o trabalho HTML5, como
o canvas 2D, armazenamento local, web workers, esse tipo de coisa. A verdade que eu,
JavaScript, sou necessria para fazer uso delas. Certamente HTML5 lhe d um local para
juntar e apresentar tudo, porm, sem mim, voc no teria uma experincia interessante.
Est tudo bem, mais poder para o HTML5, vou continuar simplesmente fazendo meu
trabalho.
Use a Cabea: Qual o seu conselho para os novos autores de HTML5?
JavaScript: fcil. Se voc realmente quiser dominar HTML5, gaste seu tempo em
JavaScript e em todas as bibliotecas que trabalham com ela.
Use a Cabea: Sabe, voc nem sempre teve a melhor reputao. Citarei uma resenha de
1998: JavaScript no mximo uma linguagem de scripting fraca e feita pela metade.
JavaScript: Isso magoa. Posso no ter comeado a vida no ambiente claro e acadmico
de muitas linguagens de programao, mas me tornei uma das mais amplamente usadas
de todos os tempos, de modo que no me diminuiria to rapidamente. No apenas isso,
mas enormes quantidades de recursos tm sido colocados para me tornar robusta e
extremamente rpida. Estou pelo menos 100 vezes mais rpida do que h uma dcada.
Use a Cabea: Isto impressionante.
JavaScript: Ah, e caso voc no tenha ouvido, o pessoal da padronizao acabou de me
contar que agora sou a linguagem de scripting padro para HTML5. Assim, estou aqui para
ficar. Na verdade, voc nem tem que dizer mais JavaScript na sua tag <script>. Ento,
eles podem ter me chamado de fraca em 1998, mas onde esto agora jScript, VBScript, Java
Applets e todas as tentativas fracassadas de linguagens de navegadores?
Use a Cabea: Bom, certamente parece que voc a chave para a criao de timas
experincias em HTML5. Voc tem a reputao de ser uma linguagem confusa.
JavaScript: Sou uma linguagem muito poderosa, apesar de alguns rumores, de modo que
voc realmente deve gastar algum tempo aprendendo a me usar bem. Por outro lado, sou
popular porque sou muito fcil de comear a usar. O melhor de ambos os mundos, no acha?
Use a Cabea: Parece ser isso mesmo! Obrigado, JavaScript, por ter vindo aqui hoje.
JavaScript: O prazer foi meu, estou s ordens.

24 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 24 05/06/2014 16:17:22


conhecendo a HTML5

Escrevendo JavaScript Seriamente


Com toda essa conversa sobre JavaScript, apostamos
que voc est pronto para ver do que se trata. Eles
no chamam isto Use a Cabea sem motivo. Temos um
aplicativo de negcio super srio abaixo, que mostraremos
para voc. Por enquanto, comece examinando o cdigo
para ter uma ideia sobre ele. Escreva o que voc acha que
cada linha faz. No se preocupe, no esperamos que voc
j entenda tudo, mas apostamos que voc consegue fazer
algumas suposies realmente boas sobre o que o cdigo
faz. Quando tiver terminado, vire a pgina e veja o quo
perto voc ficou ...
Escreva suas
respostas aqui.
a
Substitua pela a.su
var drink = "Energy Drink";
bebida f av or it
var lyrics = "";
var cans = 99;

while (cans > 0) {


lyrics = lyrics + cans + " cans of "
+ drink + " on the wall <br>";
lyrics = lyrics + cans + " cans of "
+ drink + "<br>";
lyrics = lyrics + "Take one down, pass it around,<br>";

if (cans > 1) {
lyrics = lyrics + (cans-1) + " cans of "
+ drink + " on the wall <br>";
}

else {
lyrics = lyrics + "No more cans of "
+ drink + " on the wall <br>";
}
cans = cans - 1;
}
document.write(lyrics);

voc est aqui 25

PFCG_HeadFirstHTML5Prog.indb 25 05/06/2014 16:17:23


seu primeiro javascript

Escrevendo JavaScript Seriamente Revisto...


Passe pelo cdigo novamente e veja se voc acertou. Neste
momento, voc deve ter uma ideia sobre o cdigo; passaremos
por tudo detalhadamente em breve.

var drink = "Energy Drink"; Declare uma varivel e atribua a


ela um valor de Energy Drink.
var lyrics = ""; Declare outra varivel e atribua a
ela um valor de string vazio.
var cans = 99; Declare outra varivel e atribua
a ela um valor numrico, 99.
Este um loop while. Ele diz que,
enquanto o nmero de latas for
while (cans > 0) {
maior que 0, faa tudo entre as
chaves. Pare quando no houver
latas sobrando.
lyrics = lyrics + cans + " cans of " Adicione o prximo verso da msica
varivel lyrics, usando o operador
de concatenao de strings +.
+ drink + " on the wall <br>";
Termine a linha com uma quebra
lyrics = lyrics + cans + " cans of " de linha HTML.
Faa isso novamente afinal
+ drink + "<br>"; assim que uma msica , certo?
lyrics = lyrics + "Take one down, pass it around,<br>";
Adicione o prximo verso, usando
concatenao novamente.
if (cans > 1) {
Se ainda houver uma lata
lyrics = lyrics + (cans-1) + " cans of " sobrando (ou seja, o valor de
latas maior que 1)...
+ drink + " on the wall <br>";
... adicione a ltima linha.
}
else {

lyrics = lyrics + "No more cans of "


caso contrrio, no h mais latas
sobrando...
+ drink + " on the wall <br>"; ... ento, adicione No h mais latas
}
no final da letra da msica.
cans = cans - 1;
} Reduza para 1 o nmero de latas

document.write(lyrics);
Armazenamos todos os versos para
a msica na varivel lyrics, ento
agora fazemos com que a pgina
web a escreva, o que significa
apenas que a string adicionada
pgina de forma que voc possa
ver a msica.

26 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 26 05/06/2014 16:17:23


conhecendo a HTML5

Um Test Drive Voc no achou que faria todo esse trabalho pesado no
exerccio sem experimentar JavaScript, pensou? O que voc
precisar fazer pegar o cdigo da pgina anterior e digit-lo
(junto com o cdigo HTML abaixo) em um arquivo (como
index.html) e ento carreg-lo no seu navegador. Voc ver
nossos resultados abaixo:
Lembre-se de que para baixar o
Digite isto. cdigo e arquivos de exemplo deste
<!doctype html> livro, por favor visite http://
<html> wickedlysmart.com/hfhtml5.
<head>
<meta charset="utf-8">
<title>My First JavaScript</title>
</head>
As tags <script> e </script> envolvem o cdigo
<body> JavaScript. Elas informam pgina que o que h
<script> nelas JavaScript, no HTML.
E digite o cdigo JavaScript da
pgina anterior aqui.
</script>
</body>
</html>

Aqui est a execuo de teste deste


cdigo. O cdigo cria a letra inteira
das 99 garrafas latas de cerveja
energtico no muro e escreve o texto
no documento do navegador.

voc est aqui 27

PFCG_HeadFirstHTML5Prog.indb 27 05/06/2014 16:17:24


mais pontos delicados sobre o html5

P: Por que no havia nada no corpo desse


cdigo HTML exceto o script?
R: Esta uma tima pergunta, porque estamos
usando os termos livremente. No h diferena tcnica

R: Decidimos comear com um corpo vazio porque


criamos todo o contedo desta pgina usando cdigo
entre os dois; em outras palavras, no h nada especial
que voc faa para transformar uma pgina escrita em
HTML, JavaScript e/ou CSS em um aplicativo web. A
em JavaScript, mas, certamente, poderamos ter apenas distino mais de perspectiva.
digitado a letra da msica diretamente no elemento do
Quando temos uma pgina que est agindo mais como
corpo (e seria muita digitao) ou poderamos fazer o
um aplicativo do que apenas um documento esttico,
cdigo executar todo o trabalho rduo por ns (o que
ento comeamos a pensar nela como um aplicativo
fizemos) e depois fazer o cdigo inserir a letra na pgina
web e menos como uma pgina web. Pensamos em
com document.write.
aplicativos como tendo um nmero de qualidades, como
Tenha em mente que estamos apenas iniciando aqui; armazenando muitos estados, gerenciando interaes
gastaremos muito mais tempo neste livro vendo complexas com o usurio, exibindo dados atualizados
como podemos pegar uma pgina e preench-la dinmica e constantemente sem uma atualizao da
dinamicamente no seu contedo com cdigo. pgina, ou at mesmo executando tarefas ou clculos

P: Entendo que construmos a letra inteira da


msica, mas exatamente o que o document.write
mais complexos.

P: Ei, todo esse JavaScript timo, mas e CSS?


fez e como o texto apareceu no documento? Estou com vontade de aproveitar algumas das

R: Bom, document.write recebe uma string de texto


novidades de CSS3 sobre as quais tenho ouvido
para melhorar a aparncia das minhas pginas.
e a insere no documento; na verdade, ele coloca a string
exatamente onde a tag de script estiver localizada.
Assim, neste caso, document.write coloca a string direto
R: Sim, CSS percorreu um longo caminho e estamos
impressionados por funcionar to bem com HTML5.
no corpo da pgina. Embora este livro no seja sobre CSS3, voc pode ter
certeza de que aproveitaremos integralmente alguns
Voc ver em breve formas mais sofisticadas de alterar
dos seus novos recursos. Conforme voc talvez j saiba,
o texto de um documento ao vivo com JavaScript, mas
muitos dos truques que costumvamos fazer para
este exemplo deve lhe dar uma ideia de como o cdigo
adicionar bordas arredondadas, sombras com imagens
pode alterar dinamicamente uma pgina.
em HTML e animao simples com JavaScript, agora
P: Voc tem usado os termos pgina web e
aplicativo web; eles so duas coisas diferentes? O
podem ser feitos facilmente com CSS3.
Ento, sim, faremos uso do poder de CSS3 neste livro, e
que torna algo um aplicativo web? mostraremos quando estivermos fazendo isso.

28 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 28 05/06/2014 16:17:24


conhecendo a HTML5

Temos falado sobre um monte de


coisas, incluindo marcao HTML, APIs
JavaScript, uma famlia de tecnologias
e CSS3. O que exatamente HTML5?
No pode ser s pela marcao que todos
esto to entusiasmados...

Daremos a voc uma resposta no oficial:

HTML5
Markup + JavaScript APIs + CSS = Crazy Delicious

Voc v, quando a maioria das pessoas est falando


sobre a promessa de HTML5, o que querem dizer so
todas essas tecnologias combinadas. Ou seja, temos
marcao para criar a estrutura bsica das nossas
pginas, temos JavaScript junto com todas as suas APIs
para adicionar comportamento e nova funcionalidade,
e temos CSS para definir o estilo das nossas pginas
e, juntas, estas so as tecnologias que todos usaremos
para criar os aplicativos web do futuro.
Por que dissemos, ento, no oficial? Bom, h
pessoas que gostam de fazer distines estritas entre
estas tecnologias e a quais padres elas pertencem.
Isso bom e tem sua utilidade. Entretanto, o que
nos importa o seguinte: quais tecnologias esto
disponveis no navegador e elas esto prontas para
usarmos na criao de nossas pginas e aplicativos?
Ento, dizemos que HTML5 marcao + APIs
JavaScript + CSS e achamos que o que a maioria
das pessoas geralmente quer dizer quando fala sobre
HTML5 como uma tecnologia.

Se voc estiver realmente interessado em


como essas tecnologias se ajustam como um
conjunto de padres (e todos devemos estar),
ento ns o incentivamos a visitar w3.org
para obter mais informaes.

voc est aqui 29

PFCG_HeadFirstHTML5Prog.indb 29 05/06/2014 16:17:25


o que html5, na verdade

Parabns, voc terminou o Captulo


1 e escreveu seu primeiro HTML5!
Antes que voc corra para o prximo captulo, temos
E o seu primeiro
mais uma tarefa para voc assimilar tudo. Use os
cdigo JavaScript!
ms abaixo para preencher a frmula que resolve a
equao de o que HTML5?. Tome cuidado agora,
pois h algumas distraes misturadas pilha de ms.
Assim que voc tiver resolvido, descanse um pouco e
refresque-se antes de passar para o Captulo 2.

+ + =

JavaScript
HTML5 APIs Javascript
XML
CSS Canvas
Marcao
Videiras V Sr. Pibb
ermelhas XHTML Formulrios
CSS3
Geolocalizao
Vdeo
<script>
documento
udio
Armazenamento Local
Web Workers
Acesso Offline

Deliciosas Loucuras

30 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 30 05/06/2014 16:17:25


conhecendo a HTML5

Ponto de Bala

HTML5 a verso mais recente de HTML. Ela HTML5 introduz elementos que adicionam nova
introduz tags simplificadas, nova semntica semntica s suas pginas, dando a voc mais
e elementos de mdia, e se baseia em um opes para a criao da estrutura da pgina
conjunto de bibliotecas JavaScript que permite web do que tnhamos com HTML 4.01. No
aplicativos web. examinaremos essas opes neste livro, mas
temos um pequeno guia para elas no apndice.
XHTML no mais o padro para pginas
web. Os desenvolvedores e o W3C decidiram Muitos dos novos recursos em HTML5 requerem
continuar estendendo e melhorando a HTML. JavaScript para serem aproveitados ao mximo.
O doctype HTML5 novo e mais simples Usando JavaScript, voc pode interagir com o
suportado por navegadores mais antigos DOM o Document Object Model.
eles usam o modo padro quando veem
O DOM a representao interna do navegador
este doctype.
de uma pgina web. Usando JavaScript, voc
O atributo de tipo no mais necessrio na tag pode acessar e alterar elementos e adicionar
<script> ou em um link de stylesheet para CSS. novos elementos ao DOM.
JavaScript e CSS agora so os padres.
Uma API JavaScript uma Application
A tag <meta>, usada para especificar o conjunto Programming Interface. APIs possibilitam
de caracteres, foi simplificada para incluir controlar todos os aspectos de HTML5, como o
apenas a codificao dos caracteres. desenho 2D, execuo de vdeos e mais.
UTF-8 agora o conjunto padro de caracteres JavaScript uma das linguagens mais
em uso na web. populares do mundo. As implementaes de
JavaScript tm melhorado drasticamente nos
Fazer alteraes no doctype e tag <meta>
ltimos anos.
no estragar suas pginas em navegadores
mais antigos. Voc poder detectar se um novo recurso
suportado em um navegador e degradar
Os novos elementos de HTML5 so um
graciosamente a experincia em caso contrrio.
superconjunto de elementos HTML 4, o que
significa que pginas mais antigas continuaro CSS o padro de definio de estilos para
a funcionar em navegadores modernos. HTML5; muitas pessoas incluem CSS quando
usam o termo HTML5 para descrever a
O padro HTML5 no estar oficialmente
famlia de tecnologias usadas para criar
completo at 2014, mas a maioria dos
aplicativos web.
navegadores modernos o suportar muito antes
disso (muitos o suportam hoje!).

voc est aqui 31

PFCG_HeadFirstHTML5Prog.indb 31 05/06/2014 16:17:25


soluo de exerccio

Palavras cruzadas HTML5


hora de dar ao lado direito do seu crebro um
descanso e colocar o esquerdo ao trabalho. Todas estas
palavras so relacionadas a HTML e a este captulo.
1

4 5

8 9

10 11 12

13

14

15

Horizontais Verticais
4. Propaganda ___ tambm poderia ser 1. Use um loop _____ para imprimir versos
chamada de spam. de uma msica.
6. Queremos que nossas experincias web 2. A linguagem de scripting padro
degradem _____. de HTML5.
7. O padro de estilo oficial para HTML5. 3. Sua misso era _______de navegador.
10. Novos _____ em HTML adicionam 5. O poder real de HTML5 so as _____
semntica e estrutura. JavaScript.
13. Produto que limpa seu HTML5 em 8. A verso de HTML antes de HTML5.
trs etapas. 9. Recebeu uma carta de despedida.
14. JavaScript _____ vezes mais rpida do 11. Este atributo do link e tags de script no
que h uma dcada. mais necessrio em HTML5.
15. Muito mais simples do que a verso 12. A tag <___> informa ao navegador que o
HTML 4.01. que se segue JavaScript,
no HTML.
15. O ___ uma representao interna de
uma pgina web.
32 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 32 05/06/2014 16:17:26


conhecendo a HTML5

Exerccio Soluo

J falamos tanto sobre a famlia de tecnologias que achamos que elas so... bem, uma
famlia. No entanto, de novo, ainda no a conhecemos bem. Ento, ser que no est na hora?
Voc encontrar a maior parte da famlia abaixo. V em frente e socialize-se; veja se consegue
descobrir quem quem. Ns nos adiantamos e j descobrimos uma para voc. No se
preocupe, sabemos que este o seu primeiro encontro com os membros da famlia HTML5;
ento, aqui esto as respostas.
Usando-me, voc pode desenhar direto na sua pgina
CSS3 web. Comigo, voc consegue desenhar texto, imagens,
retas, crculos, retngulos, padres e gradientes.

Voc talvez j tenha me usado em HTML 4 para digitar


Web Workers informaes, mas estou melhor ainda em HTML5.
Posso requerer que voc preencha todos os campos
e posso verificar mais facilmente se voc digitou um
email, URL, ou nmero de telefone onde deveria.
Formulrios
Voc precisava de um plugin para ns, mas agora somos
membros de primeira classe da famlia de elementos
HTML. Quer assistir ou ouvir algo? Precisa de ns.
Aplicativos
Web Offline Estamos aqui para ajudar com a estrutura e significado
semntico da sua pgina, incluindo novas formas de
criar sees, cabealhos, rodaps e navegao.
udio e Vdeo
Sou o mais estiloso da famlia. Voc provavelmente
j me usou antes, mas sabia que agora posso animar
seus elementos, dar a eles bordas arredondadas e at
Nova Marcao mesmo sombras?
Use-me como um pouco de armazenamento local no
navegador de cada usurio. Precisa armazenar novas
preferncias, alguns itens de carrinhos de compras, ou
talvez at mesmo um grande cache para aumentar a
Armazenamento eficincia? Eu sou a sua API.
Local Precisa de aplicativos que funcionem mesmo quando
no estiver conectado rede? Posso ajudar.

Canvas Sou a API que pode lhe informar onde voc est, e me
saio bem com o Google Maps.

Voc ir me querer sempre que precisar que diversos


Geolocalizao scripts sejam executados concorrentemente e em
segundo plano, de modo que sua interface de usurio
continue responsiva.

voc est aqui 33

PFCG_HeadFirstHTML5Prog.indb 33 05/06/2014 16:17:26


soluo de exerccio

Palavras Cruzadas HTML5


Soluo
1
W
H
2
J I
3
A R L
4 5
V S E M - V E R G O N H A
A C P
6
S G R A C I O S A M E N T E I
7
C N C S S
8 9
R H H H
10 11 12
I T X E L E M E N T O S
P M T C Y C
13
H T M L O M A T I C P R
4 L M E I
14
1 0 0 E P
1 N T
T
15
D O C T Y P E
O
M

34 Captulo 1

PFCG_HeadFirstHTML5Prog.indb 34 05/06/2014 16:17:26


2 apresentando JavaScript e DOM

Um Pouco de Cdigo

JavaScript lhe levar a novos lugares. Voc j sabe


tudo sobre marcao HTML (conhecida como estrutura) e sabe
tudo sobre estilo CSS (conhecido como apresentao), mas ainda
est faltando o JavaScript (conhecido como comportamento). Se
tudo o que voc souber for relacionado estrutura e apresentao,
certamente poder criar algumas pginas com tima aparncia,
mas elas ainda sero apenas pginas. Quando voc adiciona
comportamento com JavaScript, pode criar uma experincia interativa
ou, melhor ainda, pode criar aplicativos web completos. Apronte-se
para adicionar a habilidade mais interessante e verstil ao seu kit de
ferramentas web: JavaScript e programao!
E, se voc precisar de
mais motivao, a mais
lucrativa tambm!
este um novo captulo 35

PFCG_HeadFirstHTML5Prog.indb 35 05/06/2014 16:17:27


como funciona o javascript

Como JavaScript funciona


Nosso objetivo escrever cdigo em JavaScript que seja
executado no navegador, quando sua pgina web for
carregada esse cdigo poderia responder a aes do
usurio, atualizar ou alterar a pgina, comunicar-se com
servios web e, de modo geral, tornar sua pgina mais
parecida com um aplicativo do que com um documento.
Vejamos como tudo isso funciona:

<html>
<head>
<script>
var x = 49;
</script>
<body>
<h1>My first JavaScript</
html
h1>
<p></p>
<script> head body
x = x + 2;
</script> title script h1 h2 p
</body>
</html>
Navegador em

(Browser)
Escrevendo Carregando Executando

1 2 3

Voc cria sua O navegador recupera JavaScript continua a


marcao HTML e seu e carrega sua pgina, ser executado, usando
cdigo em JavaScript analisando seu contedo o DOM para examinar
e os coloca em de cima para baixo. a pgina, alter-la,
arquivos, digamos, receber eventos da
Quando encontra
index.html e index.js mesma ou solicitar
JavaScript, analisa o
(ou podem ambos ir ao navegador que
cdigo e verifica se
no arquivo HTML). recupere outros dados
est correto, e, ento,
do servidor web.
o executa.
O navegador tambm
cria um modelo interno
da pgina HTML
chamado DOM.

html

head body

title script h1 h2 p

em

36 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 36 05/06/2014 16:17:28


javascript e o dom

O que voc pode fazer com JavaScript?


Assim que voc tiver uma pgina com um elemento looping
<script> (ou uma referncia a um arquivo JavaScript
separado), pode comear a codificar. JavaScript
condicio
uma linguagem de programao madura e s nais
voc pode fazer com ela quase qualquer demonstrativo
coisa que faria com outras linguagens, e at
mais, porque estamos programando dentro
de uma pgina web!
Voc pode mandar JavaScript:

1 criar um comando
Crie uma varivel e atribua valores,
adicione coisas, use a funcionalidade
interna de uma biblioteca JavaScript.
var temp = 98.6;
var beanCounter = 4;
var reallyCool = true;
var motto = "I Rule";
temp = (temp - 32) * 5 / 9;
motto = motto + " and so do you!";
var pos = Math.random();

2 fazer coisas mais de uma vez


Execute comandos repetidamente, tantas vezes quantas voc precisar.

while (beanCounter > 0) {


processBeans();
beanCounter = beanCounter - 1;
}

3 tomar decises
Escreva cdigo que seja condicional, dependendo do estado do seu aplicativo.

if (isReallyCool) {
invite = "You're invited!";
} else {
invite = "Sorry, we're at capacity.";
}

voc est aqui 37

PFCG_HeadFirstHTML5Prog.indb 37 05/06/2014 16:17:29


declarando variveis

Declarando uma varivel 2

2.0
Variveis armazenam coisas. Com JavaScript, elas podem

21
armazenar muitas coisas diferentes. Vamos ver algumas
dessas variveis que armazenam coisas: vencedores
Valor numrico inteiro.
var winners = 2;
Ou valor de ponto flutuante. pontoDeFuso

il r
Ev uto
var boilingPt = 212.0;
Ou strings de caracteres

o
var name = "Dr. Evil";
(chamamos apenas de strings).

D
var isEligible = false;
Ou um valor booleano, que

so
pode ser verdadeiro (true)

fal
ou falso (false). nome
Trs passos na criao de uma varivel
qualificado
1 3 2

var scoops = 10; Variveis so


contineres
1 O primeiro passo declarar sua varivel, neste caso, para armazenar
scoops (conchas). Perceba que JavaScript, diferentemente
de algumas linguagens, no precisa de um tipo para a valores. Variveis
varivel, ele simplesmente cria um continer genrico
que pode armazenar muitas coisas:
JavaScript no
tm tipos estritos,
Sou uma varivel pronta
para armazenar algo. de forma que
qualquer varivel
pode armazenar
scoops um nmero, uma
2 A seguir, precisamos de um valor para colocar na varivel. string ou um
Podemos especificar um valor de algumas maneiras:
Seu valor pode ser um literal,
valor booleano.
como um nmero ou uma string.
var scoops = 10;
Ou pode ser o resultado
de uma expresso.
var scoops = totalScoops / people;
var scoops = Math.random() * 10;
Ou usar uma das funes
das bibliotecas internas de
JavaScript, como um gerador
de nmeros aleatrios, para
criar um valor. Posteriormente,
veremos mais sobre isto e suas
prprias funes.
38 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 38 05/06/2014 16:17:30


javascript e o dom

3 Finalmente, temos uma varivel e um valor


(um valor literal, como 10, ou o resultado
da avaliao de uma expresso (como Diverso com a Sintaxe
totalScoops / people)) e tudo o
que precisamos fazer atribuir esse valor
varivel. Cada comando termina com um ponto-e-
-vrgula.
Ah, no estou mais x = x + 1;
indefinida, agora tenho Um comentrio de linha nica comea com
um valor prprio.
10 duas barras. Comentrios so apenas notas
para voc ou outros desenvolvedores sobre o
cdigo. Eles no so avaliados.
// Eu sou um comentrio
scoops Espaos em branco no contam (em quase
claro que assim que voc tiver uma varivel todos os lugares).
criada, poder alterar seu valor a qualquer x = 2233;
momento, ou at mesmo alter-la para um valor de
Coloque aspas duplas em torno das strings.
um tipo diferente. Aqui esto alguns exemplos:
Voc demais!
Podemos reinicializar scoops com Variveis so declaradas usando var e um
scoops = 5; outro valor inteiro.
Ou at mesmo usar a prpria nome. No necessrio informar um tipo,

scoops = scoops * 10; vari


vel em uma expresso diferentemente de outras linguagens.
que altere seu valor. Neste var width;

caso, scoops valer 50. No use aspas em valores booleanos true e


scoops = "Tired of being an integer"; false.
Ou podemos alterar o rockin = true;
scoops = null; valor e o tipo da varivel,
neste caso para uma Variveis no precisam receber um valor
string. Tenha cuidado, quando so declaradas:
var width;
isto pode causar grandes
H um valor em JavaScript problemas no seu cdigo se
chamado null, que significa voc estiver esperando que
valor nenhum. Veremos como a varivel seja um nmero. Veremos mais
isso usado posteriormente. sobre isso em breve...

P: Qual o valor da minha varivel quando escrevo: P: Tenho visto outras linguagens de programao em
que variveis so declaradas com um tipo, como int x
var vencedor;
R: Aps este comando ser executado, a varivel
vencedor receber um valor undefined (indefinido), que
ou String y. JavaScript no possui tipos?

R: JavaScript tem tipos, mas, ao contrrio de outras


outro valor e tipo JavaScript. Veremos onde e como usar isto linguagens que voc talvez tenha usado anteriormente, possui
posteriormente. tipagem dinmica, o que significa que voc no precisa
especificar um tipo, pois o interpretador JavaScript descobrir
que tipo usar quando seu cdigo estiver sendo executado.
voc est aqui 39

PFCG_HeadFirstHTML5Prog.indb 39 05/06/2014 16:17:31


nomeando variveis

Como dar nomes s suas variveis


Voc talvez esteja imaginando como escolher nomes para suas Nmeros, strings e booleanos
variveis. Se voc estiver acostumado a dar nomes a ids nos so todos conhecidos como
seus elementos HTML, achar as variveis muito semelhantes. tipos primitivos em JavaScript.
H apenas algumas regras para a criao de nomes. H uma outra coisa que voc
pode armazenar em uma
Regra #1: Comece suas variveis com uma varivel: um objeto. Falaremos
sobre objetos em breve, mas,
letra, um caractere de sublinhado ou um por enquanto, voc pode
sinal de cifro. pensar em um objeto como
sendo uma coleo de coisas,
Voc quer comear a conhecer bem a nomenclatura enquanto que um tipo primitivo
de variveis, no apenas as tornando significativas, mas apenas um que no pode ser
tambm usando uma letra (minscula ou maiscula), dividido em mais nada.
um caractere de sublinhado ou um cifro. Aqui esto
alguns exemplos:
Comea por nmero, var 3zip;
var thisIsNotAJoke; no bom.
var _myVariable; var %entage;
var $importantVar; Comea com smbolos var ~approx;
(% e ~) que no so
permitidos.
Faa isto ... no isto.

Regra #2: Depois voc pode usar qualquer nmero de


letras, dgitos numricos, sublinhados e cifres.
Continue usando letras, cifres e sublinhados para criar seu nome
de varivel. Aps o primeiro caractere, voc tambm pode colocar
nmeros, caso queira:

Contm um espao, o
var my3sons; que no permitido var zip code;
var cost$; Contm sinais -, +. var first-name;
var vitaminB12; No so permitidos var to+do;
e confundiro
Faa isto muito o JavaScript.
... no isto.

40 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 40 05/06/2014 16:17:31


javascript e o dom

Regra #3: Assegure-se de evitar todas as palavras reservadas de JavaScript


JavaScript contm um nmero de palavras que so reservadas, tais como if, while e for
(para citar apenas algumas), e JavaScript no to gentil para voc tentar usar estas palavras
reservadas para o nome de suas variveis. Aqui est uma lista de palavras reservadas do
JavaScript. Voc no precisa memoriz-las; vai desenvolver um senso do que elas so,
enquanto aprende JavaScript. Cada vez que ficar perplexo com a JavaScript reclamando de
como voc declarou suas variveis, pense, Hmm, esta palavra que estou tentando usar uma
palavra reservada?

abstract delete goto null throws


as do if package transient
boolean double implements private true
break else import protected try
byte enum in public typeof
case export instanceof return use
catch extends int short var
char false interface static void
class final is super volatile
continue finally long switch while
const float namespace synchronized with
debugger for native this
default function new throw
Evite estes nomes variveis

P: E se eu usasse uma palavra


reservada como parte do meu
P: JavaScript diferencia
maisculas de minsculas?
P: Entendo que JavaScript
pode atribuir um valor a uma
nome de varivel? Por exemplo, Em outras palavras, varivel a qualquer momento
eu posso ter uma varivel com minhavariavel e MinhaVariavel (nmero, string e assim por
o nome de ifOnly (ou seja, uma so a mesma coisa? diante). O que acontece, ento,
varivel que contenha a palavra
reservada if)? R: Se voc estiver acostumado
quando adiciono duas variveis e
uma numrica e a outra uma

R: Certamente pode, apenas no


a crie exatamente igual palavra
com a marcao HTML, pode
tambm estar com linguagens que
no diferenciam maisculas de
string de caracteres?

R: JavaScript tenta ser


reservada. Tambm bom escrever minsculas, afinal <head> e <HEAD> inteligente quanto converso
cdigo claro. Voc no deve usar so tratadas da mesma forma de tipos quando necessrio. Por
algo como elze, que pode ser pelo navegador. Com JavaScript, exemplo, se voc adicionar uma
confundido com else. entretanto, existe essa diferena e string a um nmero, ele geralmente
minhavariavel e MinhaVariavel so tenta converter o nmero para uma
duas variveis diferentes. string e concatenar as duas. Embora
em alguns casos isso seja timo,
s vezes no o que voc queria.
No esquea esta questo, porque
voltaremos em breve a este assunto.

voc est aqui 41

PFCG_HeadFirstHTML5Prog.indb 41 05/06/2014 16:17:31


nomeando variveis

O Guia da Webville para


uma Boa Nomenclatura
Voc tem muita flexibilidade na escolha dos seus nomes
de variveis, ento queremos lhe dar algumas dicas para
tornar sua nomenclatura mais fcil:

Escolha nomes que signifiquem algo.


Nomes de variveis como _m, r e foo podem significar algo para voc, mas
geralmente no so aprovados na Webville. Voc provavelmente no apenas os
esquecer com o tempo, como o seu cdigo ser muito mais legvel com nomes como
ngulo, pressoAtual e aprovado.

Use a primeira letra em maiscula ao criar nomes de variveis com mais


de uma palavra.
Em algum momento, voc ter de decidir como nomear uma varivel que representa,
digamos, um drago de duas cabeas com fogo. Como? Use as primeiras letras de
cada palavra em maisculas, excetuando a primeira:
dragoDeDuasCabeasComFogo. Esta uma formatao fcil, muito usada em
Webville e lhe d suficiente flexibilidade para criar um nome de varivel to
especfico quanto voc precisar. H outros esquemas tambm, mas este o mais
comumente usado (mesmo fora de JavaScript).
Use variveis que comecem com _ e $ apenas por um motivo
muito bom.
Variveis que comeam com $ geralmente so reservadas para bibliotecas
JavaScript e, embora alguns autores usem variveis comeando com _ por diversas
convenes, elas no so amplamente usadas e recomendamos que voc evite-as, a
menos que tenha um motivo muito bom (voc saber se tiver).

No se arrisque.
No se arrisque na sua nomenclatura de variveis; veremos mais algumas dicas para
isso posteriormente no livro, mas, por enquanto, seja claro, evite palavras reservadas
e sempre use var ao declarar uma varivel.

42 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 42 05/06/2014 16:17:32


javascript e o dom

Tornando-se Expressivo
J vimos alguns comandos em JavaScript que se parecem com

Um comando em JavaScript

scoops = scoops - 1;
Varivel Atribuio
Expresso
Examinemos, porm, mais de perto as expresses, como a deste
comando. Elas esto em todos os lugares em JavaScript, de modo
que importante conhecer os tipos de coisas que voc pode
expressar. Aqui esto alguns...

Voc pode escrever expresses


que resultem em nmeros...
Voc pode escrever Expresses booleanas
expresses que
Expresses numricas resultem em 2 > 3 startTi
me > no
valores booleanos tempF < 75 w
(9 / 5) * tempC + 32 verdadeiros ou
pet == "Duck" level == 4
x - 1 falsos (estas
so, obviamente,
) * 10
Math.random( expresses
2.123 + 3.2 booleanas).

... e voc pode


escrever expresses
que resultem em
strings. Expresses string

"super" + "cali" + youKnowTheRest

t"
p.inner
HTML H outros tipos de
+ "s
"March" + "2 1" expresses tambm; ns
phoneNumber.substring(0, 3) as veremos em breve.

Fique de olho nas expresses das prximas Outras Expresses


pginas (para no dizer do resto do livro) e ver function () {...}
como so usadas para calcular coisas, realizar
document.getElementById("pink")
tarefas repetidamente e tomar decises no seu
cdigo. new Array(10)

voc est aqui 43

PFCG_HeadFirstHTML5Prog.indb 43 05/06/2014 16:17:32


exerccios variveis

Expresse-se!
Voc viu os diferentes tipos de expresses Baseado no que voc sabe
que pode usar em JavaScript; agora hora de at agora sobre variveis,
colocar esse conhecimento para trabalhar na expresses e comandos em
JavaScript, veja se consegue
avaliao de algumas expresses. Verifique suas
descobrir qual destas so legais
respostas no final do captulo.
e quais poderiam gerar um erro.

(9 / 5) * tempC + 32 Da lista a seguir, circule os


comandos que so legais.
Qual o resultado, quando tempC for 10?_______________
var x = 1138;

var y = 3/8;
"Number" + " " + "2"
Qual a string resultante? _________________ var s = "3-8";

x = y;

var n = 3 - "one";
level >= 5
var t = "one" + "two";
Qual o resultado, quando level (nvel) for 10?______________
E quando for 5?_____________ var 3po = true;

var level_ = 11;

var highNoon = false;


color != "pink" Dica: ! significa no.
var $ = 21.30;
Qual o resultado, se color (cor) for blue (azul)?___________
var z = 2000;

var isBig = y > z;


(2 * Math.PI) * r
Qual o resultado, se r for 3?_____________ z = z + 1;

z--;
Dica: Math.PI lhe d z y;
o valor de pi (voc
sabe, 3.14) x = z * t;

while (highNoon) {

z--;

No este tipo de expresso

44 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 44 05/06/2014 16:17:33


javascript e o dom

Tudo parece funcionar bem se eu


somar nmeros com nmeros ou
strings com strings, mas e se eu
adicionar um nmero a uma string?
Ou um nmero inteiro a um de
ponto flutuante?

Lembra-se de quando dissemos que JavaScript


torna a programao fcil de gostar? Uma das
formas pela qual ela faz isso cuidando da converso
de tipos em outros tipos, quando necessrio para que as
expresses faam sentido.
Como um exemplo, digamos que voc tenha a expresso:
message = 2 + if by sea;

Sabemos que o sinal de + poderia ser usado para


adicionar nmeros, e tambm o operador usado para
concatenar strings. Ento ele? Bom, JavaScript sabe que
a string if by sea nunca se parecer com um nmero,
ento a resolve como uma expresso string, converte o 2
em uma string 2 e a mensagem varivel est atribuda
a 2 if by sea.
Ou, se tivermos o comando:
value = 2 * 3.1;

JavaScript converte o nmero inteiro 2 em um nmero


de ponto flutuante e o resultado 6.2.
Como voc pode imaginar, porm, JavaScript nem
sempre faz o que voc quer e, em alguns casos, precisa
de uma pequena ajuda nas converses. Voltaremos a esse
tpico daqui a pouco.

Como JavaScript avalia os seguintes comandos?

numORString1 = "3" + "4"

numORString2 = "3" * "4"

E por qu?

voc est aqui 45

PFCG_HeadFirstHTML5Prog.indb 45 05/06/2014 16:17:33


iterao javascript

while (juggling) {
keepBallsInAir();
}

Fazendo coisas repetidamente...


Se fizssemos as coisas apenas uma vez em um programa JavaScript, ele
provavelmente seria bem entediante. Voc faz muitas coisas repetidamente
- enxgua, faz espuma, repete, at que seu cabelo fique limpo, ou continua
dirigindo at chegar ao seu destino, ou segue tomando seu sorvete at ele
acabar e, para lidar com estas situaes, JavaScript lhe fornece algumas
maneiras de iterar por blocos de cdigo.
Voc pode usar o loop while de JavaScript para executar algo at que uma
condio seja satisfeita:

conchas (scoops)
Temos um pote de sorvete e ainda h dezinici da como dez.
nele. Aqui est uma varivel declarada e aliza
em verdadeiro
While usa uma expresso booleana que avalisiada executado.
var scoops = 10; ou falso. Se for verdadeira, o cdigo depo dela
Embora haja mais de zero scoops sobrando, continuaremos
while (scoops > 0) { fazendo tudo que houver neste bloco de cdigo.
alert("More icecream!");
scoops = scoops - 1; Cada vez que passamos por um loop while,
}
alertamos o usurio de que ainda h
sorvete, e ento retiramos uma concha,
subtraindo um do nmero de conchas.
alert("life without ice cream isn't the same");

Quando a condio (scoops > 0) for falsa, o loop


termina, e a execuo do cdigo continua daqui, qualquer
que seja a prxima linha do seu programa

46 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 46 05/06/2014 16:17:33


javascript e o dom

Assim, se voc pensar no loop while, estamos inicializando alguns valores,


digamos, o nmero de conchas de sorvete que restam, que o loop while
testa e, se verdadeiro, executamos um bloco de cdigo. Este bloco executa
algum trabalho que, em algum momento, atualiza o valor envolvido no teste
condicional, de modo que a condio falhe e o loop termine.

INICIALIZA
var scoops = 10;
EXECUTA TESTE CONDICIONAL
while (scoops > 0) { EXECUTA BLOCO DE CDIGO
alert("More icecream!");
ENQUANTO O TESTE
CONDICIONAL FOR
scoops = scoops - 1; VERDADEIRO
} ATUALIZA

alert("life without ice cream isn't the same");


CONTINUA APS
A CONDIO DO LOOP
FALHAR
JavaScript tambm fornece um loop for, que formaliza esta estrutura um
pouco mais. Aqui est o nosso cdigo do sorvete com um loop for:
ATUALIZA
EXECUTA TESTE
INICIALIZA CONDICIONAL
EXECUTA BLOCO DE
for (scoops = 10; scoops > 0; scoops--) { CDIGO ENQUANTO O
TESTE CONDICIONAL
alert("There's more ice cream!"); FOR VERDADEIRO
} CONTINUA APS
alert("life without ice cream isn't the same"); A CONDIO DO
LOOP FALHAR

P: Os loops while e for parecem a mesma coisa para mim. Quando eu uso qual?

R: De modo geral, voc pode fazer as mesmas coisas com um for ou um while; entretanto, como voc pode ver
no exemplo do sorvete, o loop for um pouco mais compacto, e voc poderia argumentar que o loop while mais
legvel. Assim, realmente uma questo de qual se adapta melhor a uma determinada situao. De modo geral,
loops for so mais usados para iterar por um determinado nmero de valores (digamos, pelos itens de um carrinho
de compras), e loops while so usados mais para serem executados at que uma condio seja satisfeita (digamos,
fazer um teste com o usurio at que ele acerte).

voc est aqui 47

PFCG_HeadFirstHTML5Prog.indb 47 05/06/2014 16:17:33


exerccio de varivel e iterao

Sinta-se como o Navegador


Cada um dos trechos em JavaScript
nesta pgina so cdigos separados.
Trecho 1
Sua tarefa dar uma de navegador, var count = 0;
avaliar cada trecho de for (var i = 0; i < 5; i++) {
cdigo e responder a uma count = count + i;
pergunta sobre o resultado. }
Escreva suas respostas alert("count is " + count);
abaixo do cdigo.
Cheque suas respostas no Que count o alerta apresenta?
final do captulo.
Trecho 2
var tops = 5;
while (tops > 0) {
for (var spins = 0; spins < 3; spins++) {
alert("Top is spinning!");
}
tops = tops - 1;
}

Quanto tempo voc v o


alerta: Top is spinning!?
Trecho 3
for (var berries = 5; berries > 0; berries--) {
alert("Eating a berry");
}

Quantos berries voc comeu?


Trecho 4
for (scoops = 0; scoops < 10; scoop++) {

alert("There's more ice cream!");

alert("life without ice cream isn't the same");

Quantas conchas de sorvete voc comeu?

48 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 48 05/06/2014 16:17:34


javascript e o dom

if (cashInWallet > 5) {
order = Ill take the works: cheeseburger, fries and a coke;
} else {
order = Ill just have a glass of water;
}

Tome decises com JavaScript


Temos usado expresses booleanas em comandos for e while
como um teste condicional para decidir se devemos ou no continuar
a execuo do loop. Voc tambm pode us-las para tomar decises
em JavaScript. Aqui est um exemplo:
Aqui est nossa expresso booleana, teste
para ver quantos scoops esto esquerda.
if (scoops < 3) { Se h < 3 scoops esquerda, executamos o cdigo block.
alert("Ice cream is running low!");

Adicione quantos testes


com else if precisar,
Podemos juntar mais de um teste tambm: cada um com seu bloco
if (scoops < 3) {
de cdigo associado que
ser executado quando a
alert("Ice cream is running low!"); condio for verdadeira.
} else if (scoops > 9) {
alert("Eat faster, the ice cream is going to melt!");
}

voc est aqui 49

PFCG_HeadFirstHTML5Prog.indb 49 05/06/2014 16:17:35


condicionais javascript

Tomando mais decises... e adicionando um default


Voc pode fornecer um default para seus comandos if um else final que
executado se todas as outras condies falharem. Adicionaremos mais alguns if/
elses e um default: Perc eba que alteramos isto para que s
acontea quando o nmero de bolas de
if (scoops == 3) {
sorvete for exatamente 3.
alert("Ice cream is running low!");
} else if (scoops > 9) {
alert("Eat faster, the ice cream is going to melt!");
} else if (scoops == 2) {
alert("Going once!"); Adicionamos
} else if (scoops == 1) { condies para uma
alert("Going twice!"); contagem regressiva.
} else if (scoops == 0) {
alert("Gone!");
} else {
alert("Still lots of ice cream left, come and get
it.");
Aqui est o nosso default;
} se nenhuma das condies
acima for verdadeira,
ento este bloco
certamente ser executado.

Pegue o cdigo acima e insira-o no loop while abaixo. Percorra o loop


while e escreva os alertas na sequncia em que ocorrem. Verifique sua
resposta no final do captulo.

var scoops = 10;


while (scoops >= 0) {

Insira o cdigo acima aqui

scoops = scoops - 1;
}
alert("life without ice cream isn't the same");
Escreva a sada aqui.

50 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 50 05/06/2014 16:17:35


javascript e o dom

ms de Geladeira
Este cdigo imprime um palndromo em um alerta. O problema que uma parte
do cdigo estava em ms de geladeira e caiu no cho. sua tarefa juntar esse
cdigo novamente para que o palndromo funcione. Cuidado: j havia alguns ms no
cho que no fazem parte do cdigo e voc ter que usar alguns mais de uma vez!
Verifique sua resposta no final do captulo antes de seguir em frente.
var word1 = "a";
var word2 = "nam";
var word3 = "nal p";
var word4 = "lan a c";
var word5 = "a man a p";

var phrase = ""; Um palndromo uma frase que


pode ser lida da mesma forma de
for (var i = 0; ______; _____) { trs para frente ou de frente
if (i == 0) { para trs! Aqui est o palndromo
phrase = ________________;
que voc deve ver, se os ms
estiverem todos nos lugares certos.
}
else if (i == 1) {
phrase = ________________ + word4;
}
_________ (i == 2) {
_______________ = phrase + word1 + word3;
}
_________ (________) {
phrase = phrase + ________ + word2 + word1;
}
}
alert(phrase);

else if
else if (i == 0) word5
i == 3
i++ word1
i == 4 word2
phrase i < 3 i < 4
word4
word0 + i--
else i = 0 i = 3 word3

voc est aqui 51

PFCG_HeadFirstHTML5Prog.indb 51 05/06/2014 16:17:36


como pr javascript numa pgina

Disseram-me que colocaramos


JavaScript nas nossas pginas.
Quando chegaremos l? Ou s vamos
ficar brincando com JavaScript?

Sim, esta a questo. Em primeiro lugar,


voc precisava conhecer os fundamentos. Aqui
est o que fizemos at agora: voc sabe como
declarar e usar variveis JavaScript, e como
criar comandos e expresses bsicas. Voc
tambm sabe como usar tudo isso junto para
escrever cdigo condicional com comandos
if/else, para no mencionar fazer coisas
iterativamente com comandos while e for.
Com isso na sua caixa de ferramentas, agora
veremos como colocar JavaScript na sua
pgina e, mais importante, como JavaScript
interage com ela, ou seja, como voc
determina o que est na sua pgina, como
altera a pgina e, um pouco mais adiante,
como escreve cdigo para reagir a coisas que
esto acontecendo nela.
Ento, embora ainda no tenhamos terminado
com JavaScript, sua espera terminou; est
na hora de vermos como a marcao e o
comportamento trabalham juntos...

52 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 52 05/06/2014 16:17:36


javascript e o dom

Como e onde adicionar JavaScript s suas pginas


Para usar JavaScript, voc tem que adicion-la a uma pgina web, mas onde
e como? Voc j sabe que h um elemento <script>, ento vejamos onde
podemos us-lo e como ele afeta a forma pela qual podemos execut-lo dentro
das suas pginas. Aqui esto trs formas diferentes, atravs das quais voc poderia
adicionar cdigo sua pgina:
Coloque os elementos <script> no
<head> do seu HTML para fazer
com que eles sejam executados Coloque seu script inline no
antes que a pgina seja carregada. elemento <head>.
Voc pode A forma mais comum de adicionar
digitar seu cdigo s suas pginas colocando um
cdigo direto elemento <script> no cabealho
na pgina web, delas. Quando voc adiciona
ou referenciar JavaScript no elemento <head>,
um arquivo sua execuo acontece assim que o
JavaScript navegador analisa o cabealho (o
separado usando que ele faz primeiro!), antes de ter
o atributo analisado o resto da pgina.
src da tag do Adicione seu script
script.
referenciando um arquivo
JavaScript separado.
Ou voc pode Voc tambm pode conectar um
pode colocar arquivo separado contendo cdigo
seu cdigo (ou JavaScript. Coloque a URL do arquivo
uma referncia no atributo src do <script> de
a ele) no corpo. abertura e assegure-se de fechar o
Este cdigo elemento do script com </script>.
executado Se voc estiver conectando a um
quando o corpo arquivo no mesmo diretrio, pode usar
for carregado. apenas o nome deste arquivo.
Na maior parte do tempo, o cdigo
adicionado ao cabealho da pgina.
Adicione seu cdigo no corpo
H algumas pequenas vantagens no do documento, seja inline
desempenho ao acrescentar seu cdigo ou como um link para um
no final do corpo, mas apenas se arquivo separado.
realmente for necessrio superotimizar
o desempenho da sua pgina.
Ou voc pode colocar seu cdigo
diretamente no corpo do seu HTML.
Envolva seu cdigo JavaScript no
elemento <script> (ou referencie
um arquivo separado no atributo src).
O JavaScript no corpo da sua pgina
executado, quando o navegador
analisa o corpo (o que ele geralmente
faz de cima para baixo).
voc est aqui 53

PFCG_HeadFirstHTML5Prog.indb 53 05/06/2014 16:17:36


iterao como uma pgina

Como JavaScript interage com sua pgina


JavaScript e HTML so duas coisas diferentes. HTML
marcao e JavaScript cdigo. Ento, como voc faz
JavaScript interagir com a marcao na sua pgina? Voc usa
o Document Object Model.

Seu navegador 1 Quando voc carrega uma pgina


no navegador, este analisa o HTML
Chamamos isto
e cria um modelo interno do seu
de Document
documento que contm todos os
Object Model,
elementos da sua marcao HTML.
ao qual voc
pode pedir para
lhe informar
qualquer
coisa sobre a
html estrutura ou
contedo da sua
head body
pgina.
title script h1 h2 p

em

Chamamos isto de DOM,


para ficar mais curto

2 Seu JavaScript pode


interagir com o Dom para
obter acesso aos elementos
e contedo deles.
3 Quando JavaScript
modifica o DOM, o JavaScript tambm pode
navegador atualiza a usar o DOM para criar ou
pgina dinamicamente, remover elementos (entre
de modo que voc v o outras coisas que veremos).
novo contedo nela.

atravs da leitura, reao


e alterao do DOM que
JavaScript pode ser usada
para escrever pginas web/
aplicativos interativos. Este
livro lhe mostrar como.

54 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 54 05/06/2014 16:17:37


javascript e o dom

Como cozinhar seu prprio DOM


Vamos pegar um pouco de marcao e criar um <!doctype html>
DOM para ela. Aqui est uma receita simples <html lang="en">
para fazer isso: <head>
<title>My blog</tit
le>
Ingredientes <meta charset="utf
-8">
<script src="blog
Uma pgina HTML5 bem formada .js"></script>
</head>
Um ou mais navegadores web <body>
<h1>My blog</h1>
<div id="entry1">
Instrues
<h2>Great day bir
d watching</h2>
1. Comece criando um documento como <p>
raiz no topo. Today I saw three
ducks!
I named them
document
Huey, Louie, and
Dewey.
</p>
2. A seguir, pegue o elemento do topo
<p>
da sua pgina HTML, no nosso caso
I took a couple of
o elemento <html>, chame-o de photos...
</p>
elemento corrente e adicione-o como
</div>
ramificao do documento. </body>
</html>
document

html

3. Adicione cada elemento aninhado no elemento


corrente como filho do elemento documento
no DOM.

document

html J cozinhamos este


DOM para voc.
head body Vire a pgina para
v-lo pronto.
4. Volte para (3) para cada elemento que voc
acabou de adicionar e repita at que no haja
mais elementos.

voc est aqui 55

PFCG_HeadFirstHTML5Prog.indb 55 05/06/2014 16:17:37


introduzindo o modelo de objeto de documentos

Uma primeira prova de DOM


A beleza do Document Object Model que ele nos apresenta formas
consistentes, por todos os navegadores, de obter acesso estrutura e
ao contedo do HTML a partir do cdigo. Isto importante. Veremos
como tudo isso funciona em breve... Comparamos esta
Voltando ao nosso exemplo, se voc seguiu a receita da criao de um estrutura a de uma
DOM, acabou com uma estrutura como a apresentada abaixo. Cada rvore, porque uma
DOM possui um objeto documento no topo e depois uma rvore rvore uma estrutura
completa com ramificaes e nodos de folhas para cada um dos de dados que vem da
elementos da marcao HTML. Vejamos isso mais de perto. cincia da computao.

e no
document fica semeprespecial
topo. uma partc pode usar document tambm como
da rvore que vo ra obter document a raiz de uma rvore de
em JavaScript painteiro. cabea para baixo.
acesso ao DOM html
Estes so como as
ramificaes da rvore.
head body

meta title script h1 div id=entry1

Meu blog Meu blog


h2 p p
Estes so como folhas
da rvore (porque no timo dia Hoje eu Tirei
h elementos dentro para observar vi trs algumas
deles, apenas texto). pssaros fotos

os
O DOM inclui o contedo da pgina, assim como edo
elementos. (Nem semp re most ramo s todo o cont do
texto quando desenhamos o DOM, mas ele est l.)

Agora que temos um


DOM, podemos examinar
ou alter-lo de qualquer
maneira que quisermos.

56 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 56 05/06/2014 16:17:38


javascript e o dom

Sinta-se como <!doctype html>

o Navegador <html lang="en">


<head>
Sua tarefa agir como se <title>Movies</title>
fosse o navegador. Voc </head>
precisa analisar o HTML <body>
e criar seu prprio DOM <h1>Movie Showtimes</h1>
a partir dele. Siga em <h2 id="movie1" >Plan 9 from Outer Space</h2>
frente e analise o HTML <p>Playing at 3:00pm, 7:00pm.
direita e desenhe <span>
seu DOM abaixo. J Special showing tonight at <em>midnight</em>!
comeamos para voc. </span>

Compare sua resposta </p>


com nossa soluo no final <h2 id="movie2">Forbidden Planet</h2>
do captulo antes de <p>Playing at 5:00pm, 9:00pm.</p>
seguir adiante. </body>
</html>

document Desenhe seu DOM aqui.

html

voc est aqui 57

PFCG_HeadFirstHTML5Prog.indb 57 05/06/2014 16:17:38


relao entre javascript e o dom

HTML5 de Marte, JavaScript de Vnus

Ou como duas tecnologias totalmente


diferentes se conectaram.
HTML e JavaScript so dois planetas
completamente diferentes. A prova? O DNA
do HTML feito de marcao declarativa, que
permite a voc descrever um conjunto de
elementos aninhados que constituem a sua
pgina. JavaScript, por outro lado, constitudo
de material gentico de algoritmo puro, feito
para descrever computaes.
Eles so to diferentes que no podem
nem se comunicar? claro que no, porque
tm algo em comum: o DOM. Atravs do
DOM, JavaScript se comunica com a sua
pgina, e vice-versa. H algumas formas
de fazer isso acontecer, mas por enquanto
nos concentraremos em uma um
pequeno buraco que permite a JavaScript
acessar qualquer elemento, chamado de
getElementById.
Vejamos como ele funciona...

58 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 58 05/06/2014 16:17:39


javascript e o dom

Comearemos com um DOM. Aqui est um DOM simples; ele possui alguns
pargrafos, cada um com uma id identificando-o como planeta verde (green planet),
vermelho (red planet) ou azul (blue planet). Cada pargrafo tambm possui algum
texto. claro que h um elemento <head> tambm, mas deixamos os detalhes de
fora para manter as coisas mais simples.

document

html

head body

p id =greenplanet p id =redplanet p id =blueplanet

Est tudo Nada a Todos os


bem informar sistemas

Agora usaremos JavaScript para tornar as coisas mais interessantes. Digamos


que queremos alterar o texto do planeta verde de Est tudo bem para Alerta
Vermelho: atingido por fogo de phaser! (Red Alert: hit by phaser fire). Mais
adiante, voc poder querer fazer algo como isto, baseado nas aes de um usurio
ou at mesmo em dados de um servio web. Chegaremos l; por enquanto,
simplesmente atualizaremos o texto do planeta verde. Para fazer isso, precisamos do
elemento com uma id igual a greenplanet. Aqui est o cdigo que faz isso:
Lembre-se de que o
documento representa a pgina
inteira no seu navegador e
contm o DOM completo, de
modo que podemos solicitar
a ele que faa coisas como
encontrar um elemento com Aqui estamos solicitando ao documento para
uma id especfica. nos trazer um elemento, encontrando o que
tenha um determinado id.

document.getElementById("greenplanet");

... e depois o cdigo


JavaScript pode
getElementById(greenplanet) fazer todos os
retorna o elemento de pargrafo que tipos de coisas
corresponde a greenplanet ... interessantes com ele...

voc est aqui 59

PFCG_HeadFirstHTML5Prog.indb 59 05/06/2014 16:17:39


usando getelementbyid

Assim que getElementbyId lhe apresentar um elemento, voc estar pronto para
fazer algo com ele (como alterar seu texto para Alerta Vermelho: atingido por fogo
de phaser!). Para fazer isso, geralmente atribumos o elemento a uma varivel, de
modo que possamos nos referir ao elemento por todo o nosso cdigo; faremos isso e
depois alteraremos o texto:

Aqui est nossa chamada a


Estamos atribuindo o elemento a uma getElementById, que procura o
varivel chamada planeta (planet). elemento greenplanet e o retorna.

var planet = document.getElementById("greenplanet");

E no nosso cdigo podemos agora


simplesmente usar a varivel planeta (planet)
para nos referir ao nosso elemento.
planet.innerHTML = "Red Alert: hit by phaser fire!";

Podemos usar a
propriedade innerHTML
do nosso elemento planeta Alteramos o contedo do elemento
(planet) para alterar o greenplanet para o nosso novo texto... o
contedo do mesmo que resulta no DOM (e sua pgina) sendo
atualizado com o novo texto.
Falaremos mais sobre
propriedades de
elementos em breve
document

html

head body

p id =greenplanet p id =redplanet p id =blueplanet

Alerta Vermelho: Nada a Todos os


atingido por fogo informar sistemas
de phaser! OK

Quaisquer alteraes no Dom so refletidas na


renderizao da pgina do navegador, de modo que
voc ver o pargrafo mudar para o novo contedo!

60 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 60 05/06/2014 16:17:39


javascript e o dom

Aqui est um DOM com uma


mensagem secreta escondida.
Analise o cdigo abaixo para revelar
o segredo! A resposta est de
cabea para baixo nesta pgina.
document.getElementById("e7")
document.getElementById("e8")
document.getElementById("e16")
document.getElementById("e9")
document.getElementById("e18")
document.getElementById("e13")
document.getElementById("e12")
document.getElementById("e2")

Escreva o elemento que caass da


dig o sel eci on a, im
linha de c nto,
como o contedo do elemesec reta!
para revelar a mensagem

Resposta: Voc pode voltar novamente as pginas mas no o tempo


voc est aqui 61

PFCG_HeadFirstHTML5Prog.indb 61 05/06/2014 16:17:40


testando o cdigo dom

Faa um test drive nos planetas


Voc viu como usar document.getElementById para obter
acesso a um elemento e como usar innerHTML para alterar o
contedo desse elemento. Agora faremos isso pra valer.
Aqui est o HTML dos planetas; temos um elemento <script>
no cabealho, no qual colocaremos o cdigo e trs pargrafos para
os planetas verde, vermelho e azul. Se voc ainda no fez, siga em
frente e digite o HTML e JavaScript para atualizar o DOM:

<!doctype html>
<html lang="en">
<head>
<title>Planets</title> Adicionamos o Assim como
<meta charset="utf-8">
JavaScri pt no voc fez antes,
cabealh o da pgi na. estamos obtendo
<script>
o elemento
var planet = document.getElementById("greenplanet"); <p> com a id
planet.innerHTML = "Red alert: hit by phaser fire!"; greenplanet e
</script> alterando seu
</head> contedo.
<body>
<h1>Green Planet</h1>
Aqui est o elemento
<p id="greenplanet">all is well</p>
<p> que voc alterar
<h1>Red Planet</h1> com JavaScript.
<p id="redplanet">Nothing to report</p>
<h1>Blue Planet</h1>
<p id="blueplanet">all systems a-Ok</p>
</body>
</html>

Aps voc ter digitado isso, siga em


frente e carregue a pgina no seu
navegador e veja a mgica DOM
acontecer no planeta verde.

OPA! Houston, temos um problema, o


planeta verde ainda mostra Est
tudo bem. O que est errado?

62 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 62 05/06/2014 16:17:40


javascript e o dom

Verifiquei trs vezes minha


marcao e cdigo, e no
est funcionando. No vejo
alteraes na minha pgina.

Sim, esquecemos de mencionar uma coisa.


Na maior parte do tempo, faz sentido iniciar a execuo
do seu cdigo JavaScript depois da pgina estar totalmente
carregada. O motivo? Bom, se voc no esperar at
que a pgina tenha sido carregada, ento o DOM no
ter sido criado integralmente quando seu cdigo
for executado. No nosso caso, JavaScript est sendo
executado, quando o navegador carrega pela primeira
vez o cabealho da pgina e antes que o resto da pgina
tenha sido carregado. Assim, o DOM ainda no foi criado
integralmente e, se o DOM no estiver criado, ento o
elemento <p id=greenplanet> ainda no existe!
Ento o que acontece? A chamada para obter o elemento
com uma id igual a greenplanet no retornar nada
porque no h elemento correspondente, e ento o
navegador segue em frente e renderiza a pgina aps
seu cdigo ter sido executado. Assim, voc ver a pgina
renderizada, mas o texto no planeta verde no ser
alterado pelo cdigo.
O que precisamos de uma forma para fazer com que
o navegador execute o cdigo aps ter carregado
totalmente a pgina e criado o DOM. Veremos como
fazer isso a seguir.

voc est aqui 63

PFCG_HeadFirstHTML5Prog.indb 63 05/06/2014 16:17:41


esperando a pgina carregar

Voc no pode mexer com o DOM at a


pgina estar inteiramente carregada
Como fazer para que o navegador execute seu cdigo apenas aps
ser carregado?
Para fazer com que o navegador espere antes de executar cdigo,
usaremos duas partes de JavaScript que voc ainda no viu muito: o
objeto window e uma funo. Chegaremos nos detalhes de ambos
posteriormente, mas siga conosco para ver o cdigo trabalhar.
Atualize seu cdigo JavaScript desta forma:

Primeiro, crie uma funo


<script>
chamada init e coloque nela seu Perceba que seu
cdigo j existente. cdigo fica entre as
function init() {
chaves de abertura
var planet = document.getElementById("greenplanet"); {e fechamento}.
planet.innerHTML = "Red alert: hit by phaser fire!";
}
Aqui, estamos configurando o
window.onload = init; valor da propriedade window.
</script>
onload com o nome da funo.
Isto diz que, quando
a pgina estiver
completamente
Recarregue a pgina carregada, execute o
Siga em frente, recarregue a pgina e veja se voc tem a resposta: cdigo que est em init

OK! Agora vemos o novo


contedo no elemento
<p> do planeta verde.
No timo?

Bom, o que timo que agora


voc sabe como fazer com que
o navegador espere at que o
DOM tenha sido completamente
carregado antes de executar o
cdigo que acessa elementos.

64 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 64 05/06/2014 16:17:41


javascript e o dom

Aqui est um HTML para uma lista de execuo


de msicas, mas a lista est vazia. sua tarefa
completar o JavaScript abaixo para adicionar
Aqui est o HTML as msicas a ela. Preencha os espaos com o
<!doctype html> para a pgina. JavaScript que far isso. Verifique sua resposta
com nossa soluo no final do captulo antes de
<html lang="en"> seguir em frente.
<head>
<title>My Playlist</title>
Aqui est nosso script. Este cdigo deve
<meta charset="utf-8"> <ul>.
<script>
preencher a lista de msicas aba no
ixo,

____________ addSongs() { Preencha os espaos


var song1 = document.______________("________"); com o cdigo que
var _____ = _______________________("________");
falta para completar
a lista de execuo.
var _____ = ________.getElementById("________");

________.innerHTML = "Blue Suede Strings, by Elvis Pagely";


__________________ = "Great Objects on Fire, by Jerry JSON Lewis";
song3.____________ = "I Code the Line, by Johnny JavaScript";
}
window.___________ = ____________;
</script>
</head>
<body>
<h1>My awesome playlist</h1>
Aqui est a lista vazia das
<ul id="playlist">
msicas. O cdigo acima deve
<li id="song1"></li> adicionar contedo a cada
<li id="song2"></li> <li> da lista de execuo.
<li id="song3"></li>
</ul>
</body> Quando voc fizer
JavaScript funcionar,
</html>
assim que a pgina
web se parecer aps
t-la carregado.

voc est aqui 65

PFCG_HeadFirstHTML5Prog.indb 65 05/06/2014 16:17:42


mais sobre a funcionalidade do dom

Ento, em que mais o DOM bom, afinal?


O DOM pode fazer mais do que vimos at aqui e usaremos muitas das suas outras
funcionalidades, medida em que seguirmos pelo livro, mas, por enquanto, o
examinaremos brevemente de modo que voc no se esquea dele:

Obtenha elementos do DOM.


Busca e recupera claro que voc j sabe isso, porque
um ou mais j usamos document.getElementById,
elementos do DOM. form
mas tambm h outras formas de obter
elementos; na verdade, voc pode usar
nomes de tags, nomes de classes e
label input input atributos para recuperar no apenas
um elemento, mas um conjunto inteiro
deles (por exemplo todos os elementos
Cria novos da classe em_promoo). Voc pode
elementos li obter ainda valores de formulrios que
o usurio digitou, como o texto de um
elemento de entrada.

Crie ou adicione elementos ao DOM.


ul
Voc pode criar novos elementos e tambm
... e os adiciona pode adicion-los ao DOM. claro que
ao DOM quaisquer alteraes que voc fizer no
anexando-os a li li DOM aparecero imediatamente, quando
outro elemento ele for renderizado pelo navegador (o que
da rvore. uma coisa boa!).

Remova elementos do DOM.


Remove elementos
Voc tambm pode remover elementos
existentes. ul
do DOM, pegando um elemento pai e
removendo algum dos seus filhos. Assim,
voc ver o elemento removido na janela
li li
do seu navegador, quando ele for apagado
do DOM.

Acessa ou cria Obtenha e configure atributos de


um atributo de elementos.
um elemento,
coma id ou class. ul id=list At aqui, voc acessou apenas o contedo
de texto de um elemento, mas pode
acessar atributos tambm. Por exemplo,
li voc poderia saber qual a classe a que
um elemento pertence e depois alter-la
durante a execuo.

66 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 66 05/06/2014 16:17:43


javascript e o dom

Podemos conversar sobre JavaScript novamente? Ou,


como armazenar mltiplos valores em JavaScript
Voc est em contato com JavaScript e DOM e, antes de deix-lo descansar, queramos
lhe contar sobre mais um tipo de JavaScript, que voc usar o tempo todo o
Array. Digamos que voc quisesse armazenar os nomes de 32 sabores de sorvete,
ou os nmeros de todos os itens do carrinho de compras do seu usurio, ou talvez
a temperatura externa a cada hora. Fazer isso com variveis ficaria inadequado,
especialmente se voc precisar armazenar dezenas, centenas ou milhares de valores.
Felizmente, temos Array para ajudar.
Voc pode adicionar
Um Array armazena uma mais valores matriz
coleo de valores. conforme necessrio.
59.2 60.1 63 65 62
Cada valor possui E, para cada
um nmero de ndice da matriz,
ndice, comeando 0 1 2 3 4 h um valor
com zero. correspondente.

Como criar uma matriz


Precisamos criar uma matriz antes de us-la e atribuir a prpria matriz a
uma varivel, de modo que tenhamos algo para nos referirmos a ela no
nosso cdigo. Criaremos a matriz acima com temperaturas horrias:

... e aqui est como realmente


Aqui est a nossa varivel criamos uma nova matriz vazia.
para a matriz
Voltaremos a esta sintaxe no
var tempByHour = new array(); Captulo 4, mas, por enquanto, saiba
tempByHour[0] = 59.2; apenas que ela cria uma nova matriz.
tempByHour[1] = 60.1;
Para adicionar novos valores matriz,
tempByHour[2] = 63; simplesmente referenciamos o nmero do ndice
tempByHour[3] = 65; do item da matriz e damos um valor a ele.
tempByHour[4] = 62; Da mesma forma que uma varivel em
O ndice JavaScript, voc pode atribuir qualquer valor
(ou tipo de valor) a um ndice de matriz.
Ou, se voc estiver realmente com pressa, JavaScript lhe d um atalho
para digitar uma matriz (o que chamamos de matriz literal), para
cri-la e inicializ-la com valores:
Isto cria a mesma
var tempByHour = [59.2, 60.1, 63, 65, 62]; matriz acima, mas com
muito menos cdigo.

voc est aqui 67

PFCG_HeadFirstHTML5Prog.indb 67 05/06/2014 16:17:43


usando um array

Adicionando outro item matriz


A qualquer momento, voc pode continuar adicionando novos itens sua
matriz, simplesmente usando o prximo ndice no usado, desta forma:
61

tempByHour[5] = 61; 59.2 60.1 63 65 62

0 1 2 3 4 5
Usando um novo
ndice, obtemos um
novo item na matriz.

Usando seus itens de matriz


Voc pode obter o valor de um item de matriz,
referenciando a varivel da matriz com um
ndice, desta forma:

var message = "The temperature at 5 was " + tempByHour[5];


alert(message);
Para acessar o valor da
temperatura no ndice 5, apenas
referenciamos a matriz nele.

Saiba o tamanho da sua matriz, seno


Voc pode obter facilmente o tamanho da sua matriz, referenciando uma
propriedade da mesma chamada length:
Falaremos mais sobre propriedades
var numItems = tempByHour.length; no prximo captulo; por enquanto,
saiba apenas que cada matriz possui
sua propriedade length, que lhe
informa o nmero de itens na matriz.
Agora que sabemos como obter o comprimento de uma
matriz, vejamos se podemos combinar o que voc sabe
sobre loops com matrizes...

68 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 68 05/06/2014 16:17:44


javascript e o dom

Abaixo, voc encontrar uma pgina web com uma lista de


itens vazios para seu JavaScript preencher com temperaturas.
J demos a voc a maior parte do cdigo; sua tarefa
termin-lo, de modo que ele grave o contedo da temperatura
correspondente a partir da matriz (por exemplo, o item com
id = temp0 receber a temperatura no ndice 0 da matriz, e
assim por diante). Assim, no item com id = temp3, se ler
A temperatura em 3 era 65. Para obter crditos extras, veja
se descobre como fazer com que a temperatura em 0 mostre
meio-dia em vez de 0.
<!doctype html>
L
Aqui est o HTM
<html lang="en">
<head>
<title>Temperatures</title>
<meta charset="utf-8">
<script>
function showTemps() {
var tempByHour = new ____________;
tempByHour[0] = 59.2;
tempByHour[1] = 60.1;
tempByHour[2] = 63;
tempByHour[3] = 65; Aqui onde estamos
tempByHour[4] = 62; combinando loops e
for (var i = 0; i < ___________________; _____) { matrizes. Voc consegue
var theTemp = _____________[i]; ver como estamos
var id = "__________" + i; acessando cada item da
var li = document.__________________(id); matriz usando um ndice
if (i == ____) { de varivel?
li.______________ = "The temperature at noon was " + theTemp;
} else {
li.innerHTML = "The temperature at " + ______ + " was " + _________;
}
}
}
window.onload = showTemps;
</script>
</head>
<body>
<h1>Temperatures</h1>
<ul>
O cdigo acima
<li id="temp0"></li> preencher
<li id="temp1"></li> cada item da
<li id="temp2"></li> lista com uma
<li id="temp3"></li>
<li id="temp4"></li>
expresso com
</ul> a temperatura.
</body>
</html>

voc est aqui 69

PFCG_HeadFirstHTML5Prog.indb 69 05/06/2014 16:17:45


exemplo phrase-o-matic

Experimente o meu novo


Analise este cdigo Phrase-o-Matic e voc se
para o novo aplicativo tornar habilidoso para
Phrase-o-Matic e veja conversar, como o seu
se consegue descobrir chefe ou aqueles caras
o que ele faz antes de do marketing.
seguir em frente...

<!doctype html>
<html lang="en">
<head>
<title>Phrase-o-matic</title>
<meta charset="utf-8">
<style>
body {
Voc no imaginava que nossa
font-family: verdana, Helvetica, sans-serif;
aplicao para negcios srios do
} Captulo 1 fosse sria o suficiente?
</style> Bom. Tente esta, se voc precisa
<script> mostrar algo para seu chefe.
function makePhrases() {
var words1 = ["24/7", "multi-Tier", "30,000 foot", "B-to-B", "win-win"];
var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"];
var words3 = ["process", "solution", "tipping-point", "strategy", "vision"];

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] + " " + words2[rand2] + " " + words3[rand3];


var phraseElement = document.getElementById("phrase");
phraseElement.innerHTML = phrase;
}
window.onload = makePhrases;
</script>
</head>
<body>
<h1>Phrase-o-Matic says:</h1>
<p id="phrase"></p>
</body>
</html>

70 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 70 05/06/2014 16:17:45


javascript e o dom

O Phrase-o-Matic
Esperamos que voc tenha descoberto que este cdigo
a ferramenta perfeita para criar seu slogan de marketing.
Ela criou vencedores como Soluo de valor agregado
em que todos ganham e Processo habilitado 24 horas
por dia 7 dias por semana e temos muita esperana de
que mais vencedores surjam no futuro. Vejamos como isto
realmente funciona:

1 Em primeiro lugar, definimos a funo makePhrases, que podemos executar


aps a pgina ter sido completamente carregada, de modo a garantir o acesso
ao DOM com segurana:
Estamos definindo uma funo chamada
makePhrases, que poderemos chamar posteriormente.
function makePhrases() {
Todo este cdigo de makePhrases vai aqui,
} chegaremos l em um segundo
window.onload = makePhrases; Executamos makePhrases assim que
a pgina termina de ser carregada.

2 Com isso pronto, podemos escrever o cdigo da funo makePhrases.


Comearemos configurando trs matrizes. Cada uma armazenar palavras que
usaremos para criar as expresses.

Criamos uma varivel chamada words1, que


podemos usar para referenciar a primeira matriz.

var words1 = ["24/7", "multi-Tier", "30,000 foot", "B-to-B", "win-win"];

Estamos colocando cinco strings na matriz. Sinta-se livre


para alter-las com as palavras que esto mais na moda.

var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"];


var words3 = ["process", "solution", "tipping-point", "strategy", "vision"];

E h mais duas matrizes de palavras, atribudas a


duas novas variveis, words2 e words3.

voc est aqui 71

PFCG_HeadFirstHTML5Prog.indb 71 05/06/2014 16:17:46


como funciona phrase-o-matic

3 OK, temos trs matrizes novas com palavras da moda; o que faremos
agora escolher aleatoriamente uma palavra de cada e depois junt-las
para criar uma expresso.
Aqui est como selecionamos uma palavra de cada matriz:
Geramos um nmero aleatrio para cada matriz e o atribumos
a uma nova varivel (randl1, randl2 e randl3, respectivamente).
var rand1 = Math.floor(Math.random() * words1.length);
var rand2 = Math.floor(Math.random() * words2.length);
var rand3 = Math.floor(Math.random() * words3.length);

Este cdigo gera um nmero aleatrio baseado no nmero de itens em


cada matriz (no nosso caso, cinco, mas sinta-se livre para adicionar mais a
qualquer matriz que ainda vai funcionar).

4 Agora criamos a expresso de marketing, pegando palavras selecionadas


aleatoriamente e concatenando-as, com um espao entre elas por
motivo de legibilidade: Usamos cada nmero aleatrio para
indexar as matrizes de palavras
Definimos outra varivel para armazenar a expresso.

var phrase = words1[rand1] + " " + words2[rand2] + " " + words3[rand3];

5 Estamos quase terminando. Temos a expresso, agora s precisamos exibi-la. Neste


ponto, voc j sabe: usaremos getElementById para localizar nosso elemento de
pargrafo e depois usaremos sua innerHTML para colocar a nova expresso l.

Obtemos o
var phraseElement = document.getElementById("phrase"); elemento
phraseElement.innerHTML = phrase; <p> com a
id phrase.
E depois configuramos o contedo
do elemento <p> com a expresso.

72 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 72 05/06/2014 16:17:46


javascript e o dom

6 OK, termine essa ltima linha de cdigo, d mais uma olhada geral
e sinta a sensao de dever cumprido antes de carreg-la no seu
navegador. Faa um test drive e aproveite as expresses.

Aqui est como o


nosso se parece!

Recarregue a pgina para infinitas possibilidades


(OK, no infinitas, mas coopere conosco, estamos
tentando tornar interessante este cdigo simples!).

P: O que exatamente Math, R: Uma tima referncia sobre R: Voc fica indefinido, o que,
se voc se lembra, o valor de
e o que Math.random e Math. JavaScript JavaScript: The Definitive
floor fazem? Guide, de David Flanagan (OReilly). uma varivel que ainda no tenha

R: Math uma biblioteca P: Anteriormente, voc


disse que pode armazenar
recebido um valor.

P: Eu posso remover um item


interna de JavaScript que possui
primitivas (como nmeros, de uma Array? Caso positivo, o
funes relacionadas matemtica.
strings e booleanos) em variveis que acontece com o ndice dos
Math.random gera um nmero
ou objetos. Estamos, porm, outros elementos?
aleatrio entre 0 e 1. Multiplicamos
isso pelo nmero de itens da matriz
(que obtemos usando a propriedade
armazenando matrizes em
variveis. Ento, o que uma R: Voc pode remover um
item de uma Array, e pode faz-lo
length da mesma) para obter um matriz, uma primitiva ou um objeto?

R:
de algumas formas diferentes.
nmero entre 0 e o comprimento da
Boa pergunta! Uma matriz Poderia configurar o valor da
matriz. O resultado provavelmente
um tipo especial de objeto matriz no ndice como nulo; por
ser um nmero de ponto flutuante,
interno de JavaScript. especial exemplo minhaMatriz[2] = null. O
como 3.2, de modo que usamos
porque voc pode usar ndices comprimento da Array permaneceria
Math.floor para assegurarmos a
numricos para acessar os valores o mesmo. Voc pode tambm
obteno de um nmero inteiro
armazenados na matriz, algo que remover completamente o item
que possamos usar como ndice na
no pode fazer com outros objetos (usando a funo splice). Neste
matriz para selecionarmos a palavra
que no sejam matrizes, ou objetos caso, os ndices dos itens que
aleatria. Tudo que Math.floor faz
que voc mesmo tenha criado. Voc vierem depois daquele que voc
eliminar os nmeros depois do
aprender a criar seus prprios remover, diminuiro em 1. Assim,
ponto decimal em um nmero de
objetos no Captulo 4. se minhaMatriz[2] = cachorro
ponto flutuante. Por exemplo, Math.
floor(3.2) 3.
P: e minhaMatriz[3] = gato, se

P:
O que acontece se eu voc remover cachorro, ento
Onde eu posso encontrar tentar acessar um ndice minhaMatriz[2] = gato e o
documentao sobre coisas de matriz que no existe? comprimento da sua matriz 1 a
como Math? Como se eu tivesse 5 menos do que era antes da remoo.
palavras armazenadas em
minhasPalavras e tentasse
acessar minhasPalavras[10].
voc est aqui 73

PFCG_HeadFirstHTML5Prog.indb 73 05/06/2014 16:17:47


Aprender uma linguagem trabalho
duro e requer que voc no apenas
trabalhe com seu crebro, mas que
tambm o descanse. Assim, aps este
captulo, descanse um pouco, coma
alguma coisa por nossa conta, mas, antes
de ir, verifique os Pontos de Bala e faa
as palavras cruzadas para realmente
fixar tudo.

No descobrimos
como converter
de digital para
analgico ainda,
ento voc precisar
fornecer suas
prprias refeies.

74 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 74 05/06/2014 16:17:47


javascript e o dom

Pontos de Bala

Declare uma varivel JavaScript usando var. Voc torna sua pgina web interativa examinando
e alterando o DOM usando JavaScript.
Numricos, booleanos e strings so
tipos primitivos. Obtenha acesso a um elemento na sua pgina
web, usando document.getElementByI.
Valores booleanos so verdadeiros ou falsos.
document.getElementById usa a id de um
Nmeros podem ser inteiros ou de
elemento para encontr-lo no DOM.
ponto flutuante.
Use a propriedade innerHTML de um elemento
Uma varivel no atribuda possui
para alterar seu contedo.
valor indefinido.
Se voc tentar acessar ou alterar elementos
Indefinido e nulo so dois valores diferentes.
antes que a pgina web tenha sido integralmente
Indefinido significa que uma varivel no teve
carregada, receber um erro de JavaScript e seu
atribudo a si um valor; nulo significa que a
cdigo no funcionar.
varivel no tem valor.
Atribua uma funo propriedade window.onload
Expresses numricas, booleanas e string
para executar o cdigo dessa funo
resultam em um valor numrico, booleano ou de
aps o navegador ter terminado de carregar
string, respectivamente.
a pgina web.
Para repetir blocos de cdigo, use um loop for
Use uma matriz para armazenar mais de um valor.
ou while.
Para acessar um valor em uma matriz, use um
Loops for e while fazem a mesma coisa; use o que
ndice. Um ndice um nmero inteiro que indica
funcionar melhor para a situao.
a posio do item na matriz (comeando em 0).
Para terminar um loop for ou while, o teste
A propriedade length de uma matriz lhe informa
condicional deve resultar em falso em
quantos itens h nela.
algum momento.
Combinando loops e matrizes, voc pode acessar
Use comandos if/else para tomar uma deciso
sequencialmente cada item de uma matriz.
baseada em um teste condicional.
Math uma biblioteca JavaScript com diversas
Testes condicionais so expresses booleanas.
funes relacionadas matemtica.
Voc pode adicionar JavaScript ao cabealho ou
Math.random retorna um nmero de ponto
corpo da sua pgina web, ou coloc-lo em um
flutuante entre 0 e 1 (mas nunca precisamente 1).
arquivo separado e conect-lo a partir da sua
pgina web. Math.floor converte um nmero de ponto
flutuante em um inteiro, eliminando os dgitos
Feche seu JavaScript (ou conexo para ele) com o
aps a casa decimal.
elemento <script>.
Quando o navegador carrega uma pgina web,
cria um DOM, que uma representao interna
dessa pgina.

voc est aqui 75

PFCG_HeadFirstHTML5Prog.indb 75 05/06/2014 16:17:47


exerccio de palavra cruzada

Palavras Cruzadas HTML5


Hora de trabalhar uma rea diferente do seu crebro
com palavras cruzadas. Divirta-se!
1

5 6

8 9

10

11 12

13

14

15 16

Horizontal 16. Voc sabe quantos itens h em uma matriz se


verificar a propriedade ________.
3. Armazene todos os seus sabores de sorvete
juntos em uma ________. Verticais
4. Execute coisas vrias vezes com um
1. Feche seu JavaScript com uma tag <____> se
loop _____.
estiver em uma pgina HTML.
7. document.______ como voc obtm um
2. ______ o raiz da rvore DOM.
elemento do DOM em JavaScript.
5. Variveis comeam com uma _____, $, ou _.
8. Voc pode adicionar seu JavaScript ao
_______ ou ao corpo do seu HTML. 6. O navegador cria um Document ___________
quando carrega a pgina.
10. Escolha bons nomes e use ____ para
nomes longos. 7. a id do planeta atingido pelo fogo do phaser.
13. Loops while e for usam uma expresso 8. Se voc escrever 3 + Patetas, JavaScript ir
__________ como teste condicional. ________ 3 em uma string.
14. Adicione isto para tornar sua pgina 9. No mexa no _____ at que a pgina tenha sido
web interativa. totalmente carregada.
15. Se voc estiver quase terminando, beba 11. O DOM uma representao interna da _______.
ch, ____ se no estiver nem prximo disso, 12. Use um ________ para obter um valor de
continue trabalhando! uma matriz.

76 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 76 05/06/2014 16:17:48


javascript e o dom
Exerccio Soluo
Expresse-se!
Voc viu os diferentes tipos de expresses
Baseado no que voc sabe
que pode usar em JavaScript. Agora
at agora sobre variveis,
hora de colocar esse conhecimento para
expresses e comandos em
trabalhar, avaliando voc mesmo algumas JavaScript, veja se consegue
expresses. Aqui est nossa soluo. descobrir qual destas so
legais e quais poderiam gerar
(9 / 5) * tempC + 32 um erro.

50
Qual o resultado, quando tempC for 10?_______________ Da lista a seguir, circule os
comandos que so legais.

var x = 1138;
"Number" + " " + "2"
var y = 3/8;
Nmero 2
Qual a string resultante? _________________
var s = "3-8";

x = y;
level >= 5
>= var n = 3 - "one";
true
Qual o resultado, quando level (nvel) for 10? _______
maior ou
true
E quando for 5?_____________ igual a Tecnicamente, isto legal,
mas resulta em um valor
que voc no pode usar.
color != "pink"
var t = "one" + "two";
Qual o resultado, se color (cor) for blue cor no igual var 3po = true; ilegal!
true
(azul)?___________ a rosa
var level_ = 11;
(2 * Math.PI) * r
18.84
Qual o resultado, se r for 3?_____________
aproximadamente! var highNoon = false;

var $ = 21.30;
Math.PI lhe d o valor var z = 2000;
de pi (voc sabe, 3.14...)
var isBig = y > z;

z = z + 1;

z--;

z y; ilegal!
x = z * t;

while (highNoon) {

z--;
No este tipo de expresso
}

voc est aqui 77

PFCG_HeadFirstHTML5Prog.indb 77 05/06/2014 16:17:48


solues de exerccio

Sinta-se como o Navegador Soluo


Cada um dos trechos em JavaScript nesta
pgina so cdigos separados. Sua tarefa Trecho 1
dar uma de navegador, avaliar cada
var count = 0;
trecho de cdigo e responder
for (var i = 0; i < 5; i++)
a uma pergunta sobre o {
resultado. Escreva suas count = count + i;
respostas abaixo do cdigo. }
alert("count is " + count);

Que count o alerta apresenta?


10
Trecho 2 Cada vez que executamos o
var tops = 5; loop, adicionamos o valor de i ao
contador, e i est aumentando,
while (tops > 0) {
de modo que no estamos apenas
for (var spins = 0; spins < 3; spins++) { adicionando 1 ao contador a
alert("Top is spinning!"); cada vez, mas sim 0, 1, 2, 3 e 4.
}
tops = tops - 1; O loop while externo executado 5
}
vezes e o loop interno for 3 vezes cada
vez que o externo executado, de modo
15 que o total 5 * 3, ou seja,15!
Quanto tempo voc v o
alerta: Top is spinning!? Trecho 3
Aqui, estamos comeando em 5 e for (var berries = 5; berries > 0; berries--) {
executando o loop at que alert("Eating a berry");
de frutas seja 0, diminuindoo nm
a
ero
cad }
vez (em vez de aumentar). a
Quantos berries voc comeu? 5
Trecho 4
for (scoops = 0; scoops < 10; scoop++) {
Uma fcil; apenas
alert("There's more ice cream!");
executamos o loop 10
} vezes de modo que
alert("life without ice cream isn't the same");
comemos 10 bolas!

10 Quantas bolas de sorvete voc comeu?

78 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 78 05/06/2014 16:17:49


javascript e o dom

Pegue o cdigo anterior e insira-o no loop while abaixo. Percorra o loop while e
escreva os alertas na sequncia em que ocorrem. Aqui est a nossa soluo.

var scoops = 10;


while (scoops >= 0) {
Cdigo inserido
if (scoops == 3) { Isto acontece uma vez,
alert("Ice cream is running low!"); quando scoops 3.
Isto tambm
} else if (scoops > 9) { acontece uma
alert("Eat faster, the ice cream is going to melt!"); vez, quando
} else if (scoops == 2) { scoops (bolas de
alert("Going once!"); Cad a um dest es acon tece sorvete) vale 10.
uma vez, quan do o nmero
} else if (scoops == 1) {
de scoops for 2, 1 e 0.
alert("Going twice!");
} else if (scoops == 0) { E isto acontece sempre que nenhuma das outras
alert("Gone!"); condies for verdadeira, ou seja, quando o
} else { nmero de scoops for 9, 8, 7, 6, 5 e 4.
alert("Still lots of ice cream left, come and get it.");
}
scoops = scoops - 1;
} Subtramos 1 scoops cada vez que o loop executado.
alert("Life without ice cream isn't the same.");
Isto executado aps
o loop terminar.

Coma mais rpido, o sorvete vai derreter!


Os alertas: Ainda h muito sorvete, venha peg-lo.
Ainda h muito sorvete, venha peg-lo.
Ainda h muito sorvete, venha peg-lo.
Ainda h muito sorvete, venha peg-lo.
Ainda h muito sorvete, venha peg-lo.
Ainda h muito sorvete, venha peg-lo.
O sorvete est acabando!
Dou-lhe uma!
Dou-lhe duas!
Terminou!
A vida sem sorvete no a mesma coisa.

voc est aqui 79

PFCG_HeadFirstHTML5Prog.indb 79 05/06/2014 16:17:49


solues de exerccio

ms de Geladeira Soluo
Este cdigo imprime um palndromo em um alerta. O problema que uma parte do
cdigo estava em ms de geladeira e caiu no cho. sua tarefa juntar esse cdigo
novamente para que o palndromo funcione. Cuidado: j havia alguns ms no cho
que no fazem parte do cdigo e voc ter que usar alguns mais de uma vez! Aqui
est a nossa soluo.
var word1 = "a";
var word2 = "nam";
var word3 = "nal p";
var word4 = "lan a c";
var word5 = "a man a p";

var phrase = ""; Um palndromo uma frase que


pode ser lida da mesma forma de
i < 4 _____)
for (var i = 0; ______; i++ { trs para frente ou de frente
if (i == 0) { para trs! Aqui est o palndromo
word5
phrase = ________________;
que voc deve ver, se os ms
estiverem todos nos lugares certos.
}
else if (i == 1) {
phrase = ________________
phrase + word4;
}
_________
else if (i == 2) {
_______________
phrase = phrase + word1 + word3;
}
else if (________)
_________ i == 3 {
phrase = phrase + ________
word1 + word2 + word1;
}
}
alert(phrase);

else if (i == 0)
ms que sobraram
i == 4 word2
word4
i < 3
word0 +
else i = 0 i-- i = 3 word3

80 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 80 05/06/2014 16:17:50


javascript e o dom

Sinta-se como o Navegador


Soluo <!doctype html>
Sua tarefa agir como se <html lang="en">
fosse o navegador. Voc <head>
precisa analisar o HTML <title>Movies</title>

e criar seu prprio DOM </head>


<body>
a partir dele. Siga em
<h1>Movie Showtimes</h1>
frente e analise o HTML
<h2 id="movie1" >Plan 9 from Outer Space</h2>
direita, e desenhe
<p>Playing at 3:00pm, 7:00pm.
seu DOM abaixo. J
<span>
comeamos para voc.
Special showing tonight at <em>midnight</em>!
</span>
</p>
<h2 id="movie2">Forbidden Planet</h2>
<p>Playing at 5:00pm, 9:00pm.</p>
</body>
</html>

document Aqui est o nosso DOM

html

head body

title h1 h2 id=movie1 p h2 id=movie2 p

span

em

voc est aqui 81

PFCG_HeadFirstHTML5Prog.indb 81 05/06/2014 16:17:50


solues de exerccio

Aqui est o HTML para uma lista de


execuo de msicas, mas ela est vazia.
sua tarefa completar o JavaScript abaixo
para adicionar as msicas lista. Preencha
os espaos com o JavaScript que far isso.
Nossa soluo est a seguir.
<!doctype html>
<html lang="en">
<head>
<title>My Playlist</title> Se voc fizer o JavaScript funcionar, assim
que a pgina web se parecer aps ser carregada.
<meta charset="utf-8">
<script>
function
____________ addSongs() {
getElementById song1
var song1 = document.______________("________"); Aqui est o cdigo
var _____ .
song2 = _______________________("________");
document getElementById song2 que far a lista de
song3 = document msicas funcionar.
var _____ song3
________.getElementById("________");

song1
________.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML
__________________ = "Great Objects on Fire, by Jerry JSON Lewis";
innerHTML
song3.____________ = "I Code the Line, by Johnny JavaScript";
} Sinta-se livre para substituir
addSongs por suas msicas favoritas
onload
window.___________ = ____________;
</script>
</head>
<body>
<h1>My awesome playlist</h1>
<ul id="playlist">
<li id="song1"></li> O cdigo acima configura o
<li id="song2"></li>
contedo destes elementos <li>
pegando cada elemento do DOM
<li id="song3"></li> e configurando innerHTML com
</ul> o nome da msica.
</body>
</html>

82 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 82 05/06/2014 16:17:50


javascript e o dom

Abaixo voc encontrar uma pgina web com uma


lista de itens vazia para seu JavaScript preencher com
temperaturas. J demos a voc a maior parte do cdigo;
sua tarefa termin-lo, de modo que ele grave o contedo
da temperatura correspondente a partir da matriz. Voc
<!doctype html> conseguiu o crdito extra? Nossa soluo est a seguir.
<html lang="en">
<head>
<title>Temperatures</title>
<meta charset="utf-8">
<script>
function showTemps() {
Array() Aqui estamos criando uma nova Arr ay
var tempByHour = new ____________;
para armazenar as tem per atu ras .
tempByHour[0] = 59.2;
tempByHour[1] = 60.1;
Aqui onde estamos
tempByHour[2] = 63;
combinando os loops
tempByHour[3] = 65; e matrizes. Observe
tempByHour[4] = 62; como estamos usando
tempByHour.length
for (var i = 0; i < ___________________; i++ {
_____) i como o ndice da
tempByHour
var theTemp = _____________[i]; matriz, de modo que
temp
var id = "__________" + i; acessaremos cada item
getElementById
var li = document.__________________(id); medida em que i
0 {
if (i == ____) aumenta em cada loop.
innerHTML
li.______________ = "The temperature at noon was " + theTemp;
} else {
li.innerHTML = "The temperature at " + ______ i + " was " + theTemp
______;
}
} E aqui estamos criando
} a string, usando as
window.onload = showTemps; variveis i e theTemp.
</script>
</head>
<body>
<h1>Temperatures</h1>
<ul>
<li id="temp0"></li>
<li id="temp1"></li>
<li id="temp2"></li>
<li id="temp3"></li>
<li id="temp4"></li> E nossos
</ul> resultados!
</body>
</html>

voc est aqui 83

PFCG_HeadFirstHTML5Prog.indb 83 05/06/2014 16:17:51


solues de exerccio

Soluo das Palavras Cruzadas


HTML5
1
s
2
d c
o r
c i
u p
3
m a t r i z
4
w h i l e
5 6
n l o
7
g e t e l e m e n t b y i d
r t j
8 9
c a b e a l h o r e d
10
o e a c a m e l o
11 12
n n m t m
v p a n m
13
e l r d b o o l e a n a
14
r j a v a s c r i p t d
t n a c e
15 16
e l s e i f e l e n g t h
r t
o

84 Captulo 2

PFCG_HeadFirstHTML5Prog.indb 84 05/06/2014 16:17:51


3 eventos, manipuladores e todo
esse balano

Um Pouco de Interao

claro, ele bonito, mas


este relacionamento seria
to mais divertido se ele
realmente fizesse alguma
coisa de vez em quando.

Homem ou manequim?
Voc decide.

Voc ainda no alcanou seu usurio. Voc aprendeu


os conceitos bsicos sobre JavaScript, mas ser que consegue
interao com seus usurios? Quando as pginas respondem a
entradas deles, no so mais apenas documentos; so aplicativos
vivos e interativos. Neste captulo, voc aprender a lidar com
uma forma de entrada de usurio e a conectar um elemento
<form> antigo de HTML a cdigo real. Talvez soe perigoso, mas
poderoso. Aperte seu cinto de segurana. Este um captulo
que vai diretamente ao ponto, em que vamos de zero a aplicativos
interativos em um segundo.
este um novo captulo 85

PFCG_HeadFirstHTML5Prog.indb 85 05/06/2014 16:17:52


apresentando webville tunes

Apronte-se para o Webville Tunes


OK, guiamos voc atravs de muitos conceitos bsicos de JavaScript
at aqui neste livro e, embora tenhamos falado muito sobre a
criao de aplicativos web, no temos muito a mostrar sobre isso
ainda. Ento agora ficaremos srios (no de verdade! Queremos
dizer apenas desta vez!) e criaremos algo no mundo real.
Que tal gerenciar uma playlist? Vamos cham-la de algo original,
como... hmm, Webville Tunes.

Adiciona novas msicas a qualquer momento.

Exibe todas suas


msicas favoritas
do Webville Tunes,
diretamente no
navegador.

O que iremos criar. Totalmente baseado no


navegador. No h necessidade
de cdigo no lado servidor.

Dado o que voc sabe sobre este cdigo:

window.onload = init;

Consegue imaginar o que este cdigo pode fazer?

button.onclick = handleButtonClick;

86 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 86 05/06/2014 16:17:52


events e handlers

Iniciando...
No precisamos criar uma pgina web grande e complexa logo de cara.
Na verdade, podemos comear de forma muito simples. Criaremos
um documento HTML5 com um formulrio e um elemento lista para
armazenar a lista de msicas:

<!doctype html>
Apenas seu cabealho e corpo HTML5 padro.
<html lang="en">
<head> Colocaremos todo o seu JavaScript
<title>Webville Tunes</title>
no arquivo da lista de msicas.
<meta charset="utf-8"> Inclumos uma folha de estilo para
<script src="playlist.js"></script> dar ao seu aplicativo de lista de
<link rel="stylesheet" href="playlist.css"> msicas uma tima aparncia *.
</head> Tudo o que precisamos um formulrio simples. Aqui est ele com um campo
<body> de texto para digitar suas msicas. Estamos usando o atributo placeholder
<form> HTML5 que mostra um exemplo do que digitar no campo de entrada.
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="add Song">
</form>
E temos um boto com
uma id addButton
<ul id="playlist">
para submeter suas novas
Usaremos uma lista para as adies lista de msicas.
</ul> msicas. Por enquanto ela est
</body> vazia, mas alteraremos isso com
</html> cdigo JavaScript em um segundo...

Faa um Test Drive


Siga em frente e digite o cdigo acima,
carregue-o no seu navegador favorito e use-o
antes de passar para a prxima pgina.

Aqui est o que voc dever ver.

*Lembre-se de que voc pode baixar a folha de estilo (e todo o cdigo) em http://wickedlysmart.com/hfhtml5

voc est aqui 87

PFCG_HeadFirstHTML5Prog.indb 87 05/06/2014 16:17:53


sobre o boto click events

Mas nada acontece quando clico em Adicionar Msica


Bom, sim e no. Nada parece acontecer, mas o seu navegador sabe que voc clicou
no boto (dependendo do navegador, voc tambm ver o boto pressionado).
A questo real como fazemos com que o boto execute alguma coisa quando
voc clica. O que faremos para que o cdigo em JavaScript seja chamado quando
voc clica no boto.

Precisamos de duas coisas:

1 Precisamos de um pouco de cdigo JavaScript


que seja avaliado, quando o usurio clicar no
boto Adicionar Msica. Este cdigo (assim
que tiver sido escrito) adiciona uma msica
sua lista de msicas.

2 Precisamos de uma forma de conectar esse


cdigo, de modo que, quando o boto for
clicado, JavaScript saiba executar o seu
cdigo de adio de msicas.

Quando o usurio
clicar (ou tocar em
um dispositivo baseado
em movimentos) em um
boto, queremos saber
que isso aconteceu. Estamos
interessados no evento
o boto acabou de ser clicado.

88 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 88 05/06/2014 16:17:54


events e handlers

Ei, estou muito interessado


em voc, boto... Poderia
me informar se algum
clicar em voc?

timo, voc ser o primeiro a


saber, caso isso acontea.

Adicionar
Msica???

O seu boto.

Lidando com Eventos


Voc ver que muitas coisas esto acontecendo no navegador
enquanto sua pgina est sendo exibida botes esto
sendo clicados, dados adicionais que seu cdigo solicitou da
rede podem estar chegando, temporizadores podem estar
sendo disparados (chegaremos em tudo isso). Todas estas
coisas fazem com que eventos aconteam: um evento de
clique em boto, um evento de dados disponveis, um evento
Seu cdigo. de tempo expirado e assim por diante (h muitos mais).
Sempre que houver um evento, h uma oportunidade para
seu cdigo manipul-lo, ou seja, fornecer algum cdigo que
ser chamado quando o evento ocorrer. Voc no precisa
manipular qualquer um destes eventos, mas precisar faz-lo
se quiser que coisas interessantes aconteam quando eles
ocorrerem como, por exemplo, quando o evento clique
no boto acontecer, adicionar uma nova msica lista de
execuo; quando novos dados chegarem, process-los e
exibi-los na sua pgina; quando um temporizador disparar,
informar ao usurio que seus ingressos para a primeira fila
iro expirar, e assim por diante.
Assim, vejamos o que fazer para lidar com o evento de
clique no boto.

voc est aqui 89

PFCG_HeadFirstHTML5Prog.indb 89 05/06/2014 16:17:54


codificando o handler do boto

Criando um Plano...
Vamos voltar um momento, antes de nos perdermos em manipuladores
e eventos. O objetivo aqui clicar em Adicionar Msica e fazer com
que uma msica seja adicionada uma lista de execuo na pgina.
Abordaremos esta tarefa desta maneira:
1. Configurar um manipulador para lidar com um clique de usurio no boto Adicionar msica.
2. Escrever o manipulador para obter o nome da msica que o usurio digitou e depois...
3. Criar um novo elemento para armazenar a nova msica e...
4. Adicionar o elemento ao DOM da pgina.
Se estes passos no estiverem claros para voc, no se preocupe, explicaremos
medida em que seguirmos em frente... Por enquanto, apenas acostume-se com os
passos e siga-os enquanto escrevemos esse manipulador. V em frente e abra um
novo arquivo playlist.js para todo o seu cdigo em JavaScript.

Obtendo acesso ao boto Adicionar Msica


Para solicitar ao boto que nos informe quando um evento ocorrer,
primeiro precisamos obter acesso a ele. Felizmente, criamos o boto usando
marcao HTML e isso significa... Voc acertou. Ele est representado no
DOM e voc j sabe como obter elementos do DOM. Se voc olhar mais
atrs no HTML, ver que demos ao boto uma id de addButton. Assim,
usaremos getElementById para obtermos uma referncia a ele:

var button = document.getElementById("addButton");

Agora s precisamos dar ao boto um cdigo para chamar quando ocorrer um clique.
Para fazer isso, criaremos uma funo, chamada handleButtonClick, que lidar
com o evento. Chegaremos em funes em breve; por enquanto, aqui est a funo:

A funo chamada
de handleButtonClick;
chegaremos s especificidades Uma funo lhe d uma forma
da sintaxe daqui a pouco. de empacotar cdigo. Voc
function handleButtonClick() {
pode dar a ela um nome e
reusar o cdigo onde quiser.
alert("Button was clicked!");
}
Colocamos todo o cdigo que
Agora s exibiremos queremos executar quando a funo
um alerta quando esta for chamada dentro das chaves.
funo for chamada.

90 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 90 05/06/2014 16:17:54


events e handlers

1. Configurar um manipulador para lidar com um clique


de usurio no boto Adicionar msica
Dando um manipulador de clique 2. Escrever o manipulador para obter o nome da msica

para o boto 3. Criar um novo elemento para armazenar a nova


msica
OK, temos um boto e uma funo que atuar como 4. Adicionar o elemento ao DOM da pgina
manipulador, handleButtonClick, ento vamos
juntar tudo. Para fazer isso, usaremos uma propriedade do boto, onclick. Configuramos
a propriedade onclick desta forma:
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
Com um boto disponvel, aps chamar getElementById,
configuramos a propriedade onclick na funo que queremos
que seja chamada quando ocorrer um clique no boto.
Voc talvez lembre que fizemos algo semelhante quando usamos a propriedade window.
onload para chamar uma funo aps a janela ter sido carregada. Neste caso, porm,
chamaremos a funo quando o boto for clicado. Agora juntaremos tudo:
Da mesma forma que fizemos no captulo
anterior, estamos usando uma funo init que
window.onload = init; no ser chamada e executada at que a pgina
function init() {
tenha sido totalmente carregada.
var button = document.getElementById("addButton");
button.onclick = handleButtonClick; Aps a pgina ser carregada,
} pegaremos o boto e configuraremos
function handleButtonClick() { seu manipulador onclick.
alert("Button was clicked!");
}
E o manipulador de clique exibir um
alerta quando clicarmos no boto.

Colocando isso em um teste...


Siga em frente, digite o cdigo acima (no seu arquivo
playlist.js), carregue a pgina, clique nesse boto o
quanto quiser e ver um alerta a cada vez.
Aps ter terminado de testar seu novo manipulador de
clique em botes, volte, estude o cdigo e pense em como
tudo isso funciona.
Quando voc achar que tem
tudo na mente, vire a pgina e
ns veremos os detalhes para
assegurar que tudo realmente
permanea.

voc est aqui 91

PFCG_HeadFirstHTML5Prog.indb 91 05/06/2014 16:17:54


como funciona o add song

Um olhar mais prximo no que acabou de acontecer...


Acabamos de apresentar muitas ideias novas nas ltimas pginas; vamos
percorrer o cdigo novamente e assegurar que o entendemos claramente.
Aqui vamos ns:

1 A primeira coisa que voc fez foi colocar um boto no seu


formulrio HTML. Com ele posicionado, voc precisava de
uma forma de capturar o clique de um usurio nesse boto,
de modo que pudesse fazer com que algum cdigo fosse
executado. Para fazer isso, criamos um manipulador e o
atribumos propriedade onclick do seu boto.
function init() {
var button = document.getElementById("addButton");
Configuramos o
button.onclick = handleButtonClick; manipulador do
} evento clique no
O objeto button tem boto na funo init
uma propriedade (ou seja, aps a pgina
onclick que No se preocupe. Se e quando ter sido carregada).
configuramos eu for clicado, voc ser
com a funo literalmente o primeiro a saber.
handleButtonClick.
Adicionar
Msica

Quando o usurio clicar no boto, o


evento clique ser disparado e a
funo handleButtonClick chamada.
function handleButtonClick() {
alert("Button was clicked!");
}

2 Voc tambm escreveu um manipulador simples


que apenas alerta o usurio para o fato de o
boto ser clicado, mas este cdigo funciona
bem para o teste.

O manipulador
com seu cdigo

92 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 92 05/06/2014 16:17:55


events e handlers

3 Com o cdigo escrito, a pgina


carregada e exibida pelo navegador, Vamos l... clique
no boto... clique
o manipulador instalado... tudo
depende do usurio agora...

4 Finalmente, o usurio clica no seu


boto, ele entra em ao, percebe que
possui um manipulador e o chama...

Hora de acordar,
tem um clique de Vejo que tenho um
usurio. manipulador para isso,
melhor avis-lo. Sim! Algum clicou no boto.
Vou executar a funo
handlerButtonClick.

function handleButtonClick() {
alert("Button was clicked!");
}

Pediram-me para alertar voc


de que o boto foi clicado... Eu
sei, para uma caixa de dilogo
de alerta um pouco exagerado,
mas, de qualquer maneira, estou
apenas fazendo meu trabalho.

voc est aqui 93

PFCG_HeadFirstHTML5Prog.indb 93 05/06/2014 16:17:55


obtendo a msica do dom

Obtendo o nome da msica 1. Configurar um manipulador para lidar com um


clique de usurio no boto Adicionar msica
2. Escrever o manipulador para obter o nome da
Estamos prontos para seguir para o segundo passo da msica
nossa tarefa: obter o nome da msica na qual o usurio 3. Criar um novo elemento para armazenar a nova
msica
clicou. Assim que fizermos isso, poderemos pensar em
4. Adicionar o elemento ao DOM da pgina
como exibiremos a lista de execuo no navegador.
Como, ento, obteremos o nome da msica? Isto algo que o usurio digitou,
certo? Ah, mas qualquer coisa que acontecer na pgina web refletida no DOM,
de modo que o texto que o usurio digitou deve estar l tambm.
Para obter o texto de dentro de um elemento de entrada de um formulrio de
texto, primeiro preciso obter o elemento de entrada a partir do DOM, e voc
sabe como fazer isso: getElementById. Assim que voc tiver terminado, pode
usar a propriedade value do elemento de entrada de texto para acessar o texto
que o usurio digitou no campo do formulrio. Aqui est como:

Aqui est a parte do


corpo do DOM.
body
Este o elemento
que queremos
obter do DOM.
form ul id=playlist
Usaremos seu id,
songTextInput,
para obt-lo.
input id=songTextInput input id=addButton
value=Blue Suede Strings, by Elvis Pagely

A seguir, podemos usar a propriedade value o


Usando o mtodo getElementById, podemos do elemento de entrada para obter o text
obter um manipulador para o elemento de que o usurio digitou no campo de entrada.
entrada songTextInput no formulrio.

Retrabalhe a funo handleButtonClick abaixo para obter o


nome da msica que o usurio digitou no elemento de entrada
do usurio. Verifique a resposta na soluo da pgina 96.

function handleButtonClick() {
var textInput = document.getElementById(" ");
var songName = .value;
alert("Adding " + );
}

94 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 94 05/06/2014 16:17:55


events e handlers

E se voc quisesse testar para garantir que o usurio realmente


BNUS
digitou algum texto antes de clicar no boto? Como voc poderia
fazer isso? (Encontre a soluo na pgina 96)

P: Qual o valor da propriedade value da entrada


de texto se o usurio no tiver digitado nada? O
P: Que outros tipos de eventos eu posso gerenciar
em JavaScript alm de cliques em botes?
valor nulo? Ou o boto Add Song no chama o
manipulador se o usurio no tiver digitado nada? R: H um grande nmero de outros eventos de

R: O boto Add Song no to inteligente.


Determinar se o usurio digitou alguma coisa, depende
mouse que voc pode manipular. Por exemplo, voc
pode detectar e manipular um pressionar de teclas,
uma movimentao do mouse, o arrasto do mouse,
do seu cdigo. Para saber se a entrada de texto est at mesmo o pressionar e segurar do mouse (diferente
vazia (ou seja, o usurio no digitou nada), voc pode de um clique de mouse). Tambm h muitos outros
verificar se o seu valor igual string sem contedo, tipos de eventos que mencionei de passagem, como
conhecida como string vazia, que escrita como , ou eventos quando dados ficam disponveis, eventos
duas aspas duplas sem nada entre elas. Entendemos de temporizadores, relacionados com a janela do
o porqu de voc pensar que poderia ser nula, mas, da navegador, e assim por diante. Voc ver alguns outros
perspectiva do campo de entrada de texto, ele no est tipos de manipulao de eventos no resto do livro; assim
armazenando nada. Est com uma string ainda sem que voc souber como executar um, pode faz-lo com
nada dentro. V entender. ;-) praticamente todos eles!

P: Achei que o valor de entrada do texto


era um atributo. Voc o est chamando de
P: O que JavaScript est fazendo enquanto
espera por eventos?
propriedade. Por qu?

R: Voc est certo, value um atributo do elemento


R: A menos que voc tenha programado seu
JavaScript para fazer alguma coisa, ele fica ocioso at
de entrada de texto HTML. Voc pode inicializar o que algo acontea (o usurio interaja com a interface,
valor de um elemento de entrada de texto usando o dados cheguem da web, um temporizador dispare, e
atributo value. Em JavaScript, porm, para acessar um assim por diante). Isto uma coisa boa; significa que
valor que um usurio tenha digitado, voc precisa usar o poder de processamento do seu computador far
a propriedade value do elemento de entrada que outras coisas, como tornar seu navegador responsivo.
obtemos do DOM. Posteriormente, neste livro, voc aprender como criar
tarefas que sejam executadas em segundo plano, de
modo que seu navegador possa executar o cdigo da
tarefa e responder a eventos ao mesmo tempo.
voc est aqui 95

PFCG_HeadFirstHTML5Prog.indb 95 05/06/2014 16:17:55


solues de exerccio

Retrabalhe a funo handleButtonClick abaixo para obter


o nome da msica que o usurio digitou no elemento de
entrada do formulrio. Aqui est a nossa soluo:

Primeiro precisamos obter uma referncia ao


elemento de entrada de texto no formulrio.
Recebemos este elemento em uma id de
songTextInput, de modo que podemos us-lo com
getElementById para obter uma referncia.

function handleButtonClick() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
alert("Adding " + songName); A propriedade value do elemento de
} entrada de texto armazena o que
for digitado no texto, que apenas
uma string. Aqui estamos atribuindo
E agora mostraremos uma caixa de alerta, que esse texto varivel songName.
deve exibir Adding e o nome da msica.

BNUS
E se voc quisesse testar para garantir que o usurio
realmente digitou algum texto antes de clicar no boto?
Como voc poderia fazer isso? Aqui est a nossa soluo:

function handleButtonClick() {
var textInput = document.getElementById("songTextInp
ut");
var songName = textInput.value;
Podemos ver um comando if e comparar
a string songName com uma string vazia
if (songName == "") {
para assegurar que o usurio digitou
alert("Please enter a song"); algo. Se ele no tiver digitado nada, ns
} else { o alertaremos para digitar uma string.
alert("Adding " + songName);
}
}

96 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 96 05/06/2014 16:17:56


1. Configurar um manipulador para lidar com um
Como adicionamos uma clique de usurio no boto Adicionar msica
2. Escrever o manipulador para obter o nome da
msica pgina? msica
3. Criar um novo elemento para armazenar a nova
J fizemos muita coisa! Voc pode digitar um nome de msica
msica no formulrio, clicar no boto Add Song e obter 4. Adicionar o elemento ao DOM da pgina
o texto que voc digitou no formulrio, tudo dentro do seu
cdigo. Agora exibiremos a lista de msicas na prpria pgina. Aqui est como isso deve ficar:

Quando voc clicar


em Add Song, seu JavaScript
adicionar a msica a uma
lista de msicas na pgina.

Aqui est o que precisamos fazer:


1 Voc talvez tenha percebido que j
colocamos uma lista vazia na marcao body
HTML (um elemento <ul> vazio, para ser
exato) quando digitamos pela primeira
vez. Com isso, aqui est como o DOM ul id=playlist
se parece agora.
Aqui est a
2 Cada vez que voc digitar uma nova lista no DOM.
msica, adicionaremos um novo item Neste momento
a uma lista no ordenada. Para fazer est vazia.
isso, criaremos um novo elemento <li>
que armazenar o nome da msica. A body
seguir, pegaremos o novo elemento
<li> e o adicionaremos ao <ul> no DOM.
Assim que fizermos isso, o navegador ul id=playlist
executar sua funo e voc ver a Quando voc
atualizao da pgina, como se o <li> digitar uma
estivesse l desde sempre. claro,
li msica, criaremos
um novo item de
faremos isso tudo neste cdigo. lista (elemento
Verifique o DOM mais uma vez e <li>) e o
assegure-se de ter entendido o que adicionaremos
precisamos fazer. lista <ul>.
voc est aqui 97

PFCG_HeadFirstHTML5Prog.indb 97 05/06/2014 16:17:56


criando novos elementos

Para a lista de execuo mostrada a


seguir, desenhe como o DOM ficar,
aps voc ter adicionado todas essas
msicas. Observe a ordem na qual as
msicas so adicionadas na pgina
e assegure-se de que os elementos
estejam nos lugares corretos no DOM
tambm. J fizemos isso para voc.
Verifique a soluo no final do captulo
antes de seguir em frente.

document

html

head body

title script form ul id=playlist

input input li

Blue Suede Strings,


by Elvis Pagely

Desenhe o resto do DOM


para a lista de execuo aciaqu
ma.
i

Voc teve de fazer suposies sobre a ordem na qual os


elementos <li> so adicionados ao pai?

98 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 98 05/06/2014 16:17:57


events e handlers

melhor comearmos
Como criar um novo elemento a trabalhar na criao
Voc j viu como obter acesso a elementos existentes destes elementos, Betty.
atravs do DOM. Voc tambm pode usar o DOM Eles esto atualizando o
para criar novos elementos (e, depois, como uma DOM novamente.
segunda etapa, adicion-los ao DOM. Chegaremos l
em um segundo).
Digamos que queremos criar um elemento <li>.
Aqui est como fazemos isso:

Use document.createElement para criar


um novo elemento. Uma referncia ao
novo elemento retornada.

var li = document.createElement("li");

Aqui estamos Passe o tipo de elemento


atribuindo o novo que quiser criar como uma
elemento varivel li. string para createElement.
createElement cria um novo elemento. Observe
que ele no inserido no DOM ainda. Agora ele
li apenas um elemento livre, flutuando e precisando de
um lugar no DOM.
Ento, agora temos um novo elemento <li> sem nada. Voc j
conhece uma maneira de colocar texto em um elemento:

li.innerHTML = songName;

Nossa varivel li. Isto considera o conceito


do <li> ao ttulo da msica. li

Blue Suede Strings,


by Elvis Pagely

Aqui est o nosso novo objeto de


elemento li pronto para ir, mas
ainda no fazendo parte do DOM.

voc est aqui 99

PFCG_HeadFirstHTML5Prog.indb 99 05/06/2014 16:17:58


adicionando novos elementos

Adicionando um elemento ao DOM 1. Configurar um manipulador para lidar com um


clique de usurio no boto Adicionar msica

Para adicionar um novo elemento ao DOM, voc tem 2. Escrever o manipulador para obter o nome da
msica
que saber onde quer coloc-lo. Bem, ns sabemos onde
3. Criar um novo elemento para armazenar a nova
coloc-lo: colocaremos o elemento <li> no elemento msica
<ul>. Como faremos isso? Vejamos novamente o DOM. 4. Adicionar o elemento ao DOM da pgina
Voc se lembra de que dissemos que ele era como uma
rvore? Pense em rvore genealgica.

document como a grande


matriarca da famlia, no
topo da rvore. html o filho nicpao i de
nesta gerao. O
document
html document.
html tem dois filhos,
html cabealho e corpo. O
pai do corpo html.
head body

title script form ul id=playlist

E aqui est nosso


input input ul. O pai de ul o
corpo, e ul no tem
filhos ainda...
Assim, para adicionar nosso elemento <li>, precisaremos
torn-lo filho do elemento <ul>. Para fazer isso, primeiro ... queremos fazer
ser necessrio encontrar o elemento <ul> na rvore (ns com que nossos novos
demos a ele uma id de playlist para tornar isso fcil) e li elementos <li> sejam
depois, para adicionar o <li>, ns diremos ao elemento filhos de <ul>.
<ul> para adicionar um novo filho em si mesmo. Aqui
est como fazer isso: Blue Suede Strings,
by Elvis Pagely
Use getElementById para obter uma referncia
ao elemento <ul> com id = playlist.
Cada vez que voc
var ul = document.getElementById("playlist"); chama appendChild, o
ul.appendChild(li); novo elemento <li>
adicionado ao elemento
Pea ao elemento <ul> para adicionar o elemento <li> como filho. <ul> aps quaisquer
Assim que isso for executado, o DOM ter <li> como filho de outros elementos <li>
<ul> e o navegador atualizar a exibio para refletir o novo <li>. que j estejam l.

100 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 100 05/06/2014 16:17:58


events e handlers

Junte tudo...
Vamos juntar todo o cdigo e adicion-lo funo handleButtonClick. Siga
em frente e digite-o, caso ainda no o tenha feito, de modo que possa test-lo.

function handleButtonClick() {

var textInput = document.getElementById("songTextInput");

var songName = textInput.value; Primeiro, crie o novo elemento <li>,


no qual ir o nome da msica.
var li = document.createElement("li");

li.innerHTML = songName; A seguir, configure o contedo desse


elemento com o nome da msica.
var ul = document.getElementById("playlist"); O <ul> com a id playlist o
ul.appendChild(li);
elemento pai do nosso novo <li>.
Assim, obtemos ele a seguir.
} Observe que pedimos ao elemento pai, ul, Depois, adicione
para adicionar li como um novo filho. o objeto li ao ul
usando appendChild.

... e faa um test drive


body
Coloque o Webville Tunes prova, adicionando
algumas msicas. Aqui esto nossos resultados: ul id=playlist

li li li li li

E aqui est como o DOM se parece


agora que adicionamos todos aqueles
novos elementos <li>.

Agora, quando digitamos um nome


de msica e clicamos em adicionar,
a msica adicionada ao DOM,
assim vemos mudana na pgina e
a nova msica na lista.

voc est aqui 101

PFCG_HeadFirstHTML5Prog.indb 101 05/06/2014 16:17:58


reviso do aplicativo playlist

Reviso o que acabamos de fazer


Voc fez bastante neste captulo (e em pouco tempo!). Criou
um aplicativo de lista de execuo que pode usar para digitar
uma msica, clicar em um boto e adicionar essa msica
lista da pgina, tudo usando cdigo JavaScript.

1 A primeira coisa que voc fez foi


configurar um manipulador de eventos
para lidar com o clique do usurio no
boto Add Song. Voc criou uma funo,
handleButtonClick, e configurou Quando o usurio clicar no boto
a propriedade onclick do boto Add Song, seu manipulador
AddSong com esta funo. handleButtonClick ser chamado.

2 A seguir, escreveu cdigo para o manipulador


de clique de boto para obter o nome da
msica do campo de texto de entrada.
Voc usou a propriedade input.value body

para obter o texto, e at adicionou ul id=playlist


form
uma verificao para assegurar que
o usurio digitou uma
msica. Se no tiver input id=songTextInput input id=addButton
value=Blue Suede Strings by Elvis Pagely
digitado, voc o alerta.
Em handleButtonClick, voc est obtendo o nome da
msica que o usurio digitou, usando a propriedade
input.value para obter o texto do DOM.
3 Para adicionar a msica lista de Voc cria um
execuo, voc criou ento um elemento
novo elemento li
<li> e configura
<li> usando document.createElement e o contedo do Blue Suede Strings,
configurou o contedo do elemento com elemento <li> com by Elvis Pagely
o nome da msica usando innerHTML. o nome da msica.
4 Finalmente, voc adicionou o novo elemento
<li> ao DOM adicionando-o como filho ao
elemento <ul> pai. Voc fez isso usando body

appendChild, dizendo para o elemento <ul>


inserir o elemento <li> como filho, que o ul id=playlist
adicionou ao DOM. Quando o elemento
Adicionar um novo
adicionado ao DOM, o navegador atualiza filho ao DOM li li
a pgina que o usurio v e a lista de atualiza a pgina.
execuo passa a mostrar a msica.
102 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 102 05/06/2014 16:17:59


events e handlers

Espere um segundo. Consigo interagir com o DOM


e tudo o mais, mas como isto um aplicativo
web real? Se eu fechar meu navegador, todas
as minhas msicas desaparecem. Minha lista de
exibio no deveria permanecer se isto fosse
realmente um aplicativo?

Concordamos, a lista de execuo deve ser


persistente; afinal, qual o sentido de digitar todas essas
msicas se elas no permanecerem? H ainda muitas
outras funcionalidades que voc poderia querer adicionar
tambm. Voc poderia, por exemplo, querer adicionar
uma interface de udio usando a API de udio e vdeo,
de modo que pudesse realmente ouvir e compartilhar
msicas com amigos usando um servio web (como o
Facebook e o Twitter), encontrar pessoas perto de voc
que gostem dos mesmos artistas (usando as APIs de
geolocalizao) e temos certeza de que poderia imaginar
muitas outras funcionalidades.
Voltando, porm, lista de execuo... A ideia era lhe
iniciar construindo um pequeno aplicativo web interativo
e a lista de exibio fez um bom trabalho nisso. Alm
disso, armazenar as msicas requer a API Web Storage de
HTML5, que est a alguns captulos de distncia.
Por outro lado, realmente no queremos fazer coisas
de menos aqui... Mude a pgina

voc est aqui 103

PFCG_HeadFirstHTML5Prog.indb 103 05/06/2014 16:17:59


armazenando a playlist

Cdigo Pronto
para Assar

J pr-assamos algum
cdigo para que voc no
tenha de fazer isso.

Seguimos em frente e assamos um pouco


de cdigo por voc para gravar suas
listas de execues. Por enquanto, voc
s precisa digitar e fazer duas pequenas
alteraes no seu cdigo j existente e ter
uma lista de execuo baseada em HTML5.
Examinaremos as especificidades de
armazenamento de coisas localmente no
seu navegador no captulo Armazenamento
Web, mas, por enquanto, voc pode fazer
sua lista de execuo funcionar.
claro que no faz mal examinar o
cdigo de Pronto para Assar. Voc talvez
se surpreenda com o quanto que j sabe,
para no mencionar o quanto voc pode
descobrir se no souber.

O Cdigo Pronto para


Assar no funcionar em
alguns navegadores, se
O Cdigo Pronto estiver servindo suas
para Assar no pginas a partir de file://
em vez de um servidor de arq
funcionar no uivos
como localhost:// ou um ser
IE6 ou 7. vidor
hospedado localmente.
ortam
Verses do IE 6 ou 7 no sup
im, se voc estiver Vamos lidar mais com esta situao
localStorage. Ass nos
egu re-s e de est ar prximos captulos (que com bast
usando o IE, ass ante frequncia
8 ou pos teri or. aparece com novos recursos do
usando a verso HTML5). Por
ora, se voc no quiser executar
um servidor
ou copiar os arquivos para um serv
idor online
hospedado, tente usar o Safari ou
Chrome.
104 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 104 05/06/2014 16:18:00


events e handlers

Como adicionar o Cdigo Cdigo Pronto


Pronto para Assar... para Assar
Aqui est o cdigo Pronto para Assar para voc adicionar ao seu
aplicativo Webville Tunes, de modo que voc possa gravar essa
lista de execuo fabulosa que criou. Tudo o que voc tem de
fazer criar um arquivo novo, playlist_store.js, digitar o
cdigo abaixo e depois fazer algumas alteraes no seu cdigo
j existente (na prxima pgina).

function save(item) {
laylist");
var playlistarray = getStorearray("p
playlistarray.push(item);
.stringify(playlistarray));
localStorage.setItem("playlist", JSON
}

function loadPlaylist() {
var playlistarray = getSavedSongs();
ylist");
var ul = document.getElementById("pla
if (playlistarray != null) {
ngth; i++) {
for (var i = 0; i < playlistarray.le
var li = document.createEleme nt("li");
li.innerHTML = playlistarray[i] ;
ul.appendChild(li);
}
}
Digite isto dentro de
}
playlist_store.js.

function getSavedSongs() {
return getStorearray("playlist");
}

function getStorearray(key) {
Item(key);
var playlistarray = localStorage.get
ay == null || playlistarray == ") {
if (playlistarr
playlistarray = new array();
}
else {
rray);
playlistarray = JSON.parse(playlista
}
return playlistarray;
}

voc est aqui 105

PFCG_HeadFirstHTML5Prog.indb 105 05/06/2014 16:18:00


armazenando a playlist

Integrando seu Cdigo Pronto para Assar Cdigo Pronto


Precisamos fazer algumas alteraes para integrar o cdigo para Assar
de armazenamento. Primeiro, adicione uma referncia
a playlist_store.js ao seu elemento <head> em
playlist.html:
Adicione isto logo acima
do seu link para playlist.
<script src="playlist_store.js"></script>
js. Ele carrega o cdigo
<script src="playlist.js"></script> Pronto para Assar.
Agora, voc s precisa adicionar duas linhas ao seu cdigo, em
playlist.js, que carregar e gravar a lista de execuo:

function init() {
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
loadPlaylist(); Isto carrega as msicas gravadas
} a partir do localStorage quando
carregar sua pgina, de modo que voc
function handleButtonClick() { ver suas msicas gravadas.
var textInput = document.getElementById("songTextInp
ut");
var songName = textInput.value;
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("list");
ul.appendChild(li); vez que
E isto grava sua msica cada
save(songName);
voc adicionar uma lista de execuo.
}

Faa um test drive com as msicas gravadas


Adicionamos todas
OK, recarregue a pgina e estas msicas,
digite algumas msicas. Feche fechamos o
o navegador. Abra o navegador navegador, depois
e carregue a pgina novamente. o reabrimos,
Voc deve ver todas as msicas carregamos a pgina
armazenadas com segurana na e l esto elas.
sua lista de execuo.

OK, voc est cansado da suag-


lista de execuo e quer apa tulo
la? Ter que verificar o cap
do Armazenamento Web!
106 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 106 05/06/2014 16:18:01


events e handlers

Isto legal! Estamos realmente


comeando a fazer o cdigo e a pgina
interagirem entre si. Estou curioso,
porm, sobre funes, objetos e coisas
como element.appendChild( ). Preciso
aprender mais sobre essas coisas?

Momento perfeito.
Realmente, queramos lhe guiar atravs de um
exemplo interativo completo de marcao HTML
e JavaScript, trabalhando juntos para criar a
primeira parte de um aplicativo web. Se voc
pensar nisso, j fez muito:
1) Inseriu cdigo na sua pgina.
2) Configurou um evento de clique em boto e
escreveu o cdigo para capturar e lidar com o
clique.
3) Solicitou informaes ao DOM.
4) Criou e adicionou novos elementos ao DOM.
Nada mal! Agora, que voc tem um pouco de
sentido intuitivo sobre como tudo isso funciona
junto, vamos fazer um pequeno desvio pela
Avenida JavaScript para ver como coisas como
funes e objetos realmente funcionam.
Esta no ser uma excurso comum; no mesmo.
Levantaremos as tampas de bueiros e obteremos
uma viso rara de como Webville funciona.
Interessado? Venha, junte-se a ns no Captulo 4...

voc est aqui 107

PFCG_HeadFirstHTML5Prog.indb 107 05/06/2014 16:18:01


reviso dos event handres e do dom

Pontos de Bala

H muitos eventos acontecendo no seu navegador Voc pode comparar uma varivel com a string
o tempo todo. Se voc quiser responder a estes vazia usando um teste if e ==.
eventos, precisa manipul-los com manipuladores
Para adicionar um novo elemento ao DOM,
de eventos.
voc primeiro precisa criar o elemento e depois
Um evento de clique em boto disparado adicion-lo como filho de um elemento.
quando voc clica em um boto em uma
Use document.createElement para criar um novo
pgina web.
elemento. Passe o nome da tag (por exemplo
Voc manipula um evento de clique no boto, li) para a chamada da funo para indicar que
registrando uma funo para manipular o elemento criar.
evento. Voc faz isso escrevendo uma funo e
Para adicionar um elemento como filho de um
configurando a propriedade onclick do boto com
outro elemento no DOM, obtenha uma referncia
o nome da funo.
ao pai e chame appendChild sobre ele, passando
Se um manipulador de eventos de clique em no elemento filho que voc estiver adicionando.
boto estiver registrado, essa funo ser
Se voc adicionar mltiplos elementos a um pai
chamada quando voc clicar no boto.
usando appendChild, cada novo filho inserido
Voc escreve cdigo na funo manipuladora para aps os outros filhos, de modo que aparecem
responder ao evento de clique no boto. Voc aps ou abaixo dos outros filhos na pgina
pode alertar o usurio ou atualizar a pgina ou (supondo que voc no altere o layout com CSS).
fazer alguma outra coisa.
Voc pode usar a API Web Storage (localStorage)
Para obter o valor do texto que foi digitado em um para armazenar dados no navegador de
campo de texto de entrada em formulrio, voc um usurio.
usa a propriedade value da entrada.
Usamos localStorage para gravar msicas em
Se um usurio no tiver digitado nada em um listas de execuo, usando o cdigo Pronto
campo de texto de entrada de formulrio, o valor para Assar.
do campo ser a string vazia ().

108 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 108 05/06/2014 16:18:01


events e handlers

Palavras Cruzadas HTML5


D a si mesmo algum tempo para entender as interaes entre
HTML e JavaScript. Pense em como tudo isso funciona junto.
Enquanto voc estiver fazendo isso, misture tudo um pouco fazendo
essas palavras cruzadas. Todas as palavras so deste captulo.
1

2 3

5 6 7

10

11

Horizontais Verticais
5. Usado em Pronto para assar para habilitar 1. A grande matriarca da rvore DOM.
o armazenamento. 2. O DOM como uma _____ de famlia.
8. Insira novos elementos como um ____. 3. O valor default de um elemento de
9. O mtodo de DOM para adicionar entrada de formulrio se o usurio no
novos elementos. digitar nada a string _____.
10. O que h a frente? Funes e ______. 4. Artista usado na nossa msica
11. Um clique em boto um ______. de exemplo.
6. Cdigo que cuida dos eventos.
7. O mtodo de DOM para criar
novos elementos.

voc est aqui 109

PFCG_HeadFirstHTML5Prog.indb 109 05/06/2014 16:18:01


solues de exerccio

Exerccio - Soluo

Para a lista de execuo mostrada a


seguir, desenhe como o DOM ficar,
aps voc ter adicionado todas essas
msicas. Observe a ordem na qual as
msicas so adicionadas na pgina
e assegure-se de que os elementos
estejam nos lugares corretos no DOM
tambm. Aqui est a nossa soluo.

Aqui est o resto do DOM.

Voc teve que fazer alguma suposio sobre a ordem na Sim, porque isto afeta a ordem
qual os elementos <li> so adicionados ao pai? de exibio das msicas na pgina.
appendChild sempre insere o novo
elemento aps os filhos j existentes

110 Captulo 3

PFCG_HeadFirstHTML5Prog.indb 110 05/06/2014 16:18:02


events e handlers

Soluo das Palavras Cruzadas


HTML5
1
d
o
2 3
c v
r u a
v m z
4
o e e i
5 6 7
a r m a z e n a m a n t o l o c a l
e t a v r
n i e
8
f i l h o s a
p p t
u a e
9
a p p e n d c h i l d g e
a e l
d l e
10
o b j e t o s y m
r e
n
11
e v e n t o

voc est aqui 111

PFCG_HeadFirstHTML5Prog.indb 111 05/06/2014 16:18:02


PFCG_HeadFirstHTML5Prog.indb 112 05/06/2014 16:18:03
4 funes e objetos em JavaScript

JavaScript Srio

Voc j pode se chamar de scripter? Provavelmente, voc j


sabe fazer bastante coisa em JavaScript. No entanto, quem quer ser um
scripter quando pode ser um programador? hora de ficarmos srios e
acelerar um pouco hora de voc aprender sobre funes e objetos.
Eles so a chave para escrever um cdigo que seja mais poderoso, melhor
organizado e de mais fcil manuteno. Eles tambm so amplamente
usados pelas APIs JavaScript HTML5, de modo que, quanto melhor voc
entend-los, mais rapidamente poder passar para uma nova API e comear a
lidar com ela. Prepare-se: este captulo ir requerer sua ateno exclusiva...

este um novo captulo 113

PFCG_HeadFirstHTML5Prog.indb 113 05/06/2014 16:18:03


definindo suas prprias funes

Expandindo seu vocabulrio


Voc j pode fazer muito com JavaScript. Vamos examinar
algumas das coisas que voc sabe fazer:

Pegar um elemento do modelo


de objetos do documento.
<script>
var guessInput = document.getElementById("guess");
var guess = guessInput.value; Obter o valor de uma
var answer = null;
caixa de entrada de
texto em formulrio.
var answers = [ "red", Criar uma nova matriz
"green",
preenchida com strings.
"blue"]; Usar bibliotecas
de funes. Obter uma
var index = Math.floor(Math.random() * answers.length);
propriedade
de uma matriz,
Tomar decises baseadas como length.
if (guess == answers[index]) { em condies.
answer = "You're right! I was thinking of " + answers[index];
} else {
answer = "Sorry, I was thinking of " + answers[index]; Usar os
}
elementos de
uma matriz.
alert(answer);
</script>
Usar funes de
navegador, como alert.

At aqui, porm, muito do seu conhecimento informal claro,


voc pode obter um elemento do DOM e atribuir HTML novo a ele,
mas se voc for solicitado a explicar exatamente o que document.
getElementById tecnicamente, bom, isso poderia ser um pouco
mais desafiador. No se preocupe; quando voc terminar este
captulo, j estar preparado.
Para lhe conduzir, no comearemos com uma anlise profunda
e tcnica de getElementById, no, faremos algo um pouco mais
interessante. Estenderemos o vocabulrio de JavaScript e faremos com
que ele faa coisas novas.

114 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 114 05/06/2014 16:18:04


funes e objetos em JavaScript

Como adicionar suas prprias funes


Voc tem usado funes internas, como alert, ou mesmo Math.random,
mas e se quisesse adicionar as suas prprias? Digamos que voc quisesse
escrever algum cdigo como este:

var guessInput = document.getElementById("guess");


var guess = guessInput.value;
Estamos pegando o palpite
(guess) do usurio da mesma
var answer = checkGuess(guess); forma com que fizemos na
pgina anterior
alert(answer); ... mas, em vez de ter todo o
anterior como parte do cdigoresto do cdigo da pgina
ter uma boa funo checkGu principal, preferimos apenas
faa a mesma coisa. ess, que possamos chamar e
que
Crie uma funo checkGuess
1 Para criar uma funo, use a palavra-chave function
e coloque um nome aps, com checkGuess.

2 D sua funo zero ou mais


function checkGuess(guess) {
parmetros. Use parmetros
var answers = [ "red",
para passar valores sua
"green", funo. S precisamos de
"blue"]; um parmetro aqui: o palpite
(guess) do usurio.
var index = Math.floor(Math.random() * answers.length);

if (guess == answers[index]) {
answer = "You're right! I was thinking of " + answers[index];
} else {
answer = "Sorry, I was thinking of " + answers[index];
}
return answer;
}
4 Opcionalmente, retorne
3 Escreva um corpo para sua
um valor como resultado
funo, que vai entre as chaves.
da chamada funo. Aqui
O corpo contm todo o cdigo
estamos retornando uma
que executa o trabalho da funo.
string com uma mensagem.
Para o corpo aqui, reutilizaremos
nosso cdigo da pgina anterior.

voc est aqui 115

PFCG_HeadFirstHTML5Prog.indb 115 05/06/2014 16:18:04


funes e objetos javascript

Como uma funo funciona


Ento, como tudo isso funciona? O que acontece quando ns realmente
chamamos uma funo? Aqui est uma viso geral:

OK, primeiro precisamos de uma


function bark(dogName, dogWeight) {
funo
if (dogWeight <= 10) {
Digamos que voc tenha acabado de
return dogName + " says Yip";
escrever sua nova funo bark (latir),
que tem dois parmetros, dogName } else {
(nome do cachorro) e dogWeight (peso return dogName + " says Woof";
do cachorro), e tambm um trecho de }
cdigo muito impressionante que retorna }
o latido de um cachorro, dependendo do
peso dele, claro.

Aqui est nossa til


funo bark (latir).

Agora vamos cham-la!


Voc j sabe como chamar uma Aqui estamos
passando dois
funo: apenas use seu nome e Nosso nome de funo. argumentos, o
d a ela os argumentos que ela
precisa. Neste caso, precisamos nome e o peso.
de dois: uma string com o nome bark("Fido", 50);
do cachorro e um peso, que um
nmero inteiro.
Vamos fazer essa chamada e ver
como isto funciona: "Fido" 50

Quando chamamos bark, os function bark(dogName, dogWeight) {


argumentos so atribudos aos nomes if (dogWeight <= 10) {
dos parmetros na funo bark.
return dogName + " says Yip";
} else {
return dogName + " says Woof";
E sempre que os parmetros }
aparecerem na funo, os valores }
que passamos sero usados.

116 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 116 05/06/2014 16:18:04


funes e objetos em JavaScript

E deixamos o corpo da funo


fazer seu trabalho.
Aps termos atribudo o valor de function bark(dogName, dogWeight) {
cada argumento ao seu parmetro if (dogWeight <= 10) {
correspondente na funo como Fido return dogName + " says Yip";
a dogName (nome do cachorro) e o } else {
valor inteiro 50 a dogWeight (peso do return dogName + " says Woof";
cachorro) estamos prontos para avaliar
}
todos os comandos no corpo da funo.
}
Os comandos so avaliados de cima
para baixo, da mesma forma que todos
os outros cdigos que temos escrito. O Aqui avaliamos todo o
que diferente que estamos fazendo cdigo do corpo.
isso em um ambiente onde os nomes
de parmetros dogName (nome do
cachorro) e dogWeight (peso do
cachorro) so atribudos aos argumentos
que voc passou para a funo.

Opcionalmente, podemos ter Lembre-se de que funes no precisam


comandos de retorno no corpo... retornar um valor. Neste caso, a funo
bark (latir) retorna um valor.
... e onde retornamos um valor para o
cdigo que faz a chamada. Vejamos como A string Fido says
isso funciona: Woof (Fido diz Au)
retornada para o cdigo E quando a string
gWeight (peso do
Andando pela funo, rdoou igual a 10, ento que chama ( o cdigo retornada,
cachorro) no menoe e retornamos Fido says que chamou a funo atribuda varivel
usamos a clusula els ) como um valor string. bark (latir)). sound, que ento
Woof (Fido diz Au passada para alert,
resultando no dilogo.
"Fido says Woof"

function bark(dogName, dogWeight) {


if (dogWeight <= 10) {
return dogName + " says Yip"; var sound = bark("Fido", 50);
} else { alert(sound);
return dogName + " says Woof";
}
}

voc est aqui 117

PFCG_HeadFirstHTML5Prog.indb 117 05/06/2014 16:18:05


a importncia das funes e objetos

Eu continuo dizendo, todas


as APIs HTML5 so cheias de
funes, objetos e todas aquelas
coisas avanadas de JavaScript...

Se pudssemos ter outro momento para conversar...


Sabemos que, l pelo Captulo 4, voc achou que estaria voando
em um jato HTML5, e chegaremos l. Antes, porm, de chegarmos
a esse ponto, voc realmente precisa entender os fundamentos das
APIs JavaScript HTML5. Faremos isso neste captulo.
Assim, o que so esses fundamentos? Pense nas APIs JavaScript
HTML5 como constitudas por objetos, mtodos (em outros
casos conhecidos como funes) e propriedades. Para realmente
entender e dominar estas APIs, voc precisa entender essas coisas
muito bem. Claro, voc poderia tentar seguir em frente sem
conhec-las, mas sempre estar adivinhando como usar as APIs e
no conseguindo us-las integralmente (para no falar nos muitos
erros e cdigo cheio de falhas).
Ento, s queramos lhe dizer, antes que voc v a fundo neste
captulo, o que aprender a fazer. Aqui, a grande coisa est muito
melhor relatada do que em torno de 98% dos scripters JavaScript
por a. Srio.

118 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 118 05/06/2014 16:18:05


funes e objetos em JavaScript

A entrevista desta semana:


algumas coisas que voc no sabia...

Use a Cabea!: Bem-vinda, Funo! verdade, eles as usam todo o tempo:


Estamos muito interessados em saber o que alert, document.getElementById,
voc e o que faz. Math,random. Eles apenas no esto
definindo suas prprias funes.
Funo: Estou feliz em estar aqui.
Use a Cabea!: Bom, certo, alert faz
Use a Cabea!: Estamos percebendo
sentido, mas as outras duas no se parecem
agora que muitas pessoas que so novas em
muito com funes.
JavaScript no tendem a usar voc muito.
Elas apenas escrevem seu cdigo, linha a Funo: Ah, elas so funes, veja... espere
linha, de cima para baixo. Por que deveriam um segundo...
examinar voc?
... ah, acabaram de me dizer que os leitores
Funo: Sim, e isto uma pena, porque no aprenderam sobre estes tipos de
sou poderosa. Pense em mim da seguinte funes ainda, mas chegaro l em algumas
maneira: eu lhe dou uma forma de pegar o pginas. De qualquer forma, funes esto
cdigo, escrev-lo uma vez e depois reutiliz- em todos os lugares.
lo vrias vezes.
Use a Cabea!: Ento, uma coisa que uma
Use a Cabea!: Bom, desculpe-me por funo tem que fazer retornar um valor,
dizer isso, mas se voc estiver dando s certo? Quero dizer, e se eu no tiver um
pessoas apenas a capacidade de fazer a valor que queira retornar?
mesma coisa diversas vezes... um pouco
Funo: Muitas funes retornam valores,
entediante, no?
mas uma funo no tem que faz-lo.
Funo: No, funes so parametrizadas Diversas funes s fazem algo como
em outras palavras, cada vez que voc usa atualizar o DOM e depois retornar sem
a funo, passa a ela argumentos, de modo nenhum valor, e j est bom.
que pode obter resultados que variam,
Use a Cabea!: Ento nessas funes eu
dependendo do que passar.
no tenho um comando de retorno?
Use a Cabea!: Exemplos?
Funo: Isso mesmo.
Funo: Digamos que voc precise
Use a Cabea!: Bom, e quanto a dar nomes
informar aos seus usurios quanto os
para as suas funes; ouvi que voc no tem
itens no seu carrinho de compras custar,
que fazer isso tambm, se no quiser.
de modo que escreve uma funo
computeShoppingCartTotal. A Funo: OK, no vamos enervar muito
seguir, voc passa a essa funo diferentes a audincia. Que tal voltarmos a esse
carrinhos de compras que pertencem a tpico aps eles conhecerem um pouco
diferentes usurios e cada vez obtm o custo mais sobre mim?
apropriado do carrinho de compras. Use a Cabea!: Desde que voc me d
... A propsito, voltando ao seu comentrio uma entrevista exclusiva...
sobre novos codificadores que no esto Funo: Conversaremos...
usando funes, isto simplesmente no
voc est aqui 119

PFCG_HeadFirstHTML5Prog.indb 119 05/06/2014 16:18:06


parmetros e argumentos

No tenho certeza se entendo


a diferena entre um parmetro
e um argumento - so apenas
dois nomes para a mesma coisa?

No, so diferentes.
Quando voc define uma funo, pode defini-la com
um ou mais parmetros.
Aqui estamos definindo
trs parmetros: degrees,
mode e duration.

function cook(degrees, mode, duration) {


// your code here
}

Quando voc chama uma funo, a chama com argumentos:

cook(425.0, "bake", 45);

Estes so argumentos. H trs argumentos,


um nmero de ponto flutuante, uma string
e um nmero inteiro.

cook(350.0, "broil", 10);

Assim, voc s definir seus parmetros uma vez, mas


provavelmente chamar suas funes com muitos
argumentos diferentes. Voc ficaria surpreso com o nmero de
pessoas que entendem isso errado - at
livros entendem errado, de modo que, se
voc ler isso diferentemente em algum
outro lugar, agora voc sabe melhor...
Voc define uma funo com parmetros, chama
uma funo com argumentos.

120 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 120 05/06/2014 16:18:06


funes e objetos em JavaScript

A Anatomia de uma Funo A Anatomia de uma Funo


Agora que voc sabe como definir e chamar uma funo, vamos nos assegurar de
que temos a sintaxe correta. Aqui esto todas as partes da anatomia de uma funo:
Mesmo se a sua funo no
tiver parmetros, ainda assim
Siga a palavra-chave voc precisa de um conjunto de
function com o nome abertura e fechamento, como ( ).
da sua funo. E depois zero ou mais
Sempre comece com a parmetros separados por
palavra-chave function. vrgulas entre parnteses.

function addScore ( level , score ) {


O corpo fica entre
var bonus = level * score * .1; duas chaves e contm
um conjunto de
return score + bonus; comandos (como os
comandos com os quais
} voc est acostumado).
Uma funo pode incluir um O comando de retorno inclui uma
Aqui est a chave comando com a palavra-chave expresso, que retornada como
de fechamento return, mas no precisa. o resultado da chamada funo.
do corpo.

P: Por que os nomes de


parmetros tm var na frente?
P: Estou passando uma
varivel para minha funo
P: Ento, como eu altero
valores em uma funo?
Um parmetro uma nova
varivel, certo?
se eu alterar o valor do
parmetro correspondente na R: Voc s pode alterar os

R: Efetivamente, sim. A funo


minha funo, isso tambm
altera a minha varivel original?
valores de variveis globais (as
definidas fora das funes), ou
faz todo o trabalho de instanciar
a varivel para voc, de modo que
no precise fornecer a palavra-
R: No. Quando eu passar um
valor primitivo, ele copiado para
variveis que voc tenha definido
explicitamente na sua funo.
Falaremos sobre isso com um pouco
-chave var na frente dos seus o parmetro. Chamamos isto de mais de detalhes em breve.
nomes de parmetros.

P: Quais so as regras para


passagem por valor. Assim, se
voc alterar o valor do parmetro no P: O que uma funo retorna
se no tiver um comando de
corpo da sua funo, isto no tem
os nomes de funes? efeito no valor do seu argumento retorno?

R: As regras para dar nome a


uma funo so as mesmas para
inicial. A exceo a passagem de
uma matriz ou objeto, e chegaremos R: Uma funo sem comando de
retorno retorna undefined.
l em breve.
dar nomes a uma varivel.

voc est aqui 121

PFCG_HeadFirstHTML5Prog.indb 121 05/06/2014 16:18:06


exerccio sobre parnteses

Use seu conhecimento sobre funes e passagem de


argumentos para parmetros para avaliar o cdigo abaixo.
Aps passar pelo cdigo, escreva o valor de cada varivel
abaixo. Verifique suas respostas com a soluo no final do
captulo antes de seguir em frente.

function dogsAge(age) {
return age * 7;
}

var myDogsAge = dogsAge(4);

function rectangleArea(width, height) {


var area = width * height;
return area;
}
var rectArea = rectangleArea(3, 4);

function addUp(numArray) {
var total = 0;
for (var i = 0; i < numArray.length; i++)
{
total += numArray[i];
}
return total;
}

var theTotal = addUp([1, 5, 3, 9]);


function getAvatar(points) {
var avatar;
if (points < 100) {
avatar = "Mouse"; Escreva o
} else if (points > 100 && points < 1000) valor de cada
{
varivel aqui...
avatar = "Cat";
} else {
myDogsAge =
avatar = "Ape";
} rectArea =
return avatar; theTotal =
}
myAvatar =
var myAvatar = getAvatar(335);

122 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 122 05/06/2014 16:18:06


funes e objetos em JavaScript

Precisamos falar sobre


seu uso de variveis...

Variveis Locais e Globais


Conhea a diferena ou arrisque-se humilhao
Voc j sabe que pode declarar uma varivel usando a palavra-
-chave var e um nome em qualquer lugar do seu script:

Estas so variveis globais,


var avatar;
elas so acessveis em qualquer
var levelThreshold = 1000; lugar do seu cdigo JavaScript.
E sabe que tambm pode declarar variveis
dentro de uma funo:
Se uma
function getScore(points) { As variveis points, score varivel for
var score; e i so todas declaradas
dentro de uma funo.
declarada fora
for (var i = 0; i < levelThreshold; i++) { de uma funo,
//code here Ns as chamamos de
variveis locais porque
GLOBAL. Se
} s
so conhecidas localmente for declarada
return score; dentro da prpria funo.
}
dentro de
Mesmo se usarmos levelThreshold
dentro da funo, ela global uma funo,
porque declarada fora da funo.
LOCAL.
O que importa isso? Variveis so variveis, certo?
Bom, onde voc declara suas variveis determina o quo
visveis elas so para as outras partes do seu cdigo
e, posteriormente, entender como estes dois tipos de
variveis operam lhe ajudar a escrever um cdigo
mais sustentvel (para no mencionar que lhe ajudar
a entender o cdigo de outros).
voc est aqui 123

PFCG_HeadFirstHTML5Prog.indb 123 05/06/2014 16:18:07


escopo local e global

Conhecendo o escopo das suas variveis locais e globais


Onde voc definir suas variveis determinar seu escopo, ou seja, onde elas esto
definidas e onde no esto, onde esto visveis para o seu cdigo e onde no esto.
Vejamos um exemplo de variveis de escopo local e global lembre-se de que as
variveis que voc define fora de uma funo tm escopo global, e as variveis de
funo tm escopo local.
Estas quatro variveis tm
escopo global. Isto significa
que so definidas e visveis
em todo o cdigo abaixo.
var avatar = "generic"; Observe que, se voc conectar
var skill = 1.0; com scripts adicionais na
var pointsPerLevel = 1000;
sua pgina, eles vero estas
variveis globais tambm!
var userPoints = 2008;
A varivel level aqui local
function getAvatar(points) { e visvel apenas para o
cdigo dentro da funo
var level = points / pointsPerLevel;
getAvatar. Isto significa
que apenas esta funo pode
if (level == 0) { acessar a varivel level.
return Teddy bear; E no esqueamos o
} else if (level == 1) { parmetro points, que
return Cat;
tambm tem escopo local
na funo getAvatar.
} else if (level >= 2) {
return Gorilla; Observe que getAvatar
}
faz uso da varivel global
pointsPerLevel tambm!
}
Em updtadePoints temos
function updatePoints(bonus, newPoints) { uma varivel local i. Esta
for (var i = 0; i < bonus; i++) { varivel visvel para todo
newPoints += skill * bonus;
o cdigo em updatePoints.
} bonus e newPoints
tambm so locais em
return newPoints + userPoints;
updatePoints, enquanto
} que userPoints global.
userPoints = updatePoints(2, 100); E aqui no nosso cdigo
avatar = getAvatar(2112);
podemos usar apenas as
variveis globais, no temos
acesso a qualquer varivel
dentro das funes porque
elas no ficam visveis no
escopo global.

124 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 124 05/06/2014 16:18:07


funes e objetos em JavaScript

Eu poderia jurar que a


varivel estava bem atrs
de mim, mas, quando me
virei, ela tinha... sumido...

As vidas curtas das variveis


Quando voc uma varivel, trabalha duro
e a vida pode ser curta. Quer dizer, a menos
que voc seja uma varivel global, mas mesmo
para estas a vida tem seus limites. O que, ento,
determina a vida de uma varivel? Pense nisso
da seguinte maneira:
Variveis globais vivem tanto tempo
quanto a pgina. Uma varivel global
comea quando seu JavaScript carregado na
pgina. A vida dela termina quando a pgina
vai embora. Mesmo se voc recarregar a mesma
pgina, todas as suas variveis globais so
destrudas e depois recriadas na pgina
recm-carregada.
Variveis locais geralmente
desaparecem quando sua funo
termina. Variveis locais so criadas quando Dizemos geralmente porque h algumas
sua funo chamada e vivem at que ela formas avanadas de reter as locais
retorne (com um valor ou no). Isto dito, voc um pouco mais tempo, mas no nos
pode pegar os valores das suas variveis locais preocuparemos com elas agora
e retorn-los a partir da funo antes que elas
encontrem seu criador digital.
Assim, NO h escapatria da pgina, h?
Se voc for uma varivel local, sua vida vem
e vai rapidamente e, se for suficientemente
sortudo para ser uma global, s vive enquanto o
navegador no recarregar a sua pgina.
Tem que haver um meio de escapar da pgina!

Junte-se a ns no captulo
Podemos encontrar um! No podemos?

Armazenamento Web, em
que ajudaremos nossos
dados a escapar da
terrvel recarga de pgina.

voc est aqui 125

PFCG_HeadFirstHTML5Prog.indb 125 05/06/2014 16:18:08


funes com valores

O que acontece quando


nomeio uma varivel local
com o mesmo nome de
uma global j existente?

Voc esconde a sua global.


Aqui est o que isto significa: digamos que voc tenha
uma varivel global beanCounter e depois declare
uma funo, assim:

var beanCounter = 10;


Temos uma
global e uma
function getNumberOfItems(ordertype) { local!
var beanCounter = 0;
if (ordertype == "order") {
// do some stuff with beanCounter...
}
return beanCounter;
}
Quando voc faz isso, quaisquer referncias a
beanCounter dentro da funo so para a varivel
local e no global. Assim, dizemos que a varivel
global est escondida pela local (em outras palavras, no
podemos v-la porque a verso local est na frente).

Observe que as variveis local


global no tm efeito uma na e
outra: se voc alterar uma, isto
no tem efeito na outra. Elas
so variveis independentes.

126 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 126 05/06/2014 16:18:08


funes e objetos em JavaScript

P: Guardar os escopos de todas estas locais


e globais confuso, ento por que no ficar
cdigo, como tambm algumas pessoas acham
que este comportamento pode mudar algum
apenas com globais? o que eu sempre fiz. dia nas implementaes de JavaScript (o que

R: Se voc estiver escrevendo um cdigo que


seja complexo ou que precise ser mantido por um
provavelmente estragaria seu cdigo).

P: Eu preciso definir uma funo antes de


perodo longo de tempo, ento realmente tem que us-la, ou ela pode aparecer em qualquer
ver como gerencia suas variveis. Quando se super lugar do meu script?
zeloso na criao de variveis globais, torna-se difcil
registrar quando suas variveis esto sendo usadas (e R: Declaraes de funo podem aparecer em
qualquer lugar do seu script. Voc pode declarar
onde est fazendo alteraes nos valores delas) e isso
pode levar a um cdigo com erros. Tudo isso se torna uma funo abaixo de onde voc a usa, se quiser.
ainda mais importante quando voc est escrevendo Isto funciona porque, quando voc carrega pela
um cdigo com outros colegas ou est usando primeira vez sua pgina, o navegador analisa todo
bibliotecas de terceiros (embora se essas bibliotecas o JavaScript na pgina (ou no arquivo externo)
forem bem escritas, devem estar estruturadas para e v a declarao da funo antes de comear a
Continuaramos evitar esses problemas). executar o cdigo. Voc tambm pode colocar suas
neste tpico se Assim, use globais onde fizer sentido, mas use-as
declaraes de variveis globais em qualquer lugar
do seu script, embora recomendemos que declare
este fosse um com moderao e, sempre que possvel, torne suas todas as suas variveis globais no topo dos seus
livro para se variveis locais. medida em que ganhar mais arquivos, de modo que sejam fceis de localizar.
aprofundar em experincia com JavaScript, poder investigar
programao tcnicas adicionais para estruturar cdigo de modo Uma coisa a ter em mente ao usar mais de um
JavaScript, que seja mais sustentvel. arquivo JavaScript externo que, se voc tiver
mas dado
que o Use
P: Tenho variveis globais na minha pgina,
mas estou carregando em outro arquivo
duas funes em diferentes arquivos com o mesmo
nome, a funo que o navegador v por ltimo a
que usada.
a Cabea!
Programao
JavaScript tambm. Esses arquivos tm
conjuntos separados de variveis globais? P: Todos parecem reclamar do excesso de
em HTML5,
R:
uso de variveis globais em JavaScript. Por
vamos apenas Existe apenas um escopo global, de modo que que isso? A linguagem foi mal projetada ou as
sugerir que todo arquivo que voc carrega v o mesmo conjunto pessoas no sabem o que esto fazendo? E o
voc explore de variveis (e cria globais no mesmo espao). por que fazer a respeito?
este tema no
futuro para
isso que to importante que voc tenha cautela com
o uso de variveis, para evitar colises (e reduzir ou R: Globais so, muitas vezes, usadas em
excesso em JavaScript. Um pouco disso porque
melhorar a eliminar variveis globais quando puder).
qualidade do
seu cdigo!
P: Vi cdigos nos quais as pessoas no usam
a palavra-chave var ao atribuir um valor a um
a linguagem facilita comear a codificar logo
isto uma coisa boa porque JavaScript
no impe muita estrutura ou overhead a voc.
novo nome de varivel. Como isso funciona? A desvantagem quando as pessoas escrevem

R: Sim, isso pode ser feito; quando voc atribui


um valor a um nome de varivel que no tenha
cdigo importante desta forma e ele tem que ser
alterado e mantido a longo prazo (e isso mais ou
menos descreve todas as pginas web). Tendo
sido declarado anteriormente, ele tratado como dito isto, JavaScript uma linguagem poderosa e
uma nova varivel global. Tenha cuidado, ento; inclui recursos como objetos que voc pode usar
se voc fizer isso dentro de uma funo, estar para organizar seu cdigo de uma forma modular.
criando uma varivel global. Observe que no Muitos livros foram escritos sobre este tpico,
recomendamos esta prtica de codificao; ela e lhe daremos uma pequena ideia sobre objetos
no apenas potencialmente confusa ao se ler o na segunda metade deste captulo (o que est a
apenas algumas pginas de distncia).

voc est aqui 127

PFCG_HeadFirstHTML5Prog.indb 127 05/06/2014 16:18:08


conversa furada antes de introduzir os objetos

Ah, mencionamos que funes tambm so valores?


OK, voc usa variveis para armazenar nmeros, valores booleanos, strings,
matrizes, todos os tipos de coisas. Mencionamos que voc tambm pode
atribuir uma funo a uma varivel? Veja isto:

function addOne(num) { Vamos definir uma funo simples que


return num + 1; adiciona o nmero um ao seu argumento.
}
Agora vamos fazer algo novo. Usaremos
o nome da funo addOne e atribuiremos
var plusOne = addOne; addOne a uma nova varivel, plusOne.
Observe que no est sendo chamada a funo com
addOne(), estamos apenas usando a funo name.
var result = plusOne(1);
plusOne atribuda a uma funo, de
modo que podemos cham-la com um
Aps esta chamada, argumento integer igual a 1.
result vale 2.

Bom, ns no apenas no mencionamos este pequeno detalhe sobre


funes antes, mas tambm no fomos totalmente francos quando lhe
contamos sobre a anatomia de uma funo na verdade, voc nem
precisa dar um nome a ela. Isso mesmo: sua funo pode ser annima. O
que isto significa e por que voc iria querer tal coisa? Primeiro, vejamos
como voc cria uma funo sem nome:

Aqui estamos criando uma funo e no usando um nome...


function(num) { hmmm... mas como fazemos alguma coisa com ela?
return num + 1;
} Vamos fazer de novo e, desta
vez, atribu-la a uma varivel.
var f = function(num) {
return num + 1;
} E depois podemos us-la
var result = f(1);
para chamar a funo.
alert(result);

Aps esta chamada,


o resultado 2.

128 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 128 05/06/2014 16:18:08


funes e objetos em JavaScript

Isto deve comear


a parecer um pouco
D uma olhada neste cdigo: o que voc acha que est acontecendo? mais compreensvel
com o que j vimos
var element = document.getElementById("button");
element.onclick = function () {
alert("clicked!");
No se preocupe se ainda no tiver
} entendido 100% disto, chegaremos l...

O que voc pode fazer com funes como valores?


Ento, o que importante? Por que isto til? Bom, o importante no tanto que
podemos atribuir uma funo a uma varivel. Esta apenas a nossa forma de mostrar
a voc que uma funo realmente um valor. Voc sabe que pode armazenar valores
em variveis ou matrizes, pode pass-los como argumentos para funes ou, como
veremos em breve, pode atribu-los a propriedades de objetos. Em vez de lhe guiar pelas
maneiras atravs das quais as funes annimas so teis, vamos apenas examinar uma
das muitas formas de quando usar funes como valores comea a ficar interessante:

Aqui est uma funo init simples.


function init() {
o que
Aqui estamos atribuindo a funoad
alert("you rule!");
onl .
} definimos ao manipulador
window.onload = init; Veja, j estvamos usando
funes como valores!
Aqui estamos criando uma fun o sem nome
Ou melhor ainda: seu valor
explcito e depois atribuindowin dow.onload.
diretamente propriedade
window.onload = function() {
No se preocupe se window.
onload ainda no estiver
alert("you rule!");
muito clara, em breve
} Puxa, no mais examinaremos isso tudo.
simples e legvel?

Voc talvez esteja comeando a ver que funes podem fazer algumas coisas alm
de apenas empacotar cdigo para reuso; para lhe dar uma ideia melhor de como
tirar vantagem integral de funes, veremos como elas se adaptam a JavaScript e
depois juntaremos tudo.

voc est aqui 129

PFCG_HeadFirstHTML5Prog.indb 129 05/06/2014 16:18:09


conversa furada antes de introduzir os objetos

Autores? Al? Al? Eu sou a


garota que comprou o livro de
HTML5, lembram-se de mim?
O que tudo isto tem a ver
com HTML5?

Bom, achamos que j havamos visto


isso... mas parece que pegamos voc e
rodamos por metade da cidade com o taxmetro
ligado (quando poderamos ter lhe levado
direto para o centro da cidade). Bom, ento
lembre-se de que logo comearemos a dirigir
para as APIs que funcionam com HTML5, no
prximo captulo. Fazer isso requer que voc
realmente entenda funes, objetos e alguns
outros tpicos relacionados.
Ento, espere um pouco na verdade, voc j
est na metade do caminho! No se esquea de
que este o captulo onde voc ir de scripter
a programador, de um jquei HTML/CSS para
algum capaz de criar aplicativos reais.

Ns j mencionamos que isto


provavelmente lhe trar muito
mais dinheiro tambm?

130 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 130 05/06/2014 16:18:09


funes e objetos em JavaScript

Com objetos, o futuro


to brilhante que temos de
usar culos escuros...

Algum disse Objetos?!


Ah, o nosso tpico favorito! Objetos levaro suas habilidades de programao
em JavaScript a um nvel acima eles so a chave para gerenciar cdigo
complexo, para entender o DOM, organizar seus dados e so at a forma
fundamental na qual as APIs JavaScript HTML5 so empacotadas (e esta
apenas nossa lista curta!). Dito isso, objetos so um tpico difcil, certo? Ha!
Vamos usar a cabea primeiro e voc os usar rapidamente.
Aqui est o segredo dos objetos em JavaScript: eles so apenas uma coleo de
propriedades. Vamos pegar um exemplo, digamos, um cachorro. Um
cachorro tem propriedades:

A maioria dos cachorros


tem nome, como o Fido aqui.

Todos os cachorros
tm um peso.
Todos os cachorros tm uma
lista de atividades que gostam,
como caminhar e buscar bolas.
E uma raa. Neste caso,
chamaramos Fido de uma
Dog raa misturada.
voc est aqui 131

PFCG_HeadFirstHTML5Prog.indb 131 05/06/2014 16:18:09


objetos e propriedades

Pense em propriedades...
claro que o Fido seria o primeiro a admitir que h muito mais nele do
que apenas algumas propriedades, mas, para este exemplo, estas sero as
que precisamos capturar em software. Vamos pensar nestas propriedades
em termos de tipos de dados JavaScript:

E um conjunto de propriedades... Temos algumas strings


Como voc representando o nome
provavelmente e a raa do cachorro.
nome: Fido
imaginou, teremos E temos um
um objeto integer para
representando peso: 40
o peso.
um cachorro.
Cachorro raa: Misturada

gosta:[caminhadas, buscar bolas]

E juntaremos os gostos do
cachorro em uma matriz de
strings, zero ou mais; aqui
temos dois interesses do Fido.

Como criar um objeto em JavaScript


Assim, temos um objeto com algumas propriedades; como criamos isto
usando JavaScript? Aqui est como:

Atribuiremos nosso Perceba que cada


Inici e um obje to com apen as a propriedade separada
objeto varivel fido. chav e esqu erda , depo is toda s por uma vrgula. NO
as prop ried ades vo dent ro. um ponto e vrgula!
var fido = { Este objeto possui quatro propriedades:
name: "Fido", nome, peso, raa e gostos.
weight: 40, Perceba que o valor do peso um
breed: "Mixed", nmero, 40, e os valores de raa
e nome so strings.
loves: ["walks", "fetching balls"]
};
E, claro, temos uma
matriz para armazenar
os gostos do cachorro.

132 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 132 05/06/2014 16:18:09


funes e objetos em JavaScript

Algumas coisas que voc pode fazer com objetos


1 Acessar propriedades de objetos com a notao de ponto:

if (fido.weight > 25) { Use um .


alert("WOOF");
Use o objeto com
um . e um nome de
} else {
propriedade para
alert("yip"); acessar o valor dessa Aqui est o objeto ... e, a seguir,
} propriedade. o nome da
propriedade.

2 Acessar propriedades usando uma string com a notao [ ]:


Agora use [ ] em torno
var breed = fido["breed"]; Use o objeto do nome da propriedade.
if (breed == "mixed") { junto com o nome
alert("Best in show"); da propriedade
}
entre aspas e em Aqui est o objeto ... e o nome da
colchetes para propriedade
acessar o valor entre aspas.
dessa propriedade.
Achamos a notao de pontos
3 Alterar o valor de uma propriedade: a mais legvel das duas.
Estamos alterando o peso do Fido
fido.weight = 27;
fido.breed = "Chawalla/Great Dane mix"; ... sua raa
fido.loves.push("chewing bones"); ... e adicionando um novo item
sua matriz de gostos.
push simplesmente adiciona um
novo item ao final de uma matriz.

4 Enumerar todas as propriedades de um objeto:

Enumerar passar por todas


as propriedades do objeto.
var prop; Para enumerar as propriedades, usaremos um for-in loop.
Cada vez que
for (prop in fido) {
percorremos o loop, a
alert("Fido has a " + prop + " property "); varivel prop obtm o
if (prop == "name") { valor da string do nome
prxima propriedade.
alert("This is " + fido[prop]); E
usamos a n da
} acessar o v otao [ ] para
alor dessa
} Observe que a ordem das propriedades propriedad
e.
arbitrria , ento no conte com
uma determinada ordenao.
voc est aqui 133

PFCG_HeadFirstHTML5Prog.indb 133 05/06/2014 16:18:10


o que podem fazer os objetos?

5 Divertir-se com uma matriz de objetos:


Aqui, estamos atribuindo o valor dos
var likes = fido.loves; gostos de fido varivel likes.
var likesString = "Fido likes";

for (var i = 0; i < likes.length; i++) { Podemos percorrer a matriz de


likesString += " " + likes[i]; gostos e criar uma likesString
} de todos os interesses de fido.
alert(likesString);
E podemos usar a string em um alert.

6 Passar um objeto para uma funo:


Podemos passar um objeto para
function bark(dog) { uma funo da mesma forma que
if (dog.weight > 25) { qualquer outra varivel.
alert("WOOF"); E, na funo, podemos acessar as
} else {
propriedades do objeto normalmente,
usando o nome do parmetro para o
alert("yip");
objeto, claro.
}
}
Estamos passando fido
bark(fido);
como nosso argumento
para a funo bark
(latir), que espera um
objeto dog (cachorro).

O Operador Ponto .
O operador ponto (.) lhe d acesso s
propriedades de um objeto. De modo geral, ele
mais fcil de ler do que a notao [string].
fido.weight o tamanho de fido.
fido.breed a raa de fido.
fido.name o nome de fido.
fido.loves uma matriz contendo os
interesses de fido.

134 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 134 05/06/2014 16:18:10


funes e objetos em JavaScript

Podemos adicionar
propriedades a objetos
aps t-los definido?

Sim, voc pode adicionar ou excluir


propriedades a qualquer momento.
Para adicionar uma propriedade a um objeto,
voc simplesmente atribui uma valor a uma nova
propriedade, desta maneira:

fido.age = 5;
e, a partir da, fido ter uma nova propriedade: age
(idade).
Da mesma forma, voc pode excluir qualquer
propriedade com a palavra-chave delete, desta forma:

delete fido.age;
Quando voc exclui uma propriedade, no est
excluindo apenas o valor da mesma, est excluindo a
prpria propriedade. Na verdade, se voc usar fido.
age aps exclu-la, ela ser avaliada como undefined.
A expresso delete retorna true se a propriedade
for excluda com sucesso (ou se voc excluir uma
propriedade que no existe, ou se o que voc estiver
tentando excluir no for uma propriedade de um objeto).

voc est aqui 135

PFCG_HeadFirstHTML5Prog.indb 135 05/06/2014 16:18:10


objetos como argumentos

Vamos falar sobre passar objetos para funes


J falamos um pouco sobre como argumentos so passados para funes
argumentos so passados por valor, de modo que, se voc passar um integer, o
parmetro correspondente da funo receber uma cpia do valor desse integer para
seu uso na funo. As mesmas regras so verdadeiras para objetos, porm, temos que
examinar um pouco mais de perto o que a varivel armazena quando atribuda a
um objeto para sabermos o que isto significa.
Quando um objeto atribudo a uma varivel, esta armazena uma referncia ao objeto,
no o prprio objeto. Pense em uma referncia como um ponteiro para um objeto.

fido
ref

nome: Fido

peso: 40
Quando um objeto atribudo
a uma varivel, esta recebe Cachorro raa: Misturada
uma referncia para ele. Ela
no armazena o objeto. gosta:[caminhadas, buscar bolas]

Assim, quando voc chamar uma funo e passar um objeto para ela,
estar passando uma referncia para o objeto - no o prprio objeto,
apenas um ponteiro para ele. Uma cpia da referncia passada para
o parmetro, o qual ento aponta para o objeto original.

Quando chamamos bark (latir) e


passamos fido para ela na forma
ref

de um argumento, obtemos uma


cpia da referncia ao objeto
dog (cachorro).
function bark(dog) {

... code here ...

Ento, o que tudo isso significa? Bom, quando voc altera uma propriedade
do objeto, est alterando a propriedade do objeto original, no uma cpia
e, assim, ver todas as alteraes que fizer em um objeto dentro e fora da
sua funo. Passaremos por um exemplo usando uma funo loseWeight
(perder peso) para dogs (cachorros)...

136 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 136 05/06/2014 16:18:10


funes e objetos em JavaScript

Colocando Fido em dieta


Vamos ver o que acontece quando passamos fido para Nos
loseWeight (perder peso) e alteramos a propriedade
dog.weight (peso de cachorro).
Bastidores

1 Definimos um objeto, fido, e estamos


passando-o para uma funo, loseWeight.

fido uma referncia a um


objeto, o que significa que ele
no est na varivel fido, mas nome: Fido
apontado por ela.
peso: 40

Cachorro
ref

raa: Misturada

gosta:[caminhadas, buscar bolas]


fido.weight = 48;
... Quando passamos fido
loseWeight(fido); para uma funo, estamos
passando a referncia
para o objeto.
2 O parmetro dog da funo loseWeight
recebe uma cpia da referncia a fido. Assim,
quaisquer alteraes nas propriedades do
parmetro afetam o objeto que foi passado.

Quando passamos fido para


loseWeight, o que atribudo ao A referncia a dog
parmetro dog uma cpia da fido uma cpia dafido.
referncia, no do objeto. Assim,eto. referncia a
e dog apontam para o mesmo obj
ref

function loseWeight(dog) {
dog.weight = dog.weight - 10;
Assim, quando subtramos 10 de
dog.weight, estamos alterando o
} valor de fido.weight.
alert(fido.name + " now weighs " + fido.weight);

voc est aqui 137

PFCG_HeadFirstHTML5Prog.indb 137 05/06/2014 16:18:11


introduzindo o aplicativo webville cinema

EM EXIBICAO NO CINE WEBVILLE


O Cine Webville procurou nossa ajuda com sua API
JavaScript. Vamos comear de forma simples e projetar
o objeto do filme para eles. O que precisamos de
alguns objetos filme, que incluam, cada um, ttulo,
gnero, avaliao e os horrios de exibio. Siga em
frente e esboce o seu projeto de objeto filme aqui (voc
pode usar nosso objeto dog como modelo). Aqui esto
alguns dados de exemplo, que voc pode usar para
colocar nos seus objetos:
Plan 9 from Outer Space, s 15h, 19h e 23h; do
gnero cult classic; e tem avaliao de 2 estrelas.
Forbidden Planet, s 17h e s 21h ; seu gnero fico
cientfica clssica; avaliao 5 estrelas.

A soluo est na prxima


pgina, mas no olhe at ter Sinta-se livre para
terminado o exerccio. Srio. adicionar os seus
favoritos em vez destes.
Projete os seus objetos aqui.

138 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 138 05/06/2014 16:18:12


funes e objetos em JavaScript

EM EXIBICAO NO CINE WEBVILLE


Como foi a criao do seu objeto filme? SOLUCAO
Aqui est a nossa soluo:

movie1 tem quatro


propriedades: title
(ttulo), genre (gnero),
Criamos dois rating (nota) e showtime
objetos, movie1 (horrio de exibio).
(filme1) e movie2 var movie1 = {
title e genre so strings.
(filme2), para os title: "Plan 9 from Outer Space",
dois filmes. genre: "Cult Classic",
rating um nmero.
rating: 5,
showtimes: ["3:00pm", "7:00pm", "11:00pm"]
};
E showtime uma matriz que contm os
horrios do filme na forma de strings.
movie2 tambm tem quatro proprie dades:
title (ttulo), gen re (g ner o), rat ing
o).
var movie2 = {
(nota) e showtime (horrio de exibi
title: "Forbidden Planet",
genre: "Classic Sci-fi",
rating: 5, Lembre-se de separar suas
showtimes: ["5:00pm", "9:00pm"] propriedades com vrgulas.
};

Usamos os mesmos nomes de propriedade,


mas diferentes valores de movie1.

voc est aqui 139

PFCG_HeadFirstHTML5Prog.indb 139 05/06/2014 16:18:12


implementando next showing

Nossa prxima exibio s...


J tivemos uma ideia do que significa misturar objetos e funes.
Vamos mais a fundo, escrevendo um pouco de cdigo que nos
informe quando ser a prxima exibio de um filme. Nossa
funo receber um filme como argumento e retornar uma string
contendo o prximo horrio, baseada no horrio atual.
Estamos pegando o horrio corrente
Aqui est nossa nova funo, usando o objeto Date de JavaScript.
que recebe um objeto movie. No nos preocuparemos sobre os detalhes
dele ainda, mas j sabemos que retorna o
horrio corrente em milissegundos.
function getNextShowing(movie) {
us e a m at ri z de movie, showtimes,
var now = new Date().getTime(); Agora rrios de exibio
.
e itere pelos hoPara cada horrio de
for (var i = 0; i < movie.showtimes.length; i++) { exibio, obtemos seu
var showtime = getTimeFromString(movie.showtimes[i]); horrio em milissegundos e
if ((showtime - now) > 0) { depois comparamos.
return "Next showing of " + movie.title + " is " + movie.showtimes[i];
}
}
Se o horrio ainda no tiver passado, ento ser
return null;
Se no houver nais a prxima exibio, de modo que o retornamos.
}
exibies, apenas
retornamos nulo.
function getTimeFromString(timeString) { Cdigo Pronto para Assar
var theTime = new Date();
var time = timeString.match(/(\d+)(?::(\d\d))?\s*(p?)/); Aqui est um pouco
theTime.setHours( parseInt(time[1]) + (time[3] ? 12 : 0) ); de cdigo pronto
theTime.setMinutes( parseInt(time[2]) || 0 ); para assar que recebe
return theTime.getTime(); uma string com o
} formato como 1am
No se preocupe com este cdigo; ele usa ou 3pm e a converte
expresses regulares, o que voc aprender para um horrio em
posteriormente no seu estudo em JavaScript. Agora usamos a milissegundos.
Por enquanto, apenas use-as! funo chamando
var nextShowing = getNextShowing(movie1); getNextShowing (pegar
alert(nextShowing); prxima exibio) e
nextShowing = getNextShowing(movie2); usamos a string que ela
alert(nextShowing); retorna em um alert
E fazemos isso de novo com movie2.

140 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 140 05/06/2014 16:18:13


funes e objetos em JavaScript

Como o Encadeamento funciona ...


Voc entendeu isto no cdigo anterior?

movie.showtimes.length

Isto no se parece com nada que tenhamos visto antes. , na verdade, apenas um
atalho para uma srie de passos que poderamos ter dado para obter o comprimento
da matriz showtimes dos objetos movie. Poderamos ter escrito o seguinte:
Primeiro, pegamos a
var showtimesArray = movie.showtimes; matriz showtimes.
var len = showtimesArray.length; Depois, a usamos para
acessar a propriedade length.
Podemos, porm, fazer tudo isso de uma s vez encadeando as
expresses. Vamos ver como isso funciona:

movie.showtimes.length

1 Avalia o 2 Que possui uma 3 Que possui uma


objeto propriedade propriedade
movie. showtimes, que chamada length.
uma matriz.

Testando no drive-in
Digite o cdigo da pgina anterior e faa um teste com ele. Voc ver que a
funo getNextShowing recebe qualquer filme e descobre seu prximo
horrio de exibio. Sinta-se vontade para criar alguns objetos movie novos e
test-los tambm. Ns fizemos isso, no nosso horrio local de 12:30pm:

var banzaiMovie = {
title: "Buckaroo Banzai",
genre: "Cult classic",
rating: 5,
showtimes: ["1:00pm", "5:00pm", "7:00pm"]
}
Observao: nosso cdigo
no tem muita qualidade
de cdigo de produo;
var nextShowing = getNextShowing(banzaiMovie); se voc execut-lo aps a
alert(nextShowing); ltima exibio do filme,
ele retornar nulo. Tente
novamente amanh.
voc est aqui 141

PFCG_HeadFirstHTML5Prog.indb 141 05/06/2014 16:18:13


objetos e mtodos

Objetos podem ter comportamento tambm...


Voc no achou que objetos servissem apenas para armazenar nmeros,
strings e matrizes, achou? Objetos so ativos, podem fazer coisas.
Cachorros no ficam apenas sentados: eles latem, correm, brincam de
pegar. Por isso, um objeto cachorro deveria ser ativo tambm! Dado
tudo o que voc aprendeu neste captulo, est pronto para adicionar
comportamento aos seus objetos. Aqui est como fazemos isso:
var fido = { Quando um
name: "Fido",
weight: 40, objeto possui
breed: "Mixed", uma funo,
loves: ["walks", "fetching balls"]
bark: function() { Podemos adicionar dizemos que
uma funo
}
alert("Woof woof!");
diretam ente ao esse objeto
};
nosso objeto, possui um
desta maneira.
Em vez de dizer que isto Perceba que estamos usando mtodo.
uma funo no objeto, uma funo annima e
apenas dizemos que atribuindo-a propriedade
um mtodo. Eles so a bark do objeto.
mesma coisa, mas todos
se referem a funes de
objetos como mtodos

Para chamar um mtodo em um objeto, usamos o nome do


objeto junto com o do mtodo com a nossa notao de ponto e
fornecemos os argumentos necessrios.

fido.bark();
Dizemos para um objeto fazer
alguma coisa, chamando mtodos
nele. Neste caso, estamos
chamando o mtodo bark do fido.

142 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 142 05/06/2014 16:18:13


funes e objetos em JavaScript

Enquanto isso, de volta ao Cine Webville...


Agora que o seu conhecimento sobre objetos est se expandindo,
podemos voltar e melhorar o cdigo do cinema. J escrevemos
uma funo getNextShowing, que recebe um filme como
argumento, mas poderamos, em vez disso, fazer dela uma parte
do objeto movie, tornando-a um mtodo. Vamos fazer isso:

var movie1 = {
title: "Plan 9 from Outer Space",
genre: "Cult Classic", Pegamos nosso cdigo e o
rating: 5, colocamos em um mtodo do
showtimes: ["3:00pm", "7:00pm", "11:00pm"], objeto movie1 com o nome de
propriedade getNextShowing.
getNextShowing: function(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 showing of " + movie.title + " is " +
movie.showtimes[i];
}
}
return null;
}
};

Sabemos, porm, que isso pode no estar muito certo...


Na verdade, no podemos simplesmente jogar a funo neste objeto
porque getNextShowing recebe um argumento movie, e o que realmente
queremos chamar getNextShowing desta forma:
Nenhum argumento deve ser
var nextShowing = movie1.getNextShowing(); necessrio aqui; est claro de qual
filme queremos a prxima exibio,
ou seja, queremos movie1.
Tudo bem. Ento como consertaremos isso? Temos que remover o parmetro
da definio do mtodo getNextShowing, no entanto precisamos fazer algo
com todas as referncias a movie.showtimes no cdigo, pois, assim que
removermos o parmetro, movie no existir mais como uma varivel. Vejamos...

voc est aqui 143

PFCG_HeadFirstHTML5Prog.indb 143 05/06/2014 16:18:13


reformulando uma funo como um mtodo

Vamos tirar o parmetro do filme...


Tomamos a liberdade de remover o parmetro movie e todas as suas
referncias, o que nos deixa com este cdigo:

var movie1 = {
Destacamos as alteraes abaixo...
title: "Plan 9 from Outer Space",
genre: "Cult Classic",
rating: 5,
Tudo isso parece muito razovel,
showtimes: ["3:00pm", "7:00pm", "11:00pm"],
mas precisamos pensar em como
o mtodo getNextShowing
getNextShowing: function() { usar a propriedade showtimes...
var now = new Date().getTime(); ... estamos acostumados
a variveis locais (que
for (var i = 0; i < showtimes.length; i++) {
showti mes no ) e
globais (que showtimes
var showtime = getTimeFromString(showtimes[i]);
no ). Hmmm...
if ((showtime - now) > 0) {
return "Next showing of " + title + " is " + showtimes[i];
}
}
return null;
Ah, e aqui est outra,
a propriedade title.
}
};

E agora?
Tudo bem. Aqui est a charada: temos estas referncias s propriedades showtimes e
title. Normalmente em uma funo, estamos referenciando uma varivel local, uma
varivel global ou um parmetro da funo, mas showtimes e title so propriedades do
objeto movie1. Bom, talvez isto funcione... Ser que JavaScript pode ser suficientemente
esperta para descobrir?
No. No funciona. Sinta-se vontade para testar; JavaScript lhe informar que as variveis
showtimes e title esto indefinidas. Como pode ser?
OK, aqui est o que faremos: estas variveis so propriedades de um objeto, mas no esto
informando a JavaScript de qual objeto. Voc talvez esteja dizendo para si mesmo Bom,
obviamente queremos dizer ESTE objeto, este bem aqui! Como poderia haver confuso a
respeito? Queremos ainda as propriedades deste objeto. Na verdade, h uma palavra-
-chave em JavaScript chamada this (isto) e exatamente com ela que voc informar
JavaScript. This quer dizer o objeto no qual estamos.
A situao, na verdade, um pouco mais complicada do que parece, (chegaremos l em
um segundo), mas, por enquanto, adicionaremos a palavra-chave this e faremos este
cdigo funcionar.
144 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 144 05/06/2014 16:18:13


funes e objetos em JavaScript

Adicionando a palavra-chave this


Adicionaremos this a cada local em que especificarmos uma propriedade. Deste modo,
informaremos JavaScript que queremos a propriedade deste objeto:

var movie1 = {
title: "Plan 9 from Outer Space",
genre: "Cult Classic",
rating: 5,
showtimes: ["3:00pm", "7:00pm", "11:00pm"],
Aqui adicionamos uma
palavra-chave this antes
getNextShowing: function() { de cada propriedade para
var now = new Date().getTime(); dizer que queremos a
referncia ao objeto movie1.
for (var i = 0; i < this.showtimes.length; i++) {
var showtime = getTimeFromString(this.showtimes[i]);
if ((showtime - now) > 0) {
return "Next showing of " + this.title + " is " +
this.showtimes[i];
}
}
return null;
}
};

Um test drive com this


Siga em frente, digite o cdigo acima e
adicione a funo getNextShowing
ao seu objeto movie2 (apenas copie
e cole). Depois, faa as alteraes
abaixo no seu cdigo de teste anterior.
Execute-o! Aqui est o que obteremos:

var nextShowing = movie1.getNextShowing();


alert(nextShowing);
nextShowing = movie2.getNextShowing();
alert(nextShowing);
Observe que agora estamos chamando
getNextShowing NO objeto. Faz mais sentido, no?

voc est aqui 145

PFCG_HeadFirstHTML5Prog.indb 145 05/06/2014 16:18:14


codificando reuse e mtodos

Parece que estamos duplicando


cdigo com todo esse copiar e
colar do mtodo getNextShowing.
No tem um modo melhor?

Ah, que boa viso.


Voc tem timos instintos se percebeu que
estamos duplicando cdigo, quando copiamos
getNextShowing em mais de um objeto
movie. Um dos objetivos da programao
orientada a objetos maximizar o reuso de
cdigo aqui no estamos reusando cdigo
algum; na verdade, estamos criando cada
objeto como um one-off e nossos objetos movie
so os mesmos por conveno (e por copiar e
colar!). Isto no apenas um desperdcio, como
tambm est propenso a erros.
H uma forma muito melhor de fazer isso
usando um construtor. O que um construtor?
apenas uma funo especial que escreveremos
e que pode criar objetos para ns, tornando-os
os mesmos. Pense nisso como uma pequena
fbrica, que recebe valores de propriedades que
voc quer configurar no seu objeto e depois
lhe devolve um novo e belo objeto com todas as
propriedades e mtodos certos.
Vamos criar um construtor...

146 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 146 05/06/2014 16:18:14


funes e objetos em JavaScript

Como criar um construtor


Vamos criar um construtor para dogs. J sabemos como queremos que
nossos objetos dogs se paream: eles tm propriedades name, breed e
weight, e tm um mtodo bark. Assim, o que nosso construtor precisa
receber valores de propriedades como parmetros e depois nos dar
um objeto dog pronto para latir. Aqui est o cdigo:

Os parmetros do construtor recebem


Uma funo construtora se valores para as propriedades que
parece muito com uma normal. Por queremos que nossos objetos tenham.
conveno, porm, damos ao nome
da funo uma letra maiscula. Aqui, estamos inicializando as
function Dog(name, breed, weight) { propriedades do objeto com
os valores que foram passados
this.name = name; para o construtor.
Os nomes de
propriedade this.breed = breed;
Podemos incluir o mtodo bark
e os nomes de this.weight = weight; no objeto que estamos criando,
parmetros no inicializando a propriedade
tm que ser os this.bark = function() {
bark com um valor de funo,
mesmos, mas if (this.weight > 25) { como temos feito.
muitas vezes so
alert(this.name + " says Woof!");
por conveno. Precisamos usar
} else { this.weight e this.
alert(this.name + " says Yip!"); name no mtodo
para nos referir
}
s propriedades
}; do objeto, como
}
fizemos antes.
Perceba como a sintaxe difere da sintaxe de objetos.
Estes so comandos, de modo que precisamos terminar
cada um deles com um ;, da mesma forma que
normalmente fazemos em uma funo.

Assim, vamos examinar isto novamente para assegurar que esteja


tudo certo. Dog uma funo construtora e recebe um conjunto
de argumentos, que so os valores iniciais das propriedades que
queremos: name, breed e weight. Assim que tiver esses valores, ela
os atribui s propriedades usando a palavra-chave this. Tambm
define nosso mtodo bark. O resultado de tudo isso? O construtor Dog
retorna um objeto novo. Vejamos como realmente usar o construtor.

voc est aqui 147

PFCG_HeadFirstHTML5Prog.indb 147 05/06/2014 16:18:14


usando um construtor

Agora usaremos nosso


construtor
Agora que temos a nossa fbrica, podemos us-la
para criar alguns dogs. S h uma coisa que no
lhe dissemos: que voc precisa chamar uma funo construtora de
uma forma especial, colocando a palavra-chave new (novo) antes da
chamada. Aqui esto alguns exemplos:

Para criar um dog, usamos a E depois o chamamos da mesma


palavra-chave new com o construtor. forma que qualquer funo.
var fido = new Dog("Fido", "Mixed", 38);

var tiny = new Dog("Tiny", "Chawalla", 8);

var clifford = new Dog("Clifford", "Bloodhound", 65); Estamos criando


trs objetos Dog
diferentes, passando
fido.bark(); Assim que temos os objetos, diferentes argumentos
podemos chamar seus para personalizar cada
tiny.bark();
mtodos bark para fazer cachorro.
clifford.bark(); cada Cachorro latir.
Vamos revisar o que est acontecendo
aqui mais uma vez: estamos criando trs
objetos dog, cada um com suas prprias
propriedades, usando a palavra-chave
new com o construtor Dog que criamos.
O construtor retorna um objeto dog
personalizado com os argumentos passados.
A seguir, chamamos o mtodo bark
em cada um perceba que estamos
compartilhando o mesmo mtodo bark
em todos os dogs e, quando cada cachorro
late, this aponta para o objeto dog que fez
a chamada. Assim, se chamarmos o mtodo
bark em fido, ento, no mtodo bark,
this configurado para o objeto fido. Vejamos um
pouco mais de perto como isso acontece.

148 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 148 05/06/2014 16:18:15


funes e objetos em JavaScript

Como this realmente funciona?


Sempre que colocamos this no cdigo de um mtodo, ele ser
Nos
interpretado como uma referncia ao objeto no qual o mtodo Bastidores
foi chamado. Assim, se chamarmos fido.bark, ento this
referenciar fido. Ou, se o chamarmos no nosso objeto dog tiny, ento
this referenciar tiny dentro dessa chamada de mtodo. Como this sabe
qual objeto est representando? Vejamos:

1 Digamos que temos um objeto dog atribudo a fido:

fido = new Dog("Fido", "Mixed", 38);

nome: Fido Aqui est o nosso novo objeto


raa: Misturada dog instanciado com os valores
Dog peso: 38 de propriedades que queremos.
bark: function() { ... }

2 E chamamos bark( ) em fido: Sempre que chamamos um m


em um objeto, JavaScript todo
configura this para apontar
fido.bark() this
para o prprio objeto. Assim,
nome: Fido aqui, this aponta para fido.
raa: Misturada

Dog peso: 38
E assim, quando nos referimos a this.
bark: function() { ... } name, sabemos que o nome Fido.

Voc pode chamar bark em


3 Assim, this sempre se refere ao objeto qualquer objeto dog e this ser
no qual o mtodo foi chamado, no importa atribudo ao dog especfico
quantos dogs tenhamos criado para latir: antes que o seu cdigo do
corpo seja executado.
fido.bark() tiny.bark() clifford.bark()
this this this

nome: Fido nome: Tiny nome: Clifford


raa: Misturada raa: Chawalla raa: Bloodhound

Dog peso: 38
Dog peso: 8 Dog peso: 65

bark: function() { ... } bark: function() { ... } bark: function() { ... }

voc est aqui 149

PFCG_HeadFirstHTML5Prog.indb 149 05/06/2014 16:18:16


um construtor para filmes

ms de Geladeira
Uma funo construtora Movie funcionando estava na geladeira, mas alguns
dos ms caram no cho. Voc pode ajudar a juntar tudo? Tenha cuidado,
pois alguns ms extras j estavam no cho e podem lhe distrair.

function _____________(_________, __________, rating, showtimes) {


this.title = _________;
this.genre = genre;
this.________________ = rating;
this.showtimes = ________________;
this.getNextShowing = function() {
var now = new Date().getTime();
for (var i = 0; i < ____________________.length; i++) {
var showtime = getTimeFromString(this.__________________[i]);
if ((showtime - now) > 0) {
return "Next showing of " + ___________ + " is " + this.
showtimes[i];
}
}
} ______
}
Usamos estes ms para
completar o cdigo.

title
Woof
Movie rating
function
showtimes this.showtimes
;
bark()
genre
this.title ,
this

150 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 150 05/06/2014 16:18:16


funes e objetos em JavaScript

P: Qual a diferena real entre uma funo e um


mtodo? Afinal, se eles so a mesma coisa, por
R: Dentro do corpo do objeto, sim, this sempre
ser o prprio objeto. H alguns casos avanados em
que cham-los de modo diferente? que isso pode no ser verdadeiro; por exemplo, as

R: Por conveno, se um objeto tiver uma funo,


chamamos de mtodo. Ambos funcionam da mesma
coisas ficam mais complicadas quando voc tem objetos
dentro de objetos, e se voc comear a fazer isso,
precisar examinar a semntica, mas esta uma boa
forma, exceto quando voc chama o mtodo de um regra geral.
objeto, usando o operador ponto, e um mtodo pode
usar this para acessar o objeto, no qual o mtodo P: Ouvi que, na programao orientada a
objetos, posso ter classes de objetos e elas podem
chamado. Pense em uma funo como uma pea
independente de cdigo, que voc pode chamar, e um herdar umas das outras. Eu poderia ter uma classe
mtodo como comportamento, que anexado a um mamferos, da qual gatos e cachorros herdassem.
objeto especfico. Eu posso fazer isso em JavaScript?

P: Ento, quando eu crio objetos com um


construtor e esses objetos tm um mtodo, todos
R: Pode. JavaScript usa algo chamado herana de
prottipo, que mais poderosa ainda do que os modelos
esses objetos compartilham o mesmo cdigo para baseados estritamente em classes. Chegar herana
esse mtodo? de prottipos est um pouco alm do escopo deste livro,

R: verdade, e esta uma das vantagens da


mas, quem sabe, no possamos vir a ser convencidos a
escrever mais sobre JavaScript?
programao orientada a objetos: voc pode criar o
cdigo para essa classe de objetos (digamos todos P: Ento, quando dizemos new Date( ), estamos
usando um construtor, certo?
os seus objetos dog) em um lugar e todos os dogs o
compartilham. A forma pela qual voc especifica para
cada dog com suas propriedades e usando this para R: Sim, isso mesmo! Date um construtor interno
em JavaScript. Quando voc diz new Date( ),
acessar essas propriedades.

P: Posso configurar this com um valor da


obtm um objeto Date com alguns mtodos teis que
pode usar para manipular a data.
minha escolha e, se o fizer, isso vai bagunar
tudo? P: Qual a diferena entre objetos que

R:
escrevemos ns mesmos e os que criamos com
No, voc no pode configurar this para nada. construtores?
Lembre-se de que this uma palavra-chave, no uma
varivel! Ela se parece e age como uma, mas no uma R: A principal diferena como voc os cria. Objetos
que voc mesmo escreve, usando chaves e propriedades
varivel.

P: this tem um valor fora do seu mtodo de


objeto?
separadas por vrgulas, so conhecidos como literais
de objetos. Voc literalmente os digita no seu cdigo!
Se voc quiser outro como esse, tem que digit-lo voc

R: No, se voc estiver chamando um mtodo de


objeto, ento this indefinido.
mesmo e assegurar que tenha as mesmas propriedades.
Objetos criados por um construtor so criados usando
new e uma funo construtora, que retorna o objeto.

P: Ento a forma de pensar em this quando


chamo um mtodo em um objeto. O valor de this
Voc pode usar a funo construtora para criar muitos
objetos que tenham as mesmas propriedades, mas
valores diferentes nelas, se quiser.
configurado com esse objeto o tempo inteiro em
que o mtodo estiver sendo avaliado?

voc est aqui 151

PFCG_HeadFirstHTML5Prog.indb 151 05/06/2014 16:18:17


soluo de exerccio

ms de Geladeira
Uma funo construtora Movie funcionando estava na geladeira, mas alguns
dos ms caram no cho. Voc pode ajudar a juntar tudo? Tenha cuidado,
pois alguns ms extras j estavam no cho e podem lhe distrair.

Este um construtor, entoa o nome.


estamos usando Movie par

Movie title
function _____________(_________, genre
__________, rating, showtimes) {
title
this.title = _________; Passamos valores para as propriedades
que queremos customizar: title, genre,
this.genre = genre; rating e showtimes...
rating
this.________________ = rating; e inicializar as propriedades.
this.showtimes = ________________;
showtimes
Para se referir a propriedades no objeto,
this.getNextShowing = function() { preciso usar a palavra-chave this.
var now = new Date().getTime();
this.showtimes
for (var i = 0; i < ____________________.length; i++) {
showtimes
var showtime = getTimeFromString(this.__________________[i]);

if ((showtime - now) > 0) {

return "Next showing of " + this. title + " is " +


___________
this.showtimes[i];

} No se esquea de acabar esta


;
declarao com um ponto e vrgula.
} ______

Sobras de ims.

this.showtimes Woof
function

bark()
this
,

152 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 152 05/06/2014 16:18:17


funes e objetos em JavaScript

Faa o test drive do seu construtor direto do


cho da fbrica
Agora que voc tem um construtor para Movie, est na hora
de criar alguns objetos Movie! V em frente. Digite a funo
construtora de Movie, adicione o cdigo abaixo e execute seu
construtor. Achamos que voc concordar que esta uma forma Primeiro criaremos um
muito mais fcil de criar objetos. objeto movie para o filme
Buckaroo Banzai (um
dos nossos clssicos cult
var banzaiMovie = new Movie("Buckaroo Banzai", favoritos). Passaremos
"Cult Classic", valores para os parmetros.
Observe que podemos colocar
os valores da matriz com osmente 5,
horrios de exibio direta ["1:00pm", "5:00pm", "7:00pm", "11:00pm"]);
na chamada da funo.
var plan9Movie = new Movie("Plan 9 from Outer Space",
"Cult Classic",
2, A seguir, Plan 9 from Outer Space
["3:00pm", "7:00pm", "11:00pm"]);

var forbiddenPlanetMovie = new Movie("Forbidden Planet",


"Classic Sci-fi", E, claro,
5,
Forbidden Planet
["5:00pm", "9:00pm"]);

alert(banzaiMovie.getNextShowing()); Assim que voc tiver todos os seus


objetos criados, poder chamar
alert(plan9Movie.getNextShowing());
o mtodo getNextShowing
alert(forbiddenPlanetMovie.getNextShowing()); e alertar o usurio sobre os
prximos horrios de exibio.

voc est aqui 153

PFCG_HeadFirstHTML5Prog.indb 153 05/06/2014 16:18:18


um passeio pelos objetos comuns

Parabns, voc passou pelas funes e


objetos! Agora que sabe tudo sobre eles,
e antes de terminarmos o captulo, vamos
gastar um pouco de tempo verificando
objetos JavaScript no seu ambiente, ou seja,
no seu habitat natural, o navegador!

Agora, voc talvez tenha comeado a


perceber...
... que objetos esto por toda parte. Por exemplo,
document e window so objetos, assim como os
elementos que obtemos de volta de document.
getElementById. Estes so apenas alguns dos muitos
objetos que encontraremos quando chegarmos s
APIs HTML5, veremos objetos em todos os lugares!
Vamos ver novamente alguns dos objetos que voc tem
usado neste livro:

Alguns dos objetos


com os quais j nos document
deparamos.
Aqui est o domain
nosso prprio movie title
objeto movie. URL
title
genre
rating getElementById
showtimes getElementsByTagNam
e
getElementsByClassN
ame
getNextShowing createElemen
nt button
window onclick
Desenhamos objetos como este para document
mostrar propriedades no topo location ul
onload
... e mtodos na parte de status input innerHTML
baixo. Assim, voc obtm childElementCou
nt
um resumo do objeto, suas alert value firstChild
propriedades e mtodos prompt
em um instante. open
appendChild
close
insertBefore
setTimeout
setInterval

154 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 154 05/06/2014 16:18:19


funes e objetos em JavaScript

O que o objeto window mesmo?


Quando voc estiver escrevendo cdigo para o
navegador, o objeto window sempre far parte da sua
vida. O objeto window representa tanto o ambiente
global para seus programas JavaScript quanto a janela
principal do seu aplicativo e, como tal, contm muitas
propriedades e mtodos centrais. Vamos examin-lo:

Aqui est nosso objeto


window com algumas
propriedades e mtodos
importantes que voc
ir querer conhecer. H
muitos outros...
azena a
A localizao ar.mSe voc
URL da pgina vegador window
alter-la, o na URL! Voc certamente j viu isto
recupera a nova location antes: onload uma propriedade
que armazena a funo a
Status armazena a status chamar, quando a pgina estiver
string que exibida totalmente carregada.
na rea de status onload
do seu navegador. A propriedade document
Voc viu o document armazena o DOM!
mtodo alert, que alert
exibe um alerta. Prompt como alert,
Abre uma nova janela prompt exceto que obtm
de navegador. informaes do usurio.
open
close aps um
Fecha a janela. Chama um manipulador de tempo.
determinado int er va lo
setTimeout
setInterval Chama um manipulador em
um determinado intervalo
de tempo, repetidas vezes.

voc est aqui 155

PFCG_HeadFirstHTML5Prog.indb 155 05/06/2014 16:18:20


como funciona window.onload

Temos escrito alert, no


window.alert... Como o
navegador saber que queremos
o mtodo alert de window?

Window o objeto global.


Pode parecer um pouco estranho, mas o objeto
window atua como o seu ambiente global,
ento, os nomes de quaisquer propriedades ou
mtodos de window so determinados, mesmo
se voc no prefix-los com window.
Alm disso, quaisquer variveis globais que voc
definir tambm so colocadas no namespace
window, de modo que voc pode referenci-las
como window.minhavariavel.

Um exame mais de perto em window.onload


Uma coisa que usamos frequentemente at aqui neste livro um manipulador
de eventos window.onload. Atribuindo uma funo propriedade window.
onload, podemos assegurar que nosso cdigo no seja executado at que a
pgina seja carregada e o DOM esteja completamente configurado. H muita
coisa acontecendo no comando window.onload. Ento, o examinaremos
novamente e as peas comearo a se encaixar:

Aqui est nosso onload uma propriedade Esta uma funo annima
objeto window global. do objeto window. atribuda propriedade onload.

window.onload = function() {
// code here
}; E claro que o corpo da funo executad
assim que a janela carrega totalmente a o,
pgina e chama nossa funo annima!

156 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 156 05/06/2014 16:18:20


funes e objetos em JavaScript

Outro exame no objeto document


O objeto document outro rosto familiar; o objeto que temos usado para
acessar o DOM. Como acabamos de ver, na verdade uma propriedade do
objeto window. claro que no o usamos como window.document porque
no precisamos. Vamos fazer um exame breve sob a superfcie para ver suas
propriedades e mtodos mais interessantes:
A propriedade domain o domnio do
servidor, a partir do qual o documento est
sendo servido, como wickedlysmart.com.
document
Podemos usar a propriedade title para obte
propriedades domain o ttulo do documento, usando document.titlre.
title
URL A URL apenas a URL do documento.
Conforme voc sabe, este mtodo pega
getElementById um elemento pela sua identificao.
mtodos getElementsByTagName Estes dois so semelhantes a
getElementsByClassName getElementById, exceto que recuperam
elementos usando tags e classes.
createElement
Usamos este mtodo no Captulo 3 para
criar novos itens na lista de execuo.
Conforme voc sabe, ele cria elementos
apropriados para incluso no DOM.
Um exame mais prximo em
document.getElementById
Prometemos no incio deste captulo que voc entenderia
document.getElementById at o final dele. Bom, voc passou
por funes, objetos e mtodos, e agora est pronto! Veja:

document o objeto document,


um objeto interno JavaScript que
lhe d acesso ao DOM.
var div = document.getElementById("myDiv");

getElementById ... recebe um argumento,


um mtodo que... a id de um elemento
<div> e retorna um
objeto do elemento.
O que era uma string de aparncia e sintaxe confusa agora tem
muito mais significado, certo? Essa varivel div tambm um
objeto: um objeto de elemento. Vamos dar uma olhada mais de
perto nele tambm.
voc est aqui 157

PFCG_HeadFirstHTML5Prog.indb 157 05/06/2014 16:18:20


o objeto element

Mais um objeto sobre o qual se pensar:


seus elementos objetos
No devemos esquecer, quando estamos trabalhando com mtodos como
getElementById, que os elementos que eles retornam tambm so objetos! OK, voc
pode no ter percebido isto, mas, agora que sabe, talvez esteja comeando a pensar
que tudo em JavaScript um objeto e, bom, est quase certo.
Voc j viu alguma evidncia de propriedades de elementos, como a propriedade
innerHTML; vamos examinar alguns dos mtodos e propriedades mais importantes:

p
Aqui esto as
Voc conhece innerHTML; duas outras propriedades
propriedades so childElementCount innerHTML e mtodos do
(quantos filhos o elemento pai tem) e childElementCou elemento <p>.
nt
firstChild (o primeiro filho, se houver um). firstChild Todos os elementos
os suportam.
Voc pode usar os mtodos appendChild e appendChild
insertBefore para inserir novos elementos insertBefore
no DOM como filhos deste elemento. setAttribute
getAttribute

Usaremos setAttribute e getAttribute para gravar e


ler atributos, como src, class e id, em elementos.

P: J que window o objeto global, isso


significa que posso usar suas propriedades e
R: Sim, mas no recomendamos isso neste
caso especfico, porque h muitos objetos que tm
todos os seus mtodos sem especificar window propriedades onload. Seu cdigo ficar muito mais claro
primeiro, certo? se usar window na frente de onload.

R: Certo. Prefixar as propriedades e mtodos do P: O motivo pelo qual no dizemos window.


onload = init( ) porque isso chamaria a
objeto window com window depende de voc. Para
coisas como alert, todos sabem o que , e ningum funo, em vez de usar seu valor?
usa window com ele. Por outro lado, se estiver usando
propriedades ou mtodos menos conhecidos, talvez R: Certo. Quando voc usa parnteses aps o nome
da funo, como init( ), est dizendo que quer chamar
queira tornar seu cdigo mais fcil de entender, e usar
window. a funo init. Se voc usar seu nome sem parnteses,

P: Ento, eu poderia escrever onload =


init em vez de window.onload = init,
ento estar atribuindo o valor da funo propriedade
onload. uma diferena sutil quando voc est
digitando, mas as ramificaes so grandes, ento
certo? preste bastante ateno.

158 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 158 05/06/2014 16:18:21


funes e objetos em JavaScript

P: Qual das duas formas de criar um


manipulador window.onload melhor, usando um
P: Qual a diferena entre objetos internos, como
window e document, e os que criamos?
nome de funo ou uma funo annima?

R: Uma no melhor que a outra, ambas fazem


R: Uma diferena que objetos internos seguem as
diretrizes estabelecidas por especificaes. Assim, voc
basicamente a mesma coisa: configuram o valor de pode ver as especificaes W3C para entender suas
window.onload para uma funo que ser propriedades e mtodos. Alm disso, muitos dos objetos
executada quando sua pgina for carregada. Se por internos, como String, podem ter propriedades que so
algum motivo voc precisar chamar init a partir de imutveis e no podem ser alteradas. Alm do mais,
outra funo posteriormente no seu programa, ento objetos so objetos. O bom dos objetos internos que
precisar definir uma funo init. Em caso contrrio, j esto criados para voc.
no importa qual forma utilizar. Sim, String um objeto! Veja uma
boa referncia de JavaScript para
obter todos os detalhes de suas
propriedades e mtodos.

Parabns! Voc completou nossa excurso


pelos objetos e passou por vrios
captulos de treino em JavaScript. Agora
est na hora de usar todo o conhecimento
para programar com HTML5 e todas as
novas APIs JavaScript, comeando no
prximo captulo!
Voc est deixando este captulo,
sabendo mais sobre objetos e
funes do que muitas pessoas por a.
claro que sempre poder aprender
mais e o incentivamos a explorar
(aps ter terminado este livro)!

Ento, descanse um pouco depois


deste captulo, mas, antes que v,
examine brevemente os pontos de
bala e faa as palavras cruzadas
para fixar tudo.

voc est aqui 159

PFCG_HeadFirstHTML5Prog.indb 159 05/06/2014 16:18:21


reviso de funes e objetos

Pontos de Bala

Para criar uma funo, use a palavra-chave Funes so valores que podem ser atribudos
function com parnteses para os parmetros, se a variveis, passados para outras funes,
houver algum. armazenados em matrizes e atribudos a
propriedades de objetos.
Funes podem ter nome ou ser annimas.
Objetos so colees de propriedades.
Regras de nomenclatura de funes so as
mesmas usadas para variveis. Voc acessa as propriedades de um objeto
usando a notao de pontos ou a de [ ].
O corpo de uma funo fica entre chaves e
contm comandos que executam o trabalho da Se usar a notao [ ], coloque o nome da
funo. propriedade entre aspas; por exemplo,
meuObjeto[nome].
Uma funo pode retornar um valor com o
comando return. Voc pode alterar o valor de uma propriedade,
apagar ou adicionar novas propriedades a um
Para chamar uma funo, use seu nome e passe
objeto.
os argumentos que ela precisar.
Voc pode enumerar as propriedades de um
JavaScript usa a passagem de parmetros por
objeto, usando um loop for-in.
valor.
Uma funo atribuda a uma propriedade de
Quando voc passa um objeto, como um dog,
objeto referenciada como um mtodo.
como parmetro para uma funo, o parmetro
recebe uma cpia da referncia ao objeto. Um mtodo pode usar uma palavra-chave
especial, this, para se referir ao objeto no qual foi
Variveis definidas em funes, incluindo
chamado.
parmetros, so conhecidas como variveis
locais. Um construtor uma funo que cria objetos.
Variveis definidas fora das funes so O trabalho de um construtor criar um novo
conhecidas como variveis globais. objeto e iniciar suas propriedades.
Variveis locais no so visveis fora da funo Para chamar um construtor para criar um objeto,
na qual so definidas. Isto conhecido como o use a palavra-chave new. Por exemplo, new Dog().
escopo de uma varivel.
J temos usado diversos objetos neste livro,
Se voc declarar uma varivel local com o mesmo incluindo document, window e diversos objetos
nome de uma global, a local esconde a global. element.
Quando voc conecta mltiplos arquivos O objeto window o objeto global.
JavaScript a partir da sua pgina, todas as
O objeto document uma das propriedades de
variveis globais so definidas no mesmo espao
window.
global.
O mtodo document.getElementById retorna um
Se voc atribuir uma nova varivel sem usar a
objeto element.
palavra-chave var, essa varivel ser global,
mesmo se voc a estiver atribuindo primeiro a
uma funo.

160 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 160 05/06/2014 16:18:21


funes e objetos em JavaScript

Palavras Cruzadas HTML5


Este foi um captulo cheio de funes, objetos, propriedades e
mtodos ento, h muita coisa para lembrar. Sente-se, relaxe
e trabalhe o resto do seu crebro um pouco. Aqui esto as
palavras cruzadas do Captulo 4.
1

2 3

6 7

9 10 11

12 13

14

15 16

17

18

Horizontal Vertical
4. Funes podem ou no incluir este tipo de 1. O operador _____ permite a voc acessar as
comando. propriedades e mtodos de um objeto.
7. Por conveno, construtores tm um nome com 2. Estas variveis s esto disponveis em funes.
uma primeira letra ________. 3. O que voc fornece na sua chamada
8. Escopo de varivel que visvel em qualquer lugar. de funo.
12. Juntar propriedades e chamadas de funes com 5. Argumentos so passados por _________.
o operador ponto. 6. O objeto _____ representa o DOM.
16. Use esta palavra-chave para iniciar uma definio 9. O que voc fornece na sua definio
de funo. de funo.
17. Refere-se ao objeto corrente em um mtodo 10. Funes sem comandos de retorno
de objeto. retornam isto.
18. Uma propriedade em window a qual atribumos 11. Funes sem um nome.
uma funo de manipulao.
13. Este tipo de funo cria objetos.
14. O verdadeiro objeto global.
15. Uma funo em um objeto.

voc est aqui 161

PFCG_HeadFirstHTML5Prog.indb 161 05/06/2014 16:18:22


soluo de exerccio

Use seu conhecimento sobre funes e passagem de


argumentos para parmetros para avaliar o cdigo abaixo.
Aps ter passado pelo cdigo, escreva o valor de cada
varivel abaixo. Aqui est a nossa soluo.

function dogsAge(age) {
return age * 7;
}

var myDogsAge = dogsAge(4);

function rectangleArea(width, height) {


var area = width * height;
return area;
}
var rectArea = rectangleArea(3, 4);

function addUp(numArray) {
var total = 0;
for (var i = 0; i < numArray.length; i++)
{
total += numArray[i];
}
return total;
}

var theTotal = addUp([1, 5, 3, 9]);


function getAvatar(points) {
var avatar;
if (points < 100) {
avatar = "Mouse"; Escreva o
} else if (points > 100 && points < 1000) valor de cada
{
varivel aqui...
avatar = "Cat";
} else { 28
myDogsAge =
avatar = "Ape";
} rectArea = 12
return avatar; theTotal = 18
}
myAvatar = Cat
var myAvatar = getAvatar(335);

162 Captulo 4

PFCG_HeadFirstHTML5Prog.indb 162 05/06/2014 16:18:22


funes e objetos em JavaScript

Soluo das Palavras Cruzadas


HTML5
1
p
2 3
l a o
4
o r e t u r n
5
v c g t
6 7
d a m a i s c u l a o
8
g l o b a l l m
c o e
u r n
9 10 11
m p u t a
12 13
e n c a d e a m e n t o n
14
n o r d s w
t n e n i
15 16
m s m f u n c t i o n
t e i m d
t r t n a o
17
o u r e t h i s w
d t o d
18
o n l o a d s
r

voc est aqui 163

PFCG_HeadFirstHTML5Prog.indb 163 05/06/2014 16:18:22


PFCG_HeadFirstHTML5Prog.indb 164 05/06/2014 16:18:22
5 tornando ativa sua localizao html

Geolocalizao
No incrvel
como toda essa
nova tecnologia
tem aproximado
todo mundo?

Aonde quer que v, l est voc. s vezes, saber onde se est


faz toda a diferena (principalmente para um aplicativo web). Neste captulo,
vamos mostrar como criar pginas da web que so localizveis em alguns
casos, ser possvel apontar o local exato dos usurios e, em outros, ser apenas
possvel determinar a rea da cidade em que se encontram (mas ainda assim
saberemos qual a cidade!). Infelizmente, s vezes no ser possvel determinar
nada em relao a sua localizao, o que pode se dar por motivos tcnicos
ou apenas por no querer ningum se metendo em suas vidas. V descobrir
sozinho. De qualquer modo, neste captulo, vamos explorar uma API JavaScript:
Geolocalizao. Arranje o melhor dispositivo de localizao que puder (mesmo que
seja seu computador pessoal) e vamos comear.

este um novo captulo 165

PFCG_HeadFirstHTML5Prog.indb 165 05/06/2014 16:18:24


a api de geolocalizao

Seus usurios agora esto em


movimento com seus dispositivos
mveis localizveis. Os melhores
aplicativos sero aqueles que podem
aprimorar as experincias desses
usurios utilizando localizao.

Localizao, Localizao, Localizao


Saber a localizao de seus usurios pode acrescentar, e
muito, experincia da web: voc poder oferecer direes,
fazer sugestes de lugares que eles podero visitar;
possvel saber se est chovendo e indicar atividades em
lugares fechados; pode-se permitir aos usurios saber quem
mais nos arredores est querendo fazer alguma atividade.
Realmente, no h fim para as maneiras com que se pode
utilizar a informao de localizao.
Com HTML5 (e a API JavaScript de Geolocalizao), pode-
-se, facilmente, acessar informaes de localizao em suas
pginas. Dito isto, h algumas coisinhas a saber a respeito
da localizao antes de comearmos. Vamos conferir?

de seus usurios num mapa, a API do Google oferece uma


P: Ouvi falar que a Geolocalizao no uma API
maneira conveniente de implementar tal funcionalidade.
de verdade... P: No existe uma preocupao com a

R: A Geolocalizao no considerada um membro


questo da privacidade, j que meu dispositivo
revela minha localizao?

R:
da primeira classe dentro do padro existente de HTML5,
mas, mesmo assim, um padro para o W3C, amplamente A especificao da Geolocalizao determina que
suportado e quase todo mundo inclui a Geolocalizao em qualquer browser deve ter a permisso expressa do usurio
suas listas de APIs HTML5 importantes. mais provvel para fazer uso de sua localizao. Por isso, se seu cdigo
que ela seja, sim, uma verdadeira API JavaScript! utiliza a API de Geolocalizao, a primeira coisa que o
P: A API de Geolocalizao a mesma API do
Google Maps?
browser far ser se certificar de que o usurio concorda
com o compartilhamento de sua localizao.

R: P: A Geolocalizao tem bom suporte?

R:
No. So APIs completamente diferentes. A API
de Geolocalizao focada unicamente na obteno de Certamente; de fato, est disponvel em praticamente
informao a respeito do posicionamento na Terra. A API todos os browsers modernos, tanto os de desktop quanto
do Google Maps uma biblioteca JavaScript oferecida pela os mobile. preciso saber ao certo se est usando a ltima
Google que proporciona acesso a todas as funcionalidades verso de seu navegador; se estiver, ento provavelmente
do Google Maps. Portanto, se precisar mostrar a localizao voc ter xito.

166 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 166 05/06/2014 16:18:24


tornando ativa sua localizao html

A Latitude e a Longitude da Questo...


Para voc saber onde est, necessrio um sistema de coordenadas, e voc vai
precisar de um para a superfcie da Terra. Por sorte, ns temos algo do gnero,
que usa latitude e longitude juntos como um sistema de coordenadas. A latitude O Real
especifica um ponto no sentido norte/sul do planeta e a longitude, um ponto Observatrio
leste/oeste. A latitude medida a partir do Equador e a longitude a partir de Greenwich,
de Greenwich, na Inglaterra. O trabalho da API de geolocalizao nos dar para ser mais
coordenadas de onde estamos a qualquer momento, usando-as assim: preciso.
A latitude uma distncia ao
Vale do Silcio est norte ou ao sul do Equador.
a 37.37, -121.92 Greenwich, Inglaterra
est em 51.47, 0
Cidade de Nova
Iorque est a
40.77, -73.98 A longitude uma
distncia a leste ou
a oeste de Greenwich,
Inglaterra.

Porto-Novo, Benin,
est em 6.49, 2.61
Lima, Peru, est a
-12.05, -77.04

Latitude/Longitude de Perto
Voc provavelmente j viu as especificaes da latitude e da longitude tanto em
graus/minutos/segundos (473834, 1223232), quanto em valores decimais
(47.64, -122.54). Com a API de Geolocalizao sempre usamos valores decimais.
Se precisar converter graus/minutos/segundos em decimais, utilize esta funo:
function degreesToDecimal(degrees, minutes, seconds) {
return degrees + (minutes / 60.0) + (seconds / 3600.0);
} Perceba tambm que a
longitude Oeste e a latitude
Sul so representadas por
valores negativos.
voc est aqui 167

PFCG_HeadFirstHTML5Prog.indb 167 05/06/2014 16:18:24


determinando a localizao

Como a API de Geolocalizao determina sua localizao


Voc no precisa ter o mais recente smartphone para deter a capacidade da
localizao. Mesmo browsers de desktop esto se juntando ao grupo. Talvez
voc pergunte: como um browser de desktop determina sua localizao se no
possui GPS ou qualquer outra tecnologia avanada de localizao? Bem, todos os
navegadores (em dispositivos e em seu computador) esto se utilizando de formas
diferentes para determinar sua exata localizao, mesmo que algumas sejam mais
precisas do que outras. Vamos dar uma olhada:

Tenho o mais novo smartphone


com GPS j desenvolvido
dentro dele. Quer vir me
falar sobre preciso?!

Endereo IP
A informao de localizao
baseada em seu endereo
IP usa uma database
externa para rastrear o IP
at uma localizao fsica. A
vantagem desta abordagem
Nada muito chique aqui no que ela funciona em
escritrio... Temos apenas qualquer lugar; no entanto,
nossos navegadores de desktop, volta e meia os endereos
mas meu endereo IP pode ser
IP indicam localizaes, tais
mapeado numa determinada
como o provedor de internet
localizao, o que, em alguns
de seu escritrio. Pense
momentos, bem preciso.
neste mtodo como sendo
confivel apenas para
estabelecer limites
GPS de cidades ou
vizinhanas.
Global Positioning System (Sistema de
Posicionamento Global), suportado por
diversos dispositivos atuais, fornece
informao de localizao extremamente
apurada, baseada em satlites. Dados de
localizao podem incluir informaes de
altitude, velocidade e direo. Para us-lo,
no entanto, seu dispositivo precisa ter
livre acesso ao cu, e pode levar um bom
tempo para obter a localizao. O GPS
tambm pode gastar muita bateria.

168 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 168 05/06/2014 16:18:25


tornando ativa sua localizao html

Meu telefone dos antigos.


Nenhum GPS nele, mas, atravs da
triangulao de torres de celular,
meu telefone consegue ter uma
boa ideia de onde me encontro, e o
navegador faz uso disso.

Telefone
Celular
A triangulao de
telefones celulares
descobre sua localizao
baseada na distncia em
que voc se encontra
de uma ou mais torres
de celular (obviamente
que quanto mais torres,
Vou de cafeteria em mais precisa ser sua
cafeteria com meu laptop localizao). Este mtodo pode ser bem funcional
e minhas assinaturas WiFi. e opera mesmo dentro de ambientes fechados
Voc saber onde estou ao
(diferentemente do GPS); tambm bem mais
triangular todos os hotspots.
rpido que o GPS. Ento, novamente, se estiver
Parece funcionar muito bem.
no meio do nada com apenas uma torre de celular,
sua preciso ir sofrer.

Wi-Fi
O posicionamento por Wi-Fi
usa um ou mais pontos
de acesso Wi-Fi para
triangular sua localizao.
Este mtodo pode ser bem
preciso, funciona dentro
de ambientes fechados e
rpido. Claro que requer
que esteja meio que parado
(talvez bebendo um ch
gelado numa cafeteria).

voc est aqui 169

PFCG_HeadFirstHTML5Prog.indb 169 05/06/2014 16:18:25


mtodo para determinar localizao

legal saber que temos vrios


meios de descobrir onde estamos.
Como saberei qual mtodo meu
dispositivo est usando?

No saber.
A resposta simples : no saber, j
que a implementao do navegador
ir determinar como a localizao se
dar. A boa notcia que o browser
pode usar qualquer desses meios para
determinar sua localizao. De fato,
um browser inteligente dever utilizar
primeiro a triangulao de torres, se
estiver disponvel, para lhe dar uma ideia
de onde est, e depois lhe dar uma
localizao mais exata por WiFi ou GPS.
Voc ver que no precisa se preocupar
em como a localizao ser determinada,
e nos concentraremos mais na preciso do
que na localizao. Baseado na preciso,
pode-se determinar quo til ser a
localizao para voc. Fique ligado
voltaremos preciso logo mais.

170 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 170 05/06/2014 16:18:25


tornando ativa sua localizao html

Pense a respeito de suas pginas e aplicativos


HTML existentes (ou alguns que quer criar);
como ser possvel incorporar informaes de
localizao neles?

Permitir que meus usurios faam compartilhamentos


com outros nos arredores.

Permitir que meus usurios encontrem, mais


facilmente, recursos e servios.

Rastrear onde meu usurio faz algo.


Dar direes aos meus usurios a partir de onde esto.
Usar localizao para determinar outros dados
demogrficos de meus usurios.

Suas ideias aqui!

voc est aqui 171

PFCG_HeadFirstHTML5Prog.indb 171 05/06/2014 16:18:25


usando a api de geolocalizao

Mas diz a: onde voc est?


Bem, claro que voc sabe onde est, mas vejamos onde
seu browser acha que voc est. Para sab-lo, vamos
criar uma pequena HTML:

Todas as coisas de sempre no incio,


incluindo um link para o arquivo em que
<!doctype html>
poremos nosso JavaScript, myLoc.js, e
uma folha de estilo, myLoc.css para
<html>
deixar tudo bem bonito.
<head> Vamos escrever
<meta charset="utf-8"> nosso cdigo de
<title>Where am I?</title> geolocalizao
<script src="myLoc.js"></script> em myLoc.js.
<link rel="stylesheet" href="myLoc.css">
</head>
<body>
<div id="location"> E voc usar esta
Your location will go here. <div> para gerar
</div>
sua localiza o.
</body>
</html> Ponha toda esta HTML num
arquivo chamado myLoc.html.

Agora vamos criar myLoc.js e escrever um pequeno


cdigo; faremos isso rapidamente para depois voltar e
analisar. Adicione ao seu arquivo myLoc.js o que segue:

Chamamos a funo getMyLocation


assim que o navegador carregar a pgina.
assim que verificamos para nos certificarmos de
window.onload = getMyLocation; que o browser suporta a API de Geolocalizao; se o
objeto navigator.geolocation existir, ento conseguimos!
Se existir, ento acionamos o mtodo
function getMyLocation() { getCurrentPosition e o passamos por
if (navigator.geolocation) {
uma funo handler, displayLocation.
Vamos implementar isso em um segundo.
navigator.geolocation.getCurrentPosition(displayLocation);

} else { A funo
alert("Oops, no geolocation support"); displayLocation
o manipulador que
} conseguir ter
}
Se o browser NO suportar geolocalizao, ento controle sobre a
vamos apenas criar um alerta pop up ao usurio. localizao.

172 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 172 05/06/2014 16:18:25


tornando ativa sua localizao html

O manipulador de getCurrentPosition
Eis nosso manipulador, que ir disparar recebe uma posio que contm a
quando o browser tiver uma localizao. latitude e a longitude de sua localizao
(junto com algumas informaes de
function displayLocation(position) { preciso que veremos adiante).
var latitude = position.coords.latitude; Pegamos a latitude
var longitude = position.coords.longitude; e a longitude de sua
localizao do objeto
var div = document.getElementById("location"); position-coords.
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude:
" + longitude;
} Ento pegamos nossa
<div> da HTML... ...e, por ora, vamos apenas ajustar o contedo da <div>
de localizao para sua localizao usan do inne rHTML.

Test drive de sua localizao


Digite seu cdigo e leve sua nova pgina de localizao para
um test drive.
Quando voc rodar um aplicativo web de
Geolocalizao pela primeira vez, notar uma
solicitao no browser, pedindo sua permisso
para usar sua localizao. Esta uma checagem de
segurana do navegador, qual voc poder dizer
no. Supondo, porm, que talvez queira testar
este aplicativo web, voc ter que clicar em Permitir ou Sim. A solicitao para
Quando o fizer, o aplicativo dever mostrar sua localizao, permisso pode parecer
como exemplificado abaixo: um pouco diferente,
dependendo do browser
que estiver usando, mas vai
ficar mais ou menos assim.
Eis sua localizao! Claro
que ser diferente da nossa
(caso contrrio, ficaremos
muito preocupados contigo).
Se sua localizao no est
aparecendo, e supondo que
voc verificou duas vezes por
erros de digitao e coisas
Lembre-se sempre de que conseguir sua do tipo, aguente as pontas
localizao no muito instantneo; por algumas pginas e lhe
pode levar um tempinho... daremos alguns cdigos para
tirar esses tipos de bugs...

voc est aqui 173

PFCG_HeadFirstHTML5Prog.indb 173 05/06/2014 16:18:26


revisando cdigo de geolocalizao
Se seu browser suporta a
API de Geolocalizao, voc
encontrar uma propriedade
de geolocalizao no objeto
navigator.

O que acabamos de fazer...


Agora que temos alguns cdigos de geolocalizao rodando
perfeitamente (e, novamente, se ainda no estiver visualizando
nenhuma localizao, espere um pouco, pois j estamos
chegando a algumas tcnicas de eliminao de bugs), vamos dar
um passeio pelo cdigo, porm com mais alguns detalhes:

1 A primeira coisa que precisa saber, se for escrever


cdigo de geolocalizao, : este browser d
suporte? Para fazer isso, utilizamos o fato de que
os navegadores possuem uma propriedade de geolocalizao em seu objeto de
navegao apenas quando a geolocalizao suportada.
Portanto, podemos testar para ver se a propriedade de geolocalizao existe e, se
existir, fazer uso dela. Do contrrio, deixaremos o usurio saber:
Podemos usar um teste simples para ver se a
if (navigator.geolocation) { geolocalizao est l (se no estiver, ento o navigator.
... geolocation avalia em null e a condio ir falhar).
} else {
alert("Oops, no geolocation support");
Se estiver l, podemos fazer
uso dele, e, se no, faremos
} com que o usurio saiba.

Agora, se houver uma propriedade navigator.geolocation,


2
Lembre-se de que APIs
faremos mais uso dela. De fato, a propriedade
so apenas objetos com
navigator.geolocation um objeto que contm a API de
propriedades e mtodos!
geolocalizao inteira. O mtodo principal que a API
Agora voc no est
suporta o getCurrentPosition, que faz o trabalho de
feliz de ter feito
conseguir a localizao do browser. Vamos dar uma olhada
todo o treinamento de
mais de perto neste mtodo, que possui trs parmetros,
JavaScript?!
dois dos quais so opcionais:

O successHandler uma funo que O errorHandler outra funo


chamada se o browser for capaz de que chamada se algo der
determinar, com sucesso, sua localizao. errado e o browser no puder
determinar sua localizao.

getCurrentPosition(successHandler, errorHandler, options)

Esses dois parmetros O parmetro options


so opcionais. Por isso no permite-lhe personalizar
precisamos deles ante s. a maneira com que a
174 Captulo 5
geolocalizao trabalha.

PFCG_HeadFirstHTML5Prog.indb 174 05/06/2014 16:18:26


tornando ativa sua localizao html

3 Agora, vamos dar uma olhada em nossa chamada para o mtodo


getCurrentPosition. Por ora, forneceremos apenas o argumento
successHandler para manipular uma tentativa bem-sucedida de
obter a localizao do browser. Veremos o caso em que o browser
falha em encontrar uma localizao em um instante.
Voc se lembra do encadeamento* do Captulo
4? Estamos usando o objeto navigator*
para ter acesso ao objeto geolocation, que
simplesmente uma propriedade de navigator.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation);
} Se e quando a Voc percebeu que estamos
E estamos chamando o mtodo geolocalizao passando de uma funo para
getCurrentPosition do objeto geolocation determinar sua outra aqui? Lembre-se de que
com um argumento: o success callback*. localizao, ela vai vimos no Captulo 4 que funes
chamar displayLocation. so valores, ento podemos fazer
isso sem problemas.

4 Agora, vamos ver o success handler*, displayLocation. Quando


displayLocation chamado, a API de geolocalizao passa-lhe um objeto
position que contm informao sobre a localizao do browser, incluindo
um objeto coordinates que possui a latitude e a longitude (assim como
alguns outros valores que falaremos mais tarde).

position um objeto que passado


dentro de seu success handler pela
API de geolocalizao.
O objeto position possui uma
propriedade coords que tem
function displayLocation(position) {
uma referncia em relao ao
objeto coordinates...
var latitude = position.coords.latitude;
var longitude = position.coords.longitude; e o objeto coordinates
tem sua latitude e sua
var div = document.getElementById("location"); longitude.
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: "
+ longitude;
}

E esta parte temos certeza de que voc pode fazer


at dormindo: estamos apenas pegando a informao de
coordenadas e mostrando-a em uma <div> dentro da pgina.

voc est aqui 175

PFCG_HeadFirstHTML5Prog.indb 175 05/06/2014 16:18:26


como ativar posio atual

Como tudo se encaixa


Agora que j vimos o cdigo, vejamos como
tudo funciona:

Browser aciona
getCurrentPosition.

API de
Browser geolocalizao

A geolocalizao,
ento, pede
permisso ao
usurio. Se o usurio der permisso,
a geolocalizao usar
o melhor meio para se
alcanar a localizao
do browser (GPS,
Browser triangulao, e por a vai).

API de
geolocalizao

position.coords.latitude
e
position.coords.longitud

Se a geolocalizao puder determinar


a localizao do browser, aciona o
success handler e passa a ele um
Browser objeto com as coordenadas.

176 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 176 05/06/2014 16:18:27


tornando ativa sua localizao html

Test Drive Diagnsticos


quando lidamos com Geolocalizao, nem todos os testes sero bem sucedidos. Mesmo
que o primeiro teste tenha dado certo, algo vai dar errado em algum momento. Para
ajudar, criamos um pequeno teste de diagnstico para que voc possa acrescentar em
seu cdigo. Ento, se estiver tendo problemas, eis sua resposta; e mesmo que no
esteja, algum de seus usurios ter algum percalo e voc vai querer saber como lidar
com ele no seu cdigo. Portanto, adicione o cdigo abaixo e, se estiver com algum
problema, preencha cuidadosamente o formulrio de diagnstico do fim, uma vez que o
tenha diagnosticado:
Para criar o teste de diagnstico, vamos adicionar um error handler ao acionamento do
mtodo getCurrentPosition. Este handler ser acionado a qualquer momento que a API de
Geolocalizao encontrar um problema em determinar sua localizao. Veja como fazemos
para adicion-lo:
Acrescente um segundo argumento em seu . Esta uma
getCurrentPosition, chamado displayError izao falhar
funo que ser acionada quando a geolocal
na deteco de uma localizao.
navigator.geolocation.getCurrentPosition(displayLocation, displayError);

Agora precisamos escrever o error handler. Para faz-lo, preciso saber que a geolocalizao
passa um objeto error para seu handler, que contm um cdigo numrico descrevendo a razo
pela qual no foi possvel determinar a localizao de seu browser. Dependendo do cdigo,
poder tambm fornecer uma mensagem dando informaes posteriores sobre o erro. Segue
abaixo como podemos usar o objeto error no handler*:

Aqui est o nosso novo handler, no qual o.


passado um erro pela API de Geolocaliza
function displayError(error) {
O objeto error contm uma propriedade do cdigo que possui
var errorTypes = { um nmero de 0 a 3. Esta uma maneira legal de associar
0: "Unknown error", uma mensagem de erro com cada cdigo em JavaScript.
1: "Permission denied by user", Criamos um objeto com trs propriedades
2: "Position is not available",
nomeadas de 0 a 3. Essas propriedades
so strings com uma mensagem de erro
3: "Request timed out" que queremos associar com cada cdigo.
}; E, usando a propriedade
var errorMessage = errorTypes[error.code];
error-code, assinalamos
uma daquelas strings a uma
if (error.code == 0 || error.code == 2) { nova varivel, errorMessage.
errorMessage = errorMessage + " " + error.message;
} No caso de erros zero e dois,
h, ocasionalmente, informaes
var div = document.getElementById("location");
adicionais na propriedade error.
div.innerHTML = errorMessage; message, ento adicionamo-la a
} Ento, adicionamos a mensagem pgina nossa string errorMessage.
para que o usurio saiba.
voc est aqui 177

PFCG_HeadFirstHTML5Prog.indb 177 05/06/2014 16:18:27


cdigo pronto para assar para computao distncia

Antes de rodarmos o teste, vamos dar uma olhada mais de perto nos tipos de erros
que podemos encontrar.
Este um erro genrico, que usado quando
nenhum dos outros faz sentido. D uma olhada na
propriedade error.message para mais informaes.
var errorTypes = { Isto significa que o usurio
0: "Unknown error", negou a solicitao de usar
1: "Permission denied by user", sua informao de localizao.
2: "Position is not available", Isto significa que o browser tentou,
3: "Request timed out" mas falhou ao obter sua localizao.
Novamente, consulte error.message
};
para mais informaes.
Finalmente, a geolocalizao possui uma Veremos como mudar o tempo
configurao interna de tempo limite, a limite padro da geolocalizao
qual, se excedida antes de uma localizao mais a frente, neste captulo.
ser determinada, causa este erro.

Quando tiver digitado o teste de diagnstico,


v em frente e experimente. Obviamente que
se voc recebeu uma localizao, ento tudo
funcionar e no ver nenhum desses erros. Voc
poder forar um erro, negando a solicitao do
browser para usar sua localizao. Ou voc pode
ser criativo e, digamos, andar at um lugar fechado
com seu telefone com GPS, enquanto desativa
sua rede. No pior dos casos, se esperar por um
longo perodo sem obter uma localizao ou uma
mensagem de erro, mais provvel que voc
espere por um longo valor de tempo limite para,
bem, atingi-lo. Veremos como diminuir a durao
do tempo limite um pouco mais para frente.

Aqui esto os resultados do diagnstico

No dei permisso para que minha localizao seja usada.


Minha posio no estava disponvel.
Aps alguns segundos, recebi uma mensagem indicando que havia uma
solicitao de tempo limite.

Nada aconteceu; nenhuma localizao e nenhum alerta de erro.


Outros_____________________________________________

178 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 178 05/06/2014 16:18:28


tornando ativa sua localizao html

Para testar seu cdigo de


geolocalizao num
dispositivo mvel, voc vai
querer um servidor.
P: A latitude e a longitude informadas
pelo aplicativo para minha localizao
no batem. Por qu?
A menos que tenha um meio de carregar seu HTML,
JavaScript e arquivos CSS diretamente em seu dispositivo
mvel, a maneira mais fcil para test-los coloc-los
R: H uma poro de maneiras para
que seu dispositivo e o servio provedor de
num servidor (d uma olhada no prximo captulo para ver localizao calcule sua posio, e alguns
como configurar seu prprio servidor, se quiser) e acess- so mais precisos que outros. O GPS
los l. Se voc tiver um servidor e quiser fazer isso, ns normalmente o mais preciso. Vamos ver um
o encorajamos. Por outro lado, se isso no funcionar jeito de determinar a estimativa de preciso
para voc, informamos que o cdigo est disponvel nos que o servio de localizao retorna como
servidores Wickedly Smart, podendo assim testar em parte do objeto position, ento voc poder
seus dispositivos mveis. Dito isto, damos fora para saber quanto esperar de preciso em
que siga com o cdigo em seu desktop, e uma vez que relao aos dados de localizao.
ele esteja funcionando l, teste em seu dispositivo mvel
usando o servidor (o seu ou o Wickedly Smart).
Para o primeiro test drive (incluindo o diagnstico de
erro), use seu dispositivo para ir at o endereo http://
wickedlysmart.com/hfhtml5/chapter5/latlong/myLoc.html.

Revelando nossa
localizao secreta...
Agora que tiramos o bsico da frente, vamos
fazer algo mais interessante com localizao.
Que tal vermos quo longe voc est de nossa
localizao secreta em Wickedly Smart QG?
Para fazer isso, precisamos das coordenadas QG
e precisamos saber como calcular a distncia
entre duas coordenadas. Primeiro, vamos
acrescentar outra <div> para usar no HTML:
Quartel-general da Wickedly Smart
est em 47.62405, -122.52099.
.
.
.
<body>
<div id="location">
Your location will go here.
</div>
<div id="distance">
Distance from WickedlySmart HQ will go here.
</div>
</body>
</html> Acrescente esta nova <div> em seu HTML.
voc est aqui 179

PFCG_HeadFirstHTML5Prog.indb 179 05/06/2014 16:18:28


cdigo pronto para assar para computao distncia

Alguns Cdigos Prontos para Assar:


computando distncia
Sempre quis saber como computar a distncia entre dois pontos numa esfera?
Voc achar os detalhes fascinantes, mas eles esto um pouco fora de contexto
neste captulo. Ento, vamos lhe dar alguns cdigos prontos para assar que fazem
exatamente isto. Para computar a distncia entre duas coordenadas, a maioria
das pessoas usa a equao Haversine; voc a encontrar implementada logo abaixo.
Sinta-se vontade para us-la onde quer que precise para saber a distncia entre
duas coordenadas:

Esta funo considera duas coordenadas, uma


de partida e outra de destino, e oferece a
distncia em quilmetros entre elas.

function computeDistance(startCoords, destCoords) {


var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);

var Radius = 6371; // radius of the Earth in km


var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;

return distance;
}

function degreesToRadians(degrees) {
Veremos mais dessa
var radians = (degrees * Math.PI)/180; funo no captulo Canvas.
return radians;
}
Acrescente isto em seu arquivo myLoc.js

180 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 180 05/06/2014 16:18:28


tornando ativa sua localizao html

Queremos computar a
Escrevendo o cdigo para distncia de voc at
ns em linha reta.
encontrar a distncia
Agora que temos uma funo para computar a distncia
entre duas coordenadas, vamos definir nossa localizao (isto
, a do autor) aqui no QG da Wickedly Smart (v em frente e
digite isto tambm):
var ourCoords = { Aqui vamos definir um objeto
latitude: 47.624851, literal para as coordenadas
de nossa localizao no QG da
longitude:
-122.52099 Wickedly Smart. Adicione isto
como uma varivel global no
}; incio de seu arquivo myLoc.js.
Agora vamos escrever o cdigo: tudo que precisamos fazer
passar as coordenadas de sua localizao e de nossa localizao
funo computeDistance:
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var div = document.getElementById("location");


div.innerHTML = "You are at Latitude: " + latitude + ", Longitude:
" + longitude; Aqui estamos passando as
coordenadas de sua posio e
var km = computeDistance(position.coords, ourCoords); tambm nossas coor
denadas
var distance = document.getElementById("distance");
para computeDist .ance
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
}
Ento pegamos os resultados e atualizamos
os contedos da distncia <div>.
Test drive da ativao da localizao
Agora, vamos levar este novo cdigo para um test
drive. Vamos em frente. Termine de adicionar o
cdigo em myLoc.js e ento recarregue myLoc.
html em seu browser. Confira sua localizao e
tambm sua distncia de ns.
Sua localizao e distncia
sero, logicamente,
diferentes, dependendo de
onde estiver no mundo.
Tente online http://wickedlysmart.com/hfhtml5/chapter5/distance/myLoc.html
voc est aqui 181

PFCG_HeadFirstHTML5Prog.indb 181 05/06/2014 16:18:29


adicionando google maps

Sabe, ver minha localizao


como 34.20472, -90.57528
muito legal, mas um mapa
bem que viria a calhar
agora!

Mapeando sua posio


Como lhe dissemos anteriormente, a API de Geolocalizao bem simples
fornece-lhe uma maneira de saber onde voc est (e, como ver mais a frente,
rastrear tambm), mas no lhe fornece quaisquer ferramentas para visualizar sua
localizao. Para fazer isso, precisamos confiar numa ferramenta terceirizada,
e como voc deve imaginar, o Google Maps de longe a ferramenta mais
popular para tanto. Obviamente, o Google Maps no faz parte das especificaes
HTML5, mas os dois interagem bem, portanto, no nos importamos com um
pouco de diversidade aqui e ali para lhe mostrar como integr-lo com a API
de Geolocalizao. Se quiser diversificar, pode comear adicionando isto ao
cabealho de seu documento HTML e depois vamos trabalhar para adicionar um
mapa sua pgina:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Certifique-se de digitar isto exatamente


Esta a localizao da API como est, incluindo o parmetro sensor
JavaScript do Google Maps. query* (a API no vai funcionar sem isso).
Estamos usando sensor=true, pois nosso
cdigo est usando sua localizao. Se
estivssemos usando apenas o mapa sem a
182 Captulo 5
localizao, digitaramos sensor=false.

PFCG_HeadFirstHTML5Prog.indb 182 05/06/2014 16:18:29


tornando ativa sua localizao html
Desvio
OffRoad
Como adicionar um mapa sua pgina
Agora que voc criou um link com a API do Google Maps, toda a funcionalidade
do Google Maps est disponvel por meio do JavaScript. Precisamos, porm, de
um lugar para pr nosso Google Maps, e, para fazer isso, precisamos definir um
elemento que ir fix-lo.
.
.
.
<body>
<div id="location">
Your location will go here.
</div>
<div id="distance">
Distance from WickedlySmart HQ will go here.
</div>
<div id="map"> Aqui est a <div>. Perceba que definimos um
</div> estilo em myLoc.css que ajusta o mapa <div> em
</body> 400px por 400px com uma margem preta.
</html>

Preparando-se para criar um mapa...


Precisamos de duas coisas para criar o mapa: latitude e longitude (j
sabemos como consegui-las) e de um conjunto de opes que descrevam
como queremos cri-lo. Comecemos com a latitude e a longitude. J No se esquea!
sabemos como consegui-las com a API de Geolocalizao, mas a API Construtores
do Google gosta delas amarradas em seu prprio objeto. Para criar um comeam com uma
destes objetos, podemos usar um construtor fornecido pelo Google: letra maiscula.
var googleLatAndLong = new google.maps.LatLng(latitude, longitude);

google.maps precede todos os Eis o construtor, que pega nossa latitude e longitude
mtodos da API do Google Maps. e entrega um novo objeto que fixa os dois.
O Google nos d algumas opes de ajustes para controlar como o mapa ser
criado. Por exemplo, podemos controlar a intensidade do zoom com que o
mapa visto, onde o mapa centralizado e o tipo de mapa, como um mapa
de estradas, uma vista de satlite, ou ambos. Segue como criamos as opes:
A opo de zoom pode ser especificada de 0 a 21. Experimente o
zoom: nmeros maiores correspondem a mais zoom (ento poder ver
mais detalhes). 10 meio que do tamanho de cidades.
var mapOptions = {
zoom: 10,
Aqui est nosso novo objeto que acabamos de criar.
center: googleLatAndLong,
Queremos que o mapa esteja centrado nesta localizao.
mapTypeId: google.maps.MapTypeId.ROADMAP Voc pode experimentar
}; tambm SATELLITE e
HYBRID como opes aqui.
voc est aqui 183

PFCG_HeadFirstHTML5Prog.indb 183 05/06/2014 16:18:29


cdigo para exibir mapa
Desvio
OffRoad
Mostrando o Mapa
Vamos pr tudo junto numa nova funo, showMap, que pega um conjunto de
coordenadas e mostra um mapa em sua pgina:
Estamos declarando um mapa de varivel global, que ir fixar o mapa do
var map; Google depois de o criarmos. Voc ver como isso ser til num instante.

function showMap(coords) { Usamos nossa latitude e


var googleLatAndLong =
nossa longitude a partir
do objeto coords...
new google.maps.LatLng(coords.latitude,
coords.longitude); ...e usamos elas para
var mapOptions = {
criar um objeto
googlemapsLatLong.
zoom: 10,
center: googleLatAndLong, Criamos o objeto mapOptions
mapTypeId: google.maps.MapTypeId.ROADMAP com as opes que queremos
}; ajustar em nosso mapa.
var mapDiv = document.getElementById("map"); Finalmente, pegamos o mapa
map = new google.maps.Map(mapDiv, mapOptions); <div> do DOM e o passamos
} com o mapOptions para o
Aqui est outro construtor da API do construtor do Mapa para criar
Estamos assinalando o novo o objeto google.maps.Map. Isso
objeto Map para nosso Google, que pega um elemento e nossas mostra o mapa em nossa pgina.
mapa de varivel global. opes e cria e devolve um objeto map.

V em frente e acrescente este cdigo ao seu arquivo no fim. Agora,


precisamos apenas amarr-lo a seu cdigo existente. Faamos isso ao editar a
funo displayLocation:

function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var div = document.getElementById("location");


div.innerHTML = "You are at Latitude: " + latitude + ", Longitude:
" + longitude;

var km = computeDistance(position.coords, ourCoords);


var div = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";

showMap(position.coords);
Acionaremos showMap a partir de displayLocation
depois de ter atualizado as outras <div>s na pgina.
}

184 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 184 05/06/2014 16:18:29


tornando ativa sua localizao html
Desvio
OffRoad
Test drive de seu novo
heads-up display
Certifique-se de ter adicionado
Eis nosso novo
todo o novo cdigo da pgina
Google Map!
anterior e tambm adicionado a
nova <div> do mapa em seu HTML;
ento, recarregue sua pgina e, se
o browser puder determinar sua
localizao, voc ver um mapa.

Estamos mostrando a
localizao do ciclista a
34.20472, -90.57528;
claro que voc provavelmente
est em outro lugar.

Legal! Existe alguma


forma de vermos nossa
exata localizao no
mapa? Com alguns
desses ajustes malucos
de vocs?

Voc realmente quer


um desses perto de
sua bicicleta?

Visite: http://wickedlysmart.com/hfhtml5/chapter5/map/myLoc.html
voc est aqui 185

PFCG_HeadFirstHTML5Prog.indb 185 05/06/2014 16:18:30


adicionando um marcador google
Desvio
OffRoad
Colocando um alfinete...
Seria mais til ainda, se pudesse ver exatamente onde est
localizado no mapa. Se voc j usou o Google
Maps, ento provavelmente j est familiarizado
com os alfinetes que apontam a localizao de
itens que est procurando. Por exemplo, se
procurar pelo Obelisco Espacial (Space Needle),
em Seattle, no Estado de Washington, voc ter
um mapa com um alfinete prximo rea do
Obelisco na cidade e, se clicar nele, voc ver
uma janela de informao com mais detalhes
sobre o item. Bem, esses alfinetes so chamados
de marcadores e eles so uma das inmeras
coisas oferecidas pela API do Google Maps.
Adicionar um marcador com uma janela pop-up de Quando voc procura por um
informao requer um pouco de cdigo, pois voc ter que item no Google Maps, v um
criar o marcador, a janela de informao e um handler para o alfinete vermelho assinalando
click event* do marcador (que abre a janela de informao). o local do resultado da busca.
Dado que estamos em uma distrao, vamos passar pelo
assunto bem rpido, mas, neste ponto do livro, voc tem tudo
que precisa para estar altura!

1 Comece criando uma nova funo, addMaker, e em seguida use a


API do Google para criar um marcador:

A funo addMaker pega um mapa, latitude e


longitude no estilo Google, um ttulo para o marcador
e tambm algum contedo para a janela de informao.

function addMarker(map, latlong, title, content) {

var markerOptions = {
Criamos um objeto options com a latitude
position: latlong, e longitude, o mapa, o ttulo e se queremos
map: map,
ou no que o marcador seja clicvel...
title: title,
...ajustamos para true aqui, pois queremos
clickable: true que seja possvel mostrar uma janela de
}; informao quando for clicado.
var marker = new google.maps.Marker(markerOptions);

} Ento, criamos o objeto marker, usando outro


construtor da API do Google, e o passamos ao objeto
markerOptions que criamos.
186 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 186 05/06/2014 16:18:31


tornando ativa sua localizao html
Desvio
OffRoad

2 Em seguida, criaremos a janela de informao, definindo algumas


opes especficas para, ento, criar um novo objeto InfoWindow com
a API do Google. Adicione o cdigo abaixo em sua funo addMaker:

function addMarker(map, latlong, title, content) {


.
.
Nosso outro cdigo ainda est aqui,
. estamos apenas salvando algumas rvores...
Agora vamos definir algumas opes
var infoWindowOptions = { para a janela de informao
content: content, Precisamos do contedo...
position: latlong

};
e da latitude e da longitude.
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

Com isso criamos a janela de informao.


google.maps.event.addListener(marker, "click", function() {

infoWindow.open(map); Depois, usaremos o mtodo


Passamos ao ouvinte uma addListener do Google Maps
});
funo que chamada, para adicionar um listener
} Quando o marcador clicado, quando o usurio clica para o click event*. Um
esta funo chamada e no marcador. listener exatamente como um
InfoWindow abre no mapa. handler, como onload e onclick,
que voc j viu anteriormente.

3 Agora, tudo o que resta fazer chamar a funo addMaker da showMap,


certificando-se de passar todos os argumentos corretos para os quatro
parmetros. Acrescente isso no final de sua funo showMap:

var title = "Your Location";

var content = "You are here: " + coords.latitude + ", " + coords.
longitude;

addMarker(map, googleLatAndLong, title, content);

Passamos o mapa e os objetos ... e uma string de ttulo e outra de contedo


googleLatAndLong que criamos para o marcador.
usando a API do Google Maps...

voc est aqui 187

PFCG_HeadFirstHTML5Prog.indb 187 05/06/2014 16:18:32


mais google maps
Desvio
OffRoad
Testando o marcador
Pegue todo o cdigo adicionado para addMaker, atualize o
showMap para acionar o addMaker e recarregar a pgina.
Voc ver um mapa com um marcador e sua localizao nele.
Experimente clicar no marcador. Ver, logo em seguida, uma
janela pop-up com sua latitude e longitude.
Isso timo, pois agora sabe exatamente onde est (caso
estivesse perdido ou algo do gnero...).
Eis como parece nosso mapa
com o marcador e a janela
pop-up de informaes.

V at http://wickedlysmart.com/hfhtml5/chapter5/marker/myLoc.html

Outras coisas legais que voc pode fazer


com a API do Google Maps
Apenas tocamos a ponta do iceberg de todas as coisas que podemos fazer com a API
do Google Maps e, embora esta API esteja muito longe do assunto principal deste
livro, voc j est bem treinado para ser capaz de fuar nela por conta prpria.
Aqui esto algumas coisas para se considerar utiliz-la e alguns pontos de partida.
Controles: Por padro, seu mapa do Google inclui muitos controles, como o controle
de zoom, o controle panormico, um controle para alternar entre visualizao de mapa ou
de satlite e at mesmo um controle para street view (o bonequinho acima do controle do
zoom). Voc poder acessar estes controles programaticamente a partir do JavaScript para
us-los em seus aplicativos.

Servios: Sempre faz uma visita s direes do Google Maps? Se assim o for,
ento voc j usou o servio Directions (direes). Voc tem acesso a direes, assim
como outros servios, como distncia e street view, por meio das APIs de servios
do Google Maps.

Camadas: as camadas fornecem outra vista superior do mapa pelo Google; digamos,
uma camada de temperatura. Se estiver comutando, voc poder verificar o trnsito com
tal camada. possvel criar camadas personalizadas, como marcadores personalizados,
suas fotos e, basicamente, tudo o mais que puder imaginar usando as APIs de camada do
Google Maps.
Tudo isto est disponvel por meio da API JavaScript do Google Maps. Para prosseguir em
suas experincias, d uma olhada na seguinte documentao:
http://code.google.com/apis/maps/documentation/javascript/

188 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 188 05/06/2014 16:18:32


tornando ativa sua localizao html

Entrevista da semana:
Uma conversa com uma pretensa API HTML5
Use a Cabea!: Bem-vinda, igual a rpido e fcil de aprender, certo?
Geolocalizao. J vou dizendo de antemo Talvez seja por isso que eu seja a primeira
que estou um pouco surpreso de v-la aqui. API com seu prprio captulo.
Geolocalizao: Por qu? Use a Cabea!: Vamos falar sobre suporte.
Use a Cabea!: Voc nem mesmo faz Geolocalizao: um tpico curto,
parte oficialmente das especificaes do pois tenho suporte em quase todos os
HTML5, e olha voc a, a primeira API a navegadores, de desktop ou mobile.
receber um captulo! Como se sente?
Use a Cabea!: Ok, ento uma coisa que
Geolocalizao: Bem, voc est certo sempre quis pergunt-la: quo boa voc
quanto a eu ser definida em uma num dispositivo que no possua GPS?
especificao parte da HTML5, mas
Geolocalizao: H uma concepo
sou uma especificao oficial do W3C.
errnea de que sou, de certa forma,
s olhar em volta e ver que qualquer
dependente de GPS. Existem outras formas
dispositivo mvel que vale o que come j
de se determinar a localizao hoje, por
me possui implementada em seu navegador.
meio da triangulao de torres de celular
Digo, quo bom um aplicativo web para
utilizando endereos IP, entre outros. Se
dispositivo mvel sem mim?
voc possui GPS, timo, pois realmente
Use a Cabea!: Ento, quais os tipos de poderei ajud-lo ainda mais; mas, se no, h
aplicativos que a utilizam? uma poro de formas de obter a localizao.
Geolocalizao: Na verdade, a maioria Use a Cabea!: Ajudar ainda mais?
dos aplicativos que as pessoas usam; desde
Geolocalizao: Se voc tiver um
aplicativos que permitem atualizar seu status
dispositivo mvel bom o bastante, posso lhe
e incluir informao de geolocalizao, at
oferecer altitude, direo, velocidade, todo
aplicativos de cmera que gravam onde
o tipo de coisas.
as fotos so tiradas, ou mesmo aplicativos
sociais que encontram amigos por perto Use a Cabea!: Digamos que nenhum
ou permitem ingressar em vrios locais. desses mtodos funcione, ou seja, GPS,
Caramba, as pessoas esto me usando at endereo IP, triangulao; ento para que
para gravar por onde elas vo de bicicleta, voc servir?
ou correm, ou comem, ou para saber aonde Geolocalizao: Bem, no posso garantir
esto indo. que voc sempre conseguir uma localizao,
Use a Cabea!: Sua API parece meio mas est tudo bem, pois ofereo uma
simplista, quero dizer, voc tem o qu? Umas forma boa de lidar com falhas. Tudo o que
duas propriedades ou mtodos no total? precisar fazer me dar um error handler e
poderei acion-lo se tiver algum problema.
Geolocalizao: Pequeno e simples
poderoso. Quantas reclamaes sobre mim Use a Cabea!: Bom saber. Bem,
voc v por a afora? Nenhuma. Tenho nosso tempo est acabando. Obrigado,
o que todo desenvolvedor precisa e os Geolocalizao, por estar aqui conosco e
aplicativos com localizao esto falhando parabns por ter sido promovida a uma
s dzias pelo mercado. Alm disso, menor verdadeira W3C standard.

voc est aqui 189

PFCG_HeadFirstHTML5Prog.indb 189 05/06/2014 16:18:32


detalhes da api de geolocalizao

Enquanto isso, de volta


API de Geolocalizao...
J trilhamos uma boa distncia com a API de
Geolocalizao: determinamos nossa localizao,
computamos distncias a outras localidades, lidamos
com situaes de erro da API e at acrescentamos um
mapa usando a API do Google Maps. Ainda no est,
porm, na hora de descansar, pois estamos no ponto de
nos familiarizarmos com as partes interessantes da API.
Tambm chegamos ao ponto entre saber sobre a API e
ter pleno domnio sobre ela; portanto, vamos continuar!
Uma coisa que precisamos fazer antes de seguir em
frente dar uma olhada mais
de perto na API em si. Falamos Geolocation
bastante sobre ela, mas nunca
olhamos para ela de fato. Como getCurrentPosition
vnhamos falando, a API watchPosition
, realmente, bem simples, clearWatch
possuindo apenas trs mtodos:
getCurrentPosition (o
qual voc j sabe alguma coisa Os mtodos que
a respeito), watchPosition so parte da API
(que voc entender em pouco de Geolocalizao.
tempo) e clearWatch (que,
voc adivinhou, est relacionado com o anterior). Antes
de chegar nesses dois novos mtodos, vamos dar outra
O error handler acionado quando
olhada no getCurrentPosition e em alguns objetos
o browser no pode determinar sua
relacionados, como os objetos Position e Coordinates.
localizao. Como vimos, h diversas
Voc encontrar algumas coisas novas l que no conhecia.
razes possveis para isso.

getCurrentPosition(successHandler, errorHandler, positionOptions)


Lembre-se de que o success handler (ou E temos outro parmetro que ainda emos sobre
callback) acionado quando uma localizao no usamos que nos permite arrumar Sabtude e
determinada, e passado um objeto position. o comportamento da geolocalizao. lati itude, mas
long
existem outras
propriedades
Position Coordinates no objeto
coords
coordinates.
latitude
timestamp longitude garantido
accuracy que trs
Sabemos a respeito da propriedade coords, mas h altitude estejam l: lat,
tambm uma propriedade timestamp em posio que altitudeAccuracy long e accuracy.
contm o tempo em que foi criado o objeto position. heading O resto pode ou
Isso pode ser til para saber a idade da localizao. speed no ter suporte,
dependendo de
190 Captulo 5 seu dispositivo.

PFCG_HeadFirstHTML5Prog.indb 190 05/06/2014 16:18:33


tornando ativa sua localizao html

Podemos falar sobre sua preciso?


Encontrar sua localizao no exatamente uma cincia.
Dependendo do mtodo que o browser utilizar, voc
poder apenas saber qual o Estado, cidade ou quadra em
que voc est. Portanto, novamente, com dispositivos mais
avanados, voc poder descobrir sua localizao num raio
de 10 metros, associada com velocidade, direo e altitude.
Ento, como escrevemos cdigo, dada esta situao? Os
designers da API de Geolocalizao fizeram um pequeno
contrato conosco: toda vez que eles nos derem uma localizao,
tambm nos daro a preciso da localizao em metros, com
cerca de 95% de grau de confiana. Portanto, por exemplo,
podemos saber nossa localizao com preciso de 500 metros, o
que significa que podemos contar com certeza com a localizao,
contanto que incluamos um raio de 500 metros. Para 500 metros,
estaramos seguros, por exemplo, para indicar recomendaes de
cidades ou vizinhanas, porm talvez no queiramos fornecer direes rua a rua. Em qualquer
um dos casos, a deciso ser de seu aplicativo sobre como ele vai querer usar a preciso dos dados.
Chega de falao, vamos descobrir como est sua preciso na localizao atual. Como acabou
de ver, a informao de preciso parte do objeto coordinates. Vamos tir-la de l e us-la na
funo displayLocation.
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");

div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";

Aqui usamos a propriedade de


var km = computeDistance(position.coords, ourCoords); posio accuracy e anexamos no
var div = document.getElementById("distance");
fim da innerHTML da <div>.
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
showMap(position.coords);
}

Teste de Preciso
Certifique-se de ter acrescentado esta linha em seu cdigo e
carregue a pgina. Agora poder ver quo precisa sua localizao.
Garanta que experimentar em qualquer dispositivo que tiver.

Experimente: http://wickedlysmart.com/hfhtml5/chapter5/
accuracy/myLoc.html
voc est aqui 191

PFCG_HeadFirstHTML5Prog.indb 191 05/06/2014 16:18:34


rastreando movimento

Onde quer que v, l est voc


A origem desta frase foi arduamente debatida. Alguns dizem
que sua primeira meno real foi no filme Buckaroo Banzai,
outros remontam suas origens ao texto Zen Budista, e ainda
outros citam diversos livros, filmes e canes populares.
No importa a fonte, chegou para ficar, e mais ainda
depois desse captulo, pois vamos transform-la
num pequeno aplicativo web chamado Onde quer
que v, l est voc. Sim, h um aplicativo para isso!
Vamos precisar, porm, de um pouco de sua participao, o
leitor, porque para esse aqui voc ter de (desculpe-nos o termo)
levantar o traseiro e se mexer um pouco.
Onde voc se encaixa nesse
debate? O dito um produto
O que vamos fazer estender nosso cdigo atual de forma que do Banzai Institute ou possui
ele rastreie seus movimentos em tempo real. Para fazer isso, origens na literatura Zen?
vamos juntar tudo, incluindo os ltimos dois mtodos da API de
Geolocalizao, e criar um aplicativo que o rastreie em tempo
quase real.

Como vamos rastrear seus movimentos


Voc j foi informado de que a API de Geolocalizao tem um mtodo
watchPosition. Este mtodo faz exatamente o que diz: presta ateno em seus
movimentos e reporta sua localizao de acordo com as mudanas da mesma.
O mtodo watchPosition, na verdade, parece justamente com o mtodo
getCurrentPosition, porm se comporta um pouco diferente: aciona seu success
handler repetidamente cada vez que sua posio muda. Vejamos como funciona:

1 Seu aplicativo aciona 2 watchPosition fica


watchPosition, no background e
passando uma funo constantemente
success handler. monitora sua
posio.

browser
position.coords.latitude
e
position.coords.longitud

4 watchPosition
continua a monitorar 3 Quando sua
sua posio (e posio muda,
report-la a seu watchPosition
success handler) at aciona sua funo
que limpe-a, acionando success handler
clearWatch. para reportar sua
nova posio.

192 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 192 05/06/2014 16:18:34


tornando ativa sua localizao html

Inicializando o aplicativo
Usaremos nosso cdigo anterior como um ponto de partida;
primeiro, vamos adicionar alguns botes ao HTML de
forma que possamos comear e parar o rastreamento de sua
localizao. Por que precisamos dos botes? Bem, primeiro
de tudo, os usurios no querem ser rastreados toda hora e,
normalmente, eles querem ter controle sobre isso. Contudo,
h uma outra razo: checar sua posio constantemente uma
operao de gasto de energia intenso para um dispositivo mvel
e, se deix-lo acionado a todo tempo, diminuir a vida til de
sua bateria. Portanto, antes de tudo, vamos atualizar o HTML
para adicionar um formulrio e dois botes: um para comear a
ver sua posio e outro para parar.
Rastrear um usurio em
tempo real pode sugar mesmo
<!doctype html> sua bateria. Certifique-se
<html> de informar seu usurio a
<head> respeito do rastreamento,
<meta charset="utf-8"> e dar a ele certo controle
<title>Onde quer que v, l est voc</title> sobre isso tambm.
<script src="myLoc.js"></script>
<link rel="stylesheet" href="myLoc.css">
</head>
<body> Estamos
<form> acrescentando
<input type="button" id="watch" value="Watch me">
um elemento de
formulrio com
<input type="button" id="clearWatch" value="Clear watch"> dois botes, um
</form> para comear
<div id="location"> a localizao,
Your location will go here. Vamos reutiliz ar nossas com uma id de
</div>
velhas <div>s para watch , e outro
enviar informao sobre para parar a
<div id="distance"> localizao em tempo real. localizao,
Distance from WickedlySmart HQ will go here. com uma id de
</div> clearWatch.
<div id="map">
</div>
</body>
</html> J voltaremos a nos preocupar
com o mapa do Google.

voc est aqui 193

PFCG_HeadFirstHTML5Prog.indb 193 05/06/2014 16:18:34


usando watchposition

Retrabalhando nosso antigo cdigo...


Agora, precisamos adicionar button click handlers para os dois botes. Iremos
adicion-los funo getMyLocation apenas se houver suporte para
geolocalizao. J que vamos controlar todo o rastreamento de geolocalizao
usando os dois botes, removeremos o acionamento existente para
getCurrentPosition de getMyLocation. Vamos em frente remover aquele
cdigo e adicionar dois handlers: watchLocation para o boto de incio da
localizao e clearWatch para o boto de limpeza:
Se o browser der suporte geolocalizao,
vamos adicionar nossos button click handlers,
function getMyLocation() { mas no h sentido em adicion-los se a
if (navigator.geolocation) { geolocalizao no for suportada.
navigator.geolocation.getCurrentPosition(displayLocation,displayError);
var watchButton = document.getElementById("watch");
watchButton.onclick = watchLocation;
var clearWatchButton = document.getElementById("clearWatch");
clearWatchButton.onclick = clearWatch;
Vamos acionar
}
watchLocation para iniciar
else { e clearWatch para limpar.
alert("Oops, no geolocation support");
}
}

Escrevendo o handler watchLocation


Neste ponto, eis o que estamos tentando fazer: quando o usurio clicar no
boto de incio, significa que ele quer comear a rastrear sua posio. Portanto,
usaremos o mtodo geolocation.watchPosition para iniciar sua
localizao. O mtodo geolocation.watchPosition possui dois parmetros:
um success handler e um error handler; assim, vamos reutilizar aqueles que j
temos. Ele tambm retorna um watchId, que pode ser usado a qualquer tempo
para cancelar o comportamento de localizao. Vamos guardar o watchId numa
varivel global, que ser usada quando escrevermos o click handler para o boto
de limpar. Abaixo, segue o cdigo para a funo watchLocation e para o
watchId. V em frente e acrescente este cdigo em myLoc.js:
Acrescente watchId no topo de seu arquivo como
var watchId = null; uma varivel global. Vamos inicializ-lo como null.
Precisaremos dele mais tarde para limpar a localizao.
function watchLocation() {
watchId = navigator.geolocation.watchPosition(displayLocation,
displayError);
}
Estamos acionando o mtodo watchPosition, passando o success handler que j
escrevemos, o displayLocation e nosso error handler existente, displayError.
194 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 194 05/06/2014 16:18:35


tornando ativa sua localizao html

Escrevendo o handler clearWatch


Agora vamos escrever o handler para limpar a atividade de localizao. Para fazer isso,
precisamos pegar o watchId e pass-lo no mtodo geolocation.clearWatch.

function clearWatch() { Certifique-se de haver um watchId e depois...


if (watchId) {
navigator.geolocation.clearWatch(watchId); acione o mtodo
watchId = null; geolocation.
} clearWatch, passando
}
o watchId. Isso faz
a localizao parar.

Ainda precisamos fazer uma pequena atualizao para o displayLocation...


H uma pequena mudana que precisamos fazer e esta envolve o cdigo do
Google Maps que escrevemos antes. Neste cdigo, acionamos showMap para
mostrar o mapa do Google. Agora, o showMap cria um novo mapa em sua pgina
e isso uma coisa que voc s vai querer fazer uma vez. Lembre-se, porm, que
quando comear a pr para funcionar sua localizao com o watchPosition, o
displayLocation ser chamado todas as vezes que houver uma atualizao de
sua posio.
Para nos certificarmos de chamar o showMap apenas uma vez, vamos primeiro
testar para ver se o mapa existe, ento, se no existir, chamaremos o showMap.
Caso contrrio, o showMap j foi chamado (e j criou o mapa) e no precisamos
cham-lo novamente.
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var div = document.getElementById("location");


div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";

var km = computeDistance(position.coords, ourCoords);


var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";

if (map == null) {
showMap(position.coords);
} Se ainda no chamou o showMap, chame-o
}
agora; caso contrrio, no precisaremos cham-
-lo toda vez que displayLocation for chamado.
voc est aqui 195

PFCG_HeadFirstHTML5Prog.indb 195 05/06/2014 16:18:35


testando rastreamento de usurio

Hora de seguir em frente!


Certifique-se de que o cdigo novo esteja todo digitado e recarregue sua pgina,
myLoc.html. Agora, para verdadeiramente testar esta pgina voc precisar
relocalizar para ter sua posio atualizada. Ento, v dar uma caminhada, pegue sua
bicicleta, entre no carro, ou use qualquer que seja seu meio de transporte favorito.
No necessrio que se diga que, se voc estiver rodando no desktop, este aplicativo
ser bem chato (j que voc no poder lev-lo com voc). Sendo assim, realmente
necessrio utilizar um dispositivo mvel para este teste. Se precisar de ajuda para
inciar uma verso hospedada com seu dispositivo mvel, deixamos uma cpia deste
cdigo em:
http://wickedlysmart.com/hfhtml5/chapter5/watchme/myLoc.html.

.
Aqui est nosso teste..

Estes nmeros
vo se atualizar
medida que
voc se move.

Perceba que o mapa


vai se centralizar
em sua localizao
inicial, por ora...

V at: http://wickedlysmart.com/hfhtml5/chapter5/watchme/myLoc.html

196 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 196 05/06/2014 16:18:36


tornando ativa sua localizao html

P: Como posso controlar as taxas com que o browser


fornece atualizaes de minha localizao quando usar
R: Essas propriedades no possuem garantias de terem
suporte (e, obviamente, s tero suporte em dispositivos
watchPosition? mveis de ltima gerao); portanto, voc precisa ter certeza

R: No pode. O browser determina qual a taxa de


atualizao otimizada e decide quando voc mudou de posio.
de que seu cdigo pode lidar com tal situao adversa.

P: O que so heading e speed?

P: Por que minha localizao muda algumas vezes,


quando eu carrego a pgina pela primeira vez, mesmo eu
R: Heading a direo para a qual voc est viajando
e speed quo rpido est indo. Pense no caso de estar
estando parado? num carro em direo ao norte, na Interestadual 5, a 90

R: Voc se lembra que dissemos que o browser pode usar


alguns mtodos para determinar sua localizao? Dependendo do
km/h. Sua heading norte e sua speed 90 km/h. Se
estiver em seu carro, no estacionamento do Starbuzz Coffee,
ento sua speed ser 0 e voc no possuir heading (pois
mtodo (ou mtodos) que o browser estiver usando, a preciso da no est se movendo).
localizao pode se modificar de tempos em tempos. Normalmente,
a preciso melhora, mas, s vezes (digamos, voc estava dirigindo
em uma rea rural com apenas uma torre de celular), pode piorar.
P: Quando trao a distncia do meu local para o
seu, muito mais longe que o acusado no aplicativo.
Voc pode utilizar sempre a propriedade accuracy no objeto position. Por qu?

R:
coords para ficar atento preciso (accuracy).

P: Posso usar as propriedades altitude e


altitudeAccuracy do objeto coordinates?
Lembre-se de que nossa funo distance est
computando a distncia em linha reta. Sua ferramenta de
traar rotas provavelmente dar a distncia ao dirigir.

Abaixo, voc encontrar uma implementao alternativa para


o displayLocation. Consegue adivinhar o que isso faz? D
uma olhada e escreva sua resposta abaixo. Se voc um
aventureiro, v em frente!
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
if (km < 0.1) {
distance.innerHTML = "You're on fire!";
} else {
if (prevKm < km) {
distance.innerHTML = "You're getting hotter!";
} else {
distance.innerHTML = "You're getting colder...";
}
}
prevKm = km;

Escreva aqui o que voc


acha que essa coisa faz.

voc est aqui 197

PFCG_HeadFirstHTML5Prog.indb 197 05/06/2014 16:18:37


viso geral de objetos de geolocalizao

Voc tem algumas opes...


At ento, estivemos distantes do terceiro parmetro getCurrentPosition
(e watchPosition): o parmetro positionOptions. Com esse parmetro,
podemos controlar como a geolocalizao computa seus valores. Vamos dar uma
olhada nos trs parmetros, ao mesmo tempo em que vemos seus valores padro:

Primeiro, temos uma propriedade que e


ativa a alta preciso (vamos falar sobr
o que isso significa em alguns instantes).
var positionOptions = {
A opo timeout controla quanto
enableHighAccuracy: false, tempo o browser levar para
determinar sua localizao. Por
timeout: Infinity, padro, ela ajustada para infinito,
significando que o browser consegue
maximumAge: 0
todo o tempo que precisar.
Voc pode reiniciar isto para um valor
} em milissegundos, digamos 10000,
e mxima dando ao browser dez segundos para
Finalmente, a opo maximumAge ajusta a idad ser ter de encontrar uma localizao, seno o
que uma localizao pode ter, ante s do brow
o valo r ser zero, error handler chamado.
recalcular a localizao. Por padro, reca lcula r sua
significando que o browser sempre ter que
ntP osit ion for cham ado).
localizao (toda vez que getCurre

Podemos falar sobre sua preciso novamente?


J vimos que cada posio passada para ns pela API da Geolocalizao
possui uma propriedade accuracy (preciso). possvel, porm,
tambm dizer API da Geolocalizao que queremos apenas o
resultado mais preciso a que chegar. Agora, isso apenas considerado
como uma sugesto pelo browser e, de fato, implementaes
diferentes podem fazer coisas diferentes com a sugesto. Alm disso,
enquanto que esta opo no parece ser grande coisa, possui
vrias implicaes. Por exemplo, se voc no se importa com
o fato de que seus resultados no sejam super precisos
voc pode no ligar para o fato de que seu usurio est em
Baltimore a API pode ser capaz de diz-lo isso de forma
bem rpida e barata (em termos de consumo de energia).
Se, por outro lado, voc precisa saber a rua na qual se
encontra seu usurio, tudo bem, mas a API talvez tenha
que ativar o GPS, utilizando muita energia para extrair tal
informao. Com a opo enableHighAccuracy, voc
est dizendo API que voc precisa da localizao mais
precisa que puder, mesmo tendo seus custos. Tenha, no
entanto, sempre em mente que usar esta opo no garante
que o browser possa lhe oferecer o uma localizao mais apurada.

198 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 198 05/06/2014 16:18:37


tornando ativa sua localizao html

O mundo das timeouts e


maximum age...
Revisemos mais uma vez o que so as opes timeout e
maximumAge:
timeout: Esta opo diz ao browser quanto tempo
leva para determinar a localizao do usurio. Perceba
que, se o usurio for avisado para aprovar a solicitao
de localizao, o timeout no iniciado at que
seja aceito. Se o browser no puder determinar uma
nova localizao dentro do nmero de milissegundos
especificado no timeout, o error handler chamado. Por
padro, esta opo definida como infinito (Infinity).

maximumAge: Esta opo diz ao browser qual a idade que a localizao


pode ter. Portanto, se o browser possuir uma localizao determinada em sessenta
segundos e a maximumAge for ajustada a 90000 (90 segundos), uma chamada para
getCurrentPosition retornar uma posio existente e armazenada (o browser
no vai querer uma nova). Se, porm, a maximumAge estiver ajustada para 30
segundos, o browser ser forado a determinar uma nova posio.

Portanto, ao usar maximumAge, posso


realmente ajustar a frequncia com a qual
meu browser recalcula ou determina minha
posio. Vejo que usar isso pode tornar meu
aplicativo mais rpido e mais econmico
para a bateria. E quanto timeout? Como
posso us-la para melhorar as coisas?

Voc est certo em relao a essa histria da maximumAge.


Pense na timeout assim: quando estiver usando
maximumAge, tendo assim um resultado (armazenado)
ultrapassado, desde que o resultado seja mais novo que o
maximumAge que voc especificou, funciona muito bem
para otimizar a performance de seu aplicativo. O que
acontece, no entanto, quando a idade da posio exceder
a maximumAge? Bem, o browser sai para procurar outra.
Mas, e se voc no se importa tanto assim digamos que
voc fosse a uma nova localizao, se houvesse, mas, ao
contrrio, voc no precisasse disso agora. Bem, voc
poderia ajustar a timeout para 0 e, se houvesse um
resultado que passasse o teste maximumAge, timo,
prontinho; do contrrio, a chamada falharia imediatamente
e chamaria seu error handler (com um erro de cdigo
TIMEOUT). Esse apenas um exemplo dos jeitos criativos
com que voc pode usar timeout e maximumAge para
ajustar o comportamento de seu aplicativo.
voc est aqui 199

PFCG_HeadFirstHTML5Prog.indb 199 05/06/2014 16:18:38


exerccio de uso das opes de geolocalizao

Abaixo, voc ver algumas opes para a API


da Geolocalizao. Para cada opo, existe um
comportamento correlato.

Quero apenas posies armazenadas


{maximumAge:600000} com menos de 10 minutos. Se no
houver nenhuma posio com esse
tempo, pedirei uma nova posio,
mas apenas se conseguir uma em 1
segundo ou menos.

Usarei uma posio armazenada se


{timeout:1000, maximumAge:600000} o browser encontrar uma que tenha
menos de 10 minutos, ou ento vou
querer uma posio novinha em folha.

Quero apenas posies novas. O


{timeout:0, maximumAge:Infinity} browser pode demorar o quanto for
para arranj-las para mim.

Quero apenas posies armazenadas.


{timeout:Infinity, maximumAge:0} Vou pegar uma de qualquer idade.
Se no houver quaisquer posies,
ento chamarei o error handler. Sem
novas posies para mim! Sou para
uso offline.

200 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 200 05/06/2014 16:18:38


tornando ativa sua localizao html

Como especificar opes


Uma das coisas legais a respeito do JavaScript que, se quisermos especificar um conjunto de
opes num objeto, podemos apenas digitar um objeto literal, exatamente no meio de nossa
chamada de mtodo. assim que se faz: digamos que o objetivo seja habilitar a preciso e
tambm ajustar a idade mxima da localizao para 60 segundos (ou 60.000 milissegundos).
Poderamos criar opes como essa: Voc est
var options = {enableHighAccuracy: true, maximumAge: 60000}; comeando a
Ento, passe options tanto para getCurrentPosition perceber que o
quanto para watchPosition, assim: JavaScript bota
navigator.geolocation.getCurrentPosition(
pra quebrar? Bem,
pelo menos ns
displayLocation, Aqui estamos apenas achamos que sim.
displayError, passando nossas opes
options); adiante usando a Aqui esto as
varivel de opes. opes, escritas
como um objeto
Ou, poderamos apenas escrever as opes de objetos enfileiradas, assim: literal, bem na
navigator.geolocation.getCurrentPosition(
Voc ver muito esta chamada de
tcnica sendo usada funo! Alguns
displayLocation, no cdigo JavaScript. diriam que isto
displayError, mais fcil
{enableHighAccuracy: true, maximumAge: e mais legvel
60000});
como cdigo.
Agora que voc conhece as opes, o que elas fazem e como especific-las,
deveramos us-las. Faremos isso, mas lembre-se de que elas so feitas para ajustar
seu aplicativo, que ter seus prprios requisitos exclusivos. Estas opes tambm
so afetadas pelo seu dispositivo, pela implementao do browser e pela rede;
portanto, voc precisar saber mexer sozinho para explorar todas as capacidades.

Test Drive do Check-up dos Diagnsticos


quando voc rodou antes os diagnsticos, entendeu o caso-teste em que esperou e esperou e
nada aconteceu? bem provvel que isso tenha acontecido por causa do timeout infinito. Em
outras palavras, o browser vai esperar para sempre para obter a localizao, desde que no
encontre alguma condio de erro. Certo, agora voc sabe como consertar isso, pois podemos
forar a API de Geolocalizao para ser um pouco mais expediente, ajustando seu valor de
timeout. Veja abaixo como fazer isso:
function watchLocation() {
watchId = navigator.geolocation.watchPosition(
displayLocation,
Ao ajustar o timeout para 5000
displayError,
milissegundos (5 segundos), voc est
{timeout:5000}); se certificando de que o browser no
} Sinta-se vontade e tente pare e fique esperando para sempre
ajustar os valores de opo. tentando achar uma localizao.
voc est aqui 201

PFCG_HeadFirstHTML5Prog.indb 201 05/06/2014 16:18:38


otimizando uso de marcadores

No Tente Isso em Casa (Levando


NO TENTE
a Geolocalizao at oISSO
Limite) EM CASA
(LEVANDO A GEOLOCALIZAO
AT O LIMITE)
No seria divertido ver quo rpido seu browser consegue
encontrar sua localizao? Poderamos tornar isso o mais difcil
possvel para ele:
vamos pedir-lhe que ative preciso mxima,
no vamos permitir que ele use cache (ajustando
maximumAge para 0)
vamos cronometr-lo, ajustando a opo timeout para
100, e ento aumentar o timeout toda vez que falhar.
Cuidado: no sabemos se todos os dispositivos e suas baterias esto
prontos para isso. Portanto, por sua conta e risco!
Segue abaixo como podero aparecer as opes iniciais: Comearemos
aqui...
{enableHighAccuracy: true, timeout:100, maximumAge:0}
e se falhar, d-
{enableHighAccuracy: true, timeout:200, maximumAge:0} -lhe mais tempo...
{enableHighAccuracy: true, timeout:300, maximumAge:0} e assim por
diante...
Agora verifique o cdigo na prxima pgina, pois voc o achar bem
interessante. V em frente e digite-o simplesmente adicione-o ao seu
JavaScript em myLoc.js. Experimente-o em seus vrios dispositivos e
anote os resultados aqui:

ivo aqui o tempo


aqui o disposit
NO_______ ENCONTRADO EM _______ Milissegundos

NO_______ ENCONTRADO EM _______ Milissegundos

NO_______ ENCONTRADO EM _______ Milissegundos

NO_______ ENCONTRADO EM _______ Milissegundos

Experimente online: http://wickedlysmart.com/hfhtml5/


chapter5/speedtest/speedtest.html

202 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 202 05/06/2014 16:18:39


tornando ativa sua localizao html

var options = { enableHighaccuracy: true, timeout:100, maximumage: 0 };

Comece inicializando nossas opes com


window.onload = getMyLocation;
function getMyLocation() {
if (navigator.geolocation) { uma timeout de 100 e maximumAge de 0.
navigator.geolocation.getCurrentPosition(
displayLocation,
displayError,
Faa o de sempre aqui, com
options); displayLocation e displayError
} else { como nossos success e error
handlers, e passando a opes
alert("Oops, no geolocation support");

}
}
como o terceiro parmetro.
Faremos o error handler primeiro.
function displayError(error) {
var errorTypes = {
0: "Unknown error",
1: "Permission denied", Este cdigo aqui o mesmo...
2: "Position is not available",
3: "Request timeout"
};
var errorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + " " + error.message;
} Mas, no caso de uma falha,
var div = document.getElementById("location"); vamos aumentar a opo
div.innerHTML = errorMessage;
timeout para 100ms e
tentar novamente. Vamos
options.timeout += 100;
navigator.geolocation.getCurrentPosition(
displayLocation, deixar que o usurio saiba
displayError, que tambm estamos
options); tentando novamente.
div.innerHTML += " ... checking again with timeout=" + options.timeout;
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude +
", Longitude: " + longitude;
div.innerHTML += " (found in " + options.timeout + " milliseconds)";
}

Quando o browser captar sua posio com sucesso, permitiremos ao


usurio saber quanto tempo ele levou para isso.

voc est aqui 203

PFCG_HeadFirstHTML5Prog.indb 203 05/06/2014 16:18:40


adicionando um caminho para o mapa

Vamos finalizar este aplicativo!


Se parar e pensar a respeito, ver que, com apenas
um pouco de HTML e JavaScript, voc criou um
aplicativo web que no apenas pode determinar
sua localizao, mas tambm pode rastre-lo e
mostr-lo em tempo quase real. Nossa! O HTML
amadureceu (assim como nossas habilidades!).
Falando do aplicativo, voc no acha que precisa
dar uma polida para termin-lo? Por exemplo,
poderamos mostrar sua posio no mapa
medida que se move e ir um pouco mais frente,
mostrando onde voc esteve tambm, para criar Isto o que faremos para
um caminho pelo mapa. finalizar o aplicativo!
Vamos escrever uma funo para manter o mapa
centrado em sua localizao medida que se
move e colocar um novo marcador a cada vez que
tivermos uma nova posio:

Ok, vamos chamar esta


funo scrollMapToPosition
e vamos passar para ela umas
coordenadas da posio. As coordenadas sero sua ltima nova posio,
portanto vamos centrar o mapa naquela
localizao e pr um marcador ali tambm.
function scrollMapToPosition(coords) {
Primeiro, vamos pegar a nova
var latitude = coords.latitude;
lat e long e criar um google.
var longitude = coords.longitude; maps. Objeto LatLong neles!
var latlong = new google.maps.LatLng(latitude, longitude);
O mtodo panTo do mapa leva o objeto LatLong
map.panTo(latlong); e faz a rolagem do mapa, de maneira que sua nova
localizao fique no centro dele.
addMarker(map, latlong, "Your new location", "You moved to: " +
latitude + ", " + longitude);
}
Finalmente, vamos adicionar um marcador para sua nova localizao, usando a
funo addMarker que escrevemos mais cedo, passando para o mapa o objeto
LatLong, um ttulo e algum contedo para o novo marcador.

204 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 204 05/06/2014 16:18:41


tornando ativa sua localizao html

Integrando nossa nova funo


Agora, tudo que precisamos atualizar a
funo displayLocation para chamar
scrollMapToPosition cada vez que sua
posio mudar. Lembre-se de que, da primeira
vez que displayLocation for chamada,
vamos chamar showMap para criar o mapa e
mostrar um marcador para sua localizao inicial.
Toda vez depois disso, precisaremos apenas chamar
scrollMapToPosition para adicionar um novo
marcador e recentralizar o mapa.
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude
+ ", Longitude: " + longitude;
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
Na primeira vez que displayLocation for
if (map == null) { chamada, precisaremos desenhar o mapa e
adicionar o primeiro marcador.
showMap(position.coords); Depois disso, tudo o que
} else { precisamos fazer adicionar um
scrollMapToPosition(position.coords); novo marcador ao mapa existente.
}
}

E mais uma vez...


Recarregue sua pgina e comece a
se mover... Seu mapa est seguindo
Nossa trilha de
voc? Voc dever ver uma trilha
marcadores numa
de marcadores sendo adicionados
viagem recente
medida que se move (a menos
a partir do QG
que esteja parado em frente ao seu
da Wickedly
computador!).
Smart at o
secreto covil
Ento, apresentamos este aplicativo subterrneo
como prova concreta de que onde oh, espere, no
quer que v, l est voc. deveramos ter
dito isso...
V at http://wickedlysmart.com/hfhtml5/
chapter/watchmepan/myLoc.html
voc est aqui 205

PFCG_HeadFirstHTML5Prog.indb 205 05/06/2014 16:18:42


otimizando uso de marcadores

ms de Geladeira
Antes de concluirmos este captulo, achamos que
voc realmente quer polir este aplicativo. Percebeu
(sob algumas circunstncias) que existem alguns
marcadores em excesso sendo adicionados ao mapa
quando observa sua posio?
O que est acontecendo que watchPosition est
detectando seu movimento frequentemente, portanto,
est chamando o success handler do displayLocation Nossa! Isso
toda vez que d um passo. Uma maneira de consertar uma exploso de
isso adicionar um pouco de cdigo, de forma que marcadores?
tenhamos que nos mover bem, digamos uns 20
metros para finalidades de teste, antes de criarmos
um novo marcador.
J temos uma funo que ir computar a distncia entre
duas coordenadas (computeDistance). Tudo que temos de fazer salvar nossa
posio toda vez que displayLocation for chamado e verificar se a distncia
entre a posio anterior e a nova maior que 20 metros antes de chamar
scrollMapToPosition. Voc encontrar um pouco do cdigo para isso logo abaixo;
terminar sua tarefa. Cuidado, voc ter que usar alguns ms mais de uma vez!
var ___________________;
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude:
" + longitude;
div.innerHTML += " (with " + position.coords.accuracy +
" meters accuracy)";
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the
WickedlySmart HQ";
if (map == null) {
showMap(position.coords);
prevCoords = ________________;
} else {
var meters = ________________(position.coords, prevCoords) *
1000;
if (___________ > ______) {
scrollMapToPosition(position.coords);
______________ = _______________; computeDistance
}
} meters prevCoords = null;
} rds
position.coo 20 prevCoords

206 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 206 05/06/2014 16:18:42


tornando ativa sua localizao html

Pontos de Bala

A Geolocalizao no oficialmente parte da Quando getCurrentPosition for chamado, seu


especificao HTML5, mas considerada parte browser dever verificar se voc deu permisso
da famlia de especificaes HTML5. para compartilhar sua localizao.
H uma poro de maneiras para se determinar watchPosition um mtodo do objeto
sua localizao, dependendo do dispositivo geolocalizao, que monitora sua localizao
que tiver. e chama um success handler quando sua
localizao muda.
GPS um mtodo mais apurado para se obter
sua localizao do que a partir de triangulao de Assim como getCurrentPosition, watchPosition
torres de celular ou rede IP. possui um parmetro necessrio, um success
handler e dois parmetros opcionais, um error
Dispositivos mveis sem GPS podem usar a
handler e opes.
triangulao de torres de celular para determinar
sua localizao. Use clearWatch para parar o monitoramento de
sua localizao.
A API de Geolocalizao possui trs mtodos e
algumas propriedades. Quando watchPosition usado, seu dispositivo
passa a requerer mais energia; portanto, a vida
O mtodo primrio na API de Geolocalizao
til de sua bateria dever diminuir.
getCurrentPosition, um mtodo do objeto
navigator.geolocation. O terceiro parmetro, opes, para
getCurrentPosition e watchPosition, um objeto
getCurrentPosition possui um parmetro
com propriedades que voc ajusta para controlar
necessrio, o success handler, e dois opcionais, o
o comportamento da API da Geolocalizao.
error handler e as opes.
A propriedade maximumAge determina se
Um objeto position passado para o success
o getCurrentPosition usar uma posio
handler com informao a respeito de sua
armazenada e, se assim o for, quo velha pode
localizao, incluindo sua latitude e longitude.
ser aquela posio antes de uma nova ser
O objeto position contm uma propriedade coords, requisitada.
que um objeto coordinates.
A propriedade timeout determina quanto tempo
O objeto coordinates tem propriedades: latitude, o getCurrentPosition tem para obter uma nova
longitude e accuracy. posio antes do error handler ser chamado.
Alguns dispositivos podem dar suporte s A propriedade enableHighAccuracy d uma
outras propriedades coordinates: altitude, sugesto aos dispositivos, para que eles se
altitudeAccuracy, heading (direo) e speed esforcem mais para obter uma localizao o mais
(velocidade). apurada possvel.
Utilize a propriedade accuracy (preciso) para Voc pode usar a API de Geolocalizao com
determinar a preciso de sua localizao em a API do Google Maps para identificar sua
metros. localizao no mapa.

voc est aqui 207

PFCG_HeadFirstHTML5Prog.indb 207 05/06/2014 16:18:43


solues de exerccios

Palavras Cruzadas HTML5


Voc viajou bastante neste captulo com sua primeira API
JavaScript. Faa-a combinar com esta palavra cruzada.
1 2

5 6

9 10

11

HORIZONTAIS VERTICAIS
1. A preciso possui implicaes em seu 2. Dispositivos antigos sem GPS usam ______
aplicativo, pois pode afetar a vida da por torres de celular para determinar sua
______________. localizao.
5. Se disser no quando seu browser pedir-lhe 3. A longitude medida a partir de________,
para compartilhar sua localizao, seu error Inglaterra.
handler ser chamado com um _______ 4. Onde quer que v, l est voc foi
cdigo de 1. mencionado no filme ______.
7. Centralize novamente seu mapa usando o 6. A localizao secreta do QG _____
mtodo ___________. 47.62485, -122.52099.
11. A latitude e a longitude do(a) ______ 8. No d direes a algum se suas
40.77, -73.98. coordenadas no possurem um(a)
bom(boa) ____.
9. Voc nunca vai obter uma localizao
armazenada se ajustar o(a) ______ para 0.
10. Voc poder usar a equao ______ para
encontrar a distncia entre
duas coordenadas.
208 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 208 05/06/2014 16:18:43


tornando ativa sua localizao html

ms de Geladeira Exerccio - Soluo


seu trabalho terminar o cdigo abaixo, no qual indicado que um novo marcador
s deve ser mostrado se viajarmos mais que 20 metros desde o ltimo marcador
adicionado. Utilize os ms de geladeira para completar o cdigo. Cuidado, pois voc
ter de usar alguns mais de uma vez! Aqui est a soluo.

prevCoords = null;
var ________________________
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude:
" + longitude;
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
if (map == null) {
showMap(position.coords);
position.coords
prevCoords = _____________________;
}
else {
computeDistance
var meters = _____________________(position.coords, prevCoords) * 1000;
if (___________
meters > _______)
20 {
scrollMapToPosition(position.coords);

prevCoords
_________________ = _____________________;
on.coords
positi
}
}
}
Muito melhor!

Tente online: http://wickedlysmart.com/hfhtml5/


chapterb/final/myLoc.html
voc est aqui 209

PFCG_HeadFirstHTML5Prog.indb 209 05/06/2014 16:18:44


solues de exerccios

Abaixo voc encontrar uma implementao alternativa


para displayLocation. Voc pode adivinhar o que ela faz? D
uma olhada e escreva sua resposta abaixo. Se voc estiver
empolgado, experimente! Aqui est nossa soluo.

distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";


if (km < 0.1) {
distance.innerHTML = "You're on fire!";
} else {
if (prevKm < km) {
distance.innerHTML = "You're getting hotter!";
} else {
distance.innerHTML = "You're getting colder...";
}
}
prevKm = km;
Este cdigo transforma nosso aplicativo num jogo de quente/
frio. Ele mostra uma mensagem de est ficando quente se
estiver se aproximando ao QG da Wickedly Smart, ou est
ficando frio se estiver se afastando. Se estiver a menos de
Escreva o que voc 0.1km do QG, ento a mensagem ser: Est pegando fogo!
pensa que faz aqui.

Ns testamos, aqui est o resultado!

210 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 210 05/06/2014 16:18:44


tornando ativa sua localizao html

Abaixo, voc ver algumas opes para a API de Geolocalizao.


Para cada opo, h uma combinao com seu comportamento.

Quero apenas posies armazenadas


{maximumAge:600000} com menos de 10 minutos. Se no
houver nenhuma posio com esse
tempo, pedirei uma nova posio,
mas apenas se conseguir uma em 1
segundo ou menos.

Usarei uma posio armazenada


{timeout:1000, maximumAge:600000} se o browser encontrar uma que
tenha menos de 10 minutos, ou
ento vou querer uma posio
novinha em folha.

Quero apenas posies novas. O


{timeout:0, maximumAge:Infinity} browser pode demorar o quanto for
para arranj-las para mim.

Quero apenas posies


{timeout:Infinity, maximumAge:0} armazenadas. Vou pegar uma de
qualquer idade. Se no houver
quaisquer posies, ento chamarei
o error handler. Sem novas posies
para mim! Sou para uso offline.

voc est aqui 211

PFCG_HeadFirstHTML5Prog.indb 211 05/06/2014 16:18:45


solues de exerccios

Soluo das Palavras Cruzadas


HTML5

1 2
b a t e r i a
r
i
a
3
g n
4
r g b
5 6
e r r o r w u u
e i l c
7
p a n t o c a k
8
w k a p
9 10
i m e h r r
11
c i d a d e d e n o v a i o r q u e
h x l v o c
i y e b i
m s r a s
u m s n
m a i z o
a r n a
g t e i
e

212 Captulo 5

PFCG_HeadFirstHTML5Prog.indb 212 05/06/2014 16:18:45


6 falando com a web

Aplicativos Extrovertidos

Se eu ao menos soubesse
que me aproximar e tocar
um servio da web fosse
to divertido...

Voc esteve na sua pgina por muito tempo. Est na


hora de sair um pouquinho, conversar com outros servios web, recolher
informaes e trazer isso tudo de volta para poder construir timas
experincias, mesclando o que h de melhor nelas. Essa uma parte
muito importante, quando escrevemos aplicativos HTML5 modernos, mas,
para isso, preciso saber como conversar com os servios web. Neste
captulo, vamos fazer exatamente isso e incorporar alguns dados, a partir
de um servio web real, bem na sua pgina. Depois de ter aprendido
como fazer isso, voc ser capaz de se aproximar e tocar qualquer servio
web que quiser. Vamos inclusive apresent-lo nova e mais badalada
linguagem utilizada para se falar com os servios web. Ento, venha. Voc
usar mais algumas APIs: as APIs de comunicao.

este um novo captulo 213

PFCG_HeadFirstHTML5Prog.indb 213 05/06/2014 16:18:45


o aplicativo mighty gumball

Deem uma olhada na nova


Mighty Gumball quer um mquina de chiclete na rede
MG2200. Isso ir revolucionar
aplicativo web os negcios.

O caso esse: Mighty Gumball, Inc., uma


empresa inovadora que constri e distribui
mquinas de bala de chiclete de verdade, contatou-
-nos buscando ajuda. Se voc no os conhece,
eles recentemente ativaram na rede suas
Talvez voc se
mquinas de chiclete para rastrear vendas
lembre deles de nosso
quase em tempo real.
livro Use a Cabea!
Padres de Design,
Agora, d para perceber que a Mighty quando o ajudamos a
Gumball uma expert em balas de chiclete, desenhar o cdigo no
no desenvolvedora de software e, por lado servidor deles.
isso, pediu nossa ajuda para construir um
aplicativo que a ajudasse a monitorar suas

Diretor executivo
vendas de balas de chiclete.
Eis o que eles nos enviaram: da Mighty Gumball

a
por nos ajudar ! Seg ue a ma neira que achamos que a ferrament
Obrigado
das em tem po rea l da m quina de chiclete deveria funcionar e
de ven erem
era mo s que vocs possam imp lem ent-la para ns! Diga-nos se tiv
esp
Mighty Gumball, Inc.
quaisquer dvidas!
es para o servio web em breve.
Ah, enviaremos algumas especifica
Onde a Mquina de Chiclete
Nunca Est Meio Vazia

- Engenheiros da Mighty Gumball.

Nosso servidor
Dispositivos mveis e vendas Queremos que na web Todas as nossas mquinas
desktops captam astempo escrevam esta de chiclete reportando
de um servidor em parte, usando para o servidor central
real por meio de um HTML5, claro!
servio web.

214 Captulo 6

PFCG_HeadFirstHTML5Prog.indb 214 05/06/2014 16:18:46


falando com a Web

Antes de comearmos, pense um pouco sobre como voc poderia desenhar um aplicativo
que resgata dados de um servio web e mantm uma pgina atualizada baseada nos
mesmos. No se preocupe se voc ainda no sabe recuperar os dados, apenas pense em
algo de bom nvel. Faa um desenho, ponha etiquetas, escreva pseudocdigos para qualquer
cdigo que precisar. Pense nisso como um aquecimento, s para preparar seu crebro.

Notas dos Engenheiros


Mighty Gumball, Inc.
Onde a Mquina de Chiclete
Nunca Est Meio Vazia

Como resgatamos os
dados do servio web
para nossa pgina?

Uma vez que pegamos


os dados, como atualizamos
a pgina?

Que tipo de problemas


podemos ter ao resgatar to?
dados de um servidor remo

voc est aqui 215

PFCG_HeadFirstHTML5Prog.indb 215 05/06/2014 16:18:48


viso geral do mighty gumball

Um pouco mais de informao sobre a Mighty Gumball


Provavelmente, voc precisa de um pouco mais de informao, alm daquela pequena
nota da Mighty Gumball. Eis o que ns temos: primeiro, eles tm mquinas de chiclete
com pedidos de vendas por todo o pas direcionados ao servidor da Mighty Gumball, que
combina todos aqueles relatrios e torna-os disponveis por intermdio de um servio
web. Segundo, eles esto nos pedindo para construir um aplicativo web que mostre as
vendas num browser para a equipe de vendas da Gumball. provvel que eles queiram este
relatrio atualizado medida que as vendas mudem com o passar do tempo. Eis a vista a
10.000 ps acima:

Sou de Fresno e Aqui de


vendi apenas 3 Murphysboro,
chicletes. vendi s 2
chicletes.

Obrigado a todos. Estou


captando todas as vendas
e combinando todas elas.

1 As mquinas da Mighty
Gumball so distribudas
por todo o pas e mandam
informaes de vendas Servidor Gumball
para os servidores centrais
da Gumball. O servidor
agrega todas juntas e as
deixa disponveis por meio
de um servio web.
216 Captulo 6

PFCG_HeadFirstHTML5Prog.indb 216 05/06/2014 16:18:49


falando com a Web

2 O browser carrega o
aplicativo web Mighty
Gumball, incluindo a
marcao HTML, o
CSS e o JavaScript.

solicitao
3 O aplicativo faz uma solicitao
pela web para resgatar as vendas
agregadas do servidor Gumball.

5 O aplicativo d uma
olhada nos dados e ento
atualiza o DOM da pgina
para refletir quaisquer
novos dados de vendas.
document

html

head body

title script h1 ul

4 O aplicativo recebe
dados de volta do
servidor Gumball.

6 O browser atualiza
a pgina baseada no
DOM e seus usurios
7 O aplicativo volta veem os resultados.
ao passo 3 e
continuamente
pergunta por
novos dados. Como
resultado, a pgina
aparece para ser
atualizada quase
em tempo real.

voc est aqui 217

PFCG_HeadFirstHTML5Prog.indb 217 05/06/2014 16:18:50


preparando o markup

Apenas um rpido incio...


Enquanto estamos esperando por aquelas especificaes da Mighty Gumball, vamos
agilizar um pouco de HTML.
Voc provavelmente est entendendo que no precisamos de um monte de marcao
HTML para pr para funcionar um aplicativo web. Tudo que precisamos de um lugar
para colocar nossos relatrios de vendas medida que forem chegando e deixarmos
o JavaScript fazer o resto. V em frente, comece a digitar e vamos dar uma olhada em
como resgatar as coisas via web.

Apenas seu cabealho e


<!doctype html> corpo HTML5 padro.
<html lang="en">
<head> Fomos em frente e criamos um
<title>Mighty Gumball (JSON)</title> link a um arquivo JavaScript,
<meta charset="utf-8">
sabendo que vamos escrever um
pouco de JavaScript em breve!
<script src="mightygumball.js"></script>
<link rel="stylesheet" href="mightygumball. E criamos nosso CSS para
css">
estilizar o relatrio de vendas
</head> Mighty Gumball de forma que
<body> fique bonito para o CEO.
<h1>Mighty Gumball Sales</h1>
<div id="sales">

</div> Aqui fica um placeholder onde vamos


</body>
pr os dados de vendas. Cada item
de venda ser adicionado como uma
</html>
<div> aqui.

Desligue o motor...
V e digite o cdigo acima, carregue-o em seu browser favorito
e experimente-o antes de continuar. Lembre-se: voc pode
fazer o download do CSS (e de outros cdigos para este
captulo) em http://wickedlysmart.com/hfhtml5.

218 Captulo 6

PFCG_HeadFirstHTML5Prog.indb 218 05/06/2014 16:18:50


falando com a Web

Ento como fazemos requisies aos servios web?


Vamos voltar um pouquinho... Voc j sabe como um browser solicita
uma pgina de um servidor web ele faz uma solicitao HTTP para
o servidor, o qual retorna a pgina junto com outros metadados que
(normalmente) somente o browser v. O que talvez voc no saiba Os browsers podem solicitar
que o browser pode tambm resgatar dados com HTTP a partir de um dados dos aplicativos no
servidor, como o ap
servidor web da mesma maneira. Veja como funciona: licativo
Mighty Gumball
sd
ados agregados da todos os dados dequeveagrega
iso
do Gum
ba ndas.
Este um ll

servidor apenas c
re


P
solicitao

esperando por
solicitaes de
browsers. dados

Claro! Aqui est!

Servidor Web O servidor retorna seus dados.


Isso ajuda a olhar um pouco mais de perto para a solicitao que fazemos ao servidor e para
a resposta que volta. A solicitao se preocupa em dizer ao servidor quais dados estamos
procurando (aos quais s vezes nos referimos como recurso que estamos procurando),
enquanto a resposta contm metadados e, se tudo der certo, os dados que solicitamos:

A SOLICITAO: usa protocolo HTTP1.1 A RESPOSTA: o cabealho do protocolo


para conseguir o recurso em /gumballsales HTTP1.1 vem primeiro; ele apenas diz que
(nosso aplicativo no servidor). esta resposta faz uso do protocolo HTTP
e tambm fornece um cdigo de resposta.
200 o cdigo
solicitao do servidor que dados
significa que
llsales HT
TP/1.1
est tudo certo. HTTP/1.1 200 OK
GET /gumba m Content-length 756
lysmart.co
all.wicked Content-type: applicatio
Host: gumb zilla/5.0 n/json
gent : Mo
User-A
[{"name":"CAMPBELL",
"time": 1302212903099,

Os metadados: "sales": "3"},

temos contedo que {"name": "FRESNO",

tem 756 byt es de "time": 1302212903100,

... e a solicitao est "sales": 2},

Os metadados: vindo de um browser tamanho e do tipo .


n/json...
estamos fazendo compatvel com Mozilla applicatio
.

a solicitao ao 5.0 (Safari, Chrome


servidor gumball. e outros usam este ... e aqui esto os dados!
wickedly.com... mesmo user-agent).
Nota: este padro de resgatar dados usado XMLHttpRequest
comumente referido como Ajax ou XHR.
voc est aqui 219

PFCG_HeadFirstHTML5Prog.indb 219 05/06/2014 16:18:51


usando xmlhttprequest

Como fazer uma requisio a partir do JavaScript


Tudo bem, j sabemos que possvel resgatar dados com o HTTP, mas como?
Vamos escrever um pouco de cdigo para criar uma verdadeira solicitao
HTTP e ento pedir ao browser para fazer a solicitao por ns. Depois de feita
a solicitao, o browser ento nos devolver os dados recebidos. Vamos passo a
passo fazer a solicitao HTTP:

1 Para dar o pontap inicial, vamos comear com uma URL.


Afinal de contas, precisamos dizer ao browser onde buscar O .json significa um
os dados que estamos procurando: formato para troca de
dados, mas j voltaremos
Aqui est nossa URL em someserver.com. a ele em instantes.
var url = "http://someserver.com/data.json";

E vamos esconder a URL numa


varivel, url, que ser til em breve.
XMLHttpRequest
2 Depois, vamos criar um objeto request, como este:

var request = new XMLHttpRequest();

Estamos designando E usamos o construtor XMLHttpRequest para


o objeto request criar um novo objeto de solicitao. Falaremos Um objeto
para a varivel de a respeito da parte XML em breve. XMLHttpRequest
solicitao. novinho em folha.
3 Em seguida, precisaremos dizer ao objeto request qual
a URL que queremos resgatar, junto com o tipo de
solicitao que deveria usar (usaremos a solicitao padro
HTTP GET, como vimos na pgina anterior). Para fazer
isso, utilizaremos o mtodo open do objeto de solicitao.
Agora, open parece com um mtodo que no apenas O objeto XMLHttpRequest
define esses valores no objeto request, mas tambm abre atualizado que sabe onde
a conexo e resgata os dados. No bem assim. Apesar est indo
do nome, open apenas cria a solicitao com uma URL e
diz ao objeto request o tipo de solicitao a ser usada, de
forma que o XMLHttpRequest possa verificar a conexo.
Segue como devemos chamar o mtodo open: XMLHttpRequest
request.open("GET", url);
method: GET
Isto cria uma solicitao ra URL: http://...
usando uma solicitao HTpaTP ns, E tambm cria a solicitao
GET, que o meio padro para usar a URL armazenada
resgatar dados HTTP. de se em nossa varivel url.
220 Captulo 6

PFCG_HeadFirstHTML5Prog.indb 220 05/06/2014 16:18:51


falando com a Web

4 Ok, agora a parte importante e o truque de como o


XMLHttpRequest funciona: quando finalmente pedirmos ao
objeto XMLHttpRequest para resgatar dados, ele vai por conta
prpria atrs dos dados. Deve levar uns 90 milissegundos (um XMLHttpRequest
tempo e tanto, em termos de computador), ou, num dia lento, method: GET
pode levar at dez segundos (uma eternidade nos mesmos URL: http://...
termos). Portanto, em vez de ficar esperando pelos dados, onload:
vamos fornecer um handler que seja chamado quando os
dados chegarem. Veja como criar o handler (isto dever parecer
bem familiar):
Nosso objeto request request.onload = function() {
if (request.status == 200) {
Quando o browser alert("Data received!");

request.onload = function() { recebe uma resposta }

if (request.status == 200) {
do servio web remoto, };

ele chama essa funo.


alert("Data received!");
} O handler precisa antes verificar se o cdigo de retorno 200 ou OK,
}; e ento poder fazer algo com os dados. Por ora, apenas vamos alertar o
usurio de que os dados esto aqui. Vamos preencher tudo isso com mais
cdigos importantes em breve.
5 Apenas mais um ltimo passo: ainda precisamos dizer solicitao para ir
buscar os dados e, para isso, usaremos o mtodo send:
Isso envia a solicitao ao servidor. Mandamos
request.send(null); null se no estivermos enviando nenhum dado ao
servio remoto (o que no estamos).
Ento, para revisar: criamos um objeto XMLHttpRequest,
carregamo-lo com uma URL e um tipo de solicitao HTTP,
junto com um handler. Depois, enviamos a solicitao e
esperamos que os dados cheguem. Quando isso acontece, o
handler chamado. Fico feliz em saber que
as coisas foram bem
com o cdigo de sucesso
Servidor, tenho 200. Melhor chamar
uma solicitao meu handler agora e
para voc... dar-lhe este dado...

XMLHttpRequest XMLHttpRequest
method: GET method: GET
URL: http://... solicitao dados URL: http://...
onload: ... onload: ... dados

request.onload = function() {
timo! Aqui if (request.status == 200) {
alert("Data received!");
est seu dado }
};

Servio Web
voc est aqui 221

PFCG_HeadFirstHTML5Prog.indb 221 05/06/2014 16:18:52


como acessar um http response

Uma coisa que no percebi como


conseguimos os dados da chamada
HTTP. Vejo a funo onload, mas
nenhum cdigo para acessar os dados.
Perdi alguma coisa?

Ainda no chegamos l direito. Os dados do


resgate HTTP GET podem ser encontrados na
propriedade responseText do objeto request.
Ento podemos escrever o cdigo assim:
Esta funo
chamada quando
a solicitao
request.onload = function() { recebeu uma
if (request.status == 200) { resposta.
alert(request.responseText);
} Podemos conseguir a
}; resposta da propriedade
responseText do objeto
request.
Espere um pouco, j estamos chegando ao
ponto de escrever alguns cdigos de verdade
que usam request.responseText.

222 Captulo 6

PFCG_HeadFirstHTML5Prog.indb 222 05/06/2014 16:18:52


falando com a Web

ms de Geladeira
Um novo servio web em http://wickedlysmart.com/ifeelluckytoday retorna tanto
unlucky (sem sorte) quanto lucky (com sorte) toda vez que voc o ativa. A lgica
baseada num antigo e secreto algoritmo que no podemos revelar, mas um grande
servio para que os usurios saibam se esto ou no com sorte num determinado dia.
Precisamos de sua ajuda para criar uma implementao de referncia para mostrar aos
outros como podero incluir isso em seus sites. Voc encontrar o esqueleto do cdigo
abaixo; ajude-nos a preencher os detalhes usando os ms. Seja cuidadoso, talvez voc
no precise de todos os ms. J fizemos um para voc.

window.onload = function () {
var url = "http://wickedlysmart.com/ifeelluckytoday";
var request = ______________________
____________________________ {
if (_____________________) {
displayLuck(____________________);
}
};
______________________________

Sente-se sortudo ________________________ Seus ms vo aqui!


hoje? Quer ter }
certeza? Use o function displayLuck(luck) {
servio!
var p = document.____________________("luck");
innerHTML
p.________________ = "Today you are " + luck;
}

est( ); request.create("GET",
new TextHttpRequ url);
var i = 0; request.responseText

request.send(null); request.open("GET", url);

request.onload = function()
new XMLHttpRequest();
myLuckyText
getElementById
request.status == 200

voc est aqui 223

PFCG_HeadFirstHTML5Prog.indb 223 05/06/2014 16:18:53


soluo de exerccio

ms de Geladeira - Soluo
Um novo servio web em http://wickedlysmart.com/ifeelluckytoday retorna tanto
unlucky (sem sorte) quanto lucky (com sorte) toda vez que voc o ativa. A lgica
baseada num antigo e secreto algoritmo que no podemos revelar, mas um grande
servio para que os usurios saibam se esto ou no com sorte num determinado dia.
Precisamos de sua ajuda para criar uma implementao de referncia para mostrar aos
outros como podero incluir isso em seus sites. Voc encontrar o esqueleto do cdigo
abaixo; ajude-nos a preencher os detalhes usando os ms. Seja cuidadoso, talvez voc
no precise de todos os ms. Segue nossa soluo.

window.onload = function () {

var url = "http://wickedlysmart.com/ifeelluckytoday";

var request = ______________________


new XMLHttpRequest();
request.onload = function() {
____________________________

if (________________________)
request.status == 200 {

displayLuck(_______________________);
request.responseText
}

};
Sente-se sortudo Seus ms vo aqui!
hoje? Quer ter ___________________________
request.open("GET", url);
certeza? Use o
_____________________
servio! request.send(null);
}

function displayLuck(luck) {

var p = document.__________________("luck");
getElementById
p.____________
innerHTML = "Today you are " + luck;
}

ms restantes

var i = 0;
request.create("GET", url);

est( );
myLuckyText new TextHttpRequ

224 Captulo 6

PFCG_HeadFirstHTML5Prog.indb 224 05/06/2014 16:18:54


falando com a Web

Entrevista da semana:
Confisses de um Objeto HTTP Request

Use a Cabea!: Bem-vindo, XMLHttpRequest. Ficamos felizes que voc tenha podido nos encaixar
em sua agenda ocupada. Diga-nos onde voc se encaixa na construo de aplicativos web.
XMLHttpRequest: Comecei essa empreitada ao trazer dados externos para dentro de sua pgina. J
ouviu falar de Google Maps? GMail? Tudo eu. De fato, nada disso seria possvel sem mim.
Use a Cabea!: Como assim?
XMLHttpRequest: Antes de eu aparecer, as pessoas construam uma pgina no lado servidor e iam
jogando tudo l dentro dela medida que criavam. Eu permito que voc v e consiga dados depois de
a pgina estar construda. Pense no Google Maps: ele atualiza o que est na pgina toda vez que voc
ajusta sua localizao no mapa, sem ter que recarregar a pgina toda.
Use a Cabea!: Ento, voc um cara bem-sucedido. Qual o seu segredo?
XMLHttpRequest: Sou humilde, ah, e simples. D-me uma URL e vou atrs dos dados para voc.
Nada mais do que isso.
Use a Cabea!: s isso?
XMLHttpRequest: Bem, voc tem que me dizer o que fazer com o dado depois de eu t-lo resgatado
para voc. Voc pode me dar apenas uma funo handler um tipo de callback e quando
conseguir o dado, jogo ele em seu handler para que ele faa o que quiser com o dado.
Use a Cabea!: Quais tipos de dados estamos falando aqui?
XMLHttpRequest: A web cheia de dados hoje em dia; clima, mapas, dados sociais sobre pessoas
e amigos, dados de geolocalizao sobre o que est por perto... Srio, quase qualquer dado que voc
possa imaginar est trilhando seu caminho na web num formulrio que funciona comigo.
Use a Cabea!: E tudo isso se trata de XML, certo? Digo, seu nome XML.
XMLHttpRequest: Srio? Voc um profissional e por a que voc quer levar esta entrevista? Voc
fez seu trabalho de casa e tudo o que voc tem a dizer tudo se resume em XML, certo? Permita-me
deixar algumas coisas claras por aqui. Claro, havia um tempo em que eu, principalmente, recuperava
XML, mas o mundo est evoluindo. Hoje em dia, resgato todos os tipos de dados. Claro, algum XML
de vez em quando, mas cada vez mais recebo solicitaes para JSON.
Use a Cabea!: Srio? O que JSON e por que isto est se tornando to popular?
XMLHttpRequest: JSON JavaScript Object Notation e possui muitas vantagens tamanho, leitura, o
fato de que nativo para a linguagem de programao mais popular na web: meu amigo JavaScript, claro.
Use a Cabea!: Mas no a que o formato no deveria ser to importante assim para voc? Os
usurios deveriam poder solicitar XML ou JSON ou teletipo, pois voc pode isso tudo. No?
XMLHttpRequest: <silncio>
Use a Cabea!: Bem, parece que peguei num ponto crtico. Tudo bem, temos que ir para o intervalo...
Ento, XMLHttpRequest, acho que teremos um pouco mais de tempo com voc, mais tarde, neste captulo?
XMLHttpRequest: Sim, infelizmente, isto est em minha agenda...
voc est aqui 225

PFCG_HeadFirstHTML5Prog.indb 225 05/06/2014 16:18:54


introduzindo json

Deixando um pouco o XML, conhecendo JSON


Talvez voc se lembre (talvez no) que o XML salvaria a ns todos um formato
de dados que era legvel para humanos e analisvel por mquinas, um formato
de dados que daria suporte a todos os dados necessrios do mundo. Quando o
XMLHttpRequest foi desenvolvido, o XML era, de fato, a maneira com a qual todos
trocvamos dados (portanto, o nome XMLHttpRequest).
Bem, com o passar do tempo, XML, pelo visto, escorregou numa casca de banana
jogada pelo JSON. Quem JSON? Apenas o melhor e mais atual formato de dados,
nascido do JavaScript, sendo adotado por toda a web no browser e no lado servidor.
Tornou-se rapidamente o formato preferido para os aplicativos HTML5.
O que h de to bom no JSON? Bem, legvel pra caramba para humanos, e pode
ser analisado rpida e facilmente diretamente nos valores e objetos JavaScript.
Contrariamente ao XML, ele to bonitinho... Pois , d para ver que gostamos dele
s um pouquinho, n? Voc ver um monte de JSON neste livro. Vamos us-lo para
trocar dados JavaScript pela rede, para armazenar dados num armazenamento local
com a API Web Storage e como parte de outra maneira de acessar dados da web (em
breve falaremos mais sobre isso).
Espere, porm, um segundo, um segundo. Formatos de troca de dados na rede...
formatos de armazenamento... coisas complicadas, n? No se preocupe, nas prximas
dez pginas vamos torn-lo um expert voc j sabe praticamente tudo o que precisa
saber sobre JSON. Para usar JSON, voc s precisa entender de objetos JavaScript (o que
voc sabe, e muito) e duas simples chamadas de mtodo. Veja como tudo isso funciona:

1 Temos um objeto JavaScript que 2 O resultado uma string


queremos trocar ou armazenar, que representa o objeto.
ento chamamos o mtodo JSON. Podemos armazenar esta
stringify, passando o objeto como string, pass-la para uma
o argumento. funo, mand-la para a
)
gify(movie rede etc.
JSON.strin

{"title":"Plan 9 from Outer


Space","genre":"Cult Classic"
Movie ,"rating":5,"showtimes":["3:0
0pm","7:00pm","11:00pm"]}

String
Objeto JSON

g)
(jsonStrin
JSON.parse
4 O resultado uma cpia 3 Quando estivermos prontos
de nosso objeto original. para transformarmos
novamente a string num
objeto, passamo-la ao
mtodo JSON.parse.

226 Captulo 6

PFCG_HeadFirstHTML5Prog.indb 226 05/06/2014 16:18:54


falando com a Web

Um rpido exemplo usando JSON


1 Vamos percorrer um exemplo rpido de converso de um Existem, na verdade,
objeto em seu formato de string JSON. Comearemos por um algumas outras
objeto que voc j entende, o objeto Movie (Filme), do Captulo restries, mas no
4. Nem tudo pode ser convertido numa string JSON por nos preocuparemos
exemplo, mtodos mas todos os tipos bsicos, como nmeros, com elas agora.
strings e arrays possuem suporte. Vamos criar um objeto e, ento,
coloc-lo numa string:
var plan9Movie = new Movie("Plan 9 from Outer Space","Cult Classic", 2,
["3:00pm", "7:00pm", "11:00pm"]);
Veja um belo objeto movie completo
com strings, nmeros e um array.
2 Uma vez que j tenha um objeto, voc pode
convert-lo num formato de string JSON com o
mtodo JSON.stringify. Vejamos como isso
funciona... (fique vontade para experimentar,
abrindo seu cdigo movie do Captulo 4 l atrs e
adicionando o seguinte cdigo no fim de seu script):
var jsonString = JSON.stringify(plan9Movie); Este o resultado: uma
alert(jsonString); verso string do objeto
mostrado no alerta.
3 Agora, temos uma string JSON que representa nosso
objeto movie. Neste momento, poderamos pegar essa
string e fazer qualquer coisa com ela, como enviar
por HTTP para um servidor. Tambm poderamos
receber uma string JSON de outro servidor. Digamos
que um servidor nos deu esta string; como faramos
para torn-la novamente um objeto com o qual
poderamos fazer algo? s usar o mtodo irmo
JSON.stringify: JSON.parse. Assim:
var jsonMovieObject = JSON.parse(jsonString); Ah, e agora usamos isso
alert("JSON Movie is " + jsonMovieObject.title); como um objeto real que
acessa suas propriedades.

Ei! As
especificaes
j chegaram!
Experimente esta URL. O que voc v? Vire a folha!

http://search.twitter.com/search.json?q=hfhtml5

Nota: o Firefox pedir para abrir ou salvar


um arquivo. Voc pode abrir com TextEdit,
Notepad ou qualquer editor de texto bsico.

voc est aqui 227

PFCG_HeadFirstHTML5Prog.indb 227 05/06/2014 16:18:55


revisando as especificaes mightygumball
es
As especificdae chegar!
acabaram

Especificaes do Servidor Gumball


Mighty Gumball, Inc. Obrigado por assumirem esta tarefa!!!
servidas
Temos todas as vendas das mquinas agregadas e sendo
Onde a Mquina de Chiclete
Nunca Est Meio Vazia

pelo servidor central em:


mart.com/
http://gumball.wickedlys
vocs acessarem a URL acima,
Escolhemos JSON para ser nosso formato de dados. Se com isso:
recebero um array dos objetos JSON, que se parecem dade; estamos apen
as
[{"name":"CaMPBELL",
O nome da ci nia agora.
testando Califr
"time": 1302212903099,
"sales": 3}, O tempo em milissegundos quando
este relatrio chegou.
{"name": "FRESNO",
"time": 1302212903100,
Nmero de chicletes vendidos desde
o ltimo relatrio.
"sales": 2},
Uma segunda cidade, Fresno.
. . .
] E mais cidades ficaro aqui...
ver os valores retornando.
Vo em frente e digitem esta URL em seu browser para y. Apenas especifiquem
Vocs devero ver um ou mais destes objetos num arra um tempo em milissegundos.
ttime no fim da URL;
Vocs tambm podem adicionar um parmetro lastrepor o. Usem-no assim:
Certifique-se de fazer isso!

desta forma tero apenas os relatrios desde aquele temp


=1302212903099
mart.com/?lastreporttime
http://gumball.wickedlys

a mesmo, de fato voc dever


Temos centenas de mquinas de chiclete reportando agora. Dito isso, este o nosso
ver relatrios a cada cerca de 5 a 8 segundos, em mdi e, antes de tudo!
servidor de produo, portanto teste seu cdigo localment
a mquina de chicletes nunca
Obrigado nova