Questa video lezione per quanto leggera non sarà banale, tra le tipologie di dato che presenterò ci sono le array, un tipo di variabili che utilizzerai molto frequentemente quando interagirai con i Fogli di Google. Per questo, alla fine del video, ti mostrerò la loro importanza e come ti saranno utili per scrivere nelle righe e nelle colonne di uno Spreadsheet con pochissime righe di JavaScript.

Prima di questo ci tengo a ricordare che questo è un corso JavaScript atipico, orientato alla semplificazione. Per cui non ti fornirò tutte quelle finezze che servono per scrivere un codice a regola d’arte bensì solo i concetti fondamentali per garantirti di ottenere qualsiasi risultato con il minimo sforzo! Mi piacerebbe costruire le prossime lezioni insieme, rendendo questo corso interattivo, per cui per qualsiasi dubbio o suggerimento ti invito a lasciarmi un commento e a iscriverti al mio canale se ancora non lo hai fatto per rimanere aggiornato sull’uscita dei miei nuovi video.

Tornando alla lezione di oggi, ti mostro subito i tipi di dato direttamente nell'editor :)

GUARDA IL VIDEO:

Cosa mostro nel video:

Solitamente nei corsi di programmazione questa sezione, inizia con la distinzione delle varie tipologie di dato tra quelli considerati primitivi, ovvero che vengono archiviati in memoria e che non hanno metodi (come un semplice numero), da quelli non primitivi, che hanno proprietà e metodi (ad esempio un array, per il quale posso conoscerne la lunghezza applicando la proprietà length). Dal momento che in JavaScript questa distinzione non è così netta, semplificherei il tutto evitando di generare confusione, passando direttamente a presentare quali sono i tipi di dati con cui avrai a che fare e alcuni esempi sulle operazioni più frequenti che applicherai ad essi. Per riagganciarsi alle precedenti lezioni, qualsiasi sia il tipo di dato, posso dichiarare le variabile sempre con var. Questo perché in JavaScript non dobbiamo specificare il tipo di dato contenuto in una variabile dal momento che questo può cambiare durante l’esecuzione dello script (cioè ad una variabile posso assegnare un stringa di testo ma successivamente nella stessa variabile posso inserire un numero o altro che va a sostituire il valore precedente).

LE STRINGHE

Una stringa in Javascript è rappresentata da una serie di caratteri delimitati da doppi apici o da apici singoli. Possono pertanto esistere anche stringhe vuote con lo scopo di inizializzare o svuotare una variabile.

All'interno di una stringa possono essere presenti anche caratteri speciali purchè preceduti dal carattere di escape "". Questo carattere permette inoltre di "giocare" con gli apici (doppi e singoli) all'interno di una stringa evitando errori di interpretazione della stessa.

Inoltre è possibile mandare a capo una stringa tramite la sequenza di caratteri " ".

Eseguendo la funzione in modo da far comparire nel log il contenuto delle variabili è possibile osservare come l’uso di apici doppi o singoli come delimitatori è del tutto ininfluente, il carattere di escape è fondamentale per far comparire il simbolo desiderato, in questo caso quello del copyright, altrimenti il relativo codice verrebbe interpretato come normale testo. L’escape inoltre consente l’utilizzo promiscuo di doppi e singoli apici all'interno della stessa stringa, se ad esempio non lo usassi nel caso dell’apostrofo, dal momento che quest’ultimo è lo stesso simbolo utilizzato come delimitatore della stringa, riceverei un errore immediato poiché è come se la stringa terminasse in questo punto e ci fosse del testo libero a fianco che non rappresenta alcuna istruzione. Infine, la lettera n a seguito del carattere di escape ne interrompe la riga per continuare in quella successiva.

La costruzione del log mostra già l’effetto dell’operatore + quando applicato ad una stringa, ovvero funge da concatenatore.

Le stringhe possono inoltre essere manipolate per mezzo di una serie di proprietà e metodi.

L’interfaccia di Google Apps Script, grazie al suggeritore automatico, ti mostra tutte le Proprietà e i metodi applicabili ad una stringa. Ti basterà inserire il simbolo del punto dopo dopo tale variabile.

A livello di proprietà è presente solo length, che permette di conoscere il numero di caratteri che compone tale stringa. Un esempio frequente di utilizzo è il controllo della lunghezza dei caratteri immessi dall’utente in un campo di un form, in modo da accettare il testo inserito e salvarlo nel nostro database o Foglio di Google oppure comunicargli che il campo non è stato compilato o che sono stati superati i limiti richiesti. In questo caso il risultato mi comunicherà la lunghezza di questa stringa.

I metodi tuttavia sono quelli che consentono la manipolazione vera e propria delle stringhe. In questo esempio ti mostro i metodi principali con i quali ti troverai più frequentemente a che fare durante la scrittura dei tuoi script. Ti suggerisco di aprire l’editor di script e di mettere in pausa mano a mano il video per provare tu stesso gli esempi che ti sto per mostrare e sperimentare il risultato.

indexOf, restituisce la posizione di un carattere o di una stringa che si vuole cercare all’interno di un’altra. Un semplice caso pratico può essere quello di verificare se l’indirizzo email immesso dall’utente nel campo di un form contiene il simbolo della chiocciola, altrimenti informiamo l’utente che c’è un errore nel formato dell’indirizzo.

In questo caso prendo come esempio una stringa dove vado a ricercare al suo interno alcuni termini per mostrarti la risposta ottenibile nei diversi casi. Cercando Tutorial, con la T maiuscola otterrò come risposta 26, che è la sua posizione all’interno della stringa analizzata. Diversamente cercando tutorial con la t minuscola, poiché il JavaScript è case sensitive come spiegato nelle lezioni precedenti, riceverà come risposta -1 ovvero l’informazione che indica che tale carattere o stringa non si trova all’interno di quella verificata. Allo stesso come se cercassi un termine che è evidente che non c’è, come Android, riceverò -1. La prima posizione ha valore 0, come vediamo cercando il primo termine della stringa. Mentre inserendo un valore da cercare che si trova più volte all’interno della stringa di interesse, otterrò solo la posizione della sua prima occorrenza, come nel caso di in.

replace, questo metodo permette di sostituire una stringa con un’altra. Possiamo accomunarlo, come comportamento, al classico Trova e Sostituisci che conosciamo in Word. Alla stringa originale il metodo ha bisogno di sapere cosa cercare e con cosa andare a sostituire. In questo esempio voglio sostituire la parola Google con una stringa vuota in modo che non compaia nel mio testo finale.

Eseguendo la funzione, la parola GoogleAppsScript.it è infatti diventata AppsScript.it. Tuttavia nel testo è presente un’altra volta la parola Google, che è invece rimasta presente. Questo perché il metodo replace così come è applicato trova e sostituisce solo la prima occorrenza all’interno di una stringa. Per poter sostituire tutte le occorrenze presenti devo avvalermi di un'espressione regolare. Dedico un video a parte alle espressioni regolari perchè sono molto utili per la gestione dei testi al fine di individuare ed eventualmente sostituire stringhe all’interno di altre stringhe. In questo esempio prendiamo per buono il concetto e ti mostro direttamente la soluzione dal momento che sostituire tutte le occorrenze uguali all'interno di una stringa è una situazione molto frequente quando si lavora con i testi.

Definendo la stringa da cercare con slash, la stringa desiderata, slash, e a seguire una g, la sostituzione avverrà ogni volta che quella corrispondenza viene trovata. Il log conferma quanto appena detto.

substring, permette di estrarre una parte di una stringa definendo le posizioni. La prima posizione è lo 0, quindi se volessi estrarre il testo ‘Articoli e Tutorial in Italiano’ mi basterà indicare la posizione di inizio che è la 21 e quella di fine, 52. Se non definisco la posizione di fine mi verrà restituito tutto il testo dalla posizione di inizio in poi. Metodi simili sono substr e slice. Il recupero di una parte di una stringa è molto frequente e utile soprattutto quando conosciamo i riferimenti fissi all’interno di un testo. Ad esempio se avessi una scheda utente come questa (dove le informazioni utente sono insieme al testo delle etichette della scheda), so già che questa struttura varrà per qualsiasi utente, pertanto il nome inizia sempre dal carattere 13. Su questa base posso costruire uno script che isola i valori effettivi dell’utente e li salva in un Foglio di Google.

Estremamente utile è il metodo split. Genera un’array di stringhe definendo un separatore. Ad esempio se applicassi lo split alla mia stringa sulla base del simbolo del due punti, otterrei un’array di 2 elementi interrotti dove è stato trovato tale simbolo. Dividendo la stringa sulla base dello spazio otterrei tanti elementi distinti quanti spazi sono stati trovati.

Un esempio più pratico è se volessi separare il path di un URL dalla sua querystring. In questo caso utilizzerei il punto interrogativo all’interno del metodo split e otterrei un’array con due elementi. Il path di pagina e la querystring. Questo esempio lo riprendiamo a breve per mostrare come accedere al valore di interesse che si trova all’interno di un’array.

 

I NUMERI

In JavaScript la distinzione tra un numero intero e un numero decimale viene effettuata dal linguaggio stesso in base al suo valore, ovvero non è previsto dichiarare la variabile con integer o float come in altri linguaggi. È invece possibile convertire un valore in un numero intero con la funzione nativa pareseInt() o decimale con parseFloat().

Queste due sono funzioni molto utili in JavaScript. Posso utilizzare ad esempio parseInt() anche nel caso in cui volessi ottenere un numero intero anche avendo una stringa; detto così sembra astratto come concetto, ma basta pensare a un form di inserimento dati da parte di un utente, ad esempio quando quest’ultimo deve inserire un numero intero in un campo come la sua età o il numero di articoli da acquistare. Così facendo qualunque sia l'input, anche se non interpretato come numerico, ci ritroveremo sempre con un numero intero. È importante fare attenzione quando utilizziamo l’operatore + per effettuare una somma. Abbiamo visto con le stringhe che questo operatore serve per concatenare una stringa all’altra, per questo motivo se concateniamo un numero con una stringa non otterremo la loro somma, anche se sono entrambi valori numerici, bensì la loro concatenazione. Diverso invece se convertiamo la stringa con parseInt(), a quel punto si tratterà a tutti gli effetti di una somma tra numeri. Attenzione a non commettere l’errore di effettuare il parseInt() direttamente della somma, poiché in questo caso convertirai il numero il risultato dell’operazione tra un numero e una stringa, ovvero convertirai in numero il valore della concatenazione e non della somma. Il log conferma quanto appena detto. 

Degno di nota nel contesto dei numeri è il valore NaN (che significa Not a Number) ovvero che il valore numerico non è definito. Un caso in cui può verificarsi la restituzione di NaN si ha quando si tenta di convertire in un numero intero una stringa che non rappresenta un valore numerico o che non inizia con un numero. Come abbiamo visto nell’esempio precedente.

Altri due tipi di valori sono rappresentati da null e da undefined. Posso assegnarli ad una variabile come se fossero valori veri e propri, l’IDE stessa li colora in modo distintivo proprio perché li riconosce come tali. Il primo si ottiene quando il valore preso in esame non rientra in nessun altro tipo di valori tra quelli fin'ora elencati (talvolta può essere restituito come risultato di una chiamata ad una funzione). undefined invece viene restituito quando un valore non esiste, ad esempio il caso di un’array composto da 5 elementi (nel caso specifico ho inserito come valori i nomi delle dita di una mano) dove le posizioni occupate sono la 0 (poiché come vedremo a breve l’indice 0 è la prima posizione), la 1, 2, 3 e 4 e io vado a richiamare un elemento in una posizione che non esiste, ad esempio la 8 il cui indice è 7) oppure quando si dichiara una variabile senza specificare un valore. Una variabile mai inizializzata invece, in fase di esecuzione, genera un errore di variabile non definita. Il log conferma quanto appena detto.

 

BOOLEAN

I valori booleani sono rappresentati dai tipici true e false, che intuitivamente significano vero o falso.

Sono molto usati all’interno delle condizioni (argomento oggetto dei prossimi video) al fine di determinare se eseguire o meno alcune istruzioni sulla base di un risultato.

Ad esempio poniamo il caso venga richiesto all’utente di inserire la sua età in un campo di un form per l’iscrizione ad un servizio. Per capire se è maggiorenne o meno effettuerò un controllo verificando se il numero inserito è maggiore uguale o minore di 18. Questa operazione restituisce rispettivamente true o false nella variabile (le parentesi tonde non sono obbligatorie, le ho inserite per maggiore chiarezza). Pertanto inserendo questa variabile come valore della condizione sarò in grado di verificare se il risultato è vero o falso e, nel secondo caso, agire di conseguenza fornendo un messaggio all’utente. 

 

Questo esempio ci porta a parlare degli OPERATORI.

Gli operatori, così come per altri linguaggi, hanno il fine di eseguire operazioni (operatori aritmetici), di stabilire una relazione d'ordine (operatori relazionali) o combinare espressioni booleane (operatori logici).

Molto velocemente, gli operatori aritmetici sono i classici: +, -, *, /, % (rispettivamente: somma, sottrazione, moltiplicazione, divisione e modulo). A questi vanno aggiunti gli operatori di negazione (-) e di incremento (++ e --).

