Partie 1 - Tarek ZLITNI Offcial Web Site

Transcription

Développement
Web II
Tarek ZLITNI
www.ZLITNI.com
[email protected]
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,…)
3
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.
4
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.
5
•
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).
6
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.
7
•
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.
8
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
9
•
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
10
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.
11
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
12
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>
14
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>
15
Les nouvelles balises
• Les nouveautés de HTML 5:
•
•
•
Balises sémantiques
Balises multimlédia
Balises de formulaires 2.0
16
8
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>
<div id="intro">
</div>
<div id="author">Ecrit par moimême</div>
</div>
<div id="content">
</div>
17
HTML 5
<header>
<h1>Mon super site</h1>
<p>Un deuxième paragraphe</p>
<header>
</section>
<article>
<section>
<h1>Mon super article<h1>
<section>
</section>
<footer> Ecrit par moimême</footer>
</section>
</article>
<section>
18
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>
19
HTML5 : La vidéo
• La balise <video> spécifie une méthode standard pour insérer de
la vidéo dans la page web.
20
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
21
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.
22
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.
23
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.
24
12
Les formulaires 2.0
• <input type=
•
•
•
•
•
•
•
•
•
search
tel
email
url
date
number
range
color
...etc
25
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">
26
13
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">
27
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>
28
14
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>
29
Eléments supprimés
• Les éléments suivants de Html 4 ont été retirés de Html 5
•
•
•
•
•
•
•
•
<acronym>
<applet>
<basefont>
<big>
•
•
•
•
<frameset>
<noframes>
<strike>
<tt>
<center>
<dir>
<font>
<frame>
30
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)
32
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>
33
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é.
34
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
.
35
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 */
36
18
Exemple
<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
<!-document.writeln("Salut !") ;
// -->
</script>
</body>
</html>
37
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
38
19
Structures conditionnelles
Exemple
<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>
if (condition)
39
Structures conditionnelles
Exemple
switch (expression) <script language="JavaScript">
var choix;
{
case étiquette :
instructions ;
break ;
case étiquette :
instructions ;
break ;
default :
instructions ;
}
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>
40
20
Structures itératives
while (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>
41
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
42
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
43
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
44
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");
45
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.*
46
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;
47
L'objet String
•
•
italics( ) : formate la chaîne avec la balise <I>;
•
link( ) : formate la chaîne avec la balise <A> pour permettre de
faire un lien;
•
•
•
•
•
slice( ) : retourne une portion de la chaîne;
lastIndexOf( ) : permet de trouver le dernier indice d'occurrence
d'un caractère;
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;
48
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é)
49
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
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;
51
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 ;
52
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
53
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);
54
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;
•
•
random( ) : retourne un nombre aléatoire entre 0 et 1;
floor( ) : retourne le plus grand entier inférieur à un nombre;
pow( ) : retourne le résultat d'un nombre mis à une certaine
puissance;
round( ) : arrondi un nombre à l'entier le plus proche.
55
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
56
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;
57
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;
•
toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la
date en chaîne de caractère selon la convention GMT, selon la
convention locale ou en temps universel;
getTimezoneOffset( ) : retourne la différence entre l'heure du
client et le temps universel;
58
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
59
Dates : Exemples
document.write(birthday.getMonth()) ; 11
birthday.setMonth(10) ;
document.write(birthday) ;
Sat Nov 25 1995 03:24:00 GMT+0100
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
60
30
Images : Propriétés & Méthodes
•
Propriétés
•
•
•
•
•
•
•
complete
width
height
name
src
…
Méthodes
•
constructeur
•
•
Image()
Image(largeur, hauteur)
61
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>
62
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é.
63
Les objets du navigateur
64
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;
65
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.
66
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.
67
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;
68
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
69
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()
70
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)
71
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
72
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
73
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>
74
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>
75
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>
76
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>
77
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
78
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>
79
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>
80
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>
81
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
…
82
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>
83
É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>
84
42
Événement onMouseOver / Out
<html>
<head> <title>Rollover</title>
<!—
function change(image, source) {
document.images[image].src = source; }
// -->
</script>
Tableau des images du document. Accès
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>
85
<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>
86
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 ;
}
87
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 ;
}
88
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 ;
}
}
89
getobj(id)
<!DOCTYPE html PUBLIC "-//W3C//DTDfunction
HTML 4.01
Transitional//EN">
function writecontent(obj, content)
<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')"
<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')"
</map> <span id='info'></span>
</body> </html>
90
45
Modification dynamique de style
function getobj(id)
<html> <head> <style type'text/css'> <!-function
writecontent(obj, content)
.visible { } .invisible { display : none
; }
.cache_cache { text-align : right ; }
</style>
<script type='text/javascript' language='JavaScript' src='outils.js'>
</script>
 </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>
91
Modification dynamique de contenu
function getobj(id)
<html> <head> <style type='text/css'> <!-function getstyle(id)
.visible { } .invisible { display : none
; } writecontent(obj, content)
function
.cache_cache { text-align : right ; }
</style>
<script type='text/javascript' language='JavaScript' src='outils.js'>
</script>
<script type='text/javascript' language='JavaScript'> <!-function cache_cache(lien, id) { var obj=getobj(id) ;
if (obj.className == 'visible')
{ lien.innerHTML = 'monter' ; obj.className='invisible' ; }
else
{ lien.innerHTML = 'cacher' ; obj.className='visible' ; }
} // --> </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>
92
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 ?
93
Solutions pour modifier le DOM
• innerHTML
•
•
Construire une chaîne de caractères contenant du code HTML
•
Le navigateur interprète le contenu de la chaîne de caractères
affectée pour modifier la structure du document
Affecter cette chaîne de caractères à l’attribut innerHTML d’un
élément de la page
• DOM « pur »
•
Construire de nouveaux éléments logiques du document avec
des méthodes JS
•
Construire les liens de parenté entre ces éléments
94
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
95
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);
96
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>
97
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);
98
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>
99
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
100
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>
101
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>
102
51

Partie 1 - Tarek ZLITNI Offcial Web Site

Transcription

Documents pareils

Le Saoudien Tarek Binladen finance des projets

Allez sur 2. Email 3. Clique r l`option Set + accounts ez sur add an

Paramètres (arguments)

Tutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16

BARAKAT Tarek, Doctorant Date de naissance : 13/09

TD TD –– Javascript

Les politiques occidentaux ne comprennent rien au monde arabe

Erreurs JavaScript (bogues) :

Programmation de scripts pour la simulation de scénarios

Exercices PHP