Partie 2 - Fondamentaux de JavaScript

Cette section couvre les notions fondamentales de JavaScript, des variables et opérateurs aux structures de contrôle, fonctions, objets, et la manipulation de JSON.

1. Concepts & Définitions

Chapitre 1 : Syntaxe et Notions Fondamentales

• JavaScript (JS) : Un langage de scripts qui peut être incorporé aux balises HTML, exécuté par le navigateur pour améliorer la présentation et l'interactivité. Il offre des "gestionnaires d'événement" pour réagir aux actions de l'utilisateur.
• Identifiant : Le nom d'une variable, qui doit être unique. Peut être court (x, y) ou descriptif (note, total, NomComplet).
• Langage faiblement typé : Le type d'une variable est défini au moment de l'exécution.
• Déclaration explicite : Déclarer une variable en utilisant un mot-clé comme var.
• Déclaration implicite : Déclarer une variable en lui affectant une valeur sans utiliser de mot-clé.
• Portée (Scope) : Détermine l'accessibilité (visibilité) d'une variable.
  • Portée du bloc (Block scope) : Variable accessible uniquement à l'intérieur du bloc {} où elle est déclarée (avec let ou const).
  • Portée locale (Function scope) : Variable accessible uniquement à l'intérieur de la fonction où elle est déclarée (avec var).
  • Portée globale (Global scope) : Variable déclarée en dehors de toute fonction, accessible de n'importe où dans le programme.
• Opérandes : Les valeurs (numériques ou chaînes) sur lesquelles les opérateurs de comparaison agissent.
• Types de variables :
  • Types primitifs : Données simples et uniques sans propriétés ni méthodes supplémentaires (String, Number, Boolean, Undefined).
  • Types structurels (ou complexes) : Object, Array, Date, Function.
• Undefined vs Null : undefined et null sont de valeur égale mais de type différent. undefined est une valeur prise par les variables non initialisées. null est une valeur d'absence d'objet intentionnelle.

Chapitre 2 : Structures de Contrôle

• Structures alternatives : Instructions qui exécutent des blocs de code différents selon qu'une condition est vraie ou fausse (if, else, else if, switch).
• Structures itératives (Boucles) : Instructions qui parcourent et répètent un bloc de code (for, for/in, for/of, while, do/while).

Chapitre 3 : Fonctions

• Fonction : Un bloc de code organisé, réutilisable, créé pour effectuer une action unique. Offre une meilleure modularité et un haut degré de réutilisation.
• Méthodes : Fonctions propres à JavaScript, associées à un objet (ex: alert() de l'objet window).
• Fonctions fléchées (Expressions lambdas) : Fonctions avec une syntaxe compacte (=>), plus rapides à écrire.
• Fonction de rappel (Callback) : Une fonction passée en paramètre d'une autre fonction, invoquée à l'intérieur de la fonction externe pour exécuter des instructions précises.
• Promesse (Promise) : Un objet JavaScript qui contient à la fois le code producteur et les appels au code consommateur. Il représente une valeur qui sera disponible dans le futur, adaptée à la gestion des opérations asynchrones.
• États d'une promesse :
  • En attente (Pending) : État initial, résultat indéfini.
  • Accompli (Fulfilled) : L'opération a réussi, le résultat est une valeur.
  • Rejeté (Rejected) : L'opération a échoué, le résultat est une erreur.
• Exception : Une erreur qui se produit durant l'exécution. JavaScript arrête le code et crée un objet d'erreur. On dit qu'une erreur est "générée" ou "levée".

Chapitre 4 : Objets

• Objet : Une collection de propriétés, où chaque propriété est une association entre un nom (ou clé) et une valeur.
• Syntaxe littérale : Créer un objet en définissant ses propriétés à l'intérieur d'accolades {}.
• Constructeur : Une fonction spéciale pour créer et initialiser des objets. Permet d'instancier un objet dans différentes variables.
• Méthode (dans un objet) : Une propriété dont la valeur est une fonction. Définit un comportement (action) pour l'objet.
• Tableau (Array) : Un objet global qui est une liste d'éléments indexés.
• JSON (JavaScript Object Notation) : Un format d'échange de données facile à utiliser par les humains et les machines, basé sur la notation d'objet JavaScript.
• Analyse syntaxique (parse) : Convertir une chaîne de caractères (JSON) en un objet natif JavaScript.
• Linéarisation (stringification) : Convertir un objet natif JavaScript en une chaîne de caractères (JSON).

2. Syntaxes & Codes

Chapitre 1 : Syntaxe et Notions Fondamentales

• Intégration JS dans HTML :
  • Interne : <script language="JavaScript"> /* code js */ </script>
  • Externe : <script language="javascript" src="monScript.js"></script>
  • Pseudo-URL : <a href="JavaScript:window.alert('Message');">...</a>
• Déclaration de variables :
  • var nom_variable;
  • let nom_variable;
  • const nom_variable = valeur;
• Opérateurs de type :
  • typeof(variable)
  • objet instanceof Classe
• Affichage :
  • document.write(valeur);
  • window.alert(valeur);
  • console.log(valeur);
  • window.print();
• Saisie :
  • prompt("Question", "valeur par défaut");
  • document.getElementById('id_element').value;

Chapitre 2 : Structures de Contrôle

• Condition if :

  if (condition) {
    // bloc d'instructions à executer si la condition est vraie
  }
  

• Condition if-else :

  if (condition) {
    // bloc d'instructions si vrai
  } else {
    // bloc d'instructions si faux
  }
  

• Condition if-else if-else :

  if (condition1) {
    // bloc 1
  } else if (condition2) {
    // bloc 2
  } else {
    // bloc 3
  }
  

• Structure switch :

  switch(expression) {
    case x:
      // code block
      break;
    case y:
      // code block
      break;
    default:
      // code block
  }
  

• Boucle for :

  for (let i = 0; i < 5; i++) {
    // code à répéter
  }
  

• Boucle for...in (pour les propriétés d'un objet) :

  for (let cle in objet) {
    // code utilisant objet[cle]
  }
  

• Boucle for...of (pour les valeurs d'un itérable) :

  for (let valeur of iterable) {
    // code utilisant valeur
  }
  

• Instructions de contrôle de boucle :
  • break; (sort de la boucle)
  • continue; (passe à l'itération suivante)

Chapitre 3 : Fonctions

• Déclaration de fonction :

  function nomFonction(parametre1, parametre2) {
    // Code de la fonction
    return valeur;
  }
  

• Expression lambda (fonction fléchée) :

  const nomVariable = (param1, param2) => {
    // code
    return valeur;
  };
  

• Création de Promesse :

  let maPromesse = new Promise(function(resolve, reject) {
    // code asynchrone
    if (/* succès */) {
      resolve(resultat);
    } else {
      reject(erreur);
    }
  });
  

• Consommation de Promesse :

  maPromesse.then(
    function(valeur) { /* code si succès */ },
    function(erreur) { /* code si échec */ }
  );
  
  maPromesse
    .then(onFulfilled)
    .catch(onRejected)
    .finally(onFinally);
  

• Gestion des exceptions :

  try {
    // Bloc du code à exécuter
  }
  catch(err) {
    // Bloc du code qui gère l’exception
  }
  finally {
    // Bloc exécuté dans tous les cas
  }
  

• Lever une exception :
  throw "Message d'erreur";

Chapitre 4 : Objets

• Création d'objet (littéral) :

  const monObjet = {
    propriete1: valeur1,
    methode1: function() { /* code */ }
  };
  

• Création d'objet (constructeur) :

  function MonObjet(param1) {
    this.propriete1 = param1;
  }
  var instance = new MonObjet(valeur);
  

• Manipulation JSON :
  • JSON.parse(chaineJSON);
  • JSON.stringify(objetJS);
• Création de tableau :
  • let tableau = new Array();
  • let tableau = [];
• Expression régulière :
  • let expr = /ofppt/;
  • let expr = new RegExp('ofppt');

3. Attributs & Propriétés

Chapitre 1 : Syntaxe et Notions Fondamentales

• Mots-clés de déclaration :
  • var : portée de fonction (function scope).
  • let : portée de bloc (block scope).
  • const : portée de bloc, variable constante (ne peut être réassignée).
• Valeur spéciale :
  • undefined : valeur d'une variable non initialisée.
• Opérateurs arithmétiques : +, -, *, ** (puissance), /, % (modulo), ++ (incrémentation), -- (décrémentation).
• Opérateurs d'affectation : =, +=, -=, *=, /=, %=, **=.
• Opérateurs de comparaison :
  • == : Égal à (valeur).
  • === : Égal à (valeur ET type).
  • != : Différent de (valeur).
  • !== : Différent de (valeur OU type).
  • >, <, >=, <=.
• Opérateurs logiques : && (ET), || (OU), ! (NON).
• Opérateurs bit-à-bit : & (ET), | (OU), ~ (NON), ^ (XOR), << (décalage gauche), >> (décalage droite).
• Méthodes de conversion de date (extrait) : getDate(), getDay(), getFullYear(), getHours(), getMinutes(), getSeconds(), getTime().

Chapitre 3 : Fonctions

• Propriétés de l'objet error :
  • name : Le nom de l'erreur.
  • message : Le message descriptif de l'erreur.
• Noms d'erreur (error.name) :
  • EvalError : Erreur dans la fonction eval().
  • RangeError : Nombre hors limite.
  • ReferenceError : Référence inconnue.
  • SyntaxError : Erreur de syntaxe.
  • TypeError : Une erreur de type s'est produite.
  • URIError : URI incorrecte.

Chapitre 4 : Objets

• Propriété de tableau :
  • length : Retourne la taille du tableau.
• Méthodes de tableau (extrait) :
  • Ajout : push() (fin), unshift() (début).
  • Suppression : pop() (fin), shift() (début), splice(index, nb_elements).
  • Tri : sort(), reverse().
  • Recherche : indexOf(), findIndex().
• Méthodes de chaîne (String) : length, charAt(), substring(x,y), toLowerCase(), toUpperCase(), indexOf(), startsWith(), endsWith(), split().
• Méthodes de l'objet Math (statiques) : abs(), ceil(), floor(), round(), random(), max(), min(), pow(), sqrt(), sin(), cos(), tan().
• Méthodes de l'objet window : alert(), confirm(), prompt(), open(), setTimeout(), clearTimeout(), setInterval(), clearInterval().
• Modificateurs d'expressions régulières :
  • i : recherche insensible à la casse.
  • g : recherche globale (ne s'arrête pas à la première correspondance).
  • m : recherche multiligne.
• Quantificateurs d'expressions régulières :
  • n+ : Au moins un n.
  • n* : Zéro ou plusieurs n.
  • n? : Zéro ou un n.
• Métacaractères d'expressions régulières :
  • \d : un chiffre.
  • \s : un caractère d'espacement.
  • \b : délimiteur de mot.
  • \uxxxx : caractère Unicode.

4. Exemples Pratiques (Codes complets du PDF)

Tous les exemples de code sont reproduits fidèlement.

Chapitre 1

• Déclaration de variables

  // Booléens
  var test=new Boolean(true);
  let test = true;
  
  // Chaîne
  var chaine = "Bonjour";
  
  // Nombres
  var entier = 60; //un entier
  let pi = 3.14; //un nombre réel
  
  // Multiple
  var variable3 = 2, variable4 = "mon texte d’initialisation";
  
  // Sans initialisation
  // Une variable déclarée sans valeur aura la valeur undefined.
  

• Constantes

  const PI = 3.141592653589793;
  PI = 3.14;       // Erreur
  PI = PI + 10;    // Erreur
  
  const PI;
  PI = 3.14159265359; // Incorrect
  

• Portée des variables

  // Block scope avec let
  { let x = 2; }
  // x n'est pas accessible ici
  
  // Block scope avec var
  { var x = 2; }
  // x est accessible ici
  
  // Function scope
  function Test() {
    var x = "test1";
    let y = "test2";
    const z = "test3";
  }
  // x, y et z ne sont pas accessibles en dehors de la fonction
  

• Concaténation

  let texte1 = "OFPPT";
  texte1 += " ";
  let texte2 = "en force";
  let texte3 = texte1 + texte2;
  // Output : texte3 = "OFPPT en force"
  
  let x = 1 + 1;       // x=2
  let y = "5" + 1;     // y="51"
  

• Saisie via prompt

  var prenom = prompt("Quel est votre prénom?");
  document.write(prenom);
  

• Saisie via formulaire

  <!DOCTYPE html>
  <html>
  <body>
    <input type="text" id="prenom">
    <button onclick="alert(document.getElementById('prenom').value)">Afficher</button>
  </body>
  </html>
  

• Conversion de type

  // String to Number
  Number("3.14")    // retourne 3.14
  Number(" ")       // retourne 0
  Number("")        // retourne 0
  Number("99 88")   // retourne NaN
  
  // Unary +
  let y = "5";      // y est un string
  let x = + y;      // x est un number
  
  // Number to String
  String(123)       // retourne un string
  (123).toString()  // retourne un string
  

Chapitre 2

• if-else if-else

  if (note >= 10) {
    document.write("Réussi")
  } else if (note > 8) {
    document.write("rattrapage")
  } else {
    document.write("Echoué")
  }
  

• switch

  switch (new Date().getDay()) {
    case 0: day = "Sunday"; break;
    case 6: day = "Saturday";
  }
  

• Boucles

  // for
  for (let i = 0; i < 5; i++) {
    text += "Le nombre est " + i + "<br>";
  }
  
  // for in
  const person = {fname:"Hassan", lname:"FILALI", age:25};
  let text = "";
  for (let x in person) {
    text += person[x];
  }
  
  // for of
  const langages = ["Java", "Python", "C++"];
  let text = "";
  for (let x of langages) {
    text += x;
  }
  

Chapitre 3

• Fonction avec retour

  let x = myFunction(4, 3); // La function est appelée, la valeur retournée est affectée à x
  function myFunction(a, b) {
    return a * b; // La function retourne le produit de a et b
  }
  

• Fonction fléchée

  const variable = (a,b) => {
    return a*b;
  }
  console.log(variable(2,3)) // 6
  

• Callback

  function affichage(s) {
    console.log(s);
  }
  function calcul(num1, num2, myCallback) {
    let somme = num1 + num2;
    myCallback(somme);
  }
  calcul(1, 5, affichage);
  

• Création et consommation de promesse

  function makePromise(completed){
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        if (completed) {
          resolve("Donnée récupérée");
        } else {
          reject("Je n'ai pas pu récupérer la donnée");
        }
      }, 3000);
    });
  }
  
  let getData = makePromise(true);
  getData.then(
    success => console.log(success),
    reason => console.log(reason)
  );
  

• Gestion d'exception

  let x = Number(prompt("Donnez un numéro entre 5 et 10"));
  try {
    if(x == "") throw "Vide";
    if(isNaN(x)) throw "Ce n’est pas un numéro";
    x = Number(x);
    if(x < 5) throw "Trop petit";
    if(x > 10) throw "Trop grand";
  }
  catch(err) {
    console.log(err);
  }
  

Chapitre 4

• Objet littéral

  const telephone = {
    marque: 'SmartF22',
    prix: 400,
    stock: 200,
    VerifierStock: function() {
      if (this.stock > 0) {return true;}
      else { return false; }
    }
  }
  console.log(telephone.VerifierStock()); //True
  

• Objet avec constructeur

  function Telephone(n, p, s, r) {
    this.nom = n;
    this.prix = p;
    this.stock = s;
    this.ref = r;
    this.VerifierStock = function() {
      if (this.stock > 0) {return true;}
      else {return false;}
    }
  }
  var t2 = new Telephone("t2", 200, 0, "Mi Max");
  console.log(t2.VerifierStock()); //False
  

• Manipulation de tableau

  let tableau = ['A', 'B', 'C'];
  tableau.push('D'); // ['A', 'B', 'C', 'D']
  tableau.shift();   // ['B', 'C', 'D']
  console.log(tableau.indexOf('C')); // 1
  

• Manipulation JSON

  // Création d'un objet Javascript
  var jsObject = {nom:"Saidi", prenom:"ali"};
  // Convertir javascript vers JSON
  var jsonString = JSON.stringify(jsObject);
  document.write(jsonString); // {"nom":"Saidi","prenom":"ali"}
  
  // Création d'un string JSON
  var jsonData = '{"nom":"Saidi", "prenom":"Ali"}';
  // Convertir JSON vers Javascript
  var jsObject = JSON.parse(jsonData);
  document.write(jsObject.nom); // Saidi
  

5. Spécifications Techniques

• Règles des identifiants : Doit contenir des lettres, chiffres, _ ou $. Doit commencer par une lettre, $ ou _. Sensible à la casse. Ne peut pas être un mot réservé.
• Différence == vs === : == compare uniquement les valeurs (avec conversion de type si nécessaire). === compare les valeurs ET les types, sans conversion.
• Fonctionnement de switch : Évalue une expression, compare le résultat avec les valeurs des case. L'instruction break est nécessaire pour sortir du bloc switch après l'exécution d'un case. Sans break, l'exécution continue aux case suivants.
• Fonctionnement de prompt : Renvoie la valeur saisie par l'utilisateur sous forme de chaîne. Si l'utilisateur clique sur "Annuler", la fonction renvoie null.
• Conversion Number() : Les chaînes vides ("" ou " ") sont converties en 0. Les chaînes non numériques (ex: "99 88") sont converties en NaN (Not a Number).
• Méthodes de l'objet Math : Ce sont des méthodes statiques, elles sont appelées directement sur l'objet Math (ex: Math.random()) et non sur une instance.
• Syntaxe JSON : Les clés doivent être des chaînes de caractères entre guillemets doubles. Les chaînes de valeur doivent aussi être entre guillemets doubles. Pas de virgule finale autorisée après le dernier élément d'un objet ou d'un tableau.

6. Points Critiques (Remarques & Attentions du PDF)

• Sensibilité à la casse : JavaScript est "case sensitive". y et Y sont deux variables différentes.
• Guillemets : Les chaînes de caractères sont écrites entre guillemets simples ou doubles. Les nombres sont écrits sans guillemets.
• Appel de Callback : Ne pas utiliser les parenthèses dans l'appel de la fonction de callback lorsqu'elle est passée en argument (ex: calcul(1, 5, affichage) et non calcul(1, 5, affichage())).
• Création d'élément DOM : L'élément créé par la méthode createElement() n'est pas automatiquement attaché au document. Il faut utiliser une méthode comme append() pour l'insérer dans l'arbre DOM.
• for...in vs for...of : for...in itère sur les clés/index (propriétés) d'un objet. for...of itère sur les valeurs d'un objet itérable (comme un tableau).
• document.write() : À utiliser principalement pour des tests. Si elle est appelée après le chargement complet du document HTML, elle supprime tout le contenu existant.
• const : Une variable const ne peut pas être réassignée, mais si c'est un objet ou un tableau, son contenu (propriétés ou éléments) peut être modifié.
• throw : L'instruction throw permet de créer des erreurs personnalisées. L'exception levée peut être une chaîne, un nombre, un booléen ou un objet.