طرق تنفيذ الجافا سكربت
لقد استخدمنا العنصر script لوضع الكود البرمجي داخل صفحة الانترنت سواءاً بكتابته مباشرة الى الصفحة او باستدعائه من ملف خارجي وتنفيذه ويوجد طريقتين اخريتين لتنفيذ كود جافا سكربت الاولى عن طريق
عنوان انترنت url والثانية عن طريق معالج الاحداث .
باستخدام عنوان url مزيف :
عندما نقوم بانشاء وصلة فانها تمتلك الخاصية href , نكتب بداخل هذه الخاصية الكلمة المحجوزة javascript ثم نقطتين عندها يتم تنفيذ اي امر برمجي بعدها :
<a href="javascript:window.alert('hello, how are you !');">Click Me</a>
لكن عند استخدام اي تعبير ليس برمجي بعد الكلمة javascript في عنوان url ستكون نتيجة التنفيذ عمل خاطئ لذا نقوم باستخدام الطريقة void لتجنب الاخطاء :
<a href="javascript:void(window.alert('hello, how are you !'));">Click Me</a>
كما يمكن استخدام هذه الطريقة في عنوان متصفح الانترنت حيث نكتب في المكان المخصص لكتابة العناوين الامر التالي :
javascript:void(window.alert('hello, I Love Javascript !'));
ثم نضغط enter فنحصل على النتيجة التالية :
الطريقة السابقة تستخدم احيانا لسرقة الكوكيز الخاص بالمستخدم والذي يحتوي على اسم المستخدم وكلمة السر المشفرة وسنتحدث عنه لاحقا في هذا الكتاب .
باستخدام معالج الاحداث :
يوجد لكل عنصر من عناصر HTML العديد من الاحداث مثل حدث تمرير الفأرة فوق العنصر mouseover او الضغط على العنصر click او الضغط المزدوج dblclick او التركيز على العنصر focus وغيرها من الاحداث وفي جافا سكربت يمكننا ربط تنفيذ امر برمجي ما او استدعاء تابع ما مع وقوع حدث ما على احد عناصر HTML حيث اننا نضيف خاصية جديدة للعنصر وذلك باستخدام الكلمة on متبوعة باسم الحدث على النحو التالي
<button onclick="">Click Me</button>
نقوم بوضع الامر البرمجي كقيمة لخاصية الحدث عندها سيتنفذ الامر البرمجي فور وقوع الحدث .
ان الاحداث والتعامل معها يعتبر من اساسيات جافا سكربت ومن اهم ما يميزها ايضا كلغة برمجة .
الحدث onclick :
يتم وقوع هذا الحدث عندما يضغط المستخدم على العنصر اي ان تنفيذ الامر البرمجي او التابع الموضوع بداخل الحدث يتم فقط اذا ضغط المستخدم على العنصر المحدد والا فلن يتم تنفيذه مطلقا
مثال :
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>OnClick Event</title>
</head>
<body>
<button onclick="alert('Thanks for your click');">Click Me</button>
</body>
</html>
بتنفيذ المثال السابق نحصل على النتيجة التالية :
في المثال السابق قمنا بوضع الامر البرمجي داخل الحدث onclick .
الحدث ondblclick :
يتم هذا الحدث عندما يضغط المستخدم ضغطتين متتاليتين على العنصر
مثال :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ondblclick Event</title>
</head>
<body>
<button ondblclick="alert('Thanks for your dblclick');">Dbl Click Me</button>
</body>
</html>
بتنفيذ المثال السابق نحصل على النتيجة التالية :
نلاحظ انه عندما نضغط الزر ضغطة واحدة لا يحصل اي شيئ ولكن عندما نضغط ضغطتين متتاليتين نحصل على رسالة التنبيه.
