لوحة المتصدرين

ما هي PHP؟ PHP هي اختصارٌ للعبارة PHP: Hypertext Preprocessor؛ وهي معروفةٌ كلغة سكربتات (scripting language) مُفسَّرة (interpreter) من جهة الخادوم تُستعمَل لتطوير الويب؛ وهذا يعني أنَّ PHP تُستعمَل على الخادوم لتوليد صفحات الويب الديناميكية. ما يُقصَد بصفحات الويب الديناميكية هي تلك الصفحات التي تُنشَأ أو تُعدَّل من الخادوم قبل إرسالها إلى العميل. إن لم تكن تعرف ما هو الخادوم وما هو العميل، فافتح لسانًا جديدًا في متصفح الويب الخاص بك واكتب فيه academy.hsoub.com، وبهذا يُصبِح متصفحك "عميلًا" (client) والمكان الذي تأتي منه صفحة الويب المطلوبة هو "الخادوم" (خادوم الويب أو web server). يمكن تضمين سكربتات PHP في مستندات HTML، وهي لغةٌ سهلة التعلم، وتشبه بنيتها كثيرًا البنية القاعدية للغات C و Java و Perl. التثبيت يمكنك بسهولة تثبيت WAMP (على نظام ويندوز) أو LAMP (على لينُكس) أو حزمة البرمجيات XAMPP (التي تعمل على ويندوز، ولينُكس، وماك) وذلك تبعًا لنظام تشغيل حاسوبك، راجع مقال كيفية تنصيب ووردبريس محليا باستخدام MAMP لمزيدٍ من المعلومات عن MAMP. تجربة الأمثلة يمكنك تجربة سكربتات PHP عبر تثبيت خادم أباتشي مع دعم PHP يدويًا أو عبر تثبيت حزم جاهزة كالتي ذكرناها آنفًا، لكن توفِّر PHP لك طريقتين لتنفيذ الملفات: عبر سطر الأوامر، وعبر الخادوم المدمج مع PHP؛ وسنشرح كلا الطريقتين في هذا الدرس. استخدام الخادوم المدمج وفَّرت PHP من الإصدار 5.4.0 خادومًا مدمجًا معها يُسهِّل تجربة السكربتات دون عبء تثبيت خادوم ويب كامل مثل أباتشي وضبطه؛ لكن الغرض منه هو تجربة البرامج فقط وليس مصممًا للاستعمال كخادوم إنتاجي على الشبكة. ستُخدَّم الملفات الموجودة في مجلد العمل الحالي عبر ذاك الخادوم المدمج، الذي يُشغَّل كالآتي: cd ~/public_html php -S localhost:8000 PHP 5.5.9-1ubuntu4.5 Development Server started at Fri Jan 8 13:58:31 2016 Listening on http://localhost:8000 Document root is /home/user/public_html Press Ctrl-C to quit. الأمر php -S localhost:8000 سيشغِّل الخادوم في مجلد العمل الحالي (‎~/public_html) وسيكون متاحًا للوصول من الجهاز المحلي فقط، وسيعمل على المنفذ 8000؛ إن أردت أن يعمل على البطاقات الشبكية، فضع 0.0.0.0 بدلًا من localhost؛ اضغط على Ctrl+C لإيقاف الخادوم. أنشِئ الملف test.php وضع فيه المحتويات الآتية لتجربه: <?php // هذه تجربة لتنفيذ سكربتات PHP من الخادوم المدمج echo "test"; ?> افتح الآن المتصفح وأدخِل http://localhost:8000/test.php في شريط العنوان، وستحصل على نتيجة مشابهة لما يلي: يجدر بالذكر أنَّه بإمكانك تخديم صفحات HTML الثابتة عبر هذا الخادوم، وليس بالضرورة أن تكون الصفحة بلاحقة PHP. ملاحظة: اختر رقمًا أكبر من 1024 كرقم للمنفذ الذي سيستعمله الخادوم، كي لا تحتاج إلى امتيازات إدارية لتشغيله. استعمال سطر الأوامر من البدهي أن تستطيع تنفيذ شيفرات PHP (كغيرها من لغات السكربتات) من سطر الأوامر؛ كل ما عليك فعله هو استدعاء السكربت من الأمر PHP كالآتي: php ~/public_html/test.php أو يمكن تضمين ما يسمى shebang في الأنظمة الشبيهة بيونكس (كنظامَي لينُكس وماك) في بداية السكربت ليبدو كما يلي: #!/usr/bin/php <?php // هذه تجربة لتنفيذ سكربتات PHP من سطر الأوامر echo "test"; ?> وعندها تستطيع تنفيذ السكربت مباشرةً دون استدعاء مفسر PHP كما يلي: ~/public_html/test.php ملاحظة: لا تنسَ إعطاء الملف امتيازات التنفيذ قبل محاولة تنفيذه: chmod +x ~/public_html/test.php يمكن أيضًا تنفيذ الشيفرات تفاعليًا، عبر تنفيذ الأمر php -a ثم كتابة الأوامر تفاعليًا كما يظهر في الصورة الآتية (لاحظ أنه بإمكانك استعمال زر tab لإكمال أسماء الدوال والأصناف وغيرها): البنية القاعدية للغة لنأخذ مثالًا بسيطًا لنشرح فيه القواعد الأساسية للكتابة. <?php /* author: Abd Allatif Eymsh website: academy.hsoub.com version: 1.0 date: 22 12 2015 */ // هذا تعليقٌ ذو سطرٍ وحيد // يتم تجاهل التعليقات من المفسِّر $variable = 'variable'; // نستعمل عبارة echo لطباعة الجمل echo "string"; echo $variable; ?> انسخ ما سبق والصقه في ملفٍ باسم index.php في مجلد htdocs (في نظام ويندوز) أو www (في لينُكس) أو أي مكان تريده إن كنت تستعمل الخادوم المدمج، ثم افتح ذاك الملف في متصفح الويب (بعد أن تُشغِّل الخادوم) وستحصل على النتيجة "stringvariable"، لنُقسِّم الآن الملف ولنشرح بنيته. تُكتَب شيفرات PHP في ملفٍ بامتداد ‎.php تُكتَب شيفرات PHP بين وسمَيّ البداية ‎<?php والنهاية ‎?>‎ وكما في لغتَيّ C أو Perl، تتطلب PHP أن تنتهي التعليمات البرمجية بفاصلة منقوطة ";" يُشير الرمز $ إلى متغير (variable)، سنتحدث عن المتغيرات في هذا الدرس لاحقًا تكافئ علامات الاقتباس المفردة والمزدوجة بعضها (لكنها ليس لها نفس المعنى تمامًا، سنشرح الاختلاف البسيط لاحقًا) يُستعمَل الأمر echo لطباعة البيانات التعليقات التعليقات جزءٌ من البرنامج لا ينفِّذها مُفسِّر اللغة؛ وهي ملاحظاتٌ لكي يتذكر القارئ أو يفهم أمرًا برمجيًا ما لاحقًا. وهنالك نوعان من التعليقات: التعليقات ذات السطر الوحيد: وهذه التعليقات قصيرةٌ تمتد لسطرٍ وحيدٍ فقط، وتبدأ عادةً بالرمز "//"، ولا بأس أن يكون قبلها تعليماتٌ برمجية، لكن التعليق سينتهي مع نهاية السطر؛ ويستحق أن نذكر أننا نستطيع أن نبدأ التعليقات ذات السطر الوحيد برمز المربع (#) بدلًا من شرطتين مائلتين. التعليقات متعددة الأسطر: وهي تعليقاتٌ طويلة، قد تمتد لأكثر من سطر؛ وتوضع بين علامة البداية ‎/*‎ وعلامة النهاية ‎*/‎، ومن استعمالات هذا النوع من التعليقات أيضًا هي تعطيل جزء من الشيفرة ﻷغراض التجربة. يمكنك أن ترى نوعَيّ التعليقات السابقين في المثال أعلاه. المتغيرات تسمح لك المتغيرات بتخزين ومعالجة البيانات في السكربتات، ويمكنك اعتبارها شبيهةً بالمتغيرات التي تستعملها في الرياضيات؛ إذ أنَّ المتغير -ببساطة- هو حاويةٌ تحوي قيمةً معيّنة؛ أُطلِقَت تسمية "المتغيرات" عليها لأنها القيمة المُسنَدة إليها قد تتغير أثناء تنفيذ السكربت، وقابلية التغير تلك تجعل من المتغيرات أداةً مفيدةً جدًا. وكما ذكرنا سابقًا، يبدأ اسم المتغير بالإشارة $. هذه بعض الأمثلة عن أسماءٍ صحيحةٍ للمتغيرات: ‎$simple ‎$_start_with_underscore ‎$_includes_numbers_23 ‎$_includes_UPPERCASE_2 ‎$_23_it_is_valid ملاحظة: لا يمكنك بدء اسم المتغير برقمٍ كالاسم الآتي ‎$2_invalid_variable_name، ولا يمكن أيضًا أن تستعمل الشرطة "-" في اسمه. أنواع البيانات أنواع البيانات (data types) هي أنواع المتغيرات في PHP؛ وأنواعُ البياناتِ البسيطة في PHP هي: الأعداد الصحيحة (integers) الأعداد ذات الفاصلة (floats) السلاسل النصيّة (strings) القيم المنطقية البوليانية (صح [true] أو خطأ [false])؛ وهنالك أنواع بياناتٍ أخرى مثل الكائنات (objects) والمصفوفات (arrays) سنتحدث عنها لاحقًا في هذه السلسلة. ملاحظة: إن كانت لديك معلوماتٌ سابقة عن إحدى لغات البرمجة التي تُحدِّد نوع البيانات المُخزَّنة في المتغيرات (أي strongly typed)، فاعلم أنَّ PHP هي لغةٌ لا تتطلب منك تحديد النوع (أي أنها loosely typed)؛ فلا تحتاج إلى أن تخبر اللغة ما نوع البيانات التي ستُخزَّن في المتغير. الثوابت الثابت هو مُعرِّف (أي اسم) يحمل قيمةً معيّنة، وكما يوحي اسمه، لن تتغير قيمته أثناء تنفيذ السكربت بعد أن تُعرَّف لأول مرة، واسمه حساسٌ لحالة الأحرف، وتُستعمَل الأحرف الكبيرة فيه عادةً؛ وله نفس قواعد تسمية المتغيرات (لا يجوز أن يبدأ برقم، أو يحتوي على شرطة…)، لكن لا يوضع الرمز $ قبله. <?php /* author: Abd Allatif Eymsh website: academy.hsoub.com version: 1.0 date: 22 12 2015 */ // هذا تعليقٌ ذو سطرٍ وحيد $variable = 'variablename'; echo "string"; echo $variable; define( "MY_CONSTANT", "19" ); define('PI', 3.14); echo PI; echo MY_CONSTANT; ?> تكون PI و MY_CONSTANT ثوابت في المثال السابق. ملاحظة: يمكن استعمال الكلمة المحجوزة const لتعريف الثوابت بدلًا من الدالة define()‎ في إصدار PHP 5.3 وما بعده كما يلي: <?php // تعمل في إصدار PHP 5.3 const CONSTANT = 'Hello World'; echo CONSTANT; ?> لكن لا يمكن تعريف الثوابت باستخدام const داخل الدوال أو الحلقات، لأنها تُعرَّف في وقت التصريف (compile-time). المعاملات يأخذ المعامل قيمةً أو أكثر (أو "تعبيرًا" [expressions] كما نقول في الاصطلاحات البرمجية) ويُنتِج قيمةً أخرى. يمكن أن تُجمَّع المعاملات بناءً على عدد القيم التي تأخذها، فمثلًا المعاملات الأحادية (unary operators) تأخذ قيمةً واحدةً فقط (مثل معامل الزيادة الذي شرحناها أدناه)، والمعاملات الثنائية تأخذ قيمتين مثل المعاملات الحسابية البسيطة (الجمع والطرح والضرب…) وتُصنَّف أغلبية المعاملات في PHP ضمن هذا القسم؛ وهنالك معامل ثلاثي وحيد يأخذ ثلاث قيم سنشرحه في درسٍ لاحق. هنالك عددٌ كبيرٌ من المعاملات في لغة PHP، أهمها: المعاملات الحسابية الإسناد معاملات الأعداد الثنائية (Bitwise) معاملات المقارنة الزيادة أو الإنقاص معامل السلاسل النصية المعاملات الحسابية هي تلك المعاملات التي تستعملها في الحسابات الرياضية، مثل الجمع (+)، والطرح (-)، والضرب (*)، والقسمة (/)، وباقي القسمة (%)؛ مثال: $a = 4 + 5; // + هو معامل حسابي لاحظ الفرق بين المعاملين / و %، إذ أنَّ / هو معامل القسمة بينما % هو باقي القسمة؛ أي ‎8 /5‎ = 1.6 ‎‎، بينما ‎8 % 5 = 3 (إذ أنَّ ‎8 = 5 *1 +3، فإن باقي القسمة هو 3). أما معامل الإسناد، فيسند القيم إلى المتغيرات، وهو إشارة = كما في المثال الآتي: ‎$a = 4;‎. تجري المعاملات الثنائية العمليات الحسابية على البتات الموجودة في الأعداد الصحيحة، وهي & ‏(and)، و | ‏(or)، و >> (الإزاحة نحو اليسار)، و << (الإزاحة نحو اليمين)، و ^ ‏(XOR)، و ~ (NOR)؛ مثال على ذلك هو ‎14 & 3 = 2‎، لأنَّ ‎00001110 & 00000011 = 00000010‎. أما معاملات المقارنة، فهي -كما يدل اسمها- تقارن بين قيمتين؛ يُظهِر الجدول الآتي معاملات المقارنة الشائعة: المثال اسم المعامل النتيجة ‎$a == $b المساواة TRUE إن كان المتغير ‎$a مساويًا بالقيمة إلى المتغير ‎$b ‎$a === $b مطابقة TRUE إن كان المتغير ‎$a مساويًا المتغير ‎$b بالقيمة والنوع ‎$a != $b ‎$a <> $b عدم مساواة TRUE إن لم يكن المتغير ‎$a مساويًا للمتغير ‎$b ‎$a !== $b عدم مطابقة TRUE إن لم يكن المتغير ‎$a مساويًا للمتغير ‎$b بالقيمة أو بالنوع ‎$a < $b أصغر من TRUE إن كان المتغير ‎$a أصغر تمامًا من المتغير ‎$b ‎$a > $b أكبر من TRUE إن كان المتغير ‎$a أكبر تمامًا من المتغير ‎$b ‎$a <= $b أصغر من أو يساوي TRUE إن كان المتغير ‎$a أصغر أو يساوي المتغير ‎$b ‎$a >= $b أكبر من أو يساوي TRUE إن كان المتغير ‎$a أكبر أو يساوي المتغير ‎$b تستعمل معاملات الزيادة أو الإنقاص لزيادة أو إنقاص قيمة المتغير بقيمة 1. المثال شرحه ‎++$x;‎ إضافة القيمة 1 إلى المتغير ‎$x ثم إعادة القيمة النهائية ‎$x++;‎ إعادة قيمة المتغير ‎$x ثم إضافة 1 ‎–-$x;‎ إنقاص القيمة 1 من المتغير ‎$x ثم إعادة القيمة النهائية ‎$x–-;‎ إعادة قيمة المتغير ‎$x ثم إنقاص 1 <?php echo "Postincrement"; $a = 5; echo "Should be 5: " . $a++; echo "Should be 6: " . $a; echo "Preincrement"; $a = 5; echo "Should be 6: " . ++$a; echo "Should be 6: " . $a; echo "Postdecrement"; $a = 5; echo "Should be 5: " . $a--; echo "Should be 4: " . $a; echo "Predecrement"; $a = 5; echo "Should be 4: " . --$a; echo "Should be 4: " . $a; ?> معامل السلاسل النصية (.) يستعمل لجمع سلسلتين نصيتين أو متغيرين مع بعضهما بعضًا؛ انظر إلى الشيفرة الآتي: <?php $a = 4; $q = 5; $c = $a.$q; // المتغيران $a و $b أصبحا مدمجين مع بعضهما echo $c; $n = 'myname'; echo "string ".$n.' $n inserted'; // دمج ثلاث سلاسل نصيّة ?> حاول أن تتدَّرب على تعريف وطباعة قيمة المتغيرات الخاصة بك، وأن تستعمل مختلف المعاملات السابقة عليها. المصادر مقال Introduction to PHP لصاحبه Harish Kumar. صفحة Operators من دليل PHP، وغيرها.

أوراق الأنماط المتتالية (Cascading Style Sheets أو CSS اختصارًا) هي لغة تُستخدم لوصف كيفيّة عرض المستندات للمستخدمين. تُكتب هذه المستندات في لغة رُماز مثل HTML. المستند هو مجموعة من المعلومات التي تهيكل باستخدام لغة رُماز (markup language). يُقصّد بعرض المستند للمستخدم تحويله إلى صيغة مُفيدة للجمهور، فالمتصفحات مثل Firefox وChrome وInternet Explorer مًصمّمة بحيث تعرض المستندات للمستخدمين مرئيًّا، مثلًا: على شاشة حاسوب أو جهاز إسقاط (projector) أو طابعة. سنتعرض خلال هذه السلسلة إلى المواضيع التالية: مدخل إلى أوراق الأنماط المتتالية (CSS) (هذا الدرس). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. أمثلة صفحة الويب هذه الّتي تقرأها هي مُستند. تُهيكل المعلومات التي تشاهدها في صفحة ويب باستخدام لغة HTML (اختصارًا لـHyperText Markup Language). مرُبعات الحوار في التطبيقات هي أيضًا مُستندات، وقد تكون مُهيكلة باستخدام لغة رماز مثل XUL (اختصارًا لـXML User Interface Language)، والتي قد تجدها في بعض برامج Mozilla. في هذه السلسلة، ستُقرأ معلومات مُدرجة تحت عنوان تفاصيل أكثر كالفقرة التالية، تحوي هذه الفقرات على معلومات وروابط لمصادر إضافية عن مفهوم أو موضوع تغطّيه هذه الأقسام. اقرأ هذه المعلومات حالما تُشاهدها وتابع الروابط، أو تجاوزها وعُد لقراءتها لاحقًا. تفاصيل أكثر كلمة المستند لا تعني ما تعنيه كلمة "ملفّ"، إلّا أنّه يمكن حفظ المستندات ضمن ملفّات. المستند الذي تقرأه الآن لم يُحفَظ في ملفّ، بل يُجلب من قاعدة بيانات على الخادم والذي بدوره يولّد المستند بجمع أجزائه من عدّة ملفّات. مهما يكن الأمر، فإنّك في هذه السّلسلة ستتعامل مع مستندات محفوظة في ملفّات. بإمكانك إيجاد معلومات أكثر عن المستندات ولغات الرُماز في مواقع أخرى من شبكة مطوّري Mozilla: اللغة الوظيفة HTML لصفحات الويب XML للصفحات المُهيكلة بشكل عامّ SVG للرسوم XUL لواجهات برامج Mozilla سنطّلع على أمثلة من هذه اللغات في الجزء الثّاني من السلسلة. تفاصيل أكثر يُدعى البرنامج الذي يعرض المستندات على المستخدم في المصطلحات الرسميّة لـCSS بوكيل المستخدم (user agent أو UA). المتصفّح ليس إلّا واحدًا من وكلاء المستخدم، فلا تقتصر CSS على المتصفّحات أو العرض المرئيّ، ولكنّنا في الجزء الأوّل من السّلسلة لن نتعامل إلّا مع CSS في المتصفّح. للاطّلاع على التعاريف الرسمية للمصطلحات في CSS، انظر Definitions في وصف CSS من قبل جمعيّة W3C المسؤولة عن تعيين المعايير القياسيّة للويب. لنبدأ العمل: إنشاء مستند أنشئ مجلّدًا جديدًا في جهازك لحفظ وتنظيم تمارين هذه السّلسلة. افتح محرّر النصوص وأنشئ ملفًّا نصيًّا جديدًا، سنقوم بكتابة المستند في هذا الملف خلال التمارين القليلة التالية. انسخ والصق HTML أدناه. احفظ الملف باسم doc1.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> افتح علامة تبويب أو نافذة جديدة في متصفّحك، ثم افتح الملف الذي أنشأته. من المُفترض أن ترى النّص وحروفه الأولى بخطّ عريض، كهذه الصّورة: قد يختلف ما تراه في متصفحك قليلًا عن الصّورة من حيث الخط أو الألوان أو المسافات بين الحروف، وهذا غير مهمّ الآن. المستند الآن لا يستخدم CSS، وهذا ما سنفعله في الخطوة التالية. لماذا نستخدم CSS؟ استخدم CSS لتعريف تنسيق مستنداتك، بما في ذلك التصميم والتخطيط والاختلافات في العرض بين الأجهزة المختلفة وقياسات الشاشات المختلفة. بإمكانك إضافة CSS في رأس (<head>) مستند (نُسمّي ذلك ورقة أنماط مُضمّنة) أو إرفاق ملف منفصل يحوي تعريف التنسيقات (ورقة أنماط خارجيّة)، ثمّ ربطها مع المستند برابط يُضاف إلى رأسه. لللأسلوب الأخير عدّة محاسن، ففصل التنسيقات عن الرُماز: يقلّل من التكرار يُسهل الصّيانة يسمح بإجراء تغيير على نطاق الموقع كاملًا من مكان واحد مثال يمكنك مثلًا حفظ معلومات التنسيقات في ملفات مشتركة بين كلّ الصّفحات، فعندما يُربَط مستند بورقة أنماط تُحدّد لون العناوين الثانويّة (h2)، بإمكانك استخدام هذا التنسيق في كل صفحات الموقع بالإشارة إلى هذه الورقة. عندما يعرض مستخدم صفحة ويب، يقوم المتصفح بجلب معلومات التنسيق في الوقت نفسه. عندما يطبع مستخدم صفحة ويب، بإمكانك توفير معلومات تنسيق مختلفة تُسهّل من قراءة الصّفحة المطبوعة. كيف تعمل HTML وCSS معًا؟ بشكل عامّ، استخدم HTML لوصف محتوى الموقع، وليس تنسيقه. بإمكانك استخدام CSS لتحديد تنسيق المستند، وليس محتواه. أحيانًا نضطر لإجراء بعض الاستثناءات لهذه القاعدة، كما سنرى لاحقًا. تفاصيل أكثر توفّر لُغة رُماز مثل HTML بعض الوسائل لوصف تنسيق المستند بشكل منفصل عن CSS، فيمكنك مثلًا في HTML استخدام الوسم <b> لجعل النّص عريضًا، ويمكنك تحديد لون خلفيّة المستند في وسم متن المستند <body>. عندما تستخدم CSS، يُفضّل عادةً تجنّب استخدام هذه الميزات في لغة الرُماز بحيث يبقى وصف تنسيق المستند في موضع واحد فقط. لنعمل: إنشاء ورقة أنماط أنشئ ملفًّا نصيًّا آخر بجوار الملف السابق doc1.html. احفظ الملف باسم style1.css. سيحوي هذا الملف وصف التنسيقات. في ملفّ CSS، انسخ والصق السّطر التالي ثمّ احفظ الملف: strong {color: red;} ربط المستند بورقة الأنماط لربط المستند بورقة الأنماط، عدّل ملفّ HTML، أضف السّطر التالي في موقعه: <link rel="stylesheet" href="style1.css"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> احفظ الملف وحدّث الصّفحة في متصفّحك. تجعل ورقة الأنماط الحروف الأولى بلون أحمر، كهذا: ما التالي؟ لدينا الآن مستند بسيط مرتبط بورقة أنماط خارجيّة، وسنتعلّم كيف يجمعهما المتصفح معًا لعرض الصّفحة في الجزء التالي: كيف تعمل CSS؟ ترجمة (بتصرّف) للجزأين الأوّلين What is CSS و Why use CSS من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

سنتعرّف في هذا الدّرس على العبارات الشرطيّة وكيفيّة استخدامها لتنفيذ أوامر أو تجاهلها استنادًا إلى شرط معيّن. افتح ملفّ روبي جديد وسمّه logic.rb أو أيّ اسم آخر مع التأكّد من كتابة rb. في آخر اسم الملفّ واكتب الشيفرات البرمجيّة التّالية والتي تمثّل نسخة مجرّدة من لعبة إلقاء النّرد: number = rand(1..6) puts "You rolled #{number}" ماذا فعلنا هنا؟ أنشأنا متغيّرًا وحفظنا به قيمة عشوائيّة بين 1 و 6، ثمّ استعملنا هذا المتغيّر لطباعة القيمة العشوائيّة على الشّاشة باستخدام أمر puts مخبرين المستخدم أنّ ناتج إلقائه للنرد هو ذلك الرقم العشوائي النّاتج عن استخدام دالّة rand (التي سبق وأن اطّلعنا عليها في الدّرس السّابق). سنتعرّف الآن على بعض العبارات الشرطيّة التي يمكننا استخدامها لإخراج بعض المعلومات عن الرقم استنادًا إلى ما إذا كان الشّرط متحقّقًا أم لا. اكتب السطر التّالي أسفل الشيفرات البرمجيّة السّابقة: puts "You rolled the highest number possible" if number == 6 تلاحظ في العبارة الشرطيّة السّابقة أنّ الشرط هو أن يكون المتغيّر number يساوي 6. إذا تحقّق هذا الشرط سنقوم بإخراج رسالة "You rolled the highest number possible". الأمر المهم لدينا هنا هو عبارة if التي تأتي قبل الشّرط الذي يجب أن يكون صحيحًا من أجل طباعة السّلسلة، في حالتنا هذه كما ذكرنا فالشّرط هو أن يكون المتغيّر مساويًا لـ 6. لاحظ كيف استخدمنا علامتي == لاختبار المساواة بين الطرفين. يختلف هذا عمّا فعلنا في بداية الشيفرات حيث استخدمنا علامة مساواة واحدة لتعيين قيمة للمتغيّر. إذًا فنستخدم علامة يساوي واحدة لتعيين القيم وعلامتين من أجل اختبار إذا كان طرفين متساويين أم لا. يمكننا أيضًا استخدام بنية مشابهة لذلك لمعرفة إذا كان الشّرط غير متحقّق كالتّالي: puts "You didn't roll the lowest number possible" if number != 1 كما تلاحظ فالجملة مشابهة إلى حدٍّ كبير، نريد طباعة هذه السلسلة إذا كان المتغيّر number لا يساوي (!=) 1. سيتم طباعة تلك السلسلة فقط عن تحقّق هذا الشرط. في الحالتين السّابقتين لدينا الجملة الشّرطيّة موجودة بالنهاية والشيفرة البرمجيّة التي نريدها أن تنفّذ موجودة في البداية. يمكننا كتابة ذلك بترتيب مختلف بأن نضع الجملة الشّرطيّة في البداية كالتّالي: if number < 5 then puts "You rolled a number less than 5" end كما تلاحظ، نحن نخبر روبي إذا كان قيمة المتغيّر أقل من 5 يجب تنفيذ الأمر الموجود بعد الكلمة المفتاحيّة then. وبالنّهاية نضع end والتي نحتاج إليها لإخبار روبي بأنّ عبارة if قد انتهت. كتابة أكثر من شرط يمكننا أيضًا كتابة أكثر من شرط في أكثر من سطر. مثال على ذلك: if number.even? puts "You rolled and even number" else puts "You rolled an odd number" end السّطر الأوّل يتحقّق إذا كان المتغيّر number عددًا زوجيًّا باستخدام دالّة even، إذا كانت الإجابة true سيتمّ تنفيذ أمر puts الخاصّ بهذا الشرط. إذا كانت قيمة المتغيّر عددًا غير زوجي، فمن البديهي أنه سيكون فرديًّا. إذًا فإنّ else تعدّ بمثابة ما نريد تنفيذه إذا لم يتحقّق الشرط. لاحظ أنّه يجب وضع end مرّة واحدة في النهاية تمامًا وليس بعد if مرّة وبعد else مرّة. elsif يمكننا كتابة عدد أكبر من الجمل الشرطيّة أيضًا باستخدام elsif. if number == 1 then puts "You rolled one" elsif number == 2 then puts "You rolled two" elsif number == 3 then puts "You rolled three" else puts "You rolled a number bigger than three" end لدينا في هذا المثال ثلاثة جمل شرطيّة مختلفة متبوعة بجملة else والتي ستُنفّذ إذا لم يتحقّق أيّ شرط من الشّروط الثلاثة السّابقة لها. لنبدأ مع أول سطر، جملة if عاديّة تتحقّق إذا كانت قيمة المتغيّر number تساوي 1، إذا كان الجواب نعم فستنفّذ روبي الأمر الموجود بعد then وتستبعد باقي الجمل الشرطيّة. أمّا إذا لم تتحقّق الجملة الشرطيّة الأولى فتنتقل روبي إلى السطر التّالي والذي يحتوي على جملة شرطيّة أخرى والتي تختبرها روبي فقط إذا لم تتحقّق الجملة الشرطيّة السّابقة، لذلك فهي تسمّى elsif. تعمل تمامًا elsif عمل if، الفرق فقط هو أنّها لا تنفّذ في حالة تحقّق الجملة الشرطيّة السّابقة لها. السطر الثالث مشابه للسطر الثّاني. وبالنهاية لدينا else والتي لا تحتوي على شرط محدّد وإنّما تنفّذ في حال عدم تحقّق أي جملة شرطيّة من الثلاث. ثم end. عبارة Case يمكننا استخدام عدد لا نهائي من جمل if, elsif, else ولكن مع زيادى عدد الشروط المطلوبة قد يصبح الأمر متعبًا ومستهلكًا للوقت. لذلك فهناك عبارة أخرى يمكننا استخدامها وهي case. حاول تخمين ما تفعله case بالاطّلاع على الشيفرات التالية: case number when 4 then puts "You rolled four" when 5 then puts "You rolled five" when 6 then puts "You rolled six" else puts "You rolled a number less than four" end كما تلاحظ، فهي تعمل بشكل مشابه جدًّا للمثال السّابق. الفرق أنّنا نستخدم case بدلاً من if. لاحظ أنّنا نضع بالبداية المتغيّر number حيث أنّ كل الجمل الشّرطيّة الموجودة بـ case تشير إلى هذا المتغيّر. على سبيل المثال بالنّظر إلى السطر الثاني، فهو يشير أنّه عندما (when) تكون قيمة المتغيّر number تساوي 4 إذًا (then) ننفّذ أمر puts. وهكذا حتى الوصول إلى else ثم end في نهاية عبارة case واللذان يستخدمان تمامًا مثل استخدامهما في عبارة if. سلسلة عبارات if يمكننا أيضًا وضع جمل if كمتسلسلات كما ترى أدناه: if number == 2 or number == 3 or number == 5 puts "You rolled a prime number" end استخدمنا جملة if عاديّة ونخبر روبي بأنّه إذا كانت قيمة المتغيّر number تساوي 2، أو (or) تساوي 3، أو (or) تساوي 4 فكما قد تكون توقّعت سيتمّ تنفيذ الأمر الخاصّ بتلك العبارة. إذًا فنحن في الواقع نختبر ثلاث شروط مختلفة وإذا تحقّق شرط واحد منها فإنّ ناتج هذه العبارة الشّرطيّة سيصبح true. هناك طريقة أخرى لكتابة تلك الشيفرات. puts "You rolled a square number" if number == 1 || number == 4 يسمّى || برمز الأنبوب المزدوج (Double Pipe Symbol) والذي يمثّل كلمة or. لاحظ أيضًا كيف قمنا بعكس الجملة الشرطيّة وذلك بوضع الشرط في النهاية كما فعلنا سابقًا. هناك أيضًا عبارة and والتي تتحقّق إذا تحقّقت جميع الشروط الموجودة والتي مربوط بينها باستخدام and. if number.odd? and number >= 4 puts "You rolled five" end في الشيفرات البرمجيّة أعلاه نتحقّق إذا كانت قيمة المتغيّر هي عدد فردي و (and) أكبر من أو تساوي 4. هذا الرّمز >= يعني أنّ الطرف الأيسر من الجملة أكبر من أو يساوي الطرف الأيمن. بالرجوع مجدّدًا إلى الشيفرة البرمجيّة السّابقة فإنّه عند تحقّق الشرطين معًا (وليس أحدهما فقط) فسيتمّ تنفيذ الأمر puts الذي يلي العبارة الشرطيّة. مثل or، هناك أيضًا طريقة أخرى لكتابة and. if number.even? && number <= 3 puts "You rolled two" end الشيفرة أعلاه مشابهة تمامًا للسّابقة، نتحقّق إذا كانت قيمة المتغيّر عددًا زوجيًّا و (&&) أقل من أو تساوي 3. إذا تحقّق الشّرطيّن المربوط بينها باستخدام && فسيتمّ تنفيذ أمر puts الخاصّ بالعبارة الشرطيّة. رمز && يسمّى Double Ampersand Symbol. ختام تعرّفنا في هذا الدّرس على العبارات الشرطيّة في ruby وكيفيّة استخدامها. إذا كتبت الشيفرة البرمجيّة المستخدمة في هذا الدّرس في ملفّ روبي فعلاً فجرّب تنفيذها في سطر أوامر روبي التفاعليّ كما تعلّمنا في الدّروس السّابقة وقارن النتائج بالشيفرات الموجودة لمعرف وظيفة كل جزء منها.

كما هو موضح في العنوان فإنّك في هذا الدرس سوف تتعلم كيفية إنشاء تأثير وكأنّك تتصفح كتابًا ما. وسوف نستخدم في هذا الدرس إضافة تدعى BookBlock، والفكرة من هذا الدرس هو أنّك سوف تقوم بإنشاء تأثير يُمكّن الزوار من تصفح موقع ما وكأنهم يتصفحون أحد الكتب. الفكرة هي أنّك سوف تتصفح صفحات الموقع باستخدام سهمين سوف يكونان موجودين في أعلى الصفحة أو أزرار لوحة المفاتيح أو حتى بالسحب باستخدام الفأرة وأيضًا سيكون هناك قائمة جانبية سوف تظهر عندما تقوم بالضغط على أيقونة ما. وسوف تحتوي القائمة الجانبية على روابط لصفحات الموقع وعندما تقوم بالضغط على أحد هذه الروابط فإنّها سوف تنقلك إلى الصفحة المطلوبة. سوف نستخدم أيضًا إضافة اسمها jScrollPane وذلك للحصول على شريط تمرير (scrollbar) يظهر عندما يكون المحتوى أطول من ارتفاع المتصفح. وهذه قائمة بإضافات jQuery التي سوف نستخدمها: BookBlockCustom jQuery++jScrollPanejQuery Mouse Wheel PluginCustom Mdernizerيمكنك معاينة المثال الموضح في هذا الدرس من هنا. كما يمكنك تحميل الملفات المصدرية. بنية ملف HTMLفي البداية يجب أن يكون لدينا حاوٍ رئيسي لاحتواء جميع العناصر، وداخل هذا الحاوي سوف يكون هناك عنصر <div> للقائمة الجانبية وسوف نعطيه فئة (class) بالاسم "menu-panel" وسوف يكون هناك عنصر <div> آخر يحتوي على المحتوى الرئيسي للموقع وسوف نعطيه فئة بالاسم "bb-custom-wrapper". وفي داخل كل قسم سوف يكون هناك حاوٍ للمحتوى وعنصر <div> سوف نحتاجه من أجل شريط التمرير الذي ذكرناه سابقًا. <div id="container" class="container"> <div class="menu-panel"> <h3>Table of Contents</h3> <ul id="menu-toc" class="menu-toc"> <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li> <li><a href="#item2">Why we die</a></li> <li><a href="#item3">The honeymoon</a></li> <li><a href="#item4">A drawing joke</a></li> <li><a href="#item5">Commencing practice</a></li> </ul> </div> <div class="bb-custom-wrapper"> <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item" id="item1"> <div class="content"> <div class="scroller"> <h2>Self-destruction</h2> <p>...</p> </div> </div><!-- /content --> </div><!-- /bb-item --> <div class="bb-item" id="item2"><!-- ... --></div> <div class="bb-item" id="item3"><!-- ... --></div> <div class="bb-item" id="item4"><!-- ... --></div> <div class="bb-item" id="item5"><!-- ... --></div> </div><!-- /bb-bookblock --> <nav> <a id="bb-nav-prev" href="#">←</a> <a id="bb-nav-next" href="#">→</a> </nav> <span id="tblcontents" class="menu-button">Table of Contents</span> </div><!-- /bb-custom-wrapper --> </div><!-- /container -->سوف نقوم بربط عناصر القائمة الجانبية بصفحات الموقع (التي تحمل الفئة "bb-item)، وسوف نُضيف أيضًا سهمين في أعلى الصفحة من أجل التنقل بين الصفحات وزر يقوم بفتح وإغلاق القائمة الجانبية. لنقم الآن بإضافة تنسيقات CSS. تنسيقات CSSلن نتحدث هنا عن التنسيقات التي تأتي مع إضافة BookBlock لأنك سوف تجدها داخل ملف bookblock.css، وإنّما سوف نُركّز على التنسيقات الأخرى المهمة. لنبدأ التنسيقات بإضافة سطر يقوم بجلب الخط المسمى "Lato" من خدمة Google web fonts: @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);سوف نقوم بإعطاء الوسم <html> الخاصية height: 100% وذلك لأننا سوف نحتاج أن نجعل بعض العناصر تتمدد على ارتفاع المتصفح كاملًا: html { height: 100%; }سوف نستخدم أيضًا الخاصية box-sizing: border-box وذلك حتى نستخدم قيم مئوية لكل من العرض والإرتفاع أثناء استخدام padding دون القلق حول أبعاد العناصر والقيام بعمليات حسابية نحن بغنىً عنها: *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }لنقم الآن بتعريف الخط الذي سوف نستخدمه في الموقع (العنصر body) ونُعطيه ارتفاع بقيمة 100% (تذكّر أننا نريد ارتفاع بهذه القيمة لأنه سوف يكون هناك عناصر تتموضع بشكل مطلق (absolute positioning) وسوف تحتاج أن تتمدد على ارتفاع المتصفح كاملًا): body { font-family: 'Lato', Calibri, Arial, sans-serif; font-weight: 400; font-size: 100%; color: #333; height: 100%; }سوف نستعمل أيضًا إضافة Modernizr وسوف نُضيف الفئة "no-js" إلى وسم <html>، فإذا كانت الجافاسكربت مفعّلة فإنّ Modernizr سوف يستبدل تلك الفئة بالفئة "js". وهذا سوف يساعدنا على إعطاء خصائص CSS معينة لبعض العناصر التي لا نريدها إذا كانت الجافاسكربت معطّلة. لاحظ أيضًا أننا نحتاج أن يكون عرض الصفحة وارتفاعها بقيمة 100% فقط إذا كانت الجافاسكربت مفعّلة وعندها فقط نريد من العنصر body أن يكون له خاصية overflow: hidden: .js body { overflow: hidden; }وهذه بعض التنسيقات الخاصة بالروابط: a { color: #555; text-decoration: none; } a:hover { color: #000; }نريد من الحاوي الرئيسي أن يكون بعرض وارتفاع المتصفح كاملًا، وسوف نقوم بموضعة القائمة الجانبية خارج هذا الحاوي باستعمال الخاصية left وإعطائها قيمة سالبة تكون بنفس قيمة العرض الخاص بالقائمة الجانبية. والفكرة هي أنّه عند النقر على أيقونة القائمة الجانبية فإنّ الحاوي سوف يتحرك إلى اليمين مما يؤدي إلى ظهور القائمة الجانبية. دعونا إذًا نقوم بإعطاء الحاوي الرئيسي عرضًا وارتفاعًا بقيمة 100% وأن نُضيف الخاصية transition إلى الحاوي container: .container, .bb-custom-wrapper, .bb-bookblock { width: 100%; height: 100%; } .container { position: relative; left: 0px; transition: left 0.3s ease-in-out; }عند النقر على أيقونة القائمة الجانبية فإن فئة (class) أخرى سوف يتم إضافتها إلى الحاوي container والتي سوف تحتوي على الخاصية left: 240px (نفس العرض الخاص بالقائمة الجانبية) وبالتالي فإنّ الصفحة كاملة سوف تتحرك إلى اليمين بمقدار 240px وبالتالي ظهور القائمة الجانبية: .slideRight { left: 240px; }ولكن بدون الجافاسكربت لن نكون قادرين على القيام بما سبق لذلك سوف نقوم بإضافة الخاصية padding-left: 240px: .no-js .container { padding-left: 240px; }ونريد أن تكون القائمة الجانبية ثابتة في الجانب الأيسر بشكل افتراضي: .menu-panel { background: #f1103a; width: 240px; height: 100%; position: fixed; z-index: 1000; top: 0; left: 0; text-shadow: 0 1px 1px rgba(0,0,0,0.1); }وإذا كانت الجافاسكربت مفعلة فسوف نقوم بموضعة القائمة الجانبية بشكل مطلق وإلى اليسار بقيمة -240px: .js .menu-panel { position: absolute; left: -240px; }وهذه هي التنسيقات الخاصة بعناصر القائمة الجانبية: .menu-panel h3 { font-size: 1.8em; padding: 20px; font-weight: 300; color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); } .menu-toc { list-style: none; } .menu-toc li a { display: block; color: #fff; font-size: 1.1em; line-height: 3.5; padding: 0 20px; cursor: pointer; background: #f1103a; border-bottom: 1px solid #dd1338; } .menu-toc li a:hover, .menu-toc li.menu-toc-current a{ background: #dd1338; }وأمّا بالنسبة للقائمة الرئيسية التي سوف تحتوي على السهمين فإننا سوف نقوم بموضعتها بشكل مطلق وفوق جميع العناصر الأخرى: .bb-custom-wrapper nav { top: 20px; left: 60px; position: absolute; z-index: 1000; }كما أنّ روابط السهمين وزر القائمة الجانبية سوف يتموضعان بشكل مطلق (position: absolute) وسوف نعطيها الخاصية border-radius: 50% لنجعلها تظهر كالدائرة: .bb-custom-wrapper nav span, .menu-button { position: absolute; width: 32px; height: 32px; top: 0; left: 0; background: #f1103a; border-radius: 50%; color: #fff; line-height: 30px; text-align: center; speak: none; font-weight: bold; cursor: pointer; } .bb-custom-wrapper nav span:last-child { left: 40px; } .bb-custom-wrapper nav span:hover, .menu-button:hover { background: #000; }سوف يكون الزر الذي يفتح ويغلق القائمة الجانبية موجودًا في أعلى يسار الصفحة وسوف نقوم بإخفاء النص الموجود بداخله (نريد أن تظهر الأيقونة فقط): .menu-button { z-index: 1000; left: 20px; top: 20px; text-indent: -9000px; }لنقم الآن بإنشاء أيقونة بسيطة بدون استعمال أي صور وذلك باستعمال العنصر الزائف :after واستعمال الخاصية box-shadow والتي سوف تعمل على إنشاء الخطين العلوي والسفلي للأيقونة: .menu-button:after { position: absolute; content: ''; width: 50%; height: 2px; background: #fff; top: 50%; margin-top: -1px; left: 25%; box-shadow: 0 -4px #fff, 0 4px #fff; }وفي حالة كان الجافاسكربت معطلًا فإننا نريد أن نخفي هذه العناصر: .no-js .bb-custom-wrapper nav span, .no-js .menu-button { display: none; }لننتقل الآن إلى تنسيق الأجزاء الداخلية لكل قسم من أقسام الصفحة (bb-item). نريد أن يتم موضعة المحتوى (content) بشكل مطلق ونريد ان نستعمل الخاصية overflow: hidden، وهذا مهم لأننا نريد تطبيق شريط التمرير هنا ونريد أن نفعل ذلك فقط عند قلب/تغيير الصفحة. فإذا لم نستخدم الخاصية overflow: hidden فإنّك سوف ترى المحتوى يتداخل ببعضه. وأعيد وأكرر مرة أخرى بأنّ هذا سوف يحدث فقط إذا كان الجافاسكربت مفعلًا ولذلك سوف نستخدم الفئة "js": .js .content { position: absolute; top: 60px; left: 0; bottom: 50px; width: 100%; overflow: hidden; }العنصر <div class="scroller"> هو الذي سوف ينمو مع المحتوى لذلك سوف نعطيه الخاصية padding: .scroller { padding: 10px 5% 10px 5%; }لاحظ أننا استعملنا قيم مئوية للجوانب وذلك حتى نجعل الصفحة تتجاوب مع حجم الشاشة. دعونا نتخلص من الحواف الحادة عندما نقوم بالتمرير (scroll) وذلك باستخدام العناصر الزائفة إلى أعلى وأسفل عنصر المحتوى مع استخدام تدرج بين اللون الأبيض والشّفّاف: .js .content:before, .js .content:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 20px; z-index: 100; pointer-events: none; background: linear-gradient( to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% ); } .js .content:after { top: auto; bottom: 0; background: linear-gradient( to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% ); }هذا سوف يجعل النص يظهر بشكل باهت. لنقم الآن بتنسيق عناصر النصوص: .content h2 { font-weight: 300; font-size: 4em; padding: 0 0 10px; color: #333; margin: 0 1% 40px; text-align: left; box-shadow: 0 10px 0 rgba(0,0,0,0.02); text-shadow: 0 0 2px #fff; } .no-js .content h2 { padding: 40px 1% 20px; } .content p { font-size: 1.2em; line-height: 1.6; font-weight: 300; padding: 5px 8%; text-align: justify; }كل ما تبقى علينا الآن من تنسيقات CSS هو استخدام الـmedia queries. فإذا كانت الجافاسكربت معطلة فإننا لا نريد أن تظهر القائمة الجانبية إذا كان العرض أقل من 800px. كان هذا فقط مثالًا بسيطًا على كيفية التحكم بالعناصر تحت ظروف وشروط معينة. الـmedia query الأخيرة سوف تعمل على تكبير الخط قليلًا من أجل الأجهزة صغيرة الحجم كالهواتف. @media screen and (max-width: 800px){ .no-js .menu-panel { display: none; } .no-js .container { padding: 0; } } @media screen and (max-width: 400px){ .menu-panel, .content { font-size: 75%; } }كان هذا كل ما يتعلق بتنسيقات CSS ويتبقى علينا استخدام بعض الجافاسكربت. بعض الجافاسكربتسوف نبدأ اولًا بتخزين (caching) بعض العناصر حتى لا نضطر إلى استدعائها في كل مرة وسوف نقوم أيضًا بتهئية/مناداة إضافة BookBlock. نُريد أيضًا أن نقوم بضبط بعض الأمور بعد كل قلب/تغيير للصفحة وهذه الأمور هي رقم الصفحة الحالية والسلوك الخاص بإضافة jScrollPane. وهذا محدد في الاستدعاء الخلفي (callback) المسمى onEndFlip والممرر إلى إضافة BookBlock. var $container = $( '#container' ), // the element we will apply the BookBlock plugin to $bookBlock = $( '#bb-bookblock' ), // the BookBlock items (bb-item) $items = $bookBlock.children(), // index of the current item current = 0, // initialize the BookBlock bb = $( '#bb-bookblock' ).bookblock( { speed : 800, perspective : 2000, shadowSides : 0.8, shadowFlip : 0.4, // after each flip... onEndFlip : function(old, page, isLimit) { // update the current value current = page; // update the selected item of the table of contents (TOC) updateTOC(); // show and/or hide the navigation arrows updateNavigation( isLimit ); // initialize the jScrollPane on the content div for the new item setJSP( 'init' ); // destroy jScrollPane on the content div for the old item setJSP( 'destroy', old ); } } ), // the navigation arrows $navNext = $( '#bb-nav-next' ), $navPrev = $( '#bb-nav-prev' ).hide(), // the table of content items $menuItems = $container.find( 'ul.menu-toc > li' ), // button to open the TOC $tblcontents = $( '#tblcontents' ), transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, // transition event name transEndEventName = transEndEventNames[Modernizr.prefixed('transition')], // check if transitions are supported supportTransitions = Modernizr.csstransitions;لنقم أولًا بربط الأحداث ببعض العناصر التي تم تهيئتها سابقًا، كما أننا نريد أن نقوم بتهيئة jScrollPane لأول عنصر (العنصر الحالي). function init() { // initialize jScrollPane on the content div of the first item setJSP( 'init' ); initEvents(); }بما أننا سوف نقوم بتهيئة وإعادة تهيئة وتدمير jScrollPane فلنقم بتعريف دالة لذلك: function setJSP( action, idx ) { var idx = idx === undefined ? current : idx, $content = $items.eq( idx ).children( 'div.content' ), apiJSP = $content.data( 'jsp' ); if( action === 'init' && apiJSP === undefined ) { $content.jScrollPane({verticalGutter : 0, hideFocus : true }); } else if( action === 'reinit' && apiJSP !== undefined ) { apiJSP.reinitialise(); } else if( action === 'destroy' && apiJSP !== undefined ) { apiJSP.destroy(); } }سوف نحتاج إلى ربط العديد من الأحداث كالتالي: سوف يتم استدعاء الدالتين ()next و()prev الخاصتين بإضافة BookBlock وذلك عند النقر على أزرار التنقل أو السحب باستخدام الفأرة.سوف يظهر جدول المحتويات أو يختفي عند النقر على زر القائمة (tblcontents$).سوف يتم استدعاء الدالة ()jump الخاصة بإضافة BookBlock وذلك عند النقر على أي عنصر من عناصر جدول المحتويات.سوف يتم تهيئة jScrollPane عند القيام بتغيير حجم النافذة (window resize).function initEvents() { // add navigation events $navNext.on( 'click', function() { bb.next(); return false; } ); $navPrev.on( 'click', function() { bb.prev(); return false; } ); // add swipe events $items.on( { 'swipeleft' : function( event ) { if( $container.data( 'opened' ) ) { return false; } bb.next(); return false; }, 'swiperight' : function( event ) { if( $container.data( 'opened' ) ) { return false; } bb.prev(); return false; } } ); // show TOC $tblcontents.on( 'click', toggleTOC ); // click a menu item $menuItems.on( 'click', function() { var $el = $( this ), idx = $el.index(), jump = function() { bb.jump( idx + 1 ); }; current !== idx ? closeTOC( jump ) : closeTOC(); return false; } ); // reinit jScrollPane on window resize $( window ).on( 'debouncedresize', function() { // reinitialise jScrollPane on the content div setJSP( 'reinit' ); } ); } ظهور أزرار التنقل من عدمه سوف يعتمد على الصفحة الحالية، فإذا كُنّا في الصفحة الأولى فإننا سوف نرى فقط زر "التالي" وإذا كُنّا في الصفحة الأخيرة فإننا سوف نرى فقط زر "السابق": function updateNavigation( isLastPage ) { if( current === 0 ) { $navNext.show(); $navPrev.hide(); } else if( isLastPage ) { $navNext.hide(); $navPrev.show(); } else { $navNext.show(); $navPrev.show(); } }عندما نفتح جدول المحتويات (القائمة الجانبية) فإننا نريد أن تختفي عناصر التنقل وأن تظهر مرة أخرى عندما نقوم بإغلاق القائمة الجانبية. سوف نقوم بتحريك القائمة الجانبية باستخدام خاصية transition، وإذا لم تكن هذه الخاصية مدعومة من المتصفح فإننا سوف نستخدم fallback بسيط: function toggleTOC() { var opened = $container.data( 'opened' ); opened ? closeTOC() : openTOC(); } function openTOC() { $navNext.hide(); $navPrev.hide(); $container.addClass( 'slideRight' ).data( 'opened', true ); } function closeTOC( callback ) { $navNext.show(); $navPrev.show(); $container.removeClass( 'slideRight' ).data( 'opened', false ); if( callback ) { if( supportTransitions ) { $container.on( transEndEventName, function() { $( this ).off( transEndEventName ); callback.call(); } ); } else { callback.call(); } } } خاتمةهذا كان كل شيء يخص هذا الدرس أتمنى أن يكون قد أعجبك وأن تكون قد وجدته مفيدًا. ترجمة -وبتصرّف- للدرس Fullscreen Pageflip Layout لصاحبته Mary Lou.