Ambiente de Internet JavaScript Aula 1. Tipos de dados

(1)

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>

SINTAXE

<!--

[comandos em javascript]

//-->

</script>

De uma forma geral escrevemos os codigos em javascript sem mencionar sua versão.

<!--

[comandos em javascript]

//-->

</script>

usamos  com a finalidade de pular as linhas de codigo do script, caso o browser não suporte o codigo javascript.

(2)

Exemplo 1

<head>

<title>Título</title>

<!--

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

<!--

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

<head>

http-equiv="content-type" />

</head>

<body>

Entre nome:<input type="text" name="c1">

Entre sobrenome:<input type="text" name="c2">

</br>

</form>

<!--

var nome; var sobrenome; var nomecompleto;

function mostranome(){

nome=document.mform.c1.value;

sobrenome=document.mform.c2.value;

nomecompleto=nome + " " + sobrenome;

(3)

alert("Oi " +nomecompleto);

}//-->

</script>

</body>

</html>

Ambientes de Internet – JavaScript – aula 2

Evento com inteiro

EXEMPLO

<head>

<title>programa adicao</title>

<!--

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>

valor 1:<input type="text" name="C1">

valor 2:<input type="text" name="C2"></br>

</form>

</body>

</html>

______________________________________________

(4)

EXEMPLO

<!--

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>

<head>

<title>Exemplo com Real</title>

</head>

<body>

<!--

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>

______________________________________________

(5)

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

<head>

<title>Funções Pré-Definidas</title>

</head>

<body>

<!--

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

<!--

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

(6)

//-->

</script>

2 - Desenvolva um programa que apresenta como resultado o valor sorteado de forma randômica entre 0(zero) e 1(um) Ex.:

<!--

var numero= math.random();

document.write('Valor: ', numero);

//-->

</script>

Solução 02

<head>

</head>

<body>

<!--

var NUMERO;

NUMERO = Math.random();

document.write('Valor = ', NUMERO);

//-->

</script>

</body>

</html>

(7)

3 - Ler uma temperatura em graus centigrados e apresente em graus fahrenheit formula => F=(9*C+160)/5

<head>

</head>

<body>

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

<!--

var num1;var num2;

num1= prompt("Entre Valor 1", 'Aqui');

num2= prompt("Entre Valor 2", 'Aqui');

if(num1>num2)

(8)

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

<!--

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 Condição 2 Resultado lógico

F F F

V F F

F V F

V V V

(ou) or -> || - utilizado quando

Condição 1 Condição 2 Resultado lógico

F F F

V F V

F V V

V V V

Operador Lógico...not: !

V F

F V

(9)

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

<head>

<title>Exercicio 1 - JavaScript</title>

</head>

<body>

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

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

(10)

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

} } } //-->

Lado A: <input type=”text” name=”LadoA”><br>

Lado B: < input type=”text” name=”LadoB”><br>

Lado C: < input type=”text” name=”LadoC”><br>

</form>

(11)

AULA

JavaScript - while(repeticao)

...

Sintaxe:

while (condicao) { <instrucoes>

}

...

Exemplo:

<!-- var i=1;

while (i<=10) {

document.write('Mensagem '+i+'<br>');

} //-->

</script>

...

Fatorial:

<!--

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 {

}

while (condicao)

...

Exemplo:

<!-- var i=1;

do {

document.write('Mensagem '+i+'<br>');

i +=1;

(12)

}

while (i <= 10) //-->

</script>

...

Instrucao FOR

Sintaxe:

for (inicio; fim; incremento) { <instrucao>

}

...

Exemplo:

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

Calcule o fatorial de um nº qualquer.<br>

Valor: <input type="text" name="limite"><br>

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

<!--

var cont, i;

var aprovado;

var reprovado;

(13)

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>

Aluno: <input type="text" name="aluno"><br>

Digite (1) para aprovado ou (2) para reprovado...<br>

Resultado: <input type="text" name="result">

<input>

</form>

(14)

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.

(15)

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

<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 o total = 0;

contador = 1;

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

(16)

Configurar a média como o total dividido pelo contador Imprimir a média

Caso contrário

Imprimir “Nenhuma nota foi inserida”

<head>

<title>Programa media sentinela</title>

<!--

var total, contador, valornota, media, nota;

//Fase de inicializa o total = 0;

contador = 0;

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>

(17)

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:

<head>

<title></title>

<!--

//inicializando vari veis var passes = 0,

(18)

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

(19)

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

<head>

<title>Vetor 1</title>

<!--

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>

(20)

(21)

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

(22)

<head>

<title>Formul rio de Cadastro</title>

<!--

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>

(23)

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

(24)

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.

<head>

<title>Formul rio de Cadastro</title>

<!--

=='' ||

cpf==''){

alert ('Todos os campos do formul rio devem estar preenchidos.');

return false;

} } //-->

</script>

<!--

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>

(25)

<tt>

Endere o ....:<input type="text" name = "endereco" size="50"><br/>

Cidade ...:<input type="text" name = "cidade" size="25"><br/>

<br />

Estado...:

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

(26)

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 2 3 4 5 6 7 8 9

10 9 8 7 6 5 4 3 2

Em seguida efetua-se a multiplicação de cada coluna, conforme a seguinte indicação:

1 2 3 4 5 6 7 8 9

10 9 8 7 6 5 4 3 2

10 18 24 28 30 30 28 24 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).

(27)

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 2 3 4 5 6 7 8 9 0

11 10 9 8 7 6 5 4 3 2

Em seguida efetua-se a multiplicação de cada coluna, conforme a seguinte indicação.

1 2 3 4 5 6 7 8 9 0

11 10 9 8 7 6 5 4 3 2

11 20 27 32 35 36 35 32 27 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.

<head>

<title>exemplos js</title>

<!--

(28)

=='' ||

cpf==''){

alert ('Todos os campos do formulбrio devem estar preenchidos.');

return false;

} } //-->

</script>

<!--

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>

<!--

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

(29)

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>

<tt>

Endereзo ....:<input type="text" name = "endereco"

size="50"><br/>

Cidade ...:<input type="text" name = "cidade" size="25"><br/>

<br />

Estado...:

<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="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" size="15"

onBlur="checarCPF()"><br />

Sexo ...: