Programmation JavaScript

1
Programmation JavaScript

• cours inspiré du cours de R. Vivian

2
Plan

• Introduction à JS
• Structure dun script
• Les chaînes de caractères
• Les formulaires
• Accéder aux éléments
• Le langage objet JS
• JS et les maths
• JS et les cookies
• JS et les popup
• Annexes
• Trucs et astuces des formulaires
• Les tableaux
• Le modèle objet JS

3
I. Présentation

• JavaScript est un langage de programmation
  complètement lié au langage HTML.
• Le développeur Internet code ses pages HTML en y
  intégrant des sources JavaScript.
• Le visiteur, par l'intermédiaire de son
  navigateur, charge le code des pages.

4
I. Présentation

• C'est le navigateur qui interprète le code HTML
  et JavaScript
• L'interprétation dépend naturellement du type de
  navigateur utilisé et de sa version
• JavaScript est un langage objet et événementiel

5
I. Présentation

• Le développeur crée et utilise des objets ayant
  des propriétés et des méthodes.
• L'interprète gérant votre page détecte
  automatiquement tous les événements déclenchés
  par le visiteur
• passage de souris
• clic
• saisie clavier...
• À ces événements sont associées des actions
• Par exemple onClick permet de spécifier des
  actions lors d'un clic de souris sur un objet
  donné

6
I.1 HTML et JavaScript

• Il y a plusieurs endroits dans une page web où il
  est possible d'intégrer du code JavaScript
• dans le corps de la page,
• en entête de page,
• dans un événement d'un objet de la page.

7
I.1 HTML et JavaScript
ltHTMLgt ltHEADgt ltTITLEgt Titre de page
lt/TITLEgt ltSCRIPT language"JavaScript"gt lt!-- //
Cache ce qui suit aux navigateurs ne supportant
pas JavaScript   //--gt // Fin de la partie
cachée lt/SCRIPTgt lt/HEADgt   ltBODYgt ltSCRIPT
type"text/JavaScript"gt lt!-- // Cache ce qui suit
aux navigateurs ne supportant pas
JavaScript   //--gt // Fin de la partie
cachée lt/SCRIPTgt lt/BODYgt lt/HTMLgt
8
I.2 Variables

• JavaScript utilise l'instruction var pour la
  déclaration.
• Pour déclarer une variable basique (càd de type
  entier, numérique, chaîne de caractères), il ne
  faut pas déclarer le type. Le navigateur le
  détecte tout seul.
• Par contre toute nouvelle variable doit être
  initialisée.

9
I.2 Variables Exemple
var prenom_visiteur"Marcel" var
nom_visiteur"Dupond" var age_visiteur29

• On remarque la présence du point virgule () à la
  fin de chaque instruction.
• Il est possible de placer sur une même ligne
  plusieurs instructions séparées par des points
  virgules.

10
I.2 Variables Exemple

• Une variable déjà déclarée s'utilise ensuite
  normalement

var accueil"Bonjour " prenom " " nom
11
I.2 Variables Exemple

12
I.2 Variables Exemple

13
I.3 Objets

• Les éléments manipulés par JavaScript et affichés
  dans votre navigateur sont des objets
• Càd des éléments
• Classés selon une hiérarchie pour pouvoir les
  désigner précisément
• Auxquels on associe des propriétés et des méthodes

14
I.3 Objets

• Cette notion est importante mais nous allons en
  aborder que le strict nécessaire pour ce cours!
• Voyons cela sur un exemple concret
• Imaginez un un jardin dans lequel on trouve
• une branche sur laquelle se trouve un nid
• une balançoire avec un trapèze, une corde et un
  autre nid
