Eu gostaria de entender a diferença entre usar o index.html e usar o app.js. Sei que um é o html e o outro é javascript, mas quero saber a diferença no resultado.
Eu gostaria de entender a diferença entre usar o index.html e usar o app.js. Sei que um é o html e o outro é javascript, mas quero saber a diferença no resultado.
Oii! Tudo bem?
Vou te explicar com exemplos:
1) O que é o index.html?
O index.html é o arquivo principal de uma página web. Ele funciona como a estrutura de uma casa: define onde ficam os textos, botões, imagens e outros elementos visuais que o usuário vê.
Por exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Página</title>
</head>
<body>
<h1>Bem-vindo!</h1>
<button>Me clique!</button>
</body>
</html>
Aqui, temos um título e um botão, mas se alguém clicar no botão, nada acontece ainda.
2) O que é o app.js?
O app.js é um arquivo JavaScript. Ele é o responsável por controlar o que acontece quando alguém interage com a página HTML. Ou seja, ele dá vida e movimento para os elementos da página.
Por exemplo:
function mostrarMensagem() {
alert("Você clicou no botão!");
}
Este arquivo cria uma função que mostra uma mensagem quando chamada.
3) Como os dois trabalham juntos?
Para ligar os dois, você faz assim:
<button onclick="mostrarMensagem()">Me clique!</button>
<script src="app.js"></script>
Agora o botão existe graças ao HTML e funciona graças ao JavaScript.
Resumo
| index.html | app.js |
|---|---|
| Define a estrutura da página | Define o comportamento da página |
| Mostra textos, imagens, botões | Faz os elementos responderem a ações |
| Sozinho, é estático | Dá ação e interatividade |
Por que usar os dois separados?
Manter HTML e JavaScript em arquivos separados ajuda a deixar o projeto mais organizado. Assim fica mais fácil corrigir erros, fazer melhorias ou trabalhar em equipe.
Se quiser, pode ver aqui o exemplo funcionando.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!