Javascript (parte 3)

JavaScript (parte III)JavaScript (parte III)
Karina Machado e Alex Camargo
{karina.machado, alexcamargo}@furg.br
UNIVERSIDADE FEDERAL DO RIO GRANDE
CENTRO DE CIÊNCIAS COMPUTACIONAIS
SISTEMAS PARA INTERNET I
Rio Grande/2015

I. Sumário
1. Eventos
- 1.1 Introdução
- 1.2 Eventos do mouse
- 1.3 Exercício
- 1.4 Eventos do teclado
- 1.5 Exercício
- 1.6 Eventos de objetos/frames
- 1.7 Exercício
- 1.8 Eventos de formulários
- 1.9 Exercício
JavaScript Prof. Alex Camargo

I. Sumário
2. Validação de formulários
- 2.1 Introdução
- 2.2 O que verificar em um formulário?
- 2.3 Como validar?
- 2.4 Exercício

1. Eventos

1.1 Introdução
Os manipuladores de eventos podem ser usados para lidar
com: a entrada do usuário, as ações do usuário e as ações do
navegador.
 Coisas que devem ser feitas cada vez que uma página é
carregada;
 Ação que deve ser realizada quando um usuário clica em um
botão;
 Conteúdo que deverá ser verificado quando um usuário insere
dados.

1.2 Eventos do mouse
Figura. Eventos do mouse

1.2 Eventos do mouse
Figura. Exemplo: eventos do mouse

1.3 Exercício
1. Faça um script que mude a cor de duas divs utilizando o evento
onMouseMove. Uma das divs deve ter o seu preenchimento na cor
verde e trocar para a cinza. Já a outra div deve ter a cor laranja e
trocar para preto.
- Podem ser usadas as propriedades className ou style.”Propriedade”.
- Crie uma função para cada mudança.
- Cada div pode formar um quadrado (300 x 300 px).

1.4 Eventos do teclado
Figura. Eventos do teclado

1.4 Eventos do teclado
Figura. Exemplo: eventos do teclado

1.5 Exercício
1. Faça um script que informe ao usuário via alert todo caracter
digitado em um input a cada nova inserção. Use o evento onKeyUp.
- Os valores devem ser informadas pelo usuário através de 2 inputs
diferentes.
- Utilize o getElementById() para resgatar os valores.

1.6 Eventos de objetos/frames
Figura. Eventos de objetos/frames

1.6 Eventos de objetos/frames
Figura. Exemplo: eventos de objetos/frames

1.7 Exercício
1. Faça um script que exiba “Imagem carregada com sucesso”
assim que uma foto for carregada por completo em uma página.
Utilize o evento onload().
- Utilize uma foto relativamente grande para a execução.

1.8 Eventos de formulários
Figura. Eventos de formulários

Figura. Exemplo: eventos de formulários (parte 1)

Figura. Exemplo: eventos de formulários (parte 2)

1.9 Exercício
1. Faça um script que mude a cor de fundo de um input com o
evento onFocus.

2. Validação de formulários

2.1 Introdução
Um dos usos mais frequentes do JS é a validação de
formulários.
 Informações digitadas de acordo com o solicitado.
 Desonera o servidor deste serviço.
 Processamento no cliente.

2.2 O que verificar em
um formulário?
São exemplos de verificação de formulário, se o usuário:
 Deixou campos sem preencher;
 Digitou um e-mail válido;
 Entrou com uma data válida;
 Digitou texto em campo numérico.

2.3 Como validar?
Basicamente existem duas maneiras de efetuar a validação
(ver Seção 1.8).
 Submit: ao submeter o formulário, uma função JS é chamada.
 Campo a campo: a cada preenchimento, um evento é
disparado para validar o campo.

2.4 Exercício
1. Faça um formulário com os seguintes campos: nome (text),
idade (text), enviar (submit). Verifique se os campos foram
preenchidos. A idade deve ser um número entre 0 e 120.
- Criar uma função chamada “valida” no script.
function valida(form){
<comandos para validação>
}
- Vincular a execução desta função com o clique do botão enviar.
<form action=”” onSubmit=”return valida(this);” />
- Validar se o nome foi preenchido.
if(form.nome.value==””){
alert(“Preencha o campo nome”);
form.nome.focus();
return false;
}
- A função IsNum: Retorna verdadeiro se o valor é um número e falso caso contrário.
!IsNum(form.idade.value)

II. Exercícios
1. Faça um script que insira uma div dentro da outra utilizando o
evento onMouseDown.
- Deve ser usada a propriedade innerHTML.
- A div maior (50x50 px) deve ter o seu preenchimento na cor vermelho e
recebe para uma div menor (40x50 px) centralizada na cor verde.
2. Faça um script que peça ao usuário a sua idade e através do
evento onKeyUp mantenha a borda do input na cor verde se o
usuário estiver digitando valores entre 0 e 120, senão mantenha a
borda na cor vermelho.
- Teste o valor que está sendo recebido através de uma estrutura de
condição.
- Utilize o getElementById() para resgatar os valores.

II. Exercícios
3. Faça um script que exiba via prompt “É a sua primeira vez aqui
(S ou N)?” assim que a página for carregada por completo. Se a
resposta for sim, mostre via alert "Bem-vindo ao nosso site!",
todavia, se a resposta for não, exiba "Obrigado pelo retorno!". Use
o evento onLoad.
- Utilize uma estrutura de condição para testar o valor recebido.
4. Faça um script que exiba a mensagem "Você realmente deseja
limpar o formulário?" o evento onReset.
- Crie 2 inputs (text) como exemplo.
- Utilize o return no onReset e na função.

II. Exercícios
5. Altere o formulário do exercício 2.4 da seção anterior e, ao invés
de um alert, adicione uma borda na cor vermelho no input que não
passou na validação, também escreva ao lado dele, em um span,
"Há erros a serem corrigidos aqui.". Também, exiba "Formulário
enviado com sucesso!" ao final da submissão.
- Utilize o getElementById() para resgatar os valores dos spans de aviso de
erro.

III. Referências
Material cedido por Caroline Tomasini.
FLANAGAN, David. JavaScript: the definitive guide. O'Reilly
Media, Inc., 2006.
W3SCHOOL. JavaScript Tutorial. Disponível em:
<http://www.w3schools.com/js>. Acesso em: Set/2015.

Javascript (parte 3)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Semelhante a Javascript (parte 3)

Semelhante a Javascript (parte 3) (20)

Mais de Alex Camargo

Mais de Alex Camargo (20)

Último

Último (20)

Javascript (parte 3)