Весной этого года мы взялись за обновление контента нашего курса «Основы JavaScript». К тому моменту вышло семь глав и обратной связи собралось так много, что мы решили не откладывать доработку.

Валерия Зелёная, автор курсов
Моё лицо после релиза курса, когда я увидела, сколько ещё работы впереди.

Главной задачей стало сделать прохождение курса комфортнее. И мы подошли к решению с нескольких сторон.

Теория заданий

Мы собрали обратную связь отовсюду: форум, комментарии в заданиях, письма и социальные сети.

Оказалось, что наши представления о подробных и понятных заданиях немного разошлись с тем, как это видели вы. И это не удивительно: при работе над заданиями глаз замыливается, плюс когда имеешь дело с кодом каждый день, какие-то вещи кажутся очевидными, хотя для новичков это не так.

Например, мы часто используем в главах выражения вроде «функция возвращает значение», «эта команда вернёт значение». Но мы не рассказывали, что такое «возвращение», как это понять, кто кого и куда возвращает. Мы исправили этот недочёт, объяснив возвращение значений на бытовых примерах в задании «Типы данных».

Каждая строка, которая начинается с LOG:, — результат работы команды console.log(). Последняя строка начинается с символа <=.

Она показывает значение, которое возвращает программа после выполнения. Что значит «возвращает»? Программа может выполнить код и вернуть, то есть отдать результат своей работы для дальнейшего использования.

Например, вы разговариваете с другом по телефону:

  • Сколько будет два плюс два?, — спрашиваете вы.
  • Четыре, — быстро отвечает вам друг.
  • А теперь умножь это значение на два!, — продолжаете вы.

Своим ответом друг «вернул» вам значение «четыре». Вы получили ответ на свой вопрос и смогли что-то сделать с этим ответом (попросили увеличить результат в два раза). То же самое делает команда 2 + 2. Она складывает два числа и возвращает значение 4 (здесь всё логично).

Обратите внимание, что глава «Знакомство с JavaScript» открыта для всех. Вы можете в любой момент прочитать про возвращение значений и пройти задания. Остальные главы курса доступны по подписке.

В главе «Условия» (доступна по подписке) рассказали, что такое приведение типов и как оно работает. В «Циклах» мы подробно разобрали синтаксис циклов и объяснили, что такое счётчик и почему его необходимо объявлять.

Чтобы снова не упереться в то, что наши объяснения недостаточно понятные, мы собрали группу ребят, которые никогда не учили JavaScript, но очень хотели попробовать. Они проходили курс по несколько раз, указывая на сложные и непонятные моменты. Их комментарии сильно изменили наше представление (моё точно) о том, как нужно учить и рассказывать что-то новое. Даже не спрашивайте сколько раз я переписывала теорию «Циклов». Цикл for снился мне несколько недель.

Цели и проверки заданий

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

if (isBusinessClass) {
  …
}

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

if (isBusinessClass === true) {
  …
}

if (isBusinessClass == true) {
  …
}

Кроме этого мы добавили больше реалистичности в наш интерфейс. Теперь, если в HTML-файле не подключён скрипт, ваш JavaScript не будет работать. Всё, как в жизни.

Скрипт не подключён
Скрипт не подключён, поэтому код из вкладки script.js не применяется.

Новые задания

Добавили несколько новых заданий в курс, чтобы прохождение было более плавным и важные темы не упускались. Конечно, всё вместить в формат одного курса невозможно, но мы стараемся захватить самое важное. Например, в главе «Циклы» (доступна по подписке) появилось аж шесть новых заданий. В них вы можете узнать про то, как накапливать значения в циклах, как писать условия внутри циклов (спойлер: почти так же, как и вне циклов), как найти чётные значения и ещё много всего.

В главе «Функции» (доступна по подписке) мы добавили важное задание, в котором объясняется, почему нужно соблюдать порядок параметров и что будет, если про это забыть. JavaScript лояльный язык, но некоторых ошибок не прощает. Ещё во второй части этой главы появилось задание, которое наглядно показывает, как с помощью функций можно масштабировать решение любой задачи.

Конспекты

Пока проходишь задания, всё вроде понятно. Доходишь до испытания — забываешь всё, что прочитал и написал пять минут назад. Нужно срочно всё повторить иначе испытание не решается. Знакомо? Оказалось, что с этим сталкивались многие. Поэтому перед каждым испытанием мы добавили конспекты. В них есть вся информация из раздела, которая поможет вам пройти испытание. При этом вам не нужно бегать по заданиям и перечитывать всю теорию, просто загляните в конспект. Вот пример конспекта из главы «Знакомство с JavaScript».

Передача по ссылке

Объект всегда один, в памяти не создаётся новое место под копию объекта. Каждая переменная содержит не новую отдельную сущность, а ссылку на один-единственный объект.

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

Это важная особенность объектов, которую надо запомнить. Она так и называется — передача объектов по ссылке.

var firstCat = {
  name: 'Кекс',
  age: 5
};

var secondCat = firstCat;
console.log(secondCat);
// Выведет {"name":"Кекс","age":5}

firstCat.name = 'Снежок';
console.log(secondCat);
// Выведет {"name":"Снежок","age":5}
Фрагмент конспекта из первой части главы «Объекты» (доступна по подписке).

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

Видеоразборы

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

Пример видеоразбора
Пример видеоразбора из «Знакомства с JavaScript».

Вызовы

В главах появились вызовы — дополнительные задания по теме главы для тех, кто хочет тренироваться, решать больше задач и набивать руку в написании кода. Это задания разной сложности: от начальных, где отрабатывается синтаксис, до продвинутых, где надо решить хитрую задачу и не потеряться в куче строчек кода. Уже добавлено тридцать вызовов: девять в главе «Знакомство с JavaScript», шесть в «Условиях», семь в «Циклах» и восемь в «Массивах». И их будет ещё больше! В вызовах оказались и некоторые старые испытания, например «Великий дешифровщик» из главы «Массивы» (доступна по подписке) перешёл в статус продвинутого вызова, а его место в главе заняло испытание «Начинающий дешифровщик» с более понятным алгоритмом шифрования.

Вызовы в главе «Знакомство с JavaScript»
Вызовы в главе «Знакомство с JavaScript».

Интерфейс

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

Интерфейс курса
Интерфейс курса.

Внутри курса тоже произошли изменения. У редактора появились две темы на выбор: светлая и тёмная. Консоль внешне и по поведению стала больше похожа на браузерную. Можете в этом убедиться, заглянув в главу «JavaScript в браузере» (доступна по подписке).

Открытая консоль
Открытая консоль.
Закрытая консоль
Закрытая консоль.

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

Подробно об обновлении интерфейса мы расскажем позже, а пока потестируйте обновлённый формат и расскажите что думаете.

Обратная связь

Мы не собираемся останавливаться и дальше вас ждут новые курсы по JavaScript. Улучшение нынешнего курса мы также не оставляем, поэтому нам важны отзывы. Можно писать нам на форуме, на почту, во «Вконтакте» или на Фейсбук.

Приятного обучения!