Javascript ES6 - ES7 Avanzato con TypeScript e RxJs
4.3 (181 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
901 students enrolled

Javascript ES6 - ES7 Avanzato con TypeScript e RxJs

Impara Javascript ES6 - ES7 e TypeScript passo a passo: Costruisci una SPA con Promise, Fetch, RxJs e GOOGLE API
4.3 (181 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
901 students enrolled
Created by Hidran Arias
Last updated 6/2020
Italian
Current price: $83.99 Original price: $119.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11.5 hours on-demand video
  • 3 articles
  • 10 downloadable resources
  • 4 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Imparare ad usare le funzioni per la functional programming e per creazione di oggetti
  • Capire il concetto di scope e this in javascript
  • Capire il concetto di closure
  • Capire il concetto di IIFE
  • Capire le funzioni annidate
  • Capire il costrutto class e come estendere le classi in javascript ES6
  • Capire le nuove proprietà di javascript ES6 come let, rest parameter, operatore spread, classi
  • Saper utilizzare le FETCH API
  • Saper utilizzare le funzioni con async e await
  • Sapere utilizzare la programmazione asincrona con le Promise
  • Saper programmare in TypeScript
  • Sapere usare la programmazione reattiva: Reactive programming
  • Utilizzare la libreria rxjs
  • Dominare il pattern Observable-Observer
Course content
Expand all 88 lectures 11:19:01
+ Start Here
3 lectures 22:10

Presentazione del corso e l'interfaccia udemy su come utilizzare il corso

Preview 08:17

Navigare nella dashboard del corso, fare domande e usare il player

Navigare nella dashboard del corso, fare domande e usare il player
07:02
Scrivere javascript nel browse, con nodejs e online con jsbin e babel


Preview 06:51
+ ECMASCRIPT 2015 o ES6 e ES7. Nuove funzionalità nel core di javascript
5 lectures 48:49

Quando vogliamo creare una variabile che  sia solo visibile in un blocco di codice ({}) allora utilizziamo la parola chiave let invece di var:

var variable = 2;

function test(){  // console.log(variable);   var variable = 22; }    //console.log(variable); test();

{   var test2 ='test'; } for(let i=0; i<4; i++){  // console.log(i); }   {   let  varTest = 5;   console.log(varTest); }  //console.log(varTest);

La variabile i non è più visibile dopo il ciclo e varTest non è visibile al di fuori del blocco delimitato da {}

let : Dichiarare variabili in ES6 con scope di blocco
05:51

const. Dichiarare costanti

Preview 08:58
javascript ES6 : Template literal
15:12

In javascript ES6 è  possibile impostare valori di default ai parametri di una funzione.

Con i rest parameter ( ...nomeParametro) possiamo catturare "il resto dei parametri " in una funzione:

function calc2(operation, ...a){
          
       
      return  a.reduce(
        
        function(x,y){
           // eval(2+'*'+3);
                 return eval(x+operation+y);
       }
      );
    
  }
var res= calc2('*', 2,3,4,5, 7,6,8,9,56,77,777);
console.log(res)


Preview 08:55

Vediamo come usare la destrutturazione e l'operatore spread per estrarrare dei valori da array e oggetti

Operatore Spread e destrutturazione di array e oggetti
09:53
+ Manipolare e processare gli array in javascript es6
5 lectures 15:13
Il metodo filter degli array in javascript ES6
05:15

Il metodo foreach degli array in javascript ES6

Il metodo foreach degli array in javascript ES6
05:27
Il metodo some e very degli array in javascript ES6
01:49
Il metodo reduce degli array in javascript ES6
Il metodo reduce degli array in javascript ES6
02:41
Codice sorgente delle lezioni
00:01
+ Le funzioni in javascript
14 lectures 01:12:08

Il minimo che occorre per dichiarare una funzione è:

  1. Parola chiave function
  2. il nome della funzione
  3. parentesi tonde con o senza parametri
  4. parentesi graffe aperte e chiuse

function tes(){

}

per invocare questa funzione basta scrivere:

test();

Preview 04:28

Creiamo una funzione che abbia un parametro d'ingresso e ritorni qualcosa.

Useremo una funzione che calcola quanti secondi ha un numero di ore:

// FUNZIONI CON ARGOMENTI

 function hoursToSeconds( hours){
       
      var  ore = +hours || 0;
   
   if( ore<=0){
     alert('Valore non valido');
      return 0;
     
   }
    return ore * 3600;
 }

 var result = hoursToSeconds(24);
//console.log(result);

var result2 = hoursToSeconds(2);
//console.log(result2);

var result2 = hoursToSeconds('2');
//console.log(result2);

var result2 = hoursToSeconds(undefined);
console.log(result2);


Funzione con un argomento e valore di ritorno
05:51

Funzione con vari argomenti. Scriviamo una funzione che ci faccia dei calcoli

matematici:

Funzione con vari argomenti in javascript ES6. Scriviamo una funzione che ci faccia dei calcoli

matematici:


function calcola(operazione, parametro1, parametro2){
  
       switch(operazione){
           
         case 'somma':
           return parametro1 + parametro2;
           break;
           case 'sostrazione':
           return parametro1 - parametro2;
           break;
           case 'moltiplicazione':
           return parametro1 * parametro2;
           break;
           case 'divisione':
           return parametro1 / parametro2;
           break;
       }
}
//  console.log(calcola('divisione', 2,3));
console.log(calcola('somma',2,2));



Funzione con vari argomenti. Scriviamo una funzione che ci faccia dei calcoli
05:50

// +, - , * , /
   function calcola(){
         var operazione = arguments[0];
         
    
          var result = 0;
     
       for(var i = 1 ; i< arguments.length; i++){
         
          switch(operazione){
            case '+'  :
              result  +=arguments[i];
            break ;
               case '-'  :
              result  -=arguments[i];
            break;
               case '*'  :
              if(result === 0){
                result = 1;
              }
              
              result  *=arguments[i];
            break;
               case '/'  :
              if(result === 0){
                result = 1;
              }
              result  /=arguments[i];
            break;
              default :
              result = 0;
          }
        
        
      }
     
 return result;
           
      
}
 console.log(calcola('/', 2, 3 ,4, 5));

//console.log(calcola());

Oggetto arguments delle funzioni javascript
02:54

Utilizzo di una funzione per eseguire delle operazioni matematiche semplici con argomenti variabili

Funzione con parametri variabili
09:30

Scope: Visibilità delle variabili in javascript 

Una variabile dichiarata con var in una funzione , ha visibilità solo all'interno della funzione e può essere vista da funzioni annidate. 

Le variabili di una funzione annidata non possono essere vista dalla funzione parent.

Le variabili ( e le funzioni) vengono portate come dichiarazione in alto all'inizio della funzione anche se sono state dichiarate dopo. 

//Variable scope
var userName ='Test';
//console.log(window.userName);
//console.log(userName);

function testVar(){
   console.log(userName);
  var userName ='Test2' ;
    console.log(userName);
  
   function internalFunc(){
     var interVar ='2';
     console.log(userName);
     console.log(interVar);
   }
  
  return internalFunc;
  
}
var func = testVar();

//console.log(func);
func();
console.log(userName);


Scope: Visibilità delle variabili in javascript
04:12

Le closure in javascript. Funzioni interne privilegiate:

La funzione internalFunc, avrà visibilità sulle variabili della funzione padre, testVar,

anche dopo che testVar è stata eseguita:

//Variable scope
var userName ='Test';
//console.log(window.userName);
//console.log(userName);

function testVar(){
   console.log(userName);
  var userName ='Test2' ;
    console.log(userName);
  
   function internalFunc(){
     var interVar ='2';
     console.log(userName);
     console.log(interVar);
   }
  
  return internalFunc;
  
}
var func = testVar();

console.log('output dalla funzione interna');
func();
//console.log(userName);


Funzioni annidate in javascript.
02:10

Le closure in javascript. Funzioni interne privilegiate:

La funzione internalFunc, avrà visibilità sulle variabili della funzione padre, testVar,

anche dopo che testVar è stata eseguita:

//Variable scope var userName ='Test'; //console.log(window.userName); //console.log(userName);

function testVar(){    console.log(userName);   var userName ='Test2' ;     console.log(userName);       function internalFunc(){      var interVar ='2';      console.log(userName);      console.log(interVar);    }      return internalFunc;    } var func = testVar();

console.log('output dalla funzione interna'); func(); //console.log(userName);


Preview 02:25

Riassunto dello scope e closure

Scope e closure in javascript: Conclusione
01:09

Passare un

Passare una funzione ad un'altra funzione.

 Le funzioni in javascript sono cittadini di prima classe: Possono essere passate ad un'altra funzione come argomento. In questo caso viene passato un riferimento alla funzione:

//Function as parameter

function outPutObject(obj){
  
  for(var i in obj){
         if(obj.hasOwnProperty(i))
      console.log(i+'='+obj[i]);
  }
  
}

function processObject(myObject, callback){
  
         callback(myObject);
          callback.testFunction = function(){
            console.log('Chiamato  testFunction');
          };
      
}

var objTest = {name:'Test', lastName:'Test2', age:36};

processObject(objTest,outPutObject );

outPutObject.testFunction();

Passare una funzione ad un'altra funzione.
05:49

Espressione di funzione: Differenze con le dichiarazioni di funzioni:

 Quando si dichiara una funzione come:

function testFunc(){

}

la possiamo chiamare prima della sua dichiarazione.

Se la dichiariamo come una espressione:

 var testFunc = function(){

}

non la possiamo chiamare prima dell'assegnazione perché è vero che la dichiarazione viene portata in alto dal parse di javascript(hoisting) ma il suo valore sarebbe undefined e avremmo un errore:

// FUNCTION EXPRESSIONS

//functionName(); 

testFunction();

var funcName = function testFunc(){    

  console.log('test');  

  } ;

function testFunction(){ 

  console.log('test func');

}


Espressione di funzione: Differenze con le dichiarazioni di funzioni
05:01

Espressioni di funzione invocate immediatamente (IIFE). Vedremo come utlizzare le IIFE

per creare uno scope privato e non inquinare l'oggeto globale window:

 (function iife(param1){  

  var testVar =' iiee';   

  console.log('test = '+ param1); 

  }  )  ('Test var'); 

   // iife();

  console.log(typeof iife);

la funzione iife non esiste nell'oggetto globale.

Viene eseguita immediatamente e tutto quello che c'è dentro rimane privato e scompare dopo l'invocazione

Espressioni di funzione invocate immediatamente (IIFE)
07:17

Le arrow function sono delle funzioni anonime che non impostano uno scope this proprio ma quello dell'enterno dove si trovano. Hanno una sintassi più ridotta e sono molto comode da usare dove occorre passare una funzione di callback:

var  test2 = (arg1, arg2) => {
  console.log(arg1);
    return  arg1*arg2;
}

var test3 = () => 2+2;

var test4 = (arg1, arg2) => arg1+ arg2;

var test5 = arg1 => arg1*2;
var test6 = arg1 => {
  
     console.log('tes');
    return arg1*2;
}

console.log(test5(7));

Arrow functions. prima parte
06:28

Vediamo degli esempi su come usare le fat arrow function per processare degli array

Arrow function, scope e this
09:04
Potete dichiarare la funzione come dichiarazione o espressione. Ricordate di rispettare maiuscolo e minuscolo nel nome. Riceve due parametri e ritorna il loro prodotto
Creare una funzione col nome calcolaArea , che riceve due parametri e ritorna il loro prodotto
1 question
Vediamo come dichiarare una variabile locale in una funzione che "oscura" una variabile globale
Variabili locali nelle funzioni
1 question
In questo esercizio vedremo come passare una funzione ad un'altra funzione, invocandola all'interno e ritornando il suo risultato
Funzioni passate come parametro
1 question
+ Object Oriented Programming. Oggetti e classi in javascript
5 lectures 43:35

Vediamo cosa sono gli oggetti, le loro proprietà e come crearli in jvascript:

var obj = new Object();

var obj2 = [];

Introduzione agli oggetti in javascript
10:00

Vediamo come costruire un oggetto letterale usando il costrutto:

var dog = {

 name : 'Laika'

};

Preview 05:05

il costrutto this   in javascript fa riferimento al contesto in cui viene chiamata la funzione o metodo di un oggetto.

Se viene usato in object literal, allora sarà quell'oggetto, se viene usato dentro a un funzione, allora se la funzione viene chiamata con l'operatore new, sarà il contesto dell'oggetto creato. Se la funzione viene invocata con bind oppure call, this farà riferimento al primo parametro passato.

Finalmente, se non c'è un altro contesto, allora sarà il this dell'oggetto globale dove si trova la funzione

Scope nelle funzioni. Cos'è this in javascript. Ambiente di esecuzione
07:36

Funzione come costruttore di oggetti: new e this in javascript:

function Person(name){

 this.name = name;

}

var aPerson = new Person('John');

Funzione come costruttore di oggetti: new e this in javascript
09:26

Oggetto prototype. Estendere oggetti utilizzando il paradigma prototype:

Se usiamo una funzione per costruire degli oggetti:

function Animal(name){       this.name = name || 'Unknown';      this.type='An animal';     this.abitat ='Terra'; }

Animal.prototype.legs =4;

var dog = new Animal('Dog');    dog.legs = 4; // console.log(dog.name);

var horse = new Animal('horse');

var spider = new Animal('spider');

Aggiungendo delle nuove proprietà al prototype della funzione:

Animal.prototype.nomeProprieta = valoreproprietà; // qualunque tipo di variabile

Tutti gli oggetti esistenti e che si creeranno, erediteranno tutte le proprietà aggiunte al prototype della funzione che li crea

Oggetto prototype. Estendere oggetti utilizzando il paradigma prototype
11:28
Verifichiamo come creare oggetti ed assegnare delle proprietà
Dichiarazione di oggetti
1 question
+ Map, Set, AJAX e JSON in javascript
3 lectures 23:57
Oggetti predefinito JSON
06:42
AJAX e JSON: Fare una chiamata AJAX ad uno script php e ricevere un json
13:20

AJAX e JSON:  Fare una chiamata AJAX ad uno script php e ricevere un json  e processarlo con la funzione JSON.stringify

AJAX e JSON: Passare un JSON ad uno script PHP
03:55
+ Oggetti Map e Set
2 lectures 19:22

Oggetto map

Oggetto map
09:00

Oggetto Set

Oggetto Set
10:22
+ Le classi in javascript ES6
3 lectures 21:01

Le classi in javascript:

class NomeClasse {

      constructor(param1, param2){   // costruttore della classe

     this.param1 = param1;

this.param2 = param2;

}

 unAltroMetodo(){

   return "sono un altro metodo";

}

}

var miObject = new NomeClasse();

Le classi in javascript ES6
08:04

Per estendere una classe si  usa la parola chiave  extends e poi si mette la classe estesa.

Ricordarsi che le classi, a differenza di una funzione bisogna prima dichiarle prima di utlizzarle:

// js6 CLASS, extends, super

class Enemy{
  
        constructor(type='Alien', lives =12){
           this.type = type;
           this.lives = lives;
        }
     shout(){
      return 'grrrrrrrr!' ;
     }
      static getType(){
            return 'Enemy';
          }
}

//var enemy1 =new Enemy();
//console.log(enemy1.lives);

  class Creepers  extends Enemy {
    
        constructor(type ='Creeper', lives = 20){
          
             
                    
            super(type, lives);
          
          this.health = 60;
          
        
          
        }
      static getType(){
          return super.getType()+ ', Creeper';
       ;
          }
    
        shout(){
         // super.shout();
          //this.calledShout = true;
         
          console.log(super.shout()+',' + 'zzzzzzzzzzzzzzz');
        }
       
  }

var creeper =new Creepers('Creeper', 60);
console.log(Creepers.getType());
//creeper.getType();


Ereditarietà in ES6: Estendere una classe
08:59

Un metodo statico si crea aggiungendo static davanti al metodo e questo può essere chiamato senza dover instanziare la classe:

class Enemy{
  
        constructor(type='Alien', lives =12){
           this.type = type;
           this.lives = lives;
        }
     shout(){
      return 'grrrrrrrr!' ;
     }
      static getType(){
            return 'Enemy';
          }
}

console.log(Enemy.getType());

Metodi statici nella classi di ES6
03:58
+ Javascript ES6 :Promises
4 lectures 31:57
javascript ES6 : Introduzione alle Promise
01:50
javascript ES6 : Promise : resolve, reject, then e catch
11:10
javascript ES6 : Trasformare chiamate asincrone in Promise: Ajax
09:39
javascript ES6 : Ajax con promise
09:18
+ JAVASCRIPT ES6 FETCH API
3 lectures 27:56

FETCH API. Introduzione

FETCH API. Introduzione
03:14

Fetch API. Eseguire fetch, prelevare json e gestione degli errori

Fetch API. Eseguire fetch, prelevare json e gestione degli errori
16:09

Javascript ES6. Promise.all. Vediamo come chiamare in parallelo delle promise e avere il risultato quando tutte sono risolte

Javascript ES6. Promise.all . Chiamate in parallelo
08:33
Requirements
  • Avere fatto il corso base di javascript o conoscenza generale di programmazione di java , php, c++
  • Connession internet
  • Browser o Console di NODEJS
Description


Questo corso riempie una lacuna: la mancanza di una guida esaustiva e pratica di javascript es6-es7 in italiano dove ti insegno passo a passo, dall'A alla Z, tutti i segreti di javascript es6-es7. Imparerai  tutti i segreti di oggetti, funzioni, classi, fetch, promise, observable . 

Imparerai a programmare in TypeScript così da poter usare fin da subito tutte le novità di Javascript ES6 - ES7

Se vuoi sfruttare al massimo librerie come Jquery, Sencha, Angular, React  devi seguire un corso come questo che ti dia le fondamenta  per essere pronto alla programmazione avanzata con javascript.

Vedremo ogni tipo di variabili: numeri, stringhe, array ,funzioni, metodi, classi, arrow function

Studieremo le funzioni, come passare i parametri, lo scope delle funzioni, come dichiarare funzioni come espressione e come dichiarazione. Come passare una funziona ad un'altra funzione, ritornare una funzione.

Vedremo i segreti delle closure: funzioni annidate che dopo essere ritornate hanno accesso alle variabili private di una funzione.

Vedremo come si creano gli oggetti in javascript, come si estendono con il prototype

Vedremo come funziona l'ereditarietà in javascript.

Vedremo i nuovi costrutti di ES6 come let, const, parametri rest, il costrutto class.

Studieremo gli oggetti predefiniti di javascript come Math, Date, RegExp. e JSON

Studieremo l'oggetto XMLHttpRequest e vedremo come fare delle chiamate asincrone ad un server, AJAX.

Studieremo le Promise, come trasformare AJAX in Promise.

Impareremo le API di fetch e le combineremo in casi pratici con le Promise

 Impareremo con programmare in TypeScript, un superset di javascript:

  • I tipi di variabili come string, number, boolean, array, tuple, enum
  • funzioni con tipi di ritorno e argomenti tipificati
  • Le classi
  • Le interface
  • Estendere le classi

IMPAREREMO AD UTILIZZARE RXJS: REACTIVE PROGRAMMING

  • Observable
  • Observer
  • Operator

Tutto con esempi pratici

Il corso sarà in continuo aggiornamento ed includerá sempre le future novità di Javascript

Soprattutto ti farò da tutor per chiarirti qualunque dubbio e aiutarti a crescere nel mondo di javascript.

Ti aspetto!

Who this course is for:
  • Studenti che abbiano già una base di javascript
  • Chi voglia apporfondire concetti di javascript come closure, this, funzioni anonime
  • Chi ha esperienza in javascript ma non conosce le novità di ECMASCRIPT 2015
  • Chi vuole imparare typescript
  • Chi vuole imparare Reactive programming