Javascript ES6 : La guida mancante in italiano

Impara javascript ES6 puro e i suoi segreti, passo a passo passa da zero a esperto sia per il web che per NODEJS
4.4 (47 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.
230 students enrolled
$19
$195
90% off
Take This Course
  • Lectures 90
  • Exercises 6 coding exercises
  • Length 8.5 hours
  • Skill Level All Levels
  • 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 4/2016 Italian

Course Description

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 da zero fino a javascript 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 i cicli, le condizioni, tutti i tipi di operatori.

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.

Imparerai a manipolare il DOM di una pagina web.

Imparerai a gestire gli eventi degli elementi di una pagina web, i listener.

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?

  • Pc o Mac
  • Browser moderno come Chrome. Firefox, o IE10
  • Qualunque editor di testo o connessione internet per usare editor online
  • Conoscenza minima di html

What am I going to get from this course?

  • Passare da livello zero di javascript a livello intermedio-avanzato
  • Avere delle basi solide per poter utilizzare librerie come Angularjs, React, Jquery
  • Essere pronto a programmare javascript lato server con NODEJS, MONGODB
  • Conoscere le funzionalità core del linguaggio e capire i segreti di javascript
  • Usare le funzioni, funzioni anonime, callback
  • Processare array
  • Creare oggetti letterale, usando Object.create, funzioni e classi
  • Usare il prototype per estendere gli oggetti
  • Essere al corrente delle principali novità di javascript ES6

What is the target audience?

  • Chi voglia imparare Core javascript da zero e diventare esperto di javascript
  • Chi voglia avere delle basi solide per poter utlizzare Jquery, AngularJs ed altri framework
  • Chi conosce un po' di javascript ma non i perché e i suoi segreti
  • Sviluppatori web

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: Introduzione al corso
Cosa imparerai in questo corso
Preview
04:51
Section 2: Introduzione a Javascript
09:04

Possiamo includere javascript in una pagina web utilizzando il tag <script>.

Di solito, e consiglio, si include questo tag nel tag <head> della pagina web

Se il javascript si trova in un file separato, utilizziamo la seguente sintassi

<script src="percorsofile/nomeFile.js"></script>

Il percorso può essere relativo alla cartella, assoluto oppure in un altro dominio:

<script src="js/nomeFile.js"></script>

<script src="/scripts/nomeFile.js"></script>

<script src="http://www.miosito.com/js/nomeFile.js"></script>

Se lo script è inline, cioè nella stessa pagina, basta mettere:

<script>

// qui si aggiunge il codice

</script>


02:52

Vediamo come eseguire javascript direttamente nella console del browser.

 Quando aprite Chrome, Firefox o IE11 in su, premte il tasto f12 e vi comparirà la console di javascript dove poter scrivere del codice

03:30

EccoVi un editor di javascript online www.jsbin.com

09:19

Per commentare una singola riga, usate //

// questo è un commento

Per aggiungere più righe : /**/

/*

Questo è un commento

posso andare a capo e immettere qualunque teso

*

*

*/

Section 3: Variabili in Javascript
07:00

Le variabili in javascript devono cominciare con $, _ o una lettera, poi possono essere seguite da lettere, numeri e trattino basso _ .

Le variabili in javascript sono case sensitive:

var mioNome è diverso da var mionome; . Non si possono utlizzare parole riservate come nomer di variabili. Ade esempio:


abstractdoifpackage
doubleimplementsprivate
elseimportprotectedtransient
byteextendsinpublictrue
casefalseinstanceofreturntry
catchfinalintshortvar*
charfinallyinterfacestaticvoid
classfloatlongsuperwhile
const*fornativeswitchwith
continuefunctionnewsynchronized
defaultgotonullthis


1 question
Con questo esercizio cominciamo ad imparare come dichiarare delle variabili in javascript
08:55

Una variabile in javascript può contenere qualunque tipo di valore:

numero, stringa, array, oggetto, funzione.

Posso assegnare prima una stringa ma poi assegnare un oggetto, un array o qualunque altro tipo:

var test ;
// undefined
console.log(test+' => '+ typeof test);
// string
test ='Nome';
console.log(test +' => '+ typeof test);

// number
test = 42.2;
console.log(test +' => '+ typeof test);

// array
test =[4,5,66];
console.log(test +' => '+ typeof test);
// object
test = {name:'Hidran', lastname:'Arias'};
console.log(test.name+','+test.lastname +' => '+ typeof test);
// function
test = function(){
  return "test";
};
console.log(test+' => '+ typeof test);
console.log(test() +' => '+ typeof test);
// boolean
 test = true;
console.log(test +' => '+ typeof test);



Section 4: Variabili di tipo string
08:14

Una stringa in javascript non è altro che un elenco di caratteri racchiuso tra apici , ' ', oppure virgolette: ""

Le stringhe in javascript sono immutabile, cioè, una volta assegnata ad una variabili, non ci sono metodi che la possano modificare.

I metodi come toLowerCase, toUpperCase, substring, agiscono su una copia della stringa e ritornano una copia del valore originale modificato ma la stringa originale, rimane tale:

var nome ='Roberto';

 nome.toUppercase();  // ritorna ROBERTO ma nella variabile nome ci sarà ancora Roberto

02:05

In questa lezione vedremo i diversi metodi dell'oggetto string:

substr, replace, chartAt, toLowerCase, toUpperCase, indexOf

01:45

I metodi toUpperCase e toLowerCase transformano una stringa in maiusculo e minuscolo rispettivamente, ritornando il risultato. La stringa originale rimane immutata.

var nome="Paolo Rossi";

nome.toUpperCase(); // ritorna PAOLO ROSSI

console.log(nome); // ritorna Paolo Rossi perché rimane immutata

Stessa cosa vale per toLowerCase e tutti gli altri metodi dell'oggetto string

02:45

Si può accedere ad una stringa in javascript come se fosse un array:

var nome ="Paolo";

console.log(nome[0]);// ritorna P

Possiamo anche leggere un carattere col metodo charAt(posizione);

console.log(nome.charAt(0)); // Ritorna P

05:09

Con il metodo slice posso  leggere un pezzo di stringa da un inzio fino a un indice finale non includendo l'indice:

var test ='Viva la vida';

var viva = test.slice(0,4); // uscirà: Viva. Alla posizione 4 ( si conta da zero) ci sarebbe lo spazio

Con indexOf, posso sapere dove comincia una certa sottostringa che passo al metodo:

var posizioneLa = test.indexOf('la'); ritornerebbe 5

03:38

Il metodo substring legge una sotto stringa da un determinato indice ( non ammette negativi) e come secondo parametro l'indice fino a dove arrivare includendo il carattere in quella posizione

var test ='Il mio nome è nessuno';

var nome = test.substring(14,21); // ritornerebbe : nessuno

Con il metodo substr, passo l'indice dove comincia la stringa e poi quanti caratteri devo leggere:

 nome = test.substring(14,7); // ritornerebbe : nessuno

03:18

Il metodo search ci permette di cercare una stringa dentro un'altra stringa.

 Gli possiamo passare una stringa oppure una regular expression:

var test ='Nessuno sa quel che ha finché non lo perde';

var perde = test.search('perde');// ritorna 37.

Concatenare stringhe in javascript. Operatore + e metodo concat
05:11
Section 5: I numeri in javascript
Introduzione al tipo primitivo :number. Dichiarazioni e operazioni coi numeri
04:08
Operazioni con numeri decimali, esadecimali, binari e il costrutto NaN
05:16
Oggetto Number, casting e parsing di numeri in javascript
11:26
1 question
Con questo esercizio vediamo come dichiarare una variabile di dipo number, con un numero intero e un numero decimale
Section 6: Tipi primitivi null e undefined
Null e undefined
Preview
06:48
Section 7: Tipo di dato primitivo boolean
10:51

Una variabile di tipo boolean può avere i valori true o false

var isChecked = true;

var isSelected = false;

Nei cicli e nelle condizioni si fa il cast degli altri tipi di valore a boolean.

Tutto quello che non è  false, 0, null, undefined, '',""   è sempre true

Section 8: Gli array in javascript
06:12

Imparare a Creare array in javascript usando il costrutto new Array()

05:34

Studiamo un altro modo di costruire, creare degli array con il costrutto []

1 question
Possiamo creare un array con il costrutto new Array() oppure con []
03:51

Vedremo come ci si accede agli array per riferimento e non come una copia

03:29

Vedremo come la proprietà length negli array può allungare o accorciare un array e che la stessa è modificabile

Section 9: Metodo dell'oggetto array in javascript
00:34

convertire un array a una stringa

02:03

prelevare una fetta di array a partire da un determinato indice

01:08

ritornare i valori di un array concatenati come stringa

01:11

aggiungere un elemento all'inizio e fine di un array

03:45

Come aggiungere e rimuovere elementi da un array in una posizione determinata

01:31

Trovare l'indice di un elemento in un array

Il metodo filter degli array in javascript ES6
05:15
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
02:41
Article

Codice sorgente metodi foreach, filter, reduce some ed avery

Section 10: Operatori ed espressioni in Javascript
01:29

Vediamo in riassunto degli operatori ed espressioni che studieremo in questa sezione

07:31

Vediamo come utilizzare gli operatori matematici in javascript: +, -, *, / e %

Operatori matematici compatti in javascript
05:14
Operatori unari + e - in javascript
06:00
Operatori unari ++ e -- in javascript
05:14
09:50

Studieremo gli operatori relazionali in javascript: <,<=, >, >=, ==, !=;===, !==

10:24

Operatori relazionali in javascript: ==,===, !=;!==

06:12

Operatori relazionali in javascript: comparare stringhe, null, undefined

04:44

In questa lezione studieremo l'operatore logico &&

02:51

Vediamo in questa lezione l'operatore || (or)

04:08

Operatore logico ! (not)

Section 11: Istruzioni condizionali in javascript
02:17

Introduzione alle istruzioni condizionali e cicli in javascript


04:16

Condizione IF in javascript

09:52

Condizione IF, ELSE IF, ELSE in javascript

08:05

Costrutto SWITCH in javascript

Section 12: I cicli in javascript
06:48

Vediamo come utilizzare l'istruzione while per ciclare un array e fare l'output di un numero

minimo fino ad un numero massimo. 

06:40

Il ciclo while in javascript : Creare una combo dinamicamente

08:15

vediamo il ciclo for

Ciclare una array con for per creare checkbox dinamici
07:11
Section 13: Funzioni in javascript
02:04

Introduzione alle funzioni in javascript

04:28

Il minimo che occorre per dichiare 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 in javascript 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 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);


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
02:10

Funzioni annidate in javascript. 

Vediamo come le funzioni interne hanno accesso alle variabili della funzione padre

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

1 question
Vediamo come dichiarare una variabile locale in una funzione che "oscura" una variabile globale
05:49

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


1 question
In questo esercizio vedremo come passare una funzione ad un'altra funzione, invocandola all'interno e ritornando il suo risultato
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

Section 14: Object Oriented Programming. Oggetti e classi in javascript
10:00
Introduzione agli oggetti in javascript
09:26


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

function Person(name){

 this.name = name;

}

var aPerson = new Person('John');


05:05

Vediamo come costruire un oggetto letterale usando il costrutto:

var dog = {

 name : 'Laika'

};

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

In questa lezione studieremo lo Scope nelle funzioni. Cos'è this in javascript. Ambiente di esecuzione

Section 15: Oggetti predefiniti di javascript
06:59

Vediamo alcuni dei metodi dell'oggetto Math come abs, ceil, round, exp, pow

07:14

Vediamo come impostare una data, leggere diversi valori come anno, mese, giorno, ora, giorno

della settimana

06:42

Studieremo il formato JSON, i suoi metodi stringify e parse e i tipi di dati che

si possono trasmttere in json

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 16: ECMASCRIPT 2015/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();

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