Use a Cabeca JavaScript

Como reagir ao mundo virtual

1 Web interativa

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.

Ai, meu Deus! Não percebi que a Web poderia ser tão “perceptiva”. Ela sabe

o que estou pensando agora?

Capítulo 12

usuários necessitados

As pessoas (on-line) têm necessidadesTudo 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!

Finalmente, um modo fácil de comprar uma casa on-line. Digito

meu salário, o que estou procurando e o resto é automático.

Entrada do usuário

Pronto para localizar uma casa?

Entre a renda anual:

Entre o número de quartos:

Entre o CEP:

3você está aqui

web interativa

A entrada do usuário... e ainda nada está acontecendo.

Como falar com uma parede... nada aconteceA 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.

Tem alguém aí?




Entre o CEP:

Capítulo 14

interatividade com o javascript

Mas o JavaScript dá uma respostaO 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 JavaScript dá vida a uma página Web permitindo que responda à entrada do usuário.

O usuário digita informações no formulário.

O JavaScript começa a trabalhar em resposta às ações do usuário.

clique!clique!

O usuário clica um botão e obtém os resultados.




Entre o CEP:

Calcula o Preço Localizar Casas

5você está aqui

web interativa

A entrada do usuário é validada para a precisão.

As informações em um servidor são pesquisadas usando os parâmetros fornecidos pelo usuário.

Um cálculo é feito com base nos dados fornecidos pelo usuário.

Entre o número.

Entre o CEP no formulárioXXXXX

As seguintes casas foram encontradas:

Ver

Ver

Ver

Você pode comprar uma casa de até: R$320.000,00.

Capítulo 16

<html>

<head>

...

</head>

<body>

<div id=”frame”>

<div id=”header”>Pronto para localizar uma nova ca

sa?</div>

<div id=”left”>

<img src=”house.png” alt=”House” />

</div>

<form name=”orderform” action=”…” method=”POST”>

<div class=”fi eld”>Enter your annual income:

<input id=”income” type=”text” size=”12” />

</div>

<div class=”fi eld”>Enter the number of bedrooms:

<input id=”bedrooms” type=”text” size=”6” />

</div>

<div class=”fi eld”>Enter your ZIP code:

<input id=”zip” type=”text” size=”10” />

</div>

<input type=”button” value=”Calculate Price”/>

<input type=”button” value=”Shop for Houses”/>

</form>

</div>

</body>

</html>

<style type=”text/css”>

body {

font:14px arial;

text-align:center;

}

#frame {

width:400px;

}

#header {

font:16px arial;

font-weight:bold;

margin-bottom:15px;

}

#left {

fl oat:left;

width:110px;

}

div.fi eld {

margin-bottom:10px;

text-align:right;

}

<

HTML, CSS e JavaScript

O HT ML fornece a estrutura.

O JavaScript injeta o toque funcional, permitindo à página tomar uma ação.

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.

inter

ESTRUTURA

ESTILO

AÇÃO!

HTML

CSS

JavaScript

O CSS adiciona o toque visual.

<script type=”text/javascript”>

function validateNumber(value) {

// Valide o número

// if (!isNumber(value))

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( ) {

var maxPrice =

document.getElementById(“income”).value * 4;

alert(“Voce pode comprar uma casa até: $” +

maxPrice + “.”);

}

function findHouses(form) {

var bedrooms =

document.getElementById(“bedrooms”).value;

var zipCode =

document.getElementById(“zip”).value;

// Exiba uma lista de casas coincidentes a partir do s

ervidor

form.submit( );

}

</script>

7você está aqui

web interativa




Entre o CEP:

O JavaScript entra em ação quando o usuário pede que a página execute uma tarefa.

Obrigado por ouvir, JavaScript! Estou a ponto de encontrar o apartamento de solteiro dos

meus sonhos.

As partes da página estão lá, mas não estão formatadas e não têm um interesse visual...

A página parece muito melhor, mas não faz muita coisa...

Agora, a página realmente faz algo!




Entre o CEP:



Capítulo 18

por que adicionar o JavaScript?

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.

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.

Relaxe Não se preocupe com os detalhes do JavaScript, pelo menos não ainda.

HTML + CSS + JavaScript = Interatividade REAL

Não se pode fazer o mesmo com o HTML e o CSS? A

Web era muito legal antes do JavaScript, você sabe.

9você está aqui

web interativa

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>



// Valide o número



} function validateZIPCode(value) {




} function calcPrice() {

var maxPrice = document.getElementById(“income”).value * 4;

alert(“You can afford a house that costs up to $” + maxPrice +

“.”); } function fi ndHouses(form) {

var bedrooms = document.getElementById(“bedrooms”).value;

var zipCode = document.getElementById(“zip”).value;

// Exiba a lista de casas coincidentes a partir

do servidor

form.submit(); } </script> </head> <body> <div id=”frame”> <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>

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

