Guia de Treinamento em HTML5 e CSS3 - Exemplos Práticos - TRADUZIDO

Índice
Cobrir
Pá gina de direitos autorais
Conteú do resumido
Índice
Introduçã o
Compatibilidade com versõ es anteriores e compatibilidade entre navegadores
requisitos de sistema
Requisitos de hardware
Requisitos de software
Pratique exercícios
Agradecimentos
Errata e suporte ao livro
Nó s queremos ouvir de você
Manter contato
Capítulo 1: Introduçã o ao Visua l Studio 2012 e Blend for Visual Studio 2012
Antes de você começar
Liçã o 1: Visual Studio 2012
Ediçõ es do Visual Studio 2012
Suporte do Visual Studio 2012 para HTML5
Suporte CSS3
Suporte a JavaScript
Explorando o Visual Studio Express 2012 para Windows 8
Explorando o Visual Studio Express 2012 para a Web

Resumo da liçã o
Revisã o da aula
Liçã o 2: Mistura para Visual Studio 2012
Explorando a mistura
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Hello World com Visual Studio Express 2012 para Windows 8
Exercício 2: Hello World com Visual Studio Express 2012 para Web
Exercício 3: Hello World com Blend
Exercícios de prá tica sugeridos
Respostas
Liçã o 1
Liçã o 2
Capítulo 2: Primeiros passos com HTML5
Liçã o 1: Apresentando HTML5
Compreender HTML, XHTML e HTML5
Introduzindo a marcaçã o semâ ntica
Trabalhando com elementos
Criaçã o de um documento HTML
Resumo da liçã o
Revisã o da aula
Liçã o 2: Incorporaçã o de conteú do
Incorporando HTML usando frames inline

Trabalho com hiperlinks
Adicionar imagens ao seu documento HTML
Incorporando conteú do de plug-in
Les resumo filho
Revisã o da aula
Pratica exercícios
Exercício 1: Crie um site simples usando o Visual Studio Express for Web
Exercício 2: crie pá ginas adicionais
Exercício 3: Incorporaçã o de Conteú do
Respostas
Liçã o 1
Liçã o 2
Capítulo 3: Introduçã o ao JavaScript
Liçã o 1: Apresentando JavaScript
Compreendendo o JavaScript
Compreender a funçã o dos dados
Usando declaraçõ es
Trabalhando com funçõ es
Variá veis de escopo
Funçõ es de aninhamento e escopo de variá vel local aninhada
Convertendo para um tipo diferente
Programaçã o condicional
Implementando loops de có digo

Manipulaçã o de erros
Resumo da liçã o
Revisã o da aula
Liçã o 2: escrever, testar e depurar JavaScript
Hello World de JavaScript
Usando a tag de script
Lidar com navegadores que nã o suportam JavaScript
JavaScript embutido vs. arquivos JavaScript externos
Colocando seus elementos de script
Usando o depurador de JavaScript do Visual Studio .NET
Resumo da liçã o
Revisã o da aula
Liçã o 3: Trabalhando com objetos
Trabalho com matrizes
Acessando objetos DOM
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Criar uma pá gina da web da calculadora
Exercício 2: Adicionar a estrutura de teste QUnit
Respostas
Liçã o 1
Liçã o 2
Liçã o 3
Capítulo 4: Primeiros passos com CSS3
Liçã o 1: Apresentando CSS3
Definindo e aplicando um estilo
Adicionar comentá rios a uma folha de estilo
Criaçã o de um estilo inline
Criaçã o de um estilo incorporado
Criaçã o de uma folha de estilo externa
Resumo da liçã o
Revisã o da aula
Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e cascateamento
Definindo seletores
Compreender os estilos integrados do navegador
Estendendo estilos de navegador com estilos de usuá rio
Trabalhando com estilos importantes
Como os estilos se propagam?
Usando especificidade
Entendendo a herança
Resumo da liçã o
Revisã o da aula
Liçã o 3: Trabalhando com propriedades CSS
Trabalho com cores CSS
Trabalhando com texto
Trabalhando com o modelo de caixa CSS
Definir as propriedades de borda, preenchimento e margem

Posicionando elementos <div>
Usando a propriedade float
Usando a propriedade clear
Usando a propriedade box-sizing
Centralizar o conteú do na janela do navegador
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Adicionar uma folha de estilo ao projeto da calculadora
Exercício 2: limpar a calculadora da web
Respostas
Liçã o 1
Liçã o 2
Liçã o 3
Capítulo 5: Mais HTML5
Liçã o 1: Pensando na semâ ntica do HTML5
Por que marcaçã o semâ ntica?
Suporte do navegador para HTML5
Criaçã o de documentos HTML5 semâ nticos
Criaçã o de um contêiner de layout HTML5
Controlar o formato ling usando o elemento <div>
Adicionar pausas temá ticas
Anotando conteú do
Trabalhando com listas
Resumo da liçã o
Revisã o da aula
Liçã o 2: Trabalhando com tabelas
Uso indevido de mesa
Criaçã o de uma tabela bá sica
Adicionando células de cabeçalho
Estilo dos cabeçalhos da tabela
Declarando o cabeçalho, rodapé e corpo da tabela
Criaçã o de tabelas irregulares
Adicionar uma legenda a uma tabela
Colunas de estilo
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Adicionar um layout de pá gina ao projeto da calculadora
Exercício 2: adicionar estilos ao layout da calculadora
Exercício 3: Limpando a calculadora da web
Respostas
Liçã o 1
Liçã o 2
Capítulo 6: JavaScript e jQuery essenciais
Liçã o 1: Criando objetos JavaScript

Usando terminologia orientada para o objeto
Compreendendo a advertência orientada a objetos do JavaScript
Usando o padrã o literal de objeto JavaScript
Criaçã o de objetos dinâ micos usando o padrã o de fá brica
Criaçã o de uma classe
Usando a propriedade prototype
Debatendo o protó tipo / compromisso privado
Implementando namespaces
Implementando herança
Resumo da liçã o
Revisã o da aula
Liçã o 2: Trabalhando com jQuery
Apresentando jQuery
Introduçã o ao jQuery
Usando jQuery
Habilitando JavaScript e jQuery IntelliSense
Criando um wrapper jQuery para uma referência de elemento DOM
Adicionar ouvintes de eventos
Manipuladores de eventos de disparo
Inicializando o có digo quando o navegador estiver pronto
Resumo da liçã o
Revisã o da aula
Pratique exercícios
Exercício 1: Criar um objeto calculadora

Respostas
Liçã o 1
Liçã o 2
Capítulo 7: Trabalhando com formulá rios
Liçã o 1: Noçõ es bá sicas sobre formulá rios
Compreendendo as comunicaçõ es na web
Envio de dados do formulá rio para o servidor da web
Envio de dados ao enviar um formulá rio
Usando o elemento <label>
Especificando os formulá rios pai
Acionando o envio do formulá rio
Serializando o formulá rio
Usando o atributo autofocus
Usando restriçõ es de envio de dados
Usando POST ou GET
Resumo da liçã o
Revisã o da aula
Liçã o 2: validaçã o do formulá rio
Validaçã o necessá ria
Validando entrada de URL
Validando nú meros e intervalos
Estilizando as validaçõ es
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Crie um formulá rio de contato
Exercício 2: adicionar validaçã o ao formulá rio de contato
Respostas
Liçã o 1
Liçã o 2
Capítulo 8: Sites e serviços
Liçã o 1: primeiros passos com Node.js
Instalando Node.js
Criaçã o de Hello World a partir de Node.js
Criaçã o de um mó dulo Node.js
Criaçã o de um pacote Node.js
Avanço rá pido para expressar
Começando com expresso
Les resumo filho
Revisã o da aula
Liçã o 2: Trabalhando com serviços da web
Apresentando serviços da web
Criaçã o de um serviço da Web RESTful usando Node.js
Usando AJAX para chamar um serviço da web
Compartilhamento de recursos de origem cruzada
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Crie um site para receber dados
Exercício 2: Crie um serviço web para receber dados
Respostas
Liçã o 1
Liçã o 2
Capítulo 9: Operaçõ es assíncronas
Liçã o 1: operaçõ es assíncronas usando jQuery e Wi nJS
Usando um objeto de promessa
Criaçã o de objetos de promessa jQuery usando $ .Deferred ()
Falha de manuseio
Lidando com a limpeza de conclusã o
Inscrever-se em um objeto de promessa concluído
Encadeando promessas usando o método do tubo
Execuçã o paralela usando $ .when (). Then ()
Atualizando progresso
Chamadas assíncronas condicionais
Resumo da liçã o
Revisã o da aula
Liçã o 2: trabalhar com web workers
Detalhes do trabalhador da web
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Implementar execuçã o de có digo assíncrono
Respostas
Liçã o 1
Liçã o 2
Capítulo 10: Comunicaçõ es WebSocket
Liçã o 1: Comunicaçã o usando WebSocket
Compreendendo o protocolo WebSocket
Definindo a API WebSocket
Implementando o objeto WebSocket
Lidando com tempos limite
Lidando com desconexõ es de conexã o
Lidando com web farms
Usando bibliotecas WebSocket
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Criar um servidor de bate-papo
Exercício 2: Crie o cliente de chat
Exerci prá tica sugerida ses
Respostas
Liçã o 1
Capítulo 11: HTML5 suporta multimídia

Liçã o 1: reproduzindo vídeo
Formatos de vídeo
Implementando o elemento <video>
Definir a fonte
Configurando o elemento <video>
Acessando faixas
Resumo da liçã o
Revisã o da aula
Liçã o 2: reproduzindo á udio
Formatos de á udio
O elemento <audio>
Definir a fonte
Configurando o elemento <audio>
Resumo da liçã o
Revisã o da aula
Liçã o 3: usando o objeto HTMLMediaElement
Compreendendo os métodos HTMLMediaElement
Usando propriedades HTMLMediaElement
Inscrever-se em eventos HTMLMediaElement
Usando controle de mídia
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Crie uma pá gina da web que exiba vídeo

Respostas
Liçã o 1
Liçã o 2
Liçã o 3
Capítulo 12: Desenho com HTML5
Liçã o 1: Desenho usando o elemento <canvas>
A referência do elemento <canvas>
Referência do objeto de contexto CanvasRenderingContext2D
Implementando o can vas
Desenhar retâ ngulos
Configurando o estado do desenho
Salvar e restaurar o estado de desenho
Desenhar usando caminhos
Desenho de texto
Desenho com imagens
Resumo da liçã o
Revisã o da aula
Liçã o 2: Usando grá ficos vetoriais escalá veis
Usando o elemento <svg>
Exibindo arquivos SVG usando o elemento <img>
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Crie uma pá gina da web usando uma tela
Respostas
Liçã o 1
Liçã o 2
Capítulo 13: Arrastar e soltar
Liçã o 1: arrastando e soltando
Arrastando
Compreendendo os eventos de arrasto
Droppi ng
Usando o objeto DataTransfer
Resumo da liçã o
Revisã o da aula
Liçã o 2: arrastando e soltando arquivos
Usando os objetos FileList e File
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: crie um nú mero embaralhado para mim
Exercício 2: adicionar arrastar e soltar ao jogo
Exercício 3: Adicionar embaralhamento e verificaçã o do vencedor
Respostas
Liçã o 1
Liçã o 2
Capítulo 14: Tornando seu HTML ciente de localizaçã o
Liçã o 1: posicionamento bá sico
Referência de objeto de geolocalizaçã o
Recuperando a posiçã o atual
Abordando privacidade
Especificando opçõ es
Resumo da liçã o
Revisã o da aula
Liçã o 2: Posicionamento monitorado
Onde você está agora? Que tal agora?
Calculando a distâ ncia entre as amostras
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Mapeie suas posiçõ es atuais
Respostas
Liçã o 1
Liçã o 2
Capítulo 15: Dados locais com armazenamento na web
Liçã o 1: Apresentando o armazenamento na web

Entendendo os cookies
Usando o plug-in de cookie jQuery
Trabalhando com limitaçõ es de cookies
Alt ernatives aos cookies antes de HTML5
Compreender o armazenamento HTML5
Explorando localStorage
Usando a persistência de curto prazo com sessionStorage
Antecipando potenciais armadilhas de desempenho
Resumo da liçã o
Revisã o da aula
Liçã o 2: Manipulaçã o de eventos de armazenamento
Enviando notificaçõ es apenas para outras janelas
Usando a referência do objeto StorageEvent
Inscrever-se em eventos
Usando eventos com sessionStorage
Resumo da liçã o
Revisã o da aula
Pratica exercícios
Exercício 1: Crie um catá logo de contatos usando localStorage
Respostas
Liçã o 1
Liçã o 2
Capítulo 16: Aplicativos da web off-line

Liçã o 1: Trabalhando com Web SQL
Considerando a longevidade questioná vel do Web SQL
Criaçã o e abertura do banco de dados
Executando atualizaçõ es de esquema
Usando transaçõ es
Liçã o summa ry
Revisã o da aula
Liçã o 2: Trabalhando com IndexedDB
Usando có digo específico do navegador
Usando lojas de objetos
Inserindo um novo registro
Atualizar um registro existente
Excluindo um registro
Recuperando um registro
Compreendendo os cursores
Descartando um banco de dados
Resumo da liçã o
Revisã o da aula
Lesso n 3: Trabalhando com a API FileSystem
Avaliando o suporte do navegador
Abrindo o sistema de arquivos
Criar e abrir um arquivo
Gravando em um arquivo
Lendo um arquivo
Excluindo um arquivo
Criaçã o e abertura de um diretó rio
Gravando um arquivo em um diretó rio
Excluindo um diretó rio
Resumo da liçã o
Revisã o da aula
Liçã o 4: Trabalhando com o cache HTTP do aplicativo offline
Suporte de navegador
O arquivo de manifesto em cache
Atualizando o cache
Entendendo eventos
Resumo da liçã o
Revisã o da aula
Pratica exercícios
E xercício 1: Modifique um livro de contato para usar IndexedDB
Respostas
Liçã o 1
Liçã o 2
Liçã o 3
Liçã o 4
Índice
Sobre o autor
Mapeamento de objetivos
Pá gina de pesquisa
Programaçã o
em HTML5 com
JavaScript e
CSS3
Glenn Johnson
PUBLICADO POR
Microsoft Press
Uma divisã o da Microsoft Corporation
One Microsoft Way
Redmond, Washington 98052-6399
Copyright © 2013 por Glenn Johnson
Todos os direitos reservados. Nenhuma parte do conteú do deste livro pode ser

reproduzida ou transmitida de qualquer forma ou por qualquer meio sem a permissã o por
escrito do editor.
Nú mero de controle da Biblioteca do Congresso: 2013933428
ISBN: 978-0-7356-7438-7
Impresso e encadernado nos Estados Unidos da América.
Segunda Impressã o
Os livros da Microsoft Press estã o disponíveis por meio de livrarias e distribuidores em

todo o mundo. Se precisar de suporte relacionado a este livro, envie um e-mail para o
Suporte do Microsoft Press Book em mspinput@microsoft.com. Diga-nos o que você acha
deste livro em http://www.microsoft.com/learning/booksurvey.
Microsoft e as marcas registradas listadas em

http://www.microsoft.com/about/legal/en/us/Intel ectualProperty
/Trademarks/EN-US.aspx sã o marcas comerciais do grupo de empresas Microsoft. Todas

as outras marcas sã o propriedade de seus respectivos proprietá rios.
Os exemplos de empresas, organizaçõ es , produtos, nomes de domínio, endereços de e-
mail, logotipos, pessoas, lugares e eventos aqui descritos sã o fictícios. Nenhuma associaçã o
com qualquer empresa, organizaçã o, produto, nome de domínio, endereço de e-mail,
logotipo, pessoa, lugar ou evento real é intencional ou deve ser feita .
Este livro expressa os pontos de vista e opiniõ es do autor. As informaçõ es contidas neste
livro sã o fornecidas sem qualquer garantia expressa, estatutá ria ou implícita. Nem os
autores, a Microsoft Corporation, nem seus revendedores ou distribuidores
serã o responsá veis por quaisquer danos causados ou alegadamente causados direta ou
indiretamente por este livro.
Editor de aquisições: Devon Musgrave
Editor de Desenvolvimento: Devon Musgrave
Editor do Projeto: Carol Dillingham
Produção Editorial: nSight, Inc.
Revisor técnico : Pierce Bizzaca; Serviços de revisã o técnica fornecidos pela Content

Master, um membro do CM Group, Ltd.
Editor de Texto: Kerin Forsyth
Indexador: Lucie Haskins
Capa: Twist Creative • Seattle
[09/08/2013]
Conteúdo resumido
Introdução xxi
CAPÍTULO 1
Introdução ao Visual Studio 2012 e Blend
para Visual Studio 2012
CAPÍTULO 2
Primeiros passos com HTML5

29
CAPÍTULO 3
Introdução ao JavaScript
65
CAPÍTULO 4
Primeiros passos com CSS3
137
CAPÍTULO 5
Mais HTML5
205
CAPÍTULO 6
JavaScript e jQuery essenciais
261
CAPÍTULO 7
Trabalhando com formulários
311
CAPÍTULO 8
Sites e serviços
341
CAPÍTULO 9
Operações assíncronas
393
CAPÍTULO 10
Comunicações WebSocket
415
CAPÍTULO 11
HTML5 suporta multimídia
437
CAPÍTULO 12
Desenho com HTML5
459
CAPÍTULO 13
Arrastar e soltar
507
CAPÍTULO 14
Tornar o seu HTML ciente de localização
539
CAPÍTULO 15
Dados locais com armazenamento na web
555
CAPÍTULO 16
Aplicativos da web offline
581
Índice 621
Conteúdo
Introdução
xix
Compatibilidade com versões anteriores e compatibilidade entre navegadores
xx
xx
Pratica exercícios
xxi
Agradecimentos xxi
xxi
Nós queremos ouvir de você
xxi
Manter contato
xxi
Capítulo 1 Introdução ao Visual Studio 2012 e Blend
para Visual Studio 2012
Liçã o 1: Visual Studio 2012. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Ediçõ es do Visual Studio 2012
Suporte CSS3

12
Resumo da liçã o
14
Revisã o da aula
15
Liçã o 2: Mistura para Visual Studio 2012. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
16
Resumo da liçã o
22
Revisã o da aula
23
Pratica exercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
O que você acha deste livro? Nós queremos ouvir de você!
A Microsoft está interessada em ouvir seus comentários para que possamos

melhorar continuamente nossos livros e recursos de aprendizado para você. Para
participar de uma breve pesquisa online, visite: www.microsoft.com/lea rning /
booksurvey /
Exercício 1: Hel o World com Visual Studio Express 2012
para Windows 8
24
para web
25
Exercício 3: Hel o World com Blend

27
Exercícios de prá tica sugeridos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Capítulo 2: Primeiros passos com HTML5
32
Liçã o 1: Introduçã o ao HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
33
Apresentando a marcaçã o semâ ntica
34
35
Criaçã o de um documento HTML
43
Resumo da liçã o
45
Revisã o da aula
46
Liçã o 2: Incorporar conteú do. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
47
49
50
Incorporando conteú do de plug-in
53
Resumo da liçã o
55
Revisã o da aula
56
Pratica exercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Exercício 1: Crie um site simples usando o Visual Studio
Express for Web
56
Exercício 2: crie pá ginas adicionais
59
Exercício 3: Incorporaçã o de Conteú do
61
Exercícios de prá tica sugeridos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Capítulo 3: Primeiros passos com JavaScript
65
Liçã o 1: Apresentando JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
66
vi
Conteúdo
Compreender a funçã o dos dados
67
Usando declaraçõ es
71
Trabalhando com funçõ es
73
Variá veis de escopo
77
Funçõ es de aninhamento e escopo de variá vel local aninhada
78
78
Programaçã o condicional
80
Implementando loops de có digo
84
87
Resumo da liçã o
88
Revisã o da aula
88
Liçã o 2: Escrevendo, testando e depurando JavaScript. . . . . . . . . . . . . . . . . 89
Hel o World de JavaScript
90
100
Lidar com navegadores que nã o suportam JavaScript
101
102
102
Usando o depurador de JavaScript do Visual Studio .NET
103
Resumo da liçã o
107
Revisã o da aula
107
Liçã o 3: Trabalhando com objetos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
108
112
Resumo da liçã o
120
Revisã o da aula
121
Pratica exercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Exercício 1: Criar uma pá gina da web da calculadora
121

123
Exercícios de prá tica sugeridos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,134
Capítulo 4 Introdução ao CSS3
137
Liçã o 1: Apresentando CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Definindo e aplicando como tyle
139
Conteúdo
vii
Adicionar comentá rios a uma folha de estilo
139
Criaçã o de um estilo embutido
140
Criaçã o de um estilo incorporado
140
Criaçã o de uma folha de estilo externa
141
Resumo da liçã o
144
Revisã o da aula
145
Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e cascateamento. . . . . . . . . 145
Definindo seletores
146
159
Estendendo estilos de navegador com estilos de usuá rio
159
159
160
161
162
Resumo da liçã o
163
Revisã o da aula
164
Liçã o 3: Trabalhando com propriedades CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
166
173
175
176
Posicionando elementos < div >
178
Usando a propriedade float
186
Usando a propriedade clear
189
Usando a propriedade box-sizing
190
Centralizar o conteú do na janela do navegador
193
Resumo da liçã o
193
Revisã o da aula
194
Pratica exercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,194
Exercício 1: Adicionar uma folha de estilo ao projeto da calculadora
195
197
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
viii
Conteúdo
Capítulo 5 Mais HTML5
205
Liçã o 1: Pensando na semâ ntica do HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Por que marcaçã o semâ ntica?
206
206
Criaçã o de documentos HTML5 semâ nticos
207
Criaçã o de um contêiner de layout HTML5
207
Controlando o formato usando o elemento < div >
213
Adicionar pausas temá ticas
213
Anotando conteú do
213
221
Resumo da liçã o
228
Revisã o da aula
229
Liçã o 2: Trabalhando com tabelas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
230
Criaçã o de uma tabela bá sica

230
231
Estilo dos cabeçalhos da tabela
232
Declarando o cabeçalho, rodapé e corpo da tabela
233
Criaçã o de tabelas irregulares
238
Adicionar uma legenda a uma tabela
241
Colunas de estilo
241
Resumo da liçã o
242
Revisã o da aula
243
Exercício 1: Adicionar um layout de pá gina ao projeto da calculadora
244
Exercício 2: Adicionar estilos ao layout da calculadora
246
252

Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Capítulo 6 JavaScript e jQuery essenciais
261
Liçã o 1: Criando objetos JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Usando terminologia orientada a objetos
262
Conteúdo
ix
Compreendendo a advertência orientada a objetos do JavaScript
263
Usando o padrã o literal de objeto JavaScript
263
Criaçã o de objetos dinâ micos usando o padrã o de fá brica
265
Criaçã o de uma classe
266
271
Debatendo o protó tipo / compromisso privado
274
Implementando namespaces
276
278
Resumo da liçã o
283
Revisã o da aula
284
Liçã o 2: Trabalhando com jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Apresentando jQuery
285
Introduçã o ao jQuery
286
Usando jQuery
287
291
Criaçã o de um wrapper jQuery para uma referência de elemento DOM
294
295
295
Inicializando o có digo quando o navegador estiver pronto
295
Resumo da liçã o
296
Revisã o da aula
296

297
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,308
Capítulo 7 Trabalhando com formulários
311
Liçã o 1: Noçõ es bá sicas sobre formulá rios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Compreendendo as comunicaçõ es na web
312
Envio de dados do formulá rio para o servidor da web
316
Envio de dados ao enviar um formulá rio
316
Usando o elemento < label >
318
Especificando os formulá rios pai
319
Acionando o envio do formulá rio
319
Conteúdo
Serializando o formulá rio
321
321
Usando restriçõ es de envio de dados
322
Usando POST ou GET
322
Resumo da liçã o
323
Revisã o da aula
324
Liçã o 2: validaçã o do formulá rio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Validaçã o necessá ria
325
Validando entrada de URL
327
Validando nú meros e intervalos
329
Estilizando as validaçõ es
330
Resumo da liçã o
330
Revisã o da aula
330
Exercício 1: Crie um formulá rio de contato
331
Exercício 2: adicionar validaçã o ao formulá rio de contato

335
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Capítulo 8 Sites e serviços
341
Liçã o 1: Introduçã o ao Node.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Instalando Node.js
342
Criaçã o de Hello World a partir de Node.js
342
Criaçã o de um mó dulo Node.js
344
Criaçã o de um pacote Node.js
345
Avanço rá pido para expressar
354
354
Resumo da liçã o
363
Revisã o da aula
363
Liçã o 2: Trabalhando com serviços da web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,364
364
Criaçã o de um serviço da Web RESTful usando Node.js
366
368
380
Conteúdo
XI
Resumo da liçã o
381
Revisã o da aula
382
Pratique exercícios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
382
386
Exercícios de prá tica sugeridos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,390
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Capítulo 9 Operações assíncronas
393
Liçã o 1: Operaçõ es assíncronas usando jQuery e WinJS. . . . . . . . . 393
394
Criaçã o de objetos de promessa jQuery usando $ .Deferred ()

395
Falha de manuseio
397
Lidando com a limpeza de conclusã o
397
398
398
Execuçã o paralela usando $ .when (). Then ()
400
400
Cal s assíncronas condicionais
401
Resumo da liçã o
402
Revisã o da aula
403
Liçã o 2: Trabalhando com web workers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,404
404
Resumo da liçã o
405
Revisã o da aula
406
Pratica exercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,406
Exercício 1: Implementar có digo assíncrono exe cution
406
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Capítulo 10 Comunicações We bSocket
415
Liçã o 1: Comunicaçã o usando WebSocket. . . . . . . . . . . . . . . . . . . . . 415
416
416
xii
Conteúdo
417
420
Lidando com desconexõ es de conexã o
422
422
423
Resumo da liçã o
424
Revisã o da aula
424
Exercício 1: Criar um servidor de bate-papo
425
429
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Capítulo 11 HTML5 suporta multimídia
437
Liçã o 1: Reproduzindo vídeo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Formatos de vídeo
438
Implementando o elemento < video >
438
Definir a fonte
439
Configurando o elemento < video >
441
Acessando faixas
441
Resumo da liçã o
442
Revisã o da aula
443
Liçã o 2: Reproduzindo á udio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Formatos de á udio
444
O elemento < audio >
444
Definir a fonte
445
Configurando o elemento < audio >
445
Resumo da liçã o
446
Revisã o da aula
446
Liçã o 3: Usando o objeto HTMLMediaElement. . . . . . . . . . . . . . . . . . . . . 447
447
447
Inscrever-se em eventos HTMLMediaElement
449
450
Conteúdo
xiii
Resumo da liçã o
451
Revisã o da aula
451
Pratique exercícios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Exercício 1: Crie uma pá gina da web que exiba vídeo
452
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
Capítulo 12 Desenho com HTML5
459
Liçã o 1: Desenhar usando o elemento < canvas >. . . . . . . . . . . . . . . . . . 460
A referência do elemento < canvas >
460
Referência do objeto de contexto CanvasRenderingContext2D
460
Implementando a tela
462
Desenhar retâ ngulos
463
465
Salvar e restaurar o estado de desenho

474
475
Desenho de texto
488
Desenho com imagens
490
Resumo da liçã o
494
Revisã o da aula
495
Liçã o 2: Usando grá ficos vetoriais escalá veis. . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Usando o elemento < svg >
496
Exibindo arquivos SVG usando o elemento < img >
499
Resumo da liçã o
501
Revisã o da aula
502
Exercício 1: Crie uma pá gina da web usando uma tela
502
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,506
Capítulo 13 Arrastar e soltar
507
Liçã o 1: arrastando e soltando. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
Arrastando 509
510
xiv
Conteúdo
Descartando 511
Usando o objeto DataTransfer
513
Resumo da liçã o
516
Revisã o da aula
516
Liçã o 2: arrastando e soltando arquivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
517
Resumo da liçã o
521
Revisã o da aula
521
Exercício 1: Crie um jogo de embaralhamento numérico
522
526
Exercício 3: Adicionar verificaçã o de embaralhamento e vencedor
530
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Capítulo 14 Tornando seu HTML ciente de localização
539
Liçã o 1: Posicionamento bá sico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,540
Referência de objeto de geolocalizaçã o
540
Recuperando a posiçã o atual
541
543
Endereço privacidade ing
544
Especificando opçõ es
544
Resumo da liçã o
545
Revisã o da aula
546
Liçã o 2: Posicionamento monitorado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 0,546

546
Calculando distâ ncia entre sampl es
548
Resumo da liçã o
549
Revisã o da aula
549
Exercício 1: Mapeie suas posiçõ es atuais
550
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Conteúdo
xv
Capítulo 15 Dados locais com armazenamento na web
555
Liçã o 1: Apresentando o armazenamento na web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
556
556
Trabalhando com limitaçõ es de cookies
557
Alternativas aos cookies anteriores ao HTML5
557
558
560
Usando a persistência de curto prazo com sessionStorage 562
Antecipando potenciais erros de desempenho
563
Resumo da liçã o
564
Revisã o da aula
564
Liçã o 2: Manipulaçã o de eventos de armazenamento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Enviando notificaçõ es apenas para outras janelas
566
566
567
Usando eventos com sessionStorage 568
Resumo da liçã o
568
Revisã o da aula
568
Exercício 1: Crie um catá logo de contatos usando localStorage 569

Uma resposta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579
Liçã o 1
579
Liçã o 2
580
Capítulo 16 Aplicativos da web off-line
581
Liçã o 1: Trabalhando com Web SQL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Considerando a longevidade questioná vel do Web SQL
582
582
Executando atualizaçõ es de esquema
583
584
xvi
Conteúdo
Resumo da liçã o
588
Revisã o da aula
589
Liçã o 2: Trabalhando com IndexedDB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589
Usando có digo específico do navegador

590
590
Usando armazenamentos de objetos
591
593
594
Atualizando um registro existente
594
595
595
596
599
Resumo da liçã o
599
Revisã o da aula
600
Liçã o 3: Trabalhando com a API FileSystem. . . . . . . . . . . . . . . . . . . . . . . . 600

601
601
602
602
Lendo um arquivo
603
604
Criaçã o e abertura de um diretó rio
604
Gravando um arquivo em um diretó rio
605
Excluindo um diretó rio
605
Resumo da liçã o
606
Revisã o da aula
606
Liçã o 4: Trabalhando com o cache HTTP do aplicativo offline. . . . . . . . . . . 607
608

608
Atualizando o cache
609
Entendendo eventos
610
Conteúdo
xvii
Resumo da liçã o
610
Revisã o da aula
611
Exercício 1: Modifique um livro de contato para usar IndexedDB
611
Sugg ested exercícios prá ticos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616
Respostas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
Índice 621
O que você acha deste livro? Nós queremos ouvir de você!
A Microsoft está interessada em ouvir seus comentários para que possamos

melhorar continuamente nossos livros e recursos de aprendizado para você. Para
participar de uma breve pesquisa online,
visite: www.microsoft.com/learning/booksurvey/
x viii
Conteúdo
Introdução
Este guia de treinamento foi criado para profissionais de tecnologia da informaçã o (TI) que
desenvolvem ou planejam desenvolver documentos HTML, como pá ginas da Web ou
aplicativos da Windows Store. Presume-se que, antes de começar a usar este guia, você
esteja familiarizado com o desenvolvimento da Web e as tecnologias comuns da Internet.
Este livro cobre alguns dos tó picos e habilidades que sã o objeto do exame de certificaçã o
Microsoft 70-480. Se você estiver usando este livro para complementar seus materiais de
estudo, pode achar esta informaçã o ú til. Observe que este livro foi elaborado para ajudá -lo
nessa funçã o; pode nã o abranger todos os tó picos do exame. Se você estiver se preparando
para o exame, deverá usar materiais de estudo adicionais para ajudar a fortalecer sua
experiência no mundo real. Para sua referência, um mapeamento dos tó picos deste livro
para os objetivos do exame está incluído no final do livro.
Usando este guia de treinamento, você aprenderá a fazer o seguinte.
■■ Crie um projeto usando o Visual Studio Express 2012 for Web.
■■ Crie um projeto usando o Blend for Visual Studio 2012.
■■ Crie um projeto usando o Visual Studio Express 2012 para Windows 8.
■■ Crie um documento HTML usando marcaçã o semâ ntica.
■■ Implementar a funcionalidade JavaScript em seus documentos HTML.
■■ Use técnicas de desenvolvimento orientadas a testes para escrever có digo JavaScript.
■■ Crie folhas de estilo em cascata (CSS) que formatam visualmente seu documento HTML.
■■ Crie tabelas HTML.
■■ Crie objetos JavaScript.
■■ Use jQuery para simplificar a programaçã o JavaScript.
■■ Crie formulá rios HTML com validaçã o.
■■ Crie um site Node.js e serviço web.
■■ Chame os serviços da web de JavaScript.
■■ Executa operaçõ es assíncronas de Ja vaScript.
■■ Realiza comunicaçõ es WebSocket.
■■ Reproduza á udio e vídeo em uma pá gina da web.
■■ Desenhe com uma tela HTML5.

■■ Use arquivos de imagem SVG.
■■ Realize operaçõ es de arrastar e soltar.
■■ Torne seu local HTML ciente.
■■ Dados persistentes no cliente do navegador.
xix
Compatibilidade com versões anteriores e compatibilidade entre navegadores Este

livro nã o tenta cobrir todas as diferenças entre cada versã o de cada navegador. Uma
discussã o tã o abrangente poderia facilmente render uma biblioteca de livros.
A maior parte do có digo neste livro é escrita usando o Internet Explorer 10, que é instalado
com o Windows 8. Além disso, muitos, mas nem todos os exemplos de có digo foram
testados usando os seguintes navegadores.
■■ Firefox 17.0.1
■■ Google Chrome 23.0.1271.97 m
■■ Opera 12.11
■■ Apple Safari 5.1.7
Na maioria dos casos, se os outros navegadores nã o forem compatíveis, há uma nota

informando isso. Isso é especialmente verdadeiro nos ú ltimos capítulos porque o
armazenamento na web ainda é relativamente novo e os requisitos ainda sã o fluidos.
A melhor maneira de ver quais recursos estã o disponíveis entre os navegadores é visitar

um site que é atualizado quando novas versõ es do navegador sã o lançadas e os recursos do
HTML5 sã o atualizados. O site http://caniuse.com é particularmente bom.
A seguir estã o os requisitos mínimos do sistema que seu computador precisa atender para
completar os exercícios prá ticos deste livro.
■■ Windows 8 ou mais recente. Se você deseja desenvolver aplicativos da Windows Store,

você precisa do Windows 8 em seu computador de desenvolvimento.
Requisitos de hardware
Esta seçã o apresenta os requisitos de hardware para usar o Visual Studio 2012.
■■ processador de 1,6 GHz ou mais rá pido

■■ 1 GB de RAM (mais é sempre recomendado)
■■ 10 GB (NTFS) de espaço disponível no disco rígido
■■ disco rígido de 5400 RPM
■■ Placa de vídeo compatível com DirectX 9 rodando em resoluçã o de tela de 1024 × 768
ou superior.
■■ conectividade com a Internet
xx Introdução
Software requireme nts
O software a seguir é necessá rio para completar os exercícios prá ticos.
■■ Visual Studio 2012 Professional, Visual Studio 2012 Premium ou Visual Studio 2012
Final. Você deve pagar por essas versõ es, mas em vez de uma delas, você pode
instalar todas as seguintes versõ es expressas gratuitas.
■■ Visual Studio Express 2012 para a web. Disponível em http://www.microsoft.com
/ visualstudio / eng / downloads # d-express-web .
■■ Visual Studio Express 2012 para Windows 8. Esta instalaçã o também instala o Blend for
Vis ual Studio 2012. Disponível em http://www.microsoft.com/visualstudio/eng
/ downloads # d-express-web .
Pratica exercícios
Este livro apresenta exercícios prá ticos para reforçar os tó picos que você aprendeu. Esses
exercícios sã o organizados por capítulo e você pode carregá -los em http://aka.ms
/ TGProgHTML5 / files.
Agradecimentos
Agradeço à s seguintes pessoas por tornar este livro uma realidade.
■■ A Carol Dillingham, por seu feedback construtivo durante todo o processo de redaçã o
deste livro . Agradeço também por ter paciência enquanto os meses de férias de inverno
passavam e meu desejo e capacidade de escrever eram constantemente interrompidos.
■■ A Devon Musgrave, por me dar a oportunidade de escrever este livro.

■■ A Kerin Forsyth, por seu á rduo trabalho em tornar este livro consistente com outros
livros da Microsoft Press e por me ajudar com a entrega deste livro.
■■ Para Pierce Bizzaca por suas habilidades de revisã o técnica.
A todos os outros editores e artistas que contribuíram para a divulgaçã o de meu livro ao
pú blico , obrigado por seu trabalho á rduo e por fazer com que este livro seja uma
experiência positiva para mim.
Fizemos todos os esforços para garantir a precisã o deste livro e do conteú do que o
acompanha.
Todos os erros relatados desde a publicaçã o deste livro estã o listados em nosso site da
Microsoft Press em Oreilly.com:
http://aka.ms/TGProgHTML5/errata
Introdução x xi
Se você encontrar um erro que ainda nã o esteja listado, pode relatá -lo para nó s por meio da
mesma pá gina.
Se precisar de suporte adicional, envie um e-mail para Microsoft Press Book Support
em mspinput@microsoft.com.
Observe que o suporte do produto para software Microsoft nã o é oferecido por meio dos

endereços anteriores.
Nós queremos ouvir de você
Na Microsoft Press, sua satisfaçã o é nossa principal prioridade e seus comentá rios, nosso
bem mais valioso. Diga-nos o que você acha deste livro em:
http://aka.ms/tel press
A pesquisa é curta e lemos cada um de seus comentá rios e ideias. Agradecemos

antecipadamente por sua contribuiçã o!
Manter contato
Vamos continuar a conversa! Estamos no Twitter em http://twitter.com/MicrosoftPress .
xxii Introdução
CAPÍTULO 1
Começando com o Visual
Studio 2012 e Blend para
Visual Studio 2012
Bem-vindo ao mundo do HTML5, CSS3 e JavaScript! Essas tecnologias, comumente

chamadas simplesmente de HTML5, podem ser usadas para desenvolver aplicativos para
Windows e para a web.
Este capítulo apresenta as principais ferramentas de que você precisa, Microsoft Visual
Studio 2012
e o Blend for Visual Studio 2012, que sã o usados nas aulas do livro. Visual Studio 2012
fornece novos recursos interessantes. Os capítulos a seguir apresentam vá rios recursos do

Visual Studio 2012 e do Blend.
Lições neste capítulo:
■■ Liçã o 1: Visual Studio 2012 2
■■ Liçã o 2: Mistura para Visual Studio 2012 13
Para concluir este livro, você deve ter algum conhecimento de desenvolvimento web. Este
capítulo requer o hardware e o software listados na seçã o “Requisitos do sistema” na
Introduçã o do livro.
MUNDO REAL, UMA OPORTUNIDADE DE CARREIRA
Você está procurando uma carreira em programação de computadores, mas não

sabe que tecnologia seguir. Você deseja aprender uma tecnologia que possa usar em
muitas empresas para se tornar mais comercializável e para lhe dar a flexibilidade
de mover-se entre empresas.
Que tecnologia você escolheria para oferecer essa flexibilidade?
A Internet explodiu. Quase todas as empresas têm um site, então por que não
aprender as tecnologias da web?
1
HTML, CSS e JavaScript são três intimamente acoplados tecnologias web
fundamentais que você c um aprender a aumentar sua liquidez e dar-lhe a
flexibilidade de escolher a empresa para a qual você deseja trabalhar. Este é o início
do seu caminho em direção à sua carreira futura.
Saiba estas tecnologias bem, e você pode expandir para outras programação
techn ologies como o Silverlight, Flash, C # e Visual Basic.
Lição 1: Visual Studio 2012
O Visual Studio 2012 é uma ferramenta altamente ú til para o desenvolvimento de

aplicativos. Dependendo da ediçã o do Visual Studio que você possui, ele pode fornecer um
ambiente de desenvolvimento integrado (IDE) que pode ser usado durante todo o ciclo de
vida do projeto.
Após esta lição, você será capaz de:
■■ Identifique as versõ es disponíveis do Visual Studio 2012 e os recursos de cada uma.
■■ Inicie um projeto usando o Visual Studio Express 2012 para W eb.
■■ Inicie um projeto usando o Visual Studio Express 2012 para Windows 8.
Tempo estimado de aula: 40 minutos
Edições do Visual Studio 2012
A seguir está uma lista com breves descriçõ es das ediçõ es do Visual Studio que a Microsoft
oferece.
■■ Visual Stu dio Test Professional 2012 Fornece ferramentas de colaboraçã o de equipe,

mas nã o um IDE de desenvolvimento completo. É ideal para testadores, analistas de
negó cios, gerentes de produto e outras partes interessadas, mas nã o é uma ediçã o ideal
para desenvolvedores.
■■ Visual Studio Professi onal 2012 Fornece uma experiência de desenvolvimento

unificada que permite aos desenvolvedores criar aplicativos multicamadas na web, nuvem
e dispositivos. Esta é uma ediçã o ideal para um desenvolvedor solitá rio ou uma pequena
equipe de desenvolvedores que desenvolverá uma ampla variedade de aplicativos para
web, Windows, telefone e nuvem.
■■ Visual Studio Premium 2012 Fornece uma soluçã o integrada de gerenciamento do

ciclo de vida do aplicativo (ALM) e funçõ es de desenvolvimento de software para fornecer
aplicativos atraentes para uma equipe unificada de desenvolvedores , testadores e analistas
de negó cios.
■■ Visual Studio Ultimate 2012 Oferece uma oferta abrangente de ALM para
organizaçõ es que desenvolvem, distribuem e operam uma ampla variedade de aplicativos e
serviços de software altamente escaloná veis.
■■ Visual Studio Team Fo undation Server Express 2012 Fornece o hub de colaboraçã o

no centro da soluçã o ALM que permite pequenas equipes de até cinco desenvolvedores 2
CAPÍTULO 1 Introduçã o ao Visual Studio 2012 e Blend for Visual Studio 2012
para ser mais á gil, colabore com mais eficá cia e forneça um software melhor com mais
rapidez. Inclui controle de có digo-fonte, rastreamento de item de trabalho e automaçã o de
construçã o para projetos de software para entregar resultados previsíveis. Isso é grá tis.
■■ Visual Studio Express 2012 for Web Fornece as ferramentas e recursos para

construir e testar có digo HTML5, CSS3, ASP.NET e JavaScript e para implantá -lo em
servidores web ou na nuvem usando o Windows Azure. E o melhor de tudo, é grá tis.
■■ Visual Studio Express 2012 para Windows 8 Fornece as principais ferramentas

necessá rias para criar aplicativos da Windows Store, usando XAML e sua escolha de
linguagem .NET ou HTML5, CSS3 e JavaScript. Isso também é gratuito.
Se você usar o Visual Studio Express 2012 para Web, poderá trabalhar apenas em projetos
da Web e deverá escolher uma linguagem .NET para começar, como Visual Basic ou C #. Se
você usa o Visual Studio Express 2012 para Windows 8, pode trabalhar apenas em
aplicativos da Windows Store, mas pode começar com um projeto JavaScript e nã o precisa
configurar um site para criar pequenos aplicativos. O Blend for Vi sual Studio 2012 também
oferece a capacidade de criar aplicativos da Windows Store com um projeto JavaScript.
Os produtos Visual Studio Express 2012 estã o disponíveis gratuitamente no site da

Microsoft. Você deve baixar e instalar o Visual Studio Express 2012 para Windows 8 e o
Visual Studio Express 2012 para Web.
Visual Studio .NET 2012 contém um novo editor de HTML que fornece suporte completo
para HTML5
elementos e fragmentos. Aqui está uma lista de alguns dos recursos do Visual Studio 2012
que tornarã o sua experiência de desenvolvimento mais agradá vel e produtiva. Os novos
recursos serã o demonstrados e explicados posteriormente neste livro, quando apropriado.
■■ Teste Você pode testar facilmente sua pá gina da web, aplicativo ou site com uma
variedade de navegadores. Ao lado do botã o Iniciar depuraçã o no Visual Studio 2012, você
encontrará uma lista de todos os navegadores instalados. Basta selecionar o navegador
desejado na lista quando estiver pronto para testar.
■■ Encontrando a fonte da marcação renderizada Usando o novo recurso Inspetor de
pá gina, você pode encontrar rapidamente a fonte da marcaçã o renderizada. O Inspetor de
pá gina renderiza uma pá gina da web diretamente no IDE do Visual Studio, para que você
possa escolher um elemento renderizado, e o Inspetor de pá gina abrirá o arquivo no qual a
marcaçã o foi gerada e destacará a fonte.
■■ IntelliSense aprimorado Encontre rapidamente snippets e elementos de có digo. Nos

editores de HTML e CSS, o IntelliSense filtra a lista de exibiçã o conforme você insere o
texto. Este recurso mostra strings que correspondem ao texto digitado no início, meio ou
fim. Também corresponde à s letras iniciais . Por exemplo, “bw” corresponderá a “largura
da borda”.
■■ Marcação reutilizável Você pode criar facilmente uma marcaçã o reutilizá vel

selecionando a marcaçã o e extraindo-a para um controle do usuá rio.
Liçã o 1: Visual Studio 2012 CAPÍTULO 1
■■ Renomeação automática Quando você renomeia uma tag HTML de abertura ou

fechamento, a tag correspondente é renomeada automaticamente.
Suporte CSS3
O Visual Studio .NET 2012 fornece um novo editor CSS que oferece suporte completo para
CSS3, incluindo suporte para folhas de estilo em cascata (CSS), hacks e snippets
para extensõ es específicas do fornecedor para CSS.
■■ Seções expansíveis Use o editor CSS para expandir e reduzir as seçõ es clicando no

sinal de mais ou menos que é exibido à esquerda de cada entrada de estilo.
■■ Recuo hierárquico O editor CSS exibe estilos aninhados em uma moda hierá rquica, o
que torna muito mais fá cil ler e entender os estilos.
■■ Adicionar comentários Você pode facilmente comentar e descomentar blocos.
■■ Seletor de cores O editor CSS agora tem um seletor de cores como o editor de HTML.
O Visua l Studio 2012 oferece muitos novos recursos para tornar a experiência do
desenvolvedor JavaScript mais agradá vel e produtiva. A seguir está uma lista de alguns dos
novos recursos e aprimoramentos.
■■ O Visual Studio 2012 baseado em padrões incorpora os recursos JavaScript do
ECMAScript 5 e o modelo de objeto de documento (DOM) HTML5.
■■ IntelliSense aprimorado Você pode receber informaçõ es aprimoradas do IntelliSense

para funçõ es e variá veis usando novos elementos com suporte em comentá rios de có digo
de barra tripla (///). Novos elementos incluem < var > e < assinatura >. Você também pode
ver as assinaturas de funçã o no lado direito da lista de conclusã o de instruçã o.
■■ Editor aprimorado O Editor JavaScript implementa recuo inteligente,

correspondência de chaves e delineamento conforme você escreve o có digo. Por exemplo,
se você posicionar o cursor à esquerda de uma chave aberta, as chaves abertas e fechadas
serã o realçadas. Isso funciona com chaves, colchetes, colchetes angulares e parênteses.
■■ Ir para definição Para localizar as definiçõ es de funçã o no có digo-fonte, basta clicar

com o botã o direito do mouse em uma funçã o e clicar em Ir para definiçã o. Você também
pode colocar o cursor na funçã o e, em seguida, pressionar a tecla F12 para abrir o arquivo
de origem JavaScript no local do arquivo onde a funçã o está definida. (Este recurso nã o é
compatível com arquivos gerados.)
■■ IntelliSense a partir de comentários JavaScript O novo mecanismo de

extensibilidade IntelliSense fornece automaticamente o IntelliSense quando você usa tags
de comentá rio JavaScript padrã o (//).
■■ Pontos de interrupção Agora você tem mais flexibilidade ao definir um ponto de

interrupçã o. Quando uma ú nica linha contém vá rias instruçõ es, agora você pode
interromper em uma ú nica instruçã o.
■■ Grupos de referência Você pode controlar quais objetos estã o disponíveis no escopo
global usando Grupos de referência. Grupos de referência sã o configurados na barra de
menus navegando até Ferramentas | Opçõ es | Editor de Texto | JavaScript | IntelliSense
| Referências.
■■ Referências de arrastar e soltar Você pode arrastar arquivos JavaScript que têm

a extensã o .j s do Gerenciador de Soluçõ es para o editor de có digo JavaScript, onde sã o
adicionados como referências para o Visual Studio usar para fornecer o IntelliSense. Ao
adicionar referências arrastando e soltando, elas sã o colocadas no topo da pá gina no editor
de có digo.
Quando você inicia o Visual Studio Express 2012 para Windows 8, a tela da pá gina inicial é
exibida.
A Figura 1-1 mostra a tela da pá gina inicial, que contém informaçõ es ú teis e links para
recursos de aprendizagem e desenvolvimento. No lado esquerdo da pá gina inicial estã o os
links para criar um novo projeto ou abrir um novo projeto. Depois de criar pelo menos um
projeto, você verá links de atalho para abrir qualquer um de seus projetos recentes.
FIGURA 1-1 Pá gina inicial do Visual Studio Express 2012 para Windows 8 Além de clicar
no link Novo projeto na pá gina inicial, você pode iniciar um novo projeto clicando em
Arquivo e escolhendo Novo projeto. A Figura 1-2 mostra a tela Novo projeto, que exibe uma
lista de modelos iniciais a partir dos quais você pode escolher iniciar em seu novo
aplicativo rapidamente. Você pode pensar em um modelo como um projeto no qual alguém
concluiu a Liçã o 1: Visual Studio 20 12 CAPÍTULO 1
tarefas mundanas que seriam comuns a todos os aplicativos desse tipo e depois salvas
como uma estrutura que você pode usar para começar.
No lado esquerdo da tela Novo projeto, você pode selecionar a partir de modelos de projeto
recentes que você usou ou da lista completa de modelos instalados, ou você pode ir online
para selecionar um modelo. Você descobrirá que os modelos instalados sã o divididos de
acordo com a linguagem de programaçã o. A Figura 1-2 mostra os modelos instalados para
JavaScript.
FIGURA 1-2 A tela do novo projeto com os modelos de projeto JavaScript
NOTA: MODELOS INCLUÍDOS
No Visual Studio Express 2012 para Windows 8, todos os modelos incluídos são para
a criação de aplicativos da Windows Store do Windows 8. No Visual Studio Express
2012 para Web, todos os modelos incluídos são para a criação de aplicativos da
web. Lembre-se de que você pode usar HTML5, CSS3 e JavaScript em aplicativos da
Windows Store e aplicativos da web.
A seguir estã o breves descriçõ es de cada modelo.
■■ Aplicativo em branco Este modelo nã o está totalmente vazio. Ele fornece um projeto

de pá gina ú nica para um aplicativo do Windows, mas nã o tem controles predefinidos na
pá gina.
■■ Aplicativo de grade Este modelo fornece um aplicativo que contém vá rias pá ginas e

permite que você navegue entre grupos de itens.
■■ Aplicativo dividido Este modelo cria um projeto de duas pá ginas em que a primeira

pá gina contém um grupo de itens e a segunda pá gina contém uma lista de itens com
detalhes do item selecionado à direita da lista.
■■ Aplicativo de layout fixo Este modelo fornece uma ú nica pá gina com um layout de
proporçã o fixa que se ajusta para caber na tela.
■■ Aplicativo de navegação Este modelo fornece um aplicativo de pá gina ú nica contendo

controles para navegaçã o.
Selecionar um modelo permite que uma có pia do modelo seja aberta na janela do Solution
Explorer. Por padrã o, a janela do Solution Explorer está no lado direito, embora as janelas
possam ser arrastadas para qualquer local na tela. O Gerenciador de Soluçõ es contém uma
representaçã o em á rvore de todos os projetos carregados na soluçã o atual.
Na janela do Solution Explorer está a janela Propriedades, que é sensível ao contexto e

contém as propriedades do item selecionado no momento. As propriedades sã o visíveis
nesta janela e a maioria também pode ser configurada.
No lado esquerdo da tela está a caixa de ferramentas. Por padrã o, a caixa de ferramentas é

uma guia para a qual você pode apontar para abrir a janela. A caixa de ferramentas também
é sensível ao contexto, portanto, ferramentas diferentes estã o disponíveis com base no que
está sendo exibido na janela central.
Verificação rápida
■■ Você deseja criar um aplicativo da Windows Store. Qual edição do Visual Studio
2012 você usará e há um requisito de sistema operacional para o seu sistema
desenvolver aplicativos de aplicativos da Windows Store?
Verifique uma resposta rápida
■■ Você deve usar o Visual Studio Express 2012 para Windows 8 e ter o Windows 8
instalado para desenvolver aplicativos da Windows Store.
Examinando o modelo de aplicativo em branco
Quando o modelo de aplicativo em branco é selecionado, uma nova soluçã o contendo um

projeto é criada.
O novo projeto nã o ficará totalmente em branco. Conforme mostrado na Figura 1-3,

existem vá rios arquivos e pastas neste novo projeto. No início, default.js foi criado e
atualmente é exibido na janela do editor de JavaScript.
O arquivo default.js está na pasta js , onde você pode adicionar seus pró prios arquivos
JavaScript.
Este arquivo default.js contém atualmente uma pequena quantidade de có digo, que o
Capítulo 3, “Introduçã o ao JavaScript,” revisita com mais detalhes. Aqui está uma visã o
geral do que ele faz.
O uso de funçã o na terceira linha cria um escopo de nomenclatura para variá veis e funçõ es
em seu aplicativo. No meio do có digo estã o os comentá rios TODO que fornecem um local
para colocar seu pró prio có digo a ser executado quando o aplicativo for iniciado ou
reativado apó s ser suspenso ou quando o aplicativo for suspenso.
7
FIGURA 1-3 Modelo de aplicativo em branco com codificaçã o preliminar
O aplicativo em branco também contém outros arquivos que você deseja explorar. Se você
abrir o arquivo .html padrã o, verá o seguinte HTML.
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title> App1 </title>
<! - Referências WinJS ->
<link href = "/ /Microsoft.WinJS.1.0/css/ui-dark.css" rel = "stylesheet" />

<script src = "// Microsoft.WinJS.1.0 / js / base.js"> </script>
<script src = "// Microsoft.WinJS.1.0 / js / ui.js"> </script>
<! - Referências App1 ->
<link href = "/ css / default.css" rel = "stylesheet" />
<scri pt src = "/ js / default.js"> </script>
</head>
<body>
<p> O conteú do vai aqui </p>
</body>
</html>
A primeira linha contém <! DOCTYPE html>, que é uma declaraçã o para o navegador da
web que descreve a versã o do HTML em que a pá gina foi escrita. Nã o é um elemento
HTML; é um 8
instruçã o especial. No HTML5, essa instruçã o especial deve ser a primeira coisa que o
navegador lê na pá gina. Esta instruçã o nã o é obrigató ria, mas é considerada uma prá tica
recomendada tê-la.
O pró ximo é o elemento < html > que consiste na tag inicial na parte superior e na tag final,
</ html>, na parte inferior. Este é considerado o elemento raiz da pá gina e todos os outros
elementos estã o contidos no elemento html.
Dentro do elemento html estã o os elementos head e body. O elemento head

normalmente contém metadados e instruçõ es relacionadas à pá gina. O elemento body
contém conteú do que será exibido ao usuá rio. Neste exemplo, o elemento head contém um
elemento meta que descreve o conjunto de caracteres que está sendo usado (utf-8), um
título que será exibido na barra de título do navegador, tags de links que fazem referência a
arquivos CSS e tags de script que fazem referência a arquivos JavaScript . Essas referências
sã o instruçõ es para o navegador carregar esses arquivos quando a pá gina for carregada. O
elemento body contém um elemento de pará grafo com a mensagem “Content goes
here”. Esta mensagem aparece quando o aplicativo é executado.
A pasta Referências contém uma pasta chamada Biblioteca do Windows para JavaScript 1.0,
que contém subdiretó rios fornecidos e mantidos pela Microsoft. Você nã o deve modificar
os arquivos nesta estrutura de diretó rio, mas deve explorar os arquivos nesta estrutura de
pasta e aprender o má ximo possível sobre esses arquivos. De particular importâ ncia é a
pasta css que contém os arquivos ui-dark.css e ui-light.css. Th arquivos ese definir o tema
principal da sua aplicaçã o, quer um tema claro ou escuro.
MAIS INFORMAÇÕES FUNDOS CLAROS E ESCUROS
O arquivo default.html tem uma referência ao arquivo ui-dark.css. Se você executar o

aplicativo, ele exibirá a mensagem “O conteúdo está aqui” em uma tela com fundo
escuro. Se você alterar a referência ao arquivo ui-light.css, verá um fundo claro.
A pasta css contém folhas de estilo em cascata para seu aplicativo. Atualmente, o

arquivo .html padrã o faz referência a um ú nico arquivo denominado default.css. O arquivo
CSS contém instruçõ es para apresentar seu arquivo HTML e será abordado com mais
detalhes no Capítulo 4, “Primeiros passos com CSS3”.
A pasta de imagens contém imagens em branco definidas para o melhor tamanho

para apresentaçã o ao usuá rio. Normalmente, você editaria esses arquivos como parte de
seu aplicativo concluído.
No diretó rio raiz do seu aplicativo está um arquivo com uma extensã o .pfx que fornece uma
chave de segurança para implantaçã o e um arquivo appmanifest que contém metadados
de implantaçã o .
Quando você inicia o Visual Studio Express 2012 for Web, a mesma tela da pá gina inicial é
exibida conforme mostrado na Figura 1-1 e descrito na seçã o anterior. Nos templates
instalados, você descobrirá que eles estã o divididos de acordo com a linguagem de
programaçã o .NET, Visual Basic e Visual C #. A Figura 1-4 mostra os modelos instalados
para o Visual Basic.
9
FIGURA 1-4 A tela New Project com modelos de projeto Visual Basic e Visual C # Seu novo
projeto pode ser diferente com base no software instalado em seu computador. Por
exemplo, o modelo mostrado aqui é o modelo Obter SDK do Windows Azure para .NET que
foi instalado quando o SDK do Azure foi instalado.
Todos esses modelos sã o para aplicativos relacionados à web; nenhum deles pode ser

usado para criar um aplicativo do Windows 8. Observe que nenhum dos modelos oferece
suporte ao uso de JavaScript como linguagem do lado do servidor, mas você pode
selecionar um modelo de projeto da Web em Visual Basic ou C # e usar JavaScript do lado
do cliente (no navegador). Lembre-se de que você pode usar HTML5, CSS3 e JavaScript
como tecnologias do lado do cliente com qualquer um dos modelos de aplicativo da web.
Em um dos idiomas, você pode clicar no nó da Web para ver uma lista de modelos de
aplicativos da Web disponíveis. Você pode selecionar um modelo denominado ASP.NET
Empty Web Application para começar com um projeto de inicializaçã o quase vazio.
Examinando ASP.NET Empty Web Application
Depois de selecionar ASP.NET Empty Web Application, uma có pia do modelo é aberta na
janela do Solution Explorer no canto superior direito, conforme mostrado na Figura 1-
5. Esta janela contém um nó para o projeto (WebApplication1); um nó que faz referência à s
configuraçõ es do projeto, denominado My Project; e um nó que faz referência ao arquivo de
configuraçã o do projeto, denominado Web.config. Este projeto está quase vazio. Se você
pressionar F5 para construir e executar o aplicativo da web, ele nã o será executado. Você
deve adicionar uma pá gina da web ao projeto primeiro.
10
FIGURA 1-5 Aplicativo da Web vazio ASP.NET quase vazio
Por padrã o, a janela do Solution Explorer está no lado direito. Na janela do Solution
Explorer está a janela Propriedades. A janela Propriedades é sensível ao contexto e contém
as propriedades do item atualmente selecionado. As propriedades sã o visíveis nesta janela
e a maioria também pode ser configurada.
No lado esquerdo da tela está a caixa de ferramentas. Por padrã o, a caixa de ferramentas é

uma guia para a qual você pode apontar para abrir a janela. A caixa de ferramentas também
é sensível ao contexto, portanto, ferramentas diferentes estã o disponíveis com base no que
está sendo exibido na janela central.
Você pode adicionar uma pá gina da web ao projeto clicando com o botã o direito do mouse
no nó do projeto (WebApplication1) e navegando até Adicionar | Novo item | Pá gina
HTML. Se você nomear a pá gina default.html , o servidor da web automaticamente entrega
a pá gina a um navegador que navega para o seu site, mas nã o especifica o nome de uma
pá gina da web a ser recuperada. Depois de adicionar a pá gina da web, você pode inserir
algum texto, como uma mensagem do Hel o World, no corpo da pá gina da web. Quando
você pressiona F5, vê a mensagem no navegador.
Resumo da lição
■■ As ediçõ es gratuitas do Visual Studio 2012 sã o as ediçõ es Express: Visual Studio

Express 2012 para Web e Visual Studio Express 2012 para Windows 8. Você pode usar as
ediçõ es Express para trabalhar com HTML5, CSS3 e JavaScript.
■■ Use o Visual Studio Express 2012 for Web para desenvolver aplicativos da web. Use o
Visual Studio Express 2012 para Windows 8 para desenvolver aplicativos do Windows 8.
11
■■ Visual Studio Express 2012 para Windows 8 vem com Blend for Visual Studio 2012.
■■ O Blend for Visual Studio 2012 direciona o design da interface do usuá rio e deve ser
executado no Windows 8 para desenvolver aplicativos do Windows 8.
■■ Você pode alterar a referência da folha de estilo de um tema escuro para um tema claro,
alterando a referência ui-dark.css no arquivo default.html para ui-light.css.
Revisão da aula
Responda à s seguintes perguntas para testar seu conhecimento das informaçõ es desta
liçã o. Você pode encontrar as respostas a essas perguntas e explicaçõ es de por que cada
escolha de resposta está correta ou incorreta na seçã o “Respostas” no final deste capítulo.
1. Você gostaria de criar um aplicativo da web usando HTML5, JavaScript e CSS3.
Qual das seguintes ediçõ es do Visual Studio 2012 você pode usar? (Escolha todas as opçõ es
aplicá veis.) A. Visual Studio Professional 2012
B. Visual St udio Premium 2012
C. Visual Studio Ultimate 2012
D. Visual Studio Express 2012 para Web
E. Visual Studio Express 2012 para Windows 8

2. Você gostaria de criar um aplicativo do Windows 8 usando HTML5, JavaScript e
CSS3. Qual das seguintes ediçõ es do Visual Studi o 2012 você pode usar? (Escolha todas as
opçõ es aplicá veis)
A. Visual Studio Professional 2012
B. Visual Studio Premium 2012
D. Visual Studio Express 2012 para Web
E. Visual Studio Express 2012 para Windows 8
3. Você gostaria de criar aplicativos da Web e aplicativos da Windows Store do Windows 8

usando HTML5, JavaScript e CSS3, mas enquanto estiver aprendendo, nã o quer comprar o
Visual Studio 2012. Qual dos seguintes Visual Studio Você pode usar as ediçõ es de 2012
gratuitamente para cumprir seu objetivo?
A. Visual Studio Professional 2012
B. Visual Studio Premium 2012
D. Visual Studio Express 2012 para Web e Visual Studio Express 2012 para Windows 8
12
Lição 2: Mistura para Visual Studio 2012
O Blend está incluído no Visual Studio 2012 Express para Windows 8 e ajuda a projetar sua
interface de usuá rio. O Blend é um complemento de design para o Visual Studio e faz pelo
design o que o Visual Stu dio faz pelo có digo. A seguir estã o alguns recursos-chave do
Blend.
■■ Design visual Edite HTML, CSS e controles da Windows Store em um ambiente “o que

você vê é o que você obtém” (WYSIWYG). O que você vê no Blend é o que os usuá rios verã o
no Windows 8.
■■ Modo interativo ive Projete seu aplicativo alterando estados e definindo estilos. Você

nã o precisa compilar e executar continuamente. O Blend oferece a capacidade de usar o
modo interativo para que o desenvolvedor possa executar o aplicativo na superfície de
design até que o estado desejado seja alcançado. O desenvolvedor pode pausar o aplicativo
e, em seguida, estilizá -lo para o novo estado.
■■ Os controles de criação de aplicativos da Windows Store podem ser arrastados e
soltos na superfície de design. Depois disso, basta definir as propriedades e estilos.
■■ código poderosa ge remune- Mistura cuida de toda a sintaxe gerando concisa, có digo

confiá vel, previsível quando você adiciona um estilo ou elemento para a sua aplicaçã o.
■■ O Debugging Blend oferece depuraçã o visual de HTML e CSS. Ele tem uma regra virtual
chamada Winning Properties que mostra como um elemento obteve seu estilo efetivo a
partir da herança e cascata CSS.
■■ Identificar os principais recursos do Blend.
■■ Inicie um projeto usando o Blend.
O Blend é uma ferramenta interessante para designers e desenvolvedores que usarã o

HTML5, CSS3 e JavaScript para desenvolver aplicativos do Windows 8. O Blend também
suporta a criaçã o do Windows 8
Aplicativos da Windows Store usando XAML com sua escolha de linguagem de

programaçã o .NET .
A Figura 1-6 mostra a tela New Project, que tem os mesmos novos modelos de projeto do
Visual Studio Express 2012 para Windows 8.
Liçã o 2: Blend for Visual Studio 2012 CAPÍTULO 1
13
NOTA RUN CONSTRAINT PARA BLEND
O Blend for Visual S tudio 2012 deve ser executado no Windows 8 para desenvolver
aplicativos do Windows 8. Se você executar o Blend for Visual Studio 2012 no
Windows 7, não poderá desenvolver aplicativos para o Windows 8.
FIGURA 1-6 A tela Combinar Novo Projeto com os modelos de projeto

JavaScript. Selecionar Aplicativo em Branco cria o mesmo Aplicativo em Branco que foi
discutido na seçã o anterior. Observe o layout da tela. A Figura 1-7 mostra o layout da tela
Blend. À esquerda está o painel Ferramentas, onde você pode apontar para cada ícone para
ver uma dica de ferramenta que exibe o nome do comando. Logo à direita do painel
Ferramentas está uma coluna com duas janelas, uma sobre a outra.
Essas janelas têm guias que podem ser selecionadas para mostrar mais informaçõ es. A
janela superior esquerda contém as seguintes guias.
■■ Projetos contêm uma representaçã o baseada em á rvore de sua soluçã o, que pode

conter muitos projetos, cada projeto contendo recursos como arquivos e pastas.
■■ Ativos Contém uma biblioteca de recursos, como elementos HTML, controles JavaScript

e mídia que você usará em seu aplicativo.
■■ Regras de estilo Contém uma lista de folhas de estilo em cascata que sã o referenciadas

em seu projeto.
Em Regras de estilo está a janela Live DOM, que mostra uma representaçã o dinâ mica de sua
pá gina HTML.
14
FIGURA 1-7 O layout da tela do Blend
No meio da tela está sua á rea de trabalho principal, a prancheta . Na parte superior da
prancheta, há uma lista com guias de documentos abertos. Por padrã o, esta janela exibe a
ren-Key
Pá gina de definiçã o de termos. Observe que existem botõ es no canto superior direito que
podem ser usados para alterar a visualizaçã o.
A parte inferior central exibe as fontes default.html e default.css. Isso torna mais fá cil para
você alterar os arquivos e ver a saída renderizada. Além disso, ao usar as outras janelas
para modificar a pá gina renderizada, você verá as alteraçõ es refletidas nesses arquivos.
Liçã o 2: Blend for V isual Studio 2012 CAPÍTULO 1
15
A janela mais à direita contém as duas guias a seguir.
■■ Atributos HTML Exibe as propriedades do elemento HTML atualmente selecionado.
Você pode visualizar ou alterar essas configuraçõ es.
■■ Propriedades CSS Exibe as configuraçõ es de estilo para o elemento HTML atualmente

selecionado.
Você pode definir essas propriedades.
■■ Você deseja ser capaz de projetar seu aplicativo alterando estados e definindo
estilos.
Qual modo oferece esse recurso?
Resposta de verificação rápida
■■ Modo interativo. Você pode executar o aplicativo na superfície de design até que

o estado desejado seja alcançado. Você pode pausar o aplicativo e, em seguida,
estilizá-lo para o novo estado.
Painel de projetos
O painel Projetos fornece uma visualizaçã o de arquivo e pasta dos projetos em sua soluçã o ,
conforme mostrado na Figura 1-8. Você pode usar este painel para abrir arquivos para
ediçã o clicando duas vezes no arquivo. Você também pode clicar com o botã o direito em
qualquer arquivo ou pasta para ver opçõ es como Copiar, Excluir e Renomear.
FIGURA 1-8 O painel de projetos
Observe os ícones diferentes para a soluçã o, projeto, referências, pastas e arquivos e

observe que o arquivo default.html é sublinhado para indicar que é o arquivo de
inicializaçã o quando você executa o aplicativo. Na parte superior do painel Projetos, há
uma caixa de texto Pesquisar projetos, na qual você pode digitar o nome de um arquivo ou
pasta que deseja localizar. No projeto está uma pasta virtual chamada 16
Referências. É aqui que você adiciona referências a CSS e JavaScript. O projeto também
contém o arquivo package.manifest, que contém todas as configuraçõ es do projeto,
incluindo a configuraçã o da pá gina inicial.
Painel de ativos
O painel Assets lista todos os elementos HTML, controles e mídia que você pode adicionar a
uma pá gina HTML aberta na prancheta, conforme mostrado na Figura 1-9. Embora o painel
Ativos liste todos os controles disponíveis em seu projeto do Blend, os controles usados
mais recentemente aparecem no painel Ferramentas .
FIGURA 1-9 O painel Ativos mostrado ao construir um aplicativo da Windows Store com
HTML
Abra o painel Ativos clicando no ícone Ativos na parte inferior do painel Ferramentas ou
clicando em Ativos no menu do Windows.
Painel do dispositivo
Use o painel Dispositivo para configurar sua tela de forma que você possa visualizar sua
aplicaçã o com precisã o em uma variedade de telas, conforme mostrado na Figura 1-
10. Você pode selecionar as seguintes opçõ es de exibiçã o para o seu aplicativo.
■■ Exibir O modo de renderizaçã o quando o aplicativo é executado. As opçõ es sã o
paisagem, preenchido, instantâ neo e retrato.
17
■■ Tela O tamanho da tela e a resoluçã o na qual renderizar. Use isso para simular a

renderizaçã o em telas maiores ou menores para ver se o seu aplicativo é renderizado
corretamente.
■■ Mostrar cromo Quando selecionado, mostra uma tela de tablet simulada em torno da

borda do aplicativo.
■■ Substituir escala Quando selecionada, emula a escala de exibiçã o integrada do

dispositivo.
■■ Destino de implantação O dispositivo a ser implantado quando o aplicativo é
executado.
FIGURA 1-10 O painel do dispositivo
Painel de regras de estilo
O painel Regras de estilo, mostrado na Figura 1-11, lista todas as folhas de estilo anexadas
ao documento atual. Em cada folha de estilo, há uma lista de todos os estilos
definidos. Além disso, o painel Regras de estilo contém uma caixa de texto na qual você
pode inserir critérios de pesquisa ao localizar um estilo.
FIGURA 1-11 O painel de regras de estilo contendo uma lista de folhas de estilo

anexadas 18
Você pode clicar nos sinais de mais no lado direito do painel para adicionar uma nova regra
de estilo naquele local. A linha amarela indica onde novos estilos serã o criados se um local
nã o for especificado. As regras de estilo esmaecidas sã o definidas, mas nã o sã o usadas no
documento atual.
Painel DOM ao vivo
O painel Live DOM exibe a estrutura do documento atual como uma representaçã o
hierá rquica , conforme mostrado na Figura 1-12. Com o painel Live DOM, você pode
selecionar elementos e ajustar suas regras de estilo. A visualizaçã o Live DOM fornece
atualizaçã o automá tica conforme o estado do aplicativo muda.
FIGURA 1-12 O painel Live DOM exibindo uma representaçã o hierá rquica do documento
atual O painel Live DOM exibe os nó s usando seu ID se um ID for atribuído ou usando o
nome da tag se nenhum ID for atribuído. Você pode controlar a visibilidade de qualquer nó
clicando no ícone de olho no lado direito do painel. Isso pode ser ú til quando você tem
camadas de elementos empilhados uns sobre os outros.
Assim como no Visual Studio, você pode pressionar F5 para executar o aplicativo. O Blend
possui muitos recursos que você pode aprender usando a ajuda integrada.
Resumo da lição
■■ O modo interativo permite que você execute o aplicativo para compilar no estado
desejado e, em seguida, use o aplicativo e defina os estilos do aplicativo com base no estado
atual.
■■ O painel Ativos contém uma lista de todos os ativos disponíveis no projeto.
■■ O painel Projetos contém uma visualizaçã o de arquivos e pastas dos projetos na soluçã o
atual .
■■ O painel Regras de estilo contém uma lista de todas as folhas de estilo anexadas ao
documento atual.
19
■■ O painel Dispositivo permite que você execute o aplicativo usando simulaçõ es de

diferentes tamanhos de tela e orientaçõ es.
■■ O painel Live DOM permite que você selecione um elemento e aplique regras de estilo a
ele.
Revisão da aula
1. Você gostaria de criar um aplicativo do Windows 8 usando Blend e HTML5, JavaScript e

CSS3. Qual recurso do Blend permite que você exiba um aplicativo quando ele atinge um
estado desejado para que possa definir as regras de estilo para a pá gina e seus controles
nesse estado? (Escolha todas as opçõ es aplicá veis)
A. Painel de ativos
B. Painel de projetos
C. Design Visual
D. Modo interativo
2. Em qual painel você pode ver uma visã o estruturada hierá rquica do DOM?
A. DOM ao vivo
B. Projetos
C. Ativos
D. Dispositivo
3. Qual painel você pode usar para acessar uma lista de elementos, controles e mídia HTML
que podem ser adicionados a uma pá gina HTML aberta na prancheta?
A. Projetos
B. Ativos
C. Dispositivo
D. DOM ao vivo
Pratica exercícios
Se você encontrar um problema ao concluir qualquer um desses exercícios, os projetos

concluídos podem ser instalados da pasta Exercícios de prá tica que é fornecida com o
conteú do complementar.
20
CAPÍTULO 1 Introduçã o ao Visual Studio 2012 e Blend for Visu al Studio 2012
Exercício 1: Hel o World com Visual Studio Express 2012 para Windows 8
Neste exercício, você cria um aplicativo HTML5 e JavaScript simples do Hel o World usando
o Visual Studio Express 2012 para Windows 8. Essa prá tica, como todos os aplicativos do
Hel o World , tem como objetivo ajudá -lo a começar criando um aplicativo mínimo. Em
exercícios posteriores, você terá mais exposiçã o ao Visual Studio. Neste exercício, você usa
HTML5 para exibir “Hel o Visual Studio for Windows 8” na tela.
1. Se você nã o instalou o Visual Studio Express 2012 para Windows 8, instale-o agora. Você
pode fazer o download no site da Microsoft.
2. Inicie o Visual Studio. Clique em Arquivo e escolha Novo Projeto para exibir a caixa de
diá logo Novo Projeto. Navegue até Instalado | Modelos | JavaScript | Loja do
Windows. Selecione Aplicativo em branco.
3. Defina o nome do seu aplicativo como HelloVisualStudioForWin8 .

4. Selecione um local para o seu aplicativo.
5. Defina o nome da soluçã o como HelloVisualStudioForWin8Solution .
6. Certifique-se de manter a caixa de seleçã o Criar diretó rio para soluçã o marcada .
7. Clique em OK para criar seu novo projeto.
8. Quando o aplicativo é criado, o arquivo default.js é exibido com algum có digo de modelo.
Este có digo é abordado posteriormente e nã o há necessidade de alterá -lo agora.
9. Abra o arquivo default.html .
Ele contém HTML do modelo.
10. Para ver o conteú do padrã o, pressione F5 para iniciar a depuraçã o do aplicativo.
Você deve ver uma tela preta e, no canto superior esquerdo, uma mensagem informando:
“O conteú do vai aqui.”
11. Volte para o Visual Studio pressionando Alt + Tab.
A barra de título diz (em execuçã o).
12. Pressione Shift + F5 para interromper a depuraçã o.
Shift + F5 funciona apenas quando o Visual Studio tem o foco; ele nã o funciona quando o
aplicativo em execuçã o tem o foco.
13. No arquivo default.html, substitua a mensagem “Conteú do vai aqui” por Hello

Visual Studio para Windows 8 .
14. Substitua a referência a ui-dark.css por ui-light.css.
Seu HTML deve ter a seguinte aparência.
<! DOCTYPE html>
<html>
<head>
<title> HelloWorldForWin8 </title>

Exercícios de prá tica CAPÍTULO 1
21
<link href = "// Microsoft.WinJS.1.0 / css / ui-light.css" rel = "stylesheet" />
<! - Referências HelloWorld ->
<script src = "/ js / default.js"> </script>
</head>
<body>
< p> Hello Visual Studio para Windows 8 </p>
</body>
</html>
15. Pressione F5 para iniciar a depuraçã o.
A tela é branca porque agora você faz referência ao arquivo ui-light.css em vez do arquivo
ui-dark.css. A tela também exibe o Hel o Visual Studio For Windows 8.
C ongratulations-de ter escrito seu primeiro aplicativo Windows 8 usando HTML5
tecnologias!
para web
Neste exercício, você cria um aplicativo simples HTML5 e JavaScript Hel o World usando o
Vis ual Studio Express 2012 for Web. Esta prá tica, como todos os aplicativos Hel o World,
tem como objetivo ajudá -lo a começar criando um aplicativo mínimo. Em exercícios
posteriores, você terá mais exposiçã o ao Visual Studio. Neste exercício, você cria um novo
projeto no V isual Studio Express 2012 for Web e usa HTML5 para exibir “Hel o Visual
Studio for Web” na tela.
OBSERVE NENHUM CÓDIGO DE SERVIDOR NESTE EXERCÍCIO
Você não escreverá nenhum código de servidor neste exercício, portanto, não
importa se você seleciona Visual Basic ou Visual C # ao iniciar o novo projeto.
1. Se você nã o instalou o Visual Studio Express 2012 for Web, faça-o agora. Você pode fazer
o download no site da Microsoft.
2. Inicie o Visual Studio. Clique em Arquivo e escolha Novo Projeto para exibir a caixa de
diá logo Novo Projeto. Navegue até Instalado | Modelos | Visual Basic | Rede. Selecione o
aplicativo de formulá rio da Web ASP.NET.
3. Defina o nome do seu aplicativo como HelloVisualStudioForWeb .
5. Defina o nome da soluçã o como HelloVisualStudioForWeb Solution .
6. Certifique-se de manter a caixa de seleçã o Criar diretó rio para soluçã o selecionada.
22
8. Quando o aplicativo for criado, a pá gina default.aspx será exibida com algum có digo de
modelo.
9. Na janela Solution Explorer, construa o projeto clicando com o botã o direito do mouse no
nó do projeto e escolhendo Build.
10. Para ver o conteú do padrã o deste modelo, pressione F5 para iniciar a depuraçã o do
aplicativo.
Você deverá ver uma tela sofisticada com informaçõ es sobre como começar, além de outras
informaçõ es ú teis.
11. Volte para o Visual Studio pressionando Alt + Tab.

A barra de título diz (em execuçã o).
Observe que Shift + F5 funciona apenas quando o Visual Studio tem o foco. Shift + F5 nã o
funciona quando o aplicativo em execuçã o tem o foco.
13. Exclua o arquivo default.aspx clicando com o botã o direito neste arquivo na janela do
Gerenciador de Soluçõ es, escolhendo Excluir e, em seguida, clicando em OK.
14. Na janela Solution Explorer, adicione um arquivo default.html clicando com o botã o
direito do mouse no nó do projeto. Clique em Adicionar e escolha HTML. Nomeie a
pá gina default.html .
15. No arquivo default.html, coloque o texto Hello Visual Studio for Web entre o
tags < body > e < / body >.
16. No arquivo default.html, coloque o texto HelloVisualStudioForWeb entre

as tags < title > e < / title >.
<! DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title > HelloVisualStudioForWeb </title>
</head>
<body>
Olá Visual Studio para Web
</body>
</html>
17. Na janela Solution Explorer, defina o arquivo default.html como o arquivo de

inicializaçã o clicando com o botã o direito do mouse no arquivo default.html e escolhendo
Definir como pá gina inicial.
18. Pressione F5 para iniciar a depuraçã o.

A tela agora exibe o Hel o Visual Studio For Web. Parabéns - você escreveu seu primeiro
aplicativo da web usando tecnologias HTML5!
23
Exercício 3: Hel o World com Blend
Neste exercício, você cria um aplicativo simples HTML5 e JavaScript Hel o World usando o
Blend. Esta prá tica, como todos os aplicativos Hel o World, tem como objetivo ajudá -lo a
começar a criar um aplicativo mínimo. Nos exercícios posteriores, você obtém mais
exposiçã o ao Blend. Neste exercício, você cria um novo projeto no Blend e usa HTML5 para
exibir “Hel o World” na tela.
1. Se você nã o instalou o Blend, faça-o agora. Lembre-se de que o Blend é instalado

automaticamente quando você instala o Visual Studio Express 2012 para Windows 8. Você
pode fazer o download no site da Microsoft.
2. Para iniciar o Blend, clique em New Project para exibir a caixa de diá logo New
Project. Selecione a categoria HTML (Windows Store) no painel esquerdo e selecione
Aplicativo em branco no painel direito.
3. Defina o nome do seu aplicativo como HelloBlend .
5. Clique em OK para criar seu novo projeto .
Quando o aplicativo é criado, o arquivo default.html é exibido.
6. Para ver o conteú do padrã o, pressione F5 para iniciar a depuraçã o do aplicativo.
Você deve ver uma tela preta e, no canto superior esquerdo, uma mensagem informando:
“O conteú do vai aqui.”
7. Feche o aplicativo em execuçã o pressionando Alt + F4.
8. Se Blend nã o for exibido, volte para Blend pressionando Alt + Tab.
9. No arquivo default.html, clique duas vezes na mensagem “Content Goes Here” e substitua
o texto por Hello from Blend .
Você vê a mudança na janela default.html visualizaçã o do có digo-fonte na parte inferior da

tela.
10. Substitua a referência a ui-dark.css por ui-light.css.
<! DOCTYPE html>
<html>
<head>
<title> HelloBlend </title>
<link href = "// Microsoft.WinJS.1.0 / css / ui-light.css" rel = "stylesheet" />
<! - Referências do HelloBle nd ->
</head>
<body>
24
<p> Olá do Blend </p>
</body>
</ html >
11. Pressione F5 para iniciar o aplicativo.

Observe que a tela está branca porque agora você faz referência ao arquivo ui-light.css em
vez do arquivo ui-dark.css. A tela agora exibe Hel o From Blend. Parabéns - você escreveu
um aplicativo para Windows 8 usando tecnologias HTML5 com o Blend!
Exercícios de prática sugeridos
Os exercícios adicionais a seguir foram elaborados para lhe dar mais oportunidades de
praticar o que aprendeu e ajudá -lo a dominar com sucesso as liçõ es apresentadas neste
capítulo.
■■ Exercício 1 Saiba mais sobre o Visual Studio Express 2012 for Web criando novos
projetos a partir de cada um dos modelos de projeto incluídos. Depois de criar cada projeto,
tente adicionar Hel o World e execute o aplicativo para ver como o projeto se parece e se
comporta.
■ ■ Exercício 2 Saiba mais sobre o Visual Studio Express 2012 para Windows 8 criando
novos projetos a partir de cada um dos modelos de projeto incluídos. Depois de criar cada
projeto, tente adicionar Hel o World e execute o aplicativo para ver como o projeto se
parece e se comporta .
■■ Exercício 3 Aprenda mais sobre o Blend criando novos projetos a partir de cada um dos
modelos de projeto incluídos. Depois de criar cada projeto, tente adicionar Hel o World e
execute o aplicativo para ver como o projeto se parece e se comporta.
Sugeriu prá tica exerci ses CAPÍTULO 1
25
Respostas
Esta seçã o contém as respostas à s perguntas de revisã o da liçã o neste capítulo.
Lição 1
1. Respostas corretas: A, B, C e D
A. Correto: Visual Studio Professional 2012 fornece modelos da web para a criaçã o de

aplicativos da web.
B. Correto: Visual Studio Premium 2012 fornece modelos da web para a criaçã o de

aplicativos da web.
C. Correto: Visual Studio Ultimate 2012 fornece modelos da web para a criaçã o de

aplicativos da web.
D. Correto: Visual Studio Express 2012 for Web fornece modelos da web para a criaçã o de
aplicativos da web apenas.
E. Incorreto: o Visual Studio Express 2012 para Windows 8 fornece t emplates para a
construçã o de aplicativos do Windows 8 apenas.
2. Respostas corretas: A, B, C e E
A. Correto: Visual Studio Professional 2012 fornece modelos da web para a criaçã o de

aplicativos do Windows 8.
B. Correto: Visual Studio Premium 2012 fornece modelos da web para a criaçã o de

C. Correto: Visual Studio Ultimate 2012 fornece modelos da web para a criaçã o de

D. Incorreto: o Visual Studio Express 2012 for Web fornece modelos da web apenas para a
criaçã o de aplicativos da web.
E. Correto : Visual Studio Express 2012 para Windows 8 fornece modelos para construir
aplicativos do Windows 8 apenas.
3. Resposta correta: D
A. Incorreto: o Visual Studio Professional 2012 permite que você crie aplicativos da Web e
do Windows 8, mas nã o é gratuito.
B. Incorreto : Visual Studio Premium 2012 permite que você crie web e Windows 8
aplicativos, mas nã o é gratuito.
C. Incorreto: Visual Studio Ultimate 2012 permite que você crie web e Windows 8
aplicativos, mas nã o é gratuito.
D. Correto: o Visual Studio Expr ess 2012 for Web fornece modelos da web para a criaçã o
de aplicativos da web, e o Visual Studio Express 2012 para Windows 8 fornece modelos
para a criaçã o de aplicativos do Windows 8. Ambos sã o gratuitos.
26
Lição 2
1. Respostas corretas: C e D
A. Incorreto: o painel Ativos permite que você acesse uma lista de elementos, controles e
mídia HTML que podem ser adicionados a uma pá gina HTML aberta na prancheta.
B. Incorreto: O painel Projetos fornece uma visualizaçã o de arquivos e pastas dos projetos

na soluçã o atual.
C. Correto: Com o Visual Design, o que você vê no Blend é o que os usuá rios verã o no
Windows 8.
D. Correto: o modo interativo permite que você execute o aplicativo na superfície de

design até que o estado desejado seja alcançado. Você pode pausar o aplicativo e, em
seguida, estilizá -lo para o novo estado.
2. Resposta correta: A
A. Correto: o Live DOM exibe a estrutura do documento atual como uma representaçã o
hierá rquica. Você pode usar o painel Live DOM para selecionar elementos e ajustar suas
regras de estilo.
B. Incorreto: O painel Projetos fornece uma visualizaçã o de arquivos e pastas dos projetos
em sua soluçã o.
C. Incorreto: O painel Ativos lista todos os elementos HTML, controles e mídia que você
pode adicionar a uma pá gina HTML aberta na prancheta.
D. Incorreto: O painel Dispositivo permite que você configure seu monitor para que possa
visualizar seu aplicativo com precisã o em uma variedade de monitores.
3. Resposta correta: B
A. Incorreto: O painel Projetos fornece uma visualizaçã o de arquivos e pastas dos projetos
em sua soluçã o.
B. Correto: O painel Ativos lista todos os elementos HTML, controles e mídia que você pode
adicionar a uma pá gina HTML aberta na prancheta.
C. Incorreto: O painel Dispositivo permite que você configure seu monitor para que possa
visualizar seu aplicativo com precisã o em uma variedade de monitores.
D. Incorreto: O painel Live DOM exibe a estrutura do documento atual como uma
representaçã o hierá rquica. Você pode usar o painel Live DOM para selecionar elementos e
ajustar suas regras de estilo.
Respostas CAPÍTULO 1
27
CAPÍTULO 2
Primeiros passos com HTML5
Bem-vindo ao mundo do HTML5, JavaScript e CSS3! Este capítulo é uma introduçã o ao

HTML5. O pró ximo capítulo faz o mesmo com o JavaScript, e o capítulo seguinte o
familiariza com o CSS3.
Agora que instalou o Visual Studio 2012 e o Blend, você está pronto para construir sua base
de conhecimento aprendendo um pouco de HTML bá sico. Este capítulo apresenta uma
grande quantidade de conteú do HTML. Embora muito do conteú do deste capítulo exista em
versõ es anteriores do HTML, todo o conteú do deste capítulo faz parte da especificaçã o do
HTML 5.
■■ Liçã o 1: Apresentando HTML5 29
■■ Liçã o 2: Incorporaçã o de conteú do 44
Lição 1: Apresentando HTML5
Capítulo 1, “Introduçã o ao Visual Studio 2012 e Blend for Visual Studio 2012,”
apresentou uma breve visã o geral das ediçõ es do Visual Studio e do Blend . Isso foi
necessá rio para apresentá -lo à s ferramentas que serã o usadas neste livro. Esta liçã o
apresenta uma visã o geral bastante detalhada do HTML5 e cobre muitos dos fundamentos
do HTML que existiam antes do HTML5, mas ainda fazem parte da especificaçã o do
HTML5 .
29
■■ Compreenda a histó ria do HTML5.
■■ Crie um documento HTML5 e adicione elementos e atributos a ele.
■■ Adicionar comentá rios a um documento HTML5.
■■ Use caracteres especiais em seu documento HTML.
HTML é um acrô nimo para Hypertext Markup Language, que é a linguagem que usamos
para criar pá ginas da web desde que as primeiras pá ginas chegaram na web. As raízes do
HTML sã o de uma chave mais antiga
Linguagem de marcaçã o de termos que foi usada na publicaçã o de documentos, chamada

SGML (Standard Generalized Markup Language). Como SGML, HTML usa tags para fornecer
recursos de formataçã o, como
< b > está em negrito < / b >, o que faria com que o texto dentro da tag inicial b e final fosse
renderizado como texto em negrito. Observe a diferença entre a primeira e a segunda tag; a
segunda tag tem uma barra (/) para indicar que é uma tag de finalizaçã o. Muitas, mas nem
todas as tags HTML possuem uma tag final correspondente . Tags HTML, como < br > e
< img > nã o têm etiquetas que terminam porque o < br > apenas prestado uma quebra de
linha, eo < img tag> apenas prestado uma imagem.
Um aspecto interessante do HTML e seu relacionamento com os navegadores é que os

navegadores foram projetados para serem compatíveis com versõ es anteriores e
posteriores. Criar um navegador compatível com versõ es anteriores é relativamente fá cil
porque o domínio do problema é conhecido, mas como a compatibilidade com versõ es
anteriores é realizada? Os navegadores foram criados para ignorar as tags que eles
nã o reconheceram. Por exemplo, se um navegador encontrasse uma tag < xyz > que nã o
reconhecesse, ele ignoraria a tag como se ela nã o existisse.
Embora o HTML tenha servido ao seu propó sito por um bom tempo, as pessoas queriam
mais. Outra tecnologia em evoluçã o, chamada XML (eXtensible Markup Language), estava
se tornando popular. XML
se parece muito com HTML porque ambos os idiomas usam tags. No entanto, existem
vá rias grandes diferenças. Em primeiro lugar, o XML sempre requer tags finais
correspondentes para cada tag, embora você possa usar uma notaçã o de atalho para
denotar uma tag inicial e uma tag final juntas. Outra diferença é que o HTML tem um
conjunto muito específico de nomes de marcas e cada uma dessas marcas denota um
recurso de formataçã o que deve ser aplicado à pá gina da web renderizada. XML nã o tem
um conjunto definido de nomes de tag, entã o você cria seus pró prios nomes de tag, e as
tags podem representar qualquer coisa. As tags XML sã o típicas tags de metadados y: tags
que descrevem os dados que estã o dentro da tag. Embora existam muitas outras diferenças,
uma outra grande diferença é que o XML usa a tecnologia XML Schema Definition (XSD),
que valida o formato de um documento XML para garantir que todos os aspectos de um
documento sejam vá lidos antes de processar o documento XML. A falta de estrutura rígida
do HTML impediu a criaçã o de uma tecnologia como o XSD, que poderia validar
documentos HTML.
O World Wide Web Consortium , também conhecido como W3C ( http://ww.w3c.org ), é

responsá vel pelo desenvolvimento de padrõ es abertos para a web. O W3C introduziu o
XHTML para resolver a Chave
Termos
30
CAPÍTULO 2 Introduçã o ao HTML5

problemas em HTML, que foi até a versã o 4. XHTML é uma especificaçã o baseada em XML
que apertou a especificaçã o HTML para fazer HTML aderir à s regras XML que descrevem
um documento -formed wel, como ter uma tag final correspondente para cada startin g
marcaçã o. Isso significa que os documentos XHTML podem ser validados usando arquivos
XSD e podem ser editados usando ferramentas XML.
Embora o XHTML tenha resolvido alguns problemas, outros ainda precisavam de uma
soluçã o. Havia uma necessidade cada vez maior de multimídia na web. As empresas
queriam o site mais chamativo (trocadilhos). Cascading Style Sheets (CSS) fornecia suporte
para adicionar estilos como cores e fontes de forma consistente em um site, mas as
empresas queriam mais. Eles queriam que suas pá ginas da web fossem altamente
interativas , com vídeo e animaçõ es. Os navegadores adicionaram suporte programá vel ao
fornecer JavaScript, mas as primeiras versõ es do JavaScript eram lentas e difíceis de
programar. Os navegadores se tornaram extensíveis ao fornecer uma interface de
programaçã o de aplicativos (API) que permitiria que terceiros criassem plug-ins que
pudessem ser executados no ambiente do navegador. Um desses plug-ins é o Flash, que tem
uma base instalada muito grande. O Flash fornece um ambiente de desenvolvimento que
pode ser usado para criar uma rica experiência do usuá rio. Embora plug-ins de
terceiros tenham resolvido a necessidade imediata de tecnologia para criar sites
chamativos, ainda havia uma necessidade de integraçã o mais estreita de multimídia com o
navegador, especialmente em pequenos dispositivos.
HTML5 nã o se origina de XHTML; O HTML5 se origina do HTML 4.01. Como regra, no

entanto, a aplicaçã o de regras XHTML ao HTML5 tornará sua pá gina da web mais
compatível com uma variedade maior de navegadores e leitores, geradores e validadores
de pá ginas da web. Este livro tenta ser o mais compatível com a maioria das tecnologias.
HTML5 representa um HTML, CSS e JavaScript reinventado de uma forma que resolve a
necessidade de sites ricos e interativos que podem reproduzir á udio e vídeo e dar suporte a
animaçõ es de dentro do navegador sem a necessidade de plug-ins. O HTML5 contém a
maioria das tags do HTML 4.01, mas muitas das tags foram redefinidas para serem tags
semâ nticas.
Apresentando a marcação semântica
O HTML5 enfatiza a separaçã o de estrutura, apresentaçã o e comportamento, uma boa

prá tica a ser seguida. A semântica é definida como o estudo do significado
das expressõ es lingü ísticas . No contexto do HTML, isso significa que as tags fornecem
significado ao conteú do do documento HTML. Tags fazem a chave
Os termos nã o fornecem apresentaçã o; eles fornecem significado.
As tags HTML fornecem uma estrutura significativa, mas nã o fornecem

apresentaçã o. Lembre-se de que a separaçã o é realizada fornecendo estrutura em seu
documento HTML5, mantendo a apresentaçã o em sua folha de estilo CSS3 e mantendo o
comportamento em seu arquivo JavaScrip t.
Como você pode manter a separaçã o quando existem tags como < b > (negrito) e < i >
(itá lico)?
Afinal, essas tags têm apresentaçã o em suas definiçõ es. O W3C agora define a tag < b >
como “um intervalo de texto deslocado de seu conteú do circundante sem veicular qualquer
ênfase ou importâ ncia extra, e para o qual a apresentaçã o tipográ fica convencional é texto
em negrito; por exemplo, palavras-chave em um resumo de documento ou nomes de
produtos em uma resenha. ” O W3C agora define a tag < i > como “um intervalo de texto
deslocado de seu conteú do circundante sem transmitir qualquer ênfase ou importâ ncia
extra, e para a qual a apresentaçã o tipográ fica convencional Liçã o 1: Introduçã o ao
HTML5 CAPÍTULO 2
31
é texto em itá lico; por exemplo, uma designaçã o taxonô mica, um termo técnico, uma frase
idiomá tica de outro idioma, um pensamento ou um nome de navio. ” Essas tags precisam
ser renderizadas como negrito e itá lico? De forma alguma, e as novas definiçõ es dessas tags
tentam especificar isso.
O Capítulo 5, “Mais HTML5,” revisita a noçã o de marcaçã o semâ ntica. F ou agora, lembre-se
de que suas tags HTML deve ser usado para fornecer a estrutura, nã o apresentaçã o. A
apresentaçã o é o trabalho da folha de estilo em cascata.
Um elemento é composto de uma marca inicial, uma marca final e o conteú do entre as
marcas. Considere o seguinte fragmento de HTML.
Chave
Termos <div>
A rá pida <b> raposa </b> marrom pula sobre o cachorro preguiçoso
</div>
Neste exemplo, a tag < div > é apenas a tag inicial na primeira linha. O elemento < div > é a
amostra completa, que inclui conteú do que também contém
um elemento < b >. O elemento < b > consiste na tag inicial < b >, no conteú do, que é a
palavra “raposa”, e na tag final < / b >.
O elemento < div > cria uma seçã o em seu documento. É comum usar elementos < div >

para denotar uma seçã o à qual você anexará um estilo. Você verá muitos usos
do elemento < div > neste livro e na maioria dos sites.
Os nomes de tag HTML nã o diferenciam maiú sculas de minú sculas. Se você estiver
trabalhando em uma pá gina da web mais antiga, poderá notar que ela foi escrita com
nomes de tag em maiú sculas. Os navegadores tratarã o uma tag < b > e uma tag < B > da
mesma forma.
Para estar em conformidade com o maior nú mero possível de padrõ es, considere o uso
de nomes de tag em minú sculas para qualquer pá gina da web que você criar por
convençã o, pois o W3C recomenda nomes de tag em minú sculas em HTML 4.01 e requer
nomes de tag em minú sculas em XHTML. Embora o HTML5 nã o exija nomes de tag em
minú sculas, nomes de tag em minú sculas sã o recomendados .
Referência de elemento
O HTML5 tem mais de 100 elementos definidos que você pode usar para criar pá ginas da
web e aplicativos ricos. O W3C define a seguinte lista desses elementos com uma breve
descriçã o.
Observe que a brevidade é um substituto para 100 por cento de precisã o nessas descriçõ es.
■■ <a> Hyperlink
■■ <abbr> Abreviaçã o
■■ <endereço> Informaçõ es de contato
■■ <area> Regiã o do mapa de imagem
■■ <artigo> Seçã o independente
■■ Seçã o auxiliar <ao lado>
■■ <audio> Fluxo de á udio
32
■■ <b> Texto em negrito
■■ <base> URI de base do documento
■■ <bb> botã o do navegador
■■ <bdo> Substituiçã o de texto bidirecional
■■ <blockquote> Citação longa
■■ <body> Conteú do principal
■■ <br> Quebra de linha
■■ <button> Controle de botã o de pressã o
■■ <canvas> Tela Bitma p
■■ <legenda> Legenda da tabela
■■ <cite> Citaçã o
■■ <code> Fragmento de có digo
■■ <col> Coluna da tabela
■■ <colgroup> Grupo de colunas da tabela
■■ <comando> Comando que um usuá rio pode invocar
■■ <datagrid> Á rvore interativa, lista ou dados tabulares
■■ <datalist> Valores de controle predefinidos
■■ <dd> Descriçã o da definiçã o
■■ exclusã o <del>
■■ <detalhes> Informaçõ es adicionais
■■ <dfn> Definindo instâ ncia de um termo
■■ <dialog> Conversa
■■ <div> divi genérico sion
■■ <dl> lista de descriçã o
■■ <dt> Termo de descriçã o
■■ <em> Ê nfase no estresse

■■ <embed> aplicativo integrado
■■ <fieldset> Grupo de controle de formulá rio
■■ <figura> Uma figura com uma legenda
■■ <rodapé> Rodapé da seçã o
■■ Formulá rio <form>
■■ <h1> Cabeçalho nível 1
■■ <h2> Nível de cabeçalho 2
Liçã o 1: Apresentando HTML5 CAPÍTULO 2
33
■■ <head> Cabeçalho do documento
■■ <header> Cabeçalho da seçã o
■■ <hr> Separador
■■ <html> Raiz do documento
■■ <i> Texto em itá lico
■■ <iframe> Frame inline
■■ <img> Imagem
■■ <entrada> Controle de formulá rio
■■ <ins> Inserçã o
■■ <kbd> Entrada do usuá rio
■■ <label> Ró tulo de controle do formulá rio

■■ <legenda> Título ou legenda explicativa
■■ <li> item da lista
■■ <link> Link para recursos
■■ <map> Mapa de imagem do lado do cliente
■■ <mark> Texto marcado ou destacado
■■ <menu> Menu de comando
■■ <meta> Metadados
■■ <meter> Mediçã o escalar
■■ Navegaçã o <nav>
■■ <noscript> Conteú do alternativo sem suporte de script
■■ <objeto> Recurso incorporado genérico
■■ <ol> Lista ordenada
■■ <optgroup> Grupo de opçõ es
■■ <opção> Escolha de seleçã o
■■ <output> Controle de saída
■■ <p> Pará grafo
■■ <param> Parâ metro de plug-in
■■ <pre> Texto pré- formatado
■■ <progress> Progresso de uma tarefa
■■ <q> Cotaçã o inline
■■ <rp> parêntese Ruby
■■ <rt> Texto Ruby
34

■■ <ruby> anotaçã o Ruby
■■ <samp> Amostra de saída
■■ <script> Escrito vinculado ou incorporado
■■ <seção> Seçã o do documento
■■ <select> Controle de seleçã o
■■ <small> impressã o pequeno
■■ <source> Recurso de mídia
■■ <span> contêiner inline genérico
■■ <strong> Grande importâ ncia
■■ <style> Folha de estilo incorporada
■■ <sub> Subscrito
■■ <sup> Sobrescrito
■■ <table> Tabela
■■ <tbody> Corpo da mesa
■■ <td> Tabela cel
■■ <textarea> Controle de texto multilinha
■■ <tfoot> Rodapé da tabela
■■ <th> Célula do cabeçalho da tabela
■■ <thead> Cabeçalho da mesa

■■ <hora> Data e / ou hora
■■ <title> Título do documento
■■ <tr> Tabela r ow
■■ <ul> Lista nã o ordenada
■■ <var> Variá vel
■■ <vídeo> Vídeo ou filme
■■ <wbr> Opcional y divide uma palavra grande neste elemento Muitos desses elementos

sã o discutidos em mais detalhes posteriormente neste livro.
Adicionando atributos aos elementos
A tag inicial pode conter dados adicionais na forma de um atributo. Um atributo é um par

nome = ”valor” em que o nome é ú nico dentro da tag e o valor é sempre colocado dentro da
chave
Os termos podem ser aspas simples ou duplas. Você pode adicionar muitos atributos à tag
inicial. Você também pode alternar usando aspas simples e duplas, o que é especialmente
benéfico quando você precisa inserir aspas simples ou duplas no valor do atributo. Você
também pode ter atributos booleanos que contêm o nome do atributo, mas nenhum valor .
35
Aqui está um exemplo de um elemento que possui atributos.

<div id = "main" class = 'mainContent'> </div> Neste exemplo, id e class sã o atributos. O
atributo id identifica exclusivamente um elemento em um documento HTML. O atributo
class especifica um estilo CSS nomeado que deve ser aplicado ao elemento.
Trabalho com atributos booleanos
Alguns atributos sã o atributos booleanos , o que significa que a mera presença do atributo

indica que uma opçã o está definida.
Chave
Termos
Alguns exemplos de atributos booleanos sã o os seguintes.
■■ marcado Usado com a caixa de seleçã o e o botã o de opçã o para indicar a seleçã o
■■ selecionado Usado para indicar qual opçã o está selecionada em uma lista suspensa ou
lista de seleçã o
■■ desativado Usado para desativar a entrada, á rea de texto , botã o, selecionar, opçã o ou

grupo opt
■■ somente leitura Usado para evitar que o usuá rio digite dados em uma caixa de texto,
senha ou á rea de texto
Existem diferentes maneiras de indicar um atributo booleano. Uma maneira é usar a forma

minimizada, pela qual você apenas adiciona o nome a ttribute na tag inicial, mas nã o
fornece um valor. Aqui está um exemplo de forma minimizada ao definir uma caixa de
seleçã o como selecionada.
<input type = "checkbox" name = "fruit" value = "Apple" checked /> Outra maneira de
indicar um atributo booleano é usar a forma qu otada, na qual você fornece um valor vazio
ou o nome do atributo como seu valor. Aqui estã o alguns exemplos de ambos.
<input type = "checkbox" name = "fruit" value = "Apple" CHECK = '' />
<input type = "checkbox" name = "fruit" value = "Apple" checks = 'checks ' /> O ú ltimo
parece redundante, mas é geralmente considerado a forma preferida de representar o
atributo booleano. Se você usar jQuery, que é um conjunto de ferramentas JavaScript de
terceiros, verá que funciona melhor com esse exemplo redundante.
■■ Você está usando um elemento < botão > e deseja que ele seja desativado até que
alguns critérios sejam atendidos. Qual é a melhor maneira de desabilitar
o elemento < button > quando a página é carregada?
■■ Escreva o elemento < botão > usando a sintaxe entre aspas e atribua o nome do

atributo ao atributo como segue.
<button type = 'button' id = 'myButton' disabled = 'disabled'> Botã o </button> 36
Referência de atributo global HTML5
HTML5 define um conjunto de atributos nomeados que podem ser aplicados a qualquer

elemento HTML5. Esses elementos sã o chamados de atributos globais e cada um tem um
significado muito específico, conforme a seguir.
■■ accesskey Permite que você especifique uma tecla de atalho para a qual pular ou para
definir o foco para um elemento. Via de regra, você nã o deve usar isso porque pode causar
problemas com outras tecnologias.
■■ classe Usada com CSS para especificar um ou mais nomes de classe para um elemento.
■■ contenteditable Especifica que o conteú do da tag pode ser editado.
■■ menu de contexto O usuá rio pode clicar com o botã o direito em um elemento para
exibir um menu. No momento em que este artigo foi escrito, nenhum navegador oferece
suporte a esse atributo.
■■ dir Permite que você especifique a direçã o do texto da esquerda para a direita ou da

direita para a esquerda para o conteú do em um elemento.
■■ arrastável Especifica se um elemento pode ser arrastado.
■■ dropzone Permite que você especifique o comportamento dos dados arrastados

quando eles sã o soltos. Os dados podem ser copiados, movidos ou vinculados.
■■ oculto Especifica que um elemento nã o é relevante.

■■ id Especifica um id exclusivo para um elemento.
■■ lang Especifica o idioma (inglês, francês, alemã o e assim por diante) do conteú do do

elemento.
■■ verificação ortográfica Usado com o atributo lang para permitir que você indique se o
elemento deve ter sua ortografia e gramá tica verificadas.
■■ estilo Especifica um estilo CSS embutido para o elemento.
■■ tabindex Define a ordem de tabulaçã o do elemento.
■■ título Fornece informaçõ es extras sobre o elemento.
Você verá muitos exemplos desses atributos globais neste livro.
Trabalho com tags de fechamento automático
Você pode representar qualquer elemento que nã o contenha conteú do como uma tag de
fechamento elfo. Uma tag de fechamento automático é uma tag inicial e uma tag final em
uma. Você termina a tag inicial com um espaço, barra, tecla
Termos e símbolo de maior. Por exemplo, o < br element> nã o pode ter qualquer conteú do,
por isso aqui é o início eo fim t ag em um: < br />.
Em XML, qualquer elemento vazio pode ser escrito com uma tag de fechamento automá tico,
mas em HTML5, isso pode causar problemas em diferentes navegadores. A regra é usar
tags de fechamento automá tico para tags que nã o podem ter conteú do, como
a tag <br /> . EM elementos PTY que sã o capazes de ter conteú do, mas atualmente nã o têm
conteú do deve ter tags de fim separadas. Um exemplo é
< div > </ div >; nã o há conteú do, mas as tags de início e fim ainda existem.
37
NOTA USE O ELEMENTO <SCRIPT> CUIDADOSAMENTE
Ao usar o elemento < script > para fazer referência a um arquivo JavaScript externo,

o elemento não terá conteúdo quando usado neste contexto, mas você deve sempre
incluir uma tag de finalização separada da seguinte maneira.
<script src = "/ Scripts / MyCode.js"> </script> Um sintoma do uso incorreto

do elemento < script > é quando o navegador renderiza uma tela em branco , mas
você pode ver a fonte e todo o seu conteúdo está lá .
■■ Você deseja usar o elemento < script > para incluir um arquivo JavaScript

denominado MyCode.
js na pasta de scripts. Qual é a sintaxe adequada?
Resposta da verificação rápida:
■■ <script src = "/ Scripts / MyCode.js"> </script> Trabalho com elementos void
A maioria dos elementos, mas nã o todos, pode ter conteú do, e o conteú do pode incluir
elementos com conteú do. Os elementos nã o precisam ter conteú do, mas alguns elementos
nã o podem ter conteú do.
Estes sã o chamados de elementos vazios . Por exemplo, o < br tag> representa uma quebra

de linha e nã o pode ter qualquer conteú do.
Chave
Termos
A seguir está uma lista de elementos nulos em HTML5.
■■ <area> Define uma á rea de hiperlink com algum texto em um mapa de imagem
■■ <base> Especifica o URL base do documento ou destino para todos os URLs relativos no

documento
■■ <br> Representa uma quebra de linha
■■ <col> Define as propriedades de uma ou mais colunas em um elemento < colgroup >

■■ <comando> Define um comando que pode ser invocado por um usuá rio
■■ <hr> Especifica uma mudança temá tica no conteú do
■■ <img> Define uma imagem
■■ <input> Define um campo de dados digitado que permite ao usuá rio editar os dados
■■ <link> Define uma relaçã o entre um documento e um recurso externo, como uma folha
de estilo em cascata
■■ <keygen> Define um controle de gerador de par de chaves para formulá rios que é

usado para criptografar dados que serã o passados para o servidor
■■ <meta> Define metadados que descrevem o documento HTML 38
■■ <param> Define um parâ metro para um objeto
■■ <source> Define um recurso multimídia para um elemento < video > ou < audio >
■■ <wbr> Opcional y rompe-se uma grande palavra a este elemento Em versõ es anteriores

do HTML, você acabou de usar o < br > marca sem tag final para indicar que você queria
começar uma nova linha na pá gina web. Com o XHTML, isso era um problema porque todas
as tags iniciais sã o obrigadas a ter tags finais correspondentes. O HTML5 permite que você
use uma tag de início sem tag de fim, mas uma soluçã o melhor é usar tags de fechamento
automá tico.
Adicionando atributos expando

Os atributos Expando sã o atributos que você define. Os atributos Expando também sã o
conhecidos como atributos definidos pelo autor ou simplesmente como atributos
personalizados. Sempre que você quiser anexar uma chave de dados
Termos para uma tag HTML, você pode apenas criar um atributo com o nome de sua
escolha e como assinar os dados. No entanto, o nome que você criar pode entrar em conflito
com um nome de atributo definido pelo W3C existente ou um nome de atributo futuro
definido pelo W3C. Para garantir que você nã o tenha nenhum conflito de nomenclatura
existente ou futuro, atribua um nome que seja prefixado com “dados-“ .
■■ Você tem uma página da web com um elemento < span > que contém o nome do
cliente.
Junto com o nome, você deseja incluir o número do cliente no elemento < span > ,

mas não deseja exibir o número do cliente. Como você pode escrever
o elemento < span > para um cliente chamado Contoso Ltd com o número
de cliente 123?
■■ Use um atributo expando para manter o número do cliente da seguinte maneira.
<span data-customerNumber = '123'> Contoso Ltd </span>
Adicionando comentários
Você pode adicionar comentá rios ao seu có digo-fonte HTML usando a seguinte sintaxe.
<! - comente aqui ->
Os comentá rios nã o sã o exibidos na pá gina do navegador renderizada, mas sã o enviados ao

navegador.
Os comentá rios podem ajudar a documentar sua fonte.
Nã o sã o permitidos espaços entre <! caracteres e os caracteres - no início do comentá rio,

mas espaços sã o permitidos entre os caracteres - e o caractere> no final da tag de
comentá rio. Este comportamento aparentemente estranho significa que você nã o pode ter
travessõ es consecutivos (-) em seu comentá rio porque esta combinaçã o causa erros de
sintaxe HTML.
Além disso, você nã o pode terminar um comentá rio com três travessõ es, como <! - e entã o
aconteceu ---> porque isso também gera um erro de sintaxe.

39
Adicionando COM condicionais mentos
Apenas o Internet Explorer reconhece comentários condicionais , que permitem adicionar

uma fonte específica do navegador que é executada se o navegador for o Internet Explorer,
mas é tratada como uma chave de comentá rio
Termos de outros navegadores. Você pode adicionar comentá rios condicionais ao seu

documento HTML usando a seguinte sintaxe.
<! - [if lte IE 7]> <html class = "no-js ie6" lang = "en"> <! [endif] ->
<! - [if lt IE 7]> <html class = "no-js ie6" lang = "en"> <! [endif] ->
<! - [if IE 8]> <html class = "no-js ie8" lang = "en"> <! [endif] ->
<! - [if gt IE 8]> <html class = "no-js" lang = "en"> <! [endif] ->
<! - [if gte IE 9]> <html class = "no-js" lang = "en"> <! [endif] ->
<! - [if! IE]> -> Este nã o é o Internet Explorer! <br /> <! - <! [en dif] -> O primeiro
comentá rio condicional verifica se o navegador é Internet Explorer e a versã o é anterior ou
igual a 7. O pró ximo comentá rio condicional verifica se o navegador é Internet Explorer e a
versã o é anterior a 7. O pró ximo comentá rio condicional verifica se o navegador é Internet
Explorer e se a versã o é 8. O pró ximo comentá rio condicional verifica se o navegador é
Internet Explorer e a versã o é posterior a 8, seguido por uma verificaçã o para ver se o
navegador é Internet Explorer e a versã o é posterior ou igual a 9. A ú ltima linha verifica se
o navegador nã o é Internet Explorer. Observe que a sintaxe da ú ltima linha é diferente das
outras.
Criação de um documento HTML
Agora que você viu os vá rios elementos e atributos, é hora de agrupá -los de uma maneira
significativa para criar um documento HTML. O documento HTML contém uma estrutura
externa, metadados e algum conteú do.
Estrutura básica do documento
Todo documento HTML deve ter uma estrutura bá sica que consiste em uma declaraçã o < !
DOCTYPE html >, que historicamente indica a versã o do HTML para o navegador. No
HTML5, isso indica ao navegador que ele deve estar no modo sem peculiaridades. O modo
sem peculiaridades faz com que o navegador opere de maneira compatível com HTML5. Em
seguida está o elemento raiz < html >, cuja chave
Os termos contêm o elemento < head > e o elemento < body >.
O elemento < head > contém informaçõ es ocultas, como metadados que descrevem o

documento HTML e as instruçõ es . A seguir está um exemplo de metadados
no elemento < head >.
<! DOCTYPE html>
<html>
<head>
<title> título aqui </title>
</head>
<body>
conteú do aqui
40

</body>
</html>
No presente exemplo, o < meta element> descreve o conjunto de caracteres como utf-8 ,

que é uma forma eficiente de unicode em que os caracteres do idioma Inglês (ASCII)
requerem apenas uma ú nica chave
Byte de termos a representar, e em que outras línguas podem ter caracteres que sã o

representados com até 4 bytes. Este é o conjunto de caracteres mais comum usado em
HTML e XML
documentos.
Este exemplo também contém um elemento < title >, que é importante porque serve aos
seguintes propó sitos.
■■ Exibido na barra de ferramentas do navegador
■■ Fornece o nome padrã o para a pá gina quando ela é adicionada aos favoritos
■■ Exibe o título quando um mecanismo de pesquisa exibe a pá gina nos resultados da

pesquisa. A tag < body > contém o conteú do exibível.
Usando caracteres especiais ( entidades HTML )
Você pode querer exibir os caracteres <e> em sua pá gina da web, mas viu que os caracteres
menor que e maior definem as tags. Esses caracteres podem ser exibidos em seu conteú do
usando o nome da entidade ou o nú mero da entidade, conforme a seguir.
&nome da entidade;
ou
& # entity_number;
Existem muitas entidades HTML, mas a Tabela 1-1 lista as entidades HTML mais comuns
que você usará em seu documento HTML.
TABELA 1-1 Referência a entidades comuns
Exibição
Nome da entidade
Número da Entidade
Descrição
& amp;
& # 38;
E comercial
>
& gt;
& # 62;
Sinal de maior que
<
& lt;
& # 60;
Sinal de menos que
& quot;
& # 34;
Aspas duplas
&có pia de;

& # 169;
direito autoral
& reg;
& # 174;
Marca registrada
&troca;
& # 8482;
Marca comercial
& nbsp;
$ # 160;
Espaço inquebrá vel
41
ESPAÇO INQUEBRÁVEL
Se você tentar incorporar uma série de espaços em seu documento HTML, o navegador
normaliza caracteres de espaço em branco contíguos (como espaços, tabulaçõ es e quebras
de linha) e renderiza apenas um ú nico espaço. Este é um recurso normalmente desejá vel
porque permite que você formate seu HTML
conteú do de origem de uma maneira que seja mais legível no modo de origem, eliminando
espaços em branco na saída renderizada.
Quando quiser exibir vá rios espaços, você pode usar o caractere de espaço nã o separá vel.
O espaço inquebrá vel também é conhecido como espaço inquebrá vel, espaço inquebrá vel e
espaço rígido. Além de evitar o colapso de espaços em branco contíguos, o espaço não
separável evita a separaçã o automá tica de linhas entre palavras que você deseja manter
juntas na mesma linha.
Chave
Termos
Considere um documento HTML no qual você deseja exibir 10 mph, onde há um espaço
entre o nú mero 10 e os mph. Você deseja garantir que o mph nã o seja separado do nú mero
10 sendo movido para a pró xima linha. No seu documento HTML, use 10 & nbs p; mph para
manter o nú mero 10 e mph juntos.
Resumo da lição
■■ Um elemento é composto de uma tag inicial, conteú do interno e uma tag final.
■■ Os navegadores ignoram as tags que nã o sã o reconhecidas.
■■ HTML5 se origina de HTML 4.01, nã o de XHTML.
■■ O W3C é responsá vel pelo desenvolvimento de padrõ es abertos para a web.
■■ Elementos HTML fornecem estrutura, folhas de estilo CSS fornecem apresentaçã o e

JavaScript fornece comportamento.
■■ Use nomes de tag em minú sculas.
■■ Os valores dos atributos devem sempre ser citados usando aspas simples ou aspas
duplas.
■■ Atributos booleanos sã o atributos cuja mera presença na tag inicial indica que a opçã o
está definida.
■■ HTML5 define atributos globais, que sã o o conjunto de atributos que podem aparecer
em qualquer elemento HTML5.
■■ As tags de fechamento automá tico sã o tags cujas tags de início e fim estã o juntas para
criar um elemento sem conteú do. As tags de autofechamento devem ser usadas apenas com
elementos que nã o podem ter conteú do.
■■ Elementos vazios nã o podem ter conteú do. Eles devem ser criados usando tags de
fechamento automá tico.
■■ Atributos Expando sã o atributos que você define e também sã o conhecidos como

atributos definidos pelo autor ou atributos personalizados. Prefixe esses atributos com
“dados-“.
■■ Você pode usar comentá rios condicionais para adicionar uma fonte específica do
navegador que funcionará com o Internet Explorer, mas será tratada como um comentá rio
por outros navegadores.
42
■■ As entidades HTML sã o caracteres especiais e podem ser incorporadas ao seu

documento HTML usando o "e" comercial (&), o nome da entidade e um ponto- e- vírgula
(;). Você também pode usar o "e" comercial (&), o símbolo hash (#), o nú mero da entidade e
o ponto-e-vírgula (;).
■■ Espaços nã o separá veis podem ser usados para renderizar vá rios espaços
contíguos. Você também pode usar espaços nã o separá veis para evitar que duas palavras
sejam separadas por uma quebra de linha.
■■ O atributo id especifica um identificador exclusivo para um elemento.
Revisão da aula
opçã o de resposta está correta ou incorreta na seçã o “Respostas” no final deste capítulo.
1. Você deseja criar um atributo expando em vá rias tags < h3 > que exibem veículos à

venda. O atributo expando armazenará o VIN ( nú mero de identificaçã o do veículo) do
veículo à venda. Qual das alternativas a seguir é o exemplo mais apropriado de criaçã o do
atributo expando?
A. < h3 vin = 'current VIN here'> 1965 VW Beetle < / h3 > B. < h3 id = 'current VIN here'>
1965 VW Beetle < / h3 > C. < h3 data-vin = 'cu rrent VIN aqui '> 1965 VW Beetle < /
h3 > D. < h3 datavin =' current VIN aqui '> 1965 VW Beetle < / h3 > 2. Qual tecnologia é
precedida e derivada do HTML5?
A. HTML 4.01
B. SGML
C. XHTML 1.0
D. XML
3. Como você deve iniciar cada documento HTML5?
A. < html >
B. < cabeça >
C. < título >
D. < ! DOCTYPE html >
4. Você deseja usar o atributo booleano desativado em uma caixa de texto. Como você pode
fazer isso? (Escolha todas as opçõ es aplicá veis)
A. <input name = 'firstName' type = 'text' disabled /> B. <input name = 'firstName' type =
'text' disabled = '' /> C. <input name = 'firstName' type = 'text 'disabled =' true '/> D. <input
name =' firstName 'type =' text 'disabled =' disabled '/> Liçã o 1: Apresentando
HTML5 CHAPTE R 2
43
Lição 2: Incorporação de conteúdo
Em breve, você desejará incorporar conteú do ao seu documento HTML. O conteú do pode
ser de uma pá gina da web existente ou você pode incorporar imagens em seu documento
HTML. Você também pode incorporar aplicativos Adobe Flash. Você pode
incorporar muitos elementos interessantes, e esta liçã o cobre muitas das maneiras de
incorporar conteú do.
■■ Incorpore documentos HTML em outro documento HTML usando frames embutidos.
■■ Crie hiperlinks para documentos HTML remotos ou locais.
■■ Adicionar imagens e mapas de imagens ao documento HTML5 atual.
■■ Conteú do do plug-in incorporado.

Você pode usar o elemento < iframe > para incorporar um quadro embutido que contém
um documento HTML no documento HTML atual. Isso pode ser ú til quando você deseja
criar a funcionalidade de reutilizaçã o em seu site; por exemplo, quando você deseja criar
um cabeçalho comum que será exibido em todas as pá ginas do seu site. Isso também pode
ser ú til quando você deseja incluir um HTM L
pá gina de outro site em sua pá gina.
O elemento < iframe > cria um contexto de navegador aninhado no qual outro HTML
documento pode ser carregado. Carregar um documento HTML cria um contexto de

navegaçã o para esse documento. O documento que contém um < ifram e > está contido no
contexto do navegador pai, onde o documento que é carregado no elemento < iframe > está
dentro do contexto do navegador aninhado.
Você pode navegar em contextos de navegaçã o aninhados usando as seguintes

propriedades do objeto janela.
■■ win dow.top Um objeto WindowProxy que representa o contexto de navegaçã o de nível

superior
■■ window.parent Um objeto WindowProxy que representa o contexto de navegaçã o pai
■■ window.frameElement Um elemento que representa o contêiner de contexto de

navegaçã o, mas retorna nulo se o re nã o for um
O elemento < iframe > possui um atributo src (fonte) e um atributo de nome. O atributo src

pode ser definido como a URL absoluta ou relativa do documento HTML que você deseja
incluir, conforme mostrado no exemplo a seguir.
<iframe src = "menu.html"> </ i frame>
O atributo name define o nome do contexto de navegaçã o, que é ú til quando você precisa
fazer referência ao elemento < iframe >, possivelmente como o destino de um hiperlink,
conforme descrito em 44

Seçã o “Trabalhando com hiperlinks” a seguir. Um nome de contexto de navegaçã o vá lido é
qualquer string com pelo menos um caractere que nã o comece com um sublinhado porque
o sublinhado é usado para esses nomes de chave especiais: _blank, _self, _parent e _top.
Sa ndboxing de conteúdo incorporado
Sandboxing é um meio de evitar que malware e aborrecimentos, como pop-ups, sejam

introduzidos quando o conteú do é incorporado em sua pá gina
HTML. O elemento < iframe > pro-Key
Os termos veiculam o atributo sandbox para esse propó sito.
O atributo sandbox coloca um conjunto de restriçõ es extras em qualquer conteú do

hospedado pelo iframe. Quando o atributo sandbox é definido, o conteú do é tratado como
sendo de uma origem ú nica e potencialmente perigosa. Formulá rios e scripts estã o
desabilitados e os links nã o podem ter como alvo outros contextos de navegaçã o. Considere
o seguinte exemplo.
<iframe sandbox src = "http://someOtherDomain.net/content">
</iframe>
No exemplo, a fonte está se referindo a um conteú do potencialmente hostil em um domínio

diferente.
Este conteú do será afetado por todas as restriçõ es normais de cross-site. Além disso, o
conteú do terá scripts, plug-ins e formulá rios desativados. O conteú do nã o pode navegar em
nenhum quadro ou janela além dele mesmo.
As restriçõ es podem ser anuladas separando -se o espaço de qualquer um dos itens a

seguir.
■■ allow-forms Habilita formulá rios
■■ permitir a mesma origem Permite que o conteú do seja tratado como sendo da mesma
origem, em vez de forçá -lo a uma origem ú nica
■■ allow-scripts Ativa scripts, exceto pop-ups
■■ allow-top-navigati on Permite que o conteú do navegue em seu contexto de navegaçã o

de nível superior. No exemplo a seguir, al ow-same-origin, al ow-forms e al ow-scripts estã o
habilitados.
Superficialmente, pode parecer que a sandbox nã o está fornecendo nenhuma proteçã o, mas
a sandbox ainda desativa plug-ins e pop-ups.
<iframe sandbox = "allow-same-origin allow-forms allow-scripts"

src = "http://otherContent.com/content.html"> </iframe> Incorporação perfeita de
conteúdo
A tag < iframe > tem um atributo contínuo que indica que o conteú do da fonte deve

aparecer como se fosse parte do documento que o contém. Isso significa que
o elemento < iframe > nã o terá bordas e barras de rolagem. O atributo uniforme é um
atributo booleano, portanto, sua presença na tag < iframe > indica que você deseja essa
opçã o , mas existem três maneiras de definir um atributo booleano. Aqui estã o três
maneiras de especificar a incorporaçã o contínua de conteú do.
<iframe seamless = "seamless" src = "http://otherContent.com/content.html"> </iframe>
<iframe seamless = "" src = "http://otherContent.com/cont ent.html"> </iframe>
<iframe seamless src = "http://otherContent.com/content.html"> </iframe> Liçã o 2:

Incorporaçã o de conteú do CAPÍTULO 2
45
No momento em que este artigo foi escrito, o atributo seamless nã o era compatível com
nenhum navegador, mas sua intençã o era mesclar o conteú do externo no documento HTML
atual para que a pá gina HTML nã o parecesse ter conteú do incorporado. A alternativa é usar
CSS para obter uma apresentaçã o semelhante.
O < a > elemento cria um link para um documento HTML externo (ex ligaçã o terna) ou salta
para uma localizaçã o no documento HTML atual (ligaçã o interna). O conteú do do < a >
elemento é exibido no navegador com o fol devido aparência padrã o.
■■ Link não visitado Sublinhado e azul
■■ Link visitado Sublinhado e roxo
■■ Link ativo sublinhado e vermelho
O < a > elemento tem o atributo href, que você costume y uso para especificar o destino do
link. Se o link for externo, o href pode ser preenchido com um URL relativo ou absoluto da
seguinte maneira.
<a href="ExpenseReports.html"> Pá gina de relató rio de despesas </a>
<a href=" http://www.contoso.com/SalesReports.html"> Pá gina de relató rio de vendas

</a> Se o link for interno, o href conterá o símbolo hash (#) seguido pelo id do tag para a
qual você deseja pular. Se você usar apenas o símbolo de hash, clicar no link o levará para o
t op do documento HTML. Aqui estã o dois exemplos.
<a href="#"> Top </a>
<a href="#BillingAddress"> Ir para endereço de cobrança </a> Especificando o destino

do hiperlink
Quando você está em uma pá gina da Web e clica em um hiperlink para um recurso externo,
o recurso externo abre s na janela do navegador atual. Se o link externo for para uma
pá gina do seu site, esse comportamento provavelmente fará sentido. Se o link externo for
para um site diferente, você pode abrir uma nova janela do navegador. Usando o atributo
target, você pode controlar o comportamento do link atribuindo um dos seguintes.
■■ _blank Abrir em uma nova janela do navegador
■■ _parent Aberto na moldura ou janela principal
■■ _self aberto na janela ou quadro atual (padrã o)
■■ _top aberto no quadro superior, substituindo assim o conteú do da janela
■■ <iframe_name> Abrir no elemento < iframe > com o atributo de nome correspondente

Quando você tem um menu com hiperlinks que aparece em todas as pá ginas, pode criar
um elemento < iframe > com seu atributo de nome definido como conteú do e, em seguida,
definir o alvo 46
de todos os links de menu para ser conteú do para que as pá ginas carreguem
no elemento < iframe > conforme mostrado no exemplo a seguir.
Menu Principal <br />
<a href="Calendar.html" target="content"> Agenda </a> <br />
<a href="Hu manResources.html" target="content"> Recursos Humanos </a> <br />
<a href="ExpenseReports.html" target="content"> Despesas </a> <br />
<a href="Commissions.html" target="content"> Comissõ es </a> <br />
<br />
<iframe name = "content"> </iframe>
Enviando e-mail com hiperlinks
Você pode usar o protocolo mailto para enviar mensagens de e-mail. O URL mailto aceita os
seguintes parâ metros: subject, cc, bcc e body. Os parâ metros podem ser inseridos em
qualquer ordem adicionando um ponto de interrogaçã o (?) Apó s o endereço de e-mail e
separando os parâ metros com o E comercial (&). Alguns exemplos de hiperlink de e-mail
sã o os seguintes.
<! - mailto bá sico ->
<a href="mailto:sales@contoso.com"> Entre em contato com vendas </a>
<! - adicione o nome, observe que o e-mail é agrupado com & lt; e & gt; ->
<a href="mailto: Joe<sales@contoso.com>"> Contate Joe em Vendas </a>
<! - vá rios destinatá rios separados por vírgulas ->
<a href="mailto:sales@contoso.com,service@contoso.com"> Entre em contato com vendas

e serviços </a>
<! - adicionar có pia carbono ->
<a href="mailto:sales@contoso.com?cc=service@contoso.com"> Entre em contato com o

serviço cc de vendas </a>
<! - adicionar có pia oculta ->
<a href="mailto:sales@ contoso.com?bcc=service@contoso.com"> Contate Vendas </a>
<! - mailto bá sico com mensagem ->
<a href="mailto:sales@contoso.com?body=call me."> Entre em contato com vendas com

mensagem de ligaçã o </a>
<! - mailto bá sico com mensagem de vá rias linhas ->
<a href="mailto:sales@cont oso.com?body=call me.%0AThanks"> Entre em contato com

vendas com mensagem multilinha </a>

<! - mailto bá sico com assunto e mensagem ->
<a href="mailto:sales@contoso.com?subject=hi&body=call me."> Entre em contato com

Vendas com assunto oi
e me chame de mensagem </a>
Quando você quiser incorporar uma imagem em seu documento HTML, use
o elemento < img >. O
O elemento < img > nã o possui uma tag de finalizaçã o; é um elemento

vazio. O elemento < img > possui atributos obrigató rios de src (abreviaçã o de fonte) e d alt
(abreviaçã o de alternativo). Use a Liçã o 2: Incorporaçã o de conteú do CAPÍTULO 2
47
Atributo src para fornecer uma referência de URL absoluta ou relativa à imagem que deve
ser exibida. Use o atributo alt para fornecer um texto alternativo a ser exibido quando a
imagem nã o estiver disponível devido a uma conexã o lenta ou outro acidente. A seguir está
um exemplo do elemento < img >.
<img src = "/ images / logo.png" alt = "logo" />
<img src = "http://search.microsoft.com/global/search/en-
us / PublishingImages / bing_logo.png "al t =" Bing Logo "/> É importante entender que a
imagem nã o está embutida no documento HTML.
Em vez disso, você fornece uma referência ao arquivo de imagem. Quando o navegador lê

seu HTML
documento, o navegador alcançará seu elemento < img > e recuperará a imagem com base

no atributo src. Quando a imagem é recuperada, o navegador mesclará a imagem na
renderizaçã o final que é exibida na janela do navegador. Se o navegador nã o puder exibir a
imagem, ele exibirá o texto alternativo.
Tipos de arquivo de imagem
Ao usar o elemento < img >, você pode fornecer arquivos JPEG (.jpg ou .jpeg), GIF (.gif), PNG
(.png) ou SVG (.svg). A seguir está uma breve descriçã o de cada tipo de arquivo que deve
ajudá -lo a decidir qual tipo de arquivo usar para seu aplicativo.
■■ JPG Também conhecido como JPEG, é melhor para fotografias porque oferece alta

compactaçã o e até 16,8 milhõ es de combinaçõ es de cores, mas o algoritmo de compactaçã o
tem perdas, o que significa que você perde detalhes sempre que salva o arquivo.
■■ GIF GIF é ó timo para usar em imagens pequenas que possuem um nú mero fixo de
cores. GIF também oferece suporte a cores transparentes. GIF usa compactaçã o sem perdas
e é melhor para logotipos e pior para fotos. O GIF também suporta a capacidade de
encapsular vá rias imagens em um arquivo, que é comumente usado para fornecer GIFs
animados.
■■ PNG PNG é um ó timo tipo de arquivo alternativo devido à sua alta compactaçã o sem
perdas. PNG
os arquivos podem ser true color de 48 bits ou tons de cinza de 16 bits. PNG nã o só oferece
suporte a cores transparentes, mas também oferece transparência variá vel. As fotos
nã o sã o compactadas para ficarem tã o pequenas quanto as fotos JPG, mas o fato de nã o
haver perdas vale o tamanho extra em muitos cená rios. Você pode usar PNG como seu tipo
de armazenamento para fotos que deseja editar, mas ao exibi-las na web, convém salvar o
PNG como JPG para obter a melhor compactaçã o.
■■ SVG SVG é Scalable Vector Graphics e é ó timo para desenhos, mas nã o para fotos.
As imagens SVG podem ser aumentadas ou reduzidas sem perder detalhes porque o
arquivo contém as instruçõ es para desenhar a imagem, ao contrá rio de outros tipos de
arquivo que contêm uma imagem baseada em varredura. Imagens baseadas em varredura
sã o compostas de pontos coloridos que compõ em a imagem. Se você precisar dimensionar
uma imagem baseada em raster para cima ou para baixo, verá que, em cores, os pontos sã o
amostrados novamente e a imagem típica acaba parecendo um bloco.
48
■■ Você está criando vários pequenos ícones que serão exibidos em sua página da
web.
Esses ícones serão renderizados em formas diferentes e usarão cores

transparentes. Cada ícone usa como um grande número de cores. Qual seria o
melhor tipo de arquivo de imagem para este aplicativo?
■■ Use o formato GIF porque tem suporte para cores transparentes e porque requer
um pequeno número de cores.
Criação de links de imagens
Se você criar um yperlink e o conteú do do hiperlink for um elemento < img >, você criou

uma imagem que pode ser clicada - um link de imagem. Aqui está um exemplo de um link
de imagem.
<a href="Investments.html"> <img src = "CurrencySymbol.png" /> </a> Criando um mapa

de imagem
Você pode criar um mapa de imagem clicá vel em seu documento HTML usando
o elemento < map >.
Ele contém elementos < area > que definem regiõ es clicá veis na imagem.
O elemento < map > possui um atributo de nome que deve ser definido. Em

um elemento < img >, defina o atributo usemap para o nome do elemento < map > para
criar um relacionamento entre a imagem e o mapa.
No elemento < map >, você define os elementos < area > usando os atributos shape, coo rds,

href e alt. O elemento < area > é um elemento void, entã o você usa uma tag de fechamento
automá tico. O atributo de forma é definido como retâ ngulo, polígono ou padrã o, onde o
padrã o é um elemento < área > cujo tamanho é igual ao da imagem e é acionado
se nenhuma < área > específica for definida para as coordenadas onde você clicou.
O atributo coords conterá x e y coordenadas onde 0, 0 é o canto superior esquerdo da

imagem. O atributo coords é definido de acordo com a forma a seguir.
■■ rect x 1, y 1, x 2, e y 2 especificam as coordenadas da esquerda, superior, direita e

inferior.
círculo x , y e raio especificam as coordenadas do centro e o raio.
poli x 1, y 1, x 2, y 2 ,. , xn e yn especificam as coordenadas das arestas. O primeiro e o

ú ltimo pares de coordenadas devem ser iguais para fechar o polígono, mas se nã o forem
iguais, o navegador adicionará um par de fechamento.
O atributo href é o mesmo que o atributo href no < uma > elemento e pode ser definida
como uma URL absoluta ou relativa.
O atributo alt é definido como texto alternativo a ser exibido e é necessá rio quando o
atributo href é definido.
Liçã o 2: Incorporaçã o de conteú do CAPÍTULO 2
49
A seguir está um exemplo de criaçã o de um mapa de imagem com suas á reas e atribuiçã o

do mapa de imagem a uma imagem.
<img src = "worldmap.gif" width = "145" height = "126"
alt = "Mapa do mundo" usemap = "# países" />
<nome do mapa = "países">
<area shape = "rect" coords = "10,15,30,25"
href = "USA.html" alt = "USA" />
<area shape = "circle" coords = "95,40,20"
href = "China.html" alt = "China" />
<area shape = "poly" coords = "97,76,115,76,113,83,105,90,97,76"
href = "Austrá lia.html" alt = "Austrá lia" />
<area shape = "default" href = "InvalidChoice.html" alt = "Invá lido" />
</map>
Incorporando conteúdo de plug-in
Você pode usar os elementos < object > e < embed > para incorporar conteú do de plug-
ins. Por que existem duas tags para o mesmo propó sito? O motivo sã o as diferenças nos
navegadores ao longo dos anos.
Originalmente, a Netscape criou a tag < embed > para plug-ins no estilo Netscape e o

Internet Explorer adicionou suporte para a tag < embed >. A tag < object > foi adicionada ao
HTML 4.0 com o benefício de suportar downloads de componentes da Internet para que o
plug-in pudesse ser baixado e instalado automaticamente .
A tag < embed >
Embora a especificaçã o HTML 4.01 nã o tenha suporte para a tag < embed >, a maioria dos
navegadores continuou com o suporte devido à base instalada e à facilidade de uso. Em
HTML5, ambas as tags existem.
A tag < object > fornece mais funcionalidade, enquanto a tag < embed > é mais fá cil de

usar. Por exemplo, se você deseja reproduzir um arquivo Flash, pode usar a tag < embed >
da seguinte forma.
<embed src = "myFlashFile.swf">
</embed>
A tag < embed > possui os seguintes atributos.
■■ altura Especifica a altura em pixels do conteú do incorporado
■■ src Especifica o URL do arquivo externo para incorporar
■■ tipo Especifica o tipo MIME do conteú do incorporado
■■ largura Especifica a largura em pixels do conteú do incorporado. Para navegadores que

nã o suportam a tag < embed >, você pode adicionar o conteú do fal back ao elemento da
seguinte maneira.
<embed src = "myFlashFile.swf">
<a href="/go/getflashplayer/">
<img src = http: //www.adobe.com/images/shared/download_buttons/get_flash_player.gif

alt = "Get Adobe Flash player " />
</a>
</embed>
50
A tag < object >
A tag < object > incorpora um objeto em um documento HTML. Você pode incorporar

multimídia, como á udio, vídeo, miniaplicativos Java, ActiveX, PDF e Flash em suas pá ginas
da web. A tag < objec t > contém os seguintes atributos.
■■ data Fornece o URL do recurso a ser usado pelo objeto
■■ form Indica um ou mais ids de formulá rio aos quais o objeto pertence

■■ altura Especifica a altura em pixels do objeto
■■ nome Define o nome do objeto
■■ tipo Define o tipo de dados MIME especificado no atributo de dados
■■ usemap Indica o nome de um mapa de imagem do lado do cliente a ser usado com o

objeto
■■ largura Especifica a largura em pixels do objeto
IMPORTANTE NO MÍNIMO
No mínimo, você deve definir os dados ou o atributo de tipo.
A tag < object > pode ser usada apenas no elemento < body >. Você pode

encontrar exemplos de < objeto > que implementam muito mais atributos do que os
definidos nesta lista porque versõ es anteriores do HTML suportavam outros atributos, mas
o HTML5 suporta apenas os atributos listados mais os atributos globais.
Você também pode usar a tag < object > para incorporar outra pá gina da web em seu
documento HTML.
A seguir está um exemplo de uso do elemento < object > para incorporar uma pá gina da

web em seu documento HTML.
<object id = "headerContent" standby = "carregando cabeçalho ..."
title = "carregando cabeçalho ..." largura = "100%" altura = "15%"
type = "text / html" data = "Header.aspx"> </ objec t> Como regra, considere usar
a tag < iframe > ao incorporar uma pá gina da web de outro domínio em seu documento
HTML usando sandbox. É feito para esse propó sito, enquanto a tag < object > é uma tag de
uso mais geral. A tag < object > se comporta de maneira diferente em navegadores
diferentes, e você pode descobrir que recursos como dicas de ferramentas funcionam
apenas com o
< iframe > tag e nã o com a tag < object >.
É possível incorporar imagens e mapas de imagens em seu documento HTML usando o
tag < object >, mas você deve evitar fazer isso. É melhor usar a tag < img > para incorporar
imagens.
O texto dentro do elemento < object > é um texto alternativo a ser exibido

para navegadores que nã o suportam a tag < object >.

Liçã o 2: Incorporaçã o de conteú do CAPÍTULO 2
51
Passando parâmetros para um objeto
Como a tag < object > pode representar qualquer objeto, a tag < param > permite que você
passe dados para o objeto. Você pode usar uma ou mais tags < param > para passar
parâ metros para plug-ins que foram incorporados com a tag < object >. As tags < param >
devem estar antes de qualquer texto alternativo que esteja dentro do elemento < object >.
A tag < param > tem um nome e um atributo de valor, e ambos sã o necessá rios para cada
tag < param >. A seguir está um exemplo do uso de uma tag < param > com um arquivo de

á udio para impedir que o arquivo de á udio seja reproduzido automaticamente quando a
pá gina for carregada.
<object data = "tada.wav" >
<param name = "autoplay" value = "false" />
</object>
Usando a tag de objeto para criar um contexto de navegador
Além de usar a tag < iframe > para criar um contexto de navegador aninhado, você pode
usar o
tag < object >, mas isso nã o é compatível com todos os navegadores, entã o você deve usar
a tag < iframe >.
Resumo da lição
■■ Você pode usar o elemento < iframe > para fornecer a reutilizaçã o de HTML

incorporando um HTML
documento em seu documento HTML atual.
■■ Use o atributo sandbox na tag < iframe > para ajudar a prevenir malware e ruídos, como
pop-ups, de serem introduzidos quando o conteú do é incorporado em sua pá gina HTML.
■■ Use o atributo seamless na tag < iframe > para indicar que o conteú do de origem deve
ser renderizado para aparecer como se fosse parte do documento que o contém .
■■ O < uma tag> cria um hiperlink para qualquer um documento HTML externo ou uma
localizaçã o interna no documento atual. O < uma tag> também pode ser usado para enviar
mensagens de e-mail.
■■ O elemento < img > é um elemento void e é usado para adicionar uma referência de

imagem ao seu documento HTML.
■■ JPG é melhor para exibir fotos em pá ginas HTML devido à sua compressã o, GIF é melhor
para imagens pequenas com transparência e animaçõ es incorporadas, PNG é melhor para
armazenamento devido à compressã o sem perdas durante as sessõ es de ediçã o e SV G é
melhor para desenhos devido a sua escalabilidade de desenho vetorial.
■■ Você pode criar um mapa de imagem clicá vel usando os elementos < map > e < area >.
■■ Você pode usar a tag < embed > para fornecer incorporaçã o de conteú do simples.
■■ Você pode usar a tag < object > para fornecer incorporaçã o de conteú do ide com maior
flexibilidade porque pode ter elementos < param > aninhados .
52
Revisão da aula
1. Você deseja incorporar um arquivo Flash denominado myFlash.swf em seu documento

HTML. Qual é o có digo mais adequado?
A. <a href = ”myFlash.swf”> </a>
B. < iframe src = ”meuFlash.swf”> < / iframe > C. < img src = ”meuFlash.swf” />
D. < embed src = ”myFlash.swf”> < / embed > 2. Você deseja criar um desenho de uma

má quina que a Contoso, Ltd. venderá em seu site. O desenho será incorporado ao seu
documento HTML e você deseja que ele mantenha sua qualidade quando
redimensionado. Qual é o tipo de arquivo mais adequado para usar?
A. SVG
B. GIF
C. JPG
D. PNG
Pratica exercícios
Você aprendeu um pouco sobre elementos e atributos HTML e é hora de criar um site. No
Exercício 1, você cria um site para uma empresa fictícia, Contoso, Ltd., e adiciona uma
pá gina inicial .
No Exercício 2, você adiciona os relató rios de despesas, recursos humanos e pá ginas de

conteú do principal.
Se você encontrar problemas ao concluir um exercício, os projetos concluídos podem ser

instalados na pasta Exercícios prá ticos que é fornecida com o conteú do complementar .
Exercício 1: Crie um site simples usando o Visual Studio
Express for Web
Nesta prá tica, você cria um site simples usando o Visual Studio Express 2012 for Web.
A qualidade das pá ginas produzidas será menos do que desejá vel porque CSS ainda nã o foi
discutido. O objetivo desta prá tica é usar muitas das tags que foram descritas nesta liçã o.
Você começa criando um site ASP.NET usando o Visual Studio Express 2012 para Web e,
em seguida, adiciona e modifica a pá gina inicial.
53
2. Inicie o Visual Studio Express 2012 for Web. Navegue até o arquivo e escolha Novo
projeto.
Navegue até Ins tal ed | Modelos | Visual Basic | Web e selecione ASP.NET Empty Web
Application.
3. Defina o nome do seu aplicativo como ContosoWebSite .
5. Defina o nome da soluçã o como ContosoWebSiteSolution .
6. Certifique-se de manter a caixa de seleçã o Criar diretó rio para soluçã o marcada.
8. Quando o aplicativo for criado, clique em Depurar e selecione Iniciar Depuraçã o. (A tecla
de atalho é geralmente y F5, mas pode variar com base nas configuraçõ es de instalaçã o.) O
ASP.NET Empty Web Application nã o inclui uma pá gina inicial, portanto, uma pá gina de
erro é exibida, mostrando um erro HTTP 403.14 - Erro proibido . A pá gina de erro indica
(de forma bastante indireta) que você nã o tem uma pá gina padrã o em seu site, entã o o
servidor web tenta exibir uma lista de todos os arquivos no diretó rio. No entanto, as
configuraçõ es de segurança do site nã o permitirã o a navegaçã o no diretó rio para exibir o
conteú do do diretó rio.
9. Feche a pá gina de erro, que deve interromper a depuraçã o automaticamente. Se

necessá rio, você pode interromper a depuraçã o clicando em Depurar e escolhendo Parar
depuraçã o (ou pressionando Shift + F5).
10. Adicione uma pá gina inicial. Na janela Solution Explorer, clique com o botã o direito do
mouse no projeto ContosoWebSite, escolha Adicionar e selecione Pá gina HTML. Defina o
nome como default.html e clique em OK.
A pá gina inicial é adicionada ao seu site e contém o seguinte HTML.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
11. No elemento < title >, defina o título como Página inicial da Contoso Ltd ..
12. Na janela Solution Explorer, clique com o botã o direito do mouse no projeto, escolha
Add, selecione New Folder e nomeie a pasta Images .
13. Na janela Solution Explorer, clique com o botã o direito na pasta Images que você
acabou de adicionar, escolha Add, selecione Existing Item e selecione
o arquivo C ontosoLogo.jpg que está localizado na pasta Chapter02 Resources.
14. No elemento < body >, adicione um comentá rio e defina o texto como Adicionar <img>
com logotipo da Contoso .
O elemento <img> é abordado na Liçã o 2.
54
15. Usando o elemento < h1 > para criar um título, adicione Bem-vindo à Contoso Ltd.
indo para o corpo apó s o comentá rio.
16. Apó s o elemento < h1 >, adicione um comentá rio. Defina o texto do comentá rio

como Adicionar <iframe> aqui .
O elemento < iframe > é discutido na Liçã o 2. Sua pá gina default.html deve ter a seguinte

aparência.
<! DOCTYPE html>
<head>
<title> Pá gina inicial da Contoso Ltd. </title>
</head>
<body>
<! - Adicionar <img> com logotipo da Contoso ->
<h1> Bem-vindo à Contoso Ltd. </h1>
<! - Adicione <iframe> aqui ->
</body>
</html>
17. Na janela Solution Explorer, clique com o botã o direito na pá gina default.html e escolha
18. Clique em Depurar e escolha Iniciar Depuraçã o (F5).
Você deve ver a tela renderizada , conforme mostrado na Figura 2-1. O uso

do elemento < h1 > produziu um título com uma fonte grande. Observe que os comentá rios
nã o sã o exibidos, mas se você clicar com o botã o direito do mouse na pá gina e escolher
Exibir có digo-fonte, verá o có digo-fonte HTML, que contém os comentá rios. O texto
na guia do navegador contém a Home Page da Contoso Ltd., que é o texto que você inseriu
no elemento <title>.
55
FIGURA 2-1 O site da Contoso Ltd.
Exercício 2: crie páginas adicionais
Neste exercício, você adiciona pá ginas ao site que criou no Exercício 1. Se nã o realizou o
Exercício 1, você pode usar os arquivos da pasta Exercício2 \ LabStart para começar. Você
ainda nã o conseguirá acessar as novas pá ginas da pá gina inicial porque adicionou
essa funcionalidade no Exercício 3.
1. Na janela do Solution Explorer, clique com o botã o direito do mouse no projeto, escolha
Adicionar e selecione HTML
Pá gina. Defina o nome como MainContent.html e clique em OK.
O conteú do será mantido simples.

2. No elemento < body > do MainContent. pá gina html, adicione o seguinte texto: Aqui
está o conteúdo principal da página inicial . Defina o título como Conteúdo Principal .
<! DOCTYPE html>
<head>
<title> Conteú do principal </title>
</ h ead>
<body>
Aqui está o conteú do principal da pá gina inicial.
</body>
</html>
56

3. Para visualizar esta pá gina, clique com o botã o direito do mouse no meio da fonte e
escolha Exibir no navegador (Internet Explorer).
Você deve ver a tela renderizada, conforme mostrado na Figura 2-2. Observe que quase
nada está nesta pá gina. Nã o tem título ou logotipo. No Exercício 3, você combina esse
conteú do com a pá gina inicial para obter o cabeçalho e o logotipo.
FIGURA 2-2 A pá gina de conteú do principal renderizada
4. Feche a janela do navegador.
5. Adicione um novo arquivo HTML e nomeie-

o HumanResources.html . No elemento < body >, adicione o seguinte texto: Huma n
Resource content here .
6. Clique com o botã o direito do mouse no meio da fonte e escolha Exibir no navegador
(Internet Explorer).
Você deverá ver a tela renderizada com o texto inserido.
7. Adicione outro arquivo HTML e denomine -o ExpenseReports.html . No elemento

< corpo > , adicione o seguinte texto: Conteúdo do relatório de despesas aqui .
8. Clique com o botã o direito no meio da fonte e escolha Exibir no navegador (Internet
Explorer).
Você deverá ver a tela renderizada com o texto inserido.
57
Exercício 3: Incorporação de Conteúdo
Você aprendeu como incorporar conteú do na Liçã o 2; este exercício usa essas informaçõ es
para conectar as pá ginas do site da Contoso, Ltd., incorporando as pá ginas na home page,
usando um quadro embutido.
Nesta prá tica, você estende o site da Contoso, Ltd., que criou no Exercício 1, vinculando as
pá ginas e exibindo as pá ginas em um quadro embutido. Se você nã o executou o Exercício
1, pode usar os arquivos da pasta Exercise3Start para iniciar.
1. Abra o arquivo default.html e localize o comentá rio que afirma que uma tag < img > deve
ser adicionada. Adicione uma tag < img > apó s o comentá rio. Defina o atributo src
como Images /
ContosoLogo.jpg .
2. Localize o comentá rio que afirma que uma tag < iframe > deve ser adicionada. Adicione
um elemento < iframe > com um atributo de nome definido como iframeContent e um
atributo src definido como MainContent.html .
Sua pá gina default.html deve ter a seguinte aparência.
<! DOCTYPE html>
<ht ml xmlns = "http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src = "Images / ContosoLogo.jpg" />
<iframe name = "iframeContent" src = "MainContent.html"> </iframe>
</body>
</html>
Você deve ver o logotipo da Contoso e o arquivo MainContent.html agora está incluído na
pá gina. A tela renderizada é mostrada na Figura 2-3.
58

FIGURA 2-3 A pá gina inicial renderizada com a pá gina MainContent.html
incorporada 4. Pare a depuraçã o.
5. Na pá gina default.html, apó s o elemento < h1 >, adicione um hiperlink para Recursos

Humanos que faz referência ao arquivo HumanResources.html e direciona
o elemento < iframe > denominado iframeContent.
6. Apó s o hiperlink de Recursos Humanos, adicione um hiperlink para Relató rios de

Despesas que faça referência ao arquivo ExpenseReports.html e tenha como alvo
o elemento < iframe > denominado iframeContent.
7. Adicione um elemento <br /> apó s o hiperlink Relató rios de despesas.
O arquivo default.html completo deve se parecer com o seguinte.
<! DOCTYPE html>
<head>
</head>
<body>
<img src = "Images / ContosoLogo.jpg" />
<a href="HumanResources.html" target="iframeContent"> Recursos Humanos </a>
<a href="ExpenseReports.html" target="iframeContent"> Relató rios de despesas </a>
<br />
59
<iframe name = "iframeContent" src = "MainContent.html"> </iframe>
</body>
</html>
8. Nos arquivos HumanResources.html e ExpenseReports.html, adicione uma tag <br /> ao

final do corpo do texto e, em seguida, adicione um hiperlink à pá gina inicial que faz
referência a MainContent.html.
Observe que você nã o precisa direcionar o quadro atual porque o comportamento padrã o
do hiperlink é substituir a pá gina atual pela nova pá gina. A seguir está um exemplo do
arquivo ExpenseReports.html completo.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
Conteú do dos Relató rios de Despesas aqui.

<br />
<a href="MainContent.html"> Pá gina inicial </a>
</body>
</html>
Você deverá ver a nova pá gina inicial com hiperlinks. Se você clicar no hiperlink Recursos
Humanos, deverá ver o conteú do HumanResources.html carregado no elemento < iframe >,
conforme mostrado na Figura 2-4. No conteú do < iframe >, você deve ver um hiperlink para
a pá gina inicial em que pode clicar para recarregar o arquivo MainContent.html no
elemento < iframe >.
NOTA CLIQUE ATUALIZAR PARA VER O HYPERLINK DE CASA
Você pode não ver o hiperlink Home porque a página original pode estar
armazenada em cache.
Clique com o botão direito no < iframe > e clique em Atualizar.
60

FIGURA 2-4 A pá gina default.html mostrada apó s clicar no hiperlink Recursos
humanos Exercícios práticos sugeridos
As seguintes prá ticas adicionais foram elaboradas para lhe dar mais oportunidades de
capítulo.
■■ Exercício 1 Saiba mais sobre cada uma das tags HTML que fazem parte do HTML5
especificaçã o usando cada um em um documento HTML.
■■ Exercício 2 Saiba mais sobre como incorporar conteú do adicionando imagens e mapas
de imagens a um documento HTML .
Exercícios de prá tica sugerida CAPÍTULO 2
61
Respostas
Lição 1
1. Resposta correta: C
A. Incorreto: embora este exemplo funcione hoje, é possível que um atributo vin possa ser

introduzido por uma versã o futura do HTML que causaria um conflito.
B. Incorreto: Você nã o pode usar o atributo id como um atributo expando porque o

atributo id já está definido pela especificaçã o HTML5 para fornecer um identificador
exclusivo para um elemento.
C. Correto: Este é um atributo expando definido corretamente que nã o entrará em conflito

com atributos introduzidos por versõ es futuras de HTML porque o nome do atributo é
prefixado com “dados-“ conforme exigido pela especificaçã o HTML.
D. Incorre cto : Embora este exemplo funcione hoje, é possível que um atributo vin possa
ser introduzido por uma versã o futura do HTML que causaria um conflito.
A. Correto: HTML5 é precedido e derivado de HTML 4.01.
B. incorreto: Al embora raiz do HTML é SGML, o que significa que HTML5 é derivado de

SGML, HTML5 é precedida por HTML 4.01.
C. Incorreto: embora o XHTML 1.0 tenha sido lançado apó s o HTML 4.01, o HTML5 nã o é
herdado do XHTML1.0.
D. Incorreto: Embora XHTML1.0 herde de XM L, HTML5 nã o.
A. Incorreto: O elemento < html > é o elemento raiz do seu documento HTML5, mas deve

ser listado apó s você indicar o tipo de documento ao navegador.
B. Incorreto: a tag < head > deve estar contida no elemento < html >, portanto, nã o pode

ser localizada no início do documento HTML5.
C. Incorreto: a tag < title > deve estar contida no elemento < head >, portanto, nã o pode ser

localizada no início do documento HTML5.
D. Correto: O <! DOCTYPE html> indica ao navegador que este é um HTML5
documento.
4. Respostas corretas: A, B e D
A. Correto: O uso de disabled por si só , sem valor, é o método minimizado para

implementar atributos booleanos.
B. Correto: O uso de disabled com um valor vazio é uma forma de implementar atributos
booleanos usando a forma entre aspas.
62
C. Incorreto: O uso de disabled com um valor true nã o é uma forma aceitá vel de
implementar atributos booleanos .
D. Correto: O uso de disabled com um valor igual ao nome do atributo é uma forma de
implementar atributos booleanos usando a forma entre aspas.
Lição 2
A. incorreto: O < a > elemento cria um hiperlink.
B. Incorreto: O elemento < iframe > cria um quadro embutido que faz referência a outro

documento HTML.
C. Incorreto: O elemento < img > incorpora uma imagem no documento HTML atual.

D. Correto: O elemento < embed > incorpora um objeto como um arquivo Flash no
documento HTML atual .
A. Correto: O tipo de arquivo SVG é usado para criar Grá ficos Vetoriais Escalá veis, que sã o
bem dimensionados enquanto mantêm a qualidade.
B. Incorreto: O tipo de arquivo GIF é melhor para imagens pequenas com cores limitadas,
mas é baseado em raster e nã o é bem dimensionado.
C. Incorreto: O tipo de arquivo JPG é melhor para fotos quando milhõ es de cores sã o
usadas e alta compactaçã o é desejá vel, mas é baseado em raster e nã o é bem dimensionado.
D. Incorreto: O tipo de arquivo PNG é melhor para fotos quando milhõ es de cores sã o
usadas e a compactaçã o média sem perda é desejá vel, mas é baseado em raster e nã o tem
uma boa escala.
63
CAPÍTULO 3
Começando com
JavaScript
Ao criar documentos HTML, quase sempre você adicionará um comportamento para

tornar o documento mais interativo. Você pode ter animaçõ es ou botõ es que executam
vá rias açõ es. Talvez você precise recuperar dados do servidor enquanto um usuá rio está
digitando em uma caixa de texto. Você pode usar JavaScript para realizar essas tarefas
porque JavaScript é a linguagem de programaçã o da web.
Este capítulo começa apresentando o JavaScript e, em seguida, examina o ambiente de teste

do JavaScript e o desenvolvimento orientado a testes (TDD). Assim que você entender o
que é JavaScript, vai querer começar a escrever algum có digo para ver se ele funciona da
maneira que você acha que deveria ser. Você vai querer testar seus conhecimentos. Você
vai querer escrever có digo para documentos HTML com os quais está trabalhando.
Configurando um ambiente de teste, você pode escrever có digo e testá -lo sem exigir o
documento HTML de produçã o. Você deseja ter o má ximo de separaçã o possível entre o
có digo JavaScript e o documento HTML, para poder escrever o có digo JavaScript
independentemente do documento HTML. Quanto antes você tiver um ambiente de teste
configurado, mais cedo será capaz de começar a escrever có digo JavaScript.

■■ Liçã o 1: Apresentando JavaScript 66
■■ Liçã o 2: Escrevendo, testando e depurando JavaScript 89
■■ Liçã o 3: Trabalhando com objetos 108
65
Lição 1: Apresentando JavaScript
Esta liçã o apresenta uma grande parte da linguagem JavaScript. Embora muito do conteú do

exista em versõ es anteriores do JavaScript, todo o conteú do deste capítulo faz parte da
especificaçã o JavaScript mais recente.
■■ Defina as variá veis JavaScript .
■■ Crie instruçõ es JavaScript.
■■ Crie declaraçõ es de funçõ es.
■■ Crie expressõ es de funçã o.
■■ Converta objetos para um tipo diferente.
■■ Escreva declaraçõ es condicionais.
■■ Escreva instruçõ es de loop.
■■ Lidar com erros.
Tempo estimado de aula : 60 minutos
JavaScript nã o está relacionado a Java, embora seja uma linguagem de chaves como Java, C
#, C ++ e muitas outras linguagens de programaçã o. JavaScript está relacionado ao
ECMAScript, entretanto. A Ecma International, trabalhando com outras organizaçõ es, criou
esta linguagem de script padronizada na especificaçã o ECMA-262 e ISO / IEC 16262. A
linguagem é amplamente usada para scripts do lado do cliente na web, e você normalmente
vê vá rias variaçõ es bem conhecidas de ECMAScript, como JavaSc ript, JScript e
ActionScript. A versã o atual é ECMAScript Edition 5.1 e os navegadores mais comuns
suportam ECMAScript Edition 5.0 ou mais recente.
O JavaScript nã o tem tipo, o que significa que, ao criar uma variá vel, você nã o precisa
especificar seu tipo. Isso pode parecer um recurso porque você declara uma variá vel com a
palavra-chave var e atribui uma string à variá vel e, posteriormente, pode atribuir um
nú mero à mesma variá vel. No entanto, é difícil aplicar o Microsoft IntelliSense a idiomas
nã o digitados. É tã o difícil manter o có digo porque é difícil saber o tipo da variá vel. Isso
pode fazer com que você desenvolva uma aversã o imediata pelo idioma, mas persevere e
trabalhe com o idioma. Você ficará surpreso com o poder do JavaScript. Embora você possa
nunca querer negociar em Visual Basic .NET ou C #, você descobrirá que quanto mais
tempo você gasta com JavaScript, mais respeito você desenvolverá por essa linguagem.
Uma maneira de aliviar a dor de aprender JavaScript é certificar-se de que está usando
ferramentas que podem ajudá -lo. A versã o mais recente do Visual Studio 2012 adiciona
mais IntelliSense ao JavaScript e 66
CAPÍTULO 3 Introduçã o ao JavaScript
adiciona o Console JavaScript, que pode simplificar a depuraçã o. Pesquise na web por
outras ferramentas, como Resharper da JetBrains. Esta ferramenta possui muitos recursos
que podem ajudá -lo a escrever o có digo JavaScript.
Compreender a função dos dados
Quando você deseja criar um programa, normalmente descobre que o programa deve
acessar e manipular dados porque os dados estã o na raiz de todos os sistemas. Você coleta
dados, manipula dados, armazena dados, recupera dados, exibe dados e assim por diante.
Os dados estarã o em formas diferentes, mas a maioria dos dados pode ser dividida em
partes menores chamadas de valores . JavaScript define um tipo de valor como um objeto,
um valor primitivo ou uma funçã o. Um valor primitivo é um dado representado em seu
nível mais baixo de implementaçã o da linguagem e, em chave
Termos Java Script é um dos seguintes tipos: indefinido, nul, booleano, nú mero ou

string. Uma função é um objeto calibrá vel e uma funçã o que é membro de um objeto é
chamada de método .
JavaScript também define os seguintes objetos internos: o objeto global , o objeto Object, o
objeto Function, o objeto Array, o objeto String, o objeto Boolean, o objeto Number, o objeto
Math, o objeto Date, o objeto RegExp , o objeto JSON e vá rias variaçõ es de objetos Error.
Usando expressões para produzir dados
Uma expressão é um trecho de có digo que produz um valor. Uma expressã o pode ser um

valor simples ou pode conter operandos e operadores. Símbolos matemá ticos, como mais,
menos, chave
Os termos dividem e multiplicam os sinais sã o exemplos de operadores. Nú meros sã o

operandos. Os operadores fazem com que uma operaçã o seja executada usando os
operandos em cada lado do operador. Observe que um operando pode ser um valor ou
outra expressã o.
Compreender o tipo de número
Os nú meros sã o um dos tipos primitivos definidos em JavaScript. Um valor numérico é um

membro do tipo de nú mero e corresponde a um valor IEEE 754 de precisã o dupla, formato
biná rio de 64 bits.
Em JavaScript, todos os valores numéricos sã o representados internamente como valores

de ponto flutuante. O nú mero de 64 bits é dividido em três componentes: a fraçã o é de 52
bits (bits de 0 a 51), o expoente é de 11 bits (bits de 52 a 62) e o sinal é um ú nico bit (bit
63).
O maior nú mero inteiro que pode ser representado internamente é 253, que é
9.007.199.254.740,9 94. Depois disso, os nú meros sã o armazenados como uma fraçã o
vezes 2expoente. Ao realizar cá lculos inteiros, os resultados sã o sempre precisos, mas ao
trabalhar com fraçõ es, podem surgir problemas. Um cá lculo como 0,1 + 0,2 nã o resultará
em 0,3 devido ao m anner no qual as fraçõ es sã o armazenadas. O resultado será
0,30000000000000004 porque 0,1 e 0,2
nã o pode ser facilmente armazenado como um valor de fraçã o biná ria. Para situaçõ es como
essa, você pode precisar arredondar seus resultados para truncar a fraçã o para um nú mero
fixo de casas decimais.
Liçã o 1: Apresentando JavaScript CAPÍTULO 3
67
VALORES ESPECIAIS
O tipo de nú mero suporta os seguintes valores especiais:
■■ NaN Nã o é um indicador de nú mero. Executar qualquer operaçã o matemá tica

com NaN produzirá um resultado de NaN .
■■ Infinito Representa infinito positivo quando seu valor excede 1,7976931348623157E
+ 10308.
■■ -Infinito Representa infinito negativo quando seu valor excede
-1,7976931348623157E + 10308.
■■ undefined Nenhum valor foi atribuído.
ARITMÉTICA
Precisamos de nú meros para realizar operaçõ es aritméticas. Muitas operaçõ es aritméticas,

como adiçã o, subtraçã o, multiplicaçã o e divisã o, executam uma operaçã o em dois valores
numéricos para produzir um valor numérico resultante. Em JavaScript , você pode escrever
uma expressã o para fazer algo assim:
7+3*8
Esta é uma expressã o com operandos e operadores. O sinal de mais (+) e o sinal de
multiplicaçã o (*) sã o operadores. Os nú meros sã o operandos. Os operadores fazem com
que uma operaçã o seja executada, usando os operandos de cada lado do operador.
OPERADOR PRECEDENTE
Nesta expressã o, você nã o soma 7 e 3 para obter 10 e, em seguida, multiplica 10 por 8 para
obter 80.
JavaScript oferece suporte à precedência de operador, a atribuiçã o de uma precedência, ou
prioridade, a cada operador. Nesta expressã o, o sinal de multiplicaçã o tem uma
precedência maior do que o sinal de adiçã o, entã o 3 é primeiro multiplicado por 8 para dar
24 e, em seguida, 7 é adicionado a 24 para obter 31, que é diferente do resultado anterior
de 80. o sinal de adiçã o (+) e o sinal de subtraçã o (-) têm a mesma precedência. O sinal de
multiplicaçã o (*) e o sinal de divisã o (/) têm a mesma precedência, que é maior do que
os sinais de adiçã o e subtraçã o. Se você estiver trabalhando com uma expressã o na qual
vá rios operadores têm a mesma precedência, basta aplicar os operadores da esquerda para
a direita.
Neste exemplo, os sinais de adiçã o e multiplicaçã o sã o operadores. O sinal de multiplicaçã o

tem 3 e 8 como operandos que produzem uma expressã o. O sinal de mais tem 7 e o
resultado de 3 vezes 8 como operandos. No ú ltimo caso, o segundo operando é uma
expressã o.
No exemplo anterior, o que você faria se realmente quisesse adicionar 7 e 3 primeiro?
Você pode usar parênteses para indicar a ordem de precedência. Os parênteses têm a
precedência mais alta, portanto, a expressã o entre parênteses será executada
primeiro. Aqui está a expressã o modificada:
(7 + 3) * 8
68
CAPÍTULO 3 Introduçã o ao JavaScri pt
Portanto, você nã o precisa necessariamente memorizar a precedência de cada operador

porque pode substituir a ordem de precedência usando parênteses.
MODULO
O operador mó dulo (%) executa uma divisã o implícita e retorna o restante. Por exemplo,
25% 7 produz um resultado de 4, que é o restante apó s a divisã o de 25 por 7.
Compreender o tipo de string
Uma string é uma coleçã o de caracteres e é usada para representar texto. Você pode criar
uma string colocando aspas simples ou duplas. Nã o importa se você usa aspas simples ou
duplas, desde que os delimitadores inicial e final correspondam, como nos exemplos a
seguir:
"Todo bom menino merece fudge"
'A rá pida raposa marrom pula sobre o cachorro preguiçoso'
'O médico disse:' Hoje é seu dia de sorte! ' '

"Vou ficar feliz quando você me der a notícia!"
Observe que o terceiro exemplo demonstra o uso de aspas simples quando você precisa
inserir aspas duplas na string. O quarto exemplo demonstra o uso de aspas duplas quando
você precisa inserir uma aspa simples na string. Se precisar incorporar aspas simples ou
duplas à string, você pode usar o caractere de barra invertida (\) para escapar das aspas
simples ou duplas, conforme mostrado no exemplo a seguir:
'O médico disse:' Tenho o prazer de anunciar que é uma menina! ' '
"O médico disse \" Tenho o prazer de anunciar que é uma menina! \ ""
No primeiro exemplo, a barra invertida é usada para escapar da aspa simples, portanto, nã o
é interpretada como sendo o final da string. No segundo exemplo, a barra invertida é usada
para evitar as aspas duplas, de forma que nã o sejam interpretadas como o final da string.
Algumas outras sequências de escape comuns sã o \ t para incorporar uma guia e \ n para
incorporar uma nova linha.
Você também pode usar \ uHHHH onde HHHH é um có digo hexadecimal de 4 dígitos para
incorporar uma sequência Unicode .
Você pode usar o sinal de mais para representar a concatenaçã o de strings. A seguir está
um exemplo em que vá rias strings sã o concatenadas para produzir uma grande string:
- Hickory Dickory Dock. + "O mouse acelerou o reló gio." + 'O reló gio bateu uma ...'
Você p robably nã o faria isso porque este exemplo poderia facilmente ter sido escrito como
uma ú nica corda grande, mas você pode querer continuar uma string em vá rias linhas,
como o seguinte:
- Hickory Dickory Dock. +
"O mouse correu o reló gio." +
'O reló gio bateu uma ...'
69
Usando operadores unários
Quando um operador requer dois operandos, é um operador biná rio. Exemplos de

operadores biná rios sã o mais, menos, multiplicaçã o, divisã o e mó dulo. Alguns operadores,
chamados de operadores uná rios, requerem apenas um ú nico operando. Um operador
uná rio é o operador typeof, que requer um ú nico operando e retorna uma string que indica
o tipo do operando, da seguinte forma: typeof 'Hello World'
tipo de 19,5
tipo de verdade
Nos três exemplos, o primeiro exemplo retorna 'string', o segundo exemplo retorna
'nú mero' e o terceiro exemplo retorna 'Booleano'.
Além de serem operadores biná rios, os sinais de mais e menos também podem ser usados
como operadores uná rios, como nos exemplos a seguir:
+23
-49
Nestes exemplos, os sinais de mais e menos estã o sendo usados como operadores uná rios
para especificar os sinais dos nú meros.
Compreendendo o tipo booleano
O tipo booleano pode conter os valores verdadeiro e falso. Embora você possa usar esses
valores diretamente, é mais comum produzir um valor verdadeiro ou falso comparando
dois valores, conforme mostrado nos exemplos a seguir que usam os sinais de menor que
(<) e maior que (>): 10 <9
20> 3
O primeiro exemplo produz um valor falso, enquanto o segundo exemplo produz um valor
verdadeiro. Os pró ximos exemplos usam o sinal de menor ou igual a (<=) e o sinal de maior
ou igual a (> =):
5 <= 4
7> = 8
A primeira expressã o é avaliada como falsa e a segunda expressã o é avaliada como

falsa. Você também pode usar os operadores de igual (==) e diferente de (! =), Conforme
mostrado no exemplo a seguir:
'Maçã s'! = 'Laranjas'
10 == 13 - 3
Ambas as expressõ es sã o avaliadas como verdadeiras.

OPERADORES LÓGICOS
JavaScript fornece três operadores ló gicos: e (&&), ou (||) e nã o (!). Esses operadores

podem ser usados em expressõ es para produzir um valor booleano. O operador e produzirá
um valor verdadeiro se ambos os operandos forem avaliados como verdadeiros; caso
contrá rio, produz um valor falso. O operador ou produzirá um valor verdadeiro se qualquer
operando for avaliado como verdadeiro; caso contrá rio, produz um valor falso. O nã o 70
operador é um operador uná rio que inverte o operando, portanto, se o operando for
avaliado como verdadeiro, o resultado será falso e vice-versa. Considere os seguintes
exemplos:
'Maçã s' == 'Laranjas' && 5> 3
5> 10 || 4 <2
3 <10 e 10> 8
7> 5 || 1> 2
! (7> 5 || 1> 2)
O primeiro exemplo usa o operador e e produz um resultado falso porque o primeiro

operando é avaliado como falso. O segundo exemplo usa o operador ou e produz um
resultado falso porque nenhum operando é avaliado como verdadeiro. O terceiro exemplo
usa o operador e e produz um resultado verdadeiro porque ambos os operandos sã o
avaliados como verdadeiros. O quarto exemplo usa o operador ou e produz um resultado
verdadeiro porque o primeiro operando (7> 5) é avaliado como verdadeiro. O quinto
exemplo usa o operador ou e o operador not. Entre parênteses, a expressã o é avaliada
como verdadeira, mas o operador not inverte o verdadeiro para produzir um resultado
falso.
OPERADORES DE CURTO CIRCUITO

No exemplo anterior de JavaScript, a primeira linha produziu um valor falso porque ambos
os operandos nã o foram avaliados como verdadeiros, mas há mais: porque o primeiro
operando foi avaliado como falso, o JavaScript nã o fez nenhuma tentativa de avaliar o
segundo operando. Isso é conhecido como avaliaçã o de curto-circuito. No quarto exemplo,
o resultado é verdadeiro porque o primeiro operando foi avaliado como
verdadeiro. JavaScript precisava de apenas um operando para ser verdadeiro para produzir
um resultado verdadeiro; nenhum tempo foi perdido avaliando o segundo operando.
Usando declarações
Em JavaScript, uma instruçã o é um comando que termina com um ponto e vírgula. Uma

instruçã o é diferente de uma expressã o porque uma expressã o apenas produz um valor e,
em seguida, o JavaScript descarta o valor. Uma declaraçã o informa ao host JavaScript o que
fazer. O host pode ser o navegador ou o Windows 8. Uma instruçã o pode ser um comando
para armazenar o resultado de uma expressã o para que possa ser reutilizado em outras
instruçõ es.
Usando variáveis
Uma maneira de armazenar os resultados de uma expressã o é atribuir os resultados a uma

variá vel. Uma variável é uma referência nomeada a um local na memó ria para
armazenamento de dados. Para criar uma variá vel, use a chave
Termos da palavra-chave JavaScript var, como no exemplo a seguir:
var totalCost = 3 * 21,15;
Neste exemplo, uma variá vel chamada totalCost é criada e o resultado de 3 * 21,15 é

atribuído à variá vel totalCost . Depois que essa variá vel é criada, ela pode ser um operando
em outras expressõ es, como a seguinte:
var totalCost = 3 * 21,15;
imposto var = custo total * 0,05;
71
Neste exemplo, outra instruçã o foi adicionada à instruçã o do exemplo anterior. Esta

declaraçã o contém uma expressã o que usa a variá vel totalCost para calcular o imposto e
armazená -lo em outra variá vel chamada imposto .
Observe que você pode declarar a variá vel em uma instruçã o e inicializá -la em uma
instruçã o diferente, da seguinte maneira:
var totalCost;
var tax;
custo total = 3 * 21,15;
imposto = custo total * 0,05;
Este exemplo mostra como você pode declarar todas as suas variá veis primeiro e, em
seguida, inicializar as variá veis mais tarde no programa.
O valor que você atribui a uma variá vel nã o é permanente; é chamado de variá vel porque
você pode alterá -lo. Os exemplos a seguir modificam a variá vel totalCost : var totalCost = 3 *
21,15;
custo total = custo total * .1;
custo total * = 0,1;
O primeiro exemplo inicializa a variá vel totalCost . O segundo exemplo lê o valor

de totalCost , multiplica o valor por 0,1 e armazena o resultado de volta em totalCost . Isso
substitui o valor antigo pelo novo valor. O terceiro exemplo é um atalho para a açã o no
segundo exemplo. Ele usa a sintaxe * = para indicar que você deseja multiplicar o valor
existente por 0,1
e armazene o resultado na mesma variá vel:
Regras para nomear variáveis
Cada linguagem de programaçã o tem regras para nomear variá veis, e JavaScript nã o é

exceçã o.
Você deve seguir as seguintes regras ao nomear variá veis JavaScript.
■■ O nome de uma variá vel pode conter nú meros, mas eles nã o podem começar com um
nú mero. Os exemplos legais sã o x 1, y 2, gift4you . Os exemplos ilegais
sã o 4YourEyes , 2give , 1ForAl .
■■ Os nomes das variá veis nã o devem conter operadores matemá ticos ou

ló gicos. Exemplos ilegais sã o segunda a sexta , caixas + sacolas , custo * 5 .
■■ Os nomes das variá veis nã o devem conter sinais de pontuaçã o de qualquer tipo além do
sublinhado (_) e do dó lar ($). Os exemplos legais
sã o Vehicle_identification , first_name , last_name , $ cost , total $ . Exemplos ilegais
sã o thisDoesn'tWork , begin; end , Many # s .
■■ Os nomes das variá veis nã o devem conter espaços.

■■ Nomes de variá veis nã o devem ser palavras-chave JavaScript, mas podem conter
palavras-chave.
Exemplos ilegais sã o function, char, class, for, var. Os exemplos legais sã o theFunction , for-
Loop , myVar .
■■ Os nomes das variá veis diferenciam maiú sculas de minú sculas. Exemplos de variá veis
de casos diferentes sã o MyData , myData , mydata , MYDATA .
72
Variáveis de nomenclatura
Ao criar uma variá vel, dê a ela um nome que seja descritivo o suficiente para que você nã o
precise de um comentá rio para descrevê-la. Se você precisar adicionar um comentá rio para
descrever o uso da variá vel, o comentá rio estará apenas na declaraçã o. Se você nomear a
variá vel de uma forma que nã o requeira um comentá rio, o nome significativo será legível
em todo o seu có digo. Aqui estã o alguns exemplos bons e ruins de nomenclatura de
variá veis:
// maus exemplos
var last; // data do ú ltimo acesso
var current; // veículo atual

var mudou; // a marca do veículo foi alterada
// bons exemplos
var lastAccessedDate;
var currentVehicle;
var VehicleMakeWasChanged;
Observe a caixa usada nos bons exemplos. A convençã o de nomenclatura recomendada

para variá veis JavaScript é usar maiú sculas e minú sculas, o que significa que você inicia um
nome de variá vel em baixo e entã o coloca em maiú scula a primeira letra de cada palavra
subsequente que compõ e o nome da variá vel.
Embora um nome de variá vel possa conter o sinal de dó lar e o sublinhado, geralmente é
preferível nã o usá -los. A exceçã o é ao atribuir objetos jQuery (discutidos no Capítulo 6,
“JavaScript essencial e jQuery”) a variá veis, quando você pode querer começar o nome da
variá vel com o sinal de dó lar.
Criando o ambiente
O exã o col de todas as variá veis e seus valores é comumente referido como o envi ente .
Quando o ambiente é criado, ele contém muitas variá veis padrã o mais as variá veis que você
chave
Os termos criam.
Em um aplicativo da web, cada vez que uma pá gina da web é carregada no navegador, um
novo ambiente é criado e o ambiente antigo é destruído . Todas as variá veis que você criar
ficam acessíveis até que uma nova pá gina da web seja carregada.
Em um programa do Windows 8, um ambiente é criado quando o aplicativo é iniciado e o

ambiente é destruído quando o aplicativo é encerrado. Uma variá vel está acessível
enquanto seu programa estiver em execuçã o.
Trabalhando com funções
Uma função é um agrupamento de instruçõ es que sã o executadas quando você chama a

funçã o.
Funçõ es promovem a reutilizaçã o de có digo porque você pode chamar a funçã o muitas
vezes de dentro de Key
Termos seu có digo. As funçõ es podem ter parâ metros, que permitem passar dados para a
funçã o.
As funçõ es também podem ter um valor de retorno, portanto, você pode retornar os
resultados da funçã o ao contador.
73
Usando declarações de função
Uma funçã o pode ser declarada usando a palavra-chave function e, em seguida, fornecendo
um nome (também conhecido como identificador ), a lista opcional de parâ metros entre
parênteses e um conjunto de chaves com o agrupamento de instruçõ es, da seguinte forma:
function Add (x, y) {
retornar x + y;
Este é um exemplo de declaração de função , na qual a funçã o é chamada de Add e tem dois
parâ metros, x e y . A funçã o possui um agrupamento de instruçõ es, denotado por chaves
(também conhecido como bloco de código ). Esta funçã o possui apenas uma instruçã o, mas
pode ter vá rias instruçõ es.
Quando você chama a funçã o a partir do seu có digo, está chamando ou aplicando a

funçã o. Um exemplo de chamada, invocaçã o ou aplicaçã o da funçã o Add é o seguinte: var a
= 5;
var b = 10;
var c = Adicionar (a, b) ;
Neste exemplo, três variá veis sã o declaradas. Variá veis um e b sã o inicializados com dados
a serem passados como argumentos para a funçã o Adicionar. A variá vel c conterá o valor de
retorno da funçã o Add. A funçã o Add receberá os argumentos em seus parâ metros x e y . Y
Final, a instruçã o de retorno irá adicionar x e y e retornar o resultado, que é atribuído à
variá vel c .
NOTA DISTINDO “ARGUMENTO” E “PARÂMETRO”
Muitas pessoas usam os termos “argumento” e “parâmetro” como sinônimos, mas

esses termos são diferentes. Os argumentos representam os valores que você passa
para a função (variáveis a e b
no exemplo anterior), enquanto os parâmetros representam os valores recebidos
do chamador (variáveis x e y no exemplo anterior).
As declaraçõ es de funçã o podem ser chamadas antes da declaraçã o de funçã o ser declarada
porque as declaraçõ es de funçã o sã o resolvidas quando o JavaScript é analisado. O exemplo
a seguir será executado corretamente, embora a chamada para a funçã o Add seja antes da
funçã o Add: var a = 5;
var b = 10;
var c = Adicionar (a, b);
retornar x + y;
74
Usando expressões de função
Uma expressã o de funçã o produz um valor do tipo funçã o. Você pode atribuir expressõ es
de funçã o à s variá veis s ou executá -las diretamente. Aqui está um exemplo de uma
expressã o de funçã o sendo criada e atribuída a uma variá vel:
var addFunction = function (x, y) {
retornar x + y;
};
var c = addFunction (5, 10);
Primeiro, observe que addFunction é chamado depois que a expressã o de funçã o é

atribuída à variá vel addFunction . Se você tentasse chamar addFunction antes da atribuiçã o
da expressã o de funçã o à variá vel addFunction , uma exceçã o seria lançada.
A variá vel addFunction é do tipo função , em que a expressã o de funçã o é criada usando a

palavra-chave function para criar uma funçã o sem nome (também conhecida
como função anônima ) e, em seguida, a expressã o de funçã o é atribuída à variá vel. Uma
funçã o anô nima nã o tem nome ou identificador . Embora as expressõ es de funçã o possam
ser nomeadas ou anô nimas, é melhor deixar a funçã o anô nima para minimizar a confusã o.
As expressõ es de funçã o podem ser benéficas quando você deseja determinar o có digo
condicional y a ser executado no tempo de execuçã o. Aqui está um exemplo de quando você
pode adicionar dois valores ou subtrair um valor do outro:
var myFunction = function (x, y) {
retornar x + y;
};
// muito có digo
var c = minhaFunçã o (10, 5);
// muito có digo
minhaFunçã o = funçã o (x, y) {
return x - y;
};
// muito có digo;
var d = minhaFunçã o (10,5);
Neste exemplo, a variá vel c receberá um valor 15 porque myFunction foi declarada e

recebeu um có digo que adiciona x e y . A variá vel d recebe o valor 5
porque myFunction foi atribuído a um novo có digo que subtrai y de x .
Decidindo quais argumentos
JavaScript é muito vago ao passar argumentos para funçõ es. Se você tiver muitos
argumentos, o JavaScript simplesmente descarta os extras. Se você nã o tiver argumentos
suficientes, os valores dos parâ metros para os argumentos ausentes serã o indefinidos.
O maior benefício desse comportamento flexível é que você pode adicionar parâ metros a
um método que já foi criado e já está sendo chamado. Os parâ metros adicionados podem
fornecer funcionalidade extra que pode ser acessada , mas os calibres existentes continuam
a funcionar.

75
A desvantagem desse comportamento flexível é que você pode passar inadvertidamente

uma quantidade incorreta de argumentos para a funçã o e nã o obter nenhuma indicaçã o
de problema.
Usando as funções integradas de alerta, prompt e confirmação do navegador Ao

escrever aplicativos da web, o navegador fornece as seguintes funçõ es que podem
apresentar e coletar dados do usuá rio:
■■ alert Usado para exibir uma mensagem ao usuá rio em uma janela modal. O usuá rio clica
no botã o OK para fechar a janela de mensagem. O có digo a seguir produz a janela de alerta
na Figura 3-1:
alert ('Aqui está um alerta');
FIGURA 3-1 A janela de alerta mostrando uma mensagem e um botã o OK
■■ prompt Usado para consultar o usuá rio quanto à entrada, exibindo um prompt de

mensagem modal e uma caixa de texto para o usuá rio inserir os dados. A caixa de texto
pode ter um valor padrã o que permite ao usuá rio apenas pressionar Enter ou clicar no
botã o OK para aceitar o valor padrã o. O usuá rio pode fechar a janela clicando no botã o OK
ou Cancelar. A funçã o prompt retorna os dados que o usuá rio digitou na caixa de texto. O
có digo a seguir produz o prompt na Figura 3-2:
var promptResult = prompt ('Este é um prompt de informaçõ es', 'valor padrã o'); FIGURA
3-2 A janela de prompt que coleta texto
■■ confirmar Usado para consultar o usuá rio sobre OK ou Cancelar exibindo uma janela de
mensagem modal. O usuá rio pode fechar a janela clicando no botã o OK ou Cancelar. A
funçã o de confirmaçã o retorna verdadeiro (quando o botã o OK é clicado) ou falso (quando
o botã o Cancelar é clicado):
var confirmResult = confirm ('Você confirma?');

76
FIGURA 3-3 A janela de confirmaçã o apresenta uma mensagem e os botõ es OK e Cancelar.

Essas funçõ es internas e quaisquer funçõ es que você escrever podem ser substituídas
facilmente porque o nome da funçã o é uma variá vel. Considere o seguinte cená rio, no qual
uma funçã o diferente é atribuída à funçã o prompt:
prompt = function () {
retornar 'olá novamente';
};
Este có digo substitui o comportamento da funçã o prompt por uma funçã o que sempre
retorna a string, 'hel o again'. O nome da funçã o é representado por uma variá vel e você
pode alterar seu valor y dinamicamente. Isso é o mesmo para declaraçõ es de funçã o e
expressõ es de funçã o.
Variáveis de escopo
O escopo é o contexto dentro de um programa de computador no qual um nome de variá vel

é vá lido e pode ser usado para acessar a variá vel. Fora do escopo de um nome de variá vel, o
valor da variá vel Key
Os te rms ainda podem estar armazenados e podem até estar acessíveis de alguma forma,
mas o nome nã o pode acessar o valor.
Em JavaScript, existem essencialmente dois escopos, global e local. Uma variá vel com
escopo global pode ser acessada de qualquer lugar do programa. Uma variá vel com um
escopo local é acessível apenas de dentro da funçã o na qual a variá vel está definida, entã o
você pode pensar no escopo local como sendo um escopo de funçã o.
O fato de o escopo local ser limitado a uma funçã o é muito diferente de muitas outras
linguagens, em que um novo escopo local é criado para cada conjunto de chaves. Isso
significa que em muitas outras linguagens, as instruçõ es condicionais e de loop que têm
chaves também iniciam um novo contexto local. Este nã o é o caso do JavaScript, no qual o
ú nico escopo local está na funçã o. Variá veis que sã o declaradas em qualquer lugar dentro
da funçã o terã o um escopo de funçã o local. Para evitar confusã o, você deve declarar todas
as variá veis de funçã o na parte superior da funçã o.
NOTA TENHA CUIDADO PARA NÃO CRIAR VARIÁVEL GLOBAL S IMPLICITAMENTE
Se você não usar a palavra-chave var ao declarar uma variável, a variável

será criada automaticamente , mas terá um escopo global. Considere o seguinte
exemplo de código: totalCost = 3 * 21.15;
imposto = custo total * 1,05;
77
Se esse código estivesse dentro de uma função, você poderia ter pensado
que totalCost e tax seriam criados automaticamente com um escopo local, mas esse
não é o caso. Acontece que totalCost
e o imposto sempre será criado com um escopo global , e essas variáveis estarão

acessíveis de qualquer lugar do programa. Você sempre deve declarar variáveis
usando a palavra-chave var .
Funções de aninhamento e escopo de variável local aninhada
Há mais informaçõ es sobre o escopo local que você precisa saber. No ript JavaSc, você pode
aninhar declaraçõ es de funçã o dentro de declaraçõ es de funçã o. JavaScript permite vá rios
níveis de aninhamento de declaraçã o de funçã o. Lembre-se de que uma funçã o produz um
escopo local, portanto, você pode obter escopos adicionais usando este truque de
aninhamento de funçã o .
As funçõ es aninhadas sã o privadas para a funçã o na qual sã o definidas. As funçõ es

aninhadas também iniciam seu pró prio contexto local, enquanto as variá veis definidas sã o
acessíveis apenas nesta funçã o. Além disso, uma funçã o aninhada pode acessar variá veis
definidas no contexto local da funçã o pai, no contexto local da funçã o avô e assim por
diante. Aqui está um exemplo de uso de uma funçã o aninhada para obter um escopo local
aninhado:
function areaOfPizzaSlice (diâ metro, fatiasPerPizza) {
return areaOfPizza (diâ metro) / sl icesPerPizza;
function areaOfPizza (diâ metro) {
raio var = diâ metro / 2;
return 3,141592 * raio * raio;
Neste exemplo, a funçã o areaOfPizza está aninhada na funçã o areaOfPizzaSlice, o que

significa que a funçã o areaOfPizza é declarada dentro do escopo local da funçã o
areaOfPizzaSlice. A funçã o areaOfPizza nã o está acessível fora
da funçã o areaOfPiz zaSlice. A variá vel radius é declarada dentro do escopo local aninhado
e é acessível apenas a partir da funçã o areaOfPizza. Existem duas variá veis de diâ metro,
uma no escopo local de areaOfPizzaSlice e outra na areaOfPizza. Quando na funçã o
areaOfPizza, a variá vel diâ metro que está definida naquele contexto local está
acessível. Quando na funçã o areaOfPizzaSlice, a variá vel de diâ metro que está definida
naquele escopo local está acessível. A variá vel slicePerPizza é acessível em ambas as
funçõ es porque as variá veis pai sã o acessíveis aos filhos, desde que nã o sejam ocultadas
por variá veis locais com o mesmo nome.
Em muitos cená rios, você desejará converter uma variá vel de um tipo para outro. Por
exemplo, a funçã o prompt sempre retorna uma string, mas você solicitou que o usuá rio
insira um nú mero. Para conversõ es, você pode usar as funçõ es Nú mero e String.
78
Usando a função Número

A funçã o Number tenta converter o argumento do objeto que é passado para a funçã o em
um nú mero. Se o argumento do objeto nã o puder ser convertido em um nú mero, um valor
de NaN
(nã o um nú mero) é retornado.
Considere o seguinte exemplo, no qual o usuá rio é solicitado a inserir sua idade, a idade é
incrementada e uma mensagem é exibida, usando a nova idade: var age = prompt ('Enter
age', '');
alerta ('Em breve você terá ' + idade + 1 + ' anos!');
Quando você executa este có digo e insere um nú mero como 20, a mensagem é exibida
como You Will Soon Be 201 Years Old! como idade é uma string, o sinal de mais y converte
automaticamente o nú mero 1 em uma string e concatena com a idade, resultando em 201
idade.
Usando a funçã o Nú mero, você pode converter a idade em um nú mero e adicionar 1,

conforme mostrado no exemplo a seguir:
var age = prompt ('Insira a idade', '');
alerta ('Em breve terá ' + Nú mero (idade) + 1 + 'anos!');
Se você tentar executar este có digo, obterá a mesma resposta de idade de 201 anos. O que
aconteceu? O primeiro sinal de mais possui uma string no lado esquerdo e a funçã o
Numérica à direita.
Embora você tenha convertido para um nú mero, o primeiro sinal de mais y converteu
automaticamente o nú mero de volta em uma string e retornou o mesmo valor de 201.
Para resolver o problema, coloque parênteses ao redor da matemá tica para garantir que a
idade receba o valor apropriado antes de ser convertida em uma string e concatenada da
seguinte forma: var age = prompt ('Digite a idade', '');
alert ('Em breve terá ' + (Nú mero (idade) + 1) + 'anos!'); Ao executar este có digo, você
obtém uma resposta de You Will Soon Be 21 Years Old! porque a idade é convertida em um
nú mero e incrementada antes que qualquer concatenaçã o de string ocorra.
■■ Você fornece ao usuário o ano de seu veículo e coloca o resultado em um
variável VehicleYear . O ano atual é armazenado em uma variável currentYear . Você

deseja exibir uma mensagem que afirma: “Seu veículo tem xx anos!” onde xx é
a idade do veículo. Qual será essa linha de código?
■■ Você pode usar a função de alerta para exibir a mensagem e a função

Número para converter a variável VehicleYear em numérica da seguinte forma: alert
('Seu veículo é' + (atualYear - Nú mero (veículo Ano)) + 'anos!') ; Liçã o 1: Apresentando
JavaScript CAPÍTULO 3
79
Usando a função String
A funçã o String tenta converter o argumento do objeto que é passado para a funçã o em
uma string. Considere o cená rio em que você tem dois nú meros s, como 10 e 20, e deseja
concatená -los como strings e exibir a string resultante de 1020. Você pode tentar o
seguinte có digo:
var x = 10;
var y = 20;
alerta (x + y);
Este exemplo exibirá um valor de 30 porque o sinal de mais adicionou os valores em vez de
concatená -los como strings. Para resolver o problema, você pode usar a funçã o String para
converter os nú meros em strings da seguinte forma:
var x = 10;
var y = 20;
alert (String (x) + String (y));
Este exemplo exibirá um valor de 1020 porque os nú meros foram convertidos em strings e,
em seguida, o sinal de mais concatenou os valores.
Programação condicional
Freqü entemente, você precisará executar determinado có digo quando uma expressã o for
avaliada como verdadeira e executar um có digo diferente quando a expressã o for avaliada
como falsa. É quando as palavras-chave if e switch podem ajudar.
Usando as palavras-chave if / else
Considere o cená rio em que o usuá rio é solicitado a inserir sua idade, um é adicionado à
idade e uma mensagem é exibida. Aqui está o có digo que foi usado anteriormente quando a
funçã o de prompt integrada foi discutida:
alert ('Em breve terá ' + (Num ber (idade) + 1) + 'anos!'); O que acontece se alguém inserir
Nã o sei para a idade? Esta string nã o é numérica e a mensagem exibida será You Will Soon
Be NaN Years Old, onde NaN significa Não é um número . Você pode fornecer
uma mensagem mais específica quando a entrada do usuá rio nã o for um nú mero. Isso pode
ser feito usando as palavras-chave if / else com uma funçã o integrada chamada isNaN, da
seguinte forma:
if (isNaN (idade))
alert ('Você precisa inserir um nú mero vá lido');
outro
aler t ('Em breve terá ' + (Nú mero (idade) + 1) + 'anos!'); 80
A funçã o isNaN aceita um argumento de objeto e testa esse objeto para ver se é numérico. A
funçã o isNaN retorna verdadeiro se o objeto nã o for numérico e falso se for numérico.
A palavra-chave if é usada com uma expressã o entre parênteses e avaliada como um valor
booleano. Essa expressã o é usada em seu có digo para orientar o fluxo do programa com
base no resultado da funçã o isNaN, que, quando verdadeira, exibe a mensagem You Need
To Enter A Valid Number. Observe que a palavra-chave if possui uma palavra-chave else
correspondente que é usada para fornecer um fluxo de programa alternativo quando a
expressã o if for avaliada como falsa. A palavra-chave else é opcional.
O exemplo anterior executa uma ú nica declaraçã o quando verdadeira e uma ú nica
declaraçã o quando falsa. Se você precisar executar vá rias instruçõ es quando verdadeiro ou
falso, deve colocar as instruçõ es entre colchetes para indicar que tem um bloco de có digo
para executar da seguinte forma: var age = prompt ('Enter age', '');
if (isNaN (idade)) {
idade = 0;
else {
idade = Nú mero (idade) + 1;

alerta ('Em breve você terá ' + idade + 'anos!');
Como regra, você deve considerar o uso de chaves o tempo todo. Isso permite que um
usuá rio adicione có digo ao bloco de có digo sem ter que pensar se as chaves existem.
Você também pode criar instruçõ es if encadeadas (também conhecido como cascata)
adicionando outro if apó s a palavra-chave else. Aqui está um exemplo n de cascata se:
if (isNaN (idade)) {
idade = 0;
else if (Nú mero (idade)> = 50) {
alerta ('Você está velho! Em breve terá ' + idade + 'anos!');
else if (Nú mero (idade) <= 20) {
alerta ('Você é um bebê! Em breve terá ' + idade + 'anos!');
outro
alert ('Em breve terá ' + (Nú mero (idade) + 1) + 'anos!');
Neste exemplo, o primeiro teste condicional verifica se a idade nã o é um nú mero.

A condiçã o else é verificar se a idade é maior ou igual a 50. A pró xima condiçã o anterior é
verificar se a idade é menor ou igual a 20. Finalmente y, a ú ltima condiçã o else está apenas
exibindo um padrã o mensagem.
81
Usando a palavra-chave switch
A palavra-chave switch pode ser usada quando um ú nico valor deve ser examinado e, com
base em seu valor, pode haver vá rios resultados. Considere o seguinte exemplo que usa
a palavra-chave switch, em que o usuá rio é solicitado a selecionar uma cor para o carro que
está comprando:
var carColor = prompt ('Qual carro de cor você gostaria de comprar?', 'branco'); switch
(carColor) {
case 'red':
alert ('Vermelho é uma escolha chique!');
intervalo;
caso 'preto':
alerta ('Preto fica bonito, mas você precisa lavar com frequência!');
intervalo;
caso 'branco':
alerta ('Branco está em estoque e você ganha um desconto!');
intervalo;
predefiniçã o:
alert ('A cor:' + carColor + 'nã o é conhecida.');
intervalo;
};
Neste exemplo, o usuá rio é solicitado a inserir uma cor de carro e é apresentado com um
valor padrã o de branco. A palavra-chave switch examina carColor para ver se seu valor
corresponde a qualquer um dos valores fornecidos nos casos. Se houver uma
correspondência, o có digo dentro do caso é executado até que o có digo alcance uma quebra
ou uma palavra-chave de retorno. Se nã o houver interrupçã o ou retorno, o có digo continua
no pró ximo caso ou padrã o.
Como você usa a opçã o com intervalos numéricos? Muitas pessoas diriam que você nã o
pode trabalhar com intervalos numéricos porque o switch está procurando uma
correspondência exata para um valor de caso, mas há um truque para resolver esse
problema. Considere o exemplo de cascateamento, abordado anteriormente, quando o
programa produziu uma mensagem diferente com base na resposta da idade do
usuá rio. Quatro categorias diferentes de respostas - se a idade nã o era um nú mero, se era
maior ou igual a 50, se era menor ou igual a 20 ou se era qualquer outro nú mero -
receberam quatro mensagens diferentes. O que se segue é uma reescrita do cascateamento
como um switch: var age = prompt ('Digite sua senha', '');
idade = Nú mero (idade);
switch (verdadeiro) {
case isNaN (idade):
idade = 0;
intervalo;
caso (idade> = 50):
alerta ("Você está velho! Em breve terá " + idade + "anos!"); intervalo;
caso (idade <= 20 ):
82
alerta ("Você é um bebê! Em breve você terá " + idade + "anos!"); intervalo;
predefiniçã o:
alert ('Em breve terá ' + (Nú mero (idade) + 1) + 'anos!'); intervalo;
};
Neste exemplo, o truque é usar switch (true) , que permite usar declaraçõ es condicionais
com cada caso avaliado como verdadeiro ou falso.
Determinar se uma variável tem um valor
Freqü entemente, você desejará determinar se uma variá vel tem um valor. Você pode usar a
palavra-chave if para determinar isso. A palavra-chave if é avaliada como verdadeira se a
variá vel tiver um valor; ele é avaliado como falso quando a variá vel é indefinida ou nula . A
diferença entre undefined e null é mínima, mas há uma diferença. Uma variá vel cujo valor é
indefinido nunca foi inicializada. Uma variá vel cujo valor é nulo recebeu explicitamente um
valor nul, o que significa que a variá vel foi explicitamente configurada para nã o ter valor. Se
você comparar undefined e null usando a expressã o nul == undefined, eles serã o iguais.
Considere o seguinte exemplo, no qual você deseja determinar se myVar tem um valor:
if (myVar) {
alert ('myVar tem um valor');
outro {
alert ('myVar nã o tem valor');
Se myVar for 0, NaN , string vazia, nul ou indefinido, uma mensagem será exibida,
informando que myVar nã o tem um valor. Se myVar contiver qualquer outro valor, uma
mensagem será exibida informando que myVar tem um valor .
Sem operadores de coalescência de valor
Freqü entemente, você deseja verificar uma variá vel para ver se ela tem um valor e, se a
variá vel tiver um valor, usar a variá vel ou um valor padrã o. JavaScript oferece uma maneira
bastante simples de fazer isso: use o || (ou) operador.
A seguir está um exemplo de uso do operador ou para realizar esta tarefa: var customer =
prompt ('Digite seu nome');
alert ('Olá ' + (cliente || 'Cliente valioso'));
Neste exemplo, se o cliente tiver um valor, o operador ou será avaliado como verdadeiro e
o valor real será retornado. Como o operador ou está em curto-circuito, nã o há avaliaçã o do
segundo operando. Se o cliente nã o tiver valor, o operador ou retorna o segundo operando,
mesmo se for nulo.

Liçã o 1: Apresentando J avaScript CAPÍTULO 3
83
É interessante notar que os operadores ou podem ser encadeados, conforme mostrado

neste exemplo, em que o usuá rio é solicitado a fornecer um nome e, em seguida, o nome da
empresa: var customer = prompt ('Digite seu nome');
var companyName = prompt ('Digite o nome da sua empresa');
alert ('Olá ' + (cliente || companyName || 'Cliente valioso')); Neste exemplo, a mensagem de

alerta conterá o valor da primeira variá vel que possui um valor ou Cliente Valioso se
nenhuma das variá veis tiver um valor.
O operador && (e) exibe um comportamento semelhante, mas retorna o primeiro valor
vazio em vez do primeiro valor nã o vazio. Se todas as variá veis tiverem um valor, Valued
Customer é retornado. Nã o há muito valor no mundo real para esse comportamento, mas é
uma ferramenta em sua caixa de ferramentas JavaScript.
Determinando se dois valores têm o mesmo tipo e são iguais Quando o JavaScript

avalia as seguintes expressõ es, todas sã o avaliadas como verdadeiras: null == undefined
falso == 0;
'' == 0;
'123' == 123
JavaScript tenta converter os operandos em tipos compatíveis antes de executar a

verificaçã o de igualdade. No entanto, você pode querer que essas expressõ es sejam
avaliadas como falsas porque os tipos sã o diferentes.
Para realizar uma comparaçã o de tipo e igualdade, JavaScript fornece o === e o! ===
operadores. As seguintes expressõ es sã o avaliadas como falsas:
null === indefinido
falso === 0;
'' === 0;
'123' === 123
Implementando loops de código

Os loops de có digo sã o uma parte importante de toda linguagem de programaçã o porque
muitos programas precisam repetir uma sequência um determinado nú mero de vezes ou
repetir uma sequência até que algum valor seja alterado. JavaScript nos fornece
o while , do e para que as palavras-chave realizem operaçõ es de loop .
Implementando o loop while
A palavra-chave while pode ser usada para criar um loop que aceita uma expressã o de loop
entre parênteses. O loop pode conter uma ú nica instruçã o ou um bloco de có digo que é
executado, desde que a expressã o do loop seja avaliada como verdadeira. Aqui está um
exemplo do loop while: var x = 10;
enquanto (x> 0) {
x--;
alert ("O valor de x é" + x);
84
Neste exemplo, enquanto a expressã o de loop for avaliada como verdadeira, o loop
continuará . Cada vez no loop, x é decrementado, usando a instruçã o x--. Depois que x for
diminuído, uma mensagem de alerta será exibida, mostrando o valor atual de x . Observe
que o bloco de có digo pode ser executado de zero a muitas vezes, com base no valor
de x quando o ponteiro do programa atinge o loop while. Se x fosse inicializado em zero, o
loop nã o seria executado.
Implementando o loop do
A fazer palavra-chave pode ser usada para criar um loop que e xecutes um para muitas
vezes. A instruçã o do começa com a palavra “ do ” , seguida por um conjunto obrigató rio de
chaves contendo um bloco de có digo que será executado cada vez que o loop for executado,
seguido pela palavra-chave while e uma expressã o de loop que está entre parênteses .
A razã o mais convincente para usar o loop do é que ele é executado pelo menos uma vez
porque a expressã o do loop é avaliada apó s a execuçã o do loop. Pode ser difícil pensar em
uma implementaçã o real desse loop, mas considere se uma tela de login precisa ser exibida
para coletar o nome de usuá rio e a senha, e a tela de login será exibida novamente se as
credenciais de login nã o estiverem corretas. O exemplo a seguir deve fornecer alguma
clareza para esta implementaçã o:
var tentativas = 0;
Faz{
retries ++;
showLoginScreen ();
} while (! authenticated () && retries <3);
if (tentativas == 3) {
alerta ('Muitas tentativas');
Retorna;
Neste exemplo, uma variá vel de novas tentativas é primeiro criada e inicializada com

zero. Em seguida, o loop do é executado. Dentro c do circuito bloco ode,
a tentativas variá vel é incrementado, e é feita uma chamada para uma funçã o
showLoginScreen, que exibirá uma tela de login que solicita um nome de usuá rio e
senha. Depois que o usuá rio insere as informaçõ es apropriadas e fecha a tela de login,
a expressã o de loop é avaliada. A funçã o autenticada verifica o nome do usuá rio e a senha e
retorna verdadeiro se o usuá rio deve ser autenticado. O loop continuará enquanto o
usuá rio nã o for autenticado e a contagem de novas tentativas for menor que três.
Im plementing o loop
O de laço é y típico usado quando você sabe quantas vezes o loop será executado, e você
quer um contador de loop variá vel. O loop for usa a seguinte sintaxe: for (var variá vel =
valor inicial; variá vel <valor final; variá vel = variá vel + incremento)
có digo a ser executado
Dentro dos parênteses, há três seçõ es, separadas por ponto-e-vírgula. Os dois pontos e
vírgulas devem existir, mesmo se você deixar uma seçã o vazia. A primeira seçã o permite
que você declare e Liçã o 1: Apresentando JavaScript CAPÍTULO 3
85
inicializar uma variá vel de loop. Esta seçã o é executada uma vez quando o programa atinge
este loop. A segunda seçã o é a expressã o do loop , que é chamada antes de executar o
có digo do loop, para determinar se o loop deve ser executado. Se a expressã o do loop for
avaliada como verdadeira, o có digo do loop será executado. A terceira seçã o é a seçã o de
modificaçã o de loop. É aqui que você pode querer aumentar (ou diminuir) a variá vel de
loop. Esta seçã o é executada depois que o có digo do loop é executado para cada loop.
Você pode usar o loop quando você sabe que você quer fazer um loop um nú mero
específico de vezes e, no có digo de loop, você quiser acessar um contador de v ariá vel, como
mostrado no exemplo devido fol:
para (contador de var = 0; contador <10; contador ++) {
alert ('O contador agora está definido para' + contador);
Neste exemplo, uma variá vel de contador é criada com a palavra-chave var. Tenha cuidado
ao usar a palavra-chave var para evitar a criaçã o de uma variá vel global por engano. O loop
continuará enquanto a variá vel do contador for menor que 10. Cada vez que o loop é
executado, o contador é incrementado, usando a sintaxe counter ++. A variá vel counter é
usada no có digo de loop para exibir uma mensagem, mas o contador certamente poderia
ser usado para tarefas mais elegantes.
Saindo de um loop
À medida que a ló gica do loop se torna complicada, você pode descobrir que precisa de
uma maneira de sair do loop usando uma verificaçã o condicional dentro do có digo do
loop. Para cená rios como este, você pode usar a palavra-chave break para sair do loop
imediato. Observe que a palavra-chave break sairá apenas do loop atual. Se você estiver em
um loop aninhado, sairá de apenas um nível.
No cená rio a seguir, um loop é criado para determinar se um nú mero é um nú mero primo e
a palavra-chave break é usada para sair do loop se o nú mero a ser testado nã o for um
nú mero primo:
var numberToTest = prompt ('Digite o nú mero aqui.', '');
índice de var = 2;
var isPrime = true;
while (index <numberToTest) {
if (numberToTest% index == 0) {
isPrime = false;
intervalo;
}
index ++;
if (isPrim e) {
alert (numberToTest + 'é um nú mero primo');
outro {
alert (numberToTest + 'nã o é um nú mero primo porque é divisível por' + índice);
Neste exemplo, o operador mó dulo (%) determina se o índice pode ser dividido no nú mero
a ser testado sem produzir um resto. Em caso afirmativo, o nú mero a testar nã o é primo 86
nú mero. Assim que um numbe r for descoberto como nã o primá rio, nã o há necessidade de

continuar o loop, portanto, a palavra-chave break é usada para sair do loop.
Manipulação de erros
Ao escrever có digo, você sempre deseja ter certeza de que seu có digo nã o causa
uma exceção . Uma exceção é um erro que ocorre em tempo de execuçã o devido a uma
operaçã o ilegal durante a execuçã o. Você deve validar suas variá veis preventivamente
antes de realizar uma operaçã o. Chave
Termos que podem gerar uma exceçã o. Por exemplo, antes de dividir uma variá vel
(numerador) por outra variá vel (denominador), verifique se o denominador nã o é zero
para nã o lançar uma exceçã o de divisã o por zero.
À s vezes, você nã o pode verificar preventivamente se há um erro potencial. Por exemplo,

você está lendo um fluxo de rede quando a conexã o de rede é abruptamente perdida. Para
situaçõ es como essa, você pode usar as palavras-chave try (try block) , catch (catch
block) ou finally (finally block) .
O bloco try é usado com um bloco de có digo que contém o có digo que pode falhar. Você
deseja tentar executar o bloco de có digo. O bloco try requer um bloco catch, um bloco y
final ou ambos.
O bloco catch terá a exceçã o passada para ele, para que você tenha acesso à exceçã o dentro
do seu có digo. O bloco catch é executado automaticamente se o có digo no bloco try lançar
uma exceçã o. Nesse caso, a execuçã o do programa salta imediatamente para o bloco catch
sem executar outras instruçõ es no bloco try.
O bloco y final é executado depois que o bloco de tentativa y é concluído com sucesso ou o
bloco catch é concluído. A intençã o do bloqueio yb final é fornecer um local para o có digo
de limpeza porque o bloco y final é executado independentemente de uma exceçã o ter sido
lançada.
O exemplo de có digo a seguir ilustra o uso dos blocos try, catch e final y: try {
undefinedFunction ()
alert ('Feito, entã o funçã o definida existe')
pegar (ex) {
alert ('Ocorreu o seguinte erro:' + ex.mensagem)
finalmente{
alert ('Finalmente bloco executado')
Neste exemplo, se a funçã o undefinedFunction existe e nã o lança uma exceçã o, você recebe
dois alertas: o primeiro alerta é Feito, Existe entã o undefinedFunction e o segundo alerta é
Final y Bloco executado.
Se a funçã o undefinedFunction nã o existir, uma exceçã o é lançada e você recebe dois

alertas: o primeiro alerta é The Seguinte Erro Ocorrido e o segundo alerta é Final y Bloco
Executado. Uma exceçã o foi lançada porque undefinedFunction nã o existia, e o programa
imediatamente saltou para o bloco catch sem executar o resto do bloco try.

87
Lembre-se de que o bloco y final sempre é executado apó s o bloco try ser concluído com
êxito y ou apó s a execuçã o do bloco catch. Se o bloco catch lançar uma exceçã o, o bloco y
final será executado antes que a exceçã o seja passada para a rotina de chamada.
Resumo da lição
■■ JavaScript nã o tem tipo, portanto, ao criar uma variá vel, você nã o precisa especificar seu
tipo.
■■ JavaScript define os seguintes objetos embutidos: o objeto global, o objeto Object, o

objeto Function, o objeto Array, o objeto String , o objeto Boolean, o objeto Number, o
objeto Math, o objeto Date, o Objeto RegExp, objeto JSON e vá rios tipos de objetos Error.
■■ Em JavaScript, todos os valores numéricos sã o representados internamente como

valores de ponto flutuante.
■■ O operador typeof é um operador uná rio que retorna uma string que indica o tipo do
operando.
■■ O && e || operadores sã o operadores de curto-circuito.
■■ Use invó lucro de camelo para nomes de variá veis.
■■ Escopo é o contexto dentro de um programa de computador no qual um nome de

variá vel é vá lido e pode ser usado para acessar a variá vel.
■■ Em JavaScript, existem essencialmente dois escopos, global e local, mas você pode criar
escopos locais aninhados aninhando funçõ es.
■■ Para nenhum valor coalescente, use o || operador.
■■ Use dois sinais de igual (==) para testar a igualdade e use três sinais de igual (===) para
testar o mesmo tipo e igualdade.
■■ O loop while é executado de zero a muitas vezes, e o loop do é executado uma a muitas
vezes.
■■ O loop for é executado de zero a muitas vezes e tem uma variá vel de contador .
■■ Use a palavra-chave break para sair do loop atual.
■■ Use as palavras-chave try, catch e final y para lidar com exceçõ es.
Revisão da aula
liçã o. Você pode encontrar respostas a essas perguntas e explicaçõ es de por que cada
1. Seu aplicativo solicita que o usuá rio insira sua idade, que é colocada em uma variá vel
de idade . Um usuá rio executou o aplicativo e inseriu Nã o sei para a idade. O aplicativo
entã o multiplica a idade por dois. Qual é o resultado?
A. indefinido
B. nulo
88
C. NaN
D. infinito
2. Qual das opçõ es a seguir representam declaraçõ es de variá veis vá lidas ? (Escolha todas

as opçõ es aplicá veis.) A. var switch;
B. var myChar;
Custo de C. var $;
D. var _total;
E. var 1to1;
F. var tooGood4u;
3. Em seu aplicativo, você deseja exibir uma mensagem personalizada para o usuá rio, se o
nome do usuá rio estiver preenchido, na variá vel userName , mas se userName estiver vazio,
você deseja usar Usuá rio Valioso. Como você pode fazer isso com mais eficiência?
A. var per sonalized = 'Hel o' + (userName ?? 'Valued User'); B. var personalizado = 'Hel o' +
(userName || 'Valued User'); C. var personalizado = 'Hel o' + (userName && 'Valued
User'); D. var personalizado = 'Hel o' + (userName + 'Valued User'); Lição 2:
escrever, testar e depurar JavaScript
A liçã o anterior apresentou uma introduçã o detalhada ao JavaScript, e você provavelmente

está pronto para começar a escrever algum có digo, que é o que esta liçã o explica. Ele
começa com a escrita de có digo, usando prá ticas de desenvolvimento orientadas a
testes . Ao longo do caminho, um novo projeto é criado e um arquivo JavaScript é
adicionado, usando o elemento < script >. Finalmente, esta liçã o cobre os recursos de
depuraçã o de JavaScript no Visual Studio.
Ao trabalhar com uma linguagem de programaçã o, você provavelmente desejará criar um

programa Hel o World para ver o que é necessá rio para que um programa simples seja
executado. Embora um programa Hel o World tenha sido criado anteriormente, ele foi
criado usando HTML. Desta vez, você cria uma versã o JavaScript do programa Hel o World.
■■ Descrever o desenvolvimento orientado a testes (TDD).
■■ Configure um aplicativo da web para TDD.
■■ Configure um aplicativo do Windows 8 para TDD.
■■ Có digo de depuraçã o de JavaScript.
Liçã o 2: Escrevendo, testando e criando JavaScript CAPÍTULO 3
89
Hel o World de JavaScript
Existem vá rias maneiras de escrever um programa Hel o World, e elas diferem

principalmente em como você deseja exibir a mensagem Hel o World. Por exemplo, você
pode programaticamente tornar o texto Hel o World visível ou invisível em uma pá gina
HTML ou pode exibir uma mensagem de alerta com Hel o World nela. Esses sã o bons
exemplos, mas seria melhor se o primeiro exemplo o iniciasse na maneira correta de
escrever có digo JavaScript. Tente fazer o Hel o World a partir de uma perspectiva baseada
em testes.
Escrever código orientado a testes
O desenvolvimento orientado a testes (TDD) é uma ó tima maneira de escrever có digo e

aprender sobre o có digo. Um dos benefícios é que você pode escrever seu teste sem
precisar escrever uma interface de usuá rio. Também é fá cil proteger o có digo do ype . O
TDD torna mais fá cil escrever um pouco de có digo para ver se o có digo funciona da
maneira que você esperava. E o melhor de tudo: é fá cil começar.
Existem muitos suplementos para escrever có digo orientado a teste, mas as opçõ es sã o
relativamente poucas para có digo JavaScrip t orientado a teste . Provavelmente, a
ferramenta mais comum é QUnit, que pode ser usada com aplicativos da Web
ASP.NET; para aplicativos do Windows 8, uma variante do QUnit é o QUnit-Metro.
Configurando QUnit com aplicativos ASP.NET
Para configurar o QUnit com um aplicativo ASP.NET, você deve primeiro iniciar o Visual
Studio Express 2012
para a Web e crie um aplicativo da web. Neste exemplo, o ASP.NET Empty Web Application
é criado.
Na janela Gerenciador de Soluçõ es, clique com o botã o direito do mouse no nó do projeto e
clique em Gerenciar Pacotes NuGet. Isso exibe a janela Gerenciar Pacotes NuGet. NuGet é
um sistema de gerenciamento de pacotes de có digo aberto para a plataforma .NET que
simplifica a adiçã o de bibliotecas de terceiros em seu có digo. Clique no nó Online e, em
seguida, na caixa de texto Pesquisar Online, digite QUnit e clique na lupa para realizar a
pesquisa. Os resultados sã o exibidos de forma semelhante à Figura 3-4. Lembre-se de que
sua tela de resultados pode ser diferente devido aos muitos novos pacotes que estã o sendo
lançados, portanto, certifique-se de procurar o pacote QUnit para ASP.NET MVC.
Clique em QUnit para ASP.NET MVC; você deve ver um botã o Instalar. Clique no botã o
Instalar para instalar o QUnit For ASP.NET MVC em seu projeto. Depois que o pacote for
instalado, você verá uma marca de seleçã o onde o botã o Instalar estava localizado. Clique
no botã o Fechar para fechar a tela Gerenciar pacotes NuGet. Observe que este pacote QUnit
para ASP.NET MVC funciona com aplicativos de modelo, visualizaçã o e controle (MVC) e
aplicativos da Web ASP.NET, embora a folha de estilo em cascata que é adicionada nã o
esteja no local da folha de estilo padrã o para ASP.NET
formulá rios. (Por enquanto, deixaremos a folha de estilo sozinha.) Depois que o pacote
QUnit para ASP.NET MVC foi adicionado, você verá um arquivo packages.config, que
contém uma referência ao seu pacote. A pasta Scripts contém um arquivo chamado
qunit. js, que contém o có digo-fonte QUnit. A pasta Conteú do contém um arquivo qunit.css,
que contém a folha de estilo em cascata para QUnit.
90

FIGURA 3-4 Os resultados da pesquisa NuGet contendo QUnit para ASP.NET MVC
Em seguida, adicione uma pá gina default.html clicando com o botã o direito do mouse no nó
do projeto (na janela Solution Explorer) e clique em Adicionar; escolha Pá gina
HTML. Nomeie o arquivo default.html e clique em OK. Torne o arquivo default.html sua
pá gina de inicializaçã o clicando com o botã o direito do mouse no arquivo default.html e
escolhendo Definir como pá gina inicial. Modifique o arquivo default.html para se parecer
com o exemplo a seguir, no qual as linhas inseridas estã o em negrito:
<! DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtm l">
<head>
<title> </title>
<link rel = "stylesheet" type = "text / css" href = "Content / qunit.css" />
<script type = "text / javascript" src = "Scripts / qunit.js"> </script>
</head>
<body>
<h1 id = "qunit-header"> Exemplo QUnit </h1>
<h2 id = "qunit-banner"> </h2>
<div id = "qunit-testrunner-toolbar"> </div>

<h2 id = "qunit-userAgent"> </h2>
<ol id = "qunit-tests"> </ol>
<div id = "qunit-fixture"> marcação de teste, ficará oculta </div>
</body>
</html>
A configuraçã o do QUnit está feita, mas neste arquivo, você ainda precisa adicionar
referências ao có digo que será testado e aos testes reais. Seu có digo e seus testes devem
estar em arquivos separados, portanto, você adicionará pelo menos duas
referências. Navegar para Depurar e escolher Iniciar Depuraçã o faz com que a tela de
resumo do QUnit seja exibida, conforme mostrado na Figura 3-5.
Liçã o 2: Escrevendo, testando e depurando JavaScript CAPÍTULO 3
91
FIGURA 3-5 A tela de resumo do QUnit mostrando 0 testes de 0 passou, 0 falhou Esta
tela está mostrando que nenhum teste passou e nenhum teste falhou porque você ainda
nã o tem testes. É hora de adicionar um teste Hel o World ao aplicativo.
Um arquivo default.js e um arquivo tests.js precisam ser adicionados à pasta Scripts
clicando com o botã o direito na pasta Scripts e escolhendo Adicionar. Escolha o arquivo
JavaScript. Nomeie o arquivo default.js e clique em OK. Faça o mesmo para o arquivo
tests.js.
Uma referência a esses arquivos precisa ser adicionada ao arquivo default.html. Com o

arquivo default.html aberto, arraste o arquivo default.js para a origem do arquivo
default.html e solte o arquivo logo apó s a ú ltima tag de script final (</script>). Arraste o
arquivo tests.js para fora e solte-o apó s a ú ltima tag de script final. Seus resultados devem
ser semelhantes ao seguinte, em que as linhas inseridas estã o em negrito:
<! DOCTYPE html>
<head>
<title> </title>
<script src = "Scripts / qunit.js"> </script>
<script src = "Scripts / default.js"> </script>
<script src = "Scripts / tests.js"> </script>
</head>
<body>
92

<div id = "qunit-testrunner -toolbar"> </div>
<div id = "qunit-fixture"> marcaçã o de teste, ficará oculta </div>
</body>
</html>
Agora escreva o primeiro teste. Ao usar o TDD, sempre escreva o teste primeiro, execute-o
para ver a falha do teste e, em seguida, adicione o có digo para fazer o teste passar. No
arquivo tests.js, adicione o seguinte teste para ver se uma variá vel de saudação contém Hel
o World:
test ("A Hello World Test", 1, function () {
igual (saudaçã o, "Olá , mundo", "Esperar saudaçã o de Olá , mundo");
});
Aqui está uma visã o geral do que está acontecendo com este có digo. O có digo está
chamando uma funçã o de teste, que está incluída no có digo-fonte QUnit. Uma funçã o é um
bloco de có digo que você pode chamar para realizar uma ou mais açõ es. A funçã o de teste
requer três parâ metros. O primeiro parâ metro é uma descriçã o de forma livre do teste, que
é A Hel o World Test. A descriçã o do teste é exibida na tela de resumo do QUnit quando
você executa os testes . O segundo parâ metro, que tem o valor um, representa a quantidade
de asserçõ es que você espera realizar na funçã o de teste. O terceiro parâ metro é uma
funçã o anô nima. Uma função anônima é um bloco de có digo que nã o tem nome e
pode executar uma ou mais açõ es. É aqui que você digita
Os termos adicionam qualquer có digo a ser executado e, em seguida, você executa

asserçõ es para verificar se o teste foi bem-sucedido.
Nesta funçã o anô nima, a funçã o igual está sendo chamada para ver se a variá vel
de saudação contém Hel o World. A funçã o igual leva três parâ metros. O primeiro
parâ metro é o valor real, neste caso, a variá vel de saudação . O segundo parâ metro é o valor
esperado, Hel o World. O terceiro parâ metro é uma mensagem que você deseja exibir, neste
caso, Expect Greeting Of Hel o World.
Como você nã o criou uma variá vel de saudação , este teste deve falhar. Ao executar os
testes (clique em Depurar e escolha Iniciar Depuraçã o), você verá o teste com falha com um
indicador vermelho. A Figura 3-6 mostra a tela de resumo do QUnit com o teste reprovado.
O teste falhou com uma mensagem que afirma que a “saudaçã o” é indefinida. Agora, para
fazer o teste passar, adicione o có digo a seguir, que declara uma variá vel de saudaçã o e
atribui um valor de Hel o World no arquivo default.js:
var saudaçã o = 'Olá , mundo';
Liçã o 2: Escrevendo, testando e depurando Ja vaScript CAPÍTULO 3
93
FIGURA 3-6 A tela de resumo do QUnit mostrando um teste com falha Salve todos os
arquivos navegando até Arquivo e escolhendo Salvar tudo (ou Ctrl + Shift + S) e execute o
aplicativo novamente. Se você vir o mesmo erro, tente pressionar Ctrl + F5 na janela do
navegador para limpar o cache do navegador. Você deve ver que o teste agora passa porque
a saudação é definida e inicializada para Hel o World. Na tela de resumo do QUnit, você
deve ver uma mensagem que indica 1 Testes de 1 Aprovado, 0 Reprovado. Se você clicar no
teste , deverá ver o teste mostrando um indicador verde, conforme mostrado na Figura 3-7.
À medida que você adiciona mais recursos ao seu aplicativo, basta adicionar outro teste
que defina ou ajude a moldar cada recurso e, em seguida, escreva o có digo para fazer o
teste passar.
94

FIGURA 3-7 Tela de resumo do QUnit mostrando o teste Hel o World bem-
sucedido. Configurando o QUnit-Metro com aplicativos do Windows 8
Para configurar o QUnit com um aplicativo do Windows 8, você deve primeiro iniciar o
Visual Studio Express 2012
para Windo ws 8 e crie um JavaScript | Aplicativo da Windows Store. Neste exemplo, o

aplicativo em branco é criado.
Na janela Gerenciador de Soluçõ es, clique com o botã o direito do mouse no nó do projeto e
clique em Gerenciar Pacotes NuGet. Isso exibe a janela Gerenciar Pacotes NuGet. NuGet é
um sistema de gerenciamento de pacotes ope n-source para a plataforma .NET que
simplifica a adiçã o de bibliotecas de terceiros ao seu có digo. Clique no nó Online e, em
seguida, na caixa de texto Pesquisar Online, insira QUnit-Metro e clique na lupa para
realizar a pesquisa . Os resultados sã o exibidos, semelhantes à Figura 3-8. Sua tela de
resultados pode ser diferente devido aos muitos novos pacotes que estã o sendo lançados,
portanto, certifique-se de procurar o pacote QUnit-Metro.
95
FIGURA 3-8 A janela Gerenciar Pacotes NuGet
Clique no pacote QUnit-Metro; você deve ver um botã o Instalar. Clique no botã o Instalar

para instalar o QUnit-Metro em seu projeto. Apó s a instalaçã o do pacote, você deve ver uma
marca de seleçã o onde o botã o Instalar foi localizado. Clique no botã o Fechar para fechar a
tela Gerenciar pacotes NuGet.
Depois que o pacote QUnit-Metro for adicionado, você verá um arquivo packages.config que
contém uma referência ao seu pacote. A pasta js contém um novo arquivo,
qunitmetro.js, que contém o có digo-fonte QUnit-Metro. A pasta css contém novas folhas de
estilo em cascata, chamadas qunitmetro.css, qunitmetro-dark.css e qunitmetro-
light.css. Você usa o qunitmetro .css para obter a apresentaçã o padrã o, mas pode adicionar
o arquivo qu nitmetro-dark.css ou o qunitmetro-light.css à sua pá gina de teste para fazer a
tela do QUnit-Metro parecer mais com um aplicativo do Windows 8 .
O aplicativo em branco já tem uma pá gina default.html. Modifique o arquivo default.html

para se parecer com o exemplo a seguir, em que as linhas inseridas estã o em negrito:
<! DOCTYPE html>
<html>
<head>

<link href = "// Microsoft.WinJS.1.0 / css / ui-dark.css" rel = "stylesheet" />
96
<! - Referências QUnit-Metro ->
<link rel = "stylesheet" type = "text / css" href = "css / qunitmetro.css" />
<link rel = "s tylesheet" type = "text / css" href = "css / qunitmetro-dark.css" />
<script type = "text / javascript" src = "js / qunitmetro.js"> </script>

</head>
<body>
<h1> Testes </h1>
<div id = "appBar" data-win-control = "WinJS.UI.AppBar" data-win-options = "">

</div>
</body>
< / html>
A configuraçã o do QUnit-Metro está concluída, mas neste arquivo, você ainda precisa
adicionar uma referência ao arquivo de có digo de teste. Seu có digo e seus testes devem
estar em arquivos separados. Você já tem uma referência ao arquivo default.js, portanto,
adicionará mais uma referência . Navegar para Depurar e escolher Iniciar Depuraçã o exibe
o arquivo default.html. Clique com o botã o direito na tela para exibir a barra de aplicativos
na parte inferior e clique em Executar testes. A tela de resumo do QUnit é exibida, conforme
mostrado na Figura 3-9.
FIGURA 3-9 A tela de resumo do QUnit-Metro mostrando que nenhum teste foi executado
Esta tela está mostrando que nenhum teste passou e nenhum teste falhou porque você
ainda nã o tem testes. Agora, adicione um teste Hel o World ao aplicativo.
Um arquivo tests.js deve ser adicionado à pasta js clicando com o botã o direito na pasta js e
navegando até Adicionar | Novo item | Arquivo JavaScript. Nomeie o arquivo tests.js e
clique em OK.
Em seguida, uma referência a esse arquivo deve ser adicionada ao arquivo

default.html. Com o arquivo default.html aberto, arraste o arquivo tests.js para a fonte do
arquivo default.html e solte o arquivo logo apó s a ú ltima tag de script final (</script>). Seus
resultados devem ser semelhantes ao seguinte, em que a linha inserida está em negrito:
97
<! DOCTYPE html>
<html>
<head>
<link href = "// Microsoft.WinJS.1.0 / css / ui-dark.css" rel = "stylesheet" />
<script s rc = "// Microsoft.WinJS.1.0 / js / base.js"> </script>
<! - Referências QUnit-Metro ->
< link rel = "stylesheet" type = "text / css" href = "css / qunitmetro.css" />
<link rel = "stylesheet" type = "text / css" href = "css / qunitmetro-dark.css" />
<script src = "js / qunitmetro.js"> </script>
<script src = "js / tests.js"> </script>
</head>
<body>
<h1> Testes </h1>
<div id = "appBar" data-win-control = "WinJS.UI.AppBar" data-win-options = ""> </div>
</body>
</html>
Agora você pode escrever o primeiro teste. Ao usar o TDD, sempre escreva o teste primeiro,
execute-o para ver a falha do teste e, em seguida, adicione o có digo para fazer o teste
passar. No arquivo tests.js, adicione o seguinte teste para ver se uma variá vel
de saudação contém Hel o World: test ( "A Hello World Test", function () {
igual (saudaçã o, "Olá , mundo", "Esperar saudaçã o de Olá , mundo");
});
Aqui está uma visã o geral do que está acontecendo com este có digo. O có digo está
chamando uma funçã o de teste, que está incluída no có digo-fonte QUnit e requer dois
parâ metros. O primeiro parâ metro é o nome do teste, que é A Hel o World Test. O nome do
teste é exibido na tela de resumo do QUnit quando você executa os testes. O segundo
parâ metro é uma funçã o anô nima, na qual você adiciona qualquer có digo a ser executado e,
em seguida, executa asserçõ es para verificar se o teste foi bem-sucedido. Nesta funçã o
anô nima, a funçã o igual é chamada para ver se a variá vel de saudação contém Hel o
World. A funçã o igual leva três parâ metros. O primeiro parâ metro é o valor real, neste caso,
a variá vel de saudação . O segundo parâ metro é o valor esperado, Hel o World. O terceiro
parâ metro é uma mensagem que você deseja exibir, neste caso, Expect Greeting Of Hel o
World.
Como você nã o criou uma variá vel de saudação , este teste deve falhar. Ao executar os
testes (clique em Depurar, escolha Iniciar Depuraçã o, clique com o botã o direito do mouse
na tela e escolha Executar Testes), você deverá ver o teste com falha com um indicador
vermelho. A Figura 3-10 mostra a tela de resumo do QUnit com o teste reprovado.
98

FIGURA 3-10 A tela de resumo do QUnit-Metro mostrando o teste reprovado O teste falhou
com uma mensagem que afirma que a saudaçã o é indefinida. Agora, você faz o teste
passar. Na parte inferior do arquivo default.js, adicione o seguinte có digo que declara
uma variá vel de saudação e atribui um valor de Hel o World:
var saudaçã o = 'Olá , mundo';
Salve todos os arquivos clicando em Arquivo e escolhendo Salvar tudo (ou pressionando
Ctrl + Shift + S) e execute o aplicativo novamente. Você deve ver que o teste agora passa
porque a saudaçã o é definida e inicializada como Hel o World. Na tela de resumo do QUnit-
Metro, você deve ver uma mensagem que indica 1 Testes de 1 Aprovado, 0 Reprovado. Se
você clicar no teste, deverá ver um indicador verde, conforme mostrado na Figura 3-11.
99
FIGURA 3-11 A tela de resumo do QUnit-Metro mostrando a aprovaçã o no teste À medida
que adiciona mais recursos ao seu aplicativo, você adiciona outro teste que define ou ajuda
a moldar cada recurso e, em seguida, escreve o có digo para fazer o teste passar.
Nas seçõ es anteriores, links para arquivos JavaScript foram adicionados a documentos
HTML arrastando o arquivo JavaScript da janela do Solution Explorer e soltando-o no
documento HTML . Ao eliminar, é adicionado um elemento < script > que faz referência ao
arquivo JavaScript.
O elemento < script > pode definir um bloco de có digo JavaScript ou carregar um arquivo

JavaScript externo, mas nã o ambos.
A seguir está um exemplo de uso do elemento < script > para definir um bloco de có digo

JavaScript dentro do documento HTML:
<script type = "text / javascript">
<! -
retornar x + y;
}
alerta (adicionar (3, 2));
// ->
</script>
O atributo type especifica o tipo MIME, que era necessá rio nas versõ es anteriores do HTML
mas é opcional em HTML5.
100 CAPÍTULO 3 Introduçã o ao JavaScript
A seguir está o início de um comentá rio HTML. Observe que a parte inferior contém um
comentá rio JavaScript e um comentá rio final em HTML. Este é o método recomendado para
lidar com navegadores que nã o oferecem suporte ao elemento de script. Sem o comentá rio,
o navegador apenas renderizaria o có digo-fonte JavaScript na tela.
Este script define uma funçã o de adiçã o. Um alerta é executado que chama a funçã o
adicionar e envia os resultados para a funçã o de alerta. Observe que a chamada para a
funçã o de alerta nã o está dentro de uma funçã o; esta chamada está embutida. À medida que
este documento HTML está sendo carregado, o navegador alcança a chamada de alerta e,
por estar embutido, a chamada de alerta é executada imediatamente.
A seguir está um exemplo de um elemento < script > que faz referência a um arquivo

JavaScript externo:
<script type = "text / javascript" src = "Scripts / tests.js"> </script> O atributo src faz
referência ao arquivo JavaScript externo. Quando o atributo src é incluído, o conteú do
do elemento < script > deve estar vazio. É importante usar uma tag final explícita
para evitar problemas em alguns navegadores.
Para arquivos JavaScript externos, os seguintes atributos também podem ser usados:
■■ async Um atributo booleano que especifica que o script é executado de forma

assíncrona enquanto a pá gina continua a aná lise.
■■ adiar Um atributo booleano que especifica que o script é executado depois que a pá gina
termina de analisar.
Se async e defer nã o estiverem presentes, o script é buscado quando o analisador HTML

atinge o elemento de script e é executado imediatamente, antes que o navegador continue
analisando a pá gina.
Para grandes documentos HTML e grandes arquivos JavaScript, o resultado é que a pá gina
leva muito mais tempo para renderizar.
NOTA USANDO ASSÍNC E DEFER

Tenha cuidado ao usar assíncrono e adiar. Primeiro, nem todos os navegadores
suportam esses atributos ainda.
Em segundo lugar, quando você está carregando muitos arquivos JavaScript externos

que dependem uns dos outros, o uso desses atributos pode alterar a ordem de
execução.
Lidar com navegadores que não suportam JavaScript
Além de colocar comentá rios HTML em torno dos blocos de script para evitar que o có digo-
fonte JavaScri pt seja renderizado na tela quando um navegador nã o suportar
o elemento < script >, você pode usar o elemento < noscript > para especificar o conteú do
alternativo a ser exibido. A seguir está um exemplo do elemento < noscript >:
<script type = "text / javas cript">
<! -
retornar x + y;
101
alerta (adicionar (3, 2));
// ->
</script>
<noscript> Seu navegador nã o oferece suporte a JavaScript, portanto, a funcionalidade da

pá gina será significativamente reduzida. </noscript>
Colocar seu JavaScript no arquivo HTML como có digo embutido é geralmente indesejá vel
porque limita a quantidade de reutilizaçã o que você pode obter do có digo. Seu objetivo
deve ser ter um JavaScript discreto - boa separaçã o de HTML e JavaScript, colocando-os
em arquivos separados.
Existe alguma vantagem em usar arquivos embutidos em comparaçã o com arquivos

externos? Conforme o tamanho do có digo HTML e JavaScript aumenta, você verá um
grande ganho de desempenho ao colocar o JavaScript em arquivos externos porque a
maioria dos navegadores armazena em cache os arquivos JavaScript .
■■ Você está criando uma página da web que exigirá muitos códigos JavaScript. É
melhor colocar todo o JavaScript em seu arquivo HTML ou colocá-lo em um arquivo
JavaScript separado?
■■ É melhor colocar o código JavaScript em um arquivo JavaScript separado porque

o arquivo JavaScript será armazenado em cache e é melhor fornecer JavaScript
discreto.
Em muitos dos documentos HTML que você examinar, verá que os elementos < script > sã o
típicos dentro do elemento < head >, principalmente porque é onde todos foram instruídos
a colocá -los. O elemento < head > é para coisas que nã o deveriam ser mostradas na pá gina
renderizada, certo?
De uma perspectiva de desempenho, é improdutivo colocar elementos < script > no

elemento < head > porque o navegador irá parar de analisar, recuperar o arquivo JavaScript
e executar o JavaScript antes de continuar a analisar o resto do documento HTML. Nada foi
exibido ainda porque o analisador está no elemento < head > e nã o atingiu
o elemento < body >. O resultado é que você vê uma janela vazia do navegador enquanto os
arquivos JavaScript estã o sendo carregados.
Coloque tags de script JavaScript no final do documento HTML, a menos que você tenha um
motivo convincente para nã o fazê-lo.
Uma razã o para colocar um elemento < script > no elemento < head > é que você pode ter
JavaScript que deve existir antes para que a pá gina possa ser renderizada
corretamente. Nesse caso, mova o mínimo possível para o elemento < head > para
minimizar o custo de desempenho. Além disso, coloque essas referências externas apó s as
referências da folha de estilo para que o navegador tente carregar as duas ao mesmo
tempo.

Ao colocar seus elementos < script > na parte inferior do documento HTML, eles devem
estar logo antes da tag < / body >. Isso garante que o modelo de objeto de documento
(DOM) foi carregado e está visível para o usuá rio em espera. Isso também significa que
quaisquer elementos referenciados no JavaScript estarã o presentes na pá gina.
Usando o depurador Visual Studio .NET Jav aScript
Os melhores desenvolvedores sã o aqueles que sabem como executar o depurador. Você

pode aprender muito sobre um aplicativo pausando a execuçã o de um aplicativo e
explorando as variá veis do aplicativo. Se você puder percorrer o aplicativo durante a
resoluçã o de problemas, poderá entender como o programa funciona e encontrar
problemas rapidamente.
O Visual Studio 2012 oferece suporte à depuraçã o de JavaScript melhor do que qualquer
versã o anterior do Visual Studio. Esta seçã o apresenta a depuraçã o de JavaScript.
A liçã o anterior cobriu funçõ es aninhadas e o exemplo foi uma funçã o aninhada para
calcular a á rea de uma fatia de pizza. Se você conhece a fó rmula desse cá lculo, pode calcular
a á rea de uma pizza de 18 polegadas e dividir por 8 porque haverá oito peças por peça . A
fó rmula é areaPerPiece = (pi x ( pizzaRadius ) x ( pizzaRadius )) / piecesPerPizza . Para
obter o pizzaRadius , divida o pizzaDiameter (18 polegadas) por 2 para obter
um pizzaRadius de 9 polegadas.
Portanto, a fó rmula é (3,141592 * 9 * 9) / 8, que é igual a 31,88619 polegadas quadradas. O

teste deve ser parecido com o seguinte:
test ('Area of Pizza Slice', 1, function () {
igual (areaOfPizzaSlice (18,8), 31,808619, 'Esperado 31,808619');
});
Ao executar o teste, ele falhará com a mensagem 'areaOfPizzaSlice' indefinida , entã o você
adiciona o có digo areaOfPizzaSlice da seguinte forma:
function areaOfPizzaSlice (diâ metro, fatiasPerPizza) {
return areaOfPizza (diâ metro) / slicePerPizza;
function areaOfPizza (diâ metro) {
raio var = diâ metro / 2;
return 3,141592 * raio * raio;
}
}
Em seguida, execute o teste. Deve passar. Agora você tem algum có digo que pode percorrer
e depurar.
Definindo um ponto de interrupção
Você pode definir um ponto de interrupçã o em seu JavaScript clicando na linha de có digo e
pressionando F9 ou clicando em Depurar e escolhendo Alternar ponto de interrupçã o. Se
você definir um ponto de interrupçã o na segunda linha da funçã o areaOfPizzaSlice, deverá
ver um ponto cor de vinho à esquerda da linha, e toda ou parte da linha também será cor de
vinho, dependendo de onde o cursor estava quando você define o ponto de interrupçã o. A
Figura 3-12 mostra o có digo com o ponto de interrupçã o definido. Liçã o 2: Escrevendo,
testando e depurando JavaScrip t CAPÍTULO 3
103
também pode clicar na barra vertical cinza (onde o ponto de interrupçã o é mostrado na
Figura 3-12) para definir um ponto de interrupçã o.
FIGURA 3-12 Pressione F9 para definir um ponto de interrupçã o
Agora que você definiu um ponto de interrupçã o, se você pressionar F5 (Depurar | Iniciar
Depuraçã o) para executar o teste, deverá atingir o ponto de interrupçã o. Quando você
atinge o ponto de interrupçã o, o ponteiro do programa é exibido em amarelo nessa
linha. Agora que você está no modo de pausa, pode examinar as variá veis.
Examinando variáveis
Uma das maneiras mais fá ceis de examinar variá veis no modo de interrupçã o é apenas usar
o cursor do mouse para apontar para a variá vel. Isso faz com que uma dica de ferramenta
seja exibida com as informaçõ es variá veis, conforme mostrado na Figura 3-13.
FIGURA 3-13 No modo de pausa, apontando para uma variá vel para obter suas
informaçõ es Na figura, você pode ver que o diâ metro foi apontado e a dica de ferramenta
foi exibida, mostrando seu valor de 18. Se você apontar para slicePerPizza, veja uma dica de
ferramenta exibindo o valor 8.
Outra forma de explorar as variá veis é visualizar a janela Locals, que exibe todas as
variá veis que estã o no escopo, incluindo a variá vel especial this , que é o objeto atual.
Normalmente, quando você está no modo de pausa, você vê a janela Lo cals no canto

inferior direito da janela do Visual Studio. Se a janela Locais nã o estiver visível e você
estiver no modo de pausa, poderá exibir a janela Locais navegando até Depurar | Windows
| Locals. Você deve ver a janela Locals, conforme mostrado na Figura 3-1 4.
FIGURA 3-14 A janela Locals exibindo todas as variá veis que estã o no escopo Conforme um
programa cresce, a janela Locals se enche de variá veis que podem nã o interessar a você,
mas você pode ver vá rias variá veis que deseja acompanhar. Na Figura 3-14, o Watch ta b
está no canto esquerdo inferior. Se você clicar nesta guia, verá a janela Watch. Esta janela
permite adicionar as variá veis de seu interesse. Você pode clicar na linha vazia, digitar o
nome da variá vel e pressionar Enter ou, na janela de có digo, destacar a variá vel
(normalmente y clicando duas vezes nela) e arrastá -la e soltá -la na janela Watch. A Figura
3-15 mostra o uso da janela Watch.
FIGURA 3-15 Usando a janela Watch para adicionar as variá veis de seu interesse Observe
na Figura 3-15 que o raio está listado como indefinido. Isso ocorre porque o programa nã o
atingiu a funçã o aninhada onde o raio é declarado e definido.
Percorrendo o código
Agora que você está no modo de interrupçã o, pode percorrer o có digo pressionando F11
(Depurar |
Step Into), F10 (Deb ug | Step Over) ou Shift + F11 (Debug | Step Out). Essas opçõ es
também estã o na barra de ferramentas. A linha de có digo atual retorna a á rea da fatia de
pizza se você pressionar F10
porque passar por cima significa que você deseja executar todo o có digo no status atual e,
em seguida, voltar ao modo de interrupçã o na pró xima instruçã o.
Ao pressionar F11, você entra na funçã o areaOfPizza. Quando você estiver na funçã o,

pressione F11 novamente para definir o raio. Você deve ser capaz de apontar para o raio
para ver que o valor Liçã o 2: Escrevendo , testando e depurando JavaScript CAPÍTULO 3
105
foi definido como 9 e, na janela Locals, radius está exibindo um valor de 9. A cor é
vermelha, o que indica que este valor mudou desde a ú ltima vez que você esteve no modo
de pausa.
Se você deslizar em 3.141592 * radius * radius e clicar com o botã o direito do mouse na
seleçã o, poderá adicionar Watch, que adiciona esta expressã o à janela Watch. Você também
pode adicionar Paral el Watch, que, em um aplicativo multithread, exibe a expressã o Watch
com seu valor para cada thread que possui um valor. A Figura 3-16 mostra a janela Paral el
Watch, que fica visível depois que você adiciona um reló gio paralelo.
FIGURA 3-16 A janela Paral el Watch mostrando o valor da expressã o para cada thread que
tem um valor
Na Figura 3-16, a janela é apresentada como uma grade na qual a primeira linha contém os
títulos das colunas e cada linha adicional representa um encadeamento com um valor. Cada
expressã o adicionada adicionará outra coluna à grade.
Ao clicar com o botã o direito do mouse na expressã o, você pode Fixar na origem, que fixa
uma dica de ferramenta na janela de origem que mostra o valor da expressã o, conforme
mostrado na Figura 3-17. Depois de fixar, você pode arrastar a dica de ferramenta para
qualquer lugar no editor de có digo, e o valor estará naquele local até que você clique no X
no canto superior esquerdo.
FIGURA 3-17 A opçã o Fixar na fonte que fixa uma dica de ferramenta ao có digo. Você pode
clicar no símbolo da divisa (símbolo inferior com v duplo) para adicionar um comentá rio a
essa expressã o também.
Wh en você está pronto para executar a aplicaçã o a toda a velocidade, você pode pressionar
F5 (Debug |
Continuar).
Resumo da lição
■■ TDD fornece uma ó tima maneira de escrever có digo e aprender sobre o có digo.
■■ QUnit pode ser usado para executar TDD com aplicativos da web.
■■ QUnit-Metro pode ser usado para executar TDD com aplicativos do Windows 8.
■■ NuGet é um sistema de gerenciamento de pacotes de có digo aberto para a

plataforma .NET que simplifica a adiçã o de bibliotecas de terceiros em seu có digo.
■■ Ao criar testes, sempre crie um teste com falha primeiro e, em seguida, adicione o
có digo para fazer o teste passar.
■■ Sempre tente manter o có digo JavaScript separado do HTML.
■■ Para melhor desempenho, coloque os elementos < script > na parte inferior do

documento HTML, antes da tag < / body >.
■■ Você pode definir um ponto de interrupçã o em seu JavaScript clicando na instruçã o e

pressionando F9
(Depurar | Alternar ponto de interrupçã o).
■■ Você pode percorrer o có digo pressionando F11 (Depurar | Depurar), F10 (Depurar |
Passar por cima) ou Shift + F11 (Depurar | Sair).
Revisão da aula
1. Você está criando um novo aplicativo do Windows 8 e deseja configurar o TDD para o
seu có digo JavaScript. Qual estrutura de teste você usará ?
A. QUnit
B. QUnit-Metro
C. Teste Microsoft
D. NUnit
2. Quais sã o as etapas para TDD?
A. Escreva o teste de aprovaçã o, escreva o có digo, execute o teste novamente para validar
se ele ainda passa.
B. Escreva o teste com falha, escreva o có digo, execute o teste novamente para validar se
ele foi aprovado.
C. Escreva o có digo, escreva o teste para validar se ele passa, execute o teste novamente
para validar se ele ainda passa.
D. Escreva o teste de aprovaçã o, escreva o có digo, quebre o có digo, execute o teste

novamente para validar que ele falhou.

107
3. Onde seu có digo JavaScript deve ser colocado?
A. No elemento <head> do seu documento HTML.
B. Logo antes da tag </body>.
C. Você deve sempre colocar seu có digo JavaScript em arquivos separados, externos ao
seu documento HTM L.
D. Dentro do elemento <body>, na parte superior.
Lição 3: Trabalhando com objetos
Neste capítulo, você viu muitos fundamentos do JavaScript, mas alguns elementos nã o
foram discutidos. Você ainda precisa saber como acessar objetos existentes e como criar e
usar um array, que é um objeto JavaScript especial. Você também precisa saber como ser
notificado quando algo muda em um objeto. A criaçã o de seus pró prios objetos
personalizados é abordada no Capítulo 6,
"JavaScript e jQuery essenciais."
Esta liçã o explica matrizes, o modelo de objeto de documento (DOM) e como você pode
acessar o DOM usando JavaScript. A liçã o continua descrevendo notificaçõ es de eventos,
que permitem que você se inscreva em eventos DOM.
■■ Crie e modifique uma série de itens.
■■ Navegue no DOM usando JavaScript.
■■ Inscrever-se em eventos DOM.

Um array é um objeto de coleçã o que possui uma sequência de itens que você pode acessar
e modificar. A matriz é atribuída a uma variá vel , e você pode acessar seus itens usando seu
indexador, que é a chave
Termos colchetes ([]). Como a coleçã o de itens está em uma variá vel, você pode facilmente
passar o array para uma funçã o. Você também pode percorrer os itens da matriz conforme
necessá rio.
Criação e preenchimento de uma matriz
Existem três maneiras de criar um array. Nã o importa o método que você escolher, embora
sua escolha típica y seja baseada na implementaçã o do array no programa:
■■ Inserindo itens com o indexador A matriz é criada usando a nova palavra-chave, que

cria uma instâ ncia do objeto Array. Depois que a matriz é criada e atribuída a uma variá vel,
os itens sã o adicionados à matriz usando o nú mero de índice, que é baseado em zero. Para
inserir novos itens, o nú mero do índice deve ser do tamanho de um rray.
Por exemplo, depois que a matriz é criada, seu tamanho é zero, portanto, zero é usado para
inserir o primeiro item. Usando este método, os itens podem ser adicionados em qualquer
lugar do programa. Observe que se você usar um nú mero de índice maior do que a
quantidade de itens que existem atualmente, você adiciona itens vazios ao array. Por
exemplo, se você atualmente tem apenas um item na matriz, mas especifica um nú mero de
índice de 2, você adicionará seu item com um nú mero de índice de 2 e um item vazio será
adicionado ao nú mero de índice 1. O seguinte é um exemplo de criaçã o da matriz e adiçã o
de itens:
var pizzaParts = novo Array ();
pizzaParts [0] = 'pepperoni';
pizzaParts [1] = 'cebola';
pizzaParts [2] = 'bacon';

■■ Matriz condensada A matriz é criada usando a nova palavra-chave, que cria uma
instâ ncia do objeto Array, e todos os itens sã o passados para o construtor do objeto
Array. O método condensado é conveniente, mas você precisa conhecer todos os itens no
momento de criar o array. A seguir está um exemplo de criaçã o de array populado: var
pizzaParts = new Array ('pepperoni', 'onion', 'bacon');
■■ Matriz literal A matriz é criada fornecendo a lista de itens, entre colchetes. Isso é muito
semelhante ao array condensado ; apenas requer menos digitaçã o. A seguir está um
exemplo da matriz literal:
var pizzaParts = ['calabresa', 'cebola', 'bacon'];
Acessando os itens da matriz
Para acessar os itens da matriz, use o indexador. Lembre-se de que a matriz é baseada em

zero e, se você tentar usar um nú mero maior do que a quantidade de itens na matriz, um
valor de indefinido será retornado. O exemplo a seguir recupera a cebola: var secondItem =
pizzaParts [1];
Modificando os itens da matriz
Você também usa o indexador quando deseja modificar os itens na matriz. Se você tentar
usar um nú mero maior do que a quantidade de itens na matriz, nenhuma exceçã o será
lançada. Em vez disso, o item é adicionado ao array e o tamanho do array aumenta para o
nú mero que você usou mais um. O exemplo a seguir modifica a cebola definindo seu valor
como queijo: pizzaParts [1] = 'queijo';
Noções básicas sobre propriedades de array
Cada parte dos objetos de dados que podem conter é chamada de propriedade . Algumas
propriedades sã o somente leitura, enquanto outras sã o legíveis e
gravá veis. O objeto Array tem uma propriedade que você usará Key
Termos muitas vezes, a propriedade de comprimento . Esta propriedade é somente leitura e

retorna a quantidade de itens na matriz. Por exemplo, uma matriz com dois itens retorna 2.
A propriedade length é ú til na Liçã o 3: Trabalhando com objetos CAPÍTULO 3
109
percorrendo os itens na matriz. O có digo de exemplo a seguir demonstra a propriedade
length:
para (var i = 0; i <pizzaParts.length; i ++) {
alerta (pizzaParts [i]);
Usando métodos de array
Os objetos podem ter suas pró prias funçõ es ; cada funçã o de objeto é chamada
de método . O objeto Array tem os seguintes métodos ú teis:
Chave
Termos
■■ concat Une duas ou mais matrizes e retorna uma nova matriz com todos os itens,
conforme mostrado no exemplo a seguir:
var pizzaMeatParts = ['pepperoni', 'presunto', 'bacon'];
var pizzaVegetableParts = ['pimenta', 'cebola'];
var pizzaParts = pizzaMeatParts.concat (pizzaVegeta bleParts);
■■ indexOf Localiza o item na matriz e retorna seu índice, conforme mostrado no exemplo

a seguir, no qual a variá vel baconIndex será definida como 2: var pizzaMeatParts =
['pepperoni', 'ham', 'bacon'];
var baconIndex = pizzaMeatParts.indexOf ('bacon');
■■ join Cria uma string a partir dos itens da matriz. Os itens sã o delimitados por vírgulas
por padrã o, mas você pode passar um separador alternativo. A partir da seguinte
cessioná rios uma cadeia que contém 'pepperoni, fiambre, bacon' para o meatParts variá vel:
var meatParts = pizzaMeatParts.join ();
■■ lastIndexOf Pesquisa no final da matriz o ú ltimo item na matriz que atende aos

critérios de pesquisa e retorna seu índice, conforme mostrado no exemplo a seguir, no qual
a variá vel lastHamIndex será definida como 3:
var pizzaMeatParts = ['pepperoni', 'presunto', 'bacon', 'presunto', 'presunto']; var
lastHamIndex = pizzaMeatParts.lastIndexOf ('ham');
■■ pop Remove e retorna o ú ltimo elemento da matriz. Isso reduz o comprimento da

matriz em um. O exemplo a seguir atribui 'bacon' à variá vel lastItem : var pizzaMeatParts =
['pepperoni', 'ham', 'bacon'];
var lastItem = pizzaMeatParts.pop ();
■■ push Adiciona um novo item ao final de uma matriz e retorna o novo comprimento,

conforme mostrado no exemplo a seguir, em que 'prosciutto' é adicionado ao final da
matriz e 4 é atribuído à variá vel newLength :
var newLength = pizzaMeatParts.pus h ('prosciutto');
■■ reverse Inverte a ordem dos itens em uma matriz e retorna uma referência (nã o uma
nova matriz) à matriz invertida, de forma que a matriz original seja modificada. O exemplo
a seguir inverte a oferta da matriz:
var pizzaMeatParts = ['pepperoni', 'presunto', 'bacon', 'presunto']; pizzaMeatParts.reverse

();
■■ shift Remove e retorna o primeiro item da matriz. Se nenhum item estiver na matriz, o

valor de retorno é indefinido. O exemplo a seguir remove 'pepperoni' da matriz e o atribui
à variá vel firstItem :
var firstItem = pizzaMeatParts.shift ();
■■ slice Retorna uma nova matriz que representa parte da matriz existente. O método de
fatia tem dois parâ metros: início e fim . O parâ metro inicial é o índice do primeiro item a ser
incluído no resultado. O parâ metro final é o índice do item que você nã o deseja incluir no
resultado. No exemplo a seguir, a variá vel mySlice será atribuída
'presunto' e 'bacon'. Observe que 'meatbal' nã o está incluído no resultado, e a matriz

original nã o é alterada:
var pizzaMeatParts = ['pepperoni', 'presunto', 'bacon', 'almô ndega', 'presunto']; var mySlice

= pizzaMeatParts.slice (1,3);
■■ sort Classifica os itens em uma matriz e retorna uma referência à matriz. A matriz

original é modificada. O exemplo a seguir classifica o array. Apó s a classificaçã o,
pizzaMeatParts conterá 'bacon', 'presunto', 'carne', 'calabresa', 'presunto': var
pizzaMeatParts = ['pimenta oni', 'presunto', 'bacon', 'almô ndega',
'presunto' ]; pizzaMeatParts.sort ();
■■ splice Adiciona e remove itens de uma matriz e retorna os itens removidos. A matriz

original é modificada para conter o resultado. O primeiro parâ metro do método de emenda
é o índice inicial de onde começar a adicionar ou excluir. O segundo parâ metro indica
quantos itens devem ser removidos. Se 0 for passado como o segundo parâ metro, nenhum
item será removido. Se o segundo parâ metro for maior do que a quantidade de itens
disponíveis para remoçã o, todos os itens do índice inicial ao final da matriz serã o
removidos. Apó s os primeiros dois parâ metros, você pode especificar quantos itens desejar
adicionar. O exemplo a seguir remove 'ham' e 'bacon' da matriz original e atribui 'ham'
e 'bacon' para mySli ce . Além disso, 'spam' é inserido em pizzaMeatParts, o que resulta em

pizzaMeatParts contendo 'pepperoni', 'spam', 'meatbal', 'prosciutto': var pizzaMeatParts =
['pepperoni', 'ham', 'bacon', 'meatball ', 'prosciutto']; var mySlice = pizzaMeatParts.spli ce
(1,2, 'spam');
■■ toString Todos os objetos têm um método toString. Para o objeto Array, toString cria

uma string a partir dos itens na matriz. Os itens sã o delimitados por vírgulas, mas se você
quiser uma Liçã o 3: Trabalhar com objetos CAPÍTULO 3
111
delimitador diferente, você pode usar o método de junçã o e especificar um separador

alternativo. O seguinte atribui uma string contendo 'pepperoni, presunto, bacon'
à variá vel meatParts : var pizzaMeatParts = ['pepperoni', 'ham', 'bacon'];
var meatParts = pizzaMeatPa rts.toString ();

■■ unshift Adiciona um novo item ao início de uma matriz e retorna o novo comprimento,
conforme mostrado no exemplo a seguir, em que 'prosciutto' é adicionado ao início da
matriz e 4 é atribuído à variá vel newLength :
var pizzaMeatP arts = ['pepperoni', 'presunto', 'bacon'];
var newLength = pizzaMeatParts.unshift ('prosciutto');
■■ valueOf Todos os objetos têm um método valueOf. Para o objeto Array, valueOf retorna

os valores primitivos da matriz como uma string delimitada por vírgulas, conforme
mostrado no exemplo a seguir, que atribui uma string contendo 'pepperoni, ham, bacon'
à variá vel meatParts :
var meatParts = pizzaMeatParts.valueOf ();
■■ Você deseja recuperar um novo array que seja parte de um array

existente. Qual método de array você deve usar?
■■ Use o método de fatia.
Ao construir um aplicativo, os objetos primá rios que você deve acessar sã o os objetos que
compõ em o DOM, que representa o documento HT ML. Você precisa acessar o DOM para
controlar o comportamento do seu documento HTML e ser notificado quando algo
acontecer na pá gina.
Navegando no DOM
O DOM representa uma hierarquia de objetos, formando um modelo de seu documento

HTML. Para recuperar elementos do DOM, use a variá vel de documento embutida , que faz
referência ao DOM, e execute um dos métodos de pesquisa.
Alguns dos métodos de pesquisa retornam um ú nico elemento, enquanto outros retornam
uma matriz de elementos. Os métodos que retornam um array ret urna ou um NodeList
vivo ou um NodeList estática .
O NodeList ao vivo representa uma matriz de elementos que é continuamente atualizada

como o DOM
Chave
Os termos mudam, enquanto o NodeList está tico representa um instantâ neo de elementos
que nã o muda conforme o DOM muda . De uma perspectiva de desempenho, leva mais
tempo para criar o está tico 112 CAPÍTULO 3 Introduçã o ao JavaScript
NodeList, entã o considere trabalhar com os métodos de pesquisa que retornam uma
NodeList ao vivo se você deseja o melhor desempenho. É importante entender essa
diferença porque ela pode afetar sua escolha do método de pesquisa.
A seguir está uma lista dos métodos de pesquisa DOM com uma breve descriçã o e exemplo:
■■ getElementById Retorna uma referência ao primeiro objeto com o id especificado,

conforme mostrado no exemplo a seguir, que recupera uma referência ao botã o com o id de
btnSave: var btn = document.getElementById ('btnSave');
■■ getElementsByTagName Retorna um NodeList ativo , que é uma matriz especial de

todos os elementos com o nome de marca especificado. O NodeList ao vivo é atualizado
automaticamente se você adicionar, excluir ou modificar elementos. O exemplo a seguir
retorna uma matriz de todas as imagens: var images = document.getE lementsByTagName
('img');
■■ getElementsByName Retorna um NodeList ativo de todos os elementos com o nome

especificado. Isso funciona bem com botõ es de opçã o quando todas as opçõ es normalmente
têm o mesmo nome. O exemplo a seguir recupera uma matriz de todos os elementos com o
nome pizzaSize:
var pizzaSizes = document.getElementsByName ('pizzaSize');
■■ getElementsByClass Nã o compatível com Internet Explorer 8 e anterior. Retorna um

NodeList ativo de todos os elementos com o nome de classe CSS especificado. As classes
CSS sã o examinadas com mais detalhes no Capítulo 4, “Introduçã o ao CSS3”. Isso funciona
bem quando você tem muitos elementos, mas precisa agrupá -los, possivelmente para
torná -los visíveis ou ocultos. O exemplo a seguir recupera uma matriz de todos os
elementos com a classe na me pizzaPart:
var pizzaParts = document.getElementsByClass ('pizzaPart');
■■ querySelector Nã o compatível com Internet Explorer 7 e anteriores. Aceita CSS
seletor como seu parâ metro. Como o CSS é descrito em detalhes no Capítulo 4, este
exemplo é simplificado. O método querySelector retorna o primeiro elemento
correspondido se existir um para muitos ou nulo se nã o houver correspondência. Além de
ser compatível com o objeto de documento, o método querySelector existe no objeto
Element, portanto, você pode consultar todo o DOM ou apenas o conteú do de um
elemento. No exemplo a seguir, o símbolo de libra (#) indica uma pesquisa por um id. Este
exemplo retorna uma referência ao botã o cujo id é btnSave:
var btn = document.querySelector ('# btnSave');
■■ querySelectorAll Sem suporte no Internet Explorer 7 e anterior. Aceita CSS
seletor como seu parâ metro. Novamente, como o CSS é descrito em detalhes no Capítulo 4,
este exemplo é simplificado. O método querySelectorAll retorna um NodeList está tico de
todos os elementos que correspondem ou uma matriz vazia se nã o houver
correspondência. Além de ser compatível com o objeto de documento, o método
querySelector existe no objeto Element, portanto, você pode consultar todo o DOM ou
apenas o conteú do de um elemento. Na Liçã o 3: Trabalho com objec ts CAPÍTULO 3
113
a seguir o exemplo, o ponto (.) indica uma pesquisa por um nome de classe CSS. Este
exemplo retorna uma referência aos elementos cujo nome de classe CSS é pizzaPart: var
btn = document.querySelector ('. PizzaPart');
Trabalhando com eventos s
Os eventos fornecem a centelha para o mecanismo JavaScript. Um evento ocorre em um

determinado momento.
Para JavaScript, um evento ocorre mais comumente com a interaçã o do usuá rio, mas
também ocorre quando a chave
Termos algo muda de estado, como o início ou a interrupçã o de um vídeo . Por exemplo, o

usuá rio aponta para uma imagem, clica em um botã o ou alterna entre uma caixa de texto e
outra. O DOM fornece eventos para dar ao desenvolvedor a capacidade de se inscrever no
evento e executar o có digo.
Os eventos sã o baseados no padrã o de design editor-assinante . Quando um objeto é criado,

o desenvolvedor do objeto pode expor ou publicar eventos relacionados ao objeto. Quando
o objeto é usado, o desenvolvedor pode adicionar manipuladores de eventos ou se
inscrever nos eventos do objeto.
Adicionar um manipulador de eventos requer que o desenvolvedor forneça uma funçã o que

é chamada quando o evento é disparado. Quando o evento é disparado, todos os assinantes
do evento sã o notificados executando a funçã o de manipulador de eventos.
Quando um evento é disparado, um objeto Event é passado para a funçã o event h andler,
que fornece informaçõ es sobre o evento e o que estava acontecendo no momento, como a
localizaçã o do mouse para eventos relacionados ao mouse ou a tecla que foi pressionada
para eventos de teclado.
Captura e borbulhamento de eventos
Se a véspera de clique for disparada em um botã o, e o botã o estiver dentro de um hiperlink,

conforme mostrado na Figura 3-18, o hiperlink automaticamente dispara um evento de
clique? Em caso afirmativo, qual evento é disparado primeiro (clique de hiperlink ou clique
de botã o)?
Quando um elemento filho é aninhado em um elemento pai e o elemento filho dispara um
evento click, o evento é passado para baixo na hierarquia DOM, começando do objeto de
documento, que é denotado na Figura 3-18 como #document. Isso é chamado de captura de
evento . Depois que o evento atinge o elemento que o acionou, o evento é passado de volta
para a hierarquia, cuja chave
Os termos sã o chamados de borbulhamento de evento . A Figura 3-18 mostra a captura e o

borbulhamento. Passar o evento para baixo e para cima na hierarquia dá ao desenvolvedor
a oportunidade de se inscrever na descida do DOM (captura) ou na subida (bolha). O
desenvolvedor também pode cancelar a propagaçã o do evento.
Consulte a Figura 3-18, na qual um botã o está aninhado em um hiperlink. Quando o botã o é

clicado, o processo de captura ocorre onde o evento de clique é disparado no objeto de
documento, o objeto html, o objeto de corpo, o hiperlink e, por fim, no objeto de botã o.
Em seguida, o processo de bolha ocorre onde o evento de clique é acionado no objeto de

hiperlink, no objeto de corpo, no objeto html e, por fim, no objeto de documento.

FIGURA 3-18 Eventos capturados e subidos na hierarquia DOM Inscrever-se em um
evento
Para se inscrever em um evento, você pode usar a funçã o addEventListener, que possui três
parâ metros. O primeiro parâ metro é o evento no qual você deseja se inscrever. O segundo
parâ metro é a funçã o que você deseja executar quando o evento for disparado. O
terceiro parâ metro é um valor booleano para especificar quando sua funçã o será
executada, onde true indica a execuçã o na captura de evento e false indica a execuçã o na
bolha de evento. Normalmente, é preferível definir esse parâ metro como falso. A seguir
está um exemplo de inscriçã o no evento click de um botã o cujo id é btnSave quando a
funçã o saveData é chamada durante o borbulhamento do evento click:
var btn = document.getElementById ('btnSa ve');
btn.addEventListener ('click', saveData, false);
Quando você se inscreve em um evento chamando addEventListener, os ouvintes de

eventos existentes nã o sã o afetados, o que significa que quaisquer funçõ es existentes que
foram adicionadas ainda serã o executadas. No exemplo anterior , se você executar a
segunda linha duas vezes, adicionará uma segunda chamada à funçã o saveData e essa
funçã o será executada duas vezes quando você clicar no botã o.
O exemplo anterior é a forma preferida para se inscrever em um evento porque é

o especificado pelo W3C subs cription, e este có digo seria em seu arquivo JavaScript. No
entanto, você também pode se inscrever em um evento adicionando uma inscriçã o inline à
tag HTML. Esta é a forma mais antiga de se inscrever em eventos e é compatível com todos
os navegadores. Ao adicionar ao HT ML
tag, você deve adicionar o prefixo “on” ao nome do evento para criar o nome do atributo
adequado, conforme mostrado no exemplo a seguir, que é equivalente ao exemplo anterior,
no qual a inscriçã o do evento é adicionada ao processo de bubbling:
<button id = 'btnSa ve' onclick = 'saveData ();' > Salvar </button> Liçã o 3: Trabalhando

com objetos CAPÍTULO 3
115
Uma variaçã o do método inline de inscriçã o em um evento é a inscriçã o tradicional , que

permite que você se inscreva em um evento em seu có digo JavaScript usando o nome do
atributo, que também adiciona o evento ao processo de bolha, conforme mostrado a seguir
exemplo: var btn = document.getElementById ('btnSave');
btn.onclick = saveData;
Cancelamento de inscrição em um evento
Para cancelar a assinatura de um evento, use a funçã o removeEventListener, que tem os

mesmos três parâ metros da funçã o addEventListener. A seguir está um exemplo de
remoçã o da funçã o saveData do evento de clique do botã o cujo id é btnSave: var btn =
document.getElementById ('btnSave');
btn.removeEventListener ('click', saveData, false);
Cancelando a propagação do evento
A qualquer momento durante a captura do evento ou o processo de bolha do evento, você

pode desejar interromper a propagaçã o do evento. Você pode ter um manipulador de
eventos global atribuído ao objeto de documento no borbulhamento do evento de clique e,
depois de manipular o evento de clique especificamente em um botã o, você nã o deseja que
o manipulador de eventos de clique global seja disparado. Para cancelar a propagaçã o do
evento, use a funçã o stopPropagation no objeto Event. O objeto Event é passado para sua
funçã o de manipulador de eventos, conforme mostrado no exemplo a seguir: var btn =
document.getElementById ('btnSave');
btn.addEventListener ('click', sa veData, false);
function saveData (e) {
// salve os dados
e.stopPropagation ();
}
Neste exemplo, se qualquer funçã o de tratamento de evento de captura existisse, ela ainda
seria executada.
Quando o evento atinge o botã o, saveData usa o objeto Event passado para chamar a funçã o
stopPropagation. Nenhuma funçã o de manipulador de eventos de bolha será executada.
Evitando a operação padrão
Quando você clica em uma caixa de seleçã o ou botã o de opçã o, eles possuem uma
funcionalidade incorporada para alterar sua aparência visual a ser selecionada ou
desmarcada. Quando você clica em um hiperlink, a funcionalidade interna navega para o
local href. Mesmo se você adicionar um evento de clique para esses objetos, eles ainda
fornecerã o seu comportamento padrã o. Para interromper o comportamento padrã o, você
pode chamar o método preventDefault no objeto Event , conforme mostrado no exemplo a
seguir, que interrompe a navegaçã o para o local href no hiperlink:
var hyperlink = document.getElementById ('lnkSave');
hyperlink.addEventListener ('click', saveData, false);
function saveData (e) {
// salve os dados
e.preventDefault ();
Trabalhando com “isso”
Ao trabalhar com eventos, você frequentemente desejará acessar o objeto que causou o
evento. Além disso, você desejará acessar o objeto de forma genérica para que possa
chamar o mesmo có digo a partir do evento click de vá rios botõ es.
JavaScript fornece esta palavra - chave. A palavra - chave this faz referência ao objeto que
causou o evento. Mais explicitamente, a palavra - chave this fornece uma referência ao
proprietá rio da funçã o.
Chave
Termos Se você atribuir a funçã o ao evento de clique de um botã o, o botã o será o

proprietá rio da funçã o. Se você atribuir a funçã o a outro botã o, esse botã o possui a funçã o
quando esse botã o é clicado.
Referência de evento de janela
A variá vel de janela embutida é uma instâ ncia do objeto Window, que representa a janela
atual do navegador. O objeto Window possui os seguintes eventos, que podem ser
aplicados à tag < body > adicionando o prefixo “on”:
■■ pós-impressão Acionado apó s a impressã o do documento
■■ beforeprint Disparado antes de o documento ser impresso
■■ beforeonload Disparado antes do documento carregar
■■ desfoque Acionado quando a janela perde o foco
■■ erro disparado quando ocorre um erro
■■ foco Disparado quando a janela recebe o foco
■■ haschange Disparado quando o documento é alterado
■■ carregamento Disparado quando o documento é carregado
■■ mensagem disparada quando a mensagem é disparada
■■ offline Disparado quando o documento fica offline
■■ online Disparado quando o documento fica online
■■ pagehide Disparado quando a janela está oculta
■■ exibição de páginas acionado quando a janela se torna visível
■■ popstate Disparado quando o histó rico da janela muda
■■ refazer Disparado quando o documento executa um refazer
■■ redimensionar Disparado quando a janela é redimensionada

■■ armazenamento Disparado quando uma á rea de armazenamento da web é atualizada
■■ desfazer Disparado quando o documento executa uma açã o de desfazer
■■ descarregar Disparado quando o usuá rio sai do documento
A seguir está um exemplo de inscriçã o em um evento Window:
window.addEventListener ('load', winEvent, false);
function winEvent (e) {
alerta ('Carregar janela');
Liçã o 3: Trabalhando com objetos CAPÍTULO 3
117
Referência de evento de formulário
Os eventos a seguir sã o disparados por açõ es dentro de um formulá rio HTML. Embora

esses eventos se apliquem a todos os elementos HTML5, eles sã o mais comuns em
elementos de formulá rio:
■■ desfoque Acionado quando um elemento perde o foco
■■ mudança Acionada quando um elemento muda
■■ menu de contexto Disparado quando um menu de contexto é disparado
■■ foco Disparado quando um elemento recebe o foco
■■ formchange Disparado quando um formulá rio muda
■■ forminput Disparado quando um formulá rio recebe entrada do usuá rio
■■ entrada Disparado quando um elemento recebe entrada do usuá rio
■■ inválido Disparado quando um elemento é invá lido
■■ selecione Disparado quando um elemento é selecionado
■■ enviar Acionado quando um formulá rio é enviado

A seguir está um exemplo de inscriçã o em um evento de formulá rio:
var lastName = document.g etElementById ('txtLastName');
lastName.addEventListener ('focus', gotFocus, false);
function gotFocus (e) {
alert ('o sobrenome está em foco');
Referência de evento de teclado
Os eventos a seguir sã o acionados pelo teclado, e esses eventos se aplicam a todos os
elementos:
■■ keydown Disparado quando uma tecla é pressionada
■■ keypress Disparado quando uma tecla é pressionada e solta
■■ keyup Disparado quando uma tecla é liberada
O seguinte é um exemplo de inscriçã o em um evento de teclado. Observe que o objeto de

evento do teclado tem a propriedade which que contém o có digo char da tecla que foi
pressionada, e você pode convertê-lo em uma string conforme necessá rio:
lastName.addEventListener ('keypress', key GotPressed, false);
function keyGotPressed (e) {
var charCode = e.which;
var charStr = String.fromCharCode (charCode);
alert (charStr);
Referência de evento de mouse
Os eventos a seguir sã o acionados por um mouse ou açõ es do usuá rio semelhantes, e esses
eventos se aplicam a todos os elementos HTML5:
■■ clique acionado com um clique do mouse

■■ dblclick Disparado com um clique duplo do mouse
■■ arrastar Disparado quando um elemento é arrastado
■■ dragend Disparado no final de uma operaçã o de arrastar
■■ dra genter Disparado quando um elemento é arrastado para um destino de soltar

vá lido
■■ dragleave Disparado quando um elemento deixa um destino de soltar vá lido
■■ dragover Disparado quando um elemento está sendo arrastado sobre um destino de

soltar vá lido
■■ dragstart Disparado no início de uma operaçã o de arrastar
■■ drop Disparado quando o elemento arrastado está sendo solto
■■ mousedown Disparado quando um botã o do mouse é pressionado
■■ mousemove Disparado quando o ponteiro do mouse se move
■■ mouseout Disparado quando o ponteiro do mouse sai de um elemento
■■ mouseover Disparado quando o ponteiro do mouse se move sobre um elemento
■■ mouseup Disparado quando um botã o do mouse é liberado
■■ mouseWheel accionado quando a roda do rato está a ser rodado
■■ scroll Disparado quando a barra de rolagem de um elemento está sendo rolada O

seguinte é um exemplo de inscriçã o em um evento de mouse na caixa de texto lastName:
lastName. addEventListener ('click', gotClicked, false);
function gotClicked (e) {
alerta ('Foi clicado');
Referência de evento de mídia
Os eventos a seguir sã o acionados por mídia, como vídeos, imagens e á udio. Esses eventos
se aplicam a todos os elementos HTML5, mas sã o mais comuns em elementos de mídia,
como < áudio >,
< embed >, < img >, < object > e < video >:

■■ aborto Disparado ao abortar
■■ canplay Disparado quando um arquivo está pronto para começar a ser reproduzido,

que é quando ele tem buffer suficiente para começar
■■ canplaythrough Disparado quando um arquivo pode ser reproduzido até o fim sem

pausar para armazenamento em buffer
■■ mudança de duração Disparado quando o comprimento da mídia muda
■■ esvaziado Provocado quando algo ruim acontece e o arquivo é subitamente

indisponível, tal como quando inesperadamente discon NECTS
■■ terminado Disparado quando a mídia chega ao fim, o que é um evento ú til para

mensagens como “obrigado por ouvir”
■■ erro Disparado quando ocorre um erro enquanto o arquivo está sendo carregado Liçã o
3: Trabalhando com objetos CAPÍTULO 3
119
■■ dados carregados Acionado quando dados de mídia sã o carregados
■■ metadados carregados Disparado quando os metadados (como dimensõ es e duraçã o)

sã o carregados
■■ loadstart Disparado assim que o arquivo começa a carregar, antes que qualquer coisa
seja realmente carregada
■■ pause Disparado quando a mídia é pausada de forma programá tica ou pelo usuá rio
■■ play Disparado quando a mídia está pronta para começar a jogar
■■ reprodução Disparado quando a mídia realmente começou a ser reproduzida
■■ progresso Disparado quando o navegador está no processo de obtençã o dos dados de

mídia
■■ ratechange Disparado cada vez que a taxa de reproduçã o muda, como quando um

usuá rio muda para um modo de câ mera lenta ou avanço rá pido
■■ readystatechange Disparado cada vez que o estado pronto muda quando o estado

pronto rastreia o estado dos dados de mídia
■■ seeked Disparado quando o atributo de busca é definido como falso, indicando que a

busca terminou
■■ buscando Disparado quando o att ribute de busca é definido como verdadeiro,
indicando que a busca está ativa
■■ paralisado Disparado quando o navegador nã o consegue buscar os dados de mídia por

qualquer motivo
■■ suspender Disparado ao buscar os dados da mídia é interrompido antes de ser

completamente carregado por qualquer motivo
■■ ti meupdate Disparado quando a posiçã o de reproduçã o muda, como quando o usuá rio

avança rapidamente para um ponto diferente na mídia
■■ volumechange Disparado cada vez que o volume é alterado, o que inclui definir o

volume para "mudo"
■■ em espera Disparado quando a mídia é pausada, mas espera-se que seja retomada,

como quando a mídia faz uma pausa para armazenar mais dados
A seguir está um exemplo de inscriçã o em um evento de mídia no elemento < video >: var

video = document.getElementById ('video');
video.addEventListener (' reproduzir', reproduzir, falso);
funçã o jogando (e) {
alerta ('Jogando');
Resumo da lição
■■ Um array é um objeto de coleçã o que possui uma sequência de itens que você pode
acessar e modificar. Você pode usar o indexador para acessar itens em uma matriz. Use o
comprimento propriedade y na matriz para recuperar o tamanho da matriz.
■■ Uma funçã o que é definida em um objeto é chamada de método .
■■ O objeto Array tem muitos métodos.
■■ O DOM representa uma hierarquia de objetos, formando um modelo do seu documento

HTML.
■■ Um evento ocorre em um determinado momento.

■■ Os eventos sã o baseados no editor ou padrã o do assinante.
■■ Para se inscrever em um evento, você pode usar a funçã o addEventListener. Para

cancelar a propagaçã o do evento, use a funçã o stopPropagation no objeto Event. Para
cancelar a assinatura de um evento, use a funçã o removeEventListener. Para interromper o
comportamento padrã o, chame o método preventDefault no objeto Event.
■■ Para adicionar uma inscriçã o de evento em um elemento HTML, adicione o prefixo “on”
ao nome do evento para obter o nome do atributo que você adicionará à tag inicial do
elemento.
Revisão da aula

1. Você tem duas matrizes de s trings, clientes e funcioná rios, e deseja combiná -los para
criar uma matriz de contatos. Qual método seria o mais adequado para essa tarefa?
A. concat
B. junte-se
C. push
D. splice
2. Você deseja obter uma lista de todos os elementos cujo nome de tag é div e precisa
recuperar essa lista o mais rá pido possível. Qual funçã o é mais apropriada para esta tarefa?
A. getElementsByName
B. querySelectorAl
C. getElementsByTagName
D. getElementsByC lass
Pratica exercícios

Exercício 1: Criar uma página da web da calculadora

Neste exercício, você pratica seu conhecimento de JavaScript criando um site com uma
ú nica pá gina da Web que contém uma calculadora. A pá gina da web em si será um tanto
bá sica até que CSS seja discutido no Capítulo 4.
121
2. Inicie o Visual Studio. Clique em Arquivo e escolha Novo Projeto. Navegue até Instalado

| Modelos
| Visual Basic ou Visual C # | ASP.NET Empty Web Applicati on.
3. Defina o nome do seu aplicativo como WebCalculator .
4. Selecione um local para seus aplicativos.
5. Defina o nome da soluçã o para WebCalculatorSolution .
6. Certifique-se de manter a caixa de seleçã o Criar diretó rio para soluçã o selecionada.
Quando o aplicativo for criado, você terá um projeto vazio.
8. Na janela Solution Explorer, adicione uma pá gina inicial clicando com o botã o direito do
mouse no nó do projeto.
Clique em Adicionar e escolha Pá gina HTML. Nomeie a pá gina default.html e clique em OK.
9. Na janela Solution Explorer, clique com o botã o direito do mouse no arquivo default.html
e escolha Definir como pá gina inicial.
10. Abra a pá gina default.html e insira Web Calculator no elemento < title >.
11. Insira o seguinte HTML no elemento < body > para fornecer uma interface de usuá rio

bá sica para a calculadora:
<input id = "txtResult" type = "text" readonly = "readonly" /> <br />
<input id = "txtInput" type = "text" /> <br />
<button id = "btn7"> 7 </button>

<button id = "btn9"> 9 </button> <br />
<button id = "btnClear"> C </ but ton>
<button id = "btnClearEntry"> CE </button> <br />
<button id = "btnPlus"> + </button>
<button id = "btnMinus"> - </button>
12. Na janela Solution Explorer, adicione um arquivo JavaScript para o seu có digo clicando
com o botã o direito do mouse na pasta Scripts ; clique em Adicionar e escolha Arquivo
JavaScript. Defina o nome para CalculatorLibrary. js e clique em OK.
13. Para ver o que você tem até agora, pressione F5 para iniciar a depuraçã o do
aplicativo. Você deve ver uma tela branca com uma interface de calculadora rudimentar,
conforme mostrado na Figura 3-19.
FIGURA 3-19 A interface de usuá rio da calculadora da web

14. Volte para o Visual Studio pressionando Alt + Tab. Observe que a barra de título diz
(Em execuçã o).
15. Pressione Shift + F5 para interromper a depuraçã o. Observe que Shift + F5 funciona

apenas quando o Visual Studio tem o foco. Nã o funciona quando o aplicativo em execuçã o
tem o foco.
Neste exercício, você continua com o projeto do Exercício 1 e adiciona a estrutura de teste
QUnit, que o ajudará no desenvolvimento de JavaScript para a calculadora.
1. Abra o projeto do Exercício 1.
Se você nã o realizou o Exercício 1, pode usar o projeto localizado na pasta Iniciar do

Exercício 2.
2. Na janela Solution Explorer, adicione QUnit clicando com o botã o direito do mouse no nó
WebCalculator.
Clique em Gerenciar pacotes NuGet, escolha Online e digite QUnit na caixa de pesquisa.
Instale QUnit para ASP.NET MVC.
3. Na janela Solution Explorer, adicione um arquivo JavaScript para seus testes de
JavaScript clicando com o botã o direito na pasta Scripts. Clique em Adicionar e escolha
Arquivo JavaScript. Defina o nome como tests.js e clique em OK.
4. Na janela Solution Explorer, adicione uma pá gina de teste HTML clicando com o botã o
direito do mouse no nó do projeto WebCalculator. Clique em Adicionar e escolha Pá gina
HTML. Nomeie a pá gina CalculatorTests.html e clique em OK.
5. Adicione marcaçã o no elemento < head > do arquivo CalculatorTests.html que adiciona

referências ao arquivo QUnit.css, arquivo QUnit.js, arquivo CalculatorLibrary.js e arquivo
tests.js.
6. Para completar a configuraçã o da estrutura QUnit, adicione marcaçã o

no elemento < body > para o cabeçalho QUnit, banner, barra de ferramentas, testes de
agente de usuá rio e fixaçã o. Seu có digo-fonte HTML deve ser parecido com o seguinte:
<! DOCTYPE html>
<head>

123
<title> </title>
<script type = "text / javascript" src = "Scripts / CalculatorLibrary.js"> </script>
<script type = "text / javascript" src = "Scripts / tests.js"> </script>
</head>
<body>
<div id = "qunit-testrunner- toolbar"> </div>
<div id = "qunit-fixture">
marcaçã o de teste, ficará oculta
</div>
</body>
</html>
7. Observe que o elemento < div > para o acessó rio QUint é um espaço reservado para a
marcaçã o HTML que você deseja acessar em seus testes, onde essa marcaçã o nã o deve ser
renderizada. Copie a marcaçã o HTML que está no arquivo default.html e cole no acessó rio
QUnit.
Seu có digo-fonte HTML agora deve se parecer com o seguinte:
<! DOCTYPE html>

<head>
<title> </title>
<script type = "text / javascript" src = "Scripts / Calculato rLibrary.js">
</script>
<script type = "text / javascript" src = "Scripts / tests.js"> </script>
</head>
<body>
<o l id = "qunit-tests"> </ol>

<button id = "btnClear"> C </button>
</div>
</body>
</html>
8. Clique com o botã o direito do mouse no arquivo CalculatorTests.html e escolha Definir

como pá gina inicial.
É hora de adicionar o primeiro teste. O objetivo do teste é adicionar 5 na caixa de texto

txtInput quando btn5 for clicado. Btn5 é escolhido arbitrariamente, o que nã o importa
porque você adicionará có digo para fazer todos os botõ es funcionarem. O objeto QUnit
possui um evento de método acionador que pode ser usado para simular um clique em
btn5. No arquivo tests.js, adicione o seguinte teste: test ("Btn5 Click Tes t", function () {
esperar (1);
var btn = document.getElementById ('btn5');
QUnit.triggerEvent (btn, "clique");
var result = txtInput.value;
var esperado = '5';
igual (resultado, esperado, 'Valor esperado:' + esperado + 'Valor real:' +
resultado);
});
No exemplo de có digo anterior, uma variá vel txtInput está sendo referenciada, mas a
variá vel nã o foi declarada.
9. No arquivo CalculatorLibrary.js, adicione uma instruçã o que declare a variá vel e uma
funçã o de inicializaçã o que pode ser chamada quando cada teste é executado, mas será
chamada pela pá gina .html padrã o quando executar o có digo concluído.
10. Na funçã o de inicializaçã o, adicione uma instruçã o que localize a caixa de texto txtInput
e atribua o resultado à variá vel txtInput . Seu có digo deve ser semelhante ao seguinte: var
t xtInput;
function initialize () {
txtInput = document.getElementById ('txtInput');
Você deve modificar o arquivo tests.js para chamar a funçã o de inicializaçã o como parte de
uma funçã o de configuraçã o que será executada antes de cada funçã o de teste. Faça isso
definindo um mó dulo no topo dos testes.
11. Adicione o seguinte có digo ao topo do arquivo tests.js: module ('Calculator Test Suite',
{setup: function () {initialize ();}}); O primeiro parâ metro da definiçã o do mó dulo é o nome
do mó dulo. O segundo parâ metro define um objeto que possui uma propriedade de
configuraçã o. A propriedade setup é atribuída a uma expressã o de funçã o que chama a
funçã o de inicializaçã o antes de cada teste.
125
12. Pressione F5 para executar o teste, que deve falhar, conforme mostrado na Figura 3-20,
porque você ainda nã o tem nenhum có digo. Observe que a falha indica que "5" era
esperado, mas o real era
“”.
FIGURA 3-20 O teste QUnit falhou porque nenhum có digo foi adicionado ainda 13. No
arquivo CalculatorLibrary.js, adicione uma funçã o numberClick que lê a propriedade
innerText ( conteú do textual do elemento) do botã o que foi clicado e anexa o innerText
propriedade para o valor da caixa de texto txtInput .
No entanto, se txtInput tiver um valor zero, você deve substituir seu valor pelo novo valor
para nã o ficar com zeros à esquerda na caixa de texto. Seu có digo deve ser parecido com o
seguinte:
function numberClick () {
txtInput.value = txtInput.value == '0'?
this.innerText: txtInput.valu e + this.innerText;
14. Na funçã o de inicializaçã o, adicione o có digo JavaScript para se inscrever no evento

click de btn5, que chamará a funçã o numberClick quando btn5 for clicado. O có digo deve
ser parecido com o seguinte:
document.getElementById ('btn5'). addE ventListener ('click', numberClick,

false); 15. Pressione F5 para executar o teste, que deve passar. Clique no teste para
expandi-lo e ver o indicador verde, conforme mostrado na Figura 3-21.

FIGURA 3-21 O teste de aprovaçã o
16. Modifique o teste adicionando um loop para testar todos os botõ es

numéricos. Renomeie o teste para Teste de clique de botão .
Lembre-se de que você está anexando a txtInput , portanto, você precisa testar o ú ltimo
caractere para ver se obteve o resultado correto. Você também deve adicionar uma
declaraçã o ao comprimento da string conforme anexa a txtInput . Nã o se esqueça de que
você adicionou o có digo a numberClick para remover os zeros à esquerda, e este loop
começa acionando btn0, portanto, sua afirmaçã o sobre o comprimento deve levar isso em
consideraçã o. Seu teste deve ser parecido com o seguinte:
test ("Teste de clique de botã o", function () {
var buttonQuantity = 10;
esperar (buttonQuantity * 2);
para (var i = 0; i <buttonQuantity; i ++) {
var btn = document.getElementById ('btn' + i);
QUnit.triggerEvent (btn, "clique");
var result = txtInput.value [txtInput.value.length-1];
var esperado = String (i);
igual (resultado, esperado, 'Valor esperado:' + esperado +
'Valor real:' + resultado);
var comprimento esperado = i <2? 1: i;

igual (txtInput.value.length, expectLength,
'Comprimento esperado da string:' + comprimento esperado +
'Valor real:' + txtInput.value.length);
});
Este teste define a variá vel buttonQuantity como 10, e buttonQuantity chama a funçã o

esperada para definir a quantidade de asserçõ es esperada. Existem duas afirmaçõ es por
botã o. O loop for é executado 10 vezes para obter uma referência ao botã o apropriado,
acionar o evento click, recuperar o resultado, executar uma asserçã o que verifica o ú ltimo
caractere de txtInput e executar uma asserçã o que verifica o comprimento de txtInput .
127
17. Pressione F5 para executar o teste e todos os 10 testes falharã o. Observe atentamente

cada teste para entender por que cada um deles falhou.
Você deve adicionar o có digo para se inscrever no evento de clique dos botõ es numéricos.
18. Corrija os testes com falha adicionando có digo de loop à funçã o de inicializaçã o que
assina o evento de clique de todos os dez botõ es de nú mero.
Seu có digo deve ser parecido com o seguinte:
para (var i = 0; i <10; i ++) {
document.getElementById ('btn' + i) .addEventListen er ('clicar',
numberClick, false);
19. Pressione F5 para executar o teste, que deve passar.
Quando btnPlus é clicado, o valor em txtInput será adicionado ao valor em txtResult .
20. No arquivo tests.js, adicione um novo teste para verificar btnPlus quando for clicado.
Yo ur có digo de teste deve ser semelhante ao que é devido fol:

test ("Adicionar Teste", function () {
esperar (1);
txtInput.value = '10';
txtResult.value = '20';
var btnPlus = document.getElementById ('btnPlus');
QUnit.triggerEvent (btnPlus, "clique");
var esperado = '30';
igual ( txtResult.value, esperado, 'Valor esperado:' + esperado +
'Valor real:' + txtResult.value);
});
21. Pressione F5 para executar o teste e verifique se ele falhou porque você nã o se

inscreveu no evento click de btnPlus.
22. Na funçã o de inicializaçã o, adicione o có digo para obter uma referência à caixa de
texto txtResult e atribua-o a uma nova variá vel txtResult global . Adicione o có digo na
funçã o de inicializaçã o para assinar btnPlus e chamar a funçã o plusClick. Adicione a funçã o
plusClick com o có digo para adicionar txtInput a txtResult .
var txtInput;
var txtResult;
para (var i = 0; i <10; i ++) {
document.getElementById ('btn' + i) .addEventListener ('clicar',

txtResult = document.getElementById ('txtResult');
document.getElementById ('btnPlus ')
.addEventListener ('click', plusClick, false);
function plusClick () {
txtResult.value = Nú mero (txtResult.value) + Nú mero (txtInput.value);
Quando btnMinus é clicado, o valor em txtInput será subtraído do valor em txtResult .
24. No arquivo tests.js, adicione um novo teste para verificar btnMinus quando for clicado.
Seu có digo de teste deve ser parecido com o seguinte:
test ("Subtrair Teste", function () {
esperar (1);
var btnMinus = document.getElementById ('btnMinus');
QUnit.triggerEvent (btnMinus, "clique");
igual (txtResult.value, esperado, 'Valor esperado:' + esperado +
});

inscreveu no evento click de btnMinus.
26. Na funçã o de inicializaçã o , adicione o có digo para assinar btnMinus e chame a funçã o
minusClick. Adicione a funçã o minusClick com o có digo para subtrair txtInput de txtResult .
para (var i = 0; i <10; i ++) {
doc ument.getElementById ('btn' + i) .addEventListener ('click',
document.getElementById ('btnPlus')
document.getElementById ('btnMinus')
.addEventListener ('click', minusClick, false);
function minusClick () {
txtResult.value = Number (txtResult.value) - Nú mero (txtInput.value);
Quando btnClearEntry for clicado, o valor em txtInput será definido como zero.
28. No arquivo tests.js, adicione um novo teste para verificar btnClearEntry quando for
clicado.

test ("Clear Entry Test", function () {
esperar (1);
129
QUnit.triggerEvent (btnClearEntry, "clique");
var esperado = '0';
igual (txtInput.value, esperado, 'Valor esperado:' + esperado +
'Valor real:' + txtInput.value);
});

inscreveu no evento click de btnClearEntry.
30. Na funçã o de inicializaçã o, adicione o có digo para assinar btnClearEntry e chame

a funçã o clearEntry. Adicione a funçã o clearEntry com có digo para redefinir txtInput para
zero.
para (var i = 0; i <10; i ++) {
document.getElementById ('btn' + i) .addEventListener ('click', numberClick , false);

.addEventListener ('cl ick', minusClick, false);
document.getElementById ('btnClearEntry')
.addEventListener ('click', clearEntry, false);
function clearEntry () {
Quando btnClear é clicado, o valor em txtInput e txtResult será definido como zero.
32. No arquivo tests.js, adicione um novo teste para verificar btnClear quando for clicado.
test ("Limpar teste", function () {
esperar (2);
QUnit.triggerEvent (btnClear, "clique");
var esperado = '0';
'Valor real:' + txtInput.value) ;
});
inscreveu no evento click de btnClear.
34. Na funçã o de inicializaçã o, adicione o có digo para assinar btnClear e chame a funçã o
limpar.
Adicione a funçã o clear com o có digo para redefinir txtInput e txtResult para zero.
para (var i = 0; i <10; i ++) {
document.getElementById ('btn' + i)
.addEventListener ('click', numberClick, false);
document.getElementById ('btnClearEnt ry')
document.getElementById ('btnClear')
.addEventListener ('clicar', limpar, falso);

function clear () {
Depois de clicar em btnPlus ou btnMinus e realizar a operaçã o matemá tica, txtInput deve

ser redefinido para zero.
36. No arquivo tests.js, modifique o teste de adiçã o e o teste de subtraçã o

para garantir que txtInput foi redefinido para zero.
Seu có digo de teste deve se parecer com o seguinte:
test ("Adicionar Teste", function () {
esperar (2);
QUnit.triggerEvent (btnPlus, "clique");
esperado = '0';
});
test ("Subtrair Teste", funçã o () {
esperar (2);
QUnit.triggerEvent (btnMinus, "clique");
131
esperado = '0';
});
Observe que, nesses testes , a chamada da funçã o expect recebe um valor de dois porque
agora você tem duas asserçõ es.
37. Pressione F5 para executar o teste e verifique se o teste falha porque você nã o

adicionou có digo à s funçõ es plusClick e minusClick que redefinirã o txtInput .
38. Na parte inferior das funçõ es plusClick e minusClick, chame a funçã o clearEntry.
txtResult.value = Nú mero (txtResult.value) + Nú mero (txtInput.value); clearEntry ();
txtResult.value = Number (txtResult.value) - Nú mero (txtInput.value); clearEntry ();

}
Quando o aplicativo é iniciado, txtInput e txtResult devem ser inicialmente definidos como

zero.
40. Adicione um teste ao início de tests.js que verifique txtInput e txtResult .
test ("Inicializar teste", function () {
esperar (2);
txtInput.value = '';
txtResult.value = '';
var esperado = '0';
});
41. Pressione F5 para executar o teste e verifique se ele falhou porque você nã o adicionou

có digo à funçã o de inicializaçã o para inicializar txtInput e txtResult .
42. Na parte inferior da funçã o de inicializaçã o, adicione uma chamada à funçã o limpar
para inicializar txtInput e txtResult .
para (var i = 0; i <10; i ++) {

}
document.getElementById ('btnClear'). addEventListener ('clicar', limpar, falso); Claro();
Agora que todos os testes foram aprovados, você está quase pronto para executar o
aplicativo, mas precisa adicionar o có digo ao arquivo default.html para chamar a funçã o de
inicializaçã o quando a pá gina for carregada.
44. Abra o arquivo default.html e adicione o seguinte bloco de script interno na parte

inferior do elemento < body >:
window.addEventListener ('carregar', inicializar, falso);
</script>
45. Na janela Solution Explorer, defina o arquivo default.html como o arquivo de

inicializaçã o clicando com o botã o direito do mouse no arquivo default.html. Clique em
46. Pressione F5 para iniciar a depuraçã o. Tente clicar nos botõ es numéricos para inserir
um nú mero e tente os botõ es mais e menos, enquanto observa os resultados. Tente clicar
no botã o limpar entrada depois de inserir um nú mero. T ry clicando no botã o claro, para
ver a entrada e resultado claro.
Os exercícios adicionais a seguir foram elaborados para dar a você mais oportunidades de
praticar o que aprendeu e ajudá -lo a dominar com êxito as liçõ es apresentadas neste
capítulo.
■■ Exercício 1 Aprenda mais sobre objetos e eventos adicionando mais funcionalidades à

calculadora. Você pode considerar adicionar multiplicaçã o e divisã o.
■■ Exercício 2 Aprenda mais sobre QUnit e TDD adicionando mais testes e, em seguida,
adicione o có digo para fazer os testes passarem.
■■ Exercício 3 Aprenda mais sobre borbulhamento de eventos adicionando

um elemento < div > que engloba os botõ es e, em seguida, adicione um evento click
ao elemento < div > para que todos os eventos de clique borbulhem no elemento < div >.
133
Respostas
Lição 1
A. Incorreto: O valor indefinido significa que a variá vel nunca foi inicializada.
B. Incorreto: O valor nulo significa que a variá vel foi explicitamente configurada para nã o
ter valor.
C. Correto: Ao realizar uma operaçã o matemá tica em um valor nã o numérico, NaN
(nã o um nú mero) resultará .
D. Incorreto: O valor Infinity resultará quando seu valor exceder 1,7976931348623157E +

10308.
2. Respostas corretas: B, C, D e F
A. Incorreto: você nã o pode usar uma palavra-chave JavaScript para um nome de variá vel
e switch é uma palavra-chave ript JavaSc.
B. Correto: O nome da variá vel myChar é vá lido.

C. Correto: JavaScript permite que um nome de variá vel contenha o sinal de dó lar, entã o o
nome da variá vel $ cost é vá lido.
D. Correto: JavaScript permite que um nome de variá vel contenha o sublinhado, de modo

que o _ nome da variá vel total é vá lido.
E. Incorreto: os nomes das variá veis nã o podem começar com um nú mero.
F. Correto: Os nomes das variá veis podem conter nú meros, mas nã o podem começar com
um nú mero.
A. Incorreto: O uso de ?? causa um erro de sintaxe.
B. Correto: O uso de || faz com que Usuá rio vá lido seja exibido se userName nã o tiver
valor.
C. Incorreto: O uso de && nã o exibe nada se userName nã o tiver valor.
D. Incorreto: O uso de + faz com que o Usuá rio Vá lido seja exibido se userName nã o tiver
valor, mas também exibe o userName e o Usuá rio Vá lido juntos quando o userName tem
um valor.
Lição 2
A. Incorreto: QUnit é para testar JavaScript para a web, nã o Windows 8.
B. Correto: QUnit-Metro é uma variaçã o do QUint, que oferece suporte ao Windows 8.
134 CAPÍTULO 3 Primeiros passos com JavaScript
C. Incorreto: o Microsoft Test nã o oferece suporte a JavaScript.
D. Incorreto: NUnit nã o suporta JavaScript.
A. Incorreto: você precisa escrever um teste com falha primeiro, para que possa ver a
aprovaçã o no teste depois de escrever o có digo.
B. Correto: você escreve um teste com falha e, em seguida, escreve o có digo que faz o teste
passar; em seguida, execute o teste novamente para validar se ele foi aprovado.
C. Incorreto: você nunca deve escrever có digo sem antes escrever um teste que falhe.
D. incorreto: I f você escreve um teste passando em primeiro lugar, o có digo nã o pode ser
testado para o sucesso.
A. Incorreto: colocar seu có digo JavaScript no elemento <head> nã o promove a

reutilizaçã o, e o có digo embutido pode fazer referência a elementos que ainda nã o foram
carregados.
B. Incorreto: colocar seu có digo JavaScript na tag </body> nã o promove a reutilizaçã o.
C. Correto: Colocar seu có digo J avaScript em arquivos separados, externos ao seu HTML
documento, promove a reutilizaçã o.
D. Incorreto: Colocar seu có digo JavaScript no elemento <body> nã o promove a

reutilizaçã o, e o có digo embutido pode fazer referência a elementos que ainda nã o foram
carregados.
Lição 3
A. Correto: concatena vá rios arrays e produz um array resultante.
B. Incorreto: Join cria uma string a partir dos itens do array.
C. Incorreto: Push adiciona um ú nico item ao final da matriz.
D. Incorreto: Splice adiciona e remove itens de uma matriz e produz uma matriz

resultante, mas você deve adicionar os itens um por um, nã o como uma matriz.
A. Incorreto: getElementsByName recupera uma NodeList ativa de elementos com base no

atributo de nome do elemento, nã o no nome da tag.
B. Incorreto: querySelectorAll é capaz de recuperar os elementos por nome de tag, mas

retorna uma NodeList está tica, que nã o executa tã o bem quanto funçõ es que retornam uma
NodeList ativa.
C. Correto: getElementsByTagName recupera um NodeList ativo de elementos com base

no nome da tag do elemento.
D. Incorreto: getElementsByClass recupera um NodeList ativo de elementos com base no

nome da classe CSS.
135
C APÍTULO 4
Primeiros passos com CSS3
Você aprendeu que o HTML fornece a estrutura e o JavaScript fornece o comportamento ao

seu documento HTML. Neste capítulo, você aprende como Cascading Style Sheets (CSS)
fornece a apresentaçã o para o seu documento HTML . CSS fornece a ferramenta para
projetar e criar um aplicativo da Web ou do Windows 8 de excelente aparência com
capacidade de reutilizaçã o em todas as pá ginas.
CSS oferece muito mais opçõ es para renderizar um documento do que estã o disponíveis se
você apenas usar HTML para fornecer formataçã o, e CSS é compacto e rá pido. CSS também
simplifica as atualizaçõ es do site, para que você possa modificar os estilos para alterar
completamente a aparência de todos os documentos HTML em seu aplicativo da web ou do
Windows 8.
Este capítulo apresenta brevemente a histó ria do CSS e, a seguir, discute os seletores e as
propriedades CSS em profundidade.
■■ Liçã o 1: Apresentando CSS3 137
■■ Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e cascateamento 145
■■ Liçã o 3: Trabalhando com propriedades CSS 165
Para concluir este capítulo, você deve ter algum conhecimento de desenvolvimento
web. Este capítulo requer o hardware e o software listados na seçã o “Requisitos do
sistema” na Introduçã o do livro.
Lição 1: Apresentando CSS3
O princípio de Cascading St yle Sheets (CSS) tem raízes na Standardized Generalized

Markup Language (SGML) da década de 1980. Seus objetivos sã o criar uma aparência
consistente em muitas pá ginas da web e separar a estrutura da apresentaçã o para que você
possa fornecer diferentes folhas de estilo para impressã o, navegaçã o ou outros cená rios.
O World Wide Web Consortium (W3C) publicou recomendaçõ es de nível 1 de CSS em

dezembro de 1996 e, em seguida, começou a trabalhar no nível de CSS 2. (A palavra
recomendaçã o significa um lançamento formal da publicaçã o.) Em maio de 1998, o CSS de
nível 2 foi publicado, e

137
o W3C começou a trabalhar em vá rios mó dulos de CSS Nível 3 (CSS3). Em vez de criar uma
grande publicaçã o para CSS3, o W3C separou CSS3 em mó dulos que poderiam ser
publicados independentemente.
Em 2005, o W3C se tornou mais rígido com a aplicaçã o dos requisitos de padrõ es e padrõ es
já publicados, como CSS Nível 2 Revisã o 1 (CSS 2.1), Seletores CSS3 e CSS3
O texto foi puxado de volta do nível de Recomendaçã o do Candidato para o nível de Projeto
de Trabalho. Nã o foi até junho de 2011 que a recomendaçã o CSS 2.1 foi publicada.
Como o CSS3 é modular, a estabilidade de cada mó dulo é diferente e seu status é

diferente. Mais de 50 mó dulos sã o publicados pelo Grupo de Trabalho CSS do W3C. No
momento em que este artigo foi escrito, os quatro mó dulos a seguir alcançaram o status de
recomendaçã o.
■■ Consultas de mídia Adapta a renderizaçã o de documentos HTML com base em

condiçõ es como resoluçã o e orientaçã o da tela para acomodar diferentes dispositivos,
como smartphones e tablets.
■■ Namespaces Formatos baseados em XML que podem usar namespaces para distinguir

vá rios usos do mesmo nome de elemento uns dos outros dentro do mesmo
documento. Esta publicaçã o explica como os seletores CSS podem ser estendidos para
selecionar esses elementos com base em seu namespace e em seu nome local.
■■ Seletores de nível 3 Descreve os seletores de elemento usados em CSS quando os

seletores sã o usados para selecionar elementos em um documento HTML ou XML para
anexar propriedades de estilo.
■■ Cor Especifica os aspectos relacionados à cor do CSS, incluindo transparência e as vá rias

representaçõ es do tipo de valor < cor >.
O CSS 2.1 está incluído no CSS3 porque o CSS3 está sendo projetado para ser compatível
com a recomendaçã o do CSS 2.1. Este capítulo apresenta o CSS3, cobrindo muitos aspectos
do CSS 2.1.
As folhas de estilo em cascata fornecem um meio de aplicar uma apresentaçã o a uma

estrutura HTML, definindo como os elementos HTML sã o exibidos. Usando CSS, você pode
definir cores de fundo e de fundo, m argins, bordas, fontes, posiçõ es e muito mais. Você tem
controle criativo dos elementos HTML, portanto, pode decidir como os elementos se
parecem e onde eles sã o exibidos na tela.
Se você trabalhou com um aplicativo de processamento de texto, como o Microsoft Word,

pode ter aplicado um estilo para alterar o tamanho da fonte de uma palavra ou
pará grafo. Isso é semelhante ao CSS, no qual você pode aplicar um estilo a um elemento que
faz com que ele seja renderizado de forma diferente. Um estilo é uma regra que descreve
como formatar uma parte específica de um documento HTML. Uma folha de estilo é um
conjunto de chaves
Regras de estilo dos termos.
Você pode criar um estilo e aplicá -lo a muitos elementos com base em um seletor. Você usa
um seletor para localizar e selecionar elementos com base no nome da tag, nome da classe,
ID e muito mais. Você pode digitar
Os termos criam um estilo que funciona com imagens e você pode criar um estilo que
funciona apenas com hiperlinks. Você também pode criar um estilo nomeado que pode ser
aplicado a qualquer elemento. A reutilizaçã o é poderosa.
138 CAPÍTULO 4 Introduçã o ao CSS3

Provavelmente, o recurso mais poderoso do CSS é o cascateamento . Para entender o
cascateamento, pense no papel do navegador na resoluçã o do estilo efetivo de um
elemento. O navegador poderia chave
Os termos podem ler vá rias folhas de estilo para uma pá gina HTML, em que cada folha de
estilo pode ter regras de estilo que afetam o estilo efetivo do elemento. À medida que cada
estilo é lido, ele modifica o estilo efetivo do elemento. As configuraçõ es de estilo aplicadas a
partir de uma folha de estilo podem ser substituídas por
estilos avaliados posteriormente . O estilo efetivo cai em cascata de uma folha de estilo para
a pró xima, possivelmente sendo sobrescrito ao longo do caminho. O cascateamento é
explicado com mais detalhes na Liçã o 2, “Compreendendo os seletores, a especificidade e o
cascateamento”.
Definir e aplicar um estilo
Uma regra de estilo, ou estilo, é composta de duas partes: o seletor, que localiza os

elementos no documento HTML que serã o estilizados, e o bloco de declaração , que contém
a chave de formataçã o
Instruçõ es de termos (declaraçõ es). Vá rias declaraçõ es sã o sempre separadas por ponto e
vírgula. Uma declaraçã o compreende uma propriedade CSS, seguida por dois pontos,
seguida por um valor. A seguir está um exemplo de regra de estilo que localiza
o elemento < body > e define a cor do plano de fundo como branco e a cor da fonte como
cinza.
corpo {
cor de fundo: branco;
cor: cinza;
}
Neste exemplo, o seletor é o corpo e o bloco de declaraçã o está contido entre as
chaves. Existem duas declaraçõ es, cada uma terminada com um ponto e vírgula. A primeira
declaraçã o especifica a propriedade CSS background-color seguida por um separador de
dois pontos e o valor da propriedade white .
Os seletores podem ser muito mais complexos e os blocos de declaraçã o podem conter
muito mais declaraçõ es, como você verá posteriormente neste capítulo.
Adicionar comentários dentro de uma folha de estilo
Você pode adicionar comentá rios em uma folha de estilo usando os caracteres / * para
iniciar o comentá rio e os caracteres * / para encerrar o comentá rio. Os comentá rios
também podem abranger vá rias linhas, conforme mostrado no exemplo a seguir.
/ * Este é o estilo
para o elemento corporal * /
corpo {
cor de fundo: branco; / * O valor rgb é #ffffff * /
cor: cinza; / * Esta é a cor da fonte * /
Liçã o 1: Apresentando CSS3 CAPÍTULO 4
139
Criação de um estilo embutido
Todos os elementos têm um estilo denominado de atributo global que pode ser usado para
fornecer um estilo embutido .
Como um estilo embutido é definido no elemento ao qual deseja adicionar estilo, você nã o
Os termos precisam de um seletor; você só precisa especificar o bloco de declaraçã o . A
seguir está um exemplo de um estilo embutido no elemento < body > que define a cor do
plano de fundo como branco e a cor da fonte como cinza.
<body style = 'cor de fundo: branco; cor: cinza; '>
</body>
Neste exemplo, você nã o precisa de uma folha de estilo externa porque definiu o estilo

no elemento < body > real . Você deve tentar evitar essa técnica; ele viola o objetivo
principal de separaçã o entre estrutura e apresentaçã o e nã o cria qualquer capacidade de
reutilizaçã o porque você precisará copiar esse estilo para cada documento HTML que
adicionar ao seu aplicativo.
Uma vantagem de usar um estilo embutido é que ele sempre substitui os estilos definidos
em outro local, porque os estilos embutidos sã o específicos ao elemento no qual o estilo
embutido está definido.
Essa especificidade pode resolver problemas isolados quando um estilo é aplicado

globalmente em uma folha de estilo externa, mas um elemento precisa ser estilizado de
maneira diferente. Mesmo assim, é preferível manter a separaçã o de estrutura e
apresentaçã o, portanto, você deve evitar essa abordagem.
Criação de um estilo incorporado
Em vez de criar estilos embutidos usando o atributo de estilo global, você pode usar
o elemento < style > para criar uma folha de estilo incorporada em seu documento
HTML. Você deve usar CSS
seletores para atribuir as definiçõ es de estilo aos elementos na pá gina. A seguir está um

exemplo de uma folha de estilo incorporada com uma regra de estilo que localiza
o elemento < body > e define a cor do plano de fundo como branco e a cor da fonte como
cinza.
<! DOCTYPE html>
<html xmlns = 'http: //www.w3.o rg / 1999 / xhtml'>
<head>
<title> </title>
<style>
corpo {

cor: cinza;
</style>
</head>
<body>
</body>
</html>
Observe que o estilo incorporado está localizado

no elemento < head >. No elemento < style >, você pode adicionar quantas regras de estilo
forem necessá rias. Como regra, você nã o deve usar essa técnica, no entanto. Embora essa
técnica separe a estrutura do corpo do HTML
documento do estilo, ele nã o fornece separaçã o de arquivos. Ele fornece a reutilizaçã o

dentro dos arquivos, 140 CAPÍTULO 4 Introduçã o ao CSS3
mas nã o promove a reutilizaçã o em documentos HTML. Você pode usar essa abordagem

quando quiser ter um ú nico documento HTML padrã o que contenha tudo o que é
necessá rio para renderizar.
Criação de uma folha de estilo externa
Em vez de criar os mesmos estilos incorporados em todos os documentos HTML, a melhor

abordagem é criar um arquivo de folha de estilo externo que você possa vincular a todas as
suas pá ginas. Você pode usar o elemento < link >, conforme mostrado no exemplo a seguir.
<! DOCTYPE html>
<html xmlns = 'http: //www.w3.org/1999/xhtml'>
<head>
<title> </title>
<link rel = 'stylesheet' type = 'text / css' href = 'Content / default.css' />
</head>
<body>

</body>
</html>
Neste exemplo, o elemento < link > contém o atributo rel , que especifica o relacionamento

entre o documento HTML atual e o arquivo externo como uma folha de
estilo. O atributo type especifica o tipo MIME do arquivo externo como uma folha de estilo
em cascata baseada em texto. O atributo href especifica a localizaçã o relativa do arquivo
CSS externo, que é o padrã o. arquivo css localizado na pasta Conten t. Se você quiser uma
regra de estilo que localize o elemento < body > e defina a cor do plano de fundo como
branco e a cor da fonte como cinza, abra o arquivo default.css e adicione o seguinte.
corpo {
cor: cinza;
Um arquivo de estilo pode ter quantas regras de estilo você precisar. Usar uma folha de
estilo externa é considerada a melhor maneira de implementar seus estilos. Você também
pode vincular muitas folhas de estilo externas a um documento HTML. Por exemplo, sua
empresa pode criar uma folha de estilo corporativa que espera ser usada em todos os sites
expostos ao pú blico. Além de usar a folha de estilo corporativa, você também pode criar sua
pró pria folha de estilo para atender à s necessidades específicas nas quais seu
departamento está trabalhando. Em suas pá ginas da web, você pode adicionar
um elemento < link > para cada folha de estilo.
Usando mídia para especificar o dispositivo de destino
O elemento < link > também possui um atributo de mídia que pode especificar o dispositivo

de destino. Usando o atributo media, você pode criar um arquivo CSS para cada tipo de
dispositivo e ligar todos os arquivos CSS em seus documentos HTML. Quando o documento
HTML é renderizado, o navegador determina o tipo de mídia e usa o arquivo CSS
apropriado. O navegador pode selecionar apenas um tipo de mídia para a Liçã o 1:
Introduçã o ao CSS3 CAPÍTULO 4
141
o rende ring de um documento HTML. A seguir está uma lista dos tipos de mídia
disponíveis para uso.
■■ todas as renderizaçõ es para todos os dispositivos
■■ braille se transforma em dispositivos de feedback tá til em braille
■■ renderizaçõ es em relevo para impressoras braille paginadas
■■ portátil Processa de mã o dispositivos portá teis que y típicos têm Smal, telas de baixa
resoluçã o e de largura de banda limitada
■■ imprimir Processa material paginado e documentos visualizados na tela no modo de

visualizaçã o de impressã o
■■ a tela é convertida em telas coloridas de computador
■■ discurso Processa de sintetizadores de voz
■■ tty processa a mídia, usando uma grade de caracteres de pitch fixo, como teletipos,
terminais e dispositivos portá teis com recursos de exibiçã o limitados
■■ tv Renderiza para dispositivos do tipo televisã o que normalmente têm cores de baixa
resoluçã o ou telas com capacidade limitada de rolar e ter som
A seguir está um exemplo de um documento HTML que contém elementos < link > para

estilos de tela e estilos de impressã o.
<! DOCTYPE html>
<head>
<title> </title>
<link rel = 'stylesheet' type = 'text / css' href = 'Content / screen.css' media =
'screen' />
<link rel = 'stylesheet' type = 'text / css' href = 'Content / printer.css' media =
'print' />
</head>
<body>

</body>
</html>
Você pode especificar um arquivo CSS aplicá vel a vá rios tipos de dispositivos, separando
cada tipo de dispositivo entre aspas por vírgula.
■■ Você deseja fornecer um arquivo de folha de estilo separado para estilos que
serão usados quando uma página da web for renderizada para a
impressora. Qual configuração de atributo de mídia deve ser definida com
o elemento < link >?
■■ media = 'imprimir'
Especificando a codificação de caracteres da folha de estilo Para especificar a

codificaçã o de caracteres do texto da folha de estilo, use a regra @charset na parte superior
da folha de estilo. Para ser compatível com todos os navegadores, certifique-se de colocá -lo
na primeira linha do seu arquivo CSS. A seguir está um exemplo de arquivo CSS que define
o conjunto de caracteres como UTF-8, que é o conjunto de caracteres mais comum
que pode ser usado com caracteres Unicode.
@charset 'UTF-8';
corpo {
cor: cinza;
Observe que, se o seu documento HTML tiver um elemento < meta > que descreve o

conjunto de caracteres do documento HTML, essa configuraçã o substitui a configuraçã o
@charset no arquivo CSS. A seguir está um exemplo de uso do elemento < meta > em um
documento HTML.
<head>
<title> </title>
<meta http-equiv = 'Content-Type' content = 'text / html; charset = UTF-8'>
<link rel = 'stylesheet' type = 'text / css' href = 'Content / default.css' />
</head>
<body>
</body>
</html>
Se todos os seus documentos HTML especificam o elemento < meta > com a configuraçã o

@charset, você nã o precisa da regra @charset no arquivo CSS. Se o arquivo CSS for
compartilhado e você quiser garantir que o conjunto de caracteres da folha de estilo esteja
correto, você deve especificar a regra @charset.
Folhas de estilo importadas de outras folhas de estilo
Conforme sua folha de estilo cresce, você vai querer dividi-la em arquivos menores e mais
gerenciá veis. O
A regra @import permite importar um arquivo CSS para a folha de estilo atual. Você pode
especificar quantas regras @import forem necessá rias, mas as regras @import devem estar
no topo de sua folha de estilo, antes de qualquer outro conteú do, exceto a regra
@charset. Se você tiver um comentá rio acima das regras do @import, elas nã o funcionarã o
corretamente.
A seguir está um exemplo de criaçã o de um arquivo de folha de estilo principal que

combina vá rios outros arquivos de folha de estilo .
@charset 'UTF-8';
@import url ('/ Content / header.css');
@import url ('/ Content / menu.css');
@import url ('/ Content / sidebar.css');
@import url ('/ Content / mainContent.css');
@import url ('/ Content / footer.css');
corpo {

cor: cinza;
Liçã o 1: Apresentando CSS3 CAPÍTULO 4
143
Você ainda pode ter conteú do no arquivo CSS, conforme mostrado no exemplo, mas deve
seguir os
regras @import. Você também pode especificar o tipo de mídia para cada regra @import,
conforme mostrado no exemplo a seguir que especifica os tipos de tela e impressã o.
@charset 'UTF-8 ';
@import url ('/ Content / header.css'); tela
@import url ('/ Content / menu.css'); tela
@import url ('/ Content / sidebar.css'); tela
@import url ('/ Content / mainContent.css');
@import url ('/ Content / footer.css'); imprimir
corpo {
co lor: cinza;
Observe que a regra @import para o arquivo mainContent.css nã o contém o tipo de mídia,
o que significa que o tipo de mídia padrã o de todos é aplicá vel e esse arquivo CSS será
usado para a tela e a impressora.
Usando a regra @ font-face para importar fontes
Você pode querer usar uma fonte específica, mas sabe que muitos usuá rios nã o terã o essa
fonte em seus computadores. Para resolver esse problema, você pode fornecer um link
para a fonte para que ela possa ser baixada e usada em sua folha de estilo. A seguir está um
exemplo de especificaçã o do
regra @ font-face para definir a fonte myFont, que será carregada de um arquivo no site
atual, Fancy_Light.ttf ou Fancy_Light.eot.
@Tipo de letra {
família da fonte: myFont;
src: url ('Fancy_Light.ttf'),
url ('Fancy_Light.eot'); / * IE9 * /
A partir do Internet Explorer 9, foi adicionado suporte apenas para arquivos Embedded
Open Type (.eot), que a Microsoft desenvolveu para uso na web. Esses arquivos de fonte
podem ser criados a partir de arquivos de fonte TrueType existentes usando a ferramenta
Microsoft Web Embedding Fonts (W EFT). Firefox, Chrome, Safari e Opera suportam
arquivos True Type Files ( .ttf ), entã o você deve especificar os dois tipos de arquivo para
serem compatíveis com a maioria dos navegadores.
LICENCIAMENTO DE FONTE DE NOTA
As fontes são propriedade intelectual, assim como software, música e

vídeo. Certifique-se de ter a licença adequada para usar qualquer fonte com a regra
@ font-face.
Resumo da lição
■■ Uma regra de estilo, ou estilo, é composta de duas partes: o seletor e o bloco de

declaração.
■■ O seletor localiza os elementos no documento HTML a serem estilizados.
■■ O bloco de declaração contém as instruçõ es de formataçã o (declaraçõ es).
■■ Os estilos podem ser embutidos, incorporados ou externos.
■■ Para manter a separaçã o entre estrutura e apresentaçã o, use folhas de estilo externas.
■■ Use o atributo de mídia do elemento < link > para especificar o dispositivo de destino

para uma folha de estilo.
Revisão da aula
1. Você deseja adicionar um comentá rio à sua folha de estilo que diz "temporá rio". Qual é a
linha apropriada para adicionar ao arquivo CSS?
A. // temporá rio
B. --temporá ria
C. / * temporá rio * /
D. rem temporá rio
2. Você deseja manter a separaçã o entre estrutura e apresentaçã o. Como você cria suas
regras de estilo?
A. Use estilos embutidos.
B. Use estilos incorporados.
C. Use folhas de estilo externas.
D. No documento HTML, especifique @import para carregar as folhas de estilo.
3. Você deseja que a folha de estilo printer.css se destine à s impressoras. Como

você configuraria o link da folha de estilo?
A. <link rel = 'printer' type = 'text / css' href = 'Content / printer.css' /> B. <link rel =
'stylesheet' type = 'text / css' href = 'Conteú do / impressora. css 'media =' imprimir
'/> C. <link rel =' stylesheet 'type =' text / css 'href =' Content / printer.css '/> D. <link rel ='
stylesheet 'type =' text / css 'href =' Content / printer.css 'target =' print '/> Lição 2:
Noções básicas sobre seletores, especificidade e
cascateando
Esta liçã o cobre as partes mais importantes do CSS, começando com os seletores, que
conectam a regra de estilo ao seu HTML. Esta liçã o discute algumas das maneiras pelas
quais você pode acabar com vá rias regras de estilo para o mesmo HTML e como determinar
qual seletor é mais específico.
Finalmente, esta liçã o discute o significado e o valor da difusã o.
Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e cascateamento CAPÍTULO 4

145
Definindo seletores
Ao definir um seletor, você pode criar seletores de elemento, seletores de id e seletores de

classe. Esta seçã o examina esses tipos de seletores comuns e muitas das variaçõ es de
seletores comuns.
Criação de um seletor de tipo de elemento
Um seletor de tipo de elemento é baseado no nome da tag. No exemplo anterior, o nome da

tag (corpo) é o seletor. Existe apenas um elemento < body > em um documento HTML, mas
Key
Termos: o que aconteceria se o seletor fosse definido como botã o, conforme mostrado no
exemplo a seguir?
botã o {
cor: cinza;
Se o seu documento HTML contiver 50 botõ es, o estilo de todos os 50 botõ es será
definido. Isso é desejá vel em alguns cená rios, mas em outros, você pode querer definir o
estilo em um ú nico botã o ou em um subconjunto de botõ es.
Criação de um seletor de id
Um seletor de id é baseado no id do elemento. Para definir o estilo em um ú nico botã o, você

pode atribuir um id ao botã o e, em seguida, especificar o id como o seletor, prefixado com a
chave hash (#)
Símbolo de termos. O exemplo a seguir define o estilo de um elemento cujo id é btnSave.
#btnSave {
cor: cinza;
Neste exemplo, nã o importa qual tipo de elemento está sendo acessado; tudo o que importa
é que o id seja btnSave. Como o id deve ser ú nico no documento HTML, o uso dessa
abordagem para definir um estilo limita a capacidade de reutilizaçã o em uma pá gina, mas
entre as pá ginas da web, isso define o estilo de qualquer elemento cujo id é btnSave.
Criação de um seletor de classe
Um seletor de classe é um estilo com um nome de classe de sua escolha, prefixado com
o símbolo de ponto (.).
Isso também é chamado de estilo nomeado . O nome da classe pode ser atribuído a qualquer
elemento através da chave
Atributo de classe de termos. No exemplo a seguir, um estilo é criado com o nome de classe
myStyle.
.meu estilo {

cor: cinza;
Este estilo nã o se aplica a nenhum elemento até que você especifique o nome da classe
usando o atributo class, conforme mostrado no exemplo a seguir.
<! DOCTYPE html>
<head>
<title> </title>
<link rel = 'stylesheet' type = 'te xt / css' href = 'Content / default.css' />
</head>
<body>
<input id = 'txtName' name = 'txtName' type = 'text' class = 'myStyle' />
<button id = 'btnOk' class = 'myStyle'> Ok </button>
<button id = 'btnSave'> Salvar </button>
<button id = 'btnCancel' class = 'myStyle'> Cance l </button>
</body>
</html>
Neste exemplo, o atributo class especifica o estilo myStyle na caixa de texto e dois dos
botõ es. Os estilos nomeados promovem a reutilizaçã o porque podem ser usados em
qualquer elemento, conforme necessá rio.
Usando o seletor universal
Se você deseja aplicar um estilo a cada elemento, pode usar o símbolo de asterisco (*). O
exemplo a seguir aplica o estilo a todos os elementos do documento HTML.
*{
cor: cinza;
Você deve evitar usar o seletor universal por causa do custo de desempenho.
Usando seletores descendentes
Você pode querer alterar o estilo dos elementos apenas se os elementos forem
descendentes de outro elemento. Por exemplo, você pode querer remover o und erline dos
hiperlinks se eles forem apresentados em um item da lista. Isso pode ser feito especificando
uma cadeia de seletores , que é um grupo de seletores que especificam um caminho para os
elementos de seu interesse. A chave da corrente seletora
Os termos especificam um elemento ancestral, seguido por um espaço, e entã o especificam

o elemento descendente, conforme mostrado no exemplo a seguir.
li a {
decoraçã o de texto: nenhum;
Este exemplo remove o sublinhado de cada hiperlink descendente de um item da lista,

independentemente de o hiperlink ser filho, neto ou descendente distante. Você pode
especificar uma cadeia de seletores com muitos níveis descendentes para fornecer um
caminho para os elementos que deseja estilizar. O seguinte demonstra vá rios níveis
descendentes; o sublinhado é Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e
cascateamento CAPÍTULO 4
147
removido de um hiperlink se tiver um ancestral que é um item da lista , o item da lista
possui um ancestral que é uma lista ordenada e a lista ordenada tem um ancestral que é
uma divisã o.
div ol li a {
Em grandes documentos HTML, o uso de seletores descendentes pode causar problemas de

desempenho devido à quantidade de pesquisa necessá ria. Tente implementar um seletor
que seja mais específico, como o seletor filho que será discutido a seguir.
Usando seletores filhos
Você pode querer alterar o estilo dos elementos apenas se os elementos forem filhos
diretos de outro elemento. Por exemplo, você pode querer remover o sublinhado dos
hiperlinks se eles forem filhos de um item da lista. Você pode fazer isso especificando um
elemento pai, seguido por um símbolo de maior que (>) e, em seguida, especificando o
elemento filho, conforme mostrado no exemplo a seguir.
li> a {
Este exemplo remove o sublinhado de hiperlinks filhos de um item da lista, mas nã o

remove o sublinhado de netos ou descendentes distantes. Você pode especificar muitos
níveis filho para fornecer um caminho para o elemento que deseja estilizar. O seguinte
demonstra vá rios níveis filho; o sublinhado é removido de um hiperlink se tiver um pai que
é um item de lista, o item de lista tem um pai que é uma lista ordenada e a lista ordenada
tem um pai que é uma divisã o.
div> ol> li> a {
Usando seletores de pseudo-classe e pseudo-elemento

Os estilos sã o geralmente anexados a um elemento com base na localizaçã o do elemento na
á rvore do modelo de objeto de documento (DOM). Embora isso normalmente funcione
bem, à s vezes você deseja aplicar um estilo a algo mais granular do que um elemento. Como
você atribui um estilo à primeira linha de um pará grafo? Como você atribui um estilo a um
hiperlink que foi visitado?
Para acessar informaçõ es que estã o fora da á rvore DOM ou difíceis de acessar no DOM
á rvore, você pode usar pseudo classes e pseudo elementos.
As pseudo classes classificam os elementos com base em algo diferente do nome, atributos

ou conteú do e, normalmente, algo que nã o pode ser deduzido da á rvore D OM. Exceçõ es à
chave
Os termos da regra sã o: primeiro filho, que pode ser deduzido da á rvore DOM, e: lang (),
que à s vezes pode ser deduzido da á rvore DOM. Você pode usar as pseudo classes em
qualquer lugar da sua cadeia de seletores para ajudá -lo a localizar os elementos quando o
estado identificado for verdadeiro. Você também pode usar 148 CAPÍTULO 4 Primeiros
passos com CSS3
pseudo classes no final da cadeia de seletores para definir o estilo do elemento quando o
estado identificado for verdadeiro. A seguir está uma lista de pseudo classes.
■■ : link Indica um link nã o visitado, onde a: link seleciona todos os links nã o visitados.
■■ : visitado Denota os links visitados onde a: visitado seleciona todos os links visitados.
■■ : ativo Indica um link ativo quando ativo significa que o botã o do mouse é pressionado e
a: ativo seleciona todos os links ativos.
■■ : hover Indica um link sobre o qual o cursor do mouse está quando um: hover seleciona
o link sobre o qual o mouse está .
■■ : focus Denota um elemento que tem foco quando a entrada: focus seleciona a entrada
que tem foco.
■■ : marcado indica um botã o de opçã o ou elemento de caixa de seleçã o cujo atributo

marcado está definido, onde input [type = 'checkbox']: marcado seleciona todas as caixas
de seleçã o que sã o selecionadas.
■■ : lang (idioma) Indica um elemento cujo atributo lang é definido como idioma quando
p: lang (en) seleciona todos os pará grafos e o atributo lang começa com en.
■■ : not Fornece negaçã o quando div: not (“# mainContainer”) seleciona todos
os elementos < div > exceto o elemento < div > cujo id é mainContainer.
■■ : enésimo-criança (fórmula) Selecciona o n th filho de um progenitor se a fó rmula é
um valor inteiro. Por exemplo, li: nthchild (3) seleciona o terceiro item da lista. Observe
que o nú mero é baseado em um, nã o baseado em zero. Esta pseudo classe é poderosa.
Você pode fornecer uma fó rmula baseada em um + b quando um é contagem de ciclo e n é
uma variá vel de contador, e b representa o elemento dentro do ciclo que você deseja
selecionar. Por exemplo, li: nthchild (10n + 3) seleciona o terceiro elemento de cada
10 elementos, portanto, se um
O elemento < ul > contém 45 elementos < li >, os elementos 3, 13, 23, 33 e 43 serã o

selecionados.
Você também pode usar as palavras-chave ímpar e par para selecionar elementos filhos

ímpares e pares.
Por exemplo, li: nth-child (ímpar) seleciona os elementos 1, 3, 5, 7 e assim por diante.
■■ : enésimo-última-criança (n) Selecciona o n th filho de um progenitor se a fó rmula é

um valor inteiro.
Por exemplo, li: nth-last-child (3) seleciona o terceiro item da lista no final da lista. Observe
que o nú mero é baseado em um, nã o baseado em zero.
■■ : only-chi ld Seleciona elementos que sã o os ú nicos filhos do pai.
■■ : only-of-type Seleciona elementos que sã o os ú nicos filhos do pai e têm o tipo

especificado.
■■ : primeiro do tipo Seleciona o primeiro elemento do tipo especificado.
Pseudoelementos sã o abstraçõ es da á rvore de documentos que fornecem acesso a

informaçõ es que nã o estã o diretamente disponíveis na á rvore DOM. Você nã o pode agrupar
pseudo elementos no mesmo seletor como pode, por exemplo, pseudo classes, nas quais
você pode combinar a: hover e a: active como a: hover: active. Você nã o pode usar
pseudoelementos em estilos embutidos. Você nã o pode usar pseudoelementos na cadeia de
seleçã o para ajudá -lo a encontrar outros elementos, como descendentes.
149
Você pode usar pseudoelementos apenas no final da cadeia de seletores para definir o

estilo do pseudoelemento. A seguir está uma lista de pseudoelementos.
■■ :: primeira linha Seleciona a primeira linha onde p: primeira linha seleciona a primeira
linha de cada pará grafo. Você pode aplicar um estilo diferente à primeira linha de um
pará grafo.
■■ :: primeira letra Seleciona a primeira letra, onde p: primeira letra seleciona a primeira
letra de cada pará grafo. Você pode aplicar um estilo diferente à primeira letra de um
pará grafo. Esta opçã o é ú til quando você deseja criar uma primeira letra grande.
■■ :: before Insere o conteú do textual gerado dentro do elemento onde p: before {content:
“Nota:“; } insere “Nota:“ em cada pará grafo diretamente antes do conteú do existente. Além
de adicionar o conteú do textual , você pode fornecer um estilo para o conteú do quando p:
antes de {conteú do: “Nota:“; color: red;} define a cor de “Nota:”
para o vermelho.
■■ :: after Insere o conteú do textual gerado dentro de cada elemento quando p: apó s
{content:
"Feito!"; } insere “Pronto!” em cada pará grafo diretamente apó s o conteú do existente. Além

de adicionar o conteú do textual, você pode fornecer um estilo para o conteú do textual
quando p: apó s {content: “Pronto!”; color: red;} define a cor de “Pronto!” para o vermelho.
NOTE UM OU DOIS COLONS ANTES DOS ELEMENTOS PSEUDO
O CSS3 recomenda um dois pontos (:) antes das pseudo classes e dois dois pontos (:)
antes dos pseudo elementos como uma forma de saber a diferença entre os dois. O
CSS3 também permite que o uso de um vírgula em regras existentes seja compatível
com os navegadores existentes, então a maioria das pessoas continuará a usar um
vírgula para ser compatível com os navegadores mais antigos. Todos os novos
pseudoelementos devem ter dois pontos.
Seletores de agrupamento
Você pode agrupar seletores quando for aplicar o mesmo estilo, separando cada seletor
com uma vírgula. Considere o exemplo a seguir, no qual as duas regras de estilo têm os
mesmos blocos de declaraçã o.
botã o {
cor: cinza;
p{
cor: cinza;
Nesse cená rio, você pode condensar as duas regras de estilo em uma ú nica regra de estilo,
conforme mostrado no exemplo a seguir, que aplica o mesmo estilo a todos os botõ es e
elementos de pará grafo.
botã o, p {
150 CAPÍTULO 4 Primeiros passos com CSS3
cor: cinza;
Usando seletores irmãos adjacentes subsequentes
Um seletor adjacente pode ser usado para selecionar um elemento se for precedido por um
elemento específico.
O sinal de mais (+) indica um seletor adjacente. Por exemplo, div + h1 seleciona a < h1 >
ele-Key
Termos que seguem imediatamente um elemento < div >.
No exemplo a seguir, div + h1 definirá o título para uma cor de fundo amarela se o título for
precedido por um elemento < div > como o irmã o anterior.
div + h1 {
cor de fundo: amarelo;
}
Considere o seguinte documento HTML, que tem dois elementos < div > e vá rios elementos
< h1 >.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "default.css" rel = "stylesheet" />
</head>
<body>
<h1> O filho h1 antes do primeiro div
</h1>
<div>
algum conteú do infantil
<h1> Este é o primeiro filho h1
</h1>
<div> outro div aqui </div>
algum texto apó s o div
<h1> Este é o segundo filho h1
</h1>
<h1> Este é o terceiro filho h1
</h1>
</div>
algum conteú do seguinte
<span> aqui está um intervalo </span>
<h1> Este é o primeiro h1 que segue o pará grafo

</h1>
<h1> Este é o segundo h1 que segue o pará grafo
</h1>
<h1> Este é o terceiro h1 que segue o pará grafo
</h1>
</body>
</html>
O primeiro elemento < div > tem elementos filhos < h1 >, mas eles sã o filhos, nã o elementos

adjacentes. O elemento adjacente que segue o primeiro elemento < div > é o elemento
< span >, o que significa que o primeiro elemento < div > nã o desempenha um papel na
alteraçã o da Liçã o 2 de um elemento n < h1 >: Noçõ es bá sicas sobre seletores,
especificidade e cascateamento CAPÍTULO 4
151
fundo para amarelo. O segundo elemento < div > é seguido por algum conteú do textual, mas
o primeiro elemento que segue o segundo elemento < div > é um elemento < h1 > , de modo
que o elemento < h1 > terá um fundo amarelo. O resultado é mostrado na Figura 4-1.
FIGURA 4-1 Apenas uma cor de fundo do elemento < h1 > definida para amarelo usando o
seletor irmão subsequente
O seletor de irmãos subsequente é semelhante ao seletor de irmã os adjace nt, mas sua busca
pelo irmã o correspondente nã o para na primeira correspondência. O caractere til (~)
denota o seletor irmã o. Por exemplo, div ~ h1 seleciona todos os elementos < h1 > que
seguem um elemento < div >.
No exemplo a seguir, div ~ h1 define o título com uma cor de fundo amarela se o título for
precedido por um elemento < div > como um irmã o anterior.
div ~ h1 {
Usando o documento HTML do exemplo do seletor irmã o adjacente , o

primeiro elemento < div > possui elementos < h1 > filhos, mas sã o filhos, nã o elementos
adjacentes. O elemento adjacente que segue o primeiro elemento < div > é o elemento
< span >, mas os elementos irmã os < h1 > seguem, e seus planos de fundo sã o
alterados para amarelo. O segundo elemento < div > é seguido por algum conteú do textual,
e dois elementos < h1 > seguem o segundo elemento < div >; eles terã o um fundo
amarelo. Observe que com os dois elementos < div >, há um elemento < h1 > antes do
elemento < div > e sua cor de fundo nã o está definida para amarelo porque, embora sejam
irmã os, eles sã o irmã os anteriores. O resultado é mostrado na Figura 4-2.

FIGURA 4-2 Cor de fundo de todos os elementos < h1 > subsequentes definida para o
amarelo usando um seletor de atributo
Um seletor de atributo seleciona elementos com base na existência do atributo

especificado. Por exemplo, um [título] seleciona todos os hiperlinks cujo atributo de título é
definido.
O exemplo a seguir demonstra o uso de um seletor de atributo para localizar todos os

hiperlinks cujo atributo href está definido. Este exemplo também demonstra a combinaçã o
do seletor de atributo com a pseudo classe: hover e o pseudo elemento: after para exibir o
href entre parênteses quando o link passa para o vermelho. Observe o uso da funçã o attr ()
para recuperar o valor de um atributo.
a [href]: pairar: apó s {
conteú do: "(" attr (href) ")";
Considere o documento HTML fol devido que tem é de três < uma > elementos, dois dos
quais d efine o atributo href.
<! DOCTYPE html>

<head>
<title> </title>
</head>
<body>
<a href='http://contoso.com'> Link 1 </a> <br />
<a> Link 2 </a> <br />
153
<a href='http://microsoft.com'> Link 3 </a> <br />
</body>
</html>
Os primeiros e terceiros < um > elementos definir o atributo href, o que significa que paira
sobre qualquer uma destas causas da hiperligaçã o para ser exibido. O resultado é mostrado
na Figura 4-3.
FIGURA 4-3 Passando o mouse sobre um link cujo atributo href está definido, fazendo
com que o valor href seja exibido usando um seletor de valor de atributo
Um seletor de valor de atributo seleciona todos os elementos onde o atributo especificado

tem o valor especificado. Por exemplo, um [href = 'http: //contoso.com'] seleciona todos os
hiperlinks onde o atributo href é definido como http://contoso.com.
O exemplo a seguir demonstra o uso do seletor de valor de atributo para localizar todos os
hiperlinks que têm o atributo href definido como http://contoso.com. Este exemplo
também demonstra a combinaçã o do seletor de atributos com a pseudo classe: hover.
a [href = 'http: //contoso.com']: hover {
Considere o documento HTML fol devido, que tem três < uma > elementos, um dos quais
tem o atributo href conjunto para http: // cont oso.com.
<! DOCTYPE html>
<head>
<title> </title>
</head>

<body>
<a> Li nk 2 </a> <br />
<a href='http://www.contoso.com'> Link 3 </a> <br />
</body>
</html>
A primeira < um > elemento define o atributo href para http://contoso.com, de modo que
paira sobre este link faz com que o link a ser exibido com um fundo ow yel, como mostrado
na Figura 4-4.
Os outros hiperlinks nã o sã o afetados.
FIGURA 4-4 Passar o mouse sobre um link cujo atributo href está definido como

http://contoso.com faz com que o valor href seja exibido
Um problema potencial com essa abordagem é que o valor deve corresponder exatamente
para funcionar. Para resolver esse problema, use o seletor de valor contém o atributo.
Usando o atributo contain s seletor de valor
O atributo contém seletor de valor seleciona todos os elementos que contêm o valor de

atributo especificado dentro do atributo especificado. É semelhante ao seletor de valor de
atributo, mas é mais flexível porque você nã o precisa fornecer uma correspondência
exata. Para especificar se o atributo contém o seletor de valor, adicione um asterisco (*)
sufixo ao nome do atributo.
O exemplo a seguir demonstra o uso do seletor de valor contém o atributo para localizar
todos os hiperlinks que têm um valor de atributo href que contém contoso.com. Este
exemplo também demonstra a combinaçã o do seletor de atributo com a pseudo classe:
hover.
a [href * = 'contoso.com']: passe o mouse {
Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e cascata CAPÍTULO 4
155
Considere o documento HTML fol devido, que tem três < uma > elementos, um dos quais
define o atributo href para http://contoso.com.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
<a href='http://www.contoso.com/default.html'> Link 3 </a> <br />
</body>
</html>
O primeiro e o terceiro hiperlinks têm atributos href que contêm contoso.com, portanto,
passar o mouse sobre esses hiperlinks faz com que o hiperlink seja exibido com um fundo
amarelo.
O uso do valor do atributo começa com o seletor
Um valor de atributo começa com se lector seleciona todos os elementos cujo valor de

atributos especificado começa com o valor especificado. Para especificar que o valor do
atributo começa com seletor, adicione um sufixo circunflexo (^) ao nome do atributo.
O exemplo a seguir demonstra o uso do atributo valor começa com seletor para localizar
todos os hiperlinks que fazem referência a sites externos procurando por valores href que
começam com http. Isso inclui automaticamente hrefs que começam com https.
a [href ^ = 'http']: passar o mouse {
}
Considere o fo documento HTML l devido que tem três < uma > elementos, um dos quais
define o atributo href para http://microsoft.com.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
<a href='sales/default.html'> Link 1 </a> <br />
<a href='default.html'> Link 3 </a> <br />
</body>
</html>
O primeiro e o terceiro hiperlinks têm atributos href que nã o começam com http, portanto,
passar o mouse sobre esses hiperlinks nã o faz com que o hiperlink seja exibido com um
fundo amarelo. Passar o mouse sobre o segundo hiperlink faz com que ele seja exibido com
um fundo amarelo.
Usando o valor de atributo termina com seletor Um valor de atributo termina com

seletor seleciona todos os elementos cujo valor de atributo especificado termina com o
valor especificado. Para especificar que o valor do atributo termina com seletor, adicione
um sufixo de sinal de dó lar ($) ao nome do atributo.
O exemplo a seguir demonstra o uso do valor do atributo termina com seletor para
localizar todos os hiperlinks que fazem referência a arquivos jpg.
a [href $ = 'jpg']: passe o mouse {
}
Considere o seguinte documento HTML que possui três elementos <a>, um dos quais define
o atributo href como http://microsoft.com.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
<a href='sales/default.html'> Link 1 </a> <br />
<a href='logo.jpg'> Link 2 </a> <br />
<a href='default.html'> Link 3 </a> <br />
</body>
</html>
O primeiro e o terceiro hiperlinks têm atributos href que nã o terminam em jpg, portanto,
passar o mouse sobre esses hiperlinks nã o faz com que o hiperlink seja exibido com um
fundo amarelo. Passar o mouse sobre o segundo hiperlink faz com que ele seja exibido com
um fundo amarelo.
Usando o atributo contém valor no seletor de lista
Um atributo contém valor no seletor de lista seleciona todos os elementos cujo atributo

especificado contém o valor especificado quando o atributo tem uma lista de valores
delimitada por espaço e há uma correspondência para um dos valores. Isso funciona bem
com atributos personalizados quando você deseja especificar uma lista de valores em um
atributo. Por exemplo, você pode ter um hiperlink com um atributo datalinktype que
contém uma lista de valores que descrevem o tipo de link,
como secure , externalLink , internalLInk , imageFile , zipFile . Quando o link é
renderizado para o navegador, ele inclui o atributo datalinktype com os valores
apropriados. Você deseja adicionar estilos diferentes ao hiperlink com base nesses valores,
como a seguir.
a [data-linktype ~ = 'externalLink'] {
a [data-linkty pe ~ = 'internalLink'] {
cor de fundo: limã o;
157
a [data-linktype ~ = 'imageFile']: apó s {
conteú do: '(img)';
a [data-linktype ~ = 'zipFile']: apó s {
conteú do: '(zip)';
}}
Considere o documento HTML fol devido que tem três < uma > elementos onde há uma
mistura de valores e os estilos adequados devem ser aplicadas com base no atributo
datalinktype.
<! DOCTYPE html>
< html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
<a href='http://contoso.com' data-linktype="externalLink zipFile"> Link 1 </a> <br />
<a href='default.html' data-linktype="in ternalLink zipFile"> Link 2 </a> <br />
<a href='http://microsoft.com/logo.jpg' data-linktype="externalLink imageFile"> Link 3

</a> <br />
</body>
</html>
O primeiro e o terceiro hiperlinks sã o links externos, portanto, eles têm uma cor de fundo
amarela.
O segundo hiperlink é um link interno, portanto, tem uma cor de fundo de limã o. O
primeiro e o segundo hiperlinks sã o links para arquivos zip, portanto, '(zip)' é anexado ao
conteú do. O terceiro hiperlink é um link para uma imagem, portanto, '(img)' é anexado ao
conteú do. O documento HTML renderizado é mostrado na Figura 4-5.
FIGURA 4-5 O documento HTML renderizado mostrando os diferentes estilos com base na
correspondência com um item no atributo datalinktype

Mesmo se você nã o definir nenhum estilo para seus documentos HTML, pelo menos uma
folha de estilo será usada para calcular o estilo efetivo para os elementos dentro do
documento. Cada navegador possui uma folha de estilo padrã o embutida, que é aplicada a
todos os documentos HTML antes que qualquer outra folha de estilo seja aplicada.
Você nã o pode acessar a folha de estilo do navegador diretamente e esteja ciente de que
pode haver diferenças entre os navegadores.
Estendendo estilos de navegador com estilos de usuário
Você pode estender os estilos do navegador adicionando uma folha de estilo definida pelo
usuá rio ao navegador.
Isso é feito de forma diferente com base no navegador. Para adicionar uma folha de estilo
definida pelo usuá rio no Internet Explorer, navegue até Ferramentas | Opçõ es da Internet
| Geral | Acessibilidade. A janela Acessibilidade é exibida, conforme mostrado na Figura 4-6.
FIGURA 4-6 A folha de estilo do usuá rio se definida para o arquivo myUser.css Os estilos
do usuá rio sã o aplicá veis apenas a esse navegador naquele computador, portanto, se você
iniciar um navegador diferente no mesmo computador, sua folha de estilo definida pelo
usuá rio nã o funcionará . Além disso, se você executar o mesmo navegador em um
computador diferente, sua folha de estilo definida pelo usuá rio nã o funcionará .
Quando você adiciona estilos a uma folha de estilo definida pelo usuá rio, os estilos típicos y
nã o funcionam porque os estilos definidos pelo usuá rio sã o lidos e, em seguida, os estilos
do documento HTML sã o lidos. Se o navegador tiver uma configuraçã o de regra de estilo da
folha de estilo definida pelo usuá rio e, em seguida , a folha de estilo do documento HTML lê
uma configuraçã o de regra de estilo diferente, o estilo definido pelo usuá rio é substituído
pela folha de estilo do documento HTML. No exemplo, o problema é que o usuá rio pode ter
dificuldade em ler o texto da pá gina da web e deseja aumentar o tamanho da tela em todas
as pá ginas da web.

159
Para resolver esse problema, na folha de estilo definida pelo usuá rio, você pode adicionar o
modificador “! Important” apó s o valor CSS para aumentar sua prioridade. O modificador “!
Importante” na folha de estilo definida pelo usuá rio substitui qualquer valor da folha de
estilo do documento HTML, mesmo se o modificador “! Important” for usado na folha de
estilo do documento HTML. Este é o uso mais apropriado do modificador “! Important”.
Embora você possa usar o modificador “! Important” com as folhas de estilo do seu

documento HTML, nã o é uma boa prá tica fazer isso. É equivalente a usar uma britadeira em
um prego de acabamento.
A seguir está um exemplo de um arquivo CSS definido pelo usuá rio que substitui a cor de
fundo e a cor do texto do elemento do corpo.
@charset 'UTF-8';
corpo {
cor de fundo: branco! importante;
cor: preto! importante;
Lembre-se de que as configuraçõ es da folha de estilo definidas pelo usuá rio têm uma
prioridade menor do que a
folhas de estilo do documento, exceto quando o modificador “! important” é usado na folha

de estilo definida pelo usuá rio. Nesse caso, o estilo definido pelo usuá rio tem a prioridade
mais alta.
É importante entender como os estilos sã o resolvidos pelo navegador quando as regras de

estilo entram em conflito.
A seguir está a ordem de precedência que o navegador usa para calcular o estilo efetivo de
um elemento.
1. Importante O navegador deve determinar se o modificador “! Important” foi usado. Isso

tem a prioridade mais alta, portanto, se o modificador “! Important” for encontrado, ele terá
precedência sobre a especificidade ou a ordem textual.
2. Especificidade O navegador determina qual regra é mais específica e, se o navegador
pode determinar qual regra é mais específica, nã o há necessidade de examinar a ordem
textual.
3. Ordem textual O navegador determina a ordem textual das regras de estilo em que a

ú ltima regra de estilo na ordem textual tem precedência sobre as regras de estilo
anteriores.
As regras de estilo podem ser definidas em vá rias folhas de estilo e é importante entender
essas folhas de estilo, especialmente sua relaçã o com a ordem textual. A lista a seguir
descreve a ordem de avaliaçã o das vá rias folhas de estilo.
1. Folha de estilo integrada do navegador
2. Declaraçõ es normais do usuá rio na folha de estilo do usuá rio
3. Declaraçõ es normais do autor na folha de estilo do autor 4. Declaraçõ es importantes do

autor na folha de estilo do autor 5. Declaraçõ es importantes do usuá rio na folha de estilo
do usuá rio 160 CAPÍTULO 4 Introduçã o ao CSS3
O autor da pá gina pode fornecer declaraçõ es de estilo normal que substituem os estilos
definidos pelo usuá rio, com base na ordem de avaliaçã o. O usuá rio pode ter a palavra final
substituindo as declaraçõ es do autor usando o modificador “! Important”. Esta é
provavelmente a melhor implementaçã o do modificador “! Important”.
■■ Qual é a ordem de precedência para calcular o estilo efetivo de um elemento?
■■ (1) Importante, (2) Especificidade, (3) Ordem Textual
Provavelmente, o aspecto mais confuso de determinar o estilo eficaz de um elemento é

determinar o vencedor de estilos conflitantes quando a especificidade é diferente entre
eles. A regra com o seletor mais específico prevalecerá , mas como você determina
qual regra é mais específica?
Para calcular a especificidade do seletor, comece registrando três valores, conhecidos

como a , b e c , como segue.
■■ a Registre o nú mero de atributos de id no seletor.
■■ b Registre a quantidade de seletores de classe, seletores de atributos e pseudo classes.
■■ c Registre a quantidade de nomes de elementos no seletor.
Embora as pseudo classes sejam contadas, os pseudo elementos nã o sã o contados no

cá lculo da especificidade. Além disso, se você usar a pseudo classe de negaçã o, os seletores
dentro dela serã o contados, mas a pseudo classe de negaçã o nã o será contada. Por ú ltimo, o
seletor universal (*) nunca é incluído nos cá lculos.
Depois de registrar os valores de a , b e c , concatene os três nú meros para formar um valor
de especificidade de forma que a tenha o valor mais alto, entã o b e c tenham o valor mais
baixo. A Figura 4-7 demonstra o cá lculo de vá rios seletores, desde o valor de especificidade
mais baixo até o valor de especificidade mais alto.
16 1
FIGURA 4-7 Exemplos de cá lculo de valor de especificidade, classificados do menor para o
maior valor Se você tiver regras de estilo conflitantes e calcular o valor de especificidade de
cada uma, se os valores forem iguais, qual regra de estilo é usada? A ordem textual se torna
o fator de desempate. A ú ltima das regras de estilo será o estilo efetivo.
Um elemento pode obter seu estilo de um elemento pai quando nenhum outro estilo
definido é mais específico, mas é importante entender que o elemento só herda um estilo
de um pai quando nenhum estilo é definido para a propriedade do elemento
potencial. Considere o cená rio no qual você deseja que todo o texto em seu documento
HTML seja dimensionado para extragrande. Em vez de definir um estilo para
os elementos < input >, outro estilo para os elementos < div > e assim por diante, você pode
apenas definir a fonte do elemento < body > conforme a seguir.
corpo {
tamanho da fonte: x-grande;

}
Neste exemplo, todos os elementos dentro do elemento < body > herdam o tamanho da

fonte, mas se for atribuído um tamanho de fonte a um elemento, o tamanho da fonte
atribuído substitui o tamanho herdado.
Usando o valor de herança
O exemplo anterior era bastante simples porque os elementos típicos têm suas
propriedades definidas para herdar por padrã o. O que você faria se tivesse um elemento
cuja cor de fundo está definida, mas deseja redefinir o elemento para herdar de seu
pai? Você pode atribuir o valor herdado à cor de fundo, conforme mostrado no exemplo a
seguir.
corpo {
tamanho da fonte: x-grande;
li: enésimo filho (par) {
tamanho da fonte: pequeno;
li: enésimo filho (4) {
tamanho da fonte: herdar;
Neste exemplo, o tamanho da fonte do elemento < body > é definido como extragrande e

todos os elementos filho podem herdar essa configuraçã o. A pró xima regra de estilo
seleciona elementos < li > de numeraçã o par e define o tamanho da fonte para pequeno. A
ú ltima regra de estilo redefine o tamanho da fonte de volta para herdar para o quarto filho
elemento < li >.
Resumo da lição
■■ Uma regra de estilo, ou estilo, é composta de duas partes: o seletor e o bloco de

declaração.
O seletor localiza os elementos no documento HTML que serã o estilizados. O bloco de

declaração contém as instruçõ es de formataçã o (declaraçõ es).
■■ Os estilos podem ser embutidos, incorporados ou externos.
■■ Para manter a separaçã o entre estrutura e apresentaçã o, use folhas de estilo externas.
■■ Use o atributo de mídia do elemento < link > para especificar o dispositivo de destino

para uma folha de estilo .
■■ As pseudo classes fornecem outra maneira de selecionar elementos. Pseudo-elementos

fornecem acesso a informaçõ es que nã o estã o disponíveis no DOM. Use dois pontos (:) para
denotar pseudoelementos.
■■ Use o modificador “! Important” com estilos definidos pelo usuá rio para substituir os
estilos definidos pelo autor.
■■ A precedência em cascata é feita por importâ ncia, especificidade e ordem textual.
■■ A ordem de avaliaçã o das folhas de estilo é a folha de estilo embutida no navegador, a

folha de estilo definida pelo usuá rio, a folha de estilo normal do autor, a folha de estilo
importante do autor e a folha de estilo importante do usuá rio.
■■ O cá lculo da especificidade de um seletor é baseado em três níveis de magnitude.
■■ Os estilos de elemento que nã o sã o atribuídos podem herdar seu estilo de um elemento

pai.
163
Revisão da aula
1. Você deseja definir o estilo da primeira letra de cada pará grafo em um elemento < div >
cujo id é readingPane. Qual seletor de estilo é mais apropriado?
A. #readingPane p : primeira letra
B. #readingPane: primeira letra
C. #readingPane p: primeiro filho
D. #readingPane: primeiro filho

2. A regra de folha de estilo a seguir é definida em Corporate.css.
div p.highlight {
tamanho da fonte: xx-grande;
Em Department.css, a seguinte regra de folha de estilo é definida.
div p {
cor de fundo: azul;
Seu documento HTML contém o seguinte.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "Corporate.css" rel = "stylesheet" />
<link href = "Department.css" rel = "stylesheet" />
</head>
<body>
<div id = "readingPane">
<p class = 'destaque'>
Aqui está um teste para ver qual é a cor de fundo de um pará grafo
será azul ou amarelo.
</p>
</div>
</body>
</html>
Qual será a cor de fundo renderizada do pará grafo?
A. Amarelo
B. Azul
C. Transparente
D. White
3. A regra de folha de estilo a seguir é definida em Corporate.css.
div p.highlight {
tamanho da fonte: xx-grande;
Em Department.css, a seguinte regra de folha de estilo é definida.
div p: primeiro do tipo. {
cor de fundo: azul;
Seu documento HTML contém o seguinte.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "Corporate.css" rel = "stylesheet" />
<link href = "Department.css" rel = "stylesheet" />
</head>
<body>
<div id = "readingPane">
<p class = 'destaque'>
Aqui está um teste para ver qual é a cor de fundo de um pará grafo
será azul ou amarelo.
</p>
</div>
</body>
</html>
Qual será a cor de fundo renderizada do pará grafo?
A. Amarelo
B. Azul
C. Transparente
D. White
Lição 3: Trabalhando com propriedades CSS
Agora que você sabe como usar seletores CSS, pode trabalhar com propriedades
CSS. Existem muitas propriedades CSS e esta liçã o discute as propriedades CSS bá sicas que
você precisa saber para fornecer um layout de pá gina.
As cores sã o explicadas em detalhes, seguidas por medidas e o modelo de caixa CSS.
Liçã o 3: Trabalhando com propriedades CSS CAPÍTULO 4
165
■■ Definir cores CSS.
■■ Implementar um layout usando o modelo de caixa CSS.
■■ Posicione os elementos < div >.
Com CSS, as cores podem ser especificadas de vá rias maneiras, como por nomes de cores,
valores de cores RGB e valores de cores ARGB. Você pode definir a transparência ou
opacidade.
Os valores RGB estã o disponíveis desde a versã o mais antiga do CSS. O valor RGB é um
campo de seis caracteres que representa um valor hexadecimal de dois caracteres para a
quantidade de vermelho, depois verde e azul, e é prefixado com o símbolo sustenido
(#). Um valor de 00 (dois zeros) é o valor mínimo e ff representa o valor má ximo para essa
cor. Isso representa 0–255 em decimal. A seguir estã o exemplos de valores RGB.
■■ preto # 000000
■■ branco #ffffff
■■ vermelho # ff0000
■■ verde # 008000
■■ limão # 00ff00
■■ azul # 0000ff
■■ amarelo # ffff00
■■ cinza # 808080
Um exemplo de como definir a cor de fundo de um documento HTML como amarelo é o

seguinte.
corpo {
cor de fundo: # ffff00;
ATALHO DE NOTA PARA DEFINIR O VALOR DAS CORES
Em vez de representar o valor RGB como #rrggbb, você pode representar o RGB
valor como #rgb. Se os códigos de dois caracteres para vermelho, verde e azul forem
iguais, você pode usar um único caractere para cada um para reduzir o valor de seis
caracteres a um valor de três caracteres. Por exemplo, amarelo é # ffff00 onde os
caracteres do componente vermelho são iguais, os caracteres do
componente verde são os mesmos e os caracteres do componente azul são os
mesmos.
Portanto, o amarelo pode ser representado como três caracteres er # ff0. Este é um

atalho e só pode ser usado para representar o valor como três caracteres. Quando o
navegador lê o valor da cor como três caracteres, ele expande cada caractere para
serem dois do mesmo caractere. A cor # 123 é igual a # 112233, não # 000123.
A maioria das cores pode ser representada usando esta combinaçã o de vermelho, verde e
azul, mas você nã o precisa se lembrar dos valores RGB se aproveitar a capacidade do CSS
de usar nomes de cores ao fazer atribuiçõ es de cores à s propriedades. A Tabela 4-1 contém
uma lista dos nomes das cores com seus valores RGB correspondentes.
TABELA 4-1 Nomes de cores com valores hexadecimais e decimais correspondentes Nome

da cor
Valor hexadecimal
Valor Decimal
aliceblue
# f0f8ff
240.248.255
antiquewhit e
# faebd7
250.235.215
á gua
# 00ffff
0,255,255
á gua-marinha
# 7fffd4
127.255.212
azul
# f0ffff
240.255.255
bege
# f5f5dc
245.245.220
bisque
# ffe4c4
255.228.196
Preto
# 000000
0,0,0
amêndoa
#ffebcd
255.235.205
azul
# 0000ff
0,0,255
blueviolet
# 8a2be2
138,43,226
Castanho
# a52a2a
165,42,42
Madeira robusta
# deb887
222.184.135
cadetblue
# 5f9ea0
95.158.160
chartreuse
# 7fff00
127.255,0
chocolate
# d2691e
210.105,30
coral
# ff7f50
255.127.80
azul centá urea
# 6495ed
100.149.237
seda de milho
# fff8dc
255.248.220
carmesim
# dc143c
220,20,60
ciano
# 00ffff
0,255,255
azul escuro
# 00008b
0,0,139
darkcyan
# 008b8b
0,139,139
Darkgoldenrod
# b8860b
184.134,11
cinza escuro
# a9a9a9
169.169.169
verde escuro
# 006400
0,100,0
cinza escuro
# a9a9a9
169.169.169
Darkkhaki
# bdb76b
189.183.107
167
Nome da Cor
Valor hexadecimal
Valor Decimal
darkmagenta
# 8b008b
139.0.139
verde-escuro
# 556b2f
85.107,47
laranja escuro
# ff8c00
255.140,0
darkorchid
# 9932cc
153.50.204
vermelho escuro
# 8b0000
139,0,0
Darksalmon
# e9967a
233.150.122
verde escuro
# 8fbc8f
143.188.143
darkslateblue
# 483d8b
72,61,139
Darkslategray
# 2f4f4f
47,79,79
Darkslategrey
# 2f4f4f
47,79,79
turquesa escura
# 00ced1
0,206,209
darkviolet
# 9400d3
148.0.211
Rosa escuro
# ff1493
255,20.147
deepskyblue
# 00bfff
0,191,255
escurecer
# 696969
105.105.105
Dimgrey
# 696969
105.105.105
Trapaceiro azul
# 1e90ff
30.144.255
tijolo refratá rio
# b22222
178,34,34
branco floral
# fffaf0
255.250.240
verde floresta
# 228b22
34.139,34
fú csia
# ff00ff
255.0.255
Ganha-Boro
#dcdcdc
220.220.220
fantasma branco
# f8f8ff
248.248.255
ouro
# ffd700
255.215,0
Goldenrod
# daa520
218.165,32
cinza
# 808080
128.128.128
verde
# 008000
0,128,0
verde amarelo
# adff2f
173.255,47
cinza
# 808080
128.128.128
melada
# f0fff0
240.255.240
Rosa quente
# ff69b4
255.105.180
índio
# cd5c5c
205,92,92
índigo
# 4b0082
75.0.130
Nome da Cor
Valor hexadecimal
Valor Decimal
marfim
# fffff0
255.255.240
cá qui
# f0e68c
240.230.140
lavanda
# e6e6fa
230.230.250
lavenderblush
# fff0f5
255.240.245
Lawngreen
# 7cfc00
124.252,0
Lemonchiffon
#fffacd
255.250.205
azul claro
# add8e6
173.216.230
cor de luz
# f08080
240.128.128
Ciano claro
# e0ffff
224.255.255
lightgoldenrodyel ow
# fafad2
250.250.210
cinza claro
# d3d3d3
211.211.211
luz verde
# 90ee90
144.238.144
cinza claro
# d3d3d3
211.211.211
luz rosa
# ffb6c1
255.182.193
salmã o luminoso
# ffa07a
255.160.122
verde claro
# 20b2aa
32.178.170
azul claro
# 87cefa
135.206.250
raio de luz
# 778899
119.136.153
estrelado-luz
# 778899
119.136.153
azul claro
# b0c4de
176.196.222
luz amarela
# ffffe0
255.255.224
Lima
# 00ff00
0,255,0
verde limã o
# 32cd32
50.205,50
linho
# faf0e6
250.240.230
magenta
# ff00ff
255.0.255
marrom
# 800000
128,0,0
mediumaquamarine
# 66cdaa
102.205.170
azul médio
# 0000cd
0,0,205
médium
# ba55d3
186,85,211
médio pú rpura
# 9370db
147.112.219
médio-verde
# 3cb371
60.179.113
médio-azulado
# 7b68ee
123.104.238
mediumspringgreen
# 00fa9a
0,250,154
169
Nome da Cor
Valor hexadecimal
Valor Decimal
turquesa médio
# 48d1cc
72.209.204
médio-violento
# c71585
199,21,133
azul da meia noite
# 191970
25,25,112
creme de hortelã
# f5fffa
245.255.250
mistirose
# ffe4e1
255.228.225
mocassim
# ffe4b5
255.228.181
navajowhite
#ffdead
255.222.173
marinha
# 000080
0,0,128
Oldlace
# fdf5e6
253.245.230
Oliva
# 808000
128,128,0
caranguejo
# 6b8e23
107.142,35
laranja
# ffa500
255.165,0
laranjal
# ff4500
255,69,0
orquídea
# da70d6
218.112.214
Palegoldenrod
# eee8aa
238.232.170
verde pá lido
# 98fb98
152.251.152
paleturquesa
#afeeee
175.238.238
palevioletrado
# db7093
219.112.147
papaia
# ffefd5
255.239.213
pêssego
# ffdab9
255.218.185
Peru
# cd853f
205.133,63
cor de rosa
# ffc0cb
255.192.203
ameixa
# dda0dd
221.160.221
Pó azul
# b0e0e6
176.224.230
roxo
# 800080
128.0.128
vermelho
# ff0000
255,0,0
rosybrown
# bc8f8f
188.143.143
azul real
# 4169e1
65.105.225
Saddlebrown
# 8b4513
139,69,19
salmã o
# fa8072
250.128.114
castanho-arenoso
# f4a460
244.164,96
verde Mar
# 2e8b57
46.139,87
Concha do mar
# fff5ee
255.245.238
Nome da Cor
Valor hexadecimal
Valor Decimal
Siena
# a0522d
160,82,45
prata
# c0c0c0
192.192.192
céu azul
# 87ceeb
135.206.235
azul ardó sia
# 6a5acd
106,90.205
ardó sia cinza
# 708090
112.128.144
ardó sia cinza
# 708090
112.128.144
neve
#fffaf a
255.250.250
Primavera verde
# 00ff7f
0,255,127
azul-aço
# 4682b4
70.130.180
bronzeado
# d2b48c
210.180.140
cerceta
# 008080
0,128,128
cardo
# d8bfd8
216.191.216
tomate
# ff6347
255,99,71
turquesa
# 40e0d0
64.224.208
tolet
# ee82ee
238.130.238
trigo
# f5deb3
245.222.179
Branco
#ffffff
255.255.255
fumaça branca
# f5f5f5
245.245.245
amarelo
# ffff00
255.255,0
amarelo verde
# 9acd32
154.205,50
Um exemplo de uso de um nome de cor para definir a cor de fundo de um documento

HTML como amarelo é o seguinte.
corpo {
Usando a função rgb
Outra maneira de representar as cores RGB é usar a funçã o rgb. Esta funçã o aceita os três
parâ metros R, G e B, como um nú mero inteiro ou como uma porcentagem. Se o valor inteiro
estiver acima ou abaixo do intervalo vá lido de 0 a 255, o valor será automaticamente
interpretado como o valor mínimo ou má ximo. A seguir estã o exemplos da funçã o rgb.
h 1 {cor de fundo: rgb (255,0,0); }
h1 {cor de fundo: rgb (-100.500,0); } / * interpretado como 0,255,0 * /
h1 {cor de fundo: rgb (20%, 150%, 0%); } / * interpretado como 20%, 100%, 0% * /
171
Usando transparen cy
Você pode definir a propriedade CSS opacity para controlar a quantidade de transparência

que um elemento possui.
Isso é especialmente ú til quando o conteú do é colocado sobre uma imagem e você ainda
deseja ver a imagem. A opacidade deve ser um valor entre 0,0 e 1,0, em que 0,0 é invisível e
1,0 é opaco. No exemplo a seguir, a opacidade de um elemento cujo id é mainContent é
definida de forma que o elemento seja 50 por cento transparente e qualquer coisa sob esse
elemento ainda seja visível.
#conteú do principal {
opacidade: 0,5;
Usando a função rgba
A funçã o rgba é semelhante à funçã o rgb, exceto por ter um parâ metro alfa , que representa
a quantidade de transparência a ser usada. O valor do parâ metro alfa deve estar entre 0,0
e 1.0, onde 0.0 é invisível e 1.0 é totalmente opaco. A seguir estã o exemplos de como usar a
funçã o rgba.
h1 {cor de fundo: rgba (255,0,0,0,5); }
h1 {cor de fundo: rgba (0,255,0,1); }
h1 {cor de fundo: rgba (20%, 50%, 0%, 0,2); }
Usando a função hsl
Outra maneira de representar uma cor em CSS3 é usar cores hue-saturation-lightness

(HSL). Como as cores RGB, as cores HSL usam três nú meros, mas os nú meros sã o para
matiz, saturaçã o e claridade. O matiz é calculado como um â ngulo do círculo de cores onde
o vermelho é 0 ou 360 (graus) e outras cores sã o espalhadas ao redor do círculo, conforme
mostrado na Figura 4-8. Ao olhar para os graus no círculo, o amarelo pode ser
representado como 60, como –240 ou mesmo como 420. Você pode normalizar o valor
usando a fó rmula (((x mod 360) + 360) mod 360). A razã o para adicionar 360 e executar
um segundo mó dulo é lidar com valores negativos.
Os valores de saturaçã o e luminosidade sã o representados em porcentagens. Saturaçã o é a

quantidade de cor a fornecer e luminosidade é a quantidade de luz a fornecer. É fá cil
produzir cores correspondentes mantendo o valor de matiz igual e ajustando a saturaçã o e
a luminosidade para obter as cores desejadas. As cores primá rias típicas têm um valor de
saturaçã o de 100
por cento e um valor de leveza de 50 por cento. Alguns exemplos de HSL sã o os seguintes.
h2 {cor: hsl (60, 100%, 50%); } /* amarelo */
h2 {cor: hsl (120, 100%, 25%); } /* verde escuro */
h2 {cor: hsl (0, 100%, 50%); } /* vermelho */

FIGURA 4-8 A roda de cores HSL

A formataçã o de texto é uma das tarefas CSS mais comuns. Você define o tipo de fonte , que
também é conhecido como família de fontes , como Times New Roman. Em seguida, você
define a fonte , que é uma chave específica
Os termos sã o membros da fonte, como Times New Roman, 12 pontos em negrito.
As famílias de fontes pertencem a um de cinco grupos.
■■ serif famílias de fontes com serifa ou cachos na parte superior e inferior de

personagens, tais como Times New Roman
■■ famílias de fontes sans serif sem serifas, como Arial
■■ Famílias de fontes monospa ce nas quais todos os caracteres têm a mesma largura,

como Courier New
■■ famílias de fontes cursivas que imitam a escrita à mã o, como Mistral
■■ Famílias de fontes de fantasia que sã o decorativas e usadas em títulos, como Impacto

As famílias de fontes mais comumente usadas pertencem a um dos três grupos: serif, sans
serif ou monoespaçada. A Figura 4-9 mostra um exemplo dos três grupos.
173
FIGURA 4-9 As famílias de fontes serif, sans serif e monoespaçadas As famílias de

fontes serif e sa ns serif têm caracteres de largura proporcional, o que significa que os
caracteres têm larguras diferentes, ao contrá rio das famílias de fontes monoespaçadas.
Configurando a propriedade font-family
Em sua regra de estilo, você pode usar a propriedade font-family para definir o tipo de letra
dos elementos que correspondem ao seletor. Tenha cuidado ao especificar a família da
fonte, pois aquela que você especificar deve existir no computador do usuá rio. Se a família
de fontes nã o existir , o navegador usará sua fonte padrã o. Por segurança, geralmente é
melhor especificar uma família de fontes comuns, como Arial, Courier New, Georgia, Times
New Roman ou Verdana. Arial e Verdana sã o fontes sem serifa, fá ceis de ler e comumente
usadas.
Você pode especificar uma lista de famílias de fontes em sua regra de estilo. O navegador
tentará usar a primeira família de fontes especificada. Se o navegador nã o tiver a primeira
família de fontes, ele tentará usar a segunda família de fontes e assim por diante. O exemplo
a seguir descreve vá rias famílias de fontes sendo especificadas.
h1 {família da fonte: arial, verdana, sans-serif; }
h1 {família da fonte: "times new roman", serif; }
h1 {família de fontes: "courier new", monoespaço; }
Neste exemplo, a ú ltima família de fontes listada é, na verdade, o nome do grupo genérico,
que instrui o navegador a usar uma família de fontes desse grupo se o navegador nã o tiver
as outras famílias de fontes especificadas primeiro.
Que outras opçõ es você tem ao tentar especificar uma família de fontes que o uso r
provavelmente nã o terá ? No passado, os desenvolvedores criavam uma imagem GIF que
era uma imagem do texto e, em seguida, usavam a imagem na pá gina. Se você fizer isso,
deve sempre preencher o atributo alt com o texto. Lembre-se de que a Liçã o 1 aborda o uso
de @ font-face, que permite fornecer um link para a fonte que deseja usar.
Especificando o tamanho da fonte
Para definir o tamanho da fonte, você pode definir a propriedade font-size. Os tamanhos
das fontes podem ser especificados usando unidades absolutas ou unidades relativas, e
existem vá rias maneiras de definir o tamanho. As unidades de comprimento absoluto sã o
ú teis quando o ambiente de saída é conhecido porque as unidades de comprimento
absoluto sã o fixas em relaçã o umas à s outras e ancoradas a alguma medida física. A seguir
está uma lista das unidades de medida disponíveis .
■■ em Um multiplicador de medida relativo do tamanho de fonte calculado do elemento

pai
■■ px Uma unidade de pixel de medida absoluta, 96 pixels por polegada 174 CAPÍTULO

4 Introduçã o ao CSS3
■■ pt Uma unidade de ponto de mediçã o absoluta, 72 pontos por pol. Ch
■■ pc Uma unidade de medida absoluta de pica, 12 pontos por pica
■■ em uma unidade de medida absoluta em polegada
■■ mm Uma unidade de milímetro de mediçã o absoluta

■■ cm Uma unidade centimétrica de mediçã o absoluta
Também existe um conjunto de tamanhos absolutos cujo tamanho é controlado pelo

navegador, mas o tamanho recomendado é de 1,2 em do tamanho anterior. Esses tamanhos
sã o xx-pequeno, x-pequeno, pequeno, médio, grande, x-grande e xx-grande.
Semelhante a isso, há um conjunto de tamanhos relativos cujo tamanho é baseado no

tamanho do elemento pai . Esses tamanhos sã o maiores e menores.
Além de todos os tamanhos já cobertos, você pode usar valores de porcentagem para
dimensionar sua fonte, que fornece um tamanho que é relativo ao tamanho de fonte
calculado do elemento pai.
Aqui estã o alguns exemplos de como usar as vá rias unidades de medida para definir a
propriedade font-size.
h1 {tamanho da fonte: 12px; }
h1 {tamanho da fonte: 200%; }
h1 {tamanho da fonte: 1,2em; }
h1 {tamanho da fonte: 1in; }
h1 {tamanho da fonte: 2cm; }
Com todas essas opçõ es de medida, qual é a unidade de medida recomendada a ser usada?
Para renderizaçã o de tela, tente usar as medidas em ou porcentagem, porque essas

medidas sã o bem dimensionadas. Para a renderizaçã o da impressora, considere o uso de
qualquer uma das medidas de fonte absolutas, como ponto, pixels, picas, polegadas,
centímetros ou milímetros.
Criar um bom layout para sua pá gina da Web requer que você entenda o modelo de caixa
CSS, que define o espaçamento em torno das caixas em seu documento HTML, conforme
A margem é o espaço fora da fronteira, entre a fronteira e o pró ximo elemento . O

preenchimento é o espaço dentro da borda, entre a borda e o conteú do. Se a borda estiver
sendo exibida, as configuraçõ es de margem e preenchimento terã o efeitos distintos. Se a
borda nã o estiver sendo exibida, pode ser difícil diferenciar as configuraçõ es de margem e
preenchimento.

175
FIGURA 4-10 O modelo de caixa CSS
Você pode definir a borda, o preenchimento e a margem facilmente atribuindo um valor

à propriedade correspondente , conforme mostrado na regra da folha de estilo a seguir.
p{
borda: 10px;
preenchimento: 25px;
margem: 15px;
estilo de borda: só lido;
cor da borda: verde;
}
Esta regra de folha de estilo define a largura da borda em 10 pixels em todos os quatro
lados. O preenchimento é definido como 25 pixels nos quatro lados e a margem é definida
como 15 pixels nos quatro lados. Agora considere o seguinte documento HTML e como a
regra de estilo afeta sua renderizaçã o.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
esta é a terceira div - Lorem ipsum dolor sit amet, salutandi
conceptam sea cu, eos id legimus percipit argumentum. Habeo
ipsum mandamus sit an, aeterno pertinax vim ad, et cibo
atomorum mea. Ad vis illum porro disputando, ei eligendi
mar mandamus liberavisse. Sea debet compreensam no, et
blandit officiis eos, ut per ubique abhorreant

</p>
</body>
</html>
A Figura 4-11 mostra a pá gina da web renderizada. Observe a grande lacuna entre o texto e
a borda, que é o preenchimento. A borda é bastante grossa com sua configuraçã o de largura
de 10 pixels.
Fora da borda, há um espaço em branco ao redor do pará grafo, que é a configuraçã o da

propriedade de margem de 15 pixels.
FIGURA 4-11 Controlando as propriedades de margem, preenchimento e borda Além de

definir cada uma dessas propriedades para um valor que controla todos os quatro lados,
você pode especificar cada lado e o valor. Por exemplo, você pode atribuir um valor
diferente a cada lado da borda, conforme mostrado na seguinte regra de estilo.
p{
borda inferior: 10px;
border-right: 5px;
borda esquerda: 1px;

border-top: 0px;
margem: 15px;
cor da borda: verde;
Neste exemplo, a borda superior nã o é exibida porque sua largura está definida como 0
pixels. Você também pode adicionar -bottom, -top, -left e -right à s propriedades de
preenchimento e margem. Há também Liçã o 3: Trabalhando com propriedades
CSS CAPÍTULO 4
177
alguns atalhos para especificar as configuraçõ es para cada lado. Você pode definir as

propriedades especificando top, right, bottom e left separando cada valor com um espaço
como segue.
preenchimento: 1px 2px 3px 4px;
Neste exemplo, a parte superior é definida como 1 pixel, a direita é definida como 2 pixels,
a parte inferior é definida como 3
pixels, e a esquerda é definida como 4 pixels. Além disso, se você sabe que deseja que as
partes superior e inferior tenham os mesmos valores e que a esquerda e a direita tenham
os mesmos valores, você pode atribuir os dois valores para que o primeiro valor seja a
configuraçã o superior e inferior, e o segundo valor é a configuraçã o esquerda e direita. O
exemplo a seguir define a parte superior e inferior em 5 pixels e a esquerda e a direita em
15 pixels.
preenchimento: 5 px 15px;
■■ Do elemento para fora, descreva o modelo da caixa.
■■ Um elemento contém conteúdo imediatamente circundado pelo preenchimento,

que é então circundado pela borda, que é então circundada pela margem.
Posicionando elementos < div >
O elemento < div > tem sido o elemento al -purpose a ser usado para criar layouts de
pá gina.
Embora haja um movimento de afastamento do uso do elemento < div > em favor do uso da

chave semâ ntica
Marcaçã o de termos, o elemento < div > ainda é usado quando o estilo precisa ser aplicado

ao conteú do que nã o é representado com elementos semâ nticos.
O elemento < div > representa um bloco retangular de conteú do. Considere o seguinte

documento HTML.
<! DOCTYPE html>
<head>
<tit le> </title>
</head>
<body>
<div id = "div1">
<p> este é o primeiro div </p>
</div>
<div id = "div2">
<p> este é o segundo div </p>
<div id = "div3">
esta é a terceira div - Lorem ipsum dolor sit amet, sal utandi
conceptam sea cu, eos id legimus percipit argumentum. Habeo
ipsum mandamus sit an, aeterno pertinax vim ad, et cibo
atomorum mea. Ad vis illum porro disputando, ei eligendi mandamus liberavisse mar. Sea
debet compreensam no, et
blandit officiis eos, ut per ubique abhorreant
</p>
</div>
<div id = "div4">
este é o quarto div - Ignota impetus sadipscing sed ut ,
sed ea alia menandri imperdiet. Te inani suscipiantur duo,
ad mei utroque accusata. Tem veri dolores assueverit cu,
ad vocent fuisset expetenda quo. Vim id quot aliquid, ea
iisque gloriatur mei, eos e a ludus graeci melius. Saepe
accusam pericula cu usu, eos at alia everti.
</p>
</div>
<div id = "div5">
p
este é o quinto div - Ei duo viderer legendos, fastidii
eligendi ad usu, audire accusamus te vel. Ullum referrentu r
mei at, qui tota reque neglegentur ne. Ius eu minim
copiosae, malorum antiopam voluptaria te vel, nemore
eruditi fastidii nec te. Eos id prima ridens, prompta
alterum conclusõ esemque eu duo. Et vis elaboraret quaerendum.
Repudiare interesset seu anú ncio, vis facete commune ne.
</p>
</div>
</div>
<div id = "div6">
este é o sexto div
</p>
</div>
</body>
</html>
Observe que os elementos < div > com id de div3, div4 e div5 estã o aninhados em

div2. Esses elementos contêm texto de arquivo fictício. O arquivo default.css contém a
seguinte regra de estilo.
p{
margem: 0px;
div {
borda: só lida;
cor da borda: preto;
# div1 {
cor do fundo : amarelo;
# div2 {
cor de fundo: ciano;
179
# div3 {
cor de fundo: rosa claro;
# div4 {
cor de fundo: laranja;
# div5 {
cor de fundo: azul claro;
# div6 {
cor de fundo: cinza claro;

}
Nas regras de estilo, a margem do elemento < p > é definida como 0 pixels para evitar que o
pará grafo insira muito espaço. Cada cor de fundo do elemento < div > é definida para ajudar
a diferenciar cada elemento. Se você exibir esta pá gina em um navegador, verá algo
semelhante à Figura 4-12.
FIGURA 4-12 Os elementos < div > renderizando um abaixo do outro O comportamento

padrã o do elemento < div > é tal que ele consome toda a largura da tela, o que força o
pró ximo elemento < div > a renderizar na pró xima linha. As bordas se tocam e o texto fica
muito pró ximo à s bordas. Você pode ver como div2 contém div3, div4 e div5 porque as
bordas estã o contidas dentro da borda de div2.
A primeira coisa que você pode querer fazer é definir os elementos < div > em um local e
tamanho fixos para ajudá -lo a obter controle do posicionamento dos elementos < div > ao
criar o layout da pá gina. Use o positi na propriedade, que deve ser definido como está tico,
relativa, absoluta, ou fixo como uxos fol.
Usando a posição estática
O elemento é exibido onde normalmente apareceria no fluxo de HTML. Esta é a

configuraçã o padrã o e normalmente nã o é usada, exceto para substituir as configuraçõ es
que podem ter sido aplicadas.
Usando a posição relativa
O elemento pode ser deslocado de onde normalmente aparece no fluxo de HTML. Neste

exemplo, div2 tem a seguinte regra de estilo.
# div2 {
posiçã o: relativa;
topo: 15px;
esquerda: 30px;
Com o topo definido para 15 pixels, div2 e seu conteú do serã o empurrados para baixo 15
pixels de sua localizaçã o normal. A configuraçã o esquerda de 30 pixels empurrará div2 e
seu conteú do para a direita em 30
píxeis. O resultado é mostrado na Figura 4-13.
FIGURA 4-13 O uso de posicionamento relativo para mover div2 e seu conteú do Liçã o 3:
Trabalhando com propriedades CSS CAPÍTULO 4
181
Neste exemplo, div2 e seu conteú do mantiveram o tamanho original e foram cortados no
lado direito da tela, e o ú ltimo elemento < div >, div6, ainda está em seu local original. Os
valores de top e left também podem ser negativos para mover o elemento na direçã o
oposta.
Usando a posição absoluta
O elemento é removido do fluxo HTML e posicionado dentro do primeiro elemento nã o

está tico . Se todos os elementos pais forem está ticos (o padrã o), o elemento será
posicionado na janela do navegador. Neste exemplo, div2 tem a seguinte regra de estilo,
que define a posiçã o como absoluta e nenhum elemento pai é nã o está tico.
# div2 {
backgro und-color: ciano;
posiçã o: absoluta;
topo: 15px;
esquerda: 30px;
Com o topo definido para 15 pixels, div2 e seu conteú do serã o empurrados para baixo em
15 pixels, nã o de sua localizaçã o normal, mas da parte superior da janela do navegador. A
configuraçã o esquerda de 30 pixels empurrará div2 e seu conteú do para a direita em 30
pixels, também nã o de sua localizaçã o normal, mas do lado esquerdo da janela do
navegador. O resultado é mostrado na Figura 4-14.
FIGURA 4-14 O uso de posicionamento absoluto para mover div2 e seu conteú do Neste
exemplo, div2 e seu conteú do mantiveram o tamanho original, e o ú ltimo elemento < div >,
div6, foi movido de sua localizaçã o original e agora está sob div1 porque div2 e seu
conteú do nã o estã o mais no fluxo de documentos HTML. Como nã o há elementos pais nã o
está ticos, o posicionamento é relativo à janela de navegaçã o .
Agora que div2 nã o é está tico, o que aconteceria se a posiçã o de um de seus elementos filho
fosse definida como absoluta? Por exemplo, suponha que div5 tenha a seguinte regra de
estilo.
# div5 {
topo: 5px;
esquerda: 5px;
Se div5 nã o tivesse nenhum elemento pai nã o está tico, div5 seria posicionado no canto
superior esquerdo da janela do navegador. Como div5 tem div2 como pai nã o está tico, div5
será posicionado no canto superior esquerdo de div2. O resultado é mostrado na Figura 4-
15.
FIGURA 4-15 O uso de posicionamento absoluto em um elemento nã o está tico Observe que
div5 está posicionado em relaçã o a div2, nã o em relaçã o à janela do navegador. Um dos
benefícios dessa abordagem é que você pode facilmente configurar div3, div4 e div5 como
colunas em div2, definindo as propriedades top, left, right e width para div3, div4 e div5,
respectivamente. Antes de demonstrar isso, o que você faria se quisesse que a posiçã o de
div5 fosse relativa à janela do navegador? Você pode usar o posicionamento fixo em vez do
posicionamento absoluto.
Usando a posição fixa
A posiçã o do elemento é calculada de forma semelhante ao posicionamento absoluto, mas

sempre em relaçã o à janela do navegador.
A partir do exemplo anterior, a regra de estilo para div5 foi alterada para a seguinte.
# div5 {
posiçã o: fixa;
topo: 5px;
183
esquerda: 5px;
Com a posiçã o definida como fixa, div5 é posicionado em relaçã o à janela do navegador,
FIGURA 4-16 Definindo a posiçã o como fixa para definir o posicionamento em relaçã o à

janela do navegador Posicionamento mais absoluto
Volte agora para o posicionamento absoluto. Você pode definir a posiçã o, tamanho e

localizaçã o de div3, div4 e div5. A seguir está o conteú do do arquivo default.css.
p{
margem: 0px;
div {
borda: só lida;

}
# div1 {
# div2 {
topo: 15px;
esquerda: 30px;
largura: 450px;
altura: 400px;
# div3 {
topo: 0px;
esquerda: 0px;
largura: 33%;
altura: 100%;

# div4 {
topo: 0px;
esquerda: 33%;
largura: 33%;
altura: 100%;
# div5 {
topo: 0px;
direita: 0px;
largura: 33%;
altura: 100%;
# div6 {
Neste exemplo, div2 tem uma largura explícita definida para 450 pixels e sua altura é
definida como 400
píxeis. As propriedades superior e esquerda de div3 sã o definidas como 0 pixels. Essas

configuraçõ es sã o relativas a div2. A largura de div3, div4 e div5 é definida como 33 por
cento, o que é relativo à largura de div2.
A altura de div3, div4 e div5 sã o definidas como 100 por cento, o que é relativo à altura de
div2. A propriedade left de div4 é definida como 33 por cento em vez de 150 pixels, o que
significa que você pode alterar a largura de div2 e as colunas serã o automaticamente
dimensionadas e posicionadas. O resultado é mostrado na Figura 4-17.
Um dos problemas com essa soluçã o é que a altura de div2 é fixada em 400 pixels e as
alteraçõ es no conteú do de div3, div4 ou div5 podem resultar em uma grande lacuna na
parte inferior ou recorte do texto na parte inferior. Isso pode ser aceitá vel em alguns
cená rios, mas div6 ainda está no topo. Você pode querer que as colunas aumentem e
diminuam dinamicamente y e div6 sejam colocadas na parte inferior das colunas, mesmo
quando a altura da coluna muda. O uso da propriedade float pode resolver esse problema.
185
FIGURA 4-17 O uso de posicionamento absoluto para criar colunas usando a propriedade

float
O posicionamento absoluto pode ser um pouco frá gil ao usar configuraçõ es absolutas. No
exemplo anterior, seria melhor se os elementos < div > nã o fossem removidos do fluxo de
documentos HTML, mas, em vez disso, pudessem ser dimensionados e colocados lado a
lado para produzir colunas. Se o
Os elementos < div > nã o sã o removidos do fluxo de documentos HTML, div6 irá
automaticamente permanecer na parte inferior.
A propriedade float pode ser definida para permitir que um elemento flutue para a
esquerda ou direita. Um elemento pode flutuar apenas horizontalmente y, nã o vertical y, e
irá flutuar tanto para a esquerda ou direita quanto puder.
Os elementos apó s o elemento flutuante fluem em torno do elemento flutuante . Os

elementos antes do elemento flutuante nã o sã o afetados.
Para entender como a propriedade float funciona, o mesmo documento HTML é usado
como nos exemplos anteriores, e o seguinte é o conteú do do arquivo default.css.
p{
margem: 0px;
div {
borda: só lida;
# div1 {

}
# div2 {
# div3 {
flutuar: esquerda;
largura: 80%;
# div4 {

}
# div5 {
# div6 {
Neste exemplo, a propriedade div3 float é definida para a esquerda e a largura é definida
para 80 por cento.
A Figura 4-18 mostra a pá gina renderizada.
FIGURA 4-18 Elementos flutuantes com embalagem
Na Figura 4-18, as propriedades div3 width e float sã o definidas. A largura é definida em

80 por cento, mas o que acontece com os 20 por cento restantes? Neste exemplo, div4 é
colocado logo apó s div3, entã o div4 flui para baixo até que div3 termine. Nesse ponto, a
largura de div4 torna-se 100 por cento. A Liçã o 3: Trabalhando com propriedades
CSS CAPÍTULO 4
187
O efeito líquido é que div4 envolve div3. Essa técnica é comumente usada para inserir
imagens em um documento HTML de forma que o texto se enrole na imagem.
Quando a propriedade float de vá rios elementos é definida para a mesma direçã o, os

elementos sã o empilhados na horizontal y. Este comportamento pode ser usado para criar
colunas. No exemplo a seguir, a propriedade float de div3, div4 e div5 é definida para a
esquerda e sua propriedade de largura é definida para 33 por cento, usando as seguintes
regras de estilo.
p{
margem: 0px;
}

div {
borda: só lida;
cor bor der: preto;
# div1 {
# div2 {
# div3 {
flutuar: esquerda;
largura: 32%;
# div4 {
flutuar: esquerda;
largura: 32%;
}

# div5 {
flutuar: esquerda;
largura: 32%;
# div6 {
A largura é definida como 32 por cento em vez de 33 por cento porque a configuraçã o de
largura nã o inclui a largura da borda, que é padronizada para 2 pixels. O resultado é

FIGURA 4-19 Usando a propriedade float para criar colunas
Com todas as três colunas renderizadas lado a lado e dentro de div2, as bordas usam um
total de 14
píxeis. Se a largura for definida para 33 por cento , a ú ltima coluna nã o caberá e será
colocada sob div3
porque definir a largura para 32 por cento faz com que uma fita fique disponível no lado
direito e div6 preencha o vazio. Como o div6 pode ser estilizado para ser exibido apenas na
parte inferior? Use a propriedade clear.
Us ing a propriedade clara
A propriedade clear instrui o navegador a colocar o elemento clear apó s os elementos

flutuantes. Defina a propriedade clear para ambos, conforme mostrado na seguinte regra
de estilo para div6.
# div6 {
limpar ambos;
A Figura 4-20 mostra a pá gina renderizada. Observe a localizaçã o de div6. Usar essa

abordagem evita que div6 consuma espaço ao lado das colunas.
189
FIGURA 4-20 A propriedade clara definida para ambos
Usando a propriedade box-sizi ng
O exemplo anterior parece bom, exceto pelo espaço do lado direito. Muitos

desenvolvedores brincariam com as configuraçõ es de largura nas três colunas até que
encontrassem configuraçõ es que fizessem com que a terceira coluna se alinhasse
adequadamente à direita. Lembre-se de que a razã o para a lacuna no lado direito é que a
largura das colunas é definida como 32 por cento porque a largura é baseada no conteú do
do elemento, nã o incluindo a borda.
Para resolver esse problema, você pode alterar a maneira como o navegador calcula
a largura definindo a propriedade box-sizing em div3, div4 e div5. O tamanho da caixa tem
os seguintes valores vá lidos.
■■ content-box A configuraçã o padrã o; calcula a largura com base apenas na largura do

conteú do.
■■ border-box Calcula a largura com base na borda, no preenchimento e na largura do

conteú do.
■■ caixa de preenchimento Calcula a largura com base no preenchimento e na largura do

conteú do.
No exemplo a seguir, o tamanho da caixa das colunas é definido como caixa de borda e, em
seguida, a largura das colunas é definida como 33 por cento, 34 por cento e 33 por cento.
p{
margem: 0px;
div {
borda: só lida;
#di v1 {
# div2 {
limpar ambos;
# div3 {
dimensionamento da caixa: caixa de borda;
flutuar: esquerda;
largura: 33%;
# div4 {
flutuar: esquerda;
largura: 34%;
# div5 {
flutuar: esquerda;
largura: 33%;
# div6 {
limpar ambos;
A saída renderizada é mostrada na Figura 4-21.
191
FIGURA 4-21 Usando a propriedade box-sizing para controlar cá lculos de largura
OBSERVAÇÃO DE RENDIMENTOS DO NAVEGADOR
Lembre-se de que, em muitos desses exemplos, navegadores diferentes são

renderizados de maneira diferente. Neste exemplo, você precisará adicionar a
seguinte regra de estilo para corrigir o Firefox.
-moz-box-sizing: border-box;
Se você olhar atentamente a Figura 4-21, poderá notar que nos lados esquerdo e direito das
colunas , há um espaço muito pequeno. Isso ocorre porque div3, div4 e div5 estã o dentro de
div2; eles cabem dentro da fronteira de div2. Se você precisa que essas colunas se alinhem
exatamente com a borda de div2, você pode tirar div3, div4 e div5 de div2.
■■ Você deseja definir a largura de um elemento com base em sua largura total. Qual
deve ser o tamanho da caixa?

■■ tamanho da caixa: caixa de borda;
Centralizar o conteúdo na janela do navegador
Criar um layout de pá gina que tenha uma boa aparência em qualquer navegador e continue
a ter uma boa aparência enquanto a janela do navegador é redimensionada pode ser uma
tarefa difícil. Uma abordagem comum para resolver esse problema é criar
um elemento < div > que contenha seu conteú do e definir o < div > para uma largura
fixa, como 800 pixels.
Se você definir a largura para um tamanho fixo, provavelmente desejará centralizar

o elemento < div > na janela do navegador. Você pode fazer isso definindo as margens
esquerda e direita do elemento < div > como auto . Quando ambas as margens sã o definidas
como automá ticas e a largura é definida, o navegador divide o espaço da margem
excedente por y. O resultado é um elemento < div > centralizado . Por exemplo, se o seu
conteú do está em um elemento < div > cujo id é definido como “contêiner”, você pode
adicionar a seguinte regra de estilo para centralizar o conteú do do contêiner .
#container {
largura: 600px;
margem esquerda: automá tico;
margem direita: automá tico;
A largura deve ser definida, ou a centralizaçã o nã o funcionará .
Resumo da lição
■■ As cores CSS podem ser definidas usando nomes de cores; notaçã o hexadecimal; ou as

funçõ es rgb, rgba e hsl .
■■ Use a propriedade opacity para definir a transparência.
■■ Para formatar o texto, defina a propriedade font-family e, a seguir, defina as

propriedades da fonte.
■■ Famílias de fontes com curvas nas partes superior e inferior dos caracteres pertencem
ao grupo de famílias de fontes serif. As famílias de fontes que nã o têm cachos pertencem ao
grupo de famílias de fontes sans serif. As famílias de fontes cujos caracteres têm a mesma
largura pertencem ao grupo de famílias de fontes monoespaçadas. As famílias de fontes que
imitam a escrita à mã o pertencem ao grupo de famílias de fontes cursivas. As famílias de
fontes decorativas pertencem ao grupo de famílias de fontes fantasy.
■■ O modelo de caixa CSS define o conteú do do elemento como circundado por

preenchimento, que é entã o circundado pela borda, que é entã o circundado pela margem.
■■ Você pode definir todos os quatro lados da margem, preenchimento e borda,

fornecendo um ú nico tamanho a ser aplicado a todos os lados, ou você pode definir os lados
individuais adicionando -top, -botto m, -esquerda ou -direita a a propriedade e atribuindo
um valor a cada uma.
■■ O elemento < div > pode ser posicionado atribuindo-se um valor está tico, relativo,

absoluto ou fixo à propriedade position.
■■ A propriedade float pode ser usada para criar colunas sem remover o elemento < div >
do fluxo de HTML. Esta propriedade também pode ser usada para posicionar imagens de
forma que o texto flua ao redor da imagem.
193
■■ Use a propriedade clear para indicar quando um elemento deve ser

posicionado claramente apó s o elemento anterior.
■■ Use a propriedade box-sizing para alterar o cá lculo de largura padrã o do conteú do à

borda.
Revisão da aula
1. Você deseja encontrar três tons de uma cor para usar em partes de sua pá gina da
web. Qual funçã o de cor o ajuda a realizar essa tarefa?
A. rgb ()
B. rgba ()
C. hsl ()
D. color ()
2. Uma fonte com ondulaçõ es nas partes superior e inferior de seus caracteres pertence a
qual grupo de família fo nt?
A. monoespaço
B. serif
C. sans serif
D. cursiva
E. fantasia
3. Você deseja posicionar um elemento < div > em relaçã o à janela do navegador. Qual

configuraçã o de posiçã o você usa?
A. está tico
B. parente
C. absoluto
D. corrigido
Pratica exercícios

Exercício 1: Adicionar uma folha de estilo ao projeto da calculadora Neste exercício,

você aplica seu conhecimento CSS3 adicionando uma folha de estilo em cascata ao projeto
WebCalculator que você criou no Capítulo 3, “Introduçã o ao JavaScript.” Você adiciona
regras de estilo para melhorar a aparência da pá gina da web. O esquema de cores para esta
pá gina da web será roxo-azulado e todas as cores terã o o matiz definido como 255.
Este exercício adiciona regras de estilo com um mínimo de modificaçõ es no arquivo

default.html. No pró ximo exercício, você fará alteraçõ es no arquivo default.html que as
regras de estilo podem usar para terminar de limpar a pá gina da web.
1. Inicie o Visual Studio Express 2012 for Web. Navegue até Arquivo | Projeto aberto.
2. Navegue até a soluçã o que você criou no Capítulo 3 e selecione o arquivo

WebCalculator.sln. Clique em Abrir. Você também pode navegar até Arquivo | Projetos e
soluçõ es recentes para selecionar a soluçã o.
Se você nã o completou os exercícios do Capítulo 3, pode usar a soluçã o da pasta Iniciar do
Capítulo 4 do Exercício 1.
3. Na janela Solution Explorer, clique com o botã o direito do mouse

no arquivo de fault.html e escolha Definir como pá gina inicial. Pressione F5 para verificar
se sua pá gina inicial é exibida.
4. Na janela Solution Explorer, adicione um arquivo CSS clicando com o botã o direito na
pasta Content no projeto e navegando até Add | Folha de estilos.
5. Nome do pag e default.css e clique em OK.
6. Abra a pá gina default.html, arraste o arquivo default.css da janela do Solution Explorer e

solte-o logo antes do elemento < script > que carrega o arquivo
CalculatorLibrary.js. O elemento < head > deve ser semelhante ao seguinte .
<head>
<title> Calculadora da Web </title>
<link href = "Content / default.css" rel = "stylesheet" />
</head>
7. Abra o arquivo default.css e defina a cor de fundo do corpo com saturaçã o má xima e
meia claridade, conforme a seguir.
corpo {
cor de fundo: hsl (255,100%, 50%);
8. Adicione uma regra de estilo que formate as caixas de texto.
Este estilo define a altura, largura, texto , alinhamento, preenchimento e estilo de borda
conforme a seguir.
entrada {
largura: 446px;
altura: 35px;
alinhamento de texto: direita;

borda: inserçã o;
195
9. Adicione uma regra de estilo que formate os botõ es.
Este estilo define a cor de fundo, largura, altura e estilos de borda da seguinte maneira.
botã o {
cor de fundo: hsl (255, 50%, 80%);
largura: 150px;
altura: 50px;
fronteira: início;
10. Adicione uma regra de estilo que defina o formato dos botõ es quando você passa o
mouse sobre um botã o.
Este estilo define a cor de fundo da seguinte maneira.
botã o: hover {
cor de fundo: hsl (255, 50%, 90%);
11. Adicione uma regra de estilo que defina o formato dos botõ es quando um botã o é
clicado.
Este estilo define a cor de fundo e o estilo da borda da seguinte maneira.
botã o: ativo {
borda: inserçã o;
largura da borda: grosso;
cor da borda: hsl (255, 100%, 100%);
cor de fundo: hsl (255, 50%, 50%);
12. Adicione uma regra de estilo que forneça formataçã o comum para os botõ es e caixas de
texto.
O seletor deve ser para os elementos < input > e < button > e deve definir a família da fonte,
tamanho da fonte, largura da borda, cor da borda e margem.
input, button {
família da fonte: Arial;
tamanho da fonte: 24pt;
cor da borda: hsl (255, 100%, 100%);
margem: 5px;
13. Adicione um estilo à caixa de texto txtResult para indicar que essa caixa de texto é

somente leitura.
O estilo define a cor de fundo da seguinte maneira.
#txtResult {
cor de fundo: hsl (255, 50% , 80%);
14. Para ver os resultados, pressione F5 para iniciar a depuraçã o do aplicativo.
Você deve ver uma interface de calculadora mais bonita, conforme mostrado na Figura 4-
22.

FIGURA 4-22 A interface do usuá rio da calculadora da web
15. Tente inserir dados e clicar nos botõ es de mais e menos.
A calculadora deve estar funcionando.
16. Volte para o Visual Studio pressionando Alt + Tab. Observe que a barra de título diz
(Em execuçã o).
Shift + F5 funciona apenas quando o Vis ual Studio tem o foco, nã o quando o aplicativo em
execuçã o tem o foco.
A ú nica mudança real na pá gina default.html foi adicionar o link à folha de estilo.
A calculadora é justificada à esquerda na janela do navegador e muitas configuraçõ es têm

valores absolutos . No pró ximo exercício, você limpará o restante desta pá gina da web.

Neste exercício, você continua com o projeto do Exercício 1 e modifica o arquivo
default.html para ajudar na formataçã o da pá gina da web. Você adiciona elementos
< div > para que possa centralizar a calculadora na janela do navegador. Você também
implementa uma classe CSS somente leitura que pode ser usada em qualquer caixa de texto
somente leitura.
197

Exercício 2.
2. Abra o arquivo default.html.
3. Cerque as entradas e botõ es com um elemento < div > cujo id é definido como

“calculator”.
Este elemento < div > será usado para centralizar a calculadora e criar uma caixa ao seu
redor.
O default.html deve se parecer com o seguinte.
<! DOCTYPE html>
<head>
<link href = "Content / default. css" rel = "stylesheet" />
</head>
<body>
<div id = "calculator">

<button id = "btn5"> 5 </ bu tton>
</div>
</script>
</body>
</html>
4. Abra o arquivo default.css.
5. Insira, apó s o estilo do corpo, uma regra de estilo para o elemento < div > cujo id é
“calculadora”.
Defina as propriedades de estilo para colocar uma borda ao redor da calculadora. Defina

uma altura e largura fixas. Centralize o conteú do e defina o preenchimento conforme a
seguir.
#calculadora {
ordem b : só lido;
cor de fundo: hsl (255, 100%, 60%);
largura: 500px;
altura: 500px;
alinhamento de texto: centro;
Agora que você tem uma caixa com altura e largura fixas , pode alterar as configuraçõ es de
altura e largura nos elementos de entrada e botã o para uma porcentagem do tamanho da
calculadora.
6. Altere as regras de estilo da seguinte maneira.
entrada {
largura: 85%;
altura: 7%;
borda: inserçã o;
botã o {
cor de fundo: hsl (255, 50%, 80%);

largura: 25%;
altura: 10%;
fronteira: início;
Em vez de definir o estilo de txtResult usando seu id, seria melhor alterar o seletor para
aplicar o estilo a qualquer elemento cujo atributo somente leitura esteja definido.
7. Altere a regra de estilo da seguinte maneira.
[somente leitura] {
cor de fundo: hsl (255, 50%, 80%);
O arquivo default.css preenchido deve ter a seguinte aparência.
corpo {
cor de fundo: hsl (255,100%, 50%);
#calculadora {
borda: só lida;
cor de fundo: hsl (255, 100%, 60%);
largura: 500px;
altura: 500px;
preenchimento: 10 px;
}

entrada {
largura: 85%;
altura: 7%;
199
borda: inserçã o;
botã o {
cor de fundo: hsl (255, 50%, 80%);
largura: 25%;
altura: 10%;
fronteira: início;
botã o: hover {
cor de fundo: hsl (255, 50%, 90%);
botã o: ativo {
borda: inserçã o;
cor da borda: hsl (255, 100%, 100%);
cor de fundo: hsl (255, 50%, 50%);
input, button {
cor da borda: hsl (255, 100%, 100%);
margem: 5px;
[somente leitura] {
cor de fundo: hsl (255, 50%, 80%);
8. Pressione F5 para executar o aplicativo.
A Figura 4-23 mostra a calculadora completa.

FIGURA 4-23 A calculadora da web concluída
9. Experimente clicar nos botõ es de nú mero para escolher os nú meros e tente os botõ es de
mais e menos enquanto observa o resultado. Tente clicar no botã o limpar entrada depois
de inserir um nú mero. Experimente clicar no botã o limpar para ver a entrada e o resultado
claros.
praticar o que aprendeu e ajudá -lo a dominar com êxito as liçõ es apresentadas
neste capítulo.
■■ Exercício 1 Aprenda mais sobre posicionamento adicionando mais elementos < div > à

pá gina da web para definir um cabeçalho e rodapé para a pá gina. Use regras de estilo CSS
para definir a posiçã o.
■■ Exercício 2 Aprenda mais sobre seletores CSS adicionando mais elementos à pá gina e
tente definir o formato selecionando os elementos sem usar um id.
■■ Exercício 3 Aprenda mais sobre cores alterando o esquema de cores, usando valores
RGB.
201
Respostas
Lição 1
A. Incorreto: // temporá rio é um comentá rio para linguagens de programaçã o como C, C +

+ e C #, mas nã o é aplicá vel em uma folha de estilo.
B. Incorreto: --temporary é um comentá rio do SQL Server , nã o um comentá rio da folha de

estilo.
C. Correto: A sintaxe do comentá rio do bloco, / * temporá rio * /, pode transformar um

bloco inteiro de texto em um comentá rio.
D. Incorreto: rem temporá rio é um comentá rio de arquivo em lote do DOS, mas nã o se

aplica a folhas de estilo.
A. Incorreto: os estilos embutidos nã o oferecem nenhuma separaçã o porque sã o definidos

no elemento HTML.
B. Incorreto: os estilos incorporados fornecem pouca separaçã o porque estã o localizados

no elemento HTML < head >.
C. Correto: Folhas de estilo externas fornecem a melhor separaçã o porque as regras de

estilo estã o em um arquivo separado do documento HTML.
D. Incorreto: A instruçã o @import é usada em folhas de estilo externas para importar

estilos para a folha de estilo. Isso fornece funcionalidade de reutilizaçã o. A instruçã o
@import nã o pode ser usada no documento HTML.
A. Incorreto: O atributo rel especifica a relaçã o entre o documento HTML e o arquivo

vinculado.
B. Correto: O atributo de mídia é necessá rio para especificar o uso da folha de estilo.
C. Incorreto: O uso do nome printer.css nã o influencia o uso do arquivo.
D. Incorreto: O atributo alvo típico y especifica o quadro que o link terá como alvo.
Lição 2
A. Correto: a primeira parte do seletor localiza o elemento com id de re adingPane

enquanto a segunda parte do seletor localiza todos os elementos de pará grafo e, em
seguida, retorna a primeira letra de cada pará grafo para que o estilo possa ser aplicado a
ele.
B. Incorreto: a primeira parte do seletor localiza o elemento com id de readingPane,

enquanto a segunda parte do seletor retorna a primeira letra do elemento < div >, mas nã o
para cada pará grafo.
C. Incorreto: A primeira parte do seletor localiza o elemento com id de readingPane

enquanto a segunda parte do seletor localiza todos os elementos de pará grafo e retorna
apenas o primeiro pará grafo. O estilo é aplicado a todo o pará grafo.
D. Incorreto: a primeira parte do seletor localiza o elemento com id de readingPane

enquanto a segunda parte do seletor retorna o filho de seu pai, entã o o estilo é aplicado a
todo o elemento < div >.
A. Correto: a especificidade é o fator decisivo neste exemplo. O valor da especificidade é

0,1,2 na primeira regra de estilo. O valor da especificidade é 0,0,2 na segunda regra de
estilo. O primeiro valor é mais alto; assim, o amarelo é exibido.
B. Incorreto: Lembre - se de que a ordem textual entra em jogo apenas quando os valores

de especificidade sã o os mesmos.
C. Incorreto: Existem combinaçõ es de seletor que impediriam a cor de ser transparente.
D. Incorreto: Existem combinaçõ es de seletores que evitariam que a cor fosse branca.
A. Incorreto: Lembre-se de que se os valores de especificidade forem iguais, a ordem

textual ditará o resultado.
B. C orreto: O valor de especificidade para ambas as regras de estilo é 0,1,2, entã o a ordem
textual dita o resultado. O arquivo Department.css é vinculado apó s o arquivo
Corporate.css, portanto, a regra de estilo no arquivo Department.css será aplicada.
C. Incorreto: Existem combinaçõ es de seletor que impediriam a cor de ser transparente.
D. Incorreto: Existem combinaçõ es de seletores que evitariam que a cor fosse branca.
Lição 3
A. Incorreto: a funçã o rgb requer que você especifique quantidades variá veis de vermelho,
verde e azul para cada cor, portanto, nã o é fá cil derivar três cores correspondentes.
B. Incorreto: A funçã o rgba é a mesma que a funçã o rgb, exceto que você precisa
especificar o valor alph a (opacidade) também.
C. Correto: Usando a funçã o hsl, você pode definir o valor do matiz e, em seguida, ajustar
os valores de saturaçã o e clareamento para derivar outras cores correspondentes.
D. Incorreto: Nã o há funçã o de cor que possa ser usada em uma folha de estilo para gerar
uma cor.
203
A. Incorreto: os caracteres da família de fontes monoespaçadas têm todos a mesma

largura.
B. Correto: Os caracteres da família de fontes com serifa têm serifas (cachos) na parte
superior e inferior deles.
C. Incorreto: os caracteres da família de fontes sans serif nã o têm serifas (cachos) nas
partes superior e inferior.
D. Incorreto: Os caracteres da família de fontes cursivas imitam a escrita.
E. Incorreto: A família de fontes fantasy possui caracteres decorativos.
A. Incorreto: usando está tico, o elemento é exibido onde normalmente apareceria no fluxo

de HTML. Este é o padrã o.
B. Incorreto: usando o relativo, o elemento é exibido em relaçã o a onde normalmente
apareceria no fluxo de HTML.
C. Incorreto: usando absoluto, o elemento é removido do fluxo HTML e posicionado dentro

do primeiro elemento nã o está tico. Embora isso possa significar que o elemento
está posicionado dentro da janela do navegador, nã o é garantido.
D. Correto: usando fixo, o elemento é removido do fluxo HTML e posicionado na janela do

navegador.
CAPÍTULO 5
Mais HTML5
Os capítulos anteriores cobriram muito material que você precisa saber. Muito, mas nã o

todo, o conteú do dos capítulos anteriores existia antes que as tecnologias HTML5
surgissem.
Este capítulo fornece uma transiçã o, movendo você de tó picos antigos para novos. A Liçã o
1, “Pensando na semâ ntica do HTML5 ,” discute muitos aspectos da semâ ntica do HTML5
que sã o principalmente tó picos novos. A Liçã o 2, “Trabalhando com tabelas”, explica
tabelas, que é um tó pico mais antigo, mas relevante, e descreve recursos adicionados em
HTML5.
■■ Liçã o 1: Pensando na semâ ntica do HTML5 205
■■ Liçã o 2: Trabalhando com tabelas 229
Para concluir este capítulo, você deve ter algum conhecimento de desenvolvimento
web. Este capítulo requer o hardware e o software listados na seçã o "Requisitos do
sistema" na Introduçã o do livro .
Lição 1: Pensando na semântica do HTML5
O capítulo anterior cobriu o posicionamento do CSS; todos os exemplos usaram

o elemento < div >.
O elemento < div > tem sido o elemento preferido para usar para posicionar o conteú do ao
criar um layout de pá gina.
Muitos desenvolvedores também usaram o elemento < table >, mas esse elemento é muito
mais difícil de usar, especialmente para manter um site. A liçã o 2 explica
o elemento < tabela >, mas nã o usa um elemento < tabela > para o layout da pá gina.
Esta liçã o fornece uma abordagem diferente para criar um layout de pá gina; ele cobre
elementos semâ nticos e explica por que você deve usá -los.
205
■■ Crie um layout semâ ntico.
■■ Crie um documento HTML5.
■■ Anotar conteú do.
■■ Exibir vá rias formas de conteú do semâ ntico.
Por que marcação semântica?
Um dos problemas com o uso dos elementos < div > e < span > é que eles têm pouco
significado além de “Preciso fazer algo com este conteú do”. Para elementos < div >, você
normalmente precisa posicionar o conteú do na pá gina. Para elementos < span >, você
precisa aplicar formataçã o especial ao conteú do.
Você deve estar se perguntando que tipo de significado os elementos < div > e < span >

podem fornecer. Para elementos < div >, pode ser melhor ter um elemento que represente o
cabeçalho da pá gina e possa ser posicionado. Você pode querer um elemento diferente que
represente o rodapé da pá gina e possa ser posicionado.
Seus usuá rios estã o lendo seu có digo-fonte HTML? Se o elemento < div > é a ferramenta al -
purpose para posicionar elementos, por que usar esses novos elementos semâ nticos?
Estas sã o boas perguntas e pensamentos. Na verdade, se você pesquisar na web

por marcaçõ es emanadas, verá muitas discussõ es, algumas bem acaloradas, sobre esse
tó pico.
Os desenvolvedores têm usado elementos < div > para o layout da pá gina, e o

desenvolvedor normalmente fornece o significado de cada elemento < div > com base em
seu id ou classe CSS. O W3C analisou milhares de pá ginas da web e encontrou os nomes de
id e classes mais comuns. Em vez de começar de novo, o W3C transformou esses nomes em
novos elementos. Exemplos ó bvios sã o os elementos < header > e < footer >.
Seus usuá rios normalmente nã o lêem o có digo-fonte HTML quando navegam para o seu
site, mas muitas má quinas estã o lendo o có digo-fonte HTML com o objetivo de interpretar a
sua pá gina da web.
Os rastreadores da Web estã o constantemente navegando na Internet, lendo pá ginas da

Web e criando conteú do indexado pesquisá vel que pode ser usado para localizar seu
site. Muitas pessoas têm dispositivos Nonvisual Desktop Access (NVDA), que fornecem um
meio alternativo de visualizaçã o, leitura e processamento de pá ginas da web. Alguns
dispositivos NVDA implementam síntese de voz para ler pá ginas da web para pessoas com
deficiência visual ; outros fornecem uma interface semelhante ao Braille para que o usuá rio
possa ler suas pá ginas da web por toque, conforme mostrado na Figura 5-1.
206 CAPÍTULO 5 Mais HTML5
Os dispositivos NVDA precisam de sua ajuda para interpretar o conteú do da sua pá gina da
web corretamente. Eles precisam que você use tags HTM L significativas que definam a
finalidade do conteú do de cada elemento. Isso ajuda os rastreadores a produzir melhores
correspondências para as consultas de pesquisa, e os dispositivos NVDA que leem suas
pá ginas da web para os usuá rios podem fornecer uma experiência mais significativa. Para
obter mais informaçõ es, visite http: // www. nvdaproject.org/ .
FIGURA 5-1 A tela Brail e atualizá vel
Criação de documentos HTML5 semânticos
Agora que você entende a importâ ncia de usar a marcaçã o semâ ntica, pode decidir que
nunca mais usará um elemento < div > ou < span > novamente. No entanto, você encontrará
conteú do que precisa ser estilizado, mas nã o se encaixa claramente no significado de
nenhum elemento semâ ntico. Você pode e deve usar os elementos < div > e < span > nesses
cená rios.
Ao longo deste livro, você encontrará muitas tags HTML5. Ao criar suas pá ginas HTML,
você se deparará com a tarefa à s vezes assustadora de fornecer significado ao seu conteú do
fornecendo tags semâ nticas. Use a semâ ntica com cuidado para usar um elemento apenas
para a finalidade pretendida. Se você precisar de um elemento personalizado, use
a tag < div > ou < span > e adicione um nome de classe ou id que transmita a semâ ntica
desejada. Seja pragmá tico e nã o muito purista.
Criação de um contêiner de layout HTML5
O capítulo anterior mostrou muitos exemplos que demonstram o uso de elementos < div >

para fornecer posicionamento de conteú do em uma pá gina da web. Se você estiver criando
uma pá gina da web para exibir postagens de blog, poderá criar um contêiner de layout para
sua pá gina que se pareça com o exemplo da Figura 5-2.
Les son 1: Pensando na semâ ntica HTML5, CAPÍTULO 5
207
FIGURA 5-2 Um contêiner de layout de site de blog usando elementos < div > Um contêiner
de layout apresenta seus filhos de uma maneira flexível e reutilizá vel. Para o
desenvolvedor, a finalidade dos elementos < div > é fá cil de entender com base na chave id
e classe CSS
Nomes dos termos. Como o navegador pode entender os elementos? Se você quiser que o
navegador dê ao usuá rio a capacidade de se concentrar automaticamente no primeiro
elemento do conteú do principal quando a pá gina for aberta, como você faria isso? Se você
deseja que o navegador forneça ao usuá rio botõ es especiais de início rá pido para os itens
de menu, como você pode fazer isso ?
Usando elementos semâ nticos HTML5, você pode criar um contêiner de layout que usa
elementos que sã o significativos para o desenvolvedor e o navegador. Os seguintes sã o
elementos comuns pelos quais se cria um contêiner de layout HTML5.
■■ < cabeçalho > Define uma seçã o que fornece um cabeçalho. Você pode usar

o elemento < header > na parte superior do seu documento HTML como um cabeçalho de
pá gina. Você também pode usar o
elemento < header > no elemento < article >.
■■ < rodapé > Define uma seçã o que fornece um rodapé. Você pode usar

o elemento < footer > na parte inferior do seu documento HTML como um rodapé de
pá gina. Você também pode usar o elemento < footer > no elemento < article >.
■■ < nav > Define uma seçã o que abriga um bloco dos principais links de navegaçã o.
■■ < lado > Define uma seçã o de conteú do que é separada do conteú do em que

o elemento < lado > está . Isso é tipicamente usado para barras laterais.
■■ < seção > Parte do todo que é tipicamente y nomeado com um elemento interno < h1 >

a < h6 >.

■■ < artigo > Um u nito de conteú do que pode ser independente e pode ser copiado para
outros locais. Uma postagem de blog é um bom exemplo de artigo.
A Figura 5-3 mostra como esses elementos podem ser aplicados para criar um contêiner de
layout.
FIGURA 5-3 Exemplo de contêiner de layout, usando os novos elementos HTML5 Na Figura

5-3, todos os elementos < div > foram substituídos pelos novos elementos HTML5.
Usando o elemento < header >
Os elementos < header > na Figura 5-3 substituem os elementos < div id = ”header” > na

Figura 5-2, o que limpa um pouco a pá gina e fornece um significado de seçã o para
navegadores e outros dispositivos. Nã o confunda o elemento HTML5 < header > que está
dentro de um elemento < body >, que é visível, com o elemento HTML < head > para o
documento HTML, que é invisível.
O elemento < header > deve conter < h1 > a < h6 >, referido como um elemento < hn > de

movimento para frente, contendo seu título visível. Você também pode ter outro conteú do
com seu elemento < header >, como logotipos de empresas e links de navegaçã o, como no
exemplo a seguir .
<cabeçalho>
<h1> Contoso Ltd. </h1>
<img src = "logo.jpg" alt = "Logotipo da empresa" />
<p> Outras informaçõ es complementares </p>
</header>
Você pode ter vá rios elementos < header > em um documento HTML. Sã o mú ltiplos
elementos < header > dentro deste contêiner de layout porque cada elemento < article >

tem um
< cabeçalho >.
Liçã o 1: Pensando na semâ ntica HTML5 CAPÍTULO 5
209
O elemento < header > também pode conter o elemento < hgroup > , que fornece a

capacidade de agrupar um ou mais elementos < hn > em um elemento < header >, conforme
mostrado no exemplo de có digo a seguir.
<cabeçalho>
<hgroup>
<h1> Cabeçalho principal </h1>
<h2> cabeçalho secundá rio </h2>
</hgroup>
<img src = 'logo.jpg' alt = 'Company L ogo' />
</header>
O < hgroup > é um wrapper para um ou mais elementos de cabeçalho

relacionados. O elemento < hgroup > pode estar em um elemento < header >, mas nã o
precisa estar em um elemento < header >. O
< hgroup > é mais comumente usado para legendas e títulos alternativos .

A maior razã o para usar o elemento < hgroup > tem a ver com o uso de ferramentas de
outliner HTML5. Se você tiver um elemento de cabeçalho < h1 > e um elemento de
subcabeçalho < h2 >, e nã o usar o < hgroup > para conectar um cabeçalho e um
subcabeçalho, o esboço trata o < h2 > como um segundo nível, mas você real y deseja que o
subtítulo seja ignorado. O < hgroup > irá expor apenas o primeiro elemento e ocultar os
outros elementos < hn > no < hgroup >.
Se o seu cabeçalho é apenas um < hn > e nã o contém nenhum outro conteú do, você nã o
precisa de um elemento < header >. Assim que você tiver mais de um ú nico < hn >,
como elementos < img > e elementos < p >, envolva seu conteú do em
um elemento < header >. Quando você tem vá rios elementos < hn >, como um cabeçalho e
subcabeçalho, envolva os elementos < hn > no elemento < hgroup >. UMA
O elemento < header > nã o deve ser aninhado dentro de um elemento < header >.
Olhando para a diferença entre a Figura 5-2 e a Figura 5-3, você pode ver que o
O elemento < header > substituiu o elemento < d iv id = ”header” >. Tenha cuidado, porque

por padrã o o elemento < header > em alguns navegadores nã o renderiza como um bloco
retangular como o
o elemento < div > sim. Você pode corrigir isso adicionando a seguinte regra de estilo para
fornecer um comportamento de correspondência.
cabeçalho { display: block;}
Usando o elemento < footer >
Os elementos < footer > na Figura 5-3 substituem os elementos < div id = ”footer” > na

Figura 5-2, o que limpa um pouco a pá gina e fornece um significado de seçã o para
navegadores e outros dispositivos.
O elemento < footer > tipicamente contém informaçõ es sobre a seçã o em que está , como

quem o escreveu, informaçõ es de direitos autorais e links para documentos
relacionados. O elemento < footer > é muito parecido com o elemento < header >, exceto
que ele normalmente pertence à parte inferior de uma seçã o em vez de na parte
superior. Como o elemento < header >, ele pode ser usado muitas vezes em um HTML
documento para fornecer conteú do final para o documento HTML e conteú do final para
artigos e seçõ es dentro do documento HTML. O elemento < footer > nã o deve ser aninhado
dentro de um
elemento < rodapé >. A seguir está um exemplo de um elemento < footer >.
21 0 CAPÍTULO 5 Mais HTML5
<footer>
<ul>
<li> Copyright (C) 2012, Contoso Ltd., todos os direitos reservados </li>
<li> <a href="default.html"> Pá gina inicial </a> </li>
</ul>
</footer>
Usando o elemento < nav >
O elemento < nav > na Figura 5-3 substitui o elemento < div id = ”menu” > na Figura 5-2, que
fornece um significado de seçã o para navegadores e dispositivos. O elemento < nav >
envolve um grupo de links principais que estã o em sua pá gina. Os menus sã o os candidatos
mais comuns para o elemento < nav >.
Como menus, rodapés geralmente têm grupos de links, mas você nã o precisa usar
o elemento < nav > se estiver usando o elemento < footer > , e o elemento < nav > nã o é
necessá rio para links em seu conteú do. Você pode ter muitos elementos < nav > em um
documento HTML. Por exemplo, além do menu que está normalmente no lado esquerdo ou
na parte superior da pá gina, você pode ter um grupo de links acima do rodapé que
direciona para a pró xima pá gina de postagens do blog ou para outras á reas importantes do
seu local.
Pense em um leitor de tela ao implementar o elemento < nav >. Ele estará procurando a

á rea de navegaçã o primá ria na pá gina da web para que possa apresentar esses links ao
usuá rio como itens de menu que possuem links para outras á reas do site atual. Links para
locais externos nã o devem fazer parte do elemento < nav >. Links de rodapé para á reas
secundá rias de seu site também nã o requerem um elemento < nav >.
Usando o elemento < aparte >
O elemento < aparte > na Figura 5-3 substitui o elemento < div id = ”advertise”> na Figura 5-

2, que fornece um significado de seçã o para navegadores e dispositivos.
O elemento < aparte > envolve o conteú do secundá rio quando usado para barras

laterais. Em muitos casos, é para lá que vã o os anú ncios e outros conteú dos relacionados ao
site. Além disso, quando o elemento < aparte > está em um artigo, ele deve conter conteú do
tangencialmente relacionado ao conteú do do artigo. O uso do elemento < aparte > difere
com base no contexto, conforme mostrado no exemplo a seguir.
<body>
<cabeçalho>
<h1> Blogando para se divertir </h1>

</header>
<artigo>
<h1> Blog do dia </h1>
<p> Esta é a postagem do blog de hoje. La, la, la, la, la,
la, la, la, la, la, la </p>
<ao lado>
<! - Dentro do artigo, portanto , está relacionado ao artigo ->
<h1> Do que se trata? </h1>
<p> Este artigo fala sobre la, la ... </p>
</aside>
211
</article>
<ao lado>
<! - Fora do artigo, portanto, está relacionado aos sites ->
<h2> Publicidade em blogs </h2>
<p> Você também pode ter seu pró prio blog ... </p>
</aside>
</body>
Os dois significados fazem sentido quando você considera que um artigo deve ser uma
unidade completa que pode ser compartilhada.
Usando funções
Na Figura 5-3, o elemento < aparte > e o elemento < div > implementam o atributo role,

especificado pela Web Accessible Initiative (WAI), que especifica o conjunto Accessible
Rich Internet Applications (ARIA), denominado WAI-ARIA.
WAI-ARIA define a hierarquia de classes de papéis e como os papéis sã o usados para

fornecer um significado específico aos leitores de tela para fins de acessibilidade. Existem
muitas classes de funçã o pai e classes de funçã o filha que herdam de classes de funçã o. Uma
dessas classes de funçã o pai é chamada de classe de funçã o de ponto de referência , que
representa regiõ es da pá gina que pretendem ser pontos de referência de navegaçã o. A
seguir estã o as classes filhas da classe de funçã o de referência.
Chave
Termos
■■ aplicativo Uma á rea declarada como um aplicativo da web em oposiçã o a um

documento da web .
■■ banner Uma á rea em uma pá gina da web que possui conteú do específico do site, como
nome e logotipo do site, em vez de conteú do específico da pá gina; má ximo de um por
pá gina da web, normalmente conteú do de cabeçalho.
■■ complementar Uma á rea em uma pá gina da web que complementa a pá gina, mas ainda
tem significado se separada da pá gina.
■■ contentinfo Uma á rea que contém informaçõ es sobre o documento pai, como avisos de
direitos autorais e links; má ximo de um por pá gina da web, normalmente conteú do de
rodapé.
■■ formulário Uma á rea em uma pá gina da web que contém uma coleçã o de controles de
entrada para coletar dados a serem enviados ao servidor da web; os formulá rios de
pesquisa devem usar a funçã o de pesquisa.
■■ principal Uma á rea que contém o conteú do principal do documento; no má ximo um

por pá gina da web.
■■ navegação Uma á rea que contém links de navegaçã o.
■■ pesquisa Uma á rea em uma pá gina da web que contém uma coleçã o de controles de
entrada para inserir e exibir informaçõ es de pesquisa.
Você pode usar essas funçõ es para fornecer significado a uma á rea da pá gina da web, mas
os novos elementos HTML5 já fornecem significado. No entanto, os elementos HTML5 nã o
fornecem um novo elemento para identificar o conteú do principal da pá gina da web. Em
vez disso, todo o conteú do conhecido nã o é o conteú do principal, e o que resta deve ser o
conteú do principal. Além disso, o elemento < aparte > é usado como uma barra lateral, e
você pode querer fornecer mais significado. Por que nã o usar a funçã o WAI-ARIA para
fornecer significado a outros desenvolvedores e dispositivos auxiliares? Isso é ilustrado na
Figura 5-3.
Controlando o formato usando o elemento < div > Nã o se esqueça de que

o elemento < div > pode ser colocado ao redor do conteú do, permitindo que você controle
seu formato. O elemento < div > é invisível e nã o tem significado, portanto, ao usar HTML5,
geralmente é melhor usar um elemento semâ ntico, como artigo ou seçã o, para fornecer
contexto que tenha significado. Se você só precisa de formataçã o, o uso do elemento < div >
é perfeito.
Adicionar pausas temáticas
Use o elemento < hr / > para adicionar uma pausa temá tica. É um elemento vazio, portanto
nã o pode ter nenhum conteú do. Você pode usar o elemento < hr / > para fornecer uma
pausa temá tica quando houver uma mudança de cena em uma histó ria ou para denotar
uma transiçã o para outro tó pico dentro de uma seçã o de um livro de referência.
Anotando conteúdo
Ao anotar conteú do usando elementos HTML5, esteja ciente de que os elementos < b > e

< i > que existem desde o início ainda estã o disponíveis, mas agora têm um novo
significado. Esta seçã o descreve o uso dos elementos < b > e < i > e muitos outros elementos
que podem ser usados para anotar o conteú do.
Usando o elemento < b >
O elemento < b > foi usado para produzir texto em negrito, mas agora os elementos devem
ter significado, nã o estilo. Para manter o elemento < b >, mas também ter elementos
semâ nticos, o significado precisava ser alterado.
De acordo com o W3C, o elemento < b > representa uma extensã o de texto para a qual a
atençã o está sendo chamada para fins utilitá rios, sem transmitir qualquer importâ ncia
extra e sem implicaçã o de uma voz ou humor alternativo, como palavras-chave em um
resumo de documento ; nomes de produtos em uma revisã o; palavras acioná veis em
software interativo baseado em texto; ou um artigo lede.
Portanto, você pode aplicar qualquer estilo que desejar ao elemento < b >, embora manter
o estilo negrito faça mais sentido.
O elemento < b > é o elemento de ú ltimo recurso porque os títulos devem ser denotados
com o elemento < hn >, o texto enfatizado deve ser denotado com o elemento < em >, o
texto importante deve ser denotado com o elemento < strong > e marcado ou o texto
destacado deve usar o elemento < mark > . Evite usar o elemento < b >, exceto para denotar
nomes de produtos em uma resenha, palavras-chave em uma extraçã o de documento ou
uma lede de artigo, conforme mostrado no exemplo a seguir.
<artigo>
<h1> Aná lise de PolyWannaWidget </h1>
O <b> PolyWannaWidget </ b> é o melhor pro duto
para usar para criar biscoitos do nada
diferente de um martelo.
</article>
213
Usando o elemento < strong > Intimamente relacionado ao elemento < b > está o

elemento < strong >, que representa uma forte importâ ncia para seu conteú do. Você pode
mostrar a importâ ncia relativa aninhando os elementos < strong > dentro
elementos < fortes >. Observe que alterar a importâ ncia de parte do texto em uma frase nã o

altera o significado da frase. A seguir está um exemplo que responde à pergunta: “Devo
virar à esquerda?”
Você precisa virar à <strong> direita </strong>.
</p>
Observe que os estilos padrã o para os elementos < strong > e < b > têm a mesma aparência.
Usando o elemento < i >
O elemento < i > foi usado para produzir texto i tá lico, mas como o elemento < b >, o

elemento deve fornecer significado, nã o estilo.
De acordo com o W3C, o elemento < i > representa um intervalo de texto que está em uma
voz ou humor alternativo ou de outra forma é deslocado da prosa normal de uma maneira
que indica uma qualidade diferente do texto, como uma designaçã o taxonô mica, um termo
técnico , uma frase idiomá tica de outro idioma, um pensamento ou um nome de navio em
textos ocidentais.
Isso significa que você pode aplicar qualquer estilo ao elemento < i >, embora, como
o elemento < b >, você provavelmente deva manter o estilo padrã o.
O elemento < em >
Use o elemento < em > para ênfase enfá tica. Use-o para designar o texto que você pronuncia
de forma diferente, com ênfase. A seguir está um exemplo que responde à pergunta: “Você
consegue encontrar um desenvolvedor?”
Eu <em> sou </em> um desenvolvedor.
</p>
Observe que os estilos padrã o para os elementos < em > e < i > parecem iguais.
Usando o elemento < abbr > para abreviações e acrônimos Em versõ es anteriores do

HTML, você poderia indicar um acrô nimo usando o elemento < acronym >, mas no HTML5,
o elemento < acronym > é obsoleto. Use o elemento < abbr > para indicar uma abreviatura
ou acrô nimo e use o atributo title para fornecer o texto completo.
O elemento < abbr > é um elemento embutido e pode ser usado com < strong > ou

outros elementos embutidos conforme necessá rio. O seguinte é um exemplo de denotar
uma abreviatura e acrô nimo usando o elemento < abbr >.
O <abbr title = 'radio detecçã o e alcance'> radar </abbr> deve ser reparado <abbr title = 'o
mais breve possível'> ASAP </abbr> 214 CAPÍTULO 5 Mais HTML5
da Contoso, <abbr title = 'Incorporated'> Inc. </abbr>

</p>
Observe que o título nã o é obrigató rio, especialmente quando você sabe que todos
conhecerã o o significado das abreviaçõ es e acrô nimos.
O elemento < address >
Use o elemento < addr ess > para definir as informaçõ es de contato do autor / proprietá rio
de um documento. Você pode incluir endereço de e-mail, endereço postal ou qualquer
endereço de contato que faça referência ao autor / proprietá rio do documento.
Tenha o cuidado de usar o elemento < address > apenas ao se referir ao autor / proprietá rio

do documento. Nã o o use para informaçõ es de endereço arbitrá rio em sua pá gina da
web. Por exemplo, se você estiver exibindo o endereço do seu cliente em uma pá gina da
web, ele nã o deve estar contido em um
elemento < endereço >.
A seguir está um exemplo do uso do elemento < address > no rodapé de uma pá gina da web.
<footer>
Copyright (C) 2012
<endereço>
Contoso, Inc.
<a href="email:WebMaster@Contoso.com">
WebMaster@Contoso.com
</a>
</address>
</footer>
Citações e citações
Quando chegar a hora de começar a cotar, você pode usar o elemento < blockquote > para
criar uma cotaçã o longa e contínua e o elemento < q > para uma cotaçã o embutida. Ambos
os elementos têm um atributo cite que nomeia o trabalho de origem da citaçã o.
O elemento < blockquote > é um elemento de nível de bloco; ele pode conter quase tudo,

incluindo cabeçalhos, rodapés, tabelas e pará grafos. O elemento < blockquote > é uma raiz
de seccionamento , o que significa que um elemento y < hn > dentro do elemento
< blockquote > nã o será incluído. Key
Termos em um esboço do documento HTML. Além disso, um ú nico pará grafo nã o precisa
ser incluído em um elemento < p >.
Os elementos < blockquote > e < q > possuem um atributo cite que nomeia o trabalho de

origem, mas como um atributo, sã o dados ocultos. Uma abordagem melhor é usar
o elemento < cite >, que você pode colocar no elemento < footer > de seus elementos
< blockquote > e < q >. A citaçã o deve sempre conter o nome da obra, nã o o nome do
autor. A seguir está um exemplo do elemento < blockquote >.
<blockquote>
Ó Romeu, Romeu, por que és Romeo? <br />
Negar teu pai e recusar teu nome; <br />
215
Ou se nã o quiseres, jura meu amor <br /> E nã o serei mais um Capuleto. <br />
<footer>
por William Shakespeare,
<cite> Romeu e Julieta </cite> Ato 2, cena 2
</p>
</footer>
</blockquote>
O elemento < cite > contém apenas o nome da obra, nã o o autor ou a localizaçã o dentro da

obra.
Quando você quiser adicionar uma aspa embutida, use o elemento < q > em vez de usar
aspas. O navegador irá inserir as aspas para você. Você pode adicionar
o atributo cite ao elemento < q >, que deve conter apenas o nome da obra. Além disso,
o elemento < q > pode ser aninhado em outro elemento < q >. O seguinte é um exemplo
do elemento < q >.
p
John disse ao pú blico <q> Sally estava chorando quando
gritou <q> Deixe-me em paz </q> e entã o ela fugiu. </q>
</p>
Este exemplo renderiza a primeira citaçã o usando aspas duplas e a segunda citaçã o usando
aspas simples.
Documentando código usando os elementos < code > e < samp > Quando você

documenta có digo e exemplos de có digo em seu documento HTML, os elementos < code > e
< samp > fornecem um meio para adicionar significado semâ ntico ao seu có digo e à saída
do có digo.
Quando você quiser exibir o có digo-fonte de qualquer tipo no documento HTML, use
o elemento < code >, conforme mostrado no exemplo a seguir.
<code class = "keepWhiteSpace">
diga olá ('mamã e');
funçã o dizer olá (nome)
alert ('Olá ' + nome + '!');
</code>
Depois de executar o có digo de amostra, você pode documentar a saída do có digo usando o
elemento < samp >, conforme mostrado no exemplo a seguir.
<samp class = "keepWhiteSpace">
Olá mã e!
</samp>
Lembre-se de que os elementos < code > e < samp > fornecem dados semâ nticos ao HTML,
mas nã o preservam o espaço em branco. Por exemplo, o có digo de amostra anterior irá 216
CAPÍTULO 5 Mais HTML5
sã o exibidos em uma linha, mas a classe keepWhiteSpace preserva o espaço em branco

usando a seguinte regra de estilo.
.keepWhiteSpac e {
espaço em branco: pré;
Esta regra de estilo nã o é compatível com todos os navegadores, entã o você pode querer
usar o elemento < pre > para evitar a normalizaçã o do espaço em branco, conforme
descrito a seguir.
Exibindo conteúdo pré-formatado usando o elemento < pre > O navegador

normalmente normaliza o conteú do HTML removendo espaços em branco extras, avanços
de linha e pará grafos da pá gina renderizada. Freqü entemente, você precisará fornecer
blocos de texto onde deseja manter o formato existente quando for renderizado. Use
o elemento < pre > para evitar a normalizaçã o do documento HTML, conforme mostrado no
exemplo a seguir.
<pre>
<code>
diga olá ('mamã e');
funçã o dizer olá (nome)
alert ('Olá ' + nome + '!');
</code>
</pre>
Neste exemplo, o elemento < code > fornece significado semâ ntico para o conteú do, e o
O elemento < pre > impede a normalizaçã o do espaço em branco.
Usando o elemento < var >
O elemento < var > denota uma variá vel em uma equaçã o matemá tica, conforme mostrado
no exemplo a seguir.
A resistência <var> r </var> de um pedaço de fio é igual à voltagem <var> v </var>

dividida pela corrente <var> i </var>.
</p>
Usando as < br / > e < wbr / > elementos O < br / > e < wbr / elementos> sã o elementos
nulos, o que significa que eles nã o podem ter qualquer conteú do e fornecer apenas uma
quebra de linha no documento HTML.
O elemento <br /> fornece uma quebra de linha imediata, que continua o fluxo do

documento na pró xima linha do navegador.
O elemento < wbr / >, que é uma quebra de palavra , fornece uma indicaçã o ao navegador
de que ele pode inserir uma quebra de linha neste local. O navegador decide se deve inserir
a quebra.
2 17
Usando o elemento < dfn > para definir um termo O elemento < dfn > denota a definiçã o

de um termo, também conhecido como a instâ ncia definidora do termo. O elemento < dfn >
pode conter um atributo de título, que, se existir, deve conter o termo que está sendo
definido.
Se o elemento < dfn > contém exatamente um nó filho de elemento e nenhum nó de texto

filho, e esse elemento filho é um elemento < abbr > com um atributo de título, esse atributo
é o termo que está sendo definido.
Considere o seguinte exemplo que usa o elemento < dfn > com o elemento < abbr > para

fornecer uma definiçã o.
Um veículo motorizado tem um <dfn id = "vin">

<abbr title = "Vehicle Identification Number"> VIN </abbr> </dfn> que é ú nico. Ao longo
dos anos, o
<abbr title = "Vehicle Identification Number"> VIN </abbr> teve formatos diferentes,
com base no fabricante do veículo.
</p>
Nos Estados Unidos, o <a href="#vin">
<abbr title = "Vehicle Identification Number"> VIN </abbr> </a> foi padronizado para um
formato de 17 caracteres onde
o décimo personagem do
<abbr t itle = "Vehicle Identification Number"> VIN </abbr> representa o ano do veículo.
</p>
Neste exemplo, o elemento < dfn > é usado uma vez onde a primeira instâ ncia do VIN está
sendo apresentada. Dentro do elemento < dfn > está um elemento < abbr >, que fornece o
significado de VIN em seu atributo title. O estilo padrã o do elemento < dfn > é texto em
itá lico, conforme mostrado na Figura 5-4. O uso do < a > elemento fornece um link para a
definiçã o.
FIGURA 5-4 O elemento < dfn > deixando seu texto em itá lico por padrã o 218 CAPÍTULO
5 Mais HTML5
Trabalhando com figuras
Uma figura é uma unidade de conteú do que pode ter uma legenda e é referenciada no
documento principal. Use o elemento < figura > para denotar uma figura que pode ser uma
ou mais fotos, uma ou chave
Termos mais desenhos, uma ou mais ilustraçõ es ou outro conteú do denominado
unidade. Use o
< figcaption > elemento para denotar uma legenda opcional.
Ao usar o elemento < figura >, lembre-se de que a figura está relacionada ao conteú do

principal da pá gina, e a localizaçã o da figura nã o é importante. Isso é diferente
do elemento < aparte >, que está mais relacionado ao site do que ao documento da
pá gina. Se o posicionamento for importante, nã o use o elemento < figure >; use o elemento
< di v >.
O exemplo a seguir mostra o uso dos elementos < figure > e < figcaption > (em negrito) para
exibir uma imagem que é referenciada no documento principal da pá gina web.
<div role = "main">
A manteiga de amendoim e a geleia
O sanduíche <abbr title = "peanut but ter and jelly"> PB&J </abbr> tem sido um alimento
bá sico para muitas famílias
devido aos seus benefícios para a saú de, seu custo e seu
sabor maravilhoso.
</p>
Ao montar um sanduíche de manteiga de amendoim e geleia,
você precisa reunir todos os materiais necessá rios como
mostrado na <a href="#figure1"> Figura 1 </a>.
</p>
<figure id = "figure1">
<img src = "/ pbj.jpg" alt = "requisitos de manteiga de amendoim e geleia" />
<figcaption> Figura 1 Os requisitos do sanduíche PB&J. </figcaption>
</figure>
</div>
Trabalhando com os elementos < resumo > e < detalhes > Use o elemento < detalhes >
com o elemento < resumo > para criar conteú do de detalhes expansíveis sob o resumo. Os
elementos < detalhes > e < resumo > funcionam atualmente apenas com o navegador Google
Chrome, mas espera-se mais suporte.
No elemento < detalhes >, aninhe um elemento < resumo > que contém o conteú do que

sempre será exibido. O conteú do de detalhes é colocado dentro
do elemento < detalhes > seguindo o
elemento < resumo >. Quando a pá gina é renderizada, apenas o conteú do

do elemento < resumo > é exibido. Clicar no conteú do do resumo faz com que o conteú do
dos detalhes seja exibido.
Clicar novamente faz com que o conteú do de detalhes seja ocultado.
<div role = "main">
<detalhes>
<summary> Faça um sanduíche de pasta de amendoim com geleia </summary>
A manteiga de amendoim e a geleia
<abbr title = "peanut butter and jelly"> PB&J </abbr> Liçã o 1: Pensando na semâ ntica
HTML5 CAPÍTULO 5
219
sanduíche tem sido um alimento bá sico de muitas famílias americanas
devido aos seus benefícios para a saú de, seu custo e seu
sabor maravilhoso.
</p>
p
Ao montar um sanduíche de manteiga de amendoim e geleia,
você precisa reunir todos os materiais necessá rios como
mostrado na <a href="#figure1"> Figura 1 </a>.
</p>
<figure id = "figure1">
<img src = "/ pbj.jpg" alt = "requisitos de manteiga de amendoim e geleia" />
<fi gcaption> Os requisitos do sanduíche PB&J. </figcaption>
</figure>
</details>
</div>
Neste exemplo, o conteú do do exemplo anterior é colocado no elemento < detalhes > e o
O elemento < resumo > contém uma descriçã o geral do conteú do. Clicar no conteú do do

resumo alterna a exibiçã o dos detalhes.
Compreender outras anotações
Além dos elementos de anotaçã o já discutidos, a seguir está uma lista de anotaçõ es que
você pode usar em seu documento HTML.
■■ < s > Denota texto riscado, texto que nã o é mais vá lido.
■■ < u > Desloca uma extensã o de texto sem sugerir uma diferença de importâ ncia. O
comportamento padrã o é sublinhar o texto, mas isso poderia ser melhor acomodado
usando uma tag span com o estilo apropriado.
■■ < mark > Marca, ou destaca, uma extensã o de texto.
■■ < ins > Indica o texto inserido.
■■ < del > Indica o texto excluído.
■■ < pequeno > Indica letras pequenas.
■■ < sub > Indica subscrito.
■■ < sup > indica sobrescrito.
■■ < hora > indica uma hora do dia ou uma data no texto.
■■ < kbd > Indica a entrada do usuá rio.
Usando elementos de linguagem
Pode ser necessá rio fornecer conteú do que use caracteres de origem chinesa, que sã o
chamados de kanji . Esses caracteres sã o usados nos idiomas chinês, japonês e coreano
(CJK). Para indicar a pronú ncia do kanji, você pode usar pequenos caracteres fonéticos, que
sã o comumente chamados de tecla
Termos rubi ou furigana . O termo “rubi” tem raízes inglesas de quando os impressores

usavam este termo para se referir a pequenos tipos usados para este propó sito.
Use o elemento < rubi > para colocar uma notaçã o acima ou à direita dos caracteres. Use o
Elementos < rt > e < rp > com o elemento < ruby > para colocar a notaçã o ou para colocar
parênteses ao redor do rubi. Use o elemento < bdo > para definir a direçã o do texto e use o
elemento < bdi > para isolar um bloco de texto para definir a direçã o do texto.
HTML5 define vá rios elementos semâ nticos que podem ser usados para criar listas
ordenadas, nã o ordenadas e descritivas. Todas as listas possuem itens de lista, que sã o
implementados usando o elemento < li >. Todas as listas suportam aninhamento de
listas. Esta seçã o descreve cada uma dessas listas.
Listas ordenadas
Uma lista ordenada é uma lista numerada. Use o elemento < ol > quando desejar a

numeraçã o automá tica dos itens da lista. O exemplo a seguir mostra três funçõ es favoritas .
Chave
Termos <h3> Fruta favorita </h3>
<ol>
<li> Maçã s </li>
<li> laranjas </li>
<li> uvas </li>
</ol>
Essa lista é automaticamente renderizada com nú meros ao lado de cada item da lista de
frutas, conforme mostrado na Figura 5-5.
FIGURA 5-5 A lista ordenada numerando seus itens automaticamente. O elemento < ol >

suporta os seguintes atributos.
■■ invertido Inverte a ordem dos nú meros para decrescente em vez de crescente
■■ start Define o nú mero inicial
■■ tipo Define o tipo de lista; pode ser “1”, “A”, “a” ou “I”
O atributo reverso atualmente nã o funciona na maioria dos navegadores, mas você pode
encontrar bibliotecas JavaScript, como modernizr.j s , que emulam essa funcionalidade até
que o recurso seja implementado pelo fabricante do navegador. Mesmo se você definir o
tipo para um valor como "A", Liçã o 1: Pensando na semâ ntica HTML5, CAPÍTULO 5
221
você ainda define o início como um nú mero. O seguinte é um exemplo dos atributos type e
start, usando a lista de frutas favoritas.
<h3> Fruta favorita </h3>
<ol type = "A" start = "6">
<li> Maçã s </li>
<li> laranjas </li>
<li> uvas </li>
</ol>
A Figura 5-6 mostra a lista renderizada. O valor inicial de “6” se traduz na letra “F” quando
renderizado.
FIGURA 5-6 A lista ordenada com seu tipo e conjunto de atributos iniciais Listas não
ordenadas
Uma lista nã o ordenada nã o é numerada automaticamente. Use o elemento < ul > para criar

uma lista nã o ordenada de itens. Quando a lista nã o ordenada é renderizada, ela produz
pontos altos antes de cada item da lista, como Chave
Termos mostrados no exemplo a seguir que descreve os itens necessá rios para reparar um
pneu furado.
<h3> Itens necessá rios para trocar um pneu furado </h3>
<ul>
<li> Um macaco </li>
<li> Uma chave inglesa com um soquete em uma extremidade e uma alavanca na outra
</li>
<li> Um pneu sobressalente </li>
</ul>
Cada item é renderizado com um bul et, e onde o texto quebra para a pró xima linha, o texto
se alinha adequadamente com o texto da linha anterior, conforme mostrado na Figura 5-7.
FIGURA 5-7 A lista desordenada renderizando cada item da lista como um conjunto
de listas de descrição
Use o elemento < dl > para criar uma lista de descriçã o, que consiste em zero ou mais
agrupamentos de descriçã o de termos, também conhecidos como pares nome-valor ou
valor-chave. Cada agrupamento associa um ou mais termos ou nomes, que sã o o conteú do
dos elementos < dt >, com uma ou mais descriçõ es ou valores, que sã o o conteú do
dos elementos < dd >, conforme mostrado no exemplo a seguir.
<h3> Veículos comuns </h3>
<dl>
<dt> Barco </dt>
<dd> Um pequeno veículo impulsionado na á gua por remos, velas ou um motor </dd>
<dt> Carro </dt>

<dd> Um automó vel </dd>
<dd> Um veículo de passageiros projetado para operar em estradas comuns e

normalmente com quatro rodas e um motor </dd>
<dt> Bicicleta </dt>
<dt> Bicicleta </dt>
<dd> Um veículo com duas rodas em tandem, normalmente propulsionado por pedais
conectados à roda traseira por uma corrente e tendo guidã o
para direçã o e um assento semelhante a uma sela </dd>
</dl>
Neste exemplo, o barco está associado a uma ú nica definiçã o. O carro está associado a duas
definiçõ es. A bicicleta e a bicicleta estã o ambas associadas à mesma definiçã o. A saída
renderizada é mostrada na Figura 5-8.
223
FIGURA 5 -8 A lista de definiçõ es com seus termos e definiçõ es Listas personalizadas
Você pode criar listas personalizadas usando os estilos CSS3 e pode usar o contador CSS3 e
os seletores: before e: after. Considere a lista a seguir, que contém listas aninhadas.
<ul c lass = "level1">
<li> Automó veis
<ul class = "level2">
<li> BMW
<li> X1 </li>
<li> X3 </li>
<li> Z4 </li>
</ul>
</li>
<li> Chevrolet
<li> cobalto </li>
<li> Impala </li>
<li> volt </li>
</ul>
</li>
<li> Ford
<li> Edge </li>
<li> Foco </li>
<li> Mustang </li>
</ul>
</li>

</ul>
</li>
<li> barcos
<li> Sea Ray </li>
<li> cobalto </li>
</ul>
</li>
</ul>
A Figura 5-9 mostra a lista renderizada com os estilos padrã o. As formas do bul et mudam
com cada nível de aninhamento, e cada nível de aninhamento é automaticamente
indentado.
FIGURA 5-9 A saída renderizada com estilos padrã o
Além de estilos relacionados a fontes e estilos relacionados a cores, também existem estilos

relacionados a listas que você pode alterar para alterar a apresentaçã o de sua lista. No
exemplo renderizado, a propriedade CSS do tipo de lista de primeiro nível é definida
como disc , que é exibida como um círculo preenchido. O tipo de estilo de lista de segundo
nível é definido como círculo e o tipo de estilo de lista de terceiro nível é definido
como quadrado . Além disso, cada propriedade CSS list-style-position dos níveis é definida
como fora , o que significa que, quando o texto quebra, o primeiro caractere da pró xima
linha será alinhado com o primeiro caractere da linha anterior. Se você definir a posiçã o do
estilo de lista para dentro, o primeiro caractere da pró xima linha se alinhará com o símbolo
de bul et da primeira linha.
No Visual Studio Express 2012 for Web, você pode abrir o arquivo CSS e inserir o seletor da
seguinte maneira.
li {
225
Depois que o seletor for adicionado, você pode clicar com o botã o direito do mouse na
regra de estilo e escolher Construir Estilo para exibir um menu de estilos a serem
aplicados. Clicar em Lista no menu Categoria exibe os estilos que podem ser aplicados a
uma lista. A Figura 5-10 mostra a janela Modificar Estilo.
Figura 5-10 A janela Modificar estilo mostrando configuraçõ es de estilo baseada em menu
usando a janela Modificar estilo, você pode facilmente substituir a configuraçã o padrã o
da lista de estilo do tipo e list-style-position . Além disso, você pode fornecer
uma imagem em estilo de lista quando os símbolos da lâ mpada nã o forem o que você
deseja. Neste exemplo, defina o estilo do item de lista como nenhum e clique em OK. A folha
de estilo agora contém a regra de estilo modificada conforme a seguir .
li {
tipo de estilo de lista: nenhum;
Tente renderizar a pá gina da web e observe que nenhum bul ets é exibido. Experimente
muitas das outras configuraçõ es para ver como elas sã o renderizadas.
Em vez de usar a janela Modificar estilo, você pode digitar as regras de estilo. Quando você
está digitando as regras, o IntelliSense ajuda a reduzir o nú mero de pressionamentos de
tecla. Quando o menu IntelliSense aparecer, você pode selecionar um item e pressionar a
tecla tab. No arquivo CSS, insira as seguintes regras de estilo.
corpo {
reset do contador: seçã o;
ul.level1> li: antes de {
contra-incremento: seçã o;
conteú do: "Seçã o" contador (seçã o) ".";
reset do contador: subseçã o;
ul.level2> li: antes de {
contra-incremento: subseçã o;
conteú do: contador (seçã o) "(" contador (subseçã o, alfa inferior) ") -";
}
ul.level1> li, ul.level2> li {
tipo de estilo de lista: nenhum;
ul.level3> li {
tipo de estilo de lista: disco;
A seguir está uma descriçã o de cada uma das regras de estilo neste exemplo.
■■ A primeira regra de estilo redefine um contador de seçã o definido pelo usuá rio para um
quando o elemento < body > é estilizado. O contador de seçã o será definido como um
somente depois que a pá gina for carregada, mas será incrementado em uma regra de estilo
diferente.
■■ A segunda regra de estilo é executada quando um elemento < li > que é filho de

um elemento < ul > com uma classe CSS de nível1 é renderizado. Ele aumenta o contador de
seçã o em um. Em seguida, ele insere a propriedade de conteú do antes do elemento < li >,
que produz a "Seçã o"
string, seguida pelo valor do contador de seçã o e depois pela ”. “
fragmento. Finalmente, a regra redefine um contador de subseçã o definido pelo usuá rio

para um. Esta regra de estilo é executada duas vezes, antes de Automó veis e antes de
Barcos.
■■ A terceira regra de estilo é executada quando um elemento < li > que é filho de

um elemento < ul > com uma classe CSS de nível2 é renderizado. Ele aumenta o contador da
subseçã o em um. Em seguida, insere a propriedade de conteú do antes
do elemento < li >, que produz o valor do contador de seçã o, seguido pela string “(“ e depois
pelo valor do contador de subseçã o, mas este valor é convertido para alfa minú sculo Apó s a
subseçã o ser renderizada, a string “) -“ é renderizada . Esta regra de estilo é executada
cinco vezes.
■■ A quarta regra de estilo define o tipo de estilo de lista como nenhum para itens de lista
de nível1 e nível2.
■■ A quinta regra de estilo define a regra de estilo de lista para o disco para itens de lista de
nível3.
A saída renderizada é mostrada na Figura 5-11. Isso deve dar uma boa ideia dos recursos
do HTML5 ao trabalhar com listas.
227
FIGURA 5-11 A lista personalizada renderizada
Resumo da lição
■■ A marcaçã o semâ ntica fornece significado aos elementos HTML para auxiliar os
dispositivos que consomem conteú do HTML.
■■ Dispositivos Nonvisual Desktop Access (NVDA) leem e processam pá ginas da web.
■■ Conteú do que precisa ser estilizado, mas nã o se ajusta claramente ao significado de

nenhum elemento semâ ntico, pode ser estilizado envolvendo-o com um elemento < div >
ou < span >.
■■ O elemento < header > define uma seçã o que fornece um
cabeçalho. O elemento < footer > define uma seçã o que fornece um
rodapé. O elemento < nav > define uma seçã o que abriga um bloco dos principais links de
navegaçã o. O elemento < lado > define uma seçã o de conteú do que é separada do conteú do
em que o elemento < lado > está . O elemento < seção > define parte do todo e é tipicamente
y nomeado com um elemento interno < h1 > a < h6 > .
■■ O elemento < article > é uma unidade de conteú do que pode ser independente e ser

copiada para outros locais. Uma postagem de blog é um bom exemplo de um artigo .
■■ A Web Accessible Initiative (WAI) especifica o conjunto Accessible Rich Internet

Applications (ARIA), que é denominado WAI-ARIA. Use o atributo de funçã o WAI-ARIA
para fornecer significado aos elementos que nã o sã o definidos semâ nticamente.
■■ No lugar do elemento < b >, use o elemento < strong >. No lugar do elemento < i >, use

o elemento < em >.
Revisão da aula
1. Você está criando uma pá gina da Web que exibirá histó rias curtas e deseja que as
histó rias possam ser compartilhadas em outros sites. Com qual elemento cada histó ria
deve ser envolvida?
A. < seção >
B. < pré >
C. < aparte >
D. < artigo >
2. Você deseja indicar um item importante em seu texto de conteú do. Qual elemento você
usa?
A. < b >
B. < em >
C. < forte >
D. < i >
3. Você deseja identificar o autor das pá ginas da web em seu site, fornecendo o nome do
autor e o endereço de e-mail no rodapé de cada pá gina. Qual é a maneira correta de fazer
isso?
A. < endereço > <a href=”email:author@Contoso.com”> Nome do autor < / a > < /

endereço > B. < contato > <a href=”email:author@Contoso.com”> Nome do autor < / a > < /
contact > C. < autor > <a href=”email:author@Contoso.com”> Nome do autor < / a > < /
autor > D. < nome > <a href = ”e-mail: autor @ Contoso.com ”> Nome do Autor < / a > < /
name > Lição 2: Trabalhando com tabelas
As tabelas sã o a forma de organizar os dados do seu documento HTML em linhas e

colunas. Uma tabela exibe uma grade bidimensional de dados. Use o elemento < table > com
o elemento < tr > para criar linhas da tabela e o elemento < td > para criar detalhes da
tabela, que sã o mais conhecidos como células da tabela . Esta liçã o discute tabelas em
detalhes.
■■ Crie uma tabela bá sica.
■■ Adicionar um cabeçalho e rodapé a uma tabela.
■■ Crie uma mesa irregular.
■■ Acesse os dados da coluna.
■■ Aplicar regras de estilo aos elementos da tabela.
Liçã o 2: Trabalhando com tabelas CAPÍTULO 5
229
As tabelas HTML sã o poderosas e, devido à sua flexibilidade, muitas vezes sã o mal

utilizadas. É importante entender a implementaçã o adequada da tabela e onde é
inadequado implementar uma tabela.
Ao longo dos anos, muitos desenvolvedores usaram o elemento < table > para criar um

layout de pá gina.
Aqui estã o alguns motivos pelos quais você nã o deve usar o elemento < table > para criar
um layout de pá gina.
■■ A tabela nã o será renderizada até que a tag </ table > seja lida. As pá ginas da Web
devem ser escritas com marcaçã o semâ ntica e o elemento principal < div role = ”main” >
deve estar o mais pró ximo possível do topo do documento HTML. O elemento < div >
renderizará seu conteú do conforme o navegador o recebe. Isso permite que o usuá rio leia o
conteú do à medida que ele é carregado no navegador.
■■ Usar uma tabela força você a uma estrutura HTML profundamente aninhada que é
difícil de manter.
■■ Usar uma mesa confunde os dispositivos de acessibilidade.
Lembre-se de que usar um elemento < table > para qualquer coisa diferente de layout

tabular de dados será muito mais difícil de manter do que usar elementos < div > com
posicionamento.
Criação de uma tabela básica
Você pode criar uma tabela bá sica usando o elemento < table > para denotar a
tabela. Dentro de
elemento < tabela >, você pode adicionar um elemento < tr > para cada linha que você
precisa. Dentro de cada elemento < tr >, adicione elementos < td > para cada célula que
você precisa. O que se segue é uma tabela simples de informaçõ es do veículo.
<table>
<tr>
<td> 1957 </td>
<td> Ford </td>
<td> Thunderbird </td>
</tr>
<tr>
<td> 1958 </td>
<td> Chevrolet </td>
<td> Impala </td>
</tr>
<tr>
<td> 2012 </td>
<td> BMW </td>
<td> Z4 </td>
</tr>
<tr>
<td> 2003 </td>
<td> Mazda </td>
<td> Miata </td>
</tr>
</table>
A Figura 5-12 mostra a saída renderizada como quatro linhas com três colunas em cada
linha. Nã o é ó bvio que haja colunas em cada linha, no entanto, e nã o há nenhum
aquecedor ou rodapé.
Você também pode querer ver uma borda ao redor de todas as células para tornar a tabela
mais ó bvia. Esta tabela precisa de melhorias. As cores alternadas das colunas melhorariam
isso?
FIGURA 5-12 A tabela renderizada com linhas e colunas
Use o elemento < th > em vez do elemento < td > para exibir um cabeçalho. O cabeçalho

pode ser horizontal ou vertical. Por exemplo, você pode querer um cabeçalho na parte
superior para rotular cada coluna e um cabeçalho no lado esquerdo (na primeira coluna)
para rotular cada linha. A seguir está a tabela modificada.
<table>
<tr>
<th> Veículo # </th>
<th> Ano </th>
<th> Faça </th>
<th> Modelo </th>
</tr>
<tr>
<th> 1 </th>
<td> 1957 </td>
<td> Ford </td>
</tr>
<tr>
<th> 2 </th>
<td> 1958 </td>
<td> Impala </td>
</tr>
<tr>
<th> 3 </th>
<td> 2012 </td>
<td> BMW </td>
<td> Z4 </td>
</tr>
<tr>
<th> 4 </th>
<td> 2003 </td>
231
<td> Mazda </td>
<td> Miata </td>
</tr>
</ tab le>
A tabela renderizada é mostrada na Figura 5-13. Esta tabela revisada agora tem cabeçalhos
horizontais e verticais. Observe que o estilo padrã o do < th > elemento é negrito.
FIGURA 5-13 A tabela revisto com cabeçalhos horizontais e verticais nomeando tabela

h eaders
Agora que você tem < th > elementos para os cabeçalhos, adicione um estilo aos < th >
elementos conforme a seguir.
º{
cor de fundo: #BDEAFF;
largura: 100px;
}
Isso adiciona um fundo azul claro a todos os < th > elementos e define a largura de todas as
colunas em 100 pixels. Que mudanças você pode fazer para dar estilos diferentes aos
cabeçalhos horizontal e vertical? O exemplo a seguir pode realizar essa tarefa.
º{
largura: 100px;
th: apenas do tipo {
cor de fundo: # FFFF99;
A primeira regra de estilo define a cor de todos os < th > elementos para um azul claro e
define a largura para 100 pixels. A segunda regra de estilo tem uma prioridade mais alta,
portanto, substitui a primeira regra de estilo e aplica uma cor amarela pá lida ao cabeçalho
vertical.
Declarando o cabeçalho, rodapé e corpo da tabela A maioria dos navegadores

automaticamente envolve todos os elementos < tr > com um elemento < tbody > para
indicar o corpo da tabela. O que aconteceria se você tivesse um seletor de estilo CSS de
table> tr? Você nã o obteria uma correspondência porque o navegador adiciona
o elemento < tbody >. O seletor pode ser reescrito como table> tbody> tr, ou talvez tbody>
tr seja tudo que você precisa. É uma boa prá tica definir o elemento < tbody > explicitamente
em cada tabela.
Você também pode ter vá rias linhas que devem ser usadas como cabeçalhos ou rodapés
horizontais.
Você pode usar o elemento < thead > para identificar linhas que sã o linhas de cabeçalho e
usar o elemento < tfoot > para identificar linhas que sã o linhas de rodapé. O seguinte é um
exemplo da adiçã o dos elementos < thead >, < tfoot > e < tbody >.
<table>
<thead>
<tr>
<th> Ano </th>
<th> Faça </th>
<th> Modelo </th>
<th> Preço </th>
</tr>
</thead>
<tbody>
<tr>
<th> 1 </th>
<td> 1957 </td>
<td> Ford </td>
<td> 14.000 </td>
</tr>
<tr>
<th> 2 </th>
<td> 1958 </td>
<td> Impala </td>
<td> 3.000 </td>
</tr>
<tr>
<th> 3 </th>
<td> 2012 </td>

<td> BMW </td>
<td> Z4 </td>
<td> 40.000 </td>
</tr>
<tr>
<th> 4 </th>
<td> 2003 </td>
<td> Mazda </td>
<td> Miata </td>
<td> 5.000 </td>
</tr>
</tbody>
<tfoot>
233
<tr>
<th> Total: </th>
<th> </th>
<th> </th>
<th> </th>
<th> 62.000 </th>
</tr>
</tfoot>
</table>
Além de adicionar estrutura à tabela, você pode usar o < thead >, < tbody > e
< tfoot > elementos para controlar melhor o estilo dos < th > elementos. Sem esses
elementos, como você forneceria um estilo diferente para o cabeçalho e o rodapé? As
seguintes regras de estilo fornecem um exemplo desse estilo.
thead th {
largura: 100px;
tbody th {
tfoot th {
cor de fundo: # C2FE9A;
tfoot th: l ast-of-type {
td {

td: ú ltimo do tipo {
A tabela renderizada é mostrada na Figura 5-14. A seguir está uma descriçã o das regras de
estilo aplicadas.
■■ A primeira regra de estilo aplica uma cor de fundo azul ao cabeçalho e define a largura
de todas as colunas em 100 pixels.
■■ A segunda regra de estilo aplica uma cor de fundo amarela ao cabeçalho vertical.
■■ A terceira regra de estilo aplica uma cor de fundo verde ao rodapé.
■■ A quarta regra de estilo aplica o alinhamento correto ao preço no rodapé.
■■ A quinta regra de estilo centraliza o texto de todas as células da tabela .
■■ A ú ltima regra de estilo aplica o alinhamento correto à s células de preço.
FIGURA 5-14 A mesa estilizada
Embora você possa ter no má ximo um elemento < thead > e um elemento < tfoot >, você

pode ter muitos elementos < tbody > em um elemento < table >. A vantagem de ter
vá rios elementos < tbody > é que você pode agrupar linhas para aplicar estilos. Você pode
até mesmo exibir ou ocultar grupos de linhas definindo a propriedade de exibiçã o de estilo
como nenhum (para ocultar) ou desmarcando a propriedade de exibiçã o (para mostrar). O
exemplo a seguir estende o exemplo anterior usando vá rios elementos < tbody >,
adicionando um para Carros Antigos e outro para Carros Nã o-Antigos.
<! DOCTYPE html>

<head>
<title> Veículos </title>
<link href = "Content / Vehicles.css" rel = "stylesheet" />
<script src = "Scripts / veículos.js"> </script>
</head>
<body>
<div role = "main">
<button id = "showAntique"> Carros antigos </button>
<button id = "showNonAntique"> Carros nã o antigos </button>
<table>
<thead>
<tr>
<th> Ano </th>
<th> Faça </th>
<th> Modelo </th>
<th> Preço </th>
</tr>
</thead>
<tbody id = "antiqueCars">
<tr>
<th> 1 </th>
<td> 1957 </td>
<td> Ford </td>

<td> 14.000 </td>
</tr>
<tr>
<th> 2 </th>
<td> 1958 </td>
235
<td> Impala </td>
<td> 3.000 </td>
</tr>
</tbody>
<tbody id = "nonAntiqueCars">
<tr>
<th> 3 </th>
<td> 2012 </td>
<td> BMW </td>
<td> Z4 </td>
<td> 40.000 </td>
</tr>
<tr>
<th> 4 </th>
<td> 2003 </td>
<td> Madza </td>

<td> Miata </td>
<td> 5.000 </td>
</tr>
</tbody>
<tfoot>
<tr>
<th> Total: </th>
<th> </th>
<th> </th>
<th> </th>
<th> 62.000 </th>
</tr>
< / tfoot>
</table>
</div>
</body>
</html>
<script>
iniciar();
</script>
Este exemplo mostra o documento HTML completo, para que você possa ver a inclusã o do
CSS
arquivo e arquivo JavaScript. O HTML foi estendido para incluir dois botõ es na parte
superior para que você possa filtrar por Carros Antigos ou Nã o-Antigos. Existem
dois elementos < tbody >, cada um tendo uma id explícita de antiqueCars e nonAntiqueCars,
respectivamente, e um elemento < script > na parte inferior que inicializa o JavaScript, que
anexará manipuladores de eventos ao evento click dos botõ es. O arquivo CSS foi
ligeiramente modificado em relaçã o ao exemplo anterior, conforme a seguir.
thead th {
largura: 100px;
tbody th {
tfoot th {
tfoot th: last-of-type {
alinhamento de texto: ri ght;
td {

.escondido {
Mostrar nenhum;
.visível {
display: normal;
O arquivo CSS agora tem os seletores .hidden e .visible. Eles sã o usados para mostrar ou
ocultar o
elementos < tbody >, incluindo seus conteú dos. O arquivo JavaScript contém o có digo a

seguir.
function init () {
document.getElementById ('showAntique'). addEventLi stener ('click',

showAntiqueCars); document.getElementById ('showNonAntique'). addEventListener
('click', showNonAntiqueCars);
function showAntiqueCars () {
document.getElementById ('antiqueCars'). className =

"visible"; document.getElementById ('nonAntiqueC ars'). className = "oculto";
function showNonAntiqueCars () {
document.getElementById ('antiqueCars'). className =
"oculto"; document.getElementById ('nonAntiqueCars'). className = "visible";
O có digo JavaScript contém uma funçã o init que é chamada quando o documento HTML é
carregado. A funçã o init anexa manipuladores de eventos ao evento click dos dois
botõ es. As funçõ es adicionais definem a classe CSS para exibir ou ocultar
os elementos < tbody >.
Quando a pá gina da web é exibida, todos os veículos sã o exibidos . Clicar no botã o Carros

Antigos exibe os carros antigos e oculta os que nã o sã o. Clicar no botã o Carros nã o antigos
exibe os carros nã o antigos e oculta os carros antigos.
237
Criação de tabelas irregulares
As tabelas precisam ser retangulares para funcionar corretamente, mas você

frequentemente precisará apresentar tabelas que nã o contenham o mesmo nú mero de
células em cada linha. No caso dos exemplos anteriores, o rodapé continha o mesmo
nú mero de células que as outras linhas, mas você só precisa ter duas células, uma para
“Total:” e outra para o preço total. Você também pode querer adicionar uma coluna que
indique Carros Antigos versus Carros Nã o Antigos, mas você nã o quer uma célula em cada
linha que diga “Carro Antigo” ou “Nã o Anti que Carro”. Você deseja adicionar uma ú nica
célula que diz “Carros Antigos” e é a altura combinada de todas as linhas de carros
antigos. Você deseja adicionar uma ú nica célula que diz “Carros nã o antigos” e é a altura
combinada de todas as fileiras de carros nã o antigos. Use
os atributos rowspan ou colspan no elemento < td > ou < th > para resolver este problema.
O atributo colspan informa ao navegador que um elemento < td > ou < th > deve ter o
tamanho de vá rias células horizontais. No exemplo anterior, onde você deseja que o texto
“Total:” apareça na linha de rodapé, use <th colspan = ”4”> como a seguir.
<tfoot>
<tr>
<th colspan = "4"> Total: </th>
<th> 62.000 </th>
</tr>
</tfoot>
O estilo padrã o para o < th > elemento é negrito e centralizado. Quando “Total:” é exibido,

ele está centralizado nos quatro células que abrange. A regra de estilo CSS é alterada para
alinhar à direita “Total:” como segue.
tfoot th {
tfoot th: first-of-type {
Você poderia apenas alinhar à direita todos os < th > elementos no rodapé eliminando as
duas ú ltimas regras de estilo neste exemplo e adicionando o estilo de alinhamento de texto
à primeira regra de estilo. A saída renderizada é mostrada na Figura 5-15.
FIGURA 5-15 A pá gina renderizada com o rodapé contendo apenas duas células O atributo
rowspan diz ao navegador que um < td > ou < th > elemento deve ter o tamanho de vá rias
células verticais. No exemplo anterior, quando você deseja adicionar uma coluna com
apenas dois células, use < td rowspan = ”n” > onde n é igual ao nú mero de linhas a serem
estendidas, neste caso, 2.
Lembre-se de que adicionar uma coluna também requer que você adicione a coluna ao
cabeçalho e modifique o atributo colspan no rodapé. A seguir está a tabela modificada.
<table>
<thead>
<tr>
<th> Categoria </th>
<th> Ano </th>
<th> Faça </th>
<th> Modelo </th>
<th> Preço </th>
</tr>
</thead>
<tbody id = "antiqueCars">
<tr>
<th> 1 </th>
<td rowspan = "2"> Antigos </td>
<td> 1957 </td>
<td> Ford </td>
<td> 14.000 </td>
</tr>
<tr>
<th> 2 </th>
<td> 1958 </td>

<td> Impala </td>
<td> 3.000 </td>
</tr>
</tbody>
<tbody id = "nonAntiqueCars">
<tr>
<th> 3 </th>
<td rowspan = "2"> Não antigo </td> Liçã o 2: trabalhar com tabelas CAPÍTULO 5
239
<t d> 2012 </td>
<td> BMW </td>
<td> Z4 </td>
<td> 40.000 </td>
</tr>
<tr>
<th> 4 </th>
<td> 2003 </td>
<td> Mazda </td>
<td> Miata </td>
<td> 5.000 </td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan = "5"> Total: </th>
<th> 62.000 </th>
</tr>
</tfoot>
</table>
Para ajudar a ilustrar os atributos rowspan e colspan, uma borda preta é adicionada à s
células da tabela. A seguir está o arquivo CSS completo.
tabela {
borda: meio sólido # 000000;
thead th {
largura: 100px;
tbody th {
tfoot th {
tfoot th: first-of-type {

td {
borda: sólido fino # 000000;
º{
borda: sólido fino # 000000;

}
.escondido {
Mostrar nenhum;
.visível {
display: normal;
Os resultados sã o exibidos na Figura 5-16.
FIGURA 5-16 A pá gina renderizada com bordas definidas, mostrando claramente os

atributos rowspan e colspan Adicionando uma legenda a uma tabela
Você pode usar o elemento < caption > para definir e associar uma legenda a uma
tabela. O estilo padrã o da legenda é centralizado e localizado acima da tabela. Você pode
usar as propriedades CSS de alinhamento de texto e legenda para substituir o estilo
padrã o. Se você usar o elemento < caption >, ele deve ser o primeiro elemento dentro do
elemento < table >.
S tyling colunas
O estilo das colunas é uma dificuldade comum porque as tabelas sã o centradas em linha,
nã o em coluna.
É relativamente fá cil aplicar um estilo a uma linha porque você pode aplicar
um elemento < tr > ao estilo, mas nã o há um elemento < tc > para uma coluna. Lembre-se
de que o elemento < td > representa uma célula, nã o uma coluna. Na verdade, as colunas
sã o criadas implicitamente, criando as células. Use os elementos < colgroup > e < col >
para definir o estilo das colunas.
O elemento < colgroup > é colocado dentro do elemento < table > para definir as colunas

que podem ser estilizadas. Lembre-se de que o estilo inclui ocultar e exibir as colunas. Por
dentro da Liçã o 2: Trabalhando com tabelas CAPÍTULO 5
241
elemento < colgroup >, elementos < col > sã o adicionados para cada coluna a ser
estilizada. O elemento < col > possui um atributo span que identifica vá rias colunas que
terã o o mesmo estilo.
Nos exemplos anteriores, os elementos < colgroup > e < col > podem fornecer um estilo

para os cabeçalhos verticais, mas, desta vez, você deseja aplicar um estilo à s duas primeiras
colunas. Você pode definir as colunas da seguinte maneira.
<colgroup>
<col span = "2" class = "verticalHeader" />
</colgroup>
Este exemplo define as duas primeiras colunas para ter um estilo de verticalHeader. A
classe verticalHeader é configurada para aplicar uma cor de fundo cinza da seguinte
maneira.
.verticalHeader {
cor de fundo: # C0C0C0;
Além disso, o estilo existente para a primeira coluna foi removido. A Figura 5-17 mostra a
pá gina da web renderizada.
FIGURA 5-17 Usando os elementos < colgroup > e < col > para aplicar um estilo a colunas

mú ltiplas Resumo da lição
■■ Evite usar o elemento < tabela > para o layout da pá gina.
■■ Um elemento < tr > cria uma linha da tabela. Um elemento < td > cria uma célula da

tabela em uma linha da tabela.
■■ Para identificar uma célula de cabeçalho, use o elemento < th > em vez de usar
o elemento < td >.
■■ Use o elemento < thead > para especificar as linhas da tabela que compõ em o cabeçalho

da tabela. Use o
Elemento < tfoot > para especificar as linhas da tabela que compõ em o rodapé da

tabela. Use o elemento < tbody > para especificar as linhas de dados. Você pode agrupar
linhas de dados especificando muitos elementos < tbody >.
■■ Use os atributos rowspan e colspan nos elementos < th > e < td > para criar tabelas
irregulares.
■■ Use o elemento < caption > diretamente apó s o elemento < table > para especificar uma

legenda para sua tabela.
■■ Use os elementos < colgroup > e < col > para aplicar estilos a uma coluna.
Revisão da aula

1. Você está criando uma pá gina da Web que será usada para exibir uma lista
de vendedores com suas estatísticas de vendas para os anos de 2010, 2011 e 2012 em duas
categorias: vendas de produtos e vendas de serviços. Você deseja que cada um dos anos
esteja no cabeçalho horizontal e, abaixo de cada ano, você terá uma coluna “Produtos” e
uma coluna “Serviços”. Como você definirá o elemento para o ano de 2011?
A. < th > 2011 < / th >
B. < th colspan = ”2” > 2011 </ th > C. < th span = ”2” > 2011 < / th > D. < th style = ”2” >
2011 < / th > 2. Você deseja fornecem a capacidade de exibir ou mostrar colunas, mas
você nã o deseja adicionar um estilo ou outra marcaçã o a cada elemento < td >. Como você
pode fazer isso?
A. Adicione um elemento < colgroup > ao elemento < table > e defina cada coluna usando

um elemento < col > dentro do elemento < colgroup >.
B. Adicione um id a cada elemento < td > e forneça um id ú nico para cada um; use os ids em

suas regras de folha de estilo para obter o estilo desejado.
C. Adicione um elemento < col > ao elemento < table > e defina cada coluna usando um

elemento < id > dentro do elemento < col >.
D. Adicione um elemento < oculto > ao elemento < tabela > e defina cada coluna usando

um elemento < col > dentro do elemento < oculto >.
3. Qual elemento você pode adicionar ao elemento < table > para fornecer uma legenda de
tabela?
A. < thead >
B. < colgroup >
C. < legenda >
D. < th >
Pratica exercícios

243
Exercício 1: Adicionar um layout de página ao projeto da calculadora Neste exercício,

você aplica seu conhecimento de marcaçã o semâ ntica adicionando um layout de pá gina ao
projeto WebCalculator no qual trabalhou no Capítulo 4, "Introduçã o ao CSS3" e, em seguida,
adiciona regras de estilo para melhorar a aparência da pá gina da web.
Este exercício continua com o objetivo de adicionar regras de estilo com um mínimo de
modificaçõ es no arquivo default.html.
1. Inicie o Visual Studio Express 2012 for Web. Clique em Arquivo, escolha Abrir projeto e
selecione a soluçã o que você criou no Capítulo 4.
2. Selecione o arquivo WebCalculator.sln e clique em Abrir. Você também pode clicar em

Arquivo, escolher Projetos e soluçõ es recentes e, a seguir, selecionar a soluçã o.
Se você nã o completou os exercícios do Capítulo 4, pode usar a soluçã o da pasta Iniciar do

Capítulo 5, Exercício 1.
e escolha Definir como pá gina inicial. Pressione F5 para verificar se sua pá gina inicial é
exibida.
4. Abra a pá gina default.html e envolva o elemento < div > cujo id é calculator com um
elemento < div > e, em seguida, defina o id como container.
Este elemento < div > conterá o layout de pá gina completo.
5. No elemento container < div >, insira um elemento < header > contendo um elemento

< hgroup > com um id de headerText. No elemento < hgroup >, insira um elemento < h1 >
contendo o texto, “Contoso, Ltd.” Apó s o elemento < h1 >, insira um elemento < h2 >
contendo o texto “Seu sucesso é igual ao nosso sucesso”.
O cabeçalho deve ser semelhante ao seguinte.
<cabeçalho>
<hgroup id = "he aderText">
<h2> Seu sucesso é igual ao nosso sucesso </h2>
</hgroup>
</header>
6. Apó s o elemento < header >, insira um elemento < nav >.
O elemento < nav > geralmente contém os links principais na pá gina, mas nã o há outras

pá ginas neste site.
7. Insira um link fictício para a pá gina inicial, que é a pá gina atual.
Isso será exibido na pá gina para lhe dar uma ideia de para que o elemento < nav > é
usado . O elemento < nav > deve ser semelhante ao seguinte.
<nav>
<a href="default.html"> Pá gina inicial </a>
</nav>
8. Apó s o elemento < nav >, envolva o elemento calculator < div > com um elemento < div >

cuja funçã o é definida como principal.
O elemento < div > principal com o elemento calculator < div > deve ser semelhante ao

seguinte.
<div role = "main">
<button id = "btn1"> 1 </ button>
</ di v>
</div>
9. Apó s o elemento < div > principal , insira um elemento < aparte >, que conterá os

anú ncios. Como nã o há anú ncios, insira um elemento < p > com a palavra Anú ncios para
que você possa ver onde o elemento < aparte > é renderizado.
O elemento < aparte > concluído deve ser semelhante ao seguinte.
<ao lado>
<p> Anú ncios </p>
</aside>
10. Apó s o elemento < aparte >, insira um elemento < rodapé >. No elemento < footer >,

adicione um elemento < p > com o seguinte conteú do: Copyright & copy; 2012, Contoso
Ltd., Todos os direitos reservados.
O elemento < footer > concluído deve ser semelhante ao seguinte.
<footer>
Copyright e có pia; 2012, Contoso Ltd., Todos os direitos reservados
</p>
</footer>
A seguir está a pá gina da web default.html completa.
<! DOCTYPE html>
<head>
<script type = "text / javascript" src = "S cripts / CalculatorLibrary.js"> </script>
</head>
<body>
<div id = "container">

245
<cabeçalho>
<hgroup id = "headerText">
</hgroup>
</header>
<nav>
<a href="de fault.html"> Pá gina inicial </a>
</nav>
<div role = "main">

</div>
</div>
<ao lado>
<p> Anú ncios </p>
</aside>
<footer>
</p>
</footer>
</div>
</script>
</body>
</html>
Exercício 2: Adicionar estilos ao layout da calculadora
Agora que você concluiu o contêiner de layout, adicione e modifique os estilos

padrã o. arquivo css.
1. Abra o arquivo default.css e, na parte superior do arquivo, adicione uma regra de estilo
para definir a margem e o preenchimento de todos os elementos como 0 pixels.
Sua regra de estilo deve ser semelhante à seguinte.

* {margem: 0; preenchimento: 0; }
2. Depois dessa regra de estilo, insira outra regra de estilo que defina < aparte >,
< rodapé >, < cabeçalho >,
Os elementos < hgroup > e < nav > devem ser exibidos como um bloco para garantir que
todos os b rowers renderizem esses elementos como blocos.
Sua regra de estilo deve ser semelhante à seguinte.
à parte, rodapé, cabeçalho, hgroup, nav {
display: bloco;
A cor de fundo da pá gina atual é azul escuro. Essa cor de fundo precisa ser iluminada e
a família da fonte precisa ser configurada para Cambria com uma fonte de backup Times
New Roman e o verso final da fonte com serifa. A cor da fonte deve ser definida para
corresponder ao azul padrã o da Contoso. Sua regra de estilo de corpo deve ser modificada
para corresponder ao seguinte.
corpo {
cor de fundo : hsl (255, 95%, 95%);
família da fonte: Cambria, 'Times New Roman', serifa;
cor: # 0068AC;
3. Para adicionar uma nova pasta chamada Imagens ao projeto, clique com o botã o direito
do mouse no projeto na janela do Solution Explorer. Clique em Adicionar, selecione Nova
Pasta e nomeie os folde r Imagens .
4. Para adicionar a imagem da pasta Resource, na janela Solution Explorer, clique com o
botã o direito na pasta Images que você acabou de adicionar.
5. Clique em Adicionar, escolha Item existente e selecione o arquivo ContosoLogo.png que

está localizado na pasta Chapter05 Resources.
6. Apó s a regra de estilo do corpo, insira uma regra de estilo de cabeçalho que defina a
altura em 100 pixels e defina a imagem de plano de fundo para o arquivo Contoso Logo.png.
7. Defina a repetiçã o de fundo como sem repetiçã o e defina a margem superior para 10
pixels adicionando o seletor de cabeçalho com as chaves, clicando com o botã o direito do
mouse na regra de estilo e clicando em Construir estilo. Quando a janela Modificar estilo for
exibida, defina as propriedades.
A regra de estilo concluída deve ser semelhante à seguinte.
header {
altura: 100px;
imagem de fundo: url ('../ Images / ContosoLogo.png');
repetiçã o de fundo: sem repetiçã o;
margem superior: 10px;
8. Adicione uma regra de estilo com base no ID do elemento igual a headerText. Defina a

posiçã o como absoluta, defina a parte superior como 0 pixels e a esquerda como 80 pixels,
o que localizará o texto do cabeçalho à direita do logotipo da Contoso.
9. Defina a largura em 100 por cento e defina a margem superior em 10 pixels, conforme a
seguir.
#headerText {
247
topo: 0px;
esquerda: 80px;
largura: 100%;
}
10. Apó s a regra de estilo headerText, insira uma regra de texto para
o elemento < h1 >. Adicione estilos para definir o tamanho da fonte para 64 pixels e defina a
altura da linha para 55 pixels, conforme a seguir.
h1 {
tamanho da fonte: 64px;
altura da linha: 55px;
11. Apó s a regra de estilo h1, insira uma regra de texto para o elemento < h2 >. Adicione
estilos para definir o tamanho da fonte para 18 pixels, defina a altura da linha para 20
pixels e defina o estilo da fonte para itá lico da seguinte maneira.
h2 {
estilo da fonte: itá lico;
12. Apó s a regra de estilo h2, crie uma regra de estilo para o elemento < nav >. Defina os
estilos para flutuar o elemento < nav > para a esquerda, defina a largura em 20 por cento e
defina a largura mínima em 125 pixels, conforme a seguir.
nav {
flutuar: esquerda;
largura: 20%;
largura mínima: 125px;
13. Apó s a regra de estilo de navegaçã o, adicione uma regra de estilo para

o elemento < div > principal . Defina os estilos para flutuar à esquerda, ao lado
do elemento < nav >, e defina a largura para 60 por cento conforme a seguir.
div [role = "main"] {
flutuar: esquerda;
largura: 60%;
14. Apó s a regra de estilo div principal, adicione uma regra de estilo para
o elemento < aparte >. Defina os estilos para flutuar à esquerda, ao lado
do elemento < div > principal , defina a largura para 20 por cento e defina a largura mínima
para 125 pixels, conforme a seguir.
a parte, de lado {
flutuar: esquerda;
largura: 2 0%;
15. Apó s a regra de estilo à parte, adicione uma regra de estilo para

o elemento < rodapé >. Defina os estilos para posicionar o rodapé limpo apó s
o elemento <ao lado >, defina a largura como 100 por cento, defina a altura como 70
pixels e defina o tamanho da fonte como pequeno, conforme a seguir.
rodapé {
limpar ambos;
largura: 100%;
altura: 70px;
16. Apó s a regra de estilo do rodapé, adicione uma regra de estilo para o elemento < div >
cujo id é container.
O objetivo deste estilo é garantir que os estilos float: left que você adicionou nã o quebrem
quando a janela do navegador for redimensionada para um tamanho pequeno.
17. Defina a largura mínima em 800 pixels, conforme a seguir.
#container {
18. Na regra de estilo existente para o elemento < div > da calculadora , altere a altura e a
largura para 400 pixels da seguinte forma.
#calculadora {
borda: só lida;
cor de fundo: hsl (255, 100%, 60%);
largura: 400px;
altura: 400px;
19. Na regra de estilo existente para o botã o de entrada, altere o tamanho da fonte para 20
pontos conforme a seguir.
input, button {
cor da borda: hsl (255, 100%, 100%);
margem: 5px;
A seguir está a folha de estilo completa para sua referência.
* {margem: 0; preenchimento: 0; }

display: bloco;
249
corpo {
cor de fundo: hsl (255, 95%, 95%);
família da fonte: Cambr ia, 'Times New Roman', serif;
cor: # 0068AC;
header {
altura: 100px;
imagem de fundo: url ('../ Images / ContosoLogo.png');
#headerText {
topo: 0px;
esquerda: 80px;
largura: 100%;
h1 {
h2 {
estilo da fonte: itá lico;
nav {
flutuar: esquerda;
largura: 20%;
flutuar: esquerda;
largura: 60%;
}

a parte, de lado {
flutuar: esquerda;
largura: 20%;
rodapé {
limpar ambos;
largura: 100%;
altura: 70px;
#container {
#calculadora {
borda: só lida;
cor de fundo: hsl (255, 100%, 60%);
largura: 400px;
altura: 400px;

entrada {
largura: 85%;
altura: 7%;
borda: inserçã o;
botã o {
cor de fundo: hsl (255, 50%, 80%);
largura: 25%;
altura: 10%;
fronteira: início;
botã o: hover {
cor de fundo: hsl (255, 50%, 90%);
botã o: ativo {
borda: inserçã o;
cor da borda: hsl (255, 100%, 100%);
cor de fundo: hsl (255, 50%, 50%);
input, button {
cor da borda: hsl (255, 100%, 100%);
margem: 5px;
[somente leitura] {
cor de fundo: hsl (255, 50%, 80%);
251
20. Para ver seus resultados, pressione F5 para iniciar a depuraçã o do aplicativo.
Você deve ver uma interface de calculadora mais bonita com um layout de pá gina,
FIGURA 5-1 8 A calculadora da web com seu layout de pá gina
Os botõ es da calculadora sã o posicionados mantendo-os do mesmo tamanho e usando

elementos <br /> para cada linha de botõ es. Embora a calculadora nã o pareça tã o ruim,
os botõ es nã o estã o em seus locais tradicionais. Por exemplo, os botõ es de entrada limpar e
limpar sã o normalmente y na parte superior, enquanto os botõ es mais e menos sã o
normalmente y à direita. O objetivo desta liçã o é reposicionar os botõ es.

default.html. Os elementos da calculadora serã o posicionados ao colocá -los em uma
mesa. Haverá sete linhas e quatro colunas.

Exercício 2.
3. Cerque as entradas e botõ es com um elemento < tabela >.
4. Retire todos os < br / elementos> de th arquivo e default.html.
5. Cerque a caixa de texto txtResult com uma célula de tabela que se estende por quatro
colunas. Cerque a célula da mesa com uma linha de mesa.
A linha da tabela deve ser semelhante à seguinte.
<tr>
<td colspan = "4">
<input id = "txtResult" type = "text" readonly = "readonly" />
</td>
</tr>
6. Com a caixa de texto txtInput, repita a etapa anterior conforme a seguir.
<tr>
<td colspan = "4">
<input id = "txtInput" type = "text" />
</td>
</tr>
A pró xima linha da tabela terá duas colunas vazias, para botõ es futuros e, em seguida,
uma coluna para o botã o de limpar entrada e outra coluna para o botã o de limpar,
conforme a seguir.
<tr>
<td> </td>
<td> </td>
<td> <button id = "btnClearEntry"> CE </button> </td>
<td> <button id = "btnClear"> C </button> </td>
</tr>
A pró xima linha da tabela terá os botõ es 7, 8, 9 e o botã o mais como a seguir.
<tr>
<td>
<button id = "btn7"> 7 </button> </td>
<td>
<td>
<td>
</td>
</tr>
A pró xima linha da tabela terá os botõ es 4, 5, 6 e o botã o menos como a seguir.
<tr>
<td>
</td>
<td>
</td>
<td>

253
</td>
<td>
</td>
</tr>
A pró xima linha da tabela terá os botõ es 1, 2 e 3 e uma coluna vazia como a seguir.
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
A ú ltima linha da tabela terá uma coluna vazia, o botã o 0 e mais duas colunas vazias
conforme a seguir.
<tr>
<td> </td>
<td>
</td>
<td> </td>
<td> </td>
</tr>
A seguir está o elemento < div > principal completo .
<div role = "mai n">
<table>
<tr>
<td colspan = "4">
<input id = "txtResult" type = "text" readonly = "readonly" />
</td>
</tr>
<tr>
<td colspan = "4">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<button id = "btnClearEntry"> CE </button>
</td>
<td>
</td>
</tr>
<tr>
<td>
<td>
<td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>

</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
255
7. Agora que o arquivo default.html foi concluído, modifique a folha de estilo abrindo o
arquivo default.css e, na parte inferior, adicionando o seletor de tabela e definindo a
largura para 100 por cento, conforme a seguir.
tabela {
largura: 100%;
8. Adicione um seletor td e defina a largura para 25 por cento, conforme a seguir.
td {
largura: 25%;
9. Localize o seletor de botã o existente. Altere a largura para 90 por cento conforme

a seguir.
botã o {
cor de fundo: hsl (255, 50%, 80%);
largura: 90%;
altura: 10%;
fronteira: início;
10. Localize o seletor de entrada existente. Altere o preenchimento para 5 pixels da

seguinte forma.
entrada {
largura: 85%;
altura: 7%;
preenchimento: 5px;
borda: inserçã o;
11. Pressione F5 para executar o aplicativo.
A Figura 5-19 mostra a calculadora completa.

FIGURA 5-19 A calculadora completa
capítulo.
■■ Exercício 1 Aprenda mais sobre marcaçã o semâ ntica adicionando seçõ es adicionais à
sua pá gina da web.
■■ Exercício 2 Aprenda mais sobre tabelas adicionando mais linhas e células à mesa para
segurar os botõ es futuros.

257
Respostas
Lição 1
A. Incorreto: O elemento < section > denota uma parte de algo.
B. Incor ret: O elemento < pre > exibe conteú do pré-formatado.
C. Incorreto: O elemento < aparte > exibe conteú do relacionado ao site.
D. Correto: um artigo envolve itens autô nomos que podem ser compartilhados.
A. Incorreto: Você deve reduzir o uso do elemento < b >.
B. Incorreto: O elemento < em > indica ênfase enfá tica, mas nã o necessariamente

importâ ncia.
C. Correto: O elemento < strong > indica importâ ncia.
D. Incorreto: Você deve evitar usar o elemento < i >.
A. Correto: O elemento < address > fornece informaçõ es de contato para o autor da pá gina

da web.
B. Incorreto: O elemento < contato > nã o é vá lido.
C. Incorreto: O elemento < author > nã o é vá lido.
D. Incorreto: O elemento < nome > nã o é vá lido.
Lição 2
A. Incorreto: a coluna precisa se estender por duas colunas.
B. Correto: A coluna precisa do atributo colspan = ”2” para abranger as colunas de

Produtos e Serviços.
C. Incorreto : O atributo span é usado com o elemento < col >, mas nã o com
o elemento < th >.
D. Incorreto : O atributo de estilo nã o pode ser usado para causar expansã o em duas
colunas.
A. Correto: você pode atribuir estilos ao elemento < col >, que aplicará o estilo à coluna da

tabela correspondente.
B. Incorreto: Adicionar um id a cada elemento < td > nã o satisfaz os critérios.
C. Incorreto: O elemento < col > deve estar dentro de um elemento < colgroup >.
D. Incorreto: O elemento < oculto > nã o é vá lido.
A. Incorreto: O elemento < thead > especifica as linhas de título.
B. Incorreto: O elemento < colgroup > especifica colunas.
C. Correto : O elemento < caption > adiciona uma legenda ao topo de uma tabela.
D. Incorreto : O < th > elemento especifica as células de cabeçalho.
259
CAPÍTULO 6
JavaScript essencial e
jQuery
A flexibilidade do JavaScript é incrível. Nos capítulos anteriores, você aprendeu como

adicionar có digo JavaScript à sua pá gina da web para fornecer mudanças dinâ micas à
pá gina quando um evento é disparado.
Uma das maiores dificuldades com o desenvolvimento de pá ginas da Web sã o as diferenças

entre os diferentes navegadores, mas este livro se concentra principalmente em HTML5,
CSS3 e JavaScript (ECMAScript5.1). Um livro completamente separado poderia ser escrito,
tratando apenas das diferenças entre navegadores e versõ es de navegadores.
Neste capítulo, você aprende como criar objetos, que sã o um aspecto importante do
JavaScript. Você usa objetos para criar entidades, que sã o passadas de e para o servidor, e
para encapsular a funcionalidade que deseja modularizar. Você também precisa estender
os objetos que outras pessoas criaram.
Este capítulo também apresenta o jQuery, a resposta para escrever có digo compatível com
o navegador.
Embora o jQuery nã o resolva todos os problemas de compatibilidade do navegador, ele

resolve a maioria dos problemas diá rios que você encontra entre os navegadores. Além
disso, o jQuery é divertido e fá cil de usar.
■■ Liçã o 1: Criando objetos JavaScript 262
■■ Liçã o 2: Trabalhando com jQuery 285
Para completar este livro, você deve ter algum conhecimento de desenvolvimento

261
Lição 1: Criando objetos JavaScript
Em JavaScript, tudo é um objeto. Strings, nú meros e funçõ es sã o todos objetos. Você

aprendeu a criar funçõ es, entã o já tem experiência na criaçã o de objetos, como verá nesta
liçã o.
■■ Compreender a terminologia bá sica orientada a objetos.
■■ Crie objetos JavaScript.
Usando terminologia orientada a objetos
Em muitas linguagens orientadas a objetos, quando você deseja criar objetos, você começa
criando uma classe , que é um projeto para um objeto. Como a planta de uma casa, a planta
nã o é a casa; sã o as instruçõ es que definem o tipo de objeto que você vai construir, que
Os termos sã o a casa. Usando um projeto de casa, você pode criar ou construir muitas casas

que sã o baseadas no projeto. Cada casa é um objeto do tipo casa, também conhecido como
uma instância do tipo casa.
O desenvolvedor escreve a classe, que é entã o usada para construir objetos. Em um
aplicativo de beisebol, você pode criar uma classe Player (as classes sã o normalmente
capitalizadas) que possui propriedades para nome e sobrenome, média de
rebatidas, contagem de erros e assim por diante. Ao criar sua equipe, você pode usar a
classe Player para criar nove objetos Player, cada um com suas pró prias propriedades.
Cada vez que você constró i um objeto Player, a memó ria é alocada para armazenar os
dados do jogador, e cada dado é uma propriedade, que tem um nome e um valor.
Os três pilares da programaçã o orientada a objetos

sã o encapsulamento , herança e polimorfismo . Encapsulamento significa que você esconde
todos os detalhes, exceto aqueles que sã o necessá rios.
Termos para se comunicar com seu objeto a fim de simplificar o objeto para qualquer
pessoa que o use.
Herança significa que você pode criar um relacionamento “é um” entre duas classes, em
que a classe filha herda automaticamente tudo o que está na classe pai. Polimorfismo
significa que você pode executar uma funçã o na classe pai, mas o comportamento muda (se
transforma) porque sua classe filha tem uma funçã o que sobrescreve a funçã o na classe pai.
A classe principal também é conhecida como a base de classe, o super- classe, ou

th e generalizada classe.
A classe filha também é conhecida

como classe derivada , subclasse ou classe especializada . Porque chave
Termos é fá cil pensar em filhos reais herdando dos pais, os termos pai e filho sã o
normalmente usados, mas você deve se lembrar dos outros termos para essas classes para
se comunicarem efetivamente com outras pessoas sobre a programaçã o orientada a
objetos.
Na programaçã o orientada a objetos, os objetos podem ter dados implementados como

propriedades e comportamentos implementados como métodos. Uma propriedade é
uma variá vel essencial que é definida na chave
Termos
262 CAPÍTULO 6 JavaScript e jQuery essenciais

um objeto e propriedade do objeto. Um método é uma funçã o definida em um objeto e
pertencente ao objeto.
Compreendendo a advertência orientada a objeto do JavaScript
JavaScript é uma linguagem muito flexível. Você pode criar objetos, mas a relaçã o entre a
linguagem JavaScript e a programaçã o orientada a objetos baseada em classes nã o é
direta. O exemplo mais flagrante é que nã o há palavra-chave de classe na
criptografia JavaS. Se você está familiarizado com a programaçã o orientada a objetos
baseada em classes, terá dificuldade em encontrar a “classe”.
JavaScript é uma linguagem de programaçã o baseada em protó tipo e orientada a

objetos. Em JavaScript, tudo é um objeto, e você cria um novo objeto do nada ou cria um
objeto a partir de um clone de um objeto existente, conhecido como protótipo .
Chave
Conceitualmente, você pode simular a criaçã o de classe usando uma funçã o. Os puristas
baseados em classes e orientados para termos de objetos nã o gostam da ideia de uma
funçã o usada para simular uma classe. Mantenha a mente aberta enquanto os padrõ es sã o
apresentados. Esta liçã o deve fornecer o que você precisa para realizar suas tarefas.
O problema que você normalmente encontra é encontrar uma soluçã o correta para todos
os cená rios. Ao continuar lendo, você descobrirá que, para atingir o encapsulamento
adequado de dados privados, é necessá rio criar có pias das funçõ es que podem acessar os
dados privados para cada instâ ncia do objeto, o que consome memó ria. Se você nã o quiser
criar có pias do método para cada instâ ncia do objeto, os dados precisam ser expostos
publicamente, perdendo assim os benefícios do encapsulamento, pelo qual você oculta os
detalhes do objeto que os usuá rios nã o deveriam precisar ver.
O consenso geral dessa questã o de encapsulamento versus consumo de memó ria

desperdiçador é que a maioria das pessoas prefere expor os dados para minimizar o
consumo de memó ria. Tente entender as vantagens e desvantagens de cada padrã o ao
decidir qual opçã o implementar em seu cená rio.
Usando o padrão literal de objeto JavaScript
Provavelmente, a maneira mais simples de criar um objeto em JavaScript é usar a sintaxe

literal do objeto.
Isso começa com um conjunto de chaves para indicar um objeto. Dentro das chaves está
uma lista separada por vírgulas de pares nome / valor para definir cada
propriedade. Literais de objeto criam um objeto do nada, portanto, esses objetos contêm
precisamente o que você atribui a eles e nada mais.
Nenhum objeto de protó tipo está associado ao objeto criado. O exemplo a seguir demonstra
a criaçã o de dois objetos que representam veículos.
var car1 = {
ano: 2000,
fazer: 'Ford',
modelo: 'Fusion',
getInfo: function () {
return 'Vehicle:' + this.ano + '' + this.make + '' + this.model;
};
Liçã o 1: Criando objetos JavaScript CAPÍTULO 6
263
var car2 = {
ano: 2010,
fazer: 'BMW',
modelo: 'Z4',
return 'Vehicle:' + this.ano + '' + this.m ake + '' + this.model;
};
Neste exemplo, as propriedades pú blicas sã o criadas para year , make , model e getInfo . A

propriedade getInfo nã o contém dados; em vez disso, ele faz referência a uma funçã o
anô nima, portanto getInfo é um método. O método usa esta palavra - chave para acessar os
dados. Lembre-se de que esta palavra - chave faz referência ao objeto que possui o có digo
onde esta palavra-chave está . Nesse caso, o objeto está sendo criado. Se
a palavra - chave this fosse omitida, o có digo procuraria no namespace global
por ano , ma ke e modelo .
Para testar esse có digo, o teste QUnit a seguir verifica se cada objeto contém os dados
esperados.
test ("Teste Literal de Objeto", function () {
esperar (2);
var esperado = 'Veículo: 2000 Ford Fusion';
var real = car1.getInfo ();
igual (real, esperado, 'Valor esperado:' + esperado +
'Valor real:' + real);
var esperado = 'Veículo: BMW Z4 2010';
});
Este teste executa uma asserçã o usando a variá vel car1 e, em seguida, executa outra
asserçã o usando a variá vel car2 . O teste bem-sucedido é mostrado na Figura 6-1 .
Se quiser definir uma matriz de itens e atribuí-la a uma propriedade, você pode usar
colchetes, conforme mostrado no exemplo a seguir.
var car1 = {
ano: 2000,
fazer: 'Ford',
modelo: 'Fusion',
reparos: ['reparo1', 'reparo2', 'reparo3'],
};
Como essa é uma das maneiras mais fá ceis de criar um objeto, você provavelmente o usará
para coletar dados e enviar a outro có digo. Neste exemplo, duas instâ ncias de um tipo
Object sã o criadas e as propriedades sã o adicionadas dinamicamente a cada instâ ncia. Isso
nã o cria um tipo de veículo.
FIGURA 6-1 O teste de literatura do objeto JavaScript
Criação de objetos dinâmicos usando o padrão de fábrica
Além de usar a sintaxe de objeto literal do JavaScript, o JavaScript tem um tipo de objeto e
você pode usá -lo para criar um objeto de forma programá tica. Object possui um objeto
protó tipo que é clonado quando você usa a nova palavra-chave para criar uma nova
instâ ncia de Object. O objeto de protó tipo possui os seguintes métodos herdados.
■■ construtor A funçã o que é chamada para inicializar um novo objeto
■■ hasOwnProperty Retorna um indicador booleano indicando se o objeto atual tem a

propriedade especificada
■■ isPrototypeOf Retorna um indicador booleano indicando se o objeto atual está na
cadeia de objetos de protó tipo do objeto especificado
■■ propertyIsEnumerable Retorna true se o objeto puder ser enumerado em um for. .em

laço
■■ toL ocalString Converte uma data em um valor de string com base no local atual
■■ toString Retorna a representaçã o da string do objeto atual
■■ valueOf Retorna o valor do objeto atual convertido em seu valor primitivo mais

significativo
265
Depois que o objeto é criado, você pode adicionar dinamicamente propriedades a ele que
contêm os dados e as funçõ es de referência. Você pode envolver esse có digo em uma
funçã o que retorna o objeto, conforme mostrado no seguinte exemplo de có digo.
function getVehicle (theYear, theMake, theModel) {
veículo var = novo objeto ();
veiculo.ano = oAno;
veículo.make = theMake;
veículo.modelo = oModelo;
Vehicle.getInfo = function () {
return 'Vehicle:' + this.ano + '' + this.mak e + '' + this.model;
};
veículo de retorno;
Este có digo aproveita a natureza dinâ mica do JavaScript para

adicionar ano , marca , modelo e getInfo ao objeto e, em seguida, retorna o objeto. Colocar
este có digo em uma funçã o torna mais fá cil. Key
Termos para chamar a funçã o getVehicle para obter um novo objeto. O encapsulamento do
có digo para criar um objeto é comumente referido como usando o padrão de fábrica . Você
pode criar vá rias instâ ncias de veículo? Você pode criar vá rias instâ ncias de Objeto e
adicionar propriedades dinâ micas a cada instâ ncia, mas o tipo real é Objeto, nã o veículo. O
teste QUnit a seguir demonstra a criaçã o de vá rias instâ ncias .
test ("Criar Teste de Instâ ncias Usando Padrã o de Fá brica", function () {
esperar (2);
var car1 = getVehicle (2000, 'Ford', 'Fusion');
var car2 = getVehicle (2010, 'BMW', 'Z4');
igual (a ctual, esperado, 'Valor esperado:' + esperado +
});
Isso pode ser tudo de que você precisa quando está coletando alguns dados para colocar
em uma estrutura de objeto e passar para algum outro có digo ou serviço. Embora a funçã o
getVehicle encapsule a criaçã o do objeto, as propriedades sã o todas pú blicas. Isso pode ser
desejá vel em alguns cená rios, mas se você quiser que os dados sejam privados, essa
abordagem nã o funcionará . Como ao usar a sintaxe de objeto literal, você pode encontrar o
problema de que cada tipo de veículo é Objeto, e você pode querer criar uma classe Vehicle
para ter um tipo de Vehicle nomeado.
Criação de uma classe
Nã o há nenhuma classe palavra-chave em JavaScript, mas você pode simular uma classe,

iniciando com uma funçã o, que é y real do construtor f unção do objeto. Considere a
seguinte funçã o.
function Vehicle (theYear, theMake, theModel) {
ano = oAno;
make = theMake;
model = theModel;
getInfo = function () {
retornar 'Veículo:' + ano + '' + marca + '' + modelo;
};
Existem vá rios problemas com este có digo. Todas as variá veis sã o definidas sem a palavra-
chave var , portanto, year , make , model e getInfo sã o definidos automaticamente no escopo
global e sã o acessíveis de qualquer lugar. O seguinte é um teste QUnit de aprovaçã o que
inicializa o Veículo e chama o método getInfo para recuperar os dados.
test ("Teste de Funçã o", function () {
esperar (2);
Veículo (2000, 'Ford', 'Fusion');
var real = getInfo ( );
esperado = 2.000;
real = ano;

});
A funçã o Vehicle aceita três parâ metros e nã o retorna nada. Em vez disso, está definindo
variá veis globais e nã o há provisã o para vá rias instâ ncias. Para provar que as variá veis
globais estã o sendo definidas, a segunda afirmaçã o é verificar se há uma variá vel global
chamada ano que é igual a 2.000. Essa afirmaçã o é bem-sucedida, o que prova que os dados
nã o estã o encapsulados e há apenas uma có pia dos dados. Por exemplo, o seguinte teste
QUnit falha.
test ("Teste de funçã o com falha", funçã o () {
esperar (1);
Veículo (2000, 'Ford', 'Fusion');
Veículo (2010, 'BMW', 'Z4');
var real = getInfo ();
' Valor real:' + real);
esperado = 2.000;
real = ano;
});
A Figura 6-2 mostra as falhas. O problema é que ano , make e modelo do segundo veículo

substituído sim r , make e modelo do primeiro veículo. A variá vel getInfo também foi
substituída, mas em vez de conter os dados, ela contém uma referência ao có digo da
funçã o. O valor da variá vel getInfo foi substituído por um novo có digo de funçã o; aconteceu
de ser o mesmo có digo.
Mais uma vez, nã o há encapsulamento.

267
FIGURA 6-2 As afirmaçõ es de teste com falha depois que um segundo veículo é usado Para
resolver o problema, você deseja implementar o encapsulamento. Entã o você precisa criar
objetos , cada um com seus pró prios dados. Para implementar o encapsulamento, use
a palavra-chave var para o ano , marca e modelo . Isso tornará essas variá veis privadas para
a funçã o. Observe que a palavra-chave var nã o é usada com getInfo porque
a variá vel getInfo precisa ser pú blica para ser chamada de fora do objeto, mas você nã o
quer que a variá vel getInfo seja global. Atribua getInfo ao objeto atual usando
a palavra - chave this . O resultado é uma classe que encapsula os dados e
expõ e getInfo para recuperar os dados de uma forma controlada como a seguir.
var ano = theYear;
var make = theMake;
var model = theModel;
this.getInfo = function () {
retornar 'Veículo:' + ano + '' + marca + '' + modelo;
};
}
DADOS PRIVADOS IMPORTANTES NÃO SÃO SEGUROS
Na programação orientada a objetos, os dados privados não se destinam a ser

seguros. Os dados privados fornecem encapsulamento para que os detalhes possam
ser ocultados; o usuário vê apenas o que é necessário e não se preocupa com os
detalhes.
Lembre-se de que esta palavra - chave faz referência ao objeto que possui o có digo atual. Da

maneira como o teste está escrito atualmente, esta palavra - chave referencia o objeto
global e getInfo ainda será uma variá vel global. Para resolver o problema, a nova palavra-
chave deve ser usada para criar um objeto desta classe, conforme mostrado no có digo de
teste modificado.
test ("Teste de encapsulamento", function () {
esperar (2);
var car1 = novo veículo (2000, 'Ford', 'Fusion');
var car2 = veículo novo (2010, 'BMW', 'Z4');

esperado = 2.000;
real = ano;
});
Observe que uma nova variá vel é definida, car1 , e atribuída ao objeto que é criado usando
a nova palavra-chave. Depois disso, uma outra nova variá vel é definida, car2 , e é atribuído
o segundo objeto Vehicle criado usando a nova palavra-chave. Duas instâ ncias da classe
Vehicle estã o sendo criadas, o que significa que dois objetos Vehicle estã o sendo
construídos. Cada instâ ncia possui seus pró prios dados e sua pró pria có pia do método
getInfo. O método getInfo é pú blico, mas tem acesso aos dados privados. Um método que é
pú blico, mas tem acesso a dados privados, é chamado de método privilegiado .
Chave
A Figura 6-3 mostra os resultados do teste. Observe que a primeira afirmaçã o foi aprovada,
o que prova que os Termos sã o instâ ncias de objeto separadas, cada uma com seus
pró prios dados. A segunda afirmaçã o falhou. A mensagem de falha informa que o ano é
indefinido, o que prova que o ano nã o está diretamente acessível a partir do teste, que está
no namespace global. Em vez disso, o ano , além da marca e do modelo , é encapsulado no
objeto.
Agora você criou uma classe e construiu objetos a partir da classe, mas há mais para cobrir
na funçã o Vehicle que está sendo usada como uma classe. A funçã o Veículo é conhecida
como função construtora . A nova palavra-chave criou um objeto e executou a funçã o de
construtor para inicializar o objeto, criando as variá veis privadas ano , marca e modelo e
chave
Termos a variá vel getInfo pú blica . Cada instâ ncia tem essas quatro variá veis e a memó ria é
alocada para elas. É isso que você deseja para os dados, mas é isso que deseja para
a variá vel getInfo que faz referência a uma funçã o? A resposta é que depende do que você
está tentando realizar com seu có digo.
269
FIGURA 6-3 Primeira asserçã o bem-sucedida e segunda asserçã o falhada Considere o
seguinte có digo de teste que cria dois objetos Vehicle, mas entã o substitui o có digo
em getInfo do primeiro objeto Vehicle por um có digo diferente. Isso substitui o có digo
no segundo objeto Veículo?
test ("Teste de Substituiçã o de Funçã o", function () {
esperar (2);
car1.getInfo = function () {
return 'This is a Car';
};
var esperado = 'Este é um carro';

var esperado = 'Este é um carro';
});
O resultado do teste é mostrado na Figura 6-4. A primeira afirmaçã o foi bem-sucedida, o

que prova que a funçã o foi substituída com sucesso no primeiro objeto Veículo. A segunda
afirmaçã o falhou, o que prova que a funçã o getInfo do segundo objeto Vehicle nã o foi
substituída. É isso que 270 CAPÍTULO 6 JavaScript e jQuery essenciais
você esperava? É isso que você queria? Você pode ver que em alguns cená rios, esse
comportamento é desejá vel, mas em outros cená rios, você pode querer substituir a funçã o
em todos os objetos. Para fazer isso, você usa o padrã o de protótipo .
NOTA ACESSO A DADOS PRIVADOS
No exemplo, a função de substituição não pode acessar os dados privados porque

a substituição é executada externamente ao Veículo.
FIG URE 6-4 Primeira afirmaçã o bem-sucedida, provando que a funçã o foi

substituída; falhou a segunda afirmaçã o, provando que a funçã o do segundo veículo nã o foi
substituída
Em JavaScript, tudo, incluindo a funçã o, é um tipo de objeto , que tem uma propriedade

de protótipo . O protó tipo em si é um objeto que contém propriedades e métodos que
devem estar disponíveis para todas as instâ ncias do tipo com o qual você está
trabalhando. No entanto, esse protó tipo é tipicamente y especificado externamente para
a funçã o do construtor , portanto, o protó tipo nã o tem acesso a variá veis
privadas. Portanto, você deve expor os dados para que o protó tipo funcione. A seguir está
um exemplo de uso da propriedade prototype para criar um ú nico método getInfo que é
compartilhado em todas as instâ ncias.
este.ano = oAno;
271
this.make = theMake;
this.model = theModel;
Vehicle.prototype.getInfo = function () {
Usando essa classe e o protó tipo, você pode escrever o seguinte teste para garantir que
cada instâ ncia tenha seus pró prios dados e que a funçã o getInfo funcione corretamente.
test ("Teste de instâ ncia usando protó tipo", function () {
esperar (2);
});
Nesse teste, duas instâ ncias da classe Vehicle sã o criadas, cada uma com dados
diferentes. A primeira asserçã o chama getInfo em car1 e verifica se o resultado adequado é
retornado. A segunda afirmaçã o cal s getInfo em car2 e verifica que o resultado correto
é retornado. O resultado é mostrado na Figura 6-5.
FIGURA 6-5 A classe modificada usando a propriedade prototype para criar a funçã o
getInfo 272 CAPÍTULO 6 JavaScript e jQuery essenciais
Agora que você tem uma classe funcional, altere o protó tipo para ver se ele pode ser
alterado em todas as instâ ncias.
test ("Teste de instâ ncia usando funçã o de substituiçã o de protó tipo", function () {
esperar (2);
return 'Car:' + this.ano + '' + this.make + '' + this.model;
var esperado = 'Carro: 2000 Ford Fusion';
igual (real, esperado, ' valor esperado:' + esperado +
var esperado = 'Carro: 2010 BMW Z4';

});
Este teste cria duas instâ ncias Vehicle e, em seguida, altera getInfo. Em seguida, as duas
asserçõ es sã o modificadas para verificar ambas as instâ ncias para ver se estã o usando o
getInfo atualizado. O resultado é mostrado na Figura 6-6.
FIGURA 6-6 A modificaçã o do protó tipo getInf o afetou todas as instâ ncias. Você pode usar
a propriedade prototype ao criar funçõ es que serã o compartilhadas entre todas as
instâ ncias, mas lembre-se de que o protó tipo é definido externamente à funçã o do
construtor, portanto, todas as propriedades devem ser public
ao usar esta palavra - chave. Se você nã o precisa da Liçã o 1: Criando objetos
JavaScript, CAPÍTULO 6
273
substitua funçõ es de instâ ncia individuais e você nã o se importa em tornar seus dados
pú blicos, o protó tipo é eficiente.
■■ Você deseja adicionar um método a todas as instâncias do Veículo. Como você faz

isso?
■■ Adicione o método usando o método de protótipo do objeto Veículo.
Debatendo o protótipo / compromisso privado
Você aprendeu os padrõ es primá rios para criar um objeto JavaScript, mas pode haver um
meio-termo no qual você pode ter dados privados que podem ser lidos criando um método
para recuperar os dados, também conhecido como getter , que nã o tem setter , um método
para definir o valor. Isso exigiria que você escrevesse uma funçã o que é copiada para cada
objeto, mas você deve manter a funçã o o menor possível, conforme mostrado no exemplo
de có digo a seguir.
var ano = theYear;
var make = theMake;

var model = theModel;
this.getYear = function () {return year; };
this.getMake = function () {return make; };
this.getModel = function () {modelo de retorno; };
return 'Vehicle:' + this.getYear () +
'' + this.getMake () +
'' + t his.getModel ();
O teste QUnit para este có digo cria duas instâ ncias de Vehicle e, para cada asserçã o, executa
o método getInfo de cada objeto e verifica o valor adequado. O teste é o seguinte.
test ("Teste de instâ ncia usando protó tipo e getters", function () {
esperar (2);
});
Este teste foi bem- sucedido, portanto, substitua o método getInfo e adicione mais testes. O
có digo de teste a seguir faz isso.
test ("Teste de instâ ncia usando protó tipo e getters", function () {
esperar (4);
v ar esperado = 'Veículo: BMW Z4 2010';
return 'Car Year:' + this.getYear ()
+ 'Make:' + thi s.getMake ()
+ 'Modelo:' + this.getModel ();
};
var esperado = 'Ano do carro: 2000 Marca: Modelo Ford: Fusion'; var real =
car1.getInfo ();

var esperado = 'Ano do carro : 2010 Marca: BMW Model: Z4';
});
O resultado do teste é mostrado na Figura 6-7. Você pode substituir o método getInfo e,

como os dados sã o apresentados como somente leitura, eles estã o disponíveis para serem
usados no novo método. Além disso, os getters privilegiados sã o pequenos, o que minimiza
a quantidade de memó ria consumida quando cada instâ ncia tem uma có pia do
método. Lembre-se de criar apenas métodos getter conforme necessá rio e de mantê-los
pequenos e concisos.
■■ Como você pode expor dados privados como somente leitura?
■■ Adicione um método getter que recupera os dados, mas não pode alterar os
dados.
275
FIGURA 6-7 O uso de getters para expor dados somente leitura como um bom
compromisso Implementando namespaces
Um problema a ser observado é a poluiçã o do namespace global. Conforme seu programa

fica maior e bibliotecas sã o adicionadas, mais entradas sã o adicionadas ao objeto
global. Como você pode minimizar essa poluiçã o de namespace global?
JavaScript nã o tem uma palavra-chave de namespace, mas você pode implementar o

equivalente a um namespace usando técnicas semelhantes à s usadas para criar
objetos. Considere o seguinte exemplo de có digo.
var VehicleCount = 5;
veículos var = novo Array ();
funçã o Car () {}
funçã o Truck () {}

var repair = {
descriçã o: 'velas de igniçã o alteradas',
custo: 100
};
Este exemplo de có digo coloca cinco entradas no namespace global e, conforme o aplicativo
cresce, essa pol uçã o de namespace global também aumenta. Você pode implementar o
padrã o de namespace para resolver o problema. O exemplo a seguir mostra a criaçã o de um
objeto que contém os cinco itens do exemplo anterior.
var myApp = {};
myApp.vehicleCount = 5;
myApp.vehicles = new Array ();
myApp.Car = function () {}
myApp.Truck = function () {}
myApp.repair = {
descriçã o: 'velas de igniçã o alteradas',
custo: 100
};
Neste exemplo, myApp é a ú nica entrada no namespace global. Ele representa o nome do

aplicativo e seu namespace raiz. Observe que a sintaxe literal do objeto é usada para criar
um objeto vazio e associá -lo a myApp. Todo o resto é adicionado ao objeto. Sub-
namespaces também podem ser criados e atribuídos a myApp.
Você pode ver que um namespace foi criado criando um objeto. Embora apenas uma
entrada seja feita no namespace global, todos os membros do myApp sã o acessíveis
globalmente. Além disso, se você criar um namespace para seu aplicativo e seu aplicativo
tiver muitos arquivos JavaScript, você pode querer ter ló gica para criar o objeto de
namespace apenas se ele nã o tiver sido criado. No exemplo a seguir , o có digo para myApp
é modificado para criar o objeto de namespace se ele ainda nã o existir. Este có digo usa o
operador OR para criar um novo objeto se myApp nã o tiver um valor.
var myApp = myApp || {};
Você pode usar as técnicas de objeto já definidas nesta liçã o para tornar alguns membros
do namespace privados e alguns pú blicos. A diferença é que o namespace é um objeto
singleton, portanto, você cria uma ú nica instâ ncia para o namespace. Você nã o precisa se
preocupar com as funçõ es definidas na funçã o de construçã o que consomem memó ria
adicional para cada instâ ncia porque há apenas uma instâ ncia. Aqui está um exemplo do
uso de um imediatamente invocada expressão da função (IIFE) para criar o namespace
myApp em que Car e Truck sã o pú blicos, mas vehicleCoun t , veículos e reparação sã o
privados.
(funçã o () {
this.myApp = this.myApp || {};
var ns = this.myApp;
var VehicleCount = 5;
veículos var = novo Array ();
ns.Car = funçã o () {}
ns.Truck = function () {}
var repair = {
descriçã o: 'modificados os plugues de estacionamento',
custo: 100
};
} ());

277
Um IIFE (pronunciado iffy ) é uma expressã o de funçã o anô nima que possui um conjunto de

parênteses no final dela, o que indica que você deseja executar a funçã o . A chave anô nima
Expressã o de funçã o de termos é colocada entre parênteses para informar ao interpretador

JavaScript que a funçã o nã o está apenas sendo definida; também está sendo executado
quando o arquivo é carregado.
Neste IIFE, a primeira linha cria o namespace myApp se ele ainda nã o existir, o que
representa o objeto singleton que é usado como o namespace. Em seguida,
uma variá vel ns (para namespace) é criada como um alias para o namespace para salvar a
digitaçã o dentro do IIFE, para que ns possa ser usado no lugar de this.myApp. Depois disso,
os membros privados do namespace sã o definidos usando a palavra-
chave var . Car e Truck sã o pú blicos, por isso sã o prefixados com ns .
Se você está se perguntando como criaria um sub-namespace em myApp, o exemplo a

seguir mostra como adicionar um namespace de cobrança sob o namespace myApp.
(funçã o () {
this.myApp = this.myApp || {};
var rootNs = this.myApp;
rootNs.billing = rootNs.billing || {};
var ns = rootNs.billing;
var taxRate = 0,05;
ns.Invoi ce = funçã o () {};

} ());
Este exemplo também implementa um IIFE para criar o namespace. Primeiro, o namespace

myApp é criado se ainda nã o existir e é atribuído a uma variá vel rootNs local para salvar a
digitaçã o dentro do namespace. Em seguida, o namespace de cobrança é criado e atribuído
à variá vel ns local para salvar a digitaçã o dentro do namespace. Finalmente, a propriedade
taxRate privada é definida enquanto a Fatura pú blica é definida.
JavaScript fornece a capacidade de implementar herança, o que é ú til quando você pode

definir o relacionamento entre dois objetos como um relacionamento “é um”. Por exemplo,
uma maçã é uma fruta, um funcioná rio é uma pessoa e um piano é um instrumento. Você
procura relacionamentos “é um” porque eles fornecem uma oportunidade para
implementar a reutilizaçã o de có digo. Se você tiver vá rios tipos de veículos, poderá criar
um Veículo com as características de veículo comuns definidas nele. Apó s a criaçã o do
Veículo, você pode criar cada tipo de veículo e herdar do Veículo para que nã o precise
de có digo duplicado em cada tipo de veículo.
Como exemplo de herança, comece definindo a classe base. Usando o exemplo Vehicle, a

seguir está um exemplo de uma classe base Vehicle.
var Veículo = (funçã o () {
Funçã o do veículo (ano, marca, modelo) {
this.ano = ano;
this.make = make;
this.model = model;
retornar this.ano + '' + this.make + '' + this.model;
};
Vehicle.prototype.startEngine = function () {
return 'Vroom';
};
retorno do veículo;
}) ();
Esta aula está envolvida em um IIFE. O wrapper encapsula a funçã o e o protó tipo do
Veículo. Nã o há tentativa de tornar os dados privados. O có digo funciona da seguinte forma.
■■ Quando o có digo é carregado no navegador, o IIFE é imediatamente invocado.
■■ Uma funçã o aninhada chamada Veículo é definida no IIFE.
■■ O protó tipo da funçã o Veículo define as funçõ es getInfo e startEngine que estã o em
todas as instâ ncias do Veículo.
■■ Uma referência à funçã o do veículo é devolvido, que é atribuído ao Vehi cle variá vel.
Essa é uma ó tima maneira de criar uma classe e todos os exemplos de classes futuras usam
esse padrã o. Para criar objetos Veículo, você usa a nova palavra-chave com
a variá vel Veículo . O teste a seguir cria uma instâ ncia de Vehicle e testa os métodos
getInfo e startEngine.
test ('Teste de herança do veículo', funçã o () {
esperar (2);
var v = novo veículo (2012, 'Toyota', 'Rav4');
var real = v.getInfo ();
var esperado = '2012 Toyota Rav4';
var real = v.startEngine ();
var esperado = 'Vroom';
});
Agora que você tem uma classe pai V ehicle com três propriedades e dois métodos, você
pode criar classes filhas para Car e Boat que herdam de Vehicle. Comece escrevendo um
IIFE, mas, desta vez, passe o Veículo para o IIFE da seguinte forma.
var Car = (funçã o (pai) {
}) (Veículo );
Como Veículo neste exemplo é a variá vel Veículo , nã o a funçã o Veículo, Carro precisa ser
definido apó s Veículo. O veículo é passado para o IIFE e está disponível dentro do IIFE
como pai . Em seguida, a funçã o para Car pode ser adicionada dentro do IIF E. Dentro da
funçã o, adicione quaisquer propriedades adicionais, como wheelQuantity e inicialize para
quatro. Na funçã o, chame o construtor da classe pai para Car para alocar slots de memó ria
para o ano, marca e modelo.
Para chamar a funçã o de construtor pai , use um método cal que existe no objeto Function,
279
que aceita um parâ metro para este objeto e parâ metros para os parâ metros da funçã o que
está sendo chamada, conforme a seguir.
função Car (ano, marca, modelo) {
parent.call (this, year, make, model);
this.wheelQuantity = 4;
return Car;
})(Veículo);
Observe como este exemplo usou o método cal para modificar este objeto; o this é o objeto

Car, entã o a chamada para a funçã o construtora pai cria ano, marca e modelo no objeto
Car. O objeto Function tem outro método, apply, que faz a mesma coisa, mas os parâ metros
extras sã o passados como um array em vez de uma lista delimitada por vírgulas.
Em seguida, a herança deve ser configurada. Você pode pensar que já configurou a herança
porque o exemplo anterior chama o construtor da classe pai e o ano, marca e modelo sã o
criados em Car, mas getInfo e st artEngine nã o foram herdados. A herança é realizada
alterando o objeto de protó tipo Car para ser um novo objeto Vehicle.
Lembre-se de que o protó tipo é o objeto que é clonado para criar o novo objeto. Por padrã o,
o protó tipo é do tipo Object. Depois que o novo Veículo é atribuído ao protó tipo, o
construtor desse Veículo é alterado para ser o construtor do Carro, conforme a seguir.
Car.prototype = novo veículo ();
Car.prototype.constructor = Carro;
funçã o Car (ano, mak e, modelo) {
return Car;
})(Veículo);
Finalmente, você pode adicionar mais métodos ao Car. Neste exemplo, o método getInfo é
adicionado, substituindo o método Vehicle getInfo. O novo getInfo obtém alguma
reutilizaçã o de có digo chamando o método getInfo existente no protó tipo do objeto Vehicle
pai. No entanto, você deve usar o método cal e passar este objeto da seguinte maneira.
Car.prototype = novo veículo ();
Car.prototype.constructor = Carro;
funçã o Car (ano, marca, modelo) {
Car.prototype.getInfo = function () {
return 'Vehicle Type: Car' + parent.prototype.getInfo.call (this);
};
return Car;
})(Veículo);
Isso completa Car, e Boat é semelhante, exceto que Boat tem uma propulsã o
erBladeQuantity, que é inicializada em três, em vez da propriedade wheelQuantity. Além
disso, getInfo retorna o tipo de veículo Barco e chama o método getInfo de Veículo
conforme a seguir.
var Barco = (funçã o (pai) {
Barco.protó tipo = novo veículo ();
Boat.prototype.constructor = Barco;
funçã o Barco (ano, marca, modelo) {
this.propellerBladeQuantity = 3;
Boat.prototype.getInfo = function () {
return 'Vehicle Type: Boat' + parent.prototype.getInfo.call (this);
};
barco de retorno;
})(Veículo);
Além dos testes de veículos já apresentados, você precisa verificar o seguinte para as

classes-filho.
■■ Carro e Barco têm as propriedades herdadas de ano, marca e modelo.
■■ Car tem sua propriedade wheelQuantity e está definida.
■■ Barco tem seu erBladeQuantity de propulsã o e está definido.
■■ Carro e Barco retornam o valor adequado do método getInfo substituído.
■■ Car and Boat retornam o valor adequado do método startEngine herdado.
A seguir estã o os testes de carro e barco.

test ('Teste de herança do carro', function () {
esperar (6);
var c = carro novo (2012, 'Toyota', 'Rav4');
var act al = c.ano;
var esperado = 2012;
var real = c.make;
var esperado = 'Toyota';
var real = c.model;
var esperado = 'Rav4';
var real = c.wheelQuantity;
var esperado = 4;
var real = c.getInfo ();
var esperado = 'Tipo de veículo: Carro 2012 Toyota Rav4';

281
var real = c.startEngine ();
});
test ('Teste de herança de barco', function () {
esperar (6);
var b = barco novo (1994, 'Sea Ray', 'Signature 200');
var real = b.ano;
var esperado = 1994;
var real = b.make;
var esperado = 'Sea Ray';
var real = b.model;
var espera ed = 'Assinatura 200';
var actual = b.propellerBladeQuantity;
var esperado = 3;

var real = b.getInfo ();
var esperado = 'Tipo de veículo: Barco 1994 Sea Ray Signature 200'; igual (real, esperado,
'Valor esperado:' + esperado +
var real = b.startEngine ();
igual (real, esperado , 'Valor esperado:' + esperado +
});
A Figura 6-8 mostra a saída do teste. Todos os testes foram aprovados.

FIGURA 6-8 Os testes de herança aprovados
Resumo da lição
■■ Uma classe é um projeto para um objeto no qual um objeto é uma instâ ncia de uma
classe.
■■ Os três pilares da programaçã o orientada a objetos sã o encapsulamento, herança e

polimorfismo.
■■ A classe da qual você herda é chamada de classe pai, base, super ou generalizada.
A classe que é derivada do pai é chamada de classe chi ld, derivada, sub ou
especializada. Você pode implementar a herança substituindo o protó tipo da classe Child
por uma nova instâ ncia do pai e substituindo seu construtor pela funçã o de construtor da
classe Child.
283
■■ JavaScript é uma linguagem de programaçã o orientada a objetos baseada em

protó tipo. Um protó tipo é o objeto usado para criar uma nova instâ ncia.
■■ O padrã o literal pode ser usado para criar um objeto usando chaves para criar o
objeto. O padrã o fator y pode ser usado para criar um objeto dinâ mico.
■■ JavaScript nã o tem uma palavra-chave de classe, mas você pode simular uma classe
definindo uma funçã o.
■■ A criaçã o de membros privados é possível, mas geralmente envolve a criaçã o de

métodos getter privilegiados que podem consumir memó ria.
■■ A nova palavra-chave constró i uma instâ ncia de objeto.
■■ A função é um objeto. A funçã o que simula uma classe é chamada de função construtora .
■■ Os namespaces podem ser criados usando uma expressã o de funçã o imediatamente

chamada (IIFE).
Revisão da aula
1. Qual é a planta de um objeto chamado?
A. propriedade
B. método
Classe C.
D. evento
2. O que o JavaScript usa como objeto inicial ao construir um novo objeto?
A. protó tipo
B. propriedade
Classe C.
D. evento
3. Como a herança é suportada em JavaScript?
A. Você substitui o protó tipo do objeto filho por uma nova instâ ncia do objeto pai e, em
seguida, substitui o construtor do protó tipo pelo construtor filho.
B. Você chama o método createChild no objeto pai.
C. Você chama o método setParent no objeto filho.
D. JavaScript nã o suporta herança.
Lição 2: Trabalhando com jQuery
Esta liçã o apresenta o jQuery, que está muito bem documentado em http://jquery.com . Os
capítulos subsequentes tiram proveito do jQuery sempre que possível para minimizar a
digitaçã o e se beneficiar das funçõ es auxiliares compatíveis com vá rios navegadores do
jQuery.
■■ Explique os benefícios de usar jQuery.
■■ Use jQuery para selecionar elementos DOM.
■■ Use jQuery para modificar o DOM.
■■ Use jQuery para definir estilos.
Apresentando jQuery
jQuery é uma biblioteca de funçõ es auxiliares compatíveis com vá rios navegadores. Se você
se sentir confortá vel trabalhando com JavaScript, pode pensar que nã o precisa do jQuery,
mas precisa. Você pode minimizar a quantidade de có digo específico do navegador que
deve escrever usando jQuery, um suplemento de có digo aberto que fornece um meio fá cil e
independente do navegador para escrever JavaScript.
jQuery é escrito em JavaScript, portanto, é JavaScript. Você pode ler o có digo-fonte do
jQuery para entender como o jQuery funciona. Provavelmente milhõ es de
desenvolvedores usam jQuery. É fá cil de usar, é está vel, está totalmente documentado e
funciona bem com outros frameworks. A seguir está uma lista das categorias de
funcionalidade que o jQuery oferece.
■■ Métodos Ajax que fornecem chamadas síncronas e assíncronas para o servidor
■■ Métodos de atributos que obtêm e definem atributos de elementos de modelo de objeto

de documento (DOM)
■■ Objeto de retorno de chamada Um objeto que fornece muitos métodos para gerenciar
retornos de chamada
■■ Métodos principais que fornecem funcionalidade jQuery principal
■■ Métodos CSS que obtêm e definem propriedades relacionadas a CSS
■■ Métodos de dados que auxiliam na associaçã o de dados arbitrá rios com elementos DOM
■■ Objeto diferido Um objeto encadeado que pode registrar vá rios retornos de calibraçã o

em cal -
voltar a filas e retransmitir o estado de sucesso ou falha de quaisquer funçõ es síncronas ou

assíncronas
■■ Métodos auxiliares de dimensões para recuperar e definir as dimensõ es do elemento

DOM
■■ Efeitos Técnicas de animaçã o que podem ser adicionadas à sua pá gina da web
■■ Métodos de eventos que fornecem a capacidade de registrar o có digo a ser executado

quando o usuá rio interage com o navegador
Liçã o 2: Trabalhando com jQuery CAPÍTULO 6
285
■■ Métodos de formulários que fornecem funcionalidade ao trabalhar com controles de
formulá rio
■■ Métodos de deslocamento para posicionar elementos DOM
■■ Métodos de seletores que fornecem a capacidade de acessar elementos DOM usando

CSS
seletores
■■ Métodos de atravessamento que fornecem a capacidade de atravessar o DOM
■■ Métodos utilitários de utilitá rios
Esta liçã o apenas arranha a superfície dos recursos do jQuery, mas

as liçõ es subsequentes usam o jQuery sempre que possível.
Introdução ao jQuery
Para começar a usar jQuery, adicione a biblioteca jQuery ao seu projeto. Neste exemplo, a
estrutura de teste QUnit já foi adicionada a um projeto da web vazio e demonstrará
os recursos do jQu ery. Você pode adicionar jQuery baixando a biblioteca em http: // jQuery
.com ou adicionando a biblioteca do NuGet. Para adicioná -lo a partir do NuGet, abra seu
projeto e, no menu Projeto, clique em Gerenciar pacotes NuGet. Na caixa de texto Pesquisar
online, digite jQuery e pressione Enter. Você deve ver uma tela semelhante à mostrada na
Figura 6-9 .
FIGURA 6-9 O gerenciador de pacotes NuGet
Apó s localizar o jQuery, clique no botã o Instalar. A instalaçã o irá iniciar e, em um momento,
você verá uma caixa de seleçã o verde no jQuery, indicando que a instalaçã o foi concluída
com sucesso. Clique no botã o Fechar e observe a janela do Gerenciador de Soluçõ es,
conforme mostrado na Figura 6-10. Se o seu projeto nã o tinha uma pasta Scripts, uma pasta
Scripts foi adicionada. Dentro da pasta Scripts, você encontrará a versã o mais recente do
j Query. Há um arquivo para IntelliSense e um arquivo de biblioteca jQuery
completo. Finalmente, há uma versã o minimizada do jQuery, que é o arquivo que você usa
no momento da produçã o para minimizar o uso da largura de banda.
FIGURA 6-10 A instalaçã o completa do jQuery
Usando j Query
Você provavelmente ainda está tentando entender o que é jQuery e como você se beneficia
de usá -lo, entã o o primeiro recurso a aprender é como usar jQuery para localizar um
elemento ou grupo de elementos.
Primeiro, a biblioteca jQuery deve ser referenciada na pá gina em que você a usará . Neste
primeiro exemplo, o arquivo QUnit Test.html bá sico é usado e a biblioteca jQuery é
adicionada para que o arquivo contenha o seguinte HTML.
<! DOCTYPE html>
<head>
<title> </title>
<script src = "Scripts / jquery-1.8.2.js"> </script>
<script type = "text / javascript" src = "Scripts / default.js"> </script>
<scri pt type = "text / javascript" src = "Scripts / tests.js"> </script>
</head>
<body>
287
<input id = "txtResult" type = "text" /> <br />
</div>
</ b ody>
</html>
Na janela Solution Explorer, o arquivo Test.html foi definido como a pá gina de inicializaçã o
clicando com o botã o direito do mouse no arquivo e escolhendo Definir como pá gina inicial.
No arquivo default.js, a partir da seguinte có digo define uma referência

aos txtInput e txtResult texto b oxes e, em seguida, cal s a funçã o clara para inicializar as
duas caixas de texto para '0'.
var txtInput;
var txtResult;
Claro();
function clear () {
O arquivo tests.js contém um teste simples do método de inicializaçã o. Quando o teste é

executado, as duas afirmaçõ es sã o aprovadas. A seguir está o conteú do do arquivo tests.js.
mó dulo ('QUnit Test Suite', {setup: function () {initialize ();}}); test ("Inicializar teste",
funçã o () {
esperar (2);
var esperado = '0';

}) ;
Agora que o teste está passando, altere algum có digo para usar jQuery. O có digo da
biblioteca jQuery está no namespace jQuery, mas esse namespace também possui um alias
de $ (sinal de dó lar) e pode ser usado da seguinte maneira.
jQuery.someFeature
$ .someFeature
288 CAPÍTULO 6 Essen cial JavaScript e jQuery
Você pode usar qualquer um desses nomes para acessar os recursos da biblioteca,
portanto, para minimizar o pressionamento de teclas, use o símbolo do dó lar. Primeiro,
altere o có digo dentro da funçã o de inicializaçã o do arquivo default.js. O có digo para
localizar os elementos pode ser reescrito para usar os seletores jQuery e CSS da seguinte
maneira.
txtInput = $ ('# txtInput');
txtResult = $ ('# txtResult');
Claro();
Este có digo usa o seletor CSS para recuperar os elementos correspondentes. Neste

exemplo, há apenas uma correspondência para cada um dos seletores jQuery. O símbolo
hash (#) indica que você deseja pesquisar o id do elemento. Quando a instruçã o é
executada, a variá vel txtInput conterá um objeto jQuery, que é um objeto wrapper
que contém os resultados. Isso é diferente do có digo original, no qual
a variá vel txtInput continha uma referência direta ao elemento DOM. O objeto wrapper
possui uma matriz de elementos que correspondem aos critérios de pesquisa ou nã o possui
elementos se nã o houver correspondência. Mesmo que a consulta nã o corresponda a
nenhum elemento, txtInput ainda contém o objeto wrapper, mas nenhum elemento estaria
nos resultados.
Quando um ponto de interrupçã o é adicionado ao có digo apó s as duas instruçõ es serem

executadas, você pode depurar o có digo e explorar o wrapper jQuery , conforme mostrado
na Figura 6-11.
FIGURA 6-11 O objeto wrapper jQuery para txtInput com um elemento Liçã o 2:

Trabalhando com jQuery CAPÍTULO 6
289
Na Figura 6-11, observe que há um elemento de matriz (mostrado como [0]) e a

propriedade length está definida como 1. É assim que você pode verificar o resultado da
consulta. O elemento 0 é uma referência direta ao elemento txtInput DOM.
Quando você executa o teste, ele passa, mas nã o pelo motivo correto; txtInput e txtResult
fazem referência ao wrapper jQuery, nã o ao elemento DOM real . Quando a propriedade
value é definida como '0', uma nova propriedade é criada dinamicamente no objeto jQuery
e definida como '0'. No entanto, a intençã o desta consulta é definir o valor da caixa de texto
como '0'. Para corrigir esse problema, você pode usar o método val no objeto jQuery . O
método val obtém ou define a propriedade value de um controle de formulá rio que possui
uma propriedade value. A seguir está o có digo de teste modificado.
function () {
esperar (2 );
var esperado = '0';
igual ( txtInput.val () , esperado, 'Valor esperado:' + esperado +
'Valor real:' + txtInput.val () );
igual ( txtResult.val () , esperado, 'Valor esperado:' + esperado +
'Valor real:' + txtResult.val () );
});
Depois que as quatro alteraçõ es sã o feitas no teste, a execuçã o do teste mostra que as
asserçõ es de teste falham porque as propriedades de valor nos elementos DOM nã o estã o
sendo definidas. Para corrigir o problema, modifique o có digo na funçã o clear para definir o
valor usando o método val do jQuery . A seguir está o có digo completo.
var txtInput;
var txtResult;
Claro();
function clear () {
txtInput.val ('0');
txtResult.val ('0');
IMPORTANTE ATUALIZA H SUA TELA
Documentos HTML e arquivos JavaScript são normalmente armazenados em cache

pelo navegador, portanto, você pode não ver as alterações feitas apenas executando
a página da web. Para atualizar, pressione Ctrl + F5 depois que a tela for exibida.
Este có digo está completo, os testes passam e as caixas de texto sã o preenchidas com '0'. É
importante que você use o objeto jQuery sempre que possível, para que possa se beneficiar
do cruzamento 290 CAPÍTULO 6 JavaScript essencial e jQuery
recursos compatíveis com o navegador que o jQuery possui. Se precisar fazer referência ao
objeto DOM do wrapper jQuery, você pode fazer da seguinte maneira.
var domElement = $ ('# txtInput') [0];
Nã o se esqueça de que você pode colocar esse có digo dentro de uma instruçã o condicional
que verifica a propriedade length para ver se um elemento existe antes de tentar acessar o
elemento 0 do resultado.
var domElement;
if ($ ('# txtInput'). comprimento> 0) {
domElement = $ ('# txtInput') [0];
Ao aprender um novo idioma ou biblioteca, é sempre bom ter alguma ajuda para evitar que
você fique preso em cada declaraçã o que escreve. Quando você instalou o jQuery, um
arquivo IntelliSense foi adicionado, mas ainda nã o está sendo usado. Por exemplo,
no arquivo default.js , se você digitar uma expressã o jQuery que inclui um seletor e, em
seguida, pressionar a tecla Ponto, você gostaria de ver uma lista vá lida de métodos e
propriedades disponíveis. Antes de configurar o IntelliSense, Figura 6-12
mostra um exemplo do que você vê na janela Inte lliSense ao digitar uma expressã o jQuery

com um seletor e pressionar Ponto.
FIGURA 6-12 A janela Intel iSense quando nã o configurada corretamente para jQuery
291
Todas as sugestõ es do IntelliSense têm um triâ ngulo amarelo de advertência e uma

mensagem é exibida informando: “O IntelliSense nã o foi capaz de determinar uma lista de
preenchimento precisa para esta expressã o. A lista fornecida contém todos os
identificadores no arquivo. ”
Para ativar o IntelliSense, você deve definir uma referência ao arquivo jQuery (nã o o
arquivo IntelliSense) em cada arquivo JavaScript que requer IntelliSense. A seguir está um
exemplo do arquivo default.js com o conjunto de referência.
/// <reference path = "jquery-1.8.2.js" />
var txtInput;
var txtResult;
function in itialize () {
Claro();
function clear () {
txtInput.val ('0');
}
Essa referência foi adicionada apenas arrastando e soltando o arquivo jquery-1.8.2.js no

topo do arquivo. Você pode imaginar que isso pode se tornar um problema porque adiciona
muitas bibliotecas e tem centenas de arquivos JavaScript em um projeto. Você também
pode se beneficiar do IntelliSense em arquivos HTML. Para resolver o problema, a
Microsoft forneceu a capacidade de criar uma lista de referência e, em seguida, apenas
adicionar a lista de referência ao topo dos arquivos JavaScript. Você faz isso adicionando
um arquivo JavaScript _references.js à sua pasta Scripts e, em seguida, referenciando esse
arquivo em seus arquivos JavaScript. Mesmo que você precise adicionar a referência ao
arquivo _references.js a todos os seus arquivos JavaScript, ao adicionar outra biblioteca,
você precisa adicioná -la apenas ao arquivo _references.js.
Por que você precisa do nome especial e por que ele precisa estar na pasta Scripts quando
você precisa fazer referência ao arquivo explicitamente? Se você usar um arquivo chamado
_references.js que está localizado na pasta Scripts, automaticamente terá uma referência a
esse arquivo em suas pá ginas HTML, embora ainda precise adicionar a referência aos seus
arquivos JavaScript. A seguir está o conteú do do arquivo _references.js.
/// <caminho de referência = "qunit.js" />
O Visual Studio localiza automaticamente o arquivo IntelliSense associado, se houver um

com o mesmo nome da biblioteca, no formato libraryName.intellisense.js. Além de usar
arquivos IntelliSense, se eles existirem, o Visual Studio examina todas as bibliotecas
referenciadas e fornece IntelliSense padrã o .
var txtResult;

Claro();
function clear () {
txtInput.val ('0');
Depois de adicionar a referência, se você digitar uma expressã o jQuery, você ativa o
IntelliSense assim que inserir o sinal de dó lar e o parêntese de abertura, conforme
FIGURA 6-13 O jQuery Intel iSense fornecendo ajuda à medida que você digita Observe na
Figura 6-13 que, apó s terminar de digitar o seletor e pressionar Ponto, será fornecida uma
lista vá lida de propriedades e métodos para o objeto wrapper jQuery.
O que acontece se você estiver na funçã o limpar e digitar txtInput e pressionar ponto? O
IntelliSense fazia sentido? Você obtém uma resposta do IntelliSense semelhante à da Figura
6-12.
Simplificando, nã o ative o IntelliSense; txtInput e txtResult sã o variá veis globais que podem

ser definidas para qualquer lugar em seu aplicativo , portanto, o Visual Studio nã o pode
fornecer IntelliSense preciso. No entanto, se você tentar digitar txtInput e pressionar
Period na parte inferior da funçã o de inicializaçã o, obterá o IntelliSense adequado,
semelhante ao da Figura 6-13. A diferença é que o Visu al Studio está examinando seu
có digo e sabe que você acabou de atribuir um objeto jQuery à Liçã o 2: Trabalhando com
jQuery. CAPÍTULO 6
293
txtInput, para que o IntelliSense adequado possa ser fornecido. Para aproveitar as

vantagens do IntelliSense, as variá veis globais sã o eliminadas, conforme mostrado no
arquivo default.js modificado a seguir.
Claro();
function clear () {
$ ('# txtInput'). val ('0');
$ ('# txtResult'). val ('0');
Este có digo é muito menor sem as variá veis globais, mas o teste agora está falhando
porque o teste ainda faz referência à s variá veis globais. Para corrigir o teste, substitua as
referências da variá vel global conforme a seguir.
function () {
esperar (2);
var esperado = '0';
igual ($ ('# txtInput'). val (), esperado, 'Valor esperado:' + esperado +
'Valor real:' + $ ('# txtInput'). Val ());
igual ($ ('# txtResult'). val (), esperado, 'Valor esperado:' + esperado +
'Valor real:' + $ ('# txtResult'). Val ());
});
Quando o teste termina , ele passa.
■■ Você quer economizar tempo ao escrever código JavaScript. Qual biblioteca você

pode usar para atingir esse objetivo?
■■ Use a biblioteca jQuery.
Criando um wrapper jQuery para uma referência de elemento DOM
Você viu como o uso de seletores CSS cria um resultado jQuery, que é um empacotador em
torno de zero para muitos elementos DOM que correspondem ao seletor. Você também
pode criar um wrapper jQuery a partir de uma referência de elemento DOM, conforme
mostrado nos exemplos a seguir.
var doc = $ (documento);
var inn erText = $ (this) .text ();
A primeira expressã o envolve o objeto de documento e atribui o resultado a

uma variá vel doc para que você possa usar os métodos jQuery com o objeto de
documento. A segunda expressã o envolve este objeto, que é um elemento DOM sendo
passado para um ouvinte de evento. Depois de embrulhar o 294 CAPÍTULO 6 JavaScript e
jQuery essenciais
Neste objeto , o método de texto jQuery recupera o texto interno do elemento e o atribui a

uma variá vel innerText .
Em HTML5, você pode usar a funçã o add EventListener para se inscrever em um evento. Se

quiser uma maneira independente do navegador de adicionar um ouvinte de evento, você
pode usar o método jQuery .on. Também existe um método .off correspondente para
remover um ouvinte de evento. O método .on pode ser usado da seguinte maneira .
$ ('# btnSubmit'). on ('click', myFunction);
Neste exemplo, um botã o cujo id é btnSubmit está localizado, usando jQuery e o método .on
para adicionar uma chamada à funçã o myFunction definida pelo usuá rio para o evento click
do botã o. Para remover o ouvinte de evento, use o mesmo có digo, mas substitua o .on
por .off conforme a seguir.
$ ('# btnSubmit'). off ('click', myFunction);
Quando precisar acionar os manipuladores de eventos usando có digo, você descobrirá que
o jQuery pode ajudar. Provavelmente, o motivo mais comum para acionar manipuladores
de eventos usando có digo é testar seu có digo. Usar o gatilho do jQuery ou o método
triggerHandler faz com que o có digo do manipulador seja executado.
O método trigger faz com que o comportamento padrã o do controle seja executado,
enquanto o método triggerHandler nã o. Por exemplo, a execuçã o do método de disparo em
um botã o de envio faz com que a açã o de envio ocorra além da execuçã o do có digo do
manipulador de eventos. Outra diferença é que o método trigger é executado para todos os
elementos correspondidos no eleitor do jQuery , enquanto o método triggerHandler é
executado apenas para o primeiro elemento. A seguir está um exemplo de disparo do
có digo do manipulador de eventos para o evento click em um botã o de envio.
$ ('# btnSubmit'). triggerHandler ('click');
Inicializando o código quando o b rower estiver pronto
Freqü entemente, você precisará executar o có digo de inicializaçã o depois que o documento
HTML estiver carregado e pronto, e o jQuery for executado de forma independente do
navegador para executar o có digo quando o documento for carregado da seguinte maneira.
<script>
$ (document) .ready (function () {
inicializar ();
});
</script>
295
É melhor colocar isso na parte inferior do seu documento HTML e chamar uma funçã o de
inicializaçã o que contém todo o có digo de inicializaçã o.
Resumo da lição
■■ Baixe jQuery de http://jQuery.com ou instale-o do gerenciador de pacotes NuGet.
■■ A biblioteca jQuery está em um namespace jQuery e tem o apelido de dó lar ($).
■■ Use a sintaxe $ (seletor) para localizar elementos do modelo de objeto de documento

(DOM). O resultado de $ (seletor) é um objeto wrapper jQuery contendo de zero a muitos
elementos DOM que correspondem ao seletor. Você pode usar a propriedade length para
descobrir se há alguma correspondência com o seletor.
■■ Use o método val do jQuery para obter ou definir o valor de um elemento DOM que
possui uma propriedade de valor.
■■ Para habilitar o IntelliSense, crie um arquivo _references.js na pasta Scripts e adicione

referências de biblioteca a esse arquivo. Em seus arquivos JavaScript, adicione uma
referência ao arquivo _references.js.
■■ Use os métodos .on e .off do jQuery para adicionar e remover ouvintes de eventos.
■■ Use o $ (document) .ready (function () {initialize ();}); expressã o para adicionar o

có digo de inicializaçã o.
Revisão da aula

1. Você deseja localizar todos os elementos em sua pá gina da Web que foram atribuídos ao
nome de classe CSS Oculto. Qual instruçã o jQuery você pode usar?
A. var oculto = $ ('#Oculto');
B. var oculto = $ ('.Oculto');
C. var oculto = $ ('Oculto');

D. var escondido = $ ('classe = Oculto');
2. Você está interessado em escrever có digo JavaScript orientado a eventos que funcionará
na maioria dos navegadores sem escrever có digo específico do navegador. Como você pode
fazer isso?
A. Use a biblioteca jQuery para ajudar.
B. Use apenas instruçõ es JavaScript que sã o iguais em todos os navegadores.
C. Nã o use nenhum JavaScript.
D. É impossível escrever có digo JavaScript orientado a eventos que nã o seja específico do
navegador.
3. Você está interessado em localizar todos os < p > elementos em sua pá gina da web, entã o
sua declaraçã o é var paragraph = $ ('p'). Qual linha de có digo confirmaria se pelo menos um
elemento foi encontrado?
A. if (pará grafos.existe)
B. if (pará grafos == null)
C. if (paragraphs.length)
D. se (pará grafos.contagem> 0)
Pra exercícios ctice

Neste exercício, você aplica seu conhecimento de programaçã o orientada a objetos

JavaScript modificando a calculadora que está usando para ter um objeto calculator
no namespace calculatorLibrary e alterando o có digo JavaScript para usar jQuery quando
necessá rio.
1. Inicie o Visual Studio Express 2012 for Web. Clique em Arquivo e escolha Abrir Projeto.
Navegue até a soluçã o que você criou no Capítulo 5, “Mais HTML,” e selecione o arquivo
webCalculator.sln. Clique em Abrir.
Se você nã o completou os exercícios do Capítulo 5, pode usar a soluçã o na pasta Iniciar do
Capítulo 6, Exercício 1.
2. Na janela Solution Explorer, clique com o botã o direito do mouse no arquivo
CalculatorTests.html e escolha Definir como pá gina inicial. Pressione F5 para verificar se o
teste é executado e aprovado.
3. Na janela Solution Explorer, adicione jQuery ao projeto clicando com o botã o direito do
mouse no nó do projeto. Escolha Gerenciar Pacotes NuGet. Digite jQuery na caixa de texto
de pesquisa online e clique no botã o de pesquisa. Clique no botã o Instalar no resultado do
jQuery.
4. Adicione um arquivo à pasta Scripts chamada _references.js e, no arquivo, adicione uma

referência a jQuery, QUnit e CalculatorLibrary.
Seu arquivo deve ter a seguinte aparência.
/// <caminho de referência = "qunit.js" />
/// <reference path = "CalculatorLibrary.js" />
5. Abra o arquivo CalculatorLibrary.js e adicione uma referência ao arquivo _references.js.
6. Crie o namespace calculatorLibrary envolvendo o có digo existente no arquivo

CalculatorLIbrary.js com uma expressã o de funçã o imediatamente chamada (IIFE). No
I IFE, crie um alias para calculatorNamespace cal ed ns, o que evitará que você digite o
namespace completo enquanto estiver no IIFE.
297
Seu có digo deve ser semelhante ao seguinte.
/// <caminho de referência = "_ referências.js" />
(funçã o () {
this.calculatorNamespace = this.calculatorNamespace || {};
var ns = this.calculatorNamespace;

// có digo existente aqui ....
}) ();
7. Remova as variá veis que fazem referência a txtInput e txtResult porque jQuery será

usado para acessar esses elementos DOM conforme necessá rio.
A funçã o de inicializaçã o permanecerá no namespace.
8. Cerque as funçõ es numberClick, plusClick, minusClick, clearEntry e clear com um IIFE

que é atribuído a uma propriedade Calculator em calculatorNamespace.
ns.Calculator = (function () {
function numberClick () {
txtInput.value = txtInput.value == '0'?
this.innerText: txtInput.value + this.innerText;

function clearEntry () {
function clear () {
} ());
9. Adicione uma funçã o Calculadora dentro do IIFE, que será a funçã o construtora. Nã o há
có digo para o construtor neste momento. Na parte inferior do IIFE, adicione o có digo para
ret urnar esta funçã o de construtor. Tente fazer isso sozinho, mas se tiver um problema, o
có digo de amostra é mostrado na etapa 10.
10. Modifique as funçõ es numberClick, plusClick, minusClick, clearEntry e clear para

definir essas funçõ es no protó tipo da Calculadora.
O CalculatorLibrary.js deve se parecer com o seguinte.
(funçã o () {
para (var i = 0; i <10; i ++) {
txtResult = document.getE lementById ('txtResult');
document.getElementById ('btnClear')
.addEventListener ('clicar', limpar, falso);
Claro();
function Calculator () {
Calculator.prototype.numberClick = function () {
tx tInput.value = txtInput.value == '0'?
this.innerText: txtInput.value + this.innerText;
};

Calculator.prototype.plusClick = function () {
};
Calculator.prototype.min usClick = function () {
};
Calculator.prototype.clearEntry = function () {
};
Calculator.prototype.clear = function () {
299
};
return Calculator;
} ());
}) ();
11. Na funçã o de inicializaçã o, crie uma variá vel calculadora e atribua um novo objeto
Calculadora a ela. Certifique-se de usar o namespace ao criar o novo objeto Calculadora.
O estado deve ser semelhante ao seguinte.
calculadora var = novo ns.Calculator ();
12. Converta o loop que adiciona ouvintes de evento a cada um dos botõ es de nú mero em
uma ú nica instruçã o jQuery com base na localizaçã o de todos os elementos de botã o que
têm um id que começa com btnNumber.
A declaraçã o deve ser semelhante à seguinte.
$ ('button [id ^ = "btnNumber" ]'). on ('click', calculator.numberClick); Para fazer o có digo

funcionar nesta etapa, altere os ids nos botõ es numéricos.
13. Abra o arquivo default.html e substitua os ids do botã o numérico por

btnNumber X, onde X é o nú mero no botã o.
14. Abra o arquivo Calcula torTests.html e substitua os ids do botã o de nú mero por

btnNumber X, onde X é o nú mero no botã o.
15. No arquivo CalculatorLibrary.js, localize a funçã o de inicializaçã o e exclua as instruçõ es

que definem txtInput e txtResult .
16. Converta o có digo que adiciona ouvintes de evento a btnPlus, btnMinus, btnClearEntry
e btnClear para usar jQuery.
A funçã o de inicializaçã o completa deve ser semelhante à seguinte.
$ ('button [id ^ = "btnNumber"]'). on ('click', calculator.numberClick); $ ('# btnPlus'). on

('click', calculator.plusClick);
$ ('# btnMinus'). on ('click', calculator.minusClick);
$ ('# btnClearEntry'). on ('click', calculator.clearEntry);
$ ('# btnClear'). on ('click', calculator.clear);
Claro();
17. Converta o método numberClick para usar jQuery.

Você pode usar o método de texto jQuery para recuperar o texto interno. O método
concluído deve ser semelhante ao seguinte.
$ ('# txtInput'). val ($ ('# txtInput'). val ( ) == '0'?
$ (this) .text (): $ ('# txtInput'). val () + $ (this) .text ());
};
18. Converta o método plusClick para usar jQuery.
Você deve chamar o método clearEntry, mas nã o pode usar a palavra-chave this para

chamar a entrada clear porque o botã o clicado é referenciado por this . Como há apenas
uma có pia do método clearEntry, e ela está no protó tipo, chame o método clearEntry do
protó tipo da Calculadora. Seu có digo deve ser semelhante ao seguinte.
Calculator.prot otype.plusClick = function () {
$ ('# txtResult'). val (Number ($ ('# txtResult'). val ()) +
Number ($ ('# txtInput'). Val ()));
Calculator.prototype.clearEntry ();
};
19. Converta o método minusClick para usar jQuery.
Calcu lator.prototype.minusClick = function () {
$ ('# txtResult'). val (Number ($ ('# txtResult'). val ()) -
};
20. Converta o método clearEntry e o método clear para usar jQuery.
O arquivo CalculatorLibrary.js preenchido deve ter a seguinte aparência.

(funçã o () {
ns.initialize = function () {
$ ('button [id ^ = "btnNumber"]'). on ('click', calculator.numberClick); $ ('# btnPlus'). on

('click', calculator.plusClick);
$ ('# btnMinus'). on ('click', calculator.minusClick);
$ ('# btnClearEntry'). on ('click', calculator.clearEntry);
$ ('# btnClear'). on ('click', calc ulator.clear);
calculadora.clear ();
function Calculator () {
$ ('# txtInput'). val ($ ('# txtInput'). val () == '0'?
$ (this) .text (): $ ('# txtInput'). val () + $ (this) .text ( ));
};

301
Calculator.prototype.plusClick = function () {
$ ('# txtResult'). val (Number ($ ('# txtResult'). val ()) +
};
Calculator.prototype.minusClick = function () {
$ ('# txtResult'). val (Number ($ ('# txtResult'). val ()) -
};
Calculator.prototype.clearEntry = function () {
$ ('# txtInput'). val ('0');
};
C alculator.prototype.clear = function () {
$ ('# txtInput'). val ('0');
$ ('# txtResult'). val ('0');
};

return Calculator;
} ());
}) ();
21. Abra o arquivo default.html e adicione uma referência à biblioteca jQuery.
Certifique-se de adicionar a referência antes da referência ao arquivo CalculatorLibrary.js

porque esse arquivo usa jQuery. Nã o se esqueça de que você pode arrastar e soltar o
arquivo para criar a referência. O elemento < head > deve ser semelhante ao seguinte.
<head>
<title> Calculadora da web </title>
</head>
22. Na parte inferior do arquivo default.ht ml, altere o có digo para que a funçã o de

inicializaçã o em calculatorNamespace seja executada quando o documento estiver pronto.
O arquivo default.html completo deve se parecer com o seguinte.
<! DOCTYPE html>
<head>
<script type = "text / javascript" src = "Scripts / CalculatorLibrary.js"> </ s cript>
</head>
<body>
<cabeçalho>
</hgroup>
</header>
<nav>
</nav>
<div role = "main">
<table>
<tr>
<td colspan = "4">
<input id = "txtResult" type = "text"
somente leitura = "somente leitura" />
</td>
</tr>
<tr>
<td colspan = "4">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<button id = "btnClearEntry"> CE </button>
</td>
<td>
</td>
</tr>
<tr>
<td>
<button id = "btnNumber7"> 7 </button> </td>
<td>
<td>
<td>
</td>
</tr>
<tr>
<td>
<button id = "btnNumber4"> 4 </button>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
303
</tr>
<tr>
<td>
</td>
<td>
<button id = "b tnNumber2"> 2 </button>
</td>
<td>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<ao lado>
<p> Anú ncios </p>
</aside>
<footer>
</p>
</footer>
</div>
calculatorNamespace.initialize ();
});
</script>
</ body>
</html>
Você deve modificar os testes para usar jQuery.
23. Abra o arquivo CalculatorTests.html e adicione uma referência à biblioteca jQuery.
O arquivo CalculatorTests.html preenchido deve ter a seguinte aparência.
<! DOCTYPE html>
<html xmlns = "http: //www.w 3.org/1999/xhtml">
<head>
<title> </title>
<script type = "text / javascript" src = "Scripts / tests.js"> </script> 304 CAPÍTULO

6 JavaScript e jQuery essenciais
</head>
<body>

<button id = "btnNumber9"> 9 </button> <br />
</div>
</body>
</html>
Você deve modificar o arquivo tests.js para usar jQuery, calculatorNamespace e o objeto
Calculadora.
24. Abra o arquivo tests.js.
25. No arquivo tests.js, adicione uma referência ao arquivo _references.js e modifique a

funçã o do mó dulo para chamar calculatorLibrary.ini tialize () conforme a seguir.
mó dulo ('Calculator Test Suite', {

configuraçã o: funçã o () {
calculatorNamespace.initialize ();
});
26. Modifique o teste de inicializaçã o.
Você nã o precisa definir txtInput e txtResult porque o método de inicializaçã o chama o

método claro para definir essas caixas de texto.
27. Modifique o resto do método para usar jQuery e execute o teste para ver se ele passa.
O teste de inicializaçã o concluído deve ter a seguinte aparência.
test ("Inicializar teste", function () {
exp ect (2);
var esperado = '0';
305
'Valor real:' + $ ('# txtInput'). Val ()); igual ($ ('# txtResult'). val (), esperado, 'Valor
esperado:' + esperado +
' Valor real:' + $ ('# txtResult'). Val ());
});
28. Modifique o botã o Clique em Teste para usar jQuery. Execute o teste para ver se ele
passa. Use o método triggerHandler do jQuery para testar cada botã o.
test ("Teste de clique de botã o", function () {
var buttonQuantity = 10;
esperar (buttonQua ntity * 2);

para (var i = 0; i <buttonQuantity; i ++) {
$ ('# btnNumber' + i) .triggerHandler ('click');
var result = $ ('# txtInput'). val () [$ ('# txtInput'). val (). length - 1]; var esperado = String
(i);
igual (resultado, esperado, 'Valor esperado:' + esperado +
'Valor real:' + resultado);
var comprimento esperado = i <2? 1: i;
equal ($ ('# txtInput'). val (). length, ex pectedLength,
'Comprimento esperado da string:' + comprimento esperado +
'Valor real:' + $ ('# txtInput'). Val (). Comprimento);
});
29. Modifique o Add Test para usar jQuery. Execute o teste para ver se ele passa.
test ("Adicionar Teste", functi on () {
esperar (2);
$ ('# txtInput'). val ('10 ');
$ ('# txtResult'). val ('20 ');
$ ('# btnPlus'). triggerHandler ('clique');
e esperado = '0';

});
30. Modifique o teste de subtraçã o para usar jQuery. Execute o teste para ver se ele passa.
test ("Subtrair Teste", function () {
esperar (2);
$ ('# txtInput'). val ('10 ');
$ ('# txtResult'). val ('20 ');
$ ('# btnMinus'). triggerHandler ('clique');
esperado = '0';
igual ($ ('# txtInput'). val (), esperado, 'Valor esperado :' + esperado +
});
31. Modifique o Clear Entry Test para usar jQuery. Execute o teste para ver se ele passa.
test ("Clear Entry Test", function () {
esperar (1);
$ ('# txtInput') .val ('10 ');
$ ('# btnClearEntry'). triggerHandler ('click');
var esperado = '0';

});
32. Modifique o Clear Test para usar jQuery. Execute o teste para ver se ele passa.
test ("Limpar teste", function () {
esperar (2);
$ ('# txtInput'). val ('10 ');
$ ('# txtResult'). val ('20 ');
$ ('# btnClear'). triggerHandler ('click');
var esperado = '0';
' Valor real:' + $ ('# txtResult'). Val ());
});
Neste ponto, você deve ser capaz de executar todos os testes e todos devem passar.
33. Clique com o botã o direito do mouse no arquivo default.html e escolha Definir como
pá gina inicial. Para ver se sua calculadora ainda funciona, pressione F5 para iniciar
a depuraçã o do aplicativo.
34. Tente inserir dados e clicar nos sinais de mais e menos.
Pode ser necessá rio atualizar a tela, mas a calculadora deve estar funcionando.

capítulo.
■■ Exercício 1 Aprenda mais sobre objetos JavaScript adicionando mais recursos à

calculadora que você criou no exercício prá tico .
■■ Exercício 2 Aprenda mais sobre jQuery explorando o site jQuery em http://jQuery.com .

307
Respostas
Lição 1
1. Resposta correta : C
A. Incorreto: uma propriedade é uma variá vel definida em um objeto.
B. Incorreto: um método é uma funçã o definida em um objeto.
C. Correto: uma classe é um projeto para um objeto.
D. Incorreto: Um evento ocorre a partir de uma entrada externa, normalmente y de uma
entrada do usuá rio.
A. Correto: O protó tipo é o objeto inicial que é clonado ao criar um novo objeto.
B. Incorreto: uma propriedade é uma variá vel definida em um objeto.
C. Incorreto: uma classe é um projeto para um objeto.
D. Incorreto: Um evento ocorre a partir de uma entrada externa, normalmente y de uma

entrada do usuá rio.
A. Correto: você substitui o protó tipo do objeto filho por uma nova instâ ncia do objeto pai
e, em seguida, substitui o construtor do protó tipo pelo construtor filho.
B. Incorreto: o método createChild nã o é um método vá lido.
C. Incorreto: O método setParent nã o é um método vá lido.
D. Incorreto: JavaScript oferece suporte à herança substituindo o protó tipo do objeto filho

por uma nova instâ ncia do objeto pai e, em seguida, substituindo o construtor do protó tipo
pelo construtor filho.
Lição 2
1. Resposta correta : B
A. Incorreto: O uso do símbolo hash (#) no seletor CSS indica que você deseja localizar um
elemento com base em seu id.
B. Correto: O uso do ponto (.) No seletor CSS indica que você deseja localizar os elementos
que correspondem ao nome da classe CSS.
C. Incorreto: fornecer um nome para um seletor CSS indica que você deseja localizar os
elementos que possuem esse nome de tag.
D. Incorreto : The var hidden = $ ('class = Hidden'); sintaxe invá lida.
308 CAPÍTULO 6 JavaScript essencial e jQue ry
A. Correto: o uso do jQuery o ajudará a criar có digo independente do navegador orientado

a eventos.
B. Incorreto: O có digo para criar e assinar eventos é específico do navegador.
C. Incorreto: você precisa usar JavaScript para escrever o có digo n da unidade de evento .
D. Incorreto: Use a biblioteca jQuery para escrever có digo independente do navegador.
A. Incorreto: jQuery nã o possui uma propriedade existing.
B. Incorreto: Mesmo se nenhum elemento for encontrado, o jQuery retornará um objeto

wrapper.
C. Correto: Se nenhum elemento for encontrado, a propriedade length será 0, que se

converte em um booleano falso.
D. Incorreto: jQuery nã o tem uma propriedade de contagem.
309
CAPÍTULO 7
Trabalhando com formulários
Os capítulos anteriores cobrem muitas informaçõ es bá sicas sobre a criaçã o e manipulaçã o

de documentos HTML. Ainda nã o foi explicado como obter as informaçõ es de volta para o
servidor. Para isso, você precisa entender como funcionam os formulá rios e como criá -
los. Este capítulo fornece as informaçõ es de que você precisa para realizar essas tarefas.
■■ Liçã o 1: Compreendendo os formulá rios 311
■■ Liçã o 2: Validaçã o de formulá rio 324
Lição 1: Noções básicas sobre formulários
Um formulá rio é responsá vel por coletar dados e enviá -los a algum lugar. Na maioria dos
casos, os dados sã o enviados de volta ao servidor para processamento. Como o
processamento do lado do servidor ainda nã o foi explicado, você enviará os dados para um
endereço de e-mail. Esta nã o é uma prá tica recomendada; na verdade, você nunca deve
fazer isso porque expõ e seu endereço de e-mail ao pú blico. No entanto, essa técnica fornece
uma etapa intermediá ria para ajudá -lo a entender o lado do navegador dos formulá rios
antes que o processamento do lado do servidor seja discutido.
Para entender como os formulá rios funcionam, você precisa ter um conhecimento bá sico
de como funciona o protocolo HTTP. Esta liçã o fornece a introduçã o necessá ria ao
protocolo HTTP e discute a implementaçã o do formulá rio.
311

■■ Compreenda as açõ es bá sicas do protocolo HTTP.
■■ Entenda como os dados sã o enviados ao servidor.
Compreendendo as comunicações na web
É importante entender as funçõ es do servidor, navegador e HTTP para desenvolver

aplicativos da web. Quando ocorre a comunicaçã o na web, a sequência pode ser
generalizada nas seguintes etapas:
1. O usuá rio navega até um site da Web, o que faz com que o navegador inicie uma
solicitaçã o de recurso do servidor da web.
2. O protocolo HTTP envia uma solicitaçã o GET ao servidor da web.
3. O servidor da web processa a solicitaçã o.
4. O servidor da web envia uma resposta ao navegador da web, também usando o
protocolo HTTP.
5. O navegador processa a resposta, fazendo com que uma pá gina da web seja exibida.
6. O usuá rio insere dados em um formulá rio na pá gina da web e clica no botã o Enviar que
faz com que os dados sejam enviados de volta ao servidor da web.
7. O protocolo HTTP envia os dados de volta ao servidor.
8. O servidor da web processa os dados.
9. O servidor da web envia a resposta de volta ao navegador por meio do protocolo HTTP.
10. O navegador da web processa a resposta, exibindo a pá gina da web.
O servidor web
Os servidores da Web originalmente eram responsá veis apenas por receber e tratar as
solicitaçõ es dos navegadores por meio de HTTP. O servidor da web manipulou a solicitaçã o
e enviou uma resposta de volta ao navegador da web e, em seguida, o servidor da web
fechou a conexã o e liberou todos os recursos que estavam envolvidos na
solicitaçã o. Liberar todos os recursos era fundamental porque o servidor da web precisava
lidar com milhares de solicitaçõ es por minuto. As pá ginas da web originais eram pá ginas
HTML simples e está ticas. O ambiente da web foi considerado sem estado porque nenhum
dado foi mantido no servidor da web entre as solicitaçõ es do navegador da web e a conexã o
foi fechada apó s a chave
Termos a resposta, conforme mostrado na Figura 7-1.
312 CAPÍTULO 7 Trabalhando com formulá rios

FIGURA 7-1 O modelo de solicitaçã o / resposta do modelo sem estado dos servidores da
Web agora oferece serviços que vã o muito além dos servidores da Web originais. Agora, os
servidores da web também lidam com solicitaçõ es de pá ginas que contêm có digo que será
executado no servidor e responderá com os resultados da execuçã o do có digo, conforme
mostrado na Figura 7-2. Os servidores da web agora mantêm o estado (dados) entre as
solicitaçõ es da pá gina da web, para que o desenvolvedor possa conectar muitas pá ginas
para formar um aplicativo da web. A maioria dos sites agora sã o configurados como
aplicativos da web contendo muitas pá ginas da web. A ideia de um servidor da web
entregar uma ú nica pá gina ao navegador da web e, em seguida, fechar a conexã o está
desatualizada. Os servidores da web agora implementam recursos “keep alive” para
conexõ es que fazem com que os servidores da web mantenham as conexõ es com os
navegadores da web abertas por um período de tempo com antecipaçã o de solicitaçõ es de
pá ginas adicionais de um navegador da web.
FIGURA 7-2 Servidores da Web que mantêm conexõ es e mantêm estatísticas em todas as

solicitaçõ es de pá gina. Liçã o 1: Noçõ es bá sicas sobre formulá rios CAPÍTULO 7
313
O navegador da web
O navegador da web fornece um meio independente de plataforma de exibir pá ginas da

web que foram escritas em HTML. O HTML foi projetado para renderizar em qualquer
sistema operacional sem impor restriçõ es ao tamanho da janela. O HTML foi projetado para
fluir, agrupando o texto conforme necessá rio para caber na janela do navegador. O
navegador da web também exibe imagens e responde a hiperlinks.
Quando uma solicitaçã o de pá gina da web é enviada ao servidor da web, o resultado

é exibido no navegador da web, limpando a tela do navegador e exibindo a nova pá gina da
web.
Embora a funçã o do navegador seja apenas apresentar dados e coletar dados, novas
tecnologias do lado do cliente estã o surgindo todos os dias e permitem que os navegadores
sejam mais robustos, portanto, é mais simples desenvolver uma pá gina da Web e, ao
mesmo tempo, melhorar a experiência do usuá rio. Tecnologias como JavaScript assíncrono
e XML (AJAX) permitem que os navegadores da web se comuniquem com os servidores da
web sem limpar as pá ginas da web existentes da janela do navegador.
Noções básicas de protocolo HTTP
HTTP (Hypertext Transfer Protocol) é o protocolo da web. O protocolo HTTP é um

protocolo baseado em texto, portanto, os comandos de texto sã o enviados ao
servidor. Usando um programa sniffer de rede, você pode ver os comandos enviados e
as respostas recebidas. O Microsoft Internet Explorer possui um sniffer de rede integrado
que faz parte das ferramentas do desenvolvedor e que você pode acessar pressionando a
tecla de funçã o F12, que exibe a janela de ferramentas do desenvolvedor. A Figura 7-3
mostra a janela de ferramentas do desenvolvedor apó s capturar algum trá fego de rede.
FIGURA 7-3 A janela de ferramentas do desenvolvedor mostrando o trá fego da rede Esta
janela exibe todo o trá fego ao navegar para um site e possui as seguintes colunas.
■■ URL O endereço do recurso que está sendo acessado, que pode ser um endereço
relativo ou um endereço absoluto
■■ Método O comando HTTP sendo enviado ao servidor
■■ Resultado Um có digo de resultado numérico
■■ Tipo O tipo MIME (Multipurpose Internet Mail Extensions) do recurso que está sendo

acessado
■■ Recebido A quantidade de bytes transferidos
■■ Demorado O tempo gasto para a solicitaçã o
■■ Iniciador O gatilho da solicitaçã o
■■ Timings Um grá fico de tempo sequencial que transmite uma linha do tempo das
solicitaçõ es Quando o usuá rio digita http://gjtt.com para navegar até este site, a primeira
entrada mostra que o có digo de resultado da solicitaçã o é 302, que é um indicador o fa
redirect. Nesse caso, o redirecionamento foi
para http://www.gjtt.com/Pages/default.aspx . Existem muitos có digos de retorno HTTP,
que sã o divididos em categorias com base no primeiro dos três dígitos do có digo de
retorno. A seguir descreve as categorias de có digos de status de retorno.
■■ 1xx mensagem informativa
■■ 2xx Success
■■ Redirecionamento 3xx
■■ 4xx cliente erro
■■ 5xx Erro de servidor
A segunda solicitaçã o é para a pá gina http://www.gjtt.com/Pages/default.aspx , que retorna
um có digo de resultado de 200, indicando sucesso. Quando o HTML resultante é retornado
dessa solicitaçã o, o HTML contém links para folhas de estilo, que sã o consequentemente
solicitadas pelo navegador.
O HTML também contém imagens solicitadas.
Compreender o método HTTP
O método HTTP, também conhecido como verbo HTTP , representa o comando enviado ao

servidor. Na Figura 7-3, todas as solicitaçõ es ao servidor usaram o método GET, que é
usado para Key
Os termos solicitam um recurso. A seguir está uma lista dos valores de método vá lidos.
■■ OPÇÕES A Reque st para obter informaçõ es sobre as opçõ es de comunicaçã o

disponíveis. Este método permite que o navegador determine as opçõ es e requisitos
associados a um recurso sem recuperá -lo.
■■ GET Uma solicitaçã o para recuperar um recurso, como um arquivo HTML ou

um arquivo de imagem.
■■ HEAD Opera como o método GET, exceto que o servidor nã o retorna um corpo de

mensagem na resposta. O método HEAD recupera metadados sobre um recurso.
■■ Solicitaçã o POST para que o servidor aceite os dados enviados do cliente para

modificar os dados existentes do servidor.
■■ PUT Solicitaçã o para o servidor aceitar os dados que estã o sendo enviados do cliente
para inserir novos dados do servidor.
■■ DELETE Solicitaçã o para o servidor excluir um recurso específico.
■■ TRACE Invoca um loopback remoto da camada de aplicativo da mensagem de

solicitaçã o, que permite ao cliente ver o que o servidor está recebendo. Isso é normalmente
usado para informaçõ es de teste ou diagnó stico.
Liçã o 1: Noçõ es bá sicas sobre formulá rios CAPÍTULO 7
315
■■ CONNEC T Usado com um proxy que pode mudar dinamicamente para ser um tú nel.
■■ DEBUG Nã o definido na especificaçã o HTTP / 1.1; inicia a depuraçã o do

ASP.NET. Informa o Visual Studio 2012 sobre o processo ao qual o depurador será anexado.
Quando você navega para uma pá gina da web, o método GET é usado para recuperar a
pá gina do servidor. Se a pá gina contém um formulá rio para coleta de dados do usuá rio e os
dados sã o enviados para o servidor, o navegador executará o método POST e repassará os
dados para o servidor. No Capítulo 8, “Sites e serviços”, você vê como pode usar GET, POST,
PUT e DELETE para executar operaçõ es de criaçã o, recuperaçã o, atualizaçã o e exclusã o
(CRUD), que você pode usar ao modificar dados.
Envio de dados do formulário para o servidor da web
Você pode usar o elemento HTML < form > para criar um formulá rio da web que coleta
dados e os envia ao servidor da web ou a outro local, como um endereço de e-mail. Um uso
típico do
O elemento < form > é o seguinte.
<form method = "post" action = "getCustomer.as px"> Insira o ID do cliente:
<input type = "text" name = "Id" />
<input type = "submit" value = "Get Customer" />
</form>
Este formulá rio solicita que o usuá rio insira uma ID de cliente, exibe uma caixa de texto que
coleta a ID de cliente desejada e exibe um botã o de envio que inicia o envio de dados para o
servidor da web. O método do formulá rio indica o método HTTP a ser usado ao enviar os
dados para o servidor. A açã o é uma URL absoluta ou relativa do recurso que receberá os
dados.
Envio de dados ao enviar um formulário
Nem todos os elementos podem enviar dados quando o botã o Enviar é clicado. Para
simplificar, os elementos que podem enviar dados no envio serã o chamados de elementos
de envio de formulário . Existem muitos novos tipos de entrada com HTML5. Se o
navegador nã o reconhecer o tipo de entrada, ele cairá
Os termos voltam a tratar a entrada como uma caixa de texto. A seguir está uma lista dos
elementos de envio de formulá rio disponíveis em HTML5.
■■ <textarea> Um controle de entrada de texto multilinha. O atributo cols indica a largura

desejada da < textarea > com base na quantidade de colunas que você
deseja. O elemento < textarea > possui um atributo maxlength que pode ser definido para
restringir a quantidade de caracteres que o < textarea > aceitará . Você também pode definir
um atributo de espaço reservado para fornecer uma pequena dica ao usuá rio até que o texto
seja inserido. O atributo wrap pode ser definido como soft ou hard .
Definir como suave (o padrã o) nã o insere avanços de linha nos dados postados. Definir
como hard insere avanços de linha com base na configuraçã o do atributo cols.
■■ < selecionar> Uma lista suspensa contendo elementos de < opção >, que sã o os itens da

lista.
O elemento < select > tem um atributo múltiplo que especifica que você deseja permitir 316

CAPÍTULO 7 Trabalhar com formulá rios
vá rias seleçõ es. O atributo mú ltiplo é um atributo booleano. Você pode mudar o
< selecione > elemento de uma lista suspensa para uma lista, definindo o atributo
de tamanho para a quantidade de itens que devem ser exibidos como uma lista. Se o
tamanho for menor que a quantidade de itens na lista, a lista exibirá uma barra de
rolagem. O elemento < opção > possui um atributo selecionado para indicar que a opçã o
está selecionada. O atributo selecionado é um atributo booleano. Você pode usar o jQuery
para localizar todos os elementos de < opção > selecionados usando o seguinte seletor.
$ ('opçã o: selecionada')
■■ <button> Um botã o clicá vel que pode ter conteú do HTML, como um elemento < img >, e
pode ser configurado como um botã o de envio usando o atributo de tipo , que pode ser
definido como botão (padrã o), redefinir ou enviar .
■■ <input type = 'button'> Um botã o clicá vel que exibe um prompt de texto.
■■ <input type = 'checkbox'> Uma caixa de seleçã o. Além de ter um atributo de valor , a

caixa de seleçã o possui um atributo marcado que pode ser lido e
definido. O atributo checke d é um atributo booleano. Você pode usar jQuery para localizar
todas as caixas de seleçã o selecionadas usando o seguinte seletor.
$ ('input [type = checkbox]: verificado')
■■ <input type = 'color'> Um seletor de cores.
■■ <input type = 'date'> Um controle apenas de data (sem hora).

■■ <input type = 'datetime'> Um controle de data e hora com base no fuso horá rio UTC.
■■ <input type = 'datetime-local'> Um controle de data e hora (sem fuso horá rio).
■■ <input type = 'email'> Um campo de endereço de e-mail.
■■ <input type = 'file'> Um campo de seleçã o de arquivo e um botã o Browse para enviar

arquivos.
■■ <input type = 'hidden'> Um campo de entrada oculto. Use o campo de entrada oculto

quando quiser enviar dados calculados do JavaScript para o servidor. O có digo JavaScript
pode obter e definir o valor conforme necessá rio. Nunca armazene segredos neste
elemento porque ele deve ser oculto e nã o deve ser seguro. É muito fá cil ver esse elemento
visualizando o có digo-fonte da pá gina da web.
■■ <input type = 'image'> Um botã o de envio de imagem.
■■ <input type = 'month'> Um controle de mês e ano.
■■ <input type = 'number'> Um campo numérico.
■■ <in put type = 'password'> Um campo de senha no qual os caracteres sã o mascarados.
■■ <input type = 'radio'> Um botã o de opçã o. Além de ter um atributo de valor , o botã o
de opçã o tem um atributo marcado que é legível e configurá vel. O atributo verificado é um
atributo booleano. Você pode usar o jQuery para localizar todos os botõ es de opçã o
selecionados usando o seletor a seguir.
$ ('input [type = radio]: verificado')
317
■■ <input type = 'range'> Um controle para inserir um valor numérico quando o valor
exato nã o é importante. Em navegadores mais recentes, isso é renderizado como um
controle deslizante e é comumente referido como um controle deslizante. Este controle tem
um atributo de valor , que é o valor atual do controle deslizante. O atributo min é o valor
mínimo configurá vel (o padrã o é 0). O atributo max é o valor má ximo configurá vel (o
padrã o é 100). O atributo step define a granularidade do valor, que é a quantidade de
mudança que o valor terá quando o controle deslizante se mover (o padrã o é 1). O atributo
step deve ser um int, a menos que o valor min seja definido como um valor nã o int.
■■ <input type = 'reset'> Um botã o que redefine todos os valores do formulá rio para os
valores padrã o; observe que isso nã o envia dados quando o formulá rio é enviado .
■■ <input type = 'search'> Um campo de texto para inserir uma string de pesquisa.
■■ <input type = 'submit'> Um botã o de envio.
■■ <input type = 'tel'> Um campo de nú mero de telefone.
■■ <input type = 'text'> Um campo de texto de linha ú nica cuja largura padrã o é de 20
caracteres.
Este é o padrã o se o atributo type nã o for fornecido.
■■ <input type = 'time'> Um controle para inserir uma hora (sem fuso horá rio).
■■ <input type = 'url'> Um campo de URL.
■■ <input type = 'week'> Um controle de semana e ano (sem fuso horá rio).
Usando o elemento < label >
O elemento < rótulo > pode ser usado para ró tulos que ajudam o usuá rio a identificar o
elemento de envio do formulá rio. Considere o seguinte formulá rio HTML.
<form method = "post" action = "getCustomer.aspx"> Insira o ID do cliente:
</form>
Neste formulá rio, “Enter Customer ID:” pode ser colocado dentro de um elemento < label >
como a seguir.
<form method = "post" action = "getCustomer.aspx">
<label for = "Id"> Insira o ID do cliente: </label>
</form>
Quando o texto é colocado em um elemento < label >, o usuá rio nã o vê nenhuma

diferença. Quando o usuá rio clica no texto do ró tulo, o elemento Id obtém o foco. Isso
fornece melhor funcionalidade para usuá rios de mouse ou de tablet. Observe que o ró tulo
possui um atributo for , que deve conter o id do elemento que receberá o foco quando o
usuá rio clicar no texto.
Outro benefício interessante de usar o ró tulo é que você pode atribuir regras de estilo ao
elemento < rótulo >. O seguinte é uma regra de estilo típica para o elemento < label >.
ró tulo {
limpar ambos;
display: bloco;
flutuar: esquerda;
largura: 125px;
Este estilo exibe o elemento < label > como um bloco em vez de embutido e limpa os blocos
anteriores. O estilo é definido para flutuar para a esquerda e ter 125 pixels de largura. Se
você tiver vá rias entradas, pode alinhar as entradas verticalmente usando
o elemento < rótulo > e definir sua largura.
Especificando os formulários pai
Versõ es anteriores de HTML exigiam que o elemento de envio de formulá rio estivesse em
um formulá rio para enviar seus dados. Isso pode se tornar um problema quando os
elementos de envio do formulá rio estã o espalhados em uma pá gina da Web e mais de um
formulá rio está na pá gina. Com HTML5, os elementos de envio de formulá rio têm
um atributo de formulário que pode ser definido como o id de um ou
mais elementos < form >, e os elementos de envio de formulá rio nã o precisam mais estar
dentro de um elemento < form >. A flexibilidade de um elemento de envio de
formulá rio pertencente a mais de um elemento < form > é especialmente ú til. Firefox,
Opera, Chrome e Safari implementam o atributo form, mas, até o momento, o Internet
Explorer 10 nã o.
Acionando o envio do formulário
O disparo do envio do formulá rio faz com que o navegador reú na os dados do elemento de
envio do formulá rio associado e os envie ao URI especificado no atributo de açã o do
formulá rio, usando o método HTTP especificado do formulá rio. Para acionar o envio de um
formulá rio, você pode usar qualquer um dos seguintes elementos .
<button type = 'submit' name = 'submitButton'> Enviar </button>
<input type = 'submit' name = 'submitButton' value = 'Submit' />

<input type = 'image' src = '/ images / submit.gif' alt = 'Enviar' /> Além disso, você pode
usar JavaScript para enviar um formulá rio executando o método submit de jQue ry no
elemento do formulá rio. Considere o seguinte documento HTML que contém
um elemento < form > cujo id é myForm.
<! DOCTYPE html>
<head>
<title> </title>
<script src = "Scripts / jquery-1.8.2.js"> < / script>
</head>
<body>
<form id = "meuFormulá rio">
Carro favorito:
319
<selecione o nome = "favoriteCar">
<option> Ford Fiesta </option>
<option value = "Chevy"> Chevrolet </option>
<option> BMW </option>
</select> <br />

Comente:
<input type = "text" name = "comment" />
</form>
<button id = "myButton"> Clique aqui </button>
</body>
</html>
O formulá rio contém uma lista suspensa de

três elementos < opção >. Cada elemento < opção > exibiu conteú do de texto. Além disso,
o elemento < opção > pode ter um atributo de valor . Se o atributo de valor nã o for definido,
o valor padrã o corresponderá ao conteú do do texto . O formulá rio também contém uma
caixa de texto para o usuá rio inserir um comentá rio. O documento HTML faz referência ao
arquivo default.js que contém o có digo a seguir.
$ ('# myButton'). on ('cl ica', submitTheForm);
});
function submitTheForm () {
$ ('# meuFormulá rio'). submit ();
Este có digo anexa a funçã o submitTheForm ao evento click do elemento < button > cujo id é

myButton. O elemento < button > nã o está dentro do formulá rio e seu tipo no tribute nã o
está definido para enviar . Nesse cená rio, o elemento < botão > é programado para chamar
a funçã o submitTheForm, que chama o método jQuery submit para enviar o formulá rio.
No có digo de exemplo, o elemento < form > possui apenas um id, portanto, o atributo do

método será padronizado como GET, e o atributo action será padronizado para a mesma
URL da pá gina. Se o usuá rio selecionar Ford Fiesta, digite Este é o carro de Bob! na caixa
de texto de comentá rio e clica no botã o, você verá a mudança de URL, conforme mostrado
na Figura 7-4.
FIGURA 7-4 O URL muda quando o botã o é clicado
A URL agora inclui QueryString, que é tudo apó s o ponto de interrogaçã o (?). O QueryString
contém o seguinte.
favoriteCar = Ford + Fiesta & comment = This + is + Bob% 27s + car% 21
320 CAPÍTULO 7 Mundo com formas
O QueryString é uma lista de pares de valores de nomes que sã o codificados por URI. Os
espaços tornam-se sinais de mais (+), o apó strofo torna-se% 27 e o ponto de exclamaçã o
torna-se% 21. O separador entre cada nome e valor é o sinal de igual (=), enquanto o
separador entre cada par de valor de nome é o e comercial (&).
■■ Como você pode usar o URL para enviar dados ao servidor?
■■ Adicione um ponto de interrogação (?) Ao URL após o nome da página da web e

inclua o QueryString.
Serializando o formulário
Se você deseja criar a mesma string de pares de valores de nome codificados por URI para
usar em seu có digo, você pode usar o método de serialização jQuery . Este método converte
os dados do formulá rio em uma lista codificada por URI de pares nome-valor. Isso pode ser
ú til quando você deseja postar dados programaticamente no servidor. O método serialize
se parece com isso.
var formData = $ ('# meuFormulá rio'). serialize ();
Se você estiver trabalhando com dados codificados por URI e quiser decodificar os dados,
poderá usar a funçã o decodeURI para decodificar um URI completo ou a funçã o
decodeURIComponent para decodificar um QueryString. Por exemplo, você pode usar o
exemplo de có digo a seguir para serializar os dados do formulá rio e, em seguida,
decodificar os dados.
var formData = $ ('# meuFormulá rio'). serialize ();
dados var = decodeURIComponent (f ormData);

Quando um formulá rio HTML é exibido, o comportamento de foco padrã o é que nenhum
controle tem foco. No passado, os desenvolvedores adicionavam JavaScript para definir o
foco para um controle específico quando a pá gina estava carregada e pronta. O seguinte é
um exemplo de uso de jQuery para definir o foco para a caixa de texto cujo atributo de
nome é comentá rio.
$ ('input [name = "comment"]'). focus ();
});
HTML5 introduz o atributo autofocus para controles de formulá rio. O atributo autofocus é
um atributo booleano e pode ser definido para o comentá rio da seguinte maneira.
<input type = "text" name = "comment" autofocus = "autofocus" /> Liçã o 1: Noçõ es

bá sicas sobre formulá rios CAPÍTULO 7
321
Usando restrições de envio de dados
Para enviar dados, cada elemento de envio de formulá rio deve atender a restriçõ es
específicas, conforme descrito na lista a seguir.
■■ O elemento de envio de formulá rio deve ter seu conjunto de atributos de nome.
■■ O elemento de envio de formulá rio deve ter seu valor definido.
■■ O elemento de envio do formulá rio deve ser definido dentro de um elemento < form >,

mas HTML5
descreve a capacidade de atribuir um id ao formulá rio e, em seguida, fazer referência ao id

do formulá rio em um elemento de envio de formulá rio usando o atributo form . Isso nã o é
compatível com o Internet Explorer 10 e anteriores.
■■ O elemento de envio de formulá rio nã o deve ser desabilitado, mas é permitido que o
elemento de envio de formulá rio seja oculto usando um estilo CSS como display: none .
■■ Se um formulá rio tiver mais de um botã o de envio, apenas o botã o de envio ativado
enviará seu valor.
■■ As caixas de seleçã o devem ser selecionadas para que seus valores sejam enviados.
■■ Os botõ es de opçã o devem ser selecionados para que seu valor seja enviado.
■■ Os elementos < select > devem ter um elemento < option > definido
como selecionado para que seu valor seja enviado.
■■ Os campos de seleçã o de arquivo devem ter pelo menos um arquivo selecionado.
■■ Os botõ es de redefiniçã o nunca enviam dados quando o formulá rio é enviado.
■■ Os elementos do objeto devem ter o conjunto de atributos declarar .
É interessante notar que um elemento de envio de formulá rio nã o precisa ter um id para
que seus dados sejam enviados no envio, e o nome de um tributo nã o precisa ser
exclusivo. Se você tiver vá rios elementos de envio de formulá rio com o mesmo nome, eles
serã o enviados como uma matriz.
Usando POST ou GET
Existem dois métodos HTTP que podem ser usados para enviar os dados do formulá rio de
volta ao servidor da web: GET e POST . Quando o método GET é usado, o QueryString
que contém os dados é anexado ao URL. A QueryString é uma coleçã o de instruçõ es
de chave = valor codificadas por URI , separadas por caracteres e comercial (&), que podem
ser passadas para o servidor da web concatenando um ponto de interrogaçã o (?) Ao final
do URL e, em seguida, concatenando a QueryString do seguinte modo.
http://www.contoso.com/getProduct.aspx?productId=123&color=blue Neste exemplo,

uma solicitaçã o GET é feita ao servidor da web para uma pá gina da web chamada
getProduct
.aspx na raiz do site. A extensã o do arquivo da pá gina da web nã o será .html porque você
precisa enviar os dados para uma pá gina que suporte o processamento do lado do servidor,
como uma pá gina .aspx. O QueryString contém os dados que seguem o ponto de
interrogaçã o (?).
Uma vantagem de usar o verbo GET é que você pode ver e modificar o URL completo
e QueryString na barra de endereço do navegador da web, conforme necessá rio. No
entanto, dependendo do cená rio, isso também pode ser uma desvantagem. O URL completo
e QueryString sã o fá ceis de salvar ou enviar como uma unidade. Por exemplo, você pode
marcar uma pá gina da web contendo dados incluídos na QueryString.
Uma desvantagem de usar o método GET é que o QueryString é limitado em tamanho

pelo navegador da web e servidor da web que você usa. Por exemplo, ao usar o Internet
Explorer e o Internet Information Server (IIS), o limite é 1.024 caracteres. Outra
consideraçã o é que você pode nã o querer permitir que um usuá rio digite o URL e
QueryString diretamente na barra de endereço sem navegar por outras pá ginas da web
primeiro.
Quando você usa o método POST para enviar dados de volta ao servidor da web, os dados
sã o colocados no corpo da mensagem em vez de serem concatenados para a URL. Isso torna
os dados invisíveis, pelo menos para o usuá rio típico. O uso do método POST remove a
restriçã o de tamanho dos dados.
Você pode postar megabytes de dados; embora funcione, o envio de tantos dados pela
Internet pode causar outros problemas, principalmente relacionados à largura de banda,
como erros de tempo limite e problemas de desempenho.
O método POST nã o permite que o usuá rio digite apenas os dados na QueryString porque
esses dados estã o ocultos no corpo da mensagem. Para a maioria dos cená rios, considere
usar o POST
método para enviar dados ao servidor web.
O envio de dados de volta ao servidor costuma ser chamado de PostBack para o servidor

quando o método POST é usado.
Chave
Termos
Resumo da lição
■■ O protocolo HTTP é um protocolo baseado em texto que envia um método, ou verbo,

para indicar o tipo de solicitaçã o que está sendo feita. Os métodos comuns sã o GET e
POST. GET é tipicamente usado para recuperar um recurso; O POST é normalmente usado
para atualizar um recurso.
■■ Os servidores da Web respondem à s solicitaçõ es e enviam um có digo de status de três

dígitos em que 1xx é a informaçã o, 2xx é o sucesso, 3xx é o redirecionamento, 4xx é o erro
do cliente e 5xx é o erro do servidor.
■■ Os dados podem ser enviados ao servidor da web adicionando um elemento < form >
com os elementos de envio do formulá rio . Os elementos de envio do formulá rio sã o
< textarea >, < select >, < input > e
< botão >.
■■ Use um < button type = 'submit' >, < input type = 'submit' > ou < input type = 'image' >
para enviar um formulá rio.
■■ A funçã o de serializaçã o do jQuery converte os dados do formulá rio em

uma lista codificada por URI de pares nome-valor.
■■ O decodeURIComponent pode ser usado para decodificar um QueryString.
■■ O atributo autofocus define o foco quando a pá gina é carregada.
323
Revisão da aula

1. Você está criando uma pá gina da Web que coletará dados e os enviará a um

servidor. Qual elemento você deve implementar para poder enviar dados ao servidor?
A. < nav >
B. < formulário >
C. < textarea >
D. < div >
2. Ao recuperar uma pá gina da web do servidor que contém informaçõ es do cliente, você
deseja poder especificar a id do cliente no URL. O que você pode usar para fornecer o id?
A. o PostBack
B. a QueryString
C. o nome de domínio

D. um ró tulo
3. Você serializou os dados do formulá rio que possuem um elemento < input type =
”email” >. Você deseja desserializar os dados para ver o endereço de e-mail conforme
inserido. Qual funçã o você pode usar?
A. decodeURIComponent
B. desserializar
C. enviar
D. deserializeEmail
Lição 2: validação do formulário
Ao escrever um aplicativo da web, a raiz de todos os contratempos é a entrada do

usuá rio. Se você nã o precisasse coletar dados de um usuá rio, provavelmente teria um
aplicativo da web seguro, mas um aplicativo da web que nã o coleta dados provavelmente
nã o é ú til. Assim que você precisar coletar dados do usuá rio, você abre a porta para seu
aplicativo, portanto, você precisa se certificar de que a entrada do usuá rio é segura. Para
fazer isso, forneça validaçã o de entrada no servidor. A validaçã o no servidor é segura e
garante a integridade dos dados.
O problema com a validaçã o de entrada no servidor é que uma viagem de ida e volta deve
ser feita ao servidor para fazer a validaçã o, e o tempo para fazer a viagem de ida e volta
pode ser irritante para o usuá rio. Para gerenciar esse problema, você pode fornecer
validaçã o de entrada no navegador. No entanto, se você fornecer validaçã o no navegador,
precisará de validaçã o no servidor. O problema 324 CAPÍTULO 7 Trabalhando com
formulá rios
com a validaçã o no navegador é que a validaçã o do navegador é fá cil para um invasor

contornar.
Portanto, você deve fornecer validaçã o do lado do servidor para segurança e validaçã o do

lado do cliente para minimizar o tempo que os usuá rios devem esperar para descobrir que
há um erro de entrada. Esta liçã o discute a validaçã o do lado do cliente que está disponível
em HTML5.
■■ Compreenda a validaçã o de formulá rios HTML5 .
■■ Aplicar validaçã o de formulá rio HTML5.

Validação necessária
Provavelmente, o tipo mais simples de validaçã o de formulá rio é o atributo obrigatório na

maioria dos elementos de envio de formulá rio. O atributo obrigató rio é um atributo
booleano que exige que o usuá rio insira dados antes de enviar ao servidor. Considere a
seguinte forma.
Carro favorito:
<selecionar nome = "favoriteCar" obrigatório = "obrigatório" >
<opçã o > BMW </option>
</select> <br />
Comente:
<input type = "text" name = "comment" required = "required" /> <br /> Email:
<input type = "email" name = "email" obrigatório = "obrigatório" /> <br />
<button type = "submit" name = "submit"> Enviar </button>
</form>
Neste formulá rio, todos os elementos de envio do formulá rio têm atributos
obrigató rios. Quando a pá gina é exibida, nã o há indicaçã o de campos obrigató rios. Se o
usuá rio clicar imediatamente no botã o Enviar, o navegador cancelará o envio e o resultado
será exibido, conforme mostrado na Figura 7-5. O elemento < select > nã o tem a borda
vermelha porque a primeira opçã o é selecionada por padrã o.
Os navegadores exibem erros de validaçã o de maneira diferente. Por exemplo, a mensagem

no Chrome e no Firefox é, “Por favor, preencha este campo,” e a mensagem no Chrome é
prefixada com um ícone.
O Opera e o Internet Explorer têm a mesma mensagem, “Este é um campo obrigató rio”, mas
em vez de uma borda vermelha, o fundo da mensagem é vermelho. Você pode fornecer
regras de estilos CSS para atender à s suas necessidades.
Liçã o 2: Validaçã o da forma, CAPÍTULO 7

325
FIGURA 7-5 Os campos obrigató rios vazios com bordas vermelhas e a mensagem
obrigató ria exibida Uma das razõ es pelas quais HTML5 tem novos tipos de entrada para e-
mail, URL, data e assim por diante, é que a validaçã o pode ser aplicada automaticamente
com base no tipo. No exemplo anterior, o elemento < i nput type = ”email” > fornece
automaticamente validaçã o extra em uma tentativa de garantir que um endereço de e-mail
vá lido seja inserido. A validaçã o extra é diferente com base no navegador. Você
normalmente descobrirá que os navegadores procuram apenas * @ * para ser vá lido,
mas isso pode mudar.
Você também pode fornecer um atributo de espaço reservado na maioria dos elementos de
envio de formulá rio, que fornece um prompt no campo até que o usuá rio insira o primeiro
caractere. No passado, isso exigia muito có digo extra. O que se segue adiciona o marcador
de posiçã o ao exemplo de formulá rio anterior.
Carro favorito:
<selecionar nome = "favoriteCar" obrigató rio = "obrigató rio">
<option> BMW </option>
</select> <br />
Comente:
<input type = "text" name = "comment"

obrigató rio = "obrigató rio" placeholder = "insira um comentário" /> <br /> Email:
<input type = "email" name = "email"
obrigató rio = "obrigató rio" placeholder = "dê-me seu e-mail" /> <br />
</ fo rm>
Quando o formulá rio é exibido, o comentá rio e o endereço de e-mail exibem o texto do
marcador se estiverem vazios. O resultado é mostrado na Figura 7-6.
FIGURA 7-6 O texto do espaço reservado exibido até que o usuá rio insira
os dados Validando a entrada do URL
O elemento < input type = ”url” > valida um URL adicionando o atributo obrigató rio e o
espaço reservado opcional. Além disso, você pode adicionar o atributo pattern para
fornecer uma expressã o regular JavaScript para ajustar a entrada necessá ria. Considere
a seguinte forma.
local na rede Internet:
<input type = "url" name = "website"
obrigató rio = "obrigató rio" padrã o = "https?: //.+" />

</form>
O padrã o afirma que o URL deve começar com http. A letra s é seguida por um ponto de
interrogaçã o (?), O que significa que a letra s é opcional. Depois disso, os dois pontos e duas
barras (: //) sã o obrigató rios. A combinaçã o de ponto final e sinal de adiçã o significa que
você deve fornecer um a vá rios caracteres. A ú ltima parte pode ser ajustada para exigir
pelo menos um ponto ou para definir um limite no nú mero de caracteres.
Quando a pá gina é exibida e o usuá rio insere abc, a validaçã o falha com a mensagem
mostrada na Figura 7-7.
Liçã o 2: Validaçã o de formulá rio CAPÍTULO 7
327
FIGURA 7-7 A validaçã o de URL falha com mensagem incompleta A mensagem de

validaçã o está incompleta. Para implementar o atributo pattern adequadamente, você deve
fornecer um atributo title que dê uma dica ao usuá rio sobre o que é necessá rio. O título
será exibido na mensagem de falha de validaçã o. O seguinte é
o elemento < form > modificado .
local na rede Internet:
<input type = "url" name = "website"
title = "http://contoso.com ou https://contoso.com"
obrigató rio = "obrigató rio" padrã o = "https?: //.+" />
</form>
Depois que o atributo title é fornecido e o usuá rio insere dados invá lidos, a nova mensagem
de erro de validaçã o é exibida, conforme mostrado na Figura 7-8.
FIGURA 7-8 A mensagem de validaçã o de URL com o título fornecido 328 CAPÍTULO

7 Trabalhando com formulá rios
Validando números e intervalos
Use os elementos < input type = ”number” > e < input type = ”range” > para aceitar valores
numéricos. Ambos os elementos aceitam atributos de parâ metro min , max e step . O
atributo da etapa é padronizado para um, se omitido. Considere o
seguinte elemento < form > que contém as entradas de nú mero e intervalo.

Idade atual:
<input type = "número" name = "idade"
min = "18" max = "99" valor = "30"
obrigatório = "obrigatório" /> <br /> Classificaçã o:
<input type = "range" name = "rating"
min = "1" max = "7" valor = "4 " /> <br />
</form>
A Figura 7-9 mostra a pá gina renderizada. O usuá rio deve inserir um valor na entrada
numérica, mas a entrada de intervalo é renderizada como um controle deslizante. Se você
nã o incluir o atributo obrigató rio na entrada de nú mero, poderá deixar o campo vazio, mas
se fornecer um valor, ele deve estar entre os atributos de valor mínimo e má ximo.
FIGURA 7-9 O nú mero renderizado e as entradas de intervalo
A entrada de intervalo é renderizada de maneira diferente em navegadores

diferentes. Além disso, o Internet Explorer exibe uma mensagem pop-up conforme o
controle deslizante é operado; outros navegadores atualmente nã o.
■■ Qual controle é usado para criar um controle deslizante?
■■ Use o elemento < input type = ”range” > com os atributos min, max e value

adequados .
Liçã o 2: Validaçã o de formulá rio CAPÍTULO 7
329
Estilizando as validações
Você pode aplicar regras de estilo a entradas vá lidas e invá lidas implementando regras de
estilo em: vá lido,
: invá lido,: obrigató rio e: pseudo classes opcionais. A seguir está um exemplo de
configuraçã o de pseudo classes para controlar a aparência da pá gina da web.
: vá lido {
borda: entã o tampa de cal;
peso da fonte: normal;
: invá lido {
borda: vermelho só lido;
intensidade da fonte: Negrito;
:requerido{
:opcional{
cor de fundo: LightGray;
As pseudo classes: valid e: invalid sã o opostas. Quando o valor do elemento de envio de

formulá rio é determinado como invá lido, ele corresponde ao seletor: invalid, e quando o
valor do elemento de envio de formulá rio é determinado como vá lido, ele corresponde ao
seletor: valid . Se um elemento de envio de formulá rio tiver o atributo obrigató rio, ele
corresponderá ao seletor: obrigató rio e, se o elemento de envio de formulá rio nã o tiver o
atributo obrigató rio, ele corresponderá ao seletor: opcional.
Resumo da lição
■■ Use o atributo obrigatório para especificar que a entrada é necessá ria.
■■ Os navegadores processam os erros de validaçã o de maneira diferente.
■■ O atributo placeholder fornece um texto de aviso ao usuá rio quando o campo está vazio.
■■ Para criar um controle deslizante, use o elemento < input type = ”range” >.

■■ Você pode fornecer regras de estilo alternativas para elementos de validaçã o
implementando regras de estilo nas pseudo classes: vá lido,: invá lido,: obrigató rio e:
opcional.
Revisão da aula
lesso n. Você pode encontrar as respostas a essas perguntas e explicaçõ es de por que cada
1. Você está criando uma pá gina da web que solicita as informaçõ es do perfil de um novo
usuá rio. A pá gina do arquivo pro requer que o usuá rio forneça um nome de usuá rio e, se
nenhum nome de usuá rio for fornecido, o usuá rio nã o poderá enviar a pá gina ao
servidor. Qual atributo deve ser colocado na caixa de texto do nome do usuá rio para
cumprir esse requisito?
A. aplicada
B. obrigató rio
C. obrigató rio
D. nome de usuá rio
2. Quando você deseja enviar dados de formulá rio ao servidor para atualizar dados no
banco de dados, qual método HTTP você deve especificar para o elemento < form >?
A. POST
B. OBTER
C. CONECTAR
D. ENVIAR
3. Se você deseja adicionar um controle deslizante a uma pá gina da web, qual elemento
você usa?
A. < input type = ”slider” name = ”myslider” /> B. < input type = ”number” name =

”myslider” /> C. < input type = ”submit” name = ”myslider” /> D. < input type =”intervalo”
name =”myslider” /> Practice exercis es

Exercício 1: Crie um formulário de contato
Neste exercício, você aplica seu formulá rio HTML5 e conhecimento de validaçã o de
formulá rio criando uma pá gina Fale Conosco para o aplicativo de calculadora no capítulo
anterior. A pá gina da Web solicitará ao usuá rio o nome e o sobrenome, o endereço de e-
mail e a natureza das comunicaçõ es. Todos os campos serã o obrigató rios.
1. Inicie o Visual Studio Express 2012 for Web. Clique em ARQUIVO e escolha Abrir
projeto. Navegue até a soluçã o que você criou no Capítulo 6, “JavaScript e jQuery
essenciais”. Selecione o arquivo WebCalculator.sln e clique em Abrir.
Se você nã o completou os exercícios do Capítulo 6, pode usar a soluçã o na pasta Iniciar do

Capítulo 7 do Exercício 1.
e escolha Definir como pá gina inicial. Pressione F5 para verificar se sua pá gina inicial é
exibida.
3. Na janela Solution Explorer, copie a pá gina default.html para um novo arquivo HTML
clicando com o botã o direito do mouse no arquivo default.html e escolhendo Copiar. Clique
com o botã o direito do mouse no nó do projeto WebCalculator e escolha Colar.
Isso cria um arquivo denominado Cop y of default.html .
4. Clique com o botã o direito no novo arquivo e escolha Renomear.
5. Nomeie o novo arquivo ContactUs.html e pressione Enter.
331
6. Abra a pá gina ContactUs.html e exclua o elemento < div id = ”calculator” > e seu

conteú do. Exclua o elemento < script > que faz referência ao arquivo CalculatorLibrary.js e
o bloco de script na parte inferior que chama a funçã o de inicializaçã o.
A pá gina ContactUs.html deve ser semelhante à seguinte.
<! DOCTYPE html>
<html xm lns = "http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<cabeçalho>
<h 1> Contoso Ltd. </h1>
</hgroup>
</header>
<nav>
</nav>
<div role = "main">
</div>
<ao lado>
<p> Anú ncios </p>
</aside>
<footer>
</p>
</footer>
</div>
</body>
</html>
7. Altere o conteú do do elemento < title > para Fale conosco .
8. Dentro do elemento < div role = ”main” >, adicione um novo elemento < div > e defina seu

id como ContactUs.
9. Dentro do novo elemento < div >, adicione um elemento < form >. Defina o nome do

formulá rio para ContactForm. Defina o método como GET.
Definir o método como GET permite que você veja quando o formulá rio é realmente
enviado, porque você vê os dados do formulá rio em QueryString no URL. O conteú do
principal deve ser semelhante ao seguinte.
<div id = "ContactUs">
<form name = "ContactForm" method = "get">
</form>
</div>
10. Adicione um elemento < div > contendo um elemento < labe l > e um elemento <input

type = ”text”> para firstName, lastName, emailAddress e message. Certifique-se de atribuir
os atributos id e name de cada elemento de envio de formulá rio.
O formulá rio deve ter a seguinte aparência.
<form name = "ContactForm" meth od = "get">
<div>
<label for = "firstName"> Nome: </label>
<input type = "text" id = "firstName" name = "firstName" />
</div>
<div>
<label for = "lastName"> Sobrenome: </label>
<input type = "text" id = "lastName" name = "lastName" />
</div>
<div>
<label for = "email"> Endereço de e-mail: </label>
<input type = "text" id = "email" name = "email" />
</div>
<div>
<label for = "message"> Mensagem: </label>
<input type = "text" id = "message" name = "message" />
</div>
<div>
<button type = "submit" id = "submit" name = "submit "> Enviar </button>
</div>
</form>
11. Abra o arquivo default.css e, na parte inferior do arquivo, adicione uma regra de estilo
para o elemento < label > que limpa os elementos anteriores e exibe como um bloco que
flutua para a esquerda.
Defina a largura em 125 pixels e a altura em 12 pixels. Defina o alinhamento vertical para a

parte inferior e o preenchimento para 10 pixels.
Seu estilo deve ser o seguinte.
ró tulo {
limpar ambos;
display: bloco;
flutuar: esquerda;
largura: 125px;
altura: 12px;
vertica l-align: bottom;
12. Adicione outra regra de estilo na parte inferior do arquivo default.css

para elementos < input >, mas apenas para elementos < input > que estã o dentro de
um elemento < form >. Defina a largura em 200 pixels. Defina a largura da borda como
média e a cor da borda como hsl (255, 100%, 100%). Defina a altura para 12 pixels e defina
o alinhamento do texto para a esquerda e o alinhamento vertical para o topo. Defina a
família da fonte como Arial e o tamanho da fonte como 12 pontos.
form input {
largura: 200px;
333
largura da borda: média;
cor da borda: hsl (255, 100%, 100%);
altura: 12px;
alinhamento de texto: esquerda;
alinhamento vertical: topo;
13. Adicione outra regra de estilo na parte inferior do arquivo default.css

para elementos < button >, mas apenas para elementos < button > que estã o dentro de
um elemento < form >. Defina a largura para 100
píxeis. Defina a largura da borda como média e a cor da borda como hsl (255, 100%,
100% ).
Defina o alinhamento vertical para cima. Defina a família da fonte como Arial e o tamanho
da fonte como 12
ponto. Defina as margens superior e inferior em 10 pixels. Defina as margens esquerda e

direita para 50
por cento.
botã o de formulá rio {
widt h: 100px;
cor da borda: hsl (255, 100%, 100%);
margem direita: 50%;
margin-bottom: 10px;
margem esquerda: 50%;
A ú ltima coisa que você deve fazer é adicionar um hiperlink na pá gina principal que faz
referência ao arquivo ContactUs.html.
15. Na seçã o < nav >, adicione um elemento <br /> e, em seguida, adicione o hiperlink para
fazer referência ao arquivo ContactUs.html.
Yo ur < nav > seçã o deverá ser parecido com o que é devido fol.
<nav>
<a href="default.html"> Pá gina inicial </a> <br />
<a href="ContactUs.html"> Entre em contato </a>
</nav>
16. Pressione F5 para executar o aplicativo. Clique no link Fale conosco para exibir a pá gina
ContactUs.html. Sem inserir nenhum dado, clique no botã o Enviar.
Observe que o URL mudou e o QueryString é exibido apó s o nome da pá gina. Observe

também que o nome de cada elemento é mostrado, mas nã o há dados porque você clicou no
botã o Enviar sem inserir nenhum dado. O URL se parece com o seguinte.
http: // localhost: 55506 / ContactUs.html? firstName = & lastName = & email = & message
= & submit =
A Figura 7-10 mostra a pá gina ContactUs.html. Quando você vê o QueryString, significa

que o botã o Enviar funcionou. Atualmente, os dados nã o estã o sendo processados em um
servidor.
Isso virá no pró ximo capítulo. Por enquanto, você deseja limitar a capacidade do botã o
Enviar para que ele nã o opere até que os dados sejam inseridos em todos os campos.
FIGURA 7-10 A pá gina ContactUs.html
Exercício 2: adicionar validação ao formulário de contato

ContactUs.html para limpar a pá gina da Web e adicionar validaçã o a ela.
1. Abra o projeto do Exercício 1 .

Exercício 2.
2. Abra o arquivo ContactUs.html.
3. Adicione o atributo necessário aos campos firstName, lastName, email e message.
4. Substitua o atributo type no campo de e-mail por type = ”email”, que fornecerá validaçã o
adicional do endereço de e-mail.
5. Altere a mensagem para um elemento < textarea >.
Seu formulá rio preenchido deve ter a seguinte aparência.
<form name = "ContactForm" method = "get">
<div>
Exercícios prá ticos CAPÍTULO 7
335
<input type = "text" id = "firstName" name = "firstName" obrigató rio = "obrigató rio" />
</div>
<div>
<input type = "text" id = "lastName" name = "lastName" obrigató rio = "obrigató rio" />
</div>
<div>
<input type = "email" id = "email" name = "email" obrigató rio = "obrigató rio" />
</div>
<div>
<text area id = "message" name = "message" required = "required"> </textarea>
</div>
<div>
<button type = "submit" id = "submit" name = "submit"> Enviar </button>
</div>
</form>
6. Adicione um estilo para o elemento < textarea >.
O novo estilo deve ser semelhante ao seguinte.
f orm textarea {
margem: 5px;
largura: 210px;
cor da borda: hsl (255, 100%, 100%);
altura: 100px;

7. Pressione F5 para executar o aplicativo. Nã o insira nenhum dado; basta clicar no botã o

Enviar.
Se o seu navegador oferecer suporte à validaçã o, você verá os erros de validaçã o, conforme
FIGURA 7-11 A pá gina preenchida com erro de validaçã o
Observe que, apó s clicar no botã o Enviar, o URL nã o mudou porque nenhuma tentativa foi
feita para enviar os dados ao servidor. Se você inserir dados em todos os campos e clicar no
botã o Enviar, verá o QueryString com seus dados.
S uggested exercícios práticos

capítulo.
■■ Exercício 1 Aprenda mais sobre o posicionamento adicionando mais elementos < div >

à pá gina da web para definir um cabeçalho e rodapé para a pá gina. Use regras de estilo CSS
para definir a posiçã o.
■■ Exercício 2 Adicione mais elementos à pá gina e tente definir o formato selecionando os

elementos sem usar um id.
■■ Exercício 3: Altere o esquema de cores da pá gina usando valores RGB.
337
Respostas
Lição 1
A. Incorreto: O elemento < nav > define uma seçã o de menu em sua pá gina html.
B. Correto: O elemento < form > é necessá rio para enviar dados de volta ao servidor.
C. Incorreto: O elemento < textarea > coleta dados de texto de formato livre.
D. Incorreto: O elemento < div > é um elemento de uso geral.
A. Incorreto: os dados PostBack nã o sã o visíveis para você.
B. Correto: O QueryString está na URL.
C. Incorreto: O nome de domínio faz referência ao site, portanto, atribuir o id do Cliente ao

nome de domínio fará com que um site diferente seja referenciado.
D. Incorre cção : Uma etiqueta nã o envia seu conteú do ao servidor.
A. Correto: A funçã o decodeURIComponent pode desserializar o QueryString.
B. Incorreto: Embora o jQuery tenha uma funçã o de serializaçã o, ele nã o tem uma funçã o
de desserializaçã o.
C. Incorreto: Embora o jQuery tenha uma funçã o de envio, ele serializa o formulá rio e
envia os dados para o servidor.
D. Incorreto: Nã o há funçã o deserializeEmail.
Lição 2
A. Incorreto: Nã o há atributo imposto.
B. Incorreto: Nã o há atributo de controle.
C. Correto: O atributo obrigató rio indica um campo obrigató rio.
D. Incorreto: Nã o há atributo de nome de usuá rio.
A. Correto: O uso do método POST é geralmente preferido para enviar atualizaçõ es ao

servidor.
B. Incorre cção : O uso do método GET é geralmente preferido para recuperar dados do
servidor.
C. Incorreto: O método CONNECT é usado para estabelecer uma conexã o em tú nel.
D. Incorreto: Nã o há método SEND.
A. Incorreto: Nã o há tipo de controle deslizante.
B. Incorreto: o tipo de nú mero aceita nú meros e os exibe em uma caixa de texto.
C. Incorreto: O tipo de envio cria um botã o de envio.
D. Correto: O tipo de intervalo é renderizado como um controle deslizante.
339
CAPÍTULO 8
Sites e serviços
Os capítulos anteriores apresentaram muitas coisas que você pode fazer no navegador, mas
também pode fazer no servidor. Ao usar tecnologias Microsoft, é comum criar um site
usando Visual Studio .NET, que usa ASP.NET ou tecnologias model, view, control (MVC) que
sã o programadas usando Visual Basic .NET ou C #. Essas tecnologias e linguagens estã o
fora do escopo deste livro, mas você pode aprender a criar um formulá rio sem criar um site
para processá -lo?
Este livro é sobre HTML5, CS S3 e JavaScript; este capítulo cobre serviços da web, usando
JavaScript no servidor da web, o que é possível usando Node.js, uma plataforma construída
no tempo de execuçã o de JavaScript do Google Chrome.
■■ Liçã o 1: Introduçã o ao Node.js 341
■■ Liçã o 2: Trabalhando com serviços da web 364
Lição 1: primeiros passos com Node.js
A plataforma Node.js é construída no tempo de execuçã o JavaScript do Google Chrome para

criar aplicativos de rede rá pidos e escalá veis com facilidade. A plataforma implementa um
modelo de E / S nã o bloqueante orientado por eventos e é leve e eficiente. Esta plataforma
é perfeita para aplicativos em tempo real com grande volume de dados executados em
dispositivos distribuídos.
Usando Node.js, você pode escrever JavaScript que é executado no servidor back-
end. Node.js interpreta e executa seu JavaScript usando a má quina virtual V8 do Google ,
que é o mesmo ambiente de tempo de execuçã o para JavaScript que o Google Chrome usa.
341
■■ Instal Node.js.
■■ Crie uma pá gina da web em Node.js.
Instalando Node.js
Para instalar Node.js em seu computador, baixe a versã o para sua má quina em http: //
nodejs.org/download/ e execute o instalador . Para computadores de 64 bits baseados em

Windows típicos no momento em que este livro foi escrito, este é o arquivo node-v0.8.14-
x64.msi. A instalaçã o exige a aceitaçã o dos acordos de licenciamento. Por padrã o, os
arquivos Node.js sã o instalados na pasta C: \ Arquivos de programas \ nodejs \. Você
encontrará o arquivo node.exe na pasta de instalaçã o, que é o executá vel principal do
Node.js. Você também encontrará uma pasta para mó dulos de nó ; esta pasta contém npm ,
o gerenciador de pacotes do nó . Use o npm para instalar mó dulos em Node.js.
O instalador do Node.js adiciona os locais das pastas Node.js e npm à configuraçã o do

ambiente de caminho para que você possa abrir a janela do prompt de comando
facilmente e executar o programa.
Criando Hel o World a partir de Node.js
Apó s a conclusã o da instalaçã o, você pode criar seu primeiro site Node.js abrindo o prompt
de comando e usando seu editor de texto favorito. Crie um arquivo chamado Hel oWorld.js
contendo o seguinte .
var http = requer ('http');
http.createServer (funçã o (solicitaçã o, resposta) {
response.writeHead (200, {'Content-Type': 'text / plain'});
response.end ('Olá , mundo de Node.js! \ n');
console.log ('Solicitaçã o tratada');
}). listen (8080, 'localhost');
console.log ('Servidor em execuçã o em http: // localhost: 8080 /');
Este é o JavaScript! A primeira linha de có digo indica que o mó dulo http precisa ser
carregado. O mó dulo http é um mó dulo interno de baixo nível que é altamente
otimizado para desempenho.
A pró xima linha usa o mó dulo http para criar um objeto de servidor. A funçã o createServer
aceita um ú nico parâ metro que é uma funçã o anô nima e tem objeto de solicitaçã o e
parâ metros de objeto de resposta. Dentro da funçã o, você inclui todo o có digo para
executar seu site ou, melhor ainda, para fazer chamadas para outras funçõ es que
manipulam seu site. Este exemplo nã o faz nada com o objeto de solicitaçã o, mas usa o
objeto de resposta para escrever um cabeçalho HTTP no qual 200 significa sucesso e o tipo
de conteú do informa ao navegador que o conteú do é texto simples.
A pró xima linha encerra a resposta com a mensagem Hel o World e, por fim, uma
mensagem é enviada para a janela do console, informando que uma solicitaçã o foi tratada.
342 CAPÍTULO 8 Sites e serviços
Quando a funçã o createServer é executada, um objeto de servidor é retornado. O objeto do

servidor chama a funçã o de escuta, em que a porta 8080 é especificada como a porta de
escuta, e o IP
address é definido como localhost, que é 127.0.0.1. Contanto que você tenha um adaptador
de rede operacional instalado em seu computador, este servidor da web deve começar a
escutar as solicitaçõ es da web de entrada.
A ú ltima instruçã o usa o objeto console para escrever uma mensagem na tela para informá -
lo de que o servidor está aguardando solicitaçõ es .
Depois de salvar este arquivo, execute o seguinte no prompt de comando para iniciar a
execuçã o do seu servidor web.
Node HelloWorld.js
Deixe o prompt de comando aberto e abra o navegador. Navegue até o seguinte URL.
http: // localhost: 8080 /
Quando a solicitaçã o é recebida, uma resposta é enviada e uma mensagem é registrada na

janela do console, conforme mostrado na Figura 8-1.
FIGURA 8-1 O site Hel oWorld em execuçã o respondendo com uma mensagem
Parabéns! Você instalou o Node.js e escreveu seu primeiro site Node.js. Para iniciar
a execuçã o, você nã o precisa fechar a janela do prompt de comando; você pode
simplesmente pressionar Ctrl + C para cancelar.
Obviamente, a pró xima coisa que você deseja fazer é processar os dados da solicitaçã o para
produzir uma resposta com base na solicitaçã o. Para isso, você pode solicitar o mó dulo url ,
que fornece ajuda para a aná lise do QueryString. O objeto url tem um método de aná lise
que aceita o URL real, e o segundo parâ metro é um sinalizador pelo qual passar um
valor true analisa QueryString. O có digo a seguir lê o nome do QueryStrin g e cria uma
resposta personalizada.
Liçã o 1: Introduçã o ao Node.js CAPÍTULO 8
343

var url = requer ('url');
var url_parts = url.parse (request.url, true);
respo nse.writeHead (200, { 'Content-Type': 'text / plain'});
response.end ('Olá' + url_parts.query.name + '! \ n');
console.log ('Solicitação tratada de' + url_parts.query.name);
Este aplicativo foi salvo em hel o_joe.js. Execute o aplicativo e, em seguida, inicie o

navegador. Navegue até o seguinte URL.
http: // localhost: 8080 /? name = Joe
Quando a solicitaçã o é recebida, uma resposta é enviada e uma mensagem é registrada na

janela do console, conforme mostrado na Figura 8-2. Experimente nomes diferentes e
observe que você obterá uma resposta personalizada.
FIGURA 8-2 Criando uma resposta personalizada com Node.js Criando um módulo

Node.js
Nos exemplos anteriores , você usou a funçã o require para carregar mó dulos, que fornecem
reutilizaçã o de có digo ao adicionar funcionalidade ao Node.js. Você pode criar seu pró prio
mó dulo envolvendo seu có digo em uma funçã o e exportando-o para que possa ser chamado
de outro có digo, como a seguir.
var url = requer ('url');
function start () {

var url_parts = url.parse (request.url, true);
response.writeHead (200, {'Content-Type': 'text / pl ain'});
response.end ('Olá ' + url_parts.query.name + '! \ n');
console.log ('Solicitaçã o tratada de' + url_parts.query.name);
export.start = start;
Neste exemplo, o có digo existente foi agrupado com uma funçã o de início. Na parte inferior
do arquivo, a funçã o de início é atribuída a uma propriedade de início no objeto
de exportaçã o . O có digo é salvo em um arquivo hel o.js e o mó dulo é criado.
Você usa o novo mó dulo da mesma forma que usa outros mó dulos, usando a funçã o
require.
Crie um arquivo index.js e insira o có digo a seguir para usar seu mó dulo.
var hello = require ('./ hello.js');
hello.start ();
Neste exemplo, o nome do mó dulo é “./hel o.js”. Observe que um caminho relativo para o
arquivo é usado. A funçã o require retorna um objeto que é atribuído à variá vel hel o e, em
seguida, o método de início é executado.
Depois de salvar o arquivo, você pode executar o có digo executando o seguinte no prompt
de comando.
node index.js
Este có digo funciona da mesma forma que o có digo hel o_joe.js, exceto que este có digo usa
seu novo mó dulo.
Criação de um pacote Node.js
Um pacote Node.js , também conhecido como um aplicativo , é uma coleçã o de mó dulos com
um manifesto que descreve o pacote e suas dependências e pode ser uma chave publicada
de forma pú blica e privada
Termos para você e outros usarem. Depois de publicar seu pacote, você pode usar o
gerenciador de pacotes de nó (npm) para instalar um pacote. O pacote pode ser instalado
em um ú nico aplicativo que você está criando ou globalmente para uso com muitos
aplicativos.
Neste exemplo, será criado um mó dulo cal _counter.js, que produzirá uma mensagem de
console sempre que sua funçã o count_call for executada. Um mó dulo simple_math.js será
criado, que conterá uma funçã o de adiçã o e uma funçã o de subtraçã o. Um mó dulo
advanced_math.js será criado, o qual conterá as funçõ es multiplicaçã o, divisã o e
Fibonacci. Todas as funçõ es matemá ticas serã o utilizá veis por outros aplicativos, mas o
contador de chamadas permanecerá privado para o pacote, de modo que cada funçã o
matemá tica chamará a funçã o count_call. Embora todas essas funçõ es possam ser
colocadas em um ú nico mó dulo, este exemplo demonstra o uso de vá rios mó dulos.
Esses mó dulos serã o empacotados para que possam ser publicados. Apó s a publicaçã o do
pacote, você e outras pessoas podem instalá -lo e usá -lo em outros aplicativos.
345
A seguir está uma estrutura de pasta típica para a criaçã o de um pacote. Você começa

criando uma pasta raiz para o seu pacote.
\nome do pacote
\ bin
main.js
\ lib
module1.js
module2.js
package.json
README.md
Dentro da pasta raiz do pacote, você tem um arquivo package.json, que é o arquivo de
manifesto. Você também precisa de um arquivo README.md contendo ajuda suficiente
para iniciar o usuá rio. Além disso, você precisa de uma pasta bin e uma pasta lib . A pasta
bin contém o ponto de entrada para seu pacote; a pasta lib contém os mó dulos.
Neste exemplo, a pasta ro ot do pacote é criada em C: \ node_samples \

math_example; math_example é o nome do pacote.
Na pasta lib, é criado o primeiro mó dulo, denominado cal _counter.js, que possui o seguinte
có digo.
var internal_call_counter = 0;
function count_call () {
++ interna l_call_counter;
console.log ('Você fez' + internal_call_counter + 'chamadas!');
module.exports = count_call;
Parece que a variá vel internal_cal _counter e a funçã o count_call estã o poluindo o

namespace global, mas este có digo do mó dulo será encapsulado de forma que nenhum
deles estará no namespace global. Você pode definir o que está disponível quando um
usuá rio usa a funçã o require ('cal _counter') atribuindo algo a module.exports. Nesse caso,
a ú nica funçã o exportada é count_cal, mas você pode especificar vá rias funçõ es
envolvendo-as em um objeto, como você verá nos mó dulos simple_math.js e
advanced_math.js.
O pró ximo mó dulo criado na pasta lib é simple_math.js, que possui o có digo a seguir.
var call_counter = require ('./ call_counter');
function add (x, y) {
call_counter ();
retornar x + y;
funçã o subtrair (x, y) {
call_counter ();
return x - y;
module.exports = {
adiçã o: adicionar,
subtraçã o: subtrair
No arquivo simple_math.js, a funçã o require faz referência ao mó dulo cal _counter.js. O uso
da sintaxe './cal _counter' indica que este é um mó dulo local na pasta atual em oposiçã o a
um pacote. A referência é atribuída à variá vel cal _counter . As funçõ es de adiçã o e
subtraçã o chamam a variá vel cal _counter , que faz referência à funçã o count_call. Este
mó dulo exporta duas funçõ es, portanto, um objeto é criado para fornecer acesso a essas
funçõ es. Nesse caso, o método de adiçã o faz referência à funçã o de adiçã o, enquanto o
método de subtraçã o faz referência à funçã o de subtraçã o. É mais comum que o nome do
método seja igual ao nome da funçã o , mas este exemplo demonstra que eles podem ser
diferentes.
O pró ximo mó dulo criado na pasta lib é advanced_math.js, que possui o seguinte có digo.
var call_counter = require ('./ call_counter');
function multiply (x, y) {
call_counter ();
return x * y;
}
funçã o divide (x, y) {
call_counter ();
return x / y;
function fibo (contagem) {
call_counter ();
return private_fibo (contagem)
function private_fibo (contagem, contador, primeiro, segundo) {
se (contagem == 0) retornar 0;
if (contador == indefinido) {
contador = 1
primeiro = 1;
segundo = 2;
resultado = primeiro + segundo;
if (contador == contagem) resultado de retorno;
private_fibo (contagem, ++ contador, segundo, resultado)
resultado de retorno;

module.exports = {
multiplicaçã o: multiplique,
divisã o : divide,
fibonacci: fibo
347
No arquivo advanced_math.js, a funçã o require também faz referência ao mó dulo cal

_counter.js. As funçõ es multiplicar, dividir e fibo chamam a variá vel cal _counter , que faz
referência à funçã o count_call. O mó dulo advanced_math.js exporta três funçõ es, portanto,
um objeto é criado para fornecer acesso a essas funçõ es.
A funçã o fibo se chama funçã o private_fibo, uma funçã o recursiva que se auto chama até
que a contagem e o contador sejam iguais. A funçã o private_fibo nã o é exportada, portanto,
estará acessível apenas a partir da funçã o fibo que é exportada.
Criação de um módulo agregado
Depois que os mó dulos sã o criados, você pode desejar expor um ú nico objeto com os itens
que sã o exportados para todos os mó dulos. Expor um ú nico objeto torna mais fá cil para os
usuá rios do seu pacote acessarem os recursos do seu pacote. Este é o mó dulo de ponto de
entrada, que é um agregado dos outros mó dulos em seu pacote.
Na pasta bin, crie um mó dulo main.js que contém o có digo a seguir.
var path = require ('p ath');
var fs = requer ('fs');

var lib = path.join (path.dirname (fs.realpathSync (__ filename)), '../lib'); var simple =
require (lib + '/simple_math.js');
var advanced = require (lib + '/advanced_math.js');
module.exports = {
adiçã o: simple.addition,
subtraçã o: simples.subtraçã o,
multiplicaçã o: avançada.multiplicaçã o,
divisã o: advanced.division,
fibonacci: advanced.fibonacci
Este mó dulo primeiro faz referência a dois pacotes nodo.js integrados, path e fs . Esses

pacotes sã o auxiliares que obtêm o caminho para a pasta lib. A seguir, referências a
simple_math.js e advanced_
math.js sã o criados usando este caminho para a biblioteca. O mó dulo cal _counter.js nã o é
referenciado porque o pacote o usa, mas nã o o expõ e. Finalmente, module.exports é
atribuído a um objeto no qual as funçõ es que foram expostas em simple_math.js e
ad vanced_math.js agora sã o exportadas pelo pacote.
Criação do arquivo README.md
O arquivo README.md contém ajuda suficiente para que o usuá rio comece com seu
pacote. A extensã o de arquivo .md denota um arquivo Markdown . Um arquivo Markdown é
uma maneira simples de fornecer formataçã o em um documento de texto para que ele
possa ser exibido como texto ou em um navegador. Uma chave rá pida
A pesquisa de termos na web por linguagem de markdown renderá vá rios artigos e

editores de Markdown gratuitos, como o MarkdownPad, conforme mostrado na Figura 8-
3. Os conteú dos do arquivo README.md sã o os seguintes.
pacote math_example
======================
As funçõ es a seguir estã o disponíveis no pacote math_example.
- ** adiçã o ** Adiciona dois nú meros e retorna o resultado.
- ** s ubtraçã o ** Subtrai o segundo nú mero do primeiro e retorna o resultado.
- ** multiplicaçã o ** Multiplica dois nú meros e retorna o resultado.
- ** divisã o ** Divide o primeiro nú mero pelo segundo nú mero e retorna o resultado.
- ** fibonacci ** Aplica os tempos de contagem da sequência de fibonacci e retorna o

resultado.
A formataçã o é muito legível. Quando é renderizado em HTML, também é muito legível,

conforme mostrado na janela de visualizaçã o ao vivo na Figura 8-3.
FIGURA 8-3 Ediçã o do arquivo README.md usando MarkdownPad C RIANDO o arquivo

package.json
O arquivo package.json é o manifesto do seu pacote. Este arquivo contém os metadados que

descrevem seu pacote. Você pode criar este arquivo manualmente, mas uma maneira mais
fá cil de criar o arquivo é digitar o seguinte comando.
np m init
Quando você executa esse comando, ele o conduz por uma série de prompts e, em seguida,
o arquivo é criado para você. Você sempre pode editar o arquivo mais tarde, se necessá rio.
Como a extensã o do arquivo indica, esse arquivo é escrito em JSON, que é JavaScript Object
Notatio n. O seguinte é o arquivo package.json para math_example.
"nome": "math_example",
"versã o": "0.0.0",
"descriçã o": "Um exemplo de criaçã o de um pacote",
"main": "bin / main.js",
"scripts": {
"test": "echo \" Erro: nenhum teste especificado \ "&& exit 1"
},
"repositó rio": "",
"palavras-chave": [
"matemá tica",
"exemplo",
349
"Adiçã o",
"subtraçã o",
"multiplicaçã o",
"divisã o",
"fibonacci"
],
"autor" : "Glenn Johnson",
"licença": "BSD"
Você pode fornecer scripts de teste em seu pacote para que os usuá rios possam instalar seu
pacote e executar os testes em seus computadores.
Você pode especificar um URL de repositó rio git . Git é um dos melhores gerenciadores de

controle de origem, e se você nã o estiver usando nenhum tipo de controle de origem, este
pode ser um bom momento para aprender sobre o git em http://git-scm.com/. Se o seu
pacote tiver dependências, elas também serã o listadas no arquivo package.json.
Publicação do pacote
Agora você tem um pacote com uma estrutura de pastas semelhante à seguinte.
\nome do pacote
\ bin
main.js
\ lib
advanced_math.js
call_counter.js
simple_math.js
package.json
README.md
Publicar um pacote torna o pacote disponível para todos os usuá rios para uso em seus
aplicativos.
Use o npm para publicar no registro do npm e, em seguida, use o npm para pesquisar
pacotes e instalar o pacote.
Antes de publicar um pacote node.js, você deve criar uma conta para publicar todos os seus
pacotes. Use o npm para criar a conta executando o seguinte comando.
npm adduser
Siga as instruçõ es para um nome de usuá rio (letras minú sculas), senha e endereço de e-
mail. Depois de inserir todas as informaçõ es necessá rias , o npm contata o
registry.npmjs.org para criar sua conta.
A validaçã o da conta atualmente nã o é necessá ria, entã o qualquer pessoa pode criar uma
conta e colocar um có digo incorreto no registro; portanto, ao instalar um pacote
desconhecido do registro npm, cuidado !
Agora que você tem uma conta, pode publicar no registro do npm. Abra a janela do prompt
de comando e mude de seu diretó rio atual para o diretó rio raiz do pacote, onde o arquivo
package.json está localizado. Digite o seguinte comando para publicar o pacote.
npm publicar
Você verá o npm enviando métodos HTTP GET e PUT até que a publicaçã o seja
concluída. Se você nã o tiver erros, o pacote deve ser publicado e imediatamente disponível
para uso de todos.
Instalando e usando o pacote
Agora que seu pacote foi publicado, você pode instalá -lo e usá -lo. Você pode instalar o
pacote globalmente ou localmente no aplicativo que está criando. Instalar o pacote global y
dá a todos os aplicativos a mesma versã o do pacote, de forma que, quando você atualizar o
pacote global com uma nova versã o, todos os aplicativos obtenham a nova versã o. Se você
instalar o pacote local y no aplicativo, você reinstalará o pacote para cada aplicativo. Você
pode atualizar o pacote para um aplicativo e nã o precisa se preocupar em atualizar o
pacote para todos os aplicativos. A opçã o global é tipicamente mais atraente para a maioria
das pessoas, mas geralmente você nã o quer ser forçado a um teste de regressã o para todos
os aplicativos ao atualizar o pacote. Essa escolha é sobre ter controle para atualizar
quando necessá rio versus a conveniência de atualizar tudo de uma vez.
Neste exemplo, um novo aplicativo, math_user, é criado, portanto, essa pasta é criada na
pasta node_samples.
Para instalar o pacote localmente, use a janela do prompt de comando para navegar até
a pasta que contém seu aplicativo e digite o seguinte comando.
npm install math_example
Isso cria um subdiretó rio node_modules; na pasta que contém seu aplicativo está uma
pasta para o pacote instalado com todos os seus arquivos.
Para instalar o pacote globalmente, digite o seguinte comando.
npm install -g math_example
A Figura 8-4 mostra a tela apó s a execuçã o deste comando. A ú ltima linha mostra a
localizaçã o da pasta na qual o pacote foi instalado.
FIGURA 8-4 O pacote global de sucesso em stal
351
Depois que o pacote estiver globalmente instalado, crie um link para a instalaçã o global de
cada aplicativo que usará o pacote global. Para fazer isso, navegue até a pasta raiz do seu
aplicativo e digite o seguinte comando.
npm link math_example
Neste exemplo, o comando foi executado na pasta math_user. Depois que o comando é

executado, você vê que existe uma pasta chamada node_modules. Se você navegar até essa
pasta e examinar o conteú do do diretó rio, verá que existe uma junçã o math_example ,
FIGURA 8-5 O comando npm link mostrando uma junçã o para a instalaçã o global Uma
junçã o é uma rota para a instalaçã o global. Ele se comporta como uma pasta. Você pode
mudar da pasta node_modules para essa pasta usando o comando cd math_example e pode
voltar para a pasta node_modules usando o comando cd ...
■■ Como você instala um pacote chamado contoso para uso local?
■■ Use o seguinte comando.
npm install contoso
Agora que você instalou o pacote math_example, escreva algum có digo que acesse o pacote
math_example. Na pasta math_user, crie um arquivo JavaScript denominado main.js e digite
o có digo a seguir.
var math_example = require ('math_example');
resultado var = 0;
console.log ();
resultado = exemplo_math.adiçã o (5,10);

console.log ('adiçã o (5,10) =' + resultado);
console.log ();
result = math_example.subtraction (50,10);
console.log ('subtraçã o (50,10) =' + resultado);
co nsole.log ();
result = math_example.multiplication (3,7);
console.log ('multiplicaçã o (3,7) =' + resultado);
console.log ();
resultado = math_example.division (27,3);
console.log ('divisã o (27,3) =' + resultado);

console.log ();
resultado = exemplo_math.fibonacci (3);
console.log ('fibonacci (3) =' + resultado);
console.log ('feito');
Este có digo define uma referência ao pacote math_example. O có digo executa um pequeno
teste de cada uma das funçõ es exportadas. Execute o có digo executando o
seguinte comando.
nó principal
O resultado é mostrado na Figura 8-6. Cada funçã o retorna um resultado e, em seguida, o

resultado é exibido.
FIGURA 8-6 O resultado da execuçã o do nó principal
353
A desinstalação de um pacote de idade
Desinstale um pacote local executando o seguinte comando na pasta raiz do aplicativo.
npm desinstalaçã o math_example
Para desinstalar um pacote global, execute o seguinte comando.

npm uninstall -g math_example
Avanço rápido para expressar
Embora seja relativamente fá cil criar um mó dulo Hel o com Node.js, muito mais trabalho é
necessá rio se você pretende criar um framework web completo. Por exemplo, quando uma
solicitaçã o é recebida no servidor para um recurso como uma pá gina da Web ou um serviço
da Web, você normalmente precisa encaminhar a solicitaçã o para obter o recurso
adequado. Você também pode querer implementar sessõ es para manter dados entre cada
solicitaçã o. E a autenticaçã o? Nã o faz sentido para você criar esta estrutura quando você
pode instalar uma estrutura mais simplificada . A estrutura de aplicativo da
web expressa para node.js está disponível em http://expressjs.com/ . Você pode instalar o
Key
Os termos expressam-se usando o comando npm install mencionado anteriormente, ou

você pode ler a pró xima seçã o para aprender como instalar expressõ es a partir de uma lista
de dependências.
Essa estrutura também é conhecida como expressjs ou simplesmente express . Neste livro,

será referido como expresso . A estrutura expressa fornece uma camada fina de recursos
sobre Node.js, onde o desempenho é mantido.
Para começar a usar o Express, você deve instalar o Node.js primeiro e, em seguida, criar
uma pasta para seu aplicativo da web. Neste exemplo, a pasta é a seguinte.
C: \ node_samples \ HelloExpress
Em seguida, você configura uma dependência do expresso, portanto, precisa do nú mero
da versã o atual do expresso. Execute o seguinte comando para obter as informaçõ es da
versã o.
versã o expressa do npm info
No momento em que este artigo foi escrito, a versã o era 3.0.0. Você precisa desse nú mero
de versã o ao adicionar a dependência ao arquivo package.json.
Para criar o arquivo package.json na pasta Hel oExpress, navegue até essa pasta, execute o
seguinte comando e siga os prompts.
npm init
A seguir está o package.json completo.
{
"nome": "HelloExpress",
"ve rsion": "0.0.0",
"descriçã o": "Um site simples",
"main": "index.js",
"scripts": {
},
"autor": "Glenn Johnson",
"licença": "BSD"
Abra o arquivo com um editor de texto e adicione a dependência para expressar como
segue.
"versã o": "0.0.0",
"main": "index.js",
"scripts": {
},
"licença": "BSD ",
“Privado”: verdadeiro,
“Dependências”: {
“Expresso”: “3.0.0”
O nú mero da versã o pode ter sido definido como “3.x” para recuperar o mais recente da
versã o 3 e private é definido como true, o que indica que este aplicativo será usado apenas
localmente. Se você nã o fornecer o indicador privado, poderá receber uma mensagem do
seu provedor de firewall informando que o site está sendo executado com funcionalidade
limitada.
Agora que você tem a dependência para expressar configurada, pode usar o npm para
instalar todas as dependências executando o seguinte comando.
npm install
Esta instalaçã o expressa e todas as suas dependências na pasta node_modules. Você pode

verificar se o Express está instalado executando o seguinte comando.
npm ls
Este comando fornece uma lista de pacotes instalados para este aplicativo. Você vê que o
express está instalado, mas muitos outros pacotes também estã o instalados, conforme
355
FIGUR E 8-7 Instalação do Express, que também instala suas dependências Usando o
Visual Studio 2012 Express para Web
Você pode usar o Visual Studio 2012 Express for Web como seu editor e gerenciador de
arquivos para um nó . Estrutura de pastas js abrindo Visual Studio 2012 Express for Web,
clicando em Arquivo e escolhendo Abrir Site. Selecione a pasta Hel oExpress e clique em
Abrir. O Visual Studio abre a estrutura de pastas para seu uso. Se você clicar no botã o
Salvar tudo, verá que o Visual Studio cria um arquivo de soluçã o (.sln) que contém as
configuraçõ es, para que você possa usar facilmente o arquivo .sln para reabrir a soluçã o.
Você pode continuar a usar seu editor de texto favorito para trabalhar com os arquivos
Node.js. e ainda deve manter uma janela de prompt de comando aberta para executar o
aplicativo Node.js.
Criando um aplicativo web Hel o com express
Agora você instalou o Express, entã o crie um aplicativo da web. Na pasta Hel oExpress, crie
um arquivo app.js e adicione o seguinte ao arquivo.
var express = require ('express');
var app = express ();
Este có digo define uma referência ao pacote expresso que você instalou e, em seguida, cria
um objeto de aplicativo expresso e o atribui à variá vel app. Este objeto fornece muitos
recursos que economizam tempo, em vez de criar tudo desde o início em Node.js.
Express fornece a capacidade de definir rotas usando o app. Sintaxe de Method (), em
que Method é o método HTTP ou verbo. O có digo a seguir é adicionado ao arquivo app.js,
que define uma rota que corresponde a uma solicitaçã o usando o método GET e a URL
relativa de “/”. Na partida, o có digo é programado para entregar uma mensagem Hel o
World ao usuá rio.
app.get ('/', funçã o (solicitaçã o, resposta) {
response.send ('Hello World');
});
Os objetos de solicitaçã o e resposta sã o os mesmos objetos que o Node.js fornece. O ú ltimo

trecho de có digo a adicionar sã o as instruçõ es necessá rias para ouvir uma solicitaçã o,
conforme a seguir.
var port = 8080;
app.listen (porta);
console.log ('Ouvindo na porta:' + porta) ;
Seu arquivo app.js concluído deve ter a seguinte aparência.
response.send ('Hello World');
});

var port = 8080;
app.listen (porta);
console.log ('Lis tening na porta:' + porta);
Salve e execute o seguinte comando para iniciar o servidor da web.
app de nó
Quando o aplicativo é iniciado, você vê uma mensagem informando que o aplicativo está
escutando na porta 8080. Abra o navegador e digite o seguinte URL.
http : // localhost: 8080 /
Essa solicitaçã o é roteada para a funçã o que a trata, e Hel o World é enviado para a
resposta, conforme mostrado na Figura 8-8.
FIGURA 8-8 O aplicativo expresso respondendo a uma solicitaçã o de pá gina Adicionando

uma página da web ao aplicativo
Em vez de escrever JavaScript para renderizar cada pá gina, você pode criar pá ginas HTML
que podem ser recuperadas automaticamente com um mínimo de có digo. No arquivo
app.js, substitua a instruçã o app.get pelo seguinte.
app.use (express.static (__ dirname + '/ public'));
Les son 1: Introduçã o ao Node.js CAPÍTULO 8
357
Essa instruçã o começa com app.use, que monta um caminho a partir do qual os arquivos
sã o veiculados. Na funçã o app.use, express.static especifica a localizaçã o dos arquivos
está ticos. Nesse caso, você precisa criar uma pasta pública em seu aplicativo.
Depois de criar a pasta pú blica, crie um arquivo HTML na pasta pú blica chamado Hel
oForm.
html contendo o seguinte.
<! DOCTYPE html>

<head>
<title> </title>
</head>
<body>
<form method = "get" action = "/ SubmitHello"> Nome de entrada: <input type = "text"
name = "userName" />
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
Este arquivo HTML contém um elemento < form > e seu atributo method é definido como
GET, enquanto o atributo action é definido como / SubmitHel o. Isso significa que você
precisa de um recurso chamado /
SubmitHel o no servidor que pode manipular os dados passados para o servidor no

QueryString.
No arquivo app.js, adicione o có digo a seguir apó s a instruçã o app.use.
app.get ('/ SubmitHello', function (request, response) {
response.writeHead (200, {'Content-Type': 'text / html'});
response.write ('Hello' + request.query.userName + '! <br />'); respo nse.end ( 'Tenha um

ó timo dia!');
console.log ('Solicitaçã o tratada de' + request.query.userName);
});
Este có digo é semelhante à instruçã o app.get original, exceto que o recurso SubmitHel o é
especificado e o QueryString é acessível usando request .query. A seguir está o arquivo
app.js completo.

response.write ('Hello' + request.query.userName + '! <br />'); response.end ('Tenha um

ó timo dia!');
console.log ('Solicitaçã o tratada de' + requ est.query.userName);
});
var port = 8080;
app.listen (porta);
console.log ('Ouvindo na porta:' + porta);

A resposta tem um método writeHead para escrever cabeçalhos. Também existe um
método de gravaçã o para gravar HTML no navegador. Finalmente, você pode usar o
método end para enviar o ú ltimo bit de HTML
ao navegador e feche a conexã o.
Na janela do prompt de comando, execute o aplicativo executando o seguinte comando.
app de nó
Depois que o aplicativo estiver em execuçã o, abra o navegador e digite a seguinte URL.
http: // localhost: 8080 / HelloForm.html
Você verá a pá gina da Web, conforme mostrado na Figura 8-9.
FIGURA 8-9 A pá gina da web HelloForm.html recuperada
Inserir um nome na caixa de texto e clicar no botã o Enviar apresenta os dados do

formulá rio ao servidor. A QueryString é processada e o resultado é exibido, conforme
FIGURA 8-10 O resultado exibido
Neste exemplo, quando você clica no botã o Enviar, o URL muda para o seguinte.
http: // localhost: 8080 / SubmitHello? userNa me = Glenn
O roteamento no arquivo app.js corresponde ao recurso de SubmitHel o e, em seguida,

executa o có digo associado ao recurso. No có digo, userName é recuperado de QueryString.
359
Você percebeu que o URL para obter a pá gina Hel oForm.html era o seguinte?
http: // localhost: 8080 / HelloForm.html
Você nã o precisa fornecer a palavra “pú blico” no URL porque a funçã o app.use nã o
especifica uma pasta de recursos para o URL. O app.use especificou a localizaçã o dos
arquivos apenas, portanto, o caminho do URL é a raiz do site (\). Você pode especificar
o caminho do URL explicitamente inserindo o caminho na frente do argumento original,
conforme mostrado no exemplo a seguir.
app.use ( '/ forms', express.static (__ dirname + '/ public')); Depois de fazer essa alteraçã o,
execute o aplicativo novamente. Desta vez, insira o seguinte URL no navegador.
http: // localhost: 8080 / Forms / HelloForm.html
Se você tentar o URL original, ainda poderá ver o formulá rio porque ele está armazenado
em cache. Em caso afirmativo, atualize a tela do navegador e nã o será mais possível
recuperar Hel oForm.html do URL original.
Analisando dados de formulário postados
Os exemplos anteriores demonstraram a capacidade de usar Node.js para servir uma

pá gina da web e processar os dados QueryString usando o método GET, mas no capítulo
anterior, você aprendeu que, além de ser capaz de anexar dados ao URL por meio do
QueryString , você pode colocar dados no corpo da mensagem usando o método POST.
Nesta seçã o, você aprenderá a processar os dados de postback usando

um pacote formidável . Este pacote fornece métodos auxiliares que simplificam a
recuperaçã o de dados postados.
Copie o arquivo Hel oForm.html para um novo arquivo denominado Hel oPost.html na
mesma pasta pú blica.
Modifique o HTML em Hel oPost.html alterando o atributo method do elemento < form >

para post e alterando o atributo action para SubmitHelloPost . O arquivo Hel
oPost.html completo deve se parecer com o seguinte.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
<form method = ”post” action = ”/ SubmitHelloPost”>
Digite o nome: <input type = "text" name = "userName" />
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
Como o atributo do método é definido como POST, o processamento dos dados é diferente,
e é por isso que uma nova açã o é fornecida. Nesse ínterim, a pá gina HTML existente
continua a funcionar .
Na janela do prompt de comando, execute o seguinte comando npm para recuperar

informaçõ es sobre o pacote formidá vel.
Npm info formidá vel
No momento em que este artigo foi escrito, a versã o mais recente é 1.0.10, mas você
também pode usar um curinga para especificar a versã o no arquivo package.json na qual
você deve especificar essa dependência. O seguinte é o arquivo package.json modificado.
"versã o": "0.0.0",
"main": "index.js",
"scripts": {
},

"licença": "BSD",
"privado": verdadeiro,
"dependências": {
“Formidável”: “1.x”,
"expresso": "3.0.0"
A adiçã o da formidá vel versã o 1.x recupera a versã o mais recente da versã o 1.
Na janela do prompt de comando, instale o pacote formidá vel digitando o seguinte

comando npm.
npm install
Este comando lê o arquivo package.jso n e instala os pacotes dependentes. Agora você tem

o formidá vel pacote instalado localmente, entã o atualize o arquivo app.js para processar os
dados de postback. Na parte superior do arquivo app.js, adicione o có digo a seguir para
fazer referência ao pacote formidá vel.
var formidabl e = require ('formidable');
Em seguida, processe os dados postados. Em vez de adicionar uma funçã o cal app.get,
adicione um aplicativo.
pó s funçã o cal. Na cal, você deve criar uma instâ ncia do objeto IncomingForm do pacote
formidá vel e atribuí-lo a uma variá vel de formulário . Em seguida, você deve usar
os campos de variá veis do formulário e exibir uma mensagem ao usuá rio. O arquivo app.js
completo com a funçã o app.post deve se parecer com o seguinte.
var formidável = requer ('formidável');
app.use ('/ forms', express.static (__ dirname + '/ public'));

app.post ('/ SubmitHelloPost', function (reque st, response) {
361
if (request.method.toLowerCase () == 'post') {
// analisa os dados do formulário
var form = novo formidável.IncomingForm ();
form.parse (request, function (err, fields) {
response.writeHead (200, {'Content-Type': 'text / html'}); response.write ('Hello' +

fields.userName + '! <br />'); response.end ('Tenha um ótimo dia POST!');
console.log ('Solicitação tratada de' + fields.userN ame);
});
});
response.write ('Hello' + request.query.userName + '! <br />'); response.end ('Tenha um

ó timo dia!');
console.log ('Manipular solicitaçã o de' + request.query.userName);
});
var port = 8080;
app.listen (porta);
Execute o aplicativo e digite o seguinte na URL do navegador.
http: // localhost: 8080 / Forms / HelloPost.html
Digite um na me na caixa de texto e clique em Enviar. Você deve ver o resultado exibido na
janela do navegador, conforme mostrado na Figura 8-11.
FIGURA 8-11 Os dados do formulá rio postado processados e exibidos Nã o há QueryString

e a URL mostra claramente que os dados postados foram enviados para o SubmitHel
oPost. Em exemplos anteriores, o método GET foi usado para mostrar como funciona.
Lembre-se de que você sempre deve enviar dados de volta ao servidor usando o método
POST.
■■ O que o comando a seguir realiza?
npm install
■■ Este comando lê o arquivo package.json local e instala todos os pacotes

dependentes que são referenciados.
Resumo da lição
■■ Node.js fornece uma maneira do lado do servidor de criar sites baseados em JavaScript.
■■ Um mó dulo é um arquivo compartilhá vel que promove a reutilizaçã o.

■■ Um pacote é um conjunto compartilhá vel de mó dulos que promove a reutilizaçã o e é
publicado para você e outros usarem.
■■ Use o gerenciador de pacotes n ode (npm) para gerenciar pacotes.
■■ Use o pacote expresso para criar um site facilmente.
Revisão da aula
1. O que você pode publicar usando o npm?
A. Um arquivo JavaScript
B. Um mó dulo
C. Uma classe JavaScript
D. Um pacote
2. Que escopo um pacote pode ter ? (Escolha todas as opçõ es aplicá veis) A. Local
B. Agrupado
C. Nomeado
D. Global
3. Por que você instalaria o pacote expresso?
A. Simplifique a criaçã o do site
B. Fornecer gerenciamento de sessã o
C. Simplifique a recuperaçã o de conteú do está tico
D. Todas as opçõ es acima
363
Lição 2: Trabalhando com serviços da web
Na liçã o anterior, você viu como pode criar um site que pode servir pá ginas da web e
fornecer respostas HTML para solicitaçõ es. Um problema com o cená rio do site é que
postar dados de formulá rio causa uma resposta que repinta a pá gina com o resultado
HTML. Se a resposta HTML se parece com a pá gina existente, você desperdiça largura de
banda e recursos para redesenhar a pá gina.
Os serviços da Web fornecem a capacidade de enviar dados ao servidor e recebê-los de

volta do servidor sem a necessidade de redesenhar a tela do navegador. Existem vá rios
tipos de serviços da Web e esta liçã o ajuda você a entendê-los. Você também usa Node.js
para criar um serviço da web.
Para enviar solicitaçõ es a um serviço da web de sua pá gina da web, você usará AJAX, que
significa Asynchronous JavaScript and XML. Usando AJAX, você pode escrever JavaScript
que chame o servidor de forma assíncrona e processe o resultado. Enquanto isso está
acontecendo, a tela do usuá rio nã o bloqueia ou congela enquanto aguarda a conclusã o da
chamada para o servidor.
■■ Explique a diferença entre sites e serviços da web.
■■ Entenda as diferenças entre os tipos de serviço da web.
■■ Crie um serviço da web Node.js.
■■ Use AJAX para chamar um serviço da web.
Um serviço da web fornece comunicaçã o entre um servidor da web e um cliente. O cliente

pode ser um navegador da web, outro serviço da web, um telefone celular ou qualquer
má quina que possa se comunicar com o serviço da web. Um cliente precisa ser capaz de
montar uma solicitaçã o, enviá -la ao serviço da web e, em seguida, receber a resposta e
analisá -la.
À medida que os serviços da web se tornam mais difundidos, os desenvolvedores podem

criar aplicativos apenas juntando os serviços da web. Isso é conhecido como criaçã o
de mashups .
Chave
Existem duas classes principais de serviços da web. O primeiro é denominado

Representational State Terms Transfer (REST), no qual o objetivo principal do serviço é
manipular recursos da web usando um conjunto uniforme de operaçõ es sem estado. O
segundo sã o os serviços da web arbitrá rios, nos quais o serviço pode expor um conjunto
arbitrá rio de operaçõ es. Um exemplo de implementaçã o de REST
o serviço da web é denominado WEB API; um exemplo de um conjunto arbitrá rio de

operaçõ es é o Microsoft Windows Communication Foundation (WCF).
364 CAPÍTULO 8 sites e SER vícios
Compreendendo Representational State Transfer (REST) REST tenta usar as operaçõ es

padrã o de HTTP (ou protocolos semelhantes) mapeando as operaçõ es de criaçã o,
recuperaçã o, atualizaçã o e exclusã o (CRUD ) para métodos HTTP para que GET recupere
dados ou execute uma operaçã o que nã o alterar os dados do lado do servidor. O POST
atualiza os dados, mas pode recuperá -los quando valores complexos de parâ metros
precisam ser enviados ao servidor. PUT insere novos dados e DELETE exclui dados. O REST
se concentra na interaçã o com recursos sem estado, mais do que em mensagens ou
operaçõ es. URLs limpos estã o fortemente associados ao conceito REST. Como o método
infere um verbo, a URL deve descrever a entidade como um substantivo. Aqui estã o alguns
exemplos de URLs REST.
■■ Recuperar o cliente número cinco O nú mero cinco é parte do URL e nã o parte do

QueryString. O mecanismo de roteamento no servidor precisaria analisar isso
corretamente. Como isso está recuperando dados, o método HTTP seria definido como
GET. Você pode POSTAR neste local para atualizar ou EXCLUIR neste URL para excluir o
cliente.
http: // localhost: 8080 / Customer / 5
■■ Recuperar o veículo com um Número de Identificação do Veículo (VIN) de

ABC123, o VIN
está no QueryString. Mais uma vez, o método HTTP é definido como GET.
http: // localhost: 8080 / Vehicle? VIN = ABC123

■■ Recuperar todos os pedidos O método HTTP é definido como GET e nã o há
parâ metro. A PUT
a este URL adiciona um pedido.
http: // localhost: 8080 / Pedidos
■■ Inserir cliente O método HTTP é definido como PUT e os dados de postback estã o no
corpo da solicitaçã o, portanto, você nã o vê os dados no URL ou QueryString. O seguinte é o
URL e os dados de postback.
http: // localhost: 8080 / Clientes
nome = ACME e endereço = 123 + abelha + pista
Para contornar o problema quando muitos firewal s nã o permitem os métodos PUT e

DELETE, você pode especificar um verbo em seus dados QueryString ou postback. Você nã o
deve alterar o URL
para conter o método porque isso quebra a interface RESTful, que especifica que o URL
deve ser uma referência a uma entidade ou coleçã o de entidades. Aqui estã o alguns
exemplos de como colocar o verbo nos dados.
■■ Exclua o veículo com um Número de Identificação do Veículo (VIN) de ABC123 O

VIN está no QueryString. O método HTTP é definido como GE T para passar pelo firewal.
http: // localhost: 8080 / Vehicle? verb = DELETE & VIN = ABC123
■■ Inserir cliente O método HTTP é definido como POST e os dados de postback estã o no
corpo da solicitaçã o, entã o você nã o vê os dados no URL ou QueryString. O verbo é definido
como PUT nos dados. O seguinte é o URL e os dados de postback.
http: // localhost: 8080 / Clientes
varb = PUT & name = ACME & Address = 123 + Bumblebee + Lane
Liçã o 2: Trabalhando com serviços da Web CAPÍTULO 8
365
Você pode implementar a segurança usando o protocolo HTTPS para criptografar

as comunicaçõ es e a autenticaçã o bá sica para exigir um nome de usuá rio e uma senha para
acessar os recursos.
Os maiores benefícios de usar REST sã o a facilidade de conexã o; é leve e fino, por isso nã o
consome muitos recursos; e é rá pido. Em uma ddition, REST nã o precisa usar XML
detalhado ao enviar e receber dados. Muitos desenvolvedores preferem enviar dados ao
servidor como pares nome = valor que sã o codificados por URI (o mesmo que enviar dados
de formulá rio por POST ou GET). Ao receber dados do servidor, os desenvolvedores
geralmente gostam de usar JSON
(JavaScript Object Notation) devido ao seu tamanho compacto.
Uma das maiores desvantagens de usar REST é que alguns navegadores suportam apenas
GET
e métodos POST, enquanto muitos firewal permitem a passagem apenas de métodos GET e
POST .
Por causa desse problema, muitos desenvolvedores criam APIs semelhantes a REST
(sã o RESTful) quando a compatibilidade é mantida com navegadores e firewal se apenas
GET e POST sã o usados.
Noções básicas sobre serviços da web arbitrários
Os serviços arbitrá rios da web também sã o conhecidos como grandes serviços da web. Os

serviços da Web arbitrá rios, como o Windows Communication Foundation (WCF), nã o
tentam mapear aspectos do protocolo para operaçõ es porque as operaçõ es expostas
podem ser mais arbitrá rias do que fornecer operaçõ es REST simples. Os serviços
arbitrá rios da Web sã o mais focados na capacidade de oferecer mais funcionalidades, como
roteamento de mensagens e vá rios meios de segurança que podem fornecer criptografia
parcial de mensagens e vá rias formas de autenticaçã o.
Os serviços arbitrá rios da Web normalmente têm um formato de interface que permite ao
cliente ler e analisar as informaçõ es. Essas informaçõ es permitem que o cliente faça
chamadas para o serviço da web imediatamente. Um dos formatos de API mais comuns é o
Web Services Description Language (WSDL), pelo qual um documento WS DL que descreve
totalmente as operaçõ es expostas pode ser recuperado do serviço da web.
Os serviços da Web arbitrá rios exigem que o cliente reú na uma solicitaçã o, ou mensagem,
usando uma mensagem XML com formataçã o especial, chamada de mensagem Simple
Object Access Protocol ( SOAP).
O serviço da web nã o precisa se comunicar por meio do protocolo HTTP e é bastante

comum usar o protocolo HTTP ou para o serviço da web remover a camada do protocolo
HTTP e usar apenas o protocolo TCP para um melhor desempenho.
Criação de um serviço da Web RESTful usando Node.js

O seguinte descreve a criaçã o de um serviço da web RESTful usando Node.js para expor o
pacote math_example que foi criado na Liçã o 1 como um serviço RESTful. Neste exemplo,
GET, POST, PUT e DELETE demonstram que podem ser usados. Em um aplicativo real, as
operaçõ es matemá ticas normalmente usariam o método GET em uma entidade matemá tica
e a operaçã o seria passada como um parâ metro de dados. Por exemplo, o que se segue seria
uma implementaçã o RESTful mais apropriada para realizar a adiçã o de dois nú meros.
http: // localhost: 8080 / Math? operaçã o = adiçã o & x = 10 & y = 45
Neste exemplo, uma pasta math_service é criada na pasta node_samples e o seguinte

arquivo package.json é criado.
"nome": "math_service",
"versã o": "0.0.0",
"descriçã o": "Um serviço da Web simples",
"main": "index.js",
"scripts": {
"t est": "echo \" Erro: nenhum teste especificado \ "&& exit 1"
},
"licença": "BSD",
"privado": verdadeiro,
"dependências": {
"formidá vel": "1.x",
"expresso": "3.0.0",
"math_example": "0.x"
}
}
Neste exemplo, existem três dependências. Depois de criar esse arquivo e salvá -lo, você
pode abrir uma janela de prompt de comando, navegar até a pasta math_service e executar
o seguinte comando para instalar as dependências do npm.
npm install
Apó s a conclusã o da instalaçã o, você pode usar esses pacotes. Na pasta math_service, crie
um arquivo app.js e adicione referências a esses pacotes conforme a seguir.
var formidá vel = requer ('formidá vel');
var math = require ('math_examp le');
Depois de configurar as referências do pacote, crie uma pasta pú blica na pasta

math_service e use o objeto app para montar a pasta pú blica como a raiz do site. A pasta
pú blica hospedará as pá ginas da web. O có digo deve ser semelhante ao seguinte .
Neste exemplo, as operaçõ es farã o parte da URL, portanto, a operaçã o de adiçã o é criada
adicionando-se o có digo a seguir.
app.get ('/ adiçã o', funçã o (solicitaçã o, resposta) {
var x = Nú mero (request.query.x),
y = Nú mero (request.query.y),
resultado = matemá tica. adiçã o (x, y);
response.writeHead (200, {'Content-Type': 'application / json'}); response.end

('{"resultado":' + resultado + '}');
console.log ('Solicitaçã o de adiçã o tratada para x =' + x + ': y =' + y);
});

367
A operaçã o de adiçã o usa o método GET conforme indicado pela funçã o app.get cal. Isso
cria uma rota pela qual uma solicitaçã o GET que corresponde à adiçã o executa o bloco de
có digo. No bloco de có digo, três variá veis ( x , y e resultado ) sã o declaradas e
inicializam d. A x e y parâ metros sã o recuperados do QueryString e convertidos em
nú meros. Em seguida, o resultado é preenchido executando o método de adiçã o no objeto
matemá tico com x e y . Finalmente, o objeto de resposta é usado para escrever o có digo de
status no qual 200 é um sucesso e o tipo de conteú do é definido para retornar um resultado
JSON. O objeto de resposta é entã o usado para escrever o objeto JSON.
Neste exemplo, o objeto JSON é representado por chaves. Uma propriedade é chamada de

resultado e seu valor é definido como o resultado do método de adiçã o cal.
No final do arquivo, adicione o có digo a seguir para iniciar o serviço da web.
var port = 8080;
app.listen (porta);
Depois de salvar o arquivo app.js, você pode iniciar o serviço da web executando o
seguinte comando.
app de nó
Para testar isso, você pode usar o navegador, mas dependendo do navegador que você usa,
pode ser necessá rio clicar em vá rios prompts para ver os resultados. Aqui está o URL.
http: // l ocalhost: 8080 / adiçã o? x = 5 & y = 10
Quando você finalmente vir o resultado, ele deve se parecer com o seguinte.
{"resultado": 15}
O có digo neste exemplo é semelhante ao có digo no site math_user; no entanto, esse site
retornou HTML, embora um HTML bruto, enquanto este exemplo retornou um objeto
JSON. Este é o seu serviço da web, mas como você pode chamá -lo de uma pá gina da web e
usar o objeto de retorno? É quando o AJAX entra em açã o.
Use AJAX para criar chamadas assíncronas para serviços da web. AJAX é JavaScript. Você

pode pensar nisso como um JavaScript avançado. Em vez de criar um botã o de envio para
postar os dados de volta no servidor e, em seguida, observar a tela ser repintada, o
JavaScript liga para o servidor e processa o resultado sem causar uma repintura completa
da tela.
Crie e considere a seguinte pá gina da web Math.html que é criada na pasta pú blica de
math_service.
<! DOCTYPE html>
<head>
<title> </title>
<script type = "text / javascript" src = "/ scripts / jquery-1.8.2.min.js"> </script>
<script type = "text / javascript" src = "/ scripts / default.js"> </script> 368 CAPÍTULO
8 Sites e serviços
</head>
<body>
<form id = "mathForm">
Insira X: <input type = "text" id = "x" /> <br /> Insira Y: <input type = "text" id = "y" />
<br /> Resultado: <span id = "resultado "> </span> <br />
<button id = "btnAdd" type = "button"> Adicionar </button>
</form>
</body>
</html>
Na pasta pú blica, crie uma pasta de scripts e um arquivo JavaScript default.js para
conter em seu có digo. Adicione a biblioteca jQuery a esta pasta. Você pode obter a
biblioteca jQuery em http://jquery.com se ainda nã o a tiver.
NOTA VERIFIQUE A VERSÃO JQUERY
Embora o jQuery seja um produto bastante estável e maduro, ele ainda está sendo
atualizado. Su re que sua tag de script referencie a versão do jQuery que você
instalou.
O arquivo Math.html contém os elementos bá sicos da interface do usuá rio em HTML

necessá rios para coletar dados do usuá rio e exibir um resultado. Neste exemplo,
o elemento < form > nã o é necessá rio porque o formulá rio nunca será
enviado. O elemento < form > é usado apenas como meio de agrupar os controles do
formulá rio. Se o formulá rio for usado para enviar dados ao servidor, os atributos de nome
dos elementos de envio do formulá rio devem ser definidos. Neste exemplo, Java Script e
jQuery serã o usados para acessar esses elementos e fazer o cal AJAX.
Usando XMLHttpRequest
O objeto principal que faz uma chamada AJAX é XMLHttpRequest. Como o nome indica, esse
objeto certamente pode ser usado para enviar e receber dados XML, mas também pode ser
usado para enviar e receber outros dados. Em sua forma mais simples, você pode usar este
objeto da seguinte maneira.
var xmlhttp = new XMLHttpRequest ();
xmlhttp.open ("GET", "/ adiçã o? x = 5 & y = 10", falso); xmlhttp.send ();
var xmlDoc = xmlhttp.responseXML;
A primeira linha cria um novo objeto XMLHttpRequest e o atribui à variá vel xmlhttp .
A pró xima linha configura a solicitaçã o para usar o método GET com uma URL relativa de /
adiçã o e QueryString de x = 5 & y = 10. O ú ltimo parâ metro (falso) indica se a operaçã o
deve ser executada de forma assíncrona, quando falso significa que a operaçã o é
síncrona. O método aberto nã o se comunica com o servidor; apenas configura a
solicitaçã o. O xmlhttp.
A chamada do método send comunica-se com o servidor. Como a comunicaçã o neste

exemplo é síncrona, a execuçã o do JavaScript nã o avançará para a pró xima linha de có digo
até que a comunicaçã o seja concluída. A pró xima linha define a variá vel xmlDoc como
xmlhttp.responseXML
propriedade. No re, você pode analisar o XML como parte do processamento dos

resultados.
369
No serviço da web de matemá tica, o resultado nã o é XML; é JSON, entã o a ú ltima linha de
có digo precisa ser alterada. Além de ter uma propriedade responseXML, o objeto
XMLHttpRequest tem uma propriedade response que é uma string. A string de resposta
precisa ser convertida em um objeto, e o método JSON.parse pode realizar a tarefa. Além
disso, a URL deve ser montada tomando os valores das caixas de texto para construir esta
QueryString. O có digo a seguir pode ser adicionado ao arquivo default.js para fazer o cal
AJAX.
$ ( document) .ready (function () {
$ ('# btnAdd'). on ('click', addNumbers)
});
function addNumbers () {
var x = document.getElementById ('x'). value;
var y = document.getElementById ('y'). value;
var result = document.getElementById ('result');
xmlhttp.open ("GET", "/ adiçã o? x =" + x + "& y =" + y, falso); xmlhttp.send ();
var jsonObject = JSON.parse (xmlhttp.response);
result.innerHTML = jsonObject.result;
A primeira parte deste có digo usa jQuery e adiciona a assinatura ao botã o btnAdd depois
que o documento está pronto. Isso faz com que a funçã o addNumbers seja executada
quando o botã o for clicado.
A funçã o addNumbers ainda nã o usa jQuery. Em primeiro lugar, os x e y valores sã o
extraídos das < entrada > elementos. A variá vel de resultado é definida para fazer
referência ao elemento < span > cujo id é o resultado. O objeto XMLHttpRequest é criado e,
em seguida, o método aberto é executado com uma QueryString construída. O método send
é executado e a resposta é analisada para criar um objeto. Finalmente, o innerHTML para o
elemento result < span > é preenchido com o valor da propriedade result do servidor. Para
testar esta pá gina, primeiro execute o seguinte comando para iniciar o serviço da web.
app de nó
Depois que o serviço da web estiver em execuçã o, abra o navegador e entre no seguinte
URL.
http: // localhost: 8080 / Math.html
Insira os valores em X e Y e clique no botã o Adicionar. Você deve ver o resultado conforme
FIGURA 8-12 A chamada AJAX exibindo o resultado adequado
Agora que o có digo está operacional, você pode querer executar a chamada AJAX de forma
assíncrona.
Você pode fazer isso localizando a chamada do método aberto e alterando o falso para
verdadeiro. No entanto, como essa configuraçã o faz com que um encadeamento seja criado
e o método de envio seja chamado , o có digo nã o aguardará o resultado ser retornado. Em
vez disso, o programa continua para a pró xima linha de có digo, onde tenta processar o
resultado, mesmo que o resultado possa nã o ter chegado do servidor. Para lidar com
a chamada assíncrona, você deve se inscrever no evento onready-stateschange , que é
disparado sempre que o estado de XMLHttpRequest muda. Se o estado pronto mudar para
4, a chamada foi concluída, mas você também deve testar o có digo de status HTTP para
garantir que nenhum erro ocorreu, verificando se o có digo de retorno é 200. A seguir está a
funçã o addNumber modificada que trata corretamente o cal assíncrono.
var y = document.getElementById ('y'). value;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var jsonObject = JSON .parse (xmlhttp.response);
xmlhttp.open ("GET", "/ adiçã o? x =" + x + "& y =" + y, verdadeiro ); xmlhttp.send ();
Você deve estar se perguntando o que significa o nú mero 4. A seguir está uma lista dos
có digos readyState.
■■ 0 Não inicializado O método aberto ainda nã o foi chamado.
■■ 1 Carregando O método de envio ainda nã o foi chamado.
■■ 2 Carregado O método de envio foi chamado; cabeçalhos e status estã o disponíveis.
■■ 3 download interativo ; as propriedades de resposta contêm os dados iniciais.
■■ 4 Concluído Todas as operaçõ es foram concluídas.
Como esses valores mostram, você precisa se inscrever no evento onreadystatechange

antes de chamar o método open.
Lidando com o progresso
Se o servidor fornecer eventos de progresso, você pode se inscrever no evento

de progresso no navegador.
Você pode adicionar um ouvinte de evento para se inscrever no evento de progresso e

executar o có digo sempre que o evento for disparado, conforme mostrado no có digo a
seguir.
var y = do cument.getElementById ('y'). value;

371
xmlhttp.addEventListener (“progresso”, updateProgress, false); xmlhttp.open ("GET",

"/ adiçã o? x =" + x + "& y =" + y, verdadeiro); xmlhttp.send ();
function updateProgress (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// exibe percenComplete
} outro {
// Necessita do tamanho total para calcular o progresso
O servidor deve fornecer um valor para a propriedade carregada e a propriedade total para
que funcione corretamente. O evento de progresso pode ser mais ú til ao carregar uma
grande quantidade de dados no navegador ou ao carregar um arquivo grande.
Se ocorrer um erro , o có digo de status HTTP será diferente de 200. Você também pode se
inscrever nos eventos de erro e abortar, conforme mostrado no exemplo de có digo a seguir.
var y = document.getElementB yId ('y'). value;
resu lt.innerHTML = jsonObject.result;
xmlhttp.addEventListener ("progresso", updateProgress,

false); xmlhttp.addEventListener (“erro”, falha, falso);
xmlhttp.addEventListener (“abortar”, cancelado, falso);
xmlhttp.open ("GET", "/ adiçã o? x =" + x + "& y =" + y, verdadeiro); xmlhttp.send ();
function transferFailed (evt) {
alerta (“Ocorreu um erro”);
função cancelada (evt) {

alerta (“cancelado pelo uso r”);
Agora que você sabe sobre o objeto XMLHttpRequest, esteja ciente de que os navegadores
podem implementar esse objeto de maneira diferente. Portanto, em vez de escrever uma
grande quantidade de có digo para lidar com as diferenças, use um dos wrappers jQu ery
para XMLHttpRequest.
Usando wrappers jQuery XMLHttpRequest
Você pode usar o jQuery para simplificar as chamadas AJAX e ser independente do
navegador. Os métodos jQuery podem ser executados de forma síncrona ou assíncrona. A
seguir está uma lista dos métodos jQuery disponíveis ; lembre-se de que o objeto jQuery
tem o alias do sinal de dó lar ($) para evitar a digitaçã o de tantos caracteres. Onde nã o há
sinal de dó lar, o método pode ser executado em objetos jQuery que sã o referenciados com
um seletor.
■■ $ .ajax () Interface de baixo nível para realizar uma solicitaçã o AJAX
■■ .ajaxComplete () manipulador de eventos AJAX global para registrar um manipulador a

ser chamado quando as solicitaçõ es AJAX forem concluídas
■■ .ajaxError () manipulador de eventos AJAX global para registrar um manipulador a ser

chamado quando AJAX
pedidos completos com um erro
■■ $ .ajaxPrefilter () Interface de baixo nível que lida com opçõ es AJAX personalizadas
antes de cada solicitaçã o ser enviada e antes de $ .ajax () processar as solicitaçõ es
■■ .ajaxSend () manipulador de eventos AJAX global que você usa para anexar uma funçã o
a ser executada antes que um pedido AJAX seja enviado
■■ $ .ajaxSetup () Interface de baixo nível que define valores padrã o para solicitaçõ es
AJAX futuras
■■ .ajaxStart () manipulador de eventos AJAX global para registrar um manipulador a ser

chamado quando a primeira solicitaçã o AJAX começar
■■ .ajaxStop () manipulador de eventos AJAX global para registrar um manipulador a ser

chamado quando todas as solicitaçõ es AJAX forem concluídas
■■ .ajaxSuccess () manipulador de eventos AJAX global para anexar uma funçã o a ser
executada sempre que uma solicitaçã o AJAX for concluída com êxito y
■■ $ .get () Método abreviado para carregar dados do servidor usando HTTP GET
solicitaçã o
■■ $ .getJSON () Método abreviado para carregar dados codificados em JSON do servidor
usando uma solicitaçã o GET HTTP
■■ $ .getScript () Método abreviado para carregar um arquivo JavaScript do

servidor usando uma solicitaçã o GET HTTP e, em seguida, executá -lo
■■ .load () Método abreviado para carregar dados do servidor e colocar o HTML retornado
no elemento correspondente
■■ $ .param () Método auxiliar para criar uma representaçã o serializada de uma matriz ou
objeto, adequada para uso em uma string de consulta de URL ou uma solicitaçã o AJAX
■■ $ .post () Método abreviado para carregar dados do servidor usando um HTTP POST
solicitaçã o
373
■■ .serialize () Método auxiliar para codificar um conjunto de elementos de formulá rio

como um st ring para envio
■■ .serializeArray () Método auxiliar para codificar um conjunto de elementos de

formulá rio como uma matriz de nomes e valores
Alguns desses métodos sã o discutidos em capítulos posteriores, mas você pode obter mais
informaçõ es em http://jquery.com .
O método $ .ajax () é um wrapper para o objeto XMLHttpRequest que fornece uma maneira
independente do navegador de escrever sua cal AJAX. O método $ .ajax () aceita um
parâ metro de objeto que contém todas as configuraçõ es da cal AJAX. O exemplo de có digo a
seguir é uma substituiçã o para a funçã o add Number.
var x = $ ('# x'). val ();
var y = $ ('# y'). val ();
dados var = {"x": x, "y": y};

$ .ajax ({
url: '/ adiçã o',
dados: dados,
tipo: 'GET',
cache: falso,
dataType: 'json',
sucesso: funçã o (dados) {
$ ('# resultado'). ht ml (data.result);
});
Neste exemplo, jQuery recupera os valores de x e y . Um objeto de variá vel de dados é entã o
criado para conter x e y . A chamada $ .ajax () é executada a seguir; leva um argumento de
objeto com todas as configuraçõ es de cal. Neste exemplo, o objeto é criado embutido. A
propriedade url é definida e os dados sã o definidos para o objeto de dados criado na
instruçã o anterior. A propriedade type é o método HTTP, que suporta GET, POST, PUT e
DELETE, mas lembre-se de que muitos Firewal bloqueiam PUT e DELETE. A propriedade
cache é definida como false para indicar que o resultado nã o deve ser armazenado em
cache. A propriedade dataType define o tipo de dados que você espera receber do servidor
e pode ser definida como 'json', 'xml', 'html', 'script', 'jsonp' ou 'texto'.
OBSERVAÇÃO DE ACESSO A DOMÍNIO CRUZADO USANDO JSONP
O uso de JSONP fornece acesso de domínio cruzado a uma API JSON existente
envolvendo um JSON
carga útil em uma chamada de função . Isso é considerado obsoleto; a substituição é

usar compartilhamento de recursos de origem cruzada (CORS). O CORS é descrito
posteriormente nesta lição.
A ú ltima propriedade, sucesso, é definida como uma funçã o a ser executada quando a
chamada retorna com sucesso.
Pode ser um nome de funçã o que contém o có digo ou, conforme mostrado no exemplo,
pode ser uma funçã o anô nima com o có digo. Este có digo é executado de forma
assíncrona como o có digo XMLHttpRequest anterior.
Você pode usar uma maneira mais concisa de escrever este có digo com o método $ .get ()
ou, melhor ainda, usar o método $ .getJSON (), conforme mostrado no exemplo a seguir.
function addNum bers () {
var x = $ ('# x'). val ();
var y = $ ('# y'). val ();
$ .getJSON ('/ adiçã o', dados, funçã o (dados) {
$ ('# resultado'). html (data.result);
});
O tamanho da funçã o addNumbers caiu substancialmente y! Este é um bom momento para

implementar as outras funçõ es matemá ticas. Para a implementaçã o das outras funçõ es, a
pá gina HTML possui botõ es adicionados como segue.
<! DOCTYPE html>
<head>
<title> </title>
<script type = "text / javascript" sr c = "/ scripts / jquery-1.8.2.min.js"> </script>
<script type = "text / javascript" src = "/ scripts / default.js"> </script>
</head>
<body>
<form id = "mathForm">
Insira X: <input type = "text" id = "x" /> <br /> Insira Y: <input type = "text" id = "y" />
<br /> Resultado: <span id = "r esult "> </span> <br />
<button id = "btnAdd" type = "button"> Adicionar </button>

<button id = ”btnSubtract” type = ”button”> Subtrair </button>
<button id = ”btnMultiplication” type = ”button”> Multiplicação </button>
<button id = ”btnDivision” type = ”button”> Divisão </button>
</form>
</body>
</html>
Na parte superior do arquivo default.js, o có digo é adicionado para assinar os eventos de

clique de botã o para os novos botõ es, conforme mostrado no exemplo de có digo a seguir.
$ ('# btnSubtract'). on ('click', subtractNumbers)
$ ('# btnMultiplication'). on ('click', multiplyNumbers)
$ ('# btnDivision'). on ('click' , divideNumbers)
});
Para a funçã o subtractNumbers, você pode usar o método $ .post () onde o HTTP POST
método é obrigató rio. Para a funçã o multiplyNumbers onde o método HTTP PUT será
usado, e para a funçã o divideNumbers onde um método HTTP DELE TE será usado, o
método $ .ajax () será chamado. O exemplo de có digo a seguir demonstra essas funçõ es,
mas elas nã o funcionarã o até que o arquivo app.js seja atualizado para aceitar essas
chamadas.
function subtractNumbers () {
var x = $ ('# x'). val ();
375
var y = $ ('# y'). val ();

$ .post ('/ subtraction', data, function (data) {
}, 'json');
function multiplyNumbers () {
var x = $ ('# x'). val ();
var y = $ ('# y'). val ();
$ .ajax ({
url: '/ multiply',
dados: dados,
tipo: 'PUT',
dataType: 'json',
cache: falso,
});
function divideNumbers () {
var x = $ ('# x'). val ();
var y = $ ('# y'). val ();

$ .ajax ({
url: '/ divide',
dados: dados,
tipo: 'DELETE',
dataType: 'json',
cache: falso,
});
A seguir está o arquivo app.js concluído que mostra o roteamento para as solicitaçõ es de
subtraçã o, multiplicaçã o e divisã o.
var math = require ('math_example');
a pp.use (express.static (__ dirname + '/ public'));
app.get ('/ adiçã o', funçã o (solicitaçã o, resposta) {
var x = Nú mero (request.query.x),
y = Nú mero (request.query.y),
resultado = matemá tica.adiçã o (x, y);

response.writeHead (200, {'Content-Type': 'application / jso n'}); 376 CAPÍTULO 8 Sites e
serviços
response.end ('{"resultado":' + resultado + '}'); console.log ('Solicitaçã o de adiçã o tratada

para x =' + x + ': y =' + y);
});
app.post ('/ subtraction', function (request, response) {
var form = novo formidá vel.IncomingFo rm ();
var x = Nú mero (campos.x),
y = Nú mero (campos.y),
resultado = matemá tica.subtraçã o (x, y);

console.log ('Solicitaçã o de subtraçã o tratada para x =' + x + ': y =' + y);
});
});
app.put ('/ multiplicar', funçã o (solicitaçã o, resposta) {
var form = novo formidá vel.IncomingForm ();
resultado = matemá tica.multiplicaçã o (x, y);

('{ "resultado":' + resultado + '}');
console.log ('Solicitaçã o de multiplicaçã o tratada para x =' + x + ': y =' + y);
});
});
app.delete ('/ divide', funçã o (solicitaçã o, resposta) {
resultado = divisã o matemá tica (x, y);

console.log ('Solicitaçã o de divisã o tratada para x =' + x + ': y =' + y);
});
});
var port = 8080;
app.listen (porta);
Usando promessas jQuery
Você pode ver que o jQuery simplifica as chamadas AJAX. Todas essas funçõ es executam o
mesmo có digo quando bem-sucedidas, e você pode querer refatorar esse có digo para
chamar uma funçã o comum. Você também pode estar trabalhando com um grande
aplicativo que chama addNumbers de vá rias funçõ es, mas deseja que um có digo diferente
seja executado com êxito. Nã o há có digo para lidar com erros.
Você também pode querer executar o có digo de limpeza, independentemente de a chamada
AJAX ter sido bem-sucedida ou falhar. Mais importante, você pode querer executar outra
chamada AJAX apó s o primeiro AJAX
a chamada foi bem sucedida. Você pode usar promessas para fazer isso.
377
Quando você usa jQuery para executar uma cal AJAX, um objeto de promessa é
retornado. Pense em uma promessa como uma promessa de trabalho. O objeto de
promessa permite que você registre uma chamada -
método de retorno a ser executado quando a chamada AJAX for bem-sucedida, falhar,
estiver progredindo e for concluída. O objeto de promessa tem os seguintes métodos que
você pode usar para registrar funçõ es chamadas.
■■ always () adiciona manipuladores a serem chamados quando a chamada AJAX for

concluída, independentemente de se ela foi bem-sucedida
■■ done () Adicionar manipuladores a serem chamados quando a chamada AJAX for bem-
sucedida
■■ fail () Adicionar manipuladores a serem chamados quando a chamada AJAX falhar
■■ progress () adiciona manipuladores a serem chamados quando a chamada AJAX gera

notificaçõ es de progresso
O có digo a seguir demonstra a refatoraçã o da funçã o addNumbers para usar a promessa
que é retornada do cal AJAX.
var data = getFormData ();
serverAddition (data) .done (displayResult);
function getFormData () {
var x = $ ('# x'). val ();
var y = $ ('# y'). val ();
return {"x": x, "y": y};

}
function serverAddition (data) {
return $ .getJSON ('/ adiçã o', dados);
function displayResult (serve rData) {
$ ('# resultado'). html (serverData.result);
Entã o o que aconteceu aqui? Parece que o tamanho do có digo aumentou e, em alguns

aspectos, aumentou, mas também ficou mais limpo. A funçã o serverAddition lida com a
chamada AJAX para o servidor, mas nã o tenta controlar os resultados. Em vez disso, a
funçã o serverAddition retorna um objeto de promessa e o emissor pode decidir como lidar
com o resultado.
A funçã o addNumbers é responsá vel por coletar os dados a serem passados para a funçã o
serverAddition e decidir como processar o resultado. Para coletar os dados, uma chamada é
feita para a funçã o getFormData que coleta os dados e cria um objeto que pode ser usado
para a calibraçã o AJAX. O objeto de dados é passado para a funçã o serverAddition. A
promessa retornada é usada encadeando uma chamada ao método executado. O método
done requer um parâ metro de funçã o, que pode ser uma funçã o anô nima como nos
exemplos anteriores, ou você pode passar o nome de uma funçã o como no exemplo em que
a funçã o displayResult é especificada. A criaçã o de uma funçã o específica permite que as
outras funçõ es chamem a funçã o displayResult, o que ajuda a promover a reutilizaçã o do
có digo. O seguinte é o arquivo default.js apó s refatorar as outras funçõ es.
$ ('# btnSubtract'). on ('click', subtractNumbers)
$ ('# btnMultiplication'). on ('click', multiplyNumbers)
$ ('# btnDivision'). on ('click', divideNumbers)

});
var da ta = getFormData ();
serverAddition (data) .done (displayResult);
function getFormData () {
var x = $ ('# x'). val ();
var y = $ ('# y'). val ();
return {"x": x, "y": y};
function serverAddition (data) {
return $ .getJSON ('/ adiçã o', dados);
functio n displayResult (serverData) {
$ ('# resultado'). html (serverData.result);
function subtractNumbers () {
serverSubtraction (data) .done (displayResult);
}

function serverSubtraction (data) {
return $ .post ('/ subtraction', data, 'json');
function multiplyNumbers () {
serverMultiplication (data) .done (displayResult);
function serverMultiplication (data) {
return $ .ajax ({
url: '/ multiply',
dados: dados,
tipo: 'PUT',
dataType: 'json',
cache: falso
});
serverDivision (data) .done (displayResult);

379
function serverDivision (data) {
return $ .ajax ({
url: '/ divide',
dados: dados,
tipo: 'DELETE',
dataType: 'json',
cache: falso
});
Se você exibir a pá gina da Web e digite os nú meros de x e y , você deve ver valores de
retorno adequadas até que você tente dividir b y zero. Em JavaScript, dividir por zero nã o
lança uma exceçã o; ele retorna infinito. A conversã o para um objeto JSON, no entanto,
lançará um erro de aná lise, portanto, nenhum valor é exibido.
Para resolver esse problema, uma funçã o displayError é adicionada e o método de falha da
promessa é usado para assinar a falha da cal AJAX, conforme mostrado no exemplo de
có digo a seguir.
serverDivision (data) .done (displayResult) .fail (displayError);

}
function displayError (ser verData, error) {
valor var = 'Sem resultado';
if ('resultado' em serverData) value = serverData.result;
$ ('# resultado'). html (valor + '-' + erro);
O método fail é encadeado à chamada serverDivision apó s o método feito cal. Além disso,
a funçã o displayE rror determina se serverData tem uma propriedade de resultado usando
a palavra-chave in . Se a propriedade do resultado existir, seu valor será exibido. Esta
funçã o possui um segundo parâ metro, denominado erro, que identifica a origem do
erro. Ambos os itens sã o concatenados e exibidos.
Nos exemplos anteriores, a pá gina da web Math.html veio do mesmo site que continha o
serviço da web, e o URL para as solicitaçõ es de serviço da web era um URL relativo no
site. Se a pá gina Math.html tivesse chamada AJAX e contivesse URLs para acessar serviços
da web em outros sites, a chamada AJAX falharia porque isso representa um possível
ataque de script entre sites (XSS). Existem maneiras de permitir chamadas AJAX entre sites,
a mais comum das quais é o compartilhamento de recursos de origem cruzada (CORS) . CORS
é uma especificaçã o de navegador que define maneiras de um servidor web permitir que
seus recursos sejam acessados por uma pá gina web de um domínio diferente. CORS
Chave
Os termos fornecem um meio-termo pelo qual você pode configurar o acesso entre
domínios em vez de permitir o acesso a todos ou negar o acesso a todos.
Você implementa o CORS no servidor da web enviando o cabeçalho Access-Control-Al ow-

Origin quando o serviço da web é acessado. Aqui está um exemplo do cabeçalho.
Access-Control-Allow-Origin: *

Este exemplo permite que qualquer pessoa acesse o serviço da web, mas isso poderia abrir
o site para XSS
ataques de sites maliciosos. Em geral, é preferível listar os sites permitidos explicitamente,

como segue.
Access-Control-Allow-Origin: http://contoso.com:8080 http://www.adventure-

works.com/
■■ Você tem um serviço da web que fornece acesso somente leitura aos dados. Você
deseja expor esse serviço da web para que ele possa ser chamado de qualquer outro
site. Qual cabeçalho você retornaria?
■■ Use o seguinte cabeçalho.
Access-Control-Allow-Origin: *
Resumo da lição
■■ Os serviços da Web fornecem a capacidade de enviar dados ao servidor e receber dados

de volta do servidor sem a necessidade de redesenhar a tela do navegador.
■■ AJAX, que significa Asynchronous JavaScript and XML, permite escrever JavaScript que
chama o servidor de forma assíncrona e processa o resultado.
■■ Juntar vá rios serviços da web para criar um aplicativo é chamado de mashup.
■■ Representational State Transfer (REST) é implementado pela manipulaçã o de recursos

da web, usando um conjunto uniforme de operaçõ es sem estado. REST tenta usar as
operaçõ es padrã o de HTTP (ou protocolos semelhantes ) mapeando operações CRUD (criar,
recuperar, atualizar e excluir) para métodos HTTP.
■■ Os serviços da web arbitrá rios expõ em um conjunto arbitrá rio de operaçõ es e sã o

conhecidos como grandes serviços da web. Eles normalmente usam mensagens XML com
formataçã o especial, chamadas de mensagens SOAP (S imple Object Access Protocol). O
objeto principal que faz uma chamada AJAX é XMLHttpRequest.
■■ Você pode usar o jQuery para criar chamadas assíncronas independentes do navegador
para o servidor.
JQuery tem um objeto de promessa que você pode usar para registrar funçõ es a
serem executadas quando a chamada AJAX está progredindo, foi bem-sucedida, falhou ou
foi concluída. Um objeto de promessa é retornado de todas as chamadas AJAX.
■■ Compartilhamento de recursos de origem cruzada (CORS) pode ser implementado no
servidor para permitir que os navegadores façam ligaçõ es para o serviço da web de outros
domínios.
381
Revisão da aula
liçã o. Você pode encontrar as respostas a essas perguntas e explicaçõ es de por que
cada escolha está correta ou incorreta na seçã o “Respostas” no final deste capítulo.
1. Você deseja criar um serviço REST para seu serviço da web interno e usar os verbos
HTTP que correspondem à s operaçõ es CRUD. Você sabe que o navegador que seus usuá rios
usarã o é compatível e o firewall nã o será um problema. Quais sã o os verbos HTTP que
correspondem a CRUD (em ordem)?
A. CRIAR, PUBLICAR, OBTER, EXCLUIR
B. OBTER, RECUPERAR, ATUALIZAR, EXCLUIR
C. COLOCAR, OBTER, POSTAR, EXCLUIR
D. POSTAR, OBTER, ATUALIZAR, EXCLUIR
2. Qual é o objeto principal usado para fazer uma chamada AJAX assíncrona que retorna um
resultado JSON?
A. XMLHttpRequest
B. AjaxRequest
C. JsonResponse
D. AjaxAsync
3. Você deseja usar jQuery para fazer uma chamada AJAX que usará o método HTTP POST.
Qual método jQuery você pode usar?
A. $ .post ()
B. $ .getJSON ()
C. $ .get ()
D. $ .param ()
Pratica exercícios

concluídos podem ser instalados a partir da pasta de exercícios prá ticos que é fornecida
com o conteú do complementar.
Neste exercício, você aplica seu conhecimento de site, serviço da web e Node.js criando um
site que recebe dados de postback da pá gina ContactUs.html do projeto WebCalculator que
você modificou no capítulo anterior. Você cria o site em uma pasta separada de sua soluçã o
WebCalculator e, a seguir, copia o projeto WebCalculator para uma subdiretó rio do
site. Nesse cená rio, o Node.js ainda pode servir pá ginas do WebCalculator 382 CAPÍTULO
8 Sites e serviços
projeto. Da perspectiva do Node.js, todos os arquivos estã o em seu site, mas você ainda
pode abrir a soluçã o WebCalculator no Visual Studio conforme necessá rio.
1. Se você ainda nã o fez isso, instale o Node.js de http://nodejs.org/ .
2. Abra a janela do prompt de comando.
3. Crie uma pasta para o novo site.
Isso requer que você navegue até o local e crie a pasta. Por exemplo, os comandos a seguir
navegam até a pasta Practice Exercises na raiz da unidade C, crie uma nova pasta
ContosoWeb e navegue até a nova pasta.
C:
cd \ Exercícios de prá tica
md ContosoWeb
cd ContosoWeb
4. Na pasta Recursos, encontre a soluçã o WebCalculator. Copie a soluçã o e cole-a na pasta

ContosoWeb.
5. Na pasta ContosoWeb, crie um arquivo package.json digitando o seguinte comando.
npm init
Este comando inicia o assistente. Digite o seguinte.

■■ nome: ContosoWeb
■■ versã o: 0.0.0
■■ descriçã o: Site da Contoso
■■ main: index.js
■■ palavras-chave: Contoso, WebCalculator
■■ autor: seu nome
■■ licença: BSD
6. Abra o arquivo package.json e adicione uma dependência dos pacotes express e

formidable, conforme mostrado no arquivo package.json modificado a seguir.
"nome": "ContosoWeb",
"versã o": "0.0.0",
"descriçã o": "Site da Contoso",
"main": "index.js",
"scripts": {
"test": "echo \" Erro: nenhum teste foi especificado \ "&& exit 1"
},
"palavras-chave": [
"Contoso",
"WebCalculator"
],
"licença": "BSD" ,

383
“Formidável”: “1.x”,
“Expresso”: “3.0.0”
7. Instale os pacotes dependentes digitando o seguinte comando.
npm install
8. Abra o Visual Studio Express 2012 for Web. Clique em Arquivo e escolha Abrir
Site; selecione a pasta ContosoWeb.
9. Na pasta do site da Contoso, crie um arquivo index.js e adicione uma referência aos
pacotes expressos e formidá veis da seguinte maneira.
10. Adicione uma instruçã o para mapear solicitaçõ es está ticas para a pasta WebSolution /
We bCalculator da seguinte maneira.
app.use (express.static (__ dirname + '/ WebCalculatorSolution /

WebCalculator')); 11. Adicione o có digo para redirecionar o usuá rio à pá gina default.html
se o URL nã o incluir um nome de arquivo, conforme a seguir.
response.redirect ('default.html');
});
12. Adicione o có digo para ouvir na porta 8080 e registre uma mensagem no console
informando isso.
O arquivo index.js deve ter a seguinte aparência.

var formidab le = require ('formidá vel');
app.use (express.static (__ dirname + '/ WebCalculatorSolution / WebCalculator')); app.get

('/', funçã o (solicitaçã o, resposta) {
});
var port = 8080;
app.listen (porta);
13. Teste seu trabalho executando o site e usando o seguinte comando na janela do prompt
de comando.
índice de nó

14. Se você vir um prompt pop-up informando que o Windows Firew all bloqueou alguns
recursos, conforme mostrado na Figura 8-13, certifique-se de que ambas as caixas de
seleçã o estejam selecionadas e clique no botã o Permitir acesso para continuar.
FIGURA 8-13 Aceitando ambas as opçõ es quando solicitado
15. Depois de iniciar o site, abra o navegador e digite http: // localhost: 8080 t o ver a

home page Contoso.
Certifique-se de limpar o cache da pá gina pressionando Ctrl + F5. Você deve ver a pá gina

inicial da Contoso e ser capaz de clicar no link da pá gina ContactUs para ver essa pá gina.
16. Modifique o arquivo index.js para que um POST para / ContactMessage retorne uma
mensagem de agradecimento ao cliente e registre uma pequena mensagem na janela do
console como a seguir.
app.post ('/ ContactMessage', function (request, response) {
var lastName = fields.lastName,
firstName = fields.firstName,
email = fields.email,
me ssage = fields.message;
response.write ('Obrigado,' + firstName + '' + lastName + '<br/>'); response.write

('Entraremos em contato em' + email + '<br/>'); response.end ('Sua mensagem:' +
mensagem + '<br />');
console.log ('Solicitaçã o tratada para' + firstName + '' + lastName);
});
});
17. No Visual Studio, abra a pá gina ContactUs.html e altere o elemento < form > para POST
na URL / ContactMessage.

385
O elemento < form > modificado deve se parecer com o seguinte.
<form name = "ContactForm" method = "post" action = "/ ContactMessage"> 18. Pare e

inicie o site e, em seguida, abra o navegador e navegue até ContactUs.
pá gina html. Certifique-se de atualizar o cache pressionando Ctrl + F5.
19. Insira os dados no formulá rio e clique no botã o Enviar.
Você deve ver a resposta na janela do navegador, conforme mostrado na Figura 8-14.
FIGURA 8-14 O formulá rio processado
Nã o seria bom colocar a mensagem na pá gina sem redesenhar a pá gina?
Neste exercício, você modifica o site existente do Exercício 1 adicionando um serviço da

web para aceitar os dados e retornar uma resposta que é exibida na pá gina ContactUs.html.
1. Pare de executar o Node.js se ele estiver em execuçã o.
2. Abra o arquivo index.js. Crie uma có pia da funçã o app.post () que você criou no Exercício
1. Modifique a có pia para que seja o serviço da web e acessível usando a URL relativa /
ContactService. Modifique o có digo para que um objeto JSON seja retornado com uma
propriedade de resultado que contém a mesma mensagem que estava na resposta da
pá gina da web do Exercício 1. Modifique a mensagem registrada no console para que você
possa saber a diferença entre lidar com um postback de pá gina e um postagem de serviço
da web.
O arquivo index.js completo deve se parecer com o seguinte.

app.use (express.static (__ dirname + '/ WebCalculatorSolution / WebCalculator')); app.get

('/', funçã o (solicitaçã o, resposta) {
386 CAPÍTULO 8 Websites e servic es
});
app.post ('/ ContactMessage', function (request, response) {
mensagem = f ields.message;
response.write ('Obrigado,' + primeiroNome + '' + sobrenome + '<br/>'); response.write

('Entraremos em contato em' + email + '<br/>'); response.end ('Sua mensagem:' +
mensagem + '<br />');
console.log ('Solicitaçã o tratada para' + firstName + '' + lastName);
});
});

app.post ('/ ContactService', function (request, response) {
var form = novo formidável.IncomingForm ();
mensagem = campos.mensagem,
resultado = 'Obrigado,' + primeiroNome + '' + sobrenome + '<br/>'
+ 'Entraremos em contato em' + email + '<br/>'
+ 'Sua mensagem:' + mensagem + '<br />';

('{ "resultado": "' + resultado + '"}');
console.log ('Solicitação de serviço tratada para' + firstName + '' + lastName);
});
});
var port = 8080;
app.listen (porta);
3. Usando o Visual Studio, localize a pasta de scripts que contém o arquivo library.js da

Calculadora.
Clique com o botã o direito na pasta de scripts e adicione um novo arquivo JavaScript
denominado ContactUs.js.
4. Abra o arquivo ContactUs.html e adicione elementos < script > para jQuery e o novo

arquivo ContactUs.js.
5. Altere o atributo de tipo do botã o enviar de enviar para botã o.
6. Adicione um elemento < div > apó s o final do elemento < form > e defina seu id como

result.
A seguir está a pá gina ContactUs.html preenchida.
<! DOCTYPE html>
<head>
<title> Entre em contato conosco </title>
<link href = "Content / default.css" rel = "stylesheet" /> Exercícios prá ticos CAPÍTULO 8
387
<script src = ”Scripts / jquery-1.8.2.js”> </script>
<script src = ”Scripts / ContactUs.js”> </ s cript>
</head>
<body>
<cabeçalho>
</hgroup>
</header>
<nav>
</nav>
<div role = "main">

<div id = "ContactUs ">
<form name = "ContactForm" method = "post" action = "/ ContactMessage">
<div>
<input type = "text" id = "firstName" name = "firstName"
obrigató rio = "obrigató rio" />
</div>
<div>
<input type = "text" id = "lastName" name = "lastName"
</div>
<div>
<input type = "email" id = "email" name = "email"
</div>
<div>
<textarea id = "mensagem" name = "mensagem"
obrigató rio = "obrigató rio"> </textarea>
</div>
<div>
<tipo de botão = ”botão” id = ”enviar”
name = ”enviar”> Enviar </button>

</div>
</form>
<div id = ”result”> </div>
</div>
</div>
<ao lado>
<p> Anú ncios </p>
</aside>
<footer>
</p>
</footer>
</div>
</body>
</html>
7. No arquivo ContactUs.js, adicione uma funçã o de servidor cal que usa jQuery para fazer
um AJAX
chamada que posta os dados na URL / ContactService e coloca o resultado no elemento

<div id = ”result”>.
function callServe r () {
var data = $ ('# ContactForm'). serialize ();
$ .post ('/ ContactService', data, function (returnObject) {

$ ('# resultado'). html (returnObject.result);
}, 'json');
8. No arquivo ContactUs.js, adicione uma referência a jQuery e adicione uma funçã o $
(document) .ready () com uma chamada para se inscrever no evento click do botã o submit
para que clicar no botã o submit execute o Cal Server funçã o.
O arquivo ContactUs.js preenchido deve se parecer com o seguinte.
$ ('# submit'). on ('click', callServer);
});
function callServer () {
var data = $ ('form [name = "ContactForm"]'). serialize (); $ .post ('/ ContactService', data,
function (returnObject) {
$ ('# resultado'). html (returnObject.result);
}, 'json') ;
9. Pare e inicie o ContosoWeb.
10. No navegador, navegue até a pá gina ContactUs.html.
11. Pressione Ctrl + F5 para garantir que você tenha a versã o mais recente do arquivo.
12. Insira os dados no formulá rio e clique no botã o Enviar.
Em vez de ver uma nova pá gina, você deve ver o resultado na mesma pá gina, conforme

389
FIGURA 8-15 O formulá rio enviado exibindo uma mensagem na mesma pá gina Exercícios
práticos sugeridos
capítulo.
■■ Exercício 1 Aprenda mais sobre Node.js criando um serviço da web que tenha mais
funcionalidades.
■■ Exercício 2 Saiba mais sobre serviços da web criando um serviço da web no Visual
Studio
.NET usando sua escolha de linguagem .NET.
Respostas
Lição 1
A. Incorreto: você nã o pode publicar um arquivo JavaScript sozinho porque precisa incluir

um manifesto, que é o arquivo package.json.
B. Incorreto: um mó dulo é um arquivo e você nã o pode publicar um mó dulo sozinho

porque precisa incluir um manifesto, que é o arquivo package.json.
C. Incorreto: um arquivo ou mó dulo pode conter classes, mas o manifesto, que é

o arquivo pac kage.json, é necessá rio.
D. Correto: O pacote contém um manifesto package.json e os mó dulos que você deseja

publicar.
2. Respostas corretas: A e D
A. Correto: Um pacote pode ser instalado localmente.
B. Incorreto: Agrupado nã o é um escopo vá lido.
C. Incorreto : nomeado nã o é um escopo vá lido.
D. Correto: Um pacote pode ser instalado globalmente.
A. Incorreto: o pacote expresso, também conhecido como expressjs, simplifica a criaçã o do

site, mas faz mais.
B. Incorreto: O pacote expresso fornece gerenciamento de sessã o, mas faz mais.
C. Incorreto: O pacote expresso simplifica a recuperaçã o de conteú do está tico, mas faz
mais.
D. Correto: O pacote expresso simplifica a criaçã o de sites, fornece gerenciamento de

sessã o e simplifica a recuperaçã o de conteú do está tico.
Lição 2
A. Incorreto: CREATE nã o é um método HTTP.
B. Incorreto: RETRIEVE e UPDATE nã o sã o métodos HTTP.
C. Correto: PUT é para criar, GET é para recuperar, POST é para atualizar e DELETE é
para excluir.
D. Incorreto: UPDATE nã o é um método HTTP.
391
A. Correto: XMLHttpRequest é usado para fazer cal s AJAX.
B. Incorreto: AjaxRequest nã o é um objeto vá lido.
C. Incorreto: JsonResponse nã o é um objeto vá lido.
D. Incorreto: AjaxAsync nã o é um objeto vá lido.
A. Correto: $ .post () é usado para POST.
B. Incorreto: $ .getJSON () usa o método HTTP GET.
C. Incorreto: $ .get () usa o método HTTP GET.
D. Incorre ct: $ .param () define parâ metros e nã o chama o servidor.
CAPÍTULO 9
Operações assíncronas
Você já executou um aplicativo e a tela congelou ao clicar em um botã o?
Você esperou até que sua operaçã o fosse concluída e, em seguida, o aplicativo começou a
funcionar novamente. Você já viu esse comportamento em pá ginas da web? Você sabe que
o problema é devido a operaçõ es de longa duraçã o, mas nã o deveria haver uma maneira
melhor de escrever esse có digo?
A resposta a essas perguntas é implementar operaçõ es de longa duraçã o como operaçõ es
assíncronas porque essas operaçõ es sã o atualmente operaçõ es síncronas. O có digo
síncrono tem um caminho de execuçã o sequencial e, quando o có digo de longa duraçã o está
em execuçã o, nada mais pode ser realizado. O que é necessá rio é outro caminho de
execuçã o para que o có digo de longa execuçã o possa ser executado em um caminho de
execuçã o enquanto a interface do usuá rio responde em outro caminho de execuçã o; isso é o
que as operaçõ es assíncronas fazem.
Este capítulo explora operaçõ es assíncronas, usando jQuery e web workers.
■■ Liçã o 1: operaçõ es assíncronas usando jQuery e WinJS 393
■■ Liçã o 2: Trabalhando com web workers 404
Lição 1: operações assíncronas usando jQuery e
WinJS
Uma operação assíncrona é executada em um encadeamento diferente do encadeamento

principal, sendo um encadeamento um caminho de execuçã o separado. O capítulo anterior
forneceu uma breve introduçã o.
Termos para programaçã o assíncrona ao executar chamadas AJAX para o servidor. Além do

suporte do jQuery para o uso de cal s AJAX, você pode desejar realizar cal s assíncronas
locais para operaçõ es que consomem tempo. Por exemplo, se estiver executando
animaçõ es usando jQuery, você descobrirá que as animaçõ es jQuery sã o executadas de
forma assíncrona.
393
Esta liçã o enfoca os objetos adiados e prometidos do jQuery para controlar a execuçã o de
execuçã o assíncrona.
■■ Descreva a assincronia, usando jQuery.
■■ Implementar operaçõ es assíncronas usando o objeto de promessa .
O padrã o para trabalhar com assincronia é usar um objeto de promessa. O objeto

de promessa (também conhecido como futuro ou diferido ) fornece um mecanismo para
agendar o trabalho a ser feito em uma chave de valor
Termos que ainda nã o podem ser calculados. O objeto de promessa pode estar em um dos
três estados: pendente, resolvido ou rejeitado. Ele começa no estado pendente, passa para
resolvido ou rejeitado e nã o muda. O benefício é que ele permite que você escreva uma
ló gica sem bloqueio que seja executada de forma assíncrona, sem ter que escrever muitos
có digos de sincronizaçã o e plumbing.
CommonJS, que define uma especificaçã o para usar JavaScript em todos os lugares, define a
especificaçã o Promise / A que muitas tecnologias JavaScript implementam. O objeto de
promessa é implementado em WinJS e jQuery. Depois de entender o conceito de um objeto
de promessa, você descobrirá que é fá cil de implementar usando qualquer tecnologia .
Considere o seguinte exemplo de có digo síncrono que usa o objeto XMLHttpRequest para
fazer uma calibraçã o AJAX.
function fetchAjaxSync (url) {
var xhr = new XMLHttpRequest ();
xhr.open (url, "GET", falso);
xhr.send ();
if (xhr.status == 200) {
return xhr;
lançar um novo erro (xhr.statusText);
Neste exemplo, passar um valor false para o método open faz com que o có digo seja
executado de forma síncrona. Quando o método de envio é chamado, o programa espera
até que o resultado esteja disponível e entã o prossegue para a pró xima linha de có digo,
onde o status retornado é verificado para determinar se ocorreu um erro. Neste exemplo, o
resultado pode apenas ser retornado ao calmante que está aguardando a conclusã o da
operaçã o. É como se o cal e r puxasse o resultado da funçã o fetchAjaxSync.
O bloco de có digo é compacto, fá cil de ler e simples. Neste exemplo, a chamada AJAX leva
30 segundos para ser concluída e outro có digo nã o pode ser executado. O resultado é que a
tela parece travar até que a chamada AJAX seja concluída. Esse é o caso de fornecer um
modelo de programaçã o assíncrona. O có digo a seguir il ustra a reescrita.
394 CAPÍTULO 9 Operaçõ es assíncronas
function fetchAjaxAsync (url, callback, errorCallback) {
var xhr = new XMLHttpR equest ();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
processResult ();
outro {
errorCallback (novo erro (xhr.statusText));
xhr.open (url, "GET", verdadeiro);

xhr.send ();
Neste exemplo, passar um valor verdadeiro para o método aberto indica que a assincronia é

a melhor.
Além disso, o evento onreadystatechanged recebe uma funçã o que é executada sempre que
o objeto XMLHttpRequest muda de estado. Quando o estado tem o valor 4 , a operaçã o é
concluída e o status é verificado em busca de um erro. Como essa é uma operaçã o
assíncrona, o programa nã o espera quando chama o método de envio. Em vez disso, o
programa prossegue para a pró xima linha e sai da funçã o fetchAjaxAsync. Quando o
resultado está disponível, uma chamada para a funçã o processResult é feita e o resultado é
passado. É como se a chamada assíncrona enviasse o resultado ao có digo que o processará .
Este bloco de có digo é certamente maior do que o bloco de có digo síncrono. Também é um

pouco mais difícil de ler, mas a vantagem é que nã o há bloqueio, entã o o programa
permanece rá pido e fluido.
Quando você tem um có digo que precisa encadear vá rias chamadas assíncronas, de modo
que cada chamada deve ser concluída antes do início da pró xima, você deseja criar uma
chamada assíncrona para uma sequência de chamadas . Isso fica difícil
rapidamente. Atualmente, a funçã o fetchAjaxAsync é um tanto genérica; você passa os
parâ metros e obtém um resultado. No entanto, se você deseja encadear chamadas
adicionais, pode ser necessá rio modificar este có digo para torná -lo mais específico para a
tarefa que você está tentando realizar. O objeto de promessa ajuda a resolver esses
problemas e permite que as operaçõ es sejam encadeadas facilmente.
Criação de objetos de promessa jQuery usando $ .Deferred ()
Você pode criar um objeto de promessa usando o método $ .Deferred. Parece um pouco

estranho que o nome do método nã o seja $ .Promise (), mas $ .Deferred () retorna um
objeto adiado que envolve o objeto de promessa com a funcionalidade de controlar o objeto
de promessa , conforme mostrado na Figura 9- 1 O criador do objeto de promessa controla
o estado dele chamando um dos métodos no objeto adiado. Os métodos que terminam com
“com” passam dados para os assinantes do objeto de promessa. O criador do objeto adiado
pode executar o método de promessa no objeto adiado para obter o objeto de promessa,
que é somente leitura. O có digo que faz referência ao objeto de promessa pode se inscrever
para alteraçõ es de estado nesse objeto, mas nã o pode modificar seu estado.
Por exemplo, chamar o método feito no objeto de promessa permite que você passe uma
funçã o contendo có digo que é executado quando o objeto de promessa é resolvido
(concluído).

Liçã o 1: Operaçõ es assíncronas usando jQuery e WinJS CAPÍTULO 9
395
FIGURA 9-1 Os objetos Adiado e Promessa
A seguir está um exemplo de uso do método $ .Deferred () para definir um tempo limite
que um usuá rio pode assinar usando os métodos no objeto de promessa.
function timeoutAsync (milissegundos) {
var diferido = $ .Deferred ();
s etTimeout (funçã o () {deferred.resolve ();}, milissegundos);
return deferred.promise ();
Neste exemplo de có digo, o nome da funçã o termina com Async como uma convençã o para
ajudar o desenvolvedor a entender que uma chamada assíncrona está sendo feita nesta
funçã o. Um objeto adiado é criado usando o método $ .Deferred e atribuído à variá vel
adiada.
Em seguida, é chamada a funçã o global JavaScript setTimeout, que tem um parâ metro de
funçã o e um parâ metro de tempo limite em milissegundos. O parâ metro de funçã o
contém o có digo a ser executado quando o cronô metro expira. Nenhum có digo específico
do aplicativo está na funçã o. Em vez disso, o método de resoluçã o é chamado no objeto
adiado para indicar a conclusã o do cronô metro. Chamar o método de resoluçã o no objeto
adiado altera o estado do objeto de promessa para resolvido e executa todo o có digo que foi
anexado ao objeto de promessa usando o método executado.
Além do método de resoluçã o, você pode chamar o método de rejeiçã o para indicar uma
falha da funçã o assíncrona. A seguir está um exemplo do uso da funçã o timeoutAsync.
function abcAsync () {
var promessa = timeoutAsync (2000);
promessa.done (function () {alert ('feito!')});
promessa de retorno;
Neste exemplo, o nome da funçã o também termina com Async para indicar que é
assíncrona.
É importante manter esta convençã o e sempre retornar um objeto de promessa que foi
chamado de 396 CAPÍTULO 9 Operaçõ es assíncronas
A funçã o pode usar para adicionar mais có digo a ser executado na conclusã o ou que o
calmante pode usar para verificar o estado da promessa. A funçã o timeoutAsync é
chamada, o que executa a açã o de tempo limite, mas nã o executa o có digo específico do
aplicativo. Em seguida, o có digo específico do aplicativo é adicionado ao objeto de
promessa chamando o método feito no objeto de promessa e passando o có digo. Quando
você assina o objeto de promessa usando o método done, seu có digo é executado apó s a
conclusã o bem-sucedida (resolvido, nã o rejeitado). Finalmente, o objeto de promessa é
retornado ao telefone.
Quando este có digo é executado, há um atraso de dois segundos e, em seguida, um pop-up é
exibido com a mensagem “pronto!”
Você pode chamar o método done vá rias vezes para adicionar mais có digo a ser executado
apó s a conclusã o bem-sucedida. A ordem em que você adiciona o có digo é como o có digo
será executado. Além disso , o có digo tem garantia de execuçã o apenas uma vez, porque
você nã o pode alterar o estado depois que ele foi alterado para resolvido ou falhou.
Falha de manuseio
Você pode executar o có digo em caso de falha da chamada assíncrona, inscrevendo-se no
objeto de promessa e usando o método fail. O exemplo a seguir demonstra o uso do método
fail para executar có digo em caso de falha, que é o estado rejeitado.
promessa.fail (function () {alert ('falhou!')});
Lidando com a limpeza de conclusão
Além de assinar o sucesso ou a falha, você pode adicionar có digo para executar quando a
chamada assíncrona for concluída, independentemente do sucesso ou da falha. Inscreva-se
no objeto de promessa usando o método always. O exemplo a seguir demonstra o uso do
método always.
promessa.always (function () { alert ('sempre!')});
promessa.fail (function () {alert ('falhou!')});
Nos bastidores, há uma coleçã o feita de funçõ es e uma coleçã o falhada de funçõ es.
Uma das coleçõ es de funçõ es é executada na mudança de pendente para resolvido ou

rejeitado. Quando você usa o método always para adicionar có digo a ser executado apó s a
conclusã o, sua funçã o é adicionada à s coleçõ es feitas e com falha. Neste exemplo, você vê a
Liçã o 1: operaçõ es crô nicas de Asyn usando jQuery e WinJS. CAPÍTULO 9
397
"sempre!" mensagem antes do "pronto!" ou “falhou!” mensagem porque a assinatura
sempre está antes das outras. Se a assinatura always for a ú ltima assinatura, ela será
executada por ú ltimo.
É ú til saber que você pode assinar o objeto de promessa mesmo depois de resolvido.
Isso executa imediatamente a funçã o que você passa para o método executado. Considere o
exemplo a seguir, no qual dois objetos de promessa sã o usados para encadear açõ es, e a
conclusã o de secondPromise adiciona uma funçã o a firstPromise, que já foi concluída.
var firstPromise = timeoutAsync (2000);
firstPromise.done (function () {
var secondPromise = timeoutAsync (3000);
secondPromise.done (function () {
firstPromise.done (function () {alert ('done!')});
});
});
return firstPromise;
Neste exemplo, apó s 2 segundos, o objeto firstPromise é concluído, o que inicia um novo
tempo limite, criando assim o objeto secondPromise. Apó s 3 segundos (5 segundos a partir
do início da funçã o), o objeto secondPromise é concluído, o que adiciona uma funçã o ao
objeto firstPromise. Como o objeto firstPromise já foi concluído, a funçã o é executada
imediatamente. As assinaturas existentes nã o sã o executadas novamente porque as funçõ es
de assinante têm garantia de execuçã o apenas uma vez.
Há um problema com o exemplo de có digo anterior em que abcAsync está retornando o

objeto firstPromise. Isso é um problema porque o objeto abcAsync deve retornar um objeto
de promessa que indica a conclusã o de todo o có digo dentro da funçã o. Nesse caso, quando
firstPromise for concluído, o có digo ainda está em execuçã o, representado pelo objeto
secondPromise.
Seria conceitualmente correto tentar retornar o objeto secondPromise, mas o objeto
secondPromise nem mesmo é criado por 2 segundos.
Você também percebeu que o encadeamento da segunda operaçã o assíncrona exigia que
você aninhasse a segunda operaçã o dentro do có digo de conclusã o bem-sucedida da
primeira operaçã o assíncrona? Quando você precisa encadear três, quatro ou mais
operaçõ es, pode se envolver em aninhar vá rios níveis e criar có digo nã o gerenciá vel, como
demonstra o exemplo a seguir.
firstPromise.done (function () {
se condPromise.done (function () {
var thirdPromise = timeoutAsync (1000);
thirdPromise.done (function () {
var fourPromise = timeoutAsync (1234);
fourPromise.done (function () {
firstPromise.done (function () {aler t ('done!')});
});
});
});
});
return firstPromise;
Para resolver o problema, implemente o encadeamento usando a funçã o pipe no objeto de

promessa. O có digo a seguir é uma reescrita do exemplo anterior usando a funçã o pipe para
eliminar o aninhamento.
var secondPromise = firstPromise.pipe (function () {
retornar timeoutAsync (3000);
});
var thirdPromise = secondPromise.pipe (function () {
return timeoutAsync (1000);
});
var fourPromise = thirdPromise.pipe (function () {
});
firstPromise.done (function () {alert ('done!')});
});
return fourPromise;
Neste exemplo, o objeto fourPromise é retornado corretamente para que o chamador possa

saber quando todo o có digo está concluído. A funçã o de chamada também pode chamar os
métodos done, fail ou always no objeto de promessa retornado para adicionar có digo a ser
executado apó s a conclusã o.
No exemplo aninhado, há um atraso de 6 segundos antes da criaçã o do objeto

fourPromise. Mesmo se a variá vel fourPromise estivesse no escopo, isso seria um problema
para o có digo de chamada que deseja assinar o objeto de promessa retornado
imediatamente, que será nulo.
O método pipe cria imediatamente um objeto de promessa que pode ser inscrito
e devolvido de forma adequada ao emissor. Isso é interessante porque timeoutAsync
(1234) ainda nã o é chamado por 6 segundos e essa chamada estava criando o objeto
fourPromise. O método pipe criou um objeto proxy e o retornou, mas apó s 6 segundos, a
chamada para timeoutAs ync (1234) criou um objeto de promessa, que foi anexado ao
objeto proxy original.
Há mais nesta histó ria, no entanto. Se a primeira chamada assíncrona falhar, a falha será
automaticamente passada para o objeto de promessa canalizada na cadeia. Você
nã o precisa de có digo extra para lidar com isso. Você pode assinar a falha do objeto
fourPromise e será notificado automaticamente se qualquer chamada assíncrona na cadeia
falhar.
399
■■ Você deseja encadear várias chamadas assíncronas. Qual método de

promessa você usará?
■■ Use o método pipe no objeto de promessa.
Execução paralela usando $ .when (). Then ()
Os exemplos anteriores exibiram operaçõ es encadeadas nas quais cada operaçã o espera

que a operaçã o anterior seja concluída antes de começar. Por exemplo, o exemplo anterior
levou 7,234 segundos para ser concluído. À s vezes, isso é necessá rio, mas você pode querer
executar as operaçõ es simultaneamente. Se você executar cada operaçã o em paralelo, como
poderá saber se todas as quatro operaçõ es foram concluídas?
Você pode usar o método $ .when () para indicar a conclusã o de vá rias operaçõ es
assíncronas. O método $ .when () nã o é bloqueador, entã o é normalmente usado com um
objeto adiado . No exemplo a seguir, o exemplo anterior foi reescrito para executar todas as
quatro operaçõ es em paralelo.

$ .when (firstPromise, secondPromise, thirdPromise, fourPromise)
.entã o (function () {alert ('concluído!'); deferred.resolve ();},
function () {deferred.reject (); });
O método $ .when () aceita parâ metros de promessa e monitora a conclusã o de todos. Se

um parâ metro nã o for um objeto de promessa, ele será imediatamente considerado
concluído. O método $ .when () cria sua pró pria promessa que é passada para o método
then (), que primeiro aceita uma funçã o a ser executada em caso de sucesso e, em seguida,
aceita uma funçã o a ser executada em caso de falha. Nã o mostrado aqui é que o método
then () também aceita um terceiro parâ metro de funçã o a ser executado quando o
progresso muda.
O objeto adiado também pode notificar seu objeto de promessa quando o progresso for
alterado. Ele faz isso executando o método de notificaçã o do objeto adiado quando você
deseja atualizar o progresso.
O objeto de promessa tem um método de progresso que aceita uma funçã o chamada

quando o método de notificaçã o é executado.
O exemplo a seguir é uma reescrita do exemplo anterior; o objeto adiado notifica seus
assinantes da mudança de progresso .
var count = 0;

firstPromise.always (function () {deferred.notify (++
count);}); secondPromise.always (function () {deferred.notify (++
count);}); thirdPromise.always (function () {deferred.notify (++
count);}); fourPromise.always (function () {deferred.notify (++ count);}); $ .quando
(firstP romise, secondPromise, thirdPromise, quartaPromise)
.entã o (function () {alert ('concluído!'); deferred.resolve ();},
Neste exemplo, a variá vel de contagem é inicializada em zero e, em seguida, apó s a

conclusã o de cada calibraçã o assíncrona, a variá vel de contagem é incrementada. O có digo
a seguir chama a funçã o abcAsync e exibe o progresso.
function runAbcAsync () {
var promessa = abcAsync ();
promessa.progresso (funçã o (msg) {alerta (msg);});
Neste exemplo, conforme o progresso é atualizado, um pop-up é exibido com o valor

numérico.
As chamadas assíncronas podem ser concluídas em qualquer ordem.
Chamadas assíncronas crônicas condicionais
À s vezes, você precisa fazer uma chamada assíncrona condicional y. No caso de operaçõ es
encadeadas nas quais uma operaçã o intermediá ria é executada condicionalmente, você
precisa de uma maneira de unir (ou remover) a operaçã o. Considere o seguinte exemplo,
no qual a terceira operaçã o assíncrona é executada condicionalmente.
funçã o abcAsync ( includeThird ) {
var secondPromise = firstPromise.pipe (function () {

});
var thirdPromise = includeTh ird? secondPromise.pipe (function () {
return timeoutAsync (1000);
}): secondPromise;
var fourPromise = thirdPromise.pipe (function () {
});
firstPromise.done (function () {alert ('done!' )});
401
});
return fourPromise;
Neste exemplo, o includeThird variá vel é passado para a funçã o abcAsync e é usado para
determinar se a terceira funçã o assíncrona deve ser cal ed. Se includeThird for false,
a variá vel thirdPromise ainda precisa ser atribuída a uma promessa para encadear a quarta
cal assíncrona, entã o secondPromise é atribuído diretamente à variá vel thirdPromise . Isso
mantém a cadeia de operaçõ es.
Ao fazer chamadas paralelas assíncronas, a chamada condicional da terceira operaçã o é

feita de maneira diferente, conforme mostrado no exemplo a seguir.
function abcAsync (includeThird) {
var secondP romise = timeoutAsync (3000);

var thirdPromise = includeThird? timeoutAsync (1000): $ .when (); var fourPromise =
timeoutAsync (1234);
$ .when (firstPromise, secondPromise, thirdPromise, fourPromise)
.entã o (function () {alert ('concluído!'); deferred.resolve ( );},
Neste exemplo, se includeThird for true, a terceira chamada assíncrona é executada e

atribuída à variá vel thirdPromise . Se includeThird for false, $ .when () é atribuído
à variá vel thirdPromise . Lembre-se de que $ .when () é usado na parte inferior da funçã o
para indicar que todas as operaçõ es assíncronas foram concluídas, o que cria uma nova
promessa que é passada para o método then (). Se você chamar $ .when () sem parâ metros,
um novo objeto de promessa será criado com seu status definido como resolvido.
NOTA USE O MÉTODO $ .when ()
Quando você precisar criar um objeto de promessa cujo estado seja resolvido, use
o método $ .when () .
Resumo da lição
■■ O objeto adiado é um invó lucro para o objeto de promessa. O objeto adiado fornece

controle do objeto de promessa, que é somente leitura.
■■ O objeto de promessa tem os métodos done, fail, always e progress que aceitam um
parâ metro de funçã o, o que permite que você assine a mudança de estado. O método then
() no objeto de promessa permite que você se inscreva em done, fail e progress.
■■ As funçõ es de assinatura sã o executadas no má ximo uma vez.
■■ O método state pode ser usado para obter o estado atual do objeto de promessa.
■■ O método pipe do objeto de promessa encadeia operaçõ es assíncronas.
■■ Os métodos de resoluçã o e resolvewith do objeto diferido indicam uma conclusã o bem-

sucedida.
Os métodos rejeitar e rejeitar com o objeto diferido indicam uma operaçã o com falha. Os
métodos de notificaçã o e notificaçã o com o objeto adiado atualizam o progresso.
■■ O nome de todas as funçõ es que executam chamadas assíncronas deve terminar com
Async, e essas funçõ es devem sempre retornar um objeto de promessa.
■■ Use o método $ .wh en () para monitorar a conclusã o de muitas chamadas paralelas

assíncronas. Use o método $ .when () sem parâ metros para criar um objeto de promessa
resolvido.
■■ Operaçõ es assíncronas encadeadas e paralelas automaticamente passam a falha e

progridem até o fim da cadeia.
Revisão da aula
1. Qual método encadeia operaçõ es assíncronas?
A. tubo ()
B. feito ()
C. resolve ()
D. sempre ()
2. Qual método cria um objeto de promessa resolvido?
A. resolve ()
B. feito ()
C. $ .when ()
D. $ .Deferred ().
3. Qual método você chama para assinar a conclusã o bem-sucedida de uma operaçã o
assíncrona?
A. feito
B. sempre
C. completo
D. sucesso
4. Qual método você chama no objeto adiado para indicar uma mudança em andamento?
A. progresso
B. notificar
C. feito
D. resolver
403
Lição 2: trabalhar com web workers
Outra maneira de realizar operaçõ es assíncronas é usar web workers. Os Web workers sã o
ú teis para a execuçã o de um arquivo de script em uma tarefa bac kground. O trabalhador
pode enviar mensagens para a tarefa de geraçã o postando mensagens para um
manipulador de eventos especificado pelo criador. As mensagens podem ser qualquer
objeto que possa ser serializado. O thread de trabalho nã o bloqueia o thread da interface do
usuá rio, entã o a IU permanece rá pida e fluida.
■■ Descrever web workers.
■■ Implementar operaçõ es assíncronas usando o web worker.
O estado dos Web workers é isolado da pá gina da web. Quando as mensagens sã o postadas

de e para o web worker, o objeto da mensagem é serializado. Isso cria uma có pia da
mensagem, para que o web worker e o criador nunca façam referência ao mesmo objeto. Os
Web workers também nã o têm bloqueios de sincronizaçã o, seçõ es críticas, semá foros ou
mutexes. Eles nã o têm acesso ao modelo de objeto de documento (DOM), entã o se você
precisar acessar o DOM, o trabalhador da web deve postar uma mensagem de volta para o
criador, e o criador deve processar a mensagem e acessar o DOM conforme necessá rio .
É comum iniciar um web worker, que cria seu pró prio loop de eventos e aguarda novas
entradas. Isso é semelhante a um serviço, que inicia e espera pela entrada e nã o termina
apó s o processamento da entrada.
Considere a seguinte pá gina HTML que aceita entrada e tem um botã o que envia a entrada
a um web worker. O web worker responde uma vez para cada caractere da mensagem
enviada, retornando a letra maiú scula.
<! DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/ xhtml">
<head>
<title> </title>
<script src = "default.js"> </script>
</head>
<body>
<input type = "text" id = "message" value = "Digite a mensagem aqui" /> <br />
<button id = "btnSend" type = "button"> Enviar mensagem </ bu tton> <br />
<div id = "result"> </div>
</body>
</html>
Esta pá gina HTML tem uma referência a jQuery e um arquivo default.js. O arquivo default.js
tem có digo para criar um novo web worker chamando o construtor Worker () e passando o
URI de um script para execuçã o. Você pode receber notificaçõ es do web worker
configurando as propriedades onmessage e onerror para uma funçã o de manipulador de
eventos, conforme mostrado no exemplo a seguir.
/// <reference path = "Scripts / jquery-1.8.2.js" / > var worker = new Worker
('myWork.js');
worker.onmessage = function (e) {
$ ('# resultado'). append (e.data + '<br />');

}
trabalhador.onerror = funçã o (e) {
$ ('# resultado'). append ('Erro:' + e.data + '<br />');
$ ('documento'). ready (function () {
$ ('# btnSend ') .on ('click', function () {
worker.postMessage ($ ('# mensagem'). val ());
});
});
O có digo do web worker está no arquivo myWork.js. Este exemplo também mostra a

assinatura de btnSend, que recupera o valor da mensagem e posta a mensagem para o
trabalhador.
O arquivo myWork.js contém o có digo a seguir.
self.onmessage = function ( e) {
para (c em e.data) {
postMessage (e.data [c] .toUpperCase ());
Este có digo se inscreve no evento onmessage. Neste exemplo, quando uma mensagem é

recebida do criador, este có digo percorre cada caractere, converte-o em maiú sculas e envia
o caractere maiú sculo de volta ao criador.
Você pode interromper um web worker chamando o método worker.terminate () do

criador ou chamando o método close () dentro do pró prio trabalhador.
■■ Você deseja realizar uma operação assíncrona em seu código de

rower b . Qual objeto você pode usar?
■■ Use o objeto trabalhador.
Resumo da lição
■■ Um web worker fornece execuçã o de có digo assíncrono.
■■ A comunicaçã o de e para o web worker é realizada com o uso do método postMessage.
Lesso n 2: Trabalhando com web workers CAPÍTULO 9
405
■■ O método postMessage aceita um objeto serializá vel.
■■ O web worker nã o tem acesso aos elementos DOM.
Revisão da aula
Responda à s seguintes perguntas para testar seu conhecimento das informaçõ es

desta liçã o. Você pode encontrar as respostas a essas perguntas e explicaçõ es de por que
cada escolha de resposta está correta ou incorreta na seçã o “Respostas” no final deste
capítulo.
1. No có digo do web worker, você deseja que o có digo assíncrono atualize o
DOM. Qual método você pode usar?
A. updateDom ().
B. workerUpdate ().
C. dom ().
D. Você nã o pode atualizar o DOM de dentro do có digo assíncrono.
2. Qual objeto pode ser usado quando o web worker e o criador precisam fazer referência
ao mesmo objeto?
A. Mutex.
B. Semaphore.
C. Encerramento.
D. O web worker e o criador nã o podem fazer referência ao mesmo objeto.

Pratica exercícios
Se você encontrar um problema ao realizar qualquer um desses exercícios, os projetos

concluídos podem ser instalados a partir da pasta de exercícios prá ticos que é fornecida
com o conteú do complementar.
Exercício 1: Implementar execução de código assíncrono
Neste exercício, você pratica suas habilidades de execuçã o de có digo assíncrono criando

um aplicativo da Web que usa o objeto de promessa para executar animaçõ es ao exibir uma
mensagem.
A implementaçã o da caixa de mensagem personalizada começa com um elemento < div >

que cobre a tela para que o usuá rio nã o possa clicar em qualquer outro lugar da tela
quando a caixa de mensagem for exibida. A capa tem transparência para que o usuá rio
ainda possa ver a tela.
Sobre a capa está um elemento < div > completamente transparente para a caixa de

mensagem geral. Esta
O elemento < div > também cobre a tela. Isso é necessá rio para centralizar o conteú do da

mensagem. Aninhado dentro da caixa de mensagem está outro elemento < div > que
contém o conteú do da mensagem, que é centralizado definindo as margens esquerda e
direita como automá ticas no conteú do da mensagem .
Você pode animar a exibiçã o da caixa de mensagem e usar objetos de promessa para
sequenciar as animaçõ es.
1. Inicie o Visual Studio. Clique em Arquivo e escolha Novo Projeto. Navegue até Instalado

| Modelos
| Visual Basic ou Visual C # | Aplicativo da Web vazio do ASP.NET.
2. Defina o nome do seu aplicativo para AnimationExample .
4. Defina o nome da soluçã o para AnimationExampleSolution .
5. Certifique-se de manter a caixa de seleçã o Criar diretó rio para soluçã o selecionada .
Quando o aplicativo for criado, você terá um projeto vazio.

7. Para adicionar uma pá gina inicial, clique com o botã o direito do mouse no projeto
AnimationExample na janela do Solution Explorer, escolha Adicionar, selecione Pá gina
HTML e nomeie-o como default.html .
8. Para defini-la como a pá gina inicial, clique com o botã o direito na nova pá gina
default.html no Gerenciador de Soluçõ es e clique em Definir como Pá gina Inicial.
9. Adicione uma referência ao jQuery clicando com o botã o direito do mouse no nó do

projeto. Clique em Gerenciar pacotes NuGet. Digite jQuery na caixa de texto
de pesquisa . Clique no botã o Instalar no resultado do jQuery.
10. Na janela Solution Explorer, clique com o botã o direito na pasta Scripts e adicione um
arquivo JavaScript chamado default.js.
11. Na janela Solution Explorer, clique com o botã o direito do mouse no projeto
AnimationExample, escolha Adicionar, selecione Nova pasta e nomeie como Conteúdo . Na
pasta Conteú do, adicione um arquivo de folha de estilo default.css.
12. No arquivo default.html, referencie os arquivos default.css, jquery-1.8.2.js e default.js

arrastando os arquivos da janela do Solution Explorer e soltando-os apó s o
elemento < title >.
Lembre-se de que você deve usar a versã o do jQuery que instalou usando o Gerenciador de
Pacotes NuGet. Seu elemento < head > deve ser semelhante ao seguinte.
<head>
<title> </title>
<script src = "Scripts / default. js"> </script>
</head>
13. Adicione um elemento < div > que cubra a tela com seu atributo id definido para cobrir.
14. Adicione um elemento < div > que exibe a mensagem e define seu atributo id para

messageBox.
O elemento < body > deve ser semelhante ao seguinte.
< corpo>
<div id = "cover">
</div>
<div id = "messageBox">
</div>
</body>
407
15. Adicione um elemento < div > dentro do elemento messageBox < div > e defina seu

atributo id como messageContent.
16. Adicione um elemento < div > dentro do elemento messageContent < div > e defina seu

id como message.
O elemento < body > deve ser semelhante ao seguinte.
<body>
<div id = "cover">
</div>
<div id = "messageBox" >
<div id = "messageContent">
<div id = "message"> </div>
</div>
</div>
</body>
17. Apó s o elemento message < div >, adicione um elemento <br /> e, em seguida, adicione
um elemento < button >, que será usado para testar a caixa de mensagem personalizada, e
defina seu atributo id como btnShowMessage.
Sua pá gina default.html deve ter a seguinte aparência.
<! DOCTYPE html>

<head>
<title> </title>
</head>
<body>
<div id = "cover">
</div>
<div id = "messageBox">
<div id = "messageContent">
<div id = "message"> </ d iv>
<br />
<button type = "button" id = "messageOk"> OK </button>
</div>
</div>
<button type = "button" id = "btnShowMessage"> Mostrar mensagem </button>
</body>
</html>
18. No arquivo default.css, adicione uma regra de estilo para o elemento de capa.
Este elemento nã o será exibido por padrã o. Seu tamanho deve ser a tela inteira. Seu Z-
Index deve ser maior do que qualquer coisa na pá gina, exceto a capa que é definida na
pró xima etapa. Sua cor de fundo deve ser definida como preto. Seu estilo deve ser
semelhante ao seguinte.
#cobrir {
Mostrar nenhum;
cor de fundo: preto;
índice z: 100;
topo: 0px;
esquerda: 0px;
largura: 100%;
altura: 100%;
19. Adicione uma regra de estilo para o elemento messageBox.
Este elemento nã o será exibido por padrã o. Seu tamanho deve ser a tela inteira. Seu Z-
Index deve ser maior do que qualquer coisa na pá gina, incluindo a capa que você acabou
de definir. Seu estilo deve ser o seguinte.
#caixa de mensagem {
Mostrar nenhum;
topo: 0px;
esquerda: 0px;
largura: 100%;
altura: 100%;
índice z: 101;
20. Adicione uma regra de estilo para o elemento messageContent.
Este elemento nã o será exibido por padrã o. Seu tamanho deve ser 30 por cento de largura e
30 por cento tal. Ele será centralizado definindo as margens esquerda e direita como
automá ticas. Sua margem superior será de 100 pixels do topo. O estilo da borda será
definido como só lido e a largura da borda será definida como 1 pixel. Seu preenchimento
será definido em 10 pixels. Seu estilo deve ser o seguinte.
#conteú do da mensagem {
largura da borda: 1px;
Mostrar nenhum;
posiçã o: relativa;
margem: 100px auto auto auto;
largura: 30%;
altura: 30%;
21. No arquivo default.js, adicione uma referência à biblioteca jQuery. Adicione

uma variá vel de mil isegundos para definir a duraçã o das animaçõ es e defina-a como
1.000. Adicione uma variá vel de opacidade para definir a opacidade da capa e defina-a
como 0,5, conforme mostrado no exemplo de có digo a seguir.
var milissegundos = 1000;
opacidade var = 0,5;
409
22. Para fornecer um esmaecimento animado do elemento de capa, crie uma funçã o

displayCoverAsync e adicione có digo para esmaecer até o valor do valor de opacidade
definido anteriormente. Retorne o objeto de promessa da seguinte maneira.
function displayCoverAsync () {
return $ ('# capa'). fa deTo (milissegundos, opacidade) .promise ();
23. Para definir a mensagem e fornecer um slide animado da parte superior da tela do

conteú do da mensagem, adicione uma funçã o showMessageContentAsync. Na funçã o,
adicione o có digo para definir o HTML do elemento da mensagem, adicione o có digo para
mostrar o elemento messageBox e, por fim, adicione o có digo para deslizar o elemento
messageContent para baixo a partir do topo, usando a variá vel mil isegundo como duraçã o,
como segue.
function showMessageContentAsync (mensagem) {
$ ('# mensagem'). html (mensagem);
$ ('# messageBox'). show ();
return $ ('# messageContent'). slideDown (milissegundos) .promise ();
24. Adicione uma funçã o showMessageAsync que tenha um parâ metro de mensagem.
Esta funçã o irá chamar displayCoverAsync e definir uma variá vel coverPromise para

o objeto pro mise retornado .
25. Adicione o có digo que chama showMessageContentAsync apó s a conclusã o de

displayCoverAsync. Retorne uma promessa que identifica a conclusã o de todas as
chamadas assíncronas na funçã o.
function showMes sageAsync (mensagem) {
var coverPromise = displayCoverAsync ();
var messagePromise = coverPromise.pipe (function () {
retornar showMessageContentAsync (mensagem);
});
return messagePromise;
}
26. Quando btnShowMessage for clicado, ele mostrará uma mensagem usando a hora
atual. Adicione uma funçã o getTime que retorna a hora atual. Adicione uma funçã o
displayTimeAsync que cria uma mensagem chamando a funçã o getTime e, em seguida,
chama a funçã o showMessageAsync .
function displayTimeAsync () {
var message = 'A hora é agora' + getTime ();
retornar showMessageAsync (mensagem);
function getTime () {
var dateTime = new Date ();
var horas = dateTime.getHours ();
v ar minutos = dateTime.getMinutes ();
retornar horas + ':' + (minutos <10? '0' + minutos: minutos);
27. Adicione o có digo que executa quando o documento está pronto.

Este có digo assinará o evento click do botã o btnSh owMessage e chamará a funçã o
displayTimeAsync, conforme a seguir.
$ ('# btnShowMessage'). click (displayTimeAsync);
});
28. Pressione F5 para executar o aplicativo. Clique no botã o Mostrar mensagem.
Você deverá ver a capa animada que aparece gradualmente e, em seguida, deverá ver a
janela de mensagem deslizar para baixo a partir da parte superior da tela. A tela final é
mostrada na Figura 9-2.
FIGURA 9-2 A tela apó s a parada da animaçã o
Observe que, embora o botã o Mostrar mensagem ainda esteja visível, você nã o pode clicar
nele agora porque a capa está sobre o botã o. Além disso, o botã o OK nã o está programado
para fechar a janela de mensagem. Quando você clica no botã o OK, a janela de mensagem
deve recuar e desaparecer, e a capa deve esmaecer. O botã o Mostrar mensagem deve ser
clicá vel.
29. Pare de executar o aplicativo.
30. Adicione uma funçã o hideMessageContentAsync. Na funçã o, adicione có digo para

deslizar o elemento messageContent até a p da tela. Atribua a promessa criada a uma
nova variá vel de promessa e adicione có digo para ocultar o elemento messageBox. Adicione
o có digo para retornar a promessa, da seguinte maneira.
function hideMessageContentAsync (mensagem) {
var promessa = $ ('# messageContent'). slideUp (milissegundos onds) .promise

(); promessa.done (function () {$ ('# messageBox'). hide ();});
411
31. Adicione uma funçã o hideCoverAsync. Na funçã o, adicione có digo para esmaecer o

elemento de capa e retornar o objeto de promessa, como a seguir.
function hideCoverAsync () {
return $ ('# cover'). fadeOut (milissegundos) .promise ();
32. Adicione uma funçã o hideMessageAsync que chama a funçã o

hideMessageContentAsync e atribui a promessa retornada a
uma variá vel messagePromise . Adicione o có digo para chamar a funçã o hideCoverAsync
quando messagePromise for concluído e atribua a promessa retornada a
uma variá vel coverPromise . Retorne coverPromise conforme mostrado no exemplo de
có digo a seguir.
function hideMessageAsync () {
var messagePromise = hideMessageContentAsyn c ();
var coverPromise = messagePromise.pipe (function () {
return hideCoverAsync ();
});
return coverPromise;
33. Modifique o có digo pronto para documento existente para assinar o evento click do
botã o messageOk e chame a funçã o hideMessageAsync conforme a seguir .
$ ('# btnShowMessage'). click (displayTimeAsync);
$ ('# messageOk'). click (hideMessageAsync);
});
34. Execute o aplicativo.
Quando você clica no botã o Mostrar mensagem, a mensagem animada é exibida. Quando

você clica no botã o OK, a mensagem é removida da tela deslizando-se para a parte superior
da tela e, em seguida, a tampa desaparece.

capítulo.
■■ Exercício 1 Aprenda mais sobre operaçõ es assíncronas, escrevendo mais có digo que faz
chamadas assíncronas para serviços da web.
■■ Exercício 2 Saiba mais sobre web workers, escrevendo um aplicativo que tem um web
worker que executa có digo do lado do cliente.
Respostas
Lição 1
A. Correto: Use o método pipe para encadear operaçõ es assíncronas porque ele fornece
acesso ao progresso, falha, sucesso e conclusã o.
B. Correto: O método executado executa o có digo quando concluído, mas nã o fornece

acesso a falha, progresso e conclusã o.
C. Incorreto: O método de resoluçã o indica sucesso, mas nã o é usado para encadeamento.
D. Incorreto: O método always executa na conclusã o, independentemente do sucesso ou

falha. Este método nã o fornece acesso ao progresso, sucesso ou fracasso.
A. Incorreto: o método resolve resolve um objeto de promessa existente, mas nã o cria um

novo objeto de promessa resolvido.
B. Inc orrect: O método done executa o có digo apó s o sucesso de um objeto de promessa,

mas nã o cria um objeto de promessa resolvido.
C. Correto: O método $ .when () cria um objeto de promessa resolvido.
D. Incorreto: O método $ .Deferred () cria um objeto promi se nã o resolvido .
A. Correto: o método executado executa o có digo apó s a conclusã o bem-sucedida.
B. Incorreto: O método sempre executa o có digo independentemente do sucesso ou falha.

C. Incorreto: O método completo nã o existe.
D. Incorreto: O método de sucesso nã o existe.
A. Incorreto: O método de progresso executa o có digo quando o progresso é alterado; nã o

indica uma mudança em andamento.
B. Correto: O método de notificaçã o indica uma mudança em andamento.
C. Incorreto: O método don e executa o có digo quando concluído, mas nã o indica uma

alteraçã o em andamento.
D. Incorreto: O método de resoluçã o indica sucesso, nã o uma mudança em andamento.
413
Lição 2
A. Incorreto: Nã o há método updateDom ().
B. Incorreto: nã o há método workerUpdate ().
C. Incorreto: Nã o há método dom ().
D. Correto: O web worker nã o pode modificar o DOM.
A. Incorreto: nã o há nenhum objeto JavaScript Mutex.
B. Incor rect: Nã o há nenhum objeto JavaScript Semaphore.
C. Incorreto: Nã o há objeto JavaScript Closure.
D. Correto: o web worker nã o pode acessar o mesmo objeto, e os objetos passados ao web
worker pelo criador sã o serializados para produzir uma có pia do objeto que o web worker
acessará .

CAPÍTULO 1 0
Comunicações WebSocket
Este livro cobriu AJAX e serviços da Web, que fornecem um meio de comunicaçã o com o
servidor a partir do cliente do navegador. Este capítulo é sobre como iniciar a comunicaçã o
do navegador para o servidor ou do servidor para o navegador. Se o servidor pode
enviar mensagens ao navegador, o navegador nã o precisa consultar o servidor para obter
informaçõ es de status.
Um exemplo de comunicaçã o bidirecional é um aplicativo de sala de chat pelo qual o

servidor pode notificar muitos navegadores de que uma mensagem foi recebida de um
navegador. Muitos ga mes enviam dados para um servidor, e o servidor controla os dados
que estã o sendo enviados de volta para os clientes. Outro exemplo é quando você inicia
uma operaçã o assíncrona no servidor e o servidor fornece mensagens de atualizaçã o de
status ao navegador. Este capítulo explora as comunicaçõ es bidirecionais, usando o
WebSocket.
Lição neste capítulo:
■■ Liçã o 1: Comunicando-se usando WebSocket 415
Lição 1: Comunicação usando WebSocket
O protocolo WebSocket é uma tecnologia da web que fornece comunicaçõ es ful -duplex em
uma ú nica conexã o TCP. A interface de programaçã o de aplicativos (API) WebSocket está
atualmente em status de rascunho de trabalho pelo World Wide Web Consortium (W3C),
mas o protocolo WebSocket foi padronizado pela Internet Engineering Task Force (IETF)
como RFC 6455.
WebSocket substitui a longo polling con CEPT. Com o polling longo, o cliente envia uma
solicitaçã o ao servidor e, se o servidor tiver informaçõ es para responder, ele responde.
Chave
Termos Se o servidor nã o tiver informaçõ es para responder, o servidor mantém a conexã o

aberta e nã o responde até que tenha dados. Quando o cliente recebe os dados, ele envia
outra solicitaçã o ao servidor e a sequência se repete. O benefício da longa votaçã o é
415
que o cliente está esperando por dados e o servidor tem uma conexã o aberta. Quando os
dados estã o prontos, eles sã o enviados imediatamente, o que resulta em diminuiçã o da
latência. Um problema com esse conceito é que as conexõ es podem expirar, o que requer a
criaçã o de uma nova conexã o.
■■ Descreva o protocolo WebSocket.
■■ Descrever e implementar o objeto WebSocket.
O protocolo WebSocket fornece uma maneira padronizada para o servidor enviar conteú do

para o navegador sem ser solicitado pelo cliente e permite que mensagens sejam
transmitidas de um lado para outro, mantendo a conexã o aberta. Uma conversa contínua
bidirecional (bidirecional) pode ocorrer entre um navegador e o servidor.
O protocolo WebSocket foi projetado para ser implementado em navegadores e servidores

da Web, mas qualquer aplicativo cliente ou servidor pode usá -lo. O protocolo é um
protocolo independente baseado em TCP. Sua ú nica relaçã o com o HTTP é que seu
handshake é interpretado pelos servidores HTTP como uma solicitaçã o para mudar para o
protocolo WebSocket. Cada quadro do protocolo WebSocket possui apenas 2 bytes de
overhead e nã o há cabeçalhos. A leveza do protocolo WebSocket permite mais interaçã o
entre um navegador e um site. Esse desempenho torna o protocolo WebSocket uma escolha
fá cil para comunicaçã o quando é necessá rio entregar conteú do ao vivo e criar jogos em
tempo real.

O W3C é responsá vel por definir a API WebSocket; conforme mencionado , a API está em
estado de rascunho de trabalho no momento em que este artigo foi escrito. Isso significa
que o W3C pode fazer muito mais alteraçõ es antes que a API se torne uma
recomendaçã o. No entanto, as versõ es mais recentes do Internet Explorer, Google Chrome,
Firefox, Opera e Safari sã o compatíveis com WebSocket.
No coraçã o da API WebSocket está o objeto WebSocket, que é definido no objeto

janela. Você pode testar facilmente se este objeto existe para determinar se o navegador
oferece suporte a WebSocket. O objeto WebSocket contém os seguintes membros.
■■ Construtor WebSocket Um método que requer um argumento de URL e pode

opcionalmente aceitar parâ metros adicionais para definir o subprotocolo que você usará ,
como chat ou rpc . O cliente e o servidor sã o tipicamente combinados para usar o
mesmo protocolo.
■■ close Um método que fecha o WebSocket.
■■ send Um método que envia dados ao servidor.
416 CAPÍTULO 10 Comunicaçõ es WebSocket
■■ binaryType Uma propriedade que indica o formato de dados biná rios que o evento
onmessage recebe.
■■ bufferedAmount Uma propriedade que contém o nú mero de bytes de dados

enfileirados usando o método de envio.
■■ extensões Uma propriedade que indica as extensõ es que o servidor selecionou.
■■ onclose Uma propriedade de evento que é chamada quando o soquete é fechado.
■■ onerror Uma propriedade de evento que é chamada quando há um erro.
■■ onmessage Uma propriedade de evento que é chamada quando uma mensagem é

recebida.
■■ onopen Uma propriedade de evento que é chamada quando o WebSoc ket estabelece

uma conexã o.
■■ protocolo Uma propriedade que indica o protocolo que o servidor selecionou.
■■ readyState Uma propriedade que indica o estado da conexã o WebSocket.
■■ url Uma propriedade que indica o URL atual do objeto WebSocket .

As comunicaçõ es de protocolo WebSocket normalmente usam a porta TCP nú mero 80, de
modo que os ambientes que bloqueiam conexõ es nã o padrã o com a Internet usando um
firewall ainda passarã o pacotes WebSocket.
No exemplo a seguir, é criada uma pá gina da Web que chama o servidor WebSocket .org

echo, que retornará a mensagem transmitida a ele. Considere a seguinte pá gina da Web que
contém uma caixa de texto para inserir uma mensagem e um botã o para enviar a
mensagem a um servidor; toda saída é anexada ao elemento < div > cujo id é divOutput.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
<h2> Teste WebSocket </h2>
Digite a mensagem: <input type = "text" id = "txtMessage" />
<button type = "button" id = "btnSend"> Enviar </button> <br />
<div id = "divOutput"> </div>
</body>
</html>
Enquanto um URL HTTP começa com http: // ou https: // para HTTP seguro, o URL
WebSocket
começa com ws: // ou wss: // para protocolo WebSock et seguro . No có digo do navegador,

você cria um objeto WebSocket e configura os eventos onopen, onmessage, onerror e
onclose. Chame o método send para enviar uma mensagem e o evento onmessage será
acionado se houver uma resposta.
O arquivo default.js contém o seguinte.

var wsUri = 'ws: //echo.websocket.org/';
Liçã o 1: Comunicando-se usando WebSocket CAPÍTULO 10 417
var webSocket;
if (checkSupported ()) {
conectar();
$ ('# btnSend ') .click (doSend);
});
function writeOutput (message) {
var output = $ ("# divOutput");
output.html (output.html () + '<br />' + mensagem);
function checkSupported () {
if (window.WebSocket) {
writeOutput ('WebSockets suportados!');
return true;
outro {
writeOutput ('Nã o há suporte para WebSockets');
$ ('# btnSend'). attr ('disabled', 'disabled');

retorna falso;
function connect () {
webSocket = novo WebSocket (wsUri);
webSocket.onopen = funçã o (evt) {onOpen (evt)};
webSocket.onclose = function (evt) {onClose (evt)};
webSocket.onmessage = function (evt) {onMessage (evt)};
webSocket.onerror = function (evt) {onError (evt)};
function doSend () {
if (webSocket.readyState! = webSocket.OPEN)
writeOutput ("NÃ O ABERTO:" + $ ('# txtMessage'). val ());
Retorna;
writeOutput ("SENT:" + $ ('# txtMessage'). val ());
webSocket.send ($ ('# txtMessage'). val ());
function onOpen (evt) {
writeOutput ("CONNECTED");
}

function onClose (evt) {
writeOutput ("DESCONECTADO");
function onMessage (evt) {
writeOutput ('RESPOSTA:' + evt.data);
function onError (evt) {
writeOutput ('ERROR:' + evt.data);
Neste exemplo , wsUri é definido como o servidor de eco WebSocket.org, que ecoa
mensagens enviadas a ele. A funçã o Ready chama a funçã o checkSupported para ver se
WebSocket é compatível. Isso é feito verificando se o objeto de janela tem um objeto
WebSocket . Se WebSocket for compatível, a funçã o de conexã o será chamada.
A funçã o de conexã o instancia o WebSocket. O construtor aceita um argumento URI.
A criaçã o do objeto WebSocket inicia automaticamente as comunicaçõ es com o URI para

tentar abrir a conexã o de forma assíncrona. A funçã o de conexã o também se inscreve nos
eventos onopen, onclose, onmessage e onerror. É importante se inscrever nesses eventos
imediatamente porque a conexã o pode abrir rapidamente e você deseja garantir que se
inscreveu no evento onopen o mais rá pido possível para nã o perder o evento.
■■ Você pode criar um objeto WebSocket e chamar o método open quando

quiser abrir uma conexão WebSocket?
■■ Não, não há método aberto no objeto WebSocket. Quando você instancia o objeto

WebSocket, ele tenta abrir automaticamente de forma assíncrona.
A funçã o doSend envia uma mensagem ao servidor. Antes de enviar a mensagem, esta

funçã o verifica a propriedade readyState do objeto WebSocket . A propriedade readyState
contém um dos seguintes valores.
■■ CONNECTING = 0 A conexã o ainda nã o está aberta.
■■ OPEN = 1 A conexã o está aberta e pronta para se comunicar.
■■ CLOSING = 2 A conexã o está em processo de fechamento.
■■ FECHADO = 3 A conexã o está fechada ou nã o pô de ser aberta.
A propriedade readyState será definida como um dos valores numéricos, mas você pode
usar as constantes conforme mostrado na funçã o doSend que testa webSocket.OPEN. Se o
WebSocket nã o estiver aberto, uma mensagem é exibida e a funçã o retorna sem enviar. Se o
WebSocket estiver aberto, uma mensagem será exibida e a mensagem será enviada usando
o método de envio.
Quando uma mensagem é recebida do servidor, a funçã o onMessage é chamada e o objeto

de evento é passado. A propriedade data do objeto de evento contém a mensagem.
Quando um erro é recebido, a funçã o onError é chamada e o objeto de evento é passado.
Um erro pode vir do servidor ou ser gerado quando o cliente nã o consegue se conectar ao
servidor ou o tempo limite da conexã o se esgota. Dependendo do erro, o objeto de evento
pode passar a causa na propriedade de dados. Você também pode descobrir que a
propriedade de dados é indefinida, especialmente em um cená rio de tempo limite.

Quando a pá gina da web é exibida usando o Internet Explorer 10, uma mensagem é exibida
informando, WebSockets Supported! A mensagem CONNECTED é exibida quando a
conexã o é aberta.
Se uma mensagem for inserida e o botã o Enviar for clicado, a mensagem é enviada ao
servidor e a resposta é exibida, conforme mostrado na Figura 10-1.
FIGURA 10-1 A pá gina de teste WebSocket concluída
Um dos problemas que você pode encontrar é que o servidor pode atingir o tempo limite de
sua conexã o apó s um período de inatividade. Você também pode ter firewal s entre seu
navegador e o servidor que pode expirar sua conexã o. Em muitos casos, um erro é
disparado sem uma mensagem associada. Você pode identificar erros de tempo limite nã o
acionando nenhuma atividade por até 20 minutos.
Você pode perceber que obtém tempos limite consistentemente apó s apenas 30

segundos. Embora seja relativamente novo, o rascunho do W3C para WebSocket nã o
aborda os tempos limite.
Uma maneira de lidar com tempos limite é enviar uma mensagem vazia ao servidor
periodicamente.
O arquivo defaul t.js concluído fornece um exemplo de envio perió dico de uma mensagem

vazia, conforme a seguir.

var wsUri = 'ws: //echo.websocket.org/';
var webSocket;
var timerId = 0;
if (checkSupported ()) {
conectar();
$ ('# btnSend'). click (doSend);
});
function writeOutput (message) {
var output = $ ("# divOutput");
output.html (output.html () + '<br />' + mensagem );
function checkSupported () {
if (window.WebSocket) {
writeOutput ('WebSockets suportados!');
return true;
outro {
writeOutput ('Nã o há suporte para WebSockets');
$ ('# btnSend'). attr ('disabled', 'disabled');

retorna falso;
function connect () {
webSocket = novo WebSocket (wsUri);
webSocket.onopen = function (evt) {onOpen (evt)};
webSocket.onclose = function (evt) {onClose (evt)};
webSocket.onmessage = function (evt) {onMessage (evt)};
webSocket.onerror = function (evt) {onError (evt)};
function keepAlive () {
tempo limite de var = 15000;
if (webSocket.readyState == webSocket. OPEN) {
webSocket.send ('');
timerId = setTimeout (keepAlive, timeout);
function cancelKeepAlive () {
if (timerId) {
cancelTimeout (timerId);
}

function doSend () {
if (webSocket.readyState! = webSocket.OPEN)
writeOutput ("NÃ O ABERTO: " + $ ('# txtMessage'). val ());
Retorna;
writeOutput ("SENT:" + $ ('# txtMessage'). val ());
webSocket.send ($ ('# txtMessage'). val ());
function onOpen (evt) {
writeOutput ("CONNECTED");
mantenha vivo();
function onClose (evt) {
cancelKeepAlive ();
writeOutput ("DESCONECTADO");
function onMessage (evt) {
writeOutput ('RESPOSTA:' + evt.data);
function onError (evt) {
writeOutput ('ERROR:' + evt.data);
Neste exemplo, o có digo em negrito foi adicionado. No topo está a declaraçã o do timerId.
Foi adicionada uma funçã o keepAlive que envia uma mensagem vazia a cada 15
segundos. A funçã o keepAlive é chamada quando a funçã o onOpen é executada e é
recursiva; ele nã o para até que o cronô metro seja cancelado usando o timerId. Uma funçã o
cancelKeepAlive foi adicionada para cancelar o loop da funçã o keepAlive e é chamada
quando a funçã o onClose é chamada .
Lidando com desconexões de conexão
Além de fornecer o recurso keepAlive, você também pode precisar lidar com conexõ es que
fecham devido a erros de rede. Isso pode exigir que você chame a funçã o de conexã o de
dentro da funçã o onClos e. Dependendo do seu aplicativo, isso pode causar problemas no
servidor quando o servidor nã o reconhece que a nova conexã o pertence a um cliente
existente. Seu aplicativo pode precisar lidar com isso, forçando o cliente a enviar
uma mensagem de identificaçã o . Lembre-se de que as mensagens estã o no formato que
você ditar, portanto, você pode definir sua pró pria estratégia de mensagens para seu
aplicativo.
À s vezes, ao colocar seu aplicativo WebSocket em produçã o, você precisa que seu aplicativo
seja executado em um web farm , quando vá rios servidores lidam com solicitaçõ es de
entrada. Essas solicitaçõ es sã o tipicamente com balanceamento de carga para fornecer o
melhor desempenho. Como você pode ter um con-Key aberto
Conexã o de termos com um servidor e ainda tem balanceamento de carga?

Quando há vá rios servidores da web, você pode implementar servidores fixos, pelos quais o
cliente vai continuamente para o mesmo servidor para o qual foi originalmente. Isso
resolve o problema de conexã o aberta. Você pode compartilhar o estado entre vá rios
servidores Web usando um dos muitos produtos que tratam desse problema, como Redis
(serviço de dicioná rio remoto) e o serviço de cache do Microsoft App Fabric.
Apenas lembre-se de testar seu ambiente de web farm antecipadamente para

compatibilidade e problemas, porque você certamente precisará se ajustar a esse ambiente.
■■ O protocolo WebSocket e a API WebSocket fornecem suporte nativo

para balanceamento de carga em um web farm?
■■ Não, não há suporte nativo para balanceamento de carga de web farm

com protocolo WebSocket e o objeto WebSocket.
Lidar com tempos limite, conexõ es interrompidas, navegadores compatíveis e farms da

web pode ser uma tarefa desanimadora. Nã o seria muito melhor ter uma biblioteca que
possa lidar com essa tarefa para você de uma maneira consistente? Acontece que existem
bibliotecas para ajudá -lo, mas você precisa entender que se trata de bibliotecas de cliente e
servidor; você usa a biblioteca no cliente e no servidor. A seguir está uma pequena lista de
bibliotecas que podem ajudar a resolver alguns desses problemas.
Como o WebSocket ainda nã o é uma recomendaçã o e esses sã o produtos relativamente

novos, esta lista deve ajudá -lo a começar, mas pesquise na web os ú ltimos lançamentos
desses e de outros produtos.
SignalR
SignalR é uma biblioteca da Microsoft para desenvolvedores ASP.NET. Ele deve ser

implementado em um site ASP.NET, usando uma linguagem .NET, como C # ou Visual
Basic. O có digo do cliente ainda é JavaScript, no entanto.
SignalR simplifica a adiçã o de funcionalidade da web em tempo real aos seus

aplicativos. Ele usa o WebSocket quando está disponível, mas normalmente retorna a
técnicas como a longa votaçã o quando o WebSocket nã o está disponível. A melhor parte é
que você nã o precisa alterar seu có digo para essa transiçã o. Você pode ter clientes que
suportam WebSocket e clientes que nã o; os clientes trabalham bem juntos, mesmo que nã o
ofereçam suporte ao WebSocket.
SignalR também fornece eventos de conexã o aos quais você pode se inscrever para
gerenciamento de conexã o. SignalR é tã o fá cil de usar que você deve considerar isso se
estiver trabalhando em um site ASP.NET. SignalR também pode funcionar na nuvem do
Windows Azure. Você deve fornecer gerenciamento de estado para SignalR compartilhar
dados entre servidores, mas é possível.
Socket.IO
Socket.IO é uma biblioteca WebSocket criada por Guillermo Rauch, CTO e cofundador da
LearnBoost; desenvolvedor e inventor de Socket.IO, Engine.IO e codestre.am; JSConf.ar
cura-tor; entusiasta do có digo aberto; e blogger.
Socket.IO tem uma biblioteca do lado do cliente e do lado do servidor; o lado do cliente usa
JavaScript e o lado do servidor é JavaScript para uso com Node.js. Ele usa a detecçã o de
recursos para decidir se a conexã o será estabelecida com WebSocket, AJAX long polling ou
Flash polling, que é outra maneira de implementar o polling, mas requer Flash no
navegador.
A biblioteca Socket.IO é fá cil de usar e é usada nos exercícios para criar um servidor de

bate-papo.
Resumo da lição
■■ O protocolo WebSocket fornece uma maneira padronizada para o servidor enviar

conteú do ao navegador sem ser solicitado pelo cliente e permite que as mensagens sejam
enviadas e recebidas enquanto mantém a conexã o aberta.
■■ O objeto WebSocket contém métodos para enviar dados e fechar a conexã o.
■■ O objeto WebSocket contém os seguintes eventos: onclose, onmessage, onerror e

onopen.
■■ Você pode verificar a propriedade readyState no objeto WebSocket para obter o estado
da conexã o.
■■ Use ws: // para protocolo WebSocket ou wss: // para protocolo WebSocket seguro.

■■ Tempos limite, conexõ es interrompidas, implementaçõ es de web farm e
incompatibilidade de navegador sã o problemas que você deve resolver ao implementar
WebSocket.
Revisão da aula
1. Ao trabalhar com o objeto WebSocket, qual evento pode ser usado para recuperar os
dados que foram recebidos do servidor?
A. onopen
B. onclose
C. onmessage
D. onerror
2. Qual biblioteca você usaria se estivesse criando um site Node.js e desejasse

escrever có digo independente de bro wser que use WebSocket?
A. SignalR
B. Socket.IO
C. FarmSockets
D. AgnosticSocket
3. Você deseja garantir que a conexã o WebSocket nã o seja desconectada como resultado de
inatividade. Como você pode realizar isso?
A. Adicione o có digo ao evento onclose para reabrir a conexã o quando ela for fechada.
B. Adicione o có digo para enviar uma mensagem vazia periodicamente antes que a conexã o
seja fechada.
C. Defina a propriedade keepAlive no objeto WebSocket como true.
D. Crie um novo objeto WebSocket cada vez que enviar uma mensagem.
Pratica exercícios
Exerci se 1: Criar um servidor de bate-papo
Neste exercício, você aplica seu conhecimento do WebSocket criando um aplicativo da Web
para servidor de bate-papo. Embora você nã o use o objeto WebSocket diretamente, você
usará a biblioteca Socket.IO, que fornece um wrapper WebSocket que simplifica as
comunicaçõ es entre cliente e servidor.
Neste exercício, você cria o servidor de bate-papo. Você nã o poderá testar este servidor
com eficá cia até concluir o Exercício 2, no qual você cria a pá gina HTML.
1. Se você nã o tiver feito isso ainda, instalar Node.js fro m http://nodejs.org/ .
2. Abra a janela do prompt de comando.
3. Crie uma pasta para o novo site.
Você deve navegar até o local e, em seguida, criar a pasta. Por exemplo, os comandos a
seguir navegam até a pasta node_samples na raiz do C d rive, crie uma nova pasta
chat_service e navegue até a nova pasta.
C:
cd \ node_samples
md chat_service
cd chat_service
4. Na pasta chat_service, crie um arquivo package.json digitando o seguinte comando.
npm init
Este comando inicia o assistente. Digite o seguinte. (Pressione Enter para aceitar os valores

padrã o para os campos nã o mostrados.)
■■ Nome: chat_service
■■ Versã o: 0.0.0
■■ Descriçã o: um serviço de bate-papo simples
■■ Ponto de entrada: app.js

Exercícios prá ticos CAPÍTULO 10 425
■■ Autor: seu nome
■■ Licença: BSD
5. Abra o arquivo package.json e adicione uma dependência nos pacotes express e

formidable, conforme mostrado no arquivo p ackage.json modificado a seguir.
"nome": "chat_service",
"versã o": "0.0.0",
"descriçã o": "Um serviço de chat simples",
"main": "app.js",
"scripts": {
},
"licença ": "BSD",
“Privado”: verdadeiro,
“Expresso”: “3.0.x”,
“Socket.io”: “0.9.x”
6. Instale os pacotes dependentes digitando o seguinte comando.
npm install
7. Abra o Visual Studio Express 2012 for Web. Clique em Arquivo e escolha Abrir
Site; selecione a pasta chat_service.
8. Na pasta do site chat_service, crie um arquivo app.js e adicione uma referência aos
pacotes express, http e socket.io. Chame o ouça-me thod como segue.
var express = require ('express')
, app = express ()
, http = requer ('http')
, server = http.createServer (app)
, io = requer ('socket.io'). listen (servidor);
Neste có digo, você está usando o objeto http para criar um servidor baseado no objeto
expresso. Depois disso, você está usando o objeto socket.io para chamar o método listen e
passando o objeto server para indicar o servidor que estará escutando.
9. Na janela do Solution Explorer, clique com o botã o direito do mouse no nó chat_service,
clique em Adicionar e escolha Nova pasta. Nomeie a pasta como pública .
10. No arquivo app.js, adicione uma instruçã o para mapear solicitaçõ es está ticas para a
pasta / public da seguinte maneira.
11. Adicione uma instruçã o para mapear um equest da raiz para o arquivo index.html (a
ser criado no Exercício 2) da seguinte maneira.
app.get ('/', funçã o (req, res) {
res.sendfile (__ dirname + '/public/index.html');
});
O arquivo index.html é a pá gina principal de bate-papo.
12. Adicione o có digo para redirecionar o usuá rio à pá gina default.html se o URL nã o

incluir um nome de arquivo, conforme a seguir.
});
13. Adicione um sta tement para criar uma variá vel de nomes de usuário e inicialize-a como
um objeto vazio, como segue.
var usernames = {};
14. Adicione o có digo para se inscrever nos eventos socket.io conforme a seguir.
io.sockets.on ('conexã o', funçã o (soquete) {
socket.on ('sendchat', funçã o (da ta) {
io.sockets.emit ('updatechat', socket.username, data);
});
socket.on ('adduser', function (username) {
socket.username = username;
nomes de usuá rio [nome de usuá rio] = nome de usuá rio;
socket.emit ('updatechat', 'SERVER', 'você se conectou');
socket.broadcast.emit ('updatechat', 'SERVER'
, nome de usuá rio + 'conectou-se');
io.sockets.emit ('updateusers', nomes de usuá rios);
});
socket.on ('desconectar', function () {
excluir nomes de usuá rio [socket.userna me];
, socket.username + 'foi desconectado');
});
});
A primeira linha desse có digo se inscreve no evento de conexã o e executa uma funçã o
anô nima. O có digo de funçã o anô nima aceita um parâ metro de soquete, que é o objeto que
representa a conexã o do usuá rio recém-criada. Dentro da funçã o anô nima, as assinaturas
sã o criadas para os eventos sendchat, adduser e desconectar.
Os eventos sendchat e adduser sã o definidos pelo desenvolvedor.
O evento sendchat é acionado quando uma mensagem é recebida de um cliente de bate-

papo. Este có digo usa o objeto io.sockets para transmitir a mensagem a todos os clientes de
bate-papo.
Exercícios de prá tica CAPÍTULO 10 427
O evento adduser é disparado assim que o cliente faz uma conexã o. Ele adiciona o nome de
usuá rio à coleçã o de nomes de usuá rio e, em seguida, usa o objeto de soquete para chamar
o evento updatechat no cliente atual para indicar ao usuá rio que a conexã o foi bem-
sucedida. O objeto socket.broadcast s finaliza uma mensagem indicando que o cliente atual
está conectado. Esta mensagem é transmitida a todos os clientes, exceto o cliente atual.
Finalmente, o evento io.sockets.emit transmite uma lista de usuá rios atualizada para todos
os clientes.
O evento de desconexã o exclui o usuá rio da lista de nomes de usuá rio e os transmite a
todos os clientes. O objeto socket.broadcast transmite uma mensagem de desconexã o para
todos os clientes, exceto o cliente atual.
15. Adicione o có digo para ouvir na porta 8080 e registre uma mensagem no console
informando isso.
O arquivo app.js deve ter a seguinte aparência.
var express = require ('express')
, app = express ()
, http = requer ('http')
, server = http.createServer (app)
, io = requer ('socket.io'). listen (servidor);

app.get ('/', funçã o (req, res) {
res.sendfile (__ dirname + '/public/index.html');
});
var usernames = {};
io.sockets.on ('conexã o', funçã o (soquete) {
socket.on ('sendchat', funçã o (dados) {
io.sockets.emit ('updatechat', socket.username, data);
});
socket.on ('adduser', function (username) {
socket.username = username;
nomes de usuá rio [nome de usuá rio] = nome de usuá rio;
s ocket.emit ('updatechat', 'SERVER', 'você se conectou');
, nome de usuá rio + 'conectou-se');
});
socket.on ('desconectar', function () {
excluir nomes de usuá rio [socket.usernam e];

, socket.username + 'foi desconectado');
});
});
var port = 8080;
server.listen (porta);
16. Teste seu trabalho executando o site, usando o seguinte comando na janela do prompt
de comando.
node app.js
Você deverá ver a mensagem de escuta, conforme mostrado na Figura 10-2.
FIGURA 10-2 O serviço de chat em execuçã o

Neste exercício, você continua com o serviço de bate-papo do Exercício 1 e adiciona o
có digo do cliente de bate-papo. Ao terminar este exercício, você terá um aplicativo de bate-
papo funcional .
1. Abra o site do cliente, que é diferente do Exercício 1. Abra o Visual Studio Express 2012
for Web. Clique em Arquivo, escolha Abrir Site e selecione a pasta pú blica em chat_service.
2. Na janela Solution Explorer, clique com o botã o direito do mouse no nó pú blico, escolha
Adicionar e selecione Pá gina HTML. Nomeie o arquivo Index.html e clique em OK.
3. Na janela Solution Explorer, clique com o botã o direito do mouse no nó pú blico. Clique
em Adicionar, escolha Folha de estilo e nomeie o arquivo como default.css . Clique OK.
4. Na janela Solution Explorer r, clique com o botã o direito do mouse no nó pú blico, escolha

Adicionar, selecione Nova pasta, nomeie a pasta Scripts e clique em OK.
5. Na janela Solution Explorer, clique com o botã o direito na pasta Scripts, escolha Add,
selecione JavaScript File, nomeie o arquivo default.js e clique em OK.
6. Adicione a biblioteca jQuery clicando com o botã o direito do mouse no nó

pú blico. Escolha Gerenciar Pacotes NuGet, selecione Online e digite jQuery na caixa de
pesquisa.
Você deve ver o jQuery, conforme mostrado na Figura 10-3.

7. Clique em Instalar para instalar o jQuery.
FIGURA 10-3 A janela NuGet com jQuery selecionado
Adicione os arquivos do cliente socket.io. Esses arquivos foram baixados automaticamente

para o seu computador durante o Exercício 1, quando você executou o npm instal.
8. Na janela Solution Explorer, clique com o botã o direito na pasta Scripts, escolha Add e
selecione Existing Item. Navegue até a pasta chat_service e depois para a pasta node_
modules \ socket.io \ node_modules \ socket.io-client \ dist.
9. Na lista suspensa de tipo de arquivo, selecione Todos os arquivos (*. *) E, em seguida,
selecione os quatro arquivos que agora estã o sendo exibidos na pasta, conforme mostrado
na Figura 10-4.
FIGURA 10-4 Os arquivos do cliente socket.io que precisam ser adicionados ao site 430
CAPÍTULO 10 Comunicaçõ es WebSocket
Agora que você tem todos os arquivos de que precisa, é hora de adicionar seu có digo.
10. No arquivo Index.html, adicione referências ao arquivo padrã o sty le sheet, jquery,
socket.io.js e default.js.
O elemento < head > deve ser semelhante ao seguinte.
<head>
<title> </title>
<script src = "scripts / jquery-1.8.3.js"> </script>
<script src = "scripts / socket.i o.js"> </script>
<script src = "scripts / default.js"> </script>
</head>
11. No elemento < body >, adicione um elemento < div > para a lista de usuá rios e

um elemento < div > para a conversa.
O elemento < body > deve conter o seguinte.
<div class = "userContaine r">
<h2> Usuá rios </h2>
<div id = "users"> </div>
</div>
<div class = "chatContainer">
<input id = "data" />
<input type = "button" id = "datasend" value = "send" />
<div id = "chat"> </div>
</div>
12. Abra o arquivo default.css e adicione as seguintes regras s tyle.
.userContainer {
flutuar: esquerda;
largura: 200px;
borda direita: 1px preto só lido;
altura: 300px;
estouro: automá tico;
.conversationContainer {
flutuar: esquerda;
largura: 400px;
altura: 300px;
estouro: automá tico;
#dados {
largura: 250px;
13. Abra o arquivo default.js. Para obter o IntelliSense, na janela do Solution Explorer,

arraste o arquivo jquery-1.8.3.js e solte-o no topo do arquivo default.js para adicionar uma
referência à biblioteca jQuery como a seguir.
14. Declare uma variá vel de soquete . Inscreva-se no evento pronto do documento. Neste

có digo, use o objeto io para se conectar ao serviço de chat e atribuir o resultado
à variá vel sock et .
15. Assine os eventos connect, updatechat e updateusers do soquete.
16. Finalmente, assine o evento click do botã o datasend e o evento keypress da caixa de

texto de dados, como a seguir.
var socket;

$ (document) .ready (functi on () {
socket = io.connect ('http: // localhost: 8080');
socket.on ('conectar', adicionarUser);
socket.on ('updatechat', processMessage);
socket.on ('updateusers', updateUserList);
$ ('# datasend'). click (sendMessage);
$ ('# dados'). keypress (processEnterPress);
});
Este có digo está se inscrevendo nos eventos, que executam funçõ es que ainda nã o foram
criadas.
Você adiciona essas funçõ es a seguir.
17. Adicione a funçã o addUser, que chama o método emit no soquete para chamar
o método addUser no servidor de bate-papo.
O resultado do prompt pop-up para o nome de usuá rio também é passado. A funçã o
addUser deve ser semelhante à seguinte.
function addUser () {
socket.emit ('adduser', prompt ("Qual é o seu nome?"));
18. Adicione a funçã o processMessage .
Esta funçã o é chamada quando o serviço de chat envia uma mensagem. O nome de usuá rio
e os dados sã o passados para esta funçã o.
19. Use jQuery para criar um objeto jQuery com a resposta e insira a mensagem apó s
o elemento < div > conversaçã o .
A funçã o processMessage deve ser semelhante à seguinte.
function processMessage (nome de usuá rio, dados) {
$ ('<b>' + nome de usuá rio + ': </b>' + dados + '<br />')

.insertAfter ($ ('# conversaçã o'));
20. Adicione a funçã o updateUserLi st.
Esta funçã o é chamada quando o serviço de chat envia uma lista de usuá rios atualizada.
21. Adicione o có digo para limpar a lista de usuá rios existente e preencher novamente a
lista.
A funçã o updateUserList deve ser semelhante à seguinte.
function updateUserList (data) {
$ ( '#usuá rios'). empty ();
$ .each (dados, funçã o (chave, valor) {
$ ('# usuá rios'). append ('<div>' + tecla + '</div>');
});
22. Adicione a funçã o sendMessage.
Esta funçã o é chamada para enviar uma mensagem ao serviço de chat. A funçã o
sendMessage deve ser semelhante à seguinte.
function sendMessage () {
var message = $ ('# dados'). val ();
$ ('# dados'). val ('');
socket.emit ('sendchat', mensagem);
$ ('# dados'). focus ();
23. Adicione a funçã o processEnterPress.
Esta funçã o é chamada quando o usuá rio pressiona a tecla Enter. A funçã o
processEnterPress deve ser semelhante à seguinte.
function processEnterPress (e) {
if (e.which == 13) {
$ (este) .blu r ();
$ ('# datasend'). focus (). click ();
24. Revise o có digo.
O arquivo default.js completo é o seguinte.
var socket;
socket = io.connect ('http: // localhost: 8080');
socket.o n ('conectar', adicionarUser);
socket.on ('updatechat', processMessage);
socket.on ('updateusers', updateUserList);
$ ('# datasend'). click (sendMessage);
$ ('# dados'). keypress (processEnterPress);
});
function addUser () {
socket.emit ('adduser', prompt ("Qual é o seu nome?"));
}

function processMessage (nome de usuá rio, dados) {
$ ('<b>' + nome de usuá rio + ': </b>' + dados + '<br />')
.insertAfter ($ ('# conversaçã o'));
function updateUserList (data) {
$ ('# usuá rios') .empty ();
$ .each (dados, funçã o (chave, valor) {
$ ('# usuá rios'). append ('<div>' + tecla + '</div>');
});
function sendMessage () {
var message = $ ('# dados'). val ();
$ ('# dados'). val ('');
socket.emit ('sendchat', mensagem);
$ ('# dados'). focus ();
function pr ocessEnterPress (e) {
if (e.which == 13) {
$ (este) .blur ();
$ ('# datasend'). focus (). click ();

}
25. Para iniciar o chat_service, abra uma janela do prompt de comando. Navegue até a

pasta chat_service. Digite o seguinte comando.
node app.js
26. Abra um navegador.
27. Navegue para http: // localhost: 8080 , onde você deve ver a pá gina de bate-papo.
Você deve obter um prom pt pop-up para o seu nome de usuá rio.
28. Digite um nome e clique em OK.
29. Abra outra janela do navegador e repita a etapa anterior.
Conforme você digita sua mensagem, você deve vê-la exibida em ambas as janelas,
FIGURA 10-5 O cliente de bate-papo em açã o
capítulo.
■■ Exercício 1 Aprenda mais sobre WebSocket escrevendo mais có digo que implementa o
objeto WebSocket diretamente.
■■ Exercício 2 Aprenda mais sobre WebSocket escrevendo um aplicativo de esboço pelo

qual vá rios usuá rios podem desenhar formas em uma superfície de desenho comum.
Exercícios de prá tica sugerida CAPÍTULO 10 435
Respostas
Lição 1
A. Incorreto: O evento onopen é disparado quando a conexã o é aberta.
B. Incorreto: O evento onclose é disparado quando a conexã o é fechada.
C. Correto: O evento onmessage é acionado quando os dados sã o recebidos.
D. Incorreto: O evento onerror é disparado quando um erro é lançado.
A. Incorreto: SignalR nã o funciona com sites Node.js.
B. Correto: A biblioteca Socket.IO funciona com N ode.js para fornecer uma biblioteca
independente do navegador para comunicaçõ es WebSocket.
C. Incorreto: FarmSockets nã o existe.
D. Incorreto: AgnosticSocket nã o existe.
A. Incorreto: Se você esperar até que a conexã o seja fechada, você precisará criar um novo
objeto WebSocket.
B. Correto: Você pode adicionar có digo para enviar mensagens vazias periodicamente.
C. Incorreto: Nã o há propriedade keepAlive no objeto WebSocket.
D. Incorreto: se você criar um novo objeto WebSocket cada vez que enviar uma mensagem,
o servidor pensará que novos navegadores estã o se comunicando com ele.
CAPÍTULO 1 1
HTML5 suporta multimídia
Um dos recursos mais populares do HTML5 é o suporte para multimídia. No passado, você
precisava carregar um plug-in para reproduzir vídeo ou á udio. Provavelmente, o plug-in de
multimídia mais popular é o Flash. Este capítulo examina o suporte HTML5 para
reproduçã o de á udio e vídeo.
■■ Liçã o 1: Reproduzindo o vídeo 437
■■ Liçã o 2: Reproduzindo á udio 443
■■ L i ç ã o 3: Usando o objeto HTMLMediaElement 447
introduçã o do livro .
Lição 1: reproduzindo vídeo
O World Wide Web Consortium (W3C) introduziu o elemento de vídeo com a finalidade de
reproduzir vídeos e filmes. A intençã o era oferecer uma maneira padrã o de reproduzir
vídeo na web sem a necessidade de plug-ins. Esse objetivo foi contornado pela falta de
acordo sobre quais formatos de vídeo deveriam ser suportados nos navegadores da web.
Atualmente, o W3C nã o especifica quais formatos de vídeo os navegadores devem suportar.
Os navegadores podem decidir qual formato desejam suportar, portanto, o desenvolvedor

deve fornecer os formatos disponíveis na maioria dos navegadores.
Descreva os formatos de vídeo comuns disponíveis na Internet.
■
Implemente o elemento < video >.
437
Formatos de vídeo
O W3C está tentando criar um formato de vídeo que possa ser especificado para todos os
navegadores suportarem, no mínimo. Ter pelo menos um formato comum a todos os
navegadores simplificaria o trabalho do desenvolvedor, desde que o formato fornecesse
boa compactaçã o e qualidade e fosse isento de royalties. Existem muitos formatos; a lista a
seguir descreve os formatos mais populares.
■■ Ogg / Theora (extensão .ogv) Em um ponto, o W3C especificou o formato Ogg /

Theora, que parece ser um formato livre de royalties, sem problemas de patente. Entã o o
W3C
retirou o Ogg / Theora das especificaçõ es devido à possibilidade de litígio. Este formato é

compatível com os navegadores Firefox, Chrome e Opera.
■■ WebM / VP8 (extensão .webm) O Google adquiriu o formato WebM / VP8 quando

comprou a On2 Technology. De acordo com funcioná rios do Google, o WebM funciona bem
em dispositivos de energia ainda mais baixa, incluindo netbooks e handhelds. O WebM
estará disponível sob uma licença de có digo aberto Berkeley Software Distribution (BSD)
livre de royalties. O formato de vídeo We bM / VP8 é compatível com os navegadores
Firefox, Chrome, Opera e Android. Além disso, o Internet Explorer 9+ oferecerá suporte a
esse formato quando o codec VP8 for instalado. A versã o atual do codec VP8 está disponível
aqui : https://tools.google
.com / dlpage / webmmf / .
■■ MPEG-4 / H.264 (extensão .mp4) Este formato é uma evoluçã o dos formatos

anteriores com o objetivo de criar um padrã o capaz de fornecer boa qualidade de vídeo
com taxas de bits substancialmente mais baixas do que os padrõ es anteriores. O formato
MPEG-4 / H.264 possui tecnologias patenteadas , mas a MPEG LA, que é uma organizaçã o
privada encarregada de administrar as patentes, anunciou que o vídeo da Internet
codificado em H.264 gratuito para os usuá rios finais nunca será cobrado royalties. MPEG-
4 / H.264 é compatível com os navegadores Internet Explorer , Chrome e Safari, mas o
Chrome anunciou sua intençã o de remover o suporte para MPEG-4 / H.264 em um futuro
pró ximo.
MPEG-4 / H.264 é o formato mais comum para a maioria dos softwares de ediçã o de
vídeo. Ele também oferece o melhor desempenho ao comparar o tamanho do fluxo
de dados com a qualidade da imagem, embora a diferença nã o seja grande o suficiente para
tomar uma decisã o baseada apenas no desempenho. Muitos dispositivos mó veis existentes
têm decodificadores de hardware MPEG-4 / H.264, que fornecem melhor desempenho, e há
muitos desses dispositivos mó veis para serem ignorados. O resultado é que pode levar
muito tempo para que os fabricantes de navegadores e o W3C cheguem a um acordo sobre
um ú nico formato para a web.
Implementando o elemento < video >
O elemento < video > é usado para reproduzir o vídeo. O que se segue é um exemplo de

implementaçã o do
elemento < video >.
<video width = "320" height = "240" controls = "controls">
<source src = "movie.mp4" />
Você precisa de um navegador que suporte HTML5!
</video>
438 CAPÍTULO 11 HTML5 suporta multimídia
Neste exemplo, o tamanho do elemento < video > é definido para 320 pixels por 240
pixels. O atributo de controles fornece controles para iniciar e parar o vídeo, para visualizar
e definir a localizaçã o do cursor do vídeo e para maximizar e restaurar o tamanho do vídeo
na tela. O elemento < video > contém um elemento < source > que descreve a fonte de vídeo
como .mp4. O elemento < video > também contém texto que é exibido em navegadores que
nã o suportam o elemento < video >.
Definir a fonte
O elemento < source > especifica uma fonte de vídeo. No mínimo, você precisa definir o src
a ttribute para a URL do vídeo. Você também deve incluir mais de um elemento < source >
para fornecer muitas fontes para que o navegador possa escolher o codec de vídeo mais
apropriado. No exemplo a seguir, o mesmo filme foi renderizado para cada um dos
três formatos mais populares.
<video controls = "controls" height = "480">
<source src = "eagle.webm" type = 'video / webm; codecs = "vorbis, vp8" '/>
<source src = "eagle.ogv" type = 'video / ogg; codecs = "theora, vorbis" '/>

<source src = "eagle.mp4" type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/>
</video>
Quando o desenvolvedor fornece vá rios formatos, o navegador pode escolher o formato

que pode usar para exibir o vídeo, o que fornece a experiência mais compatível para os
usuá rios. A posiçã o dos elementos < source > é importante porque um navegador começa a
olhar para o topo e para quando encontra um arquivo que pode exibir. A ordem
recomendada é começar com o
Arquivo .webm porque é livre de royalties e de có digo aberto, e está se tornando mais
popular. Em seguida, use o arquivo .ogv porque ele também nã o tem royalties, mas a
qualidade nã o é tã o boa quanto o arquivo .webm.
Finalmente , use o formato .mp4 para navegadores que nã o suportam arquivos .webm
ou .ogv.
O atributo type inclui o tipo MIME e os codecs. Embora o atributo type nã o seja

normalmente necessá rio, o navegador pode usá -lo para ajudar a escolher o arquivo de
vídeo adequado a ser exibido.
A disponibilidade de vá rios arquivos de vídeo exige que o desenvolvedor transcodifique os

vídeos para vá rios formatos. Você pode encontrar utilitá rios da web em sites como
Firefogg.org que transcodificam um vídeo de um formato para outro, conforme mostrado
na Figura 11-1.
Para usar o site Firefogg, você deve estar executando o Firef ox e ter instalado o plug-in
Firefogg. Este site simples produz vídeos transcodificados de boa qualidade.
Se preferir usar um aplicativo que você pode baixar e instalar no seu computador, você
pode gostar do Miro Video Converter. Este é um utilitá rio autô nomo que permite converter
um tipo de arquivo em outro. O Miro Video Converter é mostrado na Figura 11-2.
Liçã o 1: Reproduzindo vídeo CAPÍTULO 11 439

FIGURA 11-1 A tela do Firefogg solicitando o tipo de arquivo .webm ou .ogv FIGURA 11-
2 O conversor de vídeo Miro
Você pode descobrir que o Miro Video Converter produz vídeos de baixa qualidade. Parece
que os arquivos .ogv estã o muito instá veis e o site nã o oferece muitas opçõ es de conversã o.

Configurando o < video > e LEMENTO
O elemento < video > pode ser configurado para fornecer o comportamento de que você

precisa para sua pá gina da web.
A seguir está a lista de atributos que você pode usar para configurar o elemento < video >
para atender à s suas necessidades.
■■ reprodução automática Especifica que o vídeo começa a ser

reproduzido imediatamente.
■■ controles Especifica que o botã o reproduzir / pausar, cursor de vídeo e maximizar

sejam exibidos.
■■ altura Indica a altura em pixels do elemento < vídeo > renderizado .
■■ loop Especifica que o vídeo será repetido quando atingir o final de sua transmissã o.
■■ mudo Especifica que o á udio é silencioso.
■■ pôster Especifica que o URL de uma imagem deve ser mostrado quando o vídeo nã o
está sendo reproduzido.
■■ pré-carregamento Especifica como o vídeo deve ser carregado quando a pá gina é

carregada. Ele pode ser definido como automá tico, metadados ou nenhum. A configuraçã o
automá tica começa a carregar o vídeo quando a pá gina é carregada. A configuraçã o de
metadados carrega apenas os metadados, e a configuraçã o nenhum nã o carrega nada.
■■ src Especifica o URL do vídeo.
■■ largura Indica a largura em pixels do elemento < vídeo > renderizado .
■■ Você deseja que uma imagem seja exibida quando o vídeo não estiver em
execução. Qual propriedade você deve definir para o URL de uma imagem a ser
exibida?
■■ Defina a propriedade do pôster para o URL de uma imagem.
Acessando faixas
O W3C desenvolveu um novo padrã o, denominado WebVTT (Web Video Text Tracks), que
fornece a capacidade de exibir legendas no vídeo; todos os navegadores que implementam
o elemento < track > irã o suportá -lo. O formato de arquivo We bVTT é simples e facilmente
legível por navegadores e desenvolvedores. É baseado em um formato de legenda popular
denominado SubRip Text (SRT). Se você já tem seu conteú do no formato SRT, há
conversores disponíveis na web para converter para o formato WebVTT em.
Um padrã o menos usado denominado Timed Text Markup Language (TTML) é um formato
baseado em XML que é mais detalhado do que WebVTT. TTML está fora do escopo deste
livro.
Liçã o 1: Reproduzindo vídeo CAPÍTULO 11 441
Usando o formato WebVTT
O formato WebVTT é muito simples . O arquivo começa com uma declaraçã o do arquivo
WebVTT, uma linha é ignorada e uma sugestã o é definida. A sugestã o é composta por um
intervalo de tempo na primeira linha e a legenda segue na pró xima linha ou linhas. Depois
disso, um novo separador de linha é fornecido e a pró xima sugestã o é definida. O seguinte é
um arquivo WebVTT.
ARQUIVO WEBVTT
00: 00: 07,500 -> 00: 00: 08,750
Ele está inquieto.
00: 00: 09.000 -> 00: 00: 12.000
Lá vai ele!!!
Você pode incluir comentá rios usando a palavra NOTA seguida por um espaço ou uma nova
linha, conforme mostrado no exemplo a seguir.
ARQUIVO WEBVTT
00: 00: 07,500 -> 00: 00: 08,750
Ele está inquieto.

NOTA Eu acho que o tempo deve ser ajustado para abranger até o final do vídeo 00:
00: 09.000 -> 00: 00: 12.000
Lá vai ele!!!
O formato WebVTT está evoluindo e fornece outros recursos que nã o sã o suportados

atualmente na maioria dos navegadores. Um desses recursos é a capacidade de colocar um
ID em uma sugestã o para que você possa atribuir um formato CSS à sugestã o. Você também
pode adicionar elementos na legenda e fornecer CSS
estilos para os elementos.
Adicionando suporte para WebVTT ao IIS Express
Se você tentar usar arquivos WebVTT em um site hospedado pelo IIS Express, poderá
descobrir que o IIS Express nã o exibirá um arquivo .vtt porque ele atende apenas a tipos de
arquivo conhecidos. Você pode adicionar suporte para arquivos .vtt executando os
seguintes comandos.
cd “C: \ Arquivos de programas \ IIS Express"
appcmd set config / section: staticContent /+[fileExtension='.vtt',mimeType='text/vtt ']
Ao inserir o segundo comando, você receberá uma mensagem informando que

as alteraçõ es foram aplicadas.
Resumo da lição
■■ O elemento < video > é novo em HTML5.
■■ Os formatos de vídeo mais comuns para a web sã o .ogg / Theora, WebM / VP8 e MPEG-4
/ H.264.
■■ Ao implementar o elemento < video >, no mínimo você deve fornecer uma fonte de

vídeo .
■■ É melhor fornecer vá rias fontes de vídeo para ser compatível com a maioria dos
navegadores.
■■ Use o atributo autoplay para começar a jogar imediatamente.
■■ Use o atributo pô ster para especificar uma imagem a ser exibida quando o vídeo nã o for
reproduzido.
■■ Você pode fornecer legendas no formato WebVTT ou TTML.
Revisão da aula
liçã o. Você pode encontrar as respostas a essas perguntas e explicaçõ es de por que
cada escolha de resposta está correta ou incorreta na seçã o “Respostas” no final deste
capítulo.
1. Você deseja incluir um vídeo em sua pá gina da Web que tenha uma extensã o de
arquivo .avi. Se você fornecer as informaçõ es do codec, o que será exibido nos navegadores
que suportam o elemento < video >, mas nã o possuem o codec?
A. O navegador mostrará o elemento < video >, mas nã o reproduzirá o vídeo.
B. O navegador irá automaticamente baixar o codec e reproduzir o vídeo.
C. O navegador exibirá o conteú do do elemento < video >.
D. O navegador irá automaticamente baixar uma versã o do navegador que suporte o codec.
2. Você nã o deseja fornecer um vídeo .ogg porque acha que o formato .ogg é instá vel e de
baixa qualidade. Que outros formatos de vídeo você pode incluir para ser compatível com a
maioria dos navegadores? (Escolha todas as opçõ es aplicá veis)
A. .webm
B. .avi
C. .mpg
D. .mp4
E. .mjpg
3. O W3C padronizou usando qual formato de vídeo?
A. .webm
B. .avi
C. .mpg
D. .mp4
E. Nenhum padrã o foi selecionado.
Lição 2: reproduzindo áudio

O W3C introduziu o elemento < audio > com o propó sito de reproduzir mú sica e
sons. Como a introduçã o do elemento < video >, a intençã o era oferecer uma maneira
padrã o de reproduzir multimídia na web sem a necessidade de plug-ins.
Liçã o 2: Reproduzindo á udio CAPÍTULO 11 443
Muito do conteú do desta liçã o é semelhante ao do elemento < video >; ambos herdam do

HTMLMediaElement. A diferença mais notá vel é que o elemento < video > consome mais
espaço na tela para exibir o vídeo.
■■ Descreva os formatos de á udio comuns disponíveis na Internet.
■■ Implemente o elemento < audio >.
Formatos de áudio
O W3C nã o especifica quais formatos de á udio os navegadores devem suportar, mas a

batalha pelos formatos nã o é tã o competitiva quanto para os formatos de vídeo. O W3C está
tentando decidir sobre um formato de á udio que pode ser especificado para todos os
navegadores suportarem, no mínimo. Existem muitos formatos de á udio, mas os seguintes
sã o os mais comuns.
■■ Ogg / Vorbis (extensão .oga, .ogg) Este formato parece livre de royalties, sem

problemas de patente. É compatível com os navegadores Firefox, Chrome e Opera e possui
um tipo MIME de audio / ogg e um codec de vorbis.
■■ MP3 (extensão .mp3) Este formato é difundido porque é um formato comum para

grande parte da mídia de mú sica. É compatível com os navegadores Safari, Chrome e
Internet Explorer e possui um tipo MIME de á udio / mpeg e um codec de .mp3.
■■ MP4 (extensão .mp4, .mp4a, .aac) Este formato é usado principalmente pela

Apple. Apesar da alta qualidade do codec AAC ou AAC + deste formato , o formato MP3 é
ainda mais prevalente. Este formato é compatível com os navegadores Internet Explorer e
Safari e possui um tipo MIME de á udio / mp4; mp4a.40.5 é o valor do codec.
■■ WAV (extensão .wav) Este formato também é difundido e normalmente é usado para

fragmentos de á udio ou fragmentos, como tons de toque e sons. É compatível com os
navegadores Firefox, Chrome e Opera e possui um tipo MIME de á udio / wav e um codec 1
(o nú mero um).
O elemento < audio >
O elemento < audio > é usado para reproduzir á udio. A seguir está um exemplo de
implementaçã o do
elemento < áudio >.
<controles de á udio = "controles">
<source src = "song.mp3" />
Você precisa de um navegador que suporte HTML5!
</audio>
Neste exemplo, o elemento < audio > é configurado com o atributo controls, que fornece

controles para iniciar e parar o á udio, para visualizar e definir a localizaçã o do cursor de
á udio e para definir o volume. O elemento < audio > contém um elemento < source > que
descreve a fonte de á udio como .mp3. O elemento < audio > também contém texto que é
exibido em navegadores que nã o suportam o elemento < audio >.
Uma característica do á udio é que o desenvolvedor pode reproduzir vá rios arquivos de

á udio ao mesmo tempo. Embora isso seja comum em jogos, a maioria dos navegadores nã o
consegue reproduzir vá rios arquivos de á udio ao mesmo tempo.
Definir a fonte
O elemento < source > especifica uma fonte de á udio. No mínimo, você precisa definir o

atributo src para a URL do á udio. Você também deve incluir mais de
um elemento < source > para fornecer muitas fontes para que o navegador possa escolher o
codec de á udio mais apropriado. No exemplo a seguir , o mesmo som foi reproduzido para
cada um dos três formatos mais populares.
<audio id = "audio" controls = "controls">
<source src = "media / kittycat.oga" type = 'audio / ogg; codecs = "vorbis" '/>
<source src = "media / kittycat.wav" type = 'audio / wav; codecs = "1" '/ >
<source src = "media / kittycat.mp3" type = 'audio / mpeg; codecs = "mp3" '/>
</audio>
Ao fornecer vá rios formatos, o navegador pode escolher o formato que exibe o á udio, o que
fornece a experiência mais compatível aos usuá rios. Conforme mencionado anteriormente,
a posiçã o dos elementos < source > é importante porque um navegador começa a olhar
para o topo e para quando encontra um arquivo que pode exibir. A ordem recomendada é
começar com o arquivo .oga porque ele é livre de royalties, de có digo aberto e está se
tornando mais popular na web. Em seguida, use o arquivo .wav, porque também é bastante
popular. Finalmente, use o .mp3 para navegadores que nã o suportam .oga e
arquivos .wav.
O atributo type inclui o tipo MIME e os codecs. Embora o atributo type nã o seja

normalmente necessá rio, o navegador pode usá -lo para ajudar a escolher o arquivo de
á udio adequado a ser exibido.
Configurando o elemento < audio >
O elemento < audio > pode ser configurado para fornecer o comportamento de que você

precisa para sua pá gina da web.
A seguir está a lista de atributos que você pode usar para configurar o elemento < audio >
para atender à s suas necessidades.
autoplay Especifica que o á udio começa a tocar imediatamente.
controles Especifica que o botã o reproduzir / pausar, cursor de á udio e maximizar sã o

exibidos.
loop Especifica que o á udio se repete quando atinge o final de seu fluxo.
Liçã o 2: Reproduzindo á udio CAPÍTULO 11 445
■■ pré-carregamento Especifica como o á udio deve ser carregado quando a pá gina é

carregada. Pode ser definido como automá tico, metadados ou nenhum. A configuraçã o
automá tica inicia o carregamento do á udio quando a pá gina é carregada. A configuraçã o de
metadados carrega apenas os metadados, e a configuraçã o nenhum nã o carrega nada.
■■ src Especifica o URL do á udio.
■■ Você deseja repetir o áudio continuamente quando ele for concluído. Qual

atributo você deve definir?
■■ Defina o atributo de loop da seguinte maneira.
<á udio loop = 'loop'>
Resumo da lição
■■ O elemento < audio > é novo em HTML5.
■■ Os formatos de á udio mais comuns para a web sã o .ogg / Vorbis, .mp3 e .wav.
■■ Ao implementar o elemento < audio >, no mínimo você deve fornecer uma fonte de

á udio.
■■ É melhor fornecer vá rias fontes de á udio para ser compatível com a maioria dos
navegadores.
■■ Use o atributo autoplay para começar a jogar imediatamente.
Revisão da aula
1. Você deseja fornecer um arquivo de á udio usando um formato compatível com os

navegadores Internet Explorer, Safari e Chrome. Quais formatos de á udio você pode incluir
para ser compatível com a maioria dos navegadores? (Escolha todas as opçõ es aplicá veis)
A. .mp4
B. .wav
C. .mp3
D. .oga
2. Você nã o deseja fornecer um formato .mp3 porque está preocupado com o potencial de
pagar royalties. Que outros formatos de á udio você pode incluir para ser compatível com a
maioria dos navegadores? (Escolha todas as opçõ es aplicá veis)
A. .mp4
B. .wav
C. .h264
D. .oga
Lição 3: usando o objeto HTMLMediaElement
Os elementos < audio > e < video > herdam de um objeto HTMLMediaElement, portanto,

eles herdam as propriedades, métodos e eventos que sã o definidos no objeto
HTMLMediaElement.
■■ Descreva o objeto HTMLMediaElement.
■■ Inscrever-se nos eventos HTMLMediaElement.
■■ Controle de mídia.
Você pode usar os membros do objeto HTMLMediaElement para controlar a reproduçã o de

vídeo e á udio. Você também pode receber notificaçõ es de mudanças de status. A seguir está
uma lista das
métodos do elemento < video >.
■■ addTextTrack () adiciona uma nova trilha de texto ao áudio ou vídeo
■■ canPlayType () Determina se o navegador pode reproduzir o tipo de á udio ou vídeo

especificado
■■ load () Recarrega o á udio ou vídeo
■■ reproduzir () reproduz o á udio ou vídeo
■■ pause () pausa a reproduçã o de á udio ou vídeo

Além dos métodos que permitem controlar a reproduçã o, você pode usar muitas
propriedades para visualizar ou definir o estado do elemento < audio > ou < video >. A
seguir está uma lista de todas as propriedades.
■■ audioTracks Obtém uma referência ao objeto AudioTr ackList que tem as trilhas de

á udio disponíveis
■■ autoplay Define ou obtém o indicador que determina se o á udio ou vídeo deve começar

a ser reproduzido quando for carregado
Liçã o 3: Usando o objeto HTMLMediaElement CAPÍTULO 11 447
■■ buffered Obtém uma referência para o objeto TimeRanges que representa as partes

armazenadas em buffer do á udio ou vídeo
■■ controlador Obtém uma referência ao objeto MediaControl er que representa o

controlador de mídia atual do á udio ou vídeo
■■ controla Define ou obtém o indicador que determina se o á udio ou vídeo deve exibir

controles de reproduçã o para o usuá rio
■■ crossOrigin Define ou obtém as configuraçõ es CORS do á udio ou vídeo
■■ currentSrc Obtém o URL do á udio ou vídeo atual
■■ currentTime Define ou obtém a posiçã o de reproduçã o atual em segundos
■■ defaultMute Define ou obtém o indicador que determina se o á udio ou vídeo está mudo

por padrã o
■■ defaultPlaybackRate Define ou obtém a velocidade padrã o de reproduçã o de á udio ou

vídeo
■■ duração Obtém a duraçã o em segundos do á udio ou vídeo atual
■■ terminado Obtém o indicador que determina se a reproduçã o do á udio ou vídeo

terminou
■■ erro Obtém uma referência a um objeto MediaError que representa o estado de erro do

á udio ou vídeo
■■ loop Define ou obtém um indicador que determina se o á udio ou vídeo deve reiniciar

automaticamente quando chega ao final da transmissã o
■■ mediaGroup Define ou obtém o grupo ao qual o á udio ou vídeo pertence, que é usado
para vincular vá rios elementos de á udio ou vídeo
■■ mudo d Define ou obtém um indicador que determina se o á udio ou vídeo está mudo
■■ networkState Obtém uma referência ao estado atual da rede de á udio ou vídeo
■■ pausado Define ou obtém um indicador que determina se o á udio ou vídeo está

pausado
■■ playbackRate Define ou obtém a velocidade de reproduçã o de á udio ou vídeo
■■ jogado Obtém uma referência a um TimeRanges objeto que representa os papéis

desempenhados do á udio ou vídeo
■ ■ pré-carregamento Define ou obtém um indicador que determina se o á udio ou vídeo

deve ser carregado quando a pá gina é carregada
■■ readyState Obtém um indicador do estado atual de prontidã o do á udio ou vídeo
■■ buscável Obtém uma referência a um objeto TimeRanges que representa as partes

buscá veis do á udio ou vídeo
■■ buscando Obtém um indicador que determina se o usuá rio está procurando no á udio

ou vídeo
■■ src Define ou obtém a fonte atual do á udio ou vídeo
■■ startDate Obtém um objeto Date que representa a diferença de horá rio atual 448

CAPÍTULO 11 HTML5 oferece suporte a multimídia
■■ textTracks Obtém uma referência a um objeto TextTrackList que representa as faixas

de texto disponíveis
■■ videoTracks Obtém uma referência a um objeto VideoTrackList que representa

as trilhas de vídeo disponíveis
■■ volume Define ou obtém o volume do á udio ou vídeo. Inscrevendo-se em eventos

HTMLMediaElement
Além dos métodos e propriedades de HTMLMediaElement, a seguir está uma lista dos
eventos que você pode assinar.
■■ onabort Trigg ers em abort
■■ oncanplay dispara quando um arquivo foi armazenado em buffer o suficiente para

começar a tocar
■■ oncanplaythrough Aciona quando um arquivo pode ser reproduzido até o fim sem
pausar para armazenamento em buffer
■■ mudança de ondulação Dispara quando o comprimento da mídia muda
■■ onemptied Triggers quando ocorre um erro eo arquivo é subitamente indisponível
■■ disparadores contínuos quando a mídia chega ao final do fluxo
■■ onerror Dispara quando ocorre um erro enquanto o arquivo está sendo carregado
■■ onloadeddata Dispara quando os dados de mídia sã o carregados
■■ onloadedmetadata Dispara quando metadados como duraçã o e dimensõ es sã o

carregados
■■ onloadstart Dispara quando o arquivo começa a carregar, mas antes de qualquer coisa

ser realmente carregada
■■ OnPause disparadores quando os meios de comunicaçã o é paus ed
■■ onplay dispara quando a mídia começa a ser reproduzida
■■ a reprodução é acionada quando a mídia realmente começa a ser reproduzida
■■ onprogress dispara quando o navegador está recuperando a mídia
■■ Onratechange Dispara cada vez que a taxa de reproduçã o muda
■■ onreadystatechange Aciona cada vez que o estado de pronto muda
■■ onseeked Triggers para indicar que a busca terminou
■■ gatilhos onseeking para indicar que a busca está ativa
■■ onstalled Triggers quando o navegador é incapaz de recuperar os media
■■ onsuspe nd Dispara quando a recuperaçã o de mídia para antes de ser completamente

carregada
■■ ontimeupdate Dispara quando a posiçã o de jogo muda
■■ onvolumechange Aciona cada vez que o volume ou mudo é alterado
■■ onwaiting Dispara quando a mídia foi pausada, mas espera-se que retome a Liçã o 3:

Usando o objeto HTMLMediaElement CAPÍTULO 11 449

Dado que HTMLMediaElement tem muitos métodos, propriedades e eventos, você pode
fornecer controles personalizados para a mídia ou um meio personalizado para iniciar e
parar a reproduçã o da mídia . A seguir, um pequeno exemplo do uso de métodos,
propriedades e eventos. Considere o seguinte documento HTML.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "default.css" rel = "styles heet" />
</head>
<body>
<video id = "media" height = "480">
<source src = "eagle.webm" type = 'video / webm; codecs = "vorbis, vp8" '/>
<source src = "eagle.ogv" type = 'vide o / ogg; codecs = "theora, vorbis" '/>
<source src = "eagle.mp4" type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/>
<track id = "englishtrack" kind = "subtitles" src = "captions.vtt"
srclang = "en" label = "Inglês" default = "" />
</video>
<br />
<button type = "button" id = "play"> Jogar </button>
</body>
</html>
Este documento contém uma referência à biblioteca jQuery e ao arquivo default.js. Ele

também contém um elemento < video > cujo atributo id é definido como media e o atributo
controls nã o é definido. Existem elementos < source > para os arquivos de
vídeo .webm, .ogv e .mp4 . Um arquivo de legenda está no formato WebVTT. Sob
o elemento < video > está um elemento < button > cujo id está definido para ser
reproduzido.
Como o atributo de controles nã o está definido, o elemento < video > nã o exibe os controles

integrados, como reproduzir / pausar, o indicador de posiçã o e o botã o de tela cheia. À s
vezes, você pode nã o querer permitir que o usuá rio maximize o vídeo, entã o desligar os
controles é apropriado. Nesse caso, você deve fornecer seu pró prio botã o reproduzir /
pausar, conforme mostrado no arquivo default.js a seguir.
/// <r eference path = "jquery-1.8.3.js" />
$ ('# play'). on ('click', playStop);
$ ('# media'). on ('play', function () {$ ('# play'). html ('Pause');}); $ ('# media'). on ('pause',
function () {$ ('# play'). html ('Play');});
});
function pl ayStop () {
var media = $ ('# media') [0];
if (media.paused) {
media.play ();
outro {
media.pause ();
No arquivo default.js, o método de documento pronto é adicionado com o có digo para

assinar os eventos. O evento click no botã o play executa a funçã o playStop. A funçã o
playStop obtém uma referência ao elemento de mídia e usa a propriedade paused para
determinar se deve reproduzir ou pausar o vídeo executando o método play ou pause.
Quando o botã o de reproduçã o é pressionado, o texto no botã o de reproduçã o muda de
Reproduçã o para Pausa porque o evento de reproduçã o é acionado no elemento de
mídia. Quando o botã o de reproduçã o é pressionado novamente, o texto do botã o de
reproduçã o muda de Pausa para Reproduçã o porque o evento de pausa é disparado em
vermelho no botã o de reproduçã o. Isso é feito assinando os eventos de reproduçã o e pausa
na funçã o de documento pronto.
Resumo da lição
■■ Os elementos < video > e < audio > sã o herdados do objeto HTMLMediaElement.
■■ Use o método play () para iniciar a reproduçã o da mídia e o método pause () para
pausar a mídia reproduzida.
■■ A propriedade paused pode ser usada para determinar se a mídia está sendo
reproduzida.
■■ Os eventos onplay e onpause podem ser inscritos e fornecer notificaçõ es quando a

mídia é reproduzida ou pausada.
Revisão da aula
1. Os elementos < video > e < audio > herdam de qual objeto?
A. HTMLMediaElement
B. MediaElement
C. MultiMediaElement
D. o objeto Multimídia
2. Se você quiser que sua mídia se repita continuamente, qual propriedade você definiria
como true?
A. pré-carga
B. readyState
C. procurá vel
D. loop
3. Você deseja acionar algum có digo quando a mídia for carregada. Em qual evento você
deve se inscrever?
A. instalado
B. onseeked
Le sson 3: Usando o objeto HTMLMediaElement CAPÍTULO 11 451
C. onplay
D. onloadeddata
Pratica exercícios

Exercício 1: Crie uma página da web que exiba vídeo
Neste exercício, você aplica seu conhecimento do elemento < video > criando um aplicativo

da web que exibe vídeo.
Na Contoso Ltd., você foi solicitado a criar um protó tipo de pá gina da Web que exibe vídeo
usando o elemento < video >. A pá gina da web precisa exibir vídeo para os navegadores
Firefox, Internet Explorer e Chrome, no mínimo, mas você deseja alcançar o maior nú mero
possível de navegadores.
Você sabe que precisa converter seu arquivo .mp4 em outros formatos, mas também deseja
identificar o tipo de arquivo que o navegador usou para determinar os tipos de arquivo que
fornecem a maior cobertura do navegador.
1. Inicie o Visual Studio Express 2012 for Web. Crie um projeto ASP.NET Empty Web
Application e denomine-o MultimediaPrototype .
2. Adicione uma nova pasta, Media , ao projeto.
3. Adicione os arquivos de vídeo Eagle. Clique com o botã o direito na pasta Mídia, escolha
Adicionar e selecione Item Existente. Localize a pasta Resource e selecione os três arquivos
de vídeo Eagle.
4. Adicione um arquivo HT ML ao projeto. Nomeie-o como VideoPage.html .
5. Adicione um arquivo CSS ao projeto. Nomeie-o como default.css .

6. Adicione uma nova pasta, Scripts , ao projeto.
7. Clique com o botã o direito na pasta Scripts e adicione um novo arquivo JavaScript
default.js.
8. Adicione uma referência à biblioteca jQuery clicando com o botã o direito do mouse no nó
do projeto; escolha Gerenciar Pacotes NuGet. Clique em Online e digite jQuery nos critérios
de pesquisa. Quando a biblioteca jQuery for exibida, clique no botã o Instalar.
9. No arquivo VideoPage.html, adicione uma referência aos arquivos default.css, biblioteca

jQuery e default.js.
10. Dê um título à sua pá gina de Protótipo de Vídeo .
Sua pá gina HTML deve ter a seguinte aparência.
<! DOCTYPE html>
<head>
<title> Protó tipo de vídeo </title>
<link href = "default.css" rel = "stylesheet" /> 452 CAPÍTULO 11 HTML5 suporta

multimídia
</head>
<body>
</body>
</html>
11. No elemento < body >, adicione um elemento < div > cujo id é container.
12. No contêiner, adicione um elemento < video > cujo id é mídia. Adicione o atributo de

controles para exibir os controles bá sicos de vídeo. Apó s o elemento < video >, adicione
uma pausa e, em seguida, adicione um elemento < span > cujo id é mensagem.
Seu contêiner deve ter a seguinte aparência.

<video id = "media" controls = "controls">
</video>
<br />
<span id = 'message'> </span>
</div>
13. No elemento < video >, adicione fontes para cada um dos arquivos de

vídeo Ea gle. Certifique-se de que o primeiro arquivo de vídeo seja o arquivo .webm,
seguido pelo arquivo .ogv, seguido pelo arquivo .mp4.
14. Depois que os elementos < source > forem adicionados, adicione uma mensagem

informando que o usuá rio precisa de um navegador HTML5.
Seu elemento < video > deve ser parecido com o seguinte.
<video id = "media" controls = "controls">
<source src = "media / eagle.webm" type = 'video / webm; codecs = "vorbis, vp8" '/>
<source src = "media / eagle.ogv" type = 'video / ogg; codecs = "theora, vorbis" '/>
<source src = "media / eagle.mp4" type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2"

'
/>
Você precisa de um navegador compatível com HTML5.
</video>
15. No arquivo default.css, defina a cor de fundo do elemento < body > para um amarelo

muito claro.
16. Adicione uma regra de estilo para o container. Este estilo deve definir a cor de fundo
para azul claro, definir a borda para ranhurar, definir a largura para 900 pixels e definir a
altura para 600
píxeis. Defina as margens esquerda e direita como automá ticas. Defina o alinhamento de

texto para o centro e defina o preenchimento para 20 pixels.
O arquivo default.css completo deve se parecer com o seguinte.
corpo {
cor de fundo: #FFFFCC;
#container {
cor de fundo: # 99CCFF;
estilo de borda: sulco;
largura: 900px;
altura: 600px;
17. Para saber qual fonte foi selecionada pelo navegador ( embora isso fique aparente
quando você reproduzir o vídeo), adicione o có digo ao arquivo default.js para exibir a fonte
atual quando o vídeo for reproduzido.
$ ('# mídia'). on ('reproduzir', funçã o () {
$ ('# mensagem'). html ($ ('# media') [0] .currentSrc);
});
});
18. No Solution Explorer, clique com o botã o direito do mouse no arquivo VideoPage.html e
escolha Definir como pá gina inicial .
19. Teste seu trabalho executando o site pressionando F5.
Você deve ver a pá gina VideoPage.html conforme mostrado na Figura 11-3.
FIGURA 11-3 A pá gina de vídeo em execuçã o

capítulo.
■■ Exercício 1 Aprenda mais sobre vídeo e á udio criando um aplicativo da web que
oferece a capacidade de reproduzir a partir de uma lista de arquivos.
■■ Exercício 2 Aprenda mais sobre vídeo e á udio escrevendo um aplicativo da web que
usa muitas das propriedades, métodos e eventos dos elementos < video > e < audio >.
Respostas
Lição 1
A. Correto: O navegador deve oferecer suporte ao codec especificado, mas nã o tenta fazer
o download do codec especificado automaticamente .
B. Incorreto: O navegador nã o tenta baixar codecs automaticamente.
C. Incorreto: O navegador só exibe o conteú do do elemento < video > se o navegador nã o

suportar o elemento < video >.
D. Incorreto: O navegador nã o tenta baixar um navegador compatível.
2. Respostas corretas: A e D
A. Correto: o formato .webm está se tornando popular nos navegadores mais recentes.
B. Incorreto: o formato .avi nã o é compatível com a maioria dos navegadores.
C. Incorreto: o formato .mpg nã o é compatível com a maioria dos navegadores.
D. Correto: O formato .mp4 é compatível com Safari e Internet Explorer.
E. Incorreto: o formato .mjpg nã o é compatível com a maioria dos navegadores.
3. Resposta correta: E
A. Incorreto: o formato .we bm está se tornando popular, mas nã o foi selecionado como

padrã o.
B. Incorreto: o formato .avi nã o é compatível com a maioria dos navegadores.
C. Incorreto: o formato .mpg nã o é compatível com a maioria dos navegadores.

D. Incorreto: o formato .mp4 é compatível com Safari e Internet Explorer, mas nã o foi
selecionado como padrã o.
E. Correto: O W3C nã o selecionou um formato padrã o.
Lição 2
A. Incorreto: .O formato .mp4 nã o é compatível com o Chrome.
B. Incorreto: o formato .wav nã o é compatível com o Internet Explorer.
C. Correto: O formato .mp3 é compatível com Internet Explorer, Safari e Chrome.
D. Incorreto: o formato .oga nã o é compatível com o Internet Explorer.
2. Corrija uma resposta: A, B e D
A. Correto: o formato .mp4 está se tornando popular nos navegadores mais recentes.
B. Correto: O formato .wav é compatível com a maioria dos navegadores.
C. Incorreto: o formato .h264 é um formato de vídeo.
D. Correto: O formato .oga é compatível com a maioria dos navegadores.
Lição 3
A. Correto: Os elementos < video > e < audio > herdam do objeto HTMLMediaElement.
B. Incorreto: O objeto MediaElement nã o existe.
C. Incorreto: O objeto MultiMediaElement nã o existe.
D. Incor reto: O objeto Multimídia nã o existe.
A. Incorreto: A propriedade preload é usada para indicar se você deseja pré-carregar os

dados.
B. Incorreto: a propriedade readyState é usada para identificar o estado atual da mídia.

C. Incorreto: a propriedade buscá vel é usada para indicar se a mídia pode ser procurada.
D. Correto: A propriedade loop é usada para indicar que você deseja repetir a mídia
continuamente quando ela atinge o final do fluxo.
A. Incorreto: o evento onstalado dispara quando o navegador nã o consegue recuperar a

mídia.
B. Incorreto: O evento onseeked dispara quando a busca termina, apó s você realizar
uma operaçã o de busca .
C. Incorreto: O evento onplay dispara quando a mídia começa a ser reproduzida.
D. Correto: O evento onloadeddata dispara quando a mídia é carregada.
Respostas CAPÍTULO 11 457
CAPÍTULO 1 2
Desenho com HTML5
No passado, o método mais comum de desenhar em uma pá gina da Web era usando Adobe
Flash. Como a busca para criar navegadores que nã o requerem plug-ins para exibir
multimídia continua, uma grande lacuna na funcionalidade foi preenchida com a
capacidade de desenhar em HTML5 usando o elemento < canvas > e para criar e exibir
Vetor Escalá vel Grá ficos (SVG) usando o elemento < svg >.
Embora o Adobe Flash ainda forneça mais funcionalidade do que o elemento < canvas >,

você pode descobrir que o elemento < canvas > é tudo o que você precisa e que nã o é
necessá rio adicionar um produto de terceiros ao seu aplicativo.
SVG é uma linguagem para definir grá ficos bidimensionais em XML, e o XML pode ser
renderizado pelo navegador usando o elemento < svg >. Embora você possa aprender SVG e
escrever grá ficos SVG, provavelmente usará um editor de imagens para criar imagens SVG e
depois usá -las em seu aplicativo da web. O benefício é que as imagens sã o escaloná veis.
Este capítulo apresenta o elemento < canvas > e demonstra o desenho na tela.
No entanto, este nã o é um tutorial totalmente abrangente sobre este elemento ; seu poder

poderia facilmente preencher seu pró prio livro. O capítulo entã o apresenta
o elemento < svg > de uma perspectiva de implementaçã o ao invés de uma perspectiva de
desenho.

■■ Liçã o 1: Desenho usando o elemento < canvas > 4 60
■■ Liçã o 2: Usando grá ficos vetoriais escalá veis 495
Introduçã o do livro .
459
Lição 1: Desenhando usando o elemento < canvas > Os ú nicos atributos significativos

que o elemento < canvas > possui sã o os atributos de altura e largura. O conteú do que você
coloca no elemento < canvas > é exibido se o navegador nã o suporta o elemento canvas. A
seguir, um exemplo de implementaçã o simples desse elemento, informando ao usuá rio que
é necessá rio um navegador compatível com HTML5. Este conteú do é exibido apenas se o
navegador nã o suportar o elemento < canvas >.
<canva s id = "myCanvas" width = "800" height = "600"> Você precisa de um navegador que
suporte HTML5!
</canvas>
Para os exemplos subsequentes, o estilo a seguir é aplicado ao elemento < canvas > porque

ele é invisível por padrã o.
tela de pintura {
borda: 1px totalmente preto;
■■ Descreva o elemento < canvas >.
■■ Configure o estado do desenho.
■■ Desenhe com caminhos.
■■ Desenhe texto e imagens.

A referência do elemento < canvas >
O elemento < canvas > expõ e uma abundâ ncia de funcionalidade por meio de seu contexto
de tela, que pode ser acessado usando JavaScript. Este elemento fornece os seguintes
membros.
■■ height Propriedade que define ou obtém a altura da tela
■■ width Propriedade que define ou obtém a largura da tela
■■ método getContext () que aceita um parâ metro de 2d e retorna um objeto

CanvasRenderingContext2D que representa o contexto da tela
■■ toDataUrl () Método que cria um URL que pode ser usado com um elemento que requer
um URL de imagem n, como a referência do objeto de contexto
do elemento < img > CanvasRenderingContext2D
O elemento < canvas > é simplesmente um contêiner grá fico; o objeto de contexto que é

retornado do método getContext é usado para desenhar na tela. A seguir está uma lista dos
membros do objeto de contexto. Muitos desses métodos e propriedades sã o usados nesta
liçã o.
460 CAPÍTULO 12 Desenho com HTML5
■■ Método addColorStop () para definir as cores e posiçõ es de parada em um objeto

gradiente
■■ arco () método para criar um arco / cur ve
■■ Método arcTo () para criar um arco / curva entre duas tangentes
■■ método beginPath () para iniciar um caminho ou redefinir o caminho atual
■■ Método bezierCurveTo () para criar uma curva de Bézier cú bica
■■ Método clearRect () para limpar um determinado retâ ngulo
■■ clip () Método para limpar uma regiã o de qualquer forma e tamanho da tela original
■■ Método closePath () para criar um caminho do ponto atual de volta ao ponto inicial
■■ Método createImageData () para criar um novo objeto ImageData em branco
■■ Método createLinearGradient () para criar um gradiente linear
■■ método createPattern () para repetir um elemento especificado em uma direçã o

especificada
■■ Método createRadialGradient () para criar um gradiente radial / circular
data Propriedade que obtém um objeto ImageData que contém os dados da imagem
drawImage () Método para desenhar uma imagem, tela ou vídeo na tela
fill () Método para preencher o caminho do desenho
fillRect () Método para desenhar um retâ ngulo preenchido
fillStyle Propriedade que define ou obtém a cor, gradiente ou padrã o usado para preencher
o sorteio ing
■■ Método fillText () para desenhar texto arquivado na tela
■■ propriedade da fonte que define ou obtém as propriedades da fonte para o conteú do do

texto
■■ Método getImageData () para obter um objeto ImageData que copia os dados de pixel

para o retâ ngulo especificado em uma tela
■■ glo balAlpha Propriedade que define ou obtém o valor alfa ou de transparência atual

do desenho
■■ propriedade globalCompositeOperation que define ou obtém como uma nova imagem

é desenhada em uma imagem existente
■■ método isPointInPath () que retorna verdadeiro se o ponto especificado estiver no
caminho atual
■■ propriedade lineCap que define ou obtém o estilo das extremidades de uma linha
■■ propriedade lineJoin que define ou obtém o tipo de canto a ser criado quando duas

linhas se encontram
■■ método lineTo () que adiciona um novo ponto e cria uma linha a partir desse ponto até
o ú ltimo ponto especificado na tela
■■ propriedade lineWidth que define ou obtém a largura da linha atual
■■ measureText () Método que obtém um objeto que contém a largura do texto

especificado
■■ miterLimit Propriedade que define ou obtém o comprimento má ximo de um mitre

Liçã o 1: Desenho usando o elemento < canvas > CAPÍTULO 12 461
■■ moveTo () Método que move o caminho para o ponto especificado na tela sem criar
uma linha
■■ método putImageData () que coloca os dados da imagem de um objeto ImageData

especificado de volta na tela
■■ quadraticCurveTo () Método que cria um quadrá tica Bezier c urve
■■ método rect () que cria um retâ ngulo
■■ método restore () que retira da pilha o estado de contexto salvo anteriormente
■■ rotate () Método que gira o desenho atual
■■ método save () que envia o estado do contexto atual para uma pilha
■■ scale () Método que dimensiona o desenho atual para maior ou menor

■■ método setTransform () que redefine a transformaçã o atual para a matriz de
identidade e, em seguida, chama o método transform ()
■■ propriedade shadowBlur que define ou obtém a configuraçã o do nível de desfoque

para usar nas sombras
■■ propriedade shadowColor que define ou obtém a configuraçã o de cor a ser usada para

sombras
■■ shadowOffsetX Propriedade que define ou obtém a configuraçã o de distâ ncia

horizontal da sombra da forma
■■ shadowOffsetY Propriedade que define ou obtém a configuraçã o de

distâ ncia vertical da sombra a partir da forma
■■ método stroke () para desenhar o caminho que você definiu
■■ método strokeRect () para desenhar um retâ ngulo sem fil
■■ strokeStyle Propriedade que define ou obtém a cor, gradiente ou padrã o usado para

traços
■■ strokeText () Método que desenha texto na tela sem fil
■■ propriedade textAlign que define ou obtém a configuraçã o de alinhamento para o

conteú do do texto
■■ propriedade textBaseline que define ou obtém a configuraçã o da linha de base do texto

usada ao desenhar o texto
■■ transform () Método que substitui a configuraçã o da matriz de transformaçã o para o

desenho
■■ translate () Método que remapeia a posiçã o (0, 0) na tela Implementando a tela
Ao trabalhar com o objeto da tela, você deve obter uma referência ao contexto da tela. Isso
pode ser feito usando o método getContext, que aceita um parâ metro. Atualmente, o ú nico
valor para o parâ metro é 2d ao usar o Internet Explorer, mas o Firefox e o Chrome
oferecem suporte a um parâ metro experimental-webgl, que oferece suporte a desenho
tridimensional.
Espere ver essa tecnologia evoluir com o tempo.
Esta liçã o se concentra no parâ metro 2d mais maduro, que retorna um objeto
CanvasRenderingContext2D. Este objeto será referido como o objeto de contexto . O
exemplo a seguir demonstra a criaçã o do objeto de contexto.
Chave
Termos
desenhe algo();
});
function drawSomething () {
var canvas = document.getElementById ('myCanvas');
var ctx = canvas.getContext ('2d');
ctx.fillRect (10, 50, 100, 200);
Neste exemplo, canvas é uma referência ao elemento < canvas > cujo id é myCanvas. Depois

disso, ctx é definido para fazer referência ao objeto conte xt, com o qual você pode começar
a desenhar. As coordenadas da superfície de desenho sã o representadas como x, y, onde 0,
0 é o canto superior esquerdo da tela.
■■ Qual é o parâmetro adequado para passar para o método getContext na tela para

criar desenhos bidimensionais?
■■ 2d
Desenhar retângulos
Os métodos de criaçã o de retâ ngulos aceitam quatro parâ metros. Os primeiros dois
parâ metros sã o as localizaçõ es xey do canto superior esquerdo do retâ ngulo. Os dois
ú ltimos parâ metros representam a largura e a altura do retâ ngulo. Você pode criar
retâ ngulos usando um dos métodos a seguir.
■■ clearRect (x, y, w, h) Limpa a á rea retangular especificada.
■■ fillRect (x, y, w, h) Desenha uma á rea retangular preenchida.
■■ strokeRect (x, y, w, h) Desenha uma á rea retangular nã o preenchida.
O exemplo de có digo a seguir demonstra o uso desses métodos para criar retâ ngulos.
desenhe algo();
});
function drawSomething () {
var canvas = document.getElementById ('myCan vas')
, ctx = canvas.getContext ('2d')
, deslocamento = 15
, clearOffset = 30
, pushDownOffset = 10
, altura = 50
, largura = 100
, contagem = 4

, i = 0;
para (i = 0; i <contagem; i ++) {
ctx.fillRect (i * (deslocamento + largura) + deslocamento, deslocamento, largura,

altura); ctx.clearRect (i * (deslocamento + largura) + (clearOffset / 2) +
deslocamento, deslocamento + (clearOffset / 2) + pushDownOffset,
largura - clearOffset, altura - clearOffset)
ctx.strokeRect (i * (deslocamento + largura) + deslocamento,
(2 * deslocamento) + altura, largura, altura);
Neste exemplo, o método fil Rect é usado para criar quatro retâ ngulos arquivados. Cada um
dos retâ ngulos é espaçado horizontalmente y pelo valor de deslocamento. Em seguida,
o método cle arRect é usado para limpar uma á rea retangular que está dentro da á rea de
preenchimento criada pelo método fil Rect. Finalmente, o método strokeRect é usado para
criar uma segunda linha de retâ ngulos, mas esses retâ ngulos nã o sã o preenchidos. O
resultado é mostrado na Figura 12-1.
FIGURA 12-1 Desenhando retâ ngulos na tela
Você pode ver que o desenho na tela realmente requer conhecimento de JavaScript e do
objeto de contexto da tela.
No exemplo anterior, qual é a cor de preenchimento ao chamar fil Rect? Qual é a espessura

e a cor da linha ao chamar strokeRect? O contexto da tela tem propriedades que você pode
definir antes de chamar qualquer um dos métodos de desenho. Depois de alterar uma
propriedade, o novo valor e é usado para declaraçõ es de saque subsequentes.
Configurando estilo de fil
Use a propriedade fil Style para especificar como você deseja preencher as formas. Você
pode definir o estilo do arquivo para um dos seguintes valores.
■■ Cor CSS Cria um preenchimento de cor só lida com base em um valor de cor CSS vá lido ,
como preto, vermelho ou # 00FF00. A seguir está um exemplo de configuraçã o do Estilo do
arquivo usando um valor de cor CSS .
function drawUsingCssColor () {
var canvas = document.getElementById ('myCanvas')
, deslocamento = 10
, tamanho = 50;
ctx.fillStyle = "vermelho";
ctx.fillRect (deslocamento + (0 * (deslocamento + tamanho)), deslocamento, tamanho,

tamanho); ctx.fillRect (deslocamento + (1 * (deslocamento + tamanho)), deslocamento,
tamanho, tamanho); ctx.fillStyle = "# 00FF00";
tamanho); ctx.fillRect (deslocamento + (3 * ( deslocamento + tamanho)), deslocamento,
tamanho, tamanho); ctx.fillStyle = "rgba (0, 0, 255, 0,25)";

tamanho); ctx.fillRect (deslocamento + (5 * (deslocamento + tamanho)), deslocamento,
tamanho, tamanho);
Neste exemplo, fil Style é definido como “r ed” e dois retâ ngulos sã o criados. Em seguida, fil
Style é definido como verde, usando “# 00FF00”, e dois retâ ngulos sã o criados. Finalmente,
fil Style é definido como azul com opacidade de 25 por cento, usando “rgba (0,0,255,0.25)”,
e dois retâ ngulos sã o criados. Os resultados sã o mostrados na Figura 12-2.
FIGURA 12-2 Os retâ ngulos renderizados, usando valores de cor CSS
■■ Gradiente Um objeto CanvasGradient que é criado pelo método createLinearGradient

ou createRadial Gradient do contexto para criar um arquivo de gradiente.
O método createLinearGradient aceita os valores xey de dois pontos que sã o usados para
criar um gradiente linear, por exemplo, createLinearGradient (x0, y0, x1, y1).
O createRadialGradient aceita o centro xey e o raio de dois círculos, por exemplo,

createRadialGradient (x0, y0, r0, x1, y1, r1).
Depois que o objeto de gradiente é criado, chame seu método addColorStop para
especificar que uma cor é definida em um local no gradiente. A funçã o addColorStop
usa dois parâ metros; o primeiro parâ metro é o local, que é um valor entre 0 e 1, em que 0 é
o início do gradiente e 1 é o final do gradiente, e o segundo parâ metro é o valor da cor.
A seguir está um exemplo de configuraçã o de estilo de fil, usando um valor de gradiente.
function drawGradient () {
, x0 = 0
, y0 = 0
, r0 = 0
, x1 = 200
, y1 = 0
, r1 = 100
, largura = 300
, altura = 50
, deslocamento = 10;
gradiente = ctx.createLinearGradient (x0, y0, x1, y1);
addColorStops (gradiente);
ctx.fillStyle = gradiente;
ctx.fillRect (10, 0 * (altura + deslocamento), largura, altura);

y1 = 300;
ctx.fillRect (10, 2 * ( altura + deslocamento), largura, altura);
x0 = x1 = largura / 2;
y0 = y1 = 4 * (altura + deslocamento) + (altura / 2);
gradiente = ctx.createRadialGradient (x0, y0, r0, x1, y1, r1);
ctx .fillStyle = gradiente;
y0 = 5 * (altura + deslocamento) + (altura / 2);
y1 = y0 + 100;
}

function addColorStops (gradiente) {
gradiente.addColorStop (“0", “magenta");
gradiente.addColorStop (“. 25", “azul");
gradiente.addColorStop (“. 50", “verde");
gradiente.addColorStop (“. 75", “amarelo");
gradiente.addColorStop (“1.0", “vermelho");
Quando esse có digo de exemplo é executado, ele produz o resultado mostrado na Figura

12-3.

FIGURA 12-3 Criando e atribuindo gradientes à propriedade fil Style Este có digo de
exemplo exibe dois retâ ngulos para cada teste, em que o segundo retâ ngulo é deslocado do
primeiro retâ ngulo, para que você possa ver como o gradiente é renderizado em relaçã o à
tela, nã o para o retâ ngulo.
O primeiro par de retâ ngulos demonstra um gradiente linear horizontal quando y0 e y1
sã o iguais.
O segundo par de retâ ngulos mostra o que acontece quando y1 é diferente de y0. Neste
exemplo, se você desenhar uma linha de x0, y0 a x1, y1, a linha será inclinada para baixo. O
gradiente é renderizado ao longo desta linha e exibido como um gradiente linear diagonal.
O terceiro par de retâ ngulos il ustra o gradiente radial quando x0 = x1 ey0 = y1, mas r0 é
definido como zero quando r1 é definido como 100. Como os dois pontos sã o iguais, o
gradiente radial é circular. Como r0 é zero, o gradiente começa no centro. O gradiente
termina em r1, que é definido como 100.
O ú ltimo par de retâ ngulos mostra o que acontece quando os dois pontos nã o sã o iguais.
Nesse caso , x0 e x1 sã o iguais, mas y0 e y1 sã o diferentes, o que produz um gradiente nã o

circular.
■■ Padrão Um objeto CanvasPattern que é criado usando o método createPattern do

contexto e cria um arquivo de padrã o. O método createPattern usa um parâ metro de
imagem e um parâ metro de direçã o. A imagem é uma referência a um elemento < img > e a
direçã o é uma string contendo no-repeat, repeat-x, repeat-y ou repeat.
A Figura 12-4 mostra uma pequena imagem com um retâ ngulo e um círculo. Esta imagem
tem um fundo transparente e nã o há borda ao redor da imagem.
FIGURA 12-4 Imagem usada para criar um padrã o de repetiçã o
Usando a imagem da Figura 12-4, o có digo a seguir cria um padrã o que é atribuído
à propriedade fil Style.
function drawPattern () {

, ctx = canvas.getContext ('2d');
// cria um novo objeto de imagem para usar como padrã o
var img = nova imagem ();
img.src = 'images / pattern.gif';
img.onload = function () {
// criar padrã o
var ptrn = ctx.createPattern (img, 'repetir');
ctx.fillStyle = ptrn;
ctx.fillRect (0, 0, 400, 400);
Neste exemplo, em vez de criar um elemento < img >, a imagem é criada dinamicamente e

sua origem (src) é definida para o arquivo pattern.gif. Em seguida, o evento onload da
imagem é inscrito para criar o padrã o na tela apó s o arquivo pattern.gif ser carregado. O
resultado é mostrado na Figura 12-5.
Liçã o 1: Desenhar usando o elemento < canvas > CAPÍTULO 12 469

FIGURA 12-5 O padrã o repetido dentro da á rea retangular Definindo lineWidth
A propriedade lineWidth especifica a espessura de qualquer linha desenhada. O exemplo de

có digo a seguir desenha retâ ngulos usando configuraçõ es de largura de linha diferentes.
function drawLineWidth () {
, deslocamento = 40
, largura = 5
, altura = 5
, lineWidth = 1
,i=0
, centerX = canvas.width / 2
, centerY = canvas.height / 2;
para (i = 1; i <15; i ++) {
ctx.lineWidth = i;
ctx.strokeRect (centerX - (largura / 2) - (i * deslocamento / 2),
centerY - (altura / 2) - (i * deslocamento / 2),
largura + (i * deslocamento), altura + (i * deslocamento));
Neste exemplo, lineWidth é alterado em cada iteraçã o do loop for; o retâ ngulo desenhado
começa pequeno e fica maior a cada iteraçã o. O resultado é mostrado na Figura 12-6.

FIGURA 12-6 A lineWidth, aumentada em cada iteraçã o do loop for Setting lineJoin
A propriedade lineJoin especifica a maneira como as linhas que se unem sã o

desenhadas. Você pode definir a propriedade lineJoin como round, bevel ou miter. O valor
padrã o é mitre. A diferença entre essas configuraçõ es é mais perceptível com linhas mais
grossas.
O có digo a seguir demonstra a criaçã o de três retâ ngulos com diferentes configuraçõ es de
lineJoin.
function drawLine Join () {
ctx.lineWidth = 20;
ctx.lineJoin = 'redondo';
ctx.strokeRect (20, 20, 50, 50);
ctx.lineJoin = 'bisel';
ctx.strokeRect (100, 100, 50, 50);
ctx.lineJoin = 'm iter';
ctx.strokeRect (180, 180, 50, 50);
Neste exemplo, a propriedade lineJoin do primeiro retâ ngulo é definida como

arredondada. Isso produz um retâ ngulo com cantos arredondados. Propriedade lineJoin do
segundo retâ ngulo é definido para bisel, que Liçã o 1: Desenho de usin g do < canvas >
elemento CAPÍTULO 12 471
produz um retâ ngulo com cantos chanfrados. Finalmente, a propriedade lineJoin do
terceiro retâ ngulo é definida como mitre, o que produz um retâ ngulo com cantos mitre ou
pontiagudos. O resultado é mostrado na Figura 12-7.
FIGURA 12-7 A propriedade lineJoin especificando a aparência dos cantos Configurando

strokeStyle
A propriedade strokeStyle especifica a maneira como você deseja desenhar linhas. Esta

configuraçã o é igual à propriedade fil Style descrita anteriormente. Consulte a seçã o
“Configurando o estilo do arquivo” para obter mais informaçõ es sobre as configuraçõ es
vá lidas. A seguir está um exemplo da propriedade strokeStyle.
function drawGradientStroke () {
, x0 = 0
, y0 = 0
, r0 = 0
, x1 = 200
, y1 = 0
, r1 = 100
, largura = 300
, altura = 40
, deslocamento = 25;
ctx.lineWidth = 15;
ctx.strokeStyle = gradiente;
ctx.strokeRect (10, 0 * (altura + deslocamento), largura, altura);
y1 = 300;
ctx.strokeSty le = gradiente;
x0 = x1 = largura / 2;
y0 = y1 = 4 * (altura + deslocamento) + (altura / 2);

y0 = 5 * (altura + deslocamento) + (altura / 2);
y1 = y0 + 100;
ctx.strokeRect (100, 7 * (altura + fora do conjunto), largura, altura);
Este exemplo é uma versã o modificada da funçã o drawGradient apresentada como um

exemplo da propriedade fil Style. A funçã o addColorStops também é definida nesse
exemplo.
O resultado é mostrado na Figura 12-8.

FIGURA 12-8 A propriedade strokeStyle, que aceita os mesmos valores de fil Style Saving e
restaurando o estado do desenho
É possível salvar todas as propriedades do objeto de contexto em uma pilha, que é uma
coleçã o ú ltimo a entrar, primeiro a sair (LIFO). Isso nã o salva a tela real; apenas as
configuraçõ es sã o salvas. O método de salvamento salva as configuraçõ es atuais e o método
de restauraçã o restaura as configuraçõ es. O exemplo a seguir mostra os métodos de salvar
e restaurar.
function saveRestore () {
ctx.lineWidth = 20;
ctx.strokeStyle = “verde";
ctx.lineJoin = 'redondo';
ctx.strokeRect (20, 20, 50, 50);

ctx.save ();
ctx.lineWidth = 10;
ctx.strokeStyle = “vermelho";
ctx.lineJoin = 'bisel';
ctx.strokeRect (100, 100, 50, 50);
ctx.restore ();
ctx.strokeRect (180, 180, 50, 50);

Neste exemplo, as propriedades lineWidth, strokeStyle e l ineJoin sã o definidas e um
retâ ngulo é desenhado. O método de salvamento é chamado para salvar as
configuraçõ es. As configuraçõ es sã o modificadas e um novo retâ ngulo é desenhado com as
novas configuraçõ es. Por fim, o método de restauraçã o é chamado, que abre (obtém e
remove) as configuraçõ es da pilha e um retâ ngulo é desenhado. Este retâ ngulo tem as
mesmas configuraçõ es de propriedade do primeiro retâ ngulo. O resultado é mostrado na
Figura 12-9.
FIGURA 12-9 Mostrando como as configuraçõ es podem ser salvas e restauradas Você pode
salvar muitas vezes para criar como conjunto de configuraçõ es e, em seguida, restaurar
vá rias vezes para esvaziar a pilha.
Um caminho é um conjunto de linhas usadas para desenhar formas. Cada linha é cal ed

um sub-caminho . Cada subcaminho tem um início e um fim, e o final de um subcaminho é
típico yw aqui o pró ximo subcaminho Chave
Os termos começam. A coleçã o de subcaminhos cria uma forma.
A sequência para criar uma forma é a seguinte.
1. Inicie um caminho chamando o método beginPath.
2. Vá para a posiçã o inicial chamando o método moveTo.
3. Desenhe subcaminhos chamando métodos como lineTo e rect.
4. Finalize o caminho chamando opcionalmente o método closePath.
5. Renderize a forma preenchida ou contornada chamando os métodos de preenchimento

ou traço, respectivamente.

Os exemplos a seguir têm uma pá gina da web simples com um elemento < canvas > e
referências aos arquivos canvasPat h.css, canvasPath.js e jquery-1.8.2.js como a seguir.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "Content / canvasPath.css" rel = "stylesheet" />
<s cript src = "Scripts / canvasPath.js"> </script>
</head>
<body>
<canvas id = "myCanvas" width = "800" height = "600"> Você precisa de um navegador que
suporte HTML5!
</canvas>
</body>
</html>
O arquivo canvasPath.js é apresentado em cada exemplo. O arquivo canvasPath.css contém

a seguinte regra de estilo.
tela de pintura {
Desenho de linhas
O caminho mais fá cil de criar é composto por linhas. Isso é feito usando o método line To,
que aceita os parâ metros xey. A seguir, um exemplo do uso de linhas para criar formas que
têm um contorno amarelo e um filamento verde.
desenhar linha();
});
function drawLine () {
var canvas = document.getElementB yId ('myCanvas')
ctx.fillStyle = 'verde';
ctx.strokeStyle = 'amarelo';
ctx.lineWidth = 10;
ctx.beginPath ();
ctx.moveTo (100, 250);
ctx.lineTo (150, 350);
ctx.closePath ();
ctx.fill ();
ctx.beginPath ();

ctx.closePath ();
ctx.fill ();
ctx.stroke ();
ctx.beginPath ();
ctx.lin eTo (250, 350);
ctx.fill ();
ctx.stroke ();
ctx.beginPath ();
ctx.lineTo (550, 300)
ctx.fill ();
ctx.stroke ();
Este exemplo desenha quatro formas. A saída renderizada é mostrada na Figura 12-10.
FIGURA 12-10 Formas renderizadas que sã o desenhadas usando o método lineTo. A

primeira forma é um triâ ngulo. Ele é criado desenhando duas linhas e chamando o método
closePath, que desenha uma linha do final ao início. O método de preenchimento é chamado
para preencher o triâ ngulo com verde. Nã o há contorno porque o método de traçado nã o
foi chamado.
A segunda forma também é um triâ ngulo e é desenhada como o primeiro triâ ngulo, mas o
método de traçado é chamado depois que o método de preenchimento é chamado. O
método do traço cria o contorno amarelo.
A terceira forma também é um triâ ngulo, mas este có digo nã o chama o método
closePath. Neste exemplo, o método de preenchimento calcula implicitamente a á rea de
preenchimento, mas como o método closePath nã o é chamado , nã o há linha do fim ao
início; portanto, nenhum contorno é renderizado do final para o início.
A quarta forma é um sinal de mais. Isso demonstra o uso do método moveTo para criar
uma linha que nã o começa onde a linha anterior terminou. O método de traço cria as linhas,
mas o método de preenchimento nã o renderiza nada.
Desenhar retângulos
Você pode adicionar retâ ngulos ao seu caminho chamando o método rect. Lembre-se de
que, se tudo o que você precisa fazer é desenhar um retâ ngulo, pode usar os métodos fil
Rect e strokeRect, discutidos anteriormente nesta liçã o.
O método rect é ú til quando você está definindo uma forma complexa. Em vez de adicionar
muitos lineTo cal s para desenhar um retâ ngulo, você apenas chama o método rect. O que
se segue é um exemplo de criaçã o de uma forma que consiste em um triâ ngulo e um
retâ ngulo.
function drawRect () {
ctx.lineWidth = 10;
ctx. beginPath ();
ctx.rect (100, 300, 100, 100);
ctx.fill ();
ctx.stroke ();
A saída renderizada é mostrada na Figura 12-11. Observe na saída renderizada que o

triâ ngulo e o retâ ngulo estã o contornados.

FIGURA 12-11 A saída renderizada, usando os métodos lineTo e rect Verificação rápida
■■ Quais são os quatro parâmetros do método rect?
■■ O primeiro e o segundo parâmetros são as coordenadas xey do canto superior

esquerdo do retângulo. O terceiro parâmetro é a largura e o quarto parâmetro é a
altura.
Ordenação do preenchimento e do método de traço cal s
Você pode estar se perguntando se há uma diferença entre chamar fill e, em seguida, stroke
versus chamar stroke e depois fil. Há uma diferença, mas antes que a diferença seja exibida,
você precisa entender como o traço é renderizado.
Quando o traço é calado, o contorno é criado usando a propriedade lineWidth atual. Metade
de lineWidth está fora da forma e a outra metade está dentro da forma. A parte do contorno
que está dentro da forma substitui o preenchimento se o método de traço for chamado
apó s o método de preenchimento.
No entanto, se o método de preenchimento for chamado apó s o método de traçado, o

preenchimento substituirá o traçado que está dentro da á rea de preenchimento.
Considere o seguinte exemplo que desenha duas formas, cada uma consistindo em um

triâ ngulo e um retâ ngulo. A diferença é a ordem em que o método de preenchimento e o
método de traçado sã o chamados. A saída renderizada é mostrada na Figura 12-12.
FIGURA 12-12 Formas renderizadas, diferentes devido à ordem da funçã o de execuçã o de

preenchimento e traço drawRect () {

ctx.lineWidth = 10;
ctx.beginPath ();
ctx.rect (100, 300, 100, 100);
ctx.fill ();
ctx.stroke ();
ctx.beginPath ();
ctx.rect (300, 300, 100, 100);
ctx.stroke ();
ctx.fill ();
A saída renderizada do contorno da segunda forma é estreita em comparaçã o com o

contorno da primeira forma e a segunda forma nã o possui a linha horizontal do triâ ngulo.
Essas diferenças resultam do método de preenchimento sendo chamado apó s o método de
traçado, de modo que a cor de preenchimento substitui qualquer cor anterior.
Desenhar arcos usando o método arcTo
Além de desenhar linhas retas, você pode desenhar linhas curvas usando os métodos arc e
arcTo no objeto de contexto.
O método arcTo aceita uma coordenada x1 e uma coordenada y1 que definem um ponto
através do qual as linhas do arco devem passar, seguidas por uma coordenada x2 e uma
coordenada y2 que definem o ponto final, seguida pelo raio do arco. Um mbora apenas dois
pontos sã o fornecidos como parâ metros, um terceiro ponto (x0, y0) é o ponto de partida do
arco. O terceiro ponto é o ponto final do subcaminho anterior.
Desenhar um arco usando o método arcTo pode ser confuso. Para entender como o
ArcTo funciona, execute as seguintes etapas.
1. Em um pedaço de papel, desenhe uma linha em (x0, y0) e (x1, y1).
2. Desenhe uma linha através de (x1, y1) e (x2, y2).
3. Em uma folha de papel separada, desenhe um círculo de raio re recorte-o.
4. Coloque o círculo no papel que tem as duas linhas e deslize o círculo para cima entre a
linha que contém (x0, y0) e a linha que contém (x2, y2) até que toque apenas nas duas
linhas. Os dois pontos onde o círculo toca as retas sã o chamados de pontos tangentes, onde
t1 está pró ximo de t (x0, y0) e t2 é o mais pró ximo de (x2, y2).
5. Desenhe uma linha do ponto (x0, y0) ao primeiro ponto tangente na linha de (x0, y0) a
(x1, y1).
6. Desenhe um arco desse ponto tangente ao outro ponto tangente na linha de (x1, y1) a
(x2, y2) ao longo da circunferência do círculo.
7. O ponto final de arcTo é o segundo ponto tangente na linha de (x1, y1) a (x2, y2).
A Figura 12-13 mostra dois exemplos da implementaçã o de arcTo.

FIGURA 12-13 O método arcTo produzindo resultados inesperados se você nã o entender
como funciona No primeiro exemplo, o raio do círculo é pequeno , entã o o círculo é
deslizado para cima, passando de x0, y0 e x2, y2 até tocar as linhas. Neste exemplo, t1 está
entre x0, y0 e x1, y1, enquanto t2 está entre x1, y1 e x2, y2. Há alguma distâ ncia entre x0, y0
e t1, entã o este arco começa como uma linha reta até atingir t1. Em t1, a curva começa até
atingir t2, onde termina o arco.
No segundo exemplo, o raio é muito maior, entã o o círculo é deslizado para cima até tocar
as linhas, mas desta vez, t1 está fora de x0, y1 e t2 está fora de x2, y2. Ther e ainda uma
certa distâ ncia entre (x0, y0) e t1, de modo que uma linha recta é desenhada entre os dois
pontos. Em t1, a curva começa até atingir t2, onde termina o arco.
Considere o seguinte exemplo de có digo que desenha duas linhas e entã o cria um arco
usando o método arcTo.
function drawArcTo () {
ctx.strokeStyle = 'cinza';
ctx.lineWidth = 1;
ctx.beginPath ();
ctx.stroke ();
ctx.strokeStyle = 'preto';
ctx.lineWidth = 5;
ctx.beginPath ();
ctx.arcTo (400, 500, 600, 300, 50);
ctx.stroke ();
Neste exemplo, as linhas sã o desenhadas para representar as linhas do exemplo

anterior. As linhas sã o cinza e lineWidth é definido como 1. O arco é desenhado usando o
método arcTo. Este ponto inicial é 300, 200, o segundo ponto é 400, 500 e o ú ltimo ponto é
600, 300. O raio é definido como 50. A saída renderizada é mostrada na Figura 12-14.
FIGURA 12-14 O arco renderizado quando o raio é definido para 50
Como o ponto inicial é sempre o ponto final do subcaminho anterior (ou, neste caso, o local
moveTo), o traçado continua a partir desse ponto até atingir a primeira tangente e, em
seguida, a curva começa até atingir o segunda tangente e, em seguida, o arco é concluído.
Neste exemplo de có digo , os pontos permanecem os mesmos, mas o raio é alterado de 50

para 300 como segue.
function drawArcTo () {

ctx.strokeStyle = 'cinza';
ctx.lineWidth = 1;
ctx.beginPat h ();
ctx.stroke ();
ctx.lineWidth = 5;
ctx.beginPath ();
ctx.arcTo (400, 500, 600, 300, 300);
ctx.stroke ();
O resultado é mostrado na Figura 12-15. O raio do círculo tem um impacto profundo no

arco representado. Além disso, como o círculo é deslizado para o â ngulo que é formado
pela linha x0, y0 está ligada e a linha x2, y2 está ligada, você nã o pode criar um a rc maior
que 180
graus porque o círculo sempre tocará essas linhas para criar tangentes t1 e t2 antes que o
arco alcance 180 graus.

FIGURA 12-15 Alterar o raio muda dramaticamente o arco. Desenho de arcos usando o
método do arco
O método arc é muito mais simples de usar do que o método arcTo. O método do arco pode
ser usado para desenhar um círculo ou qualquer parte de um círculo. Isso é diferente do
comportamento do método arcTo, que nã o pode desenhar mais do que meio círculo e pode
produzir linhas com o arco em um esforço para continuar um caminho sem quebrar o
traçado.
O método do arco aceita as coordenadas xey como o centro do círculo usado para desenhar
o arco, seguidas pelo raio do círculo que o arco usará , seguido pelo â ngulo inicial e o â ngulo
final. Você pode adicionar um parâ metro de direçã o que indica a direçã o do arco. O có digo
de exemplo a seguir mostra como criar um círculo usando o método arc .
function drawArc () {

ctx.strokeStyle = 'blue';
ctx.fillStyle = 'amarelo';
ctx.lineWidth = 5;
ctx.beginPath ();
ctx.arc (400, 300, 100, 0, 2 * Math.PI);
Le sson 1: Desenhando usando o elemento < canvas > CAPÍTULO 12 485
ctx.fill ();
ctx.stroke ();
}
Neste exemplo, o centro do círculo é 400, 300, que é o meio da tela. O raio é definido como
100. O local de início deve ser um valor entre 0 e 6,283185, que é 2 * PI. O local de término
também deve ser um valor entre 0 e 6,283185. Os valores 0 e 6,283185 podem ser usados
para representar o ponto do lado direito mais distante do círculo. O valor de 3,14159 (PI) é
o ponto mais à esquerda do círculo. O ponto mais alto do círculo é 1,5
* PI, enquanto o ponto mais baixo do círculo é 0,5 * PI. A tela renderizada é mostrada na
Figura 12-16. O círculo renderizado tem um contorno azul e um filamento amarelo.
FIGURA 12-16 Criando um círculo usando o método do arco
Para desenhar um arco que representa parte do círculo, você precisa de localizaçõ es de
início e fim vá lidas e precisa considerar o parâ metro opcional de direçã o. Por padrã o, o
traço é renderizado no sentido horá rio, o que significa que a direçã o é definida como
falsa. Considere o exemplo a seguir, no qual você fornece uma localizaçã o inicial de 0 e uma
localizaçã o final de 1,5 * PI.
function drawArc () {

ctx.lineWidth = 5;
ctx.beginPath ();
ctx.arc (400, 300, 100, 0, 1,5 * Math.PI);
ctx.fill ();
ctx.stroke ();
O arco renderizado é mostrado na Figura 12-17, que mostra que três quartos do círculo sã o
renderizados. É isso que você queria ou esperava? Se você deseja renderizar apenas o
quarto do círculo que está faltando, você tem duas soluçõ es possíveis.
FIGURA 12-17 O arco renderizado exibindo três quartos do círculo. Uma soluçã o é definir
a localizaçã o da estrela t em 1,5 * Math.PI e a localizaçã o final em 0. Como a renderizaçã o
renderiza o traço no sentido horá rio, o arco começará a renderizar em o ponto mais alto do
círculo e pare no ponto mais à direita do círculo.
A outra soluçã o é deixar o início em 0 e o final em 1.5 * Math.PI, mas adicionar o parâ metro
opcional de direçã o, passando um valor true . Isso faz com que a renderizaçã o do traço vá
no sentido anti-horá rio, o que renderiza o quarto de círculo.
Liçã o 1: desenho usando o elemento < canvas > CAPÍTULO 12 487
Desenho de texto
Você também pode desenhar texto na tela usando o método fil Text ou strokeText. O
suporte para desenho de texto é um tanto bá sico. Ambos os métodos requerem que você
passe o texto a ser desenhado como o primeiro parâ metro, seguido pelas coordenadas xey
que especificam onde o texto é desenhado.
O significado exato da coordenada depende do valor das propriedades textAlign e

textBaseline, mas o padrã o é que a coordenada está no canto inferior esquerdo do texto
desenhado. Você também pode fornecer um parâ metro para indicar a largura má xima do
texto a ser desenhado.
Além dos métodos, as propriedades a seguir podem ser definidas para controlar a
aparência do texto renderizado.
■■ fonte Define o estilo, tamanho e família da fonte, delimitado por espaços. O estilo pode
ser normal, itá lico ou negrito. O tamanho pode ser um tamanho CSS. A família representa a
família da fonte, que pode ser uma família de fontes genérica, como serif ou sans serif, ou
uma família de fontes específica, como Arial ou Courier.
■■ textAlign Define o alinhamento horizontal do texto em relaçã o à coordenada que é

passada para o método fil Text ou strokeText. Pode ser início, fim, esquerda, direita ou
centro.
Observe que o início e a esquerda sã o iguais e o fim e a direita sã o iguais.
■■ textBaseline Define o alinhamento vertical do texto em relaçã o à coordenada que é

passada para o método fil Text ou strokeText. Pode ser superior, suspenso, médio,
alfabético, ideográ fico ou inferior.
O có digo de exemplo a seguir desenha uma linha na tela, passando por seu ponto central
(400, 300). Depois disso, "H el o" é desenhado usando a coordenada de 400, 300.
function drawText () {
ctx.strokeStyle = 'magenta';
ctx.lineWidth = 2;
ctx.font = “negrito 100pt TimesNewRoman";
ctx.beginPath ();
ctx.stroke ();
ctx.fillText (“Olá ", 400, 300);
ctx.strokeText (“Olá ", 400, 300);

A linha é desenhada como seu pró prio caminho e, em seguida, a cor do traço é alterada
para azul, mas nã o há necessidade de iniciar um novo caminho porque fil Text e strokeText
criam seu pró prio caminho. O método fil Text preenche automaticamente o texto sem exigir
uma chamada para o método fill. O strokeText automaticamente delineia o texto; neste
caso, este texto se sobrepõ e ao Texto fil renderizado. O resultado é mostrado na Figura 12-
18.
FIGURA 12-18 A mensagem Hel o renderizada mostrando que a coordenada está na parte
inferior esquerda do te xt A coordenada fornecida de 400, 300 está na parte inferior
esquerda do texto processado, o que significa que o valor padrã o da propriedade textAlign
é start ou left, e o valor padrã o de textBaseline é bottom. Se você alterar a propriedade
textAlign para ce nter e alterar textBaseline para middle, o texto será centralizado
horizontalmente y verticalmente y dentro da tela, como mostrado na Figura 12-19.

FIGURA 12-19 Alterando textAlign e t extBaseline para centralizar o texto dentro da
tela Desenho com imagens
Além de desenhar as muitas formas que esta liçã o abordou, você pode colocar imagens na
tela. Você pode fazer isso desenhando a imagem na tela, usando o método drawImage do
objeto de contexto.
O método drawImage pode aceitar três ou cinco argumentos. O primeiro argumento é a

origem da imagem, que pode ser um elemento < img > ou < video > ou outro elemento
< canvas >. Quando o elemento < video > é usado, um instantâ neo do quadro que está sendo
exibido no momento é usado como imagem. Ao passar três argumentos para o método
drawImage, o segundo e o terceiro argumentos sã o as coordenadas xey do canto superior
esquerdo da imagem. Você também pode criar o elemento < img > em seu JavaScript, o que
é ó timo para quando a apresentaçã o da imagem pode ser condicional e você nã o quer
perder tempo carregando a imagem, a menos que seja necessá rio. O exemplo de có digo a
seguir demonstra a criaçã o do
< img > elemento dinamicamente, envolvendo-o com a foto de um barco em gelo. Quando a

imagem é carregada, o método drawImage é chamado e a imagem é passada como o
primeiro argumento.
function drawImage () {
img.src = “images / IceBoat.jpg";
ctx.drawImage (img, 0, 0);
}
Os resultados sã o mostrados na Figura 12-20. A imagem é desenhada em sua largura e
altura naturais. Se a imagem for maior do que a tela, ela é cortada. Esta imagem tem 538
pixels de largura e 718 pixels de altura. Como a tela tem 800 pixels de largura e 600 pixels
de altura, a parte inferior desta imagem é cortada.
FIGURA 12-20 A imagem desenhada colocada no canto superior esquerdo da tela Você

pode precisar controlar o tamanho da imagem desenhada. Especifique isso com mais dois
argumentos ao chamar o método drawImage, a largura e a altura. No exemplo a seguir, a
largura é definida como 300 e h8 como 400.
function drawImage () {

ctx.drawImage (img, 0, 0, 300, 400);
O resultado é mostrado na Figura 12-21. Ao fornecer a altura e a largura, você deve tentar
manter as proporçõ es da imagem para evitar que ela fique enviesada e pareça muito
magra ou muito gorda.
FIGURA 12-21 A imagem desenhada com um tamanho reduzido para que se encaixe na
tela. Lembre-se de que você pode desenhar sua imagem e sobrepor outras formas
conforme necessá rio.
O có digo a seguir demonstra isso anotando a imagem.
function drawI mage () {

ctx.font = 'negrito 24pt Arial';
ctx.drawImage (img, 175, 0, 450, 600);
ctx.lineWidth = 2;
ctx.beginPath ();
ctx.stroke ();
ctx.strokeStyle = 'branco';
ctx.lineWidth = 1;
ctx.textAlign = 'certo';
ctx.textBaseline = 'middle';
ctx.fillText ('Mast', 325, 180);
ctx.strokeText ('Mast', 325, 180);
ctx.lineWidth = 2;
ctx.beginPath ();

ctx.stroke ();
ctx. strokeStyle = 'branco';
ctx.lineWidth = 1;
ctx.textAlign = 'left';
ctx.fillText ('Sail', 525, 220);
ctx.strokeText ('Sail', 525, 220);
ctx.lineWidth = 2;
ctx.beginPath ();
ctx.stroke ();
ctx.strokeStyle = 'branco';
ctx.lineWidth = 1;
ctx.textAlign = 'left';
ctx.fillText ('Boom', 500, 360);
ctx.strokeText ('Boom', 500, 360);
O resultado é mostrado na Figura 12-22.

FIGURA 12-22 A imagem anotada mostrando que você pode misturar imagens e formas na
tela Resumo da lição
■■ O elemento < canvas > é novo em HTML5 e fornece um desenho de texto que pode ser

acessado usando JavaScript.
■■ Use o método getContext no elemento < canvas > para obter uma referência ao objeto

de contexto.
■■ Use os métodos fil Rect e strokeRect para desenhar retâ ngulos.
■■ Métodos que começam com preenchimento sã o usados para preencher a forma com o

valor da propriedade fil Style. A propriedade fil Style pode ser definida como uma cor,
gradiente ou padrã o.
■■ Métodos que começam com stroke criam um contorno da forma com o valor da

propriedade strokeStyle. A propriedade strokeStyle pode ser definida como uma cor,
gradiente ou padrã o.
■■ As propriedades do objeto de contexto podem ser colocadas em uma pilha usando o
método save ou retiradas da pilha usando o método restore.
■■ Use caminhos para criar formas complexas usando linhas, retâ ngulos e arcos.
■■ Use os métodos fil Text e strokeText para desenhar texto na tela. Use o método
drawImage para desenhar imagens na tela.
Revisão da aula
1. Qual exemplo de có digo pode ser usado para desenhar um retâ ngulo em

um elemento < canvas > que tem uma id de myCanvas?
A. var canvas = document.getElementById ('myCanvas');
var ctx = canvas.getContext ();
ctx.rectangle (10, 10, 50, 75);
B. var canvas = document.getElementById ('myCanvas');
canvas.rectangle (10, 10, 50, 75);
C. var canvas = document.getElementById ('myCanvas');
var ctx = canvas.getContext ('2d');
ctx.fil Rect (10, 10, 50, 75);
D. var canvas = document.getElementById ('myCanvas');
var ctx = canvas.getContext ();
ctx.fil Rect (10, 10, 50, 75);
2. Você deseja desenhar um arco com aproximadamente três quartos de um círculo. Qual

método é o mais fá cil de usar para realizar esta tarefa?
A. arcTo ()
B. arc ()
C. círculo ()
D. ponto ()
Lição 2: Usando gráficos vetoriais escaláveis
O que sã o grá ficos vetoriais escalá veis (SVG) e por que você gostaria de usá -los? Essas sã o
perguntas comuns, principalmente porque todos tomam conhecimento do SVG devido à
sua inclusã o no HTML5.
Na Liçã o 1, “Desenhando usando o elemento < canvas >,” você aprendeu a desenhar em

um elemento < canvas >, usando JavaScript. Embora você possa ter usado métodos
específicos de forma, como fil -
Reto ou arco, a renderizaçã o na tela é feita de maneira bitmap, o que significa que os pixels
sã o comandados para serem exibidos e, apó s a forma renderizada, o c anvas é deixado com
resultados em bitmap. Em outras palavras, a tela nã o armazena o fato de que você criou um
retâ ngulo. Se a superfície de desenho for dimensionada para um tamanho maior, a tela terá
apenas os pixels com os quais trabalhar, entã o o resultado é uma versã o em blocos ou
pixelizada do grá fico.
O SVG é diferente do canvas; com SVG, os comandos sã o armazenados de uma maneira que

permite que sejam executados novamente. Se o tamanho da superfície de desenho mudar,
os comandos podem ser redimensionados e reexecutados para o novo desenho para criar
uma nova imagem , com base no SVG
comandos. O resultado é que você vê uma imagem nítida, independentemente da escala.
Embora a renderizaçã o do SVG seja muito melhor do que a tela, leva tempo para
dimensionar e reexecutar os comandos, portanto, o desempenho nã o é tã o bom. A tela é
preferível quando o desempenho é mais importante.
O SVG é baseado em XML e você pode incorporar o SVG em sua pá gina HTML usando
o elemento < svg >. O conteú do do elemento < svg > contém os comandos baseados em XML
que fazem o desenho. O elemento < svg >, mais seu conteú do, faz parte do modelo de objeto
de documento (DOM), portanto, todo o elemento < svg > e seus filhos sã o acessíveis a partir
do JavaScript. Os eventos também podem ser anexados a qualquer um dos elementos. No
entanto, você nã o deseja escrever todo o XML necessá rio para criar um desenho
complexo. Normalmente, é melhor usar um editor SVG para criar o desenho e, em seguida,
incorporar o desenho à sua pá gina da web.
Nesta liçã o, você aprende como usar o elemento < svg > para incorporar um desenho em
um HTML
pá gina para exibir grá ficos simples. Além disso, você aprenderá a usar o elemento < img >
para exibir arquivos .svg.
■■ Descreva o elemento < svg >.
■■ Implemente o elemento < svg >.
■■ Exibir arquivos SVG usando o elemento < img >.
Usando o elemento < svg >
O elemento < svg > é um contêiner para os comandos baseados em XML. Usá -lo em

sua pá gina HTML permite que você insira seu desenho diretamente na pá gina. A seguir está
um exemplo de um elemento < svg > bá sico .
<svg width = "500" height = "300" xmlns = "http://www.w3.org/2000/svg">
</svg>
Neste exemplo, a largura e a altura sã o definidas, e o namespace X ML é definido para

indicar que este é um desenho SVG.
Criando um caminho
Um caminho é uma sequência de comandos que criam uma forma complexa. Use

o elemento < path >, que possui os atributos id, fil e d, para criar um caminho. O atributo de
preenchimento recebe a cor com a qual você deseja preencher o caminho. O atributo d é
para os dados do elemento < path >, que sã o preenchidos com os comandos e,
normalmente, y começa com um comando para mover para o ponto em que o desenho da
forma começa. O comando de movimento é m ou M . Quando o comando em minú sculas é
usado, indica que as coordenadas sã o relativas. Quando o comando em maiú sculas é usado,
indica que as coordenadas sã o absolutas.
A seguir está uma lista de comandos que podem ser usados em um caminho.
■■ M ou m Mova para uma coordenada especificada.
■■ L ou l Desenhe uma linha da localizaçã o atual até a coordenada especificada.
■■ H ou h Desenhe uma linha horizontal da localizaçã o atual para o

novo valor x especificado no mesmo plano horizontal .
■■ V ou v Desenhe uma linha vertical da localizaçã o atual para o novo valor
de y especificado no mesmo plano vertical.
■■ Os parâ metros A ou a sã o rx, ry, rotação do eixo x, arco grande, varredura, x e y . Este
comando desenha um arco elíptico do ponto atual até a coordenada especificada de x,
y com raio x rx e raio y ry. A elipse é girada em graus de rotação do eixo x . Se o arco for
menor que 180 graus, o arco grande será zero; caso contrá rio, é um. Se o arco for maior que
180
graus, o arco grande é definido como 1. Se o arco for desenhado na direçã o positiva,
a varredura é definida como 1; caso contrá rio, a varredura é definida como zero.
■■ Os parâ metros Q ou q sã o x1, y1, x e y . Este comando desenha uma curva Bézier
quadrá tica da localizaçã o atual para a coordenada especificada como x, y usando o ponto de
controle especificado como x1, y1.
■■ T ou t Desenhe uma curva Bézier quadrá tica do ponto atual à coordenada especificada,
usando o ponto de controle do comando Q anterior.
■■ Os parâ metros C ou c sã o x1, y1, x2, y2, x e y . Este comando desenha uma curva de
Bézier cú bica do ponto atual até a coordenada x, y especificada usando o ponto de controle
x1, y1 para o início da curva e o ponto de controle x2, y2 para o final da curva.
■■ Os parâ metros S ou s sã o x2, y2, x e y . Este comando desenha uma curva de Bézier
cú bica do ponto atual para a coordenada x, y especificada usando o ponto de controle do
comando C anterior para o início da curva e o ponto de controle x2, y2 para o final da curva.
■■ Z ou z Fecha o caminho da posiçã o atual até o início do caminho.
O exemplo a seguir desenha a carroceria de um carro usando um caminho que se move

para 267, 76 e desenha linhas usando o comando l (L minú sculo).
<caminho d = "m267 76 l-21 -4 -144 0 -90 47 0 54 11 11 23 0 15 -30 15 -10 30 0 15 10
15 30 220 0 15 -30 15 -10 30 0 15 10 15 30 l25 0 7 -7 -13 -38
-20 -10 -95 -15 z "fill =" blue "id =" carBody "/> Neste exemplo, a letra L minú scula nã o se
repetia para cada linha de comando, o que demonstra que você pode especificar o
comando imediatamente, fornecer parâ metros , forneça parâ metros novamente e assim
por diante. O caminho termina com o comando Z minú sculo, que fecha o caminho. A cor de
preenchimento é definida como azul e o atributo id é definido como carBody.
Aqui estã o mais dois caminhos, que criam as janelas dianteira e traseira do carro.
<path d = "m65 105 l40 -25 65 0 0 34 -112 0 z" fill = "branco" id = "rearWindow" />
<path d = "m300 105 l-40 -25 -78 0 0 34 122 0 z" fill = "white" id = "frontWindow" /> Liçã o
2: Usando grá ficos vetoriais escalá veis CAPÍTULO 12 497
Esses caminhos têm uma cor de preenchimento de branco. O resultado na Figura 12-23

mostra a carroceria do carro renderizada com suas janelas.
FIGURA 12-23 O elemento < caminho > que é usado para criar uma carroceria de carro

com janelas Desenho de círculos
Você pode adicionar círculos a um desenho SVG usando o elemento < circle > , que possui
os atributos r, cx, cy, fil e id. O atributo r define o raio do círculo. Os atributos cx e cy
definem a coordenada do centro do círculo. O atributo de preenchimento define a cor do
círculo. O exemplo a seguir adiciona duas rodas ao corpo do veículo criado no exemplo
anterior.
<circle r = "35" cy = "185" cx = "90" fill = "black" id = "rearWheel" />
<circle r = "35" cy = "185" cx = "400" fill = "black" id = "frontWheel" />

O elemento < svg > concluído é o seguinte.
<svg width = "500" height = "300" xmlns = "http: // ww w.w3.org/2000/svg">
<caminho d = "m267 76 l-21 -4 -144 0 -90 47 0 54 11 11 23 0 15 -30 15 -10 30 0
15 10 15 30 220 0 15 -30 15 -10 30 0 15 10 15 30 l25 0 7 -7
-13 -38 -20 -10 -95 -15 z "fill =" blue "id =" carBody "/>
<path d = "m65 105 l40 -25 65 0 0 34 -112 0 z " fill = "branco" id = "rearWindow" />
<path d = "m300 105 l-40 -25 -78 0 0 34 122 0 z" fill = "white" id = "frontWindow" />
</svg>
O carro completo é mostrado na Figura 12-24.
FIGURA 12-24 O carro renderizado usando os elementos < path > e < circle > Exibindo

arquivos SVG usando o elemento < img > Você acabou de ver como pode criar imagens
SVG escrevendo o XML, mas pode usar qualquer um dos SVG editores, como o svg-edit, que
é um aplicativo baseado em navegador, disponível em
http://code.google.com/p/svg-edit/ .
Se você usa um editor SVG, normalmente deseja externalizar o SVG em seu pró prio arquivo
para facilitar o trabalho no desenho, em vez de incorporar o desenho em sua pá gina HTML
em um elemento < svg >. Você pode fazer isso usando o elemento < img > e definindo a
origem para o local do arquivo .svg. No exemplo a seguir, o elemento < svg > é cortado do
HTML
pá gina e colado em um novo arquivo chamado car.svg. Na pá gina HTML,

um elemento < img > é adicionado com uma referência ao arquivo car.svg.
<! DOCTYPE h tml>

<head>
<title> </title>
<link href = "Content / svg.css" rel = "stylesheet" />
</head>
<body>
<img src = "images / car.svg" />
</body>
</html>
Quando você exibe a pá gina HTML, o carro é exibido. Se você tentar redimensionar a

pá gina, a imagem nã o será redimensionada porque as configuraçõ es precisam ser
alteradas.
Liçã o 2: Usando grá ficos vetoriais escalá veis CAPÍTULO 12 499
Tornando o SVG escalável
O arquivo SVG atualmente possui o conteú do do elemento < svg >, mas você precisa

fazer algumas alteraçõ es para dimensionar a imagem. Primeiro, altere a configuraçã o de
altura e largura para 100 por cento e, em seguida, adicione um atributo viewBox
ao elemento < svg >.
O atributo viewBox descreve a parte da tela que você deseja que o visualizador veja. Mesmo
que o desenho cubra toda a tela do computador, a figura em seu desenho pode existir
apenas em uma pequena parte do desenho. O atributo viewBox permite que você diga ao
analisador para aumentar o zoom nessa parte para eliminar o espaço em branco
extra. Defina viewBox para obter os recursos de zoom adequados ao redimensionar sua
pá gina HTML.
O atributo viewBox tem quatro parâ metros: a coordenada x mínima, a coordenada y

mínima, a largura e a altura. Isso permite que você descreva a á rea retangular a ser
exibida. Neste exemplo, alguns espaços em branco na parte superior e inferior do desenho
serã o cortados, portanto, o seguinte é a configuraçã o do atributo viewBox.
viewBox = "0 50 500 175"

Esta configuraçã o corta 50 pixels da parte superior e limita a altura de visualizaçã o a 175
pixels. A largura original do desenho era de 500 pixels, e nã o há muito espaço em branco
nas laterais, entã o ele é deixado como está . A seguir está o conteú do do arquivo .svg apó s as
alteraçõ es serem feitas.
<svg width = "100%" height = "100%" xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 5 0 500 175">
<caminho d = "m267 76 l-21 -4 -144 0 -90 47 0 54 11 11 23 0 15 -30 15 -10 30 0
15 10 15 30 220 0 15 -30 15 -10 30 0 15 10 15 30 l25 0 7 -7
-13 -38 -20 -10 -95 -15 z "fill =" blue "id =" carBody "/>
<path d = "m65 105 l40 -25 65 0 0 34 -112 0 z" fill = "branco" id = "rearWindow" />
<path d = "m300 105 l-40 -25 -78 0 0 34 122 0 z" fill = "white" id = "frontWindow" />
</svg>
No arquivo svg.css, a seguinte regra de estilo foi adicionada para redimensionar

o elemento < img > automaticamente quando a pá gina HTML é redimensionada.
img {
largura: 100%;
Exibe a pá gina HTML. Pode ser necessá rio atualizar a pá gina para ver a
mudança. O elemento < img > agora tem o tamanho da pá gina HTML e o
redimensionamento da pá gina redimensiona o elemento < img >, conforme mostrado na
Figura 12-25.

FIGURA 12- 25 A < img > elemento y automá tico redimensionar a < svg > elemento quando
a pá gina HTML é redimensionada
■■ Qual é a finalidade do atributo viewBox?
■■ O atributo viewBox descreve a parte do desenho que você deseja que o
usuário veja.
Resumo da lição
■■ O elemento < svg > é usado para criar e exibir grá ficos vetoriais escalá veis (SVG).
■■ SVG é baseado em XML e o conteú do do elemento < svg > contém os comandos que

compõ em o desenho no formato XML. O elemento < svg > pode ser colocado em um arquivo
.svg.
■■ Use o elemento < path > para criar formas complexas. O caminho contém uma lista de
comandos para criar uma forma. Cada comando é representado como uma letra maiú scula
ou minú scula. Maiú sculas indica que as coordenadas sã o absolutas; l owercase indica que
as coordenadas sã o relativos. O elemento < circle > é usado para desenhar um círculo. Para
incluir um arquivo .svg externo em uma pá gina HTML, use o elemento < img > e defina o
elemento src para o local do arquivo .svg.
■■ Para fazer o elemento < svg > dimensionar automaticamente quando a pá gina HTML é

redimensionada, defina os atributos de altura e largura no elemento < svg > para 100 por
cento e adicione um atributo viewBox que descreve a á rea de visualizaçã o do
desenho. Finalmente, adicione uma regra de estilo ao seu
< img > elemento que define sua largura em 100 por cento.
Liçã o 2: Usando grá ficos vetoriais escalá veis CAPÍTULO 12 501
Revisão da aula
1. O conteú do do elemento < svg > está em qual formato?
A. SGML
B. HTML
C. XHMTL
D. XML
2. No elemento < svg >, qual atributo fornece uma janela para o desenho e ativa os recursos
de zoom?
A. zoom
B. janela
C. viewBox
D. zoomWindow
Pratica exercícios

Exercício 1: Crie uma página da web usando uma tela

Neste exercício, você aplica seu conhecimento do elemento < canvas > criando um
aplicativo da web que permite tirar fotos instantâ neas de um vídeo enquanto ele é
reproduzido.
1. Inicie o Visual Studio Express 2012 for Web. Crie um projeto de aplicativo da Web vazio
ASP.NET chamado CanvasSnapshooter .
2. Depois que o projeto for criado, adicione uma nova pasta, chamada Media, ao projeto.
3. Adicione o arquivo de vídeo IceBoat.mp4 . Clique com o botã o direito na pasta Mídia,

escolha Adicionar e selecione Item Existente. Localize a pasta Resource e selecione o
arquivo de vídeo IceBoat.mp4.
4. Adicione um arquivo HTML ao projeto. Nomeie o arquivo CanvasPage.html .
5. Adicione um arquivo CSS ao projeto. Nomeie o arquivo default.css .
6. Adicione uma nova pasta, chamada Scripts, ao projeto.
7. Clique com o botã o direito na pasta Scripts e adicione um novo arquivo JavaScript,
denominado default.js .
do projeto. Escolha Gerenciar Pacotes NuG . Clique em Online e digite jQuery nos critérios
9. No arquivo CanvasPage.html, adicione uma referência aos arquivos default.css, biblioteca

jQuery e de fault.js.
10. Adicione o título Canvas Snapshooter à sua pá gina. Sua pá gina HTML deve ter a

seguinte aparência.
<! DOCTYPE html>
<head>
<title> Canvas Snapshooter </title>
<link href = "default.css" rel = " folha de estilo " />

</head>
<body>
</body>
</html>
11. No elemento < body >, adicione um elemento < video > cujo id é myVideo. Defina o

atributo src para o arquivo IceBoat.mp4. Adicione o atributo de controles para exibir os
controles bá sicos de vídeo. Defina o atributo de largura para 360 e defina o atributo de
altura para 240. Dentro do
elemento < video >, adicione uma mensagem para navegadores incompatíveis. Apó s

o elemento < video >, adicione uma pausa.
12. Adicione um elemento < button > cujo id é btnSnapshot. Apó s o elemento < button >,

adicione uma pausa.
13. Adicione um elemento < canvas > cujo id é myCanvas. Defina o atributo de largura

como 360 e defina o atributo de altura como 240. Dentro do elemento < canvas >, adicione
uma mensagem para navegadores incompatíveis. Sua pá gina HTML deve ter a seguinte
aparência.
<! DOCTYPE html>
<head>
<title> </title>
</head>
<body>
<video id = "myVideo" src = "media / IceBoat.mp4" controls = "controls"
largura = "360" altura = "240">

Você precisa de um navegador que suporte vídeo HTML5!
</video>
<br />
<button id = "btnSnapshot" type = "button"> Instantâ neo </button>
<br />
<canvas id = "myCanvas" width = "360" height = "240"> Você precisa de um navegador que
suporte tela HTML5!
</canvas>
</body>
</html>
14. No arquivo default.css, defina a borda na tela da seguinte maneira.

tela de pintura {
15. No arquivo default.js, adicione a funçã o de documento pronto. Na funçã o documento

pronto, assine o evento c lick do botã o. Quando o botã o é clicado, chame uma nova funçã o,
drawVideoFrame. Seu có digo deve ser semelhante ao seguinte.
$ ('# btnSnapshot'). on ('click', drawVideoFrame);
});
16. Adicione a funçã o drawVideoFrame. Nesta funçã o, adicione có digo para obter uma

referência à tela. Adicione o có digo para obter uma referência ao elemento de
vídeo. Adicione o có digo para chamar o método getContext na tela e, usando o objeto de
contexto, chame o método drawImage com o vídeo. Seu có digo deve ser semelhante ao
seguinte.
function drawVideoFrame () {
var canvas = document.getElementById ('myCanvas');
var video = document.getElementById ('myVideo');
canvas.getContext ('2d'). drawImage (vídeo, 0, 0, 360, 240);
17. No So lution Explorer, clique com o botã o direito do mouse no arquivo

CanvasPage.html e escolha Definir como pá gina inicial.
18. Teste seu trabalho pressionando F5 para executar o site. Você deve ver a pá gina
VideoPage.html conforme mostrado na Figura 12-26.
FIGURA 12-26 A pá gina do snapshooter da tela em execuçã o
5 04 CAPÍTULO 12 Desenho com HTML5
capítulo.
■■ Exercício 1 Aprenda mais sobre o elemento < canvas > criando um jogo simples, como o
jogo da velha, que permite jogar.
■■ Exercício 2 Aprenda mais sobre o elemento < svg > escrevendo um aplicativo da web

que fornece a capacidade de exibir arquivos .svg em seu disco.
Respostas
Lição 1
A. Incorreto: O método getContext requer o parâ metro 2d e nã o há método retâ ngulo no

objeto de contexto.
B. Incorreto: para desenhar na tela, você precisa executar o método getContext para obter
uma referência a um objeto de contexto, e nã o há método de retâ ngulo no objeto de tela.
C. Correto: Este é o có digo correto, no qual uma referência a um objeto de contexto é

obtida chamando o método getContext com o parâ metro 2d.
D. Incorreto: O método getContext requer o parâ metro 2d.
A. Incorreto: O método arcTo normalmente y desenha uma linha e um arco. Embora

pudesse cumprir a tarefa, seria muito difícil em comparaçã o com o método do arco.
B. Correto: Usar o método do arco é a maneira mais fá cil de realizar esta tarefa.
C. Incorreto : O método do círculo nã o existe.
D. Incorreto: O método de ponto nã o existe.
Lição 2
A. Incorreto: HTML é derivado de SGML, mas o elemento < svg > é baseado em XML.
B. Incorreto: HTML é usado para pá ginas da web, mas o elemento < svg > é baseado em

XML.
C. Incorreto: XHTML é usado para pá ginas da web, mas o elemento < svg > é baseado em
XML.
D. Correto: O elemento < svg > é baseado em XML.
A. Incorreto: O atributo zoom nã o existe.
B. Incorreto: O atributo de janela nã o existe.
C. Correto: O atributo viewBox fornece uma janela para o desenho e permite recursos de
zoom.
D. Incorreto: O atributo zoomWindow nã o existe.
CAPÍTULO 1 3
Arrastar e soltar
Antes do HTML5, a capacidade de arrastar e soltar operaçõ es era possível com alguns
navegadores, mas nã o era compatível com navegadores diferentes. Você normalmente
implementa arrastar e soltar usando uma biblioteca de terceiros, como jQuery. Arrastar e
soltar é um cidadã o de primeira classe do HTML5, que é o primeiro passo para ter uma
implementaçã o compatível entre navegadores.
Você ainda pode usar jQuery para outras funcionalidades, mas nã o é necessá rio para
arrastar e soltar.
Este capítulo mostra como arrastar e soltar de um local para outro na pá gina da web e, em
seguida, como arrastar e soltar arquivos.
■■ Liçã o 1: Arrastando e soltando 507
■■ Liçã o 2: arrastando e soltando arquivos 517
Lição 1: arrastando e soltando

Fazer arrastar e soltar parte do HTML5 significa que você pode obter compatibilidade e
integraçã o do navegador e, como você verá na Liçã o 2, “Arrastando e soltando arquivos”,
você pode obter integraçã o com o sistema operacional.
■■ Descrever HTML5 dr ag and drop.
■■ Implementar arrastar e soltar usando HTML5.
507
Para ilustrar a técnica de arrastar e soltar, considere a seguinte pá gina HTML, que define
um grande quadrado com três quadrados dentro dele.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "MicroScramble.css" rel = "stylesheet" />
<script src = "Scripts / MicroScramble.js"> </script>
</head>
<body>
<d iv id = "hole1" class = "hole"> <div id = "item1" class = "item"> 1 </div> </div>
<div id = "hole2" class = "hole"> <div id = "item2" class = "item"> 2 </div> </div>
<div id = "hole3" class = "hole"> <div id = "item3" class = "item"> 3 </div> </div>
<div id = "hole4" class = "hole"> </div>

</ div>
</body>
</html>
Este documento HTML contém um elemento < div > cujo id é chamado de contêiner. Dentro

do contêiner estã o quatro elementos < div > que sã o orifícios que podem conter um
item. Os primeiros três furos sã o preenchidos com um item.
O documento HTML contém uma referência à folha de estilo MicroScramble.css, que

contém as seguintes regras de estilo.
#container {
borda: só lida;
wid th: 332px;
altura: 332px;
.buraco {
borda: só lida;
largura: 160px;
altura: 160px;
flutuar: esquerda;
.item {

família da fonte: Arial, Helvetica, sans-serif;
largura: 140p x;
altura: 140px;
cor de fundo: # C0C0C0;
cor: #FFFFFF;
-webkit-user-select: nenhum;
-khtml-user-select: nenhum;
-moz-user-select: nenhum;
508 CAPÍTULO 13 Arrastar e soltar
-ms-user-select: nenhum;
seleçã o do usuá rio: nenhum;
A primeira regra de estilo é para o contêiner, que possui uma borda só lida e as
configuraçõ es de altura e largura formam um quadrado. A configuraçã o de margin-left e
margin-right para resultados automá ticos no contêiner sendo centralizado.
O pró ximo estilo de regra é para os orifícios. Cada buraco é um quadrado preto. A ú ltima
regra de estilo é para os itens. Um item é um quadrado cinza com um nú mero nele. O
nú mero é centralizado e exibido em uma fonte grande. Observe que a ú ltima parte da regra
de estilo define a propriedade selecionada pelo usuá rio como nenhuma e que existem
vá rias entradas, com base no fabricante do navegador. Essa propriedade é definida como
nenhum para evitar que o usuá rio deslize o item por engano e selecione o texto, que é o
nú mero. A Figura 13-1 mostra a pá gina da web renderizada.
FIG URE 13-1 A pá gina HTML inicial pronta para a funcionalidade de arrastar e

soltar Arrastar
Para especificar para o navegador que um elemento pode ser arrastado, use o atributo
draggable, que possui três valores vá lidos: true , false e auto . Para a maioria dos
navegadores, a configuraçã o automá tica é o padrã o, o que significa que o navegador decide
se o elemento deve ser arrastado. Por exemplo, o elemento < img > normalmente é
arrastá vel por padrã o, mas um elemento < div > nã o é arrastá vel por padrã o. Neste
documento HTML de amostra, o item é um elemento < div > e nã o pode ser arrastado por
padrã o. Depois de adicionar o atributo arrastá vel, o contêiner se parece com o seguinte.
<div id = "hole1" class = "hole">
<div id = "item1" draggable = "true" class = "item"> 1 </div> Liçã o 1: Arrastar

e soltar CAPÍTULO 13 509
</div>

<div id = "item2" draggable = "true" class = "item"> 2 </div>
</div>
<div id = "item3" draggable = "true" class = "item"> 3 </div>
</div>
<div id = "hole4" class = "hole"> </div>
</div>
Depois de adicionar o atributo arrastá vel aos itens, você pode arrastá -los, conforme
FIGURA 13-2 O atributo arrastá vel adicionado, permitindo que o item seja arrastado Você
pode arrastar um item, mas o item contém o símbolo de não entrada para indicar que o
item nã o pode ser solto.
Ao arrastar e soltar, há eventos que sã o baseados no elemento arrastado e há eventos que

sã o baseados no destino de soltar. Usando esses eventos, você deve ser capaz de
personalizar a operaçã o de arrastar e soltar conforme necessá rio. Os eventos a seguir sã o
baseados no elemento arrastado.
■■ dragstart Aciona quando o arrasto é iniciado
■■ arraste os gatilhos continuamente enquanto o elemento é arrastado
■■ arrastar acionadores quando o arrasto terminar
O có digo a seguir é colocado no arquivo MicroScramble.js e mostra o uso dos eventos

dragstart e dragend para alterar o estilo do item que está sendo arrastado até que o
arrastamento termine.
var $ draggedItem;
$ (document ) .ready (function () {

$ ('. item'). on ('dragstart', arrastando);
$ ('. item'). on ('dragend', draggingEnded);
});
funçã o arrastar (e) {
$ (e.target) .addClass ('arrastando');
$ draggedItem = $ (e.target);
function draggingEnded (e) {
$ (e.target) .removeClass ('d ragging');
Este exemplo usa a funçã o de documento pronto em jQuery para assinar os eventos
dragstart e dragend em todos os elementos que têm o item de classe CSS atribuído. A
funçã o de arrastar adiciona a classe CSS de arrastar quando o arrastar começa e on define o
$ draggedItem com o valor do item que está sendo arrastado. A funçã o draggingEnded
remove a classe CSS de arrastamento.
No arquivo MicroScramble.css, a regra de arrastar CSS é definida da seguinte maneira.
.dragging {
Neste exemplo , o fundo do item arrastado muda para amarelo até que o arrasto pare.
Caindo
Depois de arrastar, a gota deve ser operacionalizada. Os eventos a seguir sã o baseados no

alvo de soltura.
■■ dragenter Aciona quando o arrasto entra em uma zona para soltar
■■ dragover Aciona continuamente conforme o elemento é arrastado sobre a zona de

soltar
■■ dragleave Dispara quando o item arrastado sai de uma zona para soltar
■■ soltar acionadores quando o item arrastado for solto
Os eventos dragenter e dragover sã o padronizados para rejeitar itens arrastados, razã o

pela qual você nã o pode soltar um item no momento. Você pode ativar a eliminaçã o
cancelando a açã o padrã o nesses eventos.
Liçã o 1: Arrastando e soltando CAPÍTULO 13 511
O evento de soltar r emova o item solto do modelo de objeto de documento (DOM) e o

adiciona de volta ao DOM no local da zona de soltar. O có digo a seguir se inscreve nos
eventos dragenter, dragover e drop.
var $ draggedItem ;
$ ('. item'). on ('dragstart', arrastando);
$ ('. item'). on ('dragend', draggingEnded);
$ ('. hole'). on ('dragenter', preventDefault);
$ ('. hole'). on ('dragover', preventDefault);
$ ('. hole'). on ('drop', dropItem);
});
functi on dragging (e) {
$ (e.target) .addClass ('arrastando');
$ draggedItem = $ (e.target);
}

function draggingEnded (e) {
$ (e.target) .removeClass ('arrastando');
function preventDefault (e) {
function dropItem (e) {
var hole = $ (e.target);
if (hole.hasClass ('hole') && hole.children (). length == 0) {
$ draggedItem.detach ();
$ draggedItem.appendTo ($ (e.target));
Neste exemplo, a funçã o de documento pronto adicionou instruçõ es ao assinante para

dragenter, dragover e soltar. Observe que dragenter e dragover chamam a mesma funçã o
preventDefault, que evita a rejeiçã o dos itens arrastados.
O evento drop chama a funçã o dropItem. Em dropItem, um objeto jQuery é criado a partir
de et arget, que é o destino de soltar, e é atribuído a uma variá vel de furo . A instruçã o if
verifica se o destino de soltar tem a classe CSS de furo. Isso é necessá rio porque você pode
deixar algo cair em cima de um item em vez de em um buraco. Quando o item está em
um buraco, o evento de soltar borbulha e executa o evento de soltar no buraco. Se o alvo de
soltar for um buraco, o có digo verifica se há filhos; se tem criança, esse buraco já tem um
item e você nã o deve poder cair. Se o alvo de soltar for um buraco sem filhos, o jQuery
desanexa o item arrastado do DOM e entã o anexa draggedItem ao alvo de soltar. Figura 13-
3
mostra o item quando está sendo arrastado e quando é solto.

■■ Quais duas operações padrão de eventos devem ser evitadas para permitir que o
evento de descarte opere?
■■ Os eventos dragenter e dragover
FIGURA 13-3 O item sendo arrastado e o item apó s ser solto Usando o objeto
DataTransfer
O exemplo anterior demonstra uma operaçã o completa de arrastar e soltar, mas você

também pode usar o objeto DataTransfer para passar dados do evento dragstart para o
evento de soltar. Usando o objeto DataTransfer, você nã o precisa criar uma variá vel global
para fazer referência ao item que está sendo arrastado. Usar o objeto DataTransfer também
permite que você passe qualquer dado para o evento drop, desde que possa ser
representado como uma string ou URL. O objeto DragStart é referenciado como uma
propriedade dataTransfer no evento dragstart.
NOTA USANDO O OBJETO DE TRANSFERÊNCIA DE DADOS COM JQUERY

Se você estiver usando jQuery para vincular eventos, a propriedade dataTransfer
estará ausente, mas pode ser adicionada adicionando a seguinte instrução à função
de documento pronto.
jQuery.event.props.push ('dataTransfer');
O jQuery cria um objeto wrapper que se assemelha ao evento original e copia apenas
os dados do objeto original de que o jQuery precisa. Esta instrução diz ao jQuery para
procurar a propriedade dataTransfer no objeto original e, se existir, copiá-la para o
wrapp er jQuery .
Você pode passar dados para o evento drop usando a propriedade dataTransfer. O objeto
DataTransfer tem os seguintes membros.
■■ método clearData () que limpa os dados no objeto DataTransfer.
■■ efeito de soltar Propriedade que obtém ou define o tipo de operaçã o de arrastar e

soltar e o tipo de cursor. Ele pode ser configurado para copiar, vincular, mover ou nenhum.
■■ propriedade effectAllowed que obtém ou define as operaçõ es permitidas no elemento

de origem.
■■ files Propriedade que obtém uma lista dos arquivos que estã o sendo arrastados.
■■ getData () Método que obtém os dados no objeto DataTransfer.
■■ setData () Método que define os dados no objeto DataTransfer.
■■ types Propriedade que obtém uma lista de strings dos tipos que estã o
sendo configurados.
No exemplo a seguir, o documento HTML possui uma lista nã o ordenada de carros, da qual
você pode arrastar e soltar qualquer um dos carros em uma lista nã o ordenada diferente de
carros favoritos, conforme a seguir.
<! DOCTYPE html>
<cabeça >
<title> </title>

<script src = "Scripts / CarList.js"> </script>
</head>
<body>
<p> De quais carros você gosta? </p>
<ul id = "carList">
<li draggable = "true" data-value = "car, Chevrolet"> Chevrolet </li>
<li draggabl e = "true" data-value = "car, Ford"> Ford </li>
<li draggable = "true" data-value = "car, BMW"> BMW </li>
</ul>
<p> Largue seus carros favoritos abaixo: </p>
<ul id = "favoriteCars" style = "min-height: 100px; background-color: yellow;">
</ul>
</body>
</html>
Nã o há nenhum arquivo CSS para fazer a pá gina ou a operaçã o de arrastar e soltar parecer
organizada, mas um estilo embutido é aplicado a favoriteCars para que o usuá rio possa ver
uma á rea para soltar. Cada um dos carros pode ser arrastado e usa atributos de dados para
fornecer dados que serã o coletados quando o arrastamento começar e depois passados
para o evento de soltar. O arquivo JavaScript é semelhante ao exemplo anterior, que foi
usado para mover nú meros, mas, desta vez, os dados sã o passados para o evento drop
usando o objeto DataTransfer conforme a seguir.
/// <referen ce path = "jquery-1.8.3.js" />
$ ('# carList'). on ('dragstart', arrastando);
$ ('# favoriteCars'). on ('dragenter', preventDefault);

$ ('# favoriteCars'). on ('dragover', preventDefault);
$ ('# favoriteCars'). on ('drop', dropItem);
});
função arrastar (e) {
var val = e.target.getAttribute ('data-value');
e.dataTransfer.setData ('texto', val);
e.dataTransf er.effectAllowed = 'copiar';
var data = e.dataTransfer.getData ('text'). split (',');
if (dados [0] == 'carro') {
var li = document.createElement ('li');
li.textContent = dados [ 1];
e.target.appendChild (li);
Na funçã o de documento pronto, a propriedade dataTransfer é enviada para a coleçã o de

propriedades que precisam ser copiadas para o wrapper jQuery. A funçã o de arrastar é
chamada quando o arrasto começa. Ele coleta os dados do atributo data-value e os atribui
ao objeto DataTransfer. A propriedade effectAl owed é definida para copiar , o que muda o
ponteiro do mouse para um ponteiro com um sinal de mais sob ele. Se a configuraçã o foi
definida para mover , o ponteiro do mouse seria um ponteiro com uma pequena caixa sob
ele. Se a propriedade effectAl owed fosse definida como link , o ponteiro do mouse seria um
ponteiro com um símbolo de atalho sob ele.
A funçã o dropItem é chamada a partir do evento drop. O objeto DataTransfer também está
disponível no evento drop por meio da propriedade dataTransfer. Os dados sã o
recuperados, divididos em uma matriz e atribuídos à variá vel de dados. Em seguida, o
primeiro elemento é testado para ver se é um carro. Nesse caso, um novo item da lista é
criado e a marca do carro, que está nos dados [1], é atribuída à propriedade textContent do
item da lista. Finalmente, o item da lista é anexado ao elemento soltar.
A Figura 13-4 mostra a tela finalizada depois que um carro foi arrastado e solto na lista de
carros favoritos.
FIGURA 13-4 Arrastar e soltar concluído com os itens da lista
Resumo da lição
■■ A funcionalidade de arrastar e soltar em HTML5 será consistente e compatível em todos

os navegadores.
■■ O atributo arrastá vel deve ser definido como verdadeiro e adicionado a cada elemento
que precisa ser arrastado.
■■ Os eventos dragstart e dragend podem ser usados para alterar o estilo do elemento que
está sendo arrastado.
■■ Os eventos dragenter e dragover devem ser codificados para evitar a operaçã o padrã o e
permitir a queda.
■■ O evento de soltar é acionado quando o item é solto em um alvo de soltar.
■■ O objeto DataTransfer é usado para passar dados entre o evento dragstart e o evento
drop.
Revisão da aula
1. Qual dos eventos a seguir dispara continuamente durante uma operaçã o de arrastar e
soltar?
(Escolha todas as opçõ es aplicá veis.)
A. dragstart
B. arrastar
C. dragend
D . Dragenter
E. dragover
F. dragleave
G. drop
2. Quais dos eventos a seguir estã o associados ao item que está sendo arrastado? (Escolha
todas as opçõ es aplicá veis)
A. dragstart
B. arrastar
C. dragend
D. dragenter
E. dragover
F. dragleave
G. drop
3. Usando o objeto DataTransfer, que tipo de dados você pode passar para o evento drop?
A. Qualquer string vá lida, nú mero, data / hora ou valor booleano B. Qualquer URL que
esteja no mesmo domínio da pá gina da web C. Qualquer objeto JSON
D. Qualquer objeto que pode ser representado como uma string ou URL
Lição 2: arrastando e soltando arquivos
Você pode arrastar e soltar arquivos usando a interface de programaçã o de aplicativo (API)
de arquivo, que também faz parte do HTML5. A API de arquivo fornece acesso indireto a
arquivos de maneira estritamente controlada.
A ré er esta lição, você será capaz de:
■■ Descrever a integraçã o do sistema operacional arrastar e soltar HTML5.
■■ Implementar arrastar e soltar arquivos usando HTML5.
Ao eliminar um arquivo, o objeto DataTransfer retorna um objeto FileList, que é uma

coleçã o de objetos File que foram eliminados. O objeto File possui as seguintes
propriedades.
■■ name Propriedade que obtém o nome e a extensã o do arquivo sem um caminho
■■ type Propriedade que obtém o tipo MIME do arquivo
■■ size Propriedade que obtém o tamanho do arquivo em bytes
Liçã o 2: Arrastando e soltando arquivos CAPÍTULO 13 517
O seguinte documento HTML tem um elemento < div > no qual os arquivos podem ser

descartados e um elemento < table > que é preenchido com informaçõ es sobre os arquivos
descartados.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "FileDragAndDrop.css" rel = "stylesheet" />
<script src = "Scripts / jquery-1.8.3.js"> </ scri pt>
<script src = "Scripts / FileDragAndDrop.js"> </script>
</head>
<body>
<div id = "target">
<p> Arraste e solte arquivos aqui ... </p>
</div>
<table id = "fileInfo"> </table>
</body>
</html>
O arquivo FileDragAndDrop.css contém regras de estilo para dimensionar o destino de

arrastar e soltar. Este arquivo também contém regras de estilo para formatar a tabela de
informaçõ es do arquivo conforme a seguir.
#alvo {
borda: só lida;
altura: 150px;
largura: 500px;
t ext-alinhar: centro;
#informaçõ es do arquivo {
largura: 500px;
}

tabela, th, td {
colapso da fronteira: colapso;
th, td {
preenchimento: 5px;
A Figura 13-5 mostra a pá gina da web. Ainda nã o há JavaScript, entã o você pode pensar que
nã o pode arrastar e soltar nenhum arquivo aqui, mas há um comportamento padrã o para
arquivos que sã o arrastados e soltos. Se você soltar um arquivo em qualquer lugar da
pá gina da web, o arquivo será aberto em outra janela.
Por exemplo, se você arrastar e soltar um filme na pá gina da web, o filme começará a
ser reproduzido em uma nova janela.
FIGURA 13-5 A pá gina da web com regras de estilo aplicadas

Para processar os arquivos descartados e exibir as informaçõ es do arquivo em uma tabela
abaixo da caixa de depó sito, o seguinte JavaScript é adicionado ao arquivo
FileDragAndDrop.js.
$ ('# target'). on ('dragenter', preventDefault);
$ ('# target'). on ('dragover', preventDefault);
});
Na funçã o de documento pronto , jQuery é configurado para expor o objeto

DataTransfer. Os eventos dragenter e dragover sã o entã o programados para evitar a
operaçã o padrã o que evita a queda. Quando o evento de soltar é adicionado, o arquivo
arrastado pode ser solto.
Em seguida, o evento drop é su bscrito, que chama a funçã o dropItem. A funçã o dropItem
recupera a coleçã o de arquivos do objeto DataTransfer. O conteú do da tabela de
informaçõ es do arquivo é sobrescrito pelo cabeçalho, que também apaga todas as
informaçõ es existentes na tabela. Finalmente, um loop for é usado para percorrer os
arquivos e adicionar uma linha de informaçõ es à tabela de informaçõ es de cada arquivo. A
seguir está o arquivo JavaScript completo.
/// <referenc e path = "jquery-1.8.3.js" /> $ (document) .ready (function () {
$ ('# target'). on ('dragenter', preventDefault);

$ ('# target'). on ('dragover', preventDefault);
$ ('# target'). on ('drop', dropItem);
});
function preventD efault (e) {
var files = e.dataTransfer.files
, $ table = $ ('# fileInfo')
, i = 0;
$ table.html (
'<thead> <tr> <th> Nome </th> <th> Tipo </th> <th> Tamanho </th> </tr>
</thead>'); para (i = 0; i <files.length; i ++) {
$ ('<tr> <td>'
+ arquivos [i] .name + '</td> <td>'
+ arquivos [i] .type + '</td> <td>'
+ arquivos [i] .size + '</td> </tr>') .appendTo ($ tabela);
preventDefau lt (e);
A Figura 13-6 mostra a pá gina da web depois que vá rios arquivos foram arrastados e
soltos. A tabela de informaçõ es do arquivo é preenchida e exibida. A primeira coluna
contém os nomes dos arquivos (sem um caminho) dos arquivos eliminados. A segunda
coluna contém o tipo MIME do arquivo , se o tipo puder ser derivado. A ú ltima coluna
contém o tamanho do arquivo em bytes.
ARQUIVO 13-6 A pá gina da web concluída depois que os arquivos foram arrastados e
soltos Verificação rápida
■■ Qual objeto fornece acesso aos arquivos descartados ?
■■ O objeto DataTransfer
Resumo da lição
■■ O objeto File fornece as propriedades de nome, tipo e tamanho.
■■ Para permitir a queda de arquivos, os eventos dragenter e dragover devem ser

programados para evitar o comportamento padrã o que impede a queda.
■■ O objeto DataTransfer fornece acesso à lista de arquivos descartados.
■■ O evento drop fornece acesso ao objeto DataTransfer.
Revisão da aula
1. Para quais eventos você precisa se inscrever para arrastar e soltar arquivos de
programa? (Escolha todas as opçõ es aplicá veis)
A. dragstart
B. arrastar
C. dragend
D. dragenter
E. dragover
F. dragleave
G. drop
2. Qual das seguintes nã o é uma propriedade no objeto Arquivo?
A. nome
B. caminho
Tipo C.
D. tamanho
Pratica exercícios

concluídos podem ser instalados na pasta Exercícios prá ticos que é fornecida com o
Exercício 1: Crie um jogo de embaralhamento numérico
Neste exercício, você aplica seu conhecimento de arrastar e soltar criando um jogo de
embaralhamento numérico. O jogo consiste em um tabuleiro de jogo que possui quatro
linhas e quatro colunas, proporcionando assim dezesseis quadrados nos quais pode existir
um ladrilho deslizante que possui um nú mero. Quinze dos quadrados sã o ocupados por
ladrilhos numerados. Isso deixa um quadrado vazio que pode ser usado para mover as
peças.
O objetivo é organizar os ladrilhos em ordem numérica arrastando os ladrilhos para o

espaço vazio depois de serem embaralhados. Os ú nicos ladrilhos que podem ser arrastados
para o espaço vazio sã o os ladrilhos horizontais y ou verticais y adjacentes ao espaço vazio.
No Exercício 1, você cria o tabuleiro do jogo e as peças criando a pá gina da web, o CSS
arquivo e a primeira parte do arquivo JavaScript. No Exercício 2, “Adicionar arrastar e

soltar ao jogo,”
você adiciona a funcionalidade de arrastar e soltar.
Applicati on denominado NumberScramble .
2. Adicione um arquivo HTML ao projeto. Nomeie o arquivo default.html .
3. Adicione um arquivo CSS ao projeto. Nomeie o arquivo como default.css .
4. Adicione uma nova pasta chamada Scripts ao projeto.
do projeto e escolhendo Gerenciar pacotes NuGet. Clique em Online e digite jQuery nos
critérios de pesquisa. Quando a biblioteca jQuery for exibida, clique no botã o Instalar.
7. No arquivo default.html, adicione uma referência aos arquivos default.css, biblioteca

8. Adicione o título Number Scramble à sua pá gina.
<! DOCTYPE html>
<head>
<title> Number Scramble </title>

</head>
<body>
</body>
</ htm l>
9. No elemento < body >, adicione um elemento < div > cujo id é

mensagem. No elemento < div >, adicione a mensagem padrã o, Atualizar para
embaralhar .
10. Apó s o elemento < div > da mensagem , adicione outro elemento < div > cujo id é

gameBoard.
O conteú do do tabuleiro do jogo é preenchido a partir do JavaScript. O default.html

preenchido deve ter a seguinte aparência.
<! DOCTYPE html>
<head>
<title> Number Scramble </title>
</head>
<body>
<div id = "message">
Atualize para embaralhar.
</div>
<div id = "gameBoard">
</div>
</body>
</html>
11. No arquivo default.css, adicione as seguintes regras de estilo para o tabuleiro do jogo, a
mensagem e os quadrados e ladrilhos que devem ser criados de forma programá tica.
corpo {
família da fonte: Arial, Helvetica, sans-serif;
#gameBoard {
largura: 345px;
altura: 345px;
#mensagem {
cor: limã o;

largura: 345px;
altura: 80px;
.tile {
largura: 80px;
altura: 80px;
cor de fundo: cinza;
cor branca;
.quadrado {
borda: só lida;
largura: 80px;
altura: 80px;
flutuar: esquerda;
.arrastados {
cor de fundo: vermelho;

}
12. No arquivo default.js, adicione uma referência à biblioteca jQuery. Declare

uma variá vel squareCount e defina-a como 16. Declare uma variá vel emptySquare
da seguinte maneira.
var squareCount = 16
var emptySquare;
13. No arquivo default.js, adicione a funçã o documento pronto. Na funçã o de documento

pronto, adicione uma instruçã o para instruir o jQuery a copiar a propriedade dataTransfer
para seu invó lucro de evento quando o evento tiver essa propriedade. Adicione uma
chamada para uma funçã o createBoard e adicione uma chamada para uma funçã o addTiles.
Essas funçõ es sã o criadas a seguir. Seu có digo deve ser semelhante ao seguinte.
var emptySquare;
createBoard ();
addTiles ();
});
14. Na funçã o de documento pronto, adicione uma funçã o createBoard. Nesta funçã o,

adicione um loop for que executa um loop enquanto a variá vel de loop é menor
que a variá vel squareCount . No loop for, use jQuery para criar um elemento < div > cujo id é
quadrado mais o valor da variá vel de loop . Adicione um atributo data-square e atribua
o valor da variá vel de loop . Adicione o atributo de classe e atribua a classe
quadrada. Acrescente o quadrado recém-criado ao tabuleiro de jogo.
function createBoard () {
para (var i = 0; i <squareCount; i ++) {
var $ square = $ ('<div id = "square' + i + '" data-square = "'
+ i + '"class =" square "> </div>');
$ square.appendTo ($ ('# gameBoard'));
15. Na funçã o createBoard, adicione uma funçã o addTiles. Nesta funçã o, adicione uma
instruçã o para atribuir o valor da variá vel squareCount menos um
à variá vel emptySquare . Adicione um loop for que efetua loops
enquanto a variá vel do loop é menor que o valor emptySquare . No loop for, use jQuery para
obter uma referência ao quadrado que corresponde à variá vel do loop . Use jQuery para
criar um elemento < div > cujo id é tile mais o valor da variá vel de loop . Adicione
um atributo de empena de arraste e defina seu valor como true . Adicione o atributo de
classe e atribua a classe de bloco. No conteú do deste elemento < div >, coloque o valor
da variá vel de loop mais um. Acrescente o ladrilho recém-criado ao quadrado
correspondente.
function addTiles () {
emptySquare = squareCount - 1;
para (var i = 0; i <quadrado vazio; i ++) {
var $ square = $ ('# square' + i);
var $ tile = $ ('<div draggable = "true" id = "tile' + i
+ '"class =" tile ">' + (i + 1) + '</div>'); $ tile.a ppendTo ($ square);
}

16. No Solution Explorer, clique com o botã o direito do mouse no arquivo default.html e
escolha Definir como pá gina inicial.
17. Teste seu trabalho pressionando F5 para executar o site. Você deve ver a pá gina
default.html conforme mostrado na Figura 13-7.
FIGURA 13-7 A pá gina de embaralhamento do nú mero renderizada
Neste ponto, você tem a mensagem padrã o e o tabuleiro de jogo renderizado com as peças.
Nã o há funcionalidade de arrastar e soltar e os nú meros nã o se misturam.
Neste exercício, você aplica seu conhecimento de arrastar e soltar adicionando có digo ao
jogo de embaralhamento de nú mero criado no Exercício 1, “Criar um jogo de
embaralhamento de nú mero”, para oferecer suporte à funcionalidade de arrastar e soltar.
1. Inicie o Visual Studio Express 2012 for Web. Abra o projeto NumberScramble.
2. No arquivo default.js , adicione o có digo a seguir à funçã o de documento pronto para
assinar os eventos dragstart, dragend, dragenter, dragover e drop.

createBoard ();
addTiles ();
$ ('# gameBoard') .on ('dragstart', dragStarted);
$ ('# gameBoard'). on ('dragend', dragEnded);
$ ('# gameBoard'). on ('dragenter', preventDefault);
$ ('# gameBoard'). on ('dragover', preventDefault); $ ('# gameBoard'). on ('drop',

drop);
});
3. Na parte inferior do arquivo default.js, adicione a funçã o dragStarted que recebe um

parâ metro de evento e. Nesta funçã o, crie uma variá vel $ tile que é um wrapper jQuery para
e.target.
Use $ tile para adicionar a classe CSS arrastada ao tile. Declare

uma SourceLocation v ariá vel e atribuir-lhe o valor do atributo de dados quadrados de pai
do azulejo (praça).
O sourceLocation é o nú mero do quadrado em que o bloco está .
4. Atribua o valor da string de sourceLocation ao objeto DataTransfer e defina

a propriedade effectAl devida para mover. Seu có digo deve ser semelhante ao seguinte.
function dragStarted (e) {
var $ tile = $ (e.target)
$ tile.addClass ('arrastado');
var sourceLocation = $ tile.parent (). data ('quadrado');
e.dataTransfer.setData ('texto', sourceLocation.toString ());
e.dataTransfer.effectAllowed = 'mover';
5. Apó s a funçã o dragStarted, adicione uma funçã o dragEnded. Nesta funçã o, use jQuery
para remover a classe CSS arrastada do bloco.
function dragEnded (e) {
$ (e.target) .removeClass ('arrastado');
6. Na funçã o dragEnded, adicione uma funçã o preventDefault que usa um parâ metro de
evento e. Nesta funçã o, adicione uma instruçã o para chamar o método preventDefault on e.
7. Na funçã o preventDefault, adicione uma funçã o drop que leva um parâ metro de evento
e. Nesta funçã o, adicione uma instruçã o para criar um wrapper jQuery para e.target e
atribua-o a uma variá vel $ square . Adicione uma instruçã o if para verificar se o alvo da
queda é um quadrado, verificando se $ square tem a classe CSS chamada de
quadrado. Nesse caso, use jQuery para adicionar có digo que lê o atributo data-square $
sq uare e coloque o valor em uma variá vel destinationLocation . Compare o valor
de emptySquare com o valor do local de destino e, se eles nã o forem iguais, saia da funçã o
de soltar usando uma instruçã o de retorno.
8. Adicione o có digo para obter os dados do objeto DataTransfer. Atribua-o a

uma variá vel sourceLocation e, em seguida, chame a funçã o moveTile que você criará em
seguida, passando a variá vel sourceLocation .
queda de funçã o (e) {
var $ square = $ (e.target);
if ($ square.hasClass ('square')) {
var destinationLocation = $ square. dados ('quadrado');
if (emptySquare! = destinationLocation) return;

var sourceLocation = Number (e.dataTransfer.getData ('text'));
moveTile (sourceLocation);
9. Na funçã o de soltar, adicione uma funçã o moveTile que usa o parâ metro
sourceLocation. Em esta funçã o, adicionar uma declaraçã o para criar
uma distância variá vel que está definido para o parâ metro SourceLocation menos
o emptySquare valor.
10. Adicione uma declaraçã o para tornar a distâ ncia um valor positivo, se for
negativa. Compare a distâ ncia com 1 ou 4, em que o valor de 1 indica uma queda de um
quadrado adjacente y horizontal e um valor de 4 indica uma queda de um quadrado
adjacente vertical y. Se a distâ ncia for igual a 1 ou 4, chame a funçã o
swapTileAndEmptySquare com o parâ metro sourceLocation.
function moveTile (sourceLocation) {
var distance = sourceLocation - emptySquare;
se (distâ ncia <0) distâ ncia = - (distâ ncia);
if (distâ ncia == 1 || distâ ncia == 4) {
swapTileAndEmptySquare (sourceLocation);
11 . Na funçã o moveTile, adicione uma funçã o swapTileAndEmptySquare que usa o

parâ metro sourceLocation. Nesta funçã o, use jQuery para recuperar o bloco do bloco no
parâ metro sourceLocation e atribua o valor a uma variá vel $ draggedItem . U se jQuery
para destacar o item arrastado do Document Object Model (DOM). Crie uma variá vel $
target e atribua o quadrado ao local emptySquare. Use jQuery para anexar o item arrastado
ao destino.
12. Atribua sourceLocation a emptySquare.
A seguir está o arquivo default.js completo.

var emptySquare;
createBoard ();
addTiles ();
$ ('# gameBoard'). on ('dragsta rt', dragStarted);
$ ('# gameBoard'). on ('dragenter', preventDefault); $ ('# gameBoard'). on ('dragover',

preventDefault);
$ ('# gameBoard'). on ('drop', drop);
});
var $ square = $ ('<div id = "square' + i + '" data-square = "' + i
+ '"class =" square "> </div>');
+ '"class =" tile ">' + (i + 1) + '</div>'); $ tile.appendTo ($ square);
function dragStarted (e ) {
$ (e.target) .remo veClass ('arrastado');

var destinationLocation = $ square.data ('square');
var distance = sourceLo cation - emptySquare;

}
function swapTileAndEmptySquare (sourceLocation) {
var $ draggedItem = $ ('# square' + sourceLocation) .children (); $

draggedItem.detach ();
var $ target = $ ('# square' + emptySquare);
$ draggedItem.appendTo ($ target);
emptySquare = sourceLocation;
13. Teste seu trabalho pressionando F5 para executar o site.
Você deve ser capaz de mover os ladrilhos arrastando e soltando um ladrilho no espaço
vazio. A pá gina default.html apó s mover alguns blocos é mostrada na Figura 13-8.
FIGURA 13-8 A pá gina de embaralhamento do nú mero renderizada apó s mover alguns

blocos Exercício 3: Adicionar embaralhamento e verificação do vencedor
Neste exercício, você aplica seu conhecimento de arrastar e soltar adicionando có digo ao
jogo de embaralhamento de nú meros criado no Exercício 2 para embaralhar os ladrilhos
quando a pá gina é renderizada e verificar um vencedor apó s cada arrastar e soltar.
1. Inicie o Visual Studio Express 2012 for Web. Abra o projeto NumberScramble.
2. No arquivo default.js, adicione o có digo a seguir à funçã o de documento pronto para
chamar uma funçã o de embaralhamento que você criará a seguir.
5 30 CAPÍTULO 13 Arrastar e soltar
createBoard ();
addTiles ();
$ ('# gameBoard'). on ('dragstart', dragStarted);
$ ('# gameBoard'). on ('dragenter', pr eventDefault);
$ ('# gameBoard'). on ('dragover', preventDefault);
passeio();
});
3. Na parte inferior do arquivo default.js, adicione a seguinte funçã o de embaralhamento.
function scramble () {
para (var i = 0; i <128; i ++) {
v ar random = Math.random ()
var sourceLocation;
if (aleató rio <0,5) {
var column = emptySquare% 4
if (coluna == 0 || (aleató rio <0,25 && coluna! = 3)) {
sourceLocation = emptySquare + 1;
}
outro {
sourceLocation = emptySquare - 1;
outro {
var row = Math.floor (emptySquare / 4)
if (linha == 0 || (aleató rio <0,75 && linha! = 3)) {
outro {
A funçã o de embaralhamento executa um loop de 128 movimentos aleató rios para

embaralhar os ladrilhos. Cada vez que o loop é executado, um novo nú mero aleató rio é
criado e, com base em seu valor, um bloco adjacente é movido para o quadrado vazio .
4. Na funçã o de soltar, adicione o có digo para chamar a funçã o checkForWinner que você
criará a seguir.
var destinationLocation = $ s quare.data ('quadrado');

checkForWinner ();
5. Na parte inferior do arquivo default.js, adicione uma funçã o checkForWinner. Nesta

funçã o, adicione uma declaraçã o para verificar se o quadrado vazio está no canto inferior
direito. Adicione um loop para recuperar cada ladrilho e verifique seu quadrado pai para
ver se o ladrilho está no quadrado correto. Caso contrá rio, saia da funçã o checkForWinner
usando uma instruçã o return. Se você chegar ao final da funçã o, altere a mensagem para
“Vencedor!”
function checkForWinner () {
if (emptySquare ! = squareCount - 1) return;
if ($ ('# tile' + i) .parent (). attr ('id')! = 'quadrado' + i) return;
$ ('# mensagem'). html ('Vencedor!');
A seguir está o arquivo default.js completo.
/// <reference path = "jquery-1.8.3.j s" />
var emptySquare;

createBoard ();
addTiles ();
$ ('# gameBoard'). on ('dragstart', dragStarted);
$ ('# gameBoard ') .on ('dragenter', preventDefault);
$ ('# gameBoard'). on ('dragover', preventDefault);
passeio();
});
var $ square = $ ('<div id = "square' + i + '" data-square = "' + i
+ '"class =" square "> </div>');

+ '"class =" tile ">' + (i + 1) + '</div>'); $ tile.appendTo ($ square);
function dragStarted (e) {
$ (e.target) .remove Class ('arrastado');
var destinationLocation = $ square.data ('square');
checkForWinner ();
var distance = sourceLocation - emptySquare;
function swapTileAndEmptySquare (sourceLocation) {
var $ draggedItem = $ ('# square' + sourceLocation) .children ();
$ draggedItem.detach ();
var $ target = $ ('# square' + emptySquare);
$ draggedItem.appendTo ($ target);
emptySquare = sourceLocation;
function scramble () {
para (var i = 0; i <128; i ++) {
var random = Math.random ()
var sourceLocation;
if (aleató rio <0,5) {
var column = emptySquare% 4
if (coluna == 0 || (aleató rio <0,25 && coluna! = 3)) {
outro {
Prá tica de exercício s CAPÍTULO 13 533
outro {
var row = Math.floor (emptySquare / 4)
if (linha == 0 || (aleató rio <0,75 && linha! = 3)) {
outro {
function checkForWinner () {
if (emptySquare! = squareCount - 1) return;
if ($ ('# tile' + i) .parent (). attr ('id')! = 'quadrado' + i) return;
$ ('# mensagem'). html ('Vencedor!');
Quando a pá gina é exibida, os ladrilhos devem ser embaralhados. Você deve ser capaz de
mover os ladrilhos arrastando e soltando um ladrilho no espaço vazio. Quando terminar de
classificar os ladrilhos, você deverá ver a mensagem vencedora, conforme mostrado na
Figura 13-9.
FIGURA 13-9 A pá gina de embaralhamento do nú mero renderizada apó s vencer 534

CAPÍTULO 13 Arrastar e soltar
capítulo.
■■ Exercício 1 Aprenda mais sobre arrastar e soltar criando um aplicativo que permite ao
usuá rio fazer seleçõ es arrastando e soltando opçõ es.
■■ Exercício 2 Aprenda mais sobre como arrastar e soltar arquivos de ping criando um

aplicativo que permite ao usuá rio selecionar arrastar e soltar arquivos de imagem que você
renderiza na pá gina.
Respostas
Lição 1
1. Respostas corretas: B e E
A. Incorreto: O evento dragstart dispara apenas quando você inicia uma operaçã o de
arrastar.
B. Correto: O evento de arrastar dispara muitas vezes enquanto você arrasta um item.
C. Incorreto: O evento dragend dispara apenas quando você termina uma operaçã o de
arrastar.
D. Incorreto: O evento dragenter dispara apenas quando você insere um destino de soltar.
E. Correto: O evento dragover é acionado continuamente conforme você arrasta um item

sobre o alvo do anú ncio .
F. Incorreto: O evento dragleave dispara apenas quando você deixa um alvo de soltar.
G. Incorreto: O evento de soltar é acionado apenas quando você solta o item que está
sendo arrastado.
2. Respostas corretas: A, B e C
A. Correto: O evento dragstart dispara em associaçã o com o item de arrastar.
B. Correto: O evento de arrastar dispara em associaçã o com o item de arrastar.

C. Correto: O evento dragend dispara em associaçã o com o item de arrastar.
D. Incorreto: O evento dragenter dispara em associaçã o com o destino de soltar.
E. Incorreto: O evento dragover dispara em associaçã o com o destino de soltar.
F. Incorreto: O evento dragleave dispara em associaçã o com o alvo de soltar.
G. Incorreto: O evento de soltar dispara em associaçã o com o alvo de soltar.
A. Incorreto: Embora esses tipos de dados possam ser passados, você pode passar
qualquer objeto que possa ser representado como uma string ou URL.
B. Incorreto: embora URLs possam ser passados, você pode passar qualquer objeto que
possa ser representado por uma string ou URL.
C. Incorreto: Embora esses tipos de dados possam ser passados, você pode passar
qualquer objeto que possa ser representado como uma string ou URL.
D. Correto: Você pode passar qualquer objeto que pode ser representado como uma string
ou URL.
L i ç ã o 2
1. Respostas corretas: D, E e G
A. Incorreto: Nenhum evento dragstart está associado ao arrastar de arquivos.
B. Incorreto: Nenhum evento de arrastar está associado ao arrastar de arquivos.
C. Incorreto: Nenhum dragend está associado ao arrastar de arquivos.
D. Correto: O evento de arrastar dispara quando você insere um destino de soltar, e sua

operaçã o padrã o deve ser evitada.
E. Correto: O evento dragover dispara continuamente conforme você arrasta sobre um

alvo de soltar, e sua operaçã o padrã o deve ser evitada.
F. Incorreto: O dragleave dispara apenas quando você deixa um alvo para soltar e nã o é

necessá rio para soltar arquivos.
G. Correto: O evento de soltar é acionado apenas quando você solta o item em um destino
de soltar e é necessá rio para processar os arquivos soltos.
A. Incorreto: A propriedade name existe no objeto File.
B. Correto: A propriedade path nã o existe no objeto File.
C. Incorreto: A propriedade type existe no objeto File.
D. Incorreto: A propriedade size existe no objeto File.
Respostas CHAPT ER 13 537
CAPÍTULO 1 4
Fazendo seu HTML
ciente de localização
A interface de programaçã o de aplicativo (API) de geolocalizaçã o fornece uma interface

com informaçõ es de localizaçã o do dispositivo, como latitude e longitude; você pode usar a
API de geolocalizaçã o para tornar seus aplicativos cientes da localizaçã o. Imagine criar um
aplicativo que permita ao usuá rio inserir informaçõ es favoritas, como onde tomar um café
ou comprar um computador. Conforme o usuá rio se aproxima de um local favorito, como
uma cafeteria ou loja de informá tica, o dispositivo exibe um mapa com a localizaçã o. Talvez
a cafeteria pudesse fornecer incentivos para motivar o usuá rio a parar para uma xícara de
café rá pido.
A API é genérica o suficiente para fazer interface com muitas fontes de informaçõ es de
localizaçã o subjacentes, como o Sistema de Posicionamento Global (GPS) e locais inferidos
de sinais de rede , como endereço IP, identificaçã o por radiofrequência (RFID), Wi-Fi e
Bluetooth MAC
endereços e IDs cel ular e de entrada do usuá rio. Nã o há garantia de que a API retorne a
localizaçã o real do dispositivo, e a precisã o pode variar amplamente. Cada vez mais,
os dispositivos mó veis sã o fornecidos com GPS, além de acelerô metro e bú ssola. Esses
sensores podem fornecer grande precisã o para a API de geolocalizaçã o.
A API de geolocalizaçã o está sendo padronizada pelo Grupo de Trabalho de Geolocalizaçã o,

que é separado do Grupo HTML5 Wor king. Portanto, a API de geolocalizaçã o nã o faz parte
do HTML5, embora o suporte para geolocalizaçã o esteja sendo adicionado aos navegadores
em paralelo com o HTML5.
A API foi projetada para permitir solicitaçõ es de posiçã o instantâ neas e atualizaçõ es de
posiçã o repetidas. A Liçã o 1, “ Posicionamento bá sico”, cobre consultas ú nicas; A Liçã o 2,
“Posicionamento monitorado”, aborda atualizaçõ es de posiçã o repetidas.

■■ Liçã o 1: Posicionamento bá sico 540
■■ Liçã o 2: Posicionamento monitorado 546
539
Para completar este bo ok, você deve ter algum conhecimento de desenvolvimento
Lição 1: posicionamento básico
O objeto Geolocation pode ser acessado usando a variá vel global navigator.geolocation . A

maioria dos navegadores oferece suporte à API de geolocalizaçã o e o có digo a seguir pode
ser usado para determinar se o navegador do usuá rio oferece suporte.
function supportedGeolocation () {
retornar 'geolocalizaçã o' no navegador;
Este có digo verifica se uma propriedade de geolocalizaçã o está no objeto que é

referenciado pela variá vel global do navegador . Se a propriedade existir, ela fará referência
a um objeto Geolocation.
■■ Compreenda o objeto de geolocalizaçã o.
■■ Recupere a posiçã o atual.
■■ Lidar com erros de posicionamento.
Referência de objeto de geolocalização
O objeto Geolocation possui uma API simples com os seguintes métodos.
■■ getCurrentPosition () Método que aceita uma chamada de sucesso, uma chamada de

erro e um array de opçõ es e chama a chamada de sucesso com a posiçã o atual
■■ watchPosition () Método que aceita uma chamada de sucesso, uma chamada de erro
e um conjunto de opçõ es e continua a chamar a chamada de sucesso com a posiçã o atual
■■ Método clearWatch () que interrompe a chamada contínua que foi iniciada usando o

método watchPosition
Observe que os métodos getCurrentPosition e watchPosition têm os mesmos parâ metros.
O objeto Position possui as seguintes propriedades.
■■ coords Obtém um objeto Coordinates que contém informaçõ es sobre a posiçã o atual.
540 CAPÍTULO 14 Tornando seu HTML ciente de localizaçã o
■■ timestamp Fornece a hora em que o objeto Coordinates foi criado. O formato do

carimbo de data / hora é de milissegundos desde o início da época do Unix e pode ser
convertido em uma data e hora regulares usando o có digo a seguir.
var dateTime = new Date (timeStamp) .toLocale String ();
Ao focar na propriedade coords que obtém um objeto Coordinates, o objeto Coordinates

contém as seguintes informaçõ es sobre a localizaçã o atual.
■■ latitude Obtém a latitude em graus decimais
■■ longitude Obtém a longitude em graus decimais
■■ altitude Obtém a altura em metros
■■ precisão Obtém a precisã o das coordenadas em metros
■■ altitudeAccuracy Obtém a precisã o da altitude em metros
■■ rumo Obtém a direçã o da viagem em graus
■■ velocidade Obtém a velocidade de viagem em metros / segundo
O hardware do dispositivo é o fator determinante em relaçã o à s propriedades

retornadas. Por exemplo, com um GPS, a maioria das propriedades sã o preenchidas, mas se
a localizaçã o for determinada usando seu endereço IP, você pode estar perdendo altitude,
direçã o e informaçõ es relacionadas à velocidade .
Recuperando a posição atual
É fá cil recuperar a posiçã o atual usando o método getCurrentPosition do objeto

Geolocation. No mínimo, você precisa passar um método de retorno de chamada para
receber um objeto Position, que possui coord se propriedades de carimbo de data /
hora. Para os exemplos subsequentes, considere a seguinte pá gina da web.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "GeoLocation.css" rel = "stylesheet" />
<script src = "Scripts / jquery-1 .8.3.js"> </script>
<script src = "Scripts / GeoLocation.js"> </script>
</head>
<body>
</div>
</body>
</html>
A pá gina da web tem uma referência à folha de estilo Geolocation.css que está vazia no
momento, à biblioteca jQuery e ao arquivo JavaScript Geolocation.js, que está vazio no
momento. O elemento < body > contém apenas um elemento < div > cujo id é mensagem.
O exemplo de có digo a seguir demonstra uma chamada simples para o método

getCurrentPosition.
Liçã o 1: Posicionamento bá sico CAPÍTULO 14 541

getLocation ();
});
function showMessage (message) {
function getLocation () {
if (supportedGeolocation ()) {
navigator.geolocation.getCurrentPosition (showPosition);
outro {
showMessage ("Geolocalizaçã o nã o suportada por este navegador.");
}
}
function showPosition (position) {
var datetime = new Date (position.timestamp) .toLocaleString ();
showMessage ("Latitude:" + position.coords.latitude + "<br />"
+ "Longitude:" + position.coords.longitude + "<br />"
+ "Timestamp:" + datetime);
A funçã o de documento pronto chama a funçã o getLocation. Na funçã o getLocation, uma

instruçã o if determina se deve tentar chamar o método getCurrentPosition chamando a
funçã o supportedGeolocation . A funçã o supportedGeolocation verifica se
a variá vel global do navegador tem uma propriedade de geolocalizaçã o.
Quando o método getCurrentPosition é chamado, a funçã o showPosition é passada. A

funçã o showPosition é chamada quando as informaçõ es de posiçã o sã o obtidas com
sucesso.
Quando a funçã o showPosition é chamada, é passado um objeto Position que contém uma
propriedade coords e times tamp. A Figura 14-1 mostra o resultado renderizado.
FIGURA 14-1 A posiçã o atual renderizada e o carimbo de data / hora convertido 542

CAPÍTULO 14 Tornando seu HTML ciente de localizaçã o
Você deve lidar com erros ao chamar métodos no objeto Geolocation. Você lida com erros
adicionando outro parâ metro de retorno de chamada à chamada, de modo que o primeiro
parâ metro seja o retorno de chamada com sucesso e o segundo parâ metro seja o retorno
de chamada de erro.
O có digo a seguir demonstra o uso do erro de retorno ao chamar

o método getCurr entPosition.
getLocation ();
});
navigator.geolocation.getCurrentPosition (showPosition, showError);
outro {
var datetime = new Date (position.timestamp) .toLocaleString ();
showMessage ("Latitude:" + position.coords.latitude + "<br />"
}

function showError (error) {
switch (error.code) {
erro de caso.PERMISSION_DENIED:
showMessge (" Solicitação de acesso de geolocalização negada

pelo usuário ."); intervalo;
erro de caso.POSITION_UNAVAILABLE:
showMessage ("Informações de localização indisponíveis."); intervalo;
erro de caso. TIMEOUT:
showMessage ("Obter solicitação de localização do usuário expirou."); intervalo;
erro de caso.UNKNOWN_ERROR:
showMessage ("Ocorreu um erro desconhecido."); intervalo;

Neste exemplo, a funçã o showError é chamada se houver um erro ao chamar o método
getCurrentPosition. Um objeto de erro é passado para a funçã o showError. Este exemplo
tenta determinar a causa do erro e exibir uma mensagem significativa .
Abordando privacidade
Se uma pá gina da web pode obter sua posiçã o atual, isso é uma invasã o à sua
privacidade? Sim, e você receberá um aviso que diz: “ DomainName deseja rastrear sua
localizaçã o física.” Nesse ponto, você pode decidir se deseja que seu local seja recuperado
uma vez, o tempo todo ou nunca. A Figura 14-2 mostra o prompt.
FIGURA 14-2 A solicitaçã o de rastreamento de localizaçã o
Especificando opções
O terceiro parâ metro que você pode passar para o método getCurrentPosition sã o as
opçõ es, que é um objeto Pos itionOptions que fornece as seguintes propriedades opcionais.
■■ enableHighAccuracy Isso especifica que o melhor resultado possível é solicitado

mesmo que leve mais tempo. O padrã o é falso.
■■ tempo limite Especifica o tempo limite em milissegundos que o navegador aguardará

por uma resposta. O padrã o é -1, o que significa que nã o há tempo limite.

■■ maximumAge Especifica que um local em cache é aceitá vel, desde que nã o seja mais
antigo do que o milissegundo especificado . O padrã o é 0, o que significa que um local em
cache nã o é usado.
A seguir, um exemplo de como passar as opçõ es para o método getCurrentPosition.
var options = {
enableHighAccuracy: true ,
tempo limite: 3000,
maximumAge: 20000
};
navigator.geolocation.getCurrentPosition (showPosition, showError, options);
outro {
■■ O que você deve fazer para evitar que os sites recuperem sua localização sem o
seu conhecimento?
■■ Quando você visita um site que solicita sua localização, um pop-up é exibido e
você deve conceder permissão explicitamente ao site antes que sua localização possa
ser recuperada.
Tenha cuidado ao selecionar Permitir sempre porque é fácil esquecer que
você selecionou.
Resumo da lição
■■ A API de geolocalizaçã o fornece uma interface com informaçõ es de localizaçã o do

dispositivo.
■■ Dependendo da fonte de localizaçã o, você pode receber informaçõ es de latitude,

longitude, altitude, rumo, velocidade e precisã o.
■■ A API de geolocalizaçã o pode ser acessada usando a propriedade de geolocalizaçã o

no navigat ou variá vel global.
■■ O objeto Geolocation tem um método getCurrentPosition que é uma chamada ú nica

para obter a localizaçã o atual.
■■ O método getCurrentPosition recebe uma chamada de sucesso, uma chamada de erro e

um parâ metro de opçõ es.
Revisão da aula
1. Qual método obtém sua localizaçã o atual uma vez do objeto Geolocation?
A. watchPosition ()
B. watchLocation ()
C. getCurrentPosition ()
D. getCurrentLocation ()
2. Qual dos seguintes nã o é um parâ metro vá lido no método getCurrentPosition?
A. Funçã o de retorno de chamada de erro
B. Objeto de opçõ es de posiçã o
C. Funçã o de retorno de chamada de sucesso

D. Use apenas GPS
Lição 2: Posicionamento monitorado
Se você estivesse escrevendo um aplicativo que plotasse sua localizaçã o atual em um mapa,
seria mais eficiente permitir que a API de Geolocalizaçã o avisasse quando a localizaçã o
muda do que escrever um có digo que continua a pesquisar a localizaçã o atual. Esse é o foco
desta liçã o.
■■ Use o objeto Geolocation para observar a posiçã o atual.
■■ Calcular a distâ ncia entre dois pontos de amostra.
Você pode usar o método watchPosition do objeto Geolocation para recuperar atualizaçõ es
de posiçã o contínuas. Este método usa os mesmos parâ metros do método
getCurrentPosition. A diferença é que, quando você chama watchPosition uma vez, ele
continua chamando a funçã o de sucesso até que você chame o método clearWatch para
parar de monitorar sua posiçã o.
O método watchPosition retorna um id, que é passado ao método clearWatch para encerrar
o monitoramento. Neste exemplo, a pá gina da web é modificada com a adiçã o de um botã o
para iniciar o monitoramento de localizaçã o e outro botã o para encerrar o monitoramento
de localizaçã o, como a seguir.
<! DOCTYPE html>
<head>
<title> </title>
<link href = "GeoLocatio n.css" rel = "stylesheet" />
<script src = "Scripts / GeoLocation.js"> </script>
</head>
<body>
</div>
<button id = "startMonitoring"> Iniciar monitoramento </button>
<button id = "stopMonitoring"> Parar monitoramento </button>
</body>
</html>
Com os botõ es adicionados e a mudança para usar o método watchPosition, o seguinte é o

JavaScript atualizado; as mudanças notá veis estã o em negrito.
var watchId = 0;
$ (d ocument) .ready (function () {
$ ('# startMonitoring'). on ('click', getLocation);
$ ('# stopMonitoring'). on ('click', endWatch);
});
}

var options = {
enableHighAccuracy: true
};
watchId = navigator.geolocation.watchPosition (showPosition, showError, opções);
outro {
function endWatch () {
if (watchId! = 0) {
navigator.geolocation.clearWatch (watchId);
watchId = 0;
showMessage ("Monitoramento encerrado.");
Liçã o 2: Posicionamento monitorado CAPÍTULO 14 547

var datetime = new Date (position.timestamp) .toLocaleString (); showMessage ("Latitude:"
+ position.coords.latitude + "<br />"
showMessge ("Solicitaçã o de acesso de geolocalizaçã o negada pelo usuá rio."); intervalo;
erro de caso.POSITION_UNAVAILABLE:
showMessage ("Informaçõ es de localizaçã o indisponíveis.");
intervalo;
showMessage ("Obter solicitaçã o de localizaçã o do usuá rio expirou.");
intervalo;
showMessage ("Ocorreu um erro desconhecido.");
intervalo;
Este có digo nã o requer muitas mudanças para obter o benefício do monitoramento

contínuo. A grande mudança é a adiçã o da funçã o endWatch que usa a variá vel global
watchId para interromper o monitoramento de localizaçã o.
Calculando a distância entre as amostras

Quando você monitora continuamente a localizaçã o do usuá rio, pode desejar calcular a
distâ ncia entre as amostras.
Calcular a distâ ncia percorrida é relativamente fá cil se você estiver viajando em um aviã o
plano.
Como as pessoas estã o viajando pela Terra, você precisa usar a geometria esférica para
calcular a distâ ncia percorrida. Os re vá rias fó rmulas para este cá lculo, com base
principalmente na precisã o. Além disso, todos os cá lculos baseiam-se no fato de a Terra ser
perfeitamente redonda, sem colinas e vales.
Este exemplo mostra a implementaçã o da fó rmula Haversine para calcular a diferença.
Essa fó rmula é um pouco mais complexa do que outras fó rmulas, como a lei esférica dos
cossenos, mas fornece melhor precisã o. O seguinte é uma funçã o getDistance usando a
fó rmula haversine.
function getDistance (lat1, lon1, lat2, lon2) {
var earthRa dius = 3959; // milhas
var latRadians = getRadians (lat2 - lat1);
var lonRadians = getRadians (lon2 - lon1);
var a = Math.sin (latRadians / 2) * Math.sin (latRadians / 2) +
Math.cos (getRadians (lat1)) * Math.cos (getRadians (lat2)) *
Math.sin (lonRadians / 2) * Math.sin (lonRadians / 2);
var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1 - a));
var distance = earthRadius * c;
distâ ncia de retorno;
function getRadians (latlongDistance) {

return latlongDistance * Math.PI / 180;
■■ Qual método monitora sua localização?
■■ O método watchPosition
Resumo da lição
■■ O método watchPosition monitora sua localizaçã o e usa os mesmos parâ metros que
o método getCurrent Position.
■■ O método watchPosition retorna um id que é usado quando você deseja interromper o

monitoramento.
■■ O método clearWatch interrompe o monitoramento.
■■ O método clearWatch requer um ID de reló gio.
Revisão da aula

1. Qual método monitora continuamente sua localizaçã o atual a partir do objeto

Geolocation?
A. watchPosition ()
B. watchLocation ()
C. getCurrentPosition ()
D. getCurrentLocation ()
2. Qual das seguintes fó rmulas você pode usar para calcular a distâ ncia entre
duas amostras?
A. haversine
B. Teorema de Pitá goras

C. quadrá tico
D. hiperbó lico
Liçã o 2: Posicionamento monitorado CAPÍTULO 14 549
Pratica exercícios

concluídos podem ser instalados a partir da pasta Exercícios de Prá tica que é fornecida com
o conteú do complementar.
Exercício 1: Mapeie suas posições atuais
Neste exercício, você aplica seu conhecimento da API de geolocalizaçã o criando um

aplicativo da web que recupera sua localizaçã o atual e exibe um mapa com sua
localizaçã o. Este exercício usa a API do Google Maps porque você nã o precisa de uma conta
para usá -la, mas também pode usar a API de mapas do Bing. A API do Bing é diferente
e requer que você obtenha uma conta de desenvolvedor, mas é fá cil de implementar.
Application chamado PositionMapper .
2. Adicione um arquivo HTML ao projeto. Nomeie o arquivo default.html .
3. Adicione um arquivo CSS ao projeto. Nomeie o arquivo como default.css .
4. Adicionar uma pasta de cal ed Scripts para o projeto.
do projeto. Escolha Gerenciar Pacotes NuGet. Clique em Online e digite jQuery nos critérios
7. No arquivo default.html, adicione uma referência aos arquivos default.css, biblioteca

8. Acima da referência jQuery, adicione a seguinte referência à API do Google Maps.
<script src = "http://maps.google.com/maps/api/js?sensor=false"> </script> 9. Adicione

um Mapeador de posição denominado título à sua pá gina.

<! DOCTYPE html>
<head>
<title> Mapeador de posiçã o </title>
<script src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>
<body>
</body>
</html>
10. No elemento < body >, adicione um elemento < div > cujo id é map.
11. No elemento < div >, adicione outro elemento < div > cujo id é mensagem.
<! DOCTYPE html>
<htm l xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Mapeador de posiçã o </title>
<script src = "http://maps.google.com/maps/api/js?sensor=false"> </script>

</head>
<body>
<div id = "map"> </div>
<div id = "message"> </div>
</body>
</html>
12. Nos arquivos default.css, adicione as seguintes regras de estilo para centralizar e

dimensionar o mapa e a mensagem.
#map {
largura: 800px;
altura: 600px;
borda: só lida;
#mensagem {
largura: 800px;
altura: 50px;
borda: só lida;
13. No arquivo default.js, adicione a funçã o de documento pronto. Na funçã o de documento

pronto, chame a funçã o getLocation criada na pró xima etapa.
getLocation ();
});
14. Um dd o seguinte có digo para as funçõ es getLocation, supportsGeolocation,

showMessage, e showError.
Este é o mesmo có digo que foi abordado na Liçã o 1.
watchId = navigator.geolocation.getCurrentPo sition (showPosition
, showError);
outro {

}
showMessage ("Solicitaçã o de acesso de geolocalizaçã o negada pelo usuá rio."); intervalo;
ca se error.POSITION_UNAVAILABLE:
showMessage ("Informaçõ es de localizaçã o indisponíveis.");
intervalo;
showMessage ("Obter solicitaçã o de localizaçã o do usuá rio expirou.");
intervalo;
showMessage ("Ocorreu um erro desconhecido.");
intervalo;
15. Adicione a funçã o showPosition que é chamada quando a chamada da funçã o

getCurrentPosition é bem-sucedida.
var mapcanvas = document.getElementById ('map');
var coords = new google.maps.LatLng (position.coords.latitude
, position.coords.longitude);
var options = {
zoom: 13,
centro: coords,
mapTypeControl: false,
NavigationControlOptions: {
estilo: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: g oogle.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map (mapcanvas, opçõ es);
var marker = new google.maps.Marker ({
posiçã o: coords,
mapa: mapa,
título: "Você está aqui!"
});
É aqui que ocorre o mapeamento. A primeira linha obtém uma

referência ao elemento < div > para o mapa e o atribui à variá vel mapcanvas . A segunda
declaraçã o usa 552 CAPÍTULO 14 Tornando seu HTML ciente de localizaçã o
a API do Google para criar um objeto de coordenada com base na latitude e longitude, e é
atribuído à variá vel coords . A pró xima instruçã o cria um objeto com as configuraçõ es do
mapa e o atribui à variá vel de opções . O método Map na API do Google é chamado , o que
renderiza o mapa na variá vel mapcanvas e retorna uma referência ao mapa. Finalmente,
a API do Google é usada para criar um marcador com a localizaçã o atual.
16. No Solution Explorer, clique com o botã o direito do mouse no arquivo default.html e
escolha Definir como pá gina inicial.
Você deve ver a pá gina default.html como pró pria na Figura 14-3.
FIGURA 14-3 O mapa do Google com a localizaçã o atual
capítulo.
■■ Exercício 1 Saiba mais sobre posicionamento criando um aplicativo que recupera a
localizaçã o atual do usuá rio para ajudar a encontrar locais pró ximos, como postos de
gasolina ou restaurantes.
■■ Exercício 2 Saiba mais sobre o posicionamento monitorado escrevendo um aplicativo

que monitora sua posiçã o e exibe um rastro de suas viagens em um mapa.
Respostas
Lição 1
A. Incorreto: O método watchPosition () retorna continuamente a localizaçã o atual.
B. Incorreto: o método watchLocation () nã o existe.
C. Correto: O método getCurrentPosition () recupera a localizaçã o atual uma ú nica vez.
D. Incorreto: O método getCurrentLocation () nã o existe.
A. Incorreto: A funçã o de retorno de erro é um parâ metro vá lido.
B. Incorreto: O objeto de opçõ es de posiçã o é um parâ metro vá lido.
C. Incorreto: A funçã o de retorno de sucesso é um parâ metro vá lido.
D. Correto: O parâ metro usar somente GPS nã o é vá lido.
Lição 2
A. Correto: O método watchPosition () retorna continuamente a localizaçã o atual.
B. Incorreto: o método watchLocation () nã o existe.
C. Incorreto: O método getCurrentPosition () recupera a localizaçã o atual uma ú nica vez.
D. Incorreto: O método getCurrentLocation () nã o existe.

2. Resposta correta : A
A. Correto: A fó rmula Haversine calcula a distâ ncia esférica.
B. Incorreto: você usa o teorema de Pitá goras para calcular a hipotenusa de um triâ ngulo
retâ ngulo.
C. Incorreto: você usa a fó rmula quadrá tica para resolver ax2 + bx + c = 0 para x .
D. Incorreto : As funçõ es hiperbó licas sã o aná logas à s funçõ es trigonométricas comuns ou

circulares.
CAPÍTULO 1 5
Dados locais com armazenamento na web
Até agora, você aprendeu como tirar proveito de uma ampla gama de ferramentas para
produzir aplicativos que sã o esteticamente atraentes, responsivos e rá pidos. No entanto,
seu principal meio de armazenamento de dados se limita a enviar informaçõ es de volta ao
servidor, o que exige que o aplicativo espere até que ocorra uma viagem de ida e volta.
Para minimizar o custo de depender inteiramente da persistência do lado do servidor, a

maioria dos navegadores modernos agora oferece suporte ao armazenamento da web
(também conhecido como armazenamento DOM), um recurso relativamente novo que
permite armazenar grandes quantidades de dados do usuá rio na má quina cliente.
Este capítulo começa com uma visã o geral dos dois mecanismos de armazenamento
(localStorage e sessionStorage) e como eles podem fazer melhorias dramá ticas em como os
dados do usuá rio sã o retidos. O capítulo entã o examina como o uso de eventos de
armazenamento pode combater problemas complexos, como condiçõ es de corrida.
■■ Liçã o 1: Apresentando o armazenamento na web 555
■■ Liçã o 2: Manipulaçã o de eventos de armazenamento 565
Para completar este livro, você deve ter algum conhecimento de desenvolvimento
sistema” na Introduçã o do livro. Especificamente, você precisa de um navegador (como o
Internet Explorer 8 ou uma versã o mais recente) que possa acomodar armazenamento na
web .
Lição 1: Apresentando o armazenamento na web
A maioria dos aplicativos da web depende de algum método de armazenamento de dados,

que normalmente envolve uma soluçã o do lado do servidor, como um banco de dados SQL
Server. No entanto, em muitos cená rios, isso pode ser excessivo, e a capacidade de
armazenar dados simples e nã o confidenciais em seu navegador atenderia facilmente à s
suas necessidades.
555
■■ Compreenda o armazenamento na web.
■■ Implemente o objeto localStorage.
Durante anos, o armazenamento de dados no navegador pode ser realizado com o uso de

cookies HTTP, que fornecem uma maneira conveniente de armazenar pequenos pedaços de
informaçã o. Hoje, os cookies sã o usados principalmente para armazenar informaçõ es
bá sicas do perfil do usuá rio. A seguir está um exemplo de como os cookies sã o usados.
// definindo o valor do cookie
function setCookie (cookieName, cookieValue, expirationDays) {
var expirationDate = new Date ();
expirationDate.setDate (expirationDate.getDate () + expirationDays); cookieValue =

cookieValue + "; expires =" + expirationDate.toUTCString (); document.cooki e =
cookieName + "=" + cookieValue;
// recuperando o valor do cookie
funçã o getCookie (cookieName)
{
var cookies = document.cookie.split (";");
para (var i = 0; i <cookies.length; i ++) {
var cookie = cookies [i];
var index = cookie.indexOf ("=");
var chave = cookie.substr (0, índice);
var val = cookie.substr (índice + 1);
if (chave == cookieName)
return val;
// uso
setCookie ('firstName', 'Glenn', 1);
var firstName = getCookie ('firstName');
O exemplo demonstra que trabalhar com cookies nã o é complicado, mas a interface para
fazer isso deixa muito a desejar. Para simplificar o trabalho com cookies, você pode usar o
jQuery.
Plug-in de cookie disponível em https://github.com/carhar tl / jquery-cookie . Aqui está o

exemplo de có digo modificado ao usar o plug-in jQuery.
556 CAPÍTULO 15 Dados locais com armazenamento na web
$ .cookie ('primeiroNome', 'Glenn');
var firstName = $ .cookie ('firstName');
Este exemplo mostra que o plug-in oferece uma interface muito mais simples.

Trabalhando com limitações de cookies
Os cookies continuarã o a ser uma ferramenta eficaz no futuro pró ximo, mas têm algumas
desvantagens.
■■ Limitações de capacidade Os cookies sã o limitados a cerca de 4 KB de dados, o que

nã o é grande, embora você possa criar mais de 30 cookies por site. (O limite má ximo real
depende de quais navegadores você está alvejando; a média é entre 30 e 50.)
■■ Overhead Cada cookie é enviado com cada solicitaçã o / resposta HTTP feita,

independentemente de os valores serem necessá rios. Isso costuma ser verdadeiro até
mesmo para solicitaçõ es de conteú do está tico (como imagens, arquivos css e arquivos js),
que podem criar um HTTP mais pesado do que o necessá rio
mensagens.
Alternativas aos cookies anteriores ao HTML5
Como as limitaçõ es dos cookies eram muito altas, a demanda por recursos de
armazenamento mais poderosos era grande. Algumas alternativas criativas foram
desenvolvidas dentro de alguns dos plug-ins mais populares.
■■ Flash Player O plug-in Adobe Flash Player foi um dos primeiros a oferecer um
mecanismo de armazenamento confiá vel por meio de sua funçã o Objetos Compartilhados
Locais. Ele vem com a capacidade de armazenar muito mais dados do que cookies e dá ao
usuá rio a capacidade de aumentar ou limitar a quantidade de espaço permitido para cada
site. Outro recurso extremamente ú til dos Objetos Compartilhados Locais é sua capacidade
de serem escritos por um navegador e lidos por outros. Por exemplo, se um usuá rio criar
uma lista de tarefas pendentes em um site da Web usando o Internet Explorer, essa lista
poderá ser acessada posteriormente pelo Flash Player em execuçã o no Firefox.
■■ Dados do usuário O Internet Explorer oferece suporte a uma interface de programaçã o

de aplicativo (API), conhecida como Dados do usuá rio, desde a versã o 5. Ele oferece a
capacidade de armazenar até 1 MB de informaçõ es na forma de um par chave /
valor. Embora nã o seja tã o robusto quanto as ofertas de armazenamento HTML5, ainda
pode ser uma boa alternativa para aplicativos que se destinam a ser específicos do Internet
Explorer e que funcionam em versõ es anteriores, como o Internet Explorer 6 ou o Internet
Explorer 7.
■■ Google Gears Uma soluçã o que estava à frente de seu tempo foi o Google Gears, que
vá rios utilitá rios de alto volume da web usavam, como YouTube e Gmail. Em 2010, no
entanto, o Google anunciou que nã o está mais desenvolvendo novos recursos para o
Gears . Em vez disso, os esforços do Google estã o voltados para a construçã o dos padrõ es
da web HTML5.
■■ Applets Java Outra soluçã o popular de có digo-fonte aberto eram os Applets Java, outra
forma compatível com vá rios navegadores de armazenar informaçõ es. No entanto, como o
Flash Player e o Gears, seu uso está caindo drasticamente em favor de alternativas HTML5.
Liçã o 1: Apresentando o armazenamento na Web CAPÍTULO 15 557
Olhando além dos plug-ins
Embora os recursos desses plug-ins forneçam ó timas respostas para o problema de

armazenamento, eles vêm com limitaçõ es que restringem sua utilidade.
■■ Plug-in necessário O primeiro obstá culo é que o usuá rio nã o deve apenas ter o plug-in
instalado, mas também frequentemente ter a versã o correta do plug-in.
■■ Bloqueio de usuário Por questõ es de segurança e desempenho, muitas ferramentas de

instalaçã o do usuá rio , como bloqueadores de Flash, podem exigir que o usuá rio clique para
ativar o plug-in ou até mesmo bloqueá -lo totalmente.
■■ Usuários corporativos Em algumas organizaçõ es, os funcioná rios sã o proibidos de

instalar plug-ins de terceiros para evitar vulnerabilidades de segurança em potencial .
■■ Específico do fornecedor A maior desvantagem de cada opçã o de plug-in é que ele

depende de fornecedores individuais para suporte e desenvolvimento. Se esse fornecedor
decidir descontinuar ou reduzir o suporte, talvez você precise encontrar outra
soluçã o rapidamente.
As soluçõ es existentes deixam muito a desejar; HTML5 inova com vá rias ferramentas

inovadoras. Cada um é ú nico e carrega seu pró prio conjunto de pró s e contras, que este
capítulo discute individualmente.
■■ Armazenamento na Web Facilmente a nova forma mais simples de armazenamento, o

armazenamento na Web oferece uma maneira de armazenar pares de chave / valor de
dados de uma maneira que rivaliza com os cookies na facilidade de uso. Na pró xima seçã o,
você verá que atualmente é a opçã o com mais suporte.
■■ Banco de dados Web SQL Para aplicativos mais complexos, pode ser uma boa
alternativa ao armazenamento na web. Ele fornece o poder de um banco de dados
relacional completo, incluindo suporte para comandos SQL, transaçõ es e ajuste de
desempenho. Infelizmente, seu suporte é extremamente limitado e pode ser deixado para
trá s em favor de outras opçõ es.
■■ IndexedDB Esta ferramenta parece ser uma forte candidata para a soluçã o de

requisitos de armazenamento complexos no futuro. Como um banco de dados nã o
relacional (NoSQL), ele oferece simplicidade semelhante ao armazenamento na web , ao
mesmo tempo em que acomoda necessidades comuns, como indexaçã o e transaçõ es.
■■ API do sistema de arquivos Esta ferramenta é ú til para armazenar tipos de dados

maiores, como arquivos de texto, imagens e filmes. No entanto, ele sofre com a falta de
adoçã o por muitos dos navegadores modernos de hoje . No momento em que este livro foi
escrito, ele é principalmente compatível apenas com o Chrome.
Considerando a segurança
Embora os quatro tipos de armazenamento tenham muitas diferenças, eles também têm
algumas semelhanças impressionantes, além de serem veículos para armazenar dados
na má quina do cliente .
Uma propriedade que todos eles têm em comum é que os dados armazenados estã o
vinculados ao URL
(ou, mais especificamente, a origem), o que garante que os dados nã o possam ser acessados
por outros sites.
Portanto, o mesmo host, porta e protocolo (por exemplo, HTTP versus HTTPS) devem ser
fornecidos antes que uma pá gina da Web possa acessar os dados gravados por outra
pá gina.
Dado o armazenamento de dados que foi criado usando o

URL http://www.example.com/area1
/page1.html , considere se cada um dos seguintes URLs pode acessar esse armazenamento

de dados.
■■ http://www.otherexample.com/area1/page1.html Nã o, domínios diferentes
■■ http://store.example.com/area1/page1.html Nã o, hosts diferentes
■■ http://example.com/area1/page1.html Nã o, hosts diferentes
■■ https://www.example.com/area1/page1.html Nã o, protocolo diferente
■■ http://www.example.com:8080/area1/page1.html Nã o, portas diferentes
■■ http://www.example.com/area1/page2.html Sim
■■ http://www.example.com/area2/page1.html Sim
A associaçã o estrita à origem é uma consideraçã o importante ao desenvolver sites que
podem ser hospedados em um domínio compartilhado. Na maioria dos casos, seria uma
prá tica melhor evitar o uso total do armazenamento da web se o seu site residisse em um
domínio compartilhado no futuro, porque qualquer subsite dentro do domínio seria capaz
de acessar seus dados.
Usando o suporte do navegador
Muitos recursos do HTML5 têm diferentes níveis de implementaçã o e compatibilidade

pelos diferentes fabricantes de navegadores , e isso é especialmente verdadeiro quando se
trabalha com as diferentes opçõ es de armazenamento. De longe, a opçã o de
armazenamento com suporte mais universal é o armazenamento na web. A seguir, um
resumo do suporte do navegador.
■■ armazenamento na web
■■ Compatível com Internet Explorer (v8.0 e versõ es mais recentes), Firefox (v15.0 +),

Chrome (v22.0 +), Safari (v5.1 +), Safari Mobile (v3.2 +), Blackberry (v7 .0+), Android (v2.1
+), Opera (v12.0 +)
■■ Opera Mobile não compatível
■■ Web SQL
■■ Compatível com Chrome (v22.0 +), Safari (v5.1 +), Safari Mobile (v 3.2+), Blackberry
(v7.0 +), Android (v2.1 +), Opera (v12.0 +)
■■ Não compatível com Internet Explorer, Firefox, Opera Mobile
■■ IndexedDB
■■ Compatível com Internet Explorer (v10.0 e versõ es mais recentes), Firefox (v15.0 +),
Chrome (v23.0 +), Blackberry (v10.0 +)
■■ Não suppo rted Safari, Safari Mobile, Android, Opera, Opera Mobile
■■ API FileSystem
■■ Compatível com Chrome (v22.0 +), Blackberry (v10.0 +)
■■ Não compatível com Internet Explorer, Firefox, Safari, Safari Mobile, Android, Opera,
Opera Mobile

Este capítulo examina os dois tipos de armazenamento da web: localStorage e
sessionStorage.
O Capítulo 16, “Aplicativos da web offline,” examina as três opçõ es de armazenamento

restantes com mais detalhes.
A variá vel global localStorage é um objeto Storage. Um dos maiores pontos fortes

de localStorage é sua API simples para ler e escrever pares de chave / valor de strings. Por
ser essencial para o seu armazenamento NoSQL, é fá cil de usar por natureza.
Usando a referência do objeto localStorage
A seguir está uma lista de métodos e atributos disponíveis no objeto Storage no que diz
respeito a localStorage .
■■ setItem (key, value) Método que armazena um valor usando a chave associada. A

seguir está um exemplo de como você pode armazenar o valor de uma caixa de texto
em localStorage . A sintaxe para definir um valor é a mesma para uma nova chave e para
sobrescrever um valor existente.
localStorage.s etItem ('firstName', $ ('# firstName'). val ());
E como é tratado como muitos outros dicioná rios JavaScript, você também pode definir
valores usando outras sintaxes comuns.
localStorage ['firstName'] = $ ('# firstName'). val ();
ou
localStorage.firstName = $ ('# firstN ame'). val ();
■■ getItem (key) Método de recuperaçã o de um valor usando a chave associada. O

exemplo a seguir recupera o valor da chave 'firstName'. Se uma entrada com a chave
especificada nã o existir, será retornado nulo.
var firstName = localStorage.getItem ('firstName');
E, como setItem, você também pode usar outras sintaxes para recuperar valores do
dicioná rio.
var firstName = localStorage ['firstName'];
ou
var firstName = localStorage.firstName;

■■ removeItem (chave) Método para remover um valor de localStorage por usando a
chave associada. O exemplo a seguir remove a entrada com a chave fornecida. No entanto,
nã o faz nada se a chave nã o estiver presente na coleçã o.
localStorage.removeItem ('firstName');
■■ método clear () para remover todos os itens do armazenamento. Se nenhum terminal

estiver presente, ele nã o fará nada. A seguir está um exemplo de limpeza
do objeto localStorage .
localStorage.clear ();
■■ length Propriedade que obtém o nú mero de entradas que estã o sendo armazenadas no

momento. O exemplo a seguir demonstra o uso da propriedade lengt h.
var itemCount = localStorage.length;
■■ método de chave (índice) que encontra uma chave em um determinado índice. O

World Wide Web Consortium (W3C) indica que se for feita uma tentativa de acessar uma
chave usando um índice que está fora do intervalo da coleçã o, nulo deve ser retornado. No
entanto, alguns navegadores lançarã o uma exceçã o se um índice fora do intervalo for
usado, portanto, é recomendá vel verificar o comprimento antes de indexar as chaves.
var key = localStorage.key (1);
Suporte de navegador muito alto
Outro benefício de localStorage , conforme visto na seçã o anterior, é que localStorage , além

de sessionStorage , é bem suportado em navegadores modernos. Na verdade, é a ú nica das
quatro opçõ es de armazenamento que é consistentemente suportada em navegadores de
desktop e mó veis.
Determinar se o navegador do usuário suporta armazenamento na web
Embora a maioria dos navegadores ofereça suporte ao armazenamento da web, ainda é

uma boa ideia verificar se ele está disponível caso o usuá rio esteja executando uma versã o
mais antiga do navegador. Se nã o estiver disponível, você pode experimentar uma exceçã o
de referência nula na primeira vez que uma tentativa é feita para
acessar localStorage ou sessionStorage . Existem vá rias maneiras de verificar a
disponibilidade; o seguinte é um exemplo.
function isWebStorageSupported () {
retorna 'localStorage' na janela;

}
if (isWebStorageSupported ()) {
localStorage.setItem ('firstName', $ ('# firstName'). val ());
A popular biblioteca JavaScript, Modernizr, vem com um método que pode fazer essa
verificaçã o para você.
if (Modernizr.localstorage) {
Quantidade de dados que podem ser mantidos no armazenamento da web
O localStorage ob jeto oferece muito mais espaço do que estava disponível com

ferramentas mais antigas.
Os navegadores modernos suportam um mínimo de 5 MB de dados, o que é

substancialmente mais do que o permitido por meio de cookies (que sã o limitados a 4 KB
cada).
NOTA CAPACIDADE DE ARMAZENAMENTO
O limite de 5 MB é atualmente recomendado pelo W3C, mas, em última análise, cabe

aos fornecedores do navegador determinar o quanto eles permitirão. Atualmente, o
Internet Explorer oferece suporte a um limite de 10 MB.
Atingindo o limite de armazenamento
Se o limite de armazenamento for atingido ou se o manual do usuá rio desativar os recursos

de armazenamento, uma exceçã o QuotaExceededError será lançada. A seguir está um
exemplo de como você pode usar um bloco try / catch para evitar que seu aplicativo falhe
se isso acontecer.
tentar{

}
pegar (e) {
// degradar graciosamente
Armazenamento de objetos complexos
Atualmente, apenas valores de string podem ser armazenados no armazenamento da web,

mas à s vezes você pode precisar armazenar itens mais interessantes, como ar rays ou
objetos JavaScript. Para fazer isso, você pode tirar proveito de alguns dos métodos do
utilitá rio JavaScript Object Notation (JSON) disponíveis.
O exemplo a seguir cria um objeto JSON e usa o método stringify () para converter o valor
em uma string que pode entã o ser colocada no armazenamento da web.
var person = {firstName: 'Glenn', lastName: 'Johnson'};
localStorage.setItem ('glenn', JSON.stringify (pessoa));
Você pode entã o usar o método parse () para desserializar uma nova instâ ncia do objeto da
representaçã o da string que foi armazenada no exemplo anterior.
var person = JSON.parse (localStorage.getItem ('glenn'));
Nã o se esqueça de que uma desvantagem potencial dos cookies é que eles estã o sempre
incluídos nas solicitaçõ es e respostas da web, mesmo que você nã o os use. A situaçã o ao
usar o armazenamento na web é oposta; seus valores nunca sã o passados automaticamente
para o servidor. Você mesmo pode fazer isso incluindo valores em uma chamada AJAX ou
usando JavaScript para copiar os valores em elementos de formulá rio postados.
Usando a persistência de curto prazo com sessionStorage
Na seçã o anterior, você aprendeu como usar localStorage , que, como os cookies , é

projetado para reter dados em vá rias sessõ es. No entanto, se quiser limpar as informaçõ es
armazenadas, você deve usar o método removeItem () ou clear ().
Além de localStorage , você pode usar sessionStorage ; também é um objeto Storage,

portanto, existem os mesmos métodos e propriedades. A diferença é
que sessionStorage retém dados para uma ú nica sessã o apenas. Depois que o usuá rio fecha
a janela do navegador, os registros armazenados sã o apagados automaticamente. Esta é
uma vantagem importante porque apenas uma quantidade limitada de ritmo está
disponível.
Em sua essência, localStorage e sessionStorage sã o firmemente dedicados a seus
respectivos contextos de navegaçã o. Como esse contexto para localStorage inclui outras
guias e janelas na mesma base de URL, seus dados sã o compartilhados entre todas as
instâ ncias abertas. Em contraste, 562 CAPÍTULO 15 Dados locais com armazenamento na
web
sessionStorage tem um contexto que, por design, é extremamente confinado. É limitado a

uma ú nica guia ou janela do navegador. Seus dados nã o podem ser passados de uma guia
para a pró xima. No entanto, os dados podem ser compartilhados entre
quaisquer elementos < iframe > existentes na pá gina.
■■ Que tipo de objeto é localStorage e sessionStorage ?
■■ Eles são objetos de armazenamento.
Antecipando potenciais armadilhas de desempenho
O armazenamento na Web nã o vem sem algumas desvantagens. Esta seçã o cobre algumas

das dificuldades de usar localStorage e sessionStorage .
Leitura e gravação sincronizada no disco rígido
Um dos maiores problemas com o objeto Storage usado com localStorage e sessionStorage é

que ele opera de forma síncrona, o que pode bloquear a renderizaçã o da pá gina enquanto
ocorrem leituras / gravaçõ es. As leituras / gravaçõ es síncronas sã o ainda mais caras
porque sã o enviadas diretamente para o disco rígido do cliente. Por si só , isso pode nã o ser
motivo de preocupaçã o, mas as atividades a seguir podem tornar essas interaçõ es
irritantemente lentas para o usuá rio.
■■ Serviços de indexaçã o na má quina cliente
■■ Procurando vírus
■■ Gravando grandes quantidades de dados
Embora a quantidade de tempo que normalmente leva para executar essas açõ es seja
geralmente muito pequena para notar, elas podem bloquear a renderizaçã o do navegador
enquanto ele está lendo e gravando valores no disco rígido. Com isso em mente, é uma boa
ideia usar armazenamento na web para quantidades muito pequenas de dados e métodos
alternativos para itens maiores.
NOTA POR QUE NÃO USAR OS WEB WORKERS PARA LER / ESCREVER ASSÍNCRONOS?
O armazenamento da web não está disponível para os web workers. Se precisar

escrever um valor enquanto estiver nos web workers, você deve usar o método
postMessage () para notificar o encadeamento pai e permitir que ele execute o
trabalho.
Antecipando recursos de pesquisa lenta
Como o armazenamento na web nã o possui recursos de indexaçã o, a pesquisa em grandes

conjuntos de dados pode ser demorada. Normalmente, isso envolve a iteraçã o de cada item
da lista para encontrar itens que correspondam aos critérios de pesquisa.
Sem suporte para transações
Outro benefício de outras opçõ es de armazenamento que está faltando no armazenamento

na web é o suporte para transaçõ es. Embora as dificuldades sejam imprová veis na maioria
dos aplicativos, os aplicativos que usam armazenamento na web podem ter problemas se
um usuá rio estiver modificando o mesmo valor em localStorage em vá rias guias abertas do
navegador. O resultado seria uma condiçã o de corrida em que a segunda guia substitui
imediatamente o valor inserido pela primeira guia.
■■ Você gostaria de armazenar o nome do usuário depois que ele se autenticar em

seu site, mas ele precisará se autenticar novamente em sua próxima visita, quando
então você recarregaria suas informações (incluindo o nome). Qual mecanismo de
armazenamento você deve usar?
■■ sessionStorage . Embora você possa usar localStorage para armazenar o nome do

usuário, ele será mantido permanentemente. Colocá-lo em sessionStorage o limparia
automaticamente depois que a janela fosse fechada.
Resumo da lição
■■ O armazenamento na Web fornece um método fá cil para armazenar pares de chave /
valor de dados sem depender de um servidor.
■■ Com suporte quase universal nos navegadores de desktop e mó veis atuais, o

armazenamento na web é a forma mais compatível de armazenamento de dados off-line.
■■ O armazenamento da Web vem em dois formatos, que possuem os mesmos métodos.
■■ localStorage Compartilha dados em todas as janelas e guias na mesma origem.
■■ Os dados de sessionStorage sã o colocados em á rea restrita apenas para a guia ou

janela atual e sã o apagados quando fechados.
■■ Leituras / gravaçõ es no armazenamento da web podem ser realizadas apenas de forma

síncrona.
■■ O armazenamento na Web nã o oferece suporte a recursos avançados, como transaçõ es

ou envio .
■■ Apenas o armazenamento para valores de string é atualmente suportado no

armazenamento da web, mas o armazenamento para objetos mais complexos pode ser
obtido usando JSON.stringify () e JSON.
métodos de utilitá rio parse ().
Revisão da aula

564 CAPÍTULO 15 dados locais com stor web idade
1. Quais dos seguintes URLs podem acessar dados armazenados

em http://www.example.com
/lesson1/page1.html ?
A. http://www2.example.com/lesson1/page1.html
B. http://www.example.com:8081/lesson1/page1.html
C. https://www.example.com/lesson1/page1.html
D. http://www.example.com/lesson2/page1.html
E. http://example.com/lesson1/page1.html
2. Qual é o limite de armazenamento da web atualmente recomendado pelo World Wide
Web Consortium (W3C)?
A. 4 KB
B. 5 MB
C. 500 MB
D. 10 MB
3. Qual é a sintaxe correta para remover todos os valores existentes em localStorage ?
A. localStorage.clear ();
B. localStorage.removeAl ();
C. localStorage.abandon ();
D. localStorage.reset ();
4. Qual dos seguintes mecanismos de armazenamento tem o nível mais alto de suporte para
vá rios navegadores?
A. Armazenamento na web
B. Web SQL
C. IndexDB
D. API FileSystem
5. Qual dos seguintes recursos o armazenamento na web oferece suporte?
A. Indexaçã o
B. Transaçõ es
C. Leitura / gravaçã o assíncrona
D. Armazenamento simples de par de chave / valor
Lição 2: Manipulação de eventos de armazenamento
Um dos maiores desafios que você enfrentará ao trabalhar com armazenamento na web é
manter tudo sincronizado quando um usuá rio tem vá rias guias ou instâ ncias do navegador
abertas ao mesmo tempo. Por exemplo , a guia um do navegador pode ter exibido um valor
recuperado de localStorage apenas Liçã o 2: Manipulando eventos de
armazenamento CAPÍTULO 15 565
antes que essa entrada fosse atualizada na guia dois do navegador. Nesse cená rio, a guia
um nã o sabe que o valor exibido acabou de ficar desatualizado.
Para resolver esse problema, o armazenamento da web tem um evento de armazenamento

que é gerado sempre que uma entrada é adicionada, atualizada ou removida. Você pode se
inscrever neste evento em seu aplicativo para fornecer notificaçã o quando algo mudou e
informá -lo de detalhes específicos sobre essas mudanças. Esses eventos funcionam
em localStorage e sessionStorage .
■■ Compreenda o objeto StorageEvent.
■■ Implementar o tratamento de eventos no objeto localStorage.
Enviando notificações apenas para outras janelas
O W3C recomenda que os eventos nã o sejam recebidos na guia (ou janela) que fez a
alteraçã o ao trabalhar com eventos de armazenamento. Isso faz sentido porque a intençã o
é permitir que outras janelas respondam quando um valor de está gio muda. No entanto,
alguns navegadores (como as versõ es posteriores do Internet Explorer) implementaram
eventos de armazenamento de uma forma que permite que a janela de origem também
receba a notificaçã o. Só é seguro contar com essa implementaçã o se sua aplicaçã o for
direcionada especificamente a esses navegadores.
Os assinantes do evento de armazenamento recebem um objeto StorageEvent contendo

informaçõ es detalhadas sobre o que foi alterado. A seguir está uma lista de propriedades
incluídas no objeto StorageEvent.
■■ chave Obtém a chave do registro que foi adicionado, atualizado ou removido; será nulo

ou vazio se o evento foi disparado pelo método clear ()
■■ oldValue Obtém o valor inicial se a entrada foi atualizada ou removida; será nulo

ou vazio se um novo item foi adicionado ou o método clear () foi invocado
■
newValue Obtém o novo valor para entradas novas e atualizadas; será nulo ou vazio se o
evento foi disparado pelos métodos removeItem () ou clear ()
■■ url Obtém o URL da pá gina na qual a açã o de armazenamento foi realizada
■■ storageArea Obtém uma referência para o objeto localStorage ou sessionStorage da

janela , dependendo de qual foi alterado
Muitos navegadores começaram a suportar eventos de armazenamento sem

implementar totalmente as propriedades da especificaçã o de interface StorageEvent,
portanto, alguns navegadores mais antigos podem acionar eventos de armazenamento, mas
as propriedades descritas aqui podem ser nulas ou vazias.
Borbulhando e cancelando eventos
Ao contrá rio de alguns outros tipos de eventos, o evento de armazenamento nã o pode ser
cancelado em um retorno de chamada; é um meio de informar os assinantes quando ocorre
uma mudança. Também nã o borbulha como outros eventos.
Para começar a ouvir notificaçõ es de eventos, adicione um manipulador de eventos ao

evento de armazenamento da seguinte maneira.
function respondToChange (e ) {
alerta (e.newValue);
window.addEventListener ('storage', respondToChange, false);
Para acionar este evento, execute uma operaçã o como a seguinte em uma nova guia no
mesmo site.
localStorage.setItem ('nome', 'Glenn');
Considerando o desempenho do Internet Explorer r 8 com eventos de armazenamento

Os eventos de armazenamento sã o apenas parcialmente suportados no Internet Explorer
8, portanto, se você precisar oferecer suporte a essa versã o específica do navegador,
considere estes fatores.
■■ Apenas a propriedade url é implementada no objeto StorageEvent. O restante das

propriedades retornará nulo.
■■ O evento de armazenamento em si nã o é acionado no objeto janela, pois é em
navegadores mais atuais; em vez disso, ele é disparado no objeto de documento.
■■ O método addEventListener () nã o está disponível, mas você pode usar o método

attachEvent ().
O exemplo a seguir se inscreve nas alteraçõ es de armazenamento enquanto protege contra

quando o Internet Explorer 8 pode ser usado.
if (window.addEventListener) {// verificar para IE8
window.addEventListener ('storage', respondToC hange , false);
} outro {
document.attachEvent ('onstorage', respondToChange);
Vinculando a eventos de armazenamento usando jQuery
Um método alternativo para usar addEventListener () para suas assinaturas é usar os

recursos de associaçã o de eventos que o jQuery fornece. Você deve atualizar seu método
respondToChange () porque agora ele retornará um evento diferente que realmente
envolve o evento bruto com o qual você estava trabalhando no exemplo anterior.
function respondToChange (e) {
Liçã o 2: Manipulaçã o de eventos de armazenamento CAPÍTULO 15 567
alert (e.originalEvent.newValue);
$ (janela) .on ('armazenamento', respondToChange);
if ('onstorage' no documento) // vincular ao documento para IE8
$ (documento) .on ('armazenamento', respondToChange);
Usando eventos com sessionStorage

Na liçã o anterior, você aprendeu que o contexto do navegador determina quando os dados
podem ser compartilhados.
Uma vez que o contexto para loca lStorage inclui outras abas e janelas, as notificaçõ es sã o

passados para cada instâ ncia aberta. No entanto, sessionStorage obtém poucos benefícios
de eventos porque seu contexto inclui apenas a guia ativa. Os navegadores atuais
incluíram elementos < iframe > dentro da definiçã o de contexto, portanto, é possível passar
notificaçõ es de e para eles, se necessá rio.
Resumo da lição
■■ Outras guias e janelas podem se inscrever em eventos de armazenamento para receber

notificaçõ es quando ocorre uma alteraçã o no localStorage .
■■ O objeto StorageEvent passado aos assinantes contém informaçõ es detalhadas sobre

quais alteraçõ es foram feitas.
■■ Como os dados do sessionStorage nã o sã o compartilhados além da guia ou janela atual,

outras pessoas nã o receberã o notificaçõ es quando ocorrer uma alteraçã o.
■■ Os eventos de armazenamento nã o podem ser cancelados e nã o surgem.
Revisão da aula
escolha de resposta está correta ou incorreta na seçã o “ Respostas” no final deste capítulo.
1. Qual das opçõ es a seguir nã o é uma propriedade do objeto StorageEvent?
A. oldValue
B. chave
C. changeType
D. storageArea
2. Se você modificar um valor armazenado em sessionStorage , qual dos seguintes poderia
receber notificaçõ es da mudança (se inscrito)?
A. Outra guia aberta em uma pá gina no mesmo domínio
B. Uma segunda janela do navegador é aberta na mesma pá gina

C. Um iframe na mesma pá gina cuja fonte é dentro do mesmo domai n D. O sistema
operacional que está hospedando o navegador
3. Qual das opçõ es a seguir é a maneira correta de cancelar um evento de armazenamento?
A. event.returnValue = false;
B. event.preventDefault ();
C. event.stopPropagation ();
D. Os eventos de armazenamento nã o podem ser cancelados apó s serem acionados.
Pratica exercícios

Exercício 1: Crie um catálogo de contatos usando localStorage
Neste exercício, você pratica o trabalho com armazenamento na Web criando uma lista de
contatos simples que é mantida como uma matriz em localStorage . A pá gina exibirá a lista
de contatos completa em uma grade e usará um formulá rio para adicionar e editar
contatos. O pró prio site consistirá em uma ú nica pá gina; nenhuma ló gica do lado do
servidor é necessá ria. O có digo HTML e CSS já está completo, entã o seu foco está em
adicionar o JavaScript necessá rio para fazê-lo funcionar.
1. Abra o Visual Studio Express 2012 para Web. Clique em Arquivo e escolha Abrir
Projeto. Navegue até a pasta ContactBook na pasta Exercise1Start. Selecione
ContactBook.sln e clique em Abrir.
2. Revise o arquivo default.html inicial.
Este arquivo faz referência ao arquivo default.css, ao arquivo jQuery e à ContactsLibrary.
arquivo js. No elemento < bod y > há uma tabela de contatos e um formulá rio que inclui
campos para nome, sobrenome, e-mail e nú mero de telefone do contato, conforme a seguir.
<! DOCTYPE html>
<head>
<title> Livro de contatos </title>
<link href = "Conteú do / default.css" rel = "stylesheet" />

<script src = "Scripts / jquery-1.8.3.min.js"> </script>
<script src = "Scripts / ContactsLibrary.js"> </script>
</head>
<body>
<cabeçalho>
<h1> Contatos </h1>
</hgroup>
</ heade r>
<div role = "main">
<table id = "contatos">
<thead>
<tr>
<th> Email </th>
<th> Nome </th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<div id = "editContact">
<h2 id = "currentAction"> </h2>
<div>
<input type = "text" id = "firstName" name = "firstName" />
</div>
<div>
<input type = "text" id = "lastName" name = "lastName" />
</div>
<div>
<input type = "email" id = "email" name = "email" />
</div>
<div>
<label for = "phoneNumber"> Nú mero de telefone: </label>
<input type = "text" id = "phoneNumber" name = "phoneNumber" />
</div>
<div class = "buttons">
<button id = "btnSave" name = "save"> Salvar </button>
</div>
</div>
</div>
</div>
</body>
</html>
3. Revise o arquivo default.css.
Este arquivo começa redefinindo a m argina, o preenchimento, o tamanho da fonte e a

família de fontes de todos os elementos. Os elementos de marcaçã o semâ ntica sã o definidos
como blocos e, em seguida, o elemento de corpo é formatado. Uma formataçã o específica é
aplicada para produzir uma pá gina da Web atraente. A seguir está o arquivo default.css.
*{
margem: 0;
preenchimento: 0;
display: bloco;
corpo {
cor: # 776E65;
header {
altura: 20px;

#headerText {
topo: 0px;
largura: 100%;
h1 {
flutuar: esquerda;
largura: 60%;
#editar Contato {
fundo: nenhum repetir rolar 0 0 # F8F8F8;
borda: 1px só lido # E1E1E1;
largura: 400px;

#editContact h2 {
padding-left: 10px;
largura: 200px;
#editContact div {
largura: 350px;
#editContact div.buttons {
#editContact label {
largura: 150px;
altura: 12px;
alinhamento vertical: inferior;
limpar: esquerda;
display: bloco;
flutuar: esquerda;
}
#editContact input {
largura: 150px;
preenchimento: 2px;
botã o {
largura: 200px;
#Contatos {
largura: 400px;
borda: 1px só lido # E1E1E1;
margem: 0px;
preenchimento: 0px;
#contacts thead {
cor de fundo: # e1e1e1;
cor: # 7C756D;
intensidade da fonte: Negrito;
}

#contacts tbody tr: nth-child (even) {
cor de fundo: #eee;
#contacts th {
cor da borda: # 7C756D;
estilo de borda: nenhum nenhum só lido;
largura da borda: 0 0 1px;
#contacts th, #contacts td {
margem: 0px;
preenchimento: 5px 10px;
4. Abra e revise o arquivo ContactsLibrary.js.
Este arquivo tem uma referência à biblioteca jQuery. A seguir está uma funçã o de
documento pronto que chama a funçã o de inicializaçã o no contac tsNamespace. Na funçã o
de documento pronto está o contactsNamespace, que contém uma variá vel currentRecord e
a propriedade initialize, que é atribuída a uma funçã o vazia. O arquivo ContactsLibrary.js é
o seguinte.
/// <reference path = "jquery-1.8.3 .js" />
contactNamespace.initialize ();
});
(funçã o () {
this.contactsNamespace = this.contactsNamespace || {};
var ns = this.contactsNamespace;
var currentRecord;
ns .initialize = function () {
};
}) ();
5. Para adicionar có digo ao arquivo ContactsLibrary.js, adicione um método

retrieveFromStorage que puxa a lista de contatos de localStorage .
A lista de contatos será armazenada como uma matriz de objetos de contato JSON, mas
lembre-se de que localStorage oferece suporte apenas ao armazenamento de valores de
string, portanto, você deve analisar o resultado como uma matriz. Você também deve lidar
com ocasiõ es em que os contatos ainda nã o existam no armazenamento.
(funçã o () {
var currentRecord;

};
function retrieveFromStorage () {
var contatosJSON = localStorage.getItem ('contatos'); retornar

contatosJSO N? JSON.parse (contactsJSON): [];
}) ();
6. Preencha a grade iterando a matriz de resultados e criando uma linha para cada
registro. Em cada linha, inclua três células: o endereço de e-mail, o nome completo e um
link de ediçã o que incluirá um atributo data -key para manter o índice do contato dentro da
matriz.
7. Se a matriz estiver vazia, exiba a mensagem “Nenhum registro disponível”. Adicione um

método de exibiçã o disponível publicamente que retira itens do armazenamento e os passa
para um método privado bindToGrid.
ns.display = function () {
resultados v ar = retrieveFromStorage ();
bindToGrid (resultados);
};
function bindToGrid (resultados) {
var html = '';
para (var i = 0; i <results.length; i ++) {
var contato = resultados [i];

html + = '<tr> <td>' + contact.email + '</td>'; html + = '<td>' + contact.firstName + '' +
contact.lastName + '</td>'; html + = '<td> <a class = "edit" href = "javascript: void (0)"
data-key ='
+ i + '> Editar </a> </td> </tr>';
html = html || '<tr> <td colspan = "3"> Nenhum registro disponível </td> </tr>'; $ ('#
contatos tbody'). html (html);
Você criou o link de ediçã o para cada linha; agora você cria os métodos necessá rios para
exibir os detalhes da linha selecionada.
Como o método é invocado clicando no link, você pode obter o índice do item

inspecionando o atributo data-key neste objeto.
8. Use o índice para encontrar o item correspondente na matriz de contatos e, a seguir,

armazene o índice e o objeto de contato no campo currentRecord .
Você chamará um método displayCurrentRecord, que criará na pró xima etapa. Seu có digo
deve ser semelhante ao seguinte.
ns.loadContact = function () {
var key = parseInt ($ (this) .attr ('data-key'));
resultados de var = retrieveFromStorage ();
$ ('# Açã o atual '). html ('Editar contato');
currentRecord = {chave: chave, contato: resultados [chave]}
displayCurrentRecord ();
};
9. Adicione o método displayCurrentRecord, que preenche os campos do formulá rio com as

informaçõ es de contato da seguinte maneira.
function displayCurrentRecord () {
var contact = currentRecord.contact;
$ ('# firstName'). val (contact.firstName);

$ ('# lastName'). val (contact.lastName);
$ ('# email'). val (contact.email);
$ ('# phoneNumber'). val (contact.phoneNumber);
10. No método bindToGrid que você criou anteriormente, adicione a seguinte linha ao final
do método.
Isso liga o evento click dos links Edit ao método loadContact.
$ ('# contatos a.edit'). on ('click', ns.loadContact);
11. Atualize o método de exibiçã o para instanciar um objeto currentRecord padrã o

vazio que é usado para adicionar um contato da seguinte forma.
$ ('# currentAction'). html ('Adicionar contato');
currentRecord = {chave: nulo, contato: {}};
};
12. Adicione o método de salvamento pú blico. Neste método, crie uma variá vel de contato e

atribua a propriedade de contato de currentRecord. Recupere cada um dos valores de
campo do formulá rio e atribua-os ao objeto de contato da seguinte maneira.
ns.save = function () {
contact.firstName = $ ('# firstName'). val ();
contact.lastName = $ ('# lastName'). val ();
contact.email = $ ('# email'). val ();

contact.phoneNumber = $ ('# phoneNumber') .val ();
};
13. Adicione ló gica ao final do método de salvamento que adiciona o contato à matriz se for
um novo contato ou atualiza o contato se ele já existir. Converta o objeto em um JSON
string e armazene-o em localStorage . Atualize a pá gina chamando o método de exibiçã o.
O método de salvamento concluído é o seguinte.
cont act.phoneNumber = $ ('# phoneNumber'). val ();
if (currentRecord.key! = null) {
resultados [currentRecord.key] = contato;
outro {
resultados.push (contato);
localStorage.setItem ('contatos', JSON.stringify (resultados));
ns.display ();
};
14. Atualize o método de inicializaçã o para vincular o botã o Salvar e invocar o método
display ().
$ ('# btnSave'). on ('click', ns.save);
ns.display ();
};
Seu arquivo JavaScript deve ser semelhante ao seguinte.
});
(funçã o () {
this.contactsNamespace = this.contac tsNamespace || {};
var currentRecord;
ns.display ();
};
var contatosJSON = localStorage.getItem ('contatos');
retornar contatosJSON? JSON.parse (contactsJSON): [];
};
var html = '';
var contato = resultados [i];
html + = '<tr> <td>' + contact.email + '</td>'; html + = '<td>' + contact.fir stName + '' +

data-key ='
+ i + '> Editar </a> </td> </tr>';
$ ('# contac ts a.edit'). on ('click', ns.loadContact);

}
$ ('# currentAction'). html ('Editar contato');
currentRecord = {chave: chave, contato: resultados [chave]}
};
$ ('# email'). val (cont act.email);

contact.phoneNumber = $ ('# phoneNumber'). val ();
if (currentRecord.key! = null) {
resultados [currentRecord.key] = contato;
outro {
resultados.push (contato);

localStorage.setItem ('contatos', JSON.stringify (resultados));
ns.display ();
};
}) ();
15. Na janela Solution Explorer, clique com o botã o direito do mouse no arquivo
default.html e escolha Definir como pá gina inicial.
16. Execute o site e comece a adicionar contatos. Tente fechar o servidor de sobrancelha e

executar novamente o site para ver os contatos persistentes.
A Figura 15-1 mostra a pá gina da Web completa com um contato fictício adicionado.
FIGURA 15-1 O livro de contato preenchido

capítulo.
■■ Exercício 1: Modifique a lista de contatos para usar sessionStorage em vez

de localStorage .
Observe que sua lista é limpa depois que a janela do navegador é fechada.
■■ Exercício 2 Inscreva-se no evento de armazenamento e exiba uma mensagem de alerta

sempre que um valor for atualizado. Teste isso usando uma segunda guia do navegador.
578 CAPÍTULO 15 dados locais com stor web idade
Respostas
Lição 1
A. Incorreto: o uso de um host diferente (www2 em vez de www) desabilita este URL
do acesso.
B. Incorreto: O nú mero da porta deve corresponder ao nú mero da porta de origem.
C. Incorreto: protocolos correspondentes devem ser usados. Nesta resposta, https é usado

em vez de http.
D. Correto: Como este exemplo usa a mesma origem, ele terá acesso ao mesmo espaço de
armazenamento de dados.
E. Incorreto: Este exemplo nã o tem um host correspondente e nã o teria acesso permitido.
A. Incorreto: o limite do valor do cookie é 4 KB.
B. Correto: O limite recomendado é 5 MB, embora o fornecedor do navegador possa

determinar os respectivos limites.
C. Incorreto: Se os sites pudessem armazenar 500 MB de dados na má quina cliente,

resultaria em uma degradaçã o drá stica do desempenho.
D. Incorreto: o Internet Explorer oferece suporte a 10 MB, mas esse nã o é o limite

recomendado.
A. Correto: O método clear () remove todos os pares chave / valor existentes para a
origem.
B. Incorreto: o método removeAl () nã o existe.
C. Incorreto: O método abandon () nã o existe.
D. Incorreto: O método reset () nã o existe.
A. Correto: Quase todos os navegadores modernos suportam armazenamento na web

( localStorage e sessionStorage ).
B. Incorreto: alguns navegadores populares (como Chrome e Safari) suportam Web SQL,

mas nem o Internet Explorer nem o Firefox suportam ainda.
C. Incorreto: embora o IndexDB pareça estar ganhando suporte antes do Web SQL, ele
ainda nã o foi adotado pelo Safari ou por alguns dos principais navegadores mó veis.
D. Incorreto: com apenas o Chrome como seu maior defensor, a API FileSystem é a opçã o
de menor adoçã o.
A. Incorreto: o armazenamento da Web nã o oferece suporte à indexaçã o.
B. Incorreto: o armazenamento do W eb nã o suporta transaçõ es.
C. Incorreto: o armazenamento da Web nã o oferece suporte ao processamento assíncrono.
D. Correto: A interface fá cil de usar do armazenamento de par chave / valor simples é

talvez o melhor recurso de armazenamento na web.
Lição 2
A. Incorreto: os eventos de armazenamento têm uma propriedade oldValue que contém os

valores originais quando uma entrada é atualizada ou removida.
B. Incorreto: os eventos de armazenamento têm uma propriedade chave que contém o

nome da entrada que está sendo adicionada, atualizada ou excluída.
C. Correto: Nã o há nenhuma propriedade em eventos de armazenamento chamada

changeType.
D. Incorreto: os eventos de armazenamento têm uma propriedade storageArea que

contém a coleçã o localStorage ou sessionStorage que foi alterada.
A. Incorreto: os eventos de armazenamento da sessã o nã o vã o além da guia ativa; outras

guias nã o serã o notificadas quando ocorrerem alteraçõ es.
B. Incorreto: Os eventos de armazenamento de sessã o nã o alcançam fora de sua janela

atual.
C. Correto: neste caso, um iframe pode receber notificaçõ es de alteraçã o.
D. Incorreto: Os eventos de armazenamento de sessã o nã o vã o além da guia ativa; o

sistema operacional nã o será notificado quando ocorrerem alteraçõ es.
A. Incorreto: O event.returnValue = f alse; método é uma maneira bastante comum de
cancelar muitos eventos depois que eles começam, mas os eventos de armazenamento nã o
podem ser cancelados.
B. Incorreto: o event.preventDefault (); método é outra maneira de cancelar muitos tipos

de eventos, mas os eventos de armazenamento nã o podem ser cancelados.
C. I ncorreto: Os eventos de armazenamento nã o aparecem em bolhas, entã o o

event.stopPropagation (); método nã o teria efeito.
D. Correto: Os eventos de armazenamento nã o podem ser cancelados apó s terem sido

acionados.
CAPÍTULO 1 6
Aplicativos da web offline
No capítulo anterior, você aprendeu sobre a soluçã o off-line mais usada, o armazenamento
na web, mas nem sempre é a melhor ferramenta para o trabalho. À s vezes, você pode
precisar de recursos mais avançados, como suporte assíncrono verdadeiro, indexaçã o para
pesquisas mais rá pidas ou transaçõ es. Esses recursos estã o disponíveis em outros
mecanismos de armazenamento offline.
Este capítulo começa examinando uma opçã o que fornece todo o poder de um banco de
dados relacional, o Web SQL. Uma alternativa que é mais um banco de dados de objetos,
IndexedDB (Indexed Database), é abordada a seguir; ele oferece o poder de indexaçã o e
transaçõ es sem a necessidade de configurar uma estrutura relacional formal. Embora
ambas as soluçõ es sejam boas para questõ es típicas de dados, nenhuma foi projetada para
armazenamento de arquivos (como imagens, arquivos de texto, XML ou mesmo
filmes). Para essa necessidade, este capítulo discute a API FileSystem. Por ú ltimo, você verá
como tornar um site inteiro amigá vel off-line com muito pouco esforço usando o cache
HTTP do aplicativo off-line .
À medida que cada ferramenta é revisada, preste atençã o aos níveis de suporte nos
navegadores modernos de hoje, porque essa é uma consideraçã o importante ao decidir se
vai adotar a ferramenta em seu pró ximo aplicativo.
■■ Liçã o 1: Trabalhando com Web SQL 582
■■ Liçã o 2: Trabalhando com IndexedDB 589
■■ Liçã o 3: Trabalhando com a API FileSystem 600

■■ Liçã o 4: Trabalhando com o cache HTTP 608 do aplicativo offline
Introduçã o do livro. Como nenhum navegador atual oferece suporte a todos os recursos off-
line, alguns dos exemplos requerem navegadores diferentes se você quiser seguir em frente
em seu pró prio equipamento.
581
Lição 1: Trabalhando com Web SQL
O Web SQL é indiscutivelmente uma das opçõ es mais poderosas disponíveis para você. Ele
fornece um banco de dados relacional completo que inclui muitos dos recursos que você
passou a aproveitar com as ofertas de banco de dados do outro lado.
A maioria das implementaçõ es atuais é construída em SQLite, que é um dos motores de

banco de dados leves mais amplamente usados. É uma soluçã o de có digo aberto com uma
comunidade vibrante de apoio.
■ ■ Descrever o uso de Web SQL.
■■ Implementar transaçõ es usando Web SQL.
Considerando a longevidade questionável do Web SQL
Antes de começar com o Web SQL, esteja ciente de que o World Wide Web Consortium
(W3C) declarou que o Web SQL nã o está mais em sua trilha de recomendaçã o. Em 2010, o
W3C Web Applications Working Group anunciou que nã o pretende manter a especificaçã o .
NOTA SUPORTE DESCONTINUADO
Para obter mais detalhes sobre a decisão do W3C de descontinuar o suporte do Web
SQL
especificações, consulte sua explicação em http://dev.w3.org/html5/webdatabase/ .

O que isso significa para o Web SQL depende do navegador que você está
direcionando. Embora a especificaçã o nã o seja mais mantida, alguns navegadores
continuaram com o suporte.
(Consulte o Capítulo 15 para uma lista completa.) Portanto, Web SQL pode ser uma opçã o
viá vel se você estiver construindo especificamente para uma plataforma como iOS para
iPad ou iPhone. Outro uso comum é em extensõ es do Google Chrome. Se você estiver
construindo um aplicativo independente de navegador, considere uma das outras soluçõ es
de armazenamento offline.
Se você planeja desenvolver com Web SQL, pode ser uma boa ideia lembrar quais
alternativas estã o disponíveis (como IndexedDB) e qual nível de esforço pode ser
necessá rio se outros fornecedores de navegador decidirem abandoná - lo no futuro.
Criação e abertura do banco de dados
Nas seçõ es a seguir, examine a sintaxe usada para criar ou abrir um banco de dados, iniciar
uma transaçã o e executar um comando SQL. A maioria desses comandos deve parecer
muito familiar se você tiver usado outros bancos de dados relacionais.
582 CAPÍTULO 16 Aplicativos da web off-line
Para iniciar a comunicaçã o com um banco de dados, use o método op enDatabase, que

retorna um objeto Banco de Dados. Se você tentar abrir um banco de dados que nã o existe,
ele será criado automaticamente para você, portanto, você nã o precisará executar
nenhuma etapa extra para novos bancos de dados. A seguir estã o os parâ metros
openDatabase .
■■ nome O nome do banco de dados, que diferencia maiú sculas de minú sculas. A maioria
dos personagens sã o permitidos; mesmo uma string vazia é considerada vá lida.
■■ versão Versão esperada do banco de dados. Se uma string vazia for passada, está
implícito que qualquer versã o que exista atualmente está bem.
■■ displayName Nome descritivo do banco de dados.
■■ estimatedSize tamanho estimado necessá rio para o banco de dados. O valor padrã o

típico é 5 MB; o navegador pode solicitar permissã o ao usuá rio, dependendo do tamanho
que você especificar.
■■ creationCallba ck Se o banco de dados ainda nã o existe e está sendo criado, este cal -
back será invocado. É opcional e nã o é necessá rio que o banco de dados seja criado e com
controle de versã o corretamente.
No exemplo a seguir, um banco de dados denominado Biblioteca é criado com um tamanho

estimado de 5
MB. Ele retorna um objeto Banco de Dados que oferece suporte a operaçõ es transacionais .
var db = openDatabase ('Biblioteca', '1.0', 'Minha biblioteca', 5 * 1024 * 1024); Se você está
familiarizado com conexõ es de banco de dados tradicionais, pode estar esperando a
necessidade de fechar uma conexã o. Com o Web SQL, no entanto, isso é feito
automaticamente, entã o você nã o precisa fechar a conexã o manualmente.
Executando atualizações de esquema
Conforme seu aplicativo cresce, seus requisitos de dados mudam. Pode ser necessá rio
adicionar novas tabelas, eliminar as existentes ou até mesmo alterar colunas específicas. O
objeto Banco de Dados fornece os seguintes ganchos para fazer essas alteraçõ es.
■■ version Propriedade que obtém a versã o do esquema atual
■■ Método changeVersion para realizar mudanças de esquema entre uma versã o e a

pró xima
O método changeVersion contém os seguintes argumentos.
■■ oldVe rsion Schema versã o que você estiver migrando de
■■ nova versã o do esquema de versã o para a qual você está migrando
■■ método de callback Cal back contendo alteraçõ es de esquema, como adicionar e

descartar tabelas
■■ errorCallback Opcional; o método cal back é invocado se ocorrer um erro enquanto a

transaçã o está sendo processada
■■ successCallback Opcional; o método de retorno é invocado se todas as

operaçõ es forem executadas com sucesso dentro da transaçã o
Liçã o 1: Trabalhando com Web SQL CAPÍTULO 16 583
Adicionando uma mesa
Você pode adicionar uma tabela de autores ao banco de dados da Biblioteca criado
anteriormente. Você precisa de um método de retorno que aceite um objeto de transaçã o,
que execute o script CREATE TABLE. O objeto de transaçã o permite vá rias açõ es dentro
dele e automaticamente reverte todas as alteraçõ es se alguma falhar. Por enquanto, este
exemplo mantém a ideia simples, adicionando apenas uma tabela.
funçã o migrateDB (transaçã o) {

tra nsaction.executeSql ("CRIAR TABELA SE NÃ O EXISTIR autores (" +
"id INTEGER PRIMARY KEY AUTOINCREMENT," +
"firstName TEXT," +
"lastName TEXT," +
"dateCreated TIMESTAMP DEFAULT (datetime ('now', 'localtime')))");
function onError (erro) {
alert (" Có digo de erro :" + error.code + "Mensagem:" + error.message);
function onSuccess () {
alert ("Migraçã o concluída!");
var db = openDatabase ('Biblioteca', '1.0', 'Minha biblioteca', 5 * 1024 *

1024); db.changeVersion ('1.0', '2.0', migrateDB, onError, onSuccess); Posteriormente no
capítulo, você pode ler a propriedade de versã o do objeto Banco de Dados para determinar
a versã o do esquema com a qual está trabalhando. Observe que as atualizaçõ es de versã o
sã o aplicadas de forma assíncrona, portanto, se a linha a seguir foi colocada imediatamente
apó s a chamada db.chang eVersion () no có digo anterior, ainda exibiria 1.0 porque o
método alert () dispararia antes que as migraçõ es tivessem uma chance completar.
alert ("Esquema atual:" + db.version);
Agora que a migraçã o foi aplicada, você tem uma nova tabela em seu banco de dados com
as seguintes colunas.
■■ identificador da tabela id ; novos registros sã o automaticamente atribuídos a um id

maior que o id do ú ltimo registro adicionado.
■■ campo de texto firstName para armazenar o primeiro nome de uma pessoa.
■■ campo de texto lastName para armazenar o sobrenome de uma pessoa.

■■ carimbo de data / hora criado ; quando um registro é criado pela primeira vez, o
padrã o dessa coluna é a hora atual com a ajuda do método datetime do SQLite. Em vez de
usar o modo padrã o GMT, você pode indicar que deve usar o fuso horá rio local.
Usando transações
Agora que você possui um esquema, pode usar transaçõ es para executar instruçõ es
SQL. Para fazer isso, o objeto Banco de Dados fornece os dois métodos a seguir.
■■ transação Inicia uma nova transaçã o que executa instruçõ es SQL; permite ler e

escrever comandos
■■ readTransaction Funciona de maneira semelhante ao método de transaçã o, mas

permite apenas comandos de leitura
Ambos os métodos aceitam os mesmos três parâ metros.
■■ método de callback Cal back contendo os comandos individuais que devem ser

executados como parte da transaçã o
■■ errorCallback Método opcional de retorno invocado se ocorrer um erro enquanto a

transaçã o está sendo processada
■■ successCallback Método opcional de retorno invocado se todas as instruçõ es forem

executadas com sucesso dentro da transaçã o
O método cal back receberá um objeto de transaçã o que inclui um método executeSql para
realizar alteraçõ es de dados. Possui os seguintes parâ metros.
■■ sqlStatement A string da instruçã o SQL a ser executada.
■■ argumentos Matriz de parâ metros de objeto a serem usados pelo comando SQL.
■■ callback Método opcional de call back chamado depois que o comando é

executado. Quando os dados sã o recuperados, este método inclui a coleta de linhas
selecionadas.
■■ errorCallback Método opcional de retorno de chamada invocado se ocorrer um

erro enquanto a instruçã o está sendo executada.
Na pró xima seçã o, você verá como pode usar transaçõ es para executar alguns dos
comandos SQL mais comumente usados.

Agora que você tem um banco de dados e uma tabela no lugar, adicione um novo
registro. Assim como criar uma nova tabela, faça isso usando o método executeSql na
instâ ncia da transaçã o.

1024); db.transaction (function (t) {
t.executeSql ("INSERT INTO autores (firstName, lastName)"
+ " VALORES ('Daniel', 'Defoe')");
});
No entanto, em geral, é uma boa ideia usar parâ metros SQL ao trabalhar com SQL
dinâ mico. A instruçã o anterior pode ser reescrita para aproveitar as vantagens de um
segundo parâ metro opcional no método executeSql, que aceita uma matriz de valores de
campo. Observe o uso de pontos de interrogaçã o para indicar que o valor será preenchido a
partir da matriz que está sendo passada.
var firstName = 'Daniel';
var lastName = 'Defoe';
db.transaction (function (t) {
t.executeSql ("INSERT INTO autores (primeiro nome, sobrenome) VALORES (?,?)"
, [primeiro nome, ultimo nome]);
});
Você pode dar um passo adiante adicionando um cal de volta ao método executeSql, que
permite capturar o Id da linha recém-criada.
Liçã o 1: Trabalhando com Web SQL CAPÍTULO 16 585
function itemInserted (transaçã o, resultados) {
alert ("Id:" + results.insertId);
var firstName = 'Daniel';

var lastName = 'Defoe';
t.executeSql ("INSERT INTO autores (firstName , lastName) VALUES (?,?)"
, [primeiro nome, ultimo nome]
, itemInserted);
});
No exemplo a seguir, o sobrenome do autor, que possui um id 1, é atualizado. Além das

diferenças de sintaxe SQL, é muito semelhante ao có digo usado para adicionar um novo
registro.
var db = openDatabase ('Biblioteca', '2.0', 'Minha biblioteca', 5 * 1024 * 1024); var authorId

= 1;
var lastName = 'Smith';
t.executeSql ("ATUALIZAR autores SET lastName =? WHERE id =?"
, [lastName, authorId]);
});
A remoçã o de registros também é bastante simples. O exemplo a seguir exclui o registro do

autor com um id 1.
var db = openDatabase ('Biblioteca', '2.0', 'Minha biblioteca', 5 * 1024 * 1024); var authorId

= 1;
t.executeSql ("EXCLUIR DOS autores WHERE id =?", [authorId]);
});
Lendo valores da base de dados

Agora que você sabe como adicionar dados ao banco de dados, pode ler e exibir esses
registros de volta para o usuá rio. Crie uma instruçã o SELECT simples para ler todos os
valores da tabela de autores.
Quando executeSql é chamado desta vez, um método de retorno é passado, aceitando um

objeto de transaçã o e um conjunto de resultados contendo as linhas retornadas da
instruçã o SQL.
Conforme o método displayResults itera pelas linhas, ele formata o nome da pessoa em um
item da lista e o adiciona a uma lista nã o ordenada com um id de itens. Para acessar os
valores de colunas individuais dentro da linha, use a notaçã o de ponto, que lê cada um
como uma propriedade do objeto.
function displayResults (transaçã o, resultados) {
para (var i = 0; i <results.rows.length; i ++) {
var item = results.rows.item (i);
$ ('# items'). append ('<li>' + item.firstName + "" + item.lastName + '</li>');
586 CAPÍTULO 16 Aplicativos da web offline

1024); db.transaction (function (t) {
t.executeSql ("SELECIONE * DOS autores", [], displayResults)
});
Como você está apenas recuperando dados, com a mesma facilidade poderia ter usado o
método readTransaction em vez do método de transaçã o.
db.readTransaction (function (t) {
t.executeSql ("SELECIONE * DOS autores", [], displayResults)

});
■■ A seguinte declaração tem um erro de sintaxe na segunda etapa do

Transact ion neste script de migração (com erros ortográficos CRIAR como
CRATE). O que você espera que aconteça por causa desse script de migração?
funçã o migrateDB (transaçã o) {
transaction.executeSql ("CREATE TABLE autores (firstName

TEXT)"); transaction.executeSql ("CRATE TA BLE books (title TEXT)");

1024); db.changeVersion ('1.0', '2.0', migrateDB)
■■ Nenhuma tabela será criada.
Resultados de filtragem
Você raramente deseja ler todas as linhas de uma tabela de banco de dados; na maioria das
vezes, você precisa limitar esses resultados a critérios específicos. Como as
implementaçõ es atuais sã o baseadas em SQLite, você tem todo o poder de um mecanismo
de banco de dados maduro para ajudá -lo.
Por exemplo , você pode adicionar uma clá usula WHERE para retornar apenas registros
com um valor lastName específico, como segue.
var db = openDatabase ('Biblioteca', '2.0', 'Minha biblioteca', 5 * 1024 * 1024); var

lastName = 'Defoe';
t.executeSql ("SELECT * FROM autores WHERE lastName =?", [lastName], displayResults)
});
Você pode querer encontrar todos os autores cujo sobrenome comece com a letra D. Para
fazer isso, use a palavra-chave LIKE junto com o curinga '%'.
var lastName = 'D%';

t.executeSql ("SELECIONE * DE autores WHERE lastName LIKE?", [lastName], Liçã o 1:

Trabalhando com Web SQL CHA PTER 16 587
displayResults)
});
Usando comandos JOIN
Web SQL inclui suporte para instruçõ es JOIN tradicionais (como INNER JOIN e LEFT
JOIN), que pode ser usado para incluir colunas de vá rias tabelas em um ú nico SELECT
demonstraçã o.
Suponha que você adicionou uma tabela de livros ao banco de dados de sua biblioteca e
agora gostaria de modificar sua consulta anterior para incluir o título de cada livro nos
resultados.
var db = openDatabase ('Biblioteca', '2.0', 'Minha biblioteca', 5 * 1024 * 1024); var

lastName = 'D%';
db.transaction (functi on (t) {
t.executeSql ("SELECT a.firstName, a.lastName, b.title" +
"FROM autores a" +
"INNER JOIN books b ON a.id = b.authorId" +
"ONDE gosta de um.sobrenome?"
, [sobrenome]
, displayResults)
});
Funções de agregação
Outro recurso ú til do Web SQL é a capacidade de agrupar resultados, o que permite o uso
de funçõ es mais avançadas, como COUNT (x), MIN (x), MAX (x) e SUM (x) em seu SELECT
declaraçõ es. Por exemplo, o seguinte é uma nova consulta que encontra o nú mero de livros
escritos por cada autor.
t.executeSql ("SELECT a.firstName, a.lastName, COUNT (b.id) AS numOfBooks" +
"FROM autores a" +
"INNER JOIN books b ON a.id = b.authorId" +
"GRUPO POR a.id"
, []
, displayResults)
});
Resumo da lição
■■ O World Wide Web Consortium (W3C) declarou que a especificaçã o Web SQL nã o está
mais em sua trilha de recomendaçã o. Ele ainda pode ser usado para almejar plataformas
específicas que têm suporte contínuo, mas outras opçõ es, como IndexedDB e
armazenamento na web, devem ser consideradas quando possível.
■■ As implementaçõ es atuais do navegador sã o baseadas em SQLite, que oferece todo o

poder de um banco de dados relacional completo.
■■ A comunicaçã o do banco de dados é iniciada chamando o comando openDatabase (). Se

o banco de dados nã o existir, ele será criado automaticamente.
■■ O suporte à migraçã o de esquema está disponível usando o método changeVersion ().
■■ Web SQL oferece suporte a uma sintaxe SQL comum para operaçõ es de criaçã o,
recuperaçã o, atualizaçã o e exclusã o (CRUD) .
■■ Se uma instruçã o em uma transaçã o falhar, todas as açõ es serã o revertidas.
Revisão da aula
liçã o. Você pode encontrar as respostas a essas perguntas e explicaçõ es sobre por que cada
1. Qual das opçõ es a seguir seria uma boa candidata para Web SQL?
A. Aplicativos mó veis desenvolvidos especificamente para Safari na plataforma

iOS B. Aplicativos mó veis desenvolvidos para qualquer dispositivo mó vel
C. Aplicativos da web voltados ao pú blico
D. Aplicativos mó veis desenvolvidos especificamente para o Internet Explorer 2. Você

precisa criar um novo banco de dados. Qual dos seguintes comandos você deve usar?
A. var db = createDatabase ('mydb', '1.0', 'My database', 5 * 1024 * 1024); B. var db = novo

banco de dados ('mydb');
C. var db = initDatabase ('mydb', '1.0', 'Meu banco de dados', 5 * 1024 * 1024); D. var db =

openDatabas e ('mydb', '1.0', 'Meu banco de dados', 5 * 1024 * 1024); 3. Qual das opçõ es a
seguir inserirá corretamente um novo registro, usando valores passados como SQL
argumentos para uma chamada executeSql ()?
A. t.executeSql (“INSERT INTO books (title) VALUES (?)”, [“A Tale of Two
Cities” ]); B. t.executeSql (“INSERT INTO books (title) VALUES ([0])”, [“A Tale of Two
Cities”]); C. t.executeSql (“INSERT INTO books (title) VALUES ([1])”, [“A Tale of Two
Cities”]); D. t.executeSql (“INSERT INTO books (title) VALUES ({0})”, [“A Tale of Two
Cities”]); Les son 2: Trabalhando com IndexedDB
Até agora, você viu dois extremos para o armazenamento de dados do lado do cliente. O
armazenamento na Web fornece um modelo de persistência de chave / valor simples, mas
carece de alguns dos recursos que sã o importantes ao trabalhar com um banco de dados. O
outro extremo, Web SQ L, fornece muitos dos recursos associados a um banco de dados
relacional totalmente funcional, mas traz consigo todo o trabalho manual necessá rio para
configurar e manter a estrutura de persistência.
IndexedDB fornece um meio-termo entre as duas alternativas. É um banco de dados de

chave / valor no qual os valores podem variar de strings simples a estruturas de objetos
complexas. Para fornecer recuperaçã o e pesquisa rá pidas, inclui uma maneira fá cil de criar
índices para cada um de seus objetos. Liçã o 2: Trabalhando com IndexedDB CAPÍTULO 1 6
589
lojas. Muito parecido com o Web SQL, a interface com o banco de dados é baseada em
transaçõ es e requer esforço mínimo.
Como o W3C anunciou que nã o continuará o desenvolvimento da especificaçã o Web SQL, o

IndexedDB ganhou ainda mais suporte. Embora ainda nã o seja suportado por todos os
principais navegadores, ele tem uma adoçã o mais ampla do que o Web SQL.
■■ Descreva o uso de IndexedDB.
■■ Compreender o uso de armazenamentos de objetos.
■■ Implementar transaçõ es usando Web SQL.

Usando código específico do navegador
Para trabalhar com IndexedDB, você precisa usar métodos que podem conter prefixos
específicos do navegador devido ao desenvolvimento contínuo da especificaçã o. Para
tornar seus exemplos compatíveis com diferentes navegadores, inclua a correçã o a seguir
no início de seus scripts para evitar a necessidade de colocar ló gica específica do navegador
em cada um de seus métodos. Todos os exemplos subsequentes serã o baseados neste
có digo.
window.indexedDB = window.inde xedDB || window.mozIndexedDB
|| window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction
|| window.webkitIDBTransaction; window.IDBCursor = window.IDBCursor
|| window.webkitIDBCursor;
window.IDBKeyRange = window.IDBKey Range || window.webkitIDBKeyRange; Criação e

abertura do banco de dados
A primeira etapa para trabalhar com IndexedDB é criar e abrir um banco de dados. Você
precisa acessar o objeto indexedDB do navegador, que, no exemplo anterior, foi atribuído a
uma variá vel consistente .
var indexedDB = window.indexedDB;
Esta variá vel indexedDB é um objeto IDBFactory que fornece acesso aos seus bancos de
dados por meio do método aberto, que possui os seguintes parâ metros.
■■ nome O nome do armazenamento de objeto
■■ versão opcional; a versã o do armazenamento de objetos
Este método retorna um objeto IDBRequest e inicia um processo assíncrono de abertura de

uma conexã o. O objeto IDBRequest inclui um evento de sucesso que pode ser inscrito, que
fornece uma notificaçã o quando a conexã o está pronta para uso. Ele também inclui 590
CAPÍTULO 16 aplicativos da web offline
evento onerror que pode notificar seu aplicativo se ocorrer um erro durante uma tentativa
de conexã o. O exemplo a seguir mostra o método aberto.
var indexedDB = window.indexedDB;
v ar openRequest = indexedDB.open ('Biblioteca', 1);

var db;
openRequest.onsuccess = function (response) {
db = openRequest.result;
};
openRequest.onerror = function (response) {
alert ("Có digo de erro:" + response.target.errorCode);
};
Neste exemplo, o método aberto é chamado e, no manipulador de eventos onsuccess,

a variá vel db é atribuída uma referência ao objeto de banco de dados para uso posterior.
Usando armazenamentos de objetos
Em bancos de dados relacionais padrã o, sã o criadas tabelas definidas por esquemas

rígidos. Cada tabela contém um conjunto de colunas, cada uma com um nome e um tipo de
dados. Isso nã o permite muita flexibilidade porque requer muito trabalho quando
mudanças de esquema sã o necessá rias.
Portanto, em vez dessas estruturas de tabela, IndexedDB usa espaços chamados de

armazenamento de objetos, que sã o á reas de armazenamento de chave / valor.
Compreendendo o controle de versão
Antes de criar um novo armazenamento de objeto, você precisa entender como IndexedDB
lida com a versã o.
var openRequest = indexedDB.open ('Biblioteca', 1);
Nesta chamada para abrir uma conexã o de banco de dados, um nú mero de versã o é
passado como o segundo parâ metro. O objeto de solicitaçã o recebido contém um evento
onupgradeneeded que será acionado se a versã o solicitada nã o corresponder à versã o atual
do banco de dados existente. Ele também será acionado se o banco de dados ainda nã o
existir. O evento onupgradeneeded será disparado antes do evento onsuccess.
O evento onupgradeneeded é definido pela ú ltima especificaçã o da API . As versõ es

anteriores tratavam do controle de versã o por um método setVersion no objeto de banco
de dados. Se você está almejando versõ es mais antigas do navegador, certifique-se de usar
o método de controle de versã o apropriado.
Dentro do manipulador de eventos necessá rio, use o método createObjectSt ore para alocar

uma nova á rea de armazenamento. Este método requer um nome de armazenamento de
objeto e um objeto contendo quaisquer parâ metros extras para usar na configuraçã o do
armazenamento.
Liçã o 2: Trabalhando com IndexedDB CAPÍTULO 16 591
Usando a propriedade keypath
Uma propriedade importante do objeto de parâ metro é o caminho-chave. Seu objetivo é

especificar qual propriedade no objeto de valor deve ser usada como a chave. Essa chave é
entã o usada como índice primá rio para instâ ncias armazenadas. Se a propriedade
especificada pelo caminho-chave nã o existir no objeto de valor, você deve usar um gerador
de chave, como autoIncrement, que cria chaves numéricas de autoincremento para você
conforme a seguir.
openRequest.onupgradeneeded = function (response) {
response.curren tTarget.result.createObjectStore ("autores",
{caminho-chave: 'id', autoIncrement: true});
};
Neste exemplo, um novo armazenamento de objeto denominado “autores” é

criado. Observe que você nã o é obrigado a identificar as propriedades explicitamente ou
mesmo identificar o tipo de objeto que será armazenado. No entanto, este exemplo permite
que IndexedDB crie as chaves definindo a propriedade autoIncrement como true. Você
poderia facilmente especificar um campo no objeto de valor como a chave.
Você poderia usar o seguinte exemplo de có digo se cada autor tivesse um e-mail que você
gostaria de usar como chave.
response.currentTarget.result.createObjectStore ("autores", {caminho-chave:

'email'}); Adicionando índices
Embora a chave seja o índice primá rio para armazenamentos de objetos, você pode
especificar outros índices.
Isso pode fornecer um aumento de desempenho se outras propriedades além da chave
puderem ser comumente usadas na classificaçã o ou filtragem. Para fazer isso, use o método
createIndex no armazenamento de objeto, que possui os seguintes parâ metros.
■■ nome O nome do índice.
■■ keyPath Especifica a propriedade no objeto de valor para o qual o índice será criado.
■■ optionalParameters Parâ metro opcional que pode conter um objeto com propriedades

usadas para configuraçõ es de índice avançado. Atualmente, IndexedDB oferece suporte a
duas configuraçõ es avançadas. O primeiro é 'un ique', que quando verdadeiro adiciona uma
restriçã o à propriedade que proíbe dois registros de terem o mesmo valor. A segunda
propriedade que pode ser definida é 'multiEntry', que indica como o índice deve se
comportar quando o keyPath é uma matriz. Se definido como verdadeiro, uma entrada de
índice n é criada para cada valor na matriz. Se definido como falso, uma ú nica entrada de
índice é criada para a matriz como um todo.
O seguinte demonstra o uso do método createIndex no armazenamento de objeto para um

novo índice nã o exclusivo para a propriedade lastName do armazenamento de objeto de
autores.
var store = response.currentTarget.transaction.objectStore ("autores"); store.createIndex

('lastName', 'lastName', {unique: false});
};
O método createIndex é chamado durante uma migraçã o de banco de dados, dentro

do manipulador de eventos on updatedeneeded, para garantir que o índice seja criado
quando a versã o for atualizada.
Removendo índices
Se decidir que um índice nã o é mais necessá rio, você pode removê-lo criando uma
migraçã o de banco de dados que usa o método deleteIndex () do armazenamento de
objeto , conforme mostrado no có digo de exemplo a seguir.

var store = response.currentTarget.transaction.objectStore ("autores"); store.deleteIndex
('lastName');
};
Removendo armazenamentos de objetos
Como você provavelmente já deve ter adivinhado, as etapas para remover um

armazenamento de objeto sã o muito semelhantes à s etapas para criar um. Você cria uma
nova migraçã o que usa o método deleteObjectStore () do banco de dados como a seguir.
response.currentTarget.result.deleteObjectStore ("autores");
};
Usando TRANSAC ções
Quando seus armazenamentos de objeto estã o no lugar, você deve usar o objeto
IDBTransaction para adicionar ou remover objetos. Um objeto IDBTransaction, que é uma
transaçã o, é criado usando o método de transaçã o do objeto de banco de dados e leva os
seguintes parâ metros .
■■ objectStoreNames Especifica os armazenamentos de objetos com os quais a transaçã o

funcionará . Se apenas um armazenamento de objeto for necessá rio, o parâ metro pode ser
uma ú nica string. Se vá rios armazenamentos de objetos forem necessá rios, passe uma
matriz de strings. O que se segue é um exemplo de como abrir uma transaçã o para um
ú nico armazenamento de objeto.
var trans = db.transaction ('autores');
Aqui está um exemplo de abertura de uma transaçã o para vá rios armazenamentos de

objetos.
var trans = db.transaction (['autores', 'livros']);
■■ modo Opcional quando os valores possíveis sã o somente leitura e leitura e gravação . Se

nã o for especificado, a transaçã o será padronizada como somente leitura . Se deixado no
modo somente leitura, vá rias transaçõ es podem ser executadas simultaneamente. A seguir
está um exemplo de uma transaçã o sendo aberta no modo somente leitura.

var trans = db.transaction ('autores', 'somente leitura'); Exemplo de uma transaçã o sendo
aberta no modo de leitura e escrita.
var trans = db.transaction ('autores', 'readwrite');
Apó s a criaçã o de uma instâ ncia de transaçã o , você pode usá -la para adicionar um novo
registro. Para fazer isso, você deve primeiro encontrar o armazenamento de objeto ao qual
deseja adicionar o registro. Chame o método add do armazenamento de objeto, que irá
inserir o registro de forma assíncrona. O método add retorna uma instâ ncia reques t na
qual você pode se inscrever em um evento onsuccess que fornece uma notificaçã o quando a
operaçã o é concluída. Você pode entã o usar a propriedade request.result para obter o id
gerado automaticamente para o novo registro. Você também pode assinar o onerror e vent
se a operaçã o falhar, conforme mostrado no exemplo a seguir.
var db;
addAuthor ();
};
function addAuthor () {
var autores = trans.objectStore ("autores");
var request = author.add ({firstName: 'Daniel', lastName: 'Defoe'}); request.onsuccess =

function (response) {
alert ('Novo id de registro:' + request.result);
};
request.onerror = function (response) {// erro de exibiçã o};

}
Modificar objetos existentes é semelhante a adicionar um registro, mas em vez do método

add, você usa o método put do armazenamento de objeto. Na verdade , você pode usar o
método put para adicionar e atualizar valores. O método add, entretanto, pode ser usado
apenas para novos registros. Uma exceçã o é lançada se o método add for chamado usando
uma chave que já existe. O có digo a seguir demonstra o uso do método put.
var db;
updateAuthor ();
};
function updateAuthor () {
var request = author.put ({firstName: 'Bob', lastName: 'Defoe'}, 1); request.onsuccess =

function (response) {
alert ('ID de registro atualizado:' + request.result);
};
}
O exemplo anterior atualiza o nome e o sobrenome do registro do autor com uma chave de
1.
Para remover um objeto armazenado, você só precisa saber seu valor de chave, que é
passado para o método delete do armazenamento de objeto.
function deleteAuthor () {
var trans = db.transact ion ('autores', 'readescrever');
solicitação var = autores.delete (1);
request.onsuccess = function (response) {// sucesso! };
Vá rios métodos estã o disponíveis para localizar registros existentes. Se você precisar

encontrar um registro específico, use o método get do armazenamento de objeto. O ú nico
parâ metro necessá rio para passar ao método é a chave do objeto que está sendo
recuperado. Como outras operaçõ es, isso precisa ser feito dentro de uma transaçã o. No
exemplo a seguir, o modo de transaçã o é definido como somente leitura .
var db;
getAuthor ();
};

function getAuthor () {
var trans = db.transaction ('autores', 'somente leitura');
solicitação var = autores.get (1);
request.onsuccess = function (response) {
var author = response.target.result;
alert ('Sobrenome:' + autor.lastName);
};
A outra abordagem para localizar registros é usando cursores. Um cursor pode ser aberto
chamando o método openCursor do armazenamento de objetos, que retorna um objeto de
solicitaçã o e aceita os seguintes parâ metros.
■■ intervalo Este parâ metro permite que você forneça um intervalo de chaves para limitar
os registros incluídos nos resultados.
■■ direção Por padrã o, os cursores sã o executados em ordem ascendente final. Para

alterar a ordem para decrescente, use IDBCursor.PREV.
A seguir está um exemplo simples que itera por meio de todos os registros mantidos no
armazenamento de objeto de autores.
var db;

findAuthors ();
};
function findAuthors () {
solicitação var = autores.openCursor ();
var cursor = response.target.result;
if (! cursor) {
alert ('Nenhum registro encontrado.');
Retorna;
alert ('Id:' + cursor.key + 'ú ltimo nome:' + cursor.value.lastName); cursor.continue ();
};
O pró prio cursor está na propriedade result da resposta do manipulador de eventos

onsuccess.
Se nenhum registro for encontrado, a saída de sucesso ainda será acionada, mas o resultado
será indefinido (ou nulo). Se forem encontrados registros, a propriedade value do cursor
conterá o registro atual. Para continuar iterando, invoque o método continue do cursor,
que irá acionar o evento onsuccess 596 CHA PTER 16 Aplicativos da web offline
manipulador novamente, desta vez com o pró ximo registro nos resultados. Ao chegar ao
final da coleçã o, o evento de sucesso terá um cursor nulo.
Cursores de indexação
Os cursores também podem ser criados usando um índice de um armazenamento de

objetos. Um cursor padrã o, como o do exemplo anterior, pode ser criado usando o método
openCursor e retornará todo o objeto associado ao valor do índice. No entanto, se você só
precisa das chaves correspondentes e nã o do objeto completo, pode usar o método
openKeyCursor.
O seguinte é uma versã o modificada do método findAuthors, que cria um cursor contra o
índice lastName em vez de ir diretamente contra o armazenamento de objeto. A ordem de
classificaçã o é especificada como IDBCursor.PREV, portanto , o resultado do autor é
classificado pelo sobrenome em ordem decrescente.
function findAuthors () {
var autores = trans.objectStore ('autores');
índice var = autores.index ('sobrenome');
solicitação de var = índice. openCursor (nulo, IDBCursor.PREV);
if (! cursor) {
alert ('Nenhum registro encontrado.');
Retorna;

alert ('Index value (lastName):' + cursor.key
+ 'Nome:' + cursor.value.firstName);
cursor.continue ();
};
Aplicando limites de intervalo de chave
Na maioria das vezes, apenas um subconjunto de um armazenamento de objeto é

necessá rio, em vez de todo o conteú do. Para limitar os resultados, passe
um valor IDBKeyRange como o primeiro parâ metro para o método openCursor.
A seguir está uma lista dos vá rios métodos de intervalo disponíveis por meio do objeto
IDBKeyRange.
■■ limite O tipo de intervalo mais flexível é o método de limite, pelo qual você especifica os
limites superior e inferior e especifica se os limites externos devem ser incluídos nos
resultados. O método de intervalo limitado aceita os parâ metros a seguir.
■■ inferior Especifica o botã o inferior do intervalo.
■■ superior Especifica o limite superior do intervalo.
■■ lowerOpen Opcional; pode ser verdadeiro ou falso. Se verdadeiro, o limite inferior do

intervalo é considerado limitado, portanto, o limite inferior nã o será incluído nos
resultados. Se falso, é considerado ilimitado e o limite inferior será incluído nos resultados.
■■ upperOpen Opcional; pode ser verdadeiro ou falso. Se verdadeiro, o limite superior nã o

será incluído nos resultados. Se for falso, ele será incluído.
Por exemplo , considere um índice na propriedade lastName no armazenamento de objeto

autores.
A seguir estã o alguns resultados em cená rios quando os intervalos sã o aplicados a esse
índice.
conteúdo dos autores: Daniel Defoe, Herman Melvil e, Mark Twain, Júlio
Verne index.openCursor (IDBKey Range.bound ('Defoe', 'Verne', falso, falso)); resultados:
Daniel Defoe, Herman Melvil e, Mark Twain, Júlio Verne index.openCursor
(IDBKeyRange.bound ('Defoe', 'Verne', falso, verdadeiro)); resultados: Daniel Defoe, Herman
Melvil e, Mark Twain
index.openCursor (IDBKeyRang e.bound ('Defoe', 'Verne', verdadeiro, falso)); resultados:

Herman Melvil e, Mark Twain, Júlio Verne
index.openCursor (IDBKeyRange.bound ('Defoe', 'Verne', verdadeiro,

verdadeiro)); resultados: Herman Melvil e, Mark Twain
■■ upperBound O método upperBound permite que você limite apenas o lado superior do
intervalo. A seguir estã o os parâ metros do método upperBound.
■■ superior Especifica o limite superior do intervalo.
■■ upperOpen Opcional; pode ser verdadeiro ou falso. Se verdadeiro, o limite superior nã o

conteú do dos autores: Daniel Defoe, Herman Melville, Mark Twain, Jú lio Verne
index.openCursor (IDBKeyRange.upperBound ('Verne', falso));
resultados: Daniel Defoe, Herman Melvil e, Mark Twain, Jules Ver ne index.openCursor

(IDBKeyRange.upperBound ('Verne', true));
resultados: Daniel Defoe, Herman Melvil e, Mark Twain
■■ lowerBound O método lowerBound permite limitar apenas a extremidade inferior do

intervalo. A seguir estã o os parâ metros do método lowerBound.
■■ inferior Especifica o limite inferior do intervalo.
■■ lowerOpen Opcional; pode ser verdadeiro ou falso. Se verdadeiro, o limite inferior nã o

conteú do dos autores: Daniel Defoe, Herman Melville, Mark Twain, Jules Ve rne
index.openCursor (IDBKeyRange.lowerBound ('Defoe', false));
resultados: Daniel Defoe, Herman Melvil e, Mark Twain, Júlio Verne 598 CAPÍTULO
16 Aplicativos da web off-line
index.openCursor (IDBKeyRange.lowerBound ('Defoe', true)); resultados: Herman Melvil e,

Mark Twain, Júlio Verne
■■ somente Você pode restringir a um valor de chave específico em vez de um intervalo

usando o ú nico método. O seguinte é um parâ metro do ú nico método.
■■ valor O valor- chave específico com o qual fazer a correspondência.
conteú do dos autores: Daniel Defoe, H erman Melville, Mark Twain, Jú lio Verne
index.openCursor (IDBKeyRange.only ('Twain'));
resultados: Mark Twain
O objeto IDBFactory que é referenciado pelo objeto indexedDB contém um método

deleteDatabase que remove um banco de dados existente e. Este método recebe um
parâ metro de nome e retorna um objeto de solicitaçã o imediatamente enquanto tenta
eliminar o banco de dados de forma assíncrona, conforme mostrado no exemplo a seguir.
var dropRequest = indexedDB.deleteDatabase ('Biblioteca');
dropRequest.onsuccess = function (response) {// sucesso! };
dropRequest.onerror = function (response) {// display error}; Se o banco de dados nã o

existir, nenhuma açã o será executada. Se outra conexã o com o banco de dados estiver
aberta, um evento bloqueado será disparado pelo objeto de solicitaçã o.
Resumo da lição
■■ IndexedDB é um banco de dados de objetos baseado em chave disponível na maioria

dos navegadores atuais.
■■ Os bancos de dados contêm armazenamentos de objetos, que sã o, de certa forma,

equivalentes à s estruturas de tabelas em um banco de dados relacional.
■■ Cada armazenamento de objeto tem um caminho de chave designado que identifica sua
chave.
■■ Em vez de uma propriedade no valor do objeto, uma chave pode ser criada por meio de
um gerador de chave, como autoIncrement, que cria um identificador numérico distinto
à medida que novos registros sã o adicionados.
■■ Índices podem ser criados para propriedades diferentes da chave que pode ser
comumente usada para classificaçã o ou filtragem.
■■ Todas as operaçõ es sã o realizadas por meio de transaçõ es, que podem ser somente
leitura ou leitura /
Escreva. As operaçõ es somente leitura podem ser executadas simultaneamente.

■■ O método add de um armazenamento de objeto pode ser usado apenas para adicionar
novos registros, mas seu método put pode ser usado para registros novos ou
existentes. Seu método de exclusã o remove registros.
■■ Os cursores localizam registros em um armazenamento de objeto e podem ser criados

no pró prio armazenamento de objeto ou em um de seus índices.
Revisão da aula
1. Qual dos recursos a seguir nã o é compatível com IndexedDB?
A. Transaçõ es
B. Cursores
C. Indexado
D. SQL
2. Qual é o método correto para criar uma transaçã o que adicionará um novo registro?
A. var trans = db.transaction ('autores', 'somente leitura');
B. var trans = db.transaction ('autores', 'readwrite');
C. var trans = db.transaction ('autores');
D. var trans = db.createTransaction ('autores', 'leitura escrita'); 3. Qual método de

armazenamento de objeto recupera um registro por seu valor-chave?
A. get (chave)
B. encontrar (chave)
C. ú nico (chave)
D. primeiro (chave)
Lição 3: Trabalhando com a API FileSystem

Até agora, você viu vá rias maneiras de armazenar dados do usuá rio no navegador e,
embora possa usar soluçõ es como URIs de dados para armazenar bits maiores de
informaçõ es (imagens, arquivos de texto e assim por diante), nenhuma foi realmente
projetada para esse tipo de uso e certamente resultaria em custos de alto desempenho.
HTML5 tem uma soluçã o: a API FileSystem. Usando a API FileSystem, você pode criar
diretó rios e arquivos em um local em á rea restrita no sistema de arquivos do usuá rio, e isso
abre a porta para uma série de novos recursos que antes eram limitados a aplicativos de
desktop .
Nesta liçã o, você aprenderá a usar a API FileSystem para realizar tarefas comuns, como
criar e ler arquivos. Embora a liçã o nã o cubra todos os recursos disponíveis, você deve
obter uma compreensã o de alto nível do que essa tecnologia oferece .
■■ Descrever o uso da API FileSystem.
■■ Implemente a API FIleSystem.
No momento em que este livro foi escrito, o ú nico navegador importante que suporta a API
FileSystem é o Chrome, entã o você pode querer instalá -lo se quiser seguir os exemplos. Nã o
se sabe se outros navegadores estã o planejando adicionar suporte no futuro.
Devido ao seu suporte limitado ao navegador, os aplicativos mais comuns para aproveitar
as vantagens da API FileSystem sã o aqueles direcionados ao Chrome, como as extensõ es do
Chrome.
O objeto de janela JavaScript contém um método para fazer solicitaçõ es para abrir
a comunicaçã o com o sistema de arquivos. Dependendo da versã o do Chrome que você
instalou, pode ser window.requestFileSystem () ou window.webkitRequestFileSystem
(). Para tornar os exemplos a seguir tã o compatíveis quanto possível, o fragmento a
seguir está no topo dos scripts subsequentes.
window.requestFileSystem = window.requestFileSystem ||
window.webkitRequestFileSystem;
O método requestFileSystem opera de forma assíncrona e inclui calbacks de sucesso e erro
que fornecem notificaçã o de que o aplicativo pode começar a ler e gravar arquivos.
Os seguintes parâ metros sã o aceitos.
■■ tipo Este parâ metro especifica se o sistema de arquivos deve ser temporá rio ou
permanente. Se for temporá rio, você passa TEMPORARY como o argumento e o
navegador remove automaticamente os arquivos que precisam de espaço. Se passar em
PERSISTENT, os arquivos sã o retirados somente quando solicitado pelo aplicativo ou
usuá rio.
■■ tamanho Este parâ metro é uma estimativa do tamanho (em bytes) que o aplicativo
precisará .
■■ successCallback Se a solicitaçã o de um sistema de arquivos for bem-sucedida, essa

chamada de retorno será chamada e incluirá um objeto FileSystem como argumento.
■■ errorCallback Se a solicitaçã o falhar, este calback é invocado e inclui um argumento

FileError. O erro inclui um có digo que indica por que a falha ocorreu, como exceder a cota
ou descobrir problemas de segurança.
Liçã o 3: Trabalhando com a API FileSystem CAPÍTULO 16 601
Para criar um arquivo, você deve primeiro ter um objeto DirectoryEntry para que tenha
um local alocado para colocar o arquivo. O argumento FileSystem passado para successCal
de volta inclui um DirectoryEntry especial como uma propriedade chamada root, que
aponta para a raiz do sistema de arquivos reservado especificamente para o aplicativo
(origem). Posteriormente nesta liçã o , você aprenderá como criar um subdiretó rio sob o
root. Por enquanto, você cria um novo arquivo neste local.
Um objeto DirectoryEntry tem um método getFile que pode criar novos arquivos e ler
aqueles que já existem. A seguir estã o os parâ metros do método getFile.
■■ caminho Caminho para o arquivo que está sendo solicitado. Ambos os caminhos

relativos e absolutos podem ser usados.
■■ opções Permite dois sinalizadores, criar e exclusivo, que indicam como o arquivo deve
ser aberto. Se o arquivo nã o existir, create deve ser definido como true ou um erro será
gerado. Se ambos criar e exclusivo estiverem definidos como verdadeiros, será feita uma
tentativa de criar o arquivo, mas ocorrerá um erro se o arquivo já existir.
■■ successCallback Se o arquivo for criado ou aberto com sucesso, este callback será

invocado com um argumento FileEntry.
■■ errorCallback Se a solicitaçã o falhar, esse retorno será invocado e incluirá um
argumento FileError.
O exemplo a seguir cria um novo arquivo temporá rio denominado “exemplo.txt” no

diretó rio raiz.
window.r equestFileSystem (TEMPORARY, 5 * 1024 * 1024, getFile, handleError); function

getFile (fileSystem) {
fileSystem.root.getFile ("example.txt", {criar: true}, fileOpened, handleError);
function fileOpened (fileEntry) {
alert ("Arquivo aberto!");
function handleError (erro) {
alerta (có digo de erro);
Quando você tem acesso a um objeto FileEntry, pode criar um FileWriter, que mantém os
dados no arquivo aberto. Isso é feito usando seu método de gravaçã o, que aceita um
parâ metro de dados de objeto biná rio grande (BLOB).
No exemplo a seguir, o método fileOpened no exemplo anterior é modificado para criar um

novo FileWriter e gravar uma linha de texto no documento aberto. Observe que, no método
writeToFile, você deve atribuir os backs onwriteend e onerror cal antes de executar a açã o
de gravaçã o.
window.requestFileSystem (TEMPORARY, 5 * 1024 * 1024, getFile, handleError); function

fileSystem.root.ge tFile ("example.txt", {criar: true}, fileOpened, handleError);
}

fileEntry.createWriter (writeToFile, handleError);
function writeToFile (fileWriter) {
fileWriter.onwriteend = function () {alert ('Sucesso'); }; fileWriter.onerror = function

() {alert ('Falha'); };
fileWriter.write (new Blob (['Hello world'], {type: 'text / plain'}));
Se você estivesse abrindo um arquivo existente e quisesse acrescentar novos dados ao final
do arquivo, usaria o método de busca para apontar o cursor para o final do arquivo,
conforme a seguir.
fileWriter.onwriteend = function () {alert ('Sucesso'); };
fileWriter.onerror = function () {alert ('Falha'); };
fileWriter.seek (fileWriter.length);
Lendo um arquivo
O objeto FileEntry também possui um método file, que o faz retornar um objeto File. Depois
de ter uma referência a um objeto File, você pode lê-la usando o objeto
FileReader. Semelhante ao FileWriter, você deve definir seus backs onloadend e onerror cal
antes de fazer uma tentativa de leitura.
O exemplo a seguir usa o método readAsText para ler o conteú do do arquivo e armazená -lo
em uma string que pode ser acessada no valor this.result no retorno de chamada
onloadend.
window.requestFileSystem (TEMPORARY, 5 * 102 4 * 1024, getFile, handleError); function

fileEntry.file (readFile, handleError);
function readFile (file) {
var fileReader = new FileReader ();
fileReader.onloadend = function () {alert (this.result); }; Liçã o 3: Trabalhando com a

API FileSystem CAPÍTULO 16 603
fileReader.onerror = function () {alert ('Failed'); }; fileReader.readAsText (arquivo);
function ha ndleError (erro) {
Além do método readAsText, o objeto FileReader contém os métodos readArrayBuffer e

readAsDataURL para ler tipos de conteú do diferentes de texto.
A ú ltima operaçã o de arquivo abordada nesta seçã o é a exclusã o de um arquivo. Como as
outras operaçõ es, isso requer um objeto FileEntry. Como o objeto FileEntry é herdado do
objeto Entry, ele possui um método de remoçã o para remover a si mesmo do sistema de
arquivos. Ele aceita uma chamada de retorno successCal e uma chamada de
retorno onError, conforme demonstrado no exemplo a seguir.
window.requestFileSystem (TEMPORARY, 5 * 1024 * 1024, getFile, handleError); function

fileEntry.remove (fileRemoved, handleError);
function fileRemoved () {
alerta ('Sucesso');
Criação e abertura de um diretório
Trabalhar com diretó rios na API FileSystem é muito semelhante a trabalhar com
arquivos. Por exemplo, para abrir ou criar um arquivo, use o método getFile. Para fazer o
mesmo com um diretó rio, use o método getDirectory.
O exemplo a seguir cria uma nova diretriz chamada “Capítulo 16”. Se for criado com
sucesso y, seu caminho completo será exibido.
window.requestFileSystem (TEMPORARY, 5 * 1024 * 1024, getDirectory,

handleError); function getDirectory (fileSystem) {
fileSystem.root.getDirectory ("Capítulo 16", {criar: true}, directoryOpened,
handleError);
function directoryOpened (directoryEntry) {
alert (directoryEntry.fullPath); // exibirá "/ Capítulo 16"
Gravando um arquivo em um diretório
Você aprendeu a adicionar um arquivo ao diretó rio raiz do sistema de arquivos do seu
aplicativo. O exemplo a seguir grava o arquivo em um novo subdiretó rio.

handleError); function getDirectory (fileSyst em) {

handleError);
directoryEntry.getFile ("example.txt", {criar: true}, fileOpened, handleError);
function fileOpened ( fileEntry) {

fileEntry.createWriter (writeToFile, handleError);
fileWriter.onwriteend = function () {alert ('Sucesso'); };
fileWriter.onerror = function () {alert ('Falha'); };
fileWriter.seek (fileWriter.length);
Excluindo um diretório
O objeto DirectoryEntry também herda do objeto Entry, que fornece um método de

remoçã o para excluir seu elfo do sistema de arquivos. No entanto, esse método pode ser
usado apenas para diretó rios vazios. Um erro será gerado se o diretó rio contiver outros
subdiretó rios ou arquivos.

handleError); function ge tDirectory (fileSystem) {

handleError);
Liçã o 3: Trabalhando com a API FileSystem CAPÍTULO 16 605

directoryEntry.remove (directoryRemoved, handleError);
function directoryRemoved () {
alerta ('Sucesso');
Para excluir um diretó rio forçosamente, junto com qualquer conteú do sob ele em
subdiretó rios e arquivos, use o método removeRecursively como a seguir.
directoryEntry.removeRecursively (directoryRemoved, handleError);
L resumo Lição
■■ Você pode usar a API do sistema de arquivos para armazenar arquivos biná rios no
sistema de arquivos do cliente.
■■ Chrome é atualmente o ú nico navegador importante com suporte para API de sistema
de arquivos.
■■ A comunicaçã o com o sistema de arquivos é iniciada por meio

do método requestFileSystem disponível no objeto janela.
■■ Os sistemas de arquivos podem ser criados usando dois modos. O primeiro,

TEMPORÁ RIO, permite que o navegador remova os arquivos automaticamente se for
necessá rio espaço. Somente o aplicativo ou usuá rio pode excluir o conteú do se o segundo
modo, PERSISTENT, for usado.
■■ Os arquivos sã o criados e abertos usando o método getFile no objeto DirectoryEntry.
■■ Um FileWriter é usado para escrever e anexar a um arquivo.

■■ A classe FileReader contém os seguintes métodos para ler o conteú do de um arquivo :
readAsText, readArrayBuffer e readAsDataURL.
■■ Um arquivo pode ser removido chamando o método de remoçã o FileEntry.
Revisão da aula
1. Qual dos métodos a seguir você deve usar ao armazenar arquivos que sã o relativamente
sem importâ ncia e podem ser removidos se o navegador estiver com pouco espaço
disponível?
A. window.requestFileSystem (LOW, 5 * 1024 * 1024, getDirectory,

handleError); B. window.requestFileSystem (PERSISTENT, 5 * 1024 * 1024, getDirectory,
handleError); 606 CAPÍTULO 16 Aplicativos da web off-line
C. window.requestFileSystem (SIMPLE, 5 * 1024 * 1024, getDirectory,

handleError); D. window.requestFileSystem (TEMPORARY, 5 * 1024 * 10 24, getDirectory,
handleError);
2. Qual das opçõ es a seguir permite que o FileWriter anexe dados ao final do arquivo?
A. fileWriter.seek (fileWriter.length);
B. fileWriter.seek (fileWriter.end);
C. fileWriter.moveLast ()
D. fileWriter.moveToEnd ();
3. Qual das seguintes opçõ es remove um diretó rio que contém arquivos existentes?
A. directoryEntry.remove (directoryRemoved,
handleError); B. directoryEntry.removeRecursively (directoryRemoved,
handleError); C. directoryEntry.removeAl (directoryRemoved,
handleError); D. directoryEntry.remove (directoryRemoved, ALL, handleError) Lição 4:
Trabalhando com o aplicativo HTTP offline
esconderijo
Você aprendeu sobre vá rios recursos que fornecem a oportunidade de armazenar pares de
chave / valor, elementos de dados estruturados, objetos e arquivos. No entanto, nenhum
deles sozinho permite que seu aplicativo opere offline facilmente. Suponha que você tenha
um aplicativo da web dinâ mico que obtém todos os seus dados de uma instâ ncia
IndexedDB local, mas ainda precisa recuperar itens como arquivos CSS, arquivos
JavaScript, imagens e a pró pria pá gina da web. Até certo ponto, você já tem esse recurso
por meio do cache do navegador, mas ele sempre foi pouco confiá vel e nã o poderia
funcionar verdadeiramente sem uma conexã o de rede.
O HTML5 oferece uma melhoria no armazenamento em cache com o cache de aplicativo ,

que apresenta a capacidade de configurar como os arquivos sã o armazenados em cache,
incluindo um arquivo de manifesto. Nesse arquivo, há uma lista de recursos a serem
incluídos e excluídos do cache e designaçõ es de arquivo alternativas para servir em alguns
casos.
O aplicativo pode funcionar nos bastidores para manter o cache local atualizado conforme
o arquivo de manifesto é atualizado. Se você perder a conexã o com a Internet e o navegador
for colocado off-line, ele mudará automaticamente para servir arquivos locais.
■■ Compreender o cache HTTP do aplicativo offline.
■■ Implementar o cache HTTP do aplicativo offline.
Liçã o 4: Trabalhando com o cache HTTP do aplicativo offline CAPÍTULO 16 607
O cache do aplicativo agora é compatível com a versã o mais recente de todos os principais
navegadores. O Internet Explorer é o mais recente a adicionar suporte com o lançamento
do Internet Explorer 10. Também é compatível com a maioria dos navegadores mó veis, o
que pode torná -lo muito ú til quando os serviços de dados cel ular nã o estã o disponíveis.
O cache do aplicativo depende da existência de um arquivo de manifesto em seu aplicativo

da web. A chave para ser servido corretamente é usar o tipo de conteú do text / cache-
manifest no HTTP
resposta. O pró prio arquivo pode residir em qualquer lugar em seu servidor web, como /
home / manifest ”ou
“/Manifest.appcache. Se você escolher usar uma referência de arquivo está tico, pode ser
necessá rio configurar o tipo MIME no Internet Information Server (IIS) primeiro ou
adicionar um el emento mimeMap ao arquivo web.config do seu aplicativo da seguinte
forma.
<system.webServer>
<staticContent>
<mimeMap fileExtension = ". appcache" mimeType = "text / cache-manifest" />
</staticContent>
</system.webServer>
Para incluir o arquivo de manifesto em seu aplicativo, ele deve ser referenciado usando o
atributo de manifesto no elemento < html > da pá gina, conforme a seguir.
<! DOCTYPE html>
<html manifest = "manifest.appcache">
Este exemplo faz referência ao arquivo de manifesto usando uma URL ar elativa, mas você
pode usar uma URL absoluta, desde que seja parte da mesma origem, como a seguir.
<html manifest = "http://www.example.com/manifest.appcache"> Entendendo a

estrutura
Você aprendeu como fazer referência a um arquivo de manifesto e que deve ser
servido com o texto /
tipo de conteú do cache-manifest. A seguir está a aparência de um arquivo de manifesto de

amostra.
MANIFESTO DE CACHE
# versã o 1.0
# Declaraçõ es de cache explícitas
CACHE:
/Content/Styles/Site.css
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js
# O seguinte nã o deve ser armazenado em cache
REDE:
/Conecte-se/
/ API /
# Arquivos alternativos
CAIR PRA TRÁ S:
/ Content / Images / Products / /Content/Images/offline.jpg
Existem algumas coisas importantes a serem destacadas neste exemplo. Primeiro, a linha

superior do arquivo deve ser sempre a instruçã o CACHE MANIFEST. As linhas de
comentá rio começam com um símbolo # e serã o ignoradas pelo navegador. Linhas vazias
também sã o ignoradas. O arquivo possui as três seçõ es a seguir.
■■ CACHE Esta seçã o contém todos os itens que você deseja armazenar em cache
explicitamente. Os URLs dentro dele podem ser totalmente qualificados ou relativos à
localizaçã o do arquivo de manifesto. Você também pode listar esses arquivos diretamente
no cabeçalho CACHE MANIFEST.
■■ REDE Esta seçã o contém URLs listados e que requerem uma conexã o. Esses arquivos
nã o serã o incluídos no cache, portanto, nã o estarã o disponíveis off-line. No exemplo, a
seçã o / API / do site é especificada porque essa á rea contém serviços que só podem
funcionar quando uma conexã o de rede está disponível.
■■ FALLBACK A ú ltima seçã o permite que você especifique arquivos substitutos que você
nã o deseja armazenar em cache por qualquer motivo, mas gostaria que algo fosse usado em
seu lugar.
O URL do lado esquerdo é substituído pelo da direita. Neste exemplo, todas as imagens no

diretó rio Produtos devem ser substituídas por uma imagem offline.jpg padrã o.
Atualizando o cache
Quando uma alteraçã o é feita no arquivo de manifesto, o navegador é acionado para baixar
todos os arquivos listados nele. Ele faz isso de forma assíncrona nos bastidores, portanto ,
nã o bloqueará a renderizaçã o da pá gina exibida.
Depois que o navegador armazena em cache os recursos listados no arquivo de manifesto,
esses arquivos sã o mantidos até que ocorra uma das seguintes situaçõ es.
■■ O arquivo de manifesto é atualizado.
■■ O manual do usuá rio limpa o cache.
■■ O cache é atualizado por meio de um script criado pelo desenvolvedor.
Uma mudança em um recurso em si nã o faz com que ele seja atualizado automaticamente
dentro do cache, entã o pode ser muito fá cil para o cache se tornar
obsoleto. Uma prá tica comum é incluir um nú mero de versã o ou carimbo de data / hora
como uma linha de comentá rio que é atualizada com cada implementaçã o do aplicativo da
web conforme a seguir.
MANIFESTO DE CACHE
# versã o 1.0
■■ Quando você usa a seção FALLBACK de um arquivo de manifesto?
Resposta rápida
■■ Use a seção FALLBACK para especificar substituições para recursos no modo

offline.
Liçã o 4: Trabalhando com o cache HTTP do aplicativo offline CAPÍTULO 16 609
Entendendo eventos
Em geral, o processo de cache do aplicativo ocorre silenciosamente, mas o objeto

window.applicationCache permite que você injete alguma funcionalidade personalizada
nesse fluxo de trabalho.
Conforme o navegador executa cada etapa do processo de cache, ele dispara uma série de
eventos no objeto applicationCache. A seguir, um resumo dessas vésperas .
■■ verificação É sempre o primeiro acionado na sequência de eventos. Indica que o

navegador está verificando se o arquivo de manifesto foi atualizado ou precisa ser baixado
pela primeira vez.
■■ noupdate Se for determinado que o arquivo de manifesto nã o foi alterado, o evento

noupdate será acionado. Nenhum outro evento será disparado depois.
■■ download Se o navegador determinar que o arquivo foi alterado ou será baixado pela
primeira vez, este evento será disparado enquanto os novos arquivos estã o sendo baixados.
■■ progresso Conforme os novos arquivos estã o sendo baixados, este evento irá

disparar. Ele incluirá um atributo total refletindo o nú mero de arquivos a serem
baixados. Ele também incluirá um atributo carregado para indicar o nú mero de arquivos
que foram baixados até agora.
■■ em cache Este evento é disparado depois que todos os arquivos sã o baixados pela

primeira vez.
■■ updateReady Se um cache existente foi atualizado, este evento será disparado para
informar que todos os arquivos foram baixados.
■■ obsoleto O evento obsoleto será disparado se a solicitaçã o do arquivo de manifesto

resultar em um resultado 404 ou 410. O conteú do do cache será excluído.
■■ erro A construçã o do cache pode falhar por vá rios motivos, como um URL de recurso
invá lido listado no manifesto. Se o processo falhar, o evento de erro será disparado.
O objeto applicationCache inclui um método update () que pode ser usado para iniciar o
processo de cache de forma programá tica, conforme a seguir.
window.applicationCache.update ();
Apó s o download do novo cache e o disparo do evento updateReady, você pode chamar o
método swapCache para substituir o cache antigo pelo novo, como a seguir.
window.applicationCache.addEventListener ('updateready',
function () {window.applicationCache. swapCache (); }, falso);
Resumo da lição
■■ O cache do aplicativo incorpora um arquivo de manifesto que pode ser personalizado

para a forma como o aplicativo opera quando está em um estado offline.
■■ A primeira linha de um arquivo de manifesto deve conter a instruçã o CACHE

MANIFEST .
■■ Os URLs podem ser incluídos explicitamente no cache, adicionando-os à seçã o CACHE

do arquivo, ou podem ser adicionados diretamente abaixo da instruçã o CACHE MANIFEST.
■■ Os itens que podem operar apenas quando uma conexã o de rede está presente devem
ser listados na seçã o REDE do arquivo de manifesto.
■■ A seçã o FALLBACK do arquivo de manifesto fornece um local para designar
substituiçõ es de arquivo quando no modo offline.
■■ É uma boa ideia incluir um nú mero de versã o no arquivo de manifesto. Os itens

armazenados em cache nã o sã o atualizados automaticamente quando alterados no
servidor.
■■ Vá rios eventos estã o disponíveis no objeto window.applicationCache que fornecem

notificaçã o para que seu aplicativo possa reagir à s alteraçõ es do cache.
Revisão da aula
1. Qual das seguintes é uma declaraçã o vá lida para a primeira linha de um arquivo de
manifesto?
A. CACHE
B. MANIFESTO DE CACHE
C. CACHE-MANIFEST
D. CACHE-SEWAYS
2. Qual evento é disparado depois que um cache existente foi atualizado com novos
recursos?
A. baixando
B. em cache
C. updateReady
D. completado
Pratica exercícios

Exercício 1: modificar um livro de conta para usar IndexedDB
No exercício do capítulo anterior, você criou um catá logo de contatos armazenado

em localStorage . Neste exercício, você modifica esse site para usar IndexedDB. Se você nã o
terminou o exercício prá tico no Capítulo 15, “Dados locais com armazenamento na web”, os
Exercícios Prá ticos deste capítulo incluem uma soluçã o Visual Studio que está pronta para
você usar. Se estiver usando o Internet Explorer, você deve ter a versã o 10 instalada.
1. Abra o Visual Studio Express 2012 para Web. Clique em Arquivo e escolha Abrir
Projeto. Selecione a pasta ContactBook na pasta Exercise1Start e, em seguida, selecione
ContactBook.
arquivo sln; clique em Abrir.
2. Os nomes das variá veis IndexedD B com as quais você precisará trabalhar variam em
diferentes navegadores. Lide com essas diferenças adicionando o seguinte ao início do
arquivo ContactsLibrary.js.
window.indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB;
3. Prepare-se para adicionar uma instâ ncia de banco de dados que seja acessível a todos os
métodos no namespace por meio de uma variá vel db no início da funçã o de expressã o de
funçã o imediatamente chamada (IIFE).
var db;
var currentRecord;
4. Dentro do método de inicializaçã o, crie o armazenamento de objeto de contatos e abra a

conexã o com o banco de dados. Em vez de depender apenas do índice de um item dentro do
conjunto de resultados total, permita que IndexedDB crie uma chave auto-incrementada
conforme a seguir.
$ ('# btnSave'). on ('click', ns. save);

var request = indexedDB.open ('Capítulo 16', 1);
request.onupgradeneeded = function (response) {
var options = {keypath: 'id', autoIncrement: true};
response.currentTarget.result.createObjectStore ("contatos", opçõ es);
};
db = solicitaçã o.resultado;
ns.display ();
};
};
5. Converta os métodos restantes na ordem em que aparecem no arquivo JavaScript,

começando com o método save. Dentro dele, inicie uma transaçã o de leitura e gravaçã o no
armazenamento de contatos. Se estiver atualizando um registro existente, use o método
put. Se adicionar um novo registro, use o método add.
Observe que isso ocorre de forma assíncrona.
var trans = db.transaction ('contatos', 'leitura escrita');
var contatos = trans.objectStore ("contatos");

var request = currentReco rd.key! = null
? contact.put (contact, currentRecord.key)
: contatos.add (contato);
ns.display ();
};
};
Carregar a lista de contatos requer o uso de um cursor para iterar e construir uma matriz
de resultados. No capítulo anterior, a variá vel de resultados era uma matriz simples de
registros de contato. Em contraste, esse có digo cria uma matriz de objetos que contém a
chave do objeto e a instâ ncia do contato. Depois que curs ou passar do final do conjunto de
dados, seu objeto de resultado será nulo.
6. No ponto nulo do objeto de resultado, chame o método bindToGrid conforme a seguir.
currentRecord = {chave: nulo, contato : {}};
var trans = db.transaction ('contatos', 'somente leitura');
var request = trans.objectStore ("contatos"). openCursor (); resultados de var = [];
if (! cursor) {
Retorna;
results.push ({chave: cursor.key, contato: cursor.value}); cursor.continue ();
};
};
7. O método loadContact agora pode ser alterado para usar o método get do
armazenamento de objeto para encontrar o registro selecionado por sua chave, como a
seguir.
var store = trans.objectStore ("contatos");
var request = store.get (chave);
currentRecord = {chave: chave, contato: resposta.target.result}
};
};
Nenhuma mudança é necessá ria no método di splayCurrentRecord.

Como a matriz de resultados que é passada para o método bindToGrid contém objetos que
sã o um pouco mais complexos, o loop for precisa de algumas modificaçõ es. Lembre-se de
que a chave de dados agora é a chave primá ria do objeto, em vez de apenas seu índice. Seu
método bindToGrid deve ser semelhante ao seguinte.
var html = '';
var chave = resultados [i] .key;
var contato = resultados [i] .contato;
html + = '<tr> <td>' + contact.email + '</td>'; html + = '<td>' + contact.firstName + ''

+ contact.lastName + '</td>'; html + = '<td> <a class = "edit" href = "javascript: void
(0)" data-key ='
+ key + '> Editar </a> </td> </tr>';
Ao terminar, o arquivo JavaScript final deve ser semelhante ao seguinte.
window.indexedDB = window.indexedDB || window.mozIndexedDB || janela.
webkitIndexedDB || window.msIndexedDB;

});
(funçã o () {
var db;
var currentRecord;
var request = indexedDB.open ('Capítulo 16', 1);
request.onupgradeneeded = function (response) {
var options = {keypath: 'id', autoIncrement: true};
response.currentTarget.result.create ObjectStore ("contatos", opçõ es);
};
db = solicitaçã o.resultado;
ns.display ();
};
};
var contatosJSON = localStorage.getItem ('contatos');
retornar contatosJSON? JSON.parse (contactsJSON): [];
var request = trans.objectStore ("contatos"). openCursor (); resultados de var = [];
if (! cursor) {
Retorna;
resultados.push ({chave: cursor.key, contato: cursor.value});

cursor.continue ();
};
var html = '';
var chave = resultados [i] .key;
var contato = resultados [i] .contato;
html + = '<tr> <td>' + contact.email + '</td>'; html + = '<td>' + contact.firstName + '' +

data-key =' +
key + '> Editar </a> </td> </tr>';
var store = trans.objectStore ("contatos");
var request = store.get (chave);

currentRecord = {chave: chave, contato: resp onse.target.result}
};
};
$ ('# email'). val (contact.email);
contact.email = $ ('# email ') .val ();

var trans = db.transaction ('contatos', 'leitura escrita');
var contatos = trans.objectStore ("contatos");
var request = currentRecord.key! = null
? contact.put (contact, currentRecord.key)
: contatos.add (contato);
ns.display ();
};
};
}) ();
e escolha Definir como pá gina inicial.
9. Execute o site e comece a adicionar contatos. Tente fechar o navegador e executar

novamente o site para ver os contatos persistentes.
O site se comporta da mesma forma que no capítulo anterior.

capítulo.
■■ Exercício 1 Adicionar a capacidade de excluir itens do aplicativo de catá logo de

contatos.
■■ Exercício 2: Converta o aplicativo de catá logo de contatos para usar Web SQL em vez
de IndexedDB. Certifique-se de usar um navegador que suporte Web SQL, como Chrome ou
Safari.

Respostas
Lição 1
A. Correto: como os aplicativos da web iOS podem ser direcionados ao navegador mó vel

do Safari especificamente, você pode ter certeza de que o Web SQL estará disponível.
B. Incorreto: Nem todos os navegadores mó veis suportam Web SQL e, portanto, devem

ser evitados.
C. Incorreto: Nem todos os navegadores de desktop suportam Web SQL e, portanto, devem

ser evitados.
D. Incorreto: o Internet Explorer nã o oferece suporte para Web SQL.
A. Incorreto: um comando createDatabase () nã o existe no Web SQL.
B. Incorreto: um novo banco de dados nã o pode ser criado instanciando uma instâ ncia da
classe Database.
C. Incorreto: um comando initDatabase () nã o existe no Web SQL.
D. Correto: O comando openDatabase () é usado para bancos de dados novos e existentes.
A. Correto: O ponto de interrogaçã o é usado como um espaço reservado para argumentos

SQL que estã o sendo passados.
B. Incorreto: Nenhuma sintaxe está disponível para acessar argumentos por um índice

baseado em zero.
C. Incorreto: Nenhuma sintaxe está disponível para acessar argumentos por um índice

baseado em um.
D. Incorreto: Esta forma de espaço reservado é comumente usada para string.Format ()

método cal s em C #, mas nã o é vá lido para Web SQL.
Lição 2
A. Incorreto: as transaçõ es sã o suportadas por IndexedDB.
B. Incorreto: Cursores sã o suportados por IndexedDB.
C. Incorreto: os índices sã o suportados por IndexedDB.
D. Correto: A sintaxe SQL nã o é compatível com IndexedDB.
A. Incorreto: uma exceçã o é lançada se uma açã o de gravaçã o, como adicionar um novo

registro, é executada usando uma transaçã o no modo somente leitura.
B. Correto: as transaçõ es devem estar no modo leitura e gravaçã o para adicionar um novo
registro.
C. Incorreto: Se um modo de transaçã o nã o for especificado, o padrã o será o modo

somente leitura.
Isso faria com que uma exceçã o fosse lançada se uma tentativa de adicionar um novo
registro fosse feita.
D. Incorreto: Nã o há funçã o createTransaction.
3. Resposta correta : A
A. Correto: o método get () encontra um valor específico usando sua chave.
B. Incorreto: os armazenamentos de objetos nã o têm um método find ().
C. Incorreto: os armazenamentos de objetos nã o têm um método single ().
D. Incorreto: os armazenamentos de objetos nã o têm um método first ().
Lição 3
A. Incorreto: LOW nã o é um modo de sistema de arquivos vá lido.
B. Incorreto: Usar apenas o modo PERSISTENTE nã o permitirá que o navegador remova

arquivos se começar a ficar sem espaço.
C. Incorreto: SIMPLE nã o é um modo de sistema de arquivos vá lido.

D. Correto: Usar o modo TEMPORÁ RIO permite que o navegador remova arquivos
conforme a necessidade de espaço.
A. Correto: o método seek () move o cursor para o local fornecido, que neste caso será o
final do arquivo porque você está passando o comprimento do arquivo inteiro.
B. Incorreto: para encontrar o final do arquivo, você deve usar a propriedade

de comprimento .
C. Incorreto: A classe FileWriter nã o contém um método moveLast ().
D. Incorreto: A classe FileWriter nã o contém um método moveToEnd ().
A. Incorreto: O método remove pode ser usado apenas para diretó rios que estã o vazios . Se
um arquivo ou subdiretó rio existir em um directorty, um erro será gerado.
B. Correto: O método removeRecursively () remove o diretó rio e todos os arquivos e

subdiretó rios abaixo dele.
C. Incorreto: A classe DirectoryEntry nã o tem um método removeAl ().
D. Incorreto: A classe DirectoryEntry nã o tem um método remove ().
Lição 4
A. Incorreto: CACHE nã o é uma declaraçã o vá lida para a primeira linha de um arquivo de

manifesto.
B. Correto: A instruçã o CACHE MANIFEST deve aparecer no topo de cada arquivo de

manifesto.
C. Incorreto: CACHE-MANIFEST nã o é uma declaraçã o vá lida para a primeira linha de um

arquivo de manifesto.
D. Incorreto: CACHE-ALWAYS nã o é uma instruçã o vá lida para a primeira linha de um

arquivo de manifesto.
A. Incorreto: o evento de download é disparado enquanto o navegador está baixando novo
conteú do.
B. Incorreto: O evento em cache é disparado apenas para caches recém-criados.
C. Correto: O evento upd ateReady avisa quando um cache é atualizado com novos

recursos.
D. Incorreto: O objeto applicationCache nã o possui um evento concluído disponível.
Índice
Símbolos
; (ponto e vírgula), 71, 139
'(aspas simples), 69
&& (and) operator, 70-71, 84
- operador (subtraçã o), 67-69
+ (adiçã o) operador, 67-68, 70
caractere ~ (til), 152
& (e comercial), 41, 322
_ (sublinhado), 45, 72-73
símbolo * (asterisco), 147, 155
caractere \\ (barra invertida), 69
símbolo ^ (circunflexo), 156
UMA
: (dois pontos), 150 , 327
© (copyright), 41
< Uma > elemento
/ (divisã o) operador, 67-68, 70

atributo data-linktype, 157-158
$ (sinal dó lar), 72-73, 157, 288
descrito, 32
"(aspas duplas), 41, 69
elemento < dfn > e, 218
/ (barra), 337
atributo href, 46, 153 –157
> (sinal de maior que), 41, 148
atributo alvo, 46-47
símbolo # (hash)
trabalhando com hiperlinks, 46-47
seletores de id e, 146
Elemento < abbr >, 32, 214-215, 218
hiperlinks internos e, 46
abortar evento, 119
suporte jQuery, 289
posiçã o absoluta ( elemento < div >), 182-186
no arquivo de manifesto, 609
extensã o de arquivo .acc, 444
em valores RGB, 166
Cabeçalho Access-Control-Al ow-Origin, 380-381
<(sinal de menor que), 41
Janela de acessibilidade (IE), 159
* operador (multiplicaçã o), 67-68, 70
Accessibl e Rich Internet Applications (ARIA), 212

! (nã o) operador ló gico, 70-71
atributo global accesskey, 37
|| (ou) operador ló gico, 70-71
elemento < acrônimo >, 214
! === operador, 84
: pseudo classe ativa, 149
operador ===, 84
funçã o addEventListener (), 115, 2 95, 567
() (parênteses), 68-69
operador de adiçã o (+), 67-68, 70
. símbolo (ponto final), 146, 327
elemento < endereço >, 32, 215
+ (sinal de mais), 67-69, 151, 327
seletores adjacentes, 151-152
? (ponto de interrogaçã o), 322, 327
Adobe Flash Player, 557
® (marca registrada) , 41
621
:: após o pseudo elemento
: apó s o pseudo elemento, 150
argumentos para funçõ es, 73-76
: depois do seletor, 224
ARIA (Accessible Rich Internet Applications), 212
evento afterprint, 117
operadores aritméticos, 68
mó dulos agregados, 348
itens de matriz, 109
funçõ es de agregaçã o, 588
métodos de matriz, 110-112
AJAX chamadas para serviços da web
Objeto Array
descrito, 368-369
como objeto embutido, 67
erros de manuseio, 372-373
método concat (), 110
processamento de progresso, 371-372
criando instâ ncia, 108-109
jQuery promises, 377-380 , 394-395
método indexOf (), 110
Wrappers jQuery XMLHttpRequest, 373-377
método join (), 110
Objeto XMLHttpRequest, 369-371
método lastIndexOf (), 110
funçã o alert (), 76, 79, 101
propriedade de comprimento, 109-110
atributo alt
método pop (), 110
elemento < area > , 49
método push (), 110
elemento < img >, 47-48
método reverse (), 111
e comercial (&), 41, 322
método shift (), 111
e (&&) operador, 70-71, 84
método slice (), 111
conteú do de anotaçã o, 213
método sort (), 111
APIs (interfaces de programaçã o de aplicativos), 31
método splice (), 111
Serviço de cache do App Fabric (Microsoft), 422
Método toString (), 111-112
classe de aplicaçã o, 212
método unshift (), 112
interfaces de programaçã o de aplicativos (APIs), 31
método valueOf (), 112
objeto applicationCache
propriedades da matriz, 109-110
s wapCache método (), 610
matrizes
método update (), 610
condensado, 109
formulá rios. Veja aplicativos da web offline; pacote-
criando, 108-109
idades (Node.js)
descrito, 108
serviços da web arbitrá rios, 364, 366
literal, 109
arcos
povoando, 108-109
desenho usando o método arc (), 485-487
prancheta (Mistura), 15
desenho usando o método arcTo (), 481-485
elemento < artigo >, 32, 209
elemento < area >
elemento < aparte >
atributo alt, 49
descrito, 32, 208
atributo coords, 49
elemento < figura > e, 219
criaçã o de mapas de imagem, 49-50
em contêineres de layout, 208, 211-212
descrito, 32
atributo de papel, 212
atributo href, 49
ASP.NET
atributo de forma, 49
Modelo de aplicativo da web vazio, 10-11
como elemento vazio, 38
Ferramenta QUnit e, 90-95
622
Mistura para Visual Studio 2012
Suporte à biblioteca SignalR, 423
resumo e revisã o da liçã o, 446-447, 456-457
símbolo de asterisco (*), 147, 155
atributos definidos pelo autor, 39
atributo assíncrono ( elemento < script >), 101
Atributo booleano de foco automá tico, 321
operaçõ es assíncronas
gerador de chave autoIncrement, 592
cal condicionais, 401-402
atributo autoplay
descrito, 393
elemento < áudio >, 445
resumo e revisã o da liçã o, 402-403, 405-
elemento < video >, 441
406, 413-414
praticar exercícios, 406-412
objetos de promessa e, 394-402
trabalhando com web workers, 404-405, 563
< b > elemento
funçã o attr (), 153
conteú do de anotaçã o, 213-214
atributo contém valor no seletor de lista, 157-158
descrito, 31, 33, 213

atributo contém seletor de valor, 155-156
propriedade de cor de fundo (CSS), 139
seletor de atributo, 153-154
caractere barra invertida (\), 69
o valor do atributo termina com seletor, 157
compatibilidade com versõ es anteriores
seletor de valor de atributo, 154-155
de navegadores, 30
atributos
do CSS3, 138
adicionando elementos, 35-36
classe de banner, 212
definido pelo autor, 39
elemento < base >, 33, 38
Boolean, 35-36, 321, 325
classes bá sicas, 262
costume, 39
elemento < bb >, 33
descrito, 35
elemento < bdo >, 33
expando, 39
: antes do pseudo elemento, 150
global, 37
: antes do seletor, 224
valor de herança, 163

evento beforeonload, 117
recuperando valores de, 153
evento antes da inicializaçã o , 117
elemento < audio >
Licença Berkeley Software Distribution (BSD), 438
atributo de reproduçã o automá tica, 445
grandes serviços da web, 364, 366
configurando, 445-446
operadores biná rios, 70
atributo de controles, 445
Modelo de aplicativo em branco, 6–9, 14, 96
descrito, 32, 443-445
Mistura para Visual Studio 2012
Objeto HTMLMediaElement e, 444, 447
prancheta, 15
atributo de loop, 445-446
Painel de ativos, 14-15, 17
atributo de pré-carga, 446
Guia Propriedades CSS, 15-16
elemento < source > e, 445
descrito, 13-16
atributo src, 446
Painel do dispositivo, 15, 17-18
á udio e sons. Consulte também a guia Atributos HTML do elemento < audio >, 15-16
formatos de á udio, 444

resumo e revisã o da liçã o, 19–20, 27
descrito, 443-444
623
elemento <blockquote>
Painel DOM ao vivo, 14-15, 19
navegadores
formatos de á udio suportados, 444
Painel de projetos, 14-17
compatibilidade com versõ es anteriores, 30
Painel de regras de estilo, 14-15, 18-19
funçõ es integradas, 76-77
Painel de ferramentas, 14-15
centralizar o conteú do na janela, 193
elemento < blockquote >
comentá rios e, 39-40
conteú do de anotaçã o , 215
operaçõ es de arrastar e soltar, 507, 518
citar atributo, 215
compatibilidade com versõ es futuras, 30
descrito, 33, 215
Suporte para Geolocation API, 540
evento de desfoque, 117-118
Suporte para HTML5, 206–207
elemento < body >
Consideraçõ es sobre JavaScript, 101-102
estrutura bá sica do documento , 40-41
contexto aninhado, 34
descrito, 9, 33
modo sem peculiaridades, 40
tag < objeto > e, 51
caracteres especiais e, 41-42
trabalhando com eventos, 117
mecanismos de armazenamento e, 559-561, 566-567,
Atributos booleanos
590, 601, 608
descrito, 35-36, 321, 325
acionando o envio do formulá rio, 319
forma minimizada, 36
API de dados do usuá rio, 557
formulá rio citado, 36
erros de validaçã o, 325
Objeto booleano, 67
formatos de vídeo suportados, 438
Tipo primitivo booleano
comunicaçõ es na web, 312-314
descrito, 67, 70
Suporte WebSocket, 416
operadores ló gicos, 70-71
trabalhando com elementos, 32

avaliaçã o de curto-circuito, 71
trabalhando com estilos, 139, 159
propriedades de borda (CSS), 176-178
Licença BSD (Berkeley Software Distribution), 438
modelo de caixa (CSS)
estilos de navegador integrados, 159
propriedades de fronteira, 176-178
funçõ es integradas, 76-77
descrito, 175-176
< botão > elemento
propriedades de margem, 176-178
descrito, 33, 317
propriedades de preenchimento, 176-178
desabilitando, 36
propriedade de dimensionamento de caixa (CSS), 190-192
< Br > elemento
atributo de tipo, 317
conteú do de anotaçã o, 217
descrito, 33, 217
etiquetas de fechamento automá tico e, 37-38
como elemento vazio, 38, 217
cache (HTTP). Veja o cache HTTP
pontos de interrupçã o
Instruçã o CACHE MANIFEST, 609
configuraçã o em JavaScript, 103-104
evento em cache, 610
configuraçã o em jQuery, 289
calculando distâ ncias, 548-549
624
cascateando instruções if
métodos cal, 279-280
Método fil Text (), 461, 488-489
funçõ es de chamada, 74
propriedade da fonte, 461, 488
evento canplay, 119
Método getImageData (), 461
evento canplaythrough, 119
propriedade globalAlpha, 461
elemento < canvas >
Propriedade globalCompositeOperation, 461
descrito, 33, 460
implementaçã o, 462-463
desenho com imagens, 490
Método isPointInPath (), 461
Método getContext (), 460
propriedade lineCap, 461
atributo de altura, 460
propriedade lineJoin, 461, 471-472 , 474-475

Método lineTo (), 461, 475-477
Método toDataUrl (), 460
propriedade lineWidth, 461, 470-471, 474-475,
atributo de largura, 460
479
Objeto Canvas Pattern, 468-469
método measureText (), 461
Objeto CanvasGradient, 466-468
propriedade miterLimit, 461
Objeto CanvasRenderingContext2D
método moveTo (), 462, 475, 478
Método addColorStop (), 461, 466-467
Método putImageData (), 462
método arc (), 461, 481-485
método quadraticCurveTo (), 462
Método arcTo (), 461, 485-487
método rect (), 462 , 475, 478-479
método beginPath (), 461, 475
método restore (), 462, 474-475
Método bezierCurveTo (), 461
método rotate (), 462
Método clearRect (), 461, 463-464
método save (), 462, 474-475
método clip (), 461

método scale (), 462
Método closePath (), 461, 477-478
Método setTransform (), 462
configurando o estado do desenho, 465-474
propriedade shadowBlur, 462
Método createImageData (), 461
propriedade shadowColor, 462
método createLinearGradient (), 461, 466-467
Propriedade shadowOffsetX, 462
método createPattern (), 461, 468-469
Propriedade shadowOffsetY, 462
Método createRadialGradient (), 461, 466-467
método stroke (), 462, 475, 478-481
propriedade de dados, 461
método strokeRect (), 462-464, 478
descrito, 460
propriedade strokeStyle, 462, 472-475
método drawImage (), 461, 490-493
método strok eText (), 462, 488-489
desenhando arcos, 481-487
propriedade textAlign, 462, 488-489
desenhando retâ ngulos, 463-475, 478-479
propriedade textBaseline, 462, 488-489
desenho de texto, 488-490
método transform (), 462

desenho usando caminhos, 475-487
método translate (), 462
desenho com imagens, 490-494
elemento < legenda >, 33, 241
método endPath (), 475
legendas, adicionando à s tabelas, 241
método fil (), 461, 475, 477-481
símbolo circunflexo (^), 156
método fil Rect (), 461, 463-464, 478
cascateando as declaraçõ es if, 81
propriedade de estilo de fil, 461, 465-470
625
Cascading Style Sheets
Folhas de estilo em cascata. Veja CSS (Estilo em Cascata
elemento < code >, 33, 216–217
Lençó is)
blocos de có digo, 74
estilos em cascata, 160-161
loops de có digo
sensibilidade a maiú sculas e minú sculas
saindo de, 86-87
para tags, 32
descrito, 84
para nomes de variá veis, 72
do loop, 85
bloco de captura, 87
para loop, 85-86
declaraçõ es if encadeadas, 81
loop while, 84-85
evento de mudança, 118
elemento < col >
codificaçã o de caracteres, folhas de estilo e, 143
descrito, 33
regra @charset, 41, 143
colunas de estilo, 241-242
atributo booleano verificado , 36
: pseudo classe marcada, 149
elemento < colgroup >, 33, 241-242
verificaçã o de evento, 610
dois pontos (:), 150, 327
classes infantis, 262
tipo de valor < cor >, 138
seletores filhos, 148
tabela de nomes de cores, 167-171
Caracteres chineses , 220-221
seletor de cores, 4
elemento < círculo >
cores. Ver cores CSS
atributo cx, 498

atributo cols ( elemento < textarea >), 316
atributo cy, 498
atributo colspan
descrito, 498
elemento < td >, 238-240
atributo de preenchimento, 498
< th > elemento, 238-240
atributo de id, 498
elemento < command >, 33, 38
atributo r, 498
comentá rios
círculos, desenho, 485-487, 498-499
adicionando, 39
citaçõ es e citaçõ es, 215-216
adicionando condicional, 40
elemento < cite >, 33, 215-216
adicionar dentro de folhas de estilo, 139
citar atributo
elemento < blockquote >, 215
TODO, 7
elemento < q >, 215
CommonJS, 394
Idiomas CJK, 220-221
comunicaçõ es
atributo global de classe, 37
assíncrono, 393-414
seletores de classe, 146-147
web, 312-316
Aulas
WebSocket, 415-436
criando, 266-271
classe complementar, 212
descrito, 262
objetos complexos, armazenamento, 562
elemento < limpar >, 189-190
matrizes condensadas, 109
propriedade clara (CSS), 189-190
comentá rios condicionais, 40
evento de clique, 119
programaçã o condicional
mediçã o de cm u nit, 175
palavras-chave if / else, 80-81
626
Propriedades CSS
implementaçã o de loops de có digo, 84-87
atributo coords ( elemento < area >), 49
mudar palavra-chave, 82-83
copyright (©), 41
funçã o confirm (), 76

CORS (compartilhamento de recursos de origem cruzada), 380-381
Método CONNECT (HTTP), 316
variá veis de contador, 86
funçõ es de construtor, 266-271
compartilhamento de recursos de origem cruzada (CORS), 380-381
construtos, 262
Operaçõ es CRUD, 316, 365
anotaçã o de conteú do, 213
Modelo de caixa CSS
incorporaçã o de conteú do
propriedades de fronteira, 176-178
adicionar imagens a documentos HTM L, 47-50
descrito, 175-176
descrito, 44
propriedades de margem, 176-178
incorporaçã o de conteú do de plug-in, 50-52
propriedades de preenchimento, 176-178
usando frames inline, 44-46
CSS (folhas de estilo em cascata)
resumo e revisã o da liçã o, 52-53, 63
adicionar comentá rios nas folhas de estilo, 139
estilos integrados do navegador, 159
sandboxing, 45

sem costura, 45
criando estilos incorporados, 140-141
criando folhas de estilo externas, 141-144
atributo global contenteditable, 37
criando estilos embutidos, 140
classe contentinfo, 212
definir e aplicar estilos, 139
objeto de contexto. Veja CanvasRenderingContext2D
definindo seletores, 146-159
objeto
descrito, 31, 137-139
evento do menu de contexto, 118
estilos de extensã o , 159
atributo global contextmenu, 37
herança e, 162-163
atributo de controles
resumo e revisã o da liçã o, 144-145, 163-165,
193–194, 202–204
elemento < video >, 441, 450
plug-in de cookie (jQuery), 556-557
especificidade em seletores, 161-162
biscoitos
trabalhando com estilos importantes, 159-160
alternativas para, 557-558
Cores CSS
descrito, 556-557
descrito, 166
limitaçõ es de, 556-557
funçã o hsl (), 172-173
Objeto de coordenadas
funçã o rgb () , 171
propriedade de precisã o, 541
funçã o rgba (), 172
propriedade altitude, 541
definindo propriedade de estilo de fil, 465
Propriedade altitudeAccuracy, 541
valor de configuraçã o de, 166
descrito, 540-541
tabela de nomes e valores de cores, 167-171
propriedade do título, 541
transparência , 172
propriedade de latitude, 541
Propriedades CSS
propriedade de longitude, 541
propriedade de dimensionamento de caixa, 190-192
propriedade de velocidade, 541
centralizar o conteú do na janela do navegador, 193

627
CSS3
propriedade clara, 189-190
atributo cx ( elemento < círculo >), 498
bloco de declaraçã o e, 139
atributo cy ( elemento < círculo >), 498
descrito, 165
propriedade flutuante, 186-189
posicionando elementos div, 178-186
transparência, 172
atributo d ( elemento < caminho >), 496
trabalhando com cores, 166-173
dados
trabalhando com modelo de caixa CSS, 175-178
descrito, 67
trabalhando com texto, 173-175
produçã o de expressõ es, 67
CSS3
tipos de nú mero, 67-69
adicionar comentá rios nas folhas de estilo, 139
privado, 268-271, 274-276
compatibilidade com versõ es anteriores, 138
atributo de dados ( elemento < objeto >), 51
estilos integrados do navegador , 159

atributo de dados-linktype (< uma > elemento), 157-158
Objeto de banco de dados
criando estilos incorporados, 140-141
método changeVersion (), 583-584
criando folhas de estilo externas, 141-144
descrito, 583
criando estilos embutidos, 140
Método openD atabase (), 583
definir e aplicar estilos, 139
método readTransaction (), 585, 587
definindo seletores, 146-159
método transaction (), 584-585, 587
descrito, 137-139
propriedade da versã o, 583-584
estilos de extensã o, 159
elemento < datagrid >, 33
herança e, 162-163
elemento < datalist >, 33
especificidade em seletores, 161-162
Objeto DataTransfer
Suporte para Visual Studio 2012, 4
Método clearData (), 514
trabalhando com estilos importantes, 159-160
descrito, 513-515, 521

Mó dulo de cores CSS3, 138
arrastando e soltando arquivos, 519
Mó dulo de consultas de mídia CSS3, 138
propriedade de efeito de drogas, 514
Mó dulo de namespaces CSS3, 138
propriedade effectAllowed, 514-515
Mó dulo de nível 3 de seletores CSS3, 138
propriedade de arquivos, 514
chaves, 77, 81, 263-264
Método getData (), 514
famílias de fontes cursivas , 173
Método setData (), 514
cursores
propriedade de tipos, 514
aplicando limites de intervalo de chave, 597-599
Objeto de data, 67
descrito, 596-597
evento dblclick, 119
indexaçã o, 597
elemento < dd >, 33, 223
abertura, 596
Método DEBUG (HTTP), 316
linhas curvas, desenho, 481-487
depuraçã o de có digo JavaScript
atributos personalizados, 39
cerca de 103
listas personalizadas, 224-228
examinando variá veis, 104-105
628
DOM (modelo de objeto de documento)
definir pontos de interrupçã o, 103-104
atributo booleano desativado, 36
percorrendo o có digo, 105-107
distan ces, calculando, 548-549
bloco de declaraçã o, 139-140
elemento < div >
declarar atributo ( elemento < objeto >), 322
propriedade de dimensionamento de caixa, 190-192
arquivo default.css, 15, 141
centralizar o conteú do na janela do navegador, 190-192
arquivo default.html
propriedade clara, 189-190
Ble nd for Visual Studio 2012, 15
formato de controle usando, 213
Configuraçã o QUnit, 91
descrito, 32-33, 178
Visual Studio 2012, 8–9, 11
atributo arrastá vel, 509
arquivo default.js
elemento < figura > e, 219
Olá , exemplo mundial, 92
propriedade flutuante, 186-189
Exemplo de jQuery , 288, 291
uso histó rico, 206
localizaçã o de, 7
em contêineres de layout, 208
controle de mídia, 450-451
posicionamento, 178-186
adiar atributo ( elemento < script >), 101
atributo de papel, 212
objeto diferido. Veja objeto de promessa (jQuery)
elemento < tabela > e, 230
elemento < del >, 33, 220
operador de divisã o (/), 67-68, 70
Método DELETE (HTTP), 315-316, 365
elemento < dl >, 33, 37, 223-224
deletando
do loop, 85
diretó rios, 605-606
Instruçã o <! DOCTYPE html>, 8–9, 40
arquivos, 604
objeto de documento
registros em armazenamentos de objetos , 595
cerca de 112
classes derivadas, 262

Método getElementById (), 113
seletores descendentes, 147-148
Método getElementsByClass (), 113
listas de descriçã o, 223-224
Método getElementsByName (), 113
elemento < detalhes >, 33, 219-220
Método getElementsByTagName (), 113
elemento < dfn >, 33, 218
método querySelector (), 113
elemento < diálogo >, 33
método querySelectorAl (), 113-114
atributo global dir, 37
modelo de objeto de documento (DOM)
diretó rios
criando wrappers jQuery, 294–295
criando, 604 -605
descrito, 112
exclusã o, 605-606
navegando, 112-114
abertura, 604-605
impedindo a operaçã o padrã o, 116
gravando arquivos para, 605
elementos < script > e, 103
Objeto DirectoryEntry
esta palavra-chave, 117

descrito, 602
trabalhando com eventos, 114-120
Método getDirectory (), 604-605
sinal do dó lar ($), 72-73, 157, 288
método getFile (), 602, 604
DOM (modelo de objeto de documento)
método remove (), 605
criando wrappers jQuery, 294–295
método removeRecursively (), 606
descrito, 112
629
notação de ponto
navegando, 112-114
desenhar linhas, 476-478
impedindo a operaçã o padrã o, 116
desenhando retâ ngulos, 478-479
elementos < script > e, 103
pedido de preenchimento e método de curso cal s, 479-481
esta palavra-chave, 117
desenho com HTML5
notaçã o de ponto, 586
descrito, 459
aspas duplas ("), 41, 69

desenhando arcos, 481-487
download de evento, 610
desenhando retâ ngulos, 463-464
operaçã o de arrastar e soltar
Objeto DataTransfer, 513-515
desenho usando caminhos, 475 -487
descrito, 507
processo de arrasto, 509-510
implementaçã o da tela, 462-463
API de arquivo, 517-521
resumo e revisã o da liçã o, 516-517, 521-522,
502, 506
536-537
exercícios prá ticos, 502-505
usando o elemento < canvas >, 460, 462-463
técnica ilustrada, 508-509
usando o objeto CanvasRenderingContext2D,
evento de arrastar, 119, 510
460-494
evento dragend, 119, 510-511
usando grá ficos vetoriais escalá veis, 495-501

evento dragenter, 119, 511-513
atributo global arrastá vel, 37, 509-510
evento de queda, 119, 511-515
funçã o draggingEnded (), 511
funçã o dropItem (), 512, 515, 519
evento dragleave, 119, 511
elemento < dt >, 33, 223
evento dragover, 119, 511-513
evento de mudança de duraçã o, 119
evento dragstart, 119, 510-511, 513
desenhando arcos
usando o método arc (), 485-487
usando o método arcTo (), 481-485
Especificaçã o ECMA-262, 66
desenhando círculos, 485-487, 498-499
ECMAScript, 66
desenhando linhas curvas, 481-487
seletores de tipo de elemento, 146
estado de desenho
elementos
configurando, 465-474
adicionando atributos a, 35-36
salvar e restaurar , 474-475

adicionar comentá rios, 39-40
descrito, 32-35
desenhando triâ ngulos, 478-481
atributos expando, 39
desenho usando caminhos
flutuante, 186-189
criando formas, 475
Referência de atributo global HTML5, 37
descrito, 475
desenhar arcos com o método do arco, 485-487
estilos herdados, 162-163
desenho de arcos com o método arcTo, 481-485
630
arquivos JavaScript externos
idioma, 220-221
sequências de escape, 69
aninhamento, 179, 210
borbulhamento de evento, 114-115, 567
lista de referência de, 32-35
captura de evento , 114-115
etiquetas de fechamento automá tico, 37
manipuladores de eventos, 295
tags e, 32
ouvintes de eventos, 295
vazio, 38-39
Objeto de evento
trabalhando com estilos, 138-140
descrito, 114
outra palavra-chave, 80-81
método preventDefault (), 116
elemento < em >, 33, 213-214
funçã o stopPropagation ( ), 116
em unidade de medida, 174
eventos
mensagens de e-mail, hiperlinks em, 47
borbulhando, 114-115, 567
elemento < embed >
cancelando, 567
descrito, 33
cancelando a propagaçã o, 116
incorporando conteú do de plug-in, 50
descrito, 114
sessionStora ge e, 568
atributo src, 50
assinando, 115-116, 567
acionado pela operaçã o de arrastar e soltar,

510-513
Arquivos do tipo aberto incorporado (.eot), 144
acionado por açõ es de formulá rio, 118
estilos incorporados, 140-141
acionado pelo teclado, 118
incorporaçã o de conteú do. Veja a incorporaçã o de conteú do
acionado pela mídia, 119-120
evento esvaziado, 119
desencadeado por açõ es do mouse, 118-119
encapsulamento
acionado pelo objeto Window, 117
descrito, 262-263
cancelando inscriçã o de, 116
Recomendaçõ es W3C , 566
criptografar comunicaçõ es na web, 366
tratamento de exceçã o, 87-88
evento encerrado, 119
atributos expando, 39
& entity_name ;, 41
estrutura expressa (Node.js)
& # entity_number ;, 41
adicionar pá gina da web a aplicativos, 357-360
Objeto de entrada, 604-605

criando aplicativo web Hel o, 356-357
ambiente, criando para variá veis, 73
descrito, 354
Arquivos .eot (tipo aberto incorporado), 144
primeiros passos, 354-355
evento de erro, 117, 119, 610
analisando dados de formulá rio postados, 360-362
Visual Studio 2012 Expr ess for Web, 356
Exemplo de serviço da web de chamada AJAX, 372-373
expressõ es
para objeto de geolocalizaçã o, 543-544
descrito, 67
para có digo JavaScript, 87-88
funçã o, 75
para objetos prometidos, 397
eXtensible Markup Language (XML), 30-31
Exceçã o QuotaExceededError, 562
arquivos JavaScript externos, 102
erros de validaçã o, 325
631
folhas de estilo externas
folhas de estilo externas
Método readAsText (), 603-604
descrito, 141
arquivos
especificando a codificaçã o de caracteres de, 143
criando, 602
especificando dispositivos alvo usando mídia, 141-142
excluindo, 604
usando a regra @ font-face para importar fontes, 144
arrastando e soltando, 517-521
abertura, 602
leitura, 603-604
escrevendo para, 602-603
escrever para diretó rios, 605
Tecla de funçã o F5, 104
API Filesystem
suporte de navegador, 559, 601
criaçã o e abertura de diretó rios, 604-605
criaçã o e abertura de arquivos, 602
excluindo diretó rios, 605-606
padrã o de fá brica, 265-266
excluindo arquivos, 604
famílias de fontes fantá sticas, 173

descrito, 600
elemento < fieldset >, 33
elemento < figcaption >, 219
sistema de arquivos de abertura, 601
elemento < figura >
lendo arquivos, 603-604
anotando conteú do, 219
como mecanismo de armazenamento, 558
elemento < aparte > e, 219
gravaçã o de arquivos em diretó rios, 605
descrito, 33, 219
gravando em arquivos, 602-603
elemento < div > e, 219
Objeto FileWriter
API de arquivo, 517-521
descrito, 603-604
Objeto de arquivo
método write (), 602
descrito, 517-521
preencher atributo
propriedade do nome, 517
elemento < círculo >, 498
tamanho da propriedade, 517
Elemento < caminho >, 496
propriedade de tipo, 517
bloco y final, 87
Objeto FileEntry
Site Firefogg, 439-440
excluindo arquivos, 604
: pseudoelemento da primeira letra, 150
método file (), 603
: pseudoelemento de primeira linha, 150
lendo arquivos, 603
: pseudo classe de primeiro tipo, 149
método remove (), 604
Modelo de aplicativo de layout fixo, 7
gravando em arquivos, 602
posiçã o fixa ( elemento < div >), 183-184
Objeto FileList, 517-521
Flash Player (Adobe), 557
Objeto FileReader
propriedade float (CSS), 186-189
descrito, 603
evento de foco, 117-118
método readArrayBuffer (), 604
: pseudo classe de foco, 149
método readAsDataURL (), 604
regra @ font-face, 144
632
API de geolocalização
famílias de fontes, 173-174
Método GET, 322-323
propriedade da família de fontes (CSS), 174
resumo e revisã o da liçã o , 323-324, 330-
licenciamento de fonte, 144
331, 338-339
propriedade font-size (CSS), 174–175
pai, 319
tipo de letra, 173-174
Método POST, 322-323
elemento < rodapé >
elemento < cite > e, 215
enviando dados ao enviar, 316-318
desc ribed, 33, 208
serializando, 321
em contêineres de layout, 208, 210-211
envio de dados de formulá rio para servidores da web, 316
para atributo ( elemento < rótulo >), 318
desencadeando a submissã o, 319-321
para loop, 85-86
usando o elemento < label >, 318-319
elemento < form >
validando, 324-330
descrito, 33
comunicaçã o na web e, 312-316
validaçã o necessá ria, 325-327
compatibilidade futura de navegadores, 30
enviar dados para servidores web, 316
caractere de barra (/), 337
pacote fs, 348
validando nú meros e intervalos, 329
declaraçõ es de funçã o, 74, 78
validando a entrada de URL, 327-328
expressõ es de funçã o, 75
atributo de formulá rio
Objeto de funçã o, 67
elementos de envio de formulá rio, 319
funçõ es. Veja também funçõ es específicas
elemento < objeto >, 51
agregando, 588
classe de formulá rio, 212
argumentos para, 73-76
elementos de envio de formulá rio
embutido, 76-77
restriçõ es de envio de dados, 322
construtor, 266-271
descrito, 316-318
declarando, 74, 78
atributo de formulá rio, 319
descrito, 67, 73
atributo placeholder, 326
aninhamento, 78
atributo obrigató rio, 325
parâ metros em, 73-74
formatando texto
valores de retorno, 73
controlar com o elemento < div >, 213
caracteres fonéticos de furigana, 220-221
Propriedades CSS, 173-175
objeto futuro. Veja objeto de promessa (jQuery)
evento de mudança de formulá rio, 118
pacote formidá vel , 360
evento forminput, 118
formulá rios
classes generalizadas, 262
atributo de foco automá tico, 321
API de geolocalizaçã o
restriçõ es de envio de dados, 322
posicionamento bá sico, 540-545
descrito, 311-312
descrito, 539
eventos desencadeados por, 118
resumo e revisã o da liçã o , 545–546, 549, 554
633
Objeto de geolocalização
posicionamento monitorado, 546-549
Objeto de geolocalizaçã o
elemento < h1 >, 33
abordando privacidade, 544
elemento < h2 >, 33
posicionamento bá sico, 540-545
elemento < h3 >, 33
calcular a distâ ncia entre as amostras,
elemento < h4 >, 33
548-549
elemento < h5 >, 34
Método clearWatch (), 540, 546
elemento < h6 >, 34
Método getCurrentPosition (), 540-545
Formato H.264 (MPEG-4), 438
manipulaçã o de erros. Ver tratamento de erros
resumo e revisã o da liçã o , 545–546, 549, 554
evento haschange, 117

posicionamento monitorado, 546-549
símbolo de hash (#)
seletores de id e, 146
recuperando a posiçã o atual, 541-542
hiperlinks internos e, 46
especificando opçõ es, 544-545
suporte jQuery , 289
método watchPosition (), 540, 546–547, 549
Grupo de Trabalho de Geolocalizaçã o, 539
em valores RGB, 166
Método GET (HTTP)
fó rmula de Haversine para calcular distâ ncias, 548-549
Operaçõ es CRUD e, 316, 365
elemento < head >
descrito, 315, 322-323
descrito, 9, 34, 40
Suporte REST, 365-366, 368
elemento < script > e, 102-103
Obtenha o modelo do Windows Azure SDK para .NET, 10
elemento < style > e, 140
funçã o getDistance (), 548-549
Método HEAD (HTTP), 315
métodos getter, 274-275

Elemento < h eader >, 34, 208
Tipo de arquivo GIF, 48-49
atributo de altura
gerenciador de controle de origem git, 350
elemento < canvas >, 460
atributos globais, 37
elemento < embed >, 50
objetos globais, 67
Sistema de Posicionamento Global (GPS), 539, 541
elemento < video > , 441
escopo global, 77-78
Programa Hello World
variá veis globais, 77-78
criaçã o de JavaScript, 90-99
Recurso Vá para a definiçã o, 4
criando a partir de Node.js, 342-344
Google Gears, 557
criando com expresso, 356-357
GPS (Sistema de Posicionamento Global), 539, 5 41
valores hexadecimais, tabela de nomes de cores, 167-171
fil gradiente, 466-468
elemento < hgroup >, 210
sinal de maior (>), 41, 148
atributo global oculto, 37

Modelo de aplicativo de grade, 6
. seletor oculto, 237
seletores de agrupamento, 150-151
elemento < hn >, 209-210, 213
variá veis de buraco, 512
: hover pseudo classe, 149, 154-155
634
Objeto HTMLMediaElement
elemento < hr >
praticar exercícios, 53-61, 243-257
adicionando quebras temá ticas, 213
marcaçã o semâ ntica, 31-32, 206
descrito, 34
Suporte para Visual Studio 2012, 3-4
trabalhando com elementos, 32-40
atributo href
trabalhando com listas, 221-228
< Uma > elemento, 46, 153-157
Documentos HTML5
elemento < area >, 49
criando semâ ntica, 207
elemento < link >, 141
documentando o có digo em, 216-217
funçã o hsl (), 172-173

normalizando , 217
HSL (matiz-saturaçã o-claridade), 172-173
Contêineres de layout HTML5. Veja os contêineres de layout
HTML (linguagem de marcaçã o de hipertexto)
Objeto HTMLMediaElement
suporte de navegador, 314
Método addTextTrack (), 447
Suporte CSS, 138
Propriedade audioTracks, 447
descrito, 30-32
propriedade de reproduçã o automá tica, 447
elemento < html >
propriedade protegida, 448
descrito, 9, 34, 40
Método canPlayType (), 447
atributo manifesto, 608
propriedade do controlador, 448
Documentos HTML
propriedade de controles, 448
adicionando imagens a, 47-50
propriedade crossOrigin, 448
estrutura bá sica do documento, 40-41
propriedade currentSrc, 448
documentando o có digo em, 216-217
propriedade currentTime, 448

estilos incorporados e, 140-141
Propriedade defaultMuted, 448
incorporaçã o de pá ginas da web em, 51
Propriedade defaultPlaybackRate, 448
descrito , 447
normalizando, 217
propriedade de duraçã o, 448
caracteres especiais, 41-42
propriedade encerrada, 448
Entidades HTML, 41-42
propriedade de erro, 448
Formulá rios HTML. Veja os formulá rios
herança e, 444, 447
HTML5
resumo e revisã o da liçã o, 451-452
adicionando quebras temá ticas, 213
método load ( ), 447
propriedade de loop, 448
suporte do navegador, 206-207
controle de mídia, 450-451
controlando o formato com o elemento < div >, 213
propriedade mediaGroup, 448
criaçã o de contêineres de layout, 207-212

propriedade silenciada, 448
descrito, 30-31
propriedade networkState, 448
desenho com, 459-506
evento onabort, 449
incorporaçã o de conteú do, 44-52
evento oncanplay, 449
resumo e revisã o da liçã o, 42–43, 52–53,
evento oncanplaythrough, 449
62–63, 228–229, 242–243, 258–259
evento de mudança de ondulaçã o, 449
atributos nomeados suportados, 37
um evento esvaziado, 449
635
Cache HTTP
evento pendente, 449
Método HTTP (), 315-316, 322-323
evento onerror, 449
Serviços da web REST e, 365-366
evento onloadeddata, 449
có digos de status de retorno, 315
evento onloadedmetadata, 449
servidores da web, 312
evento onloadstart, 449
Protocolo WebSocket e, 416

evento em pausa, 449
Métodos HTTP, 315-316, 322-323
evento onplay, 449
mó dulo http, 342
evento em exibiçã o, 449
Verbos HTTP, 315-316, 322-323
evento onprogress, 449
Protocolo HTTPS, 366
evento onratechange, 449
matiz -saturaçã o-luminosidade (HSL), 172-173
evento onreadystatechange, 449
hiperlinks
evento procurado, 449
criaçã o de links de imagens, 49
evento em busca, 449
descrito, 46
evento instalado, 449
elemento < iframe > e, 44
evento onsuspend, 449
enviando e-mail com, 47
evento de data ontimeup , 449
especificando alvo, 46-47
evento onvolumechange, 449
estilos de trabalho, 138
aguardando evento, 449

método pause (), 447
trabalhando com seletores, 153-158
propriedade pausada, 448
Linguagem de marcaçã o de hipertexto (HTML)
método play (), 447
propriedade playbackRate, 448
Suporte CSS, 138
propriedade de jogo, 448
descrito, 30-32
propriedade de pré-carga, 448
Protocolo de Transferência de Hipertexto. Veja HTTP (Hipertexto
propriedade readyState, 448
Protocolo de Transferência)
propriedade procurá vel , 448
buscando propriedade, 448
propriedade src, 448
eu
propriedade startDate, 448
elemento < i >, 31-32, 34, 213-214
Propriedade textTracks, 449
atributo id
Propriedade videoTracks, 449
elemento < círculo >, 498
propriedade de volume, 449
como atributo global, 37
Cache HTTP
Elemento < caminho >, 496
arquivo de manifesto em cache, 608-609
seletores de id, 146
descrito, 607
Objeto IDBCursor, 596
atualizaçã o, 609
Objeto IDBDatabase
Cookies HTTP, 556-557
Método createObjectStore (), 591
HTTP (protocolo de transferência de hipertexto)
método deleteObjectStore (), 593
descrito, 314-315
636
Ferramenta IndexedDB
descrito, 590
atributo contínuo, 45-46
propriedade de modo, 593
atributo src, 44
Propriedade objectStoreNames, 593

setVersion () met hod, 591
IIFE (expressã o de funçã o imediatamente invocada),
método transaction (), 593
277-279
Objeto IDBFactory
IIS Express, 442
método deleteDatabase (), 599
IIS (Internet Information Server), 323, 608
método open (), 590-591
mapas de imagem, 49-50
Objeto IDBKeyRange
imagens
método bound (), 597-598
adicionar a documentos HTML, 47-50
descrito, 597
desenho com, 490-494
propriedade inferior, 597-598
estilos de trabalho, 138
método lowerBound (), 598-599
elemento < img >
propriedade lowerOpen, 598
atributo alt, 47-48
método apenas (), 599
criaçã o de links de imagens, 49
propriedade superior, 597-598

criando fil padrã o, 468-469
método upperBound (), 598
descrito, 30, 34
propriedade upperOpen, 598
Objeto IDBObjectStore
incorporaçã o de conteú do, 47-48, 51
método add (), 594
tipos de arquivos suportados, 48
Método createIndex (), 592
atributo src, 47-48
método delete (), 595
atributo usemap, 49
método deleteIndex (), 593
método get (), 595
expressã o de funçã o imediatamente invocada (IIFE),
propriedade de caminho-chave, 592
277-279
propriedade de nome, 592
regras @import, 143-144
Método openCursor (), 596-597
importando
propriedade optionalParameters, 592
fontes, 144
método put (), 594
folhas de estilo, 143-144
IDBRequest o bject, 590
em contêineres de layout, 208-210
Objeto IDBTransaction, 593
em unidade de medida, 175
identificadores, 74
nú meros de índice (matrizes), 108-109
IETF (Internet Engineering Task Force), 415
Ferramenta IndexedDB
se palavra-chave, 80-81, 83
suporte de navegador, 559, 590
elemento < iframe >
criando e abrindo banco de dados, 590-591
criando contexto de navegador aninhado, 34
descrito, 589-590
descrito, 34, 44-46
atributo de nome, 44-45
armazenamentos de objetos, 591-593
tag < objeto > e, 51
atributo sandbox, 45
637
cursores de indexação
cursores de indexaçã o, 597
herança
Caracteres japoneses, 220-221
descrito, 162-163
Applets Java, 557
JavaScript. Veja também jQuery
Objetos JavaScript e, 262, 278-283
AJAX e, 368
quadros embutidos. Veja o elemento < iframe >
consideraçõ es do navegador, 101-102
có digo JavaScript embutido, 102
Suporte CommonJS, 394
estilos inline, 140
programaçã o condicional, 80-84
Declaraçã o INNER J OIN, 588
conversã o para diferentes tipos, 78-80
elemento < input >
criaçã o do programa Hel o World, 90-99
descrito, 34
criando objetos, 262-283
validaçã o de formulá rio e, 326

depuraçã o, 103-107
atributo má ximo, 329
descrito, 66, 263
atributo mínimo, 329
habilitando o IntelliSense, 291-294
atributo de padrã o, 327-328
atributo da etapa, 329
implementaçã o de loops de có digo, 84-87
atributo de título, 328
arquivos embutidos versus arquivos externos, 102
atributo de tipo, 317-318
resumo e revisã o da liçã o, 88–89, 107–108,
um elemento vazio, 38
120-121, 134-135
evento de entrada, 118
variá veis de nomenclatura, 72
elemento < ins >, 34, 220
escopo de variá vel local aninhado, 78
instalando
funçõ es de aninhamento, 78
Pacotes Node.js, 351-353
Plataforma Node.js, 342
papel dos dados, 6 6-71

instâ ncias, 262
variá veis de escopo, 77-78
nú meros inteiros, 67
elemento < script > e, 100–103
Recurso IntelliSense
Biblioteca Socket.IO e, 424
listas personalizadas e, 226
có digo de teste, 89-103
habilitando para JavaScript e jQuery, 291-294
como linguagem nã o digitada , 66
Suporte HTML5, 3
usando declaraçõ es, 71-73
Suporte a JavaScript, 4
Suporte para Visual Studio 2012, 4-5
linguagens nã o digitadas e, 66
trabalhando com funçõ es, 73-77
Força-Tarefa de Engenharia da Internet (IETF), 415
escrever có digo, 89-103
Internet Information Server (IIS), 323, 608
Console JavaScript, 67
evento invá lido, 118
JavaScript Object Notation (JSON), 349, 366, 374
: pseudo classe invá lida, 330
Objetos JavaScript
tabelas irregulares, 238-241

embutido, 67
funçã o isNaN (), 80-81
criando, 263-264
Padrã o ISO / IEC 16262 , 66
criando classes, 266-271
638
atributo global lang
descrito, 262-263
método ajaxSetup (), 373
padrã o de fá brica, 265-266
método ajaxStart (), 373
implementaçã o de herança, 278-283
método ajaxStop (), 373
implementaçã o de namespaces, 276-278
Método ajaxSuccess (), 373
método get (), 373
sintaxe literal do objeto, 263-265
método getJSON (), 373, 375
Método getScript (), 373
padrã o de protó tipo, 271
método load (), 373
propriedade de protó tipo, 271-274
método param (), 373

Ferramenta JetBrains Resharper, 67
método post (), 373, 375
Comandos JOIN (SQL), 588
método serialize (), 374
juntando linhas, 471-472
método serializeArray (), 374
Tipo de arquivo JPEG, 48
método text (), 295
jQuery
método trigger (), 295
adicionar ouvintes de eventos, 295
método triggerHandler (), 295
atributo de foco automá tico, 321
JSON (JavaScript Object Notation), 349, 366, 374
ligaçã o a eventos de armazenamento, 567-568
Objeto JSON, 67, 368
categorias de funcionalidade, 285-286
junçã o, 352
plug-in de cookie, 55 6–557
criando invó lucros, 294-295
Objeto DataTransfer e, 513, 515, 519
operaçõ es de arrastar e soltar, 507
caracteres kanji, 220-221
habilitando o IntelliSense, 291-294

elemento < kbd >, 34, 220
começando com, 286-287
funçã o keepAlive (), 422
inicializar o có digo quando o navegador estiver pronto,
açõ es do teclado, eventos disparados por, 118
295-296
evento keydown, 118
resumo e revisã o da liçã o, 296–297, 308–309
elemento < keygen >, 38
objetos de promessa, 377-380, 394-402
evento de pressionamento de tecla, 118
método serialize (), 321
evento de keyup, 118
método submit (), 319-320
Caracteres coreanos, 220-221
acionando manipuladores de eventos, 295
consideraçõ es de uso, 287-291
verificaçã o de versõ es, 369
eu
Wrappers XMLHttpRequest, 373-377
objeto jQuery
elemento < rótulo >
método ajax (), 373-375
para atributo, 318
método ajaxCompleted (), 373

descrito, 34, 318
Método ajaxError (), 373
formulá rios e, 318-319
método ajaxPrefilter (), 373
classe de papel de referência, 212
método ajaxSend (), 373
atributo global lang, 37
639
: pseudo classe lang (idioma)
: pseudo classe lang (idioma) , 149
descrito, 221
elementos de linguagem, 220-221
descriçã o, 223-224
ú ltimo a entrar, primeiro a sair (LIFO), 474
ordenado, 221-222
recipientes de layout
nã o ordenado, 222-223
elemento < artigo > em, 209
matrizes literais, 109
elemento < aparte > em, 208, 211-212
ao vivo NodeList, 112-113
criando, 207-209
evento de carregamento, 117
descrito, 208
evento loaddata, 120

elemento < div > em, 208
evento de metadados carregado, 120
elemento < rodapé > em, 208, 210-211
evento loadstart, 120
elemento < header > em, 208-210
funçõ es locais, 77-78
< nav > el ement in, 208, 211
escopo local, 77-78
elemento < seção > em, 208
variá veis locais, 77-78
usando funçõ es, 212
Janela local (depurador), 104-105
Instruçã o LEFT JOIN, 588
Variá vel global localStorage, 560-564
elemento < legenda >, 34
reconhecimento de localizaçã o. Consulte Geolocat ion API
sinal de menor que (<), 41
operadores ló gicos, 70-72
elemento < li >, 34
conceito de pesquisa longa, 415-416
fontes de licenciamento, 144
atributo de loop
LIFO (ú ltimo a entrar, primeiro a sair), 474
elemento < áudio >, 445-446
leveza (HSL), 172-173

linhas
rotaçõ es. Veja os loops de có digo
desenho, 476-478
desenho curvo, 481-487
junçã o, 471-472
largura de configuraçã o para, 470-471
protocolo mailto, 47
elemento < link >
classe principal, 212
descrito, 34
Janela Gerenciar Pacotes NuGet, 90-91, 95-96
atributo href, 141
atributo manifest ( elemento < html >), 608
atributo de mídia, 141-142
arquivo de manifesto
atributo rel, 141
Seçã o CACHE, 609
descrito, 608-609
Seçã o FALLBACK, 609
: link pseudo classe, 149
Seçã o REDE, 609

propriedade de estilo de item de lista (CSS), 226
Pacote Node.js e, 346
propriedade list-style-image (CSS), 226
atualizando cache, 609
propriedade list-style-position (CSS), 226
elemento < map >
propriedade list-style-type (CSS), 225-226
criaçã o de mapas de imagem, 49-50
listas
descrito, 34
costume, 224-228
atributo de nome, 49
640
namespaces
propriedades de margem (CSS), 176-178, 193
evento mousemove, 119
elemento < mark >, 34, 213, 220
evento mouseout, 119
Arquivos Markdown, 348
evento de mouseover, 119
Editor MarkdownPad, 348
evento mouseup, 119
mashups, 364
evento da roda do mouse, 119
Objeto matemá tico, 67

filmes. Veja vídeos e filmes
operadores matemá ticos, 68, 72
extensã o de arquivo .mp3, 444-445
atributo max ( elemento < input >), 329
Formato MP3, 444
atributo maxlength ( elemento < textarea >), 316
extensã o de arquivo .mp4 , 438-439, 444
unidades de medida, tamanho da fonte, 174-175
Formato MP4, 444
meios de comunicaçã o. Veja multimídia
Extensã o de arquivo .mp4a, 444
atributo de mídia ( elemento < link >), 141-142
Formato MPEG-4 / H.264, 438
elemento < menu >, 34
multimídia
evento de mensagem, 117
eventos desencadeados por, 119-120
elemento < meta >
Objeto HTMLMediaElement, 447-452
configuraçã o @charset, 41, 143
descrito, 34
447, 451-452, 456-457
reproduzindo á udio, 443-447

elemento < metro >, 34
reproduzindo vídeo, 437-443
métodos
matriz, 110-112
especificando dispositivos alvo usando, 141-142
descrito, 67, 110, 263
atributo mú ltiplo ( elemento < selecionar >), 316-317
getter, 274-275
operador de multiplicaçã o (*), 67-68, 70
privilegiado, 269
mú sica. Veja á udio e sons
setter, 274
atributo silenciado ( elemento < video >), 441
Serviço de cache do Microsoft App Fabric, 422
Tecnologias MVC, 341
Microsoft Visual Studio 2012. Consulte Visual Studio
2012
Ferramenta de Fontes de Incorporaçã o da Web da Microsoft (WEFT),
144
\ n sequência de escape , 69
atributo min ( elemento < input >), 329
atributo de nome
Miro Video Converter, 439-440

Elemento < iframe >, 44-45
unidade de medida mm, 175
elemento < map >, 49
biblioteca modernizr.js, 221
Janela de modificaçã o de estilo, 226
estilos nomeados, 146-147
operador de mó dulo (%), 69
namespaces
famílias de fontes monoespaçadas, 173
Suporte CSS3, 138
açã o do mouse, eventos disparados por, 118
Objetos JavaScript e, 276-278
evento mousedown, 119
jQuery, 288
641
variáveis de nomenclatura
variá veis de nomenclatura, 72-73
tipo de nú mero primitivo
elemento < nav >, 34, 208, 211
operaçõ es aritméticas, 68
navegando em DOM, 112-114
descrito, 67
Modelo de aplicativo de navegaçã o, 7
precedência de operador, 68-69

classe de navegaçã o, 212
valores especiais suportados, 68
variá vel global navigator.geolocation, 540
tipos de nú mero , 67-69
aninhamento
nú meros, validando em formulá rios, 329
elementos, 179, 210
Dispositivos NVDA (Nonvisual Desktop Access),
funçõ es, 78
206–207
operaçõ es, 398-399
nova palavra-chave, 108, 269
sem operadores de coalescência de valor, 83-84
elemento < objeto >
gerenciador de pacotes de nó (npm), 342
criando contexto de navegador aninhado, 52
Plataforma Node.js
atributo de dados, 51
criando programa Hel o World, 342-344
declarar atributo, 322
criando mó dulo Node.js, 344-345
descrito, 34, 51
criando pacote Node.js, 345-354

incorporando conteú do de plug-in, 50-52
criando serviço web RESTful, 366-368
atributo de formulá rio, 51
descrito, 341
estrutura expressa, 354-363
atributo de nome, 51
instalando, 342
tag <param> e, 52
resumo e revisã o da liçã o, 363, 391
passando parâ metros para objetos, 52
exercícios de prá tica, 382-386, 390
Biblioteca Socket.IO e, 424
atributo usemap, 51
espaço nã o separá vel, 41-42
Dispositivos Nonvisual Desktop Access (NVDA),
literais de objeto, 263-265
206–207
Objeto objeto
normalizando documentos HTML, 217
método construtor (), 265
elemento < noscript >, 34
descrito, 67
nã o (!) operador ló gico, 70-71
Método hasOwnProperty (), 265
: nã o pseudo classe, 149
Método isPrototypeOf (), 265
evento de nupdate, 610
método propertyIsEnumerable (), 265
npm (gerenciador de pacote de nó ), 342
: pseudoclasse enésima criança (fó rmula), 149
método toLocalString (), 265
Sistema de gerenciamento de pacotes NuGet, 90, 95, 286
método toString (), 265
tipo primitivo nulo, 67
método val ueOf (), 265
Funçã o numérica (), 78-79
programaçã o orientada a objetos
Objeto de nú mero, 67
Advertência de JavaScript, 263
642
propriedade de opacidade (CSS)
dados privados e, 268
evento oncanplaythrough, 449
terminologia usada, 262-263
evento onclose, 417, 419
lojas de objetos
evento de mudança de ondulaçã o, 449
adicionando índices, 592-593
um evento esvaziado, 449
apagando registros, 595
evento pendente, 449
descrito, 591
evento onerror
inserir novos registros, 594
Objeto FileEntry e, 604
removendo, 593
Objeto FileReader e, 603
removendo ind exes, 593
Objeto FileWriter e, 603
recuperaçã o de registros, 595-596
Objeto HTMLMediaEvent e, 449
compreendendo cursores, 596-599
Objeto IDBObjectStore e, 594
atualizaçã o de registros existentes, 594-595
Objeto IDBRequest e, 591
usando transaçõ es, 593-594
Objeto WebSocke t e, 417, 419
versionamento e, 591
evento online, 117
objetos. Veja também objetos JavaScript
evento onload, 469

acessando objetos DOM, 112-120
evento onloadeddata, 449
descrito, 262
evento onloadedmetadata, 449
evento onloadend, 603
passando parâ metros para, 52
evento onloadstart, 449
tipos de, 262
: pseudo classe filho ú nico, 149
trabalhando com matrizes, 108-112
: pseudo classe apenas do tipo, 149
evento obsoleto, 610
evento onmessage, 417, 419
evento offline, 117
evento de caneta ono , 417, 419
aplicativos da web offline
evento em pausa, 449
descrito, 581
evento onplay, 449
API FileSystem e, 600-606
evento em exibiçã o, 449
Cache HTTP e, 607-610
evento onprogress, 449
Ferramenta IndexedDB e, 589–599

evento onratechange, 449
liçã o summa ry e revisã o, 588-589, 599-
evento onreadystatechange, 371, 449
600, 606-607, 610-611, 617-619
evento em busca, 449
Banco de dados Web SQL e, 582–588
evento instalado, 449
Extensã o de arquivo .oga, 444-445
evento de sucesso, 591, 594
Extensã o de arquivo .ogg, 444
evento onsuspend, 449
Formato Ogg / Theora, 438
evento ontimeupdate, 449
Formato Ogg / Vorbis, 444
evento necessá rio para atualizaçã o, 591
Extensã o de arquivo .ogv, 438-439
evento onvolumechange, 449
elemento < ol >, 34, 221-222
evento onwai ting, 449
evento onabort, 449
evento onwriteend, 603
evento oncanplay, 449
propriedade de opacidade (CSS), 172

643
operandos
operandos
parametros
operadores biná rios e, 70
argumentos versus, 74
descrito, 67-68
descrito, 73-74
precedência de operador, 68-69
tratamento de erros via, 543
elemento < optgroup >, 34
passando para objetos, 52
elemento < opção >
classes pais, 262
descrito, 34, 317
formulá rios dos pais, 319
atributo selecionado, 317
parênteses (), 68-69, 74
elemento < caminho >
atributo de valor , 320
comandos suportados em, 496-497
: pseudo classe opcional, 330
atributo d, 496
Método OPTIONS (HTTP), 315

descrito, 496
ou (||) operador ló gico, 70-71, 83-84
atributo de preenchimento, 496
listas ordenadas, 221-222
atributo de id, 496
elemento < output >, 34
pacote p ath, 348
caminhos
comandos suportados em, 496-497
criando, 496-498
descrito, 475, 496
elemento < p >, 34
desenho usando, 475-487
arquivo package.json, 349-350
atributo de padrã o ( elemento < input >), 327-328
pacotes (Node.js)
padrã o fil, 468-469
criando mó dulos agregados, 348
evento de pausa, 120
criando arquivo package.json, 349-350
unidade de medida pc, 175
criando arquivo README.md, 348-349
consideraçõ es de desempenho
descrito, 345-348
Método POST, 323
instalando e usando, 351-353
mecanismos de armazenamento, 563-564
publicaçã o, 350-351
seletor universal, 147
desinstalando, 354
símbolo de ponto final (.), 146, 327
arquivo packages.config, 96
extensã o de arquivo .pfx, 9
propriedades de preenchimento (CSS), 176-178
Opçã o de fixar na fonte, 106
Recurso Inspetor de pá gina, 3
atributo placeholder
evento pa gehide, 117
elementos de envio de formulá rio, 326
evento pagehow, 117
elemento < textarea >, 316
Janela Paral el Watch (depurador), 106
evento de jogo, 120
elemento < param >
evento de jogo, 120
descrito, 34, 52
funçã o playStop (), 451
elemento < objeto > e, 52
plug-ins
alternativas de cookies, 557
descrito, 31
644
QueryString
incorporaçã o de conteú do de, 50-52
descrito, 377-380, 394-395
limitaçõ es de, 558
método done (), 378, 398-399
sinal de mais (+), 67-69, 151, 327
método fail (), 378, 397, 399
Tipo de arquivo PNG , 48
manipulaçã o de limpeza de conclusã o, 397-398
polimorfismo, 262
falha de manuseio, 397
evento popstate, 117
execuçã o paralela e, 400
Objeto de posiçã o
método pipe (), 398-400
propriedade de coords, 540-541
método progress (), 378, 400-401
propriedade de carimbo de data / hora, 5 41
inscrevendo-se em concluído, 398
Objeto PositionOptions
método then (), 400, 402

descrito, 544
tempos limite, 396-397
propriedade enableHighAccuracy, 544
progresso de atualizaçã o, 400-401
propriedade maximumAge, 545
método when (), 400, 402
propriedade de tempo limite, 544
funçã o prompt (), 76-77
Método POST (HTTP), 315-316, 322-323, 365-366
propriedades. Veja também propriedades CSS
atributo poster ( elemento < video >), 441
matriz, 109-110
< pré > elemento, 34, 217
descrito, 109, 262-263
ordem de precedência
Janela de propriedades, 7, 11
para estilos de elemento, 160-161
padrã o de protó tipo, 271, 274-276
para operadores, 68-69
conteú do pré-formatado, exibindo, 217
protó tipos, 263
atributo de pré-carregamento
seletores de pseudoclasse, 148-149
pseudo classes, 148-149 , 330
seletores de pseudoelemento, 148-150
funçã o preventDefault (), 512
pseudoelementos, 149-150
valores primitivos, 67
unidade de medida pt, 175
dados privados
padrã o de design editor-assinante, 114
Objetos JavaScript e, 268-271
pacotes de publicaçã o, 350-351
padrã o de protó tipo e, 274-276
Método PUT (HTTP), 315-316
métodos privilegiados, 269
unidade de medida de px, 174
elemento < progresso >, 34
evento de progresso, 120, 371, 610
Especificaçã o Promise / A, 394
objeto de promessa (jQuery)
< Q > elemen t
método always (), 378, 397-399
operaçõ es assíncronas e, 394-395
citar atributo, 215

promessas de encadeamento, 398-400
descrito, 34
cal condicionais, 401-402
QueryString
criando, 395-397
envios de formulá rios e, 320-323
Método diferido (), 395-397
Node.js e, 343, 359-360
645
ponto de interrogação (?)
Serviços da web REST e, 365, 368
descrito, 364-366
ponto de interrogaçã o (?), 322, 327
modelo de solicitaçã o / resposta
Ferramenta QUnit-Metro, 95-100
conceito de sondagem longa, 415
Ferramenta QUnit, 90-95, 286
Nó . js e, 357
arquivo qunitmetro.js, 96
no modelo sem estado, 312-313
Exceçã o QuotaExceededError, 562
funçã o require (), 345
citaçõ es e citaçõ es, 215-216
atributo booleano obrigató rio, 325
: pseudo classe necessá ria, 330

Ferramenta ReSharper, 67
evento de redimensionamento, 117
compartilhamento de recursos, origem cruzada, 380-381
atributo r ( elemento < círculo >), 498
Web REST (Representational State Transfer)
identificaçã o por radiofrequência (RFID), 539
Serviços
intervalos, validando em formulá rios, 329
criando, 366-368
evento ratechange, 120
descrito, 364-366
Rauch, Guillermo, 423
variá vel de novas tentativas, 85-86
lendo arquivos, 563, 603-604
có digos de status de retorno (HTTP), 315
Arquivo README.md, 348-349
valores de retorno (funçõ es), 73
atributo booleano somente leitura, 36
RFC 6455, 415
evento readystatechange, 120
RFID (identificaçã o por radiofrequência), 539
retâ ngulos
funçã o rgb (), 171

Valor RGB, 166-171
desenho, 463-464, 478-479
funçã o rgba (), 172
salvando e restaurando o estado de desenho, 474-475
atributo de papel
definindo propriedade de estilo de fil , 465-470
elemento < aparte >, 212
definindo propriedade lineJoin, 471-472
elemento < div >, 212
definindo propriedade lineWidth, 470-471
atributo de rowspan
definindo propriedade strokeStyle, 472-474
elemento < td >, 238-240
Redis (serviço de dicioná rio remoto), 422
< th > elemento, 238-240
refazer evento, 117
elemento < rp >, 34, 221
Recurso de grupos de referência, 5
elemento < rt >, 34, 221
telas de atualizaçã o, 290
elemento < ruby >, 35, 221
Objeto RegExp, 67
caracteres fonéticos rubi, 220-221
marca registrada (®), 41
atributo rel ( elemento < link >), 141

posiçã o relativa ( elemento < div >), 181-182
funçã o removeEventListener (), 116
Web de transferência de estado representacional (REST)
elemento < s >, 220
Serviços
elemento < samp >, 35, 216-217
criando, 366-368
famílias de fontes sem serifa , 173-174
646
avaliação de curto-circuito
atributo sandbox ( elemento < iframe >), 45
leitura de valores das tabelas, 586-587
sandboxing, 45, 51
Clá usula WHERE, 587
saturaçã o (HSL), 172-173
atributo selecionado ( elemento < opção >), 317
funçã o saveData (), 116
atributo booleano selecionado, 36
grá ficos vetoriais escalá veis (SVG)
cadeias seletoras, 147
descrito, 459, 495-496
seletores
usando o elemento < img >, 499–501
adjacente, 151-152
usando o elemento < svg >, 496-499
atributo, 153-154
esquemas
atributo contém valor, 155-156
tabelas e, 591
atributo contém valor na lista, 157-158
atualizaçã o, 583
valor do atributo, 154-155
variá veis de escopo, 77-78
o valor do atributo termina com, 157
telas, atualizando, 290
criança, 148
elemento < script >
classe, 146-147
atributo assíncrono, 101
Suporte CSS3 , 138
adiar atributo, 101
listas personalizadas e, 224-226
descrito, 35, 236
definindo, 146
colocaçã o, 102-103
descendente, 147-148
descrito, 138-139
consideraçõ es de uso, 38, 100-101

tipo de elemento, 146
evento scrol, 119
agrupamento, 150-151
atributo contínuo ( elemento < iframe >), 45-46
id, 146
recursos de pesquisa, 563-564
compatível com jQuery, 289
classe de pesquisa, 212
pseudoclasse, 148-149
elemento < seção >, 35, 208
pseudoelemento, 148-150
raiz de corte, 215
irmã o, 151-153
segurança
especificidade em, 161-162
Objeto de geolocalizaçã o e, 544-545
subsequente, 151-153
Protocolo HTTPS e, 366
universal, 147
mecanismos de armazenamento e, 558-559
etiquetas de fechamento automá tico, 37
marcaçã o semâ ntica, 31-32
buscando evento, 120
ponto e vírgula (;), 71, 139

< selecionar > elemento
serializando formulá rios, 321
descrito, 35, 316-317
famílias de fontes serif, 173-174
atributo mú ltiplo, 316-317
variá vel global sessionStorage, 562-564, 568
atributo de tamanho, 317
métodos setter, 274
selecione o evento, 118
SGML (Linguagem de marcaçã o generalizada padrã o),
Instruçã o SELECT (SQL)
30, 137
funçõ es de agregaçã o e, 588
atributo de forma ( elemento < área >), 49
Comandos JOIN e, 588
avaliaçã o de curto-circuito, 71
647
seletores de irmãos
seletores de irmã os, 151-153
start () f unçã o, 345
Biblioteca SignalR, 423
modelo sem estado, 312-313
Protocolo de Acesso a Objetos Simples (SOAP), 366
declaraçõ es, 71
aspas simples ('), 69

declaraçõ es, variá veis e, 71-73
atributo de tamanho ( elemento < selecionar >), 317
NodeList está tico, 112-113
Extensã o de arquivo .sln, 356
posiçã o está tica ( elemento < div >), 181
elemento < smal >, 35, 220
atributo step ( elemento < input >), 329
SOAP (Simple Object Access Protocol), 366
funçã o stopPropagation (), 116
Biblioteca Socket.IO, 423-424
evento de armazenamento, 117
sons. Veja á udio e sons
mecanismos de armazenamento
elemento < source >
descrito, 35
consideraçõ es de capacidade, 561-562
definindo fonte de á udio, 445
consideraçõ es de cookies, 556
configuraçã o da fonte de vídeo, 439-440
descrito, 555
atributo src, 439, 445
manipulaçã o de eventos de armazenamento, 565-568
atributo de tipo, 439, 445
Compatível com HTML5, 558–560

Plug-in de cookie jQuery, 556-557
elemento < span >
descrito, 35
569, 579-580
atributos expando e, 39
localStorag e variá vel global, 560-562
uso histó rico, 206
potencial desempenho pitfal s, 563-564
caracteres especiais (entidades HTML), 41-42
classes especializadas, 262
variá vel global sessionStorage, 562-563
especificidade (seletores)
armazenar objetos complexos, 562
calculando, 161-162
armazenamento na web, 555-564
em estilos em cascata, 160
Objeto de armazenamento
atributo global de verificaçã o ortográ fica, 37
método clear (), 560
Modelo de aplicativo dividido, 6
descrito, 560, 563
colchetes, 109, 264

getItem () met hod, 560
atributo src
método key (), 561
propriedade de comprimento, 560
método removeItem (), 560
elemento < iframe >, 44
Método setItem (), 560
elemento < img >, 47-48
Objeto StorageEvent
elemento < source >, 439, 445
descrito, 5 66
propriedade chave, 566
SRT (Texto SubRip), 441
propriedade newValue, 566
evento estabilizado, 120
propriedade oldValue, 566
Linguagem de marcaçã o generalizada padrã o (SGML),
Propriedade storageArea, 566
30, 137
propriedade url, 566
648
mesas
Funçã o String () , 78, 80
super classes, 262
Objeto de corda, 67
suspender evento, 120
tipo primitivo de string
elemento < svg >
descrito, 67, 69
criando um caminho, 496-498
operadores uná rios, 70
descrito, 496
elemento < forte >, 35, 213-214
desenhando círculos, 498-499
elemento de < estilo > , 35, 140
Atributo viewBox, 500-501
atributo global de estilo, 37, 140
editor svg-edit, 499
folhas de estilo
Tipo de arquivo SVG, 48, 499–501
adicionar comentá rios dentro, 139
SVG (grá ficos vetoriais escalá veis)
estilos integrados do navegador, 159
descrito, 459, 495-496
descrito, 138
usando o elemento < img >, 499–501
externo, 141
usando o elemento < svg >, 496-499
importado, 143-144
mudar palavra-chave, 82-83
definido pelo usuá rio, 159
leituras / gravaçõ es síncronas, 563
estilos
aplicando, 139
em navegadores, 139, 159
em cascata, 160-161
\ t sequência de escape , 69
criando, 138
atributo global tabindex, 37
definindo, 139
elemento < tabela >
descrito, 138
criando tabelas, 230
incorporado, 140-141
descrito, 35, 205, 229
estendendo, 159
uso indevido de, 230
herdando, 162-163
inline, 140
cabeçalhos de tabela
nomeado, 146-147
criando, 231-232
validaçã o de entrada, 330
estilo, 232
trabalhando com importante, 159-160
mesas
< sub > elemento, 35, 220
adicionando legendas, 241
subcaminhos, 475
criando, 230-231
subclasses, 262
criando células de cabeçalho, 231-232
enviar véspera , 118
criando irregular, 238-241
Texto SubRip (SRT), 441
declarando rodapés, 233-237
inscriçã o em eventos, 115-116, 567
declarando cabeçalhos, 233-237
seletores irmã os adjacentes subsequentes, 151-152
declarando o corpo da tabela, 233-237
seletores irmã os subsequentes, 152-153
descrito, 229
operador de subtraçã o (-), 67-68, 70
resumo e revisã o da liçã o, 242–243, 258–259
elemento < resumo >, 219-220
uso indevido de, 230
elemento < sup >, 35, 220
esquemas e, 591
649
Tag
< th > elemento
linhas de estilo, 241
atributo colspan, 238-240
cabeçalhos de mesa de estilo, 232
criando células de cabeçalho, 231-232
em bancos de dados Web SQL, 584-588
descrito, 35, 231
Tag
atributo rowspan, 238-240
sensibilidade a maiú sculas e minú sculas, 32
elemento < thead >, 35, 233
descrito, 30-31
quebras temá ticas, 213
eleme nts e, 32-35
esta palavra-chave, 117, 264, 268-269
fechamento automá tico, 37
tó picos, 393
marcaçã o semâ ntica, 31-32
caractere til (~), 152

atributo alvo (< uma > elemento), 46-47
elemento < time >, 35, 220
elemento < tbody >, 35, 233-237
Timed Text Markup Language (TTML), 44 1
TCP
tempos limite
serviços da web arbitrá rios e, 366
Objeto PositionOptions, 544
Suporte WebSocket, 415-417
objeto de promessa, 396-397
elemento < td >
Objeto WebSocket, 420-422
atributo colspan, 238-240
evento timeupdate, 120
elemento < title > , 35, 41
descrito, 35, 229, 241
Atributo do Título
atributo rowspan, 238-240
como atributo global, 37
TDD (desenvolvimento orientado a teste), 90, 93, 98
elemento < input >, 328
modelos. Veja também modelos específicos
TODO comments, 7
descrito, 5-6
elemento < tr >
incluído no Visual Studio Express for Web,
10-11
descrito, 35, 229
incluído no Visual Studio Express para
linhas de estilo, 241
Windows 8, 6–7
elemento < tbody > e, 233
desenvolvimento dirigido por teste (TDD), 90, 93, 98
Método TRACE (HTTP), 315
testando o có digo JavaScript, 89–103
elemento < track >, 441
arquivo test.js, 92, 97, 288
marcas registradas, 41
texto
transaçõ es
desenho, 488-490
IndexedDB e, 558
formataçã o, 173-175, 213
Bancos de dados Web SQL e, 584-586
elemento < textarea >
armazenamento web e, 564
atributo cols, 316
transparência (cor), 172

descrito, 35, 316
triâ ngulos, desenho, 478-481
Atributo maxlength, 316
Arquivos TrueType (.ttf), 144
atributo placeholder, 316
tente o bloco, 87
atributo wrap, 316
Arquivos .ttf (TrueType), 144
< tfoot > eleme nt, 35, 233
TTML (Timed Text Markup Language), 441
650
elemento <video>
atributo de tipo
validaçã o necessá ria, 325-327
elemento < botão >, 317
validaçõ es de estilo, 330
validando nú meros e intervalos, 329
elemento < input >, 317-318
validando a entrada de URL, 327-328
elemento < link >, 141
atributo de valor ( elemento < opção >), 320
tipos de valor, 67, 138
elemento < script >, 100
valores
elemento < source >, 439, 445
descrito, 67
determinando para variá veis, 83
determinando se mesmo tipo e igual, 84
você
recuperando para atributos, 153
retorno, 73
elemento < u >, 220
configuraçã o para cores, 166-171
\ u sequência de escape, 69
elemento < var >, 35, 217
arquivo ui-dark.css, 9
variá veis
arquivo ui-light.css, 9
atribuindo expressõ es de funçã o a, 75
elemento < ul > , 35, 222-223
sensibilidade a maiú sculas e minú sculas, 72
operadores uná rios, 70
conversã o para diferentes tipos, 78-80
tipo primitivo indefinido, 67
contador, 86
sublinhado (_), 45, 72-73
criando ambiente para, 73
desfazer evento, 117

descrito, 71
desinstalando pacotes, 354
valores determinantes de, 83
seletores universais, 147
examinando no depurador, 104-105
evento de descarregamento, 117
global, 77-78
listas nã o ordenadas, 222-223
Suporte a JavaScript, 66
cancelando inscriçã o em eventos, 116
local, 77-78
evento updateReady, 610
nomeaçã o, 72-73
Entrada de URL, va lidating, 327-328
novas tentativas, 85-86
mó dulo de url, 343
escopo, 77-78
atributo usemap
declaraçõ es e, 71-73
elemento < img >, 49
trabalhando com funçõ es, 73-77
Nú mero de identificaçã o do veículo (VIN), 365
API de dados do usuá rio, 557
controle de versã o, IndexedDB, 591

folhas de estilo definidas pelo usuá rio, 159
versõ es
conjunto de caracteres utf-8, 41
incluindo informaçõ es em arquivos de manifesto, 609
verificando para jQuery, 369
elemento < video >
atributo de reproduçã o automá tica, 441
: pseudo classe vá lida, 330
configurando, 441
validando formulá rios
atributo de controle , 441, 450
descrito, 324-325
651
vídeo e filmes
descrito, 35, 437
Tela da pá gina inicial, 5
modelos incluídos, 6-9
Visual Studio Premium 2012, 2
Visual Studio Professional 2012, 2
atributo id, 450
Visual Studio Team Foundation Server Express

2012, 2-3
atributo de loop, 441
Visual Studio Test Professional 2012, 2
atributo silenciado, 441
Visual Studio Ultimate 2012, 2
atributo de pô ster , 441
elementos vazios, 38-39
atributo de pré-carga, 441
evento de mudança de volume, 120
elemento < source > e, 439-440
atributo src, 441
vídeo e filmes. Veja também o elemento < video > W3C (World Wide Web Consortium)
acessando trilhas, 441-44 2
Recomendaçõ es CSS, 137-138
descrito, 437
recomendaçõ es de eventos, 566
padrõ es de multimídia, 437-438, 443-444
padrõ es abertos para web, 30-31
definindo o elemento < source >, 439-440
capacidade de capacidade de armazenamento , 561

formatos de vídeo, 438
Suporte para Web SQL, 582
Atributo viewBox ( elemento < svg >), 500–501
API WebSocket, 415-417
VIN (Nú mero de Identificaçã o do Veículo), 365
Padrã o WebVTT, 441-442
. seletor visível, 237
WAI-ARIA, 212
: visitou pseudo classe, 149
WAI (Web Accessible Initiative), 212
Visual Studio 2012
evento de espera, 120
Suporte CSS3, 4
Extensã o de arquivo .wav, 444-445
ediçõ es suportadas, 2-3
Formato WAV, 444
Suporte para HTML5, 3-4
elemento < wbr >, 35, 39, 217
Suporte a JavaScript, 4-5
WCF (Windows Communication Foundation), 366
Web Accessible Initiative (WAI), 212
navegadores da web. Veja os navegadores
Visual Studio 2012 Express para a Web

comunicaçõ es na web
descrito, 3, 9-11
descrito, 312
Nova tela do projeto, 10
criptografando, 366
Suporte Node.js, 356
Método HTTP (), 315-316, 322-323
Tela da pá gina inicial, 9
Fundamentos do protocolo HTTP, 314-315
Visual Studio 2012 Express para Windows 8
navegadores da web, 314
descrito, 3, 5-7
servidores da web, 312-313
Novo link de projeto, 5
Web Embedding Fonts Tool (WEFT), 144
Tela de novo projeto, 6
652
objeto de janela
web farms, 422-423
servidores web
exercícios de prá tica, 425-435
descrito, 312-313
Bibliotecas WebSocket, 423-424
enviando dados do formulá rio para, 316

Objeto Web Socket
Protocolo WebSocket, 416
propriedade binaryType, 417
serviços web. Veja também plataforma Node.js
propriedade bufferedAmount, 417
Chamada AJAX, 368-380
método close (), 416
compartilhamento de recursos de origem cruzada, 380-381
propriedade de extensõ es, 417
descrito, 364-366
propriedade do evento onclose, 417
propriedade de evento onerror, 417
RESTful, 366-368
propriedade do evento onmessage, 417
Linguagem de descriçã o de serviços da Web (WSDL), 366
propriedade de evento onopen, 417
Bancos de dados Web SQL
propriedade do protocolo, 417
adicionar tabelas, 584
propriedade readyState, 417, 419
funçõ es de agregaçã o, 588
método send (), 416-417, 419

propriedade url, 417
criando e abrindo, 582-583
Construtor WebSocket , 416
deletando registros, 586
Protocolo WebSocket
Método executeSql (), 585-586
lidando com web farms, 422-423
resultados de filtragem, 587-588
descrito, 415-416
inserir novos registros, 585-586
lidar com desconexõ es de conexã o, 422
Comandos JOIN, 588
manuseio de tempos limite, 420-422
consideraçõ es de longevidade de, 582
exercícios de prá tica, 425-435
realizando atualizaçõ es de esquema, 583
Bibliotecas WebSocket, 423-424
lendo valores de, 586-587
Padrã o WebVTT (Web Video Text Tracks),
441-442
transaçõ es em, 584-585

WEFT (Web Embedding Fonts Tool), 144
atualizaçã o de registros existentes, 586
Clá usula WHERE (SQL), 587
armazenamento web. Veja os mecanismos de armazenamento
loop while, 84-85
trabalhadores da web , 404-405, 563
atributo de largura
Arquivo Web.config, 10
elemento < canvas >, 460
Extensã o de arquivo .webm, 438-439
Formato WebM / VP8, 438
API WebSocket
lidando com web farms, 422-423
objeto de janela
descrito, 415-417
eventos desencadeados por, 117
lidar com desconexõ es de conexã o, 422
propriedade frameElement, 44
manuseio de tempos limite, 420-422
propriedade dos pais, 44
653
Aplicativos do Windows 8, ferramenta QUnit-Metro e método requestFileSystem (), 601

propriedade principal, 44
Método webkitRequestFileSystem (), 601
Aplicativos do Windows 8, ferramenta QUnit-Metro e,
95-100
Windows Communication Foundation (WCF), 366
WinJS, 394
objeto trabalhador
método close (), 405
descrito, 405
Método postMessag e (), 563
método terminate (), 405
Consó rcio da World Wide Web. Veja W3C (Mundial
Wide Web Consortium)
atributo wrap ( elemento < textarea >), 316
escrevendo
para diretó rios, 605
para arquivos, 563, 602-603
Có digo JavaScript, 89–103
WSDL (Web Services Description Lan guage), 366
XHTML, 30-32
XML (eXtensible Markup Language), 30-31
Definiçã o de Esquema XML (XSD), 30
Objeto XMLHttpRequest
descrito, 369-371
tratamento de erros, 372-373
Wrappers jQuery, 373-377
método open (), 370
propriedade de resposta, 370
có digo de amostra, 394-395
método send (), 370
XSD (definiçã o de esquema XML), 30
Ataques XSS, 381
654
Sobre o autor
GLENN JOHNSON é um instrutor profissional, consultor e desenvolvedor com experiência

nos ú ltimos 25 anos. Como consultor e desenvolvedor, ele trabalhou em muitos projetos de
grande porte, principalmente no setor de seguros. Os pontos fortes de Glenn estã o com
produtos Microsoft como ASP.NET, Model-View-Controler (MVC), Silverlight, Windows
Presentation Foundation (WPF), Windows Communication Foundation (WCF) e Microsoft
SQ L Server usando C #, Visual Basic e T-SQL. Este é mais um dos muitos livros sobre .NET
de autoria de Glenn. Ele também desenvolve cursos e dá aulas em muitos países em
HTML5, JavaScript, Microsoft MVC, Microsoft ASP.NET, Visual Basic
.NET, C # e .NET Framework.
Glenn possui as seguintes certificaçõ es da Microsoft: MCT, MCPD, MCTS, MCAD, MCSD,
MCDBA, MCP + Site Building, MCSE + Internet, MCP + Internet e MCSE. Você pode encontrar
o site de Glenn em http://GJTT.com .
Guia de treinamento: programação em HTML5 com
JavaScript e CSS3 e exame 70-480

Este livro foi elaborado para ajudar a construir e aprimorar sua experiência na
funçã o. Além disso, ele cobre alguns dos tó picos e habilidades relacionados ao Exame de
Certificaçã o Microsoft 70-480 e pode ser ú til como um recurso de estudo complementar.
Observaçã o: este livro nã o foi elaborado para cobrir todos os tó picos do exame; veja o
grá fico a seguir. Se você estiver se preparando para o exame, use materiais adicionais para
ajudar a aumentar sua prontidã o, em conjunto com a experiência do mundo real.
EXAME OBJE CTIVES / SKILLS
VEJA A COBERTURA RELACIONADA AO TÓPICO AQUI
IMPLEMENTAR E MANIPULAR ESTRUTURAS E OBJETOS DE DOCUMENTOS
Crie a estrutura do documento.
Capítulos 2 e 5
Escreva o có digo que interage com os controles da IU.
Capítulos 3, 7, 11, 12 e 13
Aplique estilo a elementos de programaçã o HTML .
Capítulo 4
Implementar APIs HTML5.
Capítulos 10, 14, 15 e 16
Estabeleça o escopo de objetos e variá veis.
Capítulos 3 e 6
Crie e implemente objetos e métodos.
Capítulo 6
FLUXO DE PROGRAMA DE IMPLEMENTAÇÃO
Implemente o fluxo do programa.
Capítulo 3 e 6
Gerar e gerenciar um evento.
Capítulo 3 e 6
Implemente o tratamento de exceçõ es.
Capítulo 3
Implemente uma chamada de volta.
Capítulo 3, 6, 8 e 9
Crie um processo de trabalho da web.
Capítulo 9
ACESSO E DADOS SEGUROS
Valide a entrada do usuá rio usando elementos HTML5.
Capítulo 7
Valide a entrada do usuá rio usando JavaScript.
Capítulo 7
Consumir dados.
Capítulo 8
Serialize, desserialize e transmita dados.
Capítulo 7
USE CSS3 EM APLICATIVOS
Estilizar propriedades de texto HTML.
Capítulo 4
Estilizar as propriedades da caixa HTML.
Capítulo 4
Crie um layout de conteú do flexível.
Capítulo 4
Crie uma IU animada e adaptá vel.
Capítulo 4
Encontre elementos usando seletores CSS e jQuery.

Capítulo 4 e 6
Estruture um arquivo CSS usando seletores CSS.
Capítulo 4
Para obter informaçõ es completas sobre o Exame 70-480,

visite http://www.microsoft.com/learning/en/us
/exam.aspx?ID=70-480 . Além disso, para obter mais informaçõ es sobre as certificaçõ es da

Microsoft, visite http://www.microsoft.com/learning .
Fazer o que
você pensa em
este livro?
Esperamos ouvir de você!
Para participar de uma breve pesquisa online, visite:
microsoft.com/learning/booksurvey
Conte-nos como este livro atende bem à s suas necessidades - o que funciona de maneira
eficaz e o que podemos fazer melhor. Seu feedback nos ajudará a melhorar continuamente
nossos livros e recursos de aprendizagem para você.
Agradecemos antecipadamente por sua contribuiçã o!
Esboço do Documento
 Cobrir
o Pá gina de direitos autorais
 Conteú do resumido
 Tabela de conten ts
 Introduçã o
o Compatibilidade com versõ es anteriores e

compatibilidade entre navegadores
o requisitos de sistema
o Requisitos de hardware
o Requisitos de software
o Pratica exercícios
o Agradecimentos
o Errata e suporte ao livro
o Nó s queremos ouvir de você
o Manter contato
 Capítulo 1: Introduçã o ao Visual Studio 2012 e Blend for Visual Studio

2012
o Antes de você começar
o Liçã o 1: Visual Studio 2012
 Ediçõ es Vi sual Studio 2012
 Suporte do Visual Studio 2012 para HTML5
 Suporte CSS3
 Suporte a JavaScript
 Explorando o Visual Studio Express 2012 para

Windows 8
 Explorando o Visual Studio Express 2012 para a

Web
 Resumo da liçã o
 Revisã o da aula
o Liçã o 2: Mistura para Visual Studio 2012
 Explorando a mistura
 Exercício 1: Hello World com Visual Studio

Express 2012 para Windows 8
 Exercício 2: Hello World com Visual Studio

Express 2012 para Web
 Exercício 3: Hello World com Blend
o Exercícios de prá tica sugeridos
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 2: Primeiros passos com HTML5
o Liçã o 1: Introduçã o ao HTML5
 Compreender HTML, XHTML e HTML5
 Apresentando a marcaçã o semâ ntica
 Trabalhando com elementos
 Criaçã o de um documento HTML
o Liçã o 2: Incorporaçã o de conteú do
 Incorporando HTML usando frames inline
 Trabalho com hiperlinks
 Adicionar imagens ao seu documento HTML
 Incorporando conteú do de plug-in
 Exercício 1: Crie um site simples usando o Visual

Studio Express for Web
 Exercício 2: crie pá ginas adicionais
 Exercício 3: Incorporaçã o de Conteú do
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 3: Introduçã o ao JavaScript
o Liçã o 1: Apresentando JavaScript
 Compreendendo o JavaScript
 Compreender a funçã o dos dados
 Usando declaraçõ es
 Trabalhando com funçã o s
 Variá veis de escopo
 Funçõ es de aninhamento e escopo de variá vel

local aninhada
 Convertendo para um tipo diferente
 Programaçã o condicional
 Implementando loops de có digo
 Manipulaçã o de erros
o Liçã o 2: escrever, testar e depurar JavaScript
 Hello World de JavaScript
 Usando a tag de script
 Lidar com navegadores que nã o suportam

JavaScript
 JavaScript embutido vs. arquivos JavaScript

externos
 Colocando seus elementos de script
 Usando o depurador de JavaScript do Visual

Studio .NET
o Liçã o 3: Trabalhar com objetos
 Trabalho com matrizes
 Acessando objetos DOM
 Exercício 1: Criar uma pá gina da web da

calculadora
 Exercício 2: Adicionar a estrutura de teste QUnit
o Respostas
 L i ç ã o 1
 Liçã o 2
 Liçã o 3
 Capítulo 4: Primeiros passos com CSS3
o Liçã o 1: Apresentando CSS3
 Definindo e aplicando um estilo
 Adicionar comentá rios a uma folha de estilo
 Criaçã o de um estilo embutido
 Criaçã o de um estilo incorporado
 Criaçã o de uma folha de estilo externa
o Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e

cascateamento
 Definindo seletores
 Compreender os estilos integrados do navegador
 Estendendo estilos de navegador com estilos de

usuá rio
 Trabalhando com estilos importantes
 Como os estilos se propagam?
 Usando especificidade
 Entendendo a herança
o Liçã o 3: Trabalhando com propriedades CSS
 Trabalho com cores CSS

 Trabalhando com texto
 Trabalhando com o modelo de caixa CSS
 Definir as propriedades de borda, preenchimento

e margem
 Posicionando elementos <div>
 Usando a propriedade float
 Usando a propriedade clear
 Usando a propriedade box-sizing
 Centralizar o conteú do na janela do navegador
 Exercício 1: Adicionar uma folha de estilo ao

projeto da calculadora
 Exercício 2: limpe a calculadora da web
o Respostas
 Liçã o 1
 Liçã o 2
 Liçã o 3
 Capítulo 5: Mais HTML5
o Liçã o 1: Pensando na semâ ntica do HTML5
 Por que marcaçã o semâ ntica?
 Suporte do navegador para HTML5

 Criaçã o de documentos HTML5 semâ nticos
 Criaçã o de um contêiner de layout HTML5
 Controlando o formato usando o elemento <div>
 Adicionar pausas temá ticas
 Anotando conteú do
 Trabalhando com listas
o Liçã o 2: Trabalhando com tabelas
 Uso indevido de mesa
 Criaçã o de uma tabela bá sica
 Adicionando células de cabeçalho
 Estilo dos cabeçalhos da tabela
 Declarando o cabeçalho, rodapé e corpo da tabela
 Criaçã o de tabelas irregulares
 Adicionar uma legenda a uma tabela
 Colunas de estilo
 Exercício 1: Adicionar um layout de pá gina ao

projeto da calculadora
 Exercício 2: Adicionar estilos ao layout da

calculadora
 Exercício 3: Limpando a calculadora da web

o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 6: JavaScript e jQuery essenciais
o Liçã o 1: Criando objetos JavaScript
 Usando terminologia orientada a objetos
 Compreendendo a advertência orientada a

objetos do JavaScript
 Usando o padrã o literal de objeto JavaScript
 Criaçã o de objetos dinâ micos usando o padrã o de

fá brica
 Criaçã o de uma classe
 Usando a propriedade prototype
 Debatendo o protó tipo / compromisso privado
 Implementando namespaces
 Implementando herança
o Liçã o 2: Trabalhando com jQuery
 Apresentando jQuery
 Introduçã o ao jQuery
 Usando jQuery
 Habilitando JavaScript e jQuery IntelliSense

 Criando um wrapper jQuery para uma referência
de elemento DOM
 Adicionar ouvintes de eventos
 Manipuladores de eventos de disparo
 Inicializando o có digo quando o navegador

estiver pronto
 Exercício 1: Criar um objeto calculadora
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 7: Trabalhando com formulá rios
o Liçã o 1: Entendendo os formulá rios
 Compreendendo as comunicaçõ es na web
 Envio de dados do formulá rio para o servidor da

web
 Envio de dados ao enviar um formulá rio
 Usando o elemento <label>
 Especificando os formulá rios pai
 Acionando o envio do formulá rio
 Serializando o formulá rio
 Usando o atributo autofocus

 Uso de restriçõ es de envio de dados
 Usando POST ou GET
o Liçã o 2: validaçã o do formulá rio
 Validat necessá rio ion
 Validando entrada de URL
 Validando nú meros e intervalos
 Estilizando as validaçõ es
 Exercício 1: Crie um formulá rio de contato
 Exercício 2: adicionar validaçã o ao formulá rio de

contato
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 8: Sites e serviços
o Liçã o 1: primeiros passos com Node.js
 Instalando Node.js
 Criaçã o de Hello World a partir de Node.js
 Criaçã o de um mó dulo Node.js

 Criaçã o de um pacote Node.js
 Avanço rá pido para expressar
 Começando com expresso
o Liçã o 2: Trabalhando com serviços da web
 Na introduçã o de serviços da web
 Criaçã o de um serviço da Web RESTful usando

Node.js
 Usando AJAX para chamar um serviço da web
 Compartilhamento de recursos de origem

cruzada
 Exercício 1: Crie um site para receber dados
 Exercício 2: Criar um serviço web para receber

dados
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 9: Operaçõ es assíncronas
o Liçã o 1: operaçõ es assíncronas usando jQuery e WinJS
 Usando um objeto de promessa

 Criaçã o de objetos de promessa jQuery usando
$ .Deferred ( )
 Falha de manuseio
 Lidando com a limpeza de conclusã o
 Inscrever-se em um objeto de promessa

concluído
 Encadeando promessas usando o método do tubo
 Execuçã o paralela usando $ .when (). Then ()
 Atualizando progresso
 Chamadas assíncronas condicionais
o Liçã o 2: trabalhar com web workers
 Detalhes do trabalhador da web
 Exercício 1: Implementar execuçã o de có digo

assíncrono
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 10: Comunicaçõ es WebSocket
o Liçã o 1: Comunicaçã o usando WebSocket

 Compreendendo o protocolo WebSocket
 Definindo a API WebSocket
 Implementando o objeto WebSocket
 Lidando com tempos limite
 Lidando com desconexõ es de conexã o
 Lidando com web farms
 Usando bibliotecas WebSocket
 Exercício 1: Criar um bate-papo servir r
 Exercício 2: Crie o cliente de chat
o Respostas
 Liçã o 1
 Capítulo 11: HTML5 suporta multimídia
o Liçã o 1: reproduzindo vídeo
 Formatos de vídeo
 Implementando o elemento <video>
 Definir a fonte
 Configurando o elemento <video>
 Acessando faixas
o Liçã o 2: reproduzindo á udio
 Formatos de á udio
 O elemento <audio>
 Definir a fonte
 Configurando o elemento <audio>
o Liçã o 3: usando o objeto HTMLMediaElement
 Compreendendo os métodos HTMLMediaElement
 Usando propriedades HTMLMediaElement
 Inscrever-se em eventos HTMLMediaElement
 Usando controle de mídia
 Exercício 1: criar uma pá gina da web que exiba

vídeo
o Respostas
 Liçã o 1
 Liçã o 2
 Liçã o 3
 Capítulo 12: Desenho com HTML5
o Liçã o 1: Desenho usando o elemento <canvas>

 A referência do elemento <canvas>
 Referência do objeto de contexto

do CanvasRender ingContext2D
 Implementando a tela
 Desenhar retâ ngulos
 Configurando o estado do desenho
 Salvar e restaurar o estado de desenho
 Desenhar usando caminhos
 Desenho de texto
 Desenho com imagens
o Liçã o 2: Usando grá ficos vetoriais escalá veis
 Usando o elemento <svg>
 Exibindo arquivos SVG usando o elemento <img>
 Exercício 1: Crie uma pá gina da web usando uma

tela
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 13: Arrastar e soltar

o Liçã o 1: arrastando e soltando
 Arrastando
 Compreendendo os eventos de arrasto
 Caindo
 Usando o objeto DataTransfer
o Liçã o 2: arrastando e soltando arquivos
 Usando os objetos FileList e File
 Exercício 1: Crie um jogo de embaralhamento

numérico
 Exercício 2: adicionar arrastar e soltar ao jogo
 Exercício 3: Adicionar embaralhamento e

verificaçã o do vencedor
o Ex prá tica sugerida ercises
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 14: Tornando seu HTML ciente de localizaçã o
o Liçã o 1: posicionamento bá sico

 Referência de objeto de geolocalizaçã o
 Recuperando a posiçã o atual
 Manipulaçã o de erros
 Endereçando privac y
 Especificando opçõ es
o Liçã o 2: Posicionamento monitorado
 Onde você está agora? Que tal agora?
 Calculando a distâ ncia entre as amostras
 Exercício 1: Mapeie suas posiçõ es atuais
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 15: Dados locais com armazenamento na web
o Liçã o 1: Apresentando o armazenamento na web
 Entendendo os cookies
 Usando o plug-in de cookie jQuery
 Trabalhando com o bolinho limitatio ns
 Alternativas aos cookies anteriores ao HTML5

 Compreender o armazenamento HTML5
 Explorando localStorage
 Usando a persistência de curto prazo com

sessionStorage
 Antecipando potenciais armadilhas de

desempenho
o Liçã o 2: Manipulaçã o de eventos de armazenamento
 Enviando notificaçõ es apenas para outras janelas
 Usando a referência do objeto StorageEvent
 Inscrever-se em eventos
 Usando eventos com sessionStorage
 Exercício 1: Crie um catá logo de contatos usando

localStorage
o Respostas
 Liçã o 1
 Liçã o 2
 Capítulo 16: Aplicativos da web off-line
o Le sson 1: Trabalhando com Web SQL

 Considerando a longevidade questioná vel do Web
SQL
 Criaçã o e abertura do banco de dados
 Executando atualizaçõ es de esquema
 Usando transaçõ es
o Liçã o 2: Trabalhando com IndexedDB
 Usando có digo específico do navegador
 Criaçã o e abertura do banco de dados
 Usando armazenamentos de objetos
 Usando transaçõ es
 Inserindo um novo registro
 Atualizar um registro existente
 Excluindo um registro
 Recuperando um registro
 Compreendendo os cursores
 Descartando um banco de dados
o Liçã o 3: Trabalhando com a API FileSystem
 Avaliando o suporte do navegador
 Abrindo o sistema de arquivos
 Criar e abrir um arquivo
 Gravando em um arquivo
 Lendo um arquivo
 Excluindo um arquivo
 Criaçã o e abertura de um diretó rio
 Gravando um arquivo em um diretó rio
 Excluindo um diretó rio
o Liçã o 4: Trabalhando com o aplicativo off-line HTTP

ca che
 Suporte de navegador
 O arquivo de manifesto em cache
 Atualizando o cache
 Entendendo eventos
 Exercício 1: Modifique um livro de contato para

usar IndexedDB
o Respostas
 Liçã o 1
 Liçã o 2
 Liçã o 3
 Liçã o 4
 Índice
 Sobre o autor
 Mapeamento de objetivos
 Pá gina de pesquisa

Guia de Treinamento em HTML5 e CSS3 - Exemplos Práticos - TRADUZIDO

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia de Treinamento em HTML5 e CSS3 - Exemplos Práticos - TRADUZIDO

Enviado por

Direitos autorais:

Formatos disponíveis

Índice

Pá gina de direitos autorais

Compatibilidade com versõ es anteriores e compatibilidade entre navegadores

Errata e suporte ao livro

Nó s queremos ouvir de você

Antes de você começar

Liçã o 1: Visual Studio 2012

Ediçõ es do Visual Studio 2012

Suporte do Visual Studio 2012 para HTML5

Explorando o Visual Studio Express 2012 para Windows 8

Explorando o Visual Studio Express 2012 para a Web

Liçã o 2: Mistura para Visual Studio 2012

Exercício 2: Hello World com Visual Studio Express 2012 para Web

Exercício 3: Hello World com Blend

Exercícios de prá tica sugeridos

Capítulo 2: Primeiros passos com HTML5

Antes de você começar

Liçã o 1: Apresentando HTML5

Compreender HTML, XHTML e HTML5

Introduzindo a marcaçã o semâ ntica

Trabalhando com elementos

Criaçã o de um documento HTML

Liçã o 2: Incorporaçã o de conteú do

Incorporando HTML usando frames inline

Adicionar imagens ao seu documento HTML

Incorporando conteú do de plug-in

Exercício 2: crie pá ginas adicionais

Exercício 3: Incorporaçã o de Conteú do

Exercícios de prá tica sugeridos

Capítulo 3: Introduçã o ao JavaScript

Antes de você começar

Liçã o 1: Apresentando JavaScript

Compreender a funçã o dos dados

Trabalhando com funçõ es

Variá veis de escopo

Funçõ es de aninhamento e escopo de variá vel local aninhada

Convertendo para um tipo diferente

Implementando loops de có digo

Liçã o 2: escrever, testar e depurar JavaScript

Hello World de JavaScript

Usando a tag de script

Lidar com navegadores que nã o suportam JavaScript

JavaScript embutido vs. arquivos JavaScript externos

Colocando seus elementos de script

Usando o depurador de JavaScript do Visual Studio .NET

Liçã o 3: Trabalhando com objetos

Trabalho com matrizes

Acessando objetos DOM

Exercício 1: Criar uma pá gina da web da calculadora

Exercício 2: Adicionar a estrutura de teste QUnit

Exercícios de prá tica sugeridos

Antes de você começar

Liçã o 1: Apresentando CSS3

Definindo e aplicando um estilo

Adicionar comentá rios a uma folha de estilo

Criaçã o de um estilo inline

Criaçã o de um estilo incorporado

Criaçã o de uma folha de estilo externa

Liçã o 2: Noçõ es bá sicas sobre seletores, especificidade e cascateamento

Compreender os estilos integrados do navegador

Estendendo estilos de navegador com estilos de usuá rio

Trabalhando com estilos importantes

Como os estilos se propagam?

Liçã o 3: Trabalhando com propriedades CSS