[PPT] Programmer avec JavaScript avec exemples | Cours informatique

(1)

JavaScript

(2)

Introduction

(1)

₍₁₎



Javascript permet de rendre dynamique un site internet

_{Javascript permet de rendre dynamique un site internet}

développé en HTML.



Javascript permet de développer de véritables applications

_{Javascript permet de développer de véritables applications}

fonctionnant exclusivement dans le cadre d'Internet.



Le Javascript est un langage de script simplifié orienté

_{Le Javascript est un langage de script simplifié orienté}

objet dont la syntaxe est basée sur celle du Java.



Javascript a été initialement élaboré par Netscape en

_{Javascript a été initialement élaboré par Netscape en}

association avec Sun Microsystem.

 Plus tard, Microsoft développera son propre langage Javascript officiellement _{Plus tard, Microsoft développera son propre langage Javascript officiellement}

connu sous le nom de

(3)

Introduction

(2)

₍₂₎



Contrairement à un applet Java qui est un programme

_{Contrairement à un applet Java qui est un programme}

compilé, les scripts écrits en Javascript sont

interprétés

 Le Java, représenté par un ou plusieurs fichiers autonomes _{Le Java, représenté par un ou plusieurs fichiers autonomes}

dont l'extension sera

dont l'extension sera *.class*.class ou ou *.jar*.jar, est invoqué par une balise , est invoqué par une balise HTML spécifique

HTML spécifique

 Le JavaScript est _{Le JavaScript est} écrit directement au sein du document _{écrit directement au sein du document}

HTML

HTML sous forme d'un script encadré par des balises HTML sous forme d'un script encadré par des balises HTML spéciales.

spéciales.



Javascript est standardisé par un comité spécialisé,

_{Javascript est standardisé par un comité spécialisé,}

l'ECMA (European Computer Manufactures Association).

(4)

HTML et JavaScript

 la page HTML devra TOUJOURS contenir les _{la page HTML devra TOUJOURS contenir les} deux balises spécifiques et indispensables

deux balises spécifiques et indispensables

 Le code JavaScript s’intègre de deux manière avec le _{Le code JavaScript s’intègre de deux manière avec le}

code HTML

 1. Insertion directe_1.Insertion directe dans le code HTML_{dans le code HTML}

 Le code JavaScript s'insère le plus souvent dans la page HTML elle _{Le code JavaScript s'insère le plus souvent dans la page HTML elle}

même.

 C'est la méthode la plus simple et la plus fréquemment utilisée par les _{C'est la méthode la plus simple et la plus fréquemment utilisée par les}

développeurs de sites Internet.

 2. Insertion comme un module externe_2.Insertion comme un module externe

<script <script language="JavaScript"> language="JavaScript"> ... ... </script> </script>

(5)

1. Insertion dans une page HTML

 Il existe Il existe 2 manières2 manières d'insérer du code JavaScript d'insérer du code JavaScript

dans une page HTML



1.1 Insertion pour exécution directe

_{1.1 Insertion pour exécution directe}

 Le code s'exécute automatiquement_{Le code s'exécute automatiquement}

lors du chargement de la page HTML

dans le navigateur en même temps que

le contenu de la page HTML

s'affiche à l'écran.

 Le code JavaScript est placé_{Le code JavaScript est placé}

dans le corps même de la page HTML,

entre les balises

entre les balises <body><body> ... Et ... Et ... ... </body></body> <html> <head> <title>... </title> </head> <body> <script language="JavaScript"> alert(‘bonjour’); </script> </body> </html>

(6)

1.2 Insertion et exécution événementielle

 Le code javascript est d'abord lu par _{Le code javascript est d'abord lu par}

le navigateur, stocké en mémoire,

pour ne s'exécuter que sur demande,

lors du déclenchement d ’un

événement.

 Le code JavaScript est placé dans le _{Le code JavaScript est placé dans le} corps même de la page HTML, entre

corps même de la page HTML, entre

les balises

les balises <head><head> ... et ... ... et ...

</head> </head>

 Le code s'exécutera seulement lors _{Le code s'exécutera seulement lors} d'un événement généré par

d'un événement généré par

intervention de l'utilisateur.

intervention de l'utilisateur.  Il faut écrire le code _{Il faut écrire le code}

correspondant à cet événement

dans le corps du document HTML.

<html> <html> <head> <head> <title> ... <title> ... </title> </title> <script <script language="JavaScript"> language="JavaScript"> function auRevoir () function auRevoir () { alert(‘ Au { alert(‘ Au revoir’);} revoir’);} </script> </script> </head> </head> <body <body onUnload=auRevoir();> onUnload=auRevoir();> Excécution différée Excécution différée </body> </body> </html> </html>

(7)

2. Insertion par appel de module externe

 On peut insérer du code JavaScript en faisant appel à un On peut insérer du code JavaScript en faisant appel à un

module externe se trouvant à n’importe quelle adresse

(URI).

 Les deux balises de Javascript doivent être placés entre les Tags _{Les deux balises de Javascript doivent être placés entre les Tags}

<body>

<body> et et </body></body> dans le cas d'une exécution directe ou dans le cas d'une exécution directe ou entre les Tags

entre les Tags <head><head> et et </head></head> de la page HTML pour une de la page HTML pour une exécution différée.

exécution différée.

 Stocké dans un fichier sur le serveur à son adresse d'appel sous _{Stocké dans un fichier sur le serveur à son adresse d'appel sous} forme de

forme de TEXTE SIMPLETEXTE SIMPLE portant l'extension portant l'extension .txt.txt ou ou .js.js

 Simplifie la maintenance des sites faisant appel à des modules _{Simplifie la maintenance des sites faisant appel à des modules} JavaScript communs à plusieurs pages HTML.

JavaScript communs à plusieurs pages HTML.

 Inconvénient : l'appel au code externe génère une requête _{Inconvénient : l'appel au code externe génère une requête} supplémentaire vers le serveur, et encombre le réseau

supplémentaire vers le serveur, et encombre le réseau

<script src="

<script src="URL du module externeURL du module externe"> "> ...

... </script> </script>

(8)

Entrée et sortie de données avec JavaScript

 3 types de boites de messages peuvent être affichés en _{3 types de boites de messages peuvent être affichés en}

utilisant Javascript :

utilisant Javascript : Alerte, Confirmation et InviteAlerte, Confirmation et Invite

 Méthode alert()_{Méthode alert()}

 _{sert à afficher à l’utilisateur des informations simples de type texte. Une fois}_{sert à afficher à l’utilisateur des informations simples de type texte. Une fois}

que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte

boîte

 Méthode confirm()_{Méthode confirm()}

 _{permet à l’utilisateur de choisir entre les boutons OK et Annuler.}_{permet à l’utilisateur de choisir entre les boutons OK et Annuler.}

 Méthode prompt()_{Méthode prompt()}

 La méthode prompt() permet à l’utilisateur de taper son propre message en _{La méthode prompt() permet à l’utilisateur de taper son propre message en}

réponse à la question posée réponse à la question posée

 La méthode _{La méthode}document.write_{document.write} permet d ’écrire du code HTML _{permet d ’écrire du code HTML}

dans la page WEB

(9)

Entrée et sortie de données avec JavaScript

<title> une page simple </title> </head> <body> Bonjour <script language='javascript'> alert('bonjour'); document.write (

prompt('quel est votre nom ?','Indiquer votre nom ici') );

confirm('quel bouton allez-vous choisir ?'); </script>

</body> </html>

(10)

La structure d’un script en JavaScript

 La syntaxe du langage Javascript s'appuie sur le modèle de _{La syntaxe du langage Javascript s'appuie sur le modèle de}

Java et C

 Règles générales_{Règles générales}

 _{L'insertion des espaces peut s'effectué n'importe où dans le script}_{L'insertion des espaces peut s'effectué n'importe où dans le script}  _{Chaque commande doit être terminée par un point-virgule (;).}_{Chaque commande doit être terminée par un point-virgule (;).}

 Un nombre à virgule est séparé par un point (.) et non par une virgule_{Un nombre à virgule est séparé par un point (.) et non par une virgule}  _{Le langage Javascript y est}_{Le langage Javascript y est}_{sensible à la casse}_{sensible à la casse}

 _{Il existe deux méthodes permettant d'intégrer des commentaires à}_{Il existe deux méthodes permettant d'intégrer des commentaires à}

vos scripts

vos scripts..

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

– Encadrer le texte par un slash suivi d'une étoile (/*) et la même séquence inversée (*/)

(11)

Les variables

(1)

₍₁₎



Déclaration et affectation

_{Déclaration et affectation}

 Le mot-clé var_{Le mot-clé}var permet de déclarer _{permet de déclarer}

une ou plusieurs variables.

 _{Après la déclaration de la variable, il est}_{Après la déclaration de la variable, il est}

possible de lui affecter une valeur par possible de lui affecter une valeur par l'intermédiaire du signe d'égalité (

l'intermédiaire du signe d'égalité (==).).

 Si une valeur est affectée à une _{Si une valeur est affectée à une}

variable sans que cette dernière ne

soit déclarée, alors Javascript la

déclare automatiquement. déclare automatiquement. //Déclaration de i, de j et de k. var i, j, k; //Affectation de i. i = 1; //Déclaration et affectation de prix. var prix = 0; //Déclaration et affectation de caractere

(12)

Les variables

(2)

₍₂₎



Déclaration et affectation

_{Déclaration et affectation}

 La lecture d'une variable non déclarée provoque une erreur_{La lecture d'une variable non déclarée provoque une erreur}  Une variable correctement déclarée mais dont aucune _{Une variable correctement déclarée mais dont aucune}

valeur n'est affectée, est indéfinie (undefined).

valeur n'est affectée, est indéfinie (undefined). 

La portée

_{La portée}

 les variables peuvent être globales ou locales._{les variables peuvent être globales ou locales.}

 Une variable globale est déclarée en début de script et est _{Une variable globale est déclarée en début de script et est}

accessible à n'importe quel endroit du programme.

 Une variable locale est déclarée à l'intérieur d'une fonction _{Une variable locale est déclarée à l'intérieur d'une fonction}

et n'est utilisable que dans la fonction elle-même.

(13)

Les variables

(3)

₍₃₎

 Contraintes concernant les noms de variables_{Contraintes concernant les noms de variables}

 Les noms de variables ne peuvent contenir que des lettres, _{Les noms de variables ne peuvent contenir que des lettres,} chiffres, ou le caractère "_" (underscore)

chiffres, ou le caractère "_" (underscore)

– Mon_Prenom est un nom valide

 Les caractères spéciaux et accentués sont interdits (é, à, ç, _{Les caractères spéciaux et accentués sont interdits (é, à, ç,} ï, etc..)

ï, etc..)

– Mon_Prénom n'est pas un nom valide. Il y a un caractère accentué.

 Les majuscules et les minuscules ont leur importance. _{Les majuscules et les minuscules ont leur importance.}

– MonPrenom est différent de Monprenom.

 Un nom de variable ne peut contenir d'espaces. 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 réservés JavaScript ne peuvent être utilisés _{Les mots réservés JavaScript ne peuvent être utilisés} comme noms de variable.

(14)

Les variables

(4)

₍₄₎

 Le type d’une variable dépend de la valeur stockée dans cette _{Le type d’une variable dépend de la valeur stockée dans cette}

variable.

variable. Pas de déclaration de type.Pas de déclaration de type.

 Exemple _Exemple

var maVariable = ‘ Philippe ’;

maVariable =10;

 _{trois principaux types de valeurs}_{trois principaux types de valeurs}

 _String_String

 _Number_Number: 10^-308 >nombre < 10^308: 10^-308 >nombre < 10^308

• Les nombres entiers

• les nombres décimaux en virgule flottant – 3 valeurs spéciales :

• Positive Infinity ou +Infinity (valeur infini positive) • Negative Infinity ou –Infinity (valeur infinie négative)

• Nan (Not a Number) habituellement générée comme résultat d’une opération mathamatique incohérente

 _Boolean_Boolean

(15)

Valeurs spéciales



JavaScript inclut aussi deux types de données

_{JavaScript inclut aussi deux types de données}

spéciaux :

 _{Null :}_{Null :}_{possède une seule valeur,}_{possède une seule valeur,}_nul_nul_{l, qui signifie l’absence e données}_{l, qui signifie l’absence e données}

dans une variable dans une variable

 _{Undefined :}_{Undefined :}_{possède une seule valeur,}_{possède une seule valeur,}_undifined_undifined_{. Une variable dont le}_{. Une variable dont le}

contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même

null

(16)

Les opérations sur les chaînes

 La concaténation_{La concaténation}

– Var chaine = « bonjour » + « FI3/FCD1 »;

 Déterminer la longueur d’une chaîne_{Déterminer la longueur d’une chaîne}

– Var ch1 = « bonjour »; – Var longueur = ch1.length;

 Identifier le nième caractère d’une chaîne_{Identifier le nième caractère d’une chaîne}

– Var ch1 =« Rebonjour ! »; – Var carac = ch1.charAt(2);

 Extraction d’une partie de la chaîne_{Extraction d’une partie de la chaîne}

– Var dateDuJour = « 04/04/03 »

– Var mois = datteDuJour.substring(3, 5);

• 3: est l’indice du premier caractère de la sou-chaîne à extraire • 5 : indice du dernier caractère à prendre en considération ; ce

(17)

Les fonctions

prédéfinies (1)

_{prédéfinies (1)}



eval

 Cette fonction exécute un code Javascript à partir _{Cette fonction exécute un code Javascript à partir}

d'une chaîne de caractères.

...

<SCRIPT LANGUAGE="JavaScript"> function evaluation() {

document.formulaire.calcul.value=eval(document.formulaire.saisie.value); } </SCRIPT>

...

Saisissez une expression mathématique : <INPUT TYPE="text" NAME=saisie MAXLENGTH=40 SIZE=40>

(18)

Les fonctions prédéfinies

(2)

₍₂₎



isFinite

_isFinite



Détermine si le parametre est un nombre fini.

_{Détermine si le parametre est un nombre fini.}

Renvoie

false

si ce n'est pas un nombre ou

l'infini positif ou infini négatif.



isNaN



détermine si le parametre n’est pas un nombre

_{détermine si le parametre n’est pas un nombre}

(NaN : Not a Number).

isFinite(240) //retourne true

isFinite("Un nombre") //retourne false

isNaN("un nombre") //retourne true

(19)

Les fonctions

prédéfinies (3)

_{prédéfinies (3)}



parseFloat

_parseFloat

 analyse une chaîne de caractères et retourne un _{analyse une chaîne de caractères et retourne un}

nombre décimal.

 Si l'argument évalué n'est pas un nombre, renvoie _{Si l'argument évalué n'est pas un nombre, renvoie}NaN_NaN

(Not a Number).



parseInt

_parseInt

analyse une chaîne de caractères et retourne un _{analyse une chaîne de caractères et retourne un}

nombre entier de la base spécifiée.

La base peut prendre les valeurs _{La base peut prendre les valeurs}16₁₆ (hexadécimal) _{(hexadécimal)}10₁₀

(décimal),

(décimal), 88 (octal), (octal), 22 (binaire). (binaire).

var numero="125";

var nombre=parseFloat(numero); //retourne le nombre 125

var prix=30.75;

(20)

Les fonctions

prédéfinies (4)

_{prédéfinies (4)}



Number

_Number

 convertit l'objet spécifié en valeur numérique_{convertit l'objet spécifié en valeur numérique}



String

_String

 convertit l'objet spécifié en chaîne de caractères_{convertit l'objet spécifié en chaîne de caractères}

 Escape_Escape

 retourne la valeur hexadécimale à partir d'une chaîne de _{retourne la valeur hexadécimale à partir d'une chaîne de}

caractère codée en ISO-Latin-1.

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

alert (Number(jour));

jour = new Date(430054663215);//Convertit le nombre en date Mois jour, Annéee etc.

alert (String(jour));

(21)

Les Objets

(1)

₍₁₎

 Les objets de JavaScript, sont soit des entités pré définies du _{Les objets de JavaScript, sont soit des entités pré définies du}

langage, soit créés par le programmeur.

 Par exemple, le navigateur est un objet qui s'appelle "navigator_{Par exemple, le navigateur est un objet qui s'appelle "}navigator". _".  _{La fenêtre du navigateur se nomme "window}_{La fenêtre du navigateur se nomme "}_window_"_"

 _{La page HTML est un autre objet, que l'on appelle "document}_{La page HTML est un autre objet, que l'on appelle "}_document_"._".  _{Un formulaire à l'intérieur d'un "document}_{Un formulaire à l'intérieur d'un "}_document_{", est aussi un objet.}_{", est aussi un objet.}

 _{Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "link}_{Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "}_link_"._".

etc...

 Les objets javascript peuvent réagir à des "Evénements". _{Les objets javascript peuvent réagir à des "Evénements".}  Tous les navigateurs ne supportent pas les mêmes objets_{Tous les navigateurs ne supportent pas les mêmes objets}  Accès aux propriétés d’un objetAccès aux propriétés d’un objet

 voiture.couleur.value_{voiture.couleur.value}

(22)

Les objets (2)



L’opérateur New

_{L’opérateur New}

 L'opérateur _L'opérateur new_new est utilisé pour créer une nouvelle _{est utilisé pour créer une nouvelle}

instance ou un nouveau type d'objet défini par

l'utilisateur ou de l'un des types d'objets prédéfinis,

l'utilisateur ou de l'un des types d'objets prédéfinis, ArrayArray

,

, BooleanBoolean, Date, Date, Function, Function, Image, Image, Number, Number, Object, Object, ou , ou

String

String..

 nouvel_objet _{nouvel_objet} = ₌ new _new

type_objet(parametres)

(23)

Les objets (3)



L’opérateur Typeof

_{L’opérateur Typeof}

 L'opérateur _L'opérateurtypeof_typeof renvoie une chaîne de caractères _{renvoie une chaîne de caractères}

indiquant quel est le type de l'opérande.

var i = 1;

typeof i; //retourne number

var titre="Les raisins de la colère";

typeof titre; //retourne string var jour = new Date();

typeof jour; //retourne object

var choix = true; typeof choix; //retourne boolean var cas = null; typeof cas; //retourne object

typeof parseFloat; //retourne function

typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.*

(24)

L'objet

String (1)

_{String (1)}

 Propriété : _{Propriété :}

length _length: retourne la longueur de la chaîne de caractères;_{: retourne la longueur de la chaîne de caractères;}

 Méthodes :_{Méthodes :}

anchor( )_{anchor( )} : formate la chaîne avec la balise <A> nommée;_{: formate la chaîne avec la balise <A> nommée;} _{b( )}_{b( )}_{: formate la chaîne avec la balise <B>;}_{: formate la chaîne avec la balise <B>;}

big( )_{big( )} : formate la chaîne avec la balise <BIG>;_{: formate la chaîne avec la balise <BIG>;}

charAt( )_{charAt( )} : renvoie le caractère se trouvant à une certaine position;_{: renvoie le caractère se trouvant à une certaine position;} charCodeAt( )_{charCodeAt( )} : renvoie le code du caractère se trouvant à une _{: renvoie le code du caractère se trouvant à une}

certaine position;

concat( )_{concat( )} : permet de concaténer 2 chaînes de caractères;_{: permet de concaténer 2 chaînes de caractères;} fromCharCode( )_{fromCharCode( )} : renvoie le caractère associé au code;_{: renvoie le caractère associé au code;}

indexOf( )_{indexOf( )} : permet de trouver l'indice d'occurrence d'un caractère _{: permet de trouver l'indice d'occurrence d'un caractère}

dans une chaîne;

(25)

L'objet

String (2)

_{String (2)}

 italics( )_{italics( )} : formate la chaîne avec la balise <I>;_{: formate la chaîne avec la balise <I>;}

 lastIndexOf( )_{lastIndexOf( )} : permet de trouver le dernier indice d'occurrence _{: permet de trouver le dernier indice d'occurrence}

d'un caractère;

 link( )_{link( )} : formate la chaîne avec la balise <A> pour permettre de _{: formate la chaîne avec la balise <A> pour permettre de}

faire un lien;

 slice( )_{slice( )} : retourne une portion de la chaîne;_{: retourne une portion de la chaîne;}  substr( )_{substr( )} : retourne une portion de la chaîne;_{: retourne une portion de la chaîne;}  substring( )_{substring( )} : retourne une portion de la chaîne;_{: retourne une portion de la chaîne;}

 toLowerCase( )_{toLowerCase( )} : permet de passer toute la chaîne en _{: permet de passer toute la chaîne en}

minuscule;

 toUpperCase( )_{toUpperCase( )} : permet de passer toute la chaîne en _{: permet de passer toute la chaîne en}

majuscules;

(26)

L'objet

Array

_Array



Propriété :

_{Propriété :}

 length_length : retourne le nombre d'éléments du tableau;_{: retourne le nombre d'éléments du tableau;}



Méthodes :

_{Méthodes :}

 concat( )_{concat( )} : permet de concaténer 2 tableaux;_{: permet de concaténer 2 tableaux;}

 join( )_{join( )} : converti un tableau en chaîne de caractères;_{: converti un tableau en chaîne de caractères;}  reverse( )_{reverse( )} : inverse le classement des éléménts du _{: inverse le classement des éléménts du}

tableau;

 slice( )_{slice( )} : retourne une section du tableau;_{: retourne une section du tableau;}

(27)

L'objet

Math (1)

_{Math (1)}



Propriétés :

