Javascript 101 — Partiamo dalle basi

Javascript è un linguaggio di scripting che funziona insieme a HTML e CSS per migliorare le funzionalità del codice e aggiungere elementi interattivi. Può essere incorporato in HTML usando il tag <script> ed è un linguaggio interpretato, il che significa che non è compilato.
Come principiante, l’approccio migliore a JavaScript è comprendere i suoi elementi costitutivi di base. Ed ecco perchè ho deciso di scrivere di JS partendo dai tipi primitivi.

Tipi Primitivi

I tipi primitivi in Javascript sono i blocchi di base del nostro linguaggio. Senza di loro non possiamo manipolare dati e quindi scrivere delle logiche.

I tipi primitivi in Javascript sono:

• numeri — number
• stringhe — string
• booleani — boolean
• null e undefined — due tipi particolari che vedremo dopo

In realtà esistono altri due tipi: Symbol e BigInt, ma non li affrontiamo ora.

Questi tipi primitivi rappresentano tutto ciò che possiamo trovare in una pagina web. Ad esempio, se apriamo la parte sottostante di un video di Youtube possiamo vedere il numero di “mi piace” (quindi number), e possiamo vedere anche del testo, quindi stringhe. Il booleano potrebbe essere rappresentato se il “mi piace” è già stato cliccato o no dall’utente in questione.

Ma da dove partire a scrivere il nostro codice JS? Il posto più comodo è sicuramente una console, un terminale. Quella più a portata di mano, è quella di Chrome.

Chrome mette a disposizione, senza installare nessun tipo di plugin, il Chrome developer tools, che, tra le altre cose, contiene anche un terminale dove poter scrivere il nostro codice lato client.

Console di Google Chrome

Numeri e stringhe scritte direttamente nella console

Numeri

Partiamo dal tipo number.

Javascript, diversamente da altri linguaggi, ha un solo tipo per i numeri.

Una delle critiche mosse a JS è proprio la troppa semplificazione di alcuni concetti

Il tipo number rappresenta interi, decimali, numeri positivi e negativi

Che tipo di operatori matematici abbiamo per manipolare i nostri number? Abbiamo i classici:

• addizione
• sottrazione
• moltiplicazione(*)
• divisione
• modulo
• potenza(**)

Piccola digressione: proprio per la generalizzazione che fa JS con i numeri, vi capiterà spesso di trovarvi di fronte al valore NaN…ma cosa significa?

NaN sta per Not a Number e rappresenta casualmente…tutto ciò che non è un numero! Ad esempio:

Alcune operazioni che generano NaN

Conversione da stringa a numero e viceversa (es. parseInt(“blabla”) o Number(undefined)), operazioni matematiche dove il risultato non è un numero reale (es. Math.sqrt(-1)), operandi il cui valore è NaN (es. 7 ** NaN), forme indeterminate (es. 0 * Infinity, o undefined + undefined), tutti questi sono esempi di operazioni che generano NaN.

Tornando a noi, con gli operatori matematici, in JS, vale la regola PEMDAS, cioè prima viene eseguito il contenuto della parentesi. Se non c’è, le operazioni vengono eseguite in ordine di lettura, da sinistra verso destra.

Variabili e costanti

Cosa sono le variabili?

Le variabili possono essere viste come delle etichette che noi assegniamo ad un valore o ad una serie di valori. Perchè sono utili?

Perchè con questa etichetta possiamo richiamare il valore e modificarlo, o utilizzarlo per le nostre logiche. La sintassi standard in JS per dichiarare variabili è:

let variableName = value;

Utilizzando quindi la parola chiave let. Ad esempio:

let year = 2022;

Ma come richiamiamo questa variabile?

let alfa = 2;
let beta = 4;
console.log(alfa + beta); // 6

Abbiamo semplicemente richiamato il valore…ma non lo abbiamo modificato! Per modificarlo basta assegnarne un nuovo valore:

alfa = alfa + 2;

Questa è la parola chiave let, vediamo const. Const è simile ma, come potete immaginare, è usato per quelle variabili che non andiamo mai a sovrascrivere, cioè costanti. Se noi scriviamo:

const alfa = 5;
alfa = 6; //ERROR

Avremo un errore, perchè una variabile const non può essere sovrascritta.

A volte potrete trovare scritto var, che rimane il vecchio metodo utilizzato per dichiarare le variabili, oggi usato raramente.

Nota: esistono altri due operatori molto interessanti ++ e --

let x = 3;
const y = x++;

console.log(`x:${x}, y:${y}`);
// output: "x:4, y:3"

let a = 3;
const b = a--;

console.log(`a:${a}, b:${b}`);
// output: "a:2, b:3"

Riuscite a capire cosa fanno?

Booleano

Il tipo booleano rappresenta due valori: true e false.

Vediamo qualche esempio di dichiarazione:

let ciao = true;

Spesso i tipi booleani sono usati all’interno di condizioni if:

let somma = 40;
if(somma>35){
  console.log('La somma è alta');
}
else{
  console.log('La somma è bassa');
}

dove somma>35 è una condizione che può essere true o false, e quindi assegnabile ad una variabile di tipo booleano.

Ricordatevi che, in JS, proprio perchè la variabile non è tipizzata, ha perfettamente senso avere una variabile che cambia di tipo:

let numCani = 3;
numCani = true; // OK
numCani = 7; // OK

let saluto = true;
console.log(2 + ciao); // 3 - perchè true equivale a 1
saluto = 2 + ciao;
console.log(saluto); // 3

ed è anche quindi possibili effettuare operazioni tra variabili di tipo diverse.

Stringhe

Vediamo un importantissimo tipo primitivo in Javascript: le stringhe.

Le stringhe rappresentano del testo e sono circondate dai doppi apici (quotes in inglese “), un carattere che trovate su tutte le tastiere.

In alcuni linguaggi non esiste nemmeno il tipo “stringa”, ma esistono gli array di caratteri. Ma sugli array ci torneremo dopo…

Vediamo degli esempi di dichiarazione di stringhe:

let nome = "Ziggy"; // doppi apici ok!
let nome = 'ciao'; // anche singolo apice!
let nome = "dove'; // questo no!

L’importante, come vedete, è usare sempre lo stesso tipo di apici.

Le stringhe sono indicizzate, per cui nella stringa:

c o r s o

ogni carattere ha un suo indice posizionale all’interno della stringa stessa, partendo da zero. Sarà quindi possibile accedere ad ogni singolo carattere.

Lo vedremo meglio quando parleremo degli array.

Introduciamo adesso i metodi delle stringhe. Ma cosa sono i metodi?

I metodi sono delle azioni incorporate nelle stringhe che JS ci offre e che ci permettono di manipolare le stringhe stesse, ad esempio:

• cercare un carattere all’interno di una stringa
• sostituire un carattere
• passare da maiuscolo a minuscolo e viceversa
• etc

I metodi si richiamano in questo modo:

oggetto.method()

dove oggetto è la nostra stringa. Vediamo l’esempio della conversione di una stringa in maiuscolo:

let msg = "ciao";
let urlo = msg.toUpperCase(); //CIAO

come vedete la stringa è ora in maiuscolo. Se volessimo convertire i caratteri della stringa in minuscolo invece, il metodo sarebbe toLowerCase()

Le stringhe sono immutabili. Infatti la variabile ‘msg’ è rimasta uguale. Per ottenere ‘msg’ in maiuscolo, abbiamo dovuto creare ed assegnare una nuova variabile ‘urlo’.

Esistono tanti metodi per manipolare le stringhe, alcuni accettano anche degli argomenti. Cosa sono questi argomenti? Pensiamoli come degli input che possiamo passare al metodo stesso.

Questi argomenti vengono passati nelle parentesi del metodo:

oggetto.method(arg)

Un metodo che accetta argomenti, ad esempio, è indexOf:

let word = "passaparola";
word.indexOf("passa"); // 0

che torna la posizione della prima occorrenza della stringa cercata.

Un altro esempio è il metodo slice, che effettua una copia della stringa selezionata, andando a riempirla solo con i caratteri selezionati dai parametri inizio e fine (fine non incluso).

let test = "vediamoilcorso";
test.slice(0,3); // "ved"

E così via…

Vi invito ad andare a vedere anche il metodo replace…cosa farà?

Abbiamo però tralasciato due cose nelle sezioni precedenti e cioè null e undefined. Cosa sono?

Sono due cose diverse:

• null — deve essere assegnato e rappresenta un intenzionale assenza di valore. Una variabile per essere null, deve ricevere l’assegnazione null.
• undefined — variabile che non hanno un valore assegnato sono undefined.

Spesso vi scontrerete con undefined negli array…ma ci arriveremo.

Finisce qui la carrellata sulle stringhe, passiamo ora agli array.

Array

Vediamo quindi la prima struttura dati in JS: gli array.

Gli array non sono altro che collezioni ordinate di valori: una lista di canzoni, una lista di film, una lista di caratteri in una stringa, etc

Ma come si creano gli array?

let colors = []; // array vuoto
colors = ['rosso','bianco','blu']; // array di stringhe
let numbers = []; 
numbers = [1,2,3]; // array di numeri
let mixedArray = ["viola",5,6]; // array di numeri e stringhe

Come vedete in JS possiamo avere anche array misti, con numeri e stringhe nello stesso insieme di valori.

Gli array sono indicizzati, così come le stringhe, quindi ogni elemento ha un corrispondente indice, partendo da zero.

let colors = ['rosso','bianco','blu']; 
console.log(colors[0]); // rosso
console.log(colors[1]); // bianco
console.log(colors[3]); // undefined

Quindi da zero fino a [lunghezza-array -1] possiamo accedere ai vari elementi.

Ma come possiamo conoscere la lunghezza dell’array? Con il metodo length:

let colors = ['rosso','bianco','blu']; 
console.log(colors.length); // 3

E’ inoltre possibile modificare gli elementi dell’’array, accedendo al singolo elemento e riscrivendolo:

let colors = ['rosso','bianco','blu'];
colors[2] = 'viola';
console.log(colors); // 'rosso','bianco','viola'

Come abbiamo visto, anche gli array, come le stringhe, hanno dei metodi:

• push : aggiunge elemento in coda all’ array
• pop : rimuove elemento dalla fine dell’array
• shift : rimuove elemento dall’inizio dell’array
• unshift: aggiunge elemento all’inizio dell’array

Vediamone uno come esempio:

let colors = ['rosso','bianco','blu'];
colors.push('arancione');
console.log(colors); // 'rosso','bianco','viola','arancione'

Questi sono i fondamentali, ma abbiamo anche:

• concat: fonde array
• includes : cerca un determinato valore nell’array
• join : crea una stringa a partire da un array
• reverse: inverte un array
• slice: copia una porzione di un array
• splice : rimuove/rimpiazza elementi di un array
• sort: ordina un array

Vi capiterà spesso di vedere questa cosa:

const arrayRegioni = ['Lombardia','Marche'];

cioè dichiarare l’array come const (costante) e non come let.

Dichiarando un array in questo modo, potete aggiungere e modificare elementi , purchè manteniate lo stesso riferimento (“arrayRegioni”).

Quindi:

const arrayRegioni = ['Lombardia','Marche'];
arrayRegioni[0] = 'Calabria'; // AMMESSO
arrayRegioni = ['Piemonte']; // NON AMMESSO

L’ultima chicca degli array riguarda gli array innestati, gli array di array, dichiarati così:

const arrayNested = [['X','Y'],['A','B']];

e per accedere ad un suo elemento usiamo due indici:

console.log(arrayNested[0][1]); // Y

A cosa possono servire? Per esempio per lavorare su matrici di numeri, con righe e colonne…

Mi fermo qui! Questo articolo voleva fornite una prima guida per apprendere i concetti di base di JavaScript nel modo migliore. Se avete domande o dubbi, o volete aggiungere qualcosa, scrivetelo nei commenti o contattatemi.

Seguimi qui: https://github.com/accateo