You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
814 lines
26 KiB
814 lines
26 KiB
|
|
# 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 🧡🧡🧡
|
|
|
|
<div>
|
|
|
|
<small>Supporta l' <strong>autore</strong> nel creare altri materiali educativi</small> <br />
|
|
|
|
<a href = "https://www.paypal.me/asabeneh"><img src='../images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
|
|
|
|
</div>
|
|
|
|
<div align="center">
|
|
|
|
<h1> 30 Days Of JavaScript: Introduzione</h1>
|
|
|
|
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
|
|
|
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
|
|
|
</a>
|
|
|
|
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
|
|
|
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
|
|
|
</a>
|
|
|
|
<sub>Autore:
|
|
|
|
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
|
|
|
<small> Gennaio, 2020</small>
|
|
|
|
</sub>
|
|
|
|
<div>
|
|
|
|
🇬🇧 [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)
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
[Giorno 2 >>](./02_Day_Data_types/02_day_data_types.md)
|
|
|
|
|
|
|
|
- [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/).
|
|
|
|
|
|
|
|
Dopo aver scaricato il file aprilo ed installa node
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
#### 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.
|
|
|
|
|
|
|
|
Per aprire la console di Chrome utilizzando una scorciatoia da tastiera
|
|
|
|
```sh
|
|
Mac
|
|
|
|
Command+Option+J
|
|
|
|
|
|
Windows/Linux:
|
|
|
|
Ctl+Shift+J
|
|
```
|
|
|
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
#### 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)`**
|
|
|
|
|
|
|
|
```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.
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
```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.
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 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
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfScript:Inline Script</title>
|
|
</head>
|
|
<body>
|
|
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
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
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfScript:Internal Script</title>
|
|
<script>
|
|
console.log('Welcome to 30DaysOfJavaScript')
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
```
|
|
|
|
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
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfScript:Internal Script</title>
|
|
</head>
|
|
<body>
|
|
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
|
|
<script>
|
|
console.log('Welcome to 30DaysOfJavaScript')
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Aprire la console del browser per vedere l'output di `console.log()`.
|
|
|
|
|
|
|
|
### 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
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfJavaScript:External script</title>
|
|
<script src="introduction.js"></script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
```
|
|
|
|
External scripts nel _body_:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfJavaScript:External script</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- JavaScript external link could be in the header or in the body -->
|
|
|
|
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
|
|
|
|
<script src="introduction.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
```
|
|
|
|
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
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Multiple External Scripts</title>
|
|
</head>
|
|
<body>
|
|
<script src="./helloworld.js"></script>
|
|
<script src="./introduction.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
_Il file main.js deve trovarsi sotto tutti gli altri script_. È molto importante ricordarlo.
|
|
|
|
|
|
|
|
|
|
## 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:
|
|
|
|
|
|
|
|
🌕 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)
|