p1 octobre 2006stéphane rouilly javascript : ajax & mashups mastère mnt 2006
TRANSCRIPT
![Page 1: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/1.jpg)
Octobre 2006 Stéphane ROUILLYp1
Javascript : Ajax & Mashups
Mastère MNT 2006
http://www.flickr.com
/photos/backwards_hat/132165777/
![Page 2: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/2.jpg)
Octobre 2006 Stéphane ROUILLYp2
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)
![Page 3: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/3.jpg)
Octobre 2006 Stéphane ROUILLYp3
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
![Page 4: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/4.jpg)
Octobre 2006 Stéphane ROUILLYp4
Se Préparer À Coder !
• Firefox et IE• Extensions FF : firebug,
webdeveloper, ietab au minimum. Sous IE, barre developer IE
![Page 5: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/5.jpg)
Octobre 2006 Stéphane ROUILLYp5
Chatter
http://www.flickr.com
/photos/xti/26865170/
![Page 6: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/6.jpg)
Octobre 2006 Stéphane ROUILLYp6
Sujet : Un Chat Géocodé
• Construire un chat qui garde la trace de la localisation de l’internaute via son adresse IP.
• Le chat garde trace de la conversation et de l’IP dans un simple fichier html.
• En un clic on peut connaître sa localisation (lon/lat) en un autre la situer sur une carte.
![Page 7: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/7.jpg)
Octobre 2006 Stéphane ROUILLYp7
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
![Page 8: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/8.jpg)
Octobre 2006 Stéphane ROUILLYp8
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, l’autre pour placer sur la carte– <div id=″journal″
style=″width=200px″></div>– <input id=″phrase″ type=″text″ />– Rappel : href=″javascript:envoyer()″
![Page 9: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/9.jpg)
Octobre 2006 Stéphane ROUILLYp9
Ahah vs. Ajax
• Ahah récupère du html au lieu d’xml (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 : • <script src=″ahah.js″></script>
![Page 10: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/10.jpg)
Octobre 2006 Stéphane ROUILLYp10
Lire, écrire…
http://www.flickr.com
/photos/emdot/32179191/
![Page 11: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/11.jpg)
Octobre 2006 Stéphane ROUILLYp11
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
![Page 12: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/12.jpg)
Octobre 2006 Stéphane ROUILLYp12
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
![Page 13: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/13.jpg)
Octobre 2006 Stéphane ROUILLYp13
…l’IP
• Le script php « chat.php » doit se trouver dans votre répertoire, il crée aussi en html un lien avec l’adresse IP de l’utilisateur :
• <a href=″javascript:recherche(‘23.44.5.6’)″>
![Page 14: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/14.jpg)
Octobre 2006 Stéphane ROUILLYp14
Fin de l’Etape 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
![Page 15: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/15.jpg)
Octobre 2006 Stéphane ROUILLYp15
http://www.flickr.com
/photos/andreweason/43011718/
Carto
![Page 16: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/16.jpg)
Octobre 2006 Stéphane ROUILLYp16
Géolocalisation
• Pour géolocatiser l’adresse ip on s’appuie sur hostip.info (le tester)
• Impossible de l’appeler en direct (cross domain), on passe donc par un proxy : proxy.php (
• ″proxy.php?yws_path=http://api.hostip.info/get_html.php?position=true&ip=″ + ip, (attention astuce &=%26)
• On affiche le résultat html dans le journal
![Page 17: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/17.jpg)
Octobre 2006 Stéphane ROUILLYp17
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’));
![Page 18: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/18.jpg)
Octobre 2006 Stéphane ROUILLYp18
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);
![Page 19: P1 Octobre 2006Stéphane ROUILLY Javascript : Ajax & Mashups Mastère MNT 2006](https://reader036.vdocuments.pub/reader036/viewer/2022062621/551d9d8c497959293b8c0ded/html5/thumbnails/19.jpg)
Octobre 2006 Stéphane ROUILLYp19
Pistes d’Amélioration
• Rendre visible la carte uniquement lorsque l’on 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 l’ip (lisible) par un pseudo