Leandro Garcia

A melhor maneira de aprender Javascript

Tem um site que acompanho chamado nettuts, que possui diversos tutoriais sobre diversas coisas, uma dessas é sobre  a melhor maneira de aprender javascript. Vou tentar sintetizar o eles recomendam. Eu recomendo seguir este site.

Item 0: Entender o que JavaScript é e não é

Javascript não é jQuery, Java ou flash. JavaScript é uma linguagem do navegador. Sua primeira proposta é adicionar interatividade à páginas estáticas. Não substitui PHP ou Ruby. Nem mesmo HTML ou CSS, é usado em conjunto. Talvez você tenha ouvido falar em jQuery jQuery não é Javascript ou não substiui o javascript. jQuery é uma ferramenta de trabalho escrita em Javascript, ou seja, você programa javascript sem jquery, ams o jQuery pode facilitar sua vida.

Item 1: Aprender através de screencasts

O site http://learn.appendto.com/ tem uma série de screencasts interessantes para iniciantes.

Item 2: Ler uma boa introdução de JavaScript

Uma introdução ao Java Script – Mozzila

Eloquent JavaScript: A Modern Introduction to Programming

http://rockablepress.com/books/getting-good-with-javascript/

Item 3: Instalar e aprender FireBug ou Devlopers Tools

Uma vez que você começou à trabalhar com javascript no navegador, instale o firebug para aprimorar seus conhecimentos. Tempos atrás eu fiz um post sobre Firebug, leia-o, é interessante. Leia o wiki do Firebug, leia sobre o developer tools.

Item 4: Ler um livro

Presumindo que você já está familiarizado com a linguagem, agora é hora de ler um livro à respeito. Os que acho mais interessantes são da editora O’reilly

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)

JavaScript 24-Hour Trainer (Wrox Programmer to Programmer)

JavaScript Patterns

Item 5: Construa alguma coisa

Este item eu acho o mais importante. Para você ser bom, você tem que fazer. Faça uma lista de tarefas, uma galeria de fotos, uma caixa que se move, sei lá, faça algo e depois tente melhorar o código

Item 6: Aprenda alguma biblioteca JS

Usar uma bilbioteca ou framework traz uma agilidade enorme para o desenvolvimento das coisas, mas acredito que para você ser bom em alguma biblioteca você deve aprender Javascript tradicional, pois em algum momento você pode ser desafiado à fazer alguma coisa sem a biblioteca que você está acostumado.

Item 7: Acompanhe os melhores

Ler é a melhor maneira de você evoluir na programação e para ler, nada melhor do que ler o que os melhores postam. no post http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/, há uma série de excelentes programadores que tem muito a ensinar. Leiam seus blogs.

• 3 comentários
• Comentar
• Permalink
• Compartilhe

Operador ternário

O Operador ternário está presente na maioria das linguagens de programação e serve para agrupar condicionais em uma única linha, economizando código e na minha opinião deixado o código mais clean.

A sintaxe é simples (condição) ? verdadeira : falsa

Em PHP uma sintaxe normal

$direcao = "d";
if($direcao == "d"){
	$sentido = "direita";
}else{
	$sentido = "esquerda";
}

print $sentido;

Agora com o Operador ternário

$direcao = "d";
$sentido = ($direcao == "d") ? "direita" : "esquerda";
print $sentido;

ou

$direcao = "d";
print ($direcao == "d") ? "direita" : "esquerda";

Em javascript é a mesma coisa.

Vejam:

Tradicional

var direcao = "d";
if(direcao == "d"){
	sentido = "direita";
}else{
	sentido = "esquerda";
}

document.write(sentido);

Operador ternário

var direcao = "d";
var sentido = (direcao == "d") ? "direita" : "esquerda";
document.write(sentido);

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Validação de formularios com jQuery

ção É muito comum que em projetos que desenvolvemos tenham formulários e em formularios é praticamente necessário que haja validações qunaton à entrada de dados. Por mais que tenhamos quer validar a entrada dos dados por backend, uma boa prática é validar no front, através de JS.

A validação por JS é interessante uma vez que poupamos processamento  do servidor por requisições inuteis como uma postagem de dados faltando algum campo requerido, além de ser mais rápido para o usuário. Muito trabalho com validação de dados nos diversos trabalhos em que participei. No entanto, depois que passei a utilizar jQuery o trabalho com validação foi muito facilitado. Uso de vez enquando um plugin chamado jquery validator, mas é muito raro, uma vez que o tamanho dele em KBs pode tornar a página mais lenta de ser carregada, e o que, geralmente, preciso validar é entrada de dados em brando ou formato de emails. Para isso, eu desenvolvi uma função para validar  entrada de dados em branco e formato de e-mail, de frma bem simples e com poucas linhas de código. Essa função só funciona com jQuery.

function validaForm(){
	var emailfilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
	$(".erro").remove();
	$(".emailerr").remove();
	var required = $(".required");
	var req = 0;
	for(i=0;i<required.length;i++){
		if($(required[i]).val() == ""){
			if($(".erro").length == 0){
				$("form").prepend('<p class="erro">campos obrigatorios</p>');
			}
			$(required[i]).css("border-color","#ff0000");
			req = 1;
		}
	}

	var email = $(".email");
	for(i=0;i<email.length;i++){
		if(!emailfilter.test($(email[i]).val())){
			if($(".emailerr").length == 0){
				$("form").prepend('<p class="emailerr">Email errado</p>');
			}
			$(email[i]).css("border-color","#ff0000");
			req = 1;
		}
	}

	if(req == 1){
		return false;
	}
}

Para que esta função funcione, você precisa incluir na tag form o atributo ‘onsubmit=”return validaForm()”‘ e a classe ‘required’ em cada campo que não pode ser em branco, para e-mail a classe ‘email’ como no exemplo a seguir.

<form action="#" method="post" onsubmit="return validaForm()">
	<fieldset>
		<label>Nome</label><br />
		<input type="text" name="nome" class="required" />

		<br />
		<label>Nome</label><br />
		<input type="text" name="nome" class="email" />
		<br />
		<input type="submit" value="OK" />
	</fieldset>
</form>

Espero que seja tão util à vocês quanto écpara mim. Ckique nos links à baixo e veja em funcionamento.
http://tutoriais.leandrogarcia.com/jquery_validacao_formulario/

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Verificar se um objeto Json está vazio

Tive um problema recentemente, a API do twitter que na busca me traz as informações que preciso, em um determinado usuário resolveu não trazer, consequentemente o sistema não funcionou para este usuário.

A solução verificar o resultado se está vazio, no entando como o callback traz um jason é um pouco difícil. Pesquisando na Net descobri a função abaixo. Ela verifica se o objeto está vazio, se sim retorna true se não false. Bem útil.

function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }

    return true;
}

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

JSON (JavaScript Object Notation)

Muitas vezes nos deparamos com a necessidade de intercambiar dados entre páginas, servidores ou até mesmo domiínios. A maioria de nós, inclusive eu a não muito tempo atrás, acredita que a única maneira de fazer esse intercambio é através de XML. Mas não é bem assim. Existe o JSON.

O JSON é um formato leve para intercambio de dados.

Mas qual a vantagem em relação ao XML?

Eu vejo três.

1ª – É bem mais leve de ser carregado do que um arquivo XML.

2ª – É mais fácil de se trabalhar

3ª – É Cross Browser*

*Quando usamos XML nos deparamos com um problemão para parsear as informações, as regras de segurança dos browsers. No Firefox, por exemplo, não é possível parsear as informações provenientes de um XML que esteja em um servidor diferente da aplicação, ou seja, se sua aplicação estiver hospedada em www.aqui.com.br, o Firefox só permitirá que você parseie um XML se ele estiver em, por exempo, www.aqui.com.com/esse.xml, agora se estiver, por exemplo em www.outro.com.br/esse.xml, as regras de segurança bloquearão sua aplicação. (Não necessáriamente isso acontece nas linguagens Backend)

Um vez explicado as vantagens do JSON, vamos ao formato.

{"notas" : [
   {"nome":"João", "nota1":8, "nota2":6, "nota3":10 },
   {"nome":"Maria", "nota1":5, "nota2":9, "nota3":8 },
   {"nome":"Pedro", "nota1":2, "nota2":7, "nota3":5 }
]};

No exemplo acima, temos um conjunto de dados chamado “notas” que tem as informações de três alunos, commo nome e notas.

Você pode ir hieranquizando as informaçõe da forma que melhor lhes convier.

Você encontra o JSON na maioria das APIs abertas da Internet, como as do Google, Facebook, Flickr, Twitter, etc.

Mas tudo isso não quer dizer que o XML seja inútil ou não deva ser usado. Cada caso e um caso. Existem casos web a for que se utilizam dos dois formato, outros disponibilizam os dois formatos (Twitter por exemplo)…

Mais informações em http://www.json.org/json-pt.html

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Javascript: A diferença entre "setTimeout" e "setInterval"

Salve!

Em javascript há duas funções bem interessantes para se trabalhar com tempo a setTimeout e a setInterval.

Nos dois casos você diz ao navegador para executar determinado código dentro de determinado tempo, ou seja, você pode dizer ao browser para executar a função alert, por exemplo, daqui a 5 segundos.

Mas qual é a diferença??

A diferença é que a “setTimeout” é executada uma vez e a setInterval é executada de tantos em tantos segundos.

na Prática.

/*Acionado uma vez. Em 10 segundo à partir da chamada da função*/
setTimeout(alert("alerta"),10000);

/*Acionado sempre, a cada 10 segundos*/
setInterval(alert("alerta"),10000);

Para mim, é muito útil…

• 1 comentário
• Comentar
• Permalink
• Compartilhe

Função Trim em Javascript

Se tem uma função básica em quase todas as linguagens de programação e extremamente util é a “trim”.

Pra quem não sabe, a função trim serve para retirar os espaços antes e depois de uma string. Algom mais ou menos assim:

Antes:
” Olá Mundo ”

Depois do uso do trim

“Olá Mundo”

Mas, sempre tem um mas…. Em Javascript não tem, pelo menos não nativa. Você deve criar uma.

Há algum tempo atrás eu encontrei uma na internet que usa expressões regulares para retirar esses espaços. Não sei quem a criou, mas se souberem me avisem para que eu possa colocar os créditos por ela.

Vamos à função. Bem simples.

function Trim(str){return str.replace(/^\s+|\s+$/g,"");}

Depois é só usar.

//Exemplo
var string = "   Tem espaço antes e Depois     ";

alert(Trim(string));

Testem. Usem. Usufruam.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Contagem regressiva em Javascript

Tempos atrás, no decorrer do desenvolvimento de um sistema web, o cliente solicitou que houvesse um contador regressivo de quanto tempo faltava para que o sistema efetuasse determinada ação.

Depois de quebrar a cabeça cheguei até o script abaixo

function atualizaContador(YY,MM,DD,HH,MI,saida) {
var SS = 00; //Segundos
var hoje = new Date(); //Dia
var futuro = new Date(YY,MM-1,DD,HH,MI,SS); //Data limite do contador

var ss = parseInt((futuro - hoje) / 1000); //Determina a quantidade total de segundos que faltam
var mm = parseInt(ss / 60); //Determina a quantidade total de minutos que faltam
var hh = parseInt(mm / 60); //Determina a quantidade total de horas que faltam
var dd = parseInt(hh / 24); //Determina a quantidade total de dias que faltam

ss = ss - (mm * 60); //Determina a quantidade de segundos
mm = mm - (hh * 60); //Determina a quantidade de minutos
hh = hh - (dd * 24); //Determina a quantidade de horas

//O bloco abaixo descreve monta o que vai ser escrito na tela
var faltam = '';
faltam += (dd && dd > 1) ? dd+' dias, ' : (dd==1 ? '1 dia, ' : '');
faltam += (toString(hh).length) ? hh+':' : '';
faltam += (toString(mm).length) ? mm+':' : '';
faltam += ss;

if (dd+hh+mm+ss > 0) {
document.getElementById(saida).innerHTML = faltam;//INsere o conteudo da variável faltam na página.
setTimeout(function(){atualizaContador(YY,MM,DD,HH,MI,saida)},1000);//Reinicia a função a cada um segundo
} else {
document.getElementById(saida).innerHTML = '';
setTimeout(function(){atualizaContador(YY,MM,DD,HH,MI,saida)},1000);
}
}

Agora para chamar na sua página, pode-se chamar de duas maneiras:

<body onload="atualizaContador('2009','07','14','23','00','00','elementodedestino')">

OU

<script type="text/javascript">window.onload=function(){
atualizaContador('2009','07','14','23','00','00','elementodedestino');
}</script>

Eu prefiro utiliza a maneira acima utilizando o window.onload, pois acredito que torna a página mais arrumada e, ainda, podemos colocar no final da página, melhorando o carregamento da página.

Espero que seja util para vocês.

link

Download

• 11 comentários
• Comentar
• Permalink
• Compartilhe

Offset, descobrindo o posicionamento absoluto de um elemento

Anteriormente escrevi sobre maneiras de otimizar o carregamento das páginas.

Umas destas maneiras, é colocar todas as chamadas de scripts na parte de baixo da página, mas aí tem um problema. Aqui na empresa as publicidades são dinamicas e exibidas através de script, logo, para eu exibir um superbanner na posição correta, eu deveria chamar o JS externo no head da página, mas é oposto ao que devemos práticar aqui.

Alguns de você dirão, basta que você coloque um posicionamento reletivo(relative) na div container e coloque a publicidade na parte do código e posicione a div com a publicidade em absoluto(absolute).

Isso funciona, desde que a publicidade seja sempre no mesmo local, mas se a publicidade é um island, por exemplo que é no meio do conteúdo, o que fazer?

É aí que surge o Offset da página.

Com o Offse, Você consegue descobrir onde exatamente, em Pixels, está o elemebto que você quer encontrar.

Por exemplo. Eu tenho um campo de busca e quero ao clicar nele, abrir um suggest, é com o Offset.

Ou no caso do Banner, como eu fiz:

Criei uma div com o id bannerposicao nessa div eu joguei o tamanho do banner (height:240px;width:120px). Com isso eu criei um espaço vazio que eu posso preencher porexemplo com o endereço da central de relacionamentos (bom para efeito de SEO).

No final do código eu criei uma outra div com o id banner e joguei (via CSS) o tamanho da publicidade (height:240px;width:120px) e a posicionei como absoluto (position:absolute).

Depois disso, eu usei a função abaixo para posicionar a publicidade no lugar dela.

HTML

<div id="bannerposicao"> <a href="http://www.leandrogarcia.com/blog"> Blog do Garcia </a> </div>
<br class="clear" />
<div id="corpo">Corpo</div>
Aqui abaixo esta o banner
<div id="banner"> <img src="http://www.leandrogarcia.com/blog/wp-content/uploads/2009/03/puboffset.gif" alt="publicidade" /> </div>
<br class="clear" />
<button onclick="alert(document.getElementById('bannerposicao').offsetHeight);"> offsetHeight </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetWidth);"> offsetWidth </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetLeft);"> offsetLeft </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetTop);"> offsetTop </button>

CSS

#bannerposicao{float:left; width:120px; height:240px; background:#ccc}
#banner{display:block; position:absolute; width:120px; height:240px; background:#ccc}
#corpo{clear:both; height:400px}

JS

function exibepublicidade(){
var $arg = document.getElementById('bannerposicao'); //Essa linha pega os dados da div
var $curTop=0,$curLeft=0,$curWidth=0; // Essa, cria as variáveis de largura, left e top
if($arg.offsetParent) {
do {
$curLeft += $arg.offsetLeft;
$curTop += $arg.offsetTop;
}while($arg = $arg.offsetParent)
} //O if acima, pega a posição da Div em relação à janela
var $posicao = document.getElementById('banner');
$posicao.style.top = $curTop + "px";
$posicao.style.left = $curLeft + "px";
}
exibepublicidade();

Com o Offset conseguimos pegar a Altura, a Largua a Posição Left e Top do elemento.

Altura (offsetHeight), Largura (offsetWidth), Left (offsetLeft) e Top(offsetTop);

Veja o exemplo

Download

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Yslow (Porque está devagar) – Como medir performance de carregamento das páginas…

Volto eu aqui para escrever sobre performance de websites.

No mundo atual, as pessoas tem cada vez menos tempo e paciência para esperar por alguma coisa, muito menos se o que devem esperar é uma página ser carregada. Motivo este pelo qual nós, desenvolvedores para internet, devemos pensar na praticidade e velocidade que a página é carregada pelo usuário.

Existem algumas práticas que podem fazer com que seu código mais rapidamente carregado:

Diminua a quantidade de requisições http.

Em cada requisição que um site faz ao servidor, seja qual for (CSS, JS, Imaem, etc), há um trafego de informações, ou seja, sua página envia uma requisição e depois recebe a resposta do servidor, quanto menos requisições você fizer, menor será esse trafego, logo, mais rápido seu site carregará;

Você pode diminuir a rquisição de imagens background através de CSS sprites, já expliquei como fazê-los neste post.

Utilizar o menor número possível de arquivos CSSs, O ideal é usar apenas um, eventualmente um segundo, mas evitar o terceiro, o quarto a todo custo.

Se possível utilizar apenas um arquivo JS.

Cachear a página ou Header Expires

A inconveniência deste é que ele é server-side, ou seja, é feita através do servidor, mas serve para guardar na memória do usuário os arquivos das páginas que ele visitou, ou seja, um re-acesso ao site seria bem mais rápido.

Compressão de componentes (Gzip Components)

Esta é uma outra técnica de redução server-side. Com ela, o servidor entende que deve comprimir (ou “zipar”) os código, os CSSs os JSs e, inclusive o HTML.

Colocar as folhas de estilo no Header

Uma outra maneira eficaz de ganhar tempo no carregamento das páginas é, além de usar uma única folha de estilos, chamá-la de um arquivo externo e através da tag link posicionada dentro do header

Colocar os Scripts na parte inferior

O ideal é colocar os scripts logo antes da tag </body>, pois desta a página é carregada mais rapidamente. Quando o script está no header, a página primeiro carrega o script depois as demais informações, agora quando esle está posicionado abaixo, a página tem toda a informação carregado e só após isso os scripts são carregados.

Evite expressões em CSSs

Embora existam, as expressões em CSS não são a maneira mais eficaz de criar o seu layout, pois exigem demasiado tempo para serem entendidas pelos navegadores.

ex. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Folhas de Estilo (CSS) e Scripts (JS) externo

Evite colocar estilos e scripts em qualquer lugar no HTML, prefira sempre chama-los através de um arquivo externo. CSSs e JSs, são geralmente caheados pelo browser, o que significa que em uma próxima vista o usuário já terá esses arquivos preveamente carregados.

Otimize seus CSSs e JSs.

Quanto menor for seus códigos, menor tamanho eles terão, logo, mais rápido serão carregado.

Neste link, eu escrevi como se pode otimizar os códigos CSSs

Evite redirecionamentos

Evite ao máximo que suas páginas redirecionem para uma outra, pois desta maneira seu usuário terá que carregar duas ou mais páginas ao invés de uma.

Remova scripts duplicados

Remova todos os scripts duplicados, afinal, não há a necessidade de se carregar duas vezes a mesma coisa.

Reduza o número de DOMs

Reduza ao máximo as “firulas” via DOM do seu código.

Iframes

Se necesário for utilizá-los, utilize o menos possível, pois um ifram,e é uma outra página a ser carregada.

Escolha <link> ao invés de @import

Há duas maneiras de se carregar uma folha de estilo externa, através das tags <link> e @import. Prefira sempre a <link>, pois o @import se comporta da mesma maneira como se você colocasse o <link> lá embaixo.

E tem várias outras maneiras.

O Yahoo, disponibiliza um link onde eles explicam maneiras de se melhorar a performance. Além dessas que eu listei acima, há algumas outras. O line é este.

Como verificar como está  o carregamento de meu site?

Não sei dizer quantas maneiras há para se fazer isso, a única que eu conheço, e acredito que a mais eficaz, é o YSLOW (Uái islou)  (Porque está devagar).

O YSLOW, é um complemento para o Firefox que pode ser encontrado neste link.

No Próximo Post eu vou explicar como funciona o Yslow.

• 4 comentários
• Comentar
• Permalink
• Compartilhe