JavaScript pour AJAX - portailweb.universita.corsica€¦ · Dans le cas d'AJAX, Javascript est le...
Transcript of JavaScript pour AJAX - portailweb.universita.corsica€¦ · Dans le cas d'AJAX, Javascript est le...
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
1
AJAX et PHPIUT LPM - M24.1
Capocchi [email protected]://spe.univ-corse.fr/capocchiweb
JavaScript pour AJAX
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
2
Introduction
La principale fonction des langages de script coté client est de déplacer des fonctionnalités serveur vers le client.
Dans le cas d'AJAX, Javascript est le moyen idéal de demander des données au serveur et de les insérer via DHTML.
JavaScript constitue donc avec (X)HTML une technique essentielle de l'environnement AJAX.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
3
Sommaire
JavaScript pour AJAX
Ajout de code JavaScript à une page Web
Tester si JavaScript est activé sur le client
Principales structures de JavaScript
Fonctions, procédure et méthodes
Objets dans JavaScript
Création d'objets
Gestion des exceptions
DOM de la perspective de JavaScript
Appels directs de fonctions à partir de JavaScript
Conclusion
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
4
Ajout de code JavaScript à une page Web
Notation directe
<script language=''javascript''><!-- [instructions de script]//--></script>
Une balise <script> peut être placée à n'importe quel endroit d'une page HTML.
Les commentaires sont présent au cas où le navigateur est incapable d'interpréter le code (de plus en plus rare!).
Un conteneur <script> peut inclure optionnellement un conteneur <noscript> dans lequel est placer le contenu alternatif à afficher lorsque JavaScript est désactivé.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
5
Ajout de code JavaScript à une page Web
Liaison d'un fichier JavaScript externe
<script language=''javascript'' src=''monJS.js''></script>
Plus efficace que la notion directe:
Permet d'appliquer les mêmes fonctionnalités à plusieurs pages.
Permet une simplification de la gestion du code.
Permet d'obtenir une séparation entre la structure et les fonctionnalités.
Le conteneur <script> doit être toujours vide (sans espace).
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
6
Ajout de code JavaScript à une page Web
Référence en ligne
<a href=''javascript:alert('La réponse est 42')''>
Inconvénient: le code devient vite illisible !
Elle se limite souvent aux élément <a> et <area>.
Les références en ligne sont généralement remplacées par des gestionnaires d'événements car ils offrent plus de possibilités qu'un simple clic de l'utilisateur.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
7
Tester si JavaScript est activé sur le client
Teste pour savoir si votre code vas effectivement être exécuté chez le visiteur de votre site:
On exploite le faite que le code ne sera pas exécuté en cas de désactivation.
Exemple: vous implémentez avec JavaScript une redirection vers une autre URL (page d'acceuil), et si elle marche, c'est qu'il est activé. Sinon redirection vers une version non Ajax de votre page !
Les redirections sont également possibles aves HTML sans JavaScript:
<meta http-equiv=''refresh'' content=''delai'';URL=[cible]''>
L'astuce consiste à exécuter la redirection HTML après la redirection JavaScript si cette dernière échoue.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
8
Tester si JavaScript est activé sur le client
Exemple:
<html><head><meta http-equiv=''refresh'' content=''5;URL=sansAJAX.html''></head><script langage=''javascript''><!--location.href=''avecAJAX.html'';//--></script><body><a href=''sansAJAX.html''> si la redirection ne fonctionne pas, cliquez ici pour accéder à une version du site sans AJAX</a></body></html>
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
9
Principales structures de JavaScript
La syntaxe de la plupart des structures JavaScript est tirée du langage C.
Javascript est sensible à la casse.
Variables et types de données
Typage faible: à la volée, en même temps que la variable reçoit une valeur.
Peut changer pendant l'exécution du script.
Cependant, il existe des types de données prédéfinis:
Boolean (AJAX=true;)
Number (a=123.455;)
Object (objRequete = new XMLHttpRequest();)
String (a=''Felix'';)
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
10
Principales structures de JavaScript
Les tableaux
Lorsqu'un navigateur charge une page, il place dans des tableaux accessibles via JavaScript les éléments de même type.
Déclaration:
a = new Array(30);
Remplissage:
a[0]=1;a[1]=1;...a[29]=30;
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
11
Principales structures de JavaScript
Les instructions
Une instruction JavaScript peut occuper plusieurs lignes dans l'éditeur et se termine toujours par un point-virgule.
Sortes d'instructions:
Les blocs sont délimité par les accolades et contiennent plusieurs instructions
Les expressions: poids=98+3;
Les commentaires possède la même syntaxe qu'en C.
Les instructions conditionnelles: if, if-else et switch-case.
Les boucles: while, do-while et for
Les instructions de saut: break et continue
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
12
Fonction, procédure et méthodes
Pour appeler une fonction ou méthode Javascript à partir d'une page Web, vous pouvez utiliser:
un gestionnaire d'événements,
Un gestionnaire d'événements propre à JavaScript,
Un Script.
Une fonction ou procédure n'est pas exécutée lors de sont chargement mais uniquement lorsqu'elle est appelée.
Fonctions personnalisées
déclaration
function [nom] ([liste de paramètres]){... instructions}
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
13
Fonction, procédure et méthodes
Lorsqu'une fonction est censée retourner une valeur, vous devez le spécifier grâce au mot clé return.
JavaSript permet les appels récursifs souvent utilisés dans AJAX.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
14
Objets dans JavaScript
Javascript est basé objet (se n'est pas un langage objet !)
On utilise la notation pointée pour se référer à des méthodes et des attributs d'un objet:
objet.nom_méthode(argument)
ex.: objRequete.open('get','lander.php?ou='+i,true);
Création explicite avec constructeur:
var [objet] = new [déclaration d'objet] ([paramètres optionnels])
ex.: objRequete = new ActiveXObject(''MSXML2.XMLHTTP''); objRequete = new XMLHttpRequest(); objDate = new Date();
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
15
Gestion des exceptions
Une exception correspond à une situation qui demande une réaction immédiate;
Saisie d'information inattendues,
Opération de calcul erronée (division par 0),
Échec de création d'objet...
En l'absence d'une réaction adaptée, l'exécution ne peut se poursuivre normalement et doit être interrompue.
Dans JavaScript, les exceptions sont:
Soit gérées automatiquement par l'interpréteur,
Soit créées par le programmeur lorsque c'est nécessaire.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
16
Gestion des exceptions
Exception sous forme d'objets
Une exception se manifeste dans un script sous la forme d'une erreur d'exécution pouvant être décrite de manière assez standardisée.
ECMAScript Edition 3 (i.e JavaScript 1.5), dispose d'un objet erreur nommée Error.
Des instances de ces objets sont crées en tant qu'exceptions lorsqu'une erreur connue survient:
EvalError,
RangeError,
ReferenceError,
TypeError,
SyntaxeError....
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
17
Gestion des exceptions
Interception d'exceptions
Déclaration
try{[instructions critiques]
}catch ([expression]) {
[mesure à prendre]}
Un bloc try doit être suivi au minimum d'un bloc catch.
Pour permettre une gestion efficace des exceptions, les instructions critiques doivent toujours être exécutées au sein d'une structure try-catch.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
18
Gestion des exceptions
Fonction universelle de création d'un objet XMLHttpRequest
La gestion des exceptions est essentiel pour pouvoir écrire une fonction de création d'un objet XMLHttpRequest universelle est portable.
La logique est la suivante:
Soit la création de l'objet XMLHttpRequest réussit
Soit elle échoue (navigateur ou analyseur XML incompatible)
Auquel cas cela produit une exception que nous interceptions.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
19
Gestion des exceptions
Fonction universelle de création d'un objet XMLHttpRequest
Function creeXMLHttpRequestObject(){var objRequete = null;try {
objRequete = new ActiveXObject(''Microsoft.XMLHTTP'');}catch(Error){
try {objRequete = new ActiveXObject(''MSXML2.XMLHTTP'');
}catch(Error){
try {objRequete = new XMLHttpRequest();
}catch(Error){
alert(''Impossible de créer l'objet XMLHttpRequest);}
}}return objRequete;
}
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
20
Gestion d'objets personnalisés
JavaScript n'est pas un langage orienté objet:
Il ne supporte pas l'écriture de class ni le principe d'héritage.
JavaScript permet de créer dans certaines limites des objets:
Vous devez spécifier une déclaration d'objet,
Vous devez créer une instance de l'objet partir de cette déclaration.
Syntaxe de déclaration et de création d'une instance:
function [nom de la fonction](){.... [description des propriétés]
}var [instance de l'objet] = new [nom de la fonction]
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
21
Gestion d'objets personnalisés
Mot clé this
Il permet de désigner l'objet courant.
Lorsque vous déclarez une variable de la forme this.[variable] dans une méthode constructeur, cette notation représente un accès à une propriété de l'objet crée par la méthode:
exemple:
function creeXMLHttpRequestObjet() {this.objRequete = new
ActiveXObject(''Microsoft.XMLHTTP''));}
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
22
Gestion d'objets personnalisés
Création d'objet
L'exemple suivant inclut dans la déclaration d'objet CreeObjetAjax() une référence à la fonction creeXMLHttpRequestObject() au moyen de this:
function CreeObjetAjax(){this.creeXMLHttpRequestObject=
creeXMLHttpRequestObect;}
Création d'un objet à partir d'une déclaration d'objet personnalisé er appel d'une méthode:
o = new CreeObjetAjax();objRequete = o.creeXMLHttpRequestObject();
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
23
DOM de la perspective de JavaScript
La plupart des objets que vous employer forme une bibliothèque d'objets n'appartenant pas à JavaScript mais au modèle DOM.
Lorsqu'un navigateur compatible avec DOM charge une page, il indexe tous les éléments connus et identifiables d'après leur type, leurs propriétés, et leur position dans le document.
Ces éléments (ou objet) sont ensuite accessibles à des scripts par le biais de tableaux spéciaux appelés collections ou par leur nom s'ils possède un attribut name.
Exemple: Accès au troisième formulaires d'une page Web:
window.document.forms[2];
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
24
DOM de la perspective de JavaScript
Les éléments d'un formulaire sont accessibles:
window.document.forms[2].elements[0];
Dans la cas d'objet évidents, la notation pointée peut être abrégée:
Au lieu d'écrire window.prompt() ou window.alert(), on emploi simplement prompt() ou alert()
document au lieu de window.document
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
25
DOM de la perspective de JavaScript
Quelques objets disponibles dans JavaScript:
document: représente une page Web.
event: généré par des événements cotés client.
form: contient une référence à un objet de type formulaire.
frame: contient une référence à une frame.
history: contient des informations sur les URL visitées.
image: contient une référence à une image.
link: contient une référence à un hyperlien.
location: permet d'accéder à la barre d'adresse.
window: contient les informations d'état de la fenêtre.
navigator: contient des informations sur le navigateur.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
26
DOM de la perspective de JavaScript
Collections disponibles dans JavaScript
anchors: contient des références aux ancres d'une page.
applets: contient des références aux applets Java.
elements: contient des références aux éléments d'un formulaire:
Ces éléments sont représenté par:
Button, CheckBox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text, Textarea.
forms: contient des références aux formulaires.
images: contient des références aux images.
options: contient des références aux options d'un élément de formulaire de type Select.
plugins: contient des références aux plugins installés.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
27
DOM de la perspective de JavaScript
Techniques JavaScript importantes
Accès à un formulaire
L'interaction se déroule au travers d'un formulaire obtenu par:window.document.forms[numéro formulaire]
ouwindow.document.forms[name_formulaire]
outhis.form
1er forme avantageuse au milieu d'une boucle ou lorsque le formulaire ne possède pas de paramètre name.
2ième forme plus lisible et tolérante aux changements de structure de la page.
Attention: Vous ne pouvez pas accéder à un formulaire au moyen de JavaScript tant que le navigateur n'a pas traité la structure HTML et crée les objets (position des instructions JS)
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
28
DOM de la perspective de JavaScript
Soumission et réinitialisation d'un formulaire
Submit(): fonction permettant à un objet formulaire d'envoyer ces informations au serveur.
Elle est appelée lorsque l'utilisateur valide le formulaire par:
Un hyperlien, un bouton, autre gestionnaire d'événement...
Exemple:<html><body><form action= '' '' method='' get '' ><input name=''a''><br><input type=''button'' value=''OK''
onClick=''window.document.forms[0].submit()''></form></body></html>
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
29
Appels directs de fonctions à partir de JS
Invocation explicite d'un gestionnaire d'événements
Le codage de l'appel du gestionnaire d'événement se fait à partir d'un script (plus dans une balise HTML).
Le gestionnaire est libéré du contexte HTML et est directement lié à JavaScript.
Exemple:<html><script language=''JavaScript''>
function mFunction() {alerte(''Bienvenue'' );
}</script><body><form name=''mF''><input type=''button'' name=''mB'' value=''OK''></form><script language=''JavaScript''>
document.mF.mB.onclick=mFonction</script></body></html>
mFonction devient
une propriété d'objet:
sans parenthèses
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
30
Appels directs de fonctions à partir de JS
Invocation explicite d'un gestionnaire d'événements
L'objet event
L'objet event contient des informations sur un événement qui s'est produit quelque par dans la page.
Les conséquences de ce mécanisme sont les suivantes:
La surveillance d'événement est programmée directement dans un script (lien avec HTML rompu).
Il est possible d'implémenter une gestion d'événement globale.
Exemple: Un utilisateur clique dans une zone de la page. L'objet event produit contient alors les information:
La touche de la souris activée;
La touche éventuellement pressée: Ctrl, Alt, Alt Gr, Maj
Les coordonnées du pointeur de la souris
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
31
Appels directs de fonctions à partir de JS
Invocation explicite d'un gestionnaire d'événements
Réaction à un objet event
Lorsqu'un objet event est créé, il est répercuté tout au long de la hiérarchie d'objets en amont du document.
Exemple: Si vous cliquez sur ''Cliquez'': une fenêtre 'span' s'affiche, puis une fenêtre 'h1'... jusqu'à la fenêtre 'body'.<html><body onclick=''alert('body')''><div onclick=''alert('div')''><h1 onclick=''alert('h1')''><span onclick=''alert('span')''>Cliquez</span></h1></div></body></html>
Si vous cliquez dans une autre zone de la page, vous ne recevez que la notification pour body.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
32
Appels directs de fonctions à partir de JS
Invocation explicite d'un gestionnaire d'événements
Enregistrement d'un listener
Il s'agit de l'emploi d'un « écouteur » dont l'affectation est possible pour certains objets spécifiques:
Un événement survient au niveau d'un objet (source de l'événement).
L'objet événement est toujours transmis à une cible (d'après le DOM) par le processus de remonté.
Si un listener a été associé sur une cible, il est déclenché.
La gestion de l'événement et la réaction à déclencher sont décidées au niveau du listener.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
33
Appels directs de fonctions à partir de JS
Invocation explicite d'un gestionnaire d'événements
Enregistrement d'un listener
Dans la version 2 du modèle d'événements DOM:Element.addEventListener(''type_événement'',fonct
ion,capture)
''type_événement'' = click ou mouseover par exemple.
Le paramètre fonction est une référence à la fonction à appeler.
Capture est une va leur booléenne qui indiquesi la fonction agit comme capteur.
Université de Corse - IUT LPM - M24.1 – AJAX et PHPa
34
Bibliographie
AJAX et PHP, Ralph Steyer, CampusPress, Pearson Education.