Posts Tagged ‘programmazione web’
Programmazione Object Oriented in JavaScript
Socrate diceva: “Più so, più so di non sapere“. Ed è vero… Man mano che si impara (e nella vita si impara sempre), più dubbi ci vengono sulle nostre conoscenze ed io, sebbene sapessi che con JavaScript si potesse “programmare ad oggetti” (in senso lato) e me ne fossi fatto un’idea (per tentativi tanto tempo fa ho modificato una classe di YahooUI), non mi ero mai posto il problema di scoprire come in realtà si facesse. E ora che mi sono trovato davanti allo script dell’articolo precedente, ho deciso di colmare questa mia lacuna e ora riporto i miei appunti qui…
Chiunque viene dal mondo della programmazione ad oggetti ha familiarità con i concetti di tipo, tipo di dati astratto, classe, ereditarietà tra classi e così via. In JavaScript ci sono diversi modi di programmare ad oggetti; uno di questi modi fa uso del “prototype pattern” e con un esempio (per chi conosce la OOP) è bello che spiegato
function Persona() {
this.nome= "";
this.eta= 15;
}
Persona.prototype.setNome = function(_nome) {
this.nome= _nome;
}
Persona..prototype.setEta = function(_eta) {
this.eta = _eta;
}
var nicola = new Persona();
nicola .setNome ("nicola ");
nicola .setEta (25);
alert(nicola.nome + " - " + nicola.eta);
per ereditare la classe Persona
function Maschio() {
this.sesso= 'M';
}
Maschio.prototype = new Persona();
function Femmina() {
this.sesso= 'F';
}
Femmina.prototype = new Persona();
questa modalità di implementazione delle classi è quella consigliata quando si lavora con AJAX. Da notare è che si può scrivere anche:
function Persona() {
this.nome= "";
this.eta= 15;
Persona.prototype.setNome = function(_nome) {
this.nome= _nome;
};
Persona..prototype.setEta = function(_eta) {
this.eta = _eta;
};
}
ovvero tutto all’interno della function. Un altro modo per scrivere la stessa cosa è:
function Persona() {
this.nome= "";
this.eta= 15;
this.setNome = function(_nome) {
this.nome= _nome;
};
this.setEta = function(_eta) {
this.eta = _eta;
};
}
in questo caso, però, il trucchetto dell’ereditarietà non funziona.
L’altro modo per scrivere una classe è quello che ho trovato utilizzato in YahooUI e in jQuery (e nello spezzone di codice dell’articolo precedente) e di cui allego un esempio che dovrebbe essere abbastanza chiarificatore:
<html>
<head>
<script>
p = {
pippo : "ciao",
prova_var: 1,
prova: function()
{
alert(this.pippo + ' - ' + this.prova_var);
}
};
</script>
</head>
<body>
<input type="button" value="bottone" onclick="p.prova()" />
</body>
</html>
è una notazione cha sa di JSON e infatti è basata su quella JSON; definisce l’oggetto già come singola instanza: infatti, come si vede, lo utilizzo tranquillamente nel codice HTML.
Questo è solo qualche appunto, ma per approfondimenti contattate il vostro motore di ricerca di fiducia…
P.S.: Recentemente ho trovato questo link che sipega tutte le notazioni: http://www.phpied.com/3-ways-to-define-a-javascript-class/
Un altro uso per JavaScript
Su Hacker Journal n°173 compare un articolo interessante intitolato “La potenza del Browser”, il quale ha particolarmente attirato la mia attenzione. L’idea è di usare JavaScript nel Distributed Computing, ovvero utilizzare un piccolo script che, ciclicamente, richieda al server la sua parte di lavoro, la elabori e invii la risposta al server, il tutto durante la normale navigazione, senza influire sulla QoS percepita dall’utente (il che significa calibrare opportunamente i timeout). Come esempio l’articolo propone il sito http://jsdc.appspot.com/ di cui vado ad analizzare brevemente il codice sorgente.
_d = {
eh: “http://jsdc.appspot.com/Q?”, indirizzo della pagina del server che distribuisce il carico di lavoro e le risposte
iv:150, timeout iniziale (di default)
f:hex_md5, funzione da richiamare
o:9, “cap interval”
z:150, timeout corrente
n:0,
w: function(){ ritorna semplicemente la data
return(new Date()).getTime()
},
u:function() { elabora il pacchetto di lavoro
var x = _d.w(),
e= _d.e +_d.d[_d.n], _d.d sono le parole da convertire in MD5 (passate dal server)
i=0;
if(x-_d.y-_d.z<_d.o) adatta il carico di lavoro al client
_d.z=_d.iv
else
_d.z=x-_d.y;
if(_d.n<_d.d.length)
{
for(;i<_d.d.length;i++) scorro l’array del carico di lavoro
{
if(_d.f(e+_d.d[i])==_d.h) elaboro le singole parole e confronto con l’hash passato dal server
{
_d.v=e+_d.d[i];
_d.b(); inoltro la richiesta con l’apposita funzione b()
return;
}
};
_d.n++;
_d.y=_d.w();
_d.x=setTimeout(_d.u,_d.z) prossimo ciclo
}
else
_d.b() effettuo la richiesta del primo carico di lavoro
},
g:function(u){ funzione che effettua la richiesta
alert(u);
_d.q = document.createElement(“script”) creo un elemento script
_d.q.src=_d.eh + u; imposto come src dell’elemento script la pagina del server che fa il dispatch delle richieste e accumula le risposte
document.body.appendChild(_d.q) aggiungo al body il nuovo tag
},
b:function(){ funzione che compone la richiesta
_d.cs() fermo il timer
_d.g(“e=”+_d.e+”&h=”+_d.h+”&r=”+_d.v+”&”+_d.w()) compongo per la funzione che effettua la richiesta i parametri del GET
},
cs:function(){ ferma il timer e dunque sospende l’elaborazione
clearTimeout(_d.x);_d.x=null;_d.n=0
}
}
setTimeout(_d.g,2000);inizializza l’elaborazione senza parametri (prima richiesta del carico di lavoro)
Cosa manca? Qualche variabile che viene generata dal server e messa nello script relativo al tag “script” generato dinamicamente. Se puntiamo il nostro browser alla pagina “http://jsdc.appspot.com/Q?”, avremo una risposta del genere:
_d.q.parentNode.removeChild(_d.q); eliminiamo il tag script appena creato, in modo da non averne tanti
_d.i=3200;
_d.d=’ole ala apo 123 ddd ff ttt rot oleole’.split(”); il carico di lavoro: le stringhe di cui provare l’hash md5
_d.d.push(”);
_d.h=’b52f753aa106a9df6a51248744fc464f’; l’hash md5 di riferimento
_d.e=’l d’;
_d.y=_d.w()-_d.z; parametri necessari per la temporizzazione
_d.u(); richiamo la funzione dove elabora il pacchetto di lavoro
_d.v=undefined;
Un’ultima osservazione la faccoamo sulla risposta inviata al server dove la variabile “h” del GET contiene il codice hex che si sta esaminando, la variabile “r” l’eventuale risultato (che sta in _d.v).
In sostanza, se tutto il codice non è proprio chiaro, il meccanismo è chiaro e naturale; inoltre non fa uso di AJAX, ma utilizza solo DOM (Domain Object Model). Sperando di avervi aiutato nella comprensione e ispirato qualche bella idea di utilizzo vi lascio l’avvertimento che si può trovare sul sito: questo codice è un proof of concept, instabile e vulnerabile ad attacchi XSS.
