Trilha de Aprendizado – JavaScript com HTML5 e CSS
Objetivo
Aprender a usar JavaScript para manipular HTML e CSS, dominando os fundamentos da linguagem e
aplicando em páginas interativas.
Passo 1 – Estrutura base do projeto
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Trilha JavaScript</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Aprendendo JavaScript com DOM</h1>
<p id="mensagem">Clique no botão abaixo!</p>
<button id="btn">Clique aqui</button>
<script src="[Link]"></script>
</body>
</html>
Passo 2 – Criando o CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 40px;
}
button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Passo 3 – Primeiros comandos JavaScript
alert("Bem-vindo à trilha JavaScript!");
[Link]("Página carregada com sucesso!");
Passo 4 – Variáveis e tipos de dados
let nome = "Ana";
let idade = 20;
let ativo = true;
[Link](typeof nome, typeof idade, typeof ativo);
Passo 5 – Interagindo com o DOM
let botao = [Link]("btn");
let mensagem = [Link]("mensagem");
[Link]("click", function() {
[Link] = "Você clicou no botão!";
});
Passo 6 – Entrada e saída de dados
let nomeUsuario = prompt("Qual é o seu nome?");
[Link] = "Olá, " + nomeUsuario + "!";
Passo 7 – Estruturas de decisão (if/else)
let idadeUsuario = Number(prompt("Qual sua idade?"));
if (idadeUsuario >= 18) {
[Link] = "Você é maior de idade.";
} else {
[Link] = "Você é menor de idade.";
}
Passo 8 – Estruturas de repetição (for)
for (let i = 1; i <= 5; i++) {
[Link]("Contando: " + i);
}
Passo 9 – Vetores (arrays)
let frutas = ["maçã", "banana", "laranja"];
[Link](frutas[0]);
[Link]([Link]);
Passo 10 – Percorrendo vetores com for
for (let i = 0; i < [Link]; i++) {
[Link]("Fruta: " + frutas[i]);
}
Passo 11 – Alterando o DOM dinamicamente
let lista = [Link]("ul");
for (let fruta of frutas) {
let item = [Link]("li");
[Link] = fruta;
[Link](item);
}
[Link](lista);
Passo 12 – Manipulando estilos via JavaScript
[Link] = "blue";
[Link] = "bold";
Passo 13 – Funções
function saudacao(nome) {
return "Olá, " + nome + "!";
}
[Link](saudacao("Carlos"));
Passo 14 – Função com evento DOM
function mudarCor() {
[Link] = "lightgreen";
}
[Link]("dblclick", mudarCor);
Passo 15 – Projeto final: Mini contador
<input type="number" id="inicio" placeholder="Início">
<input type="number" id="fim" placeholder="Fim">
<button id="contar">Contar</button>
<p id="resultado"></p>
<script>
[Link]("contar").addEventListener("click", function() {
let ini = Number([Link]("inicio").value);
let fim = Number([Link]("fim").value);
let res = [Link]("resultado");
[Link] = "";
for (let i = ini; i <= fim; i++) {
[Link] += i + " ";
}
});
</script>
Conclusão
Você aprendeu: - Estrutura HTML e CSS - Tipos de dados e variáveis - Vetores - Estruturas condicionais -
Estruturas de repetição - Manipulação de DOM - Funções e eventos