Scribd
Importer
4 vues58 pages

Introduction au JavaScript et intégration HTML

Transféré par

nourbadreddine999
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
4 vues58 pages

Introduction au JavaScript et intégration HTML

Transféré par

nourbadreddine999
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

1

JavaScript
2

Introduction (1)
◼ Javascript permet de rendre dynamique un site
internet développé en HTML.
◼ 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é
objet dont la syntaxe est basée sur celle du Java.
◼ Javascript a été initialement élaboré par Netscape en
association avec Sun Microsystem.
⚫ Plus tard, Microsoft développera son propre langage Javascript
officiellement connu sous le nom de JScript.
3

Introduction (2)
◼ 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
dont l'extension sera *.class ou *.jar, est invoqué par une
balise HTML spécifique
⚫ Le JavaScript est écrit directement au sein du document
HTML sous forme d'un script encadré par des balises
HTML spéciales.

◼ 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 deux balises spécifiques et indispensables
<script language="JavaScript">
............
</script>

◼ Le code JavaScript s’intègre de deux manière avec le


code HTML
⚫ 1. Insertion directe dans le code HTML
➢ 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 de sites Internet.

⚫ 2. Insertion comme un module externe


5

1. Insertion dans une page HTML

◼ Il existe 2 manières d'insérer du code JavaScript dans une


page HTML

⚫ 1.1 Insertion pour exécution directe


➢ Le code s'exécute automatiquement <html>
lors du chargement de la page HTML <head>
dans le navigateur en même temps que <title>..... </title>
le contenu de la page HTML </head>
s'affiche à l'écran. <body>
<script
➢ Le code JavaScript est placé language="JavaScript">
dans le corps même de la page HTML, alert(‘bonjour’);
entre les balises <body> .......... Et </script>
......... </body> </body>
</html>
6

2. Insertion par appel de module externe


◼ On peut insérer du code JavaScript en faisant
appel à un module externe se trouvant à n’importe
quelle adresse (URI).
<script src="URL du module externe">
............
</script>

⚫ Les deux balises de Javascript doivent être placés entre les Tags
<body> et </body> dans le cas d'une exécution directe ou entre les
Tags <head> et </head> de la page HTML pour une exécution différée.
⚫ Stocké dans un fichier sur le serveur à son adresse d'appel sous forme
de TEXTE SIMPLE portant l'extension .txt ou .js
⚫ Simplifie la maintenance des sites faisant appel à des modules
JavaScript communs à plusieurs pages HTML.
⚫ Inconvénient : l'appel au code externe génère une requête
supplémentaire vers le serveur, et encombre le réseau
7

Entrée et sortie de données


avec JavaScript
◼ 3 types de boites de messages peuvent être affichés en
utilisant Javascript : Alerte, Confirmation et Invite
⚫ Méthode alert()
➢ 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
boîte
⚫ Méthode confirm()
➢ permet à l’utilisateur de choisir entre les boutons OK et Annuler.
⚫ Méthode prompt()
➢ La méthode prompt() permet à l’utilisateur de taper son propre message en
réponse à la question posée
◼ La méthode [Link] permet d ’écrire du code HTML
dans la page WEB
8

Entrée et sortie de données avec


JavaScript

