الفهرس



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


الدرس: الخطوات الأولى


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

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

وأخيرًا ، سوف تتخذ خطواتك الأولى في برمجة jQuery عن طريق كتابة بضعة أسطر من التعليمات البرمجية. سترى كيف أن jQuery موجزة وقوية. مرحبا بكم في عالم البرمجة jQuery !

المفردات لمعرفة


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

العلامات

يُسمى أيضًا العنصر أو العلامة ، وهو الكيان الأساسي للغة HTML . يتم تأطير العلامات دائمًا بواسطة الأحرف

<and> . على سبيل المثال <html> أو مرة أخرى <body> . يجب إغلاق العلامات المفتوحة باستخدام علامة إغلاق. على سبيل المثال <html>أو مرة أخرى </body>. يمكن أن تكون بعض العلامات الافتتاح والختام . في هذه الحالة ، يظهر الحرف / قبل علامة النهاية. على سبيل المثال، <img src="image.jpg" />.

السمة

بالإضافة إلى اسمهم ، قد تتلقى بعض علامات HTML معلومات إضافية أو أكثر. هذه المعلومات هي سمة. يتم تحديدها دائمًا في علامة الفتح ، تليها علامة = وقيمة معروضة. عندما تحتوي العلامة على سمات متعددة ، يتم فصلها بمسافات. العلامة

<img> كود <img src="jquery.jpg" alt="logo jQuery" id="imglogo" />يحتوي على ثلاث صفات src، altو id.

كتلة

يتم عرض علامات HTML لكتلة الكتابة على الأسطر المتتالية. على سبيل المثال ، إذا قمت بتحديد علامتين

<div>في مستند HTML ، فسيتم عرض واحدة أسفل الأخرى. يمكن أن تكون علامات الكتلة بالحجم ، وبالتالي تشغل مساحة محددة جيدًا (الارتفاع والعرض) في مستند.

مضمنة

يتم عرض علامات HTML المضمنة واحدة تلو الأخرى. على سبيل المثال ، إذا قمت بتحديد علامتين

<span>في مستند HTML ، فسيتم عرضهما على نفس السطر. لا يمكن تغيير حجم العلامات المضمنة

مضمنة-كتلة

انها مزيج من أنواع المضمنة والكتلة. إذا حددنا علامتي كتلة مضمّنة في مستند HTML ، فسيتم عرضهما واحدة تلو الأخرى (هذا هو سلوك العلامات المضمّنة). يمكن أيضًا تحديد حجمها (العرض والارتفاع) (هذا هو سلوك علامات الكتلة) .

ورقة النمط

إنه مستند يجمع نمطًا واحدًا أو أكثر من أنماط CSS التي تحدد تنسيق المستند. إذا كانت ورقة النمط داخلية لمستند ، فيجب تحديد الأنماط المختلفة في رأس المستند ، بين العلامات

<style type="text/css"></style>و </style> . إذا كان ملف الأنماط خارجي ، يجب عليك تحديد الأنماط في ملف التمديد .cssوالرجوع إليها في رأس المستند باستخدام علامة <link rel="stylesheet" type="text/css" href="styles.css" /> . هنا ، تم تسمية ورقة الأنماط styles.css

خصائص CSS

وهي تحدد خصائص نمط CSS . تم تحديدها في ورقة الأنماط ، بين قوسي الفتح والإغلاق اللذين يتبعان المحدد. في المثال التالي، colorو marginيتم خصائص CSS تطبيقها على عنصر محدد li:


li
{
  color: red;
  margin: 10px;
}
محدد CSS

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

محدد نوع يشير إلى
h2 محدد العلامة جميع العلامات<h2>
.rouge محدد الصف جميع علامات الصفrouge
#grand معرف محدد علامة المعرفgrand
:first-letter محدد عنصر الزائفة الحرف الأول من عنصر
.rouge:first-letter محدد عنصر الزائفة لفئة الحرف الأول من علامات الصفrouge
* محدد عام جميع العلامات
W3C

The WORLD WIDE WEB CONSORTIUM (W3C) هي منظمة توحيد غير ربحية تعمل على تعزيز توافق تقنيات WORLD WIDE WEB مثل HTML و XHTML و XML و RDF و CSS و PNG و SVG و SOAP.

DOM
على طراز كائن المستند هو بنية البيانات التي تمثل وثيقة HTML مثل شجرة . جذر هذه الشجرة هو عقدة مسماة document تتوافق مع العلامة تقريبًا <html> . بنفس القدر تقريبًا ، تتوافق علامات HTML المعرفة في صفحة الويب مع عقد شجرة DOM وتشكل بنيتها. تستطيع لغة jQuery استعلام DOM للتعرف على الخصائص (السمات وقيم HTML والخصائص وقيم CSS) للعلامات التي تشكل ملف HTML ، ولكن أيضًا لتعديل هذه العناصر لتغيير وتيرة و / أو المحتوى من الملف.
DTD
في تعريف نوع المستند يشار إلى العلامة <!DOCTYPE> . يجب أن يظهر الأخير في الجزء العلوي من ملفات HTML . يخبر المستعرض قواعد الكتابة المستخدمة في المستند. في هذه الدورة ، سنستخدم دائمًا قواعد كتابة HTML5. سوف يكون DTD المقابل هو <!DOCTYPE html> .
مجموعة الأحرف
ترتبط مجموعة الأحرف في مستند HTML بلوحات المفاتيح الوطنية المختلفة. لإعلام المستعرض بأي مجموعة أحرف تعمل عليها ، يجب عليك إدراج علامة <meta charset="">في رأس المستند. يتم استخدام مجموعتين من الأحرف بشكل أساسي:
  • ISO-8859-1 للوصول إلى معظم الأحرف في اللغات الغربية ، مثل الفرنسية والإنجليزية والألمانية والإسبانية ، إلخ.
  • UTF-8 لعرضه على نفس أحرف الصفحة من عدة لغات (الفرنسية واليابانية و عربية على سبيل المثال).
حسب احتياجاتك ، سوف تستخدم علامة <meta charset="ISO-8859-1">أو <meta charset="UTF-8"> .
وظيفة JQUERY
هذه هي نقطة دخول مكتبة jQuery . يمكنك استخدام العبارة jQuery()أو الاسم المستعار الخاص بها $() . في هذه الدورة ، سنستخدم دائمًا الاسم المستعار للحد من الكتابة.
طرق JQUERY
تتكون مكتبة jQuery من مجموعة من الاكواد البرمجية المستقلة تسمى الأساليب أو الدوال .ما يجعل قوة هذه المكتبة هو قبل كل شيء التنوع الكبير في الأساليب المقترحة. لتشغيل طريقة jQuery، ببساطة تحديد اسمها بعد التحول عن طريق فصل الأخير بفارق نقطة واحدة $(selector).method(parameters);.
كائن JQUERY
نحن نسمي "كائن jQuery " الكيان الراجع كنتيجة بواسطة دالة jQuery ، أي بواسطة $() . يمثل هذا الكائن مجموعة من الصفر أو عنصر واحد أو أكثر من الملف.

هيكل HTML النموذجي


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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="jquery.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

لن أتوقف عند كل من هذه الأسطر ، يجب أن تكون قادرًا على فهمها. ومع ذلك ، سأقوم بالتفصيل بخطوط صغيرة 10 و 11.
يشير السطر 10 إلى المكتبة jquery.js . هنا أيضًا ، نظرًا لعدم تحديد مسار في القيمة المعينة للسمة src، jquery.jsيجب أن يكون الملف في نفس المجلد مثل مستند HTML . لن أعود إلى كيفية تنزيله ، ارجع إلى الفصل الأول إذا كنت بحاجة.
يشير السطر 11 إلى ملف جافا سكريبت خارجي على صفحتك تضع فيه جميع أكواد jQuery فيما يتعلق بالملف.
في النهاية ، تبقى لدينا أربعة ملفات:
  1. ملف HTML نفسه
  2. ورقة الأنماط الخارجية التي تحدد تنسيق الوثيقة ؛
  3. الملف jquery.js، الذي يحتوي على مكتبة jQuery ؛
  4. ملف JavaScript خارجي يحتوي على جميع رموز jQuery التي ستقوم بكتابتها.
