■ Formation JavaScript – Débutant (Cours
Complet)
Chapitre 1 : Introduction
JavaScript est le langage de programmation du web. Il permet de rendre les pages interactives et
dynamiques. Il s’exécute directement dans le navigateur, et peut aussi fonctionner côté serveur
avec [Link].
Exemple : Affichage d’un message dans la console
[Link]('Bonjour JavaScript !');
Exercice :
Créer un fichier [Link] et un [Link] qui affichent 'Bonjour JavaScript' dans la console.
Chapitre 2 : Les bases
En JavaScript, on utilise des variables pour stocker des informations. Les mots-clés principaux sont
:
let nom = 'Ali';
const age = 25;
var pays = 'Tunisie';
Types de données : nombre, chaîne de caractères, booléen, tableau, objet.
Exercice :
Écrire un script qui demande à l’utilisateur son âge et affiche s’il est majeur ou mineur.
Chapitre 3 : Conditions et Boucles
Les conditions permettent de tester des cas. Les boucles servent à répéter du code.
let age = 18;
if(age >= 18){
[Link]('Majeur');
}else{
[Link]('Mineur');
}
Boucle for :
for(let i=0; i<5; i++){
[Link]('i =', i);
}
Exercice :
Écrire un programme qui affiche uniquement les nombres pairs entre 1 et 20.
Chapitre 4 : Fonctions
Une fonction permet de regrouper des instructions réutilisables.
function direBonjour(nom){
return 'Bonjour ' + nom;
}
[Link](direBonjour('Ali'));
Exercice :
Créer une fonction carre(nombre) qui retourne le carré du nombre donné.
Chapitre 5 : Tableaux et Objets
Les tableaux contiennent plusieurs valeurs, les objets stockent des paires clé/valeur.
let fruits = ['pomme', 'banane', 'orange'];
[Link](fruits[1]); // banane
let personne = {nom: 'Ali', age: 25};
[Link]([Link]);
Exercice :
Créer un tableau d’animaux et afficher chaque élément avec une boucle.
Chapitre 6 : DOM et Événements
Le DOM (Document Object Model) représente la structure HTML. JavaScript peut modifier cette
structure.
<button onclick="changerTexte()">Clique-moi</button>
<p id="demo">Texte initial</p>
<script>
function changerTexte(){
[Link]('demo').innerHTML = 'Texte modifié !';
}
</script>
Exercice :
Créer une page avec un bouton qui change la couleur du texte quand on clique dessus.
Chapitre 7 : Mini-Projet
Créer une calculatrice qui permet d’additionner, soustraire, multiplier et diviser deux nombres.
<input id='a' type='number'>
<input id='b' type='number'>
<button onclick='addition()'>+</button>
<p id='result'></p>
<script>
function addition(){
let a = parseFloat([Link]('a').value);
let b = parseFloat([Link]('b').value);
[Link]('result').innerText = a+b;
}
</script>
Corrigés des Exercices
Chapitre 1 : [Link]('Bonjour JavaScript');
Chapitre 2 : if (age >= 18) { [Link]('Majeur'); } else { [Link]('Mineur'); }
Chapitre 3 : for (let i=1; i<=20; i++){ if(i%2==0) [Link](i); }
Chapitre 4 : function carre(n){ return n*n; }
Chapitre 5 : let animaux = ['chat','chien','oiseau']; for(let a of animaux){ [Link](a); }
Chapitre 6 : [Link]('btn').onclick = ()=>{
[Link]('txt').[Link]='red'; }
