Ambiente de Internet – JavaScript – Aula 1
Tipos de dados
Number (numerico - para valores inteiros e reais)
Boolean (logico - para valores lógicos do tipo falso/verdadeiro)
String (caractere - sequencia de caracteres delimitados por aspas ou apostofos)
Operadores aritméticos
+ adição
- subtração
* multiplicação
/ divisão
% divisão
++ incremento
-- decremento
Estrutura do Javascript
- Para definir a versão em uso usamos:
<script language>
</script>
SINTAXE
<script language="javascript1.2">
<!-[comandos em javascript]
//-->
</script>
De uma forma geral escrevemos os codigos em javascript
sem mencionar sua versão.
<script language="javascript">
<!-[comandos em javascript]
//-->
</script>
usamos <!-- e //--> com a finalidade de pular as linhas de codigo do
script, caso o browser não suporte o codigo javascript.
Exemplo 1
<head>
<title>Título</title>
<script type = "text/javascript">
<!-/*script de saudacao*/
var nome;
nome = prompt('entre com seu nome: ', 'Digite-o aqui:');
document.write('oi'+nome+'esteja a vontade.');
//-->
</script>
</head>
</body>
</html>
Exemplo 2
<head>
<title> Segundo programa </title>
<script type="text/javascript">
<!-document.writeln("<h1> Bem vindo ao Javascript!</h1>");
//-->
</script>
</head><body></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title></title>
</head>
<body>
<form name="mform">
Entre nome:<input type="text" name="c1">
Entre sobrenome:<input type="text" name="c2">
</br>
<input type="button" value="concatenar" onclick="mostranome( )">
</form>
<script language="javascript">
<!-var nome; var sobrenome; var nomecompleto;
function mostranome(){
nome=document.mform.c1.value;
sobrenome=document.mform.c2.value;
nomecompleto=nome + " " + sobrenome;
alert("Oi " +nomecompleto);
}//-->
</script>
</body>
</html>
Ambientes de Internet – JavaScript – aula 2
Evento com inteiro
EXEMPLO
<head>
<title>programa adicao</title>
<script type="text/javascript">
<!-var numero1;
var numero2;
var resposta;
function soma (){
numero1 = document.mform.C1.value;
numero2 = document.mform.C2.value;
resposta= parseInt (numero1) + parseInt (numero2);
alert ('A soma equivale: ' + resposta.toString ());
}
//-->
</script>
</head>
<body>
<form name="mform">
valor 1:<input type="text" name="C1">
valor 2:<input type="text" name="C2"></br>
<input type="button" value="somar" onclick="soma()">
</form>
</body>
</html>
______________________________________________
EXEMPLO
<script type="text/javascript">
<!-var numero1;
var numero2;
var resposta;
numero1 = prompt("Entre valor 1:", 'Digite aqui');
numero2 = prompt("Entre valor 2:", 'Digite aqui');
resposta = parseint(numero1) + parseint(numero2);
document.write('soma:', resposta);
//-->
</script>
____________________________
Exemplo com Real e javascript dentro de <body>...</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Exemplo com Real</title>
</head>
<body>
<script type="text/javascript">
<!-var HT, UH, PD, TD, SB, SL;
HT = prompt('Entre com horas trabalhadas: ', ' aqui');
VH = prompt('Entre com valor da hora: ', ' aqui');
PD = prompt('Entre com o percentual de desconto: ', ' aqui');
SB = parseFloat(HT) * parseFloat(VH);
TD = parseFloat(PD)/100*SB;
SL = SB -TD;
document.write('Salario Liquido = ', SL);
//-->
</script>
</body>
</html>
______________________________________________
Operações Matemáticas
Para usar as funções pre-definidas colocamos o objeto math
Sintaxe:
Math.[função] => ex.: PI e POW
1 - Desenvolva um programa que calcule o volume de uma lata:
formula: volume = PI * Raio2 * altura
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Funções Pré-Definidas</title>
</head>
<body>
<script type="text/javascript">
<!-var R, VOL, ALT;
R = prompt('Entre com o raio da lata: ', ' aqui');
ALT = prompt('Entre com a altura da lata: ', ' aqui');
VOL = Math.PI*Math.pow(parseFloat(R),2)*parseFloat(ALT);
document.write('Volume = ', VOL);
//-->
</script>
</body>
</html>
Algoritmo
1 - ler o valor do raio
2 - ler o valor da altura
3 - calcular volume = Math.PI*Math.pow(raio,2)*altura;
4 - Apresentar valor;
Resposta
<script type="text/javascript">
<!-var raio, altura, volume;
raio = prompt('Valor Raio: ', 'Aqui');
altura = prompt('Valor Altura: ', 'Aqui');
Volume= math.Pi*Math,pow(parsefloat(raio),2)*parsefloat(altura);
document.write('O volume: ', volume);
//-->
</script>
2 - Desenvolva um programa que apresenta como resultado o
valor sorteado de forma randômica entre 0(zero) e 1(um)
Ex.:
<script type = "text/javascript">
<!-var numero= math.random();
document.write('Valor: ', numero);
//-->
</script>
Solução 02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title></title>
</head>
<body>
<script type="text/javascript">
<!-var NUMERO;
NUMERO = Math.random();
document.write('Valor = ', NUMERO);
//-->
</script>
</body>
</html>
3 - Ler uma temperatura em graus centigrados e apresente em graus fahrenheit
formula => F=(9*C+160)/5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title></title>
</head>
<body>
<script type="text/javascript">
<!-var F, C;
R = prompt('Entre com a temperatura em graus centigrados
//-->
</script>
</body>
</html>
Ambiente de Internet – Aula 3 – JavaScript
Operadores de Igualdade
= = x é igual a y
! = x não é igual a y
Operadores Relacionais
> maior que
< menor que
>= maior ou igual
<= menor ou igual
Estrutura de seleção if/else
Exemplo:
<script type="text/javascript">
<!-var num1;var num2;
num1= prompt("Entre Valor 1", 'Aqui');
num2= prompt("Entre Valor 2", 'Aqui');
if(num1>num2)
document.write("O primeiro e maior ");
else
document.write("O segundo e maior ");
//-->
</script>
________________________________________
1 - Faça um programa que vai entra com a Nota de 0 a 100
<script type="text/javascript">
<!-var num1;var num2;
num1= prompt("Entre com a Nota", 'Aqui');
if(num1>=90)
document.write("Conceito A ");
else
if(num1>=80)
document.write("Conceito B ");
else
if(num1>=70)
document.write("Conceito C ");
else
if(num1>=60)
document.write("Conceito D ");
else
document.write("Conceito E ");
//-->
</script>
Operdores Logicos
(e) and -> && (e comercial)- utilizado quando dois ou mais relacionamentos logicos
necessitam ser verdadeiros.
Condição 1
F
V
F
V
(ou) or -> || - utilizado quando
Condição 1
F
V
F
V
Operador Lógico...not: !
V
F
Condição 2
F
F
V
V
Resultado lógico
F
F
F
V
Condição 2
F
F
V
V
Resultado lógico
F
V
V
V
F
V
Exercício 1:
Faça um programa em JavaScript que leia dois
valores inteiros e independente da ordem
em que foram entrados, apresentá-los
na ordem crescente. Use uma variável auxiliar,
usando um formulário para a entrada de dados.
................................................................................................
Reposta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Exercicio 1 - JavaScript</title>
</head>
<body>
<form name="mform">
<h2><strong>Colocando em ordem crescente</strong></h2>
<h3>Digite 2 valores...</h3><br>
<label>Valor 1: <input type="text" maxlength="30" name="v1" </label><br>
<label>Valor 2: <input type="text" maxlength="30" name="v2" ></label><br>
<input type="button" name="bt" value="Execute" onClick="crescente()">
<script type="text/javascript">
<!-var num1;
var num2;
var aux;
function crescente()
{
num1=document.mform.v1.value;
num2=document.mform.v2.value;
if (num1 > num2){
document.write("Ordem crescente: ", num2," , ",num1);
}
else{
aux=num1;
num1=num2;
num2=aux;
document.write("Ordem crescente: ",num2," , ",num1);
}
}
//-->
</script>
</form>
</body>
</html>
Exercicio 2:
Ler 3 valores para os lados de um triangulo: A, B, C. Verificar se cada um é menor que
a soma dos outros dois lados. Se for, saber se A==B e se B==C, sendo verdade o
triangulo é equilatero. Se não, verificar A==B ou A==C ou se B==C, sendo verdade o
triangulo é isosceles, caso contrario, o triangulo será escaleno. Se os lados não
caracterizarem um triangulo, apresentar a ocorrencia.
Resposta:
<!-var A, B, C;
function calc()
{
if ((A<B+C) || (B<A+C) || (C<A+B)){
document.mform.saida.value("Não é possível formar um triangulo com esses valores.");
}
else{
if ( (A= =B) && (B= =C) ){
document.mform.saida.value("Triângulo EQUILÁTERO.");
}
else{
if ( (A= =B) || (A==C) || (B= =C) ){
document.mform.saida.value("Triângulo ISÓSCELES.");
}
else document.mform.saida.value("Triângulo ESCALENO.");
}
}
}
//-->
<form name=”mform”>
Lado A: <input type=”text” name=”LadoA”><br>
Lado B: < input type=”text” name=”LadoB”><br>
Lado C: < input type=”text” name=”LadoC”><br>
<input type=”button” name="bt" value=”Processar” onClick=”calc()”>
<br><br>
<input type=”text” name=”saida” size=”25”>
</form>
AULA
JavaScript - while(repeticao)
...................................................................................................
Sintaxe:
while (condicao) {
<instrucoes>
}
...................................................................................................
Exemplo:
<script type="text/javascript">
<!-var i=1;
while (i<=10) {
document.write('Mensagem '+i+'<br>');
}
//-->
</script>
...................................................................................................
Fatorial:
<script type="text/javascript">
<!-function Fatorial() {
var fatorial=parseInt(1);
var contador=parseInt(1);
var n=parseInt(document.mform.limite.value);
while (contador<=n) {
fatorial*=contador;
contador+=1;
}
document.mform.saida.value=fatorial;
}
//-->
</script>
...................................................................................................
DO WHILE
...................................................................................................
Sintaxe:
do {
<instrucao>
}
while (condicao)
...................................................................................................
Exemplo:
<script type="text/javascript">
<!-var i=1;
do {
document.write('Mensagem '+i+'<br>');
i +=1;
}
while (i <= 10)
//-->
</script>
...................................................................................................
Instrucao FOR
Sintaxe:
for (inicio; fim; incremento) {
<instrucao>
}
...................................................................................................
Exemplo:
<script type="text/javascript">
<!-var i;
for (i=1; i<=10; i++) {
document.write(i + '<br>');
}
//-->
</script>
...................................................................................................
OPS!
<<<fatorial*=contador>>> igual a <<<fatorial=fatorial*contador>>>
...................................................................................................
Exercicios:
1) Fazer um formulario para o exemplo do fatorial
<form name="mform">
Calcule o fatorial de um nº qualquer.<br>
Valor: <input type="text" name="limite"><br>
<input type="button" onClick="Fatorial()" name="bt_fat" value="Calcular"><br>
<input type="text" name="saida">
</form>
...................................................................................................
2) Uma faculdade oferece um curso que prepara os alunos para o
exame de licenciamento estadual. Escreva um programa que
resuma os resultados.
Voce recebeu uma lista desses 10 alunos. Ao lado de cada
nome, está escrito 1, se aluno aprovado ou 2 se reprovado.
(a) Inserir o resultado de cada exame (1 ou 2)
Exibir mensagem "entrar com resultado" na tela.
(b) Contar o nº de resultado (1 e 2) separados
(c) Exibir o resumo do resultado (quantidade que passou e nao passou)
(d) Se 8 ou mais alunos passaram -> Imprimir. "Aumentar a mensalidade"
<script type="text/javascript">
<!-var cont, i;
var aprovado;
var reprovado;
var nome = new Array(11);
var resultado = new Array(11);
// Entrada de dados
function Entra_dado() {
for (cont=1; cont<=11; cont++) {
nome[cont]=document.mform.aluno.value;
resultado[cont]=parseInt(document.mform.result.value);
}
if (cont=11) {
document.mform.aluno.visible=false;
document.mform.result.visible=false;
document.mform.bt1.visible=false;
}
}
// Verificando e contando: aprovados e reprovados
for (i=1; i<=11; i++) {
if (resultado[i] = 1) {
aprovado=aprovado+1;
}
else {
if (resultado[i] = 2) {
reprovado=reprovado+1;
}
}
}
document.mform.aprov.value=aprovado+" alunos aprovados";
document.mform.reprov.value=reprovado+" alunos reprovados";
//Mensalidade
if (aprovado>=8){
alert("Ops! Mais de 8 alunos foram aprovados. Aumente a mensalidade!!!");
}
//-->
</script>
<form name="mform">
Aluno: <input type="text" name="aluno"><br>
Digite (1) para aprovado ou (2) para reprovado...<br>
Resultado: <input type="text" name="result">
<input type="button" onClick="Entra_dado()" name="bt1" value="Armazenar"><br>
<input type="text" name="aprov"><br>
<input type="text" name="reprov">
<input>
</form>
AULA
Estrutura de repetição – while
A estrutura de repetição permite ao programador especificar que um script deve repetir
uma ação enquanto alguma condição permanece verdadeira.
Enquato houver mais itens na minha lista de compras
Comprar o próximo item e remove-lo da minha lista
Exemplo:
var produto = 2;
while ( produto <= 1000 )
produto = 2 * produto;
Quando a estrutura while conclui a execução, produto contém o resultado 1024.
Quando o script entra na estrutura while, o produto é 2. O script repetidamente
multiplica a variável produto por 2, assim produto assume os valores, 4, 8, 16, 32, 64,
128, 256, 512 e 1024, sucessivamente. Quando o produto se tornar 1024, a condição
produto <=1000 na estrutura while tornar-se false.
Estudo de Caso
Uma classe de 10 alunos fez um questionário. As notas (inteiros no intervalo de 0 a 100)
desse questionário estão disponíveis para você. Determine a média da classe no
questionário.
A média da classe é igual à soma das notas divididas pelo número de alunos(10 nesse
caso). O algoritmo para resolver esse problema em um computador deve inserir cada
uma das notas, realizar o cálculo da média e exibir o resultado.
Algoritmo:
Cofigurar total como zero
Configurar o contador de nota como um
Enquanto o contador de nota for menor ou igual a 10]
Inserir a próxima nota
Adicionar a nota no total
Adicionar um ao contador de nota
Configurar a média da classe como o total dividido por 10
Imprimir a média da classe.
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 11/5/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Programa media</title>
<script type = "text/javascript">
<!-var total,
contador,
notas,
media,
nota;
//Fase de inicializa
total = 0;
contador = 1;
o
//Fase de processamento
while ( contador <= 10) {
nota = window.prompt("Entre com nota: ", "0");
notas = parseInt(nota);
total = total + notas;
contador = contador + 1;
}
media = total / 10;
document.writeln("<h1>Classe Media " + media + "</h1>");
//->
</script>
</head>
<body>
</body>
</html>
Desenvolver um programa de média de notas da classe que processe um número
arbitrário de notas toda vez que o programa for executado.
Algoritmo:
Inicializar totol com zero
Inicializar contador com zero
Inserir a primeira nota (possivelmente o sentinela)
Enquanto o usuário não inserir o sentinela
Adicionar essa nota à soma total
Adicionar um ao contador de nota
Inserir a próxima nota (possivelmente o sentinela)
Se o contador não for igual a zero
Configurar a média como o total dividido pelo contador
Imprimir a média
Caso contrário
Imprimir “Nenhuma nota foi inserida”
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 11/5/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Programa media sentinela</title>
<script type = "text/javascript">
<!-var total,
contador,
valornota,
media,
nota;
//Fase de inicializa
total = 0;
contador = 0;
o
nota = window.prompt("Entre com a nota, -1 para Quit ", "0");
valornota = parseInt(nota);
//Fase de processamento
while ( valornota != -1) {
total = total + valornota;
contador = contador + 1;
nota = window.prompt("Entre com a nota, -1 para Quit ", "0");
valornota = parseInt(nota);
}
if (contador != 0){
media = total / contador;
document.writeln("<h1>Classe Media " + media + "</h1>");
}
else
document.writeln("<p>Entre com notas</p>");
//-->
</script>
</head>
<body>
<p>Clique Refresh para rodar novamente</p>
</body>
</html>
Para Fazer:
Uma faculdade oferece um curso que prepara os alunos para o exame de licenciamento
estadual para corretores imobiliários. No último ano, vários dos alunos que concluíram
esse curso fizeram o exame de licenciatura. Naturalmente, a faculdade quer saber o
desempenho de seus alunos no exame. Pediram-lhe para escrever um programa que
resumisse os resultados. Você recebeu uma lista desses 10 alunos. Ao lado de cada
nome, está escrito um 1 se o aluno passou no exame e um 2 se o aluno foi reprovado.
1. inserir o resultado de cada exame (isto é, um 1 ou um 2). Exibir a mensagem
“Entrar resultado” na tela toda vez que o programa solicitar o resultado de outro
exame.
2. contar o número de resultados de cada tipo de exame.
3. Exibir um resumo dos resultados do exame para indicar o número de alunos que
passou e o número de alunos que foi reprovado.
4. Se mais de oito alunos passaram no exame, imprimir a mensagem “ Aumente o
preço da mensalidade do curso”.
Algoritmo:
Inicializar aprovados como zero
Inicializar reprovados como zero
Inicializar aluno como um
Enquanto contador de aluno for menor que ou igual a 10
Inserir o próximo resultado do exame
Se o aluno passou,
Adicionar um a aprovados
Caso contrário
Adicionar um a reprovados
Adicionar um ao contador de alunos
Imprimir o número de aprovados e o número de reprovados
Se mais de oito alunos passaram
Imprimir “Aumente a preço da mensalidade do curso”
Resposta:
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 11/5/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<script type = "text/javascript">
<!-//inicializando vari veis
var passes = 0,
failures = 0,
student = 0,
result;
//processa 10 estudantes
while (student <= 10){
result = window.prompt("Entre com resultado (1=passou, 2=reprovou",
"0");
if (result =="1")
passes = passes + 1;
else
failures = failures + 1;
student = student + 1;
}
//fase de conclus o
document.writeln("<h1>Resultados dos Exames</h1>");
document.writeln("Aprovador: " + passes + "<br />Reprovados: " + failures);
if (passes > 8)
document.writeln("<br />Aumentar Mensalidade");
//-->
</script>
</head>
<body>
</body>
</html>
VETORES E MATRIZES
Uma das técnicas de programação mais importantes é a utilização do conceito de
vetores e matrizes. Permite trabalhar com agrupamento de vários dados em uma mesma
variável. Desta forma economiza-se o volume de variáveis dentro do programa
deixando os dados agrupados de forma mais organizada.
VETORES OU MATRIZ DE UMA DIMENSÃO
Vetor ou array é um grupo de posições da memória, todas com o mesmo nome e
normalmente e normalmente do mesmo tipo. Os arrays de JavaScript são entidades
dinâmicas, no sentido de que podem mudar de tamanho depois de serem criados. O
primeiro elemento em cada array é o zero. Portanto, o primeiro elemento do array c é
mencionado como c[0], o segundo elemento do array c é mencionado como c[1] e assim
por diante. O número entre os colchetes chama-se índice.
Este tipo de estrutura é muito utilizado na criação de tabelas internas ao programa.
Caracteriza-se por ser definida uma única variável dimensionada com um determinado
tamanho. A dimensão de uma matriz é constituída por constantes inteiras e positivas. Os
nomes dados às matrizes seguem as mesmas regras de nomes utilizados em variáveis
simples.
Uma matriz é formada pelo conjunto de elementos nela dimensionada. Por exemplo
matriz “A” com 10 elementos seria definida como var A new Array(9). Observe que os
elementos são numerados de 0 a 9, perfazendo assim a quantidade de dez elementos.
Desta forma, a variável indexada A tem a capacidade de armazenar dez elementos
diferentes de uma única vez.
Uma matriz também pode ser dimensionada usando a sintaxe var A new Array().
Neste caso, estará sendo definida uma dimensão desconhecida. Sabendo-se apenas que
o primeiro elemento possui índice zero.
USANDO A FUNÇÃO ONLOAD
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 16/5/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Vetor 1</title>
<script type = "text/javascript">
<!-function start(){
var vetor = [1,2,3,4,5,6,7,8,9,10];
var total = 0;
for (var i = 0; i < vetor.length; i++)
total += vetor[i];
document.writeln("Total: " + total);
}
//-->
</script>
</head>
<body onload = "start()">
</body>
</html>
CLASSIFICANDO ARRAYS
Classificar os dados (colocar os dados em alguma ordem particular, como crescente ou
decrescente) é uma da funções mais importantes da computação.
O objeto Array em JavaScript tem um método sort predefinido para classificar arrays.
FORMULÁRIO E VALIDAÇÃO
Para criar formulários, o código XHTML oferece uma série de tags relacionadas a este
recurso, sendo estas: <form> e </form>; <input> e </input>; <select> e </select>;
<option> e </option>.
Um formulário é basicamente um conjunto de campos que serão preenchidos por um
usuário.Os dados informados são passados para um provedor de hospedagem (servidor
WEB) e normalmente armazenados em arquivos ou banco de dados, os quais serão
gerenciados por linguagens de scripts do tipo: CGI, PERL, ASP, PHP, etc.
Vamos ver a validação de campos por intermédio da linguagem JavaScript.
O conceito de validação se refere à possibilidade de verificar a validade da entrada de
um dados efetuada por um usuário, ante de enviar esse dado ao provedor de acesso.
EXEMPLO:
VALIDAÇÃO DE CAMPOS EM BRANCO
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 18/5/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Formul rio de Cadastro</title>
<script type = "text/javascript">
<!-function verifica(){
var nome
= document.mform.nome.value;
var endereco = document.mform.endereco.value;
var cep
= document.mform.cep.value;
var cidade
= document.mform.cidade.value;
var email
= document.mform.mail.value;
var cpf
= document.mform.cpf.value;
if(nome == '' || endereco =='' || cep == '' || cidade == '' || email
=='' ||
cpf==''){
alert ('Todos os campos do formul rio devem estar preenchidos.');
return false;
}
}
//-->
</script>
</head>
<body>
<center><h1>CADASTRO</h1></center>
<form name = "mform" onSubmit = "return verifica()">
<tt>
Nome ........:<input type="text" name = "nome"
size="45"><br/>
Endere o ....:<input type="text" name = "endereco" size="50"><br/>
CEP .........:<input type="text" name = "cep"
size="9"><br/>
Cidade ......:<input type="text" name = "cidade"
size="25"><br/><br
/>
Estado.......:
<select name = "estado" size="1">
<option value="ac"> AC </option>
<option value="al"> Al </option>
<option value="am"> AC </option>
<option value="ap"> AC </option>
<option value="ba"> AC </option>
<option value="ce"> AC </option>
<option value="df"> AC </option>
<option value="es"> AC </option>
<option value="go"> AC </option>
<option value="ma"> AC </option>
<option value="mg"> AC </option>
<option value="ms"> AC </option>
<option value="pa"> AC </option>
<option value="pb"> AC </option>
<option value="pe"> AC </option>
<option value="pi"> AC </option>
<option value="pr"> AC </option>
<option value="rj"> AC </option>
<option value="rn"> AC </option>
<option value="ro"> AC </option>
<option value="rr"> AC </option>
<option value="rs"> AC </option>
<option value="sc"> AC </option>
<option value="se"> AC </option>
<option value="sp"> AC </option>
<option value="to"> AC </option>
</select>
<br /><br />
E-MAIL ......:<input type = "text" name = "mail"
size="15"><br />
CPF .........:<input type = "text" name = "cpf"
size="15"><br
/>
Sexo ........:
<input type="radio" name="sexo" value="masculino" checked>Masculino
<input type="radio" name="sexo" value="masculino">Feminino
<br /><br /><br />
<input type = "reset" value = "Limpar Formul rio">
<input type = "submit" value = "Enviar Formul rio">
<tt>
</form>
</body>
</html>
Ao executar o arquivo com algum campo em branco, será apresentada a mensagem:
TODOS OS CAMPOS DO FORMULÁRIO DEVEM ESTAR PREENCHIDOS.
Agora vamos tentar evitar que o usuário forneça o seu e-mail com erro ou mesmo
verificar a validade do número de CPF informado.
Serpa utilizado o método indexOf que efetua a localização de um determinado
substring. Caso o substring não seja encontrado, é retornado o valor –1. Para tanto,
altere a linha do formulário que apresenta o campo E-MAIL.
Para:
E-MAIL ..........:
<input type = “text” name = “mail” size=”15” onBlur = “checa()”><br />
abaixo da função verifica( ) antes da tag </head> digite a seguinte função.
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 18/5/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Formul rio de Cadastro</title>
<script type = "text/javascript">
<!-function verifica(){
var nome
= document.mform.nome.value;
var endereco = document.mform.endereco.value;
var cep
= document.mform.cep.value;
var cidade
= document.mform.cidade.value;
var email
= document.mform.mail.value;
var cpf
= document.mform.cpf.value;
if(nome == '' || endereco =='' || cep == '' || cidade == '' || email
=='' ||
cpf==''){
alert ('Todos os campos do formul rio devem estar preenchidos.');
return false;
}
}
//-->
</script>
<script type = "text/javascript">
<!-function checa(){
var email = document.mform.mail.value;
if(email.indexOf('@') == -1 || email.indexOf('.') == -1){
alert('Este e-mail
invalido.');
document.mform.mail.value = '';
document.mform.mail.focus();
}
}
//-->
</script>
</head>
<body>
<center><h1>CADASTRO</h1></center>
<form name = "mform" onSubmit = "return verifica()">
<tt>
Nome ........:<input type="text" name = "nome"
size="45"><br/>
Endere o ....:<input type="text" name = "endereco" size="50"><br/>
CEP .........:<input type="text" name = "cep"
size="9"><br/>
Cidade ......:<input type="text" name = "cidade"
size="25"><br/>
<br />
Estado.......:
<select name = "estado" size="1">
<option value="ac"> AC </option>
<option value="al"> Al </option>
<option value="am"> AC </option>
<option value="ap"> AC </option>
<option value="ba"> AC </option>
<option value="ce"> AC </option>
<option value="df"> AC </option>
<option value="es"> AC </option>
<option value="go"> AC </option>
<option value="ma"> AC </option>
<option value="mg"> AC </option>
<option value="ms"> AC </option>
<option value="pa"> AC </option>
<option value="pb"> AC </option>
<option value="pe"> AC </option>
<option value="pi"> AC </option>
<option value="pr"> AC </option>
<option value="rj"> AC </option>
<option value="rn"> AC </option>
<option value="ro"> AC </option>
<option value="rr"> AC </option>
<option value="rs"> AC </option>
<option value="sc"> AC </option>
<option value="se"> AC </option>
<option value="sp"> AC </option>
<option value="to"> AC </option>
</select>
<br /><br />
E-MAIL ......:<input type = "text" name = "mail"
size="15"
onBlur="checa()"><br />
CPF .........:<input type = "text" name = "cpf"
size="15"><br
/>
Sexo ........:
<input type="radio" name="sexo" value="masculino" checked>Masculino
<input type="radio" name="sexo" value="masculino">Feminino
<br /><br /><br />
<input type = "reset" value = "Limpar Formul rio">
<input type = "submit" value = "Enviar Formul rio">
<tt>
</form>
</body>
</html>
Observe que após verificar o erro do e-mail, o campo em questão é limpo com a
instrução document.mform.mail.value = “ “ e em seguida o cursor é apresentado dentro
do campo: document.mform.mail.focus( ).
Note que focus( ) é um método do objeto window, o qual tem por finalidade efetuar a
apresentação do cursor dentro de um determinado campo do formulário da janela ativa.
VALIDAÇÃO DE CPF
Para validar um CPF é necessário utilizar um algoritmo específico, o qual tem por
finalidade verificar a validade dos dois últimos números que são considerados o dígito
verificador.
O dígito verificador do número do CPF é calculado em duas etapas. A primeira calcula
o décimo número (primeiro dígito verificador) e a segunda calcula o décimo primeiro
número (segundo dígito verificador). Para este cálculo utiliza-se o módulo de divisão
11(onze).
Para entender o processo de cálculo, considere o número do CPF como sendo
123.456.789-09.
Observe que o número é formado por um segmento com nove posições à esquerda do
traço e por um segundo segmento com duas posições à direita do traço. As duas
posições à direita representam o dígito verificador.
A primeira etapa do cálculo consiste em pegar o primeiro segmento e distribuí-lo da
seguinte forma, para obter o décimo número (primeiro dígito de verificação)
1
2
3
4
5
6
7
8
9
Abaixo de cada valor a partir da esquerda colocam-se os valores: 10, 9, 8, 7, 6, 5, 4, 3,
2
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
Em seguida efetua-se a multiplicação de cada coluna, conforme a seguinte indicação:
1
10
10
2
9
18
3
8
24
4
7
28
5
6
30
6
5
30
7
4
28
8
3
24
9
2
18
Após ter obtido os valores das multiplicações de cada coluna, efetua-se o somatório
deles. Desta forma, soma-se 10+18+24+28+30+30+28+24+18, obtendo então o valor
210.
Em seguida pega-se o valor somado(210) e divide-se por 11. Considere como quociente
apenas o valor inteiro, pois será o resto da divisão responsável pelo cálculo do primeiro
dígito verificador. Assim sendo, 210 / 11 resulta um quociente igual a 19 e um resto
igual a 1(um). Caso o valor do resto da divisão seja menor que 2 (dois), esse valor passa
automaticamente a ser zero (que zera o caso do exemplo fornecido); caso contrário, é
necessário subtrair o valor obtido de 11 (onze, que é o valor constante do módulo de
divisão para o cálculo do CPF).
Tendo obtido o primeiro dígito verificador, anexa-se ao número do primeiro segmento
que passa a ser formado pelo número 1234567890. A próxima etapa para o cálculo do
segundo dígito verificador consiste em pegar o novo valor e distribuí-lo da seguinte
forma:
1
2
3
4
5
6
7
8
9
0
Abaixo de cada valor a partir da esquerda colocam-se os valores: 11, 10, 9, 8, 7, 6, 5, 4,
3, 2 conforme indicado a seguir:
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
0
2
Em seguida efetua-se a multiplicação de cada coluna, conforme a seguinte indicação.
1
11
11
2
10
20
3
9
27
4
8
32
5
7
35
6
6
36
7
5
35
8
4
32
9
3
27
0
2
0
Após ter obtido os valores das multiplicações de cada coluna, efetua-se o somatório
deles. Desta forma, soma-se 11+20+27+32+35+36+35+32+27+0, obtendo então o valor
255.
Em seguida pega-se o valor somado (255) e divide-se por 11. Considere novamente
como quociente apenas o valor inteiro, pois será o resto da divisão responsável pelo
cálculo do segundo dígito verificador. Assim sendo, 255/11 resulta um quociente igual a
23 e um resto igual a 2(dois). Caso o valor do resto da divisão seja menor que 2(dois),
esse valor passa automaticamente a ser zero; caso contrário (que é o caso, neste
instante), é necessário subtrair o valor obtido de 11(onze, que é o valor constante do
módulo de divisão para o cálculo de CPF). Desta dorma 11-2 resulta o valor 9(nove),
que representa o segundo dígito verificador. Assim sendo, anexa-se esse valor ao
número já existente. 12345678909, sendo este o segundo dígito verificador de um CPF.
Basta então comparar os dois últimos valores informados com os dois últimos valores
calculados. Se forem iguais, o CPF informado é válido.
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 21/5/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>exemplos js</title>
<script type = "text/javascript">
<!-function verifica(){
var nome
= document.mform.nome.value;
var endereco = document.mform.endereco.value;
var cep
= document.mform.cep.value;
var cidade
= document.mform.cidade.value;
var email
= document.mform.mail.value;
var cpf
= document.mform.cpf.value;
if(nome == '' || endereco =='' || cep == '' || cidade == '' || email
=='' ||
cpf==''){
alert ('Todos os campos do formulбrio devem estar preenchidos.');
return false;
}
}
//-->
</script>
<script type = "text/javascript">
<!-function checa(){
var email = document.mform.mail.value;
if(email.indexOf('@') == -1 || email.indexOf('.') == -1){
alert('Este e-mail й invalido.');
document.mform.mail.value = '';
document.mform.mail.focus();
}
}
//-->
</script>
<script type = "text/javascript">
<!-function checarCPF(){
var numero = document.mform.cpf.value;
var posicao, i, soma, dv, dvinformado;
var digito = new Array(10);
//retira do numero informado os dois ultimos digitos
dvinformado = numero.substr(9,2);
//desmembra o numero do cpf na matriz digito
for (i=0; i<=8; i++){
digito[i] = numero.substr(i,1);
}
//calcula o valor do decimo(10) - digito de verificacao
posicao = 10;
soma = 0;
for (i=0; i<=8; i++){
soma = soma + digito[i] * posicao;
posicao = posicao -1;
}
digito[9] = soma % 11;
if (digito[9] < 2){
digito[9] = 0;
}
else {
digito[9] = 11 - digito[9];
}
//calcula o valor do decimo primeiro(11) - digito de verificacao
posicao = 11;
soma = 0;
for (i=0; i<=9; i++){
soma = soma + digito[i] * posicao;
posicao = posicao -1;
}
digito[10] = soma % 11;
if (digito[10] < 2){
digito[10] = 0;
}
else {
digito[10] = 11 - digito[10];
}
//verifica se o DV calculado e igual ao informado
dv = digito[9] * 10 + digito[10];
if (dv != dvinformado){
alert('CPF INV LIDO');
document.mform.cpf.value = '';
document.mform.cpf.focus();
}
}
//-->
</script>
</head>
<body>
<center><h1>CADASTRO</h1></center>
<form name = "mform" onSubmit = "return verifica()">
<tt>
Nome ........:<input type="text" name = "nome"
size="45"><br/>
Endereзo ....:<input type="text" name = "endereco"
size="50"><br/>
CEP .........:<input type="text" name = "cep"
size="9"><br/>
Cidade ......:<input type="text" name = "cidade"
size="25"><br/>
<br />
Estado.......:
<select name = "estado" size="1">
<option value="ac"> AC </option>
<option value="al"> AL </option>
<option value="am"> AM </option>
<option value="ap"> AP </option>
<option value="ba"> BA </option>
<option value="ce"> CE </option>
<option value="df"> DF </option>
<option value="es"> ES </option>
<option value="go"> GO </option>
<option value="ma"> MA </option>
<option value="mg"> MG </option>
<option value="ms"> MS </option>
<option value="pa"> PA </option>
<option value="pb"> PB </option>
<option value="pe"> PE </option>
<option value="pi"> PI </option>
<option value="pr"> PR </option>
<option value="rj"> AC </option>
<option value="rn"> RN </option>
<option value="ro"> RO </option>
<option value="rr"> RR </option>
<option value="rs"> RS </option>
<option value="sc"> SC </option>
<option value="se"> SE </option>
<option value="sp"> SP </option>
<option value="to"> TO </option>
</select>
<br /><br />
E-MAIL ......:<input type = "text" name = "mail"
size="15"
onBlur="checa()"><br />
CPF .........:<input type = "text" name = "cpf"
onBlur="checarCPF()"><br />
size="15"
Sexo ........:
<input type="radio" name="sexo" value="masculino" checked>Masculino
<input type="radio" name="sexo" value="masculino">Feminino
<br /><br /><br />
<input type = "reset" value = "Limpar Formulбrio">
<input type = "submit" value = "Enviar Formulбrio">
<tt>
</form>
</body>
</html>
This document was created with Win2PDF available at http://www.win2pdf.com.
The unregistered version of Win2PDF is for evaluation or non-commercial use only.
This page will not be added after purchasing Win2PDF.
Download
