Cours Complet de JavaScript - Niveau Débutant
Basé sur les exercices de révision (HTML/CSS/JS/WordPress)
✨ Introduction à JavaScript
JavaScript est un langage de programmation utilisé pour rendre les pages web interactives. Il permet
d'agir sur le HTML et le CSS et s'exécute directement dans le navigateur.
📄 Comment insérer du JavaScript dans une page HTML ?
1. Dans une balise <script> dans la même page HTML :
<script>
alert("Bonjour !");
</script>
2. Dans un fichier séparé
<script src="mon_script.js"></script>
🔍 Accéder aux éléments HTML (DOM)
Pour interagir avec un élément HTML, on utilise le DOM :
let nom = [Link]("champNom").value;
• getElementById() : Cible un élément avec un identifiant.
• .value : Permet de récupérer ou modifier la valeur d'un champ de formulaire.
✅ Les conditions (if)
Permet de vérifier si une condition est vraie :
if (email === "") {
alert("Email obligatoire");
}
1
📅 Empêcher le rechargement d'un formulaire
Quand on clique sur un bouton "Submit", la page se recharge. Pour l'éviter :
[Link]("form").addEventListener("submit", function(e) {
[Link]();
});
✍️ Concaténation de texte
let fullName = `${nom} ${prenom}`;
🔢 Conversion en nombre
let rayon = parseFloat([Link]("rayon").value);
📊 Calcul mathématique : Volume d'une sphère
let volume = (4/3) * [Link] * [Link](rayon, 3);
📃 Créer un nouvel élément HTML (To-do list)
const p = [Link]("p");
[Link] = "Ma tâche";
[Link]("output").appendChild(p);
🕒 Afficher la date et l'heure actuelles
const now = new Date();
let date = `${[Link]()}/${[Link]() + 1}/${[Link]()}`;
let heure = `${[Link]()}:${[Link]()}`;
2
📈 Tableau récapitulatif des fonctions importantes
Fonction JavaScript Utilité
getElementById("id") Cible un élément HTML par son id
.value Récupère ou modifie la valeur d'un champ de formulaire
addEventListener("event", fn) Réagit à un événement (clic, submit, etc.)
alert("message") Affiche un message d'alerte à l'utilisateur
parseFloat() Convertit une chaîne en nombre décimal
[Link] , [Link]() Fonctions mathématiques utiles pour les calculs
createElement("tag") Crée un élément HTML (ex: <p> )
appendChild(element) Ajoute un élément dans le HTML (dans un conteneur)
Crée un objet date pour afficher la date et l'heure
new Date()
actuelles
🚀 Conclusion
Avec ces bases, tu peux déjà faire :
• Des formulaires interactifs
• Des calculs dynamiques
• Des affichages conditionnels
• Des listes dynamiques
• L'affichage de l'heure et de la date
Tu veux aller plus loin ? Tu peux apprendre : les boucles, les fonctions avancées, le localStorage, les API,
etc.
Souviens-toi : JavaScript rend les pages vivantes !