Aponte seu Lápis

Capítulo 110

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.

solução inteligente

Pede ao usuário que forneça um código postal no formato com cinco dígitos, XXXXX.

Calcula o preço máximo da casa como quatro vezes o salário do usuário.

Valida o campo income para assegurar que um número foi

fornecido.

O valor do campo de entrada do

código postal.

Calcula o preço máximo da casa quando o usuário clica o botão Calculate Price.

<html> <head> <title>House Finder</title>



// Valide o número



} function validateZIPCode(value) {





var maxPrice = document.getElementById(“income”).value * 4;

alert(“Você pode comprar uma casa até $” + maxPrice + “.”);

} function fi ndHouses(form) {

var bedrooms = document.getElementById(“bedrooms”).value;

var zipCode = document.getElementById(“zip”).value;

// Exiba a lista de casas coincidentes a partir

do servidor

form.submit(); } </script> </head> <body> <div id=”frame”> <div id=”header”>Pronto para localizar uma nova c

asa?</div>

<div id=”left”> <img src=”house.png” alt=”House” />

</div> <form name=”orderform” action=”…” method=”POST”>














</form> </div> </body></html>

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

...........................

Aponte seu Lápis Solução

11você está aqui

web interativa

Use a tag <script> para informar ao navegador que você está escrevendo JavaScriptNo 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><head>

<title>House Finder</title>

Você pode colocar a tag do script em uma página HT ML normal, geralmente na seção head.

Esta tag do script informa que qualquer coisa depois dela é uma linguagem de script...

... e neste caso, o tipo de linguagem de script é JavaScript.<script type=”text/javascript”>

function validateNumber(value) {// Valide o número// if (!isNumber(value))alert(“Entre o número.”);

}

</script></head>

<body>

</body></html>

Tudo entre as tags do script de abertura e de fechamento é JavaScript... o navegador sabe tratar isso como uma linguagem de script, e não HT ML.

A tag do script de fechamento informa ao navegador que o HT ML normal está continuando agora.

Não existem Perguntas Idiotas

P: Então qualquer coisa que eu coloco dentro da tag <script> é JavaScript?

R: Não necessariamente... a tag <script> informa ao navegador que uma linguagem de script está chegando, mas não tem que ser JavaScript. A parte do tipo, type=“text/javascript”, é o que permite ao navegador saber que você está para lhe fornecer o JavaScript especificamente.

P: Então existem outras linguagens de script que posso usar?

R: Absolutamente. A Microsoft tem algumas variedades como VBScript (uma versão de script do Visual Basic) e seu tipo Ajax, chamado ASP.NET AJAX. Falaremos mais sobre o Ajax no Capítulo 12 também. E há várias outras linguagens de script que você pode usar. Mas para nossas finalidades, sempre usaremos text/javascript neste livro.

P: Meus elementos <script> têm que estar na parte <head> de minha página HTML?

R: É uma boa pergunta. Você pode colocar os elementos <script> em qualquer lugar em sua página Web... mas é geralmente considerada uma prática ruim colocá-los em qualquer lugar, exceto em <head> de sua página Web. É como colocar o CSS no meio de uma página Web... geralmente é melhor separar o JavaScript, e a <head> de sua página é um lugar perfeito para fazer isso.

Capítulo 112

como informar ao navegador o que fazer

Seu navegador Web pode lidar com o HTML, CSS E JavaScriptVocê 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.

...e sabe como executar qualquer JavaScript, como dentro das tags <script>, para fornecer interatividade à página Web.

<html> <head> ... </head>

<body> ... </body></html>

Página Web

Servidor Web

Você abre um navegador Web e digita um URL...

1

2 O servidor Web 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.

4 O navegador exibe o HT ML usando as regras CSS, tudo a partir da página Web...

4.5




Entre o CEP:



13você está aqui

web interativa

Não existem Perguntas IdiotasP: Como os navegadores

Web executam o código JavaScript?

R: Os navegadores Web têm uma parte especial do software dentro deles chamada interpretador JavaScript e seu serviço é executar o código JavaScript que aparece em uma página. É por isso que você pode ouvir o JavaScript sendo descrito como uma linguagem interpretada, em oposição a uma linguagem compilada. As linguagens compiladas como C++ ou C#, por exemplo, devem ser convertidas por uma ferramenta chamada compilador em um arquivo de programa executável. Não é necessário compilar os programas JavaScript porque o código JavaScript é interpretado diretamente pelo navegador.

P: Como informo a uma página Web para começar a executar o código JavaScript?

R: A maior parte do código JavaScript é executada quando algo ocorre na página como, por exemplo, a página sendo carregada ou o usuário clicando um botão. Um mecanismo JavaScript conhecido como “evento” permite a você inicializar uma parte do código JavaScript quando algo de interesse ocorre na página.

P: Considerando os problemas de segurança da Web, o JavaScript é seguro?

R: Sim, na maior parte. O JavaScript é designado totalmente para impedir que o código malicioso cause problemas. Por exemplo, o JavaScript não permite a você ler ou escrever arquivos no disco rígido do usuário. Esta limitação acaba com o potencial de muitos vírus e código malicioso parecido. Naturalmente, isso não significa que você não pode escrever um código JavaScript com erros que torne as páginas Web difíceis de usar. Significa apenas que é improvável que você coloque os usuários em sérios riscos com o JavaScript. E só para lembrar, os erros do navegador e hackers espertos descobriram modos de quebrar da segurança JavaScript no passado, e certamente ele não é imbatível.

P: E a tag <script> no código House Finder... é HTML ou JavaScript?

R: A própria tag <script> é HTML e sua finalidade é fornecer um meio de misturar o código do script com o código HTML. O código que aparece dentro da tag <script> é o código JavaScript. Como a tag

<script> é para suportar diversas linguagens de script, você indica que o código é JavaScript usando seu atributo type.

P: Vi páginas Web que têm interatividade como, por exemplo, os formulários que verificam para assegurar que a data seja fornecida corretamente e parecem fazer isso sem o JavaScript. É possível?

R: Sim. É possível ter interatividade nas páginas Web sem o JavaScript, mas em muitos casos é ineficiente e desajeitado. Por exemplo, a validação dos dados nos formulários pode ser lidada no servidor Web quando você envia o formulário. Porém, isso significa que terá que enviar o formulário inteiro e, então, aguardar que o serviço faça a validação e retorne os resultados como uma página nova. Você pode também validar o formulário com lápis e papel! A interatividade JavaScript ocorre inteiramente no navegador sem carregar uma nova página, eliminando a transmissão desnecessária de dados para um servidor. Não só isso, mas grande parte do que o JavaScript tem a oferecer em termos de interatividade não pode ser feita de nenhuma outra maneira sem complementos do navegador de terceiros.

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.Exercício

alert JavaScript / Personalizado onblur JavaScript / Personalizado

calcPrice JavaScript / Personalizado onclick JavaScript / Personalizado

zipCode JavaScript / Personalizado findHouses JavaScript / Personalizado

var JavaScript / Personalizado value JavaScript / Personalizado

Capítulo 114

<head> <title>House Finder</tit

le>



// Valide o número



} function validateZIPCo

de(value) {





var maxPrice = document.getElementById(“income”)

.

value * 4; alert(“Você pode com

prar uma casa até $” +

maxPrice + “.”); } function findHouses(for

m) {

var bedrooms = document.getElementById(“bedrooms

”).

value; var zipCode = docume

nt.getElementById(“zip”).value;

// Exiba uma lista d

e casas coincidentes a partir do

servidor form.submit();

} </script>

</head> <body> <div id=”frame”>

<div id=”header”>Pronto para localizar uma nova casa?<

/div>

<div id=”left”>

<img src=”house.png” alt=”House” />

</div>

<form name=”orderform” action=”…” method=”POST”>














</form>

</div> </body></html>

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.

