este é um novo capítulo 85
3
eventos, manipuladores e todo
esse balanço
Um Pouco de Interação
É claro, ele é bonito, mas
este relacionamento seria
tão mais divertido se ele
realmente fizesse alguma
coisa de vez em quando.
Você ainda não alcançou seu usuário. Você aprendeu
os conceitos básicos sobre JavaScript, mas será que consegue
interação com seus usuários? Quando as páginas respondem a
entradas deles, não são mais apenas documentos; são aplicativos
vivos e interativos. Neste capítulo, você aprenderá a lidar com
uma forma de entrada de usuário e a conectar um elemento
<form> antigo de HTML a código real. Talvez soe perigoso, mas
é poderoso. Aperte seu cinto de segurança. Este é um capítulo
que vai diretamente ao ponto, em que vamos de zero a aplicativos
interativos em um segundo.
Homem ou manequim?
Você decide.
PFCG_HeadFirstHTML5Prog.indb 85 05/06/2014 16:17:52
apresentando webville tunes
86
Capítulo 3
Apronte-se para o Webville Tunes
OK, guiamos você através de muitos conceitos básicos de JavaScript
até aqui neste livro e, embora tenhamos falado muito sobre a
criação de aplicativos web, não temos muito a mostrar sobre isso
ainda. Então agora ficaremos sérios (não de verdade! Queremos
dizer apenas desta vez!) e criaremos algo no mundo real.
Que tal gerenciar uma playlist? Vamos chamá-la de algo original,
como... hmm, Webville Tunes.
Adiciona novas músicas a qualquer momento.
Exibe todas suas
músicas favoritas
do Webville Tunes,
diretamente no
navegador.
Totalmente baseado no
navegador. Não há necessidade
de código no lado servidor.
O que iremos criar.
Dado o que você sabe sobre este código:
Consegue imaginar o que este código pode fazer?
window.onload = init;
button.onclick = handleButtonClick;
PFCG_HeadFirstHTML5Prog.indb 86 05/06/2014 16:17:52
events e handlers
você está aqui
87
<!doctype html>
<html lang="en">
<head>
<title>Webville Tunes</title>
<meta charset="utf-8">
<script src="playlist.js"></script>
<link rel="stylesheet" href="playlist.css">
</head>
<body>
<form>
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="add Song">
</form>
<ul id="playlist">
</ul>
</body>
</html>
Não precisamos criar uma página web grande e complexa logo de cara.
Na verdade, podemos começar de forma muito simples. Criaremos
um documento HTML5 com um formulário e um elemento lista para
armazenar a lista de músicas:
Iniciando...
Apenas seu cabeçalho e corpo HTML5 padrão.
Tudo o que precisamos é um formulário simples. Aqui está ele com um campo
de texto para digitar suas músicas. Estamos usando o atributo placeholder
HTML5 que mostra um exemplo do que digitar no campo de entrada.
E temos um botão com
uma id “addButton”
para submeter suas novas
adições à lista de músicas.
Usaremos uma lista para as
músicas. Por enquanto ela está
vazia, mas alteraremos isso com
código JavaScript em um segundo...
Faça um Test Drive
Siga em frente e digite o código acima,
carregue-o no seu navegador favorito e use-o
antes de passar para a próxima página.
Aqui está o que você deverá ver.
Incluímos uma folha de estilo para
dar ao seu aplicativo de lista de
músicas uma ótima aparência *.
*Lembre-se de que você pode baixar a folha de estilo (e todo o código) em http://wickedlysmart.com/hfhtml5
Colocaremos todo o seu JavaScript
no arquivo da lista de músicas.
PFCG_HeadFirstHTML5Prog.indb 87 05/06/2014 16:17:53
sobre o botão click events
88
Capítulo 3
Bom, sim e não. Nada parece acontecer, mas o seu navegador sabe que você clicou
no botão (dependendo do navegador, você também verá o botão pressionado).
A questão real é como fazemos com que o botão execute alguma coisa quando
você clica. O que faremos para que o código em JavaScript seja chamado quando
você clica no botão.
Mas nada acontece quando clico em “Adicionar Música”
1
Precisamos de um pouco de código JavaScript
que seja avaliado, quando o usuário clicar no
botão “Adicionar Música”. Este código (assim
que tiver sido escrito) adiciona uma música à
sua lista de músicas.
Precisamos de duas coisas:
2
Precisamos de uma forma de conectar esse
código, de modo que, quando o botão for
clicado, JavaScript saiba executar o seu
código de “adição de músicas”.
Quando o usuário
clicar (ou tocar em
um dispositivo baseado
em movimentos) em um
botão, queremos saber
que isso aconteceu. Estamos
interessados no evento
“o botão acabou de ser clicado”.
PFCG_HeadFirstHTML5Prog.indb 88 05/06/2014 16:17:54
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.
