cours3

Les formulaires en HTML Le langage JavaScript

Les formulaires, le langage JavaScript

Walid BelkhirUniversite de Provence

[email protected]://www.lif.univ-mrs.fr/belkhir/

1 / 45


Plan

1 Les formulaires en HTML

2 Le langage JavaScriptLe noyau du JavaScriptLes classes predefinisLes evenements

2 / 45


Pourquoi les formulaires

Inter-activite avec lutilisateur en proposant des zones dedialogue

Selon le choix de lutilisateur, un traitement est associe auxzones de dialogue :

au niveau client avec JavaScript, ...au niveau du serveur avec PHP, ...

Exemple de formulaire : champs texte, cases a` cocher, ...

3 / 45


Principe du formulaire

Les differents champs de saisie sont decrites a` laide desbalises HTML

Chaque zone est identifiee par un nom auquel sera associeeune valeur (par lutilisateur)

A chaque zone de saisie peut etre associe un traitement auniveau clients a` laide dun evenement JavaScript

Quand le formulaire est soumis, les couples (nom/valeur) detoutes les zones sont transmis dans la requete HTTP auserveur

4 / 45


Les elements dun formulaire

Trois categories :

input : champs de saisie de texte et divers types de boutons :

type=text : zone de textetype=password : zone de texte cachetype=checkbox : cases a` cochertype=radio : minimum 2, un seul selectionnabletype=submit : bouton de soumission du formulairetype=reset : bouton de remise a` zero des champstype=hidden : bouton cache

select : menus deroulant, listes a` ascenceurs

size=1 : un seul element selectionnablesize=n, n > 1 : liste a` choix multiples

textarea : zone de saisie dun texte long.

5 / 45


La balise

...

Les champs (de type input, select et textarea) ne serontvisible que sils sont a` linterieur dune balise

Attributs : METHOD, NAME, ACTION, TARGET

METHOD : valeurs GET ou POST qui indiquent la facon dontles donnees sont transmises au programme.ACTION : URL du programme qui sera execute quandlutilisateur clique sur un bouton de soumissionNAME : identifiant pour distinguer les differents formulairesTARGET : cible dans laquelle la reponse du programme seraaffichee

6 / 45


La balise

Proprietes de lobjet FORM

action : acces a` lattribut ACTION...document.f1.action=/bin/prog2

method : acce`s a` lattribut METHOD

target : acce`s a` lattribut TARGET

enctype : type dencodage des donnees transmises vers leserveur avec la methode POST

elements : acce`s aux objets du formulaires

elements.length : nombre dobjets du formulaireelements[n].name : nom du nie`me + 1 objet du formulaireelements[n].name : valeur du nie`me + 1 objet du formulaire

7 / 45


La balise

Methode de lobjet FORM : submit() := declenche lenvoie du formulaire comme si lutilisateur

avait appuye sur un bouton de soumission

document.f1.submit()

Evenement JS associe a` lobjet FORM : onSubmit()permet lexecution de code JS avant lenvoie du formulaire :

8 / 45


Attributs : NAME, VALUE, SIZE, MAXLENGTH :SIZE : taille daffichage de la zone (en caracte`res)MAXLENGTH : taille de remplissage de la zone (en caracte`re)< INPUT TYPE=TEXT NAME=nomVALUE=entrer votre non ici... SIZE=20MAXLENGTH=50>

Proprietes :name, value, defaultValue, type, form (le nom du formulairequi contient lelement INPUT)

Methodes :focus(), blur(), select()

Evenements :onBlur, onChange, onFocus, onSelect

9 / 45


INPUT type=PASSWORD

Attribut : NAME, VALUE, SIZE, MAXLENGTH

Proprietes :name, value, defaultValue, type, form

Methodes :focus(), blur(), select()

Pas devenement associe

10 / 45


INPUT type=CHECKBOX

Cases a` cocher a` choix multipleAttributs : NAME, VALUE, CHECKED OW : HTML

JS

Proprietes : name, value, type, form, checkedMethode :document.f1.cours[1].click() : coche/ decoche la case OWEvenement :onClick : quand lutilisateur coche la case

11 / 45


Choix dune et une seule option parmi n

Attributs : NAME, VALUE, CHECKED OW HTML JS

Proprietes :name, value, type, form, checked, index (le rang du boutonselectionne), length

Methodedocument.f1.cours[2].click() : selectionne la case JS

Evenement :onClick : quand lutilisateur coche la case

12 / 45


Envoi des donnees et execution du programme specifie parlattribut ACTION de

Attributs : NAME, VALUE

Proprietes :name, value, type, form

Methode :click(), soumet le formulaire

Evenement :onClick

13 / 45


Recharge tous les champs du formulaire a` leur valeur pardefaut



Methodeclick() : reinitialise le formulaire

Evenement :onClick()

14 / 45


Na de sens que dans un contexte JavaScript



Methode :click() : simule un click de lutilisateur

Evenement :onClick()

15 / 45


et

Attributs de : NAME, SIZE, MULTIPLESIZE : taille de la liste (nbr delements)MULTIPLE : autorise la selection multiple si SIZE > 1

Attributs de : VALUE, SELECTED

a b c

x y z

16 / 45


et

Proprietes dun objet

name, type (select/select-one/select-multiple), form, lengthselectedIndex : rang de loption selectionnee (dans le cas duneliste multiple, rang de la premie`re option selectionnee)

Methodes dun objet : focus(), blur()

Proprietes relative aux options

defaultSelected, selected, text, valuedocument.f1.mul.options[2].text : vaut zon peut modifier, ajouter, supprimer des items de la liste

17 / 45


Zone de saisie de texte libre

Attributs : NAME, ROWS, COLS

Entrer vos notes ici

Proprietes :name, value, defaultValue, type, form, cols, rows

Methode :focus(), blur(), select()

Evenements :onBlur, onChange, onFocus, onSelect

18 / 45


Plan

1 Les formulaires en HTML

2 Le langage JavaScriptLe noyau du JavaScriptLes classes predefinisLes evenements

19 / 45


Le noyau du JavaScript

JavaScript : les principes

Insertion des scripts (programmes) directement dans le codedes pages HTML

Execution de code du cote client (temps de reponse pluscourt)

Exemples : test dun formulaire avant envoi, affichagedynamique, ...

Concu pour traitement local des evenements clients (click,deplacement souris, ... )

JavaScript est un langage

interprete (le code est analyse et execute au fur et a` mesurepar le navigateur)a` base dobjets

20 / 45



Le langage JavaScript

JavaScript permet

deffectuer des calculs (comme nimporte quel autre langage)

de programmer des actions en fonction des evenementsex. si la zone de texte contient une adresse mail valide alorslenregistrer dans un fichiers sinon afficher un message derreur

21 / 45




Que peut-on faire avec JavaScript ?

petites applications : calculettes, editions de texte, jeu, ...

aspect graphiques : modification dimages, gestion defenetres, modification locale de la page HTML, ...

test de validite des donnees saisies dans les formulaires :verifier si une zone de saisie a le bon format, ...

22 / 45



Le noyau JavaScript

Au niveau du langage, il y a

le noyau JavaScript : operateurs de base, objets predefinis,structures, ...un ensemble dobjets associes au navigateur :

fenetres (objet window)documents (objet document),images, ...

JavaScript nest pas Java

23 / 45



Insertion de code JavaScript dans un document HTML

3 methodes :1 utilisation de la balise ...

declaration de fonction dans len-tete entre...appel de fonction ou execution dune commande JavaScriptdans ...insertion dun fichier JavaScript externe

2 utilisation dune URL :

une URL peut etre une execution de fonction JavaScript (entre... ou ...)

3 utilisation des attributs de balises qui ge`rent les evenementsutilisateur :

24 / 45



Insertion de code JavaScript

funtion fermer() { window.close() ;}

document.write(pour fermer la fenetre) ;



La balise

Permet lexecution de code par le navigateur

Syntaxe : ...

Attribut LANGUAGE :

JavaScript par defaut

Attribut SRC

pour charger du code present dans un autre fichier

26 / 45



Insertion dun fichier externe : un exemple

fichier index.html

document.write(pour fermer la fenetre) ;




Typage faible

Operateurs et instructions : ceux du langage C

Methodes

globales (predefinies, associees a` tous les objets)fonctions (definies par lutilisateur)

Objets

predefinis : String, Date, Math, ...specifiques au navigateur : window, document, ...

Commentaires : comme en langage C ://..... ou bien /* .....*/

Separateur dinstruction : ;

28 / 45



Operateurs JavaScript

Ceux du langage C :

arithmetiques : +, - , *, %

incrementation (pre/post indexee) : ++i , i++

logique : && (et), || (ou), ! (non)comparaison : ==, !=,



Variables JavaScript

Declaration de variables :

optionnelle mais conseilleeavec varle type nest pas precise lors de la declaration

Utilisation dune variable globale dun autre document :

window.parent.NomVar

Types :

Number : -2.4E-90Boolean : true, falseString : chaine ou chaine

30 / 45



Instructions de bases

Conditionnelle :if (condition) {Suite Instructions ;} [ else {Suite Instructions ;}]Boucles

for(i=0 ;i



Instructions de base

switch :switch(variable){

case valeur 1 :Instructions a` executer si variable==valeur 1 ;break ;

case valeur 2 :Instructions a` executer si variable==valeur 2 ;break ;

default :Instructions a` executer si toutes les conditions precedentes nesont pas verifiees ;

}

32 / 45



Les fonctions

function nom(arg 1, ..., arg n){Instructions ;return valeur ;

}pas de specification de type dans la liste darguments

33 / 45



Fonctions et formulaires : un exemple

Entrer un nombre :

34 / 45



Les tableaux

Construction dun tableau sans preciser le contenuvar Tab = new Array() ;

Construction dun tableau en precisant la taillevar Tab = new Array(3) ;

Creation + initialisation du tableauvar Tab = new Array(e1, ..., en) ;

les ei nont pas forcement le meme typeles indicent varient de 0 a` n 1

propriete length : taille du tableau : Tab.legth

35 / 45



Tableaux et Objets

Un tableau est un objet predefini qui posse`de des propriete etdes methodes

Tableaux associatifs : lindice peut etre une chane decaracte`res :Tab[nom] Tab.nomParcours de lensemble des proprietes dun objetfor (p in window){

document.write(window[p]) ; }

36 / 45


Les classes predefinis


1 Array : manipulation des tableaux

2 Boolean

3 Date : traitement de la date

4 Function : creation de fonctions

5 Math : (sinus, cosinus, racine carree ...)

6 Image : gestion dynamique des images

7 Option : gestion des listes creees avec

8 RegExp : manipulation des expressions regulie`res

9 String : manipulation des chanes

37 / 45



La classe String

Propriete : length

Methodes principales :

indexOf(chaine,index)substring(debut,fin+1), charAt(n)lastIndexOf(chaine), toLowerCase()toUpperCase(), split(motif)ex.var Ch=Salut Salut ;Ch.indexOf(S) ; > 0Ch.lastIndexof(S) ; > 6Ch.charAt(4) ; > tCh.substring(6,11) ; > Salut

38 / 45



La classe Math

Proprietes : constantes

E, PI, ...

Methodes :

cos, sin, tg, acos, atan, asin, ...abs : valeur absolutceil (partie entie`re sup), floor (partie entie`re inf)exp, log, sqrt, pow(x,n)max(x,y), min(x,y)random [0, 1]

39 / 45



La classe Array

Propriete : length

Methodes principales :

join : concate`ne tous les elements en une chane de caracte`ressepares par une virgulereverse : transpose le tableausort : trie selon la relation dordre passee en argument(fonction de comparaison fournie par lutilisateur), ordrelexicographique par default

40 / 45


Les evenements

Les evenements

Des evenement sont associes aux actions de lutilisateur et a`certaines balises

correspondance objet,evenementle code JavaScript est execute quand levenement se produitsur lobjet associe

Exemple devenement :

passage de la souris sur un lien hyper-textesoumission dun formulaire

41 / 45


Les evenements

Les evenements

2 manie`res pour associer une action a` un couple (objet,evenement)

1 utiliser des attributs de balises specifiques :

cliquer ici

2 specifier pour un element et un evenement la fonction qui seraexecutee :

cliquer ici

fucntion MaFonc(){ alert(Salut) ;} ;document.links[0].onmouseover=MaFonction ;

42 / 45


Les evenements

43 / 45


Les evenements

44 / 45


Les evenements

Les evenements

La classe event

Quand un evenement se produit, le navigateur cree un objetevent donc les proprietes sont

typetarget objet sur lequel levenement sest produitlayerX, layerY position de la souris en pixels dans la pagescreenX, screenY position de la souris en pixels dans lecran

45 / 45

Documents

cours3