In questo articolo vedremo alcuni concetti chiave della programmazione JavaScript che si rivelano essere fondamentali quando si utilizza jQuery. Ovviamente la trattazione non può essere esaustiva ma deve essere considerata come un'introduzione all'argomento.
Variabili
Le variabili, definite con la parola chiave var, in JavaScript contengono dati. JavaScript non obbliga il programmatore a dichiarare il tipo di dati contenuto in una variabile, perchè è l'interprete JavaScript a farlo durante l'esecuzione del codice.
Ecco alcuni tipi di variabili:
var str = 'Test'; // stringa
var n = 1; // numero
var is = true; // booleano
var arr = [1, 2, 3]; // array
var obj = {}; // oggetto (letterale)
var $test = $('#test'); // oggetto/elemento jQuery
var test = document.getElementById('test'); // oggetto/elemento DOM
var re = /^\d+$/; // espressione regolare
Essendo un linguaggio basato sugli oggetti, è possibile invocare su questi tipi di dati il metodo corrispondente dell'oggetto base di riferimento. Ad esempio la variabile str fa riferimento all'oggetto base String perchè è una stringa.
Quindi se volessimo convertire questa stringa in caratteri maiuscoli dovremmo scrivere:
var strUpper = str.toUpperCase(); // 'TEST'
Oppure direttamente:
var str = 'Test'.toUpperCase(); // 'TEST'
Le variabili che abbiamo visto sinora sono dette variabili globali perchè sono visibili in tutto il nostro codice. Esistono tuttavia delle variabili locali che sono visibili solo in una determinata sezione in cui vengono definite. L'esempio classico è quello delle variabili create all'interno di funzioni:
var URL = location.href;
var getBaseURL = function() {
// qui URL è visibile
var base = location.protocol + location.host;
// base non è accessibile al di fuori della funzione getBaseURL();
return URL.replace(base, '');
};
alert(base); // Errore: undefined
base è accessibile solo all'interno del suo contesto, e se proviamo ad accedervi dall'esterno otteniamo il valore undefined che l'interprete JavaScript riserva a quelle variabili non definite.
Ecco un altro esempio:
var testFunc = function() {
var str = 'lorem';
var upperFirst = function() {
// Qui str è visibile
var first = str.charAt(0); // 'l', visibile solo all'interno di upperFirst()
var upper = first.toUpperCase(); // 'L'
var output = upper + str.substring(1, str.length); // 'Lorem'
return output; // 'Lorem'
};
alert(first); // Errore: undefined
};
Funzioni
Una funzione non è altro che un insieme di operazioni sui dati volto ad ottenere un risultato finale. Si usano le funzioni quando si vogliono manipolare i dati in modo pratico e riusabile.
Una funzione in JavaScript può essere definita in vari modi, tutti accomunati dalla parola chiave function:
function test() {
// codice
}
var test = function() {
// codice
};
(function() {
// codice
})();
test.click(function() {
// codice
});
Una funzione viene generalmente invocata in questo modo:
test();
Le funzioni accettano argomenti, che vengono passati in questo modo:
var multiply = function(a, b) { // a e b sono gli argomenti, separati da virgola
return (a * b);
};
alert(multiply(3, 2)); // 6
Se una funzione restituisce un valore, come nel caso della moltiplicazione, allora si usa l'istruzione return. Questa istruzione può anche esseree utilizzata per interrompere l'esecuzione di una funzione:
var multiply = function(a, b) {
if(a == 0 || b == 0) {
return false;
}
return (a * b);
};