Programar uma página com HTML + JavaScript é combinar:

 



  • HTML → estrutura da página (botões, textos, campos)

  • JavaScript → comportamento/interatividade (cliques, cálculos, animações)

  • (Opcional) CSS → visual/estilo

Exemplo simples de página com JavaScript:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Página</title>

<style>
body{
font-family: Arial;
text-align:center;
margin-top:50px;
}

button{
padding:10px 20px;
font-size:18px;
}
</style>

</head>
<body>

<h1>Minha primeira página com JavaScript</h1>

<p id="mensagem">Clique no botão</p>

<button onclick="mudarTexto()">
Clique aqui
</button>

<script>
function mudarTexto(){
document.getElementById("mensagem").innerHTML =
"Você programou com JavaScript!";
}
</script>

</body>
</html>

Como funciona:

  • <h1> cria o título

  • <button> cria botão

  • onclick executa uma função quando clicar

  • function mudarTexto() é código JavaScript

  • getElementById() pega o elemento e muda o texto.

Outro exemplo: calculadora simples

<input id="n1" type="number">
<input id="n2" type="number">

<button onclick="somar()">
Somar
</button>

<p id="resultado"></p>

<script>
function somar(){
let a = Number(document.getElementById("n1").value);
let b = Number(document.getElementById("n2").value);

document.getElementById("resultado").innerHTML =
a+b;
}
</script>

Estrutura profissional costuma ser:

index.html
style.css
script.js

index.html

<script src="script.js"></script>

script.js

alert("Olá mundo");

Para praticar você pode aprender:

  1. HTML básico

  2. JavaScript (variáveis, funções, eventos)

  3. DOM (getElementById, querySelector)

  4. Projetos:

  • Calculadora

  • Relógio digital

  • To-do list

  • Site interativo

Ótimo — vamos montar uma página simples de verdade, passo a passo.

Projeto: Página com botão e troca de cor

Crie um arquivo index.html e coloque:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Site</title>

<style>
body{
font-family:Arial;
text-align:center;
margin-top:50px;
background:white;
}

button{
padding:15px 30px;
font-size:18px;
border:none;
border-radius:8px;
cursor:pointer;
}
</style>

</head>
<body>

<h1>Aprendendo JavaScript</h1>

<p id="texto">Clique no botão</p>

<button onclick="mudarCor()">
Mudar Cor
</button>

<script>
function mudarCor(){

document.body.style.background="lightblue";

document.getElementById("texto").innerHTML =
"Você usou JavaScript!";
}
</script>

</body>
</html>

O que esse código ensina:

JavaScript pode alterar a página:

document.body.style.background="lightblue";

Muda a cor do fundo.

document.getElementById("texto").innerHTML=
"Você usou JavaScript!";

Troca o texto.

Variáveis

let nome="Vinicius";
alert(nome);

let cria variável.

Condição

let idade=18;

if(idade>=18){
alert("Maior de idade");
}

Laço de repetição

for(let i=1;i<=5;i++){
console.log(i);
}

Conta de 1 até 5.

Próximo mini projeto: relógio digital

<h1 id="relogio"></h1>

<script>
setInterval(function(){

let agora = new Date();

document.getElementById("relogio").innerHTML=
agora.toLocaleTimeString();

},1000);
</script>

Atualiza a cada segundo.

Depois disso você já consegue criar:

  • Sites interativos

  • Calculadora

  • Jogos simples

  • Formulários

  • Apps web

Perfeito, vamos subir um nível e fazer um mini projeto mais profissional.

Projeto: formulário com JavaScript

<!DOCTYPE html>
<html>
<head>
<title>Cadastro</title>

<style>
body{
font-family:Arial;
text-align:center;
margin-top:50px;
}

input{
padding:10px;
margin:10px;
}

button{
padding:10px 20px;
}
</style>

</head>
<body>

<h1>Cadastro</h1>

<input type="text" id="nome" placeholder="Digite seu nome">

<button onclick="enviar()">
Enviar
</button>

<h2 id="resultado"></h2>

<script>

function enviar(){

let nome =
document.getElementById("nome").value;

if(nome==""){
alert("Digite seu nome");
}
else{
document.getElementById("resultado").innerHTML=
"Bem-vindo " + nome;
}

}

</script>

</body>
</html>

Você aprendeu:

Capturar dados:

document.getElementById("nome").value

Validar:

if(nome=="")

Mostrar resultado:

innerHTML

Evento moderno (melhor prática)

Em vez de onclick, pode usar:

document.querySelector("button")
.addEventListener("click", enviar);

Isso é mais profissional.

Arrays (listas)

let frutas = [
"Maçã",
"Banana",
"Uva"
];

console.log(frutas[0]);

Objetos

let pessoa = {
nome:"Vinicius",
idade:30
};

console.log(pessoa.nome);

Criando elementos na página

let p = document.createElement("p");

p.innerHTML="Novo texto";

document.body.appendChild(p);

JavaScript cria conteúdo sozinho.

Mini projeto: contador

<h1 id="numero">0</h1>

<button onclick="somar()">
+
</button>

<script>
let contador=0;

function somar(){
contador++;

document.getElementById("numero")
.innerHTML=contador;
}
</script>

Depois disso vá para:

✅ DOM
✅ Eventos
✅ Funções
✅ APIs
✅ JSON
✅ Projetos reais

Depois pode aprender frameworks:

  • React

  • Vue.js

  • Angular

Com isso você cria sistemas completos.

Agora vamos montar algo mais próximo de um site real: HTML + CSS + JavaScript juntos.

Projeto: Lista de tarefas (To-Do List)

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Lista de Tarefas</title>

<style>
body{
font-family:Arial;
text-align:center;
margin-top:50px;
}

input{
padding:10px;
width:250px;
}

button{
padding:10px 15px;
}

li{
margin:10px;
font-size:20px;
}
</style>

</head>
<body>

<h1>Minha Lista</h1>

<input id="tarefa" placeholder="Digite uma tarefa">
<button onclick="adicionar()">
Adicionar
</button>

<ul id="lista"></ul>

<script>

function adicionar(){

let tarefa =
document.getElementById("tarefa").value;

if(tarefa==""){
alert("Digite uma tarefa");
return;
}

let item =
document.createElement("li");

item.innerHTML=tarefa;

document
.getElementById("lista")
.appendChild(item);

document
.getElementById("tarefa")
.value="";

}

</script>

</body>
</html>

Conceitos novos:

Criando elemento:

document.createElement("li");

Adicionando na página:

appendChild(item);

Limpando input:

.value=""

Melhorando com remover tarefas:

troque:

item.innerHTML=tarefa;

por:

item.innerHTML=
tarefa +
' <button onclick="this.parentElement.remove()">X</button>';

Agora dá para apagar tarefas.

Funções importantes de JavaScript

1 Eventos

addEventListener("click", minhaFuncao);

2 Selecionar elementos

querySelector()
querySelectorAll()
getElementById()

3 Temporizadores

setTimeout(function(){
alert("Olá");
},2000);

2 segundos.

Consumindo API (nível profissional)

Exemplo buscar dados:

fetch("https://jsonplaceholder.typicode.com/users")
.then(res=>res.json())
.then(dados=>{
console.log(dados);
});

Isso já é base para sistemas e apps.

Estrutura profissional:

index.html
style.css
script.js

Separar código é padrão.

Próximos projetos para treinar

Faça:

  1. Calculadora

  2. Relógio

  3. To-do list

  4. Jogo da velha

  5. Site com login

  6. Clone do YouTube (para treino)

Quando dominar isso, pode ir para:

  • React

  • Node.js

  • Bootstrap