Introduction à la Programmation en JavaScript

October 8, 2024

Contents
1 Introduction 2

2 Les Bases de JavaScript 2

2.1 Types de Données . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.2 Déclaration de Variables . . . . . . . . . . . . . . . . . . . . . . . 2
2.3 Opérateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

3 Structures de Contrôle 3
3.1 Conditionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.1.1 If...else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.1.2 Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.2 Boucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.2.1 For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.2.2 While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

4 Fonctions 4
4.1 Fonctions fléchées (Arrow functions) . . . . . . . . . . . . . . . . 4

5 Manipulation du DOM 4
5.1 Sélectionner un élément . . . . . . . . . . . . . . . . . . . . . . . 4
5.2 Modifier le contenu d’un élément . . . . . . . . . . . . . . . . . . 4
5.3 Ajouter un événement . . . . . . . . . . . . . . . . . . . . . . . . 5

6 Conclusion 5

1
1 Introduction
JavaScript est un langage de programmation utilisé principalement pour le
développement web. Il permet de rendre les sites web interactifs et dynamiques.
Ce langage est exécuté côté client (dans le navigateur) et peut manipuler le DOM
(Document Object Model) pour modifier le contenu de la page en temps réel.

2 Les Bases de JavaScript

2.1 Types de Données
JavaScript prend en charge plusieurs types de données :
• Nombre : Les nombres peuvent être des entiers ou des décimaux (ex. :
42, 3.14).
• Chaı̂nes de caractères : Les chaı̂nes de texte, entre guillemets (ex. :
”Bonjour”).
• Booléen : Peut être soit true ou false.
• Tableaux : Une liste de valeurs, pouvant contenir des éléments de types
différents.
• Objets : Une collection de paires clé-valeur.

2.2 Déclaration de Variables

JavaScript utilise trois mots-clés pour déclarer des variables :
• var : Ancien mot-clé pour déclarer une variable (évitez son utilisation,
car il est obsolète).
• let : Utilisé pour déclarer une variable avec portée de bloc.
• const : Utilisé pour déclarer une constante, c’est-à-dire une variable qui
ne peut pas être modifiée après son initialisation.
Exemple :
let nom = "Alice";
const age = 25;

2.3 Opérateurs
Les opérateurs en JavaScript incluent :
• Opérateurs arithmétiques : +, -, *, /,
• Opérateurs de comparaison : ==, ===, !=, !==, ¿, ¡, ¿=, ¡=
• Opérateurs logiques : (ET), || (OU), ! (NON)

2
3 Structures de Contrôle
3.1 Conditionnels
3.1.1 If...else
L’instruction if permet d’exécuter du code seulement si une condition est vraie.
Exemple :
if (age >= 18) {
console.log("Vous e
^tes majeur.");
} else {
console.log("Vous ^
etes mineur.");
}

3.1.2 Switch
L’instruction switch permet de tester une variable par rapport à plusieurs
valeurs possibles.
Exemple :
switch (jour) {
case ’Lundi’:
console.log("C’est le début de la semaine.");
break;
case ’Vendredi’:
console.log("C’est presque le week-end !");
break;
default:
console.log("C’est un jour normal.");
}

3.2 Boucles
3.2.1 For
La boucle for permet de répéter un bloc de code un certain nombre de fois.
Exemple :
for (let i = 0; i < 5; i++) {
console.log(i);
}

3.2.2 While
La boucle while continue tant qu’une condition est vraie.
Exemple :

3
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

4 Fonctions
Une fonction est un bloc de code qui peut être exécuté lorsque cela est nécessaire.
Il est possible de définir une fonction avec le mot-clé function.
Exemple :

function saluer(nom) {
return "Bonjour, " + nom;
}
Appel de la fonction :

console.log(saluer("Alice")); % Affiche "Bonjour, Alice"

4.1 Fonctions fléchées (Arrow functions)

Une fonction fléchée est une manière plus concise d’écrire une fonction.
Exemple :
const saluer = (nom) => "Bonjour, " + nom;

5 Manipulation du DOM
Le DOM (Document Object Model) est une interface qui permet de manipuler
les éléments d’une page web.

5.1 Sélectionner un élément

Pour sélectionner un élément dans le DOM, on utilise des méthodes comme
getElementById, querySelector ou getElementsByClassName.
Exemple :
let element = document.getElementById("monElement");

5.2 Modifier le contenu d’un élément

On peut modifier le contenu d’un élément avec la propriété innerHTML.
Exemple :

element.innerHTML = "Nouveau texte";

4
5.3 Ajouter un événement
Les événements permettent d’exécuter une fonction lorsqu’un utilisateur inter-
agit avec un élément (clic, survol, etc.).
Exemple :

let bouton = document.getElementById("monBouton");

bouton.addEventListener("click", function() {
alert("Vous avez cliqué sur le bouton !");
});

6 Conclusion
JavaScript est un langage puissant et essentiel pour le développement web mod-
erne. En maı̂trisant les concepts de base tels que les variables, les structures de
contrôle, les fonctions et la manipulation du DOM, vous serez capable de créer
des pages web interactives et dynamiques.