Este documento resume estruturas de controle e eventos em JavaScript em 3 frases:
Estruturas de controle como if/else e loops permitem controlar o fluxo de execução de um programa com base em condições. Eventos como onClick e onChange podem disparar funções JavaScript durante interações do usuário. Diferentes estruturas de controle como switch e for executam código de maneiras específicas e incluem palavras-chave como break para controle adicional do fluxo.
4. características
Estruturas de controle (ou condicionais) são executadas caso
um teste seja atendido
Permite mudar a direção de acordo com determinada condição
Permitem controlar o fluxo do programa
Tomar alguma decisão baseado no valor de uma variável
Quais partes do programa e quantas vezes serão executadas
São várias (if/else, while, for, switch, continue, break..)
5. condição if
if é a estrutura mais comum
verifica uma condição, se é
satisfeita, permite que o se a condição
é verdadeira
programa execute 1 código. condição
Se não for satisfeita, pula o
código condicional
código. se a condição
é falsa
sintaxe
if (condição)
{
código condicional
}
6. condição if /else
else permite a execução e outro
trecho de código caso a
condição não seja satisfeita. se a condição
é verdadeira
após a chave de fechamento do condição
if, inicia-se o código do
procedimento do else, caso o if código de if
falhar se a condição
é falsa
sintaxe
if (condição) código de else
{
código condicional
} else
{
código condicional alternativo
}
7. If, else e else if - (exemplos)
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10) {
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16) {
document.write("<b>Good day</b>");
}
else {
document.write("<b>Hello World!</b>");
}
</script>
else if permite adicionar condições extra, sem limites,
podendo ficar o else final caso tudo falhar
8. loop while
é um loop que só termina
quando a sua condição for
avaliada como false.
*importante ter algo dentro do código condicional
código que afete a condição
(risco de loop infinito -
condição
travamento)
se a condição
sintaxe é verdadeira
se a condição
while (condição) é falsa
{
código condicional
}
9. loop while - (exemplo)
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5) {
document.write("O número é: " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
10. loop do-while
um loop do-while é quase idêntico
ao while.
diferença: o código condicional
código condicional
(sempre executado pelo menos 1
vez) vem antes da condição.
sintaxe
condição
do se a condição
{ é verdadeira
código condicional
} se a condição
while (condição) é falsa
11. loop for
usa para repetir mais
instruções um determinado declarar contador
número de vezes
tem 3 partes incluídas entre os
incrementar contador
parênteses (iniciação da
variável, a condição e o
incremento/decremento) código condicional
sintaxe
condição
se a condição
for (iniciaçao; condição; é verdadeira
atualização)
{ se a condição
código para cada repetição é falsa
}
12. loop for - (exemplo)
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0; i<=5; i++) {
document.write("O número é:" + i);
document.write("<br />");
}
</script>
</body>
</html>
13. for... in
a declaração for...in é
<html> usada para repetir
<body>
elementos de um array
<script type="text/javascript"> ou propriedades de um
var x; objeto.
var mycars = new Array();
faz a contagem sempre
mycars[0] = "Mercedes";
crescente.
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars) {
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
14. switch
usado quando se tem uma
<script type="text/javascript">
única/mesma avaliação para
var d=new Date(); comparar com vários valores
theDay=d.getDay();
diferentes.
switch (theDay) {
case 5: informo a expressão (entre
document.write("Sexta"); parênteses) e comparo com
break;
case 6: os casos conhecidos.
document.write("Sábado");
break; posso usar a palavra-chave
case 0:
document.write("Domingo"); default, equivalente ao else
break; do if como um caso padrão.
default:
document.write("Outro dia da semana");
no if, preciso trazer a variável
} em todas as avaliações, no
</script>
switch, apenas no início.
15. break
são utilizados para controle
<html> de estruturas fechadas como
<body>
for, while e switch.
<script type="text/javascript">
var i=0; Break serve para sair de uma
for (i=0; i<=10; i++) { estrutura, de um for neste
if (i==3) { caso do exemplo, sem ter que
break;
chegar até o fim.
}
document.write("O numero é:" + i);
document.write("<br />");
}
</script>
</body>
</html>
16. continue
também serve para controlar
<html> estruturas de dados fechadas,
<body>
assim como o break.
<script type="text/javascript">
var i=0; a principal diferença é que, ao
for (i=0; i<=10; i++) { invés de sair completamente
if (i==3) { da estrutura, o continue
continue;
apenas ignora o resto da
}
document.write("O numero é:" + estrutura e prossegue
i); retornando com com a
document.write("<br />"); iteração seguinte.
}
</script>
</body>
</html>
18. exemplo de eventos em JS
Cada elemento de uma página Web pode disparar eventos em
JavaScript
Clique de mouse
Carregamento de uma página ou imagem
Passar o mouse sobre um elemento HTML
Enviar dados para o servidor (GET, POST, etc.)
Selecionar um campo de input em um formulário HTML
19. tipos de eventos ● ● ●
onLoad e onUnload
São eventos que ocorrem geralmente quando um usuário entra
ou sai de uma página
onFocus, onBlur e onChange
São eventos associados com o tratamento de formulários Web
Nota: onBlur é um evento que ocorre quando o usuário retira o
foco (cursor) de um formulário
Exemplo, validando um email:
<input type="text" size="30" id="email" onchange="checkEmail()">
20. tipos de eventos ● ● ●
onSubmit
Evento utilizado para validar todos os dados de um formulário
antes do envio para o servidor
No exemplo, abaixo a função checkForm será chamada quando
um usuário pressionar um botão de envio
A função checkForm retorna true ou false. O valor true é
retornado se os campos foram validados corretamente
Exemplo, validando um email:
<form method="post" action="pagina.php" onsubmit="return checkForm()">
21. tipos de eventos ● ● ●
onMouseOver e onMouseOut
Eventos associados com o posicionamento do mouse
Exemplo, alerta na imagem!
<a href="http://www.w3schools.com" onmouseover="alert
('onMouseOver');return false">
<img src="w3s.gif" alt="W3Schools" />
</a>
22. Exercícios de fixação ● ● ●
Implemente uma página que mostre o dia da semana
por meio de um alert
Implemente o seguinte programa
Crie uma imagem em HTML. Associe a imagem com uma função em
JavaScript por meio de um evento onMouseOver. Escreva uma
descrição para a mensagem por meio de um alert.
Implemente o seguinte contador:
Crie um campo de seleção (select) em HTML e associe este campo
com uma função JavaScript por meio do evento onChange
Cada ver que o usuário mexer no campo de seleção o contador deve
ser incrementado e apresentado por meio de um alert
23. Exercícios de fixação ● ● ●
Incremente o programa anterior da seguinte forma:
Caso o contador chegue ao valor 5 então uma instrução de uso deve
aparecer para o usuário por meio de um alert.
24. Exercícios de fixação ● ● ●
Implemente o seguinte programa (exercício para estudo)
Crie um campo HTML de texto (input). Associe o campo criado um
com uma função em JavaScript por meio do evento onChange.
Imprima um alert informando se o campo estiver vazio, caso
contrário mostre o valor do campo
Dica 1: onChange='valida(this)' – this é um parâmetro enviado para
a função que representa o campo de input.
Dica 2: A função pode ser declarada com o seguinte formato:
function valida(campo). Neste caso campo é uma variável que
representa o campo input
Dica 3: dentro do bloco da função você pode utilizar o comando
campo.value para retornar o valor do campo de input
25. Referências
Tutorial de JavaScript do W3C
http://www.w3schools.com/js
JavaScript Datatypes
http://www.sislands.com/coin70/week1/datatype.htm
Yank, K.; Adams, C. Só Javascript: Tudo o que você precisa saber
sobre javascript a partir do zero. Bookman. 2009
Baseado no material do Prof Rodrigo Prestes Machado