Le langage HTML n'est pas un langage de programmation. Il n'est pas concu pour traiter des données. Sa fonction est uniquement de définir une mise en page de texte et d'images.
Un site web concu en HTML pur (donc dépourvu de scripts) sera donc toujours le même, indépendamment des actions du visiteur. Les pages affichées demeureront strictement identiques tant que l'auteur du site ne l'aura pas mis à jour.
Cette limitation disparait lorsque l'on introduit des scripts dans les pages HTML.
Les scripts sont des bouts de programmes écrits dans un langage particulier, appelé langage de script. Il existe une multitude de langages de scripts : Javascript, VBscript, PHP, ASP ...
Les langages de script sont, contrairement au langage HTML, de véritables langage de programmation. On y retrouvera donc des variables, des types, des structures de controles, des fonctions ...
On distingue principalement deux types de langage de script :
Les langages de script coté serveur sont plus puissants que les langages de script coté navigateur car il permettent de faire des accès fichier et en particulier de connecter un site web à une base de données. Les langages de script coté client n'ont pas cette possibilité.
Le code Javascript peut être écrit directement à l'intérieur d'une page HTML ou dans un fichier séparé. Nous recommandons la deuxième méthode, car elle permet de réutiliser le même code Javascript dans plusieurs pages.
On utilisera pour cela la balise script, en précisant le nom du fichier contenant le code Javascript dans l'attribut src de cette balise:
<script type="text/javascript" language="JavaScript" src="Nom du fichier Contenant le code Javascript"> </script>
Pour exécuter un programme Javascript, il suffit de double-cliquer sur la page HTML qui l'utilise. Cela aura pour effet d'appeler le navigateur par défaut de votre ordinateur et de visualiser la page en question. Vous pourrez alors interagir avec cette page et ainsi exécuter le code Javascript associé.
Votre navigateur contient un environnement de développement pour Javascript. Avec FireFox par exemple, on peut faire apparaitre cet environement de développement dans la fenêtre du navigateur en sélectionnant Developpement Web puis Console Web.
Cet environnement contient en particulier un debogueur. Si vous ne souhaitez par l'utiliser pour mettre au point votre programme, vous pouvez aussi faire des affichages de messages dans la console à l'aide de l'instruction Javascript console.log.
Javascript est un langage de programmation évènementielle. Il permet donc associer une fonction à un évènement. Lorsque l'évènement se produit, la fonction est automatiquement appelée.
En Javascript, ont considère que les évènements sont des actions sur les éléments d'une page HTML.
Un élément HTML est une partie de la page définie par une balise. Il y a par exemple : l'élément body (le corps de la page) délimité par les balises <body> et </body>, l'élément table délimité par <table> et </table>, l'élément img défini par la balise <img />, etc.
Les évènements HTML sont représentés par des attributs associés aux éléments pour lesquels ils peuvent se produire. Par exemple :
Pour associer une fonction Javascript à un évènement se produisant pour un certain élément HTML on écrira :
<Nom-balise Attribut-évènement="fonction Javascript()">
Par exemple, si on veut que la fonction Javascript Toto, s'exécute lors du chargement de la page, on écrira :
<body OnLoad="Toto()">
et pour éxécuter la fonction Titi, lorsque l'utilisateur clique sur une image, on écrira :
<img OnClick="Titi()"\>
Les explications de ce paragraphe s'appuient sur une figure. Pour la faire apparaitre dans le cadre droit cliquez ici.
Un script Javascript, ne peut fonctionner que sur un navigateur capable d'interpréter ce langage, c'est à dire un navigateur contenant un interpréteur Javascript. Les navigateurs les plus utilisés en contiennent tous un.
Le navigateur s'occupe du transfert de la page depuis le serveur (via le protocole HTTP), de son chargement en mémoire centrale et de son affichage sur l'écran.
Le chargement de la page consiste à en créer une représentation en mémoire centrale.
Il est important de bien comprendre que Javascript agit sur cette représentation interne en mémoire et non pas sur la page elle même (le fichier).
Lorsqu'un évènement HTML se produit et qu'il déclenche l'exécution d'une fonction Javascript, cette fonction va éventuellement modifier la représentation interne de la page et cette dernière est automatiquement réaffichée par le navigateur.
Cette représentation interne est basé sur un certain nombre de classes respectant le D.O.M (Document Object Model). On y trouve en particulier:
Il existe différentes manières d'agir sur les éléments d'une page en Javascript. Celle que nous présentons ici est basée sur la méthode getElementById de la classe Document, et de l'attribut innerHTML de la classe Element.
L'attribut Id définit pour chaque balise HTML permet d'associer un identifiant à un élément. Voici, par exemple un tableau HTML comportant trois cellules identifiés par C1, C2, C3:
<table align="center">
<tr>
<td id="C1" > </td>
<td id="C2" > </td>
<td id="C3" > </td>
</tr>
</table>
</body>
Ces trois cellules sont représentées en mémoire par des objets de la classe Element auxquels on pourra accéder grâce à la méthode getElementById connaissant les identifiants de ces éléments. Pour obtenir l'élément représentant la deuxième cellule du tableau, on écrira par exemple:
Document.getElementById("C2");
innerHTML est un attribut de la classe Element. Il permet d'accéder au code HTML contenu dans un élément et de le modifier.
document.getElementById("C2").innerHTML =
'<img src="../Cartes/CoeurRoi.gif" width=100>'