Java script2

Prof Evandro Manara Miletto

parte 2

http://www.poa.ifrs.edu.br/













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



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 é 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



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



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.

http://www.tiexpert.net/programacao/web/javascript/for-while.php




http://www.tiexpert.net/programacao/web/javascript/switch-case-default.php

http://www.tiexpert.net/programacao/web/javascript/switch-case-default.php

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()">


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()">


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>

http://www.w3schools.com

http://www.w3schools.com

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


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.


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

http://www.w3schools.com/js

http://www.w3schools.com/js

http://www.sislands.com/coin70/week1/datatype.htm

http://www.sislands.com/coin70/week1/datatype.htm

Java script2

Documents

Transcript of Java script2