Javascript ES6 Avanzato

Impara javascript ES6 puro e i suoi segreti. Impara ad usare le nuove caratteristiche ECMASCRIPT 2015
4.4 (6 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
32 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 38
  • Exercises 4 coding exercises
  • Length 3.5 hours
  • Skill Level Intermediate Level
  • Languages Italian
  • Includes Coding Exercises New!
    Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2016 Italian

Course Description

SE HAI PRESO IL MIO "JAVASCRIPT GUIDA MANCANTE" il contenuto di questo corso è già incluso!!!

Questo corso riempie una lacuna: la mancanza di una guida esaustiva e pratica di javascript in italiano dove ti insegno passo a passo, dall'A alla Z, tutti i segreti di javascript. Imparerai  tutti i segreti di oggetti, funzioni ECMASCRIPT 2015 conosciuto come ES6.

Se vuoi sfruttare al massimo librerie come Jquery, Sencha, Angularjs, 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.


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.

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

Il corso sarà in continuo aggiornamento e ci saranno degli esempi pratici e degli esercizi.

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

Ti aspetto!

What are the requirements?

  • Avere fatto il corso base di javascript o conoscenza generale di programmazione di java o c++
  • Connession internet
  • Browser o Console di NODEJS

What am I going to get from this course?

  • 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

What is the target audience?

  • 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Start Here
04:42

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

03:30

Tutto il codice che vedremo, tranne quando accediamo al DOM di una pagina oppure all'oggeto window del browser, può correre anche su nodejs.

Nel corso utilizzerò jsbin.com

Section 2: Manipolare e processare gli array in javascript es6
Il metodo filter degli array in javascript ES6
05:15
05:27

Il metodo foreach degli array in javascript ES6

Il metodo some e very degli array in javascript ES6
01:49
02:41
Il metodo reduce degli array in javascript ES6
Codice sorgente delle lezioni
Article
Section 3: Le funzioni in javascript
02:04

Introduzione alla definizione di una funzione

04:28

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();

05:51

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);


05:50

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));



02:54

// +, - , * , /
   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());

09:30

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

04:12

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);


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);


02:25

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);


01:09

Riassunto dello scope e closure

05:49

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();

05:01

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');

}


07:17

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

1 question
Potete dichiarare la funzione come dichiarazione o espressione. Ricordate di rispettare maiuscolo e minuscolo nel nome. Riceve due parametri e ritorna il loro prodotto
1 question
Vediamo come dichiarare una variabile locale in una funzione che "oscura" una variabile globale
1 question
In questo esercizio vedremo come passare una funzione ad un'altra funzione, invocandola all'interno e ritornando il suo risultato
Section 4: Object Oriented Programming. Oggetti e classi in javascript
10:00

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

var obj = new Object();

var obj2 = [];

05:05

Vediamo come costruire un oggetto letterale usando il costrutto:

var dog = {

 name : 'Laika'

};

09:26

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

function Person(name){

 this.name = name;

}

var aPerson = new Person('John');

11:28

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

07:36

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

1 question
Verifichiamo come creare oggetti ed assegnare delle proprietà
Section 5: ECMASCRIPT 2015 o ES6. Le nuove funzionalità di javascript ES6
08:04

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();

08:59

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();


03:58

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());

05:51

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 {}

08:55

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)


06:28

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));

09:04

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

09:53

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

Bonus Lecture : Interessanti offerte sugli altri corsi
Preview
Article
Section 6: AJAX e JSON in javascript es6
Oggetti predefinito JSON
06:42
AJAX e JSON: Fare una chiamata AJAX ad uno script php e ricevere un json
13:20
03:55

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

Section 7: Bonus Lecture . Altre lezioni e sconti ai miei corsi
Bonus Lecture . Altre lezioni e sconti ai miei corsi
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hidran Arias, Software Engineer

I'm a cuban living in the beautiful city of Turin, Italy. I have a university degree in computer sciences in the field of automation engineering. I am a software engineer since 2002 and since then I have worked for different italian companies developing web applications with the latest technogies, most of them open sources, such as PHP, MYSQL, ORACLE, CSS, HTML, NODEJS, MONGODB and javascript libraries such as EXTJS, SENCHATOUCH, JQUERY, ANGULARJS.

When I am not programming, I am learning new languages,currently German and Arabic. Currently I speak SPANISH, my mother tongue, ITALIAN,almost my second mother tongue, ENGLISH, FRENCH and PORTUGUESE.

Playing GUITAR is one of my hobbies and passions and I dedicate it as much time as for languages and computer.

People say I am an easy talker, always ready to help people and I love teaching what I know and mainly new technologies. I try to keep always up to date not only by teaching but also by learning and taking courses such as the ones found here in UDEMY .

Ready to start learning?
Take This Course