01_Use_a_cabeca_JavaScript.pdf

1 Web interativa
Como reagir ao mundo

virtual
Ai, meu Deus! Não percebi que a Web
poderia ser tão “perceptiva”. Ela sabe
o que estou pensando agora?
Cansado de considerar a Web em termos de páginas passivas?

Foi tempo, acabou. São chamadas de livros. E são boas para ler, aprender...muitas coisas boas. Mas não são
interativas. E nem a Web sem um pouco de ajuda do JavaScript. Certamente, você pode enviar um formulário e talvez
fazer um truque aqui e acolá com algum código HTML e CSS esperto, mas estará realmente apenas representando
o Weekend at Bernie’s ao apoiar uma página Web sem vida. A interatividade real requer um pouco mais
de inteligência e muito menos trabalho...mas tem uma compensação muito maior.
usuários necessitados
As pessoas (on-line) têm necessidades

Tudo bem, sabemos que a Web é virtual, mas as pessoas na Web são reais, com
necessidades reais. Necessidades como pesquisar uma receita arrasadora de pão
de carne, fazer o download de sua canção favorita do Meatloaf ou algo ainda tão
grande quanto comprar uma casa nova. Felizmente, a Web diferencia ao priorizar
suas necessidades!
Pronto para localizar uma casa?

Entre a renda anual:
Entrada do
Entre o número de quartos: usuário
Entre o CEP:
Finalmente, um modo fácil de

comprar uma casa on-line. Digito
meu salário, o que estou procurando
e o resto é automático.
2 Capítulo 1
web interativa
Como falar com uma parede... nada acontece

A Web nem sempre é tão responsiva quanto poderia ser. Na verdade, algumas
vezes pode parecer totalmente fria e insensível, desinteressada do mundo externo
e indiferente às necessidades de seus muitos usuários. Você poderia esperar que
quando fornecesse dados assim iria gerar algum tipo de resposta...mas nada
aconteceu. Não é pessoal; a Web estática não conhece nada melhor.
A entrada do usuário... e ainda

nada está acontecendo.
Pronto para localizar uma casa?

Entre o número de quartos: Tem alguém aí?
Entre o CEP:
você está aqui 3

interatividade com o javascript
Mas o JavaScript dá uma resposta

O JavaScript move a chave que transforma uma página Web em
uma experiência interativa. Ele capacita coisas que podem ouvir as
suas necessidades, processar sua entrada e atender aos seus desejos
mais profundos. Tudo bem, talvez seja um esforço, mas o JavaScript
pode transformar uma página Web em um aplicativo interativo, em
oposição a uma página estática e sem vida, e isso é bom!
O usuário digita
informações no formulário.
a ca sa?
Pronto para localizar um
Entre o número de quartos:

Entre o CEP:
Calcula o Preço Localizar Casas
clique! clique!
O usuário clica um botão e O JavaScript começa a

obtém os resultados. trabalhar em resposta
às ações do usuário.
O JavaScript dá vida a uma página Web

permitindo que responda à entrada do usuário.
4 Capítulo 1
web interativa
Entre o número.
A entrada do usuário é
validada para a precisão. Entre o CEP no formulár
ioXXXXX
As informações em
um servidor são ontradas:
pesquisadas usando os As seguintes casas foram enc
parâmetros fornecidos Ver
pelo usuário.
Ver
Ver
Você pode comprar um

a casa de até: R$320.000
,00.
Um cálculo é
feito com base
nos dados
fornecidos pelo
usuário.
você está aqui 5
HTML, CSS e JavaScript
inter
Luzes, câmera, ação!
O JavaScript coloca o HTML e o CSS como uma das três peças da construção da
página Web moderna. O HTML fornece a estrutura, o CSS adiciona o estilo e o
JavaScript inicia e faz as coisas acontecerem. Para encontrar o caminho para uma
página Web interativa, você tem que seguir a trilha da estrutura (HTML) até o
estilo (CSS) e então, a ação (JavaScript). Parecido com o CSS, o código JavaScript
geralmente reside na página Web.
ESTRUTURA
<html>
<head>
...
</head>
HTML
<body>
<div id=”frame”>
casa?</div>
para localizar uma nova
<div id=”header”>Pronto
<div id=”left”>
<style type=” text/c ss”>
/>
ouse”
<img src=”house.png” alt=”H
body {
ESTILO
</div>
font:14px arial;
=”…” method=”POST”>
CSS
<form name=”orderform” action
lign:c
text-ayour enter;income:
annual
<div class=”fi eld”>Enter
} text” size=”12” />
<input id=”income” type=”
</div>
#frame {the number of bedrooms:
<div class=”fi eld”>Enter
text” size=”6” />
width:400px;
<input id=”bedrooms” type=” <script type=”text/javascr
ipt”>
</div>
}
function validateNumber(val
ue) { AÇÃO!
your ZIP code:
<div class=”fi eld”>Enter // Valide o número
#header { size=”10” />
<input id=”zip” type=”text”
JavaScript
// if (!isNumber(value))
font:16px arial;
</div> alert(“Entre o número.”);
font-weight: bold;
”Calcu late Price”/>
<input type=”button” value= }
margin -botto m:15px ; ”/>
”Shop for Houses
<input type=”button” value=
}
</form> lue) {
function validateZIPCode(va
</div> // Valide o código postal
#left {
)
</body> // if (!isZIPCode(value)
fl oat:left;
ário XXXXX.”);
</html> alert(“Entre o CEP no formul
width:110px;
}
}
function calcPrice( ) {
div.fi eld {
var maxPrice =
margin-bottom:10px;
“income”).value * 4;
document.getElementById(
text-align:right;
uma casa até: $” +
alert(“Voce pode comprar
}
maxPrice + “.”);
O HT ML <
}
fornece a function findHouses(form)

