LOGIN
JavaScript è uno dei linguaggi di programmazione più usati al mondo, nell’olimpo dei grandi come C, C++, PHP, Java e Python, il principale per lo sviluppo di applicazioni web applications. Sempre più diffuso, tocca gli ambienti mobile, server e desktop ed è alla base del funzionamento di molti siti e servizi online che usiamo quotidianamente. Vediamo come attivare Javascript e quali sono le principali funzionalità.
-
1. Come funziona Javascript
JavaScript richiede un programma ospite, che carica ed esegue lo script. L’esempio tipico è quello del browser. Quando viene visitata una pagina web che contiene codice JavaScript, quest’ultimo viene eseguito dall’interprete contenuto nel browser. Le interfacce che consentono al codice di rapportarsi con un browser sono chiamate DOM (Document Object Model, in italiano Modello a Oggetti del Documento).
In ambito web, JavaScript viene usato per scrivere piccole funzioni integrate nelle pagine HTML che interagiscono con il DOM del browser per compiere determinate azioni.
Un esempio di codice JavaScript all’interno di una pagina HTML non fa altro che mostrare una schermata di avviso contenente “Hello World”:
<script type="text/javascript">
alert('Hello world');
</script>Per scrivere direttamente il messaggio nella pagina HTML:
<script type="text/javascript">
document.write('Hello world');
</script>Non esiste solo il browser, però. Altri programmi hanno dei piccoli script scritti con questo linguaggio come Adobe Acrobat/Adobe Reader nei loro file PDF o ad esempio Mozilla Firefox, che li utilizza per l’interfaccia utente.
-
2. Definire un array in JavaScript
Considerate come matrici matematiche a una o più dimensioni, gli array consentono di associare ad un unico nome di variabile (o identificatore) più valori, accessibili tramite un indice numerico che parte da zero. In genere, i valori contenuti in un array hanno una qualche affinità (ad esempio l'elenco dei giorni della settimana). L'uso degli array evita di definire più variabili e semplifica lo svolgimento di operazioni cicliche su tutti i valori.
Un esempio di array basato sulla rappresentazione letterale:
var giorniDellaSettimana = [ "lunedì", "martedì", "mercoledì", "giovedì", "venerdì", "sabato”, "domenica"];
Ora possiamo accedere ai singoli elementi facendo riferimento al nome della variabile e all'indice corrispondente all'elemento. Se vogliamo accedere al primo elemento dell'array dei giorni della settimana scriveremo:
var primoGiorno = giorniDellaSettimana[0];
L'indice scalerà per gli altri giorni:
var terzoGiorno = giorniDellaSettimana[2];
var settimoGiorno = giorniDellaSettimana[6];
Dopo l'assegnamento, ciascuna variabile conterrà la stringa corrispondente all'indice.
Gli elementi di un array possono essere di qualsiasi tipo di dato previsto da JavaScript:
var myArray = [123, "stringa", true, null];
Un elemento di un array può anche essere un altro array:
var myArray = [123, "stringa", ["a", "b", 99]];
In questo caso, per accedere all'elemento 99 dovremo accedere prima al terzo elemento dell'array principale e poi al terzo elemento dell'array contenuto in esso:
var novantanove = myArray[2][2];
La presenza di array come elementi di altri array ci consente di definire array multidimensionali o matrici. Ad esempio, quella che segue è la definizione di una matrice 3x3 di interi:
var matrice = [[24, 13, 1], [48, 92, 17], [8, 56, 11]]
Per accedere al numero 48 indicheremo le sue coordinate così:
var quarantotto = matrice[1][0];
L’impiego di array si sposa bene con quello degli oggetti, in cui con parentesi graffe si possono definire una serie di proprietà con uno specifico valore etichettate con un nome.
Questo è un oggetto Javascript:
Studente1 = {"nome":"Michele", "cognome":"Rossi", "citta":"Roma" }
-
3. Metodi e proprietà
Di qualsiasi tipo di oggetti sia composto un array possiamo sfruttare su di esso alcuni metodi e proprietà. La più utilizzata è length che indica il numero di elementi in esso contenuti.
Utilizzando l’array:
nomi = ["Michele", "Sergio", "Simona", "Eva", "Giorgia", "Melania", "Marco"]
con nomi.length viene restituito 7.
Per aggiungere elementi in coda all’array possiamo invocare nomi.push("Alessandro") e il contenuto della struttura diventerà:
["Michele", "Sergio", "Simona", "Eva", "Giorgia", "Melania", "Marco", “Alessandro”]
e la lunghezza, di conseguenza, sarà pari a 8.
Con nomi.pop() svolgiamo due operazioni: ci facciamo restituire l’ultimo oggetto e lo rimuoviamo dall’array.
Altro aspetto è la possibilità di trasformare un array in una stringa: toString restituisce una stringa con tutti i nomi separati da virgola, quindi vedremo
'Michele,Sergio,Simona,Eva,Giorgia,Melania,Marco'
Mentre, nomi.join(' -- ') permette di specificare il separatore con cui verranno accodati tutti gli oggetti tra loro:
‘Michele -- Sergio -- Simona -- Eva -- Giorgia -- Melania -- Marco'
-
4. Ciclo forEach in JavaScript e PHP
forEach è un altro metodo che consente di applicare una azione a ciascun elemento di un array percorrendolo in senso discendente (da 1 a n). Si tratta di una iterazione, un ciclo, ottenuto associando una funzione di callback che deve essere eseguita ad ogni step.
var mesi = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
mesi.forEach(function(item, index){ console.log('['+index+'] '+item); });
Così, la funzione di callback prende come parametri i nomi dell’elemento corrente (item nel nostro caso) e l’indice dell’elemento corrente (facoltativo). Inoltre, la callback prende anche un terzo parametro in cui riscrive l’array che sta scorrendo.
In PHP foreach è utilizzato per ciclare ogni coppia di chiavi/valori degli array associativi senza effettuare controlli sulla loro dimensione e si occuperà automaticamente di terminare il ciclo quando tutti gli elementi sono stati processati.
Un esempio che calcola la somma degli elementi di un array:
$array_monodimensionale = array(1, 2, 3, 4, 5);
$somma = 0; foreach ($array_monodimensionale as $valore) { $somma += $valore; }
echo "La somma degli elementi dell'array è: " . $somma;
Il costrutto dopo la parola chiave foreach include all'interno delle parentesi tonde tre elementi: l'array da ciclare; la parola chiave as; la variabile che contiene il valore dell'indice corrente. Il codice da eseguire ad ogni iterazione è all'interno delle parentesi graffe.
Per un array multidimensionale, la sintassi è la stessa con la differenza che si utilizzano due variabili: la variabile che identifica l'indice dell'array (nel nostro caso il nome dell'utente) e la variabile che identifica il valore dell'indice (nel nostro caso l'età):
$eta_utenti = array( 'Simone' => 29, 'Josephine' => 30, 'Giuseppe' => 23, 'Renato' => 26 );
$somma_eta = 0;
foreach ($eta_utenti as $nome => $eta) {
echo "L'utente " . $nome . " ha " . $eta . " anni\n";
$somma_eta += $eta;
}
echo "La somma delle età degli utenti è: " . $somma_eta; -
5. Il metodo replace
Il metodo replace in JavaScript serve a sostituire tutte le occorrenze di una stringa, simultaneamente. Un esempio in cui sostituiamo JS, valorizzato nella variabile str, con la definizione estesa del nostro linguaggio JavaScript restituita da document.write:
var str = "Tutti gli utilizzi dei metodi JS."; str = str.replace('JS','JavaScript'); document.write(str);
Questo metodo è molto utile anche per sostituire le lettere maiuscole e minuscole e per gestirle facilmente attraverso poche righe di codice, essendo case sensitive, ovvero in grado di riconoscere lettere maiuscole e minuscole.
var str = "BRAVI Tutti. BRAVI Tutti."; str = str.replace(/bravi/ig,'Bravi'); document.write(str);
Per saperne di più: A cosa serve Javascript e come imparare a programmarlo
