Définit la couleur d'une esquisse
Où placer le code JavaScript dans un document HTML ? Dans une page ils seront exécutés immédiatement tandis que la page se charge dans le navigateur. Ce n'est pas toujours ce que nous voulons
Les scripts JavaScript peuvent être placés dans le corps (body) ou|et l'en-tête (head).Comment? c'est ce que nous allons voir dans ce chapitre.
Comme du CSS les codes Javascript peuvent être mis dans le corps et dans toutes les sections principales d'une page HTML.
Des codes Javascript dans une page seront exécutés immédiatement tandis que la page se charge dans le navigateur. Ce n'est pas toujours ce que nous voulons. Parfois nous voulons exécuter un code quand le chargement de la page sera terminé, ou en réponse à un événement postérieur, comme quand un utilisateur clique sur un bouton. Quand c'est le cas nous mettons le code à l'intérieur d'une fonction, ce que vous verrez dans un chapitre postérieur.
Des codes à exécuter quand on charge la page, ou quand un événement est déclenché, sont placés dans des fonctions.
On place une(ou plusieurs) fonction JavaScript dans la section head d'une page HTML et cette fonction est appelée lorsqu'un événement est déclenché comme par exemple lorsqu’on clique sur un bouton.
Exemple
Exemple : Copier le code
<html>
<head>
<script type="text/javascript">
function message()
{
alert("Cette boite de dialogue est appelée avec l'événement onload càd quand la page est chargée");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Dans l’exemple ci-dessus c’est l’événement (onload c'est-à-dire quant la page est chargée) qui fait appel à la fonction message() qui affiche une boite de dialogue avec le message "Cette boite de dialogue est appelée avec l'événement onload càd quand la page est chargée".
Remarque : l'attribut type de la balise <script> (c'est-à-dire <script type="text/javascript">) n'est plus nécessaire à partir de HTML5. JavaScript est devenu le langage de script par défaut dans HTML5.
Si vous ne voulez pas que votre code javascript soit placé à l'intérieur d'une fonction, ou si votre code écrit le contenu de page, vous pouvez le placé dans la section du corps.
Ou le code JavaScript est placé dans la section "body" d'une page HTML et la fonction est invoquée lorsqu'un évènement est déclenché par exemple en cliquant sur un bouton.
Exemple
Exemple : Copier le code
<html>
<head>
</head>
<body>
<script">
document.write("ce texte est écrit par JavaScript ");
</script>
</body>
</html>
Vous pouvez placer un nombre illimité de codes dans votre document, ainsi vous pouvez avoir des codes dans le <head> et le <body> et dans toute section de votre page web.
Exemple
Exemple : Copier le code
<html>
<head>
<script">
function message()
{
alert("Cette boite de dialogue est appelée avec l'événement onload càd quand la page est chargée");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("ce texte est écrit par JavaScript ");
</script>
</body>
</html>
Si vous voulez que le même code Javascript soit utilisé par plusieurs pages, sans devoir écrire le même code javascript sur chaque page, vous pouvez écrire un Javascript dans un fichier Javascript externe.
Le fichier javascript externe doit porter l’extension .js
Note : Le code javascript dans un fichier Javascript externe ne doit pas contenir de balises <script></script> !
Pour employer le code javascript du fichier externe,on le déclare dans le <head> avec l’attribut « src » dans la balise <script>
Exemple : Copier le code
<html> <head> <script src="fichier.js"></script> </head> <body> </body> </html>
Créez un fichier JavaScript nommé "hello.js" et placez-y le code suivant :
Voir notre guide des propriété css pour plus de détail sur les propriétés cssCode : pour fichier hello.js
// Une fonction pour afficher un message
function sayHello() {
alert("Hello World!");
}
// Appel de la fonction au clic du bouton
document.getElementById("myBtn").onclick = sayHello;
Maintenant le code du fichier html qui va avec, vous pouvez appeler ce fichier JavaScript externe dans une page Web à l'aide de la balise <script>, comme ceci :
Voir notre guide des propriété css pour plus de détail sur les propriétés cssCode : HTML
<html> <head> <title>Inclure un fichier JavaScript externe</title> <script src="hello.js"></script> </head> <body> <button type="button" id="myBtn">Cliquer moi</button> </body> </html>
Dans notre cas les deux fichiers sont placées dans le même répértoire.
Si non il faut indiquer l'url exacte du fichier heleo.js comme ça par exemple :<script src="../dossier/hello.js"></script>
le (../) indique le dossier racine de votre site.
|
Cours precedent: |
Sommaire : |
Cours suivant: |