Utilisation de JavaScript

Le code de script JavaScript dans HTML doit être placé entre<script>et</script>les balises.

Le code de script JavaScript peut être placé dans la section<body>et<head>de la page HTML.

Balise <script>

Pour insérer JavaScript dans une page HTML, utilisez la balise <script>.

Les balises <script> et </script> indiquent à JavaScript où commencer et où se terminer.

Les lignes de code entre <script> et </script> contiennent du JavaScript :

<script> alert("Mon premier JavaScript"); </script>

Vous n'avez pas besoin de comprendre le code ci-dessus. Comprenez simplement que le navigateur interprète et exécute le code JavaScript entre <script> et </script>.

lamp Ces anciens exemples peuvent utiliser type="text/javascript" dans la balise <script>. Ce n'est plus nécessaire. JavaScript est le langage de script par défaut dans tous les navigateurs modernes et en HTML5.

JavaScript dans <body>

Dans cet exemple, JavaScript écrit du texte dans le <body> HTML lorsque la page se charge :

Exemple

<!DOCTYPE html> <html> <body> . . <script> document.write("<h1>Ceci est un titre</h1>"); document.write("<p>Ceci est un paragraphe.</p>"); </script> . . </body> </html>

Essayez-le vous-même »

Fonctions et événements JavaScript

Les instructions JavaScript de l'exemple ci-dessus sont exécutées lorsque la page se charge.

Habituellement, nous devons exécuter du code lorsqu'un événement se produit, par exemple lorsqu'un utilisateur clique sur un bouton.

Si nous plaçons le code JavaScript dans une fonction, nous pouvons appeler cette fonction lorsqu'un événement se produit.

Vous en apprendrez plus sur les fonctions et les événements JavaScript dans les chapitres suivants.

JavaScript dans <head> ou <body>

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

Les scripts peuvent être placés dans la section <body> ou <head> d'une page HTML, ou dans les deux sections.

La pratique courante consiste à placer les fonctions dans la section <head>, ou en bas de la page. Cela les place à un seul endroit, sans interférer avec le contenu de la page.

Fonctions JavaScript dans <head>

Dans cet exemple, nous plaçons une fonction JavaScript dans la section <head> d'une page HTML.

La fonction est appelée lorsqu'un bouton est cliqué :

Exemple

<!DOCTYPE html> <html> <head> <script>function myFunction() { document.getElementById("demo").innerHTML="My first JavaScript function"; }</script> </head> <body> <h1>Ma page Web</h1> <p id="demo">Un paragraphe</p> <button type="button" onclick="myFunction()">Essayez-le vous-même</button> </body> </html>

Essayez-le vous-même »

Fonctions JavaScript dans <body>

Dans cet exemple, nous plaçons une fonction JavaScript dans la section <body> d'une page HTML.

La fonction est appelée lorsqu'un bouton est cliqué :

Exemple

<!DOCTYPE html> <html> <body> <h1>Ma page Web</h1> <p id="demo">Un paragraphe</p> <button type="button" onclick="myFunction()">Essayez-le vous-même</button> <script>function myFunction() { document.getElementById("demo").innerHTML="My first JavaScript function"; }</script> </body> </html>

Essayez-le vous-même »

JavaScript externe

Vous pouvez également enregistrer le script dans un fichier externe. Les fichiers externes contiennent souvent du code utilisé par plusieurs pages web.

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

Pour utiliser un fichier externe, définissez le fichier .js dans l'attribut "src" de la balise <script> :

Exemple

<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>

Essayez-le vous-même »

Vous pouvez placer le script dans <head> ou <body>. Les scripts à l'intérieur de la balise <script> se comportent exactement de la même manière que les scripts référencés en externe.

Le code du fichier myScript.js est le suivant :

function myFunction() { document.getElementById("demo").innerHTML="Ma première fonction JavaScript"; }
lamp Les scripts externes ne peuvent pas contenir de balises <script>.
Autres extensions