Javascript обучение: Модули | Основы JavaScript

Онлайн-курсы по JavaScript-технологиям

• ARعربي
• ENEnglish
• ESEspañol
• FAفارسی
• FRFrançais
• IDIndonesia

• ITItaliano
• JA日本語
• KO한국어
• RUРусский
• TRTürkçe
• UKУкраїнська

• ZH简体中文

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

Основы веб-разработки

Фреймворки и другие технологии

Обучение проходит онлайн.

• Встречи проходят по расписанию, на курсах это два раза в неделю, на интенсивах чаще. В процессе живого общения мы вместе изучаем сложные темы, разбираем домашнее задание, преподаватель дает ответы на вопросы.
• Дома участники изучают оффлайн-материалы, выполняют практическое задание. Как правило, есть также курсовой проект.
• Преподаватель проверяет все решения («code review»), обращая особое внимание на качество кода. Пишет, если что не так.
• Между занятиями для общения есть также групповой чат, там же можно общаться с преподавателем или написать ему лично.
• Из технологий мы используем Zoom, GitHub, обычно также «песочница» и другие, в зависимости от курса.
• После занятий доступны записи, для повторения или просмотра в случае пропуска, но предполагается, что вы посещаете занятия. На этих курсах очень важно ваше активное участие, чтобы вы решали задания, задавали вопросы преподавателю, если что-то не получается. Только так будет хороший результат.

Более подробно детали вы можете посмотреть в программе конкретного курса.

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

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

Все отзывы являются честными. Мы не модерируем их.

• Курс «JavaScript/DOM/Интерфейсы» для новичков

  все отзывы

  Насыщенный и интересный курс. Отлично составлен план обучения, благодаря которому за короткое время впитываешь кучу информации. Домашние задания тоже очень интересные и от урока к уроку становятся все сложнее и увлекательнее. Огромное спасибо Владу Тарасову. Он очень хорошо доносит информацию, всегда отвечает на вопросы как во время лекции, так и после нее. Так же, что очень важно, дает обратную связь по домашнему заданию. В общем курс однозначно буду рекомендовать. Большое спасибо!

• Курс «JavaScript/DOM/Интерфейсы» для программистов

  все отзывы

  Прекрасное начало для желающих овладеть современным Javascript. Курс открывает все грани Javascript разработки от нативного кода до сопутствующих дисциплин: систем сборки, тестирования, JS-фреймворков.

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

  весь отзыв

• Курс по современной вёрстке

  все отзывы

  С удовольствием оставляю отзыв об этом курсе.

  Очень понравился формат работы, структура и качество материала.

  Самым ценным для меня оказались детальные ревью PR’ов с домашкой от нашего ментора Германа.

  Как мне кажется – лучшая реклама, это если потребитель повторно пользуется продуктом. То в данном случае могу сказать, что записался на еще один курс по JS/DOM 🙂

• Курс по Node.js

  все отзывы

  Без преувеличения могу сказать, что мои ожидания того, что должно быть в программе курса и как должно быть подано полностью оправдались. Понравилось внимание преподавателя к нюансам и стиль изложения, плюс все сказанное подкрепляется в живую показанным кодом. В общем, Илья, большое вам спасибо за проделанную работу! По правде говоря, оценивая курс трудно быть объективным, настолько курс хорош. Объем и глубина материала отличная.

• Курс по Angular

  все отзывы

  Курс отличный: содержит все последние апдейты/изменения в технологиях и помогает значительно продвигаться вперед в своем развитии. Ведущий курса мог ответить на очень широкий спектр вопросов, хорошо следил за реакцией и пониманием аудитории, доходчиво объяснял весьма сложные паттерны и концепции. Большое спасибо!

• Курс по React

  все отзывы

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

• Интенсив по TypeScript

  все отзывы

  Курс отличный, разобрали намного больше, чем могло бы уместиться в четыре занятия. Подробно останавливались на важных моментах, все на примерах. ДЗ обязательно, по видео все понятно, но когда начинаешь писать, особенно в первый раз – очень непривычно, надо тренироваться. Очень рекомендую курс, не пожалеете!

• Курс по Vue.js

  все отзывы

  Огромное количество супер полезной информации! На курсе не просто учат использовать Vue.js, но и подробно объясняется как он работает изнутри. Плюсом рассмотрены изменения во Vue 3. Еще несколько раз все пересмотрю:)

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

  В общем, я остался доволен курсом, рекомендую!

• Интенсив по RxJS

  все отзывы

  Несмотря на то, что краем глаза касался rxjs, всё же, сконцентрированное в двух днях интенсивное обучение по выработанной программе было невероятно полезным и мотивирующим. Игорь показал и объяснил, как использовать rx в совершенно разных ситуациях, отвечая на все возникающие вопросы.

  PS: Это уже второй интенсив, который я прохожу у Игоря, как всегда всё на высоте

  Спасибо

• Если объяснения будут вам непонятны
• Если курсы не дадут вам новых знаний и умений
• Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

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

Сертификат

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

• Участвовал в мастер-классах несколько раз, узнал много полезного. Очень нравится профессиональное и отлично организованное изложение и структуризация материала, приводимые примеры и паттерны применения в настоящей разработке. Крайне рекомендую курсы для тех, кто хочет отточить свои знания и стать профессионалом.

• В далёком 2006 году, будучи frontend-разработчиком в Яндекс, я посетил курс Ильи. Уже тогда его занятия отличались сильной базой, подробным разбором важных и сложных аспектов и грамотной организацией. Я искренне рекомендую эти курсы всем кто хочет знать всё о языке JavaScript.

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

Интенсивы и мастер-классы для профессионалов в области JavaScript проводятся примерно с 2006 года, а курсы – с 2011 года. За это время обучились тысячи человек из сотен компаний, всех их перечислить сложно. В частности, проходили обучение сотрудники этих компаний:

За время обучения были оставлены сотни отзывов, некоторые из которых вы можете видеть выше на этой странице, а также, в более подробном виде, на странице курса и в профилях преподавателей. Мнение о курсах профессионалов вы также можете увидеть выше.

• Какие есть способы оплаты? Можно от компании?

  Банковская карта, электронные деньги, банковский перевод, оплата по счету от организации и другие. Выбор будет в процессе оформлениия. Договор, счет и акт для компанииии будут сгенерированы на сайте, для этого при записи выберите способ оплаты «Счет на компанию». Бумажные документы, если нужны, высылаются почтой.

• Вы выдаете сертификат?

  Да, сертификат в электронном виде. Замечу, что в нашей области главное – знания и умения, сертификаты традиционно откладываются в сторону при собеседовании. Лицензия на обучение у нас тоже есть.
• Можно ли разбить оплату на части?

  Система регистрации рассчитана на единоразовую оплату. Если вы из России, то есть способ оплаты «по частям», который предоставляет ЮКасса, в процессе оформления можно его выбрать. Также есть возможность записаться с оплатой позже, тогда место будет «за вами».

• А это всё правда? Действительно ли курсы такие хорошие??

  Здесь нет курсов по Java/PHP/Photoshop и прочему разному.

  Мы организуем курсы только по JavaScript и смежным технологиям. И стараемся делать это настолько хорошо, насколько это возможно. Также можете посмотреть отзывы: их могут оставлять все участники курсов и только они, отзывы настоящие, мы не фильтруем их и не модерируем.

• А можно ваши курсы скачать? Есть ли записи?
  На большинстве курсов есть скачиваемые материалы. Но основной смысл курса – в обучении с преподавателем, онлайн, мы регулярно встречаемся и общаемся, потому что такие встречи дают возможность показать ваш код, обсудить, что получается, с опытным разработчиком, задать вопросы, улучшить свои навыки и код.

  Записи занятий доступны участникам – для повторения или как запасной вариант при пропуске занятия, они с защитой, просмотр под Win/Mac. Мы их не продаем, потому что для нас важно качество обучения, без решения задач и обратной связи от преподавателя обеспечить его невозможно. У нас совсем другой подход, чем в «скачиваемых» и «роботизированных» курсах и, конечно, другой результат, при вашем активном участии.

• Чем эти курсы отличаются от других?

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

  Курсы, которые находятся здесь — эффективны и не похожи ни на один из них.

  • Цель — полноценная профессиональная разработка. Курс идёт с расчетом на современную разработку уровня мировых стандартов. Это немного другой уровень, чем «кнопка на коленке», и другой подход к знаниям. Понятно, что «гуру» шлифуют мастерство годами, но мы можем достаточно сильно продвинуться и научиться грамотной разработке за время курса. Для участников «с нуля» существует вводный видеокурс, который позволяет освоить самые базовые моменты заранее.
  • Курс построен на примерах и задачах. Программировать — это как плавать, одной теории маловато, нужна практика, и чем больше — тем лучше. Значит – много примеров и задач. Ведь умение их решать, основанное на понимании и прямых руках — и есть реальная цель.
  • Правильное понимание языка . JavaScript — особенный язык. Если взять все часы «среднего» JavaScript-разработчика, потерянные на вопросы на форумах, на отладку кривого кода… То важность этого становится очевидной.
  • Актуальность… То, как делаются современные проекты, а не как это было 5 лет назад.
  • Качество кода — это важно, т.к. большинство времени тратится не на изначальное написание кода, а на его развитие и поддержку. На курсах ему уделяется особое внимание.
  • Непрерывная обратная связь — на любые вопросы вы получаете ответы, на ваши решения — грамотный ответ, можно ли так писать и когда возможны проблемы.

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

  • У вас на руках будут лекционные материалы для изучения и выполнения заданий.
  • Ваши вопросы, результаты выполнения заданий, способы сделать лучше и правильнее мы обсуждаем при видео-общении онлайн.
• Зачем курсы, когда есть книги и статьи на javascript.ru?

  Практика показывает, что язык программирования, как и обычные языки, все же лучше изучаются на курсах.

  JavaScript в этом смысле особенный язык. На нём очень легко начать что-то делать. Но при этом разница между человеком, который нахватался по верхам и профессионалом, постигшим JS-дзен — колоссальна. Один делает три кнопки, другой пишет Gmail и покоряет мир.

  Цель курсов — упростить и спрямить вторую дорогу, и пройтись по ее началу вместе, чтобы не свернуть ненароком куда не следует. А уж что вы потом захотите делать — новый Gmail или меню на сайте — вам решать. Главное это скорость и качество разработки.

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

  Наша цель — не просто выучить, какие есть функции. Да, методы знать нужно, но главное — уметь «думать на javascript» и разрабатывать понятный, хороший код, без ошибок и с правильной структурой.

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

  Ниже находится классическая «пирамида обучения». Слева указаны полученные в результате исследований средние проценты усвоения знаний. Четыре верхние ступени относятся к индивидуальному обучению. Три нижние — к групповому и, в частности, курсам.

  На текущий момент в курсах уже участвовало более 5000 человек. Могло бы быть гораздо больше, но наша цель – не количество, а качество.

  Все участники как и вы, имеют доступ к гугл, книгам и javascript.ru. Но каждый имеет право на лучшее, они выбрали поход на курсы и, похоже, не пожалели.

  Курсы – это вложение в себя. Это усилия, которые позволят быстро продвинуться. А где вы хотите быть через несколько месяцев/лет?

  Может быть, имеет смысл level up?

• Зачем курсы, если можно научиться на работе?

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

  Но вот что касается «научиться» – на практике все не так просто. Люди могут работать долго, но качество кода при этом не всегда растёт.

  Это и видно, мы все знаем, что компаниям нужны результаты. Им нужны хорошие разработчики, очень нужны. В современном интернет всё решают люди. За них постоянно идет борьба. На поиск выделяются ресурсы, деньги…

  Если бы люди быстро вырастали в процессе работы – не было бы огромных трат ресурсов на поиск разработчиков.

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

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

• Планируются ли дополнительно курсы по…? Когда?

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

У вас другой вопрос? Напишите его в комментариях внизу этой страницы или на почту [email protected] (ответ обычно в течение дня), а если срочно — по телефону +7-903-5419441.

Почитать предыдущие комментарии к этой странице можно в старом движке.

Перейти к списку открытых курсов

онлайн, обучение с нуля, для начинающих и продвинутых — Хабр Карьера

Хекслет

Фулстек разработчик

Нет отзывов

16 месяцев • 8 июня

Fullstack • JavaScript • Асинхронное программирование • React • Node.js • HTML • CSS • Redux • Алгоритмы и структуры данных • SQL

СертификатОнлайн

Хекслет

Фронтенд разработчик

4.45 • 8 отзывов

10 месяцев • 8 июня

JavaScript • React • Redux • Webpack • Git • ООП

СертификатТрудоустройствоОнлайн

Хекслет

Бэкенд разработчик

Нет отзывов

10 месяцев • 8 июня

Node.js • Express • PostgreSQL • Git • JavaScript • koa. js

СертификатТрудоустройствоОнлайн

Saintcode Bootcamp

Веб-разработчик

Нет отзывов

3 месяца • 13 июня

JavaScript • React • HTML • CSS • Git • Веб-разработка

Ташкент

Saintcode Bootcamp

Веб-разработчик

Нет отзывов

3 месяца • 13 июня

JavaScript • React • HTML • CSS • Git • Веб-разработка

Санкт-Петербург

Saintcode Bootcamp

Веб-разработчик

Нет отзывов

3 месяца • 13 июня

JavaScript • React • Git • CSS • HTML • Веб-разработка

Онлайн

Яндекс Практикум

Фронтенд разработчикджуниор

мидл

4.81 • 3 отзыва

3 месяца • 15 июня

React • Redux • JavaScript • TypeScript • Webpack

СертификатОнлайн

Нетология

Фулстек разработчик

Нет отзывов

24 месяца • 19 июня

JavaScript • PHP

СертификатОнлайн

Elbrus Coding Bootcamp

Фулстек разработчик

Нет отзывов

3 месяца • 19 июня

JavaScript • Node.js • Express • SCSS • HTML

Москва

Elbrus Coding Bootcamp

Фулстек разработчик

Нет отзывов

3 месяца • 19 июня

JavaScript • HTML • CSS • React • Node. js

Санкт-Петербург

Яндекс Практикум

Фронтенд разработчикджуниор

мидл

4.0 • 2 отзыва

5 месяцев • 22 июня

JavaScript • CSS • React • TypeScript • Jest • Webpack • CI/CD • PostCSS • Node.js • Nginx

СертификатОнлайн

Бруноям

Веб-разработчик

Нет отзывов

110 недель • 26 июня

HTML • CSS • Flex • Адаптивная верстка • JavaScript • JQuery • Ajax • PHP • MySQL • Веб-разработка

СертификатСанкт-Петербург

Бруноям

Веб-разработчик

Нет отзывов

110 недель • 28 июня

JavaScript • HTML • CSS • PHP • JQuery • Ajax

СертификатСанкт-Петербург

Elbrus Coding Bootcamp

Фулстек разработчик

Нет отзывов

4 месяца • 3 июля

JavaScript • HTML • CSS • Node.js • React • Express

Онлайн

Бруноям

Фронтенд разработчик

Нет отзывов

55 недель • 22 августа

JavaScript • Node.js • React • TypeScript • GitLab • CI/CD

СертификатСанкт-Петербург

Frontend Masters

Фронтенд разработчик

Нет отзывов

В любой момент

JavaScript

Онлайн

Frontend Masters

Фронтенд разработчик

Нет отзывов

В любой момент

JavaScript

Онлайн

IBS Training Center

Фронтенд разработчик

Нет отзывов

По факту набора потока

JavaScript • React • FluxCD • Redux

СертификатОнлайн

Progtips

Фронтенд разработчик

Нет отзывов

2 месяца • В любой момент

JavaScript • Веб-разработка • CSS • JQuery • HTML

Онлайн

Code Basics

Фулстек разработчик

Нет отзывов

1 неделя • В любой момент

JavaScript

Онлайн

SoloLearn

Фронтенд разработчик

Нет отзывов

2 недели • В любой момент

JavaScript

СертификатОнлайн

WAYUP

Фронтенд разработчик

Нет отзывов

3 месяца • По факту набора потока

HTML • CSS • JQuery • Twitter Bootstrap • WordPress • Node. js • JavaScript

СертификатОнлайн

FructCode

Фулстек разработчик Для стажёров Нет отзывов

3 недели • В любой момент

JavaScript • Webpack • Веб-разработка

СертификатОнлайн

FructCode

Веб-разработчикстажёр

джуниор Нет отзывов

8 месяцев • В любой момент

JavaScript • PHP • MySQL • Git • Linux • ООП • SQL • Базы данных • Ajax • Node.js

СертификатОнлайн

Путь обучения для разработчиков JavaScript

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

• Структурируйте свой код JavaScript с помощью объектно-ориентированного подхода или подхода, основанного на прототипах.

• Обработка событий с помощью функций JavaScript.

• Создайте свои первые полноценные веб-приложения с помощью стандартного JavaScript.

Курсы

1. 1

   Базовое обучение JavaScript

   5ч 29м

   Базовое обучение JavaScript

   Автор: Мортен Рэнд-Хендриксен

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

   254 894 зрителя Выпущено 20 января 2021 г.

2. 2

   Изучение языка JavaScript (2019)

   2ч 53м

   Изучение языка JavaScript (2019 г.)

   Автор: Джо Челлман

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

   102 663 зрителя Выпущено 5 февраля 2019 г.

3. 3

   Изучение ECMAScript 6+ (ES6+)

   1ч 15м

   Изучение ECMAScript 6+ (ES6+)

   Автор: Ева Порчелло

   Приведите свой код JavaScript в соответствие с современными стандартами. Узнайте, как использовать новейшие функции ECMAScript 6+, чтобы расширить функциональные возможности ваших приложений и упростить код.

   31 748 зрителей Выпущено 22 сентября 2020 г.

4. 4

   JavaScript: область действия

   41м

   JavaScript: область действия

   Автор: Эммануэль Анри

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

   15 457 зрителей Выпущено 15 августа 2018 г.

5. 5

   JavaScript: прототипы

   1ч 3м

   JavaScript: прототипы

   Автор: Саша Водник

   Получите представление о наследовании прототипов JavaScript. Узнайте, как писать более эффективный код JavaScript, используя цепочку прототипов.

   30 894 зрителя Выпущено 21 мая 2018 г.

6. 6

   JavaScript: замыкания

   52 м

   JavaScript: замыкания

   Автор: Саша Водник

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

   24 086 зрителей Выпущено 20 июня 2018 г.

7. 7

   JavaScript: классы

   43 м

   JavaScript: классы

   Автор: Эммануэль Анри

   Узнайте, как классы могут сделать объектно-ориентированную разработку с помощью JavaScript более привычной, и узнайте, как они работают внутри.

   2 742 зрителя Выпущено 15 ноября 2022 г.

8. 8

   Изучение создания приложений с помощью ванильного JavaScript

   1ч 44м

   Изучение создания приложений с помощью ванильного JavaScript

   Автор: Саша Водник

   Замените jQuery и React ванильным JavaScript, чтобы повысить скорость сайта, не влияя на удобство работы пользователей.

   96 589 зрителей Выпущено 11 октября 2017 г.

9. 9

   Базовое обучение HTML

   2ч 45м

   Базовое обучение HTML

   Автор: Джен Симмонс

   Узнайте, как писать HTML, язык программирования, на котором работает Интернет.

   430 682 зрителя Выпущено 19 февраля 2020 г.

10. 10

    Разработка для веб-производительности

    2ч 25м

    Разработка для веб-производительности

    Автор: Мортен Рэнд-Хендриксен

    Разрабатывайте свои веб-сайты и приложения с учетом производительности. Узнайте, как создать реалистичный бюджет производительности; оптимизировать изображения, код и кэширование файлов; и более.

    15 833 зрителя Выпущено 2 апреля 2021 г.

11. 11

    Основное обучение JSON

    2ч 13м

    Основное обучение JSON

    Автор: Саша Водник

    Получите универсальное введение в JSON, наиболее распространенный формат для обмена данными в Интернете.

    28 941 зритель Выпущено 24 августа 2021 г.

12. 12

    JavaScript: Ajax и выборка

    2ч 46м

    JavaScript: Ajax и выборка

    Автор: Саша Водник

    Ajax — это основа высокопроизводительных веб-приложений. Узнайте, как использовать обычный JavaScript, Ajax и API-интерфейсы, такие как Fetch и XHR, для запроса и обработки данных и изменения содержимого веб-страницы.

    12 816 зрителей Выпущено 29 июля 2019 г.

13. 13

    JavaScript: API современных браузеров

    1ч 51м

    JavaScript: API современных браузеров

    Автор: Джо Марини

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

    11 173 зрителя Выпущено 21 марта 2019 г.

Получите значок об окончании

Инструкторы

Похожие темы

Изучаем JavaScript с помощью воображения — Smashing Magazine

• 10 минут чтения
• JavaScript Кодирование, Вдохновение
• Поделиться в Twitter, LinkedIn

Об авторе

Кайло — старший разработчик React и создатель The Great Sync. Изучив JavaScript, он обнаружил ценность мнемонического визуального обучения… Больше о Кайло ↬

Это история о том, как один маленький осьминог, объясняя концепцию одного новичка, имел для Кайло такой вес и силу, что пробудил его интерес к визуальному обучению и привел к исследованию чего-то, что на самом деле довольно глупо. И все же это изменило то, как он научился писать — и, наконец, понял — JavaScript.

Много лет назад я решил стать старшим разработчиком. Я достиг этой цели! Хотел бы я сказать, что это был вопрос тяжелой работы и настойчивости, но нет, этого было недостаточно. JavaScript стоял у меня на пути, и именно в процессе борьбы с ним я наткнулся на одно глупое предложение в классической книге Марин Хабернекер «Красноречивый JavaScript ». На тему переменных там написано:

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

— Marijn Habernecker

(Большой превью)

Аналогия, подобная этой, относится к категории детских сравнений, предназначенных в основном для новичков, чтобы понять основные понятия. Они веселые и занимательные, но не то, что превратит вас в старшего разработчика.

Но меня поразило. Даже в небольшой степени эта детская метафора сделала меня лучшим разработчиком. Исправлено фундаментальное недоразумение: мы не ставим значения в переменные . Если бы переменные вели себя как ведра или контейнеры, как это могло бы быть правдой?

 const count1 = 10;
константа счетчик2 = счетчик1; 

Как возможно иметь одно и то же значение 10 в двух разных корзинах? Одно и то же не может быть в двух местах одновременно, верно?!

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

Почему весь JavaScript не может быть таким?

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

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

Проблема? Я все еще не был на том уровне, чтобы расшифровывать кипы сухого технического текста. Я хотел больше осьминогов!

Итак, я искал их повсюду. Я искал в Интернете визуальные и абстрактные учебные ресурсы: Google, YouTube, Medium, TikTok и все книги, которые только мог найти. Я обнаружил, что большинство материалов для «визуального обучения» можно отнести к одной из трех групп.

First — это игровой процесс обучения , подобный платформам обучения во время игры CodeCombat и ElevatorSaga. Несмотря на то, что этот тип обучения удивительно креативен и полон историй и персонажей, которые помогают вам создавать настоящие программы с реальными шаблонами, он является процедурным. Основное внимание уделяется использованию концепций, а не погружению в то, что они собой представляют.

Источник: CodeCombat. (Большой предварительный просмотр)

Вторая группа представляет собой графически представленный синтаксис или техническое объяснение . Вы когда-нибудь видели множество яблочных и оранжевых смайликов? Или схемы цикла события ? Они могут превратить страшные концепции в более легкую для восприятия визуальную среду. Они могут быть мощными наглядными пособиями, которые трансформируют плотный технический жаргон. Примеры включают блестящую серию «JavaScript Visualized» Лидии Холли, а также шпаргалки, подобные этой, от Рама Махешвари.

«JavaScript Visualized: Scope» Лидии Холли. (Большое превью)

Третья группа ближе к тому, что я искал: опыт обучения на основе аналогий . Разработчики любят хорошие аналогии. Мы постоянно используем их в постах в блогах и видеоуроках. Они помогают объяснить очень технические понятия. Один ресурс, который я нашел, CodeAnalogies, особенно впечатляет, с аналогиями для всего, от сетей распространения контента до фреймворков MVC.

Источник: CodeAnalogies. (Большое превью)

Но обучение на основе аналогий имеет для меня ограничения. Все аналогии были отключены! Они не имели отношения друг к другу. Они были хороши для того, чтобы обернуть мою голову вокруг изолированной темы, но не для того, чтобы увидеть общую картину. Дело в том, что JavaScript все подключено. Как можно расширить газетную аналогию объектов для описания прототипного наследования?

Наконец-то я понял, что больше всего на свете хочу чего-то запоминающегося . Я хотел объединить все, что я изучал, в визуальный формат, который было бы легко вспомнить, когда мне это нужно — будь то на собеседовании или во время написания кода. К сожалению, большинство аналогий совершенно забываются. Сколько наборов собак, кошек и бананов можно взять?

Еще после прыжка! Продолжить чтение ниже ↓

Создание моих собственных визуальных представлений

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

Меня всегда интересовали методы мнемонической памяти . Это «хаки» памяти, такие как «дворец памяти». Они помогают визуально кодировать большие объемы информации для облегчения ее запоминания. Конкуренты World Memory используют его, чтобы запомнить порядок нескольких колод карт и последовательности случайных чисел.

Основной принцип таков: любую идею можно превратить в образ. Например, массив может представлять собой Ocean Sting Ray . Это хорошо, но все же недостаточно. Хитрость заключается в том, чтобы сделать мысленный образ как можно более странным, смешным и нелепым. Необычные образы остаются в памяти.

Мой первый большой урок

Итак, вот одно из моих самых первых мнемонических представлений массивов JavaScript:

(Большой предварительный просмотр)

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

Это забавное изображение. Но я пытался выучить JavaScript, чтобы получить работу! Если этот нелепый скат-монокль не сделал меня лучшим разработчиком, то он погубил мою цель. Окончательный тест: буду ли я использовать это изображение уличного продавца массива в качестве точки отсчета при кодировании? Неа. Оно оказалось совершенно, совершенно бесполезным.

Мне не нужен был способ запомнить терм массив . Знание того, что у них есть методы поиска, не говорит мне, как я могу выполнять поиск. Даже хвост швейцарского армейского ножа со всеми основными методами массива, такими как .sort() , .push() и .unshift() оказались бесполезными после двухсекундного поиска в Google.

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

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

Мой второй большой урок

После долгих размышлений и многих, многих других неудачных попыток я попытался представить то, с чем всегда боролся: функции . Как будет выглядеть состав функции? Я придумал это довольно плохое представление:

(Большой предварительный просмотр)

Вверху у нас есть глупые десантники, которые представляют параметры. Мы отправляем параметры через вход ( ) , и они попадают в автономный пул (т. е. в тело функции). Они начинают спорить, и так мы запоминаем аргумента .

К сожалению, это тоже попало в корзину. Представление синтаксиса бесполезно. Лучше приобрести знакомство через много практики написания. В аналогии были и опасные изъяны. Предлагаемые параметры и аргументы одинаковы; единственная разница в их месте.

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

Прорыв

Решение должно было стать атомарным. Сосредоточение внимания на самой маленькой концепции дало бы мне первый слой, который я мог бы использовать, чтобы нарисовать картину JavaScript. Я вернулся к нашему дружелюбному осьминогу, где все это началось.

Что хватали щупальца? Ценности!

Значения часто замалчиваются и не кажутся ключом к разгадке тайн JavaScript. Но эта простая идея стала для меня прорывом: если код течет, мы можем представить его течение как океан или реку. Что мы находим в этом потоке? острова!

(Большой предварительный просмотр)

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

От аналогий к моделям

Слой за слоем я начал выстраивать свое видение JavaScript, сосредотачиваясь на том, что есть вещи и как они связаны с другими вещами. Сначала появились острова. Затем появились джинны, злые колдуны, летающие корабли и пилоты-черепахи. Мое волнение росло по мере того, как меньшие слои, основы, могли быть объединены для получения общего понимания более сложных тем, таких как замыкания.

Каждое изображение не было простой аналогией. Это была ментальная модель — способ мышления. Это давало линзу для интерпретации каждой концепции, но требовало воображения. Я называю их imagimodels .

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

Создание запоминающейся многослойной вселенной

С помощью этого подхода был построен абстрактный мир JavaScript:

(Большой предварительный просмотр)

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

Повествование — это то, что в буквальном смысле привело в картину другие концепции. Здесь мы видим замыкание:

(Большой предварительный просмотр)

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

(Большое превью)

Я обнаружил связь между «контекстом казни» и фразой «палач получил порчу», которая вдохновила иллюстрацию средневекового палача, держащего топор в одной руке и проклятие или колдовское заклинание в другой. другой.

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

Напрашивается вопрос, что такое функция? Это результат порчи или казни? Это сам призыв? Только четкое понимание объектов помогло бы мне понять, что здесь происходит на самом деле.

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

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

(Большое превью)

Торжество альтернативных подходов к обучению

С этого момента мое путешествие по изучению JavaScript было сплошным солнечным светом и ромашками? Помогло ли создание этого мира мне сдать все тесты по JavaScript, которые мне нужно было пройти, чтобы получить эту работу на высшем уровне?

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