GIS and Media fusion
"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild
User Tools
ajax:w3c
Differences
This shows you the differences between two versions of the page.
|
ajax:w3c [2011/05/25 21:21] oertz |
ajax:w3c [2018/05/15 17:18] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Quelques mises au point W3C ====== | ||
| - | ===== Manipulations DOM en JS ===== | ||
| - | |||
| - | * Analysez cette exemple : | ||
| - | http://ogo.heig-vd.ch/ajax/Exemples/1_Manipulation_DOM_en_JS | ||
| - | |||
| - | ===== TP1 ===== | ||
| - | |||
| - | * En partant de cette structure brut de XHTML : http://ogo.heig-vd.ch/ajax/TP1_w3c/TP1_solution_1.html | ||
| - | * On souhaite obtenir le résultat comme présenté ici (cf. démo) | ||
| - | * Quelques suggestions : | ||
| - | * ajouter un style de classe pour les sous-menu et une identification de chacun des sous-menu | ||
| - | * ajouter et utiliser adéquatement une fonction pour cacher tous les sous-menu | ||
| - | * ajouter et utiliser adéquatement une fonction pour ne montrer qu'un des sous-menu (type menu-réroulant) | ||
| - | * enrichir le style de la page pour obtenir une présentation type « sidebar » | ||
| - | |||
| - | ===== TP2 ===== | ||
| - | |||
| - | * On souhaite obtenir le résultat comme présenté ici (cf. démo) : | ||
| - | * on dispose d'une partie cliente avec un formualaire de saisie d'un livre | ||
| - | * un livre possède deux informations de base (titre et n°isbn) et d'une liste d'auteurs | ||
| - | |||
| - | {{:ajax:screenshot.png|screenshot}} | ||
| - | |||
| - | * Quelques suggestions : | ||
| - | * construire le formulaire XHTML/CSS | ||
| - | * ajouter les interactions d'ajout/suppression | ||
| - | * mise en évidence des liens actions en orange (onmouseover) | ||
| - | * ajout/suppression de noeud de saisie (onclick) | ||
| - | * ajouter l'envoi en GET du formulaire sur l'interface de traitement ci-fournie ({{:ajax:form_action.php.zip|form_action.php}}) ou à défaut sur http://www.w3schools.com/tags/form_action.asp | ||
| - | |||
| - | ====== JSON ====== | ||
| - | |||
| - | * Analysez l'exemple : http://ogo.heig-vd.ch/ajax/Exemples/JSONcodec.html | ||
| - | |||
| - | ====== XMLHTTPRequest ====== | ||
| - | |||
| - | * Quelques liens pour renforcer la théorie : | ||
| - | * http://www.xul.fr/xml-ajax.html | ||
| - | * http://www.toutjavascript.com/savoir/xmlhttprequest.php3 | ||
| - | |||
| - | * Première requête AJAX avec l'objet XMLHTTPRequest en reprenant la solution du TP2 | ||
| - | * On souhaite appliquer le modèle d'application AJAX | ||
| - | * Quelques suggestions : | ||
| - | * remplacer le comportement par défaut de soumission de formulaire par un événement onclick | ||
| - | * construire l'URL cible en composant notamment la query string (cf. http://www.w3schools.com/jsref/dom_obj_form.asp) | ||
| - | * créer une instance XMLHttpRequest et préparer la fonction "callback" qui traite la réponse | ||
| - | * la réponse sera simplement injectée dans un élément <div> de l'IHM | ||
| - | |||
| - | ====== TP3 ====== | ||
| - | |||
| - | * En partant du début d'application web suivante {{:ajax:tp3_xhr.zip|}} | ||
| - | * on dispose d'une partie client XHTML qui pose le décor (l'IHM) avec deux listes de sélection | ||
| - | * en fonction de la première (l'utilisateur sélectionne une famille), il s'agit d'alimenter la seconde (les espèces de la famille choisie) | ||
| - | * à chaque nouveau choix de famille, les espèces sont obtenues par dialogue avec le serveur au travers du service fourni getSpecies.php (cf. son entête) | ||
| - | * On souhaite donc obtenir le résultat comme présenté ici (cf. démo) | ||
| - | * Plus de suggestions cette fois-ci ! | ||
| - | * sauf une référence http://www.w3schools.com/jsref/dom_obj_select.asp | ||
ajax/w3c.txt · Last modified: 2018/05/15 17:18 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
