En 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 JavaScript peuvent utiliser un attribut de type: <script type = « text / javascript »>.
L’attribut type n’est pas requis. 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é » pour.
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 <body>, ou dans la <head>section d’une page HTML, ou dans les deux.
JavaScript dans <head>
Dans cet exemple, un JavaScript functionest placé dans la <head>section d’une page HTML.
La fonction est appelé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>
<h1>Une page Web.</h1>
<p id= »demo »>Un paragraphe</p>
<button type= »button » onclick= »myFunction() »>Essayez-le</button>
</body>
</html>
JavaScript dans <body>
Dans cet exemple, un JavaScript functionest placé dans la <body>section d’une page HTML.
La fonction est appelée (appelée) lorsqu’un bouton est cliqué:
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Une page Web</h1>
<p id= »demo »>Un paragraphe</p>
<button type= »button » onclick= »myFunction() »>Essayez-le</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: myScript.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’emplacement de la <script>balise.
Les scripts externes ne peuvent pas contenir de <script>balises.
Avantages JavaScript externes
Le placement de scripts dans des fichiers externes présente certains avantages:
- Il sépare HTML et code
- Il facilite la lecture et la maintenance de HTML et JavaScript
- Les fichiers JavaScript mis en cache peuvent accélérer le chargement des pages
Pour ajouter plusieurs fichiers de script sur une page – utilisez plusieurs balises de script:
Exemple
<script src= »myScript1.js »></script>
<script src= »myScript2.js »></script>
Références externes
Les scripts externes peuvent être référencés avec une URL complète ou avec un chemin d’accès relatif à la page Web actuelle.
Cet exemple utilise une URL complète pour créer un lien vers un script:
Exemple
<script src= »https://www.w3schools.com/js/myScript1.js »></script>
Cet exemple utilise un script situé dans un dossier spécifié sur le site Web actuel:
Exemple
<script src= »/js/myScript1.js »></script>
Cet exemple renvoie à un script situé dans le même dossier que la page actuelle:
Exemple
<script src= »myScript1.js »></script>