Javascript dans une page web

Du Javascript dans une page web !

Il est en effet possible d'insérer du Javascript dans une page web. On peut le faire dans les deux grandes parties du document l'en-tête (head) et le corps du document (body)

Déclarations dans la partie head

Il faut insérer tout le code destiné à être appelé par d'autres fonctions dans la partie head du document XHTML

Ainsi, les déclarations de fonctions, de classes, etc... doivent étre insérées dans le head.

Déclarations dans la partie body

On y trouve toutes les instructions d'appel, et les autres, qui seront exécutées par le navigateur. Les instructions peuvent soit étre exécutées lors de leur chargement, soit lors d'évênements particuliers (comme un clic). Celà dépend de la maniére d'insérer le code dans la page.

Comment insérer du Javascript

Insertion de code

Pour insérer directement du code dans une page web, on utilise ceci :

<script type="text/javascript">
    <!--
        // Contenu du code ici
    //-->
</script>

Vous remarquerez les balises  qui sont destinées à cacher le code javascript aux navigateurs anciens.
 renferment des commentaires HTML, et // désigne une ligne de commentaire javascript (pour que --> soit ignoré par l'interpréteur de code)

Lorsqu'on utilise javascript, on doit gérer l'éventualité où le navigateur de l'utilisateur n'accepte pas javascript, soit par paranoïa aïgue de l'utilisateur (car Javascript execute du code sur votre ordinateur tout de même), soit à cause du navigateur qui ne le comprend pas.

Le code inséré de cette maniére est éxécuté dès son chargement dans le navigateur s'il est dans la partie body du document.

Insertion de fichier externe

Une autre solution est d'utiliser un fichier externe contenant les instructions ou les déclarations javascript. Il permet une meilleure maintenance ainsi qu'une réutilisation plus aisée du code.

<script type="text/javascript" src="monfichier.js"></script>

Le code inséré de cette maniére est éxécuté dès son chargement dans le navigateur s'il est dans la partie body du document.

Evênements

On peut utiliser des évênements associés aux objets HTML, et déclencher une action uniquement si cet évênement a lieu.

Exemple :

<form action="#" method="post">
    <input type="button" value="Cliquez ici" onclick="alert('Vous avez cliqué !');return false;" />
</form>

alert est une fonction Javascript qui ouvre une fenêtre avec le texte entré en paramètre. Dans ce cas-ci, la fenêtre ne s'ouvrira que si vous cliquez sur le bouton !

Exercice

Enregistrez le fichier md5.js
Faites référence à ce fichier dans votre page web
Appliquez la fonction MD5() sur la chaîne 'coucou' dans votre page lors :
- Du clic sur le bouton envoyer -> envoyez le résultat dans un "alert"
- Du chargement de la page -> écrivez le résultat de l'appel sur la page (avec window.document.write())

Résultat : essayez sur la page finale