Javascript
2° PARTIE : EVENEMENTS ET OBJETS
1. Programmation événementielle
2. Principe
3. Les événements
4. Gestionnaire d’événement
5. Classe et Objet
6. Objets d’une page Web
7. Objets divers
8. Exemple n°1 : texte défilant
9. Exemple n°2 : formulaire
10. Exemple n°3 : fenêtre
© BTS IRIS 2002 [tv]
1 . Programmation événementielle
La programmation événementielle permet la gestion d’
événements.
Un événement est généralement associé à une action
de l’utilisateur : appui sur une touche, click ou
déplacement de la souris, ...
En HTML classique, il y a très peu d’événements qui
sont gérés : click sur un lien ou sur un bouton de
formulaire. Leur gestion est automatique et non
modifiable.
Le javascript va permettre de gérer et contrôler d’autres
événements.
2 . Principe
L'objet Événement Gestionnaire d'événement
--------->
(bouton) (clic de souris) (envoi du formulaire)
OBJECT EVENT EVENT HANDLER
En javascript, on va pouvoir associer à
chaque événement une action : une fonction,
cad le gestionnaire d’événement (EVENT HANDLER).
3 . Les événements
Différents événements implémentés en Javascript :
L'utilisateur clique sur un bouton, un lien ou tout autre élément : Clik
La page est chargée par le navigateur : Load
L'utilisateur quitte la page : Unload
L'utilisateur place le pointeur de la souris sur un élément : MouseOver
Le pointeur de la souris quitte un lien ou tout autre élément : MouseOut
Un élément de formulaire a le focus (devient la zone d'entrée active) : Focus
Un élément de formulaire perd le focus : Blur
La valeur d'un champ de formulaire est modifiée : Change
L'utilisateur sélectionne un champ dans un élément de formulaire : Select
L'utilisateur clique sur le bouton submit pour envoyer un formulaire : Submit
L'utilisateur appuie sur une touche : Keydown
Autres événements : Abort, Error, Move, Resize, KeyPress,
KeyUp, DblClick, MouseDown, MouseUp, MouseMove, Reset
4 . Gestionnaire d’événement
La syntaxe pour installer le gestionnaire d’événement :
onEvenement=fonction()
Exemple :
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici" onClick="alert('Vous avez
bien cliqué ici !')">
</FORM>
4 . Événements et Objets
Liste des objets auxquels correspondent des gestionnaires
d'événement :
Fenêtre : onLoad, onUnload
Lien hypertexte : onClick, onMouseOver, onMouseOut
Élément de texte : onBlur, onChange, onFocus, onSelect
Élément de zone de texte : onBlur,onChange,onFocus,onSelect
Éléments bouton, case à cocher, bouton radio : onClick
Liste de sélection : onBlur, onChange, onFocus
Bouton Submit ou Reset : onClick
5 . Classes et Objet
Ne pas confondre :
Javascript est un langage basé sur les objets
C++, Java et C# sont des langages orientés objets
Notions de base :
Une classe est la description d'un ensemble de :
propriétés (les données) et de
méthodes (les fonctions).
Un objet est une instance de classe (c’est à dire
une variable de type classe).
6 . Objets d’une page Web
(1)
Lorsqu’une page Web est chargée dans un navigateur,
Javascript identifie plusieurs objets pour y représenter les
informations.
Ces objets sont classés de manière hiérarchique.
L’objet le plus haut dans la hiérarchie est l’objet de la classe
window (fenêtre).
6 . Objets d’une page Web
(2)
Dans cette fenêtre, il y a un document
HTML : c'est l'objet document. Donc,
L'objet fenêtre contient l'objet document
(c’est la notion de hiérarchie).
Dans ce document, on trouve un
formulaire au sens HTML : c'est l'objet
formulaire. Donc, l'objet fenêtre contient
un objet document qui lui contient un
objet formulaire (hiérarchie des objets).
6 . Objets d’une page Web
(3)
Dans ce document, on trouve trois
objets : l'objet radio, l'objet bouton, et
l'objet texte. Donc, l'objet fenêtre contient
…
Le modèle hiérarchique des objets
en Javascript.
On accèdera à l’objet bouton de la
manière suivante :
(window).[Link]
7 . Objets divers
Pour l’instant, on peut considérer la notion de classe comme
la généralisation de la notion de type.
Par conséquent, nous retrouvons naturellement, parmi les
classes d'objets prédéfinies dans le langage Javascript, les
classes suivantes :
• Boolean : les booléens
• Number : les valeurs numériques (entiers ou réels)
• String : les chaînes de caractères
• Array : les tableaux
D’autres classes prédéfinies et souvent utilisées existent :
• Date : les dates
• Math : formules mathématiques
• Navigator : caractéristiques du navigateur
• RegExp : les expressions régulières
8 . Exemple n°1
var texte = new String("Hello World !!!"); texte est une instance (objet)
var longueur = [Link]; de la classe String
var largeur = 100;
var position = -(largeur + 2);
length est une propriété
function Defiler()
{ de l’objet texte,
var TexteDefilant = ""; instance de la classe String
position++;
if(position == longueur) [Link] est une méthode
position = -(largeur + 2); de la classe Math qui
retourne la valeur absolue
if(position < 0) de position
{
for(var i = 1; i <= [Link](position); i++)
TexteDefilant = TexteDefilant + " ";
TexteDefilant = TexteDefilant + [Link](0, largeur - i + 1);
} substring(x,y) est une méthode de l’objet texte,
else instance de la classe String qui retourne une chaîne partielle
{ située entre la position x et la position y-1.
TexteDefilant = TexteDefilant + [Link](position, largeur + position);
}
[Link] = TexteDefilant; status est une propriété
setTimeout("Defiler()", 100); de l’objet window,
} qui correspond à la barre d'état de la fenêtre
9 . Exemple n°2
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function Afficher()
{
var saisie = [Link];
if([Link] == 0)
alert("Vous devez saisir un texte !");
else
[Link] = saisie;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formulaire">
<INPUT TYPE="text" NAME="input" VALUE=""> Zone de texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher" onClick="Afficher()"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> Zone de texte de sortie
</FORM>
</BODY>
</HTML>
10 . Exemple n°3
1) menubar (défaut : no).
2) toolbar (défaut : no).
3) location (défaut : no).
4) status (défaut : no).
5) scrollbars (défaut : no).
Exemple :
<html><body>
<form>
<input type="button" value="Exemple" name="Exemple"
onclick="[Link]('[Link]', 'Exemple',
'width=250,height=100,top=120,left=120')">
</form>
</body></html>
Le fichier [Link] :
<html><body>
<br><br><br>
<form>
<center><input type="button" value="Fermer"
onclick="[Link]()"></center>
</form>
</body></html>