Arquivos Mensais: janeiro 2010

(Fast tip) Como saber a tecla digitada – Javascript

Escrito por em janeiro 31, 2010 1 comentários

Para verificar qual tecla foi pressionada você pode utilizar este código abaixo:

//Passamos como parâmetro passamos a ação executada
document.onkeyup = function(e){
   alert(e.which); //exibimos o método which da ação, que será o código da tecla
}

Code bonus:
Exemplo aqui.

		document.onkeyup = function(e){
var teclas = new Array(8,9,13,16,17,18,19,20,27,32,33,34,35,36,37,38,39,40,45,46,48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,
80,81,82,83,84,85,86,87,88,89,90,91,92,93,96,97,98,99,100,101,102,103,104,105,106,107,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,
144,145,186,187,188,189,190,191,192,219,220,221,222);
var teclasValores = new Array('backspace','tab','enter','shift','ctrl','alt','pause/break','caps lock','escape','escape','page up','page down','end','home','left arrow','up arrow','right arrow','down arrow','insert','delete',0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n',
'o','p','q','r','s','t','u','v','w','x','y','z','left window key','right window key','select key','numpad 0','numpad 1','numpad 2','numpad 3','numpad 4',
'numpad 5','numpad 6','numpad 7','numpad 8','numpad 9','multiply','add','subtract','decimal point','divide','f1','f2','f3','f4','f5','f6','f7','f8','f9',
'f10','f11','f12','num lock','scroll lock','semi-colon','equal sign','comma','dash','period','forward slash','grave accent','open bracket','back slash','close braket','single quote');
console.log(e);
for(tecla in teclas){
					if(e.which == teclas[tecla]){
						document.getElementById('texto').value = 'code('+teclas[tecla]+') = '+teclasValores[tecla];
					}
				}
			}
Share

(Fast Tip)Como pegar todos os elementos da pagina com javascript

Escrito por em janeiro 30, 2010 4 comentários

Simples fácil e rápido.

onload = function(){
        var todosElementos = getElementsbyTagName(*);
}

code bonus
fiz este script para testar a funcionalidade

onload = function(){
			var body = document.getElementsByTagName('body')[0];
			var children = body.getElementsByTagName('*');
			var child;
			for(child in children){
				if(children[child] != undefined){

					children[child].style.border = "solid 1px #EFEFEF";

					if(children[child].nodeName == 'A')
						children[child].style.borderBottom = 'solid 2px red';
				}
			}
		}



Para os novos no mundo do js deixo uma dica:
sempre lei e interprete os scripts que outras pessoas fazem, assim se aprende bem mais do que um simples post.

Share

English is essential

Escrito por em janeiro 23, 2010 Nenhum comentário

O domínio do inglês é indispensável para profissionais de TI hoje em dia, temos que manter nosso conhecimento em equivalencia, de nada adianta compreendermos de um assunto muito bem, se caso ele venha a ser atualizado ou modificado não compreendermos seu simples manual em inglês.

Segue um trecho de uma apostila de inglês demonstrando a importância de inglês:

Mais de 80% dos documentos e das comunicações feitas através da Internet encontram-se em inglês. Apenas 0,7% do oceano de informação que é a Internet está em português. É perfeitamente possível usar a Internet e se divertir muito navegando apenas por sites escritos em português. Fazer isto entretanto é o equivalente a ir à praia, não entrar na água e ficar se molhando com um baldinho de água que alguém encher para você.


Post recomendado para aqueles que estão ou vão começar a estudar inglês por conta própria: Perigos do autodidatismo.

Share

Manipulando eventos com JavaScript

Escrito por em janeiro 6, 2010 1 comentários

Hoje me perguntei como manipular eventos sem ser inline e sem usar frameworks es a solução ‘listener’.
Primeiro o que são eventos inline? Eventos inline são aqueles que colocamento diretamente no html
Ex: Veja um exemplo com o evento onclick

<input type="button" value="Click me" id="botao" onclick="alert('Hello');"/>

Como podes ver isso deixa nosso html um pouco mais “sujo”, para termos uma maior organização devemos separar o html do javascript.

Veja como fica nosso codigo usando listener:

<script type="text/javascript">
	onload = function(){
              //Aqui pegamos o elemento a ser atribuido o evento.
              var botao = document.getElementById('botao');

              botao.addEventListener('click', ola(), false); // para outros navegadores

              botao.attachEvent('onclick', ola()); // para IE

              function ola(){
                     alert('Olá');
              }
	}
</script>
<input type="button" value="Click me" id="botao"/>

A principio parece que nosso código ficou mais confuso, mas na verdade só nos falta criar as funções principais para questões de legibilidade.

Por que temos o onload antes dos eventos?
o onload serve para que nossos métodos só sejam executados após o carregamento dos elementos. pois não queremos adicionar um evento onclick em um elemento que ainda não foi criado.

Share