Où et comment insérer du JavaScript ?
Où et comment insérer du JavaScript ?
-
Objectif
- Etre capable d’insérer un script JavaScript dans une page HTML
-
Introduction
- Pour placer des instructions JavaScript dans une page HTML, il faut utiliser la balise
<script>de la manière suivante : - Il existe deux manières d’insérer du code JavaScript dans une page HTML à savoir par l’insertion dans une page HTML ou par appel de module externe
-
Insertion dans une page HTML
-
Dans l’élément head
- Pour mettre le JavaScript entre les balises
<head>il faut le placer à l’intérieur d’un élémentscript. - Le code s’exécute automatiquement lors du chargement de la page HTML dans le navigateur en même temps que le contenu de la page HTML s’affiche à l’écran.
-
Dans l’élément head d’une page HTML
- Le code
JavaScriptest placé dans le corps même de la page HTML, entre les balises<body>………. Et ………</body>et de préférence le placer à la fin de la page. -
Dans une balise HTML
- Dans une balise si le script n’est pas trop long…
-
Insertion par appel de module externe
-
Dans un fichier séparé de type «.js »
- Il est possible de mettre les instructions
JavaScriptdans un document séparé dont l’extension est « .js » - La balise
<script>doit être vide, et l’urldu document javascript doit être mentionnée dans l’attribut src (url absolue ou url relative) - Ce document « .js » ne peut contenir que du Javascript (pas de balises html, ni de balises
<script>) - L’avantage est que le code peut être partagé par plusieurs pages html et peut bénéficier de la mise en cache du document Javascript
-
Une adresse Web
- On peut insérer du code
JavaScripten faisant appel à un module externe se trouvant à n’importe quelle adresse (URL). - Les deux balises de
Javascriptdoivent être placés entre les Tags et dans le cas d’une exécution directe ou entre les Tags<head>et</head>de la pageHTMLpour une exécution différée. - Stocké dans un fichier sur le serveur à son adresse d’appel sous forme de TEXTE SIMPLE portant l’extension .txt ou .js
- Simplifie la maintenance des sites faisant appel à des modules JavaScript communs à plusieurs pages HTML.
- Inconvénient : l’appel au code externe génère une requête supplémentaire vers le serveur, et encombre le réseau
<script language="JavaScript">
.....
instructions javascript
.....
</script>
Bien que cette dernière méthode soit généralement recommandée, notamment pour des gros projets, parfois vous serez « obligé » d’écrire votre code JavaScript dans votre fichier HTML.
Pour cette raison, nous allons étudier chacun de ces trois cas dans cette partie.
<!doctype html>
<html>
<head>
<title>JavaScript</title>
<script language="JavaScript">
alert("bonjour");
</script>
</head>
<body>
</body>
</html>
Traditionnellement il était d’usage de placer la balise
<script>entre les tags<head>et , cependant il est actuellement recommandé de la placer en fin de document juste avant</body>pour ne pas bloquer le chargement de la page, et exécuter les scripts uniquement lorsque le DOM est prêt.
<!doctype html>
<html>
<head>
<title>..... </title>
</head>
<body>
<script language="JavaScript">
alert(‘bonjour’);
</script>
</body>
</html>
Bonjour
donne le lien Bonjour !
<script src="URL du module externe">
............
</script>
