Utilisation de JavaScript

<script>balise

Dans HTML, le code JavaScript doit être placé dans <script> et </script> entre les balises.

Exemple

<script>
document.getElementById("demo").innerHTML = "Mon premier segment JavaScript";
</script>

Essayez vous-même

Remarque :Des exemples anciens de JavaScript pourraient utiliser type n'est pas nécessaire. JavaScript est le langage de script par défaut dans HTML.

Remarque :L'attribut

Fonctions JavaScript et événements

JavaScript FonctionC'est un bloc de code JavaScript qui peut être exécuté au moment de l'appel.

Par exemple, lors deÉvénementlorsqu'un événement se produit, par exemple, lorsque l'utilisateur clique sur un bouton.

Astuce :Vous apprendrez plus sur les fonctions et les événements dans les chapitres suivants.

JavaScript dans le

Vous pouvez insérer un nombre illimité de scripts dans un document HTML.

Vous pouvez placer <body> ou <head> Le script peut être placé dans n'importe quel endroit de la page HTML.

Partie JavaScript dans le

Dans cet exemple, la fonction JavaScript est placée dans le <head> Partie.

Cette fonction est appelée lorsque le bouton est cliqué :

Exemple

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Le paragraphe a été modifié.";
}
</script>
</head>
<body>
<h1>Une page web</h1>
<p id="demo">Un paragraphe</p>
<button type="button" onclick="myFunction()">Essayez</button>
</body>
</html>

Essayez vous-même

JavaScript dans le

Dans cet exemple, la fonction JavaScript est placée dans le <body> Partie.

Cette fonction est appelée lorsque le 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</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Le paragraphe a été modifié.";
}
</script>
</body>
</html>

Essayez vous-même

Astuce :Placer le script <body> au bas de l'élément, ce qui peut améliorer la vitesse d'affichage, car la compilation du script ralentit l'affichage.

Script externe

Le script peut être placé dans le fichier externe :

Fichier externe : myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "Le paragraphe a été modifié.";
}

Les scripts externes sont très utiles, si le même script est utilisé sur de nombreux sites web différents.

L'extension de fichier pour les fichiers JavaScript est .js.

Pour utiliser des scripts externes, veuillez <script> de la balise src dans l'attribut

Exemple

<script src="myScript.js"></script>

Essayez vous-même

Vous pouvez <head> ou <body> où les références aux scripts externes sont placées.

La performance du script dépend de sa position <script> les mêmes dans les balises.

Remarque :Les scripts externes ne peuvent pas contenir <script> Balises

Avantages des JavaScript externes

Les avantages de placer les scripts dans des fichiers externes sont les suivants :

  • Séparez l'HTML et le code
  • Faites de l'HTML et du JavaScript plus faciles à lire et à entretenir
  • Les fichiers JavaScript en cache peuvent accélérer le chargement de la page

Pour ajouter plusieurs fichiers de scripts à une page, utilisez plusieurs balises script :

Exemple

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Référencement externe

Les scripts externes peuvent être appelés via une URL complète ou un chemin relatif par rapport à la page actuelle.

Dans cet exemple, le script est lié via une URL complète.

Exemple

<script src="https://www.codew3c.com/js/myScript1.js"></script>

Essayez vous-même

Dans cet exemple, le script est utilisé à partir du répertoire spécifié sur le site actuel.

Exemple

<script src="/js/myScript1.js"></script>

Essayez vous-même

Dans cet exemple, le script est lié au répertoire du fichier courant de la page.

Exemple

<script src="myScript1.js"></script>

Essayez vous-même

Vous pouvez Chemin d'accès au fichier HTMLApprenez plus sur les chemins de fichiers ici.