Développement Web II - ZLITNI · 2 ©TarekZLITNI 3-ISIMS Développement Web II Introduction •...

1

Développement Web II

Tarek ZLITNIwww.ZLITNI.com

[email protected]

©Tarek ZLITNI - ISIMS Développement Web II 2

Plan du cours

• Introduction

• Le WWW, HTTP et HTML

• Architecture Client / Serveur

• Partie 1 :HTML 5 & JavaScript

• AJAX (JQUERY)

• Les Servlets

http://www.ZLITNI.com

mailto:[email protected]

2


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,…)


• Les applications développées pour les sites Internet reposent sur lemodèle Client/Serveur.

• Le modèle Client/Serveur a été conçu avant Internet dans le butd’améliorer la gestion des données :

• Une application Client réside sur une machine locale et accèdeaux données d’un ensemble de données tel qu’un (SGBD).

• Lorsque les utilisateurs veulent accéder aux données, cesapplications n’évoluent pas suffisamment pour suivre lademande. Comme la logique se trouve sur le Client, il doit êtreinstallé sur chaque machine Client.

è La gestion devient donc de plus en plus difficile.

Architecture Client/Serveur

3


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

• Le fonctionnement (concept) Client/Serveur est similaire aurapport existant entre les clients et le serveur d’unrestaurant.



Le Serveur répond au Client 1 enapportant la commande(Réponse)

Les Client 2 et 3 passent unecommande au serveur (Requête).

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


4


• Transposé dans le monde informatique :

• Le Client est une application qui s’exécute sur un ordinateurpersonnel.

• 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 (établitune relation entre les Clients et les ressources disponibles).

• Lorsque nous accédons à un site Internet, nous utilisons latechnologie 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 fournissonsl’adresse du site recherché du type http://www.unsite.net.

• Une application serveur (serveur Web : AppacheHTTPServer, IIS-Internet Information Server,Tomcat),

• Un protocole HTTP.


http://www.unsite.net

5


• L’application Cliente envoie une requête au serveur Webdésigné par l’URL (Uniform Resource Locator) .

En tapant l’URL www.unsite.net, l’internaute émetune requête au serveur Web via le navigateur

Requête : affichez-moi le

site :www.unsite.com

Client

Serveur



• Le serveur Web Contacté répond au client en affichant l’ensembledes informations stockées et organisées sur son disque dur àl’URL donnée.

Réponse: affichage:

www.unsite.com

Client

Serveur


http://www.unsite.net

http://www.unsite.com

http://www.unsite.com

6


A retenir :• Un Client est une application (navigateur) qui

se connecte à un autre ordinateur pour obtenirou modifier des informations à l’aide derequêtes.

• Un Serveur est une application située sur unordinateur très puissant, capable de gérer ungrand 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 dedocuments hypertextes et hypermédias placés dans desfichiers au format spécifique appelés pages HTML

• Une page Web est un fichier de données(fichier contenant ducode HTML) situé sur un ordinateur distant

• Utilisation du protocole Internet HTTP pour télécharger lapage

• Utilisation d’un navigateur pour l’afficher

• Accès à une page Web : adresse

7

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>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/1999/xhtml

8


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

9


Balises sémantiques

<div id="header">

<h1>Mon super site</h1>

</div>

<div id="article">

<h2>Mon super article<h2>

<div id="intro">

<p>Un premier paragraphe</p>

</div>

<div id="content">


<p>Un deuxième paragraphe</p>

</div>

<div id="conclusion">


</div>

<div id="author">Ecrit par moi-même</div>

</div>

HTML 4.01 / XHTML 1.0


Balises sémantiques

<header>

<h1>Mon super site</h1>

<header>

<article>

<h1>Mon super article<h1>

<section>


</section>

<section>


<p>Un deuxième paragraphe</p>

</section>

<section>


</section>

<footer> Ecrit par moi-même</footer>

</article>

HTML 5

10


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>


• La balise <video> spécifie une méthode standard pour insérer de la vidéo dans la page web.

HTML5 : La vidéo

11


<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.

HTML5 : La vidéo

12


• 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 la zone d’affichage, en pixels CSS.

HTML5 : La vidéo


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 lesformulaires pour améliorer l'aide à la saisie et lescontrôles disponibles pour l'utilisateur.

• Plusieurs attributs simples à mettre en place améliorentla prise en charge des formulaires, tout en se passant deJavaScript.

13


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">

14


Les formulaires 2.0

Champs Syntaxe

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

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

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

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>

15


Les formulaires 2.0

Champs Syntaxe

Range

<input type="range" min="-100" max="100" value="0" step="2" name="power" list="powers"><datalist id="powers"><option value="0"><option value="-30"><option value="30"><option value="+50"></datalist>

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


Eléments supprimés

• <acronym>

• <applet>

• <basefont>

• <big>

• <center>

• <dir>

• <font>

• <frame>

• <frameset>

• <noframes>

• <strike>

• <tt>

• Les éléments suivants de Html 4 ont été retirés de Html 5

16

Javascript


JavaScript

• 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)

Principe

17


Introduction

• la page HTML devra TOUJOURS contenir les deux balises spécifiques et indispensables:

HTML et JavaScript

<SCRIPT language="JavaScript"> contenu du script </SCRIPT>

<SCRIPT type="text/JavaScript"> contenu du script </SCRIPT>

OU bien :


Introduction

• <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é.

Utilisation et emplacement

18


Introduction

• Utilisation de l'attribut «SRC» pour faire référence à l'URL, i.e. le fichier qui contient le script.

• NB.

• js est l’extension du fichier javascript

.

Utilisation et emplacement

<SCRIPT language="JavaScript" SRC="fichier.js"> </SCRIPT>


Syntaxe

• La casse est importante: les majuscules et minuscules nedoivent jamais être interchangées entre elles.

BON : alert(); MAUVAIS: Alert();

• Le caractère point-virgule est utilisé comme séparateur de fin deligne mais sa présence n'est pas obligatoire si la ligne necomporte qu'une seule instruction.

• Les commentaires simples(sur une ligne) sont indiqués par unedouble barre oblique (//).

• Les commentaires qui s'étendent sur plusieurs lignes utilisent /*et */

19


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

20


Structures conditionnellesif (condition){instructions ;

}[ else{instructions ;

} ]

Exemple<script language="JavaScript">var code;code= window.prompt("Entrez le code de 3 chiffres

du produit","");if (code.length == 3){

document.write ("Le code est bon!");}else{

document.write("SVP, recommencez car le code \""+code+ "\" n'est pas valide.");

}</script>


Structures conditionnellesswitch (expression){

case étiquette :instructions ;break ;

case étiquette :instructions ;break ;

default :instructions ;

}

Exemple<script language="JavaScript">var choix;choix=window.prompt( "Choisissez un code de produit:\n"

+"1 (oranges), 2 (pommes)", "");switch (choix) {case "1" :document.write("Les oranges sont à 1,900 dinars le

kilo.<BR>");break;case "2" :document.write("Les pommes sont à 4,500 dinars le

panier.<BR>");break;default :document.write("Vous avez tapé un mauvais code<BR>");}document.write("Avez vous besoin d'autres choses

aujourd\'hui?<BR>");</script>

21


Structures itérativeswhile (condition){

instructions ;

}

do{

instructions ;

}while (condition) ;

Exemple<script language="JavaScript">var choix;choix=window.prompt( "Choisissez un code de produit:\n"

+"1 (oranges), 2 (pommes)", "");switch (choix) {case "1" :document.write("Les oranges sont à 1,900 dinars le

kilo.<BR>");break;case "2" :document.write("Les pommes sont à 4,500 dinars le

panier.<BR>");break;default :document.write("Vous avez tapé un mauvais code<BR>");}document.write("Avez vous besoin d'autres choses

aujourd\'hui?<BR>");</script>


Fonctions

• Valeur de retour non typée

• Arguments non typés

// Déclarationfunction ma_fonction(arguments){

instructions ;

return quelque_chose; // ou pas…

}

ma_fonction(12) ; // Appel

22


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

23


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 parl'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 numbervar titre="Les raisins de la colère";typeof titre; //retourne stringvar jour = new Date();typeof jour; //retourne objectvar choix = true; typeof choix; //retourne booleanvar cas = null; typeof cas; //retourne objecttypeof parseFloat; //retourne functiontypeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.*typeof Math; //retourne function NS 3.*, Opera 3.*

24


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;

25


Chaînes : Exemplesvar s = "Bon anniversaire Benjamin" ;document.write(s.charAt(2)) ;è ndocument.write(s.charCodeAt(2)) ;è 110document.write(s.concat(" du groupe C12")) ;è Bon anniversaire Benjamin du groupe C12document.write(String.fromCharCode(49, 50)) ;è 12document.write(s.indexOf("Benjamin")) ;è 17document.write(s.lastIndexOf("a")) ;è 21document.write(s.match(/Benjamin$/)) ;è Benjamin (null si non trouvé)


Chaînes : Exemplesdocument.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

26


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éclarationvar tab1 = new Array(taille) ;var tab2 = new Array(1, "a", 9, …) ;

index è 0 1 2 …• Utilisationwindow.alert(tab2[0]) ; // 1tab2[2] = 6 // 6 remplace 9

• Accroissement automatique de la taillevar tab1 = new Array(2) ;tab1[200] = 5 ;

27


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);

28


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 : Exemplesdocument.write(115.04+15) ;è 130.04000000000002document.write(Math.PI) ;è 3.141592653589793document.write(Math.abs(-12.34)) ;è 12.34document.write(Math.floor(12.54)) ;è 12document.write(Math.round(12.54)) ;è 13document.write(Math.ceil(12.54)) ;è 13document.write(Math.random()) ;è 0.394555831655689

29


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;

30


Dates : Exemplesvar today = new Date()document.write(today) ;var birthday = new Date("December 17, 1995 03:24:00")

document.write(birthday) ;birthday = new Date(95,11,17)document.write(birthday) ;birthday = new Date(95,11,17,3,24,0)document.write(birthday) ;document.write(birthday.getDay()) ;document.write(birthday.getDate()) ;birthday.setDate(25) ;document.write(birthday) ;

Tue Nov 02 2010 00:11:36 GMT+0100

Sun Dec 17 1995 03:24:00 GMT+0100

Sun Dec 17 1995 00:00:00 GMT+0100

Sun Dec 17 1995 03:24:00 GMT+0100

0

17

Mon Dec 25 1995 03:24:00 GMT+0100


Dates : Exemples

document.write(birthday.getMonth()) ;birthday.setMonth(10) ;document.write(birthday) ;document.write(birthday.getYear()) ;birthday.setYear(96) ;document.write(birthday) ;document.write(birthday.getFullYear()) ;birthday.setFullYear(2010) ;document.write(birthday) ;

11

Sat Nov 25 1995 03:24:00 GMT+0100

95

Mon Nov 25 1996 03:24:00 GMT+01001996

Thu Nov 25 2010 03:24:00 GMT+0100

31


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 imagerouge = new Image(100, 100) ;rouge.src = 'rouge.gif' ; // Préchargement

// Une autre imagevert = new Image(100, 100) ;vert.src = 'vert.gif' ; // Préchargement

// Modification de la 13e image de la page Webdocument.images[12].src = rouge.src ;

// Modification de la 15e image de la page Webdocument.images[14].src = rouge.src ;</script>

32


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

33


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édiatemmentsupé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.

34


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;

35


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()

36


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

• 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

<HTML><BODY onLoad="window.document.formulaire.zone.value='Bonjour';"><FORM name="formulaire"><INPUT NAME="zone" TYPE="text"></FORM></BODY></HTML>

37


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><script type="text/javascript">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>

38


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'> ...<script type="text/javascript">function verif(f) {

... f.texte.value ; }</script>

<form name='formu' onSubmit='return verif();'><input type='text' name='texte'> ...

<script type="text/javascript">function verif() {... document.formu.texte.value ;... document.forms[0].elements[0].value ;... document.forms["formu"].elements["texte"].value ; }

</script>

39


Formulaires : Exemple<script type="text/javascript">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

40


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>

41


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

• …

42


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>

43


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Rollover</title>

<script type='text/javascript' language='JavaScript'><!—function change(image, source) {document.images[image].src = source; }

// --></script></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>

Événement onMouseOver / Out

Tableau des images du document. Accès par leur nom ou leur indice


Événement onMouseOver / Out<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Rollover</title>

<script type='text/javascript' language='JavaScript'>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>

<li><a href='#' onMouseOver="change('image2', 'vert.gif')"onMouseOut="change('image2', 'rouge.gif')">Disque 2</a>

<li><a href='#' onMouseOver="change('image3', 'vert.gif')"onMouseOut="change('image3', 'rouge.gif')">Disque 3</a> </ul>

<img name='image1' width='100' height='100' src='rouge.gif'alt='disque'>



</body> </html>

44


Boîte à outils// Détection du navigateur// Netscape 4var nava = document.layers ? true : false ; // IE, Firefox, Netscape 6, Operavar dom = document.getElementById ? true : false ;// IE, Operavar 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 ;}

45


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 ;}

}


Événement onMouseOver / Out<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Image cliquable</title><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>

function getobj(id)function getstyle(id)

function writecontent(obj, content)

46


Modification dynamique de style<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><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<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><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>

47


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

48


innerHTML : exemple

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

• Accéder à un élémente = document.getElementById("un_id");

• Construire une chaîne contenant du HTMLs = "Voici <b>un texte</b>";

• Modifier le contenu de l’élémente.innerHTML = s;

• Interprétation « automatique » par le navigateur du nouveau contenu pour modifier le document


DOM « pur » : exemple

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

• Accéder à un élémente = document.getElementById("un_id");

• 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);

divid="un_id"

bVoici

un texte

49


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) : sivous désirez cloner le nœud avec (true) ou sans (false) ses enfants et sesdiffé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);

http://www.abc.com

50


Remplacer un élément par un autrereplaceChild(). 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œudenfant à 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 ensuitel'élément supprimé où on veut et quand on veut

51


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é.

<p id="myP">Un peu de texte <a>et un lien</a></p><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é.

<p id="myP">Un peu de texte <a>et un lien</a></p><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>

Développement Web II - ZLITNI · 2 ©TarekZLITNI 3-ISIMS Développement Web II Introduction •...

Documents

Transcript of Développement Web II - ZLITNI · 2 ©TarekZLITNI 3-ISIMS Développement Web II Introduction •...