Html, OData e Javascript
Partecipando alle riunioni dei soci di DOT NET Campania ho capito quanto fosse necessario cominciare a studiare un po’ di Javascript in prospettiva di lavorare su HTML 5. La prima esigenza che ho avvertito è stata quella di collegare la pagina a una fonte dati. Ho quindi creato una pagina HTML contenente una mappa di Google e dei marker posizionati in punti estratti mediante un servizio OData.
Il servizio OData è disponibile al seguente indirizzo ed offre informazioni su una serie di concerti tenuti dagli U2 negli anni 80 in Irlanda. Un esempio di concerto (denotato dal tag <entry>) è il seguente:
![CropperCapture[31]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/1385.CropperCapture31_5F00_thumb_5F00_2CC1BC8B.jpg "CropperCapture[31]")
Per consumare il servizio in una pagina HTML tramite Javascript ho utilizzato una fantastica libreria chiamata datajs, pubblicata su Codeplex al seguente indirizzo.
![CropperCapture[32]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/3463.CropperCapture32_5F00_thumb_5F00_7955D361.jpg "CropperCapture[32]")
Il body della pagina si limita ad associare all’evento onload la funzione initialize:
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
![CropperCapture[33]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/3051.CropperCapture33_5F00_thumb_5F00_7BCEDF52.jpg "CropperCapture[33]")
La funzione initialize crea la mappa Google e poi tramite la libreria datajs legge il servizio Odata tramite la function (data). In essa eseguiamo un loop sui risultati della query: ad ogni concerto associamo un marker sulla mappa Google invocando la funzione addMarker.
![CropperCapture[34]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/0083.CropperCapture34_5F00_thumb_5F00_0B224162.jpg "CropperCapture[34]")
Il risultato è il seguente:
![CropperCapture[35]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/1856.CropperCapture35_5F00_thumb_5F00_3D396BDF.jpg "CropperCapture[35]")
Allego il codice sorgente della pagina HTML e la libreria Javascript necessaria al collegamento.