Cours complet de JavaScript pour débutants
1. Introduction
Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation utilisé pour rendre les pages web interactives. Il
permet de manipuler le DOM, gérer les événements utilisateur et interagir avec des API.
Où exécuter JavaScript ?
Navigateur : directement dans la console du navigateur.
[Link] : pour exécuter JavaScript côté serveur.
Fichiers .js : intégration dans du HTML avec <script>.
2. Bases du langage
Déclaration de varia6bles
var x = 10; // Déclaration d'une variable avec var (ancienne méthode,
évitez son utilisation)
let y = 20; // Déclaration d'une variable modifiable avec let
const z = 30; // Déclaration d'une constante qui ne peut pas être modifiée
Types de données
Primitifs : string (chaîne de caractères), number (nombre), boolean (vrai ou faux),
null (valeur vide), undefined (non défini)
Complexes : array (tableaux), object (objets)
Opérateurs
Arithmétiques : + (addition), - (soustraction), * (multiplication), / (division), %
(modulo, reste de la division)
Comparaison : == (égalité sans vérification de type), === (égalité stricte avec
vérification de type), != (différent), !== (différent strictement), >, <, >=, <=
Logiques : && (ET logique), || (OU logique), ! (NON logique)
3. Structures de contrôle
Conditions
if (x > y) {
[Link]("x est plus grand"); // Si x est supérieur à y, afficher ce
message
} else {
[Link]("y est plus grand"); // Sinon, afficher celui-ci
}
Boucles
for (let i = 0; i < 5; i++) {
[Link](i); // Affiche les nombres de 0 à 4
}
4. Fonctions et portée
Déclaration de fonctions
function addition(a, b) {
return a + b; // Retourne la somme de a et b
}
[Link](addition(5, 3)); // Affiche 8
Portée des variables
Globale : accessible partout dans le code.
Locale : définie dans une fonction, non accessible à l'extérieur.
Block Scope : variables déclarées avec let ou const dans un bloc {}.
5. Manipulation du DOM
Sélection d'éléments
let element = [Link]("monId"); // Sélectionne un élément
par son ID
let elements = [Link](".maClasse"); // Sélectionne tous
les éléments ayant la classe .maClasse
Modification du contenu
[Link] = "Nouveau texte"; // Change le texte de l'élément
Gestion des événements
[Link]("click", function() {
alert("Clic détecté !"); // Affiche une alerte quand l'utilisateur
clique sur l'élément
});
6. Tableaux et objets
Tableaux
let fruits = ["Pomme", "Banane", "Orange"];
[Link]("Mangue"); // Ajoute "Mangue" à la fin du tableau
[Link](fruits); // Affiche ["Pomme", "Banane", "Orange", "Mangue"]
Objets
let personne = {
nom: "Alice",
age: 25,
saluer: function() {
[Link]("Bonjour, je suis " + [Link]); // Affiche "Bonjour,
je suis Alice"
}
};
[Link]();
7. Programmation orientée objet
Définition de classe
class Animal {
constructor(nom) {
[Link] = nom; // Définit une propriété nom
}
crier() {
[Link]([Link] + " crie"); // Affiche "Nom de l'animal crie"
}
}
let chien = new Animal("Rex");
[Link](); // Affiche "Rex crie"
8. Asynchronisme et API
Promesses et async/await
function attendre(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); // Retourne une
promesse qui attend un certain temps
}
async function test() {
[Link]("Début");
await attendre(2000); // Attend 2 secondes
[Link]("Fin après 2s");
}
test();
Requêtes API avec fetch
fetch("[Link]
.then(response => [Link]()) // Convertit la réponse en JSON
.then(data => [Link](data)); // Affiche les données reçues
9. Introduction aux frameworks
[Link] : Développement d’interfaces dynamiques.
[Link] : Facile à apprendre et puissant.
Angular : Utilisé pour les applications complexes.
10. Mini-projet : To-do list
Objectif
Créer une liste de tâches où l'utilisateur peut ajouter et supprimer des éléments.
Code HTML
<input type="text" id="task" placeholder="Nouvelle tâche">
<button ><ul id="liste"></ul>
Code JavaScript
function ajouterTache() {
let input = [Link]("task"); // Récupère la valeur du
champ de saisie
let liste = [Link]("liste"); // Sélectionne la liste
des tâches
let li = [Link]("li"); // Crée un nouvel élément de
liste
[Link] = [Link]; // Définit son texte avec la valeur
saisie
[Link]("click", () => [Link]()); // Supprime l'élément
au clic
[Link](li); // Ajoute l'élément à la liste
[Link] = ""; // Vide le champ de saisie
}
