javascriptjjjjjjjhdhfhfbfbfbfbfbfbfbfbfbava.ppt

Introduction
Introduction (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 JScript
JScript.
.

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és
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).
l'ECMA (European Computer Manufactures Association).

HTML et JavaScript
HTML et JavaScript
 la page HTML devra TOUJOURS contenir les deux balises
la page HTML devra TOUJOURS contenir les deux balises
spécifiques et indispensables
spécifiques et indispensables
 Le code JavaScript s’intègre de deux manière avec le code
Le code JavaScript s’intègre de deux manière avec le code
HTML
HTML
 1.
1. Insertion directe
Insertion directe dans le code HTML
dans le code HTML
 Le code JavaScript s'insère le plus souvent dans la page HTML elle même.
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 développeurs
C'est la méthode la plus simple et la plus fréquemment utilisée par les développeurs
de sites Internet.
de sites Internet.
 2.
2. Insertion comme un module externe
Insertion comme un module externe
<script language="JavaScript">
<script language="JavaScript">
............
............
</script>
</script>

1. Insertion dans une page HTML
1. Insertion dans une page HTML
 Il existe
Il existe 2 manières
2 manières d'insérer du code JavaScript dans une
d'insérer du code JavaScript dans une
page HTML
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
lors du chargement de la page HTML
dans le navigateur en même temps que
dans le navigateur en même temps que
le contenu de la page HTML
le contenu de la page HTML
s'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>

2. Insertion par appel de module externe
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).
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 entre les
dans le cas d'une exécution directe ou entre les
Tags
Tags <head>
<head> et
et </head>
</head> de la page HTML pour une exécution différée.
de la page HTML pour une exécution différée.
 Stocké dans un fichier sur le serveur à son adresse d'appel sous forme
Stocké dans un fichier sur le serveur à son adresse d'appel sous forme
de
de TEXTE SIMPLE
TEXTE 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 externe
URL du module externe">
">
............
............
</script>
</script>

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 Invite
Alerte, 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
dans la page WEB

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

La structure d’un script en JavaScript
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
Java et C
 Règles générales
Règles générales
1.
1. 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 (*/)

Les variables
Les variables (1)
(1)
 Déclaration et affectation
Déclaration et affectation
 Le mot-clé
Le mot-clé var
var 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
caractere
var caractere = ["a", "b", "c"];

Les variables
Les variables (2)
(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.
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.

Les variables
Les variables (3)
(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 comme
Les mots réservés JavaScript ne peuvent être utilisés comme
noms de variable.
noms de variable.

Les variables
Les variables (4)
(4)
 Le type d’une variable dépend de la valeur stockée dans cette variable.
Le type d’une variable dépend de la valeur stockée dans cette 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 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
– deux valeurs littérales : true (vrai) et false (faux).

Valeurs spéciales
Valeurs 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, nul
null, 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
null est dite non définie (undifined).
est dite non définie (undifined).

Les opérations sur les chaînes
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
caractère ne fera pas partie de la sous-chaîne à extraire

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

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
Renvoie false
false 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.
 isNaN
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).
(NaN : Not a Number).
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false
isNaN("un nombre") //retourne true
isNaN(20) //retourne false

Les fonctions
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.
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).
(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.
nombre entier de la base spécifiée.
 La base peut prendre les valeurs
La base peut prendre les valeurs 16
16 (hexadécimal)
(hexadécimal) 10
10
(décimal),
(décimal), 8
8 (octal),
(octal), 2
2 (binaire).
(binaire).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30

Les fonctions
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.
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));
escape("!&") //retourne %21%26%

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 "navigator
navigator".
".
 La fenêtre du navigateur se nomme "
La fenêtre du navigateur se nomme "window
window"
"
 La page HTML est un autre objet, que l'on appelle "
La page HTML est un autre objet, que l'on appelle "document
document".
".
 Un formulaire à l'intérieur d'un "
Un formulaire à l'intérieur d'un "document
document", 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 "link
link".
".
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 objets
Tous les navigateurs ne supportent pas les mêmes objets
 Accès aux propriétés d’un objet
Accès aux propriétés d’un objet
 voiture.couleur.value
voiture.couleur.value
 voiture.couleur.value = verte
voiture.couleur.value = verte

Les objets (2)
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
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, Array
Array
,
, Boolean
Boolean,
, Date
Date,
, Function
Function,
, Image
Image,
, Number
Number,
, Object
Object, ou
, ou
String
String.
.
 nouvel_objet = new type_objet(parametres)
nouvel_objet = new type_objet(parametres)
texte = new String("Une chaîne de caractère");

Les objets (3)
Les objets (3)
 L’opérateur Typeof
L’opérateur Typeof
 L'opérateur
L'opérateur typeof
typeof 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.*

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;

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 d'occurrence
: permet de trouver le dernier indice d'occurrence
d'un caractère;
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;
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;
 substring( )
substring( ) : 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;

L'objet
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;
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;

L'objet
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);
(~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);

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 des
: retourne la valeur radian de l'angle entre l'axe des
abscisses et un point;
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;
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.

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 Date
Date;
;
 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 Date
Date 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 Date
Date;
;

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

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 document
document fait référence au contenu de la
fait référence au contenu de la
fenêtre.
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é.
tableaux Javascript tous les éléments de type déterminé.

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;
defaultStatus
defaultStatus : indique le message par défaut dans la
: indique le message par défaut dans la
barre de status;
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;
history
history : 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;

L'objet
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;
fenêtre en cours;
parent
parent : retourne l'objet
window 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;
status
status : indique le message affiché dans la barre de
: indique le message affiché dans la barre de
status;
status;
top
top : retourne l'objet
window le plus haut dans la
le plus haut dans la
hiérarchie.
hiérarchie.

L'objet
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.
certain laps de temps.

L'objet
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;
dans le document;
cookie
cookie : 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;
forms
forms : retourne la collection de formulaires présents
: retourne la collection de formulaires présents
dans le document;
dans le document;
images
images : 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;

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;
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
retour à la ligne

L'objet
L'objet navigator
navigator
 Propriétés
Propriétés
appName
appName :
: application (Netscape, Internet Explorer)
application (Netscape, Internet Explorer)
appVersion
appVersion :
: numero de version
numero de version.
.
platform
platform :
: système d’exploitation (Win32)
système d’exploitation (Win32)
plugins
plugins
language
language
mimeTypes
mimeTypes
JavaEnabled()
JavaEnabled()

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
événements

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

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
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énement
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 à
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>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY></HTML>

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
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.)
 É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>

Nommage des objets-éléments
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
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)

Manipulation des objets
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
aussi préciser son « chemin d’accès » dans l’arborescence de la
structure
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
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
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
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">
</FORM></BODY></HTML>

Les Cookies
Les Cookies (1)
(1)
 Un "Cookie" est une chaîne de caractères qu'une page HTML
Un "Cookie" est une chaîne de caractères qu'une page HTML
(contenant du code JavaScript) peut écrire à un emplacement
(contenant du code JavaScript) peut écrire à un emplacement
UNIQUE et bien défini sur le disque dur du client.
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 qui
Cette chaîne de caractères ne peut être lue que par le seul serveur qui
l'a générée.
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.

Les Cookies
Les Cookies (2)
(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 :
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 a
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".
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:WINDOWSCookies" ou encore "C:WINDOWSTEMPCookies".
"C:WINDOWSCookies" ou encore "C:WINDOWSTEMPCookies".

Les Cookies
Les Cookies (3)
(3)
 Structure d'un cookie
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»

Les Cookies
Les Cookies (4)
(4)
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 GMT
Wdy, DD-Mon-YYYY HH:MM:SS GMT
 Utiliser les fonctions de l'objet
Utiliser les fonctions de l'objet Date
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.
avant disparition du Cookie.

Les Cookies
Les Cookies (5)
(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" : Il permet de spécifier
prend les valeurs "true" ou "false" : Il permet de spécifier
que le
que le cookie
cookie 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.

Les Cookies
Les Cookies (6)
(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:
dans le navigateur) alors l’intruction d’écriture de cookie est:
– document.cookie = Nom + "=" + Contenu + ";
expires=" + expdate.toGMTString() ;
var
var Nom
Nom = "
= "MonCookie
MonCookie" ; //
" ; // nom du cookie
nom du cookie
var
var Contenu
Contenu = "
= "Hé... Vous avez un cookie sur votre disque !
Hé... Vous avez un cookie sur votre disque !" ; //
" ; // contenu du cookie
contenu du cookie
var
var expdate
expdate = 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 (expdate
expdate.getTime() + (
.getTime() + ( 10
10 *
* 24
24 *
* 60
60 *
* 60
60 *
* 1000
1000)) ;
)) ;
document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;

Les Cookies
Les Cookies (7)
(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
Modifier le contenu de la variable Contenu
Contenu puis réécrire le cookie sur
puis réécrire le cookie sur
le disque dur du client
le disque dur du client
var
var LesCookies
LesCookies ; //
; // 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

Les Cookies
Les Cookies (8)
(8)
 Suppression d'un cookie
Suppression d'un cookie
 P
Positionner 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)
expdate
expdate.setTime (
.setTime (expdate
expdate.getTime() - (
.getTime() - (1000
1000)) ;
)) ;
// écriture sur le disque
// écriture sur le disque
document.cookie =
document.cookie = Nom
Nom + "=" +
+ "=" + Contenu
Contenu + "; expires=" +
+ "; expires=" + expdate.toGMTString()
expdate.toGMTString() ;
;

javascriptjjjjjjjhdhfhfbfbfbfbfbfbfbfbfbava.ppt

Contenu connexe

Similaire à javascriptjjjjjjjhdhfhfbfbfbfbfbfbfbfbfbava.ppt

Plus de ssuser80a7e81

javascriptjjjjjjjhdhfhfbfbfbfbfbfbfbfbfbava.ppt

Notes de l'éditeur