Cours JavaScript : Les formulaires

Participez au vote ☆☆☆☆☆★★★★★

Aller au Téléchargement

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.

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 n^ième + 1 objet du formulaire elements[n].name : valeur du n^iè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)” >

<INPUT type=”TEXT”>

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

Propriétés :

name, value, defaultValue, type, form

Méthodes : focus(), blur(), select()

Pas d’événement associé

<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

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()

<SELECT> et <OPTION>

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>

</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

Insertion de code JavaScript dans un document HTML

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 :

<SCRIPT LANGUAGE=”JAVASCRIPT”> funtion fermer() { window.close();}

</SCRIPT>

</HEAD><BODY>

document.write(”pour fermer la fenetre”);

<br> ou passer la souris sur

</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

Fonctions et formulaires : un exemple

</SCRIPT>

</HEAD><BODY>

<FORM name=”MonForm”

onSubmit=”alert(’la facotielle de ’ + this.nombre.value + ’est’ + fact(nombre.value) );”> Entrer un nombre :

</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(e₁, ..., e_n); les e_i 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 :

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>

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