ExercícioResolvido

solução do exercício

Um local de armazenamento usado para manter o código postal fornecido pelo usuário.

Indica que o usuário foi para o próximo campo de entrada.

O valor atual do campo de entrada do código postal.

A caixa pop-up que indica um número inválido.

alert JavaScript / Personalizado

calcPrice JavaScript / Personalizado

Uma parte personalizada do código que calcula o preço da casa.

var JavaScript / Personalizado

Separa o local de armazenamento para uma parte dos dados.

findHouses JavaScript / Personalizado

O código personalizado que encontra as casas coincidentes.

zipCode JavaScript / Personalizado

onblur JavaScript / Personalizado

value JavaScript / Personalizado

Indica que o botão Shop foi clicado.

onclick JavaScript / Personalizado

15você está aqui

web interativa

O melhor amigo virtual do homem... precisa de SUA ajudaAcabando 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 brinquedos, mas os usuários beta estão realmente infelizes com o bichinho on-line.

Aparentemente, os usuários estão clicando na rocha e esperando que algo legal aconteça... mas seu chefe nunca pensou nisso. Agora, cabe a você tornar o iRock interativo e conseguir a glória... ou descer ao inferno com o iRock.

Que tipos de coisas você acha que o iRock deve ser capaz de fazer para interagir com seus usuários?

Poder do cérebro

Eis o iRock até o momento... apenas HT ML e CSS. E isso 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 congestionando as linhas de suporte técnico.

Você acha que são os cliques do meu mouse?

Ele não responde!

Há algo errado com meu navegador?

Foi algo que eu disse?

Apenas dê um sinal!

Capítulo 116

o plano para a interação

Como tornar o iRock interativoNã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:

1

2

3

4

5

Você já sabe como fazer isto.

Um alerta é o modo do JavaScript exibir uma simples caixa de mensagem.

...com a atividade designada.

Você está conectando algo que o usuário faz, como clicar na rocha de estimação virtual...

Crie a página Web HTML iRock.

Adicione um alerta JavaScript para fazer com que a rocha cumprimente os usuários quando a página Web iRock for carregada.

Escreva o código JavaScript para solicitar o nome do usuário, imprimir um cumprimento personalizado e fazer a rocha sorrir.

Adicione uma sub-rotina de eventos para quando os usuários clicarem na rocha, o código escrito na etapa 3 seja executado.

Conquiste a admiração e a generosa gratidão de seu chefe.

17você está aqui

web interativa


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 não é codificador e, além disso, torna este primeiro exemplo muito mais simples. Mas se quiser prosseguir e escrever sua própria folha de estilo externa para o iRock, achamos que seria muito legal!

Crie a página Web iRockVocê 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.

<html> <head> <title>iRock - A rocha virtual de estimação </title> </head>

<body> <div style=”margin-top:100px; text-align:center”> <img id=”rockImg” src=”rock.png” alt=”iRock” /> </div> </body></html>



irock.html

Em poucas páginas, você terá esta rocha chata sorrindo e conversando com seus usuários.

A página HT ML da rocha de estimação é tão chata quanto a própria rocha... não é de se admirar que seu chefe precise de sua ajuda.

Faça download do rock.png a partir dos exemplos on-line no site Web www.altabooks.com.br.

‘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.

Capítulo 118

como iniciar com os eventos

Eventos JavaScript: como dar ao iRock uma vozPara 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.

onload!

O evento onload é inicializado quando a página iRock termina de carregar no navegador.

O código para o evento onload é definido usando o atributo onload da tag <body> na página Web iRock.

A função alert( ) informa ao navegador para exibir uma caixa de alerta que cumprimenta o usuário.

<body onload=”alert(‘Hello, eu sou a rocha de estimação.’);”>

Os eventos são notificações que você pode responder com o código JavaScript.

^

Hello, eu sou a rocha de estimação

19você está aqui

web interativa

Como alertar o usuário com uma funçãoUm 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.

alert( )Quando você vê parênteses imediatamente ao lado de um nome no código JavaScript, geralmente é uma função.

Um foco no alerta

alert + ( + Texto a exibir + ) + ;

Este é o texto a ser exibido na caixa de alerta – coloque-o entre aspas.

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.

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.

alert é o nome da função predefinida que exibe uma caixa de alerta.

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:

