O que é HTML e como a Web funciona. 🌴 TRILHA HTML 🟠 Etapa 01

   Seja muito bem-vindo à Academy Code Christ! 

 

🌍 Academy Code Christ está disponível em vários idiomas.

Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 

e aprender no seu idioma.

📚 Continue sua jornada de aprendizado

A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  

📋 Menus correspondentes:

👉 Acesse Aqui o Menu Completo do Curso de 🟠 HTML!

👉 Acesse aqui o menu completo do Curso de 🎨 CSS!

👉Acesse aqui o menu completo do Curso de 🚀 JavaScript!

👉 Acesse aqui o menu completo do Curso de 🐍 Python!

👉 Acesse aqui o menu completo do Curso de ⚙️ C Sharp!

👉 Acesse aqui o menu completo do Curso de 🐘 PHP!

💻 Pratique o que você aprende

👉 Acesse o Code Editor Mr Digitals e comece a praticar 

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.

🚀 Etapa 02 

 O que você vai aprender nesta aula?

Se você está começando na programação web, entender como o JavaScript se conecta ao HTML é um dos primeiros passos mais importantes da sua jornada. 

É o JavaScript que transforma páginas estáticas em experiências interativas permitindo criar botões que respondem a cliques, validações de formulários, animações e muito mais. 

Mas antes de sair escrevendo código, existe uma dúvida essencial: qual é a forma correta de inserir JavaScript no HTML? 

Neste guia, você vai aprender as três principais formas de fazer isso interno, externo e inline entendendo quando usar cada uma, suas vantagens e boas práticas utilizadas no mundo real. 

A proposta aqui é simples: explicar de forma clara, direta e sem complicação, para que você consiga aplicar o conhecimento imediatamente, mesmo começando do zero.

 

🧩 Formas de Inserção de JavaScript

Existem três formas principais de incluir JavaScript em páginas HTML:

Interno → Dentro de uma tag <script> no próprio arquivo HTML. Ideal para →  Testes, experimentos rápidos ou scripts pequenos.

Externo → Em um arquivo .js separado. Ideal para → Projetos reais e códigos grandes.

Inline  → Dentro de um atributo HTML. Ideal para → Ações simples (ex.: um clique, um alerta)

Vamos ver cada uma em detalhe, com exemplos e boas práticas.

💡 JavaScript Interno

 <script>

            alert("Olá, JavaScript!");

  </script>

É a forma mais comum nos primeiros passos.

  O script é escrito dentro do próprio arquivo HTML, entre as tags <script> e </script>.

🔸 Como funciona: 

O navegador encontra a tag <script> durante a leitura do HTML e executa imediatamente o código dentro dela.

💬 Esse método é ótimo para testes rápidos, demonstrações ou páginas simples.

⚠️ Cuidados com a posição da tag <script>

Há duas principais posições possíveis:

🔹 No <head> (Cabeçalho)

<head>

  <script>

            alert("Executando antes de carregar o corpo da página!");

  </script>

</head> 

Neste caso, o script é executado antes do HTML completo ser carregado. 

Isso pode causar erros se o script tentar acessar elementos que ainda não foram renderizados (por exemplo, document.getElementById("botao") pode não funcionar).

Solução: use o atributo defer ou DOMContentLoaded (veremos adiante).

🔹 Antes do fechamento do <body>

<body>

  <h1>Página carregada com sucesso!</h1>

 

  <script>

            alert("Agora o script roda após o conteúdo!");

  </script>

</body>

 

💡 Melhor prática:

 Posicionar o <script> no final do corpo é a abordagem mais segura e recomendada, pois garante que todos os elementos HTML já existam quando o JS é executado.

 

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Meu primeiro JavaScript</title>

</head>

<body>

  <h1>Bem-vindo ao meu site!</h1> 

  <script>

            alert("Olá, JavaScript!");

  </script>

</body>

</html>

 

📌 Assim que a página for carregada, aparecerá uma caixinha com a mensagem.

 Esse tipo de script é perfeito para testes e aprendizados rápidos.

🔎 Veja como fica no VScode

🔎 Veja como fica o resultado no Live Server

 

Outro exemplo prático:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>JavaScript Interno</title>

</head>

<body>

  <h1>Exemplo de Script Interno</h1> 

  <script>

            alert("Este é um script interno!");

    console.log("Executando o JavaScript diretamente no HTML...");

  </script>

</body>

</html>

 

💻 JavaScript Externo

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

 

E no arquivo codigo.js:

alert("Arquivo externo conectado com sucesso!");

🔎 Veja como linkar no VScode

 

  

