В рамках моей финальной оценки проекта Фазы 1 в школе Flatiron мне нужно было создать простое приложение, сочетающее в себе возможности внешнего интерфейса (HTML, CSS, Javascript). Что еще более важно, мое приложение должно было успешно взаимодействовать с общедоступным API по моему выбору, а затем «переводить» эти данные, используя формат связи JSON. По иронии судьбы, самая большая проблема, с которой я обычно сталкиваюсь при решении такой задачи, связана не с опытом кодирования, а скорее с творческой идеей. Кто-то слишком привыкает к привычке копировать чужой дизайн и «презентацию продукта», но воображение, необходимое для того, чтобы придумать эти идеи, всегда было моей слабостью. Тем не менее, чтобы завершить этот проект, я черпал вдохновение из дорогого источника моей жизни: кинопроизводства.
Информация, полученная с помощью API, может использоваться бесконечным образом. В моем случае я подумал, что было бы интересно, если бы я получил доступ к API OMDb и манипулировал его данными фильмов для личного хранения и интерактивности DOM. Для этого я использовал fetch-package — модуль, инкапсулированный в среде Node.js. В этом модуле у вас есть доступ к методу fetch(), который позволяет пользователю делать запросы через конвейер HTTP.
function checkInput(e){
e.preventDefault()
let evento = e
let director = ''
let title = ''
if (e.target.director.value.trim() !== director){
director = e.target.director.value.toLowerCase()
title = e.target.title.value.toLowerCase()
fetch(`http://www.omdbapi.com/? apikey=6e17c072&t=${e.target.title.value}`)
.then(resp => resp.json() )
.then(resp => handleSearch(evento, resp, director, title))
}else{
alert("Sorry, try being a little more specific when you type in the director!")
}
e.target.reset()
}
С этой функцией происходит много всего, но я хочу, чтобы мы сосредоточились на выделенных частях. Чтобы эта функция сработала, должно произойти событие. Под событием обычно понимается действие, выполняемое над определенным элементом DOM, которое обычно вызывается пользователем приложения. Чтобы перехватывать и обрабатывать определенные события, пользователи Javascript обычно выполняют метод .addEventListener(). Этот метод можно настроить для идентификации нескольких типов событий в зависимости от элемента DOM, который они должны «отслеживать». В этом конкретном случае метод использовался для ожидания отправки формы. Другими словами, это означает, что метод ожидает, чтобы увидеть, отправляет ли пользователь когда-либо информацию через элемент формы HTML. Если это событие происходит, метод addEventListener() позволяет вам выполнить функцию обратного вызова, которая обрабатывает эту ситуацию, и именно тогда функция checkInput(e) встает на место.
После выполнения checkInput(e) первое, что я делаю, — это сохраняю объект e в переменной evento. Объяснение этому будет дано чуть позже, а пока давайте рассмотрим следующую выделенную часть кода: вызов fetch(). Fetch запросит доступ к любому предоставленному приемлемому URL-адресу. Есть много способов, которыми вы можете использовать запрос на выборку, но тот, который я использую, и самый простой, — это метод GET. Если этот метод будет успешным, он просто запросит информацию, которую вы запрашивали, в API и вернет ее вашему приложению. У API есть много разных способов, которыми они предписывают вам структурировать свой запрос, и именно так OMDb ожидает, что их запросы будут структурированы.
API OMDb позволяет пользователю искать определенное название фильма. Чтобы позволить пользователю выполнять этот поиск через мое приложение, я просто попросил его указать название фильма и имя режиссера через HTML-форму. Если эта информация отправлена, это конкретное событие инициируется и перехватывается с помощью установленных мной методов Javascript. Вызывается функция checkInput(e), и, как было сказано ранее, у нас есть доступ к объекту события. Объект события имеет свойство с именем .target, которое позволяет нам проверить, какой конкретный элемент вызвал всю эту ситуацию, в данном случае это был элемент HTML-формы. Более того, если вы также получите доступ к свойству e.target.value, вы можете напрямую получить информацию, предоставленную пользователем через этот элемент. Поскольку в моей форме было два источника ввода, нам нужно указать, к какому из них обращаться. Как видно из запроса на выборку, fetch(`http://www.omdbapi.com/? apikey=6e17c072&t=${e.target.title.value}`), текст область, которая ожидала значение заголовка в нашем элементе формы, была доступна для начала поиска. Вот так, благодаря могучей силе объекта события, мы быстро получили представление пользователя. Но не только это, мы также получили информацию относительно того, какой элемент за это отвечал, что в дальнейшем позволяет нам контролировать, что и где делать в нашем приложении. Вот почему я сохраняю объект события в переменной, потому что я могу в дальнейшем предоставить все его возможности другим функциям, которым он может понадобиться (например: handleSearch(evento, resp, директор, название)).
Когда я закончил первый набросок своего проекта, у меня было много переменных в глобальной области видимости, потому что я не понимал, как получить доступ к различным частям DOM в локальной области. Как только я успешно нашел фильм, я выполнил другие функции, которые добавили изображения, элементы div и кнопки в веб-интерфейс. Однако, если мы вернемся к приведенному мной примеру формы, все эти элементы не могут быть динамически добавлены внутри элемента формы. Обычно вы хотели бы добавить эти элементы в отдельные разделы вашего HTML-кода, но я не мог понять, как это сделать без помощи глобальной области видимости. Вот почему, на мой взгляд, лучшее понимание объекта события значительно улучшило код моего проекта. Если вы обращаетесь к свойству e.target, вы получаете элемент HTML, вызвавший такое событие. Но я не понял, что тогда я мог бы использовать еще одно свойство с именем .parentNode, которое позволяло мне легко перемещаться по HTML-коду без помощи глобальных переменных и области видимости. Если бы я подозревал, что моя HTML-форма оказалась завернутой в раздел ‹header›, я мог бы просто сказать: e.target.parentNode и проверить, так ли это на самом деле. И как только я это сделал, я мог либо добавлять или удалять элементы в моем заголовке, либо начинать навигацию по своему HTML-коду, пока не находил место, в котором я хотел выполнить свое следующее действие. Как только я усвоил эту концепцию, единственное, что осталось, что напугало меня до смерти, — это невероятные тайны CSS и то, как вещи перемещаются в DOM. Но Javascript стал намного проще благодаря объекту события.
