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