بسم الله الرحمن الرحيم
- ماذا أحتاج لفهم هذا الدرس ؟
ستحتاج فقط الى معرفة الأساسيات في لغة "HTML" و "JavaScript".
- هل سأحتاج ألى برامج خاصة في هذا الدرس؟
لا,فقط ستحتاج ألى متصفح الأنترنت .
- كيفية عرض النص البرمجي للصفحات في مواقع الأنترنت؟
تستطيع عرض النص البرمجي للموقع بأستخدام الأمر الموجود في قائمة المتصفح (View->Page Source) ,
وهذه صورة للأمر في متصفح Firefox.
- كيف يعمل برنامج العداد الخاص ؟
و الأن ألى الشرح العملي :
يستخدم المبرمجون الطريقتين البرمجتين في لغة JavaScript :
setTimeout("JavaScript Command",milliseconds);
setInterval("JavaScript Command",milliseconds);
setInterval("JavaScript Command",milliseconds);
تستخدم هذه الطريقتان لتنفيذ أمر برمجي بعد تأخير يقاس بالمليي ثانية ,و هنالك أختلاف بسيط بينهما في الحالة الأولى سيتم تنفيذ الأمر مرة واحدة , أما في الحالة الثانية ستم أعادة تنفيذ الأمر البرمجي ألى أن يتم أيقافه برمجي , وفي هذا الدرس سيكون المثال بأستخدام الطريقة الأولى لأنها الأكثر أستخدما في حالة العدادات.
والأن الى النص البرمجي الخاص بالعداد:
والأن الى النص البرمجي الخاص بالعداد:
<html> <head> <title>head</title> </head> <body> <script language="javascript"> var counter=400; function wait(){ if(counter>0){ document.getElementById('txt').value=counter; counter--; setTimeout("wait()",1000);} } </script> <div dir="ltr"> <form> <input type="button" value="Start count!" onclick="wait()"> <input type="text" id="txt" /> </div> </body> </html>
*تستطيع حفظ النص البرمجي بأستخدام برنامج المفكرة وبأمتداد "Html",سيؤدي هذا لأنشاء صفحة ويب تحتوي على العداد.
سوف تتجنب شرح تعليمات "HTML" وأتجه ألى شرح تعليمات JavaScript الخاص بالعداد التي قمت بتعليمها باللون الأحمر :
var counter=400;
تصريح متغير من النوع الرقمي يحمل القيمة 400.
function wait(){
أنشاء "function" أو وظيفة برمجية وهي عبارة عن مجموعة من الأوامر تستدعى بشكل أمر منشىء من قبل المبرمج و توضع
الأكواد بين القوسين { }.
if(counter>0){
الجملة الشرطية "if" و في هذه الحالة سيتم أختبار الشرط (أذا كان قيمة المتغير counter أكبر من الصفر) و في تلك الحالة
سيتم تنفيذ الأمر البرمجي الموجود بين { }.
document.getElementById('txt').value=counter;
هذه الجملة البرمجية ستقوم بتغير قيمة مربع النص ألى قيمة المتغير counter .
counter--;
تقوم هذه الجملة البرمجية بأنقاص قيمة المتغير من العدد واحد.
setTimeout("wait()",1000);}
هنا يأتي أستخدام الجملة setTimeout التي تقوم بالأنتظار لمدة ثانية ثم العودة ألى الوظيفة البرمجية wait ,
أي سنقوم بالدوران ألى أن لا يتطبق الشرط الخاص بالجملة الشرطية "If" .
هذا هو الشرح البسيط لعداد المثال وقد تجنبت تعقيده الكود البرمجي في هذا الدرس و الأن ألى الشرح العملي لكيفية التحكم في
العداد من المتصفح بهذا المثال العملي.
أذا قمت بضغط الزر "Start count!" سيبدأ العد من العدد 400 , و لكن ماذا لو أردت أن تغير هذه القيمة
تذكر أن البرنامج يتم تنفيذه من على حاسبك لذا لديك القدرة الكاملة على التحكم فيه بواسطة تقنية "Inline javaScript"
(حاول أن تقوم بقراءة النص البرمجي لهذه للصفحة والبحث عن النص المسؤول عن العداد بأستخدام الكلمة setTimeout , سيطور هذا من مهاراتك).
تذكر أن البرنامج يتم تنفيذه من على حاسبك لذا لديك القدرة الكاملة على التحكم فيه بواسطة تقنية "Inline javaScript"
(حاول أن تقوم بقراءة النص البرمجي لهذه للصفحة والبحث عن النص المسؤول عن العداد بأستخدام الكلمة setTimeout , سيطور هذا من مهاراتك).
- كيفية أستخدام تقنية "Inline javascript"
في مثالنا قمنا بتصريح المتغير counter و أعطيناه قيمة 400 وفي الجملة الشرطية لتكرار الأمر يجب أن يكون
counter أكبر من الصفر , لذا يجب أن نغير قيمته بأستخدام هذا الأمر:
javascript:alert(counter=1);
سيظهر لك مربع حوار كالتالي:
لقد قمنا بأستخدام الأمر alert الذي يعرض مربع الرسالة لكي نمنع المتصفح من تغير الصفحة, بعد تجربة الأمر ستلاحظ تغير القيمة في مربع النص ألى 1 .
في هذا الدرس أستخدمت تقنية Inline javascript التي تمكنك من التحكم من البرمجيات التي يستخدمها
المواقع في التحكم في طريقة عرض الموقع و كما تستخدمها في التحكم بالمستخدم مثل مواقع الألعاب التي
تلعب على المتصفح , و أذا أردت التعمق في هذه التقنية يجب ان تتقن لغة javascript و HTML .
ليست هناك تعليقات:
إرسال تعليق