O texto a ser exibido é colocado entre apóstrofos ou aspas.

As funções são partes reutilizáveis do código que executam tarefas comuns.

alert(‘Hello, eu sou a rocha de estimação.’);

Não estresse os eventos.

S e t o d o e s s e negócio de eventos

parecer uma tortura, não se preocupe porque os eventos continuarão a se desdobrar (e farão mais sentido) conforme avançar no livro.

Relaxe

Capítulo 120

como dizer olá com um evento

Adicione o cumprimento iRockPortanto. 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>

<body onload=”alert(‘Hello, eu sou a rocha de estimação.’);”>

<div style=”margin-top:100px; text-align:center”>

<img id=”rockImg” src=”rock.png” alt=”iRock” />

</div> </body></html>

Mesmo que o evento onload aplique-se à página inteira, você pode defini-lo como um atributo da tag <body> porque o corpo de uma página é a parte visível em um navegador.

Lembre-se, seu JavaScript vai diretamente em sua página Web. O navegador Web sabe como lidar com o JavaScript, exatamente como faz com o HT ML e o CSS.

Faça um ‘test drive’ de sua rocha interativaA página iRock agora é um pouco mais interativa graças a uma caixa de alerta cumprimentando exibida em resposta ao evento onload. Carregue o irock.html em seu navegador Web e veja o que acontece: Assim que a página é

carregada, uma caixa de alerta deverá aparecer em sua tela com um cumprimento.



irock.html

Hello, eu sou a rocha de estimação

21você está aqui

web interativa


P: De onde vêm os eventos?

R: Embora os eventos sejam iniciados por um usuário, eles vêm basicamente do navegador. Por exemplo: uma “tecla pressionada” é um evento inicializado pelo usuário, mas o navegador deve integrar informações sobre o evento (tipo qual tecla foi pressionada) e, então, transmiti-las para uma função que foi designada a responder ao evento.

P: O que acontece com os eventos que não têm um código ligado a eles?

R: Se uma árvore cai e não há ninguém por perto para ouvir, ela fez barulho? O mesmo ocorre com os eventos. Se você não responder a um evento, o navegador prosseguirá e ninguém ficará sabendo. Em outras palavras, responder ou não a onload não tem significado no carregamento real da página.

P: Você não disse que o código JavaScript pertencia às tags <script>?

R: Geralmente, sim. Mas você também pode colocá-lo diretamente em uma sub-rotina de eventos, como fizemos com o evento onload. E quando precisar executar apenas uma linha do JavaScript, como para o iRock, essa será geralmente uma abordagem mais simples.

Pontos de Bala

■ Os eventos são usados para responder aos acontecimentos da página Web com o código JavaScript.

■ O evento onload é inicializado quando uma página termina da carregar.

■ Você responde ao evento onload definindo o atributo onload da tag <body>.

■ As funções permitem colocar o código JavaScript em módulos reutilizáveis.

■ Algumas funções requerem que você transmita-lhes informações para completarem sua tarefa.

■ A função alert( ) é uma função JavaScript predefinida que exibe uma mensagem de texto em uma pequena janela pop-up.

P: Existem outras funções predefinidas como a função alert( )?

R: Sim, muitas. alert( ) é apenas a ponta do iceberg quanto ao código JavaScript reutilizável e predefinido. Falaremos sobre as funções padrões quando virmos os recursos do JavaScript. No final do livro, você até estará criando suas próprias funções personalizadas.

P: Por que o código onload do iRock mistura aspas e apóstrofos?

R: O HTML e o JavaScript requerem que você feche uma seqüência de texto antes de iniciar outra... a menos que use um delimitador diferente (aspa ou apóstrofo). Portanto, nos casos onde o código JavaScript aparece em um atributo HTML (texto dentro de texto), você tem que misturar as aspas e os apóstrofos para solucionar esse problema. Não importa quais você usa para o atributo ou para o texto JavaScript, mas seja qual for o escolhido – terá que ser consistente. Talvez um exemplo de aspas e apóstrofos na linguagem esclareça as coisas... segundo o iRock. “O usuário clicou e disse: ‘Olá, alguém aí’”.

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.

Use a Cabeca JavaScript

Documents

Transcript of Use a Cabeca JavaScript