CW - Unidade 2 - Desenvolvimento em JavaScript
CW - Unidade 2 - Desenvolvimento em JavaScript
CW - Unidade 2 - Desenvolvimento em JavaScript
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
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 especificação trata da tentativa de padronizar a forma como documentos web são construídos, a fim 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 filhos 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
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>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>DOM</title>
5 <meta charset="utf-8">
6 </head>
7
10 </html>
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( ).
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.
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.
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!")
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
<body>Tudo bem?</body>
Figura 5 | Mensagem gerada pelo script é gravada antes da mensagem que já estava no <body>
Podemos definir locais específicos 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.
Bons estudos!
1. getElementById: seleciona um único elemento com base em seu identificador único (id).
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
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
23 <h1>Home</h1>
24 <p class="texto">Bem-vindo ao meu site.</p>
27
28 <!-- menu lateral direito -->
29 <aside>
30 <p>Barra lateral.</p>
31 </aside>
32
33 </main>
34
39
40 </body>
41 </html>
estilo.css
1 /* remove margens inseridas pelo navegador */
2 *{ margin:0; }
3
4 /* TAGS */
5 header{
6 height: 100px; /* altura */
9 section{
10 height: 200px; /* altura */
15 aside{
16 height: 200px; /* altura */
21 footer{
22 clear:both; /* corrige problemas de alinhamento */
27
28 /* ID */
29 #logo{
30 color:white; /* cor texto: branco */
33 }
34
35 /* CLASS */
36 .texto{
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 configurado, denominado “logo’, então, coletá-lo. Para tanto, crie um arquivo chamado
“script.js”:
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 }
Agora, observe o resultado no console:
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 = ()=>{
6 }
Veja que, ao executarmos esse código, o título da página é substituído, conforme Figura 8:
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:
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:
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.
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:
getElementsByClassName
Podemos usar o código a seguir para selecionar elementos com base no nome da classe:
1 window.onload = ()=>{
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:
1 window.onload = ()=>{
4 console.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.
DOM CSS
O CSS é a linguagem usada para configuraçã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 definidas 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.
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
11
12 }
Antes
Depois
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:
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
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”).
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.
var texto_selecionado=selecionado.querySelectorAll('#logo')[0]
[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!
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 finalmente percebeu que você estava pronto para um novo desafio 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 definidas 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.
Primavera: #ffd6ef
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 #ffd6ef; topo-direita: verão: #fdf080; rodapé-esquerda: outono: #c0dd5d;
rodapé-direita: inverno: #9dbce3
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.
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 ficarem 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 desafio, 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).
7 // estação = [mes]
8 var outono = 3;
9 var inverno = 6;
10 var primavera = 9;
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
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, definimos
qual a cor correspondente a cada mês. Veja que o maior desafio 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 fim, 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.
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.
jQuery
jQuery é um dos frameworks JavaScript mais populares do mercado; ele permite uma manipulação do
DOM de forma mais simplificada. Disponível em: https://jquery.com/. Acesso em: 17 dez. 2021.
Aula 2
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áficos em suas páginas. Em HTML, um dos componentes que
permitem a inserção de gráficos é 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áficos 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áficos, 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.
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
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>DOM</title>
5 <meta charset="utf-8">
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{
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 fim 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
3
4 // variável de contexto 2d
7 // desenha um retângulo
8 ctx.fillRect(20, 20, 100, 100)
Perceba que nosso quadrado negro foi inserido no canto esquerdo da área de desenho do Canvas, agora,
vamos entender parte por parte do código.
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:
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áfico que se deseja produzir. No exemplo a seguir,
apresentaremos um gráfico de duas dimensões, logo, marcamos “2d”.
Seguindo esse contexto, podemos, então, fazer o primeiro desenho (um retângulo) utilizando o método fillRect(
), que receberá quatro parâmetros:
1 ctx.fillRect(
2 distância para o eixo x,
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.
Note que não especificamos 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á!
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!
4 // variável de contexto 2d
5 var ctx = canvas.getContext('2d');
6
7 // desenha um retângulo
10 // segundo retângulo
11 ctx.fillRect(30, 30, 100, 100)
Para diferenciar os dois quadrados, é possível aplicar cores distintas usando a propriedade fillStyle. 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)";
5 // segundo retângulo
6 ctx.fillStyle = "rgba(0,0,180,0.7)";
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:
2 var ctx=document.getElementById('desenho').getContext('2d');
3
6
7 // configurações
8 var x = 100;
9 var y = 100;
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_fim”, que determina o valor do ângulo final (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 fique 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 final. Por fim, o método stroke( ) será usado para
desenhar as linhas.
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 filltext().
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
10 // inserindo o texto
11 ctx.fillText("Olá mundo!", x, y);
Infelizmente, Canvas não salva as imagens em formato vetorial, o que gera uma grande perda de qualidade.
Bons estudos!
1 // iniciando o canvas
4
5 // configurações
6 var x = 0;
7 var y = 0;
Aqui, declaramos um novo desenho 2D usando canvas. Nas configuraçõ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)
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 fillRect: largura++. Esse
comando pega o 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.
setInterval(animacao, 100)
A função setInterval recebe como entrada outra função que será executada indefinidamente 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 .
1 // iniciando o canvas
4
5 // configurações
6 var x = 0;
7 var y = 0;
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
7 }
8 setInterval(animacao, 100)
Observe, na Figura 9, o que acontece se executarmos o código:
Observe como pegamos a largura e a altura <canvas> do na função clearRect( ): usando canvas. width e
canvas.height, respectivamente. Na função fillRect( ), 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:
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
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Canvas & Audio</title>
5 <meta charset="utf-8">
6 </head>
7
8 <body>
13
14 <!-- Onde exibiremos dados da música -->
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:
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.
script.js
1 // inicia o canvas
2 var canvas = document.getElementById("detalhes");
7
8 // exibe a duração da música
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 (verifica se o áudio tocou por
completo), currentSrc (indica o endereço do arquivo de áudio), entre outros (FULTON; FULTON, 2011).
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 desafio 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á definida 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,
defina 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:
1 <!doctype html>
2 <html>
3 <head>
8 <body>
9
12 height="10" width="1280"></canvas>
13
16 <script src="script.js"></script>
17 </body>
18 </html>
1 *{ margin: 0; padding: 0; }
2
3 #carregamento{
4 position: fixed;
5 background-color: #ccc;6. }
1 // iniciando o canvas
2 var canvas = document.getElementById('carregamento')
5 // configurações
6 var x = 0;
7 var y = 0;
8 var altura = 10;
9 var largura = 0;
10 var fator = 50;
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()
23 clearInterval(atualiza);
24 }
25 }
26
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á definida 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 é definida pela função animacao( ), descrita das linhas 17 a 25, e que o
intervalo de atualização é dado pela função setInterval( ), definida na linha 28. Por fim, 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).
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)
(D)
(E)
Saiba mais
Biblioteca de áudios
Você pode conseguir arquivos de áudio gratuitos diretamente na biblioteca de áudio do YouTube.
Aula 3
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.
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
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 fim 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 fluxo 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.
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 das centenas 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:
Entre os principais métodos e propriedades desse objeto, podemos citar, entre outras:
Agora que você já conhecer o objeto XMLHttpRequest, podemos, finalmente, falar sobre a implementação mais
comum dele com JavaScript: a tecnologia AJAX. Você verá mais detalhes no próximo bloco.
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íficas 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:
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 fim, a requisição é enviada
usando-se o método send( ).
1 xhr.open("GET", "https://um-site-qualquer.com.br")
2 xhr.send()
Para verificar 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).
4 Solicitação concluída.
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).
Código Descrição
Veja como onreadystatechange pode ser usada para escutar se alguma outra propriedade foi alterada:
5 // conecta ao site
6 xhr.open("GET", "https://um-site-qualquer.com");
13
14 var pronto = xhr.readyState; // a conexão foi feita?
17
18 i++; // contador de mudanças
19
20 console.log("#", i) // contador de mudanças
21
22 // como está a conexão
27
28 // mostre a resposta
29 console.log(resposta);
30
31 }
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, verificamos 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).
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.
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):
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.
A consulta a um serviço remoto, em geral, é feita usando-se formatos de armazenamento padronizado, como
XML ou JSON, mas raramente esses arquivos ficam 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
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.
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.
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:
3 var doc = {
4 "userId": 555,
7 }
8
11
12 var pronto = xhr.readyState; // a conexão foi feita?
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
Nas linhas 2 a 6, criamos uma variável (doc) para receber um objeto com as propriedades userId (identificador
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 especificaçã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
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.
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.
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:
product Nome do produto a ser pesquisado (o sistema possui um Blusa de estampa da marca BluSA
algoritmo avançado de detecção de processamento de (coleção do verão)
linguagem natural).
Por fim, a web service retorna os preços de todas as concorrentes para produtos similares, por exemplo:
5 "preco":25.99
6 }
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,
6 "price":25.99
7 },
8 {
9 "id":2,
12 "price":89.99
13 },
14 {
15 "id":3,
18 "price":29.99
19 },
20 {
21 "id":4,
24 "price":19.99
25 },
26 {
27 "id":5,
30 "price":39.99
31 },
32 ]
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:
Código 5 | index.html
1 <!doctype html>
2 <html>
3 <head>
4 <title>Consulta concorrentes</title>
5 <meta charset="utf-8">
8 <body>
9 <h1>Sistema de consulta de produtos</h1>
12 <button onclick="buscar()">Buscar</button>
13
14 <div id="saida"></div>
15
16 <script src="script.js"></script>
17 </body>
18 </html>
Código 6 | estilo.css
1 h1{
2 text-align: center;
5 input{
6 display: block;
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;
17 }
18 button{
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;
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 }
Caso tenha construído o sistema baseado no modelo proposto (CSS e HTML), sua página final ficará semelhante
a esta:
A seguir, apresentaremos um código de exemplo do script.js. Esse arquivo deve ter duas funções: buscar( ) e
imprimirRespostaTeste( )
9 var doc = {
10 "user": "jsadmin",
11 "auth_code": "132fiauiw1yhd821klaslf",
12 "product": produto
13 }
14
17
18 console.log("Consultando web service...")
19
20 var pronto = xhr.readyState; // a conexão foi feita?
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
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
69 },
70 {
71 "id":5,
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 + "
85
86 gravar = gravar+"</table>";
87
88 saida.innerHTML = gravar;
89 }
O código acima seleciona os valores presentes na caixa de texto (campo de id “produto”); em seguida, esse valor
é colocado em um objeto (linha 9 a 13) que será usado na consulta assíncrona (linhas 15 a 30).
Observe que a linha 37, que envia os dados para o servidor remoto, está comentada. No lugar dela, chamamos
a função imprimirRespostaTeste( ), na linha 39. Observe, ainda, que a função que simplesmente imprime uma
mensagem teste foi implementada da linha 43 a 89.
Ao executar a página e abrir o console de navegação, é possível ver que a linha 18 foi impressa, logo, o status da
conexão assíncrona foi verificado pelo menos uma vez.
O código acima é apenas uma representação de como esse serviço poderia funcionar, pois seria necessário
implementar um web service real para testá-lo.
Saiba mais
Vídeoaula – YouTube (Felipe Aguiar – Laboratório de Código)
Esse site fornece APIs falsas para que você possa testar conexões via AJAX.
INTRODUÇÃO
Olá, estudante!
Pense em como seria incrível se todos os programas de computador fossem construídos em uma mesma
plataforma ou em uma única linguagem de programação. Assim, qualquer programador seria capaz de criar
softwares ou novos módulos que se integrariam perfeitamente uns aos outros. Entretanto, a própria natureza
da inovação seria prejudicada por isso, uma vez que cada linguagem usada para desenvolvimento de software
tem vantagens e desvantagens.
Como pode ver, programadores tem diferentes necessidades e, por isso, usam diferentes linguagens e
plataformas. Mas em um mundo em que sistemas web são cada vez mais fundamentais, é vital que sistemas
distintos se comuniquem. Assim, surgiram as chamadas APIs (Application Programming Interfaces), que são
formas padronizadas para permitir que diferentes softwares se comuniquem, em especial, em sistemas web.
Nesta aula, falaremos mais sobre APIs no contexto do JavaScript e como podemos incorporar APIs de terceiros
em nossas aplicações.
Bons estudos!
Para entender a importância das APIs, vamos imaginar por que sistemas são construídos usando-se diferentes
plataformas e linguagens. Leve em consideração que cada linguagem foi projetada com um propósito, o que
pode promover vantagens para determinadas necessidades, mas desvantagens em relação a outras. Por
exemplo, PHP permite a construção de páginas dinâmicas de maneira bastante simplificada, exigindo, dos
programadores, pouco tempo de estudo para a criação de suas primeiras aplicações (BENTO, 2021). Entretanto,
a facilidade de codificação também pode ser considerada uma desvantagem, uma vez que permite que códigos
de baixa legibilidade e performance sejam produzidos.
Já a linguagem C permite um controle de mais baixo nível, como acesso direto à memória, o que facilita a
criação de programas de maior performance (ZHIRKOV, 2018), mas não tem suporte à orientação a objetos e é
limitada no uso de multithreading. Por outro lado, Java é bastante usada para criar aplicações desktop com
interface amigável (LECESSI, 2019), mas tem uma curva de aprendizado maior.
Como pode ver, existem muitas formas de se construir um sistema, muitas linguagens e plataformas (como
sistemas operacionais); não há como fugir disso, então, é necessário criar um “ambiente neutro” ou mesmo um
conjunto de regras para que diferentes sistemas possam se comunicar.
Tome por exemplo a API dos sistemas de consultas de código de endereçamento postal (CEP). Há vários
serviços disponíveis para isso, como o ViaCEP, Api CEP, cep.la, API web service dos Correios ou a API de
consultas de CEP do governo federal. Para consultar uma API web service, é preciso fazer uma requisição GET,
POST e outros usando HTTP/HTTPS por meio de uma URI. Essa definição pode parecer difícil de ser
implementada em JS, mas leve em consideração que simples navegadores de internet fazem requisições HTTP
por GET quando digitamos um endereço na barra de navegação (URL). Por exemplo: podemos testar a API web
service de consulta de CEP da plataforma ViaCEP acessando o seguinte endereço (substitua XXXXXXX por sete
números correspondentes a um cep): https://bit.ly/3HS72QJ.
Nesse caso, é feita uma consulta a API desse serviço enviando-se como parâmetros de busca o número de CEP,
que retornará um arquivo com o endereço correspondente. Veja que esse servidor nos dá a opção de obter
resultados em formato XML ou em formato JSON, basta, apenas, alterar o final da URL.
JSON XML
{ <xmlcep>
} </xmlcep>
A API é a interface de comunicação com o servidor, e note que, para obter a resposta, não é preciso saber como
esse servidor guarda os dados (se usa um banco de dados SQL ou NoSQL ou se as informações estão em
arquivos de texto simples), basta, apenas, saber a regra para se comunicar com ele: qual a URL padrão e o que é
preciso mudar nela para se obter o endereço desejado. Nos próximos blocos, vamos explorar o consumo de
APIs de terceiros. Até lá!
Bons estudos!
A seguir, vamos criar um sistema web para realização de consultas de CEP. Nosso sistema deverá receber, como
entrada, um código postal de sete dígitos e retornar informações referentes a esse CEP, como logradouro,
cidade, estado etc. Alguns servidores que disponibilizam APIs podem cobrar por acesso, uma vez que APIs com
grande quantidade de acesso consomem banda de internet e processamento do servidor, outros requerem
cadastro apenas para limitar as quantidades de acesso com base no usuário autenticado. Para esse exercício
prático, escolhemos o ViaCEP (https://viacep.com.br/) por não requerer autenticação para realização de
consultas (você pode usar outra se preferir).
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>API</title>
5 <meta charset="utf-8">
6
7 </head>
8
9 <body>
10 <!-- busca -->
11
12 <input type="text" placeholder="Digite o CEP aqui"
13 id="buscar_cep">
14
17
18
21 <strong>CEP: </strong>
22 <span id="cep"></span>
23 </p>
24 <p>
25 <strong>Logradouro: </strong>
26 <span id="logradouro"></span>
27 </p>
28 <p>
29 <strong>Bairro: </strong>
30 <span id="bairro"></span>
31 </p>
32 <p>
33 <strong>Cidade: </strong>
34 <span id="cidade"></span>
35 </p>
36 <p>
37 <strong>Estado: </strong>
38 <span id="estado"></span>
39 </p>
40
43
44 </body>
45 </html>
1 {
2 "cep": "31270-901",
3 "logradouro": "Avenida Presidente Antônio Carlos",
4 "bairro": "Pampulha",
5 "localidade": "Belo Horizonte",
6 "uf": "MG"
7
8 […]
9 }
1 function buscarCEP(){
2
3 // entrada
4 var entrada=document.getElementById('buscar_cep').value;
5
6 // saída
15 xhr.responseType = "json";
16
17 // envia requisição
18 xhr.open("GET",
19 "https://viacep.com.br/ws/"+entrada+"/json/");
20 xhr.send();
21
22 // verifia se o estado da conexão mudou
23 xhr.onreadystatechange = ()=>{
24
29
30 // grava valores
31 cep.innerText = xhr.response.cep;
32 logradouro.innerText = xhr.response.logradouro;
33 bairro.innerText = xhr.response.bairro;
34 cidade.innerText = xhr.response.localidade;
35 estado.innerText = xhr.response.uf;
36 }
37 }
38
39 }
Se tudo der certo, você verá um resultado similar a este (Figura 2):
Figura 2 | Dados preenchidos por meio da consulta à web service de busca de CEPs
Aqui, você aprendeu a consumir uma API de web services para consulta de informações referentes a códigos de
endereçamento postal (CEP). No próximo bloco, você aprenderá outro tipo de API bastante utilizado: APIs de
geolocalização.
Até lá!
Bons estudos!
Note que a maior parte desses serviços é paga, contudo, há muitas alternativas gratuitas e livres disponíveis na
internet. Nesta segunda parte da aula de consultas a APIs de terceiros, veremos como consumir dados de
outros tipos de API. Para esse exemplo, vamos utilizar o OpenLayers, uma biblioteca JavaScript gratuita e Open
Source para criação de mapas dinâmicos em páginas web (disponível em: https://openlayers.org/).
Nesse exemplo, você aprenderá como criar mapas interativos de maneira simplificada, consultar a API de
geolocalização do navegador e integrar isso ao mapa gerado pelo OpenLayers para localização em tempo real.
Isso tudo será feito a partir de HTML, CSS e JavaScript, mas antes, é preciso criar um arquivo HTML e carregar a
biblioteca OpenLayers e os arquivos JS e os de estilo CSS dessa biblioteca.
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>API MAPA</title>
5 <meta charset="utf-8">
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css"
type="text/css">
8 <script
src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js">
</script>
9 </head>
10 <body>
11 <div id="mapa"></div>
12 <script src="script.js"></script>
13 </body>
14 </html>
Note que os arquivos externos foram incorporados nas linhas 7 e 8; além disso, criamos uma vazia para inserir
o nosso mapa (linha 11). Para delimitar o tamanho do mapa, vamos criar um estilo para o id “mapa” dentro do
arquivo “estilos.css”.
Código 5 | Estilo.css
estilo.css
1 #mapa{
2 width: 400px;
3 height: 400px;
4 }
Por fim, criaremos o script que fará o carregamento do mapa por meio da API do OpenLayers. Não se preocupe
com os códigos a seguir, pois foram coletados da documentação do OpenLayers (disponível em:
https://bit.ly/3K094jH). Vamos alterar apenas a linha 2, na qual definimos o nome da div que receberá o mapa, e
a linha 9, na qual incluiremos as coordenadas de latitude e longitude que serão centralizadas no mapa:
Código 6 | script.js
script.js
2 target: 'mapa',
3 layers: [
4 new ol.layer.Tile({
5 source: new ol.source.OSM()
6 })
7 ],
10 zoom: 4
11 })
12 });
Para esse exemplo, vamos utilizar as coordenadas -45º de longitude e -20º de latitude (que irá centralizar o
mapa do Brasil). Observe o resultado na Figura 3:
Nesse exemplo, apenas utilizamos uma biblioteca já pronta para exibir um mapa de uma região específica,
entretanto, podemos combinar isso com uma característica dos navegadores modernos: geolocalização.
O HTML5 introduziu uma API de geolocalização que permite a obtenção das posições de latitude e longitude do
dispositivo (W3C, 2021). Para usá-la, basta analisar o objeto navigator.geolocation:
geo = navigator.geolocation
Por exemplo, para recuperar as coordenadas do local em que estamos atualmente, podemos usar o seguinte
código:
3
4 // coleta latitude e longitude
7 // imprimindo valores
8 console.log("Latitude:", latitude)
9 console.log("Longitude:", longitude)
10
11 });
Em um primeiro acesso, o navegador irá requisitar autorização para exibir sua localização por uma questão de
segurança. A API Geolocalization permite, aos navegadores, a localização física do usuário, mas por uma
questão de segurança, isso só pode ser feito com permissão (FLANAGAN, 2011).
Ao permitir o acesso, o console exibe as localizações de latitude e longitude, e a depender do dispositivo usado,
com uma precisão de localização magnífica:
Podemos, agora, combinar a API de geolocalização do navegador com a biblioteca OpenLayers e plotar sua
posição exata. Observe como ficaria nosso código:
3
4 // coleta latitude e longitude
7 // imprimindo mapa
8 var map = new ol.Map({
9 target: 'mapa',
10 layers: [
11 new ol.layer.Tile({
12 source: new ol.source.OSM()
13 })
14 ],
19 });
20 });
Aqui, combinamos o objeto navigator.geolocation com a biblioteca OpenLayers. Note que inserimos o código do
OpenLayers (linhas 7 a 19) dentro da função getCurrentPosition (linha 2), e as únicas alterações que fizemos
foram na linha 16, em que substituímos os valores pelas variáveis latitude e longitude, e 17, em que
aumentamos o valor de zoom para 6.
Teste esse código em seu computador e veja que o mapa se aproxima da localização real. Use um nível de zoom de 20 e verá sua localização
exata (a precisão depende do dispositivo usado).
Esses foram alguns exemplos que ilustram o consumo de APIs de web services usando JavaScript e HTML5. Note
que, com poucos códigos JavaScript, é possível construir aplicações poderosas, como sistemas de buscas de CEP
ou mapas interativos em tempo real, como os exemplos explorados nesta aula. Além disso, há muitas outras
possibilidades, então, não se prenda a esses exemplos e explore outras APIs, entretanto, tome cuidado ao
consumir APIs de terceiros em projetos reais, pois o funcionamento do seu sistema dependerá da
disponibilidade da web service de terceiros, e depender disso pode ser um grande problema, pois, muitas
vezes, esses serviços saem do ar sem aviso prévio.
Bons estudos!
ESTUDO DE CASO
Você está cada vez mais popular na Empresa A; no momento, você é o programador front-end mais requisitado
pelos clientes. Continue trabalhando assim e, em breve, você poderá ser promovido a programador front-end
pleno.
A gerência incumbiu você de trabalhar nos requisitos enviados por um novo cliente: a empresa C, que é uma
agência de viagens que opera pela internet. Atualmente, ela usa um sistema baseado na API do Google Maps
(https://maps.google.com/) para exibir um mapa interativo dos locais mais requisitados por clientes, entretanto,
o custo para usar a API do Google Maps ficou elevado devido ao aumento do dólar, uma vez que decidiram
hospedar o site nos Estados Unidos.
Por isso, a equipe decidiu reduzir custos utilizando um sistema open source: o OpenLayers, uma biblioteca
JavaScript gratuita para criação de mapas dinâmicos em páginas web (disponível em https://openlayers.org/).
Construa uma página web que exiba um mapa interativo para os quatro principais destinos turísticos
requisitados por clientes:
index.html
1 <!doctype html>
2 <html>
3 <head>
4 <title>Agência de turismo</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="estilo.css">
7
8 <!-- biblioteca OpenLayers -->
9 <link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css"
type="text/css">
10 <script
src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js">
</script>
11
12 </head>
13 <body>
14 <h1>Destinos favoritos de clientes do turistando</h1>
15
16 <div id="destinos">
17 <div id="destino-1"></div>
18 <div id="destino-2"></div>
19 <div id="destino-3"></div>
20 <div id="destino-4"></div>
21 </div>
22
23 <script src="script.js"></script>
24
25 </body>
26 </html>
estilo.css
1 *{ margin: 0; }
2 h1{ text-align: center; }
3
4 #destino-1, #destino-2, #destino-3, #destino-4{
5 width: 50%;
6 height:300px;
7 float:left;
8 }
Note que criamos quatro elementos nomeados de destino 1 a 4, respectivamente. Cada um desses elementos
tem 300px de altura e ocupa 50% da página (linhas 4 a 8, arquivo estilo.css).
Para armazenar os destinos, é possível criar um array e, dentro dele, um array para cada destino. Desta forma:
Assim, para pegar cada cidade, bastaria usar um laço for e, em cada item, usar:
destinos[i][1] = latitude.
destinos[i][2] = longitude.
3 [
4 "Cancún, México",
5 21.185825728408798,
6 -86.85230016459138
7 ],
8 [
9 "Hawaii, EUA",
10 21.308769168988754,
11 -158.04524147166748
12 ],
13 [
14 "Arraial do Cabo, Brasil",
15 -22.9877924209166,
16 -42.01292851426791
17 ],
18 [
21 -39.048106898973074
22 ]
23 ];
24
29 layers: [
30 new ol.layer.Tile({
33 ],
34 view: new ol.View({
35 center: ol.proj.fromLonLat([
36 destinos[i][2],
37 destinos[i][1]
38 ]),
39 zoom: 11
40 })
41 });
42 }
Saiba mais
O que é uma API? (YouTube – Canal TI)
Neste link, você aprenderá o que são, como funcionam e como usar APIs em seu código.
REFERÊNCIAS
2 minutos
Aula 1
DOM STANDARD. 2021. Disponível em: https://bit.ly/3zJJbjx. Acesso em: 17 dez. 2021.
MARIANO, D.; MELO-MINARDI, R. de. Introdução à programação web para bioinformática: HTML, CSS, PHP
and JavaScript. [S. l.]: Independently Published, 2017.
Aula 2
FULTON, S.; FULTON, J. HTML5 canvas: native interactivity and animation for the web. Newton: O’Reilly Media,
2011.
MDN WEB DOCS. Drawing text. [s. d.]. Disponível em: https://mzl.la/3r2HXMe. Acesso em: 17 dez. 2021.
MDN WEB DOCS. Utilização básica do canvas. [s. d.]. Disponível em: https://mzl.la/3raUugO. Acesso em: 17
dez. 2021.
Aula 3
FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre: Bookman Editora, 2011.
MDN Web Docs. Códigos de status de respostas HTTP. 2021. Disponível em: https://mzl.la/338AaEG. Acesso
em: 5 dez. 2021.
Aula 4
BENTO, E. J. Desenvolvimento web com PHP e MySQL. São Paulo: Casa do Código, 2021.
FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre: Bookman Editora, 2011.
LECESSI, R. Functional interfaces in Java: fundamentals and examples. New York: Apress, 2019.
W3C. Geolocation API. 2021. Disponível em: https://bit.ly/3FeAKxB. Acesso em: 23 dez. 2021.
ZHIRKOV, I. Programação em baixo nível: C, assembly e execução de programas na arquitetura intel 64. São
Paulo: Novatec Editora, 2018.