{
estrutura. var bedrooms =

“bedrooms”).value;
var zipCode =
“zip”).value;
O CSS adiciona
or
coincidentes a partir do servid
// Exiba uma lista de casas
o toque visual.
form.submit( );
</script>
O JavaScript injeta o toque funcional,

permitindo à página tomar uma ação.
6 Capítulo 1
web interativa
As partes da página
estão lá, mas não estão
a casa? formatadas e não têm
um interesse visual...
A página
parece muito
melhor,
mas não faz
Entre o CEP:
a casa? muita coisa...
Agora,
a página
Entre o CEP: realmente
Calcula o Preço Localizar Casas faz algo!
R$320.000,00.
Você pode comprar uma casa de até:
Obrigado por ouvir, JavaScript!

Estou a ponto de encontrar o
apartamento de solteiro dos
meus sonhos.
O JavaScript entra em ação

quando o usuário pede que a
página execute uma tarefa.
você está aqui 7
por que adicionar o JavaScript?
Não se pode fazer o mesmo

com o HTML e o CSS? A
Web era muito legal antes
do JavaScript, você sabe.
O HTML e o CSS não são realmente interativos

O problema é que o HTML e o CSS não são realmente interativos.
Certamente existem truques CSS que você pode usar para manipular
os estilos em situações muito específicas como, por exemplo, colocar o
mouse sobre os links, mas suas opções serão bem limitadas se estiver
usando apenas o HTML e o CSS.
O JavaScript permite detectar praticamente qualquer coisa que

ocorre em uma página Web, como um usuário clicando botões,
redimensionando a janela do navegador ou fornecendo dados em um
campo de texto. E como o JavaScript é uma linguagem de programação
do script, você pode aprender a escrever o código para responder a
essas interações do usuário como, por exemplo, executar um cálculo,
trocar dinamicamente as imagens na página ou até validar os dados.
Não se preocupe com os detalhes do

Relaxe JavaScript, pelo menos não ainda.
Embora o JavaScript seja capaz de fazer todos os tipos de

coisas, sabemos que você está no início de sua jornada.
Fique certo de que os eventos, funções e muitas outras
partes do quebra-cabeça JavaScript irão juntar-se com
o tempo. Além disso, provavelmente você estará mais à
frente no jogo do que pensa.
HTML + CSS + JavaScript = Interatividade REAL

8 Capítulo 1
web interativa
Aponte seu Lápis Você já sabe mais do que pensa. Veja o código para a
página Web House Finder e escreva o que acha que cada
parte circulada do código JavaScript está fazendo. Não tem
problemas se adivinhar.
<html> ...........................
<head>
<title>House Finder</title> ...........................
<script type=”text/javascript”>
function validateNumber(value) {
...........................
// Valide o número ...........................

alert(“Entre o número.”);
}
function validateZIPCode(value) {
// Valide o código postal
// if (!isZIPCode(value))
alert(“Entre o CEP no formulário XXXXX.”); ...........................
} ...........................
function calcPrice() { ...........................

alue * 4;
var maxPrice = document.getElementById(“income”).v
+ maxPrice +
alert(“You can afford a house that costs up to $”
“.”);
}
function fi ndHouses(form) {
.value;
var bedrooms = document.getElementById(“bedrooms”)
e;
var zipCode = document.getElementById(“zip”).valu
do servidor
// Exiba a lista de casas coincidentes a partir
form.submit();
} ...........................
</script>
...........................
</head>
...........................
<body>
<div id=”header”>Ready to fi nd a new house?</div>
<div id=”left”>
<img src=”house.png” alt=”House” />
</div>
<form name=”orderform” action=”…” method=”POST”> ...........................
<div class=”fi eld”>Entre a renda anual:
<input id=”income” type=”text” size=”12” ...........................
onblur=”validateNumber(this.value)”/></div>
<div class=”fi eld”>Entre o número de quartos:
<input id=”bedrooms” type=”text” size=”6”
<div class=”fi eld”>Entre o CEP:
<input id=”zip” type=”text” size=”10”
onblur=”validateZIPCode(this.value)”/></div>
...........................
<input type=”button” value=”Calcula o preço” ...........................

