From a45c581f115355395e50755ac29be18c3ba8ef4a Mon Sep 17 00:00:00 2001 From: OKitel Date: Sun, 2 Oct 2022 01:30:32 +0200 Subject: [PATCH] docs: add russian translation for readme 2nd lesson js-basics, part 1 --- .../1-data-types/translations/README.ru.md | 205 ++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 2-js-basics/1-data-types/translations/README.ru.md 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..03243764 --- /dev/null +++ b/2-js-basics/1-data-types/translations/README.ru.md @@ -0,0 +1,205 @@ +# Основы 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)! + +[![Переменные](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Переменные в JavaScript") + +[![Типы данных в 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` (ИСТИНА)? + +### Numbers - Числа + +В предыдущем разделе значение `myVariable` имело числовой тип данных. + +`let myVariable = 123;` + +Переменные могут хранить все типы чисел, включая десятичные или отрицательные числа. Числа также можно использовать с арифметическими операторами, описанными в [следующем разделе](#арифметические-операторы). + +### Арифметические операторы + +Существует несколько типов операторов, используемых при выполнении арифметических функций, и некоторые из них перечислены здесь: + +| Символ | Описание | Пример | +| ------ | ----------------------------------------------------------- | ----------------------------- | +| `+` | **Сложение**: Вычисляет сумму двух чисел | `1 + 2 //ожидаемый ответ 3` | +| `-` | **Вычитание**: Вычисляет разность двух чисел | `1 - 2 //ожидаемый ответ -1` | +| `*` | **Умножение**: Вычисляет произведение двух чисел | `1 * 2 //ожидаемый ответ 2` | +| `/` | **Деление**: Вычисляет частное двух чисел | `1 / 2 //ожидаемый ответ 0.5` | +| `%` | **Взятие остатка**: Вычисляет остаток от деления двух чисел | `1 % 2 //ожидаемый ответ 1` | + +✅ Попробуйте самостоятельно выполнить арифметическую операцию в консоли браузера. Удивляют ли вас результаты? + +### Strings - Строки + +Строки — это наборы символов, заключенные в одинарные или двойные кавычки. + +- `'Это строка'` +- `"Это тоже строка"` +- `let myString = 'Это строковое значение, хранящееся в переменной';` + +Не забывайте использовать кавычки при написании строки, иначе JavaScript примет ее за имя переменной. + +### Форматирование строк + +Строки являются текстом и время от времени требуют форматирования. + +Чтобы **конкатенировать** две или более строк (иначе говоря, объединить их вместе), используйте оператор `+`. + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +myString1 + myString2 + "!"; //HelloWorld! +myString1 + " " + myString2 + "!"; //Hello World! +myString1 + ", " + myString2 + "!"; //Hello, World! +``` + +✅ Почему в JavaScript `1 + 1 = 2` , но `'1'` +`'1'` = `'11'`? Подумайте об этом. Как насчет `'1' + 1`? + +**Шаблонные литералы** (также известны как "шаблонные строки") — это еще один способ форматирования строк, за исключением того, что вместо обычных кавычек используются обратные кавычки. Все, что не является обычным текстом, должно быть помещено внутри следующей конструкции `${ }`. Сюда могут быть помещены любые переменные, в т.ч. строки. + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +`${myString1} ${myString2}!` //Hello World! +`${myString1}, ${myString2}!`; //Hello, World! +``` + +Вы можете достичь своих целей форматирования любым методом, но шаблонные литералы будут учитывать любые пробелы и разрывы строк. + +✅ Когда бы вы использовали шаблонные литералы, а когда просто строки? + +### Booleans - Булевый (логический) тип + +Логические значения могут принимать только два значения: `true` или `false` (ИСТИНА или ЛОЖЬ). Логические значения могут помочь принять решение о том, какие строки кода должны выполняться при выполнении определенных условий. Во многих случаях [операторы](#арифметические-операторы) помогают установить значение логического значения, и вы часто будете замечать и записывать инициализируемые переменные или их значения, обновляемые с помощью оператора. + +- `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)