Faça o curso: jQuery na Prática

Olá pessoal, boa tarde.

Neste artigo mostrarei como criar um teclado virtual utilizando JQuery, para que seus usuários digitem uma senha, por exemplo. Muito dificilmente o seu usuário passará por problemas de segurança.

Por que esse teclado virtual é seguro?

• Porque o usuário não necessita digitar a senha através do teclado, evitando assim os keyloggers.
• Ao colocar o mouse sobre a "tecla", o conteúdo desaparece. Isso evita um tipo de spyware que "tira uma foto" da tela a cada clique do mouse.
• A cada clique nas "teclas", a ordem dos números mudam, dificultando ainda mais.

Sobre JQuery: http://jquery.com/

Você pode ter uma visão antecipada do resultado final aqui.

Desenvolvimento

Código HTML

Não abordarei o código HTML por não ser o escopo desse artigo e por ser muito particular para cada aplicação, mas você pode conferir o código do nosso exemplo aqui.

Código CSS

Não abordarei o código CSS por não ser o escopo desse artigo e por ser muito particular para cada aplicação, mas você pode conferir o código do arquivo CSS aqui.

Código Javascript

O nosso código javascript é bem simples.

Você pode ver o conteúdo do arquivo javascript aqui.

Vamos analisar o nosso código linha por linha. Para facilitar, acompanhe a imagem abaixo.

Linha 1: Abre a função que será executada quando o documento estiver pronto, ou seja, quando a nossa página estiver carregada. Você pode ter visto isso de forma semelhante com

Existem também outras formas de fazer, utilizando adicionadores de eventos. Precisamos fazer com que o código seja executado somente após o carregamento completo da página, para garantirmos que os elementos que estão sendo referenciados existam.

Linha 2: Chama a função "sorteio", que altera os números de cada tecla. Mais à frente explicarei a função sorteio. Atente que no código HTML, o conteúdo dos links é um "x".

Linha 3: Adiciona o código das linhas 4 e 5 ao evento "click" dos elementos "a" (links) que estão dentro do elemento cujo id é "teclas". Veja a estrutura no código HTML.

Linha 4: Adiciona ao conteúdo do elemento "passwd" o número que está no link. Perceba que a função "val" do elemento input, cujo id é "passwd" tem duas formas de utilização: se você passar um atributo, ele adiciona o valor passado ao "value" do input. Se não passar atributo, a função retorna o "value" do input. Interessante, não?

Linha 5: Após o clique no link, a função "sorteio" é chamada novamente para mudar os números em cada tecla.

Linha 7: Adiciona o código da linha 8 ao evento "mouseover" dos elementos "a" (links) que estão dentro do elemento cujo id é "teclas". Esse evento é acionado sempre que o mouse está sobre (over) os links.

Linha 8: Atribui a classe "esconde" aos links. Essa classe torna a cor da letra branca (a mesma cor do fundo do link).

Linha 10: Adiciona o código da linha 11 ao evento "mouseout" dos elementos "a" (links) que estão dentro do elemento cujo id é "teclas". Esse evento é acionado sempre que o mouse sai de cima dos links.

Linha 11: Atribui a classe "mostra" aos links. Essa classe torna a cor da letra negra, como originalmente.

Linha 14: Declaração da função "sorteio".

Linha 15: A função "random" do objeto "Math" faz um sorteio aleatório e retorna um número entre 0 e 1, inclusive. Esse valor retornado é multiplicado por 10 e atribuido á variável "sort".

Linha 16: Essa linha mostra uma forma contracta da declaração "if" e significa: se sort é igual a 10, sort será igual a 9. Se não, sort será igual a sort mesmo. Isso é necessário porque temos 10 links (de 0 a 9, inclusive).

Linha 17: Transforma o conteúdo de "sort" de inteiro para string. Isso será necessário pois atribuiremos o valor de "sort" ao texto dos links, na linha 20.

Linha 20: Atribui o valor da variável "sort" ao texto do link da posição "i". O primeiro link do primeiro "li" é o link 0. O último é o link 9.

Linha 21: Incrementa a variável "sort" em 1. Incrementar é o mesmo que somar. Assim, sort++ é o mesmo que sort = sort + 1.

Linha 22: Testa se o valor da variável "sort" é maior do que 9. Se for, reinicia a contagem. Se não, permanece.

Linha 23: Transforma o conteúdo de "sort" em string novamente, pelo mesmo motivo da linha 17.

Conclusão

Como em outros artigos, a intenção não é que copiem e colem em seus projetos. Caso mudem o HTML, muito provavelmente deverão fazer ajustes no javascript.

Aguardo os comentários. Abraços a todos!