💡 Vantagem: separa código da estrutura HTML, deixando o projeto organizado.

 

🔎 Veja como fica no VScode

 

  

Você também pode nomear a arquivo scripts.js ou como eu fiz codigo.js desde que: o nome do arquivo seja o mesmo do código. Para facilitar a manutenção, o ideal é guardar o JS em um arquivo separado com extensão .js.

Para facilitar a manutenção, o ideal é guardar o JS em um arquivo separado com extensão .js.

Isso mantém o HTML limpo e o código mais organizado, especialmente em projetos grandes.

🧮 Exemplo prático para você entender melhor:

let valor1 = 12;

let valor2 = 8; 

console.log("Soma:", valor1 + valor2);

console.log("Subtração:", valor1 - valor2);

console.log("Multiplicação:", valor1 * valor2);

console.log("Divisão:", valor1 / valor2);

console.log("Resto da divisão:", valor1 % valor2);

console.log("Potência:", valor1 ** 2); 

Saída no console:

Soma: 20

Subtração: 4

Multiplicação: 96

Divisão: 1.5

Resto da divisão: 4

Potência: 144

🔎 Veja como fazer no VScode 👇

 

  

🔎 Veja o resultado como fica no Live Server

 

 

 

 

🔹 Vantagens:

1.    Código mais limpo e fácil de gerenciar;

2.    O mesmo script pode ser reutilizado em várias páginas;

3.    Navegadores armazenam o .js em cache, acelerando o carregamento;

4.    Facilita testes e manutenção.

⚙️ Atributos úteis na tag <script>

A tag <script> permite alguns atributos especiais que controlam o comportamento do carregamento.

Atributo         Função         Exemplo 

src       →       Define o arquivo externo    →   <script src="app.js"></script> 

defer     →     Espera o HTML acabar de carregar antes de rodar o JS →  <script src="app.js" defer> </script> 

async     →    Carrega o script de modo assíncrono (sem bloquear o HTML)   →   <script src="analytics.js" async></script>

💬 Dica prática:

●     Use defer para scripts normais (ele garante execução na ordem).

●     Use async apenas para scripts independentes, como rastreadores ou anúncios.

Exemplo: Arquivo principal (index.html)

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>JavaScript Externo</title>

</head>

<body>

  <h1>Script Externo Conectado</h1>

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

</body>

</html>

 

Arquivo de script (codigo.js)

alert("Olá! Este script foi carregado de um arquivo externo.");

console.log("Arquivo externo funcionando!");

 

🔹 Vantagens:

1.    Código mais limpo e fácil de gerenciar;

2.    O mesmo script pode ser reutilizado em várias páginas;

3.    Navegadores armazenam o .js em cache, acelerando o carregamento;

4.    Facilita testes e manutenção.

 

⚡ JavaScript Inline

Nessa forma, o código JS é inserido diretamente dentro de um atributo HTML.
 É rápido, mas não é considerado boa prática em projetos maiores.

🔹 Forma simples (iniciante) 

<button onclick="alert('Você clicou!')">Clique aqui</button> 

onclick → é um evento (quando o usuário clica) 

alert() → é uma função do JavaScript que mostra uma mensagem

 

🔍 O que está acontecendo aqui? 

👉 Quando o usuário clica no botão, o navegador executa o código JavaScript. 

⚠️ Evite usar este formato em projetos grandes — ele é útil apenas para demonstrações e testes rápidos.

 

🔹 Forma profissional (recomendada)

 

<button id="btn">Clique aqui</button>

<script>

document.getElementById("btn").addEventListener("click", () => {

    alert("Você clicou!");

});

</script>

 

✅ Por que essa forma é melhor?

 

■       Mantém o HTML separado do JavaScript

■       Deixa o código mais organizado

■       Facilita manutenção e crescimento do projeto

Um botão com id= é um elemento HTML que recebe um identificador único, permitindo que o JavaScript o encontre e interaja com ele.

O id funciona como um identificador único, permitindo que o JavaScript encontre e interaja com o elemento na página.

Sem o id, o JavaScript não saberia qual elemento deve manipular.

 

veja abaixo com fica no 🔎 VScode 👇

 

🔎 Veja como fica o resultado no Live Server

 

 

 

🧩 O papel do console.log()

Quase todos os desenvolvedores usam o console do navegador para testar e verificar seus códigos.

console.log("Teste de saída no console!");

 

Para ver o resultado:

1.    Abra o site;

2.    Pressione F12 ou Ctrl + Shift + I;

3.    Vá até a aba “Console”.

