0% acharam este documento útil (0 voto)

2K visualizações

Programação Cliente Com Javascript

1) O documento apresenta os conceitos básicos de desenvolvimento web com Javascript e JQuery, incluindo manipulação do DOM e requisições AJAX. 2) Serão abordados quatro módulos tratando de sintaxe Javascript, manipulação do DOM com JQuery, eventos e requisições AJAX. 3) O objetivo é fornecer os conhecimentos necessários para programação client-side utilizando a linguagem Javascript e a biblioteca JQuery.

Enviado por

rafaelxulipa

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

2K visualizações

Programação Cliente Com Javascript

Enviado por

rafaelxulipa

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 63

DESCRIÇÃO

Desenvolvimento web no lado cliente com a linguagem de programação Javascript e a

biblioteca JQuery, manipulação da Árvore DOM e implementação de requisições AJAX.

PROPÓSITO
Apresentar a linguagem Javascript e obter o conhecimento básico necessário para utilizar
a
biblioteca Jquery na programação Client-side.

PREPARAÇÃO
Faça download do arquivo
com todos os códigos que serão tratados neste tema. Para
aplicação dos exemplos, será
necessário um editor de texto com suporte à marcação HTML.
No sistema operacional
Windows, é indicado o Notepad++. No Linux, o Nano Editor.
Uma alternativa aos editores instalados no computador é a utilização de interpretadores
online,
como Codepen e JSFiddle.

OBJETIVOS

MÓDULO 1

Revisar os conceitos gerais e a sintaxe básica da linguagem

Javascript

MÓDULO 2

Descrever como manipular a árvore DOM com o framework jQuery

MÓDULO 3

Analisar como trabalhar com eventos com o Framework jQuery

MÓDULO 4

Empregar requisições AJAX com o Framework jQuery

INTRODUÇÃO
A linguagem de programação Javascript compõe as tecnologias que rodam no lado cliente no
ambiente web. Tal linguagem, que é interpretada diretamente pelo navegador, é
responsável
pelos aspectos relacionados a comportamento e interação nas páginas HTML. A
linguagem
Javascript é simples, de fácil aprendizagem e, ao mesmo tempo, muito versátil,
podendo ser
utilizada em páginas web e na criação de jogos e, mais recentemente, na
construção de
aplicativos mobile.

Ao longo deste tema, alguns conceitos básicos da linguagem serão revisados. Além disso,
será
visto como utilizar a biblioteca Jquery, a fim de otimizar o processo de
programação com uso
de Javascript.

MÓDULO 1

 Revisar os conceitos gerais e a sintaxe

básica da linguagem Javascript

INCORPORANDO O JAVASCRIPT (JS) EM

PÁGINAS HTML
Em relação à sua utilização em páginas web, foco de nosso tema, a primeira coisa a ser
feita
para utilizá-lo é incorporá-lo ao documento HTML. Isso pode ser feito de duas
formas:

linear_design / Shutterstock

Inserindo o código Javascript na seção <head>, ao final da página, dentro

da tag <script>.

AF studio / Shutterstock

Incorporando um arquivo externo, contendo apenas código JS, também é possível

fazer uso da
tag <script>.
 ATENÇÃO

Considere sempre manter seu código Javascript em um

arquivo externo, com a extensão “.js”.
Além disso, sempre que possível,
incorpore o script externo ao final da página HTML –
imediatamente antes do
fechamento da tag <body>. Além de tornar o carregamento da página
mais
rápido, uma vez que ela é renderizada de cima pra baixo – ou seja, ao encontrar
a tag
<script> logo no <head>, o navegador só continuará a carregar o
restante da página após
interpretar e executar todo o código JS. Essa boa
prática também permite que elementos da
página sejam manipulados pelo JS, pois
ele será carregado apenas após todos os elementos
já estarem disponíveis. Por
outro lado, caso algum conteúdo ou funcionalidade da página
dependa do JS para
ser corretamente exibido, será necessário mantê-lo no <head>. Em
resumo:
avalie caso a caso.

Os exemplos citados de incorporação podem ser vistos a seguir:

<!doctype html>

<head>

<title>Incorporação de JS em Páginas HTML</title>

</head>

<body>

<script type="text/javascript" src="script.js"></script>

</body>

</html>

<!doctype html>

<head>

<title>Incorporação de JS em Páginas HTML</title>

/* Códigos Javascript */

</script>

</head>

<body>

</body>

</html>

VARIÁVEIS: ESCOPO E TIPOS

Em uma linguagem de programação, quando falamos de escopo, estamos tratando do local
onde
uma variável existe dentro de um programa. Nesse sentido, em Javascript, uma variável
pode existir a nível global ou dentro de bloco.

 DICA

Considere como bloco todo código escrito dentro de chaves

“{ }” (estruturas condicionais,
estruturas de repetição e funções, por exemplo).

Veja esses conceitos na prática:

<!doctype html>

<head>

<title>Escopo de variáveis em JS</title>

var msg = "Conteúdo da variável msg fora do bloco de instrução";

//Bloco de Instrução

//Em blocos de instrução, quando redeclarada, a variável sobrescreve a existente

if(true){

var msg = "Conteúdo da variável msg dentro do bloco de instrução";

console.log(msg); //Imprimirá "Conteúdo da variável msg dentro do bloco de instrução"

}

console.log(msg); //Imprimirá "Conteúdo da variável msg dentro do bloco de instrução"

var msg2 = "Conteúdo da variável msg2 fora do bloco de função";

//Bloco de Função

//Em blocos de Função, quando redeclarada, a variável não sobrescreve a existente

//Logo, a nova variável só existe a nível do escopo da função

imprimeVariavel();

function imprimeVariavel(){

var msg2 = "Conteúdo da variável msg2 dentro do bloco de função";

var msg3 = "Conteúdo da variável msg3 - só existente dentro do bloco de função";

console.log(msg2); //Imprimirá "Conteúdo da variável msg2 dentro do bloco de função"

console.log(msg2); //Imprimirá "Conteúdo da variável msg2 fora do bloco função"

console.log(msg3); //Disparará um erro dizendo que a variável msg3 não foi definida

</script>

</head>

<body>

</body>

</html>

Agora, siga as seguintes etapas:

ETAPA 01
Copie o código acima e salve em um documento com a extensão “.html”. A seguir, abra
esse
arquivo no navegador.

ETAPA 02
Abra o inspecionador de elementos e selecione a aba console.
Recarregue a página. Veja, no
inspecionador, a saída dos comandos “console.log”,
utilizados no exemplo.

ETAPA 03
Leia, com atenção, os comentários existentes no próprio código. Perceba a diferença
entre a
sobrescrita da variável msg, dentro do bloco
if, e da variável msg2, dentro do bloco de função.
Por fim, veja o que acontece com a variável msg3.

Em linhas gerais, uma variável em Javascript tem comportamento distinto de acordo com o
bloco na qual foi declarada e teve valores atribuídos. O destaque, no código anterior,
vai para a
variável msg2 definida e inicializada dentro da função
“imprimeVariavel”. Nesse caso, embora
precedida pela palavra reservada
“var”, essa variável não possui escopo global, mas local, por
ter sido definida dentro
da função.
VARIÁVEIS DEFINIDAS DENTRO DE FUNÇÕES
POSSUEM ESCOPO LOCAL, FICANDO
RESTRITAS AO ESCOPO DA FUNÇÃO.

UTILIZANDO VAR, LET E CONST

Como visto no exemplo anterior, é preciso ter certos cuidados na declaração,

inicialização e
utilização das variáveis em JS. Nesse sentido, a utilização das palavras
reservadas var, let e
const, todas
associadas à declaração de variáveis, ajuda-nos a ter controle total sobre o seu
escopo.
A seguir, veremos como e quando utilizar cada uma delas.

VAR
A utilização dessa palavra reservada, na declaração de variáveis, concede
escopo global a
elas. Ou seja, variáveis declaradas utilizando var podem ser
acessadas em qualquer ponto do
script, dentro e fora de blocos – com exceção
dos blocos de funções, onde, como já
mencionado, as variáveis possuem escopo
apenas local.

LET
A partir do lançamento do Javascript 6 (ECMAScript 6 ou ES2015.) ,
tornou-se possível
melhorar o controle sobre o escopo de variáveis em JS com
a introdução da palavra-chave let.
Embora não suportada por todos os
navegadores (no Internet Explorer, ela só está disponível a
partir da versão
Edge), essa nova palavra reservada juntou-se às demais (var e const), tendo
como função, sobretudo, restringir o acesso a variáveis a nível de bloco. Ou
seja, uma variável
declarada com let, dentro de um bloco, não pode ser
acessada em nenhum outro local do
script, a não ser no bloco em questão.
Isso implica ainda que, caso declarada fora de um bloco,
essa variável passa
a ter escopo global, assim como as variáveis declaradas com var.

CONST
Nas linguagens de programação, uma variável declarada como
constante (const)
é uma
variável cujo valor é fixo, ou seja, o valor atribuído a tal variável
não pode ser alterado.

Em Javascript, utilizamos const para declarar uma variável como

constante. O
seu uso é
indicado para garantirmos que o valor atribuído a uma variável não
será alterado ao longo da
execução de nosso programa, ou seja, para
assegurarmos que alterações não previstas ou
indesejadas sejam realizadas no
valor de determinada variável.

Veja um exemplo simples de utilização de constante:

const url = "www.dominio.com.br";

console.log(url); //imprimirá www.dominio.com.br

//gerará um erro, pois uma constante não pode ser 'reatribuída'

url = "www.novo-dominio.com.br";

 ATENÇÃO

Utilizar let, var e const permite maior controle em

relação à disponibilidade das variáveis e ao
seu conteúdo, evitando erros de
sobrescrita ou de acesso, entre outros.

ESCOPO DE VARIÁVEIS – COMPARAÇÃO

ENTRE VAR E LET
Neste vídeo, o Professor Alexandre Paixão demonstra as
diferenças no escopo de variáveis
usando var e let.

 DICA

No tópico de preparação, você encontrará os arquivos com

os códigos abordados neste e nos
demais vídeos deste tema.

ARROW FUNCTIONS
Uma importante novidade foi introduzida na especificação Javascript ES6, as arrow
functions,
que podem ser definidas como uma forma mais simples de se criar
funções em JS. Veja um
exemplo em que uma arrow function que faz a multiplicação de dois
números é criada e
utilizada:

const multiplicacao = (n1, n2) => {

return n1 * n2;

console.log(multiplicacao(3, 2)); //imprimirá 6

Quando uma função possuir apenas uma expressão – no exemplo anterior, a única instrução é
retornar à multiplicação dos dois números recebidos como parâmetros –, a sua sintaxe
pode
ser ainda mais simples. Veja como ficaria, nesse caso, o exemplo anterior:

const multiplicacao = (n1, n2) => n1 * n2;

console.log(multiplicacao(3, 5)); //imprimirá 15

Por último, confira um comparativo onde o método JS

map pode ser definido e utilizado com e
sem arrow function:

MÉTODO JS MAP

Utilizado para aplicar uma função, recebida como parâmetro, nos elementos
de um array,
devolvendo ao final um novo array.

var cores = [

{ id: 1, nome: 'Amarelo' },

{ id: 2, nome: 'Verde' },

{ id: 3, nome: 'Azul' },

{ id: 4, nome: 'Branco' },

{ id: 5, nome: 'Preto' }

];

//Caso você queira extrair apenas os nomes do array 'cores'

//Exemplo 1: utilizando um laço foreach

//Criando um novo array para receber os nomes

var nomesCores = [];

//Percorrendo o array cores e atribuindo ao novo array os nomes

cores.forEach(function (cor) {

nomesCores.push(cor.nome);

});

console.log(nomesCores); //imprimirá ["Amarelo", "Verde", "Azul", "Branco", "Preto"]

//Exemplo 2: utilizando arrow function

const coresNomes = cores.map(cor => cor.nome);

console.log(coresNomes); //imprimirá ["Amarelo", "Verde", "Azul", "Branco", "Preto"]

 DICA
Há muito mais a ser visto a respeito das arrow functions.
Na seção Explore+, você encontrará
algumas referências a seu respeito.

EVENTOS
Os eventos são responsáveis por fornecer interatividade a uma página HTML, fazendo uso da
linguagem Javascript. Por exemplo: o clique do mouse em um link que abre uma janela
modal
ou revela um conteúdo até então escondido, como um submenu, faz uso de eventos.

Podemos criar inúmeras funcionalidades, além das duas mencionadas anteriormente, fazendo
uso de eventos. Veja o exemplo a seguir. Embora simples, ele contém a sintaxe necessária
para a criação de eventos utilizando apenas Javascript. Copie o código e salve-o em um
arquivo com extensão “.html”. A seguir, abra o arquivo em um navegador e veja o que
acontece.

<!doctype html>

<head>

<title>Eventos em Javascript</title>

</head>

<h1 id="titulo">Clique em qualquer lugar nesse texto para ver o conteúdo escondido.</h1>

<p id="texto_escondido">Texto escondido, que só será mostrado após click na texto acima.
</p>

function escondeTexto(){

var eP = document.getElementById("texto_escondido");

eP.style.display = "none";

var hP = document.getElementById("titulo");

hP.onclick = function(){

document.getElementById("texto_escondido").style.display = "block";

</script>

</body>

</html>

No exemplo anterior, foram utilizados os eventos “onload”, atribuído à tag <body>, e

“onclick”,
atribuído por programação à tag <h1>, com id “titulo”. No código em
questão, foi utilizado
apenas Javascript. A seguir, no próximo módulo, veremos como a
utilização de frameworks
pode facilitar e agilizar nosso trabalho quando programamos em
Javascript (ou em qualquer
outra linguagem).

Fonte: iinspiration / Shutterstock

VERIFICANDO O APRENDIZADO

1. ASSINALE A ALTERNATIVA QUE CORRESPONDE À AFIRMATIVA QUE

DEFINE O QUE É ENTENDIDO POR ESCOPO DE VARIÁVEIS NA
LINGUAGEM JAVASCRIPT.

A) Ao falarmos de escopo de variáveis, nós nos referimos ao local de nosso código onde
determinada variável pode ser acessada.

B) O escopo de variáveis está relacionado ao tipo de acesso permitido a ela, podendo o

escopo então ser público ou privado.

C) A partir da especificação mais recente da Javascript, o controle de escopo foi simplificado e

limitado à utilização da palavra reservada const para a declaração de variáveis.

D) Em Javascript, os tipos de dados possíveis de uma variável correspondem ao seu exemplo.

Logo, o escopo de uma variável pode ser uma string, um número inteiro, um objeto, entre
outros.

2. CONSIDERANDO O FRAGMENTO DE CÓDIGO A SEGUIR, ASSINALE A

ALTERNATIVA CORRESPONDENTE À SUA SAÍDA – O QUE SERÁ
EXIBIDO NO COMANDO “CONSOLE.LOG”, NA ÚLTIMA LINHA.

VAR TEXTO = "TEXTO ATRIBUÍDO À VARIÁVEL";

IMPRIMIRTEXTO();

FUNCTION IMPRIMIRTEXTO(){

VAR TEXTO = "NOVO TEXTO ATRIBUÍDO À VARIÁVEL";

CONSOLE.LOG(TEXTO);

A) Undefined.

B) "Texto atribuído à variável".

C) "Novo texto atribuído à variável".

D) "Texto atribuído à variável".

"Novo texto atribuído à variável".

GABARITO

1. Assinale a alternativa que corresponde à afirmativa que define o que é entendido por
escopo de variáveis na linguagem Javascript.

A alternativa "A " está correta.

Na linguagem Javascript, assim como na maioria das linguagens, está presente o conceito de
escopo. Tal conceito diz respeito à acessibilidade das variáveis em diferentes partes do código.

2. Considerando o fragmento de código a seguir, assinale a alternativa correspondente à

sua saída – o que será exibido no comando “console.log”, na última linha.

var texto = "Texto atribuído à variável";

imprimirTexto();

