Introdução à Programação: PHP & JavaScript
Introdução à Programação:
PHP & JavaScript
Variáveis, Tipos de Dados, Estruturas de Decisão, Laços de Repetição, Funções e Procedimentos
📋 Conteúdo desta aula
O que é o PHP?
PHP (sigla recursiva de PHP: Hypertext Preprocessor) é uma linguagem de programação de código aberto, especialmente desenvolvida para a criação de páginas web dinâmicas. Enquanto o HTML apenas exibe conteúdo estático, o PHP permite que o servidor processe informações, acesse bancos de dados e gere HTML personalizado antes de enviar a resposta ao navegador do usuário.
1.1 — Origem e criação
Criador: Rasmus Lerdorf, um programador dinamarquês-canadense.
Ano: 1994. Rasmus criou um conjunto de scripts em linguagem C para monitorar quem visitava seu currículo online. Ele chamou esses scripts de Personal Home Page Tools — daí a primeira sigla: PHP.
1995: O código-fonte é liberado publicamente, permitindo que outros desenvolvedores contribuíssem.
1997: Zeev Suraski e Andi Gutmans reescreveram completamente o núcleo da linguagem, dando origem ao PHP 3 e renomeando a sigla para PHP: Hypertext Preprocessor.
1.2 — Linha do tempo
| Versão / Ano | Marco importante |
|---|---|
| PHP 1 — 1994 | Scripts pessoais de Rasmus Lerdorf para seu currículo online |
| PHP 3 — 1997 | Reescrita completa por Suraski & Gutmans; adoção em massa começa |
| PHP 4 — 2000 | Motor Zend Engine 1.0; suporte a sessões e orientação a objetos básica |
| PHP 5 — 2004 | Zend Engine 2; orientação a objetos robusta; PDO para bancos de dados |
| PHP 7 — 2015 | Ganho de desempenho de até 2×; declaração de tipos; null coalescing |
| PHP 8 — 2020 | JIT Compiler, tipos de união, atributos nativos, melhorias de performance |
| PHP 8.3 — 2023 | Versão estável mais recente da série 8; melhorias de tipagem e performance |
1.3 — Como é mantido hoje
O PHP é um projeto de código aberto (open source) mantido pelo The PHP Group, uma equipe voluntária de desenvolvedores ao redor do mundo. O desenvolvimento é coordenado em repositório público no GitHub (php/php-src) e novas versões seguem um ciclo de lançamentos com suporte ativo e segurança.
Curiosidade: o elefante azul 🐘 é o mascote oficial do PHP, criado pela comunidade. Você verá essa imagem em conferências, camisetas e logos de projetos do ecossistema. O nome do mascote é ElePHPant!
O que é o JavaScript?
JavaScript (JS) é uma linguagem de programação leve, interpretada e orientada a objetos, originalmente criada para tornar as páginas web interativas no lado do navegador (client-side). Com o tempo, evoluiu para uma linguagem de propósito geral usada também no servidor, em aplicativos mobile e desktop.
2.1 — Origem e criação
Criador: Brendan Eich, engenheiro da Netscape Communications.
Ano: 1995. Brendan desenvolveu a linguagem em apenas 10 dias para ser embarcada no navegador Netscape Navigator 2.0, com o objetivo de permitir pequenas interações nas páginas sem depender de um servidor.
Nomes originais: A linguagem se chamou Mocha na fase de prototipagem, depois LiveScript no lançamento beta.
O nome JavaScript foi adotado em dezembro de 1995, como estratégia de marketing para aproveitar a popularidade do Java — apesar de as duas linguagens não terem quase nenhuma relação técnica.
2.2 — Linha do tempo
| Versão / Ano | Marco importante |
|---|---|
| JS 1.0 — 1995 | Criado por Brendan Eich em 10 dias; embarcado no Netscape Navigator 2.0 |
| ES1 — 1997 | Primeira versão padronizada pelo ECMA International como ECMAScript 1 |
| ES3 — 1999 | Expressões regulares, tratamento de exceções (try/catch); adoção em massa |
| ES5 — 2009 | Modo estrito (strict mode), métodos de array modernos, JSON nativo |
| Node.js — 2009 | Ryan Dahl leva o JavaScript para o servidor; JS passa a rodar fora do navegador |
| ES6 / ES2015 | Revolução: let, const, arrow functions, classes, módulos, Promises |
| ES2020–2024 | Lançamentos anuais com melhorias incrementais; JS é a linguagem mais usada no GitHub |
2.3 — Como é mantido hoje
O JavaScript é padronizado pelo comitê TC39, um grupo técnico da organização ECMA International, composto por representantes de empresas como Google, Mozilla, Apple, Microsoft e Meta. Novas funcionalidades passam por um processo de proposta em estágios (Stage 0 a Stage 4) antes de serem incorporadas ao padrão oficial ECMAScript.
Curiosidade: apesar de o nome ser JavaScript, a linguagem não tem nenhuma relação com o Java. A semelhança no nome foi apenas uma decisão de marketing da Netscape em 1995. Hoje, o nome oficial do padrão é ECMAScript, e o "JavaScript" é o nome comercial usado pelos navegadores.
JavaScript no Servidor
Durante seus primeiros anos, o JavaScript só rodava dentro do navegador. Isso mudou em 2009, quando Ryan Dahl criou o Node.js — um ambiente de execução que levou o JS para fora do navegador e permitiu que ele rodasse diretamente no servidor, assim como o PHP. Hoje o ecossistema cresceu e existem múltiplas opções.
3.1 — Os principais ambientes e frameworks
3.2 — Resumo comparativo
| Ambiente / Framework | Criado em | Ponto forte | Indicado para |
|---|---|---|---|
| 🟢 Node.js | 2009 | Maturidade e ecossistema imenso | Qualquer projeto; base de quase tudo |
| 🚂 Express.js | 2010 | Simplicidade e controle total | APIs REST, projetos sob medida |
| ▲ Next.js | 2016 | Full-stack React com SSR | Sites e apps com front-end React |
| 🦕 Deno | 2018 | Segurança e TypeScript nativo | Scripts seguros, projetos modernos |
| 🥟 Bun | 2023 | Velocidade extrema, tudo-em-um | Projetos novos que priorizam performance |
Para iniciantes: comece pelo Node.js + Express. É a combinação mais usada no mercado, tem a maior quantidade de tutoriais e vagas de emprego, e serve de base para entender todos os outros ambientes.
PHP vs JavaScript — Comparação
As duas linguagens nasceram no mesmo ano (1995) e dominam o desenvolvimento web, mas com papéis diferentes e complementares. Entender onde cada uma atua evita confusão na hora de escolher a ferramenta certa.
| Característica | PHP 🐘 | JavaScript ☕ |
|---|---|---|
| Ano de criação | 1994 (público em 1995) | 1995 |
| Criador | Rasmus Lerdorf | Brendan Eich (Netscape) |
| Onde roda | Servidor (back-end) | Navegador (front-end) e servidor com Node.js |
| Tipo de execução | Interpretada no servidor | Interpretada / compilada JIT no motor JS |
| Tipagem | Dinâmica e fraca | Dinâmica e fraca |
| Variáveis | Sempre com $ (ex: $nome) |
Com let, const ou var |
| Saída de dados | echo ou print |
console.log() ou document.write() |
| Uso principal | Geração de HTML dinâmico, APIs, sistemas web | Interfaces interativas, SPAs, APIs, apps mobile/desktop |
| Frameworks populares | Laravel, Symfony, CodeIgniter, WordPress | React, Vue, Angular, Next.js, Express |
| Banco de dados | Acessa diretamente (MySQL, PostgreSQL…) | Via Node.js ou requisições à API do servidor |
| Padrão / Organização | The PHP Group (open source) | ECMA International — comitê TC39 |
| Mascote | ElePHPant 🐘 | Não há mascote oficial |
3.1 — Onde cada um atua na arquitetura web
Eles se complementam, não competem! Em um projeto web típico, o PHP cuida do back-end (lógica de negócio, banco de dados, autenticação) enquanto o JavaScript cuida do front-end (animações, validações no formulário, atualizações sem recarregar a página). Com o Node.js, o JS também pode ocupar o papel do PHP no servidor.
Resumo em uma frase: PHP é a cozinha do restaurante (onde tudo é preparado, longe dos olhos do cliente) e JavaScript é o salão (onde o cliente vê, interage e tem experiência em tempo real).
Declaração de Variáveis
O que é uma variável? Pense em uma variável como uma caixa etiquetada. Você dá um nome para a caixa e guarda um valor dentro dela. Esse valor pode ser consultado ou trocado ao longo do programa.
// PHP: sempre começa com $ $nome = "Maria"; $idade = 20; $altura = 1.68; $ativo = true; // Exibe na tela echo $nome; echo "Idade: " . $idade;
// JS: let, const ou var let nome = "Maria"; let idade = 20; const altura = 1.68; let ativo = true; // Exibe no console console.log(nome); console.log(`Idade: ${idade}`);
Diferenças importantes:
• PHP: toda variável começa com $. Não é necessário declarar o tipo.
• JavaScript: use let para variáveis que mudam de valor, e const para valores fixos. Evite var (forma antiga).
Regras para nomes de variáveis (valem para as duas linguagens): comece com uma letra ou underscore ( _ ), não use espaços nem caracteres especiais (como ç, ã), e opte por nomes que façam sentido: $notaAluno é melhor que $x.
Tipos de Dados
Ambas as linguagens são dinamicamente tipadas: você não precisa dizer explicitamente o tipo — ele é inferido pelo valor atribuído. Mesmo assim, entender os tipos é fundamental para evitar bugs.
| Tipo | Descrição | PHP | JavaScript |
|---|---|---|---|
| String | Texto, entre aspas | $x = "olá"; |
let x = "olá"; |
| Integer | Número inteiro | $x = 42; |
let x = 42; |
| Float | Número decimal | $x = 3.14; |
let x = 3.14; |
| Boolean | Verdadeiro ou Falso | $x = true; |
let x = true; |
| Array | Lista de valores | $x = [1, 2, 3]; |
let x = [1, 2, 3]; |
| Null | Ausência de valor | $x = null; |
let x = null; |
| Object | Coleção chave:valor | $x = new Classe(); |
let x = {a: 1}; |
$nota = 8.5; // Descobre o tipo var_dump($nota); // Saída: float(8.5) // Converte para inteiro $inteiro = (int) $nota; echo $inteiro; // 8
let nota = 8.5; // Descobre o tipo console.log(typeof nota); // Saída: "number" // Converte para inteiro let inteiro = Math.trunc(nota); console.log(inteiro); // 8
Atenção no JavaScript: o tipo number engloba inteiros e decimais (não há separação como no PHP entre int e float). Além disso, JS possui o tipo especial undefined (variável declarada mas sem valor atribuído).
Estruturas de Decisão
Estruturas de decisão permitem que o programa tome caminhos diferentes dependendo de uma condição. É como uma encruzilhada: "se acontecer X, vá por aqui; senão, vá por lá."
3.1 — if / else if / else
$nota = 7; if ($nota >= 7) { echo "Aprovado!"; } elseif ($nota >= 5) { echo "Recuperação"; } else { echo "Reprovado"; }
let nota = 7; if (nota >= 7) { console.log("Aprovado!"); } else if (nota >= 5) { console.log("Recuperação"); } else { console.log("Reprovado"); }
3.2 — switch / case
Use switch quando precisar comparar uma mesma variável com vários valores específicos. É mais legível do que vários else if seguidos.
$dia = "segunda"; switch ($dia) { case "segunda": echo "Início da semana"; break; case "sexta": echo "Quase fim de semana!"; break; default: echo "Dia normal"; }
let dia = "segunda"; switch (dia) { case "segunda": console.log("Início da semana"); break; case "sexta": console.log("Quase fim de semana!"); break; default: console.log("Dia normal"); }
Nunca esqueça o break dentro do switch! Sem ele, o programa continua executando os próximos cases mesmo que a condição não corresponda (isso é chamado de fall-through).
Laços de Repetição
Laços (ou loops) executam um bloco de código várias vezes, evitando que você precise repetir as mesmas linhas manualmente. Imagine ter que imprimir os números de 1 a 1000 — sem loops seria impraticável!
4.1 — for (quando se sabe o número de repetições)
// Conta de 1 até 5 for ($i = 1; $i <= 5; $i++) { echo "Número: " . $i . "<br>"; } // Número: 1 // Número: 2 ...até 5
// Conta de 1 até 5 for (let i = 1; i <= 5; i++) { console.log(`Número: ${i}`); } // Número: 1 // Número: 2 ...até 5
4.2 — while (enquanto uma condição for verdadeira)
$senha = ""; while ($senha != "1234") { // Simulação: pede senha $senha = readline("Senha: "); } echo "Acesso liberado!";
let tentativas = 0; while (tentativas < 3) { console.log("Tentativa " + tentativas); tentativas++; } console.log("Fim!");
4.3 — do...while (executa pelo menos uma vez)
$x = 1; do { echo $x . " "; $x++; } while ($x <= 3); // Saída: 1 2 3
let x = 1; do { console.log(x); x++; } while (x <= 3); // Saída: 1 2 3
4.4 — foreach / for...of (percorrendo listas)
$frutas = ["maçã", "banana", "uva"]; foreach ($frutas as $fruta) { echo $fruta . "<br>"; } // maçã / banana / uva
const frutas = ["maçã", "banana", "uva"]; for (const fruta of frutas) { console.log(fruta); } // maçã / banana / uva
Resumo rápido dos laços: use for quando souber quantas vezes vai repetir; while quando a repetição depende de uma condição; do...while quando precisa executar ao menos uma vez; e foreach / for...of para percorrer os itens de uma lista (array).
Funções e Procedimentos
Funções são blocos de código reutilizáveis que recebem um nome. Em vez de repetir o mesmo código várias vezes, você o escreve uma vez dentro de uma função e a chama sempre que precisar.
• Procedimento: executa ações mas não retorna valor.
• Função: executa ações e retorna um resultado com return.
5.1 — Procedimento (sem retorno)
function saudacao($nome) { echo "Olá, " . $nome . "!"; } // Chamando o procedimento saudacao("Ana"); // Saída: Olá, Ana!
function saudacao(nome) { console.log(`Olá, ${nome}!`); } // Chamando o procedimento saudacao("Ana"); // Saída: Olá, Ana!
5.2 — Função (com retorno de valor)
function somar($a, $b) { return $a + $b; } $resultado = somar(4, 6); echo $resultado; // 10 // Função com valor padrão function desconto($preco, $pct = 10) { return $preco - ($preco * $pct / 100); } echo desconto(100); // 90
function somar(a, b) { return a + b; } let resultado = somar(4, 6); console.log(resultado); // 10 // Função com valor padrão function desconto(preco, pct = 10) { return preco - (preco * pct / 100); } console.log(desconto(100)); // 90
5.3 — Arrow Function (exclusivo do JavaScript)
O JavaScript moderno oferece uma forma mais curta de escrever funções, chamada Arrow Function. É muito usada em projetos reais e frameworks modernos.
// Forma tradicional function dobrar(n) { return n * 2; } // Arrow Function equivalente const dobrar = (n) => n * 2; // Arrow com múltiplas linhas const calcularMedia = (a, b, c) => { let soma = a + b + c; return soma / 3; }; console.log(calcularMedia(6, 8, 10)); // 8
5.4 — Exemplo prático completo
function situacao($nota) { if ($nota >= 7) { return "Aprovado"; } elseif ($nota >= 5) { return "Recuperação"; } else { return "Reprovado"; } } $alunos = [ ["nome" => "Carlos", "nota" => 8], ["nome" => "Lucia", "nota" => 5.5], ["nome" => "Pedro", "nota" => 3], ]; foreach ($alunos as $a) { $sit = situacao($a["nota"]); echo $a["nome"] . ": " . $sit . "<br>"; } // Carlos: Aprovado // Lucia: Recuperação // Pedro: Reprovado
function situacao(nota) { if (nota >= 7) { return "Aprovado"; } else if (nota >= 5) { return "Recuperação"; } else { return "Reprovado"; } } const alunos = [ { nome: "Carlos", nota: 8 }, { nome: "Lucia", nota: 5.5 }, { nome: "Pedro", nota: 3 }, ]; for (const a of alunos) { const sit = situacao(a.nota); console.log(`${a.nome}: ${sit}`); } // Carlos: Aprovado // Lucia: Recuperação // Pedro: Reprovado
Comentários
Postar um comentário
Ficou com alguma dúvida? Quer compartilhar sua experiência? Tem uma sugestão de
melhoria? Seu comentário é muito importante!