Statistiques| Inscription| Espace privé
Développement Web
Accueil > Javascript
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Mai 2019   >>
Lu Ma Me Je Ve Sa Di
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2


Emplacement
 
 
 
 

Javascript est un langage de scripts qui est interprété par le navigateur et ne fait pas appel aux ressources du serveur. 

Vous pouvez placer vos codes n’importe où dans votre page HTML pourvu qu’ils soient encadrés par les balises <script type="text/javascript"> et </script>. Néanmoins, il est préférable de distinguer la structure HTML et la programmation en écrivant vos scripts dans un fichier externe (javascript.js par exemple) que vous appellerez dans l’en-tête de votre page HTML à l’aide de l’instruction :

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

 
 
 
 
 
Hiérarchie d’objets
 
 
 
 

Javascript est un langage orienté objet. Un objet est un ensemble de données (appelées propriétés) et de fonctions (appelées méthodes).

Par exemple, l’objet désignant la fenêtre du navigateur est nommé window. Cet objet contient, entre autres, un objet nommé document qui est le document HTML.

L’une des méthodes de l’objet window est close() qui a pour fonction de fermer la fenêtre (que l’on aura ouverte préalablement). Une autre est open(arguments) où l’argument minimal sera le nom de la page HTML qui sera ouverte dans une nouvelle fenêtre.

Pour désigner une propriété ou accéder à une méthode d’un objet, il suffit d’ajouter un point au nom de cet objet suivi du nom de la méthode ou de la propriété. Ainsi l’objet document étant contenu dans l’objet window, il sera accessible par window.document. Néanmoins, comme tous les objets sont des enfants de window, il est possible d’écrire simplement document.

Plus généralement, prenons l’exemple d’un objet2 contenu dans un objet1 qui est lui même contenu dans l’objet document, alors on accédera à cet élément par la syntaxe pointée respectant cette hiérarchie, c’est-à-dire :

document.objet1.objet2

Il y a essentiellement deux façons de nommer un objet.

- Soit on utilise la valeur de l’attribut name de la balise associée à cet objet. Par exemple, considérons l’une des balises (double ou simple) : 

<element name="objet1"></element> ou <element name="objet1"/>

alors l’objet correspondant sera appelé objet1.

 - Soit on utilise la valeur de l’attribut id. Par exemple, considérons l’une des balises (double ou simple) : 

<element id="élément1"></element> ou <element id="élément1"/>

 alors l’objet associé sera désigné en utilisant la méthode getElementById("élément1").

La syntaxe XHTML stricte ne permet plus de donner un attribut name ni aux formulaires, ni aux images, ni aux liens et ancres. Il faudra donc accéder à ces élément par leurs identifiants en utilisant la méthode getElementById().

Considérons un document HTML dont le corps de la page est le suivant :

<body>

 <form id="formulaire" action="">

 <p><input type="text" name="prenom" value="olivier" /> </p>

 </form>

 </body>

alors l’objet associé à la balise <input type="text" name="prenom" value="olivier" /> est accessible via le chemin hiérarchique

document.getElementById("formulaire").prenom

et sa valeur (c’est-à-dire le texte apparent) par

 document.getElementById("formulaire").prenom.value

Si vous voulez, par exemple, modifier la valeur initiale "olivier" en "paul", il suffira d’écrire l’instruction suivante :

document.getElementById("formulaire").prenom.value="paul"

 
 
 
 
 
Gestionnaire d’événements
 
 
 
 

Lorsqu'un événement se produit (par exemple l'événement click qui correspond au clic du bouton gauche de la souris), le gestionnaire d'événement correspondant est déclenché (dans notre exemple ce programme est nommé onclick). Si vous désirez que celui-ci produise un effet particulier, il suffira d'affecter à ce gestionnaire la fonction qui prend en charge cet événement.

Par exemple, vous voulez que lorsque l'on clique sur l'élément dont l'identifiant est élément1, une petite fenêtre affiche le message "Vous avez cliqué sur l'élément dont l'identifiant est élément1.". Alors, vous pouvez écrire dans votre fichier externe javascript.js le code suivant :

window.onload=gestevent;

function gestevent() {

document.getElementById("élément1").onclick=function() {

alert("Vous avez cliqué sur l'élément dont l'identifiant est élément1." );}

}

qui peut aussi s'écrire, par exemple, comme ceci :

window.onload=function () {
document.getElementById("élément1").onclick=function() {
alert("Vous avez cliqué sur l'élément dont l'identifiant est élément1." );}
}

Pour information, ces scripts externes produisent le même effet qu'un gestionnaire d'événement inséré dans la balise HTML considérée, c'est-à-dire :

<element id="élément1" onclick="alert('Vous avez cliqué sur l\'élément dont l\'identifiant est élément1.' )" ></element>