msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #79 from Ibochkarev/russian

Browse Source 
Start of translation into Russian
pull/91/head
Asabeneh 5 years ago committed by GitHub
parent ab33a126d4 d0fd5655cf
commit 5b5605634f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
92 changed files with 4142 additions and 0 deletions
Show Stats Download Patch File Download Diff File

973
RU/02_Day/02_day_data_types.md
Unescape View File

@ -0,0 +1,973 @@
<div align="center">
<h1> 30 Days Of JavaScript</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>Автор:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Январь, 2020</small>
</sub>
</div>
[<< День 1](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/README.md) | [День 3 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md)
![Thirty Days Of JavaScript](../images/banners/day_1_2.png)
- [📔 Day 2](#%f0%9f%93%94-day-2)
- [Типы данных](#%d0%a2%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85)
- [Примитивные типы данных](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b8%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b5-%d1%82%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85)
- [Пример](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80)
- [Непримитивные типы данных](#%d0%9d%d0%b5%d0%bf%d1%80%d0%b8%d0%bc%d0%b8%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b5-%d1%82%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85)
- [Числа](#%d0%a7%d0%b8%d1%81%d0%bb%d0%b0)
- [Объявление числовых типов данных](#%d0%9e%d0%b1%d1%8a%d1%8f%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%87%d0%b8%d1%81%d0%bb%d0%be%d0%b2%d1%8b%d1%85-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85)
- [Математический объект](#%d0%9c%d0%b0%d1%82%d0%b5%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b9-%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82)
- [Генератор случайных чисел](#%d0%93%d0%b5%d0%bd%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80-%d1%81%d0%bb%d1%83%d1%87%d0%b0%d0%b9%d0%bd%d1%8b%d1%85-%d1%87%d0%b8%d1%81%d0%b5%d0%bb)
- [Строки](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b8)
- [Конкатенация строк](#%d0%9a%d0%be%d0%bd%d0%ba%d0%b0%d1%82%d0%b5%d0%bd%d0%b0%d1%86%d0%b8%d1%8f-%d1%81%d1%82%d1%80%d0%be%d0%ba)
- [Конкатенация с использованием оператора сложения](#%d0%9a%d0%be%d0%bd%d0%ba%d0%b0%d1%82%d0%b5%d0%bd%d0%b0%d1%86%d0%b8%d1%8f-%d1%81-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5%d0%bc-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d0%b0-%d1%81%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f)
- [Длинные буквенные строки](#%d0%94%d0%bb%d0%b8%d0%bd%d0%bd%d1%8b%d0%b5-%d0%b1%d1%83%d0%ba%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5-%d1%81%d1%82%d1%80%d0%be%d0%ba%d0%b8)
- [Перенос последовательности в строке](#%d0%9f%d0%b5%d1%80%d0%b5%d0%bd%d0%be%d1%81-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%be%d0%b2%d0%b0%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d0%be%d1%81%d1%82%d0%b8-%d0%b2-%d1%81%d1%82%d1%80%d0%be%d0%ba%d0%b5)
- [Шаблонные литералы (Шаблонные строки)](#%d0%a8%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%bd%d1%8b%d0%b5-%d0%bb%d0%b8%d1%82%d0%b5%d1%80%d0%b0%d0%bb%d1%8b-%d0%a8%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%bd%d1%8b%d0%b5-%d1%81%d1%82%d1%80%d0%be%d0%ba%d0%b8)
- [Строковые Методы](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%be%d0%b2%d1%8b%d0%b5-%d0%9c%d0%b5%d1%82%d0%be%d0%b4%d1%8b)
- [Проверка типов данных и приведение](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85-%d0%b8-%d0%bf%d1%80%d0%b8%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5)
- [Проверка типов данных](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85)
- [Изменение типа данных (Casting)](#%d0%98%d0%b7%d0%bc%d0%b5%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%82%d0%b8%d0%bf%d0%b0-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85-casting)
- [Строка в число](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b0-%d0%b2-%d1%87%d0%b8%d1%81%d0%bb%d0%be)
- [Строка в число с плавающей запятой](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b0-%d0%b2-%d1%87%d0%b8%d1%81%d0%bb%d0%be-%d1%81-%d0%bf%d0%bb%d0%b0%d0%b2%d0%b0%d1%8e%d1%89%d0%b5%d0%b9-%d0%b7%d0%b0%d0%bf%d1%8f%d1%82%d0%be%d0%b9)
- [Числа с плавающей точкой в целые числа.](#%d0%a7%d0%b8%d1%81%d0%bb%d0%b0-%d1%81-%d0%bf%d0%bb%d0%b0%d0%b2%d0%b0%d1%8e%d1%89%d0%b5%d0%b9-%d1%82%d0%be%d1%87%d0%ba%d0%be%d0%b9-%d0%b2-%d1%86%d0%b5%d0%bb%d1%8b%d0%b5-%d1%87%d0%b8%d1%81%d0%bb%d0%b0)
- [💻 День 2: Упражнения](#%f0%9f%92%bb-%d0%94%d0%b5%d0%bd%d1%8c-2-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f)
- [Упражнение: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1)
- [Упражнение: уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2)
- [Упражнения: уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3)
# 📔 Day 2
## Типы данных
В предыдущем разделе мы немного упомянули о типах данных. Данные или значения имеют типы данных. Типы данных описывают характеристики данных. Типы данных можно разделить на два вида
1. Примитивные типы данных
2. Непримитивные типы данных (ссылки на объекты)
### Примитивные типы данных
Примитивные типы данных в JavaScript включают в себя:
1. Числа (Numbers) - Целые числа, числа с плавающей точкой
2. Строки (Strings) - Любые данные в одинарных или двойных кавычках
3. Булевые (boolean) - true или false значения
4. Null - пустое значение или нет значения
5. Undefined - объявленная переменная без значения
Непримитивные типы данных в JavaScript включают в себя:
1. Объекты
2. Функции
3. Массивы
Теперь давайте посмотрим, что именно означают примитивные и не примитивные типы данных.
_Примитивные_ типы данных являются неизменяемыми типами данных. Как только примитивный тип данных создан, мы не можем его изменить.
#### Пример
```js
let word = "JavaScript";
```
Если мы попытаемся изменить строку, хранящуюся в переменной _word_, JavaScript вызовет ошибку. Любой тип данных с одинарными, двойными или обратными кавычками является строковым типом данных.
```js
word[0] = "Y";
```
Это выражение не изменяет строку, хранящуюся в переменной _word_. Таким образом, мы можем сказать, что строки не являются изменяемыми или неизменяемыми.
Примитивные типы данных сравниваются по их значениям. Давайте сравним различные значения данных. Смотрите пример ниже:
```js
let numOne = 3;
let numTwo = 3;
console.log(numOne == numTwo); // true
let js = "JavaScript";
let py = "Python";
console.log(js == py); //false
let lightOn = true;
let lightOff = false;
console.log(lightOn == lightOff); // false
```
### Непримитивные типы данных
_Непримитивные_ типы данных являются изменяемыми. Мы можем изменить значение непримитивных типов данных после их создания.
Давайте посмотрим, создав массив. Массив - это список значений данных в квадратных скобках. Массивы могут содержать одинаковые или разные типы данных. На значения массива ссылается их индекс. В массиве JavaScript индекс начинается с нуля. Т.е. первый элемент массива находится с нулевым индексом, второй элемент с индексом один и третий элемент с индексом два и т.д.
```js
let nums = [1, 2, 3];
nums[0] = 10;
console.log(nums); // [10, 2, 3]
```
Как вы можете видеть, массив, в котором непримитивный тип данных является изменяемым. Непримитивные типы данных нельзя сравнивать по значению. Даже если два непримитивных типа данных имеют одинаковые свойства и значения, они не являются строго равными.
```js
let nums = [1, 2, 3];
let numbers = [1, 2, 3];
console.log(nums == numbers); // false
let userOne = {
name: "Asabeneh",
role: "teaching",
country: "Finland"
};
let userTwo = {
name: "Asabeneh",
role: "teaching",
country: "Finland"
};
console.log(userOne == userTwo); // false
```
Основное правило, мы не сравниваем непримитивные типы данных. Не сравнивайте массив, функцию или объект.
Непримитивные значения называются ссылочными типами, поскольку они сравниваются по значению, а не по значению. Два объекта строго равны, если они ссылаются на один и тот же базовый объект.
```js
let nums = [1, 2, 3];
let numbers = nums;
console.log(nums == numbers); // true
let userOne = {
name: "Asabeneh",
role: "teaching",
country: "Finland"
};
let userTwo = userOne;
console.log(userOne == userTwo); // true
```
Если вам трудно понять разницу между примитивными типами данных и не примитивными типами данных, вы не единственный.
Успокойтесь и просто перейдите к следующему разделу и попробуйте вернуться через некоторое время. Теперь давайте начнем типы данных по типу номера.
## Числа
Числа представляют собой целые и десятичные значения, которые могут выполнять все арифметические операции.
Давайте посмотрим некоторые примеры чисел.
### Объявление числовых типов данных
```js
let age = 35;
const gravity = 9.81; //мы используем const для неизменных значений, гравитационная постоянная в m/s2
let mass = 72; // масса в килограммах
const PI = 3.14; // ПИ геометрическая постоянная
//Больше примеров
const boilingPoint = 100; // температура в oC, температура кипения воды которой постоянна
const bodyTemp = 37; // oC средняя температура тела человека, которая является постоянной
console.log(age, gravity, mass, PI, boilingPoint, bodyTemp);
```
### Математический объект
В JavaScript Math Object предоставляет множество методов для работы с числами.
```js
const PI = Math.PI;
console.log(PI); // 3.141592653589793
// Округление до ближайшего числа
// если выше .5 вверх, если меньше 0.5 вниз
console.log(Math.round(PI)); // 3, чтобы округлить значения до ближайшего числа
console.log(Math.round(9.81)); // 10
console.log(Math.floor(PI)); // 3 округление вниз
console.log(Math.ceil(PI)); // 4 округление вверх
console.log(Math.min(-5, 3, 20, 4, 5, 10)); // -5, возвращает минимальное значение
console.log(Math.max(-5, 3, 20, 4, 5, 10)); // 20, возвращает максимальное значение
const randNum = Math.random(); // создает случайное число от 0 до 0,999999
console.log(randNum);
// Давайте создадим случайное число от 0 до 10
const num = Math.floor(Math.random() * 11); // создает случайное число от 0 до 10
console.log(num);
// Абсолютное значение
console.log(Math.abs(-10)); //10
// Квадратный корень
console.log(Math.sqrt(100)); // 10
console.log(Math.sqrt(2)); //1.4142135623730951
// Мощность
console.log(Math.pow(3, 2)); // 9
console.log(Math.E); // 2.718
// Логарифм
// Возвращает натуральный логарифм основания E из x, Math.log(x)
console.log(Math.log(2)); // 0.6931471805599453
console.log(Math.log(10)); // 2.302585092994046
// Тригонометрия
Math.sin(0);
Math.sin(60);
Math.cos(0);
Math.cos(60);
```
#### Генератор случайных чисел
JavaScript Math Object имеет генератор номеров метода `random()`, который генерирует числа от 0 до 0.999999999...
```js
let randomNum = Math.random(); // генерирует от 0 до 0,999
```
Теперь давайте посмотрим, как мы можем использовать метод `random()` для генерации случайного числа от 0 до 10 включительно.
```js
let randomNum = Math.random(); // генерирует от 0 до 0,999
let numBtnZeroAndTen = randomNum * 11;
console.log(numBtnZeroAndTen); // это дает: мин 0 и макс 10.99
let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen);
console.log(randomNumRoundToFloor); // это дает от 0 до 10
```
## Строки
Строки - это тексты, которые заключены в **_одинарную_** или **_двойную_** кавычку. Чтобы объявить строку, нам нужно имя переменной, оператор присваивания, значение в одинарных кавычках, двойные кавычки или обратные кавычки.
Давайте посмотрим несколько примеров строки:
```js
let space = " "; // Пусто - пробел
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";
```
### Конкатенация строк
Соединение двух или более строк вместе называется конкатенацией.
```js
// Объявление разных переменных разных типов данных
let space = " ";
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";
```
```js
let fullName = firstName + space + lastName; // конкатенация, объединение двух строк.
console.log(fullName);
```
```sh
Asabeneh Yetayeh
```
Мы можем объединять строки разными способами.
#### Конкатенация с использованием оператора сложения
Конкатенация с использованием оператора сложения - старый способ. Этот способ объединения утомителен и подвержен ошибкам. Полезно знать, как объединить таким способом, но я настоятельно рекомендую использовать второй способ.
```js
// Объявление разных переменных разных типов данных
let space = " ";
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";
let age = 250;
let fullName = firstName + space + lastName;
let personInfoOne = fullName + ". I am " + age + ". I live in " + country; // ES5
console.log(personInfoOne);
```
```sh
Asabeneh Yetayeh. I am 250. I live in Finland
```
#### Длинные буквенные строки
Строка может быть отдельным символом, абзацем или страницей. Если длина строки слишком велика, она не помещается в одну строку. Мы можем использовать символ обратной косой черты (\\) в конце каждой строки, чтобы указать, что строка будет продолжена на следующей строке.
**Пример:**
```js
const paragraph =
"My name is Asabeneh Yetayeh. I live in Finland, Helsinki.\
I am a teacher and I love teaching. I teach HTML, CSS, JavaScript, React, Redux, \
Node.js, Python, Data Analysis and D3.js for anyone who is interested to learn. \
In the end of 2019, I was thinking to expand my teaching and to reach \
to global audience and I started a Python challenge from November 20 - December 19.\
It was one of the most rewarding and inspiring experience.\
Now, we are in 2020. I am enjoying preparing the 30DaysOfJavaScript challenge and \
I hope you are enjoying too.";
console.log(paragraph);
```
#### Перенос последовательности в строке
В JavaScript и других языках программирования, после некоторых символов есть перенос - последовательности. Давайте посмотрим на наиболее распространенные escape-символы:
- `\n` - Новая строка
- `\t` - Таб означает (8 пробелов)
- `\\` - Обратная косая черта
- `\'` - Одинарные кавычки (')
- `\"` - Двойные кавычки (")
```js
console.log(
"I hope every one is enjoying the 30 Days Of JavaScript challenge.\nDo you ?"
); // line break
console.log("Days\tTopics\tExercises");
console.log("Day 1\t3\t5");
console.log("Day 2\t3\t5");
console.log("Day 3\t3\t5");
console.log("Day 4\t3\t5");
console.log("This is a back slash symbol (\\)"); // To write a back slash
console.log('In every programming language it starts with "Hello, World!"');
console.log("In every programming language it starts with 'Hello, World!'");
console.log("The saying 'Seeing is Believing' is't correct in 2020");
```
#### Шаблонные литералы (Шаблонные строки)
Чтобы создать строку шаблона, мы используем два обратных ключа. Мы можем вставить данные как выражение внутри строки шаблона. Чтобы ввести данные, мы заключаем выражение в фигурную скобку (`{}`), за которой следует знак `$`. Смотрите синтаксис ниже.
```js
// Синтаксис
`String literal text ${expression}`;
```
**Пример: 1**
```js
console.log(`The sum of 2 and 3 is 5`); // статическая запись данных
let a = 2;
let b = 3;
console.log(`The sum of ${a} and ${b} is ${a + b}`); // ввод данных динамически
```
**Example:2**
```js
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";
let age = 250;
let fullName = firstName + " " + lastName;
let personInfoTwo = `I am ${fullName}. I am ${age}. I live in ${country}.`; //ES6 - Метод строковой интерполяции
let personInfoThree = `I am ${fullName}. I live in ${city}, ${country}. I am a ${job}. I teach ${language}.`;
console.log(personInfoTwo);
console.log(personInfoThree);
```
```sh
I am Asabeneh Yetayeh. I am 250. I live in Finland.
I am Asabeneh Yetayeh. I live in Helsinki, Finland. I am a teacher. I teach JavaScript.
```
Используя шаблон строки или метод интерполяции строки, мы можем добавить выражение, которое может быть значением или некоторыми операциями (сравнение, арифметические операции, троичные операции).
```js
let a = 2;
let b = 3;
console.log(`${a} is greater than ${b}: ${a > b}`);
```
```sh
2 is greater than 3: false
```
### Строковые Методы
Все в JavaScript это объект. Строка - это примитивный тип данных, который означает, что мы не можем изменить его после создания. У строкового объекта есть много строковых методов. Существуют разные строковые методы, которые могут помочь нам работать со строками.
1. _length_: Метод строки _length_ возвращает количество символов в строке, включая пустое пространство.
**Пример:**
```js
let js = "JavaScript";
console.log(js.length); // 10
let firstName = "Asabeneh";
console.log(firstName.length); // 8
```
2. _Доступ к символам в строке_: мы можем получить доступ к каждому символу в строке, используя его индекс. В программировании отсчет начинается с 0. Первый индекс строки равен нулю, а последний индекс равен одному минус длина строки.
![Accessing sting by index](../images/string_indexes.png)
Давайте получим доступ к различным символам в строке «JavaScript».
```js
let string = "JavaScript";
let firstLetter = string[0];
console.log(firstLetter); // J
let secondLetter = string[1]; // a
let thirdLetter = string[2];
let lastLetter = string[9];
console.log(lastLetter); // t
let lastIndex = string.length - 1;
console.log(lastIndex); // 9
console.log(string[lastIndex]); // t
```
3. `toUpperCase()`: этот метод изменяет строку на заглавные буквы.
```js
let string = "JavaScript";
console.log(string.toUpperCase()); // JAVASCRIPT
let firstName = "Asabeneh";
console.log(firstName.toUpperCase()); // ASABENEH
let country = "Finland";
console.log(country.toUpperCase()); // FINLAND
```
4. `toLowerCase()`: этот метод изменяет строку на заглавные буквы
```js
let string = "JavasCript";
console.log(string.toLowerCase()); // javascript
let firstName = "Asabeneh";
console.log(firstName.toLowerCase()); // asabeneh
let country = "Finland";
console.log(country.toLowerCase()); // finland
```
5. `substr()`:Требуется два аргумента: начальный индекс и количество символов для нарезки.
```js
let string = "JavaScript";
console.log(string.substr(4, 6)); // Script
let country = "Finland";
console.log(country.substr(3, 4)); // land
```
6. `substring()`: Он принимает два аргумента: начальный индекс и индекс остановки, но он не включает индекс остановки.
```js
let string = "JavaScript";
console.log(string.substring(0, 4)); // Java
console.log(string.substring(4, 10)); // Script
console.log(string.substring(4)); // Script
let country = "Finland";
console.log(country.substring(0, 3)); // Fin
console.log(country.substring(3, 7)); // land
console.log(country.substring(3)); // land
```
7. `split()`: Метод `split()` разделяет строку в указанном месте.
```js
let string = "30 Days Of JavaScript";
console.log(string.split()); // ["30 Days Of JavaScript"]
console.log(string.split(" ")); // ["30", "Days", "Of", "JavaScript"]
let firstName = "Asabeneh";
console.log(firstName.split()); // ["Asabeneh"]
console.log(firstName.split("")); // ["A", "s", "a", "b", "e", "n", "e", "h"]
let countries = "Finland, Sweden, Norway, Denmark, and Iceland";
console.log(countries.split(",")); // ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"]
console.log(countries.split(", ")); //  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"]
```
8. `trim()`: Удаляет завершающий пробел в начале или конце строки.
```js
let string = " 30 Days Of JavaScript ";
console.log(string);
console.log(string.trim(" "));
let firstName = " Asabeneh ";
console.log(firstName);
console.log(firstName.trim());
```
```sh
30 Days Of JavasCript
30 Days Of JavasCript
Asabeneh
Asabeneh
```
9. `includes()`: принимает аргумент подстроки и проверяет, существует ли аргумент подстроки в строке. `includes()` возвращает логическое значение. Он проверяет, существует ли подстрока в строке, и возвращает true, если она существует, и false, если она не существует.
```js
let string = "30 Days Of JavaScript";
console.log(string.includes("Days")); // true
console.log(string.includes("days")); // false
console.log(string.includes("Script")); // true
console.log(string.includes("script")); // false
console.log(string.includes("java")); // false
console.log(string.includes("Java")); // true
let country = "Finland";
console.log(country.includes("fin")); // false
console.log(country.includes("Fin")); // true
console.log(country.includes("land")); // true
console.log(country.includes("Land")); // false
```
10. `replace()`: принимает к параметру старую подстроку и новую подстроку.
```js
string.replace(oldsubstring, newsubstring);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.replace("JavaScript", "Python")); // 30 Days Of Python
let country = "Finland";
console.log(country.replace("Fin", "Noman")); // Nomanland
```
11. `charAt()`: принимает индекс и возвращает значение по этому индексу
```js
string.charAt(index);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.charAt(0)); // 3
let lastIndex = string.length - 1;
console.log(string.charAt(lastIndex)); // t
```
12. `charCodeAt()`: Принимает индекс и возвращает код символа (номер ASCII) значения по этому индексу
```js
string.charCodeAt(index);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.charCodeAt(3)); // D ASCII number is 51
let lastIndex = string.length - 1;
console.log(string.charCodeAt(lastIndex)); // t ASCII is 116
```
13. `indexOf()`: Принимает подстроку, и если подстрока существует в строке, она возвращает первую позицию подстроки, если не существует, она возвращает -1
```js
string.indexOf(substring);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.indexOf("D")); // 3
console.log(string.indexOf("Days")); // 3
console.log(string.indexOf("days")); // -1
console.log(string.indexOf("a")); // 4
console.log(string.indexOf("JavaScript")); // 11
console.log(string.indexOf("Script")); //15
console.log(string.indexOf("script")); // -1
```
14. `lastIndexOf()`: Принимает подстроку, и если подстрока существует в строке, она возвращает последнюю позицию подстроки, если она не существует, она возвращает -1
```js
//syntax
string.lastIndexOf(substring);
```
```js
let string =
"I love JavaScript. If you do not love JavaScript what else can you love.";
console.log(string.lastIndexOf("love")); // 67
console.log(string.lastIndexOf("you")); // 63
console.log(string.lastIndexOf("JavaScript")); // 38
```
15. `concat()`: он принимает много подстрок и создает конкатенацию.
```js
string.concat(substring, substring, substring);
```
```js
let string = "30";
console.log(string.concat("Days", "Of", "JavaScript")); // 30DaysOfJavaScript
let country = "Fin";
console.log(country.concat("land")); // Finland
```
16. `startsWith`: он принимает подстроку в качестве аргумента и проверяет, начинается ли строка с указанной подстроки. Возвращает логическое значение (true или false).
```js
//syntax
string.startsWith(substring);
```
```js
let string = "Love is the best to in this world";
console.log(string.startsWith("Love")); // true
console.log(string.startsWith("love")); // false
console.log(string.startsWith("world")); // false
let country = "Finland";
console.log(country.startsWith("Fin")); // true
console.log(country.startsWith("fin")); // false
console.log(country.startsWith("land")); // false
```
17. `endsWith`: он принимает подстроку в качестве аргумента и проверяет, начинается ли строка с указанной подстроки. Возвращает логическое значение (true или false).
```js
string.endsWith(substring);
```
```js
let string = "Love is the best to in this world";
console.log(string.endsWith("world")); // true
console.log(string.endsWith("love")); // false
console.log(string.endsWith("in this world")); // true
let country = "Finland";
console.log(country.endsWith("land")); // true
console.log(country.endsWith("fin")); // false
console.log(country.endsWith("Fin")); // false
```
18. `search`: он принимает подстроку в качестве аргумента и возвращает индекс первого совпадения.
```js
string.search(substring);
```
```js
let string =
"I love JavaScript. If you do not love JavaScript what else can you love.";
console.log(string.search("love")); // 2
```
19. `match`: он принимает подстроку или шаблон регулярного выражения в качестве аргумента и возвращает массив, если есть совпадение, если нет, то возвращает ноль. Давайте посмотрим, как выглядит шаблон регулярного выражения. Он начинается с / знака и заканчивается / знаком.
```js
let string = "love";
let patternOne = /love/; //без какого-либо флага
let patternTwo = /love/gi; // g-означает поиск по всему тексту, i - без учета регистра
```
Match syntax
```js
// syntax
string.match(substring);
```
```js
let string =
"I love JavaScript. If you do not love JavaScript what else can you love.";
console.log(string.match("love"));
```
```sh
["love", index: 2, input: "I love JavaScript. If you do not love JavaScript what else can you love.", groups: undefined]
```
```js
let pattern = /love/gi;
console.log(string.match(pattern)); // ["love", "love", "love"]
```
Давайте извлечем числа из текста, используя регулярное выражение. Это не раздел регулярных выражений, не паникуйте, мы рассмотрим регулярные выражения в другом разделе.
```js
let txt =
"In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge";
let regEx = /\d+/;
// d с перенос-символом означает, что d не является нормальным d, вместо этого действует цифра
// + означает одно или несколько цифр,
// если после этого есть g, значит глобальный, ищите везде.
console.log(txt.match(regEx)); // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"]
console.log(txt.match(/\d+/g)); // ["2019", "30", "2020"]
```
20. `repeat()`: он принимает числовой аргумент и возвращает повторную версию строки.
```js
string.repeat(n);
```
```js
let string = "love";
console.log(string.repeat(10)); // lovelovelovelovelovelovelovelovelovelove
```
## Проверка типов данных и приведение
### Проверка типов данных
- Проверка типов данных: чтобы проверить тип данных определенного типа данных, мы используем `typeof` и также меняем один тип данных на другой.
**Пример:**
```js
// Различные типы данных JavaScript
// Давайте объявим разные типы данных
let firstName = "Asabeneh"; // string
let lastName = "Yetayeh"; // string
let country = "Finland"; // string
let city = "Helsinki"; // string
let age = 250; // number, это не мой настоящий возраст, не переживай
let job; // undefined, потому что значение не было присвоено
console.log(typeof "Asabeneh"); // string
console.log(typeof firstName); // string
console.log(typeof 10); // number
console.log(typeof 3.14); // number
console.log(typeof true); // boolean
console.log(typeof false); // boolean
console.log(typeof NaN); // number
console.log(typeof job); // undefined
console.log(typeof undefined); // undefined
console.log(typeof null); // object
```
### Изменение типа данных (Casting)
- Приведение: преобразование одного типа данных в другой тип данных. Мы используем _parseInt()_, _parseFloat()_, _Number()_, _+sign_, _str()_. Когда мы выполняем арифметические операции, строковые числа должны быть сначала преобразованы в целое число или число с плавающей запятой, если нет, это возвращает ошибку.
#### Строка в число
Мы можем преобразовать номер строки в число. Любое число внутри кавычки является строковым числом. Пример номера строки: «10», «5» и т. Д.
Мы можем преобразовать строку в число, используя следующие методы:
- parseInt()
- Number()
- Plus sign(+)
```js
let num = "10";
let numInt = parseInt(num);
console.log(numInt); // 10
```
```js
let num = "10";
let numInt = Number(num);
console.log(numInt); // 10
```
```js
let num = "10";
let numInt = +num;
console.log(numInt); // 10
```
#### Строка в число с плавающей запятой
Мы можем преобразовать число с плавающей запятой в число с плавающей запятой. Любое число с плавающей запятой внутри кавычки является строковым числом с плавающей запятой. Пример числа с плавающей запятой: «9,81», «3,14», «1,44» и т. Д.
Мы можем преобразовать строку с плавающей точкой в число, используя следующие методы:
- parseFloat()
- Number()
- Plus sign(+)
```js
let num = "9.81";
let numFloat = parseFloat(num);
console.log(numFloat); // 9.81
```
```js
let num = "9.81";
let numFloat = Number(num);
console.log(numFloat); // 9.81
```
```js
let num = "9.81";
let numFloat = +num;
console.log(numInt); // 9.81
```
#### Числа с плавающей точкой в целые числа.
Мы можем преобразовать числа с плавающей точкой в целые числа.
Мы используем следующий метод для преобразования float в int:
- parseInt()
```js
let num = 9.81;
let numInt = parseInt(num);
console.log(numInt); // 9
```
🌕 Ты обалденный. Вы только что завершили 2-й день испытаний, и вы в двух шагах от своего пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц.
## 💻 День 2: Упражнения
### Упражнение: Уровень 1
1. Объявите вызов имени переменной и присвойте ему начальное значение **«30 дней JavaScript»**.
2. Напечатайте строку в консоли браузера, используя `console.log()`
3. Напечатайте **length** строки в консоли браузера, используя `console.log()`
4. Измените всю строку на заглавные буквы, используя метод `toUpperCase()`
5. Измените всю строку на строчные буквы, используя метод `toLowerCase()`
6. Вырежьте (нарежьте) первое слово строки, используя метод `substr()` или `substring()`
7. Вырежьте фразу _Days Of JavaScript_ из _30 Days Of JavaScript_.
8. Проверьте, содержит ли строка слово **Script**, используя метод `includes()`
9. Разбейте **строку** на **массив**, используя метод `split()`
10. Разбить строку 30 Days Of JavaScript в пространстве с помощью метода `split()`
11. «Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon» **разбивают** строку на запятую и заменяют ее на массив.
12. Измените 30 Days Of JavaScript на 30 Days Of Python, используя метод `replace()`.
13. Что такое символ в индексе 15 в строке «30 Days Of JavaScript», используйте метод `charAt()`.
14. Что такое код символа J в строке «30 Days Of JavaScript» с использованием `charCodeAt()`
15. Используйте `indexOf`, чтобы определить позицию первого вхождения за 30 Days Of JavaScript
16. Используйте `lastIndexOf`, чтобы определить позицию последнего вхождения в 30 Days Of JavaScript.
17. Используйте `indexOf`, чтобы найти позицию первого вхождения слова **потому что** в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что, потому что это соединение»**
18. Используйте `lastIndexOf`, чтобы найти позицию последнего вхождения слова **потому что** в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что потому что это соединение»**
19. Используйте `search`, чтобы найти позицию первого вхождения слова **потому что** в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что потому что это соединение»**
20. Используйте `trim()`, чтобы удалить, если в начале и конце строки есть конечные пробелы. Например, «30 Days Of JavaScript».
21. Используйте метод `launchWith()` со строкой _30 Days Of JavaScript_, чтобы сделать результат верным
22. Используйте метод `setsWith()` со строкой _30 Days Of JavaScript_, чтобы сделать результат верным
23. Используйте метод `match()`, чтобы найти все за 30 Days Of JavaScript
24. Используйте `concat()` и объедините «30 Days» и «JavaScript» в одну строку «30 Days Of JavaScript»
25. Используйте метод `repeat()`, чтобы напечатать 30 Days Of JavaScript 2 раза
### Упражнение: уровень 2
1. Используя `console.log()`, выведите следующее утверждение.
```sh
The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another.
```
2. Используя `console.log()` распечатайте следующую цитату Матери Терезы.
```sh
"Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead."
```
3. Проверьте, точно ли `typeof` '10' равен 10. Если нет, сделайте его точно равным.
4. Убедитесь, что `parseFloat('9.8')` равен 10, если не равен точно 10.
5. Проверьте, найдено ли 'on' как в Python, так и в жаргоне
6. Я надеюсь, что этот курс не полон жаргона. Проверьте, находится ли _jargon_ в предложении.
7. Сгенерируйте случайное число от 0 до 100 включительно.
8. Генерация случайного числа от 50 до 100 включительно.
9. Сгенерируйте случайное число от 0 до 255 включительно.
10. Получите доступ к символам строки «JavaScript», используя случайное число.
11. Используйте `console.log()` и управляющие символы для печати следующего шаблона.
```js
1 1 1 1 1
2 1 2 4 8
3 1 3 9 27
4 1 4 16 64
5 1 5 25 125
```
12. Используйте `substr`, чтобы вырезать фразу **потому что потому что** в следующем предложении: **'Вы не можете закончить предложение, потому что потому что потому что это соединение'**
### Упражнения: уровень 3
1. «Любовь - лучшая вещь в этом мире. Некоторые нашли свою любовь, а некоторые все еще ищут свою любовь. Подсчитайте количество слов любви в этом предложении.
2. Используйте `match()`, чтобы сосчитать число все потому, что в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что, потому что это соединение»**
3. Очистите следующий текст и найдите наиболее часто встречающееся слова (подсказка, используйте замену и регулярный экспресс).
```js
const sentence =
"%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching";
```
4. Рассчитайте общий годовой доход человека, извлекая цифры из следующего текста. «Он зарабатывает 5000 евро с зарплаты в месяц, годовой бонус в 10000 евро, онлайн-курсы в 15000 евро в месяц».
🎉 ПОЗДРАВЛЯЕМ! 🎉
[<< День 1](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/readMe.md) | [День 3 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md)

BIN
RU/02_Day/day_1_2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

649
RU/03_Day/03_booleans_operators_date.md
Unescape View File

@ -0,0 +1,649 @@
<div align="center">
<h1> 30 Days Of JavaScript</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>Автор:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Январь, 2020</small>
</sub>
</div>
[<< День 2](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/02_Day/02_day_data_types.md) | [Day 4 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/04_Day/04_day_conditionals.md)
![Thirty Days Of JavaScript](../images/banners/day_1_3.png)
- [📔 День 3](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-3)
- [Булевый тип (boolean)](#%d0%91%d1%83%d0%bb%d0%b5%d0%b2%d1%8b%d0%b9-%d1%82%d0%b8%d0%bf-boolean)
- [Пример: логические значения](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80-%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f)
- [Истинные значения](#%d0%98%d1%81%d1%82%d0%b8%d0%bd%d0%bd%d1%8b%d0%b5-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f)
- [Ложные значения](#%d0%9b%d0%be%d0%b6%d0%bd%d1%8b%d0%b5-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f)
- [Undefined](#undefined)
- [Null](#null)
- [Операторы](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b)
- [Операторы присваивания](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b-%d0%bf%d1%80%d0%b8%d1%81%d0%b2%d0%b0%d0%b8%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f)
- [Арифметические Операторы](#%d0%90%d1%80%d0%b8%d1%84%d0%bc%d0%b5%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b)
- [Операторы сравнения](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b-%d1%81%d1%80%d0%b0%d0%b2%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f)
- [Пример: операторы сравнения](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b-%d1%81%d1%80%d0%b0%d0%b2%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f)
- [Логические Операторы](#%d0%9b%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b)
- [Оператор инкремента](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80-%d0%b8%d0%bd%d0%ba%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0)
- [Оператор декремента](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80-%d0%b4%d0%b5%d0%ba%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0)
- [Тернарный операторы](#%d0%a2%d0%b5%d1%80%d0%bd%d0%b0%d1%80%d0%bd%d1%8b%d0%b9-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b)
- [Приоритет оператора](#%d0%9f%d1%80%d0%b8%d0%be%d1%80%d0%b8%d1%82%d0%b5%d1%82-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d0%b0)
- [Методы окна](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4%d1%8b-%d0%be%d0%ba%d0%bd%d0%b0)
- [Метод alert()](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-alert)
- [Метод prompt()](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-prompt)
- [Метод confirm()](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-confirm)
- [Объект Date](#%d0%9e%d0%b1%d1%8a%d0%b5%d0%ba%d1%82-date)
- [Создание объекта времени](#%d0%a1%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d0%b0-%d0%b2%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%b8)
- [Получение года](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b3%d0%be%d0%b4%d0%b0)
- [Получение месяца](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b5%d1%81%d1%8f%d1%86%d0%b0)
- [Получение даты](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%b0%d1%82%d1%8b)
- [Получение дня](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%bd%d1%8f)
- [Получение часов](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d1%87%d0%b0%d1%81%d0%be%d0%b2)
- [Получение минут](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b8%d0%bd%d1%83%d1%82)
- [Получение секунд](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d1%81%d0%b5%d0%ba%d1%83%d0%bd%d0%b4)
- [Получение времени](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b2%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%b8)
- [💻 День 3: Упражнения](#%f0%9f%92%bb-%d0%94%d0%b5%d0%bd%d1%8c-3-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f)
- [Упражнения: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1)
- [Упражнения: уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2)
- [Упражнения: уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3)
# 📔 День 3
## Булевый тип (boolean)
Логический тип данных представляет одно из двух значений: _true_ или _false_. Логическое значение может быть истинным или ложным. Использование этих типов данных будет понятно при запуске оператора сравнения. Любые сравнения возвращают логическое значение, которое является истинным или ложным.
### Пример: логические значения
```js
let isLightOn = true;
let isRaining = false;
let isHungry = false;
let isMarried = true;
let truValue = 4 > 3; // true
let falseValue = 4 < 3; // false
```
Мы согласились с тем, что логические значения являются истинными или ложными.
### Истинные значения
- Все числа (положительные и отрицательные) являются правдивыми, кроме нуля
- Все строки правдивы
- boolean истинное
### Ложные значения
- 0
- 0n
- null
- undefined
- NaN
- the boolean false
- '', "", ``, пустая строка
Нужно хорощо помнить эти истинные и ложные значения. В следующем разделе мы будем использовать их с условиями для принятия решения.
## Undefined
Если мы объявим переменную и не назначим значение, оно будет неопределенным. В дополнение к этому, если функция не возвращает значение, оно будет неопределенным.
```js
let firstName;
console.log(firstName); //не определено, потому что оно еще не присвоено значению
```
## Null
```js
let empty = null;
console.log(empty); // -> null , не имеет значения
```
## Операторы
### Операторы присваивания
Знак равенства в JavaScript - это оператор присваивания. Используется для присвоения переменной.
```js
let firstName = "Asabeneh";
let country = "Finland";
```
Операторы присваивания
![Assignment operators](../images/assignment_operators.png)
### Арифметические Операторы
Арифметические операторы являются математическими операторами.
- Сложение (+): `a + b`
- Вычитание (-): `a - b`
- Умножение (_): `a _ b`
- Деление (/): `a / b`
- Остаток от деления % (%): `a % b`
- Возведение в степень (**): `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
let PI = 3.14;
let radius = 100; // длина в метрах
const gravity = 9.81; // в m/s2
let mass = 72; // в килограммах
const boilingPoint = 100; // температура в °С, температура кипения воды
const bodyTemp = 37; // температура тела в °С
//Рассчитаем площадь круга
const areaOfCircle = PI * radius * radius;
console.log(areaOfCircle); // 314 m
// Давайте посчитаем вес объекта
const weight = mass * gravity;
console.log(weight); // 706.32 N (Newton)
//Конкатенация строк с числами с использованием строковой интерполяции
/*
Температура кипения воды составляет 100 °С.
Температура тела человека составляет 37 °С.
Гравитация земли составляет 9,81 м/с2.
*/
console.log(
`The boiling point of water is ${boilingPoint} oC.\nHuman body temperature is ${bodyTemp} oC.\nThe gravity of earth is ${gravity} m / s2.`
);
```
### Операторы сравнения
В программировании мы сравниваем значения, мы используем операторы сравнения для сравнения двух значений. Мы проверяем, является ли значение больше или меньше или равно другому значению.
![Comparison Operators](../images/comparison_operators.png)
#### Пример: операторы сравнения
```js
console.log(3 > 2); // true, потому что 3 больше 2
console.log(3 >= 2); // true, потому что 3 больше 2
console.log(3 < 2); // false, потому что 3 больше 2
console.log(2 < 3); // true, потому что 2 меньше 3
console.log(2 <= 3); // true, потому что 2 меньше 3
console.log(3 == 2); // false, потому что 3 не равно 2
console.log(3 != 2); // true, потому что 3 не равно 2
console.log(3 == "3"); // true, сравнить только значение
console.log(3 === "3"); // false, сравнить значение и тип данных
console.log(3 !== "3"); // true, сравнить значение и тип данных
console.log(3 !== "3"); // true, сравнить значение и тип данных
console.log(3 != 3); // false, сравнить только значение
console.log(3 !== 3); // false, сравнить значение и тип данных
console.log(0 == false); // true, эквивалент
console.log(0 == ""); // true, эквивалент
console.log(0 == " "); // true, эквивалент
console.log(0 === ""); // false, не совсем то же самое
console.log(0 === false); // false, не совсем то же самое
console.log(1 == true); // true, эквивалент
console.log(1 === true); // false, не совсем то же самое
console.log(undefined == null); // true
console.log(undefined === null); // false
console.log(NaN == NaN); // false, не равный
console.log(NaN === NaN); // false
console.log(typeof NaN); // число
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); // false
console.log("milk".length == "meat".length); // true
console.log("tomato".length == "potato".length); // true
console.log("python".length > "dragon".length); // false
```
Попытайтесь понять приведенные выше сравнения с некоторой логикой. Запоминать без какой-либо логики может быть сложно.
JavaScript - это своего рода проводной язык программирования. Код JavaScript запускается и дает вам результат, но если вы не разбираетесь в нем, это может быть нежелательным результатом.
По практическому правилу, если значение не верно с `==`, оно не будет равно `===`. Использование `===` более безопасно, чем использование `==`. Следующая [ссылка](https://dorey.github.io/JavaScript-Equality-Table/) имеет исчерпывающий список сравнения типов данных.
### Логические Операторы
Следующие символы являются общими логическими операторами: `&&` (амперсанд), `||` (труба) и `!` (отрицание).
- `&&` получает значение `true`, только если два операнда имеют значение `true`.
- `||` становится истинным, любой из операндов верен.
- `!` отрицает истину на ложь, ложь на истину.
```js
//&& Пример оператора амперсанда
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
//! Примеры отрицания
let check = 4 > 3; // true
let check = !(4 > 3); // false
let isLightOn = true;
let isLightOff = !isLightOn; // false
let isMarried = !false; // true
```
### Оператор инкремента
В JavaScript мы используем оператор приращения для увеличения значения, хранящегося в переменной. Приращение может быть до или после приращения. Давайте посмотрим на каждого из них:
1. Преинкремент
```js
let count = 0;
console.log(++count); // 1
console.log(count); // 1
```
2. Пост-инкремент
```js
let count = 0;
console.log(count++); // 0
console.log(count); // 1
```
Мы используем большую часть времени после приращения. По крайней мере, вы должны помнить, как использовать постинкрементный оператор.
### Оператор декремента
В JavaScript мы используем оператор декремента для уменьшения значения, хранящегося в переменной. Декремент может быть до или после декремента. Давайте посмотрим на каждого из них:
1. Предекремент
```js
let count = 0;
console.log(--count); // -1
console.log(count); // -1
```
2. Постдекремента
```js
let count = 0;
console.log(count--); // 0
console.log(count); // -1
```
### Тернарный операторы
Тернарный оператор позволяет записать условие.
Другой способ написания условных выражений - использование Тернарных операторов. Посмотрите на следующие примеры:
```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
```
### Приоритет оператора
Я хотел бы рекомендовать вам прочитать о приоритете оператора из этой [ссылки](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
## Методы окна
### Метод alert()
Как вы видели в самом начале, метод `alert()` отображает окно предупреждения с указанным сообщением и кнопкой OK. Это встроенный метод, и он принимает аргумент.
```js
alert(message);
```
```js
alert("Welcome to 30DaysOfJavaScript");
```
Не используйте слишком много предупреждений, потому что это раздражает, используйте его только для тестирования.
### Метод prompt()
Методы подсказки окна отображают окно подсказки с вводом в вашем браузере, чтобы принять входные значения, и входные данные могут быть сохранены в переменной. Метод `prompt()` принимает два аргумента. Второй аргумент является необязательным.
```js
prompt("required text", "optional text");
```
```js
let number = prompt("Enter number", "number goes here");
console.log(number);
```
### Метод confirm()
Метод `confirm()` отображает диалоговое окно с указанным сообщением, а также кнопки "ОК" и "Отмена".
Окно подтверждения часто используется, чтобы запросить у пользователя разрешение на что-либо. Окно `confirm()` принимает строку в качестве аргумента.
Нажатие "ОК" дает значение `true`, нажатие кнопки "Отмена" дает значение `false`.
```js
const agree = confirm("Are you sure you like to delete? ");
console.log(agree); // результат будет true или false в зависимости от того, что вы нажимаете в диалоговом окне
```
These are not all the window methods we will have a separate section to go deep into window methods.
## Объект Date
Время это важная вещь. Нам нравится знать время определенного действия или события. В JavaScript текущее время и дата создаются с использованием JavaScript Date Object. Объект, который мы создаем с использованием объекта Date, предоставляет множество методов для работы с датой и временем. Методы, которые мы используем для получения информации о дате и времени из значений объекта даты, начинаются со слова _get_, поскольку они предоставляют информацию.
- `getFullYear()`,
- `getMonths()`,
- `getDate()`,
- `getDay()`,
- `getHours()`,
- `getMinutes`,
- `getSeconds()`,
- `getMilliseconds()`,
- `getTime()`,
- `getDay()`
![Date time Object](../images/date_time_object.png)
### Создание объекта времени
Однажды мы создаем объект времени. Объект времени предоставит информацию о времени. Давайте создадим объект времени
```js
const now = new Date();
console.log(now); // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time)
```
Мы создали объект времени, и мы можем получить доступ к любой информации о дате и времени из объекта, используя методы get, которые мы упомянули в таблице.
### Получение года
Давайте извлечем или получим полный объект времени.
```js
const now = new Date();
console.log(now.getFullYear()); // 2020
```
### Получение месяца
Давайте извлечем или получим месяц из объекта времени.
```js
const now = new Date();
console.log(now.getMonth()); // 0, потому, что месяц январь, month(0-11)
```
### Получение даты
Давайте извлечем или получим дату месяца из объекта времени.
```js
const now = new Date();
console.log(now.getDate()); // 4, потому что день месяца 4th, day(0-31)
```
### Получение дня
Давайте извлечем или получим день недели из объекта времени.
```js
const now = new Date();
console.log(now.getDay()); // 6, потому, что день Суббота, который является 5-м днем,
// Получение дня недели в виде числа (0-6)
```
### Получение часов
Давайте извлекать или получать часы из объекта времени.
```js
const now = new Date();
console.log(now.getHours()); // 0, потому, что время 00:56:41
```
### Получение минут
Давайте извлекать или получать минуты из объекта времени.
```js
const now = new Date();
console.log(now.getMinutes()); // 56, потому, что время 00:56:41
```
### Получение секунд
Давайте извлекать или получать секунды из объекта времени.
```js
const now = new Date();
console.log(now.getSeconds()); // 41, потому, что время 00:56:41
```
### Получение времени
Этот метод дает время в миллисекундах, начиная с 1 января 1970 года. Он также известен как время Unix. Мы можем получить время Unix двумя способами:
1. Используя `getTime()`
```js
const now = new Date(); //
console.log(now.getTime()); // 1578092201341, это количество секунд, прошедших с January 1, 1970 to January 4, 2020 00:56:41
```
2. Используя _Date.now()_
```js
const allSeconds = Date.now(); //
console.log(allSeconds); // 1578092201341, это количество секунд, прошедших с January 1, 1970 to January 4, 2020 00:56:41
const timeInSeconds = new Date().getTime();
console.log(allSeconds == timeInSeconds); // true
```
Давайте отформатируем эти значения в удобочитаемом формате времени.
**Пример:**
```js
const now = new Date();
const year = now.getFullYear(); // вернет year
const month = now.getMonth() + 1; // вернет month(0 - 11)
const date = now.getDate(); // вернет date (1 - 31)
const hours = now.getHours(); // вернет number (0 - 23)
const minutes = now.getMinutes(); // вернет number (0 -59)
console.log(`${date}/${month}/${year} ${hours}:${minutes}`); // 4/1/2020 0:56
```
🌕 У вас есть безграничная энергия! Вы только что выполнили 3-й день испытаний, и вы на три шага на пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц.
## 💻 День 3: Упражнения
### Упражнения: Уровень 1
1. Объявите переменные firstName, lastName, страну, город, возраст, isMarried, year, присвойте ей значение и используйте оператор `typeof` для проверки разных типов данных.
2. Проверьте, равен ли тип «10» 10
3. Проверьте, равен ли `parseInt ('9.8')` 10
4. Булево значение равно либо true, либо false.
1. Напишите три утверждения JavaScript, которые обеспечивают значение `true`.
2. Напишите три оператора JavaScript, которые предоставляют значения `false`.
5. Сначала выясните результат следующего выражения сравнения без использования `console.log()`. После того, как вы определите результат, подтвердите его, используя `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. Найдите длину python и jargon и сделайте ложное сравнение.
6. Сначала выясните результат следующих выражений без использования `console.log()`. После того, как вы определите результат, подтвердите его с помощью `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. !(false)
8. !(4 > 3 && 10 < 12)
9. !(4 > 3 && 10 > 12)
10. !(4 === '4')
11. В обоих случаях нет 'on'
7. Используйте объект Date для выполнения следующих действий
    1. Какой сегодня год?
    2. Какой сегодня месяц, как число?
    3. Какая сегодня дата?
    4. Какой сегодня день, как число?
    5. Сколько сейчас часов?
    6. Какие минуты сейчас?
    7. Узнайте количество секунд, прошедших с 1 января 1970 года по настоящее время.
### Упражнения: уровень 2
1. Напишите скрипт, который предложит пользователю ввести основание и высоту треугольника и рассчитать площадь треугольника. (прлощадь = 0.5 x b x h).
```sh
Введите основанеи: 20
Введите высоту: 10
Площадь треугольника 50
```
2. Напишите скрипт, который предложит пользователю ввести сторону a, сторону b и сторону c треугольника и вычислить периметр треугольника. (периметр = a + b + c)
```sh
Введите сторону a: 5
Введите сторону b: 4
Введите сторону c: 3
Периметр треугольника 12
```
3. Получите длину и ширину, используя подсказку, и вычислите площадь прямоугольника (площадь = длина х ширина и периметр прямоугольника (периметр = 2 х (длина + ширина))
4. Получите радиус, используя подсказку, и вычислите площадь круга (площадь = pi x r x r) и окружность круга (c = 2 x pi x r), где pi = 3.14.
5. Рассчитайте наклон, x-пересечение и y-пересечение y = 2x -2
6. Наклон (m = y2-y1 / x2-x1). Найти наклон между точкой (2, 2) и точкой (6,10)
7. Сравните наклон двух приведенных выше вопросов.
8. Рассчитайте значение y (y = x ^ 2 + 6x + 9). Попробуйте использовать разные значения х и выяснить, при каком значении х у 0.
9. Напишите скрипт, который побудит пользователя вводить часы и ставку за час. Рассчитать зарплату человека?
```sh
Введите часы: 40
Введите ставку в час: 28
Ваш еженедельный заработок 1120
```
10. Если длина вашего имени больше 7, скажем, ваше имя длинное, иначе скажем, ваше имя короткое.
11. Сравните длину вашего имени и длину вашей фамилии, и вы должны получить этот вывод.
```js
let firstName = "Asabeneh";
let lastName = "Yetayeh";
```
```sh
Твое имя, Asabeneh длиннее вашей фамилии, Yetayeh
```
12. Объявите две переменные _myAge_ и _yourAge_ и присвойте им начальные значения, myAge и yourAge.
```js
let myAge = 250;
let yourAge = 25;
```
```sh
Я на 225 лет старше тебя.
```
13. Используя подсказку, укажите год рождения пользователя и, если ему исполнилось 18 лет, разрешите ему ехать, если он не скажет пользователю подождать определенное количество лет.
```sh
Введите год рождения: 1995
Вам 25. Вы достаточно взрослый, чтобы водить
Введите год рождения: 2005
Вам 15. Вам будет разрешено водить после 3 лет.
```
14. Напишите скрипт, который предложит пользователю ввести количество лет. Подсчитайте, сколько секунд человек может прожить. Предположим, кто-то живет всего сто лет
```sh
Введите число, в котором вы живете: 100
Вы жили 3153600000 секунд.
```
15. Создайте удобочитаемый формат времени, используя объект Date time
1. YYY-MM-DD HH:mm
2. DD-MM-YYYY HH:mm
3. DD/MM/YYY HH:mm
### Упражнения: уровень 3
1. Создайте удобочитаемый формат времени, используя объект Date time. Час и минута должны быть все время двузначными (7 часов должны быть 07, а 5 минут должны быть 05)
1. YYY-MM-DD HH:mm eg. 20120-01-02 07:05
🎉 ПОЗДРАВЛЯЕМ! 🎉
[<< День 2](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/02_Day/02_day_data_types.md) | [День 4 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/04_Day/04_day_conditionals.md)

351
RU/04_Day/04_day_conditionals.md
Unescape View File

@ -0,0 +1,351 @@
<div align="center">
<h1> 30 Days Of JavaScript</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>Автор:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Январь, 2020</small>
</sub>
</div>
[<< День 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md) | [День 5 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md)
![Thirty Days Of JavaScript](../images/banners/day_1_4.png)
- [📔 День 4](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-4)
- [Условные операторы](#%d0%a3%d1%81%d0%bb%d0%be%d0%b2%d0%bd%d1%8b%d0%b5-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b)
- [if](#if)
- [if else](#if-else)
- [if else if else](#if-else-if-else)
- [Switch](#switch)
- [Тернарный оператор](#%d0%a2%d0%b5%d1%80%d0%bd%d0%b0%d1%80%d0%bd%d1%8b%d0%b9-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80)
- [💻 Упражнения](#%f0%9f%92%bb-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f)
- [Упражнения: уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1)
- [Упражнения: уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2)
- [Упражнения: уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3)
# 📔 День 4
## Условные операторы
Условные операторы используются для принятия решения на основе различных условий.
По умолчанию операторы в скрипте JavaScript выполняются последовательно сверху вниз. Если логика обработки требует этого, последовательный поток выполнения может быть изменен двумя способами:
- Условное выполнение: блок из одного или нескольких операторов будет выполнен, если определенное выражение истинно
- Повторное выполнение: блок из одного или нескольких операторов будет выполняться повторно, если определенное выражение истинно. В этом разделе мы рассмотрим операторы `if`, `else`, `else if`. Здесь будут полезны сравнение и логический оператор, который мы изучили в предыдущих разделах.
Условия могут быть реализованы следующими способами:
- if
- if else
- if else if else
- switch
- ternary operator
### if
В JavaScript и других языках программирования ключевое слово `if` используется, чтобы проверить, выполняется ли условие и выполнить код блока. Чтобы создать условие `if`, нам нужно ключевое слово `if`, условие внутри скобки и блок кода внутри фигурной скобки ({}).
```js
// синтаксис
if (condition) {
//эта часть кода работает для true состояния
}
```
**Пример:**
```js
let num = 3;
if (num > 0) {
console.log(`${num} это положительное число`);
}
// 3 это положительное число
```
```js
let isRaining = true;
if (isRaining) {
console.log("Remember to take your rain coat.");
}
```
Как видно из вышеприведенного условия, 3 больше 0 и является положительным числом. Условие было выполнено, и код блока был выполнен. Однако, если условие ложно, мы не видим результат. То же самое касается второго условия, если isRaining равен `false`, блок `if` не будет выполнен, и мы не увидим вывод. Чтобы увидеть результат ложного условия, у нас должен быть еще один блок, который будет `else`.
### if else
Если условие истинно, первый блок будет выполнен, если нет, будет выполнено условие else.
```js
// синтаксис
if (condition) {
// эта часть кода работает для истинного состояния
} else {
// эта часть кода выполняется для ложного условия
}
```
```js
let num = 3;
if (num > 0) {
console.log(`${num} это положительное число`);
} else {
console.log(`${num} отрицательное число`);
}
// 3 это положительное число
num = -3;
if (num > 0) {
console.log(`${num} это положительное число`);
} else {
console.log(`${num} это отрицательное число`);
}
// -3 это отрицательное число
```
```js
let isRaining = true;
if (isRaining) {
console.log("Тебе нужен плащ от дождя..");
} else {
console.log("Не нужно пальто от дождя.");
}
// Тебе нужен плащ от дождя.
isRaining = false;
if (isRaining) {
console.log("Тебе нужен плащ от дождя..");
} else {
console.log("Не нужно пальто от дождя.");
}
// Не нужно пальто от дождя.
```
Вышеуказанное условие ложно, поэтому был выполнен блок `else`. Как насчет, если наше условие больше двух, мы будем использовать `else if` условия.
### if else if else
В нашей повседневной жизни мы принимаем решения ежедневно. Мы принимаем решение не проверяя одно или два условия, а принимаем решения на основе нескольких условий. Как и в нашей повседневной жизни, программирование также полно условий. Мы используем `else if`, когда у нас есть несколько условий.
```js
// синтаксис
if (condition) {
// код
} else if (condition) {
// код
} else {
// код
}
```
**Пример:**
```js
let a = 0;
if (a > 0) {
console.log(`${a} это положительное число`);
} else if (a < 0) {
console.log(`${a} это отрицательное число`);
} else if (a == 0) {
console.log(`${a} это 0`);
} else {
console.log(`${a} это не число`);
}
```
```js
// if else if else
let weather = "солнечно";
if (weather === "дождливо") {
console.log("Вам нужен плащ от дождя.");
} else if (weather === "облачно") {
console.log("Может быть холодно, тебе нужен пиджак.");
} else if (weather === "солнечно") {
console.log("Выйди свободным.");
} else {
console.log("Не нужно пальто от дождя.");
}
```
### Switch
Переключатель является альтернативой для `if else if else else`.
Оператор `switch` начинается с ключевого слова `switch`, за которым следуют скобки и блок кода. Внутри блока кода у нас будут разные случаи. Case case запускается, если значение в скобках оператора `switch` совпадает с case vale. Перерыв должен закончиться, и он не снижается после того, как условие выполнено. Блок по умолчанию выполняется, если все случаи не удовлетворяют условию.
```js
switch (caseValue) {
case 1:
// код
break;
case 2:
// код
break;
case 3:
// код
default:
// код
}
```
```js
let weather = "облачно";
switch (weather) {
case "дождливо":
console.log("Вам нужен плащ от дождя.");
break;
case "облачно":
console.log("Может быть холодно, тебе нужен пиджак.");
break;
case "солнечно":
console.log("Выйди свободно.");
break;
default:
console.log("Не нужно пальто от дождя.");
}
// Switch больше примеров
let dayUserInput = prompt("Какой сегодня день ?");
let day = dayUserInput.toLowerCase();
switch (day) {
case "понедельник":
console.log("Сегодня понедельник");
break;
case "вторник":
console.log("Сегодня вторник");
break;
case "среда":
console.log("Сегодня среда");
break;
case "четверг":
console.log("Сегодня четверг");
break;
case "пятница":
console.log("Сегодня пятница");
break;
case "суббота":
console.log("Сегодня суббота");
break;
case "воскресенье":
console.log("Сегодня воскресенье");
break;
default:
console.log("Это не день недели.");
}
```
### Тернарный оператор
Другой способ написания условных выражений - использование тернарных операторов. Мы рассмотрели это в других разделах, но мы также должны упомянуть об этом здесь.
```js
let isRaining = true;
isRaining
? console.log("You need a rain coat.")
: console.log("No need for a rain coat.");
```
🌕 Вы необыкновенный и у вас есть замечательный потенциал. Вы только что выполнили четвертый день испытаний и прошли четыре шага на пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц.
## 💻 Упражнения
### Упражнения: уровень 1
1. Получить пользовательский ввод с помощью `prompt("Введите свой возраст:")`. Если пользователю 18 лет или больше, оставьте отзыв: вы достаточно взрослый, чтобы ездить, но если нет, то 18 - отзывайте, чтобы ждать те годы, которые он должен был ждать.
```sh
Введите свой возраст: 30
Вы достаточно взрослый, чтобы водить.
Введите свой возраст: 15
Вам осталось 3 года до вождения.
```
2. Сравните значения myAge и yourAge, используя _if… else_. На основе сравнения журнала для консоли, кто старше (я или вы). Используйте `prompt("Введите свой возраст:")`, чтобы получить возраст в качестве входных данных.
```sh
Введите свой возраст: 30
Ты на 5 лет старше меня.
```
3. Если a больше, чем b, вернуть «a больше, чем b», иначе «a меньше, чем b». Попробуй реализовать в пути
- используя if else
- тернарный оператор.
```js
let a = 4;
let b = 3;
```
```sh
4 больше 3
```
4. Четные числа делятся на 2, а остаток равен нулю. Как проверить, является ли число четным или нет с помощью JavaScript?
```sh
Введите число: 2
2 - четное число
Введите число: 9
9 является нечетным числом.
```
### Упражнения: уровень 2
1. Напишите код, который может дать оценку студентам в соответствии с их оценками:
- 80-100, A
- 70-89, B
- 60-69, C
- 50-59, D
- 0-49, F
2. Проверьте, является ли сезон осенью, зимой, весной или летом.
Если пользовательский ввод:
- сентябрь, октябрь или ноябрь, сезон осень.
- декабрь, январь или февраль, сезон зима.
- март, апрель или май, сезон весна
- июнь, июль или август, сезон лето
3. Проверьте, является ли день выходным или рабочим днем. Ваш сценарий примет день как вход.
```sh
Какой сегодня день? Суббота
Суббота - выходной день.
Какой сегодня день? СубБоТта
Суббота - выходной день.
Какой сегодня день? Пятница
Пятница рабочий день.
Какой сегодня день? ПяТНИца
Пятница рабочий день.
```
### Упражнения: уровень 3
1. Напишите программу, которая сообщает количество дней в месяце.
```sh
Введите месяц: январь
В январе 31 день.
Введите месяц: ЯНВАРЬ
В январе 31 день
Введите месяц: февраль
Февраль имеет 28 дней.
Введите месяц: феВРаль
Февраль имеет 28 дней.
```
🎉 ПОЗДРАВЛЯЕМ ! 🎉
[<< День 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md) | [День 5 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md)

788
RU/05_Day/05_day_arrays.md
Unescape View File

@ -0,0 +1,788 @@
<div align="center">
<h1> 30 Days Of JavaScript</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>Автор:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Январь, 2020</small>
</sub>
</div>
[<< День 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/04_Day/04_day_conditionals.md) | [День 6 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/06_Day/06_day_loops.md)
![День 5](../images/banners/day_1_5.png)
- [📔 День 5](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-5)
- [Массивы](#%d0%9c%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d1%8b)
- [Как создать пустой массив](#%d0%9a%d0%b0%d0%ba-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d1%82%d1%8c-%d0%bf%d1%83%d1%81%d1%82%d0%be%d0%b9-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2)
- [Как создать массив со значениями](#%d0%9a%d0%b0%d0%ba-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d1%82%d1%8c-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2-%d1%81%d0%be-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f%d0%bc%d0%b8)
- [Создание массива с использованием split](#%d0%a1%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d1%81-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5%d0%bc-split)
- [Доступ к элементам массива по индексу](#%d0%94%d0%be%d1%81%d1%82%d1%83%d0%bf-%d0%ba-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0%d0%bc-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d0%bf%d0%be-%d0%b8%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d1%83)
- [Изменение элемента массива](#%d0%98%d0%b7%d0%bc%d0%b5%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0)
- [Методы манипулирования массивом](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4%d1%8b-%d0%bc%d0%b0%d0%bd%d0%b8%d0%bf%d1%83%d0%bb%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%be%d0%bc)
- [Конструктор массива](#%d0%9a%d0%be%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%82%d0%be%d1%80-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0)
- [Creating static values with fill](#creating-static-values-with-fill)
- [Конкатенация массива с использованием concat](#%d0%9a%d0%be%d0%bd%d0%ba%d0%b0%d1%82%d0%b5%d0%bd%d0%b0%d1%86%d0%b8%d1%8f-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d1%81-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5%d0%bc-concat)
- [Получение длины массива](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%bb%d0%b8%d0%bd%d1%8b-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0)
- [Получение индекса элемента в массиве arr](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b8%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%b0-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5-arr)
- [Получение последнего индекса элемента в массиве](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b5%d0%b3%d0%be-%d0%b8%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%b0-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5)
- [Проверка массива](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0)
- [Преобразование массива в строку](#%d0%9f%d1%80%d0%b5%d0%be%d0%b1%d1%80%d0%b0%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d0%b2-%d1%81%d1%82%d1%80%d0%be%d0%ba%d1%83)
- [Объединение элементов массива](#%d0%9e%d0%b1%d1%8a%d0%b5%d0%b4%d0%b8%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0)
- [Элементы массива срезов](#%d0%ad%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d1%81%d1%80%d0%b5%d0%b7%d0%be%d0%b2)
- [Метод сращивания в массиве](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-%d1%81%d1%80%d0%b0%d1%89%d0%b8%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5)
- [Добавление элемента в массив с помощью push](#%d0%94%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-push)
- [Удаление конечного элемента с помощью pop](#%d0%a3%d0%b4%d0%b0%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d0%ba%d0%be%d0%bd%d0%b5%d1%87%d0%bd%d0%be%d0%b3%d0%be-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-pop)
- [Удаление элемента с самого начала](#%d0%a3%d0%b4%d0%b0%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d1%81-%d1%81%d0%b0%d0%bc%d0%be%d0%b3%d0%be-%d0%bd%d0%b0%d1%87%d0%b0%d0%bb%d0%b0)
- [Добавить элемент с начала](#%d0%94%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82-%d1%81-%d0%bd%d0%b0%d1%87%d0%b0%d0%bb%d0%b0)
- [Обратный порядок массивов](#%d0%9e%d0%b1%d1%80%d0%b0%d1%82%d0%bd%d1%8b%d0%b9-%d0%bf%d0%be%d1%80%d1%8f%d0%b4%d0%be%d0%ba-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%be%d0%b2)
- [Сортировка элементов в массиве](#%d0%a1%d0%be%d1%80%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%ba%d0%b0-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5)
- [Массив массивов](#%d0%9c%d0%b0%d1%81%d1%81%d0%b8%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%be%d0%b2)
- [💻 Упражнения](#%f0%9f%92%bb-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f)
- [Упражнения: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1)
- [Упражнения: Уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2)
- [Упражнения: Уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3)
# 📔 День 5
## Массивы
В отличие от переменных, массив может хранить _несколько значений_. Каждое значение в массиве имеет _индекс_, а каждый индекс имеет _ссылку в адресе памяти_. Каждое значение может быть доступно с помощью их _индексов_. Индекс массива начинается с _0_, а последний элемент на единицу меньше длины массива.
Массив - это коллекция различных типов данных, которые упорядочены и изменяемы (модифицируемы). Массив позволяет хранить повторяющиеся элементы и различные типы данных. Массив может быть пустым или иметь разные значения типа данных.
### Как создать пустой массив
В JavaScript мы можем создать массив различными способами. Давайте по-разному создадим массив.
Очень часто используется _const_ вместо _let_ для объявления переменной массива. Если вы используете `const`, это означает, что вы больше не используете это имя.
- Используя конструктор Array
```js
// синтаксис
const arr = Array();
// or
// let arr = new Array()
console.log(arr); // []
```
- Используя квадратные скобки ([])
```js
// синтаксис
// Это наиболее рекомендуемый способ создания пустого списка
const arr = [];
console.log(arr);
```
### Как создать массив со значениями
Массив с начальными значениями. Мы используем свойство _length_, чтобы найти длину массива.
```js
const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // массив из чисел
const fruits = ["banana", "orange", "mango", "lemon"]; // массив из строк, fruits
const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // массив из строк, vegetables
const animalProducts = ["milk", "meat", "butter", "yoghurt"]; // массив из строк, products
const webTechs = ["HTML", "CSS", "JS", "React", "Redux", "Node", "MongDB"]; // массив из веб технологий
const countries = ["Finland", "Denmark", "Sweden", "Norway", "Iceland"]; // массив из строк, countries
// Распечатать массив и его длину
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
```
- Массив может иметь элементы разных типов данных
```js
const arr = [
"Asabeneh",
250,
true,
{ country: "Finland", city: "Helsinki" },
{ skills: ["HTML", "CSS", "JS", "React", "Python"] }
]; // arr содержит разные типы данных
console.log(arr);
```
### Создание массива с использованием split
Как мы видели в предыдущем разделе, мы можем разбить строку в разных позициях и перейти в массив. Давайте посмотрим на примеры ниже.
```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);
// в тексте есть специальные символы, подумайте, как можно получить только слова
// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"]
```
### Доступ к элементам массива по индексу
Мы получаем доступ к каждому элементу в массиве, используя их индекс. Индекс массива начинается с 0. На рисунке ниже четко показано начало индекса.
![arr index](../images/array_index.png)
```js
const fruits = ["banana", "orange", "mango", "lemon"];
let firstFruit = fruits[0]; // мы получаем доступ к первому элементу, используя его индекс
console.log(firstFruit); // banana
secondFruit = fruits[1];
console.log(secondFruit); // orange
let lastFruit = fruits[3];
console.log(lastFruit); // lemon
// Последний индекс можно рассчитать следующим образом
let lastIndex = fruits.length - 1;
lastFruit = fruits[lastIndex];
console.log(lastFruit); // lemon
```
```js
const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // набор чисел
console.log(numbers.length); // => узнать размер массива, который 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"
]; // Список веб-технологий
console.log(webTechs); // все элементы массива
console.log(webTechs.length); // => узнать размер массива, который 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"
]; // Список стран
console.log(countries); // -> все страны в масиве
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"
]; // Список продуктов питания
console.log(shoppingCart); // -> все shoppingCart в массиве
console.log(shoppingCart[0]); // -> Milk
console.log(shoppingCart[7]); // -> Sugar
let lastIndex = shoppingCart.length - 1;
console.log(shoppingCart[lastIndex]); // -> Sugar
```
### Изменение элемента массива
Массив является изменяемым (модифицируемым). После создания массива мы можем изменить содержимое элементов массива.
```js
const numbers = [1, 2, 3, 4, 5];
numbers[0] = 10; // изменение 1 на индекс 0 до 10
numbers[1] = 20; // изменение 2 на индекс 1 до 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"; // Замена Albania на Afghanistan
let lastIndex = countries.length - 1;
countries[lastIndex] = "Korea"; // Замена Kenya на Korea
console.log(countries);
```
```sh
["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"]
```
### Методы манипулирования массивом
Существуют разные методы манипулирования массивом. Вот некоторые из доступных методов для работы с массивами: _Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_
#### Конструктор массива
Массив: для создания массива.
```js
const arr = Array(); // создает пустой массив
console.log(arr);
const eightEmptyValues = Array(8); // он создает восемь пустых значений
console.log(eightEmptyValues); // [empty x 8]
```
#### Creating static values with fill
fill: Fill all the array elements with a static value
```js
const arr = Array(); // создает пустой массив
console.log(arr);
const eightXvalues = Array(8).fill("X"); // он создает восемь значений элементов, заполненных 'X'
console.log(eightXvalues); // ['X', 'X','X','X','X','X','X','X']
const eight0values = Array(8).fill(0); // он создает восемь значений элементов, заполненных '0'
console.log(eight0values); // [0, 0, 0, 0, 0, 0, 0, 0]
const four4values = Array(4).fill(4); // он создает 4 значения элемента, заполненные '4'
console.log(four4values); // [4, 4, 4, 4]
```
#### Конкатенация массива с использованием concat
`concat`: объединение двух массивов.
```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"]; // массив из fruits
const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // массив из vegetables
const fruitsAndVegetables = fruits.concat(vegetables); // объединение двух массивов
console.log(fruitsAndVegetables);
```
```sh
["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"]
```
#### Получение длины массива
`length`: чтобы узнать размер массива
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // -> 5 это размер массива
```
#### Получение индекса элемента в массиве arr
`indexOf`: проверить, существует ли элемент в массиве. Если он существует, он возвращает индекс, иначе он возвращает -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
```
Проверьте элемент, если он существует в массиве.
- Проверьте элементы в списке
```js
// давайте проверим, существует ли banana в массиве
const fruits = ["banana", "orange", "mango", "lemon"];
let index = fruits.indexOf("banana"); // 0
if (index != -1) {
console.log("Этот фрукт существует в массиве");
} else {
console.log("Этот фрукт не существует в массиве");
}
// Этот фрукт существует в массиве
// мы можем использовать также тернарный оператор здесь
index != -1
? console.log("Этот фрукт существует в массиве")
: console.log("Этот фрукт не существует в массиве");
// давайте проверим, существует ли в массиве avocado
let indexOfAvocado = fruits.indexOf("avocado"); // -1, если элемент не найден, индекс -1
if (indexOfAvocado != -1) {
console.log("Этот фрукт существует в массиве");
} else {
console.log("Этот фрукт не существует в массиве");
}
// Этот фрукт не существует в массиве
```
#### Получение последнего индекса элемента в массиве
`lastIndexOf`: отдает позицию последнего элемента в массиве. Если он существует, он возвращает индекс, иначе он возвращает -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` в себя: чтобы проверить, существует ли элемент в массиве. Если он существует, он возвращает истину, иначе он возвращает ложь.
```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"
]; // Список веб-технологий
console.log(webTechs.includes("Node")); // true
console.log(webTechs.includes("C")); // false
```
#### Проверка массива
`Array.isArray`: чтобы проверить, является ли тип данных массивом
```js
const numbers = [1, 2, 3, 4, 5];
console.log(Array.isArray(numbers)); // true
const number = 100;
console.log(Array.isArray(number)); // false
```
#### Преобразование массива в строку
`toString`: преобразовывает массив в строку
```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
```
#### Объединение элементов массива
`join`: используется для соединения элементов массива, аргумент, переданный в методе join, будет объединен в массив и возвращен в виде строки. По умолчанию он соединяется запятой, но мы можем передать другой строковый параметр, который можно объединить между элементами.
```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"
]; // Список веб-технологий
console.log(webTechs.join()); // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB"
console.log(webTechs.join(" # ")); // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB"
```
#### Элементы массива срезов
`slice`: вырезает несколько предметов из диапазона.
Требуется два параметра: начальная и конечная позиция. Это не включает в себя конечную позицию.
```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
```
#### Метод сращивания в массиве
`splice`: требуется три параметра: начальная позиция, количество удалений и количество добавляемых элементов.
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.splice()); // -> удалить все предметы
```
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.splice(0, 1)); // удалить первый элемент
```
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.splice(3, 3, 6, 7, 8)); // -> [1, 2, 3, 6, 7, 8] // удаляет два элемента и заменяет три
```
#### Добавление элемента в массив с помощью push
`push`: добавление элемента в конце. Чтобы добавить элемент в конец существующего массива, мы используем метод `push`.
```js
// синтаксис
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(); // -> убрать один предмет с конца
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']
```
#### Удаление конечного элемента с помощью pop
`pop`: удаление элемента в конце.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.pop(); // -> убрать один предмет с конца
console.log(numbers); // -> [1,2,3,4]
```
#### Удаление элемента с самого начала
`shift`: удаление одного элемента массива в начале массива.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.shift(); // -> удаление одного элемента с начала
console.log(numbers); // -> [2,3,4,5]
```
#### Добавить элемент с начала
`unshift`: добавление элемента массива в начало массива.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0); // -> добавить один элемент с начала
console.log(numbers); // -> [0,1,2,3,4,5]
```
#### Обратный порядок массивов
`reverse`: обратный порядок массива.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // -> обратный порядок массива
console.log(numbers); // [5, 4, 3, 2, 1]
numbers.reverse();
console.log(numbers); // [1, 2, 3, 4, 5]
```
#### Сортировка элементов в массиве
`sort`: расположить элементы массива в порядке возрастания. Сортировка принимает функцию обратного вызова, мы увидим, как мы используем сортировку с функцией обратного вызова в следующих разделах.
```js
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB"
];
webTechs.sort();
console.log(webTechs); // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"]
webTechs.reverse(); // после сортировки мы можем изменить это
console.log(webTechs); // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"]
```
### Массив массивов
Массив может хранить различные типы данных, включая сам массив. Давайте создадим массив массивов
```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"]
```
🌕Вы прилежны, и вы уже многого достигли. Вы только что завершили 5-й день испытаний, и вы на 5 шагов приблизились к своему пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц.
## 💻 Упражнения
### Упражнения: Уровень 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. Объявите массив _empty_;
2. Объявить массив с более чем 5 количеством элементов
3. Найдите длину вашего массива
4. Получить первый элемент, средний элемент и последний элемент массива
5. Объявите массив с именем _mixedDataTypes_, поместите различные типы данных в ваш массив и найдите длину массива. Вы должны быть размером больше 5
6. Объявите имя переменной массива _itCompanies_ и присвойте начальные значения Facebook, Google, Microsoft, Apple, IBM, Oracle и Amazon
7. Напечатайте массив, используя `console.log()`
8. Распечатайте количество компаний в массиве
9. Распечатать первую компанию, среднюю и последнюю компанию
10. Распечатайте каждую компанию
11. Измените название каждой компании на заглавные по одному и напечатайте их
12. Распечатайте массив как предложение: Facebook, Google, Microsoft, Apple, IBM, Oracle и Amazon являются крупными ИТ-компаниями.
13. Проверьте, существует ли определенная компания в массиве _itCompanies_. Если она существует, верните компанию, иначе верните компанию, которая не найдена
14. Отфильтруйте компании, которые имеют более одного «o» без метода фильтра
15. Сортировать массив с помощью метода `sort()`
16. Обратный массив, используя метод `reverse()`
17. Вырежьте первые 3 компании из массива
18. Вырежьте последние 3 компании из массива
19. Вырежьте середину ИТ-компании или компаний из массива
20. Удалить первую IT-компанию из массива
21. Уберите среднюю ИТ-компанию или компании из массива
22. Удалить последнюю ИТ-компанию из массива
23. Удалить все ИТ-компании
### Упражнения: Уровень 2
1. Создайте отдельный файл _country.js_ и сохраните массив стран в этот файл, создайте отдельный файл _web_techs.js_ и сохраните массив _webTechs_ в этом файле. Доступ к обоим файлам в файле _main.js_
2. Сначала удалите все функции и измените строку на массив и посчитайте количество слов в массиве
```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
```
3. В следующей корзине добавить, удалить, изменить элементы
```js
const shoppingCart = ["Milk", "Coffee", "Tea", "Honey"];
```
- добавьте 'Meat' в начале вашей корзины, если оно еще не добавлено
- добавьте sugar в конец вашей корзины, если он еще не добавлен
- Удалить 'Honey', если у вас аллергия на мед
- изменить чай на 'Green Tea'
4. В массиве стран проверьте, существует ли в массиве 'Ethiopia', напечатайте 'Ethiopia'. Если его нет, добавьте в список стран.
5. В массиве webTechs проверьте, существует ли в массиве Sass, и если он существует, выведите «Sass - это препроцесс CSS». Если он не существует, добавьте Sass в массив и распечатайте массив.
6. Объедините следующие две переменные и сохраните их в переменной 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"]
```
### Упражнения: Уровень 3
1. Ниже приведен массив из 10 студентов в возрасте:
```js
const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24];
```
- Отсортировать массив и найти минимальный и максимальный возраст
- Найти средний возраст (один средний или два средних, разделенные на два)
- Найти средний возраст (все предметы, поделенные на количество предметов)
- Найти диапазон возрастов (максимум минус мин)
- Сравните значения (минимум - среднее) и (максимум - среднее), используйте метод `abs()`
1. Разделите первые десять стран из [массива стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
2. Найдите среднюю страну (страны) в [массиве стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
3. Разделите массив стран на два равных массива, если он четный. Если массив стран не является четным, еще одна страна для первой половины.
🎉 ПОЗДРАВЛЯЕМ ! 🎉
[<< День 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/04_Day/04_day_conditionals.md) | [День 6 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/06_Day/06_day_loops.md)

443
RU/06_Day/06_day_loops.md
Unescape View File

@ -0,0 +1,443 @@
<div align="center">
<h1> 30 Days Of JavaScript</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>Автор:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Январь, 2020</small>
</sub>
</div>
[<< День 5](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md) | [День 7 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/07_Day/07_day_functions.md)
![Day 5](../images/banners/day_1_6.png)
- [📔 День 6](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-6)
- [Циклы](#%d0%a6%d0%b8%d0%ba%d0%bb%d1%8b)
- [Цикл for](#%d0%a6%d0%b8%d0%ba%d0%bb-for)
- [Цикл while](#%d0%a6%d0%b8%d0%ba%d0%bb-while)
- [Цикл do while](#%d0%a6%d0%b8%d0%ba%d0%bb-do-while)
- [Цикл for of](#%d0%a6%d0%b8%d0%ba%d0%bb-for-of)
- [break](#break)
- [continue](#continue)
- [💻 Упражнения: День 6](#%f0%9f%92%bb-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%94%d0%b5%d0%bd%d1%8c-6)
- [Упражнения: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1)
- [Упражнения: Уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2)
- [Упражнения: Уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3)
# 📔 День 6
## Циклы
Большинство действий, которые мы делаем в жизни, полны повторений. Представьте себе, если я попрошу вас распечатать от 0 до 100, используя `console.log()`. Для реализации этой простой задачи может потребоваться от 2 до 5 минут, такая утомительная и повторяющаяся задача может быть выполнена с помощью цикла.
В языках программирования для выполнения повторяющихся задач мы используем разные виды циклов. Следующие примеры представляют собой наиболее часто используемые циклы.
### Цикл for
```js
// Структура цикла for
for(initialization, condition, increment/decrement){
// код идет здесь
}
```
```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"]
```
Добавление всех элементов в массив
```js
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum = sum + numbers[i]; // можно сократить: sum += numbers[i]
}
console.log(sum); // 15
```
Создание нового массива на основе существующего массива
```js
const numbers = [1, 2, 3, 4, 5];
const newArr = [];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
newArr.push(i * i);
}
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
```js
let i = 0;
while (i <= 5) {
console.log(i);
i++;
}
// 0 1 2 3 4 5
```
### Цикл do while
```js
let i = 0;
do {
console.log(i);
i++;
} while (i <= 5);
// 0 1 2 3 4 5
```
### Цикл for of
Мы используем для цикла для массивов. Это очень удобный способ перебора массива, если мы не заинтересованы в индексе.
```js
for (const element of arr) {
// код идет здесь
}
```
```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
}
// добавление всех чисел в массиве
let sum = 0;
for (const num of numbers) {
sum += sum + num; // можно также сократить, как это: sum += num
}
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]); // получить только первую букву каждого элемента, 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
контент будет добавлен в ближайшее время
### continue
контент будет добавлен в ближайшее время
🌕 Ты такой смелый, что дошел так далеко. Теперь вы получили возможность автоматизировать повторяющиеся и утомительные задачи. Вы только что завершили 6-й день испытаний, и вы на 6 ступенек на пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц.
## 💻 Упражнения: День 6
### Упражнения: Уровень 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. Выполните итерацию от 0 до 10 с помощью цикла `for`, сделайте то же самое с помощью циклов `while` и `do while`
2. Итерируйте 10 к 0, используя цикл `for`, cделайте то же самое, используя цикл `while` и `do while`
3. Итерируйте от 0 до n, используя цикл `for`
4. Напишите цикл, который создает следующий шаблон, используя `console.log()`:
```js
#
##
###
####
#####
######
#######
```
5. Используйте цикл для печати следующего шаблона:
```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. Используя цикл, напечатайте следующий шаблон
```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. Используйте цикл для перебора от 0 до 100 и печати только четных чисел.
8. Используйте цикл для итерации от 0 до 100 и выведите только нечетные числа
9. Используйте цикл для итерации от 0 до 100 и печатайте только простые числа
10. Используйте цикл для итерации от 0 до 100, распечатайте и распечатайте сумму всех чисел.
```sh
Сумма всех чисел 5050.
```
11. Используйте цикл `for` для итерации от 0 до 100 и выведите сумму всех четных чисел и сумму всех коэффициентов.
```sh
The sum of all evens is 2550. And the sum of all odds is 2500.
```
12. Используйте цикл `for` для итерации от 0 до 100 и выведите сумму всех четных чисел и сумму всех шансов. Вывести сумму четных и сумму шансов в виде массива
```sh
[2550, 2500]
```
13. Разработайте небольшой скрипт, который генерирует массив из 5 случайных чисел
14. Разработайте небольшой скрипт, который генерирует массив из 5 случайных чисел, числа должны быть уникальными
15. Разработайте небольшой скрипт, который генерирует случайный идентификатор из шести символов:
```sh
5j2khz
```
### Упражнения: Уровень 2
1. Разработайте небольшой скрипт, который генерирует произвольное количество символов случайного идентификатора:
```sh
fe3jo1gl124g
```
```sh
xkqci4utda1lmbelpkm03rba
```
2. Напишите скрипт, который генерирует случайное шестнадцатеричное число
```sh
'#ee33df'
```
3. Напишите скрипт, который генерирует случайное число цветов RGB.
```sh
rgb(240,180,80)
```
4. Используя вышеуказанный массив стран, создайте следующий новый массив.
```sh
["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]
```
5. Используя приведенный выше массив стран, создайте массив для длины стран.
```sh
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
```
6. Используйте массив стран для создания следующего массива массивов:
```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],
['Japan', 'JAP', 5],
['Kenya', 'KEN', 5]
]
```
7. В приведенном выше массиве стран проверьте, существует ли страна или страны, содержащие слово 'land'. Если есть страны, содержащие 'land', выведите ее в виде массива. Если нет страны, содержащей слово 'land', выведите «All these are countries without land».
```sh
['Finland', 'Iceland']
```
8. В приведенном выше массиве стран проверьте, существует ли страна или страны, заканчивающиеся на «ia». Если есть страны, оканчивающиеся на, распечатайте его, как массив. Если нет страны, содержащей слово «ai», выведите «Эти страны заканчиваются без ia».
```sh
['Albania', 'Bolivia','Ethiopia']
```
9. Используя приведенный выше массив стран, найдите страну, содержащую наибольшее количество символов.
```sh
Ethiopia
```
10. Используя приведенный выше массив стран, найдите страну, содержащую всего 5 символов.
```sh
['Japan', 'Kenya']
```
11. Найдите самое длинное слово в массиве webTechs.
12. Используйте webTechs для создания следующего массива массивов:
```sh
[["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]]
```
13. Приложение, созданное с использованием MongoDB, Express, React и Node, называется стеком MERN. Создайте аббревиатуру MERN с помощью массива mernStack.
14. Итерируйте по массиву, `["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"]`, используя цикл `for` или цикл `for of` печатайте из предметов.
15. Это массив фруктов `['banana', 'orange', 'mango', 'lemon']` измените порядок, используя цикл, без использования обратного метода.
16. Распечатайте все элементы массива, как показано ниже.
```js
const fullStack = [
["HTML", "CSS", "JS", "React"],
["Node", "Express", "MongoDB"]
];
```
```sh
HTML
CSS
JS
REACT
NODE
EXPRESS
MONGODB
```
### Упражнения: Уровень 3
1. Скопируйте массив стран (избегайте мутаций)
2. Массивы изменчивы. Создайте копию массива, которая не изменяет оригинал. Сортировать скопированный массив и сохранить в переменной _sortedCountries_
3. Отсортируйте массив `webTechs` и массив `mernStack`
4. Извлеките все страны содержащие слово 'land' в [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив
5. Найдите страну, содержащую наибольшее количество символов в [массиве стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
6. Извлеките все страны содержащие слово 'land' from the [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив
7. Извлеките все страны, содержащие только четыре символа из [массива стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив
8. Извлеките все страны, содержащие два или более слов из [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив
9. Разверните [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и примените метод capitalize для каждой страны, храня его в виде массива
🎉 ПОЗДРАВЛЯЕМ ! 🎉
[<< День 5](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md) | [День 7 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/07_Day/07_day_functions.md)

615
RU/README.md
Unescape View File

@ -0,0 +1,615 @@
<div align="center">
<h1> 30 Days Of JavaScript</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>Автор:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Январь, 2020</small>
</sub>
</div>
[День 2 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/02_Day/02_day_data_types.md)
![Thirty Days Of JavaScript](./images/day_1_1.png)
- [День 1](#%d0%94%d0%b5%d0%bd%d1%8c-1)
- [Вступление](#%d0%92%d1%81%d1%82%d1%83%d0%bf%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5)
- [Требования](#%d0%a2%d1%80%d0%b5%d0%b1%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f)
- [Настройка](#%d0%9d%d0%b0%d1%81%d1%82%d1%80%d0%be%d0%b9%d0%ba%d0%b0)
- [Установка Node.js](#%d0%a3%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%ba%d0%b0-nodejs)
- [Браузер](#%d0%91%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80)
- [Установка Google Chrome](#%d0%a3%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%ba%d0%b0-google-chrome)
- [Открытие Google Chrome Console](#%d0%9e%d1%82%d0%ba%d1%80%d1%8b%d1%82%d0%b8%d0%b5-google-chrome-console)
- [Написание кода на консоли браузера](#%d0%9d%d0%b0%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d0%b5-%d0%ba%d0%be%d0%b4%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%be%d0%bd%d1%81%d0%be%d0%bb%d0%b8-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%b0)
- [Console.log](#consolelog)
- [Console.log with multiple arguments](#consolelog-with-multiple-arguments)
- [Комментарии](#%d0%9a%d0%be%d0%bc%d0%bc%d0%b5%d0%bd%d1%82%d0%b0%d1%80%d0%b8%d0%b8)
- [Синтаксис](#%d0%a1%d0%b8%d0%bd%d1%82%d0%b0%d0%ba%d1%81%d0%b8%d1%81)
- [Арифметика](#%d0%90%d1%80%d0%b8%d1%84%d0%bc%d0%b5%d1%82%d0%b8%d0%ba%d0%b0)
- [Редактор кода](#%d0%a0%d0%b5%d0%b4%d0%b0%d0%ba%d1%82%d0%be%d1%80-%d0%ba%d0%be%d0%b4%d0%b0)
- [Установка Visual Studio Code](#%d0%a3%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%ba%d0%b0-visual-studio-code)
- [Как использовать VS Code](#%d0%9a%d0%b0%d0%ba-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d1%8c-vs-code)
- [Добавление JavaScript на веб-страницу](#%d0%94%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-javascript-%d0%bd%d0%b0-%d0%b2%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d1%83)
- [Встроенный скрипт](#%d0%92%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82)
- [Внутренний скрипт](#%d0%92%d0%bd%d1%83%d1%82%d1%80%d0%b5%d0%bd%d0%bd%d0%b8%d0%b9-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82)
- [Внешний скрипт](#%d0%92%d0%bd%d0%b5%d1%88%d0%bd%d0%b8%d0%b9-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82)
- [Несколько внешних скриптов](#%d0%9d%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%b2%d0%bd%d0%b5%d1%88%d0%bd%d0%b8%d1%85-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82%d0%be%d0%b2)
- [Введение в типы данных](#%d0%92%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b2-%d1%82%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85)
- [Число](#%d0%a7%d0%b8%d1%81%d0%bb%d0%be)
- [Строка](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b0)
- [Пример](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80)
- [Булевый (логический) тип «boolean»](#%d0%91%d1%83%d0%bb%d0%b5%d0%b2%d1%8b%d0%b9-%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b9-%d1%82%d0%b8%d0%bf-%c2%abboolean%c2%bb)
- [Пример](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80-1)
- [Undefined](#undefined)
- [Null](#null)
- [Проверка типов данных](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85)
- [Комментарии](#%d0%9a%d0%be%d0%bc%d0%bc%d0%b5%d0%bd%d1%82%d0%b0%d1%80%d0%b8%d0%b8-1)
- [Переменные](#%d0%9f%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5)
- [Примеры: Переменные](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-%d0%9f%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5)
- [💻 День 1: Упражнения](#%f0%9f%92%bb-%d0%94%d0%b5%d0%bd%d1%8c-1-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f)
# День 1
## Вступление
**Поздравляем** с решением принять участие в 30-дневном челендже по программированию на JavaScript. В этом задании вы изучите все, что вам нужно для того, чтобы стать программистом на JavaScript, и вообще все концепции программирования. В конце конкурса вы получите сертификат 30DaysOfJavaScript. Присоединяйтесь к [группе телеграмм](https://t.me/ThirtyDaysOfJavaScript).
**Задача 30DaysOfJavaScript** - руководство для начинающих и опытных разработчиков JavaScript. Добро пожаловать в JavaScript. Мне нравится использовать и преподавать JavaScript, и я надеюсь, что вы это сделаете. JavaScript - это язык браузера.
В этом пошаговом руководстве вы изучите JavaScript, самый популярный язык программирования в истории человечества.
Вы используете JavaScript **_для добавления интерактивности на веб-сайты, для разработки мобильных приложений, настольных приложений, игр_**, и в настоящее время JavaScript можно использовать для **_машинного обучения_** и **_AI_**.
**_JavaScript (JS)_** вырос в популярности в последние годы и был ведущим языком программирования в течение четырех лет подряд и является наиболее используемым языком программирования на Github.
## Требования
Для выполнения этой задачи не требуется предварительное знание программирования. Вам нужно только:
1. Мотивация
2. Компьютер
3. Интернет
4. Браузер
5. Редактор кода
## Настройка
Я считаю, что у вас есть мотивация и сильное желание быть разработчиком, компьютер и Интернет. Если у вас есть это, то у вас есть всё =).
### Установка Node.js
Возможно, вам это не нужно прямо сейчас, но может понадобиться позже. Устанавить [node.js](https://nodejs.org/en/).
![Node download](images/download_node.png)
После загрузки дважды щелкните и установите
![Install node](images/install_node.png)
Мы можем проверить, установлен ли узел на нашем локальном компьютере, открыв терминал устройства или командную строку.
```sh
asabeneh $ node -v
v12.14.0
```
Я использую версию node 12.14.0, которая является рекомендуемой версией узла.
### Браузер
Есть много браузеров там. Тем не менее, я настоятельно рекомендую Google Chrome.
#### Установка Google Chrome
Установите [google chrome](https://www.google.com/chrome/), если у вас его еще нет. Мы можем написать небольшой код JavaScript в консоли браузера, но мы не используем консоль браузера для разработки приложений.
![Google Chrome](images/google_chrome.png)
#### Открытие Google Chrome Console
Вы можете открыть Google Chrome, нажав три точки в верхнем правом углу браузера Chrome или воспользовавшись ярлыком. Я предпочитаю использовать ярлыки.
![Opening chrome](images/opening_developer_tool.png)
Чтобы открыть консоль Chrome с помощью горячих клавиш.
```sh
Mac
Command+Option+I
Windows:
Ctl+Shift+I
```
![Opening console](images/opening_chrome_console_shortcut.png)
После того, как вы откроете консоль Google Chrome, попробуйте изучить отмеченные кнопки. Мы будем проводить большую часть времени на консоли. Консоль - это место, куда идет ваш код JavaScript. Движок Google Console V8 изменяет ваш код JavaScript на машинный код.
Давайте напишем код JavaScript на консоли Google Chrome:
![write code on console](./images/js_code_on_chrome_console.png)
#### Написание кода на консоли браузера
Мы можем написать любой код JavaScript на консоли Google или любой консоли браузера. Однако для решения этой проблемы мы сосредоточимся только на консоли Google Chrome. Откройте консоль, используя:
```sh
Mac
Command+Option+I
Windows:
Ctl+Shift+I
```
##### Console.log
Чтобы написать наш первый код JavaScript, мы использовали встроенную функцию `console.log()`. Мы передали аргумент в качестве входных данных, и функция отображает вывод. Мы передали 'Hello, World' в качестве входных данных или аргумента в функцию `console.log()`.
```js
console.log("Hello, World!");
```
##### Console.log with multiple arguments
`console.log(param1, param2, param3)`, может принимать несколько аргументов.
![console log multiple arguments](./images/console_log_multipl_arguments.png)
```js
console.log("Hello", "World", "!");
console.log("HAPPY", "NEW", "YEAR", 2020);
console.log("Welcome", "to", 30, "Days", "Of", "JavaScript");
```
Как вы можете видеть из приведенного выше фрагмента кода, `console.log()` может принимать несколько аргументов.
Поздравляем! Вы написали свой первый код JavaScript, используя `console.log()`.
##### Комментарии
Мы добавляем комментарии к нашему коду. Комментарии очень важны, чтобы сделать код более читабельным и оставить комментарии в нашем коде. JavaScript не выполняет часть комментариев нашего кода. Любой текст, начинающийся с `//` в JavaScript, является комментарием или что-то в этом роде `/* */` является комментарием.
**Пример: Однострочный комментарийt**
```js
// Это первый комментарий
// Это второй комментарий
// Я однострочный комментарий
```
**Пример: Многострочный комментарий**
```js
/*
Это многострочный комментарий
Многострочные комментарии могут занимать несколько строк
JavaScript - это язык Интернета
*/
```
##### Синтаксис
JavaScript это язык программирования. В результате он имеет свой синтаксис, как и другие языки программирования. Если мы не напишем синтаксис, понятный JavaScript, это вызовет различные типы ошибок. Мы рассмотрим различные виды ошибок JavaScript позже. А пока давайте посмотрим на синтаксические ошибки.
![Error](images/raising_syntax_error.png)
Я сделал преднамеренную ошибку. В результате консоль вызывает синтаксическую ошибку. На самом деле, синтаксис очень информативен. Он сообщает, какую ошибку мы допустили. Прочитав руководство по обратной связи об ошибках, мы можем исправить синтаксис и устранить проблему. Процесс выявления и удаления ошибок из программы называется отладкой. Давайте исправим ошибки:
```js
console.log("Hello, World!");
console.log("Hello, World!");
```
До сих пор мы видели, как отображать текст с помощью `console.log()`. Если мы печатаем текст или строку с помощью `console.log()`, текст должен находиться в одинарных, двойных или обратных кавычках.
**Пример:**
```js
console.log("Hello, World!");
console.log("Hello, World!");
console.log(`Hello, World!`);
```
#### Арифметика
Теперь давайте попрактикуемся в написании кодов JavaScript с помощью `console.log()` в консоли Google Chrome для числовых типов данных.
В дополнение к тексту мы также можем выполнять математические вычисления с использованием JavaScript. Давайте сделаем следующие простые вычисления.
![Arithmetic](images/arithmetic.png)
```js
console.log(2 + 3); // Сложение
console.log(3 - 2); // Вычитание
console.log(2 * 3); // Умножение
console.log(3 / 2); // Разделение
console.log(3 % 2); // Модуль - поиск остатка
console.log(3 ** 2); // Экспоненциальный
```
### Редактор кода
Мы можем написать наш код в консоли браузера, но это не будет работать для больших проектов. В реальной рабочей среде разработчики используют разные редакторы кода для написания своих кодов. В этом 30-дневном челендже JavaScript мы будем использовать визуальный Visual Studio Code.
#### Установка Visual Studio Code
VS Code - это очень популярный текстовый редактор с открытым исходным кодом. Я бы рекомендовал [скачать](https://code.visualstudio.com/) VS Code, но если вы поддерживаете другие редакторы, не стесняйтесь использовать то, что у вас есть.
![Vscode](images/vscode.png)
Если вы установили код VS Code, давайте начнем использовать его.
#### Как использовать VS Code
Откройте код VS Code, дважды щелкнув значок VS Code. Когда вы откроете его, вы получите такой интерфейс. Попробуйте взаимодействовать с помеченными значками.
![Vscode ui](./images/vscode_ui.png)
![Vscode add project](./images/adding_project_to_vscode.png)
![Vscode open project](./images/opening_project_on_vscode.png)
![script file](images/scripts_on_vscode.png)
![running script](./images/running_script.png)
![coding running](./images/launched_on_new_tab.png)
## Добавление JavaScript на веб-страницу
JavaScript можно добавить на веб-страницу тремя различными способами:
- **_Встроенный скрипт_**
- **_Внутренний скрипт_**
- **_Внешний скрипт_**
- **_Несколько внешних скриптов_**
В следующих разделах показаны различные способы добавления кода JavaScript на вашу веб-страницу.
### Встроенный скрипт
Создайте папку на рабочем столе и назовите ее `30DaysOfJS` или в любом месте и создайте файл **_index.html_** в папке проекта. Затем вставьте следующий код и откройте его в браузере, либо в [Chrome](https://www.google.com/chrome/).
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript: Встроенный скрипт</title>
</head>
<body>
<button onclick="alert('Добро пожаловать на 30 дней JavaScript!')">
Нажми на меня
</button>
</body>
</html>
```
Теперь вы написали свой первый встроенный скрипт. Мы можем создать всплывающее сообщение с предупреждением, используя встроенную функцию `alert()`.
### Внутренний скрипт
Внутренний скрипт может быть записан в `head` или `body`, но предпочтительно поместить его в `body` HTML-документа.
Во-первых, давайте напишем в верхней части страницы.
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript: Внутренний скрипт</title>
<script>
console.log("Добро пожаловать на 30 дней JavaScript");
</script>
</head>
<body></body>
</html>
```
Так мы пишем внутренний скрипт большую часть времени. Написание кода JavaScript в разделе `body` является наиболее предпочтительным местом. Откройте консоль браузера, чтобы увидеть вывод `console.log()`
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript: Внутренний скрипт</title>
</head>
<body>
<button onclick="alert('Добро пожаловать на 30 дней JavaScript!');">
Нажми на меня
</button>
<script>
console.log("Добро пожаловать на 30 дней JavaScript");
</script>
</body>
</html>
```
Откройте консоль браузера, чтобы увидеть вывод `console.log()`
![js code from vscode](./images/js_code_vscode.png)
### Внешний скрипт
Подобно внутреннему сценарию, ссылка на внешний сценарий может быть в `head` или `body`, но предпочтительно помещать ее в `body`.
Во-первых, мы должны создать внешний файл JavaScript с расширением `.js`. Любой файл JavaScript заканчивается на `.js`. Создайте файл `introduction.js` внутри директории вашего проекта, напишите следующий код и подключите этот файл `.js` внизу `body`.
```js
console.log("Добро пожаловать на 30 дней JavaScript");
```
Внешние скрипты в head
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript: Внешний скрипт</title>
<script src="introduction.js"></script>
</head>
<body></body>
</html>
```
Внешние скрипты в body
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript:External script</title>
</head>
<body>
<!-- Это может быть в head или в body. Вот рекомендуемое место для размещения внешнего скрипта -->
<script src="introduction.js"></script>
</body>
</html>
```
Откройте консоль браузера, чтобы увидеть вывод `console.log()`.
### Несколько внешних скриптов
Мы можем связать несколько внешних файлов JavaScript с веб-страницей.
Создайте файл _helloworld.js_ в папке 30DaysOfJS и напишите следующий код.
```js
console.log("Hello, World!");
```
```html
<!DOCTYPE html>
<html>
<head>
<title>Multiple External Scripts</title>
</head>
<body>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
</body>
</html>
```
Ваш файл main.js должен быть ниже всех других скриптов. Будьте внимательными, чтобы понять эту строчку.
![Multiple Script](./images/multiple_script.png)
## Введение в типы данных
В JavaScript, а также в других языках программирования существуют разные типы типов данных. Ниже приведены примитивные типы данных JavaScript: _Строка, Число, Булевый (логический) тип, undefined, Null_ и _Symbol_.
### Число
- Integer: Целые (отрицательные, нулевые и положительные) числа
Пример:
... -3, -2, -1, 0, 1, 2, 3 ...
- Float: десятичное число
Пример:
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
### Строка
Строка (string) в JavaScript должна быть заключена в кавычки (одинарных, двойных или обратных кавычках).
#### Пример
```js
"Asabeneh";
"Finland";
"JavaScript is a beautiful programming language";
"I love teaching";
"I hope you are enjoying the first day"`We can also create a string using a backtick`;
```
### Булевый (логический) тип «boolean»
Логическое значение может быть истинным или ложным. Любые сравнения возвращают логическое значение, которое является истинным или ложным.
Логический тип данных является либо Истинным, либо Ложным значением.
#### Пример
```js
true; // если свет включен, значение истинно
false; // если свет выключен, значение False
```
### Undefined
В JavaScript, если мы не присваиваем значение переменной, значение не определено. В дополнение к этому, если функция ничего не возвращает, она возвращает undefined.
```js
let firstName;
console.log(firstName); // не определено, потому что оно еще не присвоено значению
```
### Null
Null в JavaScript означает пустое значение.
```js
let emptyValue = null;
```
## Проверка типов данных
Чтобы проверить тип данных определенного типа данных, мы используем оператор `typeof`. Смотрите следующий пример.
```js
console.log(typeof "Asabeneh"); // строка
console.log(typeof 5); // число
console.log(typeof true); // булевое значение
console.log(typeof null); // объект
console.log(typeof undefined); // undefined
```
## Комментарии
Комментирование в JavaScript похоже на другие языки программирования. Комментарии важны для того, чтобы сделать ваш код более читабельным.
Есть два способа комментирования:
- _Однострочные комментарии_
- _Многострочное комментирование_
```js
// комментирование самого кода одним комментарием
// let firstName = 'Asabeneh'; однострочный комментарий
// let lastName = 'Yetayeh'; однострочный комментарий
```
Многострочное комментирование:
```js
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/
```
## Переменные
Переменные являются _контейнером_ данных. Переменные, используются для хранения данных в ячейке памяти. Когда переменная объявлена, место в памяти зарезервировано. Когда переменной присваивается значение (данные), пространство памяти будет заполнено этими данными. Чтобы объявить переменную, мы используем ключевые слова `var`, `let` или `const`. Мы поговорим подробнее о `var`, `let` и `const` в других разделах (область действия). Пока приведенного выше объяснения достаточно.
Для переменной, которая изменяется в другое время, мы используем `let`. Если данные не меняются вообще, мы используем `const`. Например, PI, название страны, гравитация не меняются, и мы можем использовать `const`.
- Имя переменной JavaScript не должно начинаться с цифры.
- Имя переменной JavaScript не допускает специальных символов, кроме знака доллара и подчеркивания.
- Имя переменной JavaScript следует соглашению camelCase.
- Имя переменной JavaScript не должно содержать пробелов между словами.
Ниже приведены допустимые примеры переменных JavaScript.
Допустимые переменные в JavaScript:
```js
firstName;
lastName;
country;
city;
capitalCity;
age;
isMarried;
first_name;
last_name;
is_marreid;
capital_city;
num1;
num_1;
_num_1;
$num1;
year2020;
year_2020;
```
camelCase или первый способ декларирования обычно используются в JavaScript. В этом материале мы будем использовать переменные camelCase.
Неверное название переменных:
```sh
first-name
1_num
num_#_1
```
Давайте объявим переменные с разными типами данных. Чтобы объявить переменную, нам нужно использовать ключевое слово let или const перед именем переменной. После имени переменной мы пишем знак равенства (оператор присваивания) и значение.
```js
// Синтаксис
let nameOfVariable = value;
```
### Примеры: Переменные
```js
// Объявление разных переменных разных типов данных
let firstName = "Asabeneh"; // имя человека
let lastName = "Yetayeh"; // фамилия человека
let country = "Finland"; // страна
let city = "Helsinki"; // столица
let age = 100; // возраст в годах
let isMarried = true;
console.log(firstName, lastName, country, city, age, isMarried);
```
```sh
Asabeneh Yetayeh Finland Helsinki 100 True
```
```js
// Объявление переменных с числовыми значениями
let age = 100; // возраст в годах
const gravity = 9.81; // сила тяжести на землю в м/с2
const boilingPoint = 100; // температура кипения воды, температура в oC
const PI = 3.14; // геометрическая постоянная
console.log(gravity, boilingPoint, PI);
```
```sh
9.81 100 3.14
```
```js
// Переменные также могут быть объявлены в одну строку через запятую
let name = "Asabeneh", // Имя человека
job = "teacher",
live = "Finland";
console.log(name, job, live);
```
```sh
Asabeneh teacher Finland
```
Когда вы запускаете файлы в папке 01-Day, вы должны получить это:
![Day one](./images/day_1.png)
🌕 Ты великолепен. Вы только что выполнили задание первого дня, и вы на пути к величию. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц.
# 💻 День 1: Упражнения
1. Написать однострочный комментарий, который говорит: _comments can make code readable_
2. Написать еще один комментарий, который говорит: _welcome to 30DaysOfJavaScript_
3. Написать многострочный комментарий, который говорит: _comments can make code readable, easy to use and informative_
4. Создать файл _variable.js_, объявить переменные и назначить строковые, логические, undefined и null типы данных.
5. Создайте файл _datatypes.js_ и используйте оператор JavaScript `typeof` для проверки различных типов данных. Проверьте тип данных каждой переменной
6. Объявите четыре переменные без присвоения значений
7. Объявите четыре переменные с присвоением значений
8. Объявите переменные для хранения вашего имени, фамилии, семейного положения, страны и возраста в несколько строк
9. Объявите переменные, чтобы хранить ваши имя, фамилию, семейное положение, страну и возраст в одной строке
10. Объявите две переменные _myAge_ и _yourAge_, присвойте им начальные значения и войдите в консоль браузера.
```sh
I am 25 years old.
You are 30 years old.
```
🎉 ПОЗДРАВЛЯЕМ ! 🎉
[День 2 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/02_Day/02_day_data_types.md)

195
RU/data/countries.js
Unescape View File

@ -0,0 +1,195 @@
const countries = [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bhutan',
'Bolivia',
'Bosnia and Herzegovina',
'Botswana',
'Brazil',
'Brunei',
'Bulgaria',
'Burkina Faso',
'Burundi',
'Cambodia',
'Cameroon',
'Canada',
'Cape Verde',
'Central African Republic',
'Chad',
'Chile',
'China',
'Colombi',
'Comoros',
'Congo (Brazzaville)',
'Congo',
'Costa Rica',
"Cote d'Ivoire",
'Croatia',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Djibouti',
'Dominica',
'Dominican Republic',
'East Timor (Timor Timur)',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Ethiopia',
'Fiji',
'Finland',
'France',
'Gabon',
'Gambia, The',
'Georgia',
'Germany',
'Ghana',
'Greece',
'Grenada',
'Guatemala',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Honduras',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran',
'Iraq',
'Ireland',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jordan',
'Kazakhstan',
'Kenya',
'Kiribati',
'Korea, North',
'Korea, South',
'Kuwait',
'Kyrgyzstan',
'Laos',
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands',
'Mauritania',
'Mauritius',
'Mexico',
'Micronesia',
'Moldova',
'Monaco',
'Mongolia',
'Morocco',
'Mozambique',
'Myanmar',
'Namibia',
'Nauru',
'Nepal',
'Netherlands',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Norway',
'Oman',
'Pakistan',
'Palau',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines',
'Poland',
'Portugal',
'Qatar',
'Romania',
'Russia',
'Rwanda',
'Saint Kitts and Nevis',
'Saint Lucia',
'Saint Vincent',
'Samoa',
'San Marino',
'Sao Tome and Principe',
'Saudi Arabia',
'Senegal',
'Serbia and Montenegro',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'Spain',
'Sri Lanka',
'Sudan',
'Suriname',
'Swaziland',
'Sweden',
'Switzerland',
'Syria',
'Taiwan',
'Tajikistan',
'Tanzania',
'Thailand',
'Togo',
'Tonga',
'Trinidad and Tobago',
'Tunisia',
'Turkey',
'Turkmenistan',
'Tuvalu',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'United States',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Vatican City',
'Venezuela',
'Vietnam',
'Yemen',
'Zambia',
'Zimbabwe'
]

BIN
RU/images/30DaysOfJavaScript.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
RU/images/adding_project_to_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
RU/images/arithmetic.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

BIN
RU/images/array_index.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
RU/images/assignment_operators.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
RU/images/banners/Day -1 – 31.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/banners/day_1_10.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/banners/day_1_11.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
RU/images/banners/day_1_12.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/banners/day_1_13.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_14.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/banners/day_1_15.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/banners/day_1_16.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_17.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/banners/day_1_18.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_19.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_20.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_21.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/banners/day_1_22.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_23.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_24.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_25.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_26.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_27.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_28.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_29.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_30.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
RU/images/banners/day_1_8.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/banners/day_1_9.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
RU/images/comparison_operators.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
RU/images/console_log_multipl_arguments.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

BIN
RU/images/date_time_object.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
RU/images/day_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
RU/images/day_1_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
RU/images/download_node.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
RU/images/google_chrome.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
RU/images/install_node.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
RU/images/js_code_on_chrome_console.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
RU/images/js_code_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
RU/images/launched_on_new_tab.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
RU/images/local_storage.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
RU/images/multiple_script.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
RU/images/opening_chrome_console_shortcut.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
RU/images/opening_developer_tool.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
RU/images/opening_project_on_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
RU/images/projects/congratulations.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
RU/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
RU/images/projects/dom_min_project_bar_graph_day_5.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
RU/images/projects/dom_min_project_bar_graph_day_5.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
RU/images/projects/dom_min_project_challenge_info_day_1.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 KiB

BIN
RU/images/projects/dom_min_project_challenge_info_day_1.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
RU/images/projects/dom_min_project_countries_aray_day_2.2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 866 KiB

BIN
RU/images/projects/dom_min_project_day_7.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
RU/images/projects/dom_min_project_day_number_generators_2.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

BIN
RU/images/projects/dom_min_project_keycode_day_3.2.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
RU/images/projects/dom_min_project_number_generator_day_3.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
RU/images/projects/dom_min_project_solar_system_day_4.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
RU/images/projects/dom_min_project_solar_system_day_4.1.mkv
View File

Binary file not shown.

BIN
RU/images/projects/dom_min_project_solar_system_day_4.1.mp4
View File

Binary file not shown.

BIN
RU/images/projects/dom_mini_project_challenge_info_day_2.3.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
RU/images/projects/dom_mini_project_challenge_info_day_2.3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 KiB

BIN
RU/images/projects/dom_mini_project_countries_day_6.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 MiB

BIN
RU/images/projects/dom_mini_project_countries_object_day_10.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

BIN
RU/images/projects/dom_mini_project_form_validation_day_10.2.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
RU/images/projects/dom_mini_project_form_validation_day_10.2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
RU/images/projects/dom_mini_project_leaderboard_day_8.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 KiB

BIN
RU/images/projects/dom_mini_project_leaderboard_day_8.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
RU/images/projects/dom_mini_project_slider_day_7.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
RU/images/raising_syntax_error.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 KiB

BIN
RU/images/regex.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
RU/images/running_script.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 335 KiB

BIN
RU/images/scripts_on_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

BIN
RU/images/string_indexes.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
RU/images/vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
RU/images/vscode_ui.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

BIN
RU/images/web_storage.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

128
RU/index.html
Unescape View File

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300, 400,400i,700,700i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in <span>2020</span></h1>
<h2>30DaysOfJavaScript Challenge</h2>
<p></p>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<script>
const hexaColor = () => {
const str = '0123456789abcdef'
let hexa = '#'
let index
for (let i = 0; i < 6; i++) {
index = Math.floor(Math.random() * str.length)
hexa += str[index]
}
return hexa
}
const showDateTime = () => {
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'
]
const now = new Date()
const year = now.getFullYear()
const month = months[now.getMonth()]
const date = now.getDate()
let hours = now.getHours()
let minutes = now.getMinutes()
let seconds = now.getSeconds()
if (hours < 10) {
hours = '0' + hours
}
if (minutes < 10) {
minutes = '0' + minutes
}
if (seconds < 10) {
seconds = '0' + seconds
}
const dateMonthYear = `${month} ${date}, ${year}`
const time = hours + ':' + minutes
const fullTime = dateMonthYear + ' ' + time
return fullTime + `:${seconds}`
}
const wrapper = document.querySelector('.wrapper')
const year = document.querySelector('span')
const time = document.querySelector('p')
wrapper.style.width = '50%'
wrapper.style.margin = 'auto'
const title = document.querySelector('h1')
const subTitle = document.querySelector('h2')
title.style.textAlign = 'center'
title.style.fontFamily = 'Montserrat'
title.style.fontWeight = 500
subTitle.style.textAlign = 'center'
subTitle.style.fontFamily = 'Montserrat'
subTitle.style.fontWeight = 300
subTitle.style.textDecoration = 'underline'
time.style.textAlign = 'center'
time.style.fontFamily = 'Montserrat'
time.style.fontWeight = 400
setInterval(() => {
year.style.color = hexaColor()
year.style.fontSize = '96px'
year.style.fontWeight = 700;
time.textContent = showDateTime()
time.style.background = hexaColor()
time.style.width = "25%"
time.style.margin = 'auto'
time.style.padding = '10px'
}, 1000)
const ul = document.querySelector('ul')
const lists = document.querySelectorAll('li')
for (const list of lists) {
list.style.listStyle = 'none'
list.style.padding = '25px'
list.style.margin = '3px'
list.style.fontFamily = 'Montserrat'
list.style.fontWeight = 300;
list.style.letterSpacing = '0.0625em'
if (list.textContent.includes('Done')) {
list.style.background = '#21bf73'
} else if (list.textContent.includes('Ongoing')) {
list.style.background = '#fddb3a'
} else {
list.style.background = '#fd5e53'
}
}
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save