I primi sono facilmente intuibili. Il modulo restituisce 0 se l’operazione non ha resto oppure il valore del resto (il 7 nel 10 ci sta una volta e avanza 3). L’operazione di negazione cambia il segno ad un numero (se somma valeva 25, anteponendo il simbolo del meno il risultato sarà -25). L’operatore di incremento è meno intuibile dal momento che può essere inserito prima o dopo una variabile. Se valorizzo una variabile inserendolo prima di un valore incrementerò sia il valore della variabile che quella del valore a cui l’ho applicato. Mentre se lo inserisco dopo aumenterò il valore solo di quello a cui l’ho applicato. Ho spiegato la differenza al solo scopo informativo ma possiamo evitare di ricordarsela in ottica di semplificazione. Quando parleremo di cicli utilizzeremo l’incremento come regola standard e quello sarà sempre, mentre in tutti gli altri casi basterà gestire i valori nel modo più semplice possibile, aggiungendo o diminuendo di 1 con gli operatori aritmetici classici come in qualsiasi operazione matematica.

Gli operatori relazionali sono: <, <=, >, >=, ==, !=, ===, !== (rispettivamente: minore, minore o uguale, maggiore, maggiore o uguale, uguale, diverso, strettamente uguale, strettamente diverso). Anche qui il loro utilizzo è per lo più intuitivo, ne abbiamo già visto l’uso nell’esempio precedente, quello del maggiore uguale. Il concetto è lo stesso anche per gli altri e il risultato dato sarà true o false.

Da non confondere l'operatore di assegnazione = con quello di uguaglianza ==. Nel primo caso (con un solo =) si tratta di assegnare quel valore alla variabile, nel secondo (2 volte il simbolo =) si sta confrontando il primo valore con il secondo e chiedendo al sistema di verificare se sono =, quindi il risultato sarà un boolean (vero o falso). Non approfondisco in questo video gli operatori strettamente uguale e strettamente diverso poiché si tratta di casi particolari di confronto sia di valore che di tipo di dato, poco frequenti in un uso comune del codice e in ottica di semplificazione, quando ti troverai eventualmente ad averne bisogno, significa che avrai raggiunto un livello di conoscenza molto più autonomo.

Gli operatori logici, consentono la combinazione di espressioni booleane, non per niente sono molto usati all’interno delle condizioni. Sono rappresentati da: &&, ||, ! (AND, OR e NOT).

Il primo, l’AND, restituisce true se tutte le condizioni sono vere (nel caso dell’esempio il risultato sarà falso poiché è vero che 18 è minore o uguale a 18 ma non è vero che 18 è maggiore di 20). Nel secondo caso l’esempio è identico al precedente ma l’operatore utilizzato è l’OR. Il risultato sarà true perché con l’OR basta che una condizione tra quelle presenti sia vera. Il NOT inverte il valore di un boolean, quindi se una variabile contiene true la farà diventare false e viceversa.

Gli esempi così come sono indicati possono sembrare astratti, contestualizzandoli potrei identificare come casi pratici di utilizzo sempre quello dell’inserimento dati in un form. Nel caso dell’AND verificare se l’età inserita è compresa tra due valori, ad esempio per un corso universitario dedicato agli under 30 verificare se il valore è maggiore o uguale a 18 e minore di 31. L’OR si usa quando basta che sia valida una condizione, ad esempio filtrare all’interno di una lista di candidati ad una posizione lavorativa sia chi ha skills di programmazione JavaScript sia chi le ha di utilizzo di Google Sheets. In tal caso se usassi l’AND escluderei tutti quelli che non hanno entrambe le conoscenze, mentre con l’OR includerei chi ha l’una o l’altra o entrambe. Il NOT è evitabile, nel senso che se un risultato di un’operazione o di un controllo è true, posso usare il not per dire che se tale risultato è false allora esegui determinate operazioni, ma posso semplificare anche con l’operatore di uguaglianza, ovvero se il valore è == a false allora esegui quelle operazioni, che è molto più intuitivo.

Esiste un quarto tipo di operatore, quello condizionale, ne parlo nel video dedicato alle condizioni e anticipo che in ottica di semplificazione ne possiamo ampiamente fare a meno utilizzando sempre e solo l’istruzione condizionale IF.

 

Ma veniamo alle tanto attese variabili ARRAY. Queste consentono di associare più valori ad un unica variabile. Abbiamo visto l’esempio dell’array contenente i nomi delle dita della mano, ne faccio un altro simile con i giorni della settimana per mostrare la struttura. Si tratta di valori (nel caso specifico stringhe ma possono essere anche numeri o boolean e non devono essere necessariamente dello stesso tipo) separati da virgola e racchiusi da parentesi quadre.

