Web IIPart 1

Développement
Web II
Tarek ZLITNI
www.ZLITNI.com
tarek.zlitni@gmail.com
Plan du cours
• Introduction
• Le WWW, HTTP et HTML
• Architecture Client / Serveur
• Partie 1 :HTML 5 & JavaScript
• AJAX (JQUERY)
• Les Servlets
©Tarek ZLITNI - ISIMS Développement Web II 2
1
Introduction
• Ces dernières années, le Web est devenu une source

d’information incontournable.
• Le Web correspond à la réalisation d’un ensemble de services :
• Consulter et échanger des données sous forme de textes
ou d’images,
• Acheter un produit ou un service en ligne(e-commerce).
• Communiquer vi les réseaux sociaux
• Services multimédia en ligne (TV-Replay, streaming en
ligne, Internet TV, web radio,…)
Architecture Client/Serveur
• Les applications développées pour les sites Internet reposent sur le

modèle Client/Serveur.
• Le modèle Client/Serveur a été conçu avant Internet dans le but
d’améliorer la gestion des données :
• Une application Client réside sur une machine locale et accède
aux données d’un ensemble de données tel qu’un (SGBD).
• Lorsque les utilisateurs veulent accéder aux données, ces
applications n’évoluent pas suffisamment pour suivre la
demande. Comme la logique se trouve sur le Client, il doit être
installé sur chaque machine Client.
è La gestion devient donc de plus en plus difficile.
2
• Les termes « Clients » et « Serveur » ne sont pas anodins.

• Le fonctionnement (concept) Client/Serveur est similaire au
rapport existant entre les clients et le serveur d’un
restaurant.
• Le fonctionnement (concept) Client/Serveur est similaire au

rapport existant entre les clients et le serveur d’un restaurant.
Le Serveur répond au Client 1 en

apportant la commande
(Réponse)
Les Client 2 et 3 passent une

commande au serveur (Requête).
3
• Transposé dans le monde informatique :

• Le Client est une application qui s’exécute sur un ordinateur
personnel.
• Le Serveur est une autre application :
• gère des ressources partagées ( Les plats, les tables ),
• s’exécute le plus souvent, sur un ordinateur distant (établit
une relation entre les Clients et les ressources disponibles).
• Lorsque nous accédons à un site Internet, nous utilisons la
technologie Client-Serveur.
• L’accès à un site Internet nécessite les éléments suivants :

• Une application cliente (navigateur Web : Mozilla Firefox,
Google Chrome, Internet Explorer) auquel nous fournissons
l’adresse du site recherché du type http://www.unsite.net.
• Une application serveur (serveur Web : AppacheHTTP
Server, IIS-Internet Information Server,Tomcat),
• Un protocole HTTP.
4
• L’application Cliente envoie une requête au serveur Web
désigné par l’URL (Uniform Resource Locator) .
Requête :
affichez-moi le
site :
www.unsite.com
Client
Serveur
En tapant l’URL www.unsite.net, l’internaute émet

une requête au serveur Web via le navigateur
• Le serveur Web Contacté répond au client en affichant l’ensemble
des informations stockées et organisées sur son disque dur à
l’URL donnée.
Client Réponse:
affichage:
www.unsite.com
Serveur
5
A retenir :
• Un Client est une application (navigateur) qui
se connecte à un autre ordinateur pour obtenir
ou modifier des informations à l’aide de
requêtes.
• Un Serveur est une application située sur un
ordinateur très puissant, capable de gérer un
grand nombre de requêtes simultanément.
• Un Serveur est toujours en attente de requête.
Le WWW
• Le WWW (World Wide Web) est un ensemble mondial de

documents hypertextes et hypermédias placés dans des
fichiers au format spécifique appelés pages HTML
• Une page Web est un fichier de données(fichier contenant du
code HTML) situé sur un ordinateur distant
• Utilisation du protocole Internet HTTP pour télécharger la
page
• Utilisation d’un navigateur pour l’afficher
• Accès à une page Web : adresse
6
Partie 1 : HTML5
& Javascript
HTML 4.01 / XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="design.css" />
<script type=”text/javascript” src=script.js"></script>
</head>
<body>
</body>
7
Html 5
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link href="design.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
Les nouvelles balises

• Les nouveautés de HTML 5:
• Balises sémantiques
• Balises multimlédia
• Balises de formulaires 2.0
8
Balises sémantiques
HTML 4.01 / XHTML 1.0
<div id="header"> <p>Un premier paragraphe</p>
<h1>Mon super site</h1> <p>Un deuxième paragraphe</p>
</div> </div>
<div id="article"> <div id="conclusion">
<h2>Mon super article<h2> <p>Un premier paragraphe</p>
<div id="intro"> </div>
<p>Un premier paragraphe</p> <div id="author">Ecrit par moi-
même</div>
</div>
</div>
<div id="content">
Balises sémantiques
HTML 5
<header> <p>Un premier paragraphe</p>
<h1>Mon super site</h1> <p>Un deuxième paragraphe</p>
<header> </section>
<article> <section>
<h1>Mon super article<h1> <p>Un premier paragraphe</p>
<section> </section>
<p>Un premier paragraphe</p> <footer> Ecrit par moi-
même</footer>
</section>
</article>
<section>
9
Balises multimédia
• Insertion des séquences sonores et vidéo:

• Avant le HTML5, il n’est pas un standard pour lire les fichiers
audio et vidéos dans les pages web.
• Ces fichiers sont lus uniquement avec un plug-in (flash par
exemple).
• La balise <audio> spécifie une méthode standard pour insérer de
l’audio dans la page web.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Votre navigateur ne support pas l’element audio.
</audio>
HTML5 : La vidéo
• La balise <video> spécifie une méthode standard pour insérer de
la vidéo dans la page web.
10
HTML5 : La vidéo
<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne supporte pas la balise video.
</video>
è Plusieurs balises <source> : plusieurs versions de la

vidéo encodée avec différents codecs. Le navigateur
choisit automatiquement le premier format qu'il peut lire
HTML5 : La vidéo
• Les attributs :
• preload="auto"
permet de de spécifier au navigateur de débuter le
téléchargement de la vidéo tout de suite, en anticipant sur le fait
que l'utilisateur lira la vidéo.
• autoplay="true"
comme son nom l'indique, permet de lancer la lecture
automatiquement.
• poster="img.jpg"
permet d'indiquer une image à afficher par défaut dans l'espace
réservé par la vidéo, avant la lecture.
• loop
indique que la lecture doit s'effectuer en boucle.
11
HTML5 : La vidéo
• Les attributs:
• videoHeight / videoWidth
retourne un entier contentant l’hauteur /largeur de la
ressource en pixels CSS, en tenant compte de: les dimensions,
aspect ratio, résolution, etc., comme définit pour le format utilisé
par la ressource.
• Si la propriété readystate de l’élément est HAVE_NOTHING, la valeur
=0.
• height /width
une propriété de type DOMString qui reflète l’ attribute
HTML l’hauteur /largeur, qui spécifie l’hauteur /largeur de l
a zone d’affichage, en pixels CSS.
Les formulaires 2.0

• Avec Html 4, les types de champs n'étaient pas
nombreux.
• HTML5 apporte plus d'une douzaine de nouveaux types.
• HTML5 introduit de nombreuses nouveautés pour les
formulaires pour améliorer l'aide à la saisie et les
contrôles disponibles pour l'utilisateur.
• Plusieurs attributs simples à mettre en place améliorent
la prise en charge des formulaires, tout en se passant de
JavaScript.
12
Les formulaires 2.0
• <input type=
• search
• tel
• email
• url
• date
• number
• range
• color
• ...etc
Les formulaires 2.0

Champs Syntaxe
Date <input type="date" name="d" value=“<?php echo $today?>">
Date et temps <input type="datetime" name="dt" value="<?php echo $now?>">
Time <time>2013-06-27</time>
Nombre <input type="number" name="nombre" value="12345">
13
Les formulaires 2.0
Champs Syntaxe
Month <input type="month" name="holidays">
Week <input type="week" name="int_week">
<input type="datetime-local" name="bdaytime">

datetime-local Note: type="datetime-local" n’est pas supporté par Firefox et
Internet Explorer.
email <input type="email" name="email">
Les formulaires 2.0

Champs Syntaxe
Couleur <input type="color" name="couleur" value="">
Champ de recherche <input type="search" name="" list="datalist" value="">
Data <data value="10">Dix</data>
14
Les formulaires 2.0
Champs Syntaxe
<input type="range" min="-100" max="100" value="0" step="2"

name="power" list="powers">
<datalist id="powers">
<option value="0">
Range
<option value="-30">
<option value="30">
<option value="+50">
</datalist>
Progress <progress id="prog" max=100>
Eléments supprimés
• Les éléments suivants de Html 4 ont été retirés de Html 5
• <acronym> • <frameset>
• <applet> • <noframes>
• <basefont> • <strike>
• <big> • <tt>
• <center>
• <dir>
• <font>
• <frame>
15
Javascript
JavaScript
Principe
• Langage de script objet

• Syntaxe style C / C++ / Java
• Sensible à la casse
• N’est PAS du Java
• Exécuté par le client Web
• Peut être désactivé sur le client
• Nombreux objets pour la manipulation HTML
• Gestion des événements HTML
• Rendre les pages interactives (HTML+CSS+JS)
16
Introduction
HTML et JavaScript
• la page HTML devra TOUJOURS contenir les deux balises

spécifiques et indispensables:
<SCRIPT language="JavaScript">
contenu du script </SCRIPT>
OU bien :
<SCRIPT type="text/JavaScript">
contenu du script </SCRIPT>
Introduction
Utilisation et emplacement
• <SCRIPT>…</SCRIPT> : autant de fois que nécessaire et

n'importe où dans le document HTML.
• On traite la page HTML de haut en bas.
• De façon générale, les fonctions sont placées dans la
section entête (<HEAD> …</HEAD>) du document.
• Ainsi on interprète les scripts, si nécessaire avant que le reste du
document ne soit téléchargé.
17
Introduction
Utilisation et emplacement
• Utilisation de l'attribut «SRC» pour faire référence à l'URL,

i.e. le fichier qui contient le script.
<SCRIPT language="JavaScript" SRC="fichier.js">

</SCRIPT>
• NB.
• js est l’extension du fichier javascript
.
Syntaxe
• La casse est importante: les majuscules et minuscules ne
doivent jamais être interchangées entre elles.
BON : alert(); MAUVAIS: Alert();
• Le caractère point-virgule est utilisé comme séparateur de fin de

ligne mais sa présence n'est pas obligatoire si la ligne ne
comporte qu'une seule instruction.
• Les commentaires simples(sur une ligne) sont indiqués par une

