JavaScript: Guide Complet Pour Débutants
Transféré par
Ayagon-EJavaScript: Guide Complet Pour Débutants
Transféré par
Ayagon-EJAVASCRIP
T
F. OUMADANE AYOUB
JavaScript
• JavaScript a été créé en 1995 par Brendan Eich, un ingénieur de la
société Netscape.
• Il a développé la première version en seulement 10 jours !
Aujourd’hui, c’est l’une des langues de programmation les plus
utilisées au monde.
Pourquoi JavaScript est-elle si importante ?
C’est le seul langage compris par tous les navigateurs web.
Elle est utilisée partout :
• Sites web
• Applications mobiles
• Jeux vidéo
• Applications de bureau
• Serveurs (grâce à [Link])
Ce qu’on peut faire avec JavaScript
Créer des effets interactifs (animations, boutons dynamiques, menus…).
Réaliser des calculs dans la page.
Afficher des messages et alertes pour l’utilisateur.
Charger des données sans recharger la page (AJAX).
Construire de vraies applications web modernes (avec React, Vue, ou Angular).
1. Les variables
Une variable sert à stocker une information (comme un nom, un âge,
un message...).
Exemple :
<script>
let nom = "Salim";
let age = 18;
[Link]("Bonjour " + nom + ", tu as " + age + " ans.");
</script>
F. OUMADANE AYOUB
F. OUMADANE Ayoub
2. innerHTML
La propriété innerHTML sert à changer le contenu d’un élément HTML
depuis JavaScript.
Exemple :
<p id="text">Ancien texte</p>
<script>
[Link]("text").innerHTML = "Nouveau texte !";
</script>
F. OUMADANE Ayoub
3. onclick
L’attribut onclick sert à exécuter du code JavaScript quand on clique sur un
élément.
Exemple :
<p id="msg">Clique sur le bouton !</p>
<button onclick="[Link]('msg').innerHTML = 'Bravo !'">
Clique ici
</button>
4. getElementById
La méthode [Link]("id") permet de trouver un élément
HTML par son identifiant.
Exemple :
<p>Écris ton message :</p>
<input id="texte" type="text">
<button onclick="let valeur = [Link]('texte').value; ">
Garder le texte
</button>
5. alert( )
• Sert à afficher un message dans une petite fenêtre.
• Elle n’a pas de retour (elle ne renvoie rien).
Exemple :
alert("Bonjour !");
F. OUMADANE AYOUB
6. prompt( )
• Sert à demander une information à l’utilisateur.
• Elle renvoie ce que l’utilisateur a écrit (sous forme de texte).
Exemple :
let nom = prompt("Quel est ton nom ?");
alert("Bonjour " + nom + " !");
F. OUMADANE Ayoub
7. Les conditions :
Les conditions permettent d’exécuter du code seulement si une condition est vraie.
if (condition) {
// Code exécuté si la condition est vraie
} else {
// Code exécuté sinon
}
Else if:
if ( note >= 16) { alert("Excellent"); }
else if ( note >= 10 ) { alert("Bien"); }
else { alert("Échec"); }
Exercice : Validation d'âge
Vous allez vérifier si l'utilisateur est majeur ou mineur en utilisant une condition if ,
prompt et alert.
<p id="resultat">vérifier ton âge </p>
<button onclick="
let age = prompt('Quel est ton âge ?');
if (age >= 18) {
[Link]('resultat').innerHTML = 'Tu es majeur ';
} else {
[Link]('resultat').innerHTML = 'Tu es mineur ';
}
">
Vérifier
</button>
7. Conversion :
Fonction Exemple Résultat
Number("5") "5" → 5 (nombre)
String(5) 5 → "5" (texte)
Boolean(0) 0 → false (booléen)
Boolean(1) 1 → true (booléen)
8. Validation de Formulaire
La validation permet de vérifier le contenu saisi avant l’envoi :
.length → pour compter les caractères
.includes("@") → pour vérifier la présence d’un symbole
Exemple :
let email = [Link]("emailP").value;
let msg = "";
if ([Link] > 5 || [Link]("@")) {
msg = "Email valide";
}
F. OUMADANE AYOUB
F. OUMADANE Ayoub
8. Validation de Formulaire
/[A-Z]/ → vérifie les majuscules
/[a-z]/ → vérifie les minuscules
/[0-9]/ → vérifie les chiffres
.test(texte) → retourne true si le texte correspond
Exemple :
let mdp = [Link](“temp").value;
let msg = "";
if (!/[A-Z]/.test(mdp)) {
msg = "Il faut une MAJUSCULE";
}
Exercice : Validation d’un formulaire d’inscription
Créer une page d’inscription qui vérifie les informations avant d’afficher le message
“ Formulaire valide”.
Nom complet
Vérification : champ obligatoire
Email
Vérification : doit contenir le caractère @
Mot de passe
Vérification :
Minimum 8 caractères
Contient au moins une majuscule
Contient au moins un chiffre
Confirmation du mot de passe
Vérification : doit correspondre au mot de passe saisi
9. Les Fonctions (sans paramètre):
Une fonction est un bloc de code réutilisable qui exécute une tâche précise.
• Elle permet d’éviter de répéter le même code plusieurs fois.
Syntaxe :
function nomDeLaFonction( ) {
// instructions
}
Exemple :
function direBonjour( ) {
alert("Bonjour !");
}
Appel de la fonction :
direBonjour( );
10. setTimeout()
Permet d’exécuter une fonction une seule fois après un certain délai
(en millisecondes).
Exemple :
function afficherMessage( ) {
alert("Bonjour après 3 secondes");
}
setTimeout(afficherMessage, 3000);
👉 La fonction afficherMessage( ) sera exécutée une seule fois, après 3
secondes.
11. setInterval( )
Permet d’exécuter une fonction plusieurs fois, à intervalles
réguliers. (En boucle)
Exemple :
function afficherHeure( ) {
alert("Ceci s'affiche toutes les 2 secondes");
}
setInterval(afficherHeure, 2000);
👉 La fonction afficherHeure( ) sera exécutée toutes les 2 secondes.
Mouse events:
onclick Se déclenche quand l’utilisateur clique une fois sur l’élément.
ondblclick Se déclenche quand l’utilisateur fait un double-clic sur l’élément.
onmouseenter Se déclenche quand la souris entre dans l’élément (ne se répète pas).
onmouseleave Se déclenche quand la souris sort complètement de l’élément.
onmousedown Se déclenche au moment où l’utilisateur appuie sur un bouton de la
souris.
onmouseup Se déclenche quand l’utilisateur relâche le bouton de la souris.
onmousemove Se déclenche à chaque mouvement de la souris au-dessus de l’élément.
Les tableaux (Arrays)
Définition
Un array est une structure qui permet de stocker plusieurs valeurs dans une
seule variable.
let notes = [12, 15, 9, 18];
Accès aux éléments
L’index commence toujours à 0.
[Link](notes[0]); // 12
[Link](notes[2]); // 9
Modifier une valeur :
notes[1] = 16;
Taille d’un tableau F. OUMADANE AYOUB
[Link]([Link]); // 4
Ajouter et supprimer des éléments
Ajouter à la fin :
[Link](20);
Ajouter au début :
[Link](10);
Supprimer le premier :
[Link]( );
Supprimer le dernier :
[Link]( );
F. OUMADANE Ayoub
Parcourir un tableau
Avec for :
for (let i = 0; i < [Link]; i++) {
[Link] (notes[i]);
}
Méthodes importantes
• slice( ) : extraire une partie
let nouvellesNotes = [Link](1, 3);
• splice( ) : supprimer ou ajouter
[Link](1, 2); // supprime 2 éléments à partir de l’index 1
Tableau multidimensionnel :
Un tableau multidimensionnel est un tableau qui contient d’autres tableaux.
let classe = [
["Ali", 14],
["Sara", 17],
["Omar", 12]
];
• chaque ligne est un sous-tableau
• accès avec deux indices
classe[0][0]; // "Ali"
classe[1][1]; // 17
push( ) avec un tableau multidimensionnel
Ajouter une ligne
[Link](["Yassine", 15]);
b) Ajouter dans un sous-tableau
classe[0].push(16);
➡ ajoute une valeur dans la ligne de Ali
splice( ) avec un tableau multidimensionnel
a) Supprimer une ligne
[Link](1, 1);
➡ supprime Sara
👉 très important à comprendre
classe[1].splice(1, 1); F. OUMADANE AYOUB
➡ supprime la note de Sara
Méthodes de sélection en JavaScript
Un ou
Ce qu’elle
Méthode plusieurs Exemple HTML Exemple JavaScript
sélectionne
éléments
getElementsByClassName Tous les éléments Plusieurs <p class="box">Texte</p> [Link]("box");
("classe") ayant une classe
donnée
getElementsByTagName Tous les éléments Plusieurs <p>Paragraphe</p> [Link]("p");
("tag") ayant le même tag
HTML
querySelector("sélecteur Le premier élément Un seul <div class="box"></div> [Link](".box").[Link]
CSS") qui correspond au ="2px solid blue";
sélecteur CSS
querySelectorAll Tous les éléments Plusieurs <p class="text"></p> [Link](".text");
("sélecteur CSS") correspondant au <p class="text"></p>
sélecteur CSS
F. OUMADANE AYOUB
F. OUMADANE Ayoub
Thank You
F. OUMADANE Ayoub