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. sintaxe se a condição é falsa condição se a condição é verdadeira código condicional if (condição) { código condicional
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 sintaxe se a condição é falsa condição se a condição é verdadeira código de if if (condição) { código condicional else { código condicional alternativo 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
loop while é 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) sintaxe while (condição) { código condicional se a condição é falsa condição código condicional se a condição é verdadeira
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>
loop do-while 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. código condicional sintaxe do { código condicional while (condição) se a condição é falsa condição se a condição é verdadeira
loop for usa para repetir mais instruções um determinado número de vezes declarar contador tem 3 partes incluídas entre os parênteses (iniciação da variável, a condição e o incremento/decremento) incrementar contador código condicional sintaxe for (iniciaçao; condição; atualização) { código para cada repetição se a condição é falsa condição se a condição é verdadeira
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"; a declaração for...in é usada para repetir elementos de um array ou propriedades de um objeto. faz a contagem sempre crescente. for (x in mycars) { document.write(mycars[x] + "<br />"); </script> </body> </html>
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> 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. </body> </html>
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> 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. </body> </html>
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 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
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 input Dica 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 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