Un pò di pratica

Non c'è niente di meglio che un pò di pratica per capire i concetti esposti fino ad ora.

Per l'occasione ho creato un progetto su GitHub, dove metterò di volta in volta tutto il materiale necessario per eseguire gli esempi che proporrò.

Git è un sistema di condivisione sorgenti distribuito.

Ognuno di voi potrà installare sulla sua macchina il repository dei sorgenti eseguendo un semplice comando da una shell, a patto di installare git per il proprio sistema operativo.

Se non usate ancora git, vi consiglio di provarlo, poi non potrete farne a meno.

Scaricatelo e installatelo seguendo questo link e scegliendo il pacchetto d'installazione in base al sistema operativo utilizzato.

• Aggiungete al path di sistema la cartella bin presente nel percorso d'installazione
• Create una cartella vuota che conterrà tutti gli esercizi che vi proporrò.
• Aprite una shell nuova e posizionatevi nella cartella appena creata.
• Eseguite il comando:
  git clone https://github.com/ivansaracino/passionejavascript.git

Il comando precedente copierà nella vostra cartella la cartella passionejavascript

Quando aggiornerò il repository remoto, vi basterà invocare il comando

• git pull

dalla cartella radice passionejavascript.

Nella cartella passionejavascript troverete la cartella modulerevealedpattern contenente la soluzione al seguente esercizio:

Creare una pagina web con due bottoni, start e stop.
Appena caricata la pagina, il bottone start è abilitato, il bottone stop è disabilitato.
Quando premete il bottone start, dovrà partire un contatore, che si aggiornerà ogni secondo; a questo punto il bottone start diventa disabilitato e il bottone stop abilitato.
Quando premete il bottone stop, il contatore si arresterà e così via.

L'esempio non è particolarmente utile ma mostra l'utilizzo del module revealed pattern,  un design pattern in javascript, che ha lo scopo di esporre sullo scope global un unico oggetto, sfruttando il concetto di closure e IIFE che abbiamo visto in questo post

Per eseguire la soluzione vi basta aprire il file index.html in un browser.

Notate come nello scope globale ci sia solo la variabile modulo  che espone le funzioni start() e stop() legate ai click dei rispettivi bottoni presenti nella pagina html.

Tutti i dettagli implementativi sono nascosti nella IIFE.

Se avete dubbi o problemi, non fate i timidi: chiedete commentando :))

Alla prox
Ivan