Les bases de JavaScript

Découvrez les fondamentaux de JavaScript. Un guide exhaustif pour comprendre les concepts clés, de la syntaxe de base aux structures de contrôle, aux tableaux et aux objets.

Dans cet article, nous allons explorer les fondamentaux du langage de programmation JavaScript. Que vous soyez un débutant curieux ou un développeur chevronné cherchant à rafraîchir vos connaissances, ce guide exhaustif est conçu pour vous donner une compréhension solide des concepts clés de JavaScript. De la syntaxe de base aux structures de contrôle, des tableaux et des objets aux fonctions et aux événements, nous vous guiderons tout au long de ce voyage d’apprentissage passionnant. Alors, préparez-vous à plonger dans le monde fascinant de JavaScript et à découvrir tout ce que ce langage puissant a à offrir.

Variables et types de données

Déclaration de variables

Lorsque nous travaillons avec JavaScript, nous devons déclarer des variables afin de stocker des données. La déclaration d’une variable se fait en utilisant le mot-clé var, suivi du nom de la variable que nous voulons utiliser. Par exemple, pour déclarer une variable appelée age, nous écririons var age;.

Types de données primitifs

JavaScript propose plusieurs types de données primitifs, c’est-à-dire des types de données de base qui ne sont pas des objets. Les types de données primitifs les plus couramment utilisés sont les suivants :

String : utilisé pour représenter du texte.
Number : utilisé pour représenter des nombres.
Boolean : utilisé pour représenter une valeur de vérité (vrai ou faux).
Undefined : utilisé pour représenter une variable qui n’a pas encore été assignée de valeur.
Null : utilisé pour représenter l’absence de valeur.
Symbol : utilisé pour créer des identifiants uniques et immuables.

Les chaînes de caractères

Les chaînes de caractères sont utilisées pour représenter du texte en JavaScript. Une chaîne de caractères est définie en entourant le texte avec des guillemets simples (”) ou des guillemets doubles (“”). Par exemple, var nom = 'John'; ou var message = "Bonjour tout le monde";. Les chaînes de caractères peuvent être concaténées en utilisant l’opérateur +.

Les nombres

En JavaScript, les nombres sont utilisés pour représenter des valeurs numériques. Ils peuvent être entiers ou décimaux. Par exemple, var nombreEntier = 10; ou var nombreDecimal = 3.14;. Les nombres peuvent être utilisés dans des opérations arithmétiques telles que l’addition, la soustraction, la multiplication et la division.

Les booléens

Les booléens sont utilisés pour représenter des valeurs de vérité, c’est-à-dire des valeurs qui peuvent être soit vraies (true) ou fausses (false). Les booléens sont souvent utilisés dans des expressions conditionnelles pour prendre des décisions. Par exemple, var estVrai = true; ou var estFaux = false;.

Opérateurs et expressions

Opérateurs arithmétiques

JavaScript propose plusieurs opérateurs arithmétiques pour effectuer des calculs mathématiques. Les opérateurs arithmétiques les plus couramment utilisés sont les suivants :

Addition (+) : utilisé pour ajouter deux valeurs.
Soustraction (-) : utilisé pour soustraire une valeur d’une autre.
Multiplication (*) : utilisé pour multiplier deux valeurs.
Division (/) : utilisé pour diviser une valeur par une autre.
Modulo (%) : utilisé pour obtenir le reste de la division de deux nombres.

Opérateurs de comparaison

Les opérateurs de comparaison sont utilisés pour comparer des valeurs et renvoyer une valeur booléenne (true ou false) en fonction du résultat de la comparaison. Les opérateurs de comparaison les plus couramment utilisés sont les suivants :

Égal (==) : vérifie si deux valeurs sont égales.
Différent (!=) : vérifie si deux valeurs sont différentes.
Strictement égal (===) : vérifie si deux valeurs sont égales en termes de type et de valeur.
Strictement différent (!==) : vérifie si deux valeurs sont différentes en termes de type et de valeur.
Supérieur (>) : vérifie si une valeur est supérieure à une autre.
Inférieur (<) : vérifie si une valeur est inférieure à une autre.
Supérieur ou égal (>=) : vérifie si une valeur est supérieure ou égale à une autre.
Inférieur ou égal (<=) : vérifie si une valeur est inférieure ou égale à une autre.

Opérateurs logiques

Les opérateurs logiques sont utilisés pour combiner des expressions conditionnelles et renvoyer une valeur booléenne en fonction du résultat de la combinaison. Les opérateurs logiques les plus couramment utilisés sont les suivants :

ET (&&) : renvoie true si toutes les expressions sont vraies, sinon false.
OU (||) : renvoie true si l’une des expressions est vraie, sinon false.
NON (!) : inverse la valeur d’une expression (true devient false et vice versa).

Expressions conditionnelles

Les expressions conditionnelles, également connues sous le nom d’instructions conditionnelles, sont utilisées pour prendre des décisions en fonction d’une condition. Les expressions conditionnelles les plus couramment utilisées sont les suivantes :

