Javascript em nosso navegador

Domine as interações entre Javascript e HTML/CSS, eventos, requisições HTTP

Neste curso, o Javascript chega ao nosso navegador. Como mencionei antes, nossas páginas da web são compostas por três linguagens: HTML para estrutura, CSS para estilo e layout, e Javascript para interatividade. Agora é a hora de você entender completamente essa interatividade! Começaremos discutindo o objeto global: window, depois location, e o mais importante, vamos analisar minuciosamente o que é conhecido como DOM.

DOM

O que é o DOM? É a representação do nosso código HTML, e é o que o Javascript pode manipular para modificar o HTML e CSS de nossas páginas da web. Todos os nossos elementos HTML estão bem organizados no DOM, e podemos modificar seus atributos, seu estilo CSS e adicionar ou remover classes CSS. Vou mostrar a você as diferentes maneiras de selecionar elementos existentes no DOM e também como criar facilmente novos elementos.

Eventos

E, é claro, a base da interatividade: eventos. Você pode executar código em resposta a um evento. Por exemplo, quando o usuário clica em um botão, pressiona uma tecla no teclado ou envia um formulário. Vou mostrar a você as diferentes maneiras de reagir a eventos: manipuladores de eventos e ouvintes de eventos. Mas para entender completamente tudo isso, examinaremos o objeto Event, que possui propriedades específicas dependendo da natureza do evento. Também aprenderemos sobre propagação de eventos, discutindo a fase de borbulhamento e a fase de captura. Além disso, exploraremos como interromper ou modificar a propagação de eventos usando os métodos stopPropagation e preventDefault.

Requisições HTTP

Outro tópico que abordaremos são as requisições HTTP, também conhecidas como Ajax. Isso nos permitirá comunicar com um servidor, onde podemos receber, enviar, modificar e excluir dados. Uma das principais vantagens é que podemos processar os dados que recuperamos diretamente em Javascript e atualizar apenas certos elementos de nossa página da web sem precisar recarregar a página inteira. Uma maneira para um servidor interagir com essas solicitações é usando o que é chamado de API REST. Usaremos uma e mostrarei a você como recuperar informações com solicitações GET e como enviar informações com solicitações POST.

Objetos e Funções Úteis

Este curso também é uma oportunidade para discutir tudo o que ainda não abordamos, mas que faz parte integrante do Javascript. Vou falar sobre o objeto Math, o objeto Date e expressões regulares. Revisaremos os métodos setTimeout e setInterval. Também vou apresentar o operador ternário e revisar as funções que podem ser aplicadas a strings e arrays, como map e filter, entre outras. É claro que, para cada um desses tópicos, você poderá testar seus conhecimentos com questionários.

Lista de Aventuras Mundiais

Depois de cobrirmos tudo isso, será hora da sobremesa, a cereja do bolo deste curso. Juntos, criaremos um projeto incrível do início ao fim. Você aplicará tudo o que aprendeu diretamente neste projeto. Vamos criar o aplicativo Lista de Aventuras Mundiais. Para aqueles que não sabem, uma Lista de Desejos é uma lista de coisas que você deseja fazer. Neste projeto, você criará sua própria lista e colocará seus sonhos no mapa-múndi! Usaremos a API do Google Maps para realizar coisas fantásticas. Você localizará seus sonhos, como um bangalô sobre a água nas Maldivas, um safári no Quênia ou escalar a Torre Eiffel. Com a ajuda de eventos, você poderá ampliar automaticamente um de seus sonhos clicando nos marcadores do mapa. Você também poderá interagir com seus sonhos indicando quais você já realizou e quais ainda deseja realizar. Quem disse que você só pode realizar seus sonhos uma vez? E para uma melhor imersão, você também codificará o tour interativo de seus sonhos usando o Google Street View. Isso significa que podemos caminhar virtualmente dentro de seus sonhos. Eu poderia falar sobre este projeto por muito tempo - é simplesmente mágico! E você verá que, mesmo que pareça impressionante, você terá sucesso facilmente passo a passo, pois explicarei tudo para você. Você está pronto? Vamos começar!