Aller au contenu principal

Notions de base

Javacript dans le Navigateur​

Tous les navigateurs web associent un environnement Javascript unique et indépendant à chacune des pages web qu'ils affichent. À chaque fois que le navigateur charge une page, il crée un nouvel environnement Javascript qui est dédié à cette page. Cet environnement dispose de sa propre mémoire et de son propre moteur d'exécution.

Les outils du développeur intégrés dans les navigateurs web proposent un accès à cet environnement Javascript. Grâce à la console, il est même possible d'exécuter du code Javascript dans l'environnement associé à la page web courante. Par exemple, comme dans la figure ci-dessous, on peut ouvrir la console Javascript du navigateur et exécuter du code : (1+1, let message = 'je peux exécuter du code' et console.log(message)). Les instructions qui ont été exécutées ici sont des instructions Javascript classiques. Une variable a été créée (la variable message). Elle reste accessible dans l'environnement tant qu'une autre page web n'est pas rechargée. En effet le chargement d'une nouvelle page aura pour conséquence de construire un environnement neuf dans lequel cette variable n'existera plus.

L'environnement Javascript associé à une page web est cloisonné à la page pour laquelle il a été créé. De fait, il n'a pas accès aux environnements des autres pages qui seraient ouvertes et affichées par le navigateur. Il n'a pas non plus accès au contenu du disque dur ou à d'autres ressources de l'ordinateur. Enfin, pour garantir un haut niveau de sécurité, l'environnement permet uniquement d'envoyer des requêtes HTTP vers le serveur qui a fourni la page actuelle ou vers les ressources référencées par cette page actuelle.

BoardGame Faites un clic droit dans le navigateur et inspecter. Puis cliquez sur l'onglet console

Quelques basiques​

Le JS est proche du c et autres c-like (c++, java, ...).
  • Identifiants : premier caractère doit être un caractère, un _ ou un $ et ne pas être un mot réservé
  • structures de contrôle : for, if, break, continue
  • commentaires : // ou /**/
  • utilisation du ; en fin d’instruction non obligatoire, mais recommandée
  • utilisation des {} pour définir les blocs d’instructions

Types de bases​

