Como HTML, CSS e JavaScript trabalham juntos
Monte uma pequena página com estrutura, estilo e comportamento.
- Explicar o papel do HTML, do CSS e do JavaScript
- Conectar um script a uma página
- Reconhecer o DOM como a representação do HTML no navegador
Uma página web tem três camadas que cooperam. O HTML fornece elementos com significado; o CSS controla a apresentação; o JavaScript responde a eventos e muda a página. O navegador transforma o HTML num Document Object Model (DOM): uma árvore de objetos que o JavaScript consegue ler e atualizar. Você pode estudar as trilhas complementares de HTML e CSS junto com esta.
Experimente
Até 15 XPMonte a página
Atribua cada missão a uma camada da web. Veja a página ao vivo mudar e clique no botão depois de adicionar o comportamento dele.
Page recipe
<h2>Visit counter</h2>
<button>Count visit</button>
.card { background: lavender; padding: 1rem; }
button.addEventListener('click', countVisit)
Choose the layer that creates the page elements.
Uma página, três arquivos
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Visit counter</title>
6 <link rel="stylesheet" href="style.css">
7 <script src="app.js" defer></script>
8 </head>
9 <body>
10 <h1>Visit counter</h1>
11 <button id="count" type="button">Count visit</button>
12 <p id="result" role="status">Visits: 0</p>
13 </body>
14</html>body { font: 1rem system-ui; max-width: 32rem; margin: 3rem auto; }
button { background: rebeccapurple; color: white; padding: .75rem 1rem; }1let visits = 0;
2const button = document.querySelector("#count");
3const result = document.querySelector("#result");
4button.addEventListener("click", () => {
5 visits += 1;
6 result.textContent = "Visits: " + visits;
7});O atributo defer baixa o script enquanto o HTML é analisado e o executa depois que o documento está pronto. O botão funciona com o teclado e com o mouse. O parágrafo de status anuncia a contagem atualizada para as tecnologias assistivas. O CSS pode mudar sem mexer no script, e o HTML continua comunicando significado quando o script não está disponível.
Principais conclusões
HTML é estrutura e significado; CSS é apresentação; JavaScript é comportamento.
O DOM permite que o JavaScript encontre e atualize elementos HTML.
Use um script com defer, controles semânticos e uma região de status para as atualizações.
Quiz da aula
4 perguntas · aprovação com 3 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em JavaScript
Escreva o programa, execute-o com os casos de teste e use o retorno para desenvolver suas habilidades em JavaScript.
Escolha a camada certa da web
A entrada é uma lista de tarefas separadas por vírgula. Para cada tarefa, imprima HTML, CSS ou JavaScript: heading e button criam elementos; color e spacing os estilizam; click e update adicionam comportamento.
- Todas as camadas
- Outra ordem
O JavaScript roda em um frame isolado do navegador, com limite de 1,5 segundo. A entrada fica disponível na variável de string input.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…