CourJavaScript

8/3/2019 CourJavaScript

1/76

05/02/12 COUR FAIT PAR BOUAFIA REHABI 1

JavaScript


2/76


Histoire de Javascript

Le langage JavaScripta t cr en 1995 par Brendan Eichpour le compte de la Netscape Communications CorporationEn mars 1996, Netscape met en oeuvre le moteur JavaScript

dans son navigateur Web Netscape Navigator 2.0.

Microsoft ragit alors en dveloppant JScript, qu'il inclut ensuite

dans Internet Explorer 3.0 en aot 1996 pour la sortie de sonnavigateur.

Netscape soumet alors JavaScript Ecma International pourstandardisation Enfin, l'organisme ECMA, (European

Computer Manufactures Association).dcide de crer une norme du noyau de ces langages quiserait accepte par tous .


3/76


JavaScript est un langage de programmation de scriptsorient objet dont la syntaxe est base sur celle du Java ,Cet C++.

IL est principalement utilis dans les pages web interactivesLes programmes Javascript permettent de rendre

dynamique un site internet dvelopp par le langageHTML.

Du code JavaScript peut tre intgr directement au sein despages Web, pour y tre excut sur le poste client. C'estalors le navigateur Web qui prend en charge l'excution deces programmes appels scripts.

Gnralement, JavaScript sert contrler les donnes saisiesdans des formulaires HTML, ou interagir avec le documentHTML via l'interface Document Object Model, fournie par lenavigateur (on parle alors parfois de HTML dynamique ouDHTML).


4/76


Caractristiques de javaScriptSes principales caractristiques sont :

JavaScript est un langage de programmation structurequi concourt enrichir le HTML. Le code JavaScript est intgr compltement dans le

code HTML, et interprt par le navigateur client (quireoit la page). La possibilit d'inclure des programmesdans les pages HTML et de les excuter directement surle poste client , car elle permet dcharger le serveur de cetravail et ... d'viter les attentes des rponses auxrequtes adresses via le Rseau.

Il ne peut pas tre excut indpendamment, ce qui lelimite comme langage de programmation.

javaScript contient des gestionnaires d'vnements : ilreconnat et ragit aux demandes de l'utilisateur, commeun clic de la souris, une validation de formulaire, etc...

javaScript est diffrent de Java qui est un langagecompltement autonome du langage HTML


5/76


HTML et JavaScript

la page HTML devra TOUJOURS contenir lesdeux balises spcifiques et indispensables

Le code JavaScript sintgre de deuxmanire avec le code HTML

1. Insertion directe dans le code HTML

Le code JavaScript s'insre le plus souvent dans la pageHTML elle mme.C'est la mthode la plus simple et la plus frquemment

utilise par les dveloppeurs de sites Internet.

2. Insertion comme un module externe

........................


6/76


1. Insertion dans une page HTML

Il existe 2 manires d'insrer du code JavaScriptdans une page HTML

1.1 Insertion pour excution directe

Le code s'excute automatiquementlors du chargement de la page HTML

dans le navigateur en mme temps que

le contenu de la page HTML

s'affiche l'cran.

Le code JavaScript est plac

dans le corps mme de la page HTML,

entre les balises .......... Et.........

.....

alert(bonjour);


7/76


1.2 Insertion et excution vnementielle

Le code javascript est d'abord lu parle

navigateur, stock en mmoire, pour nes'excuter que sur demande, lors du

dclenchement d un vnement. Le code JavaScript est plac dans le

corps mme de la page HTML, entreles balises .......... et .........

Le code s'excutera seulement lorsd'un vnement gnr parintervention de l'utilisateur.

Il faut crire le code correspondant cet vnement dans le corps du

document HTML.

.......... ..........

function auRevoir ()function auRevoir ()

{ alert( Au{ alert( Au

revoir);}revoir);}

Exccution diffreExccution diffre


8/76


2. Insertion par appel de module

externe

Il est possible d'utiliser des fichiers externes pour les programmesJavascript. On peut ainsi stocker les scripts

dans des fichiers distincts (avec l'extension .js) et les appeler partird'un fichier Html. Le concepteur peut de

cette manire se constituer une bibliothque de script et les appeler la manire des #include du C ou C++. La

balise devient


9/76


Entre et sortie de donnes avec JavaScript

3 types de boites de messages peuvent tre affichs enutilisant Javascript : Alerte, Confirmation et Invite

Mthode alert() sert afficher lutilisateur des informations simples de type texte.

Une fois que ce dernier a lu le message, il doit cliquer sur OK pourfaire disparatre la bote

Mthode confirm() permet lutilisateur de choisir entre les boutons OK et Annuler.

Mthode prompt()

La mthode prompt() permet lutilisateur de taper son propremessage en rponse la question pose

La mthode document.write permet d crire du codeHTML dans la page WEB


10/76


Entre et sortie de donnes avec

JavaScript une page simple Bonjour alert('bonjour'); document.write ( prompt('quel est votre nom ?','Indiquer votre nom ici') );

confirm('quel bouton allez-vous choisir ?');


11/76


La structure dun script en

JavaScript

Rgles gnralesL'insertion des espaces peut s'effectu n'importe o dans le

script Chaque commande doit tre termine par un point-

virgule (;).

Un nombre virgule est spar par un point (.) et non par unevirgule

Le langage Javascript y est sensible la casse

Il existe deux mthodes permettantd'intgrer des commentaires vosscripts.

Placer un double slash (//) devant le texte '


12/76


Les variables (1)

Dclaration et affectation

Le mot-cl var permet de dclarer

une ou plusieurs variables.

Aprs la dclaration de la variable, il est

possible de lui affecter une valeur par

l'intermdiaire du signe d'galit (=).

Si une valeur est affecte une

variable sans que cette dernire nesoit dclare, alors Javascript la

dclare automatiquement.

//Dclaration de i, dej et dek.var i, j, k;

//Affectation de i.i = 1;//Dclaration et affectationdeprix.var prix = 0;

//Dclaration et affectationde caracterevar caractere = ["a", "b", "c"];


13/76


Les variables (2)

Dclaration et affectation

La lecture d'une variable non dclare provoque une erreur

Une variable correctement dclare mais dont aucune valeurn'est affecte, est indfinie (undefined).

La porte les variables peuvent tre globales ou locales.

Une variable globale est dclare en dbut de script et estaccessible n'importe quel endroit du programme.

Une variable locale est dclare l'intrieur d'une fonction etn'est utilisable que dans la fonction elle-mme.


14/76


Les variables (3)

Contraintes concernant les noms de variables Les noms de variables ne peuvent contenir que des

lettres, chiffres, ou le caractre "_" (underscore) Mon_Prenom est un nom valide

Les caractres spciaux et accentus sont interdits (, ,, , etc..) Mon_Prnom n'est pas un nom valide. Il y a un caractre

accentu.

Les majuscules et les minuscules ont leur importance. MonPrenom est diffrent de Monprenom.

Un nom de variable ne peut contenir d'espaces. Mon Prenom n'est pas un nom de variable correct. Il y a un

espace.

Les mots rservs JavaScript ne peuvent tre utiliss

comme noms de variable comme var , function ,.


15/76


Les variables (4)

Le type dune variable dpend de la valeur stocke danscette variable. Pas de dclaration de type. Exemple

var maVariable = Philippe ;maVariable =10;

trois principaux types de valeurs String Number: 10^-308 >nombre < 10^308

Les nombres entiers les nombres dcimaux en virgule flottant

3 valeurs spciales : Positive Infinity ou +Infinity (valeur infini positive) Negative Infinity ou Infinity (valeur infinie ngative) Nan (Not a Number) habituellement gnre comme rsultat

dune opration mathamatique incohrente

Boolean deux valeurs littrales : true (vrai) et false (faux).


16/76


Valeurs spciales

JavaScript inclut aussi deux types de

donnes spciaux :

Null : possde une seule valeur, null, qui signifielabsence de donnes dans une variable

Undefined : possde une seule valeur, undifined.Une variable dont le contenu nest pas clair car elle

na jamais stock de valeur, pas mme null est ditenon dfinie (undifined).


17/76


LES OPERATEURS

Qu'est-ce qu'un oprateur?Les oprateurs sont des symboles qui permettent

de manipuler des variables, c'est--dire effectuer

des oprations, les valuer, ...

On distingue plusieurs types d'oprateurs:

les oprateurs de calcul

les oprateurs d'assignation

les oprateurs d'incrmentation les oprateurs de comparaison

les oprateurs logiques


18/76


Les oprateurs de calcul

Les oprateurs de calcul permettent de modifier

mathmatiquement la valeur d'une variable


19/76


Les oprateurs d'assignation

Ces oprateurs permettent de simplifier des oprations tellesque ajouter une valeur dans une variable et stocker lersultat dans la variable. Une telle oprations s'criraithabituellement de la faon suivante par exemple:x=x+2Avec les oprateurs d'assignation il est possible d'crirecette opration sous la forme suivante:x+=2

Ainsi, si la valeur de x tait 7 avant opration, elle sera de9 aprs...


20/76


Les oprateurs d'incrmentation

Ce type d'oprateur permet de facilement augmenter ou

diminuer d'une unit une variable. Ces oprateurs sont

trs utiles pour des structures telles que des boucles, qui

ont besoin d'un compteur (variable qui augmente de un en

un).

Un oprateur de typex++ permet de remplacer des

notations lourdes telles quex=x+1 ou bienx+=1


21/76


Les oprateurs de comparaison


22/76


Les oprateurs logiques (boolens)

Ce type d'oprateur permet de vrifier si plusieurs conditions

sont vraies ou fausses


23/76


structure conditionnelle

Qu'est-ce qu'une structure conditionnelle?

On appelle structure conditionnelle les instructions qui

permettent de tester si une condition est vraie ou non, ce

qui permet de donner de l'interactivit vos scripts par

exemple.


24/76


L'instruction if

L'instruction if est la structure de test la plus basique, on laretrouve dans tous les langages (avec une syntaxediffrente...). Elle permet d'excuter une srie d'instructionsi jamais une condition est ralise.

La syntaxe de cette expression est la suivante:if (condition ralis) {liste d'instructions}


25/76


Remarques

la condition doit tre entre des parenthses

il est possible de dfinir plusieurs conditions remplir avecles oprateurs ET et OU (&& et ||)

par exemple:

if ((condition1)&&(condition2)) teste si les deux conditionssont vraies

if ((condition1)||(condition2)) excutera les instructions si

l'une ou l'autre des deux conditions est vraie

s'il n'y a qu'une instruction, les accolades ne sont pasncessaires...


26/76


L'instruction if ... else

L'instruction ifdans sa forme basique ne permet de testerqu'une condition, or la plupart du temps on aimeraitpouvoir choisir les instructions excuteren cas de nonralisation de la condition...

L'expression if ... else permet d'excuter une autre sried'instruction en cas de non-ralisation de la condition.

La syntaxe de cette expression est la suivante:if (condition ralis) {liste d'instructions

}else {autre srie d'instructions}


27/76


Remarques

Il est possible de faire un test avec une structure beaucoup

moins lourde grce la structure suivante:

(condition) ?instruction si vrai: instruction si faux

la condition doit tre entre des parenthses

Lorsque la condition est vraie, l'instruction de gauche est

excute

Lorsque la condition est fausse, l'instruction de droite est

excute


28/76


Les boucles

Les boucles sont des structures qui permettent d'excuter

plusieurs fois la mme srie d'instructions jusqu' ce

qu'une condition ne soit plus ralise...

La faon la plus commune de faire une boucle, est de

crer un compteur (une variable qui s'incrmente, c'est--dire qui augmente de 1 chaque tour de boucle) et de

faire arrter la boucle lorsque le compteur dpasse une

certaine valeur.


29/76


La boucle for

L'instruction forpermet d'excuter plusieurs fois la mmesrie d'instructions: c'est une boucle!

Dans sa syntaxe, il suffit de prciser le nom de la variablequi sert de compteur (et ventuellement sa valeur de

dpart, la condition sur la variable pour laquelle la boucles'arrte (basiquement une condition qui teste si la valeurdu compteur dpasse une limite) et enfin une instructionqui incrmente (ou dcrmente) le compteur.

La syntaxe de cette expression est la suivante:

for (compteur; condition; modification du compteur) {liste d'instructions}


30/76


Exemple

for (i=1; i


31/76


L'instruction while

L'instruction while reprsente un autre moyen d'excuterplusieurs fois la mme srie d'instructions.

La syntaxe de cette expression est la suivante:while (condition ralise) {

liste d'instructions}

Cette instruction excute la liste d'instructions tant que(while est un mot anglais qui signifie tant que) la conditionest ralise.


32/76


Saut inconditionnel

Il peut tre ncessaire de faire sauter la boucle une ouplusieurs valeurs sans pour autant mettre fin celle-ci.

La syntaxe de cette expression est "continue;" (cette

instruction se place dans une boucle!), on l'associegnralement une structure conditionnelle, sinon leslignes situes entre cette instruction et la fin de la boucleseraient obsoltes.


33/76


Exemple

Imaginons que l'on veuille imprimer pour x allant de 1 10 lavaleur de 1/(x-7) ... il est vident que pour x=7 il y aura uneerreur. Heureusement, grce l'instruction continue il estpossible de traiter cette valeur part puis de continuer laboucle!

x=1while (x


34/76


Attention Erreurrrrrr

Il y avait une erreur dans ce script... peut-tre ne l'avez-vouspas vue:Lorsque x est gal 7, le compteur ne s'incrmente plus, ilreste constamment la valeur 7, il aurait fallu crire:x=1

while (x


35/76


Arrt inconditionnelA l'inverse, il peut tre voulu d'arrter prmaturment la

boucle, pour une autre conditon que celle prcis dansl'en-tte de la boucle. L'instruction breakpermet d'arrter

une boucle (forou bien while). Il s'agit, tout commecontinue, de l'associer une structure conditionnelle,sans laquelle la boucle ne ferait jamais plus d'un tour!

Dans l'exemple de tout l'heure, par exemple si l'on nesavait pas quel moment le dnominateur (x-7) s'annule

(bon...OK...pour des quations plus compliques parexemple) il serait possible de faire arrter la boucle en casd'annulation du dnominateur, pour viter une division parzro!for (x=1; x


36/76


Les fonctions

On appelle fonction un sous-programme qui permet

d'effectuer un ensemble d'instruction par simple appel de

la fonction dans le corps du programme principal.

Javascript contient des fonctions prdfinies qui peuvent

s'appliquer pour un ou plusieurs types d'objets

spcifiques, on appelle ces fonctions des mthodes.


37/76


La dclaration d'une fonction

Avant d'tre utilise, une fonction doit tre dfinie car pourl'appeler dans le corps du programme il faut que lenavigateur la connaisse, c'est--dire qu'il connaisse sonnom, ses arguments et les instructions qu'elle contient. Ladfinition d'une fonction s'appelle "dclaration". Ladclaration d'une fonction se fait grce au mot cl function

selon la syntaxe suivante:function Nom_De_La_Fonction(argument1, argument2, ...) {

liste d'instructions}

Pour excuter une fonction, il suffit de faire appel elle en

crivant son nom (une fois de plus en respectant la casse)suivie d'une parenthse ouverte (ventuellement desarguments) puis d'une parenthse ferme:

Nom_De_La_Fonction()


38/76


Exemple

function ma_fonction(param1, param2) { ..

.. }

function mon_autre_fonction() { .

... }Le corps des fonctions et instructions est dlimit par "{" et

"}" dans lequel on place la dclaration des variableslocales, propres la fonction, ainsi que l'ensemble destraitements.

Une fonction aura dans son corps une ou plusieursinstructions return qui permet de renvoyer une valeur ouun objet. L'instruction return n'est pas obligatoire; on aalors affaire une instruction qui ne renvoie pas devaleur.


39/76


Le mot-cl this

Lorsque vous fates appel une fonction partir d'un objet,

par exemple un formulaire, le mot cl this fait rfrence

l'objet en cours et vous vite d'avoir dfinir l'objet en

tapant window.objet1.objet2... ainsi lorsque l'on passe

l'objet en cours en paramtre d'une fonction, il suffit detapernom_de_la_fonction(this) pour pouvoir manipuler

cet objet partir de la fonction.

Pour manipuler les proprits de l'objet il suffira de taper

this.propriete (opropriete reprsente bien sr le nom dela proprit).


40/76


Les oprations sur les chanes

La concatnation Var chaine = bonjour + FI3/FCD1 ;

Dterminer la longueur dune chane Var ch1 = bonjour ; Var longueur = ch1.length;

Identifier le nime caractre dune chane Var ch1 = Rebonjour ! ; Var carac = ch1.charAt(2);

Extraction dune partie de la chane Var dateDuJour = 04/04/03 Var mois = datteDuJour.substring(3, 5);

3: est lindice du premier caractre de la sou-chane extraire

5 : indice du dernier caractre prendre en considration ;ce caractre ne fera pas partie de la sous-chane extraire


41/76


Les fonctions prdfinies (1)

eval Cette fonction excute un code Javascript partir

d'une chane de caractres.

...function evaluation() {

document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }...Saisissez une expression mathmatique : ...


42/76


Les fonctions prdfinies (2) isFinite

Dtermine si le parametre est un nombre fini.Renvoie false si ce n'est pas un nombre ou

l'infini positif ou infini ngatif.

isNaN dtermine si le parametre nest pas un nombre

(NaN : Not a Number).

isFinite(240) //retourne true

isFinite("Un nombre") //retournefalse

isNaN("un nombre")//retourne trueisNaN(20) //retournefalse

Les fonctions prdfinies (3)


43/76


Les fonctions prdfinies (3) parseFloat

analyse une chane de caractres et retourne

un nombre dcimal. Si l'argument valu n'est pas un nombre,

renvoie NaN(Not a Number).

parseInt analyse une chane de caractres et retourne

un nombre entier de la base spcifie.

La base peut prendre les valeurs 16

(hexadcimal) 10(dcimal), 8(octal), 2(binaire).

var numero="125";var nombre=parseFloat(numero); //retourne lenombre 125

var prix=30.75;var arrondi = parseInt(prix, 10);//retourne 30


44/76


Les fonctions prdfinies (4) Number

convertit l'objet spcifi en valeur numrique

String convertit l'objet spcifi en chane de caractres

Escape retourne la valeur hexadcimale partir d'une chane decaractre code en ISO-Latin-1.

r jour = new Date("December 17, 1995 03:24:00");//converit la date en milliseco(Number(jour));

jour = new Date(430054663215);//Convertit le nombre en date Mois jour,Annee etc. alert (String(jour));

escape("!&") //retourne %21%26%

L Obj t (1)


45/76


Les Objets (1) Les objets de JavaScript, sont soit des entits pr dfinies du

langage, soit crs par le programmeur.

Par exemple, le navigateur est un objet qui s'appelle"navigator".

La fentre du navigateur se nomme "window" La page HTML est un autre objet, que l'on appelle

"document".

Un formulaire l'intrieur d'un "document", est aussi un objet. Un lien hypertexte dans une page HTML, est encore un autre

objet. Il s'appelle "link". etc... Les objets javascript peuvent ragir des "Evnements".

Tous les navigateurs ne supportent pas les mmes objets

Accs aux proprits dun objet voiture.couleur.value voiture.couleur.value = verte


46/76


Les objets (2)

Loprateur New L'oprateur new est utilis pour crer une

nouvelle instance ou un nouveau type d'objet

dfini par l'utilisateur ou de l'un des typesd'objets prdfinis, Array, Boolean, Date,

Function, Image, Number, Object, ou String.

nouvel_objet=newtype_objet(parametres)

texte = new String("Une chane de caractre");
http://www.laltruiste.com/coursjavascript/array.htmlhttp://www.laltruiste.com/coursjavascript/boolean.htmlhttp://www.laltruiste.com/coursjavascript/date.htmlhttp://www.laltruiste.com/coursjavascript/function.htmlhttp://www.laltruiste.com/coursjavascript/image.htmlhttp://www.laltruiste.com/coursjavascript/number.htmlhttp://www.laltruiste.com/coursjavascript/object.htmlhttp://www.laltruiste.com/coursjavascript/string.htmlhttp://www.laltruiste.com/coursjavascript/string.htmlhttp://www.laltruiste.com/coursjavascript/object.htmlhttp://www.laltruiste.com/coursjavascript/number.htmlhttp://www.laltruiste.com/coursjavascript/image.htmlhttp://www.laltruiste.com/coursjavascript/function.htmlhttp://www.laltruiste.com/coursjavascript/date.htmlhttp://www.laltruiste.com/coursjavascript/boolean.htmlhttp://www.laltruiste.com/coursjavascript/array.html


47/76


Les objets (3)

Loprateur Typeof L'oprateurtypeofrenvoie une chane de caractres

indiquant quel est le type de l'oprande.

var i = 1;typeofi; //retourne numbervar titre="Les raisins de la colre";typeoftitre; //retourne stringvar jour = new Date();

typeofjour; //retourne objectvar choix = true; typeofchoix; //retourne booleanvar cas = null; typeofcas; //retourne objecttypeofparseFloat; //retourne functiontypeofMath; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.*typeofMath;//retourne function NS 3.*, Opera 3.*


48/76


L'objet String (1) Proprit :

length : retourne la longueur de la chane de caractres; Mthodes :

anchor( ) : formate la chane avec la balise nomme;

b( ) : formate la chane avec la balise ;

big( ) : formate la chane avec la balise ; charAt( ) : renvoie le caractre se trouvant une certaine

position;

charCodeAt( ) : renvoie le code du caractre se trouvant une

certaine position;

concat( ) : permet de concatner 2 chanes de caractres; fromCharCode( ) : renvoie le caractre associ au code;

indexOf( ) : permet de trouver l'indice d'occurrence d'un caractre

dans une chane;

L'objet String (2)


49/76


L'objet String (2) italics( ) : formate la chane avec la balise ;

lastIndexOf( ) : permet de trouver le dernier indiced'occurrence d'un caractre;

link( ) : formate la chane avec la balise pour

permettre de faire un lien;

slice( ) : retourne une portion de la chane; substr( ) : retourne une portion de la chane;

substring( ) : retourne une portion de la chane;

toLowerCase( ) : permet de passer toute la chane

en minuscule;

toUpperCase( ) : permet de passer toute la chane

en majuscules;


50/76


L'objetArray

Proprit : length : retourne le nombre d'lments du tableau;

Mthodes :

concat( ) : permet de concatner 2 tableaux; join( ) : converti un tableau en chane de caractres;

reverse( ) : inverse le classement des lmnts dutableau;

slice( ) : retourne une section du tableau;

sort( ) : permet le classement des lments dutableau;


51/76


L'objet Math (1)

Proprits :

E: renvoie la valeur de la constante d'Euler (~2.718);

LN2: renvoie le logarithme nprien de 2 (~0.693);

LN10: renvoie le logarithme nprien de 10 (~2.302);

LOG2E: renvoie le logarithme en base 2 de e (~1.442); LOG10E: renvoie le logarithme en base 10 de e (~0.434);

PI: renvoie la valeur du nombre pi (~3.14159);

SQRT1_2: renvoie 1 sur racine carre de 2 (~0.707);

SQRT2: renvoie la racine carre de 2 (~1.414);


52/76


L'objet Math (2)

Mthodes :

abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ),

atan( ), max( ), min( ), sqrt( ) sont les oprations

mathmatiques habituelles;

atan2( ) : retourne la valeur radian de l'angle entre l'axe desabscisses et un point;

ceil( ) : retourne le plus petit entier suprieur un nombre;

floor( ) : retourne le plus grand entier infrieur un nombre;

pow( ) : retourne le rsultat d'un nombre mis une certaine

puissance; random( ) : retourne un nombre alatoire entre 0 et 1;

round( ) : arrondi un nombre l'entier le plus proche.


53/76


L'objet Date (1)

Proprit : aucune;

Mthodes :

getFullYear( ), getYear( ), getMonth( ), getDay( ), getDate(),

getHours( ), getMinutes( ), getSeconds( ), getMilliseconds( ):

retournent respectivement l'anne complte, l'anne

(2chiffres), le mois, le jour de la semaine, le jour du mois,

l'heure, les minutes, les secondes et les millisecondes stocks

dans l'objet Date;

getUTCFullYear( ), getUTCYear( ), retournent

respectivement l'anne complte, l'anne (2chiffres),

stocks dans l'objet Date en temps universel;

setFullYear( ), setYear( ), remplacent respectivement

l'anne complte, l'anne (2chiffres), dans l'objet Date;


54/76


L'objet Date (2)

setUTCFullYear( ), setUTCYear( ), remplacent

l'anne complte, l'anne (2chiffres), dans l'objet

Date en temps universel;

getTime( ) : retourne le temps stock dans l'objet

Date;

getTimezoneOffset( ) : retourne la diffrence entre

l'heure du client et le temps universel;

toGMTString( ), toLocaleString( ), toUTCString( ) :

convertissent la date en chane de caractre selonla convention GMT, selon la convention locale ou

en temps universel;


55/76


Les objets du navigateur (1)

L'objet le plus haut dans la hirarchie est windowqui

correspond la fentre mme du navigateur.

L'objet documentfait rfrence au contenu de la

fentre.

documentregroupe au sein de proprits l'ensemble

des lments HTML prsents sur la page. Pour

atteindre ces diffrents lments, nous utiliserons :

soit des mthodes propres l'objet document, comme la

mthode getElementById( ), qui permet de trouver l'lmenten fonction de son identifiant (ID);

soit des collections d'objets qui regroupent sous forme de

tableaux Javascript tous les lments de type dtermin.



56/76




57/76


L'objet window (1)

Proprits : (accessibles avec IE et N) closed: indique que la fentre a t ferme;

defaultStatus : indique le message par dfaut dans labarre de status;

document: retourne l'objet documentde la fentre; frames : retourne la collection de cadres dans la

fentre;

history: retourne l'historique de la session de

navigation; location : retourne l'adresse actuellement visite;

name : indique le nom de la fentre;


58/76


L'objet window (2)

navigator: retourne le navigateur utilis;

opener: retourne l'objet windowqui a cr la fentre

en cours;

parent: retourne l'objet windowimmdiatemment

suprieur dans la hirarchie;

self : retourne l'objet window correspondant la

fentre en cours;

status : indique le message affich dans la barre de

status;

top : retourne l'objet windowle plus haut dans la

hirarchie.


59/76


L'objet window (3)

Mthodes : blur( ) : enlve le focus de la fentre; close( ) : ferme la fentre; focus( ) : place le focus sur la fentre;

moveBy( ) : dplace d'une distance; moveTo( ) : dplace la fentre vers un point spcifi; open( ) : ouvre une nouvelle fentre; print( ) : imprime le contenu de la fentre;

resizeBy( ) : redimensionne d'un certain rapport; resizeTo( ) : redimensionne la fentre; setTimeout( ) : value une chane de caractre aprs

un certain laps de temps.


60/76


L'objet document (1)

Proprits : applets : retourne la collection d'applets java prsente

dans le document; cookie : permet de stocker un cookie;

domain : indique le nom de domaine du serveur ayantapport le document; forms : retourne la collection de formulaires prsents

dans le document; images : retourne la collection d'images prsentes

dans le document; links : retourne la collection de liens prsents dans ledocument;


61/76


L'objet document (2)

referrer: indique l'adresse de la pageprcdente;

title : indique le titre du document.

Mthodes : close( ) : ferme le document en criture;

open( ) : ouvre le document en criture;

write( ) : crit dans le document; writeln( ) : crit dans le document et effectue

un retour la ligne


62/76


L'objet navigator

Proprits appName :application (Netscape, Internet

Explorer)

appVersion : numero de version.platform :systme dexploitation (Win32)

plugins

language

mimeTypes

JavaEnabled()


63/76


Les vnements (1)

Javascript est dpendant des vnements

se produisent lors d'actions diverses sur les objets

d'un document HTML.

onLoad;

onClick

onMouseover

onMouseout

...

Il est possible de baser lexcution de

fonctions sur des vnements

Les vnements (2)


64/76


Les vnements (2) Evnement onLoad

Se produit lorsque une page web est charge dans

la fentre du navigateur

Toute la page (y compris les images quelle contient

si leur chargement est prvu) doit avoir t charge

pour quil ait lieu Cet vnement peut tre associ une image

seulement ; auquel cas, il se produit une fois son

chargement termin

Exemple de l'vnement onLoad

Les vnements (3)


65/76


Les vnements (3) Evnement onClick

Se produit lorsque lutilisateur clique sur un lmentspcifique dans une page, comme un lien hypertexte, une

image, un bouton, du texte, etc.

Ces lments sont capables de rpondre sparment cet

vnement

Il peut galement tre dclench lorsque lutilisateur clique

nimporte o sur la page sil a t associ non pas un

lment spcifique, mais llment body tout entier


66/76


Les vnements (4) vnement onMouseover

Analogue onClick sauf quil suffit que lutilisateurplace le pointeur de sa souris sur lun des lmentsprcits (lien hypertexte, image, bouton, texte, etc.)pour quil ait lieu

vnement onMouseout A linverse de onMouseover, cet vnement se

produit lorsque le pointeur de la souris quitte lazone de slection dun lment.


67/76


Nommage des objets-lments

Pour pouvoir manipuler un objet en javaScript, il doitpossder un nom

Pour pouvoir distinguer les diffrents objets-lmentsdune page web, il suffit de leur donner un nom travers de lattribut NAME

Dans le cas o lobjet serait unique alors pas besoin denom pour dsigner cet objet

Exemple : le cas de BODY(une seul BODY pardocument), DOCUMENT (un seul DOCUMENT parfentre)

Manipulation des objets


68/76


Manipulation des objets Pour adresser un objet, il ne suffit pas de donner son

nom : il faut aussi prciser son chemin daccs danslarborescence de la structure

Si le nom de la fentre est omis, le navigateur utiliserapar dfaut la fentre courante

Dans le cas de cadres (frames), il est pertinent dedonner le nom de la fentre

Il est possible aussi domettre window.document :ladressage russi puisquil ny a quun seul objet document dans la fentre


69/76


Les Cookies (1)

Un "Cookie" est une chane de caractresqu'une page HTML (contenant du codeJavaScript) peut crire un emplacementUNIQUE et bien dfini sur le disque dur duclient.

Cette chane de caractres ne peut tre lue que par leseul serveur qui l'a gnre.

Que faire avec un cookie Transmettre des valeurs (contenu de variables) d'une

page HTML une autre.

Par exemple, crer un site marchand et constituer un"caddie" pour le client. Caddie qui restera sur son posteet vous permettra d'valuer la facture finale au bout dela commande. Sans faire appel quelque serveur que cesoit.

Personnaliser les pages prsentes l'utilisateur en

reprenant par exemple son nom en haut de chaquea e.

Les Cookies (2)


70/76


Les Cookies (2) Limitations lors de lutilisation des cookies.

On ne peut pas crire autant de cookies que l'on veut sur leposte de l'utilisateur (client dune page). Il y a des limites :

Limites en nombre : Un seul serveur (ou domaine) ne peut pastre autoris crire plus de 20 cookies.

Limites en taille : un cookie ne peut excder 4 Ko.

Limites du poste client : Un poste client ne peut stocker plusde 300 cookies en tout.

O sont stocks les cookies En gnral, ils sont pour Netscape, dans le rpertoire de l'utilisateur

(si il y a des profils diffrents) sous le nom de "cookie.txt".

Microsoft Internet Explorer stocke les cookies dans des rpertoirestels que "C:\WINDOWS\Cookies" ou encore"C:\WINDOWS\TEMP\Cookies".


71/76


Les Cookies (3)

Structure d'un cookie Nom=Contenu; expires=expdate; path=Chemin;

domain=NomDeDomaine; secure

Nom=Contenu; Sont deux variables suivies d'un ";" . Elles reprsentent

l'en-tte du cookie.

La variable Nom contient le nom donner au cookie.

La variable Contenu contient le contenu du cookie

Exemple ma_cookie= oui:visite


72/76


Les Cookies (4)

Expires= expdate; Le mot rserv expires suivi du signe "=" (gal).

Derrire ce signe, vous mettrez une date

d'expiration reprsentant la date laquelle le cookie

sera supprim du disque dur du client.

La date dexpiration doit tre au format :

Wdy, DD-Mon-YYYY HH:MM:SS GMT

Utiliser les fonctions de l'objet Date

Rgle gnrale : 'indiquer un dlai en nombre de

jours (ou d'annes) avant disparition du Cookie.


73/76


Les Cookies (5) path=Chemin;

path reprsente le chemin de la page qui a cr le cookie.

domain=NomDeDomaine; domain reprsente le nom du domaine de cette mme page

secure secure prend les valeurs "true" ou "false" selon que le cookiedoit utiliser des protocoles HTTP simples (non scuriss) ou

HTTPS (scuriss).

Les arguments path, domain et secure sont facultatifs.

lorsque ces arguments sont omis, les valeurs par dfaut sont

prises.

Pour secure, la valeur est "False" par dfaut.

Les Cookies (6)


74/76


Les Cookies (6)

Ecrire un cookie

Un cookie est une proprit de l'objet document (la pageHTML charge dans le navigateur) alors lintruction

dcriture de cookie est:

document.cookie = Nom + "=" +

Contenu + "; expires=" +expdate.toGMTString() ;

varvarNomNom = "= "MonCookieMonCookie" ; //" ; // nom du cookienom du cookie

varvarContenuContenu = "= "H... Vous avez un cookie sur votre disque !H... Vous avez un cookie sur votre disque !" ; //" ; // contenu du cookiecontenu du cookie

varvar

expdateexpdate

= new Date ()= new Date ()

; // cre un objet date indispensable; // cre un objet date indispensable

puis rajoutons lui 10 jours d'existence :puis rajoutons lui 10 jours d'existence :

expdateexpdate.setTime (.setTime (expdateexpdate.getTime() + (.getTime() + ( 1010 ** 2424 ** 6060 ** 6060 ** 10001000)) ;)) ;

document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;

Les Cookies (7)


75/76


Les Cookies (7) Lecture d'un cookie

Accder la proprit cookie de l'objet document. Document.cookie

Modification d'un cookie Modifier le contenu de la variable Contenu puis rcrire

le cookie sur le disque dur du client

varvarLesCookiesLesCookies; //; // pour voir les cookiespour voir les cookies

LesCookiesLesCookies= document.cookie ; //= document.cookie ; // on met les cookies dans la variable LesCookieson met les cookies dans la variable LesCookies

Contenu= "Le cookie a t modifi..." ; // nouveau contenu

document.cookie =Nom+ "=" +Contenu+ "; expires=" +

expdate.toGMTString(); // criture sur le disque


76/76

Les Cookies (8)

Suppression d'un cookie

Positionner la date de premption du cookie une valeurinfrieure celle du moment o on l'crit sur le disque.

//// on enlve une seconde (a suffit mais c'est ncessaire)on enlve une seconde (a suffit mais c'est ncessaire)

expdateexpdate.setTime (.setTime (expdateexpdate.getTime() - (.getTime() - (10001000)) ;)) ;

// criture sur le disque// criture sur le disque

document.cookie =document.cookie =NomNom+ "=" ++ "=" +ContenuContenu+ "; expires=" ++ "; expires=" +expdate.toGMTString()expdate.toGMTString();;

Documents

CourJavaScript