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

مفهوم Events و AddEvenListener

الأحداث ( events ) تعتبر هي الإجراءات التي تحدث في المتصفّح التي يبدأها المستخدم أو المتصفّح. درسنا اليوم يُعتبَر من أهم الدروس, فلذلك ننصحكم بمراجعته عدة مرات للفهم أكثر. سوف نستخدم طريقتين الأولى عبر الدوال function و الثانية عبر الكلاسات class.

 

عناصر الأحداث Events في جافاسكربت

1. عند النقر على العنصر نستخدم onclick.
2. عند تغيير العنصر نستخدم onchange.
3. عندما يكون الماوس على العنصر نستخدم onmouseover.
4. عند يكون الماوس بعيداً عن العنصر onmouseout.
5. عند إستخدام الكيبورد نستخدم onkeydown.
6. عند تحميل الصفحة نستخدم onload.

 

إستخدام onclick في الأحداث جافاسكربت

تستخدم خاصية onclick مع الأحداث في لغة جافاسكربت و تعني أي عند النقر على الزر او الكلمة المرتبطة قم بتنفيذ حدث ما.

مثال 1

نقوم بإنشاء زر button في ملف html

<button onclick="change_background()">تغييرالخلفية</button>

ملف جافاسكربت

function change_background(){
	document.getElementById("body").style.background = "red";
}

في ملف الجافاسكربت أنشأنا دالة function بإسم change_background(). و أنشأنا في ملف html زر بالإسم تغيير الخلفية و أعطيناه الخاصية onclick و وضعنا للزر الدالة change_background ليتم عند النقر عليه تنفيذ الأوامر في ملف الجافاسكربت. و وضعنا لجسم الصفحة id كي يقوم بتنفيذ الأوامر في body و أعطيناه اللون الأحمر. و هنا عند الضغط على الزر مباشرتاً سوف تتغير الخلفية إلى اللون الذي أعطيناه للـ id في الجافاسكربت. وفي المتصفح عندما نقوم بالضغط على الزر سوف تتغير الخلفية مباشرتاً إلى اللون الأحمر.

 

العنصر onmouseover في جافاسكربت

يتم إستخدام onmouseover عندما يكون مؤشر الماوس فوق العنصر يتم تنفيذ الحدث مباشرتاً.

مثال 2

ملف html.

<button onmouseover="change_background()">تغييرالخلفية</button>

ملف جافاسكربت.

function change_background(){
	document.getElementById("body").style.background = "red";
}

في هذا المثال عند إقتراب مؤشر الماوس من الزر فقط عندما يكون فوق الزر مباشرتاً سوف تتنفذ الأوامر وهي تغيير خلفية الشاشة.

 

العنصر onmouseout في لغة javascript

الحدث onmouseout في الجافاسكربت مهمته تكون عندما يتم نقل مؤشر الماوس بعيداً من العنصر. في الغالب يستخدم هذا الحدث بجانب الحدث onmouseover الذي يحدث عندما يتم نقل المؤشر على عنصر.

مثال 3

ملف html.

<button onmouseout="change_background()">تغييرالخلفية</button>

ملف جافاسكربت.

function change_background(){
	document.getElementById("body").style.background = "red";
}

سوف تتنفذ الأحداث Events في لحظة إبتعاد مؤشر الماوس عن العنصر أي الزر, عند إقتراب المؤشر من الزر لن يتفذ شيئ لكن عندما يتم إبعاد المؤشر سوف تتنفذ الأوامر.

 

العنصر onkeydown في جافاسكربت

تستخدم onkeydown عند الضغط على أي زر من لوحة المفاتيح, أي بمجرد الضغط على أي زر في الكيبورد سوف تتفذ الأوامر.

مثال 4

ملف html.

<button onmouseout="change_background()">تغييرالخلفية</button>
<input type="text" onkeydown="change_background()">

هنا سوف تتغير الخلفية مجرد أن تم إستعمال الضغط على الكيبورد و كتابة أي شيئ ضمن الحقل input.

 

العنصر onload في جافاسكربت

الحدث onload يحدث عندما يتم تحميل الصفحة ( تحديثها refresh ). غالباً ما يُستخدَم الحدث onload في داخل وسم جسم الصفحة body. يمكن أيضاً أن يتم إستخدام الحدث onload للتعامل مع ملفات تعريف الإرتباط cookies.

function change_background(){
	document.getElementById("body").style.background = "red";
alert("onload يعمل بنجاح");
}
window.onload = change_background();

هنا سوف تتغير الخلفية عند تحديث الصفحة ويظهر ديالوك alert يقول onload يعمل بنجاح.

 

العنصر onchange في javascript

الحدث onchange غالباً ما يُستخدَم للتحقق من صحة المدخلات. في بعض الأحيان ترغب عندما يقوم المستخدم بتحديد أحد الخيارات ضمن select option.

مثال 5

ملف html.

<button id="button">تغيير الخلفية</button>

ملف جافاسكربت.

class Home{
	constructor(){
		this.change_background();
		var button = document.getElementById("button");
		button.addEventListener("click", () =>{
			this.change_background();
		});
	}
	change_background(){
		document.getElementById("body").style.background = "red";
	}
}
onload = new Home();

قمنا بإنشاء class بإسم Home و ضمن هذا الكلاس يجب أن يكون العنصر constractor. و لتشغيله وضعنا في النهاية onload = new Home(); و طلبنا منه تشغيل الكلاس Home. و وضعنا ميثود بإسم change_background() و ضمن الأقواس المعكوفة وضعنا له أوامر التشغيل في حال تشغيل هذا الميثود.

نحن سنقوم بتغيير الخلفية ووضعنا له أمر التشغيل:

document.getElementById("body").style.background = "red";

و لتشغيله أضفنا this.change_background(); لتشغيله مباشرتاً. لكن نحن نُريده بحال النقر على أحد العناصر يعمل, و كتبنا في صفحة html عنصر button كالتالي.

<button id="button">تغيير الخلفية</button>

لتحديد button ضمن جافاسكربت وضعناه في متغير var ثم حددنا المتغير كالتالي button.addEventListener. و وضعنا له ضمن الأقواس click أي عند النقر عليه, وبعده أنشانا أقواس وضعنا إشارة => و أعطيناه الميثود التي نريد تشغيلها عبر this. وضيفة this تتيح لنا الوصول لعناصر الكلاسات الموجودة خارج الكونستركتر ( مثل الميثود و المتغيرات ...إلخ ).