Programmation Web

(HTML, CSS, JavaScript)

E. RAMAT

Université du Littoral - Côte d'Opale

20 avril 2015

E. Ramat (ULCO-LISIC) Web 20 avril 2015 1 / 209

Sommaire

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 3 / 209

Plan

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 4 / 209

Introduction

Objectifs

comprendre le modèle du Web : client / serveur et le protocole HTTP

aborder les langages de présentation (côté client) : HTML et CSS
ajouter les aspects dynamiques côté client avec JavaScript
introduire aux technologies serveur via PHP

Compléments abordés

Comment intégrer/utiliser un framework (côté client) ?

Bootstrap : un framework responsive
JQuery : un framework javascript
canvas en HTML5 via un framework graphique 2D (d3.js)

E. Ramat (ULCO-LISIC) Web 20 avril 2015 5 / 209

Introduction

Mise en oeuvre

développement d'une petite application d'e-commerce

I première partie : la che produit (html + css)
I deuxième partie : le panier (html + css + js)
I troisième partie : les produits et la commande sur le serveur avec une base de
données

certains éléments seront donnés (le système d'identication, la base de

données, ...)
les outils :
I l'environnement de développement : phpstorm de jetbrains
I un navigateur et son debugger : chrome
I un système de gestion de bases de données : sqlite

E. Ramat (ULCO-LISIC) Web 20 avril 2015 6 / 209

Introduction
WWW/HTTP

Dénition : WWW

WWW = World Wide Web = Web

système d'information distribué à l'aide d'Internet (interconnexion de réseaux)
un service (comme E-mail, DNS, . . . )
un ensemble de documents (et d'autres ressources : son, vidéo, . . . ) localisés
sur diérents serveurs
accessible via divers protocoles standards : HTTP, HTTPS et FTP
identiés par une URL unique (Unified Resource Location)
les serveurs Web fournissent du contenu Web
les navigateurs Web achent ce contenu

E. Ramat (ULCO-LISIC) Web 20 avril 2015 7 / 209

Introduction
WWW/HTTP

Structure

Internet : fournisseur des canaux de communication à l'aide des protocoles

TCP/IP, DNS et HTTP
les clients (navigateurs Web)
les serveurs Web : IIS de Microsoft, Apache, Tomcat, nodejs, . . .

Composants

un portocole : Hyper Text Transfer Protocol (HTTP)

un langage : Hyper Text Markup Language (HTML)
une localisation : Uniform Resource Locator (URL)
des identiants Uniform Resource Identiers (URIs)

E. Ramat (ULCO-LISIC) Web 20 avril 2015 8 / 209

Introduction
URL

Dénition

Une chaîne de caractères compose de :

un protocole (HTTP, HTTPS, FTP, . . . )
un nom de serveur (ou d'une IP) + un port (optionnel) - par défaut, le port
est 80 (ou 8080)
un chemin accompagné d'un nom (shop/index.html, par exemple)

RFC

La syntaxe des URL sst dénie par la RFC 1738.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 9 / 209

Introduction
HTTP

Dénition

HTTP est un protocole client-serveur

objectif : gérer le transfert de ressources (chiers HTML, CSS, images, . . . )
prototype basé sur la notion de requête - réponse
format basé texte
fournit des métadonnées (encodage, par exemple)

Exemple

Réponse
HTTP /1.1 200 OK
Requête Content - Encoding : gzip
Content - Type : text / html ; charset = UTF -8
GET / HTTP /1.1
Date : Wed , 21 Jan 2015 17:52:55 GMT
Host : www . google . fr
Expires : -1
User - Agent : Mozilla /5.0 ( Linux x86_64 )
< CRLF >
< CRLF >
< HTML >
...
</ HTML >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 10 / 209

Introduction
HTTP

client/serveur

le programme client (le navigateur) envoie une requête au serveur ( le serveur

Web)
le serveur répond en fournissant une ressource
les requêtes sont typées par leur méthode : GET, POST, DELETE ou HEAD

Echange

E. Ramat (ULCO-LISIC) Web 20 avril 2015 11 / 209

Introduction
HTTP

Entête HTTP

L'entête d'une requête HTTP se compose :

d'une ligne de requête avec le type de la méthode, l'URI et la version du
protocole
d'un ensemble de paramètres supplémentaires
d'un corps (body ) contenant les données (la valeur des champs d'un
formulaire en mode POST, par exemple)

Format

< request method > < resource > HTTP / < version >
< headers >
< empty line >
< body >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 12 / 209

Introduction
HTTP

Format

GET / HTTP /1.1

Host : www . google . fr
User - Agent : Mozilla /5.0 ( X11 ; Linux x86_64 ; rv :31.0) Gecko /20100101 Firefox /31.0
Accept : text / html , application / xhtml + xml , application / xml ;q =0.9 ,*/*; q =0.8
Accept - Language : fr - fr
Accept - Encoding : gzip , deflate
Connection : keep - alive
< CRLF >

Explications

la méthode d'accès est GET

on tente d'accèder à la racine
avec la version 1.1 du protocole HTTP
le serveur est www.google.fr
le navigateur est Iceweasel version 31.3.0 sous Linux Intel 64 bits
le corps est vide
E. Ramat (ULCO-LISIC) Web 20 avril 2015 13 / 209
Introduction
HTTP

Entête HTTP

L'entête d'une réponse HTTP se compose :

d'une ligne de requête avec la version du protocole, le code de retour et la
phrase du code de retour
des métadonnées
le corps de la réponse (le code HTML de la page demandée)

Format

HTTP / < version > < status code > < status text >
< headers >
< CRLF >
< response body - the requested resource >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 14 / 209

Introduction
HTTP

Format

HTTP /1.1 200 OK

Alternate - Protocol : 443: quic , p =0.02
Cache - Control : private , max - age =0
Content - Encoding : gzip
Content - Type : text / html ; charset = UTF -8
Date : Wed , 21 Jan 2015 17:52:55 GMT
Expires : -1
Server : gws
X - Frame - Options : SAMEORIGIN
X - XSS - Protection : 1; mode = block
X - Firefox - Spdy : 3.1

Explications

la version du protocole HTTP de la réponse est 1.1

le code de retour (status code) est 200 et la phrase est OK
le contenu du corps est de type text/html

E. Ramat (ULCO-LISIC) Web 20 avril 2015 15 / 209

Introduction
HTTP

Méthodes

GET : demande le téléchargement d'une ressource

HEAD : récupère seulement l'entête d'une ressource
POST : mets à jour une ressource ou fournit les données pour mettre à jour
quelque chose
DELETE : // TODO

REST

// TODO un mot sur REST

E. Ramat (ULCO-LISIC) Web 20 avril 2015 16 / 209

Introduction
HTTP

Les réponses

1xx : information ("100 Continue")

2xx : succès ("200 OK")
3xx : redirection ("304 Not Modied")
4xx : erreur client ("404 Not Found")
5xx : erreur serveur ("503 Service Unavailable")

E. Ramat (ULCO-LISIC) Web 20 avril 2015 17 / 209

Introduction
HTTP

Les cookies

les cookies sont des données stockées sur le client

elles sont mises à jour à l'aide de la réponse du seveur
si elle existe, elles sont envoyées au serveur lors des prochaines requêtes

Schéma

E. Ramat (ULCO-LISIC) Web 20 avril 2015 18 / 209

Introduction
HTTP

Cookie - réponse serveur

HTTP /1.1 200 OK

Cache - Control : no - store , no - cache
Content - Type : text / html ; charset = utf -8
Set - Cookie : connect . sid = s %3 A3JwpEk2obi_K16k1Wi35w4sm7k2l6whL . YNKbVT3JgtssvtvrUyG
Vary : Accept - Encoding
Content - Encoding : gzip
Date : Wed , 21 Jan 2015 18:13:10 GMT
Connection : keep - alive
Transfer - Encoding : chunked

Explications

le serveur demande à enregistrer le cookie "connect.sid"

c'est un identiant de session
il sera envoyé à la prochaine requête

E. Ramat (ULCO-LISIC) Web 20 avril 2015 19 / 209

Introduction
Les outils

Le debugger

sous Iceweasel/Mozilla, le plugin Firebug

sous Chrome, c'est intégré

Possibilités

navigation dans le DOM et modier des éléments

tracer les transferts réseaux (méthode, type de ressource, taille, temps, . . . )
visualiser les sources javascript et les chiers css téléchargés
exécuter pas à pas des scripts JS, visualiser et modier des variables JS
visualiser et modier les cookies, les bases de données locales
(localstorage en HTML5)
voir le contenu de la console (sortie des scripts JS)

E. Ramat (ULCO-LISIC) Web 20 avril 2015 20 / 209

Introduction
Les outils

Sous Chrome

la vue du DOM
les éléments de CSS qui s'appliquent sur le document
on peut aussi cliquer sur un élément d'une page pour obtenir sa
représentation dans le DOM et les styles appliqués

E. Ramat (ULCO-LISIC) Web 20 avril 2015 21 / 209

Introduction
Les outils

Sous Chrome

arborescence des chiers téléchargés (.js et .css)

source d'un chier javascript
dénition d'un point d'arrêt
suivi de variables

E. Ramat (ULCO-LISIC) Web 20 avril 2015 22 / 209

Introduction
Références

HTML

http ://www.w3schools.com/tags/
https ://developer.mozilla.org/fr/docs/Web/HTML/Element
http ://www.w3.org/TR/html-markup/ et http ://www.w3.org/TR/html5/
HTML5 Pocket Reference, Jennifer Niederst Robbins, O'reilly
Head First HTML and CSS, 2nd Edition, Elisabeth Robson, Eric Freeman

CSS

http ://www.w3schools.com/css/default.asp
https ://developer.mozilla.org/fr/docs/Web/CSS/Reference
http ://www.w3.org/TR/CSS2/
http ://meiert.com/en/indices/css-properties/

E. Ramat (ULCO-LISIC) Web 20 avril 2015 23 / 209

Introduction
Références

Javascript

http ://www.w3schools.com/js/default.asp
https ://developer.mozilla.org/fr/docs/Web/JavaScript/Reference
JavaScript : The Denitive Guide, 6th Edition, David Flanagan, O'reilly

L'indispensable !

http ://stackoverow.com/

E. Ramat (ULCO-LISIC) Web 20 avril 2015 24 / 209

Introduction
Références

L'indispensable !

E. Ramat (ULCO-LISIC) Web 20 avril 2015 25 / 209

Introduction
Online editors

Online editors

Les éditeurs de code online permettent de tester des morceaux de code

HTML/CSS/Javascript avec ou sans bibliothèque
http ://jsddle.net/
http ://js.do/
http ://jsbin.com/ ?html,css,js,console,output/ (mode collaboratif)
http ://selfcss.org/ pour le CSS

E. Ramat (ULCO-LISIC) Web 20 avril 2015 26 / 209

Introduction
Online editors

JSFiddle

E. Ramat (ULCO-LISIC) Web 20 avril 2015 27 / 209

Introduction
Online editors

selfCSS

E. Ramat (ULCO-LISIC) Web 20 avril 2015 28 / 209

Plan

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 29 / 209

Introduction

Les éléments abordés

la structure d'une page

le texte et la mise en forme
les listes
les liens hypertextes
les images
les tableaux
les div
les formulaires
les nouveautés HTML5

E. Ramat (ULCO-LISIC) Web 20 avril 2015 30 / 209

Introduction
Une page

< html >

< head lang =" fr " >
< meta charset =" UTF -8 " >
< title >La boutique </ title >
</ head >
< body >
<h1 > Hello world ! </ h1 >
</ body >
</ html >

Sous Chrome

E. Ramat (ULCO-LISIC) Web 20 avril 2015 31 / 209

Introduction
Historique

Quelques dates

1991 : première utilisation du terme HTML par Tim Berners-Lee

1993 : HTML première version publiée par IETF
1995 : HTML 2 normalisé par le W3C
1997 : HTML 3.2
1999 : sortie d'HTML 4.01
2001 : XHTML
2011 : HTML 5

E. Ramat (ULCO-LISIC) Web 20 avril 2015 32 / 209

Structure d'une page

Structure

un document HTML est en réalité un document XML avec des balises

prédénies
<! DOCTYPE html >

la balise html marque le début du document

< html >

la balise head contient des informations relatives à la page : le type

d'encodage du texte, le titre, . . .
< head lang =" fr " >
< meta charset =" UTF -8 " >
< title >La boutique </ title >
</ head >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 33 / 209

Structure d'une page

Structure

la balise body contient le corps de la page (les éléments visuels de la page ;

dans l'exemple, un texte mis en style h1)
< body >
<h1 > Hello world ! </ h1 >

le document se termine par la fermeture des balises body et html

</ body >
</ html >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 34 / 209

Les balises

Structure d'une balise

< div style =" text - color : red " > xxxxx </ div >

de manière générale, une balise est divisée en deux parties :

I la balise ouvrante (<div>)
I la balise fermante (</div>)

du texte ou d'autres balises peuvent être placés entre les deux parties
un document HTML peut être représenté sous forme un arbre
une balise est complètée par un ensemble d'attributs
les attributs sont facultatifs
une balise peut être vide
<br / >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 35 / 209

Balises pour le textes
Les paragraphes
<p>
<br>
<hr>
<blockquote> et <q>

Mise en forme

gras, italique, strong, em, ...

indice, exposant, ...
<cite>, <dfn>
<pre>

Les styles

Les styles vont permettre aussi d'appliquer des mises en forme.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 36 / 209

Balises pour le textes
Les titres

les titres sont dénis par la balise <hx>

où x désigne un niveau
il existe 6 niveaux : 1 étant associé à la taille de caractères la plus grande et 6
la plus petite

Exemple

E. Ramat (ULCO-LISIC) Web 20 avril 2015 37 / 209

Balises pour le textes
Les caractères spéciaux

le standard HTML n'autorise que l'encodage ASCII 7 bits

les caractères accentués ne sont pas autorisés
il faut utiliser soit des constantes prédénies soit un code hexadécimal
le format est : &xxxx ; (par exemple pour l'espace : &nbsp ; ou &#32 ;)

Exemple

E. Ramat (ULCO-LISIC) Web 20 avril 2015 38 / 209

Les listes

Dénition

il existe plusieurs types de listes : ordonnées ou non ou de dénitions

les listes ordonnées contiennent une séquence d'éléments dont la position est
importante
les listes non ordonnées contiennent des éléments dont l'ordre n'a pas
d'importance
une liste de dénition contient des termes et leurs dénitions
une liste peut contenir d'autres listes

E. Ramat (ULCO-LISIC) Web 20 avril 2015 39 / 209

Les listes

Exemple 1

<ol >
<li > premier & eacute ;l & eacute ; ment </ li >
<li > deuxi & egrave ; me & eacute ;l & eacute ; ment </ li >
<li > troisi & egrave ; me & eacute ; l& eacute ; ment </ li >
<ol >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 40 / 209

Les listes

Exemple 2

<ul >
<li > premier & eacute ;l & eacute ; ment </ li >
<li > deuxi & egrave ; me & eacute ;l & eacute ; ment </ li >
<li > troisi & egrave ; me & eacute ; l& eacute ; ment </ li >
<ul >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 41 / 209

Les liens

Dénition

la notion de lien est au coeur du Web : référencer au sein d'une page d'autres
pages ou ressources
la balise utilisée est <a>
l'adresse cible (ou URL) est précisée par l'attribut href
un lien est représenté par l'élément placé entre <a> et </a>
cet élément peut être un texte mais aussi une image

Exemple

<a href =" http :// www . univ - littoral . fr " > Universit & eacute ; du Littoral </a >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 42 / 209

Les liens

URL

toute ressource du Web possède un identiant unique : l'URL (Unified

Resource Locator)
il existe 2 types d'URL : absolue et relative
une URL absolue commence par le nom de domaine du serveur contenant la
ressource
pour désigner une ressource appartenant au même serveur que la ressource
qui la référence : utilisation des URL relatives
on utilise alors la même strcuture que le système de chiers
on ne mentionne pas alors le nom de domaine
on peut aussi faire référence à une partie d'une page au sein de la même page

E. Ramat (ULCO-LISIC) Web 20 avril 2015 43 / 209

Les liens

Exemples

Un lien :
sur une page du même répertoire
<a href =" contact . html " > Contact </ a >

sur une page contenue dans un sous-répertoire

<a href =" contact / index . html " > Contact </a >

sur une page contenue dans le répertoire parent

<a href =" ../ contact . html " > Contact </a >

Liens via un module de routage

Attention, la plupart des frameworks de développement Web réécrivent les URLs

→ l'URL relative n'a donc pas de lien avec les chemins du système

E. Ramat (ULCO-LISIC) Web 20 avril 2015 44 / 209

Les liens

Liens pour les mails

une URL débutant par mailto demande au navigateur de lancer un client

mail
l'adresse du destinataire est précisée après mailto

Exemples

<a href =" mailto : ramat@lisic . univ - littoral . fr " > Eric RAMAT </a >

Cible

par défaut, le clic sur un lien provoque le remplacement de la page précédente

l'attribut target permet de préciser où sera aché la nouvelle page :
I target="_blank" : une nouvelle fenêtre s'ouvre
I ...

E. Ramat (ULCO-LISIC) Web 20 avril 2015 45 / 209

Les liens

Liens vers une partie de la page

un lien peut pointer sur un élément particulier dans une page ou d'une autre
page
cliquer sur ce type de lien provoque sa visualisation
très pratique pour des pages très longues
syntaxe : <a href="#id1">xxx</a> ou <a
href="autre_page.html#id1">xxx</a> ou <a
href="www.univ-littoral.fr#id1">xxx</a>
la cible doit être identiée par une balise contenant l'attribut id

E. Ramat (ULCO-LISIC) Web 20 avril 2015 46 / 209

Les images
Organisation

un site utilise beaucoup d'images de tout type et de toute taille

il est important de structurer leur stockage : dans un répertoire img, par ex
les formats reconnus sont : jpeg, png, gif et svg

Critères de choix du format

jpeg : idéal pour les photos et illustrations complexes contenant des millions
de couleurs ; attention à la compression !
png : format sans compression ; 8 bits ou 24 bits ; possibilité de transparence
gif : pratique pour des petites images (logo, par exemple) ; 256 couleurs max ;
gestion de la transparence et de l'animation
svg : format vectoriel ; ensemble d'objets graphiques ; pas de perte de qualité ;
plus léger et plus rapide

Outils libres

gimp pour les images pixelisées et inkscape pour les images vectorisées
E. Ramat (ULCO-LISIC) Web 20 avril 2015 47 / 209
Les images

La balise img

l'insertion d'une image dans une page est possible à l'aide de la balise img
deux attributs :
I src : URL de l'image (absolue ou relative)
I alt : un texte alternatif en cas de non chargement de l'image

Exemple

< img src = " img / mon_image . jpg " alt =" Mon image " / >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 48 / 209

Les images
Poids des images

faire attention au poids d'une image → énorme impact sur le temps de

chargement d'une page
jouer sur la résolution (72dpi, par exemple), la taille et le taux de
compression (pour le format jpeg)

Taille des images

par défaut, une image s'ache avec sa taille (largeur / hauteur)

la largeur et la hauteur peuvent être modiées via les attributs width et
height
attention aux proportions !

Exemple

< img src = " img / mon_image . jpg " alt =" Mon image " width = " 100 " height =" 100 " / >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 49 / 209

Les images

Placement des images

en HTML4 et inférieur, la balise align permet de spécier la position

relative d'une image vis à vis du texte
cette balise est maintenant obsolète
il faut utiliser les CSS

E. Ramat (ULCO-LISIC) Web 20 avril 2015 50 / 209

Les images
SVG

il est possible d'insérer directement du svg dans une page

utilisation de la balise <svg></svg>

Exemple

< svg width =" 400 " height = " 180 " >
< rect x=" 50 " y=" 20 " width =" 150 " height = " 150 "
style =" fill : blue ; stroke : pink ; stroke - width :5; fill - opacity :0.1;
stroke - opacity :0.9 " >
</ svg >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 51 / 209

Les images
gif animé

une solution pour introduire des petites animations : les gif animés
un gif animé est une collection d'images gif achées avec un délai entre
chaque image
la construction d'un gif animé est possible avec gimp à l'aide de la notion de
calque : une image est un calque et on remplace un calque par un autre avec
un délai

Exemple

E. Ramat (ULCO-LISIC) Web 20 avril 2015 52 / 209

Les tableaux

Dénition

les tableaux permettent d'organiser les éléments d'une page sous forme
tabulaire
un tableau est un ensemble de lignes
une ligne est un ensemble de cellules

Exemple

E. Ramat (ULCO-LISIC) Web 20 avril 2015 53 / 209

Les tableaux

Les balises

la balise <table> pour délimiter le tableau

<tr> pour dénir une ligne
<td> pour une cellule
le tableau s'adapte aux éléments placés dans les cellules
par défaut, aucun élément graphique indique les séparations entre les cellules

Exemple

< table style = " width :100% " >

<tr >
<td > Jill </ td >< td > Smith </ td ><td >50 </ td >
</ tr >
<tr >
<td > Eve </ td ><td > Jackson </ td ><td >94 </ td >
</ tr >
</ table >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 54 / 209

Les tableaux
Entête, corps et pied

il est possible de typer les lignes :

I <theader> pour l'entête
I <tbody> pour le corps
I <tfoot> pour le pied

de plus, les cellules peuvent être typées entête avec la balise <th> et
l'attribut scope

Exemple

< table >

< thead >
<tr ><th > Month </ th > <th > Savings </ th > </ tr >
</ thead >
< tfoot >
<tr ><td > Sum </ td ><td > $180 </ td ></ tr >
</ tfoot >
< tbody >
<tr ><td > January </ td ><td > $100 </ td ></ tr >
<tr ><td > February </ td >< td > $80 </ td ></ tr >
</ tbody >
</ table >
E. Ramat (ULCO-LISIC) Web 20 avril 2015 55 / 209
Les tableaux

Fusion

an d'améliorer la présentation, on peut fusionner des colonnes ou des lignes

deux attributs :
I colspan : n colonnes d'une ligne donnée sont fusionnées
I rowspan : n lignes d'une colonne donnée sont fusionnées

E. Ramat (ULCO-LISIC) Web 20 avril 2015 56 / 209

Les tableaux

Exemple

< table >

<tr >
<th > Month </ th > <th > Savings </ th > <th > Savings for holiday ! </ th >
</ tr >
<tr >
<td > January </ td ><td > $100 </ td >< td rowspan ="2" > $50 </ td >
</ tr >
<tr >
<td > February </ td >< td > $80 </ td >
</ tr >
</ table >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 57 / 209

Les tableaux

Espacement et remplissage

les attributs cellspacing et cellpadding dénissent l'espacement entre les

cellules et le remplissage d'une cellule
attention, non supporté par HTML5 et donc utiliser les CSS

Exemple

< table cellspacing =" 10 " >

<tr >
<th > Month </ th >
<th > Savings </ th >
</ tr >
<tr >
<td > January </ td >
<td > $100 </ td >
</ tr >
</ table >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 58 / 209

Les blocs
Dénition

les blocs ont pour objectif de structurer un contenu

deux balises :
I span : dénit un bloc dans le ux du code HTML
I div : dénit un bloc rectangulaire

Exemple

<p >My mother has < span style =" color : blue ; font - weight : bold " > blue </ span > eyes
and my father has < span style = " color : darkolivegreen ; font - weight : bold " >
dark green </ span > eyes . </ p >

Rendu

L'attribut style permet de dénir les propriétés des éléments dénis dans le bloc
(span). C'est du CSS inline.
E. Ramat (ULCO-LISIC) Web 20 avril 2015 59 / 209
Les blocs
Exemple

< div style =" background - color : black ; color : white ; text - align : center ; padding :5 px ;" >
<h1 > City Gallery </ h1 >
</ div >

< div style =" line - height :30 px ; background - color :# eeeeee ; height :300 px ;
width :100 px ; float : left ; padding :5 px ;" >
London <br >
Paris <br >
Tokyo <br >
</ div >

< div style =" width :350 px ; float : left ; padding :10 px ; " >
<h2 > London </ h2 >
<p > London is the capital city of England . It is the most populous city
in the United Kingdom , with a metropolitan area of over 13 million
inhabitants . </p >
</ div >

< div style =" background - color : black ; color : white ; clear : both ; text - align : center ;
padding :5 px ;" >
Copyright (c ) W3Schools . com
</ div >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 60 / 209

Les blocs
Rendu

L'attribut style permet de dénir les propriétés des éléments dénis dans le bloc
(div). C'est du CSS inline.
E. Ramat (ULCO-LISIC) Web 20 avril 2015 61 / 209
Les blocs

Dimensions

Les dimensions d'un bloc div sont dénies :

soit par son contenu
soit par les propriétés height et width du style

E. Ramat (ULCO-LISIC) Web 20 avril 2015 62 / 209

Plan

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 63 / 209

Introduction
Les éléments abordés

dénition
cascading
les selecteurs
le lien avec HTML
les couleurs
le texte et les polices de caractères
les blocs
la disposition
les images
les transitions et les transformations
les animations

Editeur online

Utiliser selfcss pour dénir vos CSS.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 64 / 209
Introduction
Dénition

première version en 1996, v2 en 1998, v2.1 en 2004 et nalement v3 en 2012

(en partie) auprès du w3c (http ://www.w3.org )
introduit en HTML4
un langage de règles pour appliquer des styles aux éléments d'un document
HTML
un style se compose de multiple choses : une couleur, une police de caractères
pour du texte, une position, . . .
les dénitions peuvent être interne au code HTML ou externe en utilisant des
chiers CSS

Pourquoi ?

objectif : séparer le contenu de la présentation

le code HTML dénit un contenu (texte, image, . . . )
le CSS dénit les styles de présentation (couleur et taille du texte d'un
paragraphe, par exemple)

E. Ramat (ULCO-LISIC) Web 20 avril 2015 65 / 209

Introduction

Fonctionnement

chaque élément est dans une zone rectangulaire

deux modes :
I en bloc (<p>, <h1>, <div>, . . . )
I inline (<span>)

le CSS va s'appliquer sur ces zones

Une zone peut contenir des zones → le CSS va donc s'appliquer par héritage (le
cascading )

E. Ramat (ULCO-LISIC) Web 20 avril 2015 66 / 209

Introduction
Cascading
Comment déterminer le style qui doit s'appliquer sur un élément ?
chaque élément d'un document HTML appartient à un arbre (DOM)
il hérite des styles de ses parents
il peut les surcharger (les redénir)

Ordre d'application

la règle d'héritage s'applique aussi sur le mode de dénition

du moins prioritaire au plus prioritaire :
I les styles par défaut du navigateur
I les styles dénis à l'extérieur du document
I les styles dénis dans l'entête du document
I les styles inline (dans un élément HTML via l'attribut style)

Toutes les propriétés ne sont pas héritées :

les propriétés relatives aux box
les styles de positionnement
E. Ramat (ULCO-LISIC) Web 20 avril 2015 67 / 209
Syntaxe

Syntaxe

Explications

La dénition d'un style se décompose en :

un sélecteur qui désigne sur quel élément ou sur quel type d'éléments le style
va s'appliquer
un bloc de déclaration de style, lui-même composé d'un ensemble de couples
composés de :
I une propriété
I une valeur

E. Ramat (ULCO-LISIC) Web 20 avril 2015 68 / 209

Syntaxe
Exemple

< html >

< head >
< style >
p {
color : red ;
text - align : center ;
}
</ style >
</ head >
< body >
<p > Hello World ! </ p >
<p > This paragraph is styled with CSS . </ p >
</ body >
</ html >

Explications

un nouveau style est déni pour la balise p

la couleur rouge sera utilisée pour le texte
le texte sera centré dans la page
E. Ramat (ULCO-LISIC) Web 20 avril 2015 69 / 209
Sélecteur

Dénition

Un sélecteur permet de désigner un élément du document ou un ensemble

d'éléments :
tous les éléments d'une balise spécique
tous les éléments d'une classe donnée
l'élément avec un id spécique

E. Ramat (ULCO-LISIC) Web 20 avril 2015 70 / 209

Classe et id

Classe

Tout élément HTML peut être rattachée à une classe. Par exemple, le paragraphe
a pour classe (class) c1.
<p class = " c1 " > Hello World ! </ p >

Une classe peut être utilisée plusieurs fois au sein d'une même page.

Identiant

Tout élément HTML peut possèder un id. Par exemple, le paragraphe a pour
identiant (id) para1.
<p id =" para1 " > Hello World ! </ p >

Il doit être unique dans une page.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 71 / 209

Sélecteur
CSS pour une balise

p {
text - align : center ;
color : red ;
}

CSS pour une classe

. c1 {
text - align : center ;
color : red ;
}

CSS pour un id

# para1 {
text - align : center ;
color : red ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 72 / 209

Sélecteur

Un CSS pour la classe d'une balise

une classe peut être utilisé au sein de plusieurs balises

on peut dénir un CSS spécique pour un couple donné classe + balise
p. c1 {
text - align : center ;
color : red ;
}

Un style pour plusieurs sélecteurs

un même style peut être appliqué à plusieurs sélecteurs

on dénit alors un groupe de sélecteurs
p , .c1 , # para1 {
text - align : center ;
color : red ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 73 / 209

Sélecteur

Sélection des sous-éléments

sélectionne tous les éléments ls d'un élément (ou d'un type d'éléments)
attention, ce sont les ls directs

Exemple

sélectionne tous les éléments dont la balise parent est <div>.

aecte la couleur jaune au fond <p>
div * {
background - color : yellow ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 74 / 209

Sélecteur

Sélection des sous-éléments

sélectionne tous les éléments ls d'un certain type de balise (ou d'une
certaine classe, . . . ) d'un élément (ou d'un type d'éléments)
attention, ce sont les ls directs

Exemple

sélectionne tous les <p> dont la balise parent est <div>.

aecte la couleur jaune au fond du texte contenu dans la balise <p>
div > p {
background - color : yellow ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 75 / 209

Sélecteur

Sélection des éléments frères

sélectionne tous les éléments situés juste après un élément (ou un type
d'éléments)
les éléments sont au même niveau dans le DOM et possèdent un parent
commun

Exemple

sélectionne tous les <p> dont la balise précédente est <div>.

aecte la couleur jaune au fond du texte contenu dans la balise <p>
div + p {
background - color : yellow ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 76 / 209

Sélecteur

Sélection des voisins

sélectionne tous les éléments situés après d'un élément (ou un type
d'éléments)
les éléments sont au même niveau dans le DOM et possèdent un parent
commun

Exemple

sélectionne tous les <ul> dont une balise <p> les précède.
aecte la couleur jaune au fond du texte contenu dans la balise <p>
p ~ ul {
background - color : yellow ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 77 / 209

Sélecteur
Sélection sur les valeurs des attrributs

sélectionne tous les éléments dont la valeur d'un attribut respecte une
condition
plusieurs types de condition sont possibles :
I égalité (=)
I contient (~= en CSS2 ou ∗= en CSS3)
I commence par (| = en CSS2 ou ∧= en CSS3)
I nit par ($=)

Exemple

sélectionne toutes les balises <a> dont l'attribut href commence par https
aecte la couleur jaune au fond du texte associé au lien <p>
a[ href ^= " https " ] {
background : # ffff00 ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 78 / 209

Sélecteur

Plus loin avec les sélecteurs

les pseudo-classes d'état

les pseudo-sélecteurs dénissant des éléments relatifs à un autre
les placements relatifs (une balise dans une autre balise)
les correspondances sur les attributs

E. Ramat (ULCO-LISIC) Web 20 avril 2015 79 / 209

Sélecteur
Pseudo-sélecteurs

Pseudo-sélecteurs

:rst-child : premier ls d'une balise

:last-child : dernier ls d'une balise
: :rst-line : première ligne du bloc, paragraphe, tableau, . . .
: :rst-letter : première lettre du bloc, paragraphe, . . .

Exemple

La couleur de fond du premier élément de la liste est jaune.

< html >
< head >
< style >
li : first - child {
background : yellow ;
}
</ style >
</ head >
< body >
<ul >
<li > Coffee </ li > <li > Tea </ li ><li > Coca Cola </ li >
</ ul >
</ body >
E. Ramat (ULCO-LISIC) Web 20 avril 2015 80 / 209
Sélecteur
Pseudo-éléments

Pseudo-éléments

Modication par insertion d'éléments

: :before : ajout d'un élément avant l'élement
: :after : ajout d'un élément après l'élement

Exemple

< html >

< head >
< style >
p :: after {
content : " - Remember this ";
background - color : yellow ;
color : red ;
font - weight : bold ;
}
</ style >
</ head >
< body >
<p > Hello world ! </ p >
</ body >
</ html >
E. Ramat (ULCO-LISIC) Web 20 avril 2015 81 / 209
Sélecteur
Pseudo-classes d'état

Pseudo-classes d'état

:hover : si la souris passe au-dessus de l'élément

:focus : si l'élément possède le focus
:active : l'utilisateur clique sur l'élément
:checked : l'élément est coché (boîte à cocher, par exemple)
...

Exemple

La couleur de fond des éléments h1 passe en jaune lorsque la souris le survol.

< html >
< head >
< style >
h1 : hover {
background - color : yellow ;
}
</ style >
</ head >
< body >
<h1 > Welcome to My Homepage </ h1 >
</ body >
</ html >
E. Ramat (ULCO-LISIC) Web 20 avril 2015 82 / 209
Sélecteur
Testeur

Pour tester les diérentes formes de sélecteurs :

http ://www.w3schools.com/cssref/trysel.asp

E. Ramat (ULCO-LISIC) Web 20 avril 2015 83 / 209

CSS

Trois possibilités d'intégration

un ou plusieurs chiers externes

dans l'entête du document
directement dans la balise à l'aide de l'attribut style

E. Ramat (ULCO-LISIC) Web 20 avril 2015 84 / 209

CSS

Exemples

chier externe :
< head >
< link rel =" stylesheet " type = " text / css " href =" mystyle . css " >
</ head >

dans l'entête :
< head >
< style >
h1 {
color : maroon ;
margin - left : 40 px ;
}
</ style >
</ head >

dans la balise :
<h1 style =" color : blue ; margin - left :30 px ;" > This is a heading . </ h1 >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 85 / 209

CSS

Les attributs

chaque balise accepte un certain nombre d'attributs

plusieurs catégories :
I background
I texte et police de caractères
I liens
I listes
I tableaux
I box (bordure, marge, . . . )
I dimension, position et alignement
I achage

E. Ramat (ULCO-LISIC) Web 20 avril 2015 86 / 209

CSS
background

la propriété background permet de dénir le fond d'un élément (page, titre,

. . .)
le fond est déni par :
I une couleur (background-color )
I une image ( background-image )
I une propriété de répétition (background-repeat )
I une position (dans le cas d'une image) (background-position)

Exemple

l'image contenu dans le chier img_tree.png va être appliquée comme image

de fond pour la page
l'image n'est pas répétée ; même si elle est trop petite pour remplir toute la
page
l'image est placée en haut à droite de la page
body {
background : # ffffff url (" img_tree . png ") no - repeat right top ;
}
E. Ramat (ULCO-LISIC) Web 20 avril 2015 87 / 209
CSS
Texte et couleur

la propriété Color permet de xer la couleur du texte

une couleur est dénie selon l'un des 5 modes :
I une valeur hexadécimale : #0000
I un code RGB : rgb(255, 0, 0)
I un code RGB + un niveau d'opacité : rgb(255, 0, 0, 0.5) (0 étant le
transparent)
I un code HSL (hue, saturation, lightness - Teinte, Saturation et Luminosité) :
hsl(0, 100%, 50%) pour le rouge
I un nom de couleur (red, par exemple)

Exemple

Le texte des titres de type h2 aura pour couleur le rouge.

h2 {
color : rgb (255 ,0 ,0);
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 88 / 209

CSS

Texte et alignement

il est possible de dénir le placement d'un texte horizontalement

4 modes : calé à gauche ou à droite, justié ou centré
en mode justié, les espaces sont dimensionnés an que le texte remplisse
tout l'espace

Exemple

h1 {
text - align : center ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 89 / 209

CSS

Texte et décor

la notion de décor correspond aux éléments que l'on peut ajouter au texte
comme le souligné
5 modes :
I none : aucun décor de texte n'est utilisée
I underline : souligné (déconseillé car utilisé pour les liens)
I overline : texte surligné avec une ligne au-dessus
I line-through : texte barré
I blink : texte clignotant.

Exemple

Le titre sera souligné

h1 {
text - decoration : overline ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 90 / 209

CSS

Texte et transformation

le texte peut être transformé en minuscule (lowercase) ou en majuscule

(uppercase)
la première lettre de chaque mot peut aussi être mise en majuscule
(capitalize)

Exemple

Tout le texte du paragraphe sera en minuscule

p {
text - transform : lowercase ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 91 / 209

CSS

Texte et police de caractères

la propriété relative à la police de caractères utilisée permet de dénir la

famille, le style et la taille
une famille est un ensemble de polices de caractères de même type (rendu
très proche) : serif, sans-serif et monospace
lors du choix de serif, on peut spécier plus précisement la police que l'on
désire : Times, par exemple
si le navigateur ne connait pas Times alors serif sera utilisé

Exemple

p {
font - family : " Times New Roman " , Times , serif ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 92 / 209

CSS
Taille des caractères

la taille est soit spéciée en absolu ou en relatif

le mode absolu empêche l'utilisateur de modier la taille des caractères via
son navigateur
il peut être utilisé si l'on connait la taille du dispositif d'achage
en mode relatif, la taille est dénie en fonction des éléments environnants
par défaut, la taille est 16px (ou 1em)
l'unité em permet de dénir des tailles propotionnelles à la taille de base
(16px) : par exemple, 2.5em = 40px

Exemple

h1 {
font - size : 40 px ;
}

h2 {
font - size : 1.875 em ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 93 / 209

CSS
Box

tout élément HTML peut être vu comme une boîte

cette boîte possède un ensemble de propriétés :
I un contenu
I un padding (l'espace entre le contenu et la bordure
I une bordure
I une marge (l'espace entre la bordure et les éléments environnants)

Modèle

E. Ramat (ULCO-LISIC) Web 20 avril 2015 94 / 209

CSS
Un exemple

la largeur de la div est xée à 300

pixels
div {
l'espace entre le contenu et la width : 300 px ;
bordure est de 25 pixels padding : 25 px ;
border : 25 px solid navy ;
la bordure est pleine, d'épaisseur margin : 25 px ;
}
25 pixels et de couleur navy
l'espace entre la bordure et les
autres éléments est de 25 pixels

E. Ramat (ULCO-LISIC) Web 20 avril 2015 95 / 209

CSS

Box

les propriétés peuvent être globales ou relatifs à l'un des 4 côtés

par exemple, border-top-xxx xe un élément de style à la bordure
supérieure
le style, la couleur et la taille de la bordure peut être spéciés

Exemple

p {
border - top - style : dotted ;
border - right - style : solid ;
border - bottom - style : dotted ;
border - left - style : solid ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 96 / 209

Plan

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 110 / 209

Introduction

Les éléments abordés

les valeurs, les types, les variables et les opérateurs

les tableaux
les instructions de contrôle
les fonctions
les classes et les objets
this
le DOM et javascript

HTML et Javascript

Le Web lie de manière étroite HTML et Javascript :

HTML : le langage de présentation
Javascript : le langage de manipulation et de contrôle

E. Ramat (ULCO-LISIC) Web 20 avril 2015 111 / 209

Introduction

Caractéristiques

langage simple, exible et interprété

peu typé : les variables sont typées par aectation
peut être utilisé comme un langage objet
technologie du côté client (et maintenant du côté serveur avec nodejs)

Utilisations

pour valider des éléments d'un formulaire

réagir aux actions de l'utilisateur
changer une image lors d'une action avec la souris
faire apparaître ou disparaître des éléments d'une page
charger dynamiquement des éléments
interagir avec un serveur sans recharger la page

E. Ramat (ULCO-LISIC) Web 20 avril 2015 112 / 209

Introduction

Capacités

Javascript peut :
capturer les évéments (clavier, souris, . . . )
lire et écrire des éléments HTML dans le DOM
valider les données d'un formulaire
accèder et modier les cookies d'un navigateur
détecter le type de navigateur et de systèmes d'exploitation
utiliser comme un langage orientée objets

E. Ramat (ULCO-LISIC) Web 20 avril 2015 113 / 209

Introduction

Un exemple simple

la balise <script> permet d'introduire du code Javascript dans une page

HTML
le script est exécuté au chargement de la page
une popup s'ouvre avec le message Hello world !
< html >

< body >

< script type = " text / javascript " >
alert (' Hello world ! ');
</ script >
</ body >

</ html >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 114 / 209

Introduction

Un second exemple simple

via l'objet document, le texte Hello world ! est ajouté à la page

< html >

< body >

< script type = " text / javascript " >
document . write ( ' Hello world ! ');
</ script >
</ body >

</ html >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 115 / 209

Introduction

Localisation du code

Le code Javascript peut être placé :

dans la partie entête (HEAD)
dans la partie entête (BODY) → non recommandé
dans un chier externe

Recommandation

Utilisé les chiers externes

le lien se fait à l'aide de la balise <SCRIPT> dans l'entête
les chiers peuvent alors être mis dans le cache du navigateur
< script src =" scripts . js " type =" text / javascript " >
</ script >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 116 / 209

Introduction
Execution
Les scripts sont exécutés :
lors du chargement de la page
lors d'un évenement

Dénition

Toutes les instruction sont exécutées mais certaines ne sont que des déclarations
de fonctions.

Evénement

Le code et les fonctions peuvent être appelés lors d'événements via des attributs
spéciaux
< img src = " logo . gif " onclick = " alert (' clicked ! ') " / >

une popup s'ouvre lorsque l'on clique sur l'image

le code est directement mis dans l'attribut onclick
E. Ramat (ULCO-LISIC) Web 20 avril 2015 117 / 209
Introduction

Fonction et événement

des fonctions sont dénies dans l'entête

l'appel se fait lors de l'événement

Evénement

< html >

< head >
< script type = " text / javascript " >
function test ( message ) {
alert ( message );
}
</ script >
</ head >

< body >

< img src = " logo . gif " onclick = " test (' clicked ! ') " / >
</ body >
</ html >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 118 / 209

Introduction

Le langage

Très similaire à Java et C#

un ensemble d'opérateurs arithmétiques et logiques (+, *, =, !=, &&, ++,
...)
les variables à typage par aectation (typage faible)
des structures conditionelles (if, else)
des structures de boucle (for, while)
les tableaux associatifs (my_array['abc']) ou non (my_array[0])
les fonctions avec retour (et la notion de variable de type fonction)
. . . et les objets

E. Ramat (ULCO-LISIC) Web 20 avril 2015 119 / 209

Types simples

4 types

les chaînes de caractères : String (codage 16 bits  utilisation des simples et

doubles quotes)
les numériques : Number (double, 64bit oating point),
les booléens : Boolean
les expressions régulières : RegExp

Booléen

Faux : false, null, undened, , 0, NaN

Vrai : tout le reste !

E. Ramat (ULCO-LISIC) Web 20 avril 2015 120 / 209

Types simples

Les expressions régulières

TODO ! ! !

E. Ramat (ULCO-LISIC) Web 20 avril 2015 121 / 209

Les opérateurs

Arithmétique

unaire : +expr -expr

multiplication et division : * / %
addition et soustraction : + -,
postx : expr++ expr
décalage : >> << >>>

Logique et relationnel

logique : & | && ||

test : ? :
égalité : == != === !==
relationnel : in instanceof

E. Ramat (ULCO-LISIC) Web 20 avril 2015 122 / 209

Les opérateurs

Egalité : == ou ===

=== : même type et même valeur

5 === 5 // => true
5 === 5.0 // => true
'a' === "a" // => true
5 === '5' // => false
[5] === [5] // => false
new Number(5) === new Number(5) // => false
var a = new Number(5) ;
a === a // => true
false === false // => true
[5], new Number(5) et a sont des objets

E. Ramat (ULCO-LISIC) Web 20 avril 2015 123 / 209

Les opérateurs

Aectation

simple : =
arithmétique : += -= *= /= %=
logique : &= =
 | = <>= >>>=

Objet

new : création
delete

E. Ramat (ULCO-LISIC) Web 20 avril 2015 124 / 209

Les variables

Dénition

prédéclarée avant l'utilisation (sauf mécanisme de Hoisting)

pas de déclaration de type
typage dynamique = par la valeur
la portée est limitée à la fonction

Exemple

var a = new Number (5);

var b = 5;

function f (x) {
if (x > 0) {
var y = 1;
}
return y;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 125 / 209

Les variables

Objet

toute variable est considéré comme un objet

donc, des méthodes s'appliquent

Exemple

var test = " some string ";

alert ( test [7]); // retourne 'r '

alert ( test . charAt (5)); // retourne 's '
alert (" test " . charAt (1)); // retourne 'e '
alert (" test " . substring (1 ,3)); // retourne ' es '

→ charAt et substring sont des méthodes que l'on peut appliquer sur des chaînes
de caractères

E. Ramat (ULCO-LISIC) Web 20 avril 2015 126 / 209

les tableaux

Dénition
Exemple
un type intégré au langage
plusieurs façons de créer : // creation
var empty = new Array (2);
I par new // un tableau vide de taille 2
I par un simple [ ] var array = ["1 " , " 2" ];
// lecture
ajout : empty [0]; // => undefined
empty [5]; // => undefined
I par une simple aectation // ecriture
I par la fonction push empty [0] = " Test ";
// empty est maintenant :
retrait : // [" Test ", undefined ]
I comme une pile : pop
empty [2] = " Test ";
// empty est maintenant :
I splice // [" Test ", undefined , " Test "]
taille : length

E. Ramat (ULCO-LISIC) Web 20 avril 2015 127 / 209

Les instructions de contrôle
Liste

conditionel : switch, if/else,

itération : while, do/while, for,
branchement : return, break, continue,
exception : throw, try/catch/nally

for
if/else
for ( var i = 0; i < n; ++ i) {
if (a === b) { }
} else {
} for ( var i in L ) {
}

Exceptions

Les exceptions permettent de contrôler les erreurs d'exécution.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 128 / 209

Les fonctions

Dénition

pas de type de retour

pas de typage des paramètres
pas de contrôle du nombre de paramètre
I si appel avec insusamment de valeur, alors paramètre = undened
I si appel avec trop de valeurs, alors ignoré

retourne une valeur à l'aide de return

E. Ramat (ULCO-LISIC) Web 20 avril 2015 129 / 209

Les fonctions

Déclaration

function myFunction (a , b) {
return a * b;
Fonctions }
deux formes : var x = function (a , b) { return a * b };
I déclaration d'une fonction
I dénition via une variable

invocation identique quelle que Appel

soit la déclaration
r = myFunction (2 , 2);

u = x (2 , 2);

E. Ramat (ULCO-LISIC) Web 20 avril 2015 130 / 209

Les classes et les objets
Dénition

une classe est une structure de données associée à un ensemble de méthodes

une méthode est une fonction qui manipule les données (attributs) de la
structure
un objet est une instantiation d'une classe ou non

Déclaration

Déclaration des classes var maClasse = function (a) {

this . maMethode = function (x) {
deux formes : this . unAttribut = 0;
I les fonctions }
I les prototypes this . unAttribut ;
instantiation via l'opérateur new var _a = a;
}

var / this

var déclare les attributs/méthodes privés et this, les publiques.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 131 / 209
Les classes et les objets

Les objets via les tableaux

déclaration à l'aide de
association clé → valeur :
I clé : le nom d'un attribut ou d'une méthode
I valeur : la valeur d'un attribut ou une fonction

Déclaration

> var pt = { x: 10 , y: 10 , w: function () { return this . x + this .y; } };

> pt . w ();
20
> typeof pt
' object '

E. Ramat (ULCO-LISIC) Web 20 avril 2015 132 / 209

Les classes et les objets
Une classe via une fonction

une classe est une fonction avec des variables locales et des fonctions
instantiation à l'aide de l'opérateur new

Déclaration

var Person = function ( name ) {

var private_name = name ;

this . get_name = function () {

return private_name ;
};
this . set_name = function ( new_name ) {
private_name = new_name ;
};
};

var p = new Person ( ' toto ');

Problème mémoire

Si deux objets sont issus de Person, tout est dupliqué variables ET méthodes
E. Ramat (ULCO-LISIC) Web 20 avril 2015 133 / 209
Les classes et les objets
Une classe via les prototypes

Les prototypes permettent de partager les méthodes entre les objets d'une même
classe

Déclaration

var Person = function ( name ) {

this . name = name ;
};

Person . protoype . get_name = function () {

return this . name ;
};

Person . protoype . set_name = function ( new_name ) {

name = new_name ;
};

var p1 = new Person ( ' toto ');

var p2 = new Person ( ' titi ');

On a perdu les attributs privés !

E. Ramat (ULCO-LISIC) Web 20 avril 2015 134 / 209
This

Dénition

le mot clé this référence le proprétaire de la fonction

dans le cas des fonctions d'un objet, this désigne l'objet
dans un contexte de Javascript embarqué dans de l'HTML, this désigne
l'élément dans lequel est le code (par exemple, un formulaire)

E. Ramat (ULCO-LISIC) Web 20 avril 2015 135 / 209

DOM
Dénition

le DOM est une présentation arborescente d'une page Web

chaque noeud est une balise HTML et correspond à un élément de la page
Javascript propose des méthodes d'accès au DOM
tous les éléments d'une page Web est manipulable
avantage : faire des modications sans rechargement de la page

Exemple

accès via l'attribut id

var elem = document . getElementById ( " un_id ")

accès via un nom (par exemple, pour un champ d'un formulaire)

var elems = document . getElementsByName ( " un_nom " )

accès via un type de balise

var elems = document . getElementsByTagName (" img " )

E. Ramat (ULCO-LISIC) Web 20 avril 2015 136 / 209

DOM

Exemple

On peut lire la valeur d'un attribut et modier sa valeur.

function change ( state ) {
var lampImg = document . getElementById (" lamp " );
lampImg . src = " lamp_ " + state + ". png ";

var statusDiv = document . getElementById (" statusDiv " );

statusDiv . innerHTML = " The lamp is " + state ;
}

Commentaires

premier bloc :
I le nom du chier image est changé
I il est construit à partir d'une variable state passée en paramètre
I l'image est chargée et elle est remplacée dans la page

deuxième bloc : le code HTML de la div statusDiv est changé

E. Ramat (ULCO-LISIC) Web 20 avril 2015 137 / 209

DOM

Attributs

la pluplart des attributs ont le même nom que les attributs des balises :
I id, name, href, alt, title, src, . . .

l'attribut style donne accès au style CSS de l'élément ( en mode inline) :

I style.width, style.marginTop, style.backgroundImage, . . .

l'attribut className donne accés à l'attribut HTML class

l'aectation de innerHTML remplace la totalité du code HTML à l'intérieur
de l'élément (par exemple, d'une div)
certains attributs sont en lecture seule :
I tagName, osetWidth, osetHeight, scrollHeight, scrollTop, nodeType, . . .

E. Ramat (ULCO-LISIC) Web 20 avril 2015 138 / 209

DOM

Navigation dans le DOM

on peut se déplacer dans l'arbre DOM

les méthodes s'appliquent à partir d'un noeud de l'arbre
quelques méthodes :
I element.childNodes : liste des noeuds ls
I element.parentNode : le noeud parent (s'il existe)
I element.rstChild : premier noeud ls
I element.lastChild : dernier noeud ls
I element.nextSibling : le noeud suivant vis à vis du noeud père et du noeud
courant
I element.previousSibling : le noeud précédent vis à vis du noeud père et du
noeud courant

E. Ramat (ULCO-LISIC) Web 20 avril 2015 139 / 209

DOM

Exemple

var el = document . getElementById ( ' form_div ');

alert ( el . childNodes [0]. value );
alert ( el . childNodes [1]. getElementsByTagName ( ' span '). id );

< div id =" form_div " >

< input type =" text " value =" test text " />
<div >
< span id = " test " > test span </ span >
</ div >
</ div >

On ache dans une popup :

la valeur du champ de saisie
l'id de la balise span

E. Ramat (ULCO-LISIC) Web 20 avril 2015 140 / 209

DOM

Manipulation du DOM

on peut aussi créer, supprimer et modier des éléments du DOM

quelques fonctions :
I createElement : créé un noeud Element
I createTextNode : créé un noeud Text
I appendChild : ajoute un nouvel enfant au noeud courant
I insertBefore : insère un nouvel enfant avant le noeud de référence
I removeChild : retire le noeud du DOM
I setAttribute(nom, valeur) : ajoute ou modie un attribut à l'élément courant

JQuery

via l'API de base, la manipulation du DOM est assez complexe

JQuery permet de simplier ces opérations

E. Ramat (ULCO-LISIC) Web 20 avril 2015 141 / 209

DOM et les événements

Déclaration

les événements sont capturés par le navigateur

le navigateur exécute la fonction associée à l'événement
un événement est attaché à un objet (le document, un bouton, une image,
...)
il existe deux façons de déclarer les fonctions rattachées aux événements :
I à l'aide d'un attribut spécique à un événement dans une balise HTML
I à l'aide du DOM (et au chargement de la page, par exemple)

E. Ramat (ULCO-LISIC) Web 20 avril 2015 142 / 209

DOM et les événements

Exemple 1

on considère que la fonction imageClicked est au préalable dénie

la fonction imageClicked() sera appelé si on clique sur l'image

< img id =" monImage " src =" test . gif " onclick =" imageClicked () " />

Exemple 2

La fonction imageClicked() sera appelé si on clique sur l'image dont l'identiant

est monImage
var img = document . getElementById (" monImage " );

img . onclick = imageClicked ;

E. Ramat (ULCO-LISIC) Web 20 avril 2015 143 / 209

Les événements

Paramètre

tous les événements reçoivent un paramètre

il contient les informations relatives à l'événement
il contient le type de l'événement (clic souris, appui sur une touche, . . . )
il peut contenir des informations de localisation lors d'un clic
une référence sur l'objet mis en jeu est aussi contenue (le bouton sur lequel
l'utilisateur a cliqué)
lors de l'appui sur une touche, l'état des touches shift, alt et ctrl sont
disponibles

Exemple

// TODO

E. Ramat (ULCO-LISIC) Web 20 avril 2015 144 / 209

Les événements

Souris

onclick : clic
onmousedown : l'un des boutons de la souris est enfoncé
onmouseup : l'un des boutons est relaché
onmouseover : le curseur vient d'entrer dans la zone graphique de l'élément
onmouseout : le curseur vient de sortir de la zone graphique de l'élément
onmousemove : la souris a bougé

Clavier

Les événements clavier valident sur des champs de formulaire et pour les canvas
onkeypress : l'utilisateur vient d'appuyer sur une touche
onkeydown : une touche vient d'être enfoncée
onkeyup : une touche vient d'être relachée

E. Ramat (ULCO-LISIC) Web 20 avril 2015 145 / 209

Les événements

Interface

Il existe des événements liés à l'interface

onblur : //TODO ? ? ? ?
onfocus : l'élément vient d'obtenir le focus (par exemple, un champ de saisie
d'un formulaire)
onscroll : l'utilisateur a fait scroller la fenêtre

Formulaire

onchange : un champ de saisie vient de changer de valeur

rightarrow permet de mettre à jour un élément en fonction du contenu d'un
champ
onsubmit : le formulaire vient d'être soumis
rightarrow permet de déclencher une fonction de validation des valeurs saisies

E. Ramat (ULCO-LISIC) Web 20 avril 2015 146 / 209

Les événements
Exemple

function checkForm ()
{
var valid = true ;

if ( document . monFormulaire . nom . value === "") {

alert (" Nom obligatoire ! " );
document . getElementById ( " ErreurNom " ). style . display = " inline ";
valid = false ;
}
return valid ;
}

< form name =" monFormulaire " onsubmit = " return checkForm () " >
< input type =" text " name = " nom " / >
</ form >

le formulaire contient un champ texte

la fonction checkForm teste si le champ texte est vide
si le champ est vide alors l'élément dont l'identiant est ErreurNom change
de style (display est aecté à online)
E. Ramat (ULCO-LISIC) Web 20 avril 2015 147 / 209
Les événements
Chargement et déchargement

lorsqu'une page est chargée ou déchargée, onload et unload sont générés

la déclaration est faite exclusivement dans la balise body
on peut dénir des actions lors du chargement d'une page ( achage d'une
popup, par exemple)

Exemple

<html >
<head >
< script type = " text / javascript " >
function hello () {
alert (" Page chargee " );
}
</ script >
</ head >
< body onload = " hello () " >
</ body >
</ html >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 148 / 209

Les objets prédénis

Dénition

Les navigateurs proposent plusieurs objets globaux :

window :
I référence le noeud racine du DOM
I représente la fenêtre du navigateur

document : le document chargé

screen : les propriétés de l'écran d'achage (résolution, . . . )
browser : les informations concernant le navigateur (le type, le système
d'explotation, . . . )

E. Ramat (ULCO-LISIC) Web 20 avril 2015 149 / 209

JSON

Dénition

JSON = JavaScript Object Notation

utilisé pour la dénition des tableaux associatifs
utilisé aussi pour l'échange de données entre le client et le serveur sous forme
de chaînes de caractères
deux fonctions de serialisation :
I JSON.stringify(x) : production d'une chaîne de caractères à partir d'un tableau
associatif (ou d'un objet)
I JSON.parse(data) : reconstruction d'un tableau associatif (ou d'un objet) à
partir d'une chaîne de caractères au format JSON

E. Ramat (ULCO-LISIC) Web 20 avril 2015 150 / 209

Ajax

Problématique

lorsqu'une page est chargée, le contenu peut être modié à l'aide :

I d'actions (événements)
I de fonctions locales déclenchées par des timers

c'est à dire, à partir d'éléments purement locaux

question : comment réaliser une modication :
I sans rechargement de la page
I en fonction du résultat d'une requête exécutée sur le serveur

La solution

Ajax : Asynchronous JavaScript and XML // TODO

E. Ramat (ULCO-LISIC) Web 20 avril 2015 151 / 209

Ajax
Exemple

function doAjaxCall () {
var request = null ;
if ( window . XMLHttpRequest ) {
request = new XMLHttpRequest ();
}
if ( request ) {
request . open ( " GET " , " http ://127.0.0.1/ foo . php " );
request . onreadystatechange = function () {
if ( request . readyState === 4) {
document . getElementById (" resultDiv " ). innerHTML = request . responseText ;
}
}
request . send ( null );
}
}

vérication du support d'Ajax par le navigateur

création de la requête et ouverture en mode GET
dénition de la fonction de récupération de la réponse
envoi de la requête
E. Ramat (ULCO-LISIC) Web 20 avril 2015 152 / 209
Plan

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 153 / 209

Introduction

C'est quoi ?

c'est une bibliothèque JavaScript

simple : une seule fonction jQuery(...) / un seul opérateur $
multi-navigateur
communauté très active

Les éléments abordés

Manipulation du DOM et des événements

sélectionner les éléments : trouver

faire quelque chose avec

E. Ramat (ULCO-LISIC) Web 20 avril 2015 154 / 209

Introduction
Et les autres ?

Il existe d'autres bibliothèques :

Prototype (http ://prototypejs.org/)
Dojo (http ://dojotoolkit.org/)
Yui de Yahoo (http ://yuilibrary.com/)
Mootools (http ://mootools.net/)

Utilisation de jquery

en mode CDN (Content Delivery Network ) : ajouter dans l'entête du chier

HTML :
< script src =" http :// code . jquery . com / jquery -1.11.2. min . js " ></ script >

en téléchargeant le source minimisé ou non :

< script src =" js / jquery -1.11.2. min . js " ></ script >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 155 / 209

Recherche

Recherche

sélectionner une div avec un id

$( ' div # id ')

ou plus simplement via l'id

$( '# id ')

sélectionner un élément dont la classe est class

$( '. class ')

Remarque

On peut remplacer le symbole $ par jQuery(...).

E. Ramat (ULCO-LISIC) Web 20 avril 2015 156 / 209

Recherche

Collection

si la recherche sélectionne plusieurs éléments alors on obtient une collection

(une liste)
on peut accèder un élément par l'opérateur []
on peut obtenir la taille à l'aide de l'attribut length ou de la méthode size
list = $( ' div ')
list [0]
list . length
list . size ()

E. Ramat (ULCO-LISIC) Web 20 avril 2015 157 / 209

Recherche

Parcours

On peut aussi parcourir la liste :

à l'aide d'une boucle for
via la méthode each et une fonction anonyme :
$( ' div '). each ( function () { this . hide (); });

Each

la méthode each parcourt l'ensemble des éléments de la collection

appelle la fonction anonyme pour chacun d'eux
this référence l'élément en cours de traitement

C'est une forme de programmation très courante en Javascript.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 158 / 209

Manipulation
Modication

le texte contenu dans une balise peut être changé

$( ' div '). text ( ' Hello world ! ');

le code HTML contenu dans une balise peut l'être aussi

$( ' div '). html ( '<p > Hello world ! </p > ' );

Modication des attributs

la valeur des attributs des balises est modiable

$( ' img # mini ' ). attr ( ' src ', ' img / img_small . jpg ');

l'attribut src de la balise img dont l'id est mini est modié
il est possible d'en modier plusieurs à l'aide d'un unique appel
$( ' img # mini ' ). attr ({ ' src ': ' img / img_small . jpg ', ' width ': ' 100 px ' });

on utilise la syntaxe de dénition d'un tableau associatif : la clé est le nom de

l'attribut et la valeur, la nouvelle valeur de l'attribut
E. Ramat (ULCO-LISIC) Web 20 avril 2015 159 / 209
Manipulation

Attribut

on peut récupérer la valeur d'un attribut

$( ' img # mini ' ). attr ( ' src ');

la suppression est aussi possible

$( ' img # mni '). removeAttr ( ' width ' );

E. Ramat (ULCO-LISIC) Web 20 avril 2015 160 / 209

Manipulation
Classe

Deux méthodes spéciques pour les classes

si un style est déni via un css, on peut dynamiquement le rattacher à un
élément
$( 'p '). addClass ( ' new ');

un style est déni pour les balises a via la classe new

la suppression est aussi possible
$( 'p '). removeClass ( ' new ');

la classe est retirée à tous les éléments de type p et par conséquent, le style
qui y était rattaché

CSS

il est possible de dénir des styles à la volée

$( 'p '). css ({ ' color ': ' red ', 'font - size ': ' 20 pt ' });

tous les paragraphes passent en rouge avec des caractères de taille 20pt
E. Ramat (ULCO-LISIC) Web 20 avril 2015 161 / 209
Manipulation

Création de balises

l'appel à jQuery avec une balise en paramètre déclenche sa création :

var p = $( '<p/> ' );

l'élément créé est ensuite rattaché à un autre élément du DOM

var row = $ ( '< div /> ' , { class : ' row ' });
row . appendTo ($( '# main ' ));

une div est créée, sa classe est row et elle est rattachée à un élément dont l'id
est main

Il est possible de construire une page Web entièrement à l'aide de jQuery.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 162 / 209

Evénements
Démarrage

On peut spécier une fonction qui sera exécutée lors du chargement d'une page
$( document ). ready ( function () {
alert ( ' Hello world ! ');
});

Clic

la réponse aux événements est réalisée via des fonctions anonymes

il faut sélectionner le ou les éléments puis faire appel à la fonction relative à
l'événement dont on veut répondre
$( 'p '). click ( function () {
console . log ( ' Clic ');
});

une deuxième technique est possible :

$( 'p '). on ( ' click ', function () {
console . log ( ' Clic ');
});

E. Ramat (ULCO-LISIC) Web 20 avril 2015 163 / 209

Evénements

Evénements multiples

Plusieurs événements peuvent être possibles pour un même élément

$( 'p '). on ({
' click ': function () { console . log ( ' clicked ! '); },
' mouseover ': function () { console . log ( ' hovered ! '); }
});

Fonctions nommées

La réponse à un événement peut être dénie dans une fonction non anonyme
var my_function = function ( event ) {
console . log ( ' clicked ! ');
};

$( 'p '). click ( my_function );

Pour tout événement, un paramètre peut être passé ; il contient les informations
liés à l'événement.

E. Ramat (ULCO-LISIC) Web 20 avril 2015 164 / 209

Plan

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 165 / 209

Introduction

Les éléments abordés

les éléments d'un formulaire

les méthodes
la vérication avec HTML5 et Javascript/jQuery

Dénition

Un formulaire est :
un élément composé de zones de saisie et de boutons
objectif : envoyer des informations au serveur Web
côté serveur : lancer un traitement, stocker des informations, . . .

E. Ramat (ULCO-LISIC) Web 20 avril 2015 166 / 209

Eléments
Les éléments d'un formulaire

les zones de saisie texte simple ou multi-lignes

les boutons radio
les boîtes à cocher
les listes déroulantes
les boutons d'envoi

Un exemple simple

Un formulaire avec un champ de saisie et un bouton pour soumettre le

formulaire.
< form method = " post " action =" create . php " >
<p > Name : < input type =" text " name =" name " / ></p >
< input type =" submit " / >
</ form >

Un champ de saisie est identié par un nom (attribut name ).

E. Ramat (ULCO-LISIC) Web 20 avril 2015 167 / 209
Eléments

Zone de saisie texte

deux types : texte visible (text ) et texte invisible (password )

possibilité de contrôle du nombre de caractères max (maxlength)
la balise textearea permet la saisie de texte multilignes → il faut préciser le
nombre de lignes (attribut rows ) et le nombre de colonnes (attribut cols )

Exemple multilignes

<p > Comments : </p >

< textaera name =" comments " rows =" 5" cols =" 20 " / >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 168 / 209

Eléments

Les boutons radio

objectif : faire un choix parmi plusieurs possibilités

des balises input dont le type est radio
chaque possibilité possède une valeur qui sera transmis au serveur
par défaut, aucun bouton n'est coché
l'attribut checked permet d'indiquer un choix par défaut

Exemple

< input name =" language " value =" html " type =" radio " checked / > HTML
< input name =" language " value =" js " type = " radio " / > JavaScript
< input name =" language " value =" php " type =" radio " / > PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 169 / 209

Eléments

Les cases à cocher

objectif : faire un ou plusieurs choix parmi plusieurs possibilités

des balises input dont le type est checkbox
chaque possibilité possède une valeur (attribut value ) qui sera transmis au
serveur sous forme d'une liste
par défaut, aucune case n'est cochée
l'attribut checked permet d'indiquer un choix par défaut

Exemple

< input name =" language " value =" html " type =" checkbox " checked / > HTML
< input name =" language " value =" js " type = " checkbox " / > JavaScript
< input name =" language " value =" php " type =" checkbox " / > PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 170 / 209

Eléments

Les listes déroulantes

objectif : faire un ou plusieurs choix parmi plusieurs possibilités

les choix se présentent sous forme d'une liste déroulante
deux balises sont utilisées :
I select : la balise qui encadre la liste des possibilités
I option : la balise des possibilités ; chaque possibilité possède une valeur
(attribut value ) qui sera transmis au serveur
par défaut, aucune option n'est sélectionnée
l'attribut selected permet d'indiquer un choix par défaut

E. Ramat (ULCO-LISIC) Web 20 avril 2015 171 / 209

Eléments
Exemple

<p > Languages : < br / >

< select name = " language " >
< option value =" html " > HTML </ option >
< option value =" js " > JavaScript </ option >
< option value =" php " > PHP </ option >
</ select >
</p >

Multiple

Pour les listes à sélection multiple, il faut ajouter l'attribut multiple.

La liste peut se présenter soit :

sous la forme d'un champ avec un bouton clicable pour obtenir les choix
sous la forme d'une liste avec une barre de délement → il faut alors ajouter
l'attribut size qui indique le nombre d'éléments visibles

E. Ramat (ULCO-LISIC) Web 20 avril 2015 172 / 209

Eléments

Les champs invisibles

possibilité de dénir les champs qui ne sont pas visibles

utilité : stocker des données qui pourront être envoyé au serveur
exemple : des identiants de session ou des valeurs de clés primaires associées
aux données du formulaire, par exemple
le type devient alors hidden
pour voir les variables et leurs valeurs, il faut regarder le code

Exemple

< input name =" id " value =" 534 " / >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 173 / 209

Soumission

Soumission

un formulaire est déni dans une balise form

deux attributs sont obligatoires :
I action : url où sera envoyé les données du formulaire
I method : la façon dont les données sont envoyées (POST ou GET )
un bouton de soumission doit être présent
< input type =" submit " value =" Submit " / >

E. Ramat (ULCO-LISIC) Web 20 avril 2015 174 / 209

Soumission

La méthode GET

les données sont ajoutées à la n de l'URL

à utiliser pour des formulaires avec peu de données
pour des données peu sensibles

La méthode POST

les données sont placées dans la requête HTTP

non visible directement dans l'URL
possibilité de protection des données

E. Ramat (ULCO-LISIC) Web 20 avril 2015 175 / 209

Validation
Validation

les données d'un formulaire ont en général besoin d'être validé avant l'envoi
au serveur
par exemple, vérier qu'une adresse mail est correctement dénie
la validation peut se faire aussi du côté serveur
côté client, deux possibilités :
I en Javascript
I en HTML5

En HTML5

Trois attributs :
required : indique que le champ est obligatoire
pattern : une expression régulière pour vérier que la valeur saisie possède le
bon format
placeholder : une indication de ce que l'on attend dans une info bulle

E. Ramat (ULCO-LISIC) Web 20 avril 2015 176 / 209

Validation
En HTML5 - suite

il est possible de préciser la nature de l'information à saisir en changeant le

type (par défaut, texte)
pour les champs numériques, on peut indiquer un minimum et un maximum
via les deux attributs min et max ; le type devient alors number
on peut préciser : date, time, url, email, search et color

En Javascript

Deux possibilités :
ajout de l'attribut onsubmit dans la balise form
I avant l'envoi du formulaire, un évément submit est généré
I la fonction Javascript doit se terminer par un return true ; ou return false ; an
d'indiquer si le formulaire est correctement rempli

ajout de l'attribut onchange dans les balises input et select

I dès que l'utilisateur réalise une modication dans un champ ou dans une liste,
l'événement change est généré
I la réponse peut consister à ajouter un message à côté du champ

E. Ramat (ULCO-LISIC) Web 20 avril 2015 177 / 209

Validation

En jQuery

accès à la valeur d'un champ :

<p > Phone number :
< input id =" phone_number " name =" phone " type = " text " onchange = " check_phone (); "
< span id = " phone_msg " ></ span >
</p >

function check_phone ()
{
var value = $( '# phone_number '). val ();

if ( value . length != 10) {

$( '# phone_msg '). show ();
$( '# phone_msg '). html ( ' Incorrect length ' );
} else {
$( '# phone_msg '). hide ();
}
}

si la longueur du numéro de téléphone n'est pas égale à 10 alors un message

est aché

E. Ramat (ULCO-LISIC) Web 20 avril 2015 178 / 209

Plan

1 Introduction

2 Le langage HTML

3 Le langage CSS

4 Bootstrap

5 Le langage Javascript

6 JQuery

7 Les formulaires

8 Le langage PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 179 / 209

Introduction
Les éléments abordés

historique et caractéristiques
les types
les variables et les constantes
entrée-sortie
les opérateurs et les structures de contrôle
les fonctions
les bases de données

Les références

le site de référence : http://www.php.org

le livre de référence : K. Tatroe, P. MacIntyre et R. Lerdorf,
Programming PHP, édition o'reilly, 540 pages

Eléments non abordés

Les classes et objets

E. Ramat (ULCO-LISIC) Web 20 avril 2015 180 / 209
Introduction
Historique

créé par Rasmus Lerdorf pour créér dynamiquement des home pages et
traiter des formulaires
première release 1.0 en 1995 et la deuxième (2.0) en 1996
PHP devient ensuite un langage de traitement pour les documents
hypertextes
analyseur réécrit par Andi Gutmans et Zeev Suraski : Zend engine
version 3.0 en 1998, version 4.4 en 2005
en 2004, changement de modèles de développement : modèle objet avec la
version 5
puis en 2009, version 5.3, en 2011, version 5.4, en 2013 version 5.5 et
nalement la version 5.6 en 2014

Quelques références

des sites web : Facebook et Wikipedia

des CMS comme Wordpress et Drupal
E. Ramat (ULCO-LISIC) Web 20 avril 2015 181 / 209
Introduction

Caractéristiques

langage faiblement typé

orienté objet
interprété mais génération à la volée de bytecode en cache
utilisé principalement pour le développement d'applications web

Autres utilisations

scripting système comme Perl, shell, . . .

écriture d'appplications avec interface graphiques (GUI - PHP-GTK)

E. Ramat (ULCO-LISIC) Web 20 avril 2015 182 / 209

PHP et HTML

La balise PHP

Le code PHP est placé à l'intérieur de :

la balise <?php ...?>
ou <script language="php"> ...</script>

Fichiers PHP

l'extension des chiers contenant du PHP est .php

l'extension permet au serveur web comme Apache par exemple de les
reconnaître
le code PHP est alors interprété par le moteur PHP

E. Ramat (ULCO-LISIC) Web 20 avril 2015 183 / 209

Syntaxe de base

Syntaxe de base

le langage est sensible à la "case" : un nom de variable écrit en majuscule ou

en minuscule est considéré comme diérent
toutes les instructions se terminent par un point virgule → les sauts de ligne
et les espaces n'ont pas d'eet (sauf dans les chaînes de caractères)
les commentaires sont comme :
I en C (multilignes) : /* . . . */
I en C++ (monoligne) : // . . .
I shell/Perl (monoligne) : # . . .

Exemple "Hello world"

<? php echo " hello world "; ?>

E. Ramat (ULCO-LISIC) Web 20 avril 2015 184 / 209

Syntaxe de base

Inclusion de code

il est possible d'inclure un autre chier (html ou php) dans un chier php
include :
I inclusion du chier → un warning apparaît si le chier à inclure n'est pas
trouvé
I utilisé pour l'inclusion de chiers HTML
I permet la réutilisation de chiers html pour plusieurs pages (par exemple une
entête de page ou un pied de page)

require :
I inclusion du chier et erreur fatale si le chier n'est pas trouvé
I utilisé pour inclure des chiers de dénition de fonctions php utilisées dans le
script

E. Ramat (ULCO-LISIC) Web 20 avril 2015 185 / 209

Syntaxe de base

Inclusion de code html

<? php include " header . html "; ?>

...
<? php include " footer . html "; ?>

Inclusion de code php

<? php require " design . php " ;

header (); ?>
...
<? php footer (); ?>

E. Ramat (ULCO-LISIC) Web 20 avril 2015 186 / 209

Syntaxe de base

Littéraux

Les littéraux sont les données constantes :

les numériques : 2015, 0xFF ou 3.1415
les chaînes de caractères : "Hello world" ou 'Hello world'
true / false
null

Identiants

le nom d'une variable commence par le symbole $ et est suivi par une lettre
ou un underscore puis des lettres, des chires et l'underscore
exemples : $str, $_name, $an_instance
les noms de fonction suivent la même logique mais sans le $ devant
rappel : le php est case sensitive

E. Ramat (ULCO-LISIC) Web 20 avril 2015 187 / 209

Syntaxe de base

Les types

les types simples (scalaires) : entiers, réels, chaînes de caractères et booléen

les collections : les tableaux et les objets
les types spéciaux : ressource et null

Entiers

valeur comprise entre −216 et 2−16 − 1

peut être notée dans une autre base que 10 :
I 16 (hexa) : 0x3F
I 8 (octal) : 0755
I 2 (binaire) : 0b00110111

possibilité de tester si une variable contient une valeur entière

<? php if ( is_int ( $x ) { ... } ?>

E. Ramat (ULCO-LISIC) Web 20 avril 2015 188 / 209

Syntaxe de base

Réels

valeur comprise entre 1.7e − 308 et 1.7e + 308 (comme le type double du
langage C)
deux formats :
I usuel (avec une virgule) : 1.3, −0.7
I scientique : 1.3e −7
la représentation d'un réel est une approximation !
→ 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 6= 1

E. Ramat (ULCO-LISIC) Web 20 avril 2015 189 / 209

Syntaxe de base
Chaînes de caractères

une chaîne de caractères est un ensemble de caractères

deux types de délimiteurs : double quote et simple quote
si la chaîne est délimitée par des simples quotes alors elle n'est pas interprétée
<? php
$name = " world " ;
echo " Hello $name !\ n" ;
?>

interprété : la variable $name est remplacée par sa valeur

Caractères d'échappement

comme en C : \ n \ r \ t \ \\ "
\ $ pour le distinguer du marqueur de début de nom de variable
et aussi : \ { \ } \
\

E. Ramat (ULCO-LISIC) Web 20 avril 2015 190 / 209

Syntaxe de base

Booléens

valeur : vrai (true) ou faux (false)

la valeur faux peut aussi être :
I l'entier 0 ou le réel 0.0
I la chaîne de caractères vide ou contenant le caractère 0
I le tableau avec aucun élément
I la valeur null
tout ce qui n'est pas faux est vrai

Test

Possibilité de tester si une variable contient une valeur booléenne :

<? php if ( is_bool ( $x ) { ... } ?>

E. Ramat (ULCO-LISIC) Web 20 avril 2015 191 / 209

Syntaxe de base

Les tableaux

un tableau est un ensemble de valeurs indexées

l'index peut être :
I un entier ; la première position est indexée par 0
I une chaîne de caractères ; on parle alors de tableau associatif

$list [0] = " Hello ";

$list [1] = " world !" ;

$dic [" Hello "] = " Bonjour " ;

$dic [" world !"] = " le monde !" ;

E. Ramat (ULCO-LISIC) Web 20 avril 2015 192 / 209

Syntaxe de base

Création

la création d'un tableau est possible grâce à la fonction array()

$list = array() ; créé un tableau vide
création d'un tableau avec des éléments :
I index entier :

$list = array (" Hello " , " world ! " );

I associatif :

$dic = array ( " Hello " => " Bonjour " , " world !" => " le monde ! " );

Count

On peut connaître la taille d'un tableau grâce à la fonction count.

$n = count ( $list );

E. Ramat (ULCO-LISIC) Web 20 avril 2015 193 / 209

Syntaxe de base

Les variables

inutile de déclarer les variables avant de les utiliser

une variable dénit à l'extérieur d'une fonction est considérée comme globale
lorsqu'une variable est dénie dans une fonction, celle-ci a une durée de vie
limitée à l'exécution de la fonction
pour allonger la durée de vie, deux solutions :
I variable globale : variable dénie en dehors des fonctions ou utilisation du
mot-clé global
I variable statique : variable dénie dans une fonction → portée est limitée à la
fonction mais lorsque la fonction est exécutée une seconde fois la variable
reprend la valeur qui lui a été assigné à l'appel précédent

E. Ramat (ULCO-LISIC) Web 20 avril 2015 194 / 209

Syntaxe de base

Les constantes

les constantes sont identiques aux variables mais elles peuvent être aectées
qu'une seule fois
PHP crée automatiquement certaines constantes (PHP_VERSION, par
exemple)
on peut créer manuellement des constantes grâce à la fonction dene
define (" BONJOUR " , " Hello , World ! " );
echo BONJOUR ;

E. Ramat (ULCO-LISIC) Web 20 avril 2015 195 / 209

Syntaxe de base

Entrée-sortie

trois fonctions permettent de générer du texte pour la page web : echo, print
et printf
echo est plus un opérateur qu'une fonction
echo prend n'importe quel nombre de paramètres, séparés par des virgules ;
chaque paramètre est converti en chaîne de caractères
echo " Premiere chaine " , 2 , 3.0 , " derniere chaine ";

la fonction print est identique qu'echo sauf qu'elle nécessite des paranthèses
et qu'elle admets qu'une seule chaîne de caractères en paramètre
printf est similaire à la fonction du C ; le premier paramètre est une chaîne de
formatage
printf ( ' %02 d /%02 d /%04 d ' , $month , $day , $year );

E. Ramat (ULCO-LISIC) Web 20 avril 2015 196 / 209

Expression

Opérateurs arithmétiques

unaire : +expr -expr

multiplication, division et modulo : * / %
addition et soustraction : + -
rex : ++$var $var
postx : $var++ $var
décalage : >> <<

Logique et relationnel

logique : ! & | && || and or xor

test : ? :
égalité avec type casting : == !=
égalité sans type casting : === !==

E. Ramat (ULCO-LISIC) Web 20 avril 2015 197 / 209

Expression

Chaîne de caractères
concaténation : .
$a = " Hello "; $a = $a . " world !";

Aectation

simple : =
arithmétique : += -= *= /= %=
logique : &= = |=
chaîne de caractères (concaténation) : . =

E. Ramat (ULCO-LISIC) Web 20 avril 2015 198 / 209

Les instructions de contrôle
Liste

conditionel : switch, if/else/elseif

itération : while, do/while, for, foreach
branchement : break, continue
exception : try/catch

for

for ( $i = 0; $i < $n ; ++ $i ) {
}
if/else

if ( $a > $b ) {
} elseif ( $a < $b ) { for
} else {
} $i = 0;
while ( $i < $n ) {
...
++ $i ;
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 199 / 209

Les instructions de contrôle

foreach

parcours d'un tableau

foreach ( $list as $current ) {
...
}

parcours d'un tableau associatif

foreach ( $list as $key = > $value ) {
...
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 200 / 209

Les fonctions

Fonction

une fonction peut être dénie en utilisant la syntaxe suivante :

function foo ( $arg_1 , $arg_2 , ... , $arg_n )
{
...
return $retval ;
}

peut ne pas avoir de paramètres (exemple : function foo() ... ) ; son appel se
fera aussi sans paramètre (foo())
les paramètres, comme les variables, ne sont pas typés
toute fonction doit être préalablement dénie avant d'être utilisées
si une fonction doit retourner une valeur alors la dernière instruction de la
fonction sera return

E. Ramat (ULCO-LISIC) Web 20 avril 2015 201 / 209

Les fonctions

Passage des paramètres

par défaut, les paramètres sont passés par valeur

les paramètres sont considérés comme des variables locales de la fonction et
sont aectés par les valeurs passées à la fonction
si le paramètre est précédé du signe & alors le paramètre est passé par
référence
le paramètre par référence est un alias de la variable passée
toute modication du paramètre dans la fonction se répercute sur la variable
passée en paramètre
un paramètre peut possèder une valeur par défaut

E. Ramat (ULCO-LISIC) Web 20 avril 2015 202 / 209

Les fonctions

Passage par référence

function add_some_extra (& $string )

{
$string .= ' world ! ';
}

$str = ' Hello ';

add_some_extra ( $str );

Valeur par défaut

function get ( $index = 0)

{
...
}

$value = get ();

E. Ramat (ULCO-LISIC) Web 20 avril 2015 203 / 209

PHP et HTML
Intégration PHP / HTML

du code PHP dans les balises HTML

< label > Name : <br >
< input name =" <? php echo $name ?> " type =" text " / >

du code HTML généré par du PHP

echo '< table > ';
for ( $row = 0; $row < 10; ++ $row ) {
echo '<tr > ';
for ( $col = 0; $col < 10; ++ $col ) {
echo '<td > ', ( $row * $col ), ' </ td > ';
}
echo ' </tr > ';
}
echo ' </ table > ';

Remarque

le deuxième cas est aussi réalisable en Javascript/jQuery

pourquoi utiliser alors PHP ?
E. Ramat (ULCO-LISIC) Web 20 avril 2015 204 / 209
Les formulaires et PHP
Les données

selon la méthode de soumission d'un formulaire, les données sont stockées

dans des variables spéciales : $_GET et $_POST
ce sont des tableaux associatifs
une entrée du tableau par attribut name du formulaire

Les données multivaluées

si le champ est de type multiple pour les checkbox ou les select alors l'entrée
est un tableau
le nom associé au champ doit comporte des crochets
< select name = " languages [] " multiple >
< option value =" html " > HTML </ option >
< option value =" js " > JavaScript </ option >
< option value =" php " > PHP </ option >
</ select >

foreach ( $_GET [" $languages "] as $language ) {

...
}
E. Ramat (ULCO-LISIC) Web 20 avril 2015 205 / 209
Les bases de données et PHP
PDO

PDO = PHP Data Objects

interface légère d'accès aux bases de données
un driver par type de base de données (mysql, postgresql, . . . )
le langage SQL est utilisé pour les requêtes
le résultat des requêtes SQL est buerisé

Un exemple

$db = new PDO (" mysql : host = localhost ; dbname = boutique " , " toto " , " password_toto " );
$db -> query (" UPDATE product SET id =4 WHERE name =' odroid c3 '" );

php.ini

Ajouter la déclaration du driver dans /etc/php5/cgi/php.ini :

extension=mysql.so

E. Ramat (ULCO-LISIC) Web 20 avril 2015 206 / 209

Les bases de données et PHP
Résultat

les requêtes SELECT produisent des résultats

ces résultats sont buerisés → des enregistrements
ils sont parcourus via la méthode fetch
un enregistrement est un tableau associatif
chaque entrée est un champ

Un exemple

$statement = $db -> prepare ( " SELECT * FROM products " );

$statement -> execute ();
while ( $row = $statement -> fetch ()) {
print_r ( $row );
}
$statement = null ;

print_r

La méthode la plus simple pour visualiser un tableau associatif : print_r(. . . ).

E. Ramat (ULCO-LISIC) Web 20 avril 2015 207 / 209
Les bases de données et PHP

sqlite

sqlite est une base de données légère, compact → un simple chier

disponible de manière intégrée à PHP
une classe et des méthodes dédiées

Un exemple

ouverture de la base de données

$db = new SQLiteDatabase ("/ home / xxx / boutique . sqlite " );

une requête SELECT

$result = $db -> query ( " SELECT * FROM products WHERE id =1 " );
while ( $row = $result -> fetch ()) {
print_r ( $row );
}

E. Ramat (ULCO-LISIC) Web 20 avril 2015 208 / 209

Copyright

Auteur

Éric Ramat [email protected]

Licence

Copyright (C) 2015 - LISIC - ULCO

Permission is granted to copy, distribute and/or modify this document under the
terms of the GNU Free Documentation License, Version 1.2 or any later version
published by the Free Software Foundation ; with no Invariant Sections, no
Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in
the section entitled "GNU Free Documentation License".

E. Ramat (ULCO-LISIC) Web 20 avril 2015 209 / 209