Baixe os arquivos aqui. Um página com as intros do melhores filmes ever.
Você deve usar a Star Wars API (http://swapi.dev) para poder (a) carregar dinamicamente a lista de filmes e (b) também para exibir o respectivo texto introdutório quando o usuário selecionar um filme.
A SWAPI (leia suópi) é um projeto de um cara chamado Paul Hallet e seu irmão. Eles cadastraram várias informações sobre os filmes de Star Wars em um banco de dados e as disponibilizou gratuitamente na forma de um serviço web (uma API) para que outras pessoas pudessem criar programas que usassem esses dados. Eles também criaram a pokéapi, com dados sobre Pokémon!
Uma intro Star Wars só é uma intro Star Wars se o texto tiver uma rotação
no eixo X de 75deg
, é claro!
Portanto, coloque uma regra a mais no arquivo estilos.css
:
.container {
transform: rotateX(75deg);
}
Inclua a biblioteca jQuery (versão mais nova). Isso pode ser feito de duas formas:
- Baixando a biblioteca do site oficial; ou
- Usando a biblioteca hospedada em uma CDN (content delivery network) - ou seja, de um site que hospeda bibliotecas JavaScript e permite que nós as incluamos no nosso
Lembre-se de incluir o arquivo antes dos arquivos que vão
precisar de jQuery (no caso, starwars.js
).
Obs.: Professor, posso não usar jQuery? Veja o FAQ
Agora vamos fazer uma requisição Ajax e pegar lista de filmes Star Wars.
Com seu resultado em mãos, vamos preencher o
<nav id="filmes"><ul>...</ul></nav>
para conter 01 <li></li>
para
cada filme.
No arquivo starwars.js
, faça uma chamada Ajax para a URL
https://swapi.co/api/films/
. Assim que a resposta chegar, altere a página
para mostrar todos os filmes. Veja no FAQ se quiser lembrar como fazer.
Para saber o quê está sendo retornado na chamada Ajax, você pode:
- Acessar a URL do navegador para ver a resposta; ou
- (Mais legal ainda) Usar a ferramenta do desenvolvedor para ver a resposta da requisição
Deve ser criado um <li>Episode x: titulo</li>
para cada filme
retornado, por exemplo: <li>Episode 4: A New Hope</li>
-
descubra quais propriedades da resposta que você deve usar. Veja no
FAQ para lembrar como criar elementos dinamicamente, e como definir
o conteúdo HTML deles.
Nota: Não se preocupe se os filmes ficarem fora de ordem. Você pode corrigir isso em um dos desafios.
Faça com que, ao clicar em um filme (<li data-id="x">...</li>
), uma função
callback Ajax seja feita para pegar os detalhes desse filme e,
então, atualizar o texto introdutório.
Sugestão: altere o código do exercício 2 para colocar no <li>nome</li>
,
um atributo de dados que contenha o episode_id do filme, de forma que
fique assim:
<li data-id-episodio="1">Episode 1: The Phantom Menace</li>
Ainda no código do exercício 2, coloque um evento de clique no
<li>
recém-criado para fazer uma nova requisição Ajax para essa URL e,
assim que a resposta chegar, alterar o elemento #intro
para ter um conteúdo
igual ao texto introdutório desse filme (descubra que propriedade usar,
olhando para a resposta).
Para ficar lindão, você deve colocar, antes do texto da introdução, os
escritos "Episode X\n"
e "O TITULO EM MAIÚSCULAS\n\n"
. Para saber como
passar todas as letras de uma string para maiúsculas, veja o Faq.
Ordene os filmes de forma crescente de acordo com a propriedade episode_id
.
Para isso, você pode usar o método vetor.sort()
que todo
vetor possui. Veja a descrição do método na MDN.
Como o vetor de filmes não tem uma ordenação natural (como os números ou strings possuem), é necessário passar uma função como parâmetro que será responsável por comparar 2 objetos de filmes. Veja na documentação da MDN como implementar essa função.
A ideia é que a lista de filmes fique ordenada do episódio 1 até o último, em ordem crescente.
Em vez de colocar "Episode 1", coloque "Episode I" e daí por diante. Não
existe no JavaScript uma função para converter números romanos, mas você
pode criar um vetor de strings em que a posição n
contém o algarismo
n
em romano. Daí, em vez de usar o número, use a string na posição correta
do vetor.
Buscar e colocar um certo áudio na página - você sabe qual, Jovem Padawan!!!
É possível tocar um arquivo de música sem usar o elemento <audio>...</audio>
,
usando apenas JavaScript:
let audio = new Audio('arquivo-de-audio.mp3');
audio.play();
Observação: os navegadores não têm permitido mais que músicas comecem a tocar em uma página antes de o usuário interagir com ela de alguma forma (eg, clicando em algo). Portanto, coloque o código para tocar a música dentro de alguma callback de click. Cuidado apenas para não começar a tocar a música novamente, em caso de mais de 01 clique.
- Posso não usar jQuery?
- Pode sim! É legal porque aí você não fica preso a 01 biblioteca
JavaScript em particular.
- Usar XMLHttpRequest diretamente
- Usar fetch (+recente e preferível!!)
- Pode sim! É legal porque aí você não fica preso a 01 biblioteca
JavaScript em particular.
- Como fazer uma requisição Ajax com jQuery?
- Primeiramente, lembre-se de incluir o arquivo da biblioteca. Depois:
$.ajax(configuracoes);
- Por exemplo:
$.ajax({ url: 'url-da-requisicao', dataType: 'json', success: function(resposta) { // escreve a resposta no console (para ver o que foi recebido) console.log(resposta); // faz o que quiser fazer com a resposta... // ... } });
- Veja mais nos slides sobre Ajax com jQuery
- Se estiver sem jQuery, veja Ajax com vanilla JS 1 e 2
- Por exemplo:
- Primeiramente, lembre-se de incluir o arquivo da biblioteca. Depois:
- Como criar um elemento HMTL dinamicamente?
- Usando jQuery:
$('<div></div>').appendTo(document.body);
- Em vanilla JS:
let novoEl = document.createElement('div'); document.body.appendChild(novoEl);
- Usando jQuery:
- Como alterar o conteúdo HTML de um elemento?
- Usando jQuery:
$('elemento').html('novo conteúdo do elemento');
- Em vanilla JS:
let elemento = document.querySelector('elemento'); elemento.innerHTML = 'novo conteúdo do elemento';
- Usando jQuery:
- O que é esse
"data-id-episodio"
em<li data-id-episodio="...">...</li>
?- Em HTML, podemos "criar" novos atributos com o nome e o valor que quisermos
- Tipicamente, damos o nome desses novos atributos de
data-algumacoisa
, para informar que ele é um atributo "de dados" e não um atributo padrão do HTML - Para recuperar o valor de um data attribute:
<button id="maroto" data-sorriso=":D">Me dê um sorriso</button>
- Podemos, em vanilla JS:
let botaoEl = document.querySelector('#maroto'); alert(botaoEl.dataset.sorriso);
- Ou com jQuery:
let $botao = $('#maroto'); alert($botao.data('sorriso'));
- E para colocar um novo atributo de dados:
$botao.data('novo-atributo', 'o seu valor');
- E para colocar um novo atributo de dados:
- Podemos, em vanilla JS:
- Tipicamente, damos o nome desses novos atributos de
- Neste caso, uma ideia é colocar o id do filme para conseguir
recuperar os detalhes daquele episódio
- Quando o elemento for "clicado", recuperar o id do
<li>
que foi alvo do evento declick
e fazer uma busca no vetor de filmes procurando por aquele que tem oid
solicitado
- Quando o elemento for "clicado", recuperar o id do
- Em HTML, podemos "criar" novos atributos com o nome e o valor que quisermos
- Como posso buscar um certo elemento dentro de um vetor?
- Todo vetor possui o método
.find(funcao)
que recebe uma callback como parâmetro e a invoca para cada elemento do array, passando o elemento atual como argumento. Essa callback deve retornartrue
se o elemento atual é o elemento sendo buscado, oufalse
, do contrário. Por exemplo:let frutas = ['kiwi', 'morango', 'tomate']; // quero encontrar a fruta cujo nome possui 4 letras let fruta4Letras = frutas.find(function(fruta) { return fruta.length === 4; }); // imprime: 'kiwi' console.log(fruta4Letras);
- Veja a documentação do
.find()
na MDN
- Veja a documentação do
- Todo vetor possui o método
- Como colocar uma string em tudo maiúsculo?
'Uma palavra'.toUpperCase() === 'UMA PALAVRA';
- O que é Ajax mesmo?
- É uma forma de fazer uma requisição assíncrona para pegar alguma coisa a partir de uma URL. Veja mais sobre Ajax nos slides.