Voltar para: Games com Phaser + Reactjs

Este material amplia e aprofunda o conteúdo que você já possui, transformando-o em um guia mais completo e pedagógico para alunos iniciantes. A proposta é explicar JavaScript desde os conceitos fundamentais até a organização de código moderno, com exemplos claros e aplicações práticas.

1. O que é JavaScript

O JavaScript é a linguagem de programação responsável pela interatividade nas páginas web.

Enquanto o HTML define a estrutura e o CSS define o estilo, o JavaScript controla o comportamento da página.

Exemplos de uso do JavaScript:

validar formulários
criar menus interativos
atualizar conteúdo sem recarregar a página
criar jogos simples no navegador
manipular dados
desenvolver aplicações web completas

JavaScript foi criado em 1995 por Brendan Eich.

2. Como o JavaScript funciona no navegador

O JavaScript é executado pelo navegador através de um motor JavaScript.

Exemplos:

V8 (Chrome)
SpiderMonkey (Firefox)
JavaScriptCore (Safari)

Ele é executado no lado do cliente, ou seja, diretamente no computador do usuário.

3. Como usar JavaScript em uma página HTML

Existem três formas principais.

JavaScript Inline

<button onclick="alert('Olá')">Clique</button>

Não é recomendado para projetos maiores.

JavaScript Interno

<script>
console.log("Olá mundo");
</script>

JavaScript Externo (RECOMENDADO)

Arquivo HTML:

<script src="script.js"></script>

Arquivo script.js:

console.log("Olá mundo");

4. Variáveis em JavaScript

Variáveis armazenam valores.

let

let pontos = 0;
pontos = 10;

Pode ser alterada.

const

const jogador = "David";

Não pode ser reatribuída.

var (evitar)

var idade = 30;

Possui problemas de escopo e hoje é considerada obsoleta em código moderno.

Regra recomendada

✔ usar const por padrão
✔ usar let quando o valor mudar

5. Tipos de dados

JavaScript possui diversos tipos.

String

Texto.

const nome = "Maria";

Number

Número.

const idade = 25;

Boolean

Valor lógico.

const ativo = true;

Array

Lista de valores.

const numeros = [10, 20, 30];

Objeto

Estrutura de dados com propriedades.

const jogador = {
  nome: "David",
  vidas: 3
};

6. Operadores

JavaScript possui operadores matemáticos.

+ soma
- subtração
* multiplicação
/ divisão

Exemplo:

const total = 10 + 5;

7. Estruturas condicionais

Permitem executar código dependendo de condições.

if

if (pontos > 100) {
  console.log("Você venceu!");
}

if / else

if (pontos > 100) {
  console.log("Venceu");
} else {
  console.log("Continue jogando");
}

switch

switch(nivel) {
  case 1:
    console.log("Fácil");
    break;
  case 2:
    console.log("Médio");
    break;
}

8. Loops (Repetição)

Usados para repetir ações.

for

for(let i = 0; i < 5; i++){
  console.log(i);
}

while

while(pontos < 100){
  pontos++;
}

9. Funções

Funções são blocos reutilizáveis de código.

Função tradicional

function somar(a, b){
  return a + b;
}

Arrow Function

Forma moderna.

const somar = (a, b) => {
  return a + b;
};

Versão curta:

const dobrar = n => n * 2;

Diferença importante

Arrow Functions:

sintaxe mais curta
muito usadas em callbacks
não possuem próprio this

10. Arrays

Arrays armazenam múltiplos valores.

const pontuacoes = [10, 20, 30];

Métodos importantes

push()

Adiciona item.

pontuacoes.push(40);

map()

Transforma dados.

const dobrados = pontuacoes.map(n => n * 2);

filter()

Filtra valores.

const maiores = pontuacoes.filter(n => n > 15);

reduce()

Reduz para um único valor.

const soma = pontuacoes.reduce((a,b) => a + b);

11. Objetos

Objetos representam entidades.

const jogador = {
  nome: "David",
  vidas: 3,
  pontuacao: 0
};

Acessando propriedades

jogador.nome

jogador["vidas"]

12. Destructuring

Permite extrair valores facilmente.

Objetos

const { nome, vidas } = jogador;

Arrays

const [primeiro, segundo] = pontuacoes;

Isso torna o código mais limpo.

13. Manipulação do DOM

O DOM (Document Object Model) representa a estrutura da página HTML.

JavaScript pode alterar elementos da página.

Selecionar elemento

document.getElementById("score");

Alterar texto

element.innerText = "Novo valor";

Adicionar evento

botao.addEventListener("click", () => {
  console.log("clicou");
});

14. Módulos JavaScript

Projetos modernos organizam código em arquivos.

Estrutura:

/projeto
 ├ index.html
 ├ main.js
 ├ score.js
 └ player.js

Exportando funções

score.js

let pontos = 0;const adicionarPontos = valor => {
  pontos += valor;
};const obterPontos = () => pontos;export { adicionarPontos, obterPontos };

Importando

main.js

import { adicionarPontos, obterPontos } from "./score.js";

No HTML

<script type="module" src="main.js"></script>

15. Estrutura recomendada de projeto

projeto
│
├ index.html
│
├ css
│   └ style.css
│
├ js
│   ├ main.js
│   ├ score.js
│   └ player.js
│
└ assets

16. Atividade prática: Sistema de Pontuação

Objetivo:

Criar um sistema simples de pontuação.

index.html

<h1>Sistema de Pontuação</h1><p id="score">0</p><button id="add">+10</button>
<button id="remove">-5</button>
<button id="reset">Reset</button><script type="module" src="main.js"></script>

score.js

let pontos = 0;const adicionar = v => pontos += v;
const remover = v => pontos -= v;
const resetar = () => pontos = 0;
const obter = () => pontos;export { adicionar, remover, resetar, obter };

main.js

import { adicionar, remover, resetar, obter } from "./score.js";const scoreElement = document.getElementById("score");const atualizarTela = () => {
  scoreElement.innerText = obter();
};document.getElementById("add").addEventListener("click", () => {
  adicionar(10);
  atualizarTela();
});document.getElementById("remove").addEventListener("click", () => {
  remover(5);
  atualizarTela();
});document.getElementById("reset").addEventListener("click", () => {
  resetar();
  atualizarTela();
});