Descrição das funções javaScript que foram utilizadas nas páginas do site MineraFórum

5/14/2018 Descrição das funções javaScript que foram utilizadas nas páginas do site MineraFórum - slidepdf.com

http://slidepdf.com/reader/full/descricao-das-funcoes-javascript-que-foram-utilizadas-nas-paginas-do-site-mineraforum 1/14

Descrição das funções javaScript que foram utilizadas nas

páginas do site MineraFórum

1- Para mostrar o conteúdo relativo a cada opção do menu:

a) Código:

function showDiv( idName, value ){

objDiv = document.getElementById( idName );

if( value )

objDiv.style.display = "";

else

objDiv.style.display = "none";

}

b) Página: index.html, na lista não ordenada (ul) com id=menu.

c) Trecho do código onde ela é chamada:

<li type="none"><div id='s1'><a href ="javascript:void(0)" onClick = "javascript:

showDiv( 'home', true ); showDiv( 'down', false );showDiv( 'tuto', false ); showDiv( 'message',

false );showDiv( 'contato', false ); " title="Homepage" >Página principal</a></div></li>

<li type="none"><div id='s2' ><a href="javascript:void(0)" onClick =

"javascript:showDiv( 'down', true ); showDiv( 'home', false );showDiv( 'tuto', false );

showDiv( 'message', false );showDiv( 'contato', false );" title="Download">Download dosoftware</a></div></li>

<li type="none"><div id='s3'><a href="javascript:void(0)" onClick =

"javascript:showDiv( 'tuto', true ); showDiv( 'home', false );showDiv( 'down', false );

showDiv( 'message', false );showDiv( 'contato', false );" title="Tutorial"

>Tutorial</a></div></li>


"javascript:showDiv( 'message', true ); showDiv( 'home', false );showDiv( 'down', false );

showDiv( 'tuto', false );showDiv( 'contato', false );" title="Enviar mensagem" >Enviar

mensagem</a></div></li>


"javascript:showDiv( 'contato', true ); showDiv( 'home', false );showDiv( 'down', false );

showDiv( 'tuto', false );showDiv( 'message', false );" title="Contato" >Contatos</a></div></li>

d) Esquema de funcionamento: Ele “esconde” o conteúdo das divs com os ids do primeiro

argumento da função ou mostra troca o valor de uma das propriedades do estilo, o

display, quando é “none” ele esconde e quando é “” ele mostra.

2- Para formatar alguns campos do formulário

a) Código:

function formatar(mascara, documento){



var i = documento.value.length;

var saida = mascara.substring(0,1);

var texto = mascara.substring(i)

if (texto.substring(0,1) != saida){

documento.value += texto.substring(0,1);

}

}

b) Página: index.html, no conteúdo do formulário da div de id=message.


<td><input type="text" name="rg" maxlength="12" OnBlur="ValidaRg(form1.rg)"

onChange="ValidaRg(form1.rg)" OnKeyPress="formatar('##.###.###-#', this)" ></td>

<td width="265"><input type="text" name="data" maxlength="10"

onChange="ValidaData(form1.data);" onBlur="ValidaData(form1.data);"

OnKeyPress="formatar('##/##/####', this)" ></td>

<td><input type="text" name="tel" maxlength="12" onBlur="ValidaTelefone(form1.tel);"

onChange="ValidaTelefone(form1.tel);" onKeyPress="formatar('## ####-####',

this)"></td>

<td><input type="text" name="cpf" onBlur="ValidarCPF(form1.cpf);"

onchange="ValidarCPF(form1.cpf);" onKeyPress="formatar('###.###.###-##', this)"

maxlength="14"></td>

<td><input type="text" name="cep" maxlength="14" onBlur="ValidaCep(form1.cep);"

onChange="ValidaCep(form1.cep);" OnKeyPress="formatar('##.###-###', this)" ></td>

<td><input type="text" name="cnpj" onBlur="ValidarCNPJ(form1.cnpj);"

onChange="ValidarCNPJ(form1.cnpj);" OnKeyPress="formatar('##.###.###/####-##', this)"


d) Esquema de funcionamento: a cada tecla que o usuário digita ele arruma no formato

desejado colocado no primeiro argumento, com o jogo da velha significando número

inteiro e o this é para dizer que se refere àquele campo da mesma página.

3- Para validar o conteúdo do campo nome

a) Código:

function ValidaNome(nome){

var a = document.form1.nome.value;

if(a=="" || a.length<5){

label_ = document.getElementById("label_nome");

label_.style.color="#ff0000";



alert('Nome Invalido!');

}

else{

label_ = document.getElementById("label_nome");

label_.style.color="#6a5acd";

}

}



<td width="265"><input type="text" name="nome" maxlength="20"

onBlur="ValidaNome(form1.nome);" onChange="ValidaNome(form1.nome);" ></td>

d) Esquema de funcionamento: Quando o usuário muda algo no campo ou sai do campo ele

verifica se o campo está vazio, ou se tem menos que cinco caracteres, se assim estiver

ele dá uma mensagem dizendo que está inválido e troca a label com valor “*Nome:” para

a cor vermelha, se estiver cumprindo os requisitos a mensagem não é emitida e a label

fica com a cor azul.

4- Para validar o conteúdo do campo RG

a) Código:

function ValidaRg(rg){

exp = /\d{2}\.\d{3}\.\d{3}\-\d{1}/

var a = document.form1.rg.value;

if(!exp.test(rg.value)){

label_ = document.getElementById("label_rg");


alert('RG Invalido!');

}

else{

label_ = document.getElementById("label_rg");


}

}





<td><input type="text" name="rg" maxlength="12" OnBlur="ValidaRg(form1.rg)"

onChange="ValidaRg(form1.rg)" OnKeyPress="formatar('##.###.###-#', this)"

></td>


verifica se o campo só possui números inteiros (considerando a mesma máscara usada

na formatação), se assim não estiver ele dá uma mensagem dizendo que está inválido e

troca a label com valor “RG:” para a cor vermelha, se estiver cumprindo os requisitos a

mensagem não é emitida e a label fica com a cor azul.

5- Para validar o conteúdo do campo Data:

a) Código:

function ValidaData(data){

exp = /\d{2}\/\d{2}\/\d{4}/

if(!exp.test(data.value)){

label_ = document.getElementById("label_data");


alert('Data Invalida!');

}

else {

dia = parseInt(document.form1.data.value.substring(0,2));

var f=document.form1.data.value.charAt(3);

if (f!='1' && f!='3' && f!='2'){

mes = parseInt(document.form1.data.value.charAt(4));

}

else{

mes = parseInt(document.form1.data.value.substring(3,5));

}

ano = parseInt(document.form1.data.value.substring(6,10));

var j=0;

for (var k=1; k<=31;k++){

if (dia==k){

j++;

}

}



for (var k=1; k<=12;k++){

if (mes==k){

j++;

}

}

for (var k=1950; k<=2012;k++){

if (ano==k){

j++;

}

}

if (j==3){



}

else{



alert('Data Invalida!');

}

}

}



<td width="265"><input type="text" name="data" maxlength="10"

onChange="ValidaData(form1.data);" onBlur="ValidaData(form1.data);"

OnKeyPress="formatar('##/##/####', this)" ></td>



na formatação), e vê se o número colocado para dia, mês e ano estão nos limites

possíveis (exemplo: se o mês está entre 1 e 12),se assim não estiver ele dá uma

mensagem dizendo que está inválido e troca a label com valor “Data:” para a cor

vermelha, se estiver cumprindo os requisitos a mensagem não é emitida e a label ficacom a cor azul.

6- Para validar o conteúdo do campo telefone



a) Código:

