Al giorno d’oggi il linguaggio Javascript è uno dei linguaggi di programmazione più usati e performanti.
Utilizzato insieme a linguaggio HTML e al linguaggio CSS, ci permette di realizzare applicativi web (semplici siti web, portali, etc…). Prima di spiegare e approfondire il linguaggio Javascript, dobbiamo soffermarci su HTML5 e CSS3. HTML5 è un linguaggio di markup (HyperText Markup Language), il cui scopo è quello di formattare e impaginare documenti ipertestuali disponibili nel web. In parole semplici, è la struttura della nostra pagina web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<title>;Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
Quest’ultima è costituita appunto da marcatori che prendono il nome di tag HTML.
L’importanza dei tag HTML
I tag HTML sono racchiusi tra parentesi angolari. La maggior parte di questi è caratterizzata da tag di apertura e di chiusura.
Nell’esempio in alto puoi notare il codice HTML5 della nostra pagina web. Dopo averne definito la struttura, possiamo modificare e abbellire la nostra pagina attraverso il CSS3. Quest’ultimo è un linguaggio di stile lato front-end, che ci permette di realizzare il design della pagina. Possiamo, per esempio, applicare un colore di sfondo, posizionare gli elementi a nostro piacimento, attribuire uno specifico carattere al testo, applicare determinate dimensioni agli elementi, etc…
Dopo questa piccola introduzione, possiamo approfondire JavaScript.
Che cos’è Javascript?
Javascript è un linguaggio di programmazione finalizzato a rendere dinamica una pagina web, attraverso l’interazione dell’utente con il browser (lato client).
Per esempio, permette all’utente di inserire dati attraverso la compilazione di un form HTML; eseguire una determinata azione in seguito al click di un pulsante (button); cambiare i dati in corso, che vengono mostrati sulla pagina; gestire file multimediali, etc…
Come eseguire il codice Javascript in un documento HTML
Per eseguire del codice Javascript in un documento HTML5, dobbiamo, innanzitutto, inserire all’interno della nostra pagina web il file: index.js (puoi scegliere un nome qualsiasi, purché sia seguito dall’estensione .js ) attraverso il tag script. Quest’ultimo opera nel browser e, di conseguenza, conosce il suo contesto (insieme di formazioni).
Per verificare il corretto funzionamento dello script, apriamo il nostro file index.html sul browser.
Successivamente, clicchiamo all’interno della finestra con il tasto destro e selezioniamo “ispeziona”.
Ci spostiamo in Console, ove possiamo vedere il messaggio (“it works”) inserito all’interno del file index.js.
console.log("it works");
Il metodo console.log(), nell’esempio in alto, ha la funzione di stampare in console un messaggio. Quest’ultimo può essere una semplice stringa di testo, come in questo caso, oppure uno o più oggetti Javascript.
Nel momento in cui ci si approccia ad un nuovo linguaggio di programmazione, uno dei primi argomenti che si affrontano è quello delle variabili.
Le variabili in Javascript
Le variabili sono dei contenitori di dati che possono contenere un valore numerico, un testo (stringa) oppure un valore booleano (true or false) e altri tipi di dato.
In Javascript le variabili possono essere dichiarate attraverso let o const. La differenza sostanziale tra questi due modi di dichiarare le variabili è che “let” ci consente di assegnare alla stessa un nuovo valore, operazione non concessa con “const”, che sta per costante e fa riferimento ad un valore, che non può essere modificato.
let messaggio = "ciao";
const messaggio2 = "mondo";Nell’esempio sopra riportato, possiamo notare nella prima riga il nome della variabile: messaggio, che contiene al suo interno una stringa: “ciao”.
let numero = 4;
NB: Js è un linguaggio a tipizzazione debole, quindi il tipo di variabile non deve essere dichiarato.
Nell’esempio sopra riportato, possiamo assegnare alla variabile numero un valore numerico.
Oltre alle semplici variabili, in Js è tipico utilizzare gli array.
Come utilizzare gli Array in Javascript
La peculiarità di un array è quella di poter contenere più dati, e di poter accedere agli stessi attraverso un indice numerico. Immagina che un array sia un treno composto da vagoni, ove ogni vagone ospita dati.
Per creare un array puoi utilizzare due modi:
// creare un array vuoto
// 1 metodo
let array = [];
console.log(array);
// 2 metodo
let arrayDue = new Array();
console.log(arrayDue);Nel primo metodo utilizziamo le parentesi quadre, nel secondo il costruttore.
// popolare un array attraverso l'indice
array[0] = "valoreInPrimaPosizione";
array[1] = "valoreInSecondaPosizione";
array[2] = "valoreInTerzaPosizione";
array[3] = "valoreInQuartaPosizione";
array[4] = "valoreInQuintaPosizione";
console.log("arrayPopolato", array);Popoliamo l’array attraverso l’indice numerico (i), il quale indica la posizione dell’elemento all’interno dello stesso.
NB: L’indice parte sempre da 0.
arrayDue = ['valoreInPrimaPosizione', 'valoreInSecondaPosizione', 'valoreInTerzaPosizione', 'valoreInQuartaPosizione', 'valoreInQuintaPosizione'];
Puoi popolare un array anche semplicemente inserendo all’interno delle parentesi quadre i molteplici valori, senza dover esplicitarne l’indice (quest’ultimo è sottinteso). All’indice 0 corrisponde il valore: valoreInPrimaPosizione, e così via.
Possiamo anche modificare il valore di uno o più elementi di un array in una determinata posizione, sempre attraverso l’utilizzo del nostro beneamato indice.
array[2] = "valoreNuovoInTerzaPersona";In questa maniera: valoreInTerzaPosizione viene rimpiazzato da valoreNuovoInTerzaPosizione.
Metodi e proprietà degli Array in Javascript
In Javascript ci sono molti metodi e proprietà che permettono di manipolare l’array e ottenere informazioni.
Tra questi troviamo:
- Length => restituisce la lunghezza di un array. Esempio di utilizzo: nomeArray.length;
- Push() => aggiunge un elemento alla fine di un array. Esempio di utilizzo: nomeArray.push(elementoDaAggiungere);
- Reverse() => inverte l’ordine degli elementi di un array;
- Slice(inizio, fine) => restituisce un nuovo array più piccolo, in base ai valori corrispondenti agli indici passati come parametri;
- Array.map() => Crea una copia dell’array originale e esegue su ogni elemento dell’array una callback (funzione passata come parametro) che modifica l’elemento.
Ti consiglio di approfondire l’argomento in questione sulla documentazione di javascript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array?retiredLocale=it
Gli array in Javascript possono essere anche multidimensionali (matrici). Quest’ultimi sono array utilizzati come elementi di altri array.
let arrayMultidimensionale = [[1,23,3], [10,4,5], [7,99,87]];
//accediamo al numero 10 attraverso le coordinate
let numDieci = arrayMultidimensionale[1][0];
accediamo al numero 1 attraverso le coordinate
let numUno = arrayMultidimensionale[0][0];
Nell’esempio puoi notare un array 3×3 di interi. Per accedere ad uno specifico elemento occorre specificare le coordinate attraverso gli indici. Il primo corrisponde alla posizione dell’array (0,1,2) e il secondo a quella dell’elemento interno (0,1,2).
Precedentemente abbiamo affrontato il metodo: console.log().
Come utilizzare alert e prompt in Javascript
Javascript dispone di tantissimi metodi, tra i più utilizzati troviamo: alert() e prompt(). Vediamoli insieme.
alert("Come ti chiami?");Il metodo alert() mostra una finestra di messaggio (pop-up). Possiamo specificare il messaggio all’interno delle parentesi tonde e delle virgolette.
Lo scopo principale di questo metodo è quello di poter comunicare messaggi con l’utente.
Il metodo prompt() mostra una finestra di messaggio (pop-up). A differenza del metodo alert(), viene data all’utente, la possibilità di rispondere ad un determinato messaggio attraverso un campo di input.
prompt("Come ti chiami?");
var nome = prompt("Come ti chiami?");
console.log("nome");
I cicli in Javascript: cosa sono e qual è il loro ruolo?
In Javascript le istruzioni ricoprono un ruolo fondamentale e, tra queste, troviamo i cicli for.
Questa istruzione esegue un blocco di codice un numero determinato di volte.
for(inizializzazione; condizione; incremento) {
// blocco di istruzioni
}Utilizziamo la keyword for e apriamo le parentesi tonde. Inizializziamo una variabile, comunemente chiamata indice.
Inseriamo il punto e virgola e l’espressione che ritornerà “vero” o “falso”. Infine incrementiamo la variabile.
for(let i = 0; i < 10; i++) {
console.log("il valore di i: " + i);
}Nell’esempio sopra riportato notiamo che l’istruzione, contenuta all’interno delle parentesi graffe, verrà eseguita finché la variabile i sarà inferiore a dieci. Nel momento in cui la variabile sarà uguale a dieci, il blocco di istruzioni non verrà eseguito e, di conseguenza, si uscirà dal ciclo.
Javascript ci fornisce due varianti del for: for-in e for-of. Quest’ultime permettono di lavorare più comodamente con gli array.
let array = [1,2,3,4,5];
let total = 0;
let index;
for(index in array) {
total = total + array[index];
}
console.log("La somma è di " + total);Utilizzando il for-in, possiamo notare subito dei vantaggi nello scrivere il ciclo. In automatico Js riconosce che la variabile array contiene effettivamente un array. Accede ad ogni elemento di quest’ultimo, assegnando ad ogni iterazione alla variabile index il valore dell’indice corrente (array[index]).
let array = [1,2,3,4,5];
let total = 0;
let value;
for(value of array) {
total = total + value;
}
console.log("La somma è di " + total);
Utilizzando il for-of, non abbiamo la necessità di accedere all’elemento corrente dell’array attraverso il suo indice, ma ad ogni iterazione alla variabile value verrà assegnato direttamente il valore dell’elemento.
Un’altra istruzione fondamentale da conoscere e utilizzare è: if.
Quest’ultima, molto semplicemente, esegue un’istruzione se la condizione specificata risulta vera.
let number = 12;
if(number === 12) {
console.log("Ok");
}
if(number === 13) {
console.log("Ok");
}Nel primo if viene stampato “Ok”, in quanto il valore contenuto nella variabile number è uguale a dodici.
Nel secondo, invece, non esegue la stampa in quanto la condizione risulta falsa.
let number = 12;
if(number === 13) {
console.log("Ok");
} else {
console.log("Il numero è diverso");
}In quest’ultimo esempio introduciamo la keyword else, ovvero “altrimenti”.
Se la prima condizione risulta falsa, viene eseguita l’istruzione contenuta all’interno dell’else.
In questo caso verrà stampata la stringa: “Il numero è diverso”.
Dopo aver trattato l’istruzione if, possiamo focalizzare l’attenzione sugli operatori logici.
Gli operatori logici in Javascript
Gli operatori logici hanno lo scopo di combinare espressioni booleane, ovvero espressioni che restituiscono “vero” o “falso”.
Questi ultimi sono: &&; || e !
// esempi di espressioni che utilizzano operatori logici
5 > 2 && 8 != 3 // abbiamo come risultato true, in quanto entrambe le espressioni risultano vere
5 < 3 || 5 > 4 // abbiamo come risultato true, in quanto basta che una delle due espressioni risulta vera
!5 == 5 // abbiamo come risulato false, in quanto la negazione di 5 non è uguale a 5In questo articolo, ti abbiamo illustrato i principali concetti-chiave riguardanti il linguaggio Js.
Vuoi approfondire l’argomento Javascript? Niente paura! Abbiamo preparato per te una guida Javascript in italiano: corri a leggerla!
