Aller au contenu principal

Les bases de JavaScript

Notions théoriques​

Le langage JavaScript est un langage de programmation de scripts principalement utilisé dans les pages Web interactives.

Il est essentiel pour le développement Web.

Dans cette séance, nous allons couvrir les bases de JavaScript :

  1. Variables :

    En JavaScript, nous utilisons var, let et const pour déclarer des variables.

    var est la manière la plus ancienne de déclarer des variables, mais elle est moins utilisée maintenant car let et const offrent plus de contrôle.

  2. Types de données :

    JavaScript a 6 types de données primitives :

    • string (chaîne de caractères),
    • number (nombre),
    • boolean (booléen),
    • null (null),
    • undefined (indéfini)
    • et symbol (symbole).

  3. Opérateurs :

    JavaScript utilise des opérateurs arithmétiques comme +, -, *, / pour effectuer des opérations mathématiques.

    Il utilise également des opérateurs de comparaison comme ==, !=, <, >, <=, >=.

    L'opérateur ===

    En JavaScript, l'opérateur === est utilisé pour comparer deux valeurs pour l'égalité stricte.

    Cela signifie qu'il vérifie à la fois la valeur et le type de données des deux opérandes.

    Si la valeur et le type sont les mêmes, alors l'opérateur renvoie true, sinon il renvoie false.

    Voici quelques exemples :

    console.log(1 === 1); // true
    console.log('1' === 1); // false
    console.log(true === true); // true
    console.log(false === 0); // false
    console.log(null === undefined); // false

    Cependant, lorsqu'il s'agit de comparer des objets (y compris des tableaux et des fonctions), l'opérateur === vérifie si les 2 opérandes font référence au même objet, et non s'ils ont le même contenu.

    Par conséquent, 2 objets (ou tableaux) avec le même contenu ne sont pas considérés comme égaux s'ils ne font pas référence au même objet.

    console.log({a: 1, b: 2} === {a: 1, b: 2}); // false
    console.log([1, 2, 3] === [1, 2, 3]); // false

    let array1 = [1, 2, 3];
    let array2 = [1, 2, 3];
    let array3 = array1;

    console.log(array1 == array2); // false
    console.log(array1 === array2); // false
    console.log(array1 == array3); // true
    console.log(array1 === array3); // true

    Dans ces cas, vous devrez écrire une fonction de comparaison personnalisée ou utiliser une fonction de bibliothèque tierce pour effectuer une comparaison en profondeur des objets ou des tableaux.

  4. Structures de contrôle :

    JavaScript utilise des structures de contrôle comme if, else, switch, for, while pour contrôler le flux du programme.

Exemple pratique​

let nom = "John"; // Déclaration d'une variable
const age = 18; // Déclaration d'une constante

console.log(nom); // Affiche "John"
console.log(age); // Affiche 18

// Opérations
let somme = 10 + 20;
console.log(somme); // Affiche 30

// Structure de contrôle
if (age >= 18) {
  console.log("Vous êtes majeur.");
} else {
  console.log("Vous êtes mineur.");
}

Quelques méthodes à connaître​

  1. prompt() :

Cette méthode affiche une boîte de dialogue qui invite l'utilisateur à entrer une entrée. Par exemple, prompt("Quel est votre nom ?") affichera une boîte de dialogue demandant à l'utilisateur d'entrer son nom.

Si l'utilisateur clique sur 'Annuler' la valeur retournée est null.

  1. Date() :

Ce constructeur intégré de JavaScript crée un nouvel objet Date.

Cet objet représente un point précis dans le temps. Lorsque Date() est appelé sans arguments, il crée un nouvel objet Date représentant la date et l'heure actuelles.

  1. getFullYear() :

C'est une méthode de l'objet Date qui retourne l'année (4 chiffres) de la date spécifiée.

Par exemple, si nous avons un objet Date représentant la date actuelle stocké dans la variable dateCourante, dateCourante.getFullYear() retournera l'année actuelle.

Ces méthodes sont essentielles, car elles permettent :

  • d'interagir avec l'utilisateur (avec prompt()),
  • d'obtenir la date et l'heure actuelles (avec new Date())
  • et d'extraire l'année de la date actuelle (avec getFullYear()).

Test de mémorisation/compréhension​


Quelles instructions sont utilisées pour déclarer une variable en JavaScript ?


Quel est le type de données de 'Hello' en JavaScript ?


Quel opérateur est utilisé pour comparer deux valeurs (non strictement) en JavaScript ?


Quelle structure de contrôle utilisez-vous pour tester plusieurs conditions ?


Quelle est la valeur de somme après l'exécution de ce code : `let somme = 10 + 20;` ?


Quelle est la valeur retournée par la fonction prompt() si l'utilisateur clique sur 'Annuler' ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, vous allez créer un programme JavaScript qui demande à l'utilisateur son année de naissance et affiche son âge.

Vous utiliserez les notions que vous avez appris dans cette séance.

let anneeDeNaissance = prompt("Quelle est votre année de naissance ?");
...
console.log("Vous avez " + age + " ans.");
Une solution possible
let anneeDeNaissance = prompt("Quelle est votre année de naissance ?");
let dateCourante = new Date();
let anneeCourante = dateCourante.getFullYear();
let age = anneeCourante - anneeDeNaissance;

console.log("Vous avez " + age + " ans.");