في الدرس السابق بعنوان مقدمة حول JavaScript ، تم شرح طريقة استدعاء JavaScript في صفحات الموقع، وفي هذا الدرس سيتم شرح طريقة التعامل مع JavaScript عن طريق الأحداث “Events” وكيفية صنع دوال JavaScript لاستدعاءها في حدث معيّن.
فما هي الأحداث في HTML؟
ببساطة هي تشبه الأوامر الشرطية، لكن تعاملها يشترط على احداث معينة، مثالًا؛ عند الضغط (OnClick) على الزر أ اظهر رسالة ترحيب. مثال أدق:
<input type="submit" name="button" id="button" value="Show Welcome" onClick="window.alert('Welcome to http://www.alrashdi.co');">
وهناك العديد من الأحداث منها:
onLoad: عند تحميل المحتوى، وينحصر هذا الحدث على الوسم body في html فقط.
onfocus: عند التركيز، يستخدم في الغالب لنماذج الادخال، ويقصد به عند الضغط على الحقل أو تركيز المؤشر عليه.
onBlur: عند إلغاء التركيز، يعكس الحدث السابق، أي بعد خروج المؤشر من نموذج ادخال معيّن.
onchange: في الغالب يرافق القوائم، ويقصد به عند تغيير القيمة..
وهناك العديد من الاحداث، يمكنك اكتشافها عبر الأمثلة لاحقًا..
وللاستعداد للجزء القادم من الدرس، سأدرج بعض دوال JavaScript مع الشرح أدناه:
– اظهار رسالة للمستخدم:
window.alert('الرسالة هنا');
– نافذة التأكيد:
confirm('رسالة التأكيد هنا');
في العادة، تحتوي نافذة التأكيد على أمر شرطي، ليخبر المتصفح بالحركة القادمة، سيتم شرح ذلك في مثال لاحق بإذن الله
– نافذة ادخال نص:
prompt('السؤال هنا', 'قيمة افتراضية');
ليس من الضروري أن تضع قيمة افتراضية لنوافذ الادخال
كيفية عمل دالة في JavaScript:
شكل الدالة يكون:
function name()
{
}
وتستبدل name باسم الدالة، ويمكن أيضًا ادراج متغيرات في الدالة، مثال:
function name(var1, var2)
{
}
أي أن الملخص في تكوين الدالة هو الكلمة المفتاحية function يتلوها اسم الدالة وقوسين بهما المتغيرات إن وجدت، وقوسين معكوفين بينها تضع محتوى الدالة 🙂
وسنقوم الآن بصنع دالة لعرض رسالة ترحيب:
function welcome_message()
{
window.alert('Welcome to http://www.alrashdi.co');
}
وسنضعها في الحدث onLoad في الوسم body، بحيث تظهر عند تحميل الصفحة، الشفرة كاملة:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 4</title>
<script type="text/javascript">
function welcome_message()
{
window.alert('Welcome to http://www.alrashdi.co');
}
</script>
</head>
<body onLoad="welcome_message();">
</body>
</html>
هل تفكر بتطوير نفس الدالة بحيث يقوم المستخدم بكتابة اسمه؟
ليس هناك أي تعقيد، سنقوم بتخزين ما يكتبه المستخدم عبر نافذة الادخال في متغير معين، وثم نقوم بعرض رسالة تحتوي ذلك المتغير، المثال:
function welcome_message()
{
var name = prompt('What is your name?');
window.alert('Welcome ' + name + ' to http://www.alrashdi.co');
}
ويمكنك التجربة في نفس المثال السابق، قد تلاحظ تكرار علامة الجمع أكثر من مرة “+”، وللتوضيح، في JavaScript، نستخدم “+” لدمج أكثر من متغير أو نص مقتبس في نفس السطر.
وأخيرًا، سأضع مثال لرسالة التأكيد وكيفية استخدامها بشكل صحيح. لنفترض أن هناك وصلة للذهاب لموقع آخر غير موقعك، وترغب بتنبيه الزائر بذلك وتأكيد خروجه من موقعك؛ ستكون الدالة في الحدث onClick في الوصلة الخارجية، والدالة هي:
function leave_page()
{
var con = confirm('هل أنت متأكد من مغادرة هذه الصفحة؟\n http://www.alrashdi.co');
if(con)
return true;
else
return false;
}
لاحظ وجود الكلمة المفتاحية return، وتستخدم لتأكيد العملية ما بعد الحدث، أو الحركة القادمة، أي أنه في حالة التأكيد، يواصل المتصفح العملية باتجاهه للصفحة الخارجية، وفي حالة عدم التأكيد، يحبط المتصفح الانتقال للصفحة الخارجية. الشفرة كاملة:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 2</title>
<script type="text/javascript">
function leave_page()
{
var con = confirm('هل أنت متأكد من مغادرة هذه الصفحة؟\n http://www.alrashdi.co');
if(con)
return true;
else
return false;
}
</script>
</head>
<body>
<div align="center"><a href="http://www.hct.me" onClick="return leave_page();">Go to HCT Community Site</a></div>
</body>
</html>
هنا نصل لختام هذا الدرس، إن كانت هناك أسئلة، يرجى طرحها في التعليقات أسفل الدرس 🙂
