تعلم كيفية استعمال مكتبة الجي كويري jQuery الخطوة الأولى

مع ظهور مكتبة jQuery كتب السيد Jörn Zaefferer مقالاً عنوانه ارقص مع جي كويري فيه شرح مفصل عن كيفية البدأ في استعمال هذه المكتبة و يتألف هذا المقال من أربع خطوات
ولقى هذا المقال شعبية كبيرة و تم اعتماده على الموقع الرسمي لمكتبة جي كويري كدليل للمبتدئ في استعمال هذة المكتبة الشهيرة و عنوانه Getting Started with jQuer لكني أفضل المقال الأصلي لأنه مقسم بشكل جيد لأربع خطوات مشروحة بشكل بسيط و تساعد المبتدئ في فهم هذه المكتبة و استعمالها
لذلك قررت أن أترجم هذا المقال للعربية
قبل أن نبدأ في ما يلي شرح مبسط لبعض المفردات التي سأستعملها في شرحي لمكتبة jQuery

Casscading Style Sheet

أو أوراق الأنماط التعاقبية أو المتتالية و هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الو سوم Html في صفحة الويب

Xml

هي طريقة لتمثيل أي بيانات منظمة هذه الطريقة تصلح للتعامل مع كل أنظمة التشغيل لذلك أصبحت اللغة الأنسب للتعبير عن البيانات لأنها تتجاوز مشكلة عدم التوافق
EXtensible Markup Language لغة الترميز الموسعة التي يرمز لها بالاختصار XML تستخدم لوصف و تحزين و تنظيم البيانات
قواعدها سهلة جداً و تستطيع استعمال ما تريده من الو سوم و تسميتها بأي اسم تريده و من ثم تحدد كيفية ظهور المحتوى الذي بداخل الوسم عن طريق أوراق الأنماط التعاقبية , لكن المبرمجين يحاولوا قدر الإمكان استعمال وسوم html مع المحافظة على معانيها و ربط العناصر بشكل هرمي ( افهم من ذلك أن عناصر الصفحة تتبع بعضها البعض بتسلسل هرمي أي بعلاقة الأب و الابن و تذكر الوراثة في ملفات الستايل)

DOM

نموذج كائن المستند Document Object Model يربط هذا الكائن مستندات XML مع لغات البرمجة بما فيها الجافا سكريبت

JavaScript

لغة برمجة محدودة استعملت في البداية لإضافة بعض الحركات و التأثيرات الفنية في عرض الصور مع ظهور المكاتب المكتوبة بلغة جافا سكريبت ازدادت أهميتها و توسع نطاق استعمالها المهم أن تعرف أن جافا سكريبت هي لغة تنفذ على جهاز المستخدم أي أنك تستطيع منع تنفيذ الكود جافا سكريبت على جهازك في حال تعطيلك الجافا السكريبت على جهازك

server-side scripting

لغة برمجة تنفذ جهة المزود أي أن الكود على العكس من جافا سكريبت الذي ينفذ على جهاز المستخدم في هذه الحالة ( حالة التنفيذ جهة المزود) الكود سينفذ على خادم الويب الذي يرسل النتيجة على شكل Html للمستخدم البي إتش بي هي لغة تنفذ جهة المزود ( أي أنك لست بحاجة للبي إتش بي مركب على جهازك لعرض صفحات البي إتش بي)

في ما يلي ترجمة الخطوة الأولى:

مسار المقال الأصلي : http://jquery.bassistance.de/jquery-getting-started.html
مع كل الشكر للسيد : Jörn Zaefferer

حمل ملف عدة البداية من هذا الرابط jQuery Starterkit وفك ضغطه على جهازك من الأفضل أن تفك ضغطه في دليل الويب لخادمك المحلي إذا كان متواجد على جهازك طبعاً تستطيع متابعة التمارين بدون خادم ويب لكن في الخطوة الرابعة يفضل أن يكون خادم الويب متواجد على جهازك
ستجد بداخل هذا المجلد :

• الدليل lib الذي يحتوي على نسخة قديمة من مكتبة جي كويري تكفي لتنفيذ تمارين الشروح لكن عليك تحميل أخر نسخة من هذة المكتبة لتطوير برامجك القادمة
• الدليل css يحتوي على ملفات الستايل لن نستعمله في التمارين
• الملف starterkit.html و هو ملف صفحة الويب عليك أن تفتحه بواسطة متصفح الويب
• الملف custom.js و هو الملف الذي سيساعدك على استعمال جي كويري بداخله ستلصق الكود بعد نسخه من ملف كل تمرين
• باقي الملفات لا تهمنا في هذا الشرح

الآن و قد فتحت starterkit.html في متصفح الويب و فتحت custom.js في أي محرر نص أصبحت جاهز لتنفيذ تمارين الشرح

مرحباً جيكواري

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

هذه الجملة تعني بأنك تطلب من مكتب جي كويري بتنفيذ الكود بعد أن يكون متصفح الويب قد انتهى من تحميل الصفحة
في أول تمرين سنطلب من جي كويري أن تعرض لنا رسالة صغيرة عندما نضغط على أي رابط من الروابط الموجودة على الصفحة

انسخه و الصقه في الملف custom.js احفظ عملك و حمل الصفة قي متصفح الويب من جديد
ملاحظة لتحميل الصفحة من جديد اضغط على الزر F5 على لوحة المفاتيح

ثم اضغط على أي رابط من الروابط الموجودة على الصفحة سترى بأن مكتبة جي كويري تنفذ الكود و تعرض لك رسالة Hello world
لنتمعن قليلاٌ في هذا الكود:

في هذا الأمر نحن نطلب من جي كويري بتحديد كل الروابط الموجودة على الصفحة لاحظ بأننا استعملنا الوسم html للرابط و هذا ما يشكل ناحية هامة من مكتبة جي كويري و سهولة استعمالها
و ال $ هي أدات التحديد في مكتبة جيكواري

و هي ما يسمى بلأحداث أي أن هذا الأمر سيربط كل عنصر محدد بالحدث تذكر بأننا استعملنا $("a") لتحديد روابط الصفحة لكي نعرض رسالة عندما نضغط على أي رابط إذاً عندما يحدث الحدث click() جي كويري ستنفذ الأمر alert Hello world!
الأحداث مهمة جداً من خلالها تستطبع ربط الكثير من الأعمال في الأحداث
روابط مفيدة

• قواعد اساسية في استعمال مكتبة جي كويري bases
• أدوات التحديد تستعملها لكي تحدد العنصر الذي تريد التحكم بهSelectors
• الأحداث الممكن استخدانها لتنفيذ عمليات محددةEvents