function ValidaTelefone(tel){

var j=0;

for (var i = 0 ; i < 12 ; i++) {

Result = parseInt(document.form1.tel.value.charAt(i));

for (var k = 0 ; k < 10 ; k++) {

if (Result==k){

j++;

}

}

}

if (j==10) {

label_tel = document.getElementById("tel_");

label_tel.style.color="#6a5acd";

}

else {

label_tel = document.getElementById("tel_");

label_tel.style.color="#ff0000";

alert('Numero de Telefone Invalido!');

}

}



<td><input type="text" name="tel" maxlength="12" onBlur="ValidaTelefone(form1.tel);"

onChange="ValidaTelefone(form1.tel);" onKeyPress="formatar('## ####-####',

this)"></td>



na formatação), se assim não estiver ele dá uma mensagem dizendo que está inválido e

troca a label com valor “Telefone:” para a cor vermelha, se estiver cumprindo os

requisitos a mensagem não é emitida e a label fica com a cor azul.

7- Para validar o conteúdo do campo cpf

a) Código:

function ValidarCPF(Objcpf){



var cpf = Objcpf.value;

exp = /\.|\-/g

cpf = cpf.toString().replace( exp, "" );

var digitoDigitado = eval(cpf.charAt(9)+cpf.charAt(10));

var soma1=0, soma2=0;

var vlr =11;

for(i=0;i<9;i++){

soma1+=eval(cpf.charAt(i)*(vlr-1));

soma2+=eval(cpf.charAt(i)*vlr);

vlr--;

}

soma1 = (((soma1*10)%11)==10 ? 0:((soma1*10)%11));

soma2=(((soma2+(2*soma1))*10)%11);

var digitoGerado=(soma1*10)+soma2;

if(digitoGerado!=digitoDigitado) {

label_ = document.getElementById("label_cpf");


alert('Numero de Cep Invalido!');

}

else{

label_ = document.getElementById("label_cpf");


}

}



<td><input type="text" name="cpf" onBlur="ValidarCPF(form1.cpf);"

onchange="ValidarCPF(form1.cpf);" onKeyPress="formatar('###.###.###-##', this)"






na formatação), além disso ele verifica a validade do número do cpf através do cálculo

do dígito verificador. Se assim não estiver ele dá uma mensagem dizendo que está

inválido e troca a label com valor “CPF:” para a cor vermelha, se estiver cumprindo os

requisitos a mensagem não é emitida e a label fica com a cor azul.

8- Para validar o conteúdo do campo cep

a) Código:

function ValidaCep(cep){

exp = /\d{2}\.\d{3}\-\d{3}/

if(!exp.test(cep.value)){

label_ = document.getElementById("label_cep");


alert('Numero de Cep Invalido!');

}

else{

label_ = document.getElementById("label_cep");


}

}



<td><input type="text" name="cep" maxlength="14" onBlur="ValidaCep(form1.cep);"

onChange="ValidaCep(form1.cep);" OnKeyPress="formatar('##.###-###', this)" ></td>


verifica se o campo só possui números inteiros (considerando a mesma máscara usadana formatação. Se assim não estiver ele dá uma mensagem dizendo que está inválido e

troca a label com valor “CEP:” para a cor vermelha, se estiver cumprindo os requisitos a

mensagem não é emitida e a label fica com a cor azul.

9- Para validar o conteúdo do campo cnpj

a) Código:

function ValidarCNPJ(ObjCnpj){

var cnpj = ObjCnpj.value;

var valida = new Array(6,5,4,3,2,9,8,7,6,5,4,3,2);

var dig1= new Number;



var dig2= new Number;

exp = /\.|\-|\//g

cnpj = cnpj.toString().replace( exp, "" );

var digito = new Number(eval(cnpj.charAt(12)+cnpj.charAt(13)));

for(i = 0; i<valida.length; i++){

dig1 += (i>0? (cnpj.charAt(i-1)*valida[i]):0);

dig2 += cnpj.charAt(i)*valida[i];

}

dig1 = (((dig1%11)<2)? 0:(11-(dig1%11)));

dig2 = (((dig2%11)<2)? 0:(11-(dig2%11)));

if(((dig1*10)+dig2) != digito) {

label_ = document.getElementById("label_cnpj");


}

else{

label_ = document.getElementById("label_cnpj");


}

}



