3 JS

SMI 3 - Technologie Web - JS 18/10/2023
Partie 3: JAVASCRIPT (JS)
Pr. OULAD SAYAD Younes

y.ouladsayad@uiz.ac.ma
18/10/2023 1
INTRODUCTION
• Javascript permet de rendre dynamique un site internet développé en
HTML.
• 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.
18/10/2023 2
Pr OULAD SAYAD Younes 1

18/10/2023 3
18/10/2023 4

18/10/2023 5
INTRODUCTION
• JS n’est pas simple, et nécessite une relative bonne connaissance des
techniques de programmation.
• JS est écrit directement au sein du document HTML sous forme d'un
script encadré par des balises HTML spéciales.
• JS est standardisé par un comité spécialisé, l'ECMA (European Computer
Manufactures Association).
18/10/2023 6

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
18/10/2023 7
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
lors du chargement de la page HTML
dans le navigateur en même temps que
le contenu de la page HTML
s'affiche à l'écran.
• Le code JavaScript est placé

dans le head/body même de la page HTML.
18/10/2023 8

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">
............
• 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.
• 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
18/10/2023 9
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 document.write permet d ’écrire du code HTML dans la page WEB
18/10/2023 10

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>
18/10/2023 11
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 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 (*/)
18/10/2023 12

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

LES VARIABLES
• 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.
18/10/2023 15
LES VARIABLES
• 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 mathématique
incohérente
• Boolean
• deux valeurs littérales : true (vrai) et false (faux).
18/10/2023 16

VALEURS SPÉCIALES
• JavaScript inclut aussi deux types de données spéciaux :
• Null : possède une seule valeur, null signifie l’absence de données dans une
variable, on s'en sert par exemple pour assigner une valeur par défaut à des
variables, c'est une méthode beaucoup plus propre que d'assigner une valeur
arbitraire comme 0 pour un entier, ou une chaine de caractère vide pour une
chaine de caractère.
• Undefined : possède une seule valeur, undifined est retournée lorsqu'une

variable n'est pas déclarée, ou alors quand elle est déclarée, mais qu'aucune
valeur ne lui a été assignée.
18/10/2023 17
LES OPÉRATIONS SUR LES CHAÎNES

• La concaténation
• Var chaine = « bonjour » + « tout le monde »;
• 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

• Var ch1 =« Rebonjour ! »;
• Var carac = ch1.charAt(2);
• 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
18/10/2023
sous-chaîne à extraire 18

LES FONCTIONS PRÉDÉFINIES

• eval
• Cette fonction exécute un code Javascript à partir d'une chaîne de caractères.
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = 10;
var y = 20;
var a = eval("x * y") + "<br>";
var b = eval("2 + 2") + "<br>";
var c = eval("x + 17") + "<br>";
var res = a + b + c;
document.getElementById("demo").innerHTML = res;
}
</script>
18/10/2023 19

• isFinite
• Détermine si le paramètre est un nombre fini. Renvoie false si ce n'est pas un
nombre ou l'infini positif ou infini négatif. (Si nécessaire, le paramètre est d'abord
converti en nombre.)
isFinite(240) //retourne true
isFinite(‘‘240’’) //retourne true
isFinite("Un nombre") //retourne false
• isNaN
• détermine si le paramètre n’est pas un nombre (NaN : Not a Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false
18/10/2023 20


• 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
18/10/2023 21

• Number
• convertit l'objet spécifié en valeur numérique
var jour = new Date("December 17, 1995 03:24:00");//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%
18/10/2023 22

LES OBJETS
• 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.couleur.value
• link.couleur.value = verte
18/10/2023 23
LES OBJETS
• 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");
18/10/2023 24

LES OBJETS
• 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.*
18/10/2023 25
L'OBJET STRING
• 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;
18/10/2023 26

L'OBJET STRING
• 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;
18/10/2023 27
L'OBJET STRING/EXEMPLES
charAt(x) : slice(start, [end]):
concat(v1,v2,…) :
18/10/2023 28

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éments du tableau;
• slice( ) : retourne une section du tableau;
• sort( ) : permet le classement des éléments du tableau;
18/10/2023 29
L'OBJET ARRAY
var obj = {
0: 1,
1: 2,
'cat': 'meaow',
'': 'empty string'};
console.log(obj[0], obj[1], obj['cat'], obj['']);
Declaration:
• var arr = [1, 2, 3, 4];
• var arr = new Array(1, 2, 3, 4);
18/10/2023 30

L'OBJET ARRAY/EXEMPLES
Push/Pop/Shift/Unshift:
Concat/Slice/Splice:
18/10/2023 31
L'OBJET MATH
• 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);
18/10/2023 32

L'OBJET MATH
• 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.
18/10/2023 33
L'OBJET DATE
• 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;
• 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;
18/10/2023 34

LES OBJETS DU NAVIGATEUR

• 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é.
18/10/2023 35
LES OBJETS DU NAVIGATEUR
18/10/2023 36

L'OBJET WINDOW
• 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;
18/10/2023 37
L'OBJET WINDOW
• 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.
18/10/2023 38

L'OBJET WINDOW
• 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.
18/10/2023 39
L'OBJET DOCUMENT
• 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;
• referrer : indique l'adresse de la page précédente;
• title : indique le titre du document.
18/10/2023 40

L'OBJET 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
18/10/2023 41
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()
18/10/2023 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)
18/10/2023 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="window.document.formulaire.zone.value='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 window.document : l’adressage réussi puisqu’il n’y a
qu’un seul objet « document» dans la fenêtre
18/10/2023 44

FORMULAIRES : ACCÈS AUX CHAMPS
<form name='formu' onSubmit='return verif(this);'>

<input type='text' name='texte'> ...
<script type="text/javascript">
function verif(f) {
... f.texte.value ; }
</script>
Nom du champ  objet champ texte
<form name='formu'
Nom du formulaireonSubmit='return
 objet formulaire verif();'>
Objet formulaire
<input type='text' name='texte'> ...
Index du formulaire dans la page
Nom du champ dans le formulaire
Nom du formulaire dans la page
function verif(f) { Index du champ dans le formulaire
... document.formu.texte.value Nom du;champ dans le formulaire
... document.forms[0].elements[0].value ;
... document.forms["formu"].elements["texte"].value ; }
Tableau des champs du formulaire
</script>
Tableau des formulaires de la page
18/10/2023 45
Formulaires : Exemple
<form name='formu' onSubmit='return verif(this);'>
<input type='text' name='texte'><br>
<select name='sel'>
<option>?
<option value=1>Un
<option value=2>Deux
</select><br>
<input type='radio' name='rad' id='rad1'>
<label for='rad1'>oui</label>
<input type='radio' name='rad' id='rad2'>
<label for='rad2'>non</label><br>
<input type='checkbox' name='chk' id='chk1'>
<label for='chk1'>OK</label><br>
<input type='submit' value='Envoyer'>
</form>
18/10/2023 46

Formulaires : Exemple
function verif(f)
{
window.alert(f.texte.value) ;
window.alert(f.sel.selectedIndex) ;
window.alert(f.sel[f.sel.selectedIndex].text) ;
window.alert(f.sel[f.sel.selectedIndex].value) ;
window.alert(f.rad[0].checked) ;
window.alert(f.chk.checked) ;
return false ;
}
</script>
18/10/2023 47
LES COOKIES
• 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.
18/10/2023 48

LES COOKIES
• 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 "cookie.txt".
• Microsoft Internet Explorer stocke les cookies dans des répertoires tels que
"C:\WINDOWS\Cookies" ou encore "C:\WINDOWS\TEMP\Cookies".
18/10/2023 49
LES COOKIES
• 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’’
18/10/2023 50

LES COOKIES
• 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.
18/10/2023 51
LES COOKIES
• 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.
18/10/2023 52

