(function() {

Imparare jQuery - 9 - jPaging - Step 5 : closure contesti e visibilità

Massimiliano Balestrieri — Thu, 28 Aug 2008 14:17:57 +0000

Cerchiamo prima di proseguire di fare chiarezza sull’ambito delle variabili, e sulla visibilità delle variabili esterne alle closure degli eventi.

Assegno fuori dal contesto degli eventi una variabile


var _context = _page;

La userò solamente in questo esempio. Nei successivi post non ci sarà traccia di questo codice.

All’interno degli eventi di tutti i tasti
subito dopo questo:


var _id = parseInt(jQuery(this).text()) - 1;

inserisco questo piccolo snippet di codice:


alert("Prima del click : " + _context);
_context = (_id + 1);
alert("Dopo il click : " + _context);

Le variabili dichiarate fuori dall’evento sono visibili e possono essere modificate all’interno degli eventi.

DEMO
SORGENTE

Ora pulendo il nostro codice incapperemo in un particolare bug da evitare quando lavoriamo all’interno delle closure.

Abbiamo la variabile _page. Usiamo direttamente quella.
Cancellando ogni riferimento a _context. Lo snippet diventa


var _page = 1;
//[...]
jQuery(”.jp-handler”)
.click(function(){
//[...]
    var _id = parseInt(jQuery(this).text()) - 1;
    alert(”Prima del click : ” + _page);
    _page = (_id + 1);
    alert(”Dopo il click : ” + _page);

    jQuery(”.jp-toolbar”)
    .eq(0)
    .find(”.jp-handler”)
    .eq(_id)
    .addClass(”jp-active”);

    jQuery(”.jp-toolbar”)
    .eq(1)
    .find(”.jp-handler”)
    .eq(_id)
    .addClass(”jp-active”);

    _jpages.eq(_id).show();

    var _page = _id + 1;
    if(_page != 1)
        jQuery(”.prev”).show();
    else
        jQuery(”.prev”).hide();

    if(_page != _pages)
        jQuery(”.next”).show();
    else
        jQuery(”.next”).hide();

    return false;
});

BUG
SORGENTE

Eseguendo il codice al click su uno dei tasti vedrete che _page risponde “undefined” negando in pratica quanto visto precendentemente con _context.

Questo perchè subito dopo dichiaro nell’ambito della closure var _page.

Se io voglio leggere/scrivere una variabile fuori ambito posso farlo fintanto che nello stesso ambito non venga definita una variabile con lo stesso nome.

Come vedrete a parte il primo alert non ci sono effetti perversi. La paginazione funziona.
Per evitare comunque effetti perversi difficili da scovare correggiamo il codice.

Morale (o buona pratica) : all’interno delle closure non dichiarare variabili con lo stesso nome del ambito esterno.
Questo “mascheramento” infatti può produrre effetti perversi.

A questo punto, visto il funzionamento delle variabili fuori dalle closure, e visto il bug correggiamo il codice e cancelliamo l’inutile variabile _context del primo esempio, questa volta in maniera corretta eliminando il bug.

CORREZIONE
SORGENTE

All’interno delle closure tolgo


var _page = _id + 1;

che non ha senso. Usiamo direttamente la variabile fuori closure che tanto deve valere l’indice _id + 1.

Tolta questa dichiarazione il nostro script funziona senza effetti perversi.

Abbiamo due contesti.

Il contesto del “main” che comunque non ha ambito globale essendo a sua volta all’interno della closure legata all’evento ready del documento.

E il contesto degli eventi sui tasti.

Il contesto dei tasti usa e scrive la variabile di ambito superiore del programma stesso (quello che ho chiamato il rozzo “main”).

Ora non ci rimane che creare un vero e proprio plugin jQuery.

[... continua]

Imparare jQuery - 8 - jPaging - Step 4 : Eventi

Massimiliano Balestrieri — Thu, 28 Aug 2008 09:57:07 +0000

Aggiungiamo gli eventi.

Nei precedenti post abbiamo aggiunto la toolbar. Ora non ci rimane che aggiungere i comportamenti ai tasti della toolbar.

Partiamo dai tasti di pagina. Poi vedremo il tasto avanti e indietro.


jQuery(".jp-handler")
.click(function(){
//qui il codice dell'evento
});

Per associare ad un link (usare sempre i link, saranno accessibili anche via tastiera) un evento usiamo la classe (jp-handler) che abbiamo inserito per interrogare facilmente il DOM, e il metodo jQuery click, wrapper dell’evento nativo onclick. Il metodo click della libreria jQuery accetta come argomento una funzione (closure).

All’interno dell’evento procediamo al nascondimento di tutte le pagine:


_jpages.hide();

NB: _jpages è visibile all’interno della closure dell’evento.Vedremo dopo uno dei primi pericoli dovuti alle closure. L’ambito e il nome delle variabile. In questo evento infatti c’è un possibile bug.


jQuery(".jp-toolbar").find(".jp-active").removeClass("jp-active");

Rimuoviamo la classe attivo. Usiamo il metodo find che è forse il metodo più semplice e potente per ottenere nodi da un certo punto di partenza (.jp-toolbar). Il risultato di find è l’elemento/i trovato. Quindi in catena rimuovo la classe all’elemento.

NB: imparate ad usare la chinability. A volte si parte da un “soggetto” e il soggetto rimane sempre quello nella catena. A volte il soggetto cambia come in questo caso: prima .jp-toolbar, dopo il metodo find, .jp-active.


var _id = parseInt(jQuery(this).text()) - 1;

L’id della “pagina” da mostrare è il testo del link -1.

NB: in questo caso per la prima volta uso la parola this. this è la parola chiave del linguaggio che indica l’istanza di un oggetto in un determinato momento. In javascript bisogna fare molta attenzione ai contesti perchè this cambia a seconda del contesto..

All’interno di un evento this vale sempre l’elemento a cui sto attaccando l’evento. Quindi sempre una reference di un nodo HTML.


jQuery(".jp-toolbar")
.eq(0)
.find(".jp-handler")
.eq(_id)
.addClass("jp-active");

Le toolbar sono due. Prendo la prima


eq(0)

Trovo i “tasti pagina”, Prendo l’elemento con indice _id e aggiungo la classe css “attivo” (jp-active).


jQuery(".jp-toolbar")
.eq(1)
.find(".jp-handler")
.eq(_id)
.addClass("jp-active");

Ora prendo la seconda toolbar e faccio la stessa cosa.
La capacità di navigare i nodi di un documento è sicuramente la principale ragione di successo di jQuery.


_jpages.eq(_id).show();

Mostro la pagina con indice _id.


var _page = _id + 1;
if(_page != 1)
    jQuery(".prev").show();
else
    jQuery(".prev").hide();

if(_page != _pages)
    jQuery(".next").show();
else
    jQuery(".next").hide();

Creo una variabile locale (_page) all’ambito con il valore dell’indice maggiorato di 1 (gli array partono da 0).

Faccio due banali e brutti if per vedere se devo nascondere o meno i tasti prev e next.

Creo gli eventi per i tasti next e prev


jQuery(".prev")
.click(function(){
//code
});

jQuery(".next")
.click(function(){
//code
});

All’interno degli eventi dei tasti next e prev il mio _id lo recupero dall’html:


var _id = (parseInt(jQuery(".jp-toolbar").find(".jp-active").eq(0).text()) - 1);

A seconda che sia prev o next subito dopo incremento o decremento questo valore


_id--;

Tutti gli eventi terminano con un return false per evitare che il link visiti effettivamente il target dell’attributo href.

DEMO

[... continua]

Vacanze 2008

Massimiliano Balestrieri — Tue, 26 Aug 2008 10:04:04 +0000

Ljubljana

Zagreb

Split

Brač

Mostar

Sarajevo

Dubrovnik

Bari

Salento

Imparare jQuery - 7 - jPaging - Step 3 : Differenze via jQuery - 2/2

Massimiliano Balestrieri — Fri, 18 Jul 2008 07:19:02 +0000

Aggiungiamo la toolbar per la paginazione.

Per aggiungere una struttura xhtml posso usare tante tecniche.
Un sistema di template sarebbe l’ideale. Perchè renderebbe più chiaro il codice xhtml.
Se dovessi scegliere forse salverei un file xhtml e lo inietterei via ajax nella nostra pagina (AHAH).

Ma aggiungerei “troppa carne al fuoco” e soprattutto dovrei gestire la callback e la chiamata asincrona.

Manca una sintassi “HEREDOC” stile perl/php.

Uso una tecnica simile:


var _toolbar = "\
\
    Page:  \
    \
        \
        \
    \
\
";

Questa variabile è stata costruita sulla base del nostro studio iniziale. Non ci sono ancora i link alle pagine. Non posso sapere a priori il numero di pagine. Ho usato gli apici singoli all’interno dei tag per rendere più chiaro il codice (altrimenti avrei dovuto “escapare“).

Ho inserito delle classi css perchè successivamente ne avrò bisogno.

Aggiungo la toolbar sopra e sotto il contenuto.


  jQuery(".target").append(_toolbar);
  jQuery(".target").prepend(_toolbar);

I metodi perfetti, quelli che avresti sempre desiderato avere, senza navigare come un ubriaco il DOM!

Tutti questi metodi (append, prepend, wrap, wrapAll li trovate nella sezione DOM della reference jQuery).

Aggiunta la toolbar aggiungiamo le pagine (contenitori dei record).
Innanzitutto aggiungiamo una variabile provvisoria per la pagina corrente:


var _page = 1;

Dopodichè nel ciclo che già ho scritto per navigare le pagine aggiungiamo la logica per la toolbar.
Potrei dividere per chiarezza le due fasi. Due funzioni… due metodi di una classe.

Ma ora facciamo il “rozzo main”.

La programmazione è fatta di iterazioni e refactory continui del codice. Almeno io faccio così.


if(_x==1 && _pages > 1)
    jQuery('<< prev | ')
    .appendTo(".jp-toolbar > .right > .numbers");

if(_x == _page){
    jQuery('')
    .text(_x)
    .appendTo(".jp-toolbar > .right > .numbers")
}else{
    jQuery('')
    .text(_x)
    .appendTo(".jp-toolbar > .right > .numbers");
}

jQuery(" | ")
.appendTo(".jp-toolbar > .right > .numbers");

if(_x == _pages && _pages > 1)
    jQuery('next >>')
    .appendTo(".jp-toolbar > .right > .numbers");

Cosa notare qui?

appendTo invece di append.

Utilissimo. Se sono in fase di creazione wrappo il mio nuovo elemento con jQuery e attraverso la chinability setto tutto quello che devo settare e all’ultimo appendo l’elemento alla nostra destinazione finale.

Notare come cambia la prospettiva tra append() e appendTo(). append() lo uso quando il soggetto della frase è il target. Quando uso appendTo() il soggetto è solitamente un nuovo elemento e il target invece diventa l’argomento di appendTo().

Notare l’uso del metodo text() invece della concatenazione classica di stringhe giusto per una maggiore eleganza.

I selectors sono arricchiti del simbolo > che indica “figli di” e rende la query più specifica ad un contesto particolare.

Non ci rimane che nascondere le pagine e visualizzare la pagina corrente più un paio di finezze. Un operazione veramente banale con i metodi jQuery:


 var _jpages = jQuery(".jp-page");
 _jpages.hide();
 _jpages.eq((_page - 1)).show();

 if(_page == 1)
    jQuery(".prev").hide();
 if(_page == _pages)
    jQuery(".next").hide();

Qui vediamo come abbiamo prima nascosto tutte le pagine (precedentemente create attraverso wrapAll) e poi visualizzato solo quella corrispondete all’indice (_page - 1). L’indice di un array parte da 0. La pagina corrente è la 1.

Notare l’uso di hide() e show() per visualizzare e nascondere un elemento. Lavorano sulla proprietà css display.

Notare come alcuni if sembrino inutili. La pagina iniziale è sempre 1. Perchè quegli if su prev e next?
Vedremo che c’è una particolare tecnica basata sul “segnalibro” o ancora (#segnalibro) per determinare la pagina corrente.

Notare anche come la programmazione sia volutamente rozza e procedurale. Sto buttando giù l’algoritmo in maniera grezza. Più è brutta la prima versione e più “sarò costretto” a fare almeno una riscrittura del codice (refactory).

Ora possiamo passare agli eventi.

DEMO

[... continua]

Bye Italia…

Massimiliano Balestrieri — Mon, 07 Jul 2008 12:55:29 +0000

Da oggi questo blog non è più ospitato da server italiani.
L’hosting è una cosa seria. Bisogna assicurarsi che le macchine funzionino, 24 ore su 24, e che nessuno abusi del servizio.

Consiglio a tutti coloro che hanno problemi di hosting un semplice test (su windows un ping vi farà vedere l’ip della macchina):

Su console digitare …
max@mubuntu:~$ host maxb.net maxb.net has address 213.92.85.188

Dopodichè aprire un browser e cercare sul motore di ricerca msn usando la keyword ip::

ip: 213.92.85.188

Troverete tutti i siti che condividono lo stesso apache.

Save The Developers

Massimiliano Balestrieri — Wed, 02 Jul 2008 12:18:50 +0000

Appoggio con tutto il cuore.
Salva uno sviluppatore. Aggiorna il tuo Browser.

Say No To IE 6!

Say No To IE 6!
Our current campaign focuses on assisting users in upgrading their Internet Explorer 6 web browser. This campaign will result in former IE 6 users having a more enjoyable experience on the web while (hopefully) creating a less stressful and complicated environment for web developers by hastening the retirement of an outdated browser.

Installando questo magnifico “plugin” ho avviato la virtual machine per avviare il browser “innominabile”.

Lo script di google contiene un carattere non valido alla riga 2 carattere 1 e alla riga 1163 sempre carattere 1 è Previsto oggetto.
Avete capito bene… è previsto oggetto!

http://www.google-analytics.com/urchin.js

Imparare jQuery - 7 - jPaging - Step 3 : Differenze via jQuery - 1/2

Massimiliano Balestrieri — Tue, 01 Jul 2008 09:55:38 +0000

Nel post precedente ho tagliato dall’xhtml qualsiasi struttura utile alla sola componente js.

jQuery

Aggiungere, manipolare in generale, elementi html di una pagina è uno dei principali motivi di successo nel mondo, della libreria creata dal genio di John Resig.
Una delle invenzioni più geniali che io abbia potuto veder nascere e crescere in questo mondo da quando “lo vivo”.

Prima odiavo il “front-end”.
Il css soprattutto e le sue differenze tra browsers. Poi non conoscevo assolutamente le tecniche (gli idiomi e i pattern) avanzate del linguaggio javascript. E in ultimo non esisteva (o non conoscevo) firebug.

Andavo avanti a funzioni e anche li era una lotta perenne tra attributi proprietari e standard. Tra ambienti di debug minimi (mozilla/firefox) e lo zero assoluto (Explorer).
Tra messaggi di errore comprensibili e assurde traduzioni in italiano (”Impossibile eseguire lo script liberato”… si certo, come no? cos’è lo script liberato?).

jQuery come è possibile vedere dalla sua reference è divisibile in

jQuery Core
DOM (Selectors/Attributes/Traversing/Manipulation)
CSS
Events
Effects
Ajax

jQuery Documentation

In questo post vedremo come aggiungere a runtime le differenza xhtml tra il primo e il secondo template.
Tra lo studio del componente finito e la sua versione accessibile senza javascript attivo.

Cosa dobbiamo fare? Facciamo un minimo di analisi.

Tralasciamo per ora le BUONE PRATICHE di programmazione javascript (terzo punto per una programmazione non intrusiva).
Vediamo passo passo quali operazioni deve eseguire il nostro js: il nostro rozzo “main”.

Noto subito che i records (
) non sono divisi in pagine.
La toolbar.
La visualizzazione della pagina attiva e il “nascondimento” delle pagine non visibili.

Procediamo per passi.

Innanzitutto come ho già ripetuto alla noia devo aspettare l’evento “onload”.
Non ho immagini, ne operazioni da fare su di esse. (Questo però non lo posso sapere a priori, e a dire il vero qualche test con swf e oggetti esterni potrei farlo, per vedere eventuali bugs di visualizzazione).


jQuery(document).ready(function(){

});

Ready prende come argomento una funzione.
Il poter passare come argomento una funzione anonima è una delle funzionalità più potenti del linguaggio javascript.
Il nostro programma verrà eseguito una volta che il DOM è disponibile e raggiungibile.

All’interno di questa closure (poi ne parlerò, ogni argomento funzione rappresenta una closure) il nostro programma ha un ambito ristretto e definito.
Se non commetto “refusi” nella programmazione non avrò “globali”: una fondamentale BUONA PRATICA di programmazione non intrusiva.

Il refuso più diffuso è inizializzare una variabile senza var davanti. Lo chiamo refuso… perchè uno che sa, lo fa per distrazione.
Secondo refuso è scrivere una cosa del genere: var a = b = 0;
b è globale attenzione! Ci sono cascato.

Usare variabili globali diffusamente è una cattiva pratica. Secondo me un punto globale ci deve sempre essere. Ed è il “singleton“. Ma c’è chi sostiene che anche questa sia una cattiva pratica. O mi sfugge qualcosa, o loro non hanno forse mai programmato.

In software engineering, the singleton pattern is a design pattern that is used to restrict instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. Sometimes it is generalized to systems that operate more efficiently when only one or a few objects exist. It is also considered an anti-pattern by some people, who feel that it is often used as a euphemism for global variable. - da wikipedia

Passo 1 - Dividere in pagine i record

Dividiamo inizialmente in blocchi da 3 record le pagine e “wrappiamo” (racchiudiamo, inglobiamo) 3 record all’interno di un div (contenitore) “pagina”.


  var _records = jQuery(".record");
  var _per_pagina = 3;
  var _pages = Math.ceil(_records.size() / _per_pagina);
  for(var _x= 1;_x <= _pages; _x++){
    //wrap
    var _page_start = (_x - 1) * _per_pagina;
    var _page_stop = _page_start + _per_pagina;
    var _slice = _records.slice(_page_start, _page_stop);
    _slice.wrapAll('');
  }

*cerco di scrivere sempre i nomi di variabili in inglese - mi è sfuggito _per_pagina

Testiamo il codice con firebug. Vediamo se scatena eccezioni. Nel tab html (di firebug, o altrimenti tramite webdevolperbar, sempre firefox, View Source -> View generated source, o altrimenti sempre con firefox, seleziona tutto -> tasto destro -> vedi selezione) è possibile vedere il codice generato.

Ho aggiunto classe e id alla pagine perchè so già che ne avrò bisogno per gli eventi.

Le variabili con l’underscore davanti stanno a indicare che sono private ad un ambito.

Questione di stile (ma anche di buone pratiche, non tutti hanno a disposizione la chiarezza sintattica di java, e a volte può essere una vera fortuna).

Liberi di fare un po’ quello che preferite. Io in questo modo vedo le variabili che arrivano dall’esterno di un ambito (arguments) o le variabili globali (se mai ce ne dovessero essere) o le proprietà/attributi che stabilisco essere pubbliche (perchè c’è il modo di stabilire la visibilità in javascript, solo che lo vedremo in un altro tutorial).

Sottolineo un paio di passaggi dello “snippet” precendente jQuery.

jQuery(selector);

La query innanzitutto: jQuery(”.record”);

Non uso mai il $.
jQuery può essere usato via alias $.

Io spesso lavoro in ambiti dove si usa prototype… non voglio problemi di conflitti.
E poi il dollaro mi ricorda altro. Il php. Ed ha un altro senso il dollaro nel php.
E con un search&replace posso sempre aggiungerlo.
E google registra che qui si parla di jQuery. Ed è un bene.

.record è un selettore css.

Si usa per le interrogazioni jQuery esattamente come nel css viene usato per applicare lo stile.
E’ il tipo di selezione più diffuso e semplice. Ne esistono altri (xPath) più complessi da leggere e da applicare ma anche più potenti.

La query restituisce gli oggetti jQuery che “wrappano” le references html.

Per chi viene dal DOM classico:
invece di avere il risultato di un document.getElementByTagName (o byID o con estensione byClassName) fatto di nodi HTML, attraverso interrogazione jQuery ho lo “stesso risultato”, ma fatto di oggetti jQuery. Chiaro?

Con un nodo HTML potrei fare risultato.id per ottenere l’ID del nodo o setAttribute per settare un nuovo attributo al nodo. Con l’oggetto jQuery posso fare le stesse cose usando i metodi jQuery o posso fare le native operazioni DOM con

jQuery(risultato).get(0).id

Quindi con il metodo get() ottengo la reference HTML. 0 può essere sottointeso.

Capire questo è fondamentale per proseguire.

DIMENTICATEVI l’implementazione nativa del DOM e tutti i suoi problemi. Almeno io non la voglio più vedere. Nonostante sia uno standard (in teoria) qualche multinazionale mi ha fatto odiare l’implementazione nativa.
E poi mi sento dire dai Programmatori filo-microsoft che IO non sono professionale!
Potevano prima di criticare me, insegnare loro la lettura di documenti di standard? RFC e quant’altro.

jQuery(selector).slice();

Ho usato il metodo slice (jQuery) per avere una porzione di nodi dall’array restituito dalla selezione (dal record x al record y).

jQuery(selector).wrapAll();

E il metodo wrapAll che permette di wrappare (racchiudere, inglobare) appunto gli elementi selezionati con un nodo (o più) html.

Il metodo wrap avrebbe aggiunto ad ogni singolo elemento restituito da slice il codice html, quindi invece di avere un div page a contenere 3 record avrei avuto un div page a contenere ogni singolo record (e non serviva a niente).

jQuery(selector).size();

Il metodo size permette di avere il numero di elementi ottenuti dalla selezione jQuery.

Ecco la

DEMO

e qui il codice generato da queste prime 5 righe di codice js:

Da:

[... continua]

Imparare jQuery - 6 - jPaging - Step 2 : Template pre-js

Massimiliano Balestrieri — Tue, 01 Jul 2008 08:26:46 +0000

Nell’esempio precedente abbiamo visto il componente “finito”. Non funzionante. Ma visivamente come dovrebbe essere alla fine del nostro processo di sviluppo.

La paginazione, la pagina attiva, i pulsanti avanti e indietro (visibili o meno).

Per programmare in maniera intrusiva bisogna rispettare il principio del “Graceful degradation“.
Io devo AGGIUNGERE una funzionalità. Aggiungerla a “runtime” sull’evento load.
Devo garantire una base visibile e accessibile a chiunque, anche ai browsers (o ai bot/spiders) non dotati di engine js.

Vediamo come ripensare il template precedente senza paginazione javascript, o meglio senza javascript.
La toolbar è chiaramente inutile ad un utente senza javascript : cosa se ne farebbe?

Questo esempio è veramente banale. Altri compoenenti UI sono più difficili da pensare e studiare nei due stati (js e nojs).

DEMO

XHMTL:

Conclusione: il template statico deve essere questo. NON quello dello studio UI del post precendente.
Vedremo come aggiungere tutto quello che è “js” via js stesso.

Aggiungi via js, l’interfaccia js e i suoi stili (oltre che le funzionalità).

Seguendo questo principio, motori di ricerca, browsers testuali, e dispositivi mobili leggeranno perfettamente tutte le nostre pagine. “Male che vada” arriveranno all’informazione.

In questo esempio l’unico svantaggio dell’utente (o agente) senza js (e non è detto che sia uno svantaggio) sarà quello di dover scorrere la pagina.

Le informazioni verranno perfettamente indicizzate.

Il tutorial è destinato a chi vuole avvicinarsi al mondo javascript e in particolare alla libreria jQuery.
La paginazione lato-client presenta vantaggi e svantaggi.
Ma non sta a me definirli.

[... continua]

PS: troppo semplice questo post. passiamo al successivo.