<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script language='javascript'>
alert('bonjour');
[Link] (
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 JavaScript

◼ La syntaxe du langage Javascript s'appuie sur le


modèle de Java et C
◼ Règles générales
1. L'insertion des espaces peut s'effectué n'importe où dans le script
➢ Chaque commande doit être terminée par un point-virgule (;).
➢ Un nombre à virgule est séparé par un point (.) et non par une virgule
➢ Le langage Javascript y est sensible à la casse
➢ Il existe deux méthodes permettant d'intégrer des commentaires à
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 (*/)
10

Les variables (1)


◼ Déclaration et affectation
➢ Le mot-clé var permet de déclarer
une ou plusieurs variables. //Déclaration de i, de j et de k.
var i, j, k;
➢ Après la déclaration de la variable, il est
possible de lui affecter une valeur par //Affectation de i.
l'intermédiaire du signe d'égalité (=). i = 1;
//Déclaration et affectation de prix.
➢ Si une valeur est affectée à une var prix = 0;
variable sans que cette dernière ne
soit déclarée, alors Javascript la //Déclaration et affectation de
déclare automatiquement. caractere
var caractere = ["a", "b", "c"];
11

Les variables (2)

◼ Déclaration et affectation
⚫ La lecture d'une variable non déclarée provoque une erreur
⚫ Une variable correctement déclarée mais dont aucune
valeur n'est affectée, est indéfinie (undefined).
◼ La portée
⚫ les variables peuvent être globales ou locales.
⚫ 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
et n'est utilisable que dans la fonction elle-même.
12

Les variables (3)

◼ Contraintes concernant les noms de variables


⚫ Les noms de variables ne peuvent contenir que des lettres,
chiffres, ou le caractère "_" (underscore)
– Mon_Prenom est un nom valide

⚫ Les caractères spéciaux et accentués sont interdits (é, à, ç,


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


– MonPrenom est différent de Monprenom.

⚫ Un nom de variable ne peut contenir d'espaces.


– Mon Prenom n'est pas un nom de variable correct. Il y a un espace.

⚫ Les mots réservés JavaScript ne peuvent être utilisés


comme noms de variable.
13

Les variables (4)


◼ Le type d’une variable dépend de la valeur stockée dans cette variable.
Pas de déclaration de type.
➢ Exemple
var maVariable = ‘ Philippe ’;
maVariable =10;

◼ trois principaux types de valeurs


➢ String
➢ Number : 10^-308 >nombre < 10^308
• Les nombres entiers
• les nombres 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
– deux valeurs littérales : true (vrai) et false (faux).
14

Valeurs spéciales

◼ JavaScript inclut aussi deux types de données


spéciaux :
➢ Null : possède une seule valeur, null, qui signifie l’absence e données
dans une variable
➢ Undefined : possède une seule valeur, undifined. Une variable dont le
contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même
null est dite non définie (undifined).
15

Les opérations sur les chaînes


⚫ La concaténation
– Var chaine = « bonjour » + « FI3/FCD1 »;

⚫ Déterminer la longueur d’une chaîne


– Var ch1 = « bonjour »;
– Var longueur = [Link];

⚫ Identifier le nième caractère d’une chaîne


– Var ch1 =« Rebonjour ! »;
– Var carac = [Link](2);

⚫ Extraction d’une partie de la chaîne


– Var dateDuJour = « 04/04/03 »
– Var mois = [Link](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 prédéfinies (1)


◼ eval
➢ Cette fonction exécute un code Javascript
à partir d'une chaîne de caractères.

...
<SCRIPT LANGUAGE="JavaScript">
function evaluation() {
[Link]=eval([Link]); }
</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 (2)


◼ isFinite
⚫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.
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false

◼ isNaN
⚫ détermine si le parametre n’est pas un nombre
(NaN : Not a Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false
18

Les fonctions prédéfinies (3)


◼ parseFloat
➢ analyse une chaîne de caractères et retourne
un nombre décimal.
➢ Si l'argument évalué n'est pas un nombre, renvoie
NaN (Not a Number).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
◼ parseInt
➢ analyse une chaîne de caractères et retourne un
nombre entier de la base spécifiée.
➢ La base peut prendre les valeurs 16 (hexadécimal)
10 (décimal), 8 (octal), 2 (binaire).
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
19

Les fonctions prédéfinies (4)


◼ Number
➢ convertit l'objet spécifié en valeur numérique

var jour = new Date("December 17, 1995 [Link]");//converit la date en millisecondes


alert (Number(jour));

◼ String
➢ convertit l'objet spécifié en chaîne de caractères

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


alert (String(jour));

◼ Escape
➢ retourne la valeur hexadécimale à partir d'une chaîne
de caractère codée en ISO-Latin-1.
escape("!&") //retourne %21%26%
20

Les Objets (1)


⚫ 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".
➢ La fenêtre du navigateur se nomme "window"
➢ La page HTML est un autre objet, que l'on appelle "document".
➢ Un formulaire à l'intérieur d'un "document", est aussi un objet.
➢ Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "link".
etc...
⚫ Les objets javascript peuvent réagir à des "Evénements".
⚫ Tous les navigateurs ne supportent pas les mêmes objets
⚫ Accès aux propriétés d’un objet
➢ [Link]
➢ [Link] = verte
21

Les objets (2)

◼ L’opérateur New
⚫ L'opérateur new 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,
Array, Boolean, Date, Function, Image, Number, Object,
ou String.
➢ nouvel_objet = new type_objet(parametres)

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


22

Les objets (3)

◼ L’opérateur Typeof
➢ L'opérateur typeof 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.*
typeof Math; //retourne function NS 3.*, Opera 3.*
23

L'objet String (1)


⚫ Propriété :
➢ length : retourne la longueur de la chaîne de caractères;
⚫ Méthodes :
➢ anchor( ) : formate la chaîne avec la balise <A> nommée;
➢ b( ) : formate la chaîne avec la balise <B>;
➢ big( ) : formate la chaîne avec la balise <BIG>;
➢ charAt( ) : renvoie le caractère se trouvant à une certaine
position;
➢ charCodeAt( ) : renvoie le code du caractère se trouvant à
une certaine position;
➢ concat( ) : permet de concaténer 2 chaînes de caractères;
➢ fromCharCode( ) : renvoie le caractère associé au code;
➢ indexOf( ) : permet de trouver l'indice d'occurrence d'un
caractère dans une chaîne;
24

L'objet String (2)

➢ italics( ) : formate la chaîne avec la balise <I>;


➢ lastIndexOf( ) : permet de trouver le dernier indice
d'occurrence d'un caractère;
➢ link( ) : formate la chaîne avec la balise <A> pour permettre
de faire un lien;
➢ slice( ) : retourne une portion de la chaîne;
➢ substr( ) : retourne une portion de la chaîne;
➢ substring( ) : retourne une portion de la chaîne;
➢ toLowerCase( ) : permet de passer toute la chaîne en
minuscule;
➢ toUpperCase( ) : permet de passer toute la chaîne en
majuscules;
25

L'objet Array

⚫ Propriété :
➢ length : retourne le nombre d'éléments du tableau;
⚫ Méthodes :
➢ concat( ) : permet de concaténer 2 tableaux;
➢ join( ) : converti un tableau en chaîne de caractères;
➢ reverse( ) : inverse le classement des éléménts du
tableau;
➢ slice( ) : retourne une section du tableau;
➢ sort( ) : permet le classement des éléments du tableau;
26

L'objet Math (1)

⚫ Propriétés :
➢E : renvoie la valeur de la constante d'Euler (~2.718);
➢ LN2 : renvoie le logarithme népérien de 2 (~0.693);
➢ LN10 : renvoie le logarithme népérien de 10 (~2.302);
➢ LOG2E : renvoie le logarithme en base 2 de e (~1.442);
➢ LOG10E : renvoie le logarithme en base 10 de e
(~0.434);
➢ PI : renvoie la valeur du nombre pi (~3.14159);
➢ SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
➢ SQRT2 : renvoie la racine carrée de 2 (~1.414);
27

L'objet Math (2)


⚫ Méthodes :
➢ abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ),
atan( ), max( ), min( ), sqrt( ) sont les opérations
mathématiques habituelles;
➢ atan2( ) : retourne la valeur radian de l'angle entre l'axe
des abscisses et un point;
➢ ceil( ) : retourne le plus petit entier supérieur à un
nombre;
➢ floor( ) : retourne le plus grand entier inférieur à un
nombre;
➢ pow( ) : retourne le résultat d'un nombre mis à une
certaine puissance;
➢ random( ) : retourne un nombre aléatoire entre 0 et 1;
➢ round( ) : arrondi un nombre à l'entier le plus proche.
28

L'objet Date (1)


⚫ Propriété : aucune;
⚫ Méthodes :
➢ getFullYear( ), getYear( ), getMonth( ), getDay( ),
getDate(), getHours( ), getMinutes( ), getSeconds( ),
getMilliseconds( ): retournent respectivement l'année
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 Date;
➢ getUTCFullYear( ), getUTCYear( ), … retournent
respectivement l'année complète, l'année (2chiffres), …
stockés dans l'objet Date en temps universel;
➢ setFullYear( ), setYear( ), … remplacent respectivement
l'année complète, l'année (2chiffres), … dans l'objet Date;
29

L'objet Date (2)


➢ setUTCFullYear( ), setUTCYear( ), … remplacent l'année
complète, l'année (2chiffres), … dans l'objet Date en temps
universel;
➢ getTime( ) : retourne le temps stocké dans l'objet Date;
➢ getTimezoneOffset( ) : retourne la différence entre l'heure du
client et le temps universel;
➢ toGMTString( ), toLocaleString( ), toUTCString( ) :
convertissent la date en chaîne de caractère selon la
convention GMT, selon la convention locale ou en temps
universel;
30

Les objets du navigateur (1)


⚫ L'objet le plus haut dans la hiérarchie est window
qui correspond à la fenêtre même du navigateur.
⚫ L'objet document fait référence au contenu de la
fenêtre.
⚫ document regroupe au sein de propriétés l'ensemble
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 document, comme la
méthode getElementById( ), qui permet de trouver
l'élément en fonction de son identifiant (ID);
➢ soit des collections d'objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.
31

Les objets du navigateur (2)


32

L'objet window (1)


◼ Propriétés : (accessibles avec IE et N)
⚫ closed : indique que la fenêtre a été fermée;
⚫ defaultStatus : indique le message par défaut dans
la barre de status;
⚫ document : retourne l'objet document de la fenêtre;
⚫ frames : retourne la collection de cadres dans la
fenêtre;
⚫ history : retourne l'historique de la session de
navigation;
⚫ location : retourne l'adresse actuellement visitée;
⚫ name : indique le nom de la fenêtre;
33

L'objet window (2)


⚫ navigator : retourne le navigateur utilisé;
⚫ opener : retourne l'objet window qui a créé la
fenêtre en cours;
⚫ parent : retourne l'objet window immédiatemment
supérieur dans la hiérarchie;
⚫ self : retourne l'objet window correspondant à la
fenêtre en cours;
⚫ status : indique le message affiché dans la barre de
status;
⚫ top : retourne l'objet window le plus haut dans la
hiérarchie.
34

L'objet window (3)


◼ Méthodes :
⚫ blur( ) : enlève le focus de la fenêtre;
⚫ close( ) : ferme la fenêtre;
⚫ focus( ) : place le focus sur la fenêtre;
⚫ moveBy( ) : déplace d'une distance;
⚫ moveTo( ) : déplace la fenêtre vers un point spécifié;
⚫ open( ) : ouvre une nouvelle fenêtre;
⚫ print( ) : imprime le contenu de la fenêtre;
⚫ resizeBy( ) : redimensionne d'un certain rapport;
⚫ resizeTo( ) : redimensionne la fenêtre;
⚫ setTimeout( ) : évalue une chaîne de caractère après
un certain laps de temps.
35

L'objet document (1)


◼ Propriétés :
⚫ applets : retourne la collection d'applets java
présente dans le document;
⚫ cookie : permet de stocker un cookie;
⚫ domain : indique le nom de domaine du serveur
ayant apporté le document;
⚫ forms : retourne la collection de formulaires présents
dans le document;
⚫ images : retourne la collection d'images présentes
dans le document;
⚫ links : retourne la collection de liens présents dans le
document;
36

L'objet document (2)

⚫ referrer : indique l'adresse de la page


précédente;
⚫ title : indique le titre du document.

◼ Méthodes :
⚫ close( ) : ferme le document en écriture;
⚫ open( ) : ouvre le document en écriture;
⚫ write( ) : écrit dans le document;
⚫ writeln( ) : écrit dans le document et effectue un
retour à la ligne
37

L'objet navigator

◼ Propriétés
⚫ appName : application (Netscape, Internet Explorer)
⚫ appVersion : numero de version.
⚫ platform : système d’exploitation (Win32)
⚫ plugins
⚫ language
⚫ mimeTypes
⚫ JavaEnabled()
38

Les événements (1)


⚫ Javascript est dépendant des événements
➢ se produisent lors d'actions diverses sur les objets d'un
document HTML.
– onLoad;
– onClick
– onMouseover
– onMouseout
– ...

⚫ Il est possible de baser l’exécution de fonctions sur des


événements
39

Les événements (2)

◼ Evénement onLoad
➢ 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
si leur chargement est prévu) doit avoir été chargée
pour qu’il ait lieu
➢ 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
</BODY></HTML>
40

Les événements (3)


◼ Evénement onClick
➢ Seproduit 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 à
cet événement
➢ Ilpeut é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
<HTML><BODY>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY></HTML>
41

Les événements (4)


◼ Événement onMouseover
➢ 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
➢ 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.
<HTML><BODY>
<IMG SRC="[Link]" onMouseOver="src='[Link]';"
onMouseOut="src='[Link]';">
</BODY></HTML>
42

Nommage des objets-éléments


⚫ 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
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
désigner cet objet
– Exemple : le cas de BODY(une seul BODY par document), DOCUMENT (un
seul DOCUMENT par fenêtre)
43

Manipulation des objets


⚫ 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
<HTML><BODY
onLoad="[Link]='Bonjour';">
<FORM name="formulaire"><INPUT NAME="zone" TYPE="text">
</FORM></BODY></HTML>

⚫ 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 fenêtre
⚫ Il est possible aussi d’omettre [Link] : l’adressage
réussi puisqu’il n’y a qu’un seul objet « document» dans la fenêtre
44

Les Cookies (1)


⚫ 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 qui
l'a générée.

⚫ Que faire avec un cookie


➢ Transmettre des valeurs (contenu de variables) d'une page 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 par


exemple son nom en haut de chaque page.
45

Les Cookies (2)

◼ Limitations lors de l’utilisation des cookies.


⚫ 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
autorisé à écrire plus de 20 cookies.
➢ Limites en taille : un cookie ne peut excéder 4 Ko.
➢ Limites du poste client : Un poste client ne peut stocker plus de 300
cookies en tout.

⚫ 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 des profils différents) sous le nom de "[Link]".
➢ Microsoft Internet Explorer stocke les cookies dans des répertoires tels que
"C:\WINDOWS\Cookies" ou encore "C:\WINDOWS\TEMP\Cookies".
46

Les Cookies (3)


◼ Structure d'un cookie
⚫ Nom=Contenu; expires=expdate; path=Chemin;
domain=NomDeDomaine; secure
➢ Nom=Contenu;
– Sont deux variables suivies d'un ";" . Elles 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

Les Cookies (4)

⚫ Expires= expdate;
➢ Le mot réservé expires suivi du 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.
➢ La date d’expiration doit être au format :
Wdy, DD-Mon-YYYY HH:MM:SS GMT
➢ Utiliser les fonctions de l'objet Date
➢ Règle générale : 'indiquer un délai en nombre de jours (ou d'années)
avant disparition du Cookie.
48

Les Cookies (5)


⚫ path=Chemin;
➢ path représente le chemin de la page qui a créé le cookie.

⚫ domain=NomDeDomaine;
➢ domain représente le nom du domaine de cette même page

⚫ secure
➢ secure prend les valeurs "true" ou "false" : Il permet de spécifier que
le cookie sera envoyé uniquement si la connexion est sécurisée
selon que le cookie doit utiliser des protocoles HTTP simples (non
sécurisés) ou HTTPS (sécurisés).

⚫ Les arguments path, domain et secure sont facultatifs.


➢ lorsque ces arguments sont omis, les valeurs par défaut sont prises.
➢ Pour secure, la valeur est "False" par défaut.
49

Les Cookies (6)

⚫ Ecrire un cookie
➢ 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:
– [Link] = Nom + "=" + Contenu + ";
expires=" + [Link]() ;
var Nom = "MonCookie" ; // nom du cookie
var Contenu = "Hé... Vous avez un cookie sur votre disque !" ; // contenu du cookie
var expdate = new Date () ; // crée un objet date indispensable
puis rajoutons lui 10 jours d'existence :
[Link] ([Link]() + ( 10 * 24 * 60 * 60 * 1000)) ;
[Link] = Nom + "=" + Contenu + "; expires=" + [Link]() ;
50

