اﻟﻔﺼﻞ اﻟﺜﺎﻧﻲ

....الباب الحادي عشر – ما تبقى عن بي اتش بي – يؤآد هذا الباب مبدأ أؤمن به آثيراً‏لن يأتي اليوم الذي تعتقد بأنك تعرف فيه آل شيء عن بي اتش بي ! دائماً‏ هناكالمزيد من التجديدات هناك المزيد من الأفكار البرمجية خفيفة الظل التي تعطيلبرامجك المزيد من القوة أو المرونة أو السهولة أو الاحترافية أو هذه الأمور معاً‏سنتعرف بدءاً‏ على آيفية الاستفادة من الكوآيز ثم سنشرح قائمة بمتغيرات جاهزةيمكن أن تفيدك آثيراً‏!.....البابان الأخيران يقدمان لنا مشروعا بي اتش بي متكاملان ... سنبدأ المشروع منالمستوى صفر مع بعضاً‏ البعض و سنحتفل سوياً‏ بإنجاز هذين المشروعين مع ختامالكتاب إن شاء االله....الكتاب ملحق ببعض الملاحق المفيدة في آخره استخدمها آمراجع ترجع إليها فيوقت الحاجةآما أعد بإضافة المزيد من الأبواب في الطبعات القادمة بإذن االلهآيف تقرأ هذا الكتاب ؟..الكتاب معنون بالاسم ‏"تعلم بي اتش بي بسهولة"‏ ... مما يعني أن الكتاب يرآز آثيراً‏على السهولة في تقديم المعلومات أعتقد أن استخدام إشارات متفق عليها مسبقاً‏سيجعل الأمر أآثر سهولة علي و عليك عزيزي القارئإذن فلنتفق على التاليآود بي اتش بي.:إذا وجدت صندوقاً‏ رمادي اللون آتبت عليه بعض الأآواد باللغة الإنجليزية على أسطرمرقمة فإن هذا يعني أنك تقرأ آود مكتوب بلغة بي اتش بي و المثال الآتي يوضح ذلك.:" php.php ".في الجهة اليسرى العليا ثمآما نشاهد أعلاه ، قمنا بكتابة اسم الملفبدأنا بكتابة آود بي اتش بي في أسطر مرقمة إن الانتباه لاسم الملف سيساعدكآثيراً‏ عندما نبدأ بكتابة مشاريع من عدة ملفات آما أن عدد السطر سيسهل عليناشرح سطر معين بذاته بالرجوع إلى رقم السطر بدلاً‏ من إعادة آتابة السطر آاملاً‏ .معلومة إضافية- 10 -

معلومة إضافية.ستجد بعض المعلومات المفيدة في صناديق شبيهه بهذه الصناديق خلال رحلتك مع هذاالكتاب قراءة هذه الصناديق غير إلزامية لأنها عادة ستحتوي على بعض المعلوماتالتاريخية أو الإحصائية التي تهمك فقط إذا آنت مهتماً‏ بهذا النوع من المعلوماتلا بأس من الاطلاع السريع على المعلومة على الأقلتلميحة ذآية.!تحذير!‏تلميحة ذآيةستجد الأفكار الذآية في صناديق شبيهه بهذه الصناديق خلال رحلتك مع هذا الكتابتفوت على نفسك فرصة قراءة هذه الأفكار الذآية لأنها ستساعدنا على الابتكار والتجديد من وقت لآخرعندما تفكر في آتابة أآوادك الخاصة لا تعطل الجانب الإبداعي و الابتكاري لديكهذا الجانب موجود و لكنه بحاجة لتنشيط من خلال إعطاءك بعضاً‏ من هذه الأفكار فيصناديقنا هذه .. لا......تحذير!!انتبه جيداً‏ لهذه الصناديق إنها تحتوي على تحذيرات هامة تحميك من القيام بشيء قدتندم على فعله إن لم تستمع إلى نصائح الكتاب......و بعد أن اتفقنا على هذه الإشارات فإنه يكون قد تبقى لنا شيء واحد نذآره بخصوصآيفية قراءة الكتاب ألا و هو الأسلوب الذي تستخدمه لتحقيق الاستفادة القصوىمن هذا الكتاب نصيحتي في هذا الجانب هي أن تختار الرفيق المناسب في هذهالرحلة فإما أن تطلب من شخص متمكن من هذه اللغة أن يشرح لك محتويات الكتابفي دورة مجزاة إلى عدة مستويات – بحسب الأبواب المختلفة في هذا الكتابيكون الكتاب هو المنهج الذي تسيران عليه أو أن تختار صديقاً‏ بمستوى خبرتك الحاليةو تتعاونان لتسهيل الأمر عليكما ، بحيث يتولى أحد الأطراف شرح الباب الأول ثم يتولىالطرف الثاني شرح الباب الثاني و هكذا .– بحيث.- 11 -

! هذا آل شيءفلنبدأ باسم االله.- 12 -

الباب الأول:مداخل للغات أ أخرىمقدمة الباب الأول..يقدم لك هذا الباب مداخل للغات أخرى غير لغة بي اتش بي آلمة مدخل تعني أننالن نتعمق آثيراً‏ في تفاصيل آل لغة ، بل سنأخذ من آل لغة ما يلزمنا لكتابة أآواد بياتش بي واضحة و صحيحةسنتعرف في الفصل الأول على لغة الاتش تي ام ال اللغة الأولى على شبكة الويبو في الفصل الثاني سنتعرف على لغة تضيف مرونة هائلة للغة الاتش تي ام ال(‏و هي لغة السي اس اس في الفصل الثالث سنتعرف على لغةالجافا سكريبت التي تعد خياراً‏ ذآياً‏ يضيف القوة و الجودة على مشاريع بي اتش بي....(CSS).(HTML- 13 -

بالإضافة إلى وسوم تنسيق النص فإن لغة الهتمل تضم وسوماً‏ لإدراج صورة أو خطأفقي أو جدول أو ملف فلاشي و آذلك وسوماً‏ خاصة بإدراج مكونات النماذجآما أنها تضم وسوماً‏ خاصة ببداية آل صفحة و نهايتهاآما أن بعض الوسوم تقبل متغيرات إضافية ترسل مع الوسم و تعني معلومة إضافيةللمتصفحأنت تقوم بكتابة هذه المتغيرات الإضافية داخل قوسي وسم البداية هكذاالأمر هنا متغير ‏="قيمة

شكل 1ماذا تعني هذه الوسوم ؟لنتناولها واحداً‏ تلو الآخر ....بكتابتك لهذا الأمر فإنك تخبر المتصفح ببداية صفحتك لاحظ أن نفس الأمر يستخدمفي نهاية الصفحة أيضاً‏ – مع الشرطة المائلة – لاختتام صفحتكهذا الأمر – بهذا الشكل – لا يقوم بأي تنسيق لكن يمكن أن نستفيد منه لتنسيقالصفحات العربية بحيث يكون الاتجاه الافتراضي لها من اليمين إلى اليسار ‏(اتجاهالكتابة ، اتجاه شريط التمرير)‏ .آل ما عليك هو أن تمرر المتغير الإضافي التاليفيصبح الأمر هكذا(Dir=”rtl”)....::...تتكون آل صفحة هتمل من رأس و جسم الجسم يحتوي على المعلومات التيستعرض لمتصفحي موقعك أم الرأس فإن الغرض منه هو تمرير معلومات أخرىللمتصفحيعني بداية رأس الصفحةالوسم الحاليستتعلم إضافة أشياء آثيرة داخل هذا الرأس منها وسم إثبات حقوقك في آتابة آودآذلك يمكنك أن تضيف بعضالصفحة و الذي يعتبر أحد الوسوم الوصفيةأآواد الجافا سكريبت أو الفيجوال بيسك سكريبت داخل الرأسو بالطبع فإن الوسم بحاجة لوسم إغلاق هو الوسم....(Meta tags):()القِ‏ نظرة سريعة إلى أعلى نافذة المتصفح – بعد استعراض الصفحة التي أنشأناهاقبل قليل ، ستلاحظ وجود العبارة ‏"عنوان الصفحة"‏ . إن هذه التجربة السريعة توضح لكالغرض من استخدام وسم يقوم هذا الوسم بإرسال الجملة التي تكتبها- 16 -

داخله إلى المتصفح ليقوم بدورة بعرضها على زائر الصفحة آعنوان للصفحةو بالطبع فإن الوسم بحاجة لوسم إغلاق هو الوسم.:..أنت تعرف الآن أن آل صفحة هتمل تتكون من رأس و جسم فإذا آان الرأس يبدأبالوسم فإن الجسم يبدأ بالوسم .سنضع ما نريد عرضه داخلي وسمي الجسمهناك الكثير و الكثير من الأوسمة التي يمكن أن نضعها داخل جسم الصفحةسنتعرف على آل وسم بالتفصيل بعد قليللا أنسى أن أذآرك بأن الوسم يحتاج لوسم ختامي هو.....:!إذن اآتب هذه السطور دائماً‏ عند بداية أي ملف هتمل تنشئهفهو الشكل العام لكل صفحات هتمل و هاهو مرة أخرى للتذآير:...شكل 2تستطيع تذآر هذا الهيكل العام على أساس أنه يتكون من ثلاث مستويات رئيسيةوسممستوى هو الأول المستوى هماو جزأين من المكون الثاني المستوى يضم المستوى هذا مستوى الوسم المستوى الثاني أ مستوى الوسم المستوى الثاني ب و آل مستوى من هذين المستوين يضم مستوى فرعي هو مستوى الأوسمة التيسنتعرف عليها الآن ...:.:::وسوم رأس الصفحة:سنبدأ بالتعرف على الأوسمة التي قد تصادفك في رأس الصفحة و هي:- 17 -

.هذه هي الأوسمة الوصفية التي تحدثنا عنها قبل قليل الأوسمة الوصفية ليستوسماً‏ واحداً‏ بل إنها مجموعة آبيرة من الأوسمة يمكنك أن تختار ما تشاء منها أوتترآها جميعاً‏ إن أردت !هذه الأوسمة لها صيغة عامةالصيغة العامة لها آالتالي..:و تكتب بين وسمي .الأمثلة عديدة و لا يمكن أن نسردها جميعاً‏ هنا لذا سنكتفي بذآر أهم الأمثلة فقط:..هذا المثال يوضح لك آيف يمكن أن تستخدم الوسوم الوصفية لإثبات حقوقك آكاتبلهذه الصفحة يمكن أن يتعرف الزوار على آاتب الصفحة من خلال الاطلاع علىالشفرة المصدرية للصفحة و ذلك من خلال الأمر ‏(عرض ‏==>المصدر)‏ في نافذة متصفحإنترنت اآسبلوررهذان السطران يطلبان من المتصفح أن يقوم بعرض الصفحة باستخدام التشفير العربيللأحرف يستحسن أن تضيف هذان السطران في رأس آل صفحة من صفحاتكيوجد بدائل للسطر الثاني ، فكما نعلم فإن اللغة العربية هي اللغة الرسمية لعربي مما يعني وجود حوالي 22 بديل لهذا السطرمثال..22 بلد..:!..آما نعرف و آما يثبت لنا استخدام أحد البدائل أعلاه ، فإن اللغة العربية واحدة فيأي بلد عربي و لا يختلف استخدام أحد هذه البدائل عن غيرها الخيار هنا لا يتعدىآونه تفضيل شخصيمثال آخر...:هذا المثال يقدم أحد الحلول التي ستحتاج لها يوماً‏ ما استخدامك لهذا السطر فيرأس الصفحة يعني أنه سيتم تحويل الزائر مباشرة إلى صفحة أخرى هي الصفحةأو آما تحدد بنفسك في الأمرلا تتردد بتجربة هذا السطر بنفسك إن لم تكن الفكرة قد اتضحت لك بعد..http://www.c4arab.comوسوم جسم الصفحة:و الآن سننتقل إلى الوسوم التي تهمنا حقاً‏صفحتكلنأخذ أولاً‏ المثال التالي..:.الوسوم التي ستظهر نتائجها لدى زوار- 18 -

شكل 3آما لاحظت ، لقد قمنا بكتابة ‏"بسم االله الرحمن الرحيم"‏ في جسم الصفحة عندما .تحفظ الملف بالتغييرات الجديدة فإنك ستحصل على صفحة شبيهه للصفحة التالية:شكل 4نريد أن نضيف بعض التنسيقات على هذه العبارة..تابع معي الوسوم التالية:- 19 -

هذا الوسم هو وسم خاص بتنسيق الخط المستخدم للكتابة .الوسم أن تغير الخط المستخدم ، اللون ، الحجمآما يوضح الجدول التالييمكنك بواسطة هذا.:المتغيرالوصفهذا المتغير يحتوي على المعلوماتالخاصة باللون المستخدم في الكتابةهذا المتغير يحتوي على المعلوماتالخاصة باسم الخط المستخدم في الكتابة..ColorFaceSizeجدول 1لنضيف ما تعلمناه على ملفنا السابق الآن..هذا المتغير يحتوي على المعلوماتالخاصة بحجم الخط المستخدم فيالكتابة .شكل 5..احفظ الملف الآن قم بفتح الصفحة في متصفحك أو قم بتحديث الصفحة إن آانت مازالت مفتوحة . ستحصل على صفحة شبيهه بالصفحة التالية:- 20 -

شكل 6تلميحة ذآية.يجب أن يكون نوع الخط الذي حددته للمتصفح باستخدام الوسم السابق موجوداً‏ علىجهازك و أجهزة متصفحي موقعك ماذا لو لم يمكن الخط موجوداً‏ على أجهزةمتصفحي موقعك ؟!‏ يمكنك أن تحدد للمتصفح عدة خيارات يستخدمها لاسم الخط ،حتى تتجنب هذه المشكلةيمكنك القيام بذلك عن طريق آتابة أآثر من خط تفصلهم بفاصلة مثل.:بعد أن تعلمنا آيفية تنسيق الجمل فإننا سنتعلم آيفية تنسيق الفقرات..يقوم هذا الوسم بمهمة تنسيق الفقرات على حسب المتغيرات التي ترسلها معهلنأخذ مثالاً‏ على ذلك للتوضيح.:- 21 -

شكل 7سيكون الناتج آما يلي:شكل 8و تجد شرح هذه المتغيرات في الجدول التالي:المتغيرالوصفهذا المتغير يحتوي على المعلوماتالخاصة بمحاذاة النص ‏(يمين،وسط،يسار).‏align- 22 -

dirجدول 2هذا الوسم يقوم بتنسيق الجملة على شكل رأس فقرةفي الواقع يوجد ستة مستويات لرؤوس الفقرةهذا المتغير يحتوي على المعلوماتالخاصة باتجاه الكتابة ‏(من اليمين إلىاليسار أو العكس).‏. (Heading)..الوسم الأول يشير إلى أعلى مستوى من الرؤوسأقل مستوى من الرؤوسلنأخذ مثالاً‏ على ذلك....:آما يشير الوسم الأخير إلىشكل 9و هذا هو الناتج الذي ستحصل عليه – جرب بنفسك من فضلك:- 23 -

شكل 10! تحذير.يقوم المتصفح باستخدام نوع و حجم الخط الافتراضي لديه عند استخدامك لوسم رأسالفقرةيمكنك أن تجبر المتصفح على استخدام تنسيق معين مع هذا الوسم من خلال لغة أوتقنية السي اس اس التي سنتعرف عليها في الفصل التالي.(CSS)..!لا يوجد الكثير لنقوله هنا يقوم هذا الوسم بطباعة سطر فارغ على الشاشةجرب استخدامه بنفسك و راقب النتيجة لاحظ أنه يمكنك استخدام هذا الوسم أآثرمن مرة بشكل متتالي لطباعة أآثر من سطر فارغ و لاحظ أيضاً‏ أن استخدام هذاالوسم ضروري في أحوال آثيرة لأن المتصفح سيعرض الأسطر المختلفة لمستندك فيسطر واحد ما لم تفصل بينهما باستخدام هذا الوسم أو وسم آخر يقوم بمهمة شبيهههذا يعني أن المتصفح يتجاهل الأسطر‏(وسم الفقرات على سبيل المثالالفارغة و المسافات الفارغة تماماً‏هذا الوسم هو أحد الوسوم التي لا تحتاج لوسم إغلاق استخدمه آما هو و انتهى!...( :.هل لاحظت وجود خط فاصل بين بعض الفقرات على الصفحات التي سبق لك زيارتها ؟هذا الخط الفاصل نسميه في عالم الوسوم بالمسطرة الأفقيةأيضاً‏ هذا الوسم لا يتطلب وسماً‏ لإغلاقهمثال. (Horizontal Line).:- 24 -

شكل 11و هذه هي النتيجة المتوقعة:شكل 12يقوم هذا الوسم بتنسيق النص على هيئة نص عريض (Bold) .يقوم هذا الوسم بتنسيق النص على هيئة نص مائل (Italic) .يقوم هذا الوسم بتنسيق النص على هيئة نص مشطوب through) (Strike .- 25 -

يقوم هذا الوسم بتنسيق النص على هيئة نص مسطر (Underline) .و هذا مثال توضيحي:شكل 13و هذه هي النتيجة:شكل 14- 26 -

يقدم هذا الوسم تنسيقاً‏ خاصاً‏ بالعبارات المقتبسة من نصوص أخرىبتوسيط النص و زيادة الهوامش الجانبية لههذا مثال جاهز بعد استخدامه. (Quote).:فيقومشكل 15.شكل 16preformattedpreأي النص المنسق مسبقاً‏ يقوم هذاالاختصار يشير إلى آلمةالوسم بتنسيق النص بحسب الطريقة التي آتبت بها نصك تماماً‏ و باستخدام خطإذا آنت قد ترآت بعض الأسطر الفارغة بين أسطر نصك فإنها ستظهرهذه المرة آما آتبتها و لن يتجاهلها المتصفحراقب المثال التالي بتمعن“.:.”monospace- 27 -

شكل 17شكل 18هذا الوسم شبيه جداً‏ بالوسم السابق ‏،من ناحية انه ينسق النص باستخدام الخط، monospace لكنه لا يضيف أسطر فارغة في النص المنسق . جربه بنفسك.- 28 -

يستخدم هذا الوسم لكتابة قائمة منسقة . المثال التالي يوضح ذلك :شكل 19شكل 20يمكنك إضافة مستوى فرعي للقائمة بطريقة سهلة آما يوضح الكود التالي:- 29 -

شكل 21عليك أن تجرب النتيجة بنفسك....هذا الوسم شبيه بالوسم السابق الفارق الوحيد هو أن هذه القائمة هي قائمةمرتبة رقمياً‏ في مقابل القائمة غير المرتبة رقمياً‏ السابقة.شكل 22- 30 -

..و ماذا نفعل إن أردنا إنشاء وصلة تشعبية تنقلنا لصفحة أخرى عند الضغط عليها ؟ عليناهذا الوسم له وسم بداية ووسم نهاية و يحتاجأن نستخدم الوسم للقيام بذلك لنطلع على هذا الجدول لمزيد من التوضيحلمتغيرين يمرران من خلاله في الغالب :المتغيرالوصفهذا المتغير يحتوي على عنوان الصفحةالمراد الانتقال إليهاهذا المتغير يسمح لنا بفتح الصفحةالجديدة في نفس الصفحة أو في إطارجديد بحسب القيمة المعطاة له ..hreftargetجدول 3لنأخذ مثالاً‏ بسيطاً‏ يوضح ذلك:شكل 23.مهما آانت صفحتك بسيطة ، فإنك تحتاج عادة لإضافة بعض الحيوية لها من خلال إدراجبعض الصور يستخدم الوسم لهذا الغرض يحتاج الوسم إلى وسم البدايةفقط و يأخذ بعض المتغيرات التي يوضحها الجدول الآتي:.المتغيرالوصفهذا المتغير يحتوي على عنوان الصورةSrc- 31 -

المراد إدراجها .هذا المتغير يسمح لنا بتحديد حجمالصورة من حيث العرضهذا المتغير يسمح لنا بتحديد حجمالصورة من حيث الطوليمكنك أن تضيف إطار خارجي للصورة منخلال هذا المتغير ...WidthHeightBorderجدول 4المثال التالي يوضح أآثر من حالة:شكل 24الجداول :دائماً‏ ما أردد و يردد غيري ، استخدام الجداول في تصميم الصفحات هو سر جمالهافلنتعرف على آيفية إدراج جدولسنحتاج للتعرف على أآثر من وسم يستخدم لهذا الغرض ، و حتى نفهم هذهالوسوم يجب أن نعرف الهيكل العام لأي جدول‏‏‏‏‏‏‏‏‏‏‏‏‏‏‏‏هذا الجدول يتكون من صف واحد يحتوي بدوره على خليتين أو بمعنى آخر هو جدولمكون من صف واحد و عمودين..:......هذا الوسم هو وسم بداية الجدول يحتاج لوسم نهاية أيضاً‏ . يأخذالمتغيرات الموضحة في الجدول التالي:- 32 -

المتغيرالوصفيحدد هذا المتغير لون خلفية الجدولهذا المتغير يسمح لنا بتحديد حجمالجدول من حيث العرضهذا المتغير يسمح لنا بتحديد حجمالجدول من حيث الطوليمكنك أن تضيف إطار خارجي للجدول منخلال هذا المتغير .. bgcolorWidth.Height.Borderجدول 5هذا الوسم يشير إلى بداية صف في الجدول . و يحتاج لوسم نهاية أيضاً‏ .هذا الوسم يشير إلى بداية خلية في الجدول . و يحتاج لوسم نهاية أيضاً‏ .المثال التالي سيوضح هذه الوسوم إن شاء االله:شكل 25- 33 -

النماذج :ها قد وصلنا لآخر ما سنناقشه في لغة الهتمل الآن ، أطلب منك أن ترآز جيداً‏ لأناستخدام النماذج سيستمر معنا إلى نهاية الكتاب تأآد من أنك تفهم ما يذآر هناجيداً‏ ، حاول القيام بعدة تدريبات عملية ، و لا تتردد بطلب المساندة من شخص تثق بهفي هذا المجال . سنتعلم آيف ندرج عناصر النماذج المختلفة بالطبع ستكون هذهالنماذج مجرد نماذج شكلية لا تفعل الكثير ؛ سنضيف لها المزيد من القوة في البابالرابع من هذا الكتاب إن شاء االله ......يبدأ آل نموذج بهذا الوسم و ينتهي آذلك بوسم النهاية . هذا الوسم يأخذبعض المتغيرات الهامة التي يمكن توضيحها من خلال الجدول الآتي:المتغيرالوصفيحدد هذا المتغير نوعية الطلب المرسلإلى المضيفيحدد هذا المتغير اسم الملف الذيسيعالج محتويات النموذج بعد النقر علىزر الإرسال .. (post , get , head)methodactionجدول 6.الغرض الأساسي من النماذج هو التفاعل مع المستخدم عن طريق قبول بعضالمدخلات منه هذه المدخلات – آما تعرف من خلال خبرتك مع النماذج – لها أشكالمتعددة ، فقد تكون عبارة عن مربع نص أو زر خيار أو مربع العلامة أو زر أوامر الخ....و بطبيعة الحال ، تحتاج هذه الوسوم إلى بعض المتغيرات آي تظهر بالشكل المطلوب ،هذا ما يوضحه الجدول التالي :الوصفالمتغيريحدد هذا المتغير نوع العنصر ‏(مربع نص ،زر خيار ، زر أوامريجب أن تحدد اسماً‏ لكل عنصر من عناصرالنموذج ، يمكنك القيام بذلك عن طريق.. الخ)‏ ..typenamevalueجدول 7هذا المتغيرقد ترغب في إعطاء قيمة افتراضية للعنصرمن خلال هذا المتغير .آيف ندرج أحد هذه العناصر ؟ دعنا نتعرف على ذلك سوية عن طريق الأمثلة التالية:- 34 -

شكل 26ستكون النتيجة هكذا:..شكل 27و لكل منهما قيمةإن النموذج البسيط أعلاه يحتوي على مربع نص و زر إرسال فقط إذا جربت الضغط على زر الإرسال فإنافتراضية ظاهرة على الشاشة الأخيرة و ذلك لأنه الملف المحدد في خاصيةالمتصفح سيحاول فتح الملفقد تتساءل حالياً‏ عن الفرق بين النوعيات المختلفة التي يمكن أن نرسل بهاaction."form.php".- 35 -

المعلومات إلى المضيف ‏(راجع جدولبإذن االله(6.مثال آخر يحتوي على المزيد من العناصر يلي هذا السطر:لكني سأترك هذا الجزء للباب الرابع من الكتابشكل 28و هذه هي النتيجة:- 36 -

سأشرح هذه العناصر بشيء من التفصيلشكل 29:1 العلامة مربع.يعطينا هذا الوسم مربع العلامة الذي يسمح للمستخدم بوضع علامة بداخله ""هذا العنصر له الاسم و له المعرّف بعد ذلك قمنا بكتابة تعريف نصي يظهرلاحظ أن وسم يحتاج لوسمأمام المستخدم باستخدام الوسملا يحتاج لوسم نهايةنهاية بينما الوسمميزة مربعات العلامة أنها تسمح للمستخدم باختيار أآثر من خيار في النموذج و ذلكبوضع علامة في داخل آل خيار يناسب المستخدم ، هذا بالمقارنة مع زر الخيارالذي يسمح للمستخدم باختيار زر واحد فقط آما سنرى بعد قليل.. "a". "C1""".- = - = - = - = - = - = - = - = -2 العلامة مربعهذا هو نفس الوسم السابق مع تغيير الاسم و المعرّف فقط ليعطينا مربع علامة جديديظهر للمستخدم .- = - = - = - = - = - = - = - = -

- HTML4 Bible by Bryan Pfaffenberger and Alexis D. Gutzman (IDGBooks)- DHTML: The Definitive Reference by Danny Goodman (O’Reilly)- 39 -

-الفصل الثاني :مدخل لل CSS!...أنت تقرأ هذا الكتاب لأنك تخطط لتنفيذ مشاريع بي اتش بي يزيد عدد صفحاتها عنالعشرة صفحات أليس آذلك ؟حسناً‏ لنتخيل معاً‏ أنك قبلت تنفيذ مشروع متوسط الحجم لأحد العملاء و أنكبطبيعة الحال ستحتاج لبرمجة ما يزيد عن العشر صفحات لنتخيل أيضاً‏ أنك انتهيت منالمشروع بعد عمل متواصل لمدة عشرة أيام و قد عرضت المشروع على العميل لأنكتعتقد أنه أصبح جاهز للاستخدام الآن ماذا لو فاجأك العميل بطلب تغيير حجم الخطمن القيمة إلى القيمة هل ستضطر لفتح آل صفحة و التعديل في آل فقرةمن فقراتها لتغير هذه القيمة ماذا لو آان المشروع مكوناً‏ من 50 صفحة ؟!‏و ماذا لو آان يعمل على المشروع أآثر من شخص بشكل منفصل ؟في الواقع فإن هذه القصة القصيرة التي افتتنا بهذا الفصل و التي ستواجهك آثيراً‏ عندالتعامل مع عملاءك تنقلنا للتفكير من استخدام لغة ‏"هتمل"‏ وحدها – و التي تعلمناهافي الفصل السابق إلى لغة تعطينا مرونة أآبرالفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق فيملف منفصل يمكنه تغييره لتتغير آامل صفحات موقعكإذاً‏ ، أجد نفسي ملزمة بشرح هذه اللغة قبل البدء بشرح لغة بي تش بي حتى نؤآدعلى المبدأ الذي نسير عليه من بداية الكتاب استخدام التقنية المناسبة في المكانالمناسب.!.:.! "3"!"2".تشير الأحرف في اسم اللغة إلى العبارة الإنجليزية التالية:. CSS :Cascading Style Sheetsو تعني ‏(صفحات الأنماط الانسيابية)‏ . و اختصارها هوينبغي أن لا يأخذ هذا الفصل من وقتك الكثير نصف ساعة من الزمان تعتبر مدة جيدة.!:.في الواقع فإننا نستخدم نوعاً‏ من أنواع صفحات الأنماط الانسيابية في صفحاتنا دون أنندري و لنأخذ هذا المثال البسيطشكل 30- 40 -

آما لاحظت ، لم أقم بتحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحةباستخدام المتصفح ستجد تنسيقاً‏ معيناً‏ لنوع الخط و حجمه و لونه هذا التنسيق قديختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرضإذاً‏ ، آأننا نقول بأن المتصفح يحتفظ بملف يحوي أنماط معينة من التنسيق يستخدمهاإذا لم تحدد التنسيق بشكل واضح في صفحتكفي الواقع ، إن تقنية السي اس اس تعتمد نفس المبدأ . لن تكتب أي تنسيق فيصفحة الهتمل الأساسية لكنك ستحدد بالتفصيل التنسيق الذي تريده في ملفمنفصل....لنلقي نظرة على الطريقة بالتفصيل..معلومة إضافيةCSS –(:ظهرت الحاجة لاستخدام هذه التقنية – بعد اهتمام المتصفحات الشهيرة‏(أمثال الانترنت اآسبلورر و النت سكيب بإضافة وسوم هتمل إضافية هي الوسومالخاصة بتنسيق النص و التي تعرفنا عليها في الفصل السابق قامت جمعية W3Cباعتماد هذه التقنية لتساعد على نقل المواقع قديمة الطراز – تلك التي لا تحتوي علىوسوم التنسيق – إلى الطراز الجديد من صفحات إنترنت..معلومة إضافيةW3C هو اختصار لالمسؤولة عن إصدار نسخ قياسية من لغة . HTMLWorld Wide Web Consortium و هي الجمعيةالصيغة العامة للنمط:..آما قلنا ، فإن الأنماط تحدد التنسيق لأوسمة الهتمل المختلفة التي تعرفنا عليها فيالفصل السابق تستطيع تحديد تنسيق معين لوسم الفقرة أو تنسيق معين للجداولو هكذا إذاً‏ لابد أن نتوقع بأن الصيغة العامة لأوسمة السي اس اس ستتضمن وسمهتمل الذي سيطبق عليه النمط و آذلك التنسيق آما توضح هذه الصيغة تماماً‏:.‏{"القيمة"‏ : المتغير { : وسم هتمل.آما نلاحظ فإن الصيغة تقتضي آتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتانرأسيتان ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتينرأسيتين أخريتينلنأخذ بعض الأمثلة الحقيقية لتتضح الصورةa { color: #008000; font-size: 1em }body { border-style: solid }h2 { color: #800000 }:- 41 -

p{ border-style: solid; border-color: #FF00FF}table { border-right-style: solid }هل تريد تجربة هذه الوسوم بنفسك ؟ انتظر قليلاً‏ حتى ننتهي من شرح الصيغةالعامة للأنماط و سنتعرف على طريقة إدراج الأنماط في الجزء التالي إن شاء االله.(a)...(;):دعنا نرآز قليلاً‏ على الأمثلة السابقة هل لاحظت الوسم الأول ؟ إنه يحتوي علىمتغيرين بدلاً‏ من متغير واحد قمنا بفصل المتغيرات المختلفة باستخدام الفاصلةالمنقوطة يمكنك أن تجعل أنماطك أآثر وضوحاً‏ بكتابة آل متغير في سطر منفصل!‏هكذاa {color: #008000;font-size: 1em}أفضل آثيراً‏ أن تستخدم عادات جيدة أثناء آتابة الأنماط أو غيرها من الشفرات لأن ذلكهو طريقك لكتابة برامج يمكن أن نطلق عليها مصطلح ‏"برامج نظيفة"‏ ! أو آما نقولباللهجة المحلية ‏"تفتح النفس"‏ !تعرفنا في المثال السابق على آيفية تخصيص أآثر من متغير لوسم هتمل واحدلو أردنا تخصيص متغير واحد بقيمة واحدة مكررة مع أآثر من وسم هتمل ؟أآثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرةوسوم الرابط التشعبي لنأخذ مثالاً‏ يوضح ذلك.(h1-h6):. (a)ماذاأوh1,h2,h3,h4,h5,h6 { color: #008000; }(,)..هل راقبت ذلك ؟ الأمر في غاية السهولة آل ما عليك هو أن تضيف الفاصلةالأوسمة المختلفة ثم تستخدم الصيغة العامة التي أصبحت تعرفها الآنبين:استخدام الفئات (Classes):لنذهب أبعد من ذلك قليلاً‏ ماذا لو آنت تريد استخدام أآثر من تنسيق للصفحةالواحدة ، بمعنى أن تنسق الفقرة الأولى في مستندك باستخدام اللون الأحمر والفقرة الثانية باللون الأخضر و الثالثة باللون الأصفر هل تعطيك تقنية السي اس اسهذه المرونة ؟بالطبع نعمآل ما علينا هو أن نتعرف على خاصية الفئات ، من خلال المثال التالي:!(Classes)!شكل 31!تستطيع شرح الطريقة بنفسك قمنا بكتابة اسم الوسم المطلوب ، ثم نقطة ، ثمالاسم الذي نختاره للفئة الجديدة و نكمل آما تعودنا.- 42 -

و المثال التالي يعرفنا بالطريقة التي نستخدمها مع أآواد هتمل لتحديد فئة معينة دونأخرى :شكل 32ستكون النتيجة في المتصفح هكذا:شكل 33:ملاحظة للتذآير إذا أردت أن تتعلم بي اتش بي حقاً‏ ، فلا تتكاسل في تنفيذ مثلهذه الأمثلة البسيطة بنفسك ! صدقني ستكتشف أشياء جديدة آلما جربت.تلميحة ذآية- 43 -

لتضيف فئة يمكن استخدامها مع جميع الوسوم في صفحتك استخدم الطريقة التاليةاحذف اسم الوسم و اآتفي بوضع نقطة مع اسم الفئة:.red{ color: “red” }!طريقة إدراج الأنماط في الصفحة:...تعرفنا على الهيكل العام لصفحات الأنماط الانسيابية بقي علينا أن نتعرف علىآيفية إدراج هذه الأنماط في صفحات هتمل أو آيفية ربطها بها ؟هناك ثلاث طرق لإدراج الأنماط في صفحتكأ-‏ باستخدام ملف خارجيب-‏ عن طريق رأس الصفحةج داخل الوسم:.(external file). (Head).(Inline)-::(external file)سنقوم بشرح آل طريقة بالأمثلةأ-‏ باستخدام ملف خارجيهذه الطريقة هي الخيار الذآي لمن يفكر في برمجة مشاريع من عدة صفحات ضعآل التنسيقات التي تريدها في هذا الملف الخارجي ثم أدرج رابط لهذا الملف في آلصفحة تريد استخدام الأنماط فيها ‏(جميع صفحات مشروعك عادة)‏ .إذا طلب منك عميلك تغيير لون الخط المستخدم من اللون الأزرق النيلي إلى اللونالأزرق الغامق – و اللذان قد لا يختلفان آثيراً‏ لكن عليك أن ترضي ذوق العميل فقطقم بتغيير سطر واحد في هذا الملف و انتهيناهذا الملف يجب أن يحفظ بالامتداد ، يمكنك آتابته عن طريق برنامج المفكرة،‏يمكنك الاطلاع على نموذج من هذا الملف في الشكل 31 من هذا الفصل.!..cssاستخدم الوسم التالي في رأس آل صفحة من صفحات الهتمل.:شكل 34ب-‏ عن طريق رأس الصفحة: (Head)- 44 -

تستخدم هذه الطريقة فقط إذا آنت تريد تطبيق تنسيق معين على صفحة واحدة فقط، بحيث يلمزك تغيير صفحة واحدة فقط إذا أردت أن تعدل على التنسيق سندرجالأنماط عن طريق الوسم في رأس الصفحةلنأخذ مثالاً‏ لصفحة من صفحات هتمل لنتعرف على الطريقة بشكل أوضح.:()()شكل 35: (Inline)-ج داخل الوسمهذه الطريقة لا تختلف آثيراً‏ عن استخدام وسوم هتمل للتنسيق لأنك تضع التنسيقمع وسم هتمل الذي تريد تنسيقه . ستحتاج لهذه الطريقة لتنسيق وسم خاص لايتكرر آثيراً‏ مثلاً‏ أو لتغيير التنسيق المدرج من صفحة أنماط خارجية و هكذا ماتحتاجه هو ما يحدد اختياركسنستخدم آلمة style آمتغير يرسل مع الوسم المراد تنسيقه ، المثال التالي يوضحذلك.!!!:شكل 36معلومة إضافيةهل تتساءل عن سبب تسمية صفحات الأنماط الانسيابية بهذا الاسم ؟!‏أستطيع أن أخبرك عن السبب بعد شرحنا للطرق الثلاث المختلفة لإدراج الأنماط . في- 45 -

الواقع فإن السبب يعود لإمكانية استخدام أآثر من طريقة لإدراج الأنماط في ملف واحدبمعنى أن نستخدم ملفاً‏ خارجياً‏ و تستخدم الأنماط في رأس الصفحة و آذلك مع الوسملو افترضنا بأنك حددت حجم خط آل فقرة بالحجم "3" في ملف خارجي ثم حددتلخط الفقرة في رأس الصفحة ثم حددت الحجم "1" مع وسم الفقراتنقول هنا أن الأنماط ستنساب على بعضها و تكون النتيجة ظهور الفقرة باستخدام....الحجم "2"الحجم "1" !الأفضلية تكون باستخدام هذا الانسياب ‏(الأول هو الأعلى أفضيلةً)‏ :‎1‎‏-التنسيق مع الوسم‎2‎‏-التنسيق في رأس الصفحة‎3‎‏-التنسيق في الملف الخارجي‎4‎‏-التنسيق الافتراضي في المتصفح...أشباه الفئات:(Pseudo-class).تعرفنا على الفئات ، فما هي أشباه الفئات يا ترى ؟ إن أقرب مثال يوضح الفكرة هومثال تنسيق الروابط التشعبيةتأخذ أشباه الفئات الصيغة العامة التاليةشبه الفئة:‏أو ‏(في حالة وجود فئة أيضاً):‏شبه الفئة:فئة.‏قد تبدو مزعجة للوهلة الأولى لكنك ستكتشف مدى سهولته بعد المثال التالي:‏{"القيمة"‏ : المتغير { وسم هتمل‏{"القيمة"‏ : المتغير { وسم هتمل:!شكل 37.(#000088):للرابط العادي الذي لم يزار بعد آمافي المثال السابق حددنا اللونحددنا تنسيق النص بلا شيء حتى لا يظهر خط سفلي تحت الرابط حددنا اللونالأحمر للرابط الذي سبقت زيارته آذلك حددنا اللون الزهري مع خط بأسفل النص وحجم للنص أما الرابط النشط ‏(الحالي)‏ فقد حددنا له اللون الأزرق الفاتحالطريقة سهلة ، جربها بنفسك الآن...!10) نقاط)‏ .! تحذيرأنصحك بكتابة أنماط الروابط التشعبية بالترتيب الوارد في المثال السابقlink) ثم- 46 -

(active ثم hover ثم visitedو إلا فإن الأخريين لن يعملا بالشكل الصحيح!سنأخذ مثالاً‏ آخر يوضح آيفية استخدام الفئات مع أشباه الفئات في مثال واحد:شكل 38(main)المثال يشرح نفسه ، حددنا الفئة للرابط الذي لم يزار باللون الأخضر و فيالمقابل حددنا الفئة للرابط الذي لم يزار أيضاً‏ باللون الأحمريجب استخدام الطريقة المشروحة في جزء الفئات عند استخدامك إحدى الفئتينبالطبع .المعرّف.(sub): (ID)تستخدم فكرة المعرّف لحفظ تنسيقات معينة باسم هذا المعرّف على أن يتم إدراجهامع آل وسم يستخدم هذا المعرّف آمتغير ضمن متغيراته الأخرىلنفرض أننا بحاجة لاستخدام المحاذاة إلى الوسط بشكل متكرر فإننا سنقوم بتعريفمعرّف يؤدي هذا الغرض آما يلي :.شكل 39و عند الوسم المراد تنسيقه نستخدم الطريقة التالية:شكل 40- 47 -

إذن ، آما لاحظت بنفسك ، خاصية المعرّف تضيف لك مصمم قدرات إضافية يمكنكاستخدامها متى ما احتجت إليها .التوارث:‏..ذآرنا سابقاً‏ أن الصفحة الواحدة قد تحتوي على الطرق الثلاث المختلفة لإدراج الأنماطو أن المتصفح سيستخدم التنسيق الأقرب إلى الوسم ‏(مع الوسم ، ثم في رأسالصفحة ، ثم في ملف خارجي)‏ . فإذا آان الملف الخارجي يكتب الفقرة باللون الأحمر والنمط في رأس الصفحة يكتبها باللون الأصفر و النمط المرفق مع الوسم يكتبها باللونالخضر فإن الغلبة ستكون للون الأخضر حسناً‏ ، نريد أن ننتقل لأبعد من ذلك لنفرضأن الملف الخارجي يحدد اللون الأحمر و الحجم و أن النمط في رأس الصفحة يحدداللون الأصفر و المحاذاة إلى الوسط و أن النمط المرفق مع الوسم يحدد اللون الأخضرماذا سيحدث الآن ؟ نعرف مسبقاً‏ أن اللون سيكون أخضراً‏ … لكن ماذا عن المحاذاة والحجم اللذان لم يتدخل النمط المرفق مع الوسم في تحديدهما ؟ الجواب هو التوارثالتوراث يعني أن النمط النهائي سيكون لون أخضر ، محاذاة إلى اليمين ، و حجمبمعنى أن التنسيقات هنا متوارثة من الأنماط البعيدةلنأخذ مثالاً‏ لتتضح الصورة أآثرالملف الخارجي.."3":."3"::شكل 41صفحة الهتمل:شكل 42- 48 -

النتيجة ستكون هكذا:شكل 43: الملاحظاتإذا آانت لديك بعض المعلومات عن لغات البرمجة – تطبيقات سطح المكتب أو تطبيقاتالويب – فإنك حتماً‏ معتاد على فكرة الملاحظات الملاحظات هي نوع من أنواع التوثيقالتي تتيح لك آتابة تلميحة صغيرة في أول آل صفحة أو بجانب الأسطر الغامضة بعضالشيء و هكذا بحيث يسهل عليك فهم ما آتبته عند الرجوع إليه بعد مدة و بالطبعفإنه ينصح دائماً‏ بتوثيق برامجك ، سوى آنت ستستخدمها لأغراض التوزيع العام أولأغراض الاستخدام الشخصي لأن ذلك يحفظ الكثير من وقتك و وقت من يقرأ برامجكلإدراج ملاحظة في ملف السي اس اس ، قم باتباع الطريقة الموضحة في المثالالتالي :...شكل 44المزيد من الأمثلة:حتى الآن ، تناولنا الصيغة العامة لاستخدام أنماط السي اس اس ، تناولنا آيفية إدراجهذه الأنماط في صفحاتنا ، تكلمنا عن أمور أخرى مثل المعرفات و التوارث و الملاحظات- 49 -

.:!.!، لكن ما زلنا بحاجة لمزيد من الأمثلة التي تجعلنا معتادين على استخدام الأنماط معأي وسم من وسوم هتمل السبب في الترآيز على المزيد من الأمثلة أنه و آما جاءمعنا في بعض الأمثلة السابقة ، نلاحظ اختلاف متغيرات السي اس اس عن بعضمتغيرات هتمل فإذا آان حجم الخط في وسوم هتمل يرمز له ب (size) فإننا نرمز له بفي ملفات السي اس اس إذن ، الأفضل أن نأخذ آل وسم من وسومهتمل – التي تعرفنا عليها في الفصل السابق – و نتعرف على المتغيرات المناسبة لها. سنأخذها على شكل جداول للتسهيل‏(هذه الجداول ليست للحفظ احتفظ بها آمرجع فقط بعد أن تطلع عليها و تجرب بعضهابنفسك)‏(font-size)المتغيرالوصفيحدد هذا المتغير نوع الخط المستخدميحدد هذا المتغير حجم الخط المستخدميحدد هذا المتغير لون الخط المستخدميحدد هذا المتغير لون الخلفيةيحدد هذا المتغير إحدى الصور آخلفيةللصفحةيحدد هذا المتغير آيفية تكرار صورةالخلفية و يأخذ إحدى القيم التالية. font-family. font-size. color. Background-colorBackground-image.Background-repeat:(repeat, repeat-x, repeat-y, norepeat)SCROLLBAR-BASE-COLOR.SCROLLBAR-ARROW-COLOR.Scrollbar-track-color.Scrollbar-face-color.Scrollbar-highlight-color) حبScrollbar-3dlight-color.Scrollbar-darkshadow-color.scrollbar-shadow-colorيحدد هذا المتغير لون القاعدة لأشرطةالتمرير الطولية و العرضيةيحدد هذا المتغير لون السهم لأشرطةالتمرير الطولية و العرضيةيحدد هذا المتغير لون الخلفية لأشرطةالتمرير الطولية و العرضيةيحدد هذا المتغير لون الواجهة لأشرطةالتمرير الطولية و العرضيةيعطينا هذا المتغير بعض الإضاءة علىأشرطة التمرير سب اللون المستخدم)‏يعطي هذا المتغير التأثير الثلاثي علىأشرطة التمريريحدد هذا المتغير لون الظل لأشرطةالتمرير الطولية و العرضيةيحدد هذا المتغير لون الظل لأشرطةالتمرير الطولية و العرضية ‏(يختلف قليلاً‏عن المتغير السابق.(جدول 8! تحذيرإذا آنت قد حددت تنسيقاً‏ معين للنص باستخدام الوسم(body)ثم وضعت النصوص- 50 -

داخل جداول ، فإن المتصفح لن يأخذ تنسيق الوسمتحدد تنسيق الخط مع الوسم آما سنرى بعد قليل(body).. بعين الاعتبار(table)يجب أنالمتغيرالوصفيحدد هذا المتغير نوع الخط المستخدمداخل الجدوليحدد هذا المتغير حجم الخط المستخدمداخل الجدوليحدد هذا المتغير لون الخط المستخدمداخل الجدوليحدد هذا المتغير لون خلفية الجدوليحدد هذا المتغير إحدى الصور آخلفيةللجدوليحدد هذا المتغير لون الإطار ‏(الحدودالأربعة)‏يحدد هذا المتغير سمك الإطار ‏(الحدودالأربعة)‏ ، قد يأخذ أحد القيم التاليةfont-family.font-size.color.. Background-colorBackground-image.Border-colorBorder-width:‏(رقم thick, (thin, medium,Border-style:(none, hidden, dotted, dashed, solid,double, inset, outset). Border-left-colorBorder-left-width.. Border-right-colorBorder- right-width.. Border-top-colorBorder-top-width.Border-bottom-color.Border-bottom-widthجدول 9يحدد هذا المتغير شكل الإطار ‏(الحدودالأربعة)‏ ، قد يأخذ أحد القيم التاليةيحدد هذا المتغير لون الحد الأيسر للإطاريحدد هذا المتغير سمك الحد الأيسرللإطاريحدد هذا المتغير لون الحد الأيمن للإطاريحدد هذا المتغير سمك الحد الأيمنللإطاريحدد هذا المتغير لون الحد العلوي للإطاريحدد هذا المتغير سمك العلوي الأيسرللإطاريحدد هذا المتغير لون الحد الأسفل للإطاريحدد هذا المتغير سمك الحد الأسفلللإطار ..الوصفيحدد هذا المتغير نوع الخط المستخدمفي القوائميحدد هذا المتغير حجم الخط المستخدم,المتغيرfont-familyfont-size- 51 -

في القوائم.‏يحدد هذا المتغير لون الخط المستخدمفي القوائم.‏يحدد هذا المتغير صورة معينة آمحددللقائمة ‏(يأخذ مسار الصورة آقيمة له)‏ .يحدد هذا المتغير مكان محدد القوائم ،يأخذ القيمة:‏(Inside, outside)يحدد هذا المتغير شكل محدد القوائم ،يمكن أن يأخذ أحد القيم التالية:(None, disc, circle, square, decimal,lower-alpha, upper-alpha, lower-latin,upper-latin)colorlist-style-imagelist-style-positionlist-style-typeجدول 10تحذير!!طالما أن الشبكة موجودة ، فإن المطورين لن يتوقفوا عن إضافة و حذف بعضالمتغيرات من وقت لآخرآما أن المتصفحات المختلفة تختلف في دعمها للمتغيرات المختلفة و قيمها ، فإذاجربت أحد القيم المذآورة في هذه الجداول و لم تظهر لك أي نتيجة ، فقد يكون السببأن متصفحك لا يدعم ذلك ، إما تقصيراً‏ من الشرآة المنتجة للمتصفح أو لأن جمعيةw3c قد أسقطت المتغير من القائمة القياسية للوسوملذلك دائماً‏ جرب بنفسك آل الأمثلة في هذا الكتاب . ستستفيد الكثير و لن تخسر شيئاً‏!.!!الوصفيحدد هذا المتغير نوع الخط المستخدمفي عناصر النماذج ‏(مربع نص،‏ زر الخيار)‏ .يحدد هذا المتغير حجم الخط المستخدمفي عناصر النماذج ‏(مربع نص،‏ زر الخيار).‏يحدد هذا المتغير لون الخط المستخدمفي عناصر النماذج ‏(مربع نص،‏ زر الخيار).‏يحدد هذا المتغير شكل الإطار ، إنها صيغةمختصرة يمكن استخدامها مع عناصرالنماذج و غيرها ، حدد جميع خصائصالإطار بالشكل التالي آمثال:(border: 1px solid #000000;)المتغيريحدد هذا المتغير لون خلفية عنصرالنموذج .font-familyfont-sizecolorborderbackground-color- 52 -

جدول 11الخلاصة!CSS:تعرفنا في هذا الفصل على تقنية ال بشكل سريع أصبحت تعرف آيفيةالاستفادة من هذه التقنية في وقت قصير لتحفظ أوقات طويلة من التعديلتعرفنا على الصيغة العامة لمتغيرات السي اس اس ، آما تعرفنا على الطرق الثلاثةلإدراج الأنماط في صفحاتنا تعرفنا على الفئات ‏(عد سريعاً‏ إلى العنوان الفرعيالفئات إن آنت قد نسيت المقصود بالفئات آما تعرفنا على أشباه الفئات والمعرفات و طريقة إدراج الملاحظات في الأنماطلقد آان الفصل ممتعاً‏ ! أضاف لمعلوماتنا الكثير خلال وقت قصير أليس آذلك ؟المراجع!:... (!.:إذا آنت مهتماً‏ بتعلم المزيد عن صفحات الأنماط الانسيابية ، يمكنك الرجوع لبعض هذه: الكتب- Cascading Style Sheets – The Defintive Guide by Eric A. Meyer(O'Reilly & Associates)- Core CSS: Cascading Style Sheets by Keith Schengili-Roberts(Prentice Hall PTR)- Cascading Style Sheets: Designing for the web by Hakon Wium Lie,Bert Bos, Robert Cailliau (Addison-Wesley Pub Co)- 53 -

Javaالفصل الثالث :مدخل للجافا سكريبتScript!.ها قد انتهينا من تعلم لغتين و وصلنا بحمد االله للغة الثالثة – المحطة الأخيرة قبلالبدء بتعلم البي اتش بي لماذا برأيك وضعت هذا الفصل آمدخل في آتاب لتعليم لغةبي اتش بي ؟ بالتأآيد ليس لزيادة عدد صفحات الكتاب!.:–في الواقع سنجني فوائد جمة من خلال تصفح هذا الفصل ، إليك بعض الأهداف التينطمح إلى تحقيقها من وراء هذا الفصلسنحقق الانتقال المنطقي من مستوى تصميم المواقع بواسطة لغة الهتمل وتقنية السي اس اس من جهة إلى مستوى تطوير المواقع بواسطة لغة بياتش بي ، آيف ذلك ؟ تعتبر لغة الجافا سكريبت من المستوى المتوسط بينالمستويين السابقين سواءً‏ من ناحية السهولة و الصعوبة ، أو من ناحيةالقدرات و الإمكانيات التي توفرها آما أنها جاءت بين المستويين السابقين منالناحية التاريخية فقد بدأ مطورو مواقع ويب باستخدام الجافا سكريبت قبل أنتظهر بي اتش بي على الساحة لذلك ، أريد حقاً‏ أن تتبع الطريق الذياستخدمته شخصياً‏ للوصول ل بي اتش بي و هو ذات الطريق الذي اتبعه أشهرمطورو المواقع آذلكتعتبر الجافا سكريبت لغة برمجة من الوزن الخفيف ، بمعنى أن لديها قدراتلغات البرمجة الأخرى لكن باستبعاد القدرات العالية التي تقدمها لغات البرمجةالحقيقية إذن ، ألا تعتقد أن الجافا سكريبت ستكون مدخلاً‏ جيداً‏ بالنسبة لكلمن يقرأ هذا الكتاب دون أن يكون لديه خلفية برمجية سابقة ؟ بالتأآيد الإجابةنعم و الأجمل أن الجافا سكريبت و بي اتش بي تتفقان في آثير من الصيغالعامة التي سنتعرف عليها بعد قليلهل تذآر قاعدة التقنية المناسبة في المكان المناسب ؟ لقد ناقشناها فيالفصول السابقة من هذا الكتاب ، مرة أخرى نحن نتعلم الجافا سكريبت فيهذا الكتاب لأننا لن نستخدم بي اتش بي في آل صغيرة و آبيرة في مشاريعنافإذا آانت بي اتش بي تقدم ميزة تستغرق 20 جزء من الثانية حتى يكتمل ،بينما تقدم الجافا سكريبت نفس الميزة في 10 أجزاء من الثانية ، وقتها يجب أنتكون ذآياً‏ بما فيه الكفاية و تختار الجافا سكريبت ، حتى لو آنت تعشق بياتش بي أليس آذلك ؟ غالباً‏ سنستفيد من الجافا سكريبت في مشاريعنافي الجزء الذي يتطلب التأآد من صحة مدخلات المستخدم في النماذجForm ):.......!!(Validation•••إذن ، هل أنت مستعد لتعلم الجافا سكريبت الآن ؟ سيأخذ منك هذا الفصل وقتاً‏ أآثرمن الفصلين السابقين غالباً‏ ، لكن لا تحاول أن تتخطى الفصل للفصول التالية قبل أنتكمل ! هذه هي نصيحتي الشخصية لك ، و الخيار لك بالنهاية.سأحاول قدر الإمكان أن أرتب هذا الفصل بنفس الترتيب العام لفصول الكتاب التيتتناول أساسيات بي اتش بي ، حتى لا يختلف عليك التسلسل فقطقبل أن نبدأ بالتعرف على الصيغ العامة لكتابة أآواد الجافا سكريبت ، سنتناول بعضالمعلومات العامة عن الجافا سكريبت على هيئة نقاطآانتتم تطوير الجافا سكريبت بواسطة شرآة نت سكيبتدعى Live Script في البداية ، و مع انتشار لغة الجافا التي طورتها شرآة..(Netscape):•- 54 -

، SunJava Script ليستفيدوا•Sun انضم فريق تطوير لغة ال Live Script مع فريق عمل شرآةو أطلقوا عليها مسمىخرجوا لنا بلغة جديدة و هذا يفسر تشابه الجافا و الجافا سكريبتمن الانتشار الواسع للغة الجافا في آثير من الأمورعن آل من لغة الجافا Java و لفةتختلف الجافا سكريبتفالأولى من إنتاج شرآة Netscape و الثانية منالجاي سكريبتإنتاج شرآة Sun و الثالثة من إنتاج شرآة مايكروسوفت .سنضيف سطور الجافاالجافا سكريبت هي لغة برمجة لتطبيقات الويب فقط سكريبت في نفس الصفحات التي تحتوي على وسوم الهتملتدعم أغلب المتصفحات الحديثة أآواد الجافا سكريبت ، مما يجعلها تتغلبعلى الفيجوال بيسك سكريبت المدعومة من قبل متصفح الإنترنت اآسبلوررفقطنحن نحتاج لاستخدام بعض أآواد الجافا سكريبت – بالإضافة إلى لغة هتمللأن لغة الهتمل وحدها تعطينا صفحات ثابتة غير ديناميكية أما الجافا سكريبتفإن لها القدرة على إضافة محتويات تتغير تلقائياً‏ بتغير الوقت ، نوع المتصفح ،قيمة مدخلات المستخدم و هكذاتتمتع الجافا سكريبت بالقدرة على التحكم بالنتيجة بناء على الحدثيمكنك تنفيذ أمر معين عند الضغط على زر معين ، عند مرور مؤشرهذه بعضالفأرة فوق آائن معين ، عند تحميل الصفحة ، أو عند إغلاقها الأمثلة على الأحداثهناك نوعان من لغات برمجة الويب- هو المتصفحو العميل في حالتنا جهة العميلهذا النوع من اللغات يعتمد علىالذي تستخدمه لاستعراض الصفحة تنفيذ سطوره على جهاز المستخدم و ليس على المضيف الذي يحفظالصفحةو المضيف هو جهاز الشرآة التي تقدمجهة المضيفتحتاج هذه اللغات لوقت أطولخدمة الاستضافة لموقعك في الغالب حتى تصل النتيجة للمستخدم النهائي بطبيعة الحال لذلك نبتعد عنهاإذا توفر البديلتصنف الجافا سكريبت ضمن اللغات التي تنفذ جهة العميل . ‏(سنفصّل الحديثعن هذين النوعين في الفصول القادمة بإذن االله).‏–event )–.- غالباً‏!..!..Java Script. JScript..::(Client Side):(Server Side).... (drivenoo•••••لقد تكلمنا آثيراً‏!لنبدأ بكتابة بعض الأمثلة البسيطة...الصيغة العامة لإدراج آود الجافا سكريبت إلى صفحتك:.ذآرنا أننا سنكتب أسطر الجافا سكريبت داخل أسطر الهتمل ، و سنضيف الآنمعلومة بسيطة أخرى إننا نستخدم أحد وسوم هتمل الخاصة الذي يتيح لنا إدراجأآواد للغات خارجية ، ألا و هو الوسم هذا الوسم له وسم بداية و وسمنهاية ، آما أنه يأخذ متغير واحد هو اسم اللغة الخارجية التي سنستخدمها آماأنه قد يأخذ متغيراً‏ آخر إذا آانت أسطر الجافا سكريبت مكتوبة في ملف خارجيإذن هناك طريقتان لإدراج الجافا سكريبتإدراج الجافا سكريبت في نفس الصفحةلنراقب المثال التالي..:::1.- 55 -

شكل 45ستكون النتيجة آالتالي:6!JavaScriptشكل 46يحتوي على الأمرفالسطر رقم ليس هناك الكثير لنشرحه عن المثال أعلاه للدلالة على أن اللغةالقيمةو قد أخذ المتغيرالمستخدمة هي لغة الجافا سكريبتيحتوي على سطر آتب بلغة الجافا ، إنه يقوم بكتابة عبارة ‏"السلامالسطر رقم أريد أنلاحظ أن السطر خُتِم بالفاصلة المنقوطة عليكم"‏ على شاشة المتصفح أقول هنا أن المبرمجين في أغلب لغات البرمجة يضعون الفاصلة المنقوطة في نهاية آلسطر برمجي للدلالة على نهايته ، هذه الفاصلة المنقوطة شرط أساسي في اللغاتالأخرى و لا يعتبر الكود صحيحاً‏ بدونها ، لكنها على العكس من ذلك اختيارية فقط فيالجافا سكريبت و لا تكون أساسية إلا إذا أردت آتابة أآثر من أمر في سطر واحد فعليكحينئذ أن تفصلهم بفاصلة منقوطةالسطر رقم 8 يحتوي على وسم النهاية .ألم أقل لك بأن الأمر غاية في السهولة. (;)language.!..7- 56 -

معلومة إضافيةيمكنك إدراج الجافا سكريبت بنفس الأمر السابق مع تغيير بسيط ، هكذا :الأمر هناالنتيجة واحدة في النهاية ، اختر ما يعجبك !!إدراج الجافا سكريبت من ملف خارجي:2.تحدثنا سابقاً‏ عن تقنية السي اس اس – الفصل الثاني – و تحدثنا عن ميزة آتابة الكودفي ملف خارجي و إدراج اسمه فقط في الملفات التي تستخدمه لقد آانت الميزةالأساسية هي عدم الحاجة لتكرار نفس الكود في أآثر من موضع و بالتالي الحاجةللتعديل في أآثر من ملف عند الحاجة لتعديل شيء بسيط في الكودو الآن لدينا ذات الميزة ، و ذات السبب و الطريقة غاية في السهولة ، سنشرحها منخلال المثال الآتيأولاً‏ ، آيفية إدراج الملف الخارجي في صفحة الهتمل..:.:شكل 47.آما نلاحظ ، لقد استخدمنا المتغيردون آتابة أي شيء داخلهsrc لتمرير اسم الملف الخارجيثم أغلقنا الوسم.ثانياً‏ ، الملف الخارجي:شكل 48- 57 -

.هناك عدة أشياء يجب أن نلاحظها في المثال السابق ، أولاً‏ بالنسبة لاسم الملف ،لابد أنك لاحظت الامتداد js في نهاية الملف ، هذا هو امتداد ملفات الجافا سكريبتالخارجية ثانياً‏ نلاحظ أننا قمنا بكتابة الأسطر البرمجية وحدها بدون وسمإن إضافة هذا الوسم داخل الملف الخارجي يعتبر خطأ برمجي و أخيراً‏ بالنسبةللفاصلة المنقوطة ، هي اختيارية آما قلنا سابقاً‏، !.ثالثاً‏ ، النتيجة ستكون آالتالي:! تحذيرلتتجنب حدوث مشاآل مع المتصفحات التي لا تدعم الجافا سكريبت ، آل ما عليك هوأن تضيف الكود داخل وسم الملاحظة من الهتمل ، هكذا:إدراج آود الجافا سكريبت في رأس الصفحة):شاهدنا في الأمثلة السابقة طريقة إدراج الجافا سكريبت في جسم الصفحة مباشرةحيث ظهرت نتيجة الكود على شاشة المتصفح مباشرة أيضاً‏ و الواقع أنه ليسالمكان الوحيد الذي يمكننا إدراج آود الجافا سكريبت فيه ، حيث يمكننا إدراجه فيرأس الصفحة حيث لا ينفذ مباشرة و لكن ينفذ عن طريق استدعاءه لاحقاً‏ غالباً‏ مامعينة و بما أن رأس الصفحة هونستخدم هذه الطريقة عند تعريف دالة...(function)(body- 58 -

..الجزء الذي يتم تحميله أولاً‏ ، فإننا نضمن تحميل الدالة عند المستخدم قبل استدعائها.لاحظ أنه يمكننا إدراج الجافا سكريبت في رأس الصفحة ، في جسم الصفحة ، أو فيآلاهما أي أنه يمكنك إدراج أآثر من آود جافا سكريبت واحد في صفحة واحدةلنأخد مثالاً‏ يوضح آيفية إدراج الجافا سكريبت في رأس الصفحة.:شكل 49لم يختلف الأمر آثيراً‏ آما نلاحظ ، آل ما تغير هو مكان إدراج الوسم فقط.سنبدأ الآن بشرح الأشياء التي يمكنك إدراجها في أسطر الكود نفسه ، سنتعلمالبرمجة ذاتها الآن !المتغيرات‏..الخ)‏ .:المتغير هو مخزن مؤقت لخزن المعلومات ‏(حروف ، أرقام يصبح هذا المخزنمتوفراً‏ لك عندما تقوم بتعريفه في صفحتك لماذا نحتاج لهذه المخازن في برامجنا ؟لنفرض أننا نريد من المستخدم أن يدخل اسمه ، ثم نقوم نحن بطباعة هذا الاسمنحن إذن لا نعرف اسم المستخدم مسبقاً‏ لكننا يجب أن ننتهي من آتابة الكود قبلأن نسلم البرنامج للمستخدم إذاً‏ لابد أن نستخدم اسم المخزن الذي سنستقبل فيهاسم المستخدم بدلاً‏ من الاسم ذاته – الذي لا نعرفه بعد عندما يقوم المستخدمبتشغيل البرنامج أو فتح الصفحة و يقوم بإدخال اسمه فإن هذا الاسم سيتمتخزينه في مخزّن مؤقت – ينتهي بإغلاق الصفحة – ثم يقوم البرنامج بعرض الاسمالذي تم تخزينه في المخزن إذن ، نستطيع أن نعتبر المتغيرات مجرد صناديق سوداءمغلقة قد تحتوي على قيمة ، و قد تحتوي على لا شيء أيضاً‏ تبدأ حياة هذهالصناديق منذ تعريفها في الصفحة و تنتهي حياتها بإغلاق الصفحة.!...!–..–:لابد أنك تسأل نفسك الآن:!آيف أقوم بتعريف المتغير ؟!‏آالعادة الأمر غاية في السهولة أيضاً‏ .. سنستخدم الأمرعلامة المساواة ثم قيمة المتغير الابتدائية ، هكذاآما تستطيع تعريف المتغير بدون آتابة الكلمةvar:ثم اسم المتغير ثمVar variable_name = value: var- 59 -

variable_name = value: مثالشكل 50.قمنا بتعريف المتغير string1 و خزنا القيمة ‏"السلام عليكم"‏ في هذا المتغير ثم قمنابطباعة المتغير على الشاشةو الآن سنضيف بعض الأسطر إلى الكود السابق ، سنغير القيمة المخزنة ثم نعيدطباعتها :شكل 51تستطيع بالطبع استخدام أآثر من متغير في الصفحة الواحدةالمتغيرات):‏‏(لاحظ الأرقام في أسماءشكل 52ستكون النتيجة في الحالتين السابقتين هكذا:- 60 -

شروط تسمية المتغيرات:..تفرض علينا لغات البرمجة المختلفة شروطاً‏ معينة على الأسماء التي نختارهالمتغيراتنا و آذلك الحال بالنسبة للجافا سكريبت ، فيجب أن نراعي الأمور التالية:•يتكون اسم المتغير من حروف أو أرقام أو آلاهما ، آما يمكن أن يحتوي علىرمز الشرطة السفليةيجب أن يبدأ بحرف أو برمز الشرطة السفلية ‏.(مثال 1var يعتبر اسم خاطئ)‏‏(مثاليختلف اسم المتغير باختلاف حالة الأحرفيختلف عنفي الجافا سكريبت ‏(مثاليجب أن لا يكون آلمة محجوزةvar يعتبر اسم خاطئ لأنه عبارة عن أمر معروف في الجافا سكريبت)‏var1:::.(case sensitive)(reserved word). (_)(VaR1•••المعاملات:هي عبارة عن الإشارات المستخدمة لتنفيذ العمليات الرياضية أو الحسابية و آذلكالعمليات المنطقية . ‏(بعض الأمثلة على المعاملات تشمل(&& ، * ، - ، + :سنتحدث في هذا الجزء عن أنواع المعاملات ، طريقة استخدامها ، أفضلية الترتيب ،آل ذلك من خلال أمثلة واضحة آما سنرى :أنواع المعاملات:أ-‏ معاملات حسابية:..هي تلك المعاملات التي تنفذ عمليات حسابية رياضية آالجمع و الطرح و الضرب والقسمة و غيرهاالجدول التالي يقدم قائمة بهذه المعاملات:المعاملالعمليةيمكنك استخدام الأقواس للتغلب علىأسبقية تنفيذ عملية على أخرى .()- 61 -

:يقوم هذا المعامل بعملية ضرب عددين،‏مثالX=1;y=2;z=x*y;2::النتيجة المتغير z يحتوي على القيمةيقوم هذا المعامل بعملية قسمة عددين،‏مثالX=4;y=2;z=x/y;2:النتيجة المتغير z يحتوي على القيمةيقوم هذا المعامل بعملية قسمة عددين والاحتفاظ بباقي القسمة،‏ مثال:X=3;y=2;z=x%y;1::النتيجة المتغير z يحتوي على القيمةيقوم هذا المعامل بعملية جمع عددين،‏مثالX=1;y=2;z=x+y;3::النتيجة المتغير z يحتوي على القيمةيقوم هذا المعامل بعملية طرح عددين،‏مثالX=1;y=2;z=x-y;1-:النتيجة المتغير z يحتوي على القيمةيقوم هذا المعامل بإضافة واحد إلى قيمةالمتغير الذي يسبقه ، مثالX=1;x++;2::النتيجة المتغير x يحتوي على القيمةيقوم هذا المعامل بطرح واحد من قيمةالمتغير الذي يسبقه ، مثالالنتيجةصفرX=1;x--;::المتغير x يحتوي على القيمة*/%+-++--ب – معاملات منطقيةالمعاملالعمليةيقوم هذا المعامل بعملية ‏"و"‏ المنطقية)(AND ، مثال :X=1;y=2;z=(x1);True:)(OR ، مثال :X=1;y=2;z=(x< y || y>1);True:النتيجة z يحتوي على القيمةيقوم هذا المعامل بعملية ‏"أو"‏ المنطقيةالنتيجة z يحتوي على القيمةيقوم هذا المعامل بعملية ‏"النفي"‏المنطقيةالنتيجة(NOT) ، مثال :X=1;y=2;z=!(x

من المستحسن أن نأخذ مثالاً‏ حقيقياً‏ على هذا النوع من المعاملات:شكل 53ج - معاملات المساواة::المعاملالعمليةهذه هي إشارة المساواة التياستخدمناها أآثر من مرة لإعطاء قيمةللمتغير ، مثالX=1;1::النتيجة المتغير x يحتوي على القيمةيقوم هذا المعامل بإضافة القيمة الأصليةللمتغير على القيمة التي تقع يمين علامةالمساواة ‏،مثالالنتيجةX=1;x += 2;3::(2+1)المتغير x يحتوي على القيمةيقوم هذا المعامل بطرح القيمة التي تقعيمين علامة المساواة من القيمة الأصليةللمتغير ‏،مثالالنتيجةX=2;x -= 1;1:(2-1)المتغير x يحتوي على القيمةيقوم هذا المعامل بضرب القيمة الأصليةللمتغير في القيمة التي تقع يمين علامة=+=-=*=- 63 -

المساواة ‏،مثالX=2;x *= 2;4::النتيجة المتغير x يحتوي على القيمة(2*2)يقوم هذا المعامل بقسمة القيمة الأصليةللمتغير على القيمة التي تقع يمين علامةالمساواة ‏،مثالالنتيجةX=4;x /= 2;2::(4/2)المتغير x يحتوي على القيمةيقوم هذا المعامل بقسمة القيمة الأصليةللمتغير على القيمة التي تقع يمين علامةالمساواة و يخزّن باقي القسمة،مثالالنتيجة:X=3;x %= 2;:(3%2)المتغير x يحتوي على القيمة 1/=%=د-معاملات المقارنةالمعاملالعمليةيقوم هذا المعامل بمقارنة تساوي قيمتينو يخزّن القيمة false بناء على ذلكX=1;y=2;z=(x==y);true أو، مثال :: النتيجة.falseالمتغير z يحتوي على القيمةيقوم هذا المعامل بمقارنة عدم تساويقيمتين و يخزّن القيمةعلى ذلك ، مثالالنتيجةtrue أو false بناءX=1;y=2;z=(x !=y);::.trueالمتغير z يحتوي على القيمةيقوم هذا المعامل بمقارنة قيمتين و يخزّنالقيمة false بناء على ذلك ، مثالX=1;y=2;z=(x < y);true أو:: النتيجة.trueالمتغير z يحتوي على القيمةيقوم هذا المعامل بمقارنة قيمتين و يخزّنالقيمة false بناء على ذلك ، مثالX=1;y=2;z=(x > y);true أو:: النتيجة.falseالمتغير z يحتوي على القيمةيقوم هذا المعامل بمقارنة قيمتين و يخزّنالقيمة false بناء على ذلك ، مثالtrue أو::==!=

النتيجةX=1;y=2;z=(x = y);true أو:: النتيجة.falseالمتغير z يحتوي على القيمة>=ه - المعاملات النصية:المعاملالعمليةيقوم هذا المعامل بدمج ‏(إضافة)‏ متغيريننصيين ، مثال:str1=”he”;str2=”llo”;str3=str1+srt2;:. helloالنتيجةالمتغير str3 يحتوي على القيمة+ه - المعامل الثلاثي::المعاملالعمليةيقوم هذا المعامل باختبار شرط ما ، فإذاآان متحققاً‏ فإنه يخزّن القيمة التي تسبقالنقطتان الرأسيتان و إن لم يكن متحققاً‏فإنه يخزّن القيمة التي تلي النقطتانالرأسيتان ، مثالالنتيجةX=1;y=2;max=(x>y)?x:y;:.2المتغير max يحتوي على القيمة(condition)?value1:value2أوامر التحكم في البرنامج.::.يتكون البرنامج أو آود الجافا السكريبت من عدة أسطر برمجية تنفذ الواحد تلو الآخربالترتيب الذي نكتب فيه هذه السطور لكن تصادفنا أحياناً‏ بعض البرامج التي نحتاجلاتخاذ بعض القرارات فيها مثلاً‏ قد نحتاج لاختبار قيمة المتغير x فإذا آان أآبر منالعدد 10 فإننا سنقوم بطباعته ، أما إذا آان أقل من عشرة فإننا لن نقوم بطباعتهللقيام بمثل هذه القرارات ، فإننا نستخدم أوامر التحكم في البرنامج و هي الجملالشرطية و جمل التكرار .. سنشرح آلاً‏ من الطريقتين بالأمثلة!:- 65 -

الجمل الشرطية.:.:تستخدم الجمل الشرطية لتنفيذ الأمر المناسب وفق شرط معين فنحن نقول فيلغتنا العربية إذا ‏(تحقق الشرط المعين)‏ فافعل أمراً‏ معيناً‏ ، و إذا ‏(لم يتحقق الشرط)‏فافعل أمراً‏ آخرو باللغة الإنجليزية نقولIf (condition){Some statements}::: ifهناك ثلاثة أنواع من أوامر الشرطأ-الجملةنستخدم هذه الجملة لتنفيذ أمر أو عدة أوامر إذا تحقق شرط معين ، لنراقب المثالالتالي :شكل 54ب-الجملة : if .. elseنستخدم هذه الجملة لتنفيذ أمر أو عدة أوامر إذا تحقق شرط معين ، و لتنفيذعدة أوامر إذا لم يتحقق الشرطأمر أو.- 66 -

شكل 55ج-الجملة : switchنستخدم هذه الجملة لتنفيذ أمر أو عدة أوامر إذا تحققت حالة معينةسنأخذ أولاً‏ الصيغة العامة للجملة.:switch (expression){case label1:code to be executed if expression = label1breakcase label2:code to be executed if expression = label2breakdefault:code to be executedif expression is differentfrom both label1 and label2}switch..– في..::شرح المثال استخدمنا الكلمة و هي آلمة محجوزة تستخدم لتنفيذ الأمرالشرطي ثم نضع فيما بين القوسين عبارة ‏(غالباً‏ اسم متغير)‏ ثم نفتح قوساً‏ معقوفاً‏ثم نسرد الاحتمالات المختلفة للقيم التي قد يأخذها المتغير آل احتمال نسبقهبالكلمة المحجوزة case و نختتمه بالأمر Break حتى يتوقف تنفيذ الأوامر عندهحالة تحقق الشرط و نستخدم الكلمة المحجوزة default آآخر خيار حتى يتم تنفيذهفي حالة عدم تحقق أي حالة من الحالات المكتوبة لنأخذ مثالاً‏ حقيقياً‏ لتتضح الصورةبشكل أوضح- 67 -

شكل 56...معلومة إضافيةقد يكون استخدام الأمر break مألوفاً‏ لديك إذا آنت من مبرمجي لغة السي ، لكن قديكون غريباً‏ عليك إذا آنت من مبرمجي لغة الباسكال التي تقوم بهذه الوظيفة تلقائيًادون الحاجة لهذا الأمر !لاحظ الحاجة لهذا الأمر سواء آنت من الفريق الأول أو الفريق الثاني و حتى إن لم تكنمن أي الفريقين ‏!!يمكنك اآتشاف السبب بشكل أوضح من خلال إزالة الأمر من الجملةجمل التكرار:لنتخيل أنك تريد آتابة العبارة ‏"بسم االله الرحمن الرحيم"‏ عشر مرات ، فهل ستضطرإلى آتابة عشر أسطر مختلفة لتنفيذ أمر هو في الحقيقية مكرر ؟- 68 -

تقدم لنا لغة الجافا سكريبت خاصية أوامر التكرار ، التي تقوم بتكرار أمر أو عدة أوامرأآثر من مرة .لدينا ثلاث أنواع من جمل التكرار أيضاً‏أ-الجملة.::: For:تستخدم لتنفيذ أمر أو عدة أوامر عدد معين من المراتالصيغة العامة للجملة‏(زيادة العداد ‏;شرط ‏;البداية)‏ for{بعض الجمل التنفيذية}مثال حقيقيشكل 57ستكون النتيجة هكذا ‏(جرب بنفسك):‏- 69 -

ب-الجملة.شكل 58:: whileتستخدم لتنفيذ أمر أو عدة أوامر طالما أن شرطاً‏ معيناً‏ متحققاً‏الصيغة العامة للجملة‏(شرط)‏ while{بعض الجمل التنفيذية}مثال حقيقي:شكل 59- 70 -

لابد أنك توقعت مسبقاً‏ بالنتيجة ؟جرب بنفسك الآن..و ستحصل على النتيجة التالية:ج-الجملةشكل 60.: do .. whileتستخدم لتنفيذ أمر أو عدة أوامر مرة واحدة ، ثم تختبر تحقق شرطاً‏ معيناً‏ و تكرر تنفيذالأوامر طالما أن الأمر متحققاً‏الصيغة العامة للجملةمثال حقيقيdo{:بعض الجمل التنفيذية}‏(شرط)‏ while:شكل 61- 71 -

.60و النتيجة موجودة في الشكل رقم تحذير!‏ هناك فرق في طريقة عملwhile إذا آان هذا الفرق غير واضح لك حتى الآن فأنصحك بالقيام بالمزيد من الأمثلةdo .. و while.أوامر الإخراج...:اطلعنا على الدالة write() في أغلب أمثلتنا السابقة أعتقد أنها أصبحت واضحة لكبعد تكرارها أآثر من مرة . سنتناول في هذا الجزء تفاصيل إضافية حول آيفية استخدامهذه الدالة لكتابة بعض الأحرف الخاصةلابد و أنك لاحظت أننا ندرج النص المراد آتابته بين علامتي تنصيص ‏"النص هنا"‏ ..!.إذاً‏ رمز التنصيص يشكل بداية و نهاية النص المراد آتابته ماذا لو أردنا استخدم رمزالتنصيص داخل النص المراد لكتابته – آي يظهر على الشاشة ؟ إذا استخدمنا رمزالتنصيص مباشرة ، سيعتقد المتصفح أن الجملة المراد آتابتها انتهت بسبب علامةالتنصيص لذا فإننا نستخدم طريقة خاصة للتعامل مع رمز التنصيص و غيره من الرموزالخاصة آل ما علينا القيام به هو أن نسبق الرمز الخاص بعلامة الشرطة المائلةراقب الجدول التاليالرمز. (\)\""\&&\\ \:ماذا تستخدمقد نحتاج أحياناً‏ لكتابة بعض النصوص الطويلة التي تأخذ مساحة آبيرة من طول الصفحةمما يمنعنا من قراءة الجملة بسهولة أليس آذلك ؟الحل يكمن في استخدام خاصية مفيدة تقدمها لنا الجافا سكريبت ، حيث يمكننا آتابةالنص على سطرين منفصلين ، مع وضع رمز الشرطة المائلة في آخر السطر الأولهكذا.(\)...:لاحظ أنه لا يمكنك آتابة الأمر السابق بالطريقة التالية\ السلام")‏document.write‏("!عليكمdocument.write \‏("!السلام عليكم")‏:لنأخذ مثالاً‏ يوضح ما تم شرحه حتى الآن:- 72 -

شكل 62يجب أن تفرق بين الشرطة المائلة التي وردت في آخر السطر و الشرطة المائلة التيوردت قبل علامة التنصيص في منتصف الجملة النصية نتيجة المثال ستكون هكذا:.الدوالشكل 63:أبسط تعريف للدالة قد يكون بأنها مجموعة من الأسطر البرمجية التي نعطيها اسماً‏معيناً‏ يمكننا من استخدامها أآثر من مرة بمجرد آتابة سطر واحد يحتوي على اسمها .هناك نوعين من الدوال:- 73 -

:(built-in)(write())و المقصود بها تلك الدوال التي تقدمها لنا الجافا سكريبتأ-دوال جاهزةمثال الدالة التي تعرفنا عليها خلال هذا الفصل و آذلك الدالةالتي تقوم بإظهار مربع تحذير.(alert())...:ب-دوال خاصة بالمستخدم ‏:حيث يقوم المستخدم بتعريف دالة خاصة به ؛ يمكنهاستخدامها أآثر من مرة بعد ذلكسنتناول هنا آيفية إنشاء دوال بسيطة خاصة بك أنت!..!هناك صيغة عامة للدوال قبل أن نأخذ هذه الصيغة ، أحب أن أذآرك بأن عليك تعريفالدالة قبل استخدامها لذا يجب أن تضع التعريف حسب الصيغة العامة التيسنتناولها بعد قليل – في رأس الصفحة ، حتى تضمن تحميلها قبل مناداتها من خلالصفحتك الآن ، لقد آنا نكتب نصاً‏ بداخل قوسي الدالة write() أليس آذلك ؟ هذايعني أننا آنا نرسل هذا النص للدالة لكي تقوم بكتابته على الشاشة ، هذا النصيمكن اعتباره متغيراً‏ نقوم بإرساله للدالة إذن أنت تعرف الآن أن الدوال قد تأخذ متغيراً‏، و قد لا تحتاج لمتغير أيضاً‏ لذلك سنأخذ أولاً‏ الصيغة العامة للدوال التي تحتاجلمتغيرات‏(..,المتغير الثاني,المتغير الأول)اسم الدالة function{–.!:.بعض الجمل التن فيذية}و هذه هي الصيغة العامة للدوال التي لا تحتاج لمتغيرات ‏(لاحظنا أننا مازلنا بحاجةللأقواس):‏‏()اسم الدالة function{بعض الجمل التنفيذية}و هذا مثال حقيقي ‏(دالة تقوم باستقبال متغيرين ، تطبع حاصل جمعهما):‏- 74 -

شكل 64هكذا ستكون النتيجة:شكل 65إذن ، هلا لاحظت آيف ننشأ الدالة ؟ ثم آيف يمكننا أن نستدعيها فيما بعد ؟..!..يمكنك إضافة المزيد إلى دوالك نعم تستطيع أن تجعل الدالة تعيد قيمة معينة عنداستدعائها قد تجعلها تعطينا ناتج الجمع مثلاً‏ بدلاً‏ من طباعتهلنأخذ هذا المثال الذي يوضح ذلك!..:- 75 -

شكل 66آما تستطيع آتابة المثال السابق بالطريقة التالية:شكل 67- 76 -

eturnفي آلا المثالين :المطلوباستخدمنا الأمرثم اسم المتغير الذي يحمل الناتج.التأآد من بيانات النماذج! سنحتاج:أصدقك القول إذا قلت بأني شرحت الفصل آاملاً‏ من أجل هذا الجزء تقريباً‏للكثير من النماذج في مشاريع البي اتش بي يمكننا أن نستخدم البي اتش بينفسها للتأآد من صحة البيانات المستخدمة في النموذج ، لكن هذا يعني بأن علىالمستخدم أن يرسل بياناته إلى الجهاز الخادم أولاً‏ ، ثم ينتظر معالجة البيانات هناكلمعرفة ما إذا آانت صالحة أم لا ثم يأتيه الرد بينما ، باستخدام الجافا سكريبتالتي تعتبر من اللغات التي يتم تنفيذها على جهاز العميل مباشرة – لن نخسر آل هذاالوقت لذلك فالجافا سكريبت هي الخيار المناسب للتأآد من بيانات النماذج أنتمتقنع بذلك الآن ، و تريد أن تعرف الطريقة .. سنعرف ذلك الآن–.:..!!العملية تتكون من خطوتين:‎1‎‏-تعريف الدالة التي تقوم بالتأآد من صحة البيانات المدخلة في رأس الصفحة‎2‎‏-استدعاء الدالة في وسم النموذج.(head):(form)validate()" onsubmit="return حيث أنفي الخطوة الأولى .إن أفضل طريقة لتعلم ذلك هي عن طريق بعض الأمثلة الحقيقيةمثالمن خلال المتغير التاليvalidate هي اسم الدالة التي قمنا بتعريفها..:التأآد من ادخال بريد إلكتروني صحيحشكل 68- 77 -

"@":.شرح المثال يقوم هذا المثال بالبحث عن رمز في البريد الإلكتروني المدخل فيمربع النص فإذا ما وجد هذا الرمز فإنه يعتبر البريد صحيحاً‏ و يسمح بإرسال البياناتإلى الصفحة ،(script1.php) و إذا لم يجده فإنه يعتبر البريد المدخل غير صحيحاً‏ و يظهررسالة تحذير بالإضافة إلى أنه سيعيد القيمة false آنتيجة للدالةمثال.:إدخال قيمة عددية لا تزيد عن رقم معين.شكل 69:شرح المثال يقوم المثال بالتأآد من قيمة الرقم المدخل في مربع النص إذا آانتالقيمة أآبر من المائة فإنه يقوم بإظهار رسالة تحذير و يعيد القيمة false آنتيجة للدالة، إذا آانت القيمة أقل من أو تساوي المائة ، فإنه يقبل القيمة و يرسلها للملف. script1.phpالتاريخ و الوقت:!..يمكنك أيضاً‏ الاعتماد على الجافا سكريبت في إظهار تاريخ اليوم على الصفحة الأولىلموقعك لذا سنتطرق بشكل سريع لكيفية الاستفادة من الجافا سكريبت في هذهالمسألةتحذير(client-side)!!و لهذاأنت تعلم بأن الجافا سكريبت هي إحدى لغات جهات العميلالسبب نفضل استخدامها في بعض الأمور البسيطة حتى لا نهدر وقتاً‏ يضر بجودةمشاريعنالكن يجب أن ننتبه لمسألة هامة تتعلق بالوقت و التاريخ هذه المسألة تعود لاحتمالإعداد الوقت بشكل خاطئ على جهاز العميل و بالتالي فإن الجافا سكريبت يستخدم..- 78 -

!التاريخ الخاطئ المعد على الجهاز و بالتالي قد تجد أن صفحتك تقول بأن اليوم هوالأول من السنة العاشرة للهجرة إذا آان جهاز العميل يقول ذلك. Date!يمكننا الحصول على تاريخ اليوم و التوقيت الحالي عن طريق الكائن و للقيامبذلك يجب أن ننشأ نسخة من هذا الكائن عن طريق استخدام الأمر new ثم نستخدمبعض الدوال التي يحتويها هذا الكائن لكي نحصل على تاريخ اليوم بشكلمنفصل ، رقم الشهر بشكل منفصل ، السنة بشكل منفصل أيضاً‏ ، و آذلك الوقتبالساعات و الدقائق و الثواني . سيبدو الأمر سهلاً‏ لمن اعتاد على لغات البرمجةالشيئية من أمثال السي++‏ (OOP) و قد يبدو مربكاً‏ قليلاً‏ لمن لم يعتد عليها ، لكنبالتأآيد سيبدو لك الأمر سهلاً‏ بعد قراءة المثال الآتي بتمعن(31-1):شرح المثالnew!.(31-1)(11-0)GetFullYear() ، للحصولDateشكل 70:في البداية قمنا بإنشاء نسخة من الكائن بواسطة الأمر و أعطينا هذهالنسخة الاسم الآن هذا المتغير ليس متغير عادي إنه عبارة عن نسخة منآائن ، هذا الكائن يحتوي على متغيرات و يحتوي على دوالسنستفيد من الدوال التي يحتويها هذا الكائن : للحصول على تاريخ اليومنستخدم الدالة GetDate() ، للحصول على رقم الشهر الحالي نستخدم الدالةGetMonth() ، للحصول على السنة الحالية نستخدم الدالة، للحصول على الدقائق الحاليةعلى الساعة الحالية نستخدم الدالةمع ملاحظة أننا قمنا بإضافة واحد صحيح إلى رقمنستخدم الدالةالشهر حتى يعطينا الرقم الصحيح للشهر(‏‎0‎‏=يناير ،GetHours(). date1و هذه هي نتيجة المثال‎1‎‏=فبراير)‏ .. GetMinutes():- 79 -

شكل 71اقرأ الجدول التالي لمزيد من الدوال المفيدة الخاصة بالتاريخ و الوقتالدالة:الوظيفةللحصول على التاريخللحصول على اليوم‏=الأثنين الخ)‏للحصول على الشهرفبراير)‏للحصول على السنةللحصول على السنة الكاملةللحصول على الساعاتللحصول على الدقائقللحصول على الثوانيللحصول على أجزاء الثانيةللحصول على الوقت بأجزاء الثواني ‏(منذتاريخللحصول على الفارق الزمني بين توقيتالجهاز و توقيت جريتنشلتحويل التاريخ إلى سلسلة نصية( 31-1)getDate()6-0) ‎0‎‏=الأحد ، ، 1getDay()...-0) ‎0‎‏=يناير ، 11 ، 1getMonth()=( 99-0)getYear()( 9999-0)getFullYear()( 23-0)getHours()( 59-0)getMinutes()( 59-0)getSeconds()( 999-0)getMilliseconds()getTime()(1970-1-1getTimezoneOffset()(). toString()الملاحظات :- 80 -

(comment)..داخللا يمكننا أن نختتم هذا الفصل قبل أن نشرح آيفية إدراج ملاحظةأآواد الجافا سكريبت الطريقة مشابهه لطريقة الملاحظات التي تعلمناها في الفصلالسابق – سي اس اسالمثال التالي يوضح طريقتين مختلفتين لإدراج الملاحظات:الخلاصة.:تعرفنا في هذا الفصل على لغة الجافا سكريبت نحن نعرف الآن أن الجافا سكريبتهي لغة برمجة من الوزن الخفيف ، نعرف آيفية تعريف متغيرات جديدة ، آيفيةالاستفادة من المعاملات المختلفة ، آيفية استخدام أوامر الشرط و أوامر التكرار والأهم من هذا آله أصبحنا نعرف متى يجب علينا استخدام الجافا سكريبت بدلاً‏ منبي اتش بيلم يكن الفصل خفيفاً‏ مثل الفصل السابق ؟ ربما ، لكنك استفدت الكثير و اآتسبتقاعدة ممتازة للبدء في تعلم لغة البي اتش بي .المراجع.:.:هذا الكتاب غير مخصص للغة الجافا سكريبت لذلك لم نتطرق لكل ما يخصها ، إذا آنتمهتماً‏ بتعلم المزيد عن الجافا سكريبت ، يمكنك الرجوع لبعض هذه الكتب:- Professional JavaScript with DHTML, ASP, CGI, FESI, NetscapeEnterprise Server, Windows Script Host, LiveConnect and Java bySing Li, Andrea Chirelli, Stuart Updegrave, Cliff Wootton, NigelMcFarlane, Mark Wilcox, Paul Wilton, James De Carli (Wrox Press)- Beginning JavaScript by Paul Wilton (Wrox Press)- JavaScript Bible by Danny Goodman (Hungry Minds, Inc)- 81 -

الباب الثاني:مدخل للغة PHPمقدمة الباب الثانيبعد أن انتهينا من مداخل للغات أخرى ، في الفصل السابق ، سندخل الآن في لغة بياتش بي . هذا الباب عبارة عن مدخل للغة ، سنتناول في الفصل الرابع بعضالمعلومات حول آيفية بداية اللغة مع مقارنة بينها و بين اللغات المنافسةآذلك الفرق بين اللغات جهة المزود و اللغات جهة العميل و بعض المعلومات التي توضحآيفية تنفيذ صفحات البي اتش بي التي سنكتبها فيما بعد الفصل الخامس يقدمطريقة واضحة لتنصيب البي اتش بي على جهازك الفصل السادس يقدم طريقةواضحة لتنصيب الماس اس آيو ال. سنتناول... (MySQL)- 82 -

الفصل الرابع:‏آيف و متى و لماذا PHP ؟!عنوان هذا الفصل يحتوي على ثلاثة أسئلة ، يفترض أننا بعد أن أنهينا الثلاثة فصولالسابقة تكوّنت لدينا مثل هذه الأسئلة ‏(آيف ؟ متى ؟ لماذا ؟)‏ و العديد من الأسئلةالأخرى التي تبحث عن إجاباتها ‏.إذا آانت هذه الأسئلة قد تبادرت إلى ذهنك ، فاسمحلي أن أحييك يا سيدي\سيدتي إذ لا ينبغي عليك أن تبدأ بالجزء البرمجي من اللغةقبل أن تعرف تاريخها ، مدى انتشارها ، تقارنها بغيرها من اللغات المنافسة-‏ و ماأآثرها - ، يجب أن تحدد الآن إجابة للسؤال التالي هل أنت مقتنع بهذه اللغة بناءعلى معلومات منطقية ؟ هل تستطيع الإجابة على سؤال لماذا تتعلم PHP ؟ سيقدملك هذا الفصل أجوبة لكل هذه الاستفسارات بإذن االله .. سنحاول أن نستعرض واقعالشبكة العنكبوتية بشكل عام أولاً‏:.:.عندما نقول إنترنت ، فإن مصطلح ‏"شبكة الشبكات"‏ يتبادر إلى أذهاننا بسرعة أيضاً‏نستطيع أن نقول أن هذه الشبكة مكونة من نوعين من الأجهزة أجهزة خادمة و أجهزةتتمثل مهمة الأجهزة الخادمة في حفظ المعلومات(المواقع)‏عميلةعلى أجهزتها التي تكون عادة متصلة بالشبكة على مدار الأربع و عشرين ساعة ، وبالطبع فإن إمكانيات الجهاز الخادم و جودة طريقة الاتصال بالشبكة تكون عالية حتىتتحمل الطلبات الكثيرة على المعلومات المحفوظة على هذا الجهاز هذه الأجهزةتكون تابعة لشرآات الاستضافة المختلفة عبر أنحاء العالم و بالإضافة إلى المكوناتالصلبة العالية التي تتمتع بها هذه الأجهزة ، فإنها تحتوي أيضاً‏ على نوعية خاصة منالبرامج تجعل هذا الجهاز خادم حقيقي ، يشمل ذلك نظام تشغيل يعتمد عليه منناحية الأداء و الأمان ، برنامج تحويل النظام إلى خادم ‏(أشهر برنامج بهذا الخصوص هوبرنامج الأباتشي Apache المجاني و المفتوح المصدر)‏ ، برنامج لترجمة اللغات البرمجية- برنامج لكلالتي يدعمها هذا الجهاز ‏(من أمثاللغة على حدهأما الأجهزة العميلة ، فهي ليست سوى أجهزتنا التي نتصل من خلالها بالشبكةهذه الأجهزة لا يتطلب منها أن تكون بمواصفات عالية ، آما أنه لن تحدث آارثة لو تمقطع الاتصال بين هذا الجهاز و بين الشبكة البرامج المطلوبة على هذا الجهاز تشملنظام التشغيل ‏(أياً‏ آان)‏ ، متصفح الإنترنتنتطرق الآن لطريقة اتصال هذين النوعين مع بعضهما يقوم الجهاز العميل ‏(من خلالالمتصفح)‏ بطلب عنوان معين ، هذا العنوان يكون عادة عبارة عن حروف تشكل اسمموقع مثل : www.c4arab.com و الذي يشير بدوره إلى رقم تعريفي خاص و هذاالرقم يشير بدوره إلى جهاز خادم معين داخل شبكة معينة و عند الاتصال ببرنامجفإن هذا الاتصال يتم عبر منفذ معينمحددو في الواقع فإنه يوجد نوع ثالث من الأجهزة هو مخزن قواعد البيانات الذي يكون متصلاً‏بالجهاز الخادم فقط بحيث يتحقق نظام الشبكات ذات الثلاث طبقات.3-Tier(IP)).:.:(PHP , Perl , ASP , ColdFusion :..:(Port)... (server/client).MySQL) مثلاً)‏. (Architecture:- 83 -

أ-‏معلومة إضافيةسنتعلم في الفصول القادمة آيفية تنصيب برامج الجهاز الخادم على أجهزتناالعميلة لتصبح بدورها أجهزة خادمة أيضًا ‏(بشكل شخصي لك أنت فقط و لأغراضالتجربة و التعلم)‏ .لو نظرنا للشبكة بشكل تاريخي ، فإننا سنلاحظ أن نظام الأجهزة العميلة \ الأجهزةالخادمة لم يتغير أبداً‏ خلال السنين الماضية ، الشيء الوحيد الذي اختلف في هذاالمجال هو نوعية البرامج التي نحتاج لتنصيبها على الجهاز الخادم ، حيث أن ظهور لغةجديدة يستلزم تنصيب البرامج الداعمة لها ‏(ينطبق ذلك في بعض الأحيان على الأجهزةالعميلة أيضاً)‏ .الشكل التالي يوضح لنا ما ذآرناه بطريقة مصورة :نظامالتش غيلالمتصفحمخزنقاعدةالبياناتنظامالتشغيلبرامجبرنامجالخادمأخرىشبكةنظامالتشغيلالجهاز العميلالجهاز العميلالمتصفحالجهاز الخادمنظامالتشغيلالمتصفحالجهاز العميلشكل 72.؟ هل تغيرت هي‏(المواقع)‏ ماذا عن نوعية المعلومات التي يحفظها الجهاز الخادم الأخرى ؟في الواقع – و آما ذآرنا في جزء سابق من هذا الكتاب – فإن هذا المحتوى في البدايةآان موجها للعلماء بالدرجة الأولى و آان عبارة عن صفحات نصية فقط ، الاهتمام موجهآانت اللغة المستخدمة حين ذاك هي لغة الهتملعلى المعلومات أآثر من الشكل مع مرورهذه الصفحات آانت تحتوي على روابط للتنقل من معلومة لأخرى ظهرت تقنيات مختلفة لتحسين الوضعالوقت ، أصبحنا بحاجة إلى المزيد سنناقشها فيما يلي)...:!:.:. (HTMLيمكن تقسيم اللغات إلى نوعين رئيسيينأ-اللغات جهة العميليطلب المستخدم صفحة معينة ، يتم جلب هذه الصفحة ‏(المعلومة)‏ من القرص الصلبللجهاز الخادم ثم يقوم العميل ‏(المتصفح)‏ بترجمة هذه الصفحة إلى معلومات تظهرلدى جهاز المستخدم لاحظ أننا احجتنا لإرسال طلب واحد فقط انظر الشكلميزة هذا النوع من اللغات هي السرعة في التنفيذ و عيبه أن المصمم ليس لديه تحكمآامل في نوعية المتصفح المستخدم لترجمة ما آتبه من أآواد !. (73).- 84 -

‏(الخادم)‏ :.ب-اللغات جهة المزوديطلب المستخدم صفحة معينة ، يتم جلب هذه الصفحة ‏(المعلومة)‏ من القرص الصلبللجهاز الخادم ثم يقوم الجهاز الخادم بترجمة المعلومات المطلوبة و تحويلها إلى لغةالهتمل ثم يرسلها للعميل انظر الشكل ميزة هذا النوع من اللغات هو أنلدينا تحكم أآبر في البرنامج المستخدم للترجمة ، لكن يوجد عيوب تتمثل في زيادةالوقت المطلوب لوصول الاستجابة ‏(قد تكون أجزاء من الثانية ، لكنها تهمنا.(!73) ب-‏ .(القرص الصلبالخادمالمترجمالمتصفحجهازالمستخدمالقرص الصلبالخادمالمترجمالمتصفحجهازالمستخدم1421323لغات جهة العميلشكل ألغات جهة الخادمشكل بHyper Text Markup:شكل 73.HTMLتشير الأحرف الأولى من اسم اللغة إلى الكلمات الإنجليزيةاللغةهذه اللغة هي ، التي تشير إلى ‏(لغة ترميز النص التشعبي)‏ . تدعم جميع المتصفحات الموجودة الوسوم الأساسية لهذه اللغةالأولى على الشبكة يحدث هذامع وجود بعض الوسوم القليلة التي قد تكون مدعومة من متصفح دون آخر عادة بسبب إضافة المزيد من الوسوم بشكل سريع أو بسبب أن الوسم منتج منالشرآة المصنعة للمتصفح و بالتالي تكون داعمة له في بقية منتجاتها أيضاً‏ بينما لاما الذي ينقص هذه اللغةتدعمه بقية الشرآات المنافسة . هنا لابد أن نسأل أنفسنا ؟ و لماذا نحتاج لحلول أخرى قد لا تكون مدعومة من جميع المتصفحات أو قد تحتاجبعض الوقت لإتقانها ؟لغة الهتمل هي لغة تنتج محتوى ثابتو الجواب الواضح هو محدودية هذه اللغة فالجملة التي يكتبها مصمم الموقع ستظهر آما آتبها لدى جميع المستخدمين و فيو الذي يشير إلى وقت آتابته لهذهلنفرض أنه آتب ‏"الوقت الآن آل وقت الجملة ، ماذا سيحدث عندما يطّلع المستخدم على صفحته بعد ساعة ؟ ستظلالساعة تشير إلى الخامسة و أربعون دقيقة ‏!بينما آان بإمكاننا أن نجعل هذا المحتوىمتحرك يتغير بتغير الزمن أو بتغير المستخدمعلى فرض عدمالعيب الآخر للغة الهتمل أنها لا تفصل المحتوى عن التنسيق استخدام تقنية السي اس اس – بينما يوجد حلول أخرى تقوم بذلكالحل قد لا يكون بالإستغناء عن هذه اللغة تماماً‏ لكن بدمجها مع لغات أخرىالحاجة – مثل لغات البرمجة الخفيفة ‏(الجافا سكريبت و شبيهاتها)‏ أو لغات البرمجةالثقيلةبناءً‏ على المقاييس الصادرة عن جمعية w3c فإن لغة الهتمل سيتم استبدالها قريباً‏بالجيل الثاني من هذه اللغة(Language . هذه اللغة لا تختلف آثيراً‏ عن لغتنا إلا بإضافة بعض الشروط على طريقةهذه اللغة تعتبر لغة من اللغات التي تنفذ جهة العميل ، حيث أنآتابة الوسوم المتصفح هو المسؤول عن ترجمة وسوم الهتمل ‏(يتجاهل أي وسم لا يفهمه عادة)‏ .– بحسب.–.:!"5:40EXtensible Hyper Text Markup.:=XHTML)) PHP,ASP‏…الخ)‏ ..Language!- 85 -

.للاطلاع على مزيد من المعلومات حول لغة الهتمل يرجى مراجعة الفصل الأول منهذا الكتابDynamic Hyper.:DHTMLتشير الأحرف الأولى من اسم اللغة إلى الكلمات الإنجليزية، التي تشير إلى ‏(لغة ترميز النص التشعبي الآلية)‏ظهرت هذه اللغة آحل لثبات المحتوى في لغة الهتمل حيث أصبح بإمكان المصمم أنيضيف بعض الحرآة لصفحته الأمثلة على مثل هذه الإضافات آثيرة جداً‏ و محدودةبخيال المصمم فقط يمكنك أن تجعل إحدى مكونات صفحتك تستدير باتجاه معين ،تستطيع أنتغير لون العناصر ، تضيف تأثير الأمواج أو الخلفية الشبه شفافةتجعل آل عنصر من عناصر صفحتك يتفاعل مع المستخدم تعتبر هذه اللغة علم واسعحقاً‏ يمكن أن تكتب عنه مئات الصفحات لشرحه هذه اللغة تعتبر من لغات جهةالعميل أيضاً‏ ‏(راجع الشكل، باختصار :..!.-73 أ)‏ .Text Markup Language..ActiveX Controlsمكونات الأآتيف اآس هي عبارة عن بريمجات صغيرة يمكن صنعها بواسطة لغتيأو الفيجوال بيسك قامت شرآة مايكروسوفت بإنتاج هذه المكونات لإضافةبعض الوظائف التي قد يحتاجها مطورو مواقع الشبكة العنكبوتية بعض هذه الوظائفهي الرسوم البيانية ، المؤقتات ، الاتصال بقواعد البيانات يمكنك إضافة هذههذه اللغة لا يمكنالمكونات إلى صفحات الهتمل عن طريق الوسماعتبارها من لغات جهة العميل أو لغات جهة الخادم ، حيث يعتمد ذلك على ما يقوم بههذا الكائن الواقع أن هذه المكونات قد تكون مفيدة حقاً‏ ، لكن لا ينصح باستخدامهاعلى أي حال السبب هو أنها غير مدعومة سوى من متصفح المايكروسوفتاآسبلورر و بالتالي فإن صفحتك لن تعمل بالشكل المطلوب على متصفحات أخرىشهيرة مثل متصفح النت سكيب إلا بواسطة مكونات إضافية تضاف للمتصفحPlug-ins)... !.السي ++:. (Common Gateway:CGIتشير الأحرف الأولى من اسم اللغة إلى الكلمات الإنجليزية،Interface التي تشير إلى ‏(واجهة البوابة العامة)‏ تعتبر هذه اللغة من أقدم وأشهر اللغات المستخدمة لتطبيقات الإنترنت جهة الخادم ستجد أن هذه اللغةمدعومة في آل شرآات الاستضافة الحالية يمكنك آتابة برامج السي جي أيباستخدام أي لغة تقريباً‏ ، إلا أن أشهر اللغات المستخدمة لذلك هي لغة البيرل قدتكون تتسائل الآن عن سبب التسمية ؟ في الواقع هذا يعود لطريقة تنفيذ البرنامجحيث أن السي جي أي يكون بمثابة الواجهة أو البوابة التي تربط الخادم بالبرنامج يتمهذا الربط عبر خطوات أولاً‏ ، يتم إنشاء عملية يعمل البرنامج من خلالهاثانياً‏ ، يتم تحميل البرنامج المطلوب ثالثاً‏ ، يتم تحميل أي برامج أخرى يحتاجهاالبرنامج الأصلي أخيراً‏ ، بعد أن ينتهي البرنامج يقوم الخادم بإرسال النتيجة إلىالمستخدم مميزات هذه اللغة تتمثل في الدعم الواسع لها على جميع خوادمالشبكة العنكبوتية ، هذا يعني أنك لن تضطر لاختيار شرآة استضافة معينة أو دفعالمزيد من المبالغ للحصول على دعم خاص لبرامجك عيوب هذه اللغة تتمثل فيانخفاض مستوى الأداء عندما تزيد الطلبات على الخادم حيث أن ذلك يتطلب إنشاءعملية منفصلة لكل طلب يوجد تقنية أخرى قد تحل هذه المشكلة هي..... FastCGI..(Process).!..:..ASP- 86 -

Active Server Pagesتشير الأحرف الأولى من اسم اللغة إلى الكلمات الإنجليزية :، التي تشير إلى ‏(صفحات الخادم النشطة)‏ هذه اللغة تعتبر منافس قوي للغة البياتش بي آما أنها تتخذ نفس أسلوب البي اتش بي من حيث أن أآواد اللغة تكونمدمجة من أآواد لغة الهتمل في ملف واحد تتم ترجمة الأآواد في الخادم ثم ترسلالنتيجة على أآواد هتمل فقط . صفحات الخادم النشطة تأخذ الامتدادآما أنها تدعم لغتي برمجة من الوزن الخفيف).asp عادة .. VBScript و JScript :...مميزات اللغة قد تحسب لمبرمجي الفيجوال بيسك و الفيجوال بيسك سكريبتمن حيث أن تعلم هذه اللغة سيعتبر أمراً‏ سهلاً‏ بالنسبة لهم عيوب هذهاللغة تتمثل في أنها لغة غير مجانية ، غير مفتوحة المصدر – مما يعني أن الأخطاء لايتم إصلاحها في الوقت المناسب ، بالإضافة لمحدودية تطوير اللغة – و العيب الأآبر هوأنك لا تستطيع استخدامها اللغة إلا على خادم يحتوي على نظام التشغيل ويندوز معبرنامج خادم من إنتاج شرآة مايكروسوفتإذا آنت تخطط لتطوير مشاريع تعمل على شبكات منتجة من شرآة مايكروسوفت فقط‏(شبكة داخلية مثلاً)‏ فيمكنك الاعتماد على لغة صفحات الخادم النشطة أما إذا آانتأعمالك موجه للقاعدة العريضة من المستخدمين اللذين يستخدمون منتجات منشرآات أخرى فإن هذا الحل لا يعتبر أفضل الحلول بالنسبة لك ... (IIS, PWS)(VBScriptمعلومة إضافيةتدعم بعض أنظمة اللينكس لغة ال ASP بشكل غير آامل حتى مع عدم استخدام أحدبرامج الخادم المنتجة من شرآة مايكروسوفت لكن هذا الدعم – آما ذآرناآامل– غير..:JSPتشير الأحرف الأولى من اسم اللغة إلى الكلمات الإنجليزيةالتي تشير إلى ‏(صفحات الجافا – جهة الخادم)‏ و هي إحدى لغات جهة الخادم آمايشير الاسم بالطبع هذه اللغة هي من إنتاج فريق المطورين التابع لشرآة سنتعمل هذه اللغة بطريقة مشابهة للغتي صفحات الخادم النشطة و لغةالبي اتش بي من حيث أن صفحة الجافا تحتوي على أآواد الهتمل بالإضافةإلى أآواد الجافا تعتمد هذه اللغة على فصل المحتوى عن طريقة العرض تنتهيصفحات الجافا – جهة الخادم بالامتداد .jsp في العادة و عند طلب إحدى صفحاتالجافا من الخادم ، يقوم الخادم بترجمة الكود و يرسل النتيجة ، لكن يظل الكود بعدالترجمة موجود في الذاآرة مما يسمح بإرسال النتيجة في فترة قياسية عند تكرارالطلب هذه الخاصية تعطي للغة قوة عالية يعتمد عليها في المشاريع الضخمةتستمد هذه اللغة قوتها من قوة اللغة الأساسية ‏(الجافا)‏ حيث يمكنك الاستفادة منالميزات الكثيرة التي تقدمها لغة الجافا في مشاريعك على الشبكة العنكبوتيةقد تستغرب من عدم انتشار هذه اللغة على مالها من مميزات ، و السبب يكمن فيأنها قد تكون صعبة بعض الشيء على من لم يعتد على البرمجة بلغة الجافا ، الشيءالذي يمكننا اعتباره ميزة إذا آان لك خبرة سابقة في لغة الجافا أليس آذلك ؟،Java Server Pages.(ASP)..!...(PHP).. (SUN)..ColdFusionهذه إحدى اللغات المنافسة للغة البي اتش بي أيضاً‏ صممت هذه اللغة من أجلهدف واضح هو تقديم حلول عملية لتطبيقات الشبكة العنكبوتية تم تطوير اللغة من.- 87 -

:.(Allaire)اللغة مدعومة من قبل أنظمة تشغيل مختلفة مثلقبل شرآة أليرالويندوز ، السولاريس الرد هات ، و غيرها هذه اللغة غير مجانية ، بل إنها تعتبر منأآثر اللغات ارتفاعاً‏ في السعر تنتج الشرآة ثلاثة مستويات من الحلولالمستوى الأول مفيد للاستخدام الشخصي المستوىالثاني يناسب الشرآات ذات الأعمال الصغيرة المستوى الثالث يناسب الأعمالالكبرى هذه اللغة يمكن دمجها مع تقنيات شبكية مختلفة و متعددة تزيد قوة اللغةآما أن هناك بيئة مرئية مقدمة مع اللغة تسمح لك بكتابة برامجك في بيئة أفضل وأسهلمميزات هذه اللغة تتمثل في إمكانية دمجها مع قاعدة عريضة جداً‏ من التقنياتالمتوفرة أما عيوبها فتتمثل في السعر المرتفع للغة بالإضافة لصعوبة تعلمها إلى حدماExpress, ) :....!.(Professional, Enterprise.....Perlقد لا يكون الاسم غريب عليك ، إذ أن لهذه اللغة شهرة واسعة مستمدة من قدم و قوةثم تمهذه اللغة تم تطوير هذه اللغة بالأساس من قبل لاري وولتطويرها من قبل قاعدة عريضة من المطورين إذ أن اللغة مفتوحة المصدر مما يعطيفرصة أآبر لتطويرها تعتمد اللغة بالأساس على لغات من أمثال,Unix shells و غيرها من اللغات)‏ . الواقع أن هذه اللغة غير مخصصة لتطبيقات الشبكةفقط بل يمكن أن تستخدمها لتطبيقات أخرى مختلفة يمكنك إضافة المزيد إلى هذهمكتوبة بلغات أخرى آالسي و الجافااللغة عبر إدراج مكتبات إضافيةتتغلب هذه اللغة على البي اتش بي من حيث قدم اللغة و انتشارها الواسع بينالمطورين لكن البي اتش بي تتغلب على لغة البيرل من ناحية أن بي اتش بي تمتطويرها لخدمة أغراض الشبكة فقط ، مما يعني أنها الأفضل لمثل هذا الغرض .. (Larry Wall)C, sed , awk ) :..(Libraries)..!PHPآانت بداية لغة البي اتش بي على شكل مجموعة من الأآواد التي قام شخص يدعىبتطويرها لمراقبة الأشخاص اللذين يزورون ملفهراسموس ليردورفالشخصي ازداد اهتمام المطورين بهذه الأآواد التي قام راسموس بتطويرها فقررالأخير أن ينشرها للاستخدام العام باسم أدوات المواقع الشخصيةآانت الفكرةمن هنا جاء الاسمهي أن نشر المصدر على العامة سيسمح بتطويرها بشكل أسرع من الاحتفاظآانت هذه الأآواد في البدايةبالمصدر مغلقاً‏ لدى راسموس فقطمكتوبة بواسطة لغة البيرل أطلق على هذه المجموعة فيما بعد اسمآل ذلك آان بين عاميهي اختصار للكلمتين الإنجليزيتينPersonal Home ). (PHP = Personal Home Pages)FI. PHP/FI.. (Open-Source) !(Form Interpreter)(Rasmus Lerdorf)... (Page tools1994 و . 1995PHP/FI 2مع زيادة الاهتمام بالمشروع الشخصي لراسموس ، قام بتطوير المشروع و إضافةالمزيد من الوظائف ، لكن باستخدام لغة السي هذه المرة . هذه المرة آان للغة القدرةعلى الاتصال بقواعد البيانات و تطوير صفحات آلية للشبكة العنكبوتية و بنفس الطريقةو لنفس السبب ، قرر راسموس أن يقوم بتوزيع النسخة مجاناً‏ على الجميع لغرضيانتشرتالتطوير و إصلاح الأخطاء ظهرت هذه النسخة في منتصف عامهذه النسخة انتشار واسع عبر الشبكة ، حيث تشير الإحصائيات الواردة في الموقعالرسمي للغة بأن حوالي 50.000 شبكة قد أبلغت باستخدامها لها – مما يمثلتقريباً‏ من حجم الشبكة في ذلك الحين%1..1997 تقريباً‏..PHP3- 88 -

قد تكون النسخ السابقة مختلفة بشكل آبير عن الصيغة العامة للغة بي اتش بي آمافي الواقعنعرفها اليوم ، لكن النسخة الثالثة آانت مقاربة جداً‏ لبي اتش بي اليوم لقد قام شخصان مهتمان بهذه اللغة بإصدار نسخة مطورة عنها و هما ‏:أندي و زيفلقد قاما بإصدار نسخة معاد آتابتها بالكامل فيآان ذلك بعد أن استخدما النسخة السابقة من البي اتش بي فينهاية العام في ذلك الوقت ، اتفق آل من راسموس ، أندي ، وتطوير مشروع تجاري خاص بهما قدمتزيف على اعتماد هذه النسخة الجديدة آنسخة رسمية تلي النسخة السابقة هذه النسخة العديد من الإضافات المفيدة حقاً‏ للغة ، مثل دعم المزيد من قواعدو آالعاده ، تم نشر مصدر اللغة بشكلالبيانات ، دعم البرمجة الشيئية و غيرها مفتوح لمجتمع المطورين مما زاد من شعبية اللغة و زاد من سرعة تطويرهاو أعلن أن ذلك اختصار لفقط هذه المرة تم نشر اللغة بالاسم المختصر تم إصدار النسخة الرسمية من PHP3 في شهر يونيوحيث آان عدد المواقع المستخدمة لها في ذلك الحين يقارب مئاتمن عام و ما يقارب هذا العدد أو- مع حجم مواقع الشبكة الآلاف من المواقعيزيد من المطورين).....PHP.. ( Zeev Suraski و Andi Gutmans ). 1997.. (Hypertext Preprocessor1998– حوالي %10!!.PHP4استمر أندي و زيف في تطوير اللغة هذه المرة أعادوا آتابة مصدر اللغة مرة أخرىليخرجوا لنا بالنسخة الأحدث من اللغة بدأت هذه الخطوة بعد نشر النسخةالسابقة رسمياً‏ مباشرة – في شتاء عام – و آان الهدف الأساسي منها هوزيادة جودة المشاريع الكبيرة تم إضافة المزيد من الخصائص للغة ، على سبيل المثاللا الحصرزيادة دعم البرمجة الشيئيةدعم المزيد من قواعد البياناتتم إضافة خاصية الجلسات (Sessions) . سنتناول هذا الموضوع بشكل مفصلفي الفصول القادمة بإذن االلهدعم داخلي لكل من الجافا و الاآس ام المعامل مقارنة جديد ليفحص تساوي القيمة و تساوي نوع المتغير فيوقت واحدتمت إضافة نوع جديد من البيانات هو النوعتمت إضافة بعض المصفوفات الجديدة التي تحمل قيم لمتغيرات هامة تخصالخادم أو البيئة المستخدمةالكثير ، الكثير غير ذلك. (XML). (Boolean). PHP41998.....(===)..:••••••••قدم آل من أندي و زيف محرك جديد تعتمد عليه اللغة قاموا بتسميته بمحرك زيندZend ‏(راجع الجزء الخاص بمحرك زيند لمزيد من المعلومات).‏ تم نشر النسخ الأولية مناللغة لأول مرة في منتصف عام و تم نشر النسخة الرسمية في عامميلاديةتشير الإحصائيات إلى نسبة المواقع المستخدمة للنسخة الرابعة تشكل حواليمن عدد المواقع في ذلك الحين و العدد في ازدياد مستمر2000%20!. 1999..PHP5تعتبر النسخة الرابعة هي النسخة الأخيرة من اللغةلن ننتظر آثيراً‏ حتى تصدر النسخة الجديدة من اللغة4.2.2) تحديداً)‏ ..و مع ذلك فإنناآما تشير المعلومات الواردة في- 89 -

.الموقع الرسمي للغة ، فإن التعديلات قد بدأت بالفعل على النسخة الحالية تمهيداً‏لإصدار النسخة الخامسة .معلومات إحصائية حول : PHPذآرنا بعض الأرقام الإحصائية التي تشير إلى حجم انتشار دعم اللغة على المواقعالمختلفة على الشبكة لنحاول تلخيص هذه المعلومات عبر هذا الرسم البياني:الحجم بالنسبةالمئوية20101العام1997 1998 2000 2002محرك زند : Zendذآرنا بأنه في تم نشر أول نسخة من هذا المحرك في حوالي عام 1999 ميلادية علىإذا آنت تتساءل عنيد آل من أندي و زيفسبب تسمية المحرك بهذا الاسم فإن الإجابة تقع في الاسمين الأولين من اسميمطوري هذا المحرك لابد من توضيح الفرق بين بي اتش بي و بين زند هنا ، ما هيحدود آل منهما ؟ و ما هي المجالات التي يتقاطعان فيها ؟زند هو المحرك بي اتش بي هي اللغة ماذا يعني ذلك ؟في الواقع يمكننا أن نقول بأن آلمة تشمل النظام آكل آما يظهر للمستخدمالخارجيالنظام مكون من ثلاثة أجزاء‎1‎‏-المترجم و هو الجزء الذي يقوم بتحليل الكود المدخل و ترجمته و من ثم تنفيذه‎2‎‏-الجزء الوظيفي مسؤول عن وظائف اللغة ‏(دوالها‎3‎‏-الواجهة الجزء المتصل بالخادم... (Zeev Suraski. () Gutmans Andi و.PHP.:.:.::.بالنسبة لمحرك زند ، فإنه مسؤول عن الجزء الأول ، و القليل من الجزء الثاني فقطأما بي اتش بي فهي مسؤولة عن الجزء الثاني و الجزء الثالث زند و بي اتش بي معاً‏، يشكلان النظام آاملاً‏قد تتضح لنا الصورة بشكل أوضح مع هذا الشكل.:.- 90 -

شكل 74:الخلاصة :تعرفنا في هذا الفصل على واقع الحياة على الشبكة ، حيث أصبحنا نعرف الآن أنهناك نوعين من الأجهزة أجهزة خادمة و أجهزة عميلة آما أن هناك نوعين مناللغات لغات جهة العميل و لغات جهة المزود أخذنا نبذة بسيطة عن آل لغة أصبحلدينا القدرة على الإجابة على الأسئلة آيف ؟ متى ؟ لماذا ؟ ماهي.PHP ؟..:::مراجع إضافيةيبدو أن عدد الكتب التي تتحدث عن لغة البي اتش قد زاد عن المئة آتاب حالياً‏ إذ أنهيوجد ما يزيد عن 50 آتاب باللغة الألمانية ‏(أول آتاب لهذه اللغة آان باللغة الألمانية)‏ وما يزيد عن الأربعين آتاب باللغة الانجليزية مع وجود نسخ مختلفة من هذه الكتب بكلاللغاتسأذآر هنا أبرز الكتب التي أعجبتني باللغة الإنجليزية و التي قد تستفيد منها بنفسك:!- ٍSAMS Teach yourself PHP in 24 hours by Matt Zandstra (SAMSPublishing)- Professional PHP Programming by Jesus Castagnetto, Harish Rawat,Sascha Schumann, Chris Scollo, Deepak Velialth (Wrox Press)- Instant PHP4 by Micheal J. Walker, Robert M. COX, Neal Anders(Osborne):!مواقع هامةأ-‏ مواقع أجنبيةب-مواقع عربيةhttp://www.php.nethttp://www.phpbiulder.comhttp://www.apache.orghttp://www.mysql.comhttp://www.c4arab.comhttp://www.php4web.com::- 91 -

http://www.phpvillage.com- 92 -

الفصل الخامس : تنصيب PHP- 93 -

الفصل السادس : تنصيب MySQL- 94 -