JavaScript
📘 Bem-vindo ao Curso
JavaScript do Zero ao Avançado
Você está começando uma nova etapa da sua jornada no desenvolvimento Web: aprender JavaScript, uma das principais linguagens utilizadas para adicionar comportamento, interatividade e lógica às páginas da Web.
Se você acompanhou os cursos de HTML e CSS, já aprendeu como estruturar e estilizar uma página. Agora chegou o momento de aprender como fazer essa página reagir às ações do usuário, processar informações e executar comandos.
Com JavaScript, podemos criar botões que executam ações, validar formulários, alterar conteúdos, modificar estilos, criar cálculos, trabalhar com dados e desenvolver páginas muito mais interativas.
Talvez este seja o seu primeiro contato com programação. Talvez você já tenha escrito alguns códigos em JavaScript, mas ainda tenha dúvidas sobre como a linguagem realmente funciona.
Não importa se você está começando agora ou se já possui algum conhecimento: este curso foi pensado para conduzir você passo a passo, dos primeiros conceitos até a criação de projetos interativos utilizando JavaScript.
🌐 Por onde vamos começar?
Antes de criar aplicações interativas, precisamos entender os fundamentos do JavaScript.
Você vai descobrir o que é JavaScript, como ele funciona no navegador e como podemos utilizá-lo junto com HTML e CSS.
Depois, vamos aprender diferentes formas de inserir JavaScript em uma página HTML e conhecer conceitos fundamentais da linguagem, como variáveis, tipos de dados, comentários e operadores.
À medida que avançarmos, vamos aprender como tomar decisões utilizando estruturas condicionais, repetir tarefas utilizando laços de repetição e organizar nosso código através de funções.
Também vamos conhecer os eventos do navegador e aprender como responder às ações realizadas pelo usuário, como cliques, alterações em campos e movimentos do mouse.
Depois, entraremos em um dos conceitos mais importantes para quem deseja criar páginas interativas: o DOM.
Com o DOM, aprenderemos a acessar e modificar elementos HTML utilizando JavaScript, alterar conteúdos, estilos e classes e trabalhar com formulários e validações.
Na parte final do curso, vamos conhecer estruturas de dados como arrays e objetos, aprender os conceitos básicos de JSON e utilizar o localStorage para armazenar informações no navegador.
Por fim, vamos reunir os conhecimentos aprendidos na construção de projetos práticos, incluindo uma calculadora interativa desenvolvida com JavaScript.
📚 Como o curso está organizado?
Para tornar o aprendizado mais organizado, o curso foi dividido em 7 módulos. Cada módulo possui duas aulas, formando uma sequência gradual de aprendizado.
🧩 Módulo 1 — Introdução ao JavaScript
Vamos começar do princípio, entendendo o que é JavaScript, para que ele serve e como ele funciona dentro do navegador.
Aula 1 — O que é JavaScript e como funciona no navegador
Vamos conhecer o JavaScript, entender sua importância no desenvolvimento Web e descobrir como ele trabalha junto com HTML e CSS.
Aula 2 — Como inserir JavaScript no HTML
Vamos aprender as três principais formas de inserir JavaScript em uma página HTML: Interno, Externo e Inline.
🧩 Módulo 2 — Fundamentos da Linguagem
Agora que já sabemos como utilizar JavaScript em uma página, vamos começar a aprender os fundamentos da linguagem.
Aula 3 — Variáveis, Tipos de Dados e Comentários
Vamos aprender a armazenar informações em variáveis, conhecer os principais tipos de dados do JavaScript e utilizar comentários para organizar nosso código.
Aula 4 — Operadores Aritméticos, Relacionais e Lógicos
Vamos aprender a realizar cálculos, comparações e operações lógicas utilizando os principais operadores do JavaScript.
🧩 Módulo 3 — Controle de Fluxo
Nesta etapa, vamos aprender como fazer nossos programas tomar decisões e repetir determinadas tarefas.
Aula 5 — Estruturas Condicionais
Vamos estudar if, else e switch e aprender como executar diferentes comandos dependendo de uma determinada condição.
Aula 6 — Laços de Repetição
Vamos conhecer for, while e do...while e aprender como repetir comandos de maneira controlada.
🧩 Módulo 4 — Funções e Eventos
Agora vamos começar a criar códigos mais organizados e fazer nossas páginas responderem às ações do usuário.
Aula 7 — Funções
Vamos aprender a criar funções, utilizar parâmetros e trabalhar com retorno de valores.
Aula 8 — Eventos
Vamos aprender como detectar ações realizadas pelo usuário, como cliques, alterações em campos e movimentos do mouse, utilizando eventos como onclick, onchange e onmouseover.
🧩 Módulo 5 — DOM e Interatividade
Chegamos a uma das partes mais importantes do curso: aprender a controlar os elementos da página utilizando JavaScript.
Aula 9 — O DOM
Vamos entender o que é o DOM e aprender a selecionar, acessar e manipular elementos HTML utilizando JavaScript.
Aula 10 — Manipulação de Estilos e Classes
Vamos aprender a alterar estilos, classes e propriedades dos elementos HTML utilizando JavaScript.
🧩 Módulo 6 — Dados, Formulários e Armazenamento
Agora vamos aprender a trabalhar com informações fornecidas pelo usuário e diferentes estruturas de dados.
Aula 11 — Inputs, Formulários e Validação
Vamos aprender a capturar informações dos campos, trabalhar com formulários e criar validações utilizando JavaScript.
Aula 12 — Arrays, Objetos e Estruturas de Dados
Vamos conhecer arrays e objetos e aprender diferentes formas de organizar, acessar e manipular informações.
🧩 Módulo 7 — JSON, localStorage e Projeto
No último módulo, vamos reunir vários conhecimentos aprendidos durante o curso e aplicá-los em um projeto prático.
Aula 13 — JSON e localStorage
Vamos conhecer o formato JSON e aprender como utilizar o localStorage para armazenar informações no navegador.
Aula 14 — Mini Projeto: Calculadora Interativa
Chegou o momento de colocar nossos conhecimentos em prática.
Vamos construir uma calculadora interativa utilizando HTML, CSS e JavaScript, trabalhando com eventos, funções, operadores, valores e manipulação do DOM.
🎯 Aprender fazendo
A proposta deste curso não é simplesmente apresentar uma lista de comandos JavaScript para você decorar.
Queremos que você entenda o que está fazendo.
Por isso, durante o curso, não fique apenas lendo os exemplos. Abra o editor, escreva os códigos, faça alterações e observe o que acontece.
Programação é uma habilidade que se desenvolve principalmente através da prática.
Para facilitar esse processo, você pode utilizar o Code Editor da Mr Digitals, um editor online que permite trabalhar com HTML, CSS e JavaScript e visualizar o resultado diretamente no navegador.
👉 Acesse o Code Editor e comece a praticar
Você pode abrir o editor enquanto acompanha as aulas e reproduzir os exemplos apresentados durante o curso. Por exemplo:
<!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>
Mude as mensagens, crie novas variáveis, faça cálculos, experimente condições e observe como o programa se comporta.
Observe como uma pequena alteração no código modifica o resultado apresentado pelo programa.
É dessa forma que você começa a desenvolver não apenas o conhecimento da linguagem, mas também o raciocínio lógico necessário para programar.
💡 Dica:
Sempre que possível, faça os exemplos diretamente no editor.
Não tenha medo de modificar os códigos apresentados durante as aulas.
Troque valores, altere mensagens, crie novas variáveis, experimente outros comandos e tente descobrir o que acontece.
Testar, errar, corrigir e experimentar faz parte do aprendizado.
Um código que não funciona como você esperava não significa que você não consegue programar.
Erros fazem parte do processo.
Quando algo não funcionar, observe o código, leia a mensagem apresentada pelo navegador, procure entender o que aconteceu e tente novamente.
Quanto mais você praticar, mais familiarizado ficará com a linguagem.
🚀 Uma nova etapa da sua jornada
Ao terminar este curso, você terá uma base sólida de JavaScript e estará preparado para criar páginas que respondem às ações dos usuários, manipular elementos HTML, trabalhar com formulários, processar informações e armazenar dados no navegador.
Mais do que decorar comandos como let, if, for, function ou querySelector, o objetivo é que você consiga compreender a lógica por trás do código e utilizá-la para criar suas próprias soluções.
E este também não é o fim.
O conhecimento adquirido aqui servirá como base para seus próximos passos no desenvolvimento Web, incluindo APIs, aplicações mais complexas, bibliotecas, frameworks e outras tecnologias utilizadas no desenvolvimento moderno.
Prepare seu editor de código, abra o navegador e venha aprender na prática.
E vamos começar a programar com JavaScript! 💻🚀
📚Módulo 1
Introdução ao JavaScript
🧩 O que é 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.
Mas com o tempo, o JavaScript evoluiu. Hoje ele é usado para:
● Front-end: fazer a parte visual e interativa do site (aquilo que o usuário vê).
● Back-end: cuidar da parte interna do sistema (com Node.js, o JavaScript roda no servidor).
● Aplicativos e jogos: sim, dá para criar desde apps de celular até games com JavaScript!
Essa versatilidade fez do JS uma das linguagens mais importantes do mercado de tecnologia.
E o melhor: você pode começar a programar com ele usando apenas o navegador que já tem no seu computador ou celular.
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.
⚙️ História e Evolução do JavaScript
O JavaScript foi criado em 1995 por Brendan Eich, um engenheiro da Netscape Communications.
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).
🧩 Por que aprender JavaScript?
Aqui vão alguns motivos:
1. Acessibilidade: você não precisa instalar nada complicado.
2. Popularidade: há uma enorme comunidade online pronta para ajudar.
3. Empregabilidade: desenvolvedores JS estão entre os mais procurados no mundo.
4. Aprendizado contínuo: com uma base sólida, você pode avançar para frameworks como React, Node.js e Vue.js.
5. Liberdade: você pode criar seus próprios projetos, sites, aplicativos e até vender serviços.
Para quem vem de comunidades carentes ou nunca teve muito contato com tecnologia, o JS é uma excelente porta de entrada. Com ele, você pode começar hoje e mudar seu amanhã.
💡 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.
🧩 O Que Você Precisa para Começar
O mais incrível do JavaScript é que você pode aprender mesmo com recursos simples.
Vamos ver o que você precisa:
● Um navegador (Chrome, Firefox, Edge , Brave ou outro).
● Um editor de texto simples, como o bloco de notas, mas recomendaremos mais adiante
Sublime Text,
Notepad++,
● Conexão com a internet (para consultar exemplos e documentações).
● Curiosidade e paciência, os ingredientes mais importantes.
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 e 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 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:
<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.
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.
💡 Dica: mesmo que você não tenha um computador pessoal, muitos navegadores de celular permitem abrir o console de JavaScript uma ferramenta onde você pode testar seus códigos.
⚙️ O Primeiro Contato com o Código:
Agora, vamos fazer seu primeiro experimento com programação!
1. Abra o navegador (exemplo: Google Chrome).
2. Aperte F12 (ou toque nos três pontinhos → Mais Ferramentas → Ferramentas do Desenvolvedor).
3. Clique na aba chamada Console.
4. Digite o seguinte código:
console.log("Olá, mundo!");
Depois de pressionar Enter, você verá a mensagem:
Olá, mundo!
Parabéns 🎉
Essa simples linha faz o computador mostrar um texto na tela do console. O comando console.log é como uma forma de falar com o programador é onde você verá mensagens, resultados e testes dos seus códigos.
Entendendo a Lógica por Trás das Linhas
Cada linguagem de programação tem sua “gramática”, chamada de sintaxe.
Assim como no português usamos acentos e pontuação, em JavaScript usamos parênteses, chaves e ponto e vírgula para organizar as ideias.
Por exemplo:
let nome = "Ana";
console.log("Bem-vinda, " + nome);
Esse código dará o resultado:
Bem-vinda, Ana
Ou seja, o JavaScript pegou o valor que você colocou em uma variável (no caso, nome) e exibiu junto à mensagem.
Aprender JavaScript é como aprender um novo ofício. Assim como um carpinteiro precisa montar sua bancada e separar as ferramentas certas antes de começar um projeto, um programador também precisa de seu ambiente de trabalho devidamente organizado.
Um ambiente de desenvolvimento é um conjunto de ferramentas e programas que auxiliam você a escrever, testar e executar seu código.
Pense nele como sua “oficina digital”: é o espaço onde você cria, comete erros, corrige, testa e melhora seu trabalho antes de mostrá-lo ao mundo.
Um bom ambiente de desenvolvimento precisa permitir que você:
● Escreva código com clareza.
● Veja resultados rapidamente.
● Corrija erros de forma prática.
● Organize seus arquivos.
Os Atalhos Teclado no seu VS Code
Um dos segredos para programar de forma rápida e eficiente é aprender atalhos de teclado.
Aqui estão alguns dos mais úteis:
Atalho(Windows/Linux) → Abrir arquivo → Ctrl + O
Atalho (macOS) → Cmd + O
Atalho(Windows/Linux) → Salvar arquivo → Ctrl + S
Atalho (macOS) → Cmd + S
Atalho(Windows/Linux) → Abrir terminal → Ctrl + '
Atalho (macOS) → Cmd + '
Atalho(Windows/Linux) → Nova aba → Ctrl + N
Atalho (macOS) → Cmd + N
Atalho(Windows/Linux) → Fechar aba atual → Ctrl + W
Atalho (macOS) → Cmd + W
Atalho(Windows/Linux) → Dividir editor → Ctrl + \
Atalho (macOS) → Cmd + \
Atalho(Windows/Linux) → Aumentar fonte → Ctrl + +
Atalho (macOS) → Cmd + +
Atalho(Windows/Linux) → Reduzir fonte → Ctrl + -
Atalho (macOS) → Cmd + -
Atalho(Windows/Linux) → Localizar texto → Ctrl + F
Atalho (macOS) → Cmd + F
Atalho(Windows/Linux) → Substituir texto → Ctrl + H
Atalho (macOS) → Cmd + H
Atalho(Windows/Linux) → Exibir paleta de comandos → Ctrl + Shift + P
Atalho (macOS) → Cmd + Shift + P
Se você digitar Ctrl + K + S, abrirá a visualização completa dos atalhos configurados no seu VS Code — e pode personalizá-los como quiser.
1. Abra o seu navegador (exemplo: Google Chrome).
2. Pressione F12 no teclado (ou use o menu → Mais ferramentas → Ferramentas do desenvolvedor).
3. Clique na aba “Console”.
Aqui você pode digitar qualquer comando JavaScript e ver imediatamente o resultado.
Por exemplo:
let nome = "Carlos";
console.log("Seja bem-vindo, " + nome);
O console exibirá:
Seja bem-vindo, Carlos
Essa é uma das formas mais simples de começar sem precisar instalar nada, mas, embora o console seja útil, ele é limitado: não salva seus projetos, nem organiza seu código. Para isso, entra em cena o editor de texto.
Instalando o Visual Studio Code (VS Code)
O Visual Studio Code, ou simplesmente VS Code, é um dos editores de código mais usados no mundo.
Ele é gratuito, leve e compatível com Windows, Linux e macOS.
🔹 Como instalar:
1. Acesse o site oficial: https://code.visualstudio.com/
2. Clique em “Download” e escolha a versão do seu sistema operacional.
3. Após o download, siga os passos de instalação padrão (basta clicar em “Avançar” até o final).
4. Quando abrir o programa, você verá uma tela inicial com um espaço vazio para criar ou abrir projetos.
Pronto! Agora você tem sua principal ferramenta de trabalho.
Criando Seu Primeiro Projeto
Para começar, vamos criar sua primeira pasta de projeto.
Essa pasta será o lugar onde seus arquivos JavaScript e HTML ficarão guardados.
1. No seu computador, crie uma nova pasta e nomeie como:
2. Abra o Visual Studio Code.
3. Vá em Arquivo → Abrir Pasta e selecione a pasta que você criou.
4. Dentro do VS Code, clique no ícone de um papel com um sinal de “+” para criar um novo arquivo. Dê o nome de:
index.html
💡 Dica do VScode:
Digite: ! e pressione Enter o VScode criará essa estrutura automaticamente.
Ou digite html e dê enter na opção html:5
Você também vai precisar instalar a extensão do Open with Live Server o (Live Server) no VScode. Exemplo: Na imagem 👇 abaixo exemplifica como acessar a extensões do VScode.
Criando um Arquivo HTML para Testes
O HTML é a estrutura de uma página de internet é ele que “segura” o JavaScript e mostra seus resultados. Vamos criar um arquivo básico de teste.
No seu arquivo index.html, digite o seguinte:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Código JavaScript</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<script src="script.js"></script>
</body>
</html>
🔎 Veja como fica no VScode o exemplo acima:
Agora, clique de novo no ícone “+” do VS Code e crie um novo arquivo chamado script.js será onde você colocará seus códigos JavaScript.
Digite o seguinte dentro dele:
console.log("Meu primeiro script JS conectado com HTML!");
alert("Seja bem-vindo ao seu primeiro projeto JavaScript!");
Você acabou de integrar o HTML com o JavaScript, cada um com seus arquivos e esse é o mesmo princípio usado em sites reais.
Explorando o Visual Studio Code
Agora que você já tem o editor instalado e um projeto funcionando, vamos conhecer melhor o VS Code.
Painéis principais:
● Explorador (lateral esquerda): mostra todos os arquivos e pastas do projeto.
● Editor (centro): onde você escreve o código.
● Terminal (embaixo): onde aparecem mensagens, logs e resultados.
● Extensões (ícone de quadradinhos): permitem adicionar ferramentas extras, como tradução automática, formatação de código e sugestões inteligentes.
Extensões recomendadas para iniciantes:
1. Portuguese (Brazil) Language Pack – traduz o VS Code para português.
2. Prettier – formata seu código automaticamente, deixando tudo bonito e organizado.
3. Live Server – exibe o site em tempo real conforme você altera o código.
Testando com o Live Server
O Live Server é uma das extensões favoritas dos estudantes de programação.
Ele cria um servidor local que atualiza automaticamente sua página sempre que você salva o arquivo.
Passo a passo:
1. No VS Code, clique no ícone de extensões (quadradinhos à esquerda).
2. Pesquise por Live Server.
3. Clique em Instalar.
4. Após instalado, abra o arquivo index.html.
5. Clique com o botão direito e selecione “Open with Live Server”.
O navegador será aberto e mostrará o seu site local, normalmente no endereço:
http://127.0.0.1:5500/index.html
Agora, toda vez que você fizer uma mudança e salvar o arquivo, a página atualizará automaticamente.
💡 Isso economiza tempo e ajuda você a visualizar resultados instantaneamente — uma das melhores formas de aprendizado.
Corrigindo Erros e Usando o Console
Todo programador erra. Aliás, errar é parte essencial do aprendizado.
Por isso, o console do navegador e o terminal do VS Code são seus melhores amigos. Sempre que algo der errado, eles vão mostrar mensagens de erro explicando o que aconteceu.
Por exemplo:
console.log("Olá mundo")
console.log("Agora vai sem ponto e vírgula")
O código acima ainda funcionará, mas é boa prática usar ponto e vírgula.
Já este aqui dará erro:
console.log("Olá"
O console exibirá algo como:
Uncaught SyntaxError: missing ) after argument list
Isso significa que você esqueceu de fechar o parêntese.
Esses pequenos detalhes fazem parte do processo — e com o tempo, você começará a identificar erros só de olhar.
E Se Eu Só Tiver um Celular?
Nem todo mundo tem acesso fácil a um computador.
Mas a boa notícia é que dá, sim, para estudar JavaScript usando apenas o celular.
Você pode usar:
● Aplicativos de código como o Dcoder ou Acode (disponíveis no Android).
● Sites online para testar códigos, como https://playcode.io ou https://jsfiddle.net.
● Ou até o modo desenvolvedor de navegadores móveis (na maioria dos celulares Android modernos).
O importante é não deixar de praticar, independentemente do dispositivo que você utiliza.
Organização: o Hábito do Bom Programador
Um dos maiores erros dos iniciantes é perder o controle sobre seus arquivos.
Da mesma forma que você organiza suas pastas de fotos ou documentos, é importante manter uma estrutura organizada de projetos.
Sugestão de estrutura:
meus_projetos/
├── projeto_1/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── projeto_2/
│ ├── index.html
│ ├── script.js
│ └── style.css
Com o tempo, você perceberá que a organização acelera seu aprendizado e facilita o entendimento de projetos maiores.
Conclusão: O Espaço Onde Tudo Acontece
Agora você tem o essencial para começar a programar de verdade.
Seu ambiente está pronto, suas ferramentas estão instaladas e você sabe como testar e executar seu código.
📚 Continue aprendendo JavaScript:
Eu poderia colocar este curso em plataformas como Kiwify ou Hotmart e cobrar pelo acesso. Mas escolhi fazer diferente.
Mas em vez de tentar provar que o meu trabalho é bom nas redes sociais, prefiro deixar que você tenha liberdade para estudar, praticar e tirar suas próprias conclusões.
Por isso, a proposta da Academy Code Christ é oferecer este conteúdo gratuitamente para quem deseja aprender programação e desenvolver novas habilidades.
Se o conteúdo foi útil para você, se ajudou nos seus estudos e você quiser contribuir sem obrigação, para que o projeto continue crescendo,
você pode apoiar a Academy Code Christ com um café. ☕
Pix: antropologiacrista@gmail.com
Comentários
Postar um comentário