Non chiedetemi perchè, ma sono sempre stato uno sfegatato appassionato di Javascript. Sì, avete letto bene. proprio lui, l'odiata bestia nera dei programmatori web, il mostro del debugger, l'antitesi della programmazione ordinata. Eppure con javascript ho fatto le mie più belle cose. Ricordo ad esempio nel lontano 2002 quando ho sviluppato una piattaforma di elearning che sviluppai appoggiandomi ad un componente oggi arcinoto, tale XmlHttpRequest, una specie di player per corsi in formato SCORM che sfruttava una sorta di antidiluviano AJAX per evitare il postback. Tra l'altro lo faceva con un frameset e incorporava un mini serializzatore/deserializzatore XML scritto tutto in Javascript ad oggetti.
Poi con la nascita dei "dialetti" di Javascript altenativi a Internet Explorer lavorare con esso è diventato solo fonte di repentini mal di capo perciò ho lasciato un po' perdere a favore del server-side. Da qualche giorno però è unscita una cosa che promette di regalare una nuova giovinezza al mio infantile amore. Non so quanti se ne siano accorti, ma assieme al rilascio del decantato ASP.NET AJAX 1.0 è arrivata una splendida libreria Javascript cross-browser. Non per svalutare AJAX per carità, conosco qualcuno che me la potrebbe far pagare per questo, ma devo dire che la Microsoft Ajax Library in questione è infinitamente più apprezzata dal mio punto di vista.
Tanto per darvi un'idea, avete presente che cosa occorreva fare per una semplice getElementById()? Ecco, ora il codice si limita alla seguente:
var element = $get('elementid');
Il tutto naturalmente cross-browser. Questo esempio è banale, ma se si mettono in conto tutti gli oggetti creati in questa fantastica libreria la programmazione Javascript torna as essere qualcosa de prendere in considerazione.
Ecco in poche righe un altro esempio che ho messo in piedi nei giorni scorsi:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Imagic</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="main">
<img src="~/images/s.gif" id="image" alt="image" runat="server" />
</div>
</form>
<script type="text/javascript">
$addHandler(window, "load", window_Resize);
$addHandler(window, "resize", window_Resize);
function window_Resize(eventElement)
{
var main = $get('main');
var image = $get('image');
var mainBounds = Sys.UI.DomElement.getBounds(main);
var imageBounds = Sys.UI.DomElement.getBounds(image);
image.style.top = (mainBounds.height - imageBounds.height) / 2;
image.style.left = (mainBounds.width - imageBounds.width) / 2;
}
</script>
</body>
</html>
In questo modo il contenuto di "main" rimarra centrato nello schermo anche durante il resize del browser, grazie a posizionamento assoluto e Javascript... e naturalmente su tutti i browser!!!
Se questa non è magia...