Skillbook Logo
foto profilo

Tutte le categorie


Non Siamo un'Academy! Siamo una grande community di programmatori Junior ...

Gino Visciano | Skill Factory - 15/07/2020 16:57:14 | in Home

Nell'era dello Storytelling raccontare una storia di successo è gratificante, soprattutto in un momento in cui occorrono certezze,  per superare le difficoltà che stiamo vivendo a causa dell'emergenza COVID.

Quando nel 2011 abbiamo avviato la società "Skill Factory", non pensavamo che a breve saremo diventati una grande "Community di programmatori junior".

Oggi, grazie al nostro lavoro, oltre 2000 giovani hanno avuto la possibilità di accedere a percorsi gratuiti, chiamati skill factory ed entrare nel mondo del lavoro presso uno dei nostri Job partner IT, con un contratto di apprendistato.

Una skill factory è un percorso progettato ad hoc per creare tutte le competenze che servono ad un programmatore e facilitare il percorso richiesto per entrare nel mondo del lavoro. 

Escluso il periodo di tirocinio formativo, un percorso di skill factory ha una durata di 320/480 ore ed  ha una percentuale di successo del 60/70%.  

I destinatari sono giovani disoccupati di età compresa tra i 22 ed i 29 anni, diplomati oppure laureati, in cerca di prima occupazione oppure persone che hanno bisogno di riqualificarsi, perché sono alla ricerca di nuove opportunità di lavoro. 

Non siamo un'ACADEMY! 

Non facciamo solo formazione, ma copriamo tutte le fasi richieste dal processo d'inserimento di una risorsa nel modo del lavoro ...

Attraverso la piattaforma www.skillbook.it,  collaboriamo con tutti gli utenti dell'nostra community a cui offriamo i seguenti servizi:

- Informazione;
- Formazione;
- Aggiornamento;
- Certificazione delle competenze;
- Consulenza e Supporto.

 

  
 


Resto a casa a fare formazione ...
Anche durante il lockdown non ci siamo mai fermati, erogando oltre 3000 ore di formazione e laboratorio in Smart-Learning/Working. Grazie al nostro impegno, durante il periodo di emergenza COVID50 giovani programmatori hanno iniziato un tirocinio formativo presso un nostro Job partner IT, con l'opportunità di essere assunti a settembre 2020.  

 


Tutto quello che ti serve per diventare programmatore te lo insegniamo noi!
Vuoi partecipare ad una "Skill Factory"? Invia il tuo CV a recruiting@skillfactory.it, ti contatteremo per verificare se hai i prerequisiti richiesti.
Non cerchiamo talenti o esperti d'Informatica, ma giovani seri volenterosi, predisposti a risolvere problemi logici.   


Sei un programmatore esperto?
Pensi che la tua esperienza possa essere utile agli utenti della nostra community?
Cosa aspetti, conttattaci!  Puoi diventare un nostro "Competence partner" e dare valore alla tua esperienza ...

mail: sid@skillfactory.it 


Per far parte della nostra community registrati su www.skillbook.it.


T U T O R I A L S    S U G G E R I T I


EDUCATIONAL GAMING BOOK (EGB) "H2O"

Nell'era dello SMART LEARNING e di PYTHON i libri non si scrivono, ma si sviluppano, in questo modo chi studia, può sperimentare ed apprendere contemporaneamente; un libro con queste caratteristiche lo possiamo definire un  Educational Gaming Book (EGB).

"H2Oè un EGB che descrive tutte le caratteristiche dell'acqua, la sostanza formata da molecole di H2O, che attraverso il suo ciclo di vita garantisce la sopravvivenza di tutti gli esseri viventi del Pianeta

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune raro, indispensabile per la vita


Per il DOWNLOAD di "H2Oclicca qui.

Share Button

TypeScript - Lezione 5: Classi ed Oggetti

Gino Visciano | Skill Factory - 10/07/2020 17:52:46 | in Tutorials

TypeScript pur essendo un linguaggio usato per sviluppare applicazioni lato Front-end, è un linguaggio Object Oriented, quindi è importante conoscere i concetti di Classe ed Oggetto.

Una Classe definisce un tipo di oggetto, in pratica è il codice sorgente dell'oggetto che verrà creato in meomria. L'operazione che trasforma il codice  sorgente della classe in oggetto si chiama istanza

L'esempio seguente mostra come si può istanziare in memoria un oggetto di nome persona usando la classe Persona:

Persona persona=new Persona();

1) Persona  è la classe, rappresenta il tipo di oggetto;
2) persona variabile che contiene l'indirizzo (riferimento)  dell'oggetto istanziato con il comando new;
3) Persona() costruttore, metodo usato per inizializzare l'oggetto creato.  

Istanziare significa creare in memoria con il comando new un oggetto, usando come modello la classe. L'indirzzo dove viene allocato l'oggetto, viene assegnato alla variabile dell'istanza, come ad esempio  persona

In fase di progettazione il linguaggio UML (Unified Modeling Language) è molto utile per disegnare un tipo di classe che poi potra essere scritta con qualunque linguaggio di programmazione object oriented (orientato agli oggetti).

L'esempio seguente mostra il diagramma di classe della classe Persona:

Le Classi  possono contenere i seguenti elementi:

attributi
metodi
costruttori

Per convenzione i nomi delle Classi iniziano sempre con la lettera maiuscola e se sono composti da più parole, anche le altre parole devono iniziare con la lettera maiuscola.

ATTRIBUTI
Gli attributi sono variabili della classe, per questo motivo sono anche chiamate  variabili d'istana, sono le proprietà che si usano per memorizzare i dati che appartengono all'oggetto.

Gli attributi  se sono pubblici (+ simbolo UML) possono anche essere usati dai metodi di altre classi, altrimenti se sono privati (- simbolo UML  possono essere usati solo dai metodi della stessa classe.

Se un attributo è protected (# simbolo UML) , in caso di ereditarietà è visibile anche ai metodi della classe figlia.


METODI
metodi sono funzioni contenute nelle classi, le azioni dei metodi determinano il comportamento degli oggetti.

Nei linguaggi di programmazione ad oggetti, la logica applicativa (istruzioni), può essere implementata solo all'interno dei metodi.

 

 

metodi se sono pubblici   (+ simbolo UML)  possono essere eseguiti anche dai metodi di altre classi, se sono privati  (- simbolo UML) possono essere eseguiti solo dai metodi della stessa classe.

Se un metodo è protected (# simbolo UML) , in caso di ereditarietà è visibile anche ai metodi della classe figlia.

Per convenzione i  metodi che hanno il nome che inizia con i prefissi get e set si usano per assegnare o leggere i valori degli attributi privati dell'oggetto a cui appartengono. 

Ad esempio,  dato che gli  attributi della classe  Persona sono privati, per gestirli dovete usare i seguenti metodi pubblici:

setNome
getNome
setCognome
getCognome
setEta
getEta 

COSTRUTTORI
I costruttori sono metodi speciali usati  per istanziare gli oggetti e per inizializzare gli attributi.

Persona persona=new Persona();

Persona() => costruttore.

Per creare un costruttore inTypeScript  dovete implementare un metodo che si chiama constructor senza indicare il tipo restituito

In una classe deve esistere sempre almeno un costruttore senza argomenti, chiamato costruttore di default, come mostra l'esempio seguente:

public constructor(){}

Se necessario il costruttore di default può anche essere usato per inizializzare gli attributi dell'oggetto creato, come mostra l'esempio seguente:
 
public constructor(){
            this.id=1;
            this.nome="Marco";
            this.cognome="Rossi";
            this.dataDiNascita="05/10/1990";
            this.luogoDiNascita="Milano";
            this.sesso="Maschio";
            this.codiceFiscale="mrcrss90r05l268f";
}

Un costruttore con argomenti si chiama costruttore parametrizzato, a differenza di quello di default, permette di passare i valori per inizializzare l'oggetto durante l'istanza, come mostra l'esempio  seguente:

Persona persona=new Persona(1,'Paolo','Rossi','10/02/1991','Milano','Maschio','pllrss91a02l234f');

L'esempio seguente mostra come si crea un costruttore parametrizzato:

public constructor(id:number,nome:string,cognome:string,dataDinascita:Date,luogoDiNascita:string,sesso:string,codiceFiscale:string){
            this.id=id;
            this.nome=nome;
            this.cognome=cognome;
            this.dataDiNascita=dataDinascita;
            this.luogoDiNascita=luogoDiNascita;
            this.sesso=sesso;
            this.codiceFiscale=codiceFiscale;

Esempio 1

L'esempio seguente mostra come creare una classe Persona con gli attributi privati ed i metodi set e get pubblici.
La parola chiave export indica che la classe può essere importata anche in un altro modulo con il comando import.


export class Persona{
    private id:number;
    private nome:string;
    private cognome:string;
    private dataDiNascita:Date;
    private luogoDiNascita:string;
    private sesso:string;
    private codiceFiscale:string;
    public setId(id:number):void{
        this.id=id;
    }
    public getId():number{
        return this.id;
    }
    public setNome(nome:string):void{
        this.nome=nome;
    }
    public getNome():string{
        return this.nome;
    }
    public setCognome(cognome:string):void{
        this.cognome=cognome;
    }
    public getCognome(){
        return this.cognome;
    }
    public setDataDiNascita(dataDiNascita:Date):void{
        this.dataDiNascita=dataDiNascita;
    }
    public getDataDiNascita():Date{
        return this.dataDiNascita;
    }
    public setLuogDiNascita(luogoDiNascita:string):void{
        this.luogoDiNascita=luogoDiNascita;
    }
    public getluogoDiNascita():string{
        return this.luogoDiNascita;
    }
    public setSesso(sesso:string):void{
        this.sesso=sesso;
    }
    public getSesso():string{
        return this.sesso;
    }
    public getCodiceFiscale():string{
        return this.codiceFiscale;
    }
    public setCodiceFiscale(codiceFiscale:string):void{
        this.sesso=codiceFiscale;
    }
    public toString():string{
        let optionsIntl.DateTimeFormatOptions = {
            day: "numeric"month: "numeric"year: "numeric"
        };
 
           return this.id+","+this.nome+","+this.cognome+","+this.dataDiNascita.toLocaleDateString("en-GB"options)
                  +","+this.luogoDiNascita+","+this.sesso+","+this.codiceFiscale;
    }
    public equals(obj:Object):boolean{
        if (this.toString()!=obj.toString()){
            return false;
        }
        return true;
    }
        // Sovraccarico del costruttore (Overload)
        public constructor();
        public constructor(id:number,nome:string,cognome:string,dataDinascita:Date,luogoDiNascita:string,
                           sesso:string,codiceFiscale:string);
        public constructor(id?:number,nome?:string,cognome?:string,dataDinascita?:Date,
                           luogoDiNascita?:string,sesso?:string,codiceFiscale?:string){
            if(arguments.length>0){
                this.id=id;
                this.nome=nome;
                this.cognome=cognome;
                this.dataDiNascita=dataDinascita;
                this.luogoDiNascita=luogoDiNascita;
                this.sesso=sesso;
                this.codiceFiscale=codiceFiscale;
            }
 
        }    
}
 

 

SOVRACCARICO DEL COSTRUTTORE  IN TYPESCRIPT (OVERLOAD)

L' overload è la proprietà dei linguaggi di programmazione ad oggetti che permettere l'implementazione nella stessa classe di metodi con lo stesso nome, ma firma diversa. 

Si definisce firma il nome di un metodo più i tipi degli argomenti passati in input. 

Ad esempio, le firme dei costruttori della classe Persona, sono le seguenti:

1) constructor
2) constructor, number, string, string,  Date, string, string, string

In TypeScript l'overlad si può applicare usando una funzione con argomenti opzionali che in base al numero di argomenti passati in input assume un comportamento diverso.
Per conoscere quali e quanti argomenti vengono passati ad una funzione con argomenti opzionali potete usare l'interfaccia arguments.
Per definire le firme consentite per eseguire la funzione con argomenti opzionali, dovete indicare le  interfacce corrispondenti, come mostra l'esempio seguente:

// Interfaccia che definisce la firma del costruttore di default
public constructor();
// Interfaccia che definisce la firma del costruttore parametrizzato
public constructor(id:number,nome:string,cognome:string,dataDinascita:Date,luogoDiNascita:string,sesso:string,codiceFiscale:string); 
// Funzione con argomenti opzionali, il punto indicativo "?" rende il parametro facoltativo
public constructor(id?:number,nome?:string,cognome?:string,dataDinascita?:Date,luogoDiNascita?:string,sesso?:string,codiceFiscale?:string){
            if(arguments.length>0){
                this.id=id;
                this.nome=nome;
                this.cognome=cognome;
                this.dataDiNascita=dataDinascita;
                this.luogoDiNascita=luogoDiNascita;
                this.sesso=sesso;
                this.codiceFiscale=codiceFiscale;
            }
}

Esempio 2

L'esempio seguente utilizza la classe Persona, creata nell'esempio precedente, per gestire un array di persone.

L'inserimento dei dati avviene attraverso il Form seguente che permette di aggiungere una persona all'array, con il pulsante "Salva" e visualizzare l'elenco di tutte le persone inserite con il pulsante "Elenco".


 

Per ottenere il Form dovete utilizzare il codice HTML seguente:

 
<!--gui_persona.html-->
<html>
<head>
    <script lang="JavaScript" src="persone.js"></script>
</head>
<body>
<table>
<form>
<tr><th>PERSONA</th><th></th></tr>
<tr><td>Nome:</td><td><input type="text" id="nome" value=""></td></tr>
<tr><td>Cognome:</td><td><input type="text" id="cognome" value=""></td></tr>
<tr><td>Data di nascita:</td><td><input type="text" id="data" value=""></td></tr>
<tr><td>Luogo di nascita:</td><td><input type="text" id="luogo" value=""></td></tr>
<tr><td>Sesso:</td><td><input type="text" id="sesso" value=""></td></tr>
<tr><td>Codice Fiscale:</td><td><input type="text" id="cf" value=""></td></tr>
<tr><td></td><td><input type="button" onclick="salva();" value="Salva"> 
<input type="button" onclick="addElenco();" value="Elenco"> <input type="reset" value="reset"></td></tr>
</form>
</table>
--- Elenco Persone ---
<div id="elenco"></div>
</body>
</html>
 


Il tag <script lang="JavaScript" src="persone.js"></script> permette d'importare il modulo JavaScript, risultato della compilazione con tsc del codice TypeScript seguente:


// persone.ts
import {Personafrom "./persona";
 
var persone:Persona[]=[];  //var persone:Persona[]=[]
var id:number=0;
 
// Funzione associata al metodo onclick del pulsante Salva
function salva():void{
    var nome:string=(<HTMLInputElement>document.getElementById("nome")).value;
    var cognome:string=(<HTMLInputElement>document.getElementById("cognome")).value;
    var strData:string=(<HTMLInputElement>document.getElementById("data")).value;
    var luogo:string=(<HTMLInputElement>document.getElementById("luogo")).value;
    var sesso:string=(<HTMLInputElement>document.getElementById("sesso")).value;
    var cf:string=(<HTMLInputElement>document.getElementById("cf")).value;
    var data:Date=new Date(strData);
    id++;
    persone.push(new Persona(id,nome,cognome,data,luogo,sesso,cf));
 }
 
 
// Funzione associata al metodo onclick del pulsante Elenco
 function addElenco() { 
    // crea un nuovo elemento div
    // gli assegna un contenuto
    var currentDiv = document.getElementById("elenco");  
    persone.forEach((persona:Persona)=>{
     // aggiungi il nodo di testo al div appena creato
    var newDiv = document.createElement("div"); 
     newDiv.style.color="blue";
     newDiv.style.fontSize="20";
     var newContent = document.createTextNode(persona.toString()); 
     newDiv.appendChild(newContent);  
     document.body.insertBefore (newDivcurrentDiv); 
     })
   // aggiungi l'elemento appena creato e il suo contenuto nel DOM
 }
 


L'immagine seguente mostra il Form con l'elenco delle persone inserite: 

Nella prossima lezione approfondiamo il paradigma Object Oriented.


<< Lezione precedente | Vai alla prima lezione


T U T O R I A L S    S U G G E R I T I


EDUCATIONAL GAMING BOOK (EGB) "H2O"

Nell'era dello SMART LEARNING e di PYTHON i libri non si scrivono, ma si sviluppano, in questo modo chi studia, può sperimentare ed apprendere contemporaneamente; un libro con queste caratteristiche lo possiamo definire un  Educational Gaming Book (EGB).

"H2Oè un EGB che descrive tutte le caratteristiche dell'acqua, la sostanza formata da molecole di H2O, che attraverso il suo ciclo di vita garantisce la sopravvivenza di tutti gli esseri viventi del Pianeta

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune raro, indispensabile per la vita


Per il DOWNLOAD di "H2Oclicca qui.

Share Button

TypeScript - Lezione 4: Tipi di Funzioni

Gino Visciano | Skill Factory - 03/07/2020 16:33:54 | in Tutorials

In questa lezione vedremo tutti i tipi di funzioni che si possono utilizzare in TypeScript.

Per creare una funzione in  TypeScript dovete utilizzare la sintassi seguente:

function nomeFunzione(elenco argomenti):tipoValoreRestituito {
     // Codice funzione
}

Se la funzione si comporta come una procedura , perché non restituisce nessun valore, come tipoValoreRestituito  dovete usare il tipo void.

Ad esempio la funzione contaFinoADieci è di tipo void, perché è una procedura che visualizza un numero da 1 fino a 10:


function contaFinoADieci():void {
    for(let x:number=1;x<=10;x++){
        console.log(x);
    }
}
// Esegue contaFinoADieci
contaFinoADieci();
 

La parola chiave let indica che la variabile x può essere usata solo nel blocco for, al di fuori del blocco for non è visibile. Per usare la x anche al di fuori del blocco for dovete usare la parola chiave var

Anche la funzione contaFinoAMax è una procedura, ma attraverso l'argomento max permette di visualizzare un numero da 1 ad un valore predefinito.


function contaFinoAMax(max:number):void {
    for(let x:number=1;x<=max;x++){
        console.log(x);
    }
}
// Esegue contaFinoAMax e conta fino a 20
contaFinoAMax(20);
 

Quando la funzione  restituisce un valore attraverso il comando return, il  tipoValoreRestituito deve essere dello stesso tipo, come mostra l'esempio seguente:


function divisione(dividendo:numberdivisore:number):number {
    var risultato:number;
    risultato=dividendo/divisore;
    return risultato;
}
 

 

DIFFERENZA TRA FUNZIONI CON PASSAGGIO PER VALORE E PASSAGGIO PER RIFERIMENTO

Le funzioni sono task di programmazione che eseguono operazioni specifiche quando vengono eseguite.

Se necessario possono ricevere argomenti in input e restituire un argomento come output, naturalmente se non sono di tipo  void.  

L'immagine seguente mostra il comportamento di una funzione che riceve n argomenti in ingresso (input)  e ne restituisce uno in uscita (output).

Block box significa che se una funzione riceve in input gli  stessi argomenti, fornisce sempre lo stesso risultato come output.

Gli argomenti delle funzioni, sia in input, sia in output, possono essere passati per valore oppure per riferimento

Quando passate un argomento per valore state passando il contenuto di una variabile

Quando il passaggio avviene per riferimento state passando l'indirizzo di un array oppure di un oggetto in cui sono contenuti i valori.

Questa differenza è molto importante perché  se il passaggio degli argomenti avviene per valore, utilizzate una copia dei valori originali, mentre se il passaggio degli argomenti avviene per riferimento, attraverso l'indirizzo lavorate direttamente  con i valori degli array o degli oggetti originali. 

L'immagine seguente descrive un esempio di passaggio per valore, in questo caso gli argomenti della funzione divisione ricevono una copia del contenuto delle variabili dividendo e divisore.

L'immagine seguente descrive un esempio di passaggio per riferimento, in questo caso l'argomento della funzione calcolaQuadrato riceve una copia del riferimento (indirizzo) dell'array di interi numeri, attraverso il riferimento può modificare direttamente il contenuto dell'array.

Esempio 1

L'esempio seguente mostra che il passaggio per valore permette di copiare il contenuto della variabile originale nella variabile indicata come argomento. Modificando il contenuto della variabile indicata come argomento della funzione, il contenuto della variabile originale non cambia: 


// passaggio_per_valore.ts
function modificaValore(copiaDiA:number){
    console.log("Funzione modificaValore, valore passato:"+copiaDiA);
    //Modifico copiaDiA;
    copiaDiA=20;
    console.log("Funzione modificaValore, valore modificato:"+copiaDiA);
}
 
//Modulo
var a:number=10;
console.log("Modulo, valore passato alla funzione modificaValore:"+a);
modificaValore(a)
console.log("Modulo, valore dopo l'esecuzione della funzione modificaValore:"+a);
---------------------------------------------------------------------------------------------
Modulo, valore passato alla funzione modificaValore:10
Funzione modificaValore, valore passato:10
Funzione modificaValore, valore modificato:20
Modulo, valore dopo l'esecuzione della funzione modificaValore:10
 

Con il passaggio per valore, per modificare  il contenuto della variabile originale dovete usare il comando return, come mostra l'esempio seguente:

Esempio 2

 
// passaggio_per_valore_bis.ts
function modificaValore(copiaDiA:number):number{
    console.log("Funzione modificaValore, valore passato:"+copiaDiA);
    //Modifico copiaDiA;
    copiaDiA=20;
    console.log("Funzione modificaValore, valore modificato:"+copiaDiA);
    return copiaDiA;
}
 
//Modulo
var a:number=10;
console.log("Modulo, valore passato alla funzione modificaValore:"+a);
a=modificaValore(a)
console.log("Modulo, valore dopo l'esecuzione della funzione modificaValore:"+a);
-----------------------------------------------------------------------------------------
Modulo, valore passato alla funzione modificaValore:10
Funzione modificaValore, valore passato:10
Funzione modificaValore, valore modificato:20
Modulo, valore dopo l'esecuzione della funzione modificaValore:20
 

Esempio 3

L'esempio seguente mostra che il passaggio per riferimento permette di copiare l'indirizzo di un array o di un oggetto nella variabile indicata come argomento. Attraverso il riferimento è possibile modificare direttamente il valore della variabile originale: 

 
 
// passaggio_per_riferimento.ts
function modificaValore(rifObjJson:{a:number}){
    console.log("Funzione modificaValore, valore passato:"+rifObjJson.a);
    //Modifico copiaDiA;
    rifObjJson.a=20;
    console.log("Funzione modificaValore, valore modificato:"+rifObjJson.a);
}
 
//Modulo
//Dichiarazione di una variabile in cui memorizzare il riferimento di un oggetto di tipo Json
var objJson:{a:number};
//Creazione di un oggetto di tipo Json assegnando il valore 10 all'attributo a 
objJson={a:10}; 
console.log("Modulo, valore passato alla funzione modificaValore:"+objJson.a);
//Passo alla funzione il riferimento (indirizzo) dell'oggetto objJson.
modificaValore(objJson);
console.log("Modulo, valore dopo l'esecuzione della funzione modificaValore:"+objJson.a);
----------------------------------------------------------------------------------------------
Modulo, valore passato alla funzione modificaValore:10
Funzione modificaValore, valore passato:10
Funzione modificaValore, valore modificato:20
Modulo, valore dopo l'esecuzione della funzione modificaValore:20
 

 

FUNZIONI ANONIME

In TypeScript le funzioni possono essere passate  come argomenti ad altre funzioni, utilizzando il loro riferimento

In questo caso non passate un'informazione, ma un comportamento.

Una funzione che riceve in input il riferimento di una funzione viene chiamata funzione superiore.  

Le funzioni anonime sono funzioni che non hanno un nome e possono essere eseguite attraverso il loro riferimento.

Questo tipo di funzione può anche essere passata come argomento ad funzione superiore.

 L'esempio seguente mostra come si crea ed esegue una funzione anonima, utilizzando il metodo log che in questo caso è la funzione superiore.

 
var rifPerimetro=function (latoA:number,latoB:number,latoC:number):number {
    return latoA+latoB+latoC;
}
console.log(rifPerimetro(10,15,20));
----------------------------------------------------------------------------
45
 

 

FUNZIONI LAMBDA

Le funzioni lambda sono particolari tipi di funzioni anonime, quindi anch'esse possono essere passate  come argomenti alle funzione superiori.

La sintassi per creare le funzioni lambda è leggermente diversa da quella usata per le funzioni anonime, perché al posto della parola chiave function si usa l'operatore freccia "=>", come mostra l'esempio seguente:


var rifPerimetro=(latoA:number,latoB:number,latoC:number):number => {
    return latoA+latoB+latoC;
}
console.log(rifPerimetro(10,15,20));
---------------------------------------------------------------------------------------
45

Attenzione, le funzioni lambda e le funzioni anonime, se sono composte da una sola riga di comando, possono essere implementate senza usare le parentesi graffe e senza indicare il return, come mostra l'esempio seguente:


var rifPerimetro=(latoA:number,latoB:number,latoC:number):number => latoA+latoB+latoC;
console.log(rifPerimetro(10,15,20));
---------------------------------------------------------------------------------------
45
 

 

FUNZIONI RICORSIVE

In TypeScript le funzioni sono ricorsive, cioè possono chiamare se stesse. Questa caratteristica è molto importante perché la ricorsività permette di simulare il comportamento di un ciclo while al contrario. 

Per capire l'utilità della ricorsività delle funzioni facciamo alcuni  esempi.

Esempio 4

Visualizzare il contenuto di una array d'interi partendo dall'ultimo valore al primo.

A) Soluzione utilizzando un while.

//inverti_interi.ts
var interi:number[]=[2,10,25,8,80,30,70,5,15,90];
var indice:number=interi.length-1;
while(indice>=0){
    console.log(interi[indice]);
    indice--;
}
-----------------------------------------------------
90
15
5
70
30
80
8
25
10
2

B) Soluzione utilizzando una funzione ricorsiva.

 
//inverti_interi_ricorsivo.ts
function inverti_interi(indice:number){
  if(indice<interi.length-1){
      inverti_interi(indice+1);
   }
   console.log(indice+","+interi[indice]);
}
var interi:number[]=[2,10,25,8,80,30,70,5,15,90];
inverti_interi(0);
-------------------------------------------------------
9,90
8,15
7,5
6,70
5,30
4,80
3,8
2,25
1,10
0,2
 

Esempio 5

Visualizzare il contenuto di una array d'interi partendo dall'ultimo valore al primo.

//fattoriale.ts
function fattoriale(numero:number):number{
    if(numero>1){
        numero*=fattoriale(numero-1);
    }
    return numero;
}
 
console.log(fattoriale(5));
-------------------------------------------------
120
 

Nella prossima lezione iniziamo a parlare di Object Oriented in TypeScript, introducendo le Classi e gli Oggetti.


<< Lezione precedente           Lezione successiva >> | Vai alla prima lezione


T U T O R I A L S    S U G G E R I T I


EDUCATIONAL GAMING BOOK (EGB) "H2O"

Nell'era dello SMART LEARNING e di PYTHON i libri non si scrivono, ma si sviluppano, in questo modo chi studia, può sperimentare ed apprendere contemporaneamente; un libro con queste caratteristiche lo possiamo definire un  Educational Gaming Book (EGB).

"H2Oè un EGB che descrive tutte le caratteristiche dell'acqua, la sostanza formata da molecole di H2O, che attraverso il suo ciclo di vita garantisce la sopravvivenza di tutti gli esseri viventi del Pianeta

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune raro, indispensabile per la vita


Per il DOWNLOAD di "H2Oclicca qui.

Share Button

TypeScript - Lezione 3: Array (CRUD - JSON -ANALISI DATI)

Gino Visciano | Skill Factory - 26/06/2020 09:16:19 | in Tutorials

In questa lezione approfondiamo la gestione degli array, introducendo  le principali tecniche di CRUD.

Come abbiamo già visto nella lezione precedente, un array è un contenitore dinamico d'informazioni, per poterlo usare in TypeScript lo dovete prima dichiarare:

var nominativi:string[];

Le parentesi quadre dopo il tipo differenziano gli array dalle variabili. Dopo aver dichiarato un array lo dovete sempre inizializzare come mostrano gli esempi seguenti:

var nominativi:string[];
nominativi=[]; // Inizializzazione di un array vuoto

oppure

var nominativi:string[];
nominativi=['Mario Rossi','Paola Verdi']; // Inizializzazione di un array con due nominativi.

Potete anche dichiarare in inizializzare  contemporaneamente:

var nominativi:string[]=[]; //  Dichiarazione ed inizializzazione di un array vuoto

oppure

var nominativi:string[]=['Mario Rossi','Paola Verdi']; // Dichiarazione ed inizializzazione di un array con due nominativi

CREATE (INSERIMENTO)

Per aggiungere le informazioni richieste in un array dovete usare il metodo push:

var nominativi:string[]=[]; //  Dichiarazione ed inizializzazione di un array vuoto
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');

READ (LETTURA)

Per leggere il contenuto di un elemento di un array, dovete conoscere la sua posizione ed indicarla attraverso un indice che corrisponde ad un valore numerico compreso tra 0 ed n-1, dove n è il numero totale di elementi nell'array.
Attenzione il primo elemento di un array corrisponde all'indice 0, l'ultimo all'indice n-1, come mostra l'esempio seguente:

 

Esempio 1

 

UPDATE (MODIFICA)

Per modificare il contenuto di un elemento di un array basta  sostituire semplicemente il vecchio valore con quello nuovo, come indica l'esempio seguente:

nominativi[3]='Pietro Morra";  // Sostituiamo Ugo Formisano con Pietro Morra 

Esempio 2

DELETE (ELIMINA)

Per eliminare uno o più  elementi da un array dovete usare il metodo splice, fornendo l'indice del primo elemento e quanti elementi volete cancellare, come mostra l'esempio seguente:

nominativi.splice(2,1); // l'indice 2 indica il 3° elemento dell'array, il valore 1 indica che vogliamo cancellare solo quello

oppure

nominativi.splice(2,2); // l'indice 2 indica il 3° elemento dell'array, il valore 2 indica che vogliamo cancellare il 3° ed il 4° elemento dell'array

oppure

nominativi.splice(2); // l'indice 2 indica il 3° elemento dell'array, non avendo indicato quanti elementi eliminare vengono cancellati tutti gli elementi dell'array dal 3° in poi

Esempio 3

Esempio 4

 
Esempio 5
 
 
COME TROVARE UN ELEMENTO IN UN ARRAY
Per trovare un valore contenuto in un elemento di un array dovete usare il metodo indexOf
Se il valore cercato viene trovato il metodo 
indexOf ritorna l'indice dell'elemento in cui il valore è stato trovato, altrimenti ritorna -1.  
 
Di seguito vediamo alcuni esempi:
 
VALORE INTERO TROVATO
 
var
 interi:number[]=[10,20,30];
console.log(interi.indexOf(20));
---------------------------------
1
 
 
VALORE INTERO NON TROVATO
 
var interi:number[]=[10,20,30];
console.log(interi.indexOf(50));
---------------------------------
-1
 
 
VALORE DI TIPO STRINGA TROVATO
 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
console.log(nominativi.indexOf('Roberta Bianchi'));
---------------------------------
2
 
 
VALORE DI TIPO STRINGA NON TROVATO
 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
console.log(nominativi.indexOf('Marco Risi'));
---------------------------------
-1
 
 
COME ORDINARE IL CONTENUTO DI UN ARRAY
Per ordinare il contenuto di un array dovete usare il metodo sort
 
ORDINAMENTO CRESCENTE
 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
nominativi.sort();
for (var x = 0x < nominativi.lengthx++) {
    console.log((x + 1) + ")" + nominativi[x]);
}
--------------------------------
1)Carla Pinto
2)Mario Rossi
3)Paola Verdi
4)Roberta Bianchi
5)Ugo Formisano
 
 
ORDINAMENTO DECRESCENTE
 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
