Cours Developpement Web Avancé

Faculté des Sciences Juridiques
Université Jendouba
Économiques et de Gestion
Développement Web: Introduction
Manel Ben Sassi
Université de Jendouba, FJSEG
[email protected]
1 / 52
Sommaire
1 Avant de commencer
2 Introduction
3 Le web : Évolution et développement
Évolution de l’usage
Évolution des services
4 Le développement pour le web : est ce difficile ?
5 Créer une application web en 3 étapes
Comment créer une application ?
Quels étapes à suivre ?
L’essentiel d’une application Web ?
6 Quels Outils et technologies nécessaires à la construction d’une
application web ?
Les outils CMS
L’hébergement
Le nom du domaine
L’évaluation des applications web
7 Bibliographie
2 / 52
Avant de commencer
Avant de commencer
3 / 52
Avant de commencer
Plan de cette matière
Chapitre Introduction Développement web

Chapitre Technologies d’internet : HTML 5 et ses APIs avancés
Chapitre Technologies d’internet : CSS 3 et le Web Responsive
Chapitre Technologies d’internet : JavaScript avancé : Ajax et Node.js
Deux séances de cours hebdomadaire
4 / 52
Objectifs du Chapitre 1
Objectifs de ce cours
5 / 52
Objectifs du Chapitre 1
Objectifs
Acquérir la "culture" du développement web et des nouvelles

technologies
Connaître les principales techniques pour la création de sites web
Se familiariser avec les langages du web
Rendre dynamique le contenu des pages coté client ou coté serveur
6 / 52
Introduction
Introduction
7 / 52
Introduction
Culture générale : internet
I C’est quoi ? : inter-netting ou "interconnecter des réseaux"

I C’est à qui ?
I ça marche comment ? Réseaux interconnectés à travers le protocole de
communication TCP/IP
8 / 52
Introduction
L’internet en chiffre
Statistiques
9 / 52
Introduction
L’usage de l’internet
Services ! !
10 / 52
Introduction
Services : définitions et exemples
I E-mail Un service formel couramment utilisé pour envoyer des fichiers

textes en temps différé (accès internet ou activer un compte sur un
serveur de messagerie POP3)
I Tchat Echange instantané, interactif et en quasi temps réel de messages
entre plusieurs ordinateurs.
I Surfer Consultation, production et partage de l’information
11 / 52
Le web : Évolution et développement
Le web : Evolution et développement
12 / 52
Evolution du web
Evolution d’Internet
13 / 52
Evolution du web
Evolution d’Internet : point de vue des usagers
14 / 52
Web 2.0 : évolution et Révolution
I Met l’accent sur l’agilité et la ré-utilisabilité des applications :

Focalisation sur les services rendus et sur les données mais pas sur les
applications
Faiblement couplé pour faciliter l’assemblage de services en applications
Faciliter la ré-utilisabilité des contenus
I Implication des utilisateurs comme acteurs du service rendu
Plus le service est utilisé, plus il s’améliore
Plus le service est utilisé, plus il devient intéressant
I Le Web2.0 qualifie les interfaces permettant aux internautes d’interagir
sur le contenu des pages et entre eux.
15 / 52
Web 2.0 : évolution et Révolution

I Un nouvelle interactivité et un travail collaboratif :
L’internaute= "créateur de contenu" et "consommateur de contenu" :
Diffusion de l’expérience de l’internaute et consulter celle des autres (e.g
au travers des blogs).
I Nouveaux concepts liés à l’ergonomie :
moins de clics, plus d’informations affichées à l’écran, moins de temps de
chargement
I Nouvelles technologies :
Langage AJAX pour rendre les pages interactives et fluides, Flux RSS,
pour être informé des actualités d’une interface Web, les mashups pour
interconnecter des applications Web 2.0 dont le contenu est hétérogène.
I Les réseaux sociaux :
échange réalisé par des techniques synchrones comme les messageries
instantanées, la téléphonie sur internet , ... ou des méthodes asynchrones
comme les forums, les wikis, les messageries en ligne,. . . . (Facebook,
MySpace, Twitter, Viadeo, LinkedIn, etc)
16 / 52
Synthèse
Enrichissement des interfaces
17 / 52
Le web : Évolution et développement Évolution de l’usage
Evolution de l’usage
Évolution de la technologie connectée au web
I Plusieurs types d’ordinateurs principalement :ordinateur de bureau

(desktop), ordinateur portable (laptop), tablette et smartphone
I Usages différents : professionnel, performance, mobilité, design, confort,
loisirs, etc.
18 / 52
Evolution de l’usage
On parle du Web sémantique
I Les informations ne seraient plus stockées mais "comprises" par les

ordinateurs afin d’apporter à l’utilisateur ce qu’il cherche vraiment.
I Objectif : Transformer la masse ingérable des pages Web en un
gigantesque index hiérarchisé
I Projet ambitieux et au cœur de la recherche actuelle.
On parle du Web 3.0

Web sémantique + Mobilité (applications disponibles sur tout type de support
et notamment les mobiles devices) .. is LOADING .. ! !
19 / 52
Deep Web ou le web profond
Deep Web
Partie du web accessible en ligne, mais non indexée (accès à travers des
requêtes et non des liens URL) par des moteurs de recherche classiques
généralistes. Le web invisible comprend des bases et des banques de
données et bibliothèques en ligne gratuites ou payantes...
20 / 52
Le besoin avec cette révolution
Les besoins des usagers ! !
Friendly user interface : interface conviviale

Adaptativité des applications et des services
Big brother : assistance continue dans la navigation et l’utilisation ...
...
21 / 52
Le web : Évolution et développement Évolution des services
Services de stockage sur le cloud
Le nuage ...
Stockage des données en ligne ⇒ pas besoin d’une clé usb.
Synchronisation des données ⇒ données accessibles depuis n’importe
quel type ordinateur (tablettes et smartphones compris).
Grande capacité de stockage.
Possibilité de partage de données avec d’autres utilisateurs.
22 / 52
Le web : Évolution et développement Évolution des services
Évolution des services
I Compression de données : Winzip, Winrar et 7-Zip.

I Outils d’édition vidéo : VirtualDub, Avidemux, Final Cut Pro X (mac OS
X), Windows Movie Maker, Adobe Premiere, etc.
I Services d’écoute de musique en ligne : Spotify, Deezer, Google Play
Music, Grooveshark, Last.fm, etc.
I Réseaux de serveur/partage de fichiers : Usenet (binnewz) et BitTorrent
I Réseaux sociaux/professionnels : Facebook, Google+, LinkedIn et
Viadeo => visibilité sur google à partir d’une simple recherche.
I Service de planification et de sondage : Doodle.
23 / 52
Le développement pour le web : est ce difficile ?
Le développement pour le web : est ce

difficile ?
24 / 52
Une question importante avec l’émergence des nos nouveaux besoins

Mais aussi de nouvelles technologies
25 / 52
Étapes de développement du site Web
26 / 52
Une question importante avec l’émergence des nos nouveau besoins

Mais aussi de nouvelles technologies
Technologies en évolution
Il faut maîtriser de nombreuses technologies pour :
la structure du document : XML, XHTML, DOM
le rendu : CSS (feuilles de style), XSL et XSLT
l’interaction côté client : Javascript, Ajax, ...
L’interaction côté serveur : PHP, Perl, Python,JAVA ...
I Ces technologies sont en constante évolution

I De nouvelles technologies apparaissent tous les ans.
27 / 52
Que sera le futur du développement web ?
La tendance de développement web
La tendance générale consiste à utiliser des frameworks (Ensemble

cohérent de librairies ou sous-programmes)
Ces frameworks sont parfois adaptables grâce à des fichiers XML
Séparation fond / forme on s’oriente vers la création d’applications Web
l’intégration de composants réutilisables.
La Réutilisation
28 / 52
Balkanisation du web
Les concepteurs de logiciels se livrent une guerre commerciale afin de

faire triompher leurs produits et leurs standard :
Windows avec Internet Explorer, Microsoft Server, ActiveX, .NET, ASP,

VB Script, CSharp, etc
Linux avec Firefox, Apache, PHP, MySQL
Balkanisation du web
L’utilisation de différents standard et normes conduit à la balkanisation
du web : écriture spécifique en fonction des incompatibilités
29 / 52
Créer une application web en 3 étapes
Quelles sont les étapes pour créer une

application Web
30 / 52
Introduction
Q. Savez-vous la différence entre un site web et une application Web ?
31 / 52
Introduction
Les applications Web Vs site Web
Site web Une seule fonction : présenter un contenu (Exemple : portail de
l’entreprise ) ⇒ Interface graphique
Application web Offre des services à travers le site web, consommé à
travers le client-navigateur (exemple : chat, mail, entretenir un
réseau social, etc)
32 / 52
Créer une application web en 3 étapes Comment créer une application ?
Comment créer une application Web ?
Posez vous tout d’abord les bonnes questions
I Quels sont vos besoins ?

I Qu’attendez-vous de votre application ?
I Quelle Image de votre entreprise souhaitez vous diffusez
I Quelle est votre cible ?
33 / 52
Créer une application web en 3 étapes Quels étapes à suivre ?
Quelles sont les étapes pour créer une application ?
34 / 52
1 ère étape ...
Le Benchmark
I Faire un benchmark ("étude méthodologique comparative") sur le
secteur d’activité ou le produit en question et sélectionner les "best
practises"
35 / 52
1ère étape ... Benchmark
Le Benchmark
4 points essentiels (pas uniquement) à prendre en considération dans l’audit
des sites concurrents ...
36 / 52
1ère étape ... Benchmark
37 / 52
2 ème étape ... Arborescence
L’Arborescence
⇒ doit correspondre à l’architecture globale du site et permettre d’organiser
et de structurer le contenu du site
38 / 52
3 ème étape ... Zoning
Le Zoning par définition

consiste à schématiser sa page Web de façon plus ou moins complète. Cette
schématisation peut être manuelle ou numérique
Zoning ... ou Wireframe

doit permettre de découper la page en autant de zones que nécessaire et de
positionner les contenus, le logos, le pied de page, le moteur de recherche, ...
Un travail de réflexion
Comment placer mes blocs de contenus ? Sont-ils pertinent et en
quantité suffisante ?
Communiquent-ils le bon message ? La navigation est-elle intuitive ?
...
39 / 52
Exemple
40 / 52
Faites attention, nous faisons parfois la différence entre ...
41 / 52
Zoning est une technique consistant à schématiser une page Web à

l’aide de blocs ou boîtes, dans le but de montrer les grandes
fonctionnalités et les zones principales du contenu.
Wireframe := Zoning réalisé+ Description du contenu présent dans
chaque bloc de la page Web ⇒ Objectif : Structurer l’interface
et d’associer des fonctionnalités aux pages. Aucun design n’est
fait sur cette étape ⇒ L’objectif étant fonctionnel
Prototype est une application fonctionnelle, qui se focalise sur le fond +
détermine les technologies utilisées ⇒ Objectif : Tester
certaines technologies et- ou début d’une application future
(prototype évolutif).
42 / 52
Pourquoi cette phase est-elle importante ?

Favorise la définition du périmètre fonctionnel ⇒ Corriger et valider les
choix techniques et fonctionnels
Permet de présenter aux utilisateurs des éléments sur lesquels ils vont
pouvoir réagir ⇒ se concentrer sur le fond (fonctionnalités, interactions,
contenus), sans se laisser distraire par la forme (design)
facilite l’évolution de l’interface proposée au départ pour correspondre au
mieux aux attentes.
Retenez ..
La phase de zoning intervient avant la phase de conception graphique. ⇒ Elle
est quasi indispensable, elle permet de mettre à plat la structuration du site.
43 / 52
Quelques outils pour créer les Wireframing ...

Powerpoint ... pas dédié pour cette tâche
Pencil est un logiciel libre et gratuit permet de créer diagrammes et
maquettes d’interfaces web
Wireframe.cc est un "service web" utilisable directement en ligne

permettant la création des maquettes de logiciels. Une version payante
existe pour offrir des fonctionnalités avancées (exporter vers des fichiers
divers PNG et PDF, ...)
Moqups est aussi un service web permettant la création et l’alignement
des éléments composant le sites avec du simple drag and drop
44 / 52
Créer une application web en 3 étapes L’essentiel d’une application Web ?
L’essentiel d’une application web
La page d’accueil
Vitrine du site, c’est en général le premier contact que l’internaute a avec le
site. Elle a aussi pour fonction de diriger le visiteur le plus rapidement possible
vers l’information recherchée.
Qui sommes-nous
Cette page est attendue par les visiteurs. Elle est devenue la norme. C’est
l’occasion de rassurer le visiteur en lui montrant votre photo. C’est aussi
l’opportunité de séduire et de construire un lien privilégié avec vos potentiels
clients.
45 / 52
Quels Outils et technologies nécessaires à la construction d’une application
web ?
Quels Outils et technologies nécessaires à la

construction d’une application web ?
46 / 52
web ? Les outils CMS
CMS ... c’est quoi au juste ?
Un CMS
Content Management System est une plateforme libre et gratuite qui permet
de créer et de gérer un site internet. Le choix du CMS dépend du choix du site.
47 / 52
web ? L’hébergement
L’hébergement
Une fois votre site (ou application) réalisé(e), il doit être hébergé (e) pour
être accessible. Comment ? ⇒ Il faut un serveur web et une adresse ip
publique.
Deux types d’hébergement :
Mutualisé Partagé des serveurs par plusieurs sites ⇒ Sites à faible trafic.
Dédié Des serveurs dédiés pour un seul site ⇒ Sites à fort trafic
48 / 52
web ? Le nom du domaine
Le nom du domaine
Le nom du domaine
I Nom court un nom court plus facile à retenir
I Crédibilité Cohérence entre l’activité du site et le nom, il en va de votre
réputation.
I Géolocalisé Business en Tunisie ? ⇒ Optez pour ".tn" International
".com"
49 / 52
web ? L’évaluation des applications web
L’évaluation à travers Les indicateurs de mesure KPI

Les statistiques
I Elles sont essentielles pour mesurer la présence de votre application
sur internet ⇒ Google Analytics est gratuit : un outil de référence !
Exemples de KPI (Key Performance Indicator)

Le trafic global de votre site pendant une période donnée
Nombre de pages visités par internaute
Le taux de conversion pour un site e-commerce
La provenance de l’internaute (accès direct ? Via un site ?)
Les mots-clés qui génèrent le plus de trafic sur votre site.
50 / 52
Bibliographie
Références Bibliographiques
51 / 52
Bibliographie
1 Urbanisation et BPM- Yves Caseau, DSI Bouygues Télécom, Edition

Dunod.
2 Krafzig, D. Banke, K. and Slama, D. Enterprise SOA : service-oriented
architecture best practices, Prentice Hall Professional, 2005
3 Erl, T. Service-oriented architecture : concepts, technology, and design,
Pearson Education India, 2005
52 / 52
Université Jendouba Économiques et de Gestion
Développement Web: HTML 5 Les APIs

avancés
Manel Ben Sassi
Université de Jendouba, FSJSEG

[email protected]
1 / 78
Sommaire
1 Géo-localisation
Comprendre un peu le concept
La géolocalisation par les méthodes !
La géolocalisation : La gestion des erreurs
La géolocalisation : Google Maps
2 Drag and Drop
3 Le Stockage coté client
Les cookies
Web Storage
Session Storage
Local Storage
4 Les Web Sockets

5 Bibliographie
2 / 78
Les API de HTML5 .... sa force
3 / 78
HTML5 : Les API de HTML 5
L’apogée de l’AJAX et du web 2.0 ainsi que des bibliothèques

Javascript telles que jQuery a rendu son utilisation bien plus
agréable et efficace. De plus, de moins en moins d’utilisateurs
désactivent le Javascript et il est même souvent impossible de le
désactiver sur certains navigateurs.
L’API Javascript (les objets et les méthodes utilisables) a été

généreusement enrichi avec de nouvelles fonctionnalités. En voici quelques
unes ....
4 / 78
Géo-localisation
2. La Géolocalisatoin
5 / 78
Géo-localisation Comprendre un peu le concept
La Géo-localisation
Il ne s’agit pas strictement d’une spécification de l’HTML5, mais
elle y est souvent associée ()
Il est possible grâce à l’API de géo-localisation d’accéder aux
coordonnées de l’utilisateur si celui-ci a accepté de partager sa
position via le bandeau s’affichant en haut de page
Ses usages sont nombreux et souvent corrélés avec des bases de données de
renseignements géographiques :
Plans/cartes, calculs de position et d’itinéraires
Renseignements locaux en mobilité (points d’intérêts proches)
Résultats contextualisés sur les moteurs de recherche
Méta-informations jointes aux photos/vidéos 6 / 78
De quelles informations a-t-on besoin

pour se géolocaliser ?
7 / 78
La Géo-localisation : Les informations nécessaires !
On peut alors très facilement disposer d’informations telles que :

La latitude, la longitude, et l’altitude de l’utilisateur.
Son orientation par rapport au Nord.
La vitesse à laquelle il se déplace.
8 / 78
De quels moyens dispose un navigateur

pour se géolocaliser ?
9 / 78
Différentes techniques sont mises à contribution avec + ou - de précision
pour obtenir les coordonnées de géolocalisation. Elles peuvent être
combinées pour affiner le résultat au cours du temps.
Vous devez connaître que ....

I Plusieurs techniques peuvent être combinées (les techniques mobiles
comme GPS et base de données par exemple) 10 / 78
La géolocalisation ... il faut coder et

tester pour comprendre !
11 / 78
Géo-localisation La géolocalisation par les méthodes !
La Géo-localisation : un exemple
Disponibilité de l’API ?
Confidentialité de la position ! ! => Des notifications pour demander

l’accès à vos coordonnées :)
12 / 78
Les méthodes importantes qu’il faut connaîtres !
La géolocalisation repose sur 3 méthodes intéressantes :

I getCurrentPosition permettant un ciblage ponctuel
I showPosition permet d’afficher les coodonnées résultant de la
méthode "getCurrentPosition"
I watchPosition pour un suivi continu
13 / 78
Essayons de comprendre le Script !
14 / 78
15 / 78
La Géo-localisation : GetCurrentPosition
Les données retournées par la méthode getCurrentPosition :

Retournées obligatoirement : coords.latitude, coords.longitude,
coords.accuracy,
Rétournées si disponibles :
coords.altitude (l’altitude en mètres par rapport à la mer)
coords.altitudeAccuracy (précision de l’altitude)
coords.heading (mesure de l’angle par rapport au nord)
coords.speed (mètre par seconde)
timestamp (date et durée de la réponse à la requête)
16 / 78
La Géo-localisation : Pour suivre un élément

mobile
Pour suivre la position d’un élément, il suffit de remplacer

getCurrentPosition() par la méthode watchPosition().
17 / 78
La Géo-localisation : Pour suivre un élément

mobile
Résultat !
Pour stopper ce suivi continu, il faut réexploiter la variable obtenue (qui est
en quelque sorte un pointeur vers le processus de suivi) avec la méthode
clearWatch().
18 / 78
La Géo-localisation : Un exercice
La géolocalisation ... il faut coder et

tester Maintenant !
Figure – Exercice
Exercice
Modifiez et enrichissez le code de suivi en temps réel avec deux boutons
pour lancer et arrêter l’appel 19 / 78
Géo-localisation La géolocalisation : La gestion des erreurs
La géolocalisation et la gestion des

erreurs ?
20 / 78
La Géo-localisation : la gestion des erreurs
Retenez !
Les appels aux méthodes de géolocalisation sont asynchrones => La
détection peut nécessiter un temps variable et incertain.
Asynchrones : les appels retournent tout de suite pour donner la
main à la suite du code, tout en déclenchant les techniques
permettant de réunir toutes les informations nécessaires.
Une fois ces informations obtenues de la part du navigateur, une
fonction de callback définie par le développeur (vous !) peut être
appelée. Celle-ci recevra en argument toutes les valeurs réunies dans
les propriétés d’un objet JavaScript.
21 / 78

Les fonctions Callback ou "de rappel" par définition ...
C’une fonction qui est passée en paramètre à une autre fonction.
Elle est exécutée au "bon moment".
Elle est souvent utilisée pour la programmation évenementielle ou
encore la programmation Asynchrone (exemple l’AJAX).
Un exemple de fonction auto-appellante pour se rappeler
22 / 78
La méthode getCurrentPosition() peut prendre un second paramètre : le

callback d’erreur . C’est la fonction qui sera appelée dans les cas où :
L’utilisateur refuse l’autorisation d’accès à sa position
L’emplacement de l’utilisateur n’ait pas pu être déterminé
Le service de géolocalisation ne réponde pas assez vite
Les retours d’erreurs potentiels sont très importants et méritent d’être pris
en compte dans toute application web. Ils permettent de savoir si
l’utilisateur a refusé d’être géolocalisé, ou si la position n’a pu être obtenue.
23 / 78
Le code pour la gestion de l’erreur !
Exercice
Enrichissez votre code initial avec la gestion des erreurs et testez avec des
navigateurs différents !
24 / 78
Géo-localisation La géolocalisation : Google Maps
La Géo-localisation et Google Maps
L’API Google Maps V3 est très aisée à exploiter en combinaison à la

géolocalisation. Elle comprend de nombreuses fonctionnalités pour afficher
une carte géographique, positionnée et équipée de marqueurs.
Etape 1 Réserver une zone pour l’affichage de la carte
Etape 2 Faire appel à un "service map" comme "Google Maps"
Etape 3 Récupérer l’altitude et la logitude et l’afficher sur la carte
(sur une image statique)
25 / 78
Le code source et un exemple de rendu !
26 / 78
Un Bonus : Le marqueur !
27 / 78
Drag and Drop
2. Drag and Drop
28 / 78
Drag and Drop
Le Drag and Drop

Il est également possible d’effectuer des "glisser-déposer" dans une
page web. Les étapes à suivre si l’on souhaite pouvoir déplacer un élément
d’une liste :
1 Déclarer cet élément avec l’attribut "draggable" à true et
l’évènement associé :
<li draggable ="true" ondragstart=""> Élément de ma liste </li>
2 Définir une zone potentielle de destination (ou la zone de récéption) :
<div ondrop="drop(this, event)">
3 Définir les fonctions Javascript correspondant :
ondragstart : sélectionne un élément déplaçable
ondragend : permet de signaler à l’objet déplacé que son déplacement
est terminé, que le résultat soit un succès ou non.
ondrag : fait glisser l’élément vers une zone de réception
ondrop : relâche l’élément dans la zone de réception
29 / 78
Drag and Drop
Le Drag and Drop
Initialisation d’un déplacement avec l’objet dataTransfer

L’objet dataTransfer est utilisé généralement avec dragstart et drop.
IL permet de définir et de récupérer les informations relatives au
déplacement en cours d’exécution.
L’objet dataTransfer permet de réaliser trois actions (toutes
facultatives) :
) Sauvegarder une chaîne de caractères qui sera transmise
à l’élément HTML qui accueillera l’élément déplacé. La
méthode à utiliser est setData().
) Définir une image utilisée lors du déplacement. La
méthode concernée est setDragImage().
) Spécifier le type de déplacement autorisé avec la
propriété effectAllowed.
30 / 78
Drag and Drop
Le Drag and Drop
Retenez lors du déplacement de l’élément ...

Il faut savoir quel élément est déplacé et dans quelle zone il est déposé )
Il est préférable d’associer un identifiant aux éléments déplaçables et de
récupérer cette information au moment de déposer l’élément dans la zone
de réception (Utile lorsque vous travaillez sur deux pages HTML et pour
communiquer des données !
) En employant les fonctions :

1. dataTransfer.setData à l’appel de l’évènement ondragstart
2. dataTransfer.getData à l’appel de l’évènement ondrop
On fait également appel à la fonction "preventDefault" qui empêche la
propagation de l’élément.
31 / 78
Drag and Drop
Le Drag and Drop
La méthode setDragImage() ...

Personnalisation de l’affichage Elle permet de définir une image qui se
placera sous le curseur pendant le déplacement de l’élément
concerné
Utilisation La méthode prend trois arguments en paramètres. Le premier
est un élément <img> contenant l’image souhaitée, le
deuxième est la position horizontale de l’image et le troisième
est la position verticale
Comment ?
32 / 78
Drag and Drop
Le Drag and Drop

Exemple
Figure – Interprétez le code !
33 / 78
Drag and Drop
Le Drag and Drop
La zone de drop...
Un élément en cours de déplacement ne peut pas être déposé n’importe où,
il faut pour cela définir une zone de "drop" (zone qui va permettre de
déposer des éléments) qui ne sera, au final, qu’un simple élément HTML.
Les zones de drop prennent généralement en charge quatre événements :

dragenter qui se déclenche lorsqu’un élément en cours de déplacement
entre dans la zone de drop.
dragover qui se déclenche lorsqu’un élément en cours de déplacement
se déplace dans la zone de drop.
dragleave qui se déclenche lorsqu’un élément en cours de déplacement
quitte la zone de drop.
drop qui se déclenche lorsqu’un élément en cours de déplacement
est déposé dans la zone de drop.
34 / 78
Drag and Drop
Le Drag and Drop
La zone de drop et le comportement du navigateur...

Par défaut, le navigateur interdit de déposer un quelconque élément où que
ce soit dans la page Web.
Objectif ) Annulation d’une action par défaut, preventDefault() !
Cette méthode va devoir être utilisée au travers de l’événement dragover.
<div id="draggable" draggable="true">Je peux être déplacé !</div>

div id="dropper">Je n’accepte pas les éléments déplacés !</div>
Essayez ce code ! !
35 / 78
Drag and Drop
Le Drag and Drop
La fonction drop !
36 / 78
Drag and Drop
Le Drag and Drop
37 / 78
Drag and Drop
Le Drag and Drop : Conclusion

Pour conclure ! ) Les méthodes associées a chaque éléments
Explorez d’autres Exemples ! 38 / 78

Le Stockage coté client
3. Le Stockage coté client
39 / 78
Le Stockage coté client
Stockage coté client
Le stockage côté client peut se faire de plusieurs manières.
40 / 78
Le Stockage coté client Les cookies
Les cookies
41 / 78
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 ?
42 / 78
Les cookies ...

Un "Cookie" ...
l’a générée.

I 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.
I Personnaliser les pages présentées à l’utilisateur en reprenant par
exemple son nom en haut de chaque page.
43 / 78
Les cookies ...
Structure d’un cookie
Nom=Contenu ; expires=expdate ; path=Chemin ;

domain=NomDeDomaine ; secure
La variable Nom contient le nom à donner au cookie.

La variable Contenu contient le contenu du cookie
Exemple macookie="oui :visite"
Le mot réservé expires suivi du signe "=". Derrière ce signe, une date
d’expiration représentant la date sous la forme (Wdy, DD-Mon-YYYY
HH :MM :SS GMT) à laquelle le cookie sera supprimé du disque dur
du client. Utiliser les fonctions de l’objet Date
path représente le chemin de la page qui a créé le cookie.
44 / 78
Les cookies ...

domain représente le nom du domaine de cette même page

secure prend les valeurs "true" ou "false" 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 ou HTTPS.
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.
45 / 78
Gestion des cookies ...
Ecrire un 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() ;
46 / 78
Lecture d’un cookie Accéder à la propriété cookie de l’objet document.
Modification d’un cookie Modifier le contenu de la variable Contenu puis

réécrire le cookie sur le disque dur du client
47 / 78
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.
48 / 78
Les cookies ...

Les "Cookies" ... des limites
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 :
I Limites en nombre : Un seul serveur (ou domaine) ne peut pas être
autorisé à écrire plus de 20 cookies.
I Limites en taille : un cookie ne peut excéder 4 Ko.
I Limites du poste client : Un poste client ne peut stocker plus de
300 cookies en tout.
Où sont stockés les cookies ?
49 / 78
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\tem\Cookies".
50 / 78
Le Stockage coté client Web Storage
Web Storage
51 / 78
Le stockage du web ou le "Web Storage"

Le Web Storage
Est une solution adaptée aux besoins actuels de stockage de données
variées, dans le navigateur (côté client !)
Est une technique plus puissante que les cookies qui :
- sont limités en taille (quelques Ko contre plusieurs Mo
pour Web Storage)
- engendrent un trafic HTTP supplémentaire pour chaque
requête (que ce soit pour demander la page web, une
image, une feuille de styles, un fichier javascript, etc)
52 / 78
Session Storage
53 / 78
Le stockage des sessions
La SessionStorage
) L’interface sessionStorage mémorise les données sur la durée
d’une session de navigation,
) Sa portée est limitée à la fenêtre ou l’onglet actif
) Lors de sa fermeture, les données sont effacées
) Pas d’interférence) Chaque stockage de session est limité
à un domaine
54 / 78
Local Storage
55 / 78
Local Storage
Le Local Storage est une manière élégante de stocker dans le
navigateur des informations facilement.
Par exemple, pour écrire puis lire une valeur dans le Local Storage il suffit
d’écrire :
La variable sera toujours disponible si l’utilisateur ferme puis ré-ouvre

son navigateur 6= Session storage
La portée de Local Storage est de facto plus large : il est possible de
l’exploiter à travers plusieurs onglets ouverts pour le même domaine
ou plusieurs fenêtres du même navigateur.
L’utilisation du Local Storage est proche de celle des cookies, mais 6=
aux cookies, ces informations ne sont jamais communiquées au
serveur. Elles sont ainsi particulièrement adaptées aux applications
offline ! ! ! 56 / 78
Local Storage : Usages et précautions

Le stockage de données dans le navigateur web se prête à différentes
applications
Stocker rapidement des données en cache sans faire intervenir le
serveur (par exemple via AJAX ),
Augmenter la performance ressentie et faciliter les développements,
Une alternative aux cookies et au trafic HTTP supplémentaire qu’ils
représentent (un cookie est envoyé à chaque requête effectuée sur un
domaine),
Exploiter un espace alloué plus important que la limite imposée par
les cookies (fixée à 4 Ko),
Retrouver des données immédiatement à la reconnexion ou les
mémoriser pour éviter la perte s’il y a déconnexion
Attention
Les données ne sont pas cryptées, facilement accessible et modifiable en
accédant au navigateur !
57 / 78
Local Storage
Quelles méthodes ? Comment y accéder ?
Les méthodes d’accès sont communes :

setItem(clé,valeur) : stocke une paire clé/valeur
getItem(clé) : retourne la valeur associée à une clé
removeItem(clé) : supprime la paire clé/valeur en indiquant le nom de la
clé
key(index) : retourne la clé stockée à l’index spécifié
clear() : efface toutes les paires
.length : La propriété .length renvoie le nombre de paires stockées.
La console JavaScript des navigateurs est un outil essentiel pour tester
et vérifier le bon fonctionnement de Web Storage.
58 / 78
Local Storage
Stockage
59 / 78
Local Storage
Récupération
60 / 78
Local Storage
Suppression partielle
Figure – Suppression d’un élément (une variable)
61 / 78
Local Storage
Suppression totale
Figure – Suppression de toutes les variables
62 / 78
Local Storage
Outils de développement
Les outils de développement et diverses consoles peuvent donner accès à
des vues détaillées du stockage. Par exemple sous Chrome, l’onglet
"Application" :
63 / 78
Exercices et Démonstration
64 / 78
Utilisation de JSON
Utilisation de JSON
N’OUBLIEZ PAS ! Web Storage est bien pratique pour
stocker de simples chaînes de texte.
Comment manipuler des données complexes telles que les Objets de

JS
65 / 78
Utilisation de JSON
Utilisation de JSON
N’OUBLIEZ PAS ! Web Storage est bien pratique pour
stocker de simples chaînes de texte.
Comment manipuler des données complexes telles que les Objets de

JS
Il faut les linéariser au préalable en chaînes de texte

66 / 78
JSON ...
Le format JSON est la solution !

JSON un petit rappel ... Format léger et vraiment très simple
Usages I Sert à stocker des données (ex : fichier de configuration)
I Sert à échanger des données à travers le réseau, entre
clients et serveurs (ex : sérialisation / désérialisation)
I Sert à décrire un objet JS mais sous une forme textuelle
dans le code source
67 / 78
Exemple de définition JSON
68 / 78
Exemple d’utilisation JSON
69 / 78
Utilisation de JSON
Le format JSON est la solution !

Deux méthodes équipent les navigateurs modernes :
JSON.stringify() prend en paramètre un objet et renvoie une chaîne
de texte linéarisée
JSON.parse() L’inverse de la 1re qui reforme un objet à partir de la
chaîne linéarisée.
Des frameworks tels que jQuery sont équipés de fonctions similaires
(parseJSON) pour les anciens navigateurs qui ne seraient pas équipés en
natifs de telles méthodes de conversion.
70 / 78
JSON pour Le web Storage

JSON pour Le web Storage par les exemples !
Stockage
71 / 78
JSON pour Le web Storage par les exemples !

Lecture
72 / 78
Exercice : Proposez une solution pour stocker en session les informations

introduites par l’utilisateur
73 / 78
Les Web Sockets
4. Web Sockets
74 / 78
Les Web Sockets
Le Web Sockets
I C’est un nouveau protocole ambitieux de communication avec le
serveur.
I Un navigateur ne peut habituellement qu’effectuer des requêtes au
serveur puis recevoir sa réponse ) C’est une communication
unidirectionnelle (canal simplex).
I Les Web Sockets apportent la communication bi-directionnelle
(full-duplex) entre le client et le serveur.
Question ?
Demandez-vous comment vous réaliseriez une page dont le contenu devrait
toujours être à jour (comme un chat par exemple) ?
75 / 78
Les Web Sockets
Le Web Sockets
Oui, mais ...

Le client travaille, le serveur travaille, et la plupart du temps il n’y a rien à
mettre à jour )Pas optimal !
La solution :
Le serveur va pouvoir nous envoyer les changements dès qu’ils se
produisent, et le tout est effectué dans une requête spéciale dépourvue
d’en-têtes HTTP ! ) Les données téléchargées sont ultra légères et ne
contiennent que l’information qui nous intéresse
Le Web Sockets 76 / 78
Bibliographie
77 / 78
Bibliographie
1 HTML5 et CSS3 Cours et exercices corrigés,Jean Engels, Edition

Eyrolles, 2012
2 CSS avancées : Vers HTML5 et CSS3, Raphaël Goetter, 2me Edition,
Eyrolles, 2012
3 Bootstrap 3 pour l’intégrateur web - CSS et Responsive Web Design,
Christophe Aubry, Edition Eni, Avril 2014, 370 pages
4 HTML5 pour les web designers, Rachel Andrew et Jeremy Keith, 2me
Edition, Eyrolles, Juillet 2016, 104 pages
78 / 78
Développement Web: JavaScipt Avancé
Manel Ben Sassi
Université de Jendouba, FSJEG

[email protected]
1 / 26
Sommaire
1 Objectifs
2 Type de fonctions en JS
Les fonctions internes (Inner)
Les fonctions Anonymes
Les fonctions immédiates (Self-invoking)
Les fonctions callback
3 La portée et la fermeture des fonctions
4 Conclusion
5 Bibliographie
2 / 26
Objectifs
Les objectifs ...
A la fin de ce cours, vous devriez être capable de ...

Différencier les différents types de fonction
Ecrire une fonction en JavaScript de différentes manière
Définir la portée des variables par rapport à la définition des fonctions.
Comprendre le fonctionnement de la fonction "CallBack" de
JavaScript
3 / 26
Type de fonctions en JS
Les types de fonctions en JS ...
4 / 26
Rappel sur les focntions en JS

Objectifs : programmation modulaire, factoriser et réutiliser le code.
⇒ Retenez qu’une fonction, ce n’est pas si différent qu’une variable...
Figure – Une focntion toute simple
Qu’en pensez-vous d’une démonstration sous JSFiddle ?

https ://jsfiddle.net/
5 / 26
Les fonctions en JS
6 / 26
Type de fonctions en JS Les fonctions internes (Inner)
Les fonctions internes (Inner) ...
7 / 26
Type de fonctions en JS Les fonctions internes (Inner)
Les fonctions internes (Inner)
Les fonctions sont typées comme des variables

Nous pouvons les déclarer dans une fonction comme de simples
variables.
8 / 26
Type de fonctions en JS Les fonctions Anonymes
Les fonctions anonymes ...
9 / 26
Type de fonctions en JS Les fonctions Anonymes
Les fonctions anonymes

Une fonction anonymes est une fonction qui n’a pas de nom
Très peu utilisée cette manière, nous préférons
Objectifs : isoler son code
10 / 26
Type de fonctions en JS Les fonctions immédiates (Self-invoking)

...
11 / 26
Type de fonctions en JS Les fonctions immédiates (Self-invoking)
Les fonctions immédiates sont une application des fonctions

anonymes, mais appelées directement après leurs créations
Figure – L’exécution immédiate de la focntion auto-appelante
12 / 26
Type de fonctions en JS Les fonctions callback
Les fonctions Callback ou

auto-appelante ...
13 / 26
Les fonctions sont typées comme des variables ⇒ Nous pouvons les
passer en paramètre
Qu’en pensez-vous d’une démonstration sous JSFiddle ?

14 / 26
Les fonctions Callback ou "de rappel" par définition ...

C’une fonction qui est passée en paramètre à une autre fonction.
Elle est exécutée au "bon moment".
Elle est souvent utilisée pour la programmation évenementielle ou
encore la programmation Asynchrone (exemple l’AJAX).
15 / 26
Les fonctions callback : Démonstaration
Protocole de démonstration d’utilité !

Lien de la démonstration : https ://jsfiddle.net/manelbs/enn74tff/2/
Objectif : Nous souhaitons que chaque Li ait son propore clique !
1ère étape : Nous ajoutons une boucle et un affichage classique
2ème étape : la solution avec la fonction auto-appellante
16 / 26
La portée et la fermeture des fonctions
Scope et Closure des fonctions ...
17 / 26
Le Scope ou la portée des fonctions

Deux types de portée
Démonstration Scope sous JSFiddle ?

18 / 26
La fermeture des fonctions

Il y a la possibilité d’imbriquer la déclaration des fonctions
19 / 26
La fermeture des fonctions

Fermeture des fonctions
Une fermeture est une fonction possédant des variables libres ainsi qu’un
environnement qui ferme sur ces variables.
Une fonction imbriquée est une fermeture ⇒ La fonction imbriquée peut

"hériter" des arguments et des variables de la fonction qui la contient ⇒
La fonction interne contient la portée de la fonction externe.
Retenez
On ne peut accéder à la fonction interne seulement avec des
instructions contenues dans la fonction externe,
La fonction interne est une fermeture ⇒ la fonction interne peut
utiliser des arguments et des variables de la fonction externe alors que
la fonction externe ne peut pas utiliser de variables et d’arguments de
la fonction interne.
Exemple ? 20 / 26
Exemple de fermeture et d’imbrication
La porté des variables de la fonction C par rapport à la fonction A

et B ?
21 / 26
Exemple de fermeture et d’imbrication
C accède à la variable y de B et à la variable x de A. Cela est possible

parce que :
1 B est une fermeture ∈ A ⇒ B peut accéder aux arguments et aux
variables de A
2 C est une fermeture ∈ B
3 Étant donné que la fermeture de B ∈ A et que celle de C ∈ B, C peut
accéder à la fois aux arguments et variables de B et A. ⇒ C enchaîne
les portées de B et A dans cet ordre.
4 La réciproque n’est pas vraie. A ne peut avoir accès à C, parce que A
ne peut accéder ni aux variables ni aux arguments de B, or C est une
variable de B. C est donc privé et seulement pour B.
22 / 26
Conclusion
Pour résumer ...
23 / 26
Conclusion
En conclusion
Il existe des fonctions natives, mais il est aussi possible d’en créer,
avec le mot-clé function.
Les variables déclarées avec var au sein d’une fonction ne sont
accessibles que dans cette fonction.
Il faut éviter le plus possible d’avoir recours aux variables globales.
Une fonction peut recevoir un nombre défini ou indéfini de paramètres.
Elle peut aussi retourner une valeur ou ne rien retourner du tout.
Des fonctions qui ne portent pas de nom sont des fonctions anonymes
et servent à isoler une partie du code.
24 / 26
Bibliographie
25 / 26
Bibliographie
1 JavaScript : La référence, David Flanagan, 5me Edition O’Reilly,

1042 page, 2007
2 Apprendre à Développer avec JavaScript, Christian Vigouroux,
Edition ENI, 726 pages, 2016
3 Débuter en JavaScript, Shelley Powers, Edition Eyrolles, 2007
26 / 26
Responsive Web Design
Manel Ben Sassi
Université de Jendouba, FSJSEG

[email protected]
1 / 101
Sommaire
1 Objectifs
2 Les règles du design
Design ou Web design
Ergonomie : Définition et Règles
3 Rappel : la feuille de style CSS
Les aspects avancés du CSS
Les notations courtes et longues
Les sélecteurs CSS avancés
Les pseudo classee CSS
Les pseudo Elements
CSS 3 ... les nouveautés
Les effets visuels
Les animations en CSS
4 Responsive : Définition
Quelles solutions autres que Responsive Web Design
Les avantages du web responsive design
Les fondamentaux du web responsive
La balise Viewport
Les Media Queries
2 / 101
Quelles sont les objectifs de ce cours ?
3 / 101
Les objectifs ...
Acquérir la culture de l’adaptativité dans le web

Comprendre le concept de responsive web design.
Analyser et discuter l’importance de la programmation web adaptative
Comprendre et appliquer les fondamentaux du responsive web à savoir
la méta balise "viewport" et les "media queries"
4 / 101
Comment rendre un site plus attractif ?
5 / 101
Y a t-il des règles ou des normes pour le
développement web ?
6 / 101
Ergonomie et design ... les 2 fondamentaux du
développement web
Mais pourquoi ?
Il faut capter les visiteurs avec un design attrayant et ensuite les retenir en
facilitant leurs navigations grâce à une ergonomie bien pensée !
7 / 101
développement web
Vous dites Design ?
Par définition...
L’art de présenter de manière simple les choses les plus complexes.
Le web design requiert des compétences dans la

programmation, le développement et l’intégration !
8 / 101
Design du Web ? Quels composants ?
9 / 101
développement web
Vous dites ERGONOMIE ?
Par définition...
L’ergonomie d’un site Internet ⇒ Sa capacité à répondre efficacement aux
attentes des internautes avec une "navigation confortable".
⇒ Le principal défi à relever ⇒ La diversité des profils des internautes.
10 / 101
Qu’est ce que l’ergonomie appliquée aux sites
web ?
11 / 101
développement web
Possibilité de faire des tests utilisateurs et des audits

d’accessibilité
Les principes de base à respecter avant ...

] Afficher le nom et le logo en gros et bien en vue.
] Éviter les éléments graphiques en filigrane (images en
arrière-plan et texte au premier plan).
] Éviter l’abondance de menus déroulants
12 / 101
Les commandements du web design
Règle n 1 : Mon site .. mon miroir

Créer du contenu à son propre image Quelle que soit votre activité,
votre site doit refléter vos valeurs et véhiculer l’image de
marque ⇒ 1. Utilisez vos couleurs + 2. Choisissez vos polices
de caractères + 3. Créer un logo aligné vos aspirations
esthétiques et commerciales mais aussi en
fonction de votre public cible (Le langage visuel et textuel de
HELLO KITTY 6= de celui de SPIDERMAN)
Ciblez de bons mots clefs .... Comment ?
13 / 101
Ciblez de bons mots clefs .... Comment ?
1 Parlez la même langue que votre cible

2 Ciblez des recherches populaires
3 Vérifiez la concurrence
Mettre en avant des témoignages clients
14 / 101
Attention ! Retenez par convention ...

Contraste et lisibilité du texte Par exemple : pas du texte jaune sur une
fond gris ! Taille de police confortable
Texte souligné Ne soulignez pas le texte ⇒ Un lien ! Pour faire ressortir
le texte, il vaut mieux changer de couleur et-ou la taille
Segmenter le texte ⇒ Utiliser les titres et les sous-titres.
Peu d’animation ⇒ Éviter les animations pour les éléments essentiels
(logo, titre, signature) ⇒ assimilé à de la publicité.
15 / 101
Règle 2 ... Attirer, Engager et Convaincre

Partager du contenu sur les réseaux sociaux Objectif : Créer une
relation de confiance pour mieux vendre son image ⇒ Inciter
les clients à vous suivre sur les réseaux sociaux
Objectif : le faire revenir sur le site

Récupérer l’email de votre prospect
1 Se créer une base de données prospects

2 Offrir quelques choses en échange
3 Envoyer de l’information utile (PAS DE SPAMS)
16 / 101
Règle ... Un Bon formulaire de contact
Figure – Un bon formulaire de contact
17 / 101
Règle 3 ... Un design professionnel et moderne

"Ne sous-estimez pas le pouvoir de la première impression"
Figure – The power of design
18 / 101
"Booster le référencement naturel, mieux valoriser les produits"
Figure – Before and after ....

19 / 101
"Une navigation agréable + facilité pour trouver l’information I
Meilleur satisfaction "
Figure – Before and after ....

20 / 101
Figure – Before and After ....
21 / 101
Attention ! Retenez par convention ...

Largeur des colonnes Evitez les colonnes trop étroites ou trop larges
(entre 10 et 15 cm) ⇒ L’œil se fatigue.
Evitez les gadgets Les compteurs, animations flash, etc ⇒ A éviter ça
fatigue les yeux et détourne l’attention du contenu !
Légèreté et la rapidité Un affichage rapide et léger
Simplicité des pages et des menus. La norme consiste à placer :
1 Les menus et chapitres principaux en haut de la page,
2 Les sous menus ou sous chapitres à gauche de la page,
3 Les références et sources en bas de la page,
4 Les renvois, les publicités, à droite de la page.
22 / 101
Règle 4 ...
Contrôler la navigation La navigation sur le site est probablement le
facteur qui influence le plus fortement
l’expérience des usagers. Un site sur lequel il est agréable de
naviguer verra ses visiteurs prolonger leur séjour sur ses pages.
23 / 101
Améliorer l’expérience de l’utilisateur
"Accompagner pour simplifier la tâche"
I L’ergonomie doit faciliter la navigation

I Les textes doivent donner envie
I Trop de texte tue le texte
I Évitez l’animation ...
24 / 101
Retenez ...
La communication est essentielle pour une bonne expérience utilisateur.

Le plus beau et efficace des environnements virtuels doit parler à
l’utilisateur afin qu’il puisse en profiter
A vous de jouer ...
25 / 101
Pourquoi dois-je avoir une feuille de
style ?
26 / 101
Le CSS, Pour quelle raison ?
Question
"HTML me permet aussi de rajouter des couleurs de mettre en gras ...
Alors pourquoi se compliquer la vie ?"
27 / 101
Question
"HTML me permet aussi de rajouter des couleurs de mettre en gras ...
Alors pourquoi se compliquer la vie ?"
Objectifs
Séparer le fond (le contenu) de la forme (la présentation ou la mise
en forme)...
Avoir un code facilement compréhensible ⇒ maintenable, évolutif et
réutilisable
On se pose la question ...

Je ne vois pas pourquoi ? je comprendrais toujours mon code... ?
28 / 101
L’inconvénient d’avoir un code fusionné
29 / 101
30 / 101
31 / 101
Où placer une feuille de style ?
32 / 101
Où placer le code CSS ?
Deux endroits :
Dans une balise style qui est elle-même placée dans la balise head de
notre page HTML. C’est pratique car on a ainsi le code HTML et le
code CSS dans la même page. C’est ce que nous ferons pour nos
premiers essais.
Dans un autre fichier dédié au style avec une extension .css. On
utilise dans ce cas une balise link placé elle aussi dans la balise head
de notre page HTML pour indiquer l’emplacement du fichier CSS.
33 / 101
Exemple de page HTML avec le code CSS intégré via la balise

style :
34 / 101
Exemple de page HTML avec le code CSS intégré via un fichier

externe :
35 / 101
Principe du CSS ...
balise {
propriete : valeur ;
}
Balise : Nom de la balise dont on modifie l’apparence (ex : < em >, <
h1 >,etc)
propriete : catégorie d’effet de style (color, font-size)
valeur : valeur associée à la propriété (red, blue).
36 / 101
Principe du CSS ...
Appliquer des règles à plusieurs balises
balise1, balise2, ..., BaliseN {
}
Balise : Nom de la (ou les) balise(s) dont on modifie l’apparence (ex :

< em >, < h1 >,etc)
propriete : catégorie d’effet de style (color, font-size)
valeur : valeur associée à la propriété (red, blue).
37 / 101
Principe du CSS ...
Imbrication de balises
balise1 balise2 balise3 {
}
Quand on est dans la balise "balise3 " contenue dans la balise

"balise2 ", elle-même contenue ...
38 / 101
Attributs class et id
Comment faire pour que seulement quelques mots mis en valeur

(mais pas tous !) soient en vert et de taille 30 pixels ?
Utilisation des attributs class et id.

Permettent de définir un style personnalisé
Peuvent être mis sur n’importe quelle balise
Permettent de ne modifier que certains mots, titres, ...
39 / 101
Utilisation de l’attribut class
1. Modification du fichier html

On ajoute l’attribut "class" dans les balises que l’on souhaite modifier.
<h1 class="nom1"></h1> <p class="nom2"></p>
2. Modification du fichier CSS

On définit les valeurs des propriétés qui vont être appliquées aux balises
ayant l’attribut class.
.nomdelaclasse {
}
Contrairement aux balises, il faut ajouter un point devant le nom de la

classe
40 / 101
Utilisation de l’attribut id
L’attribut id s’utilise (quasiment) comme l’attribut class

Définition dans le css avec ] (et non un point)
Définition d’un identifiant dans le css

On définit les valeurs des propriétés qui vont être appliquées aux balises
ayant l’attribut class.
]nomID {
}
Attention : id ne peut être utilisé qu’une seule fois !
41 / 101
Différence entre class et id
L’identifiant (id)
utilisé pour référencer un élément
utilisé pour la disposition des éléments de la page (entête, menu, pied
de page, ...)
L’attribut class
utilisé plusieurs fois (pas de référence à un objet précis)
utilisé dans les autres cas.
42 / 101
Balises universelles
Comment modifier l’apparence d’un mot qui n’est contenu dans

aucune balise
Utilisation des balises universelles
Deux types de balises universelles :
Balise de type inline : <span>... </span>
Balise de type block : <div> ... </div>
Balises qui "ne servent à rien"
Permettent de rajouter des classe modifiant la partie comprise entre
ces balises.
Exemple
<span class="grasRouge"> Bonjour </span>
43 / 101
Les aspects avancés du CSS
44 / 101
Notations Long Hand Vs Short Hand
Pour définir une bordure, nous avons deux façons de faire :
Notation Long Hand Exemple : pour définir une bordure, nous avons
utiliser les trois propriétés CSS border-width, border-style
et border-color
Notation Short Hand Pour le même exemple, nous pouvons utilisé la
propriété border avec les valeurs des trois propriétés
précédentes
D’autres exemples
Cette règle s’applique aussi sur les propriétés des modèles de boîtes
(padding, border, margin) et du Background (background) 45 / 101
Sélecteurs CSS Avancés
Etoile (*) sélecteur universel permet de sélectionner tous les éléments

HTML d’une page d’un coup
46 / 101
Imbrication (A B) Sélectionner un élément B contenu dans un élément A

(même dans une classe).
47 / 101
A + B Sélectionner tous les éléments B de même niveau et suivant

immédiatement les éléments A
48 / 101
A > B Sélectionner tous les éléments B qui sont des éléments

enfants directs de A.
49 / 101
Les pseudo classes CSS
:link permet de styliser un lien non visité ;

:visited permet de styliser un lien une fois celui-ci visité (parfois un
style ignoré par les navigateurs pour des raisons de sécurité)
:hover permet de changer l’aspect d’un élément lorsque les visiteurs
poseront leur curseur dessus ;
:active permet de modifier l’aspect d’un lien lors du clic.
50 / 101
Les pseudo Classes CSS
:first-child sélectionner le premier élément enfant HTML d’un certain

type par rapport à un élément parent.
:last-child sélectionner le dernier élément enfant HTML d’un certain
type par rapport à un élément parent.
51 / 101
Les Pseudo Classes CSS
:nth-child permet de cibler certains enfants d’un élément HTML.Nous

mettons entre les parenthèses () soit un nombre, soit un mot
clef. (Exemple paire ou impaire)
52 / 101
Les Pseudo Elements CSS
Les pseudo éléments

Permettent de modifier l’apparence d’une partie seulement d’un ou de
plusieurs éléments HTML, ou encore d’ajouter du contenu au début ou
à la fin d’un certain élément HTML.
Sont reconnaissables en CSS à leur écriture. Ils commencent par « : :
» (un double deux-points).
: :first-letter permet de Ne sélectionner Que la première lettre d’un texte

contenu dans un élément ;
: :first-line permet de Ne sélectionner Que la première ligne d’un texte
contenu dans un élément ;
: :selection permet de sélectionner la partie d’un élément sélectionnée
(par un double clic) par l’utilisateur ;
: :before permet d’insérer du contenu au début d’un élément HTML ;
: :after permet d’insérer du contenu à la fin d’un élément HTML.
53 / 101
Les Pseudo Elements CSS
Exemple
Figure – La lettrine
Nb : Pour plus d’exemples, voir l’annexe
54 / 101
Les nouveautés apportés au CSS3 ?
55 / 101
Les nouveautés- Quoi de neuf ?
Les nouveautés sont divisées en trois grandes parties :

Les effets visuels
Les sélecteurs
Les nouveaux outils pratiques
Il ne s’agit pas de l’intégralité des nouveautés, mais ça vous permettra

d’avoir un très bon aperçu global.
56 / 101
Les effets visuels ...
57 / 101
Effets visuels
Border radius : Arrondit les bords d’ un bloc
Transition : Passe d’un état à un autre d’un élément avec par une
transition animée
58 / 101
Effets visuels
Box-shadow : Applique une ombre sur un bloc :
Text-shadow : Applique une ombre sur un texte :
59 / 101
Effets visuels
Transform : Déplace, déforme, ou effectue la rotation d’un élément
3D- Transform : Effectue des transformations en 3D
60 / 101
Que veut dire Responsive ?
61 / 101
Responsive ...
Le terme Responsive
I Fournir "Réponses ou une adaptativité rapide et positive" aux
différents usagers (profils)
I Le "Responsive Web Design" fait référence à : "création d’un ou
plusieurs catalogue(s) de patrons de modèles de multi-dispositifs".
62 / 101
Le web Responsive Design ...
I "Responsive Web design" terme introduit par "Ethan Marcotte" en

2010
I Le Responsive Web Design est une approche de conception Web
qui vise à l’élaboration de sites offrant une expérience de lecture et de
navigation optimales pour l’utilisateur quelle que soit sa gamme
d’appareil (téléphones mobiles, tablettes, liseuses, moniteurs
d’ordinateur de bureau).
Améliorer l’expérience de l’utilisateur

I Une expérience utilisateur "Responsive" réussie implique un minimum
de redimensionnement (zoom), de recadrage, et de défilements
multidirectionnels de pages.
63 / 101
Pourquoi devrons nous développer
Responsive ? d’autres Alternatives ?
64 / 101
Site dédié, application ou responsive ?
3 manières de circuler et diffuser l’information :

1. Site dédié
2. Application native
3. Version responsive de site web
65 / 101
1re solution : Site dédié
Analysons ces trois solutions ! !
Un projet de site dédié consiste à concevoir deux ou plusieurs entités

différentes selon le dispositif visé : un site principal, un site pour
smartphones, un site pour tablettes, etc.
Avantages
1 La possibilité d’affiner précisément la structure du site et ses contenus
en regard du périphérique utilisé
2 La possibilité de cibler et de s’adapter à des fonctionnalités variées
3 Peut être une alternative rapide, en attendant une refonte complète
(et responsive) de son site web
66 / 101
1re solution : Site dédié
Inconvénients
1 Le contenu dupliqué ("duplicate content")
2 La maintenance de plusieurs versions de site et de plusieurs adresses
web (moins facilement indexables par un moteur de recherche)
67 / 101
2eme solution : Une application native
Une application native est un produit développé spécifiquement dans

divers "langages" (iOS, Android, Windows Phone) et qui se
télécharge et se référence au sein d’un "Store" (AppStore, Google
Play, Windows store).
Avantages
1 La prise en charge facilitée de fonctionnalités natives (touch,
accéléromètre, notifications, GPS, etc.)
2 Une installation possible sur son périphérique
3 Une totale "acclimatation" au périphérique (ergonomie,
performances, densité de pixels)
4 La présence de sa marque sur l’AppStore (pour ne citer que lui) et de
pouvoir disposer d’un "raccourci" sur le smartphone de l’utilisateur
68 / 101
2eme solution : Une application native
Inconvénients
1 Un développement spécifique dans plusieurs langages (propres à iOS,
Android, Windows Phone, etc.)
2 Le coût du développement, des licences, et de la maintenance pour
chaque système d’exploitation
3 Un contenu non indexable par un moteur de recherche web classique
4 La mise à jour de l’application nécessite une action de l’utilisateur
69 / 101
3eme solution : Une version responsive
Des centaines de tailles et formats d’écrans différents se connectent à

chaque instant, la méthode du Responsive Web design apparaît
comme la "solution de facilité" en vertu de son objectif principal
70 / 101
Les avantages du Responsive web
designing ?
71 / 101
Avantages
1 Des coûts et des délais généralement inférieurs aux techniques citées

précédemment
2 Une maintenance de projet facilitée (une seule feuille de style, un seul
fichier HTML, etc.)
3 Une mise à jour transparente et un déploiement multiplateformes
4 Le Responsive peut être envisagé après la conception initiale du site
(même si ce n’est pas l’idéal)
Mais également
Depuis quelques temps est que Google met en avant les sites "adaptés
au mobile" au sein de ses résultats de recherche
72 / 101
Avantages
73 / 101
Inconvénients
De bonnes connaissances techniques, et une veille technologique

constante, sont indispensables
Il est nécessaire de prévoir des tests nombreux et variés tout au long
du projet ("device labs", simulateurs)
Il est difficile de contourner les limites ergonomiques et de
performances des navigateurs web
Faire du responsive, c’est coûteux en termes de temps (plus de temps
pour le développement)
74 / 101
Web Responsive
L’essentiel pour créer votre 1er site adaptatif
CSS3 et les Media queries

Les méta tags et les viewport
Grid System
Frameworks
75 / 101
Comment procéder pour développer
responsive ?
76 / 101
Les fondamentaux du web responsive design
Trois points essentiels doivent être mis en place :

1 Une grille d’affichage flexible ⇒ Soit un gabarit (affichage globale de
la page) qui ne dépende pas d’une résolution minimale, maximale ;
2 Des médias flexibles ⇒ mes images, vidéos, etc, ne débordent pas
du cadre de notre grille d’affichage ;
3 un ensemble de règles CSS basé sur Media Queries : le principe
est de mettre des conditions sur l’affichage afin d’afficher/masquer,
voire changer le rendu de notre application Web.
77 / 101
Viewport
Désigne schématiquement la surface de la fenêtre du navigateur.
La notion de viewport sur un appareil mobile est différente de celle
sur un écran de bureau ⇒ le navigateur mobile ne dispose pas de
"fenêtre" réelle, ni de barres de défilement ! !
Faut-il connaître toutes les différentes surfaces ?
78 / 101
Les différentes surfaces d’un mobile

La surface physique C’est la résolution de l’écran telle quelle est définie par
le constructeur.
La surface utilisable En pixels CSS : également appelée device-width
(device-height) ou screen.width (screen.height).
Le hic est que cette surface ne correspond pas toujours à la surface

physique, notamment pour les mobiles dits "Retina" ou haute
définition
79 / 101
Il faut savoir que ...

Par défaut, la taille du viewport d’un terminal mobile ne correspond
ni à la taille de son écran réelle ni celle en "pixels CSS".
Elle est généralement bien supérieure à la surface physique, afin de
pouvoir y "caler " n’importe quelle page web en lui affectant un niveau
de (dé)zoom.
quelques valeurs par défauts

Android 1, 2 et 3 : 800px
Android 4 : 980px
Opera mini : 850px
Opera mobile : 980px
Safari mobile : 980px
Internet Explorer mobile : 1024px
80 / 101
Compte tenu de ces différentes surfaces, les pages web s’affichent par
défaut de manière à ce que toute la surface entre dans celle de l’écran.
Ce niveau de zoom initial correspond à une simple division

mathématique de device-width/viewport
81 / 101
La balise <meta> viewport

. La balise <meta> de HTML permet de contourner ce zoom
rendant le contenu illisible !
. Les attributs de cette balise sont name et content qui permet
de fixer la largeur de viewport à la valeur souhaitée, voire de
l’adapter automatiquement à la valeur de device-width du
terminal.
82 / 101
La balise <meta> autorise d’autres valeurs utilisables dans vos
projets :
width largeur de fenêtre viewport (par exemple
width="device-width")
height hauteur de fenêtre viewport (par exemple
height="device-height")
initial-scale niveau de zoom initial (par exemple initial-scale="1.0")
minimum-scale niveau de zoom minimal (par exemple
minimum-scale="0.5")
maximum-scale niveau de zoom maximal (par exemple
maximum-scale="3.0"). Attention, la valeur "1.0" interdit le
zoom et peut rendre vos pages inaccessibles
user-scalable possibilité à l’utilisateur de zoomer (par exemple
user-scalable="yes"). Attention, la valeur "no" interdit le
zoom et peut rendre vos pages inaccessibles
83 / 101
Instructions d’usage des feuilles de style
Les valeurs en pourcentage
Définissez une taille égale à 100% pour votre élément body, puis
ensuite une largeur de 50% pour un div enfant direct du body, la taille
du div sera toujours égale à 50% de celle du body.
Pareil pour les images et les vidéos
84 / 101
Les Media Queries ? on entend parler ?
85 / 101
Media Queries
1 Media Queries = spécification CSS3 qui définit les techniques pour

l’application de feuilles de styles en fonction des périphériques de
consultation utilisés pour du HTML
2 Favoriser les bonnes pratiques : séparer le contenu de la forme
Intérêt
Pouvoir satisfaire des contraintes de dimensions, de résolutions et d’autres
critères variés pour améliorer l’apparence graphique et la lisibilité
86 / 101
Approche historique des media queries
Avec CSS2 et HTML4, il était déjà possible de spécifier un média de

destination pour l’application d’une ou plusieurs feuilles de style.
Comment ? A travers la balise <link> qui est dupliquée pour autant
de feuilles de style que nécessaire, et comporte un attribut media
précisant le contexte dans lequel les styles doivent être appliqués
Exemple ?
87 / 101
Media queries
Exemple
88 / 101
Media queries
Les Media Queries permettent donc de cibler :
Le type de média
La taille de l’écran
La taille de la fenêtre
La résolution
Le nombre de couleurs
L’orientation
...
89 / 101
L’attribut magique "media"
L’attribut media peut prendre (depuis CSS2) les valeurs

suivantes :
Screen : Écrans
Handheld : Périphériques mobiles ou de petite taille
Print : Impression
Aural : (CSS 2.0) / speech (CSS 2.1) Synthèses vocales
Braille Plages braille
Embossed : Imprimantes braille
90 / 101
L’attribut media peut prendre (depuis CSS2) les valeurs

suivantes :
Projection : Projecteurs (ou présentations avec slides)

tty Terminal (police à pas fixe)
tv Téléviseur
all Tous les précédents
91 / 101
Ces directives peuvent parfaitement être intégrées au sein

même d’une feuille de style grâce à une règle @media suivie
directement du type. La syntaxe sera alors légèrement
différente :
92 / 101
Syntaxe des Media Queries CSS3
Requêtes des médias : c’est une combinaison multiples de plusieurs

critères.
La valeur de la requête : c’est une expression dont la valeur est
toujours vraie ou fausse.
Il suffit d’associer les différentes déclarations possibles avec un
opérateur logique pour définir l’ensemble des conditions à réunir pour
l’application des styles compris dans le bloc adjacent.
Les opérateurs logiques peuvent être :
and "et",
only "uniquement"
not "non"
Pour obtenir le OU logique , il suffit d’énumérer les médias séparés par
"," .
93 / 101
Règles générales
On combine ensemble un type de média (screen, all...) et une
expression grâce à and, bien qu’une expression seule puisse être
utilisée. L’expression est toujours écrite entre parenthèses.
94 / 101
Exemple 2
95 / 101
Les fonctionnalités (les critères) associées media
(1)
La plupart des critères (ou fonctionnalités) peuvent être préfixés par min-
et max- lorsqu’elles acceptent des valeurs numériques pour définir des
valeurs minimales ou maximales à respecter.
Color support : de la couleur (bits/pixel)

color-index : périphérique utilisant une table de couleurs indexées
device-aspect-ratio ratio du périphérique de sortie (par exemple
16/9)
aspect-ratio ratio de la zone d’affichage
device-height dimension en hauteur du périphérique
device-width dimension en largeur du périphérique
96 / 101
Les fonctionnalités (les critères) associées media
(2)
La plupart des critères (ou fonctionnalités) peuvent être préfixés par min-
et max- lorsqu’elles acceptent des valeurs numériques pour définir des
valeurs minimales ou maximales à respecter.
Grid périphérique bitmap ou grille (ex : lcd)
Height dimension en hauteur de la zone d’affichage
monochrome périphérique monochrome ou niveaux de gris
(bits/pixel)
Orientation orientation du périphérique (portait ou landscape)
Resolution résolution du périphérique (en dpi, dppx, ou dpcm)
Scan type de balayage des téléviseurs (progressive ou interlace)
97 / 101
Notez ces remarques
I Les dimensions pourront être évaluées avec des unités (px, em). Les
ratio avec des fractions (entier/entier). Une résolution sera définie en
dpi (points par pouce) ou en dpcm (points par centimètres).
I Certaines de ces propriétés peuvent être testées d’une façon raccourcie
sans valeur, par exemple (color) qui sera équivalent à (min-color : 1)
ou considérée comme vraie pour une valeur différente de 0. La
fonctionnalité monochrome n’est pas uniquement booléenne avec la
syntaxe raccourcie (monochrome), on peut aussi considérer un nombre
de niveaux de gris, par exemple (min-monochrome : 2) pour 2 bits par
pixel.
98 / 101
Démonstration
99 / 101
Au service des mobiles
Media Queries
Pour produire des améliorations spécifiques à l’affichage sur les mobiles, qui
sont directement concernés par des critères sur les dimensions de l’écran
(en terme de résolution et d’espace disponible) et sur l’utilisation tactile.
Nous trouvons des règles pour :

I agrandir la taille du texte
I agrandir la taille des contrôles et zones cliquables (pour une utilisation
au doigt)
I faire passer le contenu sur une seule colonne
I masquer ou afficher des éléments spécifiques
I ajuster les dimensions et marges
100 / 101
Au service des mobiles
Exemple
La fonctionnalité orientation a été introduite pour des périphériques
pouvant être orientés. On peut alors déclarer une feuille de style spécifique
pour ajuster l’affichage
Exemple
101 / 101
Développement Web: JavaScript avancé

AJAX, JQuery et Node.JS
Manel Ben Sassi

[email protected]
1 / 70
Sommaire
1 Objectifs
2 Le client Rich
Introduction
AJAX
Ajax par définition
Fonctionnement d’Ajax
Objets et méthodes d’Ajax
JQUERY
3 JavaScript côté serveur : Node.Js
Node.js : Définition et architecture
Programmation Asynchrone et non bloquante avec Node.js
Node.js par la pratique
Récupération d’url
Paramètres envoyés au niveau de l’url
4 Conclusion
5 Bibliographie
2 / 70
Objectifs
Les objectifs ...

A la fin de ce cours, vous saurez ...
Quelques technologies pour le développement des Rich Internet
Applications
Découvrir les aspects avancés du JavaScript côté client mais aussi côté
serveur
La différence entre Ajax et JavaScript
Les concepts principaux de JavaScript qu’il faut savoir pour utiliser
Ajax et Node.js
Utilités, les avantages et les inconvénients de ces "nouvelles"
technologies liées au JavaScript
3 / 70
Le client Rich Introduction
Introduction
4 / 70
Introduction
Les applications Web Vs site Web
Site web Une seule fonction : présenter un contenu (Exemple : portail
de l’entreprise ) ⇒ Interface graphique
Application web Offre des services à travers le site web, consommé à
travers le client-navigateur (exemple : chat, mail, entretenir
un réseau social, etc)
5 / 70
Introduction
Q. Quelles sont les types d’application web qu’on avoir ? et Combien ?
6 / 70
Introduction
Q. Quelles sont les types d’application web qu’on avoir ? et Combien ?
7 / 70
Introduction
Explication des types ...

Type 1 Représente un système Serveur/terminal classique
Type 2 L’affichage effectué par le client se fait à la suite d’un
échange de requêtes avec le serveur.
Type 3 Les données restent centralisées mais les traitements sont
répartis entre le client et le serveur.
Type 4 et 5 Système popularisé par les SGBDR associés au SQL. Le
serveur gère les données, leur intégrité, la sécurité, etc. Le
client traite ces données pour éventuellement, en retour,
mettre à jour la base.
8 / 70
Introduction
Q. Avez-vous entendu parler des RIA ?
9 / 70
Introduction
Q. Avez-vous entendu parler des RIA ?

Les applications Internet Riches est
Une application Web qui offre des caractéristiques similaires aux logiciels
traditionnels installés sur un ordinateur.
La dimension interactive et la vitesse d’exécution sont particulièrement
soignées dans ces applications Web. Elle est exécuté sur un navigateur web
(Aucune installation n’est requise)
10 / 70
Le client Rich AJAX
Asynchronous JavaScript and XML
11 / 70
Le client Rich AJAX
AJAX... des interrogations ?
Q. AJAX est un nouveau langage de programmation ?
12 / 70
Le client Rich AJAX
AJAX n’est ni une technologie ni un langage de programmation

