Olá, futuros desenvolvedores web! Hoje, vamos embarcar em uma jornada emocionante explorando o mundo do jQuery, a persistência de dados e as requisições assíncronas. Preparados? Vamos lá! Vamos explorar o jQuery, uma biblioteca JavaScript poderosa e gratuita, criada por John Resig. Esta biblioteca é a chave para adicionar interatividade e dinamismo às páginas web. Vamos descobrir como ela pode transformar a maneira como você programa na web.

O Poder do jQuery

Você já se perguntou como os sites conseguem ser tão interativos e responsivos? A resposta é jQuery, uma biblioteca JavaScript rápida e rica em recursos. Vamos mergulhar no mundo do jQuery e descobrir como ele pode transformar a maneira como você programa na web.

Persistência de Dados – Memória Além do Tempo

A persistência de dados é como a memória do seu site. É o que permite que os sites “lembrem” informações, tornando a experiência do usuário mais personalizada e eficiente. Vamos explorar como implementar a persistência de dados e por que ela é tão crucial para o desenvolvimento web.

Requisições Assíncronas – A Magia por Trás da Atualização de Páginas

As requisições assíncronas são a espinha dorsal da interatividade na web moderna. Elas permitem que os sites atualizem e carreguem informações sem a necessidade de recarregar a página inteira. Vamos desvendar os segredos das requisições assíncronas e aprender a usá-las para criar sites dinâmicos e interativos.

O que é jQuery?

O jQuery é mais do que apenas uma biblioteca JavaScript. Ele é uma ferramenta que nos permite criar animações, registrar e tratar eventos, e até mesmo desenvolver aplicações AJAX. Tudo isso com um código mais simples e fácil de entender.

Como usar o jQuery?

A biblioteca jQuery é um arquivo JavaScript que deve ser incluído na página onde você deseja aplicar seus efeitos. Este arquivo pode ser adicionado de duas maneiras: a partir de um arquivo público remoto, conhecido como CDN, ou a partir de um arquivo local, incluído na pasta do seu projeto.

Vamos ver um exemplo de como usar a biblioteca jQuery a partir de um repositório remoto:

<html>
<head>
<title>JQuery</title>
<script src=”https://code.jquery.com/jquery-3.6.4.js”></script>
</head>
<body>
<h1>Aprendendo jQuery</h1>
</body>
</html>

O que é uma CDN?

Uma CDN, ou Rede de Distribuição de Conteúdo, é um sistema de servidores que entrega páginas web e outros conteúdos da web a um usuário, baseado na localização geográfica do usuário, na origem da página web e no servidor de entrega de conteúdo. Para saber mais sobre CDNs, confira este artigo.

Seletores e Operadores: Como Encontrar e Manipular Elementos HTML com jQuery

Vamos aprender sobre seletores e operadores, dois conceitos fundamentais para usar o jQuery. Eles nos permitem encontrar e manipular os elementos HTML que compõem uma página web. Vamos ver como eles funcionam e como usá-los para criar páginas web interativas e dinâmicas.

O que são seletores?

Seletores são expressões que nos permitem localizar os elementos HTML que queremos modificar com o jQuery. Eles podem ser baseados em nomes de tags, atributos, classes, ids, ou até mesmo em relações hierárquicas entre os elementos. Veja alguns exemplos de seletores:

$("p"): seleciona todos os elementos <p> da página.
$("#titulo"): seleciona o elemento que tem o atributo id="titulo".
$(".destaque"): seleciona todos os elementos que têm a classe destaque.
$("div > p"): seleciona todos os elementos <p> que são filhos diretos de um elemento <div>.

O que são operadores?

Operadores são símbolos ou palavras que nos permitem definir a ação que será executada sobre os elementos selecionados pelo jQuery. Eles podem ser usados para alterar o conteúdo, o estilo, os atributos, os eventos, ou até mesmo para criar ou remover elementos. Veja alguns exemplos de operadores:

.html(): altera o conteúdo HTML de um elemento.
.css(): altera o estilo CSS de um elemento.
.attr(): altera o valor de um atributo de um elemento.
.on(): adiciona um evento a um elemento.
.append(): adiciona um elemento ao final de outro elemento.
.remove(): remove um elemento da página.

