D veloppement Web
Pr par par : Tarek BEN MENA
3 me ann e Science de lInformatique
TBM 2014-15
page 1
Plan
l/ 1- Introduction G n rale
l/ 2- Web Statique
/HTML, XHTML, DOM
/CSS
/Javascript et Ajax
l/ 3- Web Dynamique
/PHP
/PHP orient -objet
l/ 4- Le mod le MVC
TBM 2014-15
page 2
Java Script et ajax
TBM 2014-15
page 3
Objectifs du Cours
l/ revisiter Javascript et les fonctionnalit s associe s au
langage dans le cadre du d veloppement Web
l/ une br ve introduction au langage en guise de rappel est
suivie par l tude de la couche objet
l/ On termine par une introduction AJAX
TBM 2014-15
page 4
Introduction JavaScript
TBM 2014-15
page 5
Caract ristiques du langage
l/ Cr par Netscape en 1995 (LiveScript)
/Utilis c t client pour dynamiser les pages web
/contient des gestionnaires d' v nement : il reconna t et r agit aux
demandes de l'utilisateur
/langage tr s particulier (fonctionnel)
/int gration dune couche objet
/Utilis aujourdhui pour cr er des interfaces riches
l/ Standardis par ECMA en 1996 , plusieurs implantations :
/JavaScript (Firefox)
/JScript version Microsoft (IE)
/ActionScript version Adobe
TBM 2014-15
page 6
Java vs. Java Script
l/ Langage de programmation
l/ Langage de Script POO
POO
l/ Pseudo-compil
l
Interpr t
l/ cr er des applications qui sont
ex cut es sur une machine ou
un navigateur virtuel
l/ est ex cut uniquement sur un
navigateur
l/ Fortement typ
l/ L g rement typ
l/ Liaisons statiques: les objets
doivent exister au chargement
(compilation)
l/ Liaisons dynamiques: les
r f rences des objets sont
v rifi es au chargement
l/ Confidentialit du code
l/ Accessibilit du code
TBM 2014-15
page 7
Utilisation de Javascript pour le navigateur
l/ Introduction de la balise <script> utilis dans <head> ou
<body>
TBM 2014-15
page 8
Document Object Model (DOM)
TBM 2014-15
page 9
Description Rapide
TBM 2014-15
page 10
Sp cificit s
l/ Li es la s curit
/ne peut pas lire ou crire dans le syst me de fichier de la machine
/ne peut ex cuter de programme externe
/pas de connexion autre que serveur web
l/ Identificateurs pour nommer les fonctions ou variable
/D finition classique : caract re suivi de caract res ou chiffres.
/on peut galement utiliser $ ou _
l/ Structure de contr le
/posse de les structures de contr le du langage C :
F/if then else !
F/for, while, do while !
F/break, continue !
F/switch!
F/foreach pour les tableaux
F/et les exceptions throw, try, catch!
TBM 2014-15
page 11
Variables & Fonctions
l/ Les variables sont caract ris es par :
F/ce sont des objets
F/labsence de typage statique (typage dynamique)
F/elles peuvent tre d clar es tout moment
F/on peut utiliser le mot-cl var pour les d clarer
l/ Les fonctions sont caract ris es par :
F/Ce sont des objets
F/elles peuvent tre d clar es tout moment
F/On les d clare gr ce au mot cl function
TBM 2014-15
Advertisement
page 12
Exemple avec des fonctions principales
TBM 2014-15
page 13
Objets de base
l/ Chacun des objets poss de
des m thodes propres :
/String
/Boolean
/Date
/Number
/Function
/Array
/RegExp (expression r guli re)
l/ On d termine le type dun
objet avec typeOf!
TBM 2014-15
page 14
Lobjet Boolean
l/ permet de repr senter des valeurs Bool ennes
/attributs :
F/TRUE!
F/FALSE!
/M thodes:
F/toSource() repr sente le code source dun objet
F/toString()!
TBM 2014-15
page 15
Lobjet Number
l/ permet de repr senter les nombres entiers et les r els
/attributs :
F/MAXVALUE!
F/MINVALUE!
/M thodes:
F/toSource()!
F/toString(radix)!
F/toFixed(precision) notation avec chiffres apr s la virgule
TBM 2014-15
page 16
Lobjet String
l/ permet de repr senter les cha nes de caract res
/attributs :
F/length longueur de la cha ne
/M thodes:
F/integer charAt(index) //acc der un caract re isol d'une cha ne!
F/String concat(s1,s2,...)!
F/integer indexOf(search[,fromIndex]) // renvoie la position d'une
cha ne partielle partir d'une position d termin e (en commen ant au d but de
la cha ne principale soit en position 0).!
F/integer lastIndexOf(search[,fromIndex]) //renvoie la position
d'une cha ne partielle partir d'une position d termin e (en commen ant la fin
soit en position length moins 1). !
F/Array split(separator[,limit]) !
F/String substr(start,length) !
F/String substring(x,y) //renvoie un string partiel situ entre l position x et
la position y-1.
F/String toLowerCase()!
F/String toUpperCase()!
TBM 2014-15
page 17
Exemple avec String
TBM 2014-15
page 18
Lobjet Date
l/ permet de repr senter les dates
/Date()
/Date(milliseconds)
/Date(y,m,d)
/getDay(), getMonth(), getYear(), getFullYear()
/getHours(), getMinutes(), getSeconds()
/toGMTString
/toLocaleString
/toUTCString
TBM 2014-15
page 19
Objet Array
l/ permet de repr senter et traiter les tableaux
/attributs :
F/length
/M thodes:
F/Array concat(array1,array2)
F/push : ajoute un nouvel l ment la fin
F/unshift : ajoute un nouvel l ment au d but
F/pop : supprime et retourne le dernier l ment
F/shift : supprime et retourne le premier l ment
F/reverse : inverse lordre des l ments
F/Array(n) : construit un tableau de longueur n
F/Array(n1,...,nk) : construit un tableau dont les l ments sont n1,...,nk
F/slice(begin, end) : extrait une partie du tableau
F/splice(index,howMany,e1, ..., en) : ajoute et supprime de nouveaux l ments
F/sort() : tri des l ments
F/sort(compare function) : tri suivant la fonction
TBM 2014-15
page 20
Exemple avec Array
TBM 2014-15
page 21
G rer la structure
du document
TBM 2014-15
page 22
Un exemple pour commencer
TBM 2014-15
page 23
S lectionner un Element du DOM
l/ getElementById() // permet d'acc der un l ment en
connaissant son ID qui est simplement l'attribut id
l/ getElementsByTagName() // Cette m thode permet de
r cup rer, sous la forme d'un tableau, tous les l ments de la
famille
Advertisement
l/ getElementsByName() // permet de ne r cup rer que les
l ments qui poss dent un attribut name que vous sp cifiez
l/ querySelector() et querySelectorAll() // simplifient
la s lection d' l ments dans l'arbre DOM prennent pour
param tre une cha ne de caract res qui doit tre un s lecteur
CSS comme ceux que vous utilisez dans vos feuilles de style
TBM 2014-15
page 24
Notion dh ritage
l/ un l ment <div> est un objet
HTMLDivElement, mais un objet, en
Javascript, peut appartenir diff rents
groupes.
l/ Ainsi, <div> est un HTMLDivElement,
qui est un sous-objet d'HTMLElement
qui est lui-m me un sous-objet
d'Element.
l/ Element est enfin un sous-objet de
Node.
l/ Node poss de des propri t s et des
m thodes qui pourront tre utilis es
depuis un de ses sous-objets. Les sous-
objets h ritent des propri t s et
m thodes de leurs objets parents.
TBM 2014-15
page 25
Editer les l ments HTML
l/ Changer les attributs dun l ment
/getAttribute() et setAttribute() permettant respectivement
de r cup rer et d' diter un attribut
l/ Modifier lattribut class
/Modifier alors le param tre className
TBM 2014-15
page 26
Modifier le contenu HTML dun l ment
l/ innerHTML permet de r cup rer le code HTML enfant d'un
l ment sous forme de texte
/R cup ration
/Modification
InnerText (IE) et innerContent : Texte sans balise
TBM 2014-15
page 27
Naviguer entre les nSuds (1/2)
l/ La propri t parentNode permet d'acc der l' l ment
parent d'un l ment
l/ nodeType et nodeName servent respectivement v rifier le
type d'un nSud et le nom d'un nSud.
/nodeType retourne un entier (1 = NSud l ment, 2 = NSud attribut, 3
= NSud texte ,etc.)
/nodeName, retourne simplement le nom de l' l ment en majuscule
l/ firstChild et lastChild servent respectivement
acc der au premier et au dernier enfant d'un nSud ( l ment
html et #text).
l/ firstElementChild et lastElementChild servent
respectivement acc der au premier et au dernier enfant qui
sont des l ments html.
l/ nodeValue retourne le contenu dun nSud sil sagit de texte
sinon on acc de au donn es du nSud avec la propri t data!
TBM 2014-15
page 28
Naviguer entre les nSuds (2/2)
l/ La propri t childNodes retourne un tableau contenant la
liste des enfants d'un l ment.
l/ nextSibling et previousSibling sont deux propri t s
qui permettent d'acc der respectivement au nSud suivant et
au nSud pr c dent.
TBM 2014-15
page 29
Cr er et ins rer des l ments
l/ Avec le DOM, l'ajout d'un l ment HTML se fait en 3 temps :
/On cr e l' l ment ;
/On lui affecte des attributs ;
/On l'ins re dans le document,
TBM 2014-15
page 30
Cloner, remplacer, supprimer &
l/ cloneNode() : permet de cloner un nSud avec (true) ou
sans (false) ses enfants et ses diff rents attributs.
/Il faut penser lajouter apr s son clonage
l/ replaceChild()
l/ removeChild()
TBM 2014-15
page 31
Autres actions
l/ hasChildNodes() : v rifie la pr sence d' l ments enfants
l/ insertBefore() : permet d'ins rer un l ment avant un
autre.
/Elle re oit deux param tres : le premier est l' l ment ins rer, tandis
que le deuxi me est l' l ment avant lequel l' l ment va tre ins r .
TBM 2014-15
page 32
Les v nements
TBM 2014-15
page 33
D finitions
l/ Les v nements sont des actions de l'utilisateur, qui vont
pouvoir donner lieu une interactivit .
l/ L' v nement par excellence est le clic de souris, car c'est
le seul que le HTML g re.
l/ Gr ce au Javascript il est possible d'associer des
fonctions, des m thodes des v nements tels que le
passage de la souris au-dessus d'une zone, le
changement d'une valeur, &
l/ Exemple : onClick="window.alert(bonjour)"!
TBM 2014-15
page 34
Liste des v nements
v nement
Quand lutilisateur
onBlur
Advertisement
enl ve le focus du composant
onChange
change la valeur d'un texte ou d'un composant
options
onClick
clique sur un composant ou un hyperlien
onFocus
donne le focus au composant
Balise
text, textarea, select
text, textarea, select
button, checkbox, radio,
reset, submit
text, textarea, select
onLoad
charge la page dans le navigateur
body, frameset
onMouseOut
la souris quitte un lien ou une ancre
<a href..>, <area href..>
onMouseOver bouge la souris sur un lien ou une ancre
<a href..>, <area href..>
onReset
efface les saisies d'un formulaire
<input type= Reset >
onSelect
s lectionne une zone d' dition d'un formulaire
text, textarea
onSubmit
soumet un formulaire
onUnload
quitte la page
TBM 2014-15
<input type= Submit >
body, frameset
page 35
Rappel - La balise <area>
TBM 2014-15
page 36
Lobjet Window Boite de dialogue
TBM 2014-15
page 37
Cr er un objet window
option
description
directories = yes/no Affiche ou non les boutons de navigation
location = yes/no
Affiche ou non la barre d'adresse
menubar = yes/no
Affiche ou non la barre de menu
resizable = yes/no D finit si la taille de la fen tre est modifiable ou
non
scrollbars = yes/no Affiche ou non les ascenceurs
status = yes/no
Affiche ou non la barre d' tat
toolbar = yes/no
Affiche ou non la barre d'outils
width=largeur px
D finit la largeur
Height = hauteur px D finit lhauteur
TBM 2014-15
page 38
Formulaire
l/ Acc s un formulaire:
/window.document.nom_du_formulaire !
/window.document.forms // i me + 1 formulaire !
l/ Acc s un objet du formulaire :
/window.document.nom_du_formulaire.nom_du_champ !
/window.document.forms .elements // le j me + 1
lement du i me+1 formulaire !
TBM 2014-15
page 39
Exemple 1
TBM 2014-15
page 40
Exemple 2
TBM 2014-15
page 41
Exemple : radiobutton
TBM 2014-15
page 42
Exemple : CheckBox
TBM 2014-15
page 43
Exemple : Select
TBM 2014-15
page 44
Ajax
TBM 2014-15
page 45
Ajax
l/ Asynchronous JAvascript and XML
l/ introduit par Jesse James Garrett en 2005, r union de
trois technologies
l/ afin de cr er des interfaces utilisateur riches (RUI)
/Javascript pour linteraction c t client
/XMLHttpRequest pour les requ tes asynchrones
/XML pour l change de donn es client-serveur
l/ Mais repose galement sur
/DOM
CSS
TBM 2014-15
page 46
Pourquoi Ajax ?
l/ Ajax permet de modifier partiellement la page affich e par le
navigateur sans avoir recharger la page enti re.
/Par exemple le contenu d'un champ de formulaire peut tre chang , sans
avoir recharger la page avec le titre, les images, le menu, etc.
l/ Ajax est une technique qui fait usage des l ments suivants:
/HTML pour l'interface.
Advertisement
/CSS (Cascading Style-Sheet) pour la pr sentation de la page.
/JavaScript (EcmaScript) pour les traitements locaux, et DOM (Document
Object Model) qui acc de aux l ments de la page ou du formulaire ou aux
l ments d'un fichier XML charg sur le serveur.
/L'objet XMLHttpRequest lit des donn es ou fichiers sur le serveur de fa on
asynchrone.
/PHP ou un autre langage de scripts peut tre utilis cot serveur.
TBM 2014-15
page 47
Exemple
TBM 2014-15
page 48
Asynchronous
l/ Asynchrone en fran ais, signifie que l'ex cution de
JavaScript continue sans attendre la r ponse du serveur
qui sera trait e quand elle arrivera.
l/ Tandis qu'en mode synchrone, le navigateur serait gel
en attendant la r ponse du serveur.
l/ Dynamic HTML est aussi un ensemble de techniques, qui
comprend: HTML, CSS, JavaScript.
/Cela permet de modifier le contenu d'une page selon les commandes
de l'utilisateur, partir de donn es pr alablement fournies ou avec un
texte tap par l'utilisateur.
l/ Ajax est DHTML plus l'objet XHR pour communiquer avec
le serveur.
TBM 2014-15
page 49
XMLHttpRequest - XHR
l/ D velopp par Microsoft en 1998 en tant quobjet ActiveX
l/ repris par Mozilla en 2002, puis autres navigateurs
l/ devenu une recommandation du W3C en 2006
l/ permet denvoyer une requ te asynchrone au serveur
l/ une fois les donn es re ues on met jour le DOM
TBM 2014-15
page 50
Comment a fonctionne ?
l/ Pour recueillir des informations sur le serveur l'objet XHR
dispose de deux m thodes:
/open: tablit une connexion.
/send: envoie une requ te au serveur.
l/ Les donn es fournies par le serveur seront r cup r es
dans les champs de l'objet XMLHttpRequest
/responseXml pour un fichier XML ou
/responseText pour un fichier de texte brute.
l/ Il faut attendre la disponibilit des donn es, et l' tat est
donn par l'attribut readyState (seul le dernier est utile):
/0: non initialis .
/1: connexion tablie.
/2: requ te re ue.
/3: r ponse en cours.
/4: termin .
TBM 2014-15
page 51
XMLHttpRequest
l/ attributs de XMLHttpRequest
/Status : statut sous forme num rique (ex 200 OK, 404 Not Found)
/statusText : statut sous format texte
/readyState : tat de lobjet
F/0=uninitialized,
F/1=open,
F/2=sent,
F/3=receiving,
F/4=loaded
/Onreadystatechange : permet dattacher un gestionnaire d v nement
/responseText : r ponse du serveur sous forme texte (HTML ou JSON)
/responseXML : r ponse du serveur sous forme XML
l/ Attention
/lorsque lon a re u les donn es du serveur et quelles sont pr tes ^te
tretrait es:
TBM 2014-15
F/readyState = 4
F/Status = 200
page 52
XMLHttpRequest
l/ M thodes
/ouverture dune connexion pour envoi ou r ception de donn es (GET,
POST) : open(method, url, async)
/envoi dune requ te : send(content)
/mettre fin la requ te : abort()
TBM 2014-15
page 53
Etape 1 : Cr er un objet XHR
l/ OU
TBM 2014-15
page 54
Etape 2 : attendre et traiter la r ponse
/Le traitement de la r ponse et les traitements qui suivent sont inclus
dans une fonction, et la valeur de retour de cette fonction sera
assign e l'attribut onreadystatechange de l'objet pr c demment
cr .
TBM 2014-15
page 55
Etape 3 : ex cuter la requ te
l/ Deux m thodes de XMLHttpRequest sont utilis es:
/open: commande GET ou POST, URL du document, true pour
asynchrone.
/send: avec POST seulement, donn es envoyer au serveur.
TBM 2014-15
page 56
Exemple 2 avec PHP
TBM 2014-15
page 57
Exemple 2 avec PHP
TBM 2014-15
page 58
Exemple 2 avec PHP
TBM 2014-15
page 59