recent
أخبار ساخنة

التعرف على الكلاس في جافاسكربت 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 ووضعنا به القيم.


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

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


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


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


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

google-playkhamsatmostaqltradent