Vous êtes sur la page 1sur 45
Année universitaire :2014-2015 Cours :Développement Web Partie 2 Enseignants : Mme Z. CHANNOUF 1

Année universitaire :2014-2015

Cours :Développement Web Partie 2
Cours :Développement Web
Partie 2

Enseignants : Mme Z. CHANNOUF

1

    
Sommaire
Sommaire

Les tableaux et l’objet Array

Les chaines de caractères et l’objet String

L’objet Date

L’objet Math

Les formulaires

L’accès aux éléments du formulaire

Exemples

Les tableaux et l’objet Array  Deux types de tableaux : ◦ les tableaux classiques :
Les tableaux et l’objet Array
Deux types de tableaux :
◦ les tableaux classiques : pas de contrainte sur le contenu des cases,
celles-ci sont numérotées à partir de 0 ;
◦ les tableaux associatifs dont la particularité est que les cases ne sont
plus indicées par un numéro mais par un texte.
Les tableaux classiques
La déclaration d'un tableau et l'affectation de valeurs à ses
cases.

var t = new Array(); t[0] = 2; t[1] = 3.14; t[2] = 'coucou';

// autre syntaxe pour définir un tableau

var notes = new Array(10,5,20,14,2);

Les tableaux et l’objet Array Les tableaux associatifs var mails = new Array(); mails[‘ahmad'] = ‘ahmad@univ.tn';

Les tableaux et l’objet Array

Les tableaux associatifs

var mails = new Array();

mails[‘ahmad'] = ‘ahmad@univ.tn';

mails[‘eya'] = ‘eya@free.fr'; document.write('Mail de Ahmad= '+mails[‘ahmad']);

Les tableaux et l’objet Array Les tableaux associatifs var mails = new Array(); mails[‘ahmad'] = ‘ahmad@univ.tn';
  • Propriétés et méthodes de l’objet Array

Propriété

Description

length

Retourne le nombre d'éléments contenus dans le tableau

MonTableau.length;

Méthode Description concat() Permet de concaténer plusieurs tableau dans l'ordre de déclaration MonTableau.concat(Tableau2, Tableau3); join() Retourne
Méthode
Description
concat()
Permet de concaténer plusieurs tableau dans l'ordre de
déclaration
MonTableau.concat(Tableau2, Tableau3);
join()
Retourne une chaîne de caractère contenant tous les éléments
du tableau séparés par le séparateur spécifié (par défaut la
virgule)
MonTableau.join(Separateur)
pop()
Supprime le dernier élément du tableau et retourne sa valeur
MonTableau.pop()
push()
Ajoute les éléments spécifiés et retourne la nouvelle taille du
tableau
TailleTableau = MonTableau.push(valeur1, valeur2)
reverse()
Inverse les éléments du tableau, le dernier élément devenant le
premier et ainsi de suite
MonTableau.reverse()
shift()
Supprime et retourne le premier élément du tableau
MonTableau.shift()
slice()
Génère un nouveau tableau à partir d'une section d'un tableau
existant
5
MonTableau.slice(IndexDebut,IndexFin)
Les tableaux et l’objet Array Parcours de tableaux JavaScript : la boucle for in Cette boucle

Les tableaux et l’objet Array

Parcours de tableaux JavaScript : la boucle for in

Cette boucle est dédiée au parcours de tableaux, qu'ils soient simples ou associatifs :

// syntaxe générale

for (var k in t) { // des instructions ici portant sur t[k] }

Les tableaux et l’objet Array Parcours de tableaux JavaScript : la boucle for in Cette boucle

//

...

et sur un exemple

var carnet = new Array();

carnet[‘Ahmad'] = '19 ans'; carnet[‘Eya'] = ‘19 ans'; carnet[‘Mohammed'] = '30 ans'; // affichage des valeurs du tableau

for (var i in carnet)

{ document.write('la clef vaut : ' + i); document.write(', la valeur associée est : ' + carnet[i]+'<br>'); }


Les chaines de caractères
Les chaines de caractères

Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets

" ou l'apostrophe ‘.

var chaine1="Bonjour"; var chaine2='Bonjour';

// Ces deux lignes ont le même effet

 Les chaines de caractères Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets

Cela se corse quand il s'agit d'initialiser une chaîne avec un de ces

caractères

var chaine1="Bonjour l'ami"; var chaine2='Je vous dis "Bonjour " ';

Le secret est d'alterner les guillemets et les apostrophes selon les

caractères spéciaux à afficher

Il faut veiller à ne pas fermer la chaîne de caractères avant sa fin normale pour éviter les erreurs JavaScript


Les chaines de caractères
Les chaines de caractères

Exemple de déclaration incorrecte

var chaine1="Je vous dis "Bonjour"";

// ici, le " indique la fin de chaîne

Il existe aussi une autre solution

 Les chaines de caractères Exemple de déclaration incorrecte var chaine1="Je vous dis "Bonjour""; // ici,

var chaine1="Je lui dis \"Bonjour l'ami\" ";

La variable chaine1 contient Je lui dis "Bonjour l'ami".

Javascript a interprété \" comme un guillemet.


Les chaines de caractères
Les chaines de caractères

L'opération de base est la concaténation de chaînes Elle consiste à assembler deux chaînes en une

L'opérateur est le +, à ne pas confondre avec l'opérateur addition qui s'applique aux nombres

var chaine1="Vive le ";

 Les chaines de caractères L'opération de base est la concaténation de chaînes ◦ Elle consiste

var chaine2="JavaScript"; var chaine=chaine1+chaine2;

La variable chaine contient après ce script "Vive le JavaScript". La concaténation est une opération simple et très utile



Les chaines de caractères
Les chaines de caractères

Propriétes et méthodes

Une chaîne de caractères en JavaScript est un objet string sur lequel s'appliquent des propriétés et des méthodes.

La propriété length indique le nombre de caractères de la chaîne

  Les chaines de caractères Propriétes et méthodes Une chaîne de caractères en JavaScript est

var chaine="azerty";

chaine.length retourne le nombre de caractères, ici 6 caractères

  • La méthode charAt(n) récupère le nième caractère Attention, le premier caractère a comme indice 0

var chaine="azerty"

chaine.charAt(1) retourne "z"

  
Les chaines de caractères
Les chaines de caractères

La méthode substring permet d’extraire un morceau d’une chaine. Elle attend 2 paramètres

l'indice du premier caractère (inclus), l'indice du dernier caractère (exclus).

Si les deux paramètres sont inversés, javascript rétablit l'ordre logique chaine.substring(6,10) et chaine.substring(10,6) sont

identiques

Si le deuxième paramètre est omis, la chaîne retournée commence

à l'indice indiqué et se termine à la fin de la chaîne.

var date="15/08/2000";

  • La question est de récupérer le jour, le mois et l'année dans 3 variables différentes

var jour = date.substring(0,2);

var mois = date.substring(3,5); var annee = date.substring(6,10);

11


Les chaines de caractères
Les chaines de caractères

JavaScript offre deux méthodes pour transformer les

lettres (et des lettres uniquement) d'un mot en

majuscules ou en minuscules

var chaine="Ceci est un texte"; var maj=chaine.toUpperCase(); var min=chaine.toLowerCase();

 Les chaines de caractères JavaScript offre deux méthodes pour transformer les lettres (et des lettres

A la fin de ce script, maj contient CECI EST UN TEXTE et min contient ceci est un texte

L’objet Date L’objet Date de Javascript apporte une gestion complète du temps :  Aujourd'hui :
L’objet Date
L’objet Date de Javascript apporte une gestion complète du temps :
Aujourd'hui : Lundi 20Avril 2015, l'horloge de votre ordinateur donne 09h
24min
Il propose des accès aux différentes parties constituant la date ainsi qu
des méthodes de manipulation pour effectuer des calculs ou des
modifications.

Fonctions pour récupérer la date

getDate(); getMilliseconds(); getSeconds();

getMinutes(); getHours(); getDay(); getMonth(); getYear(); getFullYear(); getTime()

Fonctions pour modifier la date

setMilliseconds(valeur); setSeconds(valeur); setMinutes(valeur); setHours(valeur):;

setDate(valeur); setMonth(valeur);

setYear(valeur); setFullYear(valeur); setTime(valeur)

Autres fonctions

parse(); toGMTString(); toLocaleString()

L’objet Date L’objet Date de Javascript apporte une gestion complète du temps :  Aujourd'hui :
L’objet Date Exemple : date.html <html> <head> <title>Aujourd'hui</title> </head> <body> Date de votre machine : <script
L’objet Date
L’objet Date

Exemple : date.html

<html> <head> <title>Aujourd'hui</title> </head>

<body> Date de votre machine :

<script language="JavaScript">

var aujourd_hui = new Date();

document.write(aujourd_hui.getDate()+' / '); document.write(aujourd_hui.getMonth()+1+' / ');

document.write(aujourd_hui.getFullYear());

</script>

</body>

</html>

L’objet Math  En JavaScript, la plupart des fonctions mathématiques sont des méthodes de l'objet Math.
L’objet Math
En JavaScript, la plupart des fonctions mathématiques sont des
méthodes de l'objet Math.
L'objet Math permet de manipuler les nombres et d'accéder aux

fonctions mathématiques classiques :

L’objet Math  En JavaScript, la plupart des fonctions mathématiques sont des méthodes de l'objet Math.round() , abs() , floor() , ceil() - les fonctions trigonométriques sin() , cos() ... - le hasard avec random() L'objet Math contient aussi une importante liste de constantes mathématiques ( PI , ... ) 15 " id="pdf-obj-14-21" src="pdf-obj-14-21.jpg">

L'objet Math contient aussi une importante liste de constantes

mathématiques (PI,

...

)

          
L’objet Math
L’objet Math

Les fonctions de base :

Math.abs(a) : Retourne la valeur absolue de a

Math.round(a) : Retourne l'entier arrondi le plus proche de a

Math.ceil(a) : Retourne l'entier immédiatement supérieur (ou égal) à a

Math.floor(a) : Retourne l'entier immédiatement inférieur (ou

égal) à a

Math.sqrt(a) : Retourne la racine carrée de a

Math.log(a) : Retourne le logarithme de a

Math.ln(a) : Retourne le logarithme népérien de a

Math.exp(a) : Retourne l'exponentielle de a

Math.pow(a,b) : Retourne a à la puissance b

Math.min(a,b) : Retourne le plus petit des paramètres a ou b

Math.max(a,b) : Retourne le plus grand des paramètres a ou b

Les formulaires  Les formulaires sont la base des échanges entre le site et le visiteur.

Les formulaires

Les formulaires sont la base des échanges entre le site et le visiteur.

JavaScript ne peut pas échanger d'information à partir de fichier texte ou de base de données.

Les formulaires  Les formulaires sont la base des échanges entre le site et le visiteur.

Pour intégrer des éléments de formulaire, il faut encadrer les balises par <form> et </form>.

Les éléments du formulaire Création de formulaire Case à cocher Bouton radio Champ de texte Password

Les éléments du formulaire

Les éléments du formulaire Création de formulaire Case à cocher Bouton radio Champ de texte Password
Création de formulaire Case à cocher Bouton radio Champ de texte Password Zone de texte Bouton

Création de formulaire Case à cocher

Bouton radio

Champ de texte Password Zone de texte Bouton

Bouton Reset Bouton Submit Valeur cachée

18

Les éléments du formulaire Définition des méthodes et événements  Une méthode est une fonction (ou

Les éléments du formulaire

Définition des méthodes et événements

  • Une méthode est une fonction (ou procédure) de traitement de données associée à un objet

  • Un événement est une fonction (pas une procédure!)

Les éléments du formulaire Définition des méthodes et événements  Une méthode est une fonction (ou

toujours associée à un objet mais qui réagit en fonction des interventions de l'utilisateur

Il utilise le clavier pour fournir des infos Il sélectionne l'objet avec la souris Il spécifie des valeurs de l'objet avec la souris

  • Cette notion d'événement est cruciale car elle est la base du fonctionnement des programmes Internet

Les éléments du formulaire La balise <form> : Propriétés name action method enctype target Nom du
Les éléments du formulaire
La balise <form> : Propriétés
name
action
method
enctype
target
Nom du formulaire
Adresse du script de serveur à exécuter
Méthode d'appel du script (get ou post)
Type d'encodage du formulaire
Destination du retour du formulaire
Les éléments du formulaire La balise <form> : Propriétés name action method enctype target Nom du

La balise <form> : Méthodes

submit

Déclenche l'action du formulaire

reset

Réinitialise avec les valeurs par défaut

La balise <form> : Evènements

onSubmit

Détecte la soumission du formulaire

 

onReset

Détecte la réinitialisation

20

Les éléments du formulaire L'élément input  L'objet input est le plus utilisé de tous. 
Les éléments du formulaire
L'élément input
L'objet input est le plus utilisé de tous.
Il permet d'afficher
Les éléments du formulaire L'élément input  L'objet input est le plus utilisé de tous. 

des champs texte, des boutons, des radio-boutons,

des cases à cocher,

le champ caché, les boutons spéciaux reset et submit.

Les éléments du formulaire L'élément input : Propriétés name Nom du champ type type du champ
Les éléments du formulaire
L'élément input : Propriétés
name
Nom du champ
type
type du champ text, button, radio, checkbox, submit, reset
value
Libellé texte
defaultvalue
Valeur par défaut du champ (utile avec reset)
size
maxlength
checked
disabled
readOnly
class
style
Taille du champ
Taille maximale du champ de type texte
Case à cocher ou radio bouton coché ou non
Grisé (modification impossible par le visiteur)
Lecture seule
Nom de la classe de style
Chaîne de caractères pour le style

22

Les éléments du formulaire L'élément input : Méthodes focus Donne le focus (ou le curseur ou
Les éléments du formulaire
L'élément input : Méthodes
focus
Donne le focus (ou le curseur ou la main)
blur
Enlève le focus
click
Simule un clic (sur un bouton)

L'élément input : Evénements

onFocus

Détecte la prise de focus

onBlur

Détecte la perte de focus

onClick

Détecte le clic souris (sur un bouton)

onChange

Détecte les changements



Les éléments du formulaire

Les champs de texte

Un champ de texte est défini par la balise input avec un type text

<input type="text">

 Les éléments du formulaire Les champs de texte Un champ de texte est défini par

Propriétés acceptées

name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style

Méthodes acceptées focus, blur

Evénements acceptés onFocus, onBlur, onChange



Les éléments du formulaire

Les Boutons

Un bouton est défini par la balise input avec un type button

<input type="button" value="Ceci est un bouton">

 Les éléments du formulaire Les Boutons Un bouton est défini par la balise input avec

Propriétés acceptées

  • name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style

Méthodes acceptées

  • focus | blur | click

Événements acceptés

  • onFocus | onBlur | onClick

L'événement le plus utilisé est onClick car il détecte le clic utilisateur.



Les éléments du formulaire

Les Boutons-Radio

Un radio-button est défini par la balise INPUT avec un type "radio"

Pour définir un groupe, il faut donner le même nom (champs name) à tous les radios.

  Les éléments du formulaire Les Boutons-Radio Un radio-button est défini par la balise INPUT

Ainsi, la sélection sera unique pour l'ensemble du groupe.

<input type="radio" name="sexe" value="homme"> Homme <input type="radio" name="sexe" value="femme" checked>Femme

Propriétés acceptées

name | value | checked | disabled | readOnly | class | style

Méthodes acceptées

focus | blur | click

Evénements acceptés

onFocus | onBlur | onClick

26

 

Les éléments du formulaire

Les Cases à Cocher

Une case à cocher est définie par la balise INPUT avec un type

checkbox.

Ici, Majeur et Etudiant sont décochés à l'origine.

Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des deux.

  Les éléments du formulaire Les Cases à Cocher Une case à cocher est définie

<input type="checkbox" name="majeur">Majeur <input type="checkbox" name="etudiant">Etudiant

Propriétés acceptées name | checked | disabled | readOnly | class | style

Méthodes acceptées focus | blur | click

Événements acceptés onFocus | onBlur | onClick

27



Les éléments du formulaire

Le password

Password se présente comme une zone de texte.

Mais il affiche des * pour cacher le contenu du champ.

 Les éléments du formulaire Le password Password se présente comme une zone de texte. 

Il est aussi impossible de copier le contenu (CTRL+C).

Il est donc adapté à la saisie de mot de passe.

<input type="password" name="passe" value="azerty" size=10>



Les éléments du formulaire

La valeur cachée

Un champ caché est destiné à transmettre des informations dans le formulaire, sans que le visiteur ne s'en aperçoivent.

Cela peut être une adresse mail, un résultat de traitement, l'heure, un cookie ou toute autre information.

 Les éléments du formulaire La valeur cachée Un champ caché est destiné à transmettre des

Naturellement, le champ n'apparaît pas!

<input type="hidden" value="contenu caché" name="cache">

Propriétés acceptées

  • name | value | defaultvalue

Remarque : Même s'il n'apparaît pas à l'écran, son contenu reste manipulable en JavaScript.

Les éléments du formulaire Les boutons spéciaux  Les boutons reset et submit existent bien!
Les éléments du formulaire
Les boutons spéciaux
Les boutons reset et submit existent bien!

<form name="formspe" action="javascript:alert('Soumis')">

Les éléments du formulaire Les boutons spéciaux  Les boutons reset et submit existent bien! <form

<input type="text" name="texte" value="Contenu">

<input type="checkbox" checked>Cochez moi !<BR>

<input type="reset" value="RESET">

<input type="submit" value="SUBMIT">

</form>



Les éléments du formulaire

Les menus de selection

Les listes sont définies par les balises <select></select>

Cette balise définie la zone de la liste. Les lignes de contenu de la liste sont alimentées par les balises <option></option>

 Les éléments du formulaire Les menus de selection Les listes sont définies par les balises

<select name="mono" size=1> <option value="1">ligne 1</option > <option value="2">ligne 2</option > <option value="3">ligne 3</option > <option value="4">ligne 4</option > </select>



Les éléments du formulaire

les menus de selection

Les listes peuvent se présenter de plusieurs manières, selon leur propriété.

Sur une ligne : size=1

Sur plusieurs lignes mono-sélection : size=4 Sur plusieurs lignes multi-sélection multiple size=4

 ◦ Les éléments du formulaire les menus de selection Les listes peuvent se présenter de

L’élément option

  • L'objet option est assez simple

  • Il peut avoir comme attributs

name, value, selected

  • selected force la sélection de cette occurrence dans la liste

32

Les éléments du formulaire les menus de selection :Propriétés name size Nom de la liste Nombre
Les éléments du formulaire
les menus de selection :Propriétés
name
size
Nom de la liste
Nombre de lignes à afficher
multiple
disabled
Sélection multiple autorisée
Grisage de la liste
class
style
Classe de feuille de style
Style de la liste
les menus de selection :Méthodes et événements
add
Ajoute un ligne (objet OPTION)
remove
Supprime une ligne
focus
Donne le focus à la liste
blur
Reprend le focus

onChange

Détecte la sélection d'une nouvelle ligne

 

onFocus

Détecte la prise de focus

onBlur

Détecte la perte de focus

33



Les éléments du formulaire

Les zones de texte multi lignes : Textarea

L'objet textarea est essentiellement utilisé pour permettre au

visiteur de saisir un texte assez long (message, descriptif )

...

<textarea name="texte" rows="5" cols="20">

 Les éléments du formulaire Les zones de texte multi lignes : Textarea L'objet textarea est

Ligne 1 Ligne 2 ... </ textarea >

Les éléments du formulaire Textarea :propriétés name Nom de la zone rows cols disabled Nombre de
Les éléments du formulaire
Textarea :propriétés
name
Nom de la zone
rows
cols
disabled
Nombre de lignes
Nombre de colonnes
Grisage de la zone
readOnly
Lecture seule
class
Classe de feuille de style
style
Style de la liste

Textarea :méthodes et événements

focus

 

Donne le focus à la zone

 

blur

 

Reprend le focus

 

onChange

Détecte le changement de contenu

 

onScroll

Détecte le défilement de la zone

onFocus

Détecte la prise de focus

onBlur

Détecte la perte de focus

35

 

L’accès aux éléments du formulaire

Les éléments de formulaire sont des objets javascript

Le formulaire est un élément de l'objet document. Pour accéder au formulaire géneral, il faut écrire :

document.forms["general"]

ou bien

ou bien

  L’accès aux éléments du formulaire Les éléments de formulaire sont des objets javascript Le

document.forms[0]

document.general

elements est le tableau de tous les éléments du formulaire. On peut accéder à un élément par son nom ou par son indice, ou directement

par son nom.

 

L’accès aux éléments du formulaire

Il est préférable d'utiliser le nom des éléments, plutôt que les indices

: les noms sont indépendants de l'organisation du formulaire.

Une fois que l'élément est atteint, il est possible de manipuler ces

propriétés.

  L’accès aux éléments du formulaire Il est préférable d'utiliser le nom des éléments, plutôt

Par exemple, pour placer dans la zone de texte le mot NOUVEAU,

il faut juste écrire :

document.forms["general"].elements["champ1"].value="NOUVEAU".

Pour donner le focus au champ texte du haut de cette page, il faut

appeler la méthode focus() sur cet élément.

document.forms["general"].elements["champ1"].focus()



L’accès aux éléments du formulaire

L'accès aux éléments de type INPUT

Les zones de texte:

Imaginons un formulaire appelé monform qui possède un champ

texte appelé monchamp. On accède au contenu du champ par :

document.forms["monform"].elements["monchamp"].value

 L’accès aux éléments du formulaire L'accès aux éléments de type INPUT Les zones de texte:

Ou

document.monform.monchamp.value.

Les boutons:

La propriété value contient le libellé du bouton. Comme pour une

zone de texte, ce libellé est accessible.



L’accès aux éléments du formulaire

L'accès aux éléments de type INPUT

Les cases à cocher:

Pour détecter qu'une case est cochée, il faut utiliser sa

propriété checked.

<FORM>

 L’accès aux éléments du formulaire L'accès aux éléments de type INPUT Les cases à cocher:

<INPUT type="checkbox" name="majeur">Majeur <INPUT type="checkbox" name="etudiant">Etudiant <INPUT type="button" value="Tester" onClick="alert('Majeur : '+this.form.majeur.checked+'\nEtudiant :

'+this.form.etudiant.checked);">

</FORM>

checked est de type booléen.



L’accès aux éléments du formulaire

L'accès aux éléments de type INPUT

Les radio-boutons:

<HTML> <HEAD> <SCRIPT>

function choixprop() {

if (form3.choix[0].checked) { alert("Vous avez choisi le choix " +form3.choix[0].value) };

if (form3.choix[1].checked) { alert("Vous avez choisi le choix " +form3.choix[1].value) };

 L’accès aux éléments du formulaire L'accès aux éléments de type INPUT Les radio-boutons: <HTML> <HEAD>

if (form3.choix[2].checked) { alert("Vous avez choisi le choix " +form3.choix[2].value) }; }</SCRIPT> </HEAD> <BODY>

Entrez votre choix :

<FORM NAME="form3"> <INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR> <INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR> <INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>

<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ? " onClick="choixprop()" </FORM> </BODY> </HTML>

 suit :
suit :

L’accès aux éléments du formulaire

L'accès aux éléments de type SELECT

En JavaScript, la structure d'un élément de type SELECT est comme

name : Nom de la liste

selectedIndex : Indice de la ligne sélectionnée

 suit : L’accès aux éléments du formulaire L'accès aux éléments de type SELECT En JavaScript,

(ligne 1 : indice=0)

options : Tableau des lignes

length : Nombre de lignes

value : Valeur d'une ligne

text : Libellé d'une ligne

L’accès aux éléments du formulaire L'accès aux éléments de type SELECT Exemple: <SELECT name="liste" size=1> <OPTION

L’accès aux éléments du formulaire

L'accès aux éléments de type SELECT

Exemple:

<SELECT name="liste" size=1> <OPTION value="valeur ligne 1">Libellé ligne 1</OPTION> <OPTION value="valeur ligne 2">Libellé ligne 2</OPTION> <OPTION value="valeur ligne 3">Libellé ligne 3</OPTION> <OPTION value="valeur ligne 4">Libellé ligne 4</OPTION> </SELECT>

L’accès aux éléments du formulaire L'accès aux éléments de type SELECT Exemple: <SELECT name="liste" size=1> <OPTION
  • Pour récupérer l'indice la ligne sélectionnée :

document.monform.liste.selectedIndex

  • Pour récupérer le nombre de lignes : document.monform.liste.options.length

  • Pour récupérer la valeur de la ligne sélectionnée :

document.monform.liste.options[document.monform.list

e.selectedIndex].value



L’accès aux éléments du formulaire

L'accès aux éléments de type Textarea

Une zone de texte multi-lignes a comme propriété

principale value qui contient le texte de la zone.

Pour récupérer le contenu de la zone, on utilise le classique :

document.forms["nom"].elements["zone"].value

 L’accès aux éléments du formulaire L'accès aux éléments de type Textarea Une zone de texte

Le "contenu traité" est obtenu par l'appel de la fonction escape() qui

convertit tous les caractères spéciaux et non visibles (tabulations,

retour à la ligne,

...

).

escape(document.forms["nom"].elements["zone"].value)

La fonction inverse est unescape().

Exemple 1 : <script > function test1() { if (form.Texte1.value == "") alert("entrez maintenant une chaîne
Exemple 1 :
Exemple 1 :

<script > function test1() {

if (form.Texte1.value == "") alert("entrez maintenant une chaîne non vide") }

function test2() { if (form.Texte2.value == "" || form.Texte2.value.indexOf('@', 0) == -1)

Exemple 1 : <script > function test1() { if (form.Texte1.value == "") alert("entrez maintenant une chaîne

alert("entrez une adresse contenant @");}

function test3() { var erreur = 0 ;

for (var i = 0; i < form.Texte3.value.length ; i++)

{ var chaine = form.Texte3.value.substring (i, i + 1); if (chaine < "0" || "9" < chaine) { erreur=1 ; } }

if (erreur == 1 )

{ alert ("entrez un nombre" ) ; } } </script>

44

Exemple 2 : <script> function verif_form(){ var temoin = 0; if(document.formulaire.nom.value == ""){ alert("Le champ \"Nom\"
Exemple 2 :
Exemple 2 :

<script>

function verif_form(){ var temoin = 0; if(document.formulaire.nom.value == ""){

alert("Le champ \"Nom\" est vide"); return false; }

if(document.formulaire.prenom.value == ""){

Exemple 2 : <script> function verif_form(){ var temoin = 0; if(document.formulaire.nom.value == ""){ alert("Le champ \"Nom\"

alert("Le champ \"Prénom\" est vide"); return false; }

if(document.formulaire.sexe.selectedIndex == 0){

alert("Vous n'avez pas choisi votre sexe"); return false; }

for(i=0;i<document.formulaire.loisir.length;i++){

if(document.formulaire.loisir[i].checked) { ++temoin; } }

if(temoin != 3) {alert("Vous devez choisir 3 loisirs !"); return false; }

return true; }</script>

45