Os fundamentos de JavaScript

JavaScript é a linguagem de programação da web por excelência. Presente em todos os navegadores modernos, ela permite criar sites interativos e aplicações dinâmicas.

Por que aprender JavaScript?

• Onipresente: Utilizado por mais de 97% dos sites
• Versátil: Front-end, back-end (Node.js), aplicativos mobile, desktop…
• Ecossistema rico: Milhares de bibliotecas e frameworks (React, Vue, Angular…)
• Comunidade ativa: Uma das maiores comunidades de desenvolvedores do mundo

Os fundamentos de JavaScript

Variáveis e tipos de dados

JavaScript oferece várias formas de declarar variáveis:

// Variáveis modificáveis
let age = 25;
let nom = "Alice";

// Constantes (não modificáveis)
const PI = 3.14159;

// A evitar (método antigo)
var ancienneVariable = "Déprécié";

Os principais tipos de dados são:

// Strings (cadeias de caracteres)
let message = "Bonjour le monde !";

// Números
let entier = 42;
let decimal = 3.14;

// Booleanos
let estVrai = true;
let estFaux = false;

// Arrays
let fruits = ["pomme", "banane", "orange"];

// Objetos
let personne = {
  nom: "Dupont",
  prenom: "Jean",
  age: 30,
  adresse: {
    ville: "Paris",
    codePostal: "75001"
  }
};

// Valores especiais
let valeurVide = null;
let valeurNonDefinie = undefined;

Operadores

JavaScript oferece diversos operadores para manipular dados:

// Operadores aritméticos
let somme = 5 + 3;        // 8
let difference = 10 - 4;  // 6
let produit = 3 * 4;      // 12
let quotient = 20 / 5;    // 4
let modulo = 10 % 3;      // 1 (resto da divisão)

// Operadores de comparação
let estEgal = 5 == "5";           // true (igualdade simples)
let estStrictementEgal = 5 === 5; // true (igualdade estrita, tipo incluído)
let estDifferent = 5 != "6";      // true
let estSuperieur = 10 > 5;        // true

// Operadores lógicos
let et = true && false;  // false
let ou = true || false;  // true
let non = !true;         // false

Estruturas condicionais

As condições permitem executar código conforme determinadas circunstâncias:

// If, else if, else
let heure = 14;

if (heure < 12) {
  console.log("Bonjour");
} else if (heure < 18) {
  console.log("Bon après-midi");
} else {
  console.log("Bonsoir");
}

// Operador ternário (condição ? se verdadeiro : se falso)
let statut = age >= 18 ? "Majeur" : "Mineur";

// Switch
let jour = "Mardi";

switch (jour) {
  case "Lundi":
    console.log("Début de semaine");
    break;
  case "Mardi":
  case "Mercredi":
  case "Jeudi":
    console.log("Milieu de semaine");
    break;
  case "Vendredi":
    console.log("Fin de semaine");
    break;
  default:
    console.log("Week-end");
}

Laços de repetição

Os laços permitem repetir ações:

// Laço for
for (let i = 0; i < 5; i++) {
  console.log(`Itération ${i}`);
}

// Laço while
let compteur = 0;
while (compteur < 5) {
  console.log(`Compteur: ${compteur}`);
  compteur++;
}

// Laço do...while
let j = 0;
do {
  console.log(`J vaut ${j}`);
  j++;
} while (j < 3);

// Percorrer um array
let couleurs = ["rouge", "vert", "bleu"];

// Método moderno
couleurs.forEach(couleur => {
  console.log(couleur);
});

// Com for...of
for (let couleur of couleurs) {
  console.log(couleur);
}

// Percorrer um objeto
let utilisateur = { nom: "Dupont", age: 30, ville: "Paris" };

// Com for...in
for (let propriete in utilisateur) {
  console.log(`${propriete}: ${utilisateur[propriete]}`);
}

Funções

As funções permitem agrupar código reutilizável:

// Declaração clássica
function saluer(nom) {
  return `Bonjour, ${nom} !`;
}

// Expressão de função
const direAuRevoir = function(nom) {
  return `Au revoir, ${nom} !`;
};

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

// Função com parâmetros padrão
function creerProfil(nom, age = 30, ville = "Paris") {
  return {
    nom,
    age,
    ville
  };
}

// Chamada de função
console.log(saluer("Marie"));  // "Bonjour, Marie !"
console.log(multiplier(4, 5)); // 20

Manipulação do DOM

JavaScript permite interagir com o HTML e o CSS por meio do DOM (Document Object Model):

// Selecionar elementos
const titre = document.getElementById("monTitre");
const paragraphes = document.querySelectorAll("p");
const bouton = document.querySelector(".btn-primary");

// Modificar o conteúdo
titre.textContent = "Nouveau titre";
titre.innerHTML = "Titre avec <em>emphase</em>";

// Modificar os estilos
titre.style.color = "blue";
titre.style.fontSize = "24px";

// Adicionar/remover classes
titre.classList.add("important");
titre.classList.remove("cache");
titre.classList.toggle("actif");

// Criar elementos
const nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Je suis un nouveau paragraphe.";
document.body.appendChild(nouveauParagraphe);

// Gerenciar eventos
bouton.addEventListener("click", function(event) {
  alert("Bouton cliqué !");
});

document.addEventListener("DOMContentLoaded", function() {
  console.log("Page entièrement chargée");
});

Assincronia em JavaScript

JavaScript lida com a assincronia por meio de vários mecanismos:

// Callbacks
function chargerDonnees(callback) {
  setTimeout(() => {
    const donnees = { id: 1, nom: "Produit" };
    callback(donnees);
  }, 1000);
}

chargerDonnees(function(resultat) {
  console.log(resultat);
});

// Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ id: 1, nom: "Produit" });
      } else {
        reject("Erreur lors du chargement");
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Async/await (ES8+)
async function chargerUtilisateur() {
  try {
    const response = await fetch('https://api.exemple.com/utilisateurs/1');
    const utilisateur = await response.json();
    console.log(utilisateur);
  } catch (error) {
    console.error("Erreur:", error);
  }
}

Conclusão

JavaScript é uma linguagem essencial para qualquer desenvolvedor web. Seus fundamentos são relativamente simples de aprender, mas sua profundidade e versatilidade fazem dela uma linguagem que pode levar tempo para ser dominada por completo.

Para ir além, explore:

• Os frameworks modernos (React, Vue, Angular)
• JavaScript no lado do servidor com Node.js
• Os novos recursos do ECMAScript (ES6+)
• A programação orientada a objetos em JavaScript
• As APIs web modernas (Fetch, WebSockets etc.)