Пошаговое руководство по созданию генератора случайных цветов с помощью JavaScript.
Если вы новичок в JavaScript, вы, вероятно, многое узнали о том, как работают типы данных, логика, функции и т. д. Это хорошо; Чтобы когда-нибудь использовать JS в более сложных проектах, вам нужно начать с основ. Однако, в зависимости от вашего внимания, вы можете вскоре почувствовать сильное желание применить свои навыки JS на реальном веб-сайте. Это может быть немного сложно (но не так сложно, как регулярные выражения, amirite), но одним из самых простых способов, с которого вы можете начать, является, как вы уже догадались, генератор случайных цветов. В этой статье я проведу вас через шаги, которые я использовал, чтобы построить его самостоятельно.
1. Добавьте шаблонный HTML
Если вы используете VS Code, вы можете ввести ! в пустой HTML-документ, а затем нажать Enter, чтобы добавить эту часть (не уверен в других текстовых редакторах), если вы этого не сделали. не знаю, что уже. Под шаблоном я добавил ссылки на документы CSS, которые использовал для этого проекта. Я рекомендую хранить ваш CSS в отдельном файле, чтобы ваш HTML-файл не стал слишком большим и сложным. Поскольку JavaScript, который мы будем писать, не очень длинный, я добавлю его прямо в файл HTML внутри тега <script>
, который вы увидите на шаге 3. Если вы хотите иметь отдельный файл JS и связать его в свой HTML-файл, вы можете сделать это:
2. Создайте «скелет» HTML
Теперь, когда мы добавили шаблон HTML и связали наши документы CSS в <head>
, давайте добавим тело и создадим наш HTML. Как видите, функция getNewColor()
будет выполняться всякий раз, когда загружается страница. Подробнее об этой функции в следующих шагах.
На картинке выше я добавляю <div>
, который содержит пару заголовков, сообщая пользователю, где он находится и что делать. Затем я добавляю еще один <div>
, который содержит тег <span>
, который в конечном итоге будет заполнен шестнадцатеричным кодом и будет отображаться как текст на странице. Затем я вставляю кнопку, которую пользователь нажимает для создания нового HEX-кода. Это делается с помощью функции getNewColor()
, которую я скоро объясню.
3. Добавьте JavaScript!
Теперь мы находимся в точке, где начинает происходить настоящее волшебство. Вы взволнованы? Я могу сказать. Вот как это сделать:
Для относительно простой программы, подобной этой, мы можем выполнить то, что нам нужно, с помощью только одной функции, вышеупомянутой функции getNewColor()
. Для этого генератора давайте использовать коды HEX для определения цвета, но также возможно использование значений RGB.
Давайте сначала поместим все возможные HEX-символы (целые числа 0–9 и буквы A-F) в виде строки в переменную с именем symbols
.
Затем давайте инициализируем переменную color
с помощью хеш-метки в виде строки. Эта переменная будет изменена в цикле, описанном ниже.
Давайте теперь создадим цикл, который выполняется 6 раз, так как в шестнадцатеричном коде 6 значений. Для каждой итерации цикла одно случайное значение из строки symbols
добавляется к переменной color
, которая, если вы помните, начинается с # в строковой форме. В этот момент всякий раз, когда мы вызываем getNewColor()
, мы получаем новый HEX-код. Теперь давайте применим этот код к нашей HTML-странице.
По моему опыту, лучше всего поместить <script>
tag в конец <body>
tag. Некоторые яростно возражают против этого, и они могут быть правы, но я не буду обсуждать это в этой статье. Пожалуйста, устройте войну с клавиатурой в разделе комментариев ниже, если вы чувствуете себя склонным, так как это хорошо для вовлечения.
4. Примените JS к файлу HTML
Круто, теперь у нас есть функция, которая дает нам случайный HEX-код. Однако это бесполезно, если мы не применим его к нашему HTML. В этом случае было бы неплохо изменить фон всей страницы, чтобы у пользователя был предварительный просмотр случайного цвета, и поместить шестнадцатеричный код в текстовом формате, чтобы он мог его скопировать. Сначала нам нужно определить эти поведения в нашей функции:
Все еще работая внутри функции getNewColor()
, мы можем получить доступ к свойству стиля background
с помощью первой строки кода, которую вы видите на фотографии выше. Мы могли бы также использовать backgroundColor
, что, кстати, переводится в CSS как background-color
. На этом шаге мы устанавливаем переменнуюcolor
, которую мы случайно определили в цикле, в качестве цвета фона страницы.
Во второй строке кода мы получаем доступ к ранее определенному тегу <span>
по его идентификатору «hex». Чтобы добавить переменную color
в текстовую форму, мы можем использовать метод .textContent
, который я использовал здесь, или метод .innerHTML
, чтобы добавить color
к тегу <span>
. См. ссылку в конце этой статьи, чтобы узнать больше о разнице между ними. Таким образом, как мы разместили наш HTML-код выше, этот текст будет отображаться непосредственно над кнопкой, чтобы пользователь мог видеть точный отображаемый цвет и копировать его, если он хочет.
В целом наш JS выглядит так:
5. Сообщите программе, когда запускать функцию
Нет смысла создавать функцию, если мы никогда ее не запустим, поэтому давайте теперь сообщим нашей программе, когда должна вызываться наша getNewColor()
функция. В этом случае давайте запускать getNewColor()
всякий раз, когда загружается страница и когда нажимается кнопка «Получить новый цвет!». Вот как мы это делаем:
6. Добавьте стиль
Вы можете сделать эту часть по своему желанию или не делать вообще, но вот стиль, который я использовал в этом проекте, с style.css слева и responsive.css справа:
7. Давайте проверим это!
Если вы правильно выполнили описанные выше шаги, это должно происходить при открытии файла в браузере:
Спасибо, что дочитали до этого места! Я надеюсь, что вы нашли это полезным. Помните, иногда можно читать статьи и следовать руководствам, но вы должны делать это только для изучения концепций. Как только вы решите, что усвоили концепции, попробуйте создавать программы самостоятельно. Нет, вы, вероятно, не получите все правильно с первого раза, но столкнувшись с проблемой и выяснив, как решить ее самостоятельно, используя концепции, которые вы изучили, вы станете лучшим программистом.
Если вы нашли эту статью полезной, я был бы признателен за хороший комментарий или несколько аплодисментов, чтобы я мог знать, какой контент люди считают полезным, и чтобы я мог сосредоточиться на написании этого контента в будущем.
Как всегда, удачного кодирования!
Посмотреть этот проект в действии
Ссылка на репозиторий этого проекта на GitHub
Ссылка на статью о различиях между .innerHTML и .textContent
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.