docjavascript - Jean-Loup Guillaume website
download 
Plainte Transcription
javascript - Jean-Loup Guillaume website
JAVASCRIPT
LI288 – web et développement web
Introduction
Le Javascript est un langage "de script" simplifié "orienté objet" :
Initialement élaboré par Netscape en association avec Sun Microsystem.
Standardisé par un comité spécialisé, l'ECMA (European Computer
Manufactures Association).
Javascript permet :
de rendre dynamique un site internet développé en HTML :
Validation de formulaires, calculs, messages,
Modification de la page web,
AJAX
de développer de véritables applications fonctionnant exclusivement
dans le cadre d'Internet.
Caractéristiques principales
Le Javascript est interprété :
Ecrit
directement au sein du document HTML sous forme
d'un script encadré par des balises HTML spéciales.
Exécution chez le client (pas d'appel réseau).
Supporté par la plupart des navigateurs web
IE,
Firefox, Chrome, etc. (compatibilité ?)
Syntaxe proche du C
Plan du cours
Syntaxe : tests, boucles, fonctions
Événements / Manipulation de page
Objets
Insertion dans une page html
JSON
Cookies
JAVASCRIPT
SYNTAXE
LI288 – web et développement web
HTML et JavaScript
Utilisation de balises spécifiques :
<script
language="Javascript">…</script>
Deux types d‟insertion dans le code HTML
Insertion directe
dans le code HTML
Insertion comme un module externe
Insertion dans une page HTML
Placé dans le corps de la page HTML, entre les balises
<body> et </body>
Le code s'exécute automatiquement lors du chargement de
la page.
<html>
<body>
<script language="JavaScript">
alert('bonjour');
</script>
</body>
</html>
Insertion dans une page HTML
Placé entre les balises <head> et </head>
Le code s'exécute lors d'un événement venant de l'utilisateur.
le code correspondant à cet événement se trouve dans le corps du
document.
En pratique les deux sont similaires sur la plupart des navigateurs.
<html>
<head>
<script language="JavaScript">
function f () { alert('Au revoir'); }
</script>
</head>
<body onUnload=f();>
</body>
</html>
Insertion dans une page HTML
A placer dans le <head> ou le <body>
Fichier en format texte.
Permet de réutiliser les scripts.
Inconvénient : requête supplémentaire vers le serveur.
<html>
<head>
<script language="javascript" src="fichier.js"></script>
</head>
<body>
<input type="button" onclick="popup()" value="Clic">
</body>
</html>
Structure d‟un script
Proche de Java et C
Règles générales
On
peut mettre des espaces n'importe où.
On sépare les commandes par des point-virgule ";".
Les réels sont notés avec un "." et pas une virgule ",".
Commentaires :
Double slash
"//" devant le texte
Encadrer le texte par un slash suivi d'une étoile "/*" et la
même séquence inversée "*/"
Les variables
Déclaration et affectation
Déclaration avec le mot clé "var".
Affectation avec le signe d'égalité (=).
Remarques :
La déclaration est faite par défaut (si affectation sans déclaration préalable).
La lecture d'une variable non déclarée provoque une erreur.
Une variable déclarée non affectée est de type undefined (indéfinie).
//Déclaration de i, de j et de k.
var i, j, k;
//Affectation de i.
i = 1;
//Déclaration et affectation de prix.
var prix = 0;
//Déclaration et affectation d'un tableau
var car = ["a", "b", "c"];
Les variables
Booleen (vrai/faux)
Nombre (un seul type, pas de int, float, double, …)
Tableaux
Tableaux associatifs
Fonctions
Autres types spécifiques
Eléments HTML et attributs
Les variables
La portée (locale/globale) :
Globale :
déclarée en début de script et accessible à
n'importe quel endroit du programme.
Locale : déclarée à l'intérieur d'une fonction et
accessible uniquement dans la fonction.
Les variables
Contraintes concernant les noms de variables :
Les noms de variables ne peuvent contenir que des lettres,
chiffres, ou le caractère "_" (underscore)
Les caractères spéciaux et accentués sont interdits :
MonPrenom est différent de Monprenom.
Un nom de variable ne peut contenir d'espaces.
var Mon_Prénom; // incorrect
Attention aux majuscules et minuscules :
var Mon_Prenom; // correct
var Mon Prenom; // incorrect
Les mots réservés JavaScript ne peuvent être utilisés comme noms
de variable.
Les variables
Le type d‟une variable dépend de son contenu
var maVariable = "Philippe"; // type chaîne
maVariable =10; // type nombre (entier)
Trois principaux types de valeurs :
Chaînes
Nombre (entier ou décimaux) : 10^-308 >nombre < 10^308
3 valeurs spéciales :
Positive Infinity ou +Infinity (valeur infini positive)
Negative Infinity ou –Infinity (valeur infinie négative)
Nan (Not a Number) en général le résultat d'une opération incorrecte
Boolean
true (vrai) et false (faux).
Valeurs spéciales
JavaScript inclut aussi deux types de données
spéciaux :
Null
: possède une seule valeur, null, qui signifie
l‟absence de données dans une variable
Undefined : possède une seule valeur, undefined. Une
variable qui n‟a jamais stocké de valeur, pas même null
est dite non définie (undefined).
Opérations sur les chaînes
La concaténation :
Déterminer la longueur d‟une chaîne :
var chaine = "bonjour" + "FI3/FCD1";
var ch1 = 'bonjour';
var longueur = ch1.length;
Extraction d‟une partie de la chaîne :
var dateDuJour = "04/04/03"
var carac = dateDuJour.charAt(2);
Extrait le caractère en position 2 de la chaîne
var mois = datteDuJour.substring(3, 5);
3: est l‟indice du premier caractère de la sous-chaîne à extraire
5 : indice du dernier caractère à prendre en considération ; ce caractère ne fera pas
partie de la sous-chaîne à extraire
Syntaxe, les boucles
Boucle for :
for
(i=0; i<5; i++) {…}
Boucle while :
while
do
(test) {…}
{test} while (test)
Syntaxe, les conditions
if (test) {} else {}
égalité
: ==, !=
inférieur, supérieur : =<, >=, >, <
opérations bit à bit : &, |
identique à : ===, !==
('1'
== 1) // true
('1' === 1) // false
opérations logiques
: &&, ||
Les fonctions
Définition :
Appel :
maFonction("12",13);
Exemple : calcul de la fonction factoriel
function maFonction(arg1,arg2) {instr;}
Calcul récursif
Choix (if)
Mais aussi (à venir) :
Appelé sur un événement
Utilisation de document.getElementById
Utilisation de this.value
Fonction factorielle
<html>
<head>
<script language="JavaScript">
function fac(n){
if (n < 2) {
return 1;
} else {
return n * fac(n-1);
}
}
</script>
</head>
<body>
<form>
<input id="facArg‚ type="text"
onchange="result = fac(this.value); document.getElementById('facResult').value = result;"/>
<input id="facResult" type="text" />
</form>
</body>
</html>
Arguments
Remarques :
Pas de type dans la signature de la fonction
On peut déclarer une fonction sans arguments et lui en
passer
et accéder les arguments dans la fonction
function test(argument1) {
alert("argument : " + argument1);
alert("nombre d'args : " + arguments.length);
for (var i=0 ; i<arguments.length ; i++) {
alert("arg " + i + " : " + arguments[i]);
}
}
test(); // undefined - 0
test("1"); // 1 – 1 - 1
test("1","2"); // 1 – 2 – 1 - 2
Fonctions d‟ordre supérieur
Une fonction peut prendre une fonction en argument
Permet plus de flexibilité
function map (a,f) {
for (var i=0 ; i<a.length ; i++) {
a[i]=f(a[i]);
}
return a.toString();
}
function sqr(x) {
return x*x;
}
map([1,2,3],sqr);
Quelques fonctions de base
eval
Cette
fonction exécute un code Javascript à partir
d'une chaîne de caractères.
<html>
<body>
<script language="JavaScript">
eval('function carre(n){ return n*n;};alert(carre(2));');
</script>
</body>
</html>
Quelques fonctions de base
isFinite
Détermine si
le paramètre est un nombre fini.
isNaN
Détermine si
le paramètre n‟est pas un nombre (NaN :
Not a Number).
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false
isNaN("un nombre") //retourne true
isNaN(20) //retourne false
Quelques fonctions de base
parseFloat
Analyse une chaîne de caractères et retourne un nombre décimal.
Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number).
parseInt(string, base)
Analyse une chaîne de caractères et retourne un nombre entier de la base spécifiée.
La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2 (binaire).
alert(5+"2"); // affiche 52
alert(5+parseInt("2")); // affiche 7
parseInt("10.33") // 10
parseInt("40 years") // 40
parseInt("He was 40") // NaN
parseInt("010") // base 8 (0…)
parseInt("0x10") // base 10 (0x…)
parseInt("10",3) // base 3
Quelques fonctions de base
Number
String
convertit l'objet spécifié en valeur numérique
convertit l'objet spécifié en chaîne de caractères
Escape
retourne la valeur hexadécimale à partir d'une chaîne de caractère codée en
ISO-Latin-1.
var jour = new Date("December 17, 1995 03:24:00");
alert (Number(jour));
jour = new Date(430054663215);
alert (String(jour));
escape("!&") //retourne %21%26%
JAVASCRIPT
ÉVÉNEMENTS
LI288 – web et développement web
Gestionnaire d‟événements
Chaque événement a un identifiant
de la forme onQuelqueChose
par exemple : onLoad, onClick, onMouseOver, etc.
Un événement peut exécuter du code javascript
Une ou plusieurs instructions
En général un appel de fonction
Activation :
<tag … onEventName="code javascript;">
Les événements de base
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é
Les événements de base
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
Les événements de base
É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.
Une liste plus longue
Globales :
onAbort : chargement d'une image interrompu
onError : une erreur durant le chargement de la page
onLoad : chargement de la page
onUnload : l'utilisateur quitte la page
Souris :
onBlur : un élément perd le focus
onClick : clic sur l'élément
onDblclick: double clic sur l'élément
onDragdrop : drag and drop sur la fenêtre du navigateur
onFocus : le focus est donné à un élément
onMouseOver : la souris passe sur un élément
onMouseOut : la souris quitte un élément
onResize : la fenêtre est redimensionnée
Une liste plus longue
Formulaires :
Clavier :
onChange : modification d'un champ de données
onReset : effacement d'un formulaire à l'aide du bouton Reset.
onSelect : sélection d'un texte dans un champ "text" ou "textarea"
onSubmit : clic sur le bouton de soumission d'un formulaire
onKeydown : appui sur une touche du clavier
onKeypress : appui et maintient sur une touche
onKeypress : relâchement d'une touche
Attention, selon les versions de javascript, les événements peuvent ne
pas exister.
JAVASCRIPT
OBJETS
LI288 – web et développement web
Les Objets
Les objets de JavaScript, sont soit des entités prédéfinies du langage, soit
créés par le programmeur :
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 objet…
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
Les objets
L‟opérateur New : créer une instance d'un objet
Objet
défini par l'utilisateur
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 - création
Créer un objet et accéder à ses attributs/méthodes.
var obj = new Object();
obj["attribut"] = "valeur";
// ou obj.attribut = "valeur";
obj["methode"] = function(p) { alert("parametre : " + p);};
// ou obj.methode = …
alert(obj.attribut);
obj.methode("test");
Les objets - création
Version avec constructeur
function Test(p,q) {
this.att1=p;
att2 = q;
this.al = function() {alert(this.att1);}
var al2 = function() {alert(att2)};
}
var x = new Test(2,3);
alert(x.att1);
x.al();
alert(x.att2);
try {x.al2();} catch(err) {alert(err);}
Les objets - création
Création directe sous forme de tableau associatif :
Séparation par
des virgules ","
cf JSON plus loin dans le cours.
var obj = {
attribut: "valeur",
methode: function(p) { alert("parametre : " + p);}
};
alert(obj.attribut);
obj.methode("test");
Les objets
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.*
L'objet String
Propriété :
Méthodes :
length : retourne la longueur de la chaîne de caractères
anchor("lien") : formate la chaîne avec la balise <A>
bold( ) : formate la chaîne avec la balise <B>
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( ) : trouve l'indice d'occurrence d'un caractère dans une chaîne
substr( ), substring( ) : retourne une portion de la chaîne
http://www.toutjavascript.com/reference/index.php
L'objet Array
Propriété :
length
: retourne le nombre d'éléments du tableau
Méthodes :
concat(
) : permet de concaténer 2 tableaux
reverse( ) : inverse le classement des éléments du
tableau
slice( ) : retourne une section du tableau
sort( ) : permet le classement des éléments du tableau
L'objet Math
Propriétés :
E, LN2, LN10, LOG2E, LOG10E, PI, SQRT2, SQRT1_2
Méthodes :
abs(), max(), min(), sqrt(), pow(), exp(), …
ceil( ) : retourne le plus petit entier supérieur à un nombre
floor( ) : retourne le plus grand entier inférieur à un nombre
round( ) : arrondi un nombre à l'entier le plus proche
random( ) : retourne un nombre aléatoire entre 0 et 1
L'objet Date
Propriété : aucune
Méthodes :
getFullYear(), getYear(), getMonth(), getDay(), getDate(),
getHours(), getMinutes(), getSeconds(), getMilliseconds()
getUTCFullYear( ), … idem en temps universel
setFullYear( ), setYear( ), … modification d'une date
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
JAVASCRIPT
MANIPULATION DE PAGE
LI288 – web et développement web
Entrées/sorties
3 types de boites de messages peuvent être affichés en
utilisant Javascript
Méthode alert()
Méthode confirm()
permet à l‟utilisateur de choisir entre les boutons OK et Annuler.
Méthode prompt()
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
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
Entrées/sorties
<html>
<head>
<title> une page simple </title>
</head>
<body>
<script language='javascript'>
alert('bonjour');
document.write (
prompt('quel est votre nom ?','Indiquer votre nom ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
Les objets du navigateur
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" = ensemble des éléments HTML de la page.
On peut accéder ces éléments avec :
méthodes propres à l'objet document :
getElementById( ) trouve l'élément avec son identifiant (ID)
getElementsByName
soit des collections d'objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.
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
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
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, forms, images, links : retourne les collection d'applets java,
formulaires… présente dans le document
cookie : permet de stocker un cookie
domain : indique le nom de domaine du serveur ayant apporté le document
referrer : indique l'adresse de la page précédente
title : indique le titre du document
<html><head><title>Test</title></head>
<body>
<a href="http://www.yahoo.fr/">Yahoo</a>
<a href="http://www.google.fr/">Google</a>
<script type="text/javascript">
alert(document.title);
for(var i=0; i < document.links.length; ++i) "<br>" + document.links[i]);
</script>
</body></html>
L'objet 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()
Manipulation des objets
Pour adresser un objet, il faut 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 (attention aux frames)
On peut omettre window.document (un seul objet "document")
<HTML>
<BODY onLoad="window.document.f1.zone.value='Bonjour';">
<FORM name="f1">
<INPUT NAME="zone" TYPE="text">
</FORM>
</BODY>
</HTML>
Exemples
<HTML><HEAD
<script type="text/javascript">
function listStyle(color) {
var ml = document.getElementById("maListe");
ml.setAttribute("style","color:"+color);
}
</script>
</HEAD><BODY>
<ul id="maListe">
<li><a href="javascript: listStyle('red');">Rouge</a></li>
<li><a href="javascript: listStyle('blue');">Bleu</a></li>
<li><a href="javascript: listStyle('black');">Noir</a></li>
</ul>
</BODY></HTML>
Pour aller plus loin
Toutes les commandes sur :
https://developer.mozilla.org/fr/DOM/element#Propr
iétés
Pour tester/débugger :
Firebug
(sous firefox 3.5+)
Console d'erreur.
Utiliser des alertes.
JSON
JAVASCRIPT OBJECT
NOTATION
LI288 – web et développement web
JSON ?
Format d'échange de données.
Objectifs :
Simple.
Extensible.
Ouvert.
Lisible
par un humain.
Similaire à la définition des objets Javascript.
JSON : JavaScript Object Notation
Les types de base
Nombres entiers, rééls ou à virgule flottante
Chaînes de caractères
Booléen true et false
Tableaux […, …] ou tableaux associatifs (objets) "clé":valeur : {…, …}
null
{
"Nom":"Guillaume",
"Adresse": {"rue":"104 avenue Kennedy",
"cp":"75016","ville":"Paris"},
"notes": [1, 2, 4, 8, 16, 32]
}
JSON et Javascript
JSON peut être utilisé directement :
Inclusion dans
<script>
Peut
du HTML
var data = JSONdata; </script>
être converti en un objet Javascript
responseData =
eval('(' + responseText + ')');
JSON ou XML ?
JSON est très utilisé avec AJAX (le X de AJAX est pour XML)
JSON :
{"nom": "Guillaume", "prenom": "Jean-Loup"}
XML :
<?xml version='1.0„ encoding='UTF-8'?>
<element>
<nom>Guillaume</nom>
<prenom>Jean-Loup</prenom>
</element>
JSON ou XML ?
Evaluation en JSON :
var
name = eval('(' + req.responseText + ')').nom.value;
Ou :
eval('('
+ req.responseText + ')').xyz.abc.value;
Accès simplifié aux différent niveaux.
JSON ou XML ?
Evaluation en XML :
var
root = req.responseXML;
var name = root.getElementsByTagName(„nom‟);
Ou :
root.getElementsByTagName(„xyz‟)[0].firstChild
Un peu plus complexe
JSON ou XML
Taille des données :
Vitesse :
XML se parse mieux
JSON s'évalue avec eval : peu efficace (pour l'instant)
Choix :
plus petite en JSON (pas de fermeture de tag)
XML se compresse mieux
JSON : structures de données
XML : structuration de documents
A vous de faire votre choix !
JAVASCRIPT
COOKIES
LI288 – web et développement web
Les Cookies
Chaîne de caractères pouvant être écrite sur le
disque dur.
A un endroit défini.
Ne peut être lue que par le seul serveur qui l'a
générée.
Que faire avec un cookie
Transmettre des valeurs d'une page HTML à une autre.
Exemple :
gestion d'un caddie sur un site de vente en ligne.
Personnaliser les pages présentées à l'utilisateur.
Les Cookies
Limitations (théoriques, en pratique c'est faux) :
Limites en nombre : Pas plus de 20 cookies par serveur.
Limites en taille : un cookie ne peut excéder 4 Ko.
Limites du poste client : Un poste client ne peut stocker plus
de 300 cookies en tout.
Stockage - dépend du navigateur
IE :
C:\Users\admin\AppData\Local\Microsoft\Windows\Temporary
Internet Files
Firefox :
…
Les Cookies - structure
Nom=Contenu; expires=expdate; path=Chemin;
domain=NomDeDomaine; secure
Nom=Contenu;
En-tête du
cookie : deux variables suivies d'un ";"
La variable Nom contient le nom à donner au cookie.
La variable Contenu contient le contenu du cookie
Exemple mon_cookie="oui:visite"
Les Cookies - structure
Nom=Contenu; expires=expdate; path=Chemin;
domain=NomDeDomaine; secure
Expires= expdate;
Le
mot réservé expires suivi du signe "=" (égal).
Date à laquelle le cookie sera supprimé du disque dur.
Format :
A
Wdy, DD-Mon-YYYY HH:MM:SS GMT
générer avec les fonctions de l'objet Javascript Date
Règle générale : indiquer un délai en nombre de jours (ou
d'années) avant disparition du Cookie.
Les Cookies - structure
Nom=Contenu; expires=expdate; path=Chemin;
domain=NomDeDomaine; secure
path=Chemin;
chemin de
la page qui a créé le cookie.
domain=NomDeDomaine;
le nom
secure
du domaine de la page.
(false par défaut)
"true" (HHTPS) ou
path,
"false" (HTTP) : protocole utilisé.
domain et secure sont facultatifs.
Les Cookies - écriture
propriété de l'objet document :
document.cookie =
Nom + "=" + Contenu + ";
expires=" + expdate.toGMTString() ;
// creation des variables
var Nom = "MonCookie" ;
var Contenu = "contenu" ;
var expdate = new Date () ;
// modification de la date d'expiration (10 jours)
expdate.setTime (expdate.getTime() + ( 10 * 24 * 60 * 60 * 1000)) ;
// ecriture du cookie sur le disque
document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;
Les Cookies - lecture
Accéder à la propriété cookie de l'objet document :
Document.cookie
var lesCookies ;
lesCookies = document.cookie ;
Les Cookies - modification
Modification d'un cookie
Modifier le
contenu de la variable Contenu puis
réécrire le cookie sur le disque dur du client
Contenu = "Le cookie a été modifié..." ;
document.cookie = Nom + "=" + Contenu + "; expires=" +
expdate.toGMTString() ;
Les Cookies - suppression
Modifier la date de péremption :
Mettre
une date dans le passé.
Le navigateur se charge du reste
// on enlève une seconde a la date courante
expdate.setTime (expdate.getTime() - (1000)) ;
// écriture sur le disque
document.cookie = Nom + "=" + Contenu + "; expires=" +
expdate.toGMTString() ;
AJAX
LI288 – web et développement web
Application traditionnelle
Application WEB traditionnelle :
Le
client envoie une requete HTTP
Le serveur renvoie une page
Consommation inutile de la bande passante :
Une
grande partie du code HTML est commun aux
différentes pages de l'application.
Le chargement d‟une nouvelle page à chaque
requête n‟est pas ergonomique
Application traditionnelle
Requête 1
Réponse 1
Html
Génération du
document
pour la
requête 1
Requête 2
Réponse 2
Html
Client
…
Génération du
document
pour la
requête 2
Serveur
HTTP
AJAX
Qu'est-ce qu'AJAX ?
Asynchronous
Javascript and XML
Pourquoi AJAX:
Javascript
est très utilisé au niveau du client :
validation de
Tout
formulaire, modifications de la page, …
ne peut pas être confié au client :
Manque de
Limitations
sécurité/confiance
AJAX
Principe de base :
Autant faire en sorte que les messages soient le plus
petits possibles.
Le client et le serveur dialoguent.
Le client n'a pas besoin de toute la base de données,
juste de suffisamment de données pour le client.
Le serveur et le client ont chacun un travail
L'application ne doit donc pas être prise en charge
entièrement d'un coté ou de l'autre.
AJAX = un acronyme de plus
C'est juste du Javascript classique.
Principe de base :
L'application Javascript émet des requêtes vers le
serveur avec un protocole donné.
Le serveur répond avec les informations demandées.
Tout se passe sans rechargement de la page.
Mode synchrone ou
asynchrone pour le client.
Javascript traite les données reçues et modifie la page
en conséquence.
Qui utilise Ajax
Clients de messagerie : Gmail, Yahoo Mail, HotMail
Google Maps
FlickR, Picasa
Deezer
Youtube, Dailymotion
Myspace, Facebook
AJAX
Requête 1
Réponse 1
Html
et
Script
Génération du document
pour la requête 1
Requête 2
Réponse 2
Client
Données
Requête 3
Script
Réponse 3
Données
…
Génération
du
Document
pour
la requête 2
Génération
du
Document
pour
la requête 3
Serveur
HTTP
Comment ça marche
Un exemple sans AJAX :
requête
faite automatiquement par le navigateur
récupération d'une image à distance
<body onLoad="javascript:document.images[0].src =
'http://...'">
<img id="img01" src="vide.jpg"></a>
</body>
Comment ça marche
<input type=“text” size=“5” onBlur=“miseAJour()”>
1. La fonction miseAJour crée un objet XMLHttpRequest
Existe sur tous les navigateurs "modernes".
2. Cet objet permet de faire une requête vers la page
concernée
http://www.test.com/page.php?valeur=12
Conceptuellement identique à la recherche d'image.
3. On traite le résultat et on met à jour la page web
L'objet XmlHttpRequest
AJAX se base sur XmlHttpRequest
Initialement développé
par Microsoft, en tant qu'objet
ActiveX, pour Internet Explorer 5
Puis repris et implémenté sous Mozilla 1 Safari 1.2,
Konqueror 3.4 et Opera 8.
Pas supporté par certains vieux navigateurs.
Proposé en 2006 pour devenir une recommandation du
W3C :
http://www.w3.org/TR/XMLHttpRequest/
Draft novembre 2009
L'objet XmlHttpRequest
Problèmes :
Nécessite un navigateur compatible, autorisant le
Javascript et XMLHTTP.
Nécessite plus de tests car il existe de grandes
différences entre les navigateurs.
XMLHttpRequest n'est
pas implémenté de la même manière
selon les navigateurs (et les versions des navigateurs).
Solution la plus simple :
Aller chercher le code générique avec google.
Création de l'objet XMLHttpRequest
Pour Internet Explorer (avant IE7) :
xhr
Ou
xhr
= new ActiveXObject("Microsoft.XMLHTTP");
= new ActiveXObject("Msxml2.XMLHTTP");
Pour les autres navigateurs :
xhr
= new XMLHttpRequest();
Création de l'objet XMLHttpRequest
function getXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
return NULL;
}}}}}
Création (bis)
function getXMLHttpRequest() {
if (window.XMLHttpRequest)
return new XMLHttpRequest();
if (window.ActiveXObject) {
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP" ];
for(var i in names) {
try {
return new ActiveXObject(names[i]);
} catch(e) {}
}
}
window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
return null;
}
Exemple simple
<html>
<body>
<script language="javascript">
function getXMLHttpRequest() {...}
function ajax() {
var xhr=getXMLHttpRequest();
xhr.open("GET", "test.html", false);
xhr.send(null);
alert(xhr.responseText);
}
</script>
<a href="javascript:ajax();">Cliquez-moi !</a>
</body>
</html>
Propriétés de l'objet
onreadystatechange :
Fonction appelée à chaque changement d'état.
readyState :
statut de l'objet :
0 : non initialisé.
1 : ouverture = méthode open() appelée avec succès.
2 : envoyé = méthode send() appelée avec succès.
3 : en train de recevoir = données en cours de transfert.
4 : terminé = données chargées.
responseText / responseXML
Réponse sous forme de chaîne de caractères / objet DOM.
Propriétés de l'objet
status :
code numérique de réponse du serveur HTTP, à tester quand
les données sont chargées (readyState=4)
200 : OK.
404 : page introuvable.
...
En local (sans serveur web), 0=OK
statusText :
message accompagnant le code de réponse :
404 : Not Found…
Méthodes de l‟objet
open(method, url, async, user, password)
send (contenu)
Prépare une requête en indiquant la méthode, l'URL, la
drapeau de synchronisation (et éventuellement le nom
d'utilisateur et le mot de passe).
Effectue la requête, éventuellement en envoyant les
données.
setRequestHeader("champ","valeur")
Assigne une valeur à un champ d'entête HTTP qui sera
envoyé lors de la requête.
Méthodes de l‟objet
abort()
Abandonne
la requête.
getAllResponseHeaders()
Renvoie l'ensemble
de l'entête de la réponse sous
forme de chaîne de caractères.
getResponseHeader("champEntete")
Renvoie la
valeur d'un champ d'entête HTTP.
Synchrone ou asynchrone
Requête synchrone :
Tout est bloqué en attendant la réponse.
Mauvais pour
l'utilisateur.
Les réponses arrivent forcément dans l'ordre.
C'est l'approche classique.
Requête asynchrone :
Le navigateur continue à répondre aux événements en
attendant la réponse.
Attention à ne pas faire n'importe quoi.
Javascript Asynchrone
Le choix entre synchrone et asynchrone se fait dans
l'appel à XMLHttpRequest (méthode open) :
true pour asynchrone
false pour synchrone
Dans le cas d‟un appel asynchrone, le résultat est
récupéré par une fonction :
xhr.onreadystatechange = function() { ...};
Cette fonction sera appelée à chaque changement
d'état de notre objet.
Pour résumer
Deux méthodes principales :
open :
pour établir une connexion.
send : pour envoyer une requête au serveur.
Récupération des données :
Champs
responseXml ou responseText.
Créer un nouvel objet XmlHttpRequest, pour chaque
fichier à charger.
Un exemple
function ajax() {
var xhr=getXMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200)
alert("Received : "
else
alert("Error code :
xhr.open("GET", "test2.html", true);
xhr.send(null);
}
+ xhr.responseText);
" + xhr.status);}};
<body>
<a href="javascript:ajax();">Cliquez-moi !</a>
</body>
HTTP GET ou POST
GET pour récupérer des données
Ne
devrait pas provoquer de mises à jour sur le
serveur.
Les requêtes GET doivent pouvoir être bookmarkées ou
mises en cache.
POST pour envoyer des données
Pour
tout ce qui ne correspond pas à un GET
AJAX : X = XML
Le serveur renvoie des données XML
La méthode responseXML de l‟objet XMLHttpRequest renvoie un
document XML à traiter
La méthode javascript getElementsByTagName(nom) d‟un objet (en
l‟occurrence XML) permet de récupérer les éléments par rapport à
leur nom dans un élément.
var docXML= xhr.responseXML;
var items = docXML.getElementsByTagName("donnee");
for (i=0;i<items.length;i++) {
alert (items.item(i).firstChild.data);
}
AJAX ou AJAJ : J = JSON
XML pas évident à parser en Javascript (cf cours 1)
On utilise plutôt JSON
{
"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New","onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}]
}
}
}
Exemple d‟utilisation de JSON
Coté client :
JSON
inclus dans JavaScript.
Le contenu est assigné à une variable et devient un
objet.
// Création de la connexion :
var req = new XMLHttpRequest();
req.open("GET", "fichier.json", true);
req.onreadystatechange = function() {
if (req.readyState == 4) {
var doc = eval('(' + req.responseText + ')');
}
}
req.send(null);
Exemple d‟utilisation de JSON
Coté serveur :
Parseurs pour générer du JSON à partir d'objets en
Php ou JAVA
L'échange de données :
Envoi avec AJAX
<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>
Affiche :
{"a":1,"b":2,"c":3,"d":4,"e":5}
Attention !
Les requêtes AJAX asynchrones passent par Internet
Aucune
garantie que les paquets arrivent dans l'ordre.
Aucune garantie qu'une requête soit terminée avant
qu'une autre ne soit lancée :
Les délais peuvent varier énormément à
du serveur et du réseau.
cause de la charge
Inconvénients
JavaScript doit être activé.
Les données chargées de façon dynamique ne font
pas partie de la page. Prise en compte par les
moteurs de recherche pas claire.
Asynchrone => affichage avec délai, peut poser
problème à l'utilisateur.
Le bouton « Page précédente » ne marche pas en
général.
Conclusions sur Ajax
Combinaison des langages standards du WEB
(Javascript, DOM HTML, XML)
Grâce à l‟objet XMLHttpRequest
WEB dynamique « coté client »
Utilisé par tous les sites « WEB 2.0 »
JQUERY
LI288 – web et développement web
jQuery
Librairie Javascript qui permet de :
Simplifier les
taches de base en Javascript.
Accéder à des partie d'une page HTML :
Utilisation d'expressions CSS
Modifier l'apparence
ou "Xpath"
et le contenu de la page.
Créer et modifier des événements.
Animer une page.
Faire de l'"AJAX".
Eviter les problèmes de compatibilité entre navigateurs.
jQuery
Projet open-source, bien supporté et documenté.
http://jQuery.com/
Ne se substitue pas à la connaissance de Javascript
Tout
ne se fait pas naturellement en jQuery.
Eviter de tout "Jqueriser".
Philosophie jQuery
Sélectionner une partie du document.
Agir dessus
Objet jQuery = ensemble de noeuds du DOM
Les
objets jQuery se créent avec la fonction $().
$("div") retourne un objet contenant tous les "div" du
document.
Philosophie jQuery
Sélectionner une partie du document.
Agir dessus
// récupérer tous les div du DOM puis les cacher
$("div").hide();
// Simuler un clic sur tous les boutons
$(":button").click();
// Ajouter un <span> à la fin de la page
$("<span/>").appendTo("body");
Inclure du jQuery
Télécharger le fichier jQuery.js
Il
existe un version jQuery-min.js plus légère
Inclure le fichier comme un script externe :
<script
src="jQuery.js"/>
Ou depuis le site de jQuery
<script
src=http://code.jQuery.com/jQuery-latest.js />
Une seule fonction : $
Exécution quand le DOM est construit
Syntaxe courte :
Syntaxe longue :
$(function(){…});
$(document).ready(function(){…});
ou encore :
jQuery("div");
a utiliser en cas d'utilisation d'autres librairies (moins de
risque de conflits)
Un exemple simple
La méthode .addClass() modifie le DOM en
ajoutant un attribut de classe
$("div").addClass("c1")
modifie tous
les <div> en <div class="c1">
Un exemple simple
Pour faire ça :
Créer une fonction :
function doIt(){$("div").addClass("c1")}
L'exécuter au chargement de la page
<body onLoad="doIt()">
Problèmes :
Il faut modifier la partie HTML
Oblige à attendre que tout soit chargé (notamment les
images).
Un exemple simple
jQuery fournit un événement similaire mais
disponible après la création du DOM et avant le
chargement des images :
$(document).ready(doIt);
Avantage : rien à modifier dans le HTML
Autre solution :
$(document).ready(function(){$("div").addClass("c1");});
Utilisation de $
Créer des objets jQuery
var
el = $("<div/>")
Manipuler des objets existant :
$(window).width()
Sélectionner des objets
$("div").hide();
$("div",
$("p")).hide();
Retour des fonctions
La plupart des fonctions retournent des objets
jQuery :
Possibilité de
chaîner les appels de fonction.
Attention à la lisibilité !
$("div")
.show()
.addClass("main")
.html("Hello jQuery");
Besoin d'aide
http://jQuery.com/
Tout
Le
y est :
code sources
La doc sur tous les paramètres et toutes les fonctions.
Des exemples.
Plein de plugins.
…
Dans la suite
Des exemples pour :
Sélectionner des
objets.
Utiliser les événements.
Ajouter des effets d'animations.
Faire des requêtes "à la AJAX"
JQUERY
COMMENT SÉLECTIONNER
LI288 – web et développement web
Sélecteur
Principe de base :
Un
sélecteur retourne un tableau d'objets jQuery :
$("*")
$("div") est
un tableau contenant tous les <div> de la page.
$("div").length permet de connaître le nombre de div dans
la page.
Sélection restreinte
Possibilité de sélectionner :
par type de bloc
par identifiant (id)
par classe (class)
// <div>Test</div>
$("div")
// <span id="test">JL</span>
$("#test")
// <ul class="test">JL</ul>
$(".test")
Sélection restreinte
Possibilité de combiner les sélecteurs.
// tous les divs de classe main
$("div.main")
// tous les tableaux d'identifiant data
$("table#data")
// objets d'id "content" ou de classe "menu"
$("#content, .menu")
Sélection restreinte
On peut aussi faire des recherches avec find().
Supprimer une restriction avec end().
//Tous les <p> contenant des objets avec classe header
$("p").find(".header").show();
// similaire à :
$(".header", $("p")).show();
// cacher tous les h1 qui contiennent un p
$("h1").find("p").end().hide();
Sélection restreinte
Pour obtenir un seul élément :
$("div").get(2) ou $("div")[2]
$("div").eq(2)
// en partant de la fin
$("div").eq(-2)
Filtres sur les nom d'attributs
// les éléments <div /> ayant un identifiant
$("div[id]")
// les éléments <div /> avec id "test"
$("div[id='test']")
// les éléments <div /> dont l'id commence par test
$("div[id^='test']")
// les éléments <div /> dont l'id termine par test
$("div[id$='test']")
// les éléments <div /> dont l'id contient test
$("a[href*='test']")
La fonction each
appelle une fonction pour chaque élément
sélectionné
$(this)
= élément courant
i - index de l'élément courant
$("table tr")
.each(function(i){
if (i % 2)
$(this).addClass("odd");
});
Sélecteurs de hiérarchie
Possibilité d'atteindre :
Les
fils.
Tous les descendants.
Le ou les frères suivants.
<ul>
<li>item 1</li>
<li>item 2</li>
<li class="trois">item 3
<ol><li>3.1</li></ol></li>
<li>item 4
<ol><li>4.1</li></ol></li>
<li>item 5</li>
</ul>
// cache 4 et 5
$('li.trois ~ li').hide();
// cache 4
$('li.trois + li').hide();
// cache les <ol>
$("ul ol")
// ne cache rien
$("ul > ol")
Sélecteurs de hiérarchie
Possibilité de sélectionner avec des fonctions
// frère suivant
.next(expr)
// frère précédent
.prev(expr)
// frères
.siblings(expr)
// enfants
.children(expr)
// père
.parent(expr)
Sélecteurs supplémentaires
// premier paragraphe
p:first
// dernier élément de liste
li:last
// quatrième lien
a:nth(3) ou a:eq(3)
// paragraphes pairs ou impairs
p:even or p:odd
every
// Tous les liens après (greater than) le quatrième ou avant
a:gt(3) or a:lt(4)
// Liens qui contiennent le mot click
a:contains('click')
(lower than)
Sélecteurs supplémentaires
Utilisation de is()
$("table td").each(function() {
if ($(this).is(":first-child")) {
$(this).addClass("firstCol");
}
});
Sélecteurs de visibilité
// si l'élément est visible
$("div:visible")
// sinon
$("div:hidden")
Sélecteurs de formulaires
// checkbox
$("input:checkbox")
// boutons radio
$("input:radio")
// bouton
$(":button")
// champ texte
$(":text")
Sélecteurs de formulaires
$("input:checked")
$("input:selected")
$("input:enabled")
$("input:disabled")
<select name="valeur">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
$("select option:selected").val()
Restriction
$("div")
.slice(1, 4)
.not("[name*='green']")
.addClass("couleur");
});
<div name="red"></div>
<div name="red"></div>
<div name="red"></div>
<div name="green"></div>
<div class="couleur"
name="red"></div>
<div name="red"></div>
<div name="green"></div>
<div name="green"></div>
<div class="couleur"
name="red"></div>
<div name="green"></div>
Modifier le contenu HTML
// modifier le contenu de tous les p du document
$("p").html("<div>Bonjour</div>");
// modifier le contenu de div.a en celui de div.c
$("div.a").html($("div.c").html());
// idem pour div.b avec échappement du contenu de div.c
$("div.b").text($("div.c").html());
<p></p>
<p><div>Bonjour</div></p>
<div id="a">Bonjour</div>
<div id="a"><a href="#">Au
revoir</a></div>
<div id="b"><a href="#">Au
revoir</a></div>
<div id="c"><a href="#">Au
revoir</a></div>
<div id="b"><a href="#">Au
revoir</a></div>
<div id="c"><a href="#">Au
revoir</a></div>
Modifier des valeurs
val() : permet d'obtenir la valeur des objets
val(valeur) permet de modifier la valeur des objets
// obtenir la valeur de toutes les checkbox validées
$("input:checkbox:checked").val();
// modifier la valeur d'une textbox de nom txt
$(":text[name=‘txt’]").val("Hello");
// select or check lists or checkboxes
$("#lst").val(["NY","IL","NS"]);
Manipulation de CSS
Il est possible de modifier les classes des objets :
addClass, removeClass, toggleClass
hasClass
// ajouter et supprimer une classe
$("p").removeClass("blue").addClass("red");
// ajouter si absent ou l'inverse
$("div").toggleClass("main");
// vérifier l'existence d'une classe
if ($("div").hasClass("main")) { //… }
Manipulation de CSS
// get style
$("div").css("background-color");
// set style
$("div").css("float", "left");
// set multiple style properties
$("div")
.css({
"color":"blue",
"padding": "1em",
"margin-right": "0",
marginLeft: "10px"
});
Insérer des éléments
// Ajouter à la fin de l'objet
$("<ul>").append("<li>Test</li>");
$("<li/>").html("Test").appendTo("ul");
// Ajouter au début
$("ul").prepend("<li>Test</li>");
$("<li/>").html("Test").prependTo("ul");
Remplacer des éléments
// remplace tous les <div>Test</div> par des <h1>
$("h1").replaceWith("<div>Test</div>");
// Remplace tous les h1 par un div
$("<div>Test</div>").replaceAll("h1");
// Sans modifier le contenu :
$("h1").each(function(){
$(this)
.replaceWith("<div>"+ $(this).html()+"</div>");
});
Supprimer des éléments
// supprimer
$("span.names").remove();
// vider tout le contenu
$("#mainContent").empty();
// déplacer
$("p")
.remove(":not(.red)")
.appendTo("#main");
Gestion des attributs
// <a href="home.htm">...</a>
$("a").attr("href","home.htm");
// met tous les attributs comme celui du premier bouton
$("button:gt(0)")
.attr("disabled",
$("button:eq(0)").attr("disabled));
// supprime l'attribut disabled
$("button").removeAttr("disabled")
Attributs multiples
$("img")
.attr({
"src" : "/images/smile.jpg",
"alt" : "Smile",
"width"
: 10,
"height" : 10
});
JQUERY
LES ÉVÉNEMENTS
LI288 – web et développement web
Le premier événement
Chargement de la page
$(document).ready(…)
Assez similaire
onLoad :
à onLoad() :
quand tout est chargé
ready : quand le DOM est prêt (avant chargement des
images)
$(document).ready(function(){
...
});
Gestionnaire d'événements
Événements disponibles :
blur,
focus, load, resize, scroll, unload, beforeunload,
click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change,
select, submit, keydown, keypress, keyup, error
Associer des événements
// associer une fonction à un événement
$("div").bind("click",
function() {$(this).text($(this).html()) + "test"});
// exécuter une seule fois (pour chaque objet)
$("div").one("click", function() {$(this).text("test")});
// arrêter d'exécuter l'événement
$("div").bind("click",
function() {$(this).text("test" + $(this).html());
$("div").unbind("click")});
Trigger
Force l'appel aux événements liés à un objet
<button>#1</button>
<button>#2</button>
<div>
<span>0</span> clics.
</div>
<div>
<span>0</span> clics.
</div>
$("button:first").click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$("button:first").trigger('click');
update($("span:last"));
});
function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
TriggerHandler
triggerHandler = trigger mais le comportement par
défaut n'est pas exécuté.
<button
id="old">.trigger("focus")</
button>
<button
id="new">.triggerHandler("fo
cus")</button>
<input type="text" value="To Be
Focused"/>
$("#old").click(function(){
$("input").trigger("focus");});
$("#new").click(function(){
$("input").triggerHandler("focus");});
$("input").focus(function(){
$("<p>Focus</p>").appendTo("body");});
L'objet Event - attributs
type :
nom de l'événement exécuté
target :
objet qui a exécuté l'événement
cf propagation des événements
currentTarget :
pageX et pageY :
= this
position de la souris
…
Un exemple : position de la souris
Exemple avec événement lié au déplacement de la
souris.
Via
un événement lié à tout le document.
<div id="log"></div>
<script>
$(document)
.bind('mousemove',function(e){
$("#log")
.text(e.pageX + ", " + e.pageY);
});
</script>
L'objet Event - méthodes
preventDefault / isDefaultPrevented :
bloque
le fonctionnement par défaut
stopPropagation / isPropagationStopped /
stopImmediatePropagation /
isImmediatePropagationStopped
Comportement par défaut
// modifier le comportement par défaut
$("div").triggerHandler("click");
// empêcher le comportement par défaut
function clickHandler(e) {
e.preventDefault();
}
// similaire à :
function clickHandler(e) {
return false;
}
Propagation des événements
Exemple : menu déroulant multi-niveaux.
Un clic se propage sur tous les objets associés :
Si on clique sur <li> Niveau 3 : item 2</li> alors on clique aussi sur le
<li> du niveau 2 et celui du niveau 1
On a donc trois alertes.
La propagation est ascendante.
$(document).ready(function () {
$("li").click(function () {
alert($(this).html());
});
});
<ul>
<li> Niveau 1 : item 1</li>
<li> Niveau 1 : item 2
<ul>
<li> Niveau 2 : item 1</li>
<li> Niveau 2 : item 2
<ul>
<li> Niveau 3 : item 1</li>
<li> Niveau 3 : item 2</li>
</ul></li></ul></li></ul>
Propagation des événements
On peut stopper la propagation des événements :
stopPropagation();
Ou
de manière similaire faire return false;
Attention cela
peut bloquer d'autres choses.
$(document).ready(function () {
$("li").click(function (e) {
alert($(this).html());
e.stopPropagation();
});
});
Evénements dans le futur
Un événement n'est appliqué qu'aux éléments qui existent :
Si un <div> est créé après l'ajout de l'événement, il ne sera pas
cliquable.
Avec live(), même si le <div> est créé plus tard, il sera cliquable.
die() détruit tous les événements live().
// attacher un événement même dans le futur
("div").live("click", fn);
// détacher les événements créés avec live
("div").die("click", fn);
Remarque
Le même événement peut être créé plusieurs fois :
Tous
les événements seront exécutés.
<a href="">clic</a>
<script>
$("a").click(function(event) {
alert(event.type);
});
$("a").click(function(event) {
alert(event.pageX + ", " + event.pageY);
});
</script>
JQUERY
LES EFFETS
LI288 – web et développement web
Apparition et disparition
// montrer un élément
$("div").show();
// montrer un élément lentement (slow=600ms)
$("div").show("slow");
// cacher un élément rapidement (fast=200ms)
$("div").hide("fast");
// inverser (montrer ou cacher) en une durée fixée
$("div").toggle(100);
Translation et fading
// Translation
$("div").slideUp();
$("div").slideDown("fast");
$("div").slideToggle(1000);
// Fading
$("div").fadeIn("fast");
$("div").fadeOut("normal");
// Fading avec opacité fixée
$("div").fadeTo("fast", 0.5);
Fin d'un effet
$("div")
.hide("slow", function() {
$("div").show("slow")});
$("div").hide();
$("a").click(function() {
$("div")
.show("fast", function() {
$(this).html("show div");});
});
Effet personnalisé
.animate(options, durée, transition, complete, ...) :
Options : ensemble de propriétés CSS.
Transition : comment se déroule l'animation (linéaire ou pas).
Complete : callback exécuté après la fin de l'animation.
…
// réduction de la largeur à 90%, ajout d'une bordure bleue de
largeur 5px et changement d'opacité. Le tout en 1s.
$("div")
.animate({
width: "90%",
opacity: 0.5,
borderWidth: "5px"},
1000);
Enchainement d'animations
Par défaut les animations sont effectuées l'une à la suite
de l'autre.
Modifiable en utilisant "queue:false".
// enchainement des animations
// modification du style,
// puis de la largeur
// et enfin de l'opacité
$("div")
.animate({border: "5px solid blue"},2000)
.animate({width: "20%"},2000)
.animate({opacity: 0.5},2000);
// animations simultanées
$("div")
.animate({border: "5px solid blue"},{queue:false, duration:100})
.animate({width: "20%"}, {queue:false, duration:2000})
.animate({opacity: 0.5},2000);
JQUERY
FONCTIONNALITÉS "AJAX"
LI288 – web et développement web
Charger du contenu
Pour mettre du contenu dans un objet :
c'est un peu plus simple qu'en "Ajax".
On peut ne récupérer qu'une partie du fichier
Attention :
tout le fichier est récupéré puis parsé.
// version sans arguments :
$("div").load("fichier.html");
// version avec arguments :
$("div#content").load(
"fichier.php",
{"nom":"guillaume"});
// version ne récupérant que l'objet d'id monid
$("div").load('test.html #monid');
Charger du contenu
Avec GET / POST
$.get(
"fichier.html",
{id:1},
function(data){
alert(data);
});
$.post(
" fichier.html",
{id:1},
function(data){
alert(data);
});
Les fonctions AJAX
.ajaxComplete()
.ajaxError()
Fonction à appeler avant l'envoi.
.ajaxStop()
Fonction à appeler au lancement de la requête.
.ajaxSend()
Fonction à appeler en cas de fin sur erreur
.ajaxStart()
Fonction à appeler à la fin de la requête.
Fcontion à appeler quand toutes les requêtes Ajax sont terminées.
.ajaxSuccess()
Fonction à appeler quand la requête termine avec succès.
Les fonctions AJAX
$('.log').ajaxStart(function() {$(this).append('Start.');});
$('.log').ajaxSend(function() {$(this).append('Send.');});
$('.log').ajaxComplete(function() {$(this).append('Complete.');});
$('.log').ajaxStop(function() {$(this).append('Stop.');});
$('.log').ajaxSuccess(function() {$(this).append('Success.');});
$('.trigger').click(function() {
$('.result').load('fichier.json');
});
<div class="trigger">
Trigger
</div>
<div class="result"></div>
<div class="log"></div>
<div class="trigger">
Trigger
</div>
<div class="result">[0]</div>
<div class="log">
Start.Send.Success.Complete.S
top.
</div>
Récupérer du JSON - Javascript
$.getJSON(
"fichier.json",
{id:1},
function(users) {
alert(users[0].name);
});
$.getScript(
"script.js",
function() {
...;
});
De manière générale
Il existe la fonction ajax générique :
Toutes
les autres fonctions sont un cas particulier de
celle-ci.
$.ajax({
async: false,
type: "POST",
url: "test.html",
data: "nom=JL",
success: function(msg){
alert( "Data Saved: " + msg );}
});
Attention
Les événements AJAX ne sont pas liés à un appel en
particulier :
il
faut se souvenir des appels et retrouver d'où est venu
l'appel
$('.log')
.ajaxComplete(function(e, xhr, settings) {
if (settings.url == 'ajax/test.html') {
$(this).text('ok.');
}
});
CONCLUSIONS
LI288 – web et développement web
Javascript
Code dense (pas de typage)
DOM permet de modifier simplement des pages
HTML
Recherche
par ID, par nom, ...
Gestion d'événements
Permet de
rendre tout plus interactif
Validation de formulaires, dialogues, etc.
AJAX (cours 2/3)
Ajax
Combinaison des langages standards du WEB
(Javascript, DOM HTML, XML)
Grâce à l‟objet XMLHttpRequest
WEB dynamique « coté client »
Utilisé par tous les sites « WEB 2.0 »
Un outil à utiliser en attendant le déploiement du
HTML5 (prévu pour 2010)
jQuery
Possibilité de récupérer des objets du DOM.
Evénements et animations.
AJAX.
Tout ça de manière indépendante des navigateurs.
Mais encore
En plus des fonctions, on a accès à de nombreuses
fonctions d'interface utilisateur (jQuery-UI) :
Drag and drop
Tableaux triables
Accordéons
Eléments triables
Barres de progression
Onglets
…
Plugins
plus de 4000 plugins actuellement
