Modelos

Como usar

Clique em Copiar código (ou em Baixar arquivo).
No editor, crie um arquivo novo, cole o código e salve com a extensão .html, por exemplo aula.html.
Abra o arquivo no navegador (dois cliques nele) e aperte F12 para ver o Console.
Mude o código, salve e atualize a página (F5) para ver o resultado.

Modelo 1 · Console

Use este primeiro. Ele só usa console.log, então você testa tudo pelo Console do navegador (F12).

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Aula</title>
</head>
<body>

  <!-- PARTE 1: Onde o resultado vai aparecer -->
  <h2> Abra as ferramentas para desenvolvedores do navegador</h2>
    <!-- PARTE 2: A lógica JavaScript -->
  <script>
    // Lógica aqui.
    console.log("Olá, turma!");
  </script>

</body>
</html>

Baixar arquivo

Parte 1: Um título simples na página. O aluno não precisa mexer nele.

Parte 2: O bloco <script> é onde você escreve o JavaScript.

console.log: Escreve o valor no Console. Para ver, abra a página, aperte F12 e escolha a aba Console.

Modelo 2 · Mostrar na tela

Para quando estudarmos o DOM. Além do console, este modelo escreve o resultado na própria página.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Aula</title>
</head>
<body>

  <!-- PARTE 1: Onde o resultado vai aparecer -->
  <h2 id="tela">Aguardando...</h2>

  <!-- PARTE 2: A lógica JavaScript -->
  <script>
    // Lógica aqui...
    let mensagem = "Olá, turma!";

    // PARTE 3: O 'empurrão' para a tela, detalhe, o innerText é o que vai aparecer na tela, 
    // Se fosse innerHTML, poderia colocar tags HTML
    document.getElementById("tela").innerText = mensagem;
  </script>

</body>
</html>

Baixar arquivo

Parte 1: O <h2 id="tela"> é o lugar onde o resultado vai aparecer. O id é o nome dele.

Parte 2: A variável mensagem guarda o texto no JavaScript.

Parte 3: document.getElementById("tela").innerText = mensagem; coloca o texto no h2. Com innerHTML daria para usar tags HTML.