Insérer du JavaScript dans une page xHTML
On écrit le JS dans notre page HTML, et c'est le navigateur qui lit et exécute ce code.
Mais comment fait-il pour différencier les deux ?
Vous le savez sûrement déjà, un ordinateur, c'est bête : il faut lui dire tout ce qu'il doit faire.
Eh bien c'est ce que nous allons devoir faire : si on ne précise pas à notre navigateur que notre code est du JS, il ne le devinera pas tout seul.
Voyons donc comment le lui dire...
Revenons à notre JavaScript :
Il y a deux méthodes différentes pour insérer du JavaScript dans une page Web.
Directement dans les balises
La première méthode consiste à écrire le code directement
à l'intérieur de la balise qui va être concernée par le script.
Comment ça marche ?
Pour insérer le code dans une balise, une nouvelle
propriété est nécessaire. Il s'agit du
gestionnaire d'événements (en anglais :
event handler).
- Cette propriété est caractéristique du JS : elle suffit à dire au navigateur : "attention, ce qui suit est du JS".
- Elle porte le nom de l'événement qui doit déclencher le script (c'est pour cela qu'on parle de "gestionnaire d'événements").
- Elle contient comme valeur le script à exécuter lors de cet événement.
Pour résumer, la balise en question aura cette forme-là (ici il s'agit d'une balise seule, c'est le même principe pour les balises fonctionnant par paires) :
Code : HTML1 | <nom eventHandler="script" />
|
Examinons tout de suite un exemple.
- Nous allons utiliser un lien.
On ne veut pas qu'il nous envoie sur une autre page : c'est pourquoi nous utiliserons le symbole # en guise d'adresse.
On part donc de ceci :
Code : HTML
- L'événement déclenchant le script sera un clic de souris sur ce lien.
Le nom de cet événement est : onclick.
- Le script à exécuter sera l'ouverture d'une boîte de dialogue. Le code sera donc :
Code : JavaScript1 | alert('Bonjour !'); // (j'ai change le texte au passage)
|
Ça nous donne ceci :
Code : HTML1 | <a href="#" onclick="alert('Bonjour !');">lien</a>
|
Vous pouvez tester ce code (c'est même conseillé : réécrivez-le, vous le retiendrez beaucoup mieux qu'en faisant un copier-coller).
Résultat : notre boîte de dialogue devrait apparaître lorsque vous cliquez sur le lien
!
Après le on, le C de click doit être en minuscule ! Ceci est valable pour tous les gestionnaires d'événements.
S'ils sont écrits avec une majuscule, la page est invalide !
Si, même après le changement de la majuscule, rien ne se passe, votre navigateur a peut-être empêché le JS de s'exécuter.
Dans ce cas, référez-vous à l'aide de celui-ci.
Vous venez de créer votre premier script ! 
Maintenant, un petit exercice :
essayez de faire la même chose, mais avec une image, cette fois...
Solution :
Secret (cliquez pour afficher)Code : HTML1 | <img src="monImage.png" alt="Mon Image" onclick="alert('Pourquoi cliques-tu sur cette image ?');" />
|
Il est possible d'écrire du JavaScript directement à la place de l'adresse d'un lien, en le faisant précéder de
javascript:, comme dans cet exemple :
Code : HTML1 | <a href="javascript:alert('Coucou');"> Cliquez ici </a>
|
Cette méthode a l'avantage de ne pas faire remonter le visiteur en haut de la page, comme l'aurait fait un lien portant le petit dièse (
#) ; c'est ce que vous avez sûrement dû voir si vous avez testé le code.
Autres gestionnaires d'événements
Il existe d'autres événements que le clic de souris, rassurez-vous
.
Leur syntaxe est la même :
onevent,
event étant le nom de l'événement (en minuscule dans le tuto, pour respecter la validité du SdZ).
Les événements s'appliquent à la plupart des balises (sauf événements particuliers, relatifs à des balises précises).
En voici quelques-uns :
- onclick : au clic (gauche) de la souris
- ondblclick : lors d'un double clic
- onmouseover : au passage de la souris
- onmouseout : lorsque la souris "sort" de cet élément (en quelque sorte, le contraire de onmouseover).
Gestionnaires d'événements de la balise
<body> :
- onload : au chargement de la page
- onunload : lorsqu'on quitte la page (ou qu'on change de page).
Le mieux est de les essayer, vous verrez par vous-mêmes à quoi correspond chaque événement.
Voici une image contenant plusieurs gestionnaires d'événements :
Code : HTML1 | <img src="monImage.png" alt="Mon Image" ondblclick="alert('Double clic');" onmouseout="alert('La souris sort');" />
|
Et voici la balise
<body> pour créer une page disant "Bonjour" et "Au revoir" :
Code : HTML1
2
3 | <body onload="alert('Bonjour !');" onunload="alert('Au revoir !');">
<!-- corps de la page -->
</body>
|
Ce dernier exemple est typique de ce qu'il ne faut pas faire !
Une page contenant trop de JavaScript devient vite énervante, surtout dans ce type d'utilisation.
Entre les balises <script> et </script>
Une nouvelle paire de balises
Et si notre script est très long, on ne va quand même pas tout mettre dans notre gestionnaire d'événements ?
Rassurez-vous, s'il existe plusieurs manières différentes d'insérer du JavaScript, ce n'est pas pour rien.
La seconde solution consiste à écrire le script entre deux balises spécifiques,
<script> et
</script>.
Il faut commencer par préciser au navigateur que notre script est... du JavaScript.
Pour cela, on rajoute la propriété
type="text/javascript", ce qui nous donne ceci :
Code : HTML1
2
3
4
5
6 | <script type="text/javascript">
/* votre code javascript se trouve ici
c'est deja plus pratique pour un script de plusieurs lignes */
</script>
|
Mais il y a un problème !
Imaginez un vieux navigateur qui ne connaît pas le JS : s'il tombe sur cette balise, il va tout simplement l'ignorer, car elle lui sera inconnue. Mais tout le code qui suit sera considéré comme du texte, il va donc l'afficher sur votre page !
Pas très élégant
.
Il existe heureusement une solution...
Pour faire ignorer ce texte à ce vieux navigateur, on lui fait tout simplement croire qu'il s'agit
d'un commentaire en (x)HTML.
Pour un navigateur qui connaît le JavaScript, il saura qu'il n'a plus affaire à du (x)HTML, et passera donc la balise du commentaire (
<!--) sans en tenir compte.
Mais pour éviter qu'il soit déboussolé en rencontrant la balise de fin de commentaire (
-->), nous allons lui dire, en JS, qu'il s'agit d'un commentaire, grâce à
//.
Pour résumer, voici comment placer du JS dans une page en utilisant la balise
<script> :
Code : HTML1
2
3
4
5
6
7
8 | <script type="text/javascript">
<!--
/* et vous pouvez placer votre code JS ici
sans etre inquiete par les vieux navigateurs */
//-->
</script>
|
Dans l'en-tête ou dans le corps de la page (x)HTML
Ces balises, elles sont à mettre dans l'en-tête, ou dans le corps de la page ?
On peut les placer soit dans l'en-tête (
<head> ...
</head>), soit dans le corps (
<body> ...
</body>) de la page (x)HTML :
- dans le corps de la page, sont à placer les scripts à exécuter au chargement de cette dernière (lorsque le navigateur "lira" le code, il l'exécutera en même temps).
C'est ce que nous allons utiliser pour cet exemple, il suffit d'écrire le code à exécuter entre les balises ;
- en revanche, sont à placer dans l'en-tête les éléments qui doivent être exécutés plus tard (lors d'un événement particulier, par exemple).
Dans ce cas, le code n'est pas écrit "en vrac", nous apprendrons plus loin comment l'organiser.
Ce qui nous fait donc deux manières d'insérer le code grâce à ces balises.
Exemple d'application
Essayez de réaliser cet exemple : dans notre page web, on veut :
- une boîte de dialogue indiquant le début du chargement de la page (donc, le code est à placer au début du corps de la page),
- une autre indiquant la fin du chargement de celle-ci (donc, à la fin du corps).
Voici le code complet de la page :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<!-- en-tete du document -->
<title>Un exemple</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<!-- script pour le debut du chargement -->
<script type="text/javascript">
<!--
alert('Debut du chargement de la page');
//-->
</script>
<!-- ici se trouve le contenu de la page web -->
<p>
Vous testez un script...<br />
Enjoy ;)
</p>
<!-- script pour la fin du chargement -->
<script type="text/javascript">
<!--
alert('Fin du chargement de la page');
//-->
</script>
</body>
</html>
|
Vous remarquez que tant que la première boîte de dialogue est ouverte, la page n'est pas chargée.
En effet, le navigateur exécute le JS au fur et à mesure du chargement de la page : il attend donc que le script soit terminé avant de charger la suite.
Placer le code dans un fichier séparé
Importer un fichier externe
Comme pour le CSS, on peut très bien placer notre code dans un fichier indépendant. On dit que
le code est importé depuis un fichier externe. En CSS, l'extension de ce fichier (les deux à quatre lettres précédées d'un point à la fin d'un fichier) était
.css.
Vous l'avez peut être deviné, l'extension du fichier externe contenant du code JavaScript est
.js.
On va indiquer aux balises le nom et l'emplacement du fichier contenant notre (ou nos) script(s), grâce à la propriété
src (comme pour les images).
Comme il n'y a plus de code entre les balises, la technique pour masquer le code aux anciens navigateurs n'a plus lieu d'être.
Et voici ce que cela nous donne :
Code : HTML1 | <script type="text/javascript" src="script.js"></script>
|
Ce même fichier qui contiendra par exemple ceci :
Code : JavaScript
Créer le fichier
Si vous ne savez pas créer un fichier ayant l'extension
.js, voici comment faire.
Avec Notepad++
- Créez un nouveau fichier avec le menu Fichier, puis Nouveau.
- Dans le menu Langage, sélectionnez... Javascript !
- Enregistrez votre fichier, en lui donnant le nom que vous voulez, suivi de .js.
- Pour ouvrir à nouveau ce fichier, clic droit, puis Open in Notepad++.
Avec Bloc-notes
- Ouvrez Bloc-notes.
- Dans le menu Fichier, choisissez Enregistrer sous...
- Dans le menu déroulant Type de la nouvelle fenêtre, choisissez Tous les fichiers (ou All types en anglais).
- Entrez le nom que vous voulez, suivi de .js.
- Pour rouvrir ce fichier, faites un clic droit dessus, Ouvrir avec... puis choisissez Bloc-notes.
Enregistrer sous... avec Bloc-notes
Votre premier script
.
.
).
), le terme fonction ne doit pas vous être inconnu... On a dit tout à l'heure qu'un calcul est une instruction. La fonction f telle que f(x) = 15x - 4 est une suite de calculs, donc en quelque sorte une suite "d'instructions" (par analogie avec le JavaScript, car instruction est un terme purement informatique).
Golmote
Trouvez une formation
Suggestions
Flux RSS News
Facebook
Google+