AJAX est un concept de programmation Web reposant sur plusieurs
technologies comme le JavaScript et le XML
13 / 70
Le client Rich AJAX
AJAX n’est ni une technologie ni un langage de programmation

AJAX est un concept de programmation Web reposant sur plusieurs
technologies comme le JavaScript et le XML
Q. Qu’appelle-t-on alors AJAX ?
AJAX est une architecture informatique qui permet de construire

des applications web avec une composition de technologie
telle que : JS, CSS, DOM, XML, XMLHttpRequest et JSON
afin d’améliorer maniabilité et confort d’utilisation des
Les applications Riches Internet RIA
14 / 70
Le client Rich AJAX
Q. Qui utilise AJAX ?
15 / 70
Le client Rich AJAX
Q. Qui utilise AJAX ?
Les clients Web de messagerie : GMAIL Yahoo Mail, HotMail

Google Maps
Bing
FlickR, Picasa
Youtube, Dailymotion
Myspace, Facebook
16 / 70
Le client Rich AJAX
Pourquoi utiliser AJAX ?
Q. Que permet AJAX de plus ?
17 / 70
Le client Rich AJAX
Q. Que permet AJAX de plus ?
AJAX permet
Lire les données d’un serveur Web après le chargement de la page
Mettre à jour une partie de la page Web sans recharger la totalité de
la page
Communiquer avec le serveur d’une manière asynchrone en
échangeant des données derrière les coulisses
Envoyer des données à un serveur Web en arrière-plan ⇒ Diminuer le
temps de latence ⇒ Augmenter la réactivité de l’application web
La communication Synchrone et Asynchrone ?

18 / 70
Le client Rich AJAX
La communication Synchrone Vs Asynchrone ..
En mode synchrone le processus appelant attend que le processus appelé

ait renvoyé sa réponse pour continuer à s’exécuter ⇒
Requête et Réponse
En mode Asynchrone le processus appelant continue à travailler pendant
que le processus appelé exécute le traitement demandé et
gère via un événement - ou éventuellement via une instruction
de synchronisation - le(s) retour(s) du processus appelé.
Cool.. C’est quoi au juste Ajax ?
19 / 70
Le client Rich AJAX
C’est quoi AJAX ?
Asynchronous JavaScript And XML n’est pas un langage de

programmation, il est plutôt la combinaison de :
une requête XMLHttpRequest
JavaScript et HTML DOM (pour l’affichage et l’utilisation
des données)
NB : AJAX peut utiliser le XML lors du transfert des données,
comme il peut également les transférer sous la forme Texte ou
JSON
20 / 70
Le client Rich AJAX
Comment fonctionne AJAX ?
21 / 70
Le client Rich AJAX
Comment fonctionne AJAX ?
1 Un évènement survient dans la page web (la page est chargée, un click
sur un bouton)
2 L’objet XMLHttpRequest est créer par le JavaScript
3 L’objet XMLHttpRequest envoie une requête au serveur de la page web
4 Le serveur traite la requête
5 Le serveur formule une réponse et l’envoie à la page web
6 La réponse est lu et est traiter par JavaScript côté client
7 Une action propre est réalisée par JavaScript (comme recharger la
page ou rafraîchir l’affichage)
Quelle différence entre le web Classique et Le web avec

AJAX ?
22 / 70
Le client Rich AJAX
Web avec AJAX Vs Web sans AJAX ?
Quelle différence entre le web sans et avec Ajax ?
23 / 70
Le client Rich AJAX
Les objets et les méthodes d’Ajax
24 / 70
Le client Rich AJAX
XMLHttpRequest Object
Les méthodes associées à l’objet XMLHttpRequest
25 / 70
Le client Rich AJAX
Les propriétés associées à l’objet XMLHttpRequest
26 / 70
Le client Rich AJAX
Un premier Exemple
27 / 70
Le client Rich AJAX
Q. Que choisir Post ou Get comme méthode d’envoi de données ?
28 / 70
Le client Rich AJAX
Q. Que choisir Post ou Get comme méthode d’envoi de données ?
Get est plus rapide et plus simple ⇒ Plus utilisé que Post
Nous utilisons Post dans les cas suivants :
Le fichier caché n’est pas un option (nous devons mettre à jours un
fichier ou une BDD sauvegardée au niveau du serveur).
Lorsque nous envoyons beaucoup de données au serveur (POST n’a pas
de limites de taille).
Lorsque nous envoyons les données saisies du formulaire, POST est
plus sécurisé et plus robuste .
29 / 70
Le client Rich AJAX
Pour conclure, Retenez ...
30 / 70
Le client Rich AJAX
Ajax pour conclure ...
Les applications AJAX sont

des applications 3-tiers (client-serveurs) : client ←→ AppServer
←→ Source de données.
dirigées par les évènements : clicks des usagers qui peuvent changer
les données
avec un graphique intensif effets visuels, un contrôle visuel
orientées données Les usagers manipulent et saisissent les données
31 / 70
Le client Rich JQUERY
JQUERY ...
32 / 70
jQuery .. JS avec plus de simplicité
Ce qu’il faut connaître ... JQuery est une librairie qui permet la
manipulation de plusieurs objets :
HTML-DOM
CSS
les évènements et les méthodes associées à HTML
Effects and animations
AJAX
.....
33 / 70
JQuery .. JS avec plus de simplicité
Ce qu’il faut connaître ... Il y a beaucoup de frameworks JavaScript ...

"jQuery" semble être le plus populaire, et aussi le plus extensible.
Il est utilisé par les compagnies les plus populaires et puissantes du web
telles que :
Google
Microsoft
IBM
Netflix
34 / 70
jQuery .. JS avec plus de simplicité
jQuery est la bibliothèque qui permet de :

Ajouter, supprimer ou modifier des éléments HTML au sein d’une
page web.
Changer les styles des éléments de la page en modifiant le CSS qui
leur est associé.
Animer des éléments de la page web.
Envoyer et recevoir des données depuis un serveur grâce à AJAX
(asynchronous JavaScript and XML, c’est-à-dire JavaScript et XML
asynchrones) pour ne plus avoir besoin de recharger les pages après
validation d’un formulaire.
Profiter d’une plus grande compatibilité avec les différents navigateurs
35 / 70
JavaScript côté serveur : Node.Js
Le JavaScript côté Serveur Web ? ...
36 / 70
JavaScript côté serveur : Node.Js Node.js : Définition et architecture
JS Technologie côté serveur

Le navigateur web du visiteur (Firefox, Chrome, IE...) exécute le
code JavaScript et effectue des actions sur la page web.
37 / 70

38 / 70
JS Technologie côté serveur : Node.JS
Node.js offre un environnement d’exécution JS côté serveur qui

nous permet aussi d’utiliser le langage JavaScript pour générer des
pages web et des applications telles que :
Un serveur de Chat
Un système d’upload très rapide
... et de façon générale n’importe quelle application qui doit répondre
à de nombreuses requêtes rapidement et efficacement, en temps réel
Node.js est une plateforme pilotée par les évènements
39 / 70
Node JS : avantages
Grâce au Node.JS
Modèle mono-thread Gestion de la concurrence des clients différente des
serveurs multi-threades (saturation) ⇒ Oblige à se tourner
vers un modèle non-bloquant
Modèle non-bloquant Le fonctionnement asynchrone devient la règle et
est tendance ("reactive programming") ⇒ Donne un second
souffle au JS
Extensibilité et communauté Il existe de très nombreux
paquets (ou modules)
Gestionnaire de paquets (npm)
Annuaire officiel de paquets :www.npmjs.com
Programmation sur une couche plus basse que d’autres techologies

serveur
40 / 70
JavaScript côté serveur : Node.Js Programmation Asynchrone et non bloquante avec Node.js
JS Technologie côté serveur : Node.js
Pourquoi Node.js est rapide ?
41 / 70
Pourquoi Node.js est rapide ? Deux raisons ⇒ le moteur V8 et son

fonctionnement non bloquant.
Le moteur V8
C’est le moteur d’exécution, Open Source ultrarapide V8 de Google
Chrome qui analyse et exécute du code JavaScript très rapidement.
42 / 70
La programmation non bloquante du Node.js
La programmation bloquante Vs non bloquante du Node.JS

Dans la programmation bloquante, les actions sont effectuées dans
l’ordre :
1 Le programme commence par télécharger un fichier sur Internet
2 En deuxième étape, il affiche le fichier à l’utilisateur
3 Puis ensuite le programme peut exécuter d’autres instructions
(effectuer d’autres actions)
43 / 70
La programmation non bloquante du Node.js

La programmation bloquante Vs non bloquante du Node.JS
Dans la programmation non bloquante,
1 Le programme lance le téléchargement d’un fichier sur Internet
2 Le programme exécute d’autres instructions (le programme suit son
cours)
3 Dès que le téléchargement est terminé, le programme retourne vers
l’instruction en question pour effectuer les actions demandées ⇒ il
affiche le fichier
44 / 70

La programmation Asynchrone et non bloquante du Node.JS
Par définition,
La plupart des opérations I/O en JavaScript sont non bloquantes :
requêtes HTTP, requêtes AJAX, lecture-écriture sur le système de
fichier, etc.
⇒ Les opérations s’exécutent de manière linéaire sans attendre la fin
de l’opération précédente. Les fonction de callback permettent de
récupérer la réponse d’une opération.
45 / 70

D’une manière plus concrète, dans un environnement non bloquant,
. Node.js dispose en son sein d’une boucle d’évènements (event
loop) qui va continuellement traiter les évènements reçus.
. Dans le cas d’un serveur web avec Node.js, le serveur va
conserver une pile de fonctions à exécuter (callback) lors de
la réception d’évènements précis.
. L’unique thread de Node.js va traiter les évènements
apparaissant dans la queue d’évènements les uns après les
autres, au fil des requêtes et fin d’IO.
. Permettre de traiter des milliers de requêtes simultanées en
consommant très peu de mémoire.
46 / 70

Node.js Synthèse des particularités
Piloté par les évènements.
Modèle d’entrées / sorties (I/O) asynchrone non bloquant en passant
par l’utilisation de callbacks.
Tout à l’intérieur de Node.js est traité par un seul et unique thread.
Approche réactive implémentée par le boucle d’évènements
47 / 70
JavaScript côté serveur : Node.Js Node.js par la pratique
48 / 70
49 / 70

Installation de Node.js
1 Visitez le lien : https ://nodejs.org/en/
2 Télécharger la version stable
3 Exécuter la commande node -v dans votre terminal pour vérifier que
l’installation s’est bien déroulée..
50 / 70
Node.js un petit test
51 / 70

Les modules de Node.js
Node.js est organisé en plusieurs modules.
Chaque module gère une fonctionnalité du "core" : système de fichier,
réseau (DNS, HTTP, TCP, UDP et TLS), fonctions cryptographiques,
etc.
Les modules sont chargés dans le code avec l’instruction require().
52 / 70
Serveur Web Apache Vs Serveur Node.js
Figure – Nous pouvons toujours construire un serveur web avec Node.js
53 / 70
La fonction createServer prend en paramètre une fonction callback

avec 2 paramètres : req sauvegarde tout ce que le visiteur souhaite
savoir et res contient la réponse à afficher.
On envoie le code "200" dans l’en-tête de la réponse, qui signifie au
navigateur "OK" selon le protocole HTTP.
La méthode end() marque la fin de la réponse.
On lance un processus qui reste à l’écoute sur le port 8080 54 / 70

Si on veut afficher une image ou une page HTML ?
55 / 70

Si on veut afficher une image ou une page HTML ?
Il faut connaître que le protocole HTTP exige que :
le serveur doit indiquer le type de données, appelé MIME qu’il
s’apprête à envoyer au client soit :
. Du texte brut : text/plain
. Du HTML : text/html
. Du CSS : text/css
. Une image JPEG : image/jpeg
. Une vidéo MPEG4 : video/mp4
. Un fichier ZIP : application/zip
Ces informations sont envoyées dans l’en-tête de la réponse du serveur.
Exemple ?
56 / 70
Un premier exemple
57 / 70
Un deuxième exemple
res.write : permet d’écrire la réponse en plusieurs temps !

58 / 70
Questions
Comment peut-on récupérer la page demandée ? (exemple une page
sous le dossier/dossier/mapage, /page.html, etc)
Comment peut-on récupérer les paramètres qui circulent au niveau de
l’URL ? (exemple
http ://localhost :8080/test ?nom=Tounsi&prenom=Med)
59 / 70
La page demandée par l’usager
Recharger un nouveau module url : var url = require("url") ;

Parser la requête de l’utilisateur pathname :
url.parse(req.url).pathname ;
60 / 70
La page demandée par l’usager : le code source
61 / 70

La page demandée par l’usager : le code source et l’exécution
62 / 70

La page demandée par l’usager : le code source et l’exécution
63 / 70
Récupérer toute la chaine contenant les variables query :

url.parse(req.url).query
Recharger un module qui permet d’interroger la chaine récupérée
querystring : var querystring = require(’querystring’) ;
Récupérer les chaines dans un tableau : var params =
querystring.parse(url.parse(req.url).query) ;
Pour récupérer les éléments du tableau, il faut écrire par exemple
params[’prenom’]
64 / 70
Les paramètres envoyés : le code source
65 / 70

Les paramètres envoyés : le code source et l’exécution
66 / 70
Conclusion
Pour conclure, l’étape suivante ...
67 / 70
Conclusion
L’étape suivante ...
Maintenant, il est temps de découvrir les aspects les plus avancés

de Node.J
Le module NPM pour ajouter vos propres modules JavaScript
Le framework Express.js
Interaction de Node.js avec la base de données non Structurée NoSQL
et MongoDB
68 / 70
Bibliographie
69 / 70
Bibliographie
1 Bien développer pour le Web 2.0 : Bonnes pratiques Ajax, Christophe

Porteneuve, 2me Edition Eyrolles, 674 pages
2 JavaScript et Ajax pour les nuls, Andy Harris, Edition First, 420 pages
3 Sites web interactifs : JavaScript, Ajax, jQuery, Edition Micro
Application, 820 pages
4 Programmation avec Node.js, Express.js et MongoDB : JavaScript
côté serveur, Eric Sarrion , Edition Eyrolles, 586 pages, 2014
70 / 70
Développement Web: JavaScipt
Manel Ben Sassi

[email protected]
1 / 122
Sommaire
1 Introduction
2 Le noyau JavaScript
Les variables
Les opérations et les fonctions prédéfinies
L’orienté Objets
JSON
3 Le JavaScript côté client Web
DOM
Les évènements
Les cookies
4 Annexes
Annexe String
Annexe Date
Annexe Objet window
Annexe Evènement
5 Bibliographie
2 / 122
On entend parler du JavaScript ...
3 / 122
JavaScript... C’est quoi ?
JavaScript
un peu d’histoire ...
est un langage de script simplifié orienté objet dont la syntaxe est
basée sur celle du Java.
Javascript a été initialement élaboré par Netscape en association avec
Sun Microsystem.
Plus tard, Microsoft développera son propre langage Javascript
officiellement connu sous le nom de JScript.
C’est un langage script qui permet de :

I rendre dynamique un site internet développé en HTML.
I développer de véritables applications fonctionnant exclusivement dans
le cadre d’Internet.
4 / 122
JavaScript... Quelques généralités
Questions
1. Quelle est la différence entre JavaScript et l’applet ?
5 / 122
Questions
2. Maintenant, quelle est la différence entre Java et JavaScript ?
6 / 122
Questions
2. Maintenant, quelle est la différence entre Java et JavaScript ?
I Contrairement à un applet Java qui est un programme compilé, les

scripts écrits en Javascript sont interprétés
I Le Java, représenté par un ou plusieurs fichiers autonomes dont
l’extension sera *.class ou *.jar, est invoqué par une balise HTML
spécifique
I Le JavaScript est écrit directement au sein du document HTML
sous forme d’un script encadré par des balises HTML spéciales.
7 / 122
JavaScript... Intérêt ?
Quel intérêt pour JavaScript
8 / 122
JavaScript... Intérêt ?
Quel intérêt pour JavaScript
Supporté (par défaut) par les principaux navigateurs, ne nécessite pas
de plug-in particulier.
Accès aux objets contenus dans un document HTML ) + possibilité
de les manipuler relativement facilement)
Animation : Aficher/masquer du texte, défiler des images, créer des
info bulles
Possibilité de mettre en place des animations sans l’inconvénient des
longs temps de chargement nécessités par les données multimédia.
Langage relativement sécurisé : il est impossible de lire ou d’écrire sur
le disque client (impossibilité de récupérer un virus par ce biais).
9 / 122
JavaScript... Généralité
JS .. Une technologie cliente
10 / 122
Navigateur ... et JavaScript
JS .. Une technologie cliente

Chaque navigateur intègre un interpréteur de JS, plus ou moins
performant
SpiderMonkey (Firefox), V8 (Google Chrome), Chakra (Internet
Explorer), SquirrelFish (Safari)
Permet un niveau d’interactivité plus riche qu’avec de l’HTML simple
Certains traitements simples (ex : contrôle des saisies utilisateur)
peuvent être réalisés par le navigateur plutôt que par le serveur
Un document HTML/CSS chargé dans le navigateur peut être
"remanié" dynamiquement !
11 / 122
JavaScript... Difficultés ?
Difficultés d’utilisation de JavaScript ...
12 / 122
JavaScript... Difficultés ?
Difficultés d’utilisation de JavaScript ...

I Si le script ne fonctionne pas, la page est, le plus souvent, inutilisable.
Attention au menu non visible !
I Les utilisateurs peuvent empêcher l’exécution de code JavaScript,
souvent en raison des erreurs générées par les scripts, ou encore en
raison de la nature de l’interaction (apparition de nouvelles fenêtres,
. . . ).
I Lenteur d’exécution des scripts, ainsi que pour les scripts complexes,
un certain délai avant le démarrage
13 / 122
Frameworks JavaScript
Frameworks divers...
14 / 122
Les alternatives à JavaScript
Le concurrent déchu : VB Script (Microsoft)

Utilisé à l’époque de l’hégémonie d’Internet Explorer. N’est interprété
que par ce dernier.
Le prétendant sérieux : DART (Google)
Actuellement compilé en JavaScript mais vise à terme à supplanter
JavaScript
Chrome sera logiquement le 1er navigateur à supporter nativement des
scripts DART
15 / 122
Le noyau de JavaScript ...
16 / 122
HTML et JavaScript
La page HTML devra TOUJOURS contenir les deux balises

spécifiques et indispensables
Le code JavaScript s’intègre de deux manières 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 indirecte comme un module externe
17 / 122
HTML et JavaScript
1re méthode : Insertion 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 corps même de la page HTML,
entre les balises <body> .......... Et ......... </body>
18 / 122
HTML et JavaScript
2me méthode : Insertion par appel à un module exterme
On peut insérer du code JavaScript en faisant appel à un module
externe se trouvant à n’importe quelle adresse (URI).
Les 2 balises de Javascript doivent être placés entre <body> et

</body> dans le cas d’une exécution directe ou entre les Tags
<head> et </head> de la page HTML pour une exécution différée.
Stocké dans un fichier sur le serveur à son adresse d’appel sous forme
de TEXTE SIMPLE portant l’extension .txt ou .js
Simplifie la maintenance des sites faisant appel à des modules
JavaScript communs à plusieurs pages HTML.
Inconvénient : l’appel au code externe génère une requête
supplémentaire vers le serveur, et encombre le réseau
19 / 122
Entrée et sortie de données avec JavaScript
3 types de boites de messages
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
20 / 122
Entrée et sortie de données avec JavaScript
Méthode document.write() La méthode document.write permet d’écrire du

code HTML dans la page WEB
21 / 122
Exercice ...
Dessinez le rendu de ce code !
22 / 122
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
L’insertion des espaces peut s’effectuer n’importe où dans le script
Chaque commande doit être terminée par un point-virgule ( ;).
Un nombre à virgule est séparé par un point (.) et non par une virgule
Le langage Javascript y est sensible à la casse
Il existe deux méthodes permettant d’intégrer des commentaires à vos
scripts.
Placer un double slash (//) devant le texte
Encadrer le texte par un slash suivi d’une étoile (/*) et la même
séquence inversée (*/)
23 / 122
Les variables ...
24 / 122
Déclaration et typage en JavaScript
Déclaration et affectation
Le mot-clé var permet de déclarer une ou plusieurs variables.
Après la déclaration de la variable, il est possible de lui affecter une
valeur par l’intermédiaire du signe d’égalité (=).
Si une valeur est affectée à une variable sans que cette dernière ne soit
déclarée, alors Javascript la déclare automatiquement.
25 / 122
Déclaration et la portée des 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.
26 / 122
Contraintes concernant les noms de variables

Les noms de variables ne peuvent contenir que des lettres, chiffres, ou
le caractère "" (underscore)
MonPrenom est un nom valide
Les caractères spéciaux et accentués sont interdits
MonPr 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.
27 / 122
Les variables en JavaScript
Les types primitifs

Entier var annee = 2014 ;
Réel var prixttc =122.15 ;
Chaîne de caractère var message="Bonjour" ; var message=’IAG’ ;
Booléen var estSympa=true ;
28 / 122
Portée et vies des variables
La portée des variable

Variable locale Une variable déclarée à l’interieur d’une fonction est
seulement accessible dans cette fonction
Variable globale Une variable déclarée en dehors de toute fonction est
accessible en tout point du script et de la page
Cycle de vie d’une variable Une variable locale est supprimée
lorsque la fonction se termine
Une variable globale est supprimée à la fermeture de la
page
29 / 122
Portée et vies des variables
La portée des variable
30 / 122
Valeurs spéciales des variables
JavaScript inclut aussi deux types de données spéciaux

Null possède une seule valeur, null, qui signifie l’absence e données
dans une variable
Undefined possède une seule valeur, undifined. Une variable dont le
contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même
null est dite non définie (undifined).
31 / 122
Les opérations et les fonctions
prédéfinies ...
32 / 122
Les opérations sur les chaînes
Les opérations sur les chaînes de carcatères

Concaténation var chaine = "bonjour" + "FI3/FCD1" ;
Déterminer la longueur d’une chaine 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) ; Attention ! On compte de zéro
Extraction d’une partie de la chaîne var dateDuJour = "04/04/03" ;
var mois = dateDuJour.substring(3, 5) ;
3 : est l’indice du premier caractère de la sous-chaîne à
extraire
5 : indice du dernier caractère à prendre en considération ; ce
caractère ne fera pas partie de la sous-chaîne à extraire
33 / 122
Les structures de contrôle et d’itération
Structures de contrôles
Condition if (expr) {... } else {... }
34 / 122
Structures de contrôle
Sélection switch(expr){ case n : .. }
L’opérateur ternaire ? : permet de remplacer une instruction if . . . else

simple. Sa syntaxe utilisée pour donner une valeur à une
variable est
Question Réecrivez l’instruction switch avec l’opérateur ternaire
35 / 122
Boucle while (expr) {... }
do {... } while (expr) ;
Itération for (expr1 ;expr2 ;expr3) {... }

for(value in object) {... }
foreach (key in object) {... }
36 / 122
Certaines instructions permettent un contrôle supplémentaire sur les

boucles :
break permet de quitter la boucle courante
continue permet de terminer l’itération en cours de la boucle courante
37 / 122
Exercices
1 Utiliser les méthodes JavaScript prompt() et alert() pour demander à
l’utilisateur deux nombres puis afficher leur somme.
2 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).
3 Ecrire le code Javascript qui détermine si un nombre entier x est
parfait.
Définition
Un nombre est parfait ssi il est égal à la somme de ses diviseurs stricts.
6 est parfait car 6 = 1 + 2 + 3.
38 / 122
Les opérations
JavaScript permet d’assigner des (pointeurs sur) fonctions à des
variables
Fonctions anonymes dont l’appel se fait au travers des variables qui les
référencent
39 / 122
Les Fonctions par déclaration
La déclaration se fait à l’aide du mot clé function

function name(param1, param2) { ... ; return value ;}
Peut retourner une valeur (return) ou non
L’appel se fait de manière classique
Liaison des arguments avec les paramètres, s’il y en a.
Le noyau JavaScript possède déjà une bibliothèque de fonctions
prédéfinies
eval(), isNaN(), parseInt(), encodeURI(), ...
40 / 122
Les fonctions prédéfinies
eval Cette fonction exécute un code Javascript à partir d’une

chaîne de caractères.
41 / 122
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
isNaN détermine si le paramètre n’est pas un nombre (NaN : Not a

Number).
42 / 122
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).
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).
43 / 122
Number Convertit l’objet spécifié en valeur numérique
String Convertit l’objet spécifié en chaîne de caractères
44 / 122
L’orienté Objet ...
45 / 122
La programmation orientée Objet
Paradigme Objet Un objet est décrit par ses propriétés et ses méthodes
I Accès aux propriétés et méthodes par un point ’.’
I Auto-référence avec this
I Visibilité des propriétés et méthodes : public/privé
Absence du concept de classe On ne peut pas définir de classes d’objets
46 / 122
La programmation orientée Objet
Exemple
47 / 122
Objets primitifs
Boolean var estSympa = new Boolean(true) ;

Number (entiers et réels) var annee = new Number(2014) ;
Array I var saveursYop = new Array[2] ;
I saveursYop[0] ="banane" ;
I saveursYop[1] ="kiwi" ;
String var message = new String("2eme IAG") ;
48 / 122
Objets primitifs
Manipulation des tableaux ... ) Un exemple
La suite ..
49 / 122
Exemples 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
50 / 122
Les objets
Comment créer les Objets ?
51 / 122
Les objets
Comment créer les Objets ?
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.
52 / 122
2 façons de créer ses objets
Création directe d’objet
Utilisation d’un constructeur d’objet
53 / 122
Les objets ...
L’opérateur Typeof renvoie une chaîne de caractères indiquant quel est le

type de l’opérande.
54 / 122
Les objets ... String
Quelques méthodes String

anchor( ) : formate la chaîne avec la balise <A> nommée ;
b( ) : formate la chaîne avec la balise <B> ;
charAt( ) : renvoie le caractère se trouvant à une certaine position ;
concat( ) : permet de concaténer 2 chaînes de caractères ;
toLowerCase( ) : permet de passer toute la chaîne en minuscule ;
toUpperCase( ) : permet de passer toute la chaîne en majuscules ;
Voir annexe pour la suite
55 / 122
Les objets ... Array
Quelques méthodes Array

concat( ) : permet de concaténer 2 tableaux ;
join( ) : convertit un tableau en chaîne de caractères ;
reverse( ) : inverse le classement des éléménts du tableau ;
slice( ) : retourne une section du tableau ;
sort( ) : permet le classement des éléments du tableau ;
Propriété Array
I length : retourne le nombre d’éléments du tableau ;
56 / 122
Les objets ... Date
Quelques méthodes pour l’objet Date

I 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 ;
Voir annexe pour la suite
57 / 122
Les objets ... Math
Quelques méthodes Mathématiques

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.
58 / 122
Exercice
Exercices
Ecrire un script qui calcule la factorielle d’un nombre entier positif n

Ecrire une fonction Javascript qui affiche la table de multiplication
d’une valeur donnée en paramètre. Avant l’appel à la fonction la
valeur doit etre saisie par l’intermédiaire d’une fenetre de dialogue.
59 / 122
Exercice
Que fais ce programme ?
60 / 122
JSON ...
JavaScript Object Notation (JSON)

Définition Format léger et vraiment très simple
Il n’existe que 2 concepts : objets {} et tableaux[]
sont manipulables nativement par JavaScript
Usages I Sert à stocker des données (ex : fichier de configuration)
I Sert à échanger des données à travers le réseau, entre
clients et serveurs (ex : sérialisation / désérialisation)
I Sert à décrire un objet JS mais sous une forme textuelle
dans le code source
61 / 122
Exemple de définition JSON
62 / 122
Exemple d’utilisation JSON
63 / 122
Le JavaScript côté client Web ...
64 / 122
Sous-programmes JS ...
Le code des sous-programmes se situe au niveau de l’entête d’un
document HTML
Soit directement
Soit par inclusion d’un fichier externe
65 / 122
Sous-programmes JS ...
Le code du programme principal se situe dans le corps d’un document

Html ) les portions de code qui ont vocation à appeler les
sous-programmes
Soit dans une balise spéciale <script></script>
Soit via des évènements
66 / 122
Sous-programmes JS ...Exemple
67 / 122
Sous-programmes JS ...Exemple
68 / 122
Les objets du JS...
Objets de type BOMBrowser Object Model, permet la
manipulation du navigateur
Les navigateurs sont des logiciels qui offrent les mêmes fonctionnalités
de base : ouvrir / fermer des onglets, aller à un URL, mémoriser la liste
des url, etc
Objets de type DOM Document Object Model qui permet la
représentation d’un document sous la forme d’un objet
Les balises sont des noeuds et leurs imbrications forment une
arborescence
Cette structure d’arbre est ensuite facile à manipuler
Cet arbre est chargé dans le navigateur et est parcouru par le parseur
du navigateur afin de produire l’affichage graphique
Chaque modification ultérieure de cet arbre force le rafraîchissement de
l’affichage graphique.
Objets de type HTML Comme par exemple <a>, <area>,
<canvas>, <button>, <form>, <image>, <input>, <link>,
<table>, etc .
69 / 122
Les objets du navigateur ...
Pour comprendre les évènements ) Objet Window

Le plus haut dans la hiérarchie 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 :
1. 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) ;
2. Soit des collections d’objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.
70 / 122
Les objets du navigateur ... BOM
71 / 122
L’objet window ...
L’objet window représente la fenêtre du navigateur
72 / 122
L’objet window ...
Il est possible de programmer l’exécution d’une méthode à un instant
donné ou à des temes réguliers grâce à setTimeout etsetInterval
NB : Il est possible d’annuler avec clearnTimeout et clearInterval

Voir Annexe pour le reste des propriétés et des méthodes propres à l’objet window
73 / 122
L’objet BOM ... Browser Object Model
En plus de window, il est possible d’utiliser les objets location, navigator,

screen et history.
74 / 122
L’objet BOM ... Exemple
D’autres exemples ...
75 / 122
Du l’objet BOM ... DOM
Figure – BOM et DOM
76 / 122
DOM par un exemple HTML
Figure – Exemple HTML comme un objet
77 / 122
DOM par un exemple HTML
La navigation arborescente dans un document HTML
78 / 122
DOM... Document Objet Model
Méthode getElementById : Cette méthode prend comme argument l’id

d’un élement.
79 / 122
Méthode getElementsByTagName : Cette méthode prend comme
argument le nom de balise des éléments à récupérer.
80 / 122
Propriété innerHTML : En utilisant cette propriété, il est possible de
modifier le contenu d’un élément.
Remarque
La propriété innerText (textContent pour Firefox) est similaire à
innerHTML, mais ne traite que du texte simple.
81 / 122
Création dynamiquement des éléments HTML : Ceci peut se faire
suivant ces étapes :
1 createElement : création de l’élément (noeud)
2 createTextNode : attribuer un élément textuel au noeud créé.
3 appendChild : fixer le noeud à sa bonne position dans l’arbre du
document
82 / 122
Modifier le style d’une manière dynamique :Tout élément HTML
dispose d’un attribut style en JS. Les noms des propriétés CSS doivent être
convertis en camel case. Par exemple :
Propriété CSS Propriété JS
background-image style.backgroundImage
color style.color
Font-family style.fontFamily
83 / 122
Accès direct aux noeuds

Par la valeur de l’attribut name (s’il existe) var result =
document.getElementsByName ("newEmails") ;
Renverra 0 ou n résultats.
84 / 122
Evènement
Evènement
Un évènement est provoqué par une action de l’utilisateur ou du navigateur
lui-même. Les évènements ont des noms tels que click, load et mouseover.
Une fonction appelée en réponse à un évènement se nomme un écouteur
(event handler ou event listener). Souvent, leur nom commence par on
comme par exemple onclik ou onload.
85 / 122
Evènement
Les évènements les plus importants

Evènement Elément(s) HTML concerné(s)
onLoad Body, frameset, Object
onUnload Body, frameset,
OnError Img, Objetc, body, et frameset
onAbort Body et frameset
onSelect Input et textarea
onChange Input, select, textarea
onSubmit, onReset Form
onFocus, onBlur Label, input, select, textarea et button
onResize, onScroll Body
onClick, onMouseOver, onContextMenu Quasiment tout
86 / 122
Evènement
Nommage des objets-élémments

I Pour pouvoir manipuler un objet en javaScript, il doit posséder un
nom
I 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">. . .
I Dans le cas où l’objet serait unique alors pas besoin de nom pour
désigner cet objet
87 / 122
HTML Event Handlers
On utilise des attributs HTML pour déclarer les écouteurs. La valeur de ces
attributs est le code JavaScript à exécuter lorsque l’évènement est produit.
88 / 122
HTML Event Handlers
onClick
Se produit lorsque l’utilisateur clique sur un élément spécifique dans
une page, comme un lien hypertexte, une image, un bouton, du texte,
etc.
Ces éléments sont capables de répondre séparément à cet événement
Il peut également être déclenché lorsque l’utilisateur clique n’importe
où sur la page s’il a été associé non pas à un élément spécifique, mais
à l’élément body tout entier
89 / 122
HTML Event Handlers
onLoad
Se produit lorsque une page web est chargée dans la fenêtre du
navigateur
Toute la page (y compris les images qu’elle contient si leur
chargement est prévu) doit avoir été chargée pour qu’il ait lieu
Cet événement peut être associé à une image seulement ; auquel cas, il
se produit une fois son chargement terminé
90 / 122
HTML Event Handlers
onMouseover
Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur
de sa souris sur l’un des éléments précités (lien hypertexte, image,
bouton, texte, etc.) pour qu’il ait lieu
onMouseout
A l’inverse de onMouseover, cet événement se produit lorsque le
pointeur de la souris quitte la zone de sélection d’un élément.
91 / 122
HTML Event Handlers
onMouseover
Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur
de sa souris sur l’un des éléments précités (lien hypertexte, image,
bouton, texte, etc.) pour qu’il ait lieu
onMouseout
A l’inverse de onMouseover, cet événement se produit lorsque le
pointeur de la souris quitte la zone de sélection d’un élément.
92 / 122
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
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.
93 / 122
Les évènements... Retenez
Ainsi ... Deux stratégies possibles ... Pour la gestion des évènements
La première Directement à l’aide d’attributs dédiés (inline)
94 / 122
Ainsi ... Deux stratégies possibles ... Pour la gestion des évènements
La deuxième Mise en place d’écouteurs d’évènement
95 / 122
Question : Ré-écrivez le code précédemment proposé avec les événements.
96 / 122
Question : Ré-écrivez le code précédemment proposé avec les événements.
Figure – Solution
97 / 122
Les évènements... Exercice
Exercice : Ecrivez le script permettant de changer (en + ou -) la valeur de

la progression.
Figure – Solution
98 / 122
Les évènements... Objet event
Quand un événement se produit, toutes les informations le concernant sont

enregistrées dans un objet appelé event. Il est possible de récupérer cet
objet sous forme de paramètre d’une fonction écouteur.
Figure – Solution
99 / 122
Les évènements... souris
Ce sont :
Click double click
mousedown mouseup
mouseover mouseout
mousemove •
Les propriétés utiles et accessibles à partir de l’objet event sont :
clientX clientY
screenX screenY
shiftkey ctrlKey
altKey metaKey
100 / 122
Les évènements... clavier
Ce sont :
keydown keyup
keypress
Les propriétés utiles et accessibles à partir de l’objet event sont :
shiftkey ctrlKey
altKey metaKey
keyCode
101 / 122
Les évènements... HTML
Ce sont :
load unload
abort error
select change
submit reset
reseize scroll
focus blur
Remarque La plupart de ces évènements sont liés aux formulaires ou l’objet

window.
102 / 122
Les cookies ...
Un "Cookie" ...
l’a générée.
103 / 122
Les cookies ...
Un "Cookie" ...
l’a générée.

I 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.
I Personnaliser les pages présentées à l’utilisateur en reprenant par
exemple son nom en haut de chaque page.
104 / 122
Les cookies ...
105 / 122
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\TEM\Cookies".
106 / 122
Les cookies ...

La variable Nom contient le nom à donner au cookie.

La variable Contenu contient le contenu du cookie
Exemple macookie="oui :visite"
Le mot réservé expires suivi du signe "=". Derrière ce signe, une date
d’expiration représentant la date sous la forme (Wdy, DD-Mon-YYYY
HH :MM :SS GMT) à laquelle le cookie sera supprimé du disque dur
du client. Utiliser les fonctions de l’objet Date
path représente le chemin de la page qui a créé le cookie.
107 / 122
Les cookies ...

domain représente le nom du domaine de cette même page

secure prend les valeurs "true" ou "false" 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 ou HTTPS.
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.
108 / 122
Ecrire un 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() ;
109 / 122
Lecture d’un cookie Accéder à la propriété cookie de l’objet document.
Modification d’un cookie Modifier le contenu de la variable Contenu puis

réécrire le cookie sur le disque dur du client
110 / 122
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.
111 / 122
Annexe
112 / 122
Les objets ... String ... Annexe
Quelques méthodes
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 ;
indexOf( ) : permet de trouver l’indice d’occurrence d’un caractère
dans une chaîne ;
charCodeAt( ) : renvoie le code du caractère se trouvant à une
certaine position ;
113 / 122
Les objets ...date ... Annexe
Quelques méthodes 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 ;
114 / 122
Les objets ...Window ... Annexe
Quelques propriétés (1)

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 ;
115 / 122
Quelques propriétés (2)

navigator : retourne le navigateur utilisé ;
opener : retourne l’objet window qui a créé la fenêtre en cours ;
parent : retourne l’objet window immédiatemment supérieur dans la
hiérarchie ;
self : retourne l’objet window correspondant à la fenêtre en cours ;
status : indique le message affiché dans la barre de status ;
top : retourne l’objet window le plus haut dans la hiérarchie.
116 / 122
Quelques 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.
117 / 122
Annexe Evènement
Evènement load et unload

Pour l’objet window, l’évènement load se produit lorsque la page
complète est chargée, incluant les ressources externes telles que les
images, les fichiers JavaScript et CSS.
Il est possible d’associer cet évènement à des éléments img.
L’évènement unload se produit typiquement lorsqu’on change de page.
Cela permet par exemple de libérer proprement certaines ressources.
118 / 122
Annexe Evènement
Evènement submit et reset

Ils sont associés à un formulaire. Pour valider la soumission ou la
ré-initialisation, la fonction écouteur doit retourner true.
this.name1.value représente la valeur du champ name1 de l’objet this
qui est le formulaire auquel est associé l’écouteur.
119 / 122
Annexe Evènement
Utiles par exemple pour contrôler les champs de saisie.
120 / 122
121 / 122
1 Javascript : The Good Parts, Crockford Douglas, Edition O’Reilly,

16 Mai 2008, 170 pages
2 JavaScript : The Definitive Guide, David Flanagan, Edition
O’Reilly, Mai 2011, 1096 Pages
3 High Performance JavaScript, Nicholas C. Zakas, Edition O’Reilly,
Mars 2010, Pages 231
122 / 122

Cours Developpement Web Avancé

Transféré par

Droits d'auteur :

Formats disponibles

Cours Developpement Web Avancé

Transféré par

Informations du document

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

Cours Developpement Web Avancé

Transféré par

Droits d'auteur :

Formats disponibles

Faculté des Sciences Juridiques

Développement Web: Introduction

Manel Ben Sassi

Université de Jendouba, FJSEG

Plan de cette matière

Chapitre Introduction Développement web

Deux séances de cours hebdomadaire

Acquérir la "culture" du développement web et des nouvelles

Culture générale : internet

I C’est quoi ? : inter-netting ou "interconnecter des réseaux"

Services : définitions et exemples

I E-mail Un service formel couramment utilisé pour envoyer des fichiers

Le web : Evolution et développement

Evolution d’Internet : point de vue des usagers

Web 2.0 : évolution et Révolution

I Met l’accent sur l’agilité et la ré-utilisabilité des applications :

Web 2.0 : évolution et Révolution

Enrichissement des interfaces

Évolution de la technologie connectée au web

I Plusieurs types d’ordinateurs principalement :ordinateur de bureau

On parle du Web sémantique

I Les informations ne seraient plus stockées mais "comprises" par les

On parle du Web 3.0

Deep Web ou le web profond

Le besoin avec cette révolution

Les besoins des usagers ! !

Friendly user interface : interface conviviale

Services de stockage sur le cloud

Évolution des services

I Compression de données : Winzip, Winrar et 7-Zip.

Le développement pour le web : est ce

Le développement pour le web : est ce difficile ?

Une question importante avec l’émergence des nos nouveaux besoins

Le développement pour le web : est ce difficile ?

Étapes de développement du site Web

Le développement pour le web : est ce difficile ?

Une question importante avec l’émergence des nos nouveau besoins

I Ces technologies sont en constante évolution

Que sera le futur du développement web ?

La tendance de développement web

La tendance générale consiste à utiliser des frameworks (Ensemble

Les concepteurs de logiciels se livrent une guerre commerciale afin de

Windows avec Internet Explorer, Microsoft Server, ActiveX, .NET, ASP,

Quelles sont les étapes pour créer une

Comment créer une application Web ?

Posez vous tout d’abord les bonnes questions

I Quels sont vos besoins ?

Quelles sont les étapes pour créer une application ?

1 ère étape ...

1ère étape ... Benchmark

1ère étape ... Benchmark

2 ème étape ... Arborescence

3 ème étape ... Zoning

Le Zoning par définition

Zoning ... ou Wireframe

3 ème étape ... Zoning

3 ème étape ... Zoning

Faites attention, nous faisons parfois la différence entre ...

3 ème étape ... Zoning

Zoning est une technique consistant à schématiser une page Web à