English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dans ce chapitre, vous apprendrez à intégrer JavaScript à votre page web.
Généralement, il y a trois méthodes pour ajouter JavaScript à une page web :
Il est possible de<script>et</script>Insérer du code JavaScript entre les balises.
Utiliserles attributs d'événement (Par exemple onclick, onkeypress, etc.) Placez directement le code JavaScript à l'intérieur des balises HTML.
Créer un fichier JavaScript externe, puis charger<script>Charger le script via l'attribut src de la balise.
Dans HTML, il est obligatoire de<script>et</script>Insérer du code JavaScript entre les balises.
<script>
document.write("Hello World");
</script>Vérifiez et voyez‹/›Remarque :Des exemples de JavaScript anciens peuvent utiliser la propriété type : <script type="text/javascript">. Depuis HTML5Depuis que le type de propriété n'est plus nécessaire.5Le langage de script par défaut.
Vous pouvez insérer un nombre illimité de scripts dans un document HTML.
Les scripts peuvent être placés dans la page HTML :<head>ou dans <body>, selon le moment où vous souhaitez charger le script.
Dans cet exemple, la fonction JavaScript est placée dans la page HTML :<head>partie.
L'appel de la fonction sera déclenché lors du clic sur le bouton :
<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript dans l'En-tête</h2>
<button type="button" onclick="myFunc()">Cliquez</button>
<p id="output">Ceci est un paragraphe</p>
</html>Vérifiez et voyez‹/›chaque<script>Les balises JavaScript empêchent le processus de présentation de la page jusqu'à ce qu'elles soient complètement téléchargées et exécutées, donc de les placer au début du document sans raison valable aura un impact sévère sur les performances de votre site.
Dans cet exemple, la fonction JavaScript est placée dans la page HTML :partie.
L'appel de la fonction sera déclenché lors du clic sur le bouton :
<!DOCTYPE html>
<html>
<h2>JavaScript dans le Body</h2>
<button type="button" onclick="myFunc()">Cliquez</button>
<p id="output">Ceci est un paragraphe</p>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>Vérifiez et voyez‹/›Les scripts doivent être placés à la fin de la partie principale, juste après</body>avant le balise body>, ce qui rendra votre page de chargement plus rapide, car cela peut empêcher la présentation initiale de la page.
Vous pouvez également utiliserles attributs d'événement (Par exemple onclick, onkeypress, etc.) placer directement du code JavaScript dans les balises HTML.
<p onclick="this.innerHTML='Hello World';">Ceci est le premier paragraphe (cliquez-moi)</p>Vérifiez et voyez‹/›
Mais, il est préférable d'éviter d'inclure du code JavaScript en ligne en grande quantité, car le JavaScript peut rendre le HTML désordonné et rendre le code JavaScript difficile à maintenir.
Vous pouvez également mettre du code JavaScript dans un fichier distinct avec une extension .js, puis l'appeler via<script>du marqueursrcl'attribut pour le charger dans la page.
L'exemple suivant pointe vers un fichier JavaScript externe :
<script src="myscript.js"></script>Vérifiez et voyez‹/›
Pour ajouter plusieurs fichiers de scripts à une page, utilisez plusieurs balises de script :
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
Vous pouvez, selon vos besoins,<head>ou<body>Placez une référence de script externe.
Le comportement de ce script est comme s'il était exactement situé<script>à l'endroit où se trouve le marqueur.
Remarque :Les fichiers de scripts externes ne peuvent pas contenir<script>Marque.
Placer un script dans un fichier externe a certains avantages :
Il sépare JavaScript et HTML
Il rend HTML et JavaScript faciles à lire et à entretenir
Les fichiers JavaScript en cache peuvent accélérer le chargement de la page
Le même script peut être utilisé pour plusieurs documents
AvisGénéralement, lors du premier téléchargement d'un fichier JavaScript externe, il est stocké dans le cache du navigateur (comme les images et les feuilles de style), donc il n'est pas nécessaire de télécharger à nouveau le fichier à partir du serveur Web qui crée la page, ce qui accélère le chargement.
Vous pouvez utiliser une URL complète ou un chemin relatif par rapport à la page Web actuelle pour faire référence aux scripts externes.
Dans cet exemple, le script est lié via une URL complète :
<script src="https://fr.oldtoolbag.com/run/js/myscript.js"></script>Vérifiez et voyez‹/›
Dans cet exemple, le script est situé dans le dossier spécifié sur le site Web actuel :
<script src="/run/js/myscript.js"></script>Vérifiez et voyez‹/›
Vous pouvez voir dans " Chemin du fichier HTML Pour plus d'informations sur les chemins de fichiers, voir le chapitre.