Category Archives: Desenvolvimento de Software

Write less, do more.

Tecla de atalho com JQuery

Direto ao assunto, se você quiser usar uma tecla CTRL + qualquer outra tecla, para criar teclas de atalho no seus sistemas ou qualquer coisa de você quiser criar basta fazer como no código seguinte.

Clique Em Result para ver visualizar o resultado.

Não tem segredo, você pode clicando em JavaScript que faço um bind do evento keydown e no handler deste, eu verifico as propriedade keyCode e crtlKey.
if(e.keyCode == 13 && e.ctrlKey) -> Se Estou pressionando ENTER (e.keyCode == 13) + CTRL (e.ctrlKey).

É assim que se faz para criar teclas de atalho usando o JQuery. (Uma forma pelo menos)

Bons códigos a todos.

Obs.: Usei o Fiddle.net para testar código e gostei muito, o negócio é fo*&(*&%¨$#, recomendo.

Write less, do more.

Dimensões da tela com JQuery e JS

Se você precisa de alguma forma armazenar as dimensões que a sua tela tem, não entre em desespero, pois em JQuery e usando algumas propriedades do DOM é perfeitamente possível capturar os valores dessas dimensões.

Vejam os exemplos no código abaixo, fazendo isso você terá as dimensões disponíveis em um objeto que poderá ser utilizado durante a execução do seu código.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*Observação importante: Se eu quero pegar todo o tamanho ocupado ocupado pelo documento, eu devo pegar as propriedades 
 *depois que o documento estiver totalmente carregado $(document).ready()*/
 
 /*Este bloco $(document).ready() será executado primeiro que outro bloco idêntico, por eu estar
  *carregando ele apartir de um arquivo js externo quando carrega a página, ele trabalha da mesma forma
  *espera o documento ser carregado totalmente, após isso será executado o que está dentro do bloco*/
$(document).ready(function(){		
	inicializar();		
}); 
 
var stLocal = {};
function inicializar(){
	/*Tamanho do espaço visivel do document (não inclui o que está fora da tela visível)
	 *Apenas o epaco visivel da tela
	 *Largura total SEM espaco usado pela barra de rolagem,	 
	 *Altura do documento visivel
	 *OK - FF,Chrome,IE ----------------------------------*/
	stLocal.width  = document.documentElement.clientWidth;
	stLocal.height = document.documentElement.clientHeight;
 
	/*Tamanho do espaço do scroll que foi rolado (se o conteúdo do documento for maior 
	 *que o espaco da tela é ativada barra de rolagem(scroll))
	 *OK - FF ----------------------------------------
	 */
	stLocal.xOffSet = window.pageXOffset;//Quantidade de pixels rolados na horizontal
	stLocal.yOffSet = window.pageYOffset;//Quantidade de pixels rolados na vertical	
 
	/*Largura total ignorando espaco usado pela barra de rolagem, 
	 *Altura do documento sem incluir o espaco não visivel
	 */
	stLocal.innerWidth = window.innerWidth;
	stLocal.innerHeight = window.innerHeight;
 
	/*Tamanho total do document, incluidno o que está offSet(que fica visível usando o scroll(barra de rolagem))
	 *Tela visivel + offSet
 	 *Largura total COM espaco usado pela barra de rolagem(IE),
	 *Largura total SEM espaco usado pela barra de rolagem(FF e Chrome), 
	 *Altura do documento incluindo o espaco não visivel(IE,FF e Chrome)
	 *OK - FF,Chrome E IE com as ressalvas nas linhas acima.
	*/
	stLocal.widthOffSet = $(document).width();
	stLocal.heightOffSet = $(document).height();
 
	/*
	Testando os valores armazenados em var stLocal
	alert(stLocal.width+' '+stLocal.height);
	alert(stLocal.widthOffSet+' '+stLocal.heightOffSet);
	alert(stLocal.innerWidth+' '+stLocal.innerHeight);
	alert(stLocal.xOffSet+' '+stLocal.yOffSet);
	*/
}

E um artifício legal e útil é utilizar o evento de janela do JQuery “$(window).resize()” para atualizar os os valores destas dimensões.

Write less, do more.

Inverter Link / Inverter URL / JavaScript, JQuery

Como inverter link com JQuery? Como inverter uma String com JQuery e JavaScript?

Bom, para o frame acima funcionar, utilizei este script. É bem simples, e com testes irrelevantes, más exemplifica bem o a capacidade do JS e do JQuery.

Inverter Link / Inverter URL – Clique aqui para testar!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
 
				$('input[id="campoUrl"]').focus();
 
				$('div[id="btInverter"]').unbind('click').bind('click',function(){
					var str = $("#campoUrl").val();
					strNormal = str.split("").reverse().join("");	
 
					if(RegExp(['^http://']).test(strNormal)){
						$('div[id="resultado"] span').html("Link v&aacute;lido: <a href='"+strNormal+"' target='_black' >"+strNormal+"</a>").addClass('linkValid').removeClass('linkInvalid');					
					}else if(RegExp(['^http://']).test(str)){											
						$('div[id="resultado"] span').html("Link n&atilde;o precisa ser invertido: <a href='"+str+"' target='_black' >"+str+"</a>").addClass('linkValid').removeClass('linkInvalid');					
					}else{
						$('div[id="resultado"] span').html("Link inv&aacute;lido=> "+strNormal).removeClass('linkValid').addClass('linkInvalid');							
					}				
 
				});
 
				$('div[id="btLimpar"]').unbind('click').bind('click', function(){
					$('input[id="campoUrl"]').val('').focus();
					$('div[id="resultado"] span').html('');	
				});
 
			});
		</script>
Write less, do more.

Permitir apenas digitação de numeros no campo com JQuery

Bom, como muitas vezes precisamos limitar a entrada de dados em campos onde o usuário digita o conteúdo, vou disponibilizar um função que usa o JQuery para limitar o usuário a digitar apenas números no campo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
    <head>
	    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
		$(document).ready(function(){
 
			function onlyNumber(fields){
			$(fields).unbind('keyup').bind('keyup',function(e){ //vou buscar o evento keyup - quando o usuário solta a tecla
 
				var thisVal = $(this).val(); // atribuo o valor do campo a variável local
				var tempVal = "";
 
				for(var i = 0; i<thisVal.length; i++){
					if(RegExp(/^[0-9]$/).test(thisVal.charAt(i))){ // aqui estou usando uma expressão regular para limitar a entrada de apenas numeros ou seja digitos entre 0 e 9
						tempVal += thisVal.charAt(i); //caso atenda a condição de ser um digito numérico, atribuo a uma variável temporária
 
						if(e.keyCode == 8){
							tempVal = thisVal.substr(0,i); //o keyCode == 8 é para eu poder usar o backspace para apagar algum numero indesejado.
						}						
					}
				}			
				$(this).val(tempVal); // ao terminar, atribuo o valor validado ao valor do campo passado para testar
			});
		}
 
		onlyNumber($('input[id="sonumero"]')); // a chamada a função fica assim, é só passar o campo que deseja ser validdo
 
		});
 
        </script>
    </head>
    <body>
 
    Digite apenas números<input type="text" id="sonumero" name="sonumero" maxlength="11"/>
 
    <br><br>Simples assim!<br>
 
    </body>
</html>


Exemplo aqui!

Eu recomendo o livro JQuery – A Biblioteca do Programador Javascript, para quem está começando, o livro tem uma didática muito boa e exemplos práticos do começo ao fim do livro.

seal

Usando .attr() JQuery

Bom, é um exemplo simples, mas creio que possa ajudar em algum momento.

Farei um código simples onde desejo alterar os link da minha página e inserir algum valor ou alguma variável.

Ao passar o mouse sobre o link, é alterado o atributo ‘href’ do elemento ‘a’ neste caso colocando a variável ‘preset’ com seu valor, mas poderia ser qualquer valor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){	
		var p = '/blog'; //conteúdo que será adicionado na url		
 
                       $('a[id=um]').each(function(){
			var lnk = $(this).attr('href');//recebe o link atual 
			$(this).attr('href',lnk+p) //acrescenta o os parametros que voc&etilde pegou pelo GET ou definiu 
 manualmente		});
 
		$('a').mouseover(function(){			
			$('p').text('Link -> '+$(this).attr('href'));	//mostrando o link após alteração
		});
 
	});
	</script>

Passe o mouse sobre o link para ver o resultado!

exemplo_attr

Eu recomendo o livro JQuery – A Biblioteca do Programador Javascript, para quem está começando, o livro tem uma didática muito boa e exemplos práticos do começo ao fim do livro.

Veja o exemplo fora do post clicando aqui.

Data com JQueryUI – Datepicker

Em um cadastro qualquer que você queira fazer em seus sistemas, provavelmente irá precisar de um campo para data de nascimento ou similiar. Para campos de datas existem plugins JQuery que nos auxiliam na interação com o usuário, facilitando para o mesmo inserir este dado sem precisar digitar toda a data.

O JQueryUI disponibiliza um plugin denominado Datepicker que pode ser baixado em .

  • Baixe e descompacte o JQueryUI e o JQuery.
  • Copie os diretórios js e css e cole-os no diretório raiz do seu projeto.
  • Ou apenas utilize os links diretos das bibliotecas JQuery e JQueryUI como no exemplo.

Exemplo do Datepicker Funcionando:

Clique aqui para ver uma pagina de exemplo usando Datepicker fora do post.

Tabela ASCII

ASCII (acrônimo para American Standard Code for Information Interchange, que em português significa “Código Padrão Americano para o Intercâmbio de Informação”) é uma codificação de caracteres de sete bits baseada no alfabeto inglês. Os códigos ASCII representam texto em computadores, equipamentos de comunicação, entre outros dispositivos que trabalham com texto. Desenvolvida a partir de 1960, grande parte das codificações de caracteres modernas a herdaram como base.
A codificação define 128 caracteres, preenchendo completamente os sete bits disponíveis em 27=128 sequências possíveis. Desses, 33 não são imprimíveis, como caracteres de controle atualmente não utilizáveis para edição de texto, porém amplamente utilizados em dispositivos de comunicação, que afetam o processamento do texto.

Como bloquear a tecla Backspace com JQuery

Antes de postar o código, é preciso falar sobre o evento que usaremos.
Temos como opção trabalhar com os eventos do teclado: keypress, keyup e keydown.
Teoricamente poderíamos usar qualquer um destes eventos, isso claro se não tivéssemos as tão queridas incompatibilidades entre navegadores. Mostrarei abaixo algumas propriedades dos eventos de teclado nos navegadores: Chrome, Firefox e IE 8, para que todos vejam que ao implementar determinada funcionalidade com algum destes eventos, é necessário verificar a compatibilidade com cada navegador.

Google Crhome 21.0.1180.89 m >

keydown
keyCode is 8
charCode is 0

keyup
keyCode is 8
charCode is 0

IE 8 >

keydown
keyCode is 8
charCode is undefined

keyup
keyCode is 8
charCode is undefined

Firefox 15.0.1 >

keydown
keyCode is 8
charCode is 0

keypress
keyCode is 8
charCode is 0

keyup
keyCode is 8
charCode is 0
Podemos ver que o evento keypress só é compatível com Firefox.
Após sabermos qual evento utilizar e qual código da tecla (ver tabela ASCII)  queremos trabalhar, vamos a implementação:

 

/**Bloqueia o evento keydown para a tecla backspace em todo o documento**/
	function backspaceBlock(){
		$(document).unbind('keydown').bind('keydown',function(e){
			if(e.keyCode == 8){
				return false;
			}
		});	
 
	}

Desta forma bloquearemos a tecla backspace assim que chamarmos a função backspaceBlock(). E podemos ainda aproveitar esta estrutura para fazer a função que desbloqueia a tecla backspace, assim podemos mandar bloquear e desbloquear quando quisermos.

	/**Desbloqueia o evento keydown para a tecla Backspace **/
	function backspaceUnlock(){
		$(document).unbind('keydown').bind('keydown',function(e){
			if(e.keyCode == 8){
				return true;
			}
		});			
	}

Lembrando que esta não é a unica forma de se fazer, mas com estas informações fique mais claro o caminho.

Obrigado pela leitura.

Uma breve apresentação da linguagem "Go"

A linguagem go é o mais recente projeto que a Gigante Google lançou, e a mesma promete que a “Go” seja uma linguagem tão rápida que poderá ser comparada com linguagens de baixo nível como o C, e a sintaxe da linguagem realmente é semelhante ao C.

Essa é a apresentação da linguagem no site oficial:

Uma linguagem de programação de sistemas

Sintaxe limpa, Coleta de lixo,  Métodos de qualquer tipo

Go é …
… Simples

..

..

package main

import “fmt”

func main() {
fmt.Printf(“Hello, World Go\n”)
}

… Rápido

Típicamente compila em uma fração de segundo e executa tão rapidamente quanto comparável ao código C ou C + + .

… Seguro

A linguagem Go tem ponteiros, mas nenhum ponteiro aritmético. Para acesso aleatório, fatias de uso, que conhecem os seus limites.

… Simultâneas

A linguagem Go promove sistemas de escrita e servidores como conjuntos de processos de comunicação leve, chamado goroutines, com forte apoio da linguagem. Execute milhares de goroutines se quiser e diga adeus ao estouro de pilha.

… Fun (Título Sem tradução)

A liguagem Go implementa, sintaxe limpa, coleta de lixo, os métodos de qualquer tipo. Parece uma linguagem dinâmica, mas tem a velocidade e a segurança de uma linguagem estática. É uma alegria para usar.

Mais informações sobre Go Language acessem o site oficial:

Site Oficial Go Language

%d blogueiros gostam disto: