Post on 25-Jun-2015
Prof Evandro Manara Miletto
parte 2
Sumário
Estruturas de Controle
Eventos
Estruturas de controle
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..)
condição if
if é a estrutura mais comum
verifica uma condição, se é satisfeita, permite que o programa execute 1 código.
Se não for satisfeita, pula o código.
condição
código condicional
se a condição é verdadeira
se a condição é falsa
if (condição){ código condicional}
sintaxe
condição if /else
else permite a execução e outro trecho de código caso a condição não seja satisfeita.
após a chave de fechamento do if, inicia-se o código do procedimento do else, caso o if falhar
condição
código de if
se a condição é verdadeira
se a condição é falsa
if (condição){ código condicional} else { código condicional alternativo}
sintaxe
código de else
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
é um loop que só termina quando a sua condição for avaliada como false.
*importante ter algo dentro do código que afete a condição (risco de loop infinito - travamento) condição
código condicional
se a condição é verdadeira
se a condição é falsawhile (condição)
{ código condicional}
sintaxe
loop while
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>
um loop do-while é quase idêntico ao while.
diferença: o código condicional (sempre executado pelo menos 1 vez) vem antes da condição.
do{ código condicional}while (condição)
sintaxe
loop do-while
condição
código condicional
se a condição é verdadeira
se a condição é falsa
usa para repetir mais instruções um determinado número de vezes
tem 3 partes incluídas entre os parênteses (iniciação da variável, a condição e o incremento/decremento)
for (iniciaçao; condição; atualização){ código para cada repetição}
sintaxe
loop for
condição
código condicional
se a condição é verdadeira
se a condição é falsa
incrementar contador
declarar contador
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>
for... in
<html> <body>
<script type="text/javascript"> var x; var mycars = new Array();
mycars[0] = "Mercedes"; mycars[1] = "Volvo"; mycars[2] = "BMW";
for (x in mycars) { document.write(mycars[x] + "<br />");} </script>
</body> </html>
a declaração for...in é usada para repetir elementos de um array ou propriedades de um objeto.
faz a contagem sempre crescente.
switch
<script type="text/javascript">
var d=new Date(); theDay=d.getDay();
switch (theDay) { case 5: document.write("Sexta"); break; case 6:document.write("Sábado"); break; case 0: document.write("Domingo"); break; default: document.write("Outro dia da semana");
}</script>
usado quando se tem uma única/mesma avaliação para comparar com vários valores diferentes.
informo a expressão (entre parênteses) e comparo com os casos conhecidos.
posso usar a palavra-chave default, equivalente ao else do if como um caso padrão.
no if, preciso trazer a variável em todas as avaliações, no switch, apenas no início.
break
<html> <body>
<script type="text/javascript"> var i=0; for (i=0; i<=10; i++) { if (i==3) { break; } document.write("O numero é:" + i); document.write("<br />"); } </script>
</body> </html>
são utilizados para controle de estruturas fechadas como for, while e switch.
Break serve para sair de uma estrutura, de um for neste caso do exemplo, sem ter que chegar até o fim.
continue
<html> <body>
<script type="text/javascript"> var i=0; for (i=0; i<=10; i++) { if (i==3) { continue; } document.write("O numero é:" + i); document.write("<br />"); } </script>
</body> </html>
também serve para controlar estruturas de dados fechadas, assim como o break.
a principal diferença é que, ao invés de sair completamente da estrutura, o continue apenas ignora o resto da estrutura e prossegue retornando com com a iteração seguinte.
Eventos
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
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()">
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()">
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>
Exercícios de fixação ● ● ●
Implemente uma página que mostre o dia da semanapor meio de um alert
Implemente o seguinte programaCrie 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
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.
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 inputDica 3: dentro do bloco da função você pode utilizar o comando campo.value para retornar o valor do campo de input
Referências
Tutorial de JavaScript do W3Chttp://www.w3schools.com/js
JavaScript Datatypeshttp://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