PRATIQUE DE JAVASCRIPT

Pour tendre les possibilits des pages HTML, pour les rendre plus interactives et pour effectuer certains traitements et contrles au niveau du client avant de soumettre la page web un serveur, le dveloppeur utilise des scripts. Deux langages de scripts sont trs utiliss actuellement sur le march: JavaScript(de Netscape) et VBScript(de Microsoft). Par rapport VBScript, JavaScript prsente l'avantage d'tre support par les deux navigateurs les plus connus au monde Netscape Navigator et Internet Explorer alors que VBScript n'est pas support par Netscape Navigator. En plus il est lger et orient objet. Remarque : Malgr quelques ressemblances apparente JavaScript est trs diffrent de Java. UTILISATION Les Scripts JavaScript sont intgrs dans une page web de plusieurs manires : En crivant le script entre une balise <Script> et </Script> : <Script Language="JavaScript"> <!-Ecriture Script --> <NoScript> Traitement si le navigateur n'accepte pas les scripts </NoScript> </Script> En associant le script un vnement : <NomBalise..onEvnement="Ecriture Script"> En associant le script un lien : <a href="JavaScript:Ecriture Script"></a> Remarque : Pour empcher que le script dans href ne remplace le document courant, on applique l'oprateur void, qui neutralise toute valeur ou tout effet de retour : <a href="JavaScript:void(Ecriture Script)"></a> En crivant le script dans un fichier ayant l'extension .js et en l'appelant dans la page web l'aide de l'instruction : <Script Language="JavaScript" src="FichierScript.js></Script> Remarque: Les Scripts peuvent tre placs dans le Head ou dans le Body. Dans le Head ils seront reconnus ds le chargement de la page. Un gestionnaire d'vnement est la procdure particulire attache un vnement dans une balise HTML Il est possible d'utiliser plusieurs gestionnaires d'vnements dans une mme balise CONCEPTS DE PROGRAMMATION

Insertion de commentaires

utilisation des variables

Sur une ligne : //Commentaire Sur plusieurs lignes : /*Commentaire Commentaire*/

Pour dclarer une variable : var Variable1 [=Valeur_initiale1], Variable2 [=Valeur_initiale2], Remarque : La dclaration se fait de manire implicite si une variable est utilise dans le script mais qu'elle n'a pas t dclare l'aide de var.

utilisation des tableaux (objet Array)

Dclaration: - Tableaux une dimension : Le nombre d'lments du tableau est inconnu :

1

Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript

var tableau=new Array() Le nombre d'lments du tableau est connu mais le contenu est non connu : var tableau=new Array(NombreElments) Le nombre d'lments du tableau est connu et le contenu est connu : var Tableaux=new Array(ElmentTableau1, ElmentTableau2,) ou var Tableaux=[ElmentTableau1, ElmentTableau2,] - Tableaux plusieurs dimensions : Ils sont grs comme des tableaux de tableaux une dimension var Tableau =new Array(Vide|Nombre_Elment|ListeElments) Tableau[0]=new array(Vide|Nombre_Elments|ListeElments) Tableau[1]=new array(Vide|Nombre_Elments|ListeElments) Remplissage - Tableaux une dimension : Tableau[position]=valeur ou Tableau[position]= new array(Vide|Nombre_Elments|ListeElments) - Tableaux plusieurs dimensions : Tableau[positionLigne,PositionColonne]=valeur ou Tableau[positionLigne,PositionColonne]= new array(Vide|Nombre_Elments|ListeElments) Remarque : Le premier lment du tableau commence l'indice 0 Quelques proprits - length : Retourne le nombre d'lments du tableau (Tableau.length) Quelques mthodes - join() : Regroupe tous les lments avec un caractre de sparation alatoire (Tableau.join()) - join(car) : Regroupe tous les lments avec un caractre de sparation car (Tableau.join(car)) - reverse() : Inverse l'ordre des lments contenus dans le tableau (Tableau.reverse()) - sort() : Trie le suivant l'ordre croissant (Tableau.sort())

Structures conditionnelles
if

Structures rptitives

if (condition) {Instructions} else {Instructions} switch switch(expression) { case const1: instructions break case const2: Instructions break ... default: Instructions } ? (Condition)?Instructions si condition ralise : Instructions si condition non ralise for - for (Initialisation de la boucle, Condition de rptition, Variation des compteurs de la boucle) {Instructions} - for (variable in tableau)
2

Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript

fonctions

{Instructions} - for (variable in objet) {Instructions} while while (condition) {Instructions} do {Instructions} while (condition)

Dclaration function nom_Fonction(argument1, argument2) { instructions [return valeur] } Appel L'appel se fait : A partir d'une autre fonction : NomFonction() ou Suite un vnement : <NomBalise ..onEvnement="NomFonction(.)"> ou A partir d'un lien : <a href="JavaScript:NomFonction(.)" ></a> Remarque : Pour empcher que le script dans href ne remplace le document courant, on applique l'oprateur void, qui neutralise toute valeur ou tout effet de retour : <a href="JavaScript:void(NomFonction(.))"></a> ou Si la fonction retourne une valeur, partir d'une variable : Variable=NomFonction(.) Remarque : Les variables dclares au niveau du Script sont considres comme globales. Les variables dclares dans des fonctions sont considres comme locales si l'instruction var est utilise dans leur dclaration (dclaration explicite) sinon elles sont considres comme globales.

Manipulation des chanes de caractres(objet String)

Une chane de caractres est compose d'une suite de caractres quelconques, y compris des balises HTML. Des caractres spciaux peuvent aussi tre insrs dans les chanes :\n (nouvelle ligne), \r (Entre), \t (tabulation), \f (saut de page), \b (retour arrire), \' pour une apostrophe Pour concatner deux chanes de caractres on utilise le symbole + Quelques proprits - length : Retourne la longueur d'une chane de caractre (chane.length) Quelques mthodes - toLowerCase() : Convertit une chane de caractres en minuscules(chane.toLowerCase()) - toUpperCase() : Convertit une chane de caractres en majuscules(chane.toUpperCase()) - charAt(p) : Retourne le caractre la position p (chane.charAt(p) - indexOf(Ch) : Retourne la position de ch dans une chane de caractres (Chaine1.indexOf(Chane2)) - indexOf(Ch, p ) : Retourne la position de ch dans une chane de caractres en commenant la recherche par la position p (Chaine1.indexOf(Chane2, p)) - lastIndexOf(Ch) : Retourne la position de ch dans une chane de caractres en commenant la recherche par la fin(Chaine1.lastIndexOf(Chane2)) - lastIndexOf(Ch, p ) : Retourne la position de ch dans une chane de caractres en commenant la recherche par la fin et en s'arrtant la position p (Chaine1.lastIndexOf(Chane2, p)) - substring(p1,p2) : Retourne une sous-chane allant de la position p1 la position p2-1 (chane.substring(p1,p2)) - split(sparateur) : Fractionne une chane de caractres en se basant sur le sparateur et retourne les diffrentes parties dans un tableau de chanes de caractres (Tabelau=Chane.split(sparateur)) - isNaN(lment) : Revoie true si lment est un nombre et false sinon (variable=isNaN(lment))
Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript 3

Utilisation des fonctions date et heure (objet Date)

Pour manipuler la date en cours Variable =new Date() Remarque : La date qui sera stocke dans variable est sous la forme suivante : "NomJour Mois jourMois Heure:Minutes:Secondes Anne" Pour manipuler une autre date Variable =new Date(date) date peut tre donne sous les formes : - "anne, mois, jour" - "anne, mois, jour, heures, minutes , secondes" - "NomMois JourMois , Anne Heures:Minutes:Secondes" Mthodes - getYear() : Retourne l'anne d'une date (>1900) (UneDate.getYear()) - setYear(anne) : Modifie l'anne d'une date (UneDate.setYear(anne)) - getMonth : Retourne le mois (entre 0 et 11) d'une date (UneDate.getMonth()) - setMonth(mois) : Modifie le mois d'une date (UneDate.setMonth(mois)) - getDate() : Retourne le numro du jour du mois (entre 1 et 31) d'une date (UneDate.getDate()) - setDate(jourMois) : Modifie le jour du mois d'une date (UneDate.setDate(jourMois)) - getDay() : Retourne le jour de la semaine (entre 0 et 6) d'une date (UneDate.getDay()) - setDay(jourSemaine) : Modifie le jour de semaine d'une date (UneDate.setDay(jourSemaine)) - getHours() : Retourne l'heure (entre 0 et 23) d'une date (UneDate.getHours()) - setHours(heure) : Modifie l'heure d'une date (UneDate.setHours(heure)) - getMinutes() : Retourne les minutes( entre 0 et 59) d'une date (UneDate.getMinutes()) - setMinutes(minutes) : Modifie les minutes d'une date (UneDate.setMinutes(minutes)) - getSeconds() : Retourne les secondes (entre 0 et 59) d'une date (UneDate.getSeconds()) - setSeconds(secondes) : Modifie les secondes d'une date (UneDate.setSeconds(secondes)) - getTime() : Retourne le nombre de Millisecondes coules depuis le 1 janvier 1970 00:00:00 (UneDate.getTime()) - setTime (nombreMillisecondes) : Modifie le nombre de Millisecondes coules depuis le 1 janvier 1970 00:00:00 (UneDate.setTime(nombreMillisecondes))

Utilisation des fonctions mathmatiques (objet Math)

Quelques proprits - PI : constante PI (Math.PI) Quelques mthodes - abs(nombre) : Retourne la valeur absolue d'un nombre (Math.abs(nombre)) - round(nombre) : Arrondit le nombre l'entier le plus proche (Math.round(nombre)) - max(nombre1,nombre2) : Renvoie le plus grand des deux nombres (Math.max(nombre1, nombre2)) - min(nombre1,nombre2) : Renvoie le plus petit des deux nombres (Math.min(nombre1, nombre2)) - pow(nombre1,nombre2) : Renvoie le rsultat de nombre1 puissance nombre2 (Math.pow(nombre1, nombre2)) - sqrt(nombre) : Retourne la racine carre de nombre (Math.sqrt(nombre)) - parseInt(chane) : Evalue une chane de caractre en un nombre entier (parseInt(chane)) - parseFloat(chane) : Evalue une chane de caractre en un nombre virgule flottante (parseFloat(Chane)) - eval(chane) : Evalue une chane de caractre en un nombre (eval(Chane)) - random() : Retourne un nombre alatoire entre 0 et 1 (1 non compris) (variable=Math.random())

OBJETS DU NAVIGATEUR

Hirarchie
anchors Text

Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript

frames applets TextArea

document Window

images

Hidden

forms location links history

Button

Reset

Submit

plugins navigator

Radio

CheckBox

mimeTypes

Select

Pour accder un objet, il faut se rfrer sa position dans la hirarchie. Depuis le sommet, il faut suivre l'arborescence jusqu' atteindre l'objet souhait. Pour lire ou modifier une proprit : hirarchie.objet.proprit Pour appeler une mthode : hirarchie.objet.mthode() Exemples : Soit une zone de texte txt1 qui se trouve dans le formulaire form1 qui se trouve dans un document page1.htm ne contenant aucun frame. Cette zone de texte est identifie par : window.document.form1.txt1 qu'on peut galement noter form1.txt1 Soit une zone de texte txt1 qui se trouve dans le formulaire form1 qui se trouve dans un cadre (frame) frame1 dans un document page1.htm. Cette zone de texte est identifie partir d'un autre cadre du mme document par : parent.frame1.form1.txt1 Pour modifier le contenu d'une zone de texte, on utilise sa proprit value : form1.txt1.value=valeur Soit une image d'un document HTML page1.htm dont l'attribut name est img1. Pour faire rfrence cette image : window.document.images["img1"] ou document.images["img1"] Pour modifier la proprit src de cette image : document.images["img1"].src="cheminImage" Remarque : L'objet window reprsente la fentre du navigateur et regroupe les objets contenus dans cette fentre. Il est particulirement utilis pour la cration des fentres volantes (popup). Pour des raisons pdagogiques il sera trait en dtail aprs l'objet document.

Objet document

Reprsente le document en cours. Il offre un ensemble de proprits, de mthodes et d'objets permettant la manipulation du document et de son contenu. Quelques proprits - bgColor : Retourne ou affecte une couleur de fond au document - fgColor : Retourne ou affecte une couleur de texte au document - linkColor : Retourne ou affecte une couleur pour les liens hypertextes - vlinkColor : Retourne ou affecte une couleur pour les liens hypertextes visits - alinkColor : Retourne ou affecte une couleur pour les liens hypertextes actifs - title : Retourne ou affecte un titre au document - location : Retourne ou affecte l'URL du document - cookie : Chane de caractres refltant le contenu du fichier cookie.txt - lastModified : Retourne la date de dernire modification du document - images[indice] ou images["nomImage"] : Reprsente un tableau contenant toutes les images du document. Il est possible ainsi d'accder n'importe quelle image contenue dans le document, de consulter ou de modifier ses caractristiques.
Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript 5

anchors[indice] ou anchors["nomAncre"] : Reprsente un tableau contenant toutes les ancres du document. Il est possible ainsi d'accder n'importe quelle ancre contenue dans le document, de consulter ou de modifier ses caractristiques. - links[indice] ou links["nomLien"] : Reprsente un tableau contenant tous les liens (link) du document. Il est possible ainsi d'accder n'importe quelle lien contenu dans le document, de consulter ou de modifier ses caractristiques. - forms[indice] ou forms["nomFormulaire"] : Reprsente un tableau contenant tous les formulaires du document. Il est possible ainsi d'accder n'importe quel formulaire contenu dans le document, de consulter ou de modifier ses caractristiques. - applets[indice] ou applets["nomApplet"] : Reprsente un tableau contenant toutes les applets du document. Il est possible ainsi d'accder n'importe quelle applet contenu dans le document, de consulter ou de modifier ses caractristiques. Remarque : Une applet est un programme crit et compil par un langage de programmation qu'on a integr au niveau du document. Quelques mthodes - write("Texte") : Ecrit Texte sur le document. Texte peut tre un simple message, des balises HTML pour la construction des lments du document, des variablesou une concatnation de l'ensemble de ces lments (crire dans le flux d'un document) - writeln("Texte") : fait le mme travail que write mais retourne la ligne la fin. - -

Objet form

Reprsente un formulaire contenu dans le document. Pour faire rfrence un formulaire dans un document : document.forms[index] ou document.forms["NomForm"] ou NomForm Quelques proprits : - action : Spcifie l'action excuter en cas d'appel de submit ou d'activation d'un bouton submit associ au formulaire - name : Dfinit le nom du formulaire - target : Dfinit l'emplacement o sera affich l'lment qui sera ouvert suite l'excution de l'action du formulaire - method : Spcifie la mthode utilise lors du transfert d'information depuis un client vers un serveur Quelques mthodes - reset() : rinitialise le formulaire - submit() : excute l'action associe au formulaire (proprit action) Quelques proprits pour la manipulation des objets : - Objet text : value : Dfinit et retourne la valeur contenue dans un champ de type text - champ select : proprit selectedIndex, value et text selectedIndex : Retourne l'index de l'lment slectionn dans un champ select value : retourne la valeur de l'option slectionne dans un champ select text : retourne le texte contenu entre <option> et </option> pour l'lment slectionn - champ radio et checkbox : checked : Dtermine ou retourne si l'lment a t coch ou non (true ou false) value : retourne la valeur du bouton ou de la case slectionne Remarque : pour identifier les boutons radio ou cases cocher appartenant au mme groupe et donc ayant la mme proprit name, on leur fait rfrence de la manire suivante : NomGroupe[ordreDansleGroupe].proprit

Objet window

Remarque : le mot cl self dsigne la fentre window (fentre principale). window et self dsignent le mme objet et peuvent donc tre utiliss indiffremment. Quelques proprits - name : Attribue et retourne le nom de la fentre (window.name="Nom") Remarque : Un nom de fentre peut tre utilis pour dsigner le fentre comme cible pour un lien hypertexte <a href=" " target="NameFentre"> Puisqu'un nom de fentre reste conserv aussi longtemps que la fentre est ouverte, il peut tre utilis pour transmettre certaines valeurs d'une feuille une autre.
Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript 6

defaultstatus : Affecte et retourne le texte par dfaut qui sera affich dans la barre d'tat du navigateur - status : Affecte et retourne le contenu actuel de la barre d'tat. exemple : <html> <head><script language="javascript">window.defaultStatus="Texte Barre d'tat" </script></head> <body> <input type="text" name="txtNom" onmouseover="window.status='Saisir le nom ici'"> </body> </html> Au dmarrage, la barre d'tat contient le texte "Texte Barre d'tat". En faisant passer la souris sur la zone de texte txtNom, le texte "Saisir le nom ici" s'affiche sur la barre d'tat mais une fois le pointeur de la souris hors de la zone de texte, la barre d'tat reprend le texte "Texte Barre d'tat" - closed : Renvoie true si une fentre qui vient d'tre ouverte a t referme (Fentre.closed) - location : Retourne l'URL de la fentre en cours(window.location) - length : Retourne le nombre de frames dans la fentre en cours (window.length) Quelques mthodes - alert('message') : Affiche une bote de dialogue contenant le message (alert('message') ou alert('message' + variable)) - prompt("Message",Valeur par dfaut) : Affiche une boite de dialogue avec un champ de saisie, un bouton "Ok" et un bouton "Annuler". Si l'utilisateur a appuy sur le bouton "Annuler", cette mthode retourne la valeur null. Si l'utilisateur n'a rien saisi et qu'il a appuy sur le bouton "Ok", la mthode retourne le vide ("") sinon elle retourne la valeur saisie par l'utilisateur (variable=prompt("Message",Valeur par dfaut) - confirm("Message") : Ouvre une boite de dialogue avec deux boutons pour "OK" et "Annuler". Si l'utilisateur a appuy sur Ok, la mthode retourne true sinon elle retourne falseJudicieux pour forcer l'utilisateur prendre une dcision qui sera traite dans la suite du programme. Attend comme paramtre un texte interrogatif pour la dcision oui/non. Renvoie comme rsultat la dcision de l'utilisateur. - open("Fichier Charger", "Nom Fentre (proprit name)"[,"CaractristiqueFentre1=Valeur, CaractristiqueFentre2=Valeur,"]) : Ouvre une nouvelle fentre, en lui affectant et ventuellement en dfinisant ses caractristiques d'affichage : width=valeur en pixel : Largeur de la fentre height=Valeur en pixel : Hauteur de la fentre top=Valeur en pixel : Position verticale du coin suprieur gauche de la nouvelle fentre left=Valeur en pixel : Position horizontale du coin suprieur gauche de la nouvelle fentre location=yes|no : Indique si la barre d'adresse s'affichera ou non sur la nouvelle fentre (par dfaut no) menubar=yes|no : Indique si la barre de menus s'affichera ou non sur la nouvelle fentre (par dfaut no) toolbar=yes|no : Indique si la barre d'outils s'affichera ou non sur la nouvelle fentre (par dfaut no) status=yes|no : Indique si la barre d'tat s'affichera ou non sur la nouvelle fentre (par dfaut no) scrollbars=yes|no : Indique si les barres d'adresse s'affichera ou non sur la nouvelle fentre (par dfaut no) resizable=yes|no : Indique si l'utilisateur a oui ou non le droit de redimensionner la nouvelle fentre (par dfaut no) dependent= yes|no : Indique si la nouvelle fentre sera ferme si sa fentre parent a t ferme (celle qui a demand son ouverture) Remarque : o Pour faire rfrence une fentre, il faut qu'au moment de l'ouverture leui attribuer une variable de rfrence : Variable=window.open("fichier","NomFentre"[,"caractristiquesFentre"]) Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript 7

Objet history

Les propits et mthdes de cette nouvelle fentre pourront tre appels de la manire suivante : Variable.proprit ou Variable.mthode() o Pour accder de la nouvelle fentre la fentre appllante, aux objets, aux proprits et aux mthodes de cette fentre appellante, il faut utiliser le mot cl opener la place de window. close() : Ferme une fentre (fentre.close()) moveTo(valeurLeft, ValeurTop) : dplace une fentre en positionnant la proprit left valeurLeft et la proprit top ValeurTop (fentre. moveTo(valeurLeft, ValeurTop)) moveBy(valeurLeft, ValeurTop) : Dplace une fentre d'autant de valeurLeft par rapport sa posisiton actuelle et de valeurTop par rapport sa position verticale actuelle (valeurLeft et ValeurTop peuvent tre positives ou ngatives) resizeTo(valeurLargeur,valeurHauteur) : Modifie la taille de la fentre en affectant valeurLargeur la largeur et valeurHauteur la hauteur resizeBy(valeurLargeur,valeurHauteur) : redimentionne la fntre en modifiant sa largeur de valeurLargeur sur la droite et de valeurHauteur sur le bas (valeurLargeur et ValeurHauteur peuvent tre positives ou ngatives) print() : Imprime le contenu d'une page (fentre.print()) focus() :Rend une fentre active (fentre.focus()) stop() : Correspond un cliquement sur le bouton "Stop" du navigateur. Le chargement d'une page en est interrompu. home() : affiche la page d'acceuil du navigateur (correspond un click sut le bouton Home de la barre d'outils du navigateur) forward() : affiche la page suivante (correspond un click sut le bouton Suivant de la barre d'outils du navigateur) back() : affiche la page prcdente (correspond un click sut le bouton Prcdent de la barre d'outils du navigateur) setTimeout("fonction()|Instructions",t) : Permet de dclencher une fonction ou des instructions JavaScript aprs un temps t en millisecondes (variableCompteur=setTimeout("fonction()|Instructions",t)) clearTimeout(variableCompteur) : Arrte l'xcution de la fonction ou des instructions JavaScript associs setTimeout avant l'expiration du dlai setInterval("fonction()|Instructions",t) : Excute une fonction ou des instructions JavaScript toutes les t millisecondes (variableCompteur=setInterval("fonction()|Instructions",t)) clearInterval(variableCompteur) : Arrte l'xcution de la fonction ou des instructions JavaScript associs setInterval avant l'expiration du dlai
o

Offre les proprits et mthodes ncessaires l'accs la liste d'historique stocke par le navigateur. Quelques mthodes - back() : Charge le document prcdent - forward() : Charge le document suivant - go(p): Charge le document se trouvant la position : position courante + p (p>0 ou p<0)

Objet navigator

Quelques proprits - navigator.appCodeName : retourne un code identifiant le navigateur mais IE et Nestscape ont le mme nom de code - navigator.appName : nom du navigateur (Netscape ou Microsoft Internet Explorer) - navigator.appVersion : sous la forme (NumroVersion(Sytme d'exploitation, codeNationalit de la version)

Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript

LES STYLES ET JAVASCRIPT Les proprits de styles en JavaScript sont dduites de celles utilises en CSS en respectant la rgle suivante : pour chaque proprit compose de deux mots spars par un tiret, le tiret va disparatre et la premire lettre du deuxime mot sera en majuscule.

Pour modifier le style d'un lment

Pour modifier une rgle de style partir d'une feuille de style

NomObjet.style.propritStyle=valeur ou Id.style.propritStyle=valeur

Une rgle de style peut tre rcupre partir d'une feuille de styles : variable=document.styleSheets[position feuille Style].rules[position rgle] Ensuite il est possible de modifier le style pour cette rgle : variable.style.propritstyle=valeur Remarque : les feuilles de styles (incorpores ou externes) sont classes par ordre. La premire a l'indice 0. De mme les rgles de style dfinies dans une feuille de style donne commencent par l'indice 0.

Pour ajouter une rgle de style une feuille de style

Pour supprimer une rgle de style d'une feuille de style Pour dsactiver/activer une feuille de style

document.styleSheets[position feuille Style].addRule("ElementConcern","Proprit style1: Valeur;Proprit Style2:Valeur") document.styleSheets[position feuille Style].removeRule(Position rgle) document.styleSheets[position feuille Style].disabled=true|false document.styleSheets[position feuille Style].href="Chemin feuille de style.css"

Pour modifier la source d'une feuille de style

LES COOKIES

Les cookies sont des fichiers que les serveurs web crent sur les disques durs de leurs clients (visiteurs du site web) pour y mettre certaines informations et variables qu'ils pourront rcuprer (les serveurs) la prochaine visite du mme client. Ces informations peuvent tre cre, lues et modifies dans JavaScript l'aide de la proprit cookie de l'objet document. Il est possible d'avoir plusieurs cookies pour un seul site. Chaque cookie se compose d'un ensemble de champs :

Crer un cookie :

document.cookie="NomCookie=ValeurCookie[;expires=DateExpiration;path=Chemin;domain=Domaine Cookie;secure]" - NomCookie : Nom attribuer au cookies (obligatoire) - valeurCookie : Donnes stocker dans le cookie - DateExpiration : Date partir de laquelle le cookie sera dsactiv et ne sera plus charg par le serveur web. Si aucune date d'expiration n'a t spcifie, le cookie est supprim la fermeture du navigateur et n'est pas enregistr. De mme si on spcifie une date d'expiration qui est dj passe. Remarque : La date d'expiration est sous le format : Jour abrg,JJ-MM-AA HH:MM:SS GMT - Chemin : Indique le chemin pour lequel le cookie sera reconnu. Par dfaut le cookie est reconnu sur le site partir du dossier o il a t cr. Si on souhaite rendre un cookie visible sur tous le site il suffit d'attribuer "/" path - DomaineCookie : Site web concern par le cookie, les autres sites devant l'ignorer. Par dfaut il s'agit du site qui a crit le cookie - secure : si le mot cl secure est indiqu dans un cookie, le cookie ne sera transmis que si la connexion vers le serveur est scurise (protocole HTTPS). Remarque : Un mme "client" peut stocker un maximum de 300 cookies 4000 octets chacun, dont 20 maximum pour un mme serveur. L'emplacement des cookies dpend des navigateurs et des systmes d'exploitation.

Modifier un cookie :
Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript 9

La rafectation de valeurs un cookie dont le nom a t dj enregistr le modifie. document.cookie="NomCookie=ValeurCookie[;expires=DateExpiration;path=Chemin;domain=DomaineCookie; secure]" Remarque : Si au cours de la modification, la date d'expiration n'a pas t spcifie, le cookie est supprim

Lire un cookie :

La proprit document.cookie stocke des informations sur tous les cookies crs. Pour accder la valeur d'un cookie, il faut la rechercher dans la chaine document.cookie sachant que deux cookie ne peuvent pas porter le mme nom. Remarque : Pour ne pas avoir crire le programme de cration et de lecture de cookies, il est prfrable de crer des fonctions utiliser au besoin : Exemple : Pour la lecture d'un cookie function lire_cookie(nomCookie) { var ch1=document.cookie var lenCh1=ch1.length var ch2=nomCookie+"=" var lenCh2=ch2.length var i=0 while (i<lenCh1) { var j=i+lenCh2 if (ch1.substring(i,j)==ch2) { var k=ch1.indexOf (";",j) if (k==-1) { k=lenCh1 } return ch1.substring(j, k) } i=ch1.indexOf(" ",i)+1 if (i==0) { break} } return null } Remarque : A partir du menu Outils/Options/Confidentialit de Internet Explorer, il est possible de dterminer le comportement que le client aura avec les cookies (bloquer, autoriser, demander l'utilisateur). La configuration choisie sera stocke dansla base de registre pour tre charg chaque dmarrage de la machine.

Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de JavaScript

10