Leandro Garcia

Framework -> Javascript -> jQuery

jQuery é, muito provavelmente, o framework para Javascript mais utilizado no mundo.

Anteriormente eu comentei o que era um framework. Neste vou comentar sobre o jQuery.

O jQuery é uma mão na roda em se tratando de desenvolver qualquer solução para ambiente Web que necessite de interações do lado do cliente.

Uma das maiores vantagens do jQuery é a limpeza/simplicidade do código, pois com muito poucos comandos conseguimos elaborar interações melhor desenovolvidas.

Com o jquery é muito mais fácil trabalhar com eventos como o “click” do que da maneira “tradicional”, pois para se trabalhar com eventos se era necessário implementar diversos comando que acabavam por tornar o código mais pesado e muitas vezes até defícil de se entender e dar manutenção, já com o jQuery, a simples implementação da função “.click” no seu código carregado junto com a página é o suficiente.

O desnvolvimento como jQuery torna o código mais simples e intuitivo.

O Ato de selecionar determinado elemento de uma página é muito mais fácil. O que antes era necessário nettar o id para o elemento e depois utilizar o “document.getElementById(‘id’)”, com o jQuery basta usar o “$(‘#id’)” e funciona da mesma maneira. No javascript não existe um “document.getElementByClass”, o que seria de enorme utilidade para qualquer desenvolvedor, mas no jQuery há. E de maneira muito simples, “$(‘.class’)”, com isso você consegue selecionar todos elementos que tenham a classe “.class” e à partir disso, fazer o que for necessário.

Abaixo vou escrever um código que muda a cor de todos os elementos que tenham a classe “cor”. A Cor inicial será preta.

.cor{color:#000} //Preto

<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>

$(document).ready(function(){
$(".cor").css("color","#ff0000");
});

Explicação:

$(document).ready(function(){ -> Ao final do carregamento da página

$(“.cor”).css(“color”,”#ff0000″); -> Selecionar todos os elementos com a clarr cor, no caso o primeiro, terceiro, quarto e sexto itens da lista e alterar a cor para vermelho.

Esse código pode ser alterado da maneira que mais lhe convier, por exemplo, você quer ter certeza de que apenas os itens de uma lista com a classe cor seja alterados e não os demais, basta incluir o elemento.

<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>

<p>Paragrafo</p>

<script type="text/javascript">
$(document).ready(function(){
$("li.cor").css("color","#ff0000");
});
</script>

Agora se você quer garantir que apenas os itens de uma lista não ordenada mudem de cor:

<ol>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ol>

<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>

<p>Paragrafo</p>

<script type="text/javascript">
$(document).ready(function(){
$("ul li.cor").css("color","#ff0000");
});
</script>

E assim por diante.

Vou escrever uma série de tutoriais para se dar os primeiros passos com jQuery, mas enquanto isso, você pode acessar o site do jQuery e baixar o framework e fazer o doqnload dos exemplos acima.

Abraços.

Veja

Exemplo 1

Exemplo 2

Exemplo 3

Download

• 1 comentário
• Comentar
• Permalink
• Compartilhe

PHP: Trabalhando com horários – Fuso

Recentemente, peguei um projeto para desenvolver, onde eu deveria trabalhar com horário. Até ai tudo bem, no entanto eu teria que trabalhar com o horário do servidor, aí veio o problema.

Costumo utilizar um servidor que fica localizado nos Estado Unidos e o Fuso horário diferente. O que fazer?

Uma vez que você aprende é fácil, mas demorei um pouquinho a descobrir.

O PHP tem uma função interna que faz isso pra a gente, só devemos setar o local pra o qual desejamos setar o fuso.

A função é date_default_timezone_set()

Como usá-la?

Basta colocá-la no inicio da página em que você vai trabalhar com horário.

date_default_timezone_set('Brazil/East');<!--–– São Paulo ––-->
?>

Mas Garcia, estou trabalhando para uma empresa que fica em Portugal o que fazer?

Simples, altere as propriedades.  Aqui tem a lista de todos os fusos.

Veja em funcionamento

Download

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Trabalhando com querystring e Javascript

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.

http://tutoriais.leandrogarcia.com/query/query.html?id=1

Vai ser exibido na tela A query é: 1 Abraços.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe