Orange Digital Center

Développement web Full Stack JS :

Niveau 1
S’initier au développement web

Formation en ligne – Du 14 au 16 Juillet 2022

1
Formateur
Anis ASSAS

• Ingénieur en informatique

• Enseignant universitaire
(Maitre Technologue à l’ISET Djerba)

• Formateur et conseiller expert

Email : assas_anis@yahoo.fr

2
 Fiche formation
o Durée : 3 jours

o Prérequis :
• Concepts de base de la programmation : variables, opérateurs, fonctions, classes/objets, tableau, …

o Objectifs :
• Différencier les notions de base telles que : Internet et Web et découvrir le fonctionnement du Web.
• Apprendre les bases de HTML et être capable de construire des squelettes de sites Web et des
structures essentielles.
• Créer des mises en page avec CSS
• Apprendre les fondamentaux de JavaScript.

o Méthodes pédagogiques :
• Notions théoriques et notes de cours
• Démonstrations et activités pratiques

3
Plan de la formation

1 Les fondements du développement web

2 Le langage HTML

3 Les feuilles de styles CSS

4 Le langage Java Script

4
Le langage Java Script

Java Script

5
Le langage Java Script : Plan
JavaScript : Les fondamentaux
o Données et opérateurs
o Tableaux
o Traitement conditionnel et itératif
o Fonctions
o Les objets en JavaScript Java Script
Evènements et données
o Evénements HTML
o DOM HTML
o Gestion des événements
o Web storage : les cookies, localStorage et sessionStorage
o Gestion des URLs
Gestion des formulaires
o Formulaire HTML
o Validation des formulaires
o Les expressions régulières 6
Introduction

• JavaScript est un langage de scripts qui est incorporé aux balises Html.
• Il permet d'améliorer l'interactivité des pages Web. Il est donc une extension du
code Html.
• Les scripts, qui s'ajoutent aux balises Html, sont gérés et exécutés par le browser
lui-même sans devoir faire appel aux ressources du serveur (langage côté client).
• Créé par Brendan Eich
• Initialement développé par Netscape et s'appelait alors LiveScript.
• Adopté à la fin de l'année 1995, par la firme Sun (qui a aussi développé Java), il a
pris alors le nom de JavaScript.
• Attention : JavaScript n’est pas Java
7
Introduction

JavaScript et Web2.0
• Appellations
• Web Social
• Web Participatif

• Principes
• Permettre l'interaction et la collaboration entre les utilisateurs
• Contenu généré dynamiquement et mis à jour fréquemment

• Technologies
• Forte utilisation du JavaScript pour supporter l'interactivité et la mise à jour du contenu
• Nécessité d'avoir un contenu bien formé et valide : XHTML

8
JavaScript : Vue d’ensemble

• Similaire à celui du langage C

• Les instructions se terminent pas un ";"
• Les commentaire sur une ligne commence par "//"
• Les commentaires sur plusieurs lignes sont entre "/*" et "*/"
• Les blocs sont délimités par "{" et "}"

• Langage Orienté Objet

• Langage interprété, faiblement typé
• Exécution :
• Lors du chargement d'une page Web, dès que le navigateur rencontre un script, il
l'exécute avant de charger la suite du document HTML

9
Standardisation

• ECMAScript (https://www.ecma-international.org) :
• Ensemble de normes standardisées par l’organisation européenne Ecma International
pour l’utilisation des langages de programmation du type Script.

10
Intégration du code JavaScript

• Au sein d’une page web :

<script type='text/javascript'>
instructions
</script>

• A partir d’un fichier externe

<script type='text/javascript' src="myScript.js"></script>

• Associé à une balise HTML qui gère un événement

<input type="submit" value= "Bonjour" onclick="alert('bonjour')"/>

11
Les constantes et les variables

• Les constantes
• Mot clé : const
• Nécessite une initialisation au moment de la création
• Ne peut pas changer de valeur après initialisation

• Les variables locales

• Mot clé : let

• Les variables globales

• Mot clé : var

12
Les constantes et les variables

• Exemples :

13
JavaScript : Les types de données

• Il y a cinq différents types de données susceptibles de contenir des valeurs :

• string
• number
Exemples :
• boolean
• object
• function console.log(typeof 'anis')
// affiche string
• Il y a six types d'objets :
• Object console.log(typeof true);
• Date // affiche boolean
• Array
• String console.log(typeof 5.2);
• Number // affiche number
• Boolean

• Il y a deux types qui ne peuvent pas contenir des objets :

• null
• undefined
14
Gestion des types de données

Typage :
• Statique :
• On déclare le type de données lors de la création de la variable
• Dynamique fort :
• Après l'affectation d'une valeur d'un type donné la variable ne peut plus changer de
type
• Dynamique faible :
• On peut changer le type de la variable selon la valeur affectée

Conversion :
• Vers une chaîne de caractères :
• La fonction toString()
• Vers un numérique :
• Objet Number offre les méthodes parseInt(String) et parseFloat(String)

15
Gestion des types de données

Exemples :

16
Les opérateurs

• Opérateurs d'égalité :
== === != !==

• Egalité stricte et égalité faible

• Egalité stricte (===) compare les types et les

valeurs

• Egalité faible (==) essaie de faire les

conversion de types nécessaires avant de faire
la comparaison des valeurs

17
Les opérateurs

• Valeurs considérés comme faux en JavaScript :

• false
• 0
• "" (Chaîne vide)
• null
• undefined
• NaN (Not ANumber)
• Opérateurs unaires :
• ++var
• var++
• --var
• var--
• var+
• var-
• +var 18
Les opérateurs

• Opérateurs logiques
• Et : &&
• Ou : ||
• Non : !

• Opérateurs relationnels
< > <= >=
• Opérateurs d'affectation :
• +=
• -=
• /=
• *=
• %=

19
Les tableaux

• Objectif :
• Stocker plusieurs valeurs dans une seule variable
• Exemples de déclarations :
var langages = ['JavaScript', 'Java', 'Python']

var langages = new Array('JavaScript', 'Java', 'Python')

• Remarques :
• Chaque élément d'un tableau peut être de n'importe quel type (exemple : l'élément
d'un tableau peut être un tableau)

• Chaque élément dans un tableau est accessible via son indice (exemple : langages[2])

• Premier élément d'un tableau est d'indice 0

20
Les tableaux

• Propriétés d'un tableau

• Longueur d'un tableau :
length

• Manipulation d'un tableau

• Ajouter à la fin du tableau
et retirer de la fin : push
et pop

• Ajouter au début et retirer

du début du tableau :
unshift() et shift()
21
Les tableaux

• Transformer un tableau en une chaîne de caractères

• toString() // le séparateur est une virgule

• join(" : ") // le séparateur est donné en paramètre, ici " : "

• concat() /* concatène le tableau sur lequel on applique la méthode à ceux donnés

comme paramètres et retourne le résultat qui est un nouveau tableau */

• slice() /* permet de retourner un sous tableau dont on peut spécifier l'indice de son
premier élément, et optionnellement l'indice de l'élément qui marquera la fin et qui
n'est pas inclus */

• sort() et reverse() /* il s'agit de convertir les éléments en chaînes de caractères

puis les trier ou les inverser selon l'ordre alphabétique */

22
Les tableaux

• Exemples de manipulation de tableaux :

let t1 = [1,2,3]
console.log(t1.toString())
console.log(t1.join(":"))
let t2= ['A','B','C']
let t3=t1.concat(t2)
console.log(t3)
let t4 = t3.slice(1,4)
console.log(t4)
let t5 = t4.concat(t3)
console.log(t5)
console.log(t5.sort())
console.log(t5.reverse())
•

23
Traitement conditionnel

• if/else : • switch : var x = 5;

switch (x) {
var x = -3; case 1:
if (x > 0) { alert('un');
console.log(x + " est strictement positif"); break;
} case 2:
else if (x < 0) { alert('deux');
console.log(x + " est strictement négatif"); break;
} case 3:
else { alert('trois');
console.log(x + " est nul"); break;
} default:
alert('autre');
}

• Conditions ternaires var nbr = prompt('Saisir un nombre');

nbr % 2 == 0 ? alert('pair') : alert('impair');

let test = isNaN(val) ? « Non valeur numérique" : "c'est une valeur numérique";

24
Traitement itératif

• Boucle for :

• Instruction 1 : exécutée une seule fois avant d'entrer dans la boucle

• Instruction 2 : condition autorisant l'exécution de la boucle
• Instruction 3 : exécutée après chaque itération

25
Traitement itératif

• Boucles for/in et for/of

• Permettent d'itérer respectivement sur les propriétés d'un Objet et sur les éléments
d'un Objet itérable (exemple : un tableau)

26
Traitement itératif

• Boucle while et do/while

• Tant que la condition est vraie la boucle itère, la
deuxième forme permet d'itérer au moins une
fois avant de vérifier la condition

• Altérer l'exécution d'une itération

• break : permet de sortir d'une façon prématurée
d'une boucle
• continue : permet de passer à l'itération
suivante

27
Les fonctions

• Déclaration :
function nomDeFonction( liste de paramètres séparés par des virgules){
instructions;
}

• Exemple :

28
Les fonctions

• Fonction avec des paramètres variables :

• vars est traité comme un tableau et doit être le dernier paramètre

29
Les fonctions

• Fonction anonyme : let f = function() {

console.log("Je suis une fonction")
}
f()

• Appel immédiat d'une fonction anonyme :

(function() {
console.log("Je suis une fonction")
})()

• Les closures : function direBonjour(nom) {

var texte = 'Bonjour ' + nom; // Variable locale
var dire = function() { console.log(texte); }
return dire;
}
var maFonction = direBonjour('Anis');
maFonction();
30
Les fonctions

• Fonctions fléchées :
let getNombre = () => {
return Math.random() ;
}
console.log(getNombre());

let getMessage = (prefixe, suffixe) => {

let nombre = Math.random()
return prefixe + nombre + suffixe
}
console.log( getMessage('(',')') )

• Paramètres par défaut :

let affichePrix = (valeur, devise = 'Euros') => {
console.log("Prix = "+ valeur +" "+ devise)
}
console.log(affichePrix(100, 'Dollars'))
console.log(affichePrix(200))
31
Les objets en java Script

• Notion d’objet :
• JavaScript est basé sur la notion d’objet. Un objet est un ensemble de
propriétés.

• Une propriété associe un nom à une valeur. La valeur d'une propriété peut être
une fonction : elle sera alors appelée méthode de l'objet.

• Il existe en standard des objets prédéfinis au sein du noyau JavaScript ou

aussi au niveau du navigateur :
• Math, Date, String, Array, … (Ex: Math.random() )
• window document, location, history, … (Ex : window.document.title)

• Il est possible aussi de définir ses propres objets : objets spécifiques

32
Déclaration d’objets : avec initialisation

• Avec initialisation d’objet :

• Syntaxe :
var obj = { propriété_1 : valeur_1;
propriété_2 : valeur_2;
...
propriété n : valeur_n
};

• Exemple : Créer l’objet maTwingo ayant 3 propriétés

var maTwingo = { couleur: "verte";

nbRoues: 4;
nbplaces: 7;
};
33
Déclaration d’objets : avec new

• Avec constructeur d’objet :

• On définit le type de l'objet en écrivant une fonction qui est un constructeur.
Puis, on crée une instance de l'objet grâce à l’opérateur new.
• Exemple :
function Voiture(f, m, a) {
this.fabricant = f;
this.modele = m;
this.annee = a;
}

• Le mot-clé this désigne l’objet en cours. Il est utilisé afin d'affecter les valeurs
passées en arguments de la fonction, aux propriétés de l'objet :

var maVoiture = new Voiture("Renault", "Twingo", 2006);

var voitureA = new Voiture("Nissan", "300ZX", 1992);
var voitureB = new Voiture("Mazda", "Miata", 1990);

34
Déclaration d’objets : avec new Object()

• Avec constructeur d’objet :

• Il est possible de déclarer des objets avec l’opérateur new Object().
• Exemple :
var maVoiture = new Object();
maVoiture.fabricant = "Ford";
maVoiture.modele = "Fiesta";
maVoiture.annee = 2012;

• Remarque : Un objet peut avoir des propriétés sous forme d’objets.

• Exemple : soit un objet personne,

function Personne(nom, age, numTelephone) {
this.nom = nom;
this.age = age;
this.numTelephone = numTelephone; } 35
Déclaration d’objets
• On déclare deux objets du type « Personne », qui seront propriétaires de deux
objets du type « voiture ».
var flen= new Personne("flen ben flen", 33, "06666666");
var falten= new Personne("falten ben flen", 42, "01111111");
• On redéfinit l’objet voiture en rajoutant une propriété « proprietaire » qui sera
d’objet personne.
function Voiture(f, m, a, p) {
this.fabricant = f;
this.modele = m;
this.annee = a;
this.proprietaire = p;}
• Pour instancier (créer) les nouveaux objets, on utilisera l’opérateur new :
var voitureA = new Voiture("Nissan", "micra", 2013, flen);
var voitureB = new Voiture("Peugeot", "208", 2014, falten);

36
Déclaration de méthode
• Une méthode est une fonction associée à un objet. Elle est définie comme une fonction
affectée à une propriété de l'objet.
• Exemple1 : Soit la déclaration de la fonction suivante
function afficheVoiture() {
var result = "Une voiture de " + this.annee + " construite par " +
this.fabricant + " : " + this.modele;
document.write(result); }
• Cette méthode pourra être affectée à une propriété.
function Voiture(f, m, a, p) {
this.fabricant = f;
this.modele = m;
this.annee = a;
this.proprietaire = p;
this.afficheV = afficheVoiture; }
• Appel de la méthode afficheCar pour chaque objet : voiture1.afficheV(); 37
Déclaration de méthode
• Exemple 2 :
function Rectangle(x, y, l, h){
this.x = x; Deplacement de rect1 :
this.y = y; x = 12
this.largeur = l; Y = 12
this.hauteur = h;
this.surface = this.largeur * this.hauteur;
this.deplacer = deplacement; }
function deplacement(dx, dy) {
this.x = this.x + dx; this.y = this.y + dy; }
//instanciation d’objet et exploitation de la méthode
var rect1 = new Rectangle(10, 25, 60, 100);
rect1.deplacer(2,-13);
document.write("Deplacement de rect1 :<br />");
document.write("x = "+ rect1.x +"<br />");
document.write("y = "+ rect1.y +"<br />");
38
Déclaration de méthode

• Exemple 3 :

39
Déclaration de méthode

• Prototypes :

40
Notion de classe

• Définition d’une classe :

• Définition de constructeurs et de propriétés :

•

41
Notion de classe : méthodes

• Définition de méthodes :

42
Notion de classe : héritage

• Notion d’héritage :

43
Quelques objets prédéfinis
• L’objet String :
Méthode
Création chaine
Longueur chaine
Equivalents des balises
HTML
Extraire sous chaine
Extraire caractère
Chercher indice sous chaine
Conversion en minuscules et
en maj.
Exemples
chaine = "Bonjour Anis" ou encore chaine = new String("Bonjour
Anis")
chaine.length // 12
chaine.big(), bold(), italics(), small(), strike(), sup(), sub(),
fontsize(taille), fontcolor(couleur)
chaine.slice(1,10); // onjour An chaine.slice(2);// njour Anis
chaine.substr(1,10) // onjour Ani chaine.split(" ")) // [Bonjour,Anis]
chaine.charAt(1) // o
chaine.indexOf("on") // 1 chaine.lastIndexOf("o")) // 4
chaine.toLowerCase()) // bonjour anis
chaine.toUpperCase() // BONJOUR ANIS
44
Quelques objets prédéfinis

• L’objet Math :
Méthode Exemples
abs() x = Math.abs(-3.85); // 3,85
ceil() x = Math.floor(3.85); // 4
floor() x = Math.floor(3.85); // 3
round() x = Math.round(3.85); // 4
x = Math.round(6.49); // 6
max(), min() x = Math.max(6,3.14); // 6
x= Math.min(6, 3.14); // 3.14
pow() x = Math.pow(2,3); // 8
random() x = Math.random(); // 0.6489534931546957
sqrt() x = Math.sqrt(9); // 3

45
Quelques objets prédéfinis

• L’objet Date :

Méthode Exemples
Création date d = new Date() //Date et heure actuelle
d = new Date("2022,03,20,10:30:00") //Sun Mar 20 2022 10:30:00
GMT+0100 (UTC+01:00)
Récupérer une date d.getDate()) //20 d.getDay()) //0 (dimanche) d.getMonth()) //2
d.getFullYear() //2022 d.getYear() //122 (2022-1900)
d.getHours() //10 d.getMinutes() //30 d.getSeconds() //0
Mettre à jour une date d.setDate(X), setDay(X), setMonth(X), setYear(X), ...

Conversion de date d.toGMTString() //Sun, 20 Mar 2022 09:30:00 GMT

d.toLocaleString() //20/03/2022 10:30:00
d.getTimezoneOffset() //-60

46
Java Script : les fondamentaux

Récapitulatif
JSpermet la déclaration des constantes et des
variables avec un typage dynamique faible
Tout tableau permet de stocker en une seule variable
une suite de valeurs et offre des propriétés et des
méthodes pour lesmanipuler
Plusieurs instructions permettent de contrôler le flux
d'exécution d'une façon conditionnelle et itérative
Plusieurs formes et façons permettent de déclarer des
fonctions en JS
Plusieurs façons permettent de créer des Objets en JS

47
JavaScript : Evénements et données

Evénements HTML
DOM HTML
Gestion des événements
Gestion des cookies
Gestion des URLs
48
Evénements HTML

• Evénements qui se produisent au niveau des éléments HTML d'une page

Web, tels que :
• Fin de chargement d'une page Web
• Un champ de formulaire a changé de valeur
• Un bouton a été cliqué
• etc.

• JavaScript permet de réagir à ces événements de deux façons :

• En attachant une fonction JavaScript à un événement dans le code HTML

• En définissant un écouteur d'événement sur un élément HTML et lui attacher

une fonction dans un script JS
49
Evénements HTML

• Association événement/code dans le HTML :

<balise événement="fonction JavaScript"> … </balise>

• Quelques types d'événements HTML :

onchange Un élément HTML c'est chargé
onclick Un click sur un élément HTML
onmouseover La souris survole un élément HTML
onmouseout La souris quitte un élément HTML
onkeydown Un bouton du clavier est appuyé
onload Le navigateur complète le chargement de la page

50
Evénements HTML
• Exemple :
<html>
...
<body onload="doOnload()">
<button onclick=" doOnclick()"> Ecrire dans le log</button>
<script type =" text/javascript " src="exempleEvenements.js"></script>
</body>
</html>

function doOnload(){
console.log(" Fin de chargement de la page.");
}
let compteurClicks = 0 ;

function doOnclick(){
console.log("Vous avez cliqué sur le bouton pour la "+(++compteurClicks)+" fois");
}

51
 DOM HTML : Document Object Model

• Le DOM est une interface de programmation qui permet à des scripts d'examiner et de modifier le contenu
du navigateur web.
• Lorsqu’une page est chargée, le navigateur crée une arborescence d’objets (Document Object Model)
qui décrit la page : Chaque nœud de l’arbre est considéré comme un objet.

• Les principaux types de nœuds sont:

• Document : la racine
• Element : les balises standards
• Text : le texte
• Comment : les commentaires
• Attr : les attributs des balises
• Processing instructions : les
balises spécifiques comme par
exemple <?php...?>
52
DOM HTML : c’est quoi ?

• Le DOM HTML est une norme standard qui définit :

• Les éléments HTML comme des objets (obtenir, ajouter, modifier ou supprimer ces éléments)
• Les propriétés de tous les éléments (les valeurs des éléments HTML qu’on peut définir ou
modifier)
• Les méthodes pour accéder aux éléments
• Les événements qu’on peut effectuer sur les éléments
• Avec le DOM, JavaScript peut créer une page HTML dynamique, il peut :
• changer tous les éléments et les attributs HTML ainsi que tous les styles CSS dans la page
• supprimer des éléments et attributs HTML existants
• ajouter de nouveaux éléments et attributs HTML
• réagir à tous les événements HTML existants dans la page
• créer de nouveaux événements HTML dans la page
53
Objets du DOM

• window
• Objet de plus haut niveau dans JavaScript
• Représente une fenêtre ouverte au sein d'un navigateur contenant la page Web en
cours
• Comporte des propriétés tels que : opener (informations sur la fenêtre qui a
ouvert la fenêtre en cours), navigator (informations sur le navigateur), etc.

• document
• Objet qui appartient à l'objet window
• Offre les méthodes et les propriétés nécessaires pour manipuler le DOM, tels que :
addEventListener(), setAttribute(), className, style, innerHTML, etc.

54
Objets du DOM

• Exemple :

<body>
<div id="navigator"></div>
<script>
let monNavigateur = window.navigator.appVersion //info. version du navigateur
let monDiv = document.getElementById("navigator") //trouver l’élément par id
monDiv.innerHTML = monNavigateur //changer le contenu html
monDiv.style.color = 'red' //changer la couleur du style
</script>
</body>

55
Objets du DOM : trouver les éléments

• Pour agir sur le DOM, il faut tout d'abord trouver des éléments particuliers

• Le DOM offre une API contenant des fonctions appropriées afin de trouver les éléments, dont :

56
Objets du DOM : modifier les éléments

• Pour agir sur des éléments trouvés dans le DOM, celui-ci offre une API permettant de changer
certains aspects d'un élément :

• Pour modifier la structure du DOM, l'API contient plusieurs fonctions dont :

57
Objets du DOM
• Exemple :
<body>
<button onclick=" ouvrirWin()"> Ouvrir</ button>
<button onclick="fermerWin()">Fermer</button>
<button id="boutonImp" onclick="imprimerWin()" disabled="true">Imprimer</button>
<script>
var monWindow;
function ouvrirWin() {
monWindow = window.open("", "monWindow", "width= 200 , height= 100 " );
monWindow.document.write("<p>C'est ma nouvelle fenêtre ! </p>") ;
document.getElementById("boutonImp").disabled = false ;
}
function fermerWin() {
monWindow.close( ) ;
document.getElementById("boutonImp").disabled = true ;
}
function imprimerWin() { monWindow.print(); }
</script>
</body> 58
Gestion des événements

• Lorsqu'un événement survient, un objet Event permettant de le décrire est créé.

• Dispose de propriétés et de méthodes, dont certains concernent tous les types

d'événements :
• type : retourne le type de l'événement (exemples : click, load, keydown,etc.)

• target : permet de récupérer l'élément depuis lequel l'événement a été envoyé

• stopPropagation() : arrête la propagation de l'événement vers d'autres

éléments dans le DOM

• preventDefault() : empêche l'exécution du comportement par défaut de

l'élément quand il reçoit l'événement

59
Gestion des événements

• Gestionnaire d’événements DOM :

• Première approche :

<input type="button" id="bt" onclick="alert('Vous avez cliqué sur '+ this.id +'.')"
value="Bouton" >

• Deuxième approche :

<input type="button" id="bt" value="Bouton">

<script>
document.getElementById("bt").onclick = function(event) {
alert('Vous avez cliqué sur '+ this.id +'.')
}
</script>

60
Gestion des événements

• Autre exemple :

<head> <script>
<style> function rouge(){
div { console.log("Type de l'événement :"+event.type)
padding: 50px; console.log("Target :"+event.target)
cursor: pointer; event.target.style="background-color:green"
}
</style> alert("rouge");
</head> event.stopPropagation();
<body> }
<div style="background-color:gold" function jaune(){
onclick="jaune()"> alert("jaune");
Parent }
<div style="background-color:red" </script>
onclick="rouge()"> </body>
Fils
</div>
</div>

61
Gestion des événements

• Ecouteur d’événements :
• Principe :
• On sélectionne un élément HTML
• Par exemple via : document.getElementById(id)

• On lui attache un écouteur d'événements via la méthode : addEventListener()

• Ajouter un écouteur d'événements
addEventListener(événement, fonction)
• Événement : click, mousemove, etc.
• Fonction : c'est la fonction à exécuter si l'événement se produit sur l'élément
• Supprimer un écouteur d'événements
removeEventListener(événement, fonction)

62
Gestion des événements

• Exemple :

<input type="button" id="bt" value="Bouton">

<script>
var x= document.getElementById("bt")
x.addEventListener('click',f)

function f(){
alert('Vous avez cliqué sur '+ this.id +'.')
}
</script>

63
Gestion des événements

• Exercice :
• Objectif :
• On souhaite créer une page Web avec deux boutons
• Chaque bouton porte le nom d'une couleur
• Si on clique sur un bouton l'arrière plan de la page va prendre cette
couleur
• Démarche :
• Création d'une page HTML qui contient deux boutons
• Attribuer à chaque bouton et à la balise <body> un identificateur
• Relier la page HTML à un fichier JavaScript externe
• Dans le fichier JavaScript, on récupère les deux boutons dans des
variables
• On associe un écouteur d'événement à chaque bouton
• On écrit le code des fonctions : changeJaune() et changeOrange() qui
vont permettre de changer la couleur d'arrière-plan 64
 Gestion des événements

• Extraits de code source :

// Récupération des éléments

var b = document.getElementById("b")
<body id="b">
var bj = document.getElementById("bj");
<input type="button" id="bj" value="Arrière plan Jaune">
var bo = document.getElementById("bo");
<input type="button" id="bo" value="Arrière plan Orangé">
<script src="exerciceDOM.js"></script>
// Association des écouteurs d'évènements
</body>
bj.addEventListener('click',changeJaune)
bo.addEventListener('click',changeOrange)

function changeJaune(){
b.style.background="yellow"
}

function changeOrange(){
b.style.background="orange"
}

65
Gestion des cookies

• Présentation :
• Un cookie permet de sauvegarder une feuille de style choisie par un utilisateur
pour l'afficher quand il revient sur la page.

• Ensemble de données stockées dans un fichier texte de petite taille sur le client
pour un navigateur et associé à un domaine donné (serveur)

• Permet de surmonter le fait que le protocole http est sans état

• A chaque envoi de requête http à un serveur, les cookies qui lui sont associés sont
automatiquement ajoutés

• Par défaut un cookie est supprimé lorsque le navigateur est arrêté, sinon lorsque
une date d'expiration est atteinte.
66
Gestion des cookies

• API JavaScript

• Création d'un cookie (s'il existe le nouveau contenu écrase l'existant) :

document.cookie = "background=Yellow";
• Création d'un cookie avec une date d'expiration (une date ultérieure à la date
système supprime le cookie) :
document.cookie = "background=Yellow; expires=Thu, 17 Dec 2020
12:00:00 UTC"
• Création d'un cookie associé à un chemin particulier (par défaut la page
courante)
document.cookie = "background=Yellow; expires=Thu, 17 Dec 2020
12:00:00 UTC; path=/";
• Lecture d'un cookie
let c = document.cookie;
67
Gestion des cookies

• Exercice :
• Objectif :
• Une fois qu'on a choisi une couleur d'arrière plan, celle-ci est stockée dans un cookie
• Si la page est rechargée, on doit trouver la dernière couleur d'arrière plan choisie

68
Gestion des cookies

• Démarche :
• Ajouter une fonction setCookie(valeur) qui permet d'écrire un cookie qui stocke une
couleur donnée comme paramètre

• Appeler la fonction setCookie() dans les fonctions changeJaune() et changeOrange()

• Ajouter une fonction getCookie() qui permet de récupérer le cookie, puis la valeur qui est
stockée dedans et la retourner.

• Ajouter un écouteur d'événement à la fenêtre pour lancer une fonction setBackground()

au chargement

• Ajouter la fonction setBackground() qui permet de récupérer la couleur de la fonction

getCookie() puis si elle est différente de "" l'utiliser pour fixer la couleur d'arrière plan
69
Gestion des cookies

• Extraits de code source :

function changeJaune(){
b.style.background="yellow"
setCookie('yellow')
} function setBackground(){
function changeOrange(){ let c = getCookie()
b.style.background="orange" if(c != "")
setCookie('orange') b.style.background = c;
} }
function setCookie(valeur){
document.cookie = "background="+valeur+"";
}
function getCookie(){
var c = document.cookie;
return c.slice(11)
}
window.addEventListener('load',setBackground)
70
LocalStorage et sessionStorage

• L'API localStorage et l’API sessionStorgae sont des fonctionnalités du

langage JavaScript qui permettent de stocker des objets dans la mémoire du
navigateur.

• Deux propriétés permettant d’accéder respectivement aux deux objets : Storage et

Session

• localStorage : stocke les données sans date d’expiration

• sessionStorage : stocke les données pour une connexion (les données sont
perdues lorsque l’onglet du navigateur est fermé)

71
LocalStorage et sessionStorage

• Pour créer ou mettre à jour une variable session

• localStorage.setItem('prenom', ‘anis');
On peut aussi faire
• localStorage['prenom'] = 'anis'; ou encore localStorage.prenom = ‘anis';

• Pour récupérer une variable de localStorage

• let prenom = localStorage.getItem('prenom');

• Pour supprimer une variable de localStorage

• localStorage.removeItem(‘prenom');

• Pour vider localStorage

• localStorage.clear();
72
LocalStorage et sessionStorage

• Pour connaître le nombre de variables session

• localStorage.length

• Pour stocker un objet dans localStorage

• let perso = { nom: 'assas', prenom: 'anis' };

• localStorage.setItem("person", JSON.stringify(perso));

• Pour récupérer un objet de localStorage

• let p = JSON.parse(localStorage.getItem("person"));

73
 LocalStorage et sessionStorage

• Pour tester la compatibilité de localStorage avec le navigateur

if (window.localStorage) {
...
}

• Pour itérer sur localStorage

for (let i = 0; i < localStorage.length; i++){

let clef = localStorage.key(i);
let valeur = localStorage.getItem(clef);
console.log(clef, valeur);
}

74
Manipulation des URLs

• On peut simuler un click sur la souris pour visiter un lien

window.location.href = "http://www.google.fr";

<input type="button" id="go" value="Google">

var go = document.getElementById("go")
go.addEventListener('click',allerGoogle)
function allerGoogle(){
window.location.replace("http://www.google.fr" );
}

• On peut également rédiger la page vers une autre adresse (la page qui fait la
redirection ne reste pas dans l'historique)
window.location.replace("http://www.google.fr" );

75
Gestion des événements

Récapitulatif
L'interactivité est basée sur la capture des
événements qui se produisent au niveau d'une
page
Une page Web peut être représentée sous forme
arborescente avec une API DOM permettant d'agir
sur son contenu
On peut répondre aux événements par des actions
sur le DOM HTML
Le JS permet de travailler avec les cookies et
également de passer vers d'autres pages Web
d'une façon programmée
76
JavaScript : Gestion des formulaires

Formulaire HTML
Validation des formulaires
Les expressions régulières

77
Formulaire HTML

• Formulaire HTML
• Moyen fréquemment utilisé pour
collecter des données de la part de
l'utilisateur
Syntaxe de base :
<form action="…" method="…">
...
</form>

• action : adresse de la page à laquelle

une requête sera envoyée avec les
données
• method : mode d'envoi de la requête
(POST ou GET)
78
Formulaire HTML

• Formulaire dans HTML 5

• Plusieurs nouveaux types de champs pour les formulaires.
• email,
• url,
• tel,
• number,
• range,
• color,
• date, time, week, month, datetime, datetime-local
• search.

• L'intérêt c'est que c'est le navigateur qui se charge de vérifier la validité des données saisies
dans les champs.

79
 Gestion des Formulaires

• Pour récupérer les formulaires d'une page Web sous forme d'une collection :
• document.forms

• Pour utiliser la collection de formulaires

• length : pour récupérer le nombre d'éléments dans la collection
• [id] ou [name] : retourne le formulaire associé à cet id ou name

• Pour récupérer un élément d'un formulaire

• [id] ou [name] : retourne l'élément du formulaire associé à cet id ou name

• Pour accéder à l'élément d'un formulaire

• value : attribut permettant de récupérer la valeur d'un élément
• Exemple :
80
Gestion des Formulaires

• Exemple :
<form name="monForm" type="submit">
Nom : <input type="text" name="nom" id="nom"><br>
Prénom : <input type="text" id="prenom"><br>
<input type="button" id="bouton" value="Envoyer">
</form>
<script>
let b = document.getElementById("bouton")
b.addEventListener("click",f)

function f(){
let nom = document.forms["monForm"]["nom"].value
let prenom = document.forms["monForm"]["prenom"].value
console.log(document.forms)
console.log("Nom : "+nom+" Prenom : "+prenom)
}
</script>
81
Validation de formulaire

• Exercice :
• Un formulaire qui comporte un champ texte pour saisir le nom : déclencher une fonction
JavaScript suite à l'événement "onSubmit" du formulaire afin de vérifier la validité des
données.

Scénario 1 :
Succès

Scénario 2 :
Champ vide

82
Validation de formulaire

• Extrait de code source :

<form name="monForm" onsubmit="valider()">
Nom : <input type="text" name="nom">
<input type="submit" value="Envoyer">
</form>

<script>

function valider(){
event.preventDefault()
let nom = document.forms["monForm"]["nom"].value
nom != "" ? alert("Bonjour "+nom) : alert("Il faut saisir le nom !")
}

</script>

83
Les expressions régulières : Définition

• Les expressions régulières : aussi nommées "regex"

• Les expressions régulières sont des modèles utilisés pour vérifier des combinaisons
de caractères dans les chaînes de caractères

• Les expressions régulières sont utilisées pour effectuer des fonctions de recherches
et de remplacements sur le texte

• Création : La création d’une expression régulière se fait via un constructeur d’objet

ou un littéral
• Forme littérale : var er = /motif/;
• Constructeur d’objet : var er = new RegExp("motif");

Exemple : Motif=/[abc]/; est équivalent à : Motif= new RegExp("[abc]");

84
 Les expressions régulières : opérateurs

• La construction des expressions régulières est basée sur des opérateurs, des méta
caractères et des modificateurs

• Opérateurs de groupe :
Opérateur Désignation Exemple
. Un caractère quelconque /./
() Un groupe de caractères en ordre /(bon)/
Un caractère parmi ceux entre crochets.
/[abc]/
S’il y a l’opérateur « - », ceci désigne un
[] /[m-z]/
intervalle
/[0-9[m-z]]/
On peut avoir une imbrication de crochets

85
 Les expressions régulières : opérateurs

• Opérateurs de parties et opérateurs logiques :

Opérateur Désignation
/^bon/ => chaîne qui commence par « bon »
^
/^[a-zA-Z]/=> chaine qui commence par un alphabet
/coeur$/ => chaîne qui se termine par coeur
$
/[0-9]$/ => chaîne qui se termine par un chiffre

/ep|ew/ => chaîne qui contient la sous-chaine ep ou ew ou les

x|y
deux à la fois

NB : [^a-z] correspond à une exclusion d'un ensemble de caractères, c-a-d tout ce qui
n'est pas compris entre crochets.

86
 Les expressions régulières : opérateurs

• Opérateurs de quantification :

Opérateur Désignation
? /a?/ => chaîne qui contient une lettre a ou aucune
/[0-9]?/ => chaîne qui contient un chiffre ou aucun
+ /a+/ => chaîne qui contient au moins une lettre « a »
* /a*/ => chaîne qui contient un nombre quelconque de « a »
(y compris zéro)
{n} /[a-z]{4}/ => chaîne qui contient exactement 4 lettres
{n,m} /[a-z]{4,8}/ => chaîne qui contient au minimum 4 et au
maximum 8 lettres
{n,} /[a-z]{4,}/ => chaîne qui contient au minimum 4 lettres

87
 Les expressions régulières : opérateurs

• Méta-caractères et syntaxe :

Opérateur Désignation

\t Code de tabulation
\n Code de fin de ligne
\r Code de retour à la ligne
\s Code de séparation quelconque: espace blanc, tabulation, retour à la
ligne, etc.
\S Tout caractère autre qu'un espace
\d Tout caractère numérique. Equivaut à [0-9]
\D Tout caractère non numérique. Equivaut à [^0-9]
\w Tout caractère alphanumérique. Equivaut à [_A-Za-z0-9]
\W Tout caractère autre qu'alphanumérique. équivaut à [^_A-Za-z0-9]

88
 Les expressions régulières : opérateurs

• Métacaractères et syntaxe :

Opérateur Désignation
\b Recherche un motif au début ou à la fin du mot dans une
chaine
/\bef/ => rechercher « ef » au début d'un mot
/ef\b/ => rechercher « ef » à la fin d'un mot
\B Recherche un motif là où il n’est pas au début ou à la fin
du mot dans une chaine
NB :
\ Arrête l’interprétation d’un caractère donné.
/\./ => le caractère « . » ne remplace pas tout caractère
mais le caractère « . » en lui même

89
 Modificateurs

• Le modificateur « i » est employé pour effectuer une recherche ne distinguant pas

majuscules et minuscules.

• Le modificateur « g » est employé pour effectuer une recherche globale (trouver

toutes les occurrences plutôt qu'en s'arrêtant après la première trouvée)

• Exemples :
• motif=/(me)/g ; // recherche globale de "me"

• motif=/(me)/gi; // recherche globale de "me" indépendamment des lettres

minuscules ou majuscules

• motif=/\w/g; // recherche globale sur les caractères alphanumériques

90
 Méthodes de l’objet RegExp

• La méthode test() : recherche dans une chaîne un motif, et renvoie vrai ou faux
• Syntaxe : Motif.test(chaine)
• Exemple :
• chaine="les meilleures choses dans la vie sont libres";
• motif=new RegExp("lib") ;
• alert(motif.test(chaine)); //affiche true
• La méthode exec() : recherche dans une chaîne un motif, et renvoie la première
occurrence qui satisfait le motif. Si aucune correspondance n'est trouvée, elle renvoie null.
Le résultat est un tableau à une seule case
• Syntaxe : motif.exec(chaine)
• Exemple :
• chaine="les meilleures choses dans la vie sont libres";
• motif=new RegExp("e") ; t=motif.exec(chaine);
• alert(t[0]); //affiche e 91
 Méthodes de l’objet RegExp

• La méthode search() : renvoie la position de la première occurrence du motif (-1 si

introuvable)
• Syntaxe : chaine.search(motif)
• Exemple :
• chaine="les meilleures choses dans la vie sont libres";
• motif=new RegExp("w") ;
• alert(chaine.search(motif)); // affiche -1
• La méthode match() : recherche un motif dans une chaine
• Syntaxe : chaine.match(motif)
• Exemple :
• chaine="les meilleures choses dans la vie sont libres";
• motif=/(le)/g => affichage d’un tableau à deux cases
• motif=/\w/g => affichage d’un tableau à 40 cases
• alert(chaine.match(motif));
92
 Méthodes de l’objet RegExp

• La méthode replace() : remplace un motif par une chaine

• Syntaxe : chaine.replace(motif, chaineDeRemplacement)

• Exemples :
• motif=/(le)/; alert(chaine.replace(motif,"**"));
• motif=/(le)/g; alert(chaine.replace(motif,"**"));
• motif=/[àâä]/gi; alert(chaine.replace(motif,"A"));

• motif1=/[àâä]/gi;
• motif2=/[éèê]/gi
• alert(chaine.replace(motif1,"A").replace(motif2,"E"));

93
 Les expressions régulières

• Exercice :
• Un formulaire avec un champ e-mail dont il faut vérifier sa conformité aux règles
suivantes :
Commence par une série de chiffres, lettres, points, tiret et tiret bas
Contient un @
Contient un domaine qui est une série de chiffres, lettres, points, tirets et
tirets bas
Se termine par un point et puis deux ou trois caractères alphabétiques.

94
 Les expressions régulières

• Extraits de code source :

<script>
function checkEmail(email) {
var re=/^\w+([\.-_]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/;
return re.test(email);
}
function validate() {
var email = document.getElementById("email").value;
if (checkEmail(email)) {
alert('Adresse e-mail valide');
} else {
alert('Adresse e-mail non valide');
}
} <p>Entrez une adresse email :</p>
</script> <input id='email'>
<button type='submit' onclick="validate()">Validate!</button>

95
Gestion des formulaires

Récapitulatif
L'interactivité est basée sur la capture des
événements qui se produisent au niveau d'une
page

Les formulaires offrent plusieurs types de champs

pour la saisie des données

La validation de formulaires permet d'éviter l'envoi

en vain de requêtes http au serveur

Les expressions régulières permettent de raffiner la

validation des champs des formulaires 96