Come già visto nel post Varietà di coding e di coding gli approcci che uno sviluppatore può avere alla risoluzione di un problema sono diversi e molteplici a parità del linguaggio di programmazione usato. Ecco come alcuni dei più noti framework Javascript hanno risolto una semplice funzione di CamelCase:
Prototype.js
Prototype.js, nella versione 1.6.0.3, propone esplicitamente un metodo camelize() per effettuare il camelcase su una stringa. L’approccio dell’autore è abbastanza semplice e il codice risulta auto-esplicativo. In questo caso non è stato fatto nessun uso delle Regular Expression!
1
2
3
4
5
6
7
8
9
10
11
12
13
| camelize: function() {
var parts = this.split('-'), len = parts.length;
if (len == 1) return parts[0];
var camelized = this.charAt(0) == '-'
? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
: parts[0];
for (var i = 1; i < len; i++)
camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
return camelized;
} |
Continua...
Non ho capito bene se è un bug o una cosa voluta, comunque sia rimane il fatto che il metodo animate() di jQuery non funziona con alcuni attributi CSS, tra cui background-color (che nella versione camelize è backgroundColor). Ad esempio il seguente codice non produce nessun effetto:
1
2
3
4
5
| <style type="text/css">
div#box { background-color: #eee; width:100px; height:100px }
</style>
<!-- .... -->
<div id="box"></div> |
1
| $('div#box').animate( {backgroundColor: "#f90"} ); |
Per risolvere il problema è necessario installare un’estensione: jQuery Color Animations. Questa permette di eseguire “animazioni” sull’attributo backgroundColor e non solo:
backgroundColorborderBottomColorborderLeftColorborderRightColorborderTopColorcoloroutlineColor
Continua...
Qualcuno sostiene che la programmazione è un arte e, in ultima analisi, non posso che essere d’accordo soprattutto quando si scovano soluzioni estremamente diverse per un medesimo problema. Per capire quanto sia vero questo, ecco come un’identica necessità nel medisimo linguaggio (Javascript) può essere risolta con approcci assolutamente diversi ed originali.
Left Pad zero
Un numero, ma il discorso è valido anche per una qualsiasi stringa, come 123 può essere riempito a sinistra – per pareggiarlo – con un certo numero di zeri, ad esempio: 00123. Questa necessità si presenta in varie occasioni e risulta utile per incolonnare – o comunque mostrare – un numero in maniera pulita, indicandone implicitamente il suo valore massimo. Nei videogame, ad esempio, il classico punteggio (lo score) viene spesso indicato con 001234, indicando che al massimo si arriverà a 999999. Ecco come lo stesso problema è stato risolto da vari sviluppatori:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| /**
* Left Pad String
*
* @from http://snipplr.com/view/8423/left-pad-string/
* @author-web http://www.mechanicmatt.com/
*
* @param num - Striga da riempire
* @param totalChars - Numero totale di caratteri, comprensivo degli "zeri"
* @param padWidth - Carattere usato per riempire, default "0"
*/
function leadingZeros(num, totalChars, padWith) {
num = num + "";
padWith = (padWith) ? padWith : "0";
if (num.length < totalChars) {
while (num.length < totalChars) {
num = padWith + num;
}
} else {}
if (num.length > totalChars) { //if padWith was a multiple character string and num was overpadded
num = num.substring((num.length - totalChars), totalChars);
} else {}
return num;
}
alert(leadingZeros("asdf", 10, "0")); |
Questa soluzione è estremamente articolata, tuttavia permette di aggiungere un numero indefinito di 0 al numero num scegliendo anche il tipo di carattere da usare tramite padWidth, invece del default 0.
Decisamente originale, invece, questa soluzione:
1
2
3
4
5
6
7
8
9
10
11
12
13
| /**
* string_pad
*
* @from http://snipplr.com/view/700/stringpad/
* @author http://d.hatena.ne.jp/brazil/20060721/1153489937
*
* @param str - Striga da riempire
* @param len - Numero totale di caratteri, comprensivo degli "zeri"
* @param ch - Carattere usato per riempire
*/
function pad(str, len, ch){return new Array(len-(''+str).length+1).join(ch) + str}
alert(pad(56, 4, '0')); // 0056 |
Stesso risultato, con un approccio completamente diverso. Anche in questo caso abbiamo la possibilità di decidere il numero di caratteri padding tramite il parametro len e il tipo di carattere da usare tramite ch. Manca però l’uso del default previsto nella precedente funzione.
Quella che uso io, invece…:
1
2
3
4
5
6
7
8
9
10
11
12
| /**
* string_pad
*
* @author Giovambattista Fazioli
* @web http://www.undolog.com
*
* @param s - Striga da riempire
* @param l - Stringa che indica sia il carattere che la lunghezza
* ad esempio "0000" = carattere "0" lunghezza 4
*/
function padding(s,l) { return( l.substr(0, (l.length-s.length) )+s ); }
alert( padding('123','0000') ); |
Se avete altre soluzioni interessanti non esitate a commentare 
Continua...
Nel post 3D CountDown con FIVe3D (vedi anche How I Did It: scrivere un countdown in Flash), veniva proposta una classe per la creazione di un oggetto CountDown in Actionscript, eccone una versione simile in Javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| /**
* CountDown Class
*
* @author Giovambattista Fazioli
* @email g.fazioli@undolog.com
* @web http://www.undolog.com
*
* @param dd (string) 'month day, year'
*
*/
function countDown( dd ) {
// init target time
var target = new Date( dd );
this.targetTime = target.getTime();
/**
* refresh countdown
*/
this.refresh = function() {
var today = new Date();
var currentTime = today.getTime();
// time left
this._leftMilliseconds = (this.targetTime - currentTime);
this._leftSeconds = Math.floor( this._leftMilliseconds / 1000 );
this._leftMinutes = Math.floor( this._leftSeconds / 60 );
this._leftHours = Math.floor( this._leftMinutes / 60 );
// no module
this.leftDays = Math.floor( this._leftHours / 24 );
// for print
this.leftMilliseconds = this._leftMilliseconds % 1000;
this.leftSeconds = this._leftSeconds % 60;
this.leftMinutes = this._leftMinutes % 60;
this.leftHours = this._leftHours % 24;
}
this.refresh();
} |
Esempio
1
2
3
| var cd = new countDown( '1 1, 2009' );
// mostra quanti giorni, ore, minuti, secondi e millisecondi al primo gennaio 2009
document.write( cd.leftDays + "," + cd.leftHours + "," + cd.leftMinutes + "," + cd.leftSeconds + "," + cd.leftMilliseconds ); |
Continua...
Recentemente Cristiano Fino ha rilasciato un utile Plugin per WordPress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di WordPress.org ne ho travati un paio, tuttavia essendo un software italiano sarebbe il caso di onorare l’ottimo lavoro fatto da Cristiano). Questi Link (reply & quote) permettono di rispondere e/o quotare l’autore di un commento, eseguendo quella noiosa operazione di inserire il carattere at (@) per indicare a chi ci si rivolge. In questo tutorial voglio illustrare – per gli utenti medio-esperti – il modo di aggiugere queste due funzionalità “a mano”, senza ricorrere all’istallazione di nessun Plugin. Inoltre sfrutterò le capacità di jQuery per la parte in Javascript. La tecnica che espongo è la medesima che ho usato per introdurre questa funzionalità in questo blog.
Nota: l’uso di un plugin è la miglior soluzione per chi tende a modificare spesso il proprio template WordPress o, al limite, ha in previsione di farlo. Questo tutorial vuole solo mostrare come eseguire interventi mirati all’interno del codice WordPress ed è dedicato ai più curiosi.
Modifica del file comments.php
La prima modifica che apportiamo è quella di inserire i link “reply” e “quote” all’interno di ogni commento. Per fare questo editiamo il file comments.php situato nella cartella del nostro tema. Questo file contiene tutte le istruzioni che consentono di visualizzare i commenti alla fine di un post. La sezione che ci interessa (che può variare leggermente da tema a tema) è il loop di creazione dei vari commenti, riconoscibile da:
Continua...
Come tutte le librerie di questo tipo anche jQuery permette di estendere le sue funzionalità base tramite dei veri e propri plugin. Rispettando le regole del suo funzionamento, cioè restituiendo sempre un puntatore all’elemento selezionato o a jQuery stessa, è possibile scrivere un plugin con poche righe di codice. Prendiamo come esempio il codice proposto in jQuery contro tutti: un benchmark con 5 browser che era (dopo la correzione segnalata da Luca):
1
2
3
4
5
| $('h2.dropdown').css('cursor','pointer').click(
function() {
if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
}
); |
Continua...
Un buon sviluppatore non ha problemi a passare da un linguaggio di programmazione ad un altro. La scelta di concentrarsi su un particolare linguaggio, framework o ambiente di sviluppo, è dettata più dalla disponibilità di tempo e dal tipo di lavoro che si svolge. Tuttavia, un fattore importante che può influire sulla scelta di “framework” simili, è la simpatia o l’affezione che può maturare con il tempo.
Nello specifico, ho voluto analizzare alcuni – non certo tutti – framework Javascript disponibili oggi, anche perchè “consigliato” a dare un’occhiata soprattutto a jQuery.
I creatori di mootools (uno dei più noti framework Javascript) hanno reso disponibile uno strumento per eseguire un test di velocità e validità su cinque noti framework Javascript: Slickspeed. Questo test, dagli esiti non affatto scontati, è importante in quanto i framework Javascript operano lato client, cioè vengono eseguiti dal nostro browser. È proprio per questo motivo che alcuni trovano Safari più rapido di Internet Explorer o Google Chrome più rapido di FireFox. Tuttavia ciò spesso dipende anche dal tipo di pagina che si sta visualizzando. Infatti può benissimo capitare che un particolare sito sia davvero più “veloce” se visualizzato in Safari, ma questo non significa che “tutti i siti” saranno più veloci con Safari! Ovviamente questo discorso è valido per qualsiasi altro browser.
Il benchmark
Nel test che ho effettuato con Slickspeed ho messo a confronto i browser disponibili sulla mia macchina (Windows Vista Utilmate 64bit – Intel core 2 quad a 2.4GHz con 8Gb RAM).
Purtroppo il test non sono riuscito ad eseguirlo con Internet Explorer 7, in quanto bloccava la macchina, andando anche fuori scala con i risultati! Ancora una volta complimenti Microsoft.
Ho crercato di mantenere identico lo stato del PC durante l’esecuzione dei test, aprendo singolarmente i browser e non mandando nessun altro processo in esecuzione.
Nota: se avete voglia di eseguire anche voi uno o più di questi test, potete commentare questo post in caso di “curiosi” e diversi risultati.
Google Chrome è risultato davvero veloce, con un valore di 68 (media) nell’esecuzione dei test con jQuery. Il più lento, invece, è risultato Flock, nonostante provenga dalla stessa “madre” Mozilla. Questo pessimo risultato di Flock è davvero curioso visto il suo taglio Social Network; perchè sono proprio i Social Network Web 2.0 a sfruttare molti dei framework Javascript disponibili, così da fornire un’esperienza di navigazione ed interazione davvero innovativa.
A sorpresa Opera batte FireFox e anche di un bel po’, ottenendo addirittura un 74 nell’esecuzione di Dojo! FireFox e Safari, tutto sommato, si assomigliano, con Safari più rapido nei test con Mootools e jQuery.
Quale framework scegliere?
Se non badiamo ai test sulla velocità di esecuzione e non ci preoccupiamo della dimesione in Kbytes dei framework stessi, la risposta potrebbe essere “quello che più vi piace” o, se preferite, “quello che conoscete meglio o vi risulta più armonico con il vostro stile di programmazione”.
In ultima analisi questi framework si assomigliano un po’ tutti (vedi l’uso del $ ad esempio), nonostante alcune importanti e sostanziali differenze che possono saltare agli occhi di un esperto o nell’uso davvero spinto di una particolare libreria. In linea di massima, infatti, tutto quello che si può realizzare con jQuery, ad esempio, lo si può fare benissimo con mootools o prototype! Se jQuery vanta una sintassi estremamente compatta, in quanto tutti i metodi restituiscono sempre l’oggetto base jQuery, creando così file interminabili di oggetto.metodo().metodo().metodo()... non è detto che questo sia a tutti i costi un punto di forza, soprattutto per chi dovrà fare il debug!
Librerie come prototype.js peccano forse in assenza di effetti grafici, anche semplici, costringendo lo sviluppatore ad implementare spinoff come scriptaculous.js, pesanti e distanti dalla libreria inizialmente scelta.
Un esempio
Proprio quest’ultimo motivo, ad esempio, mi ha portato a sostituire l’accoppiata prototype/scriptaculous con jQuery per realizzare i pannelli interattivi/animati qui nella sidebar di undolog.com. In effetti, usando anche Google API per importare le librerie, è uno spreco caricare tutta la libreria scriptaculous per uno slideDown e slideUp. A titolo informativo e di esempio, ecco com’era il codice Javascript con l’accoppiata prototype/scriptaculous:
1
2
3
4
5
6
7
8
9
10
11
12
13
| // prototype/scriptaculous
$$('h2.dropdown').each(
function(element) {
element.style.cursor="pointer";
element.observe('click',
function(event) {
if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
else new Effect.BlindDown(this.next(),{duration:.3});
Event.stop(event);
}
)
}
); |
e com’è adesso con jQuery:
1
2
3
4
5
6
7
8
9
10
| // jQuery
$('h2.dropdown').each(
function(i) {
$(this).css('cursor','pointer').click(
function() {
if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
}
);
}
); |
Tutto sommato, a ben guardare, non mi sembra ci sia moltissima differenza! Ma come dicevo prima… è questione “anche” di gusto personale.
Continua...
Proprio in questi giorni (sotto consiglio…) stavo dando un’occhiata a jQuery, un’ottima libreria sullo stile di prototype.js, scriptaculous.js, mooTools, per intenderci… ed ecco che oggi tutto il sito è stato completamente ridisegnato:
Ottimo inizio per allargare i miei orizzonti su questo tipo di librerie! Prossimamente pubblicherò qualche articolo interessante, soprattutto sulle differenze tra jQuery e le altre librerie “simili”.
Continua...
La classe USimpleTabStrip, presentata in Unobtrusive Simple TabStrip, può essere utilizzata anche per realizzare un semplice menu Accordion.
Utilizzando gli effetti di BlindUp() e BlindDown() offerti da Scriptaculous:
1
2
3
4
5
6
7
8
9
10
| function init(){
uts = new USimpleTabStrip();
uts.Init();
uts.onShow = function(e) {
new Effect.BlindDown(e);
}
uts.onHide = function(e) {
new Effect.BlindUp(e);
}
} |
E riposizionando gli elementi HTML (sorgente HTML):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div class="accordion">
<a href="#acc1">Accordion 1 </a>
<a name="acc1"></a>
<div>
<h1>Content #1 </h1>
<p>Bla bla bla.... </p>
</div>
<a href="#acc2">Accordion 2 </a>
<a name="acc2"></a>
<div>
<h1>Content #2 </h1>
<p>Bla bla bla.... </p>
</div>
<a href="#acc3">Accordion 3 </a>
<a name="acc3"></a>
<div>
<h1>Content #3 </h1>
<p>Bla bla bla.... </p>
</div>
</div> |
Si ottiene un semplice menu Accordion che può essere utilizzato in modo estremamente rapido.
Continua...
USimpleTabStrip è un Unobtrusive Javascript in grado di migliorare i classici link anchor (ancora) all’interno di una pagina HTML. Questo sorgente è un miglioramento della funzione presentata in Unobtrusive Tabstrip. In questa versione oltre ad allineare il codice alle release 1.6 di prototype.js è stata creata una vera e propria classe per gestire i TabStrip. La release qui presentata è molto semplice e lineare. Il suo principale lavoro risiede nell’aggiungere un evento click ai normali link anchor. Non sono inoltre presentati stili CSS, proprio per lasciare la massima libertà d’azione; tuttavia è possibile ottenere un efficace TabStrip con poche righe di codice CSS aggiuntivo; vedi Aggiungere degli stili CSS più sotto.
Codice HTML
La classe USimpleTabStrip lavora su un HTML molto semplice, sftuttando gli anchor (<a name></a>):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!-- Semplice lista di link all'interno della pagina -->
<ul>
<li><a href="#tbs1">Link 1 </a></li>
<li><a href="#tbs2">Link 2 </a></li>
<li><a href="#tbs3">Link 3 </a></li>
</ul>
<!-- Blocchi/tabs -->
<a name="tbs1"></a>
<div>
<h1>Scheda #1 </h1>
<p>Bla bla bla.... </p>
</div>
<a name="tbs2"></a>
<div>
<h1>Scheda #2 </h1>
<p>Bla bla bla.... </p>
</div>
<a name="tbs3"></a>
<div>
<h1>Scheda #3 </h1>
<p>Bla bla bla.... </p>
</div> |
Il tag div subito sotto l’anchor a funziona da contenitore.
Continua...
Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...