[موسيقى].
دعونا الآن قضاء بعض الوقت في محاولة لفهم كيفية
عمل Bootstrap و jQuery معًا لدعم مكونات جافا سكريبت في Bootstrap.
كما فهمنا من الوحدة السابقة، يحتوي Bootstrap
على عدد من المكونات المثيرة للاهتمام المستندة إلى JavaScript.
وعلمنا أيضًا أن المكونات المستندة إلى جافا سكريبت في Bootstrap
يتم تمكينها باستخدام jQuery كدعم. يتم
كتابة العديد من هذه الإضافات في jQuery.
يمكن تضمين المكونات الإضافية نفسها بشكل فردي أو
يمكنك تضمين جميع المكونات الإضافية معًا كوحدة واحدة.
في التدريبات، لقد تم تضمين جميع
المكونات الإضافية جافا سكريبت في Bootstrap في صفحة الويب الخاصة بنا.
رأينا أيضًا هذا الرسم في الوحدة السابقة
لمساعدتنا على فهم العلاقة بين JavaScript و jQuery
وكيفية تنفيذ الإضافات المستندة إلى JS في Bootstrap.
لذلك رأينا أن مكونات JS Bootstrap في المكونات المستندة إلى JQuery
وتجعل من السهل بالنسبة لنا للاستفادة منها في صفحة الويب الخاصة بنا.
تعلمنا أيضًا أنه يمكن استخدام المكونات المستندة إلى جافا سكريبت في Bootstrap
في صفحة الويب الخاصة بك دون كتابة سطر واحد من شفرة JavaScript.
لذلك هذا هو المكان الذي تأتي فيه سمات البيانات* لإنقاذنا.
حتى تتمكن من استخدام السمات المختلفة التي رأيناها في
الوحدة السابقة لتمكين العديد من المكونات المستندة إلى جافا سكريبت في Bootstrap.
في حال كنت تريد المزيد من المرونة مع مكونات جافا سكريبت،
فإن المرونة الكاملة لواجهة برمجة التطبيقات المستندة إلى جافا سكريبت
متاحة لجميع مكونات جافا سكريبت Bootstrap.
يمكنك كتابة التعليمات البرمجية باستخدام بناء جملة jQuery ثم استخدام ذلك
معًا للتحكم في مكونات JS في Bootstrap.
نحن ذاهبون لاستكشاف ذلك في مزيد من التفاصيل في هذه الوحدة.
قبل المضي قدما، اسمحوا لي أن أقدم لكم جولة سريعة من مسج وبناء الجملة
بحيث نفهم بعض من التعليمات البرمجية التي سوف نكتب في هذه الوحدة.
jQuery هي
مكتبة قوية جدًا وخفيفة الوزن تعتمد على جافا سكريبت توفر عددًا من المكونات المختلفة.
إنها مكتبة غنية بميزة تمكن كتابة التعليمات البرمجية
للقيام بتلاعب HTML أو DOM.
انها تسمح لك للقيام التلاعب CSS.
لذلك، على سبيل المثال،
يمكنك تطبيق فئات CSS على عناصر HTML المختلفة من خلال رمز jQuery.
يسمح لك بمعالجة أحداث HTML،
وعندما تحدث هذه الأحداث يمكنك تنفيذ الطرق التي يتم تنفيذها
استجابة لحدوث هذه الأحداث.
يدعم jQuery أيضًا التأثيرات
والرسوم المتحركة المختلفة التي يمكن تطبيقها على عناصر HTML الخاصة بك.
كما تمكنك jQuery من التفاعل مع خادم النهاية الخلفية باستخدام AJAX.
على الرغم من أننا لن استكشاف ذلك في الكثير من التفاصيل في هذه الدورة.
تعلمنا أيضًا أن مكونات جافا سكريبت Bootstrap
مبنية على jQuery.
تستخدم هذه المكونات العديد من أساليب jQuery المتوفرة
لتنفيذ الميزات المختلفة التي تدعمها مكونات JavaScript Bootstrap هذه.
دعونا نفهم بإيجاز بناء الجملة jQuery.
الآن إذا كنت قد رأيت بعض التعليمات البرمجية التي قمنا بتضمينها
في الوحدة السابقة، وتحديدًا
لتلميح الأداة، تتذكر أن هناك شيئًا بدأ بعلامة الدولار.
لذلك، يتم تنفيذ جميع بناء الجملة jQuery باستخدام علامة الدولار.
تشير علامة الدولار في بداية الجملة إلى أن هذا يحدد
ويصل إلى الإضافات مكتبة jQuery المتوفرة.
الآن كلما استخدمنا علامة الدولار، يمكنك أيضًا توفير محدد.
يتم استخدام المحدد للاستعلام والعثور على
عناصر HTML هذه داخل DOM التي تريد تطبيق هذا التلاعب عليها.
هناك طرق مختلفة للقيام التحديدات.
سننظر إليها في الشريحة اللاحقة.
ثم الجانب الثالث من عبارة jQuery هو الإجراء الذي تحدده.
الآن بعد أن قمت بتحديد عنصر HTML، أي نوع من الإجراء الذي تريد
أن يتم تنفيذه على هذا العنصر، بحيث هو الجزء الثالث الذي سترى.
على سبيل المثال، يمكنك تحديد عبارة jQuery
مثل $ («p») داخل الرموز، ثم .hide.
لذا في هذه الحالة، ما يوحي به هو أنه، حدد جميع عناصر HTML تلك
التي هي عناصر الفقرة،
بدءًا من علامة p، ثم تقوم هذه العناصر بإخفاء تلك العناصر.
لذا فإن الإجراء المطلوب تنفيذه هو الارتفاع،
لذلك سيؤدي ذلك إلى إخفاء جميع عناصر p من
DOM، وبالتالي من صفحة الويب التي يتم تقديمها.
وبالمثل، سترى لاحقًا لنا باستخدام
عبارة مثل قول الدولار،
ثم ضمن علامات الاقتباس، #mycarousel، مما
يعني أنك تحدد معرف عنصر HTML محدد،
ثم تحدد دائري وقفة.
سننظر في مزيد من التفاصيل حول ما يفعله هذا بالفعل
في إحدى الشرائح اللاحقة هناك.
ولكن لاحظ بنية بناء جملة عبارة jQuery هناك.
يمكنك تحديد المحدد، ومن ثم تحديد الإجراء المطابق ليتم
تنفيذها على العنصر الذي تم تحديده بواسطة هذه المحددات.
دعونا نلقي نظرة على مثال Bootstrap jQuery.
سنعود إلى المثال السابق الذي رأيناه في وقت سابق،
حيث نقدم تلميح الأدوات.
لذلك، عندما نقدم تلميح الأدوات، حددنا البرنامج النصي
ثم داخل البرنامج النصي، قلنا $ (وثيقة).
في هذه الحالة يعني المستند بأكمله.
وبالتالي فإن المحدد هنا هو للمستند بأكمله.
لذلك بالنسبة للمستند بأكمله، وبعد ذلك سنقوم بتحديد جاهزة.
جاهز هو الإجراء الذي يتعين اتخاذه.
لذلك عندما يكون المستند جاهزًا، قم بتنفيذ هذه الوظيفة
المحددة كمعلمة لهذا الإجراء الجاهز هناك.
لذا فإن الوظيفة التي رأيناها يتم استخدامها في تلميح الأدوات المحددة على أنها $،
ثم بين قوسين، قالت، تبديل البيانات =» تلميح الأدوات».
الآن نحن هنا نحدد أن حدد تلك العناصر
التي توجد لها سمة مع data-toggle = «tooltip».
ثم بالنسبة لتلك العناصر التي تتطابق مع هذه المعايير، قم بتنفيذ هذا الإجراء الذي
يسمى تمكين تلميحات الأدوات لتلك العناصر.
ونغلق الوظيفة هناك.
لذلك يحدد هذا أنه
سيتم تنشيط هذا البرنامج النصي المحدد لتلك العناصر التي قمت بتطبيق تلميح أداة تبديل البيانات.
لذلك أساسا بالنسبة لعناصر HTML التي قمت بتعريف تلميحات الأدوات،
تريد تمكين تلميح الأدوات هناك.
إذن هذه هي الطريقة التي نفسر بها بناء الجملة هذا من مثال jQuery هنا.
دعونا ننظر إلى الطرق المختلفة لتحديد محددات.
لذلك كما ندرك من بناء جملة عبارة jQuery،
فإننا نتبع دائمًا الدولار ثم، بين قوسين، نحدد محددًا.
كيف نحدد المحددات، ما هي الطرق المختلفة التي يمكنك من خلالها تحديد المحددات؟
وهنا بعض الاحتمالات.
يمكنك تحديد محدد عن طريق تحديد أي
عنصر HTML محدد عن طريق تحديد العلامة.
لذلك يمكنك أن تقول p، زر، h4،
h3، أو أي من علامات HTML مباشرة.
وهكذا في هذه الحالة يتم تحديد اسم علامة HTML ضمن علامات الاقتباس
والتي سوف تشكل المحدد الخاص بك.
عندما تقوم بتطبيق محدد مثل هذا، فأنت تقول أنه
سيتم تحديد جميع العناصر التي تتطابق مع هذه المعايير.
ثم يمكنك أيضا تحديد
عنصر DOM HTML محدد عن طريق تحديد معرف هذا العنصر باستخدام #id.
لذلك، على سبيل المثال، نستخدم #myCarousel.
لذلك في هذه الحالة أنت تقول حدد
عنصر HTML معين الذي يكون المعرف هو MyCarousel.
لذلك هذه هي الطريقة الأخرى للاختيار، من خلال تحديد معرف لعنصر.
الاحتمال الثالث هو اختيار
العناصر حسب الفئات التي طبقت على ذلك.
لذلك، على سبيل المثال، يمكنك أن ترى بين قوسين إذا قلت .btn،
مما يعني أن جميع عناصر HTML DOM
التي قمت بتطبيق فئة الزر سيتم تحديدها.
أو يمكنك أيضًا التأهل عن طريق تحديد مجموعة من الفئات
بقول.btn.btn.btn-default، مما يعني أنه
تم تطبيق تلك العناصر لفئة الزر والفئة الافتراضية للزر.
لذلك هذه طريقة أخرى،
باستخدام الفئات التي يتم تطبيقها على عنصر HTML.
الاحتمال الآخر هو تحديد السمة التي تم تطبيقها
على عنصر HTML.
على سبيل المثال، يمكنك القول أن السمات محددة ضمن أقواس مربعة هنا.
لذلك يمكنك أن ترى بين قوسين مربعين href، وتضمينه في الاقتباس
مما يعني أن جميع عناصر HTML التي تم تطبيق سمة href عليها.
وبالمثل، يمكنك أن تقول
data-toggle = «tooltip»، الذي يحفظ بشكل أساسي جميع تلك العناصر التي تم تطبيق سمة تلميح الأدوات عليها.
أيضا، اختيار العنصر الحالي
الذي تريد أن تفعل شيئا عن طريق قول $ (هذا).
بمعنى، بالنسبة للعنصر الحالي الذي تم اختياره بالفعل،
لهذا، افعل شيئًا ما.
والكثير من الاحتمالات الأخرى
هذه بعض الأمثلة، لذلك سوف تراني أستخدم بعض هذه
في الأمثلة والتمرين التالي.
ليس ذلك فقط، يمكنك أيضًا تحديد أحداث jQuery،
والأحداث التي تقوم على أساسها بالرد.
لذلك، على سبيل المثال،
ستؤدي تفاعلات المستخدم مع عناصر مختلفة على صفحة الويب إلى حدوث أحداث DOM.
لذلك، على سبيل المثال، باستخدام الماوس، قد ينقر المستخدم في موقع معين.
أو انقر نقرًا مزدوجًا، أو عندما يدخل الماوس ويترك موقعًا محددًا.
بالنسبة للوحة المفاتيح، يمكنك الرد على مكابس المفاتيح، keydown و keyup.
أحداث للنماذج، عندما يتم إرسال النموذج،
عندما يكون هناك تغيير في
قيمة عنصر إدخال معينة، وعندما يتم التركيز على عنصر معين، وهلم جرا.
يمكننا حتى الحديث عن الوثيقة بأكملها.
لذلك، عند تحميل المستند، عند تغيير حجم المستند،
عند التمرير أو تفريغ المستند، يمكنك الرد على تلك الأحداث.
لذلك، في هذه الحالة، تتضمن أساليب أحداث jQuery المدعومة جاهزة،
انقر فوق، dblclick، mousedown، على، وهكذا.
لذلك هذه هي كل أساليب الحدث التي
سيتم تنفيذها عند حدوث أي من هذه الأحداث هناك.
دعونا نأخذ مثالا على Carousel Bootstrap لنرى كيف
يمكن كتابة شفرة جافا سكريبت للتحكم في الإجراءات الدائرية.
لذلك، بالنسبة للدائري، رأيت بالفعل من الوحدة السابقة، حجم الفهرس.
استخدمنا كل هذه الصفات.
لذلك استخدمنا سمة البيانات الشريحة = «prev|next»، أو
قلنا البيانات الشريحة إلى ثم حددنا رقم الشريحة المحدد،
حيث يقول ركوب البيانات+« دائري».
ثم حددنا الفاصل الزمني للبيانات، الفاصل الزمني
لعمل انزلاق أن يحدث.
لذلك بالنسبة للدائري، يمكنك القيام بأشياء مثل،
على سبيل المثال، يمكنك تحديد عناصر التحكم المستندة إلى جافا سكريبت.
يمكنك أن ترى $، وضمن الأقواس تحديد لتحديد تلك العناصر،
الدوارات، التي يتم تضمينها في صفحتك عن طريق تحديد.carousel.
بمعنى كل تلك العناصر التي تم تطبيق فئة دائري عليها،
ثم بعد ذلك يمكنك استخدام .carousel لتحديد شيء ما.
لذلك على سبيل المثال سترى لي باستخدام شيء من هذا القبيل
في التمرين الذي يلي.
سنقول. دائري و دائري،
وداخل هناك يمكنك تحديد الفترة:2000،
وهذا يعني تعيين الفاصل الزمني للانزلاق ليكون 2000 ميلي ثانية.
أو ثانيتين، في هذه الحالة
وبهذه الطريقة يمكنك التحكم أو تعديل خاصية معينة
من عنصر جافا سكريبت دائري هناك.
كما يدعم دائري العديد من الضوابط الأخرى.
لذلك، على سبيل المثال، يمكنك أن تقول دائري («دورة»)،
وهذا يعني بدء ركوب الدراجات العناصر من اليسار إلى اليمين.
يمكنك أن تقول دائري («وقفة»)، لإيقاف العمل المنزلق من دائري.
ثم يمكنك أن تقول دائري (رقم)،
لذلك دورات دائري إلى هذا البند دائري معين.
وبعد ذلك يمكنك أن تقول دائري ('prev')،
دائري ('التالي') للانتقال إلى العنصر السابق والعنصر التالي في دائري.
لذلك، يمكن استدعاء هذه مباشرة من شفرة جافا سكريبت لدينا.
وبالمثل، عندما يكون
عنصر دائري جافا سكريبت في صفحة الويب الخاصة بك، فإنه يسبب أحداث مختلفة.
وبناء على حدوث هذه الأحداث، يمكنك الرد.
لذلك، على سبيل المثال، يمكنك أن تقول slide.bs.دائري.
سيتم تشغيل هذا الحدث الخاص عند استدعاء أسلوب مثيل الشريحة.
وبالمثل، slid.bs.carousel يعني
أن يتم تشغيل هذا الحدث عند الانتهاء من انتقال الشريحة إلى العنصر التالي.
حتى داخل التعليمات البرمجية الخاصة بك يمكنك تحديد شيء
مثل $ (» #myCarousel «) .on ('slide.bs.دائري».
وهذا يعني أنه عندما يبدأ هذا الإجراء الشريحة، ثم استدعاء هذه الوظيفة،
ومن ثم القيام بشيء داخل تلك الوظيفة هناك.
لذلك يمكن إرجاع هذا النوع من التعليمات البرمجية أيضًا
للرد على الأحداث التي تسببها سلوك دائري الخاص بك.
بعد النظر في بعض هذه الأمثلة، سننتقل إلى تمرين حيث
سنقوم بالفعل بكتابة بعض التعليمات البرمجية المستندة إلى جافا سكريبت للتحكم في دائري لدينا.
سوف نكتب التعليمات البرمجية لتشمل اثنين من الأزرار داخل دائري لدينا،
والتي سيتم استخدامها للسيطرة على انزلاق العمل من دائري.
لذلك، مما يعني أننا يمكن وقفة واستئناف انزلاق العمل من دائري لدينا.
وسنقوم بتنشيط هذه الأزرار من جافا سكريبت.
[ موسيقى]