التعرف على الكلاس في جافاسكربت JavaScript الدرس | 17 |

الكائنات calss

درس اليوم من اهم الدروس , يجب عليكم تقانه و التدرب عليه عدة مرات لأنه اذا اتقنته سوف يُسهِّل عليكم كثير اشياء في لغة الجافاسكربت, الكلاس اتى تقريباً بديل عن الفنكشن.

الشكل العام له

class User{

           constructor(){

        }

}

var user = new User();

اولاً نكتب class وبعدها نضع اسم للكلاس كما بالشكل السابق وضعناه User يعني إسم للكلاس وبعدها فتحنا اقواس معكوفة و ضمنها نكتب constructor ثم فتحنا اقواس معكوفه مرة ثانيه ,ولكي يعمل هذا الكلاس نكتب خارجه متغير بإسم الكلاس ونعين له الكلمه new و نضع اسم الكلاس.

البديل للفنكشن function في الكلاس هي الميثود methods, الميثود تقريباً بنفس عمل function لكن لا نكتب بالبداية فنكشن نكتب اسم الميثود بالبداية .

مثال

class User{

           constructor(){

        }
         changeBackground(){        }

}

var user = new User();

في مثالنا السابق الميثود هو changeBackground.
لنأخذ مثال مصور للفهم اكثر, نضع اولاً id للوسم body في ملف html كالتالي

ثم نفتح ملف الجافاسكربت و نكتب اكوادنا كما بالصورة التالية

كما نلاحظ بالصورة انشأنا ميثود هو تغيير الخلفية changeBackground ووضعنا الايدي له "body" و اعطيناه الخاصية style.background للتعرف انه نريد تغيير خلفية الصفحة و اعطيناها اللون الاحمر "red", و بالنهاية وضعنا تعريف التغيير عبر user.changeBackgroun و عندما نفتح ملفنا هذا في المتصفح سيظهر كالتالي

توجد طريقة اخرى لعرض البيانات وهي تنفيذ الأوامر الذي ضمن constructor

كما لاحظنا بالاسطر الاخيرة كتبنا windo.load و عيننا له الكلاس User, اي عندما يتم تحميل الصفحة html يتم تنفيذ الكلاس User, و استخدمنا الخاصيه this في constructor و الميثود الذي نريد تشغيلها حتى يتم تنفيذ هذه الأوامر, و سيعرض لنا نفس النتيجه خلفيه حمراء.

سنشرح الان كيفية انشاء كلاس مع باراميتر,يمكن اعتبار البارميتر كمتغير

function car (){

}

class Car{

        constructor(){

       }

}

الفنكشن اسهل من الكلاس لكن الكلاس يلزم بسوق العمل اكثر لأنه نعمل على احدث اصدار من الجافاسكربت.

وضعنا للفنكشن car خاصيتين هما name,model واعطينا عرض البيانات عبر الـ console و انشأنا كلاس Car

أنشأنا زر تشغيل button في ملف html ووضعنا به القيم.

عند الضغط على زر التشغيل و العرض عبر الكونسل عرض لنا النتائج.

لنأخذ مثال عن طريقة عرض البيانات في كلاس .

ونتيجة العرض في المتصفح في كونسل

مثال آخر لطريقة عرض مختلفة

وىالنتيجة اظهار رساله ديالوك كالتالي