الفهرس



تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: قبل البدء


الصفحة السابقة

قبل البدء

إذا كنت مهتمًا بإنشاء مواقع ويب ، فقد سمعت عن jQuery وربما تعرف الكثير من الأشخاص الذين يمجدون مزاياه. لكن الآن ، تعتقد أن الخبراء وحدهم هم من يمكنهم استعماله ، وأنت خائف من عدم وجود المستوى اللازم لديك !أؤكد لك على الفور: jQuery أبعد ما يكون عن الاستحالة ، خاصة إذا كان لديك بعض المفاهيم (حتى الملخص) عن HTML و CSS و JavaScript.

ولكن بالمناسبة ، ما هوjQuery ؟

كيف ظهر؟ كيف تحصل عليه؟ ما هي بيئة الأجهزة والبرامج التي تحتاج إلى تطويرها في jQuery؟ الكثير من الأسئلة التي سيتم الرد عليها في هذا الفصل الأول.

تاريخ الويب: من HTML إلى JQUERY


لقد عرف البعض منكم بالتأكيد عالم الحواسيب قبل ظهور الإنترنت. في ذلك الوقت ، تطورت أجهزة الكمبيوتر منفردة. اليوم ، نحن نعيش في عالم مترابط ، حيث لم تعد المعلومات في الكمبيوتر أو الهاتف ، ولكن على شبكة عالمية واسعة بسعة تخزينية كافية لتجعلك تشعر بالدوار! يتواصل كل هذا العالم الصغير باستخدام لغات كمبيوتر معينة ، مثل HTML و CSS و JavaScript و PHP و SQL وما إلى ذلك.

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

jQuery web

لكن لماذا أتحدث إليكم حول هذا ، ستتساءلون؟ حسنًا ، لأنه من المهم أن نفهم أن كود jQuery يعمل على جانب العميل. في معظم الحالات ، لن يكون هناك تبادل مع خادم وبالتالي لا يوجد أي تأخير تقريبا بين بداية ونهاية تنفيذ الكود jQuery . ما قلته للتو هو أن تأخذ هذا في اعتبارك . في الواقع ، قد يتطلب كود jQuery مكتوب بشكل سيء و / أو غير مُحسّن عدة ثوانٍ (أو حتى دقائق!) للتنفيذ. الشيء الذي يجب تذكره حول هذا الأمر هو أنك مع jQuery لا تخضع لتوفر أي خادم وبصفة عامة تكون أوقات التنفيذ قصيرة للغاية.

أنت تعرف الآن ما هو نموذج خادم-عميل. لذلك يمكنني متابعة الحديث عن HTML و JavaScript و AJAX و jQuery:

  • HTML هي اللغة الأساسية للويب. ظهر في أغسطس 1991 ، ويستخدم مجموعة من العلامات لوصف البيانات لعرضها.
  • CSS هي لغة مخصصة لتنسيق محتوى HTML . ظهر في منتصف التسعينات ، اليوم هو مكمل أساسي لأي موقع ويب محترم. يضمن توحيد الصفحات ويسهل صيانتها.
  • تم تطوير JavaScript بواسطة Netscape في عام 1995. تم إصداره كـ "LiveScript" واستخدم لأول مرة في Netscape 1.0. فقط عندما تم إصدار Netscape 2.0 ظهر اسم "JavaScript". تم التنفيذ على جانب العميل ، وهو يضيف التفاعل إلى صفحات الويب.
  • ظهر AJAX أيضًا في عام 1995. استخدامه مثير للاهتمام للغاية ، لأنه يسمح بتحديث جزء (وجزء فقط) من صفحة ويب من خلال طلب البيانات الضرورية إلى خادم. لذلك ، تكون عمليات تبادل العملاء / الخوادم محدودة ويتم عرض صفحات الويب بسرعة أكبر ، مما يسعد مستخدمي الإنترنت.
  • jQuery هي مكتبة (أي ، مجموعة من الاكواد الجاهزة للاستخدام) مصممة لتبسيط كتابة الأكواد JavaScript و AJAX . تم إنشاء هذه المكتبة في عام 2006 من قبل John Resig ، وهي المكتبة الأكثر شهرة والمستخدمة حتى الآن.

