توضيح مفهوم Events و AddEvenListener في جافاسكربت JavaScript الدرس |19| - Programmer Tech

Programmer Tech

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

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

الأحد، 29 مارس 2020

توضيح مفهوم Events و AddEvenListener في جافاسكربت JavaScript الدرس |19|

توضيح مفهوم Events و AddEvenListener في جافاسكربت الدرس |19|

عناصر javascript event

درسنا اليوم يعتبر من اهم الدروس فلذلك ننصحكم بمراجعته عدة مرات للفهم اكثر, سوف نستخدم في درسنا طريقتين الأولى عبر function و الثانية عبر class.

عناصر Events عددها 6 وهي كالتالي :

onclick        //عند النقر على العنصر
onchange    //عند تغيير العنصر
onmouseover    //عندما يكون الماوس على العنصر
onmouseout    // عند يكون الماوس بيعدا عن العنصر
onkeydown    // عند استخدام الكيبورد
onload       //عند تحميل الصفحة

عبر function
function change_background(){
       document.getElementById("body").style.background = "red";
}
وفي ملف html نضع زر و id كالتالي

1-شرح onclick

<html>
<head>
         <title>pt</title>
</head>
<body>
       <!-- استخدام الميزة onclick -->
       <button onclick="change_background()">تغييرالخلفية</button>
       <scipt src="dddd.js"></script>
</body>
</html>

شرح المثال

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

وفي html

انشاء زر button في ملف الhtml

وفي المتصفح تكون النتيجة عند الضغط على الزر

نتيجة عملية فنكشن

كما لاحظنا مجرد ضغطنا على الزر تغير الخلفية باللون الاحمر.

2 - شرح onmouseover

<html>
<head>
         <title>pt</title>
</head>
<body>
       <!-- استخدام الميزة onmouseover -->
       <button onmouseover="change_background()">تغييرالخلفية</button>
       <scipt src="dddd.js"></script>
</body>
</html>
هنا سوف يتغير لون الخلفية مجرد تقريب الماوس من الزر.

3 - شرح onmouseout

<html>
<head>
         <title>pt</title>
</head>
<body>
       <!-- استخدام الميزة onmouseout -->
       <button onmouseout="change_background()">تغييرالخلفية</button>
       <scipt src="dddd.js"></script>
</body>
</html>
هنا سوف تتغير الخلفية مجرد ان ابتعد مؤشر الماوس بعيداً عن الزر.

4 - شرح onkeydown

سننشئ وسم input لاستخدام onkeydown
<html>
<head>
         <title>pt</title>
</head>
<body>
       <!-- استخدام الميزة onkeydown -->
       <button onmouseout="change_background()">تغييرالخلفية</button>
       <input type="text" onkeydown="change_background()">
       <scipt src="dddd.js"></script>
</body>
</html>
هنا سوف تتغير الخلفية مجرد ان تم استعمال الكيبورد و كتابة اي شيئ ضمن فراغ input.


5 - استخدام onload

function change_background(){
       document.getElementById("body").style.background = "red";
alert("onload يعمل بنجاح")
}
window.onload = change_background();
هنا سوف تتغير الخلفية عند تحديث الصفحة ويظهر ديالوك alert يقول onload يعمل بنجاح.


6 - استخدام onchange

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(); 
وضمن ملف html ننشئ زر كالتالي 
<button id="button">تغيير الخلفية</button>
مثال لاستخدام onchange

شرح المثال

قمنا بإنشاء 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 هو يتيح لنا الوصول لعناصر الكلاس الذي خارج الكونستركتر, مثل الميثود و المتغيرات وغيرها .
ووضعنا الجزء
//this.change_background();
ضمن تعليق كي لا ينفذها مباشرتاً.

قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997

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

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

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

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

الاسم

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

رسالة *

اقسام