Arquivos da categoria "JavaScript":
09/03/2010 - 16:07
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
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas
Tags relacionadas: JavaScript, json
26/01/2010 - 15:27
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…
Enviado por: Leandro Garcia - Categoria(s): Descategorizado, JavaScript
Tags relacionadas: JavaScript, setinterval, settimeout, tempo
06/01/2010 - 18:02
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.
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: função, Java Script, JavaScript
15/07/2009 - 00:06
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
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: contador, JavaScript
03/03/2009 - 20:23
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
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: Absolute, Absoluto, CSS, Java Script, JavaScript, Offset, Posicionamento
29/01/2009 - 22:43
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.
Enviado por: Leandro Garcia - Categoria(s): CSS, Complementos do Firefox, JavaScript, Praticas
Tags relacionadas: Complementos do Firefox, CSS, css sprites, JavaScript, Praticas, redução de peso, redução do tamanho
29/01/2009 - 22:24
Recentemente, estive trabalhando em um sistema com cadastros, quando me deparei com um problema, o Enter.
Não podia Permitir que o usuário desse o action do form ao pressionar o enter, geralemente para mudar de campo.
Pesquisei na Internet, achei algumas opções, mas acabei criando a minha do jeito que eu realmente precisava. Cheguei ao script abaixo.
function arrumaEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
<input onkeypress="return arrumaEnter(this, event)" maxlength="60" name="emitente" type="text" />
Linha a linha
function arrumaEnter (field, event) { - Nome da funcção, que recebe o campo e o evento utilizado
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; – Recebe o evento utilizado
if (keyCode == 13) { – Se a tecla é o Enter
var i; - Cria a variável
for (i = 0; i < field.form.elements.length; i++) – Roda todos os camposdo form
if (field == field.form.elements[i]) - Se o campo utilizado é o atual
break; Para
i = (i + 1) % field.form.elements.length; – Adiciona 1 ao campo atual
field.form.elements[i].focus(); – Dá um foco no próximo campo
return false; – Retorna Falso, ou seja, não permite o submit
else – Caso contrário
return true; – Permite o Submit
onkeypress=“return arrumaEnter(this, event)” – Chama a função
Veja
download
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas
Tags relacionadas: Java Script, JavaScript, tutorial
23/01/2009 - 21:43
Anteriormente, eu escrevi a respeito de otimização do css a fim de reduzir tempo de carregamento das páginas e tráfego.
Dando sequência, vamos otimizar o JS.
…
Quando estamos trabalhando em um grande projeto, é comum termos que utlizar diversas vezes a sintaxe getElementById. Porém, ao invés de para cada situação escrevermos toda a sintaxe, podemos criar uma pequena função para isso.
Como?
Não Otimizado
function mudacor(id){
document.getElementById(id).style.color = '#990000';
}
function mudacorTexto(id){
document.getElementById(id).style.color = '#990000';
}
function mudacorspan(id){
document.getElementById(id).style.color = '#990000';
}
Otimizado
function $(id){ return document.getElementById(id); }
function mudacor(id){
$(id).style.color = '#990000';
}
function mudacorTexto(id){
$(id).style.color = '#990000';
}
function mudacorspan(id){
$(id).style.color = '#990000';
}
Explicando
No exemplo acima, ao invés de eu escrever 3 vezes esta sintaxe, escrevi apenas uma. Em um projeto grande, é muito provável que você precise utilizar bem mais vezes essa sintaxe. Com esta simples função, podemos economizar muitos kbytes em trafego, pois reduzimos o tamanho do JS. Porém, não é apenas essa a vantagem, deixando o código mais enxuto, fica mais fácil de, posteriormente, o analisarmos para efetuarmos uma alteração ou correção.
Clique aqui e veja
Download
Enviado por: Leandro Garcia - Categoria(s): JavaScript, Praticas, dicas, tutorial
Tags relacionadas: otimizado, Praticas, redução de peso, tutorial
30/10/2008 - 21:01
Resolvi escrever o post anterior, pois percebi que algumas pessoas que estão começando com internet ou programação não sabiam o que era. Meu intuito em principio era falar apenas sobre como trabalhar com querystring no javascript.
Quando trabalhamos apenas com a interface de um projeto, ou com um site sem backend, não temos acesso a linguagens Servidor (ASP, JSP, PHP…). Isso se torna um problemão quando nos pedem que determinada página realiza uma ação, como por exemplo um alert, apartir do clique em uma outra página. Ficou confuso? Vou tentar melhorar.
Uma página, vou chamar de teste, ao ser aberta exibe um texto escrito “teste”, e mais nada. Uma segunda página, chamarei de index, exibe um link direcionado para a página “teste”, mas o projeto requer que após o clique no link, ao acessar a página seja exibido um alert dizendo “trabalhando com querystrings”. Como fazer isso? Com querystrings. Como? Utilize a função abaixo.
function QueryString(variavel){
var variaveis=location.search.replace(/\x3F/,"").replace(/\x2B/g," ").split("&")
var nvar
if(variaveis!=""){
var qs=[ ]
for(var i=0;i<variaveis.length;i++){
nvar=variaveis[i].split("=")
qs[nvar[0]]=unescape(nvar[1])
}
return qs[variavel]
}
return null
}
Explicando linha por linha:
function QueryString(variavel){ – define a função com o nome
var variaveis=location.search.replace(/\x3F/,”").replace(/\x2B/g,” “).split(“&”) – cria uma variável onde são pegadas todos itens da query.
var nvar - caria uma variável
if(variaveis!=”"){ - pergunta se a variável que criamos anteriormente com os itens da query tem conteúdo
var qs=[ ] - Cria uma variável array chamada qs
for(var i=0;i<variaveis.length;i++){ – faz um looping para percorrer todas as variáveis encontradas na query
nvar=variaveis[i].split(“=”) – define o valor da variáve
qs[nvar[0]]=unescape(nvar[1]) – define o valor para cada iten do array } - fecha o loop;
return qs[variavel] – retorna o que encontrou. Agora você tem como pegar os itens da query, mas ainda não está funcionando, pois você precisa chamar esta função de alguma maneira. Vou chamá-la através de uma escrita.
<script>
document.write('A query é:' + QueryString('id') )
</script>
A variável id chamada é a que passamos via barra de endereços. Ex.
www.leandrogarcia.com/tutorials/query/query.html?id=1
Vai ser exibido na tela A query é: 1 Abraços.
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas, tutorial
Tags relacionadas: dicas, função, JavaScript
30/10/2008 - 19:57
Quem programa em qualquer linguagem backend para internet (ASP, PHP, Colffusion, ,NET…) conhece o que é uma querystring, mas para quem não conhece vou dar uma pequena explicação:
Querystring é a maneira utilizada para passarmos parametros para outras páginas através da barra de endereços sem a necessidade de um formulário.
Como é usado?
A estrutura é simples e não varia de linguagem para linguagem. Veja:
nomedapagina.html?variavel=conteudo&id=1
nomedapagina.html – é o endereço da página, pode ser qualquer extensão Web, PHP, ASP, ASPX…;
? – Esse é o x. É com o ponto de interrogação (?) que dizemos ao browser, ou às linguagens, que a partir dalí não é mais a página, mas sim uma variável;
variavel – é o nome que você dá, pode ser qualquer coisa. É muito comum utilizar “id” para passar um identificador;
conteudo – o que você quer passar para a outra página
& – outro ponto importante, o & indica ao browser, ou a linguagem, que a partir dalí haverá uma outra variável, ou seja, você pode passar mais do que uma variável por este método.
Um conselho: Evite passar variáveins em demasia desta maneira, pois o usuário consegue ver o conteúdo o que em algumas ocasiões deixa as aplicações mais vulneráveis.
Espero que seja útil.
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas
Tags relacionadas: básicos, Praticas
