javascript (parte 3)

27
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

Upload: alex-camargo

Post on 18-Feb-2017

169 views

Category:

Education


0 download

TRANSCRIPT

JavaScript (parte III)JavaScript (parte III)

Karina Machado e Alex Camargo{karina.machado, alexcamargo}@furg.br

UNIVERSIDADE FEDERAL DO RIO GRANDECENTRO 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

JavaScript Prof. Alex Camargo

1. Eventos

JavaScript Prof. Alex Camargo

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.

JavaScript Prof. Alex Camargo

1.2 Eventos do mouse

JavaScript Prof. Alex Camargo

Figura. Eventos do mouse

1.2 Eventos do mouse

JavaScript Prof. Alex Camargo

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

JavaScript Prof. Alex Camargo

1.4 Eventos do teclado

JavaScript Prof. Alex Camargo

Figura. Eventos do teclado

1.4 Eventos do teclado

JavaScript Prof. Alex Camargo

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.

JavaScript Prof. Alex Camargo

1.6 Eventos de objetos/frames

JavaScript Prof. Alex Camargo

Figura. Eventos de objetos/frames

1.6 Eventos de objetos/frames

JavaScript Prof. Alex Camargo

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.

JavaScript Prof. Alex Camargo

1.8 Eventos de formulários

JavaScript Prof. Alex Camargo

Figura. Eventos de formulários

1.8 Eventos de formulários

JavaScript Prof. Alex Camargo

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

1.8 Eventos de formulários

JavaScript Prof. Alex Camargo

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.- Podem ser usadas as propriedades className ou style.”Propriedade”.

JavaScript Prof. Alex Camargo

2. Validação de formulários

JavaScript Prof. Alex Camargo

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.

JavaScript Prof. Alex Camargo

2.2 O que verificar emum 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.

JavaScript Prof. Alex Camargo

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.

JavaScript Prof. Alex Camargo

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)

JavaScript Prof. Alex Camargo

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.

JavaScript Prof. Alex Camargo

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.

JavaScript Prof. Alex Camargo

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.

- Podem ser usadas as propriedades className ou style.”Propriedade”.- Utilize o getElementById() para resgatar os valores dos spans de aviso de erro.

JavaScript Prof. Alex Camargo

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 Prof. Alex Camargo