🎓CURSO DE <JavaScript>

🎯 Objetivo Geral

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.

O CURSO DE <JavaScript>

O curso será dividido em 5 módulos principais, cada um contendo várias aulas detalhadas.

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

📚 Módulo 1 → Introdução ao JavaScript: Interatividade e Lógica para a Web.

💻 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

📚 Módulo 2 → Operadores, Estruturas Condicionais e Laços de Repetição.

💻 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.

Módulo 2 Acesse Aqui!

📚 Módulo 3 → Funções, Eventos e o DOM.

💻 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.

Módulo 3 Acesse Aqui!

📚 Módulo 4 → Manipulação de Estilos e Classes, Inputs, Formulários e Validação e Arrays.

💻 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.

Módulo 4 Acesse Aqui!

📚 Módulo 5 → Introdução a JSON, Mini Projeto e Mini Projeto 2: To-Do List.

💻 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.

Módulo 5 Acesse Aqui!

📚Módulo 1

🚀 Introdução ao JavaScript

💻 Aula 1 👉 O que é JavaScript e como ele funciona no navegador.

🎯 Objetivos da Aula

● 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.

🧩 1. Entendendo o que é o JavaScript

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.

💬 Analogia simples:

● 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.

⚙️ 2. História e Evolução do JavaScript

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).

💡 Curiosidade:

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.

🧠 3. Como o JavaScript é executado

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:

Navegador Motor JavaScript

Google Chrome / Edge → V8

Mozilla Firefox → SpiderMonkey

Safari → JavaScriptCore (Nitro)

Opera → V8

O processo é o seguinte:

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.

💻 4. Estrutura básica de um script

Você pode escrever JavaScript de três formas principais:

1️⃣ Script interno (dentro do HTML)

<!DOCTYPE html>

<head>

<title>Meu primeiro JavaScript</title>

</head>

<body>

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

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.

2️⃣ Script externo (arquivo separado)

E no arquivo codigo.js:

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

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

3️⃣ Script inline (dentro de uma tag HTML)

<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.

🧩 5. 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.

🔍 6. 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.

⚡ 7. 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.

🧠 8. 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 na Aula 3.

🧩 9. Diferença entre JavaScript, Java e JSON

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.

🔬 10. Exercícios práticos da Aula

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

<!DOCTYPE html>

<head>

<title>Meu Primeiro Script</title>

</head>

<body>

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

// 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.

🧠 11. Revisão da Aula

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.

🧩 12. Desafio Final da Aula

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 da Aula 1

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.

💬 Próxima aula:

💻 Aula 2 👉 Como Inserir JavaScript no HTML (Interno, Externo e Inline).

🎯 Objetivos da Aula

● 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.

🧠 1. O papel do <script> no HTML

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.

💡 Estrutura básica:

// seu código JS aqui

</script>

Ou com um arquivo externo:

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.

🧩 2. Formas de Inserção de JavaScript

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.

3. JavaScript Interno

É a forma mais comum nos primeiros passos.
O script é escrito dentro do próprio arquivo HTML, entre as tags <script> e </script>.

Exemplo prático:

<!DOCTYPE html>

<head>

<title>JavaScript Interno</title>

</head>

<body>

<h1>Exemplo de Script Interno</h1>

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

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

</script>

</body>

</html>

🔸 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.

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

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

🔹 No <head> (Cabeçalho)

<head>

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>

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.

💻 5. JavaScript Externo

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:

Arquivo principal (index.html)

<!DOCTYPE html>

<head>

<title>JavaScript Externo</title>

</head>

<body>

<h1>Script Externo Conectado</h1>

</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.

⚙️ 6. 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.

⚡ 7. 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.

Exemplo prático:

<!DOCTYPE html>

<head>

<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!')">

✨ Atenção:

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

🧩 8. 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.

🧠 9. 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:

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

</script>

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

Exemplo correto:

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.

👩‍💻 10. Exercício Prático

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>

<head>

<title>Teste com JS Externo</title>

</head>

<body>

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

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

</body>

</html>

script.js

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

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

};

Abra o arquivo no navegador e teste.

🧩 11. 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”.

🧠 12. Resumo da Aula

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.

💡 13. Desafio Final da Aula

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 + "!");

🧠 Conclusão da aula 2

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.

💬 Próxima aula:

💻 Aula 3 👉 Variáveis, Tipos de Dados e Comentários em JavaScript.

🎯 Objetivos da Aula

● 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.