Когда достаточно JavaScript, кажется, что его совсем нет
Итак, вы думаете, что знаете JavaScript. Вы можете писать в изобилии условных операторов, освоили искусство работы со стрелками и с легкостью создавали объекты. Теперь вас просят обновить DOM при реализации функций обратного вызова, и все это звучит как ошибка (это не так). Как эти вещи связаны друг с другом? Что такое модель DOM и где она находится? Были ли вообще необходимы какие-либо из этих вещей?
Они были, и хотя сейчас это может быть неочевидно, вы более чем готовы сделать следующий шаг.
Что такое DOM?
Объектная модель документа, или DOM, содержит весь HTML / XML, отправляемый в ваш браузер. При создании приложений Rails нам было поручено отправлять HTML клиенту через представления, но в JavaScript мы используем DOM. Чтобы обновить информацию, передаваемую в наш браузер, мы используем два отдельных файла: файл HTML (наше дерево / структура) и соответствующий файл JavaScript.
Файл HTML (обозначается .html) устанавливает структуру нашего документа и ссылается на файл JavaScript, в который мы будем писать наш код.
Хотя мы можем редактировать файл, чтобы изменить нашу структуру вручную, мы добавим новые фрагменты информации, написав код в соответствующем файле JavaScript. Чтобы упростить задачу, мы можем присвоить файлу JavaScript аналогичное имя файла (в приведенном выше примере мы вызвали файл JavaScript index.js, чтобы он соответствовал нашему файлу index.html) .
Большой. Так что насчет этого JavaScript?
Теперь, когда мы вроде как понимаем, что такое DOM, давайте поговорим о том, что мы будем делать с известным нам JavaScript.
Как упоминалось ранее, вместо того, чтобы напрямую редактировать наш HTML-файл, мы будем использовать соответствующий файл JavaScript для добавления данных, возможно внести несколько изменений в стиль и настроить любые прослушиватели событий, которые нам понадобятся. Для этого нам просто нужно указать, куда мы хотим включить эту информацию, используя определенные элементы HTML.
Примечание. Слушатели событий - это технический термин, обозначающий все забавные вещи, которые делают сайты интерактивными. К этой категории относятся щелчок по изображению для его раскрытия, параметры фильтрации и сортировки, а также отправка информации.
Как только мы овладеем нашими HTML-фрагментами и примерами, мы сможем использовать еще больше JavaScript, чтобы улучшить взаимодействие с пользователем и изменить наши данные. Вам по-прежнему нужно будет создавать функции и использовать условные операторы, но теперь элементы HTML предоставляют больше динамических переменных.
Достаточно ли я знаю JavaScript?
Краткий ответ: да. Вы знаете достаточно JavaScript, чтобы начать, а то, чего у вас нет, просто займет некоторое время, чтобы зафиксировать его в памяти. В качестве удобного руководства вот два совета, которые помогут вам победить брак JavaScript и HTML.
Разделите свои функции!
Вначале ваш код будет гигантским. Потому что он огромный. (Это так. Примите это.) Это нормально, когда вы пытаетесь понять все, что вам нужно сделать, но не позволяйте этому мешать вам. Если можете, сначала сделайте псевдокодирование своего ответа, сделайте шаг назад и убедитесь, что все работает, а затем приступайте к рефакторингу. Это не новый процесс, и вы, вероятно, знакомы с ним после работы с Ruby, но легко почувствовать, что это невозможно, когда вы смотрите на двадцать строк кода, которые выполняют одну задачу. Сделайте глубокий вдох и начните перемещать вещи.
Отладчик - ваш лучший друг (Console.Log - вторая секунда)
Разобравшись с Прай, Руби стало намного проще. В JavaScript нет Pry, но есть отладчик! Если вы работаете над кодом и хотите его протестировать, добавьте в код «отладчик» там, где вы хотите сделать паузу.
Вы сможете тестировать в консоли, используя все доступные функции и переменные, которые вы объявили. Если вы не совсем в настроении для тестирования, вы можете вместо этого использовать console.log ().
Это просто выведет на консоль какое-то сообщение по вашему выбору в качестве подтверждения того, что все по крайней мере работает. Они неоценимы при использовании прослушивателей событий, поскольку они позволяют вам подтвердить, что ваш слушатель работает правильно, прежде чем добавлять какие-либо условные операторы / логику.
Лучше объяснены опытными профессионалами
Надеюсь, это краткое изложение было полезно, но я не эксперт. Если вы ищете исчерпывающий ресурс по JavaScript и DOM, обратите внимание на следующие:
