If you're seeing this message, it means we're having trouble loading external resources on our website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Conteúdo principal

Unidade: HTML/JS: tornando páginas web interativas

Prepare-se para tornar suas páginas web interativas

Você está pronto para aprender a tornar suas páginas web interativas com HTML, JavaScript e a API DOM? Você vai descobrir com nossas perguntas de revisão neste tutorial. Prepare-se!
Aprender
Bem-vindo à criação de páginas web interativas
(Abre um modal)
Revisão de HTML/CSS
(Abre um modal)
Revisão de JavaScript
(Abre um modal)
Praticar
Perguntas: recapitulação HTML/CSS
5 perguntas
Quiz: recapitulação JavaScript
12 perguntas

JS e DOM

Aprenda como usar JavaScript para controlar o "DOM" (do inglês Document Object Model) de uma página web.
Aprender
Adicionando JS a uma página web
(Abre um modal)
Desafio: o script de uma tag script
(Abre um modal)
DOM (Modelo de Objeto de Documento)
(Abre um modal)
Depuração de páginas web com o console do navegador
(Abre um modal)
Praticar
Entendendo o DOM
4 perguntas

Métodos de acesso DOM

Aprenda como usar a API DOM do JavaScript para acessar elementos em suas páginas web.
Aprender
Encontrando elementos por ID
(Abre um modal)
Desafio: modificador de ID
(Abre um modal)
Encontrando elementos DOM múltiplos por tag ou nome de classe
(Abre um modal)
Desafio: tags de nome personalizado
(Abre um modal)
Encontrando elementos por seletor CSS
(Abre um modal)
Resumo: métodos de acesso DOM
(Abre um modal)

Modificação DOM

Aprenda a usar a API DOM do JavaScript para modificar aspectos dos elementos da sua página web, como seus estilos e atributos, além de criar novos elementos desde o princípio.
Aprender
Alterando atributos
(Abre um modal)
Alterando estilos
(Abre um modal)
Alterando classes CSS
(Abre um modal)
Configurando innerHTML e textContent
(Abre um modal)
Desafio: A história interior
(Abre um modal)
Criando elementos desde o início
(Abre um modal)
Resumo: técnicas de modificação DOM
(Abre um modal)

Eventos DOM

Aprenda a usar a API DOM do JavaScript para fazer com que sua página web reaja aos eventos do usuário, como clicar, rolar e preencher campos em formulários.
Aprender
Tornando páginas web interativas com eventos
(Abre um modal)
Adicionando um listener de evento
(Abre um modal)
Tipos de evento DOM
(Abre um modal)
Usando as propriedades do evento
(Abre um modal)
Desafio: O bigode do gato
(Abre um modal)
Processando formulários com eventos
(Abre um modal)
Prevenção de comportamento padrão de eventos
(Abre um modal)
Resumo: eventos DOM
(Abre um modal)

Animação DOM

Aprenda a animar partes de sua página web usando três técnicas diferentes - window.setInterval, window.requestAnimationFrame e animações/transições CSS.
Aprender
O objeto window (janela)
(Abre um modal)
Animação de DOM com setInterval
(Abre um modal)
Animação de estilos com requestAnimationFrame
(Abre um modal)
Animação de estilos com animação CSS
(Abre um modal)
Que técnica de animação DOM você deve usar?
(Abre um modal)

Usando bibliotecas de JS em sua página web

Aprenda a incluir bibliotecas de JS em sua página web, assim você pode usar funcionalidades incorporadas por outros desenvolvedores web.
Aprender
O que é uma biblioteca de JS?
(Abre um modal)
Usando uma biblioteca de JS: biblioteca de apresentação de slides
(Abre um modal)
Onde estão hospedadas as bibliotecas JS?
(Abre um modal)
O mundo das bibliotecas de JS
(Abre um modal)
Qual biblioteca de JS você deve usar?
(Abre um modal)
Praticar
Usando bibliotecas JS
5 perguntas

Aprendizagem futura

Agora que você aprendeu a manipular páginas web com JavaScript, o que mais você poderia aprender?
Aprender
O que aprender a seguir
(Abre um modal)

Sobre esta unidade

Depois de fazer a introdução ao JS e a introdução a HTML/CSS, faça este curso para aprender a usar HTML/CSS com a API DOM de JavaScript para deixar suas páginas web interativas.