Java script2

parte 2

Prof Evandro Manara Miletto

Sumário

Estruturas de Controle
Eventos

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

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
}

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

loop while - (exemplo)

<html>
<body>

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

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
}

loop for - (exemplo)

<html>
<body>

var i=0;
for (i=0; i<=5; i++) {
document.write("O número é:" + i);
}
</script>

</body>
</html>

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>

switch
usado quando se tem uma
ú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.

break
são utilizados para controle
<html> de estruturas fechadas como
<body>
for, while e switch.
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);
}
</script>

</body>
</html>

continue
também serve para controlar
<html> estruturas de dados fechadas,
<body>
assim como o break.
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>

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>

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

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

Java script2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (8)

Similar a Java script2

Similar a Java script2 (20)

Más de Evandro Manara Miletto

Más de Evandro Manara Miletto (17)

Java script2