JavaScript – Guia rápido

JavaScript é a linguagem de programação mais utilizada no mundo, essencial para desenvolvimento web front-end e cada vez mais presente no back-end (Node.js). Criada por Brendan Eich em 1995, evoluiu de uma simples ferramenta para validação de formulários para a base de aplicações complexas e interativas.


Principais Conceitos com Exemplos

1. Variáveis e Tipos de Dados

1. Variáveis e Tipos de Dados

javascript
 
// Let (mutável) e const (imutável)
let nome = "Maria"; // String
const idade = 30;    // Number
const ativo = true; // Boolean
let valor = null;   // Null

2. Estruturas de Controle

javascript
 
// Condicional
if (idade >= 18) {
  console.log("Maior de idade");
} else {
  console.log("Menor de idade");
}

// Loop
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

3. Funções

javascript
 
// Função tradicional
function somar(a, b) {
  return a + b;
}

// Arrow function (ES6+)
const multiplicar = (a, b) => a * b;

4. Objetos e Classes

javascript
 
// Objeto literal
const pessoa = {
  nome: "Carlos",
  profissao: "Desenvolvedor",
  saudacao() {
    return `Olá, sou ${this.nome}!`;
  }
};

// Classe (ES6)
class Retangulo {
  constructor(altura, largura) {
    this.altura = altura;
    this.largura = largura;
  }
  calcularArea() {
    return this.altura * this.largura;
  }
}

5. Arrays e Métodos

javascript
 
const numeros = [1, 2, 3, 4];

// Map: transforma elementos
const dobrados = numeros.map(n => n * 2); // [2, 4, 6, 8]

// Filter: seleciona elementos
const pares = numeros.filter(n => n % 2 === 0); // [2, 4]

6. Promises e Async/Await (Programação Assíncrona)

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

// Async/Await
async function carregarDados() {
  const response = await fetch('https://api.exemplo.com/dados');
  const data = await response.json();
  console.log(data);
}

DOM (Document Object Model)

O DOM é a representação em árvore de um documento HTML, permitindo que o JavaScript interaja dinamicamente com a página e seus elementos.

Manipulação Básica:

html
 
<button id="botao">Clique aqui</button>
<div id="conteudo"></div>
javascript
 
// Selecionar elemento
const botao = document.getElementById("botao");

// Adicionar evento
botao.addEventListener("click", () => {
  // Criar elemento
  const novoParagrafo = document.createElement("p");
  novoParagrafo.textContent = "Texto gerado dinamicamente!";
  
  // Inserir no DOM
  document.getElementById("conteudo").appendChild(novoParagrafo);
  
  // Alterar estilo
  novoParagrafo.style.color = "blue";
});

Métodos Essenciais:

  • document.querySelector(): Seleciona o primeiro elemento correspondente ao seletor CSS

  • element.innerHTML: Altera conteúdo HTML interno

  • element.setAttribute(): Define atributos

  • element.classList: Gerencia classes CSS


Principais Frameworks do Mercado

1. React (Meta)

  • Biblioteca para construção de UIs baseada em componentes

  • Usa JSX (JavaScript + HTML)

  • Virtual DOM para performance

  • Exemplo:

jsx
 
function Contador() {
  const [contagem, setContagem] = useState(0);
  return (
    <div>
      <p>Contagem: {contagem}</p>
      <button onClick={() => setContagem(contagem + 1)}>
        Incrementar
      </button>
    </div>
  );
}

2. Angular (Google)

  • Framework completo com arquitetura MVC

  • Usa TypeScript como padrão

  • Injeção de dependências e two-way data binding

  • Ideal para aplicações empresariais complexas

3. Vue.js

  • Framework progressivo: Pode ser adotado gradualmente

  • Combina melhores conceitos de React e Angular

  • Sintaxe simples com Single File Components (.vue)

  • Alta flexibilidade e curva de aprendizado suave

4. Svelte

  • Compilador que gera código vanilla JS

  • Zero virtual DOM: Atualiza o DOM diretamente

  • Menos código boilerplate

  • Crescente adoção para aplicações leves

Comparação Rápida:

FrameworkTipoLinguagemDestaque
ReactBibliotecaJavaScriptComponentes, Ecossistema
AngularFrameworkTypeScriptArquitetura completa
VueFrameworkJS/TSFlexibilidade
SvelteCompiladorJS/TSPerformance

Conclusão

JavaScript se tornou a linguagem mais demandada do mercado nos últimos anos e ao que tudo indica, vai permanecer assim por um bom tempo, recomendo dar uma conferida nas pesquisas do canal Código Fonte TV onde são avaliados salários de diversas linguagens e comparativos de demandas do mercado.

O ecossistema do Javascript oferece:

  • Fundamentos robustos para manipulação de páginas via DOM

  • Capacidade para criar aplicações complexas com frameworks

  • Versatilidade para front-end, back-end (Node.js) e mobile (React Native)

  • Evolução constante através das especificações ECMAScript

Para se manter relevante:

  1. Domine os conceitos fundamentais

  2. Aprofunde-se em manipulação do DOM

  3. Explore pelo menos um framework moderno

  4. Mantenha-se atualizado com as novas features (ES2020+)

JavaScript não é apenas uma linguagem – é um ecossistema dinâmico que continua a moldar o futuro da web. Seu domínio abre portas para construir experiências interativas, aplicações escaláveis e soluções inovadoras.

Últimos Artigos

Deixe sua dúvida ou opinião

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Post anterior
Próximo post

Copyright © 2025 - Pablo Vinícius