1 JavaScript. 2 Introduction (1) Javascript permet de rendre dynamique un site internet développé en HTML. Javascript permet de rendre dynamique un site

1

JavaScriptJavaScript

2

IntroductionIntroduction (1) (1)

Javascript permet de rendre dynamique un site internet Javascript permet de rendre dynamique un site internet développé en HTML. 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.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.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.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 connu sous le nom de JScriptJScript..

3

Introduction Introduction (2)(2)

Contrairement à un applet Java qui est un programme Contrairement à un applet Java qui est un programme compilé, les scripts écrits en Javascript sont compilé, les scripts écrits en Javascript sont interprétésinterpré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écifiqueHTML spécifique

Le JavaScript est Le JavaScript est écrit directement au sein du document écrit directement au sein du document HTMLHTML 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).l'ECMA (European Computer Manufactures Association).

4

HTML et JavaScriptHTML 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 code JavaScript s’intègre de deux manière avec le code HTMLle code HTML 1. 1. Insertion directeInsertion 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. 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. développeurs de sites Internet.

2. 2. Insertion comme un module externeInsertion comme un module externe

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

5

1. Insertion dans une page HTML1. 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 dans une page HTML

1.1 Insertion pour exécution directe 1.1 Insertion pour exécution directe Le code s'exécute automatiquementLe code s'exécute automatiquement

lors du chargement de la page HTMLlors du chargement de la page HTMLdans le navigateur en même temps quedans le navigateur en même temps quele contenu de la page HTMLle contenu de la page HTMLs'affiche à l'écran. s'affiche à l'écran.

Le code JavaScript est placéLe code JavaScript est placédans le corps même de la page HTML,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

2. Insertion par appel de module externe2. 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 module externe se trouvant à n’importe quelle adresse (URI). (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 entre dans le cas d'une exécution directe ou entre les Tags les Tags <head><head> et et </head></head> de la page HTML pour une exécution de la page HTML pour une exécution différée.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éseausupplémentaire vers le serveur, et encombre le réseau

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

7

Entrée et sortie de données avec JavaScript 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îteboî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éeréponse à la question posée

La méthode La méthode document.writedocument.write permet d ’écrire du code HTML permet d ’écrire du code HTML dans la page WEBdans la page WEB

8

Entrée et sortie de données avec JavaScript Entrée et sortie de données avec JavaScript

<html><head><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>

9

La structure d’un script en JavaScriptLa 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 CJava et C

Règles généralesRègles générales1.1. L'insertion des espaces peut s'effectué n'importe où dans le scriptL'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 virguleUn 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 cassesensible à 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 scriptsvos 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 (*/)

10

Les variables Les variables (1)(1)

Déclaration et affectationDéclaration et affectation Le mot-clé Le mot-clé varvar permet de déclarer permet de déclarer

une ou plusieurs variables.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 variable sans que cette dernière ne soit déclarée, alors Javascript la 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 caracterevar caractere = ["a", "b", "c"];

11


Déclaration et affectationDéclaration et affectation

La lecture d'une variable non déclarée provoque une erreurLa 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éeLa 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.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.et n'est utilisable que dans la fonction elle-même.

12


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

lettres, chiffres, ou le caractère "_" (underscore) lettres, 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.comme noms de variable.

13

Les variables Les variables (4)(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 ’;var maVariable = ‘ Philippe ’;maVariable =10;maVariable =10;

trois principaux types de valeurstrois principaux types de valeurs StringString 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 BooleanBoolean

– deux valeurs littérales : true (vrai) et false (faux).

14

Valeurs spécialesValeurs spéciales

JavaScript inclut aussi deux types de données JavaScript inclut aussi deux types de données spéciaux :spéciaux :

Null :Null : possède une seule valeur, possède une seule valeur, nulnull, qui signifie l’absence e données l, qui signifie l’absence e données dans une variabledans une variable

Undefined :Undefined : possède une seule valeur, possède une seule valeur, undifinedundifined. 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 null est dite non définie (undifined).est dite non définie (undifined).

15

Les opérations sur les chaînesLes opérations sur les chaînes La concaténationLa concaténation

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

Déterminer la longueur d’une chaîneDéterminer la longueur d’une chaîne– Var ch1 = « bonjour »;– Var longueur = ch1.length;

Identifier le nième caractère d’une chaîneIdentifier le nième caractère d’une chaîne– Var ch1 =« Rebonjour ! »;– Var carac = ch1.charAt(2);

Extraction d’une partie de la chaîneExtraction 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

caractère ne fera pas partie de la sous-chaîne à extraire

16

Les fonctions 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.d'une chaîne de caractères.

...<SCRIPT LANGUAGE="JavaScript"> function evaluation() { document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }</SCRIPT>...<FORM NAME="formulaire">Saisissez une expression mathématique : <INPUT TYPE="text" NAME=saisie MAXLENGTH=40 SIZE=40> <INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()"> <INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40></FORM>...

17

Les fonctions prédéfinies Les fonctions prédéfinies (2)(2)

isFiniteisFiniteDétermine si le parametre est un nombre fini. Détermine si le parametre est un nombre fini.

Renvoie Renvoie falsefalse si ce n'est pas un nombre ou si ce n'est pas un nombre ou l'infini positif ou infini négatif.l'infini positif ou infini négatif.

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

(NaN : Not a Number).(NaN : Not a Number).

isFinite(240) //retourne true isFinite("Un nombre") //retourne false

isNaN("un nombre") //retourne true isNaN(20) //retourne false

18

Les fonctions Les fonctions prédéfinies (3)prédéfinies (3) parseFloatparseFloat

analyse une chaîne de caractères et retourne un analyse une chaîne de caractères et retourne un nombre décimal.nombre décimal.

Si l'argument évalué n'est pas un nombre, renvoie Si l'argument évalué n'est pas un nombre, renvoie NaNNaN (Not a Number). (Not a Number).

parseIntparseInt 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.nombre entier de la base spécifiée. La base peut prendre les valeurs La base peut prendre les valeurs 1616 (hexadécimal) (hexadécimal)

1010 (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;var arrondi = parseInt(prix, 10); //retourne 30

19

Les fonctions Les fonctions prédéfinies (4)prédéfinies (4) NumberNumber

convertit l'objet spécifié en valeur numériqueconvertit l'objet spécifié en valeur numérique

StringString convertit l'objet spécifié en chaîne de caractèresconvertit l'objet spécifié en chaîne de caractères

EscapeEscape 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.caractère codée en ISO-Latin-1.

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

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

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

20

Les Objets Les Objets (1)(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. langage, soit créés par le programmeur.

Par exemple, le navigateur est un objet qui s'appelle "Par exemple, le navigateur est un objet qui s'appelle "navigatornavigator". ". La fenêtre du navigateur se nomme "La fenêtre du navigateur se nomme "windowwindow"" La page HTML est un autre objet, que l'on appelle "La page HTML est un autre objet, que l'on appelle "documentdocument". ". Un formulaire à l'intérieur d'un "Un formulaire à l'intérieur d'un "documentdocument", est aussi un objet. ", est aussi un objet. Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle " linklink". ".

etc... 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 objetsTous 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.valuevoiture.couleur.value voiture.couleur.value = verte voiture.couleur.value = verte

21

Les objets (2)Les objets (2)

L’opérateur NewL’opérateur New L'opérateur L'opérateur newnew est utilisé pour créer une nouvelle est utilisé pour créer une nouvelle

instance ou un nouveau type d'objet défini par 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, , DateDate, , FunctionFunction, , ImageImage, , NumberNumber, , ObjectObject, ou , ou StringString.. nouvel_objet = new nouvel_objet = new

type_objet(parametres)type_objet(parametres) texte = new String("Une chaîne de caractère");

22

Les objets (3)Les objets (3)

L’opérateur TypeofL’opérateur Typeof L'opérateur L'opérateur typeoftypeof renvoie une chaîne de caractères renvoie une chaîne de caractères

indiquant quel est le type de l'opérande.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.* typeof Math; //retourne function NS 3.*, Opera 3.*

23

L'objet 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;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;dans une chaîne;

24

L'objet 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 : permet de trouver le dernier indice

d'occurrence d'un caractère;d'occurrence d'un caractère; link( )link( ) : formate la chaîne avec la balise <A> pour permettre : formate la chaîne avec la balise <A> pour permettre

de faire un lien;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;minuscule; toUpperCase( )toUpperCase( ) : permet de passer toute la chaîne en : permet de passer toute la chaîne en

majuscules;majuscules;

25

L'objet L'objet ArrayArray

Propriété :Propriété : lengthlength : 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;tableau; slice( )slice( ) : retourne une section du tableau; : retourne une section du tableau; sort( )sort( ) : permet le classement des éléments du tableau; : permet le classement des éléments du tableau;

26

L'objet L'objet Math (1)Math (1)

Propriétés :Propriétés : EE : 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); LOG2ELOG2E : renvoie le logarithme en base 2 de e (~1.442); : renvoie le logarithme en base 2 de e (~1.442); LOG10ELOG10E : renvoie le logarithme en base 10 de e : renvoie le logarithme en base 10 de e

(~0.434);(~0.434); PIPI : renvoie la valeur du nombre pi (~3.14159); : renvoie la valeur du nombre pi (~3.14159); SQRT1_2SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707); : renvoie 1 sur racine carrée de 2 (~0.707); SQRT2SQRT2 : renvoie la racine carrée de 2 (~1.414); : renvoie la racine carrée de 2 (~1.414);

27

L'objet 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 : retourne la valeur radian de l'angle entre l'axe des abscisses et un point;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 : retourne le plus grand entier inférieur à un

nombre;nombre; pow( )pow( ) : retourne le résultat d'un nombre mis à une : retourne le résultat d'un nombre mis à une

certaine puissance;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.

28

L'objet 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 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), … 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 l'année complète, l'année (2chiffres), … dans l'objet DateDate;;

29

L'objet 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 DateDate;; getTimezoneOffset( )getTimezoneOffset( ) : retourne la différence entre l'heure : retourne la différence entre l'heure

du client et le temps universel;du client et le temps universel; toGMTString( ), toLocaleString( ), toUTCString( )toGMTString( ), toLocaleString( ), toUTCString( ) : :

convertissent la date en chaîne de caractère selon la convertissent la date en chaîne de caractère selon la convention GMT, selon la convention locale ou en temps convention GMT, selon la convention locale ou en temps universel;universel;

30

Les objets du navigateur (1)Les objets du navigateur (1)L'objet le plus haut dans la hiérarchie est L'objet le plus haut dans la hiérarchie est window window qui qui

correspond à la fenêtre même du navigateur. correspond à la fenêtre même du navigateur. L'objet L'objet documentdocument fait référence au contenu de la fait référence au contenu de la

fenêtre.fenêtre.documentdocument 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'objetsoit 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'objetssoit des collections d'objets qui regroupent sous forme de qui regroupent sous forme de tableaux Javascript tous les éléments de type déterminé.tableaux Javascript tous les éléments de type déterminé.

31

Les objets du navigateur (2)Les objets du navigateur (2)

32

L'objet 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;defaultStatusdefaultStatus : indique le message par défaut dans : indique le message par défaut dans

la barre de status;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;fenêtre;historyhistory : retourne l'historique de la session de : retourne l'historique de la session de

navigation;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;

33


navigatornavigator : retourne le navigateur utilisé; : retourne le navigateur utilisé;openeropener : retourne l'objet : retourne l'objet windowwindow qui a créé la qui a créé la

fenêtre en cours;fenêtre en cours;parentparent : retourne l'objet : retourne l'objet windowwindow immédiatemment immédiatemment

supérieur dans la hiérarchie;supérieur dans la hiérarchie;self :self : retourne l'objet window correspondant à la retourne l'objet window correspondant à la

fenêtre en cours;fenêtre en cours;statusstatus : indique le message affiché dans la barre de : indique le message affiché dans la barre de

status;status; toptop : retourne l'objet : retourne l'objet window window le plus haut dans la le plus haut dans la

hiérarchie.hiérarchie.

34


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 : évalue une chaîne de caractère après

un certain laps de temps.un certain laps de temps.

35

L'objet L'objet document (1)document (1)

Propriétés :Propriétés :appletsapplets : retourne la collection d'applets java : retourne la collection d'applets java

présente dans le document;présente dans le document;cookiecookie : permet de stocker un cookie; : permet de stocker un cookie;domain domain : indique le nom de domaine du serveur : indique le nom de domaine du serveur

ayant apporté le document;ayant apporté le document; formsforms : retourne la collection de formulaires présents : retourne la collection de formulaires présents

dans le document;dans le document; imagesimages : retourne la collection d'images présentes : retourne la collection d'images présentes

dans le document;dans le document; links links : retourne la collection de liens présents dans le : retourne la collection de liens présents dans le

document;document;

36

L'objet L'objet document (2)document (2)

referrer referrer : indique l'adresse de la page : indique l'adresse de la page précédente;précédente;

titletitle : 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 ligneretour à la ligne

37

L'objet L'objet navigatornavigator

PropriétésPropriétésappNameappName : : application (Netscape, Internet Explorer)application (Netscape, Internet Explorer) appVersionappVersion : : numero de version numero de version..platformplatform : : système d’exploitation (Win32)système d’exploitation (Win32)plugins plugins languagelanguagemimeTypesmimeTypesJavaEnabled()JavaEnabled()

38

Les événements (1)Les événements (1)

Javascript est dépendant des événementsJavascript 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événements

39

Les événements Les événements (2)(2)

Evénement onLoadEvé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 navigateurfenê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 si leur chargement est prévu) doit avoir été chargée pour qu’il ait lieupour 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 seulement ; auquel cas, il se produit une fois son chargement terminéchargement terminé

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

40

Les événements Les événements (3)(3) Evénement onClickEvé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 spécifique dans une page, comme un lien hypertexte, une image, un bouton, du texte, etc.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énementcet é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 à 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 entierun élément spécifique, mais à l’élément body tout entier

<HTML><BODY><INPUT TYPE="Button" Value="cliquer ici”onClick="alert('Clic')"></BODY></HTML>

41

Les événements Les événements (4)(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 place le pointeur de sa souris sur l’un des éléments précités (lien hypertexte, image, bouton, texte, etc.) précités (lien hypertexte, image, bouton, texte, etc.) pour qu’il ait lieupour 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 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><IMG SRC="image.gif" onMouseOver="src='image2.gif';" onMouseOut="src='image.gif';"></BODY></HTML>

42

Nommage des objets-élémentsNommage des objets-éléments

Pour pouvoir manipuler un objet en javaScript, il doit posséder un nomPour 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 NAMEsuffit 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 objetdésigner cet objet

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

43

Manipulation des objetsManipulation 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 aussi préciser son « chemin d’accès » dans l’arborescence de la structurestructure

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 courantefenêtre courante

Dans le cas de cadres (frames), il est pertinent de donner le nom de Dans le cas de cadres (frames), il est pertinent de donner le nom de la fenêtrela 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êtrepuisqu’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"></FORM></BODY></HTML>

44

Les Cookies Les Cookies (1)(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 page HTML (contenant du code JavaScript) peut écrire à un emplacement UNIQUE et bien défini sur écrire à un emplacement UNIQUE et bien défini sur le disque dur du client.le disque dur du client.

Cette chaîne de caractères ne peut être lue que par le seul Cette chaîne de caractères ne peut être lue que par le seul serveur qui l'a générée. serveur qui l'a générée.

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

HTML à une autre. HTML à 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 Personnaliser les pages présentées à l'utilisateur en reprenant par exemple son nom en haut de chaque page. par exemple son nom en haut de chaque page.

45


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 : 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. 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. 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". a des profils différents) sous le nom de "cookie.txt".

Microsoft Internet Explorer stocke les cookies dans des répertoires tels Microsoft Internet Explorer stocke les cookies dans des répertoires tels que "C:\WINDOWS\Cookies" ou encore "C:\WINDOWS\TEMP\que "C:\WINDOWS\Cookies" ou encore "C:\WINDOWS\TEMP\Cookies". Cookies".

46


Structure d'un cookieStructure 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»

47


Expires= expdate;Expires= expdate; Le mot réservé Le mot réservé expires 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 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 GMTWdy, DD-Mon-YYYY HH:MM:SS GMT

Utiliser les fonctions de l'objet Utiliser les fonctions de l'objet DateDate

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. avant disparition du Cookie.

48


path=Chemin;path=Chemin; pathpath 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; domaindomain représente le nom du domaine de cette même page représente le nom du domaine de cette même page

securesecure securesecure prend les valeurs "true" ou "false" : Il permet de spécifier prend les valeurs "true" ou "false" : Il permet de spécifier

que le que le cookiecookie sera envoyé uniquement si la connexion est sera envoyé uniquement si la connexion est sécurisée selon que le cookie doit utiliser des protocoles HTTP sécurisée selon que le cookie doit utiliser des protocoles HTTP simples (non sécurisés) ou HTTPS (sécurisés). simples (non sécurisés) ou HTTPS (sécurisés).

Les arguments Les arguments path, , domain et et secure 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. prises. Pour secure, la valeur est "False" par défaut.Pour secure, la valeur est "False" par défaut.

49

Les Cookies Les Cookies (6)(6) Ecrire un cookieEcrire 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:dans le navigateur) alors l’intruction d’écriture de cookie est:

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

varvar NomNom = " = "MonCookieMonCookie" ; //" ; // nom du cookie nom du cookie varvar ContenuContenu = " = "Hé... Vous avez un cookie sur votre disque !Hé... Vous avez un cookie sur votre disque !" ; //" ; // contenu du cookie contenu du cookie varvar 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 : expdateexpdate.setTime (.setTime (expdateexpdate.getTime() + (.getTime() + ( 10 10 ** 24 24 * * 6060 * * 6060 * * 10001000)) ; )) ; document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;

50


Lecture d'un cookieLecture d'un cookie Accéder à la propriété cookie de l'objet document.Accéder à la propriété cookie de l'objet document. Document.cookieDocument.cookie

Modification d'un cookieModification d'un cookie Modifier le contenu de la variable Modifier le contenu de la variable ContenuContenu puis réécrire le cookie sur puis réécrire le cookie sur

le disque dur du clientle disque dur du client

varvar LesCookiesLesCookies ; //; // pour voir les cookies pour voir les cookies

LesCookiesLesCookies = 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

51


Suppression d'un cookieSuppression d'un cookie PPositionner 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.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)

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

1 JavaScript. 2 Introduction (1) Javascript permet de rendre dynamique un site internet développé en HTML. Javascript permet de rendre dynamique un site