les types en JS
  • types primitifs :
    • string : à ne pas confondre avec String
    • boolean,
    • number : pas de différences comme en Java (à l'exception de bigint)
    • function
    • symbol
    • undefined : type primitif pour indiquer que la variable n'a pas de type connu
    • null,
  • tout le reste est object :
    • String
    • Array
    • Date
    • vos propres objets :
    const personne = {
        nom: 'John',
        age: 30
    }
    • et plein d'autres
Testez !
Copier chaque ligne de ce code dans votre console
let message = "hi";
typeof(message);
message = 100; // legal mais non recommandé car le type est changé en "number"
typeof(message);
let val;
typeof(val);

Comme en java, tous les opérateurs que vous connaissez sont disponibles (+, >, >=, ...). Le JS est un langage faiblement typé. Cela signifie que les variables ne sont pas strictement associées à un type de données particulier et que le langage est souple quant à la façon dont les types de données sont manipulés. Pour intégrer des contraintes de types entre variables, il existe d'autres opérateurs.

important

Le JS est un langage faiblement typé. En JavaScript, une variable peut contenir n'importe quel type de données, et son type peut changer dynamiquement pendant l'exécution du programme. Cela a beaucoup d'avantages, mais il faut bien comprendre la mécanique du changement de type. Cela peut entraîner des erreurs difficiles à repérer.

let a=3;
let b="3";
console.log(a==b);
console.log(a===b);

a = true;
b = 1;
console.log(a == b);
console.log(a === b);

a = 10;
b = "10";
console.log(a != b);
console.log(a !== b);


const num1 = 10;
const num2 = "10";
console.log(num1 > num2);
//pas d'inégalité typée (donc attention !)
attention aux types

L'année prochaine vous ferez du JS typé basé sur typeScript. Ce type de code ne sera plus possible.

let a=3;
let b="3";
console.log(a==b);

Cette année il faut donc systématiquement prendre l'habitude de tester le valeur et le type.

var et let/const​

En JavaScript, var, let et const sont utilisés pour déclarer des variables, mais ils ont des comportements légèrement différents en termes de portée (scope).

Portée (Scope) :

Avec var, la portée d'une variable est fonctionnelle. Cela signifie que la variable est définie dans toute la fonction dans laquelle elle est déclarée, même si elle est déclarée à l'intérieur d'un bloc (comme une boucle ou une condition). Avec let ou const, la portée est limitée au bloc dans lequel la variable est déclarée (portée de bloc).

Pour plus de détail vous pouvez lire ce Post.

Testez !
Copier ce code dans votre console
function exempleVarLet() {
  if (true) {
    var x = 10;
    let y = 20;
    console.log(x);  // Affichera 10 (portée fonctionnelle)
    console.log(y);  // Affichera 20 (portée de bloc)
  }

  console.log(x);  // Affichera 10 (accessible en dehors du bloc)
  // console.log(y);  // Cela provoquerait une erreur, car y n'est pas défini ici
}
exempleVarLet();

La seule différence entre let et const est qu'une variable const doit être initialisée à sa déclaration et que tenter de la réaffecter plus tard provoquerait une erreur.

Portée (Scope) :

Dans le contexte de ce cours nous utiliserons systématiquement let ou const.

Les tableaux​

Principes de base​

Un Array (tableau) en JavaScript est une structure de données qui permet de stocker plusieurs éléments de manière ordonnée. Chaque élément dans un Array a un indice (ou une clé) numérique qui permet d'accéder à cet élément. Les Array en JavaScript sont dynamiques, ce qui signifie que leur taille peut changer au fil du temps en ajoutant ou en supprimant des éléments. Vous remarquerez que les éléments d'un Array ne sont pas obligatoirement du même "type".

Testez !
Copier chaque ligne de ce code dans votre console
let person = ["John", "Doe", 25];
console.log(typeof person);  // Affichera "object"
console.log(Array.isArray(person));  // Affichera true
console.log(person[0]); // Affichera 'John'
person.push("Tom");
console.log(person[3]); // Affichera 'Tom'
astuce

Dans les tutoriels suivants (boucles et collections), nous verrons qu'il existe plusieurs manières d'itérer sur des array et qu'il existe d'autres structures de données que array

La déstructuration​

Une manière moderne de manipuler les Array est d'utiliser le concept de la déstructuration. Cela évite, par exemple, d'écrire du code tel que person[0] pour accéder à la première valeur du tableau ou d'écrire person.push("Tom"); pour ajouter un élément.

La déstructuration en JS est une fonctionnalité qui permet d'extraire des valeurs d'objets ou de tableaux de manière concise en utilisant une syntaxe plus compacte. Cela facilite l'assignation de valeurs à des variables.

Pour les tableaux, la déstructuration peut être utilisée pour extraire des éléments individuels d'un tableau et les assigner à des variables distinctes. Voici un exemple simple :

let person = ["John", "Doe", 25];

// Destructuration du tableau person
const [firstName, lastName, age] = person;

// Utilisation des variables extraites
console.log(firstName);  // Output: 'John'
console.log(lastName);   // Output: 'Doe'
console.log(age);        // Output: 25

Dans cet exemple, la déstructuration est utilisée pour extraire les éléments du tableau person et les assigner aux variables firstName, lastName, et age. Les variables résultantes contiennent les valeurs correspondantes du tableau.

La déstructuration peut également être utilisée avec des assignations par défaut pour gérer les cas où le tableau ne contient pas suffisamment d'éléments :

let person = ["John", "Doe", 25];

// Destructuration avec assignations par défaut
const [firstName, lastName, age, taille = 170] = person;
console.log(taille);  // Output: 170

Dans cet exemple, taille est assignée à 170 par défaut si le tableau ne contient pas un quatrième élément.

La déstructuration peut également être utilisée pour extraire des éléments spécifiques d'un tableau sans extraire tous les éléments. Par exemple, pour extraire seulement le deuxième élément :

let person = ["John", "Doe", 25];

// Destructuration pour extraire seulement le deuxième élément
const [, lastName] = person;

console.log(lastName); // Output: 'Doe'

On peut aussi utiliser la déstructuration pour les objets :

let person = {
  firstName: "John", 
  lastName: "Doe",
  age: 25
};

const { age, firstName } = person;

console.log(firstName);   // Output: 'John'
console.log(age);         // Output: 25

// Renommer les variables lors de la destructuration
const { firstName: fName, lastName: lName, age: personAge } = person;

// Utilisation des variables renommées
console.log(fName);       // Output: 'John'
console.log(lName);       // Output: 'Doe'
console.log(personAge);   // Output: 25

La déstructuration marche également sur un élément du tableau qui se trouve être un objet.

let personWithObject = ["John", "Doe", { city: "New York", country: "USA" }];

// Destructuration avec un objet dans le tableau
const [firstName, lastName, { city, country }] = personWithObject;

// Utilisation des variables extraites
console.log(firstName);  // Output: 'John'
console.log(lastName);   // Output: 'Doe'
console.log(city);       // Output: 'New York'
console.log(country);    // Output: 'USA'

Il est possible de renommer les variables

let personWithObject = ["John", "Doe", { city: "New York", country: "USA" }];

// Destructuration avec un objet dans le tableau et renommage des variables
const [firstName, lastName, { city: personCity, country: personCountry }] = personWithObject;

// Utilisation des variables extraites avec les nouveaux noms
console.log(firstName);       // Output: 'John'
console.log(lastName);        // Output: 'Doe'
console.log(personCity);      // Output: 'New York'
console.log(personCountry);   // Output: 'USA'

La déstructuration avec ...​

Le ... en JavaScript est utilisé pour la syntaxe de l'opérateur de décomposition, également appelé opérateur de propagation ou de rest.

  1. Déstructuration avec ... (Rest Operator) : Lorsqu'il est utilisé dans le contexte de la déstructuration, ... permet de capturer le reste des éléments d'un tableau dans une variable.

    let fruits = ["Apple", "Banana", "Orange", "Grapes"];

    // Utilisation de l'opérateur de repos dans la destructuration
    const [firstFruit, ...restOfFruits] = fruits;

    console.log(firstFruit);      // Output: 'Apple'
    console.log(restOfFruits);    // Output: ['Banana', 'Orange', 'Grapes']

    Dans cet exemple, firstFruit capture le premier élément du tableau, et restOfFruits capture le reste des éléments.

  2. Opérateur de propagation (...) : L'opérateur de propagation peut être utilisé pour éclater les éléments d'un tableau ou les propriétés d'un objet.

    let fruits1 = ["Apple", "Banana"];
    let fruits2 = ["Orange", "Grapes"];

    // Utilisation de l'opérateur de propagation pour concaténer des tableaux
    let allFruits = [...fruits1, ...fruits2];

    console.log(allFruits);    // Output: ['Apple', 'Banana', 'Orange', 'Grapes']

    Dans cet exemple, ...fruits1 éclate les éléments du premier tableau, et ...fruits2 éclate les éléments du deuxième tableau, les concaténant ensuite dans un nouveau tableau.

Exercices​

Travail à faire

Copiez-collez ce code dans un fichier html, lancez un live serveur avec VSCODE et testez / débuggez à l'aide de votre navigateur.

<html>

<head>
 <title>Exercices</title>
</head>
</head>

<body>
 <p>Rien d'intéressant à regarder ici. Faîtes clic-droit/inspecter pour regarder ce qui se passe dans le debugger pour faire du pas à pas dans les sources.</p>
 
 <script>
     // exercice 1
     //Compléter pour qu'une variable age contienne  "Doe" 
     const person = ["John", "Doe", 25];        
     

     // exercice 2
     // Compléter le code pour créer un nouveau tableau à partir des deux autres
     const person2 = ["John", "Doe", 25];        
     const autrePersonne = ["Jane", "Doe", 22];
     

     // exercice 3
     //Ecrire le code qui utilise  l'opérateur ... pour récupérer 
     //le premier fruit dans une variable
     //le second fruit dans une variable
     //tous les autres fruits dans un tableau
     const fruits = ["Apple", "Banana", "Pineapple", "Orange", "Grapes"];            
     


     // exercice 4
     //Ce code essaie d'utiliser l'opérateur ... pour récupérer 
     //le premier fruit dans une variable
     //le dernier fruit dans une variable
     //tous les autres fruits dans un tableau
     //Qu'est ce qui ne va pas ?
     //décommentez la ligne pour tester
     // const [firstFruit, ...restOfFruits, lastFruit] = fruits;

     


     // exercice 5
     //En utilisant la destructuration, créez un tableau contenant les deux deniers éléments de chaque tableau
     const fruits1 = ["Apple", "Banana", "Pineapple", "Mango"];
     const fruits2 = ["Orange", "Grapes"];

     

     // exercice 6
     //Ce code essaie, à l'aide de la destructuration, de récupérer le nombre de calories d'une pomme
     //qu'elle est l'erreur ?
     const fruit1 = ["Apple", {"taste" : "sweety", "calorie" : 30}];
     //décommenter pour tester
     //const [, {, calorie: calorieApple}] = fruit1;
     //console.log(calorieApple);





</script>
</body>

</html>