Per accedere ai valori basterà indicare la variabile seguita dall’indice dell’elemento racchiuso tra parentesi quadre. Ricordando che gli indici iniziano dalla posizione 0, posso recuperare il primo elemento, lunedì, in questo modo, oppure quello con indice 3, ovvero il giovedì in posizione 4 in questo modo.

Questo tipo di array è detto monodimensionale o vettore.

Molto frequenti sono le array multidimensionali, specialmente quelle bidimensionali, dette anche matrici. Praticamente si tratta di una serie di array all’interno di un’array principale.

Poniamo l’esempio di avere definito un utenti e le sue caratteristiche come il nome, il cognome e l’anno di nascita. Potrei scriverlo in questo modo in un’array monodimensionale. Tuttavia se dovessi definire un gruppo di utenti utilizzerei questa struttura ripetendo l’array monodimensionale separato da virgola all’interno dell’array principale. In questo caso per accedere al valore desiderato devo prima definire il gruppo dove recuperare l’elemento (sempre definendo l’indice della posizione) e successivamente l’indice della posizione del valore che voglio estrarre. Nel caso dell’esempio, se volessi recuperare l’anno di nascita di Mario Rossi, dovrei scrivere in questo modo. Il secondo array (che ha indice 1) e di questo il terzo elemento (che ha indice 2).

In questa fase è importante capire il concetto, quando parleremo dei cicli sarà molto più chiaro contestualizzare il tutto in un esempio pratico.

Come promesso, ti mostro un esempio del perché le array sono molto importanti quando ti trovi a lavorare con i Fogli di Google. Ebbene il Foglio di Google è formato da tante celle, che evocano proprio il termine di matrice.

Con questa struttura dell’array posso scrivere con due righe di codice JavaScript (grazie ai metodi di Google Apps Script) questi valori all'interno delle celle dello Spreadsheet.

Appendendo una riga se ho un array monodimensionale.

Oppure definendo l’intervallo di celle dove scrivere se ho un array bidimensionale.

Gli elementi all’interno dell’array monodimensionale (che sia singolo o all’interno dell’array bidimensionale) vanno ad occupare le colonne, mentre ciascun array monodimensionale va ad occupare una nuova riga.

Lo stesso vale in lettura, recuperando le informazioni contenute nel Foglio di Google, il risultato sarà ottenuto sottoforma di array.

 

Una full immersion tra i tipi di dato e i loro utilizzi, le possibilità di manipolare e gestire le informazioni sono davvero tante, quello che è importante è che non c’è bisogno di conoscere tutti i metodi a memoria, abbiamo visto che l’interfaccia dispone di un suggeritore automatico che si apre prontamente durante la scrittura del codice. Inoltre, il JavaScript è talmente diffuso che per qualsiasi necessità o dubbio sull’utilizzo di metodi come quelli per cercare una substring o funzioni per ordinare gli elementi di un array basta una semplice ricerca in rete e con un copia e incolla ragionato, ad esempio da stackoverflow dove le spunte verdi sono una sicurezza, si riesce facilmente a portare avanti il nostro progetto passo dopo passo.

Negli esempi di questo video ho voluto soffermarmi volontariamente sugli output possibili che si possono ottenere utilizzando questi metodi perché per esperienza possono essere questi molte volte a generare confusione quando ci si aspetta un determinato risultato piuttosto che un altro. Questo vale per la sostituzione di caratteri in una stringa così come quando si scrivono i dati in un Foglio di Google.

Nella prossima lezione parlerò di cicli e condizioni. Ti mostrerò per completezza di informazione quali sono le tipologie che il JavaScript mette a disposizione, ma soprattutto isolerò un tipo per l’uno e un tipo per l’altro che saranno gli unici che dovrai conoscere dimostrandoti come con solo queste due istruzioni puoi coprire tutte le casistiche e ottenere qualsiasi risultato.

 Rinnovo l’invito a iscriverti al mio canale se ancora non l’hai fatto per rimanere aggiornato sull’uscita dei miei nuovi video e a lasciarmi un commento se qualcosa di quanto ti ho raccontato in questa lezione non ti è chiaro o se hai suggerimenti e argomenti che vorresti fossero approfonditi e trattati in un tutorial.

Per il momento ti saluto e ci vediamo al prossimo video.

Ciao ;)

 

VAI alla Lezione 5: Istruzioni condizionali e Esercizi!

TORNA alla Lezione 3 bis: addendum, Esempio pratico, Invito alla Tribù