آمل ألا أزعجك كثيرًا بهذا الحديث. لكنني أعتقد أنها كانت خطوة ضرورية لفهم كيفية وضع jQuery في العالم الصغير من برمجة الويب. الصورة التالية تنظم ما قيل للتو من أجل تحقيق الأشياء بشكل صحيح

jQuery web

يفترض هذا المخطط أن يتم عرض صفحة ويب على الكمبيوتر أو هاتف العميل (1). يمكن لرمز jQuery تحديث الصفحة دون الوصول إلى الخادم. ولكن يمكنه أيضًا تحديث الصفحة من خلال طلب المساعدة من الخادم. يتصرف مثل كود أجاكس (2 و 3).

ما هو JQUERY؟


إذا قرأت ما سبق ، فأنت تعلم أن jQuery هي مكتبة يمكنها أن تعمل على HTML و CSS و JavaScript و AJAX . كل هذا دقيق تمامًا ، لكنه غامض بعض الشيء. تحدد الأشياء: يسمح jQuery بمعالجة العناصر التي تم إعدادها في HTML (النصوص والصور والروابط ومقاطع الفيديو وغيرها) وتنسيقها في CSS (الموضع والحجم واللون والشفافية وما إلى ذلك) باستخدام تعليمات بسيطة يمكنك الوصول إلى إمكانيات هائلة من JavaScript و AJAX . ولكن بعد ذلك ، لماذا لا تستخدم JavaScript و AJAX مباشرة؟ أولئك الذين يسألون أنفسهم هذا السؤال لم يجربوا المغامرة بالتأكيد. من المؤكد أن JavaScript و AJAX قويتان ، ولكن من المحتمل جدًا أن يكونا كذلك ... في بناء الجملة وفي الواقع مطوّلان جدًا. ما نستنتجه هنا:

  1. أن أي خطأ ضئيل في بناء الجملة يؤدي عادة إلى عدم تنفيذ الكود.
  2. غالبًا ما يكون من الضروري كتابة العديد من الأسطر لتقديم شيء بسيط بسيط!

لحسن الحظ ، شعار jQuery هو " Write less, do more " ، مما يعني "الكتابة أقل للقيام بالكثير". يجب أن يكون هذا مناسبًا للعديد من المبرمجين. من خلال كتابة كود أقل، ستكون الأخطاء أقل.

jQuery web

إذا كان صحيحًا أن بناء الجملة المستخدم في jQuery أمر محير في البداية ، فسترى أنه منطقي وسهل التنفيذ ، وسرعان ما يصبح طبيعة جديدة للمبرمج. ولإعطاء المزيد من الحماس ، اعلم أن تعليمة jQuery واحدة يمكن أن تحل محل العشرات من تعليمات JavaScript !

يجب أن يكون لديك عادةً محرر أكواد أو برنامج FTP اعتدت على التعامل معه . jQuery لا يغير شيئا ، يمكنك الاستمرار في استخدامها. حاول اختبار أكوادك مع أكثر المتصفحات الممكنة ، على الأقل السوق الكبير (Firefox ، Chrome ، Internet Explorer ، Safari ، Opera ) . أخيرًا ، لا تتردد في زيارة الرابطين أدناه:

ما الذي يجعل JQUERY قوية جدا وعالمية


وُلدت لغة JavaScript في عام 1995. ومنذ ذلك الحين ، تم تنفيذها في مختلف متصفحات السوق بطريقة فوضوية إلى حد ما: على الإصدارات المختلفة (كل من اللغة والمتصفحات) ، تم الاحتفاظ ببعض الميزات ، البعض الآخر لا. تجد أحيانا تعليمة برمجية معروفة من متصفح و ليست معروفة في متصفح آخر او حتى معروفة في اصدار و غير معروفة في اصدار آخر من نفس المتصفح. يا له من لغز للمبرمج!

لحسن الحظ ، يأتي jQuery للإنقاذ: من خلال تحديد مجموعة التعليمات الخاصة به ، فإنه يعمل بمثابة تراكب على إصدارات مختلفة من JavaScript ، سواء كانت موجودة أو في المستقبل. من ناحية أخرى ، فإنه يأخذ بعين الاعتبار المتصفحات في السوق ، وإصداراتها المتعددة وتوافقها مع تعليمات لغات JavaScript و AJAX .

لكي تعمل العملية المستندة إلى جافا سكريبت بشكل صحيح على الإصدارات المختلفة من كل متصفح ، يجب على المبرمج إعداد مجموعة من الاختبارات وتنفيذ تعليمات برمجية خاصة بكل متصفح وكل إصدار ، كما هو مبين في الشكل التالي.

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

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

jQuery عملي للغاية ، ولكن ما عليك الا الجانب المرئي للكود: يجب أن تستند الصفحة أولاً إلى كود HTML صلب!

ولكن ماذا يحدث عند إصدار إصدار جديد من JavaScript؟ حسنًا ، يتم إكمال تعليمات jQuery وفقًا لذلك. يمكنك الاستمرار في استخدام التعليمات التي تستخدمها في العمل مع و / أو الرجوع إلى الوثائق المتعلقة بالتعليمات الجديدة المتاحة. مهما فعلت ، ستعمل جميع عبارات jQuery المستخدمة في جميع المتصفحات المتاحة. هذا النهج هو متعة حقيقية للمبرمج ، سواء كان مبتديء أو محترف.

سأضيف بعض التفاصيل الأخرى التي ستقنعك بالتأكيد بأنك اتخذت الخيار الصحيح من خلال اتخاذ قرار ببدء تعلم jQuery:

  • الوثائق الرسمية واسعة النطاق وذات جودة عالية ؛
  • المجتمع حول jQuery يتوسع باستمرار ويوفر جودة الدعم ؛
  • يستخدم العديد من اللاعبين الرئيسيين على الويب ( Microsoft و Google و Amazon و Twitter و Mozilla وما إلى ذلك) jQuery ؛
  • يوجد العديد من المكونات الإضافية لزيادة القدرات الأساسية ل jQuery .

مرحبا بكم في عالم رائع من jQuery !

تثبيت JQUERY


jQuery هي مكتبة جافا سكريبت. وبعبارة أخرى ، ملف التمديد .js. لاستخدامها في صفحة HTML ، ما عليك سوى الرجوع إليها باستخدام علامة

<script>، مثل الكود التالي:


    <script src="jquery.js"></script>

في هذا المثال ، السمة src هي jquery.js . كما ترون ، لم يتم تحديد موقع الملف في السمة. هذا يعني أنه يجب أن يكون في نفس المجلد مثل ملف HTML .

لكن الملف jquery.js ليس على جهاز الكمبيوتر الخاص بي. هل سيعمل هذا الكود ؟

حسنا لا ! إذا استخدمت العبارة السابقة ، فلن تكون مكتبة jQuery قابلة للاستخدام. حلان متاحان لك:

  1. إذا كان جهاز الكمبيوتر الخاص بك غير متصل دائمًا بالإنترنت و / أو كان اتصال الإنترنت الخاص بك غير سريع ، فيمكنك تنزيل مكتبة jQuery إلى أي مجلد والرجوع إليها محليًا.
  2. إذا كان الكمبيوتر الخاص بك لا يزال متصلاً بالإنترنت ، يمكنك الرجوع إلى مكتبة jQuery عن طريق تحديد عنوان ويب.

لنلقِ نظرة على هذين الحلين.

قم بتنزيل JQUERY على جهاز الكمبيوتر الخاص بك

انتقل إلى موقع jQuery وقم بتنزيل أحدث إصدار من خلال النقر على الرابط jquery.js، في الإطار Recent Stable Versions، كما في الشكل التالي.

jQuery web
على الموقع الرسمي ، يتوفر نسختان من مكتبة jQuery: jquery.jsو jquery.min.js. لماذا اخترنا الإصدار الأول؟ هل الثاني أقل اكتمالا؟

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

