Cours JS Part2

Anne universitaire :2014-2015
Cours :Dveloppement Web

Partie 2
Enseignants : Mme Z. CHANNOUF 1
Sommaire
Les tableaux et lobjet Array
Les chaines de caractres et lobjet String
Lobjet Date
Lobjet Math
Les formulaires
Laccs aux lments du formulaire
Exemples
Deux types de tableaux :

les tableaux classiques : pas de contrainte sur le contenu des cases,
celles-ci sont numrotes partir de 0 ;
les tableaux associatifs dont la particularit est que les cases ne sont
plus indices par un numro mais par un texte.
Les tableaux classiques
La dclaration 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 dfinir un tableau
var notes = new Array(10,5,20,14,2);

Les tableaux associatifs
var mails = new Array();
mails[ahmad'] = ahmad@univ.tn';
mails[eya'] = eya@free.fr';
document.write('Mail de Ahmad= '+mails[ahmad']);
Proprits et mthodes de lobjet Array
Proprit
Description
length
Retourne le nombre d'lments contenus dans le tableau

MonTableau.length;
Mthode
Description
concat()
Permet de concatner plusieurs tableau dans l'ordre de

dclaration
MonTableau.concat(Tableau2,Tableau3);
join()
Retourne une chane de caractre contenant tous les lments

du tableau spars par le sparateur spcifi (par dfaut la
virgule)
MonTableau.join(Separateur)
pop()
Supprime le dernier lment du tableau et retourne sa valeur

MonTableau.pop()
push()
Ajoute les lments spcifis et retourne la nouvelle taille du

tableau
TailleTableau = MonTableau.push(valeur1, valeur2)
reverse()
Inverse les lments du tableau, le dernier lment devenant le

premier et ainsi de suite
MonTableau.reverse()
shift()
Supprime et retourne le premier lment du tableau

MonTableau.shift()
slice()
Gnre un nouveau tableau partir d'une section d'un tableau

existant
MonTableau.slice(IndexDebut,IndexFin)

Parcours de tableaux JavaScript : la boucle for in
Cette boucle est ddie au parcours de tableaux, qu'ils soient simples ou
associatifs :
// syntaxe gnrale
for (var k in t)
{ // des instructions ici portant sur t[k] }
// ... 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 associe est : ' + carnet[i]+'<br>'); }
6
Les chaines de caractres

Pour dclarer une chane de caractres, vous pouvez utiliser les guillemets
" ou l'apostrophe .
var chaine1="Bonjour";
var chaine2='Bonjour';
// Ces deux lignes ont le mme effet
Cela se corse quand il s'agit d'initialiser une chane avec un de ces

caractres
var chaine1="Bonjour l'ami";
var chaine2='Je vous dis "Bonjour " ';
Le secret est d'alterner les guillemets et les apostrophes selon les

caractres spciaux afficher
Il faut veiller ne pas fermer la chane de caractres avant sa fin

normale pour viter les erreurs JavaScript
7
Exemple de dclaration incorrecte

var chaine1="Je vous dis "Bonjour"";
// ici, le " indique la fin de chane
Il existe aussi une autre solution

var chaine1="Je lui dis \"Bonjour l'ami\" ";
La variable chaine1 contient Je lui dis "Bonjour l'ami".
Javascript a interprt \" comme un guillemet.
L'opration de base est la concatnation de chanes

Elle consiste assembler deux chanes en une
L'oprateur est le +, ne pas confondre avec l'oprateur addition
qui s'applique aux nombres
var chaine1="Vive le ";
var chaine2="JavaScript";
var chaine=chaine1+chaine2;
La variable chaine contient aprs ce script "Vive le JavaScript". La

concatnation est une opration simple et trs utile

Proprites et mthodes
Une chane de caractres en JavaScript est un objet string sur
lequel s'appliquent des proprits et des mthodes.
La proprit length indique le nombre de caractres de la
chane
var chaine="azerty";
chaine.length retourne le nombre de caractres, ici 6

caractres
La mthode charAt(n) rcupre le nime caractre

Attention, le premier caractre a comme indice 0
var chaine="azerty"
chaine.charAt(1) retourne "z"

10

La mthode substring permet dextraire un morceau dune
chaine. Elle attend 2 paramtres
l'indice du premier caractre (inclus), l'indice du dernier
caractre (exclus).
Si les deux paramtres sont inverss, javascript rtablit l'ordre
logique
chaine.substring(6,10) et chaine.substring(10,6) sont
identiques
Si le deuxime paramtre est omis, la chane retourne commence
l'indice indiqu et se termine la fin de la chane.
var date="15/08/2000";
La question est de rcuprer le jour, le mois et l'anne dans 3

variables diffrentes
var jour = date.substring(0,2);
var mois = date.substring(3,5);
var annee = date.substring(6,10);
11
JavaScript offre deux mthodes 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();
A la fin de ce script, maj contient CECI EST UN TEXTE et

min contient ceci est un texte
12
Lobjet Date
Lobjet Date de Javascript apporte une gestion complte du temps :
Aujourd'hui : Lundi 20Avril 2015, l'horloge de votre ordinateur donne 09h
24min
Il propose des accs aux diffrentes parties constituant la date ainsi que
des mthodes de manipulation pour effectuer des calculs ou des
modifications.
Fonctions pour rcuprer la date
Fonctions pour modifier la date
Autres fonctions
getDate(); getMilliseconds(); getSeconds();

getMinutes(); getHours(); getDay();
getMonth(); getYear(); getFullYear(); getTime()
setMilliseconds(valeur); setSeconds(valeur);
setMinutes(valeur); setHours(valeur):;
setDate(valeur); setMonth(valeur);
setYear(valeur); setFullYear(valeur);
setTime(valeur)
parse(); toGMTString(); toLocaleString()
13
Lobjet 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>
14
Lobjet Math
En JavaScript, la plupart des fonctions mathmatiques sont des
mthodes de l'objet Math.
L'objet Math permet de manipuler les nombres et d'accder aux
fonctions mathmatiques classiques :
- les arrondis round(), abs(), floor(), ceil()
- les fonctions trigonomtriques sin(), cos() ...
- le hasard avec random()
L'objet Math contient aussi une importante liste de constantes
mathmatiques (PI, ...)
15
Lobjet 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 immdiatement suprieur (ou
gal) a
Math.floor(a) : Retourne l'entier immdiatement infrieur (ou
gal) a
Math.sqrt(a) : Retourne la racine carre de a
Math.log(a) : Retourne le logarithme de a
Math.ln(a) : Retourne le logarithme nprien 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 paramtres a ou b
Math.max(a,b) : Retourne le plus grand des paramtres a ou b
16
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 donnes.
Pour intgrer des lments de formulaire, il faut encadrer

les balises par <form> et </form>.
17
Les lments du formulaire
Cration de
formulaire
Case cocher
Bouton radio
Champ de texte
Password
Zone de texte
Bouton
Bouton Reset
Bouton Submit
Valeur cache
18

Dfinition des mthodes et vnements
Une mthode est une fonction (ou procdure) de traitement

de donnes associe un objet
Un vnement est une fonction (pas une procdure!)
toujours associe un objet mais qui ragit en fonction des
interventions de l'utilisateur
Il utilise le clavier pour fournir des infos
Il slectionne l'objet avec la souris
Il spcifie des valeurs de l'objet avec la souris
Cette notion d'vnement est cruciale car elle est la base du

fonctionnement des programmes Internet
19

La balise <form> : Proprits
name
Nom du formulaire
action
Adresse du script de serveur excuter
method
Mthode d'appel du script (get ou post)
enctype
Type d'encodage du formulaire
target
Destination du retour du formulaire
La balise <form> : Mthodes

submit
Dclenche l'action du formulaire
reset
Rinitialise avec les valeurs par dfaut
La balise <form> : Evnements

onSubmit
Dtecte la soumission du formulaire
onReset
Dtecte la rinitialisation
20

L'lment input
L'objet input est le plus utilis de tous.
Il permet d'afficher
des champs texte,

des boutons,
des radio-boutons,
des cases cocher,
le champ cach,
les boutons spciaux reset et submit.
21

L'lment input : Proprits
name
Nom du champ
type
type du champ text, button, radio, checkbox, submit, reset
value
Libell texte
defaultvalue
Valeur par dfaut du champ (utile avec reset)
size
Taille du champ
maxlength
Taille maximale du champ de type texte
checked
Case cocher ou radio bouton coch ou non
disabled
Gris (modification impossible par le visiteur)
readOnly
Lecture seule
class
Nom de la classe de style
style
Chane de caractres pour le style
22

L'lment input : Mthodes
focus
Donne le focus (ou le curseur ou la main)
blur
Enlve le focus
click
Simule un clic (sur un bouton)
L'lment input : Evnements

onFocus
Dtecte la prise de focus
onBlur
Dtecte la perte de focus
onClick
Dtecte le clic souris (sur un bouton)
onChange
Dtecte les changements

23

Les champs de texte
Un champ de texte est dfini par la balise input avec un type text
<input type="text">
Proprits acceptes
name | value | defaultvalue | size | maxlength | disabled |
readOnly | class | style
Mthodes acceptes
focus, blur
Evnements accepts
onFocus, onBlur, onChange
24

Les Boutons
Un bouton est dfini par la balise input avec un type button

<input type="button" value="Ceci est un bouton">
Proprits acceptes
name | value | defaultvalue | size | maxlength | disabled |

readOnly | class | style
Mthodes acceptes
focus | blur | click
vnements accepts
onFocus | onBlur | onClick
L'vnement le plus utilis est onClick car il dtecte le clic

utilisateur.
25

Les Boutons-Radio
Un radio-button est dfini par la balise INPUT avec un type
"radio"
Pour dfinir un groupe, il faut donner le mme nom (champs
name) tous les radios.
Ainsi, la slection sera unique pour l'ensemble du groupe.
<input type="radio" name="sexe" value="homme"> Homme

<input type="radio" name="sexe" value="femme" checked>Femme
Proprits acceptes
name | value | checked | disabled | readOnly | class | style
Mthodes acceptes
Evnements accepts
26

Les Cases Cocher
Une case cocher est dfinie par la balise INPUT avec un type
checkbox.
Ici, Majeur et Etudiant sont dcochs l'origine.
Mais il est possible de n'tre ni l'un, ni l'autre, ou l'un des deux.
<input type="checkbox" name="majeur">Majeur
<input type="checkbox" name="etudiant">Etudiant
Proprits acceptes
name | checked | disabled | readOnly | class | style
Mthodes acceptes
vnements accepts
27

Le password
Password se prsente comme une zone de texte.

Mais il affiche des * pour cacher le contenu du champ.
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>
28

La valeur cache
Un champ cach est destin transmettre des informations dans le
formulaire, sans que le visiteur ne s'en aperoivent.
Cela peut tre une adresse mail, un rsultat de traitement, l'heure,
un cookie ou toute autre information.
Naturellement, le champ n'apparat pas!
<input type="hidden" value="contenu cach" name="cache">
Proprits acceptes
name | value | defaultvalue
Remarque : Mme s'il n'apparat pas l'cran, son contenu reste

manipulable en JavaScript.
29

Les boutons spciaux
Les boutons reset et submit existent bien!
<form name="formspe" action="javascript:alert('Soumis')">

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

Les menus de selection
Les listes sont dfinies par les balises <select></select>

Cette balise dfinie la zone de la liste. Les lignes de contenu de
la liste sont alimentes par les balises <option></option>
<select name="mono" size=1>

<option value="1">ligne 1</option >

</select>
31

les menus de selection
Les listes peuvent se prsenter de plusieurs manires, selon leur

proprit.
Sur une ligne : size=1
Sur plusieurs lignes mono-slection : size=4
Sur plusieurs lignes multi-slection multiple size=4
Llment option
L'objet option est assez simple
Il peut avoir comme attributs

name, value, selected
selected force la slection de cette occurrence dans la liste
32

les menus de selection :Proprits
name
size
multiple
disabled
class
style
Nom de la liste
Nombre de lignes afficher
Slection multiple autorise
Grisage de la liste
Classe de feuille de style
Style de la liste
les menus de selection :Mthodes et vnements

add
Ajoute un ligne (objet OPTION)
remove
focus
blur
Supprime une ligne

Donne le focus la liste
Reprend le focus
onChange
Dtecte la slection d'une nouvelle ligne
onFocus
onBlur
33

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

Ligne 1
Ligne 2
...
</ textarea >
34

Textarea :proprits
name
Nom de la zone
rows
Nombre de lignes
cols
Nombre de colonnes
disabled
Grisage de la zone
readOnly
Lecture seule
class
Classe de feuille de style
style
Style de la liste
Textarea :mthodes et vnements

focus
Donne le focus la zone
blur
Reprend le focus
onChange
Dtecte le changement de contenu
onScroll
Dtecte le dfilement de la zone
onFocus
onBlur
35
Les lments de formulaire sont des objets javascript

Le formulaire est un lment de l'objet document. Pour accder au
formulaire gneral, il faut crire :
document.forms["general"]
ou bien
ou bien
document.forms[0]
document.general
elements est le tableau de tous les lments du formulaire. On peut

accder un lment par son nom ou par son indice, ou directement
par son nom.
36
Il est prfrable d'utiliser le nom des lments, plutt que les indices
: les noms sont indpendants de l'organisation du formulaire.
Une fois que l'lment est atteint, il est possible de manipuler ces
proprits.
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 mthode focus() sur cet lment.
document.forms["general"].elements["champ1"].focus()
37

L'accs aux lments de type INPUT
Les zones de texte:
Imaginons un formulaire appel monform qui possde un champ
texte appel monchamp. On accde au contenu du champ par :
document.forms["monform"].elements["monchamp"].value
Ou
document.monform.monchamp.value.
Les boutons:
La proprit value contient le libell du bouton. Comme pour une
zone de texte, ce libell est accessible.
38

Les cases cocher:

Pour dtecter qu'une case est coche, il faut utiliser sa
proprit checked.
<FORM>
<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 boolen.

39

Les radio-boutons:
<HTML> <HEAD>
<SCRIPT>
function choixprop() {
if (form3.choix[0].checked) { alert("Vous avez choisi le choix " +form3.choix[0].value) };
}</SCRIPT> </HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numro 1<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ? " onClick="choixprop()">

</FORM> </BODY> </HTML>
40

L'accs aux lments de type SELECT
En JavaScript, la structure d'un lment de type SELECT est comme

suit :
name : Nom de la liste
selectedIndex : Indice de la ligne slectionne
(ligne 1 : indice=0)
options : Tableau des lignes
length : Nombre de lignes
value : Valeur d'une ligne
text : Libell d'une ligne
41

L'accs aux lments de type SELECT
Exemple:
<SELECT name="liste" size=1>

<OPTION value="valeur ligne 1">Libell ligne 1</OPTION>
</SELECT>
Pour rcuprer l'indice la ligne slectionne :

document.monform.liste.selectedIndex
Pour rcuprer le nombre de lignes :
document.monform.liste.options.length
Pour rcuprer la valeur de la ligne slectionne :
document.monform.liste.options[document.monform.list
e.selectedIndex].value
42

L'accs aux lments de type Textarea
Une zone de texte multi-lignes a comme proprit

principale value qui contient le texte de la zone.
Pour rcuprer le contenu de la zone, on utilise le classique :

document.forms["nom"].elements["zone"].value
Le "contenu trait" est obtenu par l'appel de la fonction escape() qui

convertit tous les caractres spciaux et non visibles (tabulations,
retour la ligne, ...).
escape(document.forms["nom"].elements["zone"].value)
La fonction inverse est unescape().
43
Exemple 1 :
<script >
function test1() {
if (form.Texte1.value == "") alert("entrez maintenant une chane non vide")
else alert("entrez maintenant une chane vide") }
function test2() {
if (form.Texte2.value == "" || form.Texte2.value.indexOf('@', 0) == -1)
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\" est vide"); return false; }
if(document.formulaire.prenom.value == ""){
alert("Le champ \"Prnom\" 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

Cours JS Part2

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours JS Part2

Transféré par

Droits d'auteur :

Formats disponibles

Anne universitaire :2014-2015

Cours :Dveloppement Web

Enseignants : Mme Z. CHANNOUF 1

Les tableaux et lobjet Array

Deux types de tableaux :

La dclaration d'un tableau et l'affectation de valeurs ses

Les tableaux et lobjet Array

Proprits et mthodes de lobjet Array

Retourne le nombre d'lments contenus dans le tableau

Permet de concatner plusieurs tableau dans l'ordre de

Retourne une chane de caractre contenant tous les lments

Supprime le dernier lment du tableau et retourne sa valeur

Ajoute les lments spcifis et retourne la nouvelle taille du

Inverse les lments du tableau, le dernier lment devenant le

Supprime et retourne le premier lment du tableau

Gnre un nouveau tableau partir d'une section d'un tableau

Les tableaux et lobjet Array

Les chaines de caractres

Cela se corse quand il s'agit d'initialiser une chane avec un de ces

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

Il faut veiller ne pas fermer la chane de caractres avant sa fin

Les chaines de caractres

Exemple de dclaration incorrecte

Il existe aussi une autre solution

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

Javascript a interprt \" comme un guillemet.

Les chaines de caractres

L'opration de base est la concatnation de chanes

La variable chaine contient aprs ce script "Vive le JavaScript". La

Les chaines de caractres

chaine.length retourne le nombre de caractres, ici 6

La mthode charAt(n) rcupre le nime caractre

chaine.charAt(1) retourne "z"

Les chaines de caractres

La question est de rcuprer le jour, le mois et l'anne dans 3

Les chaines de caractres

JavaScript offre deux mthodes pour transformer les

A la fin de ce script, maj contient CECI EST UN TEXTE et

Fonctions pour modifier la date

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

Les formulaires sont la base des changes entre le site et

Pour intgrer des lments de formulaire, il faut encadrer

Les lments du formulaire

Les lments du formulaire

Une mthode est une fonction (ou procdure) de traitement

Cette notion d'vnement est cruciale car elle est la base du

Les lments du formulaire

Adresse du script de serveur excuter

Mthode d'appel du script (get ou post)

Type d'encodage du formulaire

Destination du retour du formulaire

La balise <form> : Mthodes

Dclenche l'action du formulaire

Rinitialise avec les valeurs par dfaut

La balise <form> : Evnements

Dtecte la soumission du formulaire

Les lments du formulaire

L'objet input est le plus utilis de tous.

des champs texte,

Les lments du formulaire

type du champ text, button, radio, checkbox, submit, reset

Valeur par dfaut du champ (utile avec reset)

Taille maximale du champ de type texte

Case cocher ou radio bouton coch ou non