Levar o aluno a compreender de forma teórica e prática todos os aspectos da linguagem de códigos, desde a criação de páginas simples até o desenvolvimento de estruturas completas e frameworks modernos.
💻 Aula 1: 👉 O que é JavaScript e como funciona no navegador.
💻 Aula 2: 👉 Como inserir JavaScript no HTML (Interno, Externo e Inline).
💻 Aula 3: 👉 Variáveis, Tipos de Dados e Comentários em JS.
Logo abaixo do Módulo 5
💻 Aula 4: 👉 Operadores Aritméticos, Relacionais e Lógicos.
💻 Aula 5: 👉 Estruturas Condicionais: if, else e switch.
💻 Aula 6: 👉 Laços de Repetição: for, while e do...while.
💻 Aula 7: 👉 Funções: Declaração, Parâmetros e Retorno de Valores.
💻 Aula 8: 👉 Eventos: onclick, onchange, onmouseover e mais.
💻 Aula 9: 👉 O DOM: Acessando e Manipulando Elementos HTML com JS.
💻 Aula 10: 👉 Manipulação de Estilos e Classes via JavaScript.
💻 Aula 11: 👉 Trabalhando com Inputs, Formulários e Validação.
💻 Aula 12: 👉 Arrays, Objetos e Estruturas Complexas de Dados.
💻 Aula 13: 👉 Introdução a JSON e Armazenamento Local (localStorage).
💻 Aula 14: 👉 Mini Projeto: Calculadora Interativa com JavaScript.
💻 Aula 15: 👉 Mini Projeto 2: To-Do List (Lista de Tarefas) com DOM e Eventos.
● Entender o verdadeiro papel do JavaScript na web moderna;
● Compreender como o navegador “lê” e executa o código JS;
● Aprender sobre o processo de execução (interpretação);
● Criar os primeiros scripts interativos;
● Conhecer as principais ferramentas de prática e depuração.
O JavaScript (JS) é uma linguagem de programação criada especialmente para a web, usada para criar comportamento, lógica e interatividade dentro de páginas HTML.
Ele permite transformar um site estático (apenas HTML + CSS) em algo dinâmico, com reações a cliques, animações, validações e até interação com servidores e bancos de dados.
● O HTML é o corpo (estrutura);
● O CSS é a roupa (aparência);
● O JavaScript é o cérebro (ação e reação).
Sem o JavaScript, nada na web “acontece”. Não haveria botões que funcionam, menus animados, formulários verificadores ou conteúdo dinâmico.
O JavaScript foi criado em 1995 por Brendan Eich, um engenheiro da Netscape Communications.
Naquela época, a web ainda era muito simples — apenas textos e links.
Brendan Eich tinha apenas 10 dias para criar uma linguagem que tornasse os sites interativos, sem depender de servidores. Assim nasceu o JavaScript (inicialmente chamado de Mocha, depois LiveScript).
Apesar do nome, JavaScript não tem relação direta com Java.
O nome foi estratégia de marketing, pois “Java” estava em alta na época.
Hoje, o JavaScript está em todas as partes da web e evoluiu além dos navegadores — sendo usado no back-end (Node.js), mobile (React Native), games, e até inteligência artificial.
Quando abrimos uma página no navegador, existe um mecanismo interno chamado motor JavaScript (JavaScript Engine). Ele é responsável por ler o código e transformá-lo em ações reais.
Cada navegador tem o seu próprio motor:
Google Chrome / Edge → V8
Mozilla Firefox → SpiderMonkey
Safari → JavaScriptCore (Nitro)
Opera → V8
1. O navegador carrega o HTML e o CSS;
2. Encontra um bloco <script> ou um arquivo externo .js;
3. O motor JS interpreta o código linha por linha;
4. As ações (alertas, mudanças de texto, cálculos etc.) são executadas imediatamente.
O JavaScript é interpretado, o que significa que não precisa de compilação prévia — o próprio navegador executa o código no momento da navegação.
Você pode escrever JavaScript de três formas principais:
<!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.
<script src="codigo.js"></script>
E no arquivo codigo.js:
alert("Arquivo externo conectado com sucesso!");
💡 Vantagem: separa código da estrutura HTML, deixando o projeto organizado.
<button onclick="alert('Você clicou!')">Clique aqui</button>
Evite usar este formato em projetos grandes — ele é útil apenas para demonstrações e testes rápidos.
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.
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.
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.
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 + "!");
● 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 na Aula 3.
Tecnologia Tipo Usos
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.
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.
Hoje você aprendeu:
✔ O que é o JavaScript e onde ele é usado;
✔ Como o navegador interpreta e executa o código JS;
✔ As formas de inserir JavaScript em uma página HTML;
✔ O uso dos comandos iniciais alert() e console.log();
✔ O conceito de eventos e fluxo de execução;
✔ Como começar a organizar seu código para interatividade real.
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.
var nome = prompt("Qual é o seu nome?");
alert("Olá, " + nome + "! Seja bem-vindo!");
console.log("Usuário conectado: " + nome);
Você acabou de entrar oficialmente no mundo da programação web! 🧠✨
Agora entende o funcionamento da lógica dentro dos navegadores, consegue criar e executar scripts e está pronto para programar interações reais.
A partir da próxima aula, você mergulhará de vez nos conceitos fundamentais da linguagem — aprendendo a inserir, organizar e conectar código JavaScript de maneira eficiente e segura.
● Aprender todas as formas de adicionar código JavaScript em uma página web;
● Entender a ordem de carregamento e execução do JS;
● Saber quando usar cada tipo de inserção (interno, externo e inline);
● Evitar erros comuns de execução;
● Aplicar na prática scripts interativos e organizados.
O JavaScript se integra ao HTML por meio da tag <script>.
Essa tag pode ser inserida em qualquer parte da página, mas o local ideal depende do tipo de ação que você quer realizar.
<script>
// seu código JS aqui
</script>
Ou com um arquivo externo:
<script src="arquivo.js"></script>
O navegador lê a tag <script> e executa seu conteúdo imediatamente, seguindo a ordem de leitura do documento HTML (de cima para baixo).
Portanto, a posição dessa tag influencia diretamente o comportamento do seu site.
Existem três formas principais de incluir JavaScript em páginas HTML:
Tipo Onde o código fica Ideal para
Interno → Dentro de uma tag <script> no próprio arquivo HTML → Testes, experimentos rápidos ou scripts pequenos
Externo → Em um arquivo .js separado → Projetos reais e códigos grandes
Inline → Dentro de um atributo HTML → Ações simples (ex.: um clique, um alerta)
Vamos ver cada uma em detalhe, com exemplos e boas práticas.
É a forma mais comum nos primeiros passos.
O script é escrito dentro do próprio arquivo HTML, entre as tags <script> e </script>.
<!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>
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.
Há duas principais posições possíveis:
<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).
<body>
<h1>Página carregada com sucesso!</h1>
<script>
alert("Agora o script roda após o conteúdo!");
</script>
</body>
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.
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.
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!");
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.
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>
● Use defer para scripts normais (ele garante execução na ordem).
● Use async apenas para scripts independentes, como rastreadores ou anúncios.
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.
<!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:
Evento Descrição Exemplo
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!')">
Use-os apenas em exemplos simples. Em aplicações reais, é melhor usar event listeners (que você aprenderá em aulas de eventos).
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.
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.
<script>
document.getElementById("mensagem").innerText = "Olá!";
</script>
<p id="mensagem"></p>
🚫 Erro: o script tenta alterar algo que ainda não existe no DOM.
<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.
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).
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.
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.
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.
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).
var nome = document.getElementById("campo").value;
alert("Olá, " + nome + "!");
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.
● Entender o conceito de variável;
● Saber como declarar, nomear e utilizar variáveis corretamente;
● Aprender os principais tipos de dados do JavaScript;
● Compreender a diferença entre var, let e const;
● Usar comentários para documentar o código;
● Praticar com exemplos e exercícios simples.