onclick=”calcPrice();” />
<input type=”button” value=”Localizar casas” ...........................
onclick=”fi ndHouses(this.form);” />

</form>
</div>
</body>
</html>
você está aqui 9

solução inteligente
Aponte seu Lápis

Você já sabe mais do que pensa. Veja o código para a página Web
Solução House Finder e escreva o que acha que cada parte circulada do
código JavaScript está fazendo. Não tem problemas se adivinhar.
<html>
Pede ao usuário que
...........................
<head>
<title>House Finder</title>
forneça um código
...........................
<script type=”text/javascript”>
function validateNumber(value) {
postal no formato com
...........................
// Valide o número cinco dígitos, XXXXX.

...........................
}
function validateZIPCode(value) {
// Valide o código postal
alert(“Entre o CEP no formulário XXXXX.”); Calcula o preço máximo da
...........................
}
casa como quatro vezes
...........................
function calcPrice() {
var maxPrice = document.getElementById(“income”).v
alue * 4; o salário do usuário.
...........................
e + “.”);
alert(“Você pode comprar uma casa até $” + maxPric
}
function fi ndHouses(form) {
.value;
var bedrooms = document.getElementById(“bedrooms”)
e;
var zipCode = document.getElementById(“zip”).valu
do servidor
// Exiba a lista de casas coincidentes a partir
form.submit();
}
</script> Valida o campo income para
...........................
</head> assegurar que um número
...........................
<body> foi fornecido.

...........................
casa?</div>
<div id=”header”>Pronto para localizar uma nova
<div id=”left”>
<img src=”house.png” alt=”House” />
</div>
<form name=”orderform” action=”…” method=”POST”>
<div class=”fi eld”>Entre a renda anual: O valor do campo de
<input id=”income” type=”text” size=”12”
...........................
onblur=”validateNumber(this.value)”/></div> entrada do código postal.

...........................
<div class=”fi eld”>Entre o número de quartos:

<input id=”bedrooms” type=”text” size=”6”
<div class=”fi eld”>Entre o CEP:
<input id=”zip” type=”text” size=”10”
onblur=”validateZIPCode(this.value)”/></div>
<input type=”button” value=”Calcula o preço”
Calcula o preço máximo da
...........................
onclick=”calcPrice();” /> casa quando o usuário clica

<input type=”button” value=”Localizar casas”
...........................
onclick=”fi ndHouses(this.form);” /> o botão Calculate Price.

...........................
</form>
</div>
</body>
</html>
10 Capítulo 1
web interativa
Use a tag <script> para informar ao navegador

que você está escrevendo JavaScript
No momento, iremos colocar o JavaScript diretamente em uma página Web
HTML, exatamente com vimos na última página. A primeira coisa que você tem
que fazer é deixar que o navegador Web saiba que iremos fornecer-lhe o JavaScript,
ao invés do HTML... e é onde a tag <script> entra.
Você pode adicionar uma tag <script> em qualquer lugar em seu HTML, mas
geralmente é melhor colocá-la na <head> de nossa página Web, assim:
<html> Esta tag do script informa

<head> que qualquer coisa depois dela
é uma linguagem de script...
<title>House Finder</title>
... e neste caso, o tip o

Você pode colocar <script type=”text/javascript”> de linguagem de script é
a tag do script JavaScript.
em uma página function validateNumber(value) { Tudo entre as tags do script
HT ML normal, // Valide o número
de abertura e de fechamento
geralmente na // if (!isNumber(value))
é JavaScript... o navegador
seção head. }
sabe tratar isso como uma
linguagem de script, e não
</script>
</head>
HT ML.
A tag do script de fechamento informa ao navegador
<body>
que o HT ML normal está continuando agora.

