Introdução ao JavaScript
🔹 O que é JavaScript?
JavaScript é uma linguagem de programação usada
principalmente na web.
Com ele você pode dar vida às páginas: botões que respondem a
cliques, jogos, animações, formulários interativos…
➡️Pense assim:
HTML é o esqueleto da página (estrutura).
CSS é a roupa e maquiagem (estilo).
JavaScript é o cérebro (interatividade).
🔹 Conceitos básicos
1. Variáveis → São "caixinhas" que guardam informações:
let nome = "Carina";
let idade = 12;
2. Tipos de dados
Texto (string): "Olá mundo!"
Números: 10, 3.5
Verdadeiro/Falso (boolean): true, false
3. Operações matemáticas
let soma = 5 + 3; // 8
let multiplicacao = 4 * 2; // 8
4. Funções → Um bloco de código que faz algo:
function cumprimentar() {
alert("Olá, bem-vinda ao JavaScript!");
5. Eventos → Quando algo acontece na página (ex: clique):
<button onclick="cumprimentar()">Clique em mim</button>
6. Condições (if/else) → Tomada de decisão:
let idade = 12;
if (idade >= 18) {
alert("Você é maior de idade");
} else {
alert("Você é menor de idade");
7. Laços (loops) → Repetir algo várias vezes:
for (let i = 1; i <= 5; i++) {
[Link]("Número: " + i);
🔹 Onde testar JavaScript?
Você pode começar sem instalar nada:
1. Abra o navegador (Chrome, Edge, Firefox).
2. Pressione F12 → vá em Console.
3. Escreva:
alert("Olá, JavaScript!");
e veja o que acontece.
Ou crie um arquivo HTML simples para abrir no navegador.
✨ Pronto! Se você colar esse texto no Word, já vai ter um guia básico
de JavaScript bem organizado para você e para seus alunos.
Quer que eu monte também um exemplo de arquivo HTML pronto
(que você só abre e já funciona) para praticar?
Guia Básico de [Link]
🔹 O que é [Link]
Biblioteca de JavaScript para criar desenhos, animações e
interatividade.
Ideal para iniciante e educação, projetos artísticos e jogos
simples.
Você ainda usa JavaScript, mas com funções que facilitam criar
elementos visuais.
🔹 Como começar
1. Abra o Editor Online do [Link].
2. Clique em “Start Coding” ou “Novo Sketch”.
3. Você verá duas funções principais no código:
function setup() {
// Rodado apenas uma vez no início
function draw() {
// Rodado várias vezes por segundo, cria animação
setup(): inicializa o sketch (tamanho da tela, cores, etc.).
draw(): roda em loop, ideal para animações.
🔹 Exemplo 1: Círculo que segue o mouse
function setup() {
createCanvas(400, 400); // Tela 400x400 pixels
background(220); // Cor de fundo cinza claro
function draw() {
fill(255, 0, 0); // Círculo vermelho
ellipse(mouseX, mouseY, 50, 50); // Segue o mouse
🔹 Exemplo 2: Desenhar retângulos e mudar cor com o mouse
function setup() {
createCanvas(400, 400);
background(200);
function draw() {
fill(mouseX % 255, mouseY % 255, 150); // Cor muda com posição
do mouse
rect(mouseX, mouseY, 50, 50); // Desenha retângulo
🔹 Conceitos básicos do [Link]
Função /
O que faz
Comando
createCanvas(l,
Cria a tela do desenho
a)
background(cor) Define a cor de fundo
Define a cor de
fill(cor)
preenchimento
stroke(cor) Define a cor da borda
Desenha um círculo ou
ellipse(x, y, l, a)
elipse
rect(x, y, l, a) Desenha um retângulo
mouseX /
Posição atual do mouse
mouseY
Detecta teclas
keyPressed()
pressionadas
🔹 Dicas para praticar
Teste alterar cores, tamanhos e posições das formas.
Experimente mover formas com o mouse ou teclado.
Use loops para criar padrões repetitivos.
Olhe os exemplos no site do [Link] e tente modificar eles para
treinar.
36