Usando for em JavaScript…
26 de abril de 2009 às 00:09 | Publicado em HTML, JavaScript | Deixe um comentárioTags: alert, for, JavaScript
Nosso primeiro post vai ser uma brincadeira. Vamos implementar um código muito simples em JavaScript, para quem está começando a aprender a linguagem e quer se divertir com seus amigos, hehe. Vamos fazer aquela brincadeira bem conhecida do "elefante incomoda muita gente".
O primeiro passo é abrir um editor de texto e salvar o arquivo como elefante.html.
Depois vamos começar montar uma página com HTML. No HTML não importa se está com letra maiúscula ou minúscula. Digite nesse arquivo o código abaixo:
<HTML>
<HEAD>
<TITLE>Elefante</TITLE>
</HEAD>
<BODY>
<!–Criação de um botão–>
<INPUT TYPE="button" NAME="btnElefante" VALUE="Clique aqui!!!">
</BODY>
</HTML>
Agora começaremos a colocar o JavaScript no código. Atenção que essa linguagem é case sensitive, ou seja, existe distinção entre letras maiúsculas e minúsculas! Adicione as linhas abaixo:
<HTML>
<HEAD>
<TITLE>Elefante</TITLE>
<!–Abertura das tags do script–>
<SCRIPT TYPE="text/javascript">
function elefante(){
alert("1 elefante incomoda muita gente!");
for(I=2; I<20; I++){
alert(I + " elefantes incomodam muita gente!");
}
}
</SCRIPT>
</HEAD>
<BODY>
<!–Criação de um botão com o evento onClick–>
<INPUT TYPE="button" NAME="btnElefante" VALUE="Clique aqui!!!" onClick="elefante();">
</BODY>
</HTML>
Explicando o que foi feito: uma função chamada elefante foi criada entre as tags <SCRIPT>. Nela, demos um alert(caixa de mensagem que vai aparecer na tela), mandando escrever a primeira frase pois ela está no singular. Depois fizemos um "for" que incrementa a variável I de 2 até 20. Pode-se alterar o valor , só colocamos até 20 para tornar o teste mais rápido. É interessante testar com 10000 depois e ver o que acontece, hehe.
No INPUT do botão, chamamos a função no evento onClick. Assim, quando o usuário clicar no botão a função será chamada.
Esse código já está pronto. Porém, ainda não está igual à brincadeira original. Deixamos o código completo abaixo para vocês implementarem. Qualquer dúvida, pedido ou sugestão é só deixar um comentário!
<HTML>
<HEAD>
<TITLE>Elefante</TITLE>
<!–Abertura das tags do script–>
<SCRIPT TYPE="text/javascript">
function elefante(){
alert("1 elefante incomoda muita gente!");
alert("2 elefantes incomodam incomodam muito mais");
inc = "incomodam incomodam";
for(I=3; I<20; I++){
inc = inc + " incomodam incomodam";
alert(I + " elefantes incomodam muita gente!");
alert(I + 1 + " elefantes " + inc + " muito mais!");
I = I + 1;
}
}
</SCRIPT>
</HEAD>
<BODY>
<!–Criação de um botão com o evento onClick–>
<INPUT TYPE="button" NAME="btnElefante" VALUE="Clique aqui!!!" onClick="elefante();">
</BODY>
</HTML>
No próximo post sobre JavaScript usaremos este último exemplo com a função confirm() e mostraremos como colocar um código pela URL, sem precisar usar uma página HTML para rodá-lo. Até a próxima!
Escrito por Luísa Pèret Moraes e Paula Pèret Moraes
Blog no WordPress.com. | Tema: Pool até Borja Fernandez.
Entradas e comentários feeds.
