Quelques mises au point W3C

Manipulations DOM en JS

Analysez cet exemple :

http://ogo.heig-vd.ch/ajax/Exemples/1_Manipulation_DOM_en_JS

En cas de panne JavaScript, voici un bon point d'entrée pour se mettre à jour :

http://www.w3schools.com/js/js_intro.asp

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 »

Le corrigé : http://ogo.heig-vd.ch/ajax/TP1_w3c/TP1_solution_4.html

TP2

On souhaite obtenir le résultat comme présenté ici (cf. démo et sceeenshot ci-dessous) :

on dispose d'une partie cliente avec un formulaire de saisie de livre

un livre possède deux informations de base (titre et n°isbn) et d'une liste d'auteurs

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 (form_action.php) ou à défaut sur http://www.w3schools.com/tags/form_action.asp

JSON

Il faut d'abord se souvenir comment créer un objet en JavaScript : http://www.w3schools.com/js/js_objects.asp

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