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

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الاثنين، 9 مارس 2020

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


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

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


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


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


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

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام