BuscaPé, líder em comparação de preços na América Latina
Desenvolvimento de sites , portais ,logomarcas e trabalhos gráficos. Downloads de Apostilas de html, , dreamweaver , flash , php , asp , programas, scripts asp , php , cgi , javascript , coldfusion e muitos outros

Saiba onde tem o melhor preço antes de comprar

echo"$colab[nome]";Heitor Althmann - Web Developer
HTML - CSS - Java Script - PhothoShop - DreamWeaver - Flash

Interagindo com o teclado dinâmicamente - Parte II


Leituras: 7159 - Heitor Althmann



Salve Galera!
Esta é a segunda parte da matéria sobre "Como Interagir com o teclado dinâmicamente".
Nesta parte da matéria, vamos simular um teclado virtual, inclusive abordando uma parte sobre efeitos reais. Este vai ser um teclado simples, abordando apenas o alfabeto, caso queiram implementar sintam-se a vontade. ;)
Com mais esta matéria, vc\'s vão adquirir conhecimento, para poderem construir diversas coisas interessantes e de bastante entretenimento com o usuário.

Resolvi postar o Source da página inteira e o script incluido nela.. e naum td separado... Lembrando q a eXplicação deste código, segue-se em linas de comentário ( // );

Let\'s Go!:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{
 font:80% Verdana;
 background-color:#CCCCCC;
 cursor:crosshair;
}
button {
 width:30px;
 height:30px;
 background-color:#000000;
 color:white;
 font-weight:bold;
}
</style>
</head>
<!-- Define os Botões e Monta o Teclado -->
<body>
<p align="center" style="font-family:\'Trebuchet MS\'; color:#0066CC; font-size:32px;">Teclado</p>
<p align="center" style="font-family:\'Trebuchet MS\'; color:#0066CC; font-size:32px;">&nbsp;</p>
<p align="center">
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<button>U</button>
<button>I</button>
<button>O</button>
<button>P</button>
     <br />
&nbsp;&nbsp;&nbsp;
<button>A</button>
<button>S</button>
<button>D</button>
<button>F</button>
<button>G</button>
<button>H</button>
<button>J</button>
<button>K</button>
<button>L</button>
<button>&Ccedil;</button>
     <br />
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
<button>Z</button>
<button>X</button>
<button>C</button>
<button>V</button>
<button>B</button>
<button>N</button>
<button>M</button>
<button>&lt;</button>
<button>&gt;</button>
<button>;</button>
</p>
<p>
<script type="text/javascript">
<!--

//Define as váriaveis a serem usadas.
var letra, tecla, acertos, erros;
var elems = document.getElementsByTagName("BUTTON");
//A propriedade getElementByTagName(), retorna  todos os elementos (no dccumento) que correspondem a determinada tag citada como parâmetro, no nosso caso "BUTTON";function down()
{

tecla = window.event.keyCode; // Variavel pega o código da tecla pressionada, como estudamos na matéria passada.

 if(tecla == 186)
 {
  letra = "Ç";
 }
 else
 {
  letra = String.fromCharCode(tecla);
 }
 
 //Laço para setar as configurações do botão quando pressionado.
 for(i = 0; i < elems.length; i++)
 {
  if(elems[i].value == letra)
  {
   elems[i].style.borderStyle = \'inset\'; //Muda tipo da borda.
   elems[i].style.backgroundColor = \'#333333\'; //Muda cor de fuNdo.
  }
 }
}

function up()
{
 //Laço para setar as configurações do botão quando solto
 for(i = 0; i < elems.length; i++)
 {
  elems[i].style.borderStyle = \'outset\'; //Muda tipo da borda.
  elems[i].style.backgroundColor = \'000000\'; //Muda cor de fuNdo.
 }
}

document.onkeydown = down;
document.onkeyup = up;

//-->
</script>
</p>
</body>
</html>

 

O resultado fianl é este: http://www.domusinfo.com.br/heitor/teclado.htm

Vlw pessoal! Espero que tenham gostado desta matéria e que tirem mto proveito!
Em caso que vc\'s queriam pedir alguma matéria, ou que falem sobre determinado assunto, sintam-se a vontade para se expressar, mandem e-mails!
Qualquer dúvida em relação mandem e-mail: heitoralthmann@gmail.com, ou acesse nosso fórum: http://www.sosdesigners.com/forum.

Até a Próxima! =D

Um grande Abraço!