nominativi.sort((n,m)=>m.localeCompare(n))
for (var x = 0x < nominativi.lengthx++) {
    console.log((x + 1) + ")" + nominativi[x]);
}
--------------------------------
1)Ugo Formisano
2)Roberta Bianchi
3)Paola Verdi
4)Mario Rossi
5)Carla Pinto
 
 
L'ordine del contenuto degli elementi di un array si può anche invertire con il metodo reverse:
 
INVERSIONE DEL CONTENUTO DI UN ARRAY
 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
nominativi.reverse();
for (var x = 0x < nominativi.lengthx++) {
    console.log((x + 1) + ")" + nominativi[x]);
}
--------------------------------
1)Carla Pinto
2)Ugo Formisano
3)Roberta Bianchi
4)Paola Verdi
5)Mario Rossi
 
 
COME DUPLICARE UN ARRAY
Per duplicare un array dovete usare il metodo slice, questo metodo ritorna il riferimento di memoria dove viene allocata la copia, come mostra l'esempio seguente:
 
Esempio 6

Attenzione, la dichiarazione:

var nominativiDue:string[];
 
serve per creare la variabile a cui verrà assegnato il riferimento del nuovo array creato dal metodo slice
 
 
COME CONCATENARE GLI ELEMENTI DI UN ARRAY CON UN ALTRO ARRAY (MERGE)
Per concatenare gli elementi di un array con un altro array dovete usare il metodo concat.
Il metodo concat crea un terzo array in cui concatena gli elementi  dei due array da concatenare. 
 