</body>
</html>
Não existem
Perguntas Idiotas
P: Então qualquer coisa P: Então existem outras P: Meus elementos <script>
que eu coloco dentro da tag linguagens de script que têm que estar na parte
<script> é JavaScript? posso usar? <head> de minha página
R: Não necessariamente... R: Absolutamente. A Microsoft tem
HTML?
a tag <script> informa ao algumas variedades como VBScript R: É uma boa pergunta. Você pode
navegador que uma linguagem de (uma versão de script do Visual colocar os elementos <script> em
script está chegando, mas não tem Basic) e seu tipo Ajax, chamado ASP. qualquer lugar em sua página Web...
que ser JavaScript. A parte do tipo, NET AJAX. Falaremos mais sobre o mas é geralmente considerada uma
type=“text/javascript”, Ajax no Capítulo 12 também. E há prática ruim colocá-los em qualquer
é o que permite ao navegador saber várias outras linguagens de script que lugar, exceto em <head> de sua
que você está para lhe fornecer o você pode usar. Mas para nossas página Web. É como colocar o CSS no
JavaScript especificamente. finalidades, sempre usaremos text/ meio de uma página Web... geralmente
javascript neste livro. é melhor separar o JavaScript, e a
<head> de sua página é um lugar
perfeito para fazer isso.
você está aqui 11
como informar ao navegador o que fazer
Seu navegador Web pode lidar

com o HTML, CSS E JavaScript
Você já sabe que um navegador Web sabe como obter seu HTML e exibi-lo. E
usou o CSS para informar ao navegador como mostrar as diferentes partes de
seu HTML. Considere o JavaScript como apenas outro meio de se comunicar
com o navegador... mas ao invés de dizer ao navegador como exibir algo (como
no HTML ou no CSS), você dará ao navegador alguns comandos para seguir.
1 Você abre um
navegador Web e 2 O servidor Web
digita um URL... descobre qual
página retornar
para esse URL.
3 O servidor fornece
ao seu navegador Web
uma página cheia de
tags HT ML, regras
CSS e JavaScript.
Servidor
Web
O navegador exibe o HT MLo
<html>
4 <head>
usando as regras CSS, tud

...
</head>
a partir da página Web... <body>

...
</body>
</html>
Página Web
casa?
Pronto para localizar uma
Entre a renda anual: 4.5
...e sabe o executar
qualquer JcoavmaS
Entre o CEP:
como dentro dascrtipagt,
Calcula o Preço
Localizar Casas
<script>, para fornecs
Você pode comprar uma casa
de até: R$320.000,00.
interatividade à págin er
a Web.
12 Capítulo 1
web interativa
Não existem
P: Como os navegadores Perguntas Idiotas <script> é para suportar
Web executam o código diversas linguagens de script, você
JavaScript? indica que o código é JavaScript
R: Os navegadores Web têm P: Considerando os usando seu atributo type.
uma parte especial do software problemas de segurança da
Web, o JavaScript é seguro?
P: Vi páginas Web que têm
dentro deles chamada interpretador interatividade como, por
JavaScript e seu serviço é executar
o código JavaScript que aparece
R: Sim, na maior parte. O exemplo, os formulários que
verificam para assegurar
JavaScript é designado totalmente
em uma página. É por isso que para impedir que o código malicioso que a data seja fornecida
você pode ouvir o JavaScript sendo cause problemas. Por exemplo, o corretamente e parecem
descrito como uma linguagem JavaScript não permite a você ler ou fazer isso sem o JavaScript.
interpretada, em oposição a escrever arquivos no disco rígido do É possível?
uma linguagem compilada. As
linguagens compiladas como C++
usuário. Esta limitação acaba com
o potencial de muitos vírus e código
R: Sim. É possível ter
interatividade nas páginas Web
ou C#, por exemplo, devem ser malicioso parecido. Naturalmente, sem o JavaScript, mas em muitos
convertidas por uma ferramenta isso não significa que você não pode casos é ineficiente e desajeitado.
chamada compilador em um escrever um código JavaScript com Por exemplo, a validação dos dados
arquivo de programa executável. erros que torne as páginas Web nos formulários pode ser lidada no
Não é necessário compilar os difíceis de usar. Significa apenas servidor Web quando você envia o
programas JavaScript porque o que é improvável que você coloque formulário. Porém, isso significa que
código JavaScript é interpretado os usuários em sérios riscos com o terá que enviar o formulário inteiro e,
diretamente pelo navegador. JavaScript. E só para lembrar, os erros então, aguardar que o serviço faça
P: Como informo a uma do navegador e hackers espertos
descobriram modos de quebrar da
a validação e retorne os resultados
página Web para começar como uma página nova. Você
a executar o código segurança JavaScript no passado, e pode também validar o formulário
JavaScript? certamente ele não é imbatível. com lápis e papel! A interatividade
R: A maior parte do código P: E a tag <script> no JavaScript ocorre inteiramente no
navegador sem carregar uma nova
JavaScript é executada quando código House Finder... é
HTML ou JavaScript? página, eliminando a transmissão
algo ocorre na página como, por
exemplo, a página sendo carregada
ou o usuário clicando um botão. Um
R: A própria tag <script> é
desnecessária de dados para um
servidor. Não só isso, mas grande
HTML e sua finalidade é fornecer um parte do que o JavaScript tem a
mecanismo JavaScript conhecido meio de misturar o código do script oferecer em termos de interatividade
como “evento” permite a você com o código HTML. O código que não pode ser feita de nenhuma outra
inicializar uma parte do código aparece dentro da tag <script> maneira sem complementos do
JavaScript quando algo de interesse é o código JavaScript. Como a tag navegador de terceiros.
ocorre na página.
Identifique cada parte do código como sendo parte da linguagem JavaScript

padrão ou uma parte personalizada do código criado por um programador
Exercício para a página Web House Finder.
alert JavaScript / Personalizado onblur JavaScript / Personalizado
calcPrice JavaScript / Personalizado onclick JavaScript / Personalizado
zipCode JavaScript / Personalizado findHouses JavaScript / Personalizado
var JavaScript / Personalizado value JavaScript / Personalizado
você está aqui 13

solução do exercício
Identifique cada parte do código como sendo parte da linguagem JavaScript

padrão ou uma parte personalizada do código criado por um programador
para a página Web House Finder.
A caixa pop-up que indica
Exercício um número inválido.
Resolvido
alert JavaScript / Personalizado
<head>
Uma parte personalizada do casa.

e>
<title>House Finder</titl
cript”>
<script type=”text/javas
código que calcula o preço da

alue) {
function validateNumber(v
// Valide o número
} calcPrice JavaScript / Personalizado
function validateZIPCode(
value) {
// Valide o código postal Separa o local de
alert(“Entre o CEP no form
ulário XXXXX.”); armazenamento para uma
} parte dos dados.
function calcPrice() {
var JavaScript / Personalizado
ElementById(“income”).
var maxPrice = document.get
value * 4;
uma casa até $” + O código personalizado
maxPrice
alert(“Você pode comprar
que encontra as casas
+ “.”);
}
coincidentes.
{ findHouses JavaScript / Personalizado
function findHouses(form)
ElementById(“bedrooms”).
var bedrooms = document.get
value; ElementById(“zip”).value
; zipCode JavaScript / Personalizado
var zipCode = document.get
do
s coincidentes a partir
// Exiba uma lista de casa
servidor
form.submit();
Um local de armazenamento
} usado para manter o
</script>
</head> código postal fornecido
<body>
pelo usuário.
<div id=”frame”> iv>
localizar uma nova casa?</d onblur JavaScript / Personalizado
<div id=”header”>Pronto para
<div id=” left ”>
”House” />
<img src=”house.png” alt=
</div> Indica que o usuário foi
<form name=”orderform” acti
<div class=”fi eld” >Ent re
on=”…” method=”POST”>
a renda anual: para o próximo campo de
<input id=”income” type=”te
onblur=”validateNumber(t
xt” size=”12”
his.value)”/></div> entrada.
o número de quartos:
<div class=”fi eld”>Entre value JavaScript / Personalizado
=”text” size=”6”
<input id=”bedrooms” type
his.value)”/></div>
onblur=”validateNumber(t
<div class=”fi eld”>Entre
o CEP: O valor atual do
<input id=”zip” type=”te
ode(
xt” size=”10”
this.value)”/></div> campo de entrada
do código postal.
onblur=” vali date ZIPC
=”bu tton ” valu e=”C alcula o preço”
<input type
onclick=”cal cPri ce() ;” />
e=”Localizar casas”
<input type=”button” valu onclick JavaScript / Personalizado
rm);” />
onclick=”fi ndHouses(this.fo
</form>
</div> Indica que o
</body>
</html> botão Shop foi
clicado.
14 Capítulo 1
web interativa
O melhor amigo virtual do homem... precisa de SUA ajuda

Acabando com a tarefa bem-sucedida de escrever páginas HTML e CSS, você foi
chamado ao escritório de seu chefe para ver sua última invenção on-line: o iRock.
O bichinho de estimação virtual está causando agitação em todas as conferências de Eis o iRock até
brinquedos, mas os usuários beta estão realmente infelizes com o bichinho on-line. o momento...
Aparentemente, os usuários estão clicando na rocha e esperando que algo legal apenas HT ML
aconteça... mas seu chefe nunca pensou nisso. Agora, cabe a você tornar o iRock e CSS. E isso
interativo e conseguir a glória... ou descer ao inferno com o iRock. significa nenhuma
interação com o
usuário.
Os usuários estão clicando
em seu iRock e nada está
acontecendo.
Usuários
beta irados Ele não responde!
congestionando
as linhas
de suporte
técnico. Há algo errado com
meu navegador?
Foi algo que eu disse?
Apenas dê um sinal!
Poder do
Você acha que são os cliques
do meu mouse? cérebro
Que tipos de coisas você acha que o iRock

deve ser capaz de fazer para interagir com
seus usuários?
você está aqui 15

o plano para a interação
Como tornar o iRock interativo

Não só cabe a você tornar o iRock interativo, como também terá que aprender
um pouco do JavaScript no percurso. Tudo bem, entretanto, terá sua rocha de
estimação dizendo olá em pouco tempo.
Eis o que fará no resto do capítulo:
Você já sabe como

1 Crie a página Web HTML iRock. fazer isto.
2 Adicione um alerta JavaScript para Um alerta é o modo
fazer com que a rocha cumprimente do JavaScript exibir
os usuários quando a página Web uma simples caixa de
iRock for carregada. mensagem.
Você está conectando
3 Escreva o código JavaScript para algo que o usuário faz,
solicitar o nome do usuário, imprimir como clicar na rocha de
um cumprimento personalizado e estimação virtual...
fazer a rocha sorrir.
...com a
4 Adicione uma sub-rotina de eventos atividade
para quando os usuários clicarem na designada.
rocha, o código escrito na etapa 3
seja executado.
5 Conquiste a admiração e a generosa

gratidão de seu chefe.
16 Capítulo 1
web interativa
Crie a página Web iRock

Você não poderia encontrar uma página HTML mais simples do que o iRock.
Continue e digite este HTML em seu editor favorito e grave-o como iRock.html.
Você pode fazer download das imagens da rocha de estimação no site Web Head
First Labs, em www.altabooks.com.br.
A página HT ML da
rocha de estimação
<html> é tão chata quanto
<head> a própria rocha... não
<title>iRock - A rocha virtual de estimação </title>
</head> é de se admirar que
seu chefe precise de
<body>
<div style=”margin-top:100px; text-align:center”> sua ajuda.
<img id=”rockImg” src=”rock.png” alt=”iRock” />
</div>
</body>
</html>
<html>
<head>
...
</head>
<body>
...
Faça download do rock.png a no

</body>
</html>
partir dos exemplos on-lineom.br.

site Web www.altabooks.c irock.html
‘Test drive’
Antes de avançar mais, grave e teste sua página Web iRock em seu navegador
Web. Certifique-se de que a sua esteja parecida com a nossa, pois você começará a
adicionar alguma interatividade, no estilo JavaScript.
Não existem
Perguntas Idiotas
P: Este CSS está na tag <div>?
R: Certamente. Boa pergunta.
P: Pensei que fosse realmente uma má idéia
colocar o CSS diretamente em uma página
HTML. O que acontece?
R: Você leu o Use a Cabeça HTML com CSS e XHML,

não leu? Sim, você está certo. Geralmente é melhor colocar
seu CSS em uma tag <style> na <head> de sua
página ou em uma folha de estilo externa. Mas seu chefe
Em poucas páginas, você terá não é codificador e, além disso, torna este primeiro exemplo
muito mais simples. Mas se quiser prosseguir e escrever sua
esta rocha chata sorrindo e própria folha de estilo externa para o iRock, achamos que
conversando com seus usuários. seria muito legal!
você está aqui 17

como iniciar com os eventos
Eventos JavaScript: como dar ao iRock uma voz

Para usar o JavaScript para cumprimentar o usuário quando a página é carregada
pela primeira vez, teremos que resolver dois problemas principais relacionados
ao JavaScript: saber quando a página termina de carregar e saber como exibir um
cumprimento para que o usuário possa vê-lo.
O primeiro problema envolve responder a um evento (o evento de carregamento

da página), ao passo que o segundo envolve usar um recurso JavaScript predefinido,
a caixa de “alerta”. Os eventos são notificações JavaScript que permitem saber
quando algo de interesse ocorreu como, por exemplo, um carregamento da página
(onload) ou um botão sendo clicado (onclick). Você pode responder aos
eventos com seu próprio código JavaScript personalizado.
O evento onload é inicializado
quando a página iRock termina
de carregar no navegador.
onload!
O código para o evento onload Os eventos são notificações

é definido usando o atributo que você^ pode responder
onload da tag <body> na página
Web iRock. com o código JavaScript.
<body onload=”alert(‘Hel
lo, eu sou a rocha de est
imação.’);”>
A função alert( ) informa ao Hello, eu sou a rocha de estimação

navegador para exibir uma caixa de
alerta que cumprimenta o usuário.
18 Capítulo 1
web interativa
Como alertar o usuário com uma função

Um alerta JavaScript é uma janela pop-up, ou caixa, que você pode usar para exibir
informações para o usuário. Exibir uma caixa de alerta envolve escrever o código
para chamar a função alert( ) JavaScript e transmitir-lhe o texto que desejar
exibir. As funções são partes reutilizáveis do código JavaScript que executam tarefas
comuns, como por exemplo, exibir informações em uma janela pop-up.
Quando você vê parênteses imediatamente

alert( ) ao lado de um nome no código JavaScript,
geralmente é uma função.
Um foco no alerta
alert é o nome da função Este é o texto a ser
predefinida que exibe uma exibido na caixa de alerta
caixa de alerta. – coloque-o entre aspas.
alert + ( + Texto a exibir + ) + ;
Toda função JavaScript usa parênteses

para conter as informações sendo
transmitidas para a função – neste
caso, o texto a ser exibido.
Um ponto-e-vírgula marca o final de uma
linha do código JavaScript, um tipo de
ponto no final de uma sentença.
Quando você reúne tudo, obtém uma linha completa de código JavaScript que
chama uma função para exibir o texto de cumprimento em uma caixa de alerta:
alert(‘Hello, eu sou a rocha de estimação.’);
Não estresse os
eventos.
As funções são partes Relaxe
Se todo esse
reutilizáveis do código negócio de eventos
O texto a ser exibido parecer uma tortura, não se
que executam tarefas é colocado entre preocupe porque os eventos

continuarão a se desdobrar (e
comuns. apóstrofos ou aspas. farão mais sentido) conforme

avançar no livro.
você está aqui 19

como dizer olá com um evento
Adicione o cumprimento iRock

Portanto. para cumprimentar os usuários quando eles carregam as imagens iRock,
você precisa adicionar uma sub-rotina de evento onload e um cumprimento
usando a função alert( ) do JavaScript. Adicione esta linha de JavaScript à sua
página irock.html:
<html>
<head>
>
<title>iRock - A rocha virtual de estimação </title
</head>
ção.’);”>
<body onload=”alert(‘Hello, eu sou a rocha de estima
Mesmo que o <div style=”margin-top: 100px; text-a lign:c enter”
<img id=”rockImg” src=”rock.png” alt=”iRock” />
>
evento onload </div>

aplique-se à página </body>
inteira, você pode </html> <html>
defini-lo como um
<head>
...
atributo da tag
</head>
<body>
<body> porque o Lembre-se, seu JavaScript vai

...
</body>
corpo de uma página diretamente em sua página Web. O

</html>
é a parte visível em navegador Web sabe como lidar com

um navegador. o JavaScript, exatamente como
irock.html
faz com o HT ML e o CSS.

Faça um ‘test drive’ de sua rocha interativa
A página iRock agora é um pouco mais interativa graças a uma caixa de
alerta cumprimentando exibida em resposta ao evento onload. Carregue
Assim que a página é
o irock.html em seu navegador Web e veja o que acontece:
carregada, uma caixa
de alerta deverá
aparecer em sua tela
com um cumprimento.
Hello, eu sou a rocha de estimação
20 Capítulo 1
web interativa
Não existem
Pontos de Bala
Perguntas Idiotas
P: De onde vêm os eventos? P: Existem outras funções ■ Os eventos são usados para
responder aos acontecimentos
R: predefinidas como a função
Embora os eventos sejam iniciados alert( )?
por um usuário, eles vêm basicamente
da página Web com o código
do navegador. Por exemplo: uma “tecla R: Sim, muitas. alert( ) é apenas
JavaScript.
pressionada” é um evento inicializado a ponta do iceberg quanto ao código
pelo usuário, mas o navegador deve JavaScript reutilizável e predefinido. ■ O evento onload é
integrar informações sobre o evento Falaremos sobre as funções padrões inicializado quando uma
(tipo qual tecla foi pressionada) e, então, quando virmos os recursos do
transmiti-las para uma função que foi
página termina da carregar.
JavaScript. No final do livro, você até
designada a responder ao evento. estará criando suas próprias funções
personalizadas. ■ Você responde ao evento
P: O que acontece com os
eventos que não têm um código
ligado a eles?
P: Por que o código onload
do iRock mistura aspas e
onload definindo o atributo
onload da tag <body>.
R: Se uma árvore cai e não há

apóstrofos?
■ As funções permitem
ninguém por perto para ouvir, ela fez
barulho? O mesmo ocorre com os
R: O HTML e o JavaScript requerem
que você feche uma seqüência de texto
colocar o código JavaScript em
eventos. Se você não responder a antes de iniciar outra... a menos que
módulos reutilizáveis.
um evento, o navegador prosseguirá use um delimitador diferente (aspa
e ninguém ficará sabendo. Em outras ou apóstrofo). Portanto, nos casos ■ Algumas funções requerem
palavras, responder ou não a onload onde o código JavaScript aparece que você transmita-lhes
não tem significado no carregamento em um atributo HTML (texto dentro
real da página. de texto), você tem que misturar as informações para completarem
aspas e os apóstrofos para solucionar sua tarefa.
P: Você não disse que o código
JavaScript pertencia às tags
esse problema. Não importa quais
você usa para o atributo ou para o ■ A função alert( )
<script>? texto JavaScript, mas seja qual for o
escolhido – terá que ser consistente. é uma função JavaScript
R: Geralmente, sim. Mas você também
pode colocá-lo diretamente em uma
Talvez um exemplo de aspas e
apóstrofos na linguagem esclareça as
predefinida que exibe uma
mensagem de texto em uma
sub-rotina de eventos, como fizemos coisas... segundo o iRock. “O usuário pequena janela pop-up.
com o evento onload. E quando precisar clicou e disse: ‘Olá, alguém aí’”.
executar apenas uma linha do JavaScript,
como para o iRock, essa será geralmente
uma abordagem mais simples.
Quem faz o quê?

Ligar cada parte do código JavaScript ao que ela faz.
onload Exibe uma mensagem de texto em uma janela pop-up.
( ) Termina uma linha de código JavaScript.
alert Indica que a página Web acabou de carregar.
; Coloca as informações transmitidas em uma função.
você está aqui 21

Bien plus que des documents.

01_Use_a_cabeca_JavaScript.pdf

Transféré par

Informations du document

Description :

Droits d'auteur :

Formats disponibles

01_Use_a_cabeca_JavaScript.pdf

Transféré par

Description :

Droits d'auteur :

Formats disponibles

Titres liés

1 Web interativa

Como reagir ao mundo

Cansado de considerar a Web em termos de páginas passivas?

As pessoas (on-line) têm necessidades

Pronto para localizar uma casa?

Finalmente, um modo fácil de

Como falar com uma parede... nada acontece

A entrada do usuário... e ainda

Pronto para localizar uma casa?

Entre o número de quartos: Tem alguém aí?

você está aqui 3

Mas o JavaScript dá uma resposta

Entre o número de quartos:

Calcula o Preço Localizar Casas

O usuário clica um botão e O JavaScript começa a

O JavaScript dá vida a uma página Web

Você pode comprar um

fornece a function findHouses(form)

estrutura. var bedrooms =

O JavaScript injeta o toque funcional,

Obrigado por ouvir, JavaScript!

O JavaScript entra em ação

Não se pode fazer o mesmo

O HTML e o CSS não são realmente interativos

O JavaScript permite detectar praticamente qualquer coisa que

Não se preocupe com os detalhes do

Embora o JavaScript seja capaz de fazer todos os tipos de

HTML + CSS + JavaScript = Interatividade REAL

// Valide o número ...........................

function calcPrice() { ...........................

<input type=”button” value=”Calcula o preço” ...........................

onclick=”ﬁ ndHouses(this.form);” />

você está aqui 9

Aponte seu Lápis

// Valide o número cinco dígitos, XXXXX.

<body> foi fornecido.

onblur=”validateNumber(this.value)”/></div> entrada do código postal.

<div class=”ﬁ eld”>Entre o número de quartos:

onclick=”calcPrice();” /> casa quando o usuário clica

onclick=”ﬁ ndHouses(this.form);” /> o botão Calculate Price.

Use a tag <script> para informar ao navegador

<html> Esta tag do script informa

... e neste caso, o tip o

Seu navegador Web pode lidar

usando as regras CSS, tud

a partir da página Web... <body>

Identifique cada parte do código como sendo parte da linguagem JavaScript

alert JavaScript / Personalizado onblur JavaScript / Personalizado

calcPrice JavaScript / Personalizado onclick JavaScript / Personalizado

zipCode JavaScript / Personalizado findHouses JavaScript / Personalizado

var JavaScript / Personalizado value JavaScript / Personalizado

você está aqui 13

Identifique cada parte do código como sendo parte da linguagem JavaScript

Uma parte personalizada do casa.

código que calcula o preço da

O melhor amigo virtual do homem... precisa de SUA ajuda

Foi algo que eu disse?

Que tipos de coisas você acha que o iRock

você está aqui 15

Como tornar o iRock interativo

Você já sabe como

5 Conquiste a admiração e a generosa

Crie a página Web iRock

Faça download do rock.png a no

partir dos exemplos on-lineom.br.

R: Você leu o Use a Cabeça HTML com CSS e XHML,

você está aqui 17