Com o forte aumento do desenvolvimento de aplicações para Internet, poucos desenvolvedores sabem do poder do JavaScript e de sua melhoria na interface com o usuário.
Este pequeno artigo tem como objetivo, apresentar algumas dicas práticas do uso do JavaScript:
Impressão Página HTML
Com esta dica você poderá colocar um hyperlink para impressão da página em questão.
<a href="javaScript:window.print()">Imprima esta página</a>
Avanço e retrocesso de páginas (navegação)
Para avançar ou retroceder uma página, você poderá utilizar os métodos do History, veja os exemplos.
<a href="javascript:history.go(-1)">Página Anterior</a>
<a href="javascript:history.go(1)">Página Posterior</a>
<a href="javascript:history.go(3)">Avança 3 páginas</a>
Abertura de novas janelas ou links
Um dos recursos mais utilizados na programação Web é abertura de novas janelas ou links por meio de hyperlinks ou eventos. Neste exemplo criamos uma função para facilitar tal procedimento
<script language="JavaScript">{
function Abre(page,target,options){
// target pode ser igual à :
// nome de frame: A página é aberta no frame referenciado.
// _self: Abre a página no mesmo frame da qual é chamada.
// _parent: Abre a página ocupando todo o frameset do qual é chamada.
// _top: Faz com que a página ocupe todo o browser eliminado todos os frames.
// _blank: Carrega a página em uma nova janela do browser.
window.open(page,target,options);
}
</script>
Exemplo de uso:
<a href="javascript:Abre('http://www.facunte.com.br',_blank,'status=no')">
Eventos
A utilização de eventos também ocorre na programação Web. Utilizamos muito este recurso no Delphi, mas como utilizar em páginas HTML? Vejamos as dicas:
- onload ocorre na carga do documento. Utilizado no BODY.
- onunload ocorre na saída do documento. Utilizado no BODY.
- onchange ocorre quando o objeto perde o foco e mudança de conteúdo.
- onblur ocorre quando o objeto perde o foco, independente de ter havido mudança.
- onfocus ocorre quando o objeto recebe o foco.
- onclick ocorre quando o objeto recebe um click do mouse.
- onmouseover ocorre quando o ponteiro do mouse passa por sobre o objeto.
- onselect ocorre quando o objeto é selecionado.
- onsubmit ocorre quando um botão tipo submit recebe um click do mouse.
Exemplos
<body onload="javascript:alert('seja bem vindo');">
<input type="text" name=nome onblur="checaNome(this)">
Caixas de diálogo
Quem nunca utilizou caixas de diálogo? Bem, na Internet não seria diferente. Temos bons exemplos de utilização:
Simples
Apresenta uma simples caixa de diálogo com uma mensagem e o botão OK!
Alert('Pedido confirmado');
Confirmação
Apresenta uma caixa de diálogo com duas opções OK e Cancelar, onde a resposta poderá ser tratada.
if (confirm ("Deseja continuar")) {
alert("continuação...")
}
else {
alert("finalização")
}
Prompt
Apresenta uma caixa de diálogo com um campo texto.
Nome = prompt("Informe seu nome", "Sistema Integrado")
alert('olá '+Nome+'! Seja bem-vindo ao sistema');
Digitando DATAS no campo input
Crie um arquivo com o nome funcoes.js e digite o conteúdo que segue.
function DigitaData(campo) {
var data = new String( campo.value );
var wData = '';
var cont = 0;
for (i=0; i<data.length ; i++) {
if (i <= 1) {
if ( data.charAt(i) >= '0' && data.charAt(i) <= '9' ) {
wData += data.charAt(i);
}
else
{
cont++;
}
}
if (i == 2) {
if ( data.charAt(i) == '/' ) {
wData += data.charAt(i);
}
else {
if ( data.charAt(i) >= '0' && data.charAt(i) <= '9' ) {
wData += '/';
wData += data.charAt(i);
cont ++;
}
else {
wData += '/';
cont ++;
}
}
}
if (i > 2 && i <= 4) {
if ( data.charAt(i) >= '0' && data.charAt(i) <= '9' ) {
wData += data.charAt(i);
}
else
{
cont++;
}
}
if (i == 5) {
if ( data.charAt(i) == '/' ) {
wData += data.charAt(i);
}
else {
if ( data.charAt(i) >= '0' && data.charAt(i) <= '9' ) {
wData += '/';
wData += data.charAt(i);
cont++;
}
else {
wData += '/';
cont++;
}
}
}
if (i > 5 && i <= 9) {
if ( data.charAt(i) >= '0' && data.charAt(i) <= '9' ) {
wData += data.charAt(i);
}
else
{
cont++;
}
}
if (i > 9 )
{
cont++;
}
}
if ( cont > 0 )
{
// Atualiza o campo
campo.value = wData;
}
}
Vamos testar nossa função:
<html>
<head>
<script language="JavaScript" src="/funcoes.js"></script>
</head>
<body>
<form name="teste">
<input type=text name=data onKeyUp="DigitaData(this)"
onBlur="DigitaData(this)"
</form>
<script language=javascript>
function validacpf(){
var i;
s = document.frmCli.txtCpf.value;
var c = s.substr(0,9);
var dv = s.substr(9,2);
var d1 = 0;
for (i = 0; i < 9; i++)
{
d1 += c.charAt(i)*(10-i);
}
if (d1 == 0){
alert("CPF Invalido")
return false;
}
d1 = 11 - (d1 % 11);
if (d1 > 9) d1 = 0;
if (dv.charAt(0) != d1)
{
alert("CPF Invalido")
return false;
}
d1 *= 2;
for (i = 0; i < 9; i++)
{
d1 += c.charAt(i)*(11-i);
}
d1 = 11 - (d1 % 11);
if (d1 > 9) d1 = 0;
if (dv.charAt(1) != d1)
{
alert("CPF Invalido")
return false;
}
return true;
}
</script>
</body>
</html>
Validando CPF
<html>
<head>>
<script language=javascript>
function validacpf(campo){
var i;
s = campo.value;
var c = s.substr(0,9);
var dv = s.substr(9,2);
var d1 = 0;
for (i = 0; i < 9; i++)
{
d1 += c.charAt(i)*(10-i);
}
if (d1 == 0){
alert("CPF Invalido")
return false;
}
d1 = 11 - (d1 % 11);
if (d1 > 9) d1 = 0;
if (dv.charAt(0) != d1)
{
alert("CPF Invalido")
return false;
}
d1 *= 2;
for (i = 0; i < 9; i++)
{
d1 += c.charAt(i)*(11-i);
}
d1 = 11 - (d1 % 11);
if (d1 > 9) d1 = 0;
if (dv.charAt(1) != d1)
{
alert("CPF Invalido")
return false;
}
return true;
}
</script>
</head>
<body>
<form name="teste">
<input type=text name=sCPF size=15 maxlength=11 onblur="return validacpf()">CPF
</form>
</body>
</html>
