Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation qui permet de rendre votre page web dynamique. Grâce à JavaScript, vous pouvez faire des choses amusantes comme :
- Faire apparaître des alertes
- Réagir aux actions de l'utilisateur (comme un clic)
- Modifier le contenu de la page sans la recharger
Comment ajouter du JavaScript à votre page ?
Pour inclure du JavaScript dans votre page HTML, il suffit de créer un fichier index.js dans le dossier js de vôtre projet. Voici comment appeler votre fichier JavaScript :
Les balises <script> indiquent au navigateur que vous allez appeler un ficher JavaScript. Vous pouvez placer ce script soit dans le <head>, soit juste avant la fin de la balise </body> (c'est préférable pour que le HTML se charge avant d'exécuter le JavaScript).
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Étape 1 : Afficher une alerte avec JavaScript
Commençons doucement ! Ajoutons un message d'alerte qui apparaît lorsque la page est chargée.
Le code alert() est une fonction JavaScript qui affiche une boîte de dialogue avec un message. Ce genre de pop-up est souvent utilisé pour avertir ou informer l'utilisateur.
Explication
- alert() : C'est comme un petit panneau qui s'affiche et dit : "Hé, regarde ça !". Le texte que vous mettez entre les parenthèses sera affiché. Essayez de sauvegarder votre fichier HTML. Vous devriez voir apparaître une pop-up avec votre message.
Étape 2 : Modifier du texte avec JavaScript
Maintenant, ajoutons un peu de dynamisme à votre page en modifiant le contenu de la page avec JavaScript.
- Ajoutez un élément HTML avec un identifiant (id) que vous allez manipuler avec JavaScript. Par exemple, un paragraphe avec du texte.
2. Utilisez JavaScript pour modifier ce texte :
Explication
- document.getElementById("mon-paragraphe") : Cette fonction permet de sélectionner un élément HTML ayant un certain id (ici, "mon-paragraphe").
- .textContent : C'est la propriété qui contient le texte à l'intérieur de l'élément. En le modifiant, vous changez le texte qui s'affiche à l'écran. Sauvegarder, et vous verrez que le texte a été modifié automatiquement par JavaScript !
Étape 3 : Réagir aux clics d'un bouton
Une page interactive n'est rien sans boutons ! Voyons comment faire réagir votre page à un clic.
- Ajoutez un bouton à votre HTML :
2. Utilisons JavaScript pour détecter quand ce bouton est cliqué et changer le texte du paragraphe.
Explication
- document.getElementById("mon-bouton") : Sélectionne le bouton.
- addEventListener("click", function() {...}) : Ajoute un "écouteur" au bouton qui attend qu'on clique dessus. Quand l'utilisateur clique, la fonction à l'intérieur est exécutée.
- function () { ... } : C'est une fonction JavaScript. Elle contient les instructions qui seront exécutées quand l'événement (ici, le clic) se produit. Cliquez sur le bouton et voyez le texte du paragraphe changer !
Étape 4 : Interagir avec l'utilisateur via des saisies
Maintenant, ajoutons un champ de texte où l'utilisateur peut écrire quelque chose, et nous afficherons son texte avec JavaScript.
- Ajoutez un champ de texte et un bouton à votre HTML :
2. Utilisez JavaScript pour récupérer et afficher le texte que l'utilisateur a entré :
Explication
- champTexte.value : Récupère la valeur entrée par l'utilisateur dans le champ texte.
- texteAffiche.textContent : Affiche cette valeur dans le paragraphe. Essayez d'entrer du texte dans le champ, cliquez sur le bouton, et voyez comment JavaScript réagit !
Conclusion : Bravo pour vos premiers pas en JavaScript 🎉
Vous venez d'apprendre les bases de JavaScript : comment ajouter du code à une page web, manipuler du texte, réagir aux actions de l'utilisateur, et afficher du contenu dynamique. 🎈
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer