Первая программа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наберите в редакторе кода код из задания символ в символ и проверьте вывод.

Внимание: если вы напишете heLLo, woRld! вместо Hello, World!, то это будет считаться другим текстом, потому что заглавные и строчные буквы — это разные символы. Размер буквы называют регистром, и говорят: регистр — важен! Это касается почти всего в коде, поэтому привыкайте всегда обращать внимание на регистр.