LES COOKIES
• 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:
• document.cookie = Nom + "=" + Contenu + "; expires=" +
expdate.toGMTString() ;
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 :
expdate.setTime (expdate.getTime() + ( 10 * 24 * 60 * 60 * 1000)) ;
document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;
18/10/2023 53
LES COOKIES
• Lecture d'un cookie
• Accéder à la propriété cookie de l'objet document.
• Document.cookie
var LesCookies ; // pour voir les cookies

LesCookies = document.cookie ; // 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

document.cookie = Nom + "=" + Contenu + "; expires=" +
expdate.toGMTString() ; // écriture sur le disque
18/10/2023 54

LES COOKIES
• 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)

expdate.setTime (expdate.getTime() - (1000)) ;
// écriture sur le disque

document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;
18/10/2023 55
SetTimeout
SetTimeout indique un délai avant exécution
• Le méthode setTimeout définit une action à exécuter et un délai avant son exécution.
Elle retourne un identifieur pour le processus.
18/10/2023 56

ClearTimeout
ClearTimeout interrompt le décompte de setTimeout
• Cette méthode interrompt le délai et l'exécution du code associé à ce délai. Le processus
à supprimer est reconnu par l'identifieur retourné par setTimeout.
18/10/2023 57
SetInterval
SetInterval déclenche une opération à intervalles réguliers
• Similaire à setTimeout, elle déclenche répétitivement la même action à intervalles
réguliers.
18/10/2023 58

ClearInterval
ClearInterval stoppe l'action de setInterval
• Stoppe le processus déclenche par setInterval.
18/10/2023 59
Javascript & DOM

Arbre DOM
On représente la structure d’un document html à l’aide d’un arbre. On parle d’arbre DOM
(Document Object Model) du document.
18/10/2023 60

Javascript & DOM

Arbre DOM
• on parcourt le document séquentiellement.
• chaque élément est un nouveau nœud.
18/10/2023 61
Javascript & DOM

Pour manipuler les éléments de la page il faut au préalable les sélectionner.
La sélection d’éléments peut se faire
• par son attribut id
• par son attribut class
• par sa balise
• par un sélecteur CSS
• sélection par attribut name sur certains éléments :
18/10/2023 62

Javascript & DOM

Sélection par l’identité
Sélection par classe
Sélection par balise
Sélection par sélecteur

CSS
18/10/2023 63
Javascript & DOM
18/10/2023 64

Javascript & DOM
certaines pseudo-classes (:link, :visited) ne sont pas acceptés.
18/10/2023 65
Javascript & DOM

Manipuler les attributs:
- les atttributs html sont des propriétés
• même nom, en minuscules
• l’attribut class devient className
• la valeur peut être string, number ou boolean selon attribut
- on peut également utiliser getAttribute et setAttribute
• dans ce cas la valeur est toujours une chaîne de caractères
18/10/2023 66

Javascript & DOM
18/10/2023 67
Javascript & DOM

Manipuler le contenu:
lorsque la valeur de cette propriété est modifiée, son contenu est interprété par le navigateur
lorsque cette propriété est lue, elle ne contient pas les balises HTML
18/10/2023 68

Javascript & DOM
18/10/2023 69
Javascript & DOM

Agir sur les propriétés CSS:
• la propriété style d’un élément permet d’agir sur les propriétés CSS de cet élément mais
elle ne permet pas d’accéder aux valeurs des propriétés définies dans une feuille de
style, seulement aux propriétés définies dans le document HTML ou via style.
• on utilise directement le nom de la propriété CSS: font-size → fontSize, border-right-style
→ borderRightStyle, etc.
• les valeurs sont toujours des chaînes de caractères
• les unités doivent être précisées.
18/10/2023 70

Javascript & DOM
18/10/2023 71
Javascript & DOM

Style « calculé » :
Les sources de style peuvent inclure: des feuilles de style internes, des feuilles de style
externes, des styles hérités et des styles par défaut du navigateur.
18/10/2023 72

Javascript & DOM

• les propriétés CSS ont le même nom que précédemment
• pas de « raccourci » autorisé (margin, padding…), utiliser marginLeft, ...
• elles sont en lecture seule
• elles s’expriment en unité absolue (px)
18/10/2023 73
Javascript & DOM

18/10/2023 74

Javascript & DOM

Le type Node:
Un objet Node propose les propriétés :

• nodeName : le nom du nœud (balise en majuscules)
• nodeType : type du nœud défini par des constantes nommées prédéfinies,
Node.ELEMENT NODE (= 1), Node.TEXT NODE (= 3)
• nodeValue : null si le nœud est un élément, le contenu pour une nœud texte
18/10/2023 75
Javascript & DOM

Le type Node:
• parentNode : le nœud parent du nœud courant
• childNodes : la liste (NodeList) des fils du nœud courant
• firstChild, lastChild : le premier et dernier des nœuds fils
• previouSibling, nextSibling : le nœud frère précédent/suivant
18/10/2023 76

Javascript & DOM

Création:
• document.createElement(balise) : crée un nouveau nœud avec la balise donnée
• document.createTextNode(texte) : crée un nouveau nœud texte avec le contenu texte
fourni (non interprété)
• node.cloneNode qui a pour résultat un nouveau nœud copie de node.
Insertion:
• noeudParent.insertBefore(noeudInséré,noeudRéférence) : insère noeudInséré avant
noeudRéférence comme fils de noeudParent
• parent.appendChild(noeudAjouté) : le nœud noeudAjouté est ajouté à la fin des fils
de parent.
18/10/2023 77
Javascript & DOM

Suppression et remplacement :
• parent.removeChild(noeud) : noeud est supprimé des fils de parent
• parent.replaceChild(remplaçant,remplacé) : remplaçant prend la place de remplacé
comme fils de parent.
18/10/2023 78

EXERCICES
Exercice 1 : Réaliser des scripts simples avec JavaScript.
1. Ecrire une page HTML contenant un script permettant d’afficher
« Bonjour tout le monde »
2. Améliorer le script pour qu’il permette de demander le Prénom
de l’utilisateur (méthode prompt()) et afficher « Bonjour ‘votre
prénom’».
18/10/2023 79
Ex1 correction :
a)
<BODY><script language="JavaScript">
var phrase = "Bonjour tout le monde !";
document.write(phrase);
</SCRIPT>
</BODY>
</HTML>
b)
<BODY><SCRIPT language="JavaScript">
var phrase = "Bonjour";
var prenom = prompt("Entrer votre prénom");
document.write(phrase+" "+prenom );
</SCRIPT>
18/10/2023 80

Exercice 2 :
• Utiliser les méthodes JavaScript prompt() et alert() pour demander à
l’utilisateur deux nombres puis afficher leur somme.
18/10/2023 81
Ex2 correction :
<script language="JavaScript">
var a = prompt("Entrez le premier nombre");
var b = prompt("Entrer le deuxième nombre");
var somme = parseInt(a) + parseInt(b);
document.write("La somme de "+a+" et "+b+" égal à "+ somme);
</script>
18/10/2023 82

Exercice 3 : Réaliser des conditions (if/else)

• Ecrire un script demandant de l’utilisateur d’entrer son âge et de contrôler
la validité de l’âge entré (si l’âge est erroné afficher un message d’erreur et
redemander de saisir l’âge).
18/10/2023 83
Ex3 correction:
1ère solution
<html><head><title>Exercice3</title></head><body>
<script language="javascript">
var userage = prompt("Entrer votre age");
if ( userage <= 0 || userage > 150)
alert("Age non valide");
else
alert(userage+ "est valide");
</script>
</body>
</html>
18/10/2023 84

Exercice 4 : boucle for simple
• Ecrire une page HTML faisant apparaitre les nombres premiers

compris entre 0 et 100.
18/10/2023 85
Ex4 correction:
<html><head>Exercice4</head>
<body>
document.write("les nombres premiers compris entre 0 et 100 sont :<br>");
/* 0 et 1 ne sont pas des nombres premiers*/
for(var i=2;i<=100;i++)
{ var trouve=false;
for(j=2;j<i/2;j++)
{
if(i%j==0)
trouve=true;
}
if(trouve==false)/* S'il n'existe aucun diviseur de i*/
document.write(i,",");
}
</script>
</body>
</html>
18/10/2023 86

Exercice 5 : (S’amuser avec un bouton)

• Ecrire une page HTML contenant un formulaire. Ce formulaire contient un
bouton. Le click sur le bouton engendre la modification de la couleur de
l’arrière plan de la page.
Utiliser la commande suivante : document.bgColor= ‘’#FFFggF’’.
18/10/2023 87
EX6 correction:
1ère Solution
function modif()
{
document.bgColor="#fffggf";
}
</script> </head><body>
<form>
<input type="button" value="modifier" OnClick="modif()">
</form>
</body>
18/10/2023 88

LES ÉVÉNEMENTS
18/10/2023 89
Qu'appelle-t-on un événement?
• Les événements sont des actions de l'utilisateur, qui vont pouvoir donner
lieu à une interactivité.
• Grâce au Javascript il est possible d'associer des fonctions, des méthodes à
des événements tels que le passage de la souris au-dessus d'une zone, le
changement d'une valeur, ...
18/10/2023 90

POURQUOI DES GESTIONNAIRES D’ÉVÉNEMENTS ?
• Généralement le code JavaScript est exécuté en réponse à un événement.

• C’est pour cette raison que JavaScript à été rajouté au navigateur : Offrir
de l’interactivité
• Les gestionnaires d’événements sont le moteur de cette interactivité
18/10/2023 91
LES OBJECTIFS DES GESTIONNAIRES D’ÉVÉNEMENTS
• Détecter les actions de l’utilisateur

• Exécuter le code JavaScript associé
• Vous offrir la possibilité d’augmenter l’attrait de vos pages
18/10/2023 92

MÉTHODE D’ABONNEMENT
(EVENT LISTENERS)
• objet : l’objet cible : window, ou un élément de la page.

• eventType : une chaîne de caractères désignant le type d’événement
"click", "load", "change", "mouseover", "keypress" etc.
• listenerFunction : la fonction listener qui sera appelée lorsque
l’événement se produit
18/10/2023 93
MÉTHODE D’ABONNEMENT
(EVENT LISTENERS)
18/10/2023 94

INLINE EVENTS
• Ce sont les gestionnaires d'événements qui permettent d'associer
une action à un événement.
• La syntaxe d'un gestionnaire d'événement est la suivante :
onEvenement="Action_Javascript_ou_Fonction();"
18/10/2023 95
Les Gestionnaire d’événement
18/10/2023 96

Association des événements aux objets

Chaque événement ne peut pas être associé à n'importe quel Objet.
18/10/2023 97
ASSOCIER UN ÉVÈNEMENT A UN ELEMENT

• Pour ce faire il suffit des mettre dans la balise le nom de l’évènement
et de lui associé une fonction exemple :
<img src='une_image.jpg ' onclick='nom_de_lafonction(parametre1,parametre2)' />
<img src='une_image.jpg' onclick='fonction1() ; fonction2() ; fonction3()' />
18/10/2023 98

EVENT LISTENERS vs INLINE EVENTS
• Les fonctions 2, 3 et 4 fonctionnent, mais pas 1.

• En effet, addEventListener ne remplace pas les gestionnaires d'événements
existants, tandis que onclick remplace les onclick = fn événements par onclick =
fn existants.
• L'autre différence significative, bien sûr, est que onclick fonctionnera toujours, alors
que addEventListener ne fonctionne pas dans Internet Explorer avant la version 9.
Vous pouvez utiliser l' attachEvent analogue dans IE <9.
18/10/2023 99
onLoad
onLoad (en chargeant un fichier)
• Entre en action quand un fichier HTML est chargé.
<body onload="myFunction()">
• Exemple: </body>
En chargement afficher bonjour <script>
function myFunction() {
alert(”Bonjour");
}
</script>
18/10/2023 100

onAbort
onAbort (en cas d'interruption)
• Est prévu pour le cas où un utilisateur annule le chargement des graphiques
(<img>).
<img src="image_w3default.gif" onabort="alert('Error: Loading of the image was aborted')” />
18/10/2023 101
onChange
onChange (après modification réussie)
• Au cas où un élément a reçu une valeur modifiée .
• Exemple:
Créer une liste déroulante et on choisissant un élément de la liste afficher ca
valeur.
<select onchange="OnSelectionChange (this)"> <script type="text/javascript">
<option value="Apple" />Apple function OnSelectionChange (select)
<option value="Pear" />Pear {
<option value="Peach" />Peach var selectedOption = select.options[select.selectedIndex];
</select> alert ("The selected option is " + selectedOption.value);
}
</script>
18/10/2023 102

onClick
onClick (en cliquant)
• Au cas où l'utilisateur clique sur un élément.
• Exemple:
<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
18/10/2023 103
onDblClick
onDblClick (en double-cliquant)
• Au cas où l'utilisateur double-clique sur un élément.
• Exemple:
• Changer la couleur d’un texte en double cliquant dessus.
<p ondblclick="alert('double click');">Double click me <p>
18/10/2023 104

onError
onError (en cas d'erreur)
• Est approprié pour capter les messages d'erreur et les remplacer par des
messages personnalisés. Attention pourtant, les erreurs ne sont pas pour autant
écartées!!
• onError est conçu avant tout pour traiter les erreurs intervenant lors du
chargement de graphiques..
• Exemple:
• Inserer une image qui n’existe pas et remplacer la par une autre image.
<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals.jpeg';" >
18/10/2023 105
onFocus & onBlur

onFocus (en activant)
• Entre en action quand l'utilisateur active un élément.
onBlur (en enlevant le focus)

• Entre en action quand l'utilisateur desactive un élément.
18/10/2023 106

Exemple:
<input type="text" onfocus="showEvent('onfocus')" value="Calls a function on focus">

<input type="text" onblur="showEvent('onblur')" value="Calls a function on blur">
<p id="event"></p>
var statusUpdate = document.getElementById('event');

function showEvent(eventType) {
if ( eventType == "onfocus" ) {
statusUpdate.style.backgroundColor = "#FFFF80";
}
else {
statusUpdate.style.backgroundColor = "#BEFFC8";
}
statusUpdate.innerHTML = eventType;
}
18/10/2023 107
onKeyDown, onKeyUp & onKeyPress

onKeyDown (en appuyant sur une touche)
• Entre en action si l'utilisateur, alors qu'il a activé un élément, appuie
sur une touche caractère ou non-caractère (CTRL, SHIFT ..)
onKeyup (en relâchant la touche)
• Entre en action quand l'utilisateur appuie sur une touche et la
relâche.
onKeyPress (en appuyant sur une touche)
• L'événement keypress est déclenché lorsqu'une touche produisant
une valeur de caractère est enfoncée
18/10/2023 108

Press any key and get the message here: <span id="state-msg"></span>
var msg = document.getElementById('state-msg');
document.body.addEventListener('keydown', function(e) {
msg.textContent = 'keydown' ;});
document.body.addEventListener('keyup', function(e) {
msg.textContent = 'keyup';});
document.body.addEventListener('keypress', function(e) {
msg.textContent += 'keypress';});
18/10/2023 109
onMousedown & onMouseUp

onMousedown (en maintenant la touche de souris appuyée)
• Entre en action quand l'utilisateur maintient la touche de souris
appuyée.
onMouseup (en relâchant la touche de souris appuyée)
• Est déclenché par l'action de relâcher le bouton de la souris (bouton
droit ou bouton gauche) sur un élément HTML.
18/10/2023 110

onMousemove
• onMousemove (en bougeant la souris)
• Entre en action si l'utilisateur bouge la souris indépendamment du
fait que la touche en soit appuyée ou non.
18/10/2023 111
onMouseover, onMouseout & onMousemove

onMouseover (en enrant l'élément avec la souris)
• Il déclenche une action lorsque le curseur de la souris entre dans l'élément
sur lequel est déclaré cet évènement.
onMouseout (en quittant l'élément avec la souris)
• Entre en action quand l'utilisateur passe avec la souris sur un élément et le
quitte ensuite.
onMouseout (en bougeant la souris)
• Il est déclenché lorsque le curseur de la souris change de coordonnées.
18/10/2023 112

onSelect, onSubmit, onReset, onUnload

onSelect (en sélectionnant du texte)
• Entre en action quand l'utilisateur sélectionne du texte.
onSubmit (en envoyant le formulaire)
• Entre en action quand l'utilisateur envoie un formulaire.
onReset (en initialisant le formulaire)
• Entre en action quand l'utilisateur veut initialiser le formulaire.
onUnload (en quittant le fichier)
• Entre en action quand l'utilisateur quitte un fichier HTML.
18/10/2023 113

3 JS

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

3 JS

Transféré par

Droits d'auteur :

Formats disponibles

SMI 3 - Technologie Web - JS 18/10/2023

Partie 3: JAVASCRIPT (JS)

Pr. OULAD SAYAD Younes

• Javascript a été initialement élaboré par Netscape en association avec

Pr OULAD SAYAD Younes 1

Pr OULAD SAYAD Younes 2

Pr OULAD SAYAD Younes 3

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

1. INSERTION DANS UNE PAGE HTML

• Le code JavaScript est placé

Pr OULAD SAYAD Younes 4

2. INSERTION PAR APPEL DE MODULE EXTERNE

ENTRÉE ET SORTIE DE DONNÉES AVEC JAVASCRIPT

Pr OULAD SAYAD Younes 5

ENTRÉE ET SORTIE DE DONNÉES AVEC JAVASCRIPT

LA STRUCTURE D’UN SCRIPT EN JAVASCRIPT

Pr OULAD SAYAD Younes 6

Pr OULAD SAYAD Younes 7

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

• Les majuscules et les minuscules ont leur importance.

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

• Les mots réservés JavaScript ne peuvent être utilisés comme noms de

• trois principaux types de valeurs

Pr OULAD SAYAD Younes 8

• Undefined : possède une seule valeur, undifined est retournée lorsqu'une

LES OPÉRATIONS SUR LES CHAÎNES

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

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

• Extraction d’une partie de la chaîne

Pr OULAD SAYAD Younes 9

LES FONCTIONS PRÉDÉFINIES

LES FONCTIONS PRÉDÉFINIES

Pr OULAD SAYAD Younes 10

LES FONCTIONS PRÉDÉFINIES

LES FONCTIONS PRÉDÉFINIES

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

Pr OULAD SAYAD Younes 11

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

Pr OULAD SAYAD Younes 12

Pr OULAD SAYAD Younes 13

Pr OULAD SAYAD Younes 14

console.log(obj[0], obj[1], obj['cat'], obj['']);

Pr OULAD SAYAD Younes 15

Pr OULAD SAYAD Younes 16

Pr OULAD SAYAD Younes 17

LES OBJETS DU NAVIGATEUR

LES OBJETS DU NAVIGATEUR

Pr OULAD SAYAD Younes 18

Pr OULAD SAYAD Younes 19

Pr OULAD SAYAD Younes 20

Pr OULAD SAYAD Younes 21

NOMMAGE DES OBJETS-ÉLÉMENTS

MANIPULATION DES OBJETS

Pr OULAD SAYAD Younes 22

FORMULAIRES : ACCÈS AUX CHAMPS

<form name='formu' onSubmit='return verif(this);'>

Pr OULAD SAYAD Younes 23

• Que faire avec un cookie

Pr OULAD SAYAD Younes 24

• Où sont stockés les cookies

Pr OULAD SAYAD Younes 25

• La date d’expiration doit être au format :

• Utiliser les fonctions de l'objet Date