O que é JavaScript e onde ele roda

1. Uma breve história do JavaScript

JavaScript foi criado por Brendan Eich em 1995, durante seu tempo na Netscape Communications. Originalmente chamado de Mocha, depois LiveScript e finalmente JavaScript, a linguagem foi desenvolvida em apenas 10 dias para atender à necessidade de tornar as páginas web mais interativas.

Em 1997, a linguagem foi padronizada pela ECMA International como ECMAScript. Desde então, passou por diversas evoluções significativas:

  • ES5 (2009): Adicionou suporte a JSON, métodos de array e strict mode
  • ES6/ES2015: Introduziu classes, arrow functions, template literals, let/const
  • ES2016+: Atualizações anuais com recursos como async/await, optional chaining

O que começou como uma linguagem simples para navegadores tornou-se uma das tecnologias mais versáteis do desenvolvimento moderno.

2. Características fundamentais do JavaScript

JavaScript é uma linguagem interpretada, o que significa que o código é executado linha por linha por um motor específico, sem necessidade de compilação prévia.

Possui tipagem dinâmica e fraca:

let mensagem = "Olá";      // string
mensagem = 42;              // agora é number
console.log(mensagem + 5);  // 47 (conversão implícita)
console.log("5" + 3);       // "53" (concatenação)

Suporta múltiplos paradigmas de programação:

// Paradigma imperativo
let numeros = [1, 2, 3, 4, 5];
let dobrados = [];
for (let i = 0; i < numeros.length; i++) {
    dobrados.push(numeros[i] * 2);
}

// Paradigma funcional
let dobradosFunctional = numeros.map(n => n * 2);

// Paradigma orientado a objetos
class Calculadora {
    somar(a, b) {
        return a + b;
    }
}

3. Onde o JavaScript roda: Navegadores (Client-side)

No navegador, JavaScript é executado por motores especializados:

  • V8 (Chrome, Edge, Opera)
  • SpiderMonkey (Firefox)
  • JavaScriptCore (Safari)

O código no navegador tem acesso ao DOM (Document Object Model) e a APIs específicas:

// Manipulação do DOM
document.getElementById('titulo').textContent = 'Novo Título';

// Eventos do usuário
document.querySelector('button').addEventListener('click', () => {
    alert('Botão clicado!');
});

// APIs do navegador
fetch('https://api.exemplo.com/dados')
    .then(response => response.json())
    .then(data => console.log(data));

localStorage.setItem('preferencia', 'escuro');

4. Onde o JavaScript roda: Node.js (Server-side)

Node.js é um runtime que permite executar JavaScript fora do navegador, utilizando o motor V8. Criado por Ryan Dahl em 2009, Node.js trouxe JavaScript para o servidor, permitindo acesso ao sistema operacional:

// Exemplo prático no Node.js
const fs = require('fs');

// Leitura de arquivo
fs.readFile('dados.txt', 'utf8', (erro, dados) => {
    if (erro) {
        console.error('Erro ao ler arquivo:', erro);
        return;
    }
    console.log('Conteúdo do arquivo:', dados);
});

// Criando um servidor HTTP
const http = require('http');
const servidor = http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Olá do Node.js!\n');
});
servidor.listen(3000);

Diferente do navegador, Node.js oferece módulos para sistema de arquivos, rede, processos e muito mais.

5. JavaScript no ecossistema React

React é uma biblioteca JavaScript para construção de interfaces de usuário, desenvolvida pelo Facebook. Ela utiliza JSX, uma extensão de sintaxe que combina JavaScript com HTML:

import React, { useState } from 'react';

function Contador() {
    const [contagem, setContagem] = useState(0);

    return (
        <div>
            <h1>Contagem: {contagem}</h1>
            <button onClick={() => setContagem(contagem + 1)}>
                Incrementar
            </button>
        </div>
    );
}

export default Contador;

React permite criar componentes reutilizáveis, gerenciar estado e lidar com o ciclo de vida dos elementos de forma declarativa.

6. Comparação prática: mesmo código, ambientes diferentes

// console.log funciona em ambos
console.log('Isso funciona em qualquer lugar');

// Objetos globais diferentes
// No navegador:
console.log(window.innerWidth);  // largura da janela
console.log(window.document);    // DOM

// No Node.js:
console.log(global.process.version);  // versão do Node
console.log(global);                  // objeto global

// DOM não existe no Node.js
// Isso causaria erro: document.getElementById('id')

// Módulos nativos não existem no navegador
// Isso causaria erro: require('fs')

7. Ferramentas essenciais para começar

Para desenvolver com JavaScript moderno, algumas ferramentas são fundamentais:

npm (Node Package Manager): Gerencia dependências e scripts

npm init -y
npm install react

Babel: Transpila código moderno para versões compatíveis

// Código moderno com arrow function
const soma = (a, b) => a + b;

// Babel transpila para:
var soma = function(a, b) {
    return a + b;
};

Webpack: Empacota módulos e recursos

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

VS Code: Editor com suporte nativo a JavaScript, depuração integrada e extensões poderosas.

DevTools do navegador: Console, depurador, análise de performance e rede.

JavaScript evoluiu de uma linguagem simples para scripts de navegador para um ecossistema completo que abrange front-end, back-end e desenvolvimento mobile. Compreender onde e como ele roda é fundamental para aproveitar todo seu potencial.

Referências