Les Cookies (7)

◼ Lecture d'un cookie


➢ Accéder à la propriété cookie de l'objet document.
➢ [Link]
var LesCookies ; // pour voir les cookies
LesCookies = [Link] ; // on met les cookies dans la variable LesCookies

◼ Modification d'un cookie


➢ Modifier le contenu de la variable Contenu puis réécrire le cookie sur
le disque dur du client
Contenu = "Le cookie a été modifié..." ; // nouveau contenu
[Link] = Nom + "=" + Contenu + "; expires=" +
[Link]() ; // écriture sur le disque
51

Les Cookies (8)

◼ Suppression d'un cookie


➢ Positionner 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)
[Link] ([Link]() - (1000)) ;

// écriture sur le disque


[Link] = Nom + "=" + Contenu + "; expires=" + [Link]() ;
Gérer les éléments d’un formulaire

Ce que vous allez apprendre dans ce chapitre :

• Soumission d’un formulaire


• Interruption d’un formulaire
• Validation d’un formulaire

05 heures
02 - Gérer les éléments d’un formulaire
Soumission d’un formulaire

Soumission d’un événement


La méthode submit() du DOM est utilisée pour soumettre les données du formulaire à l'adresse spécifiée dans l'attribut action. Cette
méthode se comporte comme le bouton de soumission du formulaire et ne prend pas de paramètres.

Syntaxe :
[Link]()

Exemple : <form id="FORM1" method="post" action="/[Link]">


<label>Nom <input type="text" name="nom"></label><br>
<label>Age <input type="text" name="Age"><label> <br>
<input type="submit" onclick="SoumettreForm()" value="SUBMIT">
<input type="button" onclick="ResetForm()" value="RESET">
</form>
<p id="message"></p>
<script>
function SubmitForm() { [Link]("FORM1").submit();
}
function ResetForm() { [Link]("FORM1").reset();
[Link]("message").innerHTML="Formulaire réinitialisé";
PARTI4

}
</script>

199
02 - Gérer les éléments d’un formulaire
Interruption d’un formulaire

Empêcher la soumission d'un formulaire


La fonction preventDefault() empêche l’exécution de l’action par défaut de l’événement.
Exemple :
<form onsubmit="EnvoyerForm(event)">
<input type="text">
<button type="submit">Envoyer</button>
</form>

<script type="text/JavaScript"> function EnvoyerForm(event){


[Link](); [Link]();
}
</script>
PARTIE 4

La méthode [Link]() renvoie à l’URL précédente dans l’historique.

201
02 - Gérer les éléments d’un formulaire
Validation d’un formulaire

La validation des données


La validation des données consiste à s'assurer que l'entrée de l'utilisateur est conforme aux données attendues. Parmi les types de vérifications à faire on cite :
• l'utilisateur a-t-il rempli tous les champs obligatoires ?
• l'utilisateur a-t-il saisi une date valide ?
• l'utilisateur a-t-il saisi du texte dans un champ numérique ?
• ….