O console.log() não aparece na tela do usuário, apenas no painel de desenvolvedor — perfeito para depuração.

🔍 Ordem de execução e fluxo do JS

Por padrão, o JavaScript roda de cima para baixo, linha por linha.

console.log("1 - Início do script");

console.log("2 - Executando instrução");

console.log("3 - Fim!"); 

💡 O navegador lê e executa exatamente nessa sequência.  

Se uma linha tiver erro, o código para ali e mostra a mensagem no console.

🔸 Por isso, a ordem das tags <script> dentro do HTML importa muito.

 Em projetos reais, recomenda-se sempre colocar os scripts antes do fechamento do </body>, para que o HTML inteiro já esteja carregado quando o JS for executado.

⚡ JS é uma linguagem orientada a eventos

Na web, muitas coisas acontecem em resposta às ações do usuário, como:

●     Clicar em um botão;

●     Passar o mouse sobre algo;

●     Digitar em um campo de texto;

●     Enviar um formulário;

●     Rolar uma página.

Essas ações são chamadas de eventos.

💡 Exemplo simples:

<button onclick="alert('Botão clicado!')">Clique em mim</button>

 

Neste caso, o evento “click” é o que dispara o comando dentro da função alert().

Mais adiante, você aprenderá a capturar eventos com funções JavaScript para controlar o comportamento da página de forma mais avançada.

🧠 O conceito de “variável” (introdução)

Para que um script possa fazer cálculos ou armazenar informações, ele precisa de um lugar para guardá-las — e esse lugar é chamado de variável.

Imagine as variáveis como caixinhas com rótulos:

●     A caixinha guarda o valor;

●     O rótulo (nome da variável) serve para identificar e reutilizar depois.

💡 Exemplo:

var nome = "Maria";

alert("Olá, " + nome + "!");

 

Nesse código:

●     Criamos uma variável chamada nome;

●     Guardamos dentro dela a palavra "Maria";

●     Exibimos a mensagem “Olá, Maria!” na tela.

Você aprenderá tudo sobre variáveis, tipos de dados e operações.

 

🧩 Diferença entre JavaScript, Java e JSON

  

JavaScript  →  Linguagem de script  →  Web, interatividade, navegador

Java  →  Linguagem compilada e completa  →  Aplicações desktop, mobile (Android)

JSON (JavaScript Object Notation)  →  Formato de dados  →  Guardar e transferir informações

💬 Apesar dos nomes parecidos, são ferramentas diferentes.

Exemplo prático:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>JavaScript Inline</title>

</head>

<body>

  <button onclick="alert('Botão clicado!')">Clique aqui</button>

</body>

</html> 

Ao clicar no botão, o comando dentro de onclick é executado.

💬 Outros exemplos de eventos inline:

onclick  → Ao clicar  → <button onclick="acao()">Clique</button>

onmouseover  → Ao passar o mouse  →

<div onmouseover="alert('Mouse sobre mim!')">Passe o mouse</div>

onchange  → Ao mudar um valor (inputs)  → <input onchange="alert('Valor alterado!')">

 

✨ Atenção:

 Use-os apenas em exemplos simples. Em aplicações reais, é melhor usar event listeners (que você aprenderá em aulas de eventos).

 

🧩 Comparando as três formas

 

Método	Prático	Organização	Desempenho	Recomendado?
Interno	Simples	Médio	Bom	Para testes e aprendizados
Externo	Modular	Excelente	Excelente	✅ Melhor prática em projetos reais
Inline	Rápido	Baixo	Bom	❌ Evitar em projetos complexos

Escolha sempre o método mais limpo e sustentável.

 

🧠 Ordem de execução e boas práticas

O JavaScript é executado na ordem em que aparece no documento, o que significa que se seu script depende de um elemento HTML, ele deve ser carregado após o elemento.

Exemplo errado:

<script>

  document.getElementById("mensagem").innerText = "Olá!";

</script> 

<p id="mensagem"></p>

 

🚫 Erro: o script tenta alterar algo que ainda não existe no DOM.

Exemplo correto:

<p id="mensagem"></p> 

<script>

  document.getElementById("mensagem").innerText = "Olá!";

</script>

 

✅ Funciona porque o elemento já foi carregado.

💬 Alternativamente, use o evento:

document.addEventListener("DOMContentLoaded", function() {

  document.getElementById("mensagem").innerText = "Página carregada!";

}); 

Isso garante que o código só rode depois que a estrutura HTML estiver pronta.

📘 Para um melhor Aprendizado      🎯 Pratique com exercícios, desafios e projetos

 

 

👩‍💻 Exercício Prático 1

Crie um arquivo chamado formas_js.html seguindo estas etapas:

1.    Crie uma página com um título e um botão.

2.    Faça com que ao clicar no botão apareça um alerta.

3.    Teste usando as 3 formas de inserção:

○     Interna (<script>);

○     Externa (arquivo.js);

○     Inline (onclick).

💡 Exemplo da versão externa:

index.html

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Teste com JS Externo</title>

</head>

<body>

  <h1>Página com script externo</h1>

  <button id="btn">Clique aqui</button>

 

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

</body>

</html>

 

script.js

document.getElementById("btn").onclick = function() {

  alert("Botão acionado com JavaScript externo!");

}; 

Abra o arquivo no navegador e teste.

 

🧩 Depuração simples no navegador

Erros em JavaScript não quebram a página inteira, mas impedem o script de rodar.
 Use sempre o console do desenvolvedor (F12) para ver mensagens de erro.

💻 Comando útil:

console.log("Código executado com sucesso!"); 

Você verá o resultado dessa linha na aba “Console”.

 

🧠 Hoje você aprendeu:

✔ Como inserir JavaScript de forma correta no HTML;

 ✔ As três principais formas: Interno, Externo e Inline;

 ✔ O impacto da ordem e posição da tag <script>;

 ✔ O uso de defer e async;

 ✔ Boas práticas para organização e manutenção de código.

 

💡 Desafio Final

Crie uma página com:

1.    Um campo de texto e um botão;

2.    Quando o usuário clicar no botão, deve aparecer um alerta exibindo o texto digitado.

🔹 Faça isso em duas versões:

●     Uma com JS interno;

●     Outra com o script em arquivo externo (.js).

💬 Dica:

var nome = document.getElementById("campo").value;

alert("Olá, " + nome + "!");

 

🔬 Exercícios práticos 2

Crie um arquivo chamado primeiro_script.html com o seguinte conteúdo:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Meu Primeiro Script</title>

</head>

<body>

  <h1>Bem-vindo ao JavaScript!</h1> 

  <script>

            // Mostra uma mensagem na tela

            alert("Olá! Bem-vindo ao curso de JavaScript!");

           

            // Exibe uma mensagem no console

    console.log("Script iniciado com sucesso!");

           

            // Define uma variável e mostra o valor armazenado

            var aluno = "João";

    console.log("Nome do aluno é: " + aluno);

  </script>

</body>

</html>

 

💥 Agora salve o arquivo, abra no navegador e observe o resultado:

●     A primeira mensagem aparece em um alert;

●     A segunda e terceira aparecem apenas no console.

 

🧩 Desafio

Tente criar um script que:

1.    Peça o nome do usuário (prompt());

2.    Mostre um alerta de boas-vindas com o nome digitado;

3.    Exiba no console uma saudação personalizada.

💡 Dica:

var nome = prompt("Qual é o seu nome?");

alert("Olá, " + nome + "! Seja bem-vindo!");

console.log("Usuário conectado: " + nome);

 

🧠 Conclusão

Agora você sabe como preparar o ambiente correto para escrever e executar qualquer código JavaScript.
 Com esta base sólida, você poderá criar scripts organizados, performáticos e facilmente reutilizáveis.

A partir da próxima aula, mergulharemos de cabeça na estrutura da linguagem — aprendendo a criar variáveis, tipos de dados e armazenar informações.

📚 Continue aprendendo JavaScript:

🚀 Etapa 01 👉 O que é JavaScript e como funciona no navegador

🚀 Etapa 02 👉 Você está nessa Etapa

🚀 Etapa 03 👉 Variáveis, Tipos de Dados e Comentários

🚀 Etapa 04 👉 Operadores Aritméticos, Relacionais e Lógicos

🚀 Etapa 05 👉 Estruturas Condicionais

🚀 Etapa 06 👉 Laços de Repetição

🚀 Etapa 07 👉 Funções

🚀 Etapa 08 👉 Eventos

🚀 Etapa 09 👉 O DOM

🚀 Etapa 10 👉 Manipulação de Estilos e Classes

🚀 Etapa 11 👉 O DOM: Acessando e Manipulando Elementos HTML 

🚀 Etapa 12 👉 Arrays, Objetos e Estruturas de Dados

🚀 Etapa 13 👉 O que é o LocalStorage e o SessionStorage

🚀 Etapa 14 👉 Mini Projeto: Gerenciador de Tarefas Inteligente

 

Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.

Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 

sem enrolação. 

Você pode apoiar o projeto se quiser 

com um café. 

☕ Pix: [email protected]