Upload
laurette-gauthier
View
103
Download
0
Embed Size (px)
Citation preview
Octobre 2006 Stéphane ROUILLYp1
Javascript : Ajax & Mashups
Mastère MNT 2006
http://www.flickr.com
/photos/backwards_hat/132165777/
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)
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
Octobre 2006 Stéphane ROUILLYp4
Se Préparer À Coder !
• Firefox et IE• Extensions FF : firebug,
webdeveloper, ietab au minimum. Sous IE, barre developer IE
Octobre 2006 Stéphane ROUILLYp5
Chatter
http://www.flickr.com
/photos/xti/26865170/
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.
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
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()″
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>
Octobre 2006 Stéphane ROUILLYp10
Lire, écrire…
http://www.flickr.com
/photos/emdot/32179191/
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
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
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’)″>
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
Octobre 2006 Stéphane ROUILLYp15
http://www.flickr.com
/photos/andreweason/43011718/
Carto
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
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’));
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);
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