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> SINTAXE <script language="javascript1.2"> [comandos em javascript] De uma forma geral escrevemos os codigos em javascript sem mencionar sua versão. <script language="javascript"> [comandos em javascript] usamos e com a finalidade de pular as linhas de codigo do script, caso o browser não suporte o codigo javascript.
Exemplo 1 <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.'); </head> </body> </html> Exemplo 2 <title> Segundo programa </title> document.writeln("<h1> Bem vindo ao Javascript!</h1>"); </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"> <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); </body> </html> Ambientes de Internet JavaScript aula 2 Evento com inteiro EXEMPLO <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 ()); </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 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); 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"> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" /> <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); </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"> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" /> <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); </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);
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); 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"> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" /> <title></title> </head> <body> var NUMERO; NUMERO = Math.random(); document.write('valor = ', NUMERO); </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"> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" /> <title></title> </head> <body> var F, C; R = prompt('entre com a temperatura em graus centigrados </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)
document.write("o primeiro e maior "); else document.write("o segundo e maior "); 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 "); 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
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"> <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()"> 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); </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: var i=1; while (i<=10) { document.write('mensagem '+i+'<br>');... 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;... DO WHILE... Sintaxe: do { <instrucao> while (condicao)... Exemplo: var i=1; do { document.write('mensagem '+i+'<br>'); i +=1;
while (i <= 10)... Instrucao FOR Sintaxe: for (inicio; fim; incremento) { <instrucao>... Exemplo: var i; for (i=1; i<=10; i++) { document.write(i + '<br>');... 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" 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!!!"); <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. Exemplo: Enquato houver mais itens na minha lista de compras Comprar o próximo item e remove-lo da minha lista 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 --> <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>"); //-> </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 --> <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; else document.writeln("<h1>classe Media " + media + "</h1>"); document.writeln("<p>entre com notas</p>"); </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 --> <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"); </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 --> <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); </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 --> <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; </head>
<body> <center><h1>cadastro</h1></center> <form name = "mform" onsubmit = "return verifica()"> <tt> Nome...:<input type="text" name = "nome" Endere o...:<input type="text" name = "endereco" CEP...:<input type="text" name = "cep" Cidade...:<input type="text" name = "cidade" /> /> size="45"><br/> size="50"><br/> size="9"><br/> 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 --> <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 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(); </head> <body> <center><h1>cadastro</h1></center>
<form name = "mform" onsubmit = "return verifica()"> <tt> Nome...:<input type="text" name = "nome" Endere o...:<input type="text" name = "endereco" CEP...:<input type="text" name = "cep" Cidade...:<input type="text" name = "cidade" <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" onblur="checa()"><br /> CPF...:<input type = "text" name = "cpf" /> size="45"><br/> size="50"><br/> size="9"><br/> size="25"><br/> size="15" 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 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).
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. <?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 --> <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 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 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(); </head> <body> <center><h1>cadastro</h1></center> <form name = "mform" onsubmit = "return verifica()"> <tt> Nome...:<input type="text" name = "nome" Endereзo...:<input type="text" name = "endereco" size="50"><br/> CEP...:<input type="text" name = "cep" Cidade...:<input type="text" name = "cidade" <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" onblur="checa()"><br /> size="45"><br/> size="9"><br/> size="25"><br/> size="15" 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.