Développement web
côté client
HTML/CSS/JavaScript
Pr. Abdelali El Gourari
Introduction
• Développement web
"…une discipline qui consiste, par l’usage de langages de
programmation web, à programmer des sites web ou
applications web (ou web mobile) destinés à être publiés…"
"… processus d’écriture d’un site ou d’une page web dans un
langage technique…"
"…. Le processus de développement web comprend, entre
autres, la conception de sites web, le développement de
contenu web, l’élaboration de scripts côté client ou côté
serveur…"
La science de traitement et de présentation de l'information
Développement Web côté client 2
Introduction
• Modèle client/serveur
Serveur de fichiers/d’exécutables
o Partage de données
o Diffusion des exécutables des applications partagées
Serveur de configurations
o Diffusion des paramètres de configuration partagés
Serveur d’applications
o Serveur de calcul
o Serveur web
o Software-as-a-service (SaaS, cloud)
Développement Web côté client 3
Introduction
• Modèle client/serveur
Intérêts
o Installation et mise à jours des applications au niveau des serveurs
o Cohérence entre postes: OS, configurations de base, logiciels
o Sécurité
Inconvénients et limites
o Performances
o Risque d’indisponibilité générale (pannes serveur ou réseau)
o Gestion des configurations spécifiques
o Sécurité
Développement Web côté client 4
Introduction
• Côté client [Link]
Tout ce qui s'affiche ou se déroule sur le client (appareil de
l'utilisateur).
o Le contenu de la page - HTML
o La mise en page – CSS
o Le comportement - JavaScript
Développement Web côté client 5
Introduction
• Côté serveur
à voir plus tard…
Technologies Informatiques / Développement Développement
Introduction à l'Informatique Web côté client Web côté serveur
Développement Web côté client 6
Structure minimale d'une page HTML5
Développement Web côté client 7
Les balises
• HTML est un langage à balises.
Une balise est ce qui est entouré de chevrons < et >
o Les conteneurs : <x attribut="valeur">contenu</x>
• <x> : balise ouvrante
• </x> : balise fermante
o Les marqueurs : <x attribut="valeur"/>
• Le "/" n’est pas obligatoire mais permet de distinguer un marqueur d’une
balise ouvrante
Aux balises s'ajoutent des attributs qui les complètent en
fournissant des informations supplémentaires
o <balise attribut="valeur">
o <img src="[Link]" />
Développement Web côté client 8
Les balises
• Rappel <blockquote> </blockquote>
<!DOCTYPE html> <span> </span>
<html></html> <ol></ol>
<head></head> <ul></ul>
<body></body> <li></li>
<meta charset="utf-8" /> <table></table>
<title></title> <tr><tr>
<p></p> <td><td>
<hr/> <a></a>
<br/> <img>
<h1></h1>
<h2></h2>
<em></em>
<strong> </strong>
<mark> </mark>
Développement Web côté client 9
CSS - Cascading Style Sheets
• Permet de mettre en forme le code HTML
Choix de couleur de texte, sélection de la police de caractères,
de la taille de la police, de l'image de fond...
Mise en page du site : menu à gauche en vertical, en-tête en
haut toujours visible...
• Le CSS s'écrit au choix
Dans un fichier .css
Dans l'en-tête <head></head>
Dans les balises du HTML via l'attribut
Développement Web côté client 10
Structure d'un fichier CSS
• Un fichier CSS contient des règles CSS
Les noms (sélecteurs) des balises dont on souhaite modifier
l'aspect.
Des propriétés CSS
Une valeur pour chaque propriété
Développement Web côté client 11
Distinguer les balises : class et id
• Exemple
On veut que seulement certains paragraphes soient mis sous
une certaine forme
Plutôt que de mettre un attribut style à chacune des balises
concernée on peut utiliser les attributs suivants valables sur
n'importe quelle balise
o class
o id
.classe1
<h1 class="classe1"> </h1> {
<p class="classe1"> </p> color: red;
}
#ceParagraphe
{
<p id="ceParagraphe"></p>
color: red;
}
Développement Web côté client 12
Les propriétés CSS
• Rappel
Taille du texte
Police
Mise en forme du texte
Alignement
Couleur du texte
Couleur de fond
Image de fond
La transparence
Les bordures
Changement d'apparence dynamique au survol, au click
Taille de bloc
Les marges
Développement Web côté client 13
Flexbox
Développement Web côté client 14
Flexbox
Développement Web côté client 15
Flexbox
Développement Web côté client 16
Flexbox
Développement Web côté client 17
Flexbox
Développement Web côté client 18
Aligner sur l'axe principal
Développement Web côté client 19
Aligner sur l'axe principal
Développement Web côté client 20
Aligner sur l'axe secondaire
Développement Web côté client 21
JavaScript
Introduction
Nous avons fait des pages statiques en L1: mise à part quelques
effets (survol de souris, sélection ...) le fond et la forme sont
prédéterminés et sont chargés par le client pour être affichés tels
quells.
Avec JavaScript on peut modifier l'apparence dynamiquement, par
exemple changer la couleur de fond sur le survol d'un paragraphe
particulier
JavaScript s'effectue côté client. Son code est du coup intégré dans un
fichier du site et est interprété par le navigateur
JavaScript est un langage de programmation (au même titre que VB) qui n'a
rien à voir avec Java
JavaScript peut être intégré directement dans un fichier HTML
ou être écrit dans un fichier indépendant d'extension .js
Développement Web côté client 23
Introduction
• JavaScript (JS)
A été initialement créé pour “rendre les pages web vivantes”
o Côté client, dans un navigateur web
scripts : peuvent être écrits directement dans une page HTML et
exécutés automatiquement au chargement des pages
o Pas besoin d'une compilation pour fonctionner
Aujourd'hui
o Framework : Bootstrap, jquery, [Link]
o côté serveur : [Link]
o [Link] : machine learning, AI
o …
• Dans cette UE
Côté client, dans un navigateur web
o Référence :
[Link]
(principal manuel avec des exemples et d’autres informations)
Framework : Bootstrap
Développement Web côté client 24
Développement JS : éditeurs de texte
• Visual Studio Code
A utiliser si vous avez pas d'un éditeur de texte préféré
Cross-platform : Windows, Linux, et macOS
Gratuit, leger
• Les autres
nano, vi, notepad++, sublime text, visual studio…
… utilisez à vos risques et périls
Développement Web côté client 25
Ajouter du code JavaScript à la page
• Les balises <script></script>
Peuvent être insérés dans n’importe quelle partie d’un
document HTML
<!DOCTYPE HTML>
<html>
<body>
<p>Voici mon script</p>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>
• Scripts externes
Placer le code JS dans un fichier séparé
Le fichier de script est attaché à HTML avec l’attribut src
o <script src="../chemin/vers/votre/[Link]"></script>
o <script src="../chemin/vers/votre/[Link]"></script>
Développement Web côté client 26
Structure du code
• Chaque instruction est généralement écrite sur une
ligne distincte terminé par un point virgule
Les points virgules peuvent être omis dans la plupart des cas mais
ne faites pas ça…
• Commentaires
sur une ligne : // (deux barres obliques)
multi lignes : /* … */
o commencé par /*
o terminée par */
Développement Web côté client 27
Les variables
• Déclarer une variable
let nom_de_variable
o Déclaration de variable moderne
var nom_de_variable
o similaire à let mais n’a pas de portée limitée aux blocs
o mais la visibilité est étendue à la fonction ou globale (si la variable est
déclarée hors fonction)
const nom_de_variable
o Déclarer une constante
• Nom de variable
Le nom ne doit contenir que des lettres, des chiffres, des
symboles $ et _
Le premier caractère ne doit pas être un chiffre
La casse est importante
Les mots réservés (let, class, return, function) ne peuvent
pas être utilisés
Développement Web côté client 28
Les types de données
number let n = 123;
n = 12.345;
bigint let n = 1234567890123456789012345678901234567890n
string let str = "Hello";
boolean let drapeau = true
null let n = null;
undefined let n;
object
à avoir plus tard
symbol
Développement Web côté client 29
Interaction
• alert
affiche un message
alert("Hello");
• prompt
affiche un message demandant à l’utilisateur de saisir du texte.
Il renvoie le texte ou null, si vous cliquez sur le bouton
Annuler/Esc
let n = prompt("Entrez un entier", 5);
• confirm
affiche un message et attend que l’utilisateur appuie sur “OK”
ou “Annuler”
retourne true pour OK et false pour Annuler/Esc
let ok = confirm("OK ?");
Développement Web côté client 30
Opérateurs
Addition +
Soustraction -
Multiplication *
Division /
Modulo %
Exponentiation **
Affectation =
Incrémentation ++
Décrémentation --
Binaire AND(&), OR(|), XOR(^), NOT(~)
Comparaison >, <, =>, <=, ==, ===, !=
Développement Web côté client 31
Conditionnelle et boucles
if (condition) {
//instructions
let i = 2
}
if (i < 3) {
else {
alert(i);
//instructions
}
}
while (condition) {
//instructions let i = 3;
} while (i) {
alert(i);
i--;
do {
}
//instructions
} while (condition)
for (début; condition; étape) for (let i = 0; i < 3; i++) {
{ alert(i);
//instructions }
}
Développement Web côté client 32
Fonctions
Les fonctions sont un moyen de compacter des fonctionnalités en vue de leur
réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une
fonction, par son nom, au lieu de réécrire la totalité du code chaque fois. Nous
avons déjà utilisé des fonctions plus haut, par exemple :
let myVariable = [Link]("h1");
alert("Bonjour !");
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur et vous pouvez
les utiliser où bon vous semble.
Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de
parenthèses — () —, c'est probablement une fonction. Les fonctions prennent souvent
des arguments — bouts de données dont elles ont besoin pour faire leur travail. Ils sont
placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.
Développement Web côté client 33
Fonctions
Par exemple, la fonction alert() fait apparaître une fenêtre de pop-up dans la fenêtre du
navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la
fonction ce que l'on souhaite écrire dans cette fenêtre.
La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous
pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :
function multiply(num1, num2) {
let result = num1 * num2;
return result;
}
Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
Développement Web côté client 34
Fonctions
Expression de fonction :
// Déclaration d'une fonction anonyme et assignation à une variable
let multiply = function(a, b) {
return a * b;
};
// Utilisation de la fonction multiply
[Link](multiply(2, 3)); // Affichera 6
Développement Web côté client 35
Fonctions
Fonction fléchée (Arrow Function) :
// Déclaration d'une fonction fléchée
let subtract = (a, b) => {
return a - b;
};
// Utilisation de la fonction subtract
[Link](subtract(5, 3)); // Affichera 2
Développement Web côté client 36
Fonctions
Fonction avec paramètres par défaut :
// Déclaration d'une fonction avec paramètres par défaut
function greet(name = 'World') {
return `Hello, ${name}!`;
}
// Utilisation de la fonction greet
[Link](greet()); // Affichera "Hello, World!"
[Link](greet('Ali')); // Affichera "Hello, Ali!"
Développement Web côté client 37
Fonctions
Fonction prenant une fonction comme argument (fonction de rappel) :
// Déclaration d'une fonction qui prend une fonction en argument
function operate(a, b, operation) {
return operation(a, b);
}
// Déclaration de fonctions à utiliser comme opérations
function add(a, b) { return a + b; }
function multiply(a, b) {
return a * b;
}
// Utilisation de la fonction operate avec différentes opérations
[Link](operate(2, 3, add)); // Affichera 5
[Link](operate(2, 3, multiply)); // Affichera 6
Développement Web côté client 38
Fonctions
Fonction retournant une fonction (fonction génératrice) :
// Déclaration d'une fonction retournant une fonction
function makeMultiplier(factor) {
return function(number) {
return number * factor;
};
}
// Création d'une fonction de multiplication par 5
let multiplyBy5 = makeMultiplier(5);
// Utilisation de la fonction multiplyBy5
[Link](multiplyBy5(3)); // Affichera 15
[Link](multiplyBy5(4)); // Affichera 20
Développement Web côté client 39
Fonctions
Exercice_1:
Écrivez une fonction nommée calculateAverage qui prend en paramètre un
tableau de nombres et retourne la moyenne de ces nombres.
Exercice_2:
Écrivez une fonction nommée countVowels qui prend en paramètre une chaîne
de caractères et retourne le nombre de voyelles qu'elle contient.
Exercice_3:
Écrivez deux fonctions : celsiusToFahrenheit qui convertit une température en
degrés Celsius en degrés Fahrenheit, et fahrenheitToCelsius qui fait l'inverse.
Les formules de conversion sont :
Celsius en Fahrenheit : (°C × 9/5) + 32
Fahrenheit en Celsius : (°F - 32) × 5/9
Développement Web côté client 40
Fonctions
Exercice_4:
Écrivez une fonction nommée validatePassword qui prend en paramètre un mot
de passe sous forme de chaîne de caractères et retourne true si le mot de passe
est valide selon les critères suivants :
Doit contenir au moins 8 caractères.
Doit contenir au moins une lettre majuscule et une lettre minuscule.
Doit contenir au moins un chiffre.
Exercice_5:
Écrivez une fonction nommée isPalindrome qui prend en paramètre une chaîne de
caractères et retourne true si elle est un palindrome (c'est-à-dire qu'elle se lit de la
même manière de gauche à droite et de droite à gauche), et false sinon.
Développement Web côté client 41
Fonctions
function calculateAverage(numbers) {
const sum = [Link]((total, num) => total + num, 0);
return sum / [Link];
}
function countVowels(str) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
let count = 0;
for (let char of [Link]()) {
if ([Link](char)) {
count++;
}
}
return count;
}
Développement Web côté client 42
Fonctions
function celsiusToFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function fahrenheitToCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
function validatePassword(password) {
const hasUpperCase = /[A-Z]/.test(password);
const hasLowerCase = /[a-z]/.test(password);
const hasDigit = /\d/.test(password);
return [Link] >= 8 && hasUpperCase && hasLowerCase && hasDigit;
}
Développement Web côté client 43
Fonctions
function sortArray(numbers) {
return [Link]((a, b) => a - b);
}
function isPalindrome(str) {
const reversedStr = [Link]('').reverse().join('');
return str === reversedStr;
}
Développement Web côté client 44
Tableaux (Arrays) :
Déclaration d'un tableau :
let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];
Accès aux éléments d'un tableau :
[Link](numbers[0]); // Affiche le premier élément du tableau
numbers (1)
[Link]([Link]); // Affiche la longueur du tableau fruits (3)
Modification des éléments d'un tableau :
fruits[1] = 'grape'; // Remplace 'banana' par 'grape'
[Link](6); // Ajoute 6 à la fin du tableau numbers
Développement Web côté client 45
Tableaux (Arrays) :
Parcours d'un tableau :
for (let i = 0; i < [Link]; i++) {
[Link](numbers[i]);
}
Méthodes de tableau :
[Link](); // Supprime le dernier élément du tableau numbers
Développement Web côté client 46
Objets (Objects) :
Déclaration d'un objet :
let person = {
name: ‘Ali',
age: 27,
city: ‘Maroc‘
};
let car = {
brand: 'Toyota',
model: 'Camry',
year: 2024
};
Accès aux propriétés d'un objet :
[Link]([Link]); // Affiche la propriété 'name' de l'objet person (‘Ali')
[Link](car['model']); // Affiche la propriété 'model' de l'objet car ('Camry')
Développement Web côté client 47
Objets (Objects) :
Modification des propriétés d'un objet :
[Link] = 35; // Modifie la valeur de la propriété 'age' de l'objet person
[Link] = 'blue'; // Ajoute une nouvelle propriété 'color' à l'objet car
Parcours des propriétés d'un objet :
for (let key in person) {
[Link](`${key}: ${person[key]}`);
}
Développement Web côté client 48
Objets (Objects) :
Méthodes d'objet :
delete [Link]; // Supprime la propriété 'city' de l'objet person
let keys = [Link](car); // Retourne un tableau contenant les clés de
l'objet car
let values = [Link](person); // Retourne un tableau contenant les
valeurs de l'objet person
Développement Web côté client 49
Objets (Objects) :
Dans cet exemple, livre est un objet avec les propriétés titre et auteur, ainsi
qu'une méthode afficherInfo qui affiche ces informations dans la console.
// Définition de l'objet Livre
const livre = {
titre: 'JavaScript for Beginners',
auteur: ‘Ali',
afficherInfo: function() {
[Link](`Titre: ${[Link]}, Auteur: ${[Link]}`);
}
};
// Utilisation de la méthode afficherInfo
[Link](); // Affiche "Titre: JavaScript for Beginners, Auteur: Ali"
Développement Web côté client 50
EVENEMENTS ET OBJETS
1. Programmation événementielle
2. Principe
3. Les événements
4. Gestionnaire d’événement
5. Classe et Objet
6. Objets d’une page Web
7. Objets divers
1 . Programmation événementielle
La programmation événementielle permet la gestion d’
événements.
Un événement est généralement associé à une action
de l’utilisateur : appui sur une touche, click ou
déplacement de la souris, ...
En HTML classique, il y a très peu d’événements qui
sont gérés : click sur un lien ou sur un bouton de
formulaire. Leur gestion est automatique et non
modifiable.
Le javascript va permettre de gérer et contrôler
d’autres événements.
2 . Principe
L'objet Événement Gestionnaire d'événement
>
(bouton) (clic de souris) (envoi du formulaire)
OBJECT EVENT EVENT HANDLER
En javascript, on va pouvoir associer à
chaque événement une action : une
fonction, c- à -d le gestionnaire d’événement
(EVENT HANDLER).
3 . Les événements
Différents événements implémentés en Javascript :
L'utilisateur clique sur un bouton, un lien ou tout autre élément : Clik
La page est chargée par le navigateur : Load
L'utilisateur quitte la page : Unload
L'utilisateur place le pointeur de la souris sur un élément : MouseOver
Le pointeur de la souris quitte un lien ou tout autre élément : MouseOut
Un élément de formulaire a le focus (devient la zone d'entrée active) : Focus
Un élément de formulaire perd le focus : Blur
La valeur d'un champ de formulaire est modifiée : Change
L'utilisateur sélectionne un champ dans un élément de formulaire : Select
L'utilisateur clique sur le bouton submit pour envoyer un formulaire : Submit
L'utilisateur appuie sur une touche : Keydown
Autres événements : Abort, Error, Move, Resize, KeyPress,
KeyUp, DblClick, MouseDown, MouseUp, MouseMove, Reset
5 . C l a s s e s e t Objet
Ne pas confondre :
Javascript est un langage basé sur les objets
C++, Java et C# sont des langages orientés objets
Notions de base :
Une classe est la description d'un ensemble de :
propriétés (les données) et de
méthodes (les fonctions).
Un objet est une instance de classe (c’est à dire
une variable de type classe).
6 . O b j e t s d ’ u n e p a g e Web
(1)
Lorsqu’une page Web est chargée dans un navigateur,
Javascript identifie plusieurs objets pour y
représenter les informations.
Ces objets sont classés de manière hiérarchique.
L’objet le plus haut dans la hiérarchie est l’objet de la classe
window (fenêtre).
6 . O b j e t s d ’ u n e p a g e Web
Dans cette fenêtre, il y a un document
HTML : c'est l'objet document. Donc,
L'objet fenêtre contient l'objet document
(c’est la notion de hiérarchie).
Dans ce document, on trouve un
formulaire au sens HTML : c'est l'objet
formulaire. Donc, l'objet fenêtre contient
un objet document qui lui contient un
objet formulaire (hiérarchie des objets).
6 . O b j e t s d ’ u n e p a g e Web
Dans ce document, on trouve trois objets :
l'objet radio, l'objet bouton, et l'objet texte.
Donc, l'objet fenêtre contient…
Le modèle hiérarchique des objets
en Javascript.
On accèdera à l’objet bouton de la
manière suivante :
(window).[Link]
7 . Objets divers
Pour l’instant, on peut considérer la notion de classe
comme la généralisation de la notion de type.
Par conséquent, nous retrouvons naturellement, parmi les
classes d'objets prédéfinies dans le langage Javascript, les
classes suivantes :
• Boolean : les booléens
• Number : les valeurs numériques (entiers ou réels)
• String : les chaînes de caractères
• Array : les tableaux
D’autres classes prédéfinies et souvent utilisées existent :
• Date : les dates
• Math : formules mathématiques
• Navigator : caractéristiques du navigateur
• RegExp : les expressions régulières
Recherches: getElement*
• getElementById()
Si un élément a l’attribut id, on peut atteindre cet élément en
utilisant la méthode:
<input type="text" id="fname" value="Aabecede">
<script>
let fname = [Link]("fname");
alert("Hello " + [Link]);
</script>
<div id="divH">
</div>
<script>
let divH = [Link]("divH");
[Link] = "red";
</script>
Développement Web côté client 60
3 . Les événements
Les événements peuvent être associés à des éléments HTML pour
déclencher des actions en réponse à des interactions de l'utilisateur. Voici
un exemple de code qui ajoute un événement de clic à un bouton :
<!DOCTYPE html>
<html>
<head>
<title> Événements en JavaScript </title>
<script scr=“./”> </script>
</head>
<body>
<button id="monBouton"> Cliquez ici </button>
</body>
</html>
4 . Gestionnaire d’événement
<script>
// Sélection du bouton
const bouton = [Link]('monBouton');
// Ajout de l'événement de clic
[Link]('click', function() {
alert('Le bouton a été cliqué !');
});
</script>
Dans cet exemple, un événement de clic est ajouté au bouton avec l'aide
de ‘addEventListener()’. Lorsque l'utilisateur clique sur le bouton, une
boîte de dialogue d'alerte affiche le message "Le bouton a été cliqué !".
Recherches: getElement*
• getElementsByTagName(tag)
cherche les éléments avec la balise donné et renvoie l’ensemble
de ces éléments
• getElementsByClassName(className)
renvoie les éléments qui ont la classe CSS donnée
• getElementsByName(name)
renvoie les éléments qui ont l’attribut name, dans tout le
document.
Développement Web côté client 63
Propriétés et attributs de nœud
• Différence ?
Les propriétés – sont ce qui se trouve dans les objets DOM.
Les attributs – sont ce qui est écrit en HTML.
Propriétés Attributs
nodeType … à revoir : balises HTML et
nodeName/tagName leurs attributs
innerHTML
outerHTML
value/data
textContent
hidden
Développement Web côté client 64
Que faire avec JavaScript?
• Modifier contenu HTML
Développement Web côté client 65
Que faire avec JavaScript?
• Modifier contenu HTML
Développement Web côté client 66
Que faire avec JavaScript?
• Modifier attributs HTML
Développement Web côté client 67
Que faire avec JavaScript?
• Modifier attributs HTML
Développement Web côté client 68
Que faire avec JavaScript?
• Modifier CSS
Développement Web côté client 69
Que faire avec JavaScript?
• Modifier CSS
Développement Web côté client 70
Que faire avec JavaScript?
• Afficher/cacher éléments HTML
Développement Web côté client 71
Exercices
Exercice_1
Écrire une application de liste de tâches qui permet d'ajouter, d'afficher et de
supprimer des tâches. Utilisez des objets pour représenter les tâches et
manipulez le DOM pour interagir avec l'utilisateur.
Exercice_2
Écrire une application pour gérer une bibliothèque de livres. L'application doit
permettre d'ajouter des livres, de les afficher et de les trier par titre. Utilisez
des objets pour représenter les livres et manipulez le DOM pour interagir avec
l'utilisateur.
Développement Web côté client 72