A JSON nada mais é do que uma maneira de representar os objetos em JavaScript,ou seja, JSON é JavaScript puro. Para trabalhar com esse formato não é necessário usar DOM ou qualquer Framwork ou Kit específico, embora muitos dos frameworks de hoje em dia dêem algum tipo de suporte à JSON.
Leia Mais em: Debugando.com
Durante o texto vou me referir à função $ como função jQuery, pois na verdade elas são a mesma coisa. A diferença é que a função $ não estará disponível se você optar por utilizá-la sem conflitos.
Antes de escrever qualquer código JavaScript, faço questão de utilizar aquela técnica clássica onde o nosso código JS começa a ser executado apenas quando o DOM terminou de ser carregado:
$(document).ready(function() {
// aqui vai o código específico da sua aplicação
});
Esse código eu deixo em um arquivo externo, e o referencio a partir da tag <script> presente no meu template HTML (independente do framework que você estiver – ou não – utilizando, manter o código JS fora do seu template HTML é uma forma simples de separar apresentação e comportamento).
Deste ponto em diante passo a omitir essas linhas de inicialização. Todo o código que for exibido pode ser posicionado na linha 2 da listagem de código acima.
Leia Mais em: Debugando.com
Venho anunciar que o debugando agora esta com site novo com mais conteudo visite agora mesmo e ajude o debugando a crescer mais ainda em conteudo a sua ajuda ira ajudar outros programadores.
Esse artigo não é para entrar em detalhes sobre AJAX, e sim para descrever sua interação com ASP. Desenvolvi um código usando ASP com base de linguagem o JavaScript (onde poderia usar o VBScript), usei claramente AJAX e o banco de dados MySQL, que não é o objetivo, e nem será, evidenciado abaixo.
Bom, primeiramente vamos começar a fazer nossa página AJAX com todas as funções necessárias para a nossa aplicação. Começamos com um bloco de código necessário para toda aplicação que envolve o AJAX, que é reconhecer se o browser (sendo um Objeto específico para o IE e outro para os demais browsers) suporta AJAX ou não:
function GetXMLHttp() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
}
catch(ee) {
try {
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e) {
try {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e) {
xmlHttp = false;
}
}
}
return xmlHttp;
}
Finalizando a construção do nosso código para verificar o browser, vamos agora criar um código para CADASTRAMENTO, usando a variável criada “xmlHttp”:
function CadastrarDados() {
var Nome = document.getElementById(“Nome”);
var EMail = document.getElementById(“EMail”);
var URL = “Cadastro.asp?Cadastrar=Ok&Nome=”+Nome.value+”&EMail=”+EMail.value+”";
Enviar.open(“GET”, URL, true);
Enviar.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
document.getElementById(“Resposta”).innerHTML = “Cadastrado com Sucesso!!!”;
Nome.value = “”;
EMail.value = “”;
Enviar.send(null);
Enviar.onload = lerTexto;
}
Pegamos via DOM os objetos de formulário de nome e e-mail que ainda serão criados. Criamos uma variável “URL” para o envio via GET dos arquivos para a página “Cadastro.asp”, seguida da querystring “Cadastrar=Ok” que receberá os campos. Em seguida temos a ação com o objeto “open”, mandando a resposta para a div “Resposta”. Para finalizar, limpamos os campos para nada guardar – evitando assim a duplicagem – e o usuário saberá que foi cadastrado:
Com bloco abaixo vamos apresentar e deletar o registro:
// Início – Carregar Página
function lerTexto() {
var URLler = “Ler.asp”;
Enviar.onreadystatechange = stateChanged;
Enviar.open(“GET”, URLler, true);
Enviar.send(null);
}
function stateChanged() {
if (Enviar.readyState==4) {
document.getElementById(“ler_Dados”).innerHTML = Enviar.responseText;
}
}
window.onload = lerTexto;
// Final – Carregar Página
// Início – Deletar
function apagar(id, rowIndex) {
if (confirm(´Tem certeza que deseja excluir este registro?´)) {
document.getElementById(“tabela”).deleteRow(rowIndex);
Enviar.open(“POST”,´Cadastro.asp?Deletar=Ok&id=´+ id, false);
Enviar.send(null);
}
}
// Final – Deletar
Com a simples linha Enviar.open(“GET”, URLler, true), carregamos a página “Ler.asp”, que estará no arquivo .zip no final do artigo para ler as informações do banco.
O deletar segue a mesma idéia do Cadastrar, mas utilizamos o método POST para isso, e passando a ID do registro.
E por final, a prática, criando “Cadastro.asp” com todas as funcionalidades necessárias, e o AJAX é claro, que acessa as ID´s das tags HTML´s
<%@ Language=”JavaScript” %>
<%
var Conexao;
var Conexao = Server.CreateObject(“Adodb.Connection”);
Conexao.ConnectionString = “Driver=MySQL ODBC 3.51 Driver; DataBase=banco; Server=localhost; Uid=root; PassWord=root;”;
Conexao.Open;
%>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Cadastrar</title>
<script language=”javascript” src=”ajaxCarregar.js”></script>
</head>
<body>
<div id=”Resposta”></div><br>
<form id=”Form”>
Nome: <input type=”text” id=”Nome” name=”Nome” value=”"><br>
E-Mail: <input type=”text” id=”EMail” name=”EMail” value=”"><br>
<input type=”button” id=”Cadastrar” value=”Cadastrar” name=”Cadastrar” onClick=”CadastrarDados();”>
</form><br>
<br>
<br>
<div id=”ler_Dados”></div>
</body>
</html>
<%
if (Request.QueryString(“Cadastrar”) == “Ok”) {
Conexao.Execute(“Insert Into Teste (Nome, EMail) Values (´”+Request.QueryString(“Nome”)+”´, ´”+Request.QueryString(“EMail”)+”´)”);
Response.Write(“”);
}
if (Request.QueryString(“Deletar”) == “Ok”) {
Conexao.Execute(“Delete From Teste Where Codigo = ´”+Request.QueryString(“id”)+”´”);
Response.Write(“”);
}
%>
Sabemos que fazer requisições assíncronas ao servidor é muito bom, mas às vezes tem seus custos. Uma das coisas que acontecem e muitas vezes atrapalham o usuário que não está acostumado é a perda do histórico de navegação dos botões de voltar avançar do navegador.
A forma de contornar isso, descrita abaixo, é usando o plugin do JQuery jquery.history
Primeiramente, precisamos adicionar a biblioteca JQuery na lista de scripts:
<script type=”text/javascript” src=”jquery.js”></script>
Depois disso temos que adicionar o plugin jquery.history
<script type=”text/javascript” src=”jquery.history.js”></script>
Agora vamos cadastrar a função que tem o poder de adicionar histórico ao browser:
<script type=”text/javascript”>
function pageload(hash) {
if(hash) {
$(“#load”).load(hash + “.html”);
} else {
$(“#load”).empty();
}
}
$(document).ready(function(){
$.historyInit(pageload);
$(“a[@rel=´imasters´]“).click(function(){
var hash = this.href;
hash = hash.replace(/^.*#/, ´´);
$.historyLoad(hash);
return false;
});
});
</script>
A função $.historyInit(pageload) permite que a função que está dentro do parâmetro, ou seja, pageLoad, adicione os históricos de navegação, lembrando que a função pageLoad poderá ser modificada de acordo com as necessidades do projeto – pois ela está bem simples no exemplo – e está apenas carregando páginas html de acordo com o parâmetro, mas serve para o entendimento do artigo, que é deixar funcionando os botões de voltar e avançar do navegador.
Se colocarmos o seguinte código html no conteúdo da página:
<a href=”#1″ rel=”imasters”>página 1</a><br />
<a href=”#2″ rel=”imasters”>página 2</a><br />
<a href=”#3″ rel=”imasters”>página 3</a><br />
<hr />
Conteúdo:<br />
<div id=”load”></div>
Poderemos ver que o site funcionará como se estivéssemos mudando de página a cada link, mas estamos na verdade mudando apenas o conteúdo da div <div id="load"></div> , que é exatamente o que queremos.
Pronto! Agora podemos utilizar o AJAX na página como quisermos e o histórico de navegação será automaticamente adicionado ao navegador.
Para ver o exemplo acima funcionando acessem o link http://www.alantiel.com/~file/jqueryhistory
Olá, a todos! Vou demonstrar uma ótima ferramenta para complementar o trabalho de renderização de dados no cliente. A única dependência é a utilização do framework de desenvolvimento JQuery.
Renderizar dados com tabelas é uma técnica muito antiga e largamente utilizada. Tabelas são muito úteis para gerar relatórios e visualização dos dados de forma prática. Com o crescimento do fluxo de dados na web, e o surgimento de novas necessidades dos usuários da web em busca de informações úteis, foi preciso criar formas para ordenação de dados, pois isso facilita bastante no processo de busca da informação, pois tendo a possibilidade de deixar os dados ordenados pela coluna de nome ou de data de modificação, por exemplo, temos bastante controle dos dados, e hoje em dia já é bem comum ver sites que fazem esse tipo de tratamento.
A solução trivial que muitos sites utilizam é para cada click em determinado título de coluna, fazemos requisições para o servidor e trazemos os dados novamente para o browser. Essa técnica funciona, mas não é uma solução viável para um sistema com muitos dados, e até mesmo para poucos dados não precisamos deixar o usuário esperando essa recarga quando temos soluções melhores.
Vamos à prática!
Temos a seguinte tabela para ordenar:
<table id=”tablesorter-imasters”>
<thead>
<tr>
<th>Codigo</th>
<th>Nome</th>
<th>Idade</th>
<th>E-mail</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>João Pereira dos Santos Neto</td>
<td>28</td>
<td>jpdsn_emailteste@gmail.com</td>
<td>http://www.jpdnteste.com</td>
</tr>
<tr>
<td>2</td>
<td>Maria Antonia da Silva Filho</td>
<td>37</td>
<td>madsf_emailteste@gmail.com</td>
<td>http://www.madsfteste.com</td>
</tr>
<tr>
<td>3</td>
<td>José da Costa Souza Junior</td>
<td>19</td>
<td>jdcasj_emailteste@gmail.com</td>
<td>http://www.jdcasjteste.com</td>
</tr>
</tbody>
</table>
Essa é uma tabela html comum nos padrões W3C, com as tags “thead” para definir a área dos títulos e a “tbody” para definir onde está o corpo da tabela. Essa tabela pode perfeitamente vir de um banco de dados, xml, json… whatever, só depende da imaginação.
Para deixarmos essa tabela ordenável diretamente pelo cliente, é bem simples, precisamos importar a bilblioteca do JQuery e do JQuery table para a página:
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.tablesorter.js”></script>
Essas bibliotecas estão no link de download no final do artigo, junto com um arquivo de css para uma estilização visual da tabela.
Agora que temos a biblioteca e seus recursos em nossa página, basta definir o comportamento para a tabela. No nosso caso temos a tabela com id = tablesorter-imasters.
Basta adicionarmos a instrução no comportamento com sistaxe JQuery, abaixo dos imports citados acima, assim:
<script type=”text/javascript”>
$(function() {
//aqui podem ter todas as outras instruções JQuery do site, sem perda
$(“#tablesorter-imasters”).tablesorter();
//aqui podem ter mais instruções JQuery, não importa a ordem
});
</script>
Pronto, agora temos uma tabela com dados ordenáveis de maneira bem simples…
Para quem quiser ver o exemplo completo, acesse este link.
Com frameworks conseguimos um nível bem elevado de produtividade, já que eles possuem muitas facilidades embutidas e às vezes fazem grande parte do trabalho que seria repetitivo para os programadores.
Hoje em dia temos uma variedade deles no mercado, para a maioria das linguagens de programação largamente utilizadas, como PHP, Java e Python, e também para linguagens de script como Javascript. Alguns deles são muito ligados com a linguagem para a qual foi criada como Rails, tanto que muitas pessoas ouvem falar da linguagem Ruby como Ruby on Rails, e a maioria dos que começam a trabalhar com Ruby já aprendem com o framework.
Quando projetamos um sistema utilizando framework, temos projetos melhores, isso porque economizamos tempo na programação básica e trivial, já que os frameworks fazem o ’serviço sujo’ de programação, ou seja, as coisas básicas que se repetem não precisam ser feitas mais pelo programador e sim automaticamente pelo framework. Com esse tempo a mais, podemos pensar na criação de módulos complexos, e com isso aumentar o nível do projeto para além do esperado no planejamento do prazo.
O uso de frameworks não é totalmente difundido, por vários motivos… Alguns deles que podemos citar são:
Essas características são contornáveis, mas antes disso precisamos compreender muito bem os prós e passar a filosofia inteira para todos os envolvidos no projetos. O tempo de aprendizado do framework é compensado pelos benefícios de seu uso, assim como o aprendizado só é difícil no começo, pois na medida em que vamos usando, vai ficando cada vez mais rápida e automática a criação…
Quero passar a mensagem de que vale a pena pensar no uso dos frameworks, ainda mais hoje em dia com toda a variedade existente no mercado, dos mais básicos e complexos.Fechando aqui, vou deixar uma lista de frameworks que acho úteis para algumas linguagens:
PHP: Code Igniter, Cake, Zend Framework.
Java: Spring, Struts, VRaptor.
Python: DJango.
Ruby: Rails
Javascript: JQuery, Mootools, Prototype
No dia 22 de agosto de 2005 John Resig, um desenvolvedor americano profundo conhecedor de JavaScript, autor do livro Pro JavaScript Techniques, membro da Corporação Mozilla e graduado em ciência da computação no Rochester Institute of Technology, escreveu em seu blog um artigo relatando sua frustração com a maneira verbosa de se escrever JavaScript para obter os resultados pretendidos.
Aproximadamente cinco meses após a publicação do artigo, John Resig apresentou publicamente os resultados de seus estudos que visavam a simplificar a criação com aquela linguagem. Os resultados foram apresentados em uma palestra intitulada “jQuery a nova onda para JavaScript“, proferida no BarCampNYC – Wrap Up realizado no dia 14 de janeiro de 2006. Ali nasceu a biblioteca.
O próprio John Resing define sua criação assim:
O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?
E, sem dúvida, ele estava em um momento de rara inspiração quando assim definiu, pois soube resumir muito bem jQuery. Uma maneira simples e fácil de escrever JavaScript colocada ao alcance não só de programadores experientes como também de designers e desenvolvedores com pouco conhecimento de programação.
jQuery é uma biblioteca JavaScript disponibilizada como software livre e aberto, cujo emprego e uso é regido segundo as regras de licença estabelecidas pelo MIT – Massachusetts Institute of Technology e pelo GPL – GNU General Public License. Isto, resumidamente, significa que você pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais. Para maiores detalhes sobre estes tipos de licença consulte os seguintes endereços na internet:
http://pt.wikipedia.org/wiki/Mit_license
http://pt.wikipedia.org/wiki/GNU_General_Public_License
A mesma filosofia que norteou a criação da biblioteca – simplificar tarefas complexas – aplica-se ao seu aprendizado. Com pouquíssimo tempo de estudo você estará apto a desenvolver animações e criar interações de alto impacto visual, sem necessidade de intrincados e complexos scripts.
Os primeiros resultados são conseguidos com pouco aprendizado, contudo, como as possibilidades de emprego da biblioteca não se limitam a criar animações e interações simples, o domínio do assunto somente virá com mais tempo de estudo. Contudo, mesmo em fase avançada, a curva de aprendizado cresce muito mais rapidamente do que aquela para o aprendizado das técnicas avançadas de JavaScript.
Como pré-requisitos para estudo de jQuery você deverá ter um razoável conhecimento da sintaxe básica de JavaScript e um sólido entendimento dos seletores CSS2.1 e dos seletores CSS3. A sintaxe da biblioteca fundamenta-se nestes seletores.
Sem entrar em considerações teóricas mais profundas e usando uma linguagem despida de caráter técnico, a biblioteca jQuery se resume a um arquivo JavaScript gravado com a típica extensão .js cuja função é simplificar a sintaxe JavaScript.
Veja dois exemplos de simplificação:
Alerta: A sintaxe jQuery é própria, contudo no desenvolvimento com seu uso você pode usar a sintaxe formal JavaScript sempre que necessário. Por exemplo: Não existe uma sintaxe jQuery específica para um pop-up de alerta, mas você pode usar o seu conhecido alert(“mensagem de alerta”).
As principais vantagens do uso de jQuery sobre JavaScript tradicional são:
A atual biblioteca está na sua versão 1.2.6 e é fornecida em três formatos:
Trata-se de um arquivo JavaScript comentado e com espaçamento entre as linhas do código. Seu tamanho é de 97.8 KB.
Foi criado com a finalidade de poder ser facilmente lido e entendido por quem se disponha a estudá-lo com qualquer finalidade.
Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js
Trata-se do mesmo arquivo JavaScript no qual foram retirados todos os espaçamento do código. Seu tamanho é de 54.5 KB.
É uma versão mais compacta que a versão anterior e é a recomendada para uso em desenvolvimento e hospedagem definitiva para o site no ar. Use esta versão nos seus projetos.
Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js
Trata-se do arquivo JavaScript compactado com uma ferramenta de compressão de código JavaScript. O processo de compressão torna o código ilegível para humanos. Seu tamanho é de 30.3 KB.
Embora com tamanho menor que o da versão mini, o tempo de carregamento desta versão acaba sendo praticamente igual, pois há que se computar o tempo de descompressão quando o usuário recebe a página. Esta versão tem a desvantagem em relação à anterior de não ir para o cache, tendo que ser carregada novamente toda vez que o usuário volta ao site. Outra desvantagem que desaconselha seu uso é o fato de que o processo de descompressão pode, eventualmente, ser imperfeito, introduzindo bugs não existentes na versão sem compressão ou não compacta. A não ser que você tenha uma boa justificativa para usá-la, não use-a.
Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js
A biblioteca jQuery não requer instalação. Por se tratar de um arquivo JavaScript formal, basta que você crie um link para o arquivo, na seção head do documento onde o script irá rodar, tal como faz com qualquer arquivo JavaScript tradicional.
Supondo que você fez o download e descompactou a versão mini da biblioteca, crie o link como mostrado a seguir:
<head>
…
<script type=”text/javascript” src=”../jquery-1.2.6.mini.js”></script>
</head>
…
Quando digo javascript comum, é apenas para dizer javascript convencional, ou seja, a forma que escrevíamos javascript antes de criarem os frameworks e bibliotecas que existem hoje, como Mootools e JQuery.
Escolhi falar sobre o JQuery por alguns motivos. Primeiro, por que é uma ferramenta que está se tornando bem popular, agiliza bastante o desenvolvimento de códigos, muito rica em documentação e tem uma curva de aprendizado boa para quem vai aprender.
Para deixar sua aplicação utilizar as funcionalidades do JQuery é fácil, basta baixar a última versão no site: http://jquery.com/ renomear para jquery.js (por exemplo) e adicionar uma chamada como:
E adicionar uma chamada na área do head do site assim:
<script src=”jquery.js” type=”text/javascript”></script>
Agora podemos adicionar efeitos, manipular a árvore da página, adicionar eventos aos elementos, utilizar AJAX, carregar outros arquivos de javascript dinamicamente… Tudo isso com a facilidade do JQuery!
Usar JQuery requer apenas que você faça a manipulação dentro de um bloco de código, que nada mais é do que um evento chamado ready (pronto) para o documento, assim:
$(document).ready(function() {
// aqui fazemos qualquer manipulação com as facilidades do jquery
});
Esse bloco acima é o modelo geral de como funcionam as coisas com JQuery: primeiro temos o elemento que vamos modificar, depois temos o evento que queremos adicionar funcionalidades, ai vem o que chamamos de função de callback, onde podemos usar tanto códigos javascript comum, quanto os do framework.
Como o $(document) que fizemos acima, temos muitas formas para seletores de elementos da página. Esses seletores são flexíveis e poupam muitas linhas de código e algum tempo de raciocínio para a criação de um algoritmo especifico.
Seguem abaixo algumas formas de se selecionar algum elemento da página e o que eles significam:
$("p") = selecionar todos os parágrafos da página (retorna um vetor)
$("#meuIdUnico") = Seleciona o elemento que possui um id com valor meuIdUnico, (retorna um elemento único)
$("input[type=´text´]") = Seleciona todos os input do tipo text
Depois de “selecionar” os elementos para manipulação, podemos adicionar computamentos de uma forma bem interativa, pois podemos criar vários tipos de eventos para um mesmo objeto, basta colocar os blocos com os eventos que precisar, temos eventos para todas as horas: click, focus, change, keypress… Veja abaixo como seria fácil adicionar duas funções a todos os elementos de parágrafo da página, vamos colocar dois eventos, mas fique claro que podemos colocoar quantas precisarmos.
$(“p”).mouseover(function(){
//manipular o evento de mouseover
});
$(“p”).mousedown(function(){
//manipular o evento de mousedown
});
Uma coisa que é informalmente ligada ao fato de manipularmos eventos de vários elementos de uma só vez, é saber QUAL elemento estamos manipulando em determinado momento, pois as vezes precisamos fazer alterações condicionais de acordo com o elemento.
Isso também é facilmente feito com JQuery, temos a função each que percorre todos os elementos retornador pelo seletor, então, dentro dessa função podemos manipular de uma forma melhor o elemento, para isso temos o this, que para cada iteração feita pelo each, retorna o elemento especifico da iteração.
Por exemplo, se já estamos manipulando todos os formulário em algum bloco e queremos tratar diferente algum formulário especifico podemos fazer:
$(“form”).each(function() {
//fazer computamento padrao
if(this.class == “resetIt”)
this.reset();
});
O que mostrei são apenas pequenos exemplos de como podemos fazer coisas impressionantes com o JQuery. Muitas pessoas já tem muita coisa em javascript e que não quer perder ou ter que refazer… então isso não é problema pois com JQuery podemos intercalar códigos javascript comuns com suas sintaxes. Dentro do bloco de código, ou seja, dentro das chaves de abertura e fechamento de bloco, temos uma área livre para a imaginação, ali podemos fazer o que quiser desde uso de códigos comuns de javascript, até chamadas para funções externas. Assim vemos que temos total controle, pois podemos importar outros scripts e não temos o trabalho de refazer o código para colocar dentro do JQuery, apenas precisamos chamar os códigos externos dentro das funções JQuery.
Para quem quer se aprofundar no Framework, recomendo a documentação oficial: http://docs.jquery.com/Main_Page
Para quem esta estudando JavaScript segue o link de um WIKI para leitura.
