Introduction au Javascript

Cette section est un résumé de notions que vous avez vues dans le cours de Logique de programmation.

Les bases

• JavaScript utilise une syntaxe similaire au C, C++, Java, etc.

• On ne n'écrit qu'une seule instruction par ligne de code.

• JavaScript est un langage sensible à la casse et fait donc une distinction entre un élément nommé "toto" et un autre nommé "Toto".

let toto = 5 ;
typeof Toto; 

//Résultat: undefined, car Toto est différent de toto

• Les règles d'indentation de code s'appliquent : toute instruction apparaissant à l'intérieur d'accolades doit être indentée d'une tabulation.

• Une ligne de commentaire simple débute par deux barres obliques // Commentaire

• Un commentaire sur plusieurs lignes est englobé d'une barre oblique et d'une étoile /* Commentaire */

• Plusieurs mots sont réservés et ne doivent pas être utilisés pour nommer des éléments commes des variables.

Déclaration de variables

Les variables sont utilisées comme des noms symboliques pour faire appel à des valeurs placées dans la mémoire de l'ordinateur.

Trois mots-clés existent : var, let, const.

• var est obsolète et à éviter, à moins de besoin de compatibilité ou d'accessibilité dans le navigateur.
• let : variable modifiable, limitée au bloc où elle est déclarée, ou au fichier dans lequel elle est déclarée, si globale.
• const : valeur constante, obligatoire à l’initialisation.

🎯 Bonne pratique en 2025 : utiliser let pour les variables temporaires et const pour les valeurs fixes.

let compteur = 0;
const PI = 3.14159;

Règles à suivre

1. Toujours déclarer les variables, avec un nom significatif
2. Toujours utiliser const si la valeur ne doit pas changer
3. Utiliser let si const ne peut être utilisé
4. Jamais utiliser var si const ou let peut être utilisé

Nommer les variables

• Toujours commencer par une minuscule.
• Utiliser des noms significatifs et appliquer le camelCase.

Exemple :

let nomClient = "Jean";

Au lieu de :

let a = "Jean";

Que représente "a" ??? Un prénom ??? Un nom de famille ??? Le mot anglais pour "denim" ??? 🤔

Initialiser les variables

Initialiser une variable veut dire : lui donner une valeur par défaut, dès sa création.

Une variable non initialisée reçoit automatiquement la valeur spéciale undefined.

let score;
console.log(score); // affiche "undefined"

Si tu essaies ensuite de faire un calcul ou une comparaison avec cette variable, ton programme risque de produire un résultat inattendu ou une erreur.

👉 Meilleure pratique : initialiser dès la déclaration

let score=0;

🧠 En résumé :

• Une variable non initialisée = undefined
• Une variable initialisée = valeur connue et sûre
• C’est une bonne habitude pour écrire du code propre et fiable 💪

Global VS local

Variable globale : déclarée à l'extérieur des fonctions

• Permet un accès facile à toutes les fonctions
• Existe et conserve sa valeur tout le temps de l'exécution du script (tant qu'on reste sur la même page web)

Variable locale : déclarée dans une fonction

• Libère la mémoire rapidement
• Existe uniquement le temps de l'exécution de la fonction puis est supprimée

// Variable globale : accessible partout dans le code
let messageGlobal = "Bonjour depuis l'extérieur !";

function direBonjour() {
  // Variable locale : existe seulement à l'intérieur de la fonction
  let messageLocal = "Bonjour depuis la fonction !";
  console.log(messageLocal); //-> "Bonjour depuis la fonction !"
  console.log(messageGlobal); //-> "Bonjour depuis l'extérieur !"
}

console.log(messageGlobal); //-> "Bonjour depuis l'extérieur !"
console.log(messageLocal); //-> erreur : messageLocal is undefined

Opérateurs de base

En plus des opérateurs arithmétiques standards tels que l'addition (+), la soustraction (-), la multiplication (*) et la division (/), il existe aussi plusieurs autres opérateurs possibles en Javascript.

Voici un tableau de quelques opérateurs qui pourront être utiles pour le cours d'Interfaces web (une explication supplémentaire sera donnée en classe):

Nom	Description	Exemple
Affectation (=)	Donne une valeur à une variable.	maVar = 10
Affectation après addition (+=)	Additionne une valeur à une variable, puis renvoie le résultat dans la variable	x += y Même résultat que x = x + y
Affectation après soustraction (-=)	Soustrait une valeur d'une variable, puis renvoie le résultat dans la variable	x -= y Même résultat que x = x - y
Modulo (%)	Retourne le reste entier de la division	x = 5 % 2 (x prendra la valeur 1)
Concaténation (+)	Ajoute une chaîne de caractères à la suite d'une autre	var x = "alpha"; var y = "bet"; z = x + y; Résultat = "alphabet"
Littéraux (${ })	Lecture du contenu d'une variable pour l'ajouter à une chaîne.	const fruit = "pommes"; let quantite = 5; let commande = Vous allez commander ${quantite} ${fruit}.;
Égalité (==)	Retourne vrai (true) si les deux valeurs comparées sont égales, après conversion en valeurs de même type	maVar1 == maVar2
Inégalité (!=)	Retourne vrai (true) si les deux valeurs comparées sont différentes	maVar1 != maVar2
Supériorité (>)	Retourne vrai (true) si la valeur gauche est suppérieure à la valeur droite	maVar1 > maVar2
Infériorité (<)	Retourne vrai (true) si la valeur gauche est inférieure à la valeur droite	maVar1 < maVar2
Inférieur ou égal (<=) et Supérieur ou égal (>=)	Retourne vrai si la valeur de gauche correspond à l'opérateur utilisé	maVar1 >= maVar2
Condition (if)	Évalue si une expression est vraie	if(maVar1 == maVar2)
Boucle (for)	Exécute un traitement en boucle, un nombre de fois indiqué	for(let i=0; i<10; i++)
Boucle (while)	Exécute un traitement en boucle, jusqu'à l'atteinte d'une condition	while(compteur<=10)

Pour une liste complète des opérateurs, voir la rubrique d'aide sur MDN : Expressions et opérateurs.

Déclaration de fonctions

Définition: fonction

Une fonction est un bloc de code qui s'exécute uniquement lorsque nécessaire (lorsqu'appelé).

• Une fonction doit être nommée avec un verbe d’abord, suivi d’un complément en camelCase.
• Le mot clé function doit toujours débuter la création de la fonction
• Le nom de la fonction contient toujours des parenthèses à la fin (même sans paramètre)
• JAMAIS d'accent ni de caractère spécial
• Un fonction a toujours des accolades { } qui englobe le code associé à la fonction

Exemple :

function afficherMessage() {
  console.log("Bienvenue !");
}

function calculerSomme(premierNombre, deuxiemeNombre) {
  return premierNombre + deuxiemeNombre;
}

👉 Cette convention rend le code plus lisible et explicite.

Appeler des fonctions

Une fonction peut être appelée :

• dans le script

  function direBonjour() {
      console.log("Bonjour !");
  }
  
  direBonjour(); // Appel direct dans le script
  

• à partir d'une autre fonction

  function direBonjour() {
      console.log("Bonjour !");
  
  }
  
  function saluer() {
      direBonjour(); // Appel d'une fonction à l'intérieur d'une autre
  }
  
  saluer(); // Lance la première fonction, qui en appelle une autre
  

• à partir du HTML

  <button onclick="direBonjour()">Dire bonjour !</button>
  

• sur un événement déclaré (eventListener)

  <button id="monBouton">Clique-moi</button>
  

  function direBonjour() {
      alert("Bonjour avec un eventListener !");
  }
  
  document.getElementById("monBouton").addEventListener("click", direBonjour);
  

Afficher des valeurs

Pour afficher des informations à l'écran à partir de Javascript :

• Dans la console (pour tester et déboguer)

  let score = 10;
  
  console.log(`Le score est :${score}`);
  

• Dans une fenêtre d'alerte (message d'alerte pour l'utilisateur)

  let nom = "Mia";
  
  //Afficher une fenêtre à l'écran
  alert("Bonjour " + nom + " !");
  

• Dans le HTML (sur la page web)

  <p id="message"></p>
  

  let age = 18;
  
  document.getElementById("message").innerText = "Tu as " + age + " ans.";
  

• Dans un champ de formulaire

  <input type="number" id="age">
  

  let age = 18;
  
  document.getElementById("age").value = age;