• Une salade (ce sont des maraîchers d'occaz)

15
jardin
arbre
branche
balançoire
feuille
trapèze
nid
Largeur 20
Color jaune
corde
Hauteur 4
nid
Largeur 15
tronc
Color maron
racine
Hauteur 6
salade
16
I.3 Objets

• Le nid sur l'arbre est donc désigné par
• Contrairement au nid situé sur la balançoire
• Imaginez maintenant que l'on veuille changer la
  couleur du nid (dans l'arbre) pour le peindre en
  vert
• il suffirait de taper une commande du genre
• C'est donc ainsi que l'on représente les objets
  en JavaScript, à la seule différence que ce n'est
  pas un jardin qui est représenté sous forme
  d'objets mais la fenêtre de votre navigateur...

jardin.arbre.branche.nid
jardin.balançoire.nid
jardin.arbre.branche.nid.couleur vert
17
I.3 Objets

• JavaScript intègre d'origine plusieurs type
  d'objets.
• L'objet le plus grand est la fenêtre window
• Dans la fenêtre s'affiche une page
  document
• ATTENTION, le respect des majuscules/minuscules
  est indispensable et source de nombreuses erreurs.

18
Pour accéder à cet élément, on utilise la
notation pointée window.document.form.textarea
19
I.3 Objets Exemple

• Voyons en détail l'objet Date, très utile dans un
  environnement Internet.
• La déclaration se fait toujours avec var.
• Pour créer un objet, il faut utiliser le mot clé
  new suivi du type d'objet ici date.

// crée un objet date contenant la date du
jour. var date_journew date() // crée un objet
date avec une date paramétrable. var
une_datenew date(annee,mois-1,jour,heure,min) 
20
I.3 ObjetsAffichage de la date
ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt ltSCRIPTgt var
date_jour new Date() window.document.write(
date_jour ) lt/SCRIPTgt lt/BODYgt lt/HTMLgt
21
I.5 Fonctions

• Les fonctions sont déclarées et codées dans
  l'entête de la page et peuvent être appelées
  ensuite à n'importe quel endroit de la page.

22
I.5 Fonctions

• Pour déclarer une fonction on utilise le mot-clé
  function, suivi de son nom et des éventuels
  paramètres.

function ma_fonction(param1, param2) ...
function mon_autre_fonction() ...
23
I.5 Fonctions

• Le corps des fonctions est délimité par et
  dans lequel on place la déclaration des variables
  locales, propres à la fonction, ainsi que
  l'ensemble des traitements.
• Remarque
• non précédée de var, une variable a une
  visibilité globale.
• Précédée de var, une variable a une visibilité
  limitée à la fonction ou elle a été définie.

24
I.5 Fonctions

• Une fonction aura dans son corps une ou plusieurs
  instructions return qui permet(tent) de renvoyer
  une valeur ou un objet.
• Une fonction sans instruction return est une
  procédure.

25
I.5 Fonctions Exemple
ltHTMLgt ltHEADgt ltSCRIPTgt function bonjour(prenom)
// déclaration de la procédure
document.write("Bonjour, comment vas-tu
",prenom,"?ltbrgt") function
volumeSphere(rayon) // déclaration de
fonctions return 4/3Math.PIMath.pow(rayon,3)
function calculerPrix(PrixUnitaire,
NbArticles) // Facturation return
PrixUnitaire NbArticles lt/SCRIPTgt lt/HEADgt
Lentête
26
I.5 Fonctions Exemple
ltBODYgt ltSCRIPTgt // appel de la procédure
bonjour("Toto") //appels des fonctions
var montantcalculerPrix( 150 , 4)
document.write(Tu dois ,montant,F.ltBRgt)
document.write( "Tu dois ", calculerPrix( 150,
4), "F.ltBRgt") document.write( "Volume de la
sphère unité ", volumeSphere(1)," ?ltBRgt"
) lt/SCRIPTgt lt/BODYgt lt/HTMLgt
27
II Structure d'un Script

• Le JavaScript a une structure de programmation
  proche du langage C moins riche naturellement

28
II.1 Écrire un commentaire

• Indispensable les commentaires en programmation.
• Pour mettre en commentaire une partie de code,
  jusqu'au prochain retour à la ligne

var age25 // Ceci est en commentaire
29
II.1 Écrire un commentaire

• Pour mettre en commentaire plusieurs lignes de
  code

/ Ceci est en commentaire Ligne 1 Ligne
2 Dernière ligne /
30
II.2 Grouper les instructions

• Les instructions sont regroupées par les
  accolades et .
• Il doit y avoir autant d'accolades ouvertes que
  d'accolades fermées.
• Le groupement d'instructions est utile.

31
II.2 Grouper les instructions

• Il permet par exemple de regrouper les
  instructions d'une fonction

function somme(a,b) var sumab return sum
32
II.3 Test Conditionnel

• L'instruction if permet d'effectuer certaines
  actions uniquement quand un test donné a pour
  valeur true(? vrai valeur booléenne)

33
II.3 Test Conditionnel

• Il y a 2 moyens d'utiliser if
• Action à réaliser une instruction
• Action plusieurs instructions

// Si l'âge est inf à 18 ans, un message est
affiché if ( age lt 18 ) alert( "Vous devez être
majeur" )
// si l'âge est inf à 18 ans, un message est
affiché et // le visiteur est redirigé vers la
page mineur.php3. if (agelt18) alert("Vous
devez être majeur") window.location"mineur.php3
"
34
II.3 Test Conditionnel

• L'instruction if peut être complétée par
  l'instruction else pour gérer les actions à
  associer à la valeur false du test

35
II.3 Test Conditionnel Exemple
ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt ltSCRIPTgt var
age15 var wl "mineur.php3" if (age lt 18)
alert(" encore un peu jeune petit") else
alert( "c'est bon tu peux entrer") wl
"majeur.php3" window.location wl
lt/SCRIPTgt lt/BODYgt lt/HTMLgt
36
II.4 Boucle for

• Une boucle for répète un groupe d'instructions
  tant que la partie condition est vraie.
• Une ou plusieurs variables définissent le nombre
  d'itérations

for ( initialisation condition incrément
) // Vos instructions
37
II.4 Boucle for

• Ces variables sont initialisées au 1er passage
  puis la condition est évaluée
• Ensuite, à chaque début d'itération les
  instructions de la partie incrément sont
  exécutées
• En générale elles modifient les variables
  d'itération
• Après la partie incrément faite, la condition est
  réévaluée

38
II.4 Boucle for Exemples

• Faire une boucle pour i variant de 0 à 100 inclus
  par pas de 1
• Faire une boucle pour i variant de 10 à 0 inclus
  par pas de -1

for (var i0ilt100ii1)
for (var i10igt0ii-1)
39
II.4 Boucle for Exemple

• Voici une application mathématique.
• Il s'agit de calculer la somme des nombres de 1 à
  N.

function somme(N) var sum0 for (var
i1iltNii1) sumsumi alert("Somme
de 1 à "N" "sum)
40
II.4 Boucle for Astuces

• Écrire a est équivalent à aa1
• Et a-- est équivalent à aa-1
• Dans la même idée, on peut aussi remplacer aa5
  par a5
• Vous trouverez donc souvent les boucles for avec
  cette syntaxe

for(var i0ilt100i)
41
II.4 Boucle for Exemple
ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt ltSCRIPTgt for(var
i0ilt10i) alert(" message "
i) lt/SCRIPTgt lt/BODYgt lt/HTMLgt
42
III Chaînes de caractères

• Tous les langages de programmation prévoient une
  gestion des chaînes de caractères
• JavaScript est particulièrement bien adapté pour
  le traitement des chaînes

43
III.1 Déclaration

• 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
44
III.1 Déclaration

• Cela se corse quand il s'agit d'initialiser une
  chaîne avec un de ces caractères
• Le secret est d'alterner les guillemets et les
  apostrophes selon les caractères spéciaux à
  afficher
• Il faut veillez à ne pas fermer la chaîne de
  caractères avant sa fin normale pour éviter les
  erreurs JavaScript

var chaine1"Bonjour l'ami" var chaine2'Je vous
dis "Bonjour " '
45
III.1 Déclaration

• Exemple de déclaration incorrecte
• Il existe aussi une autre solution
• La variable chaine1 contient Je lui dis "Bonjour
  l'ami".
• Javascript a interprété \" comme un guillemet.

var chaine1"Je vous dis "Bonjour"" // ici, le "
indique la fin de chaîne
var chaine1"Je lui dis \"Bonjour l'ami\" "
46
III.1 Déclaration

• Une variable peut être transformée en une chaîne
  de caractères à tout moment
• Il est possible de modifier dynamiquement le type
  de la variable
• A la fin de ce script, chaine est un nombre qui
  vaut 3.14159 pi est une chaîne qui contient
  "3.14152654".

var chaine"azerty" var pi3.14159 chainepi pi
pi"2654"
47
III.1 Déclaration

• La différence peut sembler sans importance. Il
  n'en est rien!
• Quand une variable est un nombre, il est possible
  de lui appliquer des opérations (addition,
  multiplication, ...)
• Quand une variable est de type chaîne de
  caractères, on peut lui appliquer les méthodes
  propres aux objets chaînes

48
III.2 Opérations

• 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
• La variable chaine contient après ce script "Vive
  le JavaScript". La concaténation est une
  opération simple et très utile

var chaine1"Vive le " var chaine2"JavaScript"
var chainechaine1chaine2
49
III.2 Opérations

• 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
• chaine.length retourne le nombre de caractères,
  ici 6 caractères

var chaine"azerty"
50
III.2 Opérations

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

var chaine"azerty"
51
III.2 Opérations

• Il est utile de pouvoir extraire un morceau d'une
  chaîne
• La question est de récupérer le jour, le mois et
  l'année dans 3 variables différentes

var date"15/08/2000"
var jour date.substring(0,2) var mois
date.substring(3,5) var annee
date.substring(6,10)
52
III.2 Opérations

• substring 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.

53
III.2 Opérations

• Deux méthodes permettent de retrouver une
  sous-chaîne d'une chaîne
• Ces méthodes retrouvent la position d'une chaîne
  et retourne son indice
• La méthode lastindexof(souschaine) retourne
  l'indice de la dernière occurrence de souschaine
• Si la sous-chaîne n'est pas trouvé, lastindexof
  retourne -1

var dom "www.toutjavascript.com" var ext
domaine.substring(domaine.lastindexof("."))
54
III.2 Opérations

• JavaScript offre deux méthodes pour transformer
  les lettres (et des lettres uniquement) d'un mot
  en majuscules ou en minuscules
• A la fin de ce script, maj contient CECI EST UN
  TEXTE et min contient ceci est un texte

var chaine"Ceci est un texte" var
majchaine.toUpperCase() var minchaine.toLowerCa
se()
55
IV 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.

56
IV Formulaires

• JavaScript associé aux formulaires permet
• d'assister et de guider le visiteur,
• de contrôler la saisie,
• de faire des traitements(calcul, manipulation de
  chaînes de caractères),
• d'envoyer les résultats au serveur.

57
IV Formulaires

• Pour intégrer des éléments de formulaire, il faut
  encadrer les balises par ltformgt et lt/formgt.
• Dans la suite de ce document, sont présentés tous
  les éléments de formulaire avec les propriétés,
  les méthodes et les événements associés.

58
IV Formulaires
Création de formulaire Case à cocher Radio-bouton
Text Password Textarea Bouton Bouton Reset Bouton
Submit Valeur cachée
59
IV.1 La balise ltformgtpropriétés, méthodes,
événements
60
IV.1 définitions 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!) 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 pgms InterNet

61
IV.2 L'élément 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 spéciaux reset et submit.

62
IV.2 L'élément input propriétés
 
63
IV.2 L'élément input méthodes et événements
64
IV.2.1 Les Zones de Textes

• Une zone de texte est définie par la balise input
  avec un type text
• 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

ltinput type"text"gt
65
IV.2.2 Les Boutons

• Un bouton est défini par la balise input avec un
  type button
• 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.

ltinput type"button" value"Ceci est un bouton"gt
66
IV.2.3 Les Radio-Boutons

• Un radio-boutons 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.
• Ainsi, la sélection sera unique pour l'ensemble
  du groupe.

ltinput type"radio" name"sexe" value"homme"gt
Homme ltinput type"radio" name"sexe"
value"femme" checkedgtFemme
67
IV.2.3 Les Radio-Boutons

• 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

68
IV.2.4 les Cases à Cocher

• Une case à cocher est définie par la balise INPUT
  avec un type checkbox.
• Contrairement aux cases à cocher, il n'y a pas
  d'exclusion entre les propositions.

69
IV.2.4 les Cases à Cocher

• 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.

ltinput type"checkbox" name"majeur"gtMajeur ltinput
type"checkbox" name"etudiant"gtEtudiant
70
IV.2.4 les Cases à Cocher

• 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

71
IV.2.5 Le password

• Password se présente comme une zone de texte.
• Mais il affiche des pour cacher le contenu du
  champ.
• Il est aussi impossible de copier le contenu
  (CTRLC).
• Il est donc adapté à la saisie de mot de passe.

ltinput type"password" name"passe"
value"azerty" size10gt
72
IV.2.6 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.
• Naturellement, le champ n'apparaît pas!

ltinput type"hidden" value"contenu caché"
name"cache"gt
73
IV.2.6 La valeur cachée

• Propriétés acceptées
• name value defaultvalue
• Naturellement, toutes les propriétés et les
  événements concernant son affichage et son
  apparence sont sans effet.
• Remarque Même s'il n'apparaît pas à l'écran,
  son contenu reste manipulable en JavaScript.

74
IV.2.7 Les boutons spéciaux

• Les boutons reset et submit existent bien!
• Il faut les décrire (Je préconise de les
  éviter)???

ltform name"formspe" action"javascriptalert('Sou
mis')"gt ltinput type"text" name"texte"
value"Contenu"gt lt input type"checkbox"
checkedgtCochez moi !ltBRgt lt input type"reset"
value"RESET"gt lt input type"submit"
value"SUBMIT"gt lt/formgt
75
IV.3 Les menus de sélection

• Les listes sont définies par les balises
  ltselectgtlt/selectgt
• Cette balise définie la zone de la liste. Les
  lignes de contenu de la liste sont alimentées par
  les balises ltoptiongtlt/option gt

ltselect name"mono" size1gt ltoption
value"1"gtligne 1lt/option gt ltoption
value"2"gtligne 2lt/option gt ltoption
value"3"gtligne 3lt/option gt ltoption
value"4"gtligne 4lt/option gt lt/selectgt
76
IV.3 Les menus de sélection

• Les listes peuvent se présenter de plusieurs
  manières, selon leur propriété.
• Sur une ligne size1
• Sur plusieurs lignes mono-sélection size4
• Sur plusieurs lignes multi-sélection multiple
  size4

77
IV.3 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

78
IV.3 L'élément optionpropriétés, méthodes,
événements
79
IV.4 les zones de textes multi lignes textarea

• L'objet textarea est essentiellement utilisé pour
  permettre au visiteur de saisir un texte assez
  long (message, descriptif...)

lttextarea name"texte" rows"5" cols"20"gt Ligne
1 Ligne 2 ... lt/ textarea gt
 
80
IV.4 L'élément textareapropriétés, méthodes,
événements
81
IV.4 L'élément textareapropriétés, méthodes,
événements

• Les 2 propriétés rows et cols qui indiquent
  respectivement le nombre de lignes et de colonnes
  de la zone
• Le texte contenu dans l'élément textarea apparaît
  tel que dans le code source
• Un retour à la ligne dans le code source crée une
  nouvelle ligne dans la zone

82
V L'accès aux éléments

• Les éléments de formulaire sont des objets
  JavaScript
• Voyons comment accéder via JavaScript aux objets
  d'un formulaire
• Supposons le formulaire suivant

ltform name"general"gt ltinput type"text"
name"champ1" value"Valeur initiale"gt lt/formgt
83
V L'accès aux éléments
general
champ1
Type text
Name "champ1"
Value "valeur initiale"
Pour accéder à un objet il faut suivre sa
hiérarchie. On peut comparer cela à un jeu de
poupées russes .
84
V.1 Accéder au formulaire

• Le formulaire est un élément de l'objet document
• Pour accéder au formulaire général, il faut
  écrire
• forms est le tableau des formulaires de document
• On peut accéder à un formulaire par
• son nom comme indice dans forms ou
• son entier comme indice dans forms ou
• Les indices des tableaux commence à 0
• son nom tout simplement

document.forms0 ou document.general
85
V.2 Accéder à un élément

• Pour accéder maintenant à la zone de texte, on
  écrit
• elements est le tableau de tous les éléments du
  formulaire
• On peut accéder à un élément par
• son nom comme indice dans elements ou
• son entier comme indice dans elements ou
• son nom tout simplement

document.general.elements0 ou document.general.c
hamp1
86
V.3 Manipuler les propriétés d'un élément

• Par exemple, pour placer dans la zone de texte le
  mot "NOUVEAU", il faut écrire

document.general.champ1.value"NOUVEAU"
87
V.4 Appeler une méthode d'un élément

• Pour donner le focus au champ texte du haut de
  cette page, il faut appeler la méthode focus()
  sur cet élément

document.general. champ1.focus()
88
V.5 Intégrer du JavaScript dans un événement

• Un événement est déclenché par le navigateur en
  réaction à une action de l'utilisateur ou d'un
  changement quelconque détecté
• L'événement le plus classique, appelé onClick,
  est le clic sur un bouton

89
V.5 Intégrer du JavaScript dans un événement

• Reprenons l'exemple précédent, et plaçons
  "NOUVEAU" dans la zone de texte du formulaire à
  l'aide d'un bouton

ltform nameCHG"gt ltinput type"text" nameZT
value"Valeur initiale"gt ltinput type"button"
value"Changer la zone de texte
onClick'document. CHG.ZT.value new"
'gt lt/formgt
90
V.5 Intégrer du JavaScript dans un événement

• Dans le bouton, on a rajouté l'événement onClick
  qui reçoit le code JavaScript à exécuter lors du
  clic sur le bouton
• Le code javascript doit se mettre entre " ou
  entre '
• Il faut faire très attention à alterner les " et
  '
• On peut écrire onClick'alert("Bonjour")' ou
  onClick"alert('Bonjour')"

onClick' document. CHG. ZT.value Still new" '
91
V.6 L'objet this

• Il est fastidieux d'accéder aux éléments de
  formulaire par toute la chaîne document.forms.ele
  ments
• Un objet JavaScript this permet de raccourcir ce
  chemin d'accès
• this représente l'objet JavaScript en cours
  d'utilisation

92
V.6 L'objet this exemple

• Quand un zone de texte reçoit l'attention (le
  focus), un message apparaît dans la barre de
  statut pour indiquer son nom le message
  disparaît quand le champ perd le focus

ltform name"formfocus"gt ltinput
type"text" name"champtexte"
value"contenu" onFocus"window.statusthis.name
" onBlur"window.status''"gt lt/formgt

• La variable window.status contient le message
  avec le nom du champ obtenu par this.name
  équivalent ici à document.formfocus.champtexte
  .name

93
V.6 L'objet this exemple

• Reprenons encore une fois notre champ texte qui
  peut voir son contenu changer lors du clic sur un
  bouton
• Grâce à this.form, on peut accéder au formulaire
  de l'élément en cours
• Le chemin pour accéder à zonedetexte est ensuite
  classique

ltform name"mine"gt ltinput type"text"
name"zonedetexte" value"Valeur initiale"gt
ltinput type"button" value"Changer le contenu"
onClick' this.form.zonedetexte.value"NOUVEAU"
'gt lt/formgt
94
V.6 L'objet this exemple

• Un bouton sert principalement à déclencher une
  action JavaScript.
• Nous avons déjà vu dans le paragraphe Intégrer du
  JavaScript dans un événement comment détecter le
  click sur un bouton
• La propriété value contient le libellé du bouton.
• Comme pour une zone de texte, ce libellé est
  accessible
• checked est de type booléen
• Il contient true si l'objet est coché et false
  sinon.

ltformgt ltinput type"checkbox"
name"majeur"gtMajeur ltinput type"checkbox"
name"etudiant"gtEtudiant ltinput type"button"
value"Tester" onClick"alert('Majeur '
this.form.majeur.checked '\nEtudiant
' this.form.etudiant.checked)"
gtlt/formgt
95
V.7 Accéder auxzones de texte

• La principale action en JavaScript sur une zone
  de texte est de manipuler son contenu
• Imaginons un formulaire appelé myform qui possède
  un champ texte appelé myfield
• On accède au contenu du champ par
• Il faut bien penser à ajouter la propriété value
  pour accéder au contenu

document. myform. myfield.value
96
V.8 Accéder auxradio-boutons
ltformgt ltinput type"radio" name"os"
value"WXP" checkedgt WindXP lt input
type"radio" name"os" value"Linux"gt Linux lt
input type"radio" name"os" value"Autre"gt
Autre // le bouton défini précédemment lt
input type"button" value"Tester
onClick"testerRadio(this.form.os)"gt // une
fct de consultation du groupe 'radio' de
radio-boutons ltscript language"javascript"gt
function testerRadio(radio) for (var
i0 iltradio.lengthi) if
(radioi.checked) alert("Système
"radioi.value)
lt/scriptgt lt/formgt
97
V.9 Accéder aux menus de sélection
ltselect name"liste" size1gt ltoption
value"valeur ligne 1"gtLibellé ligne 1 lt/optiongt
ltoption value"valeur ligne 2"gtLibellé ligne 2
lt/optiongt ltoption value"valeur ligne
3"gtLibellé ligne 3 lt/optiongt ltoption
value"valeur ligne 4"gtLibellé ligne 4
lt/optiongt lt/selectgt
98
V.9 Accéder auxmenus de sélection

• Pour récupérer l'indice la ligne
  sélectionnée this.form. liste.selectedIndex
• Pour récupérer le nombre de lignes this.form.lis
  te.options.length
• Pour récupérer la valeur de la ligne sélectionnée

this.form.liste.optionsthis.form.liste.selectedIn
dex.value
99
V.10 Accéder auxtextarea

• 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 document.nom. zone.value
• Afin de pouvoir traiter la chaîne résultante, il
  faut traduire l'ensemble de scaractères spéciaux
  (RC, , LF, ) en un code compréhensible
• La fonction escape(car) retourne le code
  correspondant à car
• La fonction unescape(code) retourne le caractère
  correspondant
• Par exemple escape("") retourne "23" et
  unescape("23") retourne ""

100
VII.1 Conversion chaîne de caractères en nombres

• Les variables ne sont pas typées
• Mais il est utile de savoir transformer une
  chaîne en un entier ou un réel (nombre à virgule)
• Imaginons ce script

var chaine"3.14" var entierparseInt(chaine) va
r reelparseFloat(chaine)
101
VII.2 L'objet Math

• La plupart des fonctions mathématiques sont des
  méthodes de l'objet Math
• Retourne une valeur entre 0 et 1

var nbMath.random()
102
VII.3 L'objet Math et ses méthodes
103
VII.3 L'objet Math et ses méthodes
104
A.1 Introduction

• Nous allons voir de nombreuses astuces pour
  rendre un formulaire dynamique et attractif, en
  réaction aux événements générés par l'utilisateur
• Il est nécessaire de bien connaître le principe
  des formulaires HTML pour tirer partie de ces
  astuces.

105
A.2 Donner le focusà un élément

• Le premier champ texte a le focus au chargement
  de la page
• Cliquez sur les boutons pour donner le focus aux
  autres éléments
• La prise de focus est possible pour tous les
  types d'objets

 
106
A.2 Donner le focusà un élément
ltBODY onLoad"document.form1.champ1.focus()"gt
ltFORM name"form1"gt ltINPUT type"texte"
name"champ1"gt ltINPUT type"button"
value"suivant" onClick"this.form.champ2.f
ocus()"gtltpgt ltSELECT name"champ2" gt
ltOPTIONgtCeci est la ligne n 1lt/OPTIONgt
ltOPTIONgtCeci est la ligne n 2lt/OPTIONgt
lt/SELECTgt ltINPUT type"button"
value"suivant onClick"this.form.champ3.fo
cus()"gtltpgt ltTEXTAREA rows"2" cols"15"
name"champ3"gtlt/textareagt ltINPUT
type"button" value"valider"gt lt/FORMgtlt/BODYgt
107
A.3 Changer le libellé
ltFORM name"form2"gt ltINPUT type"button"
name"bouton" value'Cliquez-moi !
onClick"this.value'Touché !'"gt lt/FORMgt
108
A.4 Autoriser un seul clic

• Accepte le premier clic sur le bouton et empêche
  les suivants
• Utile pour éviter de recevoir 3 fois le même
  message quand un visiteur bégaie sur le bouton
  "Envoyer" !

109
A.4 Autoriser un seul clic
ltSCRIPT language"javascript"gt var nbclic0
// Initialisation à 0 du nombre de clic
function CompteClic(formulaire) // Fonction
appelée par le bouton nbclic // nbclic1
if (nbclicgt1) // Plus de 1 clic
alert("Vous avez déjà cliqué") else
alert("Premier Clic.") // 1 seul clic
lt/SCRIPTgt ltINPUT type"button" name"bouton"
value"Cliquez" onClick"CompteClic(this.form)"gt
110
A.5 Valider un formulaire

• Il est souvent utile de vérifier la saisie d'un
  formulaire avant de le valider
• L'idéal est de créer un bouton (de type "button"
  et pas "submit") qui appelle une fonction
  javascript qui contrôle la saisie et soumet ou
  non le formulaire

111
A.5 Valider un formulaire

• Voyons un exple de saisie d'un email

ltFORM name"form4" action"mailtoparis_at_lita.univ
-metz.fr" method"post"gt ltSCRIPT
language"javascript"gt function
ValiderMail(formulaire) if(
formulaire.mail.value.indexOf( "_at_", 0 ) lt 0 )
alert("Adresse mail saisie invalide.\nLe
formulaire ne sera pas validé.") else
alert("Formulaire validé.\nPour valider
un formulaire formulaire.submit()")
formulaire.submit() // Pour valider le
formulaire en javascript
lt/SCRIPTgt   ltINPUT type"texte"
name"mail"gt ltINPUT type"button" name"bouton"
value"Valider" onClick"ValiderMail(this.form)"
gt lt/FORMgt
112
A.6 Vider un champà la prise de focus
ltFORM name"form5"gt ltINPUT type"texte"
name"login" value'Votre login'
onFocus'this.value"" ' gt lt/FORMgt
113
A.7 Détecterla touche Entrée

• Utile dans les formulaires de recherche, où la
  plupart des utilisateurs tapent Entrée pour
  valider la recherche, sans cliquer sur le bouton
  "Rechercher"
• L'appui sur Entrée déclenche la soumission du
  formulaire qu'il est possible de détecter avec
  l'événement onSubmit

ltFORM name"formulaire" onSubmit"maFonction()"gt
114
A.8 Empêcher la saisied'un champ

• Dès que la curseur souris arrive sur ce champ, il
  est enlevé
• Cela rend impossible la saisie ou la modification
  de son contenu
• L'astuce est d'utiliser l'événement onFocus qui
  détecte l'arrivée du curseur dans le champ

ltINPUT type"text" value"Non modifiable"
name"champ" onFocus"this.blur()"gt ltINPUT
type"text" value"Non modifiable"
name"champ" onFocus"this.form.champ2.focus()"gt
115
I.4 Tableaux

• En JavaScript, les tableaux sont des objets.
• Leurs déclarations sont identiques à celles vues
  précédemment.

// tableau de 10 éléments de type
basique //(réel, entier, chaîne de
caractères). var un_tableau new Array( 10) 
116
I.4 Tableaux

• En JavaScript, le premier élément d'un tableau
  est indexé à 0
• Il est possible de déclarer un tableau sans fixer
  sa dimension
• Alors la taille du tableau s'adapte au fur et à
  mesure à son contenu

var un_autre_tableaunew Array
117
I.4 Tableaux

• Pour accéder aux éléments du tableau, on utilise
  les crochets et

un_tableau010 un_tableau95 un_tableau9u
n_tableau0-5
118
I.4 Tableaux

• Des méthodes associées à l'objet permettent
  d'effectuer des traitements ou d'accéder à des
  propriétés.
• On utilise la notation pointée pour appliquer une
  méthode sur un objet ou pour accéder à une
  propriété.

// Le nbre d'éléments de l'objet Array
un_tableau var dimension un_tableau.length
119
I.4 Tableaux Exemple
ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt ltSCRIPTgt
var un_tableaunew Array(10)  var
dimensionun_tableau.length
document.write(dimension) lt/SCRIPTgt lt/BODYgt
lt/HTMLgt
120
I.4 Tableaux Exemple
ltHTMLgt ltHEADgt ltH1gt Tableau des 4 saisons
lt/H1gt lt/HEADgt ltBODYgt ltSCRIPTgt var
Les4saisons new Array("printemps",
"été", "automne", "hiver")
document.write("ltBRgt", "Voici les 4 saisons
ltOLgt") for (i0 ilt4 i)
document.write("ltLIgt", Les4saisonsi )
document.write("lt/OLgt") lt/SCRIPTgt
lt/BODYgt lt/HTMLgt
121
3 Les tableaux Javascript
 JavaScript a une gestion particulière des
tableaux. Un tableau est un objet Array.
3.1 La déclaration de tableaux
C'est quoi un tableau ? Les tableaux sont des
éléments indispensables de la programmation. Un
tableau est une structure ordonnée permettant de
recevoir des informations. Les jours de la
semaine peuvent être stockés en mémoire dans un
tableau. Le tableau en mémoire peut être comparé
au tableau réel
 L'intérêt premier du tableau est de permettre un
accès à une information par son indice. Par
exemple, le premier élément de ce tableau
contient "Lundi". Le paragraphe suivant montre
comment remplir un tableau.
122
Déclaration de base Un tableau est un objet
Array. Pour déclarer un tableau, il faut utiliser
l'instruction new (Var) tabnew Array La
variable tab a maintenant la structure d'un
tableau. Elle possède les propriétés et les
méthodes des tableaux et est prête à recevoir le
contenu du tableau. En javascript, comme dans la
plupart des langages de programmation, le premier
élément du tableau commence à l'indice 0 (comme
en C). C'est un peu gênant, mais on commence a
avoir lhabitude.
Pour alimenter le tableau avec les jours de la
semaine, on écrit le code suivant tabnew
Array tab0"Lundi" tab1"Mardi" tab2
"Mercredi" tab3"Jeudi" tab4"Vendredi
" tab5"Samedi" tab6"Dimanche" var
longueur tab.length
123
Maintenant, le tableau est initialisé avec les
jours de la semaine. La variable longueur
contient 7 il y a 7 éléments dans le tableau de
l'indice 0 à l'indice 6 (soit 7-1). Si on accède
à un élément dont l'indice n'existe pas,
javascript retourne undefined. Par exemple,
tab10 n'existe pas, cet élément vaut undefined.
Exercice Écrire un programme qui trie un
tableau contenant des noms danimaux. Il est
possible de comparer les contenus de cellule par
un simple test de supériorité comme sur des
valeurs numériques.
124
ltHTMLgt ltHEADgt ltTITLEgtTri d'un tableau par une
méthode peu astucieuselt/TITLEgt lt/HEADgt
ltBODYgt ltscript language"JavaScript"gt animaux
new Array(7) animaux0 "chien" animaux1
"autruche " animaux2 "wapiti" animaux3
"dromadaire " animaux4 "lynx" animaux5
"belette"   animaux6 "lapin" document.write(
"ltH3gtTri d'un tableault/H3gt") for (i0 ilt6 i)
for (ji1 jlt7 j) if (animauxj lt
animauxi) provisoire animauxi
animauxi animauxj animauxj
provisoire for (i0 ilt7)
document.write(animauxi "ltBRgt") lt/scriptgt lt/
BODYgt lt/HTMLgt
125
3.2 Les tableaux spéciaux Nous avons vu comment
créer un tableau simple à une seule dimension.
C'est la base de tous les tableaux possibles en
javascript.
DDans certains cas, un indice numérique est moins
pratique ou moins explicite qu'un indice sous
forme de texte. Par exemple, imaginons que pour
chaque jour de la semaine on ait une page
spéciale à charger -         samedi et dimanche
weekend.html -         mercredi
enfant.html -         les autres jours
travail.html   Il pourrait être intéressant
d'avoir un tableau de ce type
126
 Qui serait déclaré ainsi en javascript var
tabnew Array tab"Lundi"" travail
" tab"Mardi"" travail " tab"Mercredi""
enfant" tab"Jeudi"" travail
" tab"Vendredi"" travail " tab"Samedi"
"weekend" tab"Dimanche""weekend"   Grâce à
cette déclaration un peu spéciale, on accède aux
éléments du tableau par le jour de la semaine.
127
Les tableaux d'objets   Pour l'instant, les
tableaux que nous avons vus contenaient des
valeurs basiques (chaînes de caractères ou
nombres). Il est possible d'associer à un élément
de tableau un objet javascript complexe.
Imaginons un tableau contenant tous vos animaux
domestiques. Un animal domestique est décrit par
-         son nom -         son
espèce -         son âge   Voici la fonction qui
construit un animal en mémoire function
Animal(un_nom,une_espece,un_age)
this.nomun_nom this.especeune_espece this.ag
eun_age
128
On peut créer les animaux en appelant la fonction
Animal var milounew Animal("Milou","Chien","4")
var titinew Animal("Titi","Canari","1") var
rominetnew Animal("Rominet","Chat","2")   On a
maintenant en mémoire 3 variables correspondant à
nos 3 animaux milou, titi et rominet   Attention
il ne faut pas confondre les variables en
minuscules avec le nom de l'animal qui est une
chaîne de caractères et qui comporte une
majuscule ! Il ne reste qu'à créer le tableau
animaux var animauxnew Array animaux0milou
animaux1titi animaux2rominet
129
Ici, le premier élément du tableau animaux
contient un objet, la variable milou. Il ne faut
pas mettre de guillemet autour de milou ce
n'est pas une chaîne de caractères, mais un nom
de variable.   Pour accéder à l'objet premier
animal (indice 0), on écrit animaux0 Pour
accéder à ses propriétés, on utilise la notion
pointée animaux0.nom animaux0.espece animaux
0.age
130
Gros exemple
ltHTMLgt ltHEADgt ltTITLEgtPetite zoologie
portativelt/TITLEgt ltscript language"JavaScript"gt f
unction ANIMAL(genre, ordre, famille)
this.genre genre this.ordre ordre
this.famille famille animal new
Array() animal"rat" new ANIMAL("Mammifères",
"Rongeurs", "Omnivores") animal"porc" new
ANIMAL("Mammifères", "Pachydermes",
"Suidés") animal"chat" new
ANIMAL("Mammifères", "Carnassiers",
"Carnivores") animal"aigle" new
ANIMAL("Oiseaux", "Rapaces", "Faucons") animal"ca
rpe" new ANIMAL("Cyprins", "Malacoptérygiens",
"Cyprinoïdes") animal"canard" new
ANIMAL("Oiseaux", "Palmipèdes",
"Lamellirostres") animal"ours" new
ANIMAL("Mammifères", "Carnassiers",
"Carnivores") animal"grenouille" new
ANIMAL("Batraciens", "Anoures", "Rainettes")
131
function recherche(bete) bete
bete.toLowerCase() // Pour mettre les caractères
en minuscule if (typeof animalbete
"undefined") // On vérifie que l'on est bien dans
le tableau alert(" Animal non trouvé ")
// Affichage des caractéristiques
document.forms0.elements2.value
animalbete.genre document.forms0.elements3
.value animalbete.ordre document.forms0.el
ements4.value animalbete.famille lt/scriptgt

132
lt/HEADgt ltBODYgt ltH2gtPetite zoologie
portativelt/H2gt ltFORMgt Nom de l'animal ltINPUT
TYPE"text" VALUE"" SIZE"10"gt ltINPUT
type"button" VALUE"Afficher"
onClick"recherche(document.forms0.elements0.v
alue)"gt ltPgt ltPREgt Genre ltINPUT TYPE"text"
VALUE"" SIZE"20"gt Ordre ltINPUT TYPE"text"
VALUE"" SIZE"20"gt Famille ltINPUT TYPE"text"
VALUE"" SIZE"20"gt lt/PREgt lt/FORMgt ltHRgt lt/BODYgt lt/
HTMLgt
133
Les tableaux à plusieurs dimensions   On vient de
voir qu'il est possible de créer des tableaux
d'objets. Or un tableau est aussi un objet
javascript Array. Il est donc possible de créer
des tableaux de tableaux, ce qui correspond à des
tableaux à plusieurs dimensions. Le nombre de
dimensions d'un tableau n'est pas limité mais
nous allons traiter un exemple simple et concret
à deux dimensions. Imaginons un jeu de morpion.
La zone de jeu est un plateau de 3 par 3.
Supposons cette grille à un moment donné de la
partie
Cette grille est bien un tableau à 2 dimensions.
Décidons, par convention, d'indicer d'abord la
colonne puis la ligne. Ainsi, la case0,0 coin
supérieur gauche est vide, la case 0,2 coin
inférieur gauche contient "O", la case2,0 coin
supérieur droit contient "X".
134
Comment faire pour créer un tableau javascript de
ce type ?   On va créer un tableau de 3 colonnes
une colonne étant un tableau de 3
cases. D'abord on crée les 3 colonnes var
col0new Array col00" " col01"X"
col02"O" var col1new Array col10" "
col11"O" col12"X" var col2new Array
col20"X" col21" " col22" "   Ensuite
le tableau morpion var morpionnew
Array morpion0col0 morpion1col1
morpion2col2   Pour accéder à l'élément
0,2, on écrit simplement morpion02 Affich
er lexemple (très modeste) du morpion (vvide)
135
Un exemple utile   Les tableaux sont utilisés
dans la plupart des scripts du site. Voici
quelques scripts simples qui montrent bien
l'emploi des tableaux.
Formatage de date Le formatage de dates est un
bon exemple d'utilisation des tableaux. Le
navigateur peut retourner le numéro du jour et du
mois en cours. Avec ces indices, on peut aller
rechercher le libellé en français du jour et du
mois. var dtnew Date var jourdt.getDay( ) var
nudt.getDate( ) var moisdt.getMonth( ) Var
tabjrnew Array("Dimanche","Lundi","Mardi","Mercre
di","Jeudi","Vendredi","Samedi") var tabmoisnew
Array("Janvier","Février","Mars","Avril","Mai","Ju
in","Juillet", "Août","Septembre","Novembre","Déc
embre") document.write("Nous sommes le
"tabjrjour" "nu" "tabmoismois)   Voici
le résultat de ce script Nous sommes le date .
La méthode getDay() retourne le numéro du jour de
la semaine, 0 pour le dimanche à 6 pour samedi.
La méthode getMonth() retourne le numéro du mois,
0 pour Janvier à 11 pour Décembre. Ici, on
affiche le jour et le mois correspondant aux
indices retournés.
136
VI.1 Introduction

• JavaScript est un langage Objet
• Cette approche permet de développer des scritps
  réutilisables évolutifs et paramétrables
• Ce chapitre présente les principes généraux de la
  programmation objet

137
VI.2 Déclaration

• On utilise l'instruction new à laquelle on
  adjoint
• soit un type d'objet prédéfini (Date, Array,
  ...)
• soit une instruction qui permet de créer les
  propriétés de cet objet

138
VI.2 Déclaration Exemple
// l'objet Date est prédéfine au sein de
l'interprète var fetnatnew Date(14072003) //
Chein est un type créé de toute pièce var
mon_chiennew Chien("Milou","Fox
Terrier") function Chien(le_nom,la_race)
this.nomle_nom this.racela_race

• L'instruction Chien fait appel au mot this qui
  représente l'objet en cours (ici, mon_chien)

139
VI.2 Déclaration Exemple

• La variable mon_chien est maintenant un objet de
  type chien qui contient les propriétés nom et
  race
• Naturellement, il est possible de rajouter des
  propriétés très facilement, sans se soucier des
  questions d'indices qu'imposerait un tableau du
  type

140
VI.2 Déclaration Exemple
ltHTMLgt ltHEADgt ltTITLEgt woua woua lt/TITLEgt
ltSCRIPT LANGUAGE "JavaScript"gt function
Chien(le_nom,la_race) this.nomle_nom
this.racela_race lt/SCRIPTgt lt/HEADgt lt
BODY BGCOLOR"white"gt ltSCRIPT LANGUAGE
"JavaScript"gt var mon_chien new
Chien("Milou","Fox Terrier")
document.write(mon_chien.nom " est un
"mon_chien.race) lt/SCRIPTgt lt/BODYgt lt/HTMLgt
141
VI.3 L'utilisation des méthodes

• Lors de la création d'un objet, Il est également
  possible d'associer des méthodes à celui-ci
• La déclaration des méthodes se fait pendant la
  création de l'objet

function Chien(le_nom,la_race) this.nomle_nom
this.racela_race this.AfficherAfficherChien
function AfficherChien() alert("Ce chien
s'appelle " this.nom ".\n C'est un
"this.race".")
142
VI.3 le with

• On remarque encore l'utilisation de this qui
  représente l'objet sur lequel est appliquée la
  méthode
• Il est possible aussi de déclarer la fonction
  avec le mot with

function AfficherChien() with( this )
alert("Ce chien s'appelle " this.nom
".\nC'est un "this.race".")
143
JavaScript et les cookies

• Chapitre VIII

144
VIII.1 À quoi servent-ils ?

• Les cookies sont très utilisés, par tous les
  sites commerciaux et par de plus en plus de sites
  personnels
• La raison est simple. Un cookie permet de stocker
  de manière permanente des informations sur le
  poste du visiteur, qui pourront être récupérées
  lors des futures visites
• Voyons quelques unes des principales informations
  stockées dans les cookies
• Le nombre de visites, la date de la dernière
  visite,
• Un identifiant et un mot de passe pour une
  reconnaissance automatique du visiteur.
• Une liste de mots-clés utilisés dans les moteurs
  de recherche pour cibler les publicités à
  afficher (Exemple beaucoup de moteurs de
  recherche)
• Une liste de paramètres de préférences de
  navigation pour personnaliser la page présentée
  (Exemple Mon Yahoo !)
• Des informations à transférer d'une page à
  l'autre du site.

145
VIII.2 Comment stockerles informations ?

• Le type d'informations à stocker n'a aucune
  influence sur le code
• Un cookie est un fichier de texte qui contient
  une chaîne de caractères représentant les
  informations

146
VIII.2 Comment stockerles informations ?
function SetCookie (name, value) // récupérer
les paramètres var argvSetCookie.arguments var
argcSetCookie.arguments.length var
expires(argc gt 2) ? argv2 null // date
d'expir. var path(argc gt 3) ? argv3 null
// le chemin var domain(argc gt 4) ? argv4
null // domain name var secure(argc gt 5) ?
argv5 false // protection du
cookies document.cookiename""escape(value)
((expiresnull) ? "" ("expires"expires.to
GMTString())) ((pathnull) ? ""
("path"path)) ((domainnull) ? ""
("domain"domain)) ((securetrue) ?
"secure" "")
147
VIII.2 Comment stockerles informations ?
var MyPathnamelocation.pathname var
MyDomainMyPathname.substring(0,pathname.lastIndex
Of('/')) '/' var date_exp new
Date() date_exp.setTime(date_exp.getTime()(365
2436001000)) // Ici on définit une durée de
vie de 365 jours SetCookie("prenom","Arthur",date_
exp,MyPatname,MyDomain)
148
JavaScript et les PopUp

• Chapitre IX

149

• La valeur à stocker est associée à un nom de
  cookie. La date d'expiration permet de définir la
  longévité du cookie. Si elle est omise, le cookie
  est détruit à la fermeture du navigateur. Le path
  indique simplement d'où vient le cookie. Le nom
  de domaine permet d'identifier le cookie parmi
  tous ceux stockés sur la machine. La variable
  secure indique si l'accès au cookie est protégé.
  Donc pour stocker la valeur Arthur dans la
  variable prenom il suffit d'appeler la fonction
  comme ceci

150
8.3 Comment RECUPERER les informations ? Voyons
un cookie qui contiendrait les informations
suivantes         prenom Arthur        
nb_visite 3 Pour récupérer l'information
prenom, il faut extraire, de la chaîne de
caractères composant le cookie, le nom de la
variable soit prenom. La valeur de prenom est la
chaine de caractères située immédiatement après
et séparée par '' et par ' '. Voici le code des
fonctions nécessaires à la récupération d'une
information function getCookieVal(offset)
var endstrdocument.cookie.indexOf ("",
offset) if (endstr-1) endstrdocument.cookie.l
ength return unescape(document.cookie.substring(
offset, endstr))
151
function GetCookie (name) var
argname"" var alenarg.length var
clendocument.cookie.length var i0 while
(iltclen) var jialen if
(document.cookie.substring(i, j)arg) return
getCookieVal (j) idocument.cookie.indexOf("
",i)1 if (i0) break return null Si la
variable demandée n'est pas contenue dans le
cookie, elle est considérée comme valant null.
Pour récupérer la variable prenom, il suffit
d'appeler la fonction le_prenomGetCookie("pre
nom")
152
10 Les POPUP
10.1 C'est quoi une popup ?
Le mot popup peut être traduit par fenêtre
surgissante. L'ouverture de cette fenêtre est
déclenchée par un événement utilisateur (clic,
ouverture de site, minuterie, ...) via une seule
ligne de code javascript. Un popup est ouvert
grâce à la méthode (ou fonction) appelée sur
l'objet window. Cette fonction attend 3
paramètres window.open( page ,nom ,options )
Les trois paramètres sont des chaînes de
caractères. -         page contient l'adresse de
la page à afficher. -         nom contient le nom
du popup qui va être ouvert. Non
obligatoire. -    options est une chaîne de
caractères contenant les options de paramétrage
du popup. Non obligatoire. Les 2 derniers
paramètres ne sont pas indispensables.
153
Pour ouvrir un popup sur un lien, voici la
syntaxe HTML ltA href"javascriptpopup('popup.ht
ml')"gtOuverture popup basiquelt/Agt avec comme
déclaration la fonction popup() ltSCRIPT
language"javascript"gt function popup(page)
window.open(page) lt/SCRIPTgt
10.2 Les options d'affichage Il est possible
grâce au second paramètre d'affecter un nom au
popup ouvert. Ainsi les autres popups seront
ouverts dans le même popup. Cela évite d'envahir
l'écran du visiteur avec de multiples fenêtres.
Pour remettre le popup en premier plan, voir la
page "Aller plus loin". Sans le paramètre nom, un
nouveau popup est ouvert à chaque fois. Le
dernier paramètre contient une chaîne d'options
d'affichage. Chaque option est séparée par une
virgule (à ne pas confondre avec la syntaxe des
feuilles de style qui demande un point-virgule).
154
Voici la liste des options
155
Quelques exemples de combinaisons d'options
Position fixe en haut à gauche OuvrirPopup('popup
.html','','top10,left10')
Popup minimaliste Aucune barre de menu, non
redimensionnable, taille fixe OuvrirPopup('popup.h
tml', '', 'resizableno, locationno, width200,
height100, menubarno, statusno, scrollbarsno,
menubarno')  
Popup fullscreen Page en plein ecran (version 5
et ). Faire un ALT F4 pour s'en sortir
OuvrirPopup('popup.html','','fullscreenyes')   V
oici la fonction javascript qui ouvre un popup
pour tous ces exemples ltSCRIPT
languagejavascriptgt function OuvrirPopup(page,nom
,option) window.open(page,nom,option)
lt/SCRIPTgt  
156
10.3 Utilisation des popups
Popup à l'ouverture/Fermeture d'une page Pour
ouvrir un popup à l'ouverture d'une page, ajoutez
dans la balise ltBODYgt l'événement ltBODY
onLoad"OuvrirPopup('page.html','nom','options...'
)"gt De la même manière, pour ouvrir un popup à la
fermeture de la page, rempla