Les formulaires, le langage JavaScript
Walid Belkhir
Université de Provence
?belkhir/
1 Les formulaires en HTML
2 Le langage JavaScript
Le noyau du JavaScript
Les classes prédéfinis
Les événements
Inter-activité avec l’utilisateur en proposant des zones de dialogue
Selon le choix de l’utilisateur, un traitement est associé aux zones de dialogue :
au niveau client avec JavaScript, ... au niveau du serveur avec PHP, ...
Exemple de formulaire : champs texte, cases à cocher, ...
Les différents champs de saisie sont décrites à l’aide des balises HTML
Chaque zone est identifiée par un nom auquel sera associée une valeur (par l’utilisateur)
A chaque zone de saisie peut être associé un traitement au niveau clients à l’aide d’un événement JavaScript
Quand le formulaire est soumis, les couples (nom/valeur) de toutes les zones sont transmis dans la requête HTTP au serveur
Trois catégories :
input : champs de saisie de texte et divers types de boutons :
type=”text” : zone de texte type=”password” : zone de texte caché type=”checkbox” : cases à cocher type=”radio” : minimum 2, un seul sélectionnable type=”submit” : bouton de soumission du formulaire type=”reset” : bouton de remise à zéro des champs type=”hidden” : bouton caché
select : menus déroulant, listes à ascenceurs size=”1” : un seul élément sélectionnable size=”n”, n> 1 : liste à choix multiples
textarea : zone de saisie d’un texte long.
<FORM> ... </FORM>
Les champs (de type input, select et textarea) ne seront visible que s’ils sont à l’intérieur d’une balise <FORM>
Attributs : METHOD, NAME, ACTION, TARGET
METHOD : valeurs GET ou POST qui indiquent la fa¸con dont les données sont transmises au programme. ACTION : URL du programme qui sera exécuté quand l’utilisateur clique sur un bouton de soumission
NAME : identifiant pour distinguer les différents formulaires TARGET : cible dans laquelle la réponse du programme sera affichée
Propriétés de l’objet FORM action : accés à l’attribut ACTION
<FORM name=”f1” action=”/bin/prog1”>...</FORM> <SCRIPT>document.f1.action=”/bin/prog2” </SCRIPT> method : accès à l’attribut METHOD target : accès à l’attribut TARGET enctype : type d’encodage des données transmises vers le serveur avec la méthode POST elements : accès aux objets du formulaireselements.length : nombre d’objets du formulaire elements[n].name : nom du nième + 1 objet du formulaire elements[n].name : valeur du nième + 1 objet du formulaire Méthode de l’objet FORM : submit() :
=? déclenche l’envoie du formulaire comme si l’utilisateur avait appuyé sur un bouton de soumission
<SCRIPT> document.f1.submit()</SCRIPT>
Evénement JS associé à l’objet FORM : onSubmit() permet l’exécution de code JS avant l’envoie du formulaire : <FORM name=”f1” method=”post” action=”/bin/prog1” target=” blank” onSubmit=” ma methode(this)” >
Attributs : NAME, VALUE, SIZE, MAXLENGTH :
SIZE : taille d’affichage de la zone (en caractères)
MAXLENGTH : taille de remplissage de la zone (en caractère)
< INPUT TYPE=”TEXT” NAME=”nom”
VALUE=”entrer votre non ici...” SIZE=”20” MAXLENGTH=”50”>
Propriétés :
name, value, defaultValue, type, form (le nom du formulaire qui contient l’élément INPUT)
Méthodes :
focus(), blur(), select()
Evénements :
onBlur, onChange, onFocus, onSelect
Attribut : NAME, VALUE, SIZE, MAXLENGTH
<INPUT type=”PASSWORD” NAME=”pass” VALUE=”entrer votre passwd ici” SIZE=”8”>
Propriétés :
name, value, defaultValue, type, form
Méthodes : focus(), blur(), select()
Pas d’événement associé
<INPUT type=”CHECKBOX” NAME=”cours” VALUE=”1” CHECKED> OW : <br>
<INPUT type=”CHECKBOX” NAME=”cours” VALUE=”2”
CHECKED> HTML <br>
<INPUT type=”CHECKBOX” NAME=”cours” VALUE=”4”> JS
Propriétés : name, value, type, form, checked Méthode :
document.f1.cours[1].click() : coche/ décoche la case OW Evénement :
onClick : quand l’utilisateur coche la case
Choix d’une et une seule option parmi n
<INPUT type=”RADIO” NAME=”cours” VALUE=”1” > OW
<INPUT type=”RADIO” NAME=”cours” VALUE=”3” CHECKED> HTML
<INPUT type=”RADIO” NAME=”cours” VALUE=”4” > JS
name, value, type, form, checked, index (le rang du bouton sélectionné), length
Méthode
document.f1.cours[2].click() : sélectionne la case JS
Evénement :
onClick : quand l’utilisateur coche la case
<INPUT type=”SUBMIT” NAME=”su” VALUE=”login”> <INPUT type=”SUBMIT” NAME=”su” VALUE=”logout”>
Propriétés :
name, value, type, form
Méthode :
click(), soumet le formulaire
Evénement :
onClick
Propriétés :
name, value, type, form
Méthode :
click() : simule un click de l’utilisateur
Evénement : onClick()
Attributs de <SELECT> : NAME, SIZE, MULTIPLE
SIZE : taille de la liste (nbr d’éléments)
MULTIPLE : autorise la sélection multiple si SIZE> 1
Attributs de <OPTION> : VALUE, SELECTED
<SELECT NAME=”pop”>
<OPTION VALUE=”v1”> a </OPTION>
<OPTION VALUE=”v2” SELECTED> b </OPTION>
<OPTION VALUE=”v3”> c </OPTION>
</SELECT>
<SELECT NAME=”mul” size=”3” MULTIPLE> <OPTION> <OPTION VALUE=”v1”> x </OPTION>
<OPTION VALUE=”v2” SELECTED> y </OPTION>
<OPTION VALUE=”v3”> z </OPTION>
</SELECT>
Propriétés d’un objet <SELECT>
name, type (select/select-one/select-multiple), form, length selectedIndex : rang de l’option sélectionnée (dans le cas d’une liste multiple, rang de la première option sélectionnée)
Méthodes d’un objet <SELECT> : focus(), blur()
Propriétés relative aux options defaultSelected, selected, text, value .options[2].text : vaut z on peut modifier, ajouter, supprimer des items de la liste <TEXTAREA NAME=”t1” ROWS=”3” COLS=”44”>
Entrer vos notes ici
1 Les formulaires en HTML
2 Le langage JavaScript
Le noyau du JavaScript
Les classes prédéfinis
Les événements
JavaScript permet d’effectuer des calculs (comme n’importe quel autre langage) de programmer des actions en fonction des événements ex. si la zone de texte contient une adresse mail valide alors l’enregistrer dans un fichiers sinon afficher un message d’erreur
Que peut-on faire avec JavaScript?
petites applications : calculettes, éditions de texte, jeu, ... aspect graphiques : modification d’images, gestion de fenêtres, modification locale de la page HTML, ...
test de validité des données saisies dans les formulaires : vérifier si une zone de saisie a le bon format, ...
Au niveau du langage, il y a
le noyau JavaScript : opérateurs de base, objets prédéfinis, structures, ... un ensemble d’objets associés au navigateur :
fenêtres (objet window) documents (objet document), images, ...
JavaScript n’est pas Java
3 méthodes :
1 utilisation de la balise <script>...</script>
déclaration de fonction dans l’en-tête entre
<head>...</head> appel de fonction ou exécution d’une commande JavaScript dans <body>...</body>
insertion d’un fichier JavaScript externe 2 utilisation d’une URL :
une URL peut être une exécution de fonction JavaScript (entre
<a>...</a> ou <form>...</form>)
3 utilisation des attributs de balises qui gèrent les événements utilisateur :
<BALISE onEvenement=”code JavaScript”>
<HTML><HEAD>
<SCRIPT LANGUAGE=”JAVASCRIPT”> funtion fermer() { window.close();}
</SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE=”JAVASCRIPT”>
document.write(”pour fermer la fenetre”);
<SCRIPT>
<br><a href=”javascript :fermer();” cliquer ici</a>
<br> ou passer la souris sur
<a href=”” onMouseOver=”fermer();” ce lien </a>
</BODY></BODY>
Permet l’exécution de code par le navigateur
Syntaxe :
<SCRIPT LANGUAGE=”nom” SRC=”URL”> ... </SCRIPT> Attribut LANGUAGE :
”JavaScript” par défaut
Attribut SRC pour charger du code présent dans un autre fichier
Ceux du langage C :
arithmétiques : +, - , *, % incrémentation (pré/post indexée) : ++i , i++ logique : && (et), || (ou), ! (non) comparaison : ==, !=, <=, ... concaténation de chaˆ?nes : + affectation : variable=valeur
NB. + peut être un opérateur d’addition ou de concaténation selon le type des opérandes.
Déclaration de variables :
optionnelle mais conseillée avec var
le type n’est pas précisé lors de la déclaration Utilisation d’une variable globale d’un autre document :
window.parent.NomVar Types :
Number : -2.4E-90
Boolean : true, false
String : ”chaine” ou ’chaine’
Conditionnelle :
if (condition) {Suite Instructions;} [ else {Suite Instructions;}]
Boucles for(i=0;i<V;i++){instructions; } while (condition){instructions; } do {instructions} while (condition)
Sortie d’une boucle : break;
Passer à l’itération suivante d’une boucle : continue; typeof(qq chose) : retourne le type de qq chose switch :
switch(variable){
case ’valeur 1’ :
Instructions à exécuter si variable==valeur 1; break;
case ’valeur 2’ :
Instructions à exécuter si variable==valeur 2; break;
default :
Instructions à exécuter si toutes les conditions précédentes ne sont pas vérifiées;
}
function nom(arg 1, ..., arg n){ Instructions; return valeur;
} pas de spécification de type dans la liste d’arguments
<html> <head>
<SCRIPT LANGAGE=”JAVASCRIPT” SRC=””>
</SCRIPT>
</HEAD><BODY>
<FORM name=”MonForm”
onSubmit=”alert(’la facotielle de ’ + this.nombre.value + ’est’ + fact(nombre.value) );”> Entrer un nombre :
<input type=”text” name=”nombre”>
<input type=”submit” value=”calcule”>
</FORM>
</BODY> </html>
Construction d’un tableau sans préciser le contenu var Tab = new Array();
Construction d’un tableau en précisant la taille var Tab = new Array(3);
Création + initialisation du tableau var Tab = new Array(e1, ..., en); les ei n’ont pas forcement le même type les indicent varient de 0 à n ? 1 proprieté length : taille du tableau : Tab.legth
Un tableau est un objet prédéfini qui possède des propriété et des méthodes
Tableaux associatifs : l’indice peut être une chaˆ?ne de caractères :
Tab[’nom’] ?
Parcours de l’ensemble des propriétés d’un objet
for (p in window){ document.write(window[p]); }
1 Array : manipulation des tableaux
2 Boolean
3 Date : traitement de la date
4 Function : création de fonctions
5 Math : (sinus, cosinus, racine carrée ...)
6 Image : gestion dynamique des images
7 Option : gestion des listes créées avec <SELECT>
8 RegExp : manipulation des expressions régulières
9 String : manipulation des chaˆ?nes
Propriété : length
Méthodes principales :
indexOf(chaine,index) substring(début,fin+1), charAt(n) lastIndexOf(chaine), toLowerCase() toUpperCase(), split(motif) ex.
var Ch=”Salut Salut”; Ch.indexOf(”S”); —> 0
Ch.lastIndexof(”S”); —> 6
Ch.charAt(4); —> t
Ch.substring(6,11); —> Salut
Propriétés : constantes
E, PI, ...
Méthodes :
cos, sin, tg, acos, atan, asin, ...
abs : valeur absolut ceil (partie entière sup), floor (partie entière inf) exp, log, sqrt, pow(x,n) max(x,y), min(x,y) random ? [0,1]
Propriété : length
Méthodes principales : join : concatène tous les éléments en une chaˆ?ne de caractères séparés par une virgule reverse : transpose le tableau sort : trie selon la relation d’ordre passée en argument (fonction de comparaison fournie par l’utilisateur), ordre lexicographique par défault
Des événement sont associés aux actions de l’utilisateur et à certaines balises correspondance objet,événement le code JavaScript est exécuté quand l’événement se produit sur l’objet associé
Exemple d’événement : passage de la souris sur un lien hyper-texte soumission d’un formulaire
2 manières pour associer une action à un couple (objet,événement)
1 utiliser des attributs de balises spécifiques :
<a href=”” onMouseOver=”alert(’Salut’);”>
cliquer ici
</a>
2 spécifier pour un élément et un événement la fonction qui sera exécutée :
<body><a href=””> cliquer ici </a></body>
<script> fucntion MaFonc(){ alert(’Salut’);};
document.links[0].onmouseover=MaFonction;
</script>
La classe event
Quand un événement se produit, le navigateur crée un objet event donc les propriétés sont type target objet sur lequel l’événement s’est produit layerX, layerY position de la souris en pixels dans la page screenX, screenY position de la souris en pixels dans l’écran