Esempio 7
 
Attenzione, la dichiarazione:

var nominativiUnoDue:string[];
 
serve per creare la variabile a cui verrà assegnato il riferimento del nuovo array creato dal metodo concat
 
COME CREARE UN ARRAY DI STRINGHE PARTENDO DA UN ELENCO DI VALORI DI TIPO STRINGA
Un elenco di valori di tipo stringa può essere definito come un insieme di dati divisi da un separatore qualsiasi, come mostra l'esempio seguente:
 
"Anna Neri,Mario Rossi,Roberta Bianchi,Ugo Formisano,Paola Verdi,Francesca Lombardo"
 
dove il separatore usato è una virgola oppure: 
 
"Mela-Pera-Arancia-Uva-Anguria-Melone-Banana"
 
dove il separatore usato è un trattino.
 
Per trasformare un elenco di dati di tipo stringa in un array di stringhe dovete usare il metodo split indicando come argomento il separatore usato per dividere le informazioni.
 
Esempio 8
 
Esempio 9
 
 
COME CREARE UNA STRINGA DI VALORI PARTENDO DA UN ARRAY DI STRINGHE
Per trasformare un array di stringhe in un elenco di valori di tipo stringa dovete utilizzare il metodo join, fornendo come argomento il separatore da utilizzare per creare l'elenco, come mostra l'esempio seguente:
 
TRASFORMAZIONE DI UN ARRAY DI STRINGHE IN UNA STRINGA DI VALORI
 
var frutti:string[]=['Mela','Pera','Arancia','Uva','Anguria','Melone','Banana']
var elencoFrutti:string
elencoFrutti=frutti.join("-");
console.log(elencoFrutti);
-------------------------------------------------------------------------------
Mela-Pera-Arancia-Uva-Anguria-Melone-Banana
 
 
 
 
COME GESTIRE VELOCEMENTE IL CONTENUTO DI TUTTI GLI ELEMENTI DI UN ARRAY
Per gestire il contenuto di un array si usa un ciclo for che incrementa l'indice degli elementi da x=0 ad x<nomeArray.length, come mostra l'esempio seguente:
 
var interi:number[]=[10,20,30,40,50];   
for(let x=0;x<interi.length;x++){
      console.log(interi[x]):
}
 
oppure potete usare un ciclo for of:
 
for(let i of interi){
      console.log(i);
}
 
Per rendere più veloce la gestione di una array potete usare il metodo foreach.
Questo metodo, a differenza del for, scorre gli elementi dell'array senza utilizzare un indice e ad ogni loop assegna ad una variabile il valore dell'elemento corrente, come mostrano gli esempi seguenti:
 
VISUALIZZAZIONE DEL CONTENUTO DI UN ARRAY
 
var interi:number[]=[10,20,30,40,50];   
interi.forEach((intero:number=> console.log(intero));
--------------------------------------------------------
10
20
30
40
50
 
 
In questo esempio il foreach legge tutti i numeri dell'array interi e ad ogni loop assegna il valore corrente  alla variabile intero, il simbolo "=>" , chiamato freccia indica l'operazione da svolgere.
Attenzione se l'operazione che volte svolgere è composta da una sola istruzione potete evitare di usare le parentesi graffe, altrimenti sono obbligatorie.
 
VISUALIZZAZIONE DEL CONTENUTO DI UN ARRAY TIPO ELENCO NUMERICO
 
var interi:number[]=[10,20,30,40,50]; 
var indice=1;  
interi.forEach((intero:number=> {
    console.log(indice+") "+intero) // Concateno indice con ") " e con intero
    indice++;
});
--------------------------------------
1) 10
2) 20
3) 30
4) 40
5) 50
 
 
 
var interi:number[]=[10,20,30,40,50]; 
var somma=0;  
interi.forEach((intero:number=> somma+=intero);
console.log("Totale dei numeri inseriti nell'array:"+somma);
--------------------------------------------------------------
Totale dei numeri inseriti nell'array:150
 
 
 
GESTIONE DELLE CODE
Le code si usano per gestire sequenze di valori che devono essere usati necessariamente in base all'ordine d'inserimento oppure di estrazione.
 
Esistono due tipi di code:
 
1) Code FIFO (First In First Out - Primo entrato è il primo ad uscire);
2) Code LIFO (Last In First Out - L'ultimo entrato è il primo ad uscire).
 
 
 
CODA FIFO
 
var codaFIFO:number[]=[10,5,20,15,8,40,30,25,45,35];
console.log(codaFIFO);
for(let x=0;x<10;x++){
    console.log(codaFIFO.shift()+"<--"+codaFIFO);
}
---------------------------------------------------------------
[10,  5, 20, 15,  8, 40, 30, 25, 45, 35]
10<--5,20,15,8,40,30,25,45,35
5<--20,15,8,40,30,25,45,35
20<--15,8,40,30,25,45,35
15<--8,40,30,25,45,35
8<--40,30,25,45,35
40<--30,25,45,35
30<--25,45,35
25<--45,35
45<--35
35<--
 
 
 
 
 
CODA LIFO
 
var codaFIFO:number[]=[10,5,20,15,8,40,30,25,45,35];
console.log(codaFIFO);
for(let x=0;x<10;x++){
    console.log(codaFIFO.pop()+"<--"+codaFIFO);
}
-------------------------------------------------------
[10,  5, 20, 15,  8, 40, 30, 25, 45, 35]
35<--10,5,20,15,8,40,30,25,45
45<--10,5,20,15,8,40,30,25
25<--10,5,20,15,8,40,30
30<--10,5,20,15,8,40
40<--10,5,20,15,8
8<--10,5,20,15
15<--10,5,20
20<--10,5
5<--10
10<--
 
 
 
COME GESTIRE UN ARRAY DI OGGETTI JSON
JSON ( (JavaScript Object Notation)) è il formato testo più utilizzato nel mondo della programmazione per definire strutture di dati di tipo SQL e NOSQL.
 
Una struttura JSON oppure oggetto JSON è delimitata da parentesi graffe {...}  che contengono gli attributi (nomi delle informazioni), associati ai dati corrispondenti, come mostra l'esempio seguente:
 
{
id:1,
nome:"Paola",
cognome:"Verdi",
luogoDiNascita:"Roma",
dataDiNascita:new Date("10/05/1990"),
sesso:true,
codiceFiscale:"pllvrd90l05l234f",
titoliDiStudio:["Diploma","Laurea"]
};
 
I dati di tipo stringa vanno racchiusi tra le virgolette, i valori booleani s'impostano con true o false e se un attributo è composto da più valori, per indicarli potete usare la stessa notazione utilizzata per inizializzare gli arrray [...], come ad esempio avviene per l'attributo titoliDiStudio:["Diploma","Laurea"].
 
Per creare un tipo di dato che corrisponde ad una struttura/oggetto JSON dovete creare un'interfaccia, come mostra l'esempio seguente:
 
interface Persona {
     id:number,
     nome:string,
     cognome:string,
     luogoDiNascita:string,
     dataDiNascita:Date,
     sesso:boolean,
     codiceFiscale:string,
     titoliDiStudio:string[]
 
Esempio 10
 
// array_esempio_10.ts
interface Persona {
    id:number,
    nome:string,
    cognome:string,
    luogoDiNascita:string,
    dataDiNascita:Date,
    sesso:boolean,
    codiceFiscale:string,
    titoliDiStudio:string[]
    } 
// Dichiaro ed inizializzo un array di persone di tipo Persona
var persone:Persona[]=[];
persone.push(
    {
    id:1,
    nome:"Paola",
    cognome:"Verdi",
    luogoDiNascita:"Roma",
    dataDiNascita:new Date("10/05/1990"),
    sesso:true,
    codiceFiscale:"pllvrd90l05l234f",
    titoliDiStudio:["Diploma","Laurea"]
    }
)   
persone.push(
    {
    id:2,
    nome:"Marco",
    cognome:"Rossi",
    luogoDiNascita:"Napoli",
    dataDiNascita:new Date("1/5/1996"),
    sesso:false,
    codiceFiscale:"mrcrss96l01l256g",
    titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]
    }
persone.push(
    {
    id:3,
    nome:"Carla",
    cognome:"Rossini",
    luogoDiNascita:"Pesaro",
    dataDiNascita:new Date("10/15/1990"),
    sesso:true,
    codiceFiscale:"crlrss90f10l324a",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
persone.push(
    {
    id:4,
    nome:"Roberta",
    cognome:"Bianchi",
    luogoDiNascita:"Firenze",
    dataDiNascita:new Date("03/20/2000"),
    sesso:false,codiceFiscale:"rbtbnc00f03p259b",
    titoliDiStudio:["Diploma"]
    }
)
persone.push(
    {
    id:5,
    nome:"Ugo",
    cognome:"Formisano",
    luogoDiNascita:"Salerno",
    dataDiNascita:new Date("07/28/2002"),
    sesso:false,codiceFiscale:"gggfrm07r28m260p",
    titoliDiStudio:["Diploma","Laurea Magistrale"]
    }
)
persone.forEach((persona:Persona)=>console.log(persona));
------------------------------------------------------------------
{
  id: 1,
  nome: 'Paola',
  cognome: 'Verdi',
  luogoDiNascita: 'Roma',
  dataDiNascita: 1990-10-04T23:00:00.000Z,
  sesso: true,
  codiceFiscale: 'pllvrd90l05l234f',
  titoliDiStudio: [ 'Diploma', 'Laurea' ]
}
{
  id: 2,
  nome: 'Marco',
  cognome: 'Rossi',
  luogoDiNascita: 'Napoli',
  dataDiNascita: 1996-01-04T23:00:00.000Z,
  sesso: false,
  codiceFiscale: 'mrcrss96l01l256g',
  titoliDiStudio: [ 'Diploma', 'Laurea Triennale', 'Laurea Magistrale' ]
}
{
  id: 3,
  nome: 'Carla',
  cognome: 'Rossini',
  luogoDiNascita: 'Pesaro',
  dataDiNascita: 1990-10-14T23:00:00.000Z,
  sesso: true,
  codiceFiscale: 'crlrss90f10l324a',
  titoliDiStudio: [ 'Diploma', 'Laurea Triennale' ]
}
{
  id: 4,
  nome: 'Roberta',
  cognome: 'Bianchi',
  luogoDiNascita: 'Firenze',
  dataDiNascita: 2000-03-19T23:00:00.000Z,
  sesso: false,
  codiceFiscale: 'rbtbnc00f03p259b',
  titoliDiStudio: [ 'Diploma' ]
}
{
  id: 5,
  nome: 'Ugo',
  cognome: 'Formisano',
  luogoDiNascita: 'Salerno',
  dataDiNascita: 2002-07-27T22:00:00.000Z,
  sesso: false,
  codiceFiscale: 'gggfrm07r28m260p',
  titoliDiStudio: [ 'Diploma', 'Laurea Magistrale' ]
}
 
 
Per  creare una struttura/oggetto JSON, potete anche indicare come tipo direttamente le informazioni che ne descrivono il formato, come mostra l'esempio seguente:
 
var persona{id:number,
       nome:string,
       cognome:string, 
       luogoDiNascita:string, 
       dataDiNascita:Date, 
       sesso:boolean, 
       codiceFiscale:string, 
       titoliDiStudio:string[]}={
       id: 1,
       nome: 'Paola',
      cognome: 'Verdi',
      luogoDiNascita: 'Roma',
      dataDiNascita: 1990-10-04T23:00:00.000Z,
      sesso: true,
      codiceFiscale: 'pllvrd90l05l234f',
      titoliDiStudio: [ 'Diploma', 'Laurea' ]}
 
 
Esempio 10_BIS
 
// array_esempio_10_bis.ts
var persone:{
    id:number,
    nome:string,
    cognome:string,
    luogoDiNascita:string,
    dataDiNascita:Date,
    sesso:boolean,
    codiceFiscale:string,
    titoliDiStudio:string[]
    }[]=[];
persone.push(
    {
    id:1,
    nome:"Paola",
    cognome:"Verdi",
    luogoDiNascita:"Roma",
    dataDiNascita:new Date("10/05/1990"),
    sesso:true,
    codiceFiscale:"pllvrd90l05l234f",
    titoliDiStudio:["Diploma","Laurea"]
    }
)   
persone.push(
    {
    id:2,
    nome:"Marco",
    cognome:"Rossi",
    luogoDiNascita:"Napoli",
    dataDiNascita:new Date("1/5/1996"),
    sesso:false,
    codiceFiscale:"mrcrss96l01l256g",
    titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]
    }
persone.push(
    {
    id:3,
    nome:"Carla",
    cognome:"Rossini",
    luogoDiNascita:"Pesaro",
    dataDiNascita:new Date("10/15/1990"),
    sesso:true,
    codiceFiscale:"crlrss90f10l324a",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
persone.push(
    {
    id:4,
    nome:"Roberta",
    cognome:"Bianchi",
    luogoDiNascita:"Firenze",
    dataDiNascita:new Date("03/20/2000"),
    sesso:false,codiceFiscale:"rbtbnc00f03p259b",
    titoliDiStudio:["Diploma"]
    }
)
persone.push(
    {
    id:5,
    nome:"Ugo",
    cognome:"Formisano",
    luogoDiNascita:"Salerno",
    dataDiNascita:new Date("07/28/2002"),
    sesso:false,codiceFiscale:"gggfrm07r28m260p",
    titoliDiStudio:["Diploma","Laurea Magistrale"]
    }
)
persone.forEach((persona:{
        id:number,
        nome:string,
        cognome:string,
        luogoDiNascita:string,
        dataDiNascita:Date,
        sesso:boolean,
        codiceFiscale:string,
        titoliDiStudio:string[]
        })=>console.log(persona));
 
 
 
PRINCIPALI METODI PER ANALIZZARE IL CONTENUTO DI UN ARRAY
Per analizzare le informazioni contenute in array potete utilizzare tre metodi: filter, map e reduce.
 
- Il metodo filter, crea un nuovo array che contiene gli elementi che soddisfano la condizione indica nella funzione lambda associata al metodo.
- Il metodo map, crea un nuovo array che contiene i risultati delle operazioni eseguite dalla funzione lambda associata al metodo.
- Il metodo reduce utilizza un accumulatore per eseguire operazioni di tipo somma o conteggio.  
 
Vediamo alcuni esempi:
 
VISUALIZZA NUMERI DISPARI
 
var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var interiDispari:number[]=interi.filter((numero:number)=>{
    if (numero%2!=0){
        return numero;
    }
})
interiDispari.forEach((numero:number=> console.log(numero));
---------------------------------------------------------------------------------
5
15
33
53
67
91
65
79
35
 

L'argomento del metodo filter è una funzione lambda, una funzione anonima che riceve come argomenti di volta in volta, tutti i valori dell'array e ritorna solo quelli dispari:

// Funzione lambda
(numero:number) => {
     if(numero%2!=0){
         return numero; // Aggiunge al nuovo array solo i valori che soddisfano la condizione
     }
}

Il simbolo => è detto freccia, si usa per associare gli argomenti della funzione lambda all'implementazione.

 

VISUALIZZA IL TOTALE DEI NUMERI DISPARI

 
var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var totaleNumeriDispari:number=interi.filter((numero:number)=>{
    if (numero%2!=0){
        return numero;
    }
}).reduce((totale:number,numero:number)=> totale+numero);
console.log("Totale numeri dispari:"+totaleNumeriDispari);
----------------------------------------------------------------------------------
Totale numeri dispari:443
 

 

La funzione lambda del metodo reduce, viene eseguita per ogni elemento dell'array. Il primo argomento della funzione è un accumulatore, conserva il valore del calcolo precedente, mentre il secondo argomento, corrisponde al valore corrente dell'array.

 

CALCOLA IL CUBO DEI VALORI DELL'ARRAY

 
var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var cuboInteri=interi.map((numero:number)=>Math.pow(numero,3));
cuboInteri.forEach((numero:number)=>console.log(numero));
-------------------------------------------------------------------------------
1000
125
3375
27000
35937
8000
148877
300763
474552
729000
753571
941192
343000
274625
493039
1728
2744
5832
42875
512000
 

 

TOTALE DEL CUBO DEI NUMERI PARI DELL'ARRAY

 
var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var totale=interi.filter((numero:number)=>{
    if(numero%2==0){
       return numero;
    }
}).map((numero:number)=>Math.pow(numero,3)).reduce((somma:number,numero:number)
=>somma+numero);
console.log("Totale del cubo dei numeri pari:"+totale);
------------------------------------------------------------------------------
Totale del cubo dei numeri pari:3046048
 
 

 

VISUALIZZA L'ETA' MEDIA DELLE DONNE CON LAUREA INSERITE NELL'ARRAY

 
interface Persona {
    id:number,
    nome:string,
    cognome:string,
    luogoDiNascita:string,
    dataDiNascita:Date,
    sesso:boolean,
    codiceFiscale:string,
    titoliDiStudio:string[]
    } 
var persone:Persona[]=[];
persone.push(
    {
    id:1,
    nome:"Paola",
    cognome:"Verdi",
    luogoDiNascita:"Roma",
    dataDiNascita:new Date("10/05/1990"),
    sesso:true,
    codiceFiscale:"pllvrd90l05l234f",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
)   
persone.push(
    {
    id:2,
    nome:"Marco",
    cognome:"Rossi",
    luogoDiNascita:"Napoli",
    dataDiNascita:new Date("1/5/1996"),
    sesso:false,
    codiceFiscale:"mrcrss96l01l256g",
    titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]
    }
persone.push(
    {
    id:3,
    nome:"Carla",
    cognome:"Rossini",
    luogoDiNascita:"Pesaro",
    dataDiNascita:new Date("10/15/1990"),
    sesso:true,
    codiceFiscale:"crlrss90f10l324a",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
persone.push(
    {
    id:4,
    nome:"Roberta",
    cognome:"Bianchi",
    luogoDiNascita:"Firenze",
    dataDiNascita:new Date("03/20/2000"),
    sesso:true,
    codiceFiscale:"rbtbnc00f03p259b",
    titoliDiStudio:["Diploma"]
    }
)
persone.push(
    {
    id:5,
    nome:"Ugo",
    cognome:"Formisano",
    luogoDiNascita:"Salerno",
    dataDiNascita:new Date("07/28/2002"),
    sesso:false,
    codiceFiscale:"gggfrm07r28m260p",
    titoliDiStudio:["Diploma","Laurea Magistrale"]
    })
    persone.push(
        {
        id:6,
        nome:"Alessandra",
        cognome:"Bianchi",
        luogoDiNascita:"Milano",
        dataDiNascita:new Date("10/18/2005"),
        sesso:true,
        codiceFiscale:"ssnbnn10r18f345n",
        titoliDiStudio:["Diploma","Laurea Triennale"]
        })
    persone.push(
        {
        id:7,
        nome:"Nicola",
        cognome:"Morra",
        luogoDiNascita:"Torino",
        dataDiNascita:new Date("08/11/1990"),
        sesso:false,
        codiceFiscale:"nccmrr08r11l250u",
        titoliDiStudio:["Diploma"]
        })    
    persone.push(
        {
        id:8,
        nome:"Marina",
        cognome:"Rossi",
        luogoDiNascita:"Genova",
        dataDiNascita:new Date("03/01/1992"),
        sesso:true,
        codiceFiscale:"mrnrss03r01l250u",
        titoliDiStudio:["Diploma","Laurea Magistrale"]
        })    
    persone.push(
        {
        id:9,
        nome:"Daniele",
        cognome:"Verdi",
        luogoDiNascita:"Genova",
        dataDiNascita:new Date("02/05/1996"),
        sesso:false,
        codiceFiscale:"dnlvrd02r05l456g",
        titoliDiStudio:["Diploma","Laurea Triennale"]
        })    
    persone.push(
        {
        id:10,
        nome:"Michele",
        cognome:"Cuccurullo",
        luogoDiNascita:"Asti",
        dataDiNascita:new Date("11/11/1998"),
        sesso:false,
        codiceFiscale:"mccccc11g11l250s",
        titoliDiStudio:["Diploma"]
        })    
    persone.push(
        {
        id:11,
        nome:"Rosanna",
        cognome:"Neri",
        luogoDiNascita:"Ancona",
        dataDiNascita:new Date("11/10/1998"),
        sesso:true,
        codiceFiscale:"rssnrr11g10l251s",
        titoliDiStudio:["Diploma"]
        })                    
    persone.push(
        {
        id:12,
        nome:"Claudia",
        cognome:"Bianchi",
        luogoDiNascita:"Genova",
        dataDiNascita:new Date("10/01/2000"),
        sesso:true,
        codiceFiscale:"cldbnc10g00l255t",
        titoliDiStudio:["Diploma"]
        })                    
        var femmineLaureate:Persona[]=persone.filter((persona:Persona)=>{
                if(persona.sesso && 
                   (persona.titoliDiStudio.indexOf("Laurea Triennale")>=0 ||
                   persona.titoliDiStudio.indexOf("Laurea Magistrale")>=0)) {
                  return persona;
                }
                })
        var etaMedia:number=femmineLaureate.map((persona:Persona)=>
                     new Date().getFullYear()-persona.dataDiNascita.getFullYear())
                     .reduce((somma:number,eta:number)=>somma+eta)/
femmineLaureate.length;
console.log("Femmine laureate:"+femmineLaureate.length);
console.log("Età media:"+etaMedia);
-----------------------------------------------------------------------
Femmine laureate:4
Età media:25.75
 
 


Nella prossima lezione vedremo tutti i tipi di funzioni disponibili in TypeScript.


<< Lezione precedente           Lezione successiva >> | Vai alla prima lezione


T U T O R I A L S    S U G G E R I T I


EDUCATIONAL GAMING BOOK (EGB) "H2O"

Nell'era dello SMART LEARNING e di PYTHON i libri non si scrivono, ma si sviluppano, in questo modo chi studia, può sperimentare ed apprendere contemporaneamente; un libro con queste caratteristiche lo possiamo definire un  Educational Gaming Book (EGB).

"H2Oè un EGB che descrive tutte le caratteristiche dell'acqua, la sostanza formata da molecole di H2O, che attraverso il suo ciclo di vita garantisce la sopravvivenza di tutti gli esseri viventi del Pianeta

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune raro, indispensabile per la vita


Per il DOWNLOAD di "H2Oclicca qui.

Share Button

TypeScript - Lezione 2: Tipi di dati.

Gino Visciano | Skill Factory - 10/06/2020 16:07:16 | in Tutorials

TypeScript a differenza di Javascript,  permette di dichiarare le variabili con 3 tipi di dati primitivi:

- number (interi e decimali);
- string (caratteri alfanumerici);
- boolean (true e false).

L'esempio seguente mostra come si dichiarano e si assegnano valori  alle variabili in TypeScript:

Il comando var rende la variabile di tipo globale nel modulo in cui viene dichiarata.


COME DICHIARARE UNA VARIABILE A CUI  ASSEGNARE QUALUNQUE TIPO DI VALORE

Una variabile a cui si può assegnare qualunque tipo di valore è di tipo "Variant".

In TypeScript il tipo "Variant" corrisponde al tipo di dato any.

Ad esempio alle variabili seguenti potete assegnare qualunque tipo di valore:

// Dichiarazione
var valoreQualunqueUno:any;
var valoreQualunqueDue:any;
var valoreQualunqueTre:any;
var valoreQualunqueQuattro:any;

// Inizializzazione
valoreQualunqueUno=30;
valoreQualunqueDue=10.80;
valoreQualunqueTre:any="Arancione"
valoreQualunqueQuattro=true;

// Visualizzazione
console.log(valoreQualunqueUno);
console.log(valoreQualunqueDue);
console.log(valoreQualunqueTre);
console.log(valoreQualunqueQuattro)


COME DICHIARARE UNA VARIABILE DI TIPO DATA
In TypeScript il tipo data non è un tipo di dato primitivo, ma una classe.
Per riconoscere se un tipo di dato è primitivo oppure è una classe è semplice, i nomi dei tipi primitivi sono minuscoli mentre le classi iniziano sempre con una lettere maiuscola, come mostra l'esempio seguente:

var nome:string // Tipo di dato primitivo
var dataDiNascita:Date //Tipo Classe

Le variabili di tipo classe, possono contenere sia valori, sia funzioni, chiamate metodi, che servono per fare operazioni sul valori memorizzati. Le variabile di  tipo classe sono chiamate oggetti e si inizializzano con il comando new, come mostra l'esempio seguente:

var gg=number; // Variabile
var mm=number;
 // Variabile
var aaaa=number; // Variabile
var dataDiNascita=new Date("10/05/1990"); // Oggetto perché oltre ai valori può contienere anche metodi
gg=dataDiNascita.getData(); // Uso di un metodo che fornisce il giorno della data inserita
mm=dataDiNascita.getMonth(); 
// Uso di un metodo che fornisce il mese della data inserita
aaaa=dataDiNascita.gerFullYear(); // Uso di un metodo che fornisce l'anno della data inserita
console.log(gg+"/"+mm+"/"+aaaa);


COME LAVORARE CON GLI ARRAY

In TypeScript gli array si dichiarano come le variabili, l'unica differenza è che al tipo di dato , sia di tipo primitivo, sia di tipo classe, dovete aggiungere una coppia di parentesi quadre, come mostra l'esempio seguente:

var valori:number[]; // Array di tipo number, può contenere molti valori interi oppure decimali

Per dichiarare un array vuoto dovete usare la sintassi seguente:

var valori:number[]=[]// Dichiarazione e inizializzazione

oppure

var valori:number[]; // Dichiarazione 
valori=[]; // Inizializzazione

Per assegnare dei valori ad un array potete usare la sintassi seguente:

var valori:number[]=[10,5,20,15,30]// Dichiarazione e inizializzazione

oppure

var valori:number[]// Dichiarazione 
valori=[10,5,20,15,30]
// Inizializzazione

Dopo aver dichiarato ed inizializzato un array, per aggiungere nuovi valori, dovete usare il metodo push():

valori.push(50);
valori.push(40);

valori.push(35);
valori.push(25);
valori.push(45);

Tutti i valori di un array sono identificati da un indice numerico. Il primo valore corrisponde all'indice 0, l'ultimo valore corrisponde all'indice n-1, dove n è il numero di valori inserito nell'array.

L'attributo length contiene il numero di valori inseriti in un array (n).

Per visualizzare il contenuto di un array potete utilizzare un ciclo for, come mostra l'esempio seguente:

for(let x:number=0;x<valori.length;x++){
    console.log(valori[x]);
}

Il comando let permette di dichiarare una variabile visibile solo nel blocco in cui viene dichiarata.
 
Esempio 1
 
Aprite Visual Studio Code  
create un nuovo file:
 

 
e scrivete il codice seguente:

// valori_inserimento.ts
var valori:number[]=[10,5,20,15,30];
valori.push(50);
valori.push(40);

valori.push(35);
valori.push(25);
valori.push(45);

console.log("Valori inseriti:"+valori.length);

for(let x:number=0;x<valori.length;x++){
    console.log(valori[x]);
}

Salvate il file con il nome valori_inserimento.ts:
 
 
Dopo aver salvato il file apreite il terminale, compilate ed eseguite:
 
 
---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc valori_inserimento
node valori_inserimento

---------- OUTPUT ----------
Valori inseriti:10
10
5
20
15
30
50
40
35
25
45

Per modificare una valore inserito in un array dovete prima conoscere in quale posizione si trova (indice) e successivamente lo potete sostituire con il nuovo valore.

Esempio 2

// nominativi_modifica.ts
var nominativi:string[]=[];
nominativi.push("Paola Rossi");
nominativi.push("Ugo Verdi");
nominativi.push("Mara Bianchi");

nominativi.push("Marco Borriello");
nominativi.push("Roberta Di Donna");

console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
    console.log((x+1)+") "+nominativi[x]);
}

nominativi[0]="Michela De Pretis" // Modifica del primo elemento dell'array con indice=0
nominativi[2]="Francesco Ferrara"// Modifica del terzo elemento dell'array con indice=2
nominativi[4]="Carla Miranda"; // Modifica dell'ultimo (quinto) elemento dell'array  con indice=4
 
console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
    console.log((x+1)+") "+nominativi[x]); // (x+1) +")" permette di ottenere un elenco numerato
}

---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc nominativi_modifica
node nominativi_modifica


---------- OUTPUT ----------
Nominativi inseriti:5

1) Paola Rossi
2) Ugo Verdi
3) Mara Bianchi
4) Marco Borriello
5) Roberta Di Donna
Nominativi inseriti:5
1) Michela De Pretis
2) Ugo Verdi
3) Francesco Ferrara
4) Marco Borriello
5) Carla Miranda

Per eliminare un valore inserito in un array, dovete usare il metodo splace(indice,quanti), dove:

indice=posizione nell'array da dove iniziare ad eliminare;
quanti=quanti valori eliminare partendo dalla posizione indice.


Esempio 3

// nominativi_elimina.ts
var nominativi:string[]=[];
nominativi.push("Paola Rossi");
nominativi.push("Ugo Verdi");
nominativi.push("Mara Bianchi");

nominativi.push("Marco Borriello");
nominativi.push("Roberta Di Donna");

console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
    console.log((x+1)+") "+nominativi[x]);
}

nominativi.splace(2,1) // Elimina il terzo nominativo dall'array

console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
    console.log((x+1)+") "+nominativi[x]);
}

---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc nominativi_elimina
node nominativi_elimina


---------- OUTPUT ----------
Nominativi inseriti:5
1) Paola Rossi
2) Ugo Verdi
3) Mara Bianchi
4) Marco Borriello
5) Roberta Di Donna
Nominativi inseriti:4
1) Paola Rossi
2) Ugo Verdi
3) Marco Borriello
4) Roberta Di Donna

 

COME CREARE UN TIPO CLASSE PER ISTANZIARE OGGETTI

Un tipo classe è un tipo di dato definito dal programmatore, si differenzia dai tipi primitivi number, string e boolean, perché permette di memorizzare più informazioni contemporaneamente, come avviene per le strutture in C.

