Спокойное, спокойное руководство о том, как включить базовый JavaScript в ваш следующий дизайн-проект.
Какие-то глупые предположения
В этой статье предполагается некоторое знакомство с HTML, CSS и базовым JS. Если у вас нет опыта работы с какой-либо из этих технологий, не беспокойтесь!
Здесь вы можете найти отличное руководство для начинающих (четыре части):
Дзен JavaScript
JavaScript имеет плохую репутацию из-за своей экосистемы, а также из-за того, что он обычно используется способами, которые никогда не предназначались для использования в первую очередь.
При правильном использовании добавить интерактивность, прием основных данных и манипулирование веб-страницей очень просто; придавая вашим проектам глубину и богатство, которых в противном случае они могли бы не иметь.
Для кого предназначено это руководство
Это руководство предназначено для всех моих коллег-дизайнеров, которые просто пытаются сохранить реальность, сделать ее мягкой и могут быть ошеломлены растущей сложностью современной сети.
Отдыхай спокойно. Вы не являетесь фронтенд-разработчиком. Вы дизайнер, и это прекрасно. Небольшое знание JavaScript может помочь вам продвинуться как в профессиональном, так и в личном плане. Слишком много JS создаст вам проблемы. Я видел и испытал это на собственном опыте.
Знать немного лучше, чем ничего не знать, и еще лучше,
чем знать слишком много.
Последнее замечание, прежде чем мы начнем
Если работодатель ожидает, что вы будете и дизайнером, и полноценным
разработчиком (front-end/back-end/full-stack), бегите.
Не идите и не бегите от этого человека.
Наша работа как всесторонних профессиональных дизайнеров заключается в разработке рациональных, эффективных решений и поддержке наших замечательных команд разработчиков, а НЕ в том, чтобы БЫТЬ КОМАНДОЙ РАЗРАБОТЧИКОВ!
Псссс! Для разработчиков, читающих это, мы любим вас всех! ❤
С этим покончено, давайте начнем.
Как разумно реализовать JavaScript
Для манипулирования DOM
Если у вас есть элемент, вы можете выбрать его. Если вы можете выбрать его, вы можете манипулировать им и другими связанными с ним элементами с помощью JavaScript.
Это очень простой пример, в котором используется библиотека с именем domready, чтобы проверить, все ли элементы в DOM были загружены, и, если они есть, сообщает моему предварительному загрузчику, чтобы он ушел, с некоторыми анимациями из animate. .css».
Что дает нам эффект ниже:
Для работы с формами
Если у вас есть данные формы, вы можете получить их, просто выбрав их с помощью селектора запросов и отобразив их в представлении с помощью простой функции.
В приведенном ниже примере наша функция предотвращает поведение по умолчанию при отправке формы через «event.preventDefault()», что вызывает перезагрузку страницы, проверяет, содержит ли поле ввода знак «@» для электронной почты с помощью тернарного оператора. , а затем интерполирует его в область электронной почты ниже.
Примечание: если вас интересуют объявления стрелочных функций, вы можете ознакомиться с ними здесь. Мне самому они очень нравятся, и теперь они поддерживаются практически всеми браузерами.
Это должно дать нам визуализированный вывод, подобный этому:
Для работы с датами и временем
Всякий раз, когда я имею дело с расчетом дат и/или времени в своих проектах, я почти всегда использую Moment.js из CDN. Это просто делает жизнь намного приятнее и упрощает работу с JS-объектом Date.
Вы можете узнать больше о Moment.js здесь.
Этот подход отлично подходит для отображения текущего года для уведомления об авторских правах или времени для определенного сообщения.
Для приема внешних данных через API
Вы можете относительно легко получить данные из внешнего API с помощью встроенной команды выборки JavaScript.
Если все пойдет хорошо, это должно дать нам что-то вроде этого:
В итоге
На самом деле, есть так много способов, которыми хорошо сбалансированная реализация JavaScript может помочь добавить глубину и богатство вашим дизайнерским проектам.
Будь то обмен функциональными возможностями с вашей командой или предоставление свободы творчества при создании иммерсивного пользовательского опыта, JavaScript может помочь вам в этом.
Дальнейшее обучение
Для получения дополнительной информации о работе с JavaScript на практике я настоятельно рекомендую бесплатный видеоурок здесь.
Если вы заинтересованы в более глубоком изучении того, что может предложить JavaScript с точки зрения дизайна, я настоятельно рекомендую серию книг здесь.
Наконец, как всегда, если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях ниже, и я свяжусь с вами, как только смогу.
Удачи и хороших сценариев! :D
Ник Лоуренс Дизайн
Веб-сайт | "Портфолио"