double barre oblique (//).
• Les commentaires qui s'étendent sur plusieurs lignes utilisent /*
et */
18
Exemple
<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">

</script>
</body>
</html>
Variables
• Déclaration de variables facultative
• Variables non typées à la déclaration
var nom_variable ;
• Typage dynamique à l’affectation
• Types gérés:
• Nombres (10, 3.14)
• Booléens (true, false)
• Chaînes ("Salut !", 'Salut !' )
• null
• undefined
19
Structures conditionnelles
Exemple
if (condition)
<script language="JavaScript">
{ var code;
instructions ; code= window.prompt("Entrez le code de 3 chiffres
du produit","");
} if (code.length == 3)
[ else {
document.write ("Le code est bon!");
{
}
instructions ; else
} ] {
document.write("SVP, recommencez car le code \""
+code+ "\" n'est pas valide.");
}
</script>
Structures conditionnelles
Exemple
switch (expression) <script language="JavaScript">
{ var choix;
choix=window.prompt( "Choisissez un code de produit:\n"
case étiquette : +"1 (oranges), 2 (pommes)", "");
switch (choix) {
instructions ;
case "1" :
break ; document.write("Les oranges sont à 1,900 dinars le
case étiquette : kilo.<BR>");
break;
instructions ; case "2" :
break ; document.write("Les pommes sont à 4,500 dinars le
panier.<BR>");
default : break;
default :
instructions ;
document.write("Vous avez tapé un mauvais code<BR>");
} }
document.write("Avez vous besoin d'autres choses
aujourd\'hui?<BR>");
</script>
20
Structures itératives
Exemple
while (condition) <script language="JavaScript">
var choix;
{
choix=window.prompt( "Choisissez un code de produit:\n"
instructions ; +"1 (oranges), 2 (pommes)", "");
switch (choix) {
} case "1" :
document.write("Les oranges sont à 1,900 dinars le
kilo.<BR>");
do break;
case "2" :
{ document.write("Les pommes sont à 4,500 dinars le
panier.<BR>");
instructions ;
break;
} default :
document.write("Vous avez tapé un mauvais code<BR>");
while (condition) ; }
document.write("Avez vous besoin d'autres choses
aujourd\'hui?<BR>");
</script>
Fonctions
• Valeur de retour non typée
• Arguments non typés
// Déclaration
function ma_fonction(arguments)
{
instructions ;
return quelque_chose; // ou pas…
}
ma_fonction(12) ; // Appel
21
Entrée et sortie de données avec
JavaScript
• 3 types de boites de messages
• Méthode alert()
• sert à afficher à l’utilisateur des informations simples de type texte.
Une fois que ce dernier a lu le message, il doit cliquer sur OK pour
faire disparaître la boîte
• Méthode confirm()
• permet à l’utilisateur de choisir entre les boutons OK et Annuler.
• Méthode prompt()
• La méthode prompt() permet à l’utilisateur de taper son propre
message en réponse à la question posée
• La méthode document.write permet d ’écrire du code

HTML dans la page WEB
Les Objets
• Les objets de JavaScript, sont soit des entités pré définies du
langage, soit créés par le programmeur.
• Par exemple, le navigateur est un objet qui s'appelle "navigator".
• La fenêtre du navigateur se nomme "window"
• La page HTML est un autre objet, que l'on appelle "document".
• Un formulaire à l'intérieur d'un "document", est aussi un objet.
• Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "link". etc...
• Les objets javascript peuvent réagir à des "Evénements".
• Tous les navigateurs ne supportent pas les mêmes objets
• Accès aux propriétés d’un objet

• voiture.couleur.value
• voiture.couleur.value = verte
22
Les objets
• L’opérateur New
• L'opérateur new est utilisé pour créer une nouvelle
instance ou un nouveau type d'objet défini par
l'utilisateur ou de l'un des types d'objets prédéfinis,
Array, Boolean, Date, Function, Image, Number, Object,
ou String.
• nouvel_objet = new type_objet(parametres)
texte = new String("Une chaîne de caractère");
Les objets
• L’opérateur Typeof
• L'opérateur typeof renvoie une chaîne de caractères indiquant
quel est le type de l'opérande.
var i = 1;
typeof i; //retourne number
var titre="Les raisins de la colère";
typeof titre; //retourne string
var jour = new Date();
typeof jour; //retourne object
var choix = true; typeof choix; //retourne boolean
var cas = null; typeof cas; //retourne object
typeof parseFloat; //retourne function
typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*,
Opera 5.*
typeof Math; //retourne function NS 3.*, Opera 3.*
23
L'objet String
• Propriété :
• length : retourne la longueur de la chaîne de caractères;
• Méthodes :
• anchor( ) : formate la chaîne avec la balise <A> nommée;
• b( ) : formate la chaîne avec la balise <B>;
• big( ) : formate la chaîne avec la balise <BIG>;
• charAt( ) : renvoie le caractère se trouvant à une certaine position;
• charCodeAt( ) : renvoie le code du caractère se trouvant à une
certaine position;
• concat( ) : permet de concaténer 2 chaînes de caractères;
• fromCharCode( ) : renvoie le caractère associé au code;
• indexOf( ) : permet de trouver l'indice d'occurrence d'un caractère
dans une chaîne;
L'objet String
• italics( ) : formate la chaîne avec la balise <I>;
• lastIndexOf( ) : permet de trouver le dernier indice d'occurrence
d'un caractère;
• link( ) : formate la chaîne avec la balise <A> pour permettre de
faire un lien;
• slice( ) : retourne une portion de la chaîne;
• substr( ) : retourne une portion de la chaîne;
• substring( ) : retourne une portion de la chaîne;
• toLowerCase( ) : permet de passer toute la chaîne en minuscule;
• toUpperCase( ) : permet de passer toute la chaîne en majuscules;
24
Chaînes : Exemples
var s = "Bon anniversaire Benjamin" ;
document.write(s.charAt(2)) ;
è n
document.write(s.charCodeAt(2)) ;
è 110
document.write(s.concat(" du groupe C12")) ;
è Bon anniversaire Benjamin du groupe C12
document.write(String.fromCharCode( 49, 50)) ;
è 12
document.write(s.indexOf("Benjamin")) ;
è 17
document.write(s.lastIndexOf("a")) ;
è 21
document.write(s.match(/Benjamin$/)) ;
è Benjamin (null si non trouvé)
Chaînes : Exemples
document.write(s.slice( 17)) ;
è Benjamin
document.write(s.split( " ")) ;

è Bon,anniversaire,Benjamin
document.write(s.substr( 4, 12)) ;
è anniversaire
document.write(s.substring( 4, 16)) ;
è anniversaire
document.write(s.toUpperCase()+s.toLowerCase()) ;
è BON ANNIVERSAIRE BENJAMINbon anniversaire benjamin

50
25
L'objet Array
• Propriété :
• length : retourne le nombre d'éléments du tableau;
• Méthodes :
• concat( ) : permet de concaténer 2 tableaux;
• join( ) : converti un tableau en chaîne de caractères;
• reverse( ) : inverse le classement des éléménts du tableau;
• slice( ) : retourne une section du tableau;
• sort( ) : permet le classement des éléments du tableau;
L'objet Array
• Objet Array
• Déclaration
var tab1 = new Array(taille) ;
var tab2 = new Array(1, "a", 9, …) ;
index è 0 1 2 …
• Utilisation
window.alert(tab2[0]) ; // 1
tab2[2] = 6 // 6 remplace 9
• Accroissement automatique de la taille
var tab1 = new Array(2) ;
tab1[200] = 5 ;
26
L'objet Array
• Parcours
var tab2 = new Array(1, "a", 9) ;
tab2[200] = 12 ;
for (i in tab2)
window.alert("tab2[" + i + "] = "
+ tab2[i]) ;
// tab2[0] = 1
// tab2[1] = a
// tab2[2] = 9
// tab2[200] = 12
L'objet Math
• Propriétés :
• E : renvoie la valeur de la constante d'Euler (~2.718);
• LN2 : renvoie le logarithme népérien de 2 (~0.693);
• LN10 : renvoie le logarithme népérien de 10 (~2.302);
• LOG2E : renvoie le logarithme en base 2 de e (~1.442);
• LOG10E : renvoie le logarithme en base 10 de e (~0.434);
• PI : renvoie la valeur du nombre pi (~3.14159);
• SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
• SQRT2 : renvoie la racine carrée de 2 (~1.414);
27
L'objet Math
• Méthodes :
• abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ),
max( ), min( ), sqrt( ) sont les opérations mathématiques
habituelles;
• atan2( ) : retourne la valeur radian de l'angle entre l'axe des
abscisses et un point;
• ceil( ) : retourne le plus petit entier supérieur à un nombre;
• floor( ) : retourne le plus grand entier inférieur à un nombre;
• pow( ) : retourne le résultat d'un nombre mis à une certaine
puissance;
• random( ) : retourne un nombre aléatoire entre 0 et 1;
• round( ) : arrondi un nombre à l'entier le plus proche.
Objet Math : Exemples

document.write(115.04+15) ;
è 130.04000000000002
document.write(Math.PI) ;
è 3.141592653589793
document.write(Math.abs( -12.34)) ;
è 12.34
document.write(Math.floor( 12.54)) ;
è 12
document.write(Math.round( 12.54)) ;
è 13
document.write(Math.ceil( 12.54)) ;
è 13
document.write(Math.random()) ;
è 0.394555831655689
28
L'objet Date
• Propriété : aucune;
• Méthodes :
• getFullYear( ), getYear( ), getMonth( ), getDay( ), getDate(),
getHours( ), getMinutes( ), getSeconds( ), getMilliseconds( ):
retournent respectivement l'année complète, l'année
(2chiffres), le mois, le jour de la semaine, le jour du mois,
l'heure, les minutes, les secondes et les millisecondes stockés
dans l'objet Date;
• getUTCFullYear( ), getUTCYear( ), … retournent respectivement
l'année complète, l'année (2chiffres), … stockés dans l'objet
Date en temps universel;
• setFullYear( ), setYear( ), … remplacent respectivement l'année
complète, l'année (2chiffres), … dans l'objet Date;
L'objet Date
• setUTCFullYear( ), setUTCYear( ), … remplacent l'année

complète, l'année (2chiffres), … dans l'objet Date en temps
universel;
• getTime( ) : retourne le temps stocké dans l'objet Date;
• getTimezoneOffset( ) : retourne la différence entre l'heure du
client et le temps universel;
• toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la
date en chaîne de caractère selon la convention GMT, selon la
convention locale ou en temps universel;
29
Dates : Exemples
var today = new Date()
document.write(today) ; Tue Nov 02 2010 00:11:36 GMT+0100
var birthday = new Date("December 17, 1995
03:24:00")
document.write(birthday) ; Sun Dec 17 1995 03:24:00 GMT+0100
birthday = new Date(95,11,17)
birthday = new Date(95,11,17,3,24,0)
document.write(birthday.getDay()) ; 0
document.write(birthday.getDate()) ; 17
birthday.setDate(25) ;
document.write(birthday) ; Mon Dec 25 1995 03:24:00 GMT+0100
Dates : Exemples
document.write(birthday.getMonth()) ; 11
birthday.setMonth(10) ;
Sat Nov 25 1995 03:24:00 GMT+0100
document.write(birthday) ;
document.write(birthday.getYear()) ; 95
birthday.setYear(96) ;
Mon Nov 25 1996 03:24:00 GMT+0100
document.write(birthday.getFullYear()) ; 1996
birthday.setFullYear(2010) ;
Thu Nov 25 2010 03:24:00 GMT+0100
30
Images : Propriétés & Méthodes
• Propriétés
• complete
• width
• height
• name
• src
• …
• Méthodes
• constructeur
• Image()
• Image(largeur, hauteur)
Images: Exemples
<script type="text/javascript">
// Une image
rouge = new Image(100, 100) ;
rouge.src = 'rouge.gif' ; // Préchargement
// Une autre image

vert = new Image(100, 100) ;
vert.src = 'vert.gif' ; // Préchargement
// Modification de la 13e image de la page Web

document.images[12].src = rouge.src ;
// Modification de la 15e image de la page Web

document.images[14].src = rouge.src ;
</script>
31
Les objets du navigateur
• L'objet le plus haut dans la hiérarchie est window qui
correspond à la fenêtre même du navigateur.
• L'objet document fait référence au contenu de la fenêtre.
• document regroupe au sein de propriétés l'ensemble des
éléments HTML présents sur la page. Pour atteindre ces
différents éléments, nous utiliserons :
• soit des méthodes propres à l'objet document, comme la
méthode getElementById( ), qui permet de trouver
l'élément en fonction de son identifiant (ID);
• soit des collections d'objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.
Les objets du navigateur
32
L'objet window
• Propriétés : (accessibles avec IE et N)
• closed : indique que la fenêtre a été fermée;
• defaultStatus : indique le message par défaut dans la barre
de status;
• document : retourne l'objet document de la fenêtre;
• frames : retourne la collection de cadres dans la fenêtre;
• history : retourne l'historique de la session de navigation;
• location : retourne l'adresse actuellement visitée;
• name : indique le nom de la fenêtre;
L'objet window
• navigator : retourne le navigateur utilisé;
• opener : retourne l'objet window qui a créé la fenêtre en
cours;
• parent : retourne l'objet window immédiatemment
supérieur dans la hiérarchie;
• self : retourne l'objet window correspondant à la fenêtre en
cours;
• status : indique le message affiché dans la barre de status;
• top : retourne l'objet window le plus haut dans la hiérarchie.
33
L'objet window
• Méthodes :
• blur( ) : enlève le focus de la fenêtre;
• close( ) : ferme la fenêtre;
• focus( ) : place le focus sur la fenêtre;
• moveBy( ) : déplace d'une distance;
• moveTo( ) : déplace la fenêtre vers un point spécifié;
• open( ) : ouvre une nouvelle fenêtre;
• print( ) : imprime le contenu de la fenêtre;
• resizeBy( ) : redimensionne d'un certain rapport;
• resizeTo( ) : redimensionne la fenêtre;
• setTimeout( ) : évalue une chaîne de caractère après un
certain laps de temps.
L'objet document
• Propriétés :
• applets : retourne la collection d'applets java présente dans
le document;
• cookie : permet de stocker un cookie;
• domain : indique le nom de domaine du serveur ayant
apporté le document;
• forms : retourne la collection de formulaires présents dans le
document;
• images : retourne la collection d'images présentes dans le
document;
• links : retourne la collection de liens présents dans le
document;
34
L'objet document
• referrer : indique l'adresse de la page précédente;

• title : indique le titre du document.
• Méthodes :
• close( ) : ferme le document en écriture;
• open( ) : ouvre le document en écriture;
• write( ) : écrit dans le document;
• writeln( ) : écrit dans le document et effectue un
retour à la ligne
L'objet navigator
• Propriétés
• appName : application (Netscape, Internet Explorer)
• appVersion : numero de version.
• platform : système d’exploitation (Win32)
• plugins
• language
• mimeTypes
• JavaEnabled()
35
Nommage des objets-éléments
• Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom
• Pour pouvoir distinguer les différents objets-éléments d’une page web,

il suffit de leur donner un nom à travers de l’attribut NAME
• <Table Name=« tableau1 »>…
• <Table Name=« tableau2 »>…
• <Form Name = « formulaire1 »>…
• <Form Name =« formulaire2 »>…
• <Textarea Name =« texte1»>…
• Dans le cas où l’objet serait unique alors pas besoin de nom pour
désigner cet objet
• Exemple : le cas de BODY(une seul BODY par document), DOCUMENT
(un seul DOCUMENT par fenêtre)
Manipulation des objets

• Pour adresser un objet, il ne suffit pas de donner son nom : il faut aussi préciser
son « chemin d’accès » dans l’arborescence de la structure
<HTML><BODY
onLoad="window.document.formulaire.zone.value='Bonj
our';">
<FORM name="formulaire"><INPUT NAME="zone"
TYPE="text">
</FORM></BODY></HTML>
• Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la fenêtre

courante
• Dans le cas de cadres (frames), il est pertinent de donner le nom de la fenêtre
• Il est possible aussi d’omettre window.document : l’adressage réussi puisqu’il
n’y a qu’un seul objet « document» dans la fenêtre
36
Contrôle de formulaires
• Vérifier la cohérence de la saisie
• Contrôles sur le client
• Évite les transmissions client / serveur
• Contrôles possibles:
• Présence de valeur
• Numérique / Chaîne
• Expressions régulières
• Événement onSubmit
Contrôle de formulaires
<html><head><title>Contrôle</title>
function verif() {
if (document.formu.txt.value != '')
return window.confirm('Envoyer ?') ;
return false ; }
</script></head><body>
<form name="formu" action= "…" method="GET"
onSubmit="return verif() ;">
<input type="text" name="txt">
<input type="submit" value="Envoyer">
</form></body></html>
37
Formulaires : Exemple
<form name='formu' onSubmit='return verif(this);'>
<input type='text' name='texte'><br>
<select name='sel'>
<option>?
<option value=1>Un
<option value=2>Deux
</select><br>
<input type='radio' name='rad' id='rad1'>
<label for='rad1'>oui</label>
<input type='radio' name='rad' id='rad2'>
<label for='rad2'>non</label><br>
<input type='checkbox' name='chk' id='chk1'>
<label for='chk1'>OK</label><br>
<input type='submit' value='Envoyer'>
</form>
Formulaires : accès aux champs

<form name='formu' onSubmit='return verif( this);'>
<input type='text' name='texte'> ...
function verif(f) {
... f.texte.value ; }
</script>
<form name='formu' onSubmit='return verif(); '>

<input type='text' name='texte'> ...
function verif() {
... document.formu.texte.value ;
... document.forms[0].elements[0].value ;
... document.forms[ "formu"].elements["texte"].value ; }
</script>
38
Formulaires : Exemple
function verif(f)
{
window.alert(f.texte.value) ;
window.alert(f.sel.selectedIndex) ;
window.alert(f.sel[f.sel.selectedIndex].text) ;
window.alert(f.sel[f.sel.selectedIndex].value) ;
window.alert(f.rad[0].checked) ;
window.alert(f.chk.checked) ;
return false ;
}
</script>
Les événements
• Javascript est dépendant des événements
• se produisent lors d'actions diverses sur les objets d'un
document HTML.
• onLoad;
• onClick
• onMouseover
• onMouseout
• ...
• Il est possible de baser l’exécution de fonctions sur des

événements
39
Les événements
• Evénement onLoad
• Se produit lorsque une page web est chargée dans la fenêtre
du navigateur
• Toute la page (y compris les images qu’elle contient si leur

chargement est prévu) doit avoir été chargée pour qu’il ait lieu
• Cet événement peut être associé à une image seulement ;

auquel cas, il se produit une fois son chargement terminé
<HTML><BODY onLoad="alert('page chargée');">
Exemple de l'événement onLoad
</BODY></HTML>
Les événements
• Evénement onClick
• Se produit lorsque l’utilisateur clique sur un élément spécifique
dans une page, comme un lien hypertexte, une image, un bouton,
du texte, etc.
• Ces éléments sont capables de répondre séparément à cet
événement
• Il peut également être déclenché lorsque l’utilisateur clique
n’importe où sur la page s’il a été associé non pas à un élément
spécifique, mais à l’élément body tout entier
<HTML><BODY>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY></HTML>
40
Les événements
• Événement onMouseover
• Analogue à onClick sauf qu’il suffit que l’utilisateur place le
pointeur de sa souris sur l’un des éléments précités (lien
hypertexte, image, bouton, texte, etc.) pour qu’il ait lieu
• Événement onMouseout
• A l’inverse de onMouseover, cet événement se produit lorsque
le pointeur de la souris quitte la zone de sélection d’un
élément.
<HTML><BODY>
<IMG SRC="image.gif"
onMouseOver="src='image2.gif';"
onMouseOut="src='image.gif';">
</BODY></HTML>
Gestion des événements

• Interactions HTML / JavaScript
• Possibilité d'associer du code JavaScript à certains événements
dans la page Web
• Evénements
• OnMouseOver
• OnMouseOut
• OnClick
• OnKeyDown
• OnFocus
• OnBlur
• …
41
Mise en place des événements
<a href='URI_cible'
onMouseOver="code_javascript1"
onMouseOut="code_javascript2">Support</a>
<a href='URI_cible'
onMouseOver="a=1"
onMouseOut="b=2">Support</a>
<a href='URI_cible'
onMouseOver="allumer()"
onMouseOut="eteindre()">Support</a>
Événement onKeyUp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>onKeyUp</title>
<script type='text/javascript' language='JavaScript'>
<!—
function maj() {
document.f.mail.value =
document.f.prenom.value.toLowerCase()+'.'
+document.f.nom.value.toLowerCase() ; }
// -->
</script>
</head> <body>
<form name='f'>
Nom <input type='text' name='nom' onKeyUp='maj()'><br>
Prenom <input type='text' name='prenom' onKeyUp='maj()'><br>
Login <input type='text' name='mail' disabled>
</form>
</body> </html>
42
Événement onMouseOver / Out
<html> <head> <title>Rollover</title>
<!—
function change(image, source) {
document.images[image].src = source; }
// -->
Tableau des images du document. Accès
</script> par leur nom ou leur indice
</head>
<body>
<a href='#'
onMouseOver="change('image1', 'vert.gif')"
onMouseOut="change('image1', 'rouge.gif')">
<img name='image1' width='100' height='100'
src='rouge.gif' alt='disque'></a>
</body>
</html>

<html> <head> <title>Rollover</title>
function change(image, src) {
document.images[image].src = src ; }
</script> </head> <body> <ul>
<li><a href='#' onMouseOver="change('image1', 'vert.gif')"
onMouseOut="change('image1', 'rouge.gif')">Disque 1</a>
onMouseOut="change('image2', 'rouge.gif')">Disque 2</a>
onMouseOut="change('image3', 'rouge.gif')">Disque 3</a> </ul>
<img name='image1' width='100' height='100' src='rouge.gif'
alt='disque'>
alt='disque'>
alt='disque'>
</body> </html>
43
Boîte à outils
// Détection du navigateur
// Netscape 4
var nava = document.layers ? true : false ;
// IE, Firefox, Netscape 6, Opera
var dom = document.getElementById ? true : false ;
// IE, Opera
var iex = document.all ? true : false ;
// Récupérer un objet identifié
function getobj(id)
{
var obj ;
if (nava) { obj=document.id }
else if (dom) { obj=document.getElementById(id) }
else if (iex) { obj=id }
return obj ;
}
Boîte à outils
// Récupérer le style d'un objet identifié
function getstyle(id)
{
var obj ;
if (nava)
{ obj=document.id }
else if (dom)
{ obj=document.getElementById(id).style }
else if (iex)
{ obj=id.style }
return obj ;
}
44
Boîte à outils
// Écrire un contenu HTML dans un objet identifié
function writecontent(obj, content)
{
if (nava) {
var objet=getstyle(obj) ;
objet.document.write(content) ;
objet.document.close() ;
}
else if (dom) {
document.getElementById(obj).innerHTML=content ;
}
else if (iex) {
document.all(obj).innerHTML=content ;
}
}

<!DOCTYPE html PUBLIC "-//W3C//DTDfunction getobj(id)
HTML 4.01 Transitional//EN">
function getstyle(id)
<html> <head> <title>Image cliquable</title>
function writecontent(obj, content)
<script type='text/javascript' language='JavaScript'
src='outils.js'> </script> </head> <body>
<h1>Survolez mon image pour trouver les zones cliquables ;-) </h1>
<img src='formes.gif' width='256' height='256' alt="L'image sur
laquelle il faut cliquer" usemap='#map'>
<map name='map'>
<area href='#' alt='Cercle' title='Cercle' shape='circle'
coords='94,67,49' onMouseOver="writecontent('info', 'Cercle')"
onMouseOut="writecontent('info', '')">
<area href='#' alt='Rectangle' title='Rectangle' shape='rect'
coords='171,20,233,150' onMouseOver="writecontent('info',
'Rectangle')" onMouseOut="writecontent('info', '')">
<area href='#' alt='Etoile' title='Etoile' shape='poly'
coords='116,159,128,180,151,185,136,202,138,227,116,217,94,227,
96,203,80,184,103,180' onMouseOver="writecontent('info',
'Etoile')" onMouseOut="writecontent('info', '')">
</map> <span id='info'></span>
</body> </html>
45
Modification dynamique de style
function getobj(id)
<html> <head> <style type'text/css'>  </script>
<title>Cache-cache</title> </head>
<body>
<div class='cache_cache'>
<a href="#" onclick="cache_cache('div1')" >montrer / cacher</a>
</div>
<div id='div1' class='visible'> Texte Texte Texte Texte </div>
</body> </html>
Modification dynamique de contenu

function getobj(id)
<html> <head> <style type='text/css'>  </script>
<title>Cache-cache</title> </head> <body>
<div class='cache_cache'>
<a href="#" onClick="cache_cache(this, 'div1')">cacher</a> </div>
<div id='div1' class='visible'> Texte Texte Texte Texte </div>
</body> </html>
46
Relations entre code HTML et DOM
• Deux visions, normalement concordantes :

• Le code HTML produit par le concepteur
• L’interprétation qui en faite par le navigateur
• Discordances possibles :
• Erreurs dans le code (code non valide)
• Balises non supportées (HTML 5, par exemple)
• Modifications de la page par JavaScript
• Comment explorer l’état réel de l’interprétation du code

HTML / JavaScript par la navigateur ?
Solutions pour modifier le DOM
• innerHTML
• Construire une chaîne de caractères contenant du code HTML
• Affecter cette chaîne de caractères à l’attribut innerHTML d’un
élément de la page
• Le navigateur interprète le contenu de la chaîne de caractères
affectée pour modifier la structure du document
• DOM « pur »
• Construire de nouveaux éléments logiques du document avec
des méthodes JS
• Construire les liens de parenté entre ces éléments
47
innerHTML : exemple
• Identifier un élément HTML
<div id="un_id"></div>
• Accéder à un élément
e = document.getElementById("un_id");
• Construire une chaîne contenant du HTML

s = "Voici <b>un texte</b>";
• Modifier le contenu de l’élément

e.innerHTML = s;
• Interprétation « automatique » par le navigateur du nouveau contenu pour

modifier le document
DOM « pur » : exemple

div
id="un_id"
• Identifier un élément HTML

Voici b
<div id="un_id"></div>
• Accéder à un élément
e = document.getElementById("un_id"); un texte
• Créer un nœud de type « texte »
t1 = document.createTextNode('Voici ');
t2 = document.createTextNode('un texte');
• Créer un nouveau nœud de type « balise »
b = document.createElement('b');
• Construire des liens de parenté
e.appendChild(t1);
b.appendChild(t2); e.appendChild(b);
48
DOM « pur » : exemple 2
<body>
<div><p id="myP">Un peu de texte <a>et un lien</a></p></div>
<script>
var newLink = document.createElement('a');
newLink.id = ‘ABC';
newLink.href = 'http://www.abc.com';
newLink.title = 'Découvrez le Site ABC!';
newLink.setAttribute('tabindex', '10');
document.getElementById('myP').appendChild(newLink);
var newLinkText = document.createTextNode("Le Site du ABC");

newLink.appendChild(newLinkText);
</script>
</body>
Cloner un élément
cloneNode(): Cette méthode requiert un paramètre booléen ( true ou false) : si
vous désirez cloner le nœud avec (true) ou sans (false) ses enfants et ses
différents attributs.
• Exemple
// On va cloner un élément créé :
var hr1 = document.createElement('hr');
var hr2 = hr1.cloneNode(false); // Il n'a pas d'enfants…
// Ici, on clone un élément existant :

var paragraph1 = document.getElementById('myP');
var paragraph2 = paragraph1.cloneNode(true);
// Et attention, l'élément est cloné, mais pas « inséré » tant que l'on n'a pas appelé
appendChild() :
paragraph1.parentNode.appendChild(paragraph2);
49
Remplacer un élément par un autre
replaceChild(). Cette méthode accepte deux paramètres : le premier est le nouvel
élément, et le deuxième est l'élément à remplacer
• Exemple
<body>
<div>
<p id="myP">Un peu de texte <a>et un lien</a></p>
</div>
<script>
var link = document.getElementsByTagName('a')[0];
var newLabel= document.createTextNode('et un hyperlien');
link.replaceChild(newLabel, link.firstChild);
</script>
</body>
Supprimer un élément
removeChild(): Cette méthode prend en paramètre le nœud
enfant à retirer.
• Exemple
var link = document.getElementsByTagName('a')[0];
var oldLink = link.parentNode.removeChild(link); // On

supprime l'élément et on le garde en stock
document.body.appendChild(oldLink); // On réintègre ensuite

l'élément supprimé où on veut et quand on veut
50
Autres actions
• Vérifier la présence d'éléments enfants
hasChildNodes(): Il suffit d'utiliser cette méthode sur l'élément de
votre choix ; si cet élément possède au moins un enfant, la méthode
renverra true :
• Insérer à la bonne place : insertBefore()
La méthode 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é.
<script>
var paragraph = document.getElementsByTagName('p')[0];
var emphasis = document.createElement('em'),
emphasisText = document.createTextNode(' en emphase légère ');
emphasis.appendChild(emphasisText);
paragraph.insertBefore(emphasis, paragraph.lastChild);
</script>
Autres actions
• Vérifier la présence d'éléments enfants
hasChildNodes(): Il suffit d'utiliser cette méthode sur l'élément de
votre choix ; si cet élément possède au moins un enfant, la méthode
renverra true :
• Insérer à la bonne place : insertBefore()
La méthode 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é.
<script>
var paragraph = document.getElementsByTagName('p')[0];
var emphasis = document.createElement('em'),
emphasisText = document.createTextNode(' en emphase légère ');
emphasis.appendChild(emphasisText);
paragraph.insertBefore(emphasis, paragraph.lastChild);
</script>
51

Web IIPart 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web IIPart 1

Transféré par

Droits d'auteur :

Formats disponibles

Développement

©Tarek ZLITNI - ISIMS Développement Web II 2

• Ces dernières années, le Web est devenu une source

©Tarek ZLITNI - ISIMS Développement Web II 3

• Les applications développées pour les sites Internet reposent sur le

©Tarek ZLITNI - ISIMS Développement Web II 4

• Les termes « Clients » et « Serveur » ne sont pas anodins.

©Tarek ZLITNI - ISIMS Développement Web II 5

• Le fonctionnement (concept) Client/Serveur est similaire au

Le Serveur répond au Client 1 en

Les Client 2 et 3 passent une

©Tarek ZLITNI - ISIMS Développement Web II 6

• Transposé dans le monde informatique :

©Tarek ZLITNI - ISIMS Développement Web II 7

• L’accès à un site Internet nécessite les éléments suivants :

©Tarek ZLITNI - ISIMS Développement Web II 8

En tapant l’URL www.unsite.net, l’internaute émet

©Tarek ZLITNI - ISIMS Développement Web II 9

©Tarek ZLITNI - ISIMS Développement Web II 11

• Le WWW (World Wide Web) est un ensemble mondial de

©Tarek ZLITNI - ISIMS Développement Web II 12

HTML 4.01 / XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

©Tarek ZLITNI - ISIMS Développement Web II 14

©Tarek ZLITNI - ISIMS Développement Web II 15

Les nouvelles balises

©Tarek ZLITNI - ISIMS Développement Web II 16

©Tarek ZLITNI - ISIMS Développement Web II 17

©Tarek ZLITNI - ISIMS Développement Web II 18

• Insertion des séquences sonores et vidéo:

©Tarek ZLITNI - ISIMS Développement Web II 19

©Tarek ZLITNI - ISIMS Développement Web II 20

<video width="320" height="240" autoplay>

è Plusieurs balises <source> : plusieurs versions de la

©Tarek ZLITNI - ISIMS Développement Web II 21

Les formulaires 2.0

©Tarek ZLITNI - ISIMS Développement Web II 24

©Tarek ZLITNI - ISIMS Développement Web II 25

Les formulaires 2.0

Date <input type="date" name="d" value=“<?php echo $today?>">

Date et temps <input type="datetime" name="dt" value="<?php echo $now?>">

Nombre <input type="number" name="nombre" value="12345">

©Tarek ZLITNI - ISIMS Développement Web II 26

Month <input type="month" name="holidays">

Week <input type="week" name="int_week">

<input type="datetime-local" name="bdaytime">

email <input type="email" name="email">

©Tarek ZLITNI - ISIMS Développement Web II 27

Les formulaires 2.0

Couleur <input type="color" name="couleur" value="">

Champ de recherche <input type="search" name="" list="datalist" value="">

Data <data value="10">Dix</data>

©Tarek ZLITNI - ISIMS Développement Web II 28

<input type="range" min="-100" max="100" value="0" step="2"

Progress <progress id="prog" max=100>

©Tarek ZLITNI - ISIMS Développement Web II 29

©Tarek ZLITNI - ISIMS Développement Web II 30

• Langage de script objet

©Tarek ZLITNI - ISIMS Développement Web II 32

• la page HTML devra TOUJOURS contenir les deux balises

©Tarek ZLITNI - ISIMS Développement Web II 33

• <SCRIPT>…</SCRIPT> : autant de fois que nécessaire et

©Tarek ZLITNI - ISIMS Développement Web II 34