SOMMAIRE
INTRODUCTION A JAVASCRIPT ....................................................................................... 2
I. LES BASES DE JAVASCRIPT ....................................................................................... 2
II. TYPES DE DONNEES : .................................................................................................. 2
III. FONCTIONS ................................................................................................................ 3
IV. Le DOM (Document Object Model) ........................................................................... 3
V. ASYNCHRONE ET PROMESSES ................................................................................ 4
1
INTRODUCTION A JAVASCRIPT
• Qu’est-ce que JavaScript ?
• JavaScript est un langage de programmation interprété, principalement utilisé
pour ajouter de l’interactivité aux pages web.
• Il fonctionne côté client (navigateur) mais peut également être utilisé côté
serveur avec Node.js.
• Standardisé sous le nom ECMAScript.
• Intégration dans une page web :
• Fichier interne : <script>console.log("Bonjour");</script>
• Fichier externe : <script src="script.js"></script>
I. LES BASES DE JAVASCRIPT
1. VARIABLES :
• Déclaration : var, let, const.
• let : portée de bloc, peut être modifié.
• const : constante, ne peut pas être modifié.
• var : obsolète, portée fonctionnelle.
• Exemple :
let nom = "Alice";
Const PI = 3.14;
II. TYPES DE DONNEES :
• Primitifs : string, number, boolean, undefined, null, symbol, bigint.
• Objets : Tableaux, objets, fonctions.
1. Opérateurs :
• Mathématiques : +, -, *, /, %.
• Comparaison : ==, ===, !=, !==, <, >.
• Logiques : &&, ||, !.
2. Structures de contrôle :
2
• Conditions : if, else, else if, opérateur ternaire.
• Boucles : for, while, do...while, for...of, for...in.
III. FONCTIONS
• Déclaration :
function addition(a, b)
{
return a + b;
}
• Fonctions fléchées (ES6) :
const addition = (a, b) => a + b;
Les objets
• Création :
const personne = {
nom: "Alice",
age: 25,
saluer: function ()
{
console.log(Bonjour, je m'appelle ${this.nom});
}
};
personne.saluer();
IV. Le DOM (Document Object Model)
• Permet d’interagir avec le HTML et le CSS.
• Sélection d’éléments :
• document.querySelector() : Sélectionne le premier élément correspondant.
• document.querySelectorAll() : Sélectionne tous les éléments correspondants.
3
• Modification :
const titre = document.querySelector("h1");
titre.textContent = "Nouveau titre";
titre.style.color = "blue";
Événements
• Ajout d’interactivité en réponse aux actions de l’utilisateur.
const bouton = document.querySelector("button");
bouton.addEventListener("click", () => {
alert("Bouton cliqué !");
});
V. ASYNCHRONE ET PROMESSES
• Gestion des actions différées :
• Exemple d’une promesse :
fetch("https://api.exemple.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
ES6 et au-delà
• Nouveautés principales :
• let et const.
• Fonctions fléchées.
• Template strings :
const message = Bonjour, ${nom};
• Destructuration :
const { nom, age } = personne;
• Modules (import/export) :
4
import { fonction } from './module.js';
