var mysite = {
    'url': "http://www.ajaxweb20.net",
    'author': "Giuseppe Raso",
    'xhtmlValid': true,
    'cssValid': true
}
Home > Blog

Archive for Marzo, 2008

Javascript: Usare apply per passare vari argomenti a un costruttore.

Lunedì, Marzo 31st, 2008

Apply come già sicuramente saprete permette di passare degli argomenti ad una funzione sotto forma di array; tra l’altro lo stesso apply permette di specificare l’oggetto contesto della funzione, in altra parole l’oggetto che si potrà richiamare mediante l’operatore this.

function fn() {
  for(var i = 0, l = arguments.length; i!=l; i++) {
    this[i] = arguments[i] + "xyz";
  }
}

fn.apply([], ["a", "b", "c"]);

Qualcuno si sarà chiesto se sia possibile usare apply con i costruttori, qualcuno magari avrà provato anche a scrivere il seguente codice ricevendo in cambio l’errore “xxx is not a constructor”:

function miaClasse() {
  this.method = function() {
  }
  this.str = arguments[0] || ;
}

new miaClasse.apply(null, ["str"]) //Attenzione, questo codice NON funziona!!!

Fortunatamente non è molto difficile arrivare a una prima soluzione:

miaClasse.apply(new miaClasse, ["a"]); //Questo invece funziona!!!

Resta ancora un problema: il codice all’interno della classe miaClasse viene eseguito inutilmente due volte, e tra l’altro a causa dell’assenza di argomenti non è detto che non possa causare un errore.

La soluzione è quella di creare un’altra classe che erediti le proprietà dalla classe originaria e usare l’oggetto creato con questa classe:

function klass() {
  miaClasse.apply(new this, arguments)
}

function intermediate() {
}

intermediate.prototype = miaClasse.prototype;

klass.prototype = new intermediate;

//Esempio

klass.apply(null, [/*arguments…*/])

Notare che la proprietà constructor non viene corretta ( solitamente lo si fa in ogni ereditarietà ) proprio perchè potrebbe essere utile considerare l’oggetto restituito da miaClasse come se fosse un’istanza di miaClasse invece che di klass.

Infine come buona norma astrattizziamo il codice e trasformiamolo in funzione, anzi, visto che ci siamo che ne dite di un prototipo con un bel lazy pattern? :D

Function.prototype.instance = function(args) {

  var this_ = this;
  function klass() {
    this_.apply(new this, arguments[0])
  }

  function intermediate() {
  }

  intermediate.prototype = miaClasse.prototype;

  klass.prototype = new intermediate;

  this_.instance = klass;

  this_.instance(args);

}

Enjoy :)

Workaround per usare __defineGetter__ e __defineSetter__ su elementi HTML

Venerdì, Marzo 28th, 2008

defineGetter e defineSetter sono due metodi dannatamente utili supportati al momento da Firefox, Opera 9.5, Safari 3 e Konqueror. Essi permettono di manipolare le proprietà dichiarando un setter ( una funzione che viene eseguita opgni volta che settiamo una proprietà ) o un getter ( una funzione che viene usata ogni volta che prendiamo una proprietà in modo da manipolare il valore ritornato ).

Teoricamente potremmo usarlo per simulare innerText su Firefox:

HTMLElement.prototype.__defineSetter__("innerText", function(value) { this.textContent = value; })

Purtroppo in Firefox 2 ( con la versione 3 il problema non sussiste ) non è possibile definire ne getter ne setter sugli elementi HTML :(
Si tratta di uno strano bug che fortunatamente ha un workaround molto semplice, ovvero quello di applicare il getter/setter alla classe Node:

Node.prototype.__defineSetter__("innerText", function(value) { this.textContent = value; })

L’unico svantaggio è che così facendo stiamo applicando il setter a tutti i tipi di nodi, compresi nodi testo, commento e persino documento!

Ma anche in questo caso la soluzione è alquanto semplice:

Node.prototype.__defineSetter__("innerText", function(value) {
  if(this.nodeType == 1)
    this.textContent = value;
  else
    this.innerText = value;
})

Semplicemente controlliamo che il nodo sia veramente un elemento HTML ( con nodeType uguale a 1 ): se è vero settiamo la proprietà textContent ( il rispettivo di innerText in IE ) altrimenti ci comportiamo come se il setter non esistesse, ovvero settando la proprietà innerText manualmente.

Volendo possiamo “standardizzare” questa operazione tramite una funzione ( Ah che belle le closures :D ):

HTMLElement.$defineSetter = function(prop, fn) {
  Node.prototype.__defineSetter__(prop, function(value) {
    this.nodeType == 1
      ? fn.call(this, value)
      : this[prop] = value;
  })
}

Con poche modifiche possiamo creare una funzione che crea un getter:

HTMLElement.$defineGetter = function(prop, fn) {
  Node.prototype.__defineGetter__(prop, function() {
    retun this.nodeType == 1)
      ? fn.call(this, value)
      : this[prop];
  })
}

Per altri snippet stay tuned!

Una guida completa sull’erediterietà in Javascript.

Mercoledì, Marzo 26th, 2008

Per chi sta iniziando adesso ad addentrarsi nei meandri di questo potente linguaggio di scripting, ma anche ai più esperti ( non si smette mai di imparare :) ) consiglio caldamente la lettura di questa guida ( in inglese ) sull’ereditarietà in Javascript.

Tra le guide inerenti l’argomento che abbia mai letto questa è senza ombra di dubbio la più completa, e tra l’altro riassume gli studi fatti recentemente dallo stesso Giammarchi e da altri javascripter di fama internazionale.

L’unico neo rilevante della guida è che forse la lettura potrebbe apparire alquanto oscura a chi ha poca o nulla dimestichezza con l’argomento…
Nel caso vi riconosciate in questa categoria vi consiglio caldamente di leggere anche questo vecchio post.

Le novità di Safari 3.1

Venerdì, Marzo 21st, 2008

La versione 3.1 di Safari porta con se delle grosse novità visionabili in questa pagina.

Tra le più importanti vi sono:

Sono davvero delle grosse novità, di certo però non faranno gola a molti visto il carente supporto da parte degli altri browser di queste caratteristiche… :(

Tra l’altro non è detto che queste nuove feature debbano essere necessariamente un punto a favore di Safari, già mi immagino form come questo… Provate a compilarlo :D

Via : Edit

Annientare la razza umana tramite un popup… Lo so, è una frase priva di senso, ma in un telefilm succede realmente!

Domenica, Marzo 16th, 2008

Nel telefilm di fantascienza Stargate SG-1 il colonnello O-Neall e Samantha Carter devono vedersela con dei robot alieni a forma di ragno detti replicanti.
A un certo punto della loro missione entrano nel “core” del programma che gestisce i replicanti in modo da poterlo manipolare e sconfiggere così il temibile nemico.
A questo punto sorge spontanea la domanda: in quale linguaggio di programmazione super sofisticato sono stati scritti questi intelligentissimi robottini? C++? Assembler?
Guardate questo video e cercate di scoprirlo:

Se non ci siete riusciti ecco un’immagine che mostra il listato:

Aspetta un attimo, questo non è C, questo è Javascript!!!
Il codice pare avere una qualche forma di interazione con un web server e con Flash, ma onestamente dubito che sia possibile conquistare l’universo tramite un popup :D
Tra l’altro il codice è preso da un sito di una banca realmente esistente, la RBC Royal Bank, nel quale esso viene utilizzato per caricare un’animazione flash che ti assiste nella navigazione…
Assurdo, io non avrei mai pensato che con Javascript si potesse arrivare a tanto :o

Via : Worse Than Failure

Protoflow - l’effetto coverflow di iTunes realizzato in javascript con Prototype e Script.acolo.us.

Sabato, Marzo 15th, 2008

Protoflow è uno script Javascript che permette di scorrere tra varie immagini attraverso un gradevole effetto di transizione, in modo molto simile all’effetto coverflow di iTunes.
Addirittura è possibile attivare opzionalmente l’effetto specchio sulle immagini: molto 2.0 :D
Certamente è molto adatto per menu e photogallery, anche perchè grazie al fatto di essere perfettamente degradabile non mina la navigazione con javascript disabilitato.
Esso si appoggià sulla già collaudata accoppiata Prototype Scriptacolous ed è molto semplice da implementare.

Uno script simile era già disponibile per MooTools, anche se Protoflow pare essere nettamente più veloce.

Rilasciata la beta 4 di Firefox 3.

Martedì, Marzo 11th, 2008

Il lavoro svolto su Firefox 3 inizia a far vedere i suoi frutti: con la beta 4 ora il browser pare essere sempre più vicino a quello che sarà il prodotto finale.
Tra le novità della beta 4 c’è l’introduzione di Places, il nuovo sistema di preferiti che si basa su SQLlite e che permette di fare ricerche tra i segnalibri, la cronologia e le etichette ( tag ).

L’interfaccia grafica è leggermente cambiata, ma se da un lato questa è di più semplice fruizione dall’altra in molti ne criticano ll’estetica. Lascio a voi il giudizio su di essa:

Per quanto riguarda le performances appare fin da subito evidente come rispetto a Firefox 2 sia stato fatto un estremo miglioramento: applicazioni come Gmail si aprono nella metà del tempo e il codice Javascript pare essere 3 volte più veloce rispetto a prima.

Le novità sono ancora molte, se volete prenderne visione potete leggere quest’articolo.

Per aggiornamenti futuri stay tuned :)

35 ( veramente ) incredibili set di icone gratuiti che spiccano per originalità.

Domenica, Marzo 9th, 2008

IconsIeri mi sono imbattuto in un post di Smashing Magazine che mette a disposizione i link a una quantità immensa di icone, tutte molto sexy e tra l’altro liberamente utilizzabili ( of course :) ).
Sono savvero tante e per tutti i gusti, si va dalle tipiche icone RSS fino addirittura ai francobolli con le faccia dei Simpson.
Una buona parte di queste poi spiccano per originalità, provate a passare sopra questa pattumiera ad esempio :)

Veramente, veramente incredibili.

Agli alieni piace la ****!

Mercoledì, Marzo 5th, 2008

Non so quanto tale disegno nel grano possa essere opera degli alieni, fatto sta che il suo significato è piuttosto esplicativo :D

Via: Francesco Biacca

Piwik - statistiche open source in stile Google Analytics direttamente nel vostro sito web.

Domenica, Marzo 2nd, 2008

Piwik è uno script php-mysql open source che permette di avere facilmente delle statistiche inerenti il proprio sito web.
Il servizio si propone come un’alternativa a Google Analytics e tra l’altro, essendo open source, può essere esteso tramite plugin.
A una prima occhiata appare evidente che ancora si tratta di un’alpha, d’altra parte sono già visibili le caratteristiche principali.
L’interfaccia, che fa uso massiccio di Open Flash Chart per i grafici e di jQuery per gli effetti e per le chiamate ajax, è per certi versi molto simile a quella di Netvibes o di iGoogle, con i box riposizionabili tramite drag and drop. Ma essendo molto spartana appare quasi più semplice da utilizzare rispetto a quella di Google Analytics.

La caratteristica migliore di Piwik resta copmunque quella di poter inserire le statistiche dentro una qualsiasi pagina web, ad esempio per poter mostrare ai nostri lettori quanto siamo famosi :)

In definitiva, seppur le funzionalità siano ancora inferiori a quelle di Google Analytics, Piwik pare promettere bene.
Aspettiamo pazientemente che esca dalla beta prima di dare un giudizio definitivo.