مثال بسيط عن كيفية إنشاء الـ class و التعريف به بواسطة الـ html
 |
| كود إنشاء و عمل class بواسطة الـ html و طريقة ظهوره و عمله |
زوارنا الكرام سوف نقوم في البداية بالتعريف ما هو الـ class و ما هو عمله لكي يتبيّن لك عن كيفية عمله و خصائصه قبل أن نشرع في الشرح عن الكود الموجود في درس اليوم .
الـ class هو عبارة عن طريقة لوصف الكائنات التي سوف تُنشأ منه و هو يمثل الشكل العام للكائنات التي سوف تُستَنسخ منه ، و الـ class نستطيع أن نُنشئ منه عدة نسخ و جميع هذه النسخ هي عبارة عن كائنات و هذه الكائنات لا يمكن إظهارها و الحصول عليها من غير class أي أنه يجب أن يتم بناء الـ class أولاً و من ثم تُصدر منه النسخ المُختلفة من الكائنات ، و المُبرمج يقوم بكتابة class لكي يَصف من خلال البرمجة شكل الكائنات التي سوف تصدر من خلال هذا الـ class .
هذا شرح بسيط و مُختصر عن عمل الـ class ، أي أننا بعد تعريفنا للـ class و خصائصه أثناء البرمجة و بعد تسمية هذا الـ class و عند استخدامه سوف يتم تطبيق جميع خصائصة على الكائنات التي بداخله و تتفرع منه . و إذا أردنا تطبيق خصائص هذا الـ class على أي كائن فقط نقوم بإضافة اسم الـ class على هذا الكائن ليتم تنفيذ الخصائص عليه .
أما بالنسبة للمثال البسيط عن الـ class " الذي تجده في الصندوق بالأسفل " أردنا أن نوضح كيفية عمل و إنشاء class بواسطة الـ html و طريقة ظهوره و كيفية عمله .
شرح الكود :
في البداية عند إنشاء أي class يجب أن نضع له تسمية دلالية للتعريف به لكي نعرف لأي كائن سوف يكون موجه هذا الـ class ، و هنا قمنا بتسميته example للدلالية على أننا أنشأنا هذا الـ class كمثال من أجل الشرح ، أي أننا بمجرد رؤيتنا لإسم هذا الـ class في مكان آخر سوف نعرف بأنه مخصص للأمثلة و بمجرد أن نصل إلى مكان أثناء البرمجة و نريد أن نضع مثال للمستخدم عن كائن أو عنصر ما فقط نقوم بتعريف الـ class="example" دون الحاجة إلى تعريفات أُخرى فسوف يتم تطبيق ما قمنا بتعريفه بالبداية على هذا الاسم لجميع الكائنات الموجودة داخل اسم هذا الـ class " نتمنى أن تكون وضحت الفكرة " .
الخصائص الثابتة للـ class المُسمى example كما تشاهد قمنا بوضع لون للخلفية و لون للكتابة و حددنا مكان تواجده بالنسبة للتخطيط و أيضاً اتجاه النص و مكان النص و حجم النص و عرض النص ، و هذه الخصائص الثابتة سوف يتم تطبيقها على جميع الـ class ذات التسمية example .
قمنا بعمل محتوى جديد و هو div و وضعنا الـ class بداخله و قمنا بوضع فقرة بداخله a> و قمنا بوضع مثال داخل الفقرة ، و هنا وضعنا مثال بسيط عن فقرة عنوانها " البحث في google و أخبرنا المتصفح أثناء ضغط المُستخدم على هذه الجملة قم بأخذه إلى الرابط href الذي وضعناه لك و هو www.google.com و أثناء وضع الماوس على عنوان الفقرة قُم بإظهار له title النص التالي search by google ، كما هو موضح بالأسفل .
أي كائنات أو فقرات أو عناصر يتم كتابتها داخل المحتوى div قبل إغلاقه <div/> سوف يتم تطبيق عليه خصائص الـ class الذي قمنا بوضعه داخل هذا المحتوى .
الغرض من بساطة المثال هو معرفة طريقة عمل الـ class و وظيفته و كيف يتم التعامل معه لكي نعرف كيف نُضيف و نُعَدّل على أي class موجود ضمن موقعنا أو مدونتنا .
طريقة كتابة الكود :
بعد تنفيذ الكود يظهر للمُستخدم على الشكل التالي :
إرسال تعليق