JavaScript Où aller
La balise <script>
En HTML, le code JavaScript est inséré entre les balises <script>et .</script>
Exemple
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Les anciens exemples JavaScript peuvent utiliser un attribut type : <script type="text/javascript">.
L'attribut type n'est pas obligatoire. JavaScript est le langage de script par défaut en HTML.
Fonctions et événements JavaScript
Un JavaScript functionest un bloc de code JavaScript, 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 en 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 le <body>, ou dans la <head>section d'une page HTML, ou dans les deux.
JavaScript dans <tête>
Dans cet exemple, un JavaScript functionest placé dans la <head>section 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 = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript dans <body>
Dans cet exemple, un JavaScript functionest placé dans la <body>section d'une page HTML.
La fonction est invoquée (appelée) lorsqu'un bouton est cliqué :
Exemple
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Placer des scripts au 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 : monScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
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' srcattribut (source) d'une <script>balise :
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 se trouvait exactement à l'endroit où <script>se trouve la balise.
Les scripts externes ne peuvent pas contenir de <script>balises.
Avantages de JavaScript externe
Placer des scripts dans des fichiers externes présente certains avantages :
- Il sépare HTML et code
- Il 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 3 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 créer un lien vers myScript.js :
Exemple
<script src="https://www.w3schools.com/js/myScript.js"></script>
Cet exemple utilise un chemin de fichier pour créer un lien vers myScript.js :
Exemple
<script src="/js/myScript.js"></script>
Cet exemple n'utilise aucun chemin pour créer un lien vers 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 .