if : exécute un bloc de code si une condition est vraie.
else : exécute un bloc de code si une condition est fausse.
else if : permet de vérifier plusieurs conditions différentes.
switch : exécute différentes actions en fonction de différentes valeurs possibles.

Structures de contrôle

Les boucles

Les boucles sont utilisées pour répéter une série d’instructions jusqu’à ce qu’une condition spécifique soit remplie. Les boucles les plus couramment utilisées en JavaScript sont les suivantes :

for : répète un bloc de code un nombre spécifié de fois.
while : répète un bloc de code tant qu’une condition spécifiée est vraie.
do…while : répète un bloc de code une fois, puis répète le bloc tant qu’une condition spécifiée reste vraie.

Les instructions conditionnelles

Les instructions conditionnelles sont utilisées pour exécuter différentes actions en fonction d’une condition spécifique. Les instructions conditionnelles les plus couramment utilisées en JavaScript sont les suivantes :

if…else : exécute un bloc de code si une condition est vraie, sinon exécute un autre bloc de code.
switch…case : exécute différentes actions en fonction de différentes valeurs possibles.

Les instructions de contrôle de saut

Les instructions de contrôle de saut sont utilisées pour modifier le flux d’exécution d’un programme. Les instructions de contrôle de saut les plus couramment utilisées en JavaScript sont les suivantes :

break : arrête l’exécution d’une boucle ou d’une instruction conditionnelle.
continue : interrompt une itération d’une boucle et passe à l’itération suivante.
return : renvoie une valeur à partir d’une fonction et arrête l’exécution de la fonction.

Les fonctions

Définition de fonctions

Les fonctions sont utilisées pour regrouper un ensemble d’instructions et les exécuter lorsque cela est nécessaire. Une fonction est définie en utilisant le mot-clé function, suivi du nom de la fonction et des parenthèses contenant les paramètres de la fonction. Par exemple, pour définir une fonction appelée calculerSomme, nous écririons function calculerSomme(a, b) { ... }.

Appel de fonctions

Pour exécuter une fonction, nous devons l’appeler en utilisant son nom suivi des parenthèses contenant les arguments. Par exemple, pour appeler la fonction calculerSomme que nous avons définie précédemment, nous écririons calculerSomme(5, 10);.

Passage de paramètres

Les paramètres sont utilisés pour passer des valeurs à une fonction. Lorsque nous définissons une fonction, nous pouvons spécifier les paramètres dont nous avons besoin. Lorsque nous appelons la fonction, nous passons les valeurs correspondantes aux paramètres. Par exemple, dans la fonction calculerSomme(a, b), a et b sont des paramètres.

Retour de valeurs

Les fonctions peuvent renvoyer une valeur en utilisant le mot-clé return. Lorsqu’une fonction atteint une instruction return, elle renvoie la valeur spécifiée et arrête l’exécution de la fonction. Par exemple, dans la fonction calculerSomme(a, b), nous pourrions utiliser return a + b; pour renvoyer la somme des deux nombres.

Les tableaux

Déclaration de tableaux

Les tableaux sont utilisés pour stocker plusieurs valeurs dans une seule variable. Un tableau est déclaré en utilisant des crochets ([]) et en séparant les valeurs par des virgules. Par exemple, var fruits = ['pomme', 'banane', 'orange'];.

Accès aux éléments

Pour accéder à un élément spécifique d’un tableau, nous utilisons son index. Le premier élément d’un tableau a un index de 0, le deuxième a un index de 1, et ainsi de suite. Par exemple, pour accéder au premier élément du tableau fruits, nous utiliserions fruits[0];.

Modification des éléments

Pour modifier la valeur d’un élément spécifique d’un tableau, nous utilisons son index et l’opérateur d’affectation (=). Par exemple, pour modifier le deuxième élément du tableau fruits en 'kiwi', nous utiliserions fruits[1] = 'kiwi';.

Méthodes utiles

JavaScript propose plusieurs méthodes intégrées pour travailler avec des tableaux. Voici quelques-unes des méthodes les plus couramment utilisées :

push() : ajoute un élément à la fin du tableau.
pop() : supprime le dernier élément du tableau.
shift() : supprime le premier élément du tableau.
unshift() : ajoute un élément au début du tableau.
slice() : renvoie une copie partielle du tableau.
splice() : modifie le contenu du tableau en ajoutant ou en supprimant des éléments.

Les objets

Création d’objets

Les objets sont utilisés pour regrouper des propriétés et des méthodes associées. Un objet est défini en utilisant des accolades ({}) et en spécifiant les propriétés et les valeurs correspondantes. Par exemple, var voiture = { marque: 'Toyota', modèle: 'Corolla', année: 2020 };.

Accès aux propriétés

Pour accéder à une propriété spécifique d’un objet, nous utilisons la notation pointée (.) suivi du nom de la propriété. Par exemple, pour accéder à la propriété marque de l’objet voiture, nous utiliserions voiture.marque;.

Modification des propriétés

Pour modifier la valeur d’une propriété spécifique d’un objet, nous utilisons la notation pointée (.) et l’opérateur d’affectation (=). Par exemple, pour modifier la valeur de la propriété modèle de l’objet voiture en 'Camry', nous utiliserions voiture.modèle = 'Camry';.

Les méthodes des objets

Un objet peut également contenir des méthodes, qui sont des fonctions associées à l’objet. Les méthodes sont définies de la même manière que les fonctions, mais à l’intérieur de l’objet. Par exemple, var personne = { nom: 'John', age: 30, direBonjour: function() { console.log('Bonjour!'); } };. Pour appeler une méthode d’un objet, nous utilisons la notation pointée (.) suivi du nom de la méthode. Par exemple, personne.direBonjour();.

La portée des variables

Portée globale

La portée globale fait référence à toutes les variables, fonctions et objets qui sont définis en dehors de toute fonction. Les variables déclarées dans la portée globale sont accessibles partout dans le code.

Portée locale

La portée locale fait référence aux variables, fonctions et objets qui sont définis à l’intérieur d’une fonction. Les variables déclarées à l’intérieur d’une fonction ne sont accessibles qu’à l’intérieur de cette fonction.

Portée des fonctions

Lorsqu’une fonction est définie à l’intérieur d’une autre fonction, la portée de la fonction interne est limitée à la fonction externe. Les variables déclarées à l’intérieur de la fonction externe sont accessibles à la fois à la fonction externe et à la fonction interne, mais les variables déclarées à l’intérieur de la fonction interne ne sont accessibles qu’à la fonction interne.

La manipulation de DOM

Sélection d’éléments

Le DOM (Document Object Model) est une représentation en arborescence de tous les éléments d’un document HTML. Pour sélectionner un élément spécifique du DOM, nous utilisons des méthodes telles que getElementById, getElementsByClassName ou getElementsByTagName. Par exemple, var titre = document.getElementById('titre');.

Modification de contenu

Une fois que nous avons sélectionné un élément du DOM, nous pouvons modifier son contenu en utilisant les propriétés appropriées. Par exemple, pour modifier le texte d’un élément, nous utilisons textContent ou innerHTML. Par exemple, titre.textContent = 'Nouveau titre';.

Modification de styles

Nous pouvons également modifier les styles d’un élément du DOM en utilisant les propriétés de style appropriées. Par exemple, pour modifier la couleur de fond d’un élément, nous utilisons backgroundColor. Par exemple, titre.style.backgroundColor = 'blue';.

Gestion d’événements

Les événements sont des actions qui se produisent dans une page web, telles que le clic sur un bouton ou le survol d’une image. Nous pouvons ajouter des écouteurs d’événements à des éléments du DOM pour exécuter du code en réponse à ces événements. Par exemple, bouton.addEventListener('click', maFonction); appelera maFonction lorsque le bouton est cliqué.

Les classes et les prototypes

Création de classes

Les classes sont utilisées pour créer des objets basés sur un modèle commun. Une classe est définie en utilisant le mot-clé class, suivi du nom de la classe. Nous pouvons ensuite définir les propriétés et les méthodes de la classe à l’intérieur de son corps. Par exemple,

class Personne {
  constructor(nom, age) {
    this.nom = nom;
    this.age = age;
  }

  direBonjour() {
    console.log('Bonjour!');
  }
}

Héritage et prototypes

L’héritage permet à une classe d’hériter des propriétés et des méthodes d’une autre classe. En JavaScript, l’héritage est réalisé en utilisant les prototypes. Les prototypes sont des objets qui agissent comme des modèles pour créer de nouveaux objets. Par exemple,

class Etudiant extends Personne {
  constructor(nom, age, niveau) {
    super(nom, age);
    this.niveau = niveau;
  }

  direBonjour() {
    super.direBonjour();
    console.log('Je suis un étudiant!');
  }
}

Les erreurs et la gestion des exceptions

Types d’erreurs

JavaScript peut rencontrer plusieurs types d’erreurs pendant l’exécution du code. Les erreurs les plus courantes sont les erreurs de syntaxe, les erreurs de référence et les erreurs génériques.

Erreurs de syntaxe : se produisent lorsque le code est mal écrit et ne suit pas la syntaxe correcte de JavaScript.
Erreurs de référence : se produisent lorsque le code essaie d’accéder à une variable ou à une méthode qui n’existe pas.
Erreurs génériques : se produisent lorsque le code génère une exception qui n’a pas été spécifiquement traitée.

Utilisation du bloc try-catch

Pour gérer les erreurs et les exceptions, nous pouvons utiliser le bloc try-catch. Le bloc try est utilisé pour entourer le code susceptible de générer une exception, tandis que le bloc catch est utilisé pour gérer l’exception en exécutant un bloc de code spécifique. Par exemple,

try {
  // Code susceptible de générer une exception
} catch (erreur) {
  // Code pour gérer l'exception
}

Gestion des exceptions

La gestion des exceptions consiste à prendre des mesures appropriées en réponse à une exception. Les mesures prises peuvent varier en fonction du type d’erreur rencontré. Par exemple, nous pouvons afficher un message d’erreur à l’utilisateur ou réessayer l’opération qui a généré l’exception. La gestion des exceptions nous permet de gérer les erreurs de manière élégante et de maintenir le bon fonctionnement de notre programme.