<td><input type="text" name="cnpj" onBlur="ValidarCNPJ(form1.cnpj);"

onChange="ValidarCNPJ(form1.cnpj);" OnKeyPress="formatar('##.###.###/####-##',

this)" maxlength="19"></td>



na formatação), além disso, ele faz uma conta para saber se o dígito verificador é igualao dígito digitado pelo usuário, parecido com o da validação do cpf. Se assim não estiver

ele dá uma mensagem dizendo que está inválido e troca a label com valor “CNPJ:” para a



cor vermelha, se estiver cumprindo os requisitos a mensagem não é emitida e a label


10-Para validar o conteúdo do campo cidade

a) Código:

function ValidaCidade(cidade){

var a = document.form1.cidade.value;

if(a=="" || a.lenght<5){

label_ = document.getElementById("label_cidade");


alert('CNPJ Invalido!');

}

else{

label_ = document.getElementById("label_cidade");


}

}



<td><input type="text" name="cidade" onBlur="ValidaCidade(form1.cidade);"

onChange="ValidaCidade(form1.cidade);" maxlength="19"></td>


verifica se o campo está vazio, ou se tem menos que cinco caracteres, se assim estiver

ele dá uma mensagem dizendo que está inválido e troca a label com valor “Cidade:” para

a cor vermelha, se estiver cumprindo os requisitos a mensagem não é emitida e a label


11-Para validar o conteúdo do campo email:

a) Código:

function ValidaEmail(email){

var a = document.form1.mail.value;

if(a=="" || a.indexOf("@")==-1 || a.indexOf(".com")==-1){

label_ = document.getElementById("label_mail");


alert('E-mail Invalido!');

}



else{

label_ = document.getElementById("label_mail");


}

}



<td><input type="text" name="mail" onBlur="ValidaEmail(form1.mail);"

onChange="ValidaEmail(form1.mail);" maxlength="20"></td>


verifica se o campo está vazio, se t ele possui o @ característico de qualquer e-mail e se

o que foi digitado também possui o “.com”, apesar de existirem e-mails, por exemplo

institucionais que não possuem a última regra, só são considerados válidos os e-mailsque qualquer pessoa possui. sendo servidoras ou não. Se assim estiver ele dá uma

mensagem dizendo que está inválido e troca a label com valor “Cidade:” para a cor

vermelha, se estiver cumprindo os requisitos a mensagem não é emitida e a label fica

com a cor azul.

12-Para contar quantos votos cada opção do radio button obteve.

a) Código:

function control_radio(){

var i

for (i=0;i<document.aval.g2.length;i++){

if (document.aval.g2[i].checked) {

numeros[i]=numeros[i]+1;

alert(numeros[i]);

j++;

}

}

if (j==0){

alert("Você não escolheu nenhuma das opções!");

}

}

b) Página: index.html, no conteúdo do formulário de nome “aval”.




<div align="left" id="nota1"><b><td><input type="button" name="vota" value="avaliar"

onClick="control_radio()" ></td></b></div>

d) Esquema de funcionamento: Quando o usuário clicar no botão avaliar da enquete a

função verifica se há algum radio button selecionado, se tiver ele incrementa mais uma

unidade na posição do array referente ao radio button selecionado, este array foi

previamente zerado, antes da função, no mesmo script, logo por isso existe a limitação

dos dados serem resetados logo após recarregar a página. Mas serve de base para o

incremento quando este dado for armazenado num arquivo de texto, por exemplo. Se

nenhum estiver selecionado ele retorna uma mensagem de erro na tela.

13-Para abrir a página que gera o gráfico da enquete.

a) Código:

function abrir(){

open("ex_graph.html?id="+numeros[0]+"="+numeros[1]+"="+numeros[2]+"="+numeros[3]+"="+numeros[4]);

}

b) Página: index.html, no conteúdo do formulário de nome “aval”.


<div align="left" id="nota1"><b><td><input type="button" name="grafico" value="Ver

resultado" onClick="abrir()" ></td></b></div>

d) Esquema de funcionamento: Quando o usuário clicar no botão Ver resultado, será abertaem nova aba uma outra página que irá gerar o gráfico de colunas com os totais de cada

alternativa do radio button, os parâmetros que é o que está armazenado em cada

posição referente do array são passados através da url com ?id=, e então os parâmetros

são concatenados como string.

14-Para receber os parâmetros na outra página.

a) Código:

<script language="javascript">

//o split separa a string quando encontra o ?

var variaveis = location.search.split("?");

var quebra = variaveis[1].split("=");

gerar(parseInt(quebra[1]), parseInt(quebra[2]), parseInt(quebra[3]), parseInt( quebra[4]),

parseInt( quebra[5]));

</script>

b) Página: ex_graph.html, no corpo abaixo da div com id=graph




O código já está declarado nesta parte da página.

d) Esquema de funcionamento: a variável de nome “variaveis”, que é uma lista de strings,

vai receber duas strings que vão vir da url (ex_graph?id=1=1=1=1=1, por

exemplo)separada em duas partes pelo caracter “?”, então, feito isso obteve-se a parte

que interessa com os parâmetros, e então agora pega-se a string da posição 1 de

“variaveis” e separa-se por “=”, então na variável quebras a partir da posição 1, vão

estar os valores que foram passados pela outra página, s´po que ainda são strings, e

então para colocá-los como números inteiros na função que vai gerar o gráfico é só usar

a função parseInt, intríseca do html. E então chamada a função ele desenhará o gráfico.

15-Para gerar o gráfico.

a) Código:

function gerar(n1, n2, n3, n4, n5){

var myData = new Array(['Compreensível', n1], ['Interessante', n2], ['Sem opinião', n3],

['Não gostei', n4], ['Não entendi', n5]);

var colors = ['#0000CD', '#EC7A00', '#FCD200', '#81C714','#CE0000'];

var myChart = new JSChart('graph', 'bar');

myChart.setDataArray(myData);

myChart.colorizeBars(colors);

myChart.setTitle('Mensuração dos votos dos visitantes');

myChart.setTitleColor('#CE0000');

myChart.setAxisColor('#9D9F9D');

myChart.setAxisWidth(1);

myChart.setAxisNameX('Opiniões');

myChart.setAxisNameY('Valores');

myChart.setAxisNameFontSize(9);

myChart.setAxisNameColor('#CE0000');

myChart.draw();

}

b) Página: ex_graph.html, na head.


Está sendo chamada na última linha do código do tópico anterior.

d) Esquema de funcionamento: Foi importada uma biblioteca de macros o jscharts.js em

javascript, antes desta função ser feita, então foi feito um array bidimensional, com osvalores do eixo x do gráfico sendo as strings com os nomes das alternativas do radio

button, e no eixo y estão os valores numéricos, vindos pelo parâmetro que foi passado da

outra página. Depois em outro array, foram colocados as cores em hexadecimal de cada



coluna. Depois foi instanciado um objeto de uma macro da biblioteca, e os parâmetros

são a id do container (div ou span, no caso foi div, com o id de nome graph),onde o

gráfico será desenhado, e no outro parâmetro o tipo do gráfico, no caso, foi de barras.

Depois foi setado os dados para construir o gráfico, que é o array bidimensional

declarado antes. Foi setado as cores de cada coluna, com o array de cores em

hexadecimal. Foi colocado o conteúdo título do gráfico. Depois a cor do gráfico. Depois a

cor e a espessura dos eixos. O nome de cada eixo, que foi Opiniões e valores, para x e y,

respectivamente. O tamanho da letra do conteúdo dos eixos. E também foi setada a cordos nomes dos eixos. E por fim, o gráfico foi renderizado pelo método draw().

Documents

Descrição das funções javaScript que foram utilizadas nas páginas do site MineraFórum