jQuery Academy · درس

الاستفادة من سمات بيانات HTML5

تعلّم تخزين البيانات الخاصة بالتطبيق واستردادها مباشرةً داخل عناصر HTML باستخدام سمات البيانات، مما يتيح إنشاء واجهات مستخدم ديناميكية تعتمد بدرجة كبيرة على البيانات.

الاستفادة من سمات بيانات HTML5 درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

التعرّف إلى سمات بيانات HTML5

قدّم HTML5 سمات البيانات للسماح لكم بتخزين بيانات مخصّصة مباشرةً داخل عناصر HTML القياسية.

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

لماذا تُعد سمات البيانات مفيدة؟

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

الفئات/المعرّفات: غالبًا ما يُساء استخدامها للتنسيق أو التحديد، لا لتخزين البيانات.
حقول الإدخال المخفية: تزيد ازدحام DOM، وهي مخصّصة لإرسال النماذج.

توفّر سمات البيانات طريقة قياسية ونظيفة لتضمين البيانات المخصّصة مباشرةً في المكان المناسب لها.

قاعدة التسمية `data-`

يجب أن تبدأ جميع سمات البيانات بالبادئة data-. وبعد البادئة، يمكنكم تسمية السمة كما تشاؤون باستخدام الأحرف الصغيرة والأرقام والواصلات والشرطات السفلية.

data-id="123"
data-status="active"
data-item-price="9.99"

تضمن هذه البادئة القياسية عدم تعارض سماتكم المخصّصة مع سمات HTML الحالية أو المستقبلية.

تضمين البيانات في HTML

يمكنكم بسهولة إضافة سمات البيانات مباشرةً إلى ترميز HTML. وكما هو الحال مع أي سمة أخرى، تتكوّن من اسم وقيمة.

إليكم مثالًا: سنضيف data-product-id وdata-category إلى زر.

<button id="buyButton" data-product-id="456" data-category="electronics">
  Buy Now
</button>

<script>
  // JavaScript goes here later
</script>

الحصول على البيانات باستخدام jQuery

توفّر jQuery أسلوبًا مريحًا جدًا، وهو .data()، لاسترداد القيم من سمات البيانات. إذ تتعامل تلقائيًا مع البادئة data- نيابةً عنكم.

للحصول على سمة محددة، مرّروا اسمها (من دون data-) إلى .data().

<button id="myButton" data-user-id="101" data-role="admin">
  User Profile
</button>

<script>
  $(document).ready(function() {
    const userId = $('#myButton').data('user-id');
    const userRole = $('#myButton').data('role');
    
    console.log("User ID:", userId);
    console.log("User Role:", userRole);
  });
</script>

تغيير البيانات مباشرةً

لا يقتصر استخدام الأسلوب .data() على القراءة؛ إذ يمكنكم استخدامه أيضًا لتحديث سمات بيانات جديدة أو إضافتها ديناميكيًا.

مرّروا وسيطين: اسم السمة (من دون data-) والقيمة الجديدة. يؤدي ذلك إلى تحديث ذاكرة بيانات jQuery المؤقتة، وبالنسبة إلى سمات بيانات HTML5، فإنه يحدّث سمة DOM نفسها أيضًا.

<div id="statusBox" data-status="pending">
  Current Status
</div>

<script>
  $(document).ready(function() {
    console.log("Initial status:", $('#statusBox').data('status'));
    
    // Update the status
    $('#statusBox').data('status', 'complete');
    
    console.log("Updated status:", $('#statusBox').data('status'));
  });
</script>

التعامل الذكي مع أنواع البيانات

من الميزات الرائعة للأسلوب .data() في jQuery تحويل الأنواع تلقائيًا. فعند استرداد سمات البيانات، تحاول jQuery تحويل القيم النصية إلى أنواع JavaScript الأكثر ملاءمة.

تتحول "true" و"false" إلى قيم منطقية.
تتحول "123" إلى رقم.
تتحول "[1,2]" و"{name:'X'}" إلى مصفوفات/كائنات (إذا كان JSON صالحًا).

وهذا يوفّر عليكم التحليل اليدوي!

استخدام عملي: تبديل الحالة

تُعد سمات البيانات مناسبة جدًا لإدارة حالة عناصر واجهة المستخدم. لننشئ زر تبديل بسيطًا يغيّر نصه وحالته استنادًا إلى السمة data-active.

انقروا على الزر لرؤية تغيّر حالته!

<button id="toggleBtn" data-active="false">
  Activate Feature
</button>

<script>
  $(document).ready(function() {
    $('#toggleBtn').on('click', function() {
      let isActive = $(this).data('active');
      
      if (isActive) {
        $(this).data('active', false);
        $(this).text('Activate Feature');
        $(this).css('background-color', '#f0f0f0');
      } else {
        $(this).data('active', true);
        $(this).text('Deactivate Feature');
        $(this).css('background-color', '#d4edda');
      }
      console.log("Active state:", $(this).data('active'));
    });
  });
</script>

نصائح لاستخدام سمات البيانات

ضعوا أفضل الممارسات التالية في الاعتبار لاستخدام سمات البيانات بطريقة نظيفة وفعّالة:

استخدموها لحالة واجهة المستخدم: فهي مثالية لتخزين حالة واجهة المستخدم المؤقتة أو الإعدادات أو المراجع.
تجنّبوا البيانات الكبيرة: لا تستخدموها لتخزين مجموعات بيانات ضخمة؛ حافظوا على إيجاز القيم.
التسمية الدلالية: اختاروا أسماء واضحة ووصفية (مثل data-user-id بدلًا من data-u).
لا تستبدلوا بيانات الواجهة الخلفية: استمروا في جلب البيانات المعقدة من الخادم، ولا تضمّنوها كلها.

اختبار سمات البيانات

تأمّلوا HTML وJavaScript التاليين:

<div id="item" data-price="25.50" data-available="true">
  Product Info
</div>

<script>
  $(document).ready(function() {
    const itemDiv = $('#item');
    const price = itemDiv.data('price');
    const available = itemDiv.data('available');
    
    itemDiv.data('stock', 100);
    const stock = itemDiv.data('stock');
    
    console.log(typeof price);
    console.log(typeof available);
    console.log(stock);
  });
</script>

ما الذي سيظهر في وحدة التحكم؟

مراجعة: إطلاق العنان لسمات البيانات

تهانينا! لقد تعلمتم كيفية الاستفادة من قوة سمات البيانات في HTML5 باستخدام jQuery.

توفر طريقة واضحة لتضمين بيانات مخصصة مباشرةً في HTML.
تجعل طريقة .data() في jQuery استرداد هذه البيانات وتحديثها أمرًا سهلًا للغاية.
يُبسّط التحويل التلقائي للأنواع التعامل مع البيانات.
تُعد ممتازة لإدارة حالة واجهة المستخدم وإنشاء واجهات ديناميكية.

واصلوا التدريب، وستكتشفون طرقًا لا حصر لها لجعل تطبيقات الويب أكثر ذكاءً وتفاعلية!

الأسئلة الشائعة

هل درس «الاستفادة من سمات بيانات HTML5» مجاني؟

نعم — نص درس «الاستفادة من سمات بيانات HTML5» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «الاستفادة من سمات بيانات HTML5»؟

تعلّم تخزين البيانات الخاصة بالتطبيق واستردادها مباشرةً داخل عناصر HTML باستخدام سمات البيانات، مما يتيح إنشاء واجهات مستخدم ديناميكية تعتمد بدرجة كبيرة على البيانات. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «الاستفادة من سمات بيانات HTML5»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

الاستفادة من سمات بيانات HTML5
إنشاء المحتوى الديناميكي باستخدام البيانات
أساسيات دمج قوالب جهة العميل

← العودة إلى jQuery Academy