الكائنات calss
درس اليوم من اهم الدروس , يجب عليكم تقانه و التدرب عليه عدة مرات لأنه اذا اتقنته سوف يُسهِّل عليكم كثير اشياء في لغة الجافاسكربت, الكلاس اتى تقريباً بديل عن الفنكشن.الشكل العام له
class User{constructor(){}}var user = new User();
اولاً نكتب class وبعدها نضع اسم للكلاس كما بالشكل السابق وضعناه User يعني إسم للكلاس وبعدها فتحنا اقواس معكوفة و ضمنها نكتب constructor ثم فتحنا اقواس معكوفه مرة ثانيه ,ولكي يعمل هذا الكلاس نكتب خارجه متغير بإسم الكلاس ونعين له الكلمه new و نضع اسم الكلاس.
البديل للفنكشن function في الكلاس هي الميثود methods, الميثود تقريباً بنفس عمل function لكن لا نكتب بالبداية فنكشن نكتب اسم الميثود بالبداية .
مثال
كما نلاحظ بالصورة انشأنا ميثود هو تغيير الخلفية changeBackground ووضعنا الايدي له "body" و اعطيناه الخاصية style.background للتعرف انه نريد تغيير خلفية الصفحة و اعطيناها اللون الاحمر "red", و بالنهاية وضعنا تعريف التغيير عبر user.changeBackgroun و عندما نفتح ملفنا هذا في المتصفح سيظهر كالتالي
توجد طريقة اخرى لعرض البيانات وهي تنفيذ الأوامر الذي ضمن constructor
كما لاحظنا بالاسطر الاخيرة كتبنا windo.load و عيننا له الكلاس User, اي عندما يتم تحميل الصفحة html يتم تنفيذ الكلاس User, و استخدمنا الخاصيه this في constructor و الميثود الذي نريد تشغيلها حتى يتم تنفيذ هذه الأوامر, و سيعرض لنا نفس النتيجه خلفيه حمراء.البديل للفنكشن function في الكلاس هي الميثود methods, الميثود تقريباً بنفس عمل function لكن لا نكتب بالبداية فنكشن نكتب اسم الميثود بالبداية .
مثال
class User{constructor(){}
changeBackground(){ }}
var user = new User();
في مثالنا السابق الميثود هو changeBackground.
لنأخذ مثال مصور للفهم اكثر, نضع اولاً id للوسم body في ملف html كالتالي
ثم نفتح ملف الجافاسكربت و نكتب اكوادنا كما بالصورة التالية
لنأخذ مثال مصور للفهم اكثر, نضع اولاً id للوسم body في ملف html كالتالي
ثم نفتح ملف الجافاسكربت و نكتب اكوادنا كما بالصورة التالية
كما نلاحظ بالصورة انشأنا ميثود هو تغيير الخلفية changeBackground ووضعنا الايدي له "body" و اعطيناه الخاصية style.background للتعرف انه نريد تغيير خلفية الصفحة و اعطيناها اللون الاحمر "red", و بالنهاية وضعنا تعريف التغيير عبر user.changeBackgroun و عندما نفتح ملفنا هذا في المتصفح سيظهر كالتالي
توجد طريقة اخرى لعرض البيانات وهي تنفيذ الأوامر الذي ضمن constructor
سنشرح الان كيفية انشاء كلاس مع باراميتر,يمكن اعتبار البارميتر كمتغير
function car (){}class Car{constructor(){}}
الفنكشن اسهل من الكلاس لكن الكلاس يلزم بسوق العمل اكثر لأنه نعمل على احدث اصدار من الجافاسكربت.
وضعنا للفنكشن car خاصيتين هما name,model واعطينا عرض البيانات عبر الـ console و انشأنا كلاس Car
أنشأنا زر تشغيل button في ملف html ووضعنا به القيم.
عند الضغط على زر التشغيل و العرض عبر الكونسل عرض لنا النتائج.
لنأخذ مثال عن طريقة عرض البيانات في كلاس .
ونتيجة العرض في المتصفح في كونسل
مثال آخر لطريقة عرض مختلفة
وىالنتيجة اظهار رساله ديالوك كالتالي
ليست هناك تعليقات:
إرسال تعليق