este é um novo capítulo 35
2
apresentando JavaScript e DOM
Um Pouco de Código
JavaScript lhe levará a novos lugares. Você já sabe
tudo sobre marcação HTML (conhecida como estrutura) e sabe
tudo sobre estilo CSS (conhecido como apresentação), mas ainda
está faltando o JavaScript (conhecido como comportamento). Se
tudo o que você souber for relacionado à estrutura e apresentação,
certamente poderá criar algumas páginas com ótima aparência,
mas elas ainda serão apenas páginas. Quando você adiciona
comportamento com JavaScript, pode criar uma experiência interativa
ou, melhor ainda, pode criar aplicativos web completos. Apronte-se
para adicionar a habilidade mais interessante e versátil ao seu kit de
ferramentas web: JavaScript e programação!
E, se você precisar de
mais motivação, a mais
lucrativa também!
PFCG_HeadFirstHTML5Prog.indb 35 05/06/2014 16:17:27
como funciona o javascript
36
Capítulo 2
Como JavaScript funciona
Nosso objetivo é escrever código em JavaScript que seja
executado no navegador, quando sua página web for
carregada — esse código poderia responder a ações do
usuário, atualizar ou alterar a página, comunicar-se com
serviços web e, de modo geral, tornar sua página mais
parecida com um aplicativo do que com um documento.
Vejamos como tudo isso funciona:
html
head
title script
body
h1 ph2
em
Você cria sua
marcação HTML e seu
código em JavaScript
e os coloca em
arquivos, digamos,
index.html e index.js
(ou podem ambos ir
no arquivo HTML).
Escrevendo
<html>
<head>
<script>
var x = 49;
</script>
<body>
<h1>My first JavaScript</
h1>
<p></p>
<script>
x = x + 2;
</script>
</body>
</html>
JavaScript continua a
ser executado, usando
o DOM para examinar
a página, alterá-la,
receber eventos da
mesma ou solicitar
ao navegador que
recupere outros dados
do servidor web.
Executando
O navegador recupera
e carrega sua página,
analisando seu conteúdo
de cima para baixo.
Quando encontra
JavaScript, analisa o
código e verifica se
está correto, e, então,
o executa.
O navegador também
cria um modelo interno
da página HTML
chamado DOM.
Navegador
(Browser)
Carregando
html
head
title script
body
h1 ph2
em
1 2 3
PFCG_HeadFirstHTML5Prog.indb 36 05/06/2014 16:17:28
javascript e o dom
você está aqui
37
O que você pode fazer com JavaScript?
demonstrativos
looping
condicionais
Assim que você tiver uma página com um elemento
<script> (ou uma referência a um arquivo JavaScript
separado), pode começar a codificar. JavaScript é
uma linguagem de programação madura e
você pode fazer com ela quase qualquer
coisa que faria com outras linguagens, e até
mais, porque estamos programando dentro
de uma página web!
Você pode mandar JavaScript:
1
criar um comando
2
fazer coisas mais de uma vez
3
tomar decisões
Crie uma variável e atribua valores,
adicione coisas, use a funcionalidade
interna de uma biblioteca JavaScript.
Execute comandos repetidamente, tantas vezes quantas você precisar.
Escreva código que seja condicional, dependendo do estado do seu aplicativo.
var temp = 98.6;
var beanCounter = 4;
var reallyCool = true;
var motto = "I Rule";
temp = (temp - 32) * 5 / 9;
motto = motto + " and so do you!";
var pos = Math.random();
while (beanCounter > 0) {
processBeans();
beanCounter = beanCounter - 1;
}
if (isReallyCool) {
invite = "You're invited!";
} else {
invite = "Sorry, we're at capacity.";
}
PFCG_HeadFirstHTML5Prog.indb 37 05/06/2014 16:17:29
declarando variáveis
38
Capítulo 2
Declarando uma variável
Variáveis armazenam coisas. Com JavaScript, elas podem
armazenar muitas coisas diferentes. Vamos ver algumas
dessas variáveis que armazenam coisas:
var winners = 2;
var boilingPt = 212.0;
var name = "Dr. Evil";
var isEligible = false;
Valor numérico inteiro.
Ou valor de ponto flutuante.
Ou strings de caracteres
(chamamos apenas de “strings”).
Ou um valor booleano, que
pode ser verdadeiro (true)
ou falso (false).
vencedores
2
nome
“Doutor
Evil”
qualificado
falso
pontoDeFusão
212.0
Variáveis são
contêineres
para armazenar
valores. Variáveis
JavaScript não
têm tipos estritos,
de forma que
qualquer variável
pode armazenar
um número, uma
string ou um
valor booleano.
1
O primeiro passo é declarar sua variável, neste caso,
scoops (conchas). Perceba que JavaScript, diferentemente
de algumas linguagens, não precisa de um tipo para a
variável, ele simplesmente cria um contêiner genérico
que pode armazenar muitas coisas:
Três passos na criação de uma variável
var scoops = 10;
scoops
Sou uma variável pronta
para armazenar algo.
2
A seguir, precisamos de um valor para colocar na variável.
Podemos especificar um valor de algumas maneiras:
var scoops = 10;
var scoops = totalScoops / people;
var scoops = Math.random() * 10;
Seu valor pode ser um literal,
como um número ou uma string.
Ou pode ser o resultado
de uma expressão.
Ou usar uma das funções
das bibliotecas internas de
JavaScript, como um gerador
de números aleatórios, para
criar um valor. Posteriormente,
veremos mais sobre isto e suas
próprias funções.
1
3
2
PFCG_HeadFirstHTML5Prog.indb 38 05/06/2014 16:17:30
Get Use A Cabeça! Programação Em HTML5 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
