Claire D.

Posted on Nov 3, 2023

Les 8 concepts de base de JavaScript

#javascript #beginners #french #programming

🚀 Si tu commences à coder ou que tu veux revoir les bases de JavaScript, cet article est fait pour toi.

Pourquoi JavaScript ?

Il est largement utilisé pour le développement web, et peut être utilisé coté serveur avec Node.js notamment.

1. Déclarer des variables

On peut déclarer des variables avec les mots-clés var , let , ou const .

Javascript compte plusieurs types

number : nombre
Représente à la fois les nombres entiers et les nombres à virgule flottante.
string : chaîne de caractères
Représente une séquence de caractères.
"Hello, World!", 'JavaScript'
boolean : booléen
Représente une valeur binaire qui peut être soit true (vrai) soit false (faux).
Null
Représente une valeur nulle ou inexistante.
undefined : Indéfini
Représente une variable qui a été déclarée mais n'a pas encore été initialisée.
object : Objet
Un type de données complexe qui peut contenir des collections de propriétés et de méthodes.

let personne = {
  nom: "John",
  age: 30,
  sexe: "homme"
};

array : Tableau Représente une collection ordonnée d'éléments.

let fruits = ["pomme", "banane", "fraise"];

function : Fonction Les fonctions sont des objets de première classe en JavaScript. Elles peuvent être assignées à des variables, passées en tant qu'arguments, et retournées par d'autres fonctions.

function addition(a, b) {
  return a + b;
}

symbol : Symbole Un type de données introduit dans ES6, utilisé pour créer des propriétés uniques dans les objets.

const mySymbol = Symbol("description")

BigInt : BigInt Un type de données introduit dans ES11 (ES2020) pour représenter des nombres entiers très grands.

const bigIntValue = 1234567890123456789012345678901234567890n

2. Les opérateurs

JavaScript prend en charge une variété d'opérateurs pour effectuer des opérations sur des données.

🔢 Opérateurs mathématiques

+ : Addition
- : Soustraction
* : Multiplication
/ : Division
% : Modulo (reste de la division)
** : Exponentiation (introduit dans ES6) 🔗 Opérateurs de comparaison
== : Égal à (valeur)
=== : Égal à (valeur et type)
!= : Différent de (valeur)
!== : Différent de (valeur et type)
< : Inférieur à
> : Supérieur à
<= : Inférieur ou égal à
>= : Supérieur ou égal à 🔲 Opérateurs logiques
&& : ET
|| : OU
! : NON

3. Les Structures de controle

Les instructions conditionnelles

L'instruction if permet d'exécuter un bloc de code si une condition est vraie.

if (condition) {
  // Code à exécuter si la condition est vraie
}

L'instruction else if permet d'ajouter des conditions alternatives à une instruction if.

if (condition1) {
  // Code à exécuter si condition1 est vraie
} else if (condition2) {
  // Code à exécuter si condition1 est fausse et condition2 est vraie
}

L'instruction else permet d'exécuter un bloc de code si aucune des conditions précédentes n'est vraie.

if (condition) {
  // Code à exécuter si la condition est vraie
} else {
  // Code à exécuter si la condition est fausse
}

Boucles

🔁 La boucle for permet d'itérer sur un bloc de code un certain nombre de fois en spécifiant une condition d'arrêt.

for (initialisation; condition; itération) {
  // Code à répéter
}

🔄 La boucle while répète un bloc de code tant qu'une condition est vraie.

while (condition) {
  // Code à répéter tant que la condition est vraie
}

🔁 La boucle do...while est similaire à la boucle while, mais garantit qu'au moins une itération sera effectuée avant de vérifier la condition.

do {
  // Code à répéter au moins une fois
} while (condition);

4. Les fonctions

🔧 Les fonctions sont des blocs de code réutilisables que vous pouvez définir et appeler. Les fonctions sont définies à l'aide du mot-clé function.
Les fonctions peuvent accepter des paramètres et renvoyer des valeurs.

function multiplier(a, b) {
  return a * b;
}

5. Les objets

🧩 Les objets sont des structures de données complexes qui peuvent contenir des propriétés et des méthodes. Les propriétés sont des variables, tandis que les méthodes sont des fonctions associées à un objet.

// Création d'un objet représentant une personne
const personne = {
  nom: "John",
  age: 30,
  sexe: "homme",
};

// Accès aux propriétés de l'objet
console.log("Nom de la personne : " + personne.nom);
console.log("Âge de la personne : " + personne.age);

6. Les événements et les gestionnaires d'événements

🎯 Les événements et les gestionnaires d'événements en JavaScript permettent de surveiller et de réagir aux actions de l'utilisateur sur une page web, comme les clics de souris, les saisies au clavier, etc. Les gestionnaires d'événements sont des fonctions JavaScript attachées aux éléments HTML pour définir des réponses spécifiques à ces événements, ajoutant ainsi de l'interactivité aux applications web.

// On sélectionne un bouton par son ID
const monBouton = document.getElementById("monBouton");

// On ajoute un gestionnaire d'événements de clic
monBouton.addEventListener("click", function() {
  alert("Le bouton a été cliqué !");
});

7. Promesses et asynchronicité

🌐 Les promesses en JavaScript sont des objets qui représentent des opérations asynchrones, telles que les requêtes réseau, les lectures de fichiers, etc. Elles permettent de gérer ces opérations de manière plus lisible et ordonnée, en fournissant des callbacks pour les résultats (résolues) ou les erreurs (rejetées).

L' asynchronicité signifie que le programme peut continuer à s'exécuter sans attendre la fin d'une opération longue. Les promesses aident à gérer ces opérations asynchrones en garantissant un contrôle plus efficace de la séquence d'exécution du code.

// Création d'une promesse
const maPromesse = new Promise((resolve, reject) => {
  setTimeout(() => {
    const reussite = true;
    if (reussite) {
      resolve("Opération réussie");
    } else {
      reject("Erreur");
    }
  }, 2000);
});

// Utilisation de la promesse
maPromesse
  .then(resultat => console.log(resultat))
  .catch(erreur => console.error(erreur));

8. Portée et fermeture

🔍 La portée (scope) en JavaScript détermine où une variable est accessible dans le code. Les fermetures (closures) sont des fonctions imbriquées qui peuvent accéder aux variables de leur fonction parente, même après que cette fonction parente ait terminé son exécution. Cela permet de stocker et de protéger des valeurs pour une utilisation ultérieure.

Merci d'avoir lu cet article jusqu'au bout! Je t'invite à me laisser ton avis en commentaire, ou à me suivre sur Twitter pour plus d'astuces JavaScript! 🚀👩‍💻👍

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →