Глядя на цифровое изображение часов в правом углу ноутбука, придумывая случайные мысли о старых мексиканских песнях. Сегодня вечером, кажется, нужно написать о процессе, а время уходит. Но он не совсем работает, не так ли? 52 внезапно превращается в 53, и все: ни настоящего саспенса, ни магии, ни романтики.

Болеро начинает играть в старом музыкальном автомате в моей голове, El Reloj Роберто Кантораля. Погружаясь от боли среди ярких гитар трио, он просит часы не чтобы отметить часы. Он умоляет часы остановить время в своих руках. Так здорово: раньше у часов были стрелки, и они держали в них неумолимое течение времени, наше свидание с судьбой могло быть перенесено из-за серии звуковых тик-тиков и ...

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

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

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

Я решил потратить время, которое я выделил, на исследование обязательного сообщения в блоге, чтобы попрактиковаться, написав очень простой и очень маленький JavaScript самостоятельно. Если позволит время, кхм, я могу даже написать о своем опыте этого. Итак, вот и мы. Что я сделал?

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

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

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

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

После добавления события нажатия клавиши и запроса браузера «слушать» и реагировать при каждом нажатии клавиши я не был удовлетворен. Да, это явно было началом какого-то совершенно простого интерактивного опыта. Но помимо этого, всякий раз, когда мы показывали текст (или добавляли HTML-элемент к div, если вы настроены на такой язык), он просто появлялся на экране. «Ну, это довольно грубо, - подумал я. Разве не было бы лучше, если бы мы могли постепенно проявлять и затемнять текст с экрана? Как бы мы это сделали?

Звоню в Google и Stack Overflow, звоню друзьям!

И, конечно, выход есть. Есть много способов. Сначала я посмотрел, как это сделать с помощью vanilla JS с помощью неизвестного друга Codepen, известного под именем istref:

Что ж, это круто. Но казалось, что нужно много работать для чего-то, что мы будем использовать все время. Так что я продолжал искать и наткнулся на библиотеку jQuery и ее эффекты анимации. Прочитав документацию, я установил jQuery для этого проекта и вуаля, с помощью простого fadeIn () у меня было то, что мне было нужно.

На самом деле, хотя я написал этот короткий абзац примерно за пятнадцать секунд, мне потребовалось добрых полчаса, чтобы изучить различные способы постепенного появления и исчезновения элементов в JavaScript, а затем прочитать jQuery, установить его и получить fadeIn () и fadeOut. () для правильной работы в моем небольшом приложении. Но оно того стоило!

Хорошо: у нас есть приложение, которое говорит пользователю, чего не следует делать, и не грубит ему визуально. Но что происходит, когда пользователь щелкает кнопкой мыши? Должен ли он быть в конкретном div, на кнопке, в промежутке? Мы начали интерактивное повествование с диалога методом проб и ошибок, но что дальше? Я не хотел использовать кнопки, как у нас раньше, я подумал, что было бы круто немного поэкспериментировать с ожиданиями. «Если б / у щелкнет по экрану, в любом месте экрана ничего не должно появиться», - подумал я.

Возможно, пошел дождь.

Я где-то читал, что существуют различные API для звуковых библиотек, музыки и звуковых эффектов. И, конечно же, в JavaScript должны быть способы обработки звука. Итак, я вернулся в Google ... и Google вернулся ко мне. Прочитав множество различных способов обработки звука, я попал в звуковую библиотеку Google в разделе "Действия в Google". Используя элемент HTML Audio в своем коде, вы можете получить доступ к этому API звуков через URL-адреса, которые приводят к определенным звуковым эффектам. . Я нашел красивый эффект дождя, получил URL-адрес, а затем создал в своей программе новый элемент Audio, назначив его переменной. Как только у нас это будет, нам нужно только .play () и .pause (), чтобы активировать звук или песню. Довольно здорово.

Часть процесса обучения программированию на практике - это тратить (инвестировать? Тратить впустую?) Массу времени на поиск неправильных ответов в нужных местах или на поиск правильных ответов в неправильных местах. Это случалось со мной много раз, особенно в этом случае. Разобравшись, как включить звуковые эффекты дождя в приложение, я хотел, чтобы звук - да - постепенно появлялся и затухал. Я обнаружил, что это не так просто (по крайней мере, для меня). Изучив различные решения этой проблемы и взломав код разными способами, я сдался. Полагаю, часть процесса.

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

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