diff --git a/2-js-basics/1-data-types/translations/README.ru.md b/2-js-basics/1-data-types/translations/README.ru.md new file mode 100644 index 00000000..25bbd469 --- /dev/null +++ b/2-js-basics/1-data-types/translations/README.ru.md @@ -0,0 +1,206 @@ +# Основы JavaScript: Типы Данных + +![Основы JavaScript - Типы данных](../../../sketchnotes/webdev101-js-datatypes.png) + +> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac) + +## Предлекционный квиз + +[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7) + +Этот урок охватывает основы JavaScript, языка, обеспечивающего интерактивность в Интернете. + +> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)! + +[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Переменные в JavaScript") + +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Типы Данных в JavaScript") + +> 🎥 Нажмите на изображение выше, чтобы посмотреть видеоролики о переменных и типах данных + +Начнем с переменных и типов данных + +## Переменные + +В переменных хранятся значения, которые можно использовать и изменять в коде. + +Создание и **объявление** переменной имеет следующий синтаксис: **[ключевое слово] [имя]**. Переменная состоит из двух частей: + +- **Ключевое слово**. Ключевыми словами могут быть `let` или `var`. + +✅ Ключевое слово `let` было введено в ES6 и дает вашей переменной так называемую _блочную область_. Рекомендуется использовать `let` вместо `var`. Мы рассмотрим блочные области более подробно в следующих частях. + +- **Имя переменной**, вы можете дать ей любое имя. + +### Задача - работа с переменными + +1. **Объявите переменную**. Давайте объявим переменную, используя ключевое слово `let`: + + ```javascript + let myVariable; + ``` + + `myVariable` теперь объявлена с помощью ключевого слова `let`. На данный момент у нее нет значения. + +1. **Присвойте значение**. Запишите значение переменной с помощью оператора `=`, за которым следует ожидаемое значение. + + ```javascript + myVariable = 123; + ``` + + > Примечание: использование `=` в этом уроке означает, что мы используем "оператор присваивания", используемый для записи значения в переменную. Это не оператор равенства. + + `myVariable` теперь _инициализирован_ со значением 123. + +1. **Рефакторинг**. Замените свой код следующим утверждением: + + ```javascript + let myVariable = 123; + ``` + + Вышеприведенное утверждение называется _явной инициализацией_, когда переменная объявляется, и одновременно с этим ей присваивается значение + +1. **Измените значение переменной**. Измените значение переменной следующим образом: + + ```javascript + myVariable = 321; + ``` + + Как только переменная объявлена, вы можете изменить ее значение в любой области вашего кода с помощью оператора `=` и нового значения. + + ✅ Вы можете писать JavaScript код прямо в браузере. Откройте браузер, и перейдите в "Инструменты разработчика". Найдите вкладку "Консоль"; введите `let myVariable = 123`, нажмите клавишу Enter, затем введите `myVariable`. Что произошло? Обратите внимание, что вы узнаете больше об этих концепциях в следующих уроках. + +## Константы + +Объявление и инициализация константы следует той же концепции, что и переменная, за исключением ключевого слова `const`. Константы обычно объявляются заглавными буквами. + +```javascript +const MY_VARIABLE = 123; +``` + +Константы аналогичны переменным, но с мелкими отличиями: + +- **Значение обязательно**. Константы должны быть инициализированы, иначе при выполнении кода возникнет ошибка. +- **Ссылка не может быть изменена**. Ссылка на константу не может быть изменена после инициализации, иначе при выполнении кода возникнет ошибка. Давайте рассмотрим два примера: + + - **Простое значение**. Следующее НЕ допускается: + + ```javascript + const PI = 3; + PI = 4; // не допускается + ``` + + - **Ссылка на объект защищена**. Следующее НЕ допускается: + + ```javascript + const obj = { a: 3 }; + obj = { b: 5 }; // не допускается + ``` + + - **Значение объекта не защищено**. Следующее допускается: + + ```javascript + const obj = { a: 3 }; + obj.a = 5; // разрешено + ``` + + Выше вы меняете значение объекта, но не саму ссылку, что делает константу доступной. + + > Обратите внимание, что ссылка у `const` защищена от повторного использования. Однако само значение константы не является _неизменным_ и может измениться, особенно если это такая сложная конструкция как объект. + +## Типы Данных + +Переменные могут хранить множество различных типов значений, таких как числа и текст. Эти различные типы значений известны как **тип данных**. Типы данных являются важной частью разработки программного обеспечения, поскольку они помогают разработчикам принимать решения о том, как следует писать код и как должно работать программное обеспечение. Кроме того, некоторые типы данных имеют уникальные особенности, которые помогают преобразовывать или извлекать дополнительную информацию из значения. + +✅ Типы данных также называют примитивными данными JavaScript, поскольку они являются типами данных самого низкого уровня, предоставляемые языком. Существует 6 примитивных типов данных: string, number, bigint, boolean, undefined, и symbol. Потратьте минуту, чтобы представить, что может значить каждый из этих примитивов. Что такое `зебра`? Как насчет `0`? `true`? + +### Числа + +В предыдущем разделе значение `myVariable` было числовым типом данных. + +`let myVariable = 123;` + +Переменные могут хранить все типы чисел, включая десятичные или отрицательные числа. Числа также можно использовать с арифметическими операторами, описанными в [следующем разделе](#arithmetic-operators). + +### Арифметические операторы + +Существует несколько видов операторов, используемых при выполнении арифметических функций, и некоторые из них перечислены здесь: + +| Symbol | Description | Example | +| ------ | ---------------------------------------------------- | -------------------------------- | +| `+` | **Сложение**: Вычисляет сумму двух чисел | `1 + 2 //expected answer is 3` | +| `-` | **Вычитание**: Вычисляет разницу двух чисел | `1 - 2 //expected answer is -1` | +| `*` | **Умножение**: Вычисляет произведение двух чисел | `1 * 2 //expected answer is 2` | +| `/` | **Деление**: Вычисляет частное двух чисел | `1 / 2 //expected answer is 0.5` | +| `%` | **Остаток**: Вычисляет остаток от деления двух чисел | `1 % 2 //expected answer is 1` | + +✅ Выполните арифметическую операцию прямо в консоли браузера. Результат вас удивил? + +### Строки + +Строки - это набор символов, закрытый в одинарные или двойные кавычки. + +- `'Это строка'` +- `"Это тоже строка"` +- `let myString = 'Это строка записанная в переменную';` + +Не забывайте использовать кавычки при использовании строки, иначе JavaScript примет ее за имя переменной. + +### Форматирование строк + +Строки являются текстом, и время от времени требуют форматирования. + +Чтобы **объединить** две или более строк, соедините их вместе используя оператор `+`. + +```javascript +let myString1 = "Привет"; +let myString2 = "Мир"; + +myString1 + myString2 + "!"; //ПриветМир! +myString1 + " " + myString2 + "!"; //Привет мир! +myString1 + ", " + myString2 + "!"; //Привет, Мир! +``` + +✅ Почему в JavaScript `1 + 1 = 2`, но `'1' + '1' = 11?` Подумайте об этом. А как насчет `'1' + 1`? + +**Литералы шаблонов** это еще один способ форматирования строк, но вместо обычных кавычек используются обратные кавычки. Все, что не является обычным текстом, должно быть внутри заполнителя `${ }`. Сюда подойдут любые переменные которые могут быть строками. +. + +```javascript +let myString1 = "Привет"; +let myString2 = "Мир"; + +`${myString1} ${myString2}!` //Привет Мир! +`${myString1}, ${myString2}!`; //Привет, Мир! +``` + +Вы можете достичь своих целей форматирования любым из этих методов, но литералы шаблонов будут учитывать любые пробелы и разрывы строк. + +✅ В каком случае вы бы использовали литерал шаблона, а когда простую строку? + +### Логический тип (Boolean) + +Логические типы могут иметь только два значения: `true` или `false`. Логические значения могут помочь принять решение о том, какие строки кода должны выполняться при выполнении определенных условий. Во многих случаях, [операторы](#arithmetic-operators) помогут установить значение логического типа, и вы часто будете записывать инициализируемые переменные или их значения, обновляемые с помощью оператора. + +- `let myTrueBool = true` +- `let myFalseBool = false` + +✅ Переменная может считаться 'истинной' если она оценивается как логическое значение `true`. Интересно, что в JavaScript, [все значения истинны, если они не определены как ложные](https://developer.mozilla.org/docs/Glossary/Truthy). + +--- + +## 🚀 Челлендж + +JavaScript печально известен своим необычным способом обрабатывать типы данных. Проведите небольшое исследование этих «подводных камней». Например: из-за чувствительности к регистру вы можете 'выстрелить себе в ногу'. Напишите это в своей консоли: `let age = 1; let Age = 2; age == Age` (результат `false` - почему?). Какой подвох вы еще сможете найти? + +## Постлекционный квиз + +[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) + +## Обзор и самообучение + +Взгляните на [этот список упражнений JavaScript](https://css-tricks.com/snippets/javascript/) и выполните одно из них. Что вы узнали? + +## Задание + +[Типы Данных Практика](assignment.md)