Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Prévia do material em texto
Imprimir
INTRODUÇÃO
Olá, estudante!
JavaScript é uma linguagem que permitiu que páginas web, antes estáticas, tornassem-se interativas. Por
meio de métodos e propriedades do JavaScript, é possível realizar alterações diretamente no documento
HTML, manipulando o chamado DOM.
DOM é um acrônimo para Document Object Model ou, na tradução, “Modelo de Objeto de Documentos”.
Essa especi�cação trata da tentativa de padronizar a forma como documentos web são construídos, a �m de
que navegadores e diferentes linguagens de programação consigam lê-los, independentemente de quem os
produziu e da plataforma utilizada.
Nesta aula, você vai aprender a manipular documentos web por meio do DOM usando JavaScript, bem como
conhecer os métodos e elementos do DOM e ver como manipular estilos CSS de páginas usando JavaScript.
Bons estudos!
INTRODUÇÃO AO DOM
DOM, acrônimo para Document Object Model ou, na tradução, “Modelo de Objeto de Documentos”, é
considerado a API fundamental para manipular documentos HTML (FLANAGAN, 2011). A ideia por trás da
criação do DOM é que páginas da internet possam ser construídas com uma estrutura padronizada, assim,
diferentes linguagens de programação podem acessar e manipular objetos presentes no documento, que, por
sua vez, pode ser carregado corretamente de forma independente do navegador, do sistema ou da
plataforma utilizada.
Na hierarquia DOM, elementos são representados como uma árvore, e em um documento HTML, as tags
representam os nós da árvore. O elemento de nível superior é denominado elemento pai, enquanto os
elementos internos são chamados de elementos �lhos e os elementos de mesmo nível são chamados de
irmãos, conforme Figura 1.
Figura 1 | Ilustração da árvore DOM de um documento web. Tags HTML representam os nós
Aula 1
APIS DE NAVEGADOR – MANIPULANDO DOCUMENTOS
Nesta aula, você vai aprender a manipular documentos web por meio do DOM, conhecer seus métodos e
elementos usando JavaScript, e manipular estilos CSS.
49 minutos
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 1/56
Fonte: adaptada de Mariano; Melo-Minardi (2017).
Essa árvore DOM é uma representação deste mesmo código em HTML:
Código 1 | Árvore DOM
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <meta>
6 </head>
7 <body>
8 <a></a>
9 <p></p>
10 <ul>
11 <li></li>
12 </ul>
13 </body>
14 </html>
Fonte: elaborado pelo autor.
Introdução a eventos no DOM
No DOM, a janela e os guias de um navegador são representados pelo objeto window, que possui a
propriedade document, que representa o conteúdo da janela (FLANAGAN, 2011). Com JavaScript, é possível
navegar pela árvore DOM, manipulando elementos e eventos. Em um arquivo HTML, inclua o seguinte código:
Código 2 | Arquivo HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>DOM</title>
5 <meta charset="utf-8">
6 </head>
7
8 <body onload="window.alert('Olá, mundo!')"></body>
9
10 </html>
Fonte: elaborado pelo autor.
Note que, ao executar esse código, surge uma simples mensagem “Olá, mundo!” (conforme Figura 2) em uma
caixa de diálogo gerada pelo comando alert( ).
Figura 2 | Alerta gerado por um evento onload
Fonte: elaborada pelo autor.
Note que não seria nada diferente criar um simples script com um comando alert( ) embutido, entretanto,
aqui, utilizamos vários conceitos da manipulação do DOM.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 2/56
Primeiro, utilizamos um atributo HTML para disparar um evento onload, que é executado no momento que a
tag é carregada, ou seja, como aplicamos à tag body, o evento será disparado imediatamente quando a tag for
carregada. Podemos imaginar um evento como uma ação que ocorre quando algum “gatilho” é disparado, e o
onload é um dos exemplos mais simples de gatilhos, pois é disparado quando alguma coisa é carregada, mas
há muitos outros tipos. Os mais comuns são os eventos que envolvem ações do mouse (como quando
clicamos com o mouse em algum lugar: onclick), ações do teclado (quando pressionamos uma tecla: keypress),
ações realizadas em formulários (como quando clicamos no botão de envio de um formulário: submit) ou
eventos de janela (como rolar na página, scroll, ou mesmo os eventos que envolvem o simples carregamento,
load). No exemplo apresentado, utilizamos um evento de janela (window), e, no caso, o método escolhido foi o
alert(), que exibe uma mensagem em uma caixa de diálogos. Uma lista completa de eventos e recursos pode
ser encontrada aqui: https://mzl.la/3q3kw64.
Manipulando o DOM: escrevendo em um documento
Podemos manipular o conteúdo de um documento HTML por meio do DOM, usando o objeto document no
JavaScript. Uma manipulação simples seria utilizar JavaScript para gravar informações diretamente no
documento, e, para isso, criamos um documento HTML, que vamos chamr de “index.html”, e outro arquivo
JavaScript, que vamos chamar de “script.js”:
Código 3
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>DOM</title>
5 <meta charset="utf-8">
6 <script src="script.js"></script>
7 </head>
8 <body></body>
9 </html>
script.js
document.write("Olá, mundo!")
Ao abrirmos o arquivo HTML no navegador, aparecerá a seguinte mensagem (Figura 3):
Figura 3 | Mensagem exibida no navegador
Fonte: elaborada pelo autor.
Note que a mensagem não estava inicialmente presente no documento HTML, mas quando acessamos a
ferramenta inspecionar no navegador (e clicamos na aba “Elementos”) podemos perceber que o texto está,
agora, presente dentro da tag Body. Observe a Figura 4.
Figura 4 | Código visualizado na ferramenta inspecionar do Chrome (pressione F12). Note que a tag body estava vazia no código que
declaramos inicialmente, e ela foi preenchida pelo script
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 3/56
https://developer.mozilla.org/pt-BR/docs/Web/Events
Fonte: elaborada pelo autor.
Nesse exemplo, usamos o método write( ) para gravar uma mensagem diretamente no corpo do documento
(local de�nido pelo objeto document), e note que, se houver qualquer coisa no documento, o comando
document.write() irá gravar antes. Por exemplo, digamos que desejamos alterar o arquivo HTML:
<body>Tudo bem?</body>
Ao recarregarmos a página, veremos a �gura a seguir:
Figura 5 | Mensagem gerada pelo script é gravada antes da mensagem que já estava no <body>
Fonte: captura de tela elaborada pelo autor.
Podemos de�nir locais especí�cos para que as alterações ocorram, mas, antes, você precisa conhecer os
métodos de seleção de elementos no DOM, que veremos no próximo bloco.
VIDEOAULA: INTRODUÇÃO AO DOM
Nesta aula, você irá conhecer a árvore DOM (Document Object Model).
Bons estudos!
MÉTODOS E ELEMENTOS DOM
Vimos, anteriormente, que é possível manipular um documento HTML usando JavaScript pelo objeto
document. Como exemplo, usamos o método write() para gravar uma mensagem na tela, entretanto, da
forma feita, as mensagens só poderiam ser gravadas no início do texto. JavaScript fornece uma série de
métodos para selecionar e manipular partes especí�cas de documento web. Por exemplo: podemos
selecionar elementos especí�cos do DOM por meio de quatro funções:
1. getElementById: seleciona um único elemento com base em seu identi�cador único (id).
2. getElementsByTagName: seleciona todos os elementos de tags de mesmo nome especi�cado.
3. getElementsByClassName: selecionatodos os elementos que possuem determinada classe (class).
Videoaula: Introdução ao DOM
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 4/56
4. querySelectorAll: seleciona elementos a partir de um seletor CSS.
Para exploração desses métodos, vamos utilizar um modelo de site bem simples, como podemos visualizar na
Figura 6:
Figura 6 | Modelo de site bem simples composto por quatro seções: (1) cabeçalho (vermelho), (2) seção principal de conteúdo (azul), (3)
barra lateral (verde) e (4) rodapé (cinza)
Fonte: captura de tela elaborada pelo autor.
A seguir, serão apresentados os códigos HTML (responsável pelo arcabouço da página) e CSS (responsável
pelos estilos) que geram essa página:
Index.html
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 5/56
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>DOM</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="estilo.css">
7 <script src="script.js"></script>
8 </head>
9 <body>
10 <!-- Cabeçalho da página -->
11 <header>
12 <div id="logo">
13 <a>Meu site</a>
14 </div>
15
16 </header>
17
18 <!-- principal região -->
19 <main>
20
21 <!-- Seção à esquerda -->
22 <section>
23 <h1>Home</h1>
24 <p class="texto">Bem-vindo ao meu site.</p>
25 <p class="texto">Tudo bem?</p>
26 </section>
27
28 <!-- menu lateral direito -->
29 <aside>
30 <p>Barra lateral.</p>
31 </aside>
32
33 </main>
34
35 <!-- Rodapé -->
36 <footer>
37 Todos os direitos reservados.
38 </footer>
39
40 </body>
41 </html>
estilo.css
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 6/56
1 /* remove margens inseridas pelo navegador */
2 *{ margin:0; }
3
4 /* TAGS */
5 header{
6 height: 100px; /* altura */
7 background-color: red; /* fundo: vermelho */
8 }
9 section{
10 height: 200px; /* altura */
11 width: 70%; /* largura */
12 background-color: blue; /* fundo: azul */
13 float:left; /* alinhar à esquerda */
14 }
15 aside{
16 height: 200px; /* altura */
17 width: 30%; /* largura */
18 background-color: green; /* fundo: verde */
19 float:right; /* alinhar à direita */
20 }
21 footer{
22 clear:both; /* corrige problemas de alinhamento */
23 height: 30px; /* altura */
24 background-color: grey;/* fundo cinza */
25 text-align: center; /* texto centralizado */
26 }
27
28 /* ID */
29 #logo{
30 color:white; /* cor texto: branco */
31 font-size: larger; /* fonte maior */
32 text-align: center; /* texto-centralizado */
33 }
34
35 /* CLASS */
36 .texto{
37 color: yellow; /* cor amarelo */
38 }
Não é o objetivo desta aula discutir como esses códigos HTML e CSS foram implementados e sim como
acessá-los e manipulá-los usando JavaScript. Por isso, foram utilizados vários tipos distintos de tags e cores
nas seções para ilustrar como manipular o DOM usando JavaScript.
O getElementById é usado para selecionar um elemento com base no seu ID. No exemplo, temos apenas um
elemento com ID con�gurado, denominado “logo’, então, coletá-lo. Para tanto, crie um arquivo chamado
“script.js”:
1 var logo = document.getElementById('logo')
2 console.log(logo)
Ao executarmos esse código, vemos, no console, o valor null, e isso ocorre porque declaramos o script antes
do elemento (lembre-se de que o JavaScript lerá linha a linha, logo, se o script for carregado antes do
elemento, ele não conseguirá encontrá-lo), no entanto, podemos resolver isso alterando a posição de
chamada do script (movendo-o da tag para o , por exemplo) ou usar um evento onload para esperar que todo
arquivo HTML esteja carregado para que o script possa começar a executar. Preste atenção em como
podemos usar esse tipo de evento em um arquivo JS:
1 window.onload = ()=>{
2 var logo = document.getElementById('logo')
3 console.log(logo)
4 }
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 7/56
Agora, observe o resultado no console:
Figura 7 | Conteúdo de um elemento coletado por getElementById
Fonte: captura de tela elaborada pelo autor.
Veja que, ao carregarmos o objeto para uma variável, todo o conteúdo da tag é selecionado e armazenado
nela. Uma vez que o objeto é armazenado em uma variável, podemos fazer alterações aplicando um novo
valor à propriedade innerText. Veja:
1 window.onload = ()=>{
2 var logo = document.getElementById('logo')
3
4 logo.innerText = "Mudando o título"
5 console.log(logo)
6 }
Veja que, ao executarmos esse código, o título da página é substituído, conforme Figura 8:
Figura 8 | Substituindo um título
Fonte: captura de tela elaborada pelo autor.
Note que, dentro desse elemento, havia uma tag que foi removida, e isso aconteceu porque a propriedade
innerText permite a alteração apenas do texto. Podemos fazer alterações que permitam a incorporação de
códigos HTML usando a propriedade innerHTML:
logo.innerHTML = "<a>Mudando o título</a>"
O método getElementsByTagName permite coletar todos os elementos com um mesmo nome de tag. Por
exemplo: em nosso código, temos várias tags <p>, e podemos coletá-las usando:
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 8/56
1 window.onload = ()=>{
2 var tags_p = document.getElementsByTagName('p')
3
4 console.log(tags_p)
5 }
Note que, ao executarmos esse código, o JavaScript retorna um objeto do tipo HTMLCollection, assim como
temos na Figura 9.
Figura 9 | Coletando vários elementos
Fonte: captura de tela elaborada pelo autor.
Podemos manipulá-lo usando um laço de repetição:
1 window.onload = ()=>{
2 var tags_p = document.getElementsByTagName('p')
3
4 for(tag of tags_p){
5 console.log(i)
6 }
7 }
Note que precisamos usar a palavra reservada of para indicar que queremos navegar pelos itens da variável
em questão. Observe o resultado:
Figura 10 | Navegando por resultados de uma consulta getElementsByTagName
Fonte: captura de tela elaborada pelo autor.
getElementsByClassName
Podemos usar o código a seguir para selecionar elementos com base no nome da classe:
1 window.onload = ()=>{
2 var class_texto = document.getElementsByClassName('texto')
3
4 for(i of class_texto){
5 console.log(i)
6 }
7 }
Note que, assim como o getElementsByTagName, o método getElementsByClassName retorna uma lista de
objetos que podemos manipular usando laços. No exemplo, temos apenas duas tags que recebem a classe
“texto”. Veja o que será impresso no console:
Figura 11 | Usando getElementsByClassName
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao=… 9/56
Fonte: captura de tela elaborada pelo autor.
O querySelectorAll permite a realização de buscas avançadas com base em seletores CSS:
1 window.onload = ()=>{
2 var p_em_aside = document.querySelectorAll('aside p')
3
4console.log(p_em_aside[0])
5 }
No código acima, recuperamos todas as tags que estão dentro de uma tag (seletor “aside p”). Note que esse
método também retorna uma lista de itens, mas, dessa vez, optamos por coletar o primeiro elemento
diretamente, usando colchetes e indicando o índice 0.
VIDEOAULA: MÉTODOS E ELEMENTOS DOM
Nesta aula, você vai aprender a selecionar elementos do DOM com base no ID, na class, na tag e no seletor
CSS usando os métodos JavaScript. Bons estudos!
DOM CSS
O CSS é a linguagem usada para con�guração de estilos da página, como cores, fontes, altura largura de
blocos, entre outras inúmeras funcionalidades. Por padrão, as cores são de�nidas no arquivo CSS e
incorporadas à página na tag , todavia, podemos alterar os estilos após o carregamento usando códigos
JavaScript. Em aplicações reais, a alteração de estilos pós-carregamento é de vital importância.
Por exemplo: imagine que você está desenvolvendo uma página de cadastro de produtos e que ela foi
construída a partir de requisições assíncronas, em que, ao enviar o produto, não é necessário recarregar a
página. Em certas situações, isso poderá ajudar a melhorar a performance do site com um gigantesco número
de acessos, uma vez que os servidores não vão precisar enviar todas as informações novamente, entretanto,
como o usuário do sistema saberá que o envio foi feito?
A solução mais simples para isso é exibir uma mensagem ao usuário de que o envio foi realizado com sucesso.
Em geral, isso é feito em um box com fundo verde e um sinal indicando o sucesso no envio. Esses
componentes visuais são construídos usando-se CSS, entretanto, podemos carregá-los para a página usando
os métodos e as propriedades da linguagem JavaScript. Observe a sintaxe de como isso pode ser feito:
[elemento-selecionado].style.[propriedade-css] = [novo-valor]
Para ilustrar isso, vamos alterar o estilo de alguns dos componentes da página criada anteriormente. No
exemplo a seguir, vamos alterar a cor de fundo da tag de vermelho para roxo.
Videoaula: Métodos e elementos DOM
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 10/56
1 window.onload = ()=>{
2
3 // selecionando o objeto
4 var selecionado = document.getElementsByTagName('header');
5
6 // pegando apenas o primeiro resultado
7 selecionado = selecionado[0];
8
9 // alterando a cor do fundo para roxo
10 selecionado.style.backgroundColor = 'purple';
11
12 }
Figura 12 | Páginas antes e depois de executar o script
Fonte: captura de tela elaborada pelo autor.
Note que a propriedade CSS responsável por alterar a cor de fundo é background-color, entretanto, nós
utilizamos backgroundColor, e isso foi necessário pois o JavaScript não permite “-“ nos nomes das variáveis.
Por isso, para alterar propriedades CSS compostas, como background-color, text-align, font-size, entre outras,
é necessário remover o hífen e colocar em maiúscula a primeira letra da segunda palavra (por exemplo:
backgroundColor, textAlign, fontSize); além disso, uma vez feita a seleção, é possível aplicar várias
propriedades ao mesmo elemento, como:
1 // aplicando várias propriedades
2 selecionado.style.fontSize = '80px'; // aumentar fonte
3 selecionado.style.color = 'black'; // texto em preto
4 selecionado.style.width = '50%'; // largura = 50%
Figura 13 | A fonte do título foi aumentada e a largura do bloco reduzida pela metade. Note que o comando que altera a cor para o preto
não funcionou
Antes
Depois
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 11/56
Fonte: captura de tela elaborada pelo autor.
Note que a propriedade que altera a cor do texto não funcionou na prática (ainda que tenha sido aplicada à
tag ), e isso se deve ao fato de o texto estar embutido dentro de outra tag (uma div). Além disso, há uma
propriedade CSS aplicada diretamente a essa div que altera a cor para o branco.
Para resolver esse problema, podemos fazer uma nova seleção partindo da seleção feita anteriormente. No
código a seguir, criaremos uma nova variável chamada “texto_selecionado”, e essa variável será responsável
por armazenar o resultado de uma busca pelo elemento de ID “logo” (ou seja, o texto “Meu site”).
1 // selecionando a div de id #logo
2 var texto_selecionado=selecionado.querySelectorAll('#logo')[0]
3
4 // muda a cor do texto para preto
5 texto_selecionado.style.color = 'black';
Observe, na Figura 14, que, agora, a cor da fonte do título foi alterada, passando a ser preta.
Figura 14 | A cor do título passou a ser preta
Fonte: captura de tela elaborada pelo autor.
Por �m, repare no código a seguir:
var texto_selecionado=selecionado.querySelectorAll('#logo')[0]
Nele, há dois pontos de destaque:
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 12/56
('#logo'): o símbolo “#” antes do nome buscado indica que estamos procurando um ID; se estivéssemos
buscando uma classe, esse símbolo seria substituído por um ponto “.”;
[0]: é importante refrisar que, mesmo que a busca retorne apenas um elemento, o método
querySelectorAll retorna uma lista de itens, por isso, devemos indicar que queremos apenas o elemento
no índice zero.
Com os conhecimentos apresentados até aqui, você já é capaz de realizar quaisquer alterações no CSS usando
JavaScript. Por conta própria, teste algumas outras propriedades CSS e manipule-as usando JavaScript. Bons
estudos!
VIDEOAULA: DOM CSS
Nesta aula, você vai aprender a manipular o CSS usando JavaScript. Bons estudos!
ESTUDO DE CASO
Você foi contratado para trabalhar em uma agência de publicidade que também atua como desenvolvedora
de sites: a Empresa A. Nas últimas semanas, você tem recebido muitas atividades para concluir, em especial, a
pedido do time de recursos humanos. De fato, toda a equipe da empresa tem ouvido falar de você e, por isso,
outros setores querem a sua ajuda.
O time de desenvolvimento �nalmente percebeu que você estava pronto para um novo desa�o e o colocou
para trabalhar em um projeto de um cliente importante: uma agência de moda ou a Empresa B. Atualmente,
nossa agência cuida da publicidade da Empresa B, portanto, é de nosso interesse que o website siga os
valores e as estratégias de�nidas pelo setor de marketing. A Empresa B é uma organização jovem e moderna
e tem seu portfólio baseado na coleção da estação, por isso, decidiu que a cor de fundo do site deverá se
basear na estação atual.
Nosso time de designers de�niu quatro tons para as quatro estações:
Primavera: #�d6ef
Verão: #fdf080
Outono: #c0dd5d
Inverno: #9dbce3
Esses números hexadecimais representam códigos de cores no padrão RGB (red, green, blue) e irão formar as
seguintes cores:
Figura 15 | Cores para as estações. Topo-esquerda: primavera #�d6ef; topo-direita: verão: #fdf080; rodapé-esquerda: outono: #c0dd5d;
rodapé-direita: inverno: #9dbce3
Videoaula: DOM CSS
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 13/56
Fonte: elaborada pelo autor.
O sistema do site foi construído usando-se o framework CodeIgniter em PHP, mas você não precisa se
preocupar com a tecnologia usada no back-end, você apenas editará um script chamado “cores.js”, que será
incluído na página.
As estações mudam próximas a essasdatas:
22 de setembro: primavera.
21 de dezembro: verão.
20 de março: outono.
21 de junho: inverno.
Entretanto, esse valor muda a cada ano, e é preferível para a empresa fazer a alteração de cores alguns dias
antes, para os clientes �carem cientes da nova estação que está por vir. Por isso, considere apenas os meses
para as trocas de cores (setembro, dezembro, março e junho).
Seu desa�o, agora, é construir um código fonte que altera a cor de fundo da página de acordo com a estação
do ano. Para isso, utilize o seu editor de código e um navegador para testar as implementações.
Dica
Você pode obter a data em JavaScript usando a função Date(). No caso, você deve instanciar um novo
objeto para receber Date(). Dessa forma: var data = new Date();
Dia, mês e ano podem ser coletados do novo objeto usando-se os métodos getDate(), getMonth() e
getFullYear(), respectivamente (apenas para getMonth, é necessário somar um, pois ele retorna meses de
0 a 11).
RESOLUÇÃO DO ESTUDO DE CASO
Para solucionar esse desa�o, primeiro, devemos obter a data atual, pegar o número correspondente ao mês
e, em seguida, veri�car qual o mês atual para de�nir a cor que será aplicada à página. Por �m, podemos
alterar a cor de fundo da página modi�cando a propriedade background-color usando o seletor do body. Veja
como implementar isso:
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 14/56
1 // data atual
2 var data = new Date();
3 var dia = data.getDate();
4 var mes = data.getMonth()+1;
5 var ano = data.getFullYear();
6
7 // estação = [mes]
8 var outono = 3;
9 var inverno = 6;
10 var primavera = 9;
11 var verao = 12;
12
13 var cor; // nenhuma cor definida
14
15 // outono
16 if((mes >= outono)&&(mes < inverno)){
17 cor = "#c0dd5d";
18 }
19 // inverno
20 else if((mes >= inverno)&&(mes < primavera)){
21 cor = "#9dbce3";
22 }
23 // primavera
24 else if((mes >= primavera)&&(mes < verao)){
25 cor = "#ffd6ef";
26 }
27 // verão
28 else if(((mes >= 1)&&(mes < outono))||(mes==12)){
29 cor = "#fdf080";
30 }
31
32
33 // alterando a cor do background
34 document.body.style.backgroundColor = cor;
Coletamos o mês atual na linha 4 e precisamos somar 1 ao valor do mês, pois o JavaScript retorna uma lista
numérica iniciada de 0 a 11, logo, o mês de janeiro estaria na posição 0, o mês de fevereiro na posição 1 e
assim sucessivamente. Das linhas 7 a 11, indicamos o número do mês de cada estação, e das linhas 15 a 30,
de�nimos qual a cor correspondente a cada mês. Veja que o maior desa�o foi encontrado nos meses
correspondentes ao verão, pois deveria pegar os meses de dezembro, janeiro e fevereiro (ou seja, 12, 1 e 2),
por isso, usamos as regras: mês >= 1 e mês < 3 ou mês igual a 12 e, por �m, alteramos a cor do background na
linha 34.
Saiba mais
Seletores CSS
Aprenda mais sobre seletores CSS acessando este artigo. Disponível em: https://mzl.la/3r1W1p5. Acesso
em: 17 dez. 2021.
Elementos DOM HTML JavaScript
Conheça os elementos para manipulação de HTML com JavaScript. Disponível em: https://bit.ly/3f8lvvB.
Acesso em: 17 dez. 2021.
Eventos e DOM
Acesse o conteúdo do link a seguir e aprenda um pouco mais sobre manipulação de eventos e do DOM
usando JavaScript.
Disponível em: https://bit.ly/3JYI4Ru. Acesso em: 17 dez. 2021.
jQuery
Resolução do Estudo de Caso
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 15/56
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Selectors
https://www.w3schools.com/js/js_htmldom_elements.asp
https://diegomariano.com/fundamentos-do-javascript/#Eventos_e_DOM
jQuery é um dos frameworks JavaScript mais populares do mercado; ele permite uma manipulação do
DOM de forma mais simpli�cada. Disponível em: https://jquery.com/. Acesso em: 17 dez. 2021.
INTRODUÇÃO
Olá, estudante!
Ao adentrar no mercado de trabalho como desenvolvedor web, você poderá se deparar com momentos em
que será necessário renderizar componentes grá�cos em suas páginas. Em HTML, um dos componentes que
permitem a inserção de grá�cos é a tag <canvas>.
Elementos <canvas> podem ser, por exemplo, renderizados por JavaScript; para isso, JavaScript utiliza a
biblioteca WebGL (Web Graphics Library) para renderizar grá�cos bidimensionais (2D) ou tridimensionais (3D)
diretamente em um navegador web.
Nesta aula, você aprenderá um pouco mais sobre e a construção de desenhos básicos e animações usando
JavaScript.
Bons estudos!
INTRODUÇÃO AO CANVAS
O é um elemento HTML usado para renderização de grá�cos, ou seja, para a construção de desenhos, em
especial, realizados por linguagens como JavaScrip. O canvas pode ser usado, por exemplo, para construção
de jogos em HTML5.
Observe o código a seguir:
Código 1 | Código canvas
<canvas width="400" height="400"></canvas>
Fonte: elaborado pelo autor.
Esse código declara um elemento HTML do tipo Canvas, e podemos imaginar o Canvas como uma área
reservada para inserção de algum desenho. Nesse exemplo, nossa área tem tamanho de 400px de altura por
400px de largura.
Vamos, então, ver um exemplo básico de , no entanto, vamos começar com arquivo HTML. O Canvas deve
estar declarado dentro da tag , e note que aplicamos um id para nossa tag, que passou a ser denominada
“desenho”, tendo 400x400px de tamanho.
index.html
Aula 2
APIS DE NAVEGADOR – MANIPULANDO ÁUDIO E GRÁFICO
Nesta aula, você aprenderá um pouco mais sobre e a construção de desenhos básicos e animações
usando JavaScript.
49 minutos
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 16/56
https://jquery.com/
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>DOM</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="estilo.css">
7 </head>
8 <body>
9 <canvas id="desenho" width="400" height="400"></canvas>
10 <script src="script.js"></script>
11 </body>
12 </html>
Ao abrir esse código em seu navegador, você não verá nada além de uma tela em branco. Vamos criar um
arquivo CSS para inserir margens ao redor da área de desenho do e, na sequência, observe a Figura 1.
estilo.css
1 canvas{
2 border: 1px grey solid;
3 }
Figura 1 | Canvas vazio. Bordas inseridas por CSS
Fonte: captura de tela elaborada pelo autor.
Ao carregar a página, é possível ver que uma leve linha acinzentada contorna a região ao redor da área de
desenho. Agora, podemos fazer desenhos na tela, e para manipular o Canvas, é necessário utilizar JavaScript.
Além disso, note que a declaração do script externo é feita no �m do arquivo, imediatamente antes da tag .
Vamos, então, construir nosso script que fará um desenho dentro da área delimitada pelo Canvas e que
renderizará um simples quadrado de 100px de altura por 100px de largura. Observe o código a seguir e a
Figura 2:
script.js
1 // seleciona o elemento do canvas
2 var canvas = document.getElementById('desenho');
3
4 // variável de contexto 2d
5 var ctx = canvas.getContext('2d');
6
7 // desenha um retângulo
8 ctx.fillRect(20, 20, 100, 100)
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 17/56
Figura 2 | Quadrado inserido no Canvas
Fonte: captura de tela elaborada pelo autor.
Perceba que nosso quadrado negro foi inserido no canto esquerdo da área de desenho do Canvas, agora,
vamos entender parte por parte docódigo.
Observe a linha a seguir:
var canvas = document.getElementById('desenho');
Nela, é feita a declaração de uma variável chamada canvas, e essa variável recebe o resultado de uma
consulta ao DOM, que seleciona o elemento id “desenho”. A seguir, declararemos uma variável chamada ctx:
var ctx = canvas.getContext('2d');
Antes de iniciar a renderização, o script precisa obter o contexto de renderização; para isso, é utilizado o
método getContext(), que deve receber o tipo de grá�co que se deseja produzir. No exemplo a seguir,
apresentaremos um grá�co de duas dimensões, logo, marcamos “2d”.
Seguindo esse contexto, podemos, então, fazer o primeiro desenho (um retângulo) utilizando o método
�llRect( ), que receberá quatro parâmetros:
1 ctx.fillRect(
2 distância para o eixo x,
3 distância para o eixo y,
4 largura,
5 altura
6 )
Nesse caso, vemos que a distância para o eixo x e y é de 20px, enquanto a largura e altura do quadrado é de
100px.
ctx.fillRect(20, 20, 100, 100)
Note que não especi�camos a cor do quadrado, logo, ele foi desenhado em preto. No próximo bloco, você
verá com mais detalhes como desenhar outras formas, aplicar estilos e alterar as cores. Até lá!
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 18/56
VIDEOAULA: INTRODUÇÃO AO CANVAS
Nesta aula, você aprenderá o que são elementos , bem como inicializá-los e criar formas básicas.
Bons estudos!
DESENHANDO FORMAS, APLICANDO ESTILO E CORES
No bloco anterior, você viu os fundamentos do Canvas; nesta aula, você vai aprender a aplicar estilos e a
desenhar novas formas geométricas.
Vamos começar adicionando um segundo quadrado, próximo ao primeiro:
1 // seleciona o elemento do canvas
2 var canvas = document.getElementById('desenho');
3
4 // variável de contexto 2d
5 var ctx = canvas.getContext('2d');
6
7 // desenha um retângulo
8 ctx.fillRect(20, 20, 100, 100)
9
10 // segundo retângulo
11 ctx.fillRect(30, 30, 100, 100)
Figura 3 | Sobreposição de quadrados no Canvas
Fonte: elaborada pelo autor.
Para diferenciar os dois quadrados, é possível aplicar cores distintas usando a propriedade �llStyle. Para
selecionar uma cor, é possível aplicar a função rgb entre aspas, que recebe três valores, que vão de 0 a 255,
correspondentes às cores vermelho (r: red), verde (g: green) e azul (b: blue).
1 // desenha um retângulo
2 ctx.fillStyle = "rgb(180,0,0)";
3 ctx.fillRect(20, 20, 100, 100)
4
5 // segundo retângulo
6 ctx.fillStyle = "rgba(0,0,180,0.7)";
7 ctx.fillRect(30, 30, 100, 100)
Videoaula: Introdução ao Canvas
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 19/56
Figura 4 | Aplicando cores. O primeiro quadrado recebe um tom de vermelho e o segundo um tom de azul (com opacidade de 70%)
Fonte: elaborada pelo autor.
Note que, no segundo quadrado, substituímos a função rgb por rgba, que insere uma quarta camada
correspondente ao padrão alpha (ou índice de opacidade/transparência). O valor de 0.7 indica que queremos
70% de opacidade (ou 30% de transparência).
Desenhando um círculo
O JavaScript possui uma série de métodos que facilitam o desenho em Canvas. Por exemplo: podemos usar as
propriedades de path (caminhos) para a construção de um círculo. Observe o código a seguir:
1 // seleciona o elemento do canvas e cria contexto
2 var ctx=document.getElementById('desenho').getContext('2d');
3
4 // inicia um novo path
5 ctx.beginPath();
6
7 // configurações
8 var x = 100;
9 var y = 100;
10 var raio = 50;
11 var angulo_inicio = 0;
12 var angulo_fim = Math.PI * 2;
13
14 // desenha um arco
15 ctx.arc(x, y, raio, angulo_inicio, angulo_fim);
16
17 // desenha as linhas
18 ctx.stroke();
Inicialmente, instanciamos o path com o método beginPath(), e note que optamos por separar os valores de
entrada necessários em variáveis cujos nomes são autoexplicativos. Uma variável digna de nota é a
“angulo_�m”, que determina o valor do ângulo �nal (lembre-se de que a circunferência é dada por 2πr, por
isso, devemos usar o método Math.PI para receber o valor de π e calcular o círculo perfeito). E para que o
nosso círculo �que completo, vamos utilizar o método arc( ), que recebe como entrada: margem à esquerda
(x); margem para o topo (y); raio do círculo; ângulo inicial; e ângulo �nal. Por �m, o método stroke( ) será
usado para desenhar as linhas.
Este é o resultado �nal (vide Figura 5):
Figura 5 | Criando um círculo
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 20/56
Fonte: elaborada pelo autor.
Desenhando texto
Pode parecer estranho, mas, em alguns casos, pode ser necessário “desenhar” blocos de texto em elementos
<canvas>. Podemos fazer isso usando o método �lltext().
1 var ctx=document.getElementById('desenho').getContext('2d');
2
3 // configurações
4 var x = 20;
5 var y = 100;
6
7 // tamanho da fonte e tipo
8 ctx.font = '72px serif';
9
10 // inserindo o texto
11 ctx.fillText("Olá mundo!", x, y);
Figura 6 | Inserindo texto no Canvas
Fonte: elaborada pelo autor.
Salvando como imagens
Você pode salvar qualquer imagem clicando com o botão direito sobre a área do Canvas (conforme Figura 7)
e, depois, em “salvar imagem como...”.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 21/56
Figura 7 | Por padrão, Canvas salva imagens como PNG
Fonte: elaborada pelo autor.
Infelizmente, Canvas não salva as imagens em formato vetorial, o que gera uma grande perda de qualidade.
VIDEOAULA: DESENHANDO FORMAS, APLICANDO ESTILO E CORES
Nesta aula, você aprenderá a realizar desenhos básicos de formas geométricas usando <canvas>.
Bons estudos!
APLICANDO ANIMAÇÃO E ÁUDIO
Podemos, ainda, fazer animações usando Canvas e JS. Vamos começar com um exemplo simples: uma barra
de progresso. Observe o código a seguir:
1 // iniciando o canvas
2 var canvas = document.getElementById('desenho')
3 var ctx = canvas.getContext('2d');
4
5 // configurações
6 var x = 0;
7 var y = 0;
8 var altura = 50;
9 var largura = 0;
Aqui, declaramos um novo desenho 2D usando canvas. Nas con�gurações, delimitamos a posição x e y
(ambas 0), além da altura e largura da barra 50px e 0, respectivamente.
Para construir uma animação, é preciso criar uma função que desenhe os objetos na tela e, a seguir, chamar
essa função repetidamente a cada período de tempo. Veja:
1 function animacao(){
2 ctx.fillRect(x, y, largura++, altura)
3 }
4
5 setInterval(animacao, 100)
Esse código irá produzir a seguinte animação:
Figura 8 | Animação com Canvas: barra de progresso
Videoaula: Desenhando formas, aplicando estilo e cores
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 22/56
Início Após 10 segundos Após 30 segundos
Fonte: elaborada pelo autor.
No código acima, criamos a função “animacao” cujo único comando é desenhar um novo retângulo na tela.
Esse retângulo começa da posição x e y (ambas equivalentes a 0), e altura inicial é de 50px, que é mantida
durante toda execução. O segredo da animação está no terceiro argumento passado à função �llRect:
largura++. Esse comando pegao valor atual de largura e o incrementa em 1 a cada chamada da função
animacao( ), ou seja, se, na primeira chamada, ele equivale a 0, na segunda, ele vale 1, na terceira, recebe o
valor 2, depois 3, 4, 5 e assim sucessivamente.
As chamadas recursivas são feitas no comando:
setInterval(animacao, 100)
A função setInterval recebe como entrada outra função que será executada inde�nidamente por períodos de
tempo explicitados no segundo argumento (em milissegundos). No exemplo, usamos 100 milissegundos, o
que indica que, a cada segundo, a barra cresce 10px.
Movendo objetos
No exemplo anterior, usamos o script para aumentar o tamanho da barra, no entanto, se, em vez de
aumentar o tamanho da forma geométrica, quiséssemos movê-la pela tela, isso seria possível utilizando um
truque simples: a cada rodada de interação, precisaríamos apagar a forma geométrica previamente criada.
Podemos fazer isso com o comando clearRect( ), que recebe quatro parâmetros: x, y, largura e altura, e esses
dois últimos correspondem às medidas do elemento HTML .
Neste caso, vamos começar aumentando as medidas do nosso retângulo:
1 // iniciando o canvas
2 var canvas = document.getElementById('desenho')
3 var ctx = canvas.getContext('2d');
4
5 // configurações
6 var x = 0;
7 var y = 0;
8 var altura = 100;
9 var largura = 100;
Agora, vamos implementar a função mova( ), e é importante que o nome das nossas funções represente o que
elas realmente fazem.
1 function animacao(){
2 // apagando o retangulo
3 ctx.clearRect(0, 0, canvas.width, canvas.height)
4
5 // desenhando um novo retangulo
6 ctx.fillRect(x++, y, largura, altura)
7 }
8 setInterval(animacao, 100)
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 23/56
Observe, na Figura 9, o que acontece se executarmos o código:
Figura 9 | Animação usando Canvas: movendo um quadrado
Início Após 10 segundos Após 30 segundos
Fonte: elaborada pelo autor.
Observe como pegamos a largura e a altura <canvas> do na função clearRect( ): usando canvas. width e
canvas.height, respectivamente. Na função �llRect( ), alteramos o posicionamento do elemento usando x++,
ou seja, ele se movimentou apenas no eixo x. Se quisermos mover o objeto em outros sentidos, basta
alterarmos a variável que incrementamos:
Figura 10 | Movendo itens nos eixos x e y
x, y++
(após 10 segundos)
X++, y++
(após 10 segundos)
Fonte: elaborada pelo autor.
Caso deseje acelerar a velocidade da animação, reduza o valor do segundo argumento enviado para
setInterval() ou, caso deseje reduzir a velocidade, aumente esse valor.
Manipulando áudio
Apesar do Canvas não fornecer uma API para manipulação direta de áudio, ele permite que você faça
manipulações de áudios usando JavaScript e a tag <audio>, por meio dos objetos HTMLAudioElement
(FULTON; FULTON, 2011).
Vamos começar declarando um arquivo de áudio no HTML. Primeiro, precisamos de um arquivo de áudio,
logo, para o exemplo, utilizaremos um pequeno arquivo com, aproximadamente, 2 segundos de duração,
chamado “som.mp3”, e o colocaremos no mesmo diretório que o arquivo “index.html” e “script.js”. Agora,
temos que fazer algumas pequenas alterações no arquivo HTML:
index.html
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 24/56
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Canvas & Audio</title>
5 <meta charset="utf-8">
6 </head>
7
8 <body>
9 <!-- MUSICA -->
10 <audio id="musica" controls autoplay>
11 <source src="som.mp3" type="audio/mp3">
12 </audio>
13
14 <!-- Onde exibiremos dados da música -->
15 <canvas id="detalhes"></canvas >
16
17 <!-- script -->
18 <script src="script.js"></script>
19
20 </body>
21 </html>
O HTML5 permite que você inclua um arquivo de áudio usando a tag <audio>, e, ao abrir esse arquivo, seu
navegador, provavelmente, lhe mostrará um player interativo de áudio similar a este:
Figura 11 | Tag de áudio
Fonte: elaborada pelo autor.
Note que alteramos o id do canvas para “detalhes”. Nesse exemplo simples, vamos apenas ler o arquivo MP3
com o Canvas e extrair algumas propriedades básicas, como a duração da música.
No “script.js”, inclua o seguinte código:
script.js
1 // inicia o canvas
2 var canvas = document.getElementById("detalhes");
3 var ctx = canvas.getContext("2d");
4
5 // coleta o elemento do audio
6 var musica = document.getElementById("musica");
7
8 // exibe a duração da música
9 ctx.fillText("Duração:"+musica.duration+" segundos.", 10, 10);
Figura 12 | Exibindo dados de uma tag <audio> usando Canvas
Fonte: elaborada pelo autor.
Nesse exemplo, a propriedade duration armazena o tempo em segundos da música, e podemos, ainda,
manipular outras propriedades, como: currentTime (posição atual), loop (modo repetição), autoplay (analisa
se o arquivo está iniciando automaticamente quando carregado), muted (muta o áudio), controls (mostra
controles), volume (deve estar entre 0 e 1), paused (pausa a música), ended (veri�ca se o áudio tocou por
completo), currentSrc (indica o endereço do arquivo de áudio), entre outros (FULTON; FULTON, 2011).
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 25/56
VIDEOAULA: APLICANDO ANIMAÇÃO E ÁUDIO
Nesta aula, você verá alguns exemplos de como implementar animações básicas usando Canvas e JavaScript.
Bons estudos!
ESTUDO DE CASO
A equipe de desenvolvimento da Empresa A está muito satisfeita com o trabalho que você tem realizado como
desenvolvedor front-end, por isso, decidiram passar um novo desa�o para que resolva.
O time de marketing responsável pela gestão da marca da Empresa B percebeu que a maior parte dos
websites dos concorrentes apresentava um recurso interessante: uma barra de progresso que surgia no topo
da tela enquanto os itens eram carregados na tela. Por isso, decidiram pedir ao time de desenvolvimento que
implementasse o mesmo recurso.
Nessa tarefa, você irá trabalhar em colaboração com um outro desenvolvedor do time. Sua função será a de
cuidar dos aspectos visuais desse efeito, enquanto o outro desenvolvedor deverá cuidar da parte funcional da
barra de tarefas. Vocês combinaram que o efeito deve ter uma taxa de atualização a cada 10 milissegundos,
entretanto, a velocidade será de�nida por uma variável fator que será calculada pelo script que será
desenvolvido por outro desenvolvedor. Não se preocupe com como esse valor será calculado; para testes,
de�na o valor de fator = 50 e realize testes para a resolução de 1280px de largura.
Além disso, a equipe de design também pediu que a barra de carregamento tenha a cor "#4169E1" (um tom
de azul), por isso, usando seu editor de códigos, construa um arquivo JavaScript que carregue a interface de
uma barra de carregamento usando <canvas> e utilize, como base, os arquivos HTML e CSS a seguir:
Código fonte do HTML:
1 <!doctype html>
2 <html>
3 <head>
4 <title>ModaS.A. | Moda a Seu Alcance</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="estilo.css">
7 </head>
8 <body>
9
10 <!-- para telas com resolução de até 1280px -->
11 <canvas id="carregamento"
12 height="10" width="1280"></canvas>
13
14 <!-- [...] -->
15
16 <script src="script.js"></script>
17 </body>
18 </html>
Código fonte do CSS:
1 *{ margin: 0; padding: 0; }
2
3 #carregamento{
4 position: fixed;
5 background-color: #ccc;6. }
RESOLUÇÃO DO ESTUDO DE CASO
Videoaula: Aplicando animação e áudio
Para visualizaro objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 26/56
Para a solução do problema proposto, podemos usar <canvas>; já a barra de progresso será preenchida a
partir do JavaScript.
O código a seguir apresenta uma solução para o problema em questão:
1 // iniciando o canvas
2 var canvas = document.getElementById('carregamento')
3 var ctx = canvas.getContext('2d');
4
5 // configurações
6 var x = 0;
7 var y = 0;
8 var altura = 10;
9 var largura = 0;
10 var fator = 50;
11 var resolucao = 1280;
12
13 // cor da barra requisitada pela equioe
14 ctx.fillStyle = "#4169E1";
15
16 // função que anima a barra de progresso
17 function animacao(){
18 ctx.fillRect(x, y, largura = largura+fator, altura);
19
20 // CÓDIGO AVANÇADO: interrompe a função setInterval()
21 // para evitar carregamento excessivo
22 if(largura > resolucao){
23 clearInterval(atualiza);
24 }
25 }
26
27 // atualiza a barra a cada 10 milissegundos
28 var atualiza = setInterval(animacao, 10)
Note que esse código rodará de maneira bastante rápida. Em menos de um segundo, toda a barra estará
carregada nesse exemplo. De fato, a velocidade do carregamento dependerá do script criado por outro
funcionário da equipe e será de�nida pela variável “fator”. Por padrão, usamos fator = 50, mas essa variável
deve estar disponível para que o outro colaborador a altere de acordo com cada caso.
Note que a movimentação da barra é de�nida pela função animacao( ), descrita das linhas 17 a 25, e que o
intervalo de atualização é dado pela função setInterval( ), de�nida na linha 28. Por �m, note que aproveitamos
para incluir uma função avançada (linhas 20 a 24) que interrompe a execução de setInterval quando a barra
atinge o tamanho máximo da largura da página (no exemplo, de 1280px).
Ao executar o código acima, você obterá um resultado próximo a este:
Figura 13 | Barra de carregamento à medida que o conteúdo é carregado: a atualização completa pode ocorrer em menos de um
segundo. (A) início do carregamento; (B) parte do conteúdo foi carregado; (C) metade do conteúdo foi carregado; (D) carregamento quase
concluído; (E) carregamento concluído
(A)
(B)
(C)
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 27/56
(D)
(E)
Fonte: elaborada pelo autor.
Saiba mais
Biblioteca de áudios
Você pode conseguir arquivos de áudio gratuitos diretamente na biblioteca de áudio do YouTube.
Disponível em: https://bit.ly/3t9INJP. Acesso em: 17 dez.21.
Capítulo de livro – Canvas
Aprenda a manipular áudio com Canvas.
Disponível em: https://bit.ly/3JWJR9P. Acesso em: 17 dez. 21.
Resolução do Estudo de Caso
Para visualizar o objeto, acesse seu material digital.
INTRODUÇÃO
Olá, estudante!
O paradigma cliente-servidor é uma das bases do funcionamento da internet. Nele, um cliente (um usuário em
um laptop, por exemplo) requisita um serviço (como um website) a um servidor remoto (que, por sua vez,
responde enviando os dados ao cliente). Nas primeiras aplicações web, o processo de requisição e resposta
era feito de forma síncrona entre cliente e servidor, mas nos dias de hoje, as requisições assíncronas têm sido
bastante utilizadas, o que tem permitido que websites atendam a um maior número de clientes com um
menor consumo de rede e uma melhor experiência na interface.
Aula 3
APIS DE NAVEGADOR – COMUNICANDO COM O SERVIDOR
O paradigma cliente-servidor é uma das bases do funcionamento da internet. Nele, um cliente (um
usuário em um laptop, por exemplo) requisita um serviço (como um website) a um servidor remoto (que,
por sua vez, responde enviando os dados ao cliente).
56 minutos
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 28/56
https://www.youtube.com/audiolibrary
https://www.oreilly.com/library/view/html5-canvas/9781449308032/ch07.html
Conexões assíncronas entre cliente e servidor em páginas web podem ser realizadas com HTML5 e JavaScript
a partir do objeto XMLHttpRequest (XHR) implementado na maioria dos navegadores. Ao uso de JavaScript
para comunicação entre cliente e servidor de forma assíncrona dá-se o nome de AJAX. Nesta aula, você
aprenderá mais sobre o objeto XHR e sobre AJAX.
Bons estudos!
MÉTODOS E PROPRIEDADES XMLHTTPREQUEST
Antes de adentrarmos no mundo do XMLHttpRequest, precisamos relembrar um conceito básico em
desenvolvimento web: o paradigma cliente-servidor. Nesse paradigma, computadores com grande poder
computacional fornecem um serviço que pode ser requisitado por clientes pela internet, como no caso dos
servidores web, que hospedam páginas de internet (Figura 1).
Figura 1 | Paradigma cliente-servidor. No exemplo, um servidor web fornece acesso a uma série de sites hospedados e os clientes podem
fazer requisições HTTP/HTTPS pela internet e receber, como resposta, documentos web
Fonte: Wikimedia Commons.
Entretanto, esse processo de requisição de um site a um servidor remoto pode ser feito de forma síncrona ou
assíncrona. Nas requisições síncronas, cada operação deve ser concluída para que uma nova operação possa
ser realizada, já nas requisições assíncronas, não é necessário aguardar o �m de uma operação. Podemos ver
a diferença na prática, por exemplo, quando preenchemos um formulário de cadastro e enviamos
informações para um servidor remoto. Na requisição síncrona, o navegador precisará recarregar a página
após enviar os dados, já na requisição assíncrona, isso não será necessário. À medida que os dados são
digitados, o navegador envia as informações para o servidor sem a necessidade de recarregar a página (na
prática, não seria necessário um botão de salvar, por exemplo). Se bem projetados, sistemas assíncronos
tendem a ter uma performance maior, uma vez que reduzem o �uxo de dados na rede (o servidor não precisa
enviar os dados de uma página inteira a cada requisição, pois apenas uma fração de dados precisa ser
enviada). Na Figura 2, isso é ilustrado pelos caminhões carregando os documentos pesados enquanto os
carrinhos de mão são usados para transportar dados.
Figura 2 | Abstração da comunicação síncrona (A) versus comunicação assíncrona (B)
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 29/56
Na comunicação assíncrona não é necessário aguardar que a comunicação esteja concluída para envio de dados, podendo ser feita em
paralelo. Na comunicação síncrona, há muito mais dados trafegados pela rede, e essa �gura não leva em consideração o cache produzido
nos navegadores.
Fonte: Wikimedia Commons.
Observe como a comunicação síncrona exige menos conexões, entretanto, há a necessidade de envio de
arquivos mais “pesados”, que tendem a ocupar uma maior largura de banda (Figura 2 A). Enquanto isso, na
comunicação assíncrona, há uma maior quantidade de conexões, mas elas podem ser feitas em paralelo,
transmitindo uma menor quantidade de dados e reduzindo as etapas de envio de arquivos “pesados” (Figura 2
B).
Em sistemas que requerem alto grau de processamento (como e-commerces com milhões de acessos diários),
a comunicação assíncrona pode reduzir o tráfego da rede e garantir que mais pessoas acessem ao mesmo
tempo. Entretanto, as comunicações assíncronas podem não representar grandes vantagens para sistemas de
pequeno porte (sites com acessos na casa dascentenas ou milhares por dia), e isso se deve ao fato de
requisitarem uma complexidade maior de implementação, especialmente no que diz respeito à segurança e à
garantia de que os dados foram entregues.
Assim, surgiu o XMLHttpRequest (XHR), um objeto ou uma API implementada em navegadores que facilitou a
comunicação assíncrona com servidores. A ideia do XHR é permitir que dados sejam comunicados por meio
de requisições HTTP (ou HTTPS) e arquivos no formato XML (na prática, outros formatos também podem ser
usados, como JSON).
Veja, a seguir, como instanciar um objeto XHR para comunicações assíncronas com o servidor:
var xhr = new XMLHttpRequest();
Entre os principais métodos e propriedades desse objeto, podemos citar, entre outras:
open( ): abre a conexão.
readyState: veri�ca o estado da conexão.
responseText: contém a resposta da conexão.
responseType: formato da resposta esperado (exemplo, json).
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 30/56
send( ): envia a requisição.
status: estado da requisição.
Agora que você já conhecer o objeto XMLHttpRequest, podemos, �nalmente, falar sobre a implementação
mais comum dele com JavaScript: a tecnologia AJAX. Você verá mais detalhes no próximo bloco.
VIDEOAULA: MÉTODOS E PROPRIEDADES XMLHTTPREQUEST
Nesta aula, você vai aprender um pouco mais sobre conexões síncronas e assíncronas e conhecer o objeto
XMLHttpRequest.
Bons estudos!
INTRODUÇÃO AO AJAX
AJAX é um acrônimo para Asynchronous Javascript and XML ou, em português, "Javascript Assíncrono e XML".
Apesar do nome, a maior parte das implementações AJAX em sites modernos costumam usar JSON no lugar
de XML para transferência de dados. Uma das principais características do AJAX é o uso de scripts HTTP/HTTPS
para iniciar conexões com servidores remotos sem a necessidade de refresh (FLANAGAN, 2011).
Com AJAX, é possível realizar requisições em segundo plano, sem a necessidade de recarregar a página. Isso
tem sido a base das chamadas Single Page Applications (SPA) ou aplicações de página única, que são páginas
que não precisam recarregar para apresentar componentes novos. Por exemplo, quando você usa o serviço
de e-mails da Google, o Gmail, ou quando você realiza um post no Facebook ou no Twitter, note que apenas
regiões especí�cas da página são recarregadas, fazendo com que a experiência de uso seja mais suave e
agradável. Isso ocorre pois são feitas requisições assíncronas.
Note que AJAX é uma tecnologia ou apenas uma terminação para indicar conexões assíncronas com
JavaScript, independentemente da linguagem usada no servidor. Na prática, AJAX utiliza a API XMLHttpRequest
para comunicação entre cliente e servidor, e, nessa requisição, o JavaScript é responsável por checar,
constantemente, o objeto que mantém o status da comunicação. Quando concluída essa tarefa, dados são
transferidos usando-se XML ou JSON, mas como implementar isso na prática?
AJAX na prática
Vimos, no bloco anterior, que é possível instanciar um objeto XHR usando o método XMLHttpRequest( ); dessa
forma:
var xhr = new XMLHttpRequest();
Após instanciar um objeto XHR, é preciso prestar atenção em algumas propriedades e métodos. O método
open( ) abre a conexão com o servidor remoto, para isso, ele recebe um verbo HTTP, como GET (usado para
requisição de dados) e POST (usado para envio de dados), além de uma URL. Por �m, a requisição é enviada
usando-se o método send( ).
1 xhr.open("GET", "https://um-site-qualquer.com.br")
2 xhr.send()
Para veri�car se a comunicação com servidor remoto está funcionando, é preciso vigiar as propriedades
onreadystatechange e suas outras propriedades (informalmente, dizemos que estamos “escutando” a
conexão). Entre as principais, estão as propriedades response e responseText, que irão conter a resposta da
requisição, mas também há outras propriedades de grande importância, como a propriedade readyState, que
retorna o cabeçalho da requisição, ou seja, se a conexão já está aberta ou não (Tabela 1).
Tabela 1 - Estados da propriedade readyState
Videoaula: Métodos e propriedades XMLHttpRequest
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 31/56
Código Descrição
0 Requisição ainda não iniciada.
1 Requisição com o servidor estabelecida.
2 Pedido foi recebido.
3 Pedido sendo processado.
4 Solicitação concluída.
Fonte: adaptada de MDN Web Docs (2021).
Outra que vale a pena citar é a propriedade status, que retorna se já temos uma resposta para a requisição,
em geral, como um código de três dígitos (Tabela 2).
Tabela 2 | Mensagens HTTP
Código Descrição
100 - 199 Respostas de informação.
200 - 299 Respostas de sucesso.
300 - 399 Redirecionamentos.
400 - 499 Erros do cliente.
500-599 Erros do servidor.
Fonte: adaptada de MDN Web Docs (2021).
Entre os códigos mais conhecidos, estão:
200 (tudo ok).
401 (acesso não autorizado).
403 (acesso proibido).
404 (page not found: página não encontrada).
500 (erro interno no servidor).
Veja como onreadystatechange pode ser usada para escutar se alguma outra propriedade foi alterada:
Código 1 | Código onreadystatechange
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 32/56
1 var xhr = new XMLHttpRequest(); // cria objeto xhr
2
3 xhr.responseType = "json"; // tipo da resposta
4
5 // conecta ao site
6 xhr.open("GET", "https://um-site-qualquer.com");
7 xhr.send() // envia requisição
8
9 var i = 0; // um simples contador
10
11 // verifia se o estado da conexão mudou
12 xhr.onreadystatechange = ()=>{
13
14 var pronto = xhr.readyState; // a conexão foi feita?
15 var estado = xhr.status; // status da requisição?
16 var resposta = xhr.response; // qual a resposta?
17
18 i++; // contador de mudanças
19
20 console.log("#", i) // contador de mudanças
21
22 // como está a conexão
23 console.log("Status da conexão:", pronto);
24
25 // qual o código da resposta
26 console.log("Código da resposta:", estado);
27
28 // mostre a resposta
29 console.log(resposta);
30
31 }
Fonte: elaborado pelo autor.
O código apresentado acima declara um objeto xhr na linha 1; já na linha 3, é declarado o tipo de resposta
esperado (json); na linha 6, é aberta a conexão do tipo GET a um servidor remoto (esse site de exemplo não
existe); na linha 7, a conexão é enviada; na linha 12, veri�camos se houve alguma mudança do estado da
conexão; na linha 14, coletamos o estado da conexão, bem como o estado da resposta na linha 15. A resposta,
em si, foi recebida na linha 16, e nas linhas seguintes, apenas exibimos o resultado no console.
Para o site em questão, não teremos uma resposta, pois se trata de um site inexistente (Figura 3).
Figura 3 | Resposta obtida para um site não existente
Note que apenas uma resposta foi obtida e possui código de conexão 4 (a conexão foi aberta e já possui resposta), mas não há um código
de resposta (0) e nem valores na propriedade response.
Fonte: elaborada pelo autor.
Caso estivéssemos acessando uma API de web services real (como a ferramenta {JSON} Placeholder,
disponível em https://bit.ly/3faOpLu), poderíamos ter uma resposta assim (Figura 4):
Figura 4 | Resposta para consulta ao endereço https://jsonplaceholder.typicode.com/todos
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao…33/56
https://jsonplaceholder.typicode.com/todos
Note que podemos ver várias mudanças de estado. Lembre-se que o código de resposta 200 indica que deu tudo certo (con�ra a Tabela 1
e a Tabela 2 para entender o signi�cado de cada código). Por �m, a resposta retorna um arquivo JSON com 200 itens.
Fonte: elaborada pelo autor.
Assim, podemos perceber que a tecnologia AJAX tem um grande potencial no desenvolvimento de aplicações
web, entretanto, ela deve ser usada com cuidado, uma vez que depende das conexões com os servidores
remotos e da forma como eles manipulam os dados. Nesse caso, servidores podem fazer uso das tecnologias
de banco de dados para armazenamento, e veremos mais detalhes disso no próximo bloco.
VIDEOAULA: INTRODUÇÃO AO AJAX
Nesta aula, você aprenderá como fazer uma conexão AJAX usando o objeto XMLHttpRequest. Bons estudos!
AJAX E BANCO DE DADOS
No bloco anterior, você aprendeu a realizar uma conexão AJAX com um servidor remoto. Você viu que, ao
realizar uma conexão com um site que não existe, retorna um erro de acesso, e isso ocorre pois é necessário
que o site que desejamos acessar forneça uma API (application programming interface) de acesso, que, em
geral, é feita usando-se tecnologias web services e pode ser construída a partir de diversas linguagens de
programação. Podemos, aliás, construir APIs web services usando JavaScript, entretanto, para isso, devemos
utilizar um servidor que permita executar JavaScript diretamente no back-end, como Node.js (LECHETA, 2018).
Não é objetivo desta aula mostrar como fazer isso; em vez disso, vamos falar do que acontece com os dados
enviados ou recebidos por conexões assíncronas.
A consulta a um serviço remoto, em geral, é feita usando-se formatos de armazenamento padronizado, como
XML ou JSON, mas raramente esses arquivos �cam salvos nesses formatos nos servidores. É mais comum que
o armazenamento de dados em servidores seja feito pelo uso de sistemas de gerenciamento de bancos de
dados (SGBD), que possuem ferramentas mais robustas para armazenamento, consulta, atualização e deleção
de dados, como os bancos de dados relacionais MySQL, MariaDB e Postgree. Assim, computadores servidores
Videoaula: Introdução ao Ajax
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 34/56
podem fornecer diferentes serviços de acesso a websites e de banco de dados, que devem comunicar-se
entre si para que haja troca de informações (Figura 5). Cabe ao serviço web gerenciar essa conexão e
determinar quais dados podem ser acessados e como dados podem ser gravados, alterados ou deletados.
Figura 5 | Requisição e resposta entre cliente e servidor
No exemplo, o computador servidor pode fornecer dois serviços: web e banco de dados (esses serviços podem estar em computadores
distintos também); os clientes podem fazer requisições HTTP/HTTPS pela internet e receber, como resposta, documentos web; e o serviço
web pode consultar o serviço de banco de dados para busca ou armazenamento de informações.
Fonte: Adaptado, Wikimedia Commons.
Como esse processo de construção de uma API web services é um pouco complexo e foge do escopo desta
aula, vamos ilustrar esse processo utilizando o método POST para enviar dados para um servidor remoto
(vamos continuar usando a ferramenta {JSON} Placeholder). Observe o código a seguir:
Código 2 | ferramenta {JSON} Placeholder
1 var xhr = new XMLHttpRequest(); // cria objeto xhr
2
3 var doc = {
4 "userId": 555,
5 "title": "Enviando dados",
6 "body": "Olá, mundo!"
7 }
8
9 // verifia se o estado da conexão mudou
10 xhr.onreadystatechange = ()=>{
11
12 var pronto = xhr.readyState; // a conexão foi feita?
13 var estado = xhr.status; // status da requisição?
14 var resposta = xhr.responseText; // qual a resposta
15
16 // mostre apenas se tudo estiver ok (pronto => 4)
17 if(pronto == 4){
18 console.log("Código da resposta:", estado);
19 console.log(resposta);
20 }
21
22 }
23
24 xhr.open(
25 "POST",
26 "https://jsonplaceholder.typicode.com/posts"
27 );
28 xhr.send(doc); // envia requisição
Fonte: elaborado pelo autor.
Nas linhas 2 a 6, criamos uma variável (doc) para receber um objeto com as propriedades userId (identi�cador
do usuário), title (título da mensagem) e body (conteúdo da mensagem). Esses serão os dados que iremos
enviar para o servidor (para descobrir essas propriedades, tivemos que consultar a documentação da web
service em questão, e cada web service tem sua especi�cação, então, não se preocupe com esses nomes). Da
linha 8 à linha 20, apenas imprimimos os status do andamento do envio dos dados, e note que, a partir disso,
decidimos imprimir a resposta apenas se o status da conexão fosse 4, ou seja, a solicitação já estava concluída
(Figura 6).
Figura 6 | Status do andamento do envio dos dados
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 35/56
Note que o código 201 indica que os dados foram enviados com sucesso. O id que aparece na resposta indica que um novo dado foi
gravado na posição 101.
Fonte: elaborada pelo autor.
Agora, devemos prestar atenção nas linhas 23 a 26. Nelas, foram feitas as requisições do tipo POST; já na linha
27, enviamos os dados presentes na variável doc. O servidor remoto deve receber dados pela URL passada e
decidir o que fazer com eles. Nesse caso, o servidor pode gravar as informações em um banco de dados ou
apenas gravá-las em um arquivo JSON. Note que, como consumidores de uma web service, não sabemos o
que é feito com esse dado (o que insere uma camada extra de proteção ao servidor); obtemos, apenas, a
resposta indicando se o que era esperado foi feito ou não. No exemplo, sabemos que deu certo, pois
recebemos o status 201 e obtivemos, como resposta, um id indicando que o dado foi gravado.
VIDEOAULA: AJAX E BANCO DE DADOS
Nesta aula, você aprenderá um pouco mais sobre conexões assíncronas AJAX e sua interligação com os
processos de consulta e gravação em bancos de dados.
Bons estudos!
ESTUDO DE CASO
A Empresa A, empresa de marketing e desenvolvimento de sites, está crescendo cada vez mais no mercado.
Por isso, novos trabalhos vêm surgindo e exigindo mais da sua participação como desenvolvedor front-end.
A Empresa B está preocupada com a concorrência, por isso, a equipe de desenvolvedores back-end da
Empresa A desenvolveu um sistema de consulta de preços para as principais concorrentes do mercado, bem
como uma web service que permite consultas remotas para que outros sistemas da empresa possam
consultar. O sistema de consulta funciona por meio de POST e requer, como entrada, os seguintes dados:
Quadro 1 | Dados de entrada
Campo Descrição Exemplo
user Nome do usuário jsadmin
auth_code Código de autenticação (senha única de cada usuário). 132�auiw1yhd821klaslf
product Nome do produto a ser pesquisado (o sistema possui um
algoritmo avançado de detecção de processamento de
linguagem natural).
Blusa de estampa da marca
BluSA (coleção do verão)
Fonte: elaborado pelo autor.
Por �m, a web service retorna os preços de todas as concorrentes para produtos similares, por exemplo:
Código 3 | Web service
Videoaula: Ajax e banco de dados
Para visualizar o objeto, acesse seu material digital.
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 36/56
1 {
2 "id":1,
3 "product":"Blusa estampada BluS.A. coleção verão",
4 "store":"BlusaXique",
5 "preco":25.996 }
Fonte: elaborado pelo autor.
A web service está localizada neste endereço: https://bit.ly/3HI8aq6, entretanto, o servidor ainda apresenta
instabilidades. Por isso, quando for chamar a função que envia os dados, função xhr.send(), deixe-a
comentada e crie uma função chamada imprimirRespostaTeste(), que deverá, apenas, imprimir formatado, em
uma tabela na tela, o seguinte array:
Código 4 | Array
1 var respostaTeste = [
2 {
3 "id":1,
4 "product":"Blusa estampada BluSA coleção verão",
5 "store":"Empresa B",
6 "price":25.99
7 },
8 {
9 "id":2,
10 "product":"BluSA coleção verão - blusa estampada",
11 "store":"Concorrente 1",
12 "price":89.99
13 },
14 {
15 "id":3,
16 "product":"Blusa BluSA col. verão (estampada)",
17 "store":"Concorrente 2",
18 "price":29.99
19 },
20 {
21 "id":4,
22 "product":"Blusa BluS.A. estampada | Collection Summer Miami",
23 "store":"Concorrente 3",
24 "price":19.99
25 },
26 {
27 "id":5,
28 "product":"BluS.A. - blusa estampada do verão ",
29 "store":"Concorrente 4",
30 "price":39.99
31 },
32 ]
Fonte: elaborado pelo autor.
Assim, usando o seu editor de códigos favorito e um navegador web para testes, construa um sistema que
faça uma consulta ao servidor remoto e imprima o resultado na tela. A consulta deve ser feita por uma função
chamada buscar( ) e a função send( ) deve estar comentada; além disso, no lugar dela, você deverá chamar a
função imprimirRespostaTeste( ).
Dica
Para lhe ajudar, a equipe de design preparou os arquivos index.html e estilo.css, que constroem a
seguinte interface:
Figura 7 | Interface de consulta modelo
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 37/56
https://webservice.empresa-a.com/consultaprecos
Fonte: Lorem ipsum dolor sit amet.
Fique à vontade para usá-los ou não.
Código 5 | index.html
1 <!doctype html>
2 <html>
3 <head>
4 <title>Consulta concorrentes</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="estilo.css">
7 </head>
8 <body>
9 <h1>Sistema de consulta de produtos</h1>
10 <input type="text" id="produto"
11 placeholder="Digite o nome do produto a ser pesquisado">
12 <button onclick="buscar()">Buscar</button>
13
14 <div id="saida"></div>
15
16 <script src="script.js"></script>
17 </body>
18 </html>
Fonte: elaborado pelo autor.
Código 6 | estilo.css
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 38/56
1 h1{
2 text-align: center;
3 padding: 20px 0 30px 0;
4 }
5 input{
6 display: block;
7 width: calc(100% - 40px);
8 padding: 0.75rem 0.75rem;
9 font-size: 1rem;
10 font-weight: 400;
11 line-height: 1.5;
12 color: #212529;
13 background-color: #fff;
14 background-clip: padding-box;
15 border: 1px solid #ced4da;
16 border-radius: 0.25rem;
17 }
18 button{
19 width: calc(100% - 15px);
20 display: block;
21 margin-top: 20px;
22 color: #fff;
23 background-color: #0d6efd;
24 border-color: #0d6efd;
25 font-weight: 400;
26 line-height: 1.5;
27 text-align: center;
28 text-decoration: none;
29 border: 1px solid transparent;
30 padding: 0.75rem 0.75rem;
31 font-size: 1rem;
32 border-radius: 0.25rem;
33 }
34 table{
35 margin-top: 20px;
36 width: calc(100% - 15px);
37 color: #333;
38 }
39 th{
40 background-color:#f4f4f4;
41 padding:10px;
42 }
43 td{
44 border-top: 1px #ccc solid;
45 padding: 10px;
46 }
Fonte: elaborado pelo autor.
RESOLUÇÃO DO ESTUDO DE CASO
O protótipo apresentado neste código possui um código HTML funcional. Se o usuário digitar algo e realizar
uma busca, deverá obter uma tabela como resposta, entretanto, a consulta ao web service não deverá
funcionar, pois a linha com a função send( ) deverá estar comentada.
Caso tenha construído o sistema baseado no modelo proposto (CSS e HTML), sua página �nal �cará
semelhante a esta:
Figura 8 | Consulta de exemplo
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 39/56
Fonte: elaborada pelo autor.
A seguir, apresentaremos um código de exemplo do script.js. Esse arquivo deve ter duas funções: buscar( ) e
imprimirRespostaTeste( )
Observe como �cou o código �nal:
Código 7 | Código de exemplo do script.js
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 40/56
1 function buscar(){
2
3 var xhr = new XMLHttpRequest(); // cria objeto xhr
4
5 var produto = document.getElementById("produto").value;
6
7 console.log("Realizando consulta por",produto)
8
9 var doc = {
10 "user": "jsadmin",
11 "auth_code": "132fiauiw1yhd821klaslf",
12 "product": produto
13 }
14
15 // verifica se o estado da conexão mudou
16 xhr.onreadystatechange = ()=>{
17
18 console.log("Consultando web service...")
19
20 var pronto = xhr.readyState; // a conexão foi feita?
21 var estado = xhr.status; // status da requisição?
22 var resposta = xhr.responseText; // qual a resposta
23
24 // mostre apenas se tudo estiver ok (pronto => 4)
25 if(pronto == 4){
26 console.log("Código da resposta:", estado);
27 console.log(resposta);
28 }
29
30 }
31
32 xhr.open(
33 "POST",
34 "https://webservice.Empresa-A.com/consultaprecos"
35 );;
36
37 // xhr.send(doc); // envia requisição
38
39 imprimirRespostaTeste(); // teste desenvolvedor
40
41 }
42
43 function imprimirRespostaTeste(){
44
45 var respostaTeste = [
46 {
47 "id":1,
48 "product":"Blusa estampada BluSA coleção verão",
49 "store":"Empresa B",
50 "price":25.99
51 },
52 {
53 "id":2,
54 "product":"BluSA coleção verão - blusa estampada",
55 "store":"Concorrente 1",
56 "price":89.99
57 },
58 {
59 "id":3,
60 "product":"Blusa BluSA col. verão (estampada)",
61 "store":"Concorrente 2",
62 "price":29.99
63 },
64 {
65 "id":4,
66 "product":"Blusa BluSA estampada | Collection Summer Miami",
67 "store":"Concorrente 3",
68 "price":19.99
23/05/2024, 08:47 wlldd_u2_des_jav
https://www.colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=felipefaleixo%40gmail.com&usuarioNome=FELIPE+FERREIRA+ALEIXO&disciplinaDescricao=&atividadeId=3984965&atividadeDescricao… 41/56
69 },
70 {
71 "id":5,
72 "product":"BluSA - blusa estampada do verão ",
73 "store":"Concorrente 4",
74 "price":39.99
75 },
76 ]
77
78 saida = document.getElementById("saida");
79
80 gravar = "<table><tr><th>id</th><th>Produto</th><th>Loja</th><th>Preço</th></tr>";
81
82 for(i of respostaTeste){
83 gravar = gravar + "<tr><td>" + i.id + "</td><td>" + i.product + "</td><td>" + i.store +
"</td><td>R$ " + i.price + "</td></tr>";
84 }
85
86Mais conteúdos dessa disciplina
Validação de E-mail em JavaScript- Prova 3
- Java x JavaScript
- Introdução ao Javascript
- Manipulação de Strings em Javascript
- Formulários em Javascript
- Aprendendo JavaScript: Conceitos e Histórico
- Eventos Javascript para interatividade de páginas
- Propriedades e Métodos do Window
- Método document.write() em Javascript
- JavaScript: Manipulação de Elementos
- JavaScript: Conceitos Fundamentais
- Diferenças entre Java e JavaScript
- Na visão tradicional da relação causal no desenvolvimento motor temos três divisões, sendo elas:
a. Individual, desenvolvimento e ambiente
b. Indi...
- A linguagem usada pleo Xamarin é: Questão 10Escolha uma opção: C# Java JavaScript Python
- A linguagem usada pelo Flutter é: Questão 2Escolha uma opção: Dart Swift JavaScript Java
