diff --git a/modules/10-basics/10-hello-world/ru/README.md b/modules/10-basics/10-hello-world/ru/README.md index e8a14923..6d295157 100644 --- a/modules/10-basics/10-hello-world/ru/README.md +++ b/modules/10-basics/10-hello-world/ru/README.md @@ -1,9 +1,52 @@ -Изучение нового языка программирования традиционно начинается с 'Hello, World!'. Это простая программа, которая выводит приветствие на экран и заодно знакомит с новым языком — его синтаксисом и структурой программы. Этой традиции уже больше сорока лет, поэтому и мы не будем ее нарушать — в первом же уроке напишем программу `Hello, World!`. - -Эта программа будет выводить на экран текст: +Изучение нового языка программирования традиционно начинается с программы 'Hello, World!'. Это простая программа, которая выводит приветствие на экран и знакомит с синтаксисом и структурой нового языка. ```text - Hello, World! +Hello, World! +``` + +![Hello World](./assets/hello-world.png) + +Этой традиции уже больше сорока лет, и мы тоже начнем с нее. В первом уроке мы напишем программу `Hello, World!`. На JavaScript эта программа выглядит так: + +```javascript +console.log('Hello, World!'); +``` + +Команда `console.log()` выводит на экран текст, указанный в скобках. Вместо примера можно написать любой другой текст. + +```javascript +console.log('Хекслет - школа программирования'); +``` + +Команда остается той же, меняется только содержимое скобок. Чтобы программа понимала, что это именно текст, он заключается в кавычки. Можно использовать одинарные `'...'` или двойные `"..."`, но открывающая и закрывающая кавычки должны совпадать. + +```javascript +console.log("Хекслет - школа программирования"); ``` -Чтобы вывести что-то на экран, нужно дать компьютеру специальную команду. В языке JavaScript такая команда — `console.log()`. +## Значение символов + +Код состоит из команд, и каждая из них должна быть написана в определенной форме. Помимо букв, в коде важны кавычки `'` и `"`, скобки `()` и знаки препинания. Пропущенный или перепутанный знак приведет к тому, что программа не запустится. Попробуйте определить, какую ошибку допустили в каждой из строк? + +```javascript +console.log("it's JavaScript" +console.log(it's JavaScript") +consol.log("it's JavaScript") +console.log('it's JavaScript") +consolelog("it's JavaScript") +``` + +Даже небольшое отличие, например одна лишняя буква или другой знак, может привести к тому, что программа не будет работать. Это относится и к регистру, то есть к различию между большими и маленькими буквами. Если в обычном тексте `Привет` и `привет` выглядят одинаково, то для JavaScript это разные слова. JavaScript считает `console.log`, `Console.Log` и `CONSOLE.LOG` разными командами, и сработает только первый вариант. + +## Где практиковаться + +Теория усваивается лучше, когда параллельно запускаешь код и видишь результат. Для этого подходит консоль браузера (DevTools), где команды выполняются построчно. Все, что встречается в уроке, стоит пробовать [в консоли браузера](https://developer.chrome.com/docs/devtools/console/). + +Как это работает технически? Любой написанный код передается в движок JavaScript, который этот код выполняет и выводит на экран результат его работы. + +```text + Код Движок JS Экран + ┌──────────────────┐ ┌───────────┐ ┌──────────────┐ + │ console.log(…) │──→│JavaScript │──→│ Hello, World!│ + └──────────────────┘ └───────────┘ └──────────────┘ +``` diff --git a/modules/10-basics/10-hello-world/ru/assets/hello-world.png b/modules/10-basics/10-hello-world/ru/assets/hello-world.png new file mode 100644 index 00000000..9bf2299f Binary files /dev/null and b/modules/10-basics/10-hello-world/ru/assets/hello-world.png differ diff --git a/modules/10-basics/20-comments/index.js b/modules/10-basics/20-comments/index.js index 456ed37d..83926864 100644 --- a/modules/10-basics/20-comments/index.js +++ b/modules/10-basics/20-comments/index.js @@ -1 +1 @@ -// You know nothing, Jon Snow! +// TODO: добавить функцию приветствия diff --git a/modules/10-basics/20-comments/ru/EXERCISE.md b/modules/10-basics/20-comments/ru/EXERCISE.md index b326c804..32618f9f 100644 --- a/modules/10-basics/20-comments/ru/EXERCISE.md +++ b/modules/10-basics/20-comments/ru/EXERCISE.md @@ -1 +1,9 @@ -Создайте однострочный комментарий с текстом: `You know nothing, Jon Snow!`. +Вы пишете программу и понимаете, что одну часть нужно доделать позже. Чтобы не забыть, программисты оставляют себе заметки прямо в коде — TODO-комментарии. + +Добавьте в файл такой комментарий: + +```javascript +// TODO: добавить функцию приветствия +``` + +Когда вернётесь к этому месту позже, комментарий напомнит, что здесь ещё есть незавершённая работа. diff --git a/modules/10-basics/20-comments/ru/README.md b/modules/10-basics/20-comments/ru/README.md index 1bef8296..30432a01 100644 --- a/modules/10-basics/20-comments/ru/README.md +++ b/modules/10-basics/20-comments/ru/README.md @@ -38,3 +38,23 @@ console.log('I am the King'); ``` Такие комментарии, обычно, используют для документирования кода, например, функций. + +## Служебные комментарии + +В процессе работы вы будете встречаться с таким кодом в нашем редакторе: + +```javascript +// BEGIN + +// END +``` + +*BEGIN* и *END* здесь — это обычные комментарии, которые никак не влияют на работу программы. Они показывают, куда писать код задания. + +```javascript +// BEGIN +<здесь ваше решение> +// END +``` + +Увидев *BEGIN* и *END*, пишите свой код между ними, остальное оставляйте без изменений. diff --git a/modules/10-basics/40-instructions/ru/README.md b/modules/10-basics/40-instructions/ru/README.md index ed2d22a6..e244e4b3 100644 --- a/modules/10-basics/40-instructions/ru/README.md +++ b/modules/10-basics/40-instructions/ru/README.md @@ -1,27 +1,72 @@ -Инструкция — это команда для компьютера выполнить какое-то действие. +Команду `console.log('Hexlet')` мы можем назвать инструкцией, она говорит интерпретатору JavaScript, что нужно делать. Таких инструкций может быть сколько угодно. Каждая из них выполняется после того, как закончилась предыдущая, и так мы из простых элементов получаем сколь угодно большую и сложную программу. -Программа на JavaScript состоит из набора инструкций. Чаще всего каждая инструкция записывается с новой строки. Иногда инструкции дополнительно разделяют точкой с запятой `;`, но во многих случаях её можно не ставить. +```text + Инструкция 1: console.log('Hello') → выполнена + ↓ + Инструкция 2: console.log('World') → выполнена + ↓ + Инструкция 3: console.log('!') → выполнена +``` -Вот пример кода с двумя инструкциями. +Вот пример кода с двумя инструкциями. Эти строки говорят компьютеру вывести фразы на экран. ```javascript -console.log('Mother of Dragons.'); -console.log('Dracarys!'); +console.log('Mother of Dragons.'); // Первая инструкция +console.log('Dracarys!'); // Вторая инструкция ``` -При запуске этого кода, на экран последовательно выводятся два предложения: +Результат выполнения: ```text Mother of Dragons. Dracarys! ``` -Теоретически, инструкции можно написать друг за другом без переноса на новую строчку: +## Порядок имеет значение + +Интерпретатор JavaScript выполняет код строго в том порядке, в котором вы его написали. Если поменять строки местами: ```javascript -console.log('Mother of Dragons.'); console.log('Drakarys!'); +console.log('Dracarys!'); +console.log('Mother of Dragons.'); +``` + +на экране они тоже поменяются: + +```text +Dracarys! +Mother of Dragons. ``` -Результат на экране будет таким же, но такой код неудобен для чтения, поэтому инструкции располагают друг под другом. +## Альтернативная форма записи -Почему это важно знать? Инструкция — это единица исполнения. Интерпретатор, программа которая запускает код на JavaScript, выполняет инструкции строго по очереди. И мы, как разработчики, должны понимать этот порядок и уметь мысленно разделять программу на независимые части, удобные для анализа. +Обычно инструкции пишут на отдельных строках, но их можно записать и на одной строке через `;`: + +```javascript +console.log('Mother of Dragons.'); console.log('Dracarys!'); +``` + +Обе версии работают одинаково, но второй вариант читать сложнее. Поэтому инструкции почти всегда пишут по одной на строку. + +## Зачем это нужно + +Сейчас мы пишем очень простые программы, но со временем они начнут усложняться, и один из самых важных навыков, который поможет их понимать, — это способность разбивать (в голове) программу на независимые инструкции. Только так можно разобраться в том, что в коде происходит. Ниже пример для привлечения внимания, понимать его пока не надо: + +```javascript +const isPrime = (number) => { + if (number < 2) { + return false; + } + + let divider = 2; + + while (divider <= number / 2) { + if (number % divider === 0) { + return false; + } + divider += 1; + } + + return true; +}; +``` diff --git a/modules/10-basics/45-testing/index.js b/modules/10-basics/45-testing/index.js index d215cac5..86e391c5 100644 --- a/modules/10-basics/45-testing/index.js +++ b/modules/10-basics/45-testing/index.js @@ -1 +1 @@ -console.log(9780262531962); +console.log(10); diff --git a/modules/10-basics/45-testing/ru/EXERCISE.md b/modules/10-basics/45-testing/ru/EXERCISE.md index d03be933..898cf13d 100644 --- a/modules/10-basics/45-testing/ru/EXERCISE.md +++ b/modules/10-basics/45-testing/ru/EXERCISE.md @@ -1,7 +1,3 @@ -Просто тренировка. Выведите на экран число 9780262531962. +В магазине на полке осталось 10 яблок. Напишите программу, которая выводит это число на экран. -```text -9780262531962 -``` - -Поэкспериментируйте с выводом. Передайте туда другое число или строку. Посмотрите на ответ системы, попробуйте его перевести и понять. +Затем попробуйте вывести другое число и посмотрите, что покажет система проверки. Это поможет научиться читать сообщения об ошибках тестов. diff --git a/modules/10-basics/45-testing/ru/README.md b/modules/10-basics/45-testing/ru/README.md index d4ff5cca..2bd91a33 100644 --- a/modules/10-basics/45-testing/ru/README.md +++ b/modules/10-basics/45-testing/ru/README.md @@ -1,17 +1,12 @@ +Наш сайт автоматически проверяет ваши решения. Как это работает? -Сайт автоматически проверяет ваши решения. Как это работает? +В самом простом случае проверка запускает ваш код и сравнивает вывод на экран с ожидаемым результатом. Например, если задание звучит так: «Выведите число 10 на экран», то ваш код на JavaScript может выглядеть так: -В самом простом случае, система просто запускает ваш код и смотрит на то, что вывелось на экран. А потом сверяет с тем, что мы «ожидали» по заданию. - -В следующих, более сложных уроках, вы будете писать функции — некие мини-программы, принимающие информацию из внешнего мира и производящие какие-то операции. Проверка ваших решений в таких случаях выглядит немного сложнее: система запускает ваше решение и передаёт какую-то информацию. Система также знает — «ожидает» — какой именно ответ должна дать правильная функция при таких входных данных. - -Например, если ваша задача — написать функцию сложения двух чисел, то проверочная система будет передавать ей разные комбинации чисел и сверять ответ вашей функции с реальными суммами. Если во всех случаях ответы совпадут, то решение считается верным. - -Такой подход называется тестированием, и он используется в реальной повседневной разработке. Обычно программист сначала пишет тест — проверочную программу, а потом уже ту программу, которую хотел написать. В процессе он постоянно запускает тесты и смотрит, приблизился ли он к решению. - -Именно поэтому наш сайт говорит «Тесты пройдены», когда вы правильно решили задачу. +```javascript +console.log(10); +``` -Вот простой пример: в одном из будущих уроков вам нужно будет написать функцию, которая производит вычисления и выдаёт ответ. Предположим, вы допустили небольшую ошибку, и функция выдала неправильное число. Система ответит примерно так: +Проверка запустит этот код и убедится, что на экране действительно появилось `10`. Если вывод совпадает с ожидаемым, решение засчитывается. Иначе вы увидите ошибку: ```text ● test @@ -19,17 +14,27 @@ expect(received).toBe(expected) // Object.is equality Expected value to be: - "Hello, World!" + "10" Received: - "ello, World!" + "9" ``` -Expected – ожидаемое значение, а Received, то которое выдал ваш код. +`Expected` — ожидаемый результат, а `Received` — тот, что вернул ваш код. + +В следующих, более сложных уроках вы будете писать функции. Они принимают данные и возвращают результат. В таких задачах проверка работает немного иначе: она вызывает вашу функцию с разными аргументами и заранее знает, какой ответ должен получиться в каждом случае. + +Например, если нужно написать функцию сложения двух чисел, проверка будет передавать ей разные пары чисел и сравнивать результат с правильной суммой. Если во всех случаях ответы совпадут, решение считается верным. + +Такой подход называется тестированием, и он используется в реальной разработке. Тесты помогают проверить, правильно ли работает программа, и быстро заметить ошибку после изменений. + +Именно поэтому наш сайт говорит «Тесты пройдены», когда вы правильно решили задачу. + +## Моя ошибка или нет? -Кроме наших тестов, будет крайне полезно экспериментировать с кодом в консоли [браузера](https://developer.mozilla.org/en-US/docs/Tools/Browser_Console). В любой ситуации, когда вы недопоняли, или хотите попробовать разные варианты использования, смело открывайте консоль и вводите туда код. +Иногда в процессе решения будет казаться, что вы сделали все правильно, но проверка не принимает решение. Подобное случается крайне редко. Тесты автоматически запускаются после каждого изменения, поэтому сломанная проверка обычно не попадает на сайт. ---- +В подавляющем большинстве таких случаев ошибка содержится в коде решения. Она может быть очень незаметной: вместо английской буквы случайно ввели русскую, вместо верхнего регистра использовали нижний или забыли вывести запятую. Бывают и более сложные ситуации. Например, решение работает для одного набора входных данных, но не работает для другого. -Иногда в процессе решения будет казаться, что вы сделали все правильно, но система "капризничает" и не принимает решение. Подобное поведение практически исключено. Нерабочие тесты просто не могут попасть на сайт, они автоматически запускаются после каждого изменения. В подавляющем большинстве таких случаев, (а все наши проекты в сумме провели миллионы проверок за много лет), ошибка содержится в коде решения. Она может быть очень незаметной, вместо английской буквы случайно ввели русскую, вместо верхнего регистра использовали нижний или забыли вывести запятую. Другие случаи сложнее. Возможно ваше решение работает для одного набора входных данных, но не работает для другого. Поэтому всегда внимательно читайте условие задачи и вывод тестов. Там почти наверняка есть указание на ошибку. +Поэтому всегда внимательно читайте условие задачи и вывод тестов. Там почти наверняка есть указание на ошибку. -Однако, если вы уверены в ошибке или нашли какую-то неточность, то вы всегда можете указать на нее. В конце каждой теории есть ссылка на содержимое урока на гитхабе (этот проект полностью открытый!). Перейдя туда, вы можете написать issue, посмотреть содержимое тестов (там видно, как вызывается ваш код) и даже отправить pullrequest. Если для вас это пока темный лес, то подключитесь в наше сообщество [Telegram] (https://t.me/hexletcommunity), там в канале *Обратная связь* мы всегда поможем. +Если же вы уверены, что проблема в задании или нашли неточность, напишите в наше [сообщество](https://t.me/hexletcommunity), в канал _'Обратная связь'_. diff --git a/modules/10-basics/45-testing/test.js b/modules/10-basics/45-testing/test.js index f397a9a1..7fce79c4 100644 --- a/modules/10-basics/45-testing/test.js +++ b/modules/10-basics/45-testing/test.js @@ -8,5 +8,5 @@ test('hello world', async () => { const firstArg = consoleLogSpy.mock.calls.join('\n'); - expect(firstArg).toBe('9780262531962'); + expect(firstArg).toBe('10'); }); diff --git a/modules/10-basics/50-syntax-errors/index.js b/modules/10-basics/50-syntax-errors/index.js index affc8ebb..f7830cd6 100644 --- a/modules/10-basics/50-syntax-errors/index.js +++ b/modules/10-basics/50-syntax-errors/index.js @@ -1 +1 @@ -console.log('What Is Dead May Never Die'); +console.log('Программа успешно запущена'); diff --git a/modules/10-basics/50-syntax-errors/ru/EXERCISE.md b/modules/10-basics/50-syntax-errors/ru/EXERCISE.md index aff6b2fd..65effb6c 100644 --- a/modules/10-basics/50-syntax-errors/ru/EXERCISE.md +++ b/modules/10-basics/50-syntax-errors/ru/EXERCISE.md @@ -1,4 +1,12 @@ +Программа запускается и сообщает о результате. Напишите программу, которая выводит: -Это задание не связано с уроком напрямую. Но будет полезным потренироваться с выводом на экран. +```text +Программа успешно запущена +``` -Выведите на экран *What Is Dead May Never Die* +После того как программа заработает, намеренно сломайте её — допустите одну из синтаксических ошибок: + +- уберите закрывающую кавычку; +- уберите закрывающую скобку. + +Запустите код и прочитайте сообщение JavaScript. Такие сообщения вы будете видеть часто — важно научиться их читать. Затем верните рабочий вариант, чтобы упражнение прошло проверку. diff --git a/modules/10-basics/50-syntax-errors/ru/README.md b/modules/10-basics/50-syntax-errors/ru/README.md index 89cf54d7..fecaadc7 100644 --- a/modules/10-basics/50-syntax-errors/ru/README.md +++ b/modules/10-basics/50-syntax-errors/ru/README.md @@ -1,14 +1,54 @@ +Если программа на JavaScript написана с нарушением правил, интерпретатор остановит выполнение и выведет сообщение об ошибке. В этом сообщении указывается: -Если программа на JavaScript написана синтаксически некорректно, то интерпретатор выводит на экран соответствующее сообщение, а также указание на файл и строчку в нём, где, по его мнению, произошла ошибка. *Синтаксическая ошибка* возникает в том случае, когда код был записан с нарушением грамматических правил. В человеческих языках грамматика важна, но текст с ошибками чаще всего можно понять и прочитать. В программировании всё строго. Любое мельчайшее нарушение, и программа даже не запустится. Примером может быть забытая `;`, неправильно расставленные скобки и другие детали. +- тип ошибки, +- строка, в которой она произошла, +- и (часто) точка, где интерпретатор «споткнулся». -Вот пример кода с синтаксической ошибкой: +## Что такое синтаксическая ошибка? + +Синтаксическая ошибка (SyntaxError) — это нарушение правил написания кода (грамматических правил) в конкретном языке программирования. Такие ошибки возникают, если код написан с отклонением от ожидаемого формата: не закрыта строка, пропущена скобка, нарушен порядок символов и т.д. + +В отличие от естественных языков, где текст с ошибками можно понять по контексту, в программировании даже малейшее отклонение делает код неработоспособным. + +```text + Код с ошибкой Интерпретатор Результат + ┌────────────────────┐ ┌───────────┐ ┌──────────────────────┐ + │ console.log('Hi' │──→│JavaScript │──→│ SyntaxError: │ + └────────────────────┘ └───────────┘ │ missing ) after args │ + └──────────────────────┘ +``` + +Рассмотрим простой пример с синтаксической ошибкой: ```javascript +// Правильный вариант такой: console.log('Hodor') +console.log('Hodor' +``` + +В этом коде не закрыта скобка, что делает программу некорректной с точки зрения синтаксиса. Попробуем запустить программу, и интерпретатор выдаст ошибку: + +```bash +node index.js +index.js:2 console.log('Hodor' + ^ + +SyntaxError: missing ) after argument list ``` -Если запустить код выше, то мы увидим следующее сообщение: `SyntaxError: missing ) after argument list`, а также указание на строку и файл, где возникла эта ошибка. Подобные синтаксические ошибки в JavaScript относятся к разряду SyntaxError. +Текст с непривычки может быть непонятен, но это нормально — чем больше вы будете сталкиваться с такими ошибками, тем быстрее научитесь понимать, что произошло. + +## Почему такие ошибки считаются простыми? + +Синтаксические ошибки: + +- легко заметить: код часто подсвечивается в редакторе; +- легко исправить: достаточно вернуть пропущенный символ или поправить структуру. + +Но есть ложка дёгтя. Интерпретатор не всегда указывает точно то место, где допущена ошибка. Иногда проблема находится несколькими строками выше. Например, открытая, но не закрытая скобка на одной строке может «сломать» весь следующий код. -С одной стороны, ошибки SyntaxError — самые простые, потому что они связаны исключительно с грамматическими правилами написания кода, а не с самим смыслом кода. Их легко исправить: нужно лишь найти нарушение в записи. +## Что делать при синтаксической ошибке? -С другой стороны, интерпретатор не всегда может чётко указать на это нарушение. Поэтому бывает, что забытую скобку нужно поставить не туда, куда указывает сообщение об ошибке. +- Читай сообщение об ошибке. Оно почти всегда содержит полезную информацию. +- Проверь строку, указанную в сообщении, и строку до неё: иногда ошибка «спрятана» чуть раньше. +- Используй [редактор с подсветкой синтаксиса](https://code.visualstudio.com/): он поможет сразу заметить проблемы (например, незакрытые кавычки или скобки). diff --git a/modules/10-basics/50-syntax-errors/test.js b/modules/10-basics/50-syntax-errors/test.js index 8480819f..24c26d68 100644 --- a/modules/10-basics/50-syntax-errors/test.js +++ b/modules/10-basics/50-syntax-errors/test.js @@ -8,5 +8,5 @@ test('hello world', async () => { const firstArg = consoleLogSpy.mock.calls.join('\n'); - expect(firstArg).toBe('What Is Dead May Never Die'); + expect(firstArg).toBe('Программа успешно запущена'); });