SlideShare uma empresa Scribd logo
1 de 27
Baixar para ler offline
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
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 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.
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

Mais conteúdo relacionado

Mais procurados

tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScriptClaudio Gamboa
 
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaNJavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaNErick L. F.
 
Introdução à programação javascript
Introdução à programação javascriptIntrodução à programação javascript
Introdução à programação javascriptNuno Palma
 
Curso de C# - Introdução
Curso de C# - IntroduçãoCurso de C# - Introdução
Curso de C# - IntroduçãoDaniel Araújo
 
Lógica de Programação com Javascript - Aula #01
Lógica de Programação com Javascript - Aula #01Lógica de Programação com Javascript - Aula #01
Lógica de Programação com Javascript - Aula #01Ramon Kayo
 
Programando em C++ // Estrutura Básica
Programando em C++ // Estrutura Básica Programando em C++ // Estrutura Básica
Programando em C++ // Estrutura Básica Yuri Camelo
 
Php women oficina iniciante de php
Php women   oficina iniciante de phpPhp women   oficina iniciante de php
Php women oficina iniciante de phpTais Reis
 
Cadastro de clientes em c#
Cadastro de clientes em c#Cadastro de clientes em c#
Cadastro de clientes em c#André Luiz
 

Mais procurados (16)

Java script1
Java script1Java script1
Java script1
 
Aula1 c++ builder
Aula1   c++ builderAula1   c++ builder
Aula1 c++ builder
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScript
 
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaNJavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Introdução à programação javascript
Introdução à programação javascriptIntrodução à programação javascript
Introdução à programação javascript
 
Curso de C# - Introdução
Curso de C# - IntroduçãoCurso de C# - Introdução
Curso de C# - Introdução
 
Lógica de Programação com Javascript - Aula #01
Lógica de Programação com Javascript - Aula #01Lógica de Programação com Javascript - Aula #01
Lógica de Programação com Javascript - Aula #01
 
Rails na prática
Rails na práticaRails na prática
Rails na prática
 
Aula05-JavaScript
Aula05-JavaScriptAula05-JavaScript
Aula05-JavaScript
 
Programando em C++ // Estrutura Básica
Programando em C++ // Estrutura Básica Programando em C++ // Estrutura Básica
Programando em C++ // Estrutura Básica
 
Php women oficina iniciante de php
Php women   oficina iniciante de phpPhp women   oficina iniciante de php
Php women oficina iniciante de php
 
Java script2
Java script2Java script2
Java script2
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Boas Práticas em jQuery
Boas Práticas em jQueryBoas Práticas em jQuery
Boas Práticas em jQuery
 
Cadastro de clientes em c#
Cadastro de clientes em c#Cadastro de clientes em c#
Cadastro de clientes em c#
 

Semelhante a Javascript (parte 3)

aula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfaula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfBrunoTorres978388
 
Como criar uma calculadora no Game Maker 8.0 (GML Console)
Como criar uma calculadora no Game Maker 8.0 (GML Console)Como criar uma calculadora no Game Maker 8.0 (GML Console)
Como criar uma calculadora no Game Maker 8.0 (GML Console)Rodrigo Cavalcante
 
Typescript: the Fun Parts (BrazilJS 2017)
Typescript: the Fun Parts (BrazilJS 2017)Typescript: the Fun Parts (BrazilJS 2017)
Typescript: the Fun Parts (BrazilJS 2017)Loiane Groner
 
[Front in Sampa 2018] Desenvolvendo como QAs
[Front in Sampa 2018] Desenvolvendo como QAs[Front in Sampa 2018] Desenvolvendo como QAs
[Front in Sampa 2018] Desenvolvendo como QAsJúlio de Lima
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
 
Desmistificando o cairngorm
Desmistificando o cairngormDesmistificando o cairngorm
Desmistificando o cairngormEric Cavalcanti
 
Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com Swift
Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com SwiftSemcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com Swift
Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com SwiftJuliana Chahoud
 
Framework de testes cecom
Framework de testes cecomFramework de testes cecom
Framework de testes cecomlucasbarsand
 
Demoiselle Behave - Parte 3
Demoiselle Behave - Parte 3Demoiselle Behave - Parte 3
Demoiselle Behave - Parte 3Vanderson Silva
 
React + Flux (Alt)
React + Flux (Alt)React + Flux (Alt)
React + Flux (Alt)Cezar Luiz
 
Manual vsflexgrid
Manual vsflexgridManual vsflexgrid
Manual vsflexgridmarcos0512
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jqueryYuri Costa
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventosCentro Paula Souza
 
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdfAula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdfnosbisantos
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 

Semelhante a Javascript (parte 3) (20)

aula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfaula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdf
 
Como criar uma calculadora no Game Maker 8.0 (GML Console)
Como criar uma calculadora no Game Maker 8.0 (GML Console)Como criar uma calculadora no Game Maker 8.0 (GML Console)
Como criar uma calculadora no Game Maker 8.0 (GML Console)
 
Entendento Arquitetura MVI + Flow
Entendento Arquitetura MVI + FlowEntendento Arquitetura MVI + Flow
Entendento Arquitetura MVI + Flow
 
S2 b 2008-2 - fase2 - propostas e soluçoes
S2 b   2008-2 - fase2 - propostas e soluçoesS2 b   2008-2 - fase2 - propostas e soluçoes
S2 b 2008-2 - fase2 - propostas e soluçoes
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
Typescript: the Fun Parts (BrazilJS 2017)
Typescript: the Fun Parts (BrazilJS 2017)Typescript: the Fun Parts (BrazilJS 2017)
Typescript: the Fun Parts (BrazilJS 2017)
 
[Front in Sampa 2018] Desenvolvendo como QAs
[Front in Sampa 2018] Desenvolvendo como QAs[Front in Sampa 2018] Desenvolvendo como QAs
[Front in Sampa 2018] Desenvolvendo como QAs
 
Testlink apresentacao
Testlink apresentacaoTestlink apresentacao
Testlink apresentacao
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Desmistificando o cairngorm
Desmistificando o cairngormDesmistificando o cairngorm
Desmistificando o cairngorm
 
Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com Swift
Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com SwiftSemcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com Swift
Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com Swift
 
Framework de testes cecom
Framework de testes cecomFramework de testes cecom
Framework de testes cecom
 
Demoiselle Behave - Parte 3
Demoiselle Behave - Parte 3Demoiselle Behave - Parte 3
Demoiselle Behave - Parte 3
 
React + Flux (Alt)
React + Flux (Alt)React + Flux (Alt)
React + Flux (Alt)
 
Manual vsflexgrid
Manual vsflexgridManual vsflexgrid
Manual vsflexgrid
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos
 
Java12
Java12Java12
Java12
 
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdfAula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 

Mais de Alex Camargo

Escola Bíblica - Eclesiologia
Escola Bíblica - EclesiologiaEscola Bíblica - Eclesiologia
Escola Bíblica - EclesiologiaAlex Camargo
 
Escola Bíblica - Demonologia
Escola Bíblica - DemonologiaEscola Bíblica - Demonologia
Escola Bíblica - DemonologiaAlex Camargo
 
Python para finanças: explorando dados financeiros
Python para finanças: explorando dados financeirosPython para finanças: explorando dados financeiros
Python para finanças: explorando dados financeirosAlex Camargo
 
A practical guide: How to use Bitcoins?
A practical guide: How to use Bitcoins?A practical guide: How to use Bitcoins?
A practical guide: How to use Bitcoins?Alex Camargo
 
IA e Bioinformática: modelos computacionais de proteínas
IA e Bioinformática: modelos computacionais de proteínasIA e Bioinformática: modelos computacionais de proteínas
IA e Bioinformática: modelos computacionais de proteínasAlex Camargo
 
Introdução às criptomoedas: investimento, mercado e segurança
Introdução às criptomoedas: investimento, mercado e segurançaIntrodução às criptomoedas: investimento, mercado e segurança
Introdução às criptomoedas: investimento, mercado e segurançaAlex Camargo
 
Introdução às criptomoedas: criando a sua própria moeda como o Bitcoin!
Introdução às criptomoedas:  criando a sua própria moeda como o Bitcoin!Introdução às criptomoedas:  criando a sua própria moeda como o Bitcoin!
Introdução às criptomoedas: criando a sua própria moeda como o Bitcoin!Alex Camargo
 
Cristão versus Redes Sociais - Alex (Arca da Aliança)
Cristão versus Redes Sociais - Alex (Arca da Aliança)Cristão versus Redes Sociais - Alex (Arca da Aliança)
Cristão versus Redes Sociais - Alex (Arca da Aliança)Alex Camargo
 
Empatia e compaixão: O Bom Samaritano
Empatia e compaixão: O Bom SamaritanoEmpatia e compaixão: O Bom Samaritano
Empatia e compaixão: O Bom SamaritanoAlex Camargo
 
Alta performance em IA: uma abordagem pratica
Alta performance em IA: uma abordagem praticaAlta performance em IA: uma abordagem pratica
Alta performance em IA: uma abordagem praticaAlex Camargo
 
Bioinformática do DNA ao medicamento: ferramentas e usabilidade
Bioinformática do DNA ao medicamento: ferramentas e usabilidadeBioinformática do DNA ao medicamento: ferramentas e usabilidade
Bioinformática do DNA ao medicamento: ferramentas e usabilidadeAlex Camargo
 
Inteligência Artificial aplicada: reconhecendo caracteres escritos à mão
Inteligência Artificial aplicada: reconhecendo caracteres escritos à mãoInteligência Artificial aplicada: reconhecendo caracteres escritos à mão
Inteligência Artificial aplicada: reconhecendo caracteres escritos à mãoAlex Camargo
 
IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)
IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)
IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)Alex Camargo
 
Algoritmos de inteligência artificial para classificação de notícias falsas. ...
Algoritmos de inteligência artificial para classificação de notícias falsas. ...Algoritmos de inteligência artificial para classificação de notícias falsas. ...
Algoritmos de inteligência artificial para classificação de notícias falsas. ...Alex Camargo
 
Fake News - Conceitos, métodos e aplicações de identificação e mitigação
Fake News - Conceitos, métodos e aplicações de identificação e mitigaçãoFake News - Conceitos, métodos e aplicações de identificação e mitigação
Fake News - Conceitos, métodos e aplicações de identificação e mitigaçãoAlex Camargo
 
PredictCovid: IA. SIEPE UNIPAMPA 2020
PredictCovid: IA. SIEPE UNIPAMPA 2020PredictCovid: IA. SIEPE UNIPAMPA 2020
PredictCovid: IA. SIEPE UNIPAMPA 2020Alex Camargo
 
Ia versus covid 19 - alex
Ia versus covid 19 - alexIa versus covid 19 - alex
Ia versus covid 19 - alexAlex Camargo
 
2a Mini-conf PredictCovid. Field: Artificial Intelligence
2a Mini-conf PredictCovid. Field: Artificial Intelligence2a Mini-conf PredictCovid. Field: Artificial Intelligence
2a Mini-conf PredictCovid. Field: Artificial IntelligenceAlex Camargo
 
Aula 5 - Considerações finais
Aula 5 - Considerações finaisAula 5 - Considerações finais
Aula 5 - Considerações finaisAlex Camargo
 
Aula 04 - Injeção de código (Cross-Site Scripting)
Aula 04 - Injeção de código (Cross-Site Scripting)Aula 04 - Injeção de código (Cross-Site Scripting)
Aula 04 - Injeção de código (Cross-Site Scripting)Alex Camargo
 

Mais de Alex Camargo (20)

Escola Bíblica - Eclesiologia
Escola Bíblica - EclesiologiaEscola Bíblica - Eclesiologia
Escola Bíblica - Eclesiologia
 
Escola Bíblica - Demonologia
Escola Bíblica - DemonologiaEscola Bíblica - Demonologia
Escola Bíblica - Demonologia
 
Python para finanças: explorando dados financeiros
Python para finanças: explorando dados financeirosPython para finanças: explorando dados financeiros
Python para finanças: explorando dados financeiros
 
A practical guide: How to use Bitcoins?
A practical guide: How to use Bitcoins?A practical guide: How to use Bitcoins?
A practical guide: How to use Bitcoins?
 
IA e Bioinformática: modelos computacionais de proteínas
IA e Bioinformática: modelos computacionais de proteínasIA e Bioinformática: modelos computacionais de proteínas
IA e Bioinformática: modelos computacionais de proteínas
 
Introdução às criptomoedas: investimento, mercado e segurança
Introdução às criptomoedas: investimento, mercado e segurançaIntrodução às criptomoedas: investimento, mercado e segurança
Introdução às criptomoedas: investimento, mercado e segurança
 
Introdução às criptomoedas: criando a sua própria moeda como o Bitcoin!
Introdução às criptomoedas:  criando a sua própria moeda como o Bitcoin!Introdução às criptomoedas:  criando a sua própria moeda como o Bitcoin!
Introdução às criptomoedas: criando a sua própria moeda como o Bitcoin!
 
Cristão versus Redes Sociais - Alex (Arca da Aliança)
Cristão versus Redes Sociais - Alex (Arca da Aliança)Cristão versus Redes Sociais - Alex (Arca da Aliança)
Cristão versus Redes Sociais - Alex (Arca da Aliança)
 
Empatia e compaixão: O Bom Samaritano
Empatia e compaixão: O Bom SamaritanoEmpatia e compaixão: O Bom Samaritano
Empatia e compaixão: O Bom Samaritano
 
Alta performance em IA: uma abordagem pratica
Alta performance em IA: uma abordagem praticaAlta performance em IA: uma abordagem pratica
Alta performance em IA: uma abordagem pratica
 
Bioinformática do DNA ao medicamento: ferramentas e usabilidade
Bioinformática do DNA ao medicamento: ferramentas e usabilidadeBioinformática do DNA ao medicamento: ferramentas e usabilidade
Bioinformática do DNA ao medicamento: ferramentas e usabilidade
 
Inteligência Artificial aplicada: reconhecendo caracteres escritos à mão
Inteligência Artificial aplicada: reconhecendo caracteres escritos à mãoInteligência Artificial aplicada: reconhecendo caracteres escritos à mão
Inteligência Artificial aplicada: reconhecendo caracteres escritos à mão
 
IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)
IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)
IA versus COVID-19 Deep Learning, Códigos e Execução em nuvem (Tchelinux 2020)
 
Algoritmos de inteligência artificial para classificação de notícias falsas. ...
Algoritmos de inteligência artificial para classificação de notícias falsas. ...Algoritmos de inteligência artificial para classificação de notícias falsas. ...
Algoritmos de inteligência artificial para classificação de notícias falsas. ...
 
Fake News - Conceitos, métodos e aplicações de identificação e mitigação
Fake News - Conceitos, métodos e aplicações de identificação e mitigaçãoFake News - Conceitos, métodos e aplicações de identificação e mitigação
Fake News - Conceitos, métodos e aplicações de identificação e mitigação
 
PredictCovid: IA. SIEPE UNIPAMPA 2020
PredictCovid: IA. SIEPE UNIPAMPA 2020PredictCovid: IA. SIEPE UNIPAMPA 2020
PredictCovid: IA. SIEPE UNIPAMPA 2020
 
Ia versus covid 19 - alex
Ia versus covid 19 - alexIa versus covid 19 - alex
Ia versus covid 19 - alex
 
2a Mini-conf PredictCovid. Field: Artificial Intelligence
2a Mini-conf PredictCovid. Field: Artificial Intelligence2a Mini-conf PredictCovid. Field: Artificial Intelligence
2a Mini-conf PredictCovid. Field: Artificial Intelligence
 
Aula 5 - Considerações finais
Aula 5 - Considerações finaisAula 5 - Considerações finais
Aula 5 - Considerações finais
 
Aula 04 - Injeção de código (Cross-Site Scripting)
Aula 04 - Injeção de código (Cross-Site Scripting)Aula 04 - Injeção de código (Cross-Site Scripting)
Aula 04 - Injeção de código (Cross-Site Scripting)
 

Último

8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeitotatianehilda
 
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...PatriciaCaetano18
 
QUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geralQUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geralAntonioVieira539017
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...azulassessoria9
 
Artigo Científico - Estrutura e Formatação.ppt
Artigo Científico - Estrutura e Formatação.pptArtigo Científico - Estrutura e Formatação.ppt
Artigo Científico - Estrutura e Formatação.pptRogrioGonalves41
 
O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.denisecompasso2
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxTailsonSantos1
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptxJssicaCassiano2
 
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.docGUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.docPauloHenriqueGarciaM
 
classe gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptxclasse gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptxLuciana Luciana
 
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...AnaAugustaLagesZuqui
 
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de LedAula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de LedJaquelineBertagliaCe
 
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPlano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPaulaYaraDaasPedro
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticash5kpmr7w7
 
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfTCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfamarianegodoi
 
Conflitos entre: ISRAEL E PALESTINA.pdf
Conflitos entre:  ISRAEL E PALESTINA.pdfConflitos entre:  ISRAEL E PALESTINA.pdf
Conflitos entre: ISRAEL E PALESTINA.pdfjacquescardosodias
 
Renascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDFRenascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDFRafaelaMartins72608
 
3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptx3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptxMarlene Cunhada
 
Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmicolourivalcaburite
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfTutor de matemática Ícaro
 

Último (20)

8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito
 
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
 
QUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geralQUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geral
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
 
Artigo Científico - Estrutura e Formatação.ppt
Artigo Científico - Estrutura e Formatação.pptArtigo Científico - Estrutura e Formatação.ppt
Artigo Científico - Estrutura e Formatação.ppt
 
O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx
 
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.docGUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
 
classe gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptxclasse gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptx
 
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
 
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de LedAula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
 
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPlano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
 
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfTCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
 
Conflitos entre: ISRAEL E PALESTINA.pdf
Conflitos entre:  ISRAEL E PALESTINA.pdfConflitos entre:  ISRAEL E PALESTINA.pdf
Conflitos entre: ISRAEL E PALESTINA.pdf
 
Renascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDFRenascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDF
 
3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptx3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptx
 
Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
 

Javascript (parte 3)

  • 1. 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
  • 2. 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
  • 3. 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
  • 5. 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
  • 6. 1.2 Eventos do mouse JavaScript Prof. Alex Camargo Figura. Eventos do mouse
  • 7. 1.2 Eventos do mouse JavaScript Prof. Alex Camargo Figura. Exemplo: eventos do mouse
  • 8. 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
  • 9. 1.4 Eventos do teclado JavaScript Prof. Alex Camargo Figura. Eventos do teclado
  • 10. 1.4 Eventos do teclado JavaScript Prof. Alex Camargo Figura. Exemplo: eventos do teclado
  • 11. 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
  • 12. 1.6 Eventos de objetos/frames JavaScript Prof. Alex Camargo Figura. Eventos de objetos/frames
  • 13. 1.6 Eventos de objetos/frames JavaScript Prof. Alex Camargo Figura. Exemplo: eventos de objetos/frames
  • 14. 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
  • 15. 1.8 Eventos de formulários JavaScript Prof. Alex Camargo Figura. Eventos de formulários
  • 16. 1.8 Eventos de formulários JavaScript Prof. Alex Camargo Figura. Exemplo: eventos de formulários (parte 1)
  • 17. 1.8 Eventos de formulários JavaScript Prof. Alex Camargo Figura. Exemplo: eventos de formulários (parte 2)
  • 18. 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
  • 19. 2. Validação de formulários JavaScript Prof. Alex Camargo
  • 20. 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
  • 21. 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. JavaScript Prof. Alex Camargo
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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