_{Propriétés :}

 E_E : renvoie la valeur de la constante d'Euler (~2.718);_{: renvoie la valeur de la constante d'Euler (~2.718);}  LN2 _LN2: renvoie le logarithme népérien de 2 (~0.693);_{: renvoie le logarithme népérien de 2 (~0.693);}  LN10 _LN10: renvoie le logarithme népérien de 10 (~2.302);_{: renvoie le logarithme népérien de 10 (~2.302);}  LOG2E_LOG2E : renvoie le logarithme en base 2 de e (~1.442);_{: renvoie le logarithme en base 2 de e (~1.442);}  LOG10E_LOG10E : renvoie le logarithme en base 10 de e _{: renvoie le logarithme en base 10 de e}

(~0.434);

 PI_PI : renvoie la valeur du nombre pi (~3.14159);_{: renvoie la valeur du nombre pi (~3.14159);}

 SQRT1_2_{SQRT1_2} : renvoie 1 sur racine carrée de 2 (~0.707);_{: renvoie 1 sur racine carrée de 2 (~0.707);}  SQRT2_SQRT2 : renvoie la racine carrée de 2 (~1.414);_{: renvoie la racine carrée de 2 (~1.414);}

(28)

L'objet

Math (2)

_{Math (2)}



Méthodes :

_{Méthodes :}

 abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), _{abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ),}

atan( ), max( ), min( ), sqrt( )

atan( ), max( ), min( ), sqrt( ) sont les opérations sont les opérations mathématiques habituelles;

mathématiques habituelles;

 atan2( )_{atan2( )} : retourne la valeur radian de l'angle entre l'axe des _{: retourne la valeur radian de l'angle entre l'axe des}

abscisses et un point;

 ceil( )_{ceil( )} : retourne le plus petit entier supérieur à un nombre;_{: retourne le plus petit entier supérieur à un nombre;}  floor( )_{floor( )} : retourne le plus grand entier inférieur à un nombre;_{: retourne le plus grand entier inférieur à un nombre;}  pow( )_{pow( )} : retourne le résultat d'un nombre mis à une certaine _{: retourne le résultat d'un nombre mis à une certaine}

puissance;

 random( )_{random( )} : retourne un nombre aléatoire entre 0 et 1;_{: retourne un nombre aléatoire entre 0 et 1;}  round( )_{round( )} : arrondi un nombre à l'entier le plus proche._{: arrondi un nombre à l'entier le plus proche.}

(29)

L'objet

Date (1)

_{Date (1)}



Propriété : aucune;

_{Propriété : aucune;}



Méthodes :

_{Méthodes :}

 getFullYear( ), getYear( ), getMonth( ), getDay( ), _{getFullYear( ), getYear( ), getMonth( ), getDay( ),}

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

getMilliseconds( ): retournent respectivement l'année retournent respectivement l'année complète, l'année (2chiffres), le mois, le jour de la

complète, l'année (2chiffres), le mois, le jour de la

semaine, le jour du mois, l'heure, les minutes, les

secondes et les millisecondes stockés dans l'objet

secondes et les millisecondes stockés dans l'objet DateDate;;

 getUTCFullYear( ), getUTCYear( ), …_{getUTCFullYear( ), getUTCYear( ), …} retournent _retournent

respectivement l'année complète, l'année (2chiffres), …

stockés dans l'objet

stockés dans l'objet DateDate en temps universel; en temps universel;

 setFullYear( ), setYear( ), …_{setFullYear( ), setYear( ), …} remplacent respectivement _{remplacent respectivement}

l'année complète, l'année (2chiffres), … dans l'objet

(30)

L'objet

Date (2)

_{Date (2)}

 setUTCFullYear( ), setUTCYear( ),_{setUTCFullYear( ), setUTCYear( ),} … remplacent l'année _{… remplacent l'année}

complète, l'année (2chiffres), … dans l'objet

complète, l'année (2chiffres), … dans l'objet DateDate en temps en temps universel;

universel;

 getTime( )_{getTime( )} : retourne le temps stocké dans l'objet _{: retourne le temps stocké dans l'objet}Date_Date;_;

 getTimezoneOffset( )_{getTimezoneOffset( )} : retourne la différence entre l'heure _{: retourne la différence entre l'heure}

du client et le temps universel;

 toGMTString( ), toLocaleString( ), toUTCString( )_{toGMTString( ), toLocaleString( ), toUTCString( )} : _:

convertissent la date en chaîne de caractère selon la

convention GMT, selon la convention locale ou en temps

universel;

(31)

Les objets du navigateur (1)



L'objet le plus haut dans la hiérarchie est window

_{L'objet le plus haut dans la hiérarchie est}

window

qui

_qui

correspond à la fenêtre même du navigateur.



L'objet document

_L'objet

document

fait référence au contenu de la

_{fait référence au contenu de la}

fenêtre.



document

_document

regroupe au sein de propriétés l'ensemble

_{regroupe au sein de propriétés l'ensemble}

des éléments HTML présents sur la page.

des éléments HTML présents sur la page. Pour

atteindre ces différents éléments, nous utiliserons :

 soit des méthodes propres à l'objet_{soit des méthodes propres à l'objet} document,_document, comme la _{comme la}

méthode

méthode getElementById( ),getElementById( ), qui permet de trouver qui permet de trouver l'élément en fonction de son identifiant (ID);

l'élément en fonction de son identifiant (ID);

 soit des collections d'objets_{soit des collections d'objets} qui regroupent sous forme de _{qui regroupent sous forme de}

tableaux Javascript tous les éléments de type déterminé.

(32)

Les objets du navigateur (2)

(33)

L'objet

window (1)

_{window (1)}



Propriétés : (accessibles avec IE et N)

_{Propriétés : (accessibles avec IE et N)}



closed

_closed

: indique que la fenêtre a été fermée;

_{: indique que la fenêtre a été fermée;}



defaultStatus

_{defaultStatus}

: indique le message par défaut dans la

_{: indique le message par défaut dans la}

barre de status;



document

_document

: retourne l'objet

_{: retourne l'objet}

document

_document

de la fenêtre;

_{de la fenêtre;}



frames

_frames

: retourne la collection de cadres dans la

_{: retourne la collection de cadres dans la}

fenêtre;



history

_history

: retourne l'historique de la session de

_{: retourne l'historique de la session de}

navigation;



location

_location

: retourne l'adresse actuellement visitée;

_{: retourne l'adresse actuellement visitée;}



name :

_{name :}

indique le nom de la fenêtre;

_{indique le nom de la fenêtre;}

(34)

L'objet

window (2)

_{window (2)}



navigator

_navigator

: retourne le navigateur utilisé;

_{: retourne le navigateur utilisé;}



opener

_opener

: retourne l'objet

_{: retourne l'objet}

window

_window

qui a créé la

_{qui a créé la}

fenêtre en cours;



parent

_parent

: retourne l'objet

_{: retourne l'objet}

window

_window

immédiatemment

_{immédiatemment}

supérieur dans la hiérarchie;



self :

_{self :}

retourne l'objet window correspondant à la

_{retourne l'objet window correspondant à la}

fenêtre en cours;



status

_status

: indique le message affiché dans la barre de

_{: indique le message affiché dans la barre de}

status;



top

_top

: retourne l'objet

_{: retourne l'objet}

window

_window

le plus haut dans la

_{le plus haut dans la}

hiérarchie.

(35)

L'objet

window (3)

_{window (3)}



Méthodes :

_{Méthodes :}



blur( )

_{blur( )}

: enlève le focus de la fenêtre;

_{: enlève le focus de la fenêtre;}



close( )

_{close( )}

: ferme la fenêtre;

_{: ferme la fenêtre;}



focus( )

_{focus( )}

: place le focus sur la fenêtre;

_{: place le focus sur la fenêtre;}



moveBy( )

_{moveBy( )}

: déplace d'une distance;

_{: déplace d'une distance;}



moveTo( )

_{moveTo( )}

: déplace la fenêtre vers un point spécifié;

_{: déplace la fenêtre vers un point spécifié;}



open( )

_{open( )}

: ouvre une nouvelle fenêtre;

_{: ouvre une nouvelle fenêtre;}



print( )

_{print( )}

: imprime le contenu de la fenêtre;

_{: imprime le contenu de la fenêtre;}



resizeBy( )

_{resizeBy( )}

: redimensionne d'un certain rapport;

_{: redimensionne d'un certain rapport;}



resizeTo( )

_{resizeTo( )}

: redimensionne la fenêtre;

_{: redimensionne la fenêtre;}



setTimeout( )

_{setTimeout( )}

: évalue une chaîne de caractère après un

_{: évalue une chaîne de caractère après un}

certain laps de temps.

(36)

L'objet

document (1)

_{document (1)}



Propriétés :

_{Propriétés :}



applets

_applets

: retourne la collection d'applets java présente

_{: retourne la collection d'applets java présente}

dans le document;



cookie

_cookie

: permet de stocker un cookie;

_{: permet de stocker un cookie;}



domain

_domain

: indique le nom de domaine du serveur ayant

_{: indique le nom de domaine du serveur ayant}

apporté le document;



forms

_forms

: retourne la collection de formulaires présents

_{: retourne la collection de formulaires présents}

dans le document;



images

_images

: retourne la collection d'images présentes

_{: retourne la collection d'images présentes}

dans le document;



links

_links

: retourne la collection de liens présents dans le

_{: retourne la collection de liens présents dans le}

document;

(37)

L'objet

document (2)

_{document (2)}



referrer

_referrer

: indique l'adresse de la page

_{: indique l'adresse de la page}

précédente;



title

_title

: indique le titre du document.

_{: indique le titre du document.}



Méthodes :

_{Méthodes :}



close( )

_{close( )}

: ferme le document en écriture;

_{: ferme le document en écriture;}



open( )

_{open( )}

: ouvre le document en écriture;

_{: ouvre le document en écriture;}



write( )

_{write( )}

: écrit dans le document;

_{: écrit dans le document;}



writeln( )

_{writeln( )}

: écrit dans le document et effectue un

_{: écrit dans le document et effectue un}

retour à la ligne

(38)

L'objet

navigator

_navigator



Propriétés

_Propriétés



_appName

_:

_{application (Netscape, Internet Explorer)}



_appVersion

:

_{numero de version}

.



platform

_platform

:

_:

système d’exploitation (Win32)

_{système d’exploitation (Win32)}



plugins

_plugins



language

_language



mimeTypes

_mimeTypes

(39)

Les événements (1)

 Javascript est dépendant des événements_{Javascript est dépendant des événements}

 se produisent lors d'actions diverses sur les objets d'un _{se produisent lors d'actions diverses sur les objets d'un}

document HTML. document HTML. – onLoad; – onClick – onMouseover – onMouseout – ...

 Il est possible de baser l’exécution de fonctions sur des _{Il est possible de baser l’exécution de fonctions sur des}

événements

(40)

Les événements

(2)

₍₂₎



Evénement onLoad

_{Evénement onLoad}

 Se produit lorsque une page web est chargée dans la _{Se produit lorsque une page web est chargée dans la}

fenêtre du navigateur

 Toute la page (y compris les images qu’elle contient _{Toute la page (y compris les images qu’elle contient}

si leur chargement est prévu) doit avoir été chargée

pour qu’il ait lieu

 Cet événement peut être associé à une image _{Cet événement peut être associé à une image}

seulement ; auquel cas, il se produit une fois son

chargement terminé

<HTML><BODY onLoad="alert('page chargée');"> Exemple de l'événement onLoad

(41)

Les événements

(3)

₍₃₎



Evénement onClick

_{Evénement onClick}

 Se produit lorsque l’utilisateur clique sur un élément _{Se produit lorsque l’utilisateur clique sur un élément}

spécifique dans une page, comme un lien hypertexte, une

image, un bouton, du texte, etc.

 Ces éléments sont capables de répondre séparément à _{Ces éléments sont capables de répondre séparément à}

cet événement

 Il peut également être déclenché lorsque l’utilisateur _{Il peut également être déclenché lorsque l’utilisateur}

clique n’importe où sur la page s’il a été associé non pas à

un élément spécifique, mais à l’élément body tout entier

un élément spécifique, mais à l’élément body tout entier <HTML><BODY>

(42)

Les événements

(4)

₍₄₎



Événement onMouseover

_{Événement onMouseover}

 Analogue à onClick sauf qu’il suffit que l’utilisateur _{Analogue à onClick sauf qu’il suffit que l’utilisateur}

place le pointeur de sa souris sur l’un des éléments

précités (lien hypertexte, image, bouton, texte, etc.)

pour qu’il ait lieu



Événement onMouseout

_{Événement onMouseout}

 A l’inverse de onMouseover, cet événement se _{A l’inverse de onMouseover, cet événement se}

produit lorsque le pointeur de la souris quitte la zone

de sélection d’un élément.

de sélection d’un élément. <HTML><BODY>

(43)

Nommage des objets-éléments

 Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom_{Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom}  Pour pouvoir distinguer les différents objets-éléments d’une page web, il _{Pour pouvoir distinguer les différents objets-éléments d’une page web, il}

suffit de leur donner un nom à travers de l’attribut NAME

– <Table Name=« tableau1 »>… – <Table Name=« tableau2 »>… – <Form Name = « formulaire1 »>… – <Form Name =« formulaire2 »>… – <Textarea Name =« texte1»>…

 Dans le cas où l’objet serait unique alors pas besoin de nom pour _{Dans le cas où l’objet serait unique alors pas besoin de nom pour} désigner cet objet

désigner cet objet

– Exemple : le cas de BODY(une seul BODY par document), DOCUMENT (un seul DOCUMENT par fenêtre)

(44)

Manipulation des objets

 Pour adresser un objet, il ne suffit pas de donner son nom : il faut _{Pour adresser un objet, il ne suffit pas de donner son nom : il faut}

aussi préciser son « chemin d’accès » dans l’arborescence de la

structure

 Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la _{Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la}

fenêtre courante

 Dans le cas de cadres (frames), il est pertinent de donner le nom de la _{Dans le cas de cadres (frames), il est pertinent de donner le nom de la}

fenêtre

 Il est possible aussi d’omettre window.document : l’adressage réussi _{Il est possible aussi d’omettre window.document : l’adressage réussi}

puisqu’il n’y a qu’un seul objet « document» dans la fenêtre

<HTML><BODY

onLoad="window.document.formulaire.zone.value='Bonjour';"> <FORM name="formulaire"><INPUT NAME="zone" TYPE="text">

(45)

Les Cookies

(1)

₍₁₎

 Un "Cookie" est une chaîne de caractères qu'une _{Un "Cookie" est une chaîne de caractères qu'une}

page HTML (contenant du code JavaScript) peut

écrire à un emplacement UNIQUE et bien défini sur le

disque dur du client.

 Cette chaîne de caractères ne peut être lue que par le seul serveur _{Cette chaîne de caractères ne peut être lue que par le seul serveur}

qui l'a générée. qui l'a générée.

 Que faire avec un cookie_{Que faire avec un cookie}

 Transmettre des valeurs (contenu de variables) d'une page HTML à _{Transmettre des valeurs (contenu de variables) d'une page HTML à}

une autre. une autre.

– Par exemple, créer un site marchand et constituer un "caddie" pour le client. Caddie qui restera sur son poste et vous permettra d'évaluer la facture finale au bout de la commande. Sans faire appel à quelque serveur que ce soit.

 Personnaliser les pages présentées à l'utilisateur en reprenant par _{Personnaliser les pages présentées à l'utilisateur en reprenant par}

exemple son nom en haut de chaque page. exemple son nom en haut de chaque page.

(46)

Les Cookies

(2)

₍₂₎



Limitations lors de l’utilisation des cookies.

_{Limitations lors de l’utilisation des cookies.}

 On ne peut pas écrire autant de cookies que l'on veut sur le poste _{On ne peut pas écrire autant de cookies que l'on veut sur le poste}

de l'utilisateur (client d’une page). Il y a des limites :

 Limites en nombre : Un seul serveur (ou domaine) ne peut pas être _{Limites en nombre : Un seul serveur (ou domaine) ne peut pas être}

autorisé à écrire plus de 20 cookies.

 _{Limites en taille : un cookie ne peut excéder 4 Ko.}_{Limites en taille : un cookie ne peut excéder 4 Ko.}

 Limites du poste client : Un poste client ne peut stocker plus de 300 _{Limites du poste client : Un poste client ne peut stocker plus de 300}

cookies en tout.

 Où sont stockés les cookies _{Où sont stockés les cookies}

 _{En général, ils sont pour Netscape, dans le répertoire de l'utilisateur (si il y}_{En général, ils sont pour Netscape, dans le répertoire de l'utilisateur (si il y}

a des profils différents) sous le nom de "cookie.txt".

 _{Microsoft Internet Explorer stocke les cookies dans des répertoires tels que}_{Microsoft Internet Explorer stocke les cookies dans des répertoires tels que}

"C:\WINDOWS\Cookies" ou encore "C:\WINDOWS\TEMP\Cookies".

(47)

Les Cookies

(3)

₍₃₎



_{Structure d'un cookie}

 _{Nom=Contenu; expires=expdate; path=Chemin;} domain=NomDeDomaine; secure

 Nom=Contenu;_Nom=Contenu;

– Sont deux variables suivies d'un ";" . Elles représentent l'en-tête du cookie.

– La variable Nom contient le nom à donner au cookie. – La variable Contenu contient le contenu du cookie – Exemple ma_cookie=« oui:visite»

(48)

Les Cookies

(4)

₍₄₎



Expires= expdate;

_{Expires= expdate;}

 Le mot réservé expires _{Le mot réservé}expires suivi du signe "=_{suivi du signe "}=" (égal). Derrière ce signe, _{" (égal). Derrière ce signe,}

vous mettrez une date d'expiration représentant la date à laquelle le

cookie sera supprimé du disque dur du client.

cookie sera supprimé du disque dur du client.  La date d’expiration doit être au format : _{La date d’expiration doit être au format :}

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

Wdy, DD-Mon-YYYY HH:MM:SS GMT  Utiliser les fonctions de l'objet Date_{Utiliser les fonctions de l'objet}Date

 Règle générale : 'indiquer un délai en nombre de jours (ou d'années) _{Règle générale : 'indiquer un délai en nombre de jours (ou d'années)}

avant disparition du Cookie.

(49)

Les Cookies

(5)

₍₅₎

 path=Chemin;_path=Chemin;

 path_path représente le chemin de la page qui a créé le cookie._{représente le chemin de la page qui a créé le cookie.}

 domain=NomDeDomaine; _{domain=NomDeDomaine;}

 _domain_domain_{représente le nom du domaine de cette même page}_{représente le nom du domaine de cette même page}

 _secure_secure

 _secure_secure_{prend les valeurs "true" ou "false" selon que le cookie doit}_{prend les valeurs "true" ou "false" selon que le cookie doit}

utiliser des protocoles HTTP simples (non sécurisés) ou HTTPS

(sécurisés).

 Les arguments _{Les arguments}path, _,domain et _etsecure sont facultatifs. _{sont facultatifs.}

 lorsque ces arguments sont omis, les valeurs par défaut sont _{lorsque ces arguments sont omis, les valeurs par défaut sont}

prises.

(50)

Les Cookies

(6)

₍₆₎

 Ecrire un cookie_{Ecrire un cookie}

 _{Un cookie est une propriété de l'objet document (la page HTML chargée}_{Un cookie est une propriété de l'objet document (la page HTML chargée}

dans le navigateur) alors l’intruction d’écriture de cookie est:

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

expires=" + expdate.toGMTString() ;

var

var NomNom = "MonCookie = "MonCookie" ; //" ; // nom du cookie nom du cookie var

var ContenuContenu = "Hé... Vous avez un cookie sur votre disque ! = "Hé... Vous avez un cookie sur votre disque !" ; //" ; // contenu du cookie contenu du cookie var

var expdateexpdate = new Date () = new Date () ; // crée un objet date indispensable ; // crée un objet date indispensable puis rajoutons lui 10 jours d'existence :

puis rajoutons lui 10 jours d'existence :

expdate

expdate.setTime (.setTime (expdateexpdate.getTime() + ( 10 .getTime() + ( 10 ** 24 24 * * 6060 * * 6060 * * 10001000)) ; )) ;

(51)

Les Cookies

(7)

₍₇₎



Lecture d'un cookie

_{Lecture d'un cookie}

 _{Accéder à la propriété cookie de l'objet document.}_{Accéder à la propriété cookie de l'objet document.}

 Document.cookie_{Document.cookie}



Modification d'un cookie

_{Modification d'un cookie}

 _{Modifier le contenu de la variable Contenu}_{Modifier le contenu de la variable}_Contenu_{puis réécrire le cookie sur}_{puis réécrire le cookie sur}

le disque dur du client

var

var LesCookiesLesCookies ; //; // pour voir les cookies pour voir les cookies

LesCookies

LesCookies = document.cookie ; //= document.cookie ; // on met les cookies dans la variable LesCookies on 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

(52)

Les Cookies

(8)

₍₈₎



Suppression d'un cookie

_{Suppression d'un cookie}

 _P_P_{ositionner la date de péremption du cookie à une valeur inférieure à}_{ositionner la date de péremption du cookie à une valeur inférieure à}

celle du moment où on l'écrit sur le disque.

//

// on enlève une seconde (ça suffit mais c'est nécessaire) on enlève une seconde (ça suffit mais c'est nécessaire)

expdate

expdate.setTime (.setTime (expdateexpdate.getTime() - (.getTime() - (1000)) ; 1000)) ;

// écriture sur le disque

document.cookie =