Um página com as intros do melhores filmes ever
Você deve usar a Star Wars API (http://swapi.co) 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.
Os exercícios são:
- Incluir a biblioteca jQuery (versão mais nova)
- Procure como fazer isso no Google
- Posso não usar jQuery? Veja o FAQ
- Fazer uma chamada AJAX para recuperar a lista de filmes e preencher o
<nav id="movies">...</nav>- Fazer o exercício no arquivo
starwars.js
- Fazer o exercício no arquivo
- Fazer com que, ao clicar em um filme, uma chamada AJAX seja feita para pegar os detalhes do filme e, então, atualizar o texto introdutório
- Salvar, em
localStorage, qual foi o último filme visualizado e, quando a página for carregada, mostrar esse filme - Extra: buscar e colocar um áudio na página (você sabe qual!!!)
- Posso não usar jQuery?
- Pode sim!! Até acho ótimo, porque aí você não fica preso a 01 biblioteca JavaScript em particular. Existem outras similares, como prototype.js, MooTools, YUI etc. Mas bom mesmo é JavaScript =)
- O que é esse
"data-episode-url"em<li data-episode-url="...">...</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="b" data-sorriso=":D">Me dê um sorriso</button>
- Podemos:
let sorrisoEl = document.querySelector('#b'); window.alert(sorrisoEl.getAttribute('data-sorriso'));
- Ou então, se estiver usando atributos que começam com
data-:let sorrisoEl = document.querySelector('#b'); window.alert(sorrisoEl.dataset.sorriso);
- Podemos:
- Tipicamente, damos o nome desses novos atributos de
- Neste caso, uma ideia é colocar a URL da chamada AJAX a ser feita para
recuperar os detalhes daquele episódio
- E quando o elemento for "clicado", recuperar a URL e fazer a chamada AJAX