JavaScript Où aller
"Nous sommes ici pour contribuer à ce monde. Sinon, pourquoi sommes-nous ici ?"
Steve Jobs
La balise <script>
En HTML, le code JavaScript est inséré entre les balises <script> et </script>.
Exemple
<script>
document.getElementById("demo").innerHTML = "Mon premier JavaScript";
</script>
Try it Yourself »
Les anciens exemples JavaScript peuvent utiliser un attribut de type : <script type="text/javascript">.
L'attribut type n'est pas obligatoire. JavaScript est le langage de script par défaut en HTML.
JavaScript Fonctions et événements
Une function JavaScript est 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 la section <body>, ou dans la section <head> d'une page HTML, ou dans les deux.
JavaScript dans <head>
Dans cet exemple, une function 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()">Try it</button>
</body>
</html>
Try it Yourself »
JavaScript dans <body>
Dans cet exemple, une function 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 le corps</h2>
<p id="demo">Un paragraphe</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphe modifié.";
}
</script>
</body>
</html>
Try it Yourself »
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 = "Paragraphe modifié.";
}
Les scripts externes sont pratiques lorsque le même code est utilisé dans de nombreuses pages Web différentes.
Les fichiers JavaScript portent l'extension de fichier .js.
Pour utiliser un script externe, mettez le nom du fichier de script dans l'attribut src (source) d'un <script> balise:
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ù se trouve la balise <script>.
Les scripts externes ne peuvent pas contenir de balises <script>.
Avantages JavaScript externes
Placer les scripts dans des fichiers externes présente certains avantages :
- Il sépare le HTML et le code
- Cela rend le HTML et le 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:
Cet exemple utilise un chemin de fichier pour créer un lien vers myScript.js:
Cet exemple n'utilise aucun chemin vers lequel créer un lien myScript.js:
Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de fichiers HTML.
