JavaScript : Où Aller
La balise <script>
Dans HTML, le code JavaScript est inséré entre les balises <script> et </script> .
Exemple
<script>
document.getElementById("demo").innerHTML = "Mon Premier JavaScript";
</script>
Les anciens exemples de JavaScript peuvent utiliser un attribut type : <script type="text/javascript">.
L'attribut type n'est pas requis, car JavaScript est le langage de script par défaut dans HTML.
Fonctions et Événements JavaScript
Une fonction JavaScript est un bloc de code qui peut être exécuté lorsqu'il est "appelé".
Par exemple, une fonction peut être appelée lorsqu'un événement se produit, comme lorsque l'utilisateur clique sur un bouton.
Vous apprendrez beaucoup plus sur les fonctions et les événements dans les chapitres suivants.
JavaScript dans <head> ou <body>
Vous pouvez placer n'importe quel nombre de scripts dans un document HTML.
Les scripts peuvent être placés dans la section <body> , ou dans la section <head> d'une page HTML, ou dans les deux.
JavaScript dans <head>
Dans cet exemple, une fonction JavaScript est placée dans la section <head> d'une page HTML.
La fonction est invoquée (appelée) lorsqu'un bouton est cliqué :
Exemple
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphe modifié.";
}
</script>
</head>
<body> <h2>Démo JavaScript dans Head</h2>
<p id="demo">Un Paragraphe</p>
<button type="button" onclick="myFunction()">Essayez-le</button>
</body>
</html>
JavaScript dans <body>
Dans cet exemple, une fonction JavaScript est placée dans la section <body> d'une page HTML.
La fonction est invoquée (appelée) lorsqu'un bouton est cliqué :
Exemple
<!DOCTYPE html>
<html>
<body>
<h2>Démo JavaScript dans Body</h2>
<p id="demo">Un Paragraphe</p>
<button type="button" onclick="myFunction()">Essayez-le</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphe modifié.";
}
</script>
</body>
</html> Placer des scripts en bas de l'élément <body> améliore la vitesse d'affichage, car l'interprétation des scripts ralentit l'affichage.
JavaScript Externe
Les scripts peuvent également être placés dans des fichiers externes :
Fichier externe : myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphe modifié.";
} Les scripts externes sont pratiques lorsque le même code est utilisé dans de nombreuses pages web différentes.
Les fichiers JavaScript ont l'extension de fichier .js .
Pour utiliser un script externe, mettez le nom du fichier de script dans l'attribut src (source) d'une balise <script> :
Exemple
<script src="myScript.js"></script> Vous pouvez placer une référence de script externe dans <head> ou <body> comme vous le souhaitez.
Le script se comportera comme s'il était situé exactement là où se trouve la balise <script> .
Les scripts externes ne peuvent pas contenir de balises <script> .
Avantages de JavaScript Externe
Placer des scripts dans des fichiers externes présente certains avantages :
- Cela sépare HTML et code
- Cela rend HTML et JavaScript plus faciles à lire et à maintenir
- Les fichiers JavaScript mis en cache peuvent accélérer le chargement des pages
Pour ajouter plusieurs fichiers de script à une page, utilisez plusieurs balises de script :
Exemple
<script src="myScript1.js"></script>
<script src="myScript2.js"></script> Références Externes
Un script externe peut être référencé de trois manières différentes :
- Avec une URL complète (une adresse web complète)
- Avec un chemin de fichier (comme /js/)
- Sans aucun chemin
Cet exemple utilise une URL complète pour lier à myScript.js :
Exemple
<script src="https://www.formation-ti.org/js/myScript.js"></script>
Cet exemple utilise un chemin de fichier pour lier à myScript.js :
Exemple
<script src="/js/myScript.js"></script>
Cet exemple n'utilise aucun chemin pour lier à myScript.js :
Exemple
<script src="myScript.js"></script>
Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de Fichiers HTML .