Posts filed under 'Scripting'
Attivare il metodo di un’istanza in maniera anonima
Quante volte vi siete trovati a dover attivare da un click il metodo dell’istanza di una classe? La prima difficoltà che si incontra è individuare esattamente l’istanza che ci serve. La soluzione più frequente è passare il nome dell’istanza o un qualsiasi riferimento come parametro.
Ma non si può proprio fare a meno di passare il riferimento all’istanza? Ebbene sì, e Prototype ci propone l’uso di “bindAsEventListener()”.
Facciamo un esempio. Ci sono x campi di testo. Ad ognuno è associato un bottone. Cliccando su un bottone parte l’alert del valore del campo di testo corrispondente.
Ecco il codice di come si risolve il problema “alla vecchia maniera”:
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
initialize:function(buttonField,textField,instance_id){
this.buttonField=buttonField;
this.textField=textField;
this.instance_id=instance_id;
this.buttonField.observe("click",
function(){saluti[instance_id].hi()}
);
},
hi:function(){
alert(this.textField.value);
}
});
// creo le istanze
var saluti=[];
document.observe("dom:loaded",function(){
$$(".btn").each(function(BUTTON){
var TEXTFIELD=$$(".msg")[saluti.length];
saluti.push(new saluto(
BUTTON,TEXTFIELD,saluti.length
));
});
});
</script></head><body>
<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>
</body></html>
A differenza dalla vecchia, la “nuova maniera” non ha bisogno di alcun riferimento, per cui si può addirittura eliminare l’array con le istanze!
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
initialize:function(buttonField,textField){
this.buttonField=buttonField;
this.textField=textField;
this.buttonField.observe("click",
this.hi.bindAsEventListener(this)
);
},
hi:function(){
// in caso vogliate usare argomenti,
// ricordate che il primo è sempre l'evento
alert(this.textField.value);
}
});
// creo le istanze
document.observe("dom:loaded",function(){
$$(".btn").each(function(BUTTON,i){
var TEXTFIELD=$$(".msg")[i];
new saluto(
BUTTON,TEXTFIELD
);
});
});
</script></head><body>
<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>
</body></html>
C’est très chic ^_^
Add comment 22 Ottobre 2009
IE6 vs PNG, come cambiare lo sfondo grigio col colore di background preferito
Un HTMLista skillato sa bene come attivare la trasparenza delle PNG in IE6, conoscono i conditional comments, sanno che non c’è modo di usare PNG come background (in IE6), eccetera. Stavolta vi propongo una chicca che vi servirà 1 volta su 1 milione, ma sarà proprio quella volta in cui vi salverà il… lavoro.
Avete presente che inserendo una PNG con trasparenza Alpha in IE6 compare uno sfondo grigio, no? tanto che alcuni arrivano a cambiare la grafica del sito e ad usare lo stesso grigio… Ebbene, da oggi potrete ottenere esattamente il colore che vi serve!
TweakPNG vi permette infatti di smanettare con i vari parametri dei quali dispone una PNG, tra i quali appunto il Background. Basta aprire l’immagine e customizzare il parametro bKGD! (se non c’è, selezionare Insert > bKGD)
1 comment 27 Luglio 2009
Quella strana “E” sulle confezioni dei prodotti
L’Estimated sign è il simbolo usato nell’Unione europea per segnalare sulle etichette dei prodotti la massa o il volume meccanicamente predeterminati di una merce. Per visualizzarlo in HTML bisogna usare il codice ℮
Add comment 24 Giugno 2009
Gif animate con Photoshop
Mi sono trovato recentemente in una situazione nella quale dovevo creare una GIF animata. Siccome non volevo perdere tempo a cercare servizi online o l’ennesimo programma freeware, ho trovato questo tutorial per realizzare gif animate con Photoshop. Ho però trovato la procedura un po’ scomoda, per cui non è escluso che in futuro cercherò un programma più adatto.
1 comment 27 Marzo 2009
Float Precision, risolvere il problema dei decimali in JavaScript
Facendo operaizoni coi decimali in JavaScript vi sarà capitato di imbattervi in alcuni risultati “strani”… Ad esempio:
0.99999 + 0.000001 = 0.9999910000000001
0.05 * 0.35 = 0.017499999999999998
Questo strano comportamento è colpa dello Standard IEEE 754 implementato in moltissimi linguaggi e che regola il comportamento dei numeri decimali.
Ora, non so per voi ma per me è inconcepibile fare con un PC delle operazioni matematiche ed ottenere risultati errati… per cui mi sono messo a caccia di una libreria che risolvesse tale problema. Ho trovato BigNumber, che al prezzo di un po’ di scomodità (ma neanche tanta) promette risultati perfetti:
new BigNumber(0.99999).add(0.000001) = 0.999991
new BigNumber(0.05).multiply(0.35) = 0.0175
Alleluia.
Quando la finiremo di implementare librerie per riparare agli errori degli altri??
8 comments 4 Febbraio 2009
Promemoria: percorsi files esterni
Siccome quando lavoro coi files SWF, CSS e JS che caricano dinamicamente immagini o altro faccio sempre confusione coi path relativi, ecco qui la regola scritta e verificata una volta per tutte!!!
Tutti i link a files esterni sono relativi alla cartella:
- HTML: della pagina stessa
- CSS: del file CSS
- JS: della pagina che include il file js
- SWF: della pagina che include il file swf
ATTENZIONE IN PHP:
Dato il filesystem:
/index.php
/1/index.php
/1/2/index.php
/1/2/3/index.php
e dato che ogni files tranne il primo contiene l’istruzione:
include(‘../index.php’)
se da browser richiamo /1/2/3/index.php esso non arriverà a chiamare /index.php come ci si potrebbe aspettare, bensì richiamerà sempre e solo /1/2/index.php creando un loop infinito. Questo perchè fa riferimento il percorso del file “padre” di tutti gli altri (quello richiamato da browser per intenderci.)
Add comment 22 Maggio 2008
