1 / 19

Javascript : Ajax & Mashups

Javascript : Ajax & Mashups. Mastère MNT 2006. http://www.flickr.com/photos/backwards_hat/132165777/. 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).

stacie
Download Presentation

Javascript : Ajax & Mashups

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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) Stéphane ROUILLY

  3. 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 Stéphane ROUILLY

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

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

  6. 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. Stéphane ROUILLY

  7. 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 Stéphane ROUILLY

  8. 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()″ Stéphane ROUILLY

  9. 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> Stéphane ROUILLY

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

  11. 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 Stéphane ROUILLY

  12. 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 Stéphane ROUILLY

  13. …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’)″> Stéphane ROUILLY

  14. 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 Stéphane ROUILLY

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

  16. 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 Stéphane ROUILLY

  17. 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’)); Stéphane ROUILLY

  18. 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); Stéphane ROUILLY

  19. 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 Stéphane ROUILLY

More Related