### Operatori Aritmetici
@ -179,7 +179,7 @@ console.log(
Nella programmazione si confrontano i valori, utilizzando gli operatori di confronto per confrontare due valori. Controlliamo se un valore è maggiore o minore o uguale a un altro valore.
**Esempio: Operatori di Confronto**
```js
@ -385,7 +385,7 @@ Questi non sono tutti i metodi delle finestre, ma avremo una sezione separata pe
Il tempo è una cosa importante. Vogliamo conoscere l'ora di una certa attività o evento. In JavaScript l'ora e la data corrente vengono create utilizzando l'oggetto Date di JavaScript. L'oggetto Date fornisce molti metodi per lavorare con la data e l'ora. I metodi che utilizziamo per ottenere informazioni sulla data e sull'ora dai valori di un oggetto Date iniziano con la parola _get_ perché forniscono le informazioni.
Si accede a ciascun elemento di un array utilizzando il suo indice. L'indice di un array parte da 0. L'immagine seguente mostra chiaramente l'indice di ciascun elemento dell'array.
- [Day 15](#day-15)
- [Classes](#classes)
- [Defining a classes](#defining-a-classes)
- [Class Instantiation](#class-instantiation)
- [Class Constructor](#class-constructor)
- [Default values with constructor](#default-values-with-constructor)
- [Class methods](#class-methods)
- [Properties with initial value](#properties-with-initial-value)
- [Classi](#classes)
- [Definire una classe](#defining-a-classes)
- [Instanzionare una Classe](#class-instantiation)
- [Costruttore della Classe](#class-constructor)
- [Valori di Default nel costruttore](#default-values-with-constructor)
- [Metodi di Classe](#class-methods)
- [Proprietà con valori iniziali](#properties-with-initial-value)
- [getter](#getter)
- [setter](#setter)
- [Static method](#static-method)
- [Inheritance](#inheritance)
- [Overriding methods](#overriding-methods)
- [Metodo Statico](#static-method)
- [Inheritance (Ereditarietà)](#inheritance)
- [Override dei metodi](#overriding-methods)
- [Esercizi](#exercises)
- [Esercizi Livello 1](#exercises-level-1)
- [Esercizi Livello 2](#exercises-level-2)
@ -38,17 +38,17 @@
# Day 15
## Classes
## Classi
JavaScript is an object oriented programming language. Everything in JavScript is an object, with its properties and methods. We create class to create an object. A Class is like an object constructor, or a "blueprint" for creating objects. We instantiate a class to create an object. The class defines attributes and the behavior of the object, while the object, on the other hand, represents the class.
JavaScript è un linguaggio di programmazione orientato agli oggetti. Tutto in JavaScript è un oggetto, con le sue proprietà e i suoi metodi. Per creare un oggetto, creiamo una classe. Una classe è come un costruttore di oggetti, o un "progetto" per la creazione di oggetti. Istanziamo una classe per creare un oggetto. La classe definisce gli attributi e il comportamento dell'oggetto, mentre l'oggetto, d'altra parte, rappresenta la classe.
Once we create a class we can create object from it whenever we want. Creating an object from a class is called class instantiation.
Una volta creata una classe, possiamo creare oggetti da essa ogni volta che vogliamo. La creazione di un oggetto da una classe si chiama istanziazione della classe.
In the object section, we saw how to create an object literal. Object literal is a singleton. If we want to get a similar object , we have to write it. However, class allows to create many objects. This helps to reduce amount of code and repetition of code.
Nella sezione dedicata agli oggetti, abbiamo visto come creare un letterale di oggetto. L'oggetto letterale è un singleton. Se vogliamo ottenere un oggetto simile, dobbiamo scriverlo. Tuttavia, le classi consentono di creare molti oggetti. Questo aiuta a ridurre la quantità di codice e la sua ripetizione.
### Defining a classes
### Definire una classe
To define a class in JavaScript we need the keyword _class_ , the name of a class in **CamelCase** and block code(two curly brackets). Let us create a class name Person.
Per definire una classe in JavaScript è necessaria la parola chiave _class_, il nome della classe in **CamelCase** e il codice di blocco (due parentesi graffe). Creiamo una classe di nome Persona.
```sh
// syntax
@ -66,13 +66,13 @@ class Person {
}
```
We have created an Person class but it does not have any thing inside.
Abbiamo creato una classe Person, ma non ha nulla al suo interno.
### Class Instantiation
### Instanzionare una Classe
Instantiation class means creating an object from a class. We need the keyword _new_ and we call the name of the class after the word new.
Istanziare una classe significa creare un oggetto da una classe. Abbiamo bisogno della parola chiave _new_ e chiamiamo il nome della classe dopo la parola new.
Let us create a dog object from our Person class.
Creiamo un oggetto cane dalla nostra classe Persona.
```js
class Person {
@ -86,15 +86,15 @@ console.log(person)
Person{}
```
As you can see, we have created a person object. Since the class did not have any properties yet the object is also empty.
Come si può vedere, abbiamo creato un oggetto persona. Poiché la classe non ha ancora alcuna proprietà, anche l'oggetto è vuoto.
Let use the class constructor to pass different properties for the class.
Utilizziamo il costruttore della classe per passare diverse proprietà alla classe.
### Class Constructor
### Costruttore della Classe
The constructor is a builtin function which allows as to create a blueprint for our object. The constructor function starts with a keyword constructor followed by a parenthesis. Inside the parenthesis we pass the properties of the object as parameter. We use the _this_ keyword to attach the constructor parameters with the class.
Il costruttore è una funzione integrata che consente di creare un blueprint per il nostro oggetto. La funzione costruttore inizia con la parola chiave constructor seguita da una parentesi. All'interno della parentesi si passano le proprietà dell'oggetto come parametro. Utilizziamo la parola chiave _this_ per associare i parametri del costruttore alla classe.
The following Person class constructor has firstName and lastName property. These properties are attached to the Person class using _this_ keyword. _This_ refers to the class itself.
Il seguente costruttore della classe Person ha le proprietà firstName e lastName. Queste proprietà sono allegate alla classe Person utilizzando la parola chiave _this_. _This_ si riferisce alla classe stessa.
```js
class Person {
@ -114,7 +114,7 @@ console.log(person)
Person{firstName: undefined, lastName:undefined}
```
All the keys of the object are undefined. When ever we instantiate we should pass the value of the properties. Let us pass value at this time when we instantiate the class.
Tutte le chiavi dell'oggetto sono indefinite. Quando si istanzia l'oggetto, si deve passare il valore delle proprietà. Passiamo il valore in questo momento, quando istanziamo la classe.
As we have stated at the very beginning that once we create a class we can create many object using the class. Now, let us create many person objects using the Person class.
Come abbiamo detto all'inizio, una volta creata una classe, possiamo creare molti oggetti utilizzando la classe. Ora, creiamo molti oggetti persona usando la classe Person.
Using the class Person we created three persons object. As you can see our class did not many properties let us add more properties to the class.
Utilizzando la classe Persona abbiamo creato tre oggetti persona. Come si può vedere, la nostra classe non ha molte proprietà, ma possiamo aggiungere altre proprietà alla classe.
The constructor inside a class is a builtin function which allow us to create a blueprint for the object. In a class we can create class methods. Methods are JavaScript functions inside the class. Let us create some class methods.
Il costruttore all'interno di una classe è una funzione incorporata che ci permette di creare un progetto per l'oggetto. In una classe possiamo creare metodi di classe. I metodi sono funzioni JavaScript all'interno della classe. Creiamo alcuni metodi della classe.
```js
class Person {
@ -246,9 +246,9 @@ Asabeneh Yetayeh
test.js:19 Lidiya Tekle
```
### Properties with initial value
### Proprietà con valori iniziali
When we create a class for some properties we may have an initial value. For instance if you are playing a game, you starting score will be zero. So, we may have a starting score or score which is zero. In other way, we may have an initial skill and we will acquire some skill after some time.
Quando creiamo una classe per alcune proprietà possiamo avere un valore iniziale. Per esempio, se si sta giocando, il punteggio iniziale sarà zero. Quindi, possiamo avere un punteggio iniziale o un punteggio che è zero. In altri termini, potremmo avere un'abilità iniziale e acquisirla dopo qualche tempo.
```js
class Person {
@ -284,11 +284,11 @@ console.log(person2.skills)
[]
```
A method could be regular method or a getter or a setter. Let us see, getter and setter.
Un metodo può essere un metodo normale, un getter o un setter. Vediamo i metodi getter e setter.
### getter
The get method allow us to access value from the object. We write a get method using keyword _get_ followed by a function. Instead of accessing properties directly from the object we use getter to get the value. See the example bellow
Il metodo get ci consente di accedere al valore dell'oggetto. Scriviamo un metodo get usando la parola chiave _get_ seguita da una funzione. Invece di accedere alle proprietà direttamente dall'oggetto, usiamo getter per ottenere il valore. Vedere l'esempio seguente
```js
class Person {
@ -332,7 +332,7 @@ console.log(person2.getSkills)
### setter
The setter method allow us to modify the value of certain properties. We write a setter method using keyword _set_ followed by a function. See the example bellow.
Il metodo setter ci consente di modificare il valore di alcune proprietà. Scriviamo un metodo setter usando la parola chiave _set_ seguita da una funzione. Si veda l'esempio qui sotto.
```js
class Person {
@ -390,7 +390,7 @@ console.log(person2.skills)
["Planning", "Managing", "Organizing"]
```
Do not be puzzled by the difference between regular method and a getter. If you know how to make a regular method you are good. Let us add regular method called getPersonInfo in the Person class.
Non lasciatevi ingannare dalla differenza tra un metodo regolare e un getter. Se sapete come creare un metodo regolare, siete a posto. Aggiungiamo un metodo regolare chiamato getPersonInfo nella classe Person.
```js
class Person {
@ -469,9 +469,9 @@ Lidiya Tekle is 28. He lives Espoo, Finland. He knows Planning, Managing and Org
John Doe is 50. He lives Mars city, Mars.
```
### Static method
### Metodo Statico
The static keyword defines a static method for a class. Static methods are not called on instances of the class. Instead, they are called on the class itself. These are often utility functions, such as functions to create or clone objects. An example of static method is _Date.now()_. The _now_ method is called directly from the class.
La parola chiave static definisce un metodo statico per una classe. I metodi statici non vengono richiamati sulle istanze della classe. Vengono invece richiamati sulla classe stessa. Si tratta spesso di funzioni di utilità, come quelle per creare o clonare oggetti. Un esempio di metodo statico è _Date.now()_. Il metodo _now_ viene richiamato direttamente dalla classe.
```js
class Person {
@ -549,9 +549,9 @@ Node
The static methods are methods which can be used as utility functions.
## Inheritance
## Inheritance (Ereditarietà)
Using inheritance we can access all the properties and the methods of the parent class. This reduces repetition of code. If you remember, we have a Person parent class and we will create children from it. Our children class could be student, teach etc.
Utilizzando l'ereditarietà, possiamo accedere a tutte le proprietà e ai metodi della classe madre. Questo riduce la ripetizione del codice. Se ricordate, abbiamo una classe genitore Persona e da questa creeremo dei figli. I nostri figli potrebbero essere studenti, insegnanti, ecc.
```js
// syntax
@ -560,7 +560,7 @@ class ChildClassName extends {
}
```
Let us create a Student child class from Person parent class.
Creiamo una classe figlio Student dalla classe genitore Person.
Asabeneh Yetayeh is Finland. He lives Helsinki, 250.
```
### Overriding methods
### Override dei metodi
As you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. Inside the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden.
Come si può vedere, riusciamo ad accedere a tutti i metodi della classe Person e li utilizziamo nella classe figlio Student. Possiamo personalizzare i metodi dei genitori e aggiungere proprietà aggiuntive a una classe figlio. Se vogliamo personalizzare i metodi e aggiungere proprietà aggiuntive, dobbiamo utilizzare la funzione costruttore anche per la classe figlio. All'interno della funzione costruttore chiamiamo la funzione super() per accedere a tutte le proprietà della classe genitore. La classe Person non aveva il genere, ma ora diamo la proprietà gender alla classe figlio, Student. Se lo stesso nome del metodo viene utilizzato nella classe figlio, il metodo genitore verrà sovrascritto.
Lidiya Tekle is 28. She lives in Helsinki, Finland. He knows Planning, Managing and Organizing
```
Now, the getPersonInfo method has been overridden and it identifies if the person is male or female.
Ora, il metodo getPersonInfo è stato sovrascritto e identifica se la persona è maschio o femmina.
🌕 You are excelling. Now, you knew class and you have the power to turn everything to an object. You made it to half way to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 Stai eccellendo. Ora conosci la classe e hai il potere di trasformare tutto in un oggetto. Hai raggiunto la metà della tua strada verso la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli.
## Esercizi
### Esercizi Livello 1
1. Create an Animal class. The class will have name, age, color, legs properties and create different methods
2. Create a Dog and Cat child class from the Animal Class.
1. Creare una classe Animale. La classe avrà le proprietà nome, età, colore, zampe e creerà diversi metodi.
2. Creare una classe figlio Cane e Gatto dalla classe Animale.
### Esercizi Livello 2
1. Override the method you create in Animal class
1. Sovrascrivere il metodo creato nella classe Animale
### Esercizi Livello 3
1. Let's try to develop a program which calculate measure of central tendency of a sample(mean, median, mode) and measure of variability(range, variance, standard deviation). In addition to those measures find the min, max, count, percentile, and frequency distribution of the sample. You can create a class called Statistics and create all the functions which do statistical calculations as method for the Statistics class. Check the output below.
1. Proviamo a sviluppare un programma che calcoli la misura della tendenza centrale di un campione (media, mediana, modalità) e la misura della variabilità (intervallo, varianza, deviazione standard). Oltre a queste misure, trova il minimo, il massimo, il numero, il percentile e la distribuzione di frequenza del campione. È possibile creare una classe chiamata Statistica e creare tutte le funzioni che eseguono calcoli statistici come metodi per la classe Statistica. Verificate l'output qui sotto.
1. Create a class called PersonAccount. It has firstname, lastname, incomes, expenses properties and it has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance methods. Incomes is a set of incomes and its description and expenses is also a set of expenses and its description.
1. Creare una classe chiamata PersonAccount. Ha le proprietà nome, cognome, reddito, spese e i metodi totalIncome, totalExpense, accountInfo, addIncome, addExpense e accountBalance. Le entrate sono un insieme di entrate e la loro descrizione e le spese sono anch'esse un insieme di spese e la loro descrizione.
- [Converting JSON to JavaScript Object](#converting-json-to-javascript-object)
- [Convertire un JSON in Oggetto JavaScript ](#converting-json-to-javascript-object)
- [JSON.parse()](#jsonparse)
- [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse)
- [Converting Object to JSON](#converting-object-to-json)
- [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify)
- [Usare una funzione reviver con JSON.parse()](#using-a-reviver-function-with-jsonparse)
- [Convertire un Oggetto in JSON](#converting-object-to-json)
- [Usare un Filter Array con JSON.stringify](#using-a-filter-array-with-jsonstringify)
- [Esercizi](#exercises)
- [Esercizi Livello 1](#exercises-level-1)
- [Esercizi Livello 2](#exercises-level-2)
@ -34,7 +34,7 @@
## JSON
JSON stands for JavaScript Object Notation. The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text or string only. JSON is a light weight data format for storing and transporting. JSON is mostly used when data is sent from a server to a client. JSON is an easier-to-use alternative to XML.
JSON è l'acronimo di JavaScript Object Notation. La sintassi JSON deriva dalla sintassi della notazione degli oggetti JavaScript, ma il formato JSON è solo testo o stringa. JSON è un formato di dati leggero per la memorizzazione e il trasporto. JSON viene utilizzato soprattutto quando i dati vengono inviati da un server a un client. JSON è un'alternativa più facile da usare rispetto a XML.
**Esempio:**
@ -63,9 +63,9 @@ JSON stands for JavaScript Object Notation. The JSON syntax is derived from Java
}
```
The above JSON example is not much different from a normal object. Then, what is the difference ? The difference is the key of a JSON object should be with double quotes or it should be a string. JavaScript Object and JSON are very similar that we can change JSON to Object and Object to JSON.
L'esempio JSON di cui sopra non è molto diverso da un normale oggetto. Allora, qual è la differenza? La differenza sta nel fatto che la chiave di un oggetto JSON deve essere con doppi apici o deve essere una stringa. Gli oggetti JavaScript e JSON sono molto simili, tanto che possiamo cambiare JSON in oggetto e oggetto in JSON.
Let us see the above example in more detail, it starts with a curly bracket. Inside the curly bracket, there is "users" key which has a value array. Inside the array we have different objects and each objects has keys, each keys has to have double quotes. For instance, we use "firstNaMe" instead of just firstName, however in object we use keys without double quotes. This is the major difference between an object and a JSON. Let's see more examples about JSON.
Vediamo in dettaglio l'esempio precedente, che inizia con una parentesi graffa. All'interno della parentesi graffa, c'è la chiave "utenti" che ha un array di valori. All'interno dell'array abbiamo diversi oggetti e ogni oggetto ha delle chiavi, ogni chiave deve avere i doppi apici. Per esempio, usiamo "firstNaMe" invece del semplice firstName, ma negli oggetti usiamo chiavi senza doppi apici. Questa è la differenza principale tra un oggetto e un JSON. Vediamo altri esempi di JSON.
**Esempio:**
@ -167,9 +167,9 @@ Let us see the above example in more detail, it starts with a curly bracket. Ins
}
```
### Converting JSON to JavaScript Object
### Convertire un JSON in Oggetto JavaScript
Mostly we fetch JSON data from HTTP response or from a file, but we can store the JSON as a string and we can change to Object for sake of demonstration. In JavaScript the keyword _JSON_ has _parse()_ and _stringify()_ methods. When we want to change the JSON to an object we parse the JSON using _JSON.parse()_. When we want to change the object to JSON we use_JSON.stringify()_.
In genere si recuperano dati JSON dalla risposta HTTP o da un file, ma è possibile memorizzare il JSON come stringa e, a scopo dimostrativo, trasformarlo in oggetto. In JavaScript la parola chiave _JSON_ ha i metodi _parse()_ e _stringify()_. Quando vogliamo cambiare il JSON in un oggetto, lo analizziamo usando _JSON.parse()_. Quando vogliamo cambiare l'oggetto in JSON, usiamo_JSON.stringify()_.
To use the reviver function as a formatter, we put the keys we want to format first name and last name value. Let us say, we are interested to format the firstName and lastName of the JSON data .
Per utilizzare la funzione reviver come formattatore, si inseriscono le chiavi con cui si vuole formattare i valori di nome e cognome. Supponiamo di essere interessati a formattare il nome e il cognome dei dati JSON.
The _JSON.parse()_ is very handy to use. You do not have to pass optional parameter, you can just use it with the required parameter and you will achieve quite a lot.
Il metodo _JSON.parse()_ è molto comodo da usare. Non è necessario passare un parametro opzionale, basta usarlo con il parametro richiesto e si otterrà molto.
### Converting Object to JSON
### Convertire un Oggetto in JSON
When we want to change the object to JSON we use _JSON.stringify()_. The stringify method takes one required parameter and two optional parameters. The replacer is used as filter and the space is an indentations. If we do not want to filter out any of the keys from the object we can just pass undefined.
Quando vogliamo cambiare l'oggetto in JSON, usiamo _JSON.stringify()_. Il metodo stringify accetta un parametro obbligatorio e due parametri opzionali. Il sostituente è usato come filtro e lo spazio è una rientranza. Se non si vuole filtrare nessuna delle chiavi dell'oggetto, si può passare semplicemente undefined.
Let us convert the following object to a string. First let use keep all the keys and also let us have 4 space indentation.
Convertiamo il seguente oggetto in una stringa. Per prima cosa manteniamo tutte le chiavi e manteniamo un'indentazione di 4 spazi.
```js
const users = {
@ -433,9 +433,9 @@ console.log(txt) // text means JSON- because json is a string form of an object.
}
```
### Using a Filter Array with JSON.stringify
### Usare un Filter Array con JSON.stringify
Now, lets use the replacer as a filter. The user object has long list of keys but we are interested only in few of them. We put the keys we want to keep in array as show in the example and use it the place of the replacer.
Ora, usiamo il replacer come filtro. L'oggetto utente ha un lungo elenco di chiavi, ma a noi interessano solo alcune di esse. Mettiamo le chiavi che vogliamo conservare in un array, come mostrato nell'esempio, e lo usiamo al posto del replacer.
```js
const user = {
@ -464,7 +464,7 @@ console.log(txt)
}
```
🌕 You are extraordinary. Now, you knew a light-weight data format which you may use to store data or to send it an HTTP server. You are 16 steps a head to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 Sei straordinario. Ora conosci un formato di dati leggero che puoi usare per memorizzare i dati o per inviarli a un server HTTP. Sei a 16 passi dalla tua strada verso la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli.
## Esercizi
@ -579,19 +579,19 @@ const txt = `{
### Esercizi Livello 1
1. Change skills array to JSON using JSON.stringify()
1. Stringify the age variable
1. Stringify the isMarried variable
1. Stringify the student object
1. Cambiare l'array di competenze in JSON usando JSON.stringify()
1. Stringere la variabile età
1. Stringere la variabile isMarried
1. Stringere l'oggetto studente
### Esercizi Livello 2
1. Stringify the students object with only firstName, lastName and skills properties
1. Stringificare l'oggetto studenti con le sole proprietà firstName, lastName e skills
### Esercizi Livello 3
1. Parse the *txt* JSON to object.
2. Find the user who has many skills from the variable stored in *txt*.
1. Analizzare il JSON *txt* in un oggetto.
2. Trovare l'utente che ha molte competenze dalla variabile memorizzata in *txt*.
- [Use case of Web Storages](#use-case-of-web-storages)
- [HTML5 Web Storage Objects](#html5-web-storage-objects)
- [Setting item to the localStorage](#setting-item-to-the-localstorage)
- [Getting item from localStorage](#getting-item-from-localstorage)
- [Clearing the localStorage](#clearing-the-localstorage)
- [Casi d'uso per il Web Storage](#use-case-of-web-storages)
- [Oggetti HTML5 Web Storage](#html5-web-storage-objects)
- [Impostare elementi nel localStorage](#setting-item-to-the-localstorage)
- [Ottenere elementi dal localStorage](#getting-item-from-localstorage)
- [Svuotare il localStorage](#clearing-the-localstorage)
- [Esercizi](#exercises)
- [Esercizi: Livello 1](#exercises-level-1)
- [Esercizi: Livello 2](#exercises-level-2)
@ -36,79 +36,79 @@
## HTML5 Web Storage
Web Storage(sessionStorage and localStorage) is a new HTML5 API offering important benefits over traditional cookies. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. The data storage limit of cookies in many web browsers is about 4 KB per cookie. We Storages can store far larger data (at least 5MB) and never transferred to the server. All sites from the same or one origin can store and access the same data.
Web Storage (sessionStorage e localStorage) è una nuova API HTML5 che offre importanti vantaggi rispetto ai cookie tradizionali. Prima di HTML5, i dati delle applicazioni dovevano essere memorizzati nei cookie, inclusi in ogni richiesta del server. La memorizzazione sul Web è più sicura e grandi quantità di dati possono essere memorizzate localmente, senza influire sulle prestazioni del sito web. Il limite di memorizzazione dei dati dei cookie in molti browser web è di circa 4 KB per cookie. We Storages può memorizzare dati molto più grandi (almeno 5 MB) e non vengono mai trasferiti al server. Tutti i siti della stessa o di una stessa origine possono memorizzare e accedere agli stessi dati.
The data being stored can be accessed using JavaScript, which gives you the ability to leverage client-side scripting to do many things that have traditionally involved server-side programming and relational databases. There are two Web Storage objects:
È possibile accedere ai dati memorizzati utilizzando JavaScript, che consente di sfruttare lo scripting lato client per fare molte cose che tradizionalmente richiedevano la programmazione lato server e i database relazionali. Esistono due oggetti Web Storage:
- sessionStorage
- localStorage
localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
localStorage è simile a sessionStorage, tranne per il fatto che mentre i dati memorizzati in localStorage non hanno scadenza, i dati memorizzati in sessionStorage vengono cancellati quando la sessione della pagina termina, cioè quando la pagina viene chiusa.
It should be noted that data stored in either localStorage or sessionStorage is specific to the protocol of the page.
Va notato che i dati memorizzati in localStorage o in sessionStorage sono specifici del protocollo della pagina.
The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).
Le chiavi e i valori sono sempre stringhe (si noti che, come per gli oggetti, le chiavi intere saranno automaticamente convertite in stringhe).
### sessionStorage
sessionStorage is only available within the browser tab or window session. It’s designed to store data in a single web page session. That means if the window is closed the session data will be removed. Since sessionStorage and localStorage has similar methods, we will focus only on localStorage.
sessionStorage è disponibile solo all'interno della sessione della scheda o della finestra del browser. È progettato per memorizzare i dati in una singola sessione della pagina web. Ciò significa che se la finestra viene chiusa, i dati della sessione vengono rimossi. Poiché sessionStorage e localStorage hanno metodi simili, ci concentreremo solo su localStorage.
### localStorage
The HTML5 localStorage is the para of the web storage API which is used to store data on the browser with no expiration data. The data will be available on the browser even after the browser is closed. localStorage is kept even between browser sessions. This means data is still available when the browser is closed and reopened, and also instantly between tabs and windows.
HTML5 localStorage è il para dell'API di archiviazione web che viene utilizzato per memorizzare i dati sul browser senza scadenza. I dati saranno disponibili sul browser anche dopo la sua chiusura. localStorage viene mantenuto anche tra le sessioni del browser. Ciò significa che i dati sono ancora disponibili quando il browser viene chiuso e riaperto e anche istantaneamente tra le schede e le finestre.
Web Storage data is, in both cases, not available between different browsers. For example, storage objects created in Firefox cannot be accessed in Internet Explorer, exactly like cookies. There are five methods to work on local storage:
I dati di Web Storage, in entrambi i casi, non sono disponibili tra i diversi browser. Ad esempio, gli oggetti di memorizzazione creati in Firefox non sono accessibili in Internet Explorer, esattamente come i cookie. Esistono cinque metodi per lavorare sull'archiviazione locale:
- saving products that the user places in his shopping cart
- data can be made available between page requests, multiple browser tabs, and also between browser sessions using localStorage
- can be used offline completely using localStorage
- Web Storage can be a great performance win when some static data is stored on the client to minimize the number of subsequent requests. Even images can be stored in strings using Base64 encoding.
- can be used for user authentication method
- memorizzare temporaneamente i dati
- salvare i prodotti che l'utente inserisce nel suo carrello della spesa
- i dati possono essere resi disponibili tra le richieste di pagina, tra più schede del browser e anche tra le sessioni del browser utilizzando localStorage
- possono essere utilizzati completamente offline utilizzando localStorage.
- Il Web Storage può essere un grande vantaggio in termini di prestazioni quando alcuni dati statici vengono memorizzati sul client per ridurre al minimo il numero di richieste successive. Anche le immagini possono essere memorizzate in stringhe utilizzando la codifica Base64.
- può essere usato per il metodo di autenticazione dell'utente
For the examples mentioned above, it makes sense to use localStorage. You may be wondering, then, when we should use sessionStorage.
Per gli esempi sopra citati, ha senso usare localStorage. Ci si potrebbe chiedere, allora, quando si dovrebbe usare sessionStorage.
In cases, we want to to get rid of the data as soon as the window is closed. Or, perhaps, if we do not want the application to interfere with the same application that’s open in another window. These scenarios are served best with sessionStorage.
Nel caso in cui si voglia sbarazzarsi dei dati non appena la finestra viene chiusa. Oppure, se non si vuole che l'applicazione interferisca con la stessa applicazione aperta in un'altra finestra. Questi scenari sono meglio serviti con sessionStorage.
Now, let us see how make use of these Web Storage APIs.
Vediamo ora come utilizzare queste API di Web Storage.
## HTML5 Web Storage Objects
## Oggetti HTML5 Web Storage
HTML web storage provides two objects for storing data on the client:
Il web storage HTML fornisce due oggetti per la memorizzazione dei dati sul client:
- window.localStorage - stores data with no expiration date
- window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)Most modern browsers support Web Storage, however it is good to check browser support for localStorage and sessionStorage. Let us see the available methods for the Web Storage objects.
- window.localStorage - memorizza i dati senza data di scadenza
- window.sessionStorage - memorizza i dati per una sessione (i dati vengono persi quando la scheda del browser viene chiusa)La maggior parte dei browser moderni supporta Web Storage, tuttavia è bene verificare il supporto del browser per localStorage e sessionStorage. Vediamo i metodi disponibili per gli oggetti Web Storage.
Web Storage objects:
Oggetti Web Storage:
- _localStorage_ - to display the localStorage object
- _localStorage.clear()_ - to remove everything in the local storage
- _localStorage.setItem()_ - to store data in the localStorage. It takes a key and a value parameters.
- _localStorage.getItem()_ - to display data stored in the localStorage. It takes a key as a parameter.
- _localStorage.removeItem()_ - to remove stored item form a localStorage. It takes key as a parameter.
- _localStorage.key()_ - to display a data stored in a localStorage. It takes index as a parameter.
- _localStorage_ - per visualizzare l'oggetto localStorage
- _localStorage.clear()_ - per rimuovere tutto ciò che è presente nel localStorage
- _localStorage.setItem()_ - per memorizzare i dati nel localStorage. Richiede i parametri chiave e valore.
- _localStorage.getItem()_ - per visualizzare i dati memorizzati nel localStorage. Richiede una chiave come parametro.
- _localStorage.removeItem()_ - per rimuovere un elemento memorizzato dal localStorage. Richiede la chiave come parametro.
- _localStorage.key()_ - per visualizzare un dato memorizzato in un localStorage. Richiede l'indice come parametro.
### Setting item to the localStorage
### Impostare elementi nel localStorage
When we set data to be stored in a localStorage, it will be stored as a string. If we are storing an array or an object, we should stringify it first to keep the format unless otherwise we lose the array structure or the object structure of the original data.
Quando si impostano i dati da memorizzare in un localStorage, questi vengono memorizzati come stringa. Se stiamo memorizzando un array o un oggetto, dovremmo prima stringare per mantenere il formato, a meno che non si perda la struttura dell'array o dell'oggetto dei dati originali.
We store data in the localStorage using the _localStorage.setItem_ method.
I dati vengono memorizzati nel localStorage utilizzando il metodo _localStorage.setItem_.
```js
//syntax
localStorage.setItem('key', 'value')
```
- Storing string in a localStorage
- Memorizzazione di stringhe in un localStorage
```js
localStorage.setItem('firstName', 'Asabeneh') // since the value is string we do not stringify it
- Storing an array in a localStorage. If we are storing an array, an object or object array, we should stringify the object first. See the example below.
- Memorizzazione di un array in un localStorage. Se si memorizza un array, un oggetto o un array di oggetti, occorre prima stringere l'oggetto. Vedere l'esempio seguente.
```js
const skills = ['HTML', 'CSS', 'JS', 'React']
@ -159,7 +159,7 @@ let skillJSON = JSON.stringify(skills)
localStorage.setItem('skills', skillJSON)
```
- Storing an object in a localStorage. Before we storage objects to a localStorage, the object has to be stringified.
- Memorizzazione di un oggetto in un localStorage. Prima di memorizzare gli oggetti in un localStorage, l'oggetto deve essere stringato.
As you can see the skill is in a string format. Let us use JSON.parse() to parse it to normal array.
Come si può vedere, l'abilità è in formato stringa. Utilizziamo JSON.parse() per analizzarla in un normale array.
```js
let skills = localStorage.getItem('skills')
@ -204,29 +204,29 @@ console.log(skillsObj)
['HTML','CSS','JS','React']
```
### Clearing the localStorage
### Svuotare il localStorage
The clear method, will clear everything stored in the local storage
Il metodo clear cancella tutto ciò che è memorizzato nella memoria locale.
```js
localStorage.clear()
```
🌕 You are determined .Now, you knew a Web Storages and you knew how to store small data on client browsers. You are 17 steps a head to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 Ora conosci un Web Storages e sai come memorizzare piccoli dati sui browser dei client. Sei a 17 passi dalla tua strada verso la grandezza. Ora fai qualche esercizio per il tuo cervello e per i muscoli.
## Esercizi
### Esercizi: Livello 1
1. Store you first name, last name, age, country, city in your browser localStorage.
1. Memorizzare nome, cognome, età, paese e città nel browser localStorage.
### Esercizi: Livello 2
1. Create a student object. The student object will have first name, last name, age, skills, country, enrolled keys and values for the keys. Store the student object in your browser localStorage.
1. Creare un oggetto studente. L'oggetto studente avrà nome, cognome, età, competenze, nazione, chiavi di iscrizione e valori per le chiavi. Memorizzare l'oggetto studente nel localStorage del browser.
### Esercizi: Livello 3
1. Create an object called personAccount. It has firstname, lastname, incomes, expenses properties and it has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance methods. Incomes is a set of incomes and its description and expenses is also a set of expenses and its description.
1. Creare un oggetto chiamato personAccount. Ha le proprietà nome, cognome, reddito, spese e i metodi totalIncome, totalExpense, accountInfo, addIncome, addExpense e accountBalance. Le entrate sono un insieme di entrate e la loro descrizione e le spese sono anch'esse un insieme di spese e la loro descrizione.
We human give or receive a promise to do some activity at some point in time. If we keep the promise we make others happy but if we do not keep the promise, it may lead discontentment. Promise in JavaScript has something in common with the above examples.
Noi esseri umani facciamo o riceviamo la promessa di svolgere un'attività in un determinato momento. Se manteniamo la promessa, rendiamo felici gli altri, ma se non la manteniamo, possiamo essere scontenti. La promessa in JavaScript ha qualcosa in comune con gli esempi precedenti.
A Promise is a way to handle asynchronous operations in JavaScript. It allows handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
Una promessa è un modo per gestire operazioni asincrone in JavaScript. Permette ai gestori di avere un valore di successo o un motivo di fallimento di un'azione asincrona. Ciò consente ai metodi asincroni di restituire valori come i metodi sincroni: invece di restituire immediatamente il valore finale, il metodo asincrono restituisce una promessa di fornire il valore in un momento futuro.
A Promise is in one of these states:
Una promessa si trova in uno di questi stati:
- pending: initial state, neither fulfilled nor rejected.
- fulfilled: meaning that the operation completed successfully.
- rejected: meaning that the operation failed.
- pending: stato iniziale, né soddisfatto né rifiutato.
- soddisfatta: significa che l'operazione è stata completata con successo.
- rifiutata: significa che l'operazione è fallita.
A pending promise can either be fulfilled with a value, or rejected with a reason (error). When either of these options happens, the associated handlers queued up by a promise's then method are called. (If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.)
Una promessa in sospeso può essere soddisfatta con un valore o rifiutata con un motivo (errore). Quando si verifica una di queste opzioni, vengono richiamati i gestori associati messi in coda dal metodo then di una promessa. (Se la promessa è già stata soddisfatta o rifiutata quando viene collegato un gestore corrispondente, il gestore verrà chiamato, in modo che non ci sia una condizione di gara tra il completamento di un'operazione asincrona e il collegamento dei suoi gestori).
As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained.
Poiché i metodi Promise.prototype.then() e Promise.prototype.catch() restituiscono promesse, possono essere concatenati.
## Callbacks
To understand promise very well let us understand callback first. Let's see the following callbacks. From the following code blocks you will notice, the difference between callback and promises.
Per comprendere bene la promise, dobbiamo prima capire le callback. Vediamo le seguenti callback. Dai seguenti blocchi di codice si noterà la differenza tra callback e promise.
- callback
Let us see a callback function which can take two parameters. The first parameter is err and the second is result. If the err parameter is false, there will not be error other wise it will return an error.
- callback
Vediamo una funzione di callback che può accettare due parametri. Il primo parametro è err e il secondo è result. Se il parametro err è false, non ci sarà alcun errore, altrimenti restituirà un errore.
In this case the err has a value and it will return the err block.
In questo caso err ha un valore e restituirà il blocco err.
```js
//Callback
@ -80,7 +80,7 @@ doSomething(callback)
It did not go well
```
In this case the err is false and it will return the else block which is the result.
In questo caso l'errore è falso e restituirà il blocco else che è il risultato.
```js
const doSomething = callback => {
@ -103,9 +103,9 @@ doSomething((err, result) => {
["HTML", "CSS", "JS"]
```
### Promise constructor
### Costruttore Promise
We can create a promise using the Promise constructor. We can create a new promise using the key word `new` followed by the word `Promise` and followed by a parenthesis. Inside the parenthesis, it takes a `callback` function. The promise callback function has two parameters which are the _`resolve`_ and _`reject`_ functions.
Possiamo creare una promessa utilizzando il costruttore Promise. Possiamo creare una nuova promessa usando la parola chiave `new` seguita dalla parola `Promise` e seguita da una parentesi. All'interno della parentesi, prende una funzione `callback`. La funzione di callback della promessa ha due parametri, che sono le funzioni _`resolve`_ e _`reject`_.
```js
// syntax
@ -139,8 +139,8 @@ doPromise
["HTML", "CSS", "JS"]
```
The above promise has been settled with resolve.
Let us another example when the promise is settled with reject.
La promessa di cui sopra è stata risolta con resolve.
Facciamo un altro esempio quando la promessa viene risolta con un rifiuto.
```js
// Promise
@ -168,7 +168,7 @@ Something wrong has happened
## Fetch API
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. In this challenge we will use fetch to request url and APIS. In addition to that let us see demonstrate use case of promises in accessing network resources using the fetch API.
L'API Fetch fornisce un'interfaccia per il recupero di risorse (anche attraverso la rete). Sembrerà familiare a chiunque abbia usato XMLHttpRequest, ma la nuova API fornisce un insieme di funzionalità più potenti e flessibili. In questa sfida useremo fetch per richiedere url e APIS. Inoltre, vedremo un caso d'uso dimostrativo delle promesse per accedere alle risorse di rete utilizzando l'API fetch.
```js
const url = 'https://restcountries.com/v2/all' // countries api
@ -183,7 +183,7 @@ fetch(url)
## Async and Await
Async and await is an elegant way to handle promises. It is easy to understand and it clean to write.
Async e await sono un modo elegante di gestire le promesse. È facile da capire e pulito da scrivere.
```js
const square = async function (n) {
@ -197,9 +197,9 @@ square(2)
Promise{<resolved>: 4}
```
The word _async_ in front of a function means that function will return a promise. The above square function instead of a value it returns a promise.
La parola _async_ davanti a una funzione significa che la funzione restituirà una promessa. La funzione quadrata di cui sopra, invece di un valore, restituisce una promessa.
How do we access the value from the promise? To access the value from the promise, we will use the keyword_await_.
Come si accede al valore della promessa? Per accedere al valore della promessa, utilizzeremo la parola chiave_await_.
```js
const square = async function (n) {
@ -213,9 +213,9 @@ console.log(value)
4
```
Now, as you can see from the above example writing async in front of a function create a promise and to get the value from a promise we use await. Async and await go together, one can not exist without the other.
Ora, come si può vedere dall'esempio precedente, scrivendo async davanti a una funzione si crea una promessa e per ottenere il valore da una promessa si usa await. Async e await vanno insieme, uno non può esistere senza l'altro.
Let us fetch API data using both promise method and async and await method.
Cerchiamo di recuperare i dati dell'API utilizzando sia il metodo promise che i metodi async e await.
- promise
@ -245,7 +245,7 @@ console.log('===== async and await')
fetchData()
```
🌕 You are real and you kept your promise and you reached to day 18. Keep your promise and settle the challenge with resolve. You are 18 steps ahead to your way to greatness. Now do some exercises for your brain and muscles.
🌕 Sei reale, hai mantenuto la tua promessa e sei arrivato al 18° giorno. Mantieni la tua promessa e affronta la sfida con determinazione. Sei 18 passi avanti verso la tua strada verso la grandezza. Ora fai qualche esercizio per il cervello e i muscoli.
JavaScript allows writing function inside an outer function. We can write as many inner functions as we want. If inner function access the variables of outer function then it is called closure.
JavaScript consente di scrivere una funzione all'interno di una funzione esterna. Possiamo scrivere tutte le funzioni interne che vogliamo. Se la funzione interna accede alle variabili della funzione esterna, si parla di chiusura.
🌕 You are making progress. Maintain your momentum, keep the good work. Now do some exercises for your brain and for your muscle.
🌕 State facendo progressi. Mantenete lo slancio, continuate a lavorare bene. Ora fate qualche esercizio per il cervello e per i muscoli.
## Esercizi
### Esercizi: Livello 1
1. Create a closure which has one inner function
1. Creare una chiusura che abbia una funzione interna
### Esercizi: Livello 2
1. Create a closure which has three inner functions
1. Creare una chiusura con tre funzioni interne
### Esercizi: Livello 3
1. Create a personAccount out function. It has firstname, lastname, incomes, expenses inner variables. It has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance inner functions. Incomes is a set of incomes and its description and expenses is also a set of expenses and its description.
1. Creare una funzione esterna PersonAccount. Ha le variabili interne nome, cognome, reddito e spese. Ha le funzioni interne totalIncome, totalExpense, accountInfo, addIncome, addExpense e accountBalance. Entrate è un insieme di entrate e relativa descrizione e spese è un insieme di spese e relativa descrizione.
- [Conventions use in 30DaysOfJavaScript](#conventions-use-in-30daysofjavascript)
- [Scrivere codice pulito](#writing-clean-code)
- [Guida allo stile in JavaScript](#javascript-style-guide)
- [Perché abbiamo bisogno di uno stile](#why-we-need-style-guide)
- [Guida allo stile Airbnb](#airbnb-javascript-style-guide)
- [Guida allo stile Standard JavaScript](#standard-javascript-style-guide)
- [Guida allo stile Google](#google-javascript-style-guide)
- [Convenzioni del codice JavaScript](#javascript-coding-conventions)
- [Convenzioni usate in 30DaysOfJavaScript](#conventions-use-in-30daysofjavascript)
- [Variables](#variables)
- [Arrays](#arrays)
- [Functions](#functions)
@ -36,68 +36,68 @@
# Day 20
## Writing clean code
## Scrivere codice pulito
### JavaScript Style Guide
### Guida allo stile in JavaScript
A JavaScript style guide is a set of standards that tells how JavaScript code should be written and organized. In this section, we will talk about JavaScript guides and how to write a clean code.
Una guida di stile JavaScript è un insieme di standard che indica come il codice JavaScript dovrebbe essere scritto e organizzato. In questa sezione parleremo delle guide JavaScript e di come scrivere un codice pulito.
JavaScript is a programming language and like human language it has syntax. The syntax of JavaScript has to be written following a certain style guideline for sake of convince and simplicity.
JavaScript è un linguaggio di programmazione e, come i linguaggi umani, ha una sintassi. La sintassi di JavaScript deve essere scritta seguendo una certa linea guida di stile, per motivi di convinzione e semplicità.
### Why we need style guide
### Perché abbiamo bisogno di uno stile
You have been coding alone for so long but now it seems to work in a team. It does not matter in anyway you write you code as long as it running, however when you work in team of 10 or 20 or more developer on one project and on the same code base, the code will be messy and hard to manage if there is no any guidelines to follow.
Avete codificato da soli per tanto tempo, ma ora sembra che dobbiate lavorare in team. Non importa in che modo scriviate il codice, purché funzioni, ma quando lavorate in un team di 10 o 20 o più sviluppatori su un progetto e sullo stesso codice base, il codice sarà disordinato e difficile da gestire se non ci sono linee guida da seguire.
You can develop your own guidelines and conventions or you can also adapt well developed guidelines. Let us the most common know guidelines.
Most common JavaScript Style Guides
È possibile sviluppare linee guida e convenzioni proprie o adattare linee guida ben sviluppate. Vediamo le linee guida più comuni.
Guida allo stile più comune in JavaScript
- Airbnb JavaScript Style Guide
- JavaScript Standard Style Guide
- Google JavaScript Style Guide
- Guida allo stile Airbnb
- Guida allo stile standard di JavaScript
- Guida allo stile Google
#### Airbnb JavaScript Style Guide
#### Guida allo stile Airbnb
Airbnb has one of the most popular JavaScript style guides on the internet. It covers nearly every aspect of JavaScript as well and it is adopted by many developer and companies. You may checkout the [Airbnb style guide](https://github.com/airbnb/javascript). I would also recommend to try it. Their style is very easy to use and simple to understand.
Airbnb ha una delle guide di stile JavaScript più popolari su Internet. Copre quasi tutti gli aspetti di JavaScript ed è adottata da molti sviluppatori e aziende. Potete consultare la [Guida allo stile di Airbnb](https://github.com/airbnb/javascript). Vi consiglio di provarla. Il loro stile è molto facile da usare e semplice da capire.
#### Standard JavaScript Style Guide
#### Guida allo stile Standard JavaScript
This is guideline is not as popular as Airbnb but it worth to look at it. They removed the semicolon in their [style guide](https://standardjs.com/).
Questa linea guida non è così popolare come Airbnb, ma vale la pena guardarla. Hanno rimosso il punto e virgola nel loro [style guide](https://standardjs.com/).
#### Google JavaScript Style Guide
#### Guida allo stile Google
I do not say much about Googles guideline and I did not use rather I would suggest you to have a look from this [link](https://google.github.io/styleguide/jsguide.html).
Non parlo molto delle linee guida di Google e non le ho usate, piuttosto vi suggerisco di dare un'occhiata a questo sito. [link](https://google.github.io/styleguide/jsguide.html).
### JavaScript Coding Conventions
### Convenzioni del codice JavaScript
In this challenge also we used the general JavaScript coding writing conventions and guides. Coding conventions are style guidelines for programming which are developed by an individual, a team or a company.
Anche in questa sfida abbiamo utilizzato le convenzioni e le guide generali di scrittura di JavaScript. Le convenzioni di codifica sono linee guida di stile per la programmazione sviluppate da un individuo, un team o un'azienda.
Coding conventions helps:
Le convenzioni di codifica aiutano a
- to write clean code
- to improve code readability
- to improve code re-useability and maintainability
- scrivere codice pulito
- migliorare la leggibilità del codice
- migliorare la riutilizzabilità e la manutenibilità del codice
Coding conventions includes
Le convenzioni di codifica comprendono
- Naming and declaration rules for variables
- Naming and declaration rules for functions
- Rules for the use of white space, indentation, and comments
- Programming practices and principles
- Regole di denominazione e dichiarazione per le variabili
- Regole di denominazione e dichiarazione per le funzioni
- Regole per l'uso degli spazi bianchi, dell'indentazione e dei commenti.
- Pratiche e principi di programmazione
#### Conventions use in 30DaysOfJavaScript
#### Convenzioni usate in 30DaysOfJavaScript
In this challenge we follow the regular JavaScript convention but I added also my preference of writing.
In questa sfida abbiamo seguito le normali convenzioni di JavaScript, ma ho aggiunto anche le mie preferenze di scrittura.
- We used camelCase for variables and functions.
- All variable names start with a letter.
- We chose to use *const* for constants, arrays, objects and functions. In stead of double quote, we chose to use single quote or backtick. Single quote is becoming trendy.
- We also removed semicolons from our code but it is a matter of personal preference.
- Space around arithmetic operators, assignment operators and after comma
- Arrow function instead of function declaration
- Explicit return instead of implicit return if the function is one liner
- No trailing comma in the last value of an object
- We prefer this +=, -=, *= /=, **= instead of the longer version
- When we use console.log() it is good to print with a tag string to identify from where the console is coming
- Abbiamo usato il camelCase per le variabili e le funzioni.
- Tutti i nomi delle variabili iniziano con una lettera.
- Abbiamo scelto di usare *const* per costanti, array, oggetti e funzioni. Al posto delle doppie virgolette, abbiamo scelto di usare le virgolette singole o il backtick. Le virgolette singole stanno diventando di moda.
- Abbiamo anche eliminato i punti e virgola dal nostro codice, ma è una questione di preferenze personali.
- Spazio intorno agli operatori aritmetici, agli operatori di assegnazione e dopo la virgola.
- Freccia di funzione invece di dichiarazione di funzione
- Ritorno esplicito invece di ritorno implicito se la funzione è one liner
- Nessuna virgola nell'ultimo valore di un oggetto.
- Preferiamo questi +=, -=, *= /=, **= invece della versione più lunga
- Quando si usa console.log() è bene stampare con una stringa di tag per identificare da dove proviene la console
#### Variables
@ -114,7 +114,7 @@ const gravity = 9.81
#### Arrays
We chose to make array names plural
Abbiamo scelto di rendere i nomi degli array plurali
By now you are very familiar function declaration, expression function, arrow function and anonymous function. In this challenge we tend to use arrow function instead of other functions. Arrow function is not a replacement for other functions. In addition, arrow functions and function declarations are not exactly the same. So you should know when to use and when not. I will cover the difference in detail in other sections. We will use explicit return instead of implicit return if the function is one liner
Ormai conoscete bene la dichiarazione di funzione, la funzione espressione, la funzione freccia e la funzione anonima. In questa sfida tendiamo a usare la funzione freccia invece di altre funzioni. La funzione freccia non sostituisce le altre funzioni. Inoltre, le funzioni freccia e le dichiarazioni di funzione non sono esattamente la stessa cosa. È quindi necessario sapere quando usarle e quando no. Tratterò la differenza in dettaglio in altre sezioni. Utilizzeremo il ritorno esplicito al posto di quello implicito se la funzione è una sola riga.
```js
// function which return full name of a person
@ -180,12 +180,12 @@ const showDateTime = () => {
}
```
The `new Dat().toLocaleString()` can also be used to display current date time. The `toLocaleString()` methods takes different arguments. You may learn more about date and time from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).
Il metodo `new Dat().toLocaleString()` può essere utilizzato anche per visualizzare l'ora della data corrente. I metodi `toLocaleString()` accettano diversi argomenti. Per saperne di più sulla data e sull'ora, consultare questo documento [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).
#### Loops
We coverer many types of loops in this challenges. The regular for loop, while loop, do while loop, for of loop, forEach loop and for in loop.
Lets see how we use them:
In questa sfida copriamo molti tipi di loop. I normali cicli for, while, do while, for of, forEach e for in.
Vediamo come utilizzarli:
```js
for (let i = 0; i <n;i++){
@ -228,7 +228,7 @@ for(const key in person) {
#### Objects
We declare object literal with*const*.
Dichiariamo gli oggetti letterali con*const*.
```js
// declaring object literal
@ -250,7 +250,7 @@ for(const key in person) {
#### Conditional
We say if, if else, if else if else, switch and ternary operators in previous challenges.
Nelle sfide precedenti abbiamo parlato di operatori if, if else, if else, switch e ternari.
```js
// syntax
@ -330,7 +330,7 @@ isRaining
#### Classes
We declare class with CamelCase which starts with capital letter.
Dichiariamo la classe con CamelCase, che inizia con la lettera maiuscola.
```js
// syntax
@ -351,9 +351,9 @@ class Person {
```
Whatever style guide you follow be consistent. Follow some programming paradigms and design patterns. Remember, if you do not write you code in certain order or fashion it will be hard to read your code. So, do a favor for yourself or for someone who is going to read your code by writing readable code.
Qualunque sia la guida di stile che seguite, siate coerenti. Seguite alcuni paradigmi di programmazione e modelli di progettazione. Ricordate che se non scrivete il codice in un certo ordine o modo, sarà difficile leggerlo. Quindi, fate un favore a voi stessi o a chi leggerà il vostro codice scrivendo codice leggibile.
🌕 You are tidy. Now, you knew how to write clean code, so anyone who know the English language can understand your code. You are always progressing and you are a head of 20 steps to your way to greatness.
🌕 Sei ordinato. Ora, sapete come scrivere codice pulito, quindi chiunque conosca la lingua inglese può capire il tuo codice. Sei sempre in progresso e sei a 20 passi verso la grandezza.
- [Adding Style Font Size](#adding-style-font-size)
- [Aggiungere uno stile](#adding-style)
- [Aggiungere un colore](#adding-style-color)
- [Aggiungere un colore di background](#adding-style-background-color)
- [Definire una dimensione del testo](#adding-style-font-size)
- [Esercizi](#exercises)
- [Exercise: Livello 1](#exercise-level-1)
- [Exercise: Livello 2](#exercise-level-2)
- [Exercise: Livello 3](#exercise-level-3)
- [EsercizioLivello 1](#exercise-level-1)
- [EsercizioLivello 2](#exercise-level-2)
- [EsercizioLivello 3](#exercise-level-3)
- [DOM: Mini project 1](#dom-mini-project-1)
# Day 21
## Document Object Model (DOM) - Day 1
HTML document is structured as a JavaScript Object. Every HTML element has a different properties which can help to manipulate it. It is possible to get, create, append or remove HTML elements using JavaScript. Check the examples below. Selecting HTML element using JavaScript is similar to selecting using CSS. To select an HTML element, we use tag name, id, class name or other attributes.
Il documento HTML è strutturato come un oggetto JavaScript. Ogni elemento HTML ha diverse proprietà che possono aiutare a manipolarlo. È possibile ottenere, creare, aggiungere o rimuovere elementi HTML utilizzando JavaScript. Verificate gli esempi riportati di seguito. La selezione di un elemento HTML tramite JavaScript è simile alla selezione tramite CSS. Per selezionare un elemento HTML, si utilizza il nome del tag, l'id, il nome della classe o altri attributi.
### Getting Element
### Ottenere un Elemento
We can access already created element or elements using JavaScript. To access or get elements we use different methods. The code below has four _h1_ elements. Let us see the different methods to access the _h1_ elements.
Possiamo accedere a elementi o elementi già creati utilizzando JavaScript. Per accedere agli elementi o ottenerli utilizziamo diversi metodi. Il codice sottostante ha quattro elementi _h1_. Vediamo i diversi metodi per accedere agli elementi _h1_.
```html
<!DOCTYPE html>
@ -72,9 +72,9 @@ We can access already created element or elements using JavaScript. To access or
</html>
```
#### Getting elements by tag name
#### Ottenere un Elemento tramite nome tag
**_getElementsByTagName()_**:takes a tag name as a string parameter and this method returns an HTMLCollection object. An HTMLCollection is an array like object of HTML elements. The length property provides the size of the collection. Whenever we use this method we access the individual elements using index or after loop through each individual items. An HTMLCollection does not support all array methods therefore we should use regular for loop instead of forEach.
**_getElementsByTagName()_**:prende un nome di tag come parametro stringa e questo metodo restituisce un oggetto HTMLCollection. Una HTMLCollection è un oggetto simile a un array di elementi HTML. La proprietà length fornisce la dimensione dell'insieme. Ogni volta che si utilizza questo metodo, si accede ai singoli elementi utilizzando l'indice o dopo aver eseguito un ciclo su ogni singolo elemento. Un HTMLCollection non supporta tutti i metodi degli array, quindi dovremmo usare il normale ciclo for invece di forEach.
```js
// syntax
@ -92,9 +92,9 @@ for (let i = 0; i < allTitles.length; i++) {
}
```
#### Getting elements by class name
#### Ottenere un Elemento tramite nome classe
**_getElementsByClassName()_** method returns an HTMLCollection object. An HTMLCollection is an array like list of HTML elements. The length property provides the size of the collection. It is possible to loop through all the HTMLCollection elements. See the example below
Il metodo **_getElementsByClassName()_** restituisce un oggetto HTMLCollection. Una HTMLCollection è un elenco di elementi HTML simile a un array. La proprietà length fornisce la dimensione dell'insieme. È possibile scorrere tutti gli elementi di HTMLCollection. Vedere l'esempio seguente
```js
//syntax
@ -112,9 +112,9 @@ for (let i = 0; i < allTitles.length; i++) {
}
```
#### Getting an element by id
#### Ottenere un Elemento tramite nome id
**_getElementsById()_** targets a single HTML element. We pass the id without # as an argument.
**_getElementsById()_** si rivolge a un singolo elemento HTML. Si passa l'id senza # come argomento.
```js
//syntax
@ -126,11 +126,11 @@ let firstTitle = document.getElementById('first-title')
console.log(firstTitle) // <h1>First Title</h1>
```
#### Getting elements by using querySelector methods
#### Ottenere un Elemento tramite i metodi querySelector
The _document.querySelector_ method can select an HTML or HTML elements by tag name, by id or by class name.
Il metodo _document.querySelector_ può selezionare un elemento HTML o elementi HTML per nome di tag, id o classe.
**_querySelector_**: can be used to select HTML element by its tag name, id or class. If the tag name is used it selects only the first element.
**_querySelector_**: può essere usato per selezionare un elemento HTML in base al suo nome di tag, id o classe. Se viene utilizzato il nome del tag, viene selezionato solo il primo elemento.
```js
let firstTitle = document.querySelector('h1') // select the first available h1 element
@ -138,7 +138,7 @@ let firstTitle = document.querySelector('#first-title') // select id with first-
let firstTitle = document.querySelector('.title') // select the first available element with class title
```
**_querySelectorAll_**: can be used to select html elements by its tag name or class. It returns a nodeList which is an array like object which supports array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements.
**_querySelectorAll_**: può essere usato per selezionare elementi html in base al nome del tag o della classe. Restituisce un nodeList, che è un oggetto simile a un array che supporta i metodi degli array. Si può usare **_for loop_** o **_forEach_** per scorrere ogni elemento dell'elenco di nodi.
```js
const allTitles = document.querySelectorAll('h1') # selects all the available h1 elements in the page
const allTitles = document.querySelectorAll('.title') // the same goes for selecting using class
```
### Adding attribute
### Aggiungere attributi
An attribute is added in the opening tag of HTML which gives additional information about the element. Common HTML attributes: id, class, src, style, href,disabled, title, alt. Lets add id and class for the fourth title.
Nel tag di apertura dell'HTML viene aggiunto un attributo che fornisce informazioni aggiuntive sull'elemento. Attributi HTML comuni: id, class, src, style, href, disabled, title, alt. Aggiungiamo id e class per il quarto titolo.
#### Aggiungere attributi senza usare setAttribute
We can use normal object setting method to set an attribute but this can not work for all elements. Some attributes are DOM object property and they can be set directly. For instance id and class
Possiamo usare il normale metodo di impostazione degli oggetti per impostare un attributo, ma questo non può funzionare per tutti gli elementi. Alcuni attributi sono proprietà degli oggetti DOM e possono essere impostati direttamente. Ad esempio, id e class
The class list method is a good method to append additional class. It does not override the original class if a class exists rather it adds additional class for the element.
Il metodo dell'elenco di classi è un buon metodo per aggiungere classi supplementari. Non sovrascrive la classe originale, se esiste, ma aggiunge una classe aggiuntiva per l'elemento.
```js
//another way to setting an attribute: append the class, doesn't over ride
titles[3].classList.add('title', 'header-title')
```
#### Removing class using remove
#### Rimuovere una classe usando remove
Similar to adding we can also remove class from an element. We can remove a specific class from an element.
Analogamente all'aggiunta, possiamo anche rimuovere una classe da un elemento. Possiamo rimuovere una classe specifica da un elemento.
```js
//another way to setting an attribute: append the class, doesn't over ride
An HTML is a build block of an opening tag, a closing tag and a text content. We can add a text content using the property _textContent_ or \*innerHTML.
Un HTML è un blocco composto da un tag di apertura, un tag di chiusura e un contenuto testuale. Possiamo aggiungere un contenuto testuale utilizzando la proprietà _textContent_ o \*innerHTML.
#### Adding Text content using textContent
#### Aggiungere Testo usando textContent
The _textContent_ property is used to add text to an HTML element.
La proprietà _textContent_ viene utilizzata per aggiungere testo a un elemento HTML.
```js
const titles = document.querySelectorAll('h1')
titles[3].textContent = 'Fourth Title'
```
#### Adding Text Content using innerHTML
#### Aggiungere test usando innerHTML
Most people get confused between _textContent_ and _innerHTML_. _textContent_ is meant to add text to an HTML element, however innerHTML can add a text or HTML element or elements as a child.
Molte persone si confondono tra _textContent_ e _innerHTML_. _textContent_ ha lo scopo di aggiungere testo a un elemento HTML, mentre innerHTML può aggiungere uno o più elementi di testo o HTML come figli.
##### Text Content
We assign *textContent* HTML object property to a text
Assegniamo la proprietà dell'oggetto HTML *textContent* a un testo
We use innerHTML property when we like to replace or a completely new children content to a parent element.
It value we assign is going to be a string of HTML elements.
Utilizziamo la proprietà innerHTML quando vogliamo sostituire o aggiungere un contenuto completamente nuovo a un elemento genitore.
Il valore assegnato sarà una stringa di elementi HTML.
```html
<!DOCTYPE html>
@ -260,7 +260,7 @@ It value we assign is going to be a string of HTML elements.
</html>
```
The innerHTML property can allow us also to remove all the children of a parent element. Instead of using removeChild() I would recommend the following method.
La proprietà innerHTML può consentire anche di rimuovere tutti i figli di un elemento genitore. Invece di usare removeChild(), raccomanderei il metodo seguente.
```html
<!DOCTYPE html>
@ -290,11 +290,11 @@ The innerHTML property can allow us also to remove all the children of a parent
</html>
```
### Adding style
### Aggiungere uno stile
#### Adding Style Color
#### Aggiungere un colore
Let us add some style to our titles. If the element has even index we give it green color else red.
Aggiungiamo un po' di stile ai nostri titoli. Se l'elemento ha un indice pari, gli diamo il colore verde, altrimenti il rosso.
```js
const titles = document.querySelectorAll('h1')
@ -308,9 +308,9 @@ titles.forEach((title, i) => {
})
```
#### Adding Style Background Color
#### Aggiungere un colore di background
Let us add some style to our titles. If the element has even index we give it green color else red.
Aggiungiamo un po' di stile ai nostri titoli. Se l'elemento ha un indice pari, gli diamo il colore verde, altrimenti il rosso.
```js
const titles = document.querySelectorAll('h1')
@ -324,9 +324,9 @@ titles.forEach((title, i) => {
})
```
#### Adding Style Font Size
#### Definire una dimensione del testo
Let us add some style to our titles. If the element has even index we give it 20px else 30px
Aggiungiamo un po' di stile ai nostri titoli. Se l'elemento ha un indice pari, gli diamo 20px, altrimenti 30px.
As you have notice, the properties of css when we use it in JavaScript is going to be a camelCase. The following CSS properties change from background-color to backgroundColor, font-size to fontSize, font-family to fontFamily, margin-bottom to marginBottom.
Come si è notato, le proprietà dei css quando vengono utilizzate in JavaScript saranno in camelCase. Le seguenti proprietà CSS cambiano da background-color a backgroundColor, da font-size a fontSize, da font-family a fontFamily, da margin-bottom a marginBottom.
---
🌕 Now, you are fully charged with a super power, you have completed the most important and challenging part of the challenge and in general JavaScript. You learned DOM and now you have the capability to build and develop applications. Now do some exercises for your brain and for your muscle.
🌕 Ora sei carico di un superpotere, hai completato la parte più importante e impegnativa della sfida e in generale di JavaScript. Hai imparato il DOM e ora hai la capacità di costruire e sviluppare applicazioni. Ora fai qualche esercizio per il cervello e per i muscoli.
## Esercizi
### Exercise: Livello 1
### EsercizioLivello 1
1. Create an index.html file and put four p elements as above: Get the first paragraph by using **_document.querySelector(tagname)_** and tag name
2. Get each of the the paragraph using**_document.querySelector('#id')_**and by their id
3. Get all the p as nodeList using **_document.querySelectorAll(tagname)_** and by their tag name
4. Loop through the nodeList and get the text content of each paragraph
5. Set a text content to paragraph the fourth paragraph,**_Fourth Paragraph_**
6. Set id and class attribute for all the paragraphs using different attribute setting methods
1. Creare un file index.html e inserire quattro elementi p come sopra: Ottenere il primo paragrafo utilizzando **_document.querySelector(tagname)_** e il nome del tag
2. Ottenere ciascuno dei paragrafi utilizzando**_document.querySelector('#id')_** eil loro id.
3. Ottenere tutti i p come nodeList usando **_document.querySelectorAll(tagname)_** e in base al loro nome di tag
4. Eseguire un loop attraverso l'elenco dei nodi e ottenere il contenuto del testo di ciascun paragrafo.
5. Impostare un contenuto di testo per il quarto paragrafo,**_Quarto paragrafo_**
6. Impostare gli attributi id e class per tutti i paragrafi, utilizzando diversi metodi di impostazione degli attributi.
### Exercise: Livello 2
### EsercizioLivello 2
1. Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-family)
1. Select all paragraphs and loop through each elements and give the first and third paragraph a color of green, and the second and the fourth paragraph a red color
1. Set text content, id and class to each paragraph
1. Modificare lo stile di ogni paragrafo utilizzando JavaScript (ad esempio, colore, sfondo, bordo, dimensione del carattere, tipo di carattere).
1. Selezionate tutti i paragrafi e passate in rassegna tutti gli elementi, dando al primo e al terzo paragrafo un colore verde e al secondo e al quarto un colore rosso.
1. Impostare il contenuto del testo, l'id e la classe di ogni paragrafo
### Exercise: Livello 3
### EsercizioLivello 3
#### DOM: Mini project 1
1. Develop the following application, use the following HTML elements to get started with. You will get the same code on starter folder. Apply all the styles and functionality using JavaScript only.
1. Sviluppare la seguente applicazione, utilizzando i seguenti elementi HTML per iniziare. Otterrete lo stesso codice nella cartella di partenza. Applicare tutti gli stili e le funzionalità utilizzando solo JavaScript.
- The year color is changing every 1 second
- The date and time background color is changing every on seconds
- Completed challenge has background green
- Ongoing challenge has background yellow
- Coming challenges have background red
- Il colore dell'anno cambia ogni 1 secondo
- Il colore di sfondo della data e dell'ora cambia ogni secondo.
- La sfida completata ha lo sfondo verde
- La sfida in corso ha lo sfondo giallo
- Le sfide in arrivo hanno lo sfondo rosso
```html
<!-- index.html -->
@ -400,9 +400,9 @@ As you have notice, the properties of css when we use it in JavaScript is going
- [Appending child to a parent element](#appending-child-to-a-parent-element)
- [Removing a child element from a parent node](#removing-a-child-element-from-a-parent-node)
- [Creare un elemento](#creating-an-element)
- [Creare più elementi](#creating-elements)
- [collegare un elemento child ad un elemento parent](#appending-child-to-a-parent-element)
- [Rimuovere un elemento child da un elemento parent](#removing-a-child-element-from-a-parent-node)
- [Esercizi](#exercises)
- [Esercizi: Livello 1](#exercises-level-1)
- [Esercizi: Livello 2](#exercises-level-2)
@ -32,9 +32,9 @@
## DOM(Document Object Model)-Day 2
### Creating an Element
### Creare un elemento
To create an HTML element we use tag name. Creating an HTML element using JavaScript is very simple and straight forward. We use the method _document.createElement()_. The method takes an HTML element tag name as a string parameter.
Per creare un elemento HTML si usa il nome del tag. Creare un elemento HTML con JavaScript è molto semplice e immediato. Si utilizza il metodo _document.createElement()_. Il metodo prende il nome di un tag dell'elemento HTML come parametro stringa.
To create multiple elements we should use loop. Using loop we can create as many HTML elements as we want.
After we create the element we can assign value to the different properties of the HTML object.
Per creare più elementi dobbiamo usare il loop. Utilizzando il ciclo, possiamo creare tutti gli elementi HTML che vogliamo.
Dopo aver creato l'elemento, possiamo assegnare il valore alle diverse proprietà dell'oggetto HTML.
```html
<!DOCTYPE html>
@ -94,9 +94,9 @@ After we create the element we can assign value to the different properties of t
</html>
```
### Appending child to a parent element
### collegare un elemento child ad un elemento parent
To see a created element on the HTML document we should append it to the parent as a child element. We can access the HTML document body using *document.body*. The *document.body* support the *appendChild()* method. See the example below.
Per vedere un elemento creato nel documento HTML, dobbiamo aggiungerlo al genitore come elemento figlio. Possiamo accedere al corpo del documento HTML usando *document.body*. Il file *document.body* supporta il metodo *appendChild()*. Si veda l'esempio seguente.
```html
<!DOCTYPE html>
@ -123,9 +123,9 @@ To see a created element on the HTML document we should append it to the parent
</html>
```
### Removing a child element from a parent node
### Rimuovere un elemento child da un elemento parent
After creating an HTML, we may want to remove element or elements and we can use the *removeChild()* method.
Dopo aver creato un HTML, potremmo voler rimuovere uno o più elementi e possiamo usare il metodo *removeChild()*.
**Esempio:**
@ -163,7 +163,7 @@ After creating an HTML, we may want to remove element or elements and we can use
</html>
```
As we have see in the previous section there is a better way to eliminate all the inner HTML elements or the children of a parent element using the method *innerHTML* properties.
Come abbiamo visto nella sezione precedente, esiste un modo migliore per eliminare tutti gli elementi HTML interni o i figli di un elemento genitore, utilizzando le proprietà del metodo *innerHTML*.
```html
<!DOCTYPE html>
@ -195,36 +195,36 @@ As we have see in the previous section there is a better way to eliminate all th
</html>
```
The above snippet of code cleared all the child elements.
Il frammento di codice precedente cancella tutti gli elementi figli.
---
🌕 You are so special, you are progressing everyday. Now, you knew how to destroy a created DOM element when it is needed. You learned DOM and now you have the capability to build and develop applications. You are left with only eight days to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕Sei così speciale, fai progressi ogni giorno. Ora sai come distruggere un elemento DOM creato quando è necessario. Hai imparato il DOM e ora hai la capacità di costruire e sviluppare applicazioni. Ti restano solo otto giorni per raggiungere la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli.
## Esercizi
### Esercizi: Livello 1
1. Create a div container on HTML document and create 100 to 100 numbers dynamically and append to the container div.
- Even numbers background is green
- Odd numbers background is yellow
- Prime numbers background is red
1. Creare un div contenitore nel documento HTML e creare 100-100 numeri dinamicamente e aggiungerli al div contenitore.
1. Use the countries array to display all the countries.See the design
1. Utilizzare l'array Paesi per visualizzare tutti i Paesi.Vedere il disegno
### Esercizi: Livello 3
Check the requirement of this project from both images(jpg and gif). All the data and CSS has been implemented using JavaScript only. The data is found on starter folder project_3. The drop down button has been created using [*details*](https://www.w3schools.com/tags/tag_details.asp) HTML element.
Controllare i requisiti di questo progetto da entrambe le immagini (jpg e gif). Tutti i dati e i CSS sono stati implementati utilizzando solo JavaScript. I dati si trovano nella cartella starter project_3. Il pulsante a discesa è stato creato utilizzando l'elemento HTML [*details*](https://www.w3schools.com/tags/tag_details.asp).
- [Getting value from an input element](#getting-value-from-an-input-element)
- [input value](#input-value)
- [input event and change](#input-event-and-change)
- [blur event](#blur-event)
- [Ottenere un valore da un elemento di input](#getting-value-from-an-input-element)
- [Valore di input](#input-value)
- [Valore di input ed azioni in risposta](#input-event-and-change)
- [Evento di blur](#blur-event)
- [keypress, keydow and keyup](#keypress-keydow-and-keyup)
- [Esercizi](#exercises)
- [Exercise: Livello 1](#exercise-level-1)
- [Esercizio: Livello 1](#exercise-level-1)
# Day 22
@ -38,8 +38,8 @@
### Event Listeners
Common HTML events:onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload.
We can add event listener method to any DOM object. We use **_addEventListener()_** method to listen different event types on HTML elements. The _addEventListener()_ method takes two arguments, an event listener and a callback function.
Eventi HTML comuni: onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload.
Possiamo aggiungere un metodo di ascolto degli eventi a qualsiasi oggetto DOM. Utilizziamo il metodo **_addEventListener()_** per ascoltare diversi tipi di eventi sugli elementi HTML. Il metodo _addEventListener()_ accetta due argomenti, un ascoltatore di eventi e una funzione di callback.
@ -54,9 +54,9 @@ selectedElement.addEventListener('eventlistner', e => {
#### Click
To attach an event listener to an element, first we select the element then we attach the addEventListener method. The event listener takes event type and callback functions as argument.
Per collegare un ascoltatore di eventi a un elemento, prima si seleziona l'elemento e poi si applica il metodo addEventListener. L'ascoltatore di eventi prende come argomento il tipo di evento e le funzioni di callback.
The following is an example of click type event.
Di seguito è riportato un esempio di evento di tipo click.
**Esempio: click**
@ -85,7 +85,7 @@ The following is an example of click type event.
</html>
```
An event can be also attached directly to the HTML element as inline script.
Un evento può anche essere allegato direttamente all'elemento HTML come script inline.
**Esempio: onclick**
@ -109,9 +109,10 @@ An event can be also attached directly to the HTML element as inline script.
#### Double Click
To attach an event listener to an element, first we select the element then we attach the addEventListener method. The event listener takes event type and callback functions as argument.
Per collegare un ascoltatore di eventi a un elemento, prima si seleziona l'elemento e poi si applica il metodo addEventListener. L'ascoltatore di eventi prende come argomento il tipo di evento e le funzioni di callback.
Di seguito è riportato un esempio di evento di tipo click.
The following is an example of click type event.
**Esempio: dblclick**
```html
@ -140,9 +141,9 @@ The following is an example of click type event.
#### Mouse enter
To attach an event listener to an element, first we select the element then we attach the addEventListener method. The event listener takes event type and callback functions as argument.
Per collegare un ascoltatore di eventi a un elemento, prima si seleziona l'elemento e poi si applica il metodo addEventListener. L'ascoltatore di eventi prende come argomento il tipo di evento e le funzioni di callback.
The following is an example of click type event.
Di seguito è riportato un esempio di evento di tipo click.
**Esempio: mouseenter**
@ -170,31 +171,31 @@ The following is an example of click type event.
</html>
```
By now you are familiar with addEventListen method and how to attach event listener. There are many types of event listeners. But in this challenge we will focus the most common important events.
List of events:
Ormai si conosce il metodo addEventListen e come collegare un ascoltatore di eventi. Esistono molti tipi di ascoltatori di eventi. Ma in questa sfida ci concentreremo sugli eventi più comuni e importanti.
Elenco degli eventi:
- click - when the element clicked
- dblclick - when the element double clicked
- mouseenter - when the mouse point enter to the element
- mouseleave - when the mouse pointer leave the element
- mousemove - when the mouse pointer move on the element
- mouseover - when the mouse pointer move on the element
- mouseout -when the mouse pointer out from the element
- input -when value enter to input field
- change -when value change on input field
- blur -when the element is not focused
- keydown - when a key is down
- keyup - when a key is up
- keypress - when we press any key
- onload - when the browser has finished loading a page
- click - quando l'elemento viene cliccato
- dblclick - quando l'elemento fa doppio clic
- mouseenter - quando il punto del mouse entra nell'elemento
- mouseleave - quando il puntatore del mouse lascia l'elemento
- mousemove - quando il puntatore del mouse si sposta sull'elemento
- mouseover - quando il puntatore del mouse si sposta sull'elemento
- mouseout - quando il puntatore del mouse esce dall'elemento
- input - quando il valore viene inserito nel campo di input
- change - quando il valore viene modificato nel campo di input
- blur - quando l'elemento non è focalizzato
- keydown - quando un tasto è abbassato
- keyup - quando un tasto viene alzato
- keypress - quando si preme un tasto qualsiasi
- onload - quando il browser ha terminato il caricamento di una pagina
Test the above event types by replacing event type in the above snippet code.
Verificate i tipi di evento di cui sopra sostituendo il tipo di evento nel codice dello snippet precedente.
### Getting value from an input element
### Ottenere un valore da un elemento di input
We usually fill forms and forms accept data. Form fields are created using input HTML element. Let us build a small application which allow us to calculate body mas index of a person using two input fields, one button and one p tag.
Di solito compiliamo moduli e i moduli accettano dati. I campi dei moduli vengono creati utilizzando l'elemento HTML input. Costruiamo una piccola applicazione che ci consenta di calcolare l'indice di massa corporea di una persona utilizzando due campi di input, un pulsante e un tag p.
### input value
### Valore di input
```html
<!DOCTYPE html>
@ -226,9 +227,9 @@ We usually fill forms and forms accept data. Form fields are created using input
</html>
```
#### input event and change
#### Valore di input ed azioni in risposta
In the above example, we managed to get input values from two input fields by clicking button. How about if we want to get value without click the button. We can use the _change_ or _input_ event type to get data right away from the input field when the field is on focus. Let us see how we will handle that.
Nell'esempio precedente, siamo riusciti a ottenere il valore di input da due campi di input facendo clic sul pulsante. E se volessimo ottenere il valore senza fare clic sul pulsante? Possiamo usare il tipo di evento _change_ o _input_ per ottenere subito i dati dal campo di input quando il campo è a fuoco. Vediamo come gestirlo.
```html
<!DOCTYPE html>
@ -255,9 +256,9 @@ In the above example, we managed to get input values from two input fields by cl
</html>
```
#### blur event
#### Evento di blur
In contrast to _input_ or _change_, the _blur_ event occur when the input field is not on focus.
A differenza di _input_ o _change_, l'evento _blur_ si verifica quando il campo di input non è a fuoco.
```js
<!DOCTYPE html>
@ -268,7 +269,7 @@ In contrast to _input_ or _change_, the _blur_ event occur when the input field
@ -290,7 +291,7 @@ In contrast to _input_ or _change_, the _blur_ event occur when the input field
#### keypress, keydow and keyup
We can access all the key numbers of the keyboard using different event listener types. Let us use keypress and get the keyCode of each keyboard keys.
Possiamo accedere a tutti i numeri dei tasti della tastiera utilizzando diversi tipi di ascoltatori di eventi. Utilizziamo keypress e otteniamo il keyCode di ogni tasto della tastiera.
```html
<!DOCTYPE html>
@ -313,19 +314,19 @@ We can access all the key numbers of the keyboard using different event listener
---
🌕 You are so special, you are progressing everyday. Now, you knew how handle any kind of DOM events. . You are left with only seven days to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 Sei così speciale, progredisci ogni giorno. Ora, sai come gestire qualsiasi tipo di evento DOM. . Ti restano solo sette giorni per raggiungere la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli.
## Esercizi
### Exercise: Livello 1
1. Generating numbers and marking evens, odds and prime numbers with three different colors. See the image below.
1. Generazione di numeri e marcatura di pari, dispari e numeri primi con tre colori diversi. Vedere l'immagine qui sotto.
1. Develop a small application which calculate a weight of an object in a certain planet. The gif image is not complete check the video in the starter file.
1. Sviluppare una piccola applicazione che calcoli il peso di un oggetto in un determinato pianeta. L'immagine gif non è completa, controllate il video nel file di partenza.
🌕 Your journey to greatness completed successfully. You reached high Livello of greatness. Now, you are much greater than ever before. I knew what it takes to reach to this Livello and you made to this point. You are a real hero. Now, it is time to celebrate your success with a friend or with a family. I am looking forward to seeing you in an other challenge.
🌕Il tuo viaggio verso la grandezza si è concluso con successo. Hai raggiunto un alto livello di grandezza. Ora sei molto più grande di prima. Sapevo cosa ci voleva per raggiungere questo Livello e tu sei arrivato a questo punto. Sei un vero eroe. Ora è il momento di festeggiare il tuo successo con un amico o con la tua famiglia. Non vedo l'ora di vederti in un'altra sfida.
## Testimony
Now it is time support the author and express your thoughts about the Author and 30DaysOfJavaScript. You can leave your testimonial on this [link](https://testimonify.herokuapp.com/)
Ora è il momento di sostenere l'autore e di esprimere il tuo pensiero sull'autore e su 30DaysOfJavaScript. Potete lasciare la vostra testimonianza su questo [link](https://testimonify.herokuapp.com/)
## Support
You can support the author to produce more educational materials
Potete sostenere l'autore nella produzione di ulteriori materiali didattici.
CampaniaGuy
2 years ago