function imprimirTexto(){

var texto = "Novo texto atribuído à variável";

console.log(texto);

A alternativa "B " está correta.

Em Javascript, as variáveis declaradas utilizando var podem ser acessadas em qualquer ponto
do código, exceto nos blocos de funções, onde elas possuem escopo local. Logo, a variável
“texto” declarada dentro da função “imprimirTexto()” tem escopo local e só pode ser acessada
dentro da função. Como o comando “console.log” foi utilizado fora da função para imprimir o
valor de “texto”, o conteúdo disponível aqui foi o definido logo no início do código.

MÓDULO 2
 Descrever como manipular a árvore DOM com
o framework jQuery

A utilização de frameworks facilita e agiliza o trabalho de programação. Através desses

recursos, temos acesso a uma série de códigos e funcionalidades prontas, diminuindo a
quantidade de códigos que precisamos escrever. Nesse contexto, veremos, a partir de agora, o
Framework jQuery, um dos mais conhecidos frameworks Javascript.

FRAMEWORKS

Os frameworks podem ser definidos como um conjunto de bibliotecas ou componentes

reutilizáveis.

Fonte: Imagentle / Shutterstock

A BIBLIOTECA JQUERY
O jQuery é uma biblioteca Javascript rápida, pequena e rica em recursos. Tal biblioteca
simplifica o processo de manipulação de documentos HTML, manipulação de eventos,
animação e Ajax, com uma API fácil de usar, que funciona em vários navegadores (jQuery,
2020).
A primeira coisa que precisamos fazer para utilizar a biblioteca jQuery é incluí-la em nosso
código. Isso pode ser feito de duas formas:

Fonte: David Petrik / Shutterstock

Realizar o download com armazenamento local.

Fonte: zo3listic / Shutterstock

Criar um link a partir de um repositório remoto.

Além disso, é importante saber que há versões diferentes, com tamanhos diversos. Ou seja,
além de estar em contínua evolução, são disponibilizados diferentes pacotes: completos,
compactados e slim. Esse último exclui alguns recursos, como os módulos AJAX e o módulo
de efeitos.

 DICA

O jQuery, além de ser uma biblioteca rica em recursos, é gratuita.

O fragmento de código a seguir demonstra como incorporar a biblioteca a partir de um recurso

remoto. Para utilizá-la localmente, basta fazer o download da versão desejada, modificando o
endereço do atributo “src”.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

 DICA

Não é necessário incorporar todas as versões demonstradas no fragmento. O exemplo serve

apenas para mostrar as
diferentes versões e os tamanhos disponíveis. Na prática, escolha uma
versão e um tamanho e incorpore apenas o arquivo
relacionado.

No fragmento anterior, foi utilizada a versão 3.5.1. Como mencionado, é possível utilizar
versões anteriores. Nesse
caso, tome os cuidados necessários para garantir que os recursos
utilizados em sua página possuam suporte em versões
mais recentes, se, em algum momento,
decidir atualizar a versão.

A seguir, veremos alguns recursos jQuery relacionados à árvore DOM e a seletores.

MANIPULANDO A ÁRVORE DOM
A árvore DOM (Modelo de Objeto de Documento.) disponibiliza uma representação
estruturada do documento HTML em formato de árvore. Logo, a partir desse
modelo, temos
acesso a qualquer elemento de uma página.

A biblioteca jQuery fornece vários recursos para manipulação do DOM. Veremos alguns desses
recursos a seguir.

Fonte: Anônimo / W3C

 Árvore DOM.

SELECIONANDO ELEMENTOS

Com jQuery, podemos referenciar qualquer elemento da página HTML utilizando o objeto:

$(SELETOR)

Ao analisar a sintaxe acima, temos o método $(), que recebe como parâmetro um seletor. Tal
seletor pode ser um elemento DOM, um array contendo um conjunto de elementos DOM ou um
objeto. Veja o código a seguir:
<!doctype html>

<head>

<title>jQuery</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p id="paragrafo_texto">Texto do parágrafo</p>

<ul>

<li class="item_lista">Primeiro item</li>

<li class="item_lista">Segundo item</li>

<li class="item_lista">Terceiro item</li>

</ul>

//imprimirá Texto do parágrafo

console.log($("#paragrafo_texto").html());

//imprimirá Primeiro item

console.log($('.item_lista').eq(0).html());

</script>

</body>

</html>

Agora, vamos analisar as instruções do código:

PRIMEIRA INSTRUÇÃO
SEGUNDA INSTRUÇÃO

PRIMEIRA INSTRUÇÃO

Na primeira instrução “console.log”, o atributo “id” da tag <p> foi passado como seletor.
Perceba que, nesse caso, o
nome do identificador foi precedido pelo símbolo “#”. Além disso,
ambos foram englobados por aspas duplas.
SEGUNDA INSTRUÇÃO

Já na segunda instrução “console.log”, foi passado como seletor o nome da classe atribuída
aos elementos <li>. Nesse
caso, para referenciar classes, utilizamos o “.” antes do nome delas.
Além disso, foram utilizadas aspas simples –
essas últimas só para demonstrar que podem ser
utilizadas as aspas duplas e as aspas simples. Por fim, na segunda
instrução, foi utilizado o
método “eq”, que recebeu como parâmetro o número 0. Ou seja, foi selecionado o primeiro
elemento ao qual foi atribuída a classe “item_lista”. Cabe destacar ainda que, para acessar o
conteúdo das tags, foi
utilizado o método “html()”.

Vejamos outra forma de selecionar elementos. Nesse caso, utilizaremos o método “:not”.
Vamos ao código:

<!doctype html>

<head>

<title>jQuery</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p id="paragrafo_texto">Texto do parágrafo</p>

<ul>

<li class="item_lista">Primeiro item</li>

<li class="item_lista">Segundo item</li>

<li>Terceiro item</li>

</ul>

//imprimirá Terceiro item

console.log($('li:not(.item_lista)').html());

</script>

</body>

</html>

Veja que selecionamos o único elemento <li> que não possui a classe “item_lista”.
Esses foram exemplos simples de como é possível selecionar elementos da árvore DOM
utilizando jQuery.

ADICIONANDO E REMOVENDO ELEMENTOS

Existem alguns métodos jQuery que permitem a inserção e a remoção de elementos na Árvore
DOM. Veja alguns exemplos:

<!doctype html>

<head>

<title>jQuery</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<div>

<h1>Título na primeira div</h1>

</div>

<div>

<h2>Subtítulo na segunda div</h1>

</div>

<li class="item_lista">Primeiro item</li>

<li class="item_lista">Segundo item</li>

<li>Terceiro item</li>

</ul>

//Adicionando um novo item <li> ao final, dentro da tag <ul> com identificador "container_lista"

$('#container_lista').append('<li>Quarto Item</li>');

//Adicionando uma tag <p> após cada tag <h1> e <h2>

$('h1,h2').after('<p>Texto do parágrafo inserido após cada tag h1 e h2 </p>');

//Adicionando uma tag <h3> antes da tag <ul> com identificador "container_lista"

$('#container_lista').before('<h3>Subtítulo da Lista não ordenada</h3>');

</script>

</body>

</html>

Para ver o resultado dos métodos utilizados, copie o código, salve-o como arquivo “html” e
abra-o no navegador. Compare
a estrutura inicial do código HTML e veja que, através dos
métodos jQuery, novos elementos foram adicionados ao
documento. Além disso, verifique
também como ficou a árvore DOM após as modificações em questão no inspecionador de
elementos.

 ATENÇÃO

Leia os comentários constantes no próprio código, onde são passados mais detalhes sobre os
métodos utilizados. Repare
também que, junto com o método “after”, foi utilizado um novo tipo
de seletor, o seletor múltiplo.

Veja como remover elementos de forma dinâmica, ou seja, removeremos, em tempo de

execução, alguns elementos inicialmente
presentes no documento HTML. Para isso,
utilizaremos o código HTML resultante do código anterior.

<!doctype html>

<head>

<title>jQuery</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<div>

<h1>Título na primeira div</h1>

<p>Texto do parágrafo inserido após cada tag h1 e h2 </p>

</div>

<div>

<h2>Subtítulo na segunda div</h2>

<p>Texto do parágrafo inserido após cada tag h1 e h2 </p>

</div>

<h3 class="item_lista">Subtítulo da Lista não ordenada</h3>

<li class="item_lista">Primeiro item</li>

<li class="item_lista">Segundo item</li>

<li>Terceiro item</li>

<li>Quarto Item</li>

</ul>

//Removendo o último parágrafo da página

//Para acessar o primeiro elemento, utilizamos 0. Já para acessar o último, usamos -1

$('p').eq(-1).remove();

//Removendo apenas os elementos <li> com a classe "item_list"

//Repare que a tag <h3> também possui esse classe

$('li.item_lista').remove();

</script>

</body>

</html>

MANIPULANDO CONTEÚDO DE ELEMENTOS DO

DOM
Neste vídeo, o Professor Alexandre Paixão demonstrará a manipulação de conteúdo de
elementos do DOM usando JQuery.

 DICA

Copie o código e salve-o como um arquivo “html”. A seguir, comente o código Javascript e
carregue a página no navegador.
Em sequência, retire o comentário linha a linha, salve e
recarregue a página. Dessa forma, você conseguirá ver melhor a
diferença entre o conteúdo
original e o conteúdo após as manipulações realizadas.

VERIFICANDO O APRENDIZADO

1. ASSINALE A ALTERNATIVA QUE CORRESPONDE AO CÓDIGO QUE,

FAZENDO USO DO FRAMEWORK JQUERY, PERMITE ADICIONAR UMA
TAG <H1>, CONTENDO O TEXTO “TÍTULO INICIAL”, COMO PRIMEIRO
ELEMENTO DENTRO DA TAG <BODY>, CONSIDERANDO O FRAGMENTO
DE CÓDIGO HTML ABAIXO.

<!DOCTYPE HTML>

<TITLE>PÁGINA HTML</TITLE>

</HEAD>

<BODY>

<P>
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
SED JUSTO IPSUM, RHONCUS AT ORCI VEL, ALIQUAM CONSEQUAT
LOREM. INTEGER CONGUE ENIM QUIS SEMPER MATTIS. AENEAN
AUGUE LIBERO, MAXIMUS ET ODIO NEC, MALESUADA TRISTIQUE
FELIS. DONEC DIGNISSIM LIBERO ID PULVINAR FAUCIBUS. PHASELLUS
BLANDIT JUSTO QUAM. INTEGER EX MASSA, RHONCUS EU LIBERO
QUIS, FERMENTUM FEUGIAT ODIO. SED TELLUS PURUS, FERMENTUM
AC EUISMOD ET, MATTIS AT NUNC. NUNC NISL LEO, DAPIBUS EGET
LOREM ID, CONGUE LOBORTIS IPSUM.
</P>

</DIV>

</BODY>

</HTML>

A) $( 'h1' ).first().html("Título inicial").</p>