On distingue deux types de validation :


• La validation côté serveur : effectuée par un serveur Web, une fois que les données sont envoyées au serveur.
• La validation côté client : effectuée par un navigateur Web, avant que les données ne soient envoyée à un serveur Web.

HTML5 a introduit un nouveau concept de validation HTML appelé « validation des contraintes » qui est basée sur :
PARTIE 4

Validation des
Validation des Validation des
contraintes par les
contraintes par les contraintes par les
propriétés et les
attributs d’une entrée. sélecteurs CSS.
méthodes du DOM.

203
02 - Gérer les éléments d’un formulaire
Validation d’un formulaire

Validation des contraintes HTML

Validation des contraintes en utilisant les sélecteurs CSS Validation des contraintes par les attributs

Sélecteur Description Attribut Description

:disabled Sélectionner les éléments désactivés disabled L'input doit être désactivé

:invalid Sélectionner les éléments dont la valeur est invalide max Spécifier la valeur maximale d'un élément input

:optional Sélectionner les éléments d'entrée sans attribut "requis" spécifié min Spécifier la valeur minimale d'un élément input

:required Sélectionner les éléments d'entrée avec l'attribut "requis" spécifié pattern Spécifier un modèle de chaine (Regex)

:valid Sélectionner les éléments d'entrée avec des valeurs valides required Saisie obligatoire

type Spécifier le type d'un élément input


PARTIE 4

204
02 - Gérer les éléments d’un formulaire
Validation d’un formulaire

Validation d’un formulaire


Exemple : Si un champ de formulaire (nom) est vide, la fonction affiche un message et renvoie false pour empêcher la soumission du formulaire

function validerForm() {
let x = [Link]["myForm"]["nom"].value;
if (x == "") {
alert("Le champ “nom” doit être saisi");
return false;
}
}

<form name="myForm" action="/[Link]" onsubmit="return validerForm()" method="post">


Nom: <input type="text" name="nom">
<input type="submit" value="Submit">
</form>
PARTIE 4

205
02 - Gérer les éléments d’un formulaire
Validation d’un formulaire

Validation automatique des formulaires HTML


La validation du formulaire HTML peut être effectuée automatiquement par le navigateur :
Si un champ de formulaire (nom) est vide, l'attribut required empêche la soumission du formulaire

<form action="/[Link]" method="post">


<input type="text" name="nom" required>
<input type="submit" value="Submit">
</form>
PARTIE 4

206

Vous aimerez peut-être aussi