Cours d'initiation au JavaScript
Table des matières
1. Introduction
2. Configuration de l'environnement
3. Syntaxe de base
4. Variables et types de données
5. Opérateurs
6. Structures de contrôle
7. Fonctions
8. Objets et tableaux
9. DOM et événements
10. Projet pratique
1. Introduction
Qu'est-ce que JavaScript ?
JavaScript (JS) est un langage de programmation dynamique principalement
utilisé pour :
• Rendre les pages web interactives
• Développer des applications web
• Créer des serveurs ([Link])
• Développer des applications mobiles et desktop
Pourquoi apprendre JavaScript ?
• Polyvalent : Frontend, backend, mobile, desktop
• Facile à commencer : Pas de compilation nécessaire
• Grande communauté : Nombreuses ressources et bibliothèques
• Demandé sur le marché : Un des langages les plus populaires
2. Configuration de l'environnement
Outils nécessaires
1. Navigateur web (Chrome, Firefox, Safari)
2. Éditeur de code (VS Code, Sublime Text, Atom)
3. Console du navigateur (F12 → Console)
Premier test
Ouvrez la console de votre navigateur et tapez :
[Link]("Bonjour, JavaScript !");
3. Syntaxe de base
Commentaires
// Commentaire sur une ligne
/*
Commentaire
sur plusieurs lignes
*/
Instructions
• Chaque instruction se termine par un point-virgule (;)
• JavaScript est sensible à la casse
• Les espaces et retours à la ligne sont généralement ignorés
Affichage
[Link]("Message dans la console");
alert("Message dans une popup");
[Link]("Message sur la page");
4. Variables et types de données
Déclaration de variables
var nom = "Jean"; // Ancienne syntaxe (éviter)
let age = 25; // Variable modifiable
const PI = 3.14159; // Constante (non modifiable)
Types de données primitifs
Nombres (Number)
let entier = 42;
let decimal = 3.14;
let negatif = -10;
Chaînes de caractères (String)
let prenom = "Marie";
let nom = 'Dupont';
let phrase = `Bonjour ${prenom}!`; // Template literal
Booléens (Boolean)
let estVrai = true;
let estFaux = false;
Autres types
let indefini = undefined;
let vide = null;
Vérification du type
[Link](typeof 42); // "number"
[Link](typeof "Hello"); // "string"
[Link](typeof true); // "boolean"
5. Opérateurs
Opérateurs arithmétiques
let a = 10, b = 3;
[Link](a + b); // Addition : 13
[Link](a - b); // Soustraction : 7
[Link](a * b); // Multiplication : 30
[Link](a / b); // Division : 3.333...
[Link](a % b); // Modulo (reste) : 1
[Link](a ** b); // Puissance : 1000
Opérateurs de comparaison
let x = 5, y = "5";
[Link](x == y); // true (égalité avec conversion)
[Link](x === y); // false (égalité stricte)
[Link](x != y); // false
[Link](x !== y); // true
[Link](x > 3); // true
[Link](x <= 5); // true
Opérateurs logiques
let a = true, b = false;
[Link](a && b); // ET logique : false
[Link](a || b); // OU logique : true
[Link](!a); // NON logique : false
6. Structures de contrôle
Conditions
if / else
let age = 18;
if (age >= 18) {
[Link]("Vous êtes majeur");
} else {
[Link]("Vous êtes mineur");
if / else if / else
let note = 15;
if (note >= 16) {
[Link]("Très bien");
} else if (note >= 14) {
[Link]("Bien");
} else if (note >= 10) {
[Link]("Assez bien");
} else {
[Link]("Insuffisant");
switch
let jour = 3;
let nomJour;
switch (jour) {
case 1:
nomJour = "Lundi";
break;
case 2:
nomJour = "Mardi";
break;
case 3:
nomJour = "Mercredi";
break;
default:
nomJour = "Jour inconnu";
Boucles
for
// Afficher les nombres de 1 à 5
for (let i = 1; i <= 5; i++) {
[Link](i);
while
let compteur = 0;
while (compteur < 3) {
[Link]("Compteur : " + compteur);
compteur++;
do...while
let nombre;
do {
nombre = prompt("Entrez un nombre supérieur à 10 :");
} while (nombre <= 10);
7. Fonctions
Déclaration de fonction
function saluer(nom) {
return "Bonjour " + nom + "!";
let message = saluer("Pierre");
[Link](message); // "Bonjour Pierre!"
Fonction avec plusieurs paramètres
function calculer(a, b, operation) {
if (operation === "addition") {
return a + b;
} else if (operation === "multiplication") {
return a * b;
return "Opération non supportée";
[Link](calculer(5, 3, "addition")); // 8
[Link](calculer(4, 7, "multiplication")); // 28
Fonctions fléchées (ES6)
// Syntaxe traditionnelle
function carre(x) {
return x * x;
// Syntaxe fléchée
const carreFlèche = (x) => x * x;
// Ou encore plus court pour un seul paramètre
const double = x => x * 2;
Fonction avec valeurs par défaut
function presenter(nom, age = 0) {
return `Je m'appelle ${nom} et j'ai ${age} ans.`;
[Link](presenter("Julie")); // "Je m'appelle Julie et j'ai 0 ans."
[Link](presenter("Tom", 25)); // "Je m'appelle Tom et j'ai 25 ans."
8. Objets et tableaux
Tableaux (Arrays)
// Création
let fruits = ["pomme", "banane", "orange"];
let nombres = [1, 2, 3, 4, 5];
let mixte = ["texte", 42, true];
// Accès aux éléments
[Link](fruits[0]); // "pomme"
[Link]([Link]); // 3
// Méthodes utiles
[Link]("kiwi"); // Ajouter à la fin
[Link](); // Supprimer le dernier
[Link]("fraise"); // Ajouter au début
[Link](); // Supprimer le premier
// Parcourir un tableau
for (let i = 0; i < [Link]; i++) {
[Link](fruits[i]);
// Méthode moderne avec forEach
[Link](function(fruit) {
[Link](fruit);
});
Objets
// Création d'un objet
let personne = {
nom: "Dubois",
prenom: "Alice",
age: 30,
ville: "Paris",
saluer: function() {
return "Bonjour, je suis " + [Link] + " " + [Link];
};
// Accès aux propriétés
[Link]([Link]); // "Dubois"
[Link](personne["age"]); // 30
[Link]([Link]()); // "Bonjour, je suis Alice Dubois"
// Ajouter/modifier des propriétés
[Link] = "alice@[Link]";
[Link] = 31;
// Parcourir un objet
for (let cle in personne) {
[Link](cle + ": " + personne[cle]);
9. DOM et événements
Sélection d'éléments HTML
// Par ID
let element = [Link]("monId");
// Par classe
let elements = [Link]("maClasse");
// Par sélecteur CSS
let premier = [Link](".maClasse");
let tous = [Link]("p");
Modification du contenu
// Modifier le texte
[Link]("titre").textContent = "Nouveau titre";
// Modifier le HTML
[Link]("contenu").innerHTML = "<p>Nouveau paragraphe</p>";
// Modifier les styles
let element = [Link]("monDiv");
[Link] = "red";
[Link] = "20px";
Gestion des événements
// Événement au clic
[Link]("monBouton").addEventListener("click", function() {
alert("Bouton cliqué !");
});
// Événement avec fonction séparée
function changerCouleur() {
[Link] = "lightblue";
[Link]("boutonCouleur").addEventListener("click",
changerCouleur);
// Événement sur un formulaire
[Link]("monFormulaire").addEventListener("submit",
function(event) {
[Link](); // Empêcher l'envoi du formulaire
let nom = [Link]("inputNom").value;
[Link]("Nom saisi : " + nom);
});
10. Projet pratique
Calculatrice simple
Créons une calculatrice basique qui illustre tous les concepts vus :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Calculatrice JS</title>
</head>
<body>
<div id="calculatrice">
<h1>Calculatrice</h1>
<input type="number" id="nombre1" placeholder="Premier nombre">
<select id="operation">
<option value="+">Addition</option>
<option value="-">Soustraction</option>
<option value="*">Multiplication</option>
<option value="/">Division</option>
</select>
<input type="number" id="nombre2" placeholder="Deuxième nombre">
<button id="calculer">Calculer</button>
<div id="resultat"></div>
</div>
<script src="[Link]"></script>
</body>
</html>
JavaScript ([Link])
// Fonction pour effectuer le calcul
function calculer(a, b, op) {
switch(op) {
case '+':
return a + b;
case '-':
return a - b;
case '*':
return a * b;
case '/':
return b !== 0 ? a / b : 'Division par zéro impossible';
default:
return 'Opération non valide';
// Fonction pour afficher le résultat
function afficherResultat(resultat) {
const divResultat = [Link]('resultat');
[Link] = `<h2>Résultat : ${resultat}</h2>`;
[Link] = 'blue';
[Link] = '20px';
// Gestionnaire d'événement pour le bouton
[Link]('calculer').addEventListener('click', function() {
// Récupérer les valeurs
const nombre1 = parseFloat([Link]('nombre1').value);
const nombre2 = parseFloat([Link]('nombre2').value);
const operation = [Link]('operation').value;
// Vérifier que les nombres sont valides
if (isNaN(nombre1) || isNaN(nombre2)) {
afficherResultat('Veuillez entrer des nombres valides');
return;
// Calculer et afficher
const resultat = calculer(nombre1, nombre2, operation);
afficherResultat(resultat);
});
// Permettre le calcul avec la touche Entrée
[Link]('keypress', function(event) {
if ([Link] === 'Enter') {
[Link]('calculer').click();
});
Exercices pratiques
Exercice 1 : Variables et opérateurs
Créez des variables pour stocker votre nom, âge et ville, puis affichez une phrase
de présentation.
Exercice 2 : Fonction de validation
Écrivez une fonction qui vérifie si un mot de passe est valide (au moins 8
caractères, contient une majuscule et un chiffre).
Exercice 3 : Manipulation de tableau
Créez un tableau de notes, calculez la moyenne et déterminez si l'étudiant a réussi
(moyenne ≥ 10).
Exercice 4 : Objet étudiant
Créez un objet représentant un étudiant avec ses informations et ses méthodes
pour calculer sa moyenne.
Exercice 5 : Interface interactive
Créez une page avec des boutons qui changent la couleur de fond, la taille du
texte et ajoutent du contenu.
Ressources pour aller plus loin
Documentation officielle
• MDN Web Docs
• [Link]
Pratique en ligne
• CodePen
• JSFiddle
• FreeCodeCamp
Prochaines étapes
1. ES6+ Features : Destructuring, modules, async/await
2. Frameworks : React, Vue, Angular
3. [Link] : JavaScript côté serveur
4. APIs : Fetch, manipulation de données JSON
5. Outils de développement : NPM, Webpack, Git
Conclusion
Ce cours d'initiation vous a donné les bases essentielles de JavaScript. La clé pour
progresser est la pratique régulière. Commencez par de petits projets et
augmentez progressivement la complexité.
Conseils pour continuer :
• Pratiquez tous les jours, même 15 minutes
• Lisez le code d'autres développeurs
• Participez à des projets open source
• Restez curieux et n'hésitez pas à expérimenter !
Bon apprentissage avec JavaScript !
