A Smarter Way To Learn Javascript PDF Free

Machine Translated by Google
Uma maneira mais inteligente de aprender JavaScript
A nova abordagem que usa a tecnologia para reduzir seu esforço pela metade
Mark Myers
copyright © 2013 por Mark Myers
2
Capítulos
1. Alertas
2. Variáveis para strings 3.
Variáveis para números 4.
Nomes de variáveis legais e ilegais 5.
Expressões matemáticas: operadores
familiares 6. Expressões matemáticas:
operadores desconhecidos 7. Expressões
matemáticas: eliminando ambiguidade 8.
Concatenando strings de texto 9. Prompts 10
instruções if 11. Operadores de comparação 12.
instruções if...else e else if 13. Testando conjuntos
de condições 14. instruções if aninhadas 15.
Arrays 16. Arrays: adicionando e removendo
elementos 17. Arrays: removendo, inserindo e
extraindo elementos 18. for loops 19. for loops:
sinalizadores, booleanos, comprimento do array
e quebras 20. for loops aninhados 21. Mudando de maiúsculas
e minúsculas 22. Strings: medindo o comprimento e extraindo
partes 23. Strings: encontrando segmentos 24. Strings:
encontrando um caractere em um local 25. Strings: substituindo
caracteres 26. Arredondando números 27. Gerando números
aleatórios 28. Convertendo strings em inteiros e decimais 29.
Convertendo strings em números, números em strings 30.
Controlando o comprimento dos decimais 31. Obtendo a data
atual e hora 32. Extraindo partes da data e hora 33. Especificando
uma data e hora 34. Mudando elementos de uma data e hora
35. Funções 36. Funções: transmitindo dados 37. Funções:
transmitindo dados deles 38. Funções: variáveis locais vs.
globais 39. instruções switch : como iniciá-las 40. instruções
switch : como completá-las
3
41. loops while

42. loops do...while
43. Colocando scripts
44. Comentando 45.
Eventos: link 46.
Eventos: botão 47.
Eventos: mouse 48.
Eventos: campos 49.
Lendo valores de campos
50. Configurando valores
de campos 51 Ler e definir texto de
parágrafo 52. Manipular imagens e texto
53. Trocar imagens 54. Trocar imagens e
definir classes 55. Definir estilos 56.
Direcionar todos os elementos pelo nome da
tag 57. Direcionar alguns elementos pelo
nome da tag 58. O DOM 59. O DOM: Pais e
filhos 60. O DOM: Encontrando filhos 61. O
DOM: Artefatos de lixo e nodeType 62. O
DOM: Mais maneiras de direcionar elementos
63. O DOM: Obtendo o nome de um alvo 64. O
DOM: Contando elementos 65. O DOM: Atributos
66. O DOM: Nomes e valores de atributos 67. O
DOM: Adicionando nós 68. O DOM: Inserindo
nós 69. Objetos 70. Objetos: Propriedades 71.
Objetos: Métodos 72. Objetos: Construtores 73.
Objetos: Construtores para métodos 74. Objetos:
Protótipos 75. Objetos: Verificando propriedades
e métodos 76. Controle do navegador: Obtendo
e configurando o URL 77. Controle do navegador:
Obtendo e configurando o URL de outra maneira
78. Controle do navegador: Avançar e reverter
79. Controle do navegador: Preenchendo a janela
com conteúdo 80. Controle do navegador:
Controlando o tamanho e a localização da janela 81.
Controle do navegador: Testando bloqueadores de
popup 82. Validação de formulário: campos de texto
4
83. Validação de formulário: menus

suspensos 84. Validação de formulário:
botões de opção 85. Validação de
formulário: CEP 86. Validação de
formulário: email 87. Exceções: try e
catch 88. Exceções: throw 89.
Manipulação de eventos em JavaScript
5
Como proponho
cortar seu esforço pela
metade usando a tecnologia.
Quando você se propõe a aprender algo tão complicado quanto JavaScript, você se inscreve em algum
trabalho cognitivo pesado. Se eu tivesse que adivinhar, diria que todo o projeto de aprender uma língua sozinho
queima pelo menos uma grande carga de glicose cerebral. Mas aqui está o que você pode não perceber: quando
você ensina a si mesmo, sua carga cognitiva dobra.
Sim, todas as informações estão lá no livro se o autor fez um bom trabalho. Mas aprender uma língua
envolve muito mais do que ler algumas informações. Você precisa memorizar as informações, o que requer
algum tipo de plano. Você precisa praticar. Como você vai estruturar isso? E você precisa de alguma maneira
de se corrigir quando sair do curso.
Como um livro não é a melhor maneira de ajudá-lo nessas tarefas, a maioria dos autores nem tenta. O que
significa que todo o trabalho de projetar um caminho de aprendizado para você é deixado para você. E esse
meta-aprendizado do tipo faça você mesmo, essa luta com a questão de como dominar o que o livro está lhe
dizendo, exige mais esforço do que o aprendizado em si.
Tradicionalmente, um instrutor ao vivo preenche a lacuna entre a leitura e o aprendizado. Fazer um curso
abrangente ou trabalhar individualmente com um mentor ainda é a melhor maneira de aprender JavaScript se
você tiver tempo e puder pagar. Mas, já que muitas pessoas preferem aprender por conta própria, por que não
usar a tecnologia mais recente como professor substituto? Deixe o livro expor os princípios. Em seguida, use um
programa interativo para memorização, prática e correção. Quando o computador entrar em ação, você aprenderá
duas vezes mais rápido, com metade do esforço. É uma maneira mais inteligente de aprender JavaScript. É uma
maneira mais inteligente de aprender qualquer coisa.
E enquanto estivermos adotando novas tecnologias, por que não usar toda a tecnologia que pudermos
colocar em nossas mãos para otimizar o livro? A tecnologia antiga – ou seja, o livro em papel – tem sérias
limitações do ponto de vista instrucional. A nova tecnologia – ou seja, o ebook – é o caminho a seguir, por muitas
razões. Aqui estão alguns:
A cor é uma ferramenta de informação maravilhosa. É por isso que eles usam para semáforos. Mas
imprimir cores em papel multiplica o custo. Graças aos custos de instalação exorbitantes, imprimir essa única
palavra — cor — em um livro impresso sob demanda adiciona trinta dólares ao preço de varejo. Então, a cor
geralmente está fora, ou então o livro é cotado como um item de luxo. Com um ebook, a cor é gratuita.
O papel em si é caro, então geralmente não há espaço para fazer tudo o que o autor gostaria de fazer.
Uma discussão completa de pontos delicados? Esqueça. Ajuda extra para os pontos ásperos? Não pode pagar.
Centenas de exemplos? Melhor deletar alguns. Mas nenhuma limitação se aplica a um ebook. Quanto custa
uma centena de páginas digitais extras? Normalmente nada.
Quando um livro é publicado tradicionalmente, pode levar até um ano para que o manuscrito seja impresso.
Isso significa que não há tempo para testes extensivos no público-alvo ou para as revisões que os testes
inevitavelmente sugeririam. E uma vez que o livro é impresso, é um grande,
6
negócio caro para emitir edições revisadas. Os editores adiam o máximo possível. O feedback do leitor geralmente não
leva a melhorias por anos. Um ebook pode ir de manuscrito a livro em um dia, deixando muito tempo para testes e revisões.
Depois de publicado, novas edições com melhorias baseadas no feedback do leitor podem sair quantas vezes o autor
quiser, sem
custo.
Com tudo isso acontecendo para eles, há alguma dúvida de que todos os melhores livros de instrução serão e-
books? E alguém negaria que a coisa mais útil que um autor pode fazer por você, além de publicar um bom livro
eletronicamente, é assumir todo o trabalho de ensino, não apenas parte dele, adicionando interatividade para ajudá-lo na
memorização, prática , e correção?
Aqui, então, é como eu proponho usar a tecnologia atual para ajudá-lo a aprender JavaScript na metade do tempo,
com metade do esforço.
Controle cognitivo da porção. Testes me mostraram que, quando estão fazendo um aprendizado pesado, até
mesmo pessoas de mente forte se cansam mais rápido do que eu esperava. Você pode ler um romance por duas
horas seguidas, mas quando está estudando algo novo e complicado, é um jogo totalmente diferente. Meus testes
revelaram que estudar um novo material por cerca de dez minutos é o limite, antes que a maioria dos alunos comece
a desaparecer. Mas aqui está a boa notícia: mesmo quando você entra na zona de fadiga após dez minutos de
estudo, ainda tem os recursos mentais para praticar por até trinta minutos. A prática projetada corretamente exige
menos esforço do que estudar, mas ensina mais. Ler um pouco e praticar muito é a maneira mais rápida de
aprender. 500 exemplos de codificação que cobrem todos os aspectos do que você está aprendendo. Os exemplos
tornam os conceitos fáceis de entender e concentram sua atenção no material-chave abordado em cada capítulo.
As dicas de cores incorporadas no código ajudam você a gravar regras na memória. Eu exagerei e coloquei mais
exemplos que você precisa? Bem, se as coisas ficarem muito fáceis para você, pule algumas delas.
Testado em usuários ingênuos. O livro inclui muitas rodadas de revisões com base no feedback de iniciantes em
programação. Inclui discussões de ajuda extra para esclarecer conceitos que provaram ser obstáculos durante os
testes. Entre os testadores: minha esposa tecnofóbica, que descobriu que, com boa instrução, ela poderia codificar
– e ficou surpresa ao descobrir que gostou. Por falar nisso, eu mesmo tive algumas surpresas. Algumas coisas que
são simples para mim acabaram não sendo tão simples para alguns leitores. Seguiu-se a reescrita.
Exercícios de codificação interativos gratuitos emparelhados com cada capítulo - 1.750 deles ao todo.
Eles são o recurso que os testadores dizem que os ajuda mais. Nenhuma surpresa. De acordo com o New York
Times, os psicólogos "mostraram que fazer um teste - digamos, escrever tudo o que você consegue lembrar de uma
passagem em prosa estudada - pode aprofundar a memória dessa passagem melhor do que um estudo mais
aprofundado". Eu arriscaria dizer que isso vale o dobro quando você está aprendendo a codificar. Depois de ler
cada capítulo, acesse a internet e pratique tudo o que aprendeu. Cada capítulo termina com um link para os
exercícios on-line que o acompanham. Encontre um índice de todos os exercícios em http://
www.ASmarterWayToLearn.com/js/.
7
Experiência de codificação ao vivo. Em scripts, a melhor recompensa é ver seu código funcionar perfeitamente.
A maioria das sessões práticas inclui exercícios de codificação ao vivo que permitem que você veja seus scripts sendo
executados no navegador.
8
Como usar este livro
Este não é um livro como qualquer outro que você já teve antes, então um breve manual do usuário
pode ser útil.
Estude, pratique e depois descanse. Se você pretende dominar os fundamentos do JavaScript, em

vez de apenas conhecer a linguagem, trabalhe com este livro e os exercícios on-line em uma sessão de
15 a 30 minutos e faça uma pausa. Estude um capítulo por 5 a 10 minutos. Acesse imediatamente http://
www.ASmarterWayToLearn.com/js e codifique por 10 a 20 minutos, praticando a lição até que você
tenha codificado tudo corretamente. Então vá passear.
Use a maior e mais colorida tela disponível. Este livro pode ser lido em pequenas telas de telefone e
leitores monocromáticos, mas você ficará mais feliz se as coisas aparecerem em cores em uma tela
maior. Eu uso a cor como uma importante ferramenta de ensino, portanto, se você estiver lendo em
preto e branco, estará sacrificando parte do valor de ensino extra de um e-book colorido. Elementos
coloridos aparecem como um tom mais claro em algumas telas em preto e branco e, nesses dispositivos,
o efeito não é totalmente perdido, mas a cor total é melhor. Quanto à leitura em uma tela maior, o livro
inclui mais de 2.000 linhas de código de exemplo. Telas pequenas quebram longas linhas de código em
segmentos estranhos e arbitrários, confundindo a formatação. Embora ainda decifrável, o código torna-
se mais difícil de ler. Se você não tiver um dispositivo móvel ideal para este livro, considere instalar o
aplicativo de leitura Kindle gratuito em seu laptop.
Se estiver lendo em um dispositivo móvel, vá na horizontal. Por alguma razão, resisto a fazer isso
no meu iPad, a menos que esteja assistindo a um vídeo. Mas até eu, Vern Vertical, coloquei meu tablet
no modo horizontal para provar este livro. Então, por favor: começando com o Capítulo 1, faça um favor
a si mesmo e gire seu tablet, leitor ou telefone para obter uma linha de texto mais longa. Isso ajudará a
evitar a confusão de código desagradável mencionada acima.
Faça os exercícios de codificação em um teclado físico. Um dispositivo móvel pode ser ideal para
leitura, mas não é uma maneira de codificar. Muito, muito poucos desenvolvedores da Web tentariam
fazer seu trabalho em um telefone. A mesma coisa vale para aprender a codificar. Teoricamente, a
maioria dos exercícios interativos poderia ser feita em um dispositivo móvel. Mas a ideia parece tão
perversa que desativei a prática online em tablets, leitores e telefones. Leia o livro em seu dispositivo
móvel, se quiser. Mas pratique em seu laptop.
Se você tem um problema de autoridade, tente superá-lo. Quando você começar a fazer os
exercícios, descobrirá que posso ser um saco em insistir que você acerte cada pequeno detalhe. Por
exemplo, se você recuar uma linha em um espaço em vez de dois espaços, o programa que monitora
seu trabalho lhe dirá que o código não está correto, mesmo que ainda funcione perfeitamente. Insisto
em ter tudo só porque sou um maníaco por controle? Não, é porque eu tenho que colocar um limite no
comportamento independente inofensivo para automatizar o
9
exercícios. Se eu lhe desse a liberdade que você gostaria, criar os algoritmos que verificam seu trabalho seria,
para mim, um projeto de proporções de carro sem motorista. Além disso, aprender a escrever código com
precisão meticulosa ajuda você a prestar atenção aos detalhes, um requisito fundamental para codificar em
qualquer linguagem.
Assine, temporariamente, meus preconceitos de formatação. A formatação de código atual é como a
ortografia do século XVII. Cada um faz do seu jeito. Não existem padrões universalmente aceitos. Mas os
algoritmos que verificam seu trabalho quando você faz os exercícios interativos precisam de padrões. Eles não
podem conceder a você a latitude que um professor humano poderia, porque, convenhamos, eles não são tão
brilhantes. Então eu tive que me contentar com certas convenções.
Todas as convenções que ensino são adotadas por um grande segmento da comunidade de codificação, então
você estará em boa companhia. Mas isso não significa que você vai se casar com meus preconceitos de
formatação para sempre. Quando você começa a codificar projetos, em breve você desenvolverá suas próprias
opiniões ou ingressará em uma organização que tenha um livro de estilo. Até lá, pedirei que você faça seu código
parecer com o meu código.
Envie-me um e-mail com quaisquer problemas ou perguntas. O livro e os exercícios foram testados em muitos
alunos, mas não em você. Se você se deparar com um problema, se estiver apenas curioso sobre alguma coisa,
ou se eu encontrei uma maneira de te dar um ataque, me mande um e-mail para mark@ASmarterWayToLearn.com.
Ficarei feliz em ouvir de você. Eu responderei prontamente.
E, com sua ajuda, provavelmente aprenderei algo que melhorará a próxima edição.
10
1
Alertas
Um alerta é uma caixa que aparece para dar uma mensagem ao usuário. Aqui está o código para um alerta que
exibe a mensagem "Obrigado por sua entrada!"
alert("Obrigado pela sua contribuição!");
alert é uma palavra-chave, ou seja, uma palavra que tem um significado especial para JavaScript. Significa "Exibir,
em uma caixa de alerta, a mensagem que se segue". Observe que o alerta não é capitalizado. Se você colocar em
maiúscula, o script será interrompido.
Os parênteses são um requisito especial do JavaScript, com o qual você logo se acostumará.
Você estará digitando parênteses repetidamente, em todos os tipos de instruções JavaScript.
Na codificação, o texto citado "Obrigado por sua contribuição!" é chamado de string de texto ou simplesmente
string. O nome faz sentido: é uma sequência de caracteres entre aspas. Fora do mundo da codificação, chamaríamos
apenas de citação.
Observe que o parêntese de abertura está preso à palavra-chave e as aspas de abertura estão abraçando o
parêntese de abertura. Como o JavaScript ignora espaços (exceto em strings de texto), você pode escrever...
Mas eu quero que você conheça as convenções de estilo do JavaScript, então vou pedir que você sempre omita
os espaços antes e depois dos parênteses.
Em inglês, um escritor cuidadoso termina cada frase declarativa com um ponto. Em scripts, um codificador
cuidadoso termina cada instrução com um ponto e vírgula. (Às vezes, declarações complexas, semelhantes a parágrafos,
terminam com um colchete em vez de um ponto e vírgula. Isso é algo que abordarei em um capítulo posterior.) Um ponto
e vírgula nem sempre é necessário, mas é mais fácil terminar cada declaração com um ponto e vírgula, em vez de do
que parar para descobrir se você precisa de um. Neste treinamento, pedirei que você termine cada instrução (que não
termine com colchetes) com um ponto e vírgula.
Alguns codificadores escrevem window.alert em vez de, simplesmente, alert. Esta é uma maneira altamente formal,
mas perfeitamente correta de escrevê-la. A maioria dos codificadores prefere a forma abreviada. Vamos nos ater à
forma curta neste treinamento.
No exemplo acima, alguns codificadores usariam aspas simples em vez de aspas duplas.
Isso é legal, desde que seja um par correspondente. Mas em um caso como este, pedirei que você use aspas
duplas.
11
Encontre os exercícios de codificação interativos para este

capítulo em: http://www.ASmarterWayToLearn.com/js/1.html
12
2
Variáveis para Strings
Por favor, memorize os seguintes fatos.
Meu nome é Mark.

Minha nacionalidade é EUA
Agora que você memorizou meu nome e nacionalidade, não terei que repeti-los, literalmente, de novo. Se eu disser
a você: "Você provavelmente conhece outras pessoas que têm meu nome", você saberá que estou me referindo a "Mark".
Se eu lhe perguntar se minha nacionalidade é a mesma que a sua, não precisarei perguntar: "Sua nacionalidade é
a mesma dos EUA?" Vou perguntar: "Sua nacionalidade é a mesma que a minha nacionalidade?" Você vai se lembrar
que quando eu digo "minha nacionalidade", estou me referindo a "EUA", e você vai comparar sua nacionalidade com
"EUA", mesmo que eu não tenha dito "EUA" explicitamente.
Nesses exemplos, os termos "meu nome" e "minha nacionalidade" funcionam da mesma forma que as variáveis
JavaScript . Meu nome é um termo que se refere a um valor específico, "Mark". Da mesma forma, uma variável é uma
palavra que se refere a um determinado valor.
Uma variável é criada quando você escreve var (para variável) seguido pelo nome que você escolhe para dar a
ela. Ele assume um valor específico quando você atribui o valor a ele. Esta é uma instrução JavaScript que cria o nome
da variável e atribui o valor "Mark" a ela.
var nome = "Marcar";
Agora o nome da variável se refere à string de texto "Mark".

Note que foi minha escolha chamá-lo de nome. Eu poderia ter chamado de meuNome, xyz, lol ou
algo mais. Cabe a mim como nomear minhas variáveis, dentro dos limites.
Com a string "Mark" atribuída ao nome da variável , meu código JavaScript não precisa especificar "Mark"
novamente. Sempre que o JavaScript encontra o nome, o JavaScript sabe que é uma variável que se refere a "Mark".
Por exemplo, se você pedir ao JavaScript para imprimir o nome, ele lembrará o valor ao qual o nome se refere e
imprimirá...
Marcar
O valor ao qual uma variável se refere pode mudar.
Vamos voltar aos exemplos originais, os fatos que lhe pedi para memorizar. Esses fatos podem
mudar, e se o fizerem, os termos meu nome e minha nacionalidade se referirão a novos valores.
Eu poderia ir ao tribunal e mudar meu nome para Ace. Então meu nome não é mais Mark. Se eu quiser que você
se dirija a mim corretamente, terei que lhe dizer que meu nome agora é Ace. Depois que eu lhe disser isso, você saberá
que meu nome não se refere ao valor a que costumava se referir (Mark), mas se refere a
13
um novo valor (Ás).

Se eu transferir minha nacionalidade para o Reino Unido, minha nacionalidade não é mais EUA É Reino Unido Se
eu quiser que você saiba minha nacionalidade, terei que lhe dizer que agora é Reino Unido não se refere ao valor original,
"US", mas agora se refere a um novo valor.
As variáveis JavaScript também podem mudar.
Se eu codificar...
nome refere-se a "Marca". Então eu apareço e codifico a linha...
nome = "Ás";
Antes de codificar a nova linha, se eu pedisse ao JavaScript para imprimir o nome, ele imprimia ...
Mark
Mas isso foi então.
Agora, se eu pedir ao JavaScript para imprimir o nome, ele imprime ...
Ace
Uma variável pode ter qualquer número de valores, mas apenas um de cada vez.
Você pode estar se perguntando por que, na declaração acima que atribui "Ace" ao nome, a palavra-chave var está
ausente. É porque a variável foi declarada anteriormente, na declaração original que atribuiu "Mark" a ela. Lembre-se, var
é a palavra-chave que cria uma variável — a palavra-chave que a declara . Uma vez que uma variável foi declarada, você
não precisa declará-la novamente. Você pode simplesmente atribuir o novo valor a ele.
Você pode declarar uma variável em uma instrução, deixando-a indefinida. Em seguida, você pode atribuir um valor
a ele em uma instrução posterior, sem declará-lo novamente.
var nacionalidade; nacionalidade

= "EUA";
No exemplo acima, a instrução de atribuição segue a instrução de declaração imediatamente. Mas qualquer
quantidade de código pode separar as duas declarações, desde que a declaração venha primeiro. Na verdade, não há
nenhuma lei que diga que você tem que definir uma variável que você declarou.
Os nomes de variáveis JavaScript não têm significado inerente ao JavaScript.

Em inglês, as palavras têm significado. Você não pode usar qualquer palavra para se comunicar. Posso dizer: "Meu
nome é Mark", mas, se quero ser entendido, não posso dizer: "Meu floogle é Mark". Isso é
Absurdo.
Mas com variáveis, o JavaScript é cego à semântica. Você pode usar qualquer palavra (desde que
pois não quebra as regras de nomenclatura de variáveis). Do ponto de vista do JavaScript...
var floogle = "Marcar";
...é tão bom quanto...
14
Se você escrever...
var floogle = "Marcar";
...depois peça ao JavaScript para imprimir floogle, JavaScript imprime...

Marcar
dentro dos limites, você pode nomear as variáveis como quiser, e o JavaScript não se importará.
var liçãoAutor = "Marcar"; var

guyWhoKeepsSayingHisOwnName = "Mark"; var x = "Marcar";
Apesar da cegueira do JavaScript para o significado, quando se trata de nomes de variáveis, você deve dar
nomes significativos às suas variáveis, porque isso ajudará você e outros codificadores a entender seu código.
Novamente, a diferença sintática entre variáveis e strings de texto é que as variáveis nunca são colocadas
entre aspas, e as strings de texto são sempre entre aspas.
É sempre...
var sobrenome = "Smith"; var

cidadeDeOrigem = "Nova Orleans"; var
aussieSaudação = "g'Dia";
Se for uma letra ou palavra do alfabeto e não estiver entre aspas e não for uma palavra-chave que
tem um significado especial para JavaScript, como alert, é uma variável.
Se forem alguns caracteres entre aspas, é uma string de texto.
Se você não percebeu, deixe-me apontar os espaços entre a variável e o sinal de igual,
e entre o sinal de igual e o valor.
var apelido = "Bub";
Esses espaços são uma escolha de estilo e não uma exigência legal. Mas vou pedir para você incluir
em seu código ao longo dos exercícios práticos.
No último capítulo você aprendeu a escrever...
Quando o código é executado, uma caixa de mensagem é exibida dizendo "Thanks for your input!"
Mas e se você escrevesse essas duas declarações:
1 var thanx = "Obrigado pela sua contribuição!" 2 alerta

(obrigado);
Em vez de colocar uma string de texto dentro dos parênteses da instrução alert , o código acima atribui a
string de texto a uma variável. Em seguida, ele coloca a variável, não a string, dentro dos parênteses. Como o
JavaScript sempre substitui o valor da variável, o JavaScript
15
exibe - não o nome da variável thanx , mas o texto ao qual ela se refere, "Obrigado por sua entrada!"
Esse mesmo alerta, "Obrigado pela sua contribuição!" exibe.
16

17
3
Variáveis para Números
Uma string não é a única coisa que você pode atribuir a uma variável. Você também pode atribuir um número.
var peso = 150;
Tendo codificado a declaração acima, sempre que você escreve peso em seu código, o JavaScript sabe que você
quer dizer 150. Você pode usar essa variável em cálculos matemáticos.
Se você pedir ao JavaScript para adicionar 25 ao peso...
peso + 25
...JavaScript, lembrando que o peso se refere a 150, dará a soma 175.

Ao contrário de uma string, um número não é colocado entre aspas. É assim que o JavaScript sabe que é um
número no qual ele pode fazer contas e não uma string de texto, como um CEP, que ele trata como texto.
Mas então, já que não está entre aspas, como o JavaScript sabe que não é uma variável?
Bem, porque um número, ou qualquer combinação de caracteres começando com um número, não pode ser usado como
nome de variável. Se for um número, o JavaScript o rejeita como uma variável. Então deve ser um número.
Se você colocar um número entre aspas, é uma string. JavaScript não pode fazer adição nele.
Ele pode fazer adição apenas em números não entre aspas.
Agora veja este código.
1 var originalNum = 23; 2 var

newNum = originalNum + 7;
Na segunda instrução do código acima, o JavaScript substitui o número 23 quando encontra a variável originalNum.
Adiciona 7 a 23. E atribui o resultado, 30, à variável newNum.
JavaScript também pode lidar com uma expressão composta de nada além de variáveis. Por exemplo...
1 var originalNum = 23; 2 var

numToBeAdded = 7; 3 var
newNum = originalNum + numToBeAdded;
Uma variável pode ser usada para calcular seu próprio novo valor.
1 var originalNum = 90; 2

originalNum = originalNum + 10;
Se você colocar um número entre aspas e adicionar 7...
1 var originalNum = "23"; 2 var

newNum = originalNum + 7;
18
...não funcionará, porque JavaScript não pode somar uma string e um número. JavaScript interpreta "23" como uma
palavra, não como um número. Na segunda afirmação, ele não adiciona 23 + 7 ao total de 30. Ele faz algo que pode
surpreendê-lo. Falarei sobre isso em um capítulo subsequente. Por enquanto, saiba que um número entre aspas não é um
número, mas uma string, e o JavaScript não pode fazer adição nele.
Observe que qualquer nome de variável em particular pode ser o nome de uma variável numérica ou variável de string.
Do ponto de vista do JavaScript, não há nada em um nome que denote um tipo de variável ou outro. Na verdade, uma
variável pode começar como um tipo de variável e depois se tornar outro tipo de variável.
Você notou o que há de novo em...
1 var número original = 23; 2 var

novoNumero = originalNumero + 7;
A instrução atribui à variável newNumber o resultado de uma operação matemática.

O resultado dessa operação, é claro, é um valor numérico.
O exemplo mistura uma variável e um número literal em uma expressão matemática. Mas você poderia
também não use nada além de números ou nada além de variáveis. É tudo a mesma coisa para JavaScript.
Eu lhe disse que você não pode começar um nome de variável com um número. A declaração...
var 1ºPresidente = "Washington";
...é ilegal, graças ao "1" inicial no nome da variável.

Mas você pode incluir números em nomes de variáveis, desde que nenhum deles venha primeiro. o
declaração...
var prezWhoCame1st = "Washington";
...é legal.
Convenientemente, se você especificar um número em vez de uma string como uma mensagem de alerta...
alerta(144);
...ou se você especificar uma variável que representa um número como uma mensagem de alerta...
1 var caseQty = 144; 2

alerta(caseQty);
...JavaScript converte automaticamente em uma string e a exibe.
19

20
4
Nomes de variáveis legais e ilegais
Você já aprendeu três regras sobre como nomear uma variável: Você não pode colocá-la entre aspas. O
nome não pode ser um número ou começar com um número. Não pode ser nenhuma das palavras-chave do
JavaScript — as palavras especiais que atuam como instruções de programação, como alert e var.
Aqui estão as restantes regras:
Um nome de variável não pode conter espaços.

Um nome de variável pode conter apenas letras, números, cifrões e sublinhados.
Embora um nome de variável não possa ser nenhuma das palavras-chave do JavaScript, ele pode conter palavras- chave.
Por exemplo, userAlert e myVar são legais.
Letras maiúsculas são boas, mas tenha cuidado. Os nomes de variáveis diferenciam maiúsculas de
minúsculas. Uma rosa não é uma rosa. Se você atribuir a string "Floribundas" à variável rose e, em
seguida, solicitar ao JavaScript o valor atribuído a Rose, você ficará vazio.
Eu ensino a convenção de nomenclatura camelCase . Por que "camelCase"? Porque há uma corcova ou
duas (ou três) no meio se o nome for formado por mais de uma palavra. Um nome camelCase começa
em letras minúsculas. Se houver mais de uma palavra no nome, cada palavra subsequente recebe um
cap inicial, criando uma corcunda. Se você formar um nome de variável com apenas uma palavra, como
resposta, não há corcunda. É um camelo que está sem comida. Por favor, adote a convenção camelCase.
Isso tornará seus nomes de variáveis mais legíveis e será menos provável que você misture nomes de
variáveis.
Exemplos:
userResponse
userResponseTime
userResponseTimeLimit
resposta
Torne seus nomes de variáveis descritivos, para que seja mais fácil descobrir o que seu código significa
quando você ou outra pessoa voltar a ele daqui a três semanas ou um ano. Geralmente, userName é
melhor que e faveBreed é melhor quetem
favBrd, embora oslegibilidade
nomes mais
bestSupportingActressInADramaOrComedy
Você que equilibrar curtos
com é umx modelo
sejam
concisão, noperfeitamente
entanto. legais.
de clareza, mas
pode ser demais para a maioria de nós digitar ou ler. Eu encurtaria.
21

22
Expressões matemáticas:
Operadores familiares
Onde quer que você possa usar um número, você pode usar uma expressão matemática. Por exemplo, você está
familiarizado com esse tipo de declaração.
var número popular = 4;
Mas você também pode escrever isso.
var número popular = 2 + 2;
Você também pode escrever:
alerta(2 + 2);
Isso exibe a mensagem "4" em uma caixa de alerta.

Quando vê uma expressão matemática, o JavaScript sempre faz as contas e entrega o resultado.
Aqui está uma declaração que subtrai 24 de 12, atribuindo -12 à variável.
var número popular = 12 - 24;
Este atribui o produto de 3 vezes 12, 36, à variável.
var númeropopular = 3 * 12;
Neste, o número 10 é atribuído a uma variável. Então 1 é adicionado à variável, e

a soma, 210, é atribuída a uma segunda variável.
Como de costume, você pode misturar variáveis e números.
1 var num = 10;

2 var númeropopular = num + 200;
Você também pode usar nada além de variáveis.
1 var num = 10;

2 var outroNum = 1;
3 var númeropopular = num + outroNum;
Os operadores aritméticos que tenho usado, +, -, * e /, são sem dúvida familiares para você.
Este pode não ser:
var whatsLeftOver = 10 % 3;
23
% é o operador de módulo. Não lhe dá o resultado da divisão de um número por outro.

Dá-lhe o resto quando a divisão é executada.
Se um número for dividido igualmente em outro, a operação de módulo retornará 0. Na
instrução a seguir, 0 é atribuído à variável.
var whatsLeftOver = 9% 3;
24
Encontre os exercícios interativos de codificação para este

25
Operadores desconhecidos
Existem várias expressões matemáticas especializadas que você precisa conhecer. Aqui está o primeiro.
num++;
Esta é uma forma curta de escrever...
num = num + 1;
Ele incrementa a variável em 1.

Você diminui usando menos em vez de mais.
num--;
Você pode usar essas expressões em uma atribuição. Mas o resultado pode surpreendê-lo.
1 var num = 1;
2 var newNum = num++;
No exemplo acima, o valor original de num é atribuído a newNum e num é incrementado posteriormente. Se
num for originalmente atribuído a 1 na primeira instrução, a segunda instrução aumentará seu valor para 2. newNum
obtém o valor original de num, 1.
Se você colocar os sinais de adição antes da variável, obterá um resultado diferente.
1 var num = 1; 2 var

novoNum = ++num;
Nas declarações acima, tanto num quanto newNum terminam com um valor de 2.
Se você colocar os menos após a variável, a nova variável receberá o valor original e a primeira variável será
decrementada.
1 var num = 1;
2 var newNum = num--;
num é decrementado para 0 e newNum obtém o valor original de num, 1.

Mas se você colocar os menos antes da variável, newNum recebe o valor decrementado, não o original. Tanto
num quanto newNum terminam com um valor de 0.
1 var num = 1;
2 var novoNum = --num;
26

27
Eliminando a ambiguidade
Expressões aritméticas complexas podem representar um problema, que você pode se lembrar de
álgebra do ensino médio. Veja este exemplo e me diga qual é o valor de totalCost .
var custo total = 1 + 3 * 4;
O valor de totalCost varia, dependendo da ordem em que você faz a aritmética. Se você começar somando
1 + 3, então multiplique a soma por 4, totalCost tem o valor de 16. Mas se você for para o outro lado e começar
multiplicando 3 por 4, então adicione 1 ao produto, você obtém 13.
Em JavaScript como em álgebra, a ambiguidade é esclarecida por regras de precedência. Como na álgebra,
a regra que se aplica aqui é que as operações de multiplicação são concluídas antes das operações de adição.
Portanto , totalCost tem o valor de 13.
Mas você não precisa memorizar as regras de precedência complexas do JavaScript. Você pode refinar o
problema usando parênteses para eliminar a ambiguidade. Os parentes substituem todas as regras de precedência
internas. Eles forçam o JavaScript a concluir as operações entre parênteses antes de concluir qualquer outra
operação.
Quando você usa parênteses para deixar suas intenções claras para o JavaScript, também torna seu código
mais fácil de entender, tanto para outros codificadores quanto para você quando estiver tentando entender seu
próprio código daqui a um ano. Nesta declaração, os parênteses dizem ao JavaScript para primeiro multiplicar 3
por 4 e depois adicionar 1. O resultado: 13.
var custo total = 1 + (3 * 4);
Se eu mover os parênteses, a aritmética é feita em uma ordem diferente. Nesta próxima instrução, o
posicionamento dos parênteses diz ao JavaScript para primeiro adicionar 1 e 3, depois multiplicar por 4. O resultado
é 16.
var custo total = (1 + 3) * 4;
Aqui está outro exemplo.
var resultadoOfComputação = (2 * 4) * 4 + 2;
Ao colocar a primeira operação de multiplicação entre parênteses, você disse ao JavaScript para
faça essa operação primeiro. Mas então o que? O pedido pode ser..
1. Multiplique 2 por 4.
28
2. Multiplique esse produto por 4.

3. Adicione 2 a ele.
... dando a resultOfComputation um valor de 34.

Ou o pedido pode ser...
1. Multiplique 2 por 4.
2. Multiplique esse produto pela soma de 4 e 2.
... dando a resultOfComputation um valor de 48.

A solução é mais parênteses.
Se você quiser que a segunda multiplicação seja feita antes que o 2 seja adicionado, escreva isto...
resultadoDeCálculo = ((2 * 4) * 4) + 2;
Mas se você quiser que o produto de 2 vezes 4 seja multiplicado pelo número obtido quando somar 4 e 2,
escreva isto...
resultadoOfComputação = (2 * 4) * (4 + 2);
29

30
8
Concatenar strings de texto
No Capítulo 1, você aprendeu a exibir uma mensagem em um alerta, codificando-a dessa maneira.
Ou você pode codificá-lo dessa maneira.
1 var message = "Obrigado pela sua contribuição!"; 2

alerta(mensagem);
Mas suponha que você queira personalizar uma mensagem. Em outra parte do seu código, você pediu ao usuário o
nome dela e atribuiu o nome que ela digitou a uma variável, userName.
(Você ainda não sabe como fazer isso. Você aprenderá como em um capítulo subsequente.)
Agora, você deseja combinar o nome dela com um "Obrigado" padrão para produzir um alerta que diga, por exemplo,
"Obrigado, Susan!"
Quando o usuário forneceu seu nome, nós o atribuímos à variável userName. Este é o código.
alert("Obrigado, " + nome_do_usuário + "!");
Usando o operador plus, o código combina—concatena—três elementos na mensagem: a string "Thanks," mais a
string representada pela variável userName mais a string "!"
Observe que a primeira string inclui um espaço. Sem ele, o alerta seria "Obrigado, Susan!".
Você pode concatenar qualquer combinação de strings e variáveis, ou todas as strings ou todas
variáveis. Por exemplo, posso reescrever o último exemplo dessa maneira.
1 var mensagem = "Obrigado,"; 2 var

banger = "!"; 3 alert(mensagem + nome de
usuário + banger);
Aqui está, com três cordas.
alert("Obrigado, " + "Susan" + "!");
Você pode atribuir uma concatenação a uma variável.
1 var mensagem = "Obrigado,"; 2 var

userName = "Susan"; 3 var banger = "!"; 4
var customMess = mensagem + userName
+ banger; 5 alerta(customMess);
31
Se você colocar números entre aspas, o JavaScript os concatena como strings em vez de adicioná-los.
Este código...
alert("2" + "2");
...exibe a mensagem "22".

Se você misturar cordas e números...
alert("2 mais 2 igual a " + 2 + 2);
...JavaScript converte automaticamente os números em strings e exibe a mensagem "2 mais 2 é igual
a 22".
32

33
9
Comandos
Uma caixa de prompt solicita algumas informações ao usuário e fornece um campo de resposta para ela
responda.
Este código faz ao usuário a pergunta "Sua espécie?" e fornece uma resposta padrão no campo de resposta,
"humano". Ela pode mudar a resposta. Se ela deixar a resposta padrão como está ou alterá-la para outra coisa, sua resposta
será atribuída à variável.
var spec = prompt("Sua espécie?", "humano");
O código de prompt é como o código de alerta, com duas diferenças.
Em um prompt, você precisa de uma maneira de capturar a resposta do usuário. Isso significa que você precisa
começar declarando uma variável, seguida por um sinal de igual.
Em um prompt, você pode especificar uma segunda string. Esta é a resposta padrão que aparece no campo quando
o prompt é exibido. Se o usuário deixar a resposta padrão como está e apenas clicar em OK, a resposta padrão será
atribuída à variável. Cabe a você incluir uma resposta padrão.
Como você pode esperar, você pode atribuir as strings às variáveis e, em seguida, especificar as variáveis
em vez de strings dentro dos parênteses.
1 var question = "Sua espécie?"; 2 var

defaultAnswer = "humano"; 3 var spec =
prompt(question, defaultAnswer);
A resposta do usuário é uma string de texto. Mesmo que a resposta seja um número, ela volta como um
corda. Por exemplo, considere este código.
1 var numberOfCats = prompt("Quantos gatos?"); 2 var TooManyCats

= numberOfCats + 1;
Como você está solicitando um número e o usuário provavelmente está digitando um, você pode esperar que a
matemática na segunda instrução funcione. Por exemplo, se o usuário digitar 3, a variável tooManyCats deve ter o valor 4,
você pode pensar. Mas sem essa sorte. Todas as respostas aos prompts voltam como strings. Quando a string, "3", está
vinculada com um sinal de mais ao número, 1, o JavaScript converte o 1 em uma string e concatena. Portanto, o valor de
tooManyCats acaba não sendo 4, mas "31". Você aprenderá a resolver esse problema em um capítulo subsequente.
Se o usuário não digitar nada e clicar em OK, a variável receberá uma string vazia: ""
Se o usuário clicar em Cancelar, a variável receberá um valor especial, nulo.
34
Alguns codificadores escrevem window.prompt em vez de, simplesmente, prompt. Esta é uma maneira altamente
formal, mas perfeitamente correta de escrevê-la. A maioria dos codificadores prefere a forma abreviada. Vamos nos
ater à forma curta neste treinamento.
No exemplo acima, alguns codificadores usariam aspas simples em vez de aspas duplas.
Isso é legal, desde que seja um par correspondente. Mas em um caso como este, pedirei que você use aspas duplas.
35

36
10
declarações se
Suponha que você codifique um prompt que pergunte: "Onde o Papa mora?"
Se o usuário responder corretamente, você exibe um alerta parabenizando-o.
Este é o código.
1 var x = prompt("Onde mora o Papa?"); 2 if (x === "Vaticano") { 3

alert("Correto!"); 4}
Se o usuário digitar "Vaticano" no campo de prompt, o alerta de parabéns será exibido. Se ele entrar em outra
coisa, nada acontece. (Esse código simplificado não permite outras respostas corretas, como "O Vaticano".
Há muito o que absorver aqui. Vamos decompô-lo.

Uma instrução if sempre começa com if. O espaço que o separa do parêntese é novo para você. Eu ensinei
você a codificar alertas e prompts com o parêntese de abertura em relação à palavra-chave: alert("Hi"); Agora estou
pedindo para você não fazer isso em uma instrução if . É puramente uma questão de estilo, mas as regras de estilo
comuns sancionam essa inconsistência.
Seguir a palavra-chave if mais espaço é a condição que está sendo testada - o
variável que recebeu a resposta do usuário tem o valor "Vatican"?
A condição é colocada entre parênteses.
Se a condição for verdadeira, algo acontece. Qualquer número de instruções pode ser executado. Dentro
neste caso, apenas uma instrução é executada: um alerta de congratulações é exibido.
A primeira linha de uma instrução if termina com um colchete de abertura. Uma instrução if inteira termina com
um colchete de fechamento em sua própria linha. Observe que isso é uma exceção à regra de que uma instrução
termina com um ponto e vírgula. É comum omitir o ponto e vírgula quando é uma instrução complexa que é semelhante
a um parágrafo e termina em um colchete.
Mas e aquele triplo sinal de igual? Você pode pensar que deveria ser apenas um sinal de igual, mas o sinal de
igual é reservado para atribuir um valor a uma variável. Se você estiver testando uma variável para um valor, não
poderá usar o único sinal de igual.
Se você esquecer esta regra e usar um único sinal de igual quando você deve usar o triplo igual
sign, o código não será executado corretamente.
Como você pode esperar, você pode usar uma variável em vez de uma string no código de exemplo.
1 var correctAnswer = "Vaticano"; 2 if (x ===

corretoResposta) {
3 alert("Correto!");
4}
Quando uma condição é atendida, você pode executar qualquer número de instruções.
37
resposta correta) { 3 pontuação++; 4 userIQ =
"gênio"; 5 alert("Correto!");
6}
Alguns codificadores escrevem instruções if simples sem chaves, o que é legal. Alguns colocam o
colchete de abertura em sua própria linha. Alguns colocam toda a instrução if , se for simples, em uma
única linha. Acho mais fácil não ter que tomar decisões caso a caso, então formato todas as instruções
if da mesma maneira, conforme mostrado no exemplo. Nos exercícios, pedirei que você siga estas
regras de estilo para todas as instruções if .
Na maioria dos casos, um sinal de igual duplo == é tão bom quanto um sinal de igual triplo ===. No
entanto, há uma pequena diferença técnica, que talvez você nunca precise saber. Novamente, para
manter as coisas simples, eu sempre uso o triplo sinal de igual.
38

