Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

arrow_back Aula 12 - Adotando o jQuery no Sistema da Livraria

Substituindo o código JavaScript comum por funções da jQuery

Com intuito de demonstrar o quanto jQuery é mais produtivo e menos propenso a erros em relação a JavaScript puro (devido a menor quantidade de código e a menor complexidade do mesmo), nesta seção, iremos apresentar as funções Javascript que iremos no fim da aula utilizar para alterar os arquivos JSP tanto com o código JavaScript puro (comentado, não será executado) como o código jQuery (não comentado e que efetivamente serão executados) para que seja possível se fazer uma comparação.

Vamos apresentar várias funções Javascript/jQuery novas que serão utilizadas no projeto e mais a frente o código final modificado, então por enquanto somente mantenha a atenção nas diferenças entre utilizar ou não JQuery.

Comecemos pela função verDetalhes(), do arquivo catalogo.jsp, mostrada a seguir. No código dessa função, você pode ver tanto o código antigo, comentado com //, como o novo, bem mais simples e enxuto.

​x
1
function verDetalhes(url){
2
3
    // Sem jQuery
4
    //var catalogo = document.getElementById("catalogo").attributes;
5
    //catalogo.getNamedItem("style").nodeValue="visibility: hidden; height: 0px;";
6
​
7
    // Com jQuery
8
    $("#catalogo").hide();
9
    carregarDetalhes(url);
10
​
11
}

Vamos ver agora a nova função verCatalogo(). Repare que se o código fosse escrito em Javascript puro, sem o uso do jQuery, você precisaria manipular valores de estilo CSS diretamente enquanto com jQuery basta se utilizar os métodos show() e hide() para obter o mesmo resultado (mostra/esconder um elemento). O arquivo que irá futuramente conter essa função é o catalogo.jsp. Veja a função verCatalogo() abaixo:

13
1
function verCatalogo(){
2
​
3
    // Sem jQuery
4
    //var catalogo = document.getElementById("catalogo").attributes;
5
    //catalogo.getNamedItem("style").nodeValue="";
6
    //
7
    //var detalhes = document.getElementById("detalhes").attributes;
8
    //detalhes.getNamedItem("style").nodeValue="visibility: hidden; height: 0px;";
9
​
10
    // Com jQuery
11
    $("#catalogo").show();
12
    $("#detalhes").hide();
13
}

Ainda no mesmo arquivo, iremos ter a função carregarDetalhes(). O código Javascript puro está comentado com /* e */. É interessante ver que, mesmo com o uso do do Ajax no Javascript puro, o código jQuery é muito mais simples e fácil de entender.

23
1
function carregarDetalhes(url){
2
​
3
    // Sem jQuery
4
    /*
5
    var ajaxReq = new XMLHttpRequest();
6
    ajaxReq.onreadystatechange = function() {
7
        if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
8
              var resp = ajaxReq.responseText;
9
              var detalhes = document.getElementById("detalhes");
10
              detalhes.innerHTML=resp;
11
              detalhes.attributes.getNamedItem("style").nodeValue="";
12
        }
13
    };
14
​
15
    ajaxReq.open("GET", url, true);
16
    ajaxReq.send();
17
    */
18
​
19
    // Com jQuery
20
    $("#detalhes").load(url);
21
    $("#detalhes").show();
22
​
23
}

JQuery realmente ajuda a simplificar o código não é mesmo? Imagina ter que fazer um sistema completo somente utilizando Javascript puro… seria muito mais trabalhoso. Veja também como ficará a nova função adicionarLivro():

28
1
function adicionarLivro(url){
2
​
3
    // Sem jQuery
4
    /*
5
    var ajaxReq = new XMLHttpRequest();
6
    ajaxReq.onreadystatechange = function() {
7
        if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
8
              var resp = ajaxReq.responseText;
9
              var livroAdicionado = document.getElementById("livroAdicionado");
10
              livroAdicionado.innerHTML="Você adicionou o livro <em>"+ resp +"</em> ao seu carrinho de compras.";
11
        }
12
    };
13
​
14
    ajaxReq.open("GET", url, true);
15
    ajaxReq.send();
16
    verCatalogo();
17
    */
18
​
19
    // Com jQuery
20
    $("#carrinhoVazioMsg").hide();
21
    $.get(url, function(dados){
22
        $("#livroAdicionado").html("Você adicionou um livro ao seu carrinho de compras.");
23
    });
24
    $('#carrinhoVazioMsg').hide();
25
    $('#carrinhoLinks').show();
26
    verCatalogo();
27
    verCarrinho();
28
}

Após comparar o JavaScript puro (comentado nos trechos acima) com o código jQuery que desempenha o mesmo propósito, é notável que é o código jQuery é menor, mais simples e mais legível.

[A] Anterior
4/14
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados