أساسيات JavaScript

تُعد JavaScript لغة البرمجة الأولى للويب بلا منازع. فهي موجودة في جميع المتصفحات الحديثة، وتتيح إنشاء مواقع ويب تفاعلية وتطبيقات ديناميكية.

لماذا نتعلم JavaScript؟

• منتشرة في كل مكان: تُستخدم في أكثر من 97% من مواقع الويب
• متعددة الاستخدامات: الواجهة الأمامية (Front-end)، والواجهة الخلفية (Node.js)، وتطبيقات الجوال، وتطبيقات سطح المكتب…
• منظومة غنية: آلاف المكتبات وأطر العمل (React وVue وAngular…)
• مجتمع نشط: واحد من أكبر مجتمعات المطورين في العالم

أساسيات JavaScript

المتغيرات وأنواع البيانات

توفر JavaScript عدة طرق لتعريف المتغيرات:

// Variables modifiables
let age = 25;
let nom = "Alice";

// Constantes (non modifiables)
const PI = 3.14159;

// À éviter (ancienne méthode)
var ancienneVariable = "Déprécié";

أنواع البيانات الرئيسية هي:

// Chaînes de caractères
let message = "Bonjour le monde !";

// Nombres
let entier = 42;
let decimal = 3.14;

// Booléens
let estVrai = true;
let estFaux = false;

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

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

// Valeurs spéciales
let valeurVide = null;
let valeurNonDefinie = undefined;

المعاملات

توفر JavaScript العديد من المعاملات (Operators) للتعامل مع البيانات:

// Opérateurs arithmétiques
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 (reste de la division)

// Opérateurs de comparaison
let estEgal = 5 == "5";           // true (égalité simple)
let estStrictementEgal = 5 === 5; // true (égalité stricte, type inclus)
let estDifferent = 5 != "6";      // true
let estSuperieur = 10 > 5;        // true

// Opérateurs logiques
let et = true && false;  // false
let ou = true || false;  // true
let non = !true;         // false

الهياكل الشرطية

تتيح الشروط تنفيذ الشيفرة بحسب ظروف معينة:

// 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");
}

// Opérateur ternaire (condition ? si vrai : si faux)
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");
}

الحلقات التكرارية

تتيح الحلقات التكرارية تكرار تنفيذ الإجراءات:

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

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

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

// Parcourir un tableau
let couleurs = ["rouge", "vert", "bleu"];

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

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

// Parcourir un objet
let utilisateur = { nom: "Dupont", age: 30, ville: "Paris" };

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

الدوال

تتيح الدوال تجميع الشيفرة القابلة لإعادة الاستخدام:

// Déclaration classique
function saluer(nom) {
  return `Bonjour, ${nom} !`;
}

// Expression de fonction
const direAuRevoir = function(nom) {
  return `Au revoir, ${nom} !`;
};

// Fonction fléchée (ES6+)
const multiplier = (a, b) => a * b;

// Fonction avec paramètres par défaut
function creerProfil(nom, age = 30, ville = "Paris") {
  return {
    nom,
    age,
    ville
  };
}

// Appel de fonction
console.log(saluer("Marie"));  // "Bonjour, Marie !"
console.log(multiplier(4, 5)); // 20

التعامل مع DOM

تتيح JavaScript التفاعل مع HTML وCSS عبر DOM (نموذج كائنات المستند، Document Object Model):

// Sélectionner des éléments
const titre = document.getElementById("monTitre");
const paragraphes = document.querySelectorAll("p");
const bouton = document.querySelector(".btn-primary");

// Modifier le contenu
titre.textContent = "Nouveau titre";
titre.innerHTML = "Titre avec <em>emphase</em>";

// Modifier les styles
titre.style.color = "blue";
titre.style.fontSize = "24px";

// Ajouter/supprimer des classes
titre.classList.add("important");
titre.classList.remove("cache");
titre.classList.toggle("actif");

// Créer des éléments
const nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Je suis un nouveau paragraphe.";
document.body.appendChild(nouveauParagraphe);

// Gérer les événements
bouton.addEventListener("click", function(event) {
  alert("Bouton cliqué !");
});

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

البرمجة غير المتزامنة في JavaScript

تتعامل JavaScript مع البرمجة غير المتزامنة عبر عدة آليات:

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

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

// Promesses
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);
  }
}

الخلاصة

تُعد JavaScript لغة أساسية لكل مطور ويب. أساسياتها سهلة التعلم نسبيًا، لكن عمقها وتعدد استخداماتها يجعلان إتقانها الكامل يتطلب وقتًا.

لمواصلة التعلم، استكشف:

• أطر العمل الحديثة (React وVue وAngular)
• JavaScript على جانب الخادم باستخدام Node.js
• الميزات الجديدة في ECMAScript (ES6+)
• البرمجة الكائنية التوجه في JavaScript
• واجهات الويب البرمجية الحديثة (Fetch وWebSockets وغيرها)