Material Didático

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

Aula 07 - jQuery (Parte 1)

Eventos

Nesta seção, veremos como utilizar o jQuery para registrar e tratar determinados tipos de eventos. Veremos como tratar os eventos mais relevantes, mas, para uma referência completa, leia a documentação relativa ao registro e tratamento de eventos do jQuery (http://api.jquery.com/category/events/).

A tabela a seguir apresenta os principais métodos utilizados para se associar uma função (passada como parâmetro) a um evento.

Método	Descrição
$(document).ready(função)	Define uma função a ser chamada quando a página estiver pronta, ou seja, depois de ter sido completamente carregada pelo navegador.
$(seletor).click(função)	Define uma função a ser chamada quando o (s) elemento (s) selecionado (s) receber (em) um clique.
$(seletor).dbclick(função)	Define uma função a ser chamada quando o (s) elemento (s) selecionado (s) receber (em) um clique duplo.
$(seletor).change(função)	Define uma função a ser chamada quando o (s) elemento (s) selecionado (s) for (em) modificado (s).
$(seletor).focus(função)	Define uma função a ser chamada quando o (s) elemento (s) informado (s) ganha (rem) foco.
$(seletor).focusin(função)	Define uma função a ser chamada quando o (s) elemento (s) informado (s) ou algum elemento dentro do elemento informado ganhar foco.
$(seletor).focusout(função)	Define uma função a ser chamada quando o (s) elemento (s) informado (s) ou algum elemento dentro do elemento informado perder foco.

Tabela 1 - Principais métodos para associar funções a eventos.

Para exemplificar o uso dos métodos listados acima, vejamos os códigos abaixo que transmitem os dados de livros:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

var jsonObj = null;
		var livro = null;

function carregarLista(){
		   var livros = jsonObj.livros.livro;
		   for ( var i = 0; i < livros.length; i++) {
		     var livro = livros[i];
		     var campoLivro = document.getElementById("livros");
		     campoLivro.options[campoLivro.length] = new Option(livro.nome, ""+i);
		   }
		}

function carregarLivro(indice){
		   
		   var livros = jsonObj.livros.livro;
		   var livro = livros[indice];
		   
		   document.getElementById("nome").innerHTML = livro.nome;
		   document.getElementById("isbn").innerHTML = livro.isbn;

document.getElementById("editora").innerHTML = livro.editora;
		   document.getElementById("edicao").innerHTML = livro.edicao;
		   document.getElementById("preco").innerHTML = livro.preco;
		   
		   var autoresStr = "";
		   var autores = livro.autores.autor;
		   for ( var i = 0; i < autores.length; i++) {
		     if( i > 0 ){
		       autoresStr +=" | ";
		     }
		     autoresStr += autores[i];
		   }
		   document.getElementById("autores").innerHTML = autoresStr;
		  document.getElementById("sinopse").innerHTML = livro.sinopse;

var atributos = document.getElementById("divLivroSelecionado").attributes;
		   atributos.getNamedItem("style").nodeValue="";
		}

</script>
		<br>
		<select id="livros" size="2" onclick="carregarLivro(this.value)">
		</select>
		<br>

<div id="divLivroSelecionado" style="visibility: hidden;"><br>
			<table border="1" width="60%">
			   <tr>
			     <td width="20%">Nome:</td>
			     <td id="nome"></td>
			   </tr>
			   <tr>
			     <td>ISBN:</td>
			     <td id="isbn"></td>
			   </tr>
			   <tr>
			     <td>Editora:</td>
			     <td id="editora"></td>
			   </tr>
			   <tr>
			     <td>Edição:</td>
			     <td id="edicao"></td>
			   </tr>
			   <tr>
			     <td>Autor(es):</td>
			     <td id="autores"></td>
			   </tr>
			   <tr>
			     <td>Preço:</td>
			    <td id="preco"></td>
			   </tr>
			   <tr>
			     <td colspan="2">Sinopse:</td>
			   </tr>
			   <tr height="100">
			     <td colspan="2" id="sinopse"></td>
			   </tr>
			</table>
		</div>

</body>
</html>

Para utilizar o jQuery, podemos criar um novo arquivo JSP tanto com código HTML com o Javascript. Repare que na linha que declara a variável url (var url = "/Aula07/livros.json";) você deve trocar a string Aula07 pela que representa o seu projeto. O arquivo se chamará json_jQuery.jsp e terá o seguinte conteúdo:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
		<title>JSON+jQuery</title>
	</head>
	<body>

$(document).ready(onLoad);

var jsonObj = null;
		   var livro = null;

function onLoad() {

$("#livros").click(carregarLivro);

var ajaxReq = new XMLHttpRequest();
		     var url = "/Aula07/livros.json";

ajaxReq.onreadystatechange = function() {
		       if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
		         jsonObj = eval('(' + ajaxReq.responseText + ')');
		         carregarLista();
		       }
		     };

ajaxReq.open("GET", url, true);
		     ajaxReq.send();

}
		   
		   function carregarLista() {
			      
		     var livros = jsonObj.livros.livro;
		     console.log(livros);
		     for ( var i = 0; i < livros.length; i++) {
		       var livro = livros[i];
		       console.log(livro);
		       var campoLivro = document.getElementById("livros");
		       alert(livro); 
		       campoLivro.options[campoLivro.length] = new Option(livro.nome, "" + i);
		     }
		   }

//function carregarLivro(indice) {
		   function carregarLivro() {
		     
		     var indice = $("#livros").val();
		     var livros = jsonObj.livros.livro;
		     var livro = livros[indice];

$("#nome").html(livro.nome);
		     $("#isbn").html(livro.isbn);

$("#editora").html(livro.editora);
		     $("#edicao").html(livro.edicao);
		     $("#preco").html(livro.preco);

var autoresStr = "";
		     var autores = livro.autores.autor;
		     for ( var i = 0; i < autores.length; i++) {
		       if (i > 0) {
		         autoresStr += " | ";
		       }
		       autoresStr += autores[i];
		     }
		     $("#autores").html(autoresStr);
		     $("#sinopse").html(livro.sinopse);

var atributos = document.getElementById("divLivroSelecionado").attributes;
		     atributos.getNamedItem("style").nodeValue = "";
		   }
		</script>
		<br>
		<select id="livros" size="2">
		</select>
		<br>

<div id="divLivroSelecionado" style="visibility: hidden;"><br>
			<table border="1" width="60%">
			   <tr>
			     <td width="20%">Nome:</td>
			     <td id="nome"></td>
			   </tr>
			   <tr>
			     <td>ISBN:</td>
			     <td id="isbn"></td>
			   </tr>
			   <tr>
			     <td>Editora:</td>
			     <td id="editora"></td>
			   </tr>
			   <tr>
			     <td>Edição:</td>
			     <td id="edicao"></td>
			   </tr>
			   <tr>
			     <td>Autor(es):</td>
			     <td id="autores"></td>
			   </tr>
			   <tr>
			    <td>Preço:</td>
			     <td id="preco"></td>
			   </tr>
			   <tr>
			     <td colspan="2">Sinopse:</td>
			   </tr>
			   <tr height="100">
			     <td colspan="2" id="sinopse"></td>
			   </tr>
			</table>
		</div>

</body>
</html>

Os livros que serão carregados vem de um arquivo JSON que deve ser criado no seu projeto com o nome “livros.json” com o seguinte conteúdo:

{
  "livros": {
    "livro": [
      {
        "nome": "A Cabana",
        "isbn": "8599296361",
        "editora": "SEXTANTE FICÇAO",
        "edicao": "1ª Edição - 2008 ",
        "autores": { "autor": "YOUNG, WILLIAM P." },
        "preco": "12,45",
        "sinopse": "A filha mais nova de Mackenzie Allen Philip foi raptada durante as férias em família e há evidências de que ela foi brutalmente assassinada e abandonada numa cabana. Quatro anos mais tarde, Mack recebe uma nota suspeita, aparentemente vinda de Deus, convidando-o para voltar àquela cabana e passar o fim de semana. Ignorando alertas de que poderia ser uma cilada, ele segue numa tarde de inverno e volta ao cenário de seu pior pesadelo. O que encontra lá muda sua vida para sempre."
      },
      {
        "nome": "A Ilha  Sob o Mar",
        "isbn": "8528614441",
        "editora": "BERTRAND BRASIL",
        "edicao": "1ª Edição - 2010",
        "autores": {
          "autor": [
            "ALLENDE, ISABEL",
            "SEGUNDO AUTOR"
          ]
        },
        "preco": "12,45",
        "sinopse": "O romance narra a vida de Zarité, a escrava que foi vendida aos nove anos de idade para o francês Toulouse Valmorain, dono de uma das maiores plantações de cana-de-açúcar nas Antilhas. Como escrava doméstica,ela não padeceu as dores e as humilhações de seus iguais, mas conheceu as misérias de seus patrões - os brancos."
      }
    ]
  }
}

Notas

Observe que na linha 9 do código modificado, não utilizamos o atributo 'onload' da tag 'body': ao invés de definir o atributo 'onload', na linha 14 do código modificado, utilizamos jQuery para definir uma função a ser chamada quando a pagina estiver completamente carregada.
Na linha 21 do código modificado, utilizamos jQuery para registrar uma função a ser chamada, caso a lista de livros seja clicada.
Na linha 21, experimente trocar o método 'click' por 'change' e observe a seguinte diferença: ao mudar o livro selecionado utilizando o teclado (apertando a tecla 'subir' ou 'descer') ao invés do mouse, utilizando o método 'click' nada ocorrerá. Já utilizando o método 'change', a tabela de detalhes do livro será atualizada.
A partir da linha 54, podemos ver exemplos de seleção de elementos pelo id.
Os métodos 'val' e 'html' (linhas 54 e 58, respectivamente) utilizados no exemplo modificado serão explicados em detalhe nas próximas seções desta aula.
O arquivo modificado ainda não está utilizando jQuery em sua plenitude. À medida que formos aprendendo novos recursos, iremos atualizando o exemplo acima.

Termo de uso

arrow_back Aula 07 - jQuery (Parte 1)

Eventos

Notas

Aula 07 - jQuery (Parte 1)