oujood.com

Où mettre le code du Javascript

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.

chercher |

Où mettre le code du Javascript

JavaScript cours tutorial

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.

Codes javascript dans le <head>

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.

Codes javascript dans le <body>

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>

Codes javascript dans le <head> et le <body>

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>

Utilisation du Javascript dans un fichier externe

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>

Exemple : fichie Javascript externe

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 css

Code : pour fichier hello.js


  Copier le code

// 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 css

Code : HTML


  Copier le code

<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.




Par carabde 30 mars 2014



Voir aussi nos tutoriel :

fonction substr_count, substr_count

Compte le nombre d'occurrences de segments dans une chaîne

L'attribut lang

Spécifie la langue du contenu de l'élément

La méthode Json stringify

JavaScript fournit à cette fin la méthode JSON.stringify() qui convertit une valeur JavaScript en une chaîne JSON.