P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006

Présentation au sujet: "P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006"— Transcription de la présentation:

1 p1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006 http://www.flickr.com/photos/backwards_hat/132165777/

2 p2 Octobre 2006Stéphane ROUILLY Acquis ? Rapport avec java ? Langage interprété coté client Non typé (utiliser var, casting) Tout peut être objet (a.length) Conditions / opérateurs (doubles, triples, inline)

3 p3 Octobre 2006Stéphane ROUILLY Bases Du Langage & plus Bases : –Reste les tableaux et les fonctions –Insertion et affichage : hello Word DOM : 1ère page JS + new DOM Moderne : –Ajax

4 p4 Octobre 2006Stéphane ROUILLY Se Préparer À Coder ! Firefox et IE Extensions FF : firebug, webdeveloper, ietab au minimum. Sous IE, barre developer IE

5 p5 Octobre 2006Stéphane ROUILLY Chatter http://www.flickr.com/photos/xti/26865170/

6 p6 Octobre 2006Stéphane ROUILLY Sujet : Un Chat Géocodé Construire un chat qui garde la trace de la localisation de linternaute via son adresse IP. Le chat garde trace de la conversation et de lIP dans un simple fichier html. En un clic on peut connaître sa localisation (lon/lat) en un autre la situer sur une carte.

7 p7 Octobre 2006Stéphane ROUILLY Le Principe De Base Chat : lire Pour lire toutes les contributions, rafraîchissement régulier. On ne recharge que la zone nécessaire Le contenu des conversations se trouve dans un fichier texte Schéma

8 p8 Octobre 2006Stéphane ROUILLY Conception de base Créer une page html (avec pspad ?) contenant 2 div : les conversations et le journal, un champ texte pour les phrases et 2 liens, un pour envoyer la phrase, lautre pour placer sur la carte – – Rappel : href=javascript:envoyer()

9 p9 Octobre 2006Stéphane ROUILLY Ahah vs. Ajax Ahah récupère du html au lieu dxml (lisible sans transformation). Sa syntaxe est un peu plus simple. Usage : Ahah(url, div); Télécharger la bibliothèque ahah.js puis la charger dans la page :

10 p10 Octobre 2006Stéphane ROUILLY Lire, écrire… http://www.flickr.com/photos/emdot/32179191/

11 p11 Octobre 2006Stéphane ROUILLY Pour Lire… Nommer les div et le input (par ex conversations / journal et phrase, pour faire simple) Créer un fichier html vide (texte.html) qui contiendra les conversations Le charger régulièrement dans la div en ahah : (soucis de cache ? + date !) –ahah(texte.html, conversations); –setInterval(,2000); // 2sec

12 p12 Octobre 2006Stéphane ROUILLY Pour Écrire… Appeler la page chat.php qui écrit ce qui lui est passé en paramètre dans texte.html : (montrer contenu texte.html) – chat.php?phrase=bonjour La phrase tapée est accessible via le DOM : – document.getElementById(phrase).innerHTML Faire cela en ahah en concaténant

13 p13 Octobre 2006Stéphane ROUILLY …lIP Le script php « chat.php » doit se trouver dans votre répertoire, il crée aussi en html un lien avec ladresse IP de lutilisateur :

14 p14 Octobre 2006Stéphane ROUILLY Fin de lEtape 1 A ce point on doit pouvoir lire et écrire. Les contributions doivent apparaître au fur et à mesure. Le lien « placer sur la carte » ne fonctionne pas encore

15 p15 Octobre 2006Stéphane ROUILLY http://www.flickr.com/photos/andreweason/43011718/ Carto

16 p16 Octobre 2006Stéphane ROUILLY Géolocalisation Pour géolocatiser ladresse ip on sappuie sur hostip.info (le tester) Impossible de lappeler en direct (cross domain), on passe donc par un proxy : proxy.php ( proxy.php?yws_path=http://api.hostip.info/get_html.php?positio n=true&ip= + ip, (attention astuce &=%26) On affiche le résultat html dans le journal

17 p17 Octobre 2006Stéphane ROUILLY Créer Une Carte Api google maps : demander une clé pour le domaine Créer un nouveau div (ex map ) Créer une carte dessus : (cf doc) –var map=new Gmap(document.getElementById(map));

18 p18 Octobre 2006Stéphane ROUILLY Récupérer la géolocalisation Parser… var info=document.getElementById(journal).innerHTML; var reg= new RegExp([0-9.]+, g)); var coordonnees = info.match(reg); // tableau lon / latitude …Et placer sur la carte : map.centerAndZoom(new GPoint(coordonnees[1],coordonnees[0]), 12);

19 p19 Octobre 2006Stéphane ROUILLY Pistes dAmélioration Rendre visible la carte uniquement lorsque lon localise (visibility:hidden) Afficher une bulle avec le nom de la ville map.openInfoWindow(map.getCenter(), document.createTextNode(info)); Mettre une CSS pour enjoliver Remplacer ahah par ajax pour ne même pas avoir à parser le html Rafraichir à chaque envoi de phrase Remplacer lip (lisible) par un pseudo