Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

Помощь

В процессе работы обязательно будут возникать вопросы. При необходимости пользуйтесь нашим разделом вопросы/ответы, читайте топики других пользователей и задавайте вопросы сами. Для получения более качественных ответов, следуйте нашим рекомендациям по тому как правильно задавать вопросы.

Ревью кода

На Хекслете реализован механизм под названием "code review". Он позволяет отправить код (при условии, что вы выполнили практику) на автоматическую проверку. Ваше решение будет проанализировано инструментом eslint, что даст вам пищу для размышлений и возможность улучшить свои навыки кодирования. Кроме того, в интерфейсе ревью удобно сравнивать свое решение с учительским.

Также, если вы захотите поделиться своим решением в вопросах/ответах и спросить совета, делайте это через публикацию кода в код ревью. Не вставляйте свое решение напрямую, дайте возможность другим людям думать самостоятельно.

Запуск проверки из терминала

Запустить проверку можно не только по кнопке "Проверить", но и по команде из терминала. Для этого нужно в терминале набрать make test и нажать ввод. Это будет работать для любого курса. Если вы хотите разобраться с тем, что же запускается в действительности, вы всегда можете открыть файл Makefile и посмотреть, что из себя представляет команда test.

Для запуска js кода (если вдруг захочется) можно использовать команду babel-node. Полный вызов может выглядеть так: babel-node solution.js.

Вопросы и ответы в формате Маркдаун

В разделе «Вопросы и ответы» на нашем сайте используется Маркдаун. Это простой язык разметки, ставший стандартом де-факто среди программистов.

  • Для выделения (обычно это курсив) оберните текст в символы подчеркивания _вот так_.
  • Для сильного выделения (обычно это полужирный текст) оберните текст в двойные звездочки **вот так**.
  • Для вывода кода в тексте ("внутри" текста) оберните код `так называемыми тиками`.
  • Для вставки ссылки: [Текст ссылки](http://google.com)
  • Для вставки картинки: ![Описание картинки](https://hexlet.io/icons/default/favicon-196x196.png "заголовок картинки")

Для вывода блока кода оберните параграф тройными тиками ```. Например:

```
int a
a = b + 123
```

Будет выведен так:

int a
a = b + 123

Для списков просто начинайте каждую строку с символа - (непронумерованный список) или с любой цифры с точкой (пронумерованный список). Например:

- item a
- item b
- item c

или

1. item one
1. item two
1. item three

Несмотря на то, что во втором случае все цифры одинаковые, при выводе Маркдаун автоматически сделает правильный список 1, 2, 3 и т.д.

Вот полный список элементов форматирования Маркдаун.

А где редактор кода?

Когда закончите смотреть видео — просто нажмите на "Далее" в правом верхнем углу. Вы попадете в следующую часть урока где и будет доступен редактор кода с упражнением.

Продолжайте двигаться по курсу таким образом, всегда нажимая "Далее" (и "Проверить" в упражнениях).

Где еще можно упражняться

Это не просто красивое отображение кода, а специальный виджет, в котором можно запустить код нажав на кнопку run. Но самое главное, что если нажать на "run on repl.it" в правом верхнем углу блока, этот код откроется на сайте repl.it, и там можно будет его позапускать, поправить и вообще всячески экспериментировать.

Версии JS

JavaScript, как и все остальные языки, не стоит на месте. Примерно каждый год выходит новая версия языка, обладающая новыми возможностями. Использовать эти новые возможности сразу после их выхода — нельзя. Это связано с тем, что сам стандарт и его реализация — это две разные вещи. До внедрения этих возможностей в разные среды исполнения (браузеры, nodejs) должно пройти какое-то время.

Выходом из этой ситуации стал Babeljs. Это специальная программа, которая берет исходный код на современном стандарте JS и превращает его в JS-код более старого формата. Такой трюк позволяет начать использовать все самое вкусное уже прямо сейчас, не дожидаясь полноценной поддержки.

Babeljs фактически стал стандартом де-факто и уже сложно представить, чтобы проекты на js делались без него. Это одна из главных причин, почему на Хекслете преподается последний стандарт js.

Другая причина заключается в том, что новый синтаксис стал гораздо более лаконичным и подчеркивающим правильные идеи программирования. Особенно это станет заметно (хотя, для многих и непривычно) в последующих курсах.

Стиль

Как и при работе с естественными языками, код нужно оформлять определенным образом для того, чтобы он был более понятным и простым в поддержке. Конкретно в js самым распространенным стандартом является https://github.com/airbnb/javascript Он был написан программистами компании airbnb и теперь используется повсеместно. Периодически просматривайте его и улучшайте свой код. Следование стандартам не только входит в практики экстремального программирования, но и является неотъемлемой частью при работе в команде.

В любом языке программирования существуют специальные инструменты, так называемые линтеры, задачей которых является проверка кода на соответствие стандартам. В js это eslint.


Конспект урока

console.log

  • console.log используется в JavaScript для вывода чего-нибудь на экран
  • Код для вывода фразы "Hello, World!" выглядит так: console.log('Hello, World!');

Маленький виртуальный компьютер Hexlet

  • Упражнения открываются в маленьком виртуальном компьютере, который мы собираем специально для вас на лету
  • Посмотрите в нижнюю часть экрана или кликните на "Задание", чтобы увидеть задание
  • Напишите код — своё решение — между BEGIN и END
  • Вы можете проверять своё решение столько, сколько потребуется
  • Задавайте вопросы в "вопросах и ответах", если потребуется помощь. Мы отвечаем на все вопросы!

Рекомендуем почитать

Дополнительно

В комплекте с вашим интернет-браузером скорее всего идет "developer tools", набор инструментов для разработчиков. И одна из функциональностей этих инструментов — "консоль". Это место, где можно писать и запускать код JavaScript.

Попробуйте открыть консоль и написать код "hello, world". Задайте вопрос в "вопросах и ответах", если потребуется помощь.

Как Хекслет проверяет решения

Ваши решения проверяются автоматически с помощью так называемых тестов. Тесты — это ещё одна программа, которая запускает вашу программу и пытается удостовериться делает ли ваша программа то, что нужно. Тестам будет посвящен специальный урок в этом курсе.

Концепция практики на Хекслете — реальное рабочее окружение вместо симуляторов. Поэтому тесты, как и в реальной разработке программного обеспечения, доступны вам в специальном файле. Его можно найти через файловое дерево в левой части редактора упражнения.

Система запускает тесты, и если ни один тест не "падает" (не находит несоответствия), то задание считается выполненным верно. Так как файл с тестами доступен вам, вы можете редактировать тесты или даже удалять их. Это не баг, это фича :)


Транскрипт урока

Должен признать, это не выглядит супер-мега-круто, но это все же круто. Давайте я покажу вам кое-что. Мы хотим написать первую простую программу. Возможно вы слышали о "Hello, World!". Миллионы разработчиков начали свои карьеры с этой простой программы. А всё, что она делает - это выводит на экран фразу "Hello, World!".

Когда вы посмотрите это видео и нажмёте "Продолжить", увидите экран с упражнением, вот такой. Грубо говоря, это маленький компьютер, который мы собрали налету специально для вас для этого конкретного упражнения. Это не настоящий физический компьютер, конечно, но... близко.

Здесь есть четыре главные области:

  1. Боковая панель с несколькими кнопками.
  2. Редактор, в котором вы пишете код.
  3. Терминал, в котором запускаются команды.
  4. И файловое дерево.

Начнём с боковой панели. Это, вероятно, самая важная кнопка — она проверяет решение и сообщает вам, верно ли вы выполнили задание. Вы можете проверить своё решение столько раз, сколько понадобится. Эта проверка осуществляется автоматически через так называемые "тесты". Тесты это ещё одна программа, которая запускает вашу программу и пытается удостовериться делает ли ваша программа то, что нужно.

Когда вы кликаете по ней, редактор переключается к следующей вкладке, которая называется OUTPUT, и выводит информацию о том, что ваш код проверяется. Если ваше решение не верно, то вы увидите детальные указания прямо тут. Вначале прочтите их, чтобы разобраться что не так, чаще всего проблема описана примитивными английскими фразами.

Самая крутая вещь тут в том, что подобные тесты используются в реальности, на промышленном уровне разработки софта. Весь этот сайт со всей его сложной инфраструктурой покрыт множеством тестов, маленькими программами как эта, которые постоянно проверяют наш код. Это помогает нам повышать качество и избегать множества, множества ошибок.

Конечно, перед тем как вы начнёте писать код, вам нужно понять, что делать. Эта кнопка показывает описание задачи. Формат простой: заголовки - это названия файлов, с которыми вам нужно работать, а описание под заголовками объясняют, что нужно делать. Все эти файлы, а в данном случае — один, открыты в редакторе по умолчанию и вкладки показываются прямо здесь.

Вы также можете посмотреть решение, но не сразу. Оно станет доступно только через несколько минут после того, как стартует упражнение, так что в начале попытайтесь сделать всё сами, но ничего позорного, если вы заглянете в решение.

Некоторые упражнения могут показаться сначала довольно сложными. Мы так же рекомендуем смотреть решение учителя после того, как вы сами выполните задание.

Но если вы не справляетесь и ждёте, когда станет доступным решение, просто задайте вопрос в разделе вопросов и ответов. Мы всегда отвечаем на все вопросы.

И иногда вам будет нужно вернуться к видео и тексту и освежить память. Это просто: кликните по вкладке "Теория", а когда закончите, перейдите во вкладку "Урок", и вернётесь обратно.

Теперь перейдём к основной части — редактору. Он выглядит как любой другой редактор кода. То есть это текстовый редактор с набором дополнительных функций, которые облегчают программирование.

Напишите свой код между маркерами BEGIN и END. Это важно, потому что наша система ожидает увидеть код именно в этом месте.

Все изменения сохраняются автоматически, так что не нужно беспокоиться о сохранении файлов.

Последняя деталь — терминал. Это командная строка, способ общения с вашим маленьким виртуальным компьютером. Он не часто будет нужен вам в этом курсе и в этом конкретном задании, но у вас всегда есть возможность его потыкать. Операционная система, которая тут используется, называется Linux и вы можете попробовать запускать там команды. Мы так же показываем описание задачи вот в этой вкладке, чтобы его было легко найти.

И, наконец, если что-то сломается, вы по ошибке удалите файл или случится что-то ещё, вы всегда можете вернуться обратно к исходной версии. Это как сброс к заводским настройкам упражнения. Нажмите "Сбросить" в боковой панели и всё. Только помните: код, который вы написали тоже удалится, упражнение вернётся к начальному состоянию.

Ок, теперь мы готовы. Если вам нужно вывести что-то на экран, JavaScript предлагает команду: "console.log". Нам нужно напечатать текст — в программировании это называется "string" английское слово "веревка", потому что это последовательность символов, как веревка с висящими буквами.

Просто напишите "console.log" и затем "('Hello, World!');" вот так, в конце поставьте точку с запятой и нажмите "Проверить". Вы увидите, что фраза "Hello, World!" выведена на экран, а сообщение тут говорит вам, что вы успешно выполнили упражнение. Если вы кликните по имени файла, то увидите решение учителя, которое в точности как ваше в данном случае. Можете нажать "продолжить" или кликнуть "остаться", чтобы остаться и поупражняться ещё.

Попробуйте вывести какой-нибудь другой текст. Введите другие слова. Введите числа. Сломайте что-нибудь. В этом вся идея: вам не нужно беспокоиться, тут все можно ломать.

Ну вот, это была ваша первая программа. И я знаю, что это не приложение, которое сделает вас богатым или знаменитым. Это простейший возможный шаг. Но он как первый шаг ребёнка: простой, но важный.

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →