الأحداث
مفهوم الأحداث
الأحداث (Events) هي أشياء نتوقع حدوثها في صفحة الويب و عند حدوثها نستطيع تنفيذ أوامر معينة.
إذاً من خلال الأحداث يمكنك رصد أي تفاعل يجريه المستخدم مع الصفحة.
الأشياء التي يمكنك ترقّب حدوثها في المتصفح كثيرة جداً فمثلاً يمكنك معرفة متى يقوم المستخدم بتحريك الماوس، متى ينقر على الأزرار، متى يكتب شيء ما في الحقول، متى ينزل في الصفحة لمشاهدة المحتوى الموجود فيها، متى يكبّر أو يصغّر نافذة المتصفح و غيرها من الأمور التي يمكنك رصدها.
الأحداث الأكثر استخداماً
هناك عدد كبير جداً من الأحداث التي يمكنك استخدامها في عالم الويب و لكننا سنتطرق للأحداث الأكثر استخداماً و التي يجب عليك معرفتها.
| الحدث | استخدامه |
|---|---|
| يتم إطلاق هذا الحدث عندما يتم النقر على العنصر سواء بواسطة الماوس أو الكيبورد. | |
| يتم إطلاق هذا الحدث بعد أن يتم إدخال حرف من الكيبورد و رفع الإصبع عن الزر. | |
| يتم إطلاق هذا الحدث أثناء النقر على حرف من الكيبورد و قبل أن يتم رفع الإصبع عن الزر. | |
| يتم إطلاق هذا الحدث بشكل مستمر إذا تم النقر على حرف من الكيبورد و تم إبقاء الإصبع على الزر. | |
| يتم إطلاق هذا الحدث عند تحريك مؤشر الماوس فوق العنصر. | |
| يتم إطلاق هذا الحدث بعد أن يتم تمرير مؤشر الماوس فوق العنصر. | |
| يتم إطلاق هذا الحدث بعد أن يصبح مؤشر الماوس خارج حدود العنصر. | |
| يتم إطلاق هذا الحدث عندما يتم تغيير قيمة العنصر. | |
| يتم إطلاق هذا الحدث عندما يكون مربّع التركيز الذي يشير إلى العنصر الحالي موجود عند العنصر. | |
| يتم إطلاق هذا الحدث عندما يكون مربع التركيز الذي يشير إلى العنصر الحالي غير موجود عند العنصر. | |
| يتم إطلاق هذا الحدث عندما يتم إرسال بيانات النموذج إلى السيرفر. | |
| يتم إطلاق هذا الحدث عندما يتم تحميل جميع ملفات التصميم، السكربتات، الخطوط, الصور إلخ.. التابعة للصفحة. | |
| يتم إطلاق هذا الحدث عندما يتم تغيير حجم المتصفح من أطرافه بواسطة الماوس. |
في حال ذكر أسماء الأحداث كخصائص فإنها نبدأها بكلمة
إضافة حدث للعنصر
هناك ثلاث طرق يمكن إتباعها لجعل العنصر يتعامل مع الحدث الذي قد يقع و هي:
- إضافة الحدث كخاصية بشكل مباشر في الوسم (Inline Event Handler) و هذا هو الخيار الأسهل و لكنه ليس الأفضل.
- إضافة الحدث كخاصية للعنصر بواسطة جافاسكربت (Event Handler Property) و لكن هذا الخيار ليس الأقوى.
- إضافة الحدث كمستمع بواسطة جافاسكربت (Event Listener) و هذا الخيار الأفضل و الأكثر مرونة.
حتى تلاحظ الفرق بين الأساليب الثلاثة في إضافة الأحداث، سنقوم بكتابة المثال نفسه بطرق مختلفة. سنضيف الحدث
1- أسلوب Inline Event Handler
في المثال التالي أضفنا الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Inline Event Handler</h1>
<p>Click on the button to fire the click event.</p>
<!-- الموجودة في السكربت showAlert() عند النقر على هذا الزر سيتم تنفيذ الدالة -->
<button onclick="showAlert()">Click Me</button>
<script>
// تقوم بإظهار نافذة منثبقة عندما يتم تنفيذها showAlert هنا قمنا بتعريف دالة إسمها
function showAlert() {
alert('The click event is fired!');
}
</script>
</body>
</html>2- أسلوب Event Handler Property
في المثال التالي مررنا الدالة التي نريد تنفيذها في حال حصول الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Inline Event Handler</h1>
<p>Click on the button to fire the click event.</p>
<!-- الموجودة في السكربت showAlert() عند النقر على هذا الزر سيتم تنفيذ الدالة -->
<button onclick="showAlert()">Click Me</button>
<script>
// تقوم بإظهار نافذة منثبقة عندما يتم تنفيذها showAlert هنا قمنا بتعريف دالة إسمها
function showAlert() {
alert('The click event is fired!');
}
</script>
</body>
</html>3- أسلوب Event Listener
في المثال التالي قمنا بإضافة الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Event Listener</h1>
<p>Click on the button to fire the click event.</p>
<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>
<script>
// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');
// myBtn و الدالة التي سيتم تنفيذها في حال حصول الحدث في العنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
myBtn.addEventListener('click', function() {
alert('The click event is fired!');
});
</script>
</body>
</html>أشكال دالة تنفيذ الحدث
الدالة التي يتم تنفيذها عند وقوع الحدث يمكن أن تكون دالة عادية لا إسم لها، دالة سهمية، أو إسم فقط يشير إلى الدالة التي ستتنفذ. كما أنه يمكن إضافة باراميتر فيها مما يجعلنا قادرين على الوصول إلى معلومات متعلقة بالحدث نفسه.
تمرير دالة بدون إسم
في المثال التالي قمنا بتمرير دالة لا إسم لها ليتم تنفيذها عند وقوع الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Pass A New Function To Event Listener</h1>
<p>Click on the button to fire the click event.</p>
<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>
<script>
// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');
// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير دالة جديدة بدون إسم ليتم تنفيذها عند حصول الحدث
myBtn.addEventListener('click', function() {
alert('The click event is fired!');
});
</script>
</body>
</html>تمرير دالة سهمية
في المثال التالي قمنا بتمرير دالة سهمية ليتم تنفيذها عند وقوع الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Pass An Arrow Function To Event Listener</h1>
<p>Click on the button to fire the click event.</p>
<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>
<script>
// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');
// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير دالة سهمية جديدة ليتم تنفيذها عند حصول الحدث
myBtn.addEventListener('click', () => {
alert('The click event is fired!');
});
</script>
</body>
</html>تمرير إسم الدالة فقط
في المثال التالي قمنا بتعريف الدالة التي نريد تنفيذها عند حصول الحدث و من ثم قمنا بتمرير إسمها فقط ليتم تنفيذها عند وقوع الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Pass An Existing Function To Event Listener</h1>
<p>Click on the button to fire the click event.</p>
<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>
<script>
// عند استدعاءها تقوم بعرض نافذة تنبيه منبثقة showAlert هنا قمنا بتعريف دالة إسمها
function showAlert() {
alert('The click event is fired!');
}
// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');
// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير إسم الدالة التي سيتم تنفيذها عند حصول الحدث
myBtn.addEventListener('click', showAlert);
</script>
</body>
</html>الحصول على معلومات الحدث
في أوقات كثيرة قد تحتاج لمعرفة معلومات موجودة في الحدث الذي وقع و إليك بعض الأمثلة العملية:
- في أداة تعلم الطباعة نراقب كل حرف يدخله المستخدم لمعرفة ما إن كان صحيحاً أم لا و أيضاً لعرض الحرف الذي أدخله له.
- في أداة رسم الأشكال بواسطة CSS نراقب موقع كل نقطة يحركها المستخدم حتى نغيير إحداثيات الرسم في الكود.
- في دورة اللغة الإنجليزية نراقب أي كلمة أو جملة إنجليزية يتم النقر عليها حتى نقوم بقراءتها سمعياً و هكذا.
الآن، للوصول إلى المعلومات المرتبطة بالحدث الذي وقع فإنه يجب إضافة باراميتر واحد في الدالة التي تنّفذ الحدث و هكذا يصبح بإمكانك الوصول إلى خصائص الحدث نفسه من خلال هذا الباراميتر.
في المثال التالي قمنا بإضافة باراميتر في الدالة التي تنفذ الحدث حتى نستطيع الوصول لمعلومات الحدث نفسه، فمثلاً من خلال هذا الباراميتر نستطيع عرض نوع الحدث (Event Type).
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Get Event Data</h1>
<p>Click on the button to fire the click event.</p>
<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>
<script>
// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// event الدالة التي سيتم تنفيذها عند حصول الحدث أضفنا لها باراميتر إسمه
// حتى نستطيع من خلاله الوصول إلى معلومات الحدث نفسه مثل نوعه
myBtn.addEventListener('click', (event) => {
alert('The type of event is: ' + event.type);
});
</script>
</body>
</html>يمكنك وضع أي إسم تريد للباراميتر الذي يمثّل الحدث و لكن المتعارف عليه هو استخدام الإسم
حذف حدث من العنصر
في حال كان العنصر يعرف فقط إسم الدالة التي سيقوم بتنفيذها عند وقوع الحدث فإنه يمكن استخدام الدالة
في المثال التالي قمنا بتعريف دالة إسمه
مهمة هذه الدالة حساب و طباعة كم مرة يقوم المستخدم بالنقر على الزر.
عندما يتم النقر ثلاث مرات على الزر فإنه سيتم إزالة الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Remove Event From Element</h1>
<button id="myBtn">Count Clicks</button>
<p id="result">No clicks yet.</p>
<script>
// count عدد النقرات سنخزنه في المتغير
let count = 0;
// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');
// result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let result = document.querySelector('#result');
// مهمتها طباعة عند النقرات على الزر showCount هنا قمنا بتعريف دالة إسمها
function showCount() {
// count أولاً تقوم بإضافة واحد على عدد النقرات الذي نحتفظ فيه المتغير
count++;
// result و من ثم تقوم بعرض قيمته في الوسم الذي يمثله المتغير
result.innerHTML = 'Total clicks = ' + count;
// من الزر click أكبر أو تساوي 3 فإنه سيتم إزالة الحدث count عندما تصبح قيمة
if (count >= 3) {
myBtn.removeEventListener('click', showCount);
}
}
// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير إسم الدالة التي سيتم تنفيذها عند حصول الحدث
myBtn.addEventListener('click', showCount);
</script>
</body>
</html>تعريف الحدث أكثر من مرة
يمكن إضافة الحدث للعنصر بواسطة الدالة
في المثال التالي قمنا بإضافة الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Define Event Listener Multiple Times</h1>
<p>Click on the button to fire all the click events.</p>
<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>
<script>
// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');
// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
myBtn.addEventListener('click', () => {
alert('First click event is fired!');
});
// من جديد myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
myBtn.addEventListener('click', () => {
alert('Second click event is fired!');
});
</script>
</body>
</html>الأحداث و المؤثرات البصرية
في المثال التالي أضفنا الحدث
هذه الدالة تقوم بإضافة/إزالة الكلاس
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<head>
<style>
.dark-mode {
background: black;
color: darkgray;
}
</style>
</head>
<body>
<h1>Javascript Light/Dark Mode Button</h1>
<p>Click on the button to change the display mode.</p>
<button id="toggleMode">Change Mode</button>
<script>
// toggleMode في متغير إسمه toggleMode يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let toggleMode = document.querySelector('#toggleMode')
// toggleMode للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
toggleMode.addEventListener('click', () => {
// body في متغير إسمه body هنا سيتم تخزين العنصر
let body = document.querySelector('body');
// dark-mode يتناوب على استخدام الكلاس body هنا سيتم جعل العنصر الذي يمثله المتغير
body.classList.toggle('dark-mode');
});
</script>
</body>
</html>أمثلة متنوعة على الأحداث
مراقبة الأحرف التي يتم إدخالها
في المثال التالي أضفنا الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Get Last Entered Character Key & KeyCode</h1>
<input id="input" placeholder="Enter any text"/>
<p id="key">Last key:</p>
<p id="keyCode">Last keyCode:</p>
<script>
// input في متغير إسمه input يساوي id هنا قمنا بتخزين العنصر الذي يملك
let input = document.querySelector('#input');
// key في متغير إسمه key يساوي id هنا قمنا بتخزين العنصر الذي يملك
let key = document.querySelector('#key');
// keyCode في متغير إسمه keyCode يساوي id هنا قمنا بتخزين العنصر الذي يملك
let keyCode = document.querySelector('#keyCode');
// input للعنصر الذي يمثله المتغير keyup هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام المستخدم بالنقر على زر في الكيبورد و رفع إصبعه عنه
input.addEventListener('keyup', (event) => {
// key إسم الزر الذي يتم النقر عليه سيتم عرضه في العنصر الذي يمثله المتغير
key.innerHTML = 'Last key: ' + event.key;
// keyCode رقم اليونيكود الخاص بالزر الذي تم النقر عليه سيتم عرضه في العنصر الذي يمثله المتغير
keyCode.innerHTML = 'Last keyCode: ' + event.keyCode;
});
</script>
</body>
</html>مراقبة موقع الماوس
في المثال التالي أضفنا الحدث
المثال الأول
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
padding: 20px;
height: 200px;
line-height: 30px;
background: bisque;
}
</style>
</head>
<body>
<h1>Javascript Get Mouse Position</h1>
<div id="myDiv">Move over this box to view mouse position.</div>
<script>
// myDiv في متغير إسمه myDiv يساوي id هنا قمنا بتخزين العنصر الذي يملك
let myDiv = document.querySelector('#myDiv');
// myDiv للعنصر الذي يمثله المتغير mousemove هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام المستخدم بتحريك الماوس فوقه
myDiv.addEventListener('mousemove', (event) => {
// myDiv إحداثيات مؤشر الماوس سيتم عرضها في العنصر الذي يمثله المتغير
myDiv.innerHTML = 'Mouse pointer X: ' + event.clientX + '<br>';
myDiv.innerHTML += 'Mouse pointer Y: ' + event.clientY;
});
</script>
</body>
</html>في المثال التالي أضفنا الحدث
المثال الثاني
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
padding: 20px;
height: 100px;
line-height: 30px;
background: bisque;
}
</style>
</head>
<body>
<h1>Javascript Check If Mouse Is Over/Out the element</h1>
<div id="myDiv">Move the mouse of this box.</div>
<script>
// myDiv في متغير إسمه myDiv يساوي id هنا قمنا بتخزين العنصر الذي يملك
let myDiv = document.querySelector('#myDiv');
// myDiv للعنصر الذي يمثله المتغير mouseover هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما يصبح الماوس فوق العنصر
myDiv.addEventListener('mouseover', () => {
// سيتم عرض هذه الجملة فيه myDiv عندما يكون مؤشر الماوس فوق العنصر الذي يمثله المتغير
myDiv.innerHTML = 'Mouse pointer is over me.';
});
// myDiv للعنصر الذي يمثله المتغير mouseout هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما يصبح الماوس فوق العنصر
myDiv.addEventListener('mouseout', () => {
// سيتم عرض هذه الجملة فيه myDiv عندما يكون مؤشر الماوس خارج العنصر الذي يمثله المتغير
myDiv.innerHTML = 'Mouse pointer is not over me.';
});
</script>
</body>
</html>مراقبة أي تغيير في القيمة
في المثال التالي أضفنا الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Detect If Value Is Changed</h1>
<select id="select">
<option value="BMW">BMW</option>
<option value="Honda">Honda</option>
<option value="Toyota">Toyota</option>
</select>
<p id="status">Select value is not changed yet.</p>
<script>
// select في متغير إسمه select يساوي id هنا قمنا بتخزين العنصر الذي يملك
let select = document.querySelector('#select');
// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');
// select للعنصر الذي يمثله المتغير change هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام تم تغيير القيمة الحالية للعنصر
select.addEventListener('change', () => {
// status الجديدة سيتم عرضها في العنصر select قيمة العنصر
status.innerHTML = 'Selected value = ' + select.value;
});
</script>
</body>
</html>مراقبة العنصر الذي يقف عنده المستخدم
في المثال التالي أضفنا الحدثين
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Detect Element Focus And Blur</h1>
<p>Click inside and outside the input field to fire focus/blur events.</p>
<p id="status">Nothing happening yet.</p>
<input id="input"/>
<script>
// input في متغير إسمه input يساوي id هنا قمنا بتخزين العنصر الذي يملك
let input = document.querySelector('#input');
// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');
// input للعنصر الذي يمثله المتغير focus هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
input.addEventListener('focus', () => {
// سيتم تغييره status النص الموجود في العنصر
status.innerHTML = 'Input is on focus.';
});
// input للعنصر الذي يمثله المتغير blur هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
input.addEventListener('blur', () => {
// سيتم تغييره status النص الموجود في العنصر
status.innerHTML = 'Input is on blur.';
});
</script>
</body>
</html>مراقبة بيانات النموذج قبل إرسالها للسيرفر
في المثال التالي أضفنا الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript On Submit</h1>
<!-- action هنا قمنا بتحديد مسار الصفحة التي ستتلقى البيانات التي يتم إرسالها بواسطة الخاصية
method و حدننا ذلك باستخدام الخاصية "post" كما أننا قمنا بتحديد أنه سيتم إرسال البيانات بأسلوب -->
<form id="myForm" action="/tryit/submitted" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
<button type="submit">Submit</button>
</form>
<br>
<hr>
<p id="status">Form data are not submitted yet.</p>
<script>
// myForm في متغير إسمه myForm يساوي id هنا قمنا بتخزين العنصر الذي يملك
let form = document.querySelector('#myForm');
// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');
// form للعنصر الذي يمثله المتغير submit هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
form.addEventListener('submit', (event) => {
// إفتراضياً النموذج يقوم بإرسال البيانات الموجودة فيه إلى السيرفر
// ثم يقوم بتحديث الصفحة عندما يتم النقر على زر إرسال البيانات
// فإننا نمنع ذلك preventDefault() و لكن عند استدعاء الدالة
event.preventDefault();
// مع إزالة أي password و name هنا قمنا بتخزين محتوى الحقول
// مسافات فارغة من أطرافها في متغيرات ليكون التعامل معها أسهل
const name = document.querySelector("#name").value.trim();
const password = document.querySelector("#password").value.trim();
// هنا قمنا بالتحقق من محتوى الحقول لمعرفة ما إن كانت فارغة أم لا
if (name === '' || password === '') {
// لإعلام المستخدم بأنه يجب أن يدخل قيم فيها status إذا كان أحدها فارغ سيتم عرض نص في العنصر
status.innerHTML = 'Please fill in all fields.';
// باللون بالأحمر status بعدها سيتم تلوين نص العنصر
status.style.color = 'red';
// نضعه لعدم تنفيذ الأوامر المتبقية في الحدث return الأمر
return;
}
// status إذا إنتهى التحقق من محتوى الحقول و لم يكن هناك مشكلة سيتم عرض قيمها في العنصر
status.innerHTML = '<h3>Submitted data<h3>';
status.innerHTML += 'Name: ' + name + '<br>';
status.innerHTML += 'Password: ' + password;
// باللون الأخضر status بعدها سيتم تلوين نص العنصر
status.style.color = 'green';
// في حال أردت الآن إرسال البيانات إلى السيرفر يمكنك إستدعاء الدالة التالية
// form.submit();
// هنا قمنا بحذف قيم الحقول التي تم إدخالها في النموذج و هذا أمر إختياري
form.reset();
});
</script>
</body>
</html>معرفة متى تم إكتمال تحميل الصفحة
في المثال التالي أضفنا الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript On Window Loading</h1>
<p id="status">Page not load yet.</p>
<script>
// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');
// الذي يمثل الصفحة نفسها window للكائن load هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما يتم تحميل محتوى الصفحة بالكامل في جهاز المستخدم
window.addEventListener('load', () => {
// status هنا سيتم إعلام المستخدم بذلك كنص في العنصر
status.innerHTML = 'The page is loaded completely.';
});
</script>
</body>
</html>مراقبة أي تغيير يحصل في حجم الصفحة
في المثال التالي أضفنا الحدث
مثال
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
<h1>Javascript On Window Resizing</h1>
<p>Resize the window to fire the event.</p>
<p id="dimensions"></p>
<script>
// dimensions في متغير إسمه dimensions يساوي id هنا قمنا بتخزين العنصر الذي يملك
let dimensions = document.querySelector('#dimensions');
// الذي يمثل الصفحة نفسها window للكائن resize هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما تغيير حجم المتصفح نفسه بواسطة الماوس
window.addEventListener('resize', () => {
// dimensions هنا سيتم إعلام المستخدم بقياسات الصفحة كنص في العنصر
dimensions.innerHTML = 'Width: ' + window.outerWidth + '<br>';
dimensions.innerHTML += 'Height: ' + window.outerHeight;
});
</script>
</body>
</html>
التسميات
تعليم JavaScript