Le classi a differenza delle strutture, possono contenere anche funzioni, chiamate metodi, che permettono di eseguire operazioni sulle informazioni memorizzate.

I costruttori sono funzioni come i metodi che si usano durante la creazione degli oggetti (istanza) e servono per inizializzare i suoi attributi.

Per creare una classe dovete usare la parola chiave class seguita dal nome e da una coppia di parentesi graffe in cui dichiarare le variabili (attributi), i metodi richiesti ed i costruttori, come mostra l'esempio seguente:
 
class MiaClasse{
       valoreUno:tipo // Attributo = variabile globale
       valoreDue:
tipo; // Attributo = variabile globale
       // Metodo = funzione che permette di eseguire operazioni sugli attributi
      metodoUno():tipo{
            // Codice metodo
      }
      // Metodo = funzione che permette di eseguire operazioni sugli attributi
      // tipo è void se il metodo non restituisce (return) un valore, altrimenti corrisponde al tipo del valore restituito

      metodoDue():tipo{
           // Codice metodo
      }
      // Costruttore = funzione che permette di inizializzare gli attributi di un oggetto quando lo istanziate
      // Attenzione a differenza degli altri metodi il costruttore non può restituire valori, quindi non dovete indicare il tipo restituito
      constructor(){
           // Codice metodo costruttore
      }
}
 
Attenzione ricordate le seguenti regole:
 
1) I nomi delle classi sono formati da una o più parole che iniziano sempre con la lettera maiuscola:MiaClasse;
2) I nomi degli attributi, dei metodi e dei costruttori, hanno sempre la prima parola minuscola, se sono composti da più parole, le successive iniziano con la lettera maiuscola:valoreUno e metodoUno;
3) Quando create un costruttore, a differrenza dei metodi, non dovete indicare i tipo restituito.
 
In un'applicazione per usare un tipo classe dovete istanziare un oggetto, come mostra la sintassi seguente:
 
// Istanza (creazione di un oggetto di tipo classe)
var personaUno:Persona=new Persona();

personaUno=Nome oggetto che permette di memorizzare valori negli attributi ed eseguire operazioni eseguendo i metodi;
Persona=Classe;
new=comando che crea in memoria l'oggetto. Questa operazione è detta istanza;
Persona()=Costruttore, metodo utilizzato per inizializzare gli attributi dell'oggetto. 
 
Esempio 4
 

// Dichiarazione della Classe da utilizzare come tipo per istanziare oggetti
// gestione_persone.ts

class Persona{
    nome:string;
    cognome:string;
    luogoDiNascita:string;
    dataDiNascita:Date;
    sesso:boolean;
    toString():string{
        var gg:number=this.dataDiNascita.getDate(); 
        var mm:number=this.dataDiNascita.getMonth()+1;
        var aaaa:number=this.dataDiNascita.getFullYear();
        var dataValore:string=gg+"/"+mm+"/"+aaaa;
        var sessoValore:string="";
        if(this.sesso){
            sessoValore="Maschio";
        } else{
            sessoValore="Femmina"
        }
         return this.nome+","+this.cognome+","+this.luogoDiNascita+","+dataValore+","+sessoValore;
    }
    constructor(){} // In questo caso il costruttore non contiene codice d'inizializzazione, verrà usato solo per istanziare oggetti di tipo Persona
}

// Istanza di tre oggetti di tipo Persona
var personaUno:Persona=new Persona();
var personaDue:Persona=new Persona();
var personaTre:Persona=new Persona();

personaUno.nome="Mario";
personaUno.cognome="Rossi";
personaUno.luogoDiNascita="Milano";
//Mese, Giorno e Anno
personaUno.dataDiNascita=new Date("12/5/1990");
personaUno.sesso=true;

personaDue.nome="Paola";
personaDue.cognome="Verdi";
personaDue.luogoDiNascita="Napoli";
//Mese, Giorno e Anno
personaDue.dataDiNascita=new Date("9/10/1998");
personaDue.sesso=false;

personaTre.nome="Roberta";
personaTre.cognome="Bianchi";
personaTre.luogoDiNascita="Roma";
//Mese, Giorno e Anno
personaTre.dataDiNascita=new Date("1/12/1995");
personaTre.sesso=false;

console.log(personaUno.toString());
console.log(personaDue.toString());
console.log(personaTre.toString());

---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc gestione_persone
node gestione_persone


---------- OUTPUT ----------

Mario,Rossi,Milano,5/12/1990,Maschio
Paola,Verdi,Napoli,10/9/1998,Femmina
Roberta,Bianchi,Roma,12/1/1995,Femmina

Esempio 5

//rettangolo.ts

class Rettangolo {
         latoA:number;
         latoB:number;
         getPerimetro():number{
                    return 2*(this.latoA+this.latoB);
          }
         getArea():number{
                    return this.latoA*this.latoB;
         }
         constructor(latoA:number,latoB:number){
                       this.latoA=latoA;
                       this.latoB=latoB;
         }
}

var rettangolo:Rettangolo=new Rettangolo(10,20);
console.log("Perimetro:"+rettangolo.getPerimetro());
console.log("Area:"+rettangolo.getArea());

---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc rettangolo
node rettangolo


---------- OUTPUT ----------

Perimetro:60
Area:200

 

COME LAVORARE CON UNA STRUTTURA JSON (JavaScript Object Notation)

In  TypeScript una struttura JSON può essere definita come una variabile multivalore.

JSON è il nuovo formato testo (NOSQL) per organizzare dati, indipendente dal linguaggio di programmazione usato, molto utile per scambiare dati tra applicazioni scritte con linguaggi di programmazione diversi.

JSON è il formato di raccolta ed organizzazione dei dati più usato nel mondo dei Big Data, dove è molto diffuso l'uso di database NOSQL, come MONGODB, che usano strutture JSON al posto delle classiche tabelle usate nei database SQL (Relazionali).

Per dichiarare una  struttura JSON, dovete indicare in una coppia di parentesi graffe tutte le variabili che la compongono, come mostra l'esempio seguente:

var persona:{id:number, nome:string, cognome:string, luogoDiNascita:string, dataDiNascita:Date,sesso:boolean, codiceFiscale:string, titoliDiStudio:string[]};

Esempio 6

//  gestione_persone_json_01.ts

var personaUno:{id:number, nome:string, cognome:string, luogoDiNascita:string, dataDiNascita:Date,sesso:boolean, codiceFiscale:string, titoliDiStudio:string[]}; // Dichiarazione di una struttura JSON
var personaDue:{id:
number, nome:string, cognome:string, luogoDiNascita:string, dataDiNascita:Date,sesso:boolean, codiceFiscale:string, titoliDiStudio:string[]}; // Dichiarazione di una struttura JSON
personaUno={id:1,nome:"Paola",cognome:"Verdi",luogoDiNascita:"Roma",dataDiNascita:new Date("10/05/1990"),sesso:true,codiceFiscale:"pllvrd90l05l234f",titoliDiStudio:["Diploma","Laurea"]}; // Assegnazione dei dai ad una struttura JSON
personaDue={id:2,nome:"Marco",cognome:"Rossi",luogoDiNascita:"Napoli",dataDiNascita:new Date("1/5/1996"),sesso:false,codiceFiscale:"mrcrss96l01l256g",titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]}; // Assegnazione dei dai ad una struttura JSON

console.log(personaUno);
console.log(personaDue);

---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc gestione_persone_json_01
node gestione_persone_json_01


---------- OUTPUT ----------

{
  id: 1,
  nome: 'Paola',
  cognome: 'Verdi',
  luogoDiNascita: 'Roma',
  dataDiNascita: 1990-10-04T23:00:00.000Z,
  sesso: true,
  codiceFiscale: 'pllvrd90l05l234f',
  titoliDiStudio: [ 'Diploma', 'Laurea' ]
}
{
  id: 2,
  nome: 'Marco',
  cognome: 'Rossi',
  luogoDiNascita: 'Napoli',
  dataDiNascita: 1996-01-04T23:00:00.000Z,
  sesso: false,
  codiceFiscale: 'mrcrss96l01l256g',
  titoliDiStudio: [ 'Diploma', 'Laurea Triennale', 'Laurea Magistrale' ]
}

L'output mostra i dati delle due persone secondo la convenzione  JSON.

 

COME CREARE UN'INTERFACCIA PER DICHIARARE UNA STRUTTURA JSON (JavaScript Object Notation)

Per dichiarare una  struttura JSON, potete anche usare un'interfaccia che contiene le dichiarazioni di tutte le variabili che la compongono.

Per creare un'interfaccia, dovete usare la parola chiave interface, come mostra l'esempio seguente:

 interface PersonaJSON{
    id:number,
    nome:string, 
    cognome:string, 
    luogoDiNascita:string, 
    dataDiNascita:Date,
    sesso:boolean, 
    codiceFiscale:string, 
    titoliDiStudio:string[]
}

In questo caso avete creato il tipo di dato PersonaJSON, che serve per dichiarare strutture JSON che contengono le informazioni inserite nell'interfaccia.

 

Esempio 7

//  gestione_persone_json_02.ts

interface PersonaJSON{
    id:number,
    nome:string, 
    cognome:string, 
    luogoDiNascita:string, 
    dataDiNascita:Date,
    sesso:boolean, 
    codiceFiscale:string, 
    titoliDiStudio:string[]
}

var personaUno:PersonaJSON;
var personaDue:PersonaJSON;
personaUno={id:1,nome:"Paola",cognome:"Verdi",luogoDiNascita:"Roma",dataDiNascita:new Date("10/05/1990"),sesso:true,codiceFiscale:"pllvrd90l05l234f",titoliDiStudio:["Diploma","Laurea"]};
personaDue={id:2,nome:"Marco",cognome:"Rossi",luogoDiNascita:"Napoli",dataDiNascita:new Date("1/5/1996"),sesso:false,codiceFiscale:"mrcrss96l01l256g",titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]};

console.log(personaUno);
console.log(personaDue);

---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc gestione_persone_json_02
node gestione_persone_json_02

 

---------- OUTPUT ----------

{
  id: 1,
  nome: 'Paola',
  cognome: 'Verdi',
  luogoDiNascita: 'Roma',
  dataDiNascita: 1990-10-04T23:00:00.000Z,
  sesso: true,
  codiceFiscale: 'pllvrd90l05l234f',
  titoliDiStudio: [ 'Diploma', 'Laurea' ]
}
{

  id: 2,
  nome: 'Marco',
  cognome: 'Rossi',
  luogoDiNascita: 'Napoli',
  dataDiNascita: 1996-01-04T23:00:00.000Z,
  sesso: false,
  codiceFiscale: 'mrcrss96l01l256g',
  titoliDiStudio: [ 'Diploma', 'Laurea Triennale', 'Laurea Magistrale' ]
}

Esempio 8

//  gestione_persone_json_03.ts

interface PersonaJSON{
    id:number,
    nome:string, 
    cognome:string, 
    luogoDiNascita:string, 
    dataDiNascita:Date,
    sesso:boolean, 
    codiceFiscale:string, 
    titoliDiStudio:string[]
}

var persone:PersonaJSON[]=[]; // Array si strutture JSON di tipo PersonaJSON
persone.push({id:1,nome:"Paola",cognome:"Verdi",luogoDiNascita:"Roma",dataDiNascita:new Date("10/05/1990"),sesso:true,codiceFiscale:"pllvrd90l05l234f",titoliDiStudio:["Diploma","Laurea"]});
persone.push({id:2,nome:"Marco",cognome:"Rossi",luogoDiNascita:"Napoli",dataDiNascita:new Date("1/5/1996"),sesso:false,codiceFiscale:"mrcrss96l01l256g",titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]});
persone.push({id:3,nome:"Ugo",cognome:"Bianchi",luogoDiNascita:"Milano",dataDiNascita:new Date("7/9/2000"),sesso:false,codiceFiscale:"uggbnc00q07l246e",titoliDiStudio:["Diploma","Laurea Triennale"]});

for(let x:number=0;x<persone.length;x++){
   console.log(persone[x]);
}

---------- COMPILAZIONE ED ESECUZIONE  ----------
tsc gestione_persone_json_03
node gestione_persone_json_03

 

---------- OUTPUT ----------

{
  id: 1,
  nome: 'Paola',
  cognome: 'Verdi',
  luogoDiNascita: 'Roma',
  dataDiNascita: 1990-10-04T23:00:00.000Z,
  sesso: true,
  codiceFiscale: 'pllvrd90l05l234f',
  titoliDiStudio: [ 'Diploma', 'Laurea' ]
}
{
  id: 2,
  nome: 'Marco',
  cognome: 'Rossi',
  luogoDiNascita: 'Napoli',
  dataDiNascita: 1996-01-04T23:00:00.000Z,
  sesso: false,
  codiceFiscale: 'mrcrss96l01l256g',
  titoliDiStudio: [ 'Diploma', 'Laurea Triennale', 'Laurea Magistrale' ]
}
{
  id: 3,
  nome: 'Ugo',
  cognome: 'Bianchi',
  luogoDiNascita: 'Milano',
  dataDiNascita: 2000-07-08T22:00:00.000Z,
  sesso: false,
  codiceFiscale: 'uggbnc00q07l246e',
  titoliDiStudio: [ 'Diploma', 'Laurea Triennale' ]
}

Nella prossima lezione approfondiremo la conoscenza degli array.


<< Lezione precedente           Lezione successiva >> | Vai alla prima lezione


T U T O R I A L S    S U G G E R I T I


EDUCATIONAL GAMING BOOK (EGB) "H2O"

Nell'era dello SMART LEARNING e di PYTHON i libri non si scrivono, ma si sviluppano, in questo modo chi studia, può sperimentare ed apprendere contemporaneamente; un libro con queste caratteristiche lo possiamo definire un  Educational Gaming Book (EGB).

"H2Oè un EGB che descrive tutte le caratteristiche dell'acqua, la sostanza formata da molecole di H2O, che attraverso il suo ciclo di vita garantisce la sopravvivenza di tutti gli esseri viventi del Pianeta

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune raro, indispensabile per la vita


Per il DOWNLOAD di "H2Oclicca qui.


Share Button
TOP