Для всех, кто плохо знаком с JavaScript, есть общая неоспоримая истина; JavaScript - это головная боль. Если вы, как и я, пытаетесь выучить интерфейсный язык после того, как изучили надежный бэкэнд на таком удобном языке, как Ruby, вы быстро поймете, что JS нам не за спину!

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

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

  1. Чтобы использовать JavaScript, вам нужно изучить сразу несколько вещей.

Есть дополнительные темы, которым вы должны научить себя, чтобы создать интерфейсное приложение с помощью JavaScript. Для новичка это может быть очень сложно. Одна из дополнительных функций, которую вам нужно изучить, чтобы на самом деле писать JS, - это как писать HTTP-запросы (AJAX) через RESTful JSON API. При написании JS-кода для веб-браузера вам необходимо иметь возможность создать HTTP-запрос на другой веб-адрес, проанализировать результат этого HTTP-запроса, чтобы получить желаемую информацию, а затем что-то сделать с этим результатом. Изучение того, как это сделать, помимо обучения написанию кода JS, является трудным и может занять месяцы практики.

2. JavaScript - это асинхронный язык программирования.

Большинство языков программирования можно разбить на конкретные шаги:

  • Сначала сделайте это и дождитесь завершения, прежде чем переходить к следующему.
  • Затем сделайте это и дождитесь завершения, прежде чем переходить к следующему, следующему.
  • и т.п.

JavaScript работает асинхронно:

  • Сначала сделайте это и переходите к следующему, но сообщите мне, когда оно закончится.
  • Затем сделайте что-нибудь еще и сообщите мне, когда это закончится.
  • [тогда позже]
  • Наконец, сообщите мне, что первое дело сделано.
  • Наконец, сообщите мне, что вторая вещь закончена. (но не обязательно в таком порядке).

Асинхронный код важен, когда дело доходит до загрузки браузера для лучшего взаимодействия с пользователем. Если JS был написан синхронно, пользователь мог ждать, чтобы увидеть важные функции на вашей веб-странице. Это создает неудобства для пользователя и препятствует успеху вашего приложения.

3. JavaScript работает с очередью событий.

Очередь событий невидима, но, по сути, это означает:

Когда [ЧТО-ТО ПРОИСХОДИТ], я хочу, чтобы вы сделали следующее [КОД ДЛЯ ВЫПОЛНЕНИЯ ЗДЕСЬ].

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

Асинхронный JavaScript как шедевр искусства

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

Пожалуйста, найдите минутку, чтобы полюбоваться моим шедевром !!! Разве это не мило ?! :)

Итак, цель всего этого - показать вам небольшую магию JS! Я создал четыре разные функции, событие щелчка и две функции внутри функции setTimeout. Некоторые из этих определений функций включают вызов других функций. Нижняя строка drawShapeThree (drawshapeTwo (drawShapeFour ())) запускает программу. Вы можете решить, как вы хотите начать работу, поскольку вы инженер. В JS функции считаются первоклассными гражданами. Это означает, что с ними можно обращаться как с любой другой переменной: их можно присвоить переменной, сохранить в структуре данных, передать в качестве аргумента другой функции или быть возвращаемым значением другой функции (learn.co «Fns как данные первого класса: поведение »).

В правом верхнем углу холста я включил диаграмму console.log, которая показывает порядок, в котором срабатывала каждая функция. Из-за асинхронного поведения JavaScript фигуры, созданные внутри функции setTimeout, автоматически запускались через x промежутков времени, и мне не приходилось вручную указывать им на это. Эта функция может быть полезна в тех случаях, когда вы хотите, чтобы определенные элементы или функции отображались в браузере в определенное время.

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

Давайте посмотрим, какие шедевры я смогу создать, немного изменив ситуацию…

В этом примере я немного изменил ситуацию. Я добавил третий setTimeOut, который отображал сердце на экране. Вы можете видеть на диаграмме console.log, что сердце было зарегистрировано четвертым в списке. Первая функция setTimeOut, которая создала большой фиолетовый кружок на экране, заняла 8-е место в списке! Это означает, что наша программа прочитала этот бит кода и увидела, что его нужно отложить, поэтому перешла к следующей функции и, по прошествии x времени, вернулась наверх и выполнила эту функцию асинхронно, в то время как остальная часть программы была все еще течет! Между тем, я два раза случайным образом щелкнул холст, чтобы добавить милые синие луны, чтобы действительно оживить мое произведение искусства. ;)

Прикольно видеть асинхронную магию при работе с красивыми красочными формами! Попробуйте следовать за кодом, диаграммой console.log и различными фигурами, чтобы развернуть рабочий процесс этого шедевра!

Последние мысли

Я надеюсь, что идея асинхронного JavaScript как шедевра искусства помогла вам лучше понять, как все работает под капотом. Если вы хотите проверить свои художественные способности, вот репо, содержащее код, который использовался для этого блога. Клонируйте репозиторий в свой локальный репозиторий и откройте файл index.html в своем браузере. Поиграйте с кодом! Добавить больше! Посмотрите, какие шедевры вы сможете создать! P.S Не забывайте сохранять и обновлять каждый раз, когда делаете что-то новое! ;)

Https://github.com/ChristyTropila/Blog-Art

Ресурсы

«Https://learn.co/tracks/web-development-immersive-3-1-module-three/front-end-web-programming/recognizing-javascript-events/fns-as-first-class-data-do -поведение"

Https://css-tricks.com/the-shapes-of-css/#circle-shape

Http://blog.thefirehoseproject.com/posts/why-is-javascript-so-hard-to-learn/