interface

Transcription

interface

Intervention de Javascript
grâce aux "événements"
• Dans la perspective purement html, tout le travail d'interprétation
d'un formulaire (y compris la détection d'erreurs et
d'incohérences) est confiée au script CGI, lequel tourne sur le
serveur et échappe donc au client.
• Grâce à un système d'événements, on va pouvoir coupler le
mécanisme des formulaires avec du code Javascript tournant chez
le client.
• L'intervention de Javascript va pemettre de garder une partie du
contrôle des opérations au client :
Par exemple, vérifier la validité du contenu d'un formulaire avant
de l'envoyer au serveur.
• Dans certains cas, on pourra se passer complètement du serveur...
Evénements
Constantine 2005 J.-F. Perrot
1
Événements en html/Javascript
• D'une manière analogue aux événements de Windows exploités en
Visual Basic et en Visual J++, on associe à différentes zones
d'une page Web des événements exploitables par Javascript.
Quelles zones ? Quels événements ?
--> La plupart (mais pas toutes !) vont être des zones
correspondant aux différents champs d'un formulaire...
• La spécification d'une action sur événement s'écrit
– à l'intérieur de la balise ouvrant la zone
– sous la forme onévénement = "code Javascript"
– le code en question peut renvoyer une valeur logique (vrai par
défaut) qui conditionne la suite du calcul.
Exemple :
onclick = "alert('Gare aux coups !'); return true;"
Evénements
2
Nomenclature des événements html/Javascript
•
•
•
•
Click
MouseOver
MouseOut
Focus
•
•
Blur
select
•
•
Submit
Change
•
•
Load
UnLoad
Evénements
l'utilisateur clique dans la zone
la souris entre dans la zone
la souris sort de la zone
pour un champ de formulaire,
il devient activable
id. devient inactivable
pour un champ de formulaire
un de ses éléments a été choisi
pour un formulaire, on l'envoie
pour un champ de formulaire,
on a modifié son contenu
une page vient d'être chargée
une page vient d'être quittée
3
Événements associés aux liens (links)
• Les zones de lien sont le théâtre de trois événements :
Click, MouseOver et MouseOut, traités par trois handlers
onclick, onmouseover et onmouseout.
• Si la valeur logique renvoyée par le handler onclick est
faux, le lien n'est pas ouvert par le clic.
Si la valeur logique renvoyée par le handler onmouseover
est vrai, le lien n'est pas affiché au bas de la fenêtre.
• Exemple :
EssaiLink.html
<a href="date.html"
onmouseover = "return !confirm('Vraiment ?');"
onmouseout= "return confirm('Vous renoncez ?');"
onclick="return confirm('De\'cide\'ment ?');">
Saut dans l'inconnu</a>
Evénements
4
Lien 1
Pour répondre "non" à la
première question (posée
par onmouseover), il a
fallu que la souris quitte
la zone du lien.
D'où la seconde question
(posée par onmouseout)
...
Evénements
5
Lien 2
Cette fois, on a répondu "oui", en tapant "retour-chariot", donc sans
bouger la souris de la zone du lien.
La valeur renvoyée par le handler onmouseover est donc faux, ce qui
provoque l'apparition de l'URL du lien dans la zone inférieure de la
fenêtre.
Evénements
6
Lien 3
La souris restant sur la zone du lien, on clique, ce qui déclenche le handler
onclick. Si dans la fenêtre de dialogue on clique sur "Annuler", la fenêtre
questionnante disparaît, et rien d'autre ne se produit, puisque le handler a
renvoyé faux, ce qui inhibe l'ouverture du lien - mais la zone du lien reste en
rouge, car elle a été activée...
Evénements
7
Lien 4
Cette fois on a cliqué "OK" dans la fenêtre de dialogue lancée
par le handler onclick, et le lien "date.html" a été dûment
ouvert.
Evénements
8
Représentation de la page comme objet
• La clé de la mise en œuvre de Javascript réside dans la
représentation de la page et de ses composants comme
"objets" Javascript.
• Exemple 1 : quand on écrit
document.write("bla...bla...")
on envoie en fait un ordre write (méthode) à l'objet
document
• Exemple 2 : la ligne au bas de la fenêtre est connue de
Javascript comme la propriété status de l'objet
window. On peut donc la modifier depuis Javascript par
une simple affectation :
window.status = "bla...bla..."
Evénements
9
Désigner les "objets" par leur nom
• Pour pouvoir agir sur les "objets" qui composent la page, il faut
pouvoir les désigner.
– Le cas des "objets standard" document et window est
particulier.
• La plupart des "objets" sont connus par un nom, qui leur est
attribué sous la clé name dans la balise ouvrante.
• Exemple avec des images :
Le nom du fichier-source d'une image est une propriété
".src" de l'objet image, donc directement affectable - à
condition de savoir désigner l'objet en question !
<a href = "" onmouseover='flip.src = "flip2.gif";'
vert/noir
onmouseout='flip.src = "flip1.gif";'>
rouge/blanc
<img name="flip" src="flip1.gif"
width = "30" height = "30" alt = "" />
</a>
Evénements
Constantine 2005 J.-F. Perrot EssaiImg1.html
10
Représentation des formulaires
comme "objets" Javascript
noms des éléments
• Un formulaire est constitué d'éléments dont chacun est à son tour
un"objet".
• Chaque élément est doté d'un nom (name), qui permet de
l'identifier dans le formulaire. Sauf dans le cas des boutons radio,
chaque élément du formulaire porte un nom différent des autres.
Ne pas confondrce nom avec le texte "cosmétique" entourant
l'élement !
• Syntaxe : Ce nom apparaît comme une propriété parmi d'autres
dans le texte html de la balise qui crée l'élement :
<input type="text" name="Entree" value="xxx" />
Il est accessible au code Javascript sous l'identificateur name.
Il ne faut pas le modifier par programme ! Hélas Javascript ne fait
que peu de contrôles à l'exécution...
Evénements
11
propriétés des éléments
• Chaque élément est doté d'un certain nombr /e de propriétés,
(les variables d'instance de Java) dont
– la plupart ont pour valeurs des chaînes de caractères
– certaines sont à valeurs booléennes ou entières
• Toutes ces propriétés sont accessibles au code Javascript (à
condition de savoir désigner l'élément).
• Certaines de ces propriétés sont modifiables par programme
(affectationd'une valeur) ou par action de l'utilisateur : Click.
• Les autres sont fixées dans le texte html de la balise créant
l'élément : les tentatives de modification resteront sans effet.
Si elles ne sont pas fournies, elles prennent une valeur par
défaut ("" pour les chaînes).
Evénements
12
événements et méthodes
• Chaque élément est le siège de certains événements, (cf. la
liste vue précédemment) auxquels il réagit comme indiqué
dans les handlers correspondants.
• En outre, chaque élément est capable d'exécuter certaines
méthodes, qui ont pour effet de déclencher (simuler)
certains des événements auxquels réagit l'élément en
question.
• On a ainsi deux manières d'activer un élément de
formulaire :
– par "action directe" (événement --> handler)
– par programme (appel de méthode --> handler)
Evénements
13
Rappel : Les trois grande catégories
d'éléments de formulaires
Les éléments de formulaire se répartissent en trois catégories :
• les input qui peuvent prendre des formes ("types") multiples ;
<input type="..." name="nnn"...>
• les select qui permettent de choisir dans une liste d'options ;
<select name="nnn">
<option value="aaa">1</option>
<option value="bbb">2</option> ...
</select>
• les textarea qui autorisent l'utilisateur à fournir un texte de
plusieurs lignes.
<textareaname="nnn" rows="rr" cols="cc">
texte par défaut
</textarea>
Evénements
14
Rappel : Les différentes espèces ("types")
d'éléments input
• Les champs-texte (text fields) type="text"
et leur variante les mots de passe type="password"
• Les "boutons" (buttons) type="button"
et leurs deux sous-espèces particulières
– les réinitialiseurs (reset) type="reset"
– les envoyeurs (submit) type="submit"
• Les "boutons radio" (radio buttons) type="radio"
• Les cases à cocher (checkboxes) type="checkbox"
• Les champs cachés (hidden) type="hidden"
Evénements
15
<input type="text"...>
alias "champ-texte" ou text field
• Rappel : Propriétés (chaînes) :
– name fixée dans la balise
<input...name="leNom"...>
– defaultvalue fixée dans la balise
<input...value="laValeurInitiale"...>
– value modifiable par affectation !
• handlers d'événements :
onblur, onfocus, onchange, onselect
• Méthodes : simulent trois des quatre événements ci-dessus
– focus()
– blur()
– select()
Evénements
16
Exemple avec des champs texte
<html> <head> <title>EssaiText</title> </head>
<body> <p>Debut</p>
<form>
<p> Tapez ici :
<input type= "text" name="Entree"
onfocus='this.value = "";
Sortie1.value=""; Sortie2.value="";'
onchange="Sortie1.value = this.value;"
onselect="Sortie2.value = this.value;" />
</p>
<p> Mais lisez ici ...
<input type= "text" name="Sortie1"
onfocus="this.blur();" /> </p>
<p> ou ici : <input type= "text" name="Sortie2"
</form>
<p>Fin</p> </body> </html>
L'effet de onfocus="this.blur();" est de protéger le champ
contre l'écriture.
Evénements
17
Exemple avec des champs texte : essai
Combien de clics...
entre ces deux images ?
Evénements
18
<input type="password"...>
alias "mot de passe" ou password
• Propriétés, événements & méthodes :comme le champ
texte, mais sans le handler onchange
• Comportement : au lieu d'afficher la chaîne tapée par
l'utilisateur, chaque caractère est remplacé par une étoile
(ou par tout autre caractère anomyme).
• Exemple : comme dans l'exemple précédent, avec :
<input type= "password" name="Entree"
onfocus='this.value = "";
Sortie1.value = ""; Sortie2.value ="";'
onblur="Sortie1.value = this.value;"
onselect="Sortie2.value = this.value;" />
• L'événement Blur pour un champ texte est assez voisin de
Change...
Evénements
19
Essai de mot de passe
Pouvez-vous reconstituer la séquence d'actions qui a conduit à
cette situation, sachant qu'aucun caractère n'a été effacé ?
Evénements
20
<input type="button"...>
alias "bouton" ou push button
• Les champs-texte peuvent déclencher des actions via les
événements Focus, Blur, Change et select. Mais ces
déclenchements sont des sous-produits d'autres phénomènes, ce
qui peut nuire à la clarté du code.
• On peut donc préférer des instruments qui ne servent qu'à
déclencher des actions : les boutons !
• Propriétés :
– name (chaîne) fixée dans la balise
<input...name="leNom"...>
– value (chaîne) fixée dans la balise (apparaît sur le bouton)
<input...value="uneChaine"...>
• handlers d'événements : un seul onclick
• Méthodes : une seule click() simulant l'événement Click.
Evénements
21
Exemple avec push button
<html> <head> <title>EssaiBouton</title> </head>
<body> <p>Debut</p>
<form>
<p> Ne tapez pas ici :
<input type= "text" name="Entree"
onfocus='value=""; this.blur(); Go.click()' /> </p>
<p> Cliquez ...
<input type= "button" name="Go" value="ici"
onclick='Entree.value =
prompt("Que voulez-vous dire ?",""); '></p>
</form>
<p>Fin</p>
</body> </html>
Evénements
22
Essai de push button
Cliquer dans le champ-texte ou
sur le bouton donne le même
résultat.
Evénements
23
<input type="reset"...>
alias "bouton reset"
• Rappel : Un bouton reset a en principe pour fonction de
remettre l'ensemble du formulaire dans son état initial.
• Il a les mêmes propriétés et fonctionnalités qu'un push
button ordinaire : c'est un bouton avec un handler
onclick par défaut qui réinitialise le formulaire.
• Il est donc normalement unique dans le formulaire.
• Mais on peut également redéfinir onclick pour
déclencher d'autres actions, et utiliser plusieurs boutons
reset ... Si les actions en question renvoient false, la
réinitialisation standard est inhibée, et les reset deviennent
alors indistinguables de push button ordinaires.
Evénements
24
Exemple avec reset
<form>
<p>Tapez ici : <input type= "text" name="Entree"
onchange="Sortie1.value = this.value;"
onselect="Sortie2.value = this.value;"/> </p>
<p> Mais lisez ici ... <input type= "text" name="Sortie1"
<p> ou ici : <input type= "text" name="Sortie2"
<p> <input type= "reset" value="raz">
<input type= "reset" value="normaliser"
onclick="Sortie1.value =Entree.value;
Sortie2.value = Entree.value;
return false;" >
</p>
</form>
Evénements
25
Exemple avec reset (essais)
Evénements
26
<input type="submit"...>
alias "bouton submit"
• Rappel : Un bouton submit a en principe pour fonction
d'envoyer le contenu courant du formulaire au script CGI
chargé de son exploitation.
• Il a les mêmes propriétés et fonctionnalités qu'un push
button ordinaire : c'est un bouton avec un handler
onclick par défaut qui envoie le contenu du formulaire.
• Il est donc normalement unique dans le formulaire.
• Mais on peut également redéfinir onclick pour
déclencher d'autres actions (vérifications...), et utiliser
plusieurs boutons submit ...
Il est plus difficile d'inhiber l'expédition standard est, et de
rendre ainsi les submit (comme les reset) indistinguables
de push button ordinaires (voir les objets formulaires).
Evénements
27

interface

Transcription

Documents pareils

Html et html5 1 - pierre

HTML – Les formulaires

Formulaire et envoi d`un message pour Contact html> <head

Comptabilité et de Finance de Constantine

Le Restaurant Portofino postmaster@portofino

Rejoignez‐nous pour jouer au Value Race

PHP – HTML → LES FORMULAIRES Pour vous aider :

Fiche 23 - HTML facile

Mon CV - OptimaScript

France Bleu Picardie - Les Films De La Gorgone