Пишите JavaScript в своем браузере без проблем

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

Такой широкий охват позволяет новичку легко создать программу на JavaScript и поделиться ею с друзьями. В отличие от остальной записанной истории вычислений, здесь не требуется загрузки, установки или настройки. И не повредит, что в JavaScript используется синтаксис фигурных скобок, аналогичный синтаксису многих других профессиональных языков, таких как Java и C #. Это означает, что усилия, которые вы тратите на изучение синтаксиса JavaScript, никогда не будут потрачены зря.

К сожалению, при написании кода JavaScript возникает множество проблем.

Но есть некоторые камни преткновения. Одно из препятствий - среда программирования. Если вы только начинаете учиться программировать, лучшей отправной точкой является IDE, сочетающая язык и инструмент редактирования. Подумайте о чем-то вроде Visual Basic или Scratch, где есть непрерывный опыт, который простирается от написания вашей первой строки кода до отладки последней. Хорошая IDE предлагает ключевые слова, выявляет ошибки и позволяет легко увидеть, что вы сделали. Он позволяет вам выполнять пошаговый код во время его выполнения, по одной инструкции за раз - не только для обнаружения ошибок, но и для того, чтобы вы могли узнать, как выполняется код. Для новичка эти детали определяют разницу между загадочным и запутанным опытом и простым потоком.

К сожалению, при написании кода JavaScript возникает множество проблем. Да, вы можете использовать мой любимый редактор кода VS Code и (с небольшими проблемами) настроить его достойный отладчик Chrome. Но опыт программирования не совсем удобен для новичков. Редактор наполнен функциями, модель конфигурации - это самостоятельный учебный проект, и есть много способов ошибиться.

Сложность IDE JavaScript усугубляется тем фактом, что первый шаг в JavaScript - крутой. Даже приложение на чистом JavaScript включает в себя сочетание частей, работающих вместе: файла HTML, таблицы стилей CSS и файла JavaScript с кодом. Создать их и соединить вместе - не выходит за рамки возможностей новичка, но это тоже не легкий старт - и редакторы JavaScript, такие как VS Code, не могут многое вам помочь.

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

Подготовленные примеры предлагают лучшее из обоих миров. Они позволяют новичкам начать изучать реальный код (а не играть в симулированную игру "двигай черепаху"). Но они не просят их сами установить все строительные леса. Любой, кто вырос в прошлом тысячелетии, копируя небольшие программы BASIC из журналов, знает, что вам не нужно понимать каждую часть чужой программы, чтобы чему-то научиться.

Если вы раньше не использовали CodePen, это одна из многих браузерных песочниц JavaScript. Все в порядке. Но CodePen особенно удобен и прост в использовании для новичков.

В CodePen каждый пользователь получает панель управления, на которой он может сохранять свои собственные примеры, и вы можете легко разветвить чужой проект, чтобы начать добавлять свои собственные настройки. Сообщество огромное и благосклонное. Но, пожалуй, самая приятная часть - это интерфейс. Редактор чистый и лаконичный. Цикла редактирования-сохранения-обновления отсутствует, потому что предварительный просмотр веб-страницы обновляется всякий раз, когда вы вносите изменения. И вы можете легко изменить размер окон, чтобы сосредоточиться только на чем-то одном (например, на коде JavaScript) или для одновременного просмотра HTML, CSS и JavaScript.

Все в CodePen подключается автоматически. Написанные вами функции JavaScript сразу же становятся доступными для вашей страницы, CSS применяется автоматически, а HTML содержит только содержимое страницы (что обычно находится в разделе <body>). Он аутентичный, но при этом легкий. Опытные пользователи могут легко прикрепить предустановленные библиотеки и фреймворки JavaScript, такие как React. Новички могут сосредоточиться на простых упражнениях по HTML или CSS или изучить одну концепцию JavaScript за раз (как в этих руководствах).

Когда моя дочь работает над упражнением CodePen, рабочий процесс выглядит примерно так:

  1. Возьмем очень простой шаблонный пример, например страницу с несколькими текстовыми полями и пустой предварительно зашитой функцией JavaScript. Например, этот простой, но скучный стартер Гадалка.
  2. Напишите больше кода, отформатируйте его с помощью CSS и сделайте его собственным. Обычно я даю ей небольшую справочную информацию о конкретной концепции JavaScript (например, условной логике) и предлагаю несколько предложений о том, что реализовать дальше. Она сохраняет конечный продукт в своей учетной записи на CodePen.
  3. Покажи это ее друзьям.

Вот что лучше: учащиеся получают возможность создать (а иногда и исправить) настоящую программу. Этот шанс проявить творческий подход очень мотивирует. Часто это лучше, чем пройти подробное руководство, например, в отличных видео по Khan Academy.

Очевидно, что редактор CodePen не приближается к редактированию VS Code, но все же на удивление хорош. Сначала мне было грустно жертвовать IntelliSense VS Code, но потом я обнаружил, что CodePen имеет приличную возможность автозаполнения в качестве возможности выбора, скрытую на странице настроек:

Это кажется незначительной деталью, но автозаполнение делает серьезную работу, уменьшая трение для новых учеников. Они могут часами упускать мелкие ошибки, такие как неправильно написанные ключевые слова JavaScript с заглавной буквы - например, написание document.getElementByID() вместо document.getElementById().

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

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

Вы можете попробовать CodePen на https://codepen.io. А чтобы получить бесплатную электронную книгу, в которой используется CodePen для ознакомления детей с JavaScript, посмотрите Небольшое введение в JavaScript с упражнениями и головоломками (и ниндзя).