jQuery web

بشكل عام ، سوف تستخدم الملف jquery.jsقيد التطوير والملف jquery.min.jsقيد الإنتاج ، أي عندما يتم اختبار الرمز الخاص بك وتصحيحه ووضعه على الويب.

انت أيضا يمكنك التقليل من نصوص الكود jQuery الذي تكتبه بحيث يتم تحميلها بشكل أسرع. لهذا يمكنك استخدام Google Closure Compiler أو YUI Compressor .

انتقل إلى مجلد التنزيل ونقل الملف jquery.js إلى المجلد حيث ستقوم بتطوير أكواد jQuery الخاصة بك. في الصورة التالية على سبيل المثال ، يتم نقل الملف إلى المجلد data\Site du Zéro\jQuery\dev.

jQuery web

الرجوع إلى JQUERY عبر الإنترنت

أبسط طريقة هي الرجوع إلى الملف jquery.jsعلى . CDN (pour Content Delivery Network) تتكون شبكات الكمبيوتر عبر الإنترنت، وهذه عناصر البنية التحتية تتعاون على توفير بأسرع وقت ممكن المكتبة jQuery . يمكنك استخدام jQuery أو Google أو Microsoft CDNs . فيما يلي العناوين المقابلة:

CDN الإصدار غير مصغر نسخة مصغرة
jQuery http://code.jquery.com/jquery.js http://code.jquery.com/jquery.min.js
Google http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js http://ajax.googleapis.com/ajax/libs/j [...] jquery.min.js
Microsoft http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js
توفر jQuery و Google CDNs وصولاً مباشراً إلى أحدث إصدار من jQuery . بالنسبة إلى Microsoft CDN ، يجب عليك تحديد الإصدار المراد استخدامه في العنوان. قد يكون ذلك مفيدًا إذا كنت تريد استخدام إصدار معين من jQuery . إذا لزم الأمر ، انتقل إلى صفحة سرد عناوين الإصدارات المختلفة من jQuery .

يعد استخدام CDN أمرًا مثيرًا للاهتمام في الإنتاج ، أي عندما يتم اختبار رمز jQuery الخاص بك واستضافته على خادم ويب. في الواقع ، من خلال الإشارة إلى ملف خارجي لموقعك ، لا تبدأ عرض النطاق الترددي الخاص به. من ناحية أخرى ، نظرًا لأن شبكات CDN لديها نطاق ترددي عالٍ ، فهي سريعة الاستجابة للغاية. أخيرًا ، jquery.min.js غالبًا ما يكون الملف من CDN موجودًا بالفعل في ذاكرة التخزين المؤقت للمتصفح. هذه الأسباب الثلاثة تجعل تحميل الصفحة أسرع.

من ناحية أخرى ، في مرحلة التطوير ، أي عند كتابة كود jQuery الخاص بك على جهاز الكمبيوتر المحلي ، أنصحك بتنزيل الملف jquery.js والرجوع إليه محليًا. في الواقع ، حتى لو كان لشبكة CDN نطاق ترددي ممتاز ، فإن استخدام ملف محلي سيكون أسرع بكثير.

  • عادةً ما يتم تشغيل رمز jQuery على أجهزة الكمبيوتر العميلة. ومع ذلك ، يمكن في بعض الأحيان أن يطلب من الخادم تحديث جزء من الصفحة باستخدام كود أجاكس.
  • أفضل طريقة لتطوير تعليمات برمجية jQuery على جهاز الكمبيوتر الخاص بك هي تنزيل الملف jquery.js ووضعه في مجلد على محرك الأقراص الثابتة لديك والرجوع إلى هذا الملف في علامة <script>.
  • بمجرد اختبار الرمز وتصحيحه ، ستضعه على خادم ويب مع عميل FTP الخاص بك والرجوع إلى الملف jquery.min.js المخزن على CDN لتحسين أوقات الاستجابة دون تقطيع عرض النطاق الترددي للخادم.