Como usar seletores e operadores?

A sintaxe do jQuery é bastante simples. Basta usar o símbolo $ para indicar que estamos usando o jQuery, seguido de um seletor entre parênteses, e depois um operador com um ponto. Veja um exemplo:

// Altera o conteúdo do elemento que tem o id "titulo" para "Aprendendo jQuery"
$("#titulo").html("Aprendendo jQuery");

A Figura 1 ilustra a sintaxe do jQuery:

Figura 1 – Sintaxe do jQuery #ParaTodosVerem: imagem que descreve a sintaxe de uso do jQuery. No centro, há uma descrição da sintaxe. Acima, um retângulo com fundo cinza possui o texto “localiza os elementos HTML” e refere-se ao seletor. Abaixo, outros dois retângulos com fundo na cor cinza. O retângulo à esquerda tem em seu interior o texto “$ para utilizar o jQuery”, já o à direita contém o texto: “define a ação que será executada”. Fim da descrição.

Vejamos alguns exemplos de como utilizar o jQuery para ter acesso aos elementos de uma página web:

$(“*”): seleciona todos os elementos da página;
$(“tipo_do_elemento”): seleciona todos os elementos de um tipo escolhido, basta colocar o nome do elemento entre as aspas. Exemplo: $(“p”). hide() esconde todos os elementos;
$(“#id_do_elemento”): seleciona o elemento pelo id. Um elemento do html possui um atributo id, esse atributo id é informado juntamente com o caracter # para o jQuery ter acesso. Exemplo: $(“#main”).hide() oculta o elemento com id=”main”;
$(“.nome_da_classe”): seleciona os elementos da classe. Dentro de um seletor, o caractere ponto (.) refere-se à classe (atributo “class” da tag HTML). Exemplo: $(“.main”).hide() oculta o elemento com class=”main”.

Aguardando o Documento Carregar: Como Usar o jQuery com Segurança

Vamos aprender sobre uma boa prática para usar o jQuery: aguardar o documento carregar. Isso evita que o nosso código tente modificar um elemento que ainda não existe na página. Vamos ver como fazer isso e por que é importante.

Por que esperar o documento carregar?

Quando usamos o jQuery, estamos manipulando os elementos HTML que compõem uma página web. Mas esses elementos não são carregados instantaneamente. Eles são carregados em uma ordem específica, que depende de vários fatores, como o tamanho do arquivo, a velocidade da conexão, o tipo de conteúdo, etc.

Se tentarmos modificar um elemento que ainda não foi carregado, o jQuery não vai encontrar esse elemento e vai gerar um erro. Isso pode comprometer o funcionamento do nosso código e a experiência do usuário.

Como esperar o documento carregar?

Para evitar esse problema, o jQuery nos oferece uma forma de executar o nosso código somente depois que o documento estiver totalmente carregado. Para isso, usamos o método $(document).ready(), que recebe uma função como parâmetro. Essa função será executada quando o documento estiver pronto.

Veja um exemplo de como usar o método $(document).ready():

<html>
<head>
<title>JQuery</title>
<script src=”https://code.jquery.com/jquery-3.6.4.js”></script>
<script>
// Espera o documento carregar
$(document).ready(function(){
	// Altera o texto dos elementos h1 que têm a classe main para "Combinando seletores"
	$(“h1.main”).text(“Combinando seletores”);
});
</script>
</head>
<body>
	<h1>Aprendendo jQuery</h1>
	<h1 class=”main”>Aprendendo jQuery</h1>
	<h1 class=”main”>Aprendendo jQuery</h1>
</body>
</html>

Vamos explicar o código acima com mais detalhes. Veja o Quadro 2:

Quadro 2 – Explicação do código

Linha(s)	Explicação
Linha 4	Usamos a tag `<script>` com o atributo `src` para incluir o arquivo JavaScript que contém a biblioteca jQuery. O valor do atributo `src` é uma URL que aponta para um repositório on-line onde o arquivo está hospedado. Dessa forma, não precisamos baixar o arquivo e colocá-lo na pasta do nosso projeto.
Linha 6	Usamos o método `$(document).ready()` para garantir que o nosso código jQuery seja executado somente depois que o documento HTML estiver totalmente carregado. Isso evita que tentemos modificar um elemento que ainda não existe na página. O método `$(document).ready()` recebe uma função como parâmetro, que será executada quando o documento estiver pronto.
Linha 7	Usamos o seletor `$("h1.main")` para localizar todos os elementos `<h1>` que têm a classe `main`. Em seguida, usamos o operador `.text()` para alterar o conteúdo desses elementos para “Combinando seletores”. O operador `.text()` recebe uma string como parâmetro, que será o novo conteúdo dos elementos selecionados.

Podemos também substituir $(document).ready(function() pela chamada de sintaxe abreviada, que é a seguinte:

$(function() {
//bloco de códigos
})

Reflita
Você percebeu que o primeiro elemento <h1> não foi alterado?
Isso aconteceu, pois o código que utilizamos altera somente o
elemento cuja classe é main .

Com jQuery, podemos selecionar ou ter acesso aos elementos de acordo com os atributos do HTML. Para isso, basta informar o atributo, o operador e o valor dentro de colchetes [] , conforme a sintaxe: $([atributo operador valor]) .

Operadores: Como Comparar Valores de Atributos com jQuery

Vamos aprender sobre operadores, que são símbolos ou palavras que nos permitem comparar os valores dos atributos dos elementos HTML com os valores que informamos. Eles são muito úteis para selecionar elementos HTML de forma mais precisa e flexível. Vamos ver quais são os operadores disponíveis e como usá-los no jQuery.

Quais são os operadores?

Os operadores são listados no Quadro abaixo:

Operador	Significado
`=`	O valor informado precisa ser igual ao valor do atributo.
`!=`	O valor informado precisa ser diferente do valor do atributo.
`^=`	O valor do atributo precisa começar ou ser igual ao valor informado.
`$=`	O valor do atributo precisa terminar ou ser igual ao valor informado.
`~=`	O valor do atributo precisa conter o valor informado.

Como usar os operadores?

Para usar os operadores no jQuery, basta informar o atributo, o operador e o valor dentro de colchetes ([]), conforme a sintaxe: $([atributo operador valor]). Veja alguns exemplos de como aplicar os operadores no jQuery:

$(“[name=’txtNome’]”): seleciona todos os elementos cujo atributo name seja igual txtNome.
$(“[type=’text’][name=’txtInfo’]”): seleciona e define o valor de todos os elementos do tipo input, cujo atributo name seja igual a txtInfo.

Tratamento de Eventos: Como Fazer o jQuery Reagir às Ações do Usuário

Vamos aprender sobre tratamento de eventos, que é a capacidade do jQuery de responder a eventos em um documento web. Os eventos são ações que ocorrem na página, como o movimento do mouse, a seleção de um botão, ou o clique sobre um elemento. Vamos ver quais são os eventos mais comuns utilizados com jQuery e como usá-los para criar páginas web interativas e dinâmicas.

Quais são os eventos mais comuns?

Os eventos mais comuns utilizados com jQuery são listados abaixo:

$(document).ready(função): como visto anteriormente, aguarda a página toda ser carregada para executar uma função;
$(seletor).click(função): quando o elemento indicado no seletor for selecionado e receber o evento click, a função é executada;
$(seletor).dbclick(função): quando o elemento indicado no seletor for selecionado e receber o evento duplo click, a função é executada;
$(seletor).change(função): quando o elemento indicado no seletor for selecionado e sofrer uma alteração, então a função será executada;
$(seletor).focus(função): quando o elemento indicado no seletor receber o foco, a função é executada.

Como usar os eventos?

Para usar os eventos no jQuery, basta usar o seletor para localizar o elemento que queremos associar ao evento, e depois usar o operador com o nome do evento, seguido de uma função como parâmetro. Essa função será executada quando o evento ocorrer.

Vamos ver dois exemplos de como usar os eventos no jQuery:

Exemplo 1: Ocultando um elemento com o evento click

Neste exemplo, vamos ocultar um elemento <p> quando clicarmos sobre ele. Para isso, vamos usar o seletor $("p") para localizar todos os elementos <p> da página, e depois usar o operador .click() com uma função que usa o operador .hide() para ocultar o elemento clicado. Veja o código:

<html>
<head>
 <script src=”https://code.jquery.com/jquery-3.6.4.js”></script>
 <script>
 // Espera a página carregar
 $(document).ready(function () {
 // Quando um elemento p for clicado
 $(“p”).click(function () {
 // Oculta o elemento clicado
 $(this).hide();
 });
 });
 </script>
</head>
<body>
 <p>Se você clicar aqui, vou desparecer.</p>
 <p>Clique aqui também!!</p>
</body>
</html>

Exemplo 2: Alterando a cor de fundo de um campo de formulário com o evento focus

Neste exemplo, vamos alterar a cor de fundo de um campo de formulário quando ele receber o foco. Para isso, vamos usar o seletor $("input") para localizar todos os elementos input da página, e depois usar o operador .focus() com uma função que usa o operador .css() para alterar o estilo CSS do elemento que recebeu o foco. Veja o código:

<html>
<head>
 <script src=”https://code.jquery.com/jquery-3.6.4.js”></script>
 <script>
 // Espera a página carregar
 $(document).ready(function () {
 // Quando um elemento input receber o foco
 $(“input”).focus(function () {
 // Altera a cor de fundo do elemento para vermelho
 $(this).css(“background-color”, “red”);
 });
 });
 </script>
</head>
<body>
 Nome: <input type=”text” name=”fullname”><br>
</body>
</html>

Métodos: Como Acessar e Modificar o Conteúdo dos Elementos HTML com jQuery

Vamos aprender sobre métodos, que são funções que nos permitem acessar e modificar o conteúdo dos elementos HTML com jQuery. Eles são muito úteis para criar páginas web dinâmicas e personalizadas. Vamos ver quais são os principais métodos utilizados para manipular elementos HTML e como usá-los no jQuery.

Quais são os principais métodos?

Os principais métodos utilizados para manipular elementos HTML são listados abaixo:

$(seletor).text(conteúdo): acessa ou altera o texto dos elementos selecionados pelo seletor;
$(seletor).val(conteúdo): acessa ou altera os valores dos elementos contidos em um formulário. Os elementos podem ser do tipo input, select e radio;
$(seletor).html(conteúdo): recupera ou define o conteúdo HTML dos elementos selecionados pelo seletor, por exemplo, o código HTML que está dentro de uma div;
$(seletor).append(conteúdo): insere o conteúdo ao final do elemento selecionado pelo seletor;
$(seletor).prepend(conteúdo): insere o conteúdo no início do elemento selecionado pelo seletor;
$(seletor).after(conteúdo): insere o conteúdo informado após o elemento selecionado pelo seletor;
$(seletor).before(conteúdo): insere o conteúdo informado antes do elemento selecionado pelo seletor.

Como usar os métodos?

Para usar os métodos no jQuery, basta usar o seletor para localizar o elemento que queremos manipular, e depois usar o operador com o nome do método, seguido de um parâmetro opcional. Esse parâmetro pode ser uma string, um número, uma função, ou outro elemento HTML. Se o parâmetro for omitido, o método irá retornar o conteúdo atual do elemento. Se o parâmetro for informado, o método irá alterar o conteúdo do elemento.

Vamos ver um exemplo completo que utiliza os métodos citados acima:

<html>
<head>
<script src=”https://code.jquery.com/jquery-3.6.4.js”></script>
<script>
// Espera a página carregar
$(document).ready(function () {
// Quando o elemento com id "b1" for clicado
$(“#b1”).click(function(){
// Altera o valor do elemento do tipo "text" para "Inserindo um valor novo"
$(“[type=’text’]”).val(“Inserindo um valor novo”);
// Insere o texto "- antes -" antes do elemento do tipo "text"
$(“[type=’text’]”).before(“- antes -”);
// Insere o texto "- depois -" depois do elemento do tipo "text"
$(“[type=’text’]”).after(“- depois -”);
// Insere o texto " Aprendendo " no início do elemento com id "d1"
$(“#d1”).prepend(“ Aprendendo “);
// Insere o texto " jQuery " no final do elemento com id "d1"
$(“#d1”).append(“ jQuery “);
// Define o conteúdo HTML do elemento com id "d2" para "Programação Web"
$(“#d2”).html(“Programação Web”);
})
 });
</script>
<style>
div{border: 1px solid saddlebrown;}
</style>
</head>
<body>
<div id=”d1”>Aprendendo jQuery</div>
<br>
<input type=”text” value=”valor inicial”>
<input id=”b1” type=”button” value=”Clique aqui”>
<br><br>
<div id=”d2”>Praticando jQuery</div>
</body>
</html>

Observe na Figura 2 a execução do código anterior:

Exemplo antes de clicar no botão

Ao clicar no botão, o evento de clique é acionado no elemento b1 e os métodos são executados, obtendo o resultado apresentado na Figura:

Exemplo após clicar no botão

Manipulando CSS com JQuery

Manipulando CSS com jQuery O CSS (Cascading Style Sheets) é uma linguagem que define o estilo e a aparência de uma página web, como as cores, as fontes, os espaçamentos e as bordas dos elementos. O jQuery é uma biblioteca de JavaScript que simplifica a manipulação do CSS e de outros aspectos da página, como o conteúdo, os eventos e os efeitos. Com o jQuery, podemos alterar o CSS de forma dinâmica e interativa, sem precisar recarregar a página ou usar as funções padrão do JavaScript.

Para manipular o CSS com o jQuery, usamos o método css(), que pode definir ou retornar uma ou mais propriedades de estilo para os elementos selecionados. A sintaxe para definir uma propriedade CSS é: $(seletor).css("nome_da_propriedade", "novo_valor"). A sintaxe para retornar uma propriedade CSS é: $(seletor).css("nome_da_propriedade").

Vamos ver alguns exemplos de como usar o método css() do jQuery para manipular o CSS de uma página web. No código HTML abaixo, temos um elemento <p> com um texto e um botão que vai acionar uma função do jQuery.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script>
$(document).ready(function () {
 // Esta função é executada quando a página é carregada
 let valor = $("p").css("background-color"); // Armazena o valor da propriedade background-color do elemento <p>
 $("button").click(function () {
  // Esta função é executada quando o botão é clicado
  alert("Background-color=" + valor); // Exibe um alerta com o valor da propriedade background-color do elemento <p>
 });
});
</script>
<style>
p {background-color: blueviolet; color: white; padding: 10px;} // Define o estilo do elemento <p>
</style>
</head>
<body>
<p>Clique no botão para revelar a cor de fundo.</p> // Cria um elemento <p> com um texto
<button>Clique aqui</button> // Cria um botão que vai acionar a função do jQuery
</body>
</html>

Neste exemplo, o resultado esperado é que, ao clicar no botão, seja exibido um alerta com a mensagem “Background-color=rgb(138, 43, 226)”, que é o valor da propriedade background-color do elemento <p> em formato RGB (Red, Green, Blue).

Podemos também usar o método css() para alterar o valor de uma propriedade CSS de um elemento. Por exemplo, se quisermos mudar a cor do texto do elemento <p> para vermelho, podemos usar o seguinte código:

$("p").css("color", "red"); // Altera a propriedade color do elemento <p> para vermelho

Podemos também alterar mais de uma propriedade CSS ao mesmo tempo, passando um objeto com os pares de nome e valor das propriedades. Por exemplo, se quisermos mudar a cor de fundo do elemento <p> para verde e o tamanho da fonte para 20 pixels, podemos usar o seguinte código:

$("p").css({backgroundColor: "green", fontSize: "20px"}); // Altera as propriedades backgroundColor e fontSize do elemento <p> para verde e 20 pixels, respectivamente

O jQuery nos permite manipular os seletores alinhados com CSS e CSS3, ou seja, podemos selecionar os elementos de acordo com os seus atributos, classes, IDs, pseudo-classes, pseudo-elementos, entre outros. Isso nos dá mais flexibilidade e precisão para alterar o CSS dos elementos que queremos. Por exemplo, se quisermos mudar a cor de todos os elementos <p> que têm o atributo class="destaque", podemos usar o seguinte código:

$("p[class='destaque']").css("color", "yellow"); // Altera a propriedade color de todos os elementos <p> que têm o atributo class="destaque" para amarelo

Para saber mais sobre o método css() do jQuery e os seletores de CSS e CSS3, você pode consultar os seguintes links:

WebStorage (HTML5): Uma Revolução no Armazenamento de Dados do Cliente

Com o advento do HTML5, a retenção de dados no lado do cliente tornou-se mais prática e eficiente graças à API WebStorage. Esta API revolucionária oferece mecanismos robustos para o navegador armazenar dados usando um conceito simples, mas poderoso, de chave/valor. Além disso, ela proporciona um espaço de armazenamento maior e evita o envio desnecessário de informações para o servidor.

Compatibilidade entre Navegadores

A API WebStorage é compatível com uma variedade de navegadores disponíveis no mercado. A tabela abaixo mostra a versão mínima de cada navegador que suporta a API:

Propriedade	Chrome	Explorer	Mozilla	Safari	Opera
WebStorage	4.0	8.0	3.5	4.0	10.5

Verificando a Compatibilidade

Para evitar problemas na implementação do WebStorage, é uma boa prática verificar se o navegador suporta a API. Isso pode ser feito com o seguinte código:

if (typeof (Storage) !== "undefined") {
 alert("Seu navegador possui suporte ao WebStorage!")
} else {
 alert("Desculpe, mas seu navegador não possui suporte!")
}

Objetos de Armazenamento Web

O WebStorage fornece dois objetos para armazenar dados no cliente:

LocalStorage: Armazena dados sem data de validade. Os dados só serão excluídos pela aplicação ou pelo usuário.
SessionStorage: Armazena dados para uma sessão. Os dados são perdidos quando a guia do navegador é fechada.

O WebStorage utiliza um conceito de objetos, que são conjuntos contendo pares de chave/valor. Por exemplo, a chave “nome” pode armazenar o valor “Marco”.

Figura 4 – Armazenamento local

#ParaTodosVerem: imagem da tela de ferramentas do desenvolvedor exibida no navegador Chrome em fundo na cor branca. Na parte superior, há um menu com dois ícones à esquerda das opções e outros quatro ícones à direita. Abaixo, à esquerda, são listadas as opções “Aplicativo” e “Armazenamento”. À direita, há um campo contendo o texto “Filtro” e, abaixo deste, há uma tabela com duas colunas, com os títulos “Chave” e “Valor”. Abaixo do título “Chave” há o valor “nome” e abaixo de “Valor” há o texto “Marco”. Fim da descrição.

Manipulando Dados com WebStorage

A API WebStorage fornece vários métodos para manipular e acessar os dados armazenados. Vamos explorar alguns deles:

setItem(nome, valor): Este método é usado para gravar dados. Por exemplo, localStorage.setItem("nome","Maria") grava o nome “Maria” no armazenamento local.
getItem(nome): Este método é usado para recuperar dados. Por exemplo, localStorage.getItem("nome") recupera o nome que foi gravado anteriormente.
removeItem(nome): Este método é usado para apagar um dado gravado. Por exemplo, localStorage.removeItem("nome") apaga o nome que foi gravado anteriormente.
clear(): Este método é usado para apagar todos os dados do armazenamento. Por exemplo, localStorage.clear() apaga todos os dados armazenados.

Vamos aplicar os conceitos estudados em um exemplo para cadastro simples de alunos, por meio de um formulário, como mostra a Figura 5:

Figura 5 – Formulário de cadastro de alunos

#ParaTodosVerem: imagem da tela do navegador Chrome em fundo na cor branca. No centro, há um retângulo com fundo na cor branca contendo um formulário com os campos “RGM”, “Nome” e “Curso”,
sendo que ao lado de cada campo há um retângulo para entrada de dados. Abaixo, três botões: o primeiro, à esquerda, com fundo azul, contém o texto “Gravar”, o do centro tem fundo verde e a inscrição “Carregar” e o último, à direita, tem fundo vermelho e o texto “Apagar”. Fim da descrição.

Aplicando os Conceitos: Cadastro de Alunos

Para ilustrar a aplicação desses conceitos, vamos criar um exemplo de cadastro simples de alunos usando um formulário.

Para manipular os dados, vamos utilizar jQuery e criaremos três métodos:

gravarDados(): Este método está associado ao botão “Gravar” e é responsável por salvar os dados do formulário no armazenamento local.
carregarDados(): Este método está associado ao botão “Carregar” e é responsável por carregar os dados a partir do armazenamento local para o formulário.
apagarDados(): Este método está associado ao botão “Apagar” e é responsável por apagar todos os dados do armazenamento local.

O código para implementação das funções é mostrado a seguir:

$("#button1").click(gravarDados);
$("#button2").click(carregarDados);
$("#button3").click(apagarDados);

function gravarDados() {
 localStorage.setItem("rgm", $("#rgm").val());
 localStorage.setItem("nome", $("#nome").val());
 localStorage.setItem("curso", $("#curso").val());
 alert("Dados gravados");
 limparCampos();
}

function carregarDados() {
 if (localStorage.length > 0) {
 $("#rgm").val(localStorage.getItem("rgm"));
 $("#nome").val(localStorage.getItem("nome"));
 $("#curso").val(localStorage.getItem("curso"));
 } else {
 alert("Nenhum registro encontrado");
 }
}

function apagarDados() {
 if (localStorage.length > 0) {
 localStorage.clear();
 } else {
 alert("Nenhum registro encontrado");
 }
 limparCampos();
}

function limparCampos() {
 $("#rgm").val("");
 $("#curso").val("");
 $("#nome").val("");
}

AJAX: Tornando a Web Mais Interativa

AJAX, um acrônimo para Asynchronous JavaScript and XML (JavaScript e XML Assíncronos), é mais do que apenas uma palavra da moda. É um conjunto de técnicas que tornam as páginas da web mais dinâmicas e interativas.

Imagine poder atualizar partes de uma página web sem ter que recarregar a página inteira. Isso é AJAX em ação! Ele permite que as aplicações web trabalhem de forma assíncrona, ou seja, a troca de dados com o servidor ocorre em segundo plano. Isso torna a experiência do usuário mais suave e agradável.

O Coração do AJAX: XMLHttpRequest

Quando trabalhamos com AJAX, a estrela do show é o objeto XMLHttpRequest. Manipulado através do JavaScript, este objeto é responsável pela comunicação com o servidor através de requisições HTTP.

Embora seja um objeto nativo padronizado nos navegadores modernos, o XMLHttpRequest foi originalmente implementado pela Microsoft como um controle ActiveX nas versões antigas do Internet Explorer. Desde então, outros navegadores adotaram uma classe XMLHttpRequest, garantindo suporte aos métodos e propriedades desse objeto.

AJAX e jQuery: Uma Combinação Poderosa

A biblioteca jQuery oferece uma vasta documentação para trabalhar com requisições AJAX. O principal método para executar uma solicitação é o $.ajax(), que é usado por todos os outros métodos jQuery AJAX.

Embora a implementação com $.ajax() seja considerada de nível inferior, ela oferece um conjunto vasto de opções não disponíveis em funções de alto nível, como $.get() e $.post(), que são mais fáceis de usar.

Ao fazer uma requisição, precisamos informar um seletor que iniciará a execução, o endereço do arquivo que contém os dados que serão retornados, o tipo de dado retornado e o que será feito com ele.

Aqui está um exemplo de como usamos a função $.get() para alterar o conteúdo de um parágrafo:

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script>
$(function(){
  $("button").click(function(){
    $.get({url: "dados.txt", success: function(result){
      $("#p1").html(result);
    }});
  });
});
</script>
</head>
<body>
<h2>AJAX com jQuery</h2>
<p id="p1">Clique no botão para alterar este conteúdo</p>
<button>Clique aqui</button>
</body>
</html>

Quando o botão “Clique aqui” é acionado, uma requisição é iniciada e os dados do arquivo “dados.txt” são carregados na página web, substituindo o conteúdo do parágrafo. Veja a seguir o código comentado:

Quadro 4 – Exemplo comentado

Linha(s)	Descrição
Linha 6	Anexamos o evento click no elemento button que será responsável por disparar a requisição.
Linha 7	Iniciamos a função $.get() e passamos o parâmetro url, que requisita o arquivo dados.txt. Observe que result armazena os dados recebidos nessa requisição.
Linha 8	O método html() é utilizado para inserir o conteúdo da requisição dentro do <p id = “p1”>, conforme a marcação HTML.

Usar os métodos ajax() do jQuery torna as requisições mais simples do que usar o método nativo do JavaScript, o XMLHttpRequest.

No entanto, uma função mais moderna que tem se tornado muito popular é o Fetch. Ele fornece uma implementação mais flexível e fácil para fazer requisições para buscar dados de forma assíncrona pela rede. O Fetch veio para substituir o objeto XMLHttpRequest e tem se tornado padrão nas versões mais recentes dos navegadores Firefox e Chrome. No entanto, por ser uma tecnologia nova, navegadores mais antigos não reconhecem essa funcionalidade.

Para verificar se o navegador suporta Fetch, você pode usar o seguinte código:

if(self.fetch) {
  // execute minha solicitação do fetch aqui
} else {
  // faça alguma coisa com XMLHttpRequest?
}

No exemplo a seguir, vamos fazer uma requisição Fetch para obter a lista de repositórios de um usuário do github:

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
</head>
<body>
<h2>Repositórios do GitHub</h2>
<p>Utilizando o Fetch para listar os repositórios do GitHub</p>
<ul></ul>
<script>
// Define a URL para a API do GitHub que lista os repositórios de um usuário
const url = "https://api.github.com/users/msanches/repos";

// Inicia a requisição Fetch
fetch(url)
  // Quando a resposta é recebida, converte para JSON
  .then(response => response.json())
  // Quando os dados são recebidos, processa cada elemento
  .then(data => {
    data.forEach(element => {
      // Adiciona o nome do repositório como um item da lista
      $("ul").append("<li>" + element.name + "</li>");
    });
  })
  // Se ocorrer um erro, registra no console
  .catch(err => console.log(err))
</script>
</body>
</html>

E aqui está a tabela explicando o código:

Linha(s)	Descrição
Linha 11	Define a URL para a API do GitHub que lista os repositórios de um usuário.
Linha 14	Inicia a requisição Fetch para a URL definida.
Linha 16	Quando a resposta é recebida, a converte para JSON.
Linha 18	Quando os dados são recebidos, processa cada elemento.
Linha 21	Adiciona o nome do repositório como um item da lista.
Linha 24	Se ocorrer um erro durante qualquer parte do processo, registra o erro no console.

Continuando sua Jornada de Aprendizado

Agora que você tem uma compreensão sólida do AJAX, é hora de continuar sua jornada de aprendizado. Aqui estão alguns recursos que recomendamos para aprofundar seu conhecimento:

Sites para Aprender Mais

W3Schools: Este site é um recurso incrível para aprender sobre várias tecnologias, incluindo HTML, CSS, JavaScript, Python e muito mais. Recomendamos especialmente o tutorial de jQuery. Clique aqui para visitar
jQuery: Nada melhor do que ir direto à fonte. Visite a página oficial do jQuery para descobrir todos os recursos que esta biblioteca oferece para o desenvolvimento web. Clique aqui para visitar

Leituras Recomendadas

O que São as Ferramentas de Desenvolvimento do Navegador: Os navegadores modernos oferecem um conjunto de ferramentas que auxiliam os desenvolvedores a inspecionar o HTML, CSS e JavaScript de uma página. Conheça mais sobre o DevTools clicando aqui.
Fetch API: Esta é uma plataforma aberta destinada ao aprendizado de tecnologias Web. Acesse a página com os conteúdos da Fetch API clicando aqui.

jQuery, Persistência e Requisições Assíncronas: Uma Jornada Interativa