Introduction au JavaScript Moderne

• Voici une mise à jour des notes d'étude structurées et détaillées sur les concepts JavaScript abordés.

Introduction au JavaScript Moderne

• L'objectif est d'apprendre le JavaScript moderne, essentiel pour le développement web.
• Le cours est conçu pour les débutants, sans prérequis nécessaires en HTML ou CSS.
• Il est recommandé de suivre le tutoriel en pratiquant chaque étape en temps réel.

Création d'un Premier Script JavaScript

• Utiliser un éditeur de texte (TextEdit sur Mac OS, Bloc-notes sur Windows).
• Sur Mac OS, configurer TextEdit en mode "plain text" pour éviter le formatage enrichi.
• Écrire un script HTML basique incluant une balise <script>.
• La balise <script> permet d'intégrer du code JavaScript directement dans un fichier HTML.
• La fonction alert() affiche une boîte de dialogue avec un message (ex: "Hello world").
• Sauvegarder le fichier avec l'extension .html (utiliser l'option "use HTML" sur Mac OS).
• Ouvrir le fichier HTML dans un navigateur pour exécuter le script JavaScript.

Installation de Visual Studio Code (VS Code)

• VS Code est un éditeur de code recommandé pour un environnement de développement plus agréable.
• Télécharger VS Code depuis le site officiel en choisissant la version adaptée à votre système d'exploitation.

Installation de Node.js

• Node.js permet d'exécuter du JavaScript en dehors d'un navigateur.
• Télécharger Node.js depuis le site officiel (la version peut varier).

Configuration de VS Code

• Installer des extensions utiles :
  • Material Icon Theme : pour améliorer l'apparence des icônes.
  • Prettier : pour formater automatiquement le code.
  • ESLint : pour détecter les erreurs et les problèmes de style dans le code.
  • Quokka.js : pour exécuter du JavaScript directement dans l'éditeur (usage pédagogique).
• Configurer Prettier comme formateur par défaut dans les paramètres de VS Code (fichier settings.json).
• Activer l'option "Format on Save" pour que Prettier formate le code à chaque sauvegarde.

Vérification de l'Installation de Node.js

• Ouvrir un terminal dans VS Code (Terminal > New Terminal).
• Taper la commande node -v pour vérifier la version de Node.js installée.

Création d'un Projet JavaScript dans VS Code

• Créer un nouveau dossier pour le projet (File > Open Folder > New Folder).
• Créer un nouveau fichier JavaScript dans le dossier (ex: script.js).
• L'extension .js indique que le fichier contient du code JavaScript.

Exécution de JavaScript avec Node.js

• Dans le terminal de VS Code, naviguer jusqu'au dossier du projet.
• Taper la commande node script.js pour exécuter le fichier JavaScript.

Utilisation de Quokka.js pour l'Exécution en Temps Réel

• Utiliser la commande "Start on Current File" dans Quokka.js pour exécuter le code en temps réel dans VS Code.
• Quokka.js affiche les résultats du code directement dans l'éditeur.

Commentaires en JavaScript

• Commentaires sur une seule ligne : // Ceci est un commentaire.
• Commentaires multilignes : /* Ceci est un commentaire sur plusieurs lignes */.

Variables en JavaScript

• Déclaration de variables modifiables avec le mot-clé let.
  • Exemple: let name = "Melvin";
• Les variables sont comme des boîtes étiquetées stockant des données.
• Assignation d'une valeur à une variable avec l'opérateur =.
  • Exemple: name = "Didier";
• Il est impossible de redéclarer une variable avec le mot-clé let.

Constantes en JavaScript

• Déclaration de constantes (variables non modifiables) avec le mot-clé const.
  • Exemple: const origin = "Suisse";
• Les constantes doivent être initialisées lors de leur déclaration.
• Il est impossible de modifier la valeur d'une constante après son initialisation.

Types de Données en JavaScript

• String (chaînes de caractères) :
  • Déclaration avec des guillemets doubles ("..."), simples ('...'), ou backticks (`...`).
  • Les backticks permettent l'interpolation de variables dans les chaînes (template literals).
  • Exemple: const myString = "Bonjour";
• Boolean (booléens) :
  • Valeurs true (vrai) ou false (faux).
  • Utilisés pour représenter des états logiques.
  • Exemple: const isAdult = true;
• Number (nombres) :
  • Représentent des valeurs numériques (entiers ou flottants).
  • Exemple: const age = 42;
• BigInt :
  • Pour les nombres entiers plus grands que la limite de Number.
  • Exemple: const bigNumber = 123456789012345678901234567890n;
• Symbol :
  • Valeurs uniques et immuables.
  • Généralement utilisées comme clés d'objet.
  • Exemple: const mySymbol = Symbol("description");
• Null :
  • Représente l'absence intentionnelle de valeur.
  • Exemple: let user = null;
• Undefined :
  • Représente une variable qui n'a pas été initialisée.
  • Exemple: let city; (city est undefined)

Manipulation des Strings

• Concaténation de strings avec l'opérateur + ou avec les template literals.
  • Exemple: const greetingTemplate = Bonjour, ${name}!;
• Accéder à un caractère spécifique d'une string avec son index (commence à 0).
  • Exemple: const firstChar = myString[0];
• Obtenir la longueur d'une string avec la propriété .length.
  • Exemple: const stringLength = myString.length;
• Méthodes de string :
  • .toUpperCase() : Convertit en majuscules.
  • .toLowerCase() : Convertit en minuscules.
  • .charAt(index) : Retourne le caractère à l'index spécifié.
  • .includes(substring) : Vérifie si la chaîne contient la sous-chaîne.

Différence entre null et undefined

• null : Absence intentionnelle de valeur. Variable volontairement vide.
• undefined : Variable non initialisée. Indique souvent une erreur ou un oubli.
• Une variable non définie est considérée comme undefined.
• Il est préférable d'utiliser null pour indiquer explicitement qu'une variable est vide.

Manipulation des Numbers

• Opérations arithmétiques de base : +, -, *, /.
• Transformation de string en number avec Number().
  • Exemple: const stringNumber = "42"; const numberValue = Number(stringNumber);
• La fonction Number()retourne NaN (Not a Number) si elle ne parvient pas à convertir la chaîne en nombre.
• Transformation de number en string avec String().
  • Exemple: const numberToString = String(age);
• Vérifier si une valeur est NaN avec Number.isNaN().

Opérateurs d'Affectation

• Affectation simple : = (ex: age = 25;).
• Addition et affectation : += (ex: age += 5; équivaut à age = age + 5;).
• Soustraction et affectation : -= (ex: age -= 2; équivaut à age = age - 2;).
• Multiplication et affectation : *=.
• Division et affectation : /=.
• Incrément et décrément : ++, -- (ex: age++; incrémente age de 1).

Conditions (if, else if, else)

• Exécution de code conditionnelle basée sur des booléens (truthy ou falsy).
• if (condition) { /* code à exécuter si la condition est vraie */ }
• else { /* code à exécuter si la condition est fausse */ }
• else if (condition) { /* code à exécuter si une autre condition est vraie */ }
• Les accolades {} délimitent les blocs de code dans les instructions if, else if, et else.
• Si le bloc ne contient qu'une seule instruction, les accolades peuvent être omises (mais c'est déconseillé pour la lisibilité).
• Comparaison :
  • Egalité stricte : (===) vérifie la valeur et le type.
  • Egalité non stricte : (==) vérifie la valeur après conversion de type.
  • Inégalité stricte : (!==).
  • Inégalité non stricte : (!=).
  • Supérieur à : >.
  • Inférieur à : <.
  • Supérieur ou égal à : >=.
  • Inférieur ou égal à : <=.
• Négation : ! (inverse la valeur d'un booléen).

Opérateurs Logiques

• ET logique : && (les deux conditions doivent être vraies).
• OU logique : || (au moins une des conditions doit être vraie).

Opérateur Ternaire

• Syntaxe : condition ? valeur_si_vraie : valeur_si_fausse;
• Une manière concise d'écrire une instruction if...else simple.
• Exemple: const message = age >= 18 ? "Adulte" : "Mineur";

Fonctions en JavaScript

• Déclaration d'une fonction avec le mot-clé function.
• Syntaxe : function nomDeLaFonction(paramètre1, paramètre2) { /* code de la fonction */; return resultat; }
• Appel d'une fonction en utilisant son nom suivi de parenthèses : nomDeLaFonction(argument1, argument2);
• Les paramètres sont des variables locales à la fonction.
• L'instruction return permet de renvoyer une valeur depuis la fonction (et termine l'exécution de la fonction).
• Si aucun return n'est spécifié, la fonction renvoie implicitement undefined.

Scope des Variables

• Le scope (portée) définit où une variable peut être accessible dans le code.
• Scope global : Les variables déclarées en dehors de toute fonction ou bloc sont accessibles partout.
• Scope de fonction : Les variables déclarées à l'intérieur d'une fonction sont accessibles uniquement à l'intérieur de cette fonction.
• Scope de bloc : Les variables déclarées avec let ou const à l'intérieur d'un bloc ({}) sont accessibles uniquement à l'intérieur de ce bloc.

Syntaxes Alternatives pour les Fonctions

• Fonctions anonymes :
  • const maFonctionAnonyme = function(paramètres) { /* code */ };
• Arrow functions :
  • Syntaxe plus concise pour les fonctions anonymes.
  • const maFonctionArrow = (paramètres) => { /* code */ };
  • Si la fonction ne contient qu'une seule expression, les accolades et le return peuvent être omis:
  • const maFonctionArrowSimple = (paramètres) => expression;
• Arrow functions n'ont pas leur propre this (elles héritent du this du contexte englobant).

Objets et Tableaux en JavaScript

• Objets
  • Collection de paires clé-valeur.
  • Clés : strings (ou Symbols).
  • Valeurs : n'importe quel type de données.
  • Création : const monObjet = { clé1: valeur1, clé2: valeur2 };
  • Accès aux propriétés :
  • Notation par point : monObjet.clé1.
  • Notation par crochets : monObjet["clé1"].
  • Modification des propriétés : monObjet.clé1 = nouvelleValeur;.
• Tableaux
  • Liste ordonnée de valeurs.
  • Indices : nombres entiers (commencent à 0).
  • Création : const monTableau = [valeur1, valeur2, valeur3];
  • Accès aux éléments : monTableau[indice].
  • Modification des éléments : monTableau[indice] = nouvelleValeur;.
  • Propriété length pour obtenir la taille du tableau.

Type de Référence

• Les objets et les tableaux sont des types de référence.
• Lorsqu'une variable de type référence est copiée (ex: const autreVariable = monObjet;), elle ne crée pas une nouvelle copie en mémoire. À la place, l'autre variable pointe vers la même adresse mémoire. Modifier l'objet d'une variable affectera donc aussi les valeurs qui sont utilisés dans une autre variable.
• Les types primitifs (string, number, boolean etc) sont des types de valeur. Quand on copie ces types, la valeur est vraiment copiée en mémoire.
• Si on fait un nouvel objet (ex: {}) ou un nouveau tableau (ex: []), alors la valeur est copiée. Pensez à cela pour les tableaux/objets stockés dans des variables en const - vous ne pouvez plus modifier à une nouvelle adresse, mais vous pouvez changer les clés/valeurs.
• Pour copier un objet ou un tableau sans partager la même référence en mémoire, il faut utiliser une méthode de copie profonde (deep copy).

Méthodes Utiles pour les Tableaux

• .push(element) : Ajoute un élément à la fin du tableau.
• .pop() : Supprime le dernier élément du tableau et le renvoie.
• .shift() : Supprime le premier élément du tableau et le renvoie.
• .unshift(element) : Ajoute un élément au début du tableau.
• .splice(start, deleteCount, element1, element2, ...) : Modifie le contenu du tableau en supprimant ou en remplaçant des éléments.
• .map(callback) : Crée un nouveau tableau en appliquant une fonction callback à chaque élément du tableau d'origine.
• .filter(callback) : Crée un nouveau tableau contenant uniquement les éléments qui passent un test spécifié par la fonction callback.

Opérateurs d'Affectation

• Affectation simple : = (ex: age = 25;).
• Addition et affectation : += (ex: age += 5; équivaut à age = age + 5;).
• Soustraction et affectation : -= (ex: age -= 2; équivaut à age = age - 2;).
• Multiplication et affectation : *=.
• Division et affectation : /=.
• Incrément et décrément : ++, -- (ex: age++; incrémente age de 1).

Ces notes fournissent un aperçu structuré et détaillé des concepts Javascript abordés. Elles peuvent servir de base pour un approfondissement personnel.

Ce cours initie au JavaScript moderne, crucial pour le développement web. Conçu pour les débutants, il explique comment créer un premier script en intégrant du code JavaScript dans un fichier HTML et comment utiliser VS Code.