39
11
Operadores de comparação
Vamos falar um pouco mais sobre ===. É um tipo de operador de comparação, especificamente um
operador de igualdade. Como você aprendeu no capítulo anterior, você o usa para comparar duas coisas para ver se
eles são iguais.
Você pode usar o operador de igualdade para comparar uma variável com uma string, uma variável com um
número, uma variável com uma expressão matemática ou uma variável com uma variável. E você pode usá-lo para
comparar várias combinações. Todos os itens a seguir são as primeiras linhas legais em instruções if :
""
if (fullName === "Mark" + if (fullName + "Myers") {
""
=== firstName + if (fullName === firstName + "Myers") {
""
+ if (fullName === "firstName + if (totalCost + "Myers") {
""
=== 81.50 + 135)) { + sobrenome) {
if (totalCusto === materiaisCusto + 135) {

if (totalCost === materiaisCusto + mão de obra) {
if (x + y === a - b) {
Ao comparar strings, o operador de igualdade diferencia maiúsculas de minúsculas. "Rosa" não

igual "rosa".
Outro operador de comparação, !==, é o oposto de ===. Significa não é igual a.
1 if (yourTicketNumber !== 487208) {

2 alert("Melhor sorte da próxima vez.");
3}
Curti ===, o operador não igual pode ser usado para comparar números, strings, variáveis, matemática
expressões e combinações.
Assim como ===, as comparações de strings usando o operador não igual fazem distinção entre maiúsculas e minúsculas. É verdade que
"Rosa" !== "rosa".

Aqui estão mais 4 operadores de comparação, geralmente usados para comparar números.
> é maior que
< é menor que
>= é maior ou igual a
<= é menor ou igual a
Nos exemplos abaixo, todas as condições são verdadeiras.
se (1 > 0) {
se (0 < 1) {
if (1 >= 0) {
40
if (1 >= 1) { if (0 <=
1) { if (1 <= 1) {
Assim como o sinal de igual duplo geralmente pode ser usado em vez do sinal de igual triplo, !=
geralmente pode ser usado em vez de !==. Nos exercícios, pedirei que você se atenha a !==.
41

42
12 instruções if...else e else if

As declarações if que você codificou até agora foram tudo ou nada. Se a condição testada for verdadeira, algo
aconteceu. Se a condição for falsa, nada aconteceu.
1 var x = prompt("Onde mora o Papa?"); 2 if (x === "Vaticano") {
4}
Muitas vezes, você quer que algo aconteça de qualquer maneira. Por exemplo:
1 var x = prompt("Onde mora o Papa?"); 2 if (x === "Vaticano") { 3

alert("Correto!"); 4 } 5 if (x !== "Vaticano") { 6 alert("Resposta errada"); 7}
Neste exemplo, temos duas instruções if , uma testando para "Vatican" e outra testando para not-"Vatican".
Assim, todos os casos são cobertos, com um alerta ou outro sendo exibido, dependendo do que o usuário digitou.
O código funciona, mas é mais detalhado do que o necessário. O código a seguir é mais
conciso e, como bônus, mais legível.
1 if (x === "Vaticano") {
3}
4 else { 5
alert("Resposta errada"); 6 }
Na convenção de estilo que sigo, a parte else tem exatamente a mesma formatação da parte if .
Como na parte if , qualquer número de instruções pode ser executado dentro da parte else .

correctAnswer) { 3 alert("Correct!"); 4 } 5 mais {
6 pontos--;
7 userIQ = "problemático"; 8 alert("Incorreto");
9}
else if é usado se todos os testes acima falharam e você deseja testar outra condição.
1 var correctAnswer = "Vaticano";

2 if (x === corretoResposta) {
43
4}
5 else if (x === "Roma") { 6 alert("Incorreto
mas próximo");
7}
8 else { 9
alert("Incorreto"); 10}
Em uma série de testes if , o JavaScript para de testar sempre que uma condição é testada como verdadeira.
Existem tantas maneiras de formatar declarações if e suas variações que o leque de

possibilidades é quase infinito. Sou parcial com o formato que mostrei a você, porque é
fácil de aprender e produz código legível. Vou pedir-lhe para manter este formato ao longo
dos exercícios.
44

45
13
Testando conjuntos de condições
Usando a instrução if , você aprendeu a testar uma condição. Se a condição for atendida, uma ou mais instruções
são executadas. Mas suponha que não uma, mas duas condições devam ser atendidas para que um teste seja bem-
sucedido.
Por exemplo, se um cara pesa mais de 300 libras, ele é apenas um grande cara. Mas se ele pesa mais de 300 libras
e corre 40 jardas em menos de 6 segundos? Você vai convidá-lo para tentar a NLF como atacante. Você pode testar uma
combinação de condições em JavaScript usando...
&&
Aqui está o código.
1 if (peso > 300 && tempo < 6) { 2 alert("Venha para

nosso teste!"); 3}
4 mais {
5 alert("Venha para o nosso churrasco!"); 6}
Você pode encadear qualquer número de condições juntas.
1 if (peso > 300 && tempo < 6 && idade > 17 && gênero === "masculino") { 2 alert("Venha para nosso
teste!"); 3 } 4 mais {
5 alert("Venha para o nosso churrasco!");

6}
Você também pode testar qualquer um de um conjunto de condições. Este é o operador.

||
Aqui está um exemplo.
1 if (SAT > avg || GPA > 2.5 || esporte === "futebol") { 2 alert("Bem-vindo ao estado de
Bubba!"); 3}
4 mais {
5 alert("Você já procurou conserto de eletrodomésticos?"); 6}
Se na linha 1 alguma ou todas as condições forem verdadeiras, o primeiro alerta será exibido. Se nenhum deles for
verdadeiro (linha 4), o segundo alerta será exibido.
Você pode combinar qualquer número de e e ou condições. Quando você faz isso, você cria ambiguidades. Pega
essa linha...
if (idade > 65 || idade < 21 && res === "EUA") {
Isso pode ser lido de duas maneiras.
A primeira maneira de ler: Se a pessoa tem mais de 65 anos ou menos de 21 anos e, além de
46
dessas condições, também é residente dos EUA. Sob essa interpretação, ambas as colunas precisam ser
verdadeiras na tabela a seguir para se qualificar como um passe.
A segunda maneira pode ser lida: Se a pessoa tem mais de 65 anos e mora em qualquer lugar ou tem menos
de 21 e é residente nos EUA. Sob essa interpretação, se qualquer coluna da tabela a seguir for verdadeira, é
um passe.
É o mesmo problema que você enfrenta quando combina expressões matemáticas. E você
resolva da mesma forma: com parênteses.
No código a seguir, se o sujeito tiver mais de 65 anos e for residente nos EUA, é um passe. Ou, se o sujeito
tiver menos de 21 anos e for residente nos EUA, é um passe.
if ((idade > 65 || idade < 21) && res === "EUA") {
No código a seguir, se o sujeito tiver mais de 65 anos e morar em qualquer lugar, é um passe. Ou, se o
sujeito tem menos de 21 anos e mora nos EUA, é um passe.
if (idade > 65 || (idade < 21 && res === "EUA")) {
47

48
14
if instruções aninhadas
Confira este código.
1 if ((x === y || a === b) && c === d) {

2g = h;
3}
4 mais {
5 e = f;
6}
No código acima, se uma das primeiras condições for verdadeira e, além disso, a terceira
condição for verdadeira, então g é atribuído h. Caso contrário, e é atribuído f.
Há outra maneira de codificar isso, usando aninhamento.
1 se (c === d) {
2 if (x === y) {
3 g = h;
4 }
5 senão if (a === b) {
6 g = h;
7 }
8 senão {
9 e = f;
10 }
11}
12 mais {
13 e = f;
14}
Níveis de aninhamento são comunicados ao JavaScript pelas posições das chaves. Lá

são três blocos aninhados dentro do if de nível superior . Se a condição testada pelo nível superior se—que c
tem o mesmo valor de d — é falso, nenhum dos blocos aninhados dentro é executado. A abertura encaracolada
colchete na linha 1 e o colchete de fechamento na linha 11 incluem todo o código aninhado, informando
JavaScript que tudo dentro é de segundo nível.
Para facilitar a leitura, um nível inferior é recuado 2 espaços além do nível acima dele.
No conjunto relativamente simples de testes e resultados mostrados neste exemplo, eu preferiria
use a estrutura mais concisa de várias condições. Mas quando as coisas ficam realmente complicadas,
ifs aninhados são um bom caminho a percorrer.
49

50
15
Matrizes
Vamos atribuir alguns valores de string a algumas variáveis.
var cidade0 = "Atlanta"; var cidade1

= "Baltimore"; var cidade2 = "Chicago";
var cidade3 = "Denver"; var cidade4 =
"Los Angeles"; var cidade5 = "Seattle";
Os nomes das variáveis são todos iguais, exceto que terminam em números diferentes. Eu poderia
ter chamado as variáveis de buffy, the, vampireSlayer, e assim por diante, se eu quisesse, mas eu escolhi
nomeá-las desta forma por causa de onde esta discussão está indo.
Agora, tendo feito essas atribuições, se eu codificar...
"
alert("Bem-vindo ao + cidade3);
...um alerta é exibido dizendo "Bem-vindo a Denver".

Vou mostrar outro tipo de variável, que será útil para muitas tarefas que você aprenderá em capítulos
posteriores. Estou falando de um tipo de variável chamada array. Enquanto uma variável comum tem um único
valor atribuído a ela - por exemplo, 9 ou "Paris" - uma matriz é uma variável que pode ter vários valores atribuídos
a ela. Você define um array desta forma:
var cidades = ["Atlanta", "Baltimore", "Chicago", "Denver", "Los Angeles", "Seattle"];
No exemplo do início deste capítulo, finalizei cada nome de variável com um número. city0 era "Atlanta",
city1 era "Baltimore" e assim por diante. A matriz que acabei de definir é semelhante, mas no caso de uma matriz
definida da maneira que acabei de definir, o JavaScript numera os diferentes valores ou elementos automaticamente.
(Você pode controlar a numeração definindo os elementos individualmente. Veja abaixo.) E você se refere a cada
elemento escrevendo o nome do array — cidades neste caso — seguido por um número entre colchetes. cidades[0]
é "Atlanta", cidades[1] é "Baltimore" e assim por diante.
Como o JavaScript numera automaticamente os elementos da matriz, você não tem voz na numeração. O
primeiro elemento da lista sempre tem um índice de 0, o segundo elemento um índice de 1 e assim por diante.
Este é o alerta que codifiquei acima, mas agora especificando um elemento de matriz em vez de uma
variável comum.
"
alert("Bem-vindo ao + cidades[3]);
Uma matriz pode ser atribuída a qualquer tipo de valor que você possa atribuir a variáveis comuns. Você
51
pode até misturar os diferentes tipos na mesma matriz (não que você normalmente queira).
var mixedArray = [1, "Bob", "Agora é", true];
No exemplo acima, mixedArray[0] tem um valor numérico de 1, mixedArray[1] tem um

valor da string de "Bob" e assim por diante.
Coisas a ter em mente:
O primeiro item sempre tem um índice de 0, não 1. Isso significa que se o último item da lista tiver um índice de 9,
haverá 10 itens na lista.
As mesmas regras de nomenclatura que você aprendeu para variáveis comuns se aplicam. Apenas letras, números, $
e codificadores geralmente
_ são legais. preferem
O primeiro fazer
caractere nomes
não pode de
serarray no pluralSem
um número. — cidades em vez de cidade, por exemplo — já
espaços.
que um array é uma lista de coisas.
Como uma variável comum, você declara um array apenas uma vez. Se você atribuir novos valores a um array que já
foi declarado, você descarta o var.
52

53
16
Matrizes:
Adicionando e removendo elementos
Como você aprendeu nos capítulos anteriores, você pode declarar uma variável vazia, uma que não tenha um valor. Então
você pode atribuir um valor a ele sempre que quiser. E você pode alterar seu valor à vontade. Você também pode fazer todas
essas coisas com uma matriz.
É assim que você declara um array vazio.
var animais = [];
Suponha que o array pets já tenha sido declarado. É assim que você atribui valores a
isto.
1 animal de estimação[0] = "cachorro";
2 animais de estimação[1] = "gato";
3 animais de estimação[2] = "pássaro";
No exemplo acima, defini os três primeiros elementos do array, em ordem. Mas você pode legalmente deixar lacunas em
uma matriz se desejar (não que normalmente faria). Por exemplo, suponha que você comece com a mesma matriz vazia e
codifique essas linhas.
1 animal de estimação[3] = "lagarto";

2 animais de estimação[6] = "cobra";
Agora, se você se referir a animais de estimação[3], você obterá "lagarto". Se você se referir a pets[6], você receberá
"snake". Mas se você se referir a pets[0] através de pets[2] ou pets[4] ou pets[5], você receberá
Indefinido.
Você pode atribuir valores adicionais a uma matriz que já tenha valores. Suponha que o primeiro
três elementos da matriz de animais de estimação são "cachorro", "gato" e "pássaro". Então você escreve este código.
1 animal de estimação[3] = "lagarto";

2 animais de estimação[4] = "peixe";
3 animais de estimação[5] = "gerbil";
4 animais de estimação[6] = "cobra";
Agora a matriz tem 7 elementos: "cachorro", "gato", "pássaro", "lagarto", "peixe", "gerbilo" e "cobra".
Se você atribuir um novo valor a um elemento de matriz que já tenha um, o valor antigo será substituído pelo novo.
Usando a palavra-chave pop, você pode remover o último elemento de um array.

Suponha que você tenha um array, pets, cujos elementos são "dog", "cat" e "bird". o
o código a seguir exclui o último elemento, "pássaro", deixando uma matriz de dois elementos.
54
animais de estimação.pop();
Usando a palavra-chave push, você pode adicionar um ou mais elementos ao final de um array.
Suponha que você tenha a mesma matriz consistindo em "cachorro", "gato" e "pássaro". O código a
seguir adiciona dois novos elementos ao final da matriz.
pets.push("peixe", "furão");
55

56
17
Matrizes:
Removendo, inserindo
e extraindo elementos
Use o método shift para remover um elemento do início de uma matriz.
Suponha que você tenha um array, pets, cujos elementos são "dog", "cat" e "bird". o
a seguir remove o primeiro elemento, "dog", deixando você com um array de dois elementos.
animais de estimação.shift();
Para adicionar um ou mais elementos ao início de uma matriz, use o método unshift . o
o código a seguir adiciona dois elementos ao início da matriz.
pets.unshift("peixe", "furão");
Use o método splice para inserir um ou mais elementos em qualquer lugar em uma matriz, enquanto
opcionalmente remove um ou mais elementos que vêm depois dele. Suponha que você tenha um array com
os elementos "dog", "cat", "fly", "bug", "ox". O código a seguir adiciona "porco", "pato" e "emu" após "gato"
enquanto remove "voar" e "inseto".
pets.splice(2, 2, "porco", "pato", "emu");
O primeiro dígito dentro dos parênteses é o índice da posição onde você deseja começar a adicionar
se estiver adicionando e excluindo se estiver excluindo. O segundo dígito é o número de elementos
existentes a serem removidos, começando com o primeiro elemento que vem depois do(s) elemento(s) que
você está unindo. O código acima deixa você com um array consistindo de "cão", "gato", "porco", "pato",
"ema" e "boi".
Você pode fazer adições sem remover nenhum elemento. O código a seguir adiciona "porco", "pato"
e "emu" sem remover nenhum elemento.
pets.splice(2, 0, "porco", "pato", "emu");
Você também pode remover elementos sem adicionar nenhum. Se você começar com os elementos
"dog", "cat", "fly", "bug" e "ox", o código a seguir remove dois elementos começando no índice 3 —"bug" e
"ox". Isso deixa "cachorro", "gato" e "mosca".
animais de estimação.splice(2, 2);
Use o método slice para copiar um ou mais elementos consecutivos em qualquer posição e colocá-los
em um novo array. Se você começar com um array, pets, consistindo em "dog", "cat", "fly", "bug",
57
e "ox", o código a seguir copia "fly" e "bug" para o novo array noPets e deixa o array original, pets,
inalterado.
var noPets = pets.slice(2, 4);
O primeiro dígito entre parênteses é o índice do primeiro elemento a ser copiado. O segundo dígito
é o índice do elemento após o último elemento a ser copiado.
Duas coisas podem te enganar aqui:
Como o primeiro número de índice dentro dos parênteses especifica o primeiro elemento a ser
copiado, você pode pensar que o segundo número de índice especifica o último elemento a ser copiado.
Na verdade, o segundo número especifica o número de índice do elemento após o último elemento
a ser copiado.
Você deve atribuir os elementos fatiados a uma matriz. Pode, é claro, ser a mesma matriz a partir
da qual você está fazendo o fatiamento. Nesse caso, você reduziria a matriz original apenas aos
elementos copiados.
58

59
18
para laços
Você conhece a música "99 Garrafas de Cerveja na Parede"? Se estiver ensinando a música a alguém, você pode
dar as seguintes instruções:
1. Cante "99 garrafas de cerveja na parede, 99 garrafas de cerveja."

2. Cante "Pegue uma e distribua, 98 garrafas de cerveja na parede."
3. Cante "98 garrafas de cerveja na parede, 98 garrafas de cerveja".
5. Cante "97 garrafas de cerveja na parede, 97 garrafas de cerveja".
...e assim por diante, para mais 192 linhas de instruções.

Mas não é assim que você daria as instruções, não é? Você seria mais conciso. Você diria algo assim: Cante "99
garrafas de cerveja na parede, 99 garrafas de cerveja. Pegue uma e distribua, 98 garrafas de cerveja na parede". Repita
isso, subtraindo 1 de cada vez, até que não haja mais garrafas de cerveja na parede.
Na codificação, você se depara com a situação das garrafas de cerveja com bastante frequência. Por exemplo,
suponha que você tenha se oferecido para verificar se a cidade do usuário é uma das 5 mais limpas dos EUA. O usuário
inseriu sua cidade e você atribuiu sua cidade à variável cityToCheck.
Você já atribuiu a lista das 5 cidades mais limpas ao array cleanestCities.
var cleanestCities = ["Cheyenne", "Santa Fe", "Tucson", "Great Falls", "Honolulu"];
Agora você percorre o array para ver se há uma correspondência com a cidade do usuário. Se houver, você exibe
um alerta informando ao usuário que sua cidade é uma das mais limpas. Se não houver correspondência, você exibirá um
alerta informando ao usuário que sua cidade não está na lista.
1 if (cityToCheck === cleanestCities[0]) { 2

alert("É uma das cidades mais limpas");
3}
4 else if (cityToCheck === cleanestCities[1]) { 5 alert("É uma das cidades mais limpas");
6 }
9 }
12 } 13 else if (cityToCheck === cleanestCities[4]) { 14 alert("É uma das cidades mais
limpas");
15}
60
16 mais {
17 alert("Não está na lista"); 18}
Convenientemente, o JavaScript fornece uma abordagem de codificação mais concisa. Aqui está um loop for
que realiza a maior parte do que o código detalhado no exemplo acima realiza.
1 for (var i = 0; i <= 4; i++) { 2 if (cityToCheck ===

cleanestCities[i]) { 3
4 }
5}
Deixe-me quebrar a primeira linha para você.

A primeira linha começa com a palavra-chave para.
As três especificações que definem o loop estão dentro dos parênteses.
1. Uma variável que conta iterações e também serve como o índice do array variável é declarada e definida com
um valor inicial, neste caso 0.
2. O limite do loop é definido. Neste caso, o loop deve continuar em execução enquanto o contador não exceder
4. Como o contador, neste caso, está iniciando em 0, o loop será executado 5 vezes.
3. O que acontece com o contador no final de cada loop. Neste caso, o contador é
incrementado a cada vez.
As três especificações entre parênteses estão sempre na mesma ordem:
1. Como chamar o contador (geralmente i) e em qual número iniciá-lo (normalmente 0)

2. Quantos loops executar (neste caso, o número de elementos no array)
3. Como alterar o contador após cada iteração (normalmente para adicionar 1 a cada vez)
No exemplo, o contador, i, serve a dois propósitos. Ele mantém o controle do número de iterações para que
o loop possa parar no ponto certo. E serve como o número de índice do array, permitindo que o código
progrida por todos os elementos do array à medida que o contador aumenta a cada iteração.
Não há nada sagrado em usar i como contador. Você pode usar qualquer nome de variável legal. Mas os
codificadores geralmente usam i porque mantém a primeira linha compacta e porque os codificadores
entendem que i significa "iteração".
No exemplo, a contagem inicial é 0, o número de índice do primeiro elemento da matriz. Mas pode ser
qualquer número, dependendo de suas necessidades.
No exemplo, o contador é incrementado a cada iteração. Mas, dependendo de suas necessidades,
61
você pode decrementá-lo, aumentá-lo em 2 ou alterá-lo de alguma outra forma a cada vez.
No exemplo, eu especifico que o loop deve ser executado enquanto i <= 4. Alternativamente, eu poderia
ter especificado i < 5. De qualquer forma, como o contador começa em 0, o loop é executado 5 vezes.
62

63
19
para laços:
Sinalizadores, Booleanos, comprimento
do array e interrupção do loopus
Existem vários problemas com o exemplo de loop for que lhe dei no capítulo anterior. O primeiro problema é um
potencial problema de comunicação. Se for encontrada uma correspondência entre a cidade do usuário e a lista de
cidades mais limpas, um alerta de confirmação será exibido. Mas se não houver correspondência, nada acontece. O
usuário é deixado no escuro. Se nenhuma correspondência for encontrada, precisamos exibir um alerta dizendo isso.
Mas como nós fazemos isso?
Fazemos isso com uma bandeira. Um sinalizador é apenas uma variável que começa com um valor padrão que
você atribui a ela e, em seguida, é alternada para um valor diferente sob certas condições. Em nosso exemplo, digamos
que este é o sinalizador.
var matchFound = "no";
Se uma correspondência for encontrada, o valor do sinalizador será alterado. No final, se a bandeira não foi
alterada - se ainda tiver o valor original de "não" - isso significa que nenhuma correspondência foi encontrada e, portanto,
exibimos um alerta informando que a cidade não está na lista.
1 var matchFound = "no";

2 para (var i = 0; i <= 4; i ++); 3
if (cityToCheck === cleanestCities[i]) {
4 matchFound = "sim"; alert("É uma
5 das cidades mais limpas");
6 }
7 } 8 if
(matchFound === "não") {
9 alert("Não está na lista");
10}
Isso funciona, mas em vez de atribuir as strings "no" e "yes" ao switch, é convencional usar os valores booleanos
false e true.
1 var matchFound = false;

2 para (var i = 0; i <= 4; i ++); 3
if (cityToCheck === cleanestCities[i]) { matchFound = true; alert("É uma
4 das cidades mais limpas");
5
6 }
7} 8 if
(matchFound === false) {
10}
Existem apenas dois booleanos, verdadeiro e falso. Observe que eles não estão entre aspas.
64
O próximo problema com nosso exemplo é que ele potencialmente desperdiça ciclos de computação.
Suponha que no segundo loop seja encontrada uma correspondência e o alerta seja exibido. A forma como o laço é
codificado, o loop continua em loop até o fim. Isso é desnecessário, já que temos nosso
responda no segundo ciclo. O problema é resolvido com a palavra-chave break.

2 para (var i = 0; i <= 4; i ++);
3 if (cityToCheck === cleanestCities[i]) {
4 matchFound = true;
5 alert("É uma das cidades mais limpas");
6 parar;
7 }
8 }
9 if (matchFound === false) {
11}
O último problema: no exemplo, suponho que o número de elementos na matriz é

conhecido. Mas e se não for? JavaScript tem uma maneira de descobrir. O código a seguir atribui o
número de elementos no array cleanestCities para a variável numElements.
var numElements = cleanestCities.length;
Agora podemos limitar o número de loops à contagem que o JavaScript apresenta.
1 var numElements = cleanestCities.length;

3 for (var i = 0; i <numElementos; i++);
4 if (cityToCheck === cleanestCities[i]) {
5 matchFound = true;
6 alert("É uma das cidades mais limpas");
7 parar;
8 }
9 }
10 if (matchFound === false) {
12}
Agora o loop continua enquanto i for menor que o número de elementos. (Desde o
length number é baseado em 1 e o número i é baseado em 0, precisamos parar 1 antes do comprimento.)
65

66
20
para loops aninhados
A Atlantic Records contratou você e eu para gerar uma lista de nomes para futuras estrelas do rap. Para
para facilitar as coisas, começaremos fazendo listas separadas de alguns nomes e sobrenomes.
Combinando cada um dos primeiros nomes com cada um dos sobrenomes, podemos gerar 20
nomes completos diferentes para rappers.
Começando com "BlueRay", passamos pela lista de sobrenomes, gerando...
BlueRay Zzz
BlueRay Burp
BlueRay Dogbone
BlueRay Droop
Passamos para o próximo primeiro nome, "Upchuck". Novamente, passamos pela lista de sobrenomes, gerando...
Upchuck Zzz
Upchuck Burp
Upchuck Dogbone
Upchuck Drop E assim
por diante, combinando cada nome com cada sobrenome.
Mas veja, por que não fazer o JavaScript fazer o trabalho repetitivo? Usaremos aninhado para
declarações.
1 var firstNames = ["BlueRay", "Upchuck", "Lojack", "Gizmo", "Do-Rag"]; 2 var lastNames = ["Zzz", "Burp", "Dogbone",
"Droop"]; 3 var fullNames = [];
5 for (var i = 0; i < firstNames.length; i++) { 6

for (var j = 0; j < lastNames.length; j++) {
7 fullNames.push(firstNames[i] + lastNames[j]);
67
9 }
10}
Coisas para pensar:
O loop interno executa um ciclo completo de iterações em cada iteração do loop externo. Se o contador
de loop externo for i e o contador de loop interno for j, j percorrerá 0, 1, 2 e até o fim enquanto i estiver
em 0. Então i aumentará para 1 e j percorrerá o loop todos os seus valores novamente. O loop externo
é o ponteiro dos minutos de um relógio. O laço interno é a segunda mão.
Você pode ter quantos níveis de aninhamento desejar.

Um loop aninhado é recuado 2 espaços além de seu loop externo.
68

69
21
Caso de mudança
Você pede ao usuário para inserir sua cidade. Então você verifica a cidade dela em uma lista das 5 cidades mais
limpas.
Se o usuário digitar "Cheyenne" ou qualquer uma das outras cidades mais limpas, seu código exibirá um alerta
informando que é uma das cidades mais limpas.
Mas e se ela digitar "cheyenne" em vez de "Cheyenne" — como alguns usuários inevitavelmente farão?
Quando isso acontecer, não haverá jogo. JavaScript é literal.
Um humano sabe que neste contexto "cheyenne" significa "Cheyenne". Mas JavaScript não.
Precisamos de alguma maneira de obter JavaScript para reconhecer a versão sem maiúsculas como uma correspondência.
Uma maneira seria expandir o array cleanestCities para incluir os
versões de todos os nomes de cidades:
var cleanestCities = ["Cheyenne", "cheyenne", "Santa Fe", "santa fe", "Tucson", tucson", "Great Falls", "great falls", "Honolulu", "honolulu"];
Isso funciona até certo ponto, mas é muita codificação extra. Além disso, se o usuário digitar "santa Fe",
"Santa fe", ou "sAnta Fe", voltamos ao problema original. Para cobrir todas essas possibilidades e outras, seria necessário
um quilômetro e meio de código.
A solução é codificar os elementos do array em letras minúsculas e converter a entrada do usuário,
seja o que for, para minúsculas, então sempre temos maçãs para comparar com maçãs.
1 var cityToCheck = prompt("Digite sua cidade"); 2 cityToCheck =

cityToCheck.toLowerCase(); 3 var cleanestCities = ["cheyenne", "santa fe", "tucson",
"great falls", "honolulu"]; 4 for (var i = 0; i <= 4; i++) { 5 if (cityToCheck === cleanestCities[i]) { 6

7 }
8}
A linha 2 é o que há de novo aqui:
2 cityToCheck = cityToCheck.toLowerCase();
A string convertida é atribuída a uma variável. Neste caso, é a mesma variável cuja string está sendo convertida,
cityToCheck. Observe que a palavra-chave toLowerCase deve estar em camelCase.
Observe também que o método toLowerCase converte todos os caracteres da string para menor
maiúsculas e minúsculas, não apenas as letras iniciais. Por exemplo, "ChEyEnNe" se torna "cheyenne".
Você pode seguir o outro caminho e converter tudo em maiúsculas, depois testar com "CHEYENNE", "SANTA FE,
"
etc. A maioria dos codificadores prefere oescreveria:
método de letras minúsculas. Para converter a string em maiúsculas, você
70
2 cityToCheck = cityToCheck.toUpperCase();
71

72
22
Cordas:
Medição de
comprimento e extração de peças
Você pediu ao usuário para lhe dar o nome de uma cidade. Você deseja converter o nome que ela
lhe deu em um nome com uma tampa inicial. Se ela está digitando "boston", "BOSTON" ou "bosTon", você
deseja normalizar a entrada para "Boston". Os métodos toLowerCase e toUpperCase que você aprendeu
no capítulo anterior não farão o trabalho sozinhos, porque eles fazem a mesma alteração em todos os
caracteres da string. Mas se você quebrar a string em dois segmentos, você pode usar esses métodos
para obter a string na forma desejada. (Por enquanto, vou ignorar a possibilidade de que o nome da cidade
seja composto de duas ou mais palavras, como New Orleans ou Sault Ste. Marie.)
Para copiar uma seção de uma string, você usa o método slice . Suponha que o usuário tenha
inserido uma string e a string tenha sido atribuída à variável cityToCheck. O código a seguir copia o
primeiro caractere da string e o atribui à variável firstChar. O valor original de cityToCheck não muda. Se
cityToCheck for "Boston", firstChar será "B".
var firstChar = cityToCheck.slice (0, 1);
Coisas para estar ciente:
Uma string é indexada como um array. Só que, em vez de cada número de índice se referir a um
elemento, ele se refere a um caractere.
Assim como a indexação de array, a indexação de string começa com 0.
No método slice , o primeiro número entre parênteses é o índice do primeiro caractere da fatia. O
segundo número não é, no entanto, o último caractere na fatia.
É o primeiro caractere após a fatia. Se você subtrair o primeiro índice do segundo índice, sempre
obterá o comprimento da fatia.
Aqui está outro exemplo.
var someChars = cityToCheck.slice (2, 5);
Novamente vamos dizer que a string é "Boston". A fatia começa com o caractere index-2 (o terceiro),
"s". Ele termina com o caractere antes do caractere index-5, "n". someChars é "sto".
Se você omitir o segundo número entre parênteses, o JavaScript inclui todos os
caracteres até o final da string.
73
var someChars = cityToCheck.slice (2);
A fatia começa com o caractere index-2 (o terceiro), "s". Como nenhum corte no final é
especificado, a fatia termina com o último caractere da string. someChas é "pedra".
Agora temos uma maneira de capitalizar o primeiro caractere de uma string e garantir que o
letras restantes são minúsculas.
1 var firstChar = cityToCheck.slice(0, 1); 2 var otherChars =

cityToCheck.slice(1); 3 firstChar = firstChar.toUpperCase(); 4
otherChars = otherChars.toLowerCase();
5 var cappedCity = firstChar + otherChars;
Veja o que acontece no código acima, linha por linha:
1. Copia o primeiro caractere da string e o atribui à variável firstChar.

2. Copia todos os caracteres do segundo até o final e os atribui à variável
otherChas.
3. Coloca em maiúscula o primeiro caractere.
4. Coloque os outros caracteres em minúsculas.
5. Concatena ambas as partes para reformar a string inteira.
Às vezes é útil saber quantos caracteres estão em uma string. Por exemplo, suponha que você
queira fatiar os três primeiros caracteres de qualquer string que exceda três caracteres de comprimento,
por exemplo, fatiar "Nov" de "November". Para encontrar o número de caracteres em uma string, você
usa a mesma linguagem que já aprendeu para encontrar o número de elementos em um array.
1 var mês = prompt("Digite um mês"); 2 var charsInMonth =

mês.comprimento; 3 if (charsInMonth > 3) { 4 mêsAbbrev =
mês.fatia(0, 3); 5}
A linha 2 conta os caracteres na string e atribui o número à variável

charsInMonth.
Ser capaz de medir o número de caracteres em uma string pode ser útil. Por exemplo, suponha
que você queira percorrer uma string, verificando se ela contém espaços duplos. Você pode usar a
contagem de caracteres como o limitador de loop. Aqui está um código que verifica espaços duplos em
uma string e exibe um alerta se eles forem encontrados.
1 var str = prompt("Digite algum texto"); 2 var numChars =

str.length; 3 for (var i = 0; i < numChars; i++) { 4 if (str.slice(i, i
+ 2) === 5
" ") {
alert("Sem espaços duplos!"); parar;
6
74
7 }
8}
A linha 2 conta o número de caracteres na string e atribui o número à variável numChars. Na linha
3, esse número é usado como limitador de loop. O loop continua a ser executado apenas enquanto o
contador, i, for menor que o número de caracteres na string. (Lembre-se, o comprimento é baseado em
1 e o contador é baseado em 0, então o loop tem que parar 1 antes do número do comprimento.)
A linha 4 se move pela string caractere por caractere, examinando cada segmento de 2 caracteres,
procurando por espaços duplos.
75

76
23
Cordas:
Encontrando segmentos
A revista New Yorker não permite a frase "Segunda Guerra Mundial. "Dizem que deveria
ser "a Segunda Guerra Mundial".
É surpreendente pensar que, mesmo nas profundezas mais sombrias da Segunda Guerra Mundial, JRR
Tolkien estava escrevendo a trilogia, que contém, com a estranha aplicabilidade disponível apenas para
poesia e mito, a noção essencial de que o bom bruxo cinza pode entender o mal. magos precisamente
porque ele é como eles o suficiente para entender suas mentes e motivos de uma maneira que eles não
podem entender os dele.
Você já conhece uma maneira de encontrar o segmento proibido e substituí-lo. Suponha
que o parágrafo acima tenha sido atribuído à variável text.
1 for (var i = 0; i < text.length; i++) { 2 if (text.slice(i, i + 12) ===

"Segunda Guerra Mundial") { 3
text = text.slice(0, i) + "Segunda Guerra Mundial" + text.slice(i + 12);
4 }
5}
O código percorre a string procurando por "Segunda Guerra Mundial". A linha 2 avança pela string
caractere por caractere, examinando cada sequência de 12 caracteres. Se encontrar "Segunda Guerra
Mundial", a linha 3 concatena três segmentos: todos os caracteres anteriores a "Segunda Guerra
Mundial", a frase substituta "Segunda Guerra Mundial" e todos os caracteres após "Segunda Guerra
Mundial".
Mas o JavaScript tem uma maneira mais eficiente de fazer isso, usando o método indexOf .
var firstChar = text.indexOf ("Segunda Guerra Mundial");
Se o segmento existir, o método encontra o índice do primeiro caractere do segmento e o

atribui à variável firstChar. Se o segmento não existir, o método atribuirá -1 à variável, para que
você saiba que não existe.
Agora podemos substituir a frase proibida pela frase preferida com menos codificação.
1 var firstChar = text.indexOf("Segunda Guerra Mundial"); 2 if (firstChar !==

-1) { 3 text = text.slice(0, firstChar) + "a Segunda Guerra Mundial" +
text.slice(firstChar + 12); 4 {
A linha 1 verifica a frase, atribuindo o índice do primeiro caractere da frase à variável

firstChar — se a frase for encontrada. Se não for encontrado, -1 é atribuído à variável. Se
77
a variável não tem o valor -1 (linha 2)—se a frase foi encontrada—a concatenação na linha 3 substitui a frase
incorreta pela frase correta.
O método indexOf encontra apenas a primeira instância do segmento que você está procurando. No
exemplo acima, você pode superar essa limitação fazendo um loop. Você mudaria a primeira instância de
"Segunda Guerra Mundial" para "Segunda Guerra Mundial", então, na próxima iteração de loop, encontraria a
próxima instância sobrevivente e mudaria isso, e assim por diante.
Para encontrar a última instância de um segmento em uma string, use lastIndexOf. O código a seguir
encontra o índice do primeiro caractere da última instância do segmento, o segundo "ser". A variável segIndex
termina com um valor de 16, o índice de "b" no segundo "be".
1 var text = "Ser ou não ser.";

2 var segIndex = text.lastIndexOf ("ser");
78

79
24
Cordas:
Encontrando um personagem em um local
O usuário digitou seu primeiro nome. A string foi atribuída à variável

primeiro nome. Você deseja extrair o primeiro caractere. Você já conhece uma maneira de fazer isso.
var firstChar = firstName.slice (0, 1);
Aqui está uma maneira alternativa de fazer isso que é mais direta.
var firstChar = firstName.charAt(0)
O código acima encontra um único caractere no índice-0 (o início) da string

representada pela variável firstName e a atribui à variável firstChar.
O código a seguir localiza o último caractere na string.
var lastChar = name.charAt (name.length - 1);
O código a seguir percorre uma string procurando por um ponto de exclamação. Se o caractere for
encontrado, um alerta será exibido.
1 for (var i = 0; i < text.length; i++) { 2 if (text.charAt(i) === "!") {
3 alert("Ponto de exclamação encontrado!"); parar;

4
5 }
6}
Nota: O método indexOf só pode identificar o caractere em um local específico. Não pode
alterar o caractere em um local.
80

81
25
Cordas:
Substituindo caracteres
Nos capítulos anteriores, você aprendeu duas maneiras diferentes de substituir "Segunda Guerra Mundial" por "a
Segunda Guerra Mundial" em uma seqüência. Primeiro, houve a abordagem de loop-and-slice.
1 for (var i = 0; i < text.length; i++) { 2 if (text.slice(i, i + 12) ===

"Segunda Guerra Mundial") {
3 text = text.slice(0, 1) + "Segunda Guerra Mundial" + text.slice(i + 12);
4 }
5}
Você melhorou essa abordagem bastante grosseira quando aprendeu o método indexOf .
1 var firstChar = text.indexOf("Segunda Guerra Mundial"); 2 if (firstChar !==

-1) { 3 text = text.slice(0, firstChar) + "a Segunda Guerra Mundial" +
text.slice(firstChar + 12); 4}
Mas JavaScript fornece uma maneira mais direta ainda, o método replace .
var newText = text.replace("Segunda Guerra Mundial", "Segunda Guerra Mundial");
A primeira string dentro dos parênteses é o segmento a ser substituído. A segunda string é o segmento a ser
inserido. No código acima, o segmento "Segunda Guerra Mundial" é substituído pelo segmento "Segunda Guerra
Mundial" na string representada pela variável text, e a string revisada é atribuída à nova variável newText.
Se você atribuir a string revisada a uma nova variável, como no exemplo acima, a string original será preservada.
Se você quiser que a string original seja substituída pela string revisada, atribua a string revisada à variável original.
text = text.replace("Segunda Guerra Mundial", "Segunda Guerra Mundial");
Nos exemplos acima, apenas a primeira instância de uma string é substituída. Se você quiser
substituir todas as instâncias, você deve informar ao JavaScript que deseja uma substituição global .
var newText = text.replace(/Segunda Guerra Mundial/g, "a Segunda Guerra Mundial");
Em uma substituição global, você coloca o segmento a ser substituído por barras em vez de aspas e segue a
barra de fechamento com "g" para "global". O segmento a ser inserido é colocado entre aspas, como em uma substituição
única.
82

83
26
Números de arredondamento
Você administra um serviço de música online onde os clientes avaliam cada música. Você agrega
todas as avaliações dos clientes e faz a média delas, premiando uma música de zero a cinco estrelas.
Normalmente, a média produz uma fração. Você precisa arredondar para o inteiro mais próximo para poder
traduzir o número em estrelas. Suponha que a média tenha sido atribuída à variável scoreAvg. Aqui está o
código que o arredonda para o inteiro mais próximo.
var numberOfStars = Math.round(scoreAvg);
84
Matemática. é como todas as funções matemáticas começam. O "M" deve ser capeado.
A função arredonda para cima quando o decimal é 0,5. Arredonda 1,5 para 2, 2,5 para 3, etc. Arredonda - 1,5 para -1,
-2,5 para -2, etc.
Quando o resultado é atribuído a uma nova variável, como no exemplo acima, o número não arredondado entre parênteses
é preservado. Mas você pode atribuir o número arredondado à variável original e o número não arredondado será substituído
pelo número arredondado.
scoreAvg = Math.round(scoreAvg);
Em vez de uma variável, você pode colocar um número literal entre parênteses.
85
var scoreAvg = Math.round (0,0678437);
Para forçar o JavaScript a arredondar para o inteiro mais próximo, não importa quão pequena seja a
fração, use ceil em vez de round. O código a seguir arredonda 0,000001, que normalmente seria arredondado
para 0, até o número inteiro mais próximo, 1.
var scoreAvg = Math.ceil (0,000001);
ceil significa "teto". Arredonda 0,000001 para 1, -0,000001 para 0, 1,00001 para 2 e assim por diante.
Para forçar o JavaScript a arredondar para o inteiro mais próximo, não importa quão grande seja a
fração, use floor em vez de round. O código a seguir arredonda 0,999999, que normalmente arredondaria
para 1, para 0.
var scoreAvg = Math.floor (0,999999);
o piso arredonda 0,999999 para 0, 1,9 para 1, -0,000001 para -1 e assim por diante.
86

87
27
Gerando números aleatórios
Suponha que você queira simular o lançamento de um dado. Na simulação, você quer que apareça
aleatoriamente 1, 2, 3, 4, 5 ou 6. O primeiro passo é pedir ao JavaScript para gerar um número aleatório.
(Bem, é quase aleatório, tecnicamente conhecido como pseudo-aleatório, mas é próximo o suficiente de
aleatório para a maioria dos propósitos.)
O código a seguir gera um número pseudo-aleatório, com 16 casas decimais, variando de
0,0000000000000000 a 0,9999999999999999 e o atribui à variável
número aleatório.
var randomNumber = Math.random ();
A função sempre fornece um decimal de 16 casas que varia de 0,0000000000000000 a

0,9999999999999999. Podemos converter o decimal em um inteiro multiplicando por cem quatrilhões (1
seguido por 17 zeros):
0.0000000000000000 * 100000000000000000 = 0
0.7474887706339359 * 100000000000000000 = 7474887706339359
0.9999999999999999 * 100000000000000000 = 9999999999999999 Trillions
of possible numbers are more than we need in our virtual die throw. We just want six possible
numbers, 1 through 6. So instead of multiplying by a hundred quadrillion, our first step is to multiply the giant
decimal by 6. 0.0000000000000000 * 6 = 0 0.7474887706339359 * 6 = 4.7474887706339359
0.9999999999999999 * 6 = 5.9999999999999994 Intuition may tell que você pode terminar
o trabalho por arredondamento, mas isso não funciona matematicamente. Como nada
arredonda para 0 e nada arredonda para 6, os números no meio, que são alcançados por
arredondamento para cima e arredondamento para baixo, aparecerão quase duas vezes mais. Mas
podemos dar a todos os números uma chance igual se adicionarmos 1 ao resultado e arredondarmos para
baixo. Aqui está o código para nosso lançamento de dado virtual.
1 var bigDecimal = Math.random(); 2 var

melhoradoNum = (bigDecimal * 6) + 1; 3 var numberOfStars =
Math.floor (improvedNum);
Isto é o que acontece no código acima, linha por linha:
1. Gera um decimal de 16 casas e o atribui à variável bigDecimal.

2. Converte o decimal de 16 casas em um número que varia de 0,0000000000000000 a
5,9999999999999999 e, em seguida, adiciona 1, de modo que o intervalo termina 1,0000000000000000
a 6,9999999999999999. Este número é atribuído à variável ImprovedNum.
88
3. Arredonda o valor representado por betterNum para baixo para o inteiro mais próximo que varia
de 1 a 6.
89

90
28
Convertendo strings em inteiros e decimais
Às vezes, o JavaScript parece ler sua mente. Por exemplo, suponha que você escreve...
var currentAge = prompt("Digite sua idade.");
...JavaScript atribui a resposta do usuário a currentAge como uma string. A entrada dela, digamos 32, pode
parecer um número para você, mas para JavaScript é uma string: "32".
No entanto, suponha que você escreva ...
1 var currentAge = prompt("Digite sua idade."); 2 var

anosElegibleToVote = currentAge - 18;
No código acima, o valor atribuído à variável currentAge é uma string, pois vem de uma resposta de prompt do
usuário. Mas na linha 2, quando a variável aparece em uma expressão aritmética, o valor é automaticamente (e
temporariamente) convertido em um número para fazer a matemática funcionar.
Da mesma forma, se você pedir ao JavaScript para dividir "100" por 2 ou multiplicar "2,5" por 2,5, o JavaScript
parece entender que você deseja que a string seja tratada como um número e faz as contas. Você pode até pedir ao
JavaScript para multiplicar, dividir ou subtrair usando nada além de strings como termos, e o JavaScript, interpretando
suas intenções corretamente, faz as contas.
var lucro = "200" - "150";
Na declaração acima, as duas strings são tratadas como números porque aparecem em uma expressão
matemática. A variável lucro, apesar das aspas, recebe o número 50.
Provavelmente não é preciso dizer que a string que você pede ao JavaScript para fazer matemática tem que ser
um número entre aspas, como "50", não caracteres de letras. Se você escrever...
var lucro = "200" - "pato";
...um alerta será exibido dizendo "NaN" significando "não é um número." Sem mistério aqui. Como pode
200 menos "pato" é um número?
Você deve se lembrar de um capítulo anterior que quando você mistura strings e números em uma expressão
envolvendo um sinal de adição, o JavaScript faz o oposto do que você vê nos exemplos acima. Em vez de converter
strings em números, o JavaScript converte números em strings.
Em vez de adicionar, ele concatena.
var resultado = "200" + 150;
Na declaração acima, JavaScript, vendo a string "200" e o número 150, resolve
91
o conflito convertendo 150 em uma string: "150". Em seguida, ele concatena as duas strings. A variável
resultado é atribuída a "200150". Se o + na expressão fosse um dos outros operadores aritméticos (-, * ou /), o
JavaScript converteria a string "200" para o número 200 e faria as contas.
Você pode ver que haverá um problema com o código a seguir.
1 var currentAge = prompt("Digite sua idade."); 2 var qualificando

Idade = currentAge + 1;
O código acima tem uma consequência não intencional. A string representada por currentAge é
concatenada com 1 que foi convertido em "1". Exemplo: se o usuário digitar "52", qualingAge será atribuído
não a 53, mas a "521".
Se você quiser fazer adição, você deve converter qualquer string em números.
1 var currentAge = prompt("Digite sua idade."); 2 varqualingAge =

parseInt(currentAge) + 1;
A linha 2 converte a string representada por currentAge em um número antes de adicionar 1 a ela
e atribuindo a soma para qualificaçãoAge.
parseInt converte todas as strings, incluindo strings compostas por números de ponto flutuante, em
inteiros. E chocante, mas verdadeiro: não é redondo. Ele simplesmente elimina os decimais. Na instrução a
seguir, myInteger é atribuído não 2 como você poderia esperar, mas 1.
var meuInteger = parseInt ("1,9999");
Para preservar quaisquer valores decimais, use parseFloat. Na seguinte declaração

myFractional é atribuído 1,9999.
var myFractional = parseFloat ("1,9999");
Para minimizar a confusão, os codificadores às vezes preferem fazer conversões manuais explícitas
mesmo quando o JavaScript não as exige, como ao misturar uma string e um número em uma operação de
multiplicação.
92

93
29
Convertendo strings em números, números
em strings
No último capítulo você aprendeu a usar parseInt para converter uma string representando um
número em um inteiro. E você aprendeu a usar parseFloat para converter uma string representando um
número em um número de ponto flutuante. Você pode refinar a distinção entre números inteiros e
números de ponto flutuante usando Number. Esta útil ferramenta de conversão converte uma string que
representa um número inteiro ou um número de ponto flutuante em um número idêntico ao que está
dentro dos parênteses.
O código a seguir converte a string "24" para o número 24.
1 var integerString = "24" 2 var num =

Number (integerString);
O código a seguir converte a string "24.9876" para o número 24.9876.
1 var floatNumString = "24.9876"; 2 var num = Número

(floatingNumString);
Suponha que seu código tenha feito um cálculo aritmético que gerou um número grande. Agora
você deseja apresentar o resultado do cálculo ao seu usuário. Mas antes de exibir o número, você deseja
formatá-lo com vírgulas para que fique legível. Para fazer isso, você terá que converter o número em uma
string. É assim que se faz.
Converter um número em uma string, talvez para formatá-lo, é simples.
1 var numberAsNumber = 1234;

2 var numberAsString = numberAsNumber.toString();
O código acima converte o número 1234 na string "1234" e o atribui à variável numberAsString.
94

95
30
Controlando o comprimento dos decimais
O preço do item é $ 9,95. O imposto sobre vendas é de 6,5% do preço. Você combina os dois números
para obter o total.
var total = preço + (preço * taxRate);
A variável total agora tem um valor de 10,59675.

Mas não é isso que você vai cobrar do cliente, não é? Você vai cobrar dela um valor arredondado para
duas casas decimais: $ 10,60.
Aqui está como fazê-lo.
var bonitoTotal = total.toFixed(2);
A instrução acima arredonda o número representado por total para 2 casas e atribui o resultado à variável
prettyTotal. O número dentro dos parênteses informa ao JavaScript para quantas casas arredondar o decimal.
Agora adicione um cifrão e está tudo pronto.
var moedaTotal = "$" + prettyTotal;
Para encurtar um número para nenhum decimal, deixe os parênteses vazios.
var bonitoTotal = total.toFixed();
Infelizmente, o método toFixed vem com uma surpresa dentro. Se um decimal termina em 5, geralmente é
arredondado para cima, como seria de esperar. Mas, dependendo do navegador, às vezes arredonda para baixo!
Se, por exemplo, você aplicar o método a 1,555, especificando 2 casas decimais, ele poderá fornecer "1,56". Ou
pode produzir "1,55".
Existem maneiras sofisticadas de resolver o problema. Aqui está uma correção deselegante que usa
métodos que você já conhece e entende.
1 var str = num.toString(); 2 if

(str.charAt(str.length - 1) === "5") { 3 str = str.slice(0, str.length -
1) + "6"; 4 }
5 num = Número(str); 6
bonitoNum = num.toFixed(2);
Se o decimal terminar em 5, o código o altera para 6, de modo que o método é forçado a arredondar
quando deveria. Aqui está o que está acontecendo, linha por linha:
96
1. Converte o número em uma string e o atribui à variável str.

2. Verifica se o último caractere é "5".
3. Em caso afirmativo, corta o "5" e acrescenta
"6". 4. -- 5. Converte de volta para um número.
6. Arredonda para 2 casas.
97

98
31
Obtendo a data e hora atuais
Sua página da web inclui um aviso informando ao usuário a data e hora locais atuais em seu
determinado fuso horário. Mas qual é a data e hora atuais? Veja como o JavaScript descobre.
var rightNow = new Date();
A instrução acima cria algo chamado objeto Date. Isto é o que parece.
Observe que o JavaScript obtém essas informações do computador do usuário. É tão preciso quanto
as configurações de data e hora do computador. Por exemplo, se o usuário acabou de se mudar dos EUA
Costa Oeste para a Costa Leste dos EUA e não redefiniu o fuso horário em seu computador, o computador
99
ainda estará no horário do Pacífico. O objeto Date também estará no horário do Pacífico.
O objeto Date pode parecer uma string, mas não é. Por exemplo, você não pode usar
métodos nele como charAt, indexOf ou slice.
Se você precisar que o objeto Date seja uma string, poderá convertê-lo em um da mesma forma que
converte um número em uma string.
var dataString = rightNow.toString();
O código acima converte o objeto Date representado pela variável rightNow em uma string e atribui a
string à variável dateString.
Na maioria das vezes, você desejará apenas extrair algumas das informações do objeto Date
sem convertê-lo em uma string.
Vou mostrar como extrair as partes individuais do objeto Date. Nisso
capítulo Vou começar com a primeira peça. No próximo capítulo eu vou cobrir o resto.
O código a seguir cria um novo objeto Date, o atribui à variável rightNow,
extrai o dia da semana e atribui o dia da semana à variável theDay.
1 var rightNow = new Date(); 2 var theDay

= rightNow.getDay();
No diagrama do objeto Date que mostrei acima, o dia da semana foi representado como "Mon". Mas
quando você extrai o dia da semana do objeto, ele é representado como um número. Os dias são designados
por um número de 0 para domingo a 6 para sábado. Isso significa que você precisará de um pouco de código
para convertê-lo novamente em um nome de dia como "Seg".
1 var dayNames = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"]; 2 var agora = new Date(); 3 var
oDia = agora.getDia(); 4 var nameOfToday = dayNames[theDay];
Aqui está o que está acontecendo:
1. Cria um array de dias começando com "Sun" e o atribui a dayNames.

2. Cria um novo objeto Date e o atribui a agora.
3. Extrai o dia da semana como um número e o atribui ao Dia.
4. Usa o número do dia como índice para especificar o elemento correto do array, ou seja, o nome do dia.
100

101
32
Extraindo partes da data e hora
Aqui está um resumo de métodos importantes para extrair partes do objeto Date.
Cobri o getDay no último capítulo. Vejamos o resto dos métodos de extração. Assim como
getDay, getMonth fornece não o nome escrito do mês mostrado no objeto Date, mas um número.
O código a seguir produz um número de mês que varia de 0 para janeiro a 11 para dezembro.
1 var d = new Data(); 2 var

currentMonth = d.getMonth();
getDate fornece um número para o dia do mês.
var diaDoMês = d.getData();
getFullYear fornece um número de 4 dígitos para o ano.
var currYr = d.getFullYear();
102
getHours fornece um número de 0 a 23 correspondente à meia-noite a 11

PM
var currentHrs = d.getHours();
getMinutes fornece um número de 0 a 59.

var Minutos = d.getMinutes();
getSeconds fornece um número de 0 a 59.

var currSecs = d.getSeconds()
getMilliseconds fornece um número de 0 a 999.
103
var currMills = d.getMilliseconds();
getTime fornece o número de milissegundos decorridos desde a meia-noite de 1º de janeiro de

1970.
var millsSince = d.getTime();
104

105
33
Especificando uma data e hora
Quantos dias antes do programa da Previdência Social dos EUA quebrar?

Vamos começar com a data estimada. De acordo com os curadores do sistema, o dinheiro correrá
em 2035. Eles não definiram uma data exata. Vamos escolher o meio do ano – 30 de junho.
Ok, essa é a parte difícil – identificar o dia do juízo final. Uma vez que temos isso, construindo um dia
contagem regressiva por dia é uma brincadeira de JavaScript.
Você já sabe como fazer o primeiro passo, criando um objeto Date para a data e hora atuais:
1 var hoje = new Date();
Em seguida, você cria um segundo objeto Date. Mas desta vez você especifica a data futura, 30 de junho de
2035.
2 var dia do juízo final = new Date("30 de junho de 2035");
Observe como a data é especificada. Está entre aspas. O mês está escrito. Há um
vírgula após o dia do mês. O ano é expresso em quatro dígitos.
Em seguida, você extrai de ambas as datas os milissegundos decorridos desde a data de referência de 1º de
janeiro de 1970.
3 var msToday = hoje.getTime(); 4 var msDoomsday

= doomsday.getTime();
Você calcula a diferença.
5 var msDiff = msDoomsday - msToday;
Alguma matemática simples converte os milissegundos em dias.
6 var dDiff = msDiff / (1000 * 60 * 60 * 24);
O grande número criado pela matemática dentro dos parênteses converte os milissegundos
em segundos (1000), minutos (60), horas (60) e dias (24).
Você quer um número que represente dias inteiros, então você arredonda para baixo. A instrução a seguir
arredonda o número de dias, que provavelmente é um número de ponto flutuante, para um número inteiro.
7 dDiff = Math.floor (dDiff);
Aqui está a coisa toda, condensada em algo que se parece mais com código de produção
106
1 var msDiff = new Date("30 de junho de 2035").getTime() - new Date().getTime(); 2 var daysTillDoom =
Mathfloor(msDiff / (1000 * 60 * 60 * 24));
A linha 1 subtrai os milissegundos desde a data de referência do momento atual dos milissegundos desde a data
de referência de 30 de junho de 2035. A linha 2 converte os milissegundos em dias e arredonda para baixo.
Se o tempo for importante, você também pode especificar isso.
var d = new Date("21 de julho de 1983 13:25:00");
Observe o formulário usado para especificar a hora: Nenhuma vírgula após a data. horário de 24 horas. Dois pontos
separando horas, minutos e segundos.
107

108
34
Alterando elementos de uma data e hora
Você pode alterar elementos individuais de um objeto Date. Aqui está um resumo:
setFullYear define o ano de um objeto Date existente sem alterar nenhum outro elemento.
1 var d = new Data(); 2

d.setFullYear(2001);
A linha 1 cria um novo objeto Date para o momento atual. A linha 2 altera o ano do objeto Date para
2001, deixando todos os outros elementos do objeto Date intactos. setMonth define o mês de um objeto
Date existente sem alterar nenhum outro elemento.
1 var d = nova data ();

2 d.setMonth(11);
A linha 1 cria um novo objeto Date para o momento atual. A linha 2 muda o mês do
objeto Date para 11 (dezembro), deixando todos os outros elementos do objeto Date intactos.
setDate define o dia do mês de um objeto Date existente sem alterar nenhum outro elemento.
109

2 d.setDate(15);
A linha 1 cria um novo objeto Date para o momento atual. A linha 2 altera a data do
Objeto Date até o dia 15 do mês, deixando todos os outros elementos do objeto Date intactos.
setHours define as horas de um objeto Date existente sem alterar nenhum outro elemento.

d.setHoras(13);
A linha 1 cria um novo objeto Date para o momento atual. A linha 2 muda o horário do
Date objeto até a 13ª hora (1 pm), deixando todos os outros elementos do objeto Date intactos.
setMinutes define os minutos de um objeto Date existente sem alterar nenhum outro elemento.

d.setMinutes(05);
A linha 1 cria um novo objeto Date para o momento atual. A linha 2 altera os minutos de
o objeto Date para 5 minutos após a hora, deixando todos os outros elementos do objeto Date intactos.
setSeconds define os segundos de um objeto Date existente sem alterar nenhum outro elemento.

d.setSeconds(55);
A linha 1 cria um novo objeto Date para o momento atual. A linha 2 altera os segundos do objeto
Date para os 55 segundos após o minuto, deixando todos os outros elementos do objeto Date intactos.
setMilliseconds define os milissegundos de um objeto Date existente sem alterar nenhum
outro elemento.

2 d.setMilisegundos(867);
A linha 1 cria um novo objeto Date para o momento atual. A linha 2 altera os milissegundos do
objeto Date para 867 milissegundos após o segundo, deixando todos os outros elementos do objeto Date
intactos.
110

111
35
Funções
Uma função é um bloco de JavaScript que roboticamente faz a mesma coisa repetidamente, sempre que
você invoca seu nome. Ele economiza codificação repetitiva e torna seu código mais fácil de entender.
Em seu site, suponha que haja várias páginas nas quais você deseja exibir um alerta informando ao usuário
a hora atual. (Para simplificar, vamos nos contentar com 24 horas em vez de converter para am e pm) O código
pode ficar assim.
1 var agora = new Date(); 2 var

theHr = now.getHours(); 3 var theMin =
now.getMinutes(); 4 alert("hora: "
+ theHr + ":" + theMin);
Você pode escrever esse bloco de código repetidamente, sempre que precisar. Ou você pode escrevê-lo
uma vez como uma função, nomeando-o, digamos, tellTime. Depois disso, este é o único código que você
precisará para executar o bloco inteiro:
digaHora();
Sempre que o JavaScript vê essa instrução curta, o bloco de contagem de tempo é executado.
É assim que você empacota o código único acima como uma função repetível:
1 function tellTime() { 2 var agora =

new Date(); 3 var theHr = now.getHours();
4 var theMin = now.getMinutes(); 5 alert("Hora
atual: "+ theHr + ":" + theMin); 6 }
O código que informa o tempo — o código que cria o objeto Date, extrai a hora, formata-o e exibe um alerta
— é exatamente o mesmo código com o qual começamos, mas agora está empacotado como uma função. Aqui
estão as peças:
1. Na linha 1, uma declaração de abertura que inclui: • a palavra-chave

function • um nome que inventei para a função • parênteses que
a identificam como uma função • uma chave de abertura para
incluir o código que será executado
2. Nas linhas 2 a 5, o mesmo bloco de código que você viu antes é executado, mas está recuado para maior
clareza. As opiniões variam sobre quanto recuar. Eu treino você para recuar 2 espaços.
3. Na linha 6, um colchete de fechamento em sua própria linha para incluir o código que será executado
112
Novamente, observe que o código de chamada - o código que invoca a função - não faz mais nada
do que indicar o nome da função, incluindo seus parênteses.
digaHora();
Você pode dar a uma função qualquer nome que seja um nome de variável legal e, em seguida,
adicionar parênteses. A nomeação de funções segue as mesmas regras da nomeação de variáveis porque,
tecnicamente, uma função é uma variável. Isso fará mais sentido para você quando você aprender mais
sobre funções em um capítulo subsequente.
As funções e as instruções que as chamam podem ser separadas por milhares de linhas de código.
Normalmente, as funções estão no mesmo lugar que o código principal — em um arquivo JavaScript
externo, no final da seção do corpo do HTML ou na seção de cabeçalho do HTML. Normalmente, todas as
funções devem preceder o código principal, então quando são chamadas pelo código principal, elas já estão
carregadas na memória e prontas para serem usadas.
113

114
36
Funções:
Passando-lhes dados
Uma função é um bloco de código que faz algo roboticamente, sempre que você invoca seu nome. Por exemplo,
quando você escreve greetUser(); uma função com esse nome é executada. Para ser claro: o tipo de função de que
estou falando é uma que você mesmo escreveu e nomeou.
Suponha que quando você escreve greetUser(); é chamada uma função que exibe um alerta dizendo "Olá, tudo
bem".
Este é o código da função.
1 function greetUser() { 2 alert("Olá,

tudo bem."); 3}
Uma das coisas realmente úteis sobre funções é que esses parênteses no código de chamada não precisam
estar vazios. Se você colocar alguns dados entre parênteses, você pode passar esses dados para a função que ela
usará quando for executada.
Suponha que, em vez de escrever greetUser(); você escreve...
greetUser("Olá, tudo bem.");
Agora, em vez de apenas chamar a função, você a está chamando e passando dados para ela. o
string dentro dos parênteses, ou seja, os dados que você está passando, é chamado de argumento.
A função agora é mais versátil, porque a mensagem exibida não está mais conectada a ela. Ele exibirá qualquer
mensagem que você passar para ele do código de chamada, por meio do argumento.
Para que uma função se torne um robô programável em vez de um robô de uma tarefa, você precisa configurá-la
para receber os dados que está passando. Aqui está como você faz isso.
1 função greetUser(saudação) { 2 alert(saudação);

3}
Então agora nós preenchemos os parênteses do código de chamada e da definição da função.

Os parênteses do código de chamada contêm um argumento. No exemplo, o argumento é a string "Hello, there." E,
como você pode ver no exemplo acima, os parênteses da definição da função agora contêm uma variável, saudação.
Uma variável dentro dos parênteses em uma instrução de função é conhecida como parâmetro. O nome do
parâmetro fica a seu critério. Você pode dar a ela qualquer nome que seja legal para uma variável. Então você pode
usá-lo para realizar algo no corpo da função. Na linha 2 no exemplo
115
acima, usei-o para especificar a mensagem em um alerta.

Você não precisa declarar uma variável quando ela é usada como parâmetro em uma definição de função.
Quando usado como parâmetro, a declaração é implícita.
O argumento na instrução que chama a função —"Hello, there."—são os dados que são passados para a função.
O parâmetro dentro dos parênteses na definição da função captura os dados que são passados. Ele agora contém "Olá,
lá." Em outras palavras, a string "Hello, there", especificada na chamada da função, é atribuída à saudação na função.
Em seguida, essa variável, saudação, é usada para especificar a mensagem na instrução de alerta.
O valor passado para uma função é usado no corpo da função para realizar
algo. Nesse caso, o valor é usado para especificar a mensagem no alerta.
No exemplo, o argumento é uma string, mas também pode ser uma variável. No código a seguir, declaro a
variável saudação e atribuo a ela o valor "Hello, there." Então, em vez de usar a própria string como argumento na
chamada da função, uso a variável.
1 var saudação = "Olá, tudo bem." 2

saudaçãoUsuário(saudação);
No exemplo acima, o nome da função greetUser, compartilha um pouco de seu nome com o parâmetro saudação,
mas isso é apenas para facilitar o entendimento do código. O nome da função e o nome do parâmetro não precisam ter
nada em comum. E lembre-se, esses nomes são com você, contanto que você siga as regras de nomenclatura de
variáveis.
No exemplo, nomeei o argumento no código de chamada saudação e também nomeei o parâmetro no código de
função saudação. Mas isso também não é necessário. Eles não precisam combinar. Não importa qual seja o nome de
um argumento, ele é aceito pelo parâmetro, não importa qual seja o nome do parâmetro. No código a seguir, a variável
qualquer que seja o argumento. A saudação do parâmetro não corresponde ao nome, mas ainda captura o valor.
Aqui está a função, mais uma vez, com o parâmetro saudação.
1 função greetUser(saudação) { 2 alert(saudação);

3}
E aqui está a declaração que chama a função, com o argumento qualquer.
1 var qualquer = "Olá, tudo bem."; 2

saudaçãoUsuário(qualquer coisa);
Tudo bem se o nome do argumento e o nome do parâmetro não corresponderem. o

parâmetro ainda captura o argumento, a string "Hello, there."
Ainda assim, muitas vezes faz sentido dar a um argumento e um parâmetro o mesmo nome, para maior clareza.
Um número, seja um número literal ou um número representado por uma variável, pode ser um argumento. No
código a seguir declaro a variável quaseAMil e atribuo o número 999999 a ela. Então eu uso quaseAMil como o
argumento na chamada de função.
1 var quaseAMil = 999999;

2 showBigNum(quase AMil);
116
Alternativamente, se eu quisesse, eu poderia usar o número literal 999999 como argumento.
showBigNum(999999);
Você pode passar qualquer número de argumentos, separados por vírgulas, para uma função.
Normalmente, a função tem o mesmo número de parâmetros, também separados por vírgulas. (Existem raras
exceções para casos especiais.) Novamente, quando você usa variáveis como argumentos, seus nomes não
precisam corresponder aos nomes dos parâmetros. JavaScript combina argumentos e parâmetros de acordo
com sua ordem, não seus nomes. O primeiro argumento da lista é passado para o primeiro parâmetro da lista, o
segundo argumento é passado para o segundo parâmetro e assim por diante.
Como argumentos, você pode usar qualquer combinação de variáveis, strings e números literais. No
exemplo a seguir, o código de chamada passa uma variável, uma string e um número para a função. Três
parâmetros capturam os valores. A função os concatena para criar uma mensagem de alerta.
Primeiro, aqui está a função.
1 função showMessage(m, string, num); 2 alert(m + string + num);

3}
Agora aqui está a instrução que chama a função.
1 var mês = "março";

2 showMessage(mês, "o número do vencedor é ", 23);
O argumento mês, uma variável, é passado para o parâmetro m. O argumento "o número vencedor é",
uma string, é passado para o parâmetro string. O argumento 23, um número literal, é passado para o parâmetro
num.
Quando o código é executado, um alerta é exibido dizendo: "O número vencedor de março é 23".
Normalmente, você usaria todos os parâmetros incluídos na definição da função como variáveis no código
que executa, porque, por que mais você os desejaria na definição da função? Mas não há nada que diga que
você deve usar todos eles. E você certamente não precisa usá-los na mesma ordem em que aparecem entre
parênteses. Cada uma é uma variável completa que, dentro da função, você pode usar da mesma forma que
usaria qualquer variável.
117

118
37
Funções:
Passando dados de volta deles
Como você aprendeu no capítulo anterior, uma função se torna mais versátil quando você passa dados
para que ele possa entregar um trabalho personalizado.
Mas uma função pode fazer ainda mais. Ele pode passar dados de volta para o código de chamada.
Digamos que você cobra uma taxa de frete mínima de US$ 5, mais 3% da mercadoria
total acima de $ 50, até $ 100. Você oferece frete grátis quando o total atinge $ 100. Aqui está o código
que calcula o total do pedido.
1 var orderTot;
2 if (merchTot >= 100) {
3 ordemTot = merchTot;
4}
5 senão se (merchTot < 50.01) {
6 pedidoTot = merchTot + 5;
7}
8 mais {
9 orderTot = merchTot + 5 + (.03 * (merchTot - 50));
10}
Se o total da mercadoria for de pelo menos $ 100 (linha 2), o total do pedido é o mesmo que o
total da mercadoria (linha 3). Se o total da mercadoria for $ 50 ou menos (linha 5), o total do pedido será o
total da mercadoria mais $5 (linha 6). Se o total do pedido estiver entre US$ 50 e US$ 100 (linha 8), o
o total do pedido é o total da mercadoria mais US$ 5 mais 3% do valor acima de US$ 50 (linha 9).
Algo que custa $ 150 é $ 150 no total.
Algo que custa $ 15 é $ 20 no total.
Algo que custa $ 70 é $ 75,60 no total.
Veja como transformamos o código acima em uma função.
1 função calcTot(merchTot) {
2 var ordemTot;
3 if (merchTot >= 100) {
4 ordemTot = merchTot;
5 }
6 senão if (merchTot < 50.01) {
7 ordemTot = mercadoriaTot + 5;
8 }
9 senão {
10 orderTot = merchTot + 5 + (0,03 * (merchTot - 50));
11 }
12 ordem de devoluçãoTot;
13}
A coisa para focar aqui é que declaramos uma variável, orderTot (linha 2), e então—
aqui está o que há de novo - depois que o processamento é feito e o total da mercadoria é conhecido, o
A função retorna o valor mantido em orderTot para o código de chamada (linha 12). Ele passa os dados de volta.
119
Mas então o código de chamada precisa de algo para capturar os dados. O que mais poderia ser esse algo além
de uma variável? Aqui está o código que chama a função.
var totalToCharge = calcTot(79,99);
Se você é novo na codificação, esta declaração pode parecer estranha para você. Como uma função pode ser
atribuído a uma variável? Você pode estar acostumado a ver um valor literal atribuído a uma variável....
var totalToCharge = 85,00;
Você pode estar acostumado a ver uma variável atribuída a uma variável...
var totalToCharge = merchTotal;
E você pode estar acostumado a ver uma aritmética ou outra expressão atribuída a uma variável...
var totalToCharge = merchTotal + navio + imposto;
Mas atribuir uma função a uma variável?

Bem, não é tão estranho assim, porque, lembre-se, o que você está realmente atribuindo à variável é o valor
passado de volta pela instrução return no código da função. o
declaração...
var totalToCharge = calcTot(79,99);
...é uma abreviação para: "Atribuir à variável totalToCharge o valor retornado pela função calcTot."
Portanto, agora há comunicação bidirecional entre o código de chamada e a função. O código de chamada passa
o valor 79,99 para a função, que é capturada pelo parâmetro merchTot da função. Essa variável, merchTot, é usada no
corpo da função para calcular o total de um pedido. Em seguida, por meio da instrução return , esse total do pedido é
passado de volta para totalToCharge no código de chamada. É um círculo completo.
Observe que a variável no código de chamada, totalToCharge, que captura o valor é diferente da variável dentro
da função, merchTot, que retorna o valor. Eu fiz isso propositalmente, então você não pensaria que as duas variáveis
têm que compartilhar o mesmo nome. No último capítulo você aprendeu que quando um argumento no código de
chamada passa um valor para um parâmetro na definição da função, eles podem ter o mesmo nome, mas não
necessariamente. O mesmo se aplica à variável que é retornada de uma função e à variável no código de chamada que
a captura. Eles podem compartilhar o mesmo nome, mas não precisam.
Em qualquer lugar que você pode usar uma variável, você pode usar uma função. (Tecnicamente, uma função é
uma variável.) Por exemplo...
Você pode usar uma função para especificar a mensagem em um alerta.
alert(calcTot(79,99));
No exemplo acima, a mensagem de alerta é o valor retornado pela função calcTot
120
quando a função é passada 79,99 como parâmetro.

Você pode usar uma função em uma expressão.
var pedidoTot = merchTot + calcTax(merchTot);
No exemplo acima, o valor atribuído a orderTot é a soma de merchTot e o valor retornado pela função
calcTax quando a função é passada merchTot como argumento.
Você pode usar uma função em uma chamada de função.
var tot = calc(merchTot, calcTax(merchTot));
No exemplo acima, o código de chamada passa dois argumentos para a função calc. O primeiro argumento
é merchTot. O segundo argumento é a função calcTax, que também recebe merchTot.
Dentro de uma função, você pode chamar outra função.
1 function calcTot(price) { 2 return price +

calcShip(price); 3}
No exemplo acima, a função calcTot chama a função calcShip. Ele passa o preço como argumento e recebe
o valor do frete de volta. Ele adiciona a taxa de envio ao preço e retorna a soma ao código de chamada original
como um total.
Você aprendeu que pode passar qualquer número de argumentos para qualquer número de parâmetros.
Infelizmente, você não tem essa flexibilidade na declaração de devolução . Não importa quantos parâmetros sejam
necessários ou quanto processamento ela faça, uma função pode retornar apenas um único valor ao código que a
chama.
121

122
38
Funções: Variáveis locais vs. globais
Agora chegamos ao assunto do escopo variável. Ou seja, a diferença entre variáveis globais e locais .
Algumas variáveis têm escopo global, o que as torna variáveis globais.
Outras variáveis têm escopo local, o que as torna variáveis locais. Nada poderia ser mais simples, mas por
algum motivo, quando o assunto aparece em livros e tutoriais, muitas vezes a ofuscação impera. Relaxar. Isso
será fácil.
Uma variável global é aquela declarada no corpo principal do seu código, ou seja, não dentro de uma
função.
Uma variável local é aquela declarada dentro de uma função. Pode ser um parâmetro da função, que é
declarado implicitamente ao ser nomeado como parâmetro, ou uma variável declarada explicitamente na função
com a palavra-chave var .
O que torna uma variável global global é que ela é significativa em cada seção do seu código, seja esse
código no corpo principal ou em qualquer uma das funções. O escopo global é como a fama global. Onde quer
que você vá no mundo, eles já ouviram falar de Bill Clinton.
Uma variável local é significativa apenas dentro da função que a declara. O escopo local é como a fama
local. O prefeito de Duluth é conhecido dentro de Duluth, mas praticamente desconhecido em qualquer outro
lugar.
Portanto, há duas diferenças entre variáveis globais e locais — onde são declaradas e onde são
conhecidas e podem ser usadas.
Antes de mostrar o primeiro exemplo, quero que você deixe de lado o que sabe sobre passar valores para
uma função por meio de argumentos e passar um valor de volta para o código de chamada por meio da instrução
return . Finja que você não sabe nada sobre essas coisas. Voltarei a eles mais tarde. Aqui está um exemplo.
Primeiro, no código principal, uma declaração de variável seguida de uma chamada para uma função:
1 var aSoma
2 addNúmeros();
Então a função:
123
1 função adicionarNúmeros() {
2 aSoma = 2 + 2;
3}
No exemplo, a variável theSum é declarada no código principal. A função addNumbers é chamada para atribuir
um valor a ela. Tendo sido declarada no código principal, a variável tem escopo global, então esta função ou qualquer
outra função pode utilizá-la. Assim como qualquer coisa no código principal. A função atribui a soma de 2 + 2 a esta
variável global. Como a variável tem escopo global, a atribuição é significativa em todas as seções do seu código, tanto
no código principal quanto em todas as funções. A variável agora tem o valor 4 na função addNumbers, no código
principal e em quaisquer outras funções que a utilizem. Não importa onde eu escrevo...
alert(aSoma);
Onde quer que eu escreva - no código principal, na função addNumbers ou em qualquer outro
função, um alerta exibirá o número 4.
Mas se eu declarar a variável não no código principal, mas dentro da função...
1 function addNumbers() { 2 var theSum

= 2 + 2;
3}
...a variável tem o valor 4 apenas dentro da função. Em todos os outros lugares, é desconhecido.
Em qualquer outro lugar, não tem valor algum. Como a variável theSum é declarada com a palavra-chave var dentro
da função, não no código principal, seu escopo é local. É significativo apenas dentro da função. Em outras funções e
no código principal, é desconhecido. Se eu escrever...
alert(aSoma);
...na função, um alerta exibe o número 4, pois a variável theSum é conhecida dentro da função, onde foi
declarada. Mas se eu escrever a mesma declaração de alerta em qualquer outro lugar - no código principal ou em outra
função - o código quebra, porque a soma é desconhecida fora da função.
Nota: digo que uma variável tem escopo local quando você a declara em uma função. Por "declará-la em uma
função" quero dizer que você declara a variável explicitamente com a palavra-chave var - em oposição a introduzi-la
casualmente na função sem var. (A exceção é se você nomeá-lo como um parâmetro, caso em que é declarado
implicitamente como uma variável local da função.) Se você ficar desleixado e começar a usar uma nova variável no
corpo de uma função sem declará-la explicitamente na função com a palavra-chave var, ela é global—mesmo que você
não a tenha declarado em nenhum lugar do código principal.
Agora, para ilustrar um ponto, vou fazer algo que você nunca gostaria de fazer em
seu código. Vou declarar uma variável tanto no código principal quanto na função.
Primeiro, no código principal:
1 var aSoma = 1000;

2 addNúmeros();
124
Então na função:

= 2 + 2; 3}
Ao declarar a variável duas vezes — uma no código principal e outra na função — criei duas variáveis
diferentes que compartilham o mesmo nome. Um theSum é global. O outro theSum é local. Isso não é algo que
você gostaria de fazer – isso o prepara para erros de codificação e torna seu código quase impossível de seguir –
mas eu fiz isso para mostrar a diferença entre escopo global e local. Ao declarar theSum uma vez no código principal
e novamente na função, criei (1) uma variável global que pode ser usada em quase todos os lugares e (2) uma
variável local com o mesmo nome que pode ser usada apenas dentro da função. Por que eu digo que a variável
global é utilizável em quase todos os lugares? Porque não é bom dentro da função. Dentro da função, o nome
theSum representa uma variável local, portanto, o nome não pode se referir à variável global. Nessa situação, os
codificadores dizem que a variável global está na sombra da variável local. Dentro da função, ela não pode ser vista.
Dentro da função, apenas a variável local desse nome pode ser vista.
A variável local theSum tem valor 4 dentro da função, mas theSum fora do
função tem um valor de 1000.
Agora vamos viajar um pouco mais para o País das Maravilhas, Alice.
Primeiro, uma declaração no código principal:
1 var theSum = addNumbers();
Então uma função:

= 2 + 2;
3 devolva a Soma;
4}
Novamente, isso não é algo que você realmente codificaria. Eu uso o exemplo apenas para demonstrar
princípios. Nesse código, você ainda tem duas variáveis diferentes — uma variável global e uma variável local —
que compartilham o mesmo nome, theSum, mas agora, graças à instrução return , o valor da variável local é
atribuído à variável global. Agora ambas as variáveis têm o mesmo nome e o mesmo valor, mas ainda são variáveis
diferentes.
O que nos leva a uma pergunta que você pode estar
fazendo: Se uma função pode usar uma variável global, por que você tem que passar um valor de um
argumento para um parâmetro? Por que não apenas declarar uma variável global e fazer com que a função a use?
Bem, você pode, mas pedir a funções para trabalhar com variáveis globais é pedir a elas para espionar o código
principal e, como espionagem humana, convida a confusão na forma de confusão e consequências não intencionais.
Não há controvérsia entre os codificadores sobre isso. É sempre melhor passar valores explicitamente para funções
por meio de argumentos. Variáveis globais não têm lugar em funções.
125
A mesma lógica se aplica ao argumento para usar a instrução return . Você pode alterar o valor de
uma variável global dentro de uma função. Quando você faz isso, o valor dele muda em todos os lugares,
inclusive no código principal. Nenhum retorno é necessário. Mas é uma prática melhor usar uma variável
local dentro da função e, em seguida, passar esse valor de volta explicitamente por meio de um retorno
declaração.
126

127
39
instruções de troca :
Como iniciá-los
Considere esta cadeia de declarações condicionais.
1 if (dayOfWk ==="Sat" || dayOfWk === "Sun") { 2 alert("Whoopee!"); 3 } 4 else if

(dayOfWk === "Sex") { 5 alert("TGIF!"); 6 } 7 mais {
8 alert("Atire em mim agora!");

9}
Se for um dia de fim de semana, o "Whoopee!" telas de alerta. Se for sexta-feira, o alerta "TGIF"
exibe. Se for um dia de semana, o alerta "Atire em mim agora" é exibido.
Funciona, mas é pesado e um pouco feio, principalmente se você tiver muitas condições para testar.
É hora de você aprender uma alternativa mais elegante que você pode usar para testar inúmeras condições, a
instrução switch . Quanto mais condições você precisar testar, mais você gostará da instrução switch . Esta
instrução switch duplica a funcionalidade do exemplo acima
1 switch(dayOfWk) { 2 case "Sat" :
3 alert("Opa"); parar;
4
5 caso "Sol":
6 alert("Opa"); parar; 8 caso
7 "Sex":
9 alert("TGIF!");
10 pausa;
11 padrão:
13}
128
No momento, quero que você se concentre apenas nas três primeiras linhas do código acima.
1. Começa com a mudança de palavra- chave. Esbarrando nela está a variável que está sendo testada,
entre parênteses. Depois, há um colchete de abertura.
2. A primeira possibilidade, que a variável dayOfWeek tenha o valor "Sat". Começa com o caso da palavra-
chave. Em seguida, o valor que está sendo tentado, "Sat". Em seguida, um espaço e dois pontos.
3. A instrução que será executada se o teste for aprovado — se dayOfWeek , de fato, tiver o valor "Sat". Esta
declaração é recuada. Qualquer número de instruções pode ser executado se o teste for aprovado.
129

130
40
instruções de troca :
Como completá-los
No último capítulo, você se concentrou nas três primeiras linhas desta instrução switch .
1 switch(dayOfWk) { 2 case "Sat" :
3 alert("Opa"); parar;
4
5 caso "Sol":
6 alert("Opa"); parar; 8 caso
7 "Sex":
9 alert("TGIF!"); 10 pausa; 11
padrão:

13}
Neste capítulo, você abordará o restante do código.

A primeira linha de uma instrução if é seguida por uma instrução (ou instruções) que é executada se a
condição for verdadeira. Uma instrução switch funciona de forma semelhante. Na linha abaixo de cada cláusula
case , há uma instrução (ou instruções) que é executada se o caso for verdadeiro.
Mais uma vez, o código que executa se o caso for verdadeiro é recuado 2 espaços. (A convenção universal
é que ele é recuado por alguma quantidade. As opiniões divergem sobre o quanto é melhor. Eu padronizo em um
recuo de 2 espaços, que é comum, mas longe de ser universal.)
Mas por que todos os casos, exceto o último, incluem uma instrução break ?
O JavaScript tem uma peculiaridade inconveniente: depois que um caso verdadeiro é encontrado, o
JavaScript não apenas executa a(s) instrução(ões) imediatamente abaixo desse caso. Ele executa todas as
instruções para todos os casos abaixo dele. Então, depois que um caso verdadeiro é encontrado e o código
condicional é executado, você precisa sair do bloco switch codificando uma instrução break . Se, por exemplo,
você omitir as instruções break no código acima, isso acontece:
1. Um alerta é exibido dizendo "Whoopee!"

2. Um segundo alerta é exibido dizendo "Whoopee!"
3. Um terceiro alerta é exibido dizendo "TGIF!"
4. Um quarto alerta é exibido dizendo "Atire em mim agora".
Agora vamos olhar para a linha 11.
11 padrão:
12 alert("Atire em mim agora!"); 13}
131
A palavra-chave default funciona como else em uma instrução if...else . O código que segue é executado
se nenhuma das condições acima for atendida. Portanto, no exemplo acima, se dayOfWk não for "Sat" ou
"Sun" ou "Fri" — se for qualquer coisa diferente desses três valores — um alerta será exibido dizendo "Shoot
me now".
Observe que default é seguido por um espaço e dois pontos, assim como as cláusulas case acima dele.
Observe também que não há instrução break . Isso porque o padrão sempre vem por último, o que
significa que não há instruções abaixo dele para serem executadas de forma inadequada.
Em uma instrução switch, o código padrão é opcional, assim como o código else é opcional após um if
declaração. Sem o código padrão , se nenhum dos casos for verdadeiro, nada acontece.
Quando não há código padrão , codificadores cuidadosos incluem uma instrução break após a última
condição como garantia, mesmo que possa ser supérflua. Se você decidir adicionar uma nova condição ao
final mais tarde, não precisará se lembrar de adicionar uma quebra ao bloco acima dele para evitar uma
desastrosa cascata de instruções.
132

133
41 loops while
Este loop for exibe um alerta em cada iteração.
1 para (var i = 0; i <= 3; i ++) {2 alerta (i); 3}
Como você sabe, o processo é controlado pelos três termos dentro dos parênteses:
var i = 0 estabelece um contador. i <=

3 diz que o loop deve continuar em execução enquanto i for menor ou igual a 3. Como i é atribuído a 0
inicialmente, o loop será executado 4 vezes. i++ incrementa i em cada iteração.
Todas as instruções de como fazer o loop são empacotadas no espaço entre os parênteses: onde iniciar
o contador, por quanto tempo manter o loop e como atualizar o contador a cada vez.
Um loop while faz a mesma coisa, mas é organizado de forma diferente. Apenas o termo médio, quanto
tempo para manter o loop, está dentro dos parênteses. O contador é definido antes da primeira linha do bloco
while . O contador é atualizado dentro do código que é executado quando o loop é executado.
1 var i = 0; 2 while
(i <= 3) { 3 alerta(i); 4i ++;
5}
De outras maneiras, um loop while é organizado nas mesmas linhas de um loop for .
Os parênteses incluem o limitador de loop.

As chaves envolvem o código que é executado.
O código que executa é recuado 2 espaços.
Como qualquer loop for pode ser traduzido em um loop while e vice-versa, você pode usar o que preferir.
134

135
42
faça... while loops
Em um loop while a ordem das instruções é:
1. Declare uma variável para servir como contador e atribua um valor a ela.
2. Inicie o loop, especificando por quanto tempo o loop deve ser executado.
3. Execute uma ou mais instruções.
4. Dentro do loop, como declaração final, avance o contador.
1 var i = 0;
2 while (i <= 3) { 3 alerta(i);
4i++; 5}
Um loop do... while realiza quase a mesma tarefa que um loop while .
1 var i = 0;
2 faz {
3 alerta(i); 4i++; 5 }
enquanto (i <= 3);
As diferenças entre os dois tipos de loops:
Em vez de while, a palavra-chave do conduz a instrução.

A cláusula while , incluindo o código de limitação de loop dentro dos parênteses, move-se para a parte inferior
—após o colchete de fechamento.
Observe que a cláusula while termina com um ponto e vírgula.

Funcionalmente, a diferença entre um loop while e um loop do... while é que é possível codificar uma instrução
while cujo bloco de instruções nunca é executado. Considere este laço while .
1 var i = 0; 2
enquanto (i < 0) { 3
alerta(i); 4i++;
5}
O código diz para continuar executando um alerta enquanto o contador for menor que 0. Mas como o
136
counter nunca for menor que 0, o código dentro das chaves nunca será executado.
Compare isso com o loop do... while.
1 var i = 0; 2 do {3
alerta (i);
4i++;
5 } enquanto (i < 0);
O alerta será exibido uma vez, mesmo que a condição de continuidade — i menor que 0 — nunca
ocorra. Como um loop do... while executa o código dentro das chaves antes de chegar ao limitador de
loop na parte inferior, ele sempre executa esse código pelo menos uma vez, não importa o que o
limitador de loop diga.
137

138
43
Colocando scripts
O código JavaScript não se importa onde ele mora. Ele pode ser misturado com — ou seja, incorporado — ao HTML
que cria uma página da Web. Ou, como um arquivo CSS externo, ele pode ser colocado em um arquivo separado que é
carregado pelo arquivo HTML. Na maioria dos casos, é melhor ter um arquivo JavaScript externo, por alguns dos mesmos
motivos, é melhor ter um arquivo CSS externo. Mas você ainda precisa saber como colocar JavaScript em seu arquivo
HTML, então vamos começar com isso.
Como você sabe, a ordem do código HTML é importante, pois determina a ordem dos elementos na página. Se você
quiser que o título apareça acima do texto, coloque o título acima do texto no HTML. Mas o JavaScript não funciona da
mesma maneira. Todas as suas funções JavaScript, por exemplo, são carregadas na memória quando a página é carregada.
Onde quer que o código esteja, o navegador o encontra e o armazena quando a página termina de carregar. Depois que a
página é carregada, todo o código JavaScript permanece na memória, pronto para ser executado, enquanto a página for
exibida.
Você pode colocar código JavaScript legalmente em quase qualquer lugar no arquivo HTML – na seção head, no
início da seção body, em algum lugar no meio da seção body ou no final da seção body. Você poderia, se quisesse ser
perverso, espalhar diferentes funções Javascript por todo o seu arquivo HTML em lugares diferentes. O navegador
classificaria tudo
Fora.
Geralmente, o melhor lugar para scripts, porém, é no final da seção do corpo. este
garante que o estilo CSS e a exibição de imagens não serão interrompidos enquanto os scripts estiverem sendo carregados.
Ao incorporar blocos de JavaScript em HTML (em vez de ter um arquivo JavaScript separado), você deve colocar o
código JavaScript entre as tags <script> e </script> . Aqui estão duas funções incluídas entre as tags.
1 <script> 2
function sayHi() { 3 alert("Olá
mundo!");
4}
5 function digaTchau() { 6
alert("Tchau!"); 7 } 8 </script>
Você pode colocar qualquer quantidade de código—incluindo qualquer número de funções—entre as tags <script> e
</script> . E, como mencionei antes, você pode ter diferentes seções de código espalhadas por todo o arquivo HTML, se
desejar. Mas cada seção deve ser colocada entre as tags <script> e </script> .
Para a maioria dos propósitos, os codificadores preferem ter todo ou a maior parte de seu código JavaScript em um
arquivo JavaScript separado e, em seguida, fazer com que o navegador carregue esse arquivo externo ao mesmo tempo
em que carrega o arquivo HTML.
139
Um arquivo JavaScript é, como arquivos HTML e CSS, um arquivo de texto simples. Ele não tem um
cabeçalho ou quaisquer outras seções especiais. Ele nem tem as tags <script> e </script> . É apenas código
JavaScript puro. Todo o conteúdo de um arquivo JavaScript que contém as duas funções no exemplo acima seria:
1 function digaOi() { 2
alert("Olá mundo!"); 3 } 4 function
digaTchau() { 5 alert("Tchau!"); 6}
O que torna um arquivo JavaScript um arquivo JavaScript é sua extensão de arquivo: .js. O front-end do
nome do arquivo é com você, desde que seja legal. Qualquer um desses seria bom.
scripts.js
coreJS.js
main-code.js
main_code.js
main.code.js
Você inclui um arquivo JavaScript em um arquivo HTML da mesma forma que inclui um arquivo CSS
externo — com uma tag de abertura e fechamento.
<script src="whatever.js"></script>
Pela mesma razão que é uma boa ideia colocar o código JavaScript no final da seção do corpo, é uma boa
ideia colocar a marcação que inclui os arquivos JavaScript no final da seção do corpo.
Você pode incluir quantos arquivos JavaScript externos desejar.

Você pode incluir arquivos JavaScript e também incorporar outro código JavaScript no HTML.
140

141
44.
Comentando
Comentar, como você sabe pelo seu trabalho com HTML e CSS, é uma maneira de dizer ao navegador para
ignorar certas partes do texto que você inclui no corpo do código. Os comentários são para o ser humano, não para a
máquina. Eles ajudam você e outras pessoas a entender seu código quando chega a hora de revisar. Você também
pode usar comentários para comentar partes do seu código para teste e depuração. Já que, comparado com HTML
ou CSS, JavaScript é normalmente mais difícil de entender quando você volta a ele mais tarde, você pode querer fazer
um esforço extra para comentar seu código JS, especialmente se você estiver trabalhando em uma equipe ou se outra
pessoa estiver solicitado a manter seu código no futuro.
Em HTML há apenas uma maneira de marcar o texto como um comentário. Você escreve 
para fechar. E no CSS há apenas uma maneira de marcar o texto como um comentário. Você escreve /* para abrir e
*/ para fechar. Mas em Javascript existem duas maneiras de marcar o texto como um comentário.
A primeira maneira é marcar uma única linha como comentário, como na linha 1 aqui.
1 // Este é um comentário, ignorado pelo navegador 2 for (var i = 0; i 3 if

(animals[i] === "bat") { 4 animals[i] = "cat";
5 }
6}
As duas barras significam: "Tudo daqui até o final desta linha é um comentário". No exemplo acima, isso significa
toda a linha, já que as barras estão no início. Mas você pode escrever uma linha que é parte-código e parte-comentário,
desta forma.
var animais = []; // Declara um array vazio
Você pode escrever quantas linhas de comentários quiser. Cada linha deve começar com as duas barras.
// Cada linha de comentário deve começar com um par // de barras,

assim. (A maioria dos editores de código, // a propósito, são inteligentes
o suficiente para reconhecer // comentários e renderizá-los em uma //
cor diferente para que seja fácil para você // distinguir do código.)
Quando você comenta com barras, não há tag de fechamento, pois o final da linha fecha o comentário
automaticamente.
Para legibilidade, separe o par de barras do comentário com um espaço. Ao combinar código com um
comentário na mesma linha, separe o código do par de barras com um espaço.
Quando um comentário requer mais de uma linha, muitos codificadores preferem um método alternativo.
142
Como usuário de CSS, você já está familiarizado com essas tags.
/*
Quando um comentário requer mais de uma linha, um comentário
em bloco como este, com suas tags de abertura e fechamento,
é o caminho a seguir. */
As tags de comentário de várias linhas JavaScript são iguais às tags de comentário CSS. Abra com /*.
Feche com */.
143

144
45
Eventos: link
Um bom site é um site responsivo. O usuário faz alguma coisa – clica em um botão, move o mouse, pressiona
uma tecla – e algo acontece. O JavaScript oferece muitas maneiras de responder às necessidades do usuário.
Alguns exemplos:
O usuário clica em um botão dizendo "Nossa Garantia" e um alerta é exibido explicando a garantia.
Uma página exibe uma imagem "antes" de um modelo. Quando o usuário passa o mouse sobre a imagem, ela
é substituído por uma foto "depois" dela.
O usuário digita um número no campo Onças em um formulário. Quando ela clica no campo Gramas, o
equivalente em gramas é exibido.
O usuário inseriu seu endereço de e-mail em um formulário e está prestes a digitar um comentário. Quando
ela move o cursor do campo de e-mail para o campo de comentário, o JavaScript verifica se o endereço de e-mail é
válido. Nesse caso, não é — ela omitiu ".com" no final do endereço. Uma mensagem é exibida informando que ela
inseriu um endereço de e-mail inválido.
Em um site de compras online, há uma foto de um relógio preto. Ao lado, há uma lista suspensa solicitando
que o usuário escolha uma cor. Quando ela escolhe, a cor do relógio na imagem muda para essa cor.
Todas essas ações do usuário — clicar em um botão, mover o mouse, mover de um campo para outro em um
formulário, selecionar uma opção diferente — são conhecidas como eventos. O código JavaScript que responde a
um evento — por exemplo, exibindo uma garantia ou trocando uma imagem quando o ponteiro passa sobre ela — é
chamado de manipulador de eventos.
Neste capítulo e nos que seguem imediatamente, você aprenderá a abordagem mais antiga e direta de
manipulação de eventos — manipulação de eventos em linha . Quando você está escrevendo código de produção,
essa não é a melhor maneira de lidar com eventos, pelo mesmo motivo que o estilo CSS inline não é a melhor
maneira de formatar elementos HTML. Mas como é a maneira menos abstrata de fazer isso, é a mais fácil de
aprender e pode servir como um trampolim para métodos mais avançados. Mais adiante no livro, você aprenderá a
abordagem preferida pela maioria dos profissionais — a abordagem de script .
Manipulação de eventos inline significa que você combina bits de JavaScript com marcação HTML.
Aqui está uma linha que exibe um link e, em seguida, exibe um alerta quando o usuário clica nele.
<a href="#" onClick="alert('Hi');">Clique</a>
Como um codificador HTML, você está familiarizado com o início e o fim desta marcação, <a href= e >Clique</
a> Mas quando o usuário clica neste link, ele se comporta de forma diferente dos hiperlinks normais. Em vez de
levar o usuário para outra página ou para uma âncora nomeada na mesma página, ele exibe um alerta dizendo
"Oi".
145
Quando o usuário clica no link, ele não vai a lugar nenhum e, em vez disso, executa um JavaScript
instrução, neste caso chamando uma função.
Vamos decompô-lo.
Quando o usuário clica no link, você não deseja que uma nova página da Web seja carregada nesse caso, portanto,
em vez de uma URL, você coloca um # entre as aspas. Isso diz ao navegador para recarregar a página atual.
onClick= diz: "Quando o botão for clicado, execute o seguinte JavaScript." onClick não diferencia maiúsculas de
minúsculas. Você poderia escrever onclick, ONCLICK ou OnClIcK e funcionaria.
Mas a convenção é onClick, então vamos ficar com isso.

Segue uma instrução JavaScript (ou mais de uma), entre aspas. Quando o usuário clica no link, ele é executado.
Mais uma coisa a notar: onClick="alert('Hi');" A mensagem dentro dos parênteses é cercada por aspas simples,
não as aspas duplas que estamos usando para uma string de alerta. No código JavaScript, você não tem permissão para
aninhar aspas duplas entre aspas duplas ou aspas simples entre aspas simples. Como toda a instrução JavaScript está
entre aspas duplas, você deve colocar a mensagem de alerta entre aspas simples.
Mas há um problema com a marcação acima. <a href="#" diz ao navegador para recarregar a página. Isso significa
que, se o usuário tiver rolado para baixo até o link, o clique, além de executar o código JavaScript, rolará a página de
volta ao topo - uma ação que você normalmente não deseja. Incluí essa abordagem falha, usando <a href="#", porque
você encontrará aqui e ali no trabalho de outras pessoas, mas provavelmente preferirá essa abordagem:
<a href="JavaScript:void(0)" onClick="alert('Hi');">Clique</a>
Agora você tem exatamente o que você quer. Nada acontece, exceto para o JavaScript
que executa.
No exemplo acima, o clique executa apenas uma única instrução JavaScript. Mas não há limite para o número de
instruções JavaScript que você pode colocar entre aspas. Sem limite, isto é, exceto pelo bom senso. Como você verá,
existem maneiras melhores de acionar o JavaScript do que empacotar várias instruções em um evento onClick online .
Mas deixe-me mostrar-lhe o princípio, com este exemplo. Quando o usuário clica, uma primeira instrução atribui 'hi' a uma
variável e uma segunda instrução exibe um alerta especificando a variável como a mensagem.
<a href="JavaScript:void(0)" onClick="var greet="hi'; alert(greet);">Clique</a>
Como eu disse, os profissionais de codificação desaprovam o JavaScript embutido. Mas se você usar essa
abordagem, é mais artesanal chamar uma função.
Aqui está uma função.
1 função popup(mensagem) { 2
alert(mensagem); 3}
146
Este é o manipulador de eventos que chama a função.
<a href="JavaScript:void(0)" onClick="popup('Hi');">Clique</a>
Quando o usuário clica no link, o manipulador de eventos chama a função, passando o argumento 'Hi' para
ela. A função exibe um alerta dizendo 'Hi'.
147

148
46
Eventos: botão
No capítulo anterior, você aprendeu como redirecionar um link para que ele acione um evento quando for clicado,
em vez de carregar uma nova página. Você aprendeu a fazer isso com manipulação de eventos inline , não a melhor
maneira, mas a mais fácil de aprender. Mais adiante no livro, você aprenderá a abordagem preferida pela maioria dos
profissionais — a abordagem de script .
Mas mesmo se você estiver usando o método inline, quando quiser dar ao usuário algo para
clique, uma abordagem mais profissional, geralmente, é usar um botão em vez de um link.
Suponha que quando o usuário clicar em um botão, um alerta seja exibido dizendo: "Hello world!"
<input type="button" value="Click" onClick="alert('Hello world!');">
O manipulador de eventos é o mesmo, esteja você codificando um link ou um botão:

onClick="alert('Olá mundo!');"
Mas o início do código é diferente: <input type="button" value="Click"
Alguns profissionais argumentam que o código do botão deve ser incluído em tags de formulário , mas isso não é
absolutamente necessário. E de qualquer forma, já que já estamos violando as práticas recomendadas usando
manipuladores de eventos inline, por que não escandalizar os profissionais com várias violações? (Você aprenderá
alternativas mais respeitáveis para manipuladores de eventos embutidos posteriormente neste livro.)
Como codificador de HTML, você sabe que pode usar uma imagem como um link de acesso. A marcação seria
algo assim.
<a href="summary-page.html"><img src="button-sum-pg.png"></a>
Você também pode usar uma imagem para acionar um evento. Digamos que quando o usuário clica em uma
imagem, um alerta aparece. Este é o código. Observe que o código para o manipulador de eventos embutido é o mesmo
de antes.
<img src="button-greet.png" onClick="alert('Hello world!');">
Ou, se você quiser ser mais profissional, pode fazer com que o evento acione uma função.
<img src="button-greet.png" onClick="greetTheUser();">
149

150
47
Eventos: rato
Você aprendeu como fazer as coisas acontecerem quando o usuário clica em um link, um botão ou uma imagem,
usando manipulação de eventos inline . A manipulação de eventos inline não é a melhor abordagem, mas a mais fácil de
aprender. Mais adiante no livro, você aprenderá a abordagem preferida pela maioria dos profissionais — a abordagem de
script .
Mas se você estiver usando o método inline ou o método de script preferido, o evento onClick é apenas um dos
muitos tipos de eventos aos quais seu código pode responder. Neste capítulo, você aprenderá como fazer as coisas
acontecerem quando o usuário passa o mouse sobre algo na página e também quando o usuário se afasta dela.
Suponha que sua página exiba inicialmente uma imagem "antes" de um modelo. Quando o usuário passa o mouse
sobre a imagem, ela é substituída por uma imagem "depois". Você pode preferir fazer isso com CSS, mas como este é um
livro de JavaScript, mostrarei como fazer isso com um manipulador de eventos.
Esta é a marcação que substitui a imagem anterior pela imagem posterior .
<img src="before-pic.jpg" onMouseover="src='after-pic.jpg'">
Começa como uma tag de imagem simples: <img src="before-pic.jpg"

Em seguida, vem a palavra-chave de manipulação de eventos. A palavra-chave está em camelCase—opcional, mas
amplamente utilizada: onMouseover Um sinal de igual segue a palavra-chave onMouseover, assim como acontece com
onClick. Então
vem a resposta ao evento, que está entre aspas: "src='after-pic.jpg'">
Você pode se surpreender que a resposta ao evento não esteja escrita em JavaScript. É marcação HTML.
Nota: A fonte da imagem deve estar entre aspas simples, por causa das aspas duplas que envolvem a frase inteira.
Você também pode usar a manipulação de eventos onMouseover com outros elementos HTML. Aqui está um pouco
de código embutido que exibe um alerta quando um título é passado com o mouse.
<h1 onMouseover="alert('Certifique-se de fazer suas compras hoje.');">O mundo acaba amanhã</h1>
Quando o usuário passa o mouse sobre a cabeça, um alerta é exibido.

No exemplo acima, você pode preferir chamar uma função que exiba o alerta em vez de codificar o alerta embutido.
Aqui está uma alternativa JavaScript para a mudança de cor CSS preferida ao passar o mouse.
<a href="index.html" onMouseover="this.style.color='green';"> Página inicial</a>
Quando o usuário passa o mouse sobre o link, ele fica verde.

Neste ponto, não se preocupe com a ideia geral por trás de this.style.color no
151
exemplo. Por enquanto, apenas memorize a sequência para poder repeti-la nos exercícios.
No próximo exemplo, o parágrafo se expande para incluir mais informações quando o usuário
paira sobre ele.
<p id="loris" onMouseover="expand();">Slow Loris: Passe o mouse para mais informações</p>
Neste ponto, não se preocupe agora sobre como a função expand aumenta o parágrafo. Você
aprenderá sobre isso mais tarde.
No exemplo com que começamos, as imagens de antes e depois do modelo, o manipulador de eventos
onMouseover substitui a imagem "antes" pela imagem "depois" quando o usuário passa o mouse sobre a
imagem. Normalmente, você gostaria que a imagem voltasse ao original quando o usuário afastasse o mouse
da imagem. Então você combinaria o manipulador de eventos onMouseover com o manipulador de eventos
onMouseout .
<img src="before-pic.jpg" onMouseover="src='after-pic.jpg'" onMouseout="src='before-

pic.jpg'">
152

153
48
Eventos: campos
Digamos que você tenha um campo de texto para o endereço de e-mail do usuário. Quando o usuário clica no
campo para digitar sua entrada, o campo fica amarelo.
Esta é a marcação que faz isso acontecer.
E-mail:<br>
<input type="text" size="30" onFocus="this.style.backgroundColor='yellow';">
Mais uma vez, estou mostrando a você a maneira inline não recomendada de lidar com um evento, usando-
a como um trampolim para aprender a manipulação de eventos mais profissional mais adiante no livro. Novamente,
não estou explicando this.style.backgroundColor. Apenas memorize a sequência para usar nos exercícios.
A palavra-chave aqui é onFocus. Ele diz ao JavaScript para fazer algo quando o usuário clica no campo.
A sintaxe é a mesma de outros manipuladores de eventos que você já aprendeu a codificar: a

palavra-chave, seguida por um sinal de igual, seguido por JavaScript ou HTML entre aspas.
Depois que o usuário inserir seu endereço de e-mail — ou não — e clicar fora do campo ou pressionar a tecla
Tab para ir para outro campo — ou seja, quando esse campo não tiver mais o foco — você deseja que ele volte
para um fundo branco. Você faz isso com a palavra-chave onBlur , que é o oposto de onFocus.
Essa marcação lida com os eventos onFocus e onBlur .
E-mail:<br>
<input type="text" size="30" onFocus="this.style.backgroundColor='yellow';" onBlur="this.style.backgroundColor='white';">
Quando o usuário clica no campo, ele fica amarelo. Quando ela clica fora do campo, ele volta a ficar branco.
Uma abordagem um pouco mais profissional seria chamar funções que realizam as mesmas coisas.
E-mail:<br>
<input type="text" size="30" onFocus="makeFieldYellow();" onBlur="makeFieldWhite();">
154

155
49
Lendo valores de campo
Suponha que você tenha incluído um campo de e-mail em um formulário e o tenha tornado um campo obrigatório.
O formulário tem um botão de envio no qual o usuário clica para enviar as informações inseridas no formulário.
Esta é a marcação que cria o formulário. Eu simplifiquei, omitindo qualquer ação de formulário e
outros atributos, incluindo quebras de linha, que não têm relação com o que você está aprendendo aqui.
<formulário>
E-mail:
<input type="text"> <input
type="submit" value="Submit"> </form>
Agora, em nossa marcação de formulário simplificada, temos esses três elementos:
1. O texto "E-mail"
2. O campo de texto para o endereço de e-mail do
usuário 3. O botão enviar
Vou dar um id ao campo de email.
<formulário>
E-mail:
<input type="text" id="email"> <input
Em seguida, adicionarei um manipulador de eventos, usando a palavra-chave onSubmit.
<form onSubmit="checkAddress('email');">
E-mail:
<input type="text" id="email"> <input
Agora, quando o usuário clica no botão enviar , a função checkAddress é executada. Observe que, embora a ação
seja um clique no botão de envio , o manipulador de eventos onSubmit está na tag do formulário , não na tag do botão
de envio . Isso porque o envio é um evento que se aplica a todo o formulário, não ao botão de envio .
Aqui é onde as coisas ficam interessantes. Quando o formulário é enviado, a função checkAddress verifica se o
usuário digitou algo no campo de email. Caso contrário, a função exibe um alerta lembrando ao usuário que o endereço
de e-mail é necessário.
Para fazer isso, a função precisa de uma maneira de ler o que está no campo de email. Isto é
156
onde entra o id que adicionei ao campo. Aqui está o código da função.
1 function checkAddress(fieldId) { 2 if
(document.getElementById(fieldId).value === "") { 3
alert("Endereço de e-mail obrigatório."); }
4
5}
Se não houver valor no campo de email, um alerta será exibido informando ao usuário que um endereço de
email é necessário.
Esta é a sequência que você precisa memorizar:
1. A palavra-chave document, seguida por... 2. um

ponto, seguido por... 3. a palavra-chave
getElementById, seguida por... 4. o parâmetro, entre
parênteses, recebido do código de chamada, fieldId, seguido por ... 5. outro ponto, seguido por... 6. o
valor da palavra-chave
Observe que getElementById deve estar em camelCase estrito. Se você fizer o que vem naturalmente
e escreva getElementByID, com um cap "D", não funcionará.
Alguns codificadores preferem colocar o valor encontrado no campo em uma variável, como esta.
1 função checkAddress(fieldId) { 2 var val =

document.getElementById(fieldId).value; 3 if val === "") { alert("Endereço de e-mail
obrigatório."); }
4
5
6}
157

158
50
Configurando valores de campo
O usuário digitou seu CEP em um campo de formulário. Você quer salvá-la do problema de
entrando na cidade e no estado. Então, quando ela clicar fora do campo, você preencherá o campo da cidade para ela.
Deixe-me mostrar-lhe como fazer isso. Para manter as coisas simples, vamos fingir que existem apenas três
CEPs nos EUA Também vamos fingir que o usuário irá inserir infalivelmente um desses códigos.
Não verificaremos erros. E para este exemplo, o código JavaScript preencherá apenas a cidade
campo, não o estado. Aqui está a marcação relevante para o formulário. (Estou omitindo uma ação de formulário, um
botão enviar e tudo o mais que não for relevante para este capítulo.)
<formulário>
CEP:<br>
<input type="text" id="zip" onBlur="fillCity();"><br>
Cidade:<br>
<input type="text" id="city">
</form>
Quando o usuário clica fora do campo ZIP, o evento onBlur aciona o fillCity
função. Este é o código.
1 função fillCidade() {
2 var nomedacidade;
3 var zipEntered = document.getElementById("zip").value;
4 switch (zipEnter) {
5 caso "60608":
6 nomedacidade = "Chicago";
7 parar;
8 caso "68114":
9 nomedacidade = "Omaha";
10 parar;
11 caso "53212":
12 nomedacidade = "Milwaukee";
13 }
14 document.getElementById("cidade").valor = nomedacidade;
15}
Este exemplo mostra que você pode não apenas ler um valor em um campo com
document.getElementById..., mas também pode "escrever" um valor em um campo.
Neste caso, a função atribui o valor encontrado no campo ZIP a uma variável. Em seguida, usando
uma instrução switch , ele corresponde ao ZIP a um nome de cidade e atribui esse nome a um segundo
variável. Então, usando a variável, ele coloca o nome da cidade no campo cidade.
159

160
51
Lendo e configurando o texto do parágrafo
Sua página da Web exibe inicialmente uma foto de um pequeno mamífero conhecido como lóris lento, junto
com uma única frase: Os lóris lentos são um grupo de várias espécies de primatas estrepsirrinos que compõem o
gênero Nycticebus. Clique para mais.
Quando o usuário clica no link, o parágrafo se expande: Lóris lentos são

um grupo de várias espécies de primatas estrepsirrinos que compõem o gênero Nycticebus. Eles têm uma
cabeça redonda, focinho estreito, olhos grandes e uma variedade de padrões de coloração distintos que
dependem da espécie. As mãos e os pés dos lóris lentos têm várias adaptações que lhes conferem um
aperto de pinça e permitem que eles agarrem galhos por longos períodos de tempo. Os lóris lentos têm
uma mordida tóxica, uma característica rara entre os mamíferos.
Esta é a marcação.
<p id="slowLoris"> Os lóris

lentos são um grupo de várias espécies de primatas strepsirrhine que compõem o gênero Nycticebus. <a href="javascript:void(0);"
onClick="expandLoris();"><em>Clique para mais.</em></a> </p>
Um id é atribuído ao parágrafo, que será usado pela função. Quando o usuário clica no link, uma
função, expandLoris, é chamada.
Esta é a função.
1 function expandLoris() { 2 var

expandParagraph = "Os lóris lentos são um grupo de várias espécies de primatas trepsirrinos que compõem o gênero Nycticebus. Eles têm cabeça redonda,
focinho estreito, olhos grandes e uma variedade de padrões de coloração distintos que são As mãos e os pés dos lóris lentos têm várias adaptações que
lhes conferem uma pegada tipo pinça e permitem-lhes agarrar ramos por longos períodos de tempo.
Lóris lentos têm uma mordida tóxica, uma característica rara entre os mamíferos."; 3
document.getElementById("slowLoris").innerHTML = expandiuParagraph; 4 }
A linha 2 atribui a versão longa do texto a uma variável. Em seguida, identificando o parágrafo por
seu id, a linha 3 substitui o conteúdo original, o innerHTML, pelo texto armazenado na variável.
Quase tudo, incluindo tags HTML, pode ser inserido na página da Web dessa maneira. Por
exemplo, você pode fazer essa lista aparecer na página dentro, digamos, de uma div com o id "lorisList".
1. Lóris lento
2. Lóris rápido
3. Lóris certo
Esta é a função que carrega a marcação de lista na div, que recebeu um id de "lorisList".
161
1 function placeAList () {2 var

listToPlace = "<ol> <li> Lóris lentos </li> <li> Lóris rápidos </li> <li> Lóris corretos </li> </ol>"; 3 document.getElementById ("LorisList") InnerHTML
= listToPlace; 4}
A linha 2 atribui todo o HTML da lista a uma variável. A linha 3 coloca o HTML no
div que recebeu o id "lorisList".
Você pode usar document.getElementById(element id).innerHTML para ler e
"escrever" o conteúdo de um elemento. Por exemplo, esta função atribui o que estiver
no parágrafo, div ou outro elemento com o id "content" à variável whatsThere.
1 function peekAtContent() { 2 var
whatsThere = document.getElementById("conteúdo").innerHTML; 3}
A linha 2 lê todo o HTML dentro do elemento com um id de "content" e o atribui à variável

whatsThere. Se o elemento for, por exemplo, um parágrafo cujo conteúdo seja " <em>Hello,
Sailor!</em>" a variável whatsThere captura "<em>Hello, Sailor!</em>"
162

163
52
Manipulando imagens e texto
Sua página da Web exibe uma imagem de um blobfish. O blobfish é um animal fascinante, mas é tão
feio que alguns de seus usuários dizem "Eca". Então você lhes dá a opção de fazê-lo desaparecer.
Quando eles clicam na imagem, ela desaparece.
Você começa dando um id à imagem.
<img src="Blobfish.jpg" id="feio"...
Em seguida, você adiciona um manipulador de eventos.
<img src="blobfish.jpg" id="ugly" onClick="makeInvisible();">
Você tem uma classe CSS para invisibilidade.
.hidden {exibir:nenhum;}
A função chamada pelo manipulador de eventos dá à imagem uma classe de "oculto", então ela
desaparece.
1 function makeInvisible() { 2
document.getElementById("feio").className = "hidden"; 3}
Quando a função é chamada, ela atribui a classe "oculta" ao elemento com o id "feio".
A imagem desaparece.
Algumas coisas para manter em mente:
Este aprendido,
é document.getElementById(theElementId).value
apenas variação de coisas
uma
(paravocê
campos
tem de já
formulário) e
document.getElementById(theElementId).innerHTML (para parágrafos, divs e outros elementos HTML).
É className, em camelCase, não class.

Atribuir uma classe a um elemento desta forma substitui quaisquer classes que o elemento tenha sido
atribuído na marcação estática.
Se você quiser adicionar uma classe a um elemento, preservando suas classes existentes, você pode
fazê-lo. Por exemplo, suponha que você tenha um parágrafo com uma classe que o estilize em Verdana,
tamanho 1 em. Quando o usuário passa o mouse sobre ele, você quer dobrar seu tamanho para 2 cm. Mas
você não quer perder o estilo Verdana de sua classe original. Em vez de substituir a classe que a estiliza em
Verdana, você deseja manter essa classe e adicionar a classe que aumenta a fonte. Digamos que o elemento tenha
164
"p1". Esta é a função.
1 function makeBig() { 2
document.getElementById("p1").className += 3 } " grande";
Comparado com o código que substitui todas as classes existentes por uma nova, este código
tem duas pequenas diferenças.
É += em vez de apenas =.
É necessário um espaço antes do nome da classe.
165

166
53
Trocando imagens
No Capítulo 47 você aprendeu como substituir uma imagem por outra quando o usuário passa o mouse sobre a
imagem. Quando a página é exibida pela primeira vez, uma imagem "antes" é o que o usuário vê. Quando o usuário passa o
mouse sobre a imagem, ela é substituída por uma imagem "depois".
Você aprendeu como fazer isso codificando um manipulador de eventos embutido que se parece com isso.
<img src="before-pic.jpg" onMouseover="src='after-pic.jpg'">
Outra maneira de fazer isso é chamar uma função que faz a troca. Esta é a marcação:
<img src="before-pic.jpg" id="before" onMouseover="swapPic();">
Este é o código da função.
1 function swapPic() { 2
document.getElementById("antes").src = "after-pic.jpg"; 3}
Mas por que não fazer da função uma rotina de uso geral que pode trocar qualquer imagem por qualquer outra imagem?
Para que isso funcione, a marcação deve passar o id e o nome da imagem de substituição para a função como argumentos.
<img src="before-pic.jpg" id="before" onMouseover="swapPic(id,'after-pic.jpg');">
A função aceita esses argumentos como seus parâmetros e os usa para trocar as imagens.
1 function swapPic(eId, newPic) { 2

document.getElementById(eId).src = newPic; 3}
167

168
54
Trocando imagens e configurando classes
Você aprendeu a ler as propriedades dos elementos HTML e também a alterar essas propriedades
usando várias instruções que incorporam as palavras mágicas document.getElementById.... Por
exemplo, a função a seguir remove a imagem original, com o id de "antes" e a substitui por uma segunda
imagem, "depois-pic.jpg".
1 function swapPic() { 2
document.getElementById("antes").src = "after-pic.jpg"; 3}
Uma maneira mais comum de codificar a função é dividi-la em duas etapas, primeiro atribuindo
document.getElementById("before") a uma variável. Então você combina essa variável com .src. Vamos
chamá-lo de abordagem detalhada.
1 function swapPic() { 2 var pic

= document.getElementById("antes"); 3 pic.src = "depois da foto.jpg"; 4}
Aqui está uma função que usa a abordagem mais detalhada para descobrir o endereço de um link
que tem o id "link1".
1 function getAddress() { 2 var link =

document.getElementById("link1"); 3 var endereço = link.href; 4}
A função sonda a propriedade href da tag de link. Por exemplo, se href é igual
"http://wikipedia.org" esse endereço termina na variável address.
Esta função altera a formatação de um formulário que possui o id "f12" alterando sua classe.
1 function ampliaForm() { 2 var from =

document.getElementById(" link1 ); 3 from.className = "jumbo"; 4 };
169

170
55
Definindo estilos
No Capítulo 52 você aprendeu como adicionar uma classe CSS a qualquer elemento para alterar seu estilo. Por exemplo,
esta função adiciona a classe "big" a um elemento. Se, por exemplo, a nova classe, "big", especificar um tamanho de fonte maior
para o elemento do que originalmente, o resultado é que o texto dentro do elemento fica maior.
document.getElementById("p1").className += 3 } " grande";
Há outra maneira de especificar propriedades de estilo.
document.getElementById("p1").style.fontSize = "2em"; 3}
Como no primeiro exemplo, a função altera o tamanho da fonte padrão de um elemento com o id "p1". Mas, ao contrário do
primeiro exemplo, ele não remove nenhum outro estilo atribuído ao elemento, sejam esses estilos especificados em css ou inline.
Exemplo: Se o título, parágrafo ou div tiver um tamanho inicial de 1em, a função dobra o tamanho de seu conteúdo. Se o
elemento tiver um estilo inicial de negrito itálico da Geórgia com bordas de 12 pixels, toda essa formatação será preservada. Apenas
o tamanho muda.
Esta declaração flutua uma imagem à esquerda.
document.getElementById("pic99").style.cssFloat = "esquerda";
Esta declaração torna um elemento invisível.
document.getElementById("div9").style.visibility = "hidden";
Esta declaração dá a um elemento margens esquerda e direita de 10 pix.
document.getElementById("mainPic").style.margin = "0 10px 0 10px;";
Você pode definir muitas propriedades de estilo dessa maneira. Às vezes, os termos para especificações de propriedade
não são óbvios, então é melhor verificar as regras de linguagem - é "float" ou "cssFloat"? - em vez de adivinhar.
Como de costume, você pode ler as propriedades e defini-las. No entanto, as regras não são
para a frente. Se você escrever...
var m = document.getElementById("mainPic").style.margin;
171
...ele dirá apenas as margens especificadas em linha, se houver. Se as margens forem especificadas
em css, você não as obterá. A instrução a seguir fornece todas as propriedades de estilo, especificadas em
css e inline, mas tem uma limitação. As versões do Internet Explorer anteriores à versão 9 não são
compatíveis.
var m = document.getComputedStyle("mainPic").margin;
172

173
56
Segmente todos os elementos pelo nome da tag
Suponha que você queira dar a seus usuários a opção de dobrar o tamanho do texto em todos os parágrafos
do documento. Para fazer isso, você pode dar a cada parágrafo um id. Quando o usuário clica no botão Double Text
Size , uma função percorre todos os ids de parágrafo e faz a alteração. A função pode aumentar o tamanho da fonte
atribuindo uma nova classe a cada parágrafo, com a classe especificando um tamanho de fonte maior, ou pode
atribuir a nova propriedade de estilo diretamente, assim:
getElementById(o id).style.fontSize = "2em";
Uma maneira mais fácil de realizar a mesma coisa é fazer com que a função diga: "Encontre todos os
parágrafos no documento e aumentar seu tamanho."
Esta instrução encontra todos os parágrafos e os atribui a uma variável:
var par = document.getElementsByTagName("p");
A variável, par, agora contém uma coleção tipo array de todos os parágrafos do documento. Suponha, para
simplificar, que o corpo do documento inclua apenas três parágrafos.
<p>Esta cama é muito pequena.</p>

<p>Esta cama é muito grande.</p> <p>Esta
cama é perfeita.</p>
par[0] é o primeiro parágrafo. par[1] é o segundo parágrafo. par[2] é o terceiro parágrafo. par.length é 3, o
número de itens na coleção.
var textInMiddleParagraph = par [1] .innerHTML;
...a variável textInMiddleParagraph é atribuída "Esta cama é muito grande."

par[1].innerHTML = "Este SUV é muito grande.";
...o texto do parágrafo muda para "Este SUV é muito grande."

Aqui está um loop que atribui uma família de fontes a todos os parágrafos.
1 for (var i = 0; i < par.length; i++) { 2 par[i].style.fontFamily =

"Verdana, Genebra, sem serifa"; 3}
174
Essa declaração faz uma coleta de todas as imagens do documento e a atribui ao

fotos variáveis .
var fotos = document.getElementsByTagName("img");
Essa instrução faz uma coleção de todas as divs no documento e a atribui ao

divs variáveis .
var divs = document.getElementsByTagName("div");
Essa instrução faz uma coleção de todas as listas não ordenadas no documento e a atribui à
variável ulists.
var ulistas = document.getElementsByTagName("ul");
175

176
57
Segmente alguns elementos pelo nome da tag
No último capítulo você aprendeu como fazer uma coleção tipo array de todos os elementos em um
documento que tem um nome de tag específico. Por exemplo, essa instrução faz uma coleção de todos os
parágrafos do documento e atribui a coleção à variável pars.
var pars = document.getElementsByTagName("p");
Você também aprendeu a ler ou definir as propriedades de qualquer um dos elementos em uma coleção
de elementos usando a notação tipo array — um número entre colchetes. Por exemplo, esta instrução "lê" o
conteúdo do segundo elemento na coleção pars e atribui a string à variável textInMiddleParagraph.
var textInMiddleParagraph = pars[1].innerHTML;
Mas suponha que você não queira uma coleção de todos os parágrafos do documento. Suponha que
você queira apenas uma coleção de todos os parágrafos dentro de uma div específica. Sem problemas.
Digamos que o id da div seja "regras". Aqui está o código.
1 var e = document.getElementByID("regras"); 2 var parágrafos =

e.getElementsByTagName("p");
A linha 1 atribui o div com o id "rules" à variável e.

A linha 2 faz uma coleção de todos os parágrafos na div e atribui a coleção aos parágrafos variáveis.
Uma vez que o id do div de destino tenha sido atribuído a uma variável, por exemplo e, você pode
monte uma coleção de todos os parágrafos dentro dessa div. Em vez de escrever...
document.getElementsByTagName("p");
...o que faria uma coleção de todos os parágrafos do documento, você escreve...
e.getElementsByTagName("p");
...que faz uma coleção de todos os parágrafos da div.

Suponha que você tenha uma mesa com fundo branco. Quando o usuário clica em um botão, o
as células ficam rosadas. Aqui está o código.
1 var t = document.getElementById("table9"); 2 células var =

t.getElementsByTagName("td"); 3 for (var i = 0; i < cells.length; i++)
{ 4 cells[i].style.backgroundColor = "pink"; 5}
177
Aqui está o detalhamento linha por linha.

1. Direciona a tabela por seu id 2.
Monta uma coleção de todos os elementos na tabela com uma tag td 3-5. Percorre
todos eles para alterar a cor de fundo
178

179
58
O DOM
Nos capítulos anteriores, você aprendeu duas maneiras diferentes de direcionar os componentes de
sua página da Web para poder lê-los ou configurá-los. Você aprendeu a getElementById e aprendeu a
getElementsByTagName. Geralmente, esses são os melhores métodos para direcionar as coisas, mas têm
limitações. O primeiro, getElementById, fornece acesso apenas aos componentes que receberam um id. O
segundo, getElementsByTagName, é bom para mudanças por atacado, mas é um pouco complicado para
um bom trabalho cirúrgico. Ambas as abordagens podem mudar as coisas em sua página da web, mas
nenhuma delas é capaz de lidar com todas as coisas na página, criar coisas novas, mover coisas existentes
ou excluí-las.
Felizmente, essas duas abordagens são apenas dois dos muitos métodos para trabalhar com o
Document Object Model, o DOM. O DOM é um organograma, criado automaticamente pelo navegador
quando sua página da web é carregada, para toda a página da web. Todas as coisas em sua página da web
- as tags, os blocos de texto, as imagens, os links, as tabelas, os atributos de estilo e muito mais - têm pontos
neste organograma. Isso significa que seu código JavaScript pode colocar as mãos em qualquer coisa em
sua página da web, qualquer coisa, apenas dizendo onde essa coisa está no gráfico. Além disso, seu
JavaScript pode adicionar coisas, mover coisas ou excluir coisas manipulando o gráfico. Se você quisesse
(você não faria), você poderia criar quase uma página da web inteira do zero usando os métodos DOM do
JavaScript.
Aqui está uma página da web simplificada. Eu recuei os diferentes níveis na hierarquia. Os três níveis
superiores do DOM são sempre os mesmos para uma página web padrão. O documento é o primeiro nível.
Sob o documento está o segundo nível, o html. E sob o html estão os terceiros níveis co-iguais, a cabeça e
o corpo. Sob cada um destes são mais níveis.
1º nível: documento
2º nível: <html>
3º nível: <cabeça>
4º nível: <título>
5º nível: Documento simples </
title>
</head>
3º nível <body>
4º nível <p>
5º nível Não há muito nisso.
</p>
</body> </
html>
Aqui está a mesma coisa, mostrada como um organograma. Observe que este é um gráfico idealizado,
limpo de artefatos indesejados que a maioria dos navegadores insere no DOM. Mostrarei como limpar esses
artefatos em capítulos posteriores.
180
Como você pode ver, tudo na página da web está incluído, até mesmo o texto do título e o
texto do parágrafo. Vamos torná-lo um pouco mais complicado adicionando um div e um segundo parágrafo.
Aqui está em formato HTML.
2º nível: <html>
5º nível: Documento simples
</title>
</head>
3º nível <corpo>
4º nível <div>
5º nível <p>
6º nível Não há muito para isso.
</p>
5º nível <p>
6º nível Nem a isso.
</p>
</div>
</body>
</html>
E no organograma (menos quaisquer artefatos de lixo) ...
181
Em um organograma de uma empresa, cada caixa representa uma pessoa. No

organograma DOM, cada caixa representa um nó. A página HTML representada acima, em
seu formulário DOM limpo, tem 11 nós: o nó de documento, o nó html, os nós de cabeçalho e
corpo, o nó de título, o nó div, dois nós de parágrafo e três nós de texto, um para o título e um
para cada um dos dois parágrafos.
Neste gráfico específico, existem três tipos de nós: documento, elemento e texto. O nó do
documento é o nível superior. Os nós de elemento são <html>, <head>, <body>, <title>,
<div> e <p>. Os nós de texto são as strings que compõem o título e os dois parágrafos.
182

183
59
O DOM:
Pais e filhos
Você pode nomear o segundo filho do 44º presidente dos Estados Unidos? Isso seria
Sasha. E o pai (homem) do 43º Presidente? Isso mesmo, Jorge.
Bem-vindo à maneira mais fundamental de designar nós do Document Object Model
(DOM). Você pode designar qualquer nó do DOM dizendo que o nó é o x-ésimo filho de um pai
específico. Você também pode designar um nó dizendo que é o pai de qualquer filho.
Dê uma olhada no documento html simplificado do último capítulo.
2º nível: <html>
5º nível: Documento simples </
title> </head> <body>
<div>
3º nível
4º nível
5º nível <p>
</p>
5º nível <p>
6º nível Nem para isso.
</p>
</div> </
body> </html>
Exceto para o nó do documento, cada nó é colocado dentro de outro nó. Os nós <head> e
<body> são colocados dentro do nó <html> . O nó <div> é colocado dentro do nó <body> .
Dois nós <p> são incluídos no nó <div> . E um nó de texto é colocado dentro de cada um dos
nós <p> .
Quando um nó está dentro de outro nó, dizemos que o nó fechado é filho do nó que o
envolve. Assim, por exemplo, o nó <div> é filho do nó <body> .
Por outro lado, o nó <body> é o pai do nó <div> . Aqui está o organograma do capítulo anterior,
novamente limpo de artefatos de lixo, mostrando todos os pais e seus filhos.
184
Como você pode ver, <html> é o filho do documento...<head> e <body> são os filhos de
<html>...<div> é o filho de <body>...two <p >'s são filhos de <div>...cada nó de texto é filho de
um <p>. Por outro lado, o documento é o pai de <html>, <html> é o pai de <head> e <body>,
<head> é o pai de <title>, <title> é o pai de um nó de texto e em breve. Nós com o mesmo pai
são conhecidos como irmãos. Então, <head> e <body> são irmãos porque <html> é o pai de
ambos. Os dois <p> são irmãos porque <div> é o pai de ambos.
Começando na parte inferior do gráfico, o texto "Nem a isso". é filho de <p>, que é filho de
<div>, que é filho de <body>, que é filho de <html>, que é filho do documento.
Agora olhe para esta marcação.
<p>Isso é <em>importante</em>!</p>
Se você fez um gráfico para este parágrafo, você pode pensar que todo o texto é filho do nó
<p> . Mas lembre-se, todo nó que está envolvido por outro nó é filho do nó que o envolve. Como
o nó de texto "important" é delimitado pelo nó de elemento <em>, esse nó de texto específico é
filho de <em>, não de <p>. Os nós de texto "This is " e "!" assim como o nó elemento <em> são
irmãos, porque estão todos entre <p>. Eles são todos filhos de <p>.
185

187
60
O DOM:
Encontrar crianças
Como você aprendeu no capítulo anterior, o Document Object Model (DOM) é uma hierarquia de pais
e filhos. Tudo na página da web, excluindo o próprio documento, é filho de outra coisa. Então agora vamos
falar sobre como seu código JavaScript pode usar essa hierarquia de pais e filhos para ler ou alterar
praticamente qualquer coisa em uma página da web.
Vamos começar com os métodos que você já aprendeu para segmentar coisas na página da web.
Você se lembrará dos capítulos anteriores que você pode direcionar um elemento especificando seu id, se ele tiver
1.
var eField = document.getElementById("email");
A instrução acima tem como alvo o elemento com o id de "email".

Você também aprendeu como fazer uma coleção tipo array de todos os elementos de um tipo
particular dentro do documento...
var eField = document.getElementsByTagName("p");
Tendo feito uma coleção de parágrafos, você pode direcionar qualquer parágrafo dentro da coleção
para que você possa, por exemplo, ler seu conteúdo.
var conteúdo = p[2].innerHTML;
A instrução acima atribui a string de texto contida no terceiro parágrafo do documento ao conteúdo
da variável.
Uma alternativa para listar todos os elementos de um determinado tipo no documento é restringir o
foco abaixo do nível do documento, por exemplo, para um div e, em seguida, fazer uma coleção dentro
desse div.
1 var d = document.getElementById("div3"); 2 var p =

d.getElementsByTagName("p"); 3 var conteúdo = p[2].innerHTML;
No exemplo acima, você gera uma coleção não de todos os elementos de parágrafo no documento,
mas apenas dos elementos de parágrafo dentro do div que tem um id de "div3". Então você segmenta um
desses parágrafos.
Agora considere esta marcação.
<body>
<div id="cal">
<p>O sul da Califórnia está ensolarado.</p>
188
<p>O norte da Califórnia é chuvoso.</p>
<p>O leste da Califórnia é deserto.</p> </
div>
<div id="ny">
<p>NY urbana está lotada.</p> <p>NY
rural é esparsa.</p> </div>
</body>
Se você quisesse ler o conteúdo do último parágrafo na marcação, poderia escrever...
1 var p = document.getItemsByTagName("p"); 2 var conteúdo =

p[4].innerHTML;
A linha 1 faz uma coleção de todos os <p>s no documento e atribui a coleção ao

variável p. A linha 2 “lê” o texto contido no 5º parágrafo do documento.
Outra abordagem: você pode segmentar o mesmo parágrafo restringindo a coleção de
elementos para aqueles que estão apenas na segunda div.
1 var div = document.getItemById("novo"); 2 var p =

div.getItemsByTagName("p"); 3 var conteúdo = p[1].innerHTML;
Aqui está o desdobramento:
1. Atribui a div com o id "ny" à variável div 2. Faz uma

coleção de todos os <p>s na div e atribui a coleção à variável p 3. "Lê" o texto contido no 2º
parágrafo da div e a atribui à variável
conteúdo
Agora, mostrarei uma nova maneira de segmentar o parágrafo, usando o organograma do DOM.
1 var p = document.childNodes[0].childNodes[1].childNodes[1].childNodes[1]; 2 var conteúdo = p.innerHTML;
Vou destacar cada nível infantil e dizer para o que ele aponta.
1. document.childNodes[0].childNodes[1].childNodes[1].childNodes[1]; é o
primeiro filho do documento, <html>
segundo filho de <html>, <body>
segundo filho de <body>, <div> com o id "ny"
segundo filho de <div> com o id "ny", o segundo <p> dentro do div
189
Nota: O código acima assume que o navegador não incluiu nenhum artefato de lixo no DOM.
Discutirei isso no próximo capítulo.
À medida que descemos no organograma, cada pai é seguido por um ponto, que é seguido pela palavra-chave
childNodes, que é seguida por um número entre colchetes, como na notação de matriz. Como na notação de array, o
primeiro filho é o número 0.
Aqui está a marcação novamente. Os principais participantes do código acima são destacados.
<corpo>
<div id="cal">
<p>O sul da Califórnia é ensolarado.</p>
<p>O norte da Califórnia é chuvoso.</p>
<p>O leste da Califórnia é deserto.</p> </
div> <div id="ny"> <p >A NY urbana está
lotada.</p> <p>NY rural é esparsa.</p> </
div> </body>
No exemplo acima, mostrei como chegar ao nó de destino começando no nível do documento. Mas, na prática,
você normalmente começaria em um nível mais baixo. Por exemplo, você pode começar com a segunda div,
especificando seu id. Então você teria como alvo um de seus filhos.
1 var d = document.getElementById ("novo"); 2 var p =

d.childNodes [1]; 3 var conteúdo = p.innerHTML;
190

191
61
O DOM:
Artefatos de lixo e nodeType
É hora de falar sobre os artefatos de lixo do DOM, as coisas irritantes que eu tenho
referido nos três últimos capítulos. Vamos revisitar a página da Web simplificada que temos
usando como exemplo.
2º nível: <html>
</title>
</head>
3º nível <corpo>
4º nível <div>
5º nível <p>
</p>
5º nível <p>
</p>
</div>
</body>
</html>
Isto é como eu diagramado o DOM para a página.
192
Mas este diagrama é válido apenas para alguns navegadores. A maioria dos navegadores interpreta o
espaço em branco que é criado por alguns retornos de carro, tabulações e espaços usados para formatar o código
como nós de texto. Quando você olha para a marcação, você vê 3 nós de texto, os filhos do título
elemento e dos dois elementos de parágrafo.
2º nível: <html>
</title>
</head>
3º nível <corpo>
4º nível <div>
5º nível <p>
</p>
5º nível <p>
</p>
</div>
</body>
</html>
O Firefox vê essa marcação com 8 nós de texto adicionais que não são nada além de espaços em branco
criado por recuo.
193
Esses nós de texto extras criam um ruído que torna difícil para o código de leitura do DOM
encontrar o sinal. Em um navegador, o primeiro filho do nó do corpo pode ser um div. Em outro
navegador, o primeiro filho do corpo pode ser um nó de texto vazio.
Existem várias soluções. Como uma abordagem, a Mozilla Developer Network sugere uma
solução alternativa que é quase comicamente desesperada, mas resolve o problema sem nenhum
esforço extra do JavaScript. Você formata a marcação assim.
<html
><cabeça
><título
>Documento simples </
title ></head ><body ><div
><p
194
>Não há muito para isso.
</p
><p
>Nem a isso.
</p
></div ></
body ></
html>
Essa marcação tira proveito do fato de que quaisquer retornos de carro, tabulações e espaços incluídos
no < e no > de uma tag são ignorados pelo navegador. Para o navegador, <p> é o mesmo que <p>. E...
<
div
>
...é o mesmo que <div>.
Quando o espaço em branco está entre colchetes, o navegador não o conta como um nó de texto.
Portanto, se você "esconder" todos os retornos de carro, tabulações e espaços dentro dos colchetes, como o
código acima faz, não há lixo no DOM. Qualquer ruído que impeça seu JavaScript de ler o sinal é removido.
Você também pode limpar o lixo no DOM usando um programa minificador como o de http://
www.willpeavy.com/minifier/. Obviamente, você desejará preservar a versão original e não minificada do arquivo
para poder revisar a página no futuro sem enlouquecer.
<html><head><title>Documento simples</title></head><body><div><p>Não há muito nisso.</p><p>Nem nisso. </p></div></body></html>
Outra abordagem é formatar seu HTML de forma convencional e deixar seu JavaScript farejar os nós de
lixo. JavaScript pode verificar um nó para ver de que tipo ele é — elemento, texto, comentário e assim por
diante. Por exemplo, esta instrução verifica o tipo de nó de um nó de destino e o atribui à variável nType.
var nType = targetNode.nodeType;
Na instrução acima, JavaScript atribui um número que representa o tipo de nó à variável nType. Se o nó
for um elemento como <div> ou <p>, o número será 1. Se for um nó de texto, o número será 3.
Suponha que você queira substituir o conteúdo de texto do segundo parágrafo em uma div específica pela
string "All his men". Aqui está a marcação, com o texto que vamos alterar destacado.
<div id="humpty"> <p>Todos

os cavalos do rei.</p> <p>Toda a tripulação do
cara.</p> <p>Todos os ortopedistas da cidade.</
p>
</div>
Este é o código.
1 var d = document.getElementById("humpty");
195
2 var pContador = 0;
3 for (var i = 0; i < d.childNodes.length; i++) {
4 if (d.childNodes [i] .nodeType === 1) {
5 pContador++;
6 }
7 if (pContador === 2) {
8 d.childNodes[i].innerHTML = "Todos os seus homens.";
9 parar;
10 }
11}

1 Atribui o div à variável d
2 Conta o número de parágrafos
3 Percorre os filhos da div procurando o próximo nó do elemento, ou seja, Tipo 1,
que supomos ser um parágrafo
4-6 Adiciona 1 ao contador. Estamos procurando o segundo parágrafo.
7-9 Quando o contador chega a 2, chegamos ao parágrafo desejado. Altere o texto
Claro, se você sabe que pode querer que seu JavaScript altere esse segundo parágrafo,
seria muito mais fácil atribuir um id e ir direto para ele, assim.
document.getElementById("p2").innerHTML = "Todos os seus homens.";
Você pode ver por que o método getElementId é mais popular entre os codificadores do que rastrear o
Hierarquia DOM. Mas há algumas coisas que você não pode fazer sem trabalhar o seu caminho através do
relacionamentos pai-filho do DOM, como você aprenderá nos capítulos subsequentes.
196

197
62
O DOM:
Mais maneiras de segmentar elementos
Até agora, você aprendeu a usar a hierarquia pai-filho do DOM para direcionar um nó filho
de um nó pai especificando sua ordem em uma coleção de filhos do tipo array—childNodes[0],
childNodes[1], childNodes[2] , e assim por diante. Mas há outras maneiras de usar a hierarquia
para segmentação. Para começar, em vez de escrever childNodes[0], você pode escrever
firstChild. E em vez de escrever, por exemplo, childNodes[9], para direcionar o 10º filho em uma
coleção de 10 filhos de filhos, você pode escrever lastChild.
var targetNode = parentNode.childNodes [0];
...é o mesmo que...
var targetNode = parentNode.firstChild;
E se houver, por exemplo, 3 nós filhos...
var targetNode = parentNode.childNodes [2];
var targetNode = parentNode.lastChild;
Você também pode trabalhar para trás, visando o nó pai de qualquer nó filho. Vamos dizer que você
tem essa marcação. Usando o DOM, como você encontra o pai da div destacada?
<div id="div1">
<div id="div2">
<p> Chicago </p>
<p> Kansas City </p> <p>
St. Luís </p> </div> </div>
Você quer saber o pai do div com o id "div2". O código a seguir atribui o
pai da div "div2" para a variável pNode.
1 var kidNode = document.getElementById ("div2"); 2 var pNode =

kidNode.parentNode;
Você pode usar nextSibling e previousSibling para direcionar o próximo filho e o filho anterior na coleção
de filhos de um elemento. No código a seguir, a primeira instrução tem como alvo um div com o id "div1". A
segunda instrução tem como alvo o próximo nó que tem
198
o mesmo pai que o id "div1".
1 var firstEl = document.getElementById("div1"); 2 segundoEl =

primeiroEl.nextIrmão;
Se não houver nextSibling ou previousSibling, você obtém null. No código a seguir, a variável não
existenteEl tem um valor nulo, porque o JavaScript descobre que não há nenhum nó anterior que tenha o
mesmo pai que firstEl.
1 var firstEl = document.getElementById("div1"); 2 var inexistenteEl =

firstEl.previousIrmão;
Contar irmãos pode ser complicado, porque, como você sabe, alguns navegadores tratam os espaços
em branco criados pela formatação HTML como nós de texto, mesmo que estejam vazios e sem significado.
No exemplo HTML acima, com duas divs e três parágrafos, você pode pensar que o próximo irmão do
primeiro parágrafo é o segundo parágrafo. Mas, na verdade, em alguns navegadores, o próximo irmão do
primeiro parágrafo é um nó de texto vazio. O próximo irmão desse nó é o segundo parágrafo.
O que isso significa é que, para segmentar um nó com nextSibling ou previousSibling, você precisa
formatar sua marcação HTML defensivamente, como mostrei no capítulo anterior, ou testar cada nó para ter
certeza de que é o tipo que você está procurando pois, como também mostrei no último capítulo.
Mais uma vez, direi que muitas vezes é melhor atribuir um id a qualquer nó que você queira "ler" ou
alterar. Em seguida, você pode direcionar o nó mais diretamente, usando
document.getElementById.
199

200
63
O DOM:
Obtendo o nome de um alvo
Em um capítulo anterior, você aprendeu como obter o tipo de nó de um nó com uma instrução como esta.
var nType = targetNode.nodeType;
No exemplo acima, se o nó for um elemento, a variável nType receberá o

número 1. Se o nó for texto, será atribuído o número 3.
Você pode obter informações adicionais sobre um nó usando nodeName. Na sequência
Por exemplo, o nome do nó de destino é atribuído à variável nName.
1 var pai = document.getElementById("div1"); 2 var alvo =

parent.firstChild; 3 nName = target.nodeName;
As linhas 1 e 2 visam o primeiro filho de um elemento com o id "div1". A linha 3 atribui o

nome do nó do destino para a variável nName.
No exemplo acima, se o nó for um elemento, a variável nName receberá uma string, como P ou DIV, que
corresponde aos caracteres da tag que estão entre colchetes. Em HTML, o nome geralmente é fornecido em
letras maiúsculas, mesmo que a marcação esteja em minúsculas.
Nome do nó
Marcar <p> ou P
<P> <div> ou <DIV> DIV
<span> ou <SPAN> SPAN <img>

ou <IMG> IMG <a> ou <A>
UMA
<em> ou <EM> EM
<tabela> ou <TABELA> TABELA
<li> ou <LI> LI
Por outro lado, se o nó for um nó de texto, o nome do nó será sempre #text—em letras minúsculas.
Se for um nó de texto, você pode descobrir seu valor - ou seja, seu conteúdo - dessa maneira.
1 var pai = document.getElementById("div1"); 2 var alvo =

parent.firstChild;
201
3 var nTextContent = target.nodeValue;
As linhas 1 e 2 visam o primeiro filho de um elemento com o id "div1". A linha 3 atribui o

valor do nó para a variável nTextContent.
Então, se esta é a marcação, com o primeiro filho do elemento H2 um nó com o nome "#texto"...
<h2>Não <em>não</em> acerte!</h2>
...o valor do nó é "Do ".

Um nó de elemento como P ou IMG tem um nome, mas nenhum valor. Se você tentar atribuir um elemento
valor do nó para uma variável, a variável será atribuída nula.
No exemplo acima, <em> é um elemento, o que significa que seu valor é nulo.
É possível confundir o valor do nó de um nó de texto com a propriedade innerHTML . Existem duas diferenças.
innerHTML é uma propriedade do nó do elemento, <h2>, no exemplo acima. O valor do nó é uma propriedade
do próprio nó de texto, não do elemento pai. innerHTML inclui todos os descendentes do elemento, incluindo
quaisquer nós de elementos internos como <em>, bem como nós de texto. O valor do nó inclui apenas os
caracteres que compõem o nó de texto único.
No código a seguir, o innerHTML do elemento H2 é destacado.
No código a seguir, o valor do nó do primeiro filho do elemento H2 é destacado.
Como há situações em que nodeName obtém, por exemplo, um "p" em vez de um "P" ou um "href" em vez de
um "HREF", é uma boa prática padronizar o caso ao testar nomes, assim.
if (targetNode.nodeName.toLowerCase === "img") {
Se o nome do nó estava originalmente em letras maiúsculas, o código o altera para letras minúsculas. Se fosse
minúsculas para começar, nenhum dano feito.
Se você estiver verificando um nome de nó para ver se um nó é um nó de texto, convertendo para letras minúsculas
não é necessário, porque o nome de um nó de texto é sempre "#texto", nunca "#TEXTO".
202

203
64
O DOM:
Elementos de contagem
Em um capítulo anterior, você aprendeu como fazer uma coleção do tipo array de todos os
elementos que compartilham um nome de tag específico. Por exemplo, o código a seguir faz uma
coleção de todos os elementos <li> e atribui a coleção à variável liElements.
var liElements = getElementsByTagName("li");
Depois de ter a coleção de elementos, você pode descobrir quantos deles existem. No código a
seguir, o número de elementos <li> na coleção representada por liElements é atribuído à variável
howManyLi.
var howManyLi = liElements.length;
Então você pode, por exemplo, percorrer a coleção procurando por elementos <li> que não tenham
texto e pode inserir algum texto de espaço reservado.
1 for (var i = 0; i < howManyLi; i++) { 2 if (liElements[i].innerHTML

=== "") {
3 liElements[i].innerHTML = "em breve";
4 }
5}
Eu orientei você por isso para apresentá-lo a um movimento análogo que você pode fazer usando
a hierarquia DOM em vez de nomes de tags. Você pode fazer uma coleção de todos os nós filhos de um
nó de destino.
1 var parentNode = document.getElementById ("d1"); 2 var nodeList =

parentNode.childNodes;
A linha 1 atribui um elemento com o id "d1" à variável parentNode. A linha 2 atribui um

coleção dos nós filhos de parentNode para nodeList.
Você pode obter o número de itens na coleção. A instrução a seguir atribui o número de itens na
coleção de nós à variável howManyKids.
var howManyKids = nodeList.length;
Em seguida, você pode segmentar qualquer item da coleção. O código a seguir conta o número de
imagens dentro do div.
1 var númeroFotos = 0; 2 for (var

i = 0; i < quantos filhos; i++) {
204
3 if (nodelist[i].nodeName.toLowerCase() === "img") {
4 numberPics++;
5 }
6}

1 Declara o contador de imagens e o define em 0
2 Faz um loop em todos os filhos da div
3-5 Se o nome do nó, convertido para letras minúsculas, for "img", incrementa o contador de imagens
205

206
65
O DOM:
Atributos
Dê uma olhada neste pouco de marcação.
<a href="http://www.amazon.com">Loja</a>
Você aprendeu que na marcação acima o nó de texto "Shop" é o primeiro (e único) filho do nó do elemento <a>.
Mas o que é href="http://www.amazon.com"? É definitivamente um nó do DOM, e você poderia dizer que é subsidiário de
<a>. Mas não é filho de <a>. É um atributo de <a>.
Sempre que você vê este formulário...
<element algo="algo entre aspas">
...você está olhando para um elemento com um atributo. O sinal de igual e as aspas são a delação. A palavra do
lado esquerdo do sinal de igual é o nome do atributo. A palavra do lado direito do sinal de igual é o valor do atributo.
Aqui estão mais exemplos. Os valores de atributo são destacados.
<div id="p1"> <p

class="special"> <img
src="images/slow-loris.png"> <span style="font-
size:24px;">
Um elemento pode ter qualquer número de atributos. Nesta tag, o elemento img possui 4 atributos.
Eu destaquei seus valores.
<img src="dan.gif" alt="E" height="42" width="42">
Você pode descobrir se um elemento tem um atributo específico com hasAttribute.
1 var alvo = document.getElementById("p1"); 2 var hasClass =

target.hasAttribute("class");
A linha 1 atribui o elemento a uma variável, destino. A linha 2 verifica se o elemento tem um atributo chamado
"class". Se isso acontecer, a variável hasClass é atribuída como true. Caso contrário, é atribuído como falso.
Você pode ler o valor de um atributo com getAttribute.
1 var alvo = document.getElementById("div1"); 2 var attVal =

target.getAttribute("class");
207
A linha 1 atribui o elemento a uma variável, destino. A linha 2 lê o valor do atributo e o atribui à variável
attVal.
Você pode definir o valor de um atributo com setAttribute.
1 var alvo = document.getElementById("div1"); 2 target.setAttribute("class,

"especial");
A linha 1 atribui o elemento a uma variável, destino. A linha 2 fornece um atributo "class" (a primeira
especificação dentro dos parênteses) com um valor "special" (a segunda especificação dentro dos parênteses).
Com efeito, a marcação se torna:
<div id="div1" class="especial">
208

209
66
O DOM:
Nomes e valores de atributos
Nos capítulos anteriores você aprendeu como fazer uma coleção de elementos que compartilham o mesmo
nome de tag, com uma declaração como esta...
var lista = document.getElementsByTagName("p");
...e como fazer uma coleção de todos os filhos de um elemento, com uma declaração como essa...
var lista = document.getElementById ("p1"). childNodes;
Da mesma forma, você pode fazer uma coleção de todos os atributos de um elemento, com uma declaração
como esta...
var lista = document.getElementById("p1").attributes;
Com a coleção atribuída a uma variável, você pode obter o número de itens na coleção...
var numOfItems = list.length;
Como alternativa, você pode compactar essas tarefas em uma única instrução, sem atribuir o destino a uma
variável primeiro.
var numOfItems = document.getItemById("p1").attributes.length;
Usando notação tipo array, você pode descobrir o nome de qualquer atributo na coleção. A instrução a seguir
tem como alvo o terceiro item na coleção de atributos e atribui seu nome à variável nName.
var nName = list[2].nodeName;
Por exemplo, se a marcação for...
<p id="p1" class="c1" onMouseover="chgColor();">
...a variável nName é atribuída "onMouseover".

Você também pode obter o valor do atributo...
var nValue = lista [2] .nodeValue;
210
Na marcação de exemplo acima, a variável nValue é atribuída a "chgColor();".
211

212
67
O DOM:
Adicionando nós
Usando a hierarquia DOM, você pode adicionar elementos, atributos e nós de texto em qualquer lugar nas
seções de cabeçalho ou corpo de um documento. Neste capítulo, você aprenderá a criar um nó de parágrafo, atribuir-
lhe um atributo e preenchê-lo com conteúdo de texto. No próximo capítulo, você aprenderá a inserir o parágrafo,
juntamente com seus atributos e conteúdo de texto, na página.
O primeiro passo é criar o nó de parágrafo.
var nodeToAdd = document.createElement("p");
O exemplo cria um elemento de parágrafo. Para criar um elemento div, você deve colocar "div" entre parênteses.
Para criar um elemento de imagem, você deve colocar "img" lá. Para criar um link, você deve colocar "a" lá. E assim
por diante.
Aqui está uma declaração que cria um elemento de imagem.
var imgNodeToAdd = document.createElement("img");
No último capítulo, você aprendeu como adicionar um atributo a um elemento que já faz parte da página da web,
usando setAttribute. Você pode fazer a mesma coisa com um elemento que você criou, mas ainda não colocou no
corpo do documento.
nodeToAdd.setAttribute("class", "regular");
O código acima dá ao novo elemento de parágrafo que você acabou de criar a classe "regular".
Se você quisesse, poderia adicionar, usando instruções separadas para cada um, mais atributos ao elemento de
parágrafo – por exemplo, um span, um estilo, até mesmo um id.
Se o elemento fosse um elemento <img> , você poderia adicionar uma borda ou um alt como atributo. Se fosse
um elemento <a> , você poderia adicionar o endereço da web.
Essa instrução adiciona um atributo de borda a um elemento de imagem.
imgNodeToAdd.setAttribute("borda", "1");
O código acima dá à imagem uma borda de 1 pixel.

Lembre-se, neste momento, estamos apenas criando nós. O novo nó de atributo foi
conectado ao novo nó do elemento, mas ainda não adicionamos os nós à página.
Voltando ao elemento de parágrafo, nós o criamos e adicionamos um atributo de classe a ele.
Agora vamos dar-lhe algum conteúdo de texto. Novamente, começamos criando o nó que queremos.
var newTxt = document.createTextNode("Olá!");
213
A instrução acima cria um nó de texto com o conteúdo "Hello!"

Em seguida, colocamos o texto no elemento de parágrafo.
nodeToAdd.appendChild(newTxt);
A instrução acima adiciona o novo nó de texto, cujo conteúdo é "Hello!", ao novo nó de parágrafo.
Agora temos um novo nó de parágrafo com um atributo de classe e algum conteúdo de texto. Estavam
pronto para inseri-lo na página.
214

215
68
O DOM:
Inserindo nós
No último capítulo, você aprendeu como adicionar conteúdo de texto a um elemento criando primeiro um
nó de texto e, em seguida, anexando o nó ao elemento com appendChild. É claro que você pode usar o mesmo
método para anexar o próprio elemento de parágrafo, preenchido com conteúdo ou não, a um nó pai, por
exemplo, o corpo ou uma div. Este conjunto de instruções tem como alvo um div (linha 1), cria um novo elemento
de parágrafo (linha 2), cria o texto a ser inserido nele (linha 3), coloca o texto no parágrafo (linha 4) e anexa o
elemento de parágrafo junto com seu conteúdo de texto para o div de destino (linha 5).
1 var parentDiv = document.getElementById("div1"); 2 var newParagraph

= document.createElement("p"); 3 var t = document.createTextNode("Olá
mundo!"); 4 newParagraph.appendChild(t); 5
parentDiv.appendChild(newParagraph);
Quando você adiciona um nó à sua página da Web anexando-o como filho a um pai, como fiz no exemplo
acima, a limitação é que você não tem controle sobre onde o novo elemento fica entre os filhos do pai. JavaScript
sempre o coloca no final. Por exemplo, se a div no exemplo acima já tiver três parágrafos, o novo parágrafo se
tornará o quarto, mesmo que você queira colocá-lo em uma posição mais alta.
A solução é inserir antes.

Por exemplo, suponha que você queira que o parágrafo seja o primeiro na div, em vez do último.
1 var parentDiv = document.getElementById("div1"); 2 var newParagraph

= document.createElement("p"); 3 var t = document.createTextNode("Olá
mundo!"); 4 newParagraph.appendChild(t); 5 parágrafo1 = parentDiv.firstChild;
6 parentDiv.insertBefore(newParagraph, parágrafo1);
O exemplo acima seleciona um dos filhos do elemento pai como destino (linha 5),
e diz ao JavaScript para inserir o novo elemento e seu conteúdo de texto antes desse elemento (linha 6).
Não existe um método insertAfter como tal. Mas você ainda pode fazê-lo. Simplesmente insiraAntes do
próximo irmão do nó de destino.
1 var alvo = parentDiv.childNodes [1]; 2

parentDiv.insertBefore (newE, target.nextSibling);
Ao inserir o novo nó antes do próximo irmão do segundo filho, você insere o novo nó após o segundo filho.
216
Para remover um nó, use removeChild.
1 var parentDiv = document.getElementById ("div1"); 2 var nodeToRemove

= parentDiv.childNodes [2]; 3 parentDiv.removeChild (nodeToRemove);
217

218
69
Objetos
Tenho certeza que você já viu tabelas como esta, comparando diferentes pacotes oferecidos por um webhost.
Se você quiser usar esses dados em JavaScript, poderá atribuir cada valor a uma variável diferente, como esta.
1 var plan1Name = "Básico"; 2 var

plano1Preço = 3,99; 3 var plano1Espaço =
100; 4 var plano1Dados = 1000; 5 var
plan1Páginas = 10; 6 var plan2Name =
"Profissional"; 7 var plano2Preço = 5,99; 8
var plan2Space = 500; 9 var plan2Dados = 5000; 10
var plan2Páginas = 50; 11 var plan3Name = "Ultimate";
12 var plano3Preço = 9,99; 13 var plan3Space = 2000;
14 var plan3Data = 20000; 15 var plan3Páginas = 500;
Tendo feito todas essas atribuições de variáveis, você poderia, por exemplo, escrever esta instrução JavaScript...
"
alert("O custo do " + plan2Name + "o pacote é $" + plan2Price + por mês.");
...e um alerta seria exibido dizendo: "O custo do pacote Professional é de US$ 5,99 por
219
mês."
Mas atribuir todos esses valores a variáveis é complicado e pode levar a problemas se as coisas ficarem
complicadas. Uma maneira melhor de lidar com a situação é criar objetos com propriedades. Este é um esquema
mais prático que reflete com mais precisão a natureza bidimensional e em forma de grade da tabela da empresa
host com a qual começamos. Esta tabela mostra todas as opções expressas como objetos e propriedades.
Neste exemplo, cada plano de hospedagem é um objeto — plano1, plano2, plano3. E cada objeto tem 5
propriedades — nome, custo, espaço, transferência e páginas. Propriedades são apenas variáveis anexadas a
um objeto. Nesse caso, há uma propriedade string (nome) e quatro propriedades numéricas (preço, espaço,
transferência e páginas) para cada objeto.
No código, nos referimos a objetos e suas propriedades usando a notação de ponto. Aqui está a declaração
que cria o alerta mostrado acima, com pares objeto-propriedade substituindo as variáveis simples.
"
alert("O custo do " + plano2.nome + " pacote é $" + plan2.price + por mês.");
plan2.name representa "Profissional". plan2.price representa 5,99.

A maneira mais direta de definir um objeto e suas propriedades é esta.
1 var plan1 = { 2 name:

"Basic", 3 price: 3.99, 4
space: 100, 5 transfer: 1000,
6 pages: 10 7 };
Coisas a observar:
O código começa como qualquer definição de variável, com a palavra-chave var, seguida pelo nome do
objeto e, em seguida, um sinal de igual.
Mas então, em vez de um valor, há um colchete, cujo gêmeo vem no final do bloco.
220
Cada propriedade começa com um nome, seguido por dois pontos e, em seguida, um valor.
Cada definição de propriedade, exceto a última, termina com uma vírgula.
O colchete de fechamento é seguido por um ponto e vírgula, por causa do sinal de igual na primeira linha.
Agora vamos adicionar mais uma propriedade, discountMonths. Se o mês atual for julho, agosto ou dezembro,
o cliente recebe um desconto de 20% no plano de hospedagem. Para acompanhar esses meses especiais, vamos
atribuí-los a uma nova propriedade. Esta nova propriedade é um array, não uma simples variável.
plan1.discountMonths = [6, 7, 11];
A instrução acima cria uma nova propriedade do objeto plan1, discountMonths e

atribui uma matriz a ele representando os três meses em que o cliente obtém um desconto.
Você se refere aos elementos individuais dessa propriedade de matriz da mesma forma que faria referência aos
elementos de qualquer matriz, com um número entre colchetes, mas usando a notação de ponto do par de propriedades
do objeto, plan1.discountMonths.
var mo = plan1.discountMonths[2];
A instrução acima atribui o terceiro elemento da matriz, o número que representa

dezembro, para a variável mo.
Até agora, definimos apenas um objeto, plan1, e suas propriedades. Para completar o conjunto de objetos que
inclui plan2 e plan3, você teria que fazer a mesma coisa novamente e depois novamente.
Você pode estar pensando que tudo isso dá mais trabalho do que apenas definir 15 variáveis simples como fiz no
início do capítulo, mas definir objetos e suas propriedades é, na verdade, o melhor caminho a percorrer, por razões
que discutirei em capítulos posteriores. Além disso, há uma maneira menos trabalhosa de fazer isso, que você também
aprenderá.
221

222
70
Objetos:
Propriedades
Para alterar o valor do valor numérico de um objeto, use uma instrução de atribuição simples, da mesma forma
que atribuiria um valor a uma variável simples.
negócio3.custo = 79,95;
Qualquer que fosse o valor de deal3.cost , agora é 79,95.

Claro, você pode atribuir uma string em vez de um número.
deal3.name = "Super-economizador";
Qualquer que fosse o valor de deal3.name , agora é "Super-saver".

Você também pode atribuir uma lista de matrizes a uma propriedade.
deal3.features = ["Garantia", "Envio Grátis"];
Qualquer que fosse o valor de deal3.features , agora é um array com os elementos

"Garantia" e "Navio Livre".
Você também pode atribuir um valor booleano.
deal3.membersOnly = false;
Qualquer que fosse o valor de deal3.membersOnly , agora é falso.

Você também pode usar uma instrução de atribuição para definir uma nova propriedade para um objeto.
Suponha que o objeto deal3 tenha algumas propriedades, mas nenhuma delas seja deal3.market. Agora você deseja
adicioná-lo, enquanto atribui um valor.
negócio3.mercado = "regional";
Assim como você pode criar uma variável indefinida não atribuindo um valor a ela, você pode criar uma variável
objeto sem nenhuma propriedade.
var negócio4 = {};
Se você deseja criar uma propriedade agora e atribuir um valor a ela mais tarde, você pode criá-la com um valor
indefinido.
negócio3.mercado = indefinido;
Observe que a palavra-chave undefined não está entre aspas. Não é uma corda.
223
Você pode excluir uma propriedade de um objeto.
excluir deal3.market;
Você pode verificar se existe uma propriedade de um objeto. A instrução a seguir testa se existe algo como
deal3.market e atribui o resultado (verdadeiro ou falso) à variável propertyExists.
propertyExists = "mercado" em deal3;
Coisas a observar:
Você pode usar qualquer nome de variável legal em vez de propertyExists.

A palavra-chave em pergunta: "O mercado imobiliário está no negócio de objeto3 - verdadeiro ou falso?"
O mercado imobiliário está nas cotações.
O objeto deal3 não está entre aspas.
224

225
71
Objetos:
Métodos
Vamos voltar ao gráfico que mostra os diferentes planos de hospedagem.
Vamos escrever uma função que calcula a cobrança anual com base neste gráfico. Observe que
se o usuário se inscrever em determinadas épocas do ano, ele ganha um desconto pelo ano inteiro. Se
ele se inscrever no plano Básico em julho ou agosto, terá 20% de desconto. Se ele se inscrever no
plano Professional em julho, agosto ou dezembro, ele recebe 20% de desconto. Se ele se inscrever no
plano Ultimate em julho ou agosto, ele recebe 20% de desconto.
Começamos criando três objetos com propriedades. Este é o objeto e suas propriedades que
representam o plano Básico.
1 var plan1 = { 2
name: "Basic", 3 price:
3.99, 4 space: 100, 5
transfer: 1000, 6 pages:
10, 7 discountMonths: [6,
7] 8 };
A função percorre todos os meses de desconto (linha 5) verificando se algum deles
226
acontecer de ser o mês atual (linha 6). Em caso afirmativo, calcula um desconto de 20% multiplicando
o preço normal em 0,8. Em seguida, multiplica o preço mensal, descontado ou não, por 12, para obter o
preço anual e retorna o número para o código de chamada (linha 11).
1 função calcAnnual() {
2 var melhorPreço = plano1.preço;
3 varcurrDate = new Date();
4 var thisMo = currDate.getMonth();
5 for (var i = 0; i < plan1.discountMonths.length; i++) {
6 if (plan1.discountMonths[i] === thisMo) {
7 melhorPreço = plano1.preço * .8;
8 parar;
9 }
10 }
11 retorno melhorPreço * 12;
12}
Esta é a instrução de chamada que executa a função.
var preço anual = calcAnnual();
Mas agora vamos tornar a função mais flexível para que a taxa de desconto possa variar, dependendo
o valor que a instrução de chamada passa para ele. Aqui está a revisão, com a porcentagem a ser
cobrado, passado para o parâmetro percentIfDisc, se o usuário se qualificar para um desconto.
1 função calcAnnual(percentIfDisc) {
7 bestPrice = plan1.price * percentIfDisc;
8 parar;
9 }
10 }
12}
Esta é a instrução de chamada que passa o valor para a função e a executa. Nisso
por exemplo, passa o valor 0,85, representando um desconto de 15%.
var preço anual = calcAnnual(.85);
Você aprendeu que pode anexar uma variável a um objeto, e a variável se torna o
propriedade do objeto. Aqui tem mais novidades. Você pode anexar uma função a um objeto, e a função
torna-se o método desse objeto . Ele faz a mesma tarefa que a função regular, mas agora é
anexado a um objeto. As razões pelas quais você gostaria de usar um método em vez de um método comum
A função ficará clara nos capítulos subsequentes. Por enquanto, deixe-me mostrar como é feito.
Este código insere a função que codifiquei acima na definição do objeto, então agora é um
método. Operacionalmente, é o mesmo que a função plain-vanilla, mas agora está anexada ao
objeto.
227
1 var plano1 = {
2 nome: "Básico",
3 preço: 3,99,
4 espaço: 100,
5 transferência: 1000,
6 páginas: 10,
7 descontoMeses: [6, 7],
8 calcAnnual: function(percentIfDisc) {
14 bestPrice = plan1.price * percentIfDisc;
15 parar;
16 }
17 }
18 retornar melhorPreço * 12;
19 }
20};
Coisas a observar:
Exceto pela primeira linha, todas as linhas do método são idênticas ao código que usei para criar
a função plain-vanilla com a qual começamos.
A definição do método começa da mesma forma que uma definição de propriedade começa, com o nome
seguido de dois pontos.
Uma vírgula termina cada definição de propriedade e definição de método, exceto a última
propriedade ou método. Se você adicionar uma propriedade ou método abaixo do calcAnnual
definição do método, você precisaria inserir uma vírgula após o colchete de fechamento do
calcDefinição anual .
Os parênteses que indicam que um nome de variável é o nome de uma função vêm
imediatamente após a função de palavra-chave. Parâmetros, se houver algum, vá para dentro do
parênteses, como em qualquer definição de função.
É assim que você chamaria o método.
var preço anual = plan1.calcAnnual(.85);
Vou adicionar um refinamento à definição do método. Na definição que codifiquei acima, o

as propriedades são referidas usando o nome do objeto—por exemplo, plan1.price. este
funciona, mas uma abordagem melhor, por razões que ficarão claras nos capítulos subsequentes, é
substitua o nome do objeto pela palavra-chave this. Quando o JavaScript vê essa palavra-chave, ela
sabe que você está se referindo ao objeto que está sendo definido.
1 var plano1 = {
2 nome: "Básico",
3 preço: 3,99,
4 espaço: 100,
5 transferência: 1000,
228
6 páginas: 10,
7 descontoMeses: [6, 7],
8 calcAnnual: function(percentIfDisc) {
9 var bestPrice = this.price;
12 for (var i = 0; i < this.discountMonths.length; i++) {
13 if (this.discountMonths[i] === thisMo) {
14 bestPrice = this.price * percentIfDisc;
15 parar;
16 }
17 }
19 }
20};
Quando você escreve this.whatever, JavaScript é inteligente o suficiente para entender que você está
referindo-se a uma propriedade do objeto que está sendo definido—neste caso, plan1.
229

230
72
Objetos:
Construtores
Novamente, aqui está uma versão do gráfico mostrando diferentes planos de hospedagem.
Foi assim que eu encapsulei as informações do plano Básico em um objeto e cinco propriedades.
1 var plan1 = { 2
name: "Basic", 3 price: 3.99,
4 space: 100, 5 transfer:
1000, 6 pages: 10 7 };
Mas isso só nos dá um objeto que representa o primeiro plano. Eu teria que fazer a mesma coisa
novamente para os planos Professional e Ultimate. Isso é muito artesanato manual. Precisamos de uma
fábrica para produzir essas coisas às dúzias. JavaScript permite que você construa tal fábrica. É chamada
de função construtora.
1 function Plan(nome, preço, espaço, transferência, páginas) { 2 this.name =

name; 3 this.price = preço; 4 este.espaço = espaço; 5 this.transfer = transfer; 6
this.pages = páginas; 7}
231
Esta seria uma definição de função simples, mas para duas diferenças:
O nome da função está em maiúscula. JavaScript não se importa se você faz isso ou não, mas é
convencional fazê-lo para distinguir funções construtoras de funções regulares.
Cada um dos valores de parâmetro é atribuído a uma variável. Mas a variável é uma propriedade
anexada a algum objeto cujo nome ainda não foi especificado. Mas não se preocupe. Assim como os
valores dos parâmetros serão preenchidos pelo código de chamada, o nome do objeto também será.
Este é o código de chamada que cria o objeto para o plano Básico.
var plano1 = new Plano("Básico", 3,99, 100, 1000, 10);
Isso seria apenas uma chamada de função regular se não fosse por esse novo. É a palavra-chave
que diz ao JavaScript para criar um novo objeto. O nome do novo objeto é plan1. Suas propriedades são
enumeradas entre parênteses.
Agora é fácil produzir em massa quantos objetos você quiser, usando o mesmo padrão.
1 var plan1 = new Plan("Básico", 3,99, 100, 1000, 10); 2 var plan2 = new
Plan("Premium", 5,99, 500, 5000, 50); 3 var plan3 = new Plan("Ultimate", 9,99,
2000, 20000, 500);
É comum usar os mesmos nomes para parâmetros e propriedades, mas você não precisa.
Você poderia escrever:
1 function Plan(nome, preço, espaço, transferência, páginas) { 2 this.doc = nome;

3 this.grumpy = preço; 4 this.sleepy = espaço; 5 this.bashful = transferência;
6 this.sneezy = páginas; 7}
232

233
73
Objetos:
Construtores para métodos
Aqui está a versão do gráfico de hospedagem que inclui meses de desconto.
No Capítulo 71, mostrei como anexar uma função a um objeto, usando a mesma abordagem
você usa quando anexa uma variável a um objeto. Quando você anexa uma variável a um objeto, é
chamada de propriedade do objeto. Quando você anexa uma função a um objeto, ela é chamada de método de
o objeto. No exemplo abaixo, o método verifica se a data atual está com desconto
mês e, em caso afirmativo, aplica o desconto. Em seguida, o método calcula a cobrança anual.
Se você estiver criando mais de um objeto com o mesmo padrão de propriedades e métodos,
é conveniente construir o método, bem como as propriedades na função construtora.
No código a seguir, o construtor cria o mesmo método para cada objeto que é
criado, pois cria todas as propriedades para cada objeto.
1 função Plano(nome, preço, espaço, transferência, páginas, descontoMeses) {

2 este.nome = nome;
3 este.preço = preço;
4 este.espaço = espaço;
5 this.transfer = transfer;
6 this.pages = páginas;
7 this.discountMonths = discountMonths;
8 this.calcAnnual = function(percentIfDisc) {
234
15 parar;
16 }
17 }
19 };
20}
Coisas a serem observadas sobre a linha 8, o início da definição do método:
Assim como as definições de propriedade acima, a linha começa com a palavra-chave this, referindo-se a
o nome de qualquer objeto que está sendo construído em um determinado momento.
As próximas três peças são as mesmas: um ponto, o nome do método e um sinal de igual.
A próxima peça é diferente: a função de palavra-chave.
Nesse caso, um único parâmetro está dentro dos parênteses, percentIfDisc. Este não é um
parâmetro que faz parte do construtor. É um parâmetro do método que o construtor
irá criar para cada objeto. Um valor é passado para ele não quando um novo objeto é criado usando
o construtor, mas quando o método, já tendo sido criado junto com seu objeto
através do construtor, é chamado.
Este é o código que chama a função construtora para criar três novos objetos que
correspondem aos três planos de hospedagem.
1 var p1 = new Plan("Básico", 3,99, 100, 1000, 10, [6, 7]);

2 var p2 = new Plan("Premium", 5,99, 500, 5000, 50, [6, 7, 11]);
3 var p3 = new Plan("Ultimate", 9,99, 2000, 20000, 500, [6, 7]);
Uma vez que os objetos e suas propriedades e métodos são criados pelo código acima, isso é
o código que chama, por exemplo, o método do plano Premium.
var preço anual = p2.calAnnual (0,85);
A principal diferença entre a definição do método na definição do objeto literal único

(sem construtor) e a definição do método na função construtora é a primeira linha. Em outros
respeito, ambas as definições são idênticas.
Esta é a primeira linha de uma definição de método quando um objeto é criado de forma única
sem construtor:
calcAnnual: function(percentIfDisc) {
Esta é a primeira linha de uma definição de método dentro de um construtor:
this.calcAnnual = function(percentIfDisc) {
235
Existem outras duas diferenças. Como na função construtora a definição do método
começa com uma atribuição (algo = outra coisa), você precisa de um ponto e vírgula após o
colchete de fechamento. E nenhuma vírgula é necessária se outra definição de propriedade ou
método for seguida.
236

237
74
Objetos:
Protótipos
No último capítulo você criou três objetos usando um construtor. Cada objeto correspondia a um
plano de hospedagem. Cada objeto tinha seis propriedades e um método. Aqui está um gráfico
mostrando os três objetos e suas propriedades e métodos. Confira a última linha, de cor verde na
tabela, aquela que representa os métodos para os três objetos...
Há algo deselegante na última fileira verde. As propriedades mostradas nas linhas acima são
personalizadas para cada objeto, mas o método é sempre o mesmo de objeto para objeto. A função
construtora continua duplicando o mesmo método para cada objeto, objeto após objeto. Se fôssemos
criar 100 objetos usando o construtor, o JavaScript duplicaria o mesmo método 100 vezes, uma vez
para cada objeto. Funcionaria, mas não é bonito.
Esta tabela, que mostra todos os objetos compartilhando um único método, faz mais sentido.
238
Queremos apenas uma cópia do método, compartilhada por todos os objetos criados com o construtor,
não importa quantos objetos são criados.
Como fazemos isso? Com uma declaração de protótipo .
Primeiro, não incluímos o método na função construtora, porque isso cria uma cópia
do método para cada objeto criado com o construtor.
Em vez disso, definimos o método como um protótipo do construtor, dessa forma.
1 Plan.prototype.calcAnnual = function(percentIfDisc) {
8 parar;
9 }
10 }
12};
Agora, todos os objetos criados com o construtor Plan compartilharão a mesma cópia do
método calcAnnual. Não há duplicação desnecessária.
Observe que, exceto pela primeira linha, o método é codificado exatamente como eu o codifiquei quando foi
parte da definição do construtor. Até a primeira linha é a mesma, se você considerar apenas as partes
do lado direito do sinal de igual. As partes do lado esquerdo, conectadas por pontos, são:
o nome da função construtora, neste caso Plan
239
a palavra-chave protótipo o
nome do método que todos os objetos criados com Plan irão compartilhar, neste caso
calcAnnual
Os objetos podem ter propriedades de protótipo, bem como métodos de protótipo. Suponha que você
queira que todos os objetos criados com o Plano compartilhem a mesma propriedade, cancelável, com um
valor true. Você codificaria o protótipo dessa maneira.
Plan.prototype.cancellable = true;
Agora todos os objetos criados com a função construtora Plan compartilham uma propriedade,
cancelável, cujo valor é true.
É assim que a tabela de objetos fica com o método prototype e a propriedade prototype.
É possível substituir um protótipo para qualquer objeto individual. Por exemplo, suponha que você queira
que todos os objetos criados com o construtor compartilhem a mesma propriedade cancelável , exceto o plano
mais barato, plan1, com o nome "Básico". Esta é a declaração que faz isso.
plano1.cancelável = false;
240
Todos os objetos criados com o construtor ainda compartilham a propriedade cancelável, mas agora
o valor dessa propriedade para um objeto é diferente de todos os outros. Aqui está o gráfico.
Da mesma forma, você também pode substituir um método de protótipo compartilhado para qualquer objeto
individual.
241

242
75
Objetos:
Verificando propriedades e métodos
Você pode verificar se um objeto tem uma propriedade específica escrevendo uma instrução simples
como esta.
var gotTheProperty = "preço" no plano1;
Aqui estão as peças:
a propriedade em questão, entre aspas—neste caso, precifique a palavra-

chave no objeto, neste caso, plan1
Novamente, a questão é, o objeto chamado plan1 tem uma propriedade chamada preço? Em outras
palavras, existe algo como plan1.price? No exemplo de três planos de hospedagem que estamos usando, o
plan1 tem um preço de 3,99. Então gotTheProperty é atribuído como true. Mas plan1 não tem uma
propriedade chamada location. Então, se escrevermos...
var gotTheProperty = "local" no plano1;
...a variável gotTheProperty é falsa. plan1 no

exemplo também tem um método chamado calcAnnual. Um método é um tipo de propriedade de um
objeto, então se você escrever...
var gotTheProperty = "calcAnnual" no plano1;
...a variável gotTheProperty é verdadeira.

Coisas a serem
observadas: A propriedade, uma variável, está entre aspas. Não estamos acostumados a colocar
Variáveis JavaScript dentro de aspas, então isso é algo para anotar.
A palavra-chave é bastante intuitiva. O código pergunta: "Existe uma propriedade chamada 'preço' no
plano1?"
Se você quiser uma lista das propriedades de um objeto, há uma maneira bacana de fazer isso:
1 var listaDePropriedades = []; 2 for (var

prop em plan1) {3 listOfProperties.push
(prop); 4}
243
A linha 1 declara um array vazio, listOfProperties. As linhas 2-4 percorrem todos os

propriedades de plan1, adicionando cada propriedade (push), incluindo quaisquer métodos, ao array
listOfProperties. Usando o exemplo com o qual estamos trabalhando, o array
listOfProperties até ventos de com uma valor
"name,price,space,transfer,pages,discountMonths,calcAnnual".
Observe que, ao contrário de um loop for regular , este não estabelece um limite no número de
loops ou incrementar um contador. Após cada iteração, o JavaScript passa automaticamente para a próxima
propriedade do objeto e para de iterar quando não há mais propriedades para enumerar.
Observe também que, em vez de prop, você pode usar qualquer outro nome de variável legal.
No exemplo, o método calcAnnual não foi incluído na definição original do
plano de objeto1 . Mais tarde, foi adicionado ao protótipo da função construtora que usei para
criar o objeto, e assim se tornou uma propriedade do objeto por herança. O código acima
inclui propriedades herdadas (incluindo métodos) na coleção. Se você quiser limitar a lista
de propriedades àquelas que foram explicitamente declaradas para o objeto, omitindo aquelas que são
herdado de um protótipo, você precisa usar hasOwnProperty.
1 var listaDePropriedades = [];

2 para (var prop no plano1) {
3 if (plan1.hasOwnProperty(prop)) {
4 listOfProperties.push(prop);
5 }
6}
No exemplo acima, cada propriedade, por sua vez, é atribuída à variável prop. Então o se
teste de instrução para ver se é uma propriedade de propriedade do objeto em vez de ser herdada
através de um protótipo.
É claro que você pode testar um nome de propriedade literal em vez de usar uma variável.
var isOwnedProperty = plan1.hasOwnProperty("preço");
244

245
76
Controle do navegador:
Obtendo e configurando o URL
Além de fazer as coisas acontecerem na página da web, você pode usar JavaScript para controlar o
navegador. Para começar, você pode fazer com que o navegador informe sua localização atual.
var ondeWeAt = window.location.href;
Por Por E se a navegador é atualmente no

exemplo, http:// www.mybeautifulsite.com/ products/ page33.html#humidifier, a instrução acima atribuirá a string
"http://www.mybeautifulsite.com/products/page33.html#humidifier" à variável whereWeAt .
Você também pode obter pedaços disso. Esta declaração obtém apenas o nome de domínio.
var theDomain = window.location.hostname;
No exemplo, a string "www.mybeautifulwebsite.com" é atribuída à variável theDomain. "http://", o caminho e

a âncora são omitidos.
Aqui está como você obtém o caminho.
var thePath = window.location.pathname;
No exemplo, a string "/products/page33.html" é atribuída à variável thePath. Se o navegador estivesse na

página inicial e a URL fosse simplesmente http:// www.mybeautifulsite.com, a string "/" seria atribuída à variável.
No exemplo, o navegador foi apontado para uma seção da página marcada pela âncora #umidificador. Esta
declaração identifica a âncora.
var theAnchor = window.location.hash;
A string "#humidifier" é atribuída à variável theAnchor. Se não houver âncora na URL, a variável receberá
uma string vazia, "".
Como de costume, você pode inverter a ordem das coisas, dizendo ao navegador para onde ir em vez de
perguntar onde ele está.
window.location.href = "http://www.me.com/1.html";
A instrução acima diz ao navegador para navegar até a página chamada 1.html no site
me.com.
Se você quisesse que o navegador navegasse até a página inicial do site, você escreveria...
246
window.location.href = "http://www.me.com";
E se você quisesse pousar em uma âncora...
window.location.href = "http://www.me.com/1.html#section9";
Seria bom se você pudesse usar window.pathname = ... para mover para uma página diferente no site
atual ou window.hash = ... para mover para uma âncora
fazer, na página
porém, atual, omas
é consultar você não
navegador pode.
pelo O que
nome você pode
de domínio e
combiná-lo com a página para a qual deseja ir.
1 var currentSite = window.location.hostname; 2 var destino = "http://"

+ currentSite + "/wow.html"; 3 window.location.href = destino;
Aqui está o detalhamento linha por linha:
1. Obtém o nome de domínio e o atribui à variável currentSite. Exemplo:

www.me.com
2. Concatena a string "http://" com o nome de domínio mais a página de destino e
atribui o combo ao destino da variável
3. Direciona o navegador para o destino
É assim que direciona o navegador para uma âncora na página atual.
1 var currentSite = window.location.hostname;

2 var currentPath = window.location.pathname; 3 var destino = "http://"
+ currentSite + currentPath + "#humidifier"; 4 window.location.href = destino;
1. Obtém o nome de domínio e o atribui à variável currentSite. Exemplo:

www.me.com
2. Obtém o nome do caminho e o atribui à variável currentPath. Exemplo: /1.html 3. Concatena a
string "http://" com o nome do domínio, a página de destino e a âncora desejada e atribui o combo à variável
destino 4. Direciona o navegador ao destino
247
Você pode omitir window. É legal usar location.href, location.hostname, location.pathname e

location.hash. É mais comum incluir window.
Você pode omitir href ao detectar o URL. É legal usar window.location, ou simplesmente location.
(Veja acima.) Incluir href é preferível por razões esotéricas.
Você pode usar document.URL como uma alternativa para window.location.href
Há mais duas maneiras de direcionar o navegador para uma url, alternativas para window.location.href.
Você aprenderá como usá-los no próximo capítulo.
248

249
77
Obtendo e definindo o URL de outra maneira
No capítulo anterior, você aprendeu a direcionar o navegador para uma nova URL, atribuindo uma string a
window.location.href. Aqui está outra maneira de fazer a mesma coisa.
window.location.assign("http://www.me.com");
A declaração direciona o navegador para a página inicial do me.com.

Assim como na instrução window.location.href , você pode tornar a URL tão detalhada quanto desejar.
window.location.assign("http://www.me.com/lojack.html#guarantee");
A declaração direciona o navegador para a âncora #garantia na página lojack.html do site me.com.
Aqui está outra alternativa que tem um efeito ligeiramente diferente.
window.location.replace("http://www.me.com/lojack.html#guarantee");
Mais uma vez, a instrução direciona o navegador para uma nova URL. Mas ao usar substituir em vez de atribuir,
você interfere no histórico do navegador. Quando você usa atribuir, o histórico fica intacto. A instrução leva o usuário
da página original para a nova página. Se, depois de chegar à nova página, ela pressionar a tecla Backspace ou
clicar no botão Voltar do navegador , ela voltará à página original de onde acabou de sair. Mas quando você usa
substituir, a página original não entra no histórico. Se o usuário pressionar Backspace depois de ser levado para a
nova página, ele será levado para a página exibida antes da página original, pois a página original não está mais no
histórico. Se não houver página antes da página original, nada acontece quando ela pressiona Backspace.
Para recarregar o código da página atual, use uma destas instruções:
window.location.reload(true);
window.location.reload(false);
janela.local.recarregar();
Todas as três instruções recarregam a página atual. Se o argumento for verdadeiro (exemplo 1 acima), a
instrução força o navegador a carregar a página do servidor. Se o argumento for falso (exemplo 2) ou se não houver
argumento (exemplo 3), o navegador carregará a página do cache se a página tiver sido armazenada em cache.
250
Você pode usar window.location.href = window.location.href ou qualquer uma das

alternativas abreviadas para recarregar a página atual. O recarregamento é mais
rápido, mas não permite especificar se o navegador recarrega do servidor ou do
cache. document.URL = document.URL não funciona.
251

252
78
Para a frente e para trás
Você pode fazer o navegador voltar uma URL no histórico do navegador, como se o usuário tivesse
pressionado a tecla Backspace ou clicado no botão voltar do navegador .
história.voltar();
Para fazer o navegador avançar no histórico, como se o usuário tivesse pressionado alt-right-arrow
ou clicou no botão avançar do navegador ...
history.forward();
Em ambos os casos, se não houver nenhuma URL no histórico que torne a movimentação possível, o
navegador não faz nada.
Você pode dizer ao navegador quantos passos no histórico você quer dar, usando números negativos
para voltar e números positivos para avançar. A instrução a seguir equivale a pressionar a tecla Backspace
três vezes.
history.go(-3);
A instrução a seguir envia ao navegador duas URLs.
history.go(2);
Se um número negativo entre parênteses for maior que o número de URLs anteriores no histórico, o
navegador não fará nada. Se um número positivo dentro dos parênteses for maior que o número de URLs de
encaminhamento no histórico, o navegador não fará nada.
Quando você quiser avançar ou retroceder apenas um passo, você pode escolher qualquer um dos métodos.
história.voltar();
history.go(-1);
E...
history.forward();
253
history.go(1);
Não há uma maneira confiável de descobrir quantos itens, para trás e para frente, existem no histórico.
Se o usuário clicou em um link para acessar a página atual, você pode obter o URL da página em
que o link foi clicado.
var whereUserCameFrom = document.referrer;
A declaração acima atribui a URL onde o link foi clicado para a variável
whereUserCameFrom.
No entanto, isso funciona apenas se um link foi clicado, incluindo um link em um resultado de
pesquisa. Se o usuário chegou à sua página por meio de um favorito ou digitando sua URL na barra de
endereço, o resultado de document.referrer será uma string vazia, "".
254

255
79
Preenchendo a janela com conteúdo
As janelas pop-up são o Rodney Dangerfield dos recursos do navegador, graças ao abuso por parte de
profissionais de marketing agressivos. Mas eles têm seus usos legítimos. Se você planeja usá-los, terá que
lidar com bloqueadores de pop-up, o que aprenderá a fazer em breve. Este capítulo e o próximo ensinam o
código que cria a janela.
Esta é a declaração básica, barebones.
var macacoWindow = window.open();
O código acima abre uma janela em branco de tamanho máximo e lhe dá um handle, uma variável que
se refere a esta janela em particular—neste caso, monkeyWindow. Dependendo do navegador, a janela pode
abrir em cima da janela anterior, em uma nova aba ou até mesmo em uma nova cópia do navegador. Você não
pode controlar isso.
Existem três maneiras de preencher uma nova janela com conteúdo, você pode usar o método write para
colocar conteúdo HTML na tela...
1 var macacoWindow = window.open(); 2 var

windowContent = "<h1>Macaco capuchinho</h1><img src= 'monkey.jpg'><p>A palavra capuchinho deriva de um grupo de frades<br>chamado Ordem dos
Frades Menores Capuchinhos que vestem<br> >vestes marrons com grandes capuzes cobrindo suas cabeças.</p>"; 3
macacoWindow.document.write(windowContent);
Aqui está o detalhamento linha por linha:
1. Abre uma nova janela e atribui a ela o handle monkeyWindow 2. Atribui

texto à variável windowContent 3. Preenche a janela com o texto
Coisas a observar:
Dentro das aspas principais que envolvem toda a string, qualquer texto citado deve estar entre aspas
simples, como em <img src='monkey.jpg'>.
Usando o método document.write , você coloca a string HTML na página. Você designa a janela por seu
identificador, a variável que você declarou quando abriu a janela.
O método document.write neste exemplo é usado para preencher uma janela vazia com
256
contente. Você também pode usá-lo para gravar em uma janela que já possui conteúdo. Mas ele substituirá
todo o HTML do documento original, substituindo totalmente seu conteúdo.
Em vez de atribuir a string HTML a uma variável e especificar a variável dentro dos parênteses, você pode
simplesmente colocar a string HTML dentro dos parênteses, entre aspas, é claro. Mas isso seria ainda mais
complicado do que o código de exemplo.
A segunda maneira de preencher a janela com conteúdo é atribuir um documento a ela, conforme você
aprendeu a fazer nos capítulos anteriores.
monkeyWindow.location.assign("http://www.animals.com/capuchin.html");
...ou...
monkeyWindow.location.href = "http://www.animals.com/capuchin.html";
A terceira e mais comum maneira de preencher a janela com conteúdo é incluir o

atribuição de documento na instrução que abre a janela.
var macacoWindow = window.open("http://www.animals.com/capuchin.html");
Se o documento que você está abrindo no pop-up compartilhar o mesmo host e diretório que o documento
original, você pode simplesmente escrever...
var macacoWindow = window.open("capuchin.html");
É assim que você fecha uma janela.
macacoWindow.close();
257

258
80
Controlando o tamanho e a localização da janela
No capítulo anterior, você aprendeu a abrir uma nova janela sem parâmetros — uma janela em tamanho real.
Você também aprendeu a abrir uma janela com um único parâmetro — uma URL.
Um segundo parâmetro que você pode incluir é um nome de janela.
var macacoWindow = window.open("monk.html", "win1");
Na declaração acima, o segundo item entre parênteses, "win1", é o nome.

O nome é útil para especificar o atributo target de um elemento <a> ou <form> em HTML.
Coisas para saber:
O nome, usado em HTML, não é o identificador. O identificador é usado em instruções JavaScript que gravam
na janela, atribuem uma URL a ela ou a fecham. O identificador é a variável que precede o sinal de igual.
O nome está entre aspas.

O nome é separado da URL por uma vírgula seguida por um espaço.
O próprio nome não pode conter espaços.
Você pode especificar um parâmetro de URL sem um parâmetro de nome, mas não pode especificar um
parâmetro de nome sem um parâmetro de URL. Mas não há problema em especificar um parâmetro de URL vazio,
como este.
var macacoWindow = window.open ("", "win1");
Muitas vezes, você desejará especificar um tamanho de janela.
var macacoWindow = window.open("monk.html", "win1", "width=420,height=380");
Coisas para saber:
Ambos os parâmetros, largura e altura, são delimitados por um único conjunto de aspas.
A ausência de espaços entre aspas não é uma mera preferência de estilo, mas um requisito. Qualquer espaço
aqui quebrará o JavaScript.
Os números referem-se a pixels. No exemplo acima, a janela terá 420 pixels de largura
259
e 380 pixels de altura.

A largura e a altura devem ser no mínimo 100.
Ao contrário dos parâmetros de URL e nome, a ordem não importa. A largura pode vir antes da altura, a
altura pode vir antes da largura. Mas o conjunto de largura e altura deve vir em terceiro lugar, depois de
URL e nome.
Para especificar esses parâmetros, você deve especificar um URL e um nome, mesmo se especificar
strings vazias.
Uma janela menor que a tela será exibida no canto superior esquerdo da
tela. Mas você pode opcionalmente informar ao navegador onde colocar a janela.
var w = window.open("", "", "largura=420,altura=380,esquerda=200,topo=100");
Coisas para saber:
Novamente, os números são pixels — número de pixels da borda esquerda da tela e número de pixels da
parte superior da tela.
Os parâmetros de posicionamento estão incluídos no mesmo conjunto de aspas que os parâmetros de
tamanho e, como os parâmetros de tamanho, são separados por vírgula e sem espaço.
A ordem dos parâmetros entre aspas não importa.
Você pode especificar o tamanho da janela sem especificar a posição da janela, mas se especificar a
posição da janela sem tamanho, ela será ignorada, pois será uma janela de tamanho completo que
preenche toda a tela.
Como de costume, alguns ou todos os parâmetros podem ser atribuídos a uma variável, e a variável pode
ser usada na instrução que abre a janela. Como a coisa toda tem que ser uma string entre aspas, as aspas
dentro da string devem ser alteradas para aspas simples.
1 var windowSpecs = "'faq.html', 'faq', 'width=420,height=380,left=200,top=100'"; 2 var faqPage = window.open(windowSpecs);
260

261
81
Teste para bloqueadores de pop-up
Os bloqueadores de pop-up agora são um recurso padrão dos navegadores, com algum nível de bloqueio de pop-up geralmente
embutido como padrão. Pop-ups JavaScript, e especialmente aqueles que abrem uma nova página dentro do mesmo site, geralmente
são tolerados por padrão, mas você nunca pode ter certeza. Se os pop-ups são um recurso essencial do seu site, você precisa testar
se seus pop-ups serão bloqueados. Se estiverem, você pode pedir ao usuário que desative o bloqueador de pop-ups do seu site.
O teste é bastante deselegante. Você tenta abrir um pequeno pop-up de teste e depois o fecha rapidamente — tão rápido que
o usuário pode não notar a pequena tela piscando. Se a tentativa for bem-sucedida, o identificador da janela terá um valor. Se o pop-
up estiver bloqueado, o identificador será nulo e você poderá entregar sua mensagem ao usuário.
1 função checkForPopBlocker() { 2 var testPop =

window.open("", "","width=100,height=100"); 3 if (testPop === null) { alert("Por favor, desabilite
seu bloqueador de pop-ups.");
4
5
} 6 testPop.close(); 7}
Aqui está a divisão linha por linha: 2 Tentativas

de abrir uma pequena janela 3-4 Se o identificador
for atribuído nulo, significando que a janela não pôde ser aberta, um alerta será exibido 6 Fecha a janela A função
mostrada acima funciona com todos os navegadores, exceto Explorador de Internet. No Internet Explorer, se o pop-up
estiver bloqueado, o identificador será indefinido em vez de nulo. Então, para cobrir todas as bases, você precisa codificar a
função dessa maneira.
1 função checkForPopBlocker() { 2 var testPop =

window.open("", "","width=100,height=100"); 3 if (testPop === null || typeof(testPop ===
"undefined") { 4
alert("Desative seu bloqueador de pop-ups.");
5 }
6 testePop.close(); 7}
Normalmente, você executaria o teste quando a página for carregada.
<body onLoad ="checkForPopBlocker();">
262

263
82
Validação de formulário: campos de texto
O usuário está preenchendo seus formulários corretamente? JavaScript ajuda você a descobrir, ou seja,
ajuda a validar seu formulário. Com a validação de formulário, se houver algum problema, você pode pedir ao
usuário que tente novamente. Para começar, se você tiver um campo obrigatório, poderá verificar se o usuário
digitou algo nele. Vamos começar com um formulário simples que pede ao usuário para digitar seu sobrenome.
Aqui estão algumas marcações para o formulário. Estou omitindo muitas coisas, incluindo coisas de estilo,
para mantê-lo focado no que é importante aprender aqui.
<form onSubmit="return checkForLastName();">

Digite seu sobrenome.<br> <input type="text"
id="lastNameField"> <input type="submit" value="Enviar
formulário"> </form>
Quando o usuário clica no botão Enviar , a função checkForLastName é chamada.

Aqui está a função.
1 function checkForLastName() { 2 if
(document.getElementById("lastNameField").value.length === 0) { 3
alert("Digite seu sobrenome"); retorna falso;
4
5 }
6}
A linha 2 pergunta se o comprimento do valor encontrado no campo com o id "lastNameField" é 0. Ou seja,

nada foi inserido lá? Nesse caso, um alerta é exibido solicitando que o usuário insira seu nome.
E então na linha 4 algo mais acontece. O valor booleano false é retornado ao código de chamada. Isso impede
que o formulário seja enviado. Para que o envio seja cancelado, deve haver um retorno de palavra-chave
correspondente na marcação que chama a função. Sem esse retorno no código de chamada, o retorno na linha 4
da função não impedirá o envio do formulário.
<form onSubmit="return checkForLastName();">
Como um toque amigável, você pode usar o método de foco para colocar o cursor no campo que precisa
ser preenchido.
1 function checkForLastName() { 2 if
(document.getElementById("lastNameField").value.length === 0) { 3
alert("Digite seu sobrenome");
4 document.getElementById("lastNameField").focus(); retorna falso;
5
6 }
7}
264
Repetir a designação document.getElementId... fica muito difícil, então vamos colocar

em uma variável.
1 função checkForLastName() {
2 var targetField = document.getElementById("lastNameField");
3 if (targetField.value.length === 0) {
4 alert("Digite seu sobrenome");
5 targetField.focus();
6 retorna falso;
7 }
8}
Vamos adicionar mais um recurso. Vamos direcionar a atenção do usuário para o campo que precisa ser
completado dando-lhe uma cor de fundo amarela.
Isso requer duas declarações adicionais. Se o usuário não tiver preenchido o campo, linha 6
muda sua cor de fundo para amarelo. Após o usuário preencher o campo, a linha 9 restaura o
cor de fundo para branco quando a função for executada novamente no envio subsequente do usuário.
1 função checkForLastName() {
2 var targetField = document.getElementById("lastNameField");
3 if (targetField.value.length === 0) {
4 alert("Digite seu sobrenome");
5 targetField.focus();
6 targetField.style.background = "amarelo";
7 retorna falso;
8 }
9 targetField.style.background = "branco";
10}
O código de exemplo neste capítulo tem como alvo formulários e campos por ID, que é o mais
abordagem direta. Mas você pode segmentar por nome, por tag ou por posição no
Hierarquia DOM.
Em vez de conectar o ID à função, você pode torná-lo multiuso
nomeando o ID do campo como um parâmetro e passando o ID para ele a partir do código de chamada.
265

266
83
Validação de formulário: menus suspensos
Considere um formulário com um campo selecione um estado. Vou limitar a lista de estados a apenas 4, para
simplificar. Quando o usuário clica na seta para cima ou para baixo à direita de SELECIONAR UM ESTADO, um menu é
suspenso. Ela seleciona um estado dele.
Mas o que acontece se ela esquecer de selecionar um estado?
Aqui está a marcação, simplificada para fins de ensino.
<form onSubmit="return checkForSelection();">

<select id="estados">
<option value="" selected="selected">
SELECIONE UM ESTADO</option>
<option value="AL">Alabama</option> <option
value="AK">Alasca</option> <option value="AZ">Arizona</
option> <option value= "AR">Arkansas</option>
</select>
<input type="submit" value="Enviar formulário"> </form>
Quando o botão Enviar é clicado, a função checkForSelection é chamada. Observe que

mais uma vez, a palavra-chave return precede a chamada da função.
Aqui está a função.
1 function checkForSelection() { 2 if
(document.getElementById("states").selectedIndex === 0) {
3 alert("Por favor, selecione um estado.");
4 retorna falso;
5 }
6}
Na função, se selectedIndex for 0 (linha 2), significa que o usuário não fez uma seleção.
A linha 3 exibe um alerta pedindo que ela selecione. A linha 4 retorna false, cancelando o envio do formulário.
Aqui está a função, revisada de duas maneiras. Primeiro, ele aceita o ID do elemento como parâmetro,
permitindo processar mais de um formulário. Em segundo lugar, o elemento é atribuído a uma variável.
1 função checkForSelection(selecID) { 2 var target =

document.getElementById(selecID); 3 if (target.selectedIndex === 0) {
4 alert("Por favor, selecione um estado.");

5 retorna falso;
6 }
7}
A função codificada acima precisa que o manipulador de eventos inclua o ID como um argumento.
<form onSubmit="return checkForSelection('states');">
267

269
84
Validação de formulário: botões de opção
Vamos codificar um formulário com um grupo de botões de opção. Os botões são Gato, Morcego e Chapéu.
Esta é a marcação, simplificada para manter seu foco no que você está aprendendo aqui.
<form onSubmit="return validateRadios();">

<input type="radio" name="r1" value="cat"> Gato<br> <input type="radio"
name="r1" value="bat"> Morcego<br> <input type="radio " name="r1" value="hat">
Chapéu<br> <input type="submit" value="Enviar formulário"> </form>
Observe que todos os botões de opção têm o mesmo nome, "r1".

Esta é a função de validação que verifica se o usuário clicou em um dos botões.
1 função validarRadios() { 2
var radios = document.getElementsByName("r1"); for (var i = 0; i <
3 radios.length; i++) { if (radios[i].checked) {
4
5 retorne verdadeiro;
6 }
7 }
8 alert("Por favor, marque um."); retorna falso;
9
10}
A linha 2 faz uma coleção de todos os botões com o nome "r2" e atribui a coleção às variáveis radios. Isso é possível
porque, embora um elemento não possa compartilhar seu id com outros elementos, qualquer número de elementos pode
compartilhar o mesmo nome. As linhas 3 e 7 percorrem a coleção para ver se algum dos botões está marcado. Nesse caso,
o código sai da função com a palavra-chave return na linha 5, devolvendo o booleano true para que o formulário possa ser
enviado. Se o loop seguir seu curso sem encontrar nenhum botão marcado, a linha 8 exibirá um alerta e a linha 9 retornará
false, cancelando o envio do formulário.
A função pode ser usada para validar seções de botão para qualquer número de formulários se especificarmos
um parâmetro, permitindo que o manipulador de eventos passe o nome do grupo de botões para a função.
1 função validarRadios(ename) { 2
var radios = document.getElementsByName(eName);
Para usar a função codificada acima, o manipulador de eventos teria que incluir o
nome do grupo de botões como um argumento.
<form onSubmit="return validateRadios('r1');">
270

271
85
Validação de formulário: CEPs
Agora, um formulário de um campo que solicita que o usuário insira seu CEP.
Você já aprendeu como garantir que o usuário não tenha deixado o campo em branco. Mas como fazer
você testa se ela digitou o número certo de dígitos para um CEP — 5 dígitos?
O HTML oferece uma maneira de impedir que ela insira muitos dígitos: maxlength=5. Mas se
você quer ter certeza de que ela não digitou poucos dígitos, você precisa usar JavaScript. Aqui está o
função.
1 função validarZIP() {
2 var numChars = document.getElementById("zip").value.length;
3 if (numChars < 5) {
4 alert("Digite um código de 5 dígitos.");
5 retorna falso;
6 }
7}
Se o número de caracteres no campo for menor que 5, um alerta será exibido e falso será
retornado ao código chamador, cancelando o envio do formulário.
Outra pergunta a ser feita sobre a entrada do campo ZIP é se o usuário digitou apenas
números. Aqui está o código adicional para isso.
1 função validarZIP() {
2 var valueEntered = document.getElementById("zip").value;
3 var numChars = valueEntered.length;
4 if (numChars < 5) {
5 alert("Digite um código de 5 dígitos.");
6 retorna falso;
7 }
8 for (var i = 0; i <= 4; i ++) {
9 var thisChar = parseInt (valorEntrado [i]);
10 if (éNaN(thisChar)) {
11 alert("Digite apenas números.");
12 retorna falso;
13 }
14 }
15}
O código realçado percorre os cinco caracteres que foram inseridos, verificando

certifique-se de que todos os caracteres sejam caracteres de string representando números. Porque os cinco
caracteres no campo são caracteres de string, cada um deve ser convertido em um número se
possível antes de ser testado. A linha 9 faz isso. A linha 10 testa para ver se a tentativa
conversão funcionou. Se um número resultou de parseInt na linha 9, não há problema. Mas se o
caractere não é um número após a tentativa de conversão—se for NaN na linha 10—um alerta é exibido
e false é retornado, cancelando o envio do formulário.
272
Uma maneira mais elegante e versátil de validar formulários é usar expressões regulares.
As expressões regulares estão fora do escopo deste livro, mas darei uma pequena amostra delas no
próximo capítulo.
273

274
86
Validação de formulário: e-mail
A validação de um campo de e-mail inclui verificar se não há caracteres ilegais,

como espaços, e que todos os elementos essenciais de um endereço de e-mail legal estão lá: um ou mais
caracteres, seguido por @, seguido por um ou mais caracteres, seguido por um ponto, seguido
por dois a quatro caracteres. A maneira padrão de testar tudo isso é combinar a entrada do usuário com
uma expressão regular. As expressões regulares estão além do escopo deste livro, mas vou lhe dar uma
saboreá-los no final do capítulo. Enquanto isso, veja como evitar muitos erros do usuário
usando indexOf.
Vamos começar verificando os espaços, que são ilegais em um endereço de e-mail.
1 função valideEmail() {
2 var eEntered = document.getElementById("email").value;
3 if (eEntered.indexOf(" ") !== -1) {
4 alert("Não são permitidos espaços no endereço");
5 retorna falso;
6 }
7}
A linha 3 é a chave aqui. Se o índice do caractere de espaço ilegal for diferente de -1,
significa que o personagem está em algum lugar e um alerta é exibido.
Se você quisesse, você poderia testar a presença de todos os outros caracteres ilegais que o
mesma maneira. Mas nesse caso, seria melhor usar uma expressão regular, como mostro no final
deste capítulo.
Em um endereço de e-mail, você deseja ver o sinal @ pelo menos um caractere desde o início
da string e não mais perto do final da string do que 5 caracteres de distância. Aqui está uma linha que
adiciona este teste à função de exemplo.
2 var endereçoIsLegal = true;
3 var eEntered = document.getElementById("endereço").value;
5 endereçoIsLegal = false;
6 }
7 if (eEntered.indexOf ("@") <1 || eEntered.indexOf ("@")> eEntered.length - 5) {
9 }
10 if (endereçoIsLegal === false) {
11 alert("Por favor, corrija o endereço de e-mail");
12 retorna falso;
13 }
14}
Sobre a linha 7: A primeira parte, à esquerda dos tubos, testa se o personagem está no
início do endereço, o que seria ilegal. A segunda parte, à direita dos tubos, testa
se há menos de 4 caracteres após o caractere. Uma vez que deve haver pelo menos
275
um caractere para o nome de domínio mais um ponto mais pelo menos dois caracteres para a extensão,
menos de 4 caracteres após o @ seria ilegal.
Por fim, adicionarei um teste para o ponto que precisa estar a pelo menos 1 caractere de distância do "@"
e ter 2 a 4 caracteres a seguir.
2 var endereçoIsLegal = true;
6 }
7 if (eEntered.indexOf ("@") <1 || eEntered.indexOf ("@")> eEntered.length - 5) {>
9 }
10 if (eEntered.indexOf ("".") - eEntered.indexOf ("@") <2 ||
eEntered.indexOf ("".")> eEntered.length - 3) {
12 }
13 if (endereçoIsLegal === false) {
15 retorna falso;
16 }
14}
Linha 10: Deve haver pelo menos um caractere entre o ponto e o @. A primeira parte,
esquerda dos tubos, testa se aquele caractere (ou mais) está faltando, o que seria ilegal.
Também deve haver pelo menos 2 caracteres após o ponto. A segunda parte, à direita dos tubos,
testa se há menos de 2 caracteres seguindo o caractere, o que seria
ilegal.
Todos os testes mostrados acima, e muito mais, podem ser incorporados em um único
teste de expressão. Uma expressão regular expressa um padrão que, neste caso, a entrada do usuário deve
corresponder para validar. Se você estiver familiarizado com o operador curinga, *, que significa
"qualquer combinação de caracteres de qualquer tamanho", essa é a ideia geral. Mas expressões regulares
vão muito além do operador curinga.
Expressões regulares garantem um livro próprio e estão além do escopo deste livro.
Mas, para dar um gostinho de quão poderosos (e sucintos!) eles podem ser, aqui está um exemplo. Ele testa
para todas as ilegalidades que o código acima verifica e muito mais. (Isto não será coberto no
exercícios para o capítulo, então não tente memorizar nada no exemplo.)
3 var regex = / ^ [\ w \ - \. \ +] + \ @ [A-zA-Z0-9 \. \ -] + \.[a-zA-z0-9] {2,4} $ /;
4 if (! (EEntered.match (emailCorrectPattern))) {
6 retorna falso;
7 }
8}
276

277
87
Exceções: tentar e pegar
Se você executar o código a seguir, nada acontecerá.
1 function saudaçãoMundo() { 2 var

saudação = "Olá mundo!"; 3 alerta(saudação); 4}
O alerta de palavra-chave , alerta com erros ortográficos , quebra o código. Mas JavaScript não lhe diz
o que há de errado. É como um carro que não pega. É a bateria? A linha de combustível? Uma vela de ignição?
É claro que, no pequeno trecho de código acima, é fácil identificar o problema. Mas e se a função executar 40
linhas e chamar três outras funções? Seria bom se o JavaScript relatasse o problema específico para você em vez de
apenas quebrar. Bem, é para isso que é tentar... pegar . Aqui está como funciona.
1 function saudaçãoMundo() { 2
tentativas { 3 var saudação = "Olá
mundo!"; alerta(saudação);
4
5 }
6 pegar (err) {
7 alerta(erro);
8 }
9}
O código operacional original é encapsulado no bloco try . O alerta mal formado causa um erro de JavaScript,
que é passado para o bloco catch . Um alerta exibe o erro que causou o problema.
Quando você envolve algum código operacional em um bloco try , você diz ao JavaScript: "Tente executar este
código. Se houver um erro, pare de executar e vá para o bloco catch para ver o que fazer". No exemplo acima, o erro
gerado pelo JavaScript é atribuído ao parâmetro err, e esse valor é exibido em um alerta: "ReferenceError: Can't find
variable: aler"
Ok, neste caso, o JavaScript não fornece exatamente as informações que você deseja.
Em vez de informar que você deixou um "t" fora da palavra-chave alert , ele informa que encontrou uma variável que
não foi definida. Mas perto o suficiente. JavaScript apontou você na direção certa.
Observe que tentar e pegar são sempre emparelhados. Sem tentar, um erro não acionará a captura.
Sem catch, o JavaScript não saberá o que fazer quando lançar um erro.
Mais algumas coisas para ter em mente:
O código dentro dos blocos try e catch é colocado entre colchetes.
278
O código funcional dentro do bloco try é recuado.

O parâmetro error, neste caso err, pode receber qualquer nome de variável legal.
Neste exemplo, um alerta é exibido quando ocorre um erro. Mas você poderia fazer outra coisa.
O par tentar e pegar tem utilidade limitada. Por exemplo, no exemplo acima, se você omitir um
parêntese, colchete ou aspas, ou se tiver muitos deles, nenhum alerta será exibido. O código vai quebrar e
nada vai acontecer. A abordagem try and catch é útil principalmente para identificar variáveis que não foram
definidas ou, como neste caso, erros que JavaScript interpreta como variáveis que não foram definidas.
279

280
88
Exceções: lançar
Ao adicionar uma ou mais instruções throw , você pode definir seus próprios erros em uma tentativa...
par. Isso pode ser útil para lidar com o comportamento rebelde do usuário.
Suponha que você tenha pedido ao usuário para criar uma senha. Deve ter pelo menos 8 a 12 caracteres
long, deve conter pelo menos um número e não pode conter espaços. Esta é a marcação que
cria o formulário, simplificado para mantê-lo focado no essencial:
<form onSubmit="return checkPassword();">

Digite uma senha<br>
(8-12 caracteres, pelo menos 1 número, sem espaços)<br>
<input type="texto" id="f1">
<input type="submit" value="Submit">
</form>
Esta é a função que testa se a entrada do usuário atendeu aos requisitos. Se não, o
função exibe um alerta.
1 função checkPassword() {
2 tente {
3 var pass = document.getElementById("f1").value;
4 if (pass.length < 8) {
5 throw "Por favor, digite pelo menos 8 caracteres.";
6 }
7 if (pass.indexOf(" ") !== -1) {
8 jogue "Sem espaços na senha, por favor.";
9 }
10 var númeroEm algum lugar = false;
11 for (var i = 0; i < pass.length; i++) {
12 if (éNaN(pass(i, i+1)) === falso) {
13 númeroEm algum lugar = verdadeiro;
14 parar;
15 }
16 }
17 if (númeroEm algum lugar === false) {
18 throw "Inclua pelo menos 1 número.";
19 }
20 }
21 pegar (err) {
22 alerta(erro);
23 }
24}
As linhas 4 a 9 e 17 a 19 testam três erros de usuário diferentes, com um

string lançada para cada erro. O código de captura , em vez de capturar um erro gerado pelo JavaScript,
pega a string enviada por throw. Este é o valor atribuído à variável err na linha 21
e serve como a mensagem do display na linha 22.
Observe que qualquer tipo de valor, incluindo um número ou booleano, pode ser passado para o catch
parâmetro via throw. Você também pode passar uma variável.
281

282
89
Manipulando eventos em JavaScript
Nos capítulos anteriores, você aprendeu a lidar com eventos como um clique de botão ou envio de formulário
com manipuladores de eventos embutidos. Essa é a maneira mais antiga e menos abstrata de fazer isso. Mas de
acordo com o ethos de igreja e estado separado do codificador profissional, a funcionalidade do JavaScript deve ser
mantida separada do conteúdo do HMTL. Primeiro, um exemplo da abordagem inline menos desejável:
<input type="button" value="Click" onClick="sayHello();">
Vamos remover a parte destacada da marcação acima e adicionar um id.
<input type="button" value="Clique" id="button1">
Aqui está o código JavaScript que manipula o evento.
1 var b1 = document.getElementById ("button1"); 2 b1.onclick = diga

Olá ;
A linha 1 atribui o elemento à variável b1. A linha 2 observa o elemento a ser

clicado. Quando isso acontece, ele chama a função sayHello.
Coisas a observar:
Ao contrário do camelCase usado para manipulação de eventos inline, o nome do evento deve ser
todo em letras minúsculas ou não funcionará. É onclick não onClick, onfocus não onFocus, onsubmit
não onSubmit
Ao contrário do tratamento de eventos inline, o nome da função após o sinal de igual não está entre aspas.
Ao contrário do tratamento de eventos inline, não há parênteses após o nome da função.
Se você quisesse, poderia condensá-lo em uma única declaração escrevendo...
document.getElementById("button1").onclick = digaOlá;
O código da função é o mesmo se você usar manipulação de eventos inline ou com script. Por exemplo:
1 function digaOlá() { 2 alert("Olá.");

3}
Este código chama uma função que troca uma imagem por outra quando o usuário passa o mouse sobre
283
a imagem original.
1 var targetImg = document.getElementById("i12"); 2 targetImg.onmouseover

= swapPic;
Esse código chama uma função que valida um endereço de e-mail quando um formulário é enviado.
1 var emailFrm = document.getElementById ("form5"); 2 emailFrm.onsubmit

= valEmail;
284

285
Índice
Como proponho reduzir seu esforço pela metade usando tecnologia
1. Alertas 2. Variáveis para Strings 3. Variáveis para Números/
texto> 4. Nomes de variáveis legais e ilegais 5. Expressões
matemáticas: operadores familiares 6. Expressões matemáticas:
operadores familiares 7 Expressões matemáticas: eliminando
ambiguidade 8. Concatenando strings de texto 9. Prompts 10.
instruções if 11. Operadores de comparação 12. instruções if...else
e else if 13. Testando conjuntos de condições 14. instruções if
aninhadas 15. Arrays 16. Arrays : adicionando e removendo
elementos 17. Arrays: removendo, inserindo e extraindo elementos
18. for loops 19. for loops: sinalizadores, booleanos, comprimento
do array e quebras 20. for loops aninhados 21. Mudando maiúsculas
e minúsculas 22. Strings: medindo comprimento e extrair partes
23. Strings: encontrar segmentos 24. Strings: encontrar um
caractere em um local 25. Strings: substituir caracteres 26.
Arredondar números 27. Gerar números aleatórios 28. Converter
strings em inteiros e decimais 29. Converter strings em números,
números em cordas 30. Controlando o comprimento dos decimais
31. Obtendo a data e hora atuais 32. Extraindo partes da data e
hora 33. Especificando uma data e hora 34. Mudando elementos
de uma data e hora 35. Funções 36. Funções: passando-lhes
dados 37. Funções: passando dados deles de volta 38. Funções:
variáveis locais vs. globais
286
39. instruções switch: como iniciá-las 40.

instruções switch: como completá-las 41. loops
while 42. loops do...while 43. Colocando scripts
44. Comentando 45. Eventos: link 46. Eventos:
botão 47. Eventos : mouse 48. Eventos: campos
49. Lendo valores de campo 50. Configurando
valores de campo 51. Lendo e configurando texto
de parágrafo 52. Manipulando imagens e texto
53. Trocando imagens 54. Trocando imagens e
configurando classes 55. Configurando estilos
56. Direcione todos os elementos por nome de
tag 57. Direcione alguns elementos pelo nome
de tag 58. O DOM 59. O DOM: Pais e filhos 60.
O DOM: Encontrando filhos 61. O DOM: Artefatos
de lixo e nodeType 62. O DOM: Mais maneiras
de direcionar elementos 63 O DOM: Obtendo o
nome de um alvo 64. O DOM: Contando
elementos 65. O DOM: Atributos 66. O DOM:
Nomes e valores de atributos 67. O DOM:
Adicionando nós 68. O DOM: Inserindo nós 69.
Objetos 70. Objetos : Propriedades 71. Objetos:
Métodos 72. Objetos: Construtores 73. Objetos:
Construtores para métodos 74. Objetos: Protótipos
75. O bjects: Verificando propriedades e métodos
76. Controle do navegador: Obtendo e
configurando a URL 77. Controle do navegador:
Obtendo e configurando a URL de outra forma
78. Controle do navegador: Avançar e reverter
79. Controle do navegador: Preenchendo a janela
com conteúdo 80. Navegador control: Controlando
o tamanho e a localização da janela
287
81. Controle de navegador: Testando bloqueadores de pop-

up 82. Validação de formulário: campos de texto 83.
Validação de formulário: menus suspensos 84. Validação de
formulário: botões de opção 85. Validação de formulário:
CEPs 86. Validação de formulário: email 87. Exceções: try e
catch 88. Exceções: throw 89. Manipulação de eventos em
JavaScript
288

A Smarter Way To Learn Javascript PDF Free

Enviado por

Dados do documento

Título original

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

A Smarter Way To Learn Javascript PDF Free

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

Machine Translated by Google

Uma maneira mais inteligente de aprender JavaScript

copyright © 2013 por Mark Myers

41. loops while

83. Validação de formulário: menus

Como usar este livro

Estude, pratique e depois descanse. Se você pretende dominar os fundamentos do JavaScript, em

alert("Obrigado pela sua contribuição!");

alert("Obrigado pela sua contribuição!");

Encontre os exercícios de codificação interativos para este

Por favor, memorize os seguintes fatos.

Meu nome é Mark.

var nome = "Marcar";

Agora o nome da variável se refere à string de texto "Mark".

um novo valor (Ás).

var nome = "Marcar";

nome refere-se a "Marca". Então eu apareço e codifico a linha...

var nacionalidade; nacionalidade

Os nomes de variáveis JavaScript não têm significado inerente ao JavaScript.

var floogle = "Marcar";

...é tão bom quanto...

var floogle = "Marcar";

...depois peça ao JavaScript para imprimir floogle, JavaScript imprime...

var liçãoAutor = "Marcar"; var

var sobrenome = "Smith"; var

var apelido = "Bub";

alert("Obrigado pela sua contribuição!");

1 var thanx = "Obrigado pela sua contribuição!" 2 alerta

Encontre os exercícios de codificação interativos para este

var peso = 150;

...JavaScript, lembrando que o peso se refere a 150, dará a soma 175.

1 var originalNum = 23; 2 var

1 var originalNum = 23; 2 var

1 var originalNum = 90; 2

Se você colocar um número entre aspas e adicionar 7...

1 var originalNum = "23"; 2 var

Você notou o que há de novo em...

1 var número original = 23; 2 var

A instrução atribui à variável newNumber o resultado de uma operação matemática.

var 1ºPresidente = "Washington";

...é ilegal, graças ao "1" inicial no nome da variável.

var prezWhoCame1st = "Washington";

1 var caseQty = 144; 2

...JavaScript converte automaticamente em uma string e a exibe.

Encontre os exercícios de codificação interativos para este

Aqui estão as restantes regras:

Um nome de variável não pode conter espaços.

Encontre os exercícios de codificação interativos para este

var número popular = 4;

Mas você também pode escrever isso.

var número popular = 2 + 2;

Você também pode escrever:

Isso exibe a mensagem "4" em uma caixa de alerta.

var número popular = 12 - 24;

Este atribui o produto de 3 vezes 12, 36, à variável.

var númeropopular = 3 * 12;

Neste, o número 10 é atribuído a uma variável. Então 1 é adicionado à variável, e

1 var num = 10;

Você também pode usar nada além de variáveis.

1 var num = 10;

% é o operador de módulo. Não lhe dá o resultado da divisão de um número por outro.

Encontre os exercícios interativos de codificação para este