Arquivado na categoria javaScript
Brincando com jQuery
Por Felipe de Albuquerque na categoria javaScript em 16 de março de 2010

Quem nunca ouviu falar em jQuery?!
É uma biblioteca de javaScript que foi feita para simplificar e otimizar a produção no desenvolvimento web, como o próprio slogan do jQuery diz “write less, do more ” faça mais escrevendo menos.
Não se trata de uma nova tecnologia, é apenas javaScript assim como mootools e prototype, uma das grandes vantagens em optar por jQuery é a documentação disponível no site oficial, que é bastante completa e os artigos encontrados em fóruns e blogs espalhados na web.
Neste post em especifico eu vou brincar um pouco com o jQuery pra gente sentir um pouco da biblioteca dos deuses.
O primeiro passo é baixar a biblioteca no site oficial, depois chame a biblioteca entre a tag <head> da página que você irá usar as funções do jQuery.
Deverá ficar algo assim:
<head>
<title>Brincando com jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>//js = pasta onde ficará seus arquivos javaScript, isso é você que escolhe onde ficaram os arquivos e o jquery.js é a biblioteca
</head>
Agora vamos testar se a biblioteca está instalada corretamente:
<script type="text/javascript">
$(document).ready(
//Aqui você faz o que quiser útilizando a sintax jQuery ou javaScript puro
function(){
alert("O jQuery está funcionando e a brincadeira já pode começar!!!");//alert comum com a sintax javaScript
});
</script>
Este código espera a página ficar pronta “toda carregada” e após executa uma função que é apenas um alerta normal, com a sintaxe javaScript. Se ao carregar a página com este código e apresentar um alert é porque o jQuery está funcionando e a sua página já compreende a sintaxe jQuery e os métodos e funcionalidades podem ser usadas e isso significa que a brincadeira vai começar a ficar bom agora!
Mas se não funcionou é importante verificar se o caminho que você está chamando está correto ou se há alguma tag escrita incorreta ou sem fechamento, mas de qualquer maneira vou disponibilizar todo código citado aqui.
Uma piada ao getElementById()
O getElementById ficou famoso com a difusão da API DOM e é sem dúvidas um dos métodos mais usados, mas imagina digitar tudo isso umas vinte ou trinta vezes, e em casos extremos, que é necessário chamar esse método várias vezes, me dá tendinite só de pensar, mas com o jQuery isso é tão simples que se torna ridículo, uma verdadeira piada, foi uma das coisas que me chamou a atenção quando eu comecei com o jQuery, isso tudo se resume a “$();”, $(“id desejado, e não só o id, mas os seletores e classes”), vamos aos exemplos para compreendermos melhor:
O método puro
Com JavaScript utilizando a API DOM
document.getElementById();
Com a biblioteca dos Deuses
$();
Manipulando CSS com jQuery
$("#meuId").css("color", "red");
Os elementos de texto que estiverem dentro do id “meuId” ficaram com a cor vermelho.
Manipular CSS com a sintaxe de javaScript ficaria algo assim:
Forma muito usada
var n = document.getElementById("meuId");
n.style.color = "red";
Forma otimizada
document.getElementById("meuId").style.color = "red";
Os três exemplos fazem a mesma coisa, deixa os elementos de texto do meuid na cor vermelha.
Brincando de pic esconde
Ocultar e mostrar elementos sempre foi algo útil, tanto pra criar sub-menus e tudo que a necessidade do seu cliente mandar.
Fazer isso com jQuery é muito fácil e tem algumas formas interessantes, vamos ver um delas:
$(document).ready(function(){
$("#meuId").click(function(){
$("p").toggle("slow");
});
});
HTML
<body>
<span id="#meuId">Clique me!!!</span>
<p>paragrafo 1</p>
<p>paragrafo 2</p>
</body>
Ajax virou brincadeira de criança
Para usar o Ajax normalmente é necessário usar uma receitinha de bolo para inicializar o objeto XMLHTTPRequest e ainda por cima fazer um IF se for o IE pra ativar o ActveX, pra funcionar em ambos ou browsers, mas com o jQuery virou outra maravilhosa piada:
Ajax com javaScript
var Ajax = false;// Ajax
function AjaxRequest() {
Ajax = false;
if (window.XMLHttpRequest) {//Mozilla e safari
Ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {// IE
try{
Ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
Ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
Ajax com jQuery
$("#idOndeVaiCarregar").load("pagina.php", callback);
Acredito que já deu pra brincar um pouco e espero que a leitura tenha sido proveitosa.
As melhores referências de jQuery você poderá achar no site oficial, vale a pena conferir e estudar
4 Comentários | Assine | Topo
Contar caracteres com javaScript
Por Felipe de Albuquerque na categoria javaScript em 30 de setembro de 2009

Existe uma propriedade nativa do JavaScript chamada length que tem a função de contar.
A sintaxe é muito fácil “String.length” onde string é o objeto que queremos contar e o length é quem se encarregará pela contagem.
Obs: está propriedade também conta espaço em branco. Muito bom pra verificar se a senha foi digitada com espaço em branco.
Vamos ver um exemplo simples.
<script type="text/javascript" language="javascript">
var caracteres = "Felipe não sabe de tudo, mas aprende um pouco a cada dia";
var contar = caracteres.length;
alert(contar);
</script>
O resultado será um alert com o numero 56, contando com os espaços em branco, que ele interpreta como caracteres.
Agora eu quero que o nosso código varra a variável, e teste se existe a letra “e”, se achar vai informar que achou a letra “e”, senão ele vai dizer que não achou “e”, e vai mostrar o caractere que achou.
<script type="text/javascript" language="javascript">
var caracteres = "Felipe";
for(i=0; i< caracteres.length; i++){
if(caracteres[i] == "e" || caracteres[i] == "E" ){
alert("Achei o " + caracteres[i]);
} else {
alert("Não achei e, encontrei o " + caracteres[i]);
}
}
</script>
O resultado será uma serie de alerts até a condição ser satisfeita, e todos os caracteres serão contados e testados.
O ideal é trabalhar com DOM, e escrever no documento ao invés de alerts, mas como estamos apenas estudando a propriedade length, escolhi alert, mas você pode escolher um nó ou id do documento e escrever nele, Ex: screver = document.getElementById(“idOndeVoceQuerEscrever”).innerHTML = variável + “texto e tags”;
Mas isso é para próximos posts.
2 Comentários | Assine | Topo
