Итак, несколько дней назад ко мне подошла моя племянница и спросила, умею ли я программировать на JavaScript. Я сказал: Да, а почему ты спросил?. Она сказала, что ей дали курс по JavaScript. Ее учитель порекомендовал ей пройти несколько онлайн-уроков и использовать Repl.it, чтобы поэкспериментировать со своим кодом.

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

Большинству детей в школе, которые не могут освоить программирование или считают его слишком трудным для изучения, затем предоставляется возможность научиться использовать Microsoft Office Word/Excel :-(. Но проблема здесь не в том, что кодирование сложно, а в том, тот факт, что многие дети считают это скучным.

Им нужен элемент дизайна или WYSIWYG-редактор, такой как Visual Studio от Microsoft, который позволяет визуально создавать приложение и одновременно писать код. Например, перетащите кнопку в свое приложение, а затем добавьте код, чтобы кнопка выполняла какие-либо действия при нажатии на нее. Однако вы не можете использовать Visual Studio в браузере, к тому же вам придется немного повозиться с ним, чтобы он заработал.

Что нам нужно, так это приложение с удобством использования Visual Studio, и в то же время мы можем использовать его в браузере, таком как Repl.it, без каких-либо настроек.

Есть онлайн-приложение, которое это делает. Вы можете визуально добавлять компоненты (кнопки, ввод текста, поля…) в редактор, а также писать код, чтобы компоненты выполняли определенные действия. Вы можете попробовать это здесь editor.bragndrop.com.

Давайте создадим совершенно бесполезное приложение. Скажем, вы нажимаете на кнопку, и страница становится красной.

Шаг 1. На панели «Компонент» (слева) нажмите «Элементы управления формой (основной) ”, чтобы расширить его. Перетащите компонент Button в редактор.

Шаг 2. Дважды щелкните кнопку, чтобы сразу перейти к событию нажатия кнопки (или вы можете вручную инициировать событие нажатия на панели «Инспектор свойств» ( справа), нажмите «щелчок, нажатие клавиши, фокус…» рядом с «События») и выберите «щелчок».

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

document.body.style.backgroundColor = «красный»;

Шаг 4. Нажмите «Предварительный просмотр» (справа вверху панели инструментов), чтобы протестировать его.

Если вы застряли на каком-либо из шагов, посмотрите следующее:

Если вы хотите создать дискотеку, замените код в шаге 4 следующим кодом:

var colors = ["синий", "красный", "желтый", "зеленый"];

setInterval(() =› {

// установить цвет фона для случайного изменения каждые 0,5 секунды

document.body.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

}, 500);

Вы должны быть в состоянии создать приложение для дискотеки, подобное приведенному ниже (довольно бесполезно, верно?)

Посмотрите на этот Решатель алгебраических уравнений, который я сделал менее чем за 5 минут. Поскольку это Progressive Web App или PWA, вы сможете сохранить его как APP на своем мобильном телефоне или планшете.