Descrio das funes javaScript que foram utilizadas nas pginas do site MineraFrum

1- Para mostrar o contedo relativo a cada opo do menu: a) Cdigo: function showDiv( idName, value ){ objDiv = document.getElementById( idName ); if( value ) objDiv.style.display = ""; else objDiv.style.display = "none"; } b) Pgina: index.html, na lista no ordenada (ul) com id=menu. c) Trecho do cdigo 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" >Pgina 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 do software</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> <li type="none"><div id='s3'><a href="javascript:void(0)" onClick = "javascript:showDiv( 'message', true ); showDiv( 'home', false );showDiv( 'down', false ); showDiv( 'tuto', false );showDiv( 'contato', false );" title="Enviar mensagem" >Enviar mensagem</a></div></li> <li type="none"><div id='s4'><a href="javascript:void(0)" onClick = "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 contedo das divs com os ids do primeiro argumento da funo 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 formulrio a) Cdigo: 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) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <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)" maxlength="19"></td> d) Esquema de funcionamento: a cada tecla que o usurio digita ele arruma no formato desejado colocado no primeiro argumento, com o jogo da velha significando nmero inteiro e o this para dizer que se refere quele campo da mesma pgina. 3- Para validar o contedo do campo nome a) Cdigo: 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"; } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <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 usurio 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 invlido e troca a label com valor *Nome: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 4- Para validar o contedo do campo RG a) Cdigo: 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"); label_.style.color="#ff0000"; alert('RG Invalido!'); } else{ label_ = document.getElementById("label_rg"); label_.style.color="#6a5acd"; } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada:

<td><input type="text" name="rg" maxlength="12" OnBlur="ValidaRg(form1.rg)" onChange="ValidaRg(form1.rg)" OnKeyPress="formatar('##.###.###-#', this)" ></td> d) Esquema de funcionamento: Quando o usurio muda algo no campo ou sai do campo ele verifica se o campo s possui nmeros inteiros (considerando a mesma mscara usada na formatao), se assim no estiver ele d uma mensagem dizendo que est invlido e troca a label com valor RG: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 5- Para validar o contedo do campo Data: a) Cdigo: function ValidaData(data){ exp = /\d{2}\/\d{2}\/\d{4}/ if(!exp.test(data.value)){ label_ = document.getElementById("label_data"); label_.style.color="#ff0000"; 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){ label_ = document.getElementById("label_data"); label_.style.color="#6a5acd"; } else{ label_ = document.getElementById("label_data"); label_.style.color="#ff0000"; alert('Data Invalida!'); } } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <td width="265"><input type="text" name="data" maxlength="10" onChange="ValidaData(form1.data);" onBlur="ValidaData(form1.data);" OnKeyPress="formatar('##/##/####', this)" ></td> d) Esquema de funcionamento: Quando o usurio muda algo no campo ou sai do campo ele verifica se o campo s possui nmeros inteiros (considerando a mesma mscara usada na formatao), e v se o nmero colocado para dia, ms e ano esto nos limites possveis (exemplo: se o ms est entre 1 e 12),se assim no estiver ele d uma mensagem dizendo que est invlido e troca a label com valor Data: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 6- Para validar o contedo do campo telefone

a) Cdigo: 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!'); } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <td><input type="text" name="tel" maxlength="12" onBlur="ValidaTelefone(form1.tel);" onChange="ValidaTelefone(form1.tel);" onKeyPress="formatar('## ####-####', this)"></td> d) Esquema de funcionamento: Quando o usurio muda algo no campo ou sai do campo ele verifica se o campo s possui nmeros inteiros (considerando a mesma mscara usada na formatao), se assim no estiver ele d uma mensagem dizendo que est invlido e troca a label com valor Telefone: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 7- Para validar o contedo do campo cpf a) Cdigo: 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"); label_.style.color="#ff0000"; alert('Numero de Cep Invalido!'); } else{ label_ = document.getElementById("label_cpf"); label_.style.color="#6a5acd"; } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <td><input type="text" name="cpf" onBlur="ValidarCPF(form1.cpf);" onchange="ValidarCPF(form1.cpf);" onKeyPress="formatar('###.###.###-##', this)" maxlength="14"></td>

d) Esquema de funcionamento: Quando o usurio muda algo no campo ou sai do campo ele verifica se o campo s possui nmeros inteiros (considerando a mesma mscara usada na formatao), alm disso ele verifica a validade do nmero do cpf atravs do clculo do dgito verificador. Se assim no estiver ele d uma mensagem dizendo que est invlido e troca a label com valor CPF: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 8- Para validar o contedo do campo cep a) Cdigo: function ValidaCep(cep){ exp = /\d{2}\.\d{3}\-\d{3}/ if(!exp.test(cep.value)){ label_ = document.getElementById("label_cep"); label_.style.color="#ff0000"; alert('Numero de Cep Invalido!'); } else{ label_ = document.getElementById("label_cep"); label_.style.color="#6a5acd"; } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <td><input type="text" name="cep" maxlength="14" onBlur="ValidaCep(form1.cep);" onChange="ValidaCep(form1.cep);" OnKeyPress="formatar('##.###-###', this)" ></td> d) Esquema de funcionamento: Quando o usurio muda algo no campo ou sai do campo ele verifica se o campo s possui nmeros inteiros (considerando a mesma mscara usada na formatao. Se assim no estiver ele d uma mensagem dizendo que est invlido e troca a label com valor CEP: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 9- Para validar o contedo do campo cnpj a) Cdigo: 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"); label_.style.color="#ff0000"; } else{ label_ = document.getElementById("label_cnpj"); label_.style.color="#6a5acd"; }

} b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <td><input type="text" name="cnpj" onBlur="ValidarCNPJ(form1.cnpj);" onChange="ValidarCNPJ(form1.cnpj);" OnKeyPress="formatar('##.###.###/####-##', this)" maxlength="19"></td> d) Esquema de funcionamento: Quando o usurio muda algo no campo ou sai do campo ele verifica se o campo s possui nmeros inteiros (considerando a mesma mscara usada na formatao), alm disso, ele faz uma conta para saber se o dgito verificador igual ao dgito digitado pelo usurio, parecido com o da validao do cpf. Se assim no estiver ele d uma mensagem dizendo que est invlido e troca a label com valor CNPJ: para a

cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 10-Para validar o contedo do campo cidade a) Cdigo: function ValidaCidade(cidade){ var a = document.form1.cidade.value; if(a=="" || a.lenght<5){ label_ = document.getElementById("label_cidade"); label_.style.color="#ff0000"; alert('CNPJ Invalido!'); } else{ label_ = document.getElementById("label_cidade"); label_.style.color="#6a5acd"; } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <td><input type="text" name="cidade" onBlur="ValidaCidade(form1.cidade);" onChange="ValidaCidade(form1.cidade);" maxlength="19"></td> d) Esquema de funcionamento: Quando o usurio 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 invlido e troca a label com valor Cidade: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 11-Para validar o contedo do campo email: a) Cdigo: function ValidaEmail(email){ var a = document.form1.mail.value; if(a=="" || a.indexOf("@")==-1 || a.indexOf(".com")==-1){ label_ = document.getElementById("label_mail"); label_.style.color="#ff0000"; alert('E-mail Invalido!'); }

else{ label_ = document.getElementById("label_mail"); label_.style.color="#6a5acd"; } } b) Pgina: index.html, no contedo do formulrio da div de id=message. c) Trecho do cdigo onde ela chamada: <td><input type="text" name="mail" onBlur="ValidaEmail(form1.mail);" onChange="ValidaEmail(form1.mail);" maxlength="20"></td> d) Esquema de funcionamento: Quando o usurio muda algo no campo ou sai do campo ele verifica se o campo est vazio, se t ele possui o @ caracterstico de qualquer e-mail e se o que foi digitado tambm possui o .com, apesar de existirem e-mails, por exemplo institucionais que no possuem a ltima regra, s so considerados vlidos os e-mails que qualquer pessoa possui. sendo servidoras ou no. Se assim estiver ele d uma mensagem dizendo que est invlido e troca a label com valor Cidade: para a cor vermelha, se estiver cumprindo os requisitos a mensagem no emitida e a label fica com a cor azul. 12-Para contar quantos votos cada opo do radio button obteve. a) Cdigo: 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 no escolheu nenhuma das opes!"); } } b) Pgina: index.html, no contedo do formulrio de nome aval. c) Trecho do cdigo onde ela chamada:

<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 usurio clicar no boto avaliar da enquete a funo verifica se h algum radio button selecionado, se tiver ele incrementa mais uma unidade na posio do array referente ao radio button selecionado, este array foi previamente zerado, antes da funo, no mesmo script, logo por isso existe a limitao dos dados serem resetados logo aps recarregar a pgina. 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 pgina que gera o grfico da enquete. a) Cdigo: function abrir(){ open("ex_graph.html? id="+numeros[0]+"="+numeros[1]+"="+numeros[2]+"="+numeros[3]+"="+numeros[4]); } b) Pgina: index.html, no contedo do formulrio de nome aval. c) Trecho do cdigo onde ela chamada: <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 usurio clicar no boto Ver resultado, ser aberta em nova aba uma outra pgina que ir gerar o grfico de colunas com os totais de cada alternativa do radio button, os parmetros que o que est armazenado em cada posio referente do array so passados atravs da url com ?id=, e ento os parmetros so concatenados como string. 14-Para receber os parmetros na outra pgina. a) Cdigo: <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) Pgina: ex_graph.html, no corpo abaixo da div com id=graph c) Trecho do cdigo onde ela chamada:

O cdigo j est declarado nesta parte da pgina. d) Esquema de funcionamento: a varivel de nome variaveis, que uma lista de strings, vai receber duas strings que vo vir da url (ex_graph?id=1=1=1=1=1, por exemplo)separada em duas partes pelo caracter ?, ento, feito isso obteve-se a parte que interessa com os parmetros, e ento agora pega-se a string da posio 1 de variaveis e separa-se por =, ento na varivel quebras a partir da posio 1, vo estar os valores que foram passados pela outra pgina, spo que ainda so strings, e ento para coloc-los como nmeros inteiros na funo que vai gerar o grfico s usar a funo parseInt, intrseca do html. E ento chamada a funo ele desenhar o grfico. 15-Para gerar o grfico. a) Cdigo: function gerar(n1, n2, n3, n4, n5){ var myData = new Array(['Compreensvel', n1], ['Interessante', n2], ['Sem opinio', n3], ['No gostei', n4], ['No entendi', n5]); var colors = ['#0000CD', '#EC7A00', '#FCD200', '#81C714','#CE0000']; var myChart = new JSChart('graph', 'bar'); myChart.setDataArray(myData); myChart.colorizeBars(colors); myChart.setTitle('Mensurao dos votos dos visitantes'); myChart.setTitleColor('#CE0000'); myChart.setAxisColor('#9D9F9D'); myChart.setAxisWidth(1); myChart.setAxisNameX('Opinies'); myChart.setAxisNameY('Valores'); myChart.setAxisNameFontSize(9); myChart.setAxisNameColor('#CE0000'); myChart.draw(); } b) Pgina: ex_graph.html, na head. c) Trecho do cdigo onde ela chamada: Est sendo chamada na ltima linha do cdigo do tpico anterior. d) Esquema de funcionamento: Foi importada uma biblioteca de macros o jscharts.js em javascript, antes desta funo ser feita, ento foi feito um array bidimensional, com os valores do eixo x do grfico sendo as strings com os nomes das alternativas do radio button, e no eixo y esto os valores numricos, vindos pelo parmetro que foi passado da outra pgina. 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 parmetros so a id do container (div ou span, no caso foi div, com o id de nome graph),onde o grfico ser desenhado, e no outro parmetro o tipo do grfico, no caso, foi de barras. Depois foi setado os dados para construir o grfico, que o array bidimensional declarado antes. Foi setado as cores de cada coluna, com o array de cores em hexadecimal. Foi colocado o contedo ttulo do grfico. Depois a cor do grfico. Depois a cor e a espessura dos eixos. O nome de cada eixo, que foi Opinies e valores, para x e y, respectivamente. O tamanho da letra do contedo dos eixos. E tambm foi setada a cor dos nomes dos eixos. E por fim, o grfico foi renderizado pelo mtodo draw().