0
parte 2Prof Evandro Manara Miletto
SumárioEstruturas de ControleEventos
Estruturas de controle
característicasEstruturas de controle (ou condicionais) são executadas casoum teste seja atendidoPermite mudar a direção d...
condição ifif é a estrutura mais comumverifica uma condição, se ésatisfeita, permite que o                            se a...
condição if /elseelse permite a execução e outrotrecho de código caso acondição não seja satisfeita.                      ...
If, else e else if - (exemplos)  <script type="text/javascript">      var d = new Date()      var time = d.getHours()     ...
loop whileé um loop que só terminaquando a sua condição foravaliada como false.*importante ter algo dentro do             ...
loop while - (exemplo) <html> <body> <script type="text/javascript">   var i=0;   while (i<=5) {      document.write("O nú...
loop do-whileum loop do-while é quase idênticoao while.diferença: o código condicional                                    ...
loop forusa para repetir maisinstruções um determinado             declarar contadornúmero de vezestem 3 partes incluídas ...
loop for - (exemplo) <html> <body> <script type="text/javascript"> var i=0; for (i=0; i<=5; i++) {    document.write("O nú...
for... in                                            a declaração for...in é  <html>                                    us...
switch                                           usado quando se tem uma<script type="text/javascript">                   ...
break                                          são utilizados para controle <html>                                   de es...
continue                                      também serve para controlar <html>                               estruturas ...
Eventos
exemplo de eventos em JSCada elemento de uma página Web pode disparar eventos emJavaScript  Clique de mouse  Carregamento ...
tipos de eventos ● ● ●onLoad e onUnload  São eventos que ocorrem geralmente quando um usuário entra  ou sai de uma páginao...
tipos de eventos ● ● ●onSubmit Evento utilizado para validar todos os dados de um formulário antes do envio para o servido...
tipos de eventos ● ● ●onMouseOver e onMouseOut Eventos associados com o posicionamento do mouse   Exemplo, alerta na image...
Exercícios de fixação ● ● ● Implemente uma página que mostre o dia da semana por meio de um alert Implemente o seguinte pr...
Exercícios de fixação ● ● ● Incremente o programa anterior da seguinte forma: Caso o contador chegue ao valor 5 então uma ...
Exercícios de fixação ● ● ● Implemente o seguinte programa (exercício para estudo) Crie um campo HTML de texto (input). As...
Referências Tutorial de JavaScript do W3C http://www.w3schools.com/js JavaScript Datatypes http://www.sislands.com/coin70/...
Upcoming SlideShare
Loading in...5
×

Java script2

987

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
987
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Java script2"

  1. 1. parte 2Prof Evandro Manara Miletto
  2. 2. SumárioEstruturas de ControleEventos
  3. 3. Estruturas de controle
  4. 4. característicasEstruturas de controle (ou condicionais) são executadas casoum teste seja atendidoPermite mudar a direção de acordo com determinada condiçãoPermitem 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 executadasSão várias (if/else, while, for, switch, continue, break..)
  5. 5. condição ifif é a estrutura mais comumverifica uma condição, se ésatisfeita, permite que o se a condição é verdadeiraprograma execute 1 código. condiçãoSe não for satisfeita, pula o código condicionalcódigo. se a condição é falsa sintaxe if (condição) { código condicional }
  6. 6. condição if /elseelse permite a execução e outrotrecho de código caso acondição não seja satisfeita. se a condição é verdadeiraapós a chave de fechamento do condiçãoif, inicia-se o código doprocedimento do else, caso o if código de iffalhar se a condição é falsa sintaxe if (condição) código de else { código condicional } else { código condicional alternativo }
  7. 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. 8. loop whileé um loop que só terminaquando a sua condição foravaliada como false.*importante ter algo dentro do código condicionalcódigo que afete a condição(risco de loop infinito - condiçãotravamento) se a condição sintaxe é verdadeira se a condição while (condição) é falsa { código condicional }
  9. 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. 10. loop do-whileum loop do-while é quase idênticoao while.diferença: o código condicional código condicional(sempre executado pelo menos 1vez) 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. 11. loop forusa para repetir maisinstruções um determinado declarar contadornúmero de vezestem 3 partes incluídas entre os incrementar contadorparênteses (iniciação davariável, a condição e oincremento/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. 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. 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. 14. switch usado quando se tem uma<script type="text/javascript"> única/mesma avaliação paravar d=new Date(); comparar com vários valorestheDay=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-chavecase 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. 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. 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>
  17. 17. Eventos
  18. 18. exemplo de eventos em JSCada elemento de uma página Web pode disparar eventos emJavaScript 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. 19. tipos de eventos ● ● ●onLoad e onUnload São eventos que ocorrem geralmente quando um usuário entra ou sai de uma páginaonFocus, 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×