Olá, turma! Na aula de HTML de hoje vimos os exemplos de formulario sem e com interação, agora vamos organizar nosso código focando na programação/Java script
Em vez de colocar tudo em um arquivo só, vamos separar nossa estrutura, nosso design e nossa lógica em três arquivos distintos que “conversam” entre si.
Passo 1: A Estrutura (HTML)
Nas nossa aulas estamos usando o site https://onecompiler.com/ escola HTML
Colar no arquivo chamado index.html. Ele é o esqueleto do nosso site.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Meu Projeto de Vida</title> <link rel="stylesheet" href="estilo.css"> </head> <body> <h2>Cadastrar Etapa do Projeto de Vida</h2> <form id="formProjeto"> <label>Etapa:</label><br> <input type="text" id="etapa" required><br><br> <label>Objetivo:</label><br> <input type="text" id="objetivo" required><br><br> <button type="button" onclick="adicionarLinha()">Adicionar à Tabela</button> </form> <table id="tabelaProjeto"> <thead><tr><th>Etapa</th><th>Objetivo</th></tr></thead> <tbody></tbody> </table> <script src="script.js"></script> </body> </html>
Passo 2: O Design (CSS)
Colar arquivo chamado styles.css. Ele cuida da aparência.
body { font-family: Arial, sans-serif; margin: 20px; }
form { margin-bottom: 30px; padding: 15px; border: 1px solid #ccc; width: 300px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #009879; color: white; }
tr:nth-child(even) { background-color: #f3f3f3; }
Passo 3: A Lógica (JavaScript)
Crie um arquivo chamado script.js. Ele é o “cérebro” que faz o site funcionar.
function adicionarLinha() {
var etapa = document.getElementById("etapa").value;
var objetivo = document.getElementById("objetivo").value;
if(etapa === "" || objetivo === "") {
alert("Por favor, preencha todos os campos!");
return;
}
var tabela = document.getElementById("tabelaProjeto").getElementsByTagName('tbody')[0];
var novaLinha = tabela.insertRow();
novaLinha.insertCell(0).innerHTML = etapa;
novaLinha.insertCell(1).innerHTML = objetivo;
document.getElementById("formProjeto").reset();
}
Desafio de Investigação (Responder no caderno)
-
Conexão: Como o arquivo
index.htmlconsegue encontrar oestilo.csse oscript.js? Quais linhas de código fazem essa “ponte”? -
Organização: Se você quisesse mudar apenas a cor da tabela para todos os seus projetos, em qual dos três arquivos você faria a alteração?
-
Poder da Lógica: O que acontece com o seu site se você deletar o arquivo
script.js? A página ainda abre? O botão de adicionar continua funcionando?
⚠️ Atenção, Detetives! “O código que disponibilizei utiliza um nome de arquivo CSS específico. Ao montar seu projeto, verifique se o nome do arquivo que você criou na sua pasta é idêntico ao nome escrito na tag <link> do seu HTML. Se a página não carregar o estilo, o problema pode estar exatamente nesse detalhe. Quem for o primeiro a descobrir o erro e corrigir, ganha um ponto extra!
Dica para o Aluno:
Certifique-se de que os três arquivos estejam salvos dentro da mesma pasta no seu computador. Se eles estiverem espalhados, o site não vai funcionar!
Boa aula! Se surgirem erros, lembre-se de conferir se os nomes dos arquivos escritos no código estão idênticos aos nomes que você salvou.
