Où placer le code dans la page
Les codes Javascript sont insérés au moyen de l'élément <script>. Cet élément possède un attribut type qui sert à indiquer le type de langage que l'on va utiliser. Dans notre cas, il s'agit de Javascript, mais ça pourrait être autre chose, comme du VBScript, bien que ce soit extrêmement rare.
En HTML 4 et XHTML 1.x, l'attribut type est obligatoire. En revanche, en HTML5, il ne l'est pas. C'est pourquoi les exemples de ce cours, en HTML5, ne comporteront pas cet attribut.
Si vous n'utilisez pas le HTML5, sachez que l'attribut type prend comme valeur text/javascript, qui est en fait le type MIME d'un code Javascript.
Le type MIME est un identifiant qui décrit un format de données. Ici, avec text/javascript, il s'agit de données textuelles et c'est du Javascript.
Pour placer du code Javascript directement dans votre page Web, rien de plus simple, on fait comme dans l'exemple du Hello world! : on place le code au sein de l'élément <script> :
Code : HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head>
<body>
<script>
alert('Hello world!');
</script>
</body> </html> |
Si vous utilisez les normes HTML 4.01 et XHTML 1.x, il est souvent nécessaire d'utiliser des commentaires d'encadrement pour que votre page soit conforme à ces normes. Si par contre, comme dans ce cours, vous utilisez la norme HTML5, les commentaires d'encadrement sont inutiles.
Les commentaires d’encadrement servent à isoler le code Javascript pour que le validateur du W3C (World Wide Web Consortium) ne l'interprète pas. Si par exemple votre code Javascript contient des chevrons < et >, le validateur va croire qu'il s'agit de balises HTML mal fermées, et donc va invalider la page. Ce n'est pas grave en soi, mais une page sans erreurs, c'est toujours mieux !
Les commentaires d'encadrement ressemblent à des commentaires HTML et se placent comme ceci :
Code : HTML
1 2 3 4 5 6 7 8 9 |
<body> <script> <!--
valeur_1 > valeur_2;
//--> </script> </body> |
Il est possible, et même conseillé, d'écrire le code Javascript dans un fichier externe, portant l'extension .js. Ce fichier est ensuite appelé depuis la page Web au moyen de l'élément <script> et de son attribut src qui contient l'URL du fichier .js. Voici tout de suite un petit exemple :
Code : JavaScript - Contenu du fichier hello.js
1 |
alert('Hello world!'); |
Code : HTML - Page Web
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head>
<body>
<script src="hello.js"></script>
</body> </html> |
On suppose ici que le fichier hello.js se trouve dans le même répertoire que la page Web.
Il vaut mieux privilégier un fichier externe plutôt que d'inclure le code Javascript directement dans la page, pour la simple et bonne raison que le fichier externe est mis en cache par le navigateur, et n'est donc pas rechargé à chaque chargement de page, ce qui accélère l’affichage de la page.
La plupart des cours de Javascript, et des exemples donnés un peu partout, montrent qu'il faut placer l'élément <script> au sein de l'élément <head> quand on l'utilise pour charger un fichier Javascript. C'est correct, oui, mais il y a mieux !
Une page Web est lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le <head>, puis les éléments de <body> les uns à la suite des autres. Si vous appelez un fichier Javascript dès le début du chargement de la page, le navigateur va donc charger ce fichier, et si ce dernier est volumineux, le chargement de la page s'en trouvera ralenti. C'est normal puisque le navigateur va charger le fichier avant de commencer à afficher le contenu de la page.
Pour pallier ce problème, il est conseillé de placer les éléments <script> juste avant la fermeture de l’élément <body>, comme ceci :
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 |
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head>
<body>
<p> <!--
Contenu de la page Web
...
--> </p>
<script> // Un peu de code Javascript... </script>
<script src="hello.js"></script>
</body> </html> |
Il est à noter que certains navigateurs modernes chargent automatiquement les fichiers Javascript en dernier, mais ce n'est pas toujours le cas. C'est pour cela qu'il vaut mieux s'en tenir à cette méthode.
Créé avec HelpNDoc Personal Edition: Création d'aide CHM, PDF, DOC et HTML d'une même source