B) $( 'body' )[0].append(‘<h1>Título inicial</h1>’).</p>

C) $( 'body' ).find(‘h1’)[0].append(‘<h1>Título inicial</h1>’).</p>

D) $( 'body' ).before(‘<h1>Título inicial</h1>’).</p>

2. ATRAVÉS DO FRAMEWORK JQUERY, É POSSÍVEL MANIPULAR OS

ELEMENTOS DA ÁRVORE DOM E O SEU CONTEÚDO. NESSE
CONTEXTO, ASSINALE A AFIRMATIVA QUE DEMONSTRA COMO
REMOVER O CONTEÚDO DE TODAS AS TAGS <P> DE UMA PÁGINA
HTML.

A) $(‘p’).find(text) = null.
B) $(body).text() = ‘’.

C) $(‘p’).html(‘’).

D) $(‘p’).val(‘’).

GABARITO

1. Assinale a alternativa que corresponde ao código que, fazendo uso do Framework

jQuery, permite adicionar uma tag <h1>, contendo o texto “Título inicial”, como primeiro
elemento dentro da tag <body>, considerando o fragmento de código HTML abaixo.

<!doctype html>

<title>Página HTML</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo ipsum, rhoncus at
orci vel, aliquam consequat lorem. Integer congue enim quis semper mattis. Aenean
augue libero, maximus et odio nec, malesuada tristique felis. Donec dignissim libero id
pulvinar faucibus. Phasellus blandit justo quam. Integer ex massa, rhoncus eu libero
quis, fermentum feugiat odio. Sed tellus purus, fermentum ac euismod et, mattis at nunc.
Nunc nisl leo, dapibus eget lorem id, congue lobortis ipsum.
</p>

</div>

</body>

</html>

A alternativa "D " está correta.

O Framework jQuery possui vários métodos para a inclusão e remoção de elementos na árvore
DOM. Entre tais métodos, o método append adiciona uma nova tag ao final do seletor indicado.
Já o método before adiciona um novo elemento no início do seletor definido.

2. Através do Framework jQuery, é possível manipular os elementos da árvore DOM e o

seu conteúdo. Nesse contexto, assinale a afirmativa que demonstra como remover o
conteúdo de todas as tags <p> de uma página HTML.

A alternativa "C " está correta.

Utilizando jQuery e combinando seus seletores e métodos, há diversas formas de acessar e

manipular os elementos HTML e o seu conteúdo. Em relação às propriedades, os textos
inseridos dentro das tags, como as tags de parágrafo, podem ser acessados através do
método “html()”. Por outro lado, os valores dos campos input de um formulário são acessados
através do método “val()”.

MÓDULO 3

 Analisar como trabalhar com eventos com o

Framework jQuery

Os eventos, no ambiente web, correspondem às ações realizadas pelos usuários em um

elemento da página, como o clique ou
o passar do mouse em um link, a seleção de opções ou
a submissão de um formulário. Temos, então, eventos associados e
acionados pela utilização
do mouse e do teclado. Até mesmo o carregamento da página é um evento. Nesse contexto,
existem
alguns termos muito comuns associados a eventos, como:

FIRE/FIRED

Associado ao momento em que um evento é “disparado”.

LISTENER

Associado ao ato de “ouvir”, monitorar, um elemento à espera do disparo de um evento.

HANDLER
Associado à ação de manipular determinado evento.

Embora seja possível tratar todos os eventos utilizando apenas Javascript, tal processo se
torna mais intuitivo e
simples ao fazermos uso de jQuery. A seguir, veremos como manipular e
tratar eventos em uma página HTML com essa
biblioteca.

Fonte: gubernat / Shutterstock

EVENTOS ONLOAD E WINDOW.ONLOAD

O evento onload ocorre quando um objeto, em uma página HTML, termina de ser carregado.
Tal evento é normalmente
utilizado na tag

<body>, tornando possível que determinada ação seja realizada através de funções JS,
quando a tag em questão
terminar de
carregar. Isso implica dizer que todas as imagens, scripts
e arquivos CSS já foram carregados. Tal evento também
pode ser utilizado com outras tags,
como <frame>, <iframe>, <img>, <input type=’image’>,
<link>,
<script> e<style>.

O fragmento abaixo demonstra um exemplo de sua utilização, onde um alerta é exibido na tela
assim que o < body >
terminar de ser carregado.

<!doctype html>

<head>

<title>Evento onload</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body onload="alert('O <body> terminou de ser carregado')">

</body>

</html>

Assim como o evento onload, o evento window.onload ocorre quando determinado conteúdo é
completamente carregado. Em JS,
o objeto window está relacionado à janela do navegador –
que contém um elemento DOM. Já o objeto document está
relacionado ao DOM carregado na
janela em questão. Portanto, o evento window.onload também é disparado quando todo o
conteúdo da página é carregado.

 DICA

Tendo em vista que a utilização do evento onload associado à tag

produz o mesmo resultado
que o uso do evento window.onload, deve-se dar preferência ao segundo. Com isso,
separamos a estrutura, no caso do

Veja como utilizar o evento window.onload:

<!doctype html>

<head>

<title>Eventow window.load e document.load</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo ipsum, rhoncus at orci
vel, aliquam
consequat lorem. Integer congue enim quis semper mattis. Aenean augue libero,
maximus et odio nec, malesuada
tristique felis. Donec dignissim libero id pulvinar faucibus.
Phasellus blandit justo quam. Integer ex
massa, rhoncus eu libero quis, fermentum feugiat odio.
Sed tellus purus, fermentum ac euismod et, mattis at
nunc. Nunc nisl leo, dapibus eget lorem id,
congue lobortis ipsum.
</p>

</div>

window.onload = function () {

alert('Evento window.load disparado');

</script>

</body>

</html>

O EVENTO JQUERY $(DOCUMENT).READY()

Como vimos anteriormente, o evento window.load é disparado quando todo o conteúdo da
página é carregado. Em muitas
situações, desejamos alterar o comportamento de tal conteúdo
e, para isso, precisamos acessá-los antes que o
carregamento termine. Para essa função,
temos o evento jQuery $(document).ready() – que pode ser abreviado como:

$(FUNCTION(){ ... });

Através desse evento, podemos ter acesso à página assim que a árvore DOM (tags HTML)
estiver disponível, o que ocorre
antes que todo o conteúdo seja carregado. Vejamos um
exemplo simples com o evento em questão:

<!doctype html>

<head>

<title>Eventos window.onload e $(document).ready()</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo ipsum, rhoncus at orci
vel, aliquam
consequat lorem. Integer congue enim quis semper mattis. Aenean augue libero,
maximus et odio nec, malesuada
tristique felis. Donec dignissim libero id pulvinar faucibus.
Phasellus blandit justo quam. Integer ex
massa, rhoncus eu libero quis, fermentum feugiat odio.
Sed tellus purus, fermentum ac euismod et, mattis at
nunc. Nunc nisl leo, dapibus eget lorem id,
congue lobortis ipsum.
</p>

<img src="https://picsum.photos/id/0/367/267" />

<img src="https://picsum.photos/id/1/367/267" />

<img src="https://picsum.photos/id/10/367/267" />

<img src="https://picsum.photos/id/100/367/267" />

<img src="https://picsum.photos/id/1000/367/267" />

</div>

window.onload = function () {

alert('Evento window.load disparado');

$(function () {

//$('div p').before('<h1>Lorem Ipsum</h1>')

alert('Evento document.ready disparado');

});

</script>

</body>

</html>

Para ver, na prática, a diferença entre os momentos em que os eventos window.load e

$(document).ready() são disparados,
copie o código anterior, salve-o em um arquivo HTML e
abra-o no navegador. Veja que o alerta do evento jQuery será
disparado primeiro, antes de as
imagens serem carregadas na página e que, somente após as imagens serem carregadas,
será
disparado o evento window.load.


SAIBA MAIS

Na biblioteca jQuery, também está disponível uma implementação do evento window.load, o $(

window ).on(“load”, function
() { ... }) .

OS EVENTOS CLICK() E ON()

Esse evento vincula um manipulador (handler) ou disparador (trigger) ao evento Javascript
“click”. A ação relacionada a
esse evento é disparada quando o botão do mouse é pressionado
e, a seguir, liberado, sobre um elemento na página. Cabe
destacar que qualquer elemento
pode receber tal evento. Veja sua sintaxe em um exemplo prático:

<!doctype html>

<head>

<title>Evento click</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<ul>

</ul>

$('ul li').click(function () {

console.log('Conteúdo do item da lista: ' + $(this).text());

});

//Adicionando, dinamicamente, um novo elemento <li> à lista

$('ul').append('<li>Item 6</li>');

</script>

</body>

</html>

O exemplo anterior, além de demonstrar o evento click em ação, adiciona um novo elemento,
dinamicamente, à lista
original, contida no próprio HTML. Teste o código no navegador. Repare
que, ao clicar do primeiro ao quinto elemento,
será exibido, no inspecionador de elementos,
aba console, o conteúdo da tag <li>. Entretanto, o mesmo não acontece no
item adicionado
dinamicamente, o “Item 6”. Isso ocorre porque o evento click só reconhece os elementos já
existentes
na página. Para adicionar o evento de “clique” ao último elemento, é necessário
utilizar outro evento, que veremos a
seguir.

DIFERENÇA ENTRE OS EVENTOS CLICK E ON

Neste vídeo, o Professor Alexandre Paixão demonstra na prática a diferença entre os eventos
click e on.

No exemplo abordado no vídeo, utilizamos, no lugar do evento click, o evento on, que é
responsável por anexar uma função
de manipulação de eventos para um ou mais eventos aos
elementos selecionados. No contexto apresentado, a diferença entre
o click e o on é que o
primeiro é restrito ao DOM inicial, e o segundo, usando delegação, é válido também para novos
elementos adicionados ao DOM. Por fim, cabe destacar que o evento on não é limitado a lidar
apenas com o evento click.
Ele pode ser usado com outros eventos, como o submit – evento
disparado quando um formulário HTML é submetido, por
exemplo.

EVENTOS DE TECLADO E MOUSE

Em jQuery, estão disponíveis alguns eventos relacionados ao teclado e ao mouse. É possível
manipular, por exemplo, o
evento disparado quando determinada tecla é pressionada ou os
eventos de mouseover (Quando passamos o mouse sobre um elemento.) , entre outros.
Veja,
na prática,
alguns desses exemplos. Para obter a lista completa, consulte a documentação da
biblioteca.
<!doctype html>

<head>

<title>Eventos de teclado e mouse</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<ul>

</ul>

<form>

<input type="text" name="inpt" id="inpt" />

</form>

//Evento mouseover

$('ul').on('mouseover', 'li', function () {

console.log('Conteúdo do item da lista: ' + $(this).text());

});

//Evento mouseleave

$('ul').on('mouseleave', 'li', function () {

console.log('O mouse não está mais sobre o elemento da lista');

});

//Evento keypress

$('#inpt').keypress(function (event) {

event.preventDefault();

console.log('A tecla pressionada foi: ' + event.which);

});

</script>

</body>

</html>

No exemplo anterior, foram aplicados os eventos mouseover e mouseleave sobre os elementos

da lista. Veja, no console, no
inspecionador de elementos, os logs sendo registrados conforme
você passa o mouse sobre os elementos da lista e quando
você tira o mouse desses
elementos. Por último, o evento keypress foi vinculado ao input do formulário. Nesse caso,
pressione algumas teclas e a tecla enter, estando no campo input, e veja o resultado no
console. Aqui, é exibido o
código ASCII referente à tecla pressionada. Isso é útil quando
precisamos, por exemplo, saber se determinada tecla foi
pressionada.

CÓDIGO ASCII

American Standard Code for Information Interchange ou Código Padrão Americano para
Intercâmbio de Informação. É um
código binário que codifica um conjunto de caracteres
referentes às letras do alfabeto latino, sinais de pontuação,
sinais matemáticos e sinais
de controle.

MÉTODO PREVENTDEFAULT()
Embora não seja um evento, é importante falar sobre esse método. A sua função é, quando
chamado, impedir que a ação
padrão de um evento não seja disparada. Vamos à prática: copie
o código a seguir, salve-o e abra-o no navegador.

<!doctype html>

<head>

<title>Método preventDefault</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>

<a id="lnk" href="outra-pagina.html">Link para outra página</a>

</p>

<input type="text" name="inpt" id="inpt" />

<input type="submit" name="inpt_sbmt" id="inpt_sbmt" value="Enviar o Formulário" />

</form>

//Click do link

$('#lnk').click(function (event) {

event.preventDefault();

console.log('Nada aconteceu ao clicar no link');

});

//Click do botão do formulário

$('#inpt_sbmt').click(function (event) {

event.preventDefault();

console.log('Nada aconteceu ao clicar no botão do formulário');

});

</script>

</body>

</html>

O comportamento normal do link ao ser clicado é abrir a página contida no atributo “href”. Já o
comportamento esperado
do botão de submissão do formulário é navegar para o local definido
no seu atributo action.
VOCÊ NOTOU QUE NENHUMA DESSAS AÇÕES
PADRÃO FOI EXECUTADA?
POR QUE ISSO
ACONTECE?

É para isso que serve o método event.preventDefault(), para impedir que a ação default de
determinado evento seja
executada. Sua utilidade, na prática, é diversa, uma vez que nos
permite não só impedir o comportamento normal, mas
definir outro comportamento para os
eventos. Um exemplo: você pode usá-lo para submeter os dados de um formulário via
AJAX,
impedindo que a página seja recarregada e que, por padrão, a submissão do formulário o leve
a outra página.

A seguir, veremos, de forma prática, repassando inclusive alguns dos conceitos já vistos até
aqui, como utilizar a
biblioteca jQuery para realizar requisições AJAX.

VERIFICANDO O APRENDIZADO

1. EM ALGUMAS SITUAÇÕES, PODE SER NECESSÁRIO MANIPULAR OS

ELEMENTOS OU O CONTEÚDO DA PÁGINA ANTES QUE ELES SEJAM
APRESENTADOS AO USUÁRIO. NESSE SENTIDO, ASSINALE A
ALTERNATIVA QUE CORRESPONDA AO EVENTO QUE DEVE SER
UTILIZADO PARA MANIPULAÇÃO DA PÁGINA HTML ANTES QUE SEU
CONTEÚDO (IMAGENS, TEXTOS ETC.) SEJA TOTALMENTE
CARREGADO.

A) document.load.

B) $(document.load)().

C) window.onload.

D) $(document).ready().
2. A PARTIR DO CÓDIGO A SEGUIR, É DESEJADO QUE, AO SER
CLICADO, O LINK “EXIBIR ALERTA” APENAS EXIBA NA TELA UMA
CAIXA DE DIÁLOGO (ALERT), SEM, ENTRETANTO, LEVAR O USUÁRIO À
PÁGINA INDICADA EM SEU ATRIBUTO HREF (PAGINA.HTML). ASSINALE
A ALTERNATIVA CORRESPONDENTE AOS CÓDIGOS QUE PREENCHEM
AS LACUNAS E QUE DEVERÃO SER UTILIZADOS PARA REALIZAR ESSA
TAREFA.

<!DOCTYPE HTML>

<TITLE>PÁGINA HTML</TITLE>

</HEAD>

<BODY>

<P>
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
</P>

</DIV>

$(FUNCTION() {

$( '#LIPSUM' ).APPEND("<A ID='LINK_ALERTA'

HREF='PAGINA.HTML'>EXIBIR ALERTA</A>");

$('#_ _ _ _ _')._ _ _ _ _(' _ _ _ _ _ ', FUNCTION(EVENT){

_ _ _ _.PREVENTDEFAULT();

ALERT('O NOVO LINK FOI CLICADO');

});

</SCRIPT>

</BODY>

</HTML>

A) lipsum/ click/ link_alerta/ prevent.

B) link_alerta/ on/ click/ event.

C) link_alerta/ click / on / event.

D) lipsum / link_alerta/ click/ event.

GABARITO

1. Em algumas situações, pode ser necessário manipular os elementos ou o conteúdo da

página antes que eles sejam apresentados ao usuário. Nesse sentido, assinale a
alternativa que corresponda ao evento que deve ser utilizado para manipulação da
página HTML antes que seu conteúdo (imagens, textos etc.) seja totalmente carregado.

A alternativa "D " está correta.

O evento nativo JS window.onload ocorre quando todo o conteúdo da página é carregado. Por
outro lado, jQuery implementa um evento que permite manipular os elementos da página após
a árvore DOM ser carregada (e antes do conteúdo ser carregado). Trata-se do
$(document).ready(), que pode ser usado em sua forma simplificada: $(function(){}).

2. A partir do código a seguir, é desejado que, ao ser clicado, o link “Exibir alerta”
apenas exiba na tela uma caixa de diálogo (alert), sem, entretanto, levar o usuário à
página indicada em seu atributo href (pagina.html). Assinale a alternativa
correspondente aos códigos que preenchem as lacunas e que deverão ser utilizados
para realizar essa tarefa.

<!doctype html>

<title>Página HTML</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

</div>

$(function() {

$( '#lipsum' ).append("<a id='link_alerta' href='pagina.html'>Exibir alerta</a>");

$('#_ _ _ _ _')._ _ _ _ _(' _ _ _ _ _ ', function(event){

_ _ _ _.preventDefault();

alert('O novo link foi clicado');

});

</script>

</body>

</html>

A alternativa "B " está correta.

O método preventDefault impede que a ação padrão de um evento seja disparada. Logo,
quando associado, por exemplo, ao evento de click de um link – cuja ação padrão é carregar a
página indicada pelo atributo href –, esse método faz com que a nova página não seja
carregada. Em relação aos links e demais elementos de uma página, é possível, através de
jQuery, associá-los ao evento de click, onde várias instruções podem ser executadas. Para
isso, podemos usar o evento click() e o evento on(), diferindo esse último do primeiro pelo fato
de poder ser associado a elementos DOM não constantes na árvore inicial, ou seja, elementos
posterior e dinamicamente adicionados.

MÓDULO 4

 Empregar requisições AJAX com o Framework

jQuery

Este módulo terá caráter eminentemente prático, possibilitando que, ao analisar e utilizar cada
código apresentado, você
consiga realizar requisições AJAX com jQuery.
 ATENÇÃO

Embora seja prático, este módulo apresentará alguns conceitos básicos necessários a um
melhor aproveitamento e
entendimento dos códigos apresentados..

O QUE É AJAX?
Essa sigla significa Asynchronous Javascript and XML ou Javascript e XML Assíncronos.
Separando os termos que a compõem,
temos:

Isso implica na submissão de requisições, a partir de uma página web, sem interrupção em seu
fluxo. Em outras palavras,
a partir de requisições assíncronas, é possível requisitar recursos
remotos, transferir dados e utilizá-los na página
sem a necessidade de recarregá-la.

A INTERFACE JQUERY.AJAX()
Para realizar requisições assíncronas através de jQuery, fazemos uso da interface
jQuery.ajax(). A sintaxe desse método,
como visto a seguir, é composta pela URL para a qual
submeteremos a requisição e por um parâmetro, no formato de objeto,
que contém
informações adicionais relacionadas à requisição.
JQUERY.AJAX(URL[, SETTINGS])

Veja a seguir o primeiro exemplo, em que será demonstrado o código do lado cliente, que
deverá ser salvo como arquivo
html. Leia com atenção os comentários inseridos no próprio
código, no qual há explicações adicionais. Veja ainda que a
url de destino não existe. Logo,
para tornar o exemplo real, substitua a url em questão por uma real.

<!doctype html>

<head>

<title>Requisições AJAX com jQuery</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>

<a id="lnk" href="javascript:void(0);">Executar a requisição AJAX</a>

</p>

//Click do link

$('#lnk').click(function () {

$.ajax({

url: "url/recurso",

type: 'post',

beforeSend: function () {

//A função beforeSend é chamada antes da requisição ser submetida.

//Dependendo da velocidade do retorno da requisição, a msg abaixo pode não chegar

// a ser exibida

$("#resultado").html("Carregando...");

})

.done(function (msg) {

//Em caso de sucesso, mostra na div #resultado o retorno da requisição

$("#resultado").html(msg);

})

.fail(function (jqXHR, textStatus, msg) {

//Em caso de fracasso, mostra no console a mensagem de erro retornada

console.log('A requisição falhou e retornou com a seguinte mensagem: ' + msg);

});

</script>

</body>

</html>

Como a url utilizada não existe, você poderá ver o erro retornado em caso de falhas (.fail) no
console do inspecionador
de elementos.

Esse primeiro exemplo foi bastante simples e serviu para apresentar como realizar uma
requisição básica. No próximo
exemplo, veremos como enviar dados na requisição e a
subterremos para uma url real – um serviço online que responde a
requisições AJAX. Vamos
ao código:

<!doctype html>

<head>

<title>Requisições AJAX com jQuery</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>

<a id="lnk" href="javascript:void(0);">Executar a requisição AJAX</a>

</p>

//Click do link

$('#lnk').click(function () {

$.ajax({

url: "https://reqres.in/api/users",

type: 'post',

data: {

name: "Jose Maria",

movies: ["Sem igual", "Incomparável"]

beforeSend: function () {

//A função beforeSend é chamada antes da requisição ser submetida.

//Dependendo da velocidade do retorno da requisição, a msg abaixo pode não chegar

// a ser exibida

$("#resultado").html("Carregando...");

})

.done(function (msg) {

//Em caso de sucesso, mostra na div #resultado o retorno da requisição

//console.log('Retorno: ' + JSON.stringify(msg) );

//console.dir(msg);

//Assim como o método $.each, esse método percorre um array

$.map(msg["movies[]"] , function( val, i ) {

console.log(val);

});

var content = '';

$.each(msg["movies[]"], function (index, value) {

content += value + ' - ';

});

$("#resultado").html('Nome: ' + msg.name + '<br/>' + 'Filmes: ' + content + '<br/>' + 'Id: ' +
msg.id + '<br/>' + 'Data de Criação: ' + msg.createdAt);

})

.fail(function (jqXHR, textStatus, msg) {

//Em caso de fracasso, mostra no console a mensagem de erro retornada

console.log('A requisição falhou e retornou com a seguinte mensagem: ' + msg);

});

</script>

</body>

</html>

Alguns comentários importantes sobre o código acima:

Fonte: Ollie The Designer / Shutterstock

A exemplo do código anterior, é realizada uma requisição AJAX, utilizando o método HTTP
POST.

Fonte: Ollie The Designer / Shutterstock

A URL para a qual a requisição foi submetida pertence a um serviço online que pode responder
a diversos tipos de
requisição. Em nosso caso, foi criado um recurso e, a seguir, tal recurso foi
devolvido como resposta à solicitação.

Fonte: Ollie The Designer / Shutterstock

O atributo “data” foi utilizado para enviar dados para a URL requisitada. Foram passadas uma
string, name, e um array,
movies.

Fonte: Ollie The Designer / Shutterstock

Os dados recebidos em resposta à requisição vieram no formato JSON, sendo armazenados

na variável “msg”. Tais resultados
foram acessados através da notação de objetos –
“objeto.atributo” e concatenados para serem inseridos dentro da <div>
onde foram exibidos na
página.

JSON

O Javascript Object Notation é um formato leve para armazenamento e troca de dados

muito utilizado em aplicações web.

Fonte: Ollie The Designer / Shutterstock

Entre os dados retornados, merece destaque o atributo “movies”, por se tratar de um array.
Veja no código que há dois
métodos, tendo um permanecido comentado, para tratar esse tipo
de estrutura: o $.map e o $.each.

A biblioteca jQuery possui ainda dois outros métodos para realização de requisições AJAX:

$.GET()

Permite que sejam feitas requisições utilizando o método HTTP GET.

$.POST()

Permite requisições HTTP POST.

Além disso, através do segundo, é possível ainda enviar dados na requisição. A sintaxe de
ambos pode ser vista nos
exemplos a seguir:

//Sintaxe: $.get(URL,callback);

$.get("/url/recurso", function(data, status){

alert("Dados Retornados: " + data + "\nStatus: " + status);

});

//Sintaxe: $.post(URL,data,callback);

$.post("/url/recurso", {id: 1, order: "asc"} function(data, status){

alert("Dados Retornados: " + data + "\nStatus: " + status);

});

APRIMORANDO O CONHECIMENTO
Antes de continuarmos, vamos praticar o que vimos até aqui. Para isso, tomando como base
os códigos anteriores, construa
uma página HTML que faça uso do Framework jQuery para
requisitar, usando AJAX, um (ou os dois, caso queira) dos recursos
abaixo:

Recurso 1

Recurso 2

O resultado da requisição deverá ser tratado e exibido na própria página. Use sua imaginação
para melhor apresentar os
dados: utilize tabelas, listas, o que achar melhor, mas lembre-se de
que jQuery possui funções que vão ajudá-lo nesse
processo. Releia o que vimos até aqui como
ponto de partida.

Tenha atenção ao ler a documentação de cada serviço, uma vez que eles indicam qual o
método HTTP a ser utilizado em cada
requisição: se POST, GET etc. Usar o método errado
pode levar à obtenção do resultado errado ou a resultado nenhum.

RESOLUÇÃO - RECURSO 1
Código base da url/serviço “a)”:

<!doctype html>

<head>

<title>Requisições AJAX com jQuery (Reqres - List Users)</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>

<a id="lnk" href="javascript:void(0);">Executar a requisição AJAX</a>

</p>

//Click do link

$('#lnk').click(function () {

$.ajax({

url: "https://reqres.in/api/users?page=2",

type: 'get',

beforeSend: function () {

//A função beforeSend é chamada antes da requisição ser submetida.

//Dependendo da velocidade do retorno da requisição, a msg abaixo pode não chegar

// a ser exibida

$("#resultado").html("Carregando...");

})

.done(function (msg) {

//Em caso de sucesso, mostra na div #resultado o retorno da requisição

var table = "<table border='1'>";

table += '<tr><th>Id</th><th>Email</th><th>Nome</th><th>Sobrenome</th><th>Avatar</th>
</tr>';

$.map(msg.data, function (val, i) {

table += '<tr>' + '<td>' + val.id + '</td>' + '<td>' + val.email +
'</td>' + '<td>' + val.first_name + '</td>' + '<td>' + val.last_name + '</td>' + '<td>' + val.avatar
+ '</td>' + '</tr>';
});

table += "</table>"

$("#resultado").html("");

$("#resultado").append(table);

})

.fail(function (jqXHR, textStatus, msg) {

//Em caso de fracasso, mostra no console a mensagem de erro retornada

console.log('A requisição falhou e retornou com a seguinte mensagem: ' + msg);

});

</script>

</body>

</html>

RESOLUÇÃO - RECURSO 2

Código base da url/serviço “b)”:

<!doctype html>

<head>

<title>Requisições AJAX com jQuery (Jsonplaceholder - Posts)</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>

<p>

<a id="lnk" href="javascript:void(0);">Executar a requisição AJAX</a>

</p>

//Click do link

$('#lnk').click(function () {

$.ajax({

url: "https://jsonplaceholder.typicode.com/posts",

type: 'get',

beforeSend: function () {

//A função beforeSend é chamada antes da requisição ser submetida.

//Dependendo da velocidade do retorno da requisição, a msg abaixo pode não chegar

// a ser exibida

$("#resultado").html("Carregando...");

})

.done(function (msg) {

//Em caso de sucesso, mostra na div #resultado o retorno da requisição

// Nesse caso, não se tratando do código completo a ser construído pelos alunos,

// o objeto JSON retornado foi simplesmente transformado numa string

$("#resultado").html(JSON.stringify(msg));

})

.fail(function (jqXHR, textStatus, msg) {

//Em caso de fracasso, mostra no console a mensagem de erro retornada

console.log('A requisição falhou e retornou com a seguinte mensagem: ' + msg);

});

</script>

</body>

</html>

UTILIZANDO JQUERY, AJAX E

FORMULÁRIOS
A combinação desses três componentes – jQuery, AJAX e formulários – é muito comum em
páginas web: formulários para
subscrição em newsletter ou cadastro e, sobretudo, filtro de
listagens, como listas de produtos em sites de e-commerce,
por exemplo.
Veremos, de forma prática com o Professor Alexandre Paixão, como combinar esses três
componentes. Para melhor separação
e entendimento, os códigos foram separados em três:
HTML, Javascript e JSON. Para executá-los, copie esses três arquivos
do pacote que você
encontrou no início deste tema e salve todos em uma mesma pasta.

HTML

O arquivo contém o código HTML, alguns códigos CSS (que também poderiam ficar em
um arquivo externo) e incorpora os
scripts JS. Salve esse arquivo com o nome que
desejar, com a extensão “.html”.

JAVASCRIPT

Nesse arquivo, estão todas as funções e os códigos responsáveis por carregar o arquivo
JSON, montar a tabela HTML e
filtrar os dados. Tudo isso utilizando jQuery – olhe com
atenção o código, pois algumas funções não vistas anteriormente
foram usadas. A
sintaxe e o papel delas são autoexplicativos de acordo com o contexto em que foram
aplicadas e em razão
dos resultados que produziram. Salve esse arquivo como
“scripts.js”.

JSON

Esse arquivo contém alguns dados – id, fabricante, modelo, ano, cor e valor –
relacionados a veículos. Salve-o como
“json_data.json”.

CONSIDERAÇÕES ADICIONAIS SOBRE OS

CÓDIGOS UTILIZADOS

Finalizando este tema, cabem algumas considerações sobre os códigos utilizados ao longo
dele – em especial aos
relacionados ao tópico atual, no qual integramos jQuery, AJAX e HTML,
também englobando os conceitos vistos ao longo dos
demais módulos:

SELETORES JQUERY
Vários seletores foram usados para acessar os elementos e seus atributos. Por exemplo: no
filtro de fabricante, foi
verificado se um elemento radio estava marcado acessando sua
propriedade “checked”.
EVENTOS PARA MANIPULAÇÃO DO DOM
Usando o método append, por exemplo, o conteúdo JSON, consumido via AJAX, foi
incorporado à página HTML.

VALIDAÇÃO DE DADOS
Alguns dados do formulário foram validados com a propriedade jQuery “val()”, que contém o
valor dos elementos do
formulário. Tal validação pode ser vista no filtro por ano.

OUTROS EVENTOS E MÉTODOS JQUERY UTILIZADOS

$.map: para iteração em array – em nosso exemplo, foi usado para manipular os dados
JSON e construir as linhas e
colunas da tabela HTML.

filter: para filtrar dados – em nosso exemplo, foi usado no filtro de anos;

:contains e :not(:contains): para filtrar o conteúdo de elementos – em nosso exemplo, foi

utilizado nos filtros por
modelo e fabricante.

show e hide: para mostrar ou esconder elementos HTML – em nosso exemplo, foi
utilizado para mostrar e esconder os
dados de acordo com os filtros aplicados.

Por fim, é importante ainda destacar que, embora tenha sido produzido um resultado bastante
funcional através das
técnicas empregadas, há uma série de outras possibilidades que não
foram implementadas ou exploradas nos códigos
desenvolvidos. A seguir, algumas dessas
oportunidades de melhoria no código serão apresentadas.

COMPONENTES RICOS E FILTROS ADICIONAIS

Nos exemplos, foram utilizados alguns filtros que não cobriram todas as possibilidades,
considerando os dados
disponíveis. Por exemplo: não foram implementados filtros por cor e
valor. Além disso, uma funcionalidade importante
ficou de fora: a ordenação dos dados. Todas
essas funcionalidades podem ser implementadas e acrescentadas ao código
existente,
seguindo a mesma linha adotada, ou aperfeiçoadas com a utilização de componentes
adicionais. O Framework
jQuery possui uma biblioteca adicional, a jQuery UI, repleta de
componentes visuais ricos, como slider (que poderia ser
aplicado para filtrar os valores),
autocomplete (que poderia ser aplicado na busca por modelo e fabricante), entre
outros.

Fonte: VectorHot / Shutterstock

ARQUITETURA

Na arquitetura utilizada, os filtros foram aplicados sobre os dados a partir dos elementos HTML.
Essa abordagem
economiza o tráfego de dados, uma vez que não realiza novas requisições
AJAX de acordo com o filtro escolhido. Por
outro
lado, dependendo da quantidade de dados
retornados ou de outros fatores, nem sempre trazemos todos os dados de uma
única
vez.

É muito comum utilizarmos paginação, carregando uma quantidade inicial de dados, e,

mediante demanda e interação do
usuário, carregarmos mais dados. Nesse caso, os filtros em
elementos HTML não nos atenderiam. Por outro lado, as
técnicas e funções jQuery
empregadas também podem ser empregadas para filtrar os dados diretamente na requisição
AJAX,
combinando-as àquelas relativas à paginação e ao carregamento gradual de
informações.

Fonte: TippaPatt / Shutterstock

VERIFICANDO O APRENDIZADO

1. 1. EM RELAÇÃO AO MÉTODO JQUERY $.AJAX, UTILIZADO PARA A

REALIZAÇÃO DE REQUISIÇÕES AJAX, ASSINALE A ALTERNATIVA
CORRETA RELATIVA À SUA SINTAXE E ÀS SUAS PROPRIEDADES.

A) A principal limitação desse método é não permitir que requisições AJAX sejam realizadas no
carregamento da página, dentro, por exemplo, do evento $(document).ready().

B) Na função “done”, podemos tratar o retorno da requisição, tendo havido sucesso ou ocorrido
algum erro durante o processamento, como, por exemplo, a utilização de uma URL inexistente.

C) O método $.ajax permite que sejam acessadas apenas URL remotas. Ou seja, fazendo uso
desse método, não é possível, por exemplo, carregarmos arquivos JSON locais.

D) Além de acessar recursos externos de forma assíncrona, esse método permite a

manipulação dos dados obtidos, possibilitando que eles sejam, por exemplo, acrescentados
aos demais conteúdos já existentes na página.
2. CONSIDERE O FRAGMENTO DE CÓDIGO ABAIXO, ONDE TEMOS UMA
STRING JSON COMO RETORNO DE UMA REQUISIÇÃO AJAX, E O
MÉTODO .DONE(), QUE RECEBE COMO PARÂMETRO TAL STRING,
REPRESENTADA PELA VARIÁVEL RESULT.

A PARTIR DESSE CÓDIGO, ASSINALE A ALTERNATIVA CORRETA QUE

CORRESPONDA ÀS LACUNAS DO CÓDIGO QUANTO À FORMA DE
ACESSAR O NOME DO ALUNO, A SUA NOTA E A DISCIPLINA
“MATEMATICA”.

//OS DADOS ABAIXO ESTÃO CONTIDOS NA VARIÁVEL RESULT, VISÍVEL

NA FUNÇÃO .DONE

"ID": 1,

"NOME": "ALUNO",

"NOTA": 10,

"DISCIPLINAS": ["MATEMATICA", "GEOGRAFIA"]

...

.DONE(FUNCTION(RESULT){

VAR NOMEALUNO = _ _ _ _ _ ;

VAR NOTAALUNO = _ _ _ _ _ ;

VAR DISCIPLINA = _ _ _ _ _ ;

})

...

A) result[0].nome/ result[0].nota/ result[0].disciplinas[0].

B) result.nome/ result.nota/ result.disciplinas[0].

C) nome/ note/ disciplinas[0].

D) nomeAluno.nome/ notaAluno.nota/ disciplina.disciplinas[0].

GABARITO

1. 1. Em relação ao método jQuery $.ajax, utilizado para a realização de requisições

AJAX, assinale a alternativa correta relativa à sua sintaxe e às suas propriedades.

A alternativa "D " está correta.

A sintaxe do método $.ajax é composta pela URL que contém o recurso que se deseja acessar,
podendo ser remoto ou local, e por um parâmetro, no formato de objeto, onde informações
adicionais podem ser definidas. Tal método pode ser acessado a partir de qualquer outro
evento jQuery, como eventos de click ou de carregamento da página. Além disso, possui
funções distintas para tratar cada etapa da requisição, permitindo a criação de conteúdo
dinâmico, combinando conteúdos previamente existentes com novos, provenientes das
requisições realizadas.

2. Considere o fragmento de código abaixo, onde temos uma string JSON como retorno
de uma requisição AJAX, e o método .done(), que recebe como parâmetro tal string,
representada pela variável result.

A partir desse código, assinale a alternativa correta que corresponda às lacunas do

código quanto à forma de acessar o nome do aluno, a sua nota e a disciplina
“Matematica”.

//os dados abaixo estão contidos na variável result, visível na função .done

"id": 1,

"nome": "Aluno",

"nota": 10,

"disciplinas": ["Matematica", "Geografia"]

...

.done(function(result){

var nomeAluno = _ _ _ _ _ ;

var notaAluno = _ _ _ _ _ ;

var disciplina = _ _ _ _ _ ;

})

...
A alternativa "B " está correta.

O resultado de uma requisição AJAX, no formato JSON, permite que seus valores sejam
acessados com a notação de objetos. Logo, no fragmento acima, considerando que a variável
result contém uma string no formato JSON, podemos acessar cada uma de suas propriedades
fazendo uso da sintaxe result.PROPRIEDADE. Por exemplo, para acessar a propriedade id,
temos: result.id.

CONCLUSÃO

CONSIDERAÇÕES FINAIS
Ao longo deste tema, tratamos a programação cliente utilizando a linguagem Javascript.
Para
isso, foram utilizadas técnicas atuais de programação, em que um framework – nesse
caso,
jQuery – é empregado, otimizando todo o processo de desenvolvimento.

Após uma revisão inicial de aspectos básicos da linguagem JS, como escopo e tipos de
variáveis, passando por recursos mais complexos, como os eventos e por outros
recentemente
agregados à linguagem, como as Arrow functions, foi demonstrado, sempre com
o apoio de
exemplos práticos e funcionais, de que forma utilizar o Framework jQuery,
desde a sua
incorporação à página Web, passando pela manipulação da árvore DOM, por
alguns dos
principais eventos e métodos disponíveis na biblioteca, chegando à realização
de requisições
assíncronas – AJAX. Ao final, um exemplo completo e funcional foi
construído, no qual
recursos externos foram consumidos de forma assíncrona e
apresentados em uma página
HTML, onde também foram filtrados e manipulados.

Ouça o podcast com o resumo do tema.

AVALIAÇÃO DO TEMA:

REFERÊNCIAS
JQUERY. O que é jQuery. Consultado em meio eletrônico em: 4 ago. 2020.

MDN WEB DOCS. Referência Javascript. Consultado em meio eletrônico em: 4

ago. 2020.

EXPLORE+

A especificação Javascript ES6 apresentou alguns novos recursos importantes. Embora

não possua suporte em todos os navegadores, como nas versões do Internet Explorer
anteriores à Edge, tal especificação deve ser estudada a fundo. Entre as novidades,
destacam-se as arrow functions. Pesquise na internet como o guia de referência
Javascript da Fundação Mozilla aborda esse assunto, introduzindo uma série de
conceitos e diversos exemplos.

CONTEUDISTA
Alexandre de Oliveira Paixão

 CURRÍCULO LATTES