Guida Javascript Base: #8 Concetti e Tecniche più utilizzate
By Andrea Marchetti
@marchetti_design
In questo ultimo articolo della serie javascript base andiamo a introdurre alcune concetti che vengono utilizzati spesso in javascript. Data la complessità dell’argomento alcune tecniche (come la programmazione ad oggetti) non sono trattate nella loro totalità, fatemi sapere nei commenti se volete proseguire il discorso.
1) Callback: Funzioni passate come argomenti
In javascript le funzioni possono essere passate come argomenti esattamente come le variabili. Questo può essere utile quando si vuole eseguire una funzione dopo aver invocato un altra funzione.
Prendiamo il seguente esempio dove abbiamo una funzione che esegue una semplice somma.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body{font-family: arial;padding:40px; margin:0; background: #eee; color:#333}
.subtitle{color:#999; font-size: 20px}
</style>
</head>
<body>
<h1>Javascript</h1>
<p class="subtitle">Tutorial Base</p>
<p>Introduzione a javascript</p><script>
function somma(primo, secondo){
alert( primo+secondo);
}
somma(3,5);
</script>
</body>
</html>
Lo script visualizza un alert con la somma dei due valori passati quando invochiamo la funzione.
Ora aggiungiamo una funzione passata dopo i primi due argomenti come callback:
<script>
function somma(primo, secondo, callback){
alert( primo+secondo);
callback();
}
somma(3,5, function(){
alert("Funzione eseguita dopo la funzione somma.");
});
</script>
Quando invochiamo la funzione il terzo parametro è una funzione che viene eseguita dopo l’alert con la somma, questa logica viene spesso utilizzata in jQuery.
In questo esempio la funzione è stata passata direttamente dentro l’invocazione della funzione somma. Possiamo passare un funzione come argomento anche esternamente alla dichiarazione della funzione somma.
<script>
function somma(primo, secondo, callback){
alert( primo+secondo);
callback();
}
function sommaEseguita() {
alert("Funzione eseguita dopo la funzione somma.");
}
somma(3,5, sommaEseguita);
</script>
Il risultato sarà lo stesso di prima, la sintassi però è più pulita.
2) Event Driven: Ambiente guidato dagli eventi
Ciò che rende javascript diverso da altri linguaggi è che lavora (a parte casi particolari) lato client nel browser del nostro dispositivo. Questo significa che una volta scaricata la pagina web javascript è li ad ascoltare, pronto ad intercettare eventi (click, mouseover, drag n’drop) e svolgere operazioni. Prendiamo il seguente codice:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body{font-family: arial;padding:40px; margin:0; background: #eee; color:#333}
.subtitle{color:#999; font-size: 20px}
</style>
</head>
<body>
<h1>Javascript</h1>
<p class="subtitle">Tutorial Base</p>
<p>Introduzione a javascript</p>
<button> Cliccami </button>
<script>
var button = document.getElementsByTagName(‘button’);
function openAlert(){
alert("Ciao");
}
button[0].addEventListener("click", openAlert);
</script>
</body>
</html>
In questo esempio la pagina viene caricata e javascript non fa nessuna operazione è però li ad ascoltare e quando cicchiamo sul bottone cliccami intercetta il click e mostra l’alert.
“è guidato dagli eventi”, event driven.
A differenza dei linguaggi lato server come php uno script javascript non viene eseguito ogni volta che succede qualcosa sulla pagina, viene caricato una sola volta rimane in memoria e poi in base agli eventi che l’utente compie svolge operazioni.
3) Scope: Accesso alle variabili
Il concetto di scope in javascript è (in sostanza) la possibilità che abbiamo di accedere alle variabili in base a dove siamo nel codice. Non tutte le variabili sono a accessibili dovunque. Prendiamo ad esempio:
<script>
var a = 1;
function funzioneChildScope (){
var b = 2;
}
funzioneChildScope();
alert(b);
</script>
Se proviamo ad eseguire il codice avremo il seguente errore:
Questo perché stiamo cercando di accedere alla variabile b (contenuta dentro la “funzioneChildScope”) dall’esterno. Al contrario se proviamo ad accedere ad alla variabile a da dentro la “funzioneChildScope” vedremo il valore.
<script>
var a = 1;
function funzioneChildScope (){var b = 2;
alert(a);
}
funzioneChildScope();
</script>
Se all’interno della funzione creiamo una variabile con stesso nome della variabile esterna (globale) il valore utilizzato sarà quello definito dentro la funzione.
<script>
var a = 1;
function funzioneChildScope (){var a = 2;
alert(a);
}
funzioneChildScope();
</script>
Questo se richiamiamo la variabile da dentro la funzione quindi nel child-scope della funzione stessa.
Se richiamiamo la variabile al root-scope cioè all’esterno il valore visualizzato sarà quello definito all’esterno nella variabile globale a.
<script>
var a = 1;
function funzioneChildScope (){
var a = 2;
}
funzioneChildScope();
alert(a);
</script>
4) Object: Oggetti, Proprietà e Metodi in Javascript
Javascript come molti altri linguaggi di programmazione supporta la programmazione ad oggetti. I vantaggi dell’utilizzo di una struttura ad oggetti (in qualsiasi linguaggio di programmazione ) sono molti. Riusabilità e del codice, leggibilità (…)
Vediamo quindi come definire un oggetto in javascript. Gli oggetti sono variabili che al loro interno possono contenere più proprietà ognuna con il suo valore.
<script>
var giocatore = {
nome : "Steph",
cognome : "Curry",
numero: 30
};
</script>
Nell’esempio l’oggetto giocatore ha definito al suo interno 3 proprietà. La proprietà “nome” ha come valore la stringa “Steph”. Per accedere a una proprietà utilizziamo giocatore.nome;
<script>
var giocatore = {
nome : "Steph",
cognome : "Curry",
numero: 30
};
alert(giocatore.nome);
</script>
Nel esempio visualizziamo il nome in un alert.
Un oggetto può contenere oltre che proprietà anche metodi. I metodi sono funzioni che possono essere eseguite su un oggetto.
<script>
var giocatore = {
nome : "Steph",
cognome : "Curry",
numero: 30,
visualizzaDati: function(){
return this.nome + ‘ ‘ + this.cognome + ‘ ‘ + this.numero;
}
};
</script>
Nel oggetto giocatore abbiamo un metodo visualizzaDati che restituisce i dati del giocatore. Per accedere al metodo che abbiamo appena definito utilizziamo giocatore.visualizzaDati();
<script>
var giocatore = {
nome : "Steph",
cognome : "Curry",
numero: 30,
visualizzaDati: function(){
return this.nome + ‘ ‘ + this.cognome + ‘ ‘ + this.numero;
}
};
alert(giocatore.visualizzaDati());
</script>
Nel esempio visualizziamo il risultato del metodo in un alert.
5) Context: Valore di this
Il contesto è in teoria un concetto semplice, le sue varie applicazioni lo rendono in realtà il concetto più complesso da comprendere in javascript. Possiamo definirlo come il valore di this nel codice che stiamo eseguendo. Di default il valore di this è il root scope, lo scope globale ovvero window.
<script>
alert(this);
</script>
La parola this si riferisce al proprietario della funzione che stiamo eseguendo. Per esempio se stiamo eseguendo this in una funzione assegnata un evento click come questa:
<script>
var sottoTitolo = document.getElementsByClassName(‘subtitle’);
function openAlert(){
this.style.color = ‘#FF6600’;
}
sottoTitolo[0].addEventListener("click", openAlert);
</script>
This si riferisce all’elemento che abbiamo cliccato. Nel esempio cliccando sul sottotitolo questo diventa rosso.
5.1) Modificare il valore di This
Il contesto può essere quindi differente, prediamo per esempio il seguente oggetto:
<script>
var mioOggetto = {
mioMetodo: function(){
return this;
}
};
alert(mioOggetto.mioMetodo());
</script>
In questo caso il valore di this all’interno dell’oggetto mioOggetto è l’oggetto stesso, non il root scope window.
Per verificare se this è uguale all’oggetto possiamo fare il seguente test:
<script>
var mioOggetto = {
mioMetodo: function(){
return (this === mioOggetto);
}
};
alert( mioOggetto.mioMetodo() );
</script>
Il risultato sarà true.
Detto questo il valore di this può essere modificato, questo dipende da come viene invocata la funzione (nella quale abbiamo this).
5.1.1) Call
Call può modificare il valore di this, quando invochiamo la funzione possiamo specificare il contesto:
<script>
var mioOggetto = {
mioMetodo: function(){
return (this === mioOggetto);
}
};
alert( mioOggetto.mioMetodo.call(window) );
</script>
Così il contesto della funzione “mioMetodo” che abbiamo invocato nell’alert è diventato window, il nostro test darà come risultato false.
5.1.2) Bind
Bind funziona in maniera diversa, cambia il contesto e restituisce una funzione con il contesto assegnato (una Bound Function) che posso utilizzare tutte le volte che voglio nel codice.
<script>
var mioOggetto = {
mioMetodo: function(){
return (this === mioOggetto);
}
};
var miaFunzioneBound = mioOggetto.mioMetodo.bind(window);
alert( miaFunzioneBound() );
</script>
Se visualizziamo la “bound function” in un alert vedremo che this non è uguale a mioOggetto quindi false.
Se chiamiamo la funzione direttamente dal oggetto senza effettuare il bind della funzione vedremo che il test sara verificato quindi true.
<script>
var mioOggetto = {
mioMetodo: function(){
return (this === mioOggetto);
}
};
var miaFunzioneBound = mioOggetto.mioMetodo.bind(window);
alert( mioOggetto.mioMetodo() );
</script>
L’utilizzo di bind è utile quando utilizziamo this all’interno di una funzione e il contesto non è quello desiderato.
Con questo abbiamo concluso la panoramica su Javascript, partendo zero ed arrivando a i concetti più complessi. Se sei interessato a questo argomenti e vuoi proseguire il discorso fammelo sapere nei commenti 😉
Stay Tuned!
Prossima lezione:
Guida Jquery Base: #1 Cos’è jQuery, inclusione e sintassi base
Potrebbero interessarti:
Accidenti … un gran bel giro! Su questa ultima lezione mi si è inceppato il cervelletto, devo studiarlo con più cura.
Termina qui il nostro tour? Possiamo imparare come sfruttare le potenzialità di Javascript con esempi più attinenti alla realtà?
Grazie intanto per le preziose lezioni di base
Ciao Sara, ho cercato di racchiudere più concetti in un solo articolo. Ti consiglio di rileggerti ogni punto separatamente e non tutto l’articolo in una sola volta.
Per quanto riguarda le prossime lezioni sto preparando una guida base su jquery, che prosegue il percorso fatto finora. Se sei interessata tieni d’occhio la pagina facebook del blog 😉
Tutorial interessante e di facile comprensione.
Attendo il seguito 😉
descrivi i punti chiave del linguaggio con sintesi e chiarezza..complimenti !!
interessatissimo ad approfondire il linguaggio con altri argomenti se possibile.
Attendo
Ho ripassato javascript con queste tue lezioni … ma l’ultima è un po’ HARD! Grazie.