Desenvolvimento Web Cliente vol4

Prévia do material em texto

- -1
DESENVOLVIMENTO WEB CLIENTE
UNIDADE 4 - COMO INCLUIR 
COMPORTAMENTO DINÂMICO NO SEU 
SISTEMA ?WEB
Katia Cristina Lage dos Santos
- -2
Introdução
Sabemos que as tecnologias HTML e CSS são as responsáveis, respectivamente, pelo conteúdo e pela estilização
do sistema . Ambas as tecnologias têm sintaxe própria e trabalham em conjunto para proporcionar uma boa web
experiência para o usuário. Elas são renderizadas pelo navegador no lado do cliente. Mas o que teríamosweb
que fazer para enviar alguma informação para o lado do servidor?
Para essa tarefa, temos uma tecnologia denominada JavaScript. O JavaScript viabiliza construir algoritmos que
realizam as tarefas de envio ou busca de informação que está no lado do servidor, processamento de tarefas no
lado do cliente, além de ser muito utilizada para a validação e verificação dos dados de entrada no sistema web.
Assim como o HTML e o CSS, o JavaScript executa do lado do cliente, por esse motivo os processamentos em
geral são mais simples e leves, pois não podem demandar muitos recursos computacionais do lado do usuário.
Então, diferentemente do HTML e do CSS, o JavaScript, então, é uma linguagem de programação?
Baseados na linguagem JavaScript, atualmente no mercado há vários que já têm implementadasframeworks 
funcionalidades comumente empregadas com essa linguagem. Alguns exemplos desses frameworks são o jQuery,
Node.js e o AngularJs. Alguns desses são empregados apenas pra construção da parte visual doframeworks
sistema ( ) e outros são empregados para construção das demais funcionalidades voltadas mais para ofront-end
processamento da informação ( ). Nessa unidade vamos aprender um pouco sobre o jQuery e facilmenteback-end
conseguir adicionar ao nosso sistema web validações e verificações que vão enriquecer nossas soluções. Mas,
sendo outra tecnologia, como é possível combinar o JavaScript/jQuery com o HTML e o CSS?
Vamos iniciar o estudo da linguagem JavaScript e do jQuery que viabilizam construir algoritmos nos sistemas
web.
4.1 A Linguagem JavaScript
No início da década de 1990, a Internet alcançou uma alta popularidade no mundo inteiro. Tendo isso em vista, a
empresa Netscape investiu na criação da primeira linguagem de denominada que executava noscript Livescrit 
navegador de mesmo nome da empresa (CAELUM, 2019). Apesar de sua simplicidade, com a permitiaLivescript
a execução de contidos nas páginas dentro do próprio navegador. scripts
Por volta do ano de 1995, a Netscape mudou o nome da linguagem para JavaScript. Essa mudança foiLivescript
estratégica, já que nessa época a linguagem Java começou a ganhar uma grande popularidade no
desenvolvimento de sistemas em geral. Essa mudança foi possível graças a um acordo da Netscape com a
VOCÊ O CONHECE?
Brendan Eich criou o JavaScript na década de 1990 a pedido da Netscape. Na época do seu
surgimento, coisas simples como validar um campo em um formulário tinham de ser feitas
pelo servidor. Imagine a situação: você preenchia um formulário, clicava em enviar e tinha que
aguardar uns 30 segundos (as conexões de Internet da época eram muito lentas) para obter
algum retorno sobre a submissão que havia feito. Conheça mais sobre o criador e sobre a
história dessa importante linguagem acessando: https://www.cpt.com.br/cursos-informatica-
desenvolvimentodesoftwares/artigos/linguagem-de-programacao-JavaScript-um-breve-
.historico
https://www.cpt.com.br/cursos-informatica-desenvolvimentodesoftwares/artigos/linguagem-de-programacao-JavaScript-um-breve-historico
https://www.cpt.com.br/cursos-informatica-desenvolvimentodesoftwares/artigos/linguagem-de-programacao-JavaScript-um-breve-historico
https://www.cpt.com.br/cursos-informatica-desenvolvimentodesoftwares/artigos/linguagem-de-programacao-JavaScript-um-breve-historico
- -3
desenvolvimento de sistemas em geral. Essa mudança foi possível graças a um acordo da Netscape com a
criadora do Java, a empresa Sun Microsystems (CAELUM, 2019). Assim, as duas linguagens com aplicações
distintas poderiam crescer juntas. Essa estratégia deu certo, mas até nos dias atuais muitas pessoas confundem e
acreditam que se trata da mesma linguagem. 
Atualmente, a linguagem JavaScript executa em todos os navegadores, sendo a mais popular dentre as
linguagens que executam no lado cliente em um sistema . Como vimos nas unidades anteriores, enquanto oweb
HTML trata do conteúdo e o CSS do estilo das páginas HTML, o JavaScript vem completar a tríade das tecnologias
básicas. Ela é responsável por praticamente qualquer tipo de dinamismo a ser adicionado em sistemas emweb
geral. Para isso, além da definição básica do JavaScript, denominada ECMAScript, ela conta ainda com uma gama
variada de bibliotecas e que aumentaram a popularidade da linguagem base. Alguns exemplosframeworks
destes são jQuery, Angular JS, NodeJS, dentre outros. Para entendermos melhor como ocorre aframeworks
transferência de dados entre o servidor e o cliente, vejamos o esquema apresentado na figura a seguir.
Figura 1 - Esquema de funcionamento das requisições e respostas
No esquema apresentado, o número (1) indica que o lado do cliente abriu um navegador e digitou o endereço: 
www.meuendereco.com.br. Nesse momento, uma requisição HTTP é criada para o lado do servidor. No servidor
tem uma aplicação denominada servidor de aplicações que atende o chamado e retorna para o cliente HTML, CSS
e JavaScript, conforme mostrado no passo (2).
A partir do conteúdo apresentado para o usuário, podem ser feitas novas requisições, representadas pelo passo
(3). Essa nova requisição pode ser um clique em um link, o preenchimento de um formulário com o envio dos
dados ou mesmo a seleção de uma opção do menu, por exemplo. Para cada requisição, tem uma resposta do
servidor, representada pelo número (4). Sempre as respostas do servidor são formadas por HTML, CSS e
JavaScript. Como o JavaScript é uma linguagem do lado cliente, ele será executado no computador do usuário.
Esse comportamento faz com que o servidor não fique sobrecarregado com todo tipo de processamento. Por
isso, em geral, as aplicações que utilizam JavaScript para dar a dinamicidade no sistema ficam mais leves e mais
rápidas.
http://www.meuendereco.com.br/
- -4
Como vimos no exemplo apresentado na figura anterior, o JavaScript é uma linguagem do tipo cliente, pois quem
interpreta e gera os resultados é o computador do usuário. Outras linguagens como PHP, Java e C#, por exemplo,
são linguagens do lado do servidor. Em termos práticos, após o usuário realizar a requisição nos passos (1) e (3),
todo o processamento é realizado no lado do servidor que ao terminar o processamento envia a resposta, passos
(2) e (4) para o usuário. Cada um dos tipos tem van ens e desvan ens, sendo importante para otag tag
desenvolvedor conhecer a arquitetura envolvida para fazer as corretas decisões de implementação.
O fato de o seu computador receber algum código e interpretar já explica o que é uma linguagem que executa do
lado cliente, como o JavaScript. A grande van em é que o processamento é mais rápido, pois executa no lado dotag
cliente, não ocorrendo sobrecarga no lado do servidor. Mas também pode desencadear alguns problemas.
Você já parou para imaginar quantos tipos diferentes de sistemas operacionais, navegadores, conexões e
hardwares que existem? Sim, essa diversidade pode trazer algumas questões que precisam ser consideradas
pelo desenvolvedor, pois nem todos os navegadores interpretam JavaScript da mesma forma, além do fato que o
desenvolvedor pode inibir a execução de no lado cliente. scripts
Nas seções seguintes vamos conhecer um pouco mais da sintaxe e construção de algoritmos com JavaScript.
4.1.1 Características da linguagem JavaScript
Como vimos, a linguagem JavaScript adquiriu uma alta popularidade e a comunidade de desenvolvedores
continua a criar componentes diversos para acoplar aos sistemas . Se considerar apenas o ECMAScript, aweb
definição base do JavaScript, é possível interagir com, praticamente, todos os elementos de uma página HTML,trabalhar com variáveis, gerar resultados, alterar a aparência de elementos. Aliado a outra tecnologia que
veremos a seguir, o AJAX, é possível fazer alterações na página sem a necessidade de ficar recarregando ou
fazendo o da página com a tecla F5.refresh
Para iniciar, já vamos construir um pequeno trecho de código com HTML e JavaScript. Para isso, abra um editor
de texto em seu computador, como o bloco de notas, e insira o seguinte código:
VOCÊ SABIA?
Que a linguagem JavaScript tem uma comunidade de desenvolvedores em crescente expansão
que cria um conteúdo vasto na Internet com dicas e truques? Acesso o artigo do iMasters com
um especial de dicas que foram elaboradas no final do ano de 2018 e aumente a qualidade do
seu código. Acesse: https://imasters.com.br/back-end/15-dicas-e-truques-da-linguagem-
JavaScript.
https://imasters.com.br/back-end/15-dicas-e-truques-da-linguagem-JavaScript.
https://imasters.com.br/back-end/15-dicas-e-truques-da-linguagem-JavaScript.
- -5
Figura 2 - Trecho de código com HTML e JavaScript
Salve o arquivo com extensão “.html”. Após salvar, clique duas vezes sobre o arquivo criado. Ele será aberto pelo
seu navegador padrão. Veja o resultado do nosso código na figura seguinte.
Figura 3 - Renderização do trecho de código com HTML e JavaScript
Ao abrir o arquivo HTML foi aberta uma janela de alerta com o texto “Olá mundo JavaScript”. Com relação ao
trecho de código, observe os seguintes pontos em destaque, clicando nos ícones a seguir.
Observando o trecho de código da figura a seguir (“Exibindo o console no navegador Google Chrome), vemos que
a tag <script> que insere o código JavaScript na página HTML está dentro das tags <head> e </head>. Em termos
práticos, a inserção do JavaScript nesse ponto do código tende a deixar a aplicação mais lenta. Isso ocorre porque
esse código é executado antes de qualquer coisa ser mostrada na tela, já que está antes da tag <body> do HTML.
Neste exemplo, temos que clicar no botão OK para que seja aberta a página em si.
Tudo o que está dentro das tags <script> e </script> é o código JavaScript. Neste exemplo, tem somente a
instrução alert(“Olá mundo JavaScript”). Por motivos de compatibilidade de navegador, utilize os atributos
language="JavaScript" e "type", associados a tag <script> conforme o exemplo.
Esse exemplo se limita a chamar a função alert() do JavaScript. A função alert é uma das mais simples funções que
o JavaScript possui e é a responsável por chamar uma janela de alerta na página. Apesar de a janela ser bem
simples, essa função é bem útil quando precisamos apresentar uma mensagem amigável para o usuário.
- -6
No exemplo anterior, o código JavaScript foi executado quando a página foi renderizada pelo navegador.
Entretanto, quando estamos desenvolvendo um sistema web é mais interessante executar o JavaScript a partir
do chamado “console do navegador”. A maioria dos navegadores já vem com essa ferramenta instalada, que pode
ser acessada a partir do menu de opções ou por meio de teclas de atalho. No navegador Google Chrome, é
possível chegar ao console pressionando a tecla F12 e em seguida acessar a aba “Console” ou por meio do atalho
de teclado Control+Shift+C; no Firefox, pelo atalho Control+Shift+K. Veja o exemplo na figura abaixo.
Figura 4 - Exibindo o console no navegador Google Chrome
Abra o seu navegador de preferência e tente encontrar o console dele. Nas seções seguintes faremos o uso dessa
ferramenta para fazer uma introdução a sintaxe do JavaScript.
4.1.2 Sintaxe básica de operadores e variáveis
Podemos somar, subtrair, multiplicar e dividir como em qualquer linguagem. Além disso, temos o operador
chamado , representado pelo operador de percen em % que retorna o resto da divisão por um número.mod tag
Por exemplo, 12%2 é zero, pois 12 dividido por 2 dá o resultado 6 e 12-(6*2) é igual a zero. Já 12%5 é 2, pois 12
/5 é igual a 2 e 12 – (2*5) é igual a 2.
VOCÊ QUER VER?
O desenvolvimento ágil surgiu dentro da indústria de software com a necessidade de dar
maior celeridade na criação de novos produtos. É uma metodologia bastante empregada no
mercado hoje e o conhecimento das principais características faz se necessária para todos
aqueles que desejam trabalhar na área. No canal do Youtube do Andriele Ribeiro é possível
acompanhar uma série de vídeos que tratam desse assunto. Para ter acesso, utilize o endereço: 
(RIBEIRO, 2018).https://www.youtube.com/watch?v=efZlpew90Nk / 
https://www.youtube.com/watch?v=efZlpew90Nk /
- -7
Para armazenarmos um valor para uso posterior, podemos criar uma variável com a sintaxe abaixo:
Figura 5 - Sintaxe de declaração de variável no JavaScript
O “valor” corresponde aos tipos de dados que a variável pode assumir. Neste caso, pode ser um valor numérico
ou uma sequência de caracteres ( ). O valor numérico pode ser inteiro ou em ponto flutuante; aquele questring
contém casas decimais.
Por exemplo: var resultado = 12/2. Neste caso, guardamos o resultado de 12/2 na variável resultado. Ao digitar
esse comando no navegador, será exibida a palavra como resultado, não o valor 6 que é o valorundefined
efetivamente armazenado. Para obter o valor que guardamos nela ou mudar o seu valor, podemos fazer o
seguinte:
Figura 6 - Exibição do resultado no console do navegador
Agora que o valor está armazenado na variável (resultado), podemos aplicar os operadores sobre essa variável,
como no exemplo abaixo:
Figura 7 - Exibição do resultado de manipulação de variáveis no console do navegador
A como foi dito é uma sequência de caracteres delimitada pelo abre e fecha aspas duplas como em: varstring
Podemos executar alguns exemplos simples no próprio navegador web. Digite as seguintes
expressões digitando diretamente no console:
>12-13
>12+10
> 12*3
> 12/2
>12%2
Observe que após cada um dos comandos é exibido o resultado.
- -8
A como foi dito é uma sequência de caracteres delimitada pelo abre e fecha aspas duplas como em: varstring
tecnologia = “JavaScript”.
Um vetor ou array é uma estrutura de dados útil quando precisamos trabalhar com diversos valores
armazenados.
Figura 8 - Sintaxe de manipulação de vetores com JavaScript
Também é possível guardar valores de tipos diferentes:
Figura 9 - Sintaxe de manipulação de vetores de elementos distintos com JavaScript
Para acessar os elementos, é necessário utilizar o abre e fecha colchetes com o índice do elemento, iniciando por
0. Por exemplo:
Figura 10 - Acesso a um elemento do vetor com JavaScript
Veremos a seguir sobre manipulação de conteúdo.
Abra o console do navegador e pratique os dois conceitos vistos até então: operadores e
variáveis. Digite o exemplo abaixo e veja o valor da variável idade alterando em cada etapa. O
valor que deve ser informado está indicado nos comentários de cada comando:
>var idade=10;//undefined
>idade+=10;//idade vale20
>idade-=5;//idade vale15
>idade/=3;//idade vale5
>idade*=10;//idade vale50
- -9
4.1.3 Manipulando o conteúdo HTML com JavaScript
Para permitir alterações na página, ao carregar o HTML da página, os navegadores carregam em memória uma
estrutura de dados que representa cada uma das HTML no JavaScript. Essa estrutura é chamada de DOM (tags
). Essa estrutura pode ser acessada por meio da variável global . O termoDocument Object Model document
"documento" é frequentemente utilizado em referências à página, sendo, portanto, equivalentes os termos
documento e página.
Por exemplo, se no JavaScript quisermos acessar o conteúdo de um cabeçalho de página, podemos utilizar o
comando apresentado na figura abaixo:
Figura 11 - Sintaxe de uso da função de seleção única
O comando utiliza o seletor CSS referente ao cabeçalho (h1) para encontrar a primeira ocorrênciaquerySelector
deste elemento na página HTML. De forma similar, podemos usar um identificador ou nome de classe como
seletores. Veja os exemplos seguintes:
Figura 12 - Sintaxe de uso da função de seleção única em identificadores e classes
Se essa referência for utilizada em vários pontos, pode ser interessantearmazenar o resultado em uma variável:
Figura 13 - Declaração de variável para armazenar o resultado da função de seleção única
A partir do momento que temos o elemento selecionado, ele pode ser manipulado no JavaScript. Por exemplo, se
quisermos alterar o título da h1 selecionada anteriormente, podemos utilizar o comando:tag
Figura 14 - Manipulação de propriedades de elementos selecionados
Às vezes, é necessário selecionar vários elementos na página, não apenas um único. Várias com a classetags
denominada “secao”, por exemplo, que corresponde às partes da sua página HTML. Se o retorno esperado é mais
de um elemento, usamos que devolve uma lista de elementos (array).querySelectorAll
- -10
Figura 15 - Sintaxe de seletor múltiplo com JavaScript
O retorno da função querySelectorAll é um vetor de seletores. Podemos, então, acessar elementos nessa lista
através da posição dele (começando em zero) e usando os colchetes com o índice do elemento a ser buscado. No
exemplo abaixo, são procurados todos os elementos com classe “secao”, mas em seguida somente o primeiro é
acessado:
Figura 16 - Sintaxe de acesso a um elemento após aplicar seletor múltiplo com JavaScript
Como havíamos mencionado, pelo fato de JavaScript rodar no lado cliente, ao alterarmos os elementos da página,
o navegador sincroniza as mudanças e alteram a aplicação em tempo real. Não há necessidade de atualizar a
página.
4.1.4 Funções e eventos
Na seção anterior vimos que com as operações e é possível acessar os elementosquerySelector querySelectorAll
da página HTML e alterar o seu comportamento. Apesar dessas operações serem importantes em especial para
mostrar o processamento em tempo real de algumas operações, a interação com o sistema geralmente,web,
inicia com uma ação do usuário, como com o clique de um botão.
Para definirmos um nome associado com um conjunto de comando ou trecho de código para ser executado em
algum outro momento, utilizamos o recurso denominado . No JavaScript uma função é iniciada com afunção
palavra-chave , seguida do nome dado aquele trecho de código e da lista de parâmetros que serãofunction
utilizadas por aqueles comandos delimitados pelo abre e fecha chaves. Veja o exemplo abaixo:
Figura 17 - Sintaxe de criação de função com JavaScript
A função definida é denominada mostraAlerta, não recebe qualquer parâmetro e contém apenas um comando:
abrir uma janela com o texto “Esse é o alerta”. A chamada para a função deve ser feita utilizando o nome seguido
dos parâmetros, conforme apresentado a seguir:
Figura 18 - Sintaxe de chamada a uma função com JavaScript
Agora, para associar essa função ao evento de clicar o botão em uma página, com identificador “botaoEnvia”, é
- -11
Agora, para associar essa função ao evento de clicar o botão em uma página, com identificador “botaoEnvia”, é
necessário realizar dois passos: (1) selecionar o botão e (2) definir no evento que deve ser executada aonclick
função “mostraAlerta”.
Figura 19 - Sintaxe chamada à função e associação a evento JavaScript
Vejamos agora um exemplo completo de função que recebe parâmetros e o resultado da função é inserido dentro
da página HTML.
Figura 20 - Exemplo completo de uso de função e evento com JavaScript
No exemplo anterior, é definida a função multiplica, que recebe dois parâmetros: p1 e p2. Essa função retorna o
resultado da multiplicação de p1 e p2. Esse valor é retornado para o ponto onde a função foi chamada. A
chamada é feita na linha iniciada com o acesso ao elemento “conteudo” e realiza a inserção de um texto neste
ponto que é o resultado retornado pela função multiplica, passando os parâmetros 4 e 3. Neste momento p1
assume o valor 4 e p2 assume o valor 3. O resultado 12 é inserido na página e o resultado da página renderizada
está apresentado na imagem a seguir:
Figura 21 - Renderização do exemplo completo de uso de função e evento com JavaScript
Em JavaScript existem diversos eventos que podem ser utilizados para que a interação com o usuário dispare
alguma função pelo sistema . Um evento é uma situação nova identificada pelo sistema e que requer oweb
tratamento imediato. Esses eventos estão relacionados geralmente com alguma ação com o mouse ou teclado.
- -12
tratamento imediato. Esses eventos estão relacionados geralmente com alguma ação com o mouse ou teclado.
Em JavaScript podemos associar a chamada a uma determinada função caso ele identifique que um evento
ocorreu. Dentre os eventos existentes, podemos citar o “onclick”, que é um evento levantado quando ocorre um
clique com o .mouse
Abaixo está apresentada uma lista com os principais eventos JavaScript que são utilizados (CAELUM, 2019).
Clique no recurso a seguir para ver essa lista.
Oninput Quando um elemento input tem seu valor modificado.
Onclick Quando ocorre um click com o mouse.
Ondblclick Quando ocorre dois clicks com o mouse.
Onmousemove Quando mexe o mouse.
Onmousedown Quando aperta o botão do mouse.
Onkeypress Quando pressionar e soltar uma tecla.
Onblur Quando um elemento perde foco.
Onfocus Quando um elemento ganha foco.
Onchange Quando um input, select ou text area tem seu valor alterado.
Onload Quando a página é carregada.
Onunload Quando a página é fechada.
Onsubmit
Disparado antes de submeter o formulário. Este evento é muito útil para realizar
validações nos campos de entrada de um formulário.
Acesse o endereço comhttps://www.w3schools.com/js/js_functions.asp da w3schools
exemplos em JavaScript de construção de funções. Logo abaixo do primeiro código fonte há um
botão escrito “Try it Yourself”, que significa “tente você mesmo”. Observe, inicialmente, o que a
função está fazendo. Altere o comportamento da função, seja em termos do operador ou dos
valores literais utilizados. Em seguida, clique no botão “Run” para visualizar como ficou a
imagem.
https://www.w3schools.com/js/js_functions.asp da w3schools
- -13
Após conhecer os conceitos básicos principais do JavaScript, na seção seguinte vamos ver como lincamos o
JavaScript com o HTML.
4.1.5 Lincando o JavaScript no HTML
Para lincar o JavaScript dentro do HTML, a <script> pode ser declarada dentro da <head> ou dentro da tag tag tag
<body>. A diferença é que se o código JavaScript for muito extenso ou demandar muito processamento, o código
inserido na <head> vai demandar mais tempo para renderizar no ambiente do usuário, pois o código terá quetag
ser lido antes do conteúdo da <body>. Por isso, usualmente os que demanda mais processamento sãotag scripts
declarados no final da <body>.tag
Em outros casos, o código JavaScript pode simplesmente travar a leitura do conteúdo dentro da <body>.Vejatag
o exemplo a seguir:
Figura 22 - Lincando HTML e JavaScript na tag
Observe que o processamento inserido entre as <script> de abertura e fechamento trava a renderização dotags
conteúdo da <body>, pois enquanto o usuário não fechar a caixa de alerta o navegador não irá ler o conteúdotag
do corpo da página. A alternativa para isso seria colocar a <script> antes do fechamento da <body>, comotag tag
apresentado na figura abaixo:
VOCÊ QUER LER?
O que chamamos de JavaScript é uma implementação do ECMASCRIPT. Existem várias versões
que vão sendo desenvolvidas. Atualmente, está implementada a versão 10 na maioria dos
browsers, iniciada a partir de junho de 2019. No site da ECMASCRIPT pode encontrar-se
documentação sobre JavaScript. Porém é num formato acadêmico utilizado como referência.
Ele pode ser acessado a partir do endereço: http://www.ecma-international.org/publications
/standards/Ecma-262.htm.
http://www.ecma-international.org/publications/standards/Ecma-262.htm.
http://www.ecma-international.org/publications/standards/Ecma-262.htm.
- -14
Figura 23 - Lincando HTML e JavaScript na tag
Se o mesmo script for utilizado em um arquivo externo, denominado meuscript.js, no arquivo HTML, da mesma
forma, poderíamos adicionar o para o arquivo meuscript.js dentro da <head> ou da <body>, valendolink tag tag
as mesmas considerações feitas anteriormente. A lincagemdo arquivo seria feita também pela <script>, mastag
com a necessidade de informar os atributos type e src, conforme apresentado abaixo:
Figura 24 - Lincando HTML e JavaScript na com arquivo externo
O atributo deve conter o valor "text/JavaScript" e o atributo contém a referência para o local no servidortype src
da aplicação onde o arquivo está localizado. Conforme está apresentado, o arquivo “meuscript.js” está inserido
em uma subpasta denominada “js”, em relação a página HTML onde o está sendo utilizado.script
4.2 Introdução ao jQuery
O jQuery é uma biblioteca JavaScript desenvolvida por John Resig e que se tornou uma das bibliotecas de código
aberto JavaScript mais populares na . Além de ser uma biblioteca gratuita, a curva de aprendizado doInternet
jQuery é extremamente curta e em pouco tempo é possível fazer o seu uso para validar uma série de campos em
um formulário HTML, por exemplo.
Esse comportamento deve-se ao fato de que sua criação teve como foco a simplicidade e o objetivo de facilitar
nossa vida no desenvolvimento de aplicações que necessitariam de muitas linhas de código para obter mais um
determinado efeito, ou efetuar uma requisição Ajax (CAELUM, 2019). 
Ajax significa JavaScript , ou JavaScript e XML Assíncronos. Ele é um conjunto de técnicasAsynchronous and XML
de desenvolvimento voltado para a que permite que aplicações trabalhem de modo assíncrono,web
processando qualquer requisição ao servidor em segundo plano. Com isso, muitos componentes que já tem AJAX
embutido têm ações executadas que não demandam atualização da página.
Veja o exemplo abaixo que mostra um trecho de código em JavaScript e o mesmo trecho de código em jQuery:
- -15
Figura 25 - Exemplo comparativo de código jQuery e JavaScript
Note como a sintaxe do jQuery é bem menor e a biblioteca se encarrega de encontrar o modo mais compatível
possível para adicionar o evento ao elemento cujo id é “cabecalho”.
Assim, com jQuery o código JavaScript é substituído por poucas instruções, o que faz da jQuery uma ferramenta
para os desenvolvedores que já conhecem a base do JavaScript e que querem implementar validações e
processamento de forma mais rápida. Por ser baseada em JavaScript, podemos ainda misturar JavaScript nativo
com jQuery. Vamos ver o seu uso nas seções seguintes.
VOCÊ SABIA?
A documentação e todas as versões da bibliotecas jQuery podem ser acessadas pela página do
desenvolvedor. Assim como ocorre com o Boostrap é possível fazer o download da biblioteca
ou acessar a sua versão por meio das CDNs. Na página de download ficamos com duas opções
para que você escolha a que vai melhor se adequar ao seu projeto: produção (production) ou
desenvolvimento (development). A versão production serve para ambientes de produção. É
uma versão mais reduzida em termos de tamanho, com o código em formato compactado, sem
quebra de linhas e com o código sem comentários, possuindo apenas 15% do tamanho da
versão development. Como o próprio nome indica, esta versão é ideal para ambientes de
desenvolvimento, por se integrar facilmente com as ferramentas e IDEs, não ser compactada e
ter todo o código comentado. Acesse a página de download e escolha a versão development
partir do endereço: .https://jquery.com/
https://jquery.com/
- -16
4.2.1 Incluindo a biblioteca jQuery no HTML
Faremos o uso da versão da biblioteca, a partir do endereço: development https://jquery.com/download/. Para
incluir o jQuery no HTML, de forma similar ao Bootstrap, existem duas formas, que você poderá ver clicando nos
ícones a seguir.
Fazer o download da biblioteca para o seu ambiente de desenvolvimento.
Utilizar uma CDN e fazer referência para a biblioteca disponibilizada na Internet.
Em caso de , para deixar o código organizado, vamos inserir a biblioteca dentro de uma pastadownload
denominada “js”. Assim como a inserção de um arquivo JavaScript, em ambos os casos, a biblioteca é inserida por
meio da <script> dentro do cabeçalho ou dentro do corpo ( <body>) do HTML. Veja o exemplo a seguir:tag tag
Figura 26 - Inserindo jQuery na opção de download da biblioteca
No caso de uso do CDN, acessando a página da biblioteca o provedor sugerido pelos desenvolvedores
disponibiliza o link para as diferentes versões no endereço: https://code.jquery.com/. A figura a seguir mostra a
página inicial, sendo a versão 3 aquela mais recente no momento.
Figura 27 - Captura de tela do site de download da biblioteca jQuery
Como é possível observar, são disponibilizados separados para as versões ( ) e delinks production minified
desenvolvimento ( ). Ao clicar na segunda opção é aberta uma janela modal com o valor da uncompressed tag
script que deve ser utilizada na página HTML. Abaixo segue um exemplo de uso.
https://jquery.com/download/
https://code.jquery.com/
- -17
script que deve ser utilizada na página HTML. Abaixo segue um exemplo de uso.
Figura 28 - Inserindo jQuery na opção de uso de CDN
Veremos a seguir sobre a função $.
4.2.2 A função $
Fazer o download da biblioteca para o seu ambiente de desenvolvimento.
Com jQuery temos que utilizar a função $() para encontrarmos um elemento HTML dentro da aplicação e
utilizarmos as funções da biblioteca. Essa função é tecnicamente conhecida como construtor ou função
construtora e ela estará presente em todas as aplicações que utilizarmos a jQuery. Com ela é possível selecionar
elementos com maior facilidade, compatibilidade e com menos código. Ocasionalmente podemos vir a utilizar
alguma outra biblioteca que também tenha como uso uma função chamada $. Caso isso acontece podemos usar
como alternativa a função jQuery().
O construtor faz uso do seguinte parâmetro, onde alvo é um seletor CSS para TAG, ID ou classe.
Figura 29 - Sintaxe de uso da função $
Vejamos alguns exemplos de sua utilização.
Figura 30 - Exemplos de uso da função $
Na figura anterior estão sendo selecionados, respectivamente, todos os Como podemos ver, no exemplo acima
- -18
Na figura anterior estão sendo selecionados, respectivamente, todos os Como podemos ver, no exemplo acima
estamos fazendo com que a jQuery encontre os elementos HTML <h1>, <p> e aqueles com os seletores , id="
conteúdo" e a class="teste".
Após selecionar o elemento a ser manipulado, o próximo passo no jQuery é associar uma ação a ser feita com os
elementos selecionados. Assim, nas próximas seções veremos a função e a sobre a construção de máscarasready
com jQuery.
4.2.3 Função $(document).ready()
Conforme vimos anteriormente, o operador $ seleciona um determinado elemento na página HTML. Se passamos 
 para a função $, estamos, então, selecionando toda a página. A partir de então, podemos fazer umadocument
chamada à função ready(conteudo). De forma simplificada, a função é$(document).ready(conteudo)
responsável por executar o conteúdo do método ready(), tão logo o navegador tenha carregado todos os
elementos HTML.
O modo mais comum de utilizarmos essa função é em conjunto com uma função anônima. Uma função anônima,
como o nome indica não tem um nome. Ela apenas contém a palavra-chave seguida de abre e fechafunction
parênteses. Entre o abre e fecha chaves da função anônima são inseridos os comandos que desejamos executar.
Vejamos um exemplo.
VOCÊ SABIA?
Que é possível testar todos os componentes do jQuery vistas nessa unidade em uma
ferramenta online e gratuita? Para isso, basta acessar o site do w3cschool e selecionar a
tecnologia jQuery. Esse recurso pode ser utilizado por outras tecnologias. Os exemplos podem
ser alterados e verificada a visualização pelo próprio renderizador dentro do site. Acesse o link
direto e comece a praticar tudo o que você tem aprendido no curso: https://www.w3schools.
.com/jquery/
https://www.w3schools.com/jquery/
https://www.w3schools.com/jquery/
- -19
Figura 31 - Exemplo de uso da função ready() do jQuery
O trecho de código que contém a definição da função anônima contém apenas a instrução de criação de uma
janela de alerta. O resultado é apresentado na figura abaixo. A janela de alerta com o texto “páginacarregada” é
exibida assim que a página é renderizada.
Figura 32 - Renderização do exemplo de uso da função ready() do jQuery
A seguir veremos sobre uso de máscaras para campos.
4.2.4 Utilizando máscaras para campos
O jQuery possui uma série de interessantes para formatação e validação de campos. Um deles é o jQueryplugins
Mask Plugin. Com ele é possível definir máscaras ou padrões dos campos de entrada HTML. Essa é uma
funcionalidade bastante útil em um formulário de cadastro ou em uma tela de autenticação do usuário, por
- -20
funcionalidade bastante útil em um formulário de cadastro ou em uma tela de autenticação do usuário, por
exemplo. Para utilizá-lo, inicialmente faz se necessário inserir o link da biblioteca na <head>. Como foitag
explicado para o jQuery, a inclusão pode ser feita por meio de download da biblioteca (<https://igorescobar.
github.io/jQuery-Mask-Plugin/>) ou inserção do CDN (<https://cdnjs.com/libraries/jquery.mask >). No caso do
CDN, na figura abaixo são apresentados os endereços para referência das versões compactas e de desenvolvedor:
Figura 33 - Links de acesso ao CDN do plugin jQuery Mask
Para utilizar o , inicialmente, você informa o seletor, seguido de .mask e como parâmetro você vai passar aplugin
máscara que você quer que o campo tenha. Exemplo:
Figura 34 - Definição de máscara de campo data com plugin jQuery Mask
Neste exemplo da figura anterior, todos os campos de entrada que possuem a classe “.date” terão a máscara
aplicada.
No jQuery Mask Plugin você não tem máscaras pré-estabelecidas, você pode construí-las usando uma sintaxe
bem simplificada. Na figura a seguir são apresentadas algumas máscaras comumente utilizadas:
Figura 35 - Exemplos de máscaras de campo diversos com plugin jQuery Mask
Veja que é possível definir o tipo de dado que o usuário pode imputar a cada dígito. Nesta máscara, por exemplo:
https://igorescobar.github.io/jQuery-Mask-Plugin/
https://igorescobar.github.io/jQuery-Mask-Plugin/
https://cdnjs.com/libraries/jquery.mask
- -21
Figura 36 - Exemplo de associação de máscara com elemento HTML
A máscara definida na figura anterior limita o usuário a digitar exatamente: uma sequência de três caracteres 
 números (AAA); em seguida, vem um caractere de espaço; na sequência vêm três caracteres númerosalpha
(000); depois, vêm um caractere do tipo traço; em seguida, vêm um caractere do tipo (S), seguido de umstring
caractere do tipo inteiro (0) e seguido de um caractere do tipo (S).string
4.2.4 Exemplo prático
Como foi visto, o jQuery possui uma série de interessantes para formatação e validação de campos. Umplugins
deles é o jQuery Mask Plugin. Vamos utilizá-lo para criar uma máscara para um campo do tipo CPF. Suponha que
seu campo de CPF no HTML seja assim:
Figura 37 - Definição de máscara para campo CPF com jQuery Mask
Vamos primeiro selecionar o campo:
Figura 38 - Seleção do campo CPF com jQuery
Agora, será aplicada nele a função de máscara do jQuery Mask Plugin:
Figura 39 - Atribuindo a máscara ao elemento com id CPF
O código HTML completo com o campo e o jQuery está apresentado na sequência:
- -22
Figura 40 - Trecho de código completo de atribuição de máscara a um campo CPF
O campo CPF deve aparecer com máscara, conforme a figura abaixo:
Figura 41 - Renderização do código de atribuição de máscara a um campo CPF
E assim concluímos nossa seção sobre o jQuery.
- -23
Síntese
O uso de e bibliotecas de desenvolvimento de é extremamente comum hoje em dia. Seframeworks software
olharmos os requisitos de vagas interessantes para trabalhar com desenvolvimento , certamente se éweb
esperado atribuições de ou de , certamente o domínio de jQuery e Bootrap comofront-end full stack developer
alguns dos requisitos solicitados. Entretanto, somente o domínio do e da biblioteca não é suficiente.framework
O entendimento e domínio do HTML, do CSS, do JavaScript e como essas tecnologias funcionam em conjunto
também são solicitados. Além disso, hoje em dia, esses são os recursos em destaque, mas daqui a algum tempo
novos e bibliotecas são inseridos no mercado. O conhecimento das tecnologias básicas sempre seráframeworks
essencial. Aproveite todos os recursos apresentados e pratique. O conteúdo é vasto, mas somente com a prática
ficará mais fácil memorizar os componentes. Além disso, o entendimento sobre como tudo isso se encaixa vai
fazer de você um profissional diferenciado. 
Bibliografia
CAELUM. Desenvolvimento Web com HTML, CSS e JavaScript. Disponível em https://www.caelum.com.br
. Acesso em: 11 ago. 2019./apostila-html-css-JavaScript/
INSTITUTO NUPEF. PoliTICs, Rio de Janeiro, n. 26, out. 2017. Disponível em: https://politics.org.br/sites/default
 Acesso em: 11 ago. 201926 jun. 2019./files/downloads/politics26-versao-webweb.pdf.
LEMAY, L.; COLBURN, R.; TYLER, D. Aprenda a criar páginas Web com HTML e XHTML em 21 dias. São Paulo:
Pearson Education do Brasil, 2002. Disponível em: http://aulaaberta.bv3.digitalpages.com.br/users/publications
Acesso em: 11 ago. 201926 jun. 2019./9788534614283. 
MILETTO, E. M. Desenvolvimento de software ii introdução ao desenvolvimento web com HTML, CSS,
javascriptJavaScript e PHP. Porto Alegre: Bookman 2014.
RIBEIRO, A. Decifrando Agile (Série de vídeo). Tecnologia, Cultura Nerd e Assuntos Aleatórios - Filmes e Séries.
Youtube, , 17 set. 2018. Disponível em: . Acesso em: 02 jul.https://www.youtube.com/watch?v=efZlpew90Nk /
201911 ago. 2019.
TERUEL, E. C. HTML 5 - guia prático. 2. São Paulo: Érica, 2014.
W3Schools. HTML Element Reference, 2019. Disponível em: Acesso em:https://www.w3schools.com/tagstags/.
11 ago. 201925 jun. 2019.
https://www.caelum.com.br/apostila-html-css-JavaScript/
https://www.caelum.com.br/apostila-html-css-JavaScript/
https://politics.org.br/sites/default/files/downloads/politics26-versao-webweb.pdf.
https://politics.org.br/sites/default/files/downloads/politics26-versao-webweb.pdf.
http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283.
http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283.
https://www.youtube.com/watch?v=efZlpew90Nk /
https://www.w3schools.com/tagstags/.
	Introdução
	4.1 A Linguagem JavaScript
	4.1.1 Características da linguagem JavaScript
	4.1.2 Sintaxe básica de operadores e variáveis
	4.1.3 Manipulando o conteúdo HTML com JavaScript
	4.1.4 Funções e eventos
	4.1.5 Lincando o JavaScript no HTML
	4.2 Introdução ao jQuery
	4.2.1 Incluindo a biblioteca jQuery no HTML
	4.2.2 A função $
	4.2.3 Função $(document).ready()
	4.2.4 Utilizando máscaras para campos
	4.2.4 Exemplo prático
	Síntese
	Bibliografia