www.devmedia.com.br
[versão para impressão]
Link original: http://www.devmedia.com.br/articles/viewcomp.asp?comp=599

Dicas de uso do JavaScript

Veja nesse artigo algumas dicas práticas do uso do JavaScript no desenvolvimento web.

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:

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

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

3 . 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')">

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

5 . 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');

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

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

Delphi na veia (!)