Pr

1
Le langage Javascript pour le web
1ière partie Syntaxe du langage Javascript et
Objets du noyau
Plan
Déclaration, Variables Opérateurs Boucle
for Test conditionnel if else
Structure et syntaxe Fonctions
function() Objets du Noyau
Objet Date Objet String (chaîne de
caractères) Objet Array (les tableaux)
E. Christoffel MCF, ULP
2
Structure du langage javascript et syntaxe de base
Le code javascript est déclaré dans le document
HTML par les balises HTML ltscriptgt et
lt/scriptgt ltscript language"JavaScript1.3"gt lt/s
criptgt Le code est en général déclaré dans
l'entête du document, soit entre les balises
ltheadgt lt/headgt. Plutôt que d'écrire le code
javascript dans le fichier HTML, il peut être
écrit dans un fichier annexe, enregistré avec
l'extension .js , soit le fichier leCodeJS.js ,
l'attribut SRC permet d'y faire
référence ltscript src"lecodejs.js"gtlt/scriptgt Le
s instructions s'écrivent une par ligne, et se
terminent par un Les variables sont déclarées
par le mot clé var, mais la déclaration est
optionnelle var laMarque var achetertrue var
lAccessoire"Kit piéton" var quantite2 lAccesso
ire"Chargeur d'accumulateur" lAccessoire'Charge
ur d\'accumulateur' Les variables ne sont pas
typées (inutile de préciser si c'est un nombre,
du texte, un objet). Les commentaires sont
précédés de // pour un commentaire sur 1 seule
ligne, ou entre / et / pour un commentaire sur
plusieurs lignes // ceci est un commentaire /
éventuellement sur plusieurs lignes /
L'attribut LANGUAGE est optionnel, est précise la
version javascript utilisée (actuellement version
1.3)
Variable booléenne, 2 valeurs possibles true/false
Une chaîne de texte est contenue entre des "
Distinguer l'utilisation des " et '. Le \ qui
précède un ' permet de considérer le ' comme un
caractère et non un élément de la syntaxe
3
Les opérateurs javascript
Les opérateurs arithmétiques classiques , - ,
, / aabc L'incrément ou décrément d'une
unité , -- i j-- Les opérateurs agissant
sur les chaînes de texte , , c'est une
concaténation de chaînes de texte texte1texte2"
"texte3 // concaténation de chaînes texte1"
la suite du message" // " la suite du message"
est rajoutée au contenu de texte1 var
suiteTexte"la suite du texte" // déclaration
d'une variable contenant du texte Texte3"début
de texte "suiteTexte" la fin du texte"
//concaténation de chaîne de texte et de
variables Les opérateurs de comparaison utilisés
dans les test conditionnels if , ! , gt , lt
, gt , lt if (ab) instructions else if
(c!d) instructions Les opérateurs logiques
permettent d'effectuer plusieurs comparaisons
, , ! if ((ab) (a!1)) instructions
// opérateur AND (ET), les 2 comparaisons doivent
être satisfaites if ( (agtb) (a1) )
instructions // opérateur OR (OU), l'une ou
l'autre comparaison doit être satisfaite if (!a)
instructions // opérateur NOT (non),
équivalent au contraire, cas des valeurs
booléenne, retourne true si afalse par ex.
4
Boucle for, exemples pratiques
for (valeur initiale condition incrément )
instructions
Syntaxe
Les instructions sont exécutées tant que la
condition est vérifiée.
On souhaite lire chaque caractère constituant une
chaîne de texte. var chaineTexte"javascript" var
nbCar nbCarchaineTexte.length L'instruction
for suivante (1) initialise la variable i à 0
(2) effectue un test conditionnel, à savoir si
iltnbCar (3) exécute une série d'instructions
séquentiellement si le test conditionnel retourne
true (4) incrémente la variable i for
(i0iltnbCari) leCaracterechaineTexte.charAt(
i) alert("le caractère en position "i" est
un "leCaractere)
5
Test conditionnel ifelse, exemples pratiques
On souhaite recherché le caractère _at_ constituant
une adresse e-mail. var chaineTexte"christof_at_mail
.com" var nbCar nbCarchaineTexte.length L'inst
ruction for suivante (1) initialise la variable i
à 0 (2) effectue un test conditionnel, à savoir
si iltnbCar (3) exécute une série d'instructions
séquentiellement si le test conditionnel (2)
retourne true (4) comparaison du caractère
extrait de la chaîne au caractère _at_, soit un
message de correspondance est affiché, sinon un
message de non correspondance des caractères est
affiché (5) incrément de la variable i for
(i0iltnbCari) leCaracterechaineTexte.charAt(
i) if (leCaractere"_at_") alert("le caractère
en position "i" est un _at_") else
alert("le caractère en position "i" n'est
pas un _at_")
Syntaxe réduite (condition) ? expression1
expression2 si la condition est vérifiée,
l'expression1 est exécutée, sinon l'expression2
6
Le langage Javascript pour le web
1ière partie Syntaxe du langage Javascript et
Objets du noyau
Plan
Déclaration, Variables Opérateurs Boucles for,
do while, while Test conditionnel if else,
switch
Structure et syntaxe Fonctions
function() Objets du Noyau
Objet Date Objet String (chaîne de
caractères) Objet Array (les tableaux)
E. Christoffel MCF, ULP
7
Les fonctions function(), exemples pratiques
On souhaite calculer la part de T.V.A (laTVA) sur
un prix hors taxe (lePrixHT), puis le prix TTC de
l'article (lePricTTC) laTVATVA(lePrixHT) lePr
ixTTClePrixHTlaTVA function TVA(prix) var
taux0.196 return prixtaux Une fonction
peut ne retourner aucune valeur, cas d'un message
à afficher dans une boite 'alerte' unCommentaire
"suivre la procédure a)" lAffichage(unCommentaire
) function lAffichage(leMessage)
alert(leMessage)

• Les variables
• prix contient la valeur de la variable passée
  en argument lors de l'appel, soit la valeur de
  lePrixHT
• la déclaration de la variable taux par var, fait
  que taux n'existe que dans la fonction.
• En conclusion prix et taux n'existent que dans la
  fonction.

Ici le résultat du produit est retourné
8
Le langage Javascript pour le web
1ière partie Syntaxe du langage Javascript et
Objets du noyau
Plan
Déclaration, Variables Opérateurs Boucles for,
do while, while Test conditionnel if else,
switch
Structure et syntaxe Fonctions
function() Objets du Noyau
Objet Date Objet String (chaîne de
caractères) Objet Array (les tableaux)
E. Christoffel MCF, ULP
9
L'Objet Date, propriétés et méthodes
L'objet Date est un objet du noyau
javascript. Un constructeur de date permet la
déclaration (ou création, instance) d'un objet de
type date laDatenew Date() // retourne dans la
variable laDate l'objet le jour et l'heure
(d'après l'horloge du PC) laDatenew
Date(année,mois,jour,heure,mn,s) // retourne une
date autre que celle du moment. Jours et mois
sont comptés à partir de 0 et non de 1. Pour
chaque objet Date, des propriétés sont lues ou
écrites, des méthodes sont appliquées laDate.prop
riété laDate.méthod()
10
L'Objet Date, exemples pratiques
En pratique, les propriétés lues seront stockées
dans une variable laDatenew Date() // retourne
la date et heure du moment var leJour //
variable contenant le jour du mois leJourlaDate.g
etDate() // retourne le jour du mois compté
depuis 0 laDate.setDate(5) // fixe maintenant
dans l'objet date, qui contenait la date et
l'heure au moment de la création de l'objet, un
nouveau jour du mois. La méthode parse() permet
par ex. de calculer le temps écoulé entre 2
dates. La syntaxe est un peu différente des
exemples ci-dessus, car la méthode est appliqué
au constructeur/objet Date directement, avec pour
argument la date à convertir en millisecondes
écoulées depuis le 1er janvier 1970 laDate1new
Date(2001,10,18) // date du 18 novembre
2001 laDate2new Date(2000,10,18) // date du 18
novembre 2000 s1Date.parse(laDate1) // la
méthode parse() est appliqué au
constructeur/objet s2Date.parse(laDate2) //
Date avec laDate1 ou laDate2 en
argument s3s1-s2 // calcul de la différence en
millisecondes entre ces 2 dates s4s3/1000/60/60/2
4 // conversions des millisecondes en
jours alert(s4) // affichage du nombre de jours
écoulés
11
L'Objet String, propriétés et méthodes
L'objet String est un objet du noyau
javascript. Une variable est déclarée de la
manière suivantevar laChaineTexte // Cette
variable est implicitement un objet String, mais
si c'est un nombre (objet Number), on peut
effectuer des opérations , -, et / . Rappel
les variables ne sont pas typées!
laChaineText"contenu de la variable" //Pour
affecter un contenu à la variable Pour chaque
objet String, et donc chaîne de texte, des
propriétés sont lues ou écrites, des méthodes
sont appliquées laChaineTexte.propriété laChaineT
exte.méthod() En générale le résultat sera
retourné dans une nouvelle variable.
12
(No Transcript)
13
L'Objet String, exemples pratiques
En pratique, les propriétés lues seront stockées
dans une variable var longueur // variable
contenant la longueur (ou nombre de caratère)
d'une chaîne de texte var laChaineTexte"christof_at_
mail.com" // déclaration et initialisation d'une
variable longueurlaChaineTexte.length //
lecture de la longueur de la chaîne de texte,
pour une chaîne vide, 0 sera retourné. L'exemple
ci-dessous recherche au sein de la chaîne de
texte la présence du caractère _at_, si par ex. on
souhaite tester la validité d'une adresse e-mail.
Les étapes sont les suivantes (1) lire la
longueur de la chaîne (2) exécuter une boucle for
sur chaque caractère de la chaîne, le 1er est
indexé 0, le dernier est indexé (longueur-1) (3)
lire le caractère à une position donnée par la
méthode charAt(position) (4) effectuer un test
conditionnel if, à savoir, ce caractère est-il
égal à _at_? (5) message d'alerte si le caractère
est identifié. longueurlaChaineTexte.length //
lecture de la longueur de la chaîne for
(i0iltlongueuri) //début de la boucle for,
incrément sur i de 0 à (longueur-1) leCaracterela
ChaineTexte.charAt(i) // lecture du caractère en
position i if (leCaractere'_at_') // test
conditionnel if, égalité avec _at_? alert("Caractère
trouvé en position "i) //message d'alerte
indiquant la position // fin du test
conditionnel if // fin de la boucle
for Exercice appliquer les propriétés et
méthodes sur une chaîne de texte, et visualiser
le résultat par une fenêtre d'alerte.
14
L'Objet Array, propriétés et méthodes
L'objet Array est un objet du noyau
javascript. Tout nouveau tableau doit être
déclaré, suivant la syntaxe leTableaunew
Array(dimension) // ou la variable dimension
précise le nombre d'éléments du
tableau leTableau0"le 1er élément d'indice
0!" // affectation des éléments individuels du
tableau leTableau1"le 2ième élément d'indice
1!" // Attention le 1er élément à pour indice 0!
Le dernier a pour indice (dimension-1) Il n'est
pas nécessaire de préciser le nombre d'éléments
du tableau, sa dimension. Celle-ci sera
automatiquement ajustée par javascript en
fonction du contenu du tableau leTableaunew
Array() Il est possible d'affecter directement
un contenu à chaque cellule du tableau lors de la
déclaration leTableaunew Array("l'élément
1","l'élément 2") Plutôt que d'indexer chaque
cellule du tableau pour y affecter un contenu, on
peut utiliser le code simplifié
suivant leTableaunew Array() leTableau"l'élém
ent 1","l'élément 2",3 Noter que pour accéder
à un élément du tableau, on utilise les
leContenuleTableaui // lecture du contenu
de la iième cellule Pour chaque tableau, des
propriétés sont lues ou écrites, des méthodes
sont appliquées leTableau.propriété leTableau.mét
hod() En générale le résultat sera retourné dans
une variable ou un nouveau tableau, soit le même
tableau.
Affectation d'une chaîne de texte
Affectation d'une valeur numérique
15
(No Transcript)
16
L'Objet Array, exemples pratiques
En pratique, les propriétés lues seront stockées
dans une variable nbElementleTableau.length //
lecture de la dimension du tableau leTableau La
fonction split(caractère) de l'objet String
permet de décomposer une chaîne de texte à partir
d'un caractère de séparation. Le résultat de la
décomposition est stocké dans un tableau. Il
n'est pas utile de déclarer ce tableau. Soit
l'exemple de la variable contenant l'adresse
e-mail var lEmail"christof_at_mail.com" //
déclaration et initialisation d'une
variable laDecompositionlEmail.split("_at_") //
méthode de décomposition appliquée à
lEmail leNomlaDecomposition0 // le tableau
laDecomposition est constitué de 2
cellules leDomainelaDecomposition1 //
accessibles par les index 0 et 1 Il peut être
utile de déclarer un tableau à 2 dimensions.
Supposons par ex. des employés d'une entreprise,
identifiés par un numéro de matricule, auquel est
associé les noms et prénoms. Déclarons un tableau
pour les matricules leMatriculenew Array() //
déclaration du tableau leMatricule Maintenant, à
chaque matricule est associé un nom et un prénom,
soit 3 données (matricule, nom, prénom). Ainsi,
chaque élément du tableau leMatricule est déclaré
comme un nouveau tableau. Effectuons cette
déclaration par une boucle for for(i0ilt2i)
leMatriculeinew Array() Puis, affectons les
données pour chaque employé leMatricule0"1667
","Christoffel","Eric" leMatricule1"1667","T
ellier","Pierre" La méthodes alert ci-dessous
permet de lire respectivement les 3 données
(matricule, nom et prénom) ou une
seule alert(leMatricule0) alert(leMatricule0
1)
Alternative à un tableau à 2 dimensions Employén
ew Array( '1667ChristoffelEric', '1667Tellier
Pierre') Ici, une donnée est composée de
caractères de séparation (, ), permettant la
découpe de la chaîne de texte par la méthode
split( ). Exercice extraire le prénom du 2ième
employé.
Exemple pratique réalisation d'une barre de
navigation dynamique, contenant des informations
telles que libellé du lien, lien href,
17
Le langage Javascript pour le web
2ième partie Objet window, la fenêtre du
navigateur
Plan
Document Object Model, D.O.M Objet window
Objet window d'après le D.O.M propriétés,
méthodes et événements Création d'une nouvelle
fenêtre
E. Christoffel MCF, ULP
18
Les objets Javascript respectent une hiérarchie.
L'objet de plus haut niveau est la fenêtre du
navigateur. Celui-ci contient le document HTML,
et ainsi de suite Cette hiérarchie est décrite
par le Document Object Modele (DOM)
Fenêtre du navigateur Document
HTML Formulaire Boutons radio
Cette hiérarchie, indispensable pour accéder à un
objet donné, sera vue en détail pour chaque objet
étudié.
C'est un concept de programmation orientée objets
19
Le langage Javascript pour le web
2ième partie Objet window, la fenêtre du
navigateur
Plan
Document Object Model, D.O.M Objet window
Objet window d'après le D.O.M propriétés,
méthodes et événements Création d'une nouvelle
fenêtre
E. Christoffel MCF, ULP
20
L'Objet Window, hiérarchie d après le DOM
Collections d'objets et hiérarchie le D.O.M. ou
Document Object Model
Textarea
Objet Window
Hiérarchie
Parent de tous les autres objets HTML
21
L'Objet Window, propriétés, méthodes et événements
Pour la fenêtre window, des propriétés sont lues
ou écrites, des méthodes sont appliquées, des
événements sont détectés window.propriété window.
méthod()
window.history.back() window.history.forward()
Netscape 4!
22
L'Objet Window, exemples pratiques
En pratique, les propriétés lues seront stockées
dans une variable var nbFrame // variable
contenant le nombre de frames dans la
fenêtre nbFramewindow.frames.length // lecture
de la dimension du tableau frames
nbFramewindow.length // qui est également une
propriété de l'objet wondow Il est possible
d'afficher un message dans la barre de 'status',
au bas de la fenêtre window var
leMessage"Bienvenu à tous" // Définition du
contenu de la variable leMessage window.statusleM
essage // Affichage du message dans la barre de
'status' Certaines méthodes permettent
d'afficher une fenêtre de message, avec ou sans
boutons 'OK' et 'Cancel', et éventuellement un
champ de saisie alert("Bonjour") // une fenêtre
de type 'alert' s'ouvre, elle se referme après
validation 'OK' leChoixconfirm("Voulez-vous
continuer?") // la variable leChoix contiendra
la valeur booléenne true/false suivant le clique
de souris sur les boutons 'OK' ou 'Cancel'
respectivement. Des événements sont associés à
la fenêtre window, notamment le chargement
accompli du document HTML et ou de l'ensemble des
frames. La déclaration de détection de
l'événement se fait dans la balise HTML
BODY ltbody bgcolor"ffffff" onload"maFonction()
"gt ltbody bgcolor"ffffff" onload"alert('Bonjour'
)"gt La fonction nommée maFonction() est alors
exécutée, ou plus simplement tout code HTML tel
que la méthode alert(), ...
Noter l'utilisation simultanée de ' et "Les "
étant utilisés pour délimiter la valeur de
l'attribut HTML, les simples ' délimitent
l'argument de la fonction appelée.
23
L'Objet Window, exemples pratiques
Il est souvent utile d'ouvrir une fenêtre
nouvelle pour afficher une nouvelle page HTML,
existante ou créée à la volée. La syntaxe est la
suivante
laFenwindow.open("URL","nomFenetre","paramètres
d'apparence de la fenêtre")

• où laFen est une variable contenant l'objet
  window de la nouvelle fenêtre créée. Nous y
  ferons référence plus tard pour accéder à cette
  nouvelle fenêtre,
• URL est l'adresse de la page HTML qui sera
  chargée dans cette nouvelle fenêtre
• laFenwindow.open("http//depulp.u-strasbg.fr","le
  Depulp","")
• un nom est attribué à la fenêtre "nonFenetre"
• les paramètres d'apparence de la fenêtre sont
  exposés dans le tableau ci-dessous. Une chaîne de
  texte est construite suivant la syntaxe
  "paramètreyes,paramètrevaleur,". Par défaut,
  l'état des paramètres est no (ou 0).

Valeur en pixel
Etat yes/no ou 0/1
laFenwindow.open("","laFenetre","width300,height
300,menubaryes,toolbar0,locationyes,scrollbars
0,resizableyes,fullscreen0,top400,left300")
Ici, aucune page HTML n'est chargée, la fenêtre
sera donc vide!
24
Le langage Javascript pour le web
3ième partie Les balises HTML et les Objets
javascript correspondants
Plan
Objet document Collection d'objets all Les
formulaires Les images
E. Christoffel MCF, ULP
25
L'Objet document, hiérarchie d après le DOM
Collections d'objets et hiérarchie le D.O.M. ou
Document Object Model
Textarea
Objet Window
Hiérarchie
Objet document
Parent de certains objets HTML
L'objet document est créé par la balise HTML
ltbodygt
26
L'Objet Document, propriétés, méthodes et
événements
Malgré le fait que l'objet document appartienne à
l'objet window, nous y accéderons directement
pardocument Ainsi, des propriétés sont lues ou
écrites, des méthodes sont appliquées, des
événements sont détectés document.propriété docum
ent.méthod()
27
L'Objet Document, exemples pratiques
En pratique, les propriétés lues seront stockées
dans une variable var couleur // variable
contenant une couleur lue de l'objet
document couleurdocument.linkColor // lecture
de la couleur des liens hypertextes couleur"ff00
ff" // code de la couleur magenta affecté à la
variable couleur document.fgColorcouleur // on
fixe une nouvelle couleur de texte On accède à
la collection des formulaires ou des images
par document.formsi // pour le iième
formulaire document.imagesi // pour la iième
image du document Les méthodes open(), write()
et close() servent à créer à la volée de nouveau
document HTML, dans une nouvelle fenêtre par ex.
Reprenons l'exemple du chapitre précédent avec
l'ouverture d'une nouvelle fenêtre laFenwindow.o
pen("","laFenetre","width300,height300,
top400,left300") // ouverture d'une nouvelle
fenêtre, c'est un nouvel objet affecté à la
variable laFen. Pour l'instant, cette fenêtre ne
contient aucune page HTML, car l'argument
correspondant de la méthode open() de l'objet
window est vide! Attention, ne pas confondre la
méthode open() de l'objet window, avec la méthode
open() de l'objet document! Pour générer un
contenu HTML dans cette nouvelle fenêtre, nous
devrons (1) écrire le code HTML dans une
variable, (2) ouvrir un 'flux d'écriture', (3) y
écrire le code HTML puis (4) refermer le 'flux
d'écriture' var codeHTML // déclaration de la
variable qui contiendra le code HTML et
initialisation codeHTML'lthtmlgtltbody
bgcolor"ffdead"gtltpgtTest d\'écriture à la
voléeltbrgtlt/bodygtlt/htmlgt' laFenwindow.open("","la
Fenetre","width300,height300")// création
fenêtre, objet laFen laFen.document.open() //
ouverture du flux d'écriture pour l'objet laFen,
la nouvelle fenêtre laFen.document.write(codeHTML)
// la variable codeHTML est écrite dans la
nouvelle fenêtre laFen.document.close() //
fermeture du flux
Noter le \ pour que le ' ne soit pas la
terminaison de la chaîne de texte!
28
Le langage Javascript pour le web
3ième partie Les balises HTML et les Objets
javascript correspondants
Plan
Objet document Collection d'objets all Les objets
personnalisés Les formulaires Les images
collection all , propriétés et méthodes méthode
getElementById( ), accès aux objets méthode
getElementById( ) sous Netscape 6
E. Christoffel MCF, ULP
29
La collection d'objets all sous MIE, propriétés
et méthodes
La collection d'objets all est un tableau de tous
les objets HTML, all , à savoir que chaque
balise HTML est un objet. En fait, all est une
propriété de l'objet document, et s'accède donc
par document.all Nous retiendrons, pour
l'instant, uniquement 2 propriétés et 1 méthode
30
La collection d'objets all sous MIE, exemple
pratique
Soit le code HTML ci-dessous. Ecrire une
application javascript, qui (1) s'exécute au
chargement du document HTML, (2) affiche le
nombre de balises HTML du document, et finalement
(3) affiche l'intitulé de chaque balise HTML.
lthtmlgt ltheadgt lttitlegtTitre du
documentlt/titlegt lt/headgt ltbodygt lt!-- Insertion du
code HTML --gt lt/bodygt lt/htmlgt Solution, la
fonction debut() est appelée lorsque l'événement
onload, dans la balise body, est
détecté function debut() longueurdocument.all.
length //lecture du nombre d'objets répertoriés
dans la collection all st"" for ( var i0
iltlong i ) //boucle sur chaque objet de la
collection all sti""document.alli.tagNam
e"\n" //lecture de la propriété tagName,
intitulé de la balise alert(st)
31
La collection d'objets all sous MIE, accès à un
objet particulier
Puisque la collection d'objets all est un tableau
de tous les objets HTML, all , un objet
particulier est accédé, soit par le rang (indice
i du tableau alli, soit par un identificateur
(attribut ID d'une balise HTML) Soit la
déclaration d'un objet en HTML, avec l'attribut
ID et un autre attribut ltbalise id"nomObjet"
attribut1"valeur1" gt La ligne de code
javascript suivante permet de lire la valeur de
l'attribut1, depuis la propriété nommée propAtt
correspondante en javascript pour cet objet (si
cette propriété existe!) var lAttribut1 lAttribu
t1document.all'nomObjet'.propAtt Cette syntaxe
permet de s'affranchir de la hiérarchie des
objets, pour accéder à un objet
particulier! Considérons alors les attributs
name et id d'une balise HTML, en l'occurrence
dans le cas d'un formulaire ltform name"nomForm"
id"FormID"gt ltinput type"text" name"nomInput"
id"InputID"gt lt/formgt La valeur saisie dans le
champ est lue par l'intermédiaire du nommage des
champs par l'attribut name laSaisiedocument.form
s'nomForm'.elements'nomInput'.value // ou
plus simplement laSaisiedocument.nomForm.nomInpu
t.value Maintenant, l'utilisation de
l'identificateur id, permet de s'affranchir de la
hiérarchie des objets pour accéder au champ
inputlaSaisiedocument.all'InputID'.value
32
Alternative à la collection d'objets all la
méthode getElementById() de l'objet document,
sous MIE 5.x
La méthode getElementById() de l'objet document
permet d'accéder à un objet par son
identificateur ID ltform name"nomForm"
id"FormID"gt ltinput type"text" name"nomInput"
id"InputID"gt lt/formgt Comme précédemment, la
saisie dans le champ INPUT s'obtient
par laSaisiedocument.getElementById('InputID').v
alue Remarque cette méthode n'existe pas sous
MIE 4.x!
33
La méthode getElementById() de l'objet document,
sous Netscape 6
Comme sous MIE 5.x, la méthode getElementById()
de l'objet document permet d'accéder à un objet
par son identificateur ID ltform name"nomForm"
id"FormID"gt ltinput type"text" name"nomInput"
id"InputID"gt lt/formgt Comme précédemment (A9,
A10), la saisie dans le champ input s'obtient
par laSaisiedocument.getElementById('InputID').v
alue A nouveau, la hiérarchie de l'objet n'a
pas besoin d'être développée. Enfin, une méthode
commune entre Netscape 6 et MIE 5.x, qui devrait
permettent une simplification des codes
javascript!
34
Le langage Javascript pour le web
3ième partie Les balises HTML et les Objets
javascript correspondants
Plan
Objet document Collection d'objets all Les
formulaires Les images
Introduction la collection forms des
formulaires événement onsubmit la collection
elements text
E. Christoffel MCF, ULP
35
L'Objet Formulaire, hiérarchie d après le DOM
Collections d'objets et hiérarchie le D.O.M. ou
Document Object Model
Textarea
Objet Window
Hiérarchie
Objet document
Objet Formulaire
La collection dobjets  Formulaire  est contenu
dans un tableau forms
36
L'Objet Formulaire, propriétés, méthodes et
événements
En respectant la hiérarchie des objets, chaque
formulaire peut être adressé via javascript par
la collection forms document.formsi , i
étant le iième formulaire compté depuis i0
document.formsnomFormulaire , où
nomFormulaire est la valeur de l attribut NAME
de la balise ltform name"nomFormulaire"gt. On peut
aussi écriredocument.nomFormulaire Pour chaque
formulaire, des propriétés sont lues ou écrites,
des méthodes sont appliquées, des événements sont
détectés document.nomFormulaire.propriété documen
t.nomFormulaire.méthod()
Nouveauté xhtml L'attribut name d'une balise
html n'existe plus, et est remplacée par
l'attribut id (identificateur). Sous MIE, il
existe une collection de tous les objets all
, tableau de tous les objets. L'objet formulaire
s'accède alors par document.allidFormulaire
, où idFormulaire est la valeur de l attribut
id de la balise ltform id"idFormulaire"gt. On
peut aussi écrire, plus simplementidFormulaire S
ous Netscape 7, il existe une méthode permettant
d'accéder à un objet donné getElementById( ).
L'objet formulaire s'accède alors par document.
getElementById(idFormulaire) Nous y reviendrons
dans le cours DHTML.
37
(No Transcript)
38
L'Objet Formulaire, exemples pratiques
En pratique, les propriétés lues seront stockées
dans une variable var nbForm // variable
contenant le nombre de formulaire du
document nbFormdocument.forms.length // lecture
de la dimension du tableau forms var nomForm
// variable contenant le nom d un formulaire
particulier nomFormdocument.formsi.name //i
doit être lt nbForm Le code ci-dessous permet de
ré-initialiser le formulaire (équivalent du
bouton ltinput type"reset"..gt en HTML). Le
formulaire peut être accédé de multiples
façons document.formsi.reset() // reset du
iième formulaire document.formsleForm.reset()
// où le nom du formulaire a été déclaré dans la
balise ltform name"leForm"gt document.leForm.reset
() // idem que ci-dessus document.formsnomForm.
reset() // la variable nomForm contient le nom
du formulaire Le click sur le bouton submit
(défini par la balise HTML ltinput
type"submit"gt) sera détecté par l événement
onsubmit déclaré dans la balise HTML ltform
onsubmit"return maFonction()"gt. Soit par ex. la
fonction testSiValid() associée à l événement
onsubmit. Les réponses du formulaire seront
envoyées au programme php si et seulement si
l instruction Javascript return true est
rencontrée dans la fonction. return false
empêche l envoi des réponses. maFonction()
retourne alors true ou false, ce qui équivaut,
pour la balise form à ltform onsubmit"return
true"gt (le formulaire est envoyé) ou ltform
onsubmit"return false"gt (le formulaire n est
pas envoyé) function testSiValid( ) var
nbErreur0 // variable de comptage du nombre
d erreurs / suite d instruction de test ..
/ if (nbErreurgt0) //avions-nous des
erreurs? return false //si oui, le formulaire
n est pas soumis else return true //en
l absence d erreur, le formulaire est soumis
important
39
L'Objet input, hiérarchie d après le DOM
Collections d'objets et hiérarchie le D.O.M. ou
Document Object Model
Textarea
La collection dobjets  Input  est contenu dans
un tableau elements
40
TextPassword Hidden
L'Objet input type  , propriétés,
méthodes et événements
En respectant la hiérarchie des objets, chaque
élément INPUT peut être adressé via javascript
par les collections forms .elements
document.formsi.elementsj , où j est le
jième élément du iième formulaire compté depuis
j0, i0 document.formsnomFormulaire.elements
nomInput , où 'nomFormulaire' est la valeur
de l attribut name de la balise form, et
'nomInput' celle de la balise input. On peut
aussi écriredocument.nomFormulaire.nomInput Pou
r chaque objet Input, des propriétés sont lues ou
écrites, des méthodes sont appliquées, des
événements sont détectés document.nomFormulaire.n
omInput.propriété document.nomFormulaire.nomInput.
méthod()
Nouveauté xhtml L'attribut name d'une balise
html n'existe plus, et est remplacée par
l'attribut id (identificateur). Sous MIE, par la
collection de tous les objets all , tableau
de tous les objets, on accède directement à un
élément particulier du formulaire document.alli
dChamp , où idChamp est la valeur de
l attribut id de la balise ltinput
id"idChamp"gt. On peut aussi écrire, plus
simplementidChamp Sous Netscape 7, on utilise
la méthode permettant d'accéder à un objet donné
getElementById( ). Un élément du formulaire
s'accède alors par document. getElementById(idCh
amp)
41
(No Transcript)
42
TextPasswordd, Hidden
L'Objet input type    ,
exemples pratiques
En pratique, les propriétés lues seront stockées
dans une variable var nbElem // variable
contenant le nombre d éléments du
formulaire nbElemdocument.formsi.elements.lengt
h // lecture de la dimension du tableau
elements du formulaire i. Soit le code HTML
d un formulaire contenant un champ INPUT de type
texte ltform name"leForm"gt ltinput name"leText"
type"text"gt var valeurSaisie // variable
contenant la valeur saisie dans un champ
INPUT valeurSaisiedocument.leForm.leText.value
// lecture de la valeur saisie dans le champ
nommé "leText" majvaleurSaisie.toUpperCase()
//le contenu de la variable valeurSaisie est mis
en majuscule dans la variable maj document.leForm.
leText.valuemaj // ré-écriture du contenu de la
variable maj dans le champ Input nommé
"leText" On peut, par simplification, déclarer
une variable qui contiendra l'objet
formulaire objFormdocument.leForm // la
variable objForm contiendra l'objet formulaire
nommé leForm Puis l'objet input du formulaire
peut aussi être affecté à une variable objInputo
bjForm.leText // la variable objInput contient
alors l'objet input nommé leText du formulaire
nommé leForm. valeurSaisieobjInput.value //
lecture de la valeur saisie dans le champ nommé
"leText" On peut détecter le changement du
contenu d'un champ input par l'événement onchange
généré ltinput name"leText" type"text"
onchange"alert('Le contenu a changé!')"gt Une
fenêtre alert s'ouvre, lorsque le champ input a
perdu le focus et que son contenu a été
modifié. Le champ de type INPUT ne retourne que
du texte, si on souhaite lire une valeur
numérique (ex. une quantité), on utilisera la
méthode de noyau javascript parseInt() qteTexted
ocument.leForm.laQuantite.value //la saisie dans
le champ INPUT nommé laQuantite qteNombreparseInt
(qteTexte) // est toujours du texte, le texte
est alors converti en nombre
43
Notions d'objets sous javascript - Transformation
du type de l'Objet
En raison de la hiérarchie des objets (un objet
appartient à un objet parent), et à partir des
propriétés et méthodes d'un objet, on observe la
transformation du type de l'objet ci-dessous

• nom de variable.
• Cette variable contient soit
• un nombre
• du texte
• ou un objet

l'objet document
l'objet formulaire de l'objet document
l'objet element de l'objet formulaire de l'objet
document
lObjdocument.leForm.leNom.value.length
objet String obtenu par la propriété value de
l'objet element de l'objet formulaire de l'objet
document
objet Number obtenu par la propriété length de
objet String obtenu par la propriété value de
l'objet element de l'objet formulaire de l'objet
document
44
Le langage Javascript pour le web
3ième partie Les balises HTML et les Objets
javascript correspondants
Plan
Objet document Collection d'objets all Les objets
personnalisés Les formulaires Les images
propriétés, méthodes et événements pré-chargement
des images en mémoire images réactives
E. Christoffel MCF, ULP
45
L'Objet Image, hiérarchie d après le DOM
Collections d'objets et hiérarchie le D.O.M. ou
Document Object Model
Textarea
Objet Window
Hiérarchie
Objet document
Objet Image
La collection dobjets  Image  est contenu dans
un tableau images
46
L'Objet Image, propriétés et méthodes (et
événements)
En respectant la hiérarchie des objets, chaque
image peut être adressée par la collection
images document.imagesi , i étant la ième
image comptée depuis i0 document.imagesnomImag
e , où nomImage est la valeur de
l attribut name de la balise ltimg
name"nomImage" src"adresse.jpg" id"idImg"gt. On
peut aussi écriredocument.nomImage document.all
'idImg' ou document.getElementById('idImg') en
xhtml! Pour chaque image, des propriétés sont
lues ou écrites, des méthodes sont appliquées,
(des événements sont détectés (certains que sous
MIE et Netscape 6!) document.nomImage.propriété d
ocument.images'nomImage'.méthod() Attention
Ces propriétés ne peuvent être que lues sous
Netscape 4.7 (sauf src), mais lues et écrites
sous Netscape 6 et MIE!
Non conseillé!
47
L'Objet Image, exemples pratiques
Le constructeur d'image permet de réserver de
l'emplacement en mémoire pour les images, même si
elles ne sont pas affichées de suite uneImagenew
Image() // déclaration d'une image autreImgnew
Image(largeur, hauteur) // pour cette image, les
dimensions sont spécifiées uneImgnew
Image(200,300) // dimensions en pixels La
propriété src (identique à l'attribut SRC de la
balise IMG) permet de télécharger une image à
partir d'une URL, dans l'objet Image uneImage.src
"images/soleil.jpg" Par ailleurs, une image
peut avoir été déclarée dans le document HTML par
la balise IMG ltimg name"imageHTML"
src"images/lune.jpg" width"200"
height"200"gt Le code javascript ci-dessous
permet d'échanger l'image de la balise HTML img
nommée imageHTML, d'URL actuelle images/lune.jpg,
par le contenu de l'objet uneImage, d'URL
images/soleil.jpg par ce
remplacement, les dimensions de l'image
initialement spécifiées par les attributs width
et height de la balise img sont
inchangées! Attention les images créées par le
constructeur ne sont pas accessibles depuis la
collection images!
48
Ainsi, soit l'image résulte de la balise img du
document HTML (collection des images), soit elle
résulte de la création d'un objet de type Image
dans le code javascript. Dans les 2 cas, ces
objets de type Image possèdent les propriétés et
méthodes (et dans certains cas des événements)
vues précédemment, avec les accès par
javascript document.images'imageHTML').propriété
document.images'imageHTML').méthodes() lObjetIma
ge.propriété lObjetImage.méthodes() Lecture des
dimensions d'une image, dans le cas d'une image
du document HTML, ou de la création d'un objet
Image limagedocument. images'imageHTML') //
récupération de l'image du document HTML
limagelObjetImage // ou récupération de
l'image créée par le constructeur Image en
javascript laLargeurlimage.width // lecture des
dimensions de l'image laHauteurlimage.height Mod
ification de la taille de l'image (sous MIE et
Netscape 6) limage.widthlaLargeur/2 limage.heig
htlaHauteur/2 On souhaite remplacer une image
affichée dans le document HTML, par une autre
lorsque la souris pointe sur celle-ci, soit le
code HTML et la détection d'événement (sous MIE
et Netscape 6) ltimg src"image1.jpg" name"img"
onmouseover"this.src'image2.jpg' "
onmouseout"this.src'image1.jpg' "gt En fait,
par compatibilité entre navigateurs (problème
sous N4), un lien sera associé à l'image, lien
qui réagit à l'événement onmouseover, quelque
soit le navigateur.
Ici, l'objet this retourne l'objet courant sur
lequel l'événement survient. En d'autres termes,
cela revient à référencer l'objet par
document.images'img'