daniel0547 / cefet-web-starwars

Introduções dos melhores filmes ever

cefet-web-starwars

Um página com as intros do melhores filmes ever

Atividade

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:

1. Incluir a biblioteca jQuery (versão mais nova)
   • Procure como fazer isso no Google
   • Posso não usar jQuery? Veja o FAQ
2. Fazer uma chamada AJAX para recuperar a lista de filmes e preencher o <nav id="movies">...</nav>
3. 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
4. Salvar, em localStorage, qual foi o último filme visualizado e, quando a página for carregada, mostrar esse filme
5. Extra: buscar e colocar um áudio na página (você sabe qual!!!)

FAQ

1. 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 =)

1. 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);

   • 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
2. Como fazer chamadas AJAX?
   • Veja nos slides sobre AJAX
3. Como usar o localStorage?
   • Veja nos slides sobre Web Storage