1. La balise <script>
Avant de plonger dans l'étude détaillée du HTML, j'aimerais te faire découvrir une autre technologie cool : le langage JavaScript.
JavaScript est un puissant langage de programmation utilisé pour créer des pages web dynamiques et interactives. Il permet de réagir aux actions des utilisateurs, de modifier le contenu des pages web, d'interagir avec des serveurs et bien d'autres choses pour rendre ton site plus sympa à utiliser.
Pour l'instant, on ne va pas étudier JavaScript en détail, mais je vais parfois l'utiliser dans les exemples. Du coup, voyons comment intégrer du JavaScript dans un document HTML.
La balise <script> est utilisée pour intégrer du
code JavaScript dans un document HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction à JavaScript</title>
</head>
<body>
<h1>Bienvenue sur mon site!</h1>
<script>
// Ton code JavaScript ici
alert('Salut, le monde!');
</script>
</body>
</html>
Dans cet exemple, la balise <script> est utilisée
pour intégrer un simple code JavaScript qui affiche une fenêtre pop-up avec
le message "Salut, le monde!".
2. Connecter un script
Parfois, il est préférable de stocker le code JavaScript
dans un fichier séparé. Ça permet une meilleure
organisation et réutilisation du code. Pour connecter un fichier JavaScript,
on utilise aussi la balise <script>, et grâce à l'attribut
src, on spécifie le nom du fichier JavaScript.
Connexion d'un fichier JavaScript externe :
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction à JavaScript</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Bienvenue sur mon site!</h1>
</body>
</html>
Ce fichier HTML demande au navigateur de connecter le fichier JavaScript appelé script.js, qui peut contenir le même code que dans l'exemple précédent :
//script.js:
// Ton code JavaScript ici
alert('Salut, le monde!');
L'attribut defer est utilisé pour indiquer au navigateur
d'exécuter le script une fois que tout le document HTML est complètement chargé
et affiché.
3. Code inline
Tu te rappelles comment on écrivait des styles CSS directement dans l'attribut style d'un élément ?
<p style="color:red"> Rouge</p>
On peut faire pareil avec du code JavaScript.
Par exemple, si on veut qu'un élément change de couleur en bleu quand on clique dessus, alors voici le code qu'on doit écrire :
<p style="color:red" onclick="this.style.color = 'blue';">Rouge</p>
Le code en vert est le JavaScript qui sera exécuté
si un utilisateur clique sur l'élément <p>. Facile, non ?
-
onclick: Attribut HTML qui spécifie une fonction exécutée lors d'un clic sur un élément. this: Référence à l'élément qui a été cliqué.-
style.color: Propriété CSS qui modifie la couleur du texte d'un élément.
GO TO FULL VERSION