تطبيق وصل wassll لمتابعة مخصصات المحروقات

الكلاس و الكائن في جافاسكربت

الكلاس ( Class ) هو عبارة عن حاوية كبيرة تحتوي على كل الكود من متغيرات و دوال و كائنات. من أجل تعريف كلاس Class جديد يكفي فقط أن نكتب الكلمة class ثم وضع إسم لهذا الكلاس, ثم فتح أقواس تحدد بداية الكلاس و نهايته.

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

الشكل العام لبناء كلاس في جافاسكربت Syntax

class ClassName{
	constructor(){
	}
}

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

مثال 1

نقوم بوضع id للوسم body و هو body.

class User{
	constructor(){
	}
	changeBackground(){
		document.getElementById("body").style.background = "red";
	}
}
var user = new User();
user.changeBackground();

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

مثال 2

class User{
	constructor(){
	this.changeBackground();
	}
	changeBackground(){
		document.getElementById("body").style.background = "red";
	}
}
window.onload = new User();

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

 

إنشاء كلاس مع باراميتر

يمكن إعتبار البارميتر كمتغير.

function car (){
}
class Car{
	constructor(){
	}
}

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

مثال 3

function car(name,model){
console.log(name,model);
}
class Car{
	constructor(name,model){
		this.name = name;
		this.model = model;
	}
}

وضعنا للفنكشن car خاصيتين هما name,model و أعطينا عرض البيانات عبر الـ console و أنشأنا كلاس Car. ننشئ زر تشغيل button في ملف html ونضع به القيم.

<button onclick="car('BMW',2010)">تشغيل</button>

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

BMW 2010

 

عرض البيانات في كلاس JavaScript

function car (name,model){
	console.log(name,model);
}
window.onload = car("bmw","model: 2010");
class Car{
	constructor(name,model){
		this.name = name;
		this.model = model;
	}
}
var car = new Car("skoda", "model: 2020");
console.log(car.name,car.model);

أنشأنا دالة car ووضعنا بها باراميترين وهما name و model ثم عرضنا البيانات عبر console. ثم قمنا بتمرير القيم في window.onload للسيارة و هي إسمها bmw و موديلها 2010. و أنشأنا كلاس Car و كونستركتور و بداخل الكونستركتور وضعنا name و model. ثم كتبنا this.name و عيننا لها name و كتبنا this.model و عيننا لها model. ثم أنشأنا متغير مشتق من الكلاس وهو car و عرضنا البيانات عبر console. عند تشغيل الكود سنجد النتيجة:

bmw model: 2010
skoda model: 2020

مثال 4

function car (name,model){
	console.log(name,model);
}
window.onload = car("bmw","model: 2010");
class Car{
	constructor(name,model){
		this.name = name;
		this.model = model;
		console.log(name,model);
		alert("nusur tech class");
	}
}
var car = new Car("skoda", "model: 2020");
window.onload = car;

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

nusur tech class