JS SENAI-SP · 2026
JavaScript
I N T R OD U Ç Ã O A O
A linguagem que faz a web ganhar vida.
Prof. Gabriel Eduardo // Bem-vindo!
Docente de Tecnologia · SENAI-SP
C O N C E I TO
O que é JavaScript?
Linguagem de programação criada em 1995 por
1995
Ano de criação
Brendan Eich
Roda diretamente no navegador, sem precisar
instalar nada
10 dias
para criar a linguagem
1 das 3 tecnologias fundamentais da web: HTML,
CSS e JavaScript #1
Hoje também roda fora do navegador com [Link] linguagem mais usada
Prof. Gabriel Eduardo · SENAI-SP slide 02 / 20
APLICAÇÕES
Onde o JavaScript é Usado?
</> [ ] >_
Páginas Web Apps Mobile Servidores
Animações e interatividade React Native para iOS e APIs e backends com [Link]
em sites Android
▶ ★ ↺
Jogos Extensões Automação
Games rodando no Plugins para Chrome e Firefox Scripts e tarefas
navegador automatizadas
Prof. Gabriel Eduardo · SENAI-SP slide 03 / 20
P R I M E I R O PA S S O
[Link]
[Link]() [Link]('Olá, Mundo!');
→ Exibe mensagens no console do [Link](2 + 2);
navegador ou terminal [Link]('SENAI-SP');
→ Ferramenta número 1 para testar e
depurar código Saída no console:
> Olá, Mundo!
Dica > 4
Abra o DevTools com F12 → aba Console e > SENAI-SP
teste agora!
Prof. Gabriel Eduardo · SENAI-SP slide 04 / 20
F U N D A M E N TO S
Variáveis:
Guardando
[Link]
Informações
let nome = 'Gabriel';
const escola = 'SENAI-SP';
→ Uma variável é um "recipiente" let idade = 25;
para armazenar dados
→ Em JavaScript moderno usamos [Link](nome); // Gabriel
let e const [Link](escola); // SENAI-SP
[Link](idade); // 25
let const
muda de valor valor fixo
Prof. Gabriel Eduardo · SENAI-SP slide 05 / 20
DECLARAÇÃO
let, const e var — Qual Usar?
var let const
Forma antiga — evite usar. Use quando o valor pode Use quando o valor NÃO
Tem problemas de escopo e mudar ao longo do deve mudar após ser
pode causar bugs difíceis de programa. definido.
encontrar.
[Link]
let pontuacao = 0; const PI = 3.14159;
pontuacao = 10; // OK PI = 3; // ERRO!
Prof. Gabriel Eduardo · SENAI-SP slide 06 / 20
TIPOS
Tipos de Dados em
JavaScript [Link]
let nome = 'Ana'; // String
String
Texto entre aspas: 'Olá' ou let nota = 9.5; // Number
"Mundo" let aprovado = true; // Boolean
let endereco; // Undefined
Number Números: 42, 3.14, -7
Boolean Verdadeiro/falso: true / false typeof
Use typeof variavel para descobrir o tipo de um
Undefined Variável sem valor definido dado
null Valor intencionalmente vazio
Prof. Gabriel Eduardo · SENAI-SP slide 07 / 20
N AV E G A D O R [Link]
alert() e <script>
prompt() alert('Bem-vindo ao SENAI-SP!');
alert() let nome = prompt('Qual seu nome?');
Exibe uma caixa de diálogo com uma alert('Olá, ' + nome + '!');
mensagem para o usuário </script>
prompt()
Exibe uma caixa e captura o texto
digitado pelo usuário Esta página diz:
Bem-vindo ao SENAI-SP!
! Funciona apenas no navegador, não OK
no [Link]
Prof. Gabriel Eduardo · SENAI-SP slide 08 / 20
DEMO Página HTML com JavaScript
[Link] Passos:
<!DOCTYPE html>
1 Crie um arquivo
[Link]
<html>
<head>
2 Cole o código ao lado
<title>Minha Primeira Página JS</title> 3 Abra no navegador e
</head>
teste!
<body>
Resultado:
<h1>JavaScript na Prática</h1>
O navegador pergunta o
<script> nome e exibe a mensagem
let nome = prompt('Digite seu nome:'); de boas-vindas na página!
[Link]('<p>Bem-vindo, ' + nome + '!</p>');
[Link]('Usuário:', nome);
</script>
Prof. Gabriel Eduardo · SENAI-SP slide 09 / 20
CONTROLE DE FLUXO
Condições:
[Link]
let nota = 7;
if / else if (nota >= 6) {
→ Permitem que o código tome [Link]('Aprovado!');
decisões
} else {
→ Se a condição for verdadeira →
bloco if [Link]('Reprovado');
}
→ Caso contrário → bloco else
> Aprovado!
Condição verdadeira if
Condição falsa else O operador >= significa maior ou igual a
Prof. Gabriel Eduardo · SENAI-SP slide 10 / 20
[Link]
M Ú LT I P L A S C O N D I Ç Õ E S
Condições com let nota = 8.5;
else if if (nota >= 9) {
Use else if para testar [Link]('Excelente!');
múltiplas condições em } else if (nota >= 7) {
sequência [Link]('Bom!');
} else if (nota >= 6) {
9 - 10 Excelente [Link]('Aprovado');
7 - 8 Bom } else {
[Link]('Reprovado');
6 Aprovado
}
< 6 Reprovado
> Bom!
Prof. Gabriel Eduardo · SENAI-SP slide 11 / 20
SOLUÇÃO:
EXERCICIO 1
Verificador de [Link]
Maioridade let idade = Number(prompt('Sua idade?'));
1 Pergunte a idade do usuário com if (idade >= 18) {
prompt()
alert('Maior de idade!');
2 Se idade >= 18 → exiba: "Maior } else {
de idade!"
alert('Menor de idade.');
3 Caso contrário → exiba: "Menor de
idade." }
Tempo: 10 min Dica: Use Number() para converter o texto do prompt em
número!
Prof. Gabriel Eduardo · SENAI-SP slide 12 / 20
JavaScript Fora do
[Link] $ terminal
Navegador
# Verificar instalação
$ node --version
v20.11.0
→ Ambiente de execução JavaScript criado em
2009 # Executar um arquivo
$ node [Link]
→ Roda JavaScript no computador, sem
navegador Por que aprender [Link]?
→ Cria: servidores web, APIs, scripts de Com [Link], o mesmo JavaScript que
automação roda no navegador pode rodar em
servidores — uma linguagem para tudo!
→ Baseado no motor V8 do Google Chrome
Prof. Gabriel Eduardo · SENAI-SP slide 13 / 20
DEMO
Primeiro Script
[Link]
[Link]
const nome = 'SENAI-SP';
const ano = 2025;
1 Crie o arquivo
[Link]('Olá, ' + nome + '!');
[Link]
[Link]('Ano: ' + ano);
2 Escreva o código
veja ao lado [Link](`Estudando JS em ${ano`);
3 Execute no terminal $ terminal — saída
node [Link]
> Olá, SENAI-SP!
Template literals > Ano: 2025
Use crase ` e ${variavel} para
inserir valores > Estudando JS em 2025
Prof. Gabriel Eduardo · SENAI-SP slide 14 / 20
OPERAÇÕES
Operadores em JavaScript
ARITMÉTICOS
[Link]
+ - * / % **
let a = 10, b = 3;
COMPARAÇÃO [Link](a + b); // 13
== === != !== > < >= <= [Link](a % b); // 1 (resto)
LÓGICOS [Link](10 == '10'); // true
&& || ! [Link](10 === '10'); // false
E OU NÃO
[Link](true && false); // false
[Link](true || false); // true
Prof. Gabriel Eduardo · SENAI-SP slide 15 / 20
[Link]
EXERCICIO 2 const num1 = 15;
Calculadora no const num2 = 4;
Terminal [Link]('=== Calculadora SENAI ===');
Usando [Link], crie o arquivo [Link]('Soma:', num1 + num2);
[Link] e execute-o [Link]('Subtracao:', num1 - num2);
no terminal: [Link]('Multiplicacao:', num1 * num2);
[Link]('Divisao:', num1 / num2);
Desafio extra
[Link]('Resto:', num1 % num2);
Mude os valores e adicione
potenciação com **
$ node [Link]
Tempo: 8 min === Calculadora SENAI ===
Soma: 19
Subtracao: 11
Prof. Gabriel Eduardo · SENAI-SP slide 16 / 20
BONUS
Loops — Repetindo Ações
O loop for repete um bloco de código N vezes — essencial para automatizar tarefas
repetitivas
for Quando se sabe quantas vezes repetir while Enquanto a condição for verda
[Link] [Link]
// Tabuada do 5 let contador = 0;
for (let i = 1; i <= 10; i++) { while (contador < 3) {
[Link](`5 x ${i = ${5 * i}`); [Link]('Contagem: ', contado
} contador++;
}
5 x 1 = 5 | 5 x 2 = 10 | ... | 5 x 10 = 50
Contagem: 0 | Contagem: 1 | Contagem
Prof. Gabriel Eduardo · SENAI-SP slide 17 / 20
DESAFIO FINAL
Calculadora de
IMC
[Link]
let peso = Number(prompt('Peso em kg:'));
Crie uma página HTML completa let altura = Number(prompt('Altura em metros:'));
que calcule o Índice de Massa let imc = peso / (altura * altura);
Corporal do usuário!
Fórmula: if (imc < 18.5) {
alert(`IMC: ${[Link](1)} - Abaixo do peso`)
IMC = peso / (altura
} else if (imc < 25) {
× altura)
alert(`IMC: ${[Link](1)} - Peso normal`);
< 18.5 Abaixo do peso } else {
alert(`IMC: ${[Link](1)} - Acima do peso`);
18.5 - 25 Peso normal
}
> 25 Acima do peso
Prof. Gabriel Eduardo · SENAI-SP slide 18 / 20
QUALIDADE DE CÓDIGO
Boas Práticas em BOM
JavaScript // Descritivo e claro
const idadeUsuario = 18;
→ Use nomes de variáveis claros e const notaFinal = 9.5;
descritivos let nomeCompleto = 'Ana';
→ Prefira const → let → var
RUIM
→ Use === em vez de == para
comparações // Sem significado
→ Comente seu código com // e /* */ var x = 18;
→ Indente o código corretamente com 2 var y = 9.5;
espaços var z = 'Ana';
→ Uma responsabilidade por função
Prof. Gabriel Eduardo · SENAI-SP slide 19 / 20
RESUMO DA AULA
O que Aprendemos
Hoje
PROXIMA AULA
O que é JavaScript e onde é usado
Funcoes e Arrays
✓
✓ [Link]() para testar e depurar
✓ Variáveis com let e const function() [ ]
✓
Tipos: String, Number, Boolean, null,
undefined
Prof. Gabriel Eduardo
✓ alert() e prompt() no navegador
✓ Condições com if / else if / else SENAI-SP
// continue praticando!
✓ [Link] para rodar JS no terminal
✓
Operadores aritméticos, comparação e
lógicos
✓ Loops for e while
Prof. Gabriel Eduardo · SENAI-SP FIM — Obrigado!