المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

كلنا قد مر علينا أسلوب أو أكثر من أساليب الكابتشا CAPTCHA عند إبحارنا على الشبكة. فعند التسجيل في المواقع أو طرح التعليقات، تأتينا بعض صور الكلمات أو الأحرف المقطعة والملونة. وبعض الأحيان، يتم استخدام أساليب أخرى، كعرض بعض الصور واختيار أنسب صورة للسؤال المطروح. كل هذا يتم للتحقق ما إذا كان المستخدم بشراً وليس آلةً.

رﻱكابتشا أتت بمفهوم جديد، ونقلت الكابتشا نقلة نوعية. فمع حفاظها على السبب الرئيس وهو التفريق بين البشر والآلة، ومن ثم الحماية من السخام. فهي تقوم بعرض كلمات إنجليزية مفهومة، وليس بعض الأحرف والأرقام العشوائية. والسبب وراء ذلك هو محاولة الشركة رقمنة الكتب التي كتبت قبل اختراع الحاسوب. وتحوليها إلى كتب إلكترونية يسهل أرشفتها والبحث فيها، عبر المدخلات التي يكتبها المستخدمون بصورة كابتشا.

سأقوم في هذا المقال بشرح طريقة تطبيق رﻱكابتشا باستخدام 3 طرق مختلفة. أولاً باستخدام PHP، وبعدها بتطبيق شكل مخصص ليتلائم أكثر مع شكل الموقع المراد إدراج الخدمة فيه، وأخيراً باستخدام تقنية أجاكس AJAX.

تعبير التحميل الكسول أو Lazy Loading في العادة يستعمل في لغات البرمجة، ويطلق عند تأخير تحميل كائن أو عنصر ما لحين حاجته. أي معناه، أننا لا نحمل أي كائنات أو عناصر حتى ولو كان يستخدمها البرنامج في وقت لاحق، إلى حين حاجتنا أو استدعائنا لها في ذلك الوقت، وعندها يتم تسخير كل الموارد المطلوبة للتحميل والاستدعاء.

التحميل الكسول يستخدم في عدة لغات، ولكن في هذا المقال، سنرى كيف يمكننا استخدامه في لغة جافاسكربت على عدد من المكتبات المشهورة YUI ،jQuery ،MooTools، وكيف يمكنه أن يفيدنا.

‎ربما رأيتم هذا التأثير مستخدم في مواقع شركة قوقل Google خصوصاً في خدمة الترجمة Google Translate، وموقع يوتيوب YouTube. عند تحويل اللغة في مدخلات النماذج Forms Input إلى اللغة العربية والبدء في كتابة الأحرف، يتم وبشكل تلقائي تحويل اتجاه النص إلى اليمين ليتماشى مع اللغة. وعند تحويل لغة النص إلى الإنجليزية، يتم تغيير الاتجاه إلى اليسار.

‎في هذا الدرس، سأقوم بشرح طريقة محاكاة نفس هذا التأثير في النماذج. طبعاً، وكما هي عادتنا في المشروع، الشفرة البرمجية في هذا المقال مطروحة بشكل مجاني وحر (مفتوحة المصدر) للاستخدام الشخصي أو التجاري بترخيص غنو GNU GPL v2.

نحتاج لكي نظهر الوقت الى كائن

date()

سنقوم بتعريف متغير ونعطيه قيمة الكائن.

<script type="text/javascript">
var date=new Date(); // يحتوي على الوقت والتاريخ ويعمل على وقت الجهاز
var h=date.getHours(); // جلب الساعات
var m=date.getMinutes(); // جلب الدقائق
var s=date.getSeconds(); // جلب الثواني

// طباعة الساعة مع نقطتين مع الدقائق مع نقطتين مع الثواني
// ليعطي شكل الساعة المعروف
document.write(h +":"+ m +":"+ s);
</script>

الكود السابق يطبع الوقت الحالي وهو جامد يعني أن الساعة لا تتحرك. مثال:

14:45:56

يعود إلينا بنسخته التجريبية المتصفح الشهير Opera بنسخته الجديدة 10 والتي كسر بها الأرقام القياسية، حيث أنه أول متصفح موجود لحد الآن يصل إلى نسخة مكونة من رقم عشاري، حيث نجد أقرب المنافسين لهذا الرقم هو متصفح Internet Explorer بالنسخة الثامنة والتي مازالت تحت التجريب أيضا، وأنه من أوئل المتصفحات التي اجتازت وبامتياز اختبار ACID 3.

ومن بين الأشياء التي كسرها متصفح Opera الجديد هي المواقع التي تستهدف المتصفحات المعينة لتعرض ما يناسبها أو ما يسمى Browser Sniffing، حيث يشير Andrew Gregory إلى العادات البرمجية السيئة التي يتبعها بعض مطوري الجافاسكربت لاستهداف المتصفحات لتفادي عيوبها في طريقة عرض المحتويات، لنأخذ على سبيل المثال الطريقة التي طرحها Andrew والمنتشرة جدا في المواقع:

if (navigator.userAgent.toLowerCase().indexOf('opera') != -1)
{
	isOpera = true;
	i = navigator.userAgent.indexOf('Opera') + 6;
	v = parseInt(navigator.userAgent.substring(i, i+1));
	if(v < 7)
		isOperaOld = true;
}

في هذا الدرس سنركز على تقنية أجاكس (AJAX)، ولن أقوم بإعادة اختراع العجلة أو أشرح من الصفر متى ظهرت هذه التقنية أو طريقة استخدامها مباشرة. ما سأشرحه فقط هو كيفية التعامل مع الأجاكس من خلال مكتبة jQuery.
ولنبدأ:

هناك ثلاث مستويات في المكتبة للتعامل مع الأجاكس:

• أولاً : load
• ثانياً : $.get و $.post
• ثالثا : $.ajax

التعريف بالحدث أو الأحداث

الحدث هو وقوع شيء ما، أي عندما نمرر الفأرة على رابط أو نضغط عليه فهذا يسمى حدث Event .
المثال ينطبق على كل العناصر داخل الصفحة

المثال الذي وضعته في الدرس السابق هو حدث click أي عندما نضغط على شيء نطلب منه ان يفعل كذا وكذا بلغة javascript

الأحداث في لغة javascript

وهي كالتالي:

• onClick
• onMouseover
• onMouseout
• onKeypress