M0lt0
2 years ago
parent
55d8e3dbc0
commit
a53c6ec3e2
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
console.log('Salam, dünya!')
|
||||
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30 Günlük JavaScript dərsləri</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30 Günlük JavaScript:01 Gün</h1>
|
||||
<h2>Giriş</h2>
|
||||
<button onclick="alert('30 Günlük JavaScript dərslərinə xoş gəlmişsiniz');">Kliklə</button>
|
||||
<script src="helloworld.js"></script>
|
||||
<script src="introduction.js"></script>
|
||||
<script src="variables.js"></script>
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1 +0,0 @@
|
||||
console.log('30 Günlük JS dərsləri')
|
||||
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 338 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 509 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 207 KiB |
|
Before Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 121 KiB |
|
Before Width: | Height: | Size: 211 KiB |
|
Before Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 536 KiB |
|
Before Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 866 KiB |
|
Before Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 315 KiB |
|
Before Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 3.0 MiB |
|
Before Width: | Height: | Size: 15 MiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 373 KiB |
|
Before Width: | Height: | Size: 22 MiB |
|
Before Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 327 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 526 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 335 KiB |
|
Before Width: | Height: | Size: 233 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 284 KiB |
|
Before Width: | Height: | Size: 242 KiB |
|
Before Width: | Height: | Size: 183 KiB |
@ -1,683 +0,0 @@
|
||||
# 30 jours de JavaScript
|
||||
|
||||
| # Jours | Tables des matières |
|
||||
| ----- | :-------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||
| 01 | [Introduction](./readMe.md) |
|
||||
| 02 | [Les types de données](./02_Day_Data_types/02_day_data_types.md) |
|
||||
| 03 | [Booléens, Opérateurs, Date](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) |
|
||||
| 04 | [Les conditions](./04_Day_Conditionals/04_day_conditionals.md) |
|
||||
| 05 | [Les tableaux (Arrays)](./05_Day_Arrays/05_day_arrays.md) |
|
||||
| 06 | [Les boucles](./06_Day_Loops/06_day_loops.md) |
|
||||
| 07 | [Les fonctions](./07_Day_Functions/07_day_functions.md) |
|
||||
| 08 | [Les objets](./08_Day_Objects/08_day_objects.md) |
|
||||
| 09 | [Les fonctions d'ordre supérieur](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) |
|
||||
| 10 | [Set et Map](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) |
|
||||
| 11 | [La déstructuration et propagation](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) |
|
||||
| 12 | [Les expressions régulières](./12_Day_Regular_expressions/12_day_regular_expressions.md) |
|
||||
| 13 | [Les méthodes de objet console. ](./13_Day_Console_object_methods/13_day_console_object_methods.md) |
|
||||
| 14 | [Gestion des erreurs](./14_Day_Error_handling/14_day_error_handling.md) |
|
||||
| 15 | [Les classes](./15_Day_Classes/15_day_classes.md) |
|
||||
| 16 | [JSON](./16_Day_JSON/16_day_json.md) |
|
||||
| 17 | [Stockages Web](./17_Day_Web_storages/17_day_web_storages.md) |
|
||||
| 18 | [Les promesses](./18_Day_Promises/18_day_promises.md) |
|
||||
| 19 | [Fermeture (Closure)](./19_Day_Closures/19_day_closures.md) |
|
||||
| 20 | [Écrire un code propre](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) |
|
||||
| 21 | [DOM](./21_Day_DOM/21_day_dom.md) |
|
||||
| 22 | [Manipulation de l'objet DOM](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) |
|
||||
| 23 | [Écouteurs d'événements](./23_Day_Event_listeners/23_day_event_listeners.md) |
|
||||
| 24 | [Mini projet : Système solaire](./24_Day_Project_solar_system/24_day_project_solar_system.md) |
|
||||
| 25 | [Mini projet : Visualisation des données sur les pays du monde 1](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) |
|
||||
| 26 | [Mini projet : Visualisation des données sur les pays du monde 2](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) |
|
||||
| 27 | [Mini Projet: Portfolio](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) |
|
||||
| 28 | [Mini Projet: Tableau de bord](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) |
|
||||
| 29 | [Mini Projet: Animation des caractère ](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) |
|
||||
| 30 | [Les projets finals](./30_Day_Mini_project_final/30_day_mini_project_final.md) |
|
||||
|
||||
🧡🧡🧡 BON CODAGE 🧡🧡🧡
|
||||
|
||||
<div>
|
||||
<small>Soutenir <strong>l'auteur </strong> pour qu'il crée davantage de supports pédagogiques</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 jours de JavaScript: Introduction</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>Auteur:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Janvier, 2020</small>
|
||||
</sub>
|
||||
|
||||
<div>
|
||||
|
||||
🇬🇧 [English](./readMe.md)
|
||||
🇫🇷 [French](./French/readMe.md)
|
||||
🇪🇸 [Spanish](./Spanish/readme.md)
|
||||
🇮🇹 [Italian](./Italian/readMe.md)Setup
|
||||
🇷🇺 [Russian](./RU/README.md)
|
||||
🇹🇷 [Turkish](./Turkish/readMe.md)
|
||||
🇦🇿 [Azerbaijan](./Azerbaijani/readMe.md)
|
||||
🇰🇷 [Korean](./Korea/README.md)
|
||||
🇻🇳 [Vietnamese](./Vietnamese/README.md)
|
||||
🇵🇱 [Polish](./Polish/readMe.md)
|
||||
🇧🇷 [Portuguese](./Portuguese/readMe.md)
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
[Jour 2 >>](./02_Day_Data_types/02_day_data_types.md)
|
||||
|
||||
|
||||
|
||||
- [30 jours de JavaScript](#30-jours-de-javascript)
|
||||
- [📔 Jour 1](#-jour-1)
|
||||
- [Introduction](#introduction)
|
||||
- [Les éxigences](#les-éxigences)
|
||||
- [Configuration](#configuration)
|
||||
- [Installation de Node.js](#installation-de--nodejs)
|
||||
- [Navigateur](#navigateur)
|
||||
- [Installation de Google Chrome](#installation-de--google-chrome)
|
||||
- [Ouverture de la console Google Chrome](#ouverture-de-la-console-google-chrome)
|
||||
- [Écrire du code sur la console du navigateur](#écrire-du-code-sur-la-console-du-navigateur)
|
||||
- [Console.log](#consolelog)
|
||||
- [Console.log avec plusieurs arguments](#consolelog-avec-plusieurs-arguments)
|
||||
- [Comments](#comments)
|
||||
- [Syntaxe](#syntaxe)
|
||||
- [AArithmétique](#aarithmétique)
|
||||
- [Editeur de code](#editeur-de-code)
|
||||
- [Installation de Visual Studio Code](#installation-de--visual-studio-code)
|
||||
- [Comment utiliser Visual Studio Code](#comment-utiliser-visual-studio-code)
|
||||
- [Ajout de JavaScript à une page Web](#ajout-de-javascript-à-une-page-web)
|
||||
- [Script en ligne](#script-en-ligne)
|
||||
- [Script interne](#script-interne)
|
||||
- [Script externe](#script-externe)
|
||||
- [Multiple External Scripts](#multiple-external-scripts)
|
||||
- [Introduction aux types de données](#introduction-aux-types-de-données)
|
||||
- [Les nombres](#les-nombres)
|
||||
- [Les chaîne de caractère](#les-chaîne-de-caractère)
|
||||
- [Booléens](#booléens)
|
||||
- [Indéfini(Undefined)](#indéfiniundefined)
|
||||
- [Null](#null)
|
||||
- [Vérification des types de données](#vérification-des-types-de-données)
|
||||
- [Encore des commentaires](#encore-des-commentaires)
|
||||
- [Variables](#variables)
|
||||
- [💻 Day 1: Exercises](#-day-1-exercises)
|
||||
|
||||
# 📔 Jour 1
|
||||
|
||||
## Introduction
|
||||
|
||||
**Félicitations** en décidant de participer au défi des 30 jours de programmation JavaScript. Dans ce défi, vous apprendrez tout ce dont vous avez besoin pour être un programmeur JavaScript, et en général, tout le concept de la programmation. À la fin du défi, vous recevrez un certificat d'achèvement du défi de programmation 30DaysOfJavaScript. Si vous avez besoin d'aide ou si vous souhaitez aider d'autres personnes, vous pouvez rejoindre le groupe de discussion dédié. [groupe telegram ](https://t.me/ThirtyDaysOfJavaScript).
|
||||
|
||||
**30 jours de JavaScript** challenge est un guide pour les débutants et les développeurs avancés en JavaScript. Bienvenue à JavaScript. JavaScript est le langage du web. J'aime utiliser et enseigner JavaScript et j'espère que vous en ferez autant.
|
||||
|
||||
Dans ce défi JavaScript pas à pas, vous apprendrez JavaScript, le langage de programmation le plus populaire de l'histoire de l'humanité. JavaScript est utilisé **_pour ajouter de l'interactivité aux sites web, pour développer des applications mobiles, des applications de bureau, des jeux, etc._** et aujourd'hui, JavaScript peut être utilisé pour **la programmation côté serveur**, **_l'apprentissage automatique_** and **_l'intelligence artificielle _**.
|
||||
|
||||
**_JavaScript (JS)_** a gagné en popularité au cours des dernières années et est le langage de programmation le plus utilisé dans le monde.
|
||||
depuis dix ans et est le langage de programmation le plus utilisé sur GitHub.
|
||||
|
||||
Ce défi est facile à lire, écrit dans un français facile, engageant, motivant et en même temps, il est très exigeant. Vous devez consacrer beaucoup de temps à la réalisation de ce défi. Si vous êtes un apprenant visuel, vous pouvez obtenir la leçon vidéo sur <a href="https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw"> Washera</a> Chaîne YouTube. Abonnez-vous à la chaîne, commentez et posez des questions sur les vidéos YouTube et soyez proactif, l'auteur finira par vous remarquer.
|
||||
|
||||
L'auteur aimerait connaître votre opinion sur le défi, partager l'auteur en exprimant vos pensées sur le défi 30 jours de JavaScript. Vous pouvez laisser votre témoignage sur cette page [link](https://testimonial-vdzd.onrender.com//)
|
||||
|
||||
## Les éxigences
|
||||
|
||||
No prior knowledge of programming is required to follow this challenge. You need only:
|
||||
|
||||
1. La motivation
|
||||
2. Un ordinateur
|
||||
3. La connexion internet
|
||||
4. Un navigateur
|
||||
5. Un editeur de code
|
||||
|
||||
## Configuration
|
||||
|
||||
I believe you have the motivation and a strong desire to be a developer, a computer and Internet. If you have those, then you have everything to get started.
|
||||
|
||||
### Installation de Node.js
|
||||
|
||||
Vous n'avez peut-être pas besoin de Node.js pour l'instant, mais vous pourriez en avoir besoin plus tard. Installer [node.js](https://nodejs.org/en/).
|
||||
|
||||
|
||||
|
||||
Après le téléchargement, double-cliquez et installez
|
||||
|
||||
|
||||
|
||||
Nous pouvons vérifier si le nœud est installé sur notre machine locale en ouvrant le terminal de notre appareil ou l'invite de commande.
|
||||
|
||||
```sh
|
||||
asabeneh $ node -v
|
||||
v12.14.0
|
||||
```
|
||||
|
||||
Lors de la création de ce didacticiel, j'utilisais Node version 12.14.0, mais maintenant la version recommandée de Node.js pour le téléchargement est v14.17.6, au moment où vous utilisez ce matériel, vous pouvez avoir une version Node.js supérieure.
|
||||
### Navigateur
|
||||
|
||||
Il existe de nombreux navigateurs. Cependant, je recommande fortement Google Chrome.
|
||||
|
||||
#### Installation de Google Chrome
|
||||
|
||||
Installer [Google Chrome](https://www.google.com/chrome/) si vous n'en avez pas encore. Nous pouvons écrire du petit code JavaScript sur la console du navigateur, mais nous n'utilisons pas la console du navigateur pour développer des applications.
|
||||
|
||||
|
||||
|
||||
#### Ouverture de la console Google Chrome
|
||||
|
||||
Vous pouvez ouvrir la console Google Chrome en cliquant sur trois points dans le coin supérieur droit du navigateur, en sélectionnant Plus d'outils -> Outils de développement ou en utilisant un raccourci clavier. Je préfère utiliser des raccourcis.
|
||||
|
||||
|
||||
Pour ouvrir la console Chrome à l'aide d'un raccourci clavier.
|
||||
|
||||
```sh
|
||||
Mac
|
||||
Command+Option+J
|
||||
|
||||
Windows/Linux:
|
||||
Ctl+Shift+J
|
||||
```
|
||||
|
||||
|
||||
|
||||
Après avoir ouvert la console Google Chrome, essayez d'explorer les boutons marqués. Nous passerons la plupart du temps sur la console. La console est l'endroit où va votre code JavaScript. Le moteur Google Console V8 transforme votre code JavaScript en code machine. Écrivons un code JavaScript sur la console Google Chrome :
|
||||
|
||||
|
||||
|
||||
#### Écrire du code sur la console du navigateur
|
||||
|
||||
Nous pouvons écrire n'importe quel code JavaScript sur la console Google ou sur n'importe quelle console de navigateur. Cependant, pour ce défi, nous nous concentrons uniquement sur la console Google Chrome. Ouvrez la console en utilisant :
|
||||
|
||||
```sh
|
||||
Mac
|
||||
Command+Option+I
|
||||
|
||||
Windows:
|
||||
Ctl+Shift+I
|
||||
```
|
||||
|
||||
##### Console.log
|
||||
|
||||
Pour écrire notre premier code JavaScript, nous avons utilisé une fonction intégrée **console.log()**. Nous avons passé un argument en tant que données d'entrée et la fonction affiche la sortie. Nous avons passé `'Hello, World'` acomme données d'entrée ou argument dans la fonction console.log().
|
||||
|
||||
```js
|
||||
console.log('Hello, World!')
|
||||
```
|
||||
|
||||
##### Console.log avec plusieurs arguments
|
||||
|
||||
La fonction **`console.log()`** peut prendre plusieurs paramètres séparés par des virgules. La syntaxe ressemble à ceci:**`console.log(param1, param2, param3)`**
|
||||
|
||||
|
||||
|
||||
```js
|
||||
console.log('Hello', 'World', '!')
|
||||
console.log('HAPPY', 'NEW', 'YEAR', 2020)
|
||||
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')
|
||||
```
|
||||
|
||||
Comme vous pouvez le voir dans l'extrait de code ci-dessus, _`console.log()`_ peut prendre plusieurs arguments..
|
||||
|
||||
Toutes nos félicitations! Vous avez écrit votre premier code JavaScript en utilisant _`console.log()`_.
|
||||
|
||||
##### Comments
|
||||
|
||||
Nous pouvons ajouter des commentaires à notre code. Les commentaires sont très importants pour rendre le code plus lisible et pour laisser des remarques dans notre code. JavaScript n'exécute pas la partie commentaire de notre code. En JavaScript, toute ligne de texte commençant par // en JavaScript est un commentaire, et tout ce qui est inclus comme cec `//` est également un commentaire.
|
||||
|
||||
|
||||
**Example: Commentaire sur une seule lignet**
|
||||
|
||||
```js
|
||||
// Ceci est le premier commentaire
|
||||
// Voici le deuxième commentaire
|
||||
// Je suis un commentaire d'une seule ligne
|
||||
```
|
||||
|
||||
**Example: Commentaire multiligne**
|
||||
|
||||
```js
|
||||
/*
|
||||
Il s'agit d'un commentaire multiligne
|
||||
Les commentaires multilignes peuvent prendre plusieurs lignes
|
||||
JavaScript est le langage du web
|
||||
*/
|
||||
```
|
||||
|
||||
##### Syntaxe
|
||||
|
||||
Les langages de programmation sont similaires aux langages humains. L'anglais ou d'autres langues utilisent des mots, des expressions, des phrases, des phrases composées et bien d'autres choses encore pour transmettre un message significatif. En anglais, le terme syntaxe signifie _la disposition des mots et des phrases pour créer des phrases bien formées dans une langue_. La définition technique de la syntaxe est la structure des énoncés dans un langage informatique. Les langages de programmation ont une syntaxe. JavaScript est un langage de programmation et, comme les autres langages de programmation, il possède sa propre syntaxe. Si nous n'écrivons pas une syntaxe que JavaScript comprend, il produira différents types d'erreurs. Nous étudierons les différents types d'erreurs JavaScript plus tard. Pour l'instant, voyons les erreurs de syntaxe.
|
||||
|
||||
|
||||
|
||||
J'ai fait une erreur délibérée. En conséquence, la console signale des erreurs de syntaxe. En fait, la syntaxe est très informative. Elle indique le type d'erreur commise. En lisant le guide de retour d'erreur, nous pouvons corriger la syntaxe et résoudre le problème. Le processus d'identification et de suppression des erreurs d'un programme s'appelle le débogage. Corrigeons les erreurs :
|
||||
|
||||
```js
|
||||
console.log('Hello, World!')
|
||||
console.log('Hello, World!')
|
||||
```
|
||||
|
||||
Jusqu'à présent, nous avons vu comment afficher du texte à l'aide de l'extension _`console.log()`_. Si nous imprimons du texte ou une chaîne en utilisant _`console.log()`_, texte doit être à l'intérieur des guillemets simples, des guillemets doubles ou d'un backtick.
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
console.log('Hello, World!')
|
||||
console.log("Hello, World!")
|
||||
console.log(`Hello, World!`)
|
||||
```
|
||||
|
||||
#### AArithmétique
|
||||
|
||||
Maintenant, pratiquons davantage l'écriture de codes JavaScript à l'aide _`console.log()`_ ode la console Google Chrome pour les types de données numériques. En plus du texte, nous pouvons également effectuer des calculs mathématiques en utilisant JavaScript. Faisons les calculs simples suivants. Il est possible d'écrire du code JavaScript sur la console Google Chrome directement sans la fonction. **_`console.log()`_** Cependant, il est inclus dans cette introduction car la majeure partie de ce défi se déroulerait dans un éditeur de texte où l'utilisation de la fonction serait obligatoire. Vous pouvez jouer directement avec les instructions sur la console.
|
||||
|
||||
|
||||
```js
|
||||
console.log(2 + 3) // Addition
|
||||
console.log(3 - 2) // Soustraction
|
||||
console.log(2 * 3) // Multiplication
|
||||
console.log(3 / 2) // Division
|
||||
console.log(3 % 2) // Modulo - trouver le reste
|
||||
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3
|
||||
```
|
||||
|
||||
### Editeur de code
|
||||
|
||||
Nous pouvons écrire nos codes sur la console du navigateur, mais ce ne sera pas pour des projets plus importants. Dans un environnement de travail réel, les développeurs utilisent différents éditeurs de code pour écrire leurs codes. Dans ce défi des 30 jours de JavaScript, nous utiliserons Visual Studio Code.
|
||||
|
||||
#### Installation de Visual Studio Code
|
||||
|
||||
Visual Studio Code est un éditeur de texte open-source très populaire. Je recommande [download Visual Studio Code](https://code.visualstudio.com/), mais si vous êtes en faveur d'autres éditeurs, n'hésitez pas à suivre avec ce que vous avez.
|
||||
|
||||
|
||||
|
||||
Si vous avez installé Visual Studio Code, commençons à l'utiliser.
|
||||
|
||||
#### Comment utiliser Visual Studio Code
|
||||
|
||||
Ouvrez Visual Studio Code en double-cliquant sur son icône. Lorsque vous l'ouvrez, vous obtenez ce type d'interface. Essayez d'interagir avec les icônes étiquetées.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Ajout de JavaScript à une page Web
|
||||
|
||||
JavaScript can be added to a web page in three different ways:
|
||||
|
||||
- **_Script en ligne_**
|
||||
- **_Script interne_**
|
||||
- **_Script externe_**
|
||||
- **_Multiples scripts externes_**
|
||||
|
||||
Les sections suivantes présentent différentes manières d'ajouter du code JavaScript à votre page web.
|
||||
|
||||
### Script en ligne
|
||||
|
||||
Créez un dossier de projet sur votre bureau ou à n'importe quel endroit, nommez-le 30DaysOfJS et créez un fichier **_`index.html`_** dans le dossier du projet. Collez ensuite le code suivant et ouvrez-le dans un navigateur, par exemple[Chrome](https://www.google.com/chrome/).
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30 Jour de javascript:Script en ligne</title>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="alert('Bienvenue dans 30 jours de JavaScript!')">Click Moi</button>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Vous venez d'écrire votre premier script en ligne. Nous pouvons créer un message d'alerte contextuel à l'aide de la fonction _`alert()`_ fonction intégrée.
|
||||
|
||||
### Script interne
|
||||
|
||||
Le script interne peut être écrit dans le fichier_`head`_ ou dans le _`body`_, mais il est préférable de le placer dans le corps du document HTML.
|
||||
Commençons par écrire dans l'en-tête de la page.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30 Jour de javascript:Script en ligne</title>
|
||||
<script>
|
||||
console.log('Bienvenue dans 30 jours de JavaScript!')
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
C'est ainsi que nous écrivons un script interne la plupart du temps. L'écriture du code JavaScript dans le corps du texte est la meilleure option. Ouvrez la console du navigateur pour voir la sortie du code JavaScript. `console.log()`.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30 Jour de javascript:Script en ligne</title>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="alert('Bienvenue dans 30 jours de JavaScript!');">Click Moi</button>
|
||||
<script>
|
||||
console.log('Bienvenue dans 30 jours de JavaScript!')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Ouvrez la console du navigateur pour voir le résultat de l'opération. `console.log()`.
|
||||
|
||||
|
||||
|
||||
### Script externe
|
||||
|
||||
Comme pour le script interne, le lien vers le script externe peut être placé dans l'en-tête ou dans le corps du texte, mais il est préférable de le placer dans le corps du texte.
|
||||
Tout d'abord, nous devons créer un fichier JavaScript externe avec l'extension .js. Tous les fichiers se terminant par l'extension .js sont des fichiers JavaScript. Créez un fichier nommé introduction.js dans le répertoire de votre projet, écrivez le code suivant et liez ce fichier .js au bas du corps du texte.
|
||||
|
||||
```js
|
||||
console.log('Bienvenue dans 30 jours de JavaScript!')
|
||||
```
|
||||
|
||||
Les scripts externes dans le _head_:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30 Jour de javascript:Script externe</title>
|
||||
<script src="introduction.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Les scripts externes dans le _body_:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30 Jour de javascript:Script externe/title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Le lien externe JavaScript peut être placé dans l'en-tête ou dans le corps du texte -->
|
||||
<!--
|
||||
Avant la balise de fermeture du corps de texte, c'est l'endroit recommandé pour placer le script JavaScript externe.
|
||||
-->
|
||||
<script src="introduction.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
Ouvrez la console du navigateur pour voir le résultat de la commande`console.log()`.
|
||||
|
||||
### Multiple External Scripts
|
||||
|
||||
Nous pouvons également lier plusieurs fichiers JavaScript externes à une page web.
|
||||
Créer un fichier `helloworld.js` dans le dossier 30DaysOfJS et écrivez le code suivant.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
_Votre fichier main.js doit être placé en dessous de tous les autres fichiers scripts_. Il est très important de s'en souvenir.
|
||||
|
||||
|
||||
|
||||
## Introduction aux types de données
|
||||
|
||||
En JavaScript et dans d'autres langages de programmation, il existe différents types de données. Voici les types de données primitives en JavaScript: _Chaine de caractère, Nombre, Booleen, undefined, Null_, et _Symbol_.
|
||||
|
||||
### Les nombres
|
||||
|
||||
- Nombres entiers : Nombres entiers (négatifs, nuls et positifs)
|
||||
Exemple
|
||||
... -3, -2, -1, 0, 1, 2, 3 ...
|
||||
- Nombres à virgule flottante : Nombre décimal
|
||||
Exemple
|
||||
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
|
||||
|
||||
### Les chaîne de caractère
|
||||
|
||||
Ensemble d'un ou plusieurs caractères compris entre deux guillemets simples, deux guillemets doubles ou deux barres obliques.
|
||||
|
||||
**Exemple:**
|
||||
|
||||
```js
|
||||
'a'
|
||||
'Asabeneh'
|
||||
"Asabeneh"
|
||||
'Finland'
|
||||
'JavaScript est un beau langage de programmation'
|
||||
'J\'aime enseigner'
|
||||
'J\'espère que vous appréciez ce premier jour'
|
||||
`Nous pouvons également créer une chaîne de caractères à l'aide d'un backtick`
|
||||
'Une chaîne de caractères peut être aussi petite qu\'un seul caractère ou aussi grande que plusieurs pages.'
|
||||
'Tout type de données placé sous un guillemet simple, un guillemet double ou une coche est une chaîne de caractères.'
|
||||
```
|
||||
|
||||
### Booléens
|
||||
|
||||
Une valeur booléenne est soit vraie, soit fausse. Toute comparaison renvoie une valeur booléenne, qui est soit vraie, soit fausse.
|
||||
Un type de données booléen est soit une valeur vraie, soit une valeur fausse.
|
||||
|
||||
**Exemple:**
|
||||
|
||||
```js
|
||||
true // si la lumière est allumée, la valeur est vraie
|
||||
false // si la lumière est éteinte, la valeur est fausse
|
||||
```
|
||||
|
||||
### Indéfini(Undefined)
|
||||
|
||||
En JavaScript, si nous n'attribuons pas de valeur à une variable, cette valeur est indéfinie. En outre, si une fonction ne renvoie rien, elle renvoie une valeur indéfinie.
|
||||
|
||||
```js
|
||||
let firstName
|
||||
console.log(firstName) // indéfini, car il n'est pas encore affecté à une valeur
|
||||
```
|
||||
|
||||
### Null
|
||||
|
||||
Null en JavaScript signifie une valeur vide.
|
||||
|
||||
```js
|
||||
let emptyValue = null
|
||||
```
|
||||
|
||||
## Vérification des types de données
|
||||
|
||||
Pour vérifier le type de données d'une certaine variable, nous utilisons la fonction **typeof** de l'opérateur. Voir l'exemple suivant.
|
||||
|
||||
```js
|
||||
console.log(typeof 'Asabeneh') // chaîne de caractère
|
||||
console.log(typeof 5) // nombre
|
||||
console.log(typeof true) // booléen
|
||||
console.log(typeof null) // type object
|
||||
console.log(typeof undefined) // undefini
|
||||
```
|
||||
|
||||
## Encore des commentaires
|
||||
|
||||
Rappelez-vous que les commentaires en JavaScript sont similaires à ceux des autres langages de programmation. Les commentaires sont importants pour rendre votre code plus lisible.
|
||||
Il existe deux façons de commenter :
|
||||
|
||||
- _Commentaire sur une seule ligne_
|
||||
- _Commentaires multilignes_
|
||||
|
||||
```js
|
||||
// commenter le code lui-même avec un seul commentaire
|
||||
// let firstName = 'Asabeneh'; commentaire sur une seule ligne
|
||||
// let lastName = 'Yetayeh'; commentaire sur une seule ligne
|
||||
```
|
||||
|
||||
Commentaires en plusieurs lignes :
|
||||
|
||||
```js
|
||||
/*
|
||||
let location = 'Helsinki';
|
||||
let age = 100;
|
||||
let isMarried = true;
|
||||
Il s'agit d'un commentaire de plusieurs lignes
|
||||
*/
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
Les variables sont des _conteneurs_ of data. Les variables sont utilisées pour _stocker_ des données dans un emplacement de mémoire. Lorsqu'une variable est déclarée, un emplacement mémoire est réservé. Lorsqu'une variable est affectée à une valeur (données), l'espace mémoire sera rempli avec ces données. Pour déclarer une variable, on utilise_var_, _let_, or _const_ keywords.
|
||||
|
||||
Pour une variable qui change à un autre moment, nous utilisons_let_. _const_. Si les données ne changent pas du tout, nous utilisons l'exemple suivant, PI, nom de pays, ne changent pas, et nous pouvons utiliser _const_.
|
||||
|
||||
Nous n'utiliserons pas _var_ dans ce défi et je ne vous recommande pas de l'utiliser. C'est une façon de déclarer une variable qui peut être source d'erreurs et qui comporte de nombreuses fuites. Nous parlerons plus en détail de var, let et const dans d'autres sections (scope). Pour l'instant, l'explication ci-dessus est suffisante.
|
||||
|
||||
Un nom de variable JavaScript valide doit respecter les règles suivantes :
|
||||
|
||||
- Le nom d'une variable JavaScript ne doit pas commencer par un chiffre.
|
||||
- Le nom d'une variable JavaScript n'autorise pas les caractères spéciaux, à l'exception du signe du dollar et du trait de soulignement.
|
||||
- Le nom d'une variable JavaScript suit la convention camelCase.
|
||||
- Le nom d'une variable JavaScript ne doit pas comporter d'espace entre les mots.
|
||||
|
||||
Voici des exemples de variables JavaScript valides.
|
||||
|
||||
```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 première et la deuxième variables de la liste suivent la convention camelCase de déclaration en JavaScript. Dans ce document, nous utiliserons des variables en camelCase (camelWithOneHump). Nous utilisons la camelCase (camelWithTwoHump) pour déclarer les classes, nous discuterons des classes et des objets dans d'autres sections.
|
||||
|
||||
Exemple de variables non valides :
|
||||
|
||||
```js
|
||||
first-name
|
||||
1_num
|
||||
num_#_1
|
||||
```
|
||||
|
||||
Déclarons des variables avec différents types de données. Pour déclarer une variable, nous devons utiliser _let_ or _const_ avant le nom de la variable. Après le nom de la variable, on écrit un signe égal (opérateur d'affectation), et une valeur (donnée affectée).
|
||||
|
||||
```js
|
||||
// Syntax
|
||||
let nameOfVariable = value
|
||||
```
|
||||
|
||||
Le nom de l'objet est le nom qui stocke les différentes données de la valeur. Voir ci-dessous pour des exemples détaillés.
|
||||
|
||||
**Exemples de variables déclarées**
|
||||
|
||||
```js
|
||||
// Déclarer différentes variables de différents types de données
|
||||
let firstName = 'Asabeneh' // prénom d'une personne
|
||||
let lastName = 'Yetayeh' // nom de famille d'une personne
|
||||
let country = 'Finland' // pays
|
||||
let city = 'Helsinki' // capitale
|
||||
let age = 100 // age
|
||||
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
|
||||
// Les variables peuvent également être déclarées sur une seule ligne séparée par une virgule, mais je recommande d'utiliser une ligne séparée pour rendre le code plus lisible.
|
||||
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
|
||||
console.log(name, job, live)
|
||||
```
|
||||
|
||||
```sh
|
||||
Asabeneh teacher Finland
|
||||
```
|
||||
|
||||
Lorsque vous exécutez _index.html_ dans le fichier 01-Jour vous devriez obtenir ceci:
|
||||
|
||||
|
||||
|
||||
🌕 Vous êtes extraordinaire ! Vous venez de relever le défi du premier jour et vous êtes sur la voie de la grandeur. Maintenant, fais quelques exercices pour ton cerveau et tes muscles.
|
||||
|
||||
# 💻 Day 1: Exercises
|
||||
|
||||
1. Rédigez un commentaire d'une seule ligne qui dit, _les commentaires rendent le code plus lisible_
|
||||
2. Rédigez un autre commentaire unique qui dit, _Bienvenue dans 30 jours de JavaScript_
|
||||
3. Rédigez un commentaire de plusieurs lignes qui dit, _les commentaires peuvent rendre le code lisible et facile à réutiliser_
|
||||
_et informatif_
|
||||
|
||||
4. Créez un fichier variable.js, déclarez des variables et attribuez des types de données string, boolean, undefined et null.
|
||||
5.Créer le fichier datatypes.js et utiliser le JavaScript **_typeof_** pour vérifier les différents types de données. Vérifier le type de données de chaque variable
|
||||
6. Déclarer quatre variables sans leur attribuer de valeur
|
||||
7. Déclarer quatre variables avec des valeurs assignées
|
||||
8. Déclarez des variables pour stocker votre prénom, votre nom de famille, votre état civil, votre pays et votre âge sur plusieurs lignes.
|
||||
9. Déclarez des variables pour stocker votre prénom, votre nom, votre état civil, votre pays et votre âge sur une seule ligne.
|
||||
10. Déclarer deux variables _myAge_ and _yourAge_ et leur assigner des valeurs initiales et se connecter à la console du navigateur.
|
||||
|
||||
```sh
|
||||
I am 25 years old.
|
||||
You are 30 years old.
|
||||
```
|
||||
|
||||
🎉 FÉLICITATIONS ! 🎉
|
||||
|
||||
[Jour 2 >>](./02_Jour_les_types_des_donnee/02_Jour_les_types_des_donnee.md)
|
||||
@ -1,634 +0,0 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of JavaScript: Booleans, Operators, Date</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>
|
||||
|
||||
[<< Day 2](../02_Day_Data_types/02_day_data_types.md) | [Day 4 >>](../04_Day_Conditionals/04_day_conditionals.md)
|
||||
|
||||
|
||||
|
||||
- [📔 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 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.
|
||||
|
||||
|
||||
**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()_
|
||||
|
||||
|
||||
|
||||
### 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 = (y<sub>2</sub>-y<sub>1</sub>)/(x<sub>2</sub>-x<sub>1</sub>). 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 = x<sup>2</sup> + 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)
|
||||
@ -1,377 +0,0 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of JavaScript: Condizionali</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>
|
||||
|
||||
[<< Day 3](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) | [Day 5 >>](../05_Day_Arrays/05_day_arrays.md)
|
||||
|
||||
|
||||
|
||||
- [📔 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)
|
||||
@ -1,774 +0,0 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of JavaScript: Arrays</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>
|
||||
|
||||
[<< Day 4](../04_Day_Conditionals/04_day_conditionals.md) | [Day 6 >>](../06_Day_Loops/06_day_loops.md)
|
||||
|
||||
|
||||
|
||||
- [📔 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.
|
||||
|
||||
|
||||
|
||||
```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)
|
||||
@ -1,484 +0,0 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of JavaScript: Loops</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>
|
||||
|
||||
[<< Day 5](../05_Day_Arrays/05_day_arrays.md) | [Day 7 >>](../07_Day_Functions/07_day_functions.md)
|
||||
|
||||
|
||||
|
||||
- [📔 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)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue