learn html css tahani

94
- 1 - اﻹﻟﻜﺘﺮوﻧﻴﺔ ﻟﻠﻜﺘﺐ اﻟﻌﺮﺑﻴﺔ اﻟﻤﻮﺳﻮﻋﺔ ﺳﻠﺴﻠﺔhttp://www.c4arab.com ـــــــﻢ ﺗـــــﻌــﻠPHP ﺑﺴﻬﻮﻟﺔ اﻟﺠﺎهﺰة اﻟﻤﺸﺎرﻳﻊ و اﻷآﻮاد ﻣﻦ اﻟﻌﺪﻳﺪ ﻣﻊ! HTML, CSS, JavaScript, MySQL, XML اﻟﺴــــــــﺒﻴﺖ ﺕـــــﻬﺎﻧﻲ اﻹﻧﺘﺮﻧﺖ و ﻟﻠﻜﻤﺒﻴﻮﺕﺮ اﻟﻌﺮﺑﻴﺔ اﻟﻤﻮﺳﻮﻋﺔ ﻡﺸﺮﻓﺔ اﻷوﻟﻰ اﻟﻄﺒﻌﺔ2002 !! ﻡﻜﺘﻤﻠﺔ ﻏﻴﺮ ﺕﺠﺮﻱﺒﻴﺔ ﻧﺴﺨﺔ!! اﻟﻜ ﺑﺘﻮزﻱﻊ ﻱﺴﻤﺢ ﺑﻌﺪ إﻻ هﻴﺌﺘﻪ ﺕﻐﻴﻴﺮ أو اﻟﻜﺘﺎب ﺑﻄﺒﻊ ﻱﺴﻤﺢ ﻟﻜﻦ اﻹﻟﻜﺘﺮوﻧﻴﺔ ﺻﻮرﺕﻪ ﻋﻠﻰ ﺘﺎب اﻟﻜﺎﺕﺒﺔ ﻡﻦ إذن أﺥﺬ ﻡﺤﻔﻮﻇﺔ اﻟﺤﻘﻮق ﺝﻤﻴﻊ© PHP 4

Upload: jijifolle

Post on 24-Oct-2015

53 views

Category:

Documents


9 download

TRANSCRIPT

Page 1: Learn HTML Css Tahani

- 1 -

سلسلة الموسوعة العربية للكتب اإللكترونية

http://www.c4arab.com

تـــــعــلـــــــم

PHP بسهولة

! مع العديد من األآواد و المشاريع الجاهزة

HTML, CSS, JavaScript, MySQL, XML

تـــــهاني الســــــــبيت مشرفة الموسوعة العربية للكمبيوتر و اإلنترنت

الطبعة األولى

2002 !!نسخة تجريبية غير مكتملة !!

تاب على صورته اإللكترونية لكن ال يسمح بطبع الكتاب أو تغيير هيئته إال بعد يسمح بتوزيع الك أخذ إذن من الكاتبة

©جميع الحقوق محفوظة

PHP 4

Page 2: Learn HTML Css Tahani

- 2 -

التواصل مع القراءالتواصل مع القراء

إلى القارئ العزيز ،،،

و من منطلق اهتمامها العام بعلوم الحاسب –حرصت الموسوعة العربية للكمبيوتر و اإلنترنت على تقديم هذه السلسلة من –مامها الخاص بتقديم هذه العلوم باللغة العربية و التقنية و اهت

الكتب اإللكترونية التي نتمنى أن تحقق طموحات القارئ العربي الذي اعتاد على قراءة أجود .المطبوعات بكافة اللغات العالمية

الكتب بمستوى عال تطمح لتقديم سلسلة من– من خالل هذه السلسلة –إن الموسوعة العربية

طريقة –من الجودة ، الشيء الذي لن يتحقق بدون مالحظاتكم و اقتراحاتكم حول السلسلة الكتابة ، األخطاء اإلمالئية و النحوية ، التنظيم و الترتيب ، طريقة نشر الكتاب و توزيعه ،

الخ... اإلخراج الفني

:صص لذلك ننتظر سماع أراءآم على البريد اإللكتروني المخcom.arab4ebooks@c

.نرجو ذآر اسم الكتاب و الكاتب و الطبعة مع مالحظاتكم لنا

- تــــــــــهاني الســـــــــــبيت الموسوعة العربية للكمبيوتر و اإلنترنتمشرفة

Page 3: Learn HTML Css Tahani

- 3 -

شكر و تقديرشكر و تقدير

لكن أن تؤلف . أو حتى عشرات األآواد ، وحدك ، فهذا شيء ممكن ... أن تكتب آودا برمجيا

.ا شيء غير ممكن آتابا عن لغة برمجة بدون دعم و مساندة حقيقية ممن تثق بهم فهذ

آلمة شكر بسيطة ألعضاء ... أتقدم بكلمة شكر بسيطة لكل من ساعد على إخراج هذا الكتاب

آلمة شكر بسيطة ألعضاء ... مجلسي إدارة و تطوير الموسوعة العربية للكمبيوتر و اإلنترنت

.و زوار الموسوعة بكافة أقسامها

كتاب بصورة جيدة ، لما وجدت هذه الصفحات لوال اهللا ، ثم لوال اهتمامكم بظهور هذا ال

.طريقها إلى قارئنا العزيز

آلمة شكر مقدمة لكل من يفكر في تقديم أي اقتراح أو مساعدة لتطوير هذا الكتاب حتى يكون

" .بي اتش بي"مرجعا عربيا شامال للغة

الدعم و المساندة لم يكن بإمكاني التقدم خطوة واحدة بدون .. شكر خاص للوالد و الوالدة

.الدائمة من قبلكما حفظكما اهللا من آل سوء

Page 4: Learn HTML Css Tahani

- 4 -

عن الكاتبةعن الكاتبة تهاني السبيت

م في الرياض1981-2-8 هـ الموافق 1401- 4 -4: تاريخ الميالد

جامعة الملك سعود بالرياض –طالبة في آلية الحاسب و المعلومات

)السنة األخيرة(

العربية منذ نشأتها عام تولت منصب رئاسة مجلس إدارة الموسوعة

و حتى اآلن 2000

مع شهادة خبرة في نفس تعمل حاليا آمصممة و مطورة مواقع ويب

المجال آما تعمل في فريق الدعم الفني التابع ألحد شرآات االستضافة

.العربية

20,000عدد أسطر بي اتش بي التي آتبتها حتى اآلن يزيد عن الـ

.سطر برمجي

\، بيسك++ سي \باسكال ، سي : ت األخرى التي تجيدها من بين اللغا

.فيجوال بيسك ، أسمبلي

.MySQLأآسس ، اوراآل ، : و في مجال قواعد البيانات

Page 5: Learn HTML Css Tahani

- 5 -

فهرس المحتويات باختصار

9.....................................................................مقدمة - 14............................................ مداخل للغات أخرى:الباب األول - PHP ...........................................84 مدخل للغة :الباب الثاني - ............................................ PHP أساسيات :الباب الثالث - ............................................. PHP تعمق في :الباب الرابع - ................................................... الدوال :الباب الخامس - .......................................... التعامل مع الملفات :الباب السادس - ............................................ البرمجة الشيئية :الباب السابع - .............................................. قواعد البيانات :ثامن الباب ال- ................................................... القوالب :الباب التاسع - ............................................ XMLدعم : الباب العاشر - .................................... PHP ما تبقى عن :الباب الحادي عشر - .......................................... 1 دراسة حالة :الباب الثاني عشر - .......................................... 2 دراسة حالة :الباب الثالث عشر - ........................................ أدوات و مراجع مفيدة :الملحق األول - ............................... PHP قائمة الدوال المضمنة مع :الملحق الثاني -

Page 6: Learn HTML Css Tahani

- 6 -

فهرس المحتويات بالتفصيل

9 ................................. ................................. .......................مقدمة- 14............................................................ مداخل للغات أخرى:الباب األول -

HTML......................................................15مدخل للغة : الفصل األول - CSS............................................................41مدخل للـ : الفصل الثاني - Java Script.................................56افا سكريبت مدخل للج: الفصل الثالث -

PHP............................................................84 مدخل للغة :الباب الثاني - ؟PHPآيف و متى و لماذا : الفصل الرابع - PHPتنصيب : الفصل الخامس - MySQLتنصيب : الفصل السادس -

PHP أساسيات :الباب الثالث - الهيكل العام:الفصل السابع - المتغيرات: الفصل الثامن - المعامالت:الفصل التاسع - أوامر التحكم في البرنامج: الفصل العاشر - أوامر اإلخراج: الفصل الحادي عشر - )---------(المشروع : الفصل الثاني عشر -

PHP تعمق في :الباب الرابع - فاتالمصفو:الفصل الثالث عشر - المتغيرات النصية: الفصل الرابع عشر - العبارات االعتيادية:الفصل الخامس عشر - التعامل مع النماذج: الفصل السادس عشر - ---------: المشروع -

الدوال:الباب الخامس - الدوال المعرفة مسبقا : الفصل السابع عشر - اصنع دوالك بنفسك: الفصل الثامن عشر - ()mailالدالة : الفصل التاسع عشر - ()headerالدالة : الفصل العشرون - دوال التاريخ و الوقت: الفصل الحادي و العشرون - ----------: المشروع -

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

البرمجة الشيئية:الباب السابع -

Page 7: Learn HTML Css Tahani

- 7 -

ما هي البرمجة الشيئية ؟: الفصل السادس و العشرون - تعريف الفئات: الفصل السابع و العشرون - إنشاء نسخة من الكائن : العشرون الفصل الثامن و - الوراثة: الفصل التاسع و العشرون - برنامج البريد: المشروع -

قواعد البيانات:الباب الثامن - متى تستخدم قواعد البيانات ؟:الفصل الثالثون - التخطيط لقاعدة البيانات من خالل قواعد البيانات العالئقية:الفصل الحادي و الثالثون - SQLأوامر تعريف قاعدة البيانات بلغة :ني و الثالثونالفصل الثا - SQLأوامر التعامل مع البيانات بلغة :الفصل الثالث و الثالثون - .PHP في لغة MySQLقائمة مشروحة لدوال :الفصل الرابع و الثالثون - قواعد بيانات أخرى: الفصل الخامس و الثالثون - سلة التسوق: المشروع -

لب القوا:الباب التاسع - استخدام دوال عامه آقوالب –مقدمة للقوالب :الفصل السادس و الثالثون - استخدام طريقة ثانية للقوالب: الفصل السابع و الثالثون - استخدام طريقة ثالثة للقوالب:الفصل الثامن و الثالثون -

XMLدعم : الباب العاشر - XMLمقدمة للغة : الفصل التاسع و الثالثون - XML الداعمة لـ PHPدوال : ربعون الفصل األ - -----------: المشروع -

PHP ما تبقى عن : الباب الحادي عشر - الكوآيز: الفصل الحادي و األربعون - )Sessions(الجلسات : الفصل الثاني و األربعون - المتغيرات المعرفة مسبقا: الفصل الثالث و األربعون - -----------: المشروع -

)واحة الشعراء (1 دراسة حالة :ي عشر الباب الثان- )منتدى حوار (2 دراسة حالة :الباب الثالث عشر - أدوات و مراجع مفيدة :الملحق األول - PHP قائمة الدوال المضمنة مع :الملحق الثاني -

Page 8: Learn HTML Css Tahani

- 8 -

مقدمةمقدمةمقدمة بسم اهللا الرحمن الرحيم

آلن فإنني أفترض أن طالما أنك حصلت على هذا الكتاب و طالما أنك تقرأ هذه الكلمات ا –إذا آان هذا االفتراض صحيحا فإننا " . بي اتش بي"لديك اهتمام حقيقي لتعلم لغة

ننتمي إلى مجال اهتمام واحد و سنسير في –القارئ العزيز و آاتبة هذه السطور بي اتش " إتقان لغة –طريق واحد يساعد أحدنا اآلخر حتى نصل إلى هدفنا النهائي

عدة التي أطلبها منك بسيطة ، آل ما أريده أن تؤمن بأن هناك الكثيرين المسا" . بياللذين تمكنوا من إتقان هذه اللغة بل و اإلبداع و االبتكار فيها مما يعني أن حلمك

!بإتقانها ليس بعيد المنال فكن على ثقة بنفسك و بقدراتك و ستصل بإذن اهللا األساسيات أوال و ال تحاول أبدا أن تتخطى المهم أن ترآز على الفصول األولى و تتقن

هذه الفصول لتعجل بالنتيجة فهذا الطريق السريع الخاطئ هو أآثر األخطاء شيوعا عند نريد أن نصل لمستوى عال من اإلتقان و ال أعتقد أن القارئ الكريم . تعلم هذه اللغة

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

!نحن متفقون على هذا المبدأ ؟.. إذن

بل لزيادة " بي اتش بي"أما أولئك األشخاص اللذين يقرؤون هذا الكتاب ليس لتعلم معلوماتهم حولها فأيضا أنصح بقراءة الكتاب آامال و لو على عجالة فقد تجد معلومة

.جديدة بين سطر و آخر ..عونا نستعرض أبواب الكتاب بشكل سريع د

تبرز أهمية هذا الباب لدى مطور الويب الذآي الذي – مداخل للغات أخرى –الباب األول .يستخدم اللغة المناسبة في الوقت المناسب

أو طلبات عمالءك و لكن –حلوال آاملة لمختلف طلباتك " بي اتش بي"قد توفر لك لغة مع وجود بديل أسهل و أفضل ؟ " ش بيبي ات"لماذا تستخدم

!حاول دائما أن تكون دقيقا في هذا الجانب و آن ذآيا في اختيار ما يناسبك بالفعل و في الواقع ال يمكنك ) HTML" (اتش تي ام ال"الفصل األول يقدم مدخل سريع للغة

لغة . فعال إال إن آنت متقنا لهذه اللغة –تخطي هذا الفصل في أي حال من األحوال هي اللغة التي يفهمها متصفح اإلنترنت لديك و يستخدمها لعرض " االتش تي ام ال"

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

" .اتش تي ام ال"دون فهم " بي اتش بي"أتصور أننا نستطيع فهم جانب " اتش تي ام ال"الجانب البرمجي و تتولى " بي اتش بي"في الغالب ستتولى

.عرض النتيجة البرمجية

و تستخدم إلضافة المزيد من " سي اس اس"الفصل الثاني يقدم مدخال سريعا للغة .آما سنرى إن شاء اهللا " اتش تي ام ال"المرونة على لغة

ل الثالث يعطيك معلومات سريعة حول لغة الجافا سكريبت التي تعتبر حال برمجيا الفص

السبب في تقديم هذا الفصل هو أن الجافا ) . PHP(و ) HTML(يتوسط الطريق بين سكريبت تعتبر خيارا أفضل من بي اتش بي في بعض الجوانب مثل التأآد من مدخالت

.حقا إن شاء اهللا سنتعرف على ذلك بالتفصيل ال. النماذج

Page 9: Learn HTML Css Tahani

- 9 -

يبدأ بنا المشوار لتعلم هذه اللغة مع هذا – مدخل للغة بي اتش بي –الباب الثاني لكننا سنتعرف أآثر على هذه اللغة و آيفية تنصيبها ! لن نبدأ في البرمجة هنا . الباب

.على أجهزتنا تحضيرا الستخدامها في األبواب التالية

يتناول هذا الباب أساسيات البرمجة بلغة بي –ي اتش بي أساسيات ب–الباب الثالث سنتعرف على الهيكل العام ألي برنامج ، على المتغيرات ، الجمل البرمجية . اتش بي

.المختلفة و غيرها

سينقلنا لمستوى أعلى في دراستنا لهذه – تعمق في بي اتش بي –الباب الرابع سنتعرف بعمق . ات بطرق شيقة و سهلة سنتمكن من التعامل مع المصفوف. اللغة

و سنتعرف في ختام هذا . و بعض الدوال الخاصة بها ) String(على المتغيرات النصية الباب على موضوع يشكل االهتمام األول لكل مهتم بلغة بي اتش بي ، ذلك هو التعرف

.على آيفية التعامل مع النماذج و مكوناتها المختلفة

تقدم لنا لغة بي اتش بي قائمة عملية لدوال يمكن –دوال ال–الباب الخامس . آما أنك تستطيع تعريف دوال إضافية خاصة بك .. استخدامها ألغراض متنوعة

سنتناول موضوع الدوال بالتفصيل في هذا الباب مع أهمية إدراج ملحق خاص بالقائمة .الكاملة للدوال الجاهزة في آخر الكتاب

و آما يشير اسم الباب فإن الموضوع الذي –تعامل مع الملفات ال–الباب السادس

سنلقي الضوء عليه هنا هو آيفية التعامل مع الملفات و االستفادة الحقيقية من هذه .اإلمكانيات التي تقدمها لنا بي اتش بي

أضافت بي اتش بي الكثير إلى نفسها آلغة برمجة – البرمجة الشيئية –الباب السابع

ة بسبب دعمها للبرمجة الشيئية مثلها في ذلك مثل أقوى لغات البرمجة الحالية معاصرستفيدك خبرتك في مثل هذه اللغات في تخطي . آلغة السي بلس بلس و لغة الجافا

تم تخصيص باب . هذا الباب بسهولة أآثر لكن هذه الخبرة غير مطلوبة بشكل إلزامي .ادة الحقيقية منها آامل للبرمجة الشيئية لتتمكن من االستف

أصبح االنتقال من مواقع ويب الثابتة إلى المواقع – قواعد البيانات –الباب الثامن

المعتمدة على قواعد البيانات هاجسا يداعب أغلب مسئولي المواقع العربية منها و هل حلمت يوما ببرمجة سكريبت إلدارة موقعك ؟ مجلة عربية ؟ أو حتى . األجنبية حوار عربي خاص بموقعك ؟ إن آنت جادا في حلمك فستجد مبتغاك في هذا منتدى

لم أقم . أيضا ) SQL(آما أن الباب يقدم مدخال للغة اس آيو ال . الباب إن شاء اهللا بإدراج هذا المدخل في الباب األول ألنك لن تحتاجه إال مع هذا الباب بعكس مداخل

. متفرقة الباب األول التي احتجناها في أبواب

إذا وضعنا رحالنا عند الباب التاسع فإننا سنكون حينها قد – القوالب –الباب التاسع عندها . تمكنا من آتابة مشاريع يزيد عدد أسطرها عن الخمسة آالف سطر تقريبا

ستفكر جديا في حل يسهل عليك إجراء تعديالت على طريقة عرض مشروعك و بتعديل عليك حينها أن تقرأ هذا الباب و تمتع بما تقدمه بي ! ور فقط أقل عدد ممكن من السط

!اتش بي لك

يبدأ الباب بمدخل للغة االآس ام ال ، ثم يقدم – دعم االآس ام ال –الباب العاشر تعريفا و شرحا لكيفية تطوير مشاريع بي اتش بي متقدمة من خالل االستفادة من

الس آيو ال فإنني فضلت عدم إدراج مدخل للغة و آما ذآرنا بخصوص لغة ا! هذه اللغة !االآس ام ال في الباب األول ألنه ال يهم جميع قراء هذا الكتاب آما أتوقع

Page 10: Learn HTML Css Tahani

- 10 -

.. يؤآد هذا الباب مبدأ أؤمن به آثيرا – ما تبقى عن بي اتش بي –الباب الحادي عشر دائما هناك !لن يأتي اليوم الذي تعتقد بأنك تعرف فيه آل شيء عن بي اتش بي

هناك المزيد من األفكار البرمجية خفيفة الظل التي تعطي .. المزيد من التجديدات !لبرامجك المزيد من القوة أو المرونة أو السهولة أو االحترافية أو هذه األمور معا

ثم سنشرح قائمة بمتغيرات جاهزة . سنتعرف بدءا على آيفية االستفادة من الكوآيز .يدك آثيرا يمكن أن تف

سنبدأ المشروع من ... البابان األخيران يقدمان لنا مشروعا بي اتش بي متكامالن

و سنحتفل سويا بإنجاز هذين المشروعين مع ختام .. المستوى صفر مع بعضا البعض .الكتاب إن شاء اهللا

ا في استخدمها آمراجع ترجع إليه... الكتاب ملحق ببعض المالحق المفيدة في آخره

.وقت الحاجة .آما أعد بإضافة المزيد من األبواب في الطبعات القادمة بإذن اهللا

آيف تقرأ هذا الكتاب ؟مما يعني أن الكتاب يرآز آثيرا " ... تعلم بي اتش بي بسهولة"الكتاب معنون باالسم

ا أعتقد أن استخدام إشارات متفق عليها مسبق. على السهولة في تقديم المعلومات .سيجعل األمر أآثر سهولة علي و عليك عزيزي القارئ

:إذن فلنتفق على التالي

آود بي اتش بيإذا وجدت صندوقا رمادي اللون آتبت عليه بعض األآواد باللغة اإلنجليزية على أسطر

و المثال اآلتي يوضح ذلك . مرقمة فإن هذا يعني أنك تقرأ آود مكتوب بلغة بي اتش بي :

في الجهة اليسرى العليا ثم " php.php" آما نشاهد أعاله ، قمنا بكتابة اسم الملف

إن االنتباه السم الملف سيساعدك . بدأنا بكتابة آود بي اتش بي في أسطر مرقمة آثيرا عندما نبدأ بكتابة مشاريع من عدة ملفات آما أن عدد السطر سيسهل علينا

. رقم السطر بدال من إعادة آتابة السطر آامال شرح سطر معين بذاته بالرجوع إلى

معلومة إضافية

Page 11: Learn HTML Css Tahani

- 11 -

معلومة إضافية

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

. التي تهمك فقط إذا آنت مهتما بهذا النوع من المعلومات اإلحصائيةالتاريخية أو !ال بأس من االطالع السريع على المعلومة على األقل

تلميحة ذآية

تلميحة ذآية

ال . ستجد األفكار الذآية في صناديق شبيهه بهذه الصناديق خالل رحلتك مع هذا الكتاب

ذآية ألنها ستساعدنا على االبتكار و تفوت على نفسك فرصة قراءة هذه األفكار ال .التجديد من وقت آلخر

.. ال تعطل الجانب اإلبداعي و االبتكاري لديك ... عندما تفكر في آتابة أآوادك الخاصة هذا الجانب موجود و لكنه بحاجة لتنشيط من خالل إعطاءك بعضا من هذه األفكار في

.صناديقنا هذه

!تحذير

!تحذير

إنها تحتوي على تحذيرات هامة تحميك من القيام بشيء قد ! ه جيدا لهذه الصناديق انتب

.تندم على فعله إن لم تستمع إلى نصائح الكتاب

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

نصيحتي في هذا الجانب هي أن تختار الرفيق المناسب في هذه . من هذا الكتاب فإما أن تطلب من شخص متمكن من هذه اللغة أن يشرح لك محتويات الكتاب . الرحلة

بحيث – بحسب األبواب المختلفة في هذا الكتاب –في دورة مجزاة إلى عدة مستويات أو أن تختار صديقا بمستوى خبرتك الحالية . المنهج الذي تسيران عليه يكون الكتاب هو

و تتعاونان لتسهيل األمر عليكما ، بحيث يتولى أحد األطراف شرح الباب األول ثم يتولى .الطرف الثاني شرح الباب الثاني و هكذا

Page 12: Learn HTML Css Tahani

- 12 -

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

Page 13: Learn HTML Css Tahani

- 13 -

خرىخرىمداخل للغات أمداخل للغات أ: : الباب األول الباب األول مقدمة الباب األول

آلمة مدخل تعني أننا . يقدم لك هذا الباب مداخل للغات أخرى غير لغة بي اتش بي

لن نتعمق آثيرا في تفاصيل آل لغة ، بل سنأخذ من آل لغة ما يلزمنا لكتابة أآواد بي .اتش بي واضحة و صحيحة

ألولى على شبكة الويب اللغة ا.. سنتعرف في الفصل األول على لغة االتش تي ام ال (و في الفصل الثاني سنتعرف على لغة تضيف مرونة هائلة للغة االتش تي ام ال.

HTML ( و هي لغة السي اس اس)CSS( . في الفصل الثالث سنتعرف على لغة.الجافا سكريبت التي تعد خيارا ذآيا يضيف القوة و الجودة على مشاريع بي اتش بي

Page 14: Learn HTML Css Tahani

- 14 -

HTMLخل للغة مد :الفصل األول

بالتأآيد سمعت عن لغة االتش تي ام ال قبل ذلك ؟ أو آما يحب أن يسميها البعض " .هتمل"لغة

التي ال يحب البعض أن يعتبروها لغة حقيقية –في الواقع فإن هذه الشهرة لهذه اللغة ليس بمستغرب، ذلك أن هذه اللغة شهدت بدايات ظهور شبكة اإلنترنت حيث آانت و –الت تستخدم لكتابة الصفحات التي يمكن استعراضها عن طريق متصفح مواقع ماز

) .مثل اإلنترنت اآسبلورر ، النت سكيب ، األوبرا أو غيرها(إنترنت تمكنت لغة الهتمل في البداية من عرض النصوص الجامدة ... آانت البداية بسيطة جدا

ت و غالبيتهم من التي تتناسب مع طلبات مستخدمي الشبكة في ذلك الوق .العسكريين أو الفيزيائيين

مع انتشار شبكة اإلنترنت الواسع في التسعينات من القرن الماضي آان البد من أن و آما تالحظ بنفسك ، تطورت . تتطور هذه اللغة و تتطور معها مواقع شبكة اإلنترنت

الطريقة المرئية الطريقة التي تعرض بها المعلومات من الطريقة النصية الجامدة إلى .المتحرآة

:تشير األحرف في اسم اللغة إلى العبارة اإلنجليزية التالية

Hyper Text Markup Language )لغة ترميز النص التشعبي(التي تشير إلى

يحمل آل وسم من هذه الوسوم ) Tags(تتكون لغة هتمل في مجملها من عدة وسوم

.معنى خاص لدى المتصفح بما أنك مصمم مواقع ويب فإنك قد عقدت اتفاقا مع المتصفح و : مر آالتالي لنتخيل األ

. أنشأت لغة خاصة للتفاهم بينك و بينه أول اتفاق تم عقده بينكما هو أن األوامر التي سترسلها له ستكون دائما بين قوسين

:من هذا الشكل

>األمر هنا<

.وسما إذا آان األمر على هذا الشكل فإننا نسميه لون أحمر ، خط عريض ، اتجاه (هذا األمر يعني أنك تطلب عرض صفحتك بتنسيق معين

) .الخ... من اليمين إلى اليسار أو العكس حتى تخبره بالتوقف عن ذلك – األمر –المتصفح ملتزم معك باستخدام هذا التنسيق

.وس األول مباشرة بعد الق) /(من خالل إرسال األمر نفسه مع إضافة الشرطة المائلة :هكذا

<األمر هنا/>

. بطبيعة الحال أنت تأمر المتصفح باستخدام هذا التنسيق على جملة نصية معينة فأين يمكن أن نضع الجملة النصية التي نأمر المتصفح باستخدام هذا التنسيق معها ؟

!توقعك صحيح . ة األمر ووسم نهاية األمر يجب أن نضع الجملة المطلوبة بين وسم بداي... نعم بالطبع

:هكذا <األمر هنا> الجملة النصية المراد تطبيق التنسيق عليها هنا <األمر هنا/>

Page 15: Learn HTML Css Tahani

- 15 -

باإلضافة إلى وسوم تنسيق النص فإن لغة الهتمل تضم وسوما إلدراج صورة أو خط Form(أفقي أو جدول أو ملف فالشي و آذلك وسوما خاصة بإدراج مكونات النماذج

Elements . ( آما أنها تضم وسوما خاصة ببداية آل صفحة و نهايتها. آما أن بعض الوسوم تقبل متغيرات إضافية ترسل مع الوسم و تعني معلومة إضافية .للمتصفح

:أنت تقوم بكتابة هذه المتغيرات اإلضافية داخل قوسي وسم البداية هكذا < "قيمة="األمر هنا متغير >

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

. :هذه أمثلة سريعة لبعض الوسوم حتى تعتاد على أشكالها

<hr> <hr width=”50%”> <Font color=”red”> <img src=”images/php.gif”>

إذن ، ما رأيك أن نبدأ بكتابة أول صفحة هتمل ؟بداية نريد أن نخبر نظام التشغيل بأن الصفحة التي ننشئها حاليا هي صفحة يمكن

أو htm.(نقوم بذلك من خالل تسمية الملف باالمتداد . عرضها من خالل المتصفح .html. (

) .Notepad(إذن لنفتح معا برنامج المفكرة يفضل أن تقوم بإنشاء مجلد خاص (htm.1: تسمية الملف بهذا االسم ثم نقوم ب

)بأمثلة هذا الكتاب حتى ال تختلط عليك الملفات بكثرة التطبيقات

!تحذير

غير هامة إذا آنت ) صغيرة-آبيرة (عند اختيارك ألسماء ملفاتك فإن حالة األحرف

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

!حاول أن تختار لنفسك منهجا في آل شيء ، حتى في حالة األحرف إذا آنت تفضل استخدام األحرف الصغيرة فاستخدمها بشكل دائم ، و العكس صحيح

.بالطبع المضيفات ال تتعرف ةت بأسماء عربية حيث إن أغلبيآذلك ال أنصح أبدا بتسمية الملفا

!عليها و بالتالي ستعتبر أن ملفك غير موجود

:ثم لنكتب هذه السطور في ملفنا

Page 16: Learn HTML Css Tahani

- 16 -

1شكل

ماذا تعني هذه الوسوم ؟...لنتناولها واحدا تلو اآلخر

<html>

الحظ أن نفس األمر يستخدم . بداية صفحتك بكتابتك لهذا األمر فإنك تخبر المتصفح ب . الختتام صفحتك – مع الشرطة المائلة –في نهاية الصفحة أيضا

لكن يمكن أن نستفيد منه لتنسيق ... ال يقوم بأي تنسيق – بهذا الشكل –هذا األمر اتجاه (الصفحات العربية بحيث يكون االتجاه االفتراضي لها من اليمين إلى اليسار

) .ابة ، اتجاه شريط التمريرالكت :هو أن تمرر المتغير اإلضافي التالي آل ما عليك

(Dir=”rtl”) :فيصبح األمر هكذا

<HTML dir=”rtl”>

<head> الجسم يحتوي على المعلومات التي ... تتكون آل صفحة هتمل من رأس و جسم

ات أخرى ستعرض لمتصفحي موقعك أم الرأس فإن الغرض منه هو تمرير معلوم .للمتصفح

.يعني بداية رأس الصفحة ) <head>(الوسم الحالي ستتعلم إضافة أشياء آثيرة داخل هذا الرأس منها وسم إثبات حقوقك في آتابة آود

آذلك يمكنك أن تضيف بعض ). Meta tags(الصفحة و الذي يعتبر أحد الوسوم الوصفية . داخل الرأس أآواد الجافا سكريبت أو الفيجوال بيسك سكريبت

:و بالطبع فإن الوسم بحاجة لوسم إغالق هو الوسم </head>

<title> بعد استعراض الصفحة التي أنشأناها –الق نظرة سريعة إلى أعلى نافذة المتصفح

إن هذه التجربة السريعة توضح لك " . عنوان الصفحة"قبل قليل ، ستالحظ وجود العبارة يقوم هذا الوسم بإرسال الجملة التي تكتبها <title>الغرض من استخدام وسم

Page 17: Learn HTML Css Tahani

- 17 -

.داخله إلى المتصفح ليقوم بدورة بعرضها على زائر الصفحة آعنوان للصفحة :و بالطبع فإن الوسم بحاجة لوسم إغالق هو الوسم

</title>

<body>

فإذا آان الرأس يبدأ .. أنت تعرف اآلن أن آل صفحة هتمل تتكون من رأس و جسم .<body> فإن الجسم يبدأ بالوسم <head>وسم بال

.سنضع ما نريد عرضه داخلي وسمي الجسم .. هناك الكثير و الكثير من األوسمة التي يمكن أن نضعها داخل جسم الصفحة .سنتعرف على آل وسم بالتفصيل بعد قليل

:ال أنسى أن أذآرك بأن الوسم يحتاج لوسم ختامي هو </body>

.ذه السطور دائما عند بداية أي ملف هتمل تنشئه اآتب ه! إذن

:و هاهو مرة أخرى للتذآير ... فهو الشكل العام لكل صفحات هتمل

2شكل

:تستطيع تذآر هذا الهيكل العام على أساس أنه يتكون من ثالث مستويات رئيسية

.<html>المستوى األول هو مستوى وسم :مستوى يضم المستوى الثاني المكون من جزأين و هما هذا ال

<head>مستوى الوسم : المستوى الثاني أ <body>مستوى الوسم : المستوى الثاني ب

و آل مستوى من هذين المستوين يضم مستوى فرعي هو مستوى األوسمة التي ...سنتعرف عليها اآلن

:وسوم رأس الصفحة

: التي قد تصادفك في رأس الصفحة و هي سنبدأ بالتعرف على األوسمة

<meta>

Page 18: Learn HTML Css Tahani

- 18 -

األوسمة الوصفية ليست . هذه هي األوسمة الوصفية التي تحدثنا عنها قبل قليل وسما واحدا بل إنها مجموعة آبيرة من األوسمة يمكنك أن تختار ما تشاء منها أو

!تترآها جميعا إن أردت

.<head>ين وسمي و تكتب ب.. هذه األوسمة لها صيغة عامة :الصيغة العامة لها آالتالي

<meta name="" content="">

:األمثلة عديدة و ال يمكن أن نسردها جميعا هنا لذا سنكتفي بذآر أهم األمثلة فقط

<meta name="author" content="[email protected]">

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

في نافذة متصفح ) املصدر>==عرض (الشفرة المصدرية للصفحة و ذلك من خالل األمر .إنترنت اآسبلورر

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"> <meta http-equiv="Content-Language" content="ar-sa">

هذان السطران يطلبان من المتصفح أن يقوم بعرض الصفحة باستخدام التشفير العربي

.يستحسن أن تضيف هذان السطران في رأس آل صفحة من صفحاتك . لألحرف بلد 22لغة الرسمية لـ يوجد بدائل للسطر الثاني ، فكما نعلم فإن اللغة العربية هي ال

. بديل لهذا السطر 22مما يعني وجود حوالي . عربي :مثال

<meta http-equiv="Content-Language" content="ar-ae">

و آما يثبت لنا استخدام أحد البدائل أعاله ، فإن اللغة العربية واحدة في .. آما نعرف

الخيار هنا ال يتعدى . لبدائل عن غيرها و ال يختلف استخدام أحد هذه ا! أي بلد عربي .آونه تفضيل شخصي

:مثال آخر

<meta http-equiv="Refresh" content=0;URL="http://www.c4arab.com">

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

com.arab4c.www://http أو آما تحدد بنفسك في األمر . .ال تتردد بتجربة هذا السطر بنفسك إن لم تكن الفكرة قد اتضحت لك بعد

:وسوم جسم الصفحة

تي ستظهر نتائجها لدى زوار الوسوم ال.. و اآلن سننتقل إلى الوسوم التي تهمنا حقا .صفحتك

:لنأخذ أوال المثال التالي

Page 19: Learn HTML Css Tahani

- 19 -

3شكل

عندما . في جسم الصفحة " بسم اهللا الرحمن الرحيم"آما الحظت ، لقد قمنا بكتابة

:تحفظ الملف بالتغييرات الجديدة فإنك ستحصل على صفحة شبيهه للصفحة التالية

4شكل

:تابع معي الوسوم التالية .. نريد أن نضيف بعض التنسيقات على هذه العبارة

<font>

Page 20: Learn HTML Css Tahani

- 20 -

يمكنك بواسطة هذا . هذا الوسم هو وسم خاص بتنسيق الخط المستخدم للكتابة .الوسم أن تغير الخط المستخدم ، اللون ، الحجم

:آما يوضح الجدول التالي

المتغير الوصفذا المتغير يحتوي على المعلومات ه

.الخاصة باللون المستخدم في الكتابة Color

هذا المتغير يحتوي على المعلومات الخاصة باسم الخط المستخدم في الكتابة

.

Face

هذا المتغير يحتوي على المعلومات الخاصة بحجم الخط المستخدم في

.الكتابة

Size

1جدول

.. لنضيف ما تعلمناه على ملفنا السابق اآلن

5شكل

قم بفتح الصفحة في متصفحك أو قم بتحديث الصفحة إن آانت ما .. احفظ الملف اآلن

:ستحصل على صفحة شبيهه بالصفحة التالية . زالت مفتوحة

Page 21: Learn HTML Css Tahani

- 21 -

6شكل

تلميحة ذآية

أن يكون نوع الخط الذي حددته للمتصفح باستخدام الوسم السابق موجودا على يجب

ماذا لو لم يمكن الخط موجودا على أجهزة . جهازك و أجهزة متصفحي موقعك يمكنك أن تحدد للمتصفح عدة خيارات يستخدمها السم الخط ، ! متصفحي موقعك ؟

.حتى تتجنب هذه المشكلة :ريق آتابة أآثر من خط تفصلهم بفاصلة مثل يمكنك القيام بذلك عن ط

<Font face="Tahoma, Verdana, Arial">

..بعد أن تعلمنا آيفية تنسيق الجمل فإننا سنتعلم آيفية تنسيق الفقرات

<p> .يقوم هذا الوسم بمهمة تنسيق الفقرات على حسب المتغيرات التي ترسلها معه

:لنأخذ مثاال على ذلك للتوضيح

Page 22: Learn HTML Css Tahani

- 22 -

7شكل

:سيكون الناتج آما يلي

8شكل

:و تجد شرح هذه المتغيرات في الجدول التالي

المتغير الوصفهذا المتغير يحتوي على المعلومات

).يمين،وسط،يسار(الخاصة بمحاذاة النص align

Page 23: Learn HTML Css Tahani

- 23 -

هذا المتغير يحتوي على المعلومات من اليمين إلى (ة باتجاه الكتابة الخاص

).اليسار أو العكس

dir

2جدول

<H1> ) .Heading(هذا الوسم يقوم بتنسيق الجملة على شكل رأس فقرة

..في الواقع يوجد ستة مستويات لرؤوس الفقرة <H1> <H2> <H3> <H4> <H5> <H6>

آما يشير الوسم األخير إلى ... الرؤوس الوسم األول يشير إلى أعلى مستوى من .أقل مستوى من الرؤوس

:لنأخذ مثاال على ذلك

9شكل

: جرب بنفسك من فضلك –و هذا هو الناتج الذي ستحصل عليه

Page 24: Learn HTML Css Tahani

- 24 -

10شكل

!تحذير

ي لديه عند استخدامك لوسم رأس يقوم المتصفح باستخدام نوع و حجم الخط االفتراض

.الفقرة يمكنك أن تجبر المتصفح على استخدام تنسيق معين مع هذا الوسم من خالل لغة أو

.التي سنتعرف عليها في الفصل التالي ) CSS(تقنية السي اس اس

<BR>

.يقوم هذا الوسم بطباعة سطر فارغ على الشاشة ! ال يوجد الكثير لنقوله هنا الحظ أنه يمكنك استخدام هذا الوسم أآثر . تخدامه بنفسك و راقب النتيجة جرب اس

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

سم أو وسم آخر يقوم بمهمة شبيهه لم تفصل بينهما باستخدام هذا الو سطر واحد ماهذا يعني أن المتصفح يتجاهل األسطر . )<p>: وسم الفقرات على سبيل المثال (

.الفارغة و المسافات الفارغة تماما !استخدمه آما هو و انتهى . هذا الوسم هو أحد الوسوم التي ال تحتاج لوسم إغالق

<HR>

رات على الصفحات التي سبق لك زيارتها ؟هل الحظت وجود خط فاصل بين بعض الفق ) .Horizontal Line(هذا الخط الفاصل نسميه في عالم الوسوم بالمسطرة األفقية

.أيضا هذا الوسم ال يتطلب وسما إلغالقه :مثال

Page 25: Learn HTML Css Tahani

- 25 -

11شكل

:و هذه هي النتيجة المتوقعة

12شكل

<B> ) .Bold(قوم هذا الوسم بتنسيق النص على هيئة نص عريض ي

<I> ) .Italic(يقوم هذا الوسم بتنسيق النص على هيئة نص مائل

<S>

) .Strike through(يقوم هذا الوسم بتنسيق النص على هيئة نص مشطوب

Page 26: Learn HTML Css Tahani

- 26 -

<U> ) .Underline(يقوم هذا الوسم بتنسيق النص على هيئة نص مسطر

:توضيحي و هذا مثال

13شكل

:و هذه هي النتيجة

14شكل

Page 27: Learn HTML Css Tahani

- 27 -

<BlockQuote> فيقوم ) . Quote(يقدم هذا الوسم تنسيقا خاصا بالعبارات المقتبسة من نصوص أخرى

.بتوسيط النص و زيادة الهوامش الجانبية له :هذا مثال جاهز بعد استخدامه

15شكل

16شكل

<pre> يقوم هذا . أي النص المنسق مسبقا preformatted يشير إلى آلمة preاالختصار

“الوسم بتنسيق النص بحسب الطريقة التي آتبت بها نصك تماما و باستخدام خط monospace” .رغة بين أسطر نصك فإنها ستظهر إذا آنت قد ترآت بعض األسطر الفا

.هذه المرة آما آتبتها و لن يتجاهلها المتصفح :راقب المثال التالي بتمعن

Page 28: Learn HTML Css Tahani

- 28 -

17شكل

18شكل

<code> هذا الوسم شبيه جدا بالوسم السابق ،من ناحية انه ينسق النص باستخدام الخط

monospaceجربه بنفسك . نه ال يضيف أسطر فارغة في النص المنسق ، لك.

Page 29: Learn HTML Css Tahani

- 29 -

<ul> :المثال التالي يوضح ذلك . يستخدم هذا الوسم لكتابة قائمة منسقة

19شكل

20شكل

:يمكنك إضافة مستوى فرعي للقائمة بطريقة سهلة آما يوضح الكود التالي

Page 30: Learn HTML Css Tahani

- 30 -

21كل ش

..عليك أن تجرب النتيجة بنفسك

<ol> الفارق الوحيد هو أن هذه القائمة هي قائمة .. هذا الوسم شبيه بالوسم السابق

. مرتبة رقميا في مقابل القائمة غير المرتبة رقميا السابقة

22شكل

Page 31: Learn HTML Css Tahani

- 31 -

<a>

إن أردنا إنشاء وصلة تشعبية تنقلنا لصفحة أخرى عند الضغط عليها ؟ علينا و ماذا نفعل هذا الوسم له وسم بداية ووسم نهاية و يحتاج . للقيام بذلك <a>أن نستخدم الوسم

:لنطلع على هذا الجدول لمزيد من التوضيح . لمتغيرين يمرران من خالله في الغالب

المتغير الوصفعلى عنوان الصفحة هذا المتغير يحتوي .المراد االنتقال إليها

href

هذا المتغير يسمح لنا بفتح الصفحة الجديدة في نفس الصفحة أو في إطار

.جديد بحسب القيمة المعطاة له

target

3جدول

:لنأخذ مثاال بسيطا يوضح ذلك

23شكل

<img> نت صفحتك بسيطة ، فإنك تحتاج عادة إلضافة بعض الحيوية لها من خالل إدراج مهما آا

يحتاج الوسم إلى وسم البداية . لهذا الغرض <img>يستخدم الوسم . بعض الصور :فقط و يأخذ بعض المتغيرات التي يوضحها الجدول اآلتي

المتغير الوصف

هذا المتغير يحتوي على عنوان الصورة Src

Page 32: Learn HTML Css Tahani

- 32 -

.جها المراد إدراهذا المتغير يسمح لنا بتحديد حجم

.الصورة من حيث العرض Width

هذا المتغير يسمح لنا بتحديد حجم .الصورة من حيث الطول

Height

يمكنك أن تضيف إطار خارجي للصورة من .خالل هذا المتغير

Border

4جدول

:ة المثال التالي يوضح أآثر من حال

24شكل

:الجداول . دائما ما أردد و يردد غيري ، استخدام الجداول في تصميم الصفحات هو سر جمالها

..فلنتعرف على آيفية إدراج جدول سنحتاج للتعرف على أآثر من وسم يستخدم لهذا الغرض ، و حتى نفهم هذه

:جدول الوسوم يجب أن نعرف الهيكل العام ألي <وسم بداية الجدول> <وسم بداية صف> <وسم بداية خلية> <وسم نهاية خلية/> <وسم بداية خلية> <وسم نهاية خلية/> <وسم نهاية صف/> <وسم نهاية الجدول/>

أو بمعنى آخر هو جدول . هذا الجدول يتكون من صف واحد يحتوي بدوره على خليتين .مكون من صف واحد و عمودين

<table> يأخذ . <table/>يحتاج لوسم نهاية أيضا ... هذا الوسم هو وسم بداية الجدول

:المتغيرات الموضحة في الجدول التالي

Page 33: Learn HTML Css Tahani

- 33 -

المتغير الوصف bgcolor .يحدد هذا المتغير لون خلفية الجدول

هذا المتغير يسمح لنا بتحديد حجم .الجدول من حيث العرض

Width

ديد حجم هذا المتغير يسمح لنا بتح .الجدول من حيث الطول

Height

يمكنك أن تضيف إطار خارجي للجدول من .خالل هذا المتغير

Border

5جدول

<tr> .<tr/>و يحتاج لوسم نهاية أيضا . هذا الوسم يشير إلى بداية صف في الجدول

<td>

.<td/>و يحتاج لوسم نهاية أيضا . هذا الوسم يشير إلى بداية خلية في الجدول

:المثال التالي سيوضح هذه الوسوم إن شاء اهللا

25شكل

Page 34: Learn HTML Css Tahani

- 34 -

:النماذج اآلن ، أطلب منك أن ترآز جيدا ألن . ها قد وصلنا آلخر ما سنناقشه في لغة الهتمل

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

بالطبع ستكون هذه .. سنتعلم آيف ندرج عناصر النماذج المختلفة . في هذا المجال النماذج مجرد نماذج شكلية ال تفعل الكثير ؛ سنضيف لها المزيد من القوة في الباب

.ع من هذا الكتاب إن شاء اهللا الراب

<form> هذا الوسم يأخذ . <form/>و ينتهي آذلك بوسم النهاية . يبدأ آل نموذج بهذا الوسم

:بعض المتغيرات الهامة التي يمكن توضيحها من خالل الجدول اآلتي

المتغير الوصف

يحدد هذا المتغير نوعية الطلب المرسل ) .post , get , head(إلى المضيف

method

يحدد هذا المتغير اسم الملف الذي سيعالج محتويات النموذج بعد النقر على

.زر اإلرسال

action

6جدول

<input>

الغرض األساسي من النماذج هو التفاعل مع المستخدم عن طريق قبول بعض لها أشكال –الل خبرتك مع النماذج آما تعرف من خ–هذه المدخالت . المدخالت منه

.الخ ... دة ، فقد تكون عبارة عن مربع نص أو زر خيار أو مربع العالمة أو زر أوامر متعد

و بطبيعة الحال ، تحتاج هذه الوسوم إلى بعض المتغيرات آي تظهر بالشكل المطلوب ، :هذا ما يوضحه الجدول التالي

المتغير الوصفمربع نص ، (نوع العنصر يحدد هذا المتغير

) .الخ.. زر خيار ، زر أوامر type

يجب أن تحدد اسما لكل عنصر من عناصر النموذج ، يمكنك القيام بذلك عن طريق

.هذا المتغير

name

قد ترغب في إعطاء قيمة افتراضية للعنصر .من خالل هذا المتغير

value

7جدول

:حد هذه العناصر ؟ دعنا نتعرف على ذلك سوية عن طريق األمثلة التالية آيف ندرج أ

Page 35: Learn HTML Css Tahani

- 35 -

26شكل

:ستكون النتيجة هكذا

27شكل

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

actionو ذلك ألنه الملف المحدد في خاصية " form.php"المتصفح سيحاول فتح الملف قد تتساءل حاليا عن الفرق بين النوعيات المختلفة التي يمكن أن نرسل بها .

Page 36: Learn HTML Css Tahani

- 36 -

ع من الكتاب لكني سأترك هذا الجزء للباب الراب) 6راجع جدول (المعلومات إلى المضيف .بإذن اهللا

:مثال آخر يحتوي على المزيد من العناصر يلي هذا السطر

28شكل

:و هذه هي النتيجة

Page 37: Learn HTML Css Tahani

- 37 -

29شكل

:سأشرح هذه العناصر بشيء من التفصيل <input type="checkbox" name="C1" id="a"><label for="a"> <label/>1 العالمة مربع

. بداخله " "يعطينا هذا الوسم مربع العالمة الذي يسمح للمستخدم بوضع عالمة بعد ذلك قمنا بكتابة تعريف نصي يظهر " . a"و له المعرف " C1"هذا العنصر له االسم

يحتاج لوسم <label>الحظ أن وسم . <label>أمام المستخدم باستخدام الوسم . ال يحتاج لوسم نهاية <input>م نهاية بينما الوس

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

.الذي يسمح للمستخدم باختيار زر واحد فقط آما سنرى بعد قليل

- =- = - = -= - = - = - = - = - <input type="checkbox" name="C2" id="b"><label for="b"> <label/>2 العالمة مربعهذا هو نفس الوسم السابق مع تغيير االسم و المعرف فقط ليعطينا مربع عالمة جديد

.يظهر للمستخدم

- =- = - = - = - = - = - = - = - <input type="radio" value="V1" name="R1" checked id="c"><label for="c">1 اخليار زر</label>

هي تلك الدوائر المفرغة ) radio buttons(أزار الخيار . هذا هو الوسم الخاص بزر الخيار و التي تسمح للمستخدم باختيار أحد ) 29شكل (التي شاهدناها في الشكل األخير

ع الوسم السابق ، نستخدم الوسمو آما شاهدنا م). جرب بنفسك(هذه األزرار فقط <label> لكتابة تعريف نصي بجوار العنصر .

- =- = - = - = - = - = - = - = -

Page 38: Learn HTML Css Tahani

- 38 -

<input type="radio" value="V2" name="R1" id="d"><label for="d">2 اخليار زر</label>

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

ماذا تالحظ ؟ إن الوسمين يحمالن نفس االسمname="R1"

اختيار (و هذا شرط أساسي الستخدام أزرار الخيار حتى تؤدي غرضها بالشكل الصحيح

) .خيار واحد فقطو ستكتشف أن المستخدم سيصبح قادرا .. اني مثال جرب تغيير االسم في الوسم الث

.على اختيار أآثر من خيار في هذه المرة يختار (قد تحتاج في بعض النماذج إلى استخدام أآثر من مجموعة من أزرار الخيار

حينها فقط يمكنك تحديد اسم مختلف لكل ) المستخدم خيارا واحدا من آل مجموعة .مجموعة من األزرار

- =- = - = - = - = - = - = - = - <textarea rows="2" name="S1" cols="20">النص هنا</textarea>

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

و يشير إلى عدد ) cols( و يشير إلى عدد الصفوف ، )rows(تغيرين النص من خالل الم .األعمدة

- =- = - = - = - = - = - = - = - <select size="1" name="D1"> <option value=1>األول اخليار</option> <option value=2>الثاني اخليار</option> </select>

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

.<option>يحتوي على الوسم

!آان هذا هو الوسم األخير في هذا الفصل !" الحمد أنهيت الفصل األول بنجاح و هللا"تستطيع اآلن أن تأخذ قسطا من الراحة بعد أن تردد

:الخالصة أصبحنا نعرف الهيكل العام ألي صفحة هتمل . تعرفنا في هذا الفصل على لغة الهتمل

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

.فحاتنا ص

:مراجع إضافية

Page 39: Learn HTML Css Tahani

- 39 -

- HTML4 Bible by Bryan Pfaffenberger and Alexis D. Gutzman (IDG Books)

- DHTML: The Definitive Reference by Danny Goodman (O’Reilly)

Page 40: Learn HTML Css Tahani

- 40 -

-

CSSمدخل للـ : الفصل الثاني

ا عن أنت تقرأ هذا الكتاب ألنك تخطط لتنفيذ مشاريع بي اتش بي يزيد عدد صفحاته أليس آذلك ؟! العشرة صفحات

لنتخيل معا أنك قبلت تنفيذ مشروع متوسط الحجم ألحد العمالء و أنك ... حسنا

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

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

! صفحة ؟50ماذا لو آان المشروع مكونا من ! من فقراتها لتغير هذه القيمة أآثر من شخص بشكل منفصل ؟و ماذا لو آان يعمل على المشروع

في الواقع فإن هذه القصة القصيرة التي افتتنا بهذا الفصل و التي ستواجهك آثيرا عند و التي تعلمناها –وحدها " هتمل"التعامل مع عمالءك تنقلنا للتفكير من استخدام لغة

.في الفصل السابق إلى لغة تعطينا مرونة أآبر التنسيق عن المحتوى و من ثم وضع التنسيق في الفكرة باختصار تكمن في فصل

!ملف منفصل يمكنه تغييره لتتغير آامل صفحات موقعك إذا ، أجد نفسي ملزمة بشرح هذه اللغة قبل البدء بشرح لغة بي تش بي حتى نؤآد

استخدام التقنية المناسبة في المكان : على المبدأ الذي نسير عليه من بداية الكتاب .المناسب

:شير األحرف في اسم اللغة إلى العبارة اإلنجليزية التالية ت

Cascading Style Sheets .CSS: و اختصارها هو ) . صفحات األنماط االنسيابية(و تعني

.نصف ساعة من الزمان تعتبر مدة جيدة ! ينبغي أن ال يأخذ هذا الفصل من وقتك الكثير

صفحات األنماط االنسيابية في صفحاتنا دون أن في الواقع فإننا نستخدم نوعا من أنواع :و لنأخذ هذا المثال البسيط . ندري

30شكل

Page 41: Learn HTML Css Tahani

- 41 -

آما الحظت ، لم أقم بتحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة د هذا التنسيق ق. باستخدام المتصفح ستجد تنسيقا معينا لنوع الخط و حجمه و لونه

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

.إذا لم تحدد التنسيق بشكل واضح في صفحتك لن تكتب أي تنسيق في .في الواقع ، إن تقنية السي اس اس تعتمد نفس المبدأ

األساسية لكنك ستحدد بالتفصيل التنسيق الذي تريده في ملف صفحة الهتمل .منفصل

..لنلقي نظرة على الطريقة بالتفصيل

معلومة إضافية

بعد اهتمام المتصفحات الشهيرة – CSS –ظهرت الحاجة الستخدام هذه التقنية

لوسوم بإضافة وسوم هتمل إضافية هي ا) االنترنت اآسبلورر و النت سكيب : أمثال ( W3Cقامت جمعية . الخاصة بتنسيق النص و التي تعرفنا عليها في الفصل السابق

تلك التي ال تحتوي على –باعتماد هذه التقنية لتساعد على نقل المواقع قديمة الطراز . إلى الطراز الجديد من صفحات إنترنت –وسوم التنسيق

معلومة إضافية

W3C هو اختصار لـ World Wide Web Consortium و هي الجمعية

.HTMLالمسؤولة عن إصدار نسخ قياسية من لغة

:الصيغة العامة للنمط

آما قلنا ، فإن األنماط تحدد التنسيق ألوسمة الهتمل المختلفة التي تعرفنا عليها في تستطيع تحديد تنسيق معين لوسم الفقرة أو تنسيق معين للجداول . الفصل السابق

إذا البد أن نتوقع بأن الصيغة العامة ألوسمة السي اس اس ستتضمن وسم . ذا و هك :آما توضح هذه الصيغة تماما . هتمل الذي سيطبق عليه النمط و آذلك التنسيق

وسم هتمل : { المتغير " : القيمة" } آما نالحظ فإن الصيغة تقتضي آتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتان

يتان ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأس .رأسيتين أخريتين

:لنأخذ بعض األمثلة الحقيقية لتتضح الصورة

a { color: #008000; font-size: 1em } body { border-style: solid } h2 { color: #800000 }

Page 42: Learn HTML Css Tahani

- 42 -

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شكل

قمنا بكتابة اسم الوسم المطلوب ، ثم نقطة ، ثم ! تستطيع شرح الطريقة بنفسك .االسم الذي نختاره للفئة الجديدة و نكمل آما تعودنا

Page 43: Learn HTML Css Tahani

- 43 -

و المثال التالي يعرفنا بالطريقة التي نستخدمها مع أآواد هتمل لتحديد فئة معينة دون :أخرى

32شكل

:ستكون النتيجة في المتصفح هكذا

33شكل

إذا أردت أن تتعلم بي اتش بي حقا ، فال تتكاسل في تنفيذ مثل : مالحظة للتذآير .صدقني ستكتشف أشياء جديدة آلما جربت ! هذه األمثلة البسيطة بنفسك

تلميحة ذآية

Page 44: Learn HTML Css Tahani

- 44 -

:يع الوسوم في صفحتك استخدم الطريقة التالية لتضيف فئة يمكن استخدامها مع جم

.red{ color: “red” }

!احذف اسم الوسم و اآتفي بوضع نقطة مع اسم الفئة

:طريقة إدراج األنماط في الصفحة بقي علينا أن نتعرف على ... تعرفنا على الهيكل العام لصفحات األنماط االنسيابية

ات هتمل أو آيفية ربطها بها ؟آيفية إدراج هذه األنماط في صفح

:هناك ثالث طرق إلدراج األنماط في صفحتك ).external file( باستخدام ملف خارجي -أ ) .Head( عن طريق رأس الصفحة -ب

).Inline(داخل الوسم -جـ

:سنقوم بشرح آل طريقة باألمثلة

):external file( باستخدام ملف خارجي -أضع . ار الذآي لمن يفكر في برمجة مشاريع من عدة صفحات هذه الطريقة هي الخي

آل التنسيقات التي تريدها في هذا الملف الخارجي ثم أدرج رابط لهذا الملف في آل ) .جميع صفحات مشروعك عادة(صفحة تريد استخدام األنماط فيها

للون إذا طلب منك عميلك تغيير لون الخط المستخدم من اللون األزرق النيلي إلى افقط ! و اللذان قد ال يختلفان آثيرا لكن عليك أن ترضي ذوق العميل –األزرق الغامق

.قم بتغيير سطر واحد في هذا الملف و انتهينا ، يمكنك آتابته عن طريق برنامج المفكرة، css.هذا الملف يجب أن يحفظ باالمتداد

. هذا الفصل من31يمكنك االطالع على نموذج من هذا الملف في الشكل

:استخدم الوسم التالي في رأس آل صفحة من صفحات الهتمل

34شكل

) :Head( عن طريق رأس الصفحة -ب

Page 45: Learn HTML Css Tahani

- 45 -

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

)<head>(في رأس الصفحة ) <style>(األنماط عن طريق الوسم :لنأخذ مثاال لصفحة من صفحات هتمل لنتعرف على الطريقة بشكل أوضح

35شكل

) :Inline(داخل الوسم -جـ نك تضع التنسيق أل! هذه الطريقة ال تختلف آثيرا عن استخدام وسوم هتمل للتنسيق

ستحتاج لهذه الطريقة لتنسيق وسم خاص ال . مع وسم هتمل الذي تريد تنسيقه ما . أو لتغيير التنسيق المدرج من صفحة أنماط خارجية و هكذا ! يتكرر آثيرا مثال

!تحتاجه هو ما يحدد اختيارك لتالي يوضح آمتغير يرسل مع الوسم المراد تنسيقه ، المثال اstyleسنستخدم آلمة

:ذلك

36شكل

معلومة إضافية

!هل تتساءل عن سبب تسمية صفحات األنماط االنسيابية بهذا االسم ؟

في . أستطيع أن أخبرك عن السبب بعد شرحنا للطرق الثالث المختلفة إلدراج األنماط

Page 46: Learn HTML Css Tahani

- 46 -

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

. مع وسم الفقرات " 1"لخط الفقرة في رأس الصفحة ثم حددت الحجم " 2"الحجم نا أن األنماط ستنساب على بعضها و تكون النتيجة ظهور الفقرة باستخدام نقول ه " !1"الحجم

) :األول هو األعلى أفضيلة(األفضلية تكون باستخدام هذا االنسياب .التنسيق مع الوسم -1 .التنسيق في رأس الصفحة -2 .التنسيق في الملف الخارجي -3 .التنسيق االفتراضي في المتصفح -4

):Pseudo-class(أشباه الفئات

تعرفنا على الفئات ، فما هي أشباه الفئات يا ترى ؟ إن أقرب مثال يوضح الفكرة هو .مثال تنسيق الروابط التشعبية

:تأخذ أشباه الفئات الصيغة العامة التالية وسم هتمل: شبه الفئة { المتغير " : القيمة" }

):في حالة وجود فئة أيضا(أو وسم هتمل. فئة:لفئةشبه ا { المتغير " : القيمة" }

:لكنك ستكتشف مدى سهولته بعد المثال التالي ! قد تبدو مزعجة للوهلة األولى

37شكل

آما . للرابط العادي الذي لم يزار بعد ) 000088#(حددنا اللون : في المثال السابق

حددنا اللون . يظهر خط سفلي تحت الرابط حددنا تنسيق النص بال شيء حتى ال آذلك حددنا اللون الزهري مع خط بأسفل النص و ! األحمر للرابط الذي سبقت زيارته

.فقد حددنا له اللون األزرق الفاتح ) الحالي(أما الرابط النشط . للنص ) نقاط10(حجم .الطريقة سهلة ، جربها بنفسك اآلن

!تحذير

ثم link(أنماط الروابط التشعبية بالترتيب الوارد في المثال السابق أنصحك بكتابة

Page 47: Learn HTML Css Tahani

- 47 -

visited ثم hover ثم active ( و إال فإن األخريين لن يعمال بالشكل الصحيح!

:سنأخذ مثاال آخر يوضح آيفية استخدام الفئات مع أشباه الفئات في مثال واحد

38شكل

للرابط الذي لم يزار باللون األخضر و في ) main( نفسه ، حددنا الفئة المثال يشرح .للرابط الذي لم يزار أيضا باللون األحمر ) sub(المقابل حددنا الفئة

يجب استخدام الطريقة المشروحة في جزء الفئات عند استخدامك إحدى الفئتين .بالطبع

) :ID(المعرف

يقات معينة باسم هذا المعرف على أن يتم إدراجها تستخدم فكرة المعرف لحفظ تنس .مع آل وسم يستخدم هذا المعرف آمتغير ضمن متغيراته األخرى

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

39شكل

:مراد تنسيقه نستخدم الطريقة التالية و عند الوسم ال

40شكل

Page 48: Learn HTML Css Tahani

- 48 -

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

:التوارث

. ماط ذآرنا سابقا أن الصفحة الواحدة قد تحتوي على الطرق الثالث المختلفة إلدراج األن مع الوسم ، ثم في رأس (و أن المتصفح سيستخدم التنسيق األقرب إلى الوسم

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

لنفرض : حسنا ، نريد أن ننتقل ألبعد من ذلك . لون األخضر الخضر فإن الغلبة ستكون لو أن النمط في رأس الصفحة يحدد " 3"أن الملف الخارجي يحدد اللون األحمر و الحجم

.اللون األصفر و المحاذاة إلى الوسط و أن النمط المرفق مع الوسم يحدد اللون األخضر لكن ماذا عن المحاذاة و … ون أخضرا ماذا سيحدث اآلن ؟ نعرف مسبقا أن اللون سيك

. الحجم اللذان لم يتدخل النمط المرفق مع الوسم في تحديدهما ؟ الجواب هو التوارث " 3"التوراث يعني أن النمط النهائي سيكون لون أخضر ، محاذاة إلى اليمين ، و حجم

.بمعنى أن التنسيقات هنا متوارثة من األنماط البعيدة :تتضح الصورة أآثر لنأخذ مثاال ل

:الملف الخارجي

41شكل

:صفحة الهتمل

42شكل

Page 49: Learn HTML Css Tahani

- 49 -

:النتيجة ستكون هكذا

43شكل

:المالحظات

تطبيقات سطح المكتب أو تطبيقات –إذا آانت لديك بعض المعلومات عن لغات البرمجة المالحظات هي نوع من أنواع التوثيق . فإنك حتما معتاد على فكرة المالحظات –لويب ا

التي تتيح لك آتابة تلميحة صغيرة في أول آل صفحة أو بجانب األسطر الغامضة بعض و بالطبع . الشيء و هكذا بحيث يسهل عليك فهم ما آتبته عند الرجوع إليه بعد مدة

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

إلدراج مالحظة في ملف السي اس اس ، قم باتباع الطريقة الموضحة في المثال :التالي

44شكل

:المزيد من األمثلة حتى اآلن ، تناولنا الصيغة العامة الستخدام أنماط السي اس اس ، تناولنا آيفية إدراج هذه األنماط في صفحاتنا ، تكلمنا عن أمور أخرى مثل المعرفات و التوارث و المالحظات

Page 50: Learn HTML Css Tahani

- 50 -

، لكن ما زلنا بحاجة لمزيد من األمثلة التي تجعلنا معتادين على استخدام األنماط مع السبب في الترآيز على المزيد من األمثلة أنه و آما جاء . هتمل أي وسم من وسوم

معنا في بعض األمثلة السابقة ، نالحظ اختالف متغيرات السي اس اس عن بعض فإننا نرمز له بـ size)(فإذا آان حجم الخط في وسوم هتمل يرمز له بـ ! متغيرات هتمل

)font-size ( ل أن نأخذ آل وسم من وسوم إذن ، األفض. في ملفات السي اس اس و نتعرف على المتغيرات المناسبة لها – التي تعرفنا عليها في الفصل السابق –هتمل

:سنأخذها على شكل جداول للتسهيل . احتفظ بها آمرجع فقط بعد أن تطلع عليها و تجرب بعضها ! هذه الجداول ليست للحفظ (

)بنفسك

<body> المتغير الوصف

font-family .نوع الخط المستخدم متغيريحدد هذا ال font-size .يحدد هذا المتغير حجم الخط المستخدم

color .يحدد هذا المتغير لون الخط المستخدم Background-color .يحدد هذا المتغير لون الخلفية

يحدد هذا المتغير إحدى الصور آخلفية .للصفحة

Background-image

ير آيفية تكرار صورة يحدد هذا المتغ :الخلفية و يأخذ إحدى القيم التالية

(repeat, repeat-x, repeat-y, no-repeat)

Background-repeat

يحدد هذا المتغير لون القاعدة ألشرطة .التمرير الطولية و العرضية

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(إذا آنت قد حددت تنسيقا معين للنص باستخدام الوسم

Page 51: Learn HTML Css Tahani

- 51 -

يجب أن . بعين االعتبار ) body(داخل جداول ، فإن المتصفح لن يأخذ تنسيق الوسم .آما سنرى بعد قليل ) table(تحدد تنسيق الخط مع الوسم

<table> المتغير الوصف

نوع الخط المستخدم يحدد هذا المتغير .داخل الجدول

font-family

يحدد هذا المتغير حجم الخط المستخدم .داخل الجدول

font-size

يحدد هذا المتغير لون الخط المستخدم .داخل الجدول

color

Background-color .يحدد هذا المتغير لون خلفية الجدوليحدد هذا المتغير إحدى الصور آخلفية

.للجدول Background-image

الحدود (يحدد هذا المتغير لون اإلطار )األربعة

Border-color

الحدود (يحدد هذا المتغير سمك اإلطار :، قد يأخذ أحد القيم التالية ) األربعة

(thin, medium, thick, رقم)

Border-width

الحدود (يحدد هذا المتغير شكل اإلطار :، قد يأخذ أحد القيم التالية ) األربعة

(none, hidden, dotted, dashed, solid, double, inset, outset)

Border-style

Border-left-color .يحدد هذا المتغير لون الحد األيسر لإلطار دد هذا المتغير سمك الحد األيسر يح

.لإلطار Border-left-width

Border-right-color .يحدد هذا المتغير لون الحد األيمن لإلطار يحدد هذا المتغير سمك الحد األيمن

.لإلطار Border- right-width

.يحدد هذا المتغير لون الحد العلوي لإلطار Border-top-color تغير سمك العلوي األيسر يحدد هذا الم

.لإلطار Border-top-width

يحدد هذا المتغير لون الحد األسفل لإلطار .

Border-bottom-color

يحدد هذا المتغير سمك الحد األسفل .لإلطار

Border-bottom-width

9جدول

<ol>,<ul> المتغير الوصف

لخط المستخدم نوع ا يحدد هذا المتغير .في القوائم

font-family

يحدد هذا المتغير حجم الخط المستخدم font-size

Page 52: Learn HTML Css Tahani

- 52 -

.في القوائميحدد هذا المتغير لون الخط المستخدم

.في القوائمcolor

يحدد هذا المتغير صورة معينة آمحدد ) .يأخذ مسار الصورة آقيمة له(للقائمة

list-style-image

ر مكان محدد القوائم ، يحدد هذا المتغي :يأخذ القيمة

(Inside, outside)

list-style-position

يحدد هذا المتغير شكل محدد القوائم ، :يمكن أن يأخذ أحد القيم التالية

(None, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-latin, upper-latin)

list-style-type

10جدول

!تحذير

طالما أن الشبكة موجودة ، فإن المطورين لن يتوقفوا عن إضافة و حذف بعض

!المتغيرات من وقت آلخر آما أن المتصفحات المختلفة تختلف في دعمها للمتغيرات المختلفة و قيمها ، فإذا

ك أي نتيجة ، فقد يكون السبب جربت أحد القيم المذآورة في هذه الجداول و لم تظهر لأو ألن جمعية ! أن متصفحك ال يدعم ذلك ، إما تقصيرا من الشرآة المنتجة للمتصفح

w3c قد أسقطت المتغير من القائمة القياسية للوسوم . ستستفيد الكثير و لن تخسر شيئا . دائما جرب بنفسك آل األمثلة في هذا الكتاب ! لذلك

!

<input> المتغير الوصف

نوع الخط المستخدم يحدد هذا المتغير ) .مربع نص، زر الخيار(في عناصر النماذج

font-family

يحدد هذا المتغير حجم الخط المستخدم ).مربع نص، زر الخيار(في عناصر النماذج

font-size

يحدد هذا المتغير لون الخط المستخدم ).مربع نص، زر الخيار(في عناصر النماذج

color

يحدد هذا المتغير شكل اإلطار ، إنها صيغة مختصرة يمكن استخدامها مع عناصر

النماذج و غيرها ، حدد جميع خصائص :اإلطار بالشكل التالي آمثال

(border: 1px solid #000000;)

border

يحدد هذا المتغير لون خلفية عنصر .النموذج

background-color

Page 53: Learn HTML Css Tahani

- 53 -

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)

Page 54: Learn HTML Css Tahani

- 54 -

Javaمدخل للجافا سكريبت : الفصل الثالث Script

المحطة األخيرة قبل –و وصلنا بحمد اهللا للغة الثالثة ! ها قد انتهينا من تعلم لغتين

لماذا برأيك وضعت هذا الفصل آمدخل في آتاب لتعليم لغة . بتعلم البي اتش بي البدء !بي اتش بي ؟ بالتأآيد ليس لزيادة عدد صفحات الكتاب

في الواقع سنجني فوائد جمة من خالل تصفح هذا الفصل ، إليك بعض األهداف التي

:نطمح إلى تحقيقها من وراء هذا الفصل من مستوى تصميم المواقع بواسطة لغة الهتمل و سنحقق االنتقال المنطقي •

تقنية السي اس اس من جهة إلى مستوى تطوير المواقع بواسطة لغة بي اتش بي ، آيف ذلك ؟ تعتبر لغة الجافا سكريبت من المستوى المتوسط بين

سواء من ناحية السهولة و الصعوبة ، أو من ناحية –المستويين السابقين آما أنها جاءت بين المستويين السابقين من . نيات التي توفرها القدرات و اإلمكا

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

عه أشهر استخدمته شخصيا للوصول لـ بي اتش بي و هو ذات الطريق الذي اتب .مطورو المواقع آذلك

تعتبر الجافا سكريبت لغة برمجة من الوزن الخفيف ، بمعنى أن لديها قدرات •لغات البرمجة األخرى لكن باستبعاد القدرات العالية التي تقدمها لغات البرمجة

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

و األجمل أن الجافا سكريبت و بي اتش بي تتفقان في آثير من الصيغ ! نعم .العامة التي سنتعرف عليها بعد قليل

هل تذآر قاعدة التقنية المناسبة في المكان المناسب ؟ لقد ناقشناها في •نحن نتعلم الجافا سكريبت في : ا الكتاب ، مرة أخرى الفصول السابقة من هذ

هذا الكتاب ألننا لن نستخدم بي اتش بي في آل صغيرة و آبيرة في مشاريعنا جزء من الثانية حتى يكتمل ، 20فإذا آانت بي اتش بي تقدم ميزة تستغرق !

ب أن أجزاء من الثانية ، وقتها يج10بينما تقدم الجافا سكريبت نفس الميزة في تكون ذآيا بما فيه الكفاية و تختار الجافا سكريبت ، حتى لو آنت تعشق بي

أليس آذلك ؟ غالبا سنستفيد من الجافا سكريبت في مشاريعنا .. اتش بي Form(في الجزء الذي يتطلب التأآد من صحة مدخالت المستخدم في النماذج

Validation( .

سكريبت اآلن ؟ سيأخذ منك هذا الفصل وقتا أآثر إذن ، هل أنت مستعد لتعلم الجافا من الفصلين السابقين غالبا ، لكن ال تحاول أن تتخطى الفصل للفصول التالية قبل أن

.هذه هي نصيحتي الشخصية لك ، و الخيار لك بالنهاية ! تكمل

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

قبل أن نبدأ بالتعرف على الصيغ العامة لكتابة أآواد الجافا سكريبت ، سنتناول بعض :المعلومات العامة عن الجافا سكريبت على هيئة نقاط

آانت . )Netscape(تم تطوير الجافا سكريبت بواسطة شرآة نت سكيب • في البداية ، و مع انتشار لغة الجافا التي طورتها شرآة Live Scriptتدعى

Page 55: Learn HTML Css Tahani

- 55 -

Sun انضم فريق تطوير لغة الـ Live Script مع فريق عمل شرآة Sun ، ليستفيدوا Java Scriptو أطلقوا عليها مسمى ! خرجوا لنا بلغة جديدة

لجافا سكريبت و هذا يفسر تشابه الجافا و ا. من االنتشار الواسع للغة الجافا .في آثير من األمور

و لفة Javaعن آل من لغة الجافا Java Scriptتختلف الجافا سكريبت • و الثانية من Netscapeفاألولى من إنتاج شرآة . JScriptالجاي سكريبت

.ت و الثالثة من إنتاج شرآة مايكروسوف Sunإنتاج شرآة سنضيف سطور الجافا ! ويب فقط الجافا سكريبت هي لغة برمجة لتطبيقات ال •

.سكريبت في نفس الصفحات التي تحتوي على وسوم الهتمل تدعم أغلب المتصفحات الحديثة أآواد الجافا سكريبت ، مما يجعلها تتغلب •

على الفيجوال بيسك سكريبت المدعومة من قبل متصفح اإلنترنت اآسبلورر .فقط

– باإلضافة إلى لغة هتمل –كريبت نحن نحتاج الستخدام بعض أآواد الجافا س •ألن لغة الهتمل وحدها تعطينا صفحات ثابتة غير ديناميكية أما الجافا سكريبت فإن لها القدرة على إضافة محتويات تتغير تلقائيا بتغير الوقت ، نوع المتصفح ،

.قيمة مدخالت المستخدم و هكذا event(ة بناء على الحدث تتمتع الجافا سكريبت بالقدرة على التحكم بالنتيج •

driven . ( يمكنك تنفيذ أمر معين عند الضغط على زر معين ، عند مرور مؤشر هذه بعض –الفأرة فوق آائن معين ، عند تحميل الصفحة ، أو عند إغالقها

.األمثلة على األحداث :هناك نوعان من لغات برمجة الويب •

o جهة العميل)Client Side :(هو المتصفح - غالبا -تنا و العميل في حال هذا النوع من اللغات يعتمد على . الذي تستخدمه الستعراض الصفحة

تنفيذ سطوره على جهاز المستخدم و ليس على المضيف الذي يحفظ .الصفحة

o جهة المضيف(Server Side) : و المضيف هو جهاز الشرآة التي تقدم اللغات لوقت أطول تحتاج هذه. خدمة االستضافة لموقعك في الغالب

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

سنفصل الحديث . (تصنف الجافا سكريبت ضمن اللغات التي تنفذ جهة العميل ).عن هذين النوعين في الفصول القادمة بإذن اهللا

...ألمثلة البسيطة لنبدأ بكتابة بعض ا! لقد تكلمنا آثيرا

:الصيغة العامة إلدراج آود الجافا سكريبت إلى صفحتك ذآرنا أننا سنكتب أسطر الجافا سكريبت داخل أسطر الهتمل ، و سنضيف اآلن

إننا نستخدم أحد وسوم هتمل الخاصة الذي يتيح لنا إدراج . معلومة بسيطة أخرى هذا الوسم له وسم بداية و وسم <script>أآواد للغات خارجية ، أال و هو الوسم

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

:إذن هناك طريقتان إلدراج الجافا سكريبت

:إدراج الجافا سكريبت في نفس الصفحة .1 :لنراقب المثال التالي

Page 56: Learn HTML Css Tahani

- 56 -

45شكل

:ستكون النتيجة آالتالي

46شكل

يحتوي على األمر 6فالسطر رقم ! ليس هناك الكثير لنشرحه عن المثال أعاله <script> و قد أخذ المتغير language القيمة JavaScript للداللة على أن اللغة

.المستخدمة هي لغة الجافا سكريبت السالم " يحتوي على سطر آتب بلغة الجافا ، إنه يقوم بكتابة عبارة 7السطر رقم

أريد أن ) . ;(الحظ أن السطر ختم بالفاصلة المنقوطة . على شاشة المتصفح " عليكماية آل أقول هنا أن المبرمجين في أغلب لغات البرمجة يضعون الفاصلة المنقوطة في نه

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

.اصلة منقوطة حينئذ أن تفصلهم بف .<script/> يحتوي على وسم النهاية 8السطر رقم

!ألم أقل لك بأن األمر غاية في السهولة

Page 57: Learn HTML Css Tahani

- 57 -

معلومة إضافية

:يمكنك إدراج الجافا سكريبت بنفس األمر السابق مع تغيير بسيط ، هكذا

<Script type=”text/JavaScript”> األمر هنا</script>

!!نهاية ، اختر ما يعجبك النتيجة واحدة في ال

:إدراج الجافا سكريبت من ملف خارجي .2

و تحدثنا عن ميزة آتابة الكود – الفصل الثاني –تحدثنا سابقا عن تقنية السي اس اس لقد آانت الميزة . في ملف خارجي و إدراج اسمه فقط في الملفات التي تستخدمه

في أآثر من موضع و بالتالي الحاجة األساسية هي عدم الحاجة لتكرار نفس الكود .للتعديل في أآثر من ملف عند الحاجة لتعديل شيء بسيط في الكود

و الطريقة غاية في السهولة ، سنشرحها من . و اآلن لدينا ذات الميزة ، و ذات السبب : خالل المثال اآلتي

:أوال ، آيفية إدراج الملف الخارجي في صفحة الهتمل

47شكل

ثم أغلقنا الوسم . لتمرير اسم الملف الخارجي srcآما نالحظ ، لقد استخدمنا المتغير .دون آتابة أي شيء داخله

:ثانيا ، الملف الخارجي

48شكل

Page 58: Learn HTML Css Tahani

- 58 -

لف ، أشياء يجب أن نالحظها في المثال السابق ، أوال بالنسبة السم المهناك عدة في نهاية الملف ، هذا هو امتداد ملفات الجافا سكريبت jsالبد أنك الحظت االمتداد

، <srcipt>ثانيا نالحظ أننا قمنا بكتابة األسطر البرمجية وحدها بدون وسم . الخارجية و أخيرا بالنسبة ! إن إضافة هذا الوسم داخل الملف الخارجي يعتبر خطأ برمجي

.، هي اختيارية آما قلنا سابقا للفاصلة المنقوطة

:ثالثا ، النتيجة ستكون آالتالي

!تحذير

لتتجنب حدوث مشاآل مع المتصفحات التي ال تدعم الجافا سكريبت ، آل ما عليك هو

:أن تضيف الكود داخل وسم المالحظة من الهتمل ، هكذا <Script type=”text/JavaScript”> <!-- األمر هنا//--> </script>

:إدراج آود الجافا سكريبت في رأس الصفحة (شاهدنا في األمثلة السابقة طريقة إدراج الجافا سكريبت في جسم الصفحة مباشرة

body ( و الواقع أنه ليس . حيث ظهرت نتيجة الكود على شاشة المتصفح مباشرة أيضا فيه ، حيث يمكننا إدراجه في المكان الوحيد الذي يمكننا إدراج آود الجافا سكريبت

غالبا ما . رأس الصفحة حيث ال ينفذ مباشرة و لكن ينفذ عن طريق استدعاءه الحقا و بما أن رأس الصفحة هو . معينة ) function(نستخدم هذه الطريقة عند تعريف دالة

Page 59: Learn HTML Css Tahani

- 59 -

عائها الجزء الذي يتم تحميله أوال ، فإننا نضمن تحميل الدالة عند المستخدم قبل استد.

الحظ أنه يمكننا إدراج الجافا سكريبت في رأس الصفحة ، في جسم الصفحة ، أو في .أي أنه يمكنك إدراج أآثر من آود جافا سكريبت واحد في صفحة واحدة .. آالهما

:لنأخد مثاال يوضح آيفية إدراج الجافا سكريبت في رأس الصفحة

49شكل

. فقط <script>األمر آثيرا آما نالحظ ، آل ما تغير هو مكان إدراج الوسم لم يختلف

سنبدأ اآلن بشرح األشياء التي يمكنك إدراجها في أسطر الكود نفسه ، سنتعلم !البرمجة ذاتها اآلن

:المتغيرات

يصبح هذا المخزن ) . الخ..حروف ، أرقام (المتغير هو مخزن مؤقت لخزن المعلومات لماذا نحتاج لهذه المخازن في برامجنا ؟ . ا لك عندما تقوم بتعريفه في صفحتك متوفر

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

البد أن نستخدم اسم المخزن الذي سنستقبل فيه إذا. أن نسلم البرنامج للمستخدم عندما يقوم المستخدم . الذي ال نعرفه بعد –اسم المستخدم بدال من االسم ذاته

و يقوم بإدخال اسمه فإن هذا االسم سيتم – أو فتح الصفحة –بتشغيل البرنامج ض االسم ثم يقوم البرنامج بعر– ينتهي بإغالق الصفحة –تخزينه في مخزن مؤقت

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

. الصناديق منذ تعريفها في الصفحة و تنتهي حياتها بإغالق الصفحة

!تعريف المتغير ؟آيف أقوم ب: البد أنك تسأل نفسك اآلن

ثم اسم المتغير ثم varسنستخدم األمر .. األمر غاية في السهولة أيضا ! آالعادة :عالمة المساواة ثم قيمة المتغير االبتدائية ، هكذا

Var variable_name = value

: varآما تستطيع تعريف المتغير بدون آتابة الكلمة

Page 60: Learn HTML Css Tahani

- 60 -

variable_name = value

:مثال

50كل ش

في هذا المتغير ثم قمنا " السالم عليكم" و خزنا القيمة string1قمنا بتعريف المتغير .بطباعة المتغير على الشاشة

و اآلن سنضيف بعض األسطر إلى الكود السابق ، سنغير القيمة المخزنة ثم نعيد :طباعتها

51شكل

الحظ األرقام في أسماء (بالطبع استخدام أآثر من متغير في الصفحة الواحدة تستطيع ):المتغيرات

52شكل

:ستكون النتيجة في الحالتين السابقتين هكذا

Page 61: Learn HTML Css Tahani

- 61 -

:شروط تسمية المتغيرات

تفرض علينا لغات البرمجة المختلفة شروطا معينة على األسماء التي نختارها :و آذلك الحال بالنسبة للجافا سكريبت ، فيجب أن نراعي األمور التالية .. تغيراتنا لم

يتكون اسم المتغير من حروف أو أرقام أو آالهما ، آما يمكن أن يحتوي على • ) ._(رمز الشرطة السفلية

) يعتبر اسم خاطئ1var: مثال .(يجب أن يبدأ بحرف أو برمز الشرطة السفلية • var1: مثال (. )case sensitive(متغير باختالف حالة األحرف يختلف اسم ال •

)VaR1يختلف عن : مثال ( في الجافا سكريبت )reserved word(يجب أن ال يكون آلمة محجوزة •

varألنه عبارة عن أمر معروف في الجافا سكريبت يعتبر اسم خاطئ (

:المعامالت

العمليات الرياضية أو الحسابية و آذلك هي عبارة عن اإلشارات المستخدمة لتنفيذ ) &&، * ، -، : + بعض األمثلة على المعامالت تشمل . (العمليات المنطقية

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

:أنواع المعامالت

:معامالت حسابية -‌أ

هي تلك المعامالت التي تنفذ عمليات حسابية رياضية آالجمع و الطرح و الضرب و ..القسمة و غيرها

:الجدول التالي يقدم قائمة بهذه المعامالت

المعامل العمليةيمكنك استخدام األقواس للتغلب على

.أسبقية تنفيذ عملية على أخرى ()

Page 62: Learn HTML Css Tahani

- 62 -

يقوم هذا المعامل بعملية ضرب عددين، : ثال م

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=(x<y && y>1);

True يحتوي على القيمة z: النتيجة

&&

(المنطقية " أو"يقوم هذا المعامل بعملية OR( مثال ،:

X=1;y=2;z=(x< y || y>1); True يحتوي على القيمة z: النتيجة

||

" فيالن"يقوم هذا المعامل بعملية :، مثال )NOT(المنطقية

X=1;y=2;z=!(x<y); True يحتوي على القيمة z: النتيجة

!

Page 63: Learn HTML Css Tahani

- 63 -

:من المستحسن أن نأخذ مثاال حقيقيا على هذا النوع من المعامالت

53شكل

: معامالت المساواة -جـ

المعامل العملية

هذه هي إشارة المساواة التي اها أآثر من مرة إلعطاء قيمة استخدمن

:للمتغير ، مثال X=1;

1 يحتوي على القيمة xالمتغير : النتيجة

=

يقوم هذا المعامل بإضافة القيمة األصلية للمتغير على القيمة التي تقع يمين عالمة

:المساواة ،مثال X=1;x += 2;

3 يحتوي على القيمة xالمتغير : النتيجة )1+2(

+=

ا المعامل بطرح القيمة التي تقع يقوم هذيمين عالمة المساواة من القيمة األصلية

:للمتغير ،مثال X=2;x -= 1;

1 يحتوي على القيمة xالمتغير : النتيجة )2-1(

-=

يقوم هذا المعامل بضرب القيمة األصلية للمتغير في القيمة التي تقع يمين عالمة

*=

Page 64: Learn HTML Css Tahani

- 64 -

:المساواة ،مثال X=2;x *= 2;

4 يحتوي على القيمة xالمتغير : جة النتي)2*2(

يقوم هذا المعامل بقسمة القيمة األصلية للمتغير على القيمة التي تقع يمين عالمة

:المساواة ،مثال X=4;x /= 2;

2 يحتوي على القيمة xالمتغير : النتيجة )4/2(

/=

يقوم هذا المعامل بقسمة القيمة األصلية التي تقع يمين عالمة للمتغير على القيمة

:المساواة و يخزن باقي القسمة،مثال X=3;x %= 2;

1 يحتوي على القيمةxالمتغير : النتيجة )3%2(

%=

:معامالت المقارنة -د

المعامل العمليةيقوم هذا المعامل بمقارنة تساوي قيمتين

بناء على ذلك false أو trueو يخزن القيمة :، مثال

X=1;y=2;z=(x==y); يحتوي على القيمة zالمتغير : النتيجة

false.

==

يقوم هذا المعامل بمقارنة عدم تساوي بناء false أو trueقيمتين و يخزن القيمة

:على ذلك ، مثال X=1;y=2;z=(x !=y);

يحتوي على القيمة zالمتغير : النتيجة true.

!=

يقوم هذا المعامل بمقارنة قيمتين و يخزن بناء على ذلك ، مثال false أو trueلقيمة ا:

X=1;y=2;z=(x < y); يحتوي على القيمة zالمتغير : النتيجة

true.

<

يقوم هذا المعامل بمقارنة قيمتين و يخزن بناء على ذلك ، مثال false أو trueالقيمة

: X=1;y=2;z=(x > y);

يحتوي على القيمة zالمتغير : النتيجة false.

>

يقوم هذا المعامل بمقارنة قيمتين و يخزن بناء على ذلك ، مثال false أو trueالقيمة

:

<=

Page 65: Learn HTML Css Tahani

- 65 -

X=1;y=2;z=(x <= y); يحتوي على القيمة zالمتغير : النتيجة

true. يقوم هذا المعامل بمقارنة قيمتين و يخزن

بناء على ذلك ، مثال false أو trueالقيمة :

X=1;y=2;z=(x >= y); يحتوي على القيمة zالمتغير : تيجة الن

false.

>=

: المعامالت النصية -هـ

المعامل العمليةمتغيرين ) إضافة(يقوم هذا المعامل بدمج

:نصيين ، مثال str1=”he”;str2=”llo”;str3=str1+srt2;

يحتوي على القيمة str3المتغير : النتيجة hello.

+

: المعامل الثالثي -هـ

المعامل العمليةيقوم هذا المعامل باختبار شرط ما ، فإذا

آان متحققا فإنه يخزن القيمة التي تسبق النقطتان الرأسيتان و إن لم يكن متحققا

فإنه يخزن القيمة التي تلي النقطتان :الرأسيتان ، مثال

X=1;y=2; max=(x>y)?x:y;

يحتوي على القيمة maxالمتغير : النتيجة 2.

(condition)?value1:value2

:أوامر التحكم في البرنامج يتكون البرنامج أو آود الجافا السكريبت من عدة أسطر برمجية تنفذ الواحد تلو اآلخر

لكن تصادفنا أحيانا بعض البرامج التي نحتاج . بالترتيب الذي نكتب فيه هذه السطور فإذا آان أآبر من xحتاج الختبار قيمة المتغير قد ن: مثال . التخاذ بعض القرارات فيها

! فإننا سنقوم بطباعته ، أما إذا آان أقل من عشرة فإننا لن نقوم بطباعته 10العدد للقيام بمثل هذه القرارات ، فإننا نستخدم أوامر التحكم في البرنامج و هي الجمل

:ة سنشرح آال من الطريقتين باألمثل.. الشرطية و جمل التكرار

Page 66: Learn HTML Css Tahani

- 66 -

:الجمل الشرطية

فنحن نقول في . تستخدم الجمل الشرطية لتنفيذ األمر المناسب وفق شرط معين ) لم يتحقق الشرط(فافعل أمرا معينا ، و إذا ) تحقق الشرط المعين(إذا : لغتنا العربية

.فافعل أمرا آخر

:و باللغة اإلنجليزية نقول If (condition) { Some statements }

:ناك ثالثة أنواع من أوامر الشرط ه :ifالجملة -أ

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

54شكل

:if .. elseالجملة -بأمر أو نستخدم هذه الجملة لتنفيذ أمر أو عدة أوامر إذا تحقق شرط معين ، و لتنفيذ

.عدة أوامر إذا لم يتحقق الشرط

Page 67: Learn HTML Css Tahani

- 67 -

55شكل

:switchالجملة -جـ .نستخدم هذه الجملة لتنفيذ أمر أو عدة أوامر إذا تحققت حالة معينة

:سنأخذ أوال الصيغة العامة للجملة switch (expression){ case label1: code to be executed if expression = label1 break case label2: code to be executed if expression = label2 break default: code to be executed if expression is different from both label1 and label2 }

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

آل احتمال نسبقه . ثم نسرد االحتماالت المختلفة للقيم التي قد يأخذها المتغير في – حتى يتوقف تنفيذ األوامر عنده Break و نختتمه باألمر caseبالكلمة المحجوزة

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

:بشكل أوضح

Page 68: Learn HTML Css Tahani

- 68 -

56شكل

معلومة إضافية

غة السي ، لكن قد مألوفا لديك إذا آنت من مبرمجي لbreakقد يكون استخدام األمر

لغة الباسكال التي تقوم بهذه الوظيفة تلقائيا ييكون غريبا عليك إذا آنت من مبرمج ! دون الحاجة لهذا األمر

الحظ الحاجة لهذا األمر سواء آنت من الفريق األول أو الفريق الثاني و حتى إن لم تكن

ل إزالة األمر من الجملة يمكنك اآتشاف السبب بشكل أوضح من خال!!من أي الفريقين ...

:جمل التكرار

عشر مرات ، فهل ستضطر " بسم اهللا الرحمن الرحيم"لنتخيل أنك تريد آتابة العبارة إلى آتابة عشر أسطر مختلفة لتنفيذ أمر هو في الحقيقية مكرر ؟

Page 69: Learn HTML Css Tahani

- 69 -

أوامر تقدم لنا لغة الجافا سكريبت خاصية أوامر التكرار ، التي تقوم بتكرار أمر أو عدة .أآثر من مرة

:لدينا ثالث أنواع من جمل التكرار أيضا

:Forالجملة -أ

.تستخدم لتنفيذ أمر أو عدة أوامر عدد معين من المرات :الصيغة العامة للجملة

for (زيادة العداد ;شرط ;البداية) { بعض اجلمل التنفيذية }

:مثال حقيقي

57شكل

):جرب بنفسك(ستكون النتيجة هكذا

Page 70: Learn HTML Css Tahani

- 70 -

58شكل

:whileالجملة -ب

.تستخدم لتنفيذ أمر أو عدة أوامر طالما أن شرطا معينا متحققا :الصيغة العامة للجملة

while (شرط) { بعض اجلمل التنفيذية }

:مثال حقيقي

59شكل

Page 71: Learn HTML Css Tahani

- 71 -

:و ستحصل على النتيجة التالية .. أنك توقعت مسبقا بالنتيجة ؟جرب بنفسك اآلن البد

60شكل

:do .. whileالجملة -جـ

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

:عامة للجملة الصيغة الdo { بعض اجلمل التنفيذية } while (شرط)

:مثال حقيقي

61شكل

Page 72: Learn HTML Css Tahani

- 72 -

.. do وwhileهناك فرق في طريقة عمل ! تحذير. 60و النتيجة موجودة في الشكل رقم while إذا آان هذا الفرق غير واضح لك حتى اآلن فأنصحك بالقيام بالمزيد من األمثلة .

:أوامر اإلخراج

أعتقد أنها أصبحت واضحة لك .. في أغلب أمثلتنا السابقة ()writeاطلعنا على الدالة سنتناول في هذا الجزء تفاصيل إضافية حول آيفية استخدام . بعد تكرارها أآثر من مرة

. هذه الدالة لكتابة بعض األحرف الخاصة

" .النص هنا"تابته بين عالمتي تنصيص البد و أنك الحظت أننا ندرج النص المراد آ

ماذا لو أردنا استخدم رمز . إذا رمز التنصيص يشكل بداية و نهاية النص المراد آتابته آي يظهر على الشاشة ؟ إذا استخدمنا رمز –التنصيص داخل النص المراد لكتابته

بب عالمة التنصيص مباشرة ، سيعتقد المتصفح أن الجملة المراد آتابتها انتهت بسلذا فإننا نستخدم طريقة خاصة للتعامل مع رمز التنصيص و غيره من الرموز ! التنصيص

) . \(آل ما علينا القيام به هو أن نسبق الرمز الخاص بعالمة الشرطة المائلة . الخاصة :راقب الجدول التالي

الرمز ماذا تستخدم"\ " &\ & \\ \

النصوص الطويلة التي تأخذ مساحة آبيرة من طول الصفحة أحيانا لكتابة بعض قد نحتاج أليس آذلك ؟... مما يمنعنا من قراءة الجملة بسهولة

الحل يكمن في استخدام خاصية مفيدة تقدمها لنا الجافا سكريبت ، حيث يمكننا آتابة .في آخر السطر األول ) \(النص على سطرين منفصلين ، مع وضع رمز الشرطة المائلة

:ذا هكdocument.write("السالم \ ("!عليكم

:الحظ أنه ال يمكنك آتابة األمر السابق بالطريقة التالية document.write \ ("!السالم عليكم")

:لنأخذ مثاال يوضح ما تم شرحه حتى اآلن

Page 73: Learn HTML Css Tahani

- 73 -

62شكل

و الشرطة المائلة التي يجب أن تفرق بين الشرطة المائلة التي وردت في آخر السطر :نتيجة المثال ستكون هكذا . وردت قبل عالمة التنصيص في منتصف الجملة النصية

63شكل

:الدوال

أبسط تعريف للدالة قد يكون بأنها مجموعة من األسطر البرمجية التي نعطيها اسما .د آتابة سطر واحد يحتوي على اسمها معينا يمكننا من استخدامها أآثر من مرة بمجر

:هناك نوعين من الدوال

Page 74: Learn HTML Css Tahani

- 74 -

. و المقصود بها تلك الدوال التي تقدمها لنا الجافا سكريبت ): built-in(دوال جاهزة -أ) ()alert(و آذلك الدالة . التي تعرفنا عليها خالل هذا الفصل ) ()write(الدالة : مثال

.التي تقوم بإظهار مربع تحذير

حيث يقوم المستخدم بتعريف دالة خاصة به ؛ يمكنه :وال خاصة بالمستخدم د-ب .استخدامها أآثر من مرة بعد ذلك

!سنتناول هنا آيفية إنشاء دوال بسيطة خاصة بك أنت

قبل أن نأخذ هذه الصيغة ، أحب أن أذآرك بأن عليك تعريف .. هناك صيغة عامة للدوال حسب الصيغة العامة التي – أن تضع التعريف لذا يجب! الدالة قبل استخدامها

في رأس الصفحة ، حتى تضمن تحميلها قبل مناداتها من خالل –سنتناولها بعد قليل أليس آذلك ؟ هذا ()writeاآلن ، لقد آنا نكتب نصا بداخل قوسي الدالة . صفحتك

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

لذلك سنأخذ أوال الصيغة العامة للدوال التي تحتاج ! ، و قد ال تحتاج لمتغير أيضا :لمتغيرات

function (..,املتغري الثاني,املتغري األول)اسم الدالة {

فيذيةبعض اجلمل التن }

الحظنا أننا مازلنا بحاجة (و هذه هي الصيغة العامة للدوال التي ال تحتاج لمتغيرات ):لألقواس

function اسم الدالة() { بعض اجلمل التنفيذية}

):دالة تقوم باستقبال متغيرين ، تطبع حاصل جمعهما(و هذا مثال حقيقي

Page 75: Learn HTML Css Tahani

- 75 -

64شكل

:يجة هكذا ستكون النت

65شكل

إذن ، هال الحظت آيف ننشأ الدالة ؟ ثم آيف يمكننا أن نستدعيها فيما بعد ؟

تستطيع أن تجعل الدالة تعيد قيمة معينة عند .. نعم ! يمكنك إضافة المزيد إلى دوالك !بدال من طباعته .. قد تجعلها تعطينا ناتج الجمع مثال .. استدعائها

:لنأخذ هذا المثال الذي يوضح ذلك

Page 76: Learn HTML Css Tahani

- 76 -

66شكل

:آما تستطيع آتابة المثال السابق بالطريقة التالية

67شكل

Page 77: Learn HTML Css Tahani

- 77 -

ثم اسم المتغير الذي يحمل الناتج returnاستخدمنا األمر : في آال المثالين .المطلوب

:التأآد من بيانات النماذج

سنحتاج ! أصدقك القول إذا قلت بأني شرحت الفصل آامال من أجل هذا الجزء تقريبا يمكننا أن نستخدم البي اتش بي .. للكثير من النماذج في مشاريع البي اتش بي

نفسها للتأآد من صحة البيانات المستخدمة في النموذج ، لكن هذا يعني بأن على هاز الخادم أوال ، ثم ينتظر معالجة البيانات هناك المستخدم أن يرسل بياناته إلى الج

–بينما ، باستخدام الجافا سكريبت ! لمعرفة ما إذا آانت صالحة أم ال ثم يأتيه الرد لن نخسر آل هذا –التي تعتبر من اللغات التي يتم تنفيذها على جهاز العميل مباشرة

أنت . أآد من بيانات النماذج لذلك فالجافا سكريبت هي الخيار المناسب للت! الوقت :سنعرف ذلك اآلن .. متقنع بذلك اآلن ، و تريد أن تعرف الطريقة

:العملية تتكون من خطوتين

).head(تعريف الدالة التي تقوم بالتأآد من صحة البيانات المدخلة في رأس الصفحة -1

:لي من خالل المتغير التا )form(استدعاء الدالة في وسم النموذج -2onsubmit="return validate()" حيث أن validate هي اسم الدالة التي قمنا بتعريفها

.في الخطوة األولى

..إن أفضل طريقة لتعلم ذلك هي عن طريق بعض األمثلة الحقيقية

التأآد من ادخال بريد إلكتروني صحيح: مثال

68شكل

Page 78: Learn HTML Css Tahani

- 78 -

في البريد اإللكتروني المدخل في " @"المثال بالبحث عن رمز يقوم هذا : شرح المثال فإذا ما وجد هذا الرمز فإنه يعتبر البريد صحيحا و يسمح بإرسال البيانات . مربع النص

، و إذا لم يجده فإنه يعتبر البريد المدخل غير صحيحا و يظهر )script1.php(إلى الصفحة . آنتيجة للدالة falseالقيمة رسالة تحذير باإلضافة إلى أنه سيعيد

إدخال قيمة عددية ال تزيد عن رقم معين: مثال

إذا آانت . يقوم المثال بالتأآد من قيمة الرقم المدخل في مربع النص : شرح المثال 69شكل

نتيجة للدالة آfalseالقيمة أآبر من المائة فإنه يقوم بإظهار رسالة تحذير و يعيد القيمة ، إذا آانت القيمة أقل من أو تساوي المائة ، فإنه يقبل القيمة و يرسلها للملف

script1.php.

:التاريخ و الوقت

يمكنك أيضا االعتماد على الجافا سكريبت في إظهار تاريخ اليوم على الصفحة األولى كريبت في هذه لذا سنتطرق بشكل سريع لكيفية االستفادة من الجافا س! لموقعك ..المسألة

!تحذير

و لهذا ) client-side(أنت تعلم بأن الجافا سكريبت هي إحدى لغات جهات العميل

السبب نفضل استخدامها في بعض األمور البسيطة حتى ال نهدر وقتا يضر بجودة !مشاريعنا

تعود الحتمال هذه المسألة.. لكن يجب أن ننتبه لمسألة هامة تتعلق بالوقت و التاريخ إعداد الوقت بشكل خاطئ على جهاز العميل و بالتالي فإن الجافا سكريبت يستخدم

Page 79: Learn HTML Css Tahani

- 79 -

و بالتالي قد تجد أن صفحتك تقول بأن اليوم هو ! التاريخ الخاطئ المعد على الجهاز !األول من السنة العاشرة للهجرة إذا آان جهاز العميل يقول ذلك

و للقيام . Dateم و التوقيت الحالي عن طريق الكائن يمكننا الحصول على تاريخ اليو

ثم نستخدم newبذلك يجب أن ننشأ نسخة من هذا الكائن عن طريق استخدام األمر بشكل ) 31-1(بعض الدوال التي يحتويها هذا الكائن لكي نحصل على تاريخ اليوم

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

و قد يبدو مربكا قليال لمن لم يعتد عليها ، لكن ) OOP++ (الشيئية من أمثال السي :بالتأآيد سيبدو لك األمر سهال بعد قراءة المثال اآلتي بتمعن

70شكل

:ح المثال شر

و أعطينا هذه new بواسطة األمر Dateفي البداية قمنا بإنشاء نسخة من الكائن إنه عبارة عن نسخة من ! اآلن هذا المتغير ليس متغير عادي . date1النسخة االسم

.آائن ، هذا الكائن يحتوي على متغيرات و يحتوي على دوال ) 31-1(للحصول على تاريخ اليوم : سنستفيد من الدوال التي يحتويها هذا الكائن

نستخدم الدالة ) 11-0( ، للحصول على رقم الشهر الحالي ()GetDateنستخدم الدالة GetMonth() للحصول على السنة الحالية نستخدم الدالة ، GetFullYear() للحصول ،

، للحصول على الدقائق الحالية ()GetHoursعلى الساعة الحالية نستخدم الدالة مع مالحظة أننا قمنا بإضافة واحد صحيح إلى رقم . ()GetMinutesنستخدم الدالة

) .فبراير=1يناير ، =0(الشهر حتى يعطينا الرقم الصحيح للشهر

:و هذه هي نتيجة المثال

Page 80: Learn HTML Css Tahani

- 80 -

71شكل

:اقرأ الجدول التالي لمزيد من الدوال المفيدة الخاصة بالتاريخ و الوقت

الدالة الوظيفة

)31-1(للحصول على التاريخ getDate() 1األحد ، =0 ، 6-0(للحصول على اليوم

)الخ... األثنين =getDay()

1يناير ، =0 ، 11 -0(للحصول على الشهر )فبراير=

getMonth()

)99-0(للحصول على السنة getYear() )9999-0(للحصول على السنة الكاملة getFullYear()

)23-0(للحصول على الساعات getHours() )59-0(للحصول على الدقائق getMinutes() )59-0(للحصول على الثواني getSeconds()

)999-0(للحصول على أجزاء الثانية getMilliseconds() منذ (للحصول على الوقت بأجزاء الثواني

)1970-1-1تاريخ getTime()

ق الزمني بين توقيت للحصول على الفار()الجهاز و توقيت جريتنش

getTimezoneOffset()

.لتحويل التاريخ إلى سلسلة نصية toString()

:المالحظات

Page 81: Learn HTML Css Tahani

- 81 -

داخل ) comment(ال يمكننا أن نختتم هذا الفصل قبل أن نشرح آيفية إدراج مالحظة تعلمناها في الفصل الطريقة مشابهه لطريقة المالحظات التي. أآواد الجافا سكريبت

. سي اس اس –السابق

:المثال التالي يوضح طريقتين مختلفتين إلدراج المالحظات

:الخالصة نحن نعرف اآلن أن الجافا سكريبت . تعرفنا في هذا الفصل على لغة الجافا سكريبت

هي لغة برمجة من الوزن الخفيف ، نعرف آيفية تعريف متغيرات جديدة ، آيفية و . ستفادة من المعامالت المختلفة ، آيفية استخدام أوامر الشرط و أوامر التكرار اال

أصبحنا نعرف متى يجب علينا استخدام الجافا سكريبت بدال من : األهم من هذا آله .بي اتش بي

لم يكن الفصل خفيفا مثل الفصل السابق ؟ ربما ، لكنك استفدت الكثير و اآتسبت .ء في تعلم لغة البي اتش بي قاعدة ممتازة للبد

:المراجع

هذا الكتاب غير مخصص للغة الجافا سكريبت لذلك لم نتطرق لكل ما يخصها ، إذا آنت :مهتما بتعلم المزيد عن الجافا سكريبت ، يمكنك الرجوع لبعض هذه الكتب

- Professional JavaScript with DHTML, ASP, CGI, FESI, Netscape Enterprise Server, Windows Script Host, LiveConnect and Java by Sing Li, Andrea Chirelli, Stuart Updegrave, Cliff Wootton, Nigel McFarlane, Mark Wilcox, Paul Wilton, James De Carli (Wrox Press)

- Beginning JavaScript by Paul Wilton (Wrox Press) - JavaScript Bible by Danny Goodman (Hungry Minds, Inc)

Page 82: Learn HTML Css Tahani

- 82 -

PPHHPPمدخل للغة مدخل للغة : : الباب الثاني الباب الثاني مقدمة الباب الثاني

بعد أن انتهينا من مداخل للغات أخرى ، في الفصل السابق ، سندخل اآلن في لغة بي

هذا الباب عبارة عن مدخل للغة ، سنتناول في الفصل الرابع بعض . اتش بي سنتناول . منافسة المعلومات حول آيفية بداية اللغة مع مقارنة بينها و بين اللغات ال

آذلك الفرق بين اللغات جهة المزود و اللغات جهة العميل و بعض المعلومات التي توضح الفصل الخامس يقدم . آيفية تنفيذ صفحات البي اتش بي التي سنكتبها فيما بعد

الفصل السادس يقدم طريقة . طريقة واضحة لتنصيب البي اتش بي على جهازك ) .MySQL( آيو ال واضحة لتنصيب الماس اس

Page 83: Learn HTML Css Tahani

- 83 -

؟PHPآيف و متى و لماذا :الفصل الرابع

عنوان هذا الفصل يحتوي على ثالثة أسئلة ، يفترض أننا بعد أن أنهينا الثالثة فصول و العديد من األسئلة ) آيف ؟ متى ؟ لماذا ؟(السابقة تكونت لدينا مثل هذه األسئلة

ه األسئلة قد تبادرت إلى ذهنك ، فاسمح إذا آانت هذ.األخرى التي تبحث عن إجاباتها إذ ال ينبغي عليك أن تبدأ بالجزء البرمجي من اللغة ! سيدتي \لي أن أحييك يا سيدي

و ما -قبل أن تعرف تاريخها ، مدى انتشارها ، تقارنها بغيرها من اللغات المنافسةذه اللغة بناء هل أنت مقتنع به: ، يجب أن تحدد اآلن إجابة للسؤال التالي -أآثرها

؟ سيقدم PHPعلى معلومات منطقية ؟ هل تستطيع اإلجابة على سؤال لماذا تتعلم سنحاول أن نستعرض واقع .. لك هذا الفصل أجوبة لكل هذه االستفسارات بإذن اهللا

.الشبكة العنكبوتية بشكل عام أوال

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

) المواقع (تتمثل مهمة األجهزة الخادمة في حفظ المعلومات) . server/client(عميلة على أجهزتها التي تكون عادة متصلة بالشبكة على مدار األربع و عشرين ساعة ، و

إن إمكانيات الجهاز الخادم و جودة طريقة االتصال بالشبكة تكون عالية حتى بالطبع فهذه األجهزة . تتحمل الطلبات الكثيرة على المعلومات المحفوظة على هذا الجهاز

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

نظام تشغيل يعتمد عليه من : البرامج تجعل هذا الجهاز خادم حقيقي ، يشمل ذلك أشهر برنامج بهذا الخصوص هو (ناحية األداء و األمان ، برنامج تحويل النظام إلى خادم

امج لترجمة اللغات البرمجية ، برن) المجاني و المفتوح المصدرApacheبرنامج األباتشي برنامج لكل - )PHP , Perl , ASP , ColdFusion: من أمثال (التي يدعمها هذا الجهاز

.لغة على حده . أما األجهزة العميلة ، فهي ليست سوى أجهزتنا التي نتصل من خاللها بالشبكة

تحدث آارثة لو تم هذه األجهزة ال يتطلب منها أن تكون بمواصفات عالية ، آما أنه لنالبرامج المطلوبة على هذا الجهاز تشمل . قطع االتصال بين هذا الجهاز و بين الشبكة

.، متصفح اإلنترنت ) أيا آان(نظام التشغيل : من خالل (يقوم الجهاز العميل : نتطرق اآلن لطريقة اتصال هذين النوعين مع بعضهما

ن يكون عادة عبارة عن حروف تشكل اسم بطلب عنوان معين ، هذا العنوا) المتصفحو هذا ) IP( و الذي يشير بدوره إلى رقم تعريفي خاص www.c4arab.com: موقع مثل

و عند االتصال ببرنامج . الرقم يشير بدوره إلى جهاز خادم معين داخل شبكة معينة .معين ) Port(فإن هذا االتصال يتم عبر منفذ ) مثالMySQL(محدد

قع فإنه يوجد نوع ثالث من األجهزة هو مخزن قواعد البيانات الذي يكون متصال و في الوا Tier-3(بالجهاز الخادم فقط بحيث يتحقق نظام الشبكات ذات الثالث طبقات

Architecture . (

Page 84: Learn HTML Css Tahani

- 84 -

معلومة إضافية

سنتعلم في الفصول القادمة آيفية تنصيب برامج الجهاز الخادم على أجهزتنا ألغراض بشكل شخصي لك أنت فقط و(ة لتصبح بدورها أجهزة خادمة أيضا العميل

) .التجربة و التعلم

األجهزة \لو نظرنا للشبكة بشكل تاريخي ، فإننا سنالحظ أن نظام األجهزة العميلة الخادمة لم يتغير أبدا خالل السنين الماضية ، الشيء الوحيد الذي اختلف في هذا

ة البرامج التي نحتاج لتنصيبها على الجهاز الخادم ، حيث أن ظهور لغة المجال هو نوعيينطبق ذلك في بعض األحيان على األجهزة (جديدة يستلزم تنصيب البرامج الداعمة لها

) .العميلة أيضا :الشكل التالي يوضح لنا ما ذآرناه بطريقة مصورة

72شكل

؟ هل تغيرت هي ) المواقع(ذا عن نوعية المعلومات التي يحفظها الجهاز الخادم ما

األخرى ؟ فإن هذا المحتوى في البداية – و آما ذآرنا في جزء سابق من هذا الكتاب –في الواقع

آان موجها للعلماء بالدرجة األولى و آان عبارة عن صفحات نصية فقط ، االهتمام موجه (آانت اللغة المستخدمة حين ذاك هي لغة الهتمل . ر من الشكل على المعلومات أآث

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

:سنناقشها فيما يلي

:ن يمكن تقسيم اللغات إلى نوعين رئيسيي :اللغات جهة العميل -أ

من القرص الصلب ) المعلومة( يطلب المستخدم صفحة معينة ، يتم جلب هذه الصفحة بترجمة هذه الصفحة إلى معلومات تظهر ) المتصفح(للجهاز الخادم ثم يقوم العميل

) . أ-73(انظر الشكل . الحظ أننا احجتنا إلرسال طلب واحد فقط . لدى جهاز المستخدم هذا النوع من اللغات هي السرعة في التنفيذ و عيبه أن المصمم ليس لديه تحكم ميزة

!آامل في نوعية المتصفح المستخدم لترجمة ما آتبه من أآواد

مخزن قاعدة البيانات

نظام المتصفحغيلالتش

الجهاز العميل

نظام المتصفح التشغيل

الجهاز العميل

نظام المتصفح التشغيل

الجهاز العميل

شبكة

نظام التشغيل

برنامج الخادم

أخرىبرامج

الجهاز الخادم

Page 85: Learn HTML Css Tahani

- 85 -

) :الخادم(اللغات جهة المزود -بمن القرص الصلب ) المعلومة(يطلب المستخدم صفحة معينة ، يتم جلب هذه الصفحة

لجهاز الخادم بترجمة المعلومات المطلوبة و تحويلها إلى لغة للجهاز الخادم ثم يقوم اميزة هذا النوع من اللغات هو أن ). ب-73(انظر الشكل . الهتمل ثم يرسلها للعميل

لدينا تحكم أآبر في البرنامج المستخدم للترجمة ، لكن يوجد عيوب تتمثل في زيادة !). الثانية ، لكنها تهمنا قد تكون أجزاء من(الوقت المطلوب لوصول االستجابة

73شكل

HTML Hyper Text Markup :تشير األحرف األولى من اسم اللغة إلى الكلمات اإلنجليزية

Language اللغة هذه اللغة هي) . لغة ترميز النص التشعبي(، التي تشير إلىصفحات الموجودة الوسوم األساسية لهذه اللغة تدعم جميع المت. األولى على الشبكة

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

ينما ال الشرآة المصنعة للمتصفح و بالتالي تكون داعمة له في بقية منتجاتها أيضا بما الذي ينقص هذه اللغة : هنا البد أن نسأل أنفسنا . تدعمه بقية الشرآات المنافسة

؟ و لماذا نحتاج لحلول أخرى قد ال تكون مدعومة من جميع المتصفحات أو قد تحتاج بعض الوقت إلتقانها ؟

لغة الهتمل هي لغة تنتج محتوى ثابت ! و الجواب الواضح هو محدودية هذه اللغة فالجملة التي يكتبها مصمم الموقع ستظهر آما آتبها لدى جميع المستخدمين و في

و الذي يشير إلى وقت آتابته لهذه " 5:40: الوقت اآلن "لنفرض أنه آتب ! آل وقت الجملة ، ماذا سيحدث عندما يطلع المستخدم على صفحته بعد ساعة ؟ ستظل

ينما آان بإمكاننا أن نجعل هذا المحتوى ب!الساعة تشير إلى الخامسة و أربعون دقيقة .متحرك يتغير بتغير الزمن أو بتغير المستخدم

على فرض عدم –العيب اآلخر للغة الهتمل أنها ال تفصل المحتوى عن التنسيق . بينما يوجد حلول أخرى تقوم بذلك –استخدام تقنية السي اس اس

بحسب –ا لكن بدمجها مع لغات أخرى الحل قد ال يكون باإلستغناء عن هذه اللغة تمامأو لغات البرمجة ) الجافا سكريبت و شبيهاتها( مثل لغات البرمجة الخفيفة –الحاجة ) .الخ… PHP,ASP(الثقيلة

فإن لغة الهتمل سيتم استبدالها قريبا w3cبناء على المقاييس الصادرة عن جمعية XHTML= EXtensible Hyper Text Markup(بالجيل الثاني من هذه اللغة

Language . ( هذه اللغة ال تختلف آثيرا عن لغتنا إال بإضافة بعض الشروط على طريقةهذه اللغة تعتبر لغة من اللغات التي تنفذ جهة العميل ، حيث أن . آتابة الوسوم

) .يتجاهل أي وسم ال يفهمه عادة(المتصفح هو المسؤول عن ترجمة وسوم الهتمل

الخادم

المترجم

بصل الصقرالمتصفح ال

جهاز المستخدم

1

3

2

الخادم

المترجمبصل الصقر المتصفح ال

جهاز المستخدم

1

4

2

3

لغات جهة العميل

شكل أ

لغات جهة الخادم

شكل ب

Page 86: Learn HTML Css Tahani

- 86 -

على مزيد من المعلومات حول لغة الهتمل يرجى مراجعة الفصل األول من لالطالع .هذا الكتاب

DHTML Dynamic Hyper :تشير األحرف األولى من اسم اللغة إلى الكلمات اإلنجليزية

Text Markup Language لغة ترميز النص التشعبي اآللية(، التي تشير إلى( . حيث أصبح بإمكان المصمم أن . محتوى في لغة الهتمل ظهرت هذه اللغة آحل لثبات الاألمثلة على مثل هذه اإلضافات آثيرة جدا و محدودة . يضيف بعض الحرآة لصفحته

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

تعتبر هذه اللغة علم واسع . تجعل آل عنصر من عناصر صفحتك يتفاعل مع المستخدم هذه اللغة تعتبر من لغات جهة ! حقا يمكن أن تكتب عنه مئات الصفحات لشرحه

) . أ-73راجع الشكل (العميل أيضا

ActiveX Controls ات صغيرة يمكن صنعها بواسطة لغتي مكونات األآتيف اآس هي عبارة عن بريمج

بإنتاج هذه المكونات إلضافة تقامت شرآة مايكروسوف. أو الفيجوال بيسك ++ السي بعض هذه الوظائف . بعض الوظائف التي قد يحتاجها مطورو مواقع الشبكة العنكبوتية

ذه يمكنك إضافة ه. الرسوم البيانية ، المؤقتات ، االتصال بقواعد البيانات : هي هذه اللغة ال يمكن . <object>المكونات إلى صفحات الهتمل عن طريق الوسم

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

غير مدعومة سوى من متصفح المايكروسوفت السبب هو أنها! على أي حال اآسبلورر و بالتالي فإن صفحتك لن تعمل بالشكل المطلوب على متصفحات أخرى

Plug-ins(شهيرة مثل متصفح النت سكيب إال بواسطة مكونات إضافية تضاف للمتصفح . (

CGI Common Gateway :تشير األحرف األولى من اسم اللغة إلى الكلمات اإلنجليزية

Interface تعتبر هذه اللغة من أقدم و . )واجهة البوابة العامة(، التي تشير إلىستجد أن هذه اللغة . أشهر اللغات المستخدمة لتطبيقات اإلنترنت جهة الخادم

يمكنك آتابة برامج السي جي أي ! مدعومة في آل شرآات االستضافة الحالية قد . شهر اللغات المستخدمة لذلك هي لغة البيرل باستخدام أي لغة تقريبا ، إال أن أ

. تكون تتسائل اآلن عن سبب التسمية ؟ في الواقع هذا يعود لطريقة تنفيذ البرنامج يتم . حيث أن السي جي أي يكون بمثابة الواجهة أو البوابة التي تربط الخادم بالبرنامج

. يعمل البرنامج من خاللها ) Process(أوال ، يتم إنشاء عملية : هذا الربط عبر خطوات ثالثا ، يتم تحميل أي برامج أخرى يحتاجها . ثانيا ، يتم تحميل البرنامج المطلوب

أخيرا ، بعد أن ينتهي البرنامج يقوم الخادم بإرسال النتيجة إلى . البرنامج األصلي م مميزات هذه اللغة تتمثل في الدعم الواسع لها على جميع خواد. المستخدم

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

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

ASP

Page 87: Learn HTML Css Tahani

- 87 -

Active Server Pages :تشير األحرف األولى من اسم اللغة إلى الكلمات اإلنجليزية هذه اللغة تعتبر منافس قوي للغة البي . )صفحات الخادم النشطة(، التي تشير إلى

للغة تكون آما أنها تتخذ نفس أسلوب البي اتش بي من حيث أن أآواد ا. اتش بي تتم ترجمة األآواد في الخادم ثم ترسل . مدمجة من أآواد لغة الهتمل في ملف واحد

. عادة asp.صفحات الخادم النشطة تأخذ االمتداد . النتيجة على أآواد هتمل فقط .VBScript و JScript: آما أنها تدعم لغتي برمجة من الوزن الخفيف

(لفيجوال بيسك و الفيجوال بيسك سكريبت مميزات اللغة قد تحسب لمبرمجي ا

VBScript ( عيوب هذه . من حيث أن تعلم هذه اللغة سيعتبر أمرا سهال بالنسبة لهم مما يعني أن األخطاء ال –اللغة تتمثل في أنها لغة غير مجانية ، غير مفتوحة المصدر

و العيب األآبر هو –يتم إصالحها في الوقت المناسب ، باإلضافة لمحدودية تطوير اللغة أنك ال تستطيع استخدامها اللغة إال على خادم يحتوي على نظام التشغيل ويندوز مع

) . IIS, PWS(برنامج خادم من إنتاج شرآة مايكروسوفت إذا آنت تخطط لتطوير مشاريع تعمل على شبكات منتجة من شرآة مايكروسوفت فقط

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

.شرآات أخرى فإن هذا الحل ال يعتبر أفضل الحلول بالنسبة لك

معلومة إضافية

بشكل غير آامل حتى مع عدم استخدام أحد ASPتدعم بعض أنظمة اللينكس لغة الـ

غير – آما ذآرنا –لكن هذا الدعم . امج الخادم المنتجة من شرآة مايكروسوفت بر .آامل

JSP ، Java Server Pages :تشير األحرف األولى من اسم اللغة إلى الكلمات اإلنجليزية

و هي إحدى لغات جهة الخادم آما . ) جهة الخادم–صفحات الجافا (التي تشير إلى هذه اللغة هي من إنتاج فريق المطورين التابع لشرآة سن .يشير االسم بالطبع

(SUN) . تعمل هذه اللغة بطريقة مشابهة للغتي صفحات الخادم النشطة)ASP ( و لغةمن حيث أن صفحة الجافا تحتوي على أآواد الهتمل باإلضافة ) PHP(البي اتش بي

تنتهي . يقة العرض تعتمد هذه اللغة على فصل المحتوى عن طر. إلى أآواد الجافا و عند طلب إحدى صفحات . في العادة jsp. جهة الخادم باالمتداد –صفحات الجافا

الجافا من الخادم ، يقوم الخادم بترجمة الكود و يرسل النتيجة ، لكن يظل الكود بعد الترجمة موجود في الذاآرة مما يسمح بإرسال النتيجة في فترة قياسية عند تكرار

. الخاصية تعطي للغة قوة عالية يعتمد عليها في المشاريع الضخمة هذه. الطلب حيث يمكنك االستفادة من ) الجافا(تستمد هذه اللغة قوتها من قوة اللغة األساسية

.الميزات الكثيرة التي تقدمها لغة الجافا في مشاريعك على الشبكة العنكبوتية من مميزات ، و السبب يكمن في قد تستغرب من عدم انتشار هذه اللغة على مالها

أنها قد تكون صعبة بعض الشيء على من لم يعتد على البرمجة بلغة الجافا ، الشيء أليس آذلك ؟! الذي يمكننا اعتباره ميزة إذا آان لك خبرة سابقة في لغة الجافا

ColdFusion من أجل صممت هذه اللغة . هذه إحدى اللغات المنافسة للغة البي اتش بي أيضا

تم تطوير اللغة من . هدف واضح هو تقديم حلول عملية لتطبيقات الشبكة العنكبوتية

Page 88: Learn HTML Css Tahani

- 88 -

: اللغة مدعومة من قبل أنظمة تشغيل مختلفة مثل . )Allaire(قبل شرآة ألير هذه اللغة غير مجانية ، بل إنها تعتبر من . الويندوز ، السوالريس الرد هات ، و غيرها

,Express: (تنتج الشرآة ثالثة مستويات من الحلول ! في السعر أآثر اللغات ارتفاعاProfessional, Enterprise( . المستوى . المستوى األول مفيد لالستخدام الشخصي

المستوى الثالث يناسب األعمال . الثاني يناسب الشرآات ذات األعمال الصغيرة . تلفة و متعددة تزيد قوة اللغة هذه اللغة يمكن دمجها مع تقنيات شبكية مخ. الكبرى

آما أن هناك بيئة مرئية مقدمة مع اللغة تسمح لك بكتابة برامجك في بيئة أفضل و .أسهل

مميزات هذه اللغة تتمثل في إمكانية دمجها مع قاعدة عريضة جدا من التقنيات ها إلى حد أما عيوبها فتتمثل في السعر المرتفع للغة باإلضافة لصعوبة تعلم. المتوفرة

.ما

Perl قد ال يكون االسم غريب عليك ، إذ أن لهذه اللغة شهرة واسعة مستمدة من قدم و قوة

ثم تم ) . Larry Wall(تم تطوير هذه اللغة باألساس من قبل الري وول . هذه اللغة تطويرها من قبل قاعدة عريضة من المطورين إذ أن اللغة مفتوحة المصدر مما يعطي

C, sed , awk: (تعتمد اللغة باألساس على لغات من أمثال . ر لتطويرها فرصة أآب,Unix shellsالواقع أن هذه اللغة غير مخصصة لتطبيقات الشبكة ) . و غيرها من اللغات

يمكنك إضافة المزيد إلى هذه . بل يمكن أن تستخدمها لتطبيقات أخرى مختلفة ! فقط . مكتوبة بلغات أخرى آالسي و الجافا ) Libraries(اللغة عبر إدراج مكتبات إضافية

تتغلب هذه اللغة على البي اتش بي من حيث قدم اللغة و انتشارها الواسع بين لكن البي اتش بي تتغلب على لغة البيرل من ناحية أن بي اتش بي تم . المطورين

.تطويرها لخدمة أغراض الشبكة فقط ، مما يعني أنها األفضل لمثل هذا الغرض

PHP آانت بداية لغة البي اتش بي على شكل مجموعة من األآواد التي قام شخص يدعى

بتطويرها لمراقبة األشخاص اللذين يزورون ملفه ) Rasmus Lerdorf(راسموس ليردورف ازداد اهتمام المطورين بهذه األآواد التي قام راسموس بتطويرها فقرر . الشخصي

Personal Home(العام باسم أدوات المواقع الشخصية األخير أن ينشرها لالستخدام Page tools . ( من هنا جاء االسم)PHP = Personal Home Pages . ( آانت الفكرة

هي أن نشر المصدر على العامة سيسمح بتطويرها بشكل أسرع من االحتفاظ بداية آانت هذه األآواد في ال) . Open-Source! (بالمصدر مغلقا لدى راسموس فقط

PHP/FI . FIأطلق على هذه المجموعة فيما بعد اسم . مكتوبة بواسطة لغة البيرل آل ذلك آان بين عامي . )Form Interpreter(هي اختصار للكلمتين اإلنجليزيتين

.1995 و 1994

PHP/FI 2 مع زيادة االهتمام بالمشروع الشخصي لراسموس ، قام بتطوير المشروع و إضافة

هذه المرة آان للغة القدرة . د من الوظائف ، لكن باستخدام لغة السي هذه المرة المزيو بنفس الطريقة . على االتصال بقواعد البيانات و تطوير صفحات آلية للشبكة العنكبوتية

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

هذه النسخة انتشار واسع عبر الشبكة ، حيث تشير اإلحصائيات الواردة في الموقع % 1 مما يمثل – شبكة قد أبلغت باستخدامها لها 50.000الرسمي للغة بأن حوالي

.تقريبا من حجم الشبكة في ذلك الحين

PHP3

Page 89: Learn HTML Css Tahani

- 89 -

ابقة مختلفة بشكل آبير عن الصيغة العامة للغة بي اتش بي آما قد تكون النسخ السفي الواقع . نعرفها اليوم ، لكن النسخة الثالثة آانت مقاربة جدا لبي اتش بي اليوم

أندي و زيف:لقد قام شخصان مهتمان بهذه اللغة بإصدار نسخة مطورة عنها و هما ) Andi Gutmans و Zeev Suraski . (إصدار نسخة معاد آتابتها بالكامل في لقد قاما ب

آان ذلك بعد أن استخدما النسخة السابقة من البي اتش بي في . 1997نهاية العام في ذلك الوقت ، اتفق آل من راسموس ، أندي ، و . تطوير مشروع تجاري خاص بهما

قدمت . زيف على اعتماد هذه النسخة الجديدة آنسخة رسمية تلي النسخة السابقة ذه النسخة العديد من اإلضافات المفيدة حقا للغة ، مثل دعم المزيد من قواعد ه

و آالعاده ، تم نشر مصدر اللغة بشكل . البيانات ، دعم البرمجة الشيئية و غيرها .مفتوح لمجتمع المطورين مما زاد من شعبية اللغة و زاد من سرعة تطويرها

(و أعلن أن ذلك اختصار لـ . فقط PHPهذه المرة تم نشر اللغة باالسم المختصر Hypertext Preprocessor . ( تم إصدار النسخة الرسمية منPHP3 في شهر يونيو

حيث آان عدد المواقع المستخدمة لها في ذلك الحين يقارب مئات 1998من عام و ما يقارب هذا العدد أو . مع حجم مواقع الشبكة -% 10 حوالي –اآلالف من المواقع

!زيد من المطورين ي

PHP4 ! هذه المرة أعادوا آتابة مصدر اللغة مرة أخرى . استمر أندي و زيف في تطوير اللغة

بدأت هذه الخطوة بعد نشر النسخة . PHP4ليخرجوا لنا بالنسخة األحدث من اللغة و آان الهدف األساسي منها هو – 1998 في شتاء عام –السابقة رسميا مباشرة

تم إضافة المزيد من الخصائص للغة ، على سبيل المثال . ودة المشاريع الكبيرة زيادة ج :ال الحصر

.زيادة دعم البرمجة الشيئية • .دعم المزيد من قواعد البيانات •سنتناول هذا الموضوع بشكل مفصل ) . Sessions(تم إضافة خاصية الجلسات •

.في الفصول القادمة بإذن اهللا ) .XML(الجافا و االآس ام ال دعم داخلي لكل من •ليفحص تساوي القيمة و تساوي نوع المتغير في (===) معامل مقارنة جديد •

.وقت واحد ) .Boolean(تمت إضافة نوع جديد من البيانات هو النوع •تمت إضافة بعض المصفوفات الجديدة التي تحمل قيم لمتغيرات هامة تخص •

.الخادم أو البيئة المستخدمة .ر ، الكثير غير ذلك الكثي •

قدم آل من أندي و زيف محرك جديد تعتمد عليه اللغة قاموا بتسميته بمحرك زيند Zend) تم نشر النسخ األولية من ). راجع الجزء الخاص بمحرك زيند لمزيد من المعلومات

2000و تم نشر النسخة الرسمية في عام . 1999اللغة ألول مرة في منتصف عام .ميالدية

% 20تشير اإلحصائيات إلى نسبة المواقع المستخدمة للنسخة الرابعة تشكل حوالي !و العدد في ازدياد مستمر . من عدد المواقع في ذلك الحين

PHP5 و مع ذلك فإننا ) . تحديدا4.2.2(تعتبر النسخة الرابعة هي النسخة األخيرة من اللغة

آما تشير المعلومات الواردة في . من اللغة لن ننتظر آثيرا حتى تصدر النسخة الجديدة

Page 90: Learn HTML Css Tahani

- 90 -

الموقع الرسمي للغة ، فإن التعديالت قد بدأت بالفعل على النسخة الحالية تمهيدا .إلصدار النسخة الخامسة

:PHPمعلومات إحصائية حول

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

:Zendمحرك زند

ميالدية على 1999ذآرنا بأنه في تم نشر أول نسخة من هذا المحرك في حوالي عام إذا آنت تتساءل عن ) . Zeev Suraski و Andi Gutmans (يد آل من أندي و زيف

ك بهذا االسم فإن اإلجابة تقع في االسمين األولين من اسمي سبب تسمية المحرالبد من توضيح الفرق بين بي اتش بي و بين زند هنا ، ما هي . مطوري هذا المحرك

حدود آل منهما ؟ و ما هي المجاالت التي يتقاطعان فيها ؟ ماذا يعني ذلك ؟. بي اتش بي هي اللغة . زند هو المحرك

تشمل النظام آكل آما يظهر للمستخدم PHPن نقول بأن آلمة في الواقع يمكننا أ .الخارجي

:النظام مكون من ثالثة أجزاء .و هو الجزء الذي يقوم بتحليل الكود المدخل و ترجمته و من ثم تنفيذه : المترجم -1 ) .دوالها (مسؤول عن وظائف اللغة : الجزء الوظيفي -2 .الجزء المتصل بالخادم : الواجهة -3

.بالنسبة لمحرك زند ، فإنه مسؤول عن الجزء األول ، و القليل من الجزء الثاني فقط زند و بي اتش بي معا . أما بي اتش بي فهي مسؤولة عن الجزء الثاني و الجزء الثالث

.، يشكالن النظام آامال :قد تتضح لنا الصورة بشكل أوضح مع هذا الشكل

العام

بةسلن بامجحال

يةئولم ا

1

10

20

1997 1998 2000 2002

Page 91: Learn HTML Css Tahani

- 91 -

74شكل

:الخالصة

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

أصبح . أخذنا نبذة بسيطة عن آل لغة . لغات جهة العميل و لغات جهة المزود : اللغات ؟PHPآيف ؟ متى ؟ لماذا ؟ ماهي : لى اإلجابة على األسئلة لدينا القدرة ع

:مراجع إضافية

إذ أنه ! يبدو أن عدد الكتب التي تتحدث عن لغة البي اتش قد زاد عن المئة آتاب حاليا و ) أول آتاب لهذه اللغة آان باللغة األلمانية( آتاب باللغة األلمانية 50يوجد ما يزيد عن عين آتاب باللغة االنجليزية مع وجود نسخ مختلفة من هذه الكتب بكل ما يزيد عن األرب

!اللغات سأذآر هنا أبرز الكتب التي أعجبتني باللغة اإلنجليزية و التي قد تستفيد منها بنفسك

:

- SAMS Teach yourself PHP in 24 hours by Matt Zandstra (SAMS Publishing)

- 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.net http://www.phpbiulder.com http://www.apache.org http://www.mysql.com

:مواقع عربية -ب

http://www.c4arab.com http://www.php4web.com

Page 92: Learn HTML Css Tahani

- 92 -

http://www.phpvillage.com

Page 93: Learn HTML Css Tahani

- 93 -

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

Page 94: Learn HTML Css Tahani

- 94 -

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