أربعة ملفات لإعداد بعض ارشادات jQuery؟ أليس هذا غير متناسب نوعا ما ؟
حسنًا ... كل هذا يتوقف على ما إذا كنت تريد "العبث" أو إذا كنت ترغب في البرمجة في jQuery . في الواقع ، يعتبر الإغراء رائعًا لوضع كود CSS و jQuery في مستند HTML ، لذلك استخدم ملفين فقط: مستند HTML ومكتبة jQuery . خاصة لأنه يعمل. لكن تخيل أنه عليك إنشاء موقع على شبكة الإنترنت يحتوي على عشرات الصفحات. من خلال الاستعانة بمصادر خارجية لأكواد CSS و jQuery ، يمكنك إعادة استخدامها بسهولة وبذلك تكون فائزا في عدة جداول:
  • سيتم تخفيض وقت التطوير وفقا لذلك ؛
  • سيتم تقليل خطر الأخطاء ، حيث سيتم استخدام نفس الكود في مستندات HTML المختلفة ؛
  • ستكون الصيانة أسهل كثيرًا: لإجراء تغيير في الموقع بالكامل ، سيكون عليك فقط العمل على ورقة أنماط خارجية وعلى ملف JavaScript الخارجي. إذا كنت قد أدمجت كود هذين الملفين ، فيجب أن تغير في كل صفحة من صفحات HTML بالموقع!
هيكل HTML في مرحلة الإنتاج
هذا كل شيء ، رمز HTML / CSS / jQuery / JavaScript يعمل بشكل مثالي ولا يمكنك الانتظار لاختباره عبر الإنترنت. قبل استخدام عميل FTP ، تأكد من الرجوع إلى الإصدار المصغر من مكتبة jQuery وتحميله على CDN . لذلك ، مع الإصدار المصغر على CDN من Google ، إليك رمز الاستخدام:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Le titre du document</title>
      <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
    </head>
    <body>
      <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="mon-script.js"></script>
    </body>
  </html>
تحسين الكود
فيما يلي بعض التوصيات التي من شأنها زيادة أداء الصفحات التي تحتوي على كود jQuery :
  1. استدعاء المكتبة jquery.js في نهاية المستند ، قبل العلامة </body> .
  2. أدخل رمز jQuery المرفق بالصفحة في ملف مرفق والرجوع إلى هذا الملف بعد العلامة التي تشير إلى مكان مكتبة jQuery مباشرة
تعمل هذه المواضع الإستراتيجية على تحسين وقت تحميل الصفحة. في الواقع ، تمنع العديد من المتصفحات تنفيذ التعليمات البرمجية التي تتبع علامة <script>حتى يتم تحميل هذه العلامة وتنفيذها. عن طريق وضع علامتين <script>قبل العلامة </body>، لا يتم كبح عرض الصفحة برمز jQuery .
انتظر توفر DOM
يتم استخدام لغة jQuery لمعالجة (قراءة وكتابة) DOM ، أي شجرة المستند. تخيل أن هذه التغييرات تبدأ بينما الشجرة لم تحمل بالكامل. قد يؤدي هذا الموقف غير المنتظم إلى تعطيل العرض أو إنشاء أخطاء أو حتى حظر المتصفح!
لتجنب هذا ، يجب عليك الانتظار حتى اكتمال الشجرة. في jQuery ، يُترجم هذا إلى الكود التالي:

jQuery(document).ready(function() {
  // هنا DOM محمل بالكامل
});
يمكن تبسيط هذه الكتابة عن طريق استبدال jQueryاسمها المستعار $الذي يعطي:

$(document).ready(function() {
  // هنا  DOM محمل بالكامل
});
أخيرًا ، (document).readyيمكن حذفها للوصول إلى الرمز التالي:

$(function() {
  // هنا DOM محمل بالكامل
});
هذه الإرشادات الثلاثة متساوية تمامًا. في حالتي ، سأستخدم دائمًا ما هو موجود في المرحلة الثالثة خلال هذه الدورة لأنها أقصر وأسهل في الكتابة. ومع ذلك ، إذا نظرت إلى مقالات أخرى حول jQuery ، فستجد في بعض الأحيان النموذجين الآخرين.
في المقدمة ، قيل أنه يمكن استخدام jQuery للاستعلام / تعديل DOM ، ولكن أيضًا أنماط CSS للوثيقة. $(function() { }يضمن البيان أن يتم تعريف DOM بالكامل. ولكن ماذا عن ورقة النمط؟
إذا كنت قد أشرت إلى ورقة أنماط بين <head>و </head>، فإن البيان $(function() { }يضمن أيضًا تحميل ورقة الأنماط. حتى تتمكن من استجوابه وتغييره كما تريد.
السيناريو الأول: " HELLO WORLD "
إنه تقليد راسخ عند كتابة دورة تدريبية على لغة برمجة: المثال الأول يعرض نصًا على الشاشة: "Hello world"! لن نتخلى عن القاعدة. على استعداد لمواجهة التحدي؟
سابقا ، لقد قلت عدة مرات أن jQuery قادرا على التعامل مع عناصر DOM . حسنا الآن ، لقد حان الوقت لإثبات ذلك. لهذا ، سأحدد علامة <span>في المستند ، وسأعين سمة idلتعريفها وتعديل محتواها في jQuery .
Hello-world.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body dir="rtl">
    هذا النص مكتوب ب HTML 
<br>
    <span id="texteJQ"></span>
    <script src="jquery.js"></script>
    <script src="jq-hello-world.js"></script>
  </body>
</html>
كما ترى ، تمت إزالة السطر في رأس الصفحة. في الواقع ، فإن استخدام ملف الأنماط ليس له أهمية في هذا المثال.
يشير السطر 12 إلى ملف JavaScript jq-hello-world.js . هنا المحتوى:

$(function() {
  $('#texteJQ').html('هذا النص مكتوب ب jQuery.');
});
إذا لم يكن لديك ذاكرة قصيرة ، فأنت بالتأكيد تتعرف على السطور 1 و 3 التي تنتظر توفر .DOM من ناحية أخرى ، يحتوي السطر 2 على عبارة jQuery التي يمكن أن يكون بناء جملتها محيرًا. دعنا نقسمها لنفهم كيف تعمل:
  • :$('#texteJQ') هذا الجزء بمثابة محدد. يجب أن يوجد في DOM عنصرا لديه السمة id مساوية ل texteJQ . لماذا السمة id، هذا ما ستقول؟ حسنًا ، وفقًا لمصطلحات لغة CSS ، تمثل الحرف # السمة id .
  • : html('Hello world jQuery.'); الجزء الثاني يشير إلى ما يجب تغييره. في هذا المثال ، نستخدم الطريقة html()لطلب تعديل محتوى العلامة.
  • النقطة بين هذين الجزأين هي الرابط بين المحدد والإجراء.
هذا الكود اذا يحدد عنصر texteJQويدرج النص "" Hello world jQuery . يتم عرض هذا النص بواسطة jQuery كما ترى ، لا يوجد شيء من السحر في هذا الموضوع.
انقر مرتين على الملف hello-world.htmlلفتحه في متصفحك. يجب أن تحصل على شيء مشابه للصورة التالية.
jQuery web
إذا لم يتم عرض أي شيء ، فتحقق مما يلي:
  • الملف jquery.jsموجود في نفس المجلد مثل الملف hello-world.html.
  • لم تنسَ أي علامات اقتباس أو أقواس أو أقواس في الملف jq-hello-world.js.
  • الهيكل للمستند الذي يستخدم كود jQuery يختلف في التطوير والإنتاج. في الحالة الأولى ، ستشير إلى المكتبة jquery.jsمحليًا. في الثانية ، سوف تشير إلى المكتبة jquery.min.jsعلى .CDN
  • من الضروري انتظار توفر DOM قبل تشغيل رمز jQuery . وإلا ، يمكن أن ينطبق هذا الرمز على عنصر غير متاح ويسبب سلوكًا غير متوقع ، أو حتى تعطل المتصفح.
  • في jQuery ، لتعديل محتويات علامة <span>لها سمة id تسمى myid، نستخدم التعليمات $("#myid").html("text here ");.
  • لتحسين كود ملف HTML الذي يستخدم ورقة أنماط وكود jQuery ، يتم وضع أنماط jQuery ورمزها في ملفات خارجية. يتم استدعاء ورقة الأنماط في رأس المستند ، بينما يتم استدعاء رمز jQuery قبل العلامة </body>وبعد الإشارة إلى مكتبة jQuery مباشرة.