JS

Introdução ao
JavaScript
Do zero ao seu primeiro código

O que é JavaScript
História do JavaScript
Versões do ECMAScript
Como Rodar JavaScript

Material de Estudo • 2025

JS Introdução ao JavaScript Página 2

Sumário

...................................................
01 O que é JavaScript
......................

...................................................
02 História do JavaScript
......................

...................................................
03 Versões do ECMAScript
......................

...................................................
04 Como Rodar JavaScript
......................

...................................................
05 Recapitulando
......................

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 3

1 O que é JavaScript

JavaScript é uma linguagem de programação interpretada, de alto nível, dinâmica e

multiparadigma. Se você abrir qualquer site moderno — redes sociais, lojas virtuais, serviços de
streaming — quase certamente há JavaScript rodando nos bastidores, tornando aquela página viva
e interativa.

■ ANALOGIA: A casa e seus três pilares

Imagine construir uma casa:
HTML → A estrutura (paredes, teto, janelas)
CSS → A decoração (cores, móveis, estilos)
JS → A eletricidade (interruptores, campainha, TV)
Sem JS, o site existe, mas é estático — como uma maquete.

O que o JavaScript faz?

• Manipula o DOM — altera elementos HTML em tempo real

• Responde a eventos do usuário — cliques, teclado, scroll

• Valida formulários antes de enviar ao servidor

• Cria animações e transições dinâmicas

• Faz requisições à internet sem recarregar a página (AJAX/Fetch)

• Roda no servidor com [Link] e em apps mobile com React Native

JavaScript é a mesma coisa que Java?

Não! Apesar do nome parecido, Java e JavaScript são linguagens completamente diferentes. É
como comparar carro com carrinho de mão — ambos têm "carr" no nome, mas servem para
propósitos bem distintos. O nome JavaScript foi uma estratégia de marketing para aproveitar a
popularidade do Java nos anos 1990.

Característica JavaScript Java

Tipagem Dinâmica Estática

Execução Interpretada / JIT Compilada (JVM)

Uso principal Web front/back-end Apps, Android, back-end

Sintaxe Flexível Mais rígida

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 4

Fonte: MDN Web Docs – [Link]/en-US/docs/Web/JavaScript

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 5

2 História do JavaScript

A história do JavaScript é marcada por pressa, rivalidade e uma padronização que mudou a web
para sempre. Conhecer essa trajetória ajuda a entender por que a linguagem tem algumas
peculiaridades até hoje.

Ano Evento

1995 Brendan Eich cria a linguagem em 10 dias na Netscape

1995 Nasce como Mocha → renomeado LiveScript → JavaScript

1996 Microsoft lança JScript para o Internet Explorer

1997 ECMA padroniza como ECMAScript 1 (ES1)

1999 ES3: regex, try/catch, switch melhorado

2005 Ajax populariza apps web dinâmicos (Gmail, Google Maps)

2009 ES5 + [Link]: JS chega ao servidor

2015 ES6/ES2015: a maior atualização da história

2025 ES2025: versão atual com otimizações modernas

Os 10 dias que mudaram a web

Em maio de 1995, Brendan Eich recebeu uma tarefa aparentemente impossível: criar uma
linguagem de programação para o navegador Netscape em apenas 10 dias. O resultado foi uma
linguagem funcional, mas com algumas arestas — algumas ainda visíveis hoje, como a coerção
implícita de tipos.

■ ANALOGIA: A guerra dos navegadores

Imagine duas montadoras lançando carros ao mesmo tempo:
Netscape (JavaScript) vs. Microsoft (JScript)

Cada uma adicionava recursos próprios, e os sites ficavam

incompatíveis — um site funcionava no Netscape mas quebrava
no IE, e vice-versa. A padronização via ECMA foi como criar
um código de trânsito único para todos os carros.

A virada: Ajax e o Web 2.0 (2005)

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 6

Por volta de 2005, o JavaScript ganhou um superpoder: o Ajax (Asynchronous JavaScript and XML).
Com ele, páginas podiam buscar dados no servidor sem recarregar. Gmail, Google Maps e outros
aplicativos mostraram ao mundo que o navegador podia ser tão poderoso quanto um app desktop.

[Link]: JavaScript no servidor (2009)

Ryan Dahl criou o [Link] em 2009, permitindo que JavaScript rodasse fora do navegador,
diretamente no servidor. Isso transformou JS em uma linguagem full-stack — você pode escrever o
front-end e o back-end do seu sistema com a mesma linguagem.

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 7

3 Versões do ECMAScript

O JavaScript é padronizado pela organização ECMA International sob o nome ECMAScript (ES).
Cada versão traz novos recursos à linguagem. Desde 2015, as versões são lançadas anualmente.

■ ANALOGIA: Versões de sistema operacional

Pense no ECMAScript como o Android ou iOS:
Cada ano sai uma versão nova com melhorias.
Apps antigos ainda funcionam, mas versões novas
trazem recursos que facilitam a vida dos desenvolvedores.

Versão Ano Principais Recursos

ES1 / ES2 1997–98 Base inicial da linguagem padronizada

ES3 1999 Expressões regulares, try/catch, switch/do-while

ES4 — Abandonado por diferenças políticas entre empresas

ES5 2009 Strict mode, JSON nativo, getters e setters

ES6 / ES2015 2015 let/const, arrow functions, classes, promises, modules

ES2016 2016 Operador ** (potência), [Link]()

ES2017 2017 async/await, [Link](), [Link]()

ES2018 2018 Rest/spread para objetos, for-await-of

ES2019 2019 [Link](), [Link]()

ES2020 2020 Optional chaining (?.), Nullish coalescing (??)

ES2021 2021 [Link](), [Link]()

ES2025 2025 Versão atual com otimizações de sintaxe e performance

Linha destacada em amarelo = ES6/ES2015, a maior atualização da história do JavaScript.

Por que ES6 foi tão importante?

O ES6 (2015) foi uma revolução. Até então, JavaScript era frequentemente criticado por sua sintaxe
verbosa e falta de recursos modernos. O ES6 trouxe:

• let e const — variáveis com escopo de bloco (fim do confuso var)

• Arrow functions — sintaxe mais curta para funções

• Classes — programação orientada a objetos mais intuitiva

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 8

• Promises — código assíncrono sem o famoso 'callback hell'

• Template literals — strings com interpolação usando backtick (`)

• Modules — organização do código em arquivos separados

Exemplo: Antes e depois do ES6

● ● ●

// ANTES do ES6 (ES5)

var nome = 'Maria';
var saudacao = function(n) {
return 'Olá, ' + n + '!';
};
[Link](saudacao(nome));

● ● ●

// DEPOIS do ES6 (moderno)

const nome = 'Maria';
const saudacao = (n) => `Olá, ${n}!`;
[Link](saudacao(nome));

// Mesmo resultado, código muito mais limpo!

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 9

4 Como Rodar JavaScript

Uma das grandes vantagens do JavaScript é que você não precisa instalar nada para começar. Se
você tem um navegador, já tem um ambiente JavaScript pronto. Veja as principais formas de
executar seus primeiros códigos.

Método 1: Console do Navegador (mais rápido para testar)

Todo navegador moderno possui um console embutido nas ferramentas de desenvolvedor. É
perfeito para testar pequenos trechos de código instantaneamente.

■ Como acessar o Console

Chrome / Edge / Firefox:
Pressione F12 (ou Ctrl + Shift + I no Windows / Cmd + Option + I no Mac)
Clique na aba 'Console'
Digite seu código e pressione Enter!

Experimente digitar isso no console:

● ● ●

[Link]('Olá, Mundo!');
// Resultado: Olá, Mundo!

// Operações matemáticas
2 + 2
// Resultado: 4

// Variáveis
let nome = 'João';
[Link](`Bem-vindo, ${nome}!`);
// Resultado: Bem-vindo, João!

Método 2: HTML com a tag script

Para criar páginas interativas, você incorpora o JavaScript diretamente em um arquivo HTML usando
a tag <script>. Esta é a forma mais usada no desenvolvimento web front-end.

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 10

● ● ●

<!DOCTYPE html>
<html lang='pt-BR'>
<head>
<title>Meu Primeiro JS</title>
</head>
<body>
<h1>JavaScript na Prática</h1>
<button onclick='saudacao()'>Clique aqui!</button>

&lt;script&gt;
function saudacao() {
alert('Olá! Você clicou no botão!');
}
&lt;/script&gt;
&lt;/body&gt;
</html>

Dica: Sempre coloque a tag <script> antes do </body> para garantir que o HTML carregue antes do JavaScript
ser executado.

Método 3: VS Code + [Link] (desenvolvimento profissional)

Para projetos maiores, o ambiente mais usado por profissionais é o Visual Studio Code (editor
gratuito da Microsoft) combinado com o [Link].

Pass
O que fazer
o

1 Baixe o VS Code em [Link]

2 Baixe o [Link] em [Link]

3 Instale a extensão 'Code Runner' no VS Code

4 Crie um arquivo meu_script.js

5 Execute com Ctrl+Alt+N (Code Runner) ou pelo terminal

Via terminal com [Link]:

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 11

● ● ●

# No terminal, dentro da pasta do arquivo:

node meu_script.js

# Exemplo de meu_script.js:
const mensagem = 'JavaScript rodando no servidor!';
[Link](mensagem);

# Saída: JavaScript rodando no servidor!

Método 4: Ferramentas Online (sem instalar nada)

Para quem quer experimentar sem instalar nada, existem excelentes editores online:

• CodePen ([Link]) — ideal para HTML + CSS + JS juntos

• JSFiddle ([Link]) — clássico para testes rápidos

• Replit ([Link]) — ambiente completo no navegador

• StackBlitz ([Link]) — VS Code direto no browser

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 12

5 Recapitulando

Você chegou ao final desta apostila introdutória. Veja um resumo de tudo que aprendemos:

Tópico O que você aprendeu

O que é JS Linguagem de programação da web, diferente de Java, que dá vida aos sites

História Criada em 10 dias em 1995, padronizada como ECMAScript em 1997

Versões ES3, ES5, ES6 (grande marco), e versões anuais até ES2025

Como rodar Console do browser, tag &lt;script&gt;, [Link] no terminal ou online

Seu primeiro desafio

■ Desafio: Hello, World!

1. Abra o console do seu navegador (F12)
2. Digite: [Link]('Olá, JavaScript!');
3. Pressione Enter
4. Parabéns — você acabou de rodar seu primeiro código JavaScript!

Próximos passos
• Aprenda variáveis (let, const, var) e tipos de dados

• Estude estruturas de controle: if/else, for, while

• Explore funções e como organizar seu código

• Conheça o DOM e como manipular elementos HTML

• Descubra async/await para código assíncrono

Referências e fontes
• MDN Web Docs — [Link]/en-US/docs/Web/JavaScript

• The Modern JavaScript Tutorial — [Link]

• W3Schools JavaScript — [Link]/js

• [Link] — History of JavaScript

• DigitalOcean — How To Use the JavaScript Developer Console

Material de Estudo • JavaScript • 2025

JS Introdução ao JavaScript Página 13

• Exploring JS — [Link]

Material de Estudo • JavaScript • 2025