diff --git a/Italian/02_Day_Data_types/02_day_data_types.md b/Italian/02_Day_Data_types/02_day_data_types.md new file mode 100644 index 0000000..867af20 --- /dev/null +++ b/Italian/02_Day_Data_types/02_day_data_types.md @@ -0,0 +1,980 @@ +
+

30 Days Of JavaScript: Data Types

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ + +[<< Giorno 1](../readMe.md) | [Giorno 3 >>](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_2.png) + +- [📔 Giorno 2](#-day-2) + - [Tipi di Dati](#data-types) + - [Tipi di Dati Primitivi](#primitive-data-types) + - [Tipi di Dati Non Primitivi](#non-primitive-data-types) + - [Numbers](#numbers) + - [Dichiarare un Tipo Number](#declaring-number-data-types) + - [L'Oggetto Math](#math-object) + - [Random Number Generator](#random-number-generator) + - [Strings](#strings) + - [Concatenare Stringhe](#string-concatenation) + - [Concatenare Usando l'Operatore Addizione](#concatenating-using-addition-operator) + - [Stringe Letterali Lunghe](#long-literal-strings) + - [Sequenze di Escape nelle Stringhe](#escape-sequences-in-strings) + - [Stringhe Parametriche (Template Strings)](#template-literals-template-strings) + - [Metodi del Tipo String](#string-methods) + - [Verificare il Ripo di Dato ed Eseguire Casting](#checking-data-types-and-casting) + - [Verificare il Tipo di Dato](#checking-data-types) + - [Cambiare il Tipo di Dato (Casting)](#changing-data-type-casting) + - [Da String a Int](#string-to-int) + - [Da String a Float](#string-to-float) + - [Da Float a Int](#float-to-int) + - [💻 Giorno 2: Esercizi](#-day-2-exercises) + - [Esercizi: Livello 1](#exercise-level-1) + - [Esercizi: Livello 2](#exercise-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# 📔 Giorno 2 + +## Tipi di Dati + +Nella sezione precedente abbiamo parlato un po' dei tipi di dati. I dati o i valori hanno tipi di dati. I tipi di dati descrivono le caratteristiche dei dati. I tipi di dati possono essere suddivisi in due categorie: + +1. Tipi di Dati Primitivi +2. Tipi di Dati Non Primitivi (Object References) + +### Tipi di Dati Primitivi + +I tipi di dati primitivi in JavaScript includono: + + 1. Numbers - Interi, float + 2. Strings - Qualsiasi dato tra virgolette singole, virgolette doppie o virgolette rovesciate. + 3. Boolean - valore vero o falso + 4. Null - valore vuoto o nessun valore + 5. Undefined - una variabile dichiarata senza valore + 6. Symbol - Un valore unico che può essere generato dal costruttore Symbol. + +I tipi di dati non primitivi in JavaScript includono: + +1. Objects +2. Arrays + +Vediamo ora cosa significano esattamente i tipi di dati primitivi e non primitivi. +I tipi di dati *primitivi* sono tipi di dati immutabili (non modificabili). Una volta creato un tipo di dati primitivo, non è possibile modificarlo. + +**Esempio:** + +```js +let word = 'JavaScript' +``` + +Se si tenta di modificare la stringa memorizzata nella variabile *word*, JavaScript dovrebbe sollevare un errore. Qualsiasi tipo di dato sotto una virgoletta singola, una doppia virgoletta o una virgola rovesciata è un tipo di dato stringa. + +```js +word[0] = 'Y' +``` + +Questa espressione non modifica la stringa memorizzata nella variabile *word*. Quindi, possiamo dire che le stringhe non sono modificabili o, in altre parole, immutabili. +I tipi di dati primitivi vengono confrontati in base ai loro valori. Confrontiamo diversi valori di dati. Si veda l'esempio seguente: + +```js +let numOne = 3 +let numTwo = 3 + +console.log(numOne == numTwo) // true + +let js = 'JavaScript' +let py = 'Python' + +console.log(js == py) //false + +let lightOn = true +let lightOff = false + +console.log(lightOn == lightOff) // false +``` + +### Tipi di dati non primitivi + +I tipi di dati *non primitivi* sono modificabili o mutabili. È possibile modificare il valore dei tipi di dati non primitivi dopo la loro creazione. +Vediamo come creare un array. Una matrice è un elenco di valori di dati in una parentesi quadra. Gli array possono contenere lo stesso tipo di dati o tipi diversi. I valori degli array sono referenziati dal loro indice. In JavaScript l'indice dell'array inizia da zero. Cioè, il primo elemento di un array si trova all'indice zero, il secondo elemento all'indice uno, il terzo elemento all'indice due e così via. + +```js +let nums = [1, 2, 3] +nums[0] = 10 + +console.log(nums) // [10, 2, 3] +``` + +Come si può notare, un array, che è un tipo di dati non primitivo, è mutabile. I tipi di dati non primitivi non possono essere confrontati per valore. Anche se due tipi di dati non primitivi hanno le stesse proprietà e gli stessi valori, non sono strettamente uguali. + +```js +let nums = [1, 2, 3] +let numbers = [1, 2, 3] + +console.log(nums == numbers) // false + +let userOne = { +name:'Asabeneh', +role:'teaching', +country:'Finland' +} + +let userTwo = { +name:'Asabeneh', +role:'teaching', +country:'Finland' +} + +console.log(userOne == userTwo) // false +``` + +Regola generale: non si confrontano tipi di dati non primitivi. Non si confrontano array, funzioni o oggetti. +I valori non primitivi vengono definiti tipi di riferimento, perché vengono confrontati in base al riferimento anziché al valore. Due oggetti sono strettamente uguali solo se fanno riferimento allo stesso oggetto sottostante. + +```js +let nums = [1, 2, 3] +let numbers = nums + +console.log(nums == numbers) // true + +let userOne = { +name:'Asabeneh', +role:'teaching', +country:'Finland' +} + +let userTwo = userOne + +console.log(userOne == userTwo) // true +``` + +Se avete difficoltà a capire la differenza tra tipi di dati primitivi e non primitivi, non siete gli unici. Calmatevi, passate alla sezione successiva e provate a tornare dopo qualche tempo. Ora iniziamo i tipi di dati con il tipo di numero. + +## Numbers + +I numeri sono valori interi e decimali che possono eseguire tutte le operazioni aritmetiche. +Vediamo alcuni esempi di numeri. + +### Dichiarare i tipi di dati numerici + +```js +let age = 35 +const gravity = 9.81 // we use const for non-changing values, gravitational constant in m/s2 +let mass = 72 // mass in Kilogram +const PI = 3.14 // pi a geometrical constant + +// More Esempios +const boilingPoint = 100 // temperature in oC, boiling point of water which is a constant +const bodyTemp = 37 // oC average human body temperature, which is a constant + +console.log(age, gravity, mass, PI, boilingPoint, bodyTemp) +``` + +### L'Oggetto Math + +In JavaScript l'oggetto Math fornisce molti metodi per lavorare con i numeri. + +```js +const PI = Math.PI + +console.log(PI) // 3.141592653589793 + +// Rounding to the closest number +// if above .5 up if less 0.5 down rounding + +console.log(Math.round(PI)) // 3 to round values to the nearest number + +console.log(Math.round(9.81)) // 10 + +console.log(Math.floor(PI)) // 3 rounding down + +console.log(Math.ceil(PI)) // 4 rounding up + +console.log(Math.min(-5, 3, 20, 4, 5, 10)) // -5, returns the minimum value + +console.log(Math.max(-5, 3, 20, 4, 5, 10)) // 20, returns the maximum value + +const randNum = Math.random() // creates random number between 0 to 0.999999 +console.log(randNum) + +// Let us create random number between 0 to 10 + +const num = Math.floor(Math.random () * 11) // creates random number between 0 and 10 +console.log(num) + +//Absolute value +console.log(Math.abs(-10)) // 10 + +//Square root +console.log(Math.sqrt(100)) // 10 + +console.log(Math.sqrt(2)) // 1.4142135623730951 + +// Power +console.log(Math.pow(3, 2)) // 9 + +console.log(Math.E) // 2.718 + +// Logarithm +// Returns the natural logarithm with base E of x, Math.log(x) +console.log(Math.log(2)) // 0.6931471805599453 +console.log(Math.log(10)) // 2.302585092994046 + +// Returns the natural logarithm of 2 and 10 respectively +console.log(Math.LN2) // 0.6931471805599453 +console.log(Math.LN10) // 2.302585092994046 + +// Trigonometry +Math.sin(0) +Math.sin(60) + +Math.cos(0) +Math.cos(60) +``` + +#### Random Number Generator + +L'oggetto JavaScript Math ha un generatore di numeri con il metodo random() che genera numeri da 0 a 0,9999999... + +```js +let randomNum = Math.random() // generates 0 to 0.999... +``` + +Vediamo ora come utilizzare il metodo random() per generare un numero casuale compreso tra 0 e 10: + +```js +let randomNum = Math.random() // generates 0 to 0.999 +let numBtnZeroAndTen = randomNum * 11 + +console.log(numBtnZeroAndTen) // this gives: min 0 and max 10.99 + +let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen) +console.log(randomNumRoundToFloor) // this gives between 0 and 10 +``` + +## Strings + +Le stringhe sono testi, che si trovano sotto le virgolette **_singole_**, **_doppie_**, **_back-tick_**. Per dichiarare una stringa, abbiamo bisogno di un nome di variabile, di un operatore di assegnazione, di un valore tra virgolette singole, virgolette doppie o virgolette back-tick. + +```js +let space = ' ' // an empty space string +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +let quote = "The saying,'Seeing is Believing' is not correct in 2020." +let quotWithBackTick = `The saying,'Seeing is Believing' is not correct in 2020.` +``` + +### Concatenazione di Stringhe + +Il collegamento di due o più stringhe tra loro si chiama concatenazione. +Utilizzando le stringhe dichiarate nella precedente sezione: + +```js +let fullName = firstName + space + lastName; // concatenation, merging two string together. +console.log(fullName); +``` + +```sh +Asabeneh Yetayeh +``` + +Possiamo concatenare le stringhe in diversi modi. + +#### Concatenare Usando l'Operatore Addizione + +La concatenazione con l'operatore di addizione è un vecchio metodo. Questo modo di concatenare è noioso e soggetto ad errori. È bene sapere come concatenare in questo modo, ma suggerisco vivamente di usare le stringhe modello ES6 (spiegate più avanti). + +```js +// Declaring different variables of different data types +let space = ' ' +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +let age = 250 + + +let fullName =firstName + space + lastName +let personInfoOne = fullName + '. I am ' + age + '. I live in ' + country; // ES5 string addition + +console.log(personInfoOne) +``` + +```sh +Asabeneh Yetayeh. I am 250. I live in Finland +``` + +#### Stringhe Letterali Lunghe + +Una stringa può essere un singolo carattere, un paragrafo o una pagina. Se la lunghezza della stringa è eccessiva, non può essere contenuta in una riga. Possiamo usare il carattere backslash (\) alla fine di ogni riga per indicare che la stringa continuerà sulla riga successiva. + +**Esempio:** + +```js +const paragraph = "My name is Asabeneh Yetayeh. I live in Finland, Helsinki.\ +I am a teacher and I love teaching. I teach HTML, CSS, JavaScript, React, Redux, \ +Node.js, Python, Data Analysis and D3.js for anyone who is interested to learn. \ +In the end of 2019, I was thinking to expand my teaching and to reach \ +to global audience and I started a Python challenge from November 20 - December 19.\ +It was one of the most rewarding and inspiring experience.\ +Now, we are in 2020. I am enjoying preparing the 30DaysOfJavaScript challenge and \ +I hope you are enjoying too." + +console.log(paragraph) +``` + +#### Escape Sequences nelle Stringhe + +In JavaScript e in altri linguaggi di programmazione il carattere \ seguito da alcuni caratteri è una sequenza di escape. Vediamo i caratteri di escape più comuni: + +- \n: new line +- \t: Tab, means 8 spaces +- \\\\: Back slash +- \\': Single quote (') +- \\": Double quote (") + +```js +console.log('I hope everyone is enjoying the 30 Days Of JavaScript challenge.\nDo you ?') // line break +console.log('Days\tTopics\tEsercizios') +console.log('Day 1\t3\t5') +console.log('Day 2\t3\t5') +console.log('Day 3\t3\t5') +console.log('Day 4\t3\t5') +console.log('This is a backslash symbol (\\)') // To write a backslash +console.log('In every programming language it starts with \"Hello, World!\"') +console.log("In every programming language it starts with \'Hello, World!\'") +console.log('The saying \'Seeing is Believing\' isn\'t correct in 2020') +``` + +Output in console: + +```sh +I hope everyone is enjoying the 30 Days Of JavaScript challenge. +Do you ? +Days Topics Esercizios +Day 1 3 5 +Day 2 3 5 +Day 3 3 5 +Day 4 3 5 +This is a backslash symbol (\) +In every programming language it starts with "Hello, World!" +In every programming language it starts with 'Hello, World!' +The saying 'Seeing is Believing' isn't correct in 2020 +``` + +#### Stringhe Parametriche (Template Strings) + +Per creare una stringa modello, utilizziamo due back-tick. Possiamo iniettare dati come espressioni all'interno di una stringa modello. Per iniettare dati, si racchiude l'espressione con una parentesi graffa ({}) preceduta dal segno $. Si veda la sintassi qui sotto. + +```js +//Syntax +`String literal text` +`String literal text ${expression}` +``` + +**Esempio: 1** + +```js +console.log(`The sum of 2 and 3 is 5`) // statically writing the data +let a = 2 +let b = 3 +console.log(`The sum of ${a} and ${b} is ${a + b}`) // injecting the data dynamically +``` + +**Esempio:2** + +```js +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +let age = 250 +let fullName = firstName + ' ' + lastName + +let personInfoTwo = `I am ${fullName}. I am ${age}. I live in ${country}.` //ES6 - String interpolation method +let personInfoThree = `I am ${fullName}. I live in ${city}, ${country}. I am a ${job}. I teach ${language}.` +console.log(personInfoTwo) +console.log(personInfoThree) +``` + +```sh +I am Asabeneh Yetayeh. I am 250. I live in Finland. +I am Asabeneh Yetayeh. I live in Helsinki, Finland. I am a teacher. I teach JavaScript. +``` + +Utilizzando un modello di stringa o un metodo di interpolazione delle stringhe, si possono aggiungere espressioni, che possono essere un valore o alcune operazioni (confronto, operazioni aritmetiche, operazioni ternarie). + +```js +let a = 2 +let b = 3 +console.log(`${a} is greater than ${b}: ${a > b}`) +``` + +```sh +2 is greater than 3: false +``` + +### Medoti del Tipo String + +Tutto in JavaScript è un oggetto. Una stringa è un tipo di dati primitivo, il che significa che non è possibile modificarla una volta creata. L'oggetto stringa ha molti metodi per le stringhe. Esistono diversi metodi per le stringhe che possono aiutarci a lavorare con le stringhe. + +1. *length*: Il metodo stringa *length* restituisce il numero di caratteri di una stringa inclusi gli spazi vuoti. + +**Esempio:** + +```js +let js = 'JavaScript' +console.log(js.length) // 10 +let firstName = 'Asabeneh' +console.log(firstName.length) // 8 +``` + +2. *Accedere ai caratteri di una stringa*: È possibile accedere a ciascun carattere di una stringa utilizzando il suo indice. Nella programmazione, il conteggio inizia da 0. Il primo indice della stringa è zero e l'ultimo indice è la lunghezza della stringa meno uno. + + ![Accessing sting by index](../../images/string_indexes.png) + +Accediamo ai diversi caratteri della stringa 'JavaScript'. + +```js +let string = 'JavaScript' +let firstLetter = string[0] + +console.log(firstLetter) // J + +let secondLetter = string[1] // a +let thirdLetter = string[2] +let lastLetter = string[9] + +console.log(lastLetter) // t + +let lastIndex = string.length - 1 + +console.log(lastIndex) // 9 +console.log(string[lastIndex]) // t +``` + +3. *toUpperCase()*: questo metodo cambia la stringa in lettere maiuscole. + +```js +let string = 'JavaScript' + +console.log(string.toUpperCase()) // JAVASCRIPT + +let firstName = 'Asabeneh' + +console.log(firstName.toUpperCase()) // ASABENEH + +let country = 'Finland' + +console.log(country.toUpperCase()) // FINLAND +``` + +4. *toLowerCase()*: questo metodo cambia la stringa in lettere minuscole. + +```js +let string = 'JavasCript' + +console.log(string.toLowerCase()) // javascript + +let firstName = 'Asabeneh' + +console.log(firstName.toLowerCase()) // asabeneh + +let country = 'Finland' + +console.log(country.toLowerCase()) // finland +``` + +5. *substr()*: Richiede due argomenti, l'indice iniziale e il numero di caratteri da tagliare. + +```js +let string = 'JavaScript' +console.log(string.substr(4,6)) // Script + +let country = 'Finland' +console.log(country.substr(3, 4)) // land +``` + +6. *substring()*: Richiede due argomenti, l'indice iniziale e l'indice finale, ma non include il carattere all'indice finale. + +```js +let string = 'JavaScript' + +console.log(string.substring(0,4)) // Java +console.log(string.substring(4,10)) // Script +console.log(string.substring(4)) // Script + +let country = 'Finland' + +console.log(country.substring(0, 3)) // Fin +console.log(country.substring(3, 7)) // land +console.log(country.substring(3)) // land +``` + +7. *split()*: Il metodo split divide una stringa in un punto specificato. + +```js +let string = '30 Days Of JavaScript' + +console.log(string.split()) // Changes to an array -> ["30 Days Of JavaScript"] +console.log(string.split(' ')) // Split to an array at space -> ["30", "Days", "Of", "JavaScript"] + +let firstName = 'Asabeneh' + +console.log(firstName.split()) // Change to an array - > ["Asabeneh"] +console.log(firstName.split('')) // Split to an array at each letter -> ["A", "s", "a", "b", "e", "n", "e", "h"] + +let countries = 'Finland, Sweden, Norway, Denmark, and Iceland' + +console.log(countries.split(',')) // split to any array at comma -> ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"] +console.log(countries.split(', ')) //  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"] +``` + +8. *trim()*: Rimuove lo spazio di coda all'inizio o alla fine di una stringa. + +```js +let string = ' 30 Days Of JavaScript ' + +console.log(string) +console.log(string.trim(' ')) + +let firstName = ' Asabeneh ' + +console.log(firstName) +console.log(firstName.trim()) // still removes spaces at the beginning and the end of the string +``` + +```sh + 30 Days Of JavasCript +30 Days Of JavasCript + Asabeneh +Asabeneh +``` + +9. *includes()*: Prende un argomento di sottostringa e controlla se l'argomento di sottostringa esiste nella stringa. *include()* restituisce un booleano. Se una sottostringa esiste in una stringa, restituisce true, altrimenti restituisce false. + +```js +let string = '30 Days Of JavaScript' + +console.log(string.includes('Days')) // true +console.log(string.includes('days')) // false - it is case sensitive! +console.log(string.includes('Script')) // true +console.log(string.includes('script')) // false +console.log(string.includes('java')) // false +console.log(string.includes('Java')) // true + +let country = 'Finland' + +console.log(country.includes('fin')) // false +console.log(country.includes('Fin')) // true +console.log(country.includes('land')) // true +console.log(country.includes('Land')) // false +``` + +10. *replace()*: prende come parametro la vecchia sottostringa e una nuova sottostringa. + +```js +string.replace(oldsubstring, newsubstring) +``` + +```js +let string = '30 Days Of JavaScript' +console.log(string.replace('JavaScript', 'Python')) // 30 Days Of Python + +let country = 'Finland' +console.log(country.replace('Fin', 'Noman')) // Nomanland +``` + +11. *charAt()*: Prende l'indice e restituisce il valore in corrispondenza di quell'indice + +```js +string.charAt(index) +``` + +```js +let string = '30 Days Of JavaScript' +console.log(string.charAt(0)) // 3 + +let lastIndex = string.length - 1 +console.log(string.charAt(lastIndex)) // t +``` + +12. *charCodeAt()*: Prende l'indice e restituisce il codice char (numero ASCII) del valore in corrispondenza dell'indice. + +```js +string.charCodeAt(index) +``` + +```js +let string = '30 Days Of JavaScript' +console.log(string.charCodeAt(3)) // D ASCII number is 68 + +let lastIndex = string.length - 1 +console.log(string.charCodeAt(lastIndex)) // t ASCII is 116 + +``` + +13. *indexOf()*: Prende una sottostringa e se la sottostringa esiste in una stringa restituisce la prima posizione della sottostringa se non esiste restituisce -1 + +```js +string.indexOf(substring) +``` + +```js +let string = '30 Days Of JavaScript' + +console.log(string.indexOf('D')) // 3 +console.log(string.indexOf('Days')) // 3 +console.log(string.indexOf('days')) // -1 +console.log(string.indexOf('a')) // 4 +console.log(string.indexOf('JavaScript')) // 11 +console.log(string.indexOf('Script')) //15 +console.log(string.indexOf('script')) // -1 +``` + +14. *lastIndexOf()*: Prende una sottostringa e se la sottostringa esiste in una stringa restituisce l'ultima posizione della sottostringa se non esiste restituisce -1 + + +```js +//syntax +string.lastIndexOf(substring) +``` + +```js +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' + +console.log(string.lastIndexOf('love')) // 67 +console.log(string.lastIndexOf('you')) // 63 +console.log(string.lastIndexOf('JavaScript')) // 38 +``` + +15. *concat()*: prende molte sottostringhe e le unisce. + +```js +string.concat(substring, substring, substring) +``` + +```js +let string = '30' +console.log(string.concat("Days", "Of", "JavaScript")) // 30DaysOfJavaScript + +let country = 'Fin' +console.log(country.concat("land")) // Finland +``` + +16. *startsWith*: prende una sottostringa come argomento e verifica se la stringa inizia con la sottostringa specificata. Restituisce un booleano (vero o falso). + +```js +//syntax +string.startsWith(substring) +``` + +```js +let string = 'Love is the best to in this world' + +console.log(string.startsWith('Love')) // true +console.log(string.startsWith('love')) // false +console.log(string.startsWith('world')) // false + +let country = 'Finland' + +console.log(country.startsWith('Fin')) // true +console.log(country.startsWith('fin')) // false +console.log(country.startsWith('land')) // false +``` + +17. *endsWith*: prende una sottostringa come argomento e verifica se la stringa termina con la sottostringa specificata. Restituisce un booleano (vero o falso). + +```js +string.endsWith(substring) +``` + +```js +let string = 'Love is the most powerful feeling in the world' + +console.log(string.endsWith('world')) // true +console.log(string.endsWith('love')) // false +console.log(string.endsWith('in the world')) // true + +let country = 'Finland' + +console.log(country.endsWith('land')) // true +console.log(country.endsWith('fin')) // false +console.log(country.endsWith('Fin')) // false +``` + +18. *search*: prende come argomento una sottostringa e restituisce l'indice della prima corrispondenza. Il valore di ricerca può essere una stringa o un modello di espressione regolare. + +```js +string.search(substring) +``` + +```js +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' +console.log(string.search('love')) // 2 +console.log(string.search(/javascript/gi)) // 7 +``` + +prende come argomento una sottostringa o un modello di espressione regolare e restituisce un array se c'è corrispondenza, altrimenti restituisce null. Vediamo come si presenta un modello di espressione regolare. Inizia con il segno / e termina con il segno /. + +```js +let string = 'love' +let patternOne = /love/ // with out any flag +let patternTwo = /love/gi // g-means to search in the whole text, i - case insensitive +``` + +Match syntax + +```js +// syntax +string.match(substring) +``` + +```js +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' +console.log(string.match('love')) +``` + +```sh +["love", index: 2, input: "I love JavaScript. If you do not love JavaScript what else can you love.", groups: undefined] +``` + +```js +let pattern = /love/gi +console.log(string.match(pattern)) // ["love", "love", "love"] +``` + +Estraiamo i numeri dal testo utilizzando un'espressione regolare. Questa non è la sezione delle espressioni regolari, niente panico! Tratteremo le espressioni regolari più avanti. + +```js +let txt = 'In 2019, I ran 30 Days of Python. Now, in 2020 I am super exited to start this challenge' +let regEx = /\d+/ + +// d with escape character means d not a normal d instead acts a digit +// + means one or more digit numbers, +// if there is g after that it means global, search everywhere. + +console.log(txt.match(regEx)) // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"] +console.log(txt.match(/\d+/g)) // ["2019", "30", "2020"] +``` + +20. *repeat()*: prende come argomento un numero e restituisce la versione ripetuta della stringa. + +```js +string.repeat(n) +``` + +```js +let string = 'love' +console.log(string.repeat(10)) // lovelovelovelovelovelovelovelovelovelove +``` + +## Verificiare i Tipi di Dati ed eseguire Casting + +### Verificiare i Tipi di Dati + +Per verificare il tipo di dati di una certa variabile si utilizza il metodo _typeof_. + +**Esempio:** + +```js +// Different javascript data types +// Let's declare different data types + +let firstName = 'Asabeneh' // string +let lastName = 'Yetayeh' // string +let country = 'Finland' // string +let city = 'Helsinki' // string +let age = 250 // number, it is not my real age, do not worry about it +let job // undefined, because a value was not assigned + +console.log(typeof 'Asabeneh') // string +console.log(typeof firstName) // string +console.log(typeof 10) // number +console.log(typeof 3.14) // number +console.log(typeof true) // boolean +console.log(typeof false) // boolean +console.log(typeof NaN) // number +console.log(typeof job) // undefined +console.log(typeof undefined) // undefined +console.log(typeof null) // object +``` + +### Cambiare il Tipo di Dato (Casting) + +- Casting: Conversione di un tipo di dati in un altro tipo di dati. Utilizziamo _parseInt()_, _parseFloat()_, _Number()_, _+ sign_, _str()_. + Quando si eseguono operazioni aritmetiche, i numeri di stringa devono essere prima convertiti in numeri interi o float, altrimenti viene restituito un errore. + +#### Da String a Int + +Possiamo convertire un numero di stringa in un numero. Qualsiasi numero all'interno di un apice è un numero stringa. Un esempio di numero stringa: '10', '5', ecc. +Possiamo convertire una stringa in un numero utilizzando i seguenti metodi: + +- parseInt() +- Number() +- Plus sign(+) + +```js +let num = '10' +let numInt = parseInt(num) +console.log(numInt) // 10 +``` + +```js +let num = '10' +let numInt = Number(num) + +console.log(numInt) // 10 +``` + +```js +let num = '10' +let numInt = +num + +console.log(numInt) // 10 +``` + +#### Da String a Float + +Possiamo convertire un numero float stringa in un numero float. Qualsiasi numero float all'interno di una citazione è un numero float stringa. Un esempio di numero stringa float: '9,81', '3,14', '1,44', ecc. +È possibile convertire una stringa float in un numero utilizzando i seguenti metodi: + +- parseFloat() +- Number() +- Plus sign(+) + +```js +let num = '9.81' +let numFloat = parseFloat(num) + +console.log(numFloat) // 9.81 +``` + +```js +let num = '9.81' +let numFloat = Number(num) + +console.log(numFloat) // 9.81 +``` + +```js +let num = '9.81' +let numFloat = +num + +console.log(numFloat) // 9.81 +``` + +#### Da Float a Int + +Possiamo convertire i numeri float in numeri interi. +Per convertire i float in int utilizziamo il metodo seguente: + +- parseInt() + +```js +let num = 9.81 +let numInt = parseInt(num) + +console.log(numInt) // 9 +``` + +🌕 Fantastico. Hai appena completato le sfide del secondo giorno e sei due passi avanti sulla via della grandezza. Ora fai qualche esercizio per il cervello e per i muscoli. + +## 💻 Giorno 2: Esercizi + +### Esercizio: Livello 1 + +1. Dichiarare una variabile chiamata sfida e assegnarle un valore iniziale **'30 Days Of JavaScript'**. +2. Stampate la stringa sulla console del browser usando __console.log()__. +3. Stampate la __lunghezza__ della stringa nella console del browser usando _console.log()_. +4. Cambiare tutti i caratteri della stringa in lettere maiuscole utilizzando il metodo __toUpperCase()__. +5. Cambiare tutti i caratteri della stringa in lettere minuscole usando il metodo __toLowerCase()__. +6. Tagliare (slice) la prima parola della stringa utilizzando il metodo __substr()__ o __substring()__. +7. Tagliare la frase *Giorni di JavaScript* da *30 Giorni di JavaScript*. +8. Verificare se la stringa contiene la parola __Script__ utilizzando il metodo __includes()__. +9. Dividere la __stringa__ in un __array__ usando il metodo __split()__. +10. Dividere la stringa 30 Days Of JavaScript nello spazio usando il metodo __split()__. +11. Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon" __split__ la stringa alla virgola e la trasforma in un array. +12. Cambiare 30 Days Of JavaScript in 30 Days Of Python usando il metodo __replace()__. +13. Qual è il carattere all'indice 15 nella stringa '30 giorni di JavaScript'? Usate il metodo __charAt()__. +14. Qual è il codice del carattere J nella stringa '30 Days Of JavaScript' usando il metodo __charCodeAt()__. +15. Usate __indexOf__ per determinare la posizione della prima occorrenza di __a__ in 30 Giorni Di JavaScript. +16. Usate __lastIndexOf__ per determinare la posizione dell'ultima occorrenza di __a__ in 30 Days Of JavaScript. +17. Usate __indexOf__ per trovare la posizione della prima occorrenza della parola __perché__ nella seguente frase:__"Non si può terminare una frase con perché perché perché è una congiunzione"__. +18. Usate __lastIndexOf__ per trovare la posizione dell'ultima occorrenza della parola __because__ nella seguente frase:__'Non si può concludere una frase con perché perché perché è una congiunzione'__. +19. Usare __search__ per trovare la posizione della prima occorrenza della parola __because__ nella seguente frase:__'Non si può terminare una frase con perché perché perché è una congiunzione'__ +20. Usate __trim()__ per rimuovere gli spazi bianchi all'inizio e alla fine di una stringa, ad esempio ' 30 Days Of JavaScript '. +21. Usate il metodo __startsWith()__ con la stringa *30 Days Of JavaScript* e rendete il risultato vero. +22. Usate il metodo __endsWith()__ con la stringa *30 Days Of JavaScript* e fate in modo che il risultato sia vero. +23. Usare il metodo __match()__ per trovare tutti gli __a__ in 30 Giorni Di JavaScript +24. Usare il metodo __concat()__ e unire '30 giorni di' e 'JavaScript' in un'unica stringa, '30 giorni di JavaScript'. +25. Usate il metodo __repeat()__ per stampare 30 Giorni Di JavaScript 2 volte. + +### Esercizio: Livello 2 + +1. Utilizzando console.log() stampate la seguente dichiarazione: + + ```sh + The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another. + ``` + +2. Utilizzando console.log() stampate la seguente citazione di Madre Teresa: + + ```sh + "Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead." + ``` + +3. Verificare se typeof '10' è esattamente uguale a 10. Se non lo è, renderlo esattamente uguale. +4. Verificare se parseFloat('9.8') è uguale a 10. In caso contrario, renderlo esattamente uguale a 10. +5. Controllare se 'on' si trova sia in python che in jargon. +6. Spero che questo corso non sia pieno di jargon. Verificate se _il gergo_ è presente nella frase. +7. Generare un numero casuale compreso tra 0 e 100. +8. Generare un numero casuale compreso tra 50 e 100, incluso. +9. Generare un numero casuale compreso tra 0 e 255 incluso. +10. Accedere ai caratteri della stringa 'JavaScript' utilizzando un numero casuale. +11. Usare console.log() e i caratteri di escape per stampare il seguente schema. + + ```js + 1 1 1 1 1 + 2 1 2 4 8 + 3 1 3 9 27 + 4 1 4 16 64 + 5 1 5 25 125 + ``` + +12. Usa __substr__ per tagliare la frase __perché perché perché perché__ dalla seguente frase:__'Non si può concludere una frase con perché perché perché è una congiunzione'__ + +### Esercizio: Livello 3 + +1. L'amore è la cosa migliore di questo mondo. Alcuni hanno trovato il loro amore e altri lo stanno ancora cercando". Contate il numero di parole __amore__ in questa frase. +2. Usate __match()__ per contare il numero di tutti i __perché__ nella seguente frase:__"Non si può concludere una frase con perché perché perché è una congiunzione"__. +3. Pulite il testo seguente e trovate la parola più frequente (suggerimento: usate replace ed espressioni regolari). + + ```js + const sentence = '%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching' + ``` + +4. Calcolare il reddito totale annuo della persona estraendo i numeri dal testo seguente. 'Guadagna 5000 euro di stipendio al mese, 10000 euro di bonus annuale, 15000 euro di corsi online al mese'. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Giorno 1](../readMe.md) | [Giorno 3 >>](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) diff --git a/Italian/03_Day_Booleans_operators_date/03_booleans_operators_date.md b/Italian/03_Day_Booleans_operators_date/03_booleans_operators_date.md new file mode 100644 index 0000000..8d0444e --- /dev/null +++ b/Italian/03_Day_Booleans_operators_date/03_booleans_operators_date.md @@ -0,0 +1,634 @@ +
+

30 Days Of JavaScript: Booleans, Operators, Date

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 2](../02_Day_Data_types/02_day_data_types.md) | [Day 4 >>](../04_Day_Conditionals/04_day_conditionals.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_3.png) + +- [📔 Giorno 3](#-day-3) + - [Booleans](#booleans) + - [Valori Che Restituiscono True](#truthy-values) + - [Valori Che Restituiscono False](#falsy-values) + - [Undefined](#undefined) + - [Null](#null) + - [Operatori](#operators) + - [Operatori di Assegnamento](#assignment-operators) + - [Operatori Aritmetici](#arithmetic-operators) + - [Operatori di Confronto](#comparison-operators) + - [Operatori Logici](#logical-operators) + - [Operatore d'Incremento](#increment-operator) + - [Operatore di Decremento](#decrement-operator) + - [Operatori Ternari](#ternary-operators) + - [Precedenza dell'Operatore](#operator-precedence) + - [Metodi delle finestre (Window)](#window-methods) + - [Window alert()](#window-alert-method) + - [Window prompt()](#window-prompt-method) + - [Window confirm()](#window-confirm-method) + - [Oggetto Date](#date-object) + - [Creare un oggetto data (time)](#creating-a-time-object) + - [Ottenere Valore Anno](#getting-full-year) + - [Ottenere Valore mese](#getting-month) + - [Ottenere Valore data](#getting-date) + - [Ottenere Valore giorno](#getting-day) + - [Ottenere Valore ora](#getting-hours) + - [Ottenere Valore minuto](#getting-minutes) + - [Ottenere Valore secondo](#getting-seconds) + - [Ottenere Valore tempo](#getting-time) + - [💻 Day 3: Esercizi](#-day-3-exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# 📔 Giorno 3 + +## Booleans + +Un tipo di dati booleano rappresenta uno dei due valori: _true_ o _false_. Il valore booleano è o vero o falso. L'uso di questi tipi di dati sarà chiaro quando si inizierà a utilizzare l'operatore di confronto. Qualsiasi confronto restituisce un valore booleano che può essere vero o falso. + +**Esempio: Valori Boolean** + +```js +let isLightOn = true +let isRaining = false +let isHungry = false +let isMarried = true +let truValue = 4 > 3 // true +let falseValue = 4 < 3 // false +``` + +Abbiamo concordato che i valori booleani sono veri o falsi. + +### Valori Che Resituiscono True + +- Tutti i numeri (positivi e negativi) sono veri, tranne lo zero. +- Tutte le stringhe sono vere, tranne una stringa vuota ('') +- Il boolean true + +### Valori Che Resituiscono False + +- 0 +- 0n +- null +- undefined +- NaN +- il boolean false +- '', "", ``, empty string + +È bene ricordare questi valori veri e falsi. Nella sezione successiva, li useremo con le condizioni per prendere decisioni. + +## Undefined + +Se dichiariamo una variabile e non le assegniamo un valore, il valore sarà indefinito. Inoltre, se una funzione non restituisce il valore, sarà undefined. + +```js +let firstName +console.log(firstName) //not defined, because it is not assigned to a value yet +``` + +## Null + +```js +let empty = null +console.log(empty) // -> null , means no value +``` + +## Operatori + +### Operatori di Assegnamento + +An equal sign in JavaScript is an assignment operator. It uses to assign a variable. + +```js +let firstName = 'Asabeneh' +let country = 'Finland' +``` + +Operatori di Assegnamento + +![Operatori di Assegnamento](../images/assignment_operators.png) + +### Operatori Aritmetici + +Gli operatori aritmetici sono operatori matematici. + +- Addizione(+): a + b +- Sottrazione(-): a - b +- Moltiplicazione(*): a * b +- Divisione(/): a / b +- Modulo(%): a % b +- Esponenziale(**): a ** b + +```js +let numOne = 4 +let numTwo = 3 +let sum = numOne + numTwo +let diff = numOne - numTwo +let mult = numOne * numTwo +let div = numOne / numTwo +let remainder = numOne % numTwo +let powerOf = numOne ** numTwo + +console.log(sum, diff, mult, div, remainder, powerOf) // 7,1,12,1.33,1, 64 + +``` + +```js +const PI = 3.14 +let radius = 100 // length in meter + +//Let us calculate area of a circle +const areaOfCircle = PI * radius * radius +console.log(areaOfCircle) // 314 m + + +const gravity = 9.81 // in m/s2 +let mass = 72 // in Kilogram + +// Let us calculate weight of an object +const weight = mass * gravity +console.log(weight) // 706.32 N(Newton) + +const boilingPoint = 100 // temperature in oC, boiling point of water +const bodyTemp = 37 // body temperature in oC + + +// Concatenating string with numbers using string interpolation +/* + The boiling point of water is 100 oC. + Human body temperature is 37 oC. + The gravity of earth is 9.81 m/s2. + */ +console.log( + `The boiling point of water is ${boilingPoint} oC.\nHuman body temperature is ${bodyTemp} oC.\nThe gravity of earth is ${gravity} m / s2.` +) +``` + +### Operatori di Confronto + +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. + +![Operatori di Confronto](../images/comparison_operators.png) +**Esempio: Operatori di Confronto** + +```js +console.log(3 > 2) // true, because 3 is greater than 2 +console.log(3 >= 2) // true, because 3 is greater than 2 +console.log(3 < 2) // false, because 3 is greater than 2 +console.log(2 < 3) // true, because 2 is less than 3 +console.log(2 <= 3) // true, because 2 is less than 3 +console.log(3 == 2) // false, because 3 is not equal to 2 +console.log(3 != 2) // true, because 3 is not equal to 2 +console.log(3 == '3') // true, compare only value +console.log(3 === '3') // false, compare both value and data type +console.log(3 !== '3') // true, compare both value and data type +console.log(3 != 3) // false, compare only value +console.log(3 !== 3) // false, compare both value and data type +console.log(0 == false) // true, equivalent +console.log(0 === false) // false, not exactly the same +console.log(0 == '') // true, equivalent +console.log(0 == ' ') // true, equivalent +console.log(0 === '') // false, not exactly the same +console.log(1 == true) // true, equivalent +console.log(1 === true) // false, not exactly the same +console.log(undefined == null) // true +console.log(undefined === null) // false +console.log(NaN == NaN) // false, not equal +console.log(NaN === NaN) // false +console.log(typeof NaN) // number + +console.log('mango'.length == 'avocado'.length) // false +console.log('mango'.length != 'avocado'.length) // true +console.log('mango'.length < 'avocado'.length) // true +console.log('milk'.length == 'meat'.length) // true +console.log('milk'.length != 'meat'.length) // false +console.log('tomato'.length == 'potato'.length) // true +console.log('python'.length > 'dragon'.length) // false +``` + +Cerca di capire i confronti di cui sopra con un po' di logica. Ricorda, senza alcuna logica potrebbe essere difficile. +JavaScript è in qualche modo un linguaggio di programmazione cablato. Il codice JavaScript viene eseguito e fornisce un risultato, ma se non si è attenti, potrebbe non essere il risultato desiderato. + +Come regola generale, se un valore non è vero con ==, non sarà uguale con ===. L'uso di === è più sicuro di quello di ==. Il seguente [link](https://dorey.github.io/JavaScript-Equality-Table/) contiene un elenco esaustivo di confronti tra tipi di dati. + + +### Operatori Logici + +I seguenti simboli sono gli operatori logici comuni: +&& (ampersand), || (pipe) e ! (negazione). +L'operatore && diventa vero solo se i due operandi sono veri. +L'operatore || diventa vero se entrambi gli operandi sono veri. +L'operatore ! nega il vero al falso e il falso al vero. + +```js +// && ampersand operator example + +const check = 4 > 3 && 10 > 5 // true && true -> true +const check = 4 > 3 && 10 < 5 // true && false -> false +const check = 4 < 3 && 10 < 5 // false && false -> false + +// || pipe or operator, example + +const check = 4 > 3 || 10 > 5 // true || true -> true +const check = 4 > 3 || 10 < 5 // true || false -> true +const check = 4 < 3 || 10 < 5 // false || false -> false + +//! Negation examples + +let check = 4 > 3 // true +let check = !(4 > 3) // false +let isLightOn = true +let isLightOff = !isLightOn // false +let isMarried = !false // true +``` + +### Operatore d'Incremento + +In JavaScript si usa l'operatore di incremento per aumentare un valore memorizzato in una variabile. L'incremento può essere pre o post incremento. Vediamo i due tipi di incremento: + +1. Pre-increment + +```js +let count = 0 +console.log(++count) // 1 +console.log(count) // 1 +``` + +1. Post-increment + +```js +let count = 0 +console.log(count++) // 0 +console.log(count) // 1 +``` + +Nella maggior parte dei casi utilizziamo l'operatore post-incremento. Dovreste almeno ricordare come si usa l'operatore post-incremento. + +### Operatore di Decremento + +In JavaScript si usa l'operatore decremento per diminuire un valore memorizzato in una variabile. Il decremento può essere pre o post decremento. Vediamo ciascuno di essi: + +1. Pre-decremento + +```js +let count = 0 +console.log(--count) // -1 +console.log(count) // -1 +``` + +2. Post-decremento + +```js +let count = 0 +console.log(count--) // 0 +console.log(count) // -1 +``` + +### Operatori Ternari + +L'operatore ternario permette di scrivere una condizione. +Un altro modo per scrivere le condizioni è utilizzare gli operatori ternari. Guardate i seguenti esempi: + +```js +let isRaining = true +isRaining + ? console.log('You need a rain coat.') + : console.log('No need for a rain coat.') +isRaining = false + +isRaining + ? console.log('You need a rain coat.') + : console.log('No need for a rain coat.') +``` + +```sh +You need a rain coat. +No need for a rain coat. +``` + +```js +let number = 5 +number > 0 + ? console.log(`${number} is a positive number`) + : console.log(`${number} is a negative number`) +number = -5 + +number > 0 + ? console.log(`${number} is a positive number`) + : console.log(`${number} is a negative number`) +``` + +```sh +5 is a positive number +-5 is a negative number +``` + +### Precedenza dell'Operatore + +Vorrei raccomandare di leggere le informazioni sulla precedenza degli operatori da questo documento [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) + +## Metodi delle finestre (Window) + +### Window alert() + +Come si è visto all'inizio, il metodo alert() visualizza una casella di avviso con un messaggio specificato e un pulsante OK. Si tratta di un metodo integrato che richiede un solo argomento. + +```js +alert(message) +``` + +```js +alert('Welcome to 30DaysOfJavaScript') +``` + +Non utilizzare un'allerta eccessiva perché è distruttiva e fastidiosa, usarla solo per fare delle prove. + +### Window prompt() + +I metodi di prompt della finestra visualizzano una casella di prompt con un input sul browser per accettare valori di input e i dati di input possono essere memorizzati in una variabile. Il metodo prompt() accetta due argomenti. Il secondo argomento è opzionale. + +```js +prompt('required text', 'optional text') +``` + +```js +let number = prompt('Enter number', 'number goes here') +console.log(number) +``` + +### Window confirm() + +Il metodo confirm() visualizza una finestra di dialogo con un messaggio specificato, insieme a un pulsante OK e uno Cancel. +Una finestra di conferma viene spesso utilizzata per chiedere all'utente il permesso di eseguire qualcosa. La finestra confirm() accetta come argomento una stringa. +Facendo clic sul pulsante OK si ottiene il valore vero, mentre facendo clic sul pulsante Annulla si ottiene il valore falso. + +```js +const agree = confirm('Are you sure you like to delete? ') +console.log(agree) // result will be true or false based on what you click on the dialog box +``` + +Questi non sono tutti i metodi delle finestre, ma avremo una sezione separata per approfondire i metodi delle finestre. + +## Oggetto Date + +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. +getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes, getSeconds(), getMilliseconds(), getTime(), getDay()_ + +![Date time Object](../images/date_time_object.png) + +### Creare un oggetto data (time) + +Una volta creato l'oggetto time. L'oggetto time fornirà informazioni sul tempo. Creiamo un oggetto time + +```js +const now = new Date() +console.log(now) // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time) +``` + +Abbiamo creato un oggetto tempo e possiamo accedere a qualsiasi informazione data e ora dall'oggetto, utilizzando i metodi get che abbiamo menzionato nella tabella. + +### Ottenere Valore Anno + +Estraiamo o otteniamo l'intero anno da un oggetto temporale. + +```js +const now = new Date() +console.log(now.getFullYear()) // 2020 +``` + +### Ottenere Valore mese + +Estraiamo o otteniamo il mese da un oggetto temporale. + +```js +const now = new Date() +console.log(now.getMonth()) // 0, because the month is January, month(0-11) +``` + +### Ottenere Valore data + +Estraiamo o otteniamo la data del mese da un oggetto temporale. + +```js +const now = new Date() +console.log(now.getDate()) // 4, because the day of the month is 4th, day(1-31) +``` + +### Ottenere Valore giorno + +Estraiamo o otteniamo il giorno della settimana da un oggetto orario. + +```js +const now = new Date() +console.log(now.getDay()) // 6, because the day is Saturday which is the 7th day +// Sunday is 0, Monday is 1 and Saturday is 6 +// Getting the weekday as a number (0-6) +``` + +### Ottenere Valore ora + +Estraiamo o otteniamo le ore da un oggetto tempo. + +```js +const now = new Date() +console.log(now.getHours()) // 0, because the time is 00:56:41 +``` + +### Ottenere Valore minuto + +Estraiamo o otteniamo i minuti da un oggetto temporale. + +```js +const now = new Date() +console.log(now.getMinutes()) // 56, because the time is 00:56:41 +``` + +### Ottenere Valore secondo + +Estraiamo o otteniamo i secondi da un oggetto tempo. + +```js +const now = new Date() +console.log(now.getSeconds()) // 41, because the time is 00:56:41 +``` + +### Ottenere Valore tempo + +Questo metodo fornisce il tempo in millisecondi a partire dal 1° gennaio 1970. È anche noto come tempo Unix. È possibile ottenere l'ora Unix in due modi: + +1. Usare _getTime()_ + +```js +const now = new Date() // +console.log(now.getTime()) // 1578092201341, this is the number of seconds passed from January 1, 1970 to January 4, 2020 00:56:41 +``` + +1. Usare _Date.now()_ + +```js +const allSeconds = Date.now() // +console.log(allSeconds) // 1578092201341, this is the number of seconds passed from January 1, 1970 to January 4, 2020 00:56:41 + +const timeInSeconds = new Date().getTime() +console.log(allSeconds == timeInSeconds) // true +``` + +Formattiamo questi valori in un formato orario leggibile dall'uomo. +**Esempio:** + +```js +const now = new Date() +const year = now.getFullYear() // return year +const month = now.getMonth() + 1 // return month(0 - 11) +const date = now.getDate() // return date (1 - 31) +const hours = now.getHours() // return number (0 - 23) +const minutes = now.getMinutes() // return number (0 -59) + +console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56 +``` + +🌕 Hai un'energia sconfinata. Hai appena completato le sfide del terzo giorno e sei a tre passi dalla strada verso la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli. + +## 💻 Day 3: Esercizi + +### Esercizi: Livello 1 + +1. Dichiarate le variabili firstName, lastName, country, city, age, isMarried, year e assegnategli un valore; utilizzate l'operatore typeof per verificare i diversi tipi di dati. +2. Verificare se il tipo di '10' è uguale a 10. +3. Verificare se parseInt('9.8') è uguale a 10 +4. Il valore booleano è vero o falso. + 1. Scrivete tre istruzioni JavaScript che forniscano un valore vero. + 2. Scrivete tre istruzioni JavaScript che forniscono un valore falso. + +5. Scoprite il risultato della seguente espressione di confronto senza usare console.log(). Dopo aver deciso il risultato, confermatelo usando console.log(). + 1. 4 > 3 + 2. 4 >= 3 + 3. 4 < 3 + 4. 4 <= 3 + 5. 4 == 4 + 6. 4 === 4 + 7. 4 != 4 + 8. 4 !== 4 + 9. 4 != '4' + 10. 4 == '4' + 11. 4 === '4' + 12. Trovate la lunghezza di pitone e gergo e fate una dichiarazione di confronto falsificata. + +6. Scoprite il risultato delle seguenti espressioni senza usare console.log(). Dopo aver deciso il risultato, confermatelo utilizzando console.log(). + 1. 4 > 3 && 10 < 12 + 2. 4 > 3 && 10 > 12 + 3. 4 > 3 || 10 < 12 + 4. 4 > 3 || 10 > 12 + 5. !(4 > 3) + 6. !(4 < 3) + 7. !(falso) + 8. !(4 > 3 && 10 < 12) + 9. !(4 > 3 && 10 > 12) + 10. !(4 === '4') + 11. Non c'è nessun 'on' sia in dragon che in python. + +7. Utilizzate l'oggetto Date per svolgere le seguenti attività + 1. Qual è l'anno oggi? + 2. Qual è il mese di oggi come numero? + 3. Qual è la data di oggi? + 4. Qual è il giorno di oggi come numero? + 5. Qual è l'ora attuale? + 6. A quanto ammontano i minuti? + 7. Trovare il numero di secondi trascorsi dal 1° gennaio 1970 a oggi. + +### Esercizi: Livello 2 + +1. Scrivere uno script che richieda all'utente di inserire base e altezza del triangolo e di calcolare l'area di un triangolo (area = 0,5 x b x h). + + ```sh + Inserire base: 20 + Inserire l'altezza: 10 + L'area del triangolo è 100 + ``` + +1. Scrivete uno script che richieda all'utente di inserire il lato a, il lato b e il lato c del triangolo e che calcoli il perimetro del triangolo (perimetro = a + b + c) + + ```sh + Inserire il lato a: 5 + Inserire il lato b: 4 + Inserire il lato c: 3 + Il perimetro del triangolo è 12 + ``` + +1. Ottenete la lunghezza e la larghezza utilizzando il prompt e calcolate l'area del rettangolo (area = lunghezza x larghezza e il perimetro del rettangolo (perimetro = 2 x (lunghezza + larghezza)). +1. Ottenere il raggio utilizzando il prompt e calcolare l'area di un cerchio (area = pi x r x r) e la circonferenza di un cerchio (c = 2 x pi x r) dove pi = 3,14. +1. Calculate the slope, x-intercept and y-intercept of y = 2x -2 +1. Slope is m = (y2-y1)/(x2-x1). Find the slope between point (2, 2) and point(6,10) +1. Compare the slope of above two questions. +1. Calculate the value of y (y = x2 + 6x + 9). Try to use different x values and figure out at what x value y is 0. +1. Writ a script that prompt a user to enter hours and rate per hour. Calculate pay of the person? + + ```sh + Enter hours: 40 + Enter rate per hour: 28 + Your weekly earning is 1120 + ``` + +1. If the length of your name is greater than 7 say, your name is long else say your name is short. +1. Compare your first name length and your family name length and you should get this output. + + ```js + let firstName = 'Asabeneh' + let lastName = 'Yetayeh' + ``` + + ```sh + Il tuo nome, Asabeneh, è più lungo del tuo cognome, Yetayeh + ``` + +1. Dichiarare due variabili _myAge_ e _yourAge_ e assegnare loro i valori iniziali myAge e yourAge. + + ```js + let myAge = 250 + let yourAge = 25 + ``` + + ```sh + Ho 225 anni più di te. + ``` + +1. Utilizzando il prompt, ottenete l'anno di nascita dell'utente e se l'utente ha 18 anni o più consentitegli di guidare, altrimenti ditegli di aspettare un certo numero di anni. + + ```sh + + Inserire l'anno di nascita: 1995 + Hai 25 anni. Sei abbastanza grande per guidare + + Inserisci l'anno di nascita: 2005 + Hai 15 anni. Potrai guidare dopo 3 anni. + ``` + +1. Scrivere uno script che richieda all'utente di inserire il numero di anni. Calcolare il numero di secondi che una persona può vivere. Supponiamo che una persona viva solo cento anni + + ```sh + Inserisci il numero di anni che vivi: 100 + Hai vissuto 3153600000 secondi. + ``` + +1. Creare un formato di tempo leggibile dall'uomo utilizzando l'oggetto Date time + 1. AAAA-MM-GG HH:mm + 2. GG-MM-AAAA HH:mm + 3. GG/MM/AAAA HH:mm + +### Esercizi: Livello 3 + +1. Creare un formato orario leggibile dall'uomo utilizzando l'oggetto Date time. L'ora e i minuti devono essere sempre a due cifre (7 ore devono essere 07 e 5 minuti devono essere 05). + 1. YYY-MM-DD HH:mm es. 20120-01-02 07:05 + +[<< Day 2](../02_Day_Data_types/02_day_data_types.md) | [Day 4 >>](../04_Day_Conditionals/04_day_conditionals.md) diff --git a/Italian/04_Day_Conditionals/04_day_conditionals.md b/Italian/04_Day_Conditionals/04_day_conditionals.md new file mode 100644 index 0000000..c844039 --- /dev/null +++ b/Italian/04_Day_Conditionals/04_day_conditionals.md @@ -0,0 +1,377 @@ +
+

30 Days Of JavaScript: Condizionali

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 3](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) | [Day 5 >>](../05_Day_Arrays/05_day_arrays.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_4.png) + +- [📔 Giorno 4](#-day-4) + - [Condizionali](#conditionals) + - [If](#if) + - [If Else](#if-else) + - [If Else if Else](#if--else-if-else) + - [Switch](#switch) + - [Operatori Ternari](#ternary-operators) + - [💻 Esercizi](#-exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# 📔 Giorno 4 + +## Condizionali + +Le istruzioni condizionali sono utilizzate per prendere decisioni in base a diverse condizioni. +Per impostazione predefinita, le istruzioni negli script JavaScript vengono eseguite in sequenza dall'alto verso il basso. Se la logica di elaborazione lo richiede, il flusso sequenziale di esecuzione può essere modificato in due modi: + +- Esecuzione condizionale: un blocco di una o più istruzioni viene eseguito se una certa espressione è vera. +- Esecuzione ripetitiva: un blocco di una o più istruzioni verrà eseguito ripetutamente finché una certa espressione sarà vera. In questa sezione tratteremo gli enunciati _if_, _else_, _else if_. Gli operatori di confronto e logici appresi nelle sezioni precedenti saranno utili in questa sede. + +Le condizioni possono essere implementate nei seguenti modi: + +- if +- if else +- if else if else +- switch +- ternary operator + +### If + +In JavaScript e in altri linguaggi di programmazione la parola chiave _if_ serve a verificare se una condizione è vera e a eseguire il blocco di codice. Per creare una condizione if, abbiamo bisogno della parola chiave _if_, della condizione all'interno di una parentesi e del blocco di codice all'interno di una parentesi graffa ({}). + +```js +// syntax +if (condition) { + //this part of code runs for truthy condition +} +``` + +**Esempio:** + +```js +let num = 3 +if (num > 0) { + console.log(`${num} is a positive number`) +} +// 3 is a positive number +``` + +Come si può vedere nell'esempio di condizione precedente, 3 è maggiore di 0, quindi è un numero positivo. La condizione era vera e il blocco di codice è stato eseguito. Tuttavia, se la condizione è falsa, non si vedrà alcun risultato. + +```js +let isRaining = true +if (isRaining) { + console.log('Remember to take your rain coat.') +} +``` + + Lo stesso vale per la seconda condizione: se isRaining è false, il blocco if non verrà eseguito e non vedremo alcun output. Per vedere il risultato di una condizione falsa, dovremmo avere un altro blocco, che sarà _else_. + +### If Else + +Se la condizione è vera, viene eseguito il primo blocco, altrimenti viene eseguita la condizione else. + +```js +// syntax +if (condition) { + // this part of code runs for truthy condition +} else { + // this part of code runs for false condition +} +``` + +```js +let num = 3 +if (num > 0) { + console.log(`${num} is a positive number`) +} else { + console.log(`${num} is a negative number`) +} +// 3 is a positive number + +num = -3 +if (num > 0) { + console.log(`${num} is a positive number`) +} else { + console.log(`${num} is a negative number`) +} +// -3 is a negative number +``` + +```js +let isRaining = true +if (isRaining) { + console.log('You need a rain coat.') +} else { + console.log('No need for a rain coat.') +} +// You need a rain coat. + +isRaining = false +if (isRaining) { + console.log('You need a rain coat.') +} else { + console.log('No need for a rain coat.') +} +// No need for a rain coat. +``` + +L'ultima condizione è falsa, quindi il blocco else è stato eseguito. Cosa succede se abbiamo più di due condizioni? In questo caso, utilizzeremo le condizioni *else if*. + +### If Else if Else + +Nella nostra vita quotidiana prendiamo decisioni su base giornaliera. Le decisioni non vengono prese verificando una o due condizioni, ma sulla base di più condizioni. Come la nostra vita quotidiana, anche la programmazione è piena di condizioni. Usiamo *else if* quando abbiamo più condizioni. + +```js +// syntax +if (condition) { + // code +} else if (condition) { + // code +} else { + // code + +} +``` + +**Esempio:** + +```js +let a = 0 +if (a > 0) { + console.log(`${a} is a positive number`) +} else if (a < 0) { + console.log(`${a} is a negative number`) +} else if (a == 0) { + console.log(`${a} is zero`) +} else { + console.log(`${a} is not a number`) +} +``` + +```js +// if else if else +let weather = 'sunny' +if (weather === 'rainy') { + console.log('You need a rain coat.') +} else if (weather === 'cloudy') { + console.log('It might be cold, you need a jacket.') +} else if (weather === 'sunny') { + console.log('Go out freely.') +} else { + console.log('No need for rain coat.') +} +``` + +### Switch + +Switch è un'alternativa a **if else if else**. +L'istruzione switch inizia con la parola chiave *switch* seguita da una parentesi e da un blocco di codice. All'interno del blocco di codice avremo diversi casi. Il blocco Case viene eseguito se il valore nella parentesi dell'istruzione switch corrisponde al valore del caso. L'istruzione break serve a terminare l'esecuzione, in modo che l'esecuzione del codice non venga interrotta dopo che la condizione è stata soddisfatta. Il blocco default viene eseguito se tutti i casi non soddisfano la condizione. + +```js +switch(caseValue){ + case 1: + // code + break + case 2: + // code + break + case 3: + // code + break + default: + // code +} +``` + +```js +let weather = 'cloudy' +switch (weather) { + case 'rainy': + console.log('You need a rain coat.') + break + case 'cloudy': + console.log('It might be cold, you need a jacket.') + break + case 'sunny': + console.log('Go out freely.') + break + default: + console.log(' No need for rain coat.') +} + +// Switch More Examples +let dayUserInput = prompt('What day is today ?') +let day = dayUserInput.toLowerCase() + +switch (day) { + case 'monday': + console.log('Today is Monday') + break + case 'tuesday': + console.log('Today is Tuesday') + break + case 'wednesday': + console.log('Today is Wednesday') + break + case 'thursday': + console.log('Today is Thursday') + break + case 'friday': + console.log('Today is Friday') + break + case 'saturday': + console.log('Today is Saturday') + break + case 'sunday': + console.log('Today is Sunday') + break + default: + console.log('It is not a week day.') +} + +``` + +// Esempi di utilizzo delle condizioni nei casi + +```js +let num = prompt('Enter number'); +switch (true) { + case num > 0: + console.log('Number is positive'); + break; + case num == 0: + console.log('Numbers is zero'); + break; + case num < 0: + console.log('Number is negative'); + break; + default: + console.log('Entered value was not a number'); +} +``` + +### Operatori Ternari + +Un altro modo di scrivere i condizionali è quello di utilizzare gli operatori ternari. Ne abbiamo parlato in altre sezioni, ma è bene menzionarlo anche qui. + +```js +let isRaining = true +isRaining + ? console.log('You need a rain coat.') + : console.log('No need for a rain coat.') +``` + +🌕 sei straordinario e hai un potenziale notevole. Hai appena completato le sfide del quarto giorno e sei quattro passi avanti sulla strada della grandezza. Ora fai qualche esercizio per il cervello e i muscoli. + +## 💻 Esercizi + +### Esercizi: Livello 1 + +1. Ottenere l'input dell'utente tramite prompt("Inserisci la tua età:"). Se l'utente ha 18 anni o più, fornisce il feedback: "Sei abbastanza grande per guidare", ma se non ha 18 anni, fornisce un altro feedback che indica di aspettare il numero di anni necessari per compierli. + + ```sh + Inserisci la tua età: 30 + Sei abbastanza grande per guidare. + + Inserisci la tua età: 15 + Ti restano 3 anni per guidare. + ``` + +1. Confrontare i valori di myAge e yourAge usando if ... else. Basarsi sul confronto e registrare il risultato nella console, indicando chi è più vecchio (io o tu). Utilizzare prompt("Inserisci la tua età:") per ottenere l'età come input. + + ```sh + Inserisci la tua età: 30 + Sei più vecchio di me di 5 anni. + ``` + +1. Se a è maggiore di b restituisce 'a è maggiore di b' altrimenti 'a è minore di b'. Provate a implementarlo in diversi modi + + - usando if else + - l'operatore ternario. + + ```js + lasciare a = 4 + lasciare che b = 3 + ``` + + ``sh + 4 è maggiore di 3 + ``` + +1. I numeri pari sono divisibili per 2 e il resto è zero. Come si fa a verificare se un numero è pari o no usando JavaScript? + + ```sh + Inserite un numero: 2 + 2 è un numero pari + + Inserite un numero: 9 + 9 è un numero dispari. + ``` + +### Esercizi: Livello 2 + +1. Scrivere un codice in grado di dare voti agli studenti in base ai loro punteggi: + - 80-100, A + - 70-89, B + - 60-69, C + - 50-59, D + - 0-49, F +1. Controllare se la stagione è autunno, inverno, primavera o estate. + Se l'input dell'utente è : + - Settembre, Ottobre o Novembre, la stagione è Autunno. + - Dicembre, gennaio o febbraio, la stagione è Inverno. + - Marzo, aprile o maggio, la stagione è la primavera. + - Giugno, luglio o agosto, la stagione è l'estate. +1. Controllare se un giorno è un giorno del fine settimana o un giorno lavorativo. Il vostro script prenderà il giorno come input. + +```sh + Che giorno è oggi? Sabato + Sabato è un fine settimana. + + Che giorno è oggi? sabato + Sabato è un fine settimana. + + Che giorno è oggi? venerdì + Venerdì è un giorno lavorativo. + + Che giorno è oggi? venerdì + Venerdì è un giorno lavorativo. + ``` + +### Esercizi: Livello 3 + +1. Scrivere un programma che indichi il numero di giorni in un mese. + + ```sh + Inserire un mese: Gennaio + Gennaio ha 31 giorni. + + Inserire un mese: GENNAIO + Gennaio ha 31 giorni + + Inserire un mese: Febbraio + Febbraio ha 28 giorni. + + Inserire un mese: FEBBRAIO + Febbraio ha 28 giorni. + ``` + +1. Scrivere un programma che indichi il numero di giorni in un mese, considerando l'anno bisestile. + + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 3](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) | [Day 5 >>](../05_Day_Arrays/05_day_arrays.md) diff --git a/Italian/05_Day_Arrays/05_day_arrays.md b/Italian/05_Day_Arrays/05_day_arrays.md new file mode 100644 index 0000000..680a3e5 --- /dev/null +++ b/Italian/05_Day_Arrays/05_day_arrays.md @@ -0,0 +1,774 @@ +
+

30 Days Of JavaScript: Arrays

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 4](../04_Day_Conditionals/04_day_conditionals.md) | [Day 6 >>](../06_Day_Loops/06_day_loops.md) + +![Day 5](../../images/banners/day_1_5.png) + +- [📔 Giorno 5](#-day-5) + - [Arrays](#arrays) + - [Come creare un array vuoto](#how-to-create-an-empty-array) + - [Come creare un array contenente valori](#how-to-create-an-array-with-values) + - [Creare un array usando la funzione split](#creating-an-array-using-split) + - [Accedere agli elementi dell'array usando l'indice](#accessing-array-items-using-index) + - [Modificare gli elementi dell'array](#modifying-array-element) + - [Metodi per manipolare gli array](#methods-to-manipulate-array) + - [Il Costruttore dell'array](#array-constructor) + - [Creare valori statici con fill](#creating-static-values-with-fill) + - [Concatenare array usando concat](#concatenating-array-using-concat) + - [Ottenere la lunghezza dell'array](#getting-array-length) + - [Ottenere l'indice di un elemento nell'array](#getting-index-an-element-in-arr-array) + - [Ottenere l'ultimo indice di un elemento nell'array](#getting-last-index-of-an-element-in-array) + - [Verificare l'array](#checking-array) + - [Convertire l'array in stringa](#converting-array-to-string) + - [Unire elementi array](#joining-array-elements) + - [Dividere gli elementi dell'array](#slice-array-elements) + - [Il metodo Splice con gli array](#splice-method-in-array) + - [Aggiungere un elemento all'array usando push](#adding-item-to-an-array-using-push) + - [Rimuovere l'ultimo elemento usando pop](#removing-the-end-element-using-pop) + - [Rimuovere un elemento dall'inizio dell'array](#removing-an-element-from-the-beginning) + - [Aggiungere un elemento in prima posizione dell'array](#add-an-element-from-the-beginning) + - [Invertire l'ordine dell'array](#reversing-array-order) + - [Ordinare gli elementi di un array](#sorting-elements-in-array) + - [Array di array](#array-of-arrays) + - [💻 Esercizio](#-exercise) + - [Esercizio: Livello 1](#exercise-level-1) + - [Esercizio: Livello 2](#exercise-level-2) + - [Esercizio: Livello 3](#exercise-level-3) + +# 📔 Giorno 5 + +## Arrays + +A differenza delle variabili, un array può memorizzare _molti valori_. Ogni valore in un array ha un _indice_ e ogni indice ha _un riferimento in un indirizzo di memoria_. È possibile accedere a ciascun valore utilizzando i loro _indici_. L'indice di un array parte da _zero_ e l'indice dell'ultimo elemento è diminuito di uno rispetto alla lunghezza dell'array. + +Un array è una raccolta di diversi tipi di dati ordinati e modificabili. Un array consente di memorizzare elementi duplicati e tipi di dati diversi. Una array può essere vuoto o può contenere valori di tipi di dati diversi. + +### Come creare un array vuoto + +In JavaScript, possiamo creare un array in diversi modi. Vediamo i diversi modi per creare un array. +È molto comune usare _const_ invece di _let_ per dichiarare una variabile di un array. Se si usa const, significa che non si usa più il nome di quella variabile. + +- Usare il costruttore Array + +```js +// syntax +const arr = Array() +// or +// let arr = new Array() +console.log(arr) // [] +``` + +- Usare le parentesi quadre ([]) + +```js +// syntax +// This the most recommended way to create an empty list +const arr = [] +console.log(arr) +``` + +### Come creare un array contenente valori + +Array con valori iniziali. Utilizziamo la proprietà _length_ per trovare la lunghezza di un array. + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array of numbers +const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of strings, fruits +const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of strings, vegetables +const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // array of strings, products +const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // array of web technologies +const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // array of strings, countries + +// Print the array and its length + +console.log('Numbers:', numbers) +console.log('Number of numbers:', numbers.length) + +console.log('Fruits:', fruits) +console.log('Number of fruits:', fruits.length) + +console.log('Vegetables:', vegetables) +console.log('Number of vegetables:', vegetables.length) + +console.log('Animal products:', animalProducts) +console.log('Number of animal products:', animalProducts.length) + +console.log('Web technologies:', webTechs) +console.log('Number of web technologies:', webTechs.length) + +console.log('Countries:', countries) +console.log('Number of countries:', countries.length) +``` + +```sh +Numbers: [0, 3.14, 9.81, 37, 98.6, 100] +Number of numbers: 6 +Fruits: ['banana', 'orange', 'mango', 'lemon'] +Number of fruits: 4 +Vegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] +Number of vegetables: 5 +Animal products: ['milk', 'meat', 'butter', 'yoghurt'] +Number of animal products: 4 +Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] +Number of web technologies: 7 +Countries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway'] +Number of countries: 5 +``` + +- Un array può contenere elementi di diversi tipi di dati + +```js +const arr = [ + 'Asabeneh', + 250, + true, + { country: 'Finland', city: 'Helsinki' }, + { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] } +] // arr containing different data types +console.log(arr) +``` + +### Creare un array usando la funzione split + +Come abbiamo visto nella sezione precedente, possiamo dividere una stringa in diverse posizioni e convertirla in un array. Vediamo gli esempi seguenti. + +```js +let js = 'JavaScript' +const charsInJavaScript = js.split('') + +console.log(charsInJavaScript) // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"] + +let companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' +const companies = companiesString.split(',') + +console.log(companies) // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"] +let txt = + 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.' +const words = txt.split(' ') + +console.log(words) +// the text has special characters think how you can just get only the words +// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"] +``` + +### Accedere agli elementi dell'array usando l'indice + +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. + +![arr index](../images/array_index.png) + +```js +const fruits = ['banana', 'orange', 'mango', 'lemon'] +let firstFruit = fruits[0] // we are accessing the first item using its index + +console.log(firstFruit) // banana + +secondFruit = fruits[1] +console.log(secondFruit) // orange + +let lastFruit = fruits[3] +console.log(lastFruit) // lemon +// Last index can be calculated as follows + +let lastIndex = fruits.length - 1 +lastFruit = fruits[lastIndex] + +console.log(lastFruit) // lemon +``` + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // set of numbers + +console.log(numbers.length) // => to know the size of the array, which is 6 +console.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100] +console.log(numbers[0]) // -> 0 +console.log(numbers[5]) // -> 100 + +let lastIndex = numbers.length - 1; +console.log(numbers[lastIndex]) // -> 100 +``` + +```js +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] // List of web technologies + +console.log(webTechs) // all the array items +console.log(webTechs.length) // => to know the size of the array, which is 7 +console.log(webTechs[0]) // -> HTML +console.log(webTechs[6]) // -> MongoDB + +let lastIndex = webTechs.length - 1 +console.log(webTechs[lastIndex]) // -> MongoDB +``` + +```js +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +] // List of countries + +console.log(countries) // -> all countries in array +console.log(countries[0]) // -> Albania +console.log(countries[10]) // -> Kenya + +let lastIndex = countries.length - 1; +console.log(countries[lastIndex]) // -> Kenya +``` + +```js +const shoppingCart = [ + 'Milk', + 'Mango', + 'Tomato', + 'Potato', + 'Avocado', + 'Meat', + 'Eggs', + 'Sugar' +] // List of food products + +console.log(shoppingCart) // -> all shoppingCart in array +console.log(shoppingCart[0]) // -> Milk +console.log(shoppingCart[7]) // -> Sugar + +let lastIndex = shoppingCart.length - 1; +console.log(shoppingCart[lastIndex]) // -> Sugar +``` + +### Modificare gli elementi dell'array + +Un array è mutabile (modificabile). Una volta creato un array, è possibile modificarne il contenuto degli elementi. + +```js +const numbers = [1, 2, 3, 4, 5] +numbers[0] = 10 // changing 1 at index 0 to 10 +numbers[1] = 20 // changing 2 at index 1 to 20 + +console.log(numbers) // [10, 20, 3, 4, 5] + +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +] + +countries[0] = 'Afghanistan' // Replacing Albania by Afghanistan +let lastIndex = countries.length - 1 +countries[lastIndex] = 'Korea' // Replacing Kenya by Korea + +console.log(countries) +``` + +```sh +["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"] +``` + +### Methods to manipulate array + +Esistono diversi metodi per manipolare un array. Questi sono alcuni dei metodi disponibili per gestire gli array:_Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_ + +#### Il Costruttore dell'array + +Array: Crea un array. + +```js +const arr = Array() // creates an an empty array +console.log(arr) + +const eightEmptyValues = Array(8) // it creates eight empty values +console.log(eightEmptyValues) // [empty x 8] +``` + +#### Creare valori statici con fill + +fill: Riempe l'array con l'elemento specificato. + +```js +const arr = Array() // creates an an empty array +console.log(arr) + +const eightXvalues = Array(8).fill('X') // it creates eight element values filled with 'X' +console.log(eightXvalues) // ['X', 'X','X','X','X','X','X','X'] + +const eight0values = Array(8).fill(0) // it creates eight element values filled with '0' +console.log(eight0values) // [0, 0, 0, 0, 0, 0, 0, 0] + +const four4values = Array(4).fill(4) // it creates 4 element values filled with '4' +console.log(four4values) // [4, 4, 4, 4] +``` + +#### Concatenare array usando concat + +concat: Concatena due array. + +```js +const firstList = [1, 2, 3] +const secondList = [4, 5, 6] +const thirdList = firstList.concat(secondList) + +console.log(thirdList) // [1, 2, 3, 4, 5, 6] +``` + +```js +const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of fruits +const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of vegetables +const fruitsAndVegetables = fruits.concat(vegetables) // concatenate the two arrays + +console.log(fruitsAndVegetables) +``` + +```sh +["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"] +``` + +#### Ottenere la lunghezza dell'array + +Length:Per conoscere la lunghezza dell'array. + +```js +const numbers = [1, 2, 3, 4, 5] +console.log(numbers.length) // -> 5 is the size of the array +``` + +#### Ottenere l'indice di un elemento nell'array + +indexOf:Per verificare se un elemento esiste in un array. Se esiste, viene restituito l'indice, altrimenti viene restituito -1. + +```js +const numbers = [1, 2, 3, 4, 5] + +console.log(numbers.indexOf(5)) // -> 4 +console.log(numbers.indexOf(0)) // -> -1 +console.log(numbers.indexOf(1)) // -> 0 +console.log(numbers.indexOf(6)) // -> -1 +``` + +Controlla che l'elemento esista nell'array. + +- Controlla gli elementi in una lista. + +```js +// let us check if a banana exist in the array + +const fruits = ['banana', 'orange', 'mango', 'lemon'] +let index = fruits.indexOf('banana') // 0 + +if(index === -1){ + console.log('This fruit does not exist in the array') +} else { + console.log('This fruit does exist in the array') +} +// This fruit does exist in the array + +// we can use also ternary here +index === -1 ? console.log('This fruit does not exist in the array'): console.log('This fruit does exist in the array') + +// let us check if an avocado exist in the array +let indexOfAvocado = fruits.indexOf('avocado') // -1, if the element not found index is -1 +if(indexOfAvocado === -1){ + console.log('This fruit does not exist in the array') +} else { + console.log('This fruit does exist in the array') +} +// This fruit does not exist in the array +``` + +#### Ottenere l'ultimo indice di un elemento nell'array + +lastIndexOf: Fornisce la posizione dell'ultimo elemento dell'array. Se esiste, restituisce l'indice, altrimenti restituisce -1. + +```js +const numbers = [1, 2, 3, 4, 5, 3, 1, 2] + +console.log(numbers.lastIndexOf(2)) // 7 +console.log(numbers.lastIndexOf(0)) // -1 +console.log(numbers.lastIndexOf(1)) // 6 +console.log(numbers.lastIndexOf(4)) // 3 +console.log(numbers.lastIndexOf(6)) // -1 +``` + +includes:Per verificare se un elemento esiste in un array. Se esiste, restituisce true, altrimenti restituisce false. + +```js +const numbers = [1, 2, 3, 4, 5] + +console.log(numbers.includes(5)) // true +console.log(numbers.includes(0)) // false +console.log(numbers.includes(1)) // true +console.log(numbers.includes(6)) // false + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] // List of web technologies + +console.log(webTechs.includes('Node')) // true +console.log(webTechs.includes('C')) // false +``` + +#### Verificare l'array + +Array.isArray:Per verificare se il tipo di dato è un array. + +```js +const numbers = [1, 2, 3, 4, 5] +console.log(Array.isArray(numbers)) // true + +const number = 100 +console.log(Array.isArray(number)) // false +``` + +#### Convertire l'array in stringa + +toString:Converts array to string + +```js +const numbers = [1, 2, 3, 4, 5] +console.log(numbers.toString()) // 1,2,3,4,5 + +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +console.log(names.toString()) // Asabeneh,Mathias,Elias,Brook +``` + +#### Unire elementi array + +join: Viene utilizzato per unire gli elementi dell'array; l'argomento passato nel metodo join verrà unito con l'array e restituito come stringa. Per impostazione predefinita, unisce con una virgola, ma possiamo passare diversi parametri stringa che possono unire gli elementi. + +```js +const numbers = [1, 2, 3, 4, 5] +console.log(numbers.join()) // 1,2,3,4,5 + +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] + +console.log(names.join()) // Asabeneh,Mathias,Elias,Brook +console.log(names.join('')) //AsabenehMathiasEliasBrook +console.log(names.join(' ')) //Asabeneh Mathias Elias Brook +console.log(names.join(', ')) //Asabeneh, Mathias, Elias, Brook +console.log(names.join(' # ')) //Asabeneh # Mathias # Elias # Brook + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] // List of web technologies + +console.log(webTechs.join()) // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB" +console.log(webTechs.join(' # ')) // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB" +``` + +#### Dividere gli elementi dell'array + +Slice: Per ritagliare più elementi in un intervallo. Richiede due parametri: posizione iniziale e posizione finale. Non include la posizione finale. + +```js + const numbers = [1,2,3,4,5] + + console.log(numbers.slice()) // -> it copies all item + console.log(numbers.slice(0)) // -> it copies all item + console.log(numbers.slice(0, numbers.length)) // it copies all item + console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position +``` + +#### Il metodo Splice con gli array + +Splice: Richiede tre parametri: posizione iniziale, numero di volte da rimuovere e numero di elementi da aggiungere. + +```js + const numbers = [1, 2, 3, 4, 5] + numbers.splice() + console.log(numbers) // -> remove all items + +``` + +```js + const numbers = [1, 2, 3, 4, 5] + numbers.splice(0,1) + console.log(numbers) // remove the first item +``` + +```js + const numbers = [1, 2, 3, 4, 5, 6] + numbers.splice(3, 3, 7, 8, 9) + console.log(numbers.splice(3, 3, 7, 8, 9)) // -> [1, 2, 3, 7, 8, 9] //it removes three item and replace three items +``` + +#### Aggiungere un elemento all'array usando push + +Push: Per aggiungere un elemento alla fine di un array esistente, si usa il metodo push. + +```js +// syntax +const arr = ['item1', 'item2','item3'] +arr.push('new item') +console.log(arr) +// ['item1', 'item2','item3','new item'] +``` + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.push(6) +console.log(numbers) // -> [1,2,3,4,5,6] + +numbers.pop() // -> remove one item from the end +console.log(numbers) // -> [1,2,3,4,5] +``` + +```js +let fruits = ['banana', 'orange', 'mango', 'lemon'] +fruits.push('apple') +console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple'] + +fruits.push('lime') +console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime'] +``` + +#### Rimuovere l'ultimo elemento usando pop + +pop: Rimuove l' elemento in coda. + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.pop() // -> remove one item from the end +console.log(numbers) // -> [1,2,3,4] +``` + +#### Rimuovere un elemento dall'inizio dell'array + +shift: Rimuove l'elemento in testa (prima posizione). + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.shift() // -> remove one item from the beginning +console.log(numbers) // -> [2,3,4,5] +``` + +#### Aggiungere un elemento in prima posizione dell'array + +unshift: Aggiunge un elemento in prima posizione. + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.unshift(0) // -> add one item from the beginning +console.log(numbers) // -> [0,1,2,3,4,5] +``` + +#### Invertire l'ordine dell'array + +reverse: Inverti l'ordine degli elementi. + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.reverse() // -> reverse array order +console.log(numbers) // [5, 4, 3, 2, 1] + +numbers.reverse() +console.log(numbers) // [1, 2, 3, 4, 5] +``` + +#### Ordinare gli elementi di un array + +sort: dispone gli elementi dell'array in ordine crescente. L'ordinamento richiede una funzione di richiamo; vedremo come utilizzare l'ordinamento con una funzione di richiamo nelle prossime sezioni. + +```js +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] + +webTechs.sort() +console.log(webTechs) // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"] + +webTechs.reverse() // after sorting we can reverse it +console.log(webTechs) // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"] +``` + +### Array di array + +Gli array possono memorizzare diversi tipi di dati, compreso l'array stesso. Creiamo un array di array + +```js +const firstNums = [1, 2, 3] +const secondNums = [1, 4, 9] + +const arrayOfArray = [[1, 2, 3], [1, 2, 3]] +console.log(arrayOfArray[0]) // [1, 2, 3] + + const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux'] + const backEnd = ['Node','Express', 'MongoDB'] + const fullStack = [frontEnd, backEnd] + console.log(fullStack) // [["HTML", "CSS", "JS", "React", "Redux"], ["Node", "Express", "MongoDB"]] + console.log(fullStack.length) // 2 + console.log(fullStack[0]) // ["HTML", "CSS", "JS", "React", "Redux"] + console.log(fullStack[1]) // ["Node", "Express", "MongoDB"] +``` + +🌕 Sei diligenti e hai già ottenuto molti risultati. Hai appena completato le sfide del 5° giorno e sei a 5 passi dalla tua strada verso la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli. + +## 💻 Esercizio + +### Esercizio: Livello 1 + +```js +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +] + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] +``` + +1. Dichiarare un array _vuoto_; +2. Dichiarare un array con un numero di elementi superiore a 5 +3. Trovare la lunghezza dell'array +4. Ottenere il primo elemento, l'elemento centrale e l'ultimo elemento dell'array. +5. Dichiarare un array chiamato _mixedDataTypes_, inserire diversi tipi di dati nell'array e trovare la lunghezza dell'array. La dimensione dell'array deve essere maggiore di 5 +6. Dichiarare una variabile array chiamata itAziende e assegnare i valori iniziali Facebook, Google, Microsoft, Apple, IBM, Oracle e Amazon. +7. Stampare l'array utilizzando _console.log()_. +8. Stampare il numero di aziende nell'array +9. Stampare la prima azienda, la metà e l'ultima azienda +10. Stampare ogni azienda +11. Cambiare il nome di ogni azienda in maiuscolo, uno per uno, e stamparli. +12. Stampare la matrice come una frase: Facebook, Google, Microsoft, Apple, IBM, Oracle e Amazon sono grandi aziende IT. +13. Controllare se una certa azienda esiste nell'array itCompanies. Se esiste, restituisce l'azienda, altrimenti restituisce un'azienda _non trovata_. +14. Filtrare le aziende che hanno più di una "o" senza il metodo del filtro. +15. Ordinare l'array usando il metodo _sort()_. +16. Invertire l'array utilizzando il metodo _reverse()_. +17. Estrarre le prime 3 società dall'array. +18. Eliminare le ultime 3 aziende dall'array. +19. Eliminare dall'array l'azienda o le aziende IT centrali. +20. Rimuovere la prima azienda IT dall'array +21. Rimuovere l'azienda o le aziende IT centrali dall'array. +22. Rimuovere l'ultima azienda IT dall'array +23. Rimuovere tutte le aziende IT + +### Esercizio: Livello 2 + +1. Creare un file separato countries.js e memorizzare l'array dei Paesi in questo file, creare un file separato web_techs.js e memorizzare l'array webTechs in questo file. Accedere a entrambi i file nel file main.js +1. Per prima cosa rimuovete tutte le punteggiature, cambiate la stringa in array e contate il numero di parole nell'array. + + ```js + let text = + 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.' + console.log(words) + console.log(words.length) + ``` + + ```sh + ["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"] + + 13 + ``` + +1. Nel seguente carrello della spesa aggiungere, rimuovere, modificare gli articoli + + ```js + const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey'] + ``` + + - aggiungere "Carne" all'inizio del carrello se non è già stato aggiunto + - aggiungere "Zucchero" alla fine del carrello se non è già stato aggiunto + - rimuovere "Miele" se si è allergici al miele + - modificare il tè in "Tè verde". +1. Nell'array dei Paesi controllare se 'Etiopia' esiste nell'array, se esiste stampare 'ETIOPIA'. Se non esiste, aggiungerlo all'elenco dei paesi. +1. Nell'array webTechs verificare se Sass esiste nell'array e se esiste stampare 'Sass è un preprocesso CSS'. Se non esiste, aggiungere Sass all'array e stampare l'array. +1. Concatenare le due variabili seguenti e memorizzarle in una variabile fullStack. + + ```js + const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux'] + const backEnd = ['Node','Express', 'MongoDB'] + + console.log(fullStack) + ``` + + ```sh + ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] + ``` + +### Esercizio: Livello 3 + +1. Di seguito è riportata una serie di 10 studenti di età: + + ```js + const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24] + ``` + + - Ordinare l'array e trovare l'età minima e massima + - Trovare l'età mediana (un elemento centrale o due elementi centrali divisi per due) + - Trovare l'età media (tutti gli elementi divisi per il numero di elementi) + - Trovare l'intervallo delle età (max meno min) + - Confrontare il valore di (min - media) e (max - media), utilizzando il metodo _abs()_. +1.Tagliare i primi dieci Paesi dalla [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +1. Trovare il/i Paese/i centrale/i nella [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +2. Dividere l'array di paesi in due array uguali se è pari. Se l'array dei paesi non è pari, un altro paese per la prima metà. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 4](../04_Day_Conditionals/04_day_Conditionals.md) | [Day 6 >>](../06_Day_Loops/06_day_loops.md) diff --git a/Italian/06_Day_Loops/06_day_loops.md b/Italian/06_Day_Loops/06_day_loops.md new file mode 100644 index 0000000..b7c8c6b --- /dev/null +++ b/Italian/06_Day_Loops/06_day_loops.md @@ -0,0 +1,484 @@ +
+

30 Days Of JavaScript: Loops

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 5](../05_Day_Arrays/05_day_arrays.md) | [Day 7 >>](../07_Day_Functions/07_day_functions.md) + +![Day 5](../../images/banners/day_1_6.png) + +- [📔 Giorno 6](#-day-6) + - [Loops](#loops) + - [for Loop](#for-loop) + - [while loop](#while-loop) + - [do while loop](#do-while-loop) + - [for of loop](#for-of-loop) + - [break](#break) + - [continue](#continue) + - [💻 Esercizi:Day 6](#-exercisesday-6) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# 📔 Giorno 6 + +## Loops + +La maggior parte delle attività che svolgiamo nella vita sono piene di ripetizioni. Immaginate se vi chiedessi di stampare da 0 a 100 usando console.log(). Per eseguire questo semplice compito potreste impiegare dai 2 ai 5 minuti; questo tipo di attività noiosa e ripetitiva può essere eseguita con un ciclo. Se si preferisce guardare i video, è possibile consultare la pagina [video tutorials](https://www.youtube.com/channel/UCM4xOopkYiPwJqyKsSqL9mw) + +Nei linguaggi di programmazione, per svolgere attività ripetitive si utilizzano diversi tipi di loop. I seguenti esempi sono i cicli comunemente utilizzati in JavaScript e in altri linguaggi di programmazione. + +### for Loop + +```js +// For loop structure +for(initialization, condition, increment/decrement){ + // code goes here +} +``` + +```js +for(let i = 0; i <= 5; i++){ + console.log(i) +} + +// 0 1 2 3 4 5 +``` + +```js +for(let i = 5; i >= 0; i--){ + console.log(i) +} + +// 5 4 3 2 1 0 +``` + +```js +for(let i = 0; i <= 5; i++){ + console.log(`${i} * ${i} = ${i * i}`) +} +``` + +```sh +0 * 0 = 0 +1 * 1 = 1 +2 * 2 = 4 +3 * 3 = 9 +4 * 4 = 16 +5 * 5 = 25 +``` + +```js +const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'Iceland'] +const newArr = [] +for(let i = 0; i < countries.length; i++){ + newArr.push(countries[i].toUpperCase()) +} + +// ["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"] +``` + +Aggiunta di tutti gli elementi dell'array + +```js +const numbers = [1, 2, 3, 4, 5] +let sum = 0 +for(let i = 0; i < numbers.length; i++){ + sum = sum + numbers[i] // can be shorten, sum += numbers[i] + +} + +console.log(sum) // 15 +``` + +Creare un nuovo array basato sull'array esistente + +```js +const numbers = [1, 2, 3, 4, 5] +const newArr = [] +let sum = 0 +for(let i = 0; i < numbers.length; i++){ + newArr.push( numbers[i] ** 2) + +} + +console.log(newArr) // [1, 4, 9, 16, 25] +``` + +```js +const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] +const newArr = [] +for(let i = 0; i < countries.length; i++){ + newArr.push(countries[i].toUpperCase()) +} + +console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +### while loop + +```js +let i = 0 +while (i <= 5) { + console.log(i) + i++ +} + +// 0 1 2 3 4 5 +``` + +### do while loop + +```js +let i = 0 +do { + console.log(i) + i++ +} while (i <= 5) + +// 0 1 2 3 4 5 +``` + +### for of loop + +Utilizziamo il ciclo for per gli array. È un modo molto pratico per iterare un array se non siamo interessati all'indice di ogni elemento dell'array. + +```js +for (const element of arr) { + // code goes here +} +``` + +```js + +const numbers = [1, 2, 3, 4, 5] + +for (const num of numbers) { + console.log(num) +} + +// 1 2 3 4 5 + +for (const num of numbers) { + console.log(num * num) +} + +// 1 4 9 16 25 + +// adding all the numbers in the array +let sum = 0 +for (const num of numbers) { + sum = sum + num + // can be also shorten like this, sum += num + // after this we will use the shorter synthax(+=, -=, *=, /= etc) +} +console.log(sum) // 15 + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] + +for (const tech of webTechs) { + console.log(tech.toUpperCase()) +} + +// HTML CSS JAVASCRIPT REACT NODE MONGODB + +for (const tech of webTechs) { + console.log(tech[0]) // get only the first letter of each element, H C J R N M +} + +``` + +```js +const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] +const newArr = [] +for(const country of countries){ + newArr.push(country.toUpperCase()) +} + +console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +### break + +Break viene utilizzato per interrompere un ciclo. + +```js +for(let i = 0; i <= 5; i++){ + if(i == 3){ + break + } + console.log(i) +} + +// 0 1 2 +``` + +Il codice precedente si arresta se viene trovato 3 nel processo di iterazione. + +### continue + +Utilizziamo la parola chiave *continue* per saltare una determinata iterazione. + +```js +for(let i = 0; i <= 5; i++){ + if(i == 3){ + continue + } + console.log(i) +} + +// 0 1 2 4 5 +``` + +🌕 Sei molto coraggioso, sei arrivato fino a questo punto. Ora hai acquisito il potere di automatizzare compiti ripetitivi e noiosi. Hai appena completato le sfide del sesto giorno e sei a 6 passi dalla vostra strada verso la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli. + +## 💻 Esercizi:Day 6 + +### Esercizi: Livello 1 + + ```js + const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' + ] + + const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' + ] + + const mernStack = ['MongoDB', 'Express', 'React', 'Node'] + ``` + +1. Iterare da 0 a 10 usando il ciclo for, fare lo stesso usando il ciclo while e do while +2. Iterare da 10 a 0 usando il ciclo for, fare lo stesso usando il ciclo while e do while +3. Iterare da 0 a n usando il ciclo for +4. Scrivete un ciclo che esegua il seguente schema utilizzando console.log(): + + ```js + # + ## + ### + #### + ##### + ###### + ####### + ``` + +5. Utilizzare il loop per stampare il seguente schema: + + ```sh + 0 x 0 = 0 + 1 x 1 = 1 + 2 x 2 = 4 + 3 x 3 = 9 + 4 x 4 = 16 + 5 x 5 = 25 + 6 x 6 = 36 + 7 x 7 = 49 + 8 x 8 = 64 + 9 x 9 = 81 + 10 x 10 = 100 + ``` + +6. Utilizzando il loop stampate il seguente schema + + ```sh + i i^2 i^3 + 0 0 0 + 1 1 1 + 2 4 8 + 3 9 27 + 4 16 64 + 5 25 125 + 6 36 216 + 7 49 343 + 8 64 512 + 9 81 729 + 10 100 1000 + ``` + +7. Utilizzare il ciclo for per iterare da 0 a 100 e stampare solo i numeri pari. +8. Usare il ciclo for per iterare da 0 a 100 e stampare solo i numeri dispari +9. Usare il ciclo for per iterare da 0 a 100 e stampare solo i numeri primi +10. Usare il ciclo for per iterare da 0 a 100 e stampare la somma di tutti i numeri. + + ```sh + The sum of all numbers from 0 to 100 is 5050. + ``` + +11. Utilizzare il ciclo for per iterare da 0 a 100 e stampare la somma di tutti i pari e la somma di tutti i dispari. + + ```sh + The sum of all evens from 0 to 100 is 2550. And the sum of all odds from 0 to 100 is 2500. + ``` + +12. Utilizzare il ciclo for per iterare da 0 a 100 e stampare la somma di tutti i pari e la somma di tutti i dispari. Stampa della somma dei pari e della somma dei dispari come array + + ```sh + [2550, 2500] + ``` + +13. Sviluppare un piccolo script che generi un array di 5 numeri casuali. +14. Sviluppare un piccolo script che generi un array di 5 numeri casuali e i numeri devono essere unici. +15. Sviluppare un piccolo script che generi un id casuale di sei caratteri: + + ```sh + 5j2khz + ``` + +### Esercizi: Livello 2 + +1. Sviluppare un piccolo script che generi un numero qualsiasi di caratteri di id casuale: + + ```sh + fe3jo1gl124g + ``` + + ```sh + xkqci4utda1lmbelpkm03rba + ``` + +1. Scrivere uno script che generi un numero esadecimale casuale. + + ```sh + '#ee33df' + ``` + +1. Scrivere uno script che genera un numero di colore rgb casuale. + + ```sh + rgb(240,180,80) + ``` + +1. Utilizzando l'array di paesi di cui sopra, creare il seguente nuovo array. + + ```sh + ["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"] + ``` + +1. Utilizzando l'array di paesi di cui sopra, creare un array per la lunghezza dei paesi".. + + ```sh + [7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5] + ``` + +1. Utilizzare l'array dei paesi per creare il seguente array di array: + + ```sh + [ + ['Albania', 'ALB', 7], + ['Bolivia', 'BOL', 7], + ['Canada', 'CAN', 6], + ['Denmark', 'DEN', 7], + ['Ethiopia', 'ETH', 8], + ['Finland', 'FIN', 7], + ['Germany', 'GER', 7], + ['Hungary', 'HUN', 7], + ['Ireland', 'IRE', 7], + ['Iceland', 'ICE', 7], + ['Japan', 'JAP', 5], + ['Kenya', 'KEN', 5] + ] + ``` + +2. Nell'array di paesi di cui sopra, verificare se ci sono uno o più paesi contenenti la parola "terra". Se ci sono paesi contenenti "terra", stamparli come array. Se non c'è nessun paese contenente la parola "terra", stampare "Tutti questi paesi sono senza terra". + + ```sh + ['Finland','Ireland', 'Iceland'] + ``` + +3. Nell'array di paesi di cui sopra, verificare se esiste un paese o se i paesi terminano con la sottostringa 'ia'. Se ci sono paesi che terminano con, stamparli come array. Se non c'è nessun paese che contiene la parola 'ai', viene stampato 'Questi sono i paesi che terminano senza ia'. + + ```sh + ['Albania', 'Bolivia','Ethiopia'] + ``` + +4. Utilizzando l'array di paesi di cui sopra, trovare il paese che contiene il maggior numero di caratteri. + + ```sh + Ethiopia + ``` + +5. Utilizzando l'array di paesi di cui sopra, trovare il paese che contiene solo 5 caratteri. + + ```sh + ['Japan', 'Kenya'] + ``` + +6. Trovare la parola più lunga nell'array WebTechs +7. Utilizzate l'array WebTechs per creare il seguente array di array: + + ```sh + [["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]] + ``` + +8. Un'applicazione creata utilizzando MongoDB, Express, React e Node è chiamata applicazione MERN stack. Creare l'acronimo MERN utilizzando l'array mernStack. +9. Iterare l'array ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] utilizzando un ciclo for o for of e stampare gli elementi. +10. Questo è un array di frutta, ['banana', 'arancia', 'mango', 'limone'] invertire l'ordine usando un ciclo senza usare un metodo inverso. +11. Stampate tutti gli elementi dell'array come mostrato di seguito. + + ```js + const fullStack = [ + ['HTML', 'CSS', 'JS', 'React'], + ['Node', 'Express', 'MongoDB'] + ] + ```` + + ```sh + HTML + CSS + JS + REACT + NODE + EXPRESS + MONGODB + ``` + +### Esercizi: Livello 3 + +1. Copiare l'array dei paesi (evitare la mutazione) +1. Gli array sono mutabili. Creare una copia dell'array che non modifichi l'originale. Ordinare l'array copiato e memorizzarlo in una variabile ordinataPaesi +1. Ordinare l'array WebTechs e l'array mernStack +1. Estrarre tutti i paesi che contengono la parola "terra" dall'array [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e stamparla come array +1. Trovare il paese che contiene il maggior numero di caratteri nella [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +1. Estrarre tutti i paesi che contengono la parola "terra" dall'[countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e stamparli come array +1. Estrarre tutti i paesi che contengono solo quattro caratteri dall'[countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e stamparli come array +1. Estraete tutti i paesi che contengono due o più parole dall'[countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e stampateli come array +1. Invertire la [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e scrivere in maiuscolo ogni paese e memorizzarlo come matrice + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 5](../05_Day_Arrays/05_day_arrays.md) | [Day 7 >>](../07_Day_Functions/07_day_functions.md) diff --git a/Italian/07_Day_Functions/07_day_functions.md b/Italian/07_Day_Functions/07_day_functions.md new file mode 100644 index 0000000..e0b71ef --- /dev/null +++ b/Italian/07_Day_Functions/07_day_functions.md @@ -0,0 +1,708 @@ +
+

30 Days Of JavaScript: Functions

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 6](../06_Day_Loops/06_day_loops.md) | [Day 8 >>](../08_Day_Objects/08_day_objects.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_7.png) + +- [📔 Giorno 7](#-day-7) + - [Funzioni](#functions) + - [Dichiarare una Funzione](#function-declaration) + - [Funzione senza parametro e valore di ritorno](#function-without-a-parameter-and-return) + - [Funzione con valore di ritorno](#function-returning-value) + - [Funzione con un parametro](#function-with-a-parameter) + - [Funzione con due parametri](#function-with-two-parameters) + - [Funzione con molti parametri](#function-with-many-parameters) + - [Funzione con numero illimitato di parametri](#function-with-unlimited-number-of-parameters) + - [Numero illimitato di parametri nelle funzioni regolari](#unlimited-number-of-parameters-in-regular-function) + - [Numero illimitato di parametri nelle arrow function](#unlimited-number-of-parameters-in-arrow-function) + - [Anonymous Function](#anonymous-function) + - [Expression Function](#expression-function) + - [Self Invoking Functions](#self-invoking-functions) + - [Arrow Function](#arrow-function) + - [Funzioni con parametri di default](#function-with-default-parameters) + - [Dichiarazione di funzione vs Arrow function](#function-declaration-versus-arrow-function) + - [💻 Esercizi](#-exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# 📔 Giorno 7 + +## Funzioni + +Finora abbiamo visto molte funzioni JavaScript integrate. In questa sezione ci concentreremo sulle funzioni personalizzate. Che cos'è una funzione? Prima di iniziare a creare funzioni, cerchiamo di capire cos'è una funzione e perché ne abbiamo bisogno. + +Una funzione è un blocco riutilizzabile di codice o di istruzioni di programmazione progettato per eseguire un determinato compito. +Una funzione è dichiarata da una parola chiave seguita da un nome, seguita da parentesi (). Una parentesi può contenere un parametro. Se una funzione accetta un parametro, verrà chiamata con un argomento. Una funzione può anche accettare un parametro predefinito. Per memorizzare un dato in una funzione, questa deve restituire determinati tipi di dati. Per ottenere il valore si chiama o si invoca una funzione. +Le funzioni rendono il codice + +- pulito e facile da leggere +- riutilizzabile +- facile da testare + +Una funzione può essere dichiarata o creata in due modi: + +- _Declaration function_ +- _Expression function_ +- _Anonymous function_ +- _Arrow function_ + +### Dichiarare una Funzione + +Vediamo come dichiarare una funzione e come chiamare una funzione. + +```js +//declaring a function without a parameter +function functionName() { + // code goes here +} +functionName() // calling function by its name and with parentheses +``` + +### Funzione senza parametro e valore di ritorno + +Le funzioni possono essere dichiarate senza parametri. + +**Esempio:** + +```js +// function without parameter, a function which make a number square +function square() { + let num = 2 + let sq = num * num + console.log(sq) +} + +square() // 4 + +// function without parameter +function addTwoNumbers() { + let numOne = 10 + let numTwo = 20 + let sum = numOne + numTwo + + console.log(sum) +} + +addTwoNumbers() // a function has to be called by its name to be executed +``` + +```js + function printFullName (){ + let firstName = 'Asabeneh' + let lastName = 'Yetayeh' + let space = ' ' + let fullName = firstName + space + lastName + console.log(fullName) +} + +printFullName() // calling a function +``` + +### Funzione con valore di ritorno + +Le funzioni possono anche restituire valori; se una funzione non restituisce valori, il valore della funzione è indefinito. Scriviamo le funzioni di cui sopra con il ritorno. D'ora in poi, restituiremo il valore a una funzione invece di stamparlo. + +```js +function printFullName (){ + let firstName = 'Asabeneh' + let lastName = 'Yetayeh' + let space = ' ' + let fullName = firstName + space + lastName + return fullName +} +console.log(printFullName()) +``` + +```js + + function addTwoNumbers() { + let numOne = 2 + let numTwo = 3 + let total = numOne + numTwo + return total + + } + +console.log(addTwoNumbers()) +``` + +### Funzione con un parametro + +In una funzione si possono passare come parametri diversi tipi di dati (numero, stringa, booleano, oggetto, funzione). + +```js +// function with one parameter +function functionName(parm1) { + //code goes her +} +functionName(parm1) // during calling or invoking one argument needed + +function areaOfCircle(r) { + let area = Math.PI * r * r + return area +} + +console.log(areaOfCircle(10)) // should be called with one argument + +function square(number) { + return number * number +} + +console.log(square(10)) +``` + +### Funzione con due parametri + +```js +// function with two parameters +function functionName(parm1, parm2) { + //code goes her +} +functionName(parm1, parm2) // during calling or invoking two arguments needed +// Function without parameter doesn't take input, so lets make a function with parameters +function sumTwoNumbers(numOne, numTwo) { + let sum = numOne + numTwo + console.log(sum) +} +sumTwoNumbers(10, 20) // calling functions +// If a function doesn't return it doesn't store data, so it should return + +function sumTwoNumbers(numOne, numTwo) { + let sum = numOne + numTwo + return sum +} + +console.log(sumTwoNumbers(10, 20)) +function printFullName(firstName, lastName) { + return `${firstName} ${lastName}` +} +console.log(printFullName('Asabeneh', 'Yetayeh')) +``` + +### Funzione con molti parametri + +```js +// function with multiple parameters +function functionName(parm1, parm2, parm3,...){ + //code goes here +} +functionName(parm1,parm2,parm3,...) // during calling or invoking three arguments needed + + +// this function takes array as a parameter and sum up the numbers in the array +function sumArrayValues(arr) { + let sum = 0; + for (let i = 0; i < arr.length; i++) { + sum = sum + arr[i]; + } + return sum; +} +const numbers = [1, 2, 3, 4, 5]; + //calling a function +console.log(sumArrayValues(numbers)); + + + const areaOfCircle = (radius) => { + let area = Math.PI * radius * radius; + return area; + } +console.log(areaOfCircle(10)) + +``` + +### Funzione con numero illimitato di parametri + +A volte non sappiamo quanti argomenti l'utente ci passerà. Pertanto, dobbiamo sapere come scrivere una funzione che può accettare un numero illimitato di argomenti. Il modo in cui lo facciamo presenta una differenza significativa tra una dichiarazione di funzione (funzione regolare) e una funzione freccia (arrow function). Vediamo alcuni esempi di dichiarazione di funzione e di funzione freccia. + +#### Numero illimitato di parametri nelle funzioni regolari + + Una dichiarazione di funzione fornisce un array di argomenti con ambito di funzione come un oggetto. Qualsiasi cosa passata come argomento nella funzione può essere accessibile dall'oggetto argomenti all'interno delle funzioni. Vediamo un esempio + + ```js +// Let us access the arguments object +​ +function sumAllNums() { + console.log(arguments) +} + +sumAllNums(1, 2, 3, 4) +// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] + +``` + +```js +// function declaration +​ +function sumAllNums() { + let sum = 0 + for (let i = 0; i < arguments.length; i++) { + sum += arguments[i] + } + return sum +} + +console.log(sumAllNums(1, 2, 3, 4)) // 10 +console.log(sumAllNums(10, 20, 13, 40, 10)) // 93 +console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173 +``` + +#### Numero illimitato di parametri nelle arrow function + + La funzione Arrow non ha l'oggetto argomenti con ambito di funzione. Per implementare una funzione che accetta un numero illimitato di argomenti, in una funzione freccia si utilizza l'operatore spread seguito da un qualsiasi nome di parametro. Qualsiasi cosa passata come argomento nella funzione può essere accessibile come array nella funzione freccia. Vediamo un esempio + + ```js +// Let us access the arguments object +​ +const sumAllNums = (...args) => { + // console.log(arguments), arguments object not found in arrow function + // instead we use a parameter followed by spread operator (...) + console.log(args) +} + +sumAllNums(1, 2, 3, 4) +// [1, 2, 3, 4] + +``` + +```js +// function declaration +​ +const sumAllNums = (...args) => { + let sum = 0 + for (const element of args) { + sum += element + } + return sum +} + +console.log(sumAllNums(1, 2, 3, 4)) // 10 +console.log(sumAllNums(10, 20, 13, 40, 10)) // 93 +console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173 +``` + +### Anonymous Function + +Funzione anonima o senza nome + +```js +const anonymousFun = function() { + console.log( + 'I am an anonymous function and my value is stored in anonymousFun' + ) +} +``` + +### Expression Function + +Le Expression Function sono funzioni anonime. Dopo aver creato una funzione senza nome, la assegniamo a una variabile. Per restituire un valore dalla funzione, dobbiamo chiamare la variabile. Guardate l'esempio seguente. + +```js + +// Function expression +const square = function(n) { + return n * n +} + +console.log(square(2)) // -> 4 +``` + +### Self Invoking Functions + +Le funzioni Self Invoking sono funzioni anonime che non hanno bisogno di essere chiamate per restituire un valore. + +```js +(function(n) { + console.log(n * n) +})(2) // 4, but instead of just printing if we want to return and store the data, we do as shown below + +let squaredNum = (function(n) { + return n * n +})(10) + +console.log(squaredNum) +``` + +### Arrow Function + +La Arrow function è un'alternativa per scrivere una funzione, tuttavia la dichiarazione di funzione e la Arrow function presentano alcune piccole differenze. + +La Arrow function utilizza la freccia invece della parola chiave *function* per dichiarare una funzione. Vediamo la dichiarazione di funzione e la funzione freccia. + +```js +// This is how we write normal or declaration function +// Let us change this declaration function to an arrow function +function square(n) { + return n * n +} + +console.log(square(2)) // 4 + +const square = n => { + return n * n +} + +console.log(square(2)) // -> 4 + +// if we have only one line in the code block, it can be written as follows, explicit return +const square = n => n * n // -> 4 +``` + +```js +const changeToUpperCase = arr => { + const newArr = [] + for (const element of arr) { + newArr.push(element.toUpperCase()) + } + return newArr +} + +const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] +console.log(changeToUpperCase(countries)) + +// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +```js +const printFullName = (firstName, lastName) => { + return `${firstName} ${lastName}` +} + +console.log(printFullName('Asabeneh', 'Yetayeh')) +``` + +La funzione di cui sopra ha solo l'istruzione return, quindi possiamo restituirla esplicitamente come segue. + +```js +const printFullName = (firstName, lastName) => `${firstName} ${lastName}` + +console.log(printFullName('Asabeneh', 'Yetayeh')) +``` + +### Funzioni con parametri di default + +A volte si passano dei valori predefiniti ai parametri; quando si invoca la funzione, se non si passa un argomento, verrà utilizzato il valore predefinito. Sia la dichiarazione di funzione che la funzione freccia possono avere uno o più valori predefiniti. + +```js +// syntax +// Declaring a function +function functionName(param = value) { + //codes +} + +// Calling function +functionName() +functionName(arg) +``` + +**Esempio:** + +```js +function greetings(name = 'Peter') { + let message = `${name}, welcome to 30 Days Of JavaScript!` + return message +} + +console.log(greetings()) +console.log(greetings('Asabeneh')) +``` + +```js +function generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') { + let space = ' ' + let fullName = firstName + space + lastName + return fullName +} + +console.log(generateFullName()) +console.log(generateFullName('David', 'Smith')) +``` + +```js +function calculateAge(birthYear, currentYear = 2019) { + let age = currentYear - birthYear + return age +} + +console.log('Age: ', calculateAge(1819)) +``` + +```js +function weightOfObject(mass, gravity = 9.81) { + let weight = mass * gravity + ' N' // the value has to be changed to string first + return weight +} + +console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravity at the surface of Earth +console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravity at surface of Moon +``` + +Vediamo come scrivere le funzioni di cui sopra con le funzioni a freccia + +```js +// syntax +// Declaring a function +const functionName = (param = value) => { + //codes +} + +// Calling function +functionName() +functionName(arg) +``` + +**Esempio:** + +```js +const greetings = (name = 'Peter') => { + let message = name + ', welcome to 30 Days Of JavaScript!' + return message +} + +console.log(greetings()) +console.log(greetings('Asabeneh')) +``` + +```js +const generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => { + let space = ' ' + let fullName = firstName + space + lastName + return fullName +} + +console.log(generateFullName()) +console.log(generateFullName('David', 'Smith')) +``` + +```js + +const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear +console.log('Age: ', calculateAge(1819)) +``` + +```js +const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N' + +console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravity at the surface of Earth +console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravity at surface of Moon +``` + +### Dichiarazione di funzione vs Arrow function + +Verrà trattato in un'altra sezione. + +🌕 Sei una stella nascente, ora conosci le funzioni. Sei super carico del potere delle funzioni. Hai appena completato le sfide del 7° giorno e sei a 7 passi dalla strada verso la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli. + + + +## 💻 Esercizi + +### Esercizi: Livello 1 + +1. Dichiarare una funzione _fullName_ e stampare il proprio nome completo. +2. Dichiarare una funzione _fullName_ che prenda come parametro firstName e lastName e restituisca il nome completo. +3. Dichiarate una funzione _addNumbers_ che prende due parametri e restituisce la somma. +4. L'area di un rettangolo si calcola come segue: _area = lunghezza x larghezza_. Scrivete una funzione che calcoli l'_area del rettangolo_. +5. Il perimetro di un rettangolo si calcola come segue: _perimetro= 2x(lunghezza + larghezza)_. Scrivete una funzione che calcoli il _perimetro del rettangolo_. +6. Il volume di un prisma rettangolare si calcola come segue: _volume = lunghezza x larghezza x altezza_. Scrivete una funzione che calcoli il _volume del prisma rettangolare_. +7. L'area di un cerchio si calcola come segue: _area = π x r x r_. Scrivere una funzione che calcoli _areaOfCircle_. +8. La circonferenza di un cerchio si calcola come segue: _circonferenza = 2πr_. Scrivere una funzione che calcoli _circonferenza_. +9. La densità di una sostanza si calcola come segue:_densità= massa/volume_. Scrivete una funzione che calcoli la _densità_. +10. La velocità si calcola dividendo la distanza totale coperta da un oggetto in movimento per il tempo totale impiegato. Scrivete una funzione che calcoli la velocità di un oggetto in movimento, _velocità_. +11. Il peso di una sostanza si calcola come segue: _peso = massa x gravità_. Scrivete una funzione che calcoli il _peso_. +12. La temperatura in oC può essere convertita in oF utilizzando questa formula: _oF = (oC x 9/5) + 32_. Scrivete una funzione che converta oC in oF _convertCelsiusToFahrenheit_. +13. L'indice di massa corporea (BMI) si calcola come segue: _bmi = peso in Kg / (altezza x altezza) in m2_. Scrivete una funzione che calcoli il _bmi_. L'IMC viene utilizzato per definire in modo generale diversi gruppi di peso negli adulti di 20 anni o più.Verificate se una persona è _sottopeso, normale, sovrappeso_ o _obesa_ sulla base delle informazioni fornite di seguito. + + - Gli stessi gruppi si applicano sia agli uomini che alle donne. + - Sottopeso: L'IMC è inferiore a 18,5 + - Peso normale: L'IMC è compreso tra 18,5 e 24,9 + - Sovrappeso: IMC compreso tra 25 e 29,9 + - _Obesità_: IMC pari o superiore a 30 + +14. Scrivete una funzione chiamata _checkSeason_, che prende un parametro mese e restituisce la stagione: autunno, inverno, primavera o estate. +15. Math.max restituisce il suo argomento più grande. Scrivete una funzione findMax che prenda tre argomenti e restituisca il loro massimo senza usare il metodo Math.max. + + ```js + console.log(findMax(0, 10, 5)) + 10 + console.log(findMax(0, -10, -2)) + 0 + ``` + +### Esercizi: Livello 2 + +1. L'equazione lineare è calcolata come segue: _ax + by + c = 0_. Scrivete una funzione che calcola il valore di un'equazione lineare, _solveLinEquation_. +2. L'equazione quadratica si calcola come segue: _ax2 + bx + c = 0_. Scrivete una funzione che calcoli il valore o i valori di un'equazione quadratica, _solveQuadEquation_. + + ```js + console.log(solveQuadratic()) // {0} + console.log(solveQuadratic(1, 4, 4)) // {-2} + console.log(solveQuadratic(1, -1, -2)) // {2, -1} + console.log(solveQuadratic(1, 7, 12)) // {-3, -4} + console.log(solveQuadratic(1, 0, -4)) //{2, -2} + console.log(solveQuadratic(1, -1, 0)) //{1, 0} + ``` + +3. Dichiarare una funzione chiamata _printArray_. Prende un array come parametro e stampa ogni valore dell'array. +4. Scrivete una funzione di nome _showDateTime_ che mostra l'ora in questo formato: 08/01/2020 04:08 utilizzando l'oggetto Date. + + ```sh + showDateTime() + 08/01/2020 04:08 + ``` + +5. Dichiarare il nome della funzione _swapValues_. Questa funzione scambia il valore di x con quello di y. + + ```js + swapValues(3, 4) // x => 4, y=>3 + swapValues(4, 5) // x = 5, y = 4 + ``` + +6. Dichiarare una funzione chiamata _reverseArray_. Prende un array come parametro e restituisce l'inverso dell'array (non usare il metodo). + + ```js + console.log(reverseArray([1, 2, 3, 4, 5])) + //[5, 4, 3, 2, 1] + console.log(reverseArray(['A', 'B', 'C'])) + //['C', 'B', 'A'] + ``` + +7. Dichiarare il nome della funzione _capitalizeArray_. Prende l'array come parametro e restituisce l'array - maiuscolo. +8. Dichiarare una funzione di nome _addItem_. Prende come parametro un elemento e restituisce un array dopo l'aggiunta dell'elemento. +9. Dichiarare una funzione di nome _removeItem_. Richiede un parametro indice e restituisce un array dopo la rimozione di un elemento. +10. Dichiarare una funzione di nome _sumOfNumbers_. Richiede un parametro numero e somma tutti i numeri in quell'intervallo. +11. Dichiarare una funzione di nome _sumOfOdds_. Prende come parametro un numero e somma tutti i numeri dispari in quell'intervallo. +12. Dichiarare una funzione di nome _sumOfEven_. Prende come parametro un numero e somma tutti i numeri pari in quell'intervallo. +13. Dichiarare il nome di una funzione _EvensAndOdds_. Prende come parametro un numero intero positivo e conta il numero di pari e dispari nel numero. + + ```sh + evensAndOdds(100); + The number of odds are 50. + The number of evens are 51. + ``` + +14. Write a function which takes any number of arguments and return the sum of the arguments + + ```js + sum(1, 2, 3) // -> 6 + sum(1, 2, 3, 4) // -> 10 + ``` + +15. Writ a function which generates a _randomUserIp_. +16. Write a function which generates a _randomMacAddress_ +17. Declare a function name _randomHexaNumberGenerator_. When this function is called it generates a random hexadecimal number. The function return the hexadecimal number. + + ```sh + console.log(randomHexaNumberGenerator()); + '#ee33df' + ``` + +18. Declare a function name _userIdGenerator_. When this function is called it generates seven character id. The function return the id. + + ```sh + console.log(userIdGenerator()); + 41XTDbE + ``` + +### Esercizi: Livello 3 + +1. Modify the _userIdGenerator_ function. Declare a function name _userIdGeneratedByUser_. It doesn’t take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated. + + ```sh + userIdGeneratedByUser() + 'kcsy2 + SMFYb + bWmeq + ZXOYh + 2Rgxf + ' + userIdGeneratedByUser() + '1GCSgPLMaBAVQZ26 + YD7eFwNQKNs7qXaT + ycArC5yrRupyG00S + UbGxOFI7UXSWAyKN + dIV0SSUTgAdKwStr + ' + ``` + +2. Write a function name _rgbColorGenerator_ and it generates rgb colors. + + ```sh + rgbColorGenerator() + rgb(125,244,255) + ``` + +3. Write a function **_arrayOfHexaColors_** which return any number of hexadecimal colors in an array. +4. Write a function **_arrayOfRgbColors_** which return any number of RGB colors in an array. +5. Write a function **_convertHexaToRgb_** which converts hexa color to rgb and it returns an rgb color. +6. Write a function **_convertRgbToHexa_** which converts rgb to hexa color and it returns an hexa color. +7. Write a function **_generateColors_** which can generate any number of hexa or rgb colors. + + ```js + console.log(generateColors('hexa', 3)) // ['#a3e12f', '#03ed55', '#eb3d2b'] + console.log(generateColors('hexa', 1)) // '#b334ef' + console.log(generateColors('rgb', 3)) // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)'] + console.log(generateColors('rgb', 1)) // 'rgb(33,79, 176)' + ``` + +8. Call your function _shuffleArray_, it takes an array as a parameter and it returns a shuffled array +9. Call your function _factorial_, it takes a whole number as a parameter and it return a factorial of the number +10. Call your function _isEmpty_, it takes a parameter and it checks if it is empty or not +11. Call your function _sum_, it takes any number of arguments and it returns the sum. +12. Write a function called _sumOfArrayItems_, it takes an array parameter and return the sum of all the items. Check if all the array items are number types. If not give return reasonable feedback. +13. Write a function called _average_, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give return reasonable feedback. +14. Write a function called _modifyArray_ takes array as parameter and modifies the fifth item of the array and return the array. If the array length is less than five it return 'item not found'. + + ```js + console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']); + ``` + + ```sh + ['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot'] + ``` + + ```js + console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft', 'IBM']); + ``` + + ```sh + ['Google', 'Facebook','Apple', 'Amazon','MICROSOFT', 'IBM'] + ``` + + ```js + console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']); + ``` + + ```sh + 'Not Found' + ``` + +15. Write a function called _isPrime_, which checks if a number is prime number. +16. Write a functions which checks if all items are unique in the array. +17. Write a function which checks if all the items of the array are the same data type. +18. JavaScript variable name does not support special characters or symbols except \$ or \_. Write a function **isValidVariable** which check if a variable is valid or invalid variable. +19. Write a function which returns array of seven random numbers in a range of 0-9. All the numbers must be unique. + + ```js + sevenRandomNumbers() + [(1, 4, 5, 7, 9, 8, 0)] + ``` + +20. Write a function called reverseCountries, it takes countries array and first it copy the array and returns the reverse of the original array + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 6](../06_Day_Loops/06_day_loops.md) | [Day 8 >>](../08_Day_Objects/08_day_objects.md) \ No newline at end of file diff --git a/Italian/08_Day_Objects/08_day_objects.md b/Italian/08_Day_Objects/08_day_objects.md new file mode 100644 index 0000000..40fe8fe --- /dev/null +++ b/Italian/08_Day_Objects/08_day_objects.md @@ -0,0 +1,595 @@ +
+

30 Days Of JavaScript: Objects

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 7](../07_Day_Functions/07_day_functions.md) | [Day 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_8.png) + +- [📔 Giorno 8](#-day-8) + - [Scope](#scope) + - [Window Global Object](#window-global-object) + - [Global scope](#global-scope) + - [Local scope](#local-scope) + - [📔 Object](#-object) + - [Creating an empty object](#creating-an-empty-object) + - [Creating an objecting with values](#creating-an-objecting-with-values) + - [Getting values from an object](#getting-values-from-an-object) + - [Creating object methods](#creating-object-methods) + - [Setting new key for an object](#setting-new-key-for-an-object) + - [Object Methods](#object-methods) + - [Getting object keys using Object.keys()](#getting-object-keys-using-objectkeys) + - [Getting object values using Object.values()](#getting-object-values-using-objectvalues) + - [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries) + - [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty) + - [💻 Esercizi](#-exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# 📔 Giorno 8 + +## Scope + +Variable is the fundamental part in programming. We declare variable to store different data types. To declare a variable we use the key word _var_, _let_ and _const_. A variable can be declared at different scope. In this section, we will see the scope variables, scope of variables when we use var or let. +Variables scopes can be: + +- Global +- Local + +Variable can be declared globally or locally scope. We will see both global and local scope. +Anything declared without let, var or const is scoped at global level. + +Let us imagine that we have a scope.js file. + +### Window Global Object + +Without using console.log() open your browser and check, you will see the value of a and b if you write a or b on the browser. That means a and b are already available in the window. + +```js +//scope.js +a = 'JavaScript' // declaring a variable without let or const make it available in window object and this found anywhere +b = 10 // this is a global scope variable and found in the window object +function letsLearnScope() { + console.log(a, b) + if (true) { + console.log(a, b) + } +} +console.log(a, b) // accessible +``` + +### Global scope + +A globally declared variable can be accessed every where in the same file. But the term global is relative. It can be global to the file or it can be global relative to some block of codes. + +```js +//scope.js +let a = 'JavaScript' // is a global scope it will be found anywhere in this file +let b = 10 // is a global scope it will be found anywhere in this file +function letsLearnScope() { + console.log(a, b) // JavaScript 10, accessible + if (true) { + let a = 'Python' + let b = 100 + console.log(a, b) // Python 100 + } + console.log(a, b) +} +letsLearnScope() +console.log(a, b) // JavaScript 10, accessible +``` + +### Local scope + +A variable declared as local can be accessed only in certain block code. + +- Block Scope +- Function Scope + +```js +//scope.js +let a = 'JavaScript' // is a global scope it will be found anywhere in this file +let b = 10 // is a global scope it will be found anywhere in this file +// Function scope +function letsLearnScope() { + console.log(a, b) // JavaScript 10, accessible + let value = false +// block scope + if (true) { + // we can access from the function and outside the function but + // variables declared inside the if will not be accessed outside the if block + let a = 'Python' + let b = 20 + let c = 30 + let d = 40 + value = !value + console.log(a, b, c, value) // Python 20 30 true + } + // we can not access c because c's scope is only the if block + console.log(a, b, value) // JavaScript 10 true +} +letsLearnScope() +console.log(a, b) // JavaScript 10, accessible +``` + +Now, you have an understanding of scope. A variable declared with *var* only scoped to function but variable declared with *let* or *const* is block scope(function block, if block, loop block, etc). Block in JavaScript is a code in between two curly brackets ({}). + +```js +//scope.js +function letsLearnScope() { + var gravity = 9.81 + console.log(gravity) + +} +// console.log(gravity), Uncaught ReferenceError: gravity is not defined + +if (true){ + var gravity = 9.81 + console.log(gravity) // 9.81 +} +console.log(gravity) // 9.81 + +for(var i = 0; i < 3; i++){ + console.log(i) // 0, 1, 2 +} +console.log(i) // 3 + +``` + +In ES6 and above there is *let* and *const*, so you will not suffer from the sneakiness of *var*. When we use *let* our variable is block scoped and it will not infect other parts of our code. + +```js +//scope.js +function letsLearnScope() { + // you can use let or const, but gravity is constant I prefer to use const + const gravity = 9.81 + console.log(gravity) + +} +// console.log(gravity), Uncaught ReferenceError: gravity is not defined + +if (true){ + const gravity = 9.81 + console.log(gravity) // 9.81 +} +// console.log(gravity), Uncaught ReferenceError: gravity is not defined + +for(let i = 0; i < 3; i++){ + console.log(i) // 0, 1, 2 +} +// console.log(i), Uncaught ReferenceError: i is not defined + +``` + +The scope *let* and *const* are the same. The difference is only reassigning. We can not change or reassign the value of the `const` variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will write clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, and for an array, object, arrow function and function expression. + +## 📔 Object + +Everything can be an object and objects do have properties and properties have values, so an object is a key value pair. The order of the key is not reserved, or there is no order. +To create an object literal, we use two curly brackets. + +### Creating an empty object + +An empty object + +```js +const person = {} +``` + +### Creating an objecting with values + +Now, the person object has firstName, lastName, age, location, skills and isMarried properties. The value of properties or keys could be a string, number, boolean, an object, null, undefined or a function. + +Let us see some examples of object. Each key has a value in the object. + +```js +const rectangle = { + length: 20, + width: 20 +} +console.log(rectangle) // {length: 20, width: 20} + +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + isMarried: true +} +console.log(person) +``` + +### Getting values from an object + +We can access values of object using two methods: + +- using . followed by key name if the key-name is a one word +- using square bracket and a quote + +```js +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + getFullName: function() { + return `${this.firstName}${this.lastName}` + }, + 'phone number': '+3584545454545' +} + +// accessing values using . +console.log(person.firstName) +console.log(person.lastName) +console.log(person.age) +console.log(person.location) // undefined + +// value can be accessed using square bracket and key name +console.log(person['firstName']) +console.log(person['lastName']) +console.log(person['age']) +console.log(person['age']) +console.log(person['location']) // undefined + +// for instance to access the phone number we only use the square bracket method +console.log(person['phone number']) +``` + +### Creating object methods + +Now, the person object has getFullName properties. The getFullName is function inside the person object and we call it an object method. The _this_ key word refers to the object itself. We can use the word _this_ to access the values of different properties of the object. We can not use an arrow function as object method because the word this refers to the window inside an arrow function instead of the object itself. Example of object: + +```js +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + getFullName: function() { + return `${this.firstName} ${this.lastName}` + } +} + +console.log(person.getFullName()) +// Asabeneh Yetayeh +``` + +### Setting new key for an object + +An object is a mutable data structure and we can modify the content of an object after it gets created. + +Setting a new keys in an object + +```js +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + getFullName: function() { + return `${this.firstName} ${this.lastName}` + } +} +person.nationality = 'Ethiopian' +person.country = 'Finland' +person.title = 'teacher' +person.skills.push('Meteor') +person.skills.push('SasS') +person.isMarried = true + +person.getPersonInfo = function() { + let skillsWithoutLastSkill = this.skills + .splice(0, this.skills.length - 1) + .join(', ') + let lastSkill = this.skills.splice(this.skills.length - 1)[0] + + let skills = `${skillsWithoutLastSkill}, and ${lastSkill}` + let fullName = this.getFullName() + let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.` + return statement +} +console.log(person) +console.log(person.getPersonInfo()) +``` + +```sh +Asabeneh Yetayeh is a teacher. +He lives in Finland. +He teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS. +``` + +### Object Methods + +There are different methods to manipulate an object. Let us see some of the available methods. + +_Object.assign_: To copy an object without modifying the original object + +```js +const person = { + firstName: 'Asabeneh', + age: 250, + country: 'Finland', + city:'Helsinki', + skills: ['HTML', 'CSS', 'JS'], + title: 'teacher', + address: { + street: 'Heitamienkatu 16', + pobox: 2002, + city: 'Helsinki' + }, + getPersonInfo: function() { + return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.` + } +} + +//Object methods: Object.assign, Object.keys, Object.values, Object.entries +//hasOwnProperty + +const copyPerson = Object.assign({}, person) +console.log(copyPerson) +``` + +#### Getting object keys using Object.keys() + +_Object.keys_: To get the keys or properties of an object as an array + +```js +const keys = Object.keys(copyPerson) +console.log(keys) //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo'] +const address = Object.keys(copyPerson.address) +console.log(address) //['street', 'pobox', 'city'] +``` + +#### Getting object values using Object.values() + +_Object.values_:To get values of an object as an array + +```js +const values = Object.values(copyPerson) +console.log(values) +``` + +#### Getting object keys and values using Object.entries() + +_Object.entries_:To get the keys and values in an array + +```js +const entries = Object.entries(copyPerson) +console.log(entries) +``` + +#### Checking properties using hasOwnProperty() + +_hasOwnProperty_: To check if a specific key or property exist in an object + +```js +console.log(copyPerson.hasOwnProperty('name')) +console.log(copyPerson.hasOwnProperty('score')) +``` + +🌕 You are astonishing. Now, you are super charged with the power of objects. You have just completed day 8 challenges and you are 8 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## 💻 Esercizi + +### Esercizi: Livello 1 + +1. Create an empty object called dog +1. Print the the dog object on the console +1. Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return _woof woof_ +1. Get name, legs, color, age and bark value from the dog object +1. Set new properties the dog object: breed, getDogInfo + +### Esercizi: Livello 2 + +1. Find the person who has many skills in the users object. +1. Count logged in users, count users having greater than equal to 50 points from the following object. + + ````js + const users = { + Alex: { + email: 'alex@alex.com', + skills: ['HTML', 'CSS', 'JavaScript'], + age: 20, + isLoggedIn: false, + points: 30 + }, + Asab: { + email: 'asab@asab.com', + skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'], + age: 25, + isLoggedIn: false, + points: 50 + }, + Brook: { + email: 'daniel@daniel.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'], + age: 30, + isLoggedIn: true, + points: 50 + }, + Daniel: { + email: 'daniel@alex.com', + skills: ['HTML', 'CSS', 'JavaScript', 'Python'], + age: 20, + isLoggedIn: false, + points: 40 + }, + John: { + email: 'john@john.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'], + age: 20, + isLoggedIn: true, + points: 50 + }, + Thomas: { + email: 'thomas@thomas.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React'], + age: 20, + isLoggedIn: false, + points: 40 + }, + Paul: { + email: 'paul@paul.com', + skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'], + age: 20, + isLoggedIn: false, + points: 40 + } + }``` + +1. Find people who are MERN stack developer from the users object +1. Set your name in the users object without modifying the original users object +1. Get all keys or properties of users object +1. Get all the values of users object +1. Use the countries object to print a country name, capital, populations and languages. + +### Esercizi: Livello 3 + +1. Create an object literal 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 a set of incomes and its description. +2. **** Questions:2, 3 and 4 are based on the following two arrays:users and products () + + ```js + const users = [ + { + _id: 'ab12ex', + username: 'Alex', + email: 'alex@alex.com', + password: '123123', + createdAt:'08/01/2020 9:00 AM', + isLoggedIn: false + }, + { + _id: 'fg12cy', + username: 'Asab', + email: 'asab@asab.com', + password: '123456', + createdAt:'08/01/2020 9:30 AM', + isLoggedIn: true + }, + { + _id: 'zwf8md', + username: 'Brook', + email: 'brook@brook.com', + password: '123111', + createdAt:'08/01/2020 9:45 AM', + isLoggedIn: true + }, + { + _id: 'eefamr', + username: 'Martha', + email: 'martha@martha.com', + password: '123222', + createdAt:'08/01/2020 9:50 AM', + isLoggedIn: false + }, + { + _id: 'ghderc', + username: 'Thomas', + email: 'thomas@thomas.com', + password: '123333', + createdAt:'08/01/2020 10:00 AM', + isLoggedIn: false + } + ]; + + const products = [ + { + _id: 'eedfcf', + name: 'mobile phone', + description: 'Huawei Honor', + price: 200, + ratings: [ + { userId: 'fg12cy', rate: 5 }, + { userId: 'zwf8md', rate: 4.5 } + ], + likes: [] + }, + { + _id: 'aegfal', + name: 'Laptop', + description: 'MacPro: System Darwin', + price: 2500, + ratings: [], + likes: ['fg12cy'] + }, + { + _id: 'hedfcg', + name: 'TV', + description: 'Smart TV:Procaster', + price: 400, + ratings: [{ userId: 'fg12cy', rate: 5 }], + likes: ['fg12cy'] + } + ] + ``` + + Imagine you are getting the above users collection from a MongoDB database. + a. Create a function called signUp which allows user to add to the collection. If user exists, inform the user that he has already an account. + b. Create a function called signIn which allows user to sign in to the application + +3. The products array has three elements and each of them has six properties. + a. Create a function called rateProduct which rates the product + b. Create a function called averageRating which calculate the average rating of a product + +4. Create a function called likeProduct. This function will helps to like to the product if it is not liked and remove like if it was liked. + + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 7](../07_Day_Functions/07_day_functions.md) | [Day 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) diff --git a/Italian/09_Day_Higher_order_functions/09_day_higher_order_functions.md b/Italian/09_Day_Higher_order_functions/09_day_higher_order_functions.md new file mode 100644 index 0000000..a6dee70 --- /dev/null +++ b/Italian/09_Day_Higher_order_functions/09_day_higher_order_functions.md @@ -0,0 +1,705 @@ +
+

30 Days Of JavaScript: Higher Order Functions

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 8](../08_Day_Objects/08_day_objects.md) | [Day 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) + +![Day 5](../../images/banners/day_1_9.png) + +- [Day 9](#day-9) + - [Higher Order Function](#higher-order-function) + - [Callback](#callback) + - [Returning function](#returning-function) + - [Setting time](#setting-time) + - [Setting Interval using a setInterval function](#setting-interval-using-a-setinterval-function) + - [Setting a time using a setTimeout](#setting-a-time-using-a-settimeout) + - [Functional Programming](#functional-programming) + - [forEach](#foreach) + - [map](#map) + - [filter](#filter) + - [reduce](#reduce) + - [every](#every) + - [find](#find) + - [findIndex](#findindex) + - [some](#some) + - [sort](#sort) + - [Sorting string values](#sorting-string-values) + - [Sorting Numeric values](#sorting-numeric-values) + - [Sorting Object Arrays](#sorting-object-arrays) + - [💻 Esercizi](#-exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# Day 9 + +## Higher Order Function + +Higher order functions are functions which take other function as a parameter or return a function as a value. The function passed as a parameter is called callback. + +### Callback + +A callback is a function which can be passed as parameter to other function. See the example below. + +```js +// a callback function, the name of the function could be any name +const callback = (n) => { + return n ** 2 +} +​ +// function that takes other function as a callback +function cube(callback, n) { + return callback(n) * n +} +​ +console.log(cube(callback, 3)) +``` + +### Returning function + +Higher order functions return function as a value +​ +```js +// Higher order function returning an other function +const higherOrder = n => { + const doSomething = m => { + const doWhatEver = t => { + return 2 * n + 3 * m + t + } + return doWhatEver + } + return doSomething +} +console.log(higherOrder(2)(3)(10)) +``` + +Let us see were we use call back functions. For instance the _forEach_ method uses call back. + +```js +const numbers = [1, 2, 3, 4, 5] +const sumArray = arr => { + let sum = 0 + const callback = function(element) { + sum += element + } + arr.forEach(callback) + return sum + +} +console.log(sumArray(numbers)) +``` + +```sh +15 +``` + +The above example can be simplified as follows: + +```js +const numbers = [1, 2, 3, 4] +​ +const sumArray = arr => { + let sum = 0 + arr.forEach(function(element) { + sum += element + }) + return sum + +} +console.log(sumArray(numbers)) +``` + +```sh +15 +``` + +### Setting time + +In JavaScript we can execute some activities in a certain interval of time or we can schedule(wait) for some time to execute some activities. + +- setInterval +- setTimeout + +#### Setting Interval using a setInterval function + +In JavaScript, we use setInterval higher order function to do some activity continuously with in some interval of time. The setInterval global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback will be always called in that interval of time. + +```js +// syntax +function callback() { + // code goes here +} +setInterval(callback, duration) +``` + +```js +function sayHello() { + console.log('Hello') +} +setInterval(sayHello, 1000) // it prints hello in every second, 1000ms is 1s +``` + +#### Setting a time using a setTimeout + +In JavaScript, we use setTimeout higher order function to execute some action at some time in the future. The setTimeout global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback wait for that amount of time. + +```js +// syntax +function callback() { + // code goes here +} +setTimeout(callback, duration) // duration in milliseconds +``` + +```js +function sayHello() { + console.log('Hello') +} +setTimeout(sayHello, 2000) // it prints hello after it waits for 2 seconds. +``` + +## Functional Programming + +Instead of writing regular loop, latest version of JavaScript introduced lots of built in methods which can help us to solve complicated problems. All builtin methods take callback function. In this section, we will see _forEach_, _map_, _filter_, _reduce_, _find_, _every_, _some_, and _sort_. + +### forEach + +_forEach_: Iterate an array elements. We use _forEach_ only with arrays. It takes a callback function with elements, index parameter and array itself. The index and the array optional. + +```js +arr.forEach(function (element, index, arr) { + console.log(index, element, arr) +}) +// The above code can be written using arrow function +arr.forEach((element, index, arr) => { + console.log(index, element, arr) +}) +// The above code can be written using arrow function and explicit return +arr.forEach((element, index, arr) => console.log(index, element, arr)) +``` + +```js +let sum = 0; +const numbers = [1, 2, 3, 4, 5]; +numbers.forEach(num => console.log(num)) +console.log(sum) +``` + +```sh +1 +2 +3 +4 +5 +``` + +```js +let sum = 0; +const numbers = [1, 2, 3, 4, 5]; +numbers.forEach(num => sum += num) + +console.log(sum) +``` + +```sh +15 +``` + +```js +const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] +countries.forEach((element) => console.log(element.toUpperCase())) +``` + +```sh +FINLAND +DENMARK +SWEDEN +NORWAY +ICELAND +``` + +### map + +_map_: Iterate an array elements and modify the array elements. It takes a callback function with elements, index , array parameter and return a new array. + +```js +const modifiedArray = arr.map(function (element, index, arr) { + return element +}) +``` + +```js +/*Arrow function and explicit return +const modifiedArray = arr.map((element,index) => element); +*/ +//Example +const numbers = [1, 2, 3, 4, 5] +const numbersSquare = numbers.map((num) => num * num) + +console.log(numbersSquare) +``` + +```sh +[1, 4, 9, 16, 25] +``` + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const namesToUpperCase = names.map((name) => name.toUpperCase()) +console.log(namesToUpperCase) +``` + +```sh +['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK'] +``` + +```js +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya', +] +const countriesToUpperCase = countries.map((country) => country.toUpperCase()) +console.log(countriesToUpperCase) + +/* +// Arrow function +const countriesToUpperCase = countries.map((country) => { + return country.toUpperCase(); +}) +//Explicit return arrow function +const countriesToUpperCase = countries.map(country => country.toUpperCase()); +*/ +``` + +```sh +['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA'] +``` + +```js +const countriesFirstThreeLetters = countries.map((country) => + country.toUpperCase().slice(0, 3) +) +``` + +```sh + ["ALB", "BOL", "CAN", "DEN", "ETH", "FIN", "GER", "HUN", "IRE", "JAP", "KEN"] +``` + +### filter + +_Filter_: Filter out items which full fill filtering conditions and return a new array. + +```js +//Filter countries containing land +const countriesContainingLand = countries.filter((country) => + country.includes('land') +) +console.log(countriesContainingLand) +``` + +```sh +['Finland', 'Ireland'] +``` + +```js +const countriesEndsByia = countries.filter((country) => country.endsWith('ia')) +console.log(countriesEndsByia) +``` + +```sh +['Albania', 'Bolivia','Ethiopia'] +``` + +```js +const countriesHaveFiveLetters = countries.filter( + (country) => country.length === 5 +) +console.log(countriesHaveFiveLetters) +``` + +```sh +['Japan', 'Kenya'] +``` + +```js +const scores = [ + { name: 'Asabeneh', score: 95 }, + { name: 'Lidiya', score: 98 }, + { name: 'Mathias', score: 80 }, + { name: 'Elias', score: 50 }, + { name: 'Martha', score: 85 }, + { name: 'John', score: 100 }, +] + +const scoresGreaterEighty = scores.filter((score) => score.score > 80) +console.log(scoresGreaterEighty) +``` + +```sh +[{name: 'Asabeneh', score: 95}, { name: 'Lidiya', score: 98 },{name: 'Martha', score: 85},{name: 'John', score: 100}] +``` + +### reduce + +_reduce_: Reduce takes a callback function. The call back function takes accumulator, current, and optional initial value as a parameter and returns a single value. It is a good practice to define an initial value for the accumulator value. If we do not specify this parameter, by default accumulator will get array `first value`. If our array is an _empty array_, then `Javascript` will throw an error. + +```js +arr.reduce((acc, cur) => { + // some operations goes here before returning a value + return +}, initialValue) +``` + +```js +const numbers = [1, 2, 3, 4, 5] +const sum = numbers.reduce((acc, cur) => acc + cur, 0) + +console.log(sum) +``` + +```js +15 +``` + +### every + +_every_: Check if all the elements are similar in one aspect. It returns boolean + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const areAllStr = names.every((name) => typeof name === 'string') // Are all strings? + +console.log(areAllStr) +``` + +```sh +true +``` + +```js +const bools = [true, true, true, true] +const areAllTrue = bools.every((b) => b === true) // Are all true? + +console.log(areAllTrue) // true +``` + +```sh +true + +``` + +### find + +_find_: Return the first element which satisfies the condition + +```js +const ages = [24, 22, 25, 32, 35, 18] +const age = ages.find((age) => age < 20) + +console.log(age) +``` + +```js +18 +``` + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const result = names.find((name) => name.length > 7) +console.log(result) +``` + +```sh +Asabeneh +``` + +```js +const scores = [ + { name: 'Asabeneh', score: 95 }, + { name: 'Mathias', score: 80 }, + { name: 'Elias', score: 50 }, + { name: 'Martha', score: 85 }, + { name: 'John', score: 100 }, +] + +const score = scores.find((user) => user.score > 80) +console.log(score) +``` + +```sh +{ name: "Asabeneh", score: 95 } +``` + +### findIndex + +_findIndex_: Return the position of the first element which satisfies the condition + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const ages = [24, 22, 25, 32, 35, 18] + +const result = names.findIndex((name) => name.length > 7) +console.log(result) // 0 + +const age = ages.findIndex((age) => age < 20) +console.log(age) // 5 +``` + +### some + +_some_: Check if some of the elements are similar in one aspect. It returns boolean + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const bools = [true, true, true, true] + +const areSomeTrue = bools.some((b) => b === true) + +console.log(areSomeTrue) //true +``` + +```js +const areAllStr = names.some((name) => typeof name === 'number') // Are all strings ? +console.log(areAllStr) // false +``` + +### sort + +_sort_: The sort methods arranges the array elements either ascending or descending order. By default, the **_sort()_** method sorts values as strings.This works well for string array items but not for numbers. If number values are sorted as strings and it give us wrong result. Sort method modify the original array. It is recommended to copy the original data before you start using _sort_ method. + +#### Sorting string values + +```js +const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot'] +console.log(products.sort()) // ['Apple', 'Carrot', 'Coffee', 'Honey', 'Milk', 'Sugar'] +//Now the original products array is also sorted +``` + +#### Sorting Numeric values + +As you can see in the example below, 100 came first after sorted in ascending order. Sort converts items to string , since '100' and other numbers compared, 1 which the beginning of the string '100' became the smallest. To avoid this, we use a compare call back function inside the sort method, which return a negative, zero or positive. + +```js +const numbers = [9.81, 3.14, 100, 37] +// Using sort method to sort number items provide a wrong result. see below +console.log(numbers.sort()) //[100, 3.14, 37, 9.81] +numbers.sort(function (a, b) { + return a - b +}) + +console.log(numbers) // [3.14, 9.81, 37, 100] + +numbers.sort(function (a, b) { + return b - a +}) +console.log(numbers) //[100, 37, 9.81, 3.14] +``` + +#### Sorting Object Arrays + +Whenever we sort objects in an array, we use the object key to compare. Let us see the example below. + +```js +objArr.sort(function (a, b) { + if (a.key < b.key) return -1 + if (a.key > b.key) return 1 + return 0 +}) + +// or + +objArr.sort(function (a, b) { + if (a['key'] < b['key']) return -1 + if (a['key'] > b['key']) return 1 + return 0 +}) + +const users = [ + { name: 'Asabeneh', age: 150 }, + { name: 'Brook', age: 50 }, + { name: 'Eyob', age: 100 }, + { name: 'Elias', age: 22 }, +] +users.sort((a, b) => { + if (a.age < b.age) return -1 + if (a.age > b.age) return 1 + return 0 +}) +console.log(users) // sorted ascending +// [{…}, {…}, {…}, {…}] +``` + +🌕 You are doing great.Never give up because great things take time. You have just completed day 9 challenges and you are 9 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## 💻 Esercizi + +### Esercizi: Livello 1 + +```js +const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand'] +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +const products = [ + { product: 'banana', price: 3 }, + { product: 'mango', price: 6 }, + { product: 'potato', price: ' ' }, + { product: 'avocado', price: 8 }, + { product: 'coffee', price: 10 }, + { product: 'tea', price: '' }, +] +``` + +1. Explain the difference between **_forEach, map, filter, and reduce_**. +2. Define a callback function before you use it in forEach, map, filter or reduce. +3. Use **_forEach_** to console.log each country in the countries array. +4. Use **_forEach_** to console.log each name in the names array. +5. Use **_forEach_** to console.log each number in the numbers array. +6. Use **_map_** to create a new array by changing each country to uppercase in the countries array. +7. Use **_map_** to create an array of countries length from countries array. +8. Use **_map_** to create a new array by changing each number to square in the numbers array +9. Use **_map_** to change to each name to uppercase in the names array +10. Use **_map_** to map the products array to its corresponding prices. +11. Use **_filter_** to filter out countries containing **_land_**. +12. Use **_filter_** to filter out countries having six character. +13. Use **_filter_** to filter out countries containing six letters and more in the country array. +14. Use **_filter_** to filter out country start with 'E'; +15. Use **_filter_** to filter out only prices with values. +16. Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items. +17. Use **_reduce_** to sum all the numbers in the numbers array. +18. Use **_reduce_** to concatenate all the countries and to produce this sentence: **_Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries_** +19. Explain the difference between **_some_** and **_every_** +20. Use **_some_** to check if some names' length greater than seven in names array +21. Use **_every_** to check if all the countries contain the word land +22. Explain the difference between **_find_** and **_findIndex_**. +23. Use **_find_** to find the first country containing only six letters in the countries array +24. Use **_findIndex_** to find the position of the first country containing only six letters in the countries array +25. Use **_findIndex_** to find the position of **_Norway_** if it doesn't exist in the array you will get -1. +26. Use **_findIndex_** to find the position of **_Russia_** if it doesn't exist in the array you will get -1. + +### Esercizi: Livello 2 + +1. Find the total price of products by chaining two or more array iterators(eg. arr.map(callback).filter(callback).reduce(callback)) +1. Find the sum of price of products using only reduce reduce(callback)) +1. Declare a function called **_categorizeCountries_** which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')). +1. Create a function which return an array of objects, which is the letter and the number of times the letter use to start with a name of a country. +1. Declare a **_getFirstTenCountries_** function and return an array of ten countries. Use different functional programming to work on the countries.js array +1. Declare a **_getLastTenCountries_** function which which returns the last ten countries in the countries array. +1. Find out which _letter_ is used many _times_ as initial for a country name from the countries array (eg. Finland, Fiji, France etc) + +### Esercizi: Livello 3 + +1. Use the countries information, in the data folder. Sort countries by name, by capital, by population +1. \*\*\* Find the 10 most spoken languages: + + ````js + // Your output should look like this + console.log(mostSpokenLanguages(countries, 10)) + [ + {country: 'English',count:91}, + {country: 'French',count:45}, + {country: 'Arabic',count:25}, + {country: 'Spanish',count:24}, + {country:'Russian',count:9}, + {country:'Portuguese', count:9}, + {country:'Dutch',count:8}, + {country:'German',count:7}, + {country:'Chinese',count:5}, + {country:'Swahili',count:4} + ] + + // Your output should look like this + console.log(mostSpokenLanguages(countries, 3)) + [ + {country: 'English',count: 91}, + {country: 'French',count: 45}, + {country: 'Arabic',count: 25}, + ]``` + + ```` + +2. \*\*\* Use countries_data.js file create a function which create the ten most populated countries + + ````js + console.log(mostPopulatedCountries(countries, 10)) + + [ + {country: 'China', population: 1377422166}, + {country: 'India', population: 1295210000}, + {country: 'United States of America', population: 323947000}, + {country: 'Indonesia', population: 258705000}, + {country: 'Brazil', population: 206135893}, + {country: 'Pakistan', population: 194125062}, + {country: 'Nigeria', population: 186988000}, + {country: 'Bangladesh', population: 161006790}, + {country: 'Russian Federation', population: 146599183}, + {country: 'Japan', population: 126960000} + ] + + console.log(mostPopulatedCountries(countries, 3)) + [ + {country: 'China', population: 1377422166}, + {country: 'India', population: 1295210000}, + {country: 'United States of America', population: 323947000} + ] + ``` + + ```` + +3. \*\*\* 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 an object called statistics and create all the functions which do statistical calculations as method for the statistics object. Check the output below. + + ```js + const ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26] + + console.log('Count:', statistics.count()) // 25 + console.log('Sum: ', statistics.sum()) // 744 + console.log('Min: ', statistics.min()) // 24 + console.log('Max: ', statistics.max()) // 38 + console.log('Range: ', statistics.range() // 14 + console.log('Mean: ', statistics.mean()) // 30 + console.log('Median: ',statistics.median()) // 29 + console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5} + console.log('Variance: ',statistics.var()) // 17.5 + console.log('Standard Deviation: ', statistics.std()) // 4.2 + console.log('Variance: ',statistics.var()) // 17.5 + console.log('Frequency Distribution: ',statistics.freqDist()) # [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] + ``` + + ```sh + console.log(statistics.describe()) + Count: 25 + Sum: 744 + Min: 24 + Max: 38 + Range: 14 + Mean: 30 + Median: 29 + Mode: (26, 5) + Variance: 17.5 + Standard Deviation: 4.2 + Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] + ``` + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 8](../08_Day_Objects/08_day_objects.md) | [Day 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) diff --git a/Italian/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md b/Italian/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md new file mode 100644 index 0000000..95f1a0f --- /dev/null +++ b/Italian/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md @@ -0,0 +1,440 @@ +
+

30 Days Of JavaScript: Sets and Maps

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [Day 11>>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) + +![Day 10](../../images/banners/day_1_10.png) + +- [Day 10](#day-10) + - [Set](#set) + - [Creating an empty set](#creating-an-empty-set) + - [Creating set from array](#creating-set-from-array) + - [Adding an element to a set](#adding-an-element-to-a-set) + - [Deleting an element a set](#deleting-an-element-a-set) + - [Checking an element in the set](#checking-an-element-in-the-set) + - [Clearing the set](#clearing-the-set) + - [Union of sets](#union-of-sets) + - [Intersection of sets](#intersection-of-sets) + - [Difference of sets](#difference-of-sets) + - [Map](#map) + - [Creating an empty Map](#creating-an-empty-map) + - [Creating an Map from array](#creating-an-map-from-array) + - [Adding values to the Map](#adding-values-to-the-map) + - [Getting a value from Map](#getting-a-value-from-map) + - [Checking key in Map](#checking-key-in-map) + - [Esercizi](#exercises) + - [Esercizi:Level 1](#exerciseslevel-1) + - [Esercizi:Level 2](#exerciseslevel-2) + - [Esercizi:Level 3](#exerciseslevel-3) + +# Day 10 + +## Set + +Set is a collection of elements. Set can only contains unique elements. +Let us see how to create a set in the section below. + +### Creating an empty set + +```js +const companies = new Set() +console.log(companies) +``` + +```sh +Set(0) {} +``` + +### Creating set from array + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French', +] + +const setOfLanguages = new Set(languages) +console.log(setOfLanguages) +``` + +```sh +Set(4) {"English", "Finnish", "French", "Spanish"} +``` + +Set is an iterable object and we can iterate through each elements. + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French', +] + +const setOfLanguages = new Set(languages) + +for (const language of setOfLanguages) { + console.log(language) +} +``` + +```sh + English + Finnish + French + Spanish +``` + +### Adding an element to a set + +```js +const companies = new Set() // creating an empty set +console.log(companies.size) // 0 + +companies.add('Google') // add element to the set +companies.add('Facebook') +companies.add('Amazon') +companies.add('Oracle') +companies.add('Microsoft') +console.log(companies.size) // 5 elements in the set +console.log(companies) +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} +``` + +We can also use loop to add element to a set. + +```js +const companies = ['Google', 'Facebook', 'Amazon', 'Oracle', 'Microsoft'] +setOfCompanies = new Set() +for (const company of companies) { + setOfCompanies.add(company) +} +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} + +``` + +### Deleting an element a set + +We can delete an element from a set using a delete method. + +```js +console.log(companies.delete('Google')) +console.log(companies.size) // 4 elements left in the set +``` + +### Checking an element in the set + +The has method can help to know if a certain element exists in a set. + +```js +console.log(companies.has('Apple')) // false +console.log(companies.has('Facebook')) // true +``` + +### Clearing the set + +It removes all the elements from a set. + +```js +companies.clear() +console.log(companies) +``` + +```sh +Set(0) {} +``` + +See the example below to learn how to use set. + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French', +] +const langSet = new Set(languages) +console.log(langSet) // Set(4) {"English", "Finnish", "French", "Spanish"} +console.log(langSet.size) // 4 + +const counts = [] +const count = {} + +for (const l of langSet) { + const filteredLang = languages.filter((lng) => lng === l) + console.log(filteredLang) // ["English", "English", "English"] + counts.push({ lang: l, count: filteredLang.length }) +} +console.log(counts) +``` + +```js +[ + { lang: 'English', count: 3 }, + { lang: 'Finnish', count: 1 }, + { lang: 'French', count: 2 }, + { lang: 'Spanish', count: 1 }, +] +``` + +Other use case of set. For instance to count unique item in an array. + +```js +const numbers = [5, 3, 2, 5, 5, 9, 4, 5] +const setOfNumbers = new Set(numbers) + +console.log(setOfNumbers) +``` + +```sh +Set(5) {5, 3, 2, 9, 4} +``` + +### Union of sets + +To find a union to two sets can be achieved using spread operator. Lets find the union of set A and set B (A U B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] +let c = [...a, ...b] + +let A = new Set(a) +let B = new Set(b) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(6) {1, 2, 3, 4, 5,6} +``` + +### Intersection of sets + +To find an intersection of two sets can be achieved using filter. Lets find the intersection of set A and set B (A ∩ B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] + +let A = new Set(a) +let B = new Set(b) + +let c = a.filter((num) => B.has(num)) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(3) {3, 4, 5} +``` + +### Difference of sets + +To find an the difference between two sets can be achieved using filter. Lets find the different of set A and set B (A \ B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] + +let A = new Set(a) +let B = new Set(b) + +let c = a.filter((num) => !B.has(num)) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(2) {1, 2} +``` + +## Map + +### Creating an empty Map + +```js +const map = new Map() +console.log(map) +``` + +```sh +Map(0) {} +``` + +### Creating an Map from array + +```js +countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'], +] +const map = new Map(countries) +console.log(map) +console.log(map.size) +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### Adding values to the Map + +```js +const countriesMap = new Map() +console.log(countriesMap.size) // 0 +countriesMap.set('Finland', 'Helsinki') +countriesMap.set('Sweden', 'Stockholm') +countriesMap.set('Norway', 'Oslo') +console.log(countriesMap) +console.log(countriesMap.size) +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### Getting a value from Map + +```js +console.log(countriesMap.get('Finland')) +``` + +```sh +Helsinki +``` + +### Checking key in Map + +Check if a key exists in a map using _has_ method. It returns _true_ or _false_. + +```js +console.log(countriesMap.has('Finland')) +``` + +```sh +true +``` + +Getting all values from map using loop + +```js +for (const country of countriesMap) { + console.log(country) +} +``` + +```sh +(2) ["Finland", "Helsinki"] +(2) ["Sweden", "Stockholm"] +(2) ["Norway", "Oslo"] +``` + +```js +for (const [country, city] of countriesMap){ + console.log(country, city) +} +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +``` + +🌕 You established a big milestone, you are unstoppable. Keep going! You have just completed day 10 challenges and you are 10 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## Esercizi + +### Esercizi:Level 1 + +```js +const a = [4, 5, 8, 9] +const b = [3, 4, 5, 7] +const countries = ['Finland', 'Sweden', 'Norway'] +``` + +1. create an empty set +2. Create a set containing 0 to 10 using loop +3. Remove an element from a set +4. Clear a set +5. Create a set of 5 string elements from array +6. Create a map of countries and number of characters of a country + +### Esercizi:Level 2 + +1. Find a union b +2. Find a intersection b +3. Find a with b + +### Esercizi:Level 3 + +1. How many languages are there in the countries object file. + +1. \*\*\* Use the countries data to find the 10 most spoken languages: + +```js + // Your output should look like this + console.log(mostSpokenLanguages(countries, 10)) + [ + { English: 91 }, + { French: 45 }, + { Arabic: 25 }, + { Spanish: 24 }, + { Russian: 9 }, + { Portuguese: 9 }, + { Dutch: 8 }, + { German: 7 }, + { Chinese: 5 }, + { Swahili: 4 }, + { Serbian: 4 } + ] + + // Your output should look like this + console.log(mostSpokenLanguages(countries, 3)) + [ + {English:91}, + {French:45}, + {Arabic:25} + ] +``` + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [Day 11 >>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) diff --git a/Italian/11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md b/Italian/11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md new file mode 100644 index 0000000..fa8f9d0 --- /dev/null +++ b/Italian/11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md @@ -0,0 +1,698 @@ +
+

30 Days Of JavaScript: Destructuring and Spreading

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 10](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) | [Day 12>>](../12_Day_Regular_expressions/12_day_regular_expressions.md) + +![Day 11](../../images/banners/day_1_11.png) + +- [Day 11](#day-11) + - [Destructuring and Spread](#destructuring-and-spread) + - [Destructing Arrays](#destructing-arrays) + - [Destructuring during iteration](#destructuring-during-iteration) + - [Destructuring Object](#destructuring-object) + - [Renaming during structuring](#renaming-during-structuring) + - [Object parameter without destructuring](#object-parameter-without-destructuring) + - [Object parameter with destructuring](#object-parameter-with-destructuring) + - [Destructuring object during iteration](#destructuring-object-during-iteration) + - [Spread or Rest Operator](#spread-or-rest-operator) + - [Spread operator to get the rest of array elements](#spread-operator-to-get-the-rest-of-array-elements) + - [Spread operator to copy array](#spread-operator-to-copy-array) + - [Spread operator to copy object](#spread-operator-to-copy-object) + - [Spread operator with arrow function](#spread-operator-with-arrow-function) + - [Esercizi](#exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# Day 11 + +## Destructuring and Spread + +Destructuring is a way to unpack arrays, and objects and assigning to a distinct variable. + +### Destructing Arrays + +```js + const numbers = [1, 2, 3] + let [numOne, numTwo, numThree] = numbers + + console.log(numOne, numTwo, numThree) +``` + +```sh + 1 2 3 +``` + +```js + const names = ['Asabeneh', 'Brook', 'David', 'John'] + let [firstPerson, secondPerson, thirdPerson, fourthPerson] = names + + console.log(firstPerson, secondPerson,thirdPerson, fourthPerson) +``` + +```sh +Asabeneh Brook David John +``` + +```js + const scientificConstants = [2.72, 3.14, 9.81, 37, 100] + let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants + + console.log(e,pi,gravity, bodyTemp, boilingTemp) +``` + +```sh +2.72 3.14 9.81 37 100 +``` + +```js +const fullStack = [ + ['HTML', 'CSS', 'JS', 'React'], + ['Node', 'Express', 'MongoDB'] +] +const [frontEnd, backEnd] = fullStack + +console.log(frontEnd) +console.log(backEnd) +``` + +```sh +["HTML", "CSS", "JS", "React"] +["Node", "Express", "MongoDB"] +``` + +If we like to skip on of the values in the array we use additional comma. The comma helps to omit the value at that specific index + +```js + const numbers = [1, 2, 3] + let [numOne, , numThree] = numbers //2 is omitted + + console.log(numOne, numThree) +``` + +```sh +1 3 +``` + +```js + const names = ['Asabeneh', 'Brook', 'David', 'John'] + let [, secondPerson, , fourthPerson] = names // first and third person is omitted + + console.log(secondPerson, fourthPerson) +``` + +```sh +Brook John +``` + +We can use default value in case the value of array for that index is undefined: + +```js +const names = [undefined, 'Brook', 'David'] +let [ + firstPerson = 'Asabeneh', + secondPerson, + thirdPerson, + fourthPerson = 'John' +] = names + +console.log(firstPerson, secondPerson, thirdPerson, fourthPerson) +``` + +```sh +Asabeneh Brook David John +``` + +We can not assign variable to all the elements in the array. We can destructure few of the first and we can get the remaining as array using spread operator(...). + +```js +const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +let [num1, num2, num3, ...rest] = nums + +console.log(num1, num2, num3) +console.log(rest) +``` + +```sh +1 2 3 +[4, 5, 6, 7, 8, 9, 10] +``` + +### Destructuring during iteration + +```js +const countries = [['Finland', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo']] + +for (const [country, city] of countries) { +console.log(country, city) +} +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +``` + +```js +const fullStack = [ + ['HTML', 'CSS', 'JS', 'React'], + ['Node', 'Express', 'MongoDB'] +] + +for(const [first, second, third] of fullStack) { +console.log(first, second, third) +} +``` + +```sh +HTML CSS JS +Node Express MongoDB +``` + +### Destructuring Object + +When we destructure the name of the variable we use to destructure should be exactly the same as the key or property of the object. See the example below. + +```js +const rectangle = { + width: 20, + height: 10, + area: 200 +} +let { width, height, area, perimeter } = rectangle + +console.log(width, height, area, perimeter) +``` + +```sh +20 10 200 undefined +``` + +### Renaming during structuring + +```js +const rectangle = { + width: 20, + height: 10, + area: 200 +} +let { width: w, height: h, area: a, perimeter: p } = rectangle + +console.log(w, h, a, p) +``` + +```sh +20 10 200 undefined +``` + +If the key is not found in the object the variable will be assigned to undefined. Sometimes the key might not be in the object, in that case we can give a default value during declaration. See the example. + +```js +const rectangle = { + width: 20, + height: 10, + area: 200 +} +let { width, height, area, perimeter = 60 } = rectangle + +console.log(width, height, area, perimeter) //20 10 200 60 +//Let us modify the object:width to 30 and perimeter to 80 +``` + +```js +const rectangle = { + width: 30, + height: 10, + area: 200, + perimeter: 80 +} +let { width, height, area, perimeter = 60 } = rectangle +console.log(width, height, area, perimeter) //30 10 200 80 +``` + +Destructuring keys as a function parameters. Let us create a function which takes a rectangle object and it returns a perimeter of a rectangle. + +### Object parameter without destructuring + +```js +// Without destructuring +const rect = { + width: 20, + height: 10 +} +const calculatePerimeter = rectangle => { + return 2 * (rectangle.width + rectangle.height) +} + +console.log(calculatePerimeter(rect)) // 60 +//with destructuring +``` + +```js +//Another Example +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + job: 'Instructor and Developer', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + languages: ['Amharic', 'English', 'Suomi(Finnish)'] +} +// Let us create a function which give information about the person object without destructuring + +const getPersonInfo = obj => { + const skills = obj.skills + const formattedSkills = skills.slice(0, -1).join(', ') + const languages = obj.languages + const formattedLanguages = languages.slice(0, -1).join(', ') + + personInfo = `${obj.firstName} ${obj.lastName} lives in ${obj.country}. He is ${ + obj.age + } years old. He is an ${obj.job}. He teaches ${formattedSkills} and ${ + skills[skills.length - 1] + }. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.` + + return personInfo +} + +console.log(getPersonInfo(person)) +``` + +### Object parameter with destructuring + +```js + +const calculatePerimeter = ({ width, height }) => { + return 2 * (width + height) +} + +console.log(calculatePerimeter(rect)) // 60 +``` + +```js +// Let us create a function which give information about the person object with destructuring +const getPersonInfo = ({ + firstName, + lastName, + age, + country, + job, + skills, + languages +}) => { + const formattedSkills = skills.slice(0, -1).join(', ') + const formattedLanguages = languages.slice(0, -1).join(', ') + + personInfo = `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${ + skills[skills.length - 1] + }. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.` + + return personInfo +} +console.log(getPersonInfo(person)) +/* +Asabeneh Yetayeh lives in Finland. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish) +*/ +``` + +### Destructuring object during iteration + +```js +const todoList = [ +{ + task:'Prepare JS Test', + time:'4/1/2020 8:30', + completed:true +}, +{ + task:'Give JS Test', + time:'4/1/2020 10:00', + completed:false +}, +{ + task:'Assess Test Result', + time:'4/1/2020 1:00', + completed:false +} +] + +for (const {task, time, completed} of todoList){ + console.log(task, time, completed) +} +``` + +```sh +Prepare JS Test 4/1/2020 8:30 true +Give JS Test 4/1/2020 10:00 false +Assess Test Result 4/1/2020 1:00 false +``` + +### Spread or Rest Operator + +When we destructure an array we use the spread operator(...) to get the rest elements as array. In addition to that we use spread operator to spread array elements to another array. + +### Spread operator to get the rest of array elements + +```js +const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +let [num1, num2, num3, ...rest] = nums +​ +console.log(num1, num2, num3) +console.log(rest) +``` + +```sh +1 2 3 +[4, 5, 6, 7, 8, 9, 10] +``` + +```js +const countries = [ + 'Germany', + 'France', + 'Belgium', + 'Finland', + 'Sweden', + 'Norway', + 'Denmark', + 'Iceland' +] + +let [gem, fra, , ...nordicCountries] = countries + +console.log(gem) +console.log(fra) +console.log(nordicCountries) +``` + +```sh +Germany +France +["Finland", "Sweden", "Norway", "Denmark", "Iceland"] +``` + +### Spread operator to copy array + +```js +const evens = [0, 2, 4, 6, 8, 10] +const evenNumbers = [...evens] + +const odds = [1, 3, 5, 7, 9] +const oddNumbers = [...odds] + +const wholeNumbers = [...evens, ...odds] + +console.log(evenNumbers) +console.log(oddNumbers) +console.log(wholeNumbers) + + +``` + +```sh +[0, 2, 4, 6, 8, 10] +[1, 3, 5, 7, 9] +[0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9] +``` + +```js +const frontEnd = ['HTML', 'CSS', 'JS', 'React'] +const backEnd = ['Node', 'Express', 'MongoDB'] +const fullStack = [...frontEnd, ...backEnd] + +console.log(fullStack) +``` + +```sh +["HTML", "CSS", "JS", "React", "Node", "Express", "MongoDB"] +``` + +### Spread operator to copy object + +We can copy an object using a spread operator + +```js +const user = { + name:'Asabeneh', + title:'Programmer', + country:'Finland', + city:'Helsinki' +} + +const copiedUser = {...user} +console.log(copiedUser) +``` + +```sh +{name: "Asabeneh", title: "Programmer", country: "Finland", city: "Helsinki"} +``` + +Modifying or changing the object while copying + +```js +const user = { + name:'Asabeneh', + title:'Programmer', + country:'Finland', + city:'Helsinki' +} + +const copiedUser = {...user, title:'instructor'} +console.log(copiedUser) +``` + +```sh +{name: "Asabeneh", title: "instructor", country: "Finland", city: "Helsinki"} +``` + +#### Spread operator with arrow function + +Whenever we like to write an arrow function which takes unlimited number of arguments we use a spread operator. If we use a spread operator as a parameter, the argument passed when we invoke a function will change to an array. + +```js + +const sumAllNums = (...args) => { + console.log(args) +} + +sumAllNums(1, 2, 3, 4, 5) + +``` + +```sh +[1, 2, 3, 4, 5] + +``` + +```js + +const sumAllNums = (...args) => { + let sum = 0 + for (const num of args){ + sum += num + } + return sum + +} + +console.log(sumAllNums(1, 2, 3, 4, 5)) +``` + +```sh +15 + +``` + +🌕 You achieved quite a lot so far. Now, your Livello of JavaScript is upper intermediate. Keep going! You have just completed day 11 challenges and you are 11 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## Esercizi + +### Esercizi: Livello 1 + +```js +const constants = [2.72, 3.14, 9.81, 37, 100] +const countries = ['Finland', 'Estonia', 'Sweden', 'Denmark', 'Norway'] +const rectangle = { + width: 20, + height: 10, + area: 200, + perimeter: 60 +} +const users = [ +{ + name:'Brook', + scores:75, + skills:['HTM', 'CSS', 'JS'], + age:16 +}, +{ + name:'Alex', + scores:80, + skills:['HTM', 'CSS', 'JS'], + age:18 +}, +{ + name:'David', + scores:75, + skills:['HTM', 'CSS'], + age:22 +}, +{ + name:'John', + scores:85, + skills:['HTML'], + age:25 +}, +{ + name:'Sara', + scores:95, + skills:['HTM', 'CSS', 'JS'], + age: 26 +}, +{ + name:'Martha', + scores:80, + skills:['HTM', 'CSS', 'JS'], + age:18 +}, +{ + name:'Thomas', + scores:90, + skills:['HTM', 'CSS', 'JS'], + age:20 +} +] +``` + +1. Destructure and assign the elements of constants array to e, pi, gravity, humanBodyTemp, waterBoilingTemp. +2. Destructure and assign the elements of countries array to fin, est, sw, den, nor +3. Destructure the rectangle object by its properties or keys. + +### Esercizi: Livello 2 + +1. Iterate through the users array and get all the keys of the object using destructuring +2. Find the persons who have less than two skills + +### Esercizi: Livello 3 + +1. Destructure the countries object print name, capital, population and languages of all countries +2. A junior developer structure student name, skills and score in array of arrays which may not easy to read. Destructure the following array name to name, skills array to skills, scores array to scores, JavaScript score to jsScore and React score to reactScore variable in one line. + + ```js + const student = ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]] + console.log(name, skills, jsScore, reactScore) + ``` + + ```sh + David (4) ["HTM", "CSS", "JS", "React"] 90 95 + ``` + +3. Write a function called *convertArrayToObject* which can convert the array to a structure object. + + ```js + const students = [ + ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]], + ['John', ['HTM', 'CSS', 'JS', 'React'], [85, 80, 85, 80]] + ] + + console.log(convertArrayToObject(students)) + [ + { + name: 'David', + skills: ['HTM','CSS','JS','React'], + scores: [98,85,90,95] + }, + { + name: 'John', + skills: ['HTM','CSS','JS','React'], + scores: [85, 80,85,80] + } + ] + ``` + +4. Copy the student object to newStudent without mutating the original object. In the new object add the following ? + +- Add Bootstrap with Livello 8 to the front end skill sets +- Add Express with Livello 9 to the back end skill sets +- Add SQL with Livello 8 to the data base skill sets +- Add SQL without Livello to the data science skill sets + +```js + const student = { + name: 'David', + age: 25, + skills: { + frontEnd: [ + { skill: 'HTML', level: 10 }, + { skill: 'CSS', level: 8 }, + { skill: 'JS', level: 8 }, + { skill: 'React', level: 9 } + ], + backEnd: [ + { skill: 'Node',level: 7 }, + { skill: 'GraphQL', level: 8 }, + ], + dataBase:[ + { skill: 'MongoDB', level: 7.5 }, + ], + dataScience:['Python', 'R', 'D3.js'] + } + } + ``` + + The copied object output should look like this: + +```js + { + name: 'David', + age: 25, + skills: { + frontEnd: [ + {skill: 'HTML',level: 10}, + {skill: 'CSS',level: 8}, + {skill: 'JS',level: 8}, + {skill: 'React',level: 9}, + {skill: 'BootStrap',level: 8} + ], + backEnd: [ + {skill: 'Node',level: 7}, + {skill: 'GraphQL',level: 8}, + {skill: 'Express',level: 9} + ], + dataBase: [ + { skill: 'MongoDB',level: 7.5}, + { skill: 'SQL',level: 8} + ], + dataScience: ['Python','R','D3.js','SQL'] + } + } + +``` + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 10](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) | [Day 12 >>](../12_Day_Regular_expressions/12_day_regular_expressions.md) diff --git a/Italian/12_Day_Regular_expressions/12_day_regular_expressions.md b/Italian/12_Day_Regular_expressions/12_day_regular_expressions.md new file mode 100644 index 0000000..750ad99 --- /dev/null +++ b/Italian/12_Day_Regular_expressions/12_day_regular_expressions.md @@ -0,0 +1,536 @@ +
+

30 Days Of JavaScript: Regular Expressions

+ + + + + Twitter Follow + + + Autore: + Asabeneh Yetayeh
+ Gennaio, 2020 + +
+ +[<< Day 11](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) | [Day 13>>](../13_Day_Console_object_methods/13_day_console_object_methods.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_12.png) + +- [📘 Day 12](#-day-12) + - [Regular Expressions](#regular-expressions) + - [RegExp parameters](#regexp-parameters) + - [Pattern](#pattern) + - [Flags](#flags) + - [Creating a pattern with RegExp Constructor](#creating-a-pattern-with-regexp-constructor) + - [Creating a pattern without RegExp Constructor](#creating-a-pattern-without-regexp-constructor) + - [RegExpp Object Methods](#regexpp-object-methods) + - [Testing for a match](#testing-for--a-match) + - [Array containing all of the match](#array-containing-all-of-the-match) + - [Replacing a substring](#replacing-a-substring) + - [Square Bracket](#square-bracket) + - [Escape character(\\) in RegExp](#escape-character-in-regexp) + - [One or more times(+)](#one-or-more-times) + - [Period(.)](#period) + - [Zero or more times(*)](#zero-or-more-times) + - [Zero or one times(?)](#zero-or-one-times) + - [Quantifier in RegExp](#quantifier-in-regexp) + - [Cart ^](#cart-) + - [Exact match](#exact-match) + - [💻 Esercizi](#-exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# 📘 Day 12 + +## Regular Expressions + +A regular expression or RegExp is a small programming language that helps to find pattern in data. A RegExp can be used to check if some pattern exists in a different data types. To use RegExp in JavaScript either we use RegExp constructor or we can declare a RegExp pattern using two forward slashes followed by a flag. We can create a pattern in two ways. + +To declare a string we use a single quote, double quote a backtick to declare a regular expression we use two forward slashes and an optional flag. The flag could be g, i, m, s, u or y. + +### RegExp parameters + +A regular expression takes two parameters. One required search pattern and an optional flag. + +#### Pattern + +A pattern could be a text or any form of pattern which some sort of similarity. For instance the word spam in an email could be a pattern we are interested to look for in an email or a phone number format number might be our interest to look for. + +#### Flags + +Flags are optional parameters in a regular expression which determine the type of searching. Let us see some of the flags: + +- g: a global flag which means looking for a pattern in whole text +- i: case insensitive flag(it searches for both lowercase and uppercase) +- m: multiline + +### Creating a pattern with RegExp Constructor + +Declaring regular expression without global flag and case insensitive flag. + +```js +// without flag +let pattern = 'love' +let regEx = new RegExp(pattern) +``` + +Declaring regular expression with global flag and case insensitive flag. + +```js +let pattern = 'love' +let flag = 'gi' +let regEx = new RegExp(pattern, flag) +``` + +Declaring a regex pattern using RegExp object. Writing the pattern and the flag inside the RegExp constructor + +```js +let regEx = new RegExp('love','gi') +``` + +### Creating a pattern without RegExp Constructor + +Declaring regular expression with global flag and case insensitive flag. + +```js +let regEx= /love/gi +``` + +The above regular expression is the same as the one which we created with RegExp constructor + +```js +let regEx= new RegExp('love','gi') +``` + +### RegExpp Object Methods + +Let us see some of RegExp methods + +#### Testing for a match + +*test()*:Tests for a match in a string. It returns true or false. + +```js +const str = 'I love JavaScript' +const pattern = /love/ +const result = pattern.test(str) +console.log(result) +``` + +```sh +true +``` + +#### Array containing all of the match + +*match()*:Returns an array containing all of the matches, including capturing groups, or null if no match is found. +If we do not use a global flag, match() returns an array containing the pattern, index, input and group. + +```js +const str = 'I love JavaScript' +const pattern = /love/ +const result = str.match(pattern) +console.log(result) +``` + +```sh +["love", index: 2, input: "I love JavaScript", groups: undefined] +``` + +```js +const str = 'I love JavaScript' +const pattern = /love/g +const result = str.match(pattern) +console.log(result) +``` + +```sh +["love"] +``` + +*search()*: Tests for a match in a string. It returns the index of the match, or -1 if the search fails. + +```js +const str = 'I love JavaScript' +const pattern = /love/g +const result = str.search(pattern) +console.log(result) +``` + +```sh +2 +``` + +#### Replacing a substring + +*replace()*: Executes a search for a match in a string, and replaces the matched substring with a replacement substring. + +```js +const txt = 'Python is the most beautiful language that a human begin has ever created.\ +I recommend python for a first programming language' + +matchReplaced = txt.replace(/Python|python/, 'JavaScript') +console.log(matchReplaced) +``` + +```sh +JavaScript is the most beautiful language that a human begin has ever created.I recommend python for a first programming language +``` + +```js +const txt = 'Python is the most beautiful language that a human begin has ever created.\ +I recommend python for a first programming language' + +matchReplaced = txt.replace(/Python|python/g, 'JavaScript') +console.log(matchReplaced) +``` + +```sh +JavaScript is the most beautiful language that a human begin has ever created.I recommend JavaScript for a first programming language +``` + +```js +const txt = 'Python is the most beautiful language that a human begin has ever created.\ +I recommend python for a first programming language' + +matchReplaced = txt.replace(/Python/gi, 'JavaScript') +console.log(matchReplaced) +``` + +```sh +JavaScript is the most beautiful language that a human begin has ever created.I recommend JavaScript for a first programming language +``` + +```js + +const txt = '%I a%m te%%a%%che%r% a%n%d %% I l%o%ve te%ach%ing.\ +T%he%re i%s n%o%th%ing as m%ore r%ewarding a%s e%duc%at%i%ng a%n%d e%m%p%ow%er%ing \ +p%e%o%ple.\ +I fo%und te%a%ching m%ore i%n%t%er%%es%ting t%h%an any other %jobs.\ +D%o%es thi%s m%ot%iv%a%te %y%o%u to b%e a t%e%a%cher.' + +matches = txt.replace(/%/g, '') +console.log(matches) +``` + +```sh +I am teacher and I love teaching.There is nothing as more rewarding as educating and empowering people.I found teaching more interesting than any other jobs.Does this motivate you to be a teacher. +``` + +* []: A set of characters + * [a-c] means, a or b or c + * [a-z] means, any letter a to z + * [A-Z] means, any character A to Z + * [0-3] means, 0 or 1 or 2 or 3 + * [0-9] means any number 0 to 9 + * [A-Za-z0-9] any character which is a to z, A to Z, 0 to 9 +* \\: uses to escape special characters + * \d mean: match where the string contains digits (numbers from 0-9) + * \D mean: match where the string does not contain digits +* . : any character except new line character(\n) +* ^: starts with + * r'^substring' eg r'^love', a sentence which starts with a word love + * r'[^abc] mean not a, not b, not c. +* $: ends with + * r'substring$' eg r'love$', sentence ends with a word love +* *: zero or more times + * r'[a]*' means a optional or it can occur many times. +* +: one or more times + * r'[a]+' means at least once or more times +* ?: zero or one times + * r'[a]?' means zero times or once +* \b: word bounder, matches with the beginning or ending of a word +* {3}: Exactly 3 characters +* {3,}: At least 3 characters +* {3,8}: 3 to 8 characters +* |: Either or + * r'apple|banana' mean either of an apple or a banana +* (): Capture and group + +![Regular Expression cheat sheet](../images/regex.png) + +Let's use example to clarify the above meta characters + +### Square Bracket + +Let's use square bracket to include lower and upper case + +```js +const pattern = '[Aa]pple' // this square bracket means either A or a +const txt = 'Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away. ' +const matches = txt.match(pattern) + +console.log(matches) +``` + +```sh +["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away.", groups: undefined] + +``` + +```js +const pattern = /[Aa]pple/g // this square bracket means either A or a +const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. ' +const matches = txt.match(pattern) + +console.log(matches) +``` + +```sh +["Apple", "apple"] +``` + +If we want to look for the banana, we write the pattern as follows: + +```js +const pattern = /[Aa]pple|[Bb]anana/g // this square bracket mean either A or a +const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. Banana is easy to eat too.' +const matches = txt.match(pattern) + +console.log(matches) +``` + +```sh +["Apple", "banana", "apple", "banana", "Banana"] +``` + +Using the square bracket and or operator , we manage to extract Apple, apple, Banana and banana. + +### Escape character(\\) in RegExp + +```js +const pattern = /\d/g // d is a special character which means digits +const txt = 'This regular expression example was made in January 12, 2020.' +const matches = txt. match(pattern) + +console.log(matches) // ["1", "2", "2", "0", "2", "0"], this is not what we want +``` + +```js +const pattern = /\d+/g // d is a special character which means digits +const txt = 'This regular expression example was made in January 12, 2020.' +const matches = txt. match(pattern) + +console.log(matches) // ["12", "2020"], this is not what we want +``` + +### One or more times(+) + +```js +const pattern = /\d+/g // d is a special character which means digits +const txt = 'This regular expression example was made in January 12, 2020.' +const matches = txt. match(pattern) +console.log(matches) // ["12", "2020"], this is not what we want +``` + +### Period(.) + +```js +const pattern = /[a]./g // this square bracket means a and . means any character except new line +const txt = 'Apple and banana are fruits' +const matches = txt.match(pattern) + +console.log(matches) // ["an", "an", "an", "a ", "ar"] +``` + +```js +const pattern = /[a].+/g // . any character, + any character one or more times +const txt = 'Apple and banana are fruits' +const matches = txt.match(pattern) + +console.log(matches) // ['and banana are fruits'] +``` + +### Zero or more times(*) + +Zero or many times. The pattern may not occur or it can occur many times. + +```js + +const pattern = /[a].*/g //. any character, + any character one or more times +const txt = 'Apple and banana are fruits' +const matches = txt.match(pattern) + +console.log(matches) // ['and banana are fruits'] + +``` + +### Zero or one times(?) + +Zero or one times. The pattern may not occur or it may occur once. + +```js +const txt = 'I am not sure if there is a convention how to write the word e-mail.\ +Some people write it email others may write it as Email or E-mail.' +const pattern = /[Ee]-?mail/g // ? means optional +matches = txt.match(pattern) + +console.log(matches) // ["e-mail", "email", "Email", "E-mail"] + +``` + +### Quantifier in RegExp + +We can specify the length of the substring we look for in a text, using a curly bracket. Let us see, how ot use RegExp quantifiers. Imagine, we are interested in substring that their length are 4 characters + +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\\b\w{4}\b/g // exactly four character words +const matches = txt.match(pattern) +console.log(matches) //['This', 'made', '2019'] +``` + +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\b[a-zA-Z]{4}\b/g // exactly four character words without numbers +const matches = txt.match(pattern) +console.log(matches) //['This', 'made'] +``` + +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\d{4}/g // a number and exactly four digits +const matches = txt.match(pattern) +console.log(matches) // ['2019'] +``` + +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\d{1,4}/g // 1 to 4 +const matches = txt.match(pattern) +console.log(matches) // ['6', '2019'] +``` + +### Cart ^ + +- Starts with + +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /^This/ // ^ means starts with +const matches = txt.match(pattern) +console.log(matches) // ['This'] +``` + +- Negation + +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /[^A-Za-z,. ]+/g // ^ in set character means negation, not A to Z, not a to z, no space, no comma no period +const matches = txt.match(pattern) +console.log(matches) // ["6", "2019"] +``` + +### Exact match + +It should have ^ starting and $ which is an end. + +```js +let pattern = /^[A-Z][a-z]{3,12}$/; +let name = 'Asabeneh'; +let result = pattern.test(name) + +console.log(result) // true +``` + +🌕 You are going far. Keep going! Now, you are super charged with the power of regular expression. You have the power to extract and clean any kind of text and you can make meaning out of unstructured data. You have just completed day 12 challenges and you are 12 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## 💻 Esercizi + +### Esercizi: Livello 1 + +1. Calculate the total annual income of the person from the following text. ‘He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month.’ +1. The position of some particles on the horizontal x-axis -12, -4, -3 and -1 in the negative direction, 0 at origin, 4 and 8 in the positive direction. Extract these numbers and find the distance between the two furthest particles. + +```js +points = ['-1', '2', '-4', '-3', '-1', '0', '4', '8'] +sortedPoints = [-4, -3, -1, -1, 0, 2, 4, 8] +distance = 12 +``` + +1. Write a pattern which identify if a string is a valid JavaScript variable + + ```sh + is_valid_variable('first_name') # True + is_valid_variable('first-name') # False + is_valid_variable('1first_name') # False + is_valid_variable('firstname') # True + ``` + +### Esercizi: Livello 2 + +1. Write a function called *tenMostFrequentWords* which get the ten most frequent word from a string? + + ```js + paragraph = `I love teaching. If you do not love teaching what else can you love. I love Python if you do not love something which can give you all the capabilities to develop an application what else can you love.` + console.log(tenMostFrequentWords(paragraph)) + ``` + + ```sh + [ + {word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1}, + {word:'to', count:1}, + {word:'the', count:1}, + {word:'something', count:1}, + {word:'if', count:1}, + {word:'give', count:1}, + {word:'develop',count:1}, + {word:'capabilities',count:1}, + {word:'application', count:1}, + {word:'an',count:1}, + {word:'all',count:1}, + {word:'Python',count:1}, + {word:'If',count:1}] + ``` + + ```js + console.log(tenMostFrequentWords(paragraph, 10)) + ``` + + ```sh + [{word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1} + ] + ``` + +### Esercizi: Livello 3 + +1. Writ a function which cleans text. Clean the following text. After cleaning, count three most frequent words in the string. + + ```js + sentence = `%I $am@% a %tea@cher%, &and& I lo%#ve %tea@ching%;. There $is nothing; &as& mo@re rewarding as educa@ting &and& @emp%o@wering peo@ple. ;I found tea@ching m%o@re interesting tha@n any other %jo@bs. %Do@es thi%s mo@tivate yo@u to be a tea@cher!?` + console.log(cleanText(sentence)) + ``` + + ```sh + I am a teacher and I love teaching There is nothing as more rewarding as educating and empowering people I found teaching more interesting than any other jobs Does this motivate you to be a teacher + ``` +2. Write a function which find the most frequent words. After cleaning, count three most frequent words in the string. + + ```js + console.log(mostFrequentWords(cleanedText)) + [{word:'I', count:3}, {word:'teaching', count:2}, {word:'teacher', count:2}] + ``` + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 11](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) | [Day 13 >>](../13_Day_Console_object_methods/13_day_console_object_methods.md) diff --git a/Italian/13_Day_Console_object_methods/13_day_console_object_methods.md b/Italian/13_Day_Console_object_methods/13_day_console_object_methods.md new file mode 100644 index 0000000..2f907b2 --- /dev/null +++ b/Italian/13_Day_Console_object_methods/13_day_console_object_methods.md @@ -0,0 +1,358 @@ +
+

30 Days Of JavaScript: Console Object Methods

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 12](../12_Day_Regular_expressions/12_day_regular_expressions.md) | [Day 14>>](../14_Day_Error_handling/14_day_error_handling.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_13.png) + +- [Day 13](#day-13) + - [Console Object Methods](#console-object-methods) + - [console.log()](#consolelog) + - [console.warn()](#consolewarn) + - [console.error()](#consoleerror) + - [console.table()](#consoletable) + - [console.time()](#consoletime) + - [console.info()](#consoleinfo) + - [console.assert()](#consoleassert) + - [console.group()](#consolegroup) + - [console.count()](#consolecount) + - [console.clear()](#consoleclear) + - [Esercizi](#exercises) + - [Esercizi:Level 1](#exerciseslevel-1) + - [Esercizi:Level 2](#exerciseslevel-2) + - [Esercizi:Level 3](#exerciseslevel-3) + +# Day 13 + +## Console Object Methods + +In this section, we will cover about console and console object methods. Absolute beginners usually do not know which to use: console.log(), document.write() or document.getElementById. + +We use console object methods to show output on the browser console and we use document.write to show output on the browser document(view port). Both methods used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. We use document.getElementById() when we like to interact with DOM try using JavaScript. We will cover DOM in another section. + +In addition to the famous, console.log() method, the console provides other more methods. + +### console.log() + +We use console.log() to show output on the browser console. We can substitute values and also we can style the logging out put using %c. + +- Showing output on browser console + +```js +console.log('30 Days of JavaScript') +``` + +```sh +30 Days of JavaScript +``` + +- Substitution + +```js +console.log('%d %s of JavaScript', 30, 'Days') +``` + +```sh +30 Days of JavaScript +``` + +- CSS + +We can style logging message using css. Copy the following code and paste it on browser console to see the result. + +```js +console.log('%c30 Days Of JavaScript', 'color:green') // log output is green +console.log( + '%c30 Days%c %cOf%c %cJavaScript%c', + 'color:green', + '', + 'color:red', + '', + 'color:yellow' +) // log output green red and yellow text +``` + +### console.warn() + +We use console.warn() to give warning on browser. For instance to inform or warn deprecation of version of a package or bad practices. Copy the following code and paste it on browser console to see warning messages. + +```js +console.warn('This is a warning') +console.warn( + 'You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!' +) +console.warn('Warning is different from error') +``` + +### console.error() + +The console.error() method shows an error messages. + +```js +console.error('This is an error message') +console.error('We all make mistakes') +``` + +### console.table() + +The console.table() method display data as a table on the console. Displays tabular data as a table. The console.table() takes one required argument data, which must be an array or an object, and one additional optional parameter columns. + +Let us first start with a simple array. The code below displays a table with two columns. An index column to display the index and value column to display the names + +```js +const names = ['Asabeneh', 'Brook', 'David', 'John'] +console.table(names) +``` + +Let us also check the result of an object. This creates table with two columns:an index column containing the keys and a value column contain the values of the object. + +```js +const user = { + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 +} +console.table(user) +``` + +Check the rest of the examples by copying and paste on the browser console. + +```js +const countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'] +] +console.table(countries) +``` + +```js +const users = [ + { + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 + }, + { + name: 'Eyob', + title: 'Teacher', + country: 'Sweden', + city: 'London', + age: 25 + }, + { + name: 'Asab', + title: 'Instructor', + country: 'Norway', + city: 'Oslo', + age: 22 + }, + { + name: 'Matias', + title: 'Developer', + country: 'Denmark', + city: 'Copenhagen', + age: 28 + } +] +console.table(users) +``` + +### console.time() + +Starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started. + +```js +const countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'] +] + +console.time('Regular for loop') +for (let i = 0; i < countries.length; i++) { + console.log(countries[i][0], countries[i][1]) +} +console.timeEnd('Regular for loop') + +console.time('for of loop') +for (const [name, city] of countries) { + console.log(name, city) +} +console.timeEnd('for of loop') + +console.time('forEach loop') +countries.forEach(([name, city]) => { + console.log(name, city) +}) +console.timeEnd('forEach loop') +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +Regular for loop: 0.34716796875ms +Finland Helsinki +Sweden Stockholm +Norway Oslo +for of loop: 0.26806640625ms +Finland Helsinki +Sweden Stockholm +Norway Oslo +forEach loop: 0.358154296875ms +``` + +According the above output the regular for loop is slower than for of or forEach loop. + +### console.info() + +It displays information message on browser console. + +```js +console.info('30 Days Of JavaScript challenge is trending on Github') +console.info('30 Days Of fullStack challenge might be released') +console.info('30 Days Of HTML and CSS challenge might be released') +``` + +### console.assert() + +The console.assert() methods writes an error message to the console if the assertion is false. If the assertion is true, nothing happens. The first parameter is an assertion expression. If this expression is false, an Assertion failed error message will be displayed. + +```js +console.assert(4 > 3, '4 is greater than 3') // no result +console.assert(3 > 4, '3 is not greater than 4') // Assertion failed: 3 is not greater than 4 + +for (let i = 0; i <= 10; i += 1) { + let errorMessage = `${i} is not even` + console.log('the # is ' + i) + console.assert(i % 2 === 0, { number: i, errorMessage: errorMessage }) +} +``` + +### console.group() + +The console.group() can help to group different log groups. Copy the following code and paste it on browser console to the groups. + +```js +const names = ['Asabeneh', 'Brook', 'David', 'John'] +const countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'] +] +const user = { + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 +} +const users = [ + { + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 + }, + { + name: 'Eyob', + title: 'Teacher', + country: 'Sweden', + city: 'London', + age: 25 + }, + { + name: 'Asab', + title: 'Instructor', + country: 'Norway', + city: 'Oslo', + age: 22 + }, + { + name: 'Matias', + title: 'Developer', + country: 'Denmark', + city: 'Copenhagen', + age: 28 + } +] + +console.group('Names') +console.log(names) +console.groupEnd() + +console.group('Countries') +console.log(countries) +console.groupEnd() + +console.group('Users') +console.log(user) +console.log(users) +console.groupEnd() +``` + +### console.count() + +It prints the number of times the console.count() is called. It takes a string label parameter. It is very helpful to count the number of times a function is called. In the following example, the console.count() method will run three times + +```js +const func = () => { + console.count('Function has been called') +} +func() +func() +func() +``` + +```sh +Function has been called: 1 +Function has been called: 2 +Function has been called: 3 +``` + +### console.clear() + +The console.clear() cleans the browser console. + +🌕 Keep up the good work. Keep pushing, the sky is the limit! You have just completed day 13 challenges and you are 13 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## Esercizi + +### Esercizi:Level 1 + +1. Display the countries array as a table +2. Display the countries object as a table +3. Use console.group() to group logs + +### Esercizi:Level 2 + +1. 10 > 2 \* 10 use console.assert() +2. Write a warning message using console.warn() +3. Write an error message using console.error() + +### Esercizi:Level 3 + +1. Check the speed difference among the following loops: while, for, for of, forEach + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 12](../12_Day_Regular_expressions/12_day_regular_expressions.md) | [Day 14>>](../14_Day_Error_handling/14_day_error_handling.md) diff --git a/Italian/14_Day_Error_handling/14_day_error_handling.md b/Italian/14_Day_Error_handling/14_day_error_handling.md new file mode 100644 index 0000000..864b6b6 --- /dev/null +++ b/Italian/14_Day_Error_handling/14_day_error_handling.md @@ -0,0 +1,193 @@ +
+

30 Days Of JavaScript: Error handling

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 13](../13_Day_Console_object_methods/13_day_console_object_methods.md) | [Day 15>>](../15_Day_Classes/15_day_classes.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_14.png) + +- [Day 14](#day-14) + - [Error Handling](#error-handling) + - [Error Types](#error-types) + - [Esercizi](#exercises) + - [Esercizi:Level 1](#exerciseslevel-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi:Level](#exerciseslevel) + +# Day 14 + +## Error Handling + +JavaScript is a loosely-typed language. Some times you will get a runtime error when you try to access an undefined variable or call undefined function etc. + +JavaScript similar to python or Java provides an error-handling mechanism to catch runtime errors using try-catch-finally block. + +```js +try { + // code that may throw an error +} catch (err) { + // code to be executed if an error occurs +} finally { + // code to be executed regardless of an error occurs or not +} +``` + +**try**: wrap suspicious code that may throw an error in try block.The try statement allows us to define a block of code to be tested for errors while it is being executed. + +**catch**: write code to do something in catch block when an error occurs. The catch block can have parameters that will give you error information. Catch block is used to log an error or display specific messages to the user. + +**finally**: finally block will always be executed regardless of the occurrence of an error. The finally block can be used to complete the remaining task or reset variables that might have changed before error occurred in try block. + +**Esempio:** + +```js +try { + let lastName = 'Yetayeh' + let fullName = fistName + ' ' + lastName +} catch (err) { + console.log(err) +} +``` + +```sh +ReferenceError: fistName is not defined + at :4:20 +``` + +```js +try { + let lastName = 'Yetayeh' + let fullName = fistName + ' ' + lastName +} catch (err) { + console.error(err) // we can use console.log() or console.error() +} finally { + console.log('In any case I will be executed') +} +``` + +```sh +ReferenceError: fistName is not defined + at :4:20 +In any case it will be executed +``` + +The catch block take a parameter. It is common to pass e, err or error as a parameter to the catch block. This parameter is an object and it has name and message keys. Lets use the name and message. + +```js +try { + let lastName = 'Yetayeh' + let fullName = fistName + ' ' + lastName +} catch (err) { + console.log('Name of the error', err.name) + console.log('Error message', err.message) +} finally { + console.log('In any case I will be executed') +} +``` + +```sh +Name of the error ReferenceError +Error message fistName is not defined +In any case I will be executed +``` + +throw: the throw statement allows us to create a custom error. We can through a string, number, boolean or an object. Use the throw statement to throw an exception. When you throw an exception, expression specifies the value of the exception. Each of the following throws an exception: + +```js +throw 'Error2' // generates an exception with a string value +throw 42 // generates an exception with the value 42 +throw true // generates an exception with the value true +throw new Error('Required') // generates an error object with the message of Required +``` + +```js +const throwErrorExampleFun = () => { + let message + let x = prompt('Enter a number: ') + try { + if (x == '') throw 'empty' + if (isNaN(x)) throw 'not a number' + x = Number(x) + if (x < 5) throw 'too low' + if (x > 10) throw 'too high' + } catch (err) { + console.log(err) + } +} +throwErrorExampleFun() +``` + +### Error Types + +- ReferenceError: An illegal reference has occurred. A ReferenceError is thrown if we use a variable that has not been declared. + +```js +let firstName = 'Asabeneh' +let fullName = firstName + ' ' + lastName + +console.log(fullName) +``` + +```sh +Uncaught ReferenceError: lastName is not defined + at :2:35 +``` + +- SyntaxError: A syntax error has occurred + +```js +let square = 2 x 2 +console.log(square) + +console.log('Hello, world") +``` + +```sh +Uncaught SyntaxError: Unexpected identifier +``` + +- TypeError: A type error has occurred + +```js +let num = 10 +console.log(num.toLowerCase()) +``` + +```sh +Uncaught TypeError: num.toLowerCase is not a function + at :2:17 +``` + +These are some of the common error you may face when you write a code. Understanding errors can help you to know what mistakes you made and it will help you to debug your code fast. + +🌕 You are flawless. Now, you knew how to handle errors and you can write robust application which handle unexpected user inputs. You have just completed day 14 challenges and you are 14 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## Esercizi + +### Esercizi:Level 1 + +Practice + +### Esercizi: Livello 2 + +Practice + +### Esercizi:Level + +Practice + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 13](../13_Day_Console_object_methods/13_day_console_object_methods.md) | [Day 15>>](../15_Day_Classes/15_day_classes.md) diff --git a/Italian/15_Day_Classes/15_day_classes.md b/Italian/15_Day_Classes/15_day_classes.md new file mode 100644 index 0000000..01dd333 --- /dev/null +++ b/Italian/15_Day_Classes/15_day_classes.md @@ -0,0 +1,715 @@ +
+

30 Days Of JavaScript: Classes

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 14](../14_Day_Error_handling/14_day_error_handling.md) | [Day 16>>](../16_Day_JSON/16_day_json.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_15.png) + +- [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) + - [getter](#getter) + - [setter](#setter) + - [Static method](#static-method) + - [Inheritance](#inheritance) + - [Overriding methods](#overriding-methods) + - [Esercizi](#exercises) + - [Esercizi Livello 1](#exercises-level-1) + - [Esercizi Livello 2](#exercises-level-2) + - [Esercizi Livello 3](#exercises-level-3) + +# Day 15 + +## Classes + +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. + +Once we create a class we can create object from it whenever we want. Creating an object from a class is called class instantiation. + +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. + +### Defining a classes + +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. + +```sh +// syntax +class ClassName { + // code goes here +} + +``` + +**Esempio:** + +```js +class Person { + // code goes here +} +``` + +We have created an Person class but it does not have any thing inside. + +### Class Instantiation + +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. + +Let us create a dog object from our Person class. + +```js +class Person { + // code goes here +} +const person = new Person() +console.log(person) +``` + +```sh +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. + +Let use the class constructor to pass different properties for the class. + +### Class Constructor + +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. + +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. + +```js +class Person { + constructor(firstName, lastName) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName + } +} + +const person = new Person() + +console.log(person) +``` + +```sh +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. + +```js +class Person { + constructor(firstName, lastName) { + this.firstName = firstName + this.lastName = lastName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh') + +console.log(person1) +``` + +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh"} +``` + +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. + +```js +class Person { + constructor(firstName, lastName) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh') +const person2 = new Person('Lidiya', 'Tekle') +const person3 = new Person('Abraham', 'Yetayeh') + +console.log(person1) +console.log(person2) +console.log(person3) +``` + +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh"} +Person {firstName: "Lidiya", lastName: "Tekle"} +Person {firstName: "Abraham", lastName: "Yetayeh"} +``` + +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. + +```js +class Person { + constructor(firstName, lastName, age, country, city) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') + +console.log(person1) +``` + +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki"} +``` + +### Default values with constructor + +The constructor function properties may have a default value like other regular functions. + +```js +class Person { + constructor( + firstName = 'Asabeneh', + lastName = 'Yetayeh', + age = 250, + country = 'Finland', + city = 'Helsinki' + ) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + } +} + +const person1 = new Person() // it will take the default values +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1) +console.log(person2) +``` + +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki"} +Person {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Espoo"} +``` + +### Class methods + +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. + +```js +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.getFullName()) +console.log(person2.getFullName()) +``` + +```sh +Asabeneh Yetayeh +test.js:19 Lidiya Tekle +``` + +### Properties with initial value + +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. + +```js +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.score) +console.log(person2.score) + +console.log(person1.skills) +console.log(person2.skills) +``` + +```sh +0 +0 +[] +[] +``` + +A method could be regular method or a getter or a setter. Let us see, getter and 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 + +```js +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.getScore) // We do not need parenthesis to call a getter method +console.log(person2.getScore) + +console.log(person1.getSkills) +console.log(person2.getSkills) +``` + +```sh +0 +0 +[] +[] +``` + +### 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. + +```js +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +person1.setScore = 1 +person1.setSkill = 'HTML' +person1.setSkill = 'CSS' +person1.setSkill = 'JavaScript' + +person2.setScore = 1 +person2.setSkill = 'Planning' +person2.setSkill = 'Managing' +person2.setSkill = 'Organizing' + +console.log(person1.score) +console.log(person2.score) + +console.log(person1.skills) +console.log(person2.skills) +``` + +```sh +1 +1 +["HTML", "CSS", "JavaScript"] +["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. + +```js +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + let formattedSkills = skills ? `He knows ${skills}` : '' + + let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}` + return info + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') +const person3 = new Person('John', 'Doe', 50, 'Mars', 'Mars city') + +person1.setScore = 1 +person1.setSkill = 'HTML' +person1.setSkill = 'CSS' +person1.setSkill = 'JavaScript' + +person2.setScore = 1 +person2.setSkill = 'Planning' +person2.setSkill = 'Managing' +person2.setSkill = 'Organizing' + +console.log(person1.getScore) +console.log(person2.getScore) + +console.log(person1.getSkills) +console.log(person2.getSkills) +console.log(person3.getSkills) + +console.log(person1.getPersonInfo()) +console.log(person2.getPersonInfo()) +console.log(person3.getPersonInfo()) +``` + +```sh +1 +1 +["HTML", "CSS", "JavaScript"] +["Planning", "Managing", "Organizing"] +[] +Asabeneh Yetayeh is 250. He lives Helsinki, Finland. He knows HTML, CSS and JavaScript +Lidiya Tekle is 28. He lives Espoo, Finland. He knows Planning, Managing and Organizing +John Doe is 50. He lives Mars city, Mars. +``` + +### Static method + +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. + +```js +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + + let formattedSkills = skills ? `He knows ${skills}` : '' + + let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}` + return info + } + static favoriteSkill() { + const skills = ['HTML', 'CSS', 'JS', 'React', 'Python', 'Node'] + const index = Math.floor(Math.random() * skills.length) + return skills[index] + } + static showDateTime() { + let now = new Date() + let year = now.getFullYear() + let month = now.getMonth() + 1 + let date = now.getDate() + let hours = now.getHours() + let minutes = now.getMinutes() + if (hours < 10) { + hours = '0' + hours + } + if (minutes < 10) { + minutes = '0' + minutes + } + + let dateMonthYear = date + '.' + month + '.' + year + let time = hours + ':' + minutes + let fullTime = dateMonthYear + ' ' + time + return fullTime + } +} + +console.log(Person.favoriteSkill()) +console.log(Person.showDateTime()) +``` + +```sh +Node +15.1.2020 23:56 +``` + +The static methods are methods which can be used as utility functions. + +## Inheritance + +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. + +```js +// syntax +class ChildClassName extends { + // code goes here +} +``` + +Let us create a Student child class from Person parent class. + +```js +class Student extends Person { + saySomething() { + console.log('I am a child of the person class') + } +} + +const s1 = new Student('Asabeneh', 'Yetayeh', 'Finland', 250, 'Helsinki') +console.log(s1) +console.log(s1.saySomething()) +console.log(s1.getFullName()) +console.log(s1.getPersonInfo()) +``` + +```sh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: "Finland", country: 250, city: "Helsinki", …} +I am a child of the person class +Asabeneh Yetayeh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: "Finland", country: 250, city: "Helsinki", …} +Asabeneh Yetayeh is Finland. He lives Helsinki, 250. +``` + +### Overriding methods + +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. + +```js +class Student extends Person { + constructor(firstName, lastName, age, country, city, gender) { + super(firstName, lastName, age, country, city) + this.gender = gender + } + + saySomething() { + console.log('I am a child of the person class') + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + + let formattedSkills = skills ? `He knows ${skills}` : '' + let pronoun = this.gender == 'Male' ? 'He' : 'She' + + let info = `${fullName} is ${this.age}. ${pronoun} lives in ${this.city}, ${this.country}. ${formattedSkills}` + return info + } +} + +const s1 = new Student( + 'Asabeneh', + 'Yetayeh', + 250, + 'Finland', + 'Helsinki', + 'Male' +) +const s2 = new Student('Lidiya', 'Tekle', 28, 'Finland', 'Helsinki', 'Female') +s1.setScore = 1 +s1.setSkill = 'HTML' +s1.setSkill = 'CSS' +s1.setSkill = 'JavaScript' + +s2.setScore = 1 +s2.setSkill = 'Planning' +s2.setSkill = 'Managing' +s2.setSkill = 'Organizing' + +console.log(s1) + +console.log(s1.saySomething()) +console.log(s1.getFullName()) +console.log(s1.getPersonInfo()) + +console.log(s2.saySomething()) +console.log(s2.getFullName()) +console.log(s2.getPersonInfo()) +``` + +```sh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki", …} +Student {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Helsinki", …} +I am a child of the person class +Asabeneh Yetayeh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki", …} +Asabeneh Yetayeh is 250. He lives in Helsinki, Finland. He knows HTML, CSS and JavaScript +I am a child of the person class +Lidiya Tekle +Student {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Helsinki", …} +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. + +🌕 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. + +## 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. + +### Esercizi Livello 2 + +1. Override the method you create in Animal class + +### 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. + +```JS +ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26] + +console.log('Count:', statistics.count()) // 25 +console.log('Sum: ', statistics.sum()) // 744 +console.log('Min: ', statistics.min()) // 24 +console.log('Max: ', statistics.max()) // 38 +console.log('Range: ', statistics.range() // 14 +console.log('Mean: ', statistics.mean()) // 30 +console.log('Median: ',statistics.median()) // 29 +console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5} +console.log('Variance: ',statistics.var()) // 17.5 +console.log('Standard Deviation: ', statistics.std()) // 4.2 +console.log('Variance: ',statistics.var()) // 17.5 +console.log('Frequency Distribution: ',statistics.freqDist()) // [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] +``` + +```sh +// you output should look like this +console.log(statistics.describe()) +Count: 25 +Sum: 744 +Min: 24 +Max: 38 +Range: 14 +Mean: 30 +Median: 29 +Mode: (26, 5) +Variance: 17.5 +Standard Deviation: 4.2 +Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] +``` + +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. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 14](../14_Day_Error_handling/14_day_error_handling.md) | [Day 16>>](../16_Day_JSON/16_day_json.md) diff --git a/Italian/16_Day_JSON/16_day_json.md b/Italian/16_Day_JSON/16_day_json.md new file mode 100644 index 0000000..a2d0bfa --- /dev/null +++ b/Italian/16_Day_JSON/16_day_json.md @@ -0,0 +1,598 @@ +
+

30 Days Of JavaScript: JSON

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 15](../15_Day_Classes/15_day_classes.md) | [Day 17 >>](../17_Day_Web_storages/17_day_web_storages.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_16.png) + +- [Day 16](#day-16) + - [JSON](#json) + - [Converting JSON to JavaScript Object](#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) + - [Esercizi](#exercises) + - [Esercizi Livello 1](#exercises-level-1) + - [Esercizi Livello 2](#exercises-level-2) + - [Esercizi Livello 3](#exercises-level-3) + +# Day 16 + +## 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. + +**Esempio:** + +```js +{ +"users":[ + { + "firstName":"Asabeneh", + "lastName":"Yetayeh", + "age":250, + "email":"asab@asb.com" + }, + { + "firstName":"Alex", + "lastName":"James", + "age":25, + "email":"alex@alex.com" + }, + { + "firstName":"Lidiya", + "lastName":"Tekle", + "age":28, + "email":"lidiya@lidiya.com" + } +] +} +``` + +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. + +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. + +**Esempio:** + +```js +{ + "Alex": { + "email": "alex@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript" + ], + "age": 20, + "isLoggedIn": false, + "points": 30 + }, + "Asab": { + "email": "asab@asab.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Redux", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 25, + "isLoggedIn": false, + "points": 50 + }, + "Brook": { + "email": "daniel@daniel.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux" + ], + "age": 30, + "isLoggedIn": true, + "points": 50 + }, + "Daniel": { + "email": "daniel@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Python" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "John": { + "email": "john@john.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node.js" + ], + "age": 20, + "isLoggedIn": true, + "points": 50 + }, + "Thomas": { + "email": "thomas@thomas.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "Paul": { + "email": "paul@paul.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + } +} +``` + +### Converting JSON to JavaScript Object + +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()_. + +#### JSON.parse() + +```js +JSON.parse(json[, reviver]) +// json or text , the data +// reviver is an optional callback function +/* JSON.parse(json, (key, value) => { + +}) +*/ +``` + +```js +const usersText = `{ +"users":[ + { + "firstName":"Asabeneh", + "lastName":"Yetayeh", + "age":250, + "email":"asab@asb.com" + }, + { + "firstName":"Alex", + "lastName":"James", + "age":25, + "email":"alex@alex.com" + }, + { + "firstName":"Lidiya", + "lastName":"Tekle", + "age":28, + "email":"lidiya@lidiya.com" + } +] +}` + +const usersObj = JSON.parse(usersText, undefined, 4) +console.log(usersObj) +``` + +### Using a reviver function with JSON.parse() + +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 . + +```js +const usersText = `{ +"users":[ + { + "firstName":"Asabeneh", + "lastName":"Yetayeh", + "age":250, + "email":"asab@asb.com" + }, + { + "firstName":"Alex", + "lastName":"James", + "age":25, + "email":"alex@alex.com" + }, + { + "firstName":"Lidiya", + "lastName":"Tekle", + "age":28, + "email":"lidiya@lidiya.com" + } +] +}` + +const usersObj = JSON.parse(usersText, (key, value) => { + let newValue = + typeof value == 'string' && key != 'email' ? value.toUpperCase() : value + return newValue +}) +console.log(usersObj) +``` + +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. + +### Converting Object to 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. + +```js +JSON.stringify(obj, replacer, space) +// json or text , the data +// reviver is an optional callback function +``` + +Let us convert the following object to a string. First let use keep all the keys and also let us have 4 space indentation. + +```js +const users = { + Alex: { + email: 'alex@alex.com', + skills: ['HTML', 'CSS', 'JavaScript'], + age: 20, + isLoggedIn: false, + points: 30 + }, + Asab: { + email: 'asab@asab.com', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'Redux', + 'MongoDB', + 'Express', + 'React', + 'Node' + ], + age: 25, + isLoggedIn: false, + points: 50 + }, + Brook: { + email: 'daniel@daniel.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'], + age: 30, + isLoggedIn: true, + points: 50 + }, + Daniel: { + email: 'daniel@alex.com', + skills: ['HTML', 'CSS', 'JavaScript', 'Python'], + age: 20, + isLoggedIn: false, + points: 40 + }, + John: { + email: 'john@john.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'], + age: 20, + isLoggedIn: true, + points: 50 + }, + Thomas: { + email: 'thomas@thomas.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React'], + age: 20, + isLoggedIn: false, + points: 40 + }, + Paul: { + email: 'paul@paul.com', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'MongoDB', + 'Express', + 'React', + 'Node' + ], + age: 20, + isLoggedIn: false, + points: 40 + } +} + +const txt = JSON.stringify(users, undefined, 4) +console.log(txt) // text means JSON- because json is a string form of an object. +``` + +```sh +{ + "Alex": { + "email": "alex@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript" + ], + "age": 20, + "isLoggedIn": false, + "points": 30 + }, + "Asab": { + "email": "asab@asab.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Redux", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 25, + "isLoggedIn": false, + "points": 50 + }, + "Brook": { + "email": "daniel@daniel.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux" + ], + "age": 30, + "isLoggedIn": true, + "points": 50 + }, + "Daniel": { + "email": "daniel@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Python" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "John": { + "email": "john@john.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node.js" + ], + "age": 20, + "isLoggedIn": true, + "points": 50 + }, + "Thomas": { + "email": "thomas@thomas.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "Paul": { + "email": "paul@paul.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + } +} +``` + +### Using a Filter Array with 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. + +```js +const user = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + country: 'Finland', + city: 'Helsinki', + email: 'alex@alex.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Python'], + age: 250, + isLoggedIn: false, + points: 30 +} + +const txt = JSON.stringify(user,['firstName', 'lastName', 'country', 'city', 'age'],4) +console.log(txt) +``` + +```sh +{ + "firstName": "Asabeneh", + "lastName": "Yetayeh", + "country": "Finland", + "city": "Helsinki", + "age": 250 +} +``` + +🌕 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. + +## Esercizi + +```js +const skills = ['HTML', 'CSS', 'JS', 'React','Node', 'Python'] +let age = 250; +let isMarried = true +const student = { + firstName:'Asabeneh', + lastName:'Yetayehe', + age:250, + isMarried:true, + skills:['HTML', 'CSS', 'JS', 'React','Node', 'Python', ] +} +const txt = `{ + "Alex": { + "email": "alex@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript" + ], + "age": 20, + "isLoggedIn": false, + "points": 30 + }, + "Asab": { + "email": "asab@asab.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Redux", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 25, + "isLoggedIn": false, + "points": 50 + }, + "Brook": { + "email": "daniel@daniel.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux" + ], + "age": 30, + "isLoggedIn": true, + "points": 50 + }, + "Daniel": { + "email": "daniel@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Python" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "John": { + "email": "john@john.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node.js" + ], + "age": 20, + "isLoggedIn": true, + "points": 50 + }, + "Thomas": { + "email": "thomas@thomas.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "Paul": { + "email": "paul@paul.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + } +} +` +``` + +### 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 + +### Esercizi Livello 2 + +1. Stringify the students object with only firstName, lastName and skills properties + +### Esercizi Livello 3 + +1. Parse the *txt* JSON to object. +2. Find the user who has many skills from the variable stored in *txt*. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 15](../15_Day_Classes/15_day_classes.md) | [Day 17 >>](../17_Day_Web_storages/17_day_web_storages.md) diff --git a/Italian/17_Day_Web_storages/17_day_web_storages.md b/Italian/17_Day_Web_storages/17_day_web_storages.md new file mode 100644 index 0000000..d804cfb --- /dev/null +++ b/Italian/17_Day_Web_storages/17_day_web_storages.md @@ -0,0 +1,233 @@ +
+

30 Days Of JavaScript: Web Storages

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 16](../16_Day_JSON/16_day_json.md) | [Day 18 >>](../18_Day_Promises/18_day_promises.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_17.png) + +- [Day 17](#day-17) + - [HTML5 Web Storage](#html5-web-storage) + - [sessionStorage](#sessionstorage) + - [localStorage](#localstorage) + - [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) + - [Esercizi](#exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# Day 17 + +## 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. + +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: + +- 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. + +It should be noted that data stored in either localStorage or sessionStorage is specific to the protocol of the page. + +The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings). + +![web_storage](../images/web_storage.png) + +### 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. + +### 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. + +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: +_setItem(), getItem(), removeItem(), clear(), key()_ + +### Use case of Web Storages + +Some use case of Web Storages are + +- store data temporarily +- 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 + +For the examples mentioned above, it makes sense to use localStorage. You may be wondering, then, when we should use 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. + +Now, let us see how make use of these Web Storage APIs. + +## HTML5 Web Storage Objects + +HTML web storage provides two objects for storing data on the 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. + +Web Storage objects: + +- _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. + +![local_storage](../images/local_storage.png) + +### Setting item to the 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. + +We store data in the localStorage using the _localStorage.setItem_ method. + +```js +//syntax +localStorage.setItem('key', 'value') +``` + +- Storing string in a localStorage + +```js +localStorage.setItem('firstName', 'Asabeneh') // since the value is string we do not stringify it +console.log(localStorage) +``` + +```sh +Storage {firstName: 'Asabeneh', length: 1} +``` + +- Storing number in a local storage + +```js +localStorage.setItem('age', 200) +console.log(localStorage) +``` + +```sh + Storage {age: '200', firstName: 'Asabeneh', length: 2} +``` + +- 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. + +```js +const skills = ['HTML', 'CSS', 'JS', 'React'] +//Skills array has to be stringified first to keep the format. +const skillsJSON = JSON.stringify(skills, undefined, 4) +localStorage.setItem('skills', skillsJSON) +console.log(localStorage) +``` + +```sh +Storage {age: '200', firstName: 'Asabeneh', skills: 'HTML,CSS,JS,React', length: 3} +``` + +```js +let skills = [ + { tech: 'HTML', level: 10 }, + { tech: 'CSS', level: 9 }, + { tech: 'JS', level: 8 }, + { tech: 'React', level: 9 }, + { tech: 'Redux', level: 10 }, + { tech: 'Node', level: 8 }, + { tech: 'MongoDB', level: 8 } +] + +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. + +```js +const user = { + firstName: 'Asabeneh', + age: 250, + skills: ['HTML', 'CSS', 'JS', 'React'] +} + +const userText = JSON.stringify(user, undefined, 4) +localStorage.setItem('user', userText) +``` + +### Getting item from localStorage + +We get data from the local storage using _localStorage.getItem()_ method. + +```js +//syntax +localStorage.getItem('key') +``` + +```js +let firstName = localStorage.getItem('firstName') +let age = localStorage.getItem('age') +let skills = localStorage.getItem('skills') +console.log(firstName, age, skills) +``` + +```sh + 'Asabeneh', '200', '['HTML','CSS','JS','React']' +``` + +As you can see the skill is in a string format. Let us use JSON.parse() to parse it to normal array. + +```js +let skills = localStorage.getItem('skills') +let skillsObj = JSON.parse(skills, undefined, 4) +console.log(skillsObj) +``` + +```sh +['HTML','CSS','JS','React'] +``` + +### Clearing the localStorage + +The clear method, will clear everything stored in the local storage + +```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. + +## Esercizi + +### Esercizi: Livello 1 + +1. Store you first name, last name, age, country, city in your 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. + +### 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. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 16](../16_Day_JSON/16_day_json.md) | [Day 18 >>](../18_Day_Promises/18_day_promises.md) diff --git a/Italian/18_Day_Promises/18_day_promises.md b/Italian/18_Day_Promises/18_day_promises.md new file mode 100644 index 0000000..d5b1bcd --- /dev/null +++ b/Italian/18_Day_Promises/18_day_promises.md @@ -0,0 +1,273 @@ +
+

30 Days Of JavaScript: Promises

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 17](../17_Day_Web_storages/17_day_web_storages.md) | [Day 19>>](../19_Day_Closures/19_day_closures.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_18.png) + +- [Day 18](#day-18) + - [Promise](#promise) + - [Callbacks](#callbacks) + - [Promise constructor](#promise-constructor) + - [Fetch API](#fetch-api) + - [Async and Await](#async-and-await) + - [Esercizi](#exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# Day 18 + +## Promise + +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. + +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. + +A Promise is in one of these states: + +- pending: initial state, neither fulfilled nor rejected. +- fulfilled: meaning that the operation completed successfully. +- rejected: meaning that the operation failed. + +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.) + +As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained. + +## 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. + +- call back + 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. + +In this case the err has a value and it will return the err block. + +```js +//Callback +const doSomething = callback => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + callback('It did not go well', skills) + }, 2000) +} + +const callback = (err, result) => { + if (err) { + return console.log(err) + } + return console.log(result) +} + +doSomething(callback) +``` + +```sh +// after 2 seconds it will print +It did not go well +``` + +In this case the err is false and it will return the else block which is the result. + +```js +const doSomething = callback => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + callback(false, skills) + }, 2000) +} + +doSomething((err, result) => { + if (err) { + return console.log(err) + } + return console.log(result) +}) +``` + +```sh +// after 2 seconds it will print the skills +["HTML", "CSS", "JS"] +``` + +### Promise constructor + +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. + +```js +// syntax +const promise = new Promise((resolve, reject) => { + resolve('success') + reject('failure') +}) +``` + +```js +// Promise +const doPromise = new Promise((resolve, reject) => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + if (skills.length > 0) { + resolve(skills) + } else { + reject('Something wrong has happened') + } + }, 2000) +}) + +doPromise + .then(result => { + console.log(result) + }) + .catch(error => console.log(error)) +``` + +```sh +["HTML", "CSS", "JS"] +``` + +The above promise has been settled with resolve. +Let us another example when the promise is settled with reject. + +```js +// Promise +const doPromise = new Promise((resolve, reject) => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + if (skills.includes('Node')) { + resolve('fullstack developer') + } else { + reject('Something wrong has happened') + } + }, 2000) +}) + +doPromise + .then(result => { + console.log(result) + }) + .catch(error => console.error(error)) +``` + +```sh +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. + +```js +const url = 'https://restcountries.com/v2/all' // countries api +fetch(url) + .then(response => response.json()) // accessing the API data as JSON + .then(data => { + // getting the data + console.log(data) + }) + .catch(error => console.error(error)) // handling error if something wrong happens +``` + +## Async and Await + +Async and await is an elegant way to handle promises. It is easy to understand and it clean to write. + +```js +const square = async function (n) { + return n * n +} + +square(2) +``` + +```sh +Promise {: 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. + +How do we access the value from the promise? To access the value from the promise, we will use the keyword _await_. + +```js +const square = async function (n) { + return n * n +} +const value = await square(2) +console.log(value) +``` + +```sh +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. + +Let us fetch API data using both promise method and async and await method. + +- promise + +```js +const url = 'https://restcountries.com/v2/all' +fetch(url) + .then(response => response.json()) + .then(data => { + console.log(data) + }) + .catch(error => console.error(error)) +``` + +- async and await + +```js +const fetchData = async () => { + try { + const response = await fetch(url) + const countries = await response.json() + console.log(countries) + } catch (err) { + console.error(err) + } +} +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. + +## Esercizi + +```js +const countriesAPI = 'https://restcountries.com/v2/all' +const catsAPI = 'https://api.thecatapi.com/v1/breeds' +``` + +### Esercizi: Livello 1 + +1. Read the countries API using fetch and print the name of country, capital, languages, population and area. + +### Esercizi: Livello 2 + +1. Print out all the cat names in to catNames variable. + +### Esercizi: Livello 3 + +1. Read the cats api and find the average weight of cat in metric unit. +2. Read the countries api and find out the 10 largest countries +3. Read the countries api and count total number of languages in the world used as officials. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 17](../17_Day_Web_storages/17_day_web_storages.md) | [Day 19>>](../19_Day_Closures/19_day_closures.md) diff --git a/Italian/19_Day_Closures/19_day_closures.md b/Italian/19_Day_Closures/19_day_closures.md new file mode 100644 index 0000000..8a25d3f --- /dev/null +++ b/Italian/19_Day_Closures/19_day_closures.md @@ -0,0 +1,104 @@ +
+

30 Days Of JavaScript: Closures

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 18](../18_Day_Promises/18_day_promises.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_19.png) +- [Day 19](#day-19) + - [Closure](#closure) + - [Esercizi](#exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# Day 19 + +## Closure + +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. + +```js +function outerFunction() { + let count = 0; + function innerFunction() { + count++ + return count + } + + return innerFunction +} +const innerFunc = outerFunction() + +console.log(innerFunc()) +console.log(innerFunc()) +console.log(innerFunc()) +``` + +```sh +1 +2 +3 +``` + +Let us more example of inner functions + +```js +function outerFunction() { + let count = 0; + function plusOne() { + count++ + return count + } + function minusOne() { + count-- + return count + } + + return { + plusOne:plusOne(), + minusOne:minusOne() + } +} +const innerFuncs = outerFunction() + +console.log(innerFuncs.plusOne) +console.log(innerFuncs.minusOne) +``` + +```sh +1 +0 +``` + +🌕 You are making progress. Maintain your momentum, keep the good work. Now do some exercises for your brain and for your muscle. + +## Esercizi + +### Esercizi: Livello 1 + +1. Create a closure which has one inner function + +### Esercizi: Livello 2 + +1. Create a closure which has three inner functions + +### 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. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 18](../18_Day_Promises/18_day_promises.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) \ No newline at end of file diff --git a/Italian/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md b/Italian/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md new file mode 100644 index 0000000..55db417 --- /dev/null +++ b/Italian/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md @@ -0,0 +1,360 @@ +
+

30 Days Of JavaScript: Writing Clean Codes

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 19](../19_Day_Closuers/19_day_closures.md) | [Day 21 >>](../21_Day_DOM/21_day_dom.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_20.png) +- [Day 20](#day-20) + - [Writing clean code](#writing-clean-code) + - [JavaScript Style Guide](#javascript-style-guide) + - [Why we need style guide](#why-we-need-style-guide) + - [Airbnb JavaScript Style Guide](#airbnb-javascript-style-guide) + - [Standard JavaScript Style Guide](#standard-javascript-style-guide) + - [Google JavaScript Style Guide](#google-javascript-style-guide) + - [JavaScript Coding Conventions](#javascript-coding-conventions) + - [Conventions use in 30DaysOfJavaScript](#conventions-use-in-30daysofjavascript) + - [Variables](#variables) + - [Arrays](#arrays) + - [Functions](#functions) + - [Loops](#loops) + - [Objects](#objects) + - [Conditional](#conditional) + - [Classes](#classes) + +# Day 20 + +## Writing clean code + +### JavaScript Style Guide + +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. + +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. + +### Why we need style guide + +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. + +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 + +- Airbnb JavaScript Style Guide +- JavaScript Standard Style Guide +- Google JavaScript Style Guide + +#### Airbnb JavaScript Style Guide + +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. + +#### Standard JavaScript Style Guide + +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/). + +#### Google JavaScript Style Guide + +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). + +### JavaScript Coding Conventions + +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. + +Coding conventions helps: + +- to write clean code +- to improve code readability +- to improve code re-useability and maintainability + +Coding conventions includes + +- 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 + +#### Conventions use in 30DaysOfJavaScript + +In this challenge we follow the regular JavaScript convention but I added also my preference of writing. + +- 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 + +#### Variables + +```js + +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' + +const PI = Math.PI +const gravity = 9.81 +``` + +#### Arrays + +We chose to make array names plural + +- names +- numbers +- countries +- languages +- skills +- fruits +- vegetables + +```js +// arrays +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const numbers = [0, 3.14, 9.81, 37, 98.6, 100] +const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] +const languages = ['Amharic', 'Arabic', 'English', 'French', 'Spanish'] +const skills = ['HTML', 'CSS', 'JavaScript', 'React', 'Python'] +const fruits = ['banana', 'orange', 'mango', 'lemon'] +const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] +``` + +#### Functions + +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 + +```js +// function which return full name of a person +const printFullName = (firstName, lastName) => firstName + ' ' + lastName + +// function which calculates a square of a number +const square = (n) => n * n + +// a function which generate random hexa colors +const hexaColor = () => { + const str = '0123456789abcdef' + let hexa = '#' + let index + for (let i = 0; i < 6; i++) { + index = Math.floor(Math.random() * str.length) + hexa += str[index] + } + return hexa +} + +// a function which shows date and time +const showDateTime = () => { + const now = new Date() + const year = now.getFullYear() + const month = now.getMonth() + 1 + const date = now.getDate() + let hours = now.getHours() + let minutes = now.getMinutes() + if (hours < 10) { + hours = '0' + hours + } + if (minutes < 10) { + minutes = '0' + minutes + } + + const dateMonthYear = date + '.' + month + '.' + year + const time = hours + ':' + minutes + const fullTime = dateMonthYear + ' ' + time + return fullTime +} +``` + +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). + +#### 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: + +```js +for (let i = 0; i < n; i++){ + console.log() +} + +// declaring an array variable +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] + +// iterating an array using regular for loop +let len = names.length; +for(let i = 0; i < len; i++){ + console.log(names[i].toUpperCase()) +} + + +// iterating an array using for of +for( const name of names) { + console.log(name.toUpperCase()) +} + +// iterating array using forEach +names.forEach((name) => name.toUpperCase()) + + +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: ['HTML','CSS','JavaScript','React','Node','MongoDB','Python','D3.js'], + isMarried: true +} +for(const key in person) { + console.log(key) +} + +``` + +#### Objects + +We declare object literal with *const*. + +```js +// declaring object literal +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: ['HTML','CSS','JavaScript','TypeScript', 'React','Node','MongoDB','Python','D3.js'], + isMarried: true +} +// iterating through object keys +for(const key in person) { + console.log(key, person[key]) +} + +``` + +#### Conditional + + We say if, if else, if else if else, switch and ternary operators in previous challenges. + + ```js + // syntax +if (condition) { + // this part of code run for truthy condition +} else { + // this part of code run for false condition +} + ``` + + ```js + // if else +let num = 3 +if (num > 0) { + console.log(`${num} is a positive number`) +} else { + console.log(`${num} is a negative number`) +} +// 3 is a positive number + ``` + + ```js + // if else if else if else + +let a = 0 +if (a > 0) { + console.log(`${a} is a positive number`) +} else if (a < 0) { + console.log(`${a} is a negative number`) +} else if (a == 0) { + console.log(`${a} is zero`) +} else { + console.log(`${a} is not a number`) +} + ``` + + ```js + // Switch More Examples +let dayUserInput = prompt('What day is today ?') +let day = dayUserInput.toLowerCase() + +switch (day) { + case 'monday': + console.log('Today is Monday') + break + case 'tuesday': + console.log('Today is Tuesday') + break + case 'wednesday': + console.log('Today is Wednesday') + break + case 'thursday': + console.log('Today is Thursday') + break + case 'friday': + console.log('Today is Friday') + break + case 'saturday': + console.log('Today is Saturday') + break + case 'sunday': + console.log('Today is Sunday') + break + default: + console.log('It is not a week day.') +} + ``` + + ```js + // ternary + + let isRaining = true +isRaining + ? console.log('You need a rain coat.') + : console.log('No need for a rain coat.') + ``` + +#### Classes + +We declare class with CamelCase which starts with capital letter. + +```js +// syntax +class ClassName { + // code goes here +} +``` + +```js +// defining class +class Person { + constructor(firstName, lastName) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName + } +} + +``` + +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. + +🌕 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. + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 19](../19_Day_Closuers/19_day_closures.md) | [Day 21 >>](../21_Day_DOM/21_day_dom.md) diff --git a/Italian/21_Day_DOM/21_day_dom.md b/Italian/21_Day_DOM/21_day_dom.md new file mode 100644 index 0000000..d9f3de9 --- /dev/null +++ b/Italian/21_Day_DOM/21_day_dom.md @@ -0,0 +1,409 @@ +
+

30 Days Of JavaScript: Document Object Model(DOM)

+ + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
+ Gennaio, 2020 + + +
+ +[<< Day 20](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Day 22 >>](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_21.png) + +- [Day 21](#day-21) + - [Document Object Model (DOM) - Day 1](#document-object-model-dom---day-1) + - [Getting Element](#getting-element) + - [Getting elements by tag name](#getting-elements-by-tag-name) + - [Getting elements by class name](#getting-elements-by-class-name) + - [Getting an element by id](#getting-an-element-by-id) + - [Getting elements by using querySelector methods](#getting-elements-by-using-queryselector-methods) + - [Adding attribute](#adding-attribute) + - [Adding attribute using setAttribute](#adding-attribute-using-setattribute) + - [Adding attribute without setAttribute](#adding-attribute-without-setattribute) + - [Adding class using classList](#adding-class-using-classlist) + - [Removing class using remove](#removing-class-using-remove) + - [Adding Text to HTML element](#adding-text-to-html-element) + - [Adding Text content using textContent](#adding-text-content-using-textcontent) + - [Adding Text Content using innerHTML](#adding-text-content-using-innerhtml) + - [Text Content](#text-content) + - [Inner HTML](#inner-html) + - [Adding style](#adding-style) + - [Adding Style Color](#adding-style-color) + - [Adding Style Background Color](#adding-style-background-color) + - [Adding Style Font Size](#adding-style-font-size) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + - [Exercise: Livello 2](#exercise-level-2) + - [Exercise: Livello 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. + +### Getting Element + +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. + +```html + + + + Document Object Model + + + +

First Title

+

Second Title

+

Third Title

+

+ + + +``` + +#### Getting elements by tag name + +**_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. + +```js +// syntax +document.getElementsByTagName('tagname') +``` + +```js +const allTitles = document.getElementsByTagName('h1') + +console.log(allTitles) //HTMLCollections +console.log(allTitles.length) // 4 + +for (let i = 0; i < allTitles.length; i++) { + console.log(allTitles[i]) // prints each elements in the HTMLCollection +} +``` + +#### Getting elements by class name + +**_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 + +```js +//syntax +document.getElementsByClassName('classname') +``` + +```js +const allTitles = document.getElementsByClassName('title') + +console.log(allTitles) //HTMLCollections +console.log(allTitles.length) // 4 + +for (let i = 0; i < allTitles.length; i++) { + console.log(allTitles[i]) // prints each elements in the HTMLCollection +} +``` + +#### Getting an element by id + +**_getElementsById()_** targets a single HTML element. We pass the id without # as an argument. + +```js +//syntax +document.getElementById('id') +``` + +```js +let firstTitle = document.getElementById('first-title') +console.log(firstTitle) //

First Title

+``` + +#### Getting elements by using querySelector methods + +The _document.querySelector_ method can select an HTML or HTML elements by tag name, by id or by class name. + +**_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. + +```js +let firstTitle = document.querySelector('h1') // select the first available h1 element +let firstTitle = document.querySelector('#first-title') // select id with first-title +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. + +```js +const allTitles = document.querySelectorAll('h1') # selects all the available h1 elements in the page + +console.log(allTitles.length) // 4 +for (let i = 0; i < allTitles.length; i++) { + console.log(allTitles[i]) +} + +allTitles.forEach(title => console.log(title)) +const allTitles = document.querySelectorAll('.title') // the same goes for selecting using class +``` + +### Adding attribute + +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. + +```js +const titles = document.querySelectorAll('h1') +titles[3].className = 'title' +titles[3].id = 'fourth-title' +``` + +#### Adding attribute using setAttribute + +The **_setAttribute()_** method set any html attribute. It takes two parameters the type of the attribute and the name of the attribute. +Let's add class and id attribute for the fourth title. + +```js +const titles = document.querySelectorAll('h1') +titles[3].setAttribute('class', 'title') +titles[3].setAttribute('id', 'fourth-title') +``` + +#### Adding attribute without 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 + +```js +//another way to setting an attribute +titles[3].className = 'title' +titles[3].id = 'fourth-title' +``` + +#### Adding class using classList + +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. + +```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 + +Similar to adding we can also remove class from an element. We can remove a specific class from an element. + +```js +//another way to setting an attribute: append the class, doesn't over ride +titles[3].classList.remove('title', 'header-title') +``` + +### Adding Text to HTML element + +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. + +#### Adding Text content using textContent + +The _textContent_ property is used to add text to an HTML element. + +```js +const titles = document.querySelectorAll('h1') +titles[3].textContent = 'Fourth Title' +``` + +#### Adding Text Content using 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. + +##### Text Content + +We assign *textContent* HTML object property to a text + +```js +const titles = document.querySelectorAll('h1') +titles[3].textContent = 'Fourth Title' +``` + +##### Inner HTML + +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. + +```html + + + + JavaScript for Everyone:DOM + + +
+

Asabeneh Yetayeh challenges in 2020

+

30DaysOfJavaScript Challenge

+
    +
    + + + +``` + +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. + +```html + + + + JavaScript for Everyone:DOM + + +
    +

    Asabeneh Yetayeh challenges in 2020

    +

    30DaysOfJavaScript Challenge

    +
      +
    • 30DaysOfPython Challenge Done
      • +
    • 30DaysOfJavaScript Challenge Ongoing
      • +
    • 30DaysOfReact Challenge Coming
      • +
    • 30DaysOfFullStack Challenge Coming
      • +
    • 30DaysOfDataAnalysis Challenge Coming
      • +
    • 30DaysOfReactNative Challenge Coming
      • +
    • 30DaysOfMachineLearning Challenge Coming
      • +
    +
    + + + +``` + +### Adding style + +#### Adding Style Color + +Let us add some style to our titles. If the element has even index we give it green color else red. + +```js +const titles = document.querySelectorAll('h1') +titles.forEach((title, i) => { + title.style.fontSize = '24px' // all titles will have 24px font size + if (i % 2 === 0) { + title.style.color = 'green' + } else { + title.style.color = 'red' + } +}) +``` + +#### Adding Style Background Color + +Let us add some style to our titles. If the element has even index we give it green color else red. + +```js +const titles = document.querySelectorAll('h1') +titles.forEach((title, i) => { + title.style.fontSize = '24px' // all titles will have 24px font size + if (i % 2 === 0) { + title.style.backgroundColor = 'green' + } else { + title.style.backgroundColor = 'red' + } +}) +``` + +#### Adding Style Font Size + +Let us add some style to our titles. If the element has even index we give it 20px else 30px + +```js +const titles = document.querySelectorAll('h1') +titles.forEach((title, i) => { + title.style.fontSize = '24px' // all titles will have 24px font size + if (i % 2 === 0) { + title.style.fontSize = '20px' + } else { + title.style.fontSize = '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. + +--- + +🌕 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. + +## Esercizi + +### Exercise: Livello 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 + +### Exercise: Livello 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 + +### Exercise: Livello 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. + + - 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 + +```html + + + + + JavaScript for Everyone:DOM + + +
    +

    Asabeneh Yetayeh challenges in 2020

    +

    30DaysOfJavaScript Challenge

    +
      +
    • 30DaysOfPython Challenge Done
      • +
    • 30DaysOfJavaScript Challenge Ongoing
      • +
    • 30DaysOfReact Challenge Coming
      • +
    • 30DaysOfFullStack Challenge Coming
      • +
    • 30DaysOfDataAnalysis Challenge Coming
      • +
    • 30DaysOfReactNative Challenge Coming
      • +
    • 30DaysOfMachineLearning Challenge Coming
      • +
    +
    + + +``` + +![Project 1](../images/projects/dom_min_project_challenge_info_day_1.1.gif) + +![Project 2](../images/projects/dom_min_project_challenge_info_day_1.1.png) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 20](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Day 22 >>](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) diff --git a/Italian/22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md b/Italian/22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md new file mode 100644 index 0000000..4abd565 --- /dev/null +++ b/Italian/22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md @@ -0,0 +1,231 @@ +
    +

    30 Days Of JavaScript: Manipulating DOM Object

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 21](../21_Day_DOM/21_day_dom.md) | [Day 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_22.png) +- [Day 22](#day-22) + - [DOM(Document Object Model)-Day 2](#domdocument-object-model-day-2) + - [Creating an Element](#creating-an-element) + - [Creating elements](#creating-elements) + - [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) + - [Esercizi](#exercises) + - [Esercizi: Livello 1](#exercises-level-1) + - [Esercizi: Livello 2](#exercises-level-2) + - [Esercizi: Livello 3](#exercises-level-3) + +# Day 22 + +## DOM(Document Object Model)-Day 2 + +### Creating an Element + +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. + +```js +// syntax +document.createElement('tagname') +``` + +```html + + + + + Document Object Model:30 Days Of JavaScript + + + + + + + + +``` + +### Creating elements + +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. + +```html + + + + + Document Object Model:30 Days Of JavaScript + + + + + + + + +``` + +### Appending child to a parent element + +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. + +```html + + + + + Document Object Model:30 Days Of JavaScript + + + + + + + +``` + +### Removing a child element from a parent node + +After creating an HTML, we may want to remove element or elements and we can use the *removeChild()* method. + +**Esempio:** + +```html + + + + + Document Object Model:30 Days Of JavaScript + + + +

    Removing child Node

    +

    Asabeneh Yetayeh challenges in 2020

    +
      +
    • 30DaysOfPython Challenge Done
      • +
    • 30DaysOfJavaScript Challenge Done
      • +
    • 30DaysOfReact Challenge Coming
      • +
    • 30DaysOfFullStack Challenge Coming
      • +
    • 30DaysOfDataAnalysis Challenge Coming
      • +
    • 30DaysOfReactNative Challenge Coming
      • +
    • 30DaysOfMachineLearning Challenge Coming
      • +
    + + + + + +``` + +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. + +```html + + + + + Document Object Model:30 Days Of JavaScript + + + +

    Removing child Node

    +

    Asabeneh Yetayeh challenges in 2020

    +
      +
    • 30DaysOfPython Challenge Done
      • +
    • 30DaysOfJavaScript Challenge Done
      • +
    • 30DaysOfReact Challenge Coming
      • +
    • 30DaysOfFullStack Challenge Coming
      • +
    • 30DaysOfDataAnalysis Challenge Coming
      • +
    • 30DaysOfReactNative Challenge Coming
      • +
    • 30DaysOfMachineLearning Challenge Coming
      • +
    + + + + + +``` + +The above snippet of code cleared all the child elements. + +--- + +🌕 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. + +## 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 + +![Number Generator](./../images/projects/dom_min_project_day_number_generators_2.1.png) + +### Esercizi: Livello 2 + +1. Use the countries array to display all the countries.See the design + +![World Countries List](./../images/projects/dom_min_project_countries_aray_day_2.2.png) + +### 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. + +![Challenge Information](./../images/projects/dom_mini_project_challenge_info_day_2.3.gif) + +![Challenge Information](./../images/projects/dom_mini_project_challenge_info_day_2.3.png) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 21](../21_Day_DOM/21_day_dom.md) | [Day 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md) \ No newline at end of file diff --git a/Italian/23_Day_Event_listeners/23_day_event_listeners.md b/Italian/23_Day_Event_listeners/23_day_event_listeners.md new file mode 100644 index 0000000..46bd05e --- /dev/null +++ b/Italian/23_Day_Event_listeners/23_day_event_listeners.md @@ -0,0 +1,332 @@ +
    +

    30 Days Of JavaScript: Event Listeners

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 22](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | [Day 24 >>](../24_Day_Project_solar_system/24_day_project_solar_system.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_23.png) + +- [Day 22](#day-22) + - [DOM(Document Object Model)-Day 3](#domdocument-object-model-day-3) + - [Event Listeners](#event-listeners) + - [Click](#click) + - [Double Click](#double-click) + - [Mouse enter](#mouse-enter) + - [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) + - [keypress, keydow and keyup](#keypress-keydow-and-keyup) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + +# Day 22 + +## DOM(Document Object Model)-Day 3 + +### 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. + +```js +selectedElement.addEventListener('eventlistner', function(e) { + // the activity you want to occur after the event will be in here +}) +// or + +selectedElement.addEventListener('eventlistner', e => { + // the activity you want to occur after the event will be in here +}) +``` + +#### 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. + +The following is an example of click type event. + +**Esempio: click** + +```html + + + + Document Object Model + + + + + + + + +``` + +An event can be also attached directly to the HTML element as inline script. + +**Esempio: onclick** + +```html + + + + Document Object Model + + + + + + + +``` + +#### 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. + +The following is an example of click type event. +**Esempio: dblclick** + +```html + + + + Document Object Model + + + + + + + +``` + +#### 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. + +The following is an example of click type event. + +**Esempio: mouseenter** + +```html + + + + Document Object Model + + + + + + + +``` + +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: + +- 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 + +Test the above event types by replacing event type in the above snippet code. + +### Getting value from an input element + +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. + +### input value + +```html + + + + Document Object Model:30 Days Of JavaScript + + + +

    Body Mass Index Calculator

    + + + + + + + + +``` + +#### input event and change + +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. + +```html + + + + Document Object Model:30 Days Of JavaScript + + + +

    Data Binding using input or change event

    + + +

    + + + + +``` + +#### blur event + +In contrast to _input_ or _change_, the _blur_ event occur when the input field is not on focus. + +```js + + + + + Document Object Model:30 Days Of JavaScript + + + +

    Giving feedback using blur event

    + + +

    + + + + + +``` + +#### 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. + +```html + + + + Document Object Model:30 Days Of JavaScript + + + +

    Key events: Press any key

    + + + + +``` + +--- + +🌕 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. + +## Esercizi + +### Exercise: Livello 1 + +1. Generating numbers and marking evens, odds and prime numbers with three different colors. See the image below. + +![Number Generator](./../images/projects/dom_min_project_number_generator_day_3.1.gif) + +1. Generating the keyboard code code using even listener. The image below. + +![Keyboard key](./../images/projects/dom_min_project_keycode_day_3.2.gif) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 22](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | [Day 24 >>](../24_Day_Project_solar_system/24_day_project_solar_system.md) diff --git a/Italian/24_Day_Project_solar_system/24_day_project_solar_system.md b/Italian/24_Day_Project_solar_system/24_day_project_solar_system.md new file mode 100644 index 0000000..d0b27be --- /dev/null +++ b/Italian/24_Day_Project_solar_system/24_day_project_solar_system.md @@ -0,0 +1,38 @@ +
    +

    30 Days Of JavaScript: Mini Project Solar System

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 23](../23_Day_Event_listeners/23_day_event_listeners.md) | [Day 25 >>](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_24.png) + +- [Day 24](#day-24) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + +# Day 24 + +## Esercizi + +### Exercise: Livello 1 + +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. + +![Solar System](./../images/projects/dom_min_project_solar_system_day_4.1.gif) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 23](../23_Day_Event_listeners/23_day_event_listeners.md) | [Day 25 >>](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) + diff --git a/Italian/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md b/Italian/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md new file mode 100644 index 0000000..2a8e6d9 --- /dev/null +++ b/Italian/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md @@ -0,0 +1,39 @@ +
    +

    30 Days Of JavaScript: World Countries Data Visualization

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 24](../24_Day_Project_solar_system/24_day_project_solar_system.md) | [Day 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_25.png) + +- [Day 25](#day-25) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + +# Day 25 + +## Esercizi + +### Exercise: Livello 1 + +1. Visualize the ten most populated countries and the ten most spoken languages in the world using DOM(HTML, CSS, JS) + +![Bar Graph](./../images/projects/dom_min_project_bar_graph_day_5.1.gif) + +![Bar Graph](./../images/projects/dom_min_project_bar_graph_day_5.1.png) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 24](../24_Day_Project_soloar_system/24_day_project_soloar_system.md) | [Day 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) diff --git a/Italian/26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md b/Italian/26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md new file mode 100644 index 0000000..575dd11 --- /dev/null +++ b/Italian/26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md @@ -0,0 +1,37 @@ +
    +

    30 Days Of JavaScript: World Countries Data Visualization 2

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 25](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) | [Day 27 >>](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_26.png) + +- [Day 26](#day-26) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + +# Day 26 + +## Esercizi + +### Exercise: Livello 1 + +1. Visualize the countries array as follows + +![Motivation](./../images/projects/dom_mini_project_countries_day_6.1.gif) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 25](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) | [Day 27 >>](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) diff --git a/Italian/27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md b/Italian/27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md new file mode 100644 index 0000000..b28c324 --- /dev/null +++ b/Italian/27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md @@ -0,0 +1,37 @@ +
    +

    30 Days Of JavaScript: Portfolio

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 26](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) | [Day 28 >>](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_27.png) + +- [Day 27](#day-27) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + +# Day 27 + +## Esercizi + +### Exercise: Livello 1 + +1. Create the following using HTML, CSS, and JavaScript + +![Slider](./../images/projects/dom_mini_project_slider_day_7.1.gif) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 26](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) | [Day 28 >>](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) \ No newline at end of file diff --git a/Italian/28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md b/Italian/28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md new file mode 100644 index 0000000..54f3667 --- /dev/null +++ b/Italian/28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md @@ -0,0 +1,37 @@ +
    +

    30 Days Of JavaScript

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 27](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) | [Day 29>>](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_28.png) + +- [Day 28](#day-28) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + +# Day 28 + +## Esercizi + +### Exercise: Livello 1 + +1. Create the following using HTML, CSS, and JavaScript + +![Slider](./../images/projects/dom_mini_project_leaderboard_day_8.1.gif) + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 27](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) | [Day 29>>](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) \ No newline at end of file diff --git a/Italian/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md b/Italian/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md new file mode 100644 index 0000000..c1e555f --- /dev/null +++ b/Italian/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md @@ -0,0 +1,44 @@ +
    +

    30 Days Of JavaScript: Animating Characters

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     + +
    + +[<< Day 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_29.png) + +- [Day 29](#day-29) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + - [Exercise: Livello 2](#exercise-level-2) + - [Exercise: Livello 3](#exercise-level-3) + +# Day 29 + +## Esercizi + +### Exercise: Livello 1 + +1. Create the following animation using (HTML, CSS, JS) + +![Slider](./../images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif) + + +### Exercise: Livello 2 + +### Exercise: Livello 3 + +🎉 CONGRATULAZIONI ! 🎉 + +[<< Day 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md) \ No newline at end of file diff --git a/Italian/30_Day_Mini_project_final/30_day_mini_project_final.md b/Italian/30_Day_Mini_project_final/30_day_mini_project_final.md new file mode 100644 index 0000000..2c3632f --- /dev/null +++ b/Italian/30_Day_Mini_project_final/30_day_mini_project_final.md @@ -0,0 +1,72 @@ +
    +

    30 Days Of JavaScript: Final Projects

    + + + + + Twitter Follow + + +Autore: +Asabeneh Yetayeh
    + Gennaio, 2020 +     +
    + + +
    + +
    + +
    +Support the author to create more educational materials
    +Paypal Logo +
    + +[<< Day 29](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) + +![Thirty Days Of JavaScript](../../images/banners/day_1_30.png) + +- [Day 30](#day-30) + - [Esercizi](#exercises) + - [Exercise: Livello 1](#exercise-level-1) + - [Exercise: Livello 2](#exercise-level-2) + - [Exercise: Livello 3](#exercise-level-3) + - [Testimony](#testimony) + - [Support](#support) + +# Day 30 + +## Esercizi + +### Exercise: Livello 1 + +1. Create the following animation using (HTML, CSS, JS) + +![Countries data](./../images/projects/dom_mini_project_countries_object_day_10.1.gif) + +2. Validate the following form using regex. + + ![form validation](./../images/projects/dom_mini_project_form_validation_day_10.2.1.png) + + ![form validation](./../images/projects/dom_mini_project_form_validation_day_10.2.png) + +### Exercise: Livello 2 + +### Exercise: Livello 3 + +🌕 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. + +## 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/) + +## Support + +You can support the author to produce more educational materials + +[![paypal](../images/paypal_lg.png)](https://www.paypal.me/asabeneh) + +![Congratulations](./../images/projects/congratulations.gif) + +[<< Day 29](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) diff --git a/Italian/readMe.md b/Italian/readMe.md new file mode 100644 index 0000000..a41a2a9 --- /dev/null +++ b/Italian/readMe.md @@ -0,0 +1,846 @@ + +# 30 Days Of JavaScript + +| # Giorni | Topics | + +| ----- | :-------------------------------------------------------------------------------------------------------------------------------------------------: | + +| 01 | [Introduzione](./readMe.md) | + +| 02 | [Tipi di dato (Data Types)](./02_Day_Data_types/02_day_data_types.md) | + +| 03 | [Booleans,Operatori, Date](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) | + +| 04 | [Istruzioni Condizionali (Conditionals)](./04_Day_Conditionals/04_day_conditionals.md) | + +| 05 | [Arrays](./05_Day_Arrays/05_day_arrays.md) | + +| 06 | [Loops](./06_Day_Loops/06_day_loops.md) | + +| 07 | [Funzioni](./07_Day_Functions/07_day_functions.md) | + +| 08 | [Oggetti (Objects)](./08_Day_Objects/08_day_objects.md) | + +| 09 | [Funzioni di ordine superiore (Higher Order Functions)](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) | + +| 10 | [Sets e Maps](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) | + +| 11 | [Destrutturazione ed Operatore di Espansione (Destructuring and Spreading)](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) | + +| 12 | [Espressioni Regolari (Regular Expressions)](./12_Day_Regular_expressions/12_day_regular_expressions.md) | + +| 13 | [Metodi dell'Oggetto *Console* (Console Object Methods)](./13_Day_Console_object_methods/13_day_console_object_methods.md) | + +| 14 | [Gestione Errori (Error Handling)](./14_Day_Error_handling/14_day_error_handling.md) | + +| 15 | [Classes](./15_Day_Classes/15_day_classes.md) | + +| 16 | [JSON](./16_Day_JSON/16_day_json.md) | + +| 17 | [Web Storages](./17_Day_Web_storages/17_day_web_storages.md) | + +| 18 | [Promises](./18_Day_Promises/18_day_promises.md) | + +| 19 | [Closure](./19_Day_Closures/19_day_closures.md) | + +| 20 | [Scrivere codice pulito (Writing Clean Code)](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | + +| 21 | [DOM](./21_Day_DOM/21_day_dom.md) | + +| 22 | [Manipolare l'Oggetto DOM (Manipulating DOM Object)](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | + +| 23 | [Event Listeners](./23_Day_Event_listeners/23_day_event_listeners.md) | + +| 24 | [Mini Progetto: Sistema Solare (Mini Project: Solar System)](./24_Day_Project_solar_system/24_day_project_solar_system.md) | + +| 25 | [Mini Progetto: Visualizzazione Dati Paesi Nel Mondo (Mini Project: World Countries Data Visualization 1)](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) | + +| 26 | [Mini Progetto: Visualizzazione Dati Paesi Nel Mondo (Mini Project: World Countries Data Visualization 2)](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) | + +| 27 | [Mini Progetto: Portfolio (Mini Project: Portfolio)](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) | + +| 28 | [Mini Progetto: Leaderboard (Mini Project: Leaderboard)](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | + +| 29 | [Mini Progetto: Animare le Lettere (Mini Project: Animating characters)](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) | + +| 30 | [Progetti Finali (Final Projects)](./30_Day_Mini_project_final/30_day_mini_project_final.md) | + +🧡🧡🧡 BUON CODING 🧡🧡🧡 + +
    + +Supporta l' autore nel creare altri materiali educativi
    + +Paypal Logo + +
    + +
    + +

    30 Days Of JavaScript: Introduzione

    + + + + + + + + + +Twitter Follow + + + +Autore: + +Asabeneh Yetayeh
    + + Gennaio, 2020 + +     + +
    + +🇬🇧 [English](./readMe.md) + +🇮🇹 [Italian](./Italian/readMe.md) + +🇪🇸 [Spanish](./Spanish/readme.md) + +🇷🇺 [Russian](./RU/README.md) + +🇹🇷 [Turkish](./Turkish/readMe.md) + +🇦🇿 [Azerbaijan](./Azerbaijani/readMe.md) + +🇰🇷 [Korean](./Korea/README.md) + +🇻🇳 [Vietnamese](./Vietnamese/README.md) + +🇵🇱 [Polish](./Polish/readMe.md) + +
    + +
    + + + +[Giorno 2 >>](./02_Day_Data_types/02_day_data_types.md) + +![Thirty Days Of JavaScript](../images/day_1_1.png) + +- [30 Days Of JavaScript](#30-days-of-javascript) + +- [📔 Giorno 1](#-day-1) + +- [Introduzione](#introduction) + +- [Requisiti](#requirements) + +- [Setup](#setup) + +- [Installazione Node.js](#install-nodejs) + +- [Browser](#browser) + +- [Installazione di Google Chrome](#installing-google-chrome) + +- [Apertura Console di Google Chrome](#opening-google-chrome-console) + +- [Scrivere codice sulla Console del Browser](#writing-code-on-browser-console) + +- [Console.log](#consolelog) + +- [Console.log con Argomenti Multipli](#consolelog-with-multiple-arguments) + +- [commenti](#comments) + +- [Sintassi](#syntax) + +- [Aritmetica](#arithmetics) + +- [Editor Codice](#code-editor) + +- [Installazione Visual Studio Code](#installing-visual-studio-code) + +- [Come usare Visual Studio Code](#how-to-use-visual-studio-code) + +- [Aggiungere JavaScript ad una Pagina Web](#adding-javascript-to-a-web-page) + +- [Inline Script](#inline-script) + +- [Internal Script](#internal-script) + +- [External Script](#external-script) + +- [Multipli External Scripts](#multiple-external-scripts) + +- [Introduzione ai Tipi di Dato](#introduction-to-data-types) + +- [Numbers](#numbers) + +- [Strings](#strings) + +- [Booleans](#booleans) + +- [Undefined](#undefined) + +- [Null](#null) + +- [Verificare il Tipo dei Dati](#checking-data-types) + +- [Ancora Commenti](#comments-again) + +- [Variabili](#variables) + +- [💻 Giorno 1: Esercizi](#-day-1-exercises) + +# 📔 Giorno 1 + +## Introduzione + +**Congratulazioni** per aver deciso di partecipare a 30 days of JavaScript programming challenge. In questa challenge imparerai tutto quello di cui hai bisogno per essere un programmatore JavaScript, ed in generale, il concetto di programmazione. Al termine della challenge otterrai un certificato di completamento della 30DaysOfJavaScript programming challenge. In caso avessi bisogno di aiuto o vorrei aiutare altri puoi unirti al [gruppo_telegram](https://t.me/ThirtyDaysOfJavaScript). + +**Un 30DaysOfJavaScript** è una challenge sviluppatori JavaScript esperti o alle prime armi. Benvenuto in JavaScript. JavaScript è un linguaggio per il web. Mi piace insegnarlo ed usarlo, spero che lo faccia presto anche tu. + +In questa challenge step by step di JavaScript, imparerai JavaScript, il linguaggio di programmazione più popolare nella storia dell'umanità. + +JavaScript è usato **_per aggiungere interazione ai websites, per sviluppare mobile apps, applicazioni desktop, videogiochi_** ed attualmente JavaScript può essere usato anche in ambito **_machine learning_** e **_AI_**. **_JavaScript (JS)_** è diventato popolare nei ultimi anni ed è il linguaggio più utilizzato su GitHub da sei anni. + + + +## Requisiti + +Nessuna conoscenza pregressa è richiesta per seguire questa challenge. Hai solo bisogno di: + +1. Motivazione + +2. Un computer + +3. Internet + +4. Un browser + +5. Un editor code + +## Setup + +Ritengo tu abbia la motivazione ed il forte desiderio per diventare uno sviluppatore. Se è così, allora hai tutto quello che ti server per iniziare. + +### Installazione Node.js + +Potresti non aver bisogno di Node.js adesso ma ne avrai probabilmente bisogno dopo. Installa [node.js](https://nodejs.org/en/). + +![Node download](../images/download_node.png) + +Dopo aver scaricato il file aprilo ed installa node + +![Installazione node](../images/install_node.png) + +Possiamo controllare l'installazione di node sulla macchina locale aprendo il terminale. + +```sh +asabeneh $ node -v + +v12.14.0 +``` + +Nella realizzazione di questo tutorial sto usando Node 12.14.0, potresti avere una versione differente disponibile da installare. + +### Browser + +Ci sono diversi browser disponibili. Io raccomando l'uso di Google Chrome. + +#### Installazione di Google Chrome + +Installa [Google Chrome](https://www.google.com/chrome/). Possiamo scrivere del codice semplice sulla console del browser ma non la utilzzeremo per scrivere codice. + +![Google Chrome](../images/google_chrome.png) + +#### Apertura della Console di Google Chrome + +Puoi aprire la console di Google Chrome console sia cliccando sui tre puntini nell'angolo in alto a destra del browser, selezionando _Più strumenti -> Strumenti per sviluppatori_ o usando una scorciatoia da tastiera. Preferisco usare le scorciatoie. + +![Opening chrome](../images/opening_developer_tool.png) + +Per aprire la console di Chrome utilizzando una scorciatoia da tastiera + +```sh +Mac + +Command+Option+J + + +Windows/Linux: + +Ctl+Shift+J +``` + +![Opening console](../images/opening_chrome_console_shortcut.png) + +Dopo aver aperto la console di Google Chrome, provate a esplorare i pulsanti contrassegnati. Dedicheremo la maggior parte del tempo alla Console. La Console è il luogo in cui si trova il codice JavaScript. L'engine Google Console V8 trasforma il codice JavaScript in codice macchina. + +Scriviamo un codice JavaScript nella console di Google Chrome: + +![write code on console](../images/js_code_on_chrome_console.png) + +#### Scrivendo codice sulla Console del Browser + +Possiamo scrivere qualsiasi codice JavaScript sulla console di Google o su quella di qualsiasi browser. Tuttavia, per questa sfida, ci concentreremo solo sulla console di Google Chrome. Apri la console utilizzando: + +```sh +Mac + +Command+Option+I + + +Windows: + +Ctl+Shift+I +``` + +##### Console.log + + +Per scrivere il nostro primo codice JavaScript, abbiamo utilizzato la funzione integrata **console.log()**. Abbiamo passato un argomento come dato di input e la funzione visualizza l'output. Abbiamo passato `'Hello, World'` come dato di input o argomento nella funzione console.log(). +```js +console.log('Hello, World!') +``` + +##### Console.log con Argomenti Multipli + +La funzione **`console.log()`** può prendere più parametri separandoli con la virgola. La sintassi è come segue:**`console.log(param1, param2, param3)`** + +![console log multiple arguments](../images/console_log_multipl_arguments.png) + +```js +console.log('Hello', 'World', '!') +console.log('HAPPY', 'NEW', 'YEAR', 2020) +console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript') +``` + +Come si può vedere dal codice snippet qui sopra, _`console.log()`_ accetta argomenti multipli. + +Congratulazioni! Avete scritto il vostro primo codice JavaScript usando _`console.log()`_. + + +##### Commenti + + +Possiamo aggiungere commenti al nostro codice. I commenti sono molto importanti per rendere il codice più leggibile e per annorare osservazioni nel nostro codice. JavaScript non esegue la parte di commento del nostro codice. In JavaScript, qualsiasi riga di testo che inizia con // in JavaScript è un commento, e qualsiasi cosa racchiusa come questa `//` è anch'essa un commento. + +**Esempio: Commento su Linea Singola** +```js +// This is the first comment +// This is the second comment +// I am a single line comment +``` + +**Esempio: Commento Multilinea** +```js +/* +This is a multiline comment +Multiline comments can take multiple lines +JavaScript is the language of the web +*/ +``` + +##### Sintassi + +I linguaggi di programmazione sono simili alle lingue umane. L'inglese o molte altre lingue utilizzano parole, frasi, frasi composte e altro ancora per trasmettere un messaggio significativo. Il significato inglese di sintassi è _la disposizione di parole e frasi per creare frasi ben formate in una lingua_. La definizione tecnica di sintassi è la struttura degli enunciati in un linguaggio informatico. I linguaggi di programmazione hanno una sintassi. JavaScript è un linguaggio di programmazione e, come altri linguaggi di programmazione, ha una propria sintassi. Se non scriviamo una sintassi comprensibile in JavaScript, questo darà luogo a diversi tipi di errori. Esploreremo i diversi tipi di errori di JavaScript più avanti. Per ora, vediamo gli errori di sintassi. + + +![Error](../images/raising_syntax_error.png) + +Ho commesso un errore intenzionale. Di conseguenza, la console visualizza gli errori di sintassi. In realtà, la sintassi è molto informativa sul tipo di errore commesso. Leggendo la linea guida di feedback dell'errore, possiamo correggere la sintassi e risolvere il problema. Il processo di identificazione e rimozione degli errori da un programma si chiama debug. Risolviamo gli errori: + +```js +console.log('Hello, World!') +console.log('Hello, World!') +``` + +Finora abbiamo visto come visualizzare il testo utilizzando _`console.log()`_. Se si stampa un testo o una stringa utilizzando _`console.log()`_, il testo deve trovarsi all'interno di apici singoli, doppi apici o un backtick. + +**Esempio:** + +```js +console.log('Hello, World!') +console.log("Hello, World!") +console.log(`Hello, World!`) +``` + +#### Aritmetica + + +Ora facciamo pratica scrivendo codici JavaScript usando _`console.log()`_ sulla console di Google Chrome per i tipi di dati numerici. Oltre al testo, possiamo anche eseguire calcoli matematici utilizzando JavaScript. È possibile scrivere codice JavaScript sulla console di Google Chrome direttamente senza la funzione **`console.log()`_**. Tuttavia, è stata inclusa in questa introduzione perché la maggior parte di questa sfida si svolgerà in un editor di testo, dove l'uso della funzione sarà obbligatorio. È possibile giocare direttamente con le istruzioni della console. + +![Arithmetic](../images/arithmetic.png) + +```js +console.log(2 + 3) // Addition +console.log(3 - 2) // Subtraction +console.log(2 * 3) // Multiplication +console.log(3 / 2) // Division +console.log(3 % 2) // Modulus - finding remainder +console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3 +``` + +### Editor Codice + +Possiamo scrivere i nostri codici sulla console del browser, ma solo per codice breve. In un ambiente di lavoro reale, gli sviluppatori utilizzano diversi editor di codice per scrivere i loro codici. In questa sfida di 30 giorni di JavaScript, utilizzeremo Visual Studio Code. + +#### Installazione Visual Studio Code + +Visual Studio Code è un editor di testo open-source molto popolare. Raccomanderei di [scaricare Visual Studio Code](https://code.visualstudio.com/), ma se siete favorevoli ad altri editor, sentitevi liberi di seguire con quello che avete. + +![Vscode](../images/vscode.png) + +Se avete installato Visual Studio Code, iniziate a usarlo. + +#### Come Usare Visual Studio Code + +Aprire Visual Studio Code facendo doppio clic sulla sua icona. Quando si apre, si ottiene questo tipo di interfaccia. Provate a interagire con le icone etichettate. + +![Vscode ui](../images/vscode_ui.png) + +![Vscode add project](../images/adding_project_to_vscode.png) + +![Vscode open project](../images/opening_project_on_vscode.png) + +![script file](../images/scripts_on_vscode.png) + +![Installazione Live Server](../images/vsc_live_server.png) + +![running script](../images/running_script.png) + +![coding running](../images/launched_on_new_tab.png) + +## Aggiungere JavaScript ad una Pagina Web + +JavaScript può essere aggiunto a una pagina web in tre modi diversi: + +- **_Inline script_** + +- **_Internal script_** + +- **_External script_** + +- **_Multiple External scripts_** + +Le sezioni seguenti mostrano diversi modi per aggiungere codice JavaScript alla pagina Web. +### Inline Script + +Crea una cartella di progetto sul desktop o in una posizione qualsiasi, denominala 30DaysOfJS e crea un file **_`index.html`_** nella cartella di progetto. Incolla quindi il seguente codice e aprilo in un browser, ad esempio [Chrome].(https://www.google.com/chrome/). + +```html + + + + 30DaysOfScript:Inline Script + + + + + +``` + +Ora, hai appena scritto il tuo primo script inline. Possiamo creare un messaggio di avviso a comparsa usando la funzione incorporata _`alert()`_. + +### Internal Script + +Gli internal script possono essere inseriti nel _`head`_ o nel _`body`_, ma è preferibile inserirli nel body del documento HTML. + +Per prima cosa, scriviamo nella parte iniziale della pagina. + +```html + + + + 30DaysOfScript:Internal Script + + + + +``` + +Nella maggior parte dei casi è così che si scrive uno script interno. Scrivere il codice JavaScript nella sezione del corpo è l'opzione preferita. Aprire la console del browser per vedere l'output di `console.log()`. + +```html + + + + 30DaysOfScript:Internal Script + + + + + + +``` + +Aprire la console del browser per vedere l'output di `console.log()`. + +![js code from vscode](../images/js_code_vscode.png) + +### External Script + +Come per Internal Script , il link all'External Script può essere presente nell'intestazione o nel corpo, ma è preferibile inserirlo nel corpo. +Per prima cosa, occorre creare un file JavaScript esterno con estensione .js. Tutti i file che terminano con l'estensione .js sono file JavaScript. Creare un file chiamato introduction.js all'interno della cartella del progetto e scrivere il seguente codice e collegare questo file .js in fondo al body. +```js +console.log('Welcome to 30DaysOfJavaScript') +``` + +External scripts nel _head_: + +```html + + + + 30DaysOfJavaScript:External script + + + + +``` + +External scripts nel _body_: + +```html + + + + 30DaysOfJavaScript:External script + + + + + + + + + + + +``` + +Aprite la console del browser per vedere l'output del metodo `console.log()`. + + +### Multipli External Scripts + +Possiamo anche collegare più file JavaScript esterni a una pagina web. +Creare un file `helloworld.js` all'interno della cartella 30DaysOfJS e scrivere il seguente codice. + +```js +console.log('Hello, World!') +``` + +```html + + + + Multiple External Scripts + + + + + + +``` + +_Il file main.js deve trovarsi sotto tutti gli altri script_. È molto importante ricordarlo. + +![Multiple Script](../images/multiple_script.png) + + +## Introduzione ai Tipi di Dato + + +In JavaScript e in altri linguaggi di programmazione esistono diversi tipi di dati. I seguenti sono tipi di dati primitivi di JavaScript: _String, Number, Boolean, undefined, Null_, e _Symbol_. + + +### Numbers +- Integers: Numeri interi (negativi, zero e positivi) + +Esempio: + +... -3, -2, -1, 0, 1, 2, 3 ... + +- Float-point: Numeri decimali + +Esempio + +... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ... + +### Strings + +Un insieme di uno o più caratteri compresi tra due apici singoli, doppi apici o backtick. + +**Esempio:** + +```js +'a' +'Asabeneh' +"Asabeneh" +'Finland' +'JavaScript is a beautiful programming language' +'I love teaching' +'I hope you are enjoying the first day' +`We can also create a string using a backtick` +'A string could be just as small as one character or as big as many pages' +'Any data type under a single quote, double quote or backtick is a string' +``` + +### Booleans + +Un valore booleano è vero o falso. Qualsiasi confronto restituisce un valore booleano che può essere vero o falso. + +Un tipo di dati booleano è un valore vero o falso. + +**Esempio:** + +```js +true // if the light is on, the value is true + +false // if the light is off, the value is false +``` + +### Undefined + + +In JavaScript, se non si assegna un valore a una variabile, il valore è undefined. Inoltre, se una funzione non restituisce nulla, restituisce undefined. + +```js +let firstName +console.log(firstName) // undefined, because it is not assigned to a value yet +``` + +### Null + +Null in JavaScript significa valore vuoto. + +```js +let emptyValue = null +``` + +## Verificando i Tipi di dato + +Per verificare il tipo di dati di una determinata variabile, si utilizza l'operatore **typeof**. Si veda l'esempio seguente. + +```js +console.log(typeof 'Asabeneh') // string + +console.log(typeof 5) // number + +console.log(typeof true) // boolean + +console.log(typeof null) // object type + +console.log(typeof undefined) // undefined + +``` + +## Ancora Commenti + + +Ricordate che i commenti in JavaScript sono simili a quelli di altri linguaggi di programmazione. I commenti sono importanti per rendere il codice più leggibile. + +Esistono due modi per commentare: + +- _Single line commenting_ + +- _Multiline commenting_ + +```js +// commenting the code itself with a single comment + +// let firstName = 'Asabeneh'; single line comment + +// let lastName = 'Yetayeh'; single line comment +``` + +Commento Multilinea: + +```js +/* + +let location = 'Helsinki'; + +let age = 100; + +let isMarried = true; + +This is a Multiple line comment + +*/ +``` + +## Variables + + +Le variabili sono _contenitori_ di dati. Le variabili vengono utilizzate per _immagazzinare_ i dati in una posizione di memoria. Quando una variabile viene dichiarata, viene riservata una posizione di memoria. Quando ad una variabile viene assegnato un valore (dati), lo spazio di memoria verrà riempito con quei dati. Per dichiarare una variabile, si usano le parole chiave _var_, _let_ o _const_. + +Per una variabile che cambia in un momento diverso, si usa _let_. Se i dati non cambiano affatto, si usa _const_. Ad esempio, PI, nome del paese, gravità non cambiano e possiamo usare _const_. In questa sfida non useremo var e non ti consiglio di usarlo. È un modo di dichiarare le variabili soggetto a errori e ha molte perdite. Parleremo più dettagliatamente di var, let e const in altre sezioni (ambito). Per ora, la spiegazione di cui sopra è sufficiente. + +Un nome di variabile JavaScript valido deve seguire le seguenti regole: + +- Il nome di una variabile JavaScript non deve iniziare con un numero. + +- Il nome di una variabile JavaScript non ammette caratteri speciali, tranne il segno del dollaro e il trattino basso. + +- Il nome di una variabile JavaScript segue la convenzione camelCase. + +- Il nome di una variabile JavaScript non deve avere spazi tra le parole. + +I seguenti sono esempi di variabili JavaScript valide. + +```js +firstName + +lastName + +country + +city + +capitalCity + +age + +isMarried + +first_name + +last_name + +is_married + +capital_city + +num1 + +num_1 + +_num_1 + +$num1 + +year2020 + +year_2020 + +``` + +La prima e la seconda variabile dell'elenco seguono la convenzione camelCase della dichiarazione in JavaScript. In questa challenge, utilizzeremo le variabili camelCase (camelWithOneHump). Utilizzeremo CamelCase (CamelWithTwoHump) per dichiarare le classi; parleremo di classi e oggetti in un'altra sezione. + +Esempio di variabili non valide: + +```js +first-name + +1_num + +num_#_1 + +``` + +Dichiariamo variabili con tipi di dati diversi. Per dichiarare una variabile, dobbiamo usare la parola chiave _let_ o _const_ prima del nome della variabile. Dopo il nome della variabile, scriviamo un segno di uguale (operatore di assegnazione) e un valore (dati assegnati). + +```js +// Syntax +let nameOfVariable = value +``` + +Il nameOfVariable è il nome che memorizza i diversi dati del valore. Vedi degli esempi dettagliati. + +**Esempi di variabili dichiarate** + +```js +// Declaring different variables of different data types + +let firstName = 'Asabeneh' // first name of a person + +let lastName = 'Yetayeh' // last name of a person + +let country = 'Finland' // country + +let city = 'Helsinki' // capital city + +let age = 100 // age in years + +let isMarried = true + +console.log(firstName, lastName, country, city, age, isMarried) + +``` + +```sh +Asabeneh Yetayeh Finland Helsinki 100 true + +``` + +```js +// Declaring variables with number values + +let age = 100 // age in years + +const gravity = 9.81 // earth gravity in m/s2 + +const boilingPoint = 100 // water boiling point, temperature in °C + +const PI = 3.14 // geometrical constant + +console.log(gravity, boilingPoint, PI) + +``` + +```sh +9.81 100 3.14 + +``` + +```js +// Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble + +let name = 'Asabeneh', job = 'teacher', live = 'Finland' + +console.log(name, job, live) + +``` + +```sh +Asabeneh teacher Finland +``` +I file del codice sono disposti nelle cartelle x-Day nella directory principale della repository. +Quando si esegue il file _index.html_ nella cartella 01-Day si dovrebbe ottenere questo risultato: + +![Giorno one](../images/day_1.png) + +🌕 fantastico! hai appena completato la sfida del primo giorno e sei sulla strada della grandezza. Ora fai qualche esercizio per il cervello e i muscoli. + +# 💻 Giorno 1: Esercizi + + +1. Scrivete un commento di una sola riga che dice: "I commenti possono rendere il codice leggibile". +2. Scrivete un altro commento di una sola riga che dica: _Benvenuti a 30DaysOfJavaScript_. +3. Scrivete un commento di più righe che dica: "I commenti possono rendere il codice leggibile, facile da riutilizzare ed informativo". +4. Creare un file variable.js, dichiarare le variabili e assegnare i tipi di dati string, boolean, undefined e null. +5. Creare il file datatypes.js e utilizzare l'operatore JavaScript **_typeof_** per verificare i diversi tipi di dati. Controllare il tipo di dati di ogni variabile +6. Dichiarare quattro variabili senza assegnare valori +7. Dichiarare quattro variabili con valori assegnati +8. Dichiarare le variabili per memorizzare il proprio nome, cognome, stato civile, paese ed età in più righe. +9. Dichiarare le variabili per memorizzare il nome, il cognome, lo stato civile, il Paese e l'età in un'unica riga. +10. Dichiarare due variabili _myAge_ e _yourAge_, assegnare loro i valori iniziali e registrarli nella console del browser. + +```sh +I am 25 years old. +You are 30 years old. +``` + +🎉 CONGRATULAZIONI ! 🎉 + +[Giorno 2 >>](./02_Day_Data_types/02_day_data_types.md)