الغوص في JavaScript: كيفية إنشاء محول ألوان Hex2RGB

الصورة من قبل Fotis Fotopoulos على Unsplash

في هذه المقالة ، سنقوم بإنشاء تطبيق ويب يحول أكواد الألوان بين Hexadecimal و RGB.

يمكنك العثور على عرض تجريبي هنا وشفرة المصدر هنا.

هيكل المشروع:

هيكل المشروع بسيط جدا.

  1. index.html: يحتوي على بنية التطبيق.
  2. style.css: أنماط الصفحة.
  3. app.js: يحتوي على جميع الكود المطلوب لتشغيل المشروع.

فكرة:

إليك قائمة بالأشياء التي أردت أن يؤديها هذا التطبيق:

  1. عندما يتم كتابة شيء ما في حقل نص لسداسي عشرية ، يجب أن يتحقق التطبيق من صلاحية اللون. إذا كان الأمر كذلك ، قم بتحويله إلى RGB ، اضبطه كخلفية ، ثم ضع قيمة RGB في حقل نص RGB والعكس.
  2. إذا تم كتابة رمز لون سداسي عشري قصير في حقل النص ، فقم بتوسيعه عندما يفقد حقل النص التركيز (ينقر المستخدم خارج منطقة النص).
  3. قم بإدخال الرمز "#" تلقائيًا على الإدخال السداسي.

هيا نبدأ!

index.html و

لقد أنشأت حقلين نصيين بهيئات "hex" و "rgb" على التوالي. إلى جانب كل منها أيقونة svg للخطأ ، والتي تحتوي على فئة مخفية ، بشكل افتراضي.

style.css

إليك مخطط أساسي لجعل العلامات تبدو أفضل قليلاً. أنا تعريف فئتين هنا ،. المخفية و. يُستخدم الأول لإخفاء / إظهار رمز SVG للخطأ والأخير لتغيير لون النص بناءً على لون الخلفية. بشكل افتراضي ، قمت بتعيين النص إلى لون غامق (للخلفيات الساطعة).

app.js

هنا الجزء السحري. سأقوم بتقسيم الكود إلى أجزاء:

أولاً ، نحن نحدد المتغيرات التي تستهدف المدخلات بالمعرف "عرافة" و "rgb". المتابعة التالية ، لدينا وظائف للتحقق مما إذا كان إدخال Hex / RGB صحيح أم لا. يستخدمون إعداد regex الأساسي ويعيدون منطقية. إذا شعرت بالخوف من قبلهم ، فإنني أنصحك بتجربة هذا البرنامج التعليمي.

هنا ، لقد قمت بإجراء تحليل وظيفة تسمى insertHex والتي تتحقق مما إذا كان طول عرافة الإدخال 4 أحرف ؛ أي ، يحتوي على "#" وهو اختصار (على سبيل المثال ، رقم 333) ويستبدل "#" بحرف فارغ. ثم يتحقق ما إذا كان الطول الآن 3 ويوسعه إلى 6 أحرف (على سبيل المثال ، # 123 = # 112233).

الآن نقوم بتحديد وظيفتين يمكنهما تحويل hex إلى rgb والعكس صحيح. إليك التفاصيل التفصيلية ل hexToRgb (يتم توسيع هذا الرمز لشرح كيفية عمل العملية بشكل أفضل):

  1. تحديد صفيف فارغ لتخزين النتيجة.
  2. استبدل رمز "#" ، إذا كان موجودًا ، وإذا كان الطول لا يساوي 6 (أي ، الإصدار المختصر) ، فاتصل بوظيفة editHex أعلاه وقم بتوسيعها.
  3. بطريقة أساسية جدًا ، يعمل سداسي عشرية إلى rgb عن طريق تحويل رمز سداسي عشرية (في الأساس 16) إلى رمز rgb (في الأساس 10). تمثل كل حرفين في كود hex قيمة في كود لون rgb. على سبيل المثال في #aabbcc ، يكون اللون الأحمر (aa إلى الأساس 10) ، والأخضر هو (bb إلى الأساس 10) والأزرق (من cc إلى الأساس 10). لذلك ، في الوظيفة ، نقوم بتقطيع القيمة السداسية ، ونحولها إلى الأساس 10 باستخدام parseInt ، ثم نقوم بتخزينها في الصفيف المحدد.
  4. وأخيرا ، نحن نعيد سلسلة الإخراج.

لوظيفة rgbToHex (هذا مكتوب بمنطق أقصر):

  1. نحن نستخدم regex مباشرة لاستخراج الأجزاء الموجودة داخل الأقواس - أي أن rgb (123،21،24) سيعود 123،21،24.
  2. بعد ذلك ، نستخدم دالة خريطة لإرجاع صفيف جديد ، والذي يحول الرقم إلى القاعدة 16 ، ثم نضع القيمة.

اسمحوا لي أن أشرح هذا الجزء. عندما نستخدم regex لمطابقة الأجزاء الموجودة داخل الأقواس ، فإننا نرجع بيانات النوع 'string'. لتحويلها إلى Base 16 ، يتعين علينا استخدام الأسلوب toString ، مع المعلمة ‘16 '.

الآن ، تُطبّق طريقة toString على أنواع البيانات الرقمية فقط ، لذلك نستخدم parseInt أولاً لتحويل كل عنصر من عناصر المصفوفة إلى رقم ، ثم نستخدم toString (16) لتحويله إلى نموذج سداسي عشري ثم أخيرًا إضافة الحشو لجعله بالضبط 2 الحروف طويلة. الحشو ضروري ، إذا كان لديك شيء مثل "14" ، والذي تريد تحويله إلى ست عشري ، فسيتم إرجاع "e". لكن كود اللون السداسي يحتاج إلى حرفين لكل جزء ، لذلك فإن الحشو مطلوب ، مما يجعله "0e".

ملاحظة: padStart هي ميزة ES8 ، والتي قد لا تكون مدعومة في كل متصفح. للحفاظ على هذا البرنامج التعليمي بسيطًا ، لم أقم بنقله إلى ES5.

3. أخيرًا ، نعيد الصفيف الناتج عن طريق الانضمام إليه وتحويله إلى أحرف كبيرة.

تُستخدم هذه الوظيفة لإضافة علامة الخطأ الصغيرة هذه على الجانب الأيمن من الإدخال ، إذا كان نوع الإدخال الذي تم إدخاله خاطئًا.

إنه يقوم ببساطة بتشغيل محتويات المدخلات (hex.value و rgb.value) من خلال وظائف الفحص الخاصة بكل منهما ويستخدم المنطقية المرتجعة لإضافة / إزالة الفئة المخفية.

الآن نقوم بتحديد وظيفة تأخذ لون الخلفية ثم تحدد ما إذا كانت داكنة أو ساطعة (حصلت على هذا الرمز من StackOverflow). يضاعف قيم اللون الفردية مع بعض الأرقام المحسوبة وإرجاع "الأسود" أو "الأبيض". ثم استخدم وظيفة أخرى لتغيير لون النص بإضافة / إزالة فئة .dark.

إضافة مستمعي الأحداث:

أخيرًا ، سنستخدم جميع الوظائف المذكورة أعلاه من خلال إضافة مستمعي الأحداث.

أولاً ، نقوم بإضافة حدث keyup إلى إدخال سداسي عشرية. يتم تشغيل هذا الحدث في كل مرة يتم فيها إطلاق مفتاح. إليك ما تقوم به الوظيفة:

  1. نحن نتحقق مما إذا كان رمز الإدخال صالحًا ونوسعه إذا كان اختصارًا.
  2. نحن نضبط لون خلفية الجسم على قيمة الإدخال.
  3. نحن نتحقق مما إذا كان اللون ساطع / غامق ونغير لون النص وفقًا لذلك.
  4. أخيرًا ، ندعو وظيفة التحويل ثم نضع اللون المحول في مدخلات RGB.

المستمع الحدث الآخر الذي استخدمناه هو طمس. يتم تشغيله في كل مرة يفقد فيها الإدخال "التركيز" ، أو بعبارات للشخص العادي ، في كل مرة تقوم فيها بالنقر / النقر خارج عنصر الإدخال ، يتم تشغيل التمويه. لذلك من الجيد تعديل عرافة الإدخال!

لذلك ، نتحقق مما إذا كان اللون السداسي صالحًا أم لا ، ثم نقوم بتوسيعه إذا كان قصيرًا ، وأخيراً نقوم بإضافة "#" إذا لم يكن موجودًا. لاحظ أننا نتحقق مما إذا كان الفهرس 0 و 1 يحتوي على "#". يتم ذلك حتى لا يتم تعليق الدالة "#" مرتين.

الآن نقوم بإضافة نفس مستمع حدث keyup إلى إدخال rgb ويتتبع أيضًا نفس سلسلة الخطوات مثل مستمع أحداث hex.

أخيرًا ، نقوم بإضافة مجموعة مفاتيح لإصغاء الحدث إلى المستند بأكمله ، أي أنه سيتم تشغيله لأي من عنصري الإدخال. بداخلها ، نقوم باستدعاء وظيفة errorMark ، التي تضيف رمز الخطأ ، في حالة وجود خطأ ، أو إزالتها إذا كان كل شيء صالحًا.

إليك الرمز النهائي لـ app.js:

خاتمة

يوجد لديك! أعلم أن الكود ليس مثاليًا ويمكن إعادة تشكيله ، ولكن هذا مجرد بداية. إذا كنت ترغب في تحسين هذا الرمز ، فيمكنك المضي قدمًا وفتح العلاقات العامة على repy github.

ترميز سعيد!