âa†‚nbi@òîÜÇbÐm@oããa@ÉÓaìß@Šíìİm

PHP @ @ñ‰ì–Ûa@kíŠÔm@¿@†ÇbŽm@òÇìänß@òîÜàÇ@pbÔîjİm

@ @‫@ ﻣﻌﻠوﻣﺎت‬òîäÔm@áÓ
@ @@ @ @ @@ @@ @@@ ‫ﻣﺣﻣد اﻟﺑرﯾﮭﻲ‬.‫د‬
‫اﻟﺟزء اﻷول‬
‫‪JavaScript‬‬

‫انذرس األول ‪ :‬مقذمة فى انبزمجة كبئنية انحوجه(انبزمجة انشيئية) ‪3‬‬

‫)‪3 (introduction in object oriented programming‬‬
‫انذرس انثبني ‪ :‬انكبئنبت انزقمية داخم نغة انجبفب اسكزبث ‪11‬‬
‫)‪11 (JavaScript Number Object‬‬
‫انذرس انثبنث ‪ :‬انكبئنبت انمنطقية داخم نغة انجبفب اسكزبث ‪13‬‬
‫)‪13 (JavaScript Boolean Object‬‬
‫انذرس انزابع ‪ :‬انكبئنبت اننصية داخم نغة انجبفب اسكزبث ‪11‬‬
‫)‪11 (JavaScript String Object‬‬
‫انذرس انخبمس ‪ :‬كبئن انمصفوفبت داخم نغة انجبفب اسكزبث ‪11‬‬
‫)‪11 (JavaScript Array Object‬‬
‫انذرس انسبدس ‪ :‬كبئن انحبريخ داخم نغة انجبفب اسكزبث ‪02‬‬
‫)‪02 (JavaScript Date Object‬‬
‫انذرس انسببع ‪ :‬كبئن انمعبدالت انزيبضية داخم نغة انجبفب اسكزبث ‪01‬‬
‫)‪01 (JavaScript Math Object‬‬
‫انذرس انثبمن ‪ :‬كبئن انحعبيزات انمنحظمة داخم نغة انجبفب اسكزبث ‪02‬‬
‫)‪02 (JavaScript RegExp Object‬‬
‫انخبجمة ‪31‬‬
 ‫ميحرلا نمحرلا هللا‬ ‫بسم‬

‫الدرس األول ‪ :‬مقدمة فى البرمجة كائنية التوجه(البرمجة الشيئية)‬

‫)‪(introduction in object oriented programming‬‬

‫‪ ‬تمهيد ‪:‬‬
‫‪ JavaScript ‬هً لغة برمجة كائنٌة التوجه أو لغة البرمجة الشٌئٌة ‪oop‬‬

‫لماذا تسمى لغة ‪ java script‬ب )‪object oriented programming (oop‬‬

‫ٌمكن أن ٌطلك على لغة البرمجة اسم الكائن الموجه إذا لدمت أربع لدرات أساسٌة للمطورٌن هم‪:‬‬
‫‪ : Encapsulation -1‬معناها التغلٌف‬
‫وهى المدرة على تخزٌن المعلومات ذات الصلة حٌث ٌمكن تخزٌن بٌانات ‪ data‬و دوال‬
‫‪ methods‬معًا فً كائن ‪object‬‬

‫‪ : Aggregation -2‬معناها التجمٌع‬

‫وهى المدرة على تخزٌن كائن واحد داخل كائن آخر‬

‫‪ : Inheritance -3‬معناها الوراثة‬

‫وهى لدرة ‪ class‬على االعتماد والوراثة ‪ inheritance‬من ‪ class‬آخر أو من أكثر من ‪class‬‬
‫حٌث ٌمكن ان ٌرث بعض خصائص ‪ properties‬وبعض الدوال ‪methods‬‬

‫‪ : Polymorphism -4‬معناها تعدد األشكال‬

‫وهى المدرة على كتابة وظٌفة ‪ function‬أو دالة ‪ method‬واحدة حٌث تمكن تنفٌذها بمجموعة‬
‫متنوعة من الطرق المختلفة‬

‫‪ Objects‬تتكون من ‪Attributes‬‬
‫‪ ‬وإذا كانت هذه ‪ attribute‬تحتوي على ‪ ، function‬ففى هذه الحالة تسمى ‪method‬‬
‫‪ ‬وإذا كانت هذه ‪ attribute‬ال تحتوي على ‪ ، function‬ففى هذه الحالة تسمى ‪property‬‬
 ‫‪ : Object Properties‬خصائص الكائن‬
‫‪ ‬أنواع بٌانات خصائص الكائن ‪ :‬لد تكون خصائص الكائنات أى نوع من األنواع التالٌة‬
‫‪ : primitive data types ‬أنواع البٌانات األولٌة وهى ‪ number‬و ‪ boolean‬و ‪string‬‬
‫‪ : abstract data types ‬أنواع البٌانات المجردة مثل ‪object‬‬
‫‪ ‬لد تكون خصائص الكائن عبارة عن ‪ٌ local variable‬تم استخدامها داخلًٌا فً ‪ ، methods‬ولد‬
‫تكون ‪ global variables‬أو ‪ٌ visible variable‬تم استخدامها بشكل عام خالل الصفحة‪.‬‬

‫‪ : adding a property to an object ‬كٌفٌة اضافة خاصٌة للكائن‬

‫‪ :getting a value of property ‬كٌفٌة الحصول على لٌمة خاصٌة‬

‫فى السطر السابك حجزنا متغٌر اسمه "‪ "anyName‬وخصصنا فٌه لٌمة الخاصٌة‬

‫‪ ‬مثال ‪ :‬فى المثال التالى نرٌد الحصول على لٌمة ‪title‬‬

‫‪ : Object methods‬دوال الكائن‬

‫‪ ‬الدالة ‪ method‬هً الوظائف ‪ functions‬التً تجعل ‪ٌ object‬موم بشًء ما أو ٌسمح بشًء ٌتم‬
‫المٌام به‪ .‬هنان اختالف بسٌط بٌن الدالة ‪ method‬وبٌن الوظٌفة ‪function‬‬
‫‪ function ‬هً وحدة جمل لائمة بذاتها ٌمكن تنفٌذها فى اى مكان فى الصفحة‬
‫‪ method ‬هى التى ترتبط بالكائن وٌمكن اإلشارة إلٌها بواسطة الكلمة المحجوزة "‪"this‬‬
‫‪ ‬الدوال ‪ methods‬مفٌدة لكل شًء حٌث تستخدم لعرض محتوٌات الكائن إلى الشاشة وتستخدم ألداء‬
‫العملٌات الحسابٌة المعمدة على مجموعة من ‪ properties‬و ‪parameters‬‬

‫‪ ‬مثال ‪ :‬فى المثال التالى نستخدم الدالة ‪ write‬لطباعة أى محتوى نرٌده داخل ‪document‬‬
 ‫‪ : User-Defined Objects‬كائنات معرفة من لبل المستخدم‬
‫جمٌع الكائنات المعرفة من لبل المستخدم تسمى ‪ user-defined objects‬والكائنات المعرفة مسبما ً‬
‫داخل اللغة تسمى ‪ built-in objects‬وهً عبارة عن سالالت للكائن ‪descendants of object‬‬
‫والتى ترث من الكائن الذى ٌسمى "‪"Object‬‬

‫‪ : The new Operator ‬استخدام المعامل ‪new‬‬

‫ٌتم استخدام هذا ‪ operator‬إلنشاء مثٌل للكائن ‪ instance of an object‬بمعنى آخر النشاء نسخه‬
‫جدٌدة من الكائن‬
‫نكتب بعد المعامل ‪ new‬دالة ال ُمنشئ أو دالة البناء ‪constructor method‬‬
‫‪ : constructor method ‬هى عبارة عن دوال تم إنشائها مسبما ً داخل لغة الجافا اسكربت‬

‫‪ ‬مثال ‪:‬‬

‫‪: The Object() Constructor ‬‬

‫‪ : Constructor‬هو عبارة عن دالة التى تنشئ الكائن ‪ create object‬وهى المسؤولة عن عملٌة‬
‫‪initialization of object‬‬
‫تمكننا لغة الجافا اسكربت من عمل كائن جدٌد عن طرٌك ‪ Object() Constructor‬ولٌمة هذا‬
‫‪ٌ object‬تم تخزٌنها داخل متغٌر ‪variable‬‬
‫هذا المتغٌر ‪ variable‬هو عبارة عن مرجع لكائن جدٌد ‪ reference to the new object‬ولذلن‬
‫فإن خصائص ‪ properties‬التى تم تخصٌصها للكائن لٌست ‪ variable‬وال ٌتم تعرٌفها عن طرٌك‬
‫‪var keyword‬‬

‫‪ : Assigning properties to object ‬تعٌٌن خصائص للكائن‬

‫هنان طرٌمتٌن عند تعٌٌن ‪ properties‬أو تخصٌص ‪ properties‬للكائن‬
‫‪ ‬الطرٌمة األولى ‪ :‬عن طرٌك استخدام ‪Object() Constructor‬‬
‫‪ ‬الطرٌمة الثانٌة ‪ :‬عن طرٌك استخدام ‪User-Defined Function‬‬
‫‪ : this keyword ‬كلمة ‪ this‬هى كلمة محجوزة داخل لغة ‪ javascript‬تستخدم لنشٌر إلى الكائن الذى‬
‫نخصص له ‪ properties‬و ‪methods‬‬
 ‫‪ ‬مثال ‪ : 1‬عن طرٌك استخدام ‪Object() Constructor‬‬

‫‪ ‬الحظ الناتج‬

‫‪ ‬فى المثال السابك نالحظ كاآلتى ‪:‬‬

‫‪ ‬فى السطر ‪ 6‬لمنا باستخدام ‪ Object() constructor‬النشاء الكائن‬
‫‪ ‬فى السطر ‪ 7‬لمنا بتخصٌص خاصٌة للكائن ‪ book‬اسمها ‪ subject‬ولٌمتها "‪"Java script‬‬
‫‪ ‬فى السطر ‪ 8‬لمنا بتخصٌص خاصٌة للكائن ‪ book‬اسمها ‪ author‬ولٌمتها "‪"Mahmoud‬‬

‫‪ : dot (.) ‬اهمٌة النمطة ‪ dot‬أو ) ‪( .‬‬

‫‪ -1‬لتخصٌص المٌم للكائنات ‪Assigning values‬‬
‫‪ -2‬للدخول إلى الكائن ‪Access to object‬‬
‫‪ -3‬الحصول على المٌم ‪getting values‬‬
 ‫‪ ‬مثال ‪ : 2‬عن طرٌك استخدام ‪User-Defined Function‬‬

‫‪ ‬الحظ الناتج‬

‫‪ ‬فى المثال السابك نالحظ اآلتى ‪:‬‬

‫‪ ‬فى السطر ‪ 6-7-8‬لمنا بعمل دالة لتخصٌص لٌم للكائن‬
‫‪ ‬فى السطر ‪ 14‬لمنا باستخدام ‪ User-Defined Function‬اسمها ‪ book‬النشاء الكائن‬
‫‪ ‬فى السطر ‪ 15‬لمنا بتخصٌص خاصٌة للكائن ‪ book‬اسمها ‪ subject‬ولٌمتها "‪"Java script‬‬
‫‪ ‬فى السطر ‪ 16‬لمنا بتخصٌص خاصٌة للكائن ‪ book‬اسمها ‪ author‬ولٌمتها "‪"Mahmoud‬‬
 ‫‪ : Defining Methods for an Object‬تعرٌف دوال للكائن‬
‫فى األمثلة السابمة الحظنا كٌف نستخدم ‪ constructor‬النشاء ‪ object‬وكٌف نخصص ‪properties‬‬
‫لهذا ‪ object‬أما اآلن سوف نتمكن من عمل ‪ methods‬للكائن‬

‫‪ ‬مثال ‪add a function to object : 3‬‬

‫‪ ‬الحظ الناتج‬

‫‪ ‬فى المثال السابك نالحظ أننا لد استخدمنا الطرٌمة الثانٌة النشاء كائن ‪ create object‬ثم لمنا‬
‫بتخصٌص ‪ properties‬وأٌضا ً لمنا بتعٌٌن ‪ method‬اسمها ‪ addprice‬للكائن ‪book‬‬
 ‫‪ٌ : The 'with' Keyword‬مكن استخدام الكلمة المحجوزة ‪ with‬كنوع من لالشارة إلى خصائص‬
‫الكائن ‪ object properties‬أو دوال الكائن ‪ object methods‬بطرٌمة مختصرة‬
‫‪ Object ‬الذى ٌستخدم ‪ٌ with‬عتبر ‪ default object‬ولذلن ٌمكن استخدام كالً من ‪ properties‬و‬
‫‪ methods‬لهذا الكائن بدون استخدام اسم الكائن ‪ naming the object‬وبدون استخدام النمطة ( ‪) .‬‬

‫‪: Syntax ‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬الحظ الناتج‬

‫‪ : JavaScript Native Objects‬الكائنات األصلٌة داخل لغة الجافا اسكربت‬

‫ داخل لغة الجافا‬built-in objects ً ‫ انواع من الكائنات المضمنة أو التى تم انشائها مسبما‬7 ‫ ٌوجد‬
‫اسكربت سوف نتعرف علٌهم فى الفصول المادمة بالتفصٌل ولكن سوف نأخذ نبذة مختصرة على‬
: ‫كل نوع وهم‬
JavaScript Number Object -1

JavaScript Boolean Object -2

JavaScript String Object -3

JavaScript Array Object -4

JavaScript Date Object -5

JavaScript Math Object -6

JavaScript RegExp Object -7

 ‫الدرس الثاني ‪ :‬الكائنات الرقمية داخل لغة الجافا اسكربت‬
‫)‪(JavaScript Number Object‬‬
‫‪ ‬تموم أنواع البٌانات الرلمٌة ‪ Number data types‬بتخزٌن المٌم الرلمٌة ‪.numeric values‬‬
‫وهً أنواع بٌانات غٌر لابلة للتغٌٌر ‪ ،‬وٌعنً أن تغٌٌر لٌمة نوع بٌانات عدد ٌؤدي إلى تخصٌص كائن‬
‫جدٌد ‪.newly allocated object‬‬
‫‪ : Number ‬عبارة عن تخزٌن لٌم رلمٌة وهنان عدة أنواع داخل لغة ‪ javascript‬مثل ‪:‬‬
‫‪ : Integer ‬وهى أعداد صحٌحة ولد تكون موجبة أو سالبة مثل ( ‪ 5‬أو ‪) -5‬‬
‫‪ : Float ‬وهى أعداد عشرٌة (‪ )integer + fraction part‬مثل )‪(5.25‬‬

‫‪ ‬ال داعً للملك بشأن ‪ Number Object‬ألن المتصفح ٌموم تلمائًٌا بتحوٌل المٌم الحرفٌة العددٌة‬
‫‪ number literals‬إلى فئة المثٌلة العدد ‪instances of the number class‬‬

‫‪: Syntax ‬‬

‫‪ٌ ‬تم كتابة الرلم بداخل الموسٌن مكان كلمة ‪ number‬ولكن عندما نموم بادخال لٌمة غٌر رلمٌة بٌن‬
‫الموسٌن أو ما ٌسمى بالبارامٌتر ‪ argument‬فلن ٌتم تحوٌل ‪ argument‬إلى لٌمة رلمٌة وسوف‬
‫ٌموم بارجاع لٌمة ‪ NaN‬أى (‪)Not-a-Number‬‬

‫‪ : Number Properties‬الخصائص الخاصة بالكائن ‪Number‬‬

‫‪Property‬‬ ‫‪meaning‬‬ ‫‪Description‬‬
‫‪MAX_VALUE‬‬ ‫ألصً لٌمة‬ ‫أمجش ق‪َٞ‬خ ٍَنْخ ‪َٝ‬نِ أُ ‪ٝ‬ؾز٘‪ٖٝ‬ب سقٌ ف‪JavaScript ٚ‬‬
‫‪MIN_VALUE‬‬ ‫ألل لٌمة‬ ‫أصغش ق‪َٞ‬خ ٍَنْخ ‪َٝ‬نِ أُ ‪ٝ‬ؾز٘‪ٖٝ‬ب سقٌ ف‪JavaScript ٜ‬‬
‫‪NaN‬‬ ‫لٌس لٌمة رلمٌة‬ ‫ٕ‪ ٚ‬ق‪َٞ‬خ صبثزخ ٗرغبٗ‪ ٛ‬ق‪َٞ‬خ غ‪ٞ‬ش سقَ‪ٞ‬خ‬
‫‪NEGATIVE_INFINITY‬‬ ‫ألل ما ال نهاٌة‬ ‫ق‪َٞ‬خ أقو ٍِ أقو ق‪َٞ‬خ ‪MIN_VALUE‬‬
‫‪POSITIVE_INFINITY‬‬ ‫أكبر ما ال نهاٌة‬ ‫ق‪َٞ‬خ أمجش ٍِ أمجش ق‪َٞ‬خ ‪MAX_VALUE‬‬
‫‪prototype‬‬ ‫النموزج األولى‬ ‫خبص‪ٞ‬خ صبثزخ ىينبئْبد رغزخذً ىزؼ‪ ِٞٞ‬خصبئص ٗدٗاه‬
‫عذ‪ٝ‬ذح ىينبئْبد ف‪ document ٜ‬اىؾبى‪ٞ‬خ‬
‫‪constructor‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزشعغ اىذاىخ اىز‪ ٜ‬أدد إى‪ ٚ‬إّشبء ٕزا اىنبئِ ال ُمنشئ أو ال ُمشٌد أو‬
‫دالة انشاء الكائن‬ ‫اىق‪َٞ‬خ االفزشاظ‪ٞ‬خ ْٕب ٕ‪Number object ٚ‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل خاصٌة ‪property‬‬

 ‫‪ : Number methods‬الدوال الخاصة بالكائن ‪Number‬‬
‫‪method‬‬ ‫‪meaning‬‬ ‫‪Description‬‬
‫)(‪toExponential‬‬ ‫دالة األس‬ ‫داىخ رغزخذً ىؼشض اىشقٌ ثبىق‪َٞ‬خ األع‪ٞ‬خ‬
‫)(‪toFixed‬‬ ‫داىخ رغزخذً ىزؾذ‪ٝ‬ذ ػذد األسقبً اىؼشش‪ٝ‬خ ثؼذ اىؼالٍخ اىؼشش‪ٝ‬خ دالة العالمة العشرٌة‬
‫دالة تحوٌل الرلم لنص )(‪toLocaleString‬‬ ‫داىخ رغزخذً ىزؾ٘‪ٝ‬و ‪ number‬إى‪َٝ string ٚ‬نِ قشائزٔ‬
‫ٗرَضو اىشقٌ ثبعزخذاً ىغخ اىج‪ٞ‬ئخ‪.‬‬
‫)(‪toPrecision‬‬ ‫دالة لضبط الدلة‬ ‫داىخ رغزخذً ىزؾذ‪ٝ‬ذ ػذد ‪ digits‬اىز‪ ٚ‬قجو ٗثؼذ اىؼالٍخ‬
‫اىؼشش‪ٝ‬خ‬
‫)(‪toString‬‬ ‫دالة تحوٌل للرلم لنص‬ ‫داىخ رغزخذً ىزؾ٘‪ٝ‬و ‪ number‬إى‪string ٚ‬‬
‫)(‪valueOf‬‬ ‫لٌمة الرلم‬ ‫داىخ رغزخذً ىزشعغ ق‪َٞ‬خ ‪number‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل دالة ‪method‬‬

 ‫الدرس الثالث ‪ :‬الكائنات المنطقية داخل لغة الجافا اسكربت‬
‫)‪(JavaScript Boolean Object‬‬
‫‪ ‬تموم أنواع البٌانات الرلمٌة ‪ Boolean data types‬بتخزٌن المٌم المنطمٌة ‪.boolean values‬‬

‫‪ : Boolean ‬عبارة عن تخزٌن لٌم منطمٌة وهنان لٌمتٌن فمط ‪:‬‬

‫‪ : true ‬وتعنى تحمك الشرط أو نعم ‪ Yes‬أو واحد ‪1‬‬
‫‪ : false ‬وتعنى عدم تحمك الشرط أو ال ‪ No‬أو صفر ‪0‬‬

‫‪: Syntax ‬‬

‫‪ٌ ‬تم كتابة المٌمة بداخل الموسٌن مكان كلمة ‪value‬‬

‫‪ ‬اذا لمنا بكاتبة ‪ 0‬أو ‪ -0‬أو ‪ NaN‬أو ‪ undefined‬أو لٌمة نصٌة فارغة ‪ empty string‬أو لم ندخل‬
‫لٌمة فسوف تكون لٌمة ‪ object‬االفتراضٌة ‪false‬‬

‫‪ : Boolean Properties‬الخصائص الخاصة بالكائن ‪Boolean‬‬

‫‪Property‬‬ ‫‪meaning‬‬ ‫‪Description‬‬
‫‪prototype‬‬ ‫النموزج األولى‬ ‫خبص‪ٞ‬خ صبثزخ ىينبئْبد رغزخذً ىزؼ‪ ِٞٞ‬خصبئص ٗدٗاه‬
‫عذ‪ٝ‬ذح ىينبئْبد ف‪ document ٜ‬اىؾبى‪ٞ‬خ‬
‫‪constructor‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزشعغ اىذاىخ اىز‪ ٜ‬أدد إى‪ ٚ‬إّشبء ٕزا اىنبئِ ال ُمنشئ أو ال ُمشٌد أو‬
‫دالة انشاء الكائن‬ ‫اىق‪َٞ‬خ االفزشاظ‪ٞ‬خ ْٕب ٕ‪Boolean object ٚ‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل خاصٌة ‪property‬‬

‫‪ : Boolean methods‬الدوال الخاصة بالكائن ‪Boolean‬‬
‫‪method‬‬ ‫‪meaning‬‬ ‫‪Description‬‬
‫)(‪toSource‬‬ ‫دالة المصدر‬ ‫داىخ رغزخذً السعبع ‪ source‬ىينبئِ مق‪َٞ‬خ ّص‪ٞ‬خ‬
‫)(‪toString‬‬ ‫دالة تحوٌل للرلم لنص‬ ‫داىخ رغزخذً ىزؾ٘‪ٝ‬و ‪ boolean‬إى‪ ٚ‬ق‪َٞ‬خ ّص‪ٞ‬خ ‪string‬‬
‫)(‪valueOf‬‬ ‫لٌمة الرلم‬ ‫داىخ رغزخذً ىزشعغ اىق‪َٞ‬خ اىجذائ‪ٞ‬خ ىو ‪Boolean object‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل دالة ‪method‬‬

 ‫الدرس الرابع ‪ :‬الكائنات النصية داخل لغة الجافا اسكربت‬
‫)‪(JavaScript String Object‬‬
‫‪ ‬تموم أنواع البٌانات النصٌة ‪ String data types‬بتخزٌن المٌم النصٌة ‪.String values‬‬
‫‪ : Strings ‬السلسالت وهى عبارة عن سلسلة من األحرف التً تم ترمٌزها ‪ encoded‬بشكل صحٌح‪.‬‬
‫ولد تكون من فراغات ‪ spaces‬أو أى حرف موجود على لوحة المفاتٌح ‪( keyboard‬مجموعة‬
‫متجاورة من الحروف )‬

‫‪ ‬ال داعً للملك بشأن ‪ String Object‬ألن المتصفح ٌموم تلمائًٌا بتحوٌل بٌن ‪string primitives‬‬
‫وبٌن ‪ ، String objects‬فٌمكنن استدعاء أي من الطرق المساعدة ‪ String object‬وتنفٌذها على‬
‫‪.string primitive‬‬

‫‪: Syntax ‬‬

‫‪ٌ ‬تم كتابة المٌمة النصٌة بداخل الموسٌن مكان كلمة ‪string‬‬

‫‪ : String Properties‬الخصائص الخاصة بالكائن ‪String‬‬

‫‪Property‬‬ ‫‪Description‬‬
‫‪length‬‬ ‫خبص‪ٞ‬خ ىزؾذ‪ٝ‬ذ غ٘ه اىغيغخ (ػذد اىؾشٗف ٗاىَغبفبد)‬
‫‪prototype‬‬ ‫خبص‪ٞ‬خ صبثزخ ىينبئْبد رغزخذً ىزؼ‪ ِٞٞ‬خصبئص ٗدٗاه عذ‪ٝ‬ذح ىينبئْبد ف‪ٜ‬‬
‫‪ document‬اىؾبى‪ٞ‬خ‬
‫‪constructor‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزشعغ اىذاىخ اىز‪ ٜ‬أدد إى‪ ٚ‬إّشبء ٕزا اىنبئِ اىق‪َٞ‬خ االفزشاظ‪ٞ‬خ‬
‫ْٕب ٕ‪String object ٚ‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل خاصٌة ‪property‬‬

 ‫‪ : String methods‬الدوال الخاصة بالكائن ‪String‬‬
‫‪method‬‬ ‫‪Description‬‬
‫)(‪charAt‬‬ ‫داىخ رغزخذً إل‪ٝ‬غبد ق‪َٞ‬خ ‪ character‬ػْذ ‪ٍ index‬ؼ‪ِٞ‬‬
‫)(‪charCodeAt‬‬ ‫داىخ رغزخذً ىؼشض ق‪َٞ‬خ ‪ Unicode‬ىيؾشف ػْذ ‪ٍ index‬ؼ‪ِٞ‬‬
‫)(‪concat‬‬ ‫داىخ رغزخذً ىذٍظ ّص‪ٍ ِٞ‬ؼب ً (‪ٗ )2 string‬ثزشعغ ‪ string‬عذ‪ٝ‬ذ‬
‫)(‪indexOf‬‬ ‫داىخ رغزخذً ىزشعغ ق‪َٞ‬خ ‪ index‬ألٗه ‪ string‬رغذٓ‬
‫)(‪lastIndexOf‬‬ ‫داىخ رغزخذً ىزشعغ ق‪َٞ‬خ ‪ٟ index‬خش ‪ string‬رغذٓ‬
‫)(‪localeCompare‬‬ ‫داىخ رغزخذً ىَقبسّخ ث‪ ِٞ‬عيغيز‪(2 string) ِٞ‬‬
‫)(‪match‬‬ ‫داىخ رغزخذً ىَقبسّخ ث‪ٗ regular expression ِٞ‬ث‪string ِٞ‬‬
‫)(‪replace‬‬ ‫داىخ رغزخذً ىيؼض٘سػي‪ ٚ‬رطبثق ث‪ٗ regular expression ِٞ‬ث‪string ِٞ‬‬
‫ٗاعزجذاه اىغيغيخ اىفشػ‪ٞ‬خ اىَزطبثقخ ثغيغيخ فشػ‪ٞ‬خ عذ‪ٝ‬ذح‪.‬‬
‫)(‪search‬‬ ‫داىخ رغزخذً ىيجؾش ػِ رطبثق ث‪ٗ regular expression ِٞ‬ث‪string ِٞ‬‬
‫)(‪slice‬‬ ‫داىخ رغزخذً العزخشاط ٍقطغ ‪ٗ string ٍِ slice‬ثزشعغ ‪ string‬عذ‪ٝ‬ذ‬
‫)(‪split‬‬ ‫داىخ رغزخذً ىزقغ‪ string ٌٞ‬إى‪ٍ ٚ‬غَ٘ػخ ٍِ ‪ substring‬أٗ ‪array‬‬
‫)(‪substr‬‬ ‫داىخ رغزخذً ىزشعغ عيغيخ فشػ‪ٞ‬خ ػْذ ‪ٍ index‬ؼ‪ٗ ِٞ‬ثط٘ه ٍؼ‪length ِٞ‬‬
‫)(‪substring‬‬ ‫داىخ رغزخذً ىزشعغ عيغيخ فشػ‪ٞ‬خ ث‪ٗ start index ِٞ‬ث‪end index ِٞ‬‬
‫)(‪toLocaleLowerCase‬‬ ‫داىخ رغزخذً ىزؾ٘‪ٝ‬و أ‪ ٙ‬ؽشف ‪ upper‬إى‪ٍ lower ٚ‬غ ٍشاػبح ‪current‬‬
‫‪locale‬‬
‫)(‪toLocaleUpperCase‬‬ ‫داىخ رغزخذً ىزؾ٘‪ٝ‬و أ‪ ٙ‬ؽشف ‪ lower‬إى‪ٍ upper ٚ‬غ ٍشاػبح ‪current‬‬
‫‪locale‬‬
‫)(‪toLowerCase‬‬ ‫داىخ رغزخذً ىزؾ٘‪ٝ‬و أ‪ ٙ‬ؽشف ‪ upper‬إى‪lower ٚ‬‬
‫)(‪toUpperCase‬‬ ‫داىخ رغزخذً ىزؾ٘‪ٝ‬و أ‪ ٙ‬ؽشف ‪ lower‬إى‪upper ٚ‬‬
‫)(‪toString‬‬ ‫داىخ رغزخذً ق‪َٞ‬خ ّص‪ٞ‬خ ىينبئِ‬
‫)(‪valueOf‬‬ ‫داىخ رغزخذً ىزشعغ اىق‪َٞ‬خ اىجذائ‪ٞ‬خ ىينبئِ‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل دالة ‪method‬‬

 ‫‪ : String HTML Wrappers‬الدوال الخاصة بالكائن ‪ String‬تم تضمٌنها داخل لغة ‪HTML‬‬
‫‪Property‬‬ ‫‪Description‬‬
‫)(‪anchor‬‬ ‫داىخ رقً٘ ثإّشبء ‪ anchor‬داخو ىغخ ‪HTML‬‬
‫)(‪big‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب ثخػ مج‪ٞ‬ش مَب ى٘ مبّذ ف‪>big< ٜ‬‬
‫)(‪blink‬‬ ‫داىخ رقً٘ ثإّشبء ‪ string‬مٍ٘‪ٞ‬ط ‪ blink‬مَب ى٘ مبّذ ف‪>blink< ٜ‬‬
‫)(‪bold‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٗ string‬ػشظٖب ثبىخػ اىؼش‪ٝ‬ط مَب ى٘ مبّذ ف‪.>b< ٜ‬‬
‫)(‪fixed‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب ثخػ صبثذ مَب ى٘ مبّذ ف‪>tt< ٜ‬‬
‫)(‪fontcolor‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب ثبىيُ٘ اىَؾذد مَب ى٘ مبّذ ف‪ٜ‬‬
‫<"‪>font color = "color‬‬
‫)(‪fontsize‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب ف‪ ٜ‬ؽغٌ اىخػ اىَؾذد مَب ى٘ مبّذ ف‪ٜ‬‬
‫<"‪>font size = "size‬‬
‫)(‪italics‬‬ ‫داىخ رقً٘ ثإّشبء ‪ string‬عيغيخ ىزنُ٘ ٍبئيخ ‪ ،‬مَب ى٘ مبّذ ف‪>i< ٜ‬‬
‫)(‪link‬‬ ‫داىخ رقً٘ ثإّشبء ‪ string‬مؼجبسح ػِ ‪ٝ hypertext‬طيت ػْ٘اُ ‪ URL‬آخش‬
‫)(‪small‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب ثخػ صغ‪ٞ‬ش ‪ ،‬مَب ى٘ مبّذ ف‪>small< ٜ‬‬
‫)(‪strike‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب ّص‪ٞ‬خ ٍزقطؼخ ‪ ،‬مَب ى٘ مبّذ ف‪>strike< ٜ‬‬
‫)(‪sub‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب مخػ ٍْخفط ‪ ،‬مَب ى٘ مبّذ ف‪>sub< ٜ‬‬
‫)(‪sup‬‬ ‫داىخ رقً٘ ثإّشبء ‪ٝ string‬زٌ ػشظٖب ػي‪ ٚ‬اىْؾ٘ اىَشرفغ ‪ ،‬مَب ى٘ مبّذ ف‪>sup< ٜ‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل دالة ‪method‬‬

 ‫الدرس الخامس ‪ :‬كائن المصفوفات داخل لغة الجافا اسكربت‬
‫)‪(JavaScript Array Object‬‬

‫‪ : Array ‬المصفوفات وهى عبارة عن تخزٌن لٌم متعددة فً متغٌر واحد‬

‫أو مجموعة متسلسلة من العناصر ذات حجم ثابت من نفس النوع‪.‬‬
‫أو هى مجموعة من المتغٌرات من نفس النوع‬
‫ٌتم استخدام المصفوفات لتخزٌن مجموعة من البٌانات ‪collection of data‬‬

‫‪ ‬البارامٌترات التى نمررها للمصفوفة ‪ Array parameter‬هً عبارة عن ‪ list‬من السالسل النصٌة‬
‫‪ strings‬أو األعداد الصحٌحة ‪integers‬‬
‫‪ ‬عند تحدٌد معامالت رلمٌة مفردة باستخدام ‪ ، constructor‬فإنن تحدد الطول المبدئً للمصفوفة‪.‬‬
‫الحد األلصى المسموح به للمصفوفاتهو هو ‪4,294,967,295‬‬
‫‪ٌ ‬بدأ العد أو الفهرسة ‪ index‬للمصفوفة من الرلم ‪0‬‬
‫‪ ‬العنصر األول ٌبدأ ب ]‪[0‬‬
‫‪ ‬العنصر الثانى ٌبدأ ب ]‪[1‬‬
‫‪ ‬العنصر الثالث ٌبدأ ب ]‪[2‬‬

‫‪ : Set values to Array ‬تخصٌص لٌم المصفوفة‬

‫نستخدم معامل المطع ‪ slice operator‬كما بالشكل ) ] [ ) أو ) ] ‪ ( [start : End‬للدخول الى‬
‫عناصر المصفوفة ‪elements of array‬‬

‫‪ : Access to Array ‬الدخول إلى عناصر المصفوفة‬

‫نستخدم معامل المطع ‪ slice operator‬كما بالشكل ) ] [ ) أو ) ] ‪ ( [start : End‬للوصول الى‬
‫عناصر المصفوفة ‪elements of array‬‬

‫‪: Syntax ‬‬

‫‪ ‬ال ٌمكن كتابة أكثر من نوع داخل المصفوفة ولكن ٌجب كتابة نوع واحد فمط‬
 ‫‪ : Array Properties‬الخصائص الخاصة بالكائن ‪Array‬‬
‫‪Property‬‬ ‫‪Description‬‬
‫‪length‬‬ ‫خبص‪ٞ‬خ ىزؾذ‪ٝ‬ذ غ٘ه ػْبصش اىَصف٘فخ‬
‫‪prototype‬‬ ‫خبص‪ٞ‬خ صبثزخ ىينبئْبد رغزخذً ىزؼ‪ ِٞٞ‬خصبئص ٗدٗاه عذ‪ٝ‬ذح ىينبئْبد ف‪ٜ‬‬
‫‪ document‬اىؾبى‪ٞ‬خ‬
‫‪constructor‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزشعغ اىذاىخ اىز‪ ٜ‬أدد إى‪ ٚ‬إّشبء ٕزا اىنبئِ اىق‪َٞ‬خ االفزشاظ‪ٞ‬خ‬
‫ْٕب ٕ‪Array object ٚ‬‬
‫‪input‬‬ ‫ٕزٓ اىخبص‪ٞ‬خ ٍ٘ع٘دح فقػ ف‪ ٜ‬اىَصف٘فبد اىز‪ ٜ‬رٌ إّشبؤٕب ث٘اعطخ ٍطبثقبد‬
‫اىزؼج‪ٞ‬ش اىؼبد‪regular expression matches ٛ‬‬
‫‪index‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزشعغ ق‪َٞ‬خ ‪ index‬ػْذ ق‪َٞ‬خ ‪ٍ string‬ؼ‪ِٞ‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل خاصٌة ‪property‬‬

‫‪ : Array methods‬الدوال الخاصة بالكائن ‪Array‬‬

‫‪method‬‬ ‫‪Description‬‬
‫)(‪concat‬‬ ‫داىخ رغزخذً ىذٍظ ٍصف٘فز‪ ِٞ‬أٗ ث‪ ِٞ‬ق‪ٍ ٌٞ‬صف٘فز‪ِٞ‬‬
‫)(‪every‬‬ ‫داىخ رغزخذً إلسعبع ‪ true‬إرا مبُ مو ػْصش ف‪ٕ ٜ‬زا اىَصف٘فخ ‪ٝ‬ؾقق داىخ‬
‫االخزجبس‪.‬‬
‫)(‪filter‬‬ ‫داىخ رغزخذً إلّشبء ٍصف٘فخ عذ‪ٝ‬ذح رؾز٘‪ ٛ‬ػي‪ ٚ‬عَ‪ٞ‬غ ػْبصشٍصف٘فخ ٍفيزشح‬
‫)(‪forEach‬‬ ‫داىخ رقً٘ ثبعزذػبء ‪ function‬ىنو ػْصش ٍِ ػْبصش اىَصف٘فخ‬
‫)(‪indexOf‬‬ ‫داىخ رغزخذً ىؼشض ‪ index‬ألٗه ‪ٝ string‬ظٖش‬
‫)(‪lastIndexOf‬‬ ‫داىخ رغزخذً ىؼشض ‪ٟ index‬خش ‪ٝ string‬ظٖش‬
‫)(‪join‬‬ ‫داىخ رغزخذً ىشثػ ‪ string‬ثنو ػْصش ٍِ ػْبصش ‪Array‬‬
‫)(‪map‬‬ ‫داىخ رغزخذً الّشبء ٍصف٘فخ عذ‪ٝ‬ذح رؾز٘‪ ٛ‬ػي‪ّ ٚ‬زبئظ اعزذػبء داىخ ٍقذٍخ ىنو‬
‫ػْصش ف‪ٕ ٜ‬زا اىَصف٘فخ‪.‬‬
‫)(‪pop‬‬ ‫داىخ رغزخذً إلصاىخ اىؼْصش األخ‪ٞ‬ش ٍِ ٍصف٘فخ ٗ‪ٝ‬ؼ‪ٞ‬ذ ٕزا اىؼْصش‪.‬‬
‫)(‪push‬‬ ‫ػْصشا ٗاؽذًا أٗ أمضش إى‪ّٖ ٚ‬ب‪ٝ‬خ اىَصف٘فخ ٗ‪ٝ‬ؼ‪ٞ‬ذ غ٘ه‬
‫ً‬ ‫داىخ رغزخذً ى‪ٞ‬ع‪ٞ‬ف‬
‫اىَصف٘فخ اىغذ‪ٝ‬ذ‪.‬‬
‫)(‪reduce‬‬ ‫داىخ رغزخذً ىزطج‪ٞ‬ق داىخ ف‪ٗ ٜ‬قذ ٗاؽذ ٍقبثو ق‪َٞ‬ز‪ ِٞ‬ىيَصف٘فخ (ٍِ اى‪ٞ‬غبس إى‪ٚ‬‬
‫اى‪ )َِٞٞ‬ىزقي‪ٞ‬يٖب إى‪ ٚ‬ق‪َٞ‬خ ٗاؽذح‪.‬‬
‫)(‪reduceRight‬‬ ‫داىخ رغزخذً ىزطج‪ٞ‬ق داىخ ف‪ٗ ٜ‬قذ ٗاؽذ ٍقبثو ق‪َٞ‬ز‪ ِٞ‬ىيَصف٘فخ (ٍِ اى‪ َِٞٞ‬إى‪ٚ‬‬
‫اى‪ٞ‬غبس) ىزقي‪ٞ‬يٖب إى‪ ٚ‬ق‪َٞ‬خ ٗاؽذح‪.‬‬
‫)(‪reverse‬‬ ‫داىخ رغزخذً ىؼنظ أٗ ىقيت رشر‪ٞ‬ت ػْبصش اىَصف٘فخ فبىؼْصش األٗه ‪ٝ‬صجؼ‬
‫األخ‪ٞ‬ش ‪ٗ ،‬اىؼْصش األخ‪ٞ‬ش ‪ٝ‬صجؼ األٗه‬
‫)(‪shift‬‬ ‫داىخ رغزخذً ىزض‪ٝ‬و اىؼْصش األٗه ٍِ ٍصف٘فخ ٗ‪ٝ‬ؼ‪ٞ‬ذ ٕزا اىؼْصش‪.‬‬
‫)(‪unshift‬‬ ‫داىخ رغزخذً ىزع‪ٞ‬ف ػْصش أٗ أمضش إى‪ٍ ٚ‬قذٍخ اىَصف٘فخ ٗ‪ٝ‬ؼ‪ٞ‬ذ غ٘ه‬
‫اىصف‪ٞ‬ف اىغذ‪ٝ‬ذ‪.‬‬
‫)(‪slice‬‬ ‫داىخ رغزخذً العزخشاط ٍقطغ ٍِ اىَصف٘فخ ٗإسعبع ٍصف٘فخ عذ‪ٝ‬ذ‪.‬‬
‫)(‪some‬‬ ‫داىخ رغزخذً إلسعبع ‪ true‬إرا مبُ ػْصش ٗاؽذ ػي‪ ٚ‬األقو ف‪ٕ ٜ‬زا اىَصف٘فخ‬
‫‪ٝ‬يج‪ٗ ٜ‬ظ‪ٞ‬فخ االخزجبس اىَقذٍخ‪.‬‬
‫)(‪toSource‬‬ ‫داىخ رغزخذً ىؼشض شفشح اىَصذس ىينبئِ ‪source code of an object‬‬
‫)(‪sort‬‬ ‫داىخ رغزخذً ىزشر‪ٞ‬ت ػْبصش اىَصف٘فخ‬
‫)(‪splice‬‬ ‫داىخ رغزخذً ىزع‪ٞ‬ف أٗ ىزض‪ٝ‬و ػْبصش ٍِ ٍصف٘فخ‪.‬‬
‫)(‪toString‬‬ ‫داىخ رغزخذً ىؼشض ‪ string‬رَضو اىَصف٘فخ ٗػْبصشٕب‪.‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل دالة ‪method‬‬

 ‫الدرس السادس ‪ :‬كائن التاريخ داخل لغة الجافا اسكربت‬
‫)‪(JavaScript Date Object‬‬

‫‪ :Date ‬التارٌخ هو نوع من انواع البٌانات المضمن داخل لغة ‪java script‬‬
‫‪ٌ ‬تم إنشاء ‪ object‬من ‪ Date‬عن طرٌك ) (‪new Date‬‬

‫‪ : Method of object Date ‬هنان العدٌد من الدوال ‪ methods‬الخاصة ب ‪ Date‬هذه الدوال‬

‫تسمح لن ببساطة بالوصول إلى حمول السنة والشهر والٌوم والساعة والدلٌمة والثانٌة والملً ثانٌة‬
‫‪ : Types of Date ‬هنان نوعٌن الستخدام التارٌخ‬
‫‪ ‬النوع األول ‪ local time :‬وهو التولٌت المحلى‬
‫‪ ‬النوع الثانى ‪ UTC :‬أو (‪ )universal, or GMT‬وهو التولٌت العالمى‬

‫‪ٌ ‬مكن أن تمثل ‪ JavaScript‬التارٌخ والولت حتى عام ‪275755‬‬

‫‪: Syntax ‬‬

‫‪ : Parameters ‬المعامالت التى نمررها داخل األلواس هى معامالت اختٌارٌة‬

‫‪ ‬سوف نتعرف على كل نوع من أنواع استخدام ‪parameters‬‬

‫‪ ‬النوع األول ‪ : No argument :‬بدون استخدام معامالت‬
‫ٌتم إنشاء ‪ object‬من ‪ Date‬وٌتم تعٌٌن فٌه التارٌخ ‪ Date‬والولت ‪ Time‬الحالٌٌن‬

‫‪ ‬النوع الثانً ‪ : milliseconds :‬باستخدام المٌللى ثانٌة‬

‫عندما ٌتم تمرٌر بارامٌتر رلمى ‪ number‬واحد ‪ٌ ،‬تم أخذها كتمثٌل رلمً داخلً للتارٌخ بالمللً ثانٌة‬
‫‪ ،‬كما ٌتم إرجاعها بواسطة أسلوب )(‪ ، getTime‬على سبٌل المثال ‪ ،‬عندما نمرر المٌمة ‪ 5000‬إلى‬
‫‪ Date‬فسوف ٌتم تمثٌل المٌمة وإنشاء تارٌخ بمٌمة خمس ثوان بعد منتصف اللٌل فً ‪1/1/70‬‬
 ‫‪ ‬النوع الثالث ‪ : datestring :‬باستخدام سلسة نصٌة من تارٌخ‬
‫عندما ٌتم تمرٌر بارامٌتر نصً ‪ string‬واحد ‪ ،‬فسوف ٌتم تمثٌل هذا ‪ string‬بالتنسٌك الممبولة بواسطة‬
‫الدالة )(‪Date.parse‬‬

‫‪ ‬النوع الرابع ‪ : 7 arguments :‬باستخدام ادخال ‪ 7‬بارامٌترات‬

‫‪ : year ‬وهى المٌمة الصحٌحة التً تمثل السنة وٌجب علٌن دائ ًما تحدٌد السنة بالكامل أى استخدم‬
‫‪ 1998‬بدالً من ‪ 98‬لكى تتجنب مشكلة ‪Y2K‬‬
‫‪ : month ‬وهى المٌمة الصحٌحة التً تمثل الشهر ‪ ،‬وتبدأ الشهور من ‪ 0‬التى تمثل الشهر ٌناٌر‬
‫إلى ‪ 11‬التى تمثل الشهر دٌسمبر‬
‫‪ : date ‬وهى لٌمة عدد صحٌح تمثل ٌوم الشهر‬
‫‪ : hour ‬وهى لٌمة صحٌحة تمثل ساعة الٌوم (الممٌاس ‪ 24‬ساعة)‬
‫‪ : minute ‬وهى لٌمة عدد صحٌح تمثل الدلائك (الجزء الدلٌك) (الممٌاس ‪ 60‬دلٌمة)‬
‫‪ : second ‬وهى لٌمة عدد صحٌح تمثل الثوانى ( الجزء الثانً من الولت) (الممٌاس ‪ 60‬ثانٌة)‬
‫‪ : millisecond ‬وهى لٌمة عدد صحٌح تمثل المللً ثانٌة (الممٌاس ‪ 1000‬مٌللى ثانٌة)‬

‫‪ : Date Properties‬الخصائص الخاصة بالكائن ‪Date‬‬

‫‪Property‬‬ ‫‪Description‬‬
‫‪prototype‬‬ ‫خبص‪ٞ‬خ صبثزخ ىينبئْبد رغزخذً ىزؼ‪ ِٞٞ‬خصبئص ٗدٗاه عذ‪ٝ‬ذح ىينبئْبد ف‪ٜ‬‬
‫‪ document‬اىؾبى‪ٞ‬خ‬
‫‪constructor‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزشعغ اىذاىخ اىز‪ ٜ‬أدد إى‪ ٚ‬إّشبء ٕزا اىنبئِ اىق‪َٞ‬خ االفزشاظ‪ٞ‬خ‬
‫ْٕب ٕ‪Date object ٚ‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل خاصٌة ‪property‬‬

‫‪ : Date Static Methods‬دوال ثابتة خاصة بالكائن ‪Date‬‬

‫هنان دالتٌن لتحوٌل ‪ Date‬إى‪ ، string ٚ‬باستخدام االتفالٌة الزمنٌة العالمٌة‬
‫‪method‬‬ ‫‪Description‬‬
‫) (‪Date.parse‬‬ ‫داىخ رقً٘ ثبسعبع ػذد اىَ‪ٞ‬ي‪ ٜ‬صبّ‪ٞ‬خ ىزىل اىزبس‪ٝ‬خ ٍْز ربس‪ٝ‬خ غجقب ً ىيزبس‪ٝ‬خ اىَؾذد‬
‫) (‪Date.UTC‬‬ ‫داىخ رقً٘ ثبسعبع ػذد اىَ‪ٞ‬ي‪ ٜ‬صبّ‪ٞ‬خ ىزىل اىزبس‪ٝ‬خ ٗاى٘قذ غجقب ً ىيز٘ق‪ٞ‬ذ اىؼبىَ‪ٚ‬‬
‫‪ٌ ‬تم حساب عدد المٌللى ثانٌة بداٌة من تارٌخ ‪January 1, 1970‬‬

‫‪ ‬سوف نموم بذكر أمثلة بسٌطة على كل دالة ‪method‬‬

 ‫‪ : Date methods‬الدوال الخاصة بالكائن ‪Date‬‬
‫‪Property‬‬ ‫‪Description‬‬
‫)(‪Date‬‬ ‫داىخ رقً٘ ثبسعبع اىزبس‪ٝ‬خ ٗاى٘قذ ىي‪ً٘ٞ‬‬
‫)(‪getDate‬‬ ‫داىخ رقً٘ ثبسعبع ‪ ً٘ٝ‬اىشٖش ىيزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىَؾي‪ٜ‬‬
‫)(‪getDay‬‬ ‫داىخ رقً٘ ثبسعبع ‪ ً٘ٝ‬األعج٘ع ىيزبس‪ٝ‬خ اىَؾذد ٗفقًب ىيز٘ق‪ٞ‬ذ اىَؾي‪ٜ‬‬
‫)(‪getFullYear‬‬ ‫داىخ رقً٘ ثبسعبع عْخ اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىيز٘ق‪ٞ‬ذ اىَؾي‪ٜ‬‬
‫)(‪getHours‬‬ ‫داىخ رقً٘ ثبسعبع اىغبػخ ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىيز٘ق‪ٞ‬ذ اىَؾي‪ٜ‬‬
‫)(‪getMilliseconds‬‬ ‫داىخ رقً٘ ثبسعبع اىَيي‪ ٜ‬صبّ‪ٞ‬خ ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىَؾي‪.ٜ‬‬
‫)(‪getMinutes‬‬ ‫داىخ رقً٘ ثبسعبع اىذقبئق ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىَؾي‪.ٜ‬‬
‫)(‪getMonth‬‬ ‫داىخ رقً٘ ثبسعبع اىشٖش ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىيز٘ق‪ٞ‬ذ اىَؾي‪.ٜ‬‬
‫)(‪getSeconds‬‬ ‫داىخ رقً٘ ثبسعبع اىض٘اّ‪ ٜ‬ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىَؾي‪.ٜ‬‬
‫)(‪getTime‬‬ ‫داىخ رقً٘ ثبسعبع اىق‪َٞ‬خ اىؼذد‪ٝ‬خ ىيزبس‪ٝ‬خ اىَؾذد ٍضو ػذد اىَيي‪ ٜ‬صبّ‪ٞ‬خ ٍْز ‪1‬‬
‫مبُّ٘ اىضبّ‪ 11:11:11 ، 1791 ٜ‬ثبىز٘ق‪ٞ‬ذ اىؼبىَ‪ ٜ‬اىَْغق‪.‬‬
‫)(‪getTimezoneOffset‬‬ ‫داىخ رقً٘ ثبسعبع إصاؽخ اىَْطقخ اىضٍْ‪ٞ‬خ ثبىذقبئق ىإلػذاداد اىَؾي‪ٞ‬خ اىؾبى‪ٞ‬خ‪.‬‬
‫)(‪getUTCDate‬‬ ‫داىخ رقً٘ ثبسعبع ‪( ً٘ٝ‬ربس‪ٝ‬خ) اىشٖش ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪getUTCDay‬‬ ‫داىخ رقً٘ ثبسعبع ‪ ً٘ٝ‬األعج٘ع ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪ٜ‬‬
‫)(‪getUTCFullYear‬‬ ‫داىخ رقً٘ ثبسعبع اىغْخ ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪getUTCHours‬‬ ‫داىخ رقً٘ ثبسعبع اىغبػبد ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪getUTCMilliseconds‬‬ ‫داىخ رقً٘ ثبسعبع اىَيي‪ ٜ‬صبّ‪ٞ‬خ ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪getUTCMinutes‬‬ ‫داىخ رقً٘ ثبسعبع اىذقبئق ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪getUTCMonth‬‬ ‫داىخ رقً٘ ثبسعبع اىشٖش ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪getUTCSeconds‬‬ ‫داىخ رقً٘ ثبسعبع اىض٘اّ‪ ٜ‬ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪getYear‬‬ ‫داىخ رقً٘ ثبسعبع اىغْخ ف‪ ٜ‬اىزبس‪ٝ‬خ اىَؾذد ٗفقًب ىيز٘ق‪ٞ‬ذ اىَؾي‪ .ٜ‬اعزخذً‬
‫‪ getFullYear‬ثذالً ٍِ رىل ألّٔ رٌ إ‪ٝ‬قبفٖب (‪)Deprecated‬‬
‫)(‪setDate‬‬ ‫داىخ رقً٘ ثزؼ‪ ً٘ٝ ِٞٞ‬اىشٖش ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىَؾي‪.ٜ‬‬
‫)(‪setFullYear‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىغْخ اىنبٍيخ ىيزبس‪ٝ‬خ اىَؾذد ٗفقًب ىي٘قذ اىَؾي‪ٜ‬‬
‫)(‪setHours‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬عبػبد ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىَؾي‪ٜ‬‬
‫)(‪setMilliseconds‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىَيي‪ ٜ‬صبّ‪ٞ‬خ ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىَؾي‪ٜ‬‬
‫)(‪setMinutes‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىذقبئق ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىَؾي‪.ٜ‬‬
‫)(‪setMonth‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىشٖش ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىَؾي‪.ٜ‬‬
‫)(‪setSeconds‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىض٘اّ‪ ٜ‬ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىَؾي‪.ٜ‬‬
‫)(‪setTime‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬مبئِ اىزبس‪ٝ‬خ إى‪ ٚ‬اى٘قذ اىز‪َٝ ٛ‬ضئ ػذد ٍِ اىَيي‪ ٜ‬صبّ‪ٞ‬خ ٍْز‬
‫‪ْٝ 1‬ب‪ٝ‬ش ‪UTC 11:11:11 ، 1791‬‬
‫)(‪setUTCDate‬‬ ‫داىخ رقً٘ ثزؼ‪ ً٘ٝ ِٞٞ‬اىشٖش ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىؼبىَ‪ٜ‬‬
‫)(‪setUTCFullYear‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىغْخ اىنبٍيخ ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىؼبىَ‪ٜ‬‬
‫)(‪setUTCHours‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىغبػخ ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪setUTCMilliseconds‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىَيي‪ ٜ‬صبّ‪ٞ‬خ ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىؼبىَ‪ٜ‬‬
‫)(‪setUTCMinutes‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىذقبئق ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىؼبىَ‪.ٜ‬‬
‫)(‪setUTCMonth‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىشٖش ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىؼبىَ‪ٜ‬‬
‫)(‪setUTCSeconds‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىض٘اّ‪ ٜ‬ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىؼبىَ‪ٜ‬‬
‫)(‪setYear‬‬ ‫داىخ رقً٘ ثزؼ‪ ِٞٞ‬اىغْخ ىزبس‪ٝ‬خ ٍؾذد ٗفقًب ىي٘قذ اىَؾي‪ ٜ‬اعزخذً‬
‫‪ setFullYear‬ثذالً ٍِ رىل ألّٔ رٌ إ‪ٝ‬قبفٖب (‪)Deprecated‬‬
‫)(‪toDateString‬‬ ‫داىخ رقً٘ ثبسعبع عضء "اىزبس‪ٝ‬خ" مغيغيخ ‪َٝ‬نِ قشاءرٖب ث٘اعطخ اإلّغبُ‬
‫)(‪toGMTString‬‬ ‫داىخ رقً٘ ثزؾ٘‪ٝ‬و ربس‪ٝ‬خ إى‪ ، String ٚ‬ثبعزخذاً اصطالؽبد إّزشّذ ‪GMT‬‬
‫اعزخذً ‪ toUTCString‬ثذالً ٍِ رىل ألّٔ رٌ إ‪ٝ‬قبفٖب (‪)Deprecated‬‬
‫)(‪toLocaleDateString‬‬ ‫داىخ رقً٘ ثبسعبع عضء "ربس‪ٝ‬خ" ٍِ اىزبس‪ٝ‬خ مغيغيخ ‪ ،‬ثبعزخذاً اصطالؽبد‬
‫اىيغخ اىؾبى‪ٞ‬خ‬
‫)(‪toLocaleFormat‬‬ ‫داىخ رقً٘ ثزؾ٘‪ٝ‬و ‪ Date‬إى‪ ، string ٚ‬ثبعزخذاً عيغيخ رْغ‪ٞ‬ق‬
‫)(‪toLocaleString‬‬ ‫داىخ رقً٘ ثزؾ٘‪ٝ‬و ‪ Date‬إى‪ ، string ٚ‬ثبعزخذاً اصطالؽبد اىيغخ اىؾبى‪ٞ‬خ‬
‫)(‪toLocaleTimeString‬‬ ‫داىخ رقً٘ ثبسعبع عضء "اى٘قذ" ٍِ اىزبس‪ٝ‬خ مغيغيخ ‪ ،‬ثبعزخذاً اصطالؽبد‬
‫اىيغخ اىؾبى‪ٞ‬خ‬
‫)(‪toSource‬‬ ‫داىخ رقً٘ ثبسعبع عيغيخ رَضو اىَصذس ىنبئِ ربس‪ٝ‬خ ٍنبفئ؛ ‪َٝ‬نْل اعزخذاً‬
‫ٕزٓ اىق‪َٞ‬خ إلّشبء مبئِ عذ‪ٝ‬ذ‬
‫)(‪toString‬‬ ‫داىخ رقً٘ ثبسعبع ‪ string‬ىنبئِ اىزبس‪ٝ‬خ اىَؾذد‬
‫)(‪toTimeString‬‬ ‫داىخ رقً٘ ثبسعبع عضء "اى٘قذ" ٍِ اىزبس‪ٝ‬خ مغيغيخ ‪َٝ‬نِ قشاءرٖب ث٘اعطخ‬
‫اإلّغبُ‬
‫)(‪toUTCString‬‬ ‫داىخ رقً٘ ثزؾ٘‪ٝ‬و ‪ Date‬إى‪ ، string ٚ‬ثبعزخذاً االرفبق‪ٞ‬خ اىضٍْ‪ٞ‬خ اىؼبىَ‪ٞ‬خ‬
‫)(‪valueOf‬‬ ‫داىخ رقً٘ ثبسعبع اىق‪َٞ‬خ األٗى‪ٞ‬خ ىنبئِ اىزبس‪ٝ‬خ ‪Date object‬‬
 ‫الدرس السابع ‪ :‬كائن المعادالت الرياضية داخل لغة الجافا اسكربت‬
‫)‪(JavaScript Math Object‬‬

‫‪ٌ ‬وفر لن ‪ Math Object‬العدٌد من ‪ properties‬و ‪ methods‬الخاصة بالثوابت والمعادالت‬

‫الرٌاضٌة‪.‬‬
‫‪ Math Object ‬لٌست ‪( constructor‬على عكس ‪ objects‬اآلخرى)‪.‬‬
‫‪ ‬جمٌع ‪ properties‬و ‪ methods‬الخاصة بكائن ‪ Math‬هى لٌم ثابتة ‪ constant‬وٌمكن‬
‫استدعاؤها باستخدام الكائن ‪ Math‬دون أن ننشأها‪.‬‬
‫‪ ‬على سبٌل المثال عندما نرٌد الحصول على لٌمة نصف المطر فإننا نشٌر إلٌها بالرمز ‪ pi‬وٌمكن‬
‫الحصول علٌها عن طرٌك ‪ Math.PI‬وٌمكن الحصول على لٌمة )‪ sin(30‬بنفس الطرٌمة‬

‫‪ : Math Properties‬الخصائص الخاصة بالكائن ‪Math‬‬

‫‪Property‬‬ ‫‪Description‬‬
‫‪E‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد صبثذ أٗ‪ٝ‬يش ‪ٗ Euler's constant‬قبػذح اىي٘غبس‪ٝ‬زَبد‬
‫اىطج‪ٞ‬ؼ‪ٞ‬خ ٗق‪َٞ‬زٔ رغبٗ‪2.718 ٙ‬‬
‫‪LN2‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد اىي٘غبس‪ٝ‬ضٌ اىطج‪ٞ‬ؼ‪ ، 2 ٍِ ٜ‬ؽ٘اى‪0.693 ٜ‬‬
‫‪LN10‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد اىي٘غبس‪ٝ‬ضٌ اىطج‪ٞ‬ؼ‪ ، 10 ٍِ ٜ‬ؽ٘اى‪2.302 ٜ‬‬
‫‪LOG2E‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد ى٘غبس‪ٝ‬زٌ اىقبػذح ‪ ، E ٍِ 2‬ؽ٘اى‪1.442 ٜ‬‬
‫‪LOG10E‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد ى٘غبس‪ٝ‬زٌ ىيقبػذح ‪ ، E ٍِ 10‬ؽ٘اى‪0.434 ٜ‬‬
‫‪PI‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد ّصف اىقطش ( أ‪ّ ٙ‬غجخ ٍؾ‪ٞ‬ػ اىذائشح إى‪ ٚ‬قطشٕب ) ؽ٘اى‪ٜ‬‬
‫‪3.14159‬‬
‫‪SQRT1_2‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد اىغزس اىزشث‪ٞ‬ؼ‪ ٜ‬ىيْصف ‪( 1/2‬ػي‪ّ ٚ‬ؾ٘ ٍنبفئ ‪ 1 ،‬ػي‪ ٚ‬اىغزس‬
‫اىزشث‪ٞ‬ؼ‪ ٜ‬ىـ ‪ ) 2‬رقش‪ٝ‬جًب ‪0.707‬‬
‫‪SQRT2‬‬ ‫خبص‪ٞ‬خ رغزخذً إل‪ٝ‬غبد اىغزس اىزشث‪ٞ‬ؼ‪ ٜ‬ه ‪ ، 2‬ؽ٘اى‪1.414 ٜ‬‬
 ‫‪ : Math methods‬الدوال الخاصة بالكائن ‪Math‬‬
‫‪method‬‬ ‫‪Description‬‬
‫)(‪sin‬‬ ‫داىخ رقً٘ ثبسعبع ع‪ٞ‬ت اىضاٗ‪ٝ‬خ ‪sine of a number‬‬
‫)(‪cos‬‬ ‫داىخ رقً٘ ثبسعبع ع‪ٞ‬ت رَبً اىضاٗ‪ٝ‬خ‬
‫)(‪tan‬‬ ‫داىخ رقً٘ ثبسعبع ظو اىضاٗ‪ٝ‬خ أ‪ٍٞ ٙ‬و اىََبط ‪tangent of a number‬‬
‫)(‪asin‬‬ ‫داىخ رقً٘ ثبسعبع ع‪ٞ‬ت اىضاٗ‪ٝ‬خ اىؼنغ‪ٜ‬‬
‫)(‪acos‬‬ ‫داىخ رقً٘ ثبسعبع ع‪ٞ‬ت رَبً اىضٗا‪ٝ‬خ اىؼنغ‪ٜ‬‬
‫)(‪atan‬‬ ‫داىخ رقً٘ ثبسعبع ظو اىضاٗ‪ٝ‬خ اىؼنغ‪ٜ‬‬
‫)‪atan2(x,y‬‬ ‫داىخ رقً٘ ثبسعبع اىؼنغ‪ ٜ‬ػِ غش‪ٝ‬ق قغَخ ‪x/y‬‬
‫)(‪ceil‬‬ ‫داىخ رقً٘ ثبسعبع أصغش ػذد صؾ‪ٞ‬ؼ أمجش ٍِ أٗ ‪ٝ‬غبٗ‪ ٛ‬اىشقٌ (عقف اىشقٌ)‬
‫)(‪floor‬‬ ‫داىخ رقً٘ ثبسعبع أمجش ػذد صؾ‪ٞ‬ؼ أقو ٍِ أٗ ‪ٝ‬غبٗ‪ ٛ‬اىشقٌ‪( .‬أسظ‪ٞ‬خ اىشقٌ)‬
‫)(‪abs‬‬ ‫داىخ رقً٘ ثبسعبع اىق‪َٞ‬خ اىَطيقخ ىيشقٌ (اىق‪َٞ‬خ اىَ٘عجخ)‬
‫)(‪exp‬‬ ‫داىخ رقً٘ ثبسعبع ق‪َٞ‬خ ‪ EN‬ؽ‪ٞ‬ش ‪ ٕٚ E‬صبثذ اٗ‪ٝ‬يش ٗ ‪ ٕ٘ N‬اىَؼبٍو‬
‫)(‪log‬‬ ‫داىخ رقً٘ ثبسعبع اىي٘غبس‪ٝ‬ضٌ اىطج‪ٞ‬ؼ‪ ٜ‬ىيشقٌ (‪ )base E‬األعبط ‪E‬‬
‫)(‪max‬‬ ‫داىخ رقً٘ ثبسعبع أمجش سقٌ ىَغَ٘ػخ ٍِ اىق‪ٌٞ‬‬
‫)(‪min‬‬ ‫داىخ رقً٘ ثبسعبع أصغش سقٌ ػذد‪ٝ‬خ ىَغَ٘ػخ ٍِ اىق‪ٌٞ‬‬
‫)(‪pow‬‬ ‫داىخ رقً٘ ثبسعبع ق‪َٞ‬خ سقٌ رٗ أط ‪Returns base to the exponent power‬‬
‫)(‪sqrt‬‬ ‫داىخ رقً٘ ثبسعبع اىغزس اىزشث‪ٞ‬ؼ‪ ٜ‬ىيشقٌ ‪square root‬‬
‫)(‪round‬‬ ‫داىخ رقً٘ ثبىزقش‪ٝ‬ت ألقشة ػذد صؾ‪ٞ‬ؼ ‪rounded to the nearest integer‬‬
‫)(‪random‬‬ ‫داىخ رقً٘ ثبسعبع سقٌ ػش٘ائ‪ٍ pseudo-random number ٜ‬ب ث‪)0 – 1 ( ِٞ‬‬
‫)(‪toSource‬‬ ‫داىخ رقً٘ ثبسعبع ‪ source‬ىينبئِ مق‪َٞ‬خ ّص‪ٞ‬خ ‪string‬‬
 ‫الدرس الثامن ‪ :‬كائن التعبيرات المنتظمة داخل لغة الجافا اسكربت‬
‫)‪(JavaScript RegExp Object‬‬

‫‪ : Regular Expressions ‬التعبٌرات المنطمٌة أو التعبٌرات المنتظمة أو التعبٌرات العادٌة‬

‫‪ Regular Expressions ‬هى عبارة عن ‪ objects‬التى تصف نمط للحروف أو شكل للحروف‬
‫‪pattern of characters‬‬
‫‪ ‬تحتوى لغة الجافا على ‪ class‬مشهور خاص ب ‪ٌ Regular Expressions‬سمى ‪RegExp‬‬
‫‪ٌ ‬حدد كل من ‪ String‬و ‪ RegExp‬دوال ‪ methods‬التً تستخدم ‪Regular Expressions‬‬
‫لتنفٌذ وظائف لوٌة على النصوص ‪ texts‬مثل مطابمة األنماط ‪ pattern-matching‬والبحث‬
‫‪ search‬واالستبدال ‪replace‬‬
‫‪: Regular Expressions ‬هً أنماط تُستخدم لمطابمة مجموعة من األحرف فً السالسل النصٌة‬
‫وتستخدم هذه األنماط مع دوال ‪ exec‬و ‪ test‬الخاصة بالكائن ‪ RegExp‬وأٌضا ً تستخدم هذه‬
‫األنماط مع ‪ ،match‬و ‪ ،replace‬و‪ search‬و ‪ split‬للكائن ‪String‬‬

‫‪ٌ : Syntax ‬مكن إنشاء تعبٌرات منطمٌة ‪ Regular Expressions‬بطرلتٌن مختلفتٌن‬

‫‪ ‬الطريقة األولى ‪ :‬باستخدام التعبٌر النمطى الحرفى ‪literal Regular Expressions‬‬

‫‪ ‬الطريقة الثانية ‪ :‬باستخدام دالة البناء ‪RegExp constructor‬‬

‫‪ : pattern ‬النمط‬
‫هو عبارة عن ‪ string‬بٌحدد ‪ pattern‬للتعبٌر المنطمى ‪regular expression‬‬
‫‪ : attributes ‬الخصائص‬
‫هو عبارة عن ‪ string‬اختٌارى ٌحتوى على ‪ 3‬خصائص وهى ‪:‬‬
‫‪ global matches: "g" ‬التً تحدد مطابمات عالمٌة‬
‫‪ case-insensitive matches: "i" ‬التً تحدد مطابمات غٌر حساسة لحالة األحرف‬
‫‪ multiline matches : "m" ‬التً تحدد مطابمات مجموعات متعددة‬
‫‪ ‬سوف نتعرف على بعض الرموز التى لها معنى داخل لغات البرمجة‬
 ‫أوال ا ‪ : Brackets :‬األلواس المعكوفة ( [ ] )‬
‫‪ ‬لها معنى خاص عند استخدامها فً سٌاق التعبٌرات العادٌة حٌث ٌتم استخدامها للعثور على‬
‫مجموعة من الحروف ‪range of characters‬‬
‫‪ ‬الحظ الجدول التالى للتعرف على معنى كل ‪Brackets‬‬
‫‪Expression‬‬ ‫‪Description‬‬
‫]‪[...‬‬ ‫أ‪ ٛ‬ؽشف ٗاؽذ ث‪ ِٞ‬ق٘ع‪ِٞ‬‬
‫]‪[^...‬‬ ‫أ‪ ٛ‬ؽشف ٗاؽذ ى‪ٞ‬ظ ث‪ ِٞ‬األق٘اط‬
‫]‪[0-9‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬سقٌ ػشش‪ 0 ٍِ ٛ‬إى‪9 ٚ‬‬
‫]‪[a-z‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬ؽشف ٍِ أؽشف صغ‪ٞ‬شح ‪ a‬إى‪ ٚ‬األؽشف صغ‪ٞ‬شح ‪z‬‬
‫]‪[A-Z‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬ؽشف ٍِ األؽشف اىنج‪ٞ‬شح ‪ A‬إى‪ ٚ‬األؽشف اىنج‪ٞ‬شح ‪Z‬‬
‫]‪[a-Z‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬ؽشف ٍِ أؽشف صغ‪ٞ‬ش ‪ a‬إى‪ ٚ‬األؽشف اىنج‪ٞ‬شح ‪Z‬‬

‫ضا استخدام النطاق [ ‪ ]0 – 3‬لمطابمة أي رلم عشري ٌتراوح من ‪ 0‬إلى ‪، 3‬‬

‫‪ٌ ‬مكنن أٌ ً‬
‫‪ ‬أو استخدام النطاق [ ‪ ]b – v‬لمطابمة أي حرف صغٌر ٌتراوح من ‪ b‬إلى ‪.v‬‬

‫ثانيا ا ‪ُ : Quantifiers :‬محدد الكمٌات ( [ ] )‬

‫‪ ‬لها معنى خاص عند استخدامها فً سٌاق التعبٌرات العادٌة حٌث ٌتم استخدامها لتحدٌد الكمٌات أو‬
‫عدد األحرف او الخانات التى نستخدمها فى ‪ Regular Expression‬وتستخدم أٌضا ً للتحمك من‬
‫إٌجاد حروف معٌنة ولها استخدامات كتٌر سوف نتعرض لها فٌما بعد‬
‫‪ ‬الحظ الجدول التالى للتعرف على معنى كل ‪Quantifiers‬‬
‫‪Expression‬‬ ‫‪Description‬‬
‫‪p+‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬عيغيخ رؾز٘‪ ٛ‬ػي‪ٗ ٚ‬اؽذ أٗ أمضش ٍِ ‪p‬‬
‫*‪p‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬عيغيخ رؾز٘‪ ٛ‬ػي‪ ٚ‬صفش أٗ أمضش ‪p‬‬
‫?‪p‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬عيغيخ رؾز٘‪ ٛ‬ػي‪ ٚ‬أمضش ٍِ ‪ٗ p‬اؽذح‬
‫}‪p{N‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬عيغيخ رؾز٘‪ ٛ‬ػي‪ ٚ‬اىؼذد ‪ N‬داخو عيغيخ ٍِ ‪P‬‬
‫}‪p{x,y‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ ٛ‬عيغيخ رؾز٘‪ ٛ‬ػي‪ x ٚ‬أٗ ‪p ٍِ y‬‬
‫} ‪p{x,‬‬ ‫رزطبثق ٍغ أ‪ ٛ‬عيغيخ رؾز٘‪ ٛ‬ػي‪ ٚ‬عيغيخ ٍِ ‪ x‬ػي‪ ٚ‬األقو‬
‫‪p$‬‬ ‫رزطبثق ٍغ أ‪ ٛ‬عيغيخ ٍغ ‪ p‬ف‪ّٖ ٜ‬ب‪ٝ‬زٖب‬
‫‪^p‬‬ ‫رزطبثق ٍغ أ‪ ٛ‬عيغيخ ٍغ ‪ p‬ف‪ ٜ‬ثذا‪ٝ‬زٖب‬
 ‫ صفات الحروف‬:Literal characters : ‫ثالثا‬
‫ لتنفٌذ بعض‬regular expression ‫ مع‬Alphanumeric ‫ ٌتم استخدام الحروف األبجدٌة نفسها‬
escape character ‫األوامر مثل‬
liter character ‫ الحظ الجدول التالى للتعرف على معنى كل‬
Expression Unicode Description
\0 \u0000 NUL character ‫غزخذً ىؼَو ؽشف فبسؽ‬ٝ
\t \u0009 )‫ ٍغبفبد‬6 ( tab ‫غزخذً ىؼَو‬ٝ
\n \u000A newline ‫ذ‬ٝ‫غزخذً ىؼَو عطش عذ‬ٝ
\v \u000B Vertical tab ‫غزخذً ىؼَو‬ٝ
\f \u000C Form feed ‫خ‬ٝ‫غزخذً ىؼَو َّ٘صط رغز‬ٝ
\r \u000D Carriage return ‫خ اسعبع‬ٞ‫غزخذً ىؼَو ػَي‬ٝ
\xnn \n ٙٗ‫\ رغب‬x0A ‫ ٍضو‬Latin character
\uxxxx \t ٙٗ‫\ رغب‬u0009 ‫ ٍضو‬Unicode character
\cX \n ٙٗ‫\ رغب‬cJ ‫ ٍضو‬control character

‫ الحروف الخاصة‬:Metacharacters : ‫رابعا ا‬

) \ ( ً‫ ٌسبمه خط مائل عكس‬alphabetical ‫ هو ببساطة حرف‬Metacharacters 
Metacharacters ‫ الحظ الجدول التالى للتعرف على معنى كل‬
Expression Description
. ‫ؼجشػِ ؽشف ٗاؽذ‬ٝ a single character
\s ‫ؼجشػِ ٍغبفخ‬ٝ whitespace character (space, tab, newline)
\S ‫ؼجشػِ ػذً ٗع٘د ٍغبفخ‬ٝ non-whitespace character
\d 9 ٚ‫ إى‬0 ٍِ ‫ؼجشػِ خبّخ‬ٝ a digit (0-9)
\D 9 ٚ‫ إى‬0 ٍِ ً‫ أسقب‬ٚ‫ ػي‬ٙ٘‫ؼجشػِ خبّخ ال رؾز‬ٝ a non-digit
\w ( a-z , A-Z , 0-9, _ ) ‫ؼجشػِ ميَخ ٍضو‬ٝ a word character
\W ( a-z , A-Z , 0-9, _ ) ‫ش‬ٞ‫ سٍض غ‬ٙ‫ؼجشػِ أ‬ٝ non-word character
[\b] ‫خ‬ٞ‫خ ؽشف‬ٞ‫ؼجش ػِ ٍغبؽخ خيف‬ٝ a literal backspace (special case)
[aeiou] ‫ اىَغَ٘ػخ اىَؾذدح‬ٜ‫طبثق ؽشف ٗاؽذ ف‬ٝ
[^aeiou] ‫طبثق ؽشف ٗاؽذ خبسط اىَغَ٘ػخ اىَؾذدح‬ٝ
(foo|bar|baz) ‫ ٍِ اىجذائو اىَؾذدح‬ٛ‫رطبثق أ‬
 ‫خامسا ا ‪ :Modifiers :‬الصفات التعرٌفٌة أو ال ُمعدالت أو ال ُمحوالت‬
‫تتوفر العدٌد من أدوات التعدٌل ‪ Modifiers‬التً ٌمكنها تبسٌط طرٌمة عملن مع ‪ ، regexps‬مثل‬
‫حساسٌة الحالة ‪ ،‬والبحث فً خطوط متعددة ‪ ،‬إلخ‪.‬‬
‫‪ ‬الحظ الجدول التالى للتعرف على معنى كل ‪Metacharacters‬‬
‫‪Expression‬‬ ‫‪Description‬‬
‫‪i‬‬ ‫‪ case-insensitive matching‬إعشاء ػَي‪ٞ‬خ رطبثق غ‪ٞ‬ش ؽغبعخ ثَؼْ‪ٚ‬‬
‫أّ ال ‪ٖٝ‬زٌ ثبىؾشف ع٘اء مبُ ‪ lower‬اٗ ‪upper‬‬
‫‪m‬‬ ‫‪ٝ multiple lines‬ؾذد ٕو اىغيغيخ رؾز٘‪ ٛ‬ػي‪newline characters ٚ‬‬
‫أٗ أؽشف إسعبع ‪ ، carriage return characters‬فإُ اىَؼبٍي‪$ ٗ ^ ِٞ‬‬
‫ع٘ف رزطبثقبُ ٍغ ؽذٗد اىغطش اىغذ‪ٝ‬ذ ‪ ،newline boundary‬ثذالً ٍِ‬
‫ؽذٗد اىغيغيخ ‪string boundary‬‬
‫‪g‬‬ ‫‪ global matches‬اىز‪ ٜ‬رؾذد ٍطبثقبد ػبىَ‪ٞ‬خ ٕٗ‪ ٜ‬اىؼض٘س ػي‪ ٚ‬عَ‪ٞ‬غ‬
‫اىزطبثقبد ثذالً ٍِ اىز٘قف ثؼذ اىؼض٘س ػي‪ ٚ‬اٗه رطبثق فقػ‬

‫‪ :Examples‬بعض األمثلة على استخدام ‪regular expressions‬‬

‫‪ ‬الحظ الجدول التالى للتعرف على معنى كل ‪Examples‬‬
‫‪Expression‬‬ ‫‪Description‬‬
‫]‪[^a-zA-Z‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ string ٛ‬ال رؾز٘‪ ٛ‬ػي‪ ٚ‬أ‪ ٍِ ٛ‬األؽشف اىز‪ ٜ‬رزشاٗػ ٍِ ‪ a‬إى‪ٗ z ٚ‬‬
‫‪ A‬إى‪.Z ٚ‬‬
‫‪p.p‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ string ٛ‬رؾز٘‪ ٛ‬ػي‪ ٚ‬ؽشف ‪ p‬صٌ ٍزج٘ػخ ثأ‪ ٛ‬ؽشف آخش غ‪ٞ‬ش ‪ p‬صٌ‬
‫ٍزج٘ػخ ثـؾشف ‪ p‬آخش‪(.‬ث‪ٞ‬زغبٕو اىؾشف األٗعػ)‬
‫‪^.{2}$‬‬ ‫‪ٝ‬طبثق أ‪ string ٛ‬رؾز٘‪ ٛ‬ػي‪ ٚ‬ؽشف‪ٍ ِٞ‬زطبثق‪ ِٞ‬ثبىعجػ‬
‫>‪<b>(.*)</b‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ٍ string ٛ‬ؾبغخ داخو <‪>b < >/b‬‬
‫*)‪p(hp‬‬ ‫‪ٝ‬زطبثق ٍغ أ‪ string ٛ‬رؾز٘‪ ٛ‬ػي‪ٍ p ٚ‬زج٘ػب ً ثـ صفش أٗ أمضش ٍِ ٍض‪ٞ‬الد ‪hp‬‬
‫اىزغيغو‪.‬‬
 ‫‪ : RegExp Properties‬الخصائص الخاصة بالكائن ‪RegExp‬‬
‫‪Property‬‬ ‫‪Description‬‬
‫‪constructor‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزشعغ اىذاىخ اىز‪ ٜ‬أدد إى‪ ٚ‬إّشبء اىَْ٘رط األٗى‪ ٜ‬ىينبئِ اىق‪َٞ‬خ‬
‫االفزشاظ‪ٞ‬خ ٕ‪RegExp ٚ‬‬
‫‪global‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزؾذد ٍب إرا رٌ ظجػ ‪"g" modifier‬‬
‫‪ignoreCase‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزؾذد ٍب إرا رٌ ظجػ ‪"i" modifier‬‬
‫‪multiline‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزؾذد ٍب إرا رٌ ظجػ ‪"m" modifier‬‬
‫‪lastIndex‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزؾذد ‪ index‬اىز‪ٝ ٛ‬جذأ ػْذٓ اىق‪َٞ‬خ اىَزطبثقخ اىزبى‪ٞ‬خ‬
‫‪source‬‬ ‫خبص‪ٞ‬خ رغزخذً ىزؾذد ّص اىَْػ ‪text of the pattern‬‬

‫‪ : RegExp methods‬الدوال الخاصة بالكائن ‪RegExp‬‬

‫‪methods‬‬ ‫‪Description‬‬
‫)(‪exec‬‬ ‫داىخ رقً٘ ثؼَي‪ٞ‬خ ثؾش ػِ رطبثق ف‪ٍ ٜ‬ؼبٍالد اىغيغيخ ‪string parameter‬‬
‫)(‪test‬‬ ‫داىخ رقً٘ ثؼَي‪ٞ‬خ اخزجبس رطبثق ف‪ٍ ٜ‬ؼبٍالد اىغيغيخ ‪string parameter‬‬
‫)(‪toSource‬‬ ‫داىخ رقً٘ ثإسعبع ‪ object literal‬ؽ‪ٞ‬ش رَضو اىنبئِ اىَؾذد ؛ ‪َٝ‬نْل اعزخذاً ٕزٓ اىق‪َٞ‬خ‬
‫إلّشبء مبئِ عذ‪ٝ‬ذ‬
‫)(‪toString‬‬ ‫داىخ رقً٘ ثإسعبع ‪َٝ string‬ضو اىنبئِ اىَؾذد‪.‬‬
 ‫جدول المحتوٌات‬
‫الدرس األول ‪:‬مقدمة فى نموزج كائن المستند ‪3 ....................... ................................ ................................‬‬
‫)‪3 ............................... ................................ Introduction to Document Object Model (HTML DOM‬‬
‫الدرس الثانً ‪ :‬كائن مستند ‪8 ................................. ................................ ................................ DOM‬‬
‫)‪8 ............................ ................................ ................................ (HTML DOM Document Object‬‬
‫الدرس الثالث ‪ :‬أمثلة عن كائن مستند ‪91 ..................... ................................ ................................ DOM‬‬
‫)‪91 ..................................... ................................ (Examples about HTML DOM Document Object‬‬
‫الدرس الرابع ‪ :‬استخدام األحداث للــ ‪42 ...................... ................................ ................................ DOM‬‬
‫)‪42 .......................... ................................ ................................ (JavaScript HTML DOM Events‬‬
‫الدرس الخامس ‪ :‬استخدام دالة مستمع األحداث للــ ‪42 ........................................ ................................ DOM‬‬
‫) ‪42 ................ ................................ ................................ (JavaScript HTML DOM EventListener‬‬
‫الدرس السادس ‪ :‬التنقل بٌن عناصر ‪31 ....................... ................................ ................................ DOM‬‬
‫) ‪31 ......................................... ................................ ................................ (DOM Navigation‬‬
‫الدرس السابع ‪ :‬العُـقـد ‪22 ........................................... ................................ ................................‬‬
‫)‪22 ................ ................................ ................................ ................................ (DOM Nodes‬‬
‫الدرس الثامن ‪ :‬المجموعات والقوائم داخل ‪24 ................ ................................ ................................ DOM‬‬
‫)‪24 ......................... ................................ ................................ (DOM Collections && Node list‬‬
‫الدرس التاسع ‪:‬مقدمة فى نموزج كائن المتصفح (المستعرض) ‪25 ..................................... ................................‬‬
‫)‪25 ................................ ................................ Introduction to Browser Object Model (HTML BOM‬‬
‫الدرس العاشر ‪ :‬كائن الشاشة ‪21 .................................... ................................ ................................‬‬
‫(‪21 .............. ................................ ................................ ................................ )Screen object‬‬
‫الدرس الحادي عشر ‪ :‬كائن الموقع ‪59 ............................... ................................ ................................‬‬
‫(‪59 ............................................ ................................ ................................ )Location object‬‬
‫الدرس الثانً عشر ‪ :‬كائن التارٌخ ‪53 ................................ ................................ ................................‬‬
‫(‪53 ............. ................................ ................................ ................................ )History object‬‬
‫الدرس الثالث عشر ‪ :‬كائن ال ُمستعرض ‪52 ............................ ................................ ................................‬‬
‫(‪52 .......................................... ................................ ................................ )Navigator object‬‬
‫الدرس الرابع عشر ‪ :‬المربعات ال ُمنبثقة ‪52 .................. ................................ ................................ Dialog‬‬
‫(‪52 ............... ................................ ................................ ................................ )Popup Boxes‬‬
‫الدرس الخامس عشر ‪ :‬األحداث المرتبطة بالوقت ‪23 .................. ................................ ................................‬‬
‫(‪23 ............. ................................ ................................ ................................ )Timing Events‬‬
‫الدرس السادس عشر ‪ :‬ملفات التعرٌف أو ملفات االرتباط ‪22 .......................................... ................................‬‬
‫(‪22 ..................... ................................ ................................ ................................ )Cookies‬‬
‫الخاتمة ‪89 .......................... ................................ ................................ ................................‬‬
 ‫الدرس األول ‪:‬مقدمة فى نموزج كائن المستند‬
‫)‪Introduction to Document Object Model (HTML DOM‬‬

‫‪ ‬كل صفحة وٌب ‪ web page‬موجودة داخل نافذة المتصفح ‪ٌ browser window‬مكن اعتبارها‬
‫ككائن ‪object‬‬
‫‪ ‬كل ‪ٌ Document object‬عتبر أو ٌمثل ‪ HTML document‬حٌث ٌتم عرضه داخل ‪window‬‬
‫وٌحتوي ‪ Document object‬على خصائص متنوعة ‪ properties‬تشٌر إلى كائنات أخرى‬
‫والتى تسمح بالوصول إلى محتوى المستند والتعدٌل علٌه‬
‫‪ ‬وٌطلك على الطرٌمة التً ٌتم بها الوصول إلى محتوى المستند والتعدٌل علٌه اسم نموزج كائن‬
‫المستند )‪. Document Object Model(DOM‬‬
‫‪ٌ ‬تم تنظٌم ‪ objects‬فً تسلسل هرمً ‪ٌ ، hierarchy‬تم تطبٌك هذه البنٌة الهرمٌة أو ما ٌسمى ب‬
‫‪ hierarchical structure‬لكى تنظم ‪ objects‬فً مستند الوٌب ‪.Web document‬‬

‫‪ : Elements of hierarchical structure‬عناصر الهٌكل الهرمى‬

‫ٌوجد ‪ 4‬عناصر للهٌكل الهرمى داخل صفحة الوٌب‬
‫‪ ‬أوالً ‪Top of the hierarchy : Window object :‬‬
‫هو لمة التسلسل الهرمً‪ .‬إنه العنصر األبعد للتسلسل الهرمً للكائن‬
‫‪ ‬ثانٌا ً ‪: Document object :‬‬
‫أى ‪ٌ HTML document‬تم تحمٌله داخل ‪ window‬فإنه ٌصبح ‪document object‬‬
‫كل ‪ٌ document‬حتوى على محتوٌات الصفحة ‪contents of the page‬‬
‫‪ ‬ثالثا ً ‪: Form object :‬‬
‫كل شًء موجود داخل <‪ٌ >form> ... </ form‬موم بتعٌٌن كائن النموذج ‪form object‬‬
‫‪ ‬رابعا ً ‪: Form control elements :‬‬
‫ٌحتوي كائن النموذج ‪ form object‬على جمٌع العناصر المخصصة لهذا الكائن مثل ‪ text fields‬و‬
‫‪ buttons‬و ‪ radio buttons‬و ‪checkboxes‬‬
 ‫‪ ‬هذا الجدول ٌوضح التسلسل الهرمى‬

‫‪ ‬نستطٌع باستخدام لغة ‪ JavaScript‬الوصول إلى جمٌع عناصر مستند ‪ HTML‬وتغٌٌرها وذلن من‬
‫خالل استخدام ‪HTML DOM‬‬

‫‪ ‬عند تحمٌل صفحة الوٌب ‪ٌ ،‬موم ‪ browser‬بإنشاء نموذج كائن المستند ‪ DOM‬الخاص بالصفحة وٌتم‬
‫إنشاء نموذج ‪ HTML DOM‬كشجرة من الكائنات ‪tree of objects‬‬

‫‪ ‬مثال ‪ٌ :‬وضح كٌفٌة تحوٌل مستند ‪ HTML‬إلى ‪DOM‬‬

‫‪ ‬الحظ ملف ‪ HTML‬اآلتى ‪:‬‬
 ‫‪ ‬فى هذه الرسمة تم تحوٌل مستند ‪ html‬إلى ‪tree of object‬‬

‫‪ ‬باستخدام نموذج الكائن ‪ ، object model‬تستطٌع لغة ‪ javascript‬الحصول على جمٌع الصالحٌات‬
‫الالزمة إلنشاء ‪ HTML‬دٌنامٌكً‪:‬‬
‫‪ ‬تستطٌع ‪ JavaScript‬تغٌٌر جمٌع العناصر ‪ elements‬الخاصة ب ‪ HTML‬فً الصفحة‬
‫‪ٌ ‬مكن لـ ‪ JavaScript‬تغٌٌر جمٌع الخصائص ‪ Attributes‬الخاصة ب ‪ HTML‬فً الصفحة‬
‫‪ ‬تستطٌع ‪ JavaScript‬تغٌٌر كل األنماط ‪ styles‬الخاصة ب ‪ CSS‬فً الصفحة‬
‫‪ٌ ‬مكن ‪ JavaScript‬إزالة ‪ elements‬وسمات ‪ HTML‬الموجودة فى ‪ HTML‬فً الصفحة‬
‫‪ٌ ‬مكن أن تضٌف ‪ JavaScript‬عناصر ‪ elements‬و ‪Attributes‬‬
‫‪ٌ ‬مكن أن تتفاعل ‪ JavaScript‬مع جمٌع أحداث ‪ HTML events‬الموجودة فً الصفحة‬
‫‪ ‬تستطٌع ‪ JavaScript‬إنشاء ‪ HTML events‬جدٌدة فً الصفحة‬

‫‪ ‬فً الدروس المادمة من هذا البرنامج التعلٌمً سوف تتعلم اآلتى ‪:‬‬
‫‪ ‬كٌفٌة تغٌٌر محتوى ‪ content‬عناصر ‪HTML‬‬
‫‪ ‬كٌفٌة تغٌٌر ‪ CSS styles‬لعناصر ‪HTML‬‬
‫‪ ‬كٌفٌة التفاعل مع ‪DOM HTML events‬‬
‫‪ ‬كٌفٌة إضافة وحذف عناصر ‪HTML‬‬
 ‫‪ : What is the DOM? ‬ما هو ‪DOM‬‬
‫معٌارا للوصول إلى ‪documents‬‬
‫ً‬ ‫‪ٌ ‬حدد ‪DOM‬‬
‫‪ٌ : W3C Document Object Model (DOM) ‬عتبر منصة ‪ platform‬وواجهة عرض‬
‫محاٌدة حٌث تسمح للبرامج ‪ programs‬والبرامج النصٌة ‪ scripts‬بالوصول والتحدٌث الدٌنامٌكً‬
‫لمحتوى المستند ‪ content‬وبنٌة المستند ‪ structure‬ونمط المستند ‪style‬‬
‫‪ٌ ‬تم فصل معٌار ‪ W3C DOM‬إلى ‪ 3‬أجزاء مختلفة‪:‬‬
‫‪ - Core DOM ‬نموذج لٌاسً لجمٌع ‪All document types‬‬
‫‪ - XML DOM ‬نموذج لٌاسً ل ‪XML documents‬‬
‫‪ - HTML DOM ‬نموذج لٌاسً ل ‪HTML documents‬‬

‫‪: What is the HTML DOM ? ‬‬

‫‪ٌ HTML DOM ‬عتبر نموذج كائن لٌاسً ‪ standard object model‬وواجهة برمجٌة‬
‫‪ programming interface‬للغة ‪ HTML‬حٌث أنها تعرف جمٌع ‪ elements‬الموجودة فى لغة‬
‫‪ HTML‬على أنها كائنات ‪ )The HTML elements as object( objects‬ولذلن فإننا سوف‬
‫نتعامل مع الكائنات ‪objects‬‬

‫أى كائن ٌمكن التعامل معه عن طرٌك اآلتى ‪:‬‬

‫‪ The properties of all HTML elements ‬جمٌع خصائص عناصر ‪HTML‬‬
‫‪ The methods to access all HTML elements ‬توفر دوال للوصول إلى جمٌع العناصر‬
‫‪ The events for all HTML elements ‬توفر األحداث لجمٌع عناصر ‪HTML‬‬

‫‪ ‬سوف نتعرف على كل من الخصائص ‪ properties‬والدوال ‪ methods‬واألحداث ‪events‬‬

‫معٌارا لكٌفٌة الحصول على عناصر ‪ HTML‬أو تغٌٌرها أو إضافتها‬

‫ً‬ ‫‪ ‬بمعنى آخر ٌعتبر ‪HTML DOM‬‬
‫أو حذفها‪.‬‬
 ‫هنان العدٌد من ‪ DOMs‬المتاحة وسوف نتعرف على بعض ‪ DOMs‬بالتفصٌل وسنتعرف على كٌفٌة‬
‫استخدامها للوصول إلى محتوى المستند وتعدٌله‪.‬‬
‫‪: The Legacy DOM -1‬‬
‫هذا هو النموذج الذي تم تمدٌمه فً اإلصدارات الحدٌثة من لغة ‪ .JavaScript‬وهً مدعومة بشكل‬
‫جٌد من لبل جمٌع المتصفحات ‪ ،‬ولكنها تسمح بالوصول فمط إلى أجزاء رئٌسٌة معٌنة من‬
‫‪ ، documents‬مثل ‪ forms‬وعناصر النموذج ‪ form elements‬والصور ‪.images‬‬
‫‪: The W3C DOM -2‬‬
‫ٌسمح نموذج كائن المستند هذا بالوصول إلى كل محتوى المستند وتعدٌله وٌتم توحٌده بواسطة اتحاد‬
‫شبكة الوٌب العالمٌة (‪ٌ .)W3C‬دعم هذا النموذج جمٌع المتصفحات الحدٌثة تمرٌبًا‪.‬‬
‫‪: The IE4 DOM -3‬‬
‫تم تمدٌم نموذج كائن المستند هذا فً اإلصدار ‪ 4‬من متصفح ‪.Microsoft Internet Explorer‬‬
‫تتضمن إصدارات ‪ IE 5‬واإلصدارات األحدث دع ًما لمعظم مٌزات ‪ W3C DOM‬األساسٌة‪.‬‬

‫‪ ‬سوف نشرح كل نوع على حدة فى جزء منفصل خالل الدروس المادمة‬

‫‪ : DOM compatibility‬التوافك مع ‪DOM‬‬

‫إذا كنت ترٌد كتابة ‪ script‬بمرونة الستخدام ‪ W3C DOM‬أو ‪ IE 4 DOM‬حسب توفرها ‪ ،‬فٌمكنن‬
‫استخدام نهج اختبار المدرة الذي ٌتحمك أوالً من وجود طرٌمة أو خاصٌة لتحدٌد ما إذا كان المتصفح المدرة‬
‫التً ترٌدها‪ .‬على سبٌل المثال ‪-‬‬
 ‫الدرس الثانً ‪ :‬كائن مستند ‪DOM‬‬

‫)‪(HTML DOM Document Object‬‬

‫‪ٌ ‬مكن الوصول إلى ‪ HTML DOM‬باستخدام ‪( JavaScript‬وأٌضا ً مع لغات البرمجة األخرى)‪.‬‬

‫‪ programming interface ‬الواجهة البرمجٌة هً الخصائص ‪ properties‬والدوال ‪methods‬‬

‫لكل كائن ‪object‬‬

‫‪ ‬دوال ‪ HTML DOM‬تعتبر إجراءات أو احداث ‪ actions‬التى ٌمكنن تنفٌذها على عناصر ‪HTML‬‬
‫مثل إضافة ‪ add‬أو حذف ‪delete‬‬

‫‪ ‬خصائص ‪ HTML DOM‬تعتبر لٌم ‪ values‬عناصر ‪ HTML‬التً ٌمكنن الحصول علٌها ‪ get‬أو‬
‫تعٌٌنها ‪ set‬أو تغٌٌرها ‪. change‬‬

‫‪ ‬األحداث ‪ HTML DOM‬تعتبر تفاعل ‪ reaction‬على عناصر ‪ HTML‬مثلما ٌحدث عندما ٌنمر‬
‫المستخدم على عنصر ‪.HTML‬‬

‫‪ : Finding HTML Elements‬كٌفٌة إٌجاد والحصول على عناصر ‪HTML‬‬

‫هنان طرق مختلفة لمجموعة من الدوال التى ٌمكن استخدامها الٌجاد العناصر‬
‫‪method‬‬ ‫‪Description‬‬
‫)‪getElementById(id‬‬ ‫ذسرخذً ٕزٓ اىطش‪ٝ‬قح إل‪ٝ‬جاد اىعْظش عِ ؽش‪ٝ‬ق‬
‫اىخاط‪ٞ‬ح ‪id‬‬
‫)‪getElementsByTagName(name‬‬ ‫ذسرخذً ٕزٓ اىطش‪ٝ‬قح إل‪ٝ‬جاد اىعْظش عِ ؽش‪ٝ‬ق‬
‫اىخاط‪ٞ‬ح ‪tag name‬‬
‫)‪getElementsByClassName(name‬‬ ‫ذسرخذً ٕزٓ اىطش‪ٝ‬قح إل‪ٝ‬جاد اىعْظش عِ ؽش‪ٝ‬ق‬
‫اىخاط‪ٞ‬ح ‪class name‬‬
‫ذسرخذً ٕزٓ اىطش‪ٝ‬قح إل‪ٝ‬جاد جَ‪ٞ‬ع اىعْاطش عِ ؽش‪ٝ‬ق )‪querySelectorAll (selector.className‬‬
‫ذذذ‪ٝ‬ذ ‪selector‬‬
‫)‪Collection (id‬‬ ‫ذسرخذً ٕزٓ اىطش‪ٝ‬قح إل‪ٝ‬جاد اىعْظش عِ ؽش‪ٝ‬ق‬
‫‪collection‬‬

‫‪ ‬فى الخاصٌة ‪ٌ querySelectorAll‬تم تحدٌد ‪ selector‬عن طرٌك آخر الخواص التالٌة ‪ id :‬أو‬
‫‪ types‬أو ‪ class names‬أو ‪ attributes‬أو ‪ values of attributes‬أو أى خاصٌة آخرى‬
 ‫‪ : Changing HTML Elements‬كٌفٌة تغٌٌر عناصر ‪HTML‬‬
‫هنان طرق مختلفة لمجموعة من الدوال التى ٌمكن استخدامها لتغٌٌر العناصر‬
‫‪method‬‬ ‫‪Description‬‬
‫‪Element.innerHTML = Content‬‬ ‫ذغ‪ٞٞ‬ش ‪ HTML‬اىذاخي‪ ٜ‬ىعْظش ‪HTML‬‬
‫‪element.attribute = new value‬‬ ‫ذغ‪ٞٞ‬ش ق‪َٞ‬ح اىخاط‪ٞ‬ح ىعْظش ‪HTML‬‬
‫)‪element.setAttribute(attribute, value‬‬ ‫ذغ‪ٞٞ‬ش ق‪َٞ‬ح اىخاط‪ٞ‬ح ىعْظش ‪HTML‬‬
‫‪element.style.property = new style‬‬ ‫ذغ‪ٞٞ‬ش ‪ style‬ىعْظش ‪HTML‬‬

‫‪ :Adding and Deleting HTML Elements‬كٌفٌة إضافة وحذف عناصر ‪HTML‬‬

‫هنان طرق مختلفة لمجموعة من الدوال التى ٌمكن استخدامها إلضافة وحذف عناصر ‪HTML‬‬
‫‪method‬‬ ‫‪Description‬‬
‫)‪createElement(element‬‬ ‫‪ٝ‬قً٘ تإّشاء عْظش ‪HTML‬‬
‫)‪removeChild(element‬‬ ‫‪ٝ‬قً٘ تذزف عْظش ‪HTML‬‬
‫)‪appendChild(element‬‬ ‫‪ٝ‬قً٘ تإػافح عْظش ‪HTML‬‬
‫)‪replaceChild(element‬‬ ‫‪ٝ‬قً٘ تاسرثذاه عْظش ‪HTML‬‬
‫)‪write(text‬‬ ‫‪ٝ‬قً٘ تنراتح ّض داخو ‪HTML output stream‬‬

‫‪ :Adding Events Handlers‬كٌفٌة إضافة معالج األحداث‬

‫‪ : Event handler ‬هو عبارة عن دالة ٌتم تنفٌذها عند حدوث حدث ‪ event‬معٌن مثل عند النمر على‬
‫عنصر مرتٌن ‪ٌ ،‬موم ‪ event handler‬بالتماط ‪ handle‬هذا الحدث ‪ event‬ثم ٌبحث عن الدالة التى‬
‫سوف ٌتم تنفٌذها مع هذا الحدث‬

‫‪ٌ : Syntax ‬مكننا إضافة ‪ event handler‬كاآلتى ‪:‬‬

‫‪ ‬شرح الكود السابك ‪:‬‬

‫‪ ‬أوال ا ‪ :‬نموم بالبحث عن العنصر الذى نرٌده داخل المستند‬
‫‪ ‬ثانٌا ا ‪ :‬نموم بتحدٌد نوع ‪ event‬الذى نرٌد تنفٌذ الدالة عند حدوثه وٌتم عن طرٌك كتابة اسم ‪event‬‬
‫‪ ‬ثالثا ا ‪ :‬نموم بتحدٌد الدالة ‪ method‬الذى نرٌد تنفٌذها عند حدوث الحدث‬
 HTML ‫ كٌفٌة إٌجاد الكائنات داخل‬: Finding HTML Objects
‫ و‬object collections ‫ و‬HTML objects ‫ من‬11 ‫ كان ٌوجد‬: HTML DOM Level 1 
.HTML5 ‫ وهذه ال تزال صالحة فً االصدار‬properties
properties ‫ و‬collections ‫ و‬objects ‫ اآلن تم إضافة الكثٌر من‬: HTML DOM Level 3 

objects ‫ هنان خصائص كثٌرة ومختلفة ٌمكن استخدامها للحصول على معلومات عن‬
property Description
document.anchors[] (1) name ‫ح‬ٞ‫ اىخاط‬ٚ‫ عي‬ٛ٘‫ ذذر‬ٜ‫> اىر‬a< ‫ع عْاطش‬َٞ‫ىعشع ج‬
document.applets[] (1) )HTML5 ٜ‫> (ٍ٘ق٘فح ف‬applet< ‫ع عْاطش‬َٞ‫ىعشع ج‬
document.baseURI ‫ للمستند‬base URI ‫لعرض‬
document.body (1) >body< ‫إرجاع العنصر‬
document.cookie (1) ‫ الخاص بالمستند‬cookie ‫إرجاع‬
document.doctype ‫إلرجاع نوع المستند‬
document.documentElement >html< ‫إرجاع عنصر‬
document.documentMode ‫ (الوضع المستخدم) بواسطة المتصفح‬mode ‫لعرض‬
document.documentURI ‫ الخاص بالمستند‬URI ‫إرجاع‬
document.domain (1) document server ‫ لخادم المستند‬domain ‫إرجاع اسم‬
document.domConfig )ً ‫ (خاصٌة لدٌمة جدا‬DOM ‫ٌرجع تكوٌن‬
document.embeds[] >embed< ‫لعرض جمٌع عناصر‬
document.forms[] (1) >form< ‫لعرض كل عناصر‬
document.head >head< ‫إرجاع العنصر‬
document.images[] (1) >img< ‫لعرض كل عناصر‬
document.implementation DOM implementation ‫إرجاع‬
document.inputEncoding )character set( ‫ للوثٌمة‬encoding ‫لعرض تشفٌر‬
document.lastModified ‫لعرض التارٌخ والولت الذي تم فٌه تحدٌث المستند‬
document.links[] (1) href ‫> التً تحتوي على‬a< ‫> و‬area< ‫لعرض كل عناصر‬
document.readyState )loading( ‫إرجاع حالة المستند‬
document.referrer (1) )linking document( ‫ للمحٌل‬URL ‫إرجاع عنوان‬
document.scripts[] >script< ‫لعرض جمٌع عناصر‬
document.strictErrorChecking error checking ‫إرجاع إذا تم فرض فحص األخطاء‬
document.title (1) >title< ‫إرجاع عنصر‬
document.URL (1) ‫ اىناٍو اىخاص تاىَسرْذ‬URL ُ‫ىعشع عْ٘ا‬
(3) ‫ والبالً ٌشٌر إلى‬HTML DOM Level 1 ‫( تشٌر إلى‬1): 
‫‪ ‬واآلن سوف نخوض فى بعض األمثلة مع شرح مبسط لخطوات كتابة األكواد عند تنفٌذ مهمة معٌنة‬
‫‪ ‬مثال ‪ : 1‬كٌفٌة عرض محتوى ‪ content‬داخل عنصر ‪innerText‬‬

‫‪ : document‬هى ‪ root of tree‬أى هى رأس الشجرة أو رأس الصفحة التى تحتوى على جمٌع‬
‫‪nodes‬‬

‫‪ ‬سوف ٌظهر الناتج كرسالة داخل مربع حوارى‬

‫‪ ‬عند الضغط على ‪ ok‬سوف ٌظهر بالً محتوٌات الصفحة‬

‫‪ ‬شرح كٌفٌة عرض محتوى داخل عنصر‬

‫‪ ‬الخطوة األول ‪ :‬نحدد العنصر الموجود داخل الصفحة‬
‫‪ ‬الخطوة الثانٌة ‪ :‬نحدد المهمة الذى نرٌدها فهنا نرٌد لٌمة محتوى العنصر‬
‫‪ ‬الخطوة الثالثة ‪ :‬نعرض لٌمة المحتوى‬
 ‫‪ ‬مثال ‪ : 2‬كٌفٌة تغٌر محتوى داخل عنصر عن طرٌك ‪innerText‬‬

‫‪ ‬سوف ٌظهر الناتج كاآلتى ‪:‬‬

‫‪ ‬مثال ‪ : 3‬كٌفٌة تغٌر محتوى داخل عنصر عن طرٌك ‪innerHTML‬‬

‫‪ ‬سوف ٌظهر الناتج كاآلتى ‪:‬‬

 ‫‪ ‬مثال ‪ : 4‬إٌجاد العناصر عن طرٌك ‪CSS Selectors‬‬

‫‪ ‬الناتج‬

‫‪ ‬مالحظات ومراجعة سرٌعة ‪:‬‬

‫الفرق بٌن ‪ innerText‬و ‪innerHTML‬‬
‫‪ٌ : innerText ‬ستخدم عند كتابة نص ‪ text‬داخل العنصر مثل "‪"Hello‬‬
‫‪ٌ : innerHTML ‬ستخدم عند كتابة كود ‪ HTML‬داخل العنصر مثل ">‪"<b>Hello</b‬‬

‫‪ : document object‬هذا الكائن ٌمثل مستند صفحة الوٌب الخاصة بن‪ .‬وإذا كنت ترٌد الوصول إلى‬
‫أي عنصر فً صفحة ‪ ، HTML‬فستبدأ دائ ًما بالوصول إلى كائن المستند‪.‬‬

‫عا للوصول إلى عنصر ‪HTML‬‬

‫‪ : getElementById Method‬هذه الدالة هى الطرٌمة األكثر شٌو ً‬
‫عن طرٌك استخدام معرف العنصر أو ما ٌسمى ب ‪. id‬‬

‫‪ : innerHTML Property‬هذه الخاصٌة هى أسهل طرٌمة للحصول على محتوى عنصر أو استبدال‬
‫محتوى عناصر أو تغٌٌره‬
 ‫‪ ‬مثال ‪ : 5‬إٌجاد العناصر عن طرٌك ‪HTML Object Collections‬‬

‫‪ ‬الناتج ‪ :‬سوف ٌظهر بهذا الشكل‬

‫‪ ‬عند الضغط على ‪ Try it‬سوف ٌظهر جمٌع العناصر الموجودة داخل ‪form‬‬
‫‪ٌ ‬مكن الوصول إلى ‪ HTML objects‬أو (‪ )object collections‬التالٌة بنفس الطرٌمة التى ذكرناها‬
‫فى المثال رلم ‪ 5‬وسوف نذكر أمثلة من مولع ‪w3schools‬‬
‫‪document.anchors ‬‬

‫‪ : length property ‬هذه خاصٌة تستخدم لعرض طول ‪ object‬أو ‪ collection‬أى عدد العناصر‬
‫الموجودة بداخل الكائن أو المجموعة‬

‫‪document.body ‬‬

‫‪ : innerHTML property ‬خاصٌة تعرض المحتوى الداخلى‬

 document.documentElement 

document.embeds 

‫ و‬PDF ‫ والملفات‬video ‫ والفٌدٌو‬audio ‫ هو عبارة عن الوسائط المضمنة مثل الصوت‬: embeds 

ActiveX ‫ و‬Flash ‫ و‬Java applets
 document.forms 

document.head 

document.images 
 document.links 

document.scripts 

document.title 
 DOM ‫ أمثلة عن كائن مستند‬: ‫الدرس الثالث‬

(Examples about HTML DOM Document Object)

output ‫ تغٌٌر‬Changing the HTML Output Stream : 1 ‫ مثال‬

 The goal of InputStream and OutputStream is to abstract different ways to input
and output: whether the stream is a file, a web page, or the screen shouldn't
matter. All that matters is that you receive information from the stream (or send
information into that stream.)
 InputStream is used for many things that you read from.
 OutputStream is used for many things that you write to.

HTML output stream ‫ للكتابة مباشرة إلى‬document.write() ‫ ٌمكن استخدام‬

.‫ سوف تحل محل المستند‬document.write() ‫ بعد تحمٌل المستند‬

‫ تغٌٌر المحتوى‬Changing HTML Content : 2 ‫ مثال‬

 ‫ تغٌٌر لٌمة الخاصٌة‬Changing the Value of an Attribute : 3 ‫ مثال‬

landscape.jpg" ‫" إلى‬smiley.gif" ‫ لهذا العنصر من‬src ‫ بتغٌٌر الخاصٌة‬JavaScript ‫ ٌموم‬

style ‫ تغٌٌر النمط‬Changing HTML Style : 4 ‫ مثال‬

style ‫ استخدام األحداث لتغٌٌر‬Using Events : 5 ‫ مثال‬

 ‫‪ ‬عند الضغط على !‪ Click Me‬سوف ٌتغٌر اللون كاآلتى ‪:‬‬

‫‪ ‬مثال ‪ JavaScript HTML DOM Animation : 6‬كٌفٌة إنشاء رسوم ‪ HTML‬متحركة باستخدام‬
‫‪JavaScript‬‬

‫‪ ‬لعمل ‪ٌ animation‬جب أن نتبع بعض الخطوات التالٌة ‪:‬‬

‫‪ٌ : A Basic Web Page ‬جب أن ٌكون لدٌنا صفحة وٌب أساسٌة‬
‫‪ٌ : Create an Animation Container ‬جب عمل محتوى للرسوم المتحركة‬
‫‪ٌ : Style the Elements ‬جب عمل ‪ style‬للعناصر‬
‫‪ٌ : container element ‬جب أن تحتوى على "‪style = "position: relative‬‬
‫‪ٌ : animation element ‬جب أن تحتوى على "‪style = "position: absolute‬‬
‫‪ : Create the Animation Using JavaScript ‬نكتب الكود المستخدم لعمل ‪animation‬‬
‫‪ٌ ‬جب أن تكون جمٌع ‪ Animation‬ذات صلة ‪ relative‬بعنصر حاوٌة ‪container element‬‬
‫‪ ‬تتم الرسوم المتحركة داخل ‪ javascript‬عن طرٌك برمجة التغٌٌرات تدرٌجٌا ً فً ‪ style‬العنصر‪.‬‬
‫‪ٌ ‬تم استدعاء التغٌٌرات بواسطة ‪ timer‬وعندما ٌكون الفاصل الزمنً ‪ timer interval‬لجهاز ضبط‬
‫صغٌرا ‪ ،‬ستبدو الصورة المتحركة مستمرة ‪continuous‬‬ ‫ً‬ ‫الولت ‪timer‬‬
 A Basic Web Page : ً‫ أوال‬

: ‫ الناتج‬

Create an Animation Container : ً ‫ ثانٌا‬

: ‫ الناتج‬
 ‫‪ ‬ثالثا ً ‪Create an Animation Container :‬‬

‫‪ ‬الناتج ‪:‬‬
‫عند الضغط على ‪ Click Me‬سوف ٌنتمل المربع األحمر تدرٌجٌا ً بممدار ‪ 1 px‬فى كل مرة من الجهة‬
‫األعلى والجهة الٌسرى معا ً حتى ٌصل للمٌمة ‪ 350 px‬ثم ٌتولف‬
 ‫الدرس الرابع ‪ :‬استخدام األحداث للــ ‪DOM‬‬

‫)‪(JavaScript HTML DOM Events‬‬

‫‪ ‬تسمح ‪ HTML DOM‬ل ‪ JavaScript‬بالتفاعل مع أحداث ‪HTML‬‬

‫‪ : Reacting to Events ‬التفاعل مع األحداث‬
‫‪ٌ ‬مكن تنفٌذ ‪ javascript‬عند حدوث حدث ‪ ،‬مثلما ٌحدث عندما ٌنمر المستخدم على عنصر ‪.HTML‬‬
‫‪ ‬لتنفٌذ كود عندما ٌنمر المستخدم على عنصر أضف كود ‪ javascript‬إلى الخاصٌة ‪HTML event‬‬
‫كما ٌلى ‪:‬‬

‫‪ ‬أمثلة على أحداث ‪:HTML‬‬

‫‪ ‬عندما ٌموم مستخدم بالنمر فوق الماوس‬
‫‪ ‬عندما ٌتم تحمٌل صفحة الوٌب‬
‫‪ ‬عندما تم تحمٌل صورة‬
‫‪ ‬عندما ٌتحرن الماوس فوق عنصر‬
‫‪ ‬عندما ٌتم تغٌٌر حمل اإلدخال‬
‫‪ ‬عندما ٌتم تمدٌم نموذج ‪HTML‬‬
‫‪ ‬عندما ٌموم المستخدم بالضغط على المفتاح‬

‫‪ ‬مثال ‪ : 1‬فً هذا المثال ‪ٌ ،‬تم تنفٌذ كود ‪javascript‬‬

‫‪ ‬الناتج ‪:‬‬

‫‪ ‬عند الضغط على محتوى النص الموجود سوف ٌتغٌر المحتوى إلى الشكل التالى ‪:‬‬
‫‪ ‬مثال ‪ : 2‬فً هذا المثال ‪ٌ ،‬تم استدعاء دالة عن طرٌك معالج االحداث ‪events handler‬‬

‫‪ ‬الناتج ‪:‬‬

‫‪ ‬عند الضغط على محتوى النص الموجود سوف ٌتغٌر المحتوى إلى الشكل التالى ‪:‬‬

‫‪ ‬مثال ‪ : 3‬لتعٌٌن ‪ events‬لعناصر ‪ٌ ، HTML‬مكنن استخدام ‪event attributes‬‬

‫‪ ‬عند الضغط على " ‪ " The time is‬سوف ٌظهر التارٌخ‬
 ‫‪ ‬مثال ‪ٌ : 4‬تٌح لن ‪ HTML DOM‬تعٌٌن ‪ events‬لعناصر ‪ HTML‬باستخدام ‪: JavaScript‬‬

‫‪ٌ ‬تم تعٌٌن دالة باسم ‪ displayDate‬لعنصر ‪ HTML‬الذى له خاصٌة "‪ id = "myBtn‬وهذه الدالة تنفذ‬
‫عند الضغط على العنصر‬

‫‪ ‬الناتج ‪ :‬عند الضغط على " ‪ " try it‬سوف ٌظهر التارٌخ‬

‫خالل األمثلة التالٌة سوف نتحدث عن بعض األحداث الشائعة داخل ‪ javascript‬وسوف نأخذ بعض‬
‫األمثلة علٌها (سوف نذكر األمثلة المذكورة فى مولع ‪) w3schools‬‬
 ‫الدرس الخامس ‪ :‬استخدام دالة مستمع األحداث للــ ‪DOM‬‬

‫) ‪(JavaScript HTML DOM EventListener‬‬

‫‪ ‬إلضافة مستمع لألحداث ‪ٌ EventListener‬جب أن نستخدم الدالة )(‪addEventListener‬‬

‫‪ٌ ‬مكنن إزالة مستمع لألحداث عن طرٌك الدالة )(‪removeEventListener‬‬

‫‪ : addEventListener() method ‬هذه الدالة تستخدم لربط عنصر معٌن ‪ element‬بمعالج‬

‫الحدث ‪event handler‬‬

‫‪ : addEventListener() method ‬تربط ‪ element‬بمعالج الحدث ‪ event handler‬وبدون‬

‫كتابة فوق معالجات األحداث الموجودة ( ‪)without overwriting existing event handlers‬‬

‫‪ٌ ‬مكنن إضافة العدٌد من ‪ event handlers‬إلى عنصر واحد‪.‬‬

‫‪ٌ ‬مكنن إضافة العدٌد من ‪ event handlers‬من نفس النوع إلى عنصر واحد مثالً ٌمكن إضافة حدثان‬
‫من نوع "‪ "click‬لعنصر واحد وسوف ٌتم تنفٌذ الحدثان بالتتابع‬

‫‪ٌ ‬مكنن إضافة ‪ event listeners‬إلى أي ‪ DOM object‬ولٌس فمط ‪ HTML elements‬فمثالً‬
‫ٌمكن إضافة ‪ event listener‬إلى كائن النافذة ‪window object‬‬

‫‪ : addEventListener() ‬هذه الدالة تسهل التحكم فً كٌفٌة تفاعل الحدث مع الفماعات ‪.bubbling‬‬

‫‪ ‬عند استخدام )(‪ٌ ، addEventListener‬تم فصل ‪ JavaScript‬عن ‪ ، HTML markup‬للحصول‬

‫على إمكانٌة لراءة أفضل لألكواد وٌسمح لن بإضافة ‪ event listeners‬حتى عندما ال تتحكم فً‬
‫‪HTML markup‬‬
 ‫‪ ‬الحظ بناء الجملة ‪syntax :‬‬

‫هذه الدالة تأخذ ‪ 3‬معامالت ‪parameters‬‬

‫‪ ‬أول معامل ‪ : event‬وهو عبارة عن نوع الحدث الذى سوف ٌتم تنفٌذه مثل ‪"click" or‬‬
‫"‪ "mousedown‬الحظ أنن ال تستخدم "‪ "on‬للحدث ؛ استخدم "‪ "click‬بدالً من "‪"onclick‬‬
‫‪ ‬ثانً معامل ‪ : function‬هً الدالة التً نرٌد استدعائها وتنفٌذها بها عند ولوع الحدث وٌمكنن‬
‫استخدام أى نوع من أنواع الدوال التى تم دراستها‬
‫‪ ‬ثالث معامل ‪ : usecapture‬هذا المعامل اختٌاري وهً لٌمة ‪ boolean‬وهى التى تحدد ما إذا‬
‫كنت ترٌد استخدام فماعات األحداث ‪ event bubbling‬أو التماط األحداث ‪event capturing‬‬

‫‪ ‬مثال ‪ : 1‬إضافة ‪ event listener‬لعنصر عند النمر على العنصر‬

‫‪ ‬الناتج ‪ :‬عند الضغط على ‪ Try it‬سوف ٌظهر التارٌخ الحالى ‪:‬‬
‫‪ ‬مثال ‪ : 2‬إضافة ‪ event listener‬للعنصر (الحظ شكل الدالة المستخدمة)‬

‫‪ ‬الناتج ‪ :‬عند الضغط على ‪ Try it‬سوف ٌظهر هذه الرسالة‬

‫‪ ‬مثال ‪ : 3‬إضافة ‪ event listener‬للعنصر (الحظ شكل الدالة المستخدمة)‬

‫‪ ‬الناتج ‪ :‬عند الضغط على ‪ Try it‬سوف ٌظهر هذه الرسالة‬

 ‫‪ ‬مثال ‪ : 4‬إضافة العدٌد من ‪ event listeners‬إلى نفس العنصر‬

‫‪ ‬الناتج ‪ :‬عند الضغط على ‪ Try it‬سوف ٌظهر هذه الرسالة‬

‫‪ ‬الناتج ‪ :‬عند الضغط على ‪ ok‬سوف ٌظهر رسالة آخرى‬

‫الحظ أن هنان حدثان تم تنفٌذهما على عنصر واحد فمط ‪ ،‬وتم تنفٌذ الحدثان بالتتابع‬
‫‪ ‬مثال ‪ : 5‬إضافة العدٌد من ‪ event listeners‬المختلفة إلى نفس العنصر‬

‫‪ ‬عند الولوف على الزرار ‪ Try it‬سوف ٌظهر هذه النتٌجة‬

‫‪ ‬وعند الضغط على الزرار ‪ Try it‬سوف ٌظهر هذه النتٌجة‬

‫‪ ‬وعند االبتعاد من على الزرار ‪ Try it‬سوف ٌظهر هذه النتٌجة‬

‫‪ ‬وهكذا سوف ٌتم تنفٌذ الدالة حسب نوع ال ‪ event‬فى كل مرة‬

 window Object ‫ إلى كائن النافذة‬event listener ‫ إضافة‬: 6 ‫ مثال‬
HTML DOM object ‫ على أي‬event listeners ‫ إضافة‬addEventListener)( ‫تتٌح لن الدالة‬
‫ أو كائنات أخرى تدعم‬window object ‫ أو‬HTML document ‫ أو‬HTML elements ‫مثل‬
.xmlHttpRequest ‫ مثل كائن‬، ‫األحداث‬

: ‫ سوف ٌتغٌر لٌمة الرلم العشوائً الحظ اآلتى‬resize window ‫ كلما تغٌر حجم النافذة‬
 ‫‪ ‬مثال ‪ : Passing Parameters: 7‬مثال على تمرٌر المعامالت ‪parameters‬‬

‫‪ ‬عند الضغط على الزرار ‪ Try it‬سوف ٌظهر هذه النتٌجة ‪:‬‬

‫عند تمرٌر لٌم المعامالت استخدم "‪ "anonymous function‬التً تستدعً دالة محددة مع‬
‫المعامالت‬
 ‫ما هو ‪ Event Bubbling‬و ‪ Event Capturing‬؟‬
‫‪ ‬هنان طرٌمتان النتشار األحداث فً ‪ ، HTML DOM‬وهى االحتواء ‪ bubbling‬والتماط ‪.capturing‬‬
‫‪ٌ ‬عد نشر األحداث ‪ Event propagation‬طرٌمة لتحدٌد ترتٌب العناصر‪ element order‬عند ولوع‬
‫الحدث‪ .‬فإذا كان لدٌن عنصر <‪ >p‬داخل عنصر <‪ ، >div‬وكان المستخدم ٌنمر على العنصر <‪، >p‬‬
‫فأى عنصر ٌجب معالجة حدث "‪ "click‬له أوالً؟‬
‫‪ ‬فً حالة ‪ٌ : bubbling‬تم التعامل أوالً مع حدث العنصر الداخلى ‪ inner‬ثم الخارجً‪ : outer‬حٌث‬
‫تتم معالجة حدث النمر على عناصر <‪ >p‬أوالً ‪ ،‬ثم حدث النمر على العنصر <‪.>div‬‬
‫‪ ‬فً حالة ‪ٌ : capturing‬تم التعامل أوالً مع حدث العنصر الخارجً ‪ outer‬ثم الداخلً ‪ : inner‬حٌث‬
‫ٌتم التعامل مع حدث النمر على عنصر <‪ >div‬أوالً ‪ ،‬ثم حدث النمر لعنصر <‪.>p‬‬
‫‪ ‬باستخدام الدالة ()‪ٌ addEventListener‬مكنن تحدٌد نوع االنتشار ‪ propagation type‬باستخدام‬
‫المعامل "‪ "useCapture‬والتى تكون لٌمتها ‪ true‬أو ‪false‬‬

‫‪ٌ : false ‬ستخدم الحدث عملٌة ‪ bubbling propagation‬وهى المٌمة االفتراضٌة‬

‫‪ٌ : true ‬ستخدم الحدث عملٌة ‪capturing propagation‬‬
Event Capturing ‫ و‬Event Bubbling ‫ مثال على الفرق بٌن‬: 8 ‫ مثال‬

: ‫ الناتج‬
 ‫‪ ‬الشرح ‪:‬‬
‫‪ ‬فى حالة ‪: Bubbling‬‬
‫‪ ‬عند الضغط على "!‪ "Click me‬الموجود بداخل ‪ Bubbling‬فسوف تظهر هذه الرسالة‬

‫‪ ‬وعند الضغط على ‪ ok‬فسوف تظهر هذه الرسالة‬

‫‪ o‬الحظ انه تم تنفٌذ الكود الخاص بالعنصر الداخلى أوالً ‪ ،‬ثم ٌنفذ الكود الموجود على العنصر‬
‫الخارجً بعد ذلن‬

‫‪ ‬فى حالة ‪: capturing‬‬

‫‪ ‬عند الضغط على "!‪ "Click me‬الموجود بداخل ‪ Capturing‬فسوف تظهر هذه الرسالة‬

‫‪ ‬وعند الضغط على ‪ ok‬فسوف تظهر هذه الرسالة‬

‫‪ o‬الحظ انه تم تنفٌذ الكود الخاص بالعنصر الخارجً أوالً ‪ ،‬ثم ٌنفذ الكود الموجود على العنصر‬
‫الداخلى بعد ذلن‬
‫فى حالة الضغط على العنصر الخارجً فى كال الحالتٌن سوف ٌتم تنفٌذ الكود الخاص بالعنصر‬
‫الخارجً‬
 ‫‪ ‬مثال ‪ : removeEventListener(): 9‬مثال على حذف ‪event listener‬‬
‫هذه الدالة )(‪ removeEventListener‬تستخدم إلزالة ‪ event listeners‬التً تم إرفالها مع الدالة‬
‫)(‪addEventListener‬‬

‫‪ ‬عندما ٌتحرن المؤشر على مستوى ‪ myDiv‬فسوف ٌموم عند كل حركة بتولٌد رلم عشوائً جدٌد‬

‫‪ ‬وعند الضغط على ‪ remove‬فسوف نموم بإزالة ‪ event listener‬ولذلن عندما ٌتحرن المؤشر ال‬
‫ٌتولد لٌم جدٌدة‬
 ‫مالحظة مهمة ‪:‬‬
‫)(‪removeEventListener‬‬ ‫والدالة‬ ‫الدالة )(‪addEventListener‬‬

‫ال ٌتم دعم الدوال )(‪ addEventListener‬و )(‪ removeEventListener‬فً ‪ IE 8‬واإلصدارات السابمة‪.‬‬
‫ومع ذلن ‪ ،‬بالنسبة لهذه اإلصدارات الخاصة بالمتصفح ‪ٌ ،‬مكنن استخدام الدلة )(‪ attachEvent‬إلضافة‬
‫‪ event listener‬بالعنصر ‪ ،‬والدالة )(‪ detachEvent‬إلزالتة ‪: event listener‬‬

‫‪ ‬مثال ‪ : 10‬مثال إلضافة ‪ٌ event listener‬دعم جمٌع المتصفحات‬

‫‪ ‬عند الضغط على ‪ Try it‬سوف ٌظهر الناتج التالى ‪:‬‬

 DOM ‫ التنقل بٌن عناصر‬: ‫الدرس السادس‬

(DOM Navigation )

node relationships ‫ باستخدام‬node tree ً‫ ٌمكنن التنمل ف‬، HTML DOM ‫ باستخدام‬

HTML document ‫ فإن كل شًء داخل‬W3C HTML DOM standard ‫ وفمًا‬: DOM Nodes
: ‫ كاآلتى‬node ‫بمثابة عمدة‬
document node ً‫ ه‬entire document 
element node ‫ هو‬HTML element ‫ كل‬
text nodes ً‫ ه‬text inside HTML elements ‫ النص داخل العناصر‬
)‫ (ولكن تم إٌمافها‬attribute node ً‫ه‬HTML attribute ‫ كل‬
comment nodes ً‫ ه‬comments ‫ جمٌع‬

‫ بواسطة لغة‬node tree ً‫ ف‬nodes ‫ ٌمكن الوصول إلى جمٌع‬، HTML DOM ‫ باستخدام‬
.JavaScript

‫ أو حذفها‬modified ‫ وٌمكن تعدٌل جمٌع العمد‬، New nodes ‫ وٌمكن أٌضا ً إنشاء عمد جدٌدة‬
.deleted
 nodes ‫ العاللات بٌن العمد‬: Node Relationships
‫ مع بعضها‬hierarchical relationship ‫ لها عاللة هرمٌة‬node tree ‫ الموجودة داخل‬nodes 
.‫البعض‬
‫ لوصف العاللات الحظ‬sibling ‫ واألشماء‬child ‫ والطفل‬parent ‫ تستخدم مصطلحات الوالدٌن‬
nodes ‫وصف العاللة الهرمٌة لل‬
)root node( ‫ أو‬root ‫ تسمى الجزر‬top node ‫ العمدة العلٌا‬، node tree ً‫ ف‬
parent ‫ لٌس لها‬root ‫ باستثناء‬، ‫ واحد بالضبط‬parent ‫ لها‬node ‫ كل‬
children ‫ ٌمكن أن ٌكون لها عدد من األطفال‬node 
parent ‫ التى لها نفس‬nodes ‫ (اإلخوة أو األخوات) هم‬Siblings ‫ األشماء‬

From the HTML above you can read: ٚ‫ذ‬ٟ‫و اىشنو ما‬ٞ‫َنِ ذذي‬ٝ ‫ٍِ اىشنو اىساتق‬

 <html> is the root node

 <html> has no parents
 <html> is the parent of <head> and <body>
 <head> is the first child of <html>
 <body> is the last child of <html>

and:

 <head> has one child: <title>

 <title> has one child (a text node): "DOM Tutorial"
 <body> has two children: <h1> and <p>
 <h1> has one child: "DOM Lesson one"
 <p> has one child: "Hello world!"
 <h1> and <p> are siblings
 ‫‪ : Navigating Between Nodes‬التنمل بٌن ‪nodes‬‬
‫‪ٌ ‬مكنن استخدام خصائص العمدة ‪ node properties‬التالٌة للتنمل بٌن العمد باستخدام لغة‬
‫‪JavaScript‬‬
‫‪ : parentNode ‬تستخدم هذه الخاصٌة للحصول على ‪ parent‬ألى ‪node‬‬

‫]‪ childNodes[nodenumber‬تستخدم للحصول على ‪ nodes‬عن طرٌك ‪index‬‬ ‫‪‬‬

‫‪ firstChild‬تستخدم هذه الخاصٌة للحصول على أول عنصر للـ ‪parent‬‬ ‫‪‬‬

‫‪ lastChild‬تستخدم هذه الخاصٌة للحصول على آخر عنصر للـ ‪parent‬‬ ‫‪‬‬

‫‪ nextSibling‬تستخدم هذه الخاصٌة للحصول على العنصر التالى للـ ‪parent‬‬ ‫‪‬‬

‫‪ previousSibling‬تستخدم هذه الخاصٌة للحصول على العنصر السابك للـ ‪parent‬‬ ‫‪‬‬

‫‪: Child Nodes and Node Values‬‬

‫‪ ‬من األخطاء الشائعة فً ‪ DOM processing‬هً تولع أن تحتوي عمدة العنصر ‪element node‬‬
‫على نص ‪text‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬فى المثال السابك ‪ ،‬ال تحتوى ‪ element node‬أى >‪ <title‬على ‪ text‬وإنما تحتوى على عمدة‬
‫النص ‪ text node‬ولٌمة ‪ text node‬هى "‪"DOM Tutorial‬‬

‫‪ٌ ‬مكن الوصول إلى لٌمة ‪ text node‬من خالل الخاصٌة ‪innerHTML‬‬

‫‪ ‬الوصول إلى الخاصٌة ‪ innerHTML‬هو نفس الوصول إلى ‪ node Value‬الخاصة بـالطفل األول‬
‫‪first child‬‬
 ‫‪ٌ ‬مكن أٌ ً‬
‫ضا الوصول إلى الطفل األول ‪ first child‬على النحو التالً‪:‬‬

‫‪ ‬جمٌع األمثلة التالٌة تسترجع نص عنصر <‪ >h1‬وتنسخه فً عنصر <‪>p‬‬

‫‪ ‬مثال ‪: 1‬‬

‫‪ ‬مثال ‪: 2‬‬

‫‪ ‬مثال ‪: 3‬‬

‫‪ ‬فً هذا البرنامج التعلٌمً ‪ ،‬نستخدم خاصٌة ‪ innerHTML‬السترداد محتوى عنصر ‪HTML‬ومع‬
‫ذلن ‪ ،‬فإن تعلم الطرق األخرى مفٌد لفهم بنٌة الشجرة ‪ tree structure‬والتنمل فً ‪.DOM‬‬
 ‫‪ : DOM Root Nodes‬العمد الخاصة بالجزر ‪root‬‬
‫‪ ‬هنان نوعان من الخصائص الخاصة التً تسمح بالوصول إلى المستند الكامل‪:‬‬
‫‪The body Property ‬‬
‫‪ : document.body ‬تستخدم هذه الخاصٌة للحصول نص المستند الموجود بداخل >‪ <body‬فمط‬
‫‪The documentElement Property ‬‬
‫‪ : document.documentElement ‬تستخدم هذه الخاصٌة للحصول المستند الكامل الموجود‬
‫بداخل >‪<html‬‬

‫‪document.body‬‬ ‫‪ ‬مثال ‪ : 1‬مثال على الخاصٌة‬

‫‪ ‬عند فتح المستند سوف ٌظهر هكذا ‪:‬‬

‫‪ ‬نالحظ أن خاصٌة ‪ document.body‬أظهرت المحتوى الموجود بداخل >‪ <body‬فمط‬

 ‫‪document.documentElement‬‬ ‫‪ ‬مثال ‪ : 2‬مثال على الخاصٌة‬

‫‪ ‬عند فتح المستند سوف ٌظهر هكذا ‪:‬‬

‫‪ ‬نالحظ أن خاصٌة ‪ document.documentElement‬أظهرت المستند بالكامل الموجود بداخل‬

‫>‪<html‬‬
‫‪ : The nodeName Property ‬تستخدم هذه الخاصٌة لتحدٌد اسم ‪node‬‬
‫‪ nodeName o‬للمراءة فمط‬
‫‪ o‬اسم العمدة للــ ‪ٌ element node‬كون هو نفس ‪tag name‬‬
‫‪ o‬اسم العمدة للــ ‪ٌ attribute node‬كون هو ‪attribute name‬‬
‫‪ o‬اسم العمدة للــ ‪ text node‬دائ ًما ٌكون هو ‪#text‬‬
‫‪ o‬اسم العمدة للــ ‪ document node‬دائ ًما ٌكون هو ‪#document‬‬

‫‪ ‬مثال ‪: 1‬‬

‫‪ o‬الحظ اسم العمدة للــ ‪ٌ element node‬كون هو نفس ‪tag name‬‬

‫‪ : The nodeValue Property ‬تستخدم هذه الخاصٌة لتحدٌد لٌمة ‪node‬‬

‫‪ o‬لٌمة العمدة للــ ‪ٌ element nodes‬كون لٌمة خالٌة ‪null‬‬
‫‪ o‬لٌمة العمدة للــ ‪ text nodes‬هو النص نفسه ‪text itself‬‬
‫‪ o‬لٌمة العمدة للــ ‪ attribute nodes‬هً لٌمة السمة ‪attribute value‬‬

‫‪ : The nodeType Property ‬تستخدم هذه الخاصٌة لتحدٌد نوع ‪node‬‬

‫‪ ‬مثال ‪: 1‬‬
 ‫أهم أنواع العمد هً ‪:‬‬

‫‪ ‬الشرح ‪:‬‬

‫المٌمة ‪ 1‬تعنى أن نوع العمدة هو ‪element node‬‬ ‫‪‬‬

‫المٌمة ‪ 2‬تعنى أن نوع العمدة هو ‪attribute node‬‬ ‫‪‬‬
‫المٌمة ‪ 3‬تعنى أن نوع العمدة هو ‪text node‬‬ ‫‪‬‬
‫المٌمة ‪ 8‬تعنى أن نوع العمدة هو ‪comment node‬‬ ‫‪‬‬
‫المٌمة ‪ 9‬تعنى أن نوع العمدة هو ‪document node‬‬ ‫‪‬‬
‫المٌمة ‪ 10‬تعنى أن نوع العمدة هو ‪document type node‬‬ ‫‪‬‬

‫تم إهمال النوع ‪ 2‬فً ‪( DOM HTML‬لكنه ٌعمل)‪ .‬لم ٌتم إهمالها فً ‪.XML DOM‬‬
 ‫الدرس السابع ‪ :‬العُـقـد‬
‫)‪(DOM Nodes‬‬

‫‪ ‬فى هذا الدرس سوف نتعلم كٌفٌة إضافة ‪ nodes‬جدٌدة وكٌفٌة حذف ‪ nodes‬موجودة بداخل المستند‬

‫)‪ : Creating New HTML Elements (Nodes‬عمل عناصر جدٌدة أو ‪nodes‬‬

‫إلضافة عنصر جدٌد إلى ‪ HTML DOM‬هنان خطواتان‬
‫‪ -1‬أول خطوة ٌجب إنشاء العنصر (‪)element node‬‬
‫‪ o‬ننشئ العنصر الجدٌد‬
‫‪ o‬ننشئ النص ونضٌفه للعنصر الجدٌد‬
‫‪ -2‬ثانً خطوة إلحاق العنصر الجدٌد بعنصر موجود‬
‫‪ o‬نحدد العنصر الموجود‬
‫‪ o‬نلحك العنصر الجدٌد بالعنصر الموجود‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬الشرح ‪:‬‬
‫‪ ‬أوالً ‪ :‬تم إنشاء عنصر جدٌد اسمه >‪ <p‬عن طرٌك الدالة ‪createElement‬‬
 ‫‪ ‬ثانٌا ً ‪ :‬تم إنشاء عمدة نص ‪ text node‬عن طرٌك الدالة ‪createtextNode‬‬

‫‪ ‬ثالثا ً ‪ :‬نضٌف النص ‪ text node‬بالعنصر الجدٌد عن طرٌك الدالة ‪appendChild‬‬

‫‪ ‬رابعا ً ‪ :‬نلحك العنصر الجدٌد بالعنصر الموجود الذى نرٌده عن طرٌك خطوتٌن ‪:‬‬
‫‪ ‬الخطوة األولى ‪ :‬نحدد العنصر الموجود عن طرٌك الدالة ‪getElementById‬‬

‫‪ ‬الخطوة الثانٌة ‪ :‬نلحك العنصر الجدٌد بالعنصر الموجود عن طرٌك الدالة ‪appendChild‬‬

‫‪ insertBefore(new‬إلضافة عنصر جدٌد‬ ‫) ‪element , old element‬‬‫ٌمكنن استخدام الدالة‬

‫‪ new element‬لبل عنصر آخر ‪old element‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬تم إضافة خطوة جدٌدة وهى تحدٌد العنصر الذى نرٌد إضافة العنصر الجدٌد لبله‬
 ‫‪ : Removing Existing HTML Elements‬إزالة عناصر موجودة أو ‪nodes‬‬
‫‪ ‬إلزالة عنصر ‪ٌ ، HTML‬جب علٌن معرفة أصل العنصر ‪parent‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬الشرح ‪:‬‬
‫‪ ‬أوالً ‪ :‬تم تحدٌد ‪ parent‬عن طرٌك الدالة ‪getElementById‬‬

‫‪ ‬ثانٌا ً ‪ :‬تم تحدٌد ‪ child‬عن طرٌك الدالة ‪getElementById‬‬

‫‪ ‬ثالثا ً ‪ :‬تم حذف ‪ child‬عن طرٌك الدالة ‪removeChild‬‬

‫لادرا على إزالة عنصر دون اإلشارة إلى األصل‪.‬‬

‫‪ ‬سٌكون من الجٌد أن تكون ً‬
‫‪ ‬لكن اسف ٌحتاج ‪ DOM‬إلى معرفة العنصر الذي ترٌد إزالته ‪ ،‬وعن العنصر الرئٌسً ‪.parent‬‬
‫‪ ‬فً ما ٌلً حل شائع‪ :‬ابحث عن ‪ child‬الذي ترٌد إزالته واستخدم خاصٌة ‪ parentNode‬للعثور‬
‫على ‪: parent‬‬
 ‫‪ : Replacing HTML Elements‬الستبدال عناصر ‪HTML‬‬
‫‪ replaceChild(new‬تستخدم‬ ‫‪ ‬الستبدال عنصر إلى ‪ ، HTML DOM‬استخدم الدالة )‪, old‬‬
‫الستبدال عنصر جدٌد ‪ new‬بعنصر لدٌم ‪old‬‬
‫‪ ‬مثال ‪:‬‬

‫‪ ‬الشرح ‪:‬‬
‫‪ ‬أوالً ‪ :‬تم تحدٌد ‪ parent‬عن طرٌك الدالة ‪getElementById‬‬

‫‪ ‬ثانٌا ً ‪ :‬تم تحدٌد ‪ child‬عن طرٌك الدالة ‪getElementById‬‬

‫‪ ‬ثالثا ً ‪ :‬تم إنشاء عنصر جدٌد اسمه >‪ <p‬عن طرٌك الدالة ‪createElement‬‬

‫‪ ‬رابعا ً ‪ :‬تم إنشاء عمدة نص ‪ text node‬عن طرٌك الدالة ‪createtextNode‬‬

 ‫‪ ‬خامسا ً ‪ :‬نضٌف النص ‪ text node‬بالعنصر الجدٌد عن طرٌك الدالة ‪appendChild‬‬

‫‪ replaceChild(new‬لنستبدل العنصر الجدٌد ‪ new‬بالعنصر‬ ‫)‪, old‬‬ ‫‪ ‬سادسا ً ‪ :‬نستخدم الدالة‬

‫المدٌم ‪old‬‬

‫‪ ‬مالحظة ‪:‬‬
‫نالحظ أننا عندما نرٌد استبدال لمنا بعمل عنصر جدٌد وأضفنا له نص ثم لمنا باستبداله بالعنصر‬
‫المدٌم‬
 ‫الدرس الثامن ‪ :‬المجموعات والقوائم داخل ‪DOM‬‬

‫)‪(DOM Collections && Node list‬‬

‫‪ : The HTMLCollection Object‬كائن ‪HTMLCollection‬‬

‫‪ ‬عند استخدام الدالة )(‪ getElementsByTagName‬فإن الدالة تموم بإرجاع كائن ٌسمى‬
‫‪ HTMLCollection‬وهذا الكائن هو عبارة عن لائمة ‪ list‬أو شبه مصفوفة ‪ array‬أو‬
‫(‪ )collection‬من عناصر ‪HTML‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬فى المثال السابك نالحظ أن الدالة )(‪ getElementsByTagName‬تموم بإرجاع مجموعة من‬
‫العناصر التى نوعها >‪ <p‬وتموم بحجزها داخل متغٌر ‪myCollection‬‬
‫‪ٌ ‬مكن الوصول إلى العناصر الموجودة فً المجموعة عن طرٌك رلم الفهرس‪index number‬‬
‫وٌبدأ الفهرس من المٌمة ‪0‬‬

‫ٌمكنن استخدام الخاصٌة ‪ length‬على ‪ HTMLCollection‬وتكون هذه الخاصٌة مفٌدة عندما ترٌد‬
‫التكرار خالل العناصر داخل المجموعة‬
 ‫‪ ‬مثال ‪:‬‬

‫‪ ‬عند الضغط على الزرار ‪ Try it‬سوف ٌتغٌر لون كل عنصر من نوع >‪<p‬‬

‫‪ ‬لد ٌبدو ‪ HTMLCollection‬وكأنه مصفوفة ‪ ، array‬لكنها لٌست كذلن‪ .‬حٌث ٌمكنن عمل‬
‫تكرار ‪ loop‬خالل المائمة ‪ list‬واإلشارة إلى العناصر برلم (مثل المصفوفة)‪ .‬ومع ذلن ‪ ،‬ال ٌمكنن‬
‫استخدام دوال المصفوفات مثل )( ‪ valueOf‬و )( ‪ pop‬و ()‪ push‬مع ‪.HTMLCollection‬‬
 ‫‪ : The NodeList Object‬كائن ‪NodeList‬‬
‫‪ ‬كائن ‪ NodeList‬عبارة عن لائمة ‪( list‬أو ‪ )collection‬من العمد ‪ nodes‬المستخرجة من المستند‬
‫‪ ‬كائن ‪ NodeList‬هو تمرٌبا ً نفس كائن ‪.HTMLCollection‬‬
‫‪ ‬بعض المستعرضات (األلدم) تموم بإرجاع كائن ‪ NodeList‬بدالً من ‪ HTMLCollection‬لبعض‬
‫الدوال مثل )(‪getElementsByClassName‬‬
‫‪ ‬جمٌع المتصفحات تموم بإرجاع كائن ‪ NodeList‬للخاصٌة ‪childNodes‬‬
‫‪ ‬معظم المستعرضات تموم بإرجاع كائن ‪ NodeList‬للدالة )(‪querySelectorAll‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬فى المثال السابك نالحظ أن الدالة )(‪ querySelectorAll‬تموم بإرجاع مجموعة من العناصر‬
‫التى نوعها >‪ <p‬وتموم بحجزها داخل متغٌر ‪myNodelist‬‬
‫‪ٌ ‬مكن الوصول إلى العناصر الموجودة فً المجموعة عن طرٌك رلم الفهرس‪index number‬‬
‫وٌبدأ الفهرس من المٌمة ‪0‬‬

‫ٌمكنن استخدام الخاصٌة ‪ length‬على ‪ NodeList‬وتكون هذه الخاصٌة مفٌدة عندما ترٌد التكرار‬
‫خالل العناصر داخل المجموعة‬
‫لد ٌبدو ‪ NodeList‬وكأنه مصفوفة ‪ ، array‬لكنها لٌست كذلن‪ .‬حٌث ٌمكنن عمل تكرار ‪loop‬‬
‫خالل المائمة ‪ list‬واإلشارة إلى العناصر برلم (مثل المصفوفة)‪ .‬ومع ذلن ‪ ،‬ال ٌمكنن استخدام دوال‬
‫المصفوفات مثل )( ‪ valueOf‬و )( ‪ pop‬و ()‪ push‬مع ‪.NodeList‬‬
 ‫الفرق بٌن الكائن ‪ HTMLCollection‬وبٌن الكائن ‪ NodeList‬؟‬
‫‪ HTMLCollection ‬عبارة عن مجموعة من ‪HTML elements‬‬

‫‪ NodeList ‬عبارة عن مجموعة من ‪document nodes‬‬

‫‪ HTMLCollection ‬و ‪ NodeList‬هما نفس الشًء‪.‬‬

‫‪ ‬كالً من كائن ‪ HTMLCollection‬وكائن ‪ NodeList‬عبارة عن لائمة (تشبه المصفوفة) أو‬

‫مجموعة من الكائنات‪.‬‬

‫‪ ‬كالهما له خاصٌة ‪ length‬التً تحدد عدد العناصر فً المائمة (أو المجموعة)‪.‬‬

‫سا (الفهرس ٌبدأ من المٌمة ‪ ) 0‬للوصول إلى كل عنصر مثل المصفوفة ‪.‬‬
‫‪ٌ ‬وفر كالهما فهر ً‬

‫‪ٌ HTMLCollection ‬مكن الوصول إلى عناصرها حسب ‪ name‬أو ‪ id‬أو ‪index number‬‬

‫‪ NodeList ‬ال ٌمكن الوصول إلى عناصرها إال عن طرٌك ‪ index number‬فمط‬

‫‪ٌ NodeList ‬مكن أن ٌحتوي فمط على ‪ attribute nodes‬و ‪text nodes‬‬
 ‫الدرس التاسع ‪:‬مقدمة فى نموزج كائن المتصفح (المستعرض)‬
‫)‪Introduction to Browser Object Model (HTML BOM‬‬

‫‪ ‬كل صفحة وٌب ‪ web page‬موجودة داخل نافذة المتصفح ‪ٌ browser window‬مكن اعتبارها‬
‫ككائن ‪object‬‬
‫‪ ‬وبعدما شرحنا نموزج كائن المستند ‪ DOM‬فى الجزء الرابع نأتى اآلن إلى شرح نموزج كائن‬
‫المستعرض ‪BOM‬‬
‫‪ٌ ‬تٌح نموذج كائن المستعرض )‪ Browser Object Model (BOM‬التحدث إلى المستعرض‪.‬‬

‫‪ ‬ال توجد معاٌٌر رسمٌة لنموذج كائن المستعرض (‪ً .)BOM‬‬

‫نظرا ألن المتصفحات الحدٌثة لد نفذت‬
‫(تمرٌبًا) نفس األسالٌب والخصائص لتفاعلٌة جافا سكرٌبت ‪ ،‬غالبًا ما ٌشار إلٌها ‪ ،‬كطرق وخصائص‬
‫‪.BOM‬‬

‫‪ ‬هذا الجدول ٌوضح التسلسل الهرمى‬

 ‫‪ : The Window Object ‬كائن النافذة‬
‫‪ : window object‬كائن النافذة مدعوم من لبل جمٌع المتصفحات‪ .‬وٌمثل نافذة المتصفح‬
‫‪browser's window‬‬
‫تصبح جمٌع ‪ JavaScript objects‬والدوال ‪ functions‬والمتغٌرات ‪ variables‬تلمائًٌا أعضا ًءا‬
‫فً كائن النافذة ‪window object‬‬
‫‪ Global variables‬هً ‪ properties‬لكائن النافذة ‪window object‬‬
‫‪ Global functions‬هً ‪ methods‬لكائن النافذة ‪window object‬‬
‫‪( document object‬من ‪ )HTML DOM‬هو ‪ property‬لكائن النافذة‪window object‬‬

‫‪ ‬ولذلن نستنتج مما سبك أن هذا الكود اآلتى ‪:‬‬

‫‪ ‬هو نفس الكود اآلتى ‪:‬‬

‫‪ : Window Size‬حجم النافذة‬

‫‪ ‬هنان خاصٌتٌن لتحدٌد حجم نافذة المتصفح وكالً من الخاصٌتٌن ترجع لٌمة الحجم ب ‪pixels‬‬
‫‪ :window.innerHeight ‬تستخدم هذه الخاصٌة لتحدٌد االرتفاع الداخلً لنافذة المستعرض‬
‫(بالبكسل)‬
‫‪ : window.innerWidth ‬تستخدم هذه الخاصٌة لتحدٌد العرض الداخلً لنافذة المستعرض‬
‫(بالبكسل)‬
‫‪ browser window ‬نافذة المتصفح (‪ )browser viewport‬لٌست تحتوى على أشرطة األدوات‬
‫‪ toolbars‬وأشرطة التمرٌر ‪scrollbars‬‬
‫‪ ‬بالنسبة للمتصفح ‪ٌ IE5 , IE6 , IE7, IE8‬جب استخدام هذه الخصائص‬
 ‫‪ٌ ‬وجد حل عملً ب ‪ٌ( JavaScript‬غطً جمٌع المتصفحات)‪:‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬الناتج ‪:‬‬

‫‪ ‬هذه المٌم لٌست ثابتة وإنما تتغٌر مع تغٌر حجم النافذة (أى عند عمل ‪)resize‬‬
‫‪ٌ ‬عرض المثال السابك لٌم االرتفاع والعرض لنافذة المتصفح ‪( :‬لٌس بما فً ذلن أشرطة األدوات‬
‫‪ toolbars‬وأشرطة التمرٌر ‪)scrollbars‬‬

‫‪ٌ : Other Window Methods‬وجد مجموعة من الدوال التى ٌمكن استخدامها مع‪Window‬‬
‫‪ : open() ‬تستخدم هذه الدالة لفتح نافذة جدٌدة‬
‫‪ : close() ‬تستخدم هذه الدالة لغلك النافذة الحالٌة‬
‫‪ : moveTo() ‬تستخدم هذه الدالة بتحرٌن النافذة الحالً‬
‫‪ : resizeTo() ‬تستخدم هذه الدالة بتغٌٌر حجم النافذة الحالٌة‬
 ‫الدرس العاشر ‪ :‬كائن الشاشة‬
‫(‪)Screen object‬‬

‫‪ : The window.screen Object ‬كائن الشاشة‬

‫‪ٌ ‬حتوي الكائن ‪ window.screen‬على معلومات حول شاشة المستخدم ‪user's screen‬‬
‫‪ٌ ‬مكن كتابته بدون استخدام كلمة ‪ window‬بهذا الشكل ‪screen‬‬

‫‪ٌ ‬حتوى هذه الكائن على مجموعة من الخصائص التالٌة ‪:‬‬

‫‪ : screen.width ‬تستخدم هذه الخاصٌة لتحدٌد عرض شاشة الزائر بالبكسل‬

‫‪ : screen.height ‬تستخدم هذه الخاصٌة لتحدٌد ارتفاع شاشة الزائر بالبكسل‬

‫‪ : screen.availWidth ‬تستخدم هذه الخاصٌة لتحدٌد عرض شاشة الزائر بالبكسل بدون خصائص‬
‫الواجهة ‪ interface features‬مثل شرٌط مهام النافذة ‪.Windows Taskbar‬‬

‫‪ : screen.availHeight ‬تستخدم هذه الخاصٌة لتحدٌد ارتفاع شاشة الزائر بالبكسل بدون‬
‫خصائص الواجهة ‪ interface features‬مثل شرٌط مهام النافذة ‪.Windows Taskbar‬‬

‫‪ : screen.colorDepth ‬تستخدم هذه الخاصٌة لتحدٌد عدد ‪ bits‬المستخدمة لعرض لون واحد‬
‫‪ٌ ‬وجد مجموعة مختلفة من األنظمة المستخدمة فى أجهزة الكمبٌوتر ‪:‬‬
‫‪ ‬تستخدم كافة أجهزة الكمبٌوتر الحدٌثة أجهزة ‪ 24bits‬أو ‪ 32bits‬لدلة األلوان‪:‬‬
‫‪24 bits = 16,777,216 different "True Colors" ‬‬
‫‪32 bits = 4,294,967,296 different "Deep Colors" ‬‬
‫‪ ‬تستخدم أجهزة الكمبٌوتر المدٌمة ‪:16bits‬‬
‫‪16bits = 65,536 different "High Colors" resolution ‬‬
‫‪ ‬تستخدم أجهزة الكمبٌوتر المدٌمة جدًا والهواتف المحمولة المدٌمة ‪:8bits‬‬
‫‪8 bits = 256 different "VGA colors" ‬‬

‫‪ : screen.pixelDepth ‬تستخدم هذه الخاصٌة لتحدٌد عرض عمك الشاشة بالبكسل‬

 ‫‪ ‬مثال ‪:‬‬

‫‪ ‬الناتج ‪:‬‬

‫مالحظة ‪:‬‬
‫لٌم )‪ #rrggbb(rgb‬الموجودة داخل ‪ HTML‬هى عبارة عن "‪ "True Colors‬أى أنها ‪24 bits‬‬
‫‪24 bits = 16,777,216 different "True Colors" ‬‬
‫بالنسبة ألجهزة الكمبٌوتر الحدٌثة ‪ٌ ،‬تساوى كالً من الخاصٌتٌن ‪ Color Depth‬و ‪.Pixel Depth‬‬
 ‫الدرس الحادي عشر ‪ :‬كائن الموقع‬
‫(‪)Location object‬‬
‫‪ : The window.location Object ‬كائن المولع‬
‫‪ٌ ‬مكن استخدام كائن ‪ window.location‬للحصول على عنوان الصفحة الحالً (‪ )URL‬وإعادة‬
‫توجٌه المستعرض إلى صفحة جدٌدة ‪.redirection a page‬‬
‫‪ٌ ‬مكن كتابته بدون استخدام كلمة ‪ window‬بهذا الشكل ‪location‬‬

‫‪ٌ ‬حتوى هذه الكائن على مجموعة من الخصائص التالٌة ‪:‬‬

‫‪ : location.href ‬تستخدم هذه الخاصٌة للحصول على ‪( href‬أو ‪ )URL‬الخاص بالصفحة الحالٌة‬

‫‪ : location.hostname ‬تستخدم هذه الخاصٌة للحصول على اسم المجال ‪domain name‬‬
‫لمضٌف الوٌب ‪web host‬‬

‫‪ : location.pathname ‬تستخدم هذه الخاصٌة للحصول على المسار واسم الصفحة الحالٌة‬

‫‪ : location.protocol ‬تستخدم هذه الخاصٌة للحصول على بروتوكول الوٌب ‪web protocol‬‬
‫المستخدم ( ‪ http:‬أو ‪) https:‬‬

‫‪ :location. port ‬تستخدم هذه الخاصٌة لتحدٌد رلم منفذ مضٌف اإلنترنت (من الصفحة الحالٌة) او‬
‫ما ٌسمى ب ‪the number of the internet host port‬‬

‫‪ : location.assign ‬تستخدم هذه الخاصٌة لتحمٌل مستند جدٌد ‪loads a new document‬‬
 ‫‪ ‬مثال ‪: 1‬‬

‫‪ ‬الناتج ‪:‬‬

‫‪ ‬مثال ‪ : 2‬على الخاصٌة ‪assign‬‬

‫‪ ‬عند الضغط على الزرار ‪ Load new document‬سوف ٌموم بتحمٌل صفحة جدٌدة التى لها‬
‫هذا المسار أو ‪ url‬التالى ‪https://www.w3schools.com :‬‬
 ‫الدرس الثانً عشر ‪ :‬كائن التارٌخ‬
‫(‪)History object‬‬
‫‪ : The window.history Object ‬كائن التارٌخ‬
‫‪ٌ ‬حتوي الكائن ‪ window.history‬على محفوظات المستعرضات ‪browsers history‬‬
‫‪ٌ ‬مكن كتابته بدون استخدام كلمة ‪ window‬بهذا الشكل ‪history‬‬
‫‪ ‬لحماٌة خصوصٌة المستخدمٌن ‪ ، users privacy‬توجد لٌود ‪ limitations‬على كٌفٌة وصول‬
‫‪ JavaScript‬إلى هذا الكائن‪.‬‬

‫‪ٌ ‬حتوى هذه الكائن على بعض الدوال ‪:‬‬

‫‪ : history.back() ‬تستخدم هذه الدالة لتحمٌل عنوان ‪ URL‬السابك الموجود فً لائمة ‪، history‬‬
‫وٌعتبر مثل عملٌة النمر للخلف ‪ clicking back‬فً المتصفح‬
‫‪ : history.forward() ‬تستخدم هذه الدالة لتحمٌل عنوان ‪ URL‬التالى الموجود فً لائمة ‪history‬‬
‫‪ ،‬وٌعتبر مثل عملٌة النمر لألمام ‪ clicking forward‬فً المتصفح‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬الناتج ‪:‬‬
 ‫الدرس الثالث عشر ‪ :‬كائن ال ُمستعرض‬
‫(‪)Navigator object‬‬
‫‪ : The window.navigator Object ‬كائن المستعرض‬
‫‪ٌ ‬حتوي كائن ‪ window.navigator‬على معلومات حول متصفح الزائر ‪visitor's browser‬‬
‫‪ٌ ‬مكن كتابته بدون استخدام كلمة ‪ window‬بهذا الشكل ‪navigator‬‬

‫‪ٌ ‬حتوى هذه الكائن على مجموعة من الخصائص التالٌة ‪:‬‬

‫‪ : navigator.appName ‬تستخدم هذه الخاصٌة للحصول على ‪( href‬أو ‪ )URL‬الخاص‬
‫بالصفحة الحالٌة‬

‫‪ :navigator. appCodeName ‬تستخدم هذه الخاصٌة للحصول على اسم التطبٌك‬

‫‪ application name‬المستعرض‬

‫‪ :navigator. appVersion ‬تستخدم هذه الخاصٌة للحصول على معلومات اإلصدار ‪version‬‬
‫حول المستعرض‬

‫‪ :navigator. platform ‬تستخدم لتحدٌد النظام األساسً للمستعرض ‪ browser platform‬أو‬

‫نظام التشغٌل (‪)operating system‬‬

‫‪ :navigator. product ‬تستخدم هذه الخاصٌة لتحدٌد اسم المنتج ‪ product name‬لمحرن‬
‫المستعرض ‪browser engine‬‬

‫‪ :navigator. language ‬تستخدم هذه الخاصٌة لتحدٌد لغة المتصفح ‪browser's language‬‬

‫‪ :navigator. userAgent ‬تستخدم هذه الخاصٌة لتحدٌد عنوان عامل المستخدم او ما ٌسمى ب‬
‫‪ user-agent header‬المرسل من لبل المستعرض ‪ browser‬إلى الخادم ‪server‬‬

‫‪ :navigator. online ‬تستخدم هذه الخاصٌة تحدٌد اتصال المتصفح باإلنترنت ‪online‬‬
‫‪ ‬بترجع ‪ : true‬فى حالة اتصال المتصفح باإلنترنت ‪browser is online‬‬
‫‪ ‬بترجع ‪ : false‬فى حالة عدم اتصال المتصفح باإلنترنت ‪browser is offline‬‬
 ‫‪ :navigator. cookieEnabled ‬تستخدم هذه الخاصٌة لتحدٌد إذا تم تمكٌن ‪ cookie‬أو ال‬
‫‪ ‬بترجع ‪ : true‬فى حالة أنه تم تمكٌن ملفات االرتباط ‪cookies are enabled‬‬
‫‪ ‬بترجع ‪ : false‬فى حالة أنه لم ٌتم تمكٌن ملفات االرتباط ‪cookies are not enabled‬‬

‫‪ :navigator. javaEnabled() ‬تستخدم هذه الدالة لتحدٌد إذا تم تمكٌن ‪ java‬أو ال‬
‫‪ ‬بترجع ‪ : true‬فى حالة أنه تم تمكٌن أو تفعٌل ‪java‬‬
‫‪ ‬بترجع ‪ : false‬فى حالة أنه لم ٌتم تمكٌن أو لم ٌتم تفعٌل ‪java‬‬

‫مالحظة مهمة ‪:‬‬

‫‪ ‬غالبًا ما تكون المعلومات الواردة من كائن ‪ navigator‬مضللة ‪ ،‬وٌجب عدم استخدامها للكشف‬
‫عن إصدارات المستعرض بسبب‪:‬‬
‫‪ٌ ‬مكن للمتصفحات المختلفة استخدام نفس االسم‬
‫‪ٌ ‬مكن تغٌٌر بٌانات المتصفح من لبل مالن المتصفح‬
‫‪ ‬تتعامل بعض المتصفحات بشكل خاطئ مع نفسها لتجاوز اختبارات المولع ‪bypass site tests‬‬
‫‪ ‬ال ٌمكن للمتصفحات اإلبالغ عن أنظمة التشغٌل الجدٌدة ‪ ،‬التً تم إصدارها فً ولت الحك من‬
‫المتصفح‬
 ‫‪ ‬مثال ‪:‬‬

‫‪ ‬الناتج ‪:‬‬
 ‫الدرس الرابع عشر ‪ :‬المربعات ال ُمنبثقة ‪Dialog‬‬

‫(‪)Popup Boxes‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على كٌفٌة استخدام المربع المحورى وسوف نتعرف على انواع مربعات‬
‫الحوار فى لغة ‪javascript‬‬
‫تدعم لغة ‪ JavaScript‬ثالثة أنواع مهمة من مربعات الحوار‪ٌ .‬مكن استخدام مربعات الحوار هذه‬
‫لعمل رسالة تنبٌه ‪ alert‬أو الحصول على تأكٌد ‪ confirmation‬على أي إدخال أو الحصول على‬
‫نوع من المدخالت ‪ inputs‬من المستخدمٌن‪.‬‬

‫النوع األول ‪: alert Dialog Box :‬‬

‫ٌتم استخدام مربع حوار التنبٌه فً الغالب إلعطاء رسالة تحذٌر للمستخدمٌن وٌمكن استخدامه فى‬
‫الظهار رسالة ودٌة (غٌر تحذٌرٌة)‬
‫ٌحتوى هذا المربع على ‪ button‬واحد ٌسمى "‪"Ok‬‬

‫‪ ‬مثال ‪ : 1‬من على مولع ‪tutorialspoint‬‬

‫‪ : alert("string") ‬هذه الدالة تظهر رسالة وبتأخذ لٌمة نصٌة ‪string‬‬

 ‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند الضغط على "‪ "Click Me‬سوف ٌظهر رسالة تحذٌرٌة كمربع محورى ‪ dialog box‬هذا‬
‫المربع مكتوب بداخله الرسالة التالٌة " !‪"This is a warning message‬‬

‫‪ ‬عند الضغط على الزرار "‪ " Ok‬سوف تظهر النتٌجة التالٌة‬
 ‫النوع الثانى ‪: confirmation Dialog Box :‬‬
‫ٌتم استخدام مربع حوار التأكٌد فً الغالب للحصول على موافمة المستخدم على أي خٌار‬
‫وٌحتوى هذا المربع على ‪2 buttons‬‬
‫‪ ‬األول ‪ Ok :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ confirm‬تموم‬
‫بإرجاع لٌمة ‪.true‬‬
‫‪ ‬الثانً ‪ Cancel :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ confirm‬تموم‬
‫بإرجاع لٌمة ‪.false‬‬

‫‪ ‬مثال ‪ : 2‬من على مولع ‪tutorialspoint‬‬

‫‪ : confirm("string") ‬هذه الدالة تظهر رسالة تأكٌد وبتأخذ لٌمة نصٌة ‪string‬‬
 ‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند الضغط على "‪ "Click Me‬سوف ٌظهر رسالة تأكٌد كمربع محورى ‪ dialog box‬هذا المربع‬
‫مكتوب بداخله الرسالة التالٌة " ? ‪" Do you want to continue‬‬

‫‪ ‬عند الضغط على الزرار "‪ " Ok‬سوف تظهر النتٌجة التالٌة‬

‫‪ ‬عند الضغط على الزرار "‪ "Cancel‬سوف تظهر النتٌجة التالٌة‬

 ‫النوع الثالث ‪: Prompt Dialog Box :‬‬
‫ٌتم استخدام مربع حوار المنبثك فً الغالب للحصول على ادخال ‪ input‬من المستخد وبالتالً ‪ ،‬فإنه‬
‫ٌمكنن من التفاعل مع المستخدم‪ٌ .‬حتاج المستخدم الدخال لٌمة فى الحمل ثم انمر فوق موافك‬
‫وٌحتوى هذا المربع على ‪2 buttons‬‬
‫‪ ‬األول ‪ Ok :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ prompt‬تموم بإرجاع‬
‫المٌمة التً تم إدخالها‬
‫‪ ‬الثانً ‪ Cancel :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ prompt‬تموم‬
‫بإرجاع لٌمة ‪. null‬‬

‫‪ ‬مثال ‪ : 3‬من على مولع ‪tutorialspoint‬‬

‫‪ : prompt("string") ‬هذه الدالة تأخذ ‪ input‬من المستخدم وبتأخذ معاملٌن‬

‫‪ ‬األول ‪ label :‬وهى التسمٌة التً ترٌد عرضها فً مربع النص‬
‫‪ ‬الثانً ‪ default string :‬وهى لٌمة ‪ string‬االفتراضٌة التى نعرضها فً مربع النص‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند الضغط على "‪ "Click Me‬سوف ٌظهر رسالة منبثمة كمربع محورى ‪ dialog box‬هذا المربع‬
‫مكتوب بداخله لٌمٌتن األول ‪ :‬اسم الرسالة وهى " ‪ " Enter your name :‬والثانى ‪ :‬لٌمة نصٌة‬
‫افتراضٌة داخل ‪ field‬وهى " ‪" your name here‬‬

‫‪ ‬عند ادخال لٌمة نصٌة مثال "‪ "Mahmoud‬ولمنا بالضغط على الزرار "‪ " Ok‬سوف تظهر‬
‫النتٌجة التالٌة‬

‫‪ ‬عند ادخال لٌمة نصٌة مثال "‪ "Mahmoud‬ولمنا بالضغط على الزرار "‪ " Cancel‬سوف تظهر‬
‫النتٌجة التالٌة‬

‫هذه الدوال السابمة )(‪ alert‬و )(‪ prompt‬و )(‪ confirm‬هى دوال تنتمى للكائن ‪ window‬لذلن‬
‫ٌمكن كتابتها بهذا الشكل ‪:‬‬
‫‪window.alert() ‬‬
‫‪window.prompt() ‬‬
‫‪window.confirm() ‬‬
 ‫الدرس الخامس عشر ‪ :‬األحداث المرتبطة بالوقت‬
‫(‪)Timing Events‬‬
‫‪ٌ ‬مكن تنفٌذ ‪ JavaScript‬فً الفترات الزمنٌة ‪ time-intervals‬وهذا ما ٌسمى أحداث التولٌت‬
‫‪ timing events‬أى أحداث ٌتم تنفٌذها مع مرور الولت أو عند ولت معٌن أو عند فترات زمنٌة‬

‫‪ٌ ‬سمح كائن ‪ window‬بتنفٌذ التعلٌمات البرمجٌة فً فترات زمنٌة محددة‪.‬و تسمى هذه الفترات الزمنٌة‬
‫أحداث التولٌت ‪timing events‬‬

‫‪ ‬هنان دالتان رئٌسٌتان تستخدم مع ‪ JavaScript‬لتنفٌذ التعلٌمات البرمجٌة فى فترات زمنٌة محددة ‪:‬‬
‫‪: window.setTimeout(function, milliseconds) -1‬‬
‫‪ ‬تستخدم هذه الدالة لتنفٌذ ‪ ، function‬بعد فترة زمنٌة ( انتظار عدد محدد من المللً ثانٌة )‪.‬‬
‫‪ ‬إلٌماف تنفٌذ هذه الدالة نستخدم الدالة )‪ window.clearTimeout(variable‬وهذا المتغٌر‬
‫‪ variable‬هو لٌمة المتغٌر الذي تم إرجاعه من الدالة )(‪window.setTimeout‬‬

‫‪: window.setInterval(function, milliseconds) -2‬‬

‫‪ ‬تستخدم هذه الدالة لتنفٌذ ‪ function‬بشكل مستمر (تكرر الدالة كل عدد محدد من المللً ثانٌة )‬
‫‪ ‬إلٌماف تنفٌذ هذه الدالة نستخدم الدالة )‪ window.clearInterval(variable‬وهذا المتغٌر‬
‫‪ variable‬هو لٌمة المتغٌر الذي تم إرجاعه من الدالة )(‪window.setInterval‬‬

‫ٌمكن كتابة كالً من ‪ 4‬دوال السابمة بدون كلمة ‪window‬‬

‫ٌعتبر كالً من )(‪ setTimeout‬و )(‪ setInterval‬دالتان لـ ‪HTML DOM Window object‬‬
 ‫‪ ‬مثال ‪: 1‬‬

‫‪ ‬الناتج ‪ :‬عند الضغط على ‪ Try it‬سوف ٌتم تنفٌذ الدالة ‪ myFunction‬بعد مرور ‪ 3‬ثوانً‬

‫‪ ‬وعند الضغط على ‪ Stop it‬سوف ٌتم اٌماف تنفٌذ الدالة‬

‫‪ ‬مثال ‪: 2‬‬

‫‪ ‬الناتج ‪ :‬سوف ٌتم تنفٌذ الدالة ‪ myTimer‬بعد كل مرور ‪ 1‬ثانٌة‬

‫‪ ‬وعند الضغط على ‪ Stop time‬سوف ٌتم اٌماف تنفٌذ الدالة‬
 ‫الدرس السادس عشر ‪ :‬ملفات التعرٌف أو ملفات االرتباط‬
‫(‪)Cookies‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على ملفات تعرٌف االرتباط ‪cookies‬‬
‫‪ : Cookies ‬معناها ملفات تعرٌف اإلرتباط أو سجل التتبع أو سجل التصفح أو الكوكٌز وهً‬
‫ملفات حجمها ٌماس بالـ ‪ٌ ،Bit‬تم تخزٌنها بشكل تلمائً فً المتصفح‪ ،‬وبعض الموالع التً تزورها‬
‫للمرة األولى تنبهن من خالل شرٌط أعلى أو أسفل المولع بالموافمة وجود هذه الملفات فً جهازن‬
‫لتسهٌل تصفحن للمولع وهى ملفات مجرد برمجٌات نصٌة ال تنفٌذٌة‬
‫ً‬
‫بروتوكوال عدٌم‬ ‫‪ ‬تستخدم متصفحات الوٌب والخوادم بروتوكول ‪ HTTP‬للتواصل ‪ ،‬وٌعتبر ‪HTTP‬‬
‫الجنسٌة ‪ . stateless‬ولكن بالنسبة لمولع تجاري على الوٌب ‪ٌ ،‬لزم الحفاظ على معلومات الجلسة‬
‫‪ session information‬بٌن الصفحات المختلفة للمولع ‪ .‬على سبٌل المثال ‪ٌ ،‬نتهً المستخدم من‬
‫التسجٌل ‪ registration‬بعد إكمال العدٌد من الصفحات‪ .‬ولكن اذا اردنا الحفاظ على معلومات‬
‫جلسة المستخدمٌن عبر جمٌع صفحات الوٌب فماذا نفعل ‪ ،‬هنا كانت اهمٌة ‪ cookies‬فهى تموم‬
‫بالحفاظ على معلومات خاصة بالمستخدم وٌتم تخزٌنها على الجهاز الشخصً‬
‫‪ٌ ‬عد استخدام ملفات تعرٌف االرتباط الطرٌمة األكثر فاعلٌة فً تذكر وتتبع التفضٌالت والمشترٌات‬
‫والعموالت والمعلومات األخرى المطلوبة لتحسٌن تجربة الزائر أو إحصائٌات المولع‪.‬‬

‫كٌف تعمل ملفات التتبع ‪cookie‬‬

‫‪ٌ ‬رسل الخادم ‪ server‬بعض البٌانات ‪ data‬إلى متصفح الزائر ‪ visitor‬فً شكل ملف تعرٌف‬
‫ارتباط ‪ .cookie‬لد ٌمبل المتصفح ‪ browser‬ملف تعرٌف االرتباط‪ .‬إذا تم لبول هذه الملفات ‪،‬‬
‫فانه ٌتم تخزٌن هذه ‪ cookie‬كسجل نص عادي ‪ plain text record‬على محرن األلراص‬
‫الثابت ‪ hard drive‬الخاص بالزائر‪.‬‬
‫‪ ‬عندما ٌصل الزائر إلى صفحة أخرى على مولعن ‪ٌ ،‬رسل المتصفح ملف تعرٌف االرتباط نفسه‬
‫إلى الخادم السترداده‪ .‬بمجرد استرداده ‪ٌ ،‬عرف الخادم الخاص بن ‪ٌ /‬تذكر ما تم تخزٌنه فً ولت‬
‫سابك فٌسهٌل علٌه تذكر المعلومات الخاصة بن‬

‫‪ ‬تم تصمٌم ‪ cookie‬فً األصل لبرامج ‪ٌ .CGI‬تم نمل البٌانات الموجودة فً داخل ‪ cookie‬تلمائًٌا‬
‫بٌن متصفح الوٌب وخادم الوٌب ‪ ،‬بحٌث ٌمكن ‪ CGI scripts‬الموجودة على الخادم لراءة وكتابة‬
‫لٌم ‪ cookie‬المخزنة على العمٌل‪.‬‬
‫ضا معالجة ملفات تعرٌف االرتباط باستخدام خاصٌة ‪cookie property‬‬ ‫‪ٌ ‬مكن لـ ‪ JavaScript‬أٌ ً‬
‫الموجودة بعنصر المستند ‪ .Document object‬تستطٌع ‪ JavaScript‬لراءة ملفات تعرٌف‬
‫االرتباط التً تنطبك على صفحة الوٌب الحالٌة وإنشائها وتعدٌلها وحذفها‪.‬‬
 ‫‪ ‬تموم ملفات التتبع ‪ cookie‬بتسجٌل ‪ 5‬حمول متغٌرة الطول ‪variable-length fields‬‬
‫‪ٌ : Name=Value -1‬تم تعٌٌن ‪ set‬ملفات تعرٌف االرتباط واستردادها ‪ retrieve‬فً شكل‬
‫أزواج لٌم مفتاحٌة ‪key-value pairs‬‬

‫‪ : Expires -2‬معناها انتهاء الصالحٌة ومن خاللها ٌمكن تعٌٌن تارٌخ انتهاء صالحٌة ملف تعرٌف‬
‫غا ‪ ، blank‬فستنتهً صالحٌة ملف تعرٌف‬ ‫االرتباط الذى سوف ٌنتهى فٌه‪ .‬وإذا كان هذا فار ً‬
‫االرتباط عند مغادرة الزائر المتصفح‪.‬‬

‫‪ : Domain -3‬معناها المجال ومن خاللها ٌتم تحدٌد اسم المجال الخاص بمولعن‪.‬‬

‫‪ : Path -4‬معناها المسار ومن خاللها ٌتم تحدٌد المسار إلى ‪ directory‬أو صفحة الوٌب التً‬
‫تحدد ملف تعرٌف االرتباط‪.‬و لد ٌكون هذا فار ً‬
‫غا ‪ blank‬إذا كنت ترٌد استرداد ملف تعرٌف‬
‫االرتباط من أي دلٌل أو صفحة‪.‬‬

‫‪ : Secure -5‬معناها آمن فإذا كان هذا الحمل ٌحتوي على كلمة "‪ ، "secure‬فٌمكن استرداد ملف‬
‫تعرٌف االرتباط فمط من خالل خادم آمن ‪ . secure server‬وإذا كان هذا الحمل فار ً‬
‫غا ‪ ،‬فال‬
‫ٌوجد مثل هذا المٌد‪.‬‬

‫‪ : Storing Cookies‬تخزٌن ملفات تعرٌف االرتباط‬

‫إن أبسط طرٌمة إلنشاء ‪ Cookies‬هً تعٌٌن لٌم ‪ string‬إلى الكائن ‪ document.cookie‬كما ٌتظهر‬
‫فى الكود التالى ‪:‬‬

‫‪ : expires ‬هذه الخاصٌة اختٌارٌة‪ .‬فإذا لدمت بتعٌٌن بتارٌخ أو ولت صالح لهذه الخاصٌة ‪،‬‬
‫فحٌنئذ سوف تنتهً صالحٌة ‪ cookie‬فً التارٌخ أو الولت الذى تم تعٌٌنه ‪ ،‬وبعد ذلن لن ٌتم‬
‫الوصول إلى لٌمة ‪. cookie‬‬

‫‪ ‬مالحظة ‪ -‬لد ال تتضمن لٌم ‪ cookie‬الفاصالت المنموطة ‪ semicolons‬أو الفواصل ‪ commas‬أو‬

‫المسافات ‪ . whitespace‬لذلن ربما تستخدم دالة )(‪ escape‬لتشفٌر ‪ encode‬المٌم لبل تخزٌنها‬
‫ضا استخدام الدالة )(‪ unescape‬الممابلة للدالة‬
‫داخل‪ .‬إذا لمت باستخدام هذه الدالة فٌجب علٌن أٌ ً‬
‫)(‪ escape‬عند لراءة لٌمة ‪. cookie‬‬
 ‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند ادخال لٌمة سوف ٌظهر لنا النتٌجة كاآلتى ‪:‬‬

‫‪ ‬عند عدم ادخال لٌمة سوف ٌظهر لنا هذه الرسالة‬

‫‪ ‬اآلن ٌحتوي جهازن على ‪ٌ cookie‬سمى ‪ٌ . name‬مكنن تعٌٌن ‪ cookies‬متعددة باستخدام أزواج‬
‫‪ key=value‬وٌفصل بٌنهم بفواصل ‪comma‬‬
‫‪ : Reading Cookies‬لراءة ملفات تعرٌف االرتباط‬
‫إن أبسط طرٌمة لمراءة ‪ Cookies‬هً عن طرٌك الكائن ‪ document.cookie‬ألن لٌمة هذا الكائن‬
‫هً عبارة عن ‪ cookie‬لذلن ٌمكنن استخدام هذه ‪ string‬عندما ترٌد الوصول إلى ملف تعرٌف‬
‫االرتباط‪ .‬تحتفظ ‪ string‬الخاصة ب ‪ document.cookie‬بمائمة من أزواج ‪name = value‬‬
‫مفصولة بفواصل منموطة ‪ ،‬حٌث ٌكون ‪ name‬هو اسم ‪ cookie‬وٌكون ‪ value‬هو لٌمة ‪string‬‬
‫الخاصة بها‪.‬‬
‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬تستخدم الدالة )(‪ split‬لكسر ‪ string‬إلى ‪ key‬و ‪value‬‬

‫‪ ‬تستخدم الخاصٌة ‪ length‬لتحدٌد طول المصفوفة ‪array‬‬
 ‫‪ : Setting Cookies Expiry Date‬تحدٌد تارٌخ انتهاء صالحٌة ‪cookies‬‬
‫ٌمكنن إطالة تارٌخ صالحٌة ‪ cookie‬إلى ما بعد جلسة المتصفح الحالٌة عن طرٌك تعٌٌن تارٌخ انتهاء‬
‫الصالحٌة وحفظ تارٌخ انتهاء الصالحٌة داخل ‪ٌ .cookie‬مكن المٌام بذلن عن طرٌك تعٌٌن التارٌخ‬
‫والولت داخل الخاصٌة " ‪" expires‬‬
‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬تستخدم الدالة )(‪ setMonth‬لتعٌٌن لٌمة الشهر للتارٌخ‬

‫‪ ‬تستخدم الدالة )(‪ getMonth‬الٌجاد لٌمة الشهر للتارٌخ‬
‫‪ ‬تستخدم الدالة )(‪ now.toUTCString‬لتعٌٌن لٌمة الشهر بالنظام العالمى ‪UTC‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند ادخال لٌمة "‪ "mahmoud‬سوف ٌظهر لنا النتٌجة كاآلتى ‪:‬‬
 ‫‪ : Deleting a Cookie‬تحدٌد تارٌخ انتهاء صالحٌة ‪cookies‬‬
‫فً بعض األحٌان ‪ ،‬ستحتاج إلى حذف ‪ cookie‬ال ترجع لنا أى لٌمة ‪،‬وٌتم ذلن عن طرٌك تعٌٌن ولت‬
‫ماضً للخاصٌة "‪"expires‬‬
‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند ادخال لٌمة "‪ "mahmoud‬سوف ٌظهر لنا النتٌجة كاآلتى ‪:‬‬
 ‫اﻟﺟزء اﻟﺛﺎﻧﻲ‬
‫‪PHP‬‬
‫المحتويات‬
‫الصفحة‬ ‫الموضوع‬
‫‪١‬‬ ‫تمھيد‬

‫‪٨‬‬ ‫أساسيات ‪PHP‬‬

‫‪١٥‬‬ ‫التعامل مع المتغيرات و الثوابت‬

‫‪٢٤‬‬ ‫التحكم في سير البرنامج‪Controlling Program Flow‬‬

‫‪٣٤‬‬ ‫التعامل مع المصفوفات ‪Arrays‬‬

‫‪٤٤‬‬ ‫الدوال في ‪Functions in, PHP،‬‬

‫‪٥٤‬‬ ‫التعامل مع النماذج ‪Dealing with HTML forms‬‬

‫‪٦٨‬‬ ‫التحقق من بيانات النماذج ‪Validating form data،‬‬

‫‪٧٨‬‬ ‫العمل مع ‪ Cookies‬و ‪Sessions‬‬

‫‪٨٤‬‬ ‫التعامل مع قواعد البيانات في ‪PHP‬‬

 ‫‪١‬‬ ‫الفصل األول ‪ :‬تمھيد‬
‫ھذا الفصل يغطي‪:‬‬

‫تقديم للغة ‪PHP‬‬ ‫
‬

‫متطلبات التركيب‬ ‫
‬
‫تجھيز بيئة العمل‬ ‫
‬

‫ما ھي ‪PHP‬‬
‫‪ ) PHP‬ترمز إلى ‪ ( PHP:Hypertext Preprocessor‬عبارة عن لغة برمجة مفتوحة المصدر تُستخدم بشكل‬
‫واسع ألغراض متعددة ‪ ،‬و صُممت خصيصا لتطوير مواقع إنترنت تفاعلية‪ .‬و تختلف ‪ PHP‬عن ‪ JavaScript‬في‬
‫أن الشفرة البرمجية يتم تنفيذھا على الخادم ‪ web server‬و من ثم يُرسل ناتج التنفيذ على ھيئة ‪ HTML‬للمستخدم‪.‬‬

‫يتم طلب صفحة ‪PHP‬‬ ‫‪Web Server‬‬

‫يأتي الرد على ھيئة ‪HTML‬‬

‫يقوم محرك الشفرة بتنفيذ‬

‫ملف ‪ PHP‬و من ثم‬
‫يقوم بإرجاع الناتج‬

‫استعالم ‪SQL‬‬ ‫‪Script Engine‬‬

‫‪Database‬‬ ‫ناتج تنفيذ االستعالم‬

‫ماذا يمكنھا أن تعمل‬

‫يمكن أن تُستخدم ‪ PHP‬لعمل ما يلي‪:‬‬

‫‪ .١‬إنشاء تطبيقات جھة خادم ‪ ، server-side application‬و ھو الھدف األساسي من ‪. PHP‬‬
‫‪ .٢‬إنشاء برامج تعمل على موجه األوامر ‪ command line prompt‬بدون الحاجة لمتصفح إنترنت أو خادم‬
‫ويب‪.‬‬
‫‪ .٣‬إنشاء تطبيقات سطح مكتب ‪ desktop applications‬تحتوي على واجھة مستخدم ‪graphical user‬‬
‫‪.interface‬‬

‫ما ھي مميزاتھا‬
‫تتميز ‪ PHP‬بعدد من المزايا منھا‪:‬‬
‫‪ .١‬يمكن تنفيذھا على العديد من أنظمة التشغيل منھا‬
‫أ‪Microsoft Windows -‬‬
‫ب‪Linux -‬‬
‫ت‪Unix -‬‬
‫ث‪Mac OS X -‬‬
 ‫‪٢‬‬ ‫الفصل األول‪ :‬تمھيد‬
‫تدعم العديد من خوادم الويب كـ ‪ Apache‬و ‪.IIS‬‬ ‫‪.٢‬‬
‫تدعم العديد من أنظمة قواعد البيانات كـ‬ ‫‪.٣‬‬
‫أ‪Oracle -‬‬
‫ب‪MySql -‬‬
‫ت‪SQL Server -‬‬
‫ث‪Microsoft Access -‬‬
‫ج‪Postgre SQL -‬‬
‫تدعم البرمجة الكينونة ‪ object oriented programming‬والبرمجة االجرائية ‪procedural-‬‬ ‫‪.٤‬‬
‫‪ programming‬و يمكن الخلط بينھما‪.‬‬
‫ال تدعم ‪ PHP‬عرض البيانات على ھيئة ‪ HTML‬فقط بل يمكن عرض البيانات على ھيئة صورة ‪PDF ،‬‬ ‫‪.٥‬‬
‫أو حتى اخراج البيانات على ھيئة ملفات فالش‪.‬‬

‫متطلبات ‪PHP‬‬

‫قبل أن نستطيع تنفيذ ملفات ‪ PHP‬سنحتاج إلى خادم ‪ server‬و ذلك ألن ‪ PHP‬من لغات برمجة الخادم ‪server side‬‬
‫‪. scripting‬‬

‫لغات البرمجة النصية ‪ : Scripting Languages‬يقصد بھا لغات البرمجة عالية المستوى و التي يتم‬
‫تفسيرھا عن طريق برنامج آخر وقت التنفيذ‪ Run Time‬بدال من عملية الترجمة و التي تتم بواسطة معالج‬
‫الكمبيوتر كما ھو الحال في لغات برمجة كـ ‪ C‬و ‪ .C++‬من أمثلة ھذا النوع ‪. Javascript,PHP,ASP,JSP,Perl‬‬

‫خادم ويب االباتشي )‪(Apache Web Server‬‬

‫االباتشي ‪ Apache‬عبارة عن خادم ويب وظيفته األساسية استقبال الطلبات ‪ Http Request‬و تسليمھا إلى محرك‬
‫الشفرة ‪ Script Engine‬و من ثم الحقا يقوم ‪ Apache‬باستالم الرد ‪ Http Response‬من محرك الشفرة و‬
‫تسليمھا الى مرسل الطلب على ھيئة ‪ .HTML‬وقد صمم االباتشي ليعمل مع نظام التشغيل يونكس ‪ . Unix‬الحقا تم‬
‫تھيئته للعمل مع نظام التشغيل ويندوز ‪ Windows‬وبعض أنظمة التشغيل الخاصة بالشبكات‪.‬‬
‫و يمتاز خادم األباتشي بمجموعة المزايا و اإلمكانيات منھا‪:‬‬
‫
إمكانية عمل صفحات خطأ مخصصة ‪.Customized error pages‬‬
‫
إمكانية إخفاء عناوين االنترنت ‪.URL‬‬
‫
سجالت األخطاء و االستخدام بأكثر من ھيئة‪.‬‬
‫و يمكن الحصول على نسخة من البرنامج من خالل زيارة موقع فريق عمل االباتشي التالي‪:‬‬
‫‪. http://httpd.apache.org/download.cgi‬‬

‫نظام قواعد البيانات ‪MySql‬‬

‫‪ MySql‬عبارة عن نظام قواعد بيانات مفتوح المصدر‪ .‬و تصنف ‪ MySql‬على انھا من أنظمة إدارة قواعد البيانات‬
‫صممت للعمل مع االستعالمات المعقدة و األحمال الثقيلة‪ .‬كما تتيح إمكانية ربط عدد كبير من‬ ‫العالئقية ‪ُ RDBMS‬‬
‫الجداول ببعضھا البعض للوصول إلى أعلى قدر من الكفاءة و السرعة‪.‬‬
‫أخيرا يمكن تحميل نسخة من البرنامج من خالل الرابط التالي‪:‬‬
‫‪. /http://dev.mysql.com/downloads‬‬
 ‫‪٣‬‬ ‫الفصل األول ‪ :‬تمھيد‬

‫برنامج ‪XAMMP‬‬

‫الكثيرون يعرفون أن عملية تركيب خادم ويب ‪ Apache‬و تھيئته للعمل مع ‪ PHP‬و ‪ MySql‬ليست بالعملية السھلة‬
‫و دائما ما تستھلك وقت و جھد للتوفيق بينھا‪ .‬لذلك يأتي دور برنامج ‪ XAMMP‬و الذي جعل من عملية التركيب تتم‬
‫بشكل سھل و سريع جدا ‪ .‬يمكن تحميل نسخة من البرنامج من خالل الرابط التالي‪:‬‬
‫‪. http://www.apachefriends.org/en/xampp.html‬‬

‫تحميل ‪XAMMP‬‬

‫قبل عملية التركيب سنقوم بتحميل البرنامج من خالل الخطوات التالية‪:‬‬

‫‪ .١‬قم بالتوجه إلى الصفحة التالية‪. http://www.apachefriends.org/en/xampp.html :‬‬
‫‪ .٢‬أسفل الصفحة قم باختيار إصدارة البرنامج المتوافقة مع نظام التشغيل لديك‪ .‬في حالتنا سنقوم باختيار النسخة‬
‫المتوافقة مع نظام التشغيل ‪ Windows‬لذلك سنقوم بالنقر على الرابط ‪:‬‬
‫‪. XAMMP for Windows‬‬
‫‪ .٣‬من الصفحة الجديدة نسحب شريط التمرير إلى منتصف الصفحة وصوال عند القسم تحميل )‪(Download‬‬
‫‪ ،‬بعد ذلك قم بالنقر على ‪. Installer‬‬
‫‪ .٤‬أخيرا ستظھر نافذة تطالب بتحديد مكان لحفظ الملف ‪ ،‬قم باختيار سطح المكتب أو المستندات لحفظ الملف‪.‬‬

‫تركيب ‪XAMMP‬‬

‫بعد االنتھاء من تحميل برنامج ‪ XAMMP‬سنبدأ اآلن في خطوة تركيب البرنامج و الذي سيقوم بتھيئة ‪، Apache‬‬
‫‪ PHP‬و ‪ MySql‬للعمل معا‪ .‬خطوات التركيب‪:‬‬
‫‪ .١‬انقر بزر الفأرة االيسر مرتين على ايقونة البرنامج‪.‬‬
‫‪ .٢‬أول نافذة ھي نافذة تحديد اللغة و التي من خاللھا سنختار الخيار االفتراضي ‪ English‬و من ثم نضغط‬
‫‪ .Next‬و من النافذة التالية نضغط على ‪ Next‬أيضا‪.‬‬
‫‪ .٣‬في النافذة التالية نحدد مكان مسار البرنامج ) و يفضل ‪.(C:\xampp‬‬
 ‫‪٤‬‬ ‫الفصل األول ‪ :‬تمھيد‬

‫‪ .٤‬النافذة التالية من خاللھا نحدد ما إذا كنا نرغب في تركيب ‪ Apache‬و ‪ Mysql‬كخدمة ‪ Service‬من‬
‫خدمات ويندوز‪ ،‬بمعنى أنھما سيعمالن بمجرد تشغيل نظام التشغيل‪.‬‬

‫‪ .٥‬بعد ذلك سيقوم البرنامج باستخراج و تركيب الملفات المطلوبة‪ .‬و من ثم عند االنتھاء ستظھر النافذة التالية و‬
‫التي ستخبرنا بانتھاء عملية التركيب بنجاح و نستطيع تشغيل لوحة تحكم البرنامج بالضغط على زر ‪.Yes‬‬
 ‫‪٥‬‬ ‫الفصل األول ‪ :‬تمھيد‬

‫‪ .٦‬بعد االنتھاء من تركيب ‪ XAMMP‬سنقوم بفتح متصفح االنترنت و كتابة العنوان التالي‪:‬‬
‫‪ . http://localhost‬عندھا ستظھر صفحة إختيار اللغة لتطبيق ‪ XAMPP‬و التي من خاللھا سنقوم‬
‫بإختيار اللغة االنجليزية ‪ English‬لكي ننتقل الى الصفحة الرئيسية لـ ‪.XAMMP‬‬
 ‫‪٦‬‬ ‫الفصل األول ‪ :‬تمھيد‬

‫أين سيتم حفظ ملفات ‪PHP‬‬

‫على عكس ‪ ، HTML‬يجب أن نقوم بحفظ ملفات ‪ PHP‬في المكان المخصص لھا و الذي يسمى بالمجلد الجذر ‪root‬‬
‫‪ .directory‬و المجلد الجذر ھو ‪ htdocs‬و الذي يقع في المسار التالي ‪ . C:\xammp\htdocs :‬أي ملف يوضع‬
‫داخل ھذا المجلد سيكون قابل للوصول عن طريق كتابة ‪ http://localhost/‬أو ‪ http://127.0.0.1/‬في شريط‬
‫عنوان متصفح االنترنت ‪.‬‬

‫يمكن تغيير المجلد الجذر من خالل تغيير القيمة االفتراضية المحددة في ملف إعدادات االباتشي و الموجودة‬
‫في ‪ c:\xammp\apache\conf\httpd.conf‬و تغيير قيمة لـ ‪ . DocumentRoot‬أخيرا ال تنسى القيام‬
‫بإعادة تشغيل االباتشي لكي تصبح التغييرات الجديدة نافذة‪.‬‬

‫ما ھو المحرر المناسب لكتابة شفرة ‪PHP‬‬

‫تستطيع استخدام أيا من محررات النصوص كبرنامج المفكرة ‪ Notepad‬أو برنامج الدفتر ‪ WordPad‬أو برنامج‬
‫المفكرة المطور ‪ Notepad++‬أو البرامج ذات الواجھة الرسومية كبرنامج ‪.Adobe Dreamweaver‬‬
‫و المحرر الذي سنقوم باستخدامه في الشرح ھو برنامج ‪ Notepad++‬و الذي يمكن تحميله بشكل مجاني من خالل‬
‫زيارة الموقع التالي‪. http://notepad-plus-plus.org/download/ :‬‬

‫تطبيق عملي‬

‫قم بفتح برنامج ‪ .Notepad++‬بعد ذلك سيقوم البرنامج بإنشاء مساحة عمل فارغة‪ .‬قم بكتابة الشفرة التالية‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<tilte>
  </tilte‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫ آ آ د>"‪<font color="blue‬‬ ‫>‪PHP</font‬‬
‫>‪<p‬‬
‫‪<?php‬‬
‫;'  ‪echo 'PHP‬‬
‫>?‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقه ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. test.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬
‫بعد االنتھاء من عملية الحفظ ‪،‬افتح متصفح االنترنت و اكتب العنوان التالي‪ http://localhost/test.php :‬و من ثم‬
‫الحظ الناتج‪.‬‬
‫أخيرا ‪ ،‬اضغط على زر الفأرة األيمن )على نافذة المتصفح ( و من ثم اختر عرض المصدر ‪ ، view source‬أو من‬
‫القائمة المنسدلة عرض ‪ view‬اختر المصدر ‪ ) source‬قد تختلف من متصفح آلخر ( ‪ ،‬ماذا تالحظ؟‬
 ‫‪٧‬‬ ‫الفصل األول ‪ :‬تمھيد‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬ما ھو الھدف الرئيسي من استخدام لغة ‪.PHP‬‬

‫‪ .٢‬عدد ثالث من مميزات ‪.PHP‬‬

‫‪ .٣‬أين سيتم حفظ ملفات ‪ PHP‬لكي نتمكن من عرضھا الحقا‪ .‬و كيف سيتم استدعاء الصفحة؟‬

‫‪ .٤‬ماذا يقصد بلغات البرمجة النصية ‪scripting languages‬؟‬

‫‪ .٥‬قم بتحميل برنامج ‪ XAMMP‬و تركيبه على جھازك الشخصي متبعا خطوات التركيب المذكورة سابقا‪.‬‬
 ‫‪٨‬‬ ‫الفصل الثاني‪ :‬أساسيات ‪PHP‬‬
‫ھذا الفصل يغطي‪:‬‬

‫كيف كتابة و تنفيذ شفرة ‪PHP‬‬ ‫
‬

‫تركيب لغة ‪PHP‬‬ ‫
‬
‫تنفيذ شفرة ‪ PHP‬من موجه األوامر‬ ‫
‬

‫تنفيذ ملفات ‪PHP‬‬

‫كما ذكرنا سابقا‪ ،‬تعتبر ‪ PHP‬من لغات برمجة جھة الخادم ‪ .Server-side programming‬بمعنى أن‬
‫خادم الويب ‪ Apache Web Server‬يقوم بإرسال شفرة ‪ PHP‬إلى محرك الشفرة ‪PHP script engine‬‬
‫و الذي يقوم بتنفيذ الشفرة و من ثم إرجاع نتيجة التنفيذ إلى خادم الويب و الذي يقوم بإرجاع ناتج التنفيذ الى‬
‫جھاز العميل و غالبا يكون على ھيئة ‪) HTML‬راجع الرسم التوضيحي في الفصل السابق( ‪ .‬و لكي يتمكن‬
‫خادم الويب من فھم و معالجة شفرة ‪ PHP‬البد من إخباره بأن صفحة االنترنت تحتوي على شفرة ‪ .PHP‬و‬
‫لتحقيق ذلك يجب أن نتبع الخطوات التالية‪:‬‬
‫‪ .١‬يجب حفظ صفحة االنترنت بامتداد ‪ .php‬مثال ‪index.php‬‬
‫‪ .٢‬يجب حصر شفرة ‪ PHP‬بين وسوم ‪.PHP‬‬

‫‪<?php‬‬

‫ آ ا د ه‬

‫>?‬

‫وسوم ‪PHP‬‬

‫يمكن كتابة شفرة ‪ PHP‬بين وسوم ‪ PHP‬الموضحة في الجدول التالي‪:‬‬

‫الوسوم القياسية ‪Standard tags‬‬ ‫‪<?php‬‬

‫اة ه‬
‫>?‬
‫الوسوم المختصرة ‪Short tags‬‬ ‫?<‬
‫اة ه‬
‫>?‬
‫وسوم سكريبت ‪Script tags‬‬ ‫>"‪<script language="php‬‬
‫اة ه‬
‫>‪</script‬‬
‫وسوم لغة ‪ASP‬‬ ‫‪<%‬‬
‫اة ه‬
‫>‪%‬‬

‫‪ <?php‬لضمان عدم حصول مشاكل تتعلق بالتوافقية‬ ‫و ينصح دائما باستخدام الطريقة القياسية >?‬
‫‪ compatibility‬و ألن كل خوادم الويب ‪ web servers‬تدعم العمل بھا‪.‬‬
 ‫‪٩‬‬ ‫الفصل الثاني‪ :‬أساسيات ‪PHP‬‬

‫الفاصلة المنقوطة ) ; ‪(Semicolon‬‬

‫تتطلب ‪ PHP‬أن يتم إنھاء أغلب تعليماتھا بواسطة فاصلة منقوطة );( ‪ .‬وسم إغالق ‪ ?> PHP‬يشتمل على فاصلة‬
‫منقوطة لذلك ليس ھناك حاجة إلنھاء آخر سطر من شفرة ‪ PHP‬بواسطة فاصلة منقوطة‪.‬‬

‫‪<?php‬‬
‫;'‪echo 'This is a test‬‬
‫>?‬

‫>? '‪<?php echo 'This is a test‬‬

‫;'‪<?php echo 'We omitted the last closing tag‬‬

‫)ا"!ر(‪php.net‬‬

‫التعليقات )‪(Comments‬‬

‫إلدراج تعليق في سطر واحد فقط ‪ ،‬نستخدم )‪ (//‬أو )‪ .(#‬أما في حالة الرغبة في إدراج تعليق ألكثر من سطر واحد‬
‫فنستخدم )‪.(/* */‬‬
‫‪<?php‬‬

‫' &
‪  %‬وا‪// !#‬‬

‫' &
‪  %‬وا‪# !#‬‬

‫*‪/‬‬
‫' &
‬
‫أآ* )(‬
‫‪ % */‬‬
‫>?‬

‫يقصد بعبارة ) تعليق ‪ ،(comment‬كل تعليمة سيتجاھلھا مفسر)‪ (Parser‬لغة ‪ PHP‬أثناء عملية التنفيذ‪.‬‬

‫المسافة الفارغة ‪whitespace‬‬

‫ال تعتبر ‪ PHP‬حساسة للمسافة الفارغة إال في عدد من الحاالت ‪:‬‬

‫
ال يمكننا ترك مسافة فارغة بين وسم ‪ ، PHP‬كأن نكتب ‪) <? php :‬غير صحيح( ‪.‬‬
‫
ال يسمح بترك مسافة فارغة بين الكلمات المحجوزة من قبل ‪ ، PHP‬كأن نكتب ‪ ) wh ile , fo r :‬غير‬
‫صحيح(‪.‬‬
‫
ال يسمح باستخدام المسافات الفارغة مع أسماء المتغيرات و الدوال كأن نكتب ‪ ) $first name :‬غير‬
‫صحيح(‪.‬‬
 ‫‪١٠‬‬ ‫الفصل الثاني‪ :‬أساسيات ‪PHP‬‬

‫إستخدام االقواس الكبيرة } {‬

‫يتم استخدام االقواس الكبيرة عند الحاجة لتنفيذ مجموعة من األوامر في حالة محددة‪ .‬كما في حالة الدوال ‪functions‬‬
‫أو جمل الشرط ‪ condition statements‬أو حلقات التكرار ‪.loops‬‬

‫‪<?php‬‬
‫) ‪if( $i > 2‬‬
‫{‬
‫‪//Statement1‬‬
‫‪//Statement2‬‬
‫}‬
‫>?‬

‫‪ PHP‬و ‪HTML‬‬

‫يمكن تضمين شفرة ‪ HTML‬داخل ملف ‪ PHP‬بطريقتين‪:‬‬

‫‪ .١‬أن تُكتب ‪ HTML‬خارج الجزء الخاص بشفرة ‪.PHP‬‬

‫>‪<html‬‬
‫>‪<head><title>PHP inside HTML</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪
 ' </h1‬ا ‪<h1>,% - 
 .‬‬
‫‪<?php‬‬
‫; "ه‪ 12‬ا ‪ -‬ا‪0‬و‪echo "/‬‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪ .٢‬أن يتم كتابة ‪ HTML‬داخل عبارة ‪ echo‬أو الدالة ‪ print‬لكن البد أن تكون محصورة بين عالمات‬
‫االقتباس المفردة أو المزدوجة‪.‬‬

‫‪<?php‬‬
‫;'>‪echo '<html‬‬
‫;'>‪</title></head‬ا ‪ -‬ا*‪echo '<head><title>
3‬‬
‫;'>‪print '<body‬‬
‫ه‪ 12‬ه
ا ‪ -‬ا*‪ 3‬و ا
!ل ‪) /‬و‪print '<h1> 3‬‬
‫;'>‪PHP</h1‬‬
‫;'>‪echo'</body></html‬‬
‫>?‬
 ‫‪١١‬‬ ‫الفصل الثاني‪ :‬أساسيات ‪PHP‬‬

‫تنسيق شفرة ‪PHP‬‬

‫عند كتابة أي شفرة برمجية باستخدام ‪ PHP‬ينصح األخذ في االعتبار تحسين مظھر الشفرة المكتوبة‪ .‬و يتم ذلك عادة‬
‫بإضافة مسافة محددة )أربع خانات مثال( قبل كل تعليمة تكون تابعة للتعليمة التي تسبقھا باإلضافة إلى استخدام‬
‫التعليقات ‪. comments‬‬

‫‪<?php‬‬
‫ه‪2‬ا ا‪ - B)3‬م @ر ? ا> ‪// x‬‬
‫;‪$x=5‬‬
‫)‪if(x < 1‬‬
‫; " ‪echo " x is less than 1‬‬
‫‪else‬‬
‫; " ‪echo " x is bigger than 1‬‬
‫>?‬

‫علما أن تنسيق شفر ‪ PHP‬ليس له أي تأثير في عملية التنفيذ‪ .‬لكنھا مفيدة في ‪:‬‬

‫عملية تنظيم الشفرة و جعلھا أكثر قابلية للقراءة‪.‬‬ ‫
‬

‫المساعدة كذلك في عملية الصيانة و التطوير الحقا‪.‬‬ ‫
‬
‫تسھيل عملية الصيانة‪.‬‬ ‫
‬

‫‪ echo‬و ‪print‬‬

‫لطباعة النتائج في ‪ PHP‬نستطيع استخدام إما ‪ echo‬أو ‪ . print‬والفرق الوحيد بينھما أن ‪ print‬تعتبر من دوال‬
‫‪ PHP‬بينما ‪ echo‬تُعتبر من تصاريح ‪) PHP‬راجع المثال في الصفحة السابقة(‪.‬‬

‫عالمة االقتباس المفردة ) ' ‪ ( Single quote‬و المزدوجة )'' ‪(Double quotes‬‬

‫عند التعامل مع النصوص يجب أن يتم تضمينھا بين عالمات االقتباس المفردة أو المزدوجة‪ .‬و الفرق بين‬
‫العالمتين ھو أن المفسر ‪ PHP interpreter‬سيقوم بالتعامل مع أي بيانات موضوعة بين عالمة االقتباس‬
‫المفردة و كأنھا نص عادي‪ .‬بينما في حالة عالمة االقتباس المزدوجة فسيقوم المفسر بالبحث عن أي‬
‫متغيرات أو حروف خاصة لكي يقوم بمعالجتھا‪.‬‬

‫>‪<html‬‬
‫>‪<head><title>Single and Double quotes</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<?php‬‬
‫;‪$x = 1‬‬
‫;" >‪echo " x =\t$x <br/‬‬
‫;' >‪echo ' x =\t$x <br/‬‬
‫>?‬
‫>‪</body></html‬‬
 ‫‪١٣‬‬ ‫الفصل الثاني‪ :‬أساسيات ‪PHP‬‬

‫‪ PHP‬حساسة لحالة الحرف ‪case-sensitive‬‬

‫‪ PHP‬من لغات البرمجة الحساسة لحالة الحرف‪ .‬بمعنى أن ‪ $x‬تختلف عن ‪ $X‬و ) (‪ test‬تختلف أيضا عن ) (‪Test‬‬
‫و ھكذا‪.‬‬

‫‪<?php‬‬
‫;‪$number = 60‬‬
‫;‪echo'$number='.$number‬‬
‫;‪echo'<br>$number='.$Number‬‬
‫>?‬

‫‪$number=60‬‬
‫=‪$number‬‬

‫تنفيذ ‪ PHP‬من موجه األوامر ‪command line‬‬

‫بدال من الطريقة القياسية لتنفيذ ملفات ‪ PHP‬و التي نستخدم فيھا متصفح االنترنت ‪ ،‬نستطيع تنفيذ شفرة ‪ PHP‬من‬
‫خالل موجه األوامر‪ .‬و الطريقة كالتالي‪:‬‬
‫‪ .١‬قم بكتابة شفرة ‪ PHP‬التالية‪:‬‬
‫‪<?php‬‬
‫;'…‪echo 'executing PHP in command line‬‬
‫>?‬

‫االفتراضي‬ ‫المجلد‬ ‫داخل‬‫‪commandline.php‬‬ ‫باسم‬ ‫السابق‬ ‫الملف‬ ‫‪ .٢‬احفظ‬

‫)‪.(c:\xammp\htdocs\commandline.php‬‬
‫‪ .٣‬انتقل إلى كل البرامج ‪ <--‬البرامج الملحقة ‪ <--‬موجه األوامر‪.‬‬
‫‪ .٤‬بعد فتح موجه األوامر قم بكتابة سلسلة األوامر التالية بالترتيب‪:‬‬
‫
\‪cd‬‬
‫
‪cd c:\xampp\php‬‬
‫
‪ php c:\xampp\htdocs\commandline.php‬اآلن قم بالضغط على زر ‪ Enter‬و الحظ‬
‫الناتج‪.‬‬
‫\‪C:\Users\user>cd‬‬
‫‪C:\ cd c:\xampp\php‬‬
‫‪C:\xampp\php>php c:\xampp\htdocs\commandline.php‬‬
‫…‪executing PHP in command line‬‬

‫>‪C:\xampp\php‬‬
 ‫‪١٤‬‬ ‫الفصل الثاني‪ :‬أساسيات ‪PHP‬‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬لماذا ال ينصح باستخدام >? ?< في كتابة شفرة ‪ PHP‬؟‬

‫‪ .٢‬ھل يجب إستخدام الفاصلة المنقوطة ) ; ( مع كل تعليمات ‪PHP‬؟‬

‫‪ .٣‬كيف يمكن تنسيق شفرة ‪ PHP‬و ما الفائدة منھا؟‬

‫‪ .٤‬ما الفرق بين عالمة االقتباس المفردة و المزدوجة؟‬

‫‪ .٥‬ھل تعتبر ‪ PHP‬حساسة لحالة الحرف‪ ،‬اضرب مثال لذلك؟‬

‫‪ .٦‬قم بكتابة شفرة ‪ ، PHP‬الغرض منھا طباعة اسمك‪ .‬مع االخذ في االعتبار ضرورة أن يظھر االسم‬

‫في وسط الصفحة و بحجم كبير جدا؟‬

‫‪ .٧‬صح أم خطأ‪:‬‬

‫ال يوجد فرق بين كال من ‪ echo :‬و ‪. print‬‬

 ‫‪١٥‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫ھذا الفصل يغطي‪:‬‬

‫المتغيرات في ‪PHP‬‬ ‫
‬

‫أنواع البيانات ‪data types‬‬ ‫
‬
‫كيفية التعامل مع الثوابت‬ ‫
‬
‫المعامالت الخاصة و كيفية استخدامھا‬ ‫
‬

‫المتغيرات ‪variables‬‬

‫المتغير ھو عبارة عن حاوية ‪ container‬تستخدم لحفظ البيانات بشكل مؤقت ‪ .‬في ‪ PHP‬يمكن أن تحتوي المتغيرات‬
‫على أي نوع من البيانات كاألرقام أو النصوص أو المصفوفات ‪ .‬و تعتبر ‪ PHP‬من اللغات الغير صارمة من ناحية‬
‫نوع البيانات ‪ .loosely typed‬بمعنى أن نوع البيانات يختلف باختالف القيمة المخزنة داخل المتغير‪.‬‬

‫تسمية المتغيرات ‪naming variables‬‬

‫لتعريف المتغيرات في ‪ PHP‬يجب األخذ في االعتبار عدد من القواعد‪:‬‬

‫
تبدأ المتغيرات في ‪ PHP‬بعالمة الدوالر ‪. $‬‬
‫
الذي يلي عالمة ‪ $‬يجب أن يكون إما حرف ]‪ [a-z A-Z‬أو شرطة سفلية _ ‪.‬‬
‫
ال يسمح بالمسافات ‪ space‬و عالمات الترقيم ‪.punctuation‬‬
‫
أسماء المتغيرات حساسة لحالة الحرف ‪.case sensitive‬‬
‫كما ينصح عند اختيار اسم لمتغير أن يكون االسم المختار ذا معنى‪ .‬أي عند النظر الى اسم المتغير نستطيع أن نعرف‬
‫ما ھي البيانات التي سيتم حفظھا في ذلك المتغير‪.‬‬

‫;' ‪$name = ' OP‬‬

‫;' ‪$_name = 'OP‬‬
‫‪! R30 OP Q‬أ ? ‪$2name = 'OP Q '; //‬‬

‫اسناد القيم للمتغيرات ‪assign values to variables‬‬

‫عملية إعطاء المتغيرات قيم تتم بطريقة سھلة في ‪ . PHP‬كل ما علينا عمله ھو استخدام رمز المساواة ) = (‪ .‬عند‬
‫استخدام ھذا الرمز تتم عملية اسناد القيمة الموجودة في اليسار الى المتغير الموجود في الطرف االيمن‪.‬‬

‫;" )‪$name = " !S‬‬

‫في المثال السابق‪:‬‬
‫‪ $name‬ھو اسم المتغير‬
‫عالمة المساواة‬ ‫=‬
‫"محمد" ھي قيمة المتغير‬
‫كما يجب أن ال ننسى أن ننھي العبارة بفاصلة منقوطة‪ .‬المثال التالي يوضح كيفية التعامل مع المتغيرات‪:‬‬
 ‫‪١٦‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫>‪<html‬‬
‫>‪<head><title>Variables</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<?php‬‬
‫;" )‪$name = " T ! !S‬‬
‫>?‬
‫>‪<b>  #) </b> <h4> <?php echo $name; ?> </h4‬‬
‫>‪</body></html‬‬

‫كما ھو واضح من المثال السابق ستقوم ‪ echo‬بطباعة قيمة المتغير ‪.$name‬‬

‫كما يمكن إسناد قيمة متغير إلى متغير آخر أو أن تكون قيمة المتغير ناتجة من تنفيذ عملية حسابية أو يتم إدخالھا عن‬
‫طريق المستخدم لقيمة المتغير عن طريق نموذج ‪.HTML form‬‬

‫‪<?php‬‬
‫إ ء )> ? ‪//‬‬
‫;‪$now = 2012‬‬

‫ا‪%‬د ? )> ا‪// @_ >) /‬‬

‫;‪$currentYear = $now‬‬

‫? )> ( ‪// `#  a‬‬

‫;‪$lastYear = $currentYear - 1‬‬
‫;">‪echo "<div dir=rtl‬‬
‫;' إ‪ /,3‬ا'م' ‪echo‬‬
‫;‪echo $lastYear‬‬
‫;' )‪
&  #‬ا'م >‪echo'<br/‬‬
‫;‪echo $currentYear‬‬
‫;">‪echo "</div‬‬
‫>?‬

‫إنتھى العام ‪٢٠١١‬‬

‫مرحبا بكم في العام ‪٢٠١٢‬‬

‫االسناد بواسطة المرجع ‪assign by reference‬‬

‫تدعم ‪ PHP‬ميزة أخرى عند التعامل مع المتغيرات و ذلك عن طريق االسناد بواسطة المرجع‪ .‬بمعنى أن المتغير‬
‫الجديد يقوم باإلشارة إلى المتغير األساسي‪ .‬ولإلسناد بواسطة المرجع نقوم بإدراج العالمة & قبل اسم المتغير الذي‬
‫ستتم االشارة إليه‪ .‬في ھذه الحالة ستصبح المتغيرات مرتبطة ببعضھا البعض‪.‬‬
‫‪<?php‬‬
‫;'‪$foo = 'Bob‬‬ ‫‪// Assign the value 'Bob' to $foo‬‬
‫;‪$bar = &$foo‬‬ ‫‪// Reference $foo via $bar.‬‬
‫‪$bar = "My name is $bar<br/>"; // Alter $bar...‬‬
‫;‪echo $bar‬‬
‫;‪echo $foo‬‬ ‫‪// $foo is altered too.‬‬
‫>?‬
 ‫‪١٧‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫‪My name is Bob‬‬

‫‪My name is Bob‬‬

‫لحذف قيمة متغير‪ ،‬نستخدم الدالة ‪ . unset( ) :‬مثال‪:‬‬

‫;) ‪unset( $name‬‬

‫أنواع البيانات في ‪PHP‬‬

‫تدعم ‪ PHP‬العديد من أنواع البيانات ‪ .data types‬و يمكن تصنيف أنواع البيانات في ‪ PHP‬إلى ثالث فئات‪:‬‬
‫
أنواع بيانات بقيمة واحدة ‪ scalar‬و تنقسم إلى أربعة أقسام‪:‬‬
‫‪int‬‬ ‫رقم صحيح بدون فاصلة عشرية كـ ‪٤٥٦٠‬‬
‫‪float‬‬ ‫رقم صحيح بفاصلة عشرية كـ ‪٤٥٫٣٢٥‬‬
‫‪string‬‬ ‫بيانات ثنائية كالنصوص أو الصور ‪ ....‬الخ‬
‫‪boolean‬‬ ‫قيمة تحتمل أن تكون ‪ TRUE‬أو ‪FALSE‬‬

‫أنواع بيانات تدعم أكثر من قيمة ‪composite‬‬ ‫
‬

‫‪array‬‬ ‫سلسلة من البيانات المرتبة في عناصر‬
‫‪object‬‬ ‫يمكن أن تحتوي على بيانات أو شفرة برمجية‬

‫أنواع بيانات خاصة‬ ‫
‬

‫‪NULL‬‬ ‫تدل على أن المتغير ال يحتوي على قيمة ) قيمة خالية(‬
‫‪resources‬‬ ‫تدل على أن المتغير يحتوي على مصدر بيانات خارجي‬

‫‪<?php‬‬

‫;‪$valid_student = TRUE‬‬

‫;‪$student_id = 181280000‬‬

‫;"‪$student_name = "Ali Mohammad‬‬

‫;‪$student_gpa = 3.75‬‬

‫;‪$student_phone=null‬‬

‫;)"‪$student_courses = ("cs101","cs102","cs103‬‬

‫>?‬
 ‫‪١٨‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫فرض نوع بيانات ‪type casting‬‬

‫كما سبق وأن اشرنا بأن ‪ PHP‬من اللغات التي ال تفرض تحديد نوع بيانات المتغير عند تعريفه كما ھو الحال في‬
‫لغات البرمجة كـ ‪ C‬و ‪ .java‬لكن مفسر اللغة ‪ PHP interpreter‬يقوم بتحديد نوع البيانات تلقائيا استنادا على القيمة‬
‫المخزنة في المتغير‪ .‬لكن قد نحتاج في بعض الحاالت لفرض نوع بيانات محدد‪.‬‬

‫‪<?php‬‬
‫!د ‪$value1 = 10; // OSP‬‬
‫!د ‪ OSP‬ي ‪$value2 = 20.38; //‬‬
‫;‪$value3 = $value1 + $value2‬‬
‫;‪echo $value3‬‬
‫>?‬

‫‪30.38‬‬

‫و كما ھو مالحظ فإن ناتج المتغير ‪ $value3‬عبارة عن رقم صحيح عشري ‪ .float‬و في حال أردنا أن يكون الناتج‬
‫عدد صحيح فإننا نقوم بفرض نوع البيانات ‪ int‬كما يلي‪:‬‬
‫‪<?php‬‬
‫!د ‪$value1 = 10; // OSP‬‬
‫!د ‪ OSP‬ي ‪$value2 = 20.38; //‬‬
‫;‪$value3 = $value1 + $value2‬‬
‫‪echo $value3.'<br/>';// before type casting‬‬
‫‪echo (int)$value3; // type casting‬‬
‫>?‬

‫‪30.38‬‬
‫‪30‬‬

‫التعامل مع الثوابت ‪constants‬‬

‫على عكس المتغير و الذي من الممكن أن تتغير قيمته في أثناء سير البرنامج‪ ،‬فإن الثابت يحتوي على قيمة ثابتة ال‬
‫تتغير‪ .‬و لتعريف الثابت في ‪ PHP‬يجب األخذ في االعتبار مايلي‪:‬‬
‫
إتباع القواعد الخاصة بتعريف المتغير باستثناء عالمة ‪ $‬و التي ليست مطلوبة مع الثوابت‪.‬‬
‫
استخدام الدالة ) (‪.define‬‬
‫
ينصح عند تسمية الثوابت بأن تكتب بأحرف كبيرة ‪. capital letters‬‬
‫‪<?php‬‬

‫'‪ u‬ا*‪define("COURSE","PHP Programming"); // t‬‬

‫;)‪define("YEAR",1430‬‬

‫‪ a‬ا*‪echo COURSE; // t‬‬

‫;‪echo '</br>'.YEAR‬‬
‫>?‬
‫في الشفرة السابقة ‪:‬‬
‫
‪ COURSE‬ھو اسم الثابت و ‪ PHP Programming‬ھي القيمة‪.‬‬
‫
‪ YEAR‬ھو اسم الثابت و ‪ 1430‬ھي القيمة ) وألنھا قيمة رقمية لم توضع بين عالمات اقتباس(‪.‬‬
 ١٩ ‫ التعامل مع المتغيرات و الثوابت‬: ‫الفصل الثالث‬

string concatenation ‫ربط النصوص‬

. ( . ) ‫ نقوم باستخدام اداة الربط‬PHP ‫لربط النصوص في‬

<?php
$name = "Ali Abdullah";
$course = " Web Programming";

echo '<h1>Welcome '.$name.' ,you are enrolled in '.$course

.' course<h1>';
?>

Welcome Ali Abdullah ,you are enrolled in Web

Programming course

arithmetic operators ‫المعامالت الحسابية‬

.‫المعامالت الحاسبية تساعدنا على إجراء العمليات الحسابية األساسية‬

$x = 20 + 14 ; addition ‫الجمع‬
$x = 30 – 10 ; subtraction ‫الطرح‬
$x = 12 * 10 ; multiplication ‫الضرب‬
$x = 30 / 10 ; division ‫القسمة‬
$x = 10 % 3 ; modulus ‫باقي القسمة‬

<?php
// `S‫آ ا') )} ا')|ت ا‬
$num1 = 10;
$num2 = 3;
echo $num1 * $num2;
echo '</br>'.$num1 / $num2;
echo '</br>'.$num1 % $num2;
?>

30
3.3333333333333
1
 ‫‪٢٠‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫أسبقية المعامالت ‪operators precedence‬‬

‫عند التعامل مع المعامالت الحسابية في ‪ ،PHP‬فإننا نتبع نفس القواعد المتبعة مع العمليات الحسابية في علم الحساب‪.‬‬
‫لذلك عند تنفيذ أي عملية حسابية ‪ ،‬يجب األخذ في االعتبار أسبقية المعامالت من حيث التنفيذ‪ .‬الجدول التالي يوضح‬
‫ترتيب المعامالت وفقا ألسبقيتھا في التنفيذ‪.‬‬

‫أعلى‬ ‫)(‬
‫‪* / %‬‬
‫أقل‬ ‫‪+ -‬‬

‫معامالت الزيادة و النقصان ‪increment and decrement operators‬‬

‫معامالت الزيادة )‪ (++‬و معامالت النقصان)‪ (--‬من الممكن أن تأتي قبل أو بعد المتغير‪ .‬في حال أتيا قبل المتغير‬
‫فستتم عملية الزيادة أو النقصان بمقدار ) ‪ ( ١‬قبل إجراء أي عملية على المتغير‪ .‬و على العكس تماما إذا أتى أيا ً من‬
‫المعاملين بعد المتغير سيتم إجراء أي عملية على المتغير و من ثم ستتم عملية الزيادة أو النقصان‪.‬‬

‫‪<?php‬‬
‫;‪$num1 = 10‬‬
‫;‪$num2 = 3‬‬

‫‪echo $num1++; // $num1 = 10‬‬

‫‪echo '</br>'.++$num1; // $num1 = 12‬‬
‫‪echo '</br>'.++$num2; // $num2 = 4‬‬
‫>?‬

‫معامالت المقارنة ‪comparison operators‬‬

‫تتيح ‪ PHP‬لنا مقارنة المتغيرات أو القيم عن طريق استخدام معامالت المقارنة‪ .‬الجدول التالي يوضح معامالت‬
‫المقارنة في ‪:PHP‬‬

‫المساواة ) ‪( Equality‬‬ ‫==‬

‫عدم المساواة )‪( Inequality‬‬ ‫=!‬
‫أكبر من ) ‪( Greater than‬‬ ‫>‬
‫أقل من ) ‪( Less than‬‬ ‫<‬
‫أكبر من أو يساوي )‪( Greater than or equal‬‬ ‫=>‬
‫أقل من أو يساوي ) ‪( Less than or equal‬‬ ‫=<‬
‫التماثل ) ‪( Identical‬‬ ‫===‬
‫غير متماثل ) ‪( Not identical‬‬ ‫==!‬
 ‫‪٢١‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫من الجدول السابق يجب اإلشارة إلى أن المقصود بالتماثل ‪ ،Identical‬ھو أن تكون المتغيرات متساوية في القيمة و‬
‫من نفس نوع البيانات ‪.data type‬‬

‫عالمة )=( المفردة ال تستخدم في عملية المقارنة ‪ ،‬تستخدم فقط عند إسناد القيم للمتغيرات‪.‬‬

‫المعامالت المنطقية ‪logical operators‬‬

‫تُستخدم المعامالت المنطقية عادة مع الشروط المركبة و تكون النتيجة إما ‪ TRUE‬أو ‪. FALSE‬‬

‫مثال‬ ‫الوصف‬ ‫المعامل‬

‫‪x=6 y=4‬‬ ‫)و(ھذا المعامل يقوم بإرجاع القيمة ‪ TRUE‬فقط في حال كان‬ ‫‪and‬‬
‫‪(x>5 and y<3)  FALSE‬‬ ‫ناتج كل الشرطين ‪ .TRUE‬بخالف ذلك يقوم بإرجاع القيمة‬
‫‪(x>4 and y<6)  TRUE‬‬ ‫‪.FALSE‬‬
‫‪x=6 y=4‬‬ ‫)أو(ھذا المعامل يقوم بإرجاع القيمة ‪ FALSE‬فقط في حال‬ ‫‪or‬‬
‫‪(x>5 or y<3)  TRUE‬‬ ‫كان ناتج كل الشرطين ‪ .FALSE‬بخالف ذلك يقوم بإرجاع‬
‫‪(x>7 or y<2)  FALSE‬‬ ‫القيمة ‪.TRUE‬‬
‫‪x=6 y=4‬‬ ‫)و(ھذا المعامل يقوم بإرجاع القيمة ‪ TRUE‬فقط في حال كان‬ ‫&&‬
‫‪(x>5 && y<3)  FALSE‬‬ ‫ناتج كل الشرطين ‪ .TRUE‬بخالف ذلك يقوم بإرجاع القيمة‬
‫‪(x>4 && y<6)  TRUE‬‬ ‫‪.FALSE‬‬
‫‪x=6 y=4‬‬ ‫)أو(ھذا المعامل يقوم بإرجاع القيمة ‪ FALSE‬فقط في حال‬ ‫||‬
‫‪(x>5 || y<3)  TRUE‬‬ ‫كان ناتج كل الشرطين ‪ .FALSE‬بخالف ذلك يقوم بإرجاع‬
‫‪(x>7 || y<2)  FALSE‬‬ ‫القيمة ‪.TRUE‬‬
‫‪x=6 y=4‬‬ ‫)نفي(ھذا المعامل يقوم بعكس قيمة الشرط‪.‬‬ ‫!‬
‫‪!(x>y)  FALSE‬‬

‫معامل منع عرض الخطأ ‪error supersession operator‬‬

‫يُستخدم المعامل @ في ‪ PHP‬إلجبار مفسر اللغة ‪ interpreter‬بمنع عرض رسائل الخطأ ‪error‬‬
‫‪ messages‬أو التحذير ‪ warning messages‬للمستخدم‪.‬‬

‫‪<?php‬‬
‫*‪/‬‬
‫&
ه‪ 12‬ا‪ - ( S‬م )` ا> 'ض ر‪ %‬ا‪ 2S‬ا  )(‬
‫)‪S‬و ا‪ / `-‬ا" و ا` ‪ -% 30‬ا> ‪@ )' x‬‬
‫‪*/‬‬
‫;‪@$x = 10/0‬‬
‫;‪echo $x‬‬
‫>?‬
 ‫‪٢٢‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫تطبيق عملي‬

‫في ھذا التطبيق سنقوم بتعريف اربع متغيرات ‪ a‬و ‪ b‬و ‪ c‬و ‪ . d‬و سنقوم بإسناد القيم التالية للمتغيرات على التوالي‪:‬‬
‫
‪PHP‬‬
‫
‪40‬‬
‫
‪25.32‬‬
‫
‪TRUE‬‬
‫سنستعين في ھذا التطبيق بالدالة ) (‪ gettype‬و التي تقوم بإرجاع نوع البيانات و من ثم طباعة الناتج‪ .‬قم بفتح برنامج‬
‫‪ Notepad++‬ثم قم بكتابة الشفرة التالية‪:‬‬
‫‪<?php‬‬
‫ه ? '‪ u‬ا>ات ا  ‪//‬‬
‫;'‪$a = 'PHP‬‬
‫;‪$b = 40‬‬
‫;‪$c = 25.32‬‬
‫;‪$d = TRUE‬‬
‫*‪/‬‬
‫)(‪!% ? gettype‬ء ا!ا‬
‫
‪ -3‬م 'ض ‪ 3‬ع ا‪3‬ت  )>‬
‫‪*/‬‬
‫;'>"‪echo'<table border="1" dir="rtl" align="center‬‬
‫;'>‪ 3:'.gettype($a).'</td></tr‬ع ‪ $a R 3‬ا>>‪echo'<tr><td‬‬
‫;'>‪ 3:'.gettype($b).'</td></tr‬ع ‪ $b R 3‬ا>>‪echo'<tr><td‬‬
‫;'>‪ 3:'.gettype($c).'</td></tr‬ع ‪ $c R 3‬ا>>‪echo'<tr><td‬‬
‫;'>‪ 3:'.gettype($d).'</td></tr‬ع ‪ $d R 3‬ا>>‪echo'<tr><td‬‬
‫;'>‪echo'</table‬‬
‫>?‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقه ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. variables.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬
‫بعد االنتھاء من عملية الحفظ ‪،‬افتح متصفح االنترنت و اكتب العنوان التالي‪ http://localhost/variables.php :‬و‬
‫من ثم الحظ الناتج‪.‬‬
‫‪٢٣‬‬ ‫الفصل الثالث ‪ :‬التعامل مع المتغيرات و الثوابت‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬قم بكتابة برنامج يقوم بتحويل العملة من دوالر امريكي الى ﷼ سعودي‪ .‬علما بأن سعر صرف‬

‫الدوالر= ‪ ٣٫٧٥‬﷼ ‪.‬‬

‫‪ .٢‬متى نستخدم المتغيرات و متى نستخدم الثوابت‪.‬‬

‫‪ .٣‬ما الفرق بين كال من‪ (= =) ، (= = =) :‬و )=(‪.‬‬

‫‪ .٤‬كيف نستطيع منع عرض رسائل الخطأ للمستخدم ؟‬

 ‫‪٢٤‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫ھذا الفصل يغطي‪:‬‬

‫كيف التعامل مع جمل الشرط‬ ‫
‬

‫أنواع جمل التكرار المختلفة‬ ‫
‬
‫كيفية التحكم في التكرار‬ ‫
‬

‫جملة الشرط ‪if‬‬

‫تعتبر جملة الشرط ‪ if‬من ابسط جمل الشرط في ‪ . PHP‬و تستخدم إلختبار شرط ما و من ثم تنفيذ جواب الشرط إذا‬
‫كان ناتج الشرط ‪ .TRUE‬وصيغتھا العامة كالتالي‪:‬‬

‫) ‪if ( condition is TRUE‬‬

‫{‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل ‪ -S‬اط ‪//‬‬
‫}‬

‫جملة الشرط ‪if else‬‬

‫في ھذه الحالة سيتم تنفيذ الجزء التابع لجملة ‪ if‬إذا كان ناتج الشرط ‪ .TRUE‬بخالف ذلك سيتم تنفيذ الجزء البرمجي‬
‫التابع لـ ‪:else‬‬

‫) ‪if ( condition is TRUE‬‬

‫{‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل ‪ -S‬اط ‪//‬‬
‫}‬
‫‪else‬‬
‫{‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل  ‪ -S‬اط ‪//‬‬
‫}‬

‫جمل الشرط المتداخلة ‪if elseif else‬‬

‫في ھذه الحالة سيتم اختبار أكثر من شرط و لن يتم تنفيذ إال الجزء البرمجي الذي تكون فيه نتيجة الشرط ‪TRUE‬‬
‫بخالف ذلك سيتم تنفيذ الجزء البرمجي التابع لجملة ‪: else‬‬

‫) ‪if ( condition is TRUE‬‬

‫{‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل ‪ -S‬اط ‪//‬‬
‫}‬
‫)‪elseif( condition 2 is TRUE‬‬
‫{‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل ‪ -S‬اط ا*‪//
3‬‬
‫}‬
‫‪.‬‬
‫‪.‬‬
‫‪.‬‬
‫‪else‬‬
‫{‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل  ‪ -S‬أي ط ‪//‬‬
‫}‬
 ‫‪٢٥‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫يمكن كتابة ‪ elseif‬ككلمة واحدة أو كلمتين منفصلتين‪else if :‬‬

‫‪<?php‬‬
‫;‪$student_mark = 73‬‬
‫)‪if($student_mark <60‬‬
‫{‬
‫;"هـ" = ‪$result‬‬
‫}‬
‫)‪elseif($student_mark<70‬‬
‫{‬
‫;"د" = ‪$result‬‬
‫}‬
‫)‪elseif($student_mark<80‬‬
‫{‬
‫;"ج" = ‪$result‬‬
‫}‬
‫)‪elseif($student_mark<90‬‬
‫{‬
‫;"ب" = ‪$result‬‬
‫}‬
‫‪else‬‬
‫{‬
‫;"أ" = ‪$result‬‬
‫}‬
‫;'>";‪echo'<div style="direction:rtl‬‬
‫;‪!- : '.$result‬ك &
ادة ه ' ‪echo‬‬
‫;'>‪echo'</div‬‬
‫>?‬

‫ادة ه
‪ :‬ج‬ ‫ ك‬

‫جملة القرار ‪switch‬‬

‫تستخدم جملة القرار ‪ switch‬كبديل لجملة الشرط ‪ . if else‬في حالة جملة ‪ switch‬نقوم باختبار قيمة متغير ما مقابل‬
‫مجموعة من القيم ‪ .‬الصيغة العامة لجملة القرار ‪ switch‬كالتالي‪:‬‬
 ‫‪٢٦‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫)‪switch(variable‬‬
‫{‬
‫‪case value1:‬‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل آ‪ ? t3‬ا> `وي ه‪ 12‬ا‪//-‬‬
‫;‪break‬‬

‫‪case value2:‬‬
‫ا د ا‪2‬ي ‪#
& 2%‬ل آ‪ ? t3‬ا> `وي ه‪ 12‬ا‪//-‬‬
‫;‪break‬‬

‫………‬
‫………‬

‫‪default:‬‬
‫`وي ? ا> ا )( ا‪// -‬‬ ‫ا د ا‪2‬ي ‪#
& 2%‬ل ‬
‫ا`‪-‬‬
‫}‬

‫المتغير الذي سيتم اختبار قيمتة سيوضع بين القوسين التابعين لـ ‪. switch‬أما العبارة ‪ case‬فتمثل القيمة أو القيم التي‬
‫سيتم اختبار قيمة المتغير مقابلھا‪ .‬بعد ادخال المتغير المراد اختباره سيقوم مفسر ‪ PHP‬باختبار قيمة ذلك المتغير‬
‫مقابل كل جملة ‪ . case‬في حال كانت نتيجة اختبار ايا من جمل ‪ case‬تساوي ‪ TRUE‬سيقوم مفسر ‪ PHP‬بتنفيذ‬
‫الشفرة التابعة لھا حتى يصل عند جملة ‪ ،break‬بعد ذلك سيقوم بالخروج من جملة ‪.switch‬‬

‫لكن ما الذي سيحدث في حال نسي المبرمج كتابة عبارة ‪ break‬ألي من عبارة ‪ case‬؟‬

‫في ھذه الحالة‪ ،‬سيقوم مفسر ‪ PHP‬بتنفيذ الشفرة البرمجية و التوقف عند أقرب عبارة ‪ break‬حتى و ان كانت تتبع‬
‫لعبارة ‪ case‬اخرى‪.‬‬
‫اخيرا‪ ،‬اذا لم يجد مفسر ‪ PHP‬ايا من جمل ‪ case‬قيمتھا تساوي قيمة المتغير المراد اختباره‪ ،‬سيقوم المفسر بتنفيذ‬
‫الشفرة التابعة لعبارة ‪.default‬‬

‫‪<?php‬‬
‫دا ار‹ )(‪/* date‬‬
‫‪ - timestamp‬م ‪  S‬ا اŒ)
‬
‫"> ر‹ ? ‪-‬اءة‬
‫‪*/‬‬
‫;)"‪$d=date("D‬‬
‫;'>";‪echo'<div style="direction:rtl‬‬
‫)‪switch ($d‬‬
‫{‬
‫‪case "Mon":‬‬
‫;"ا م ه اŽ(" ‪echo‬‬
‫;‪break‬‬
‫‪case "Tue":‬‬
‫;"ا م ه ا*|Žء" ‪echo‬‬
‫;‪break‬‬
‫‪case "Wed":‬‬
‫;"ا م ه ار'ء" ‪echo‬‬
‫;‪break‬‬
 ‫‪٢٧‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫‪case "Thu":‬‬
‫;"ا م ه ا" ‪echo‬‬
‫;‪break‬‬
‫‪case "Fri":‬‬
‫;"ا م ه ا'" ‪echo‬‬
‫;‪break‬‬
‫‪case "Sat":‬‬
‫;"ا م ه ا`‪echo "t‬‬
‫;‪break‬‬
‫‪case "Sun":‬‬
‫;"ا م ه ا‪echo "!#0‬‬
‫;‪break‬‬
‫‪default:‬‬
‫;"ا م ‪') Q‬وف؟" ‪echo‬‬
‫}‬
‫;'>‪echo'</div‬‬
‫>?‬

‫القيم النصية لعبارة ‪ case‬يجب أن تحصر بين عالمتي تنصيص‪ ،‬على عكس القيم الرقمية التي ال تتطلب‬
‫حصرھا بين عالمات التنصيص‪.‬‬

‫المعامل الشرطي ‪ternary operator ?:‬‬

‫المعامل الشرطي ‪ ?:‬يستخدم كطريقة مختصرة للتحقق من الشروط البسيطة‪ .‬الصيغة العامة للمعامل الشرطي‬
‫كالتالي‪:‬‬

‫; ‪condition? value if ture : value if FALSE‬‬

‫‪<?php‬‬
‫;‪$age=20‬‬
‫; '‪$result = $age>18? '“' : 'a‬‬
‫;‪echo $result‬‬
‫>?‬

‫جملة التكرار ‪while‬‬

‫تستخدم جملة التكرار ‪ while‬لتكرار تنفيذ شفرة برمجية طالما كانت نتيجة الشرط التابع لھا تساوي ‪.TRUE‬‬
‫و الصيغة العامة لجملة ‪ while‬ھي كالتالي‪:‬‬
‫) ‪while ( condition‬‬
‫{‬
‫‪#
& 12‬ل آ‪ 3 t3‬اط ‪// SSP‬‬ ‫اŒء ا)
ا‪2‬ي ‪%‬‬
‫}‬
 ‫‪٢٨‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫‪<?php‬‬
‫;‪$i = 0‬‬
‫;‪$num = 50‬‬
‫) ‪while( $i < 10‬‬
‫{‬
‫;‪$num--‬‬
‫;‪$i++‬‬
‫}‬
‫;'>"‪echo'<div align="right‬‬
‫?‪echo'! t‬‬ ‫;'>‪ '.'<br/‬اار‬
‫;'>‪echo'$i='.$i.'<br/‬‬
‫;‪echo'$num='.$num‬‬
‫;'>‪echo'</div‬‬
‫>?‬

‫جملة التكرار توقفت عند‬

‫‪$i=10‬‬
‫‪$num=40‬‬

‫جملة التكرار ‪do-while‬‬

‫كما ھو مالحظ مع جملة التكرار ‪ ،while‬يتم اختبار الشرط في بداية التكرار‪ .‬على العكس في جملة التكرار ‪do-‬‬
‫‪ ، while‬فإن الشرط يتم اختباره في نھاية التكرار‪ .‬ھذا يعني أن التكرار سيتم تنفيذه مرة واحدة على األقل‪ .‬المثال‬
‫التالي نسخة معدلة من المثال السابق‪:‬‬

‫‪<?php‬‬
‫;‪$i = 0‬‬
‫;‪$num = 50‬‬
‫*‪/‬‬
‫&
 اار ه‪  12‬ا@ر اط &
‪ ,3‬اŒء اص ‪,‬‬
‫‪ 2 % •2‬اŒء ا)
ا}  اار )ة وا‪!#‬ة‬
‫‪ /‬ا‪?0‬‬
‫‪*/‬‬
‫‪do‬‬
‫{‬
‫;‪$num--‬‬
‫;‪$i++‬‬
‫;) ‪}while( $i < 10‬‬
‫;'>"‪echo'<div align="right‬‬
‫?‪echo'! t‬‬ ‫;'>‪ '.'<br/‬اار‬
‫;'>‪echo'$i='.$i.'<br/‬‬
‫;‪echo'$num='.$num‬‬
‫;'>‪echo'</div‬‬
‫>?‬
 ‫‪٢٩‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬
‫جملة التكرار ‪for‬‬

‫جملة التكرار تستخدم لتكرار جزء من الشفرة البرمجية لعدد محدد يتم تحديده في جملة التكرار ‪ ) for‬على عكس‬
‫جملة التكرار ‪ .(while‬و صيغتھا العامة كالتالي‪:‬‬

‫)‪for( initial value ; condition ; increment or decrement‬‬

‫{‬
‫اŒء ا)
ا‪2‬ي ‪#
& 12 %‬ل آن ? اط ‪// SSP‬‬
‫}‬

‫و كما ھو مالحظ من الصيغة العامة لجملة التكرار ‪ for‬فھي تتكون من ثالث اجزاء‪:‬‬
‫
‪ Initial value‬القيمة االبتدائية للعداد‪.‬‬
‫
‪ Condition‬الشرط‪.‬‬
‫
‪ Increment or decrement‬الزيادة أو النقصان‪.‬‬
‫المثال التالي يقوم بطباعة مجموع األعداد الزوجية من ‪ ٠‬الى ‪:١٠٠‬‬

‫‪<?php‬‬
‫;‪$count=0‬‬
‫)‪for($i=0;$i<=100;$i+=2‬‬
‫{‬
‫;‪$count = $count + $i‬‬
‫}‬
‫;‪echo $count‬‬
‫>?‬

‫‪2550‬‬

‫جمل ‪ for‬المتداخلة‬

‫كما عملنا مع جملة الشرط ‪ ،if‬فإنه من الممكن أن تتداخل أكثر من جملة ‪ .for‬المثال يوضح كيفية التعامل مع جمل‬
‫‪ for‬المتداخلة‪:‬‬
‫‪<?php‬‬
‫‪ -‬م ˜‪3‬ء !ول  ن )( ‪//‬‬
‫أ!ة ‪ P, 4‬ف ‪// 3‬‬
‫;">"\‪echo "<table border=\"1‬‬
‫{ )‪for ($row=1; $row<4; $row++‬‬
‫;">‪echo "<tr‬‬
‫{ )‪for ($col=1; $col<5; $col++‬‬
‫;">‪echo "<td>Row $row, Column $col</td‬‬
‫}‬
‫;">‪echo "</tr‬‬
‫}‬
‫;">‪echo "</table‬‬
‫>?‬

‫كما ھو واضح من المثال السابق‪ ،‬لدينا جملتي ‪ ،for‬األول ھي جملة ‪ for‬الخارجية ‪ outer loop‬و التي تقوم بطباعة‬
‫الصفوف‪ .‬و األخرى ھي جملة ‪ for‬الداخلية ‪ inner loop‬والمسئولة عن طباعة الخاليا داخل الصفوف‪.‬‬
 ‫‪٣٠‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫ايقاف تنفيذ التكرار ‪interrupting loop‬‬

‫الشرط‬ ‫في حال أردنا ايقاف تنفيذ التكرار ألي سبب كان فإننا نقوم بإدراج ‪ break‬داخل جملة شرط‪ .‬عند تحقق ذلك‬
‫ستقوم ‪ break‬بإنھاء جملة التكرار كاملة‪.‬‬

‫تجاھل تنفيذ التكرار ‪skipping loop‬‬

‫على النقيض من عبارة ‪ break‬التي تقوم بالخروج من التكرار‪ ،‬تُستخدم عبارة ‪ continue‬في حال أردنا تجاھل‬
‫التكرار الحالي و االنتقال الى قيمة التكرار التالية‪.‬‬

‫جملة التكرار ‪foreach‬‬

‫ھذا النوع من جمل التكرار يُستخدم فقط مع المصفوفات‪ .‬و تأتي على شكلين ‪ .‬و في كال الحالتين يتم استخدام متغير‬
‫مؤقت ‪ temporary variable‬للتعامل مع عناصر المصفوفة‪.‬‬

‫في حال أردنا التعامل فقط مع القيم لكل عنصر داخل المصفوفة ‪ ، elements values‬فتكون الصيغة‬ ‫
‬
‫العامة لجملة ‪ foreach‬كالتالي‪:‬‬

‫‪foreach( array_name‬‬ ‫‪as‬‬ ‫)‪temporary_variable‬‬

‫{‬
‫ة ) ‪ / 2‬ا> اš?‪//t‬‬
‫}‬

‫ھذا النوع جملة ‪ foreach‬يستخدم مع المصفوفات الرقمية ‪. numeric arrays‬‬

‫الشكل الثاني من جملة التكرار ‪ foreach‬يُستخدم عادة في حال أردنا التعامل مع القيم ‪ values‬و المفاتيح‬ ‫
‬
‫‪ keys‬لعناصر المصفوفة‪ .‬ھذا النوع يستخدم عادة مع المصفوفات الترابطية ‪.associative arrays‬‬
‫الصيغة العامة لھذا النوع من جملة ‪ foreach‬كالتالي‪:‬‬

‫)‪foreach( array_name as key => value‬‬

‫{‬
‫‪ / 2‬اح و ا‪// "' -‬‬ ‫ة )‬
‫}‬

‫الحقا‪ ،‬في الفصل الخامس سنتطرق الى العديد من األمثلة لجملة التكرار ‪ foreach‬عندما نتعامل مع المصفوفات‪.‬‬
 ٣١ ‫ التحكم في سير البرنامج‬: ‫الفصل الرابع‬

‫تطبيق عملي‬

.‫في ھذا التطبيق سنقوم بكتابة شفرة برمجية تقوم بطباعة جدول الضرب‬
<html>
<head>
<style>
/*
‫ ة‬css
‫ ا!ول‬,œ) ` ,
‫و ا‬
*/
table{
border:1px solid #333;
text-align:center;
}
td{
border:1px solid #CCC;
}
.higlight{
background-color:#0C9;
}
</style>
</head>
<body>
<?php
echo'<table>';
echo'<tr>';
//‫ ا!ول‬,œ) / ‫ظ‬S Q‫ء @ &ر‬3˜ ? ‫ه‬
echo'<td>*</td>';
/*
‫ول )( ا!ول‬0‫ ا‬u"‫ ا‬a (  ¢`) ‫ اار ا‬
*/
for($i=1;$i<=10;$i++)
{
echo "<td class='higlight'>$i</td>";
}
echo'</tr>';

/*
‫ي‬2‫ول &
ا!ول و ا‬0‫ م   ا' د ا‬- ‫ اار ار‬-#
١ ?‫!أ ( ا‬
‫ب‬¤‫  ا‬, ‫ م‬- @‫ اار ا!ا‬-#
>‫ب ا‬¤ ‫ م‬-3 ‫ ه‬j
‫ي ? ا' د‬2‫و ا‬
> t
١٠ !
, ‫ و‬١ ‫ ن رة ? )Œا!ة !أ ب‬% ‫ي‬2‫وا‬
*/
for($j=1;$j<=10;$j++)
{
echo "<tr><td class='higlight'>$j</td>";
for($t=1;$t<=10;$t++)
 ‫‪٣٢‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫;'>‪echo '<td>'.($t*$j).'</td‬‬
‫;'>‪echo'</tr‬‬
‫}‬
‫;'>‪echo'</table‬‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقه ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. multitable.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬
‫بعد االنتھاء من عملية الحفظ ‪،‬افتح متصفح االنترنت و اكتب العنوان التالي‪http://localhost/ multitable.php :‬‬
‫و من ثم الحظ الناتج‪.‬‬
‫‪٣٣‬‬ ‫الفصل الرابع ‪ :‬التحكم في سير البرنامج‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬أكتب برنامج يقوم بحساب مجموع االعداد الفردية من ‪ ١‬الى ‪. ١٠٠‬‬

‫‪ .٢‬ما الفرق بي كال من‪ while :‬و ‪ do-while‬؟‬

‫‪ .٣‬ما ھي أنواع جملة التكرار ‪ foreach‬و متى يُستخدم كل نوع؟‬

‫‪ .٤‬ما الفرق بين ‪ break‬و ‪ continue‬؟‬

‫‪ .٥‬أكتب برنامج يقوم بطباعة القيم من ‪ ١‬الى ‪ ١٠‬مع تجاھل طباعة القيمة ‪. ٥‬‬
 ‫‪٣٤‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫ھذا الفصل يغطي‪:‬‬

‫مفھوم المصفوفات‬ ‫
‬

‫المصفوفة الرقمية و كيفية التعامل معھا‬ ‫
‬
‫المصفوفة الترابطية و كيفية التعامل معھا‬ ‫
‬
‫المصفوفات ذات البعدين و المصفوفات الجاھزة‬ ‫
‬

‫ما ھي المصفوفة‬

‫المصفوفة ‪ array‬عبارة عن متغير لديه االمكانية لتخزين أكثر من قيمة حتى لو اختلفت أنواعھا‪ .‬كل مصفوفة تتكون‬
‫من مجموعة من العناصر‪ .‬و كل عنصر يتكون من جزئين قيمة ‪ value‬و مفتاح ‪ . key‬و تنقسم المصفوفات في‬
‫‪ PHP‬إلى ثالثة أنواع و ھي ‪:‬‬

‫المصفوفة الرقمية ‪.numeric array‬‬ ‫
‬

‫المصفوفة الترابطية ‪.associative array‬‬ ‫
‬
‫المصفوفات ذات البعدين ‪.multidimensional array‬‬ ‫
‬

‫المصفوفة الرقمية ‪numeric array‬‬

‫في ھذا النوع من المصفوفات يتم استخدام األرقام لفھرسة عناصر المصفوفة لتسھيل عملية التعامل معھا‬
‫الحقا‪.‬‬

‫‪key‬‬ ‫‪value‬‬
‫‪0‬‬ ‫أحمر‬
‫‪1‬‬ ‫أخضر‬
‫‪$colors‬‬ ‫أزرق‬
‫‪2‬‬
‫‪3‬‬ ‫أبيض‬
‫‪4‬‬ ‫أسود‬

‫كما ھو واضح من الشكل السابق ‪ ،‬فإن اسم المصفوفة ھو ‪ colors‬و تحتوي على خمس عناصر‪ .‬يتم بدء فھرسة‬
‫العناصر من الرقم صفر الى ن‪ ، (0 …. n-1) ١-‬حيث تمثل ن مجموع عناصر المصفوفة‪ .‬السترجاع قيمة عنصر‬
‫ما في المصفوفة‪ ،‬نقوم بكتابة اسم المصفوفة و من ثم قوسين مربعين ‪ ،‬و بينھما رقم المفتاح لذلك العنصر كالتالي‪:‬‬

‫]‪$colors[2‬‬
 ‫‪٣٥‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫طريقة انشاء المصفوفة الرقمية‬

‫يتم انشاء المصفوفة الرقمية بإحدى الطرق التاليه‪:‬‬

‫الطريقة األولى‬
‫=]‪$colors[0‬‬ ‫;'أ‪'#‬‬
‫=]‪$colors[1‬‬ ‫;'أ@‪'¤‬‬
‫=]‪$colors[2‬‬ ‫;'أزرق'‬
‫=]‪$colors[3‬‬ ‫;'أ©'‬
‫=]‪$colors[4‬‬ ‫;'أ‪ %‬د'‬

‫الطريقة الثانية‬
‫;)'أ‪ %‬د'‪',‬أ©'‪',‬أزرق'‪',‬أ@‪','¤‬أ‪$colors = array ('#‬‬

‫في ھذه الطريقة ‪ ،‬يالحظ أننا لم نقم بتحديد المفتاح لكل عنصر في المصفوفة‪ .‬بدال من ذلك استخدمنا الدالة ) (‪array‬‬
‫إلنشاء المصفوفة ‪ .‬و لذلك فإن عملية الفھرسة تتم بشكل تلقائي بدءا من أول عنصر )المفتاح ‪.( 0‬‬

‫طريقة استرجاع قيم المصفوفة‬

‫يمكن استرجاع قيم المصفوفة بأكثر من طريقة منھا ما يلي‪:‬‬

‫باستخدام جمل التكرار و أفضلھا جملة التكرار ‪. for‬‬ ‫
‬

‫‪<?php‬‬

‫;)'أ‪'،'#‬أ@‪'،'¤‬أزرق'‪'،‬أ©'‪'،‬أ‪ %‬د'( ‪$colors = array‬‬

‫)‪for($i=0;$i<sizeof($colors);$i++‬‬
‫{‬
‫;">‪echo "<h3>".$colors[$i]."</h3‬‬
‫}‬

‫>?‬

‫في ھذا المثال استخدمنا جملة التكرار ‪ for‬لطباعة قيم المصفوفة ‪ . colors‬و كما ھو واضح فإننا استخدمنا‬
‫الدالة ) (‪ sizeof‬لتحديد حجم المصفوفة لكي نتمكن من عرض جميع قيمھا‪ .‬أخيرا بدأنا التكرار عند القيمة‬
‫صفر ألن المفتاح ألول عنصر في المصفوفة الرقمية ھو ‪. 0‬‬
 ‫‪٣٦‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫باستخدام جملة التكرار ‪ foreach‬كما في المثال التالي‪:‬‬ ‫
‬

‫‪<?php‬‬

‫;)'أ‪'،'#‬أ@‪'،'¤‬أزرق'‪'،‬أ©'‪'،‬أ‪ %‬د'( ‪$colors = array‬‬

‫)‪foreach($colors as $value‬‬
‫{‬
‫;">‪echo "<h3>".$value."</h3‬‬
‫}‬

‫>?‬

‫في ھذا الطريقة استخدمنا النوع األول من جملة التكرار ‪) foreach‬تم شرحه في الفصل السابق(‬
‫السترجاع قيم المصفوفة الرقمية ‪ .‬في ھذا المثال ستقوم جملة ‪ foreach‬بتخزين قيمة أول عنصر داخل‬
‫المتغير المؤقت ‪ $value‬و من ثم نقوم بطباعة قيمة ذلك المتغير‪ .‬ستقوم ‪ foreach‬بعد ذلك بالعودة و تكرار‬
‫نفس الخطوات السابقة مع العنصر الثاني و ھكذا حتى االنتھاء من جميع عناصر المصفوفة الرقمية تلقائيا‪.‬‬

‫تغيير قيمة عنصر‬

‫عملية تغيير قيمة عنصر ما تتم بسھولة‪ .‬كل ما علينا عمله ھو كتابة اسم المصفوفة متبوع بالمفتاح للعنصر المحدد بين‬
‫قوسين مربعة و من ثم نقوم بإسناد القيمة الجديدة له‪.‬‬

‫‪<?php‬‬

‫;)'أ‪'،'#‬أ@‪'،'¤‬أزرق'‪'،‬أ©'‪'،‬أ‪ %‬د'( ‪$colors = array‬‬

‫ه ? > ? ا'" ا*‪//
3‬‬
‫;'‪$colors[1] = '#FFFFFF‬‬
‫)‪foreach($colors as $value‬‬
‫{‬
‫;">‪echo "<h3>".$value."</h3‬‬
‫}‬

‫>?‬

‫استرجاع حجم المصفوفة‬

‫السترجاع حجم مصفوفة ما ‪ ،‬باإلمكان استخدام الدالة ) (‪ count‬أو الدالة ) (‪ sizeof‬كالتالي‪:‬‬

‫;) ‪count( array_name‬‬

‫;)‪sizeof( array_name‬‬
 ‫‪٣٧‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫المصفوفة الترابطية ‪associative array‬‬

‫المصفوفة الترابطية مشابھه للمصفوفة الرقمية من ناحية الوظيفة لكنھا تختلف عنھا من ناحية عملية الفھرسة‪ .‬في ھذا‬
‫النوع من المصفوفات‪ ،‬يتم استخدام النصوص ‪ string‬في فھرسة عناصر المصفوفة بدال من االرقام‪.‬‬

‫‪key‬‬ ‫‪value‬‬
‫‪title‬‬ ‫البرمجة باستخدام ‪php‬‬
‫‪author‬‬ ‫محمد عبدﷲ‬
‫‪$books‬‬ ‫دار النشر‬
‫‪publisher‬‬
‫‪isbn‬‬ ‫‪١٢-٢٥٠-١٦٣‬‬

‫طريقة انشاء المصفوفة الترابطية‬

‫يتم انشاء المصفوفة الترابطية بإحدى الطرق التاليه‪:‬‬

‫الطريقة األولى‬
‫;'‪php‬ا) ‪!%‬ام ' =]'‪$books['title‬‬
‫;')‪$books['author']= 'T! !S‬‬
‫;'دار ا' =]'‪$books['publisher‬‬
‫;'‪$books['isbn']= '12-250-163‬‬

‫الطريقة الثانية‬
‫‪php',‬ا) ‪!%‬ام ' >= '‪$books = array('title‬‬
‫‪'author' => 'T! !S)' ,‬‬
‫‪',‬دار ا' >= '‪'publisher‬‬
‫;)'‪'isbn' => '12-250-163‬‬

‫و كما ھو مالحظ في الطريقة الثانية استخدمنا الدالة ) (‪. array‬كذلك فإننا استخدمنا الرمز >= للفصل بين القيمة‬
‫‪ value‬و المفتاح ‪.key‬‬
 ‫‪٣٨‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫طريقة استرجاع قيم المصفوفة‬

‫أسھل طريقة السترجاع قيم المصفوفة الترابطية ھو عن طريق استخدام جملة التكرار ‪. foreach‬‬

‫‪<?php‬‬

‫‪ php',‬ا) ‪!%‬ام' >= '‪$books = array('title‬‬

‫‪'author' => 'T! !S)' ,‬‬
‫‪',‬دار ا' >= '‪'publisher‬‬
‫;)'‪'isbn' => '12-250-163‬‬

‫)‪foreach($books as $key=>$value‬‬
‫{‬
‫;">‪echo "<h3>$key => $value</h3‬‬
‫}‬

‫>?‬

‫كما ھو واضح من المثال السابق فإننا قمنا بتعريف المصفوفة ‪ books‬و قمنا بتعبئة قيمھا كما ھو واضح كذلك‪ .‬بعد‬
‫ذلك قمنا باستخدام جملة التكرار ‪ foreach‬لطباعة قيم المصفوفة‪ .‬في ھذه الحالة قمنا باستخدام متغيرين مؤقتين‬
‫‪ temporary variables‬لتخزين القيم ‪ values‬و المفاتيح ‪ keys‬لعناصر المصفوفة الترابطية ‪ .‬في كل مرة سنقوم‬
‫بتخزين قيم و مفاتيح العنصر األول في المصفوفة في المتغيرين المؤقتين ثم الذي يليه و ھكذا حتى االنتھاء من كل‬
‫عناصر المصفوفة‪.‬‬

‫تغيير قيمة عنصر‬

‫كما سبق أن عملنا مع المصفوفة الرقمية من تغيير قيمة عنصر ‪ ،‬نستطيع عمل نفس الطريقة مع المصفوفة الترابطية‬
‫عن طريق تحديد المفتاح للعنصر المطلوب و من ثم إسناد القيمة الجديدة له‪.‬‬

‫‪<?php‬‬

‫‪ php',‬ا) ‪!%‬ام' >= '‪$books = array('title‬‬

‫‪'author' => 'T! !S)' ,‬‬
‫‪',‬دار ا' >= '‪'publisher‬‬
‫;)'‪'isbn' => '12-250-163‬‬

‫ه    ا اول‪//‬‬

‫;'‪$books['title'] = 'java programming‬‬
‫;]'‪echo $books['title‬‬

‫>?‬

‫في حال أردنا مسح عناصر المصفوفة السابقة ‪ books‬فإننا نكتب‬

‫;) (‪$books = array‬‬
 ‫‪٣٩‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫المصفوفات ذات البعدين ‪multidimensional array‬‬

‫كما ذكرنا سابقا بأن المصفوفة تُستخدم لتخزين أي نوع من البيانات‪ .‬و كما ذكرنا أيضا بأن المصفوفة تعتبر من أنواع‬
‫البيانات في ‪ . PHP‬لذلك نستطيع القول بأنه من الممكن تخزين مصفوفة كأحد عناصر مصفوفة أخرى‪ .‬في ھذه الحالة‬
‫تسمى المصفوفة التي تحتوي على مصفوفة كأحد عناصرھا بالمصفوفة ذات البعدين‪.‬‬
‫(‪$books = array‬‬
‫‪ php',‬ا) ‪!%‬ام' >= '‪array('title‬‬
‫‪'author' => 'T! !S)' ,‬‬
‫‪',‬دار ا' >= '‪'publisher‬‬
‫‪'isbn' => '12-250-163'),‬‬

‫‪',‬أ‪%%‬ت ? ا! ا‪3‬ت' >= '‪array('title‬‬

‫‪ !@' ,‬ا'
' >= '‪'author‬‬
‫‪',‬دار اروق' >= '‪'publisher‬‬
‫‪'isbn' => '22-433-987'),‬‬

‫;)‬

‫في ھذه الحالة إذا اردنا االشارة الى عنصر محدد داخل المصفوفة ذات البعدين فنتبع الطريقة التالية‪:‬‬
‫‪$books[1][ 'isbn']; // value is 12-250-163‬‬

‫المصفوفات العامة الجاھزة ‪PHP’s built-in super global arrays‬‬

‫تحتوي ‪ PHP‬على عدد من المصفوفات المبنية مسبقا و التي تستخدم بشكل متكرر في ‪ PHP‬و تسھل عملية الوصول‬
‫للبيانات حتى لو كانت من صفحات مختلفة‪ .‬جميع ھذه المصفوفات تبدأ بعالمة الدوالر ‪ $‬متبوعة بشرطة سفلية _ ‪.‬‬
‫من أشھر ھذه المصفوفات ‪ $_GET ،‬و ‪ $_POST‬و اللتان تحتويان على بيانات ھامة يتم تمريرھا عن طريق‬
‫نماذج ‪) HTML‬كما سنرى الحقا(‪ .‬كل المصفوفات العامة تُعتبر مصفوفات ترابطية‪ .‬المفاتيح لكال من ‪ $_POST‬و‬
‫‪ $_GET‬يتم اشتقاقھما من اسماء العناصر في نموذج ‪.HTML‬‬
‫فلو افترضنا أنه لدينا النموج التالي‪:‬‬

‫‪Address:‬‬

‫‪Send‬‬

‫لنفترض أن أسم مربع النص ھذا ھو ‪ address‬و الطريقة المستخدمة في ارسال النموذج ھي ‪ .POST‬عند الضغط‬
‫على مربع االرسال ‪ ،submit‬يقوم مفسر ‪ PHP‬تلقائيا بإنشاء العنصر ]'‪ $_POST['address‬و الذي ستكون قيمته‬
‫ھي القيمة المدخلة في مربع النص من قبل المستخدم‪.‬‬
 ‫‪٤٠‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫من أشھر المصفوفات العامة في ‪ PHP‬ما يلي‪:‬‬

‫‪$_POST‬‬ ‫تحتوي على بيانات مرسلة عن طريق نموذج ‪ HTML‬باستخدام طريقة ‪. post‬‬
‫‪$_GET‬‬ ‫تحتوي على بيانات مرسلة عن طريق نموذج ‪ HTML‬باستخدام طريقة ‪. get‬‬
‫‪$_SERVER‬‬ ‫تحتوي على معلومات مخزنة بواسطة خادم الويب ‪ Web Server‬كـ‪ :‬اسم الملف و مساره‪.‬‬
‫‪$_FILE‬‬ ‫يحتوي معلومات خاصة بالملفات المحملة‪.‬‬
‫‪$_SESSION‬‬ ‫يحتوي على معلومات يتم حفظھا ‪ ،‬لكي تستخدم في أكثر من صفحة‪.‬‬

‫يجب األخذ في االعتبار أن اسماء المصفوفات العامة في ‪ PHP‬تكتب بأحرف كبيرة ‪ ،‬باإلضافة‬
‫لذلك فھي حساسة لحالة الحرف ‪.case sensitive‬‬

‫استخدام الدالة ) (‪ print_r‬مع المصفوفات‬

‫في حال اردنا معرفة المحتوى لمصفوفة ما‪ ،‬نقوم باستدعاء الدالة ) (‪ print_r‬و التي تقوم بعرض محتوى المصفوفة‬
‫ال ُممررة لھا كالتالي‪:‬‬

‫;) ‪print_r( $book‬‬

 ‫‪٤١‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫تطبيق عملي‬

‫في ھذا التطبيق سنقوم بكتابة شفرة برمجية تقوم بتخزين درجات الطالب في مصفوفة رقمية ‪ ،‬و من ثم نقوم بطباعة‬
‫إحصائية عن درجات الطالب تشمل الطلبة الناجحين و الراسبين و بعض االحصائيات األخرى‪.‬‬
‫قم بفتح برنامج ‪ .Notepad++‬بعد ذلك سيقوم البرنامج بإنشاء مساحة عمل فارغة‪ .‬قم بكتابة الشفرة التالية‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫*‪/‬‬
‫‪ css‬ة‬
‫‪ ,œ) ` ,‬ا!ول‬ ‫و ا
‬
‫‪*/‬‬
‫{‪body‬‬
‫;‪direction:rtl‬‬
‫}‬
‫{‪fieldset‬‬
‫;‪width:300px‬‬
‫}‬

‫{‪legend‬‬
‫;‪font-weight:bold‬‬
‫}‬

‫{‪p‬‬
‫;‪background-color:#CCC‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<?php‬‬
‫إ‪3‬ء )" & ‪ S‬ي ‪ /‬درت ا |ب‪//‬‬
‫(‪$grades = array‬‬
‫‪25, 64, 23, 87, 56, 38, 78, 57, 98, 95,‬‬
‫‪81, 67, 75, 76, 74, 82, 36, 39,‬‬
‫‪54, 43, 49, 65, 69, 69, 78, 17, 91‬‬
‫;)‬
‫‪`#‬ب !د ا!رت ‪//‬‬
‫;)‪$count = count($grades‬‬
‫إ
) ع ا!رت و ا‪ -‬ا‪0‬و ه
‪// P‬‬
‫;‪$total = 0‬‬
‫!د ا  اا‪ (%‬و ا‪ -‬ا‪0‬و ه
‪//P‬‬
‫;‪$fail = 0‬‬
‫!د ا  ا‪ (S‬و ا‪ -‬ا‪0‬و ه
‪//P‬‬
‫;‪$success = 0‬‬

‫)‪foreach($grades as $grade‬‬
‫{‬
‫;‪$total += $grade‬‬
 ‫‪٤٢‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫)‪if ($grade < 60‬‬

‫{‬
‫;‪$fail++‬‬
‫}‬
‫)‪if ($grade >= 60‬‬
‫{‬
‫;‪$success++‬‬
‫}‬
‫}‬
‫) ‪ °%‬درت ا |ب *‪/‬‬
‫‪!` round‬م ‪?0 -‬ب ر? ‪OSP‬‬
‫‪*/‬‬
‫;)‪$avg = round($total / $count‬‬
‫‪ a‬ا‪// ±"#²‬‬
‫;'>‪</legend‬إ‪ ±"#‬ا!رت &
ادة>‪echo'<fieldset><legend‬‬
‫;">‪!: $count</p‬د ا  ا`( &
ادة ه >‪echo"<p‬‬
‫;">‪ °% ): $avg</p‬ا!رت &
ادة ه >‪echo"<p‬‬
‫;">‪!: $success</p‬د ا  ا‪
& (S‬ادة>‪echo"<p‬‬
‫;">‪!: $fail</p‬د ا  اا‪
& (%‬ادة ه >‪echo"<p‬‬
‫;'>‪echo'</fieldset‬‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقه ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. grades.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬
‫بعد االنتھاء من عملية الحفظ ‪،‬افتح متصفح االنترنت و اكتب العنوان التالي‪ http://localhost/grades.php :‬و‬
‫من ثم الحظ الناتج‪.‬‬
 ‫‪٤٣‬‬ ‫الفصل الخامس ‪ :‬التعامل مع المصفوفات ‪Arrays‬‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬ما الفرق بين المصفوفة المفھرسة و المصفوفة الرقمية؟‬

‫‪ .٢‬باستخدام جملة التكرار ‪ ،do-while‬اكتب برنامج يقوم بطباعة قيم المصفوفة التالية‪:‬‬

‫;)'‪$fruit = array('Apple','Orange','Pineapple' ,'Strawberry‬‬

‫‪ .٣‬كيف نستطيع معرفة حجم المصفوفة السابقة؟‬

‫‪ .٤‬قم بتغيير قيمة العنصر الثالث ليصبح ‪. Banana :‬‬

 ‫‪٤٤‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫ھذا الفصل يغطي‪:‬‬

‫مفھوم الدوال‬ ‫
‬

‫أنواع الدوال في ‪PHP‬‬ ‫
‬
‫مجال رؤية المتغيرات‬ ‫
‬
‫تضمين الملفات الخارجية‬ ‫
‬

‫ما ھي الدالة ‪function definition‬‬

‫الدالة ‪ function‬ھي عبارة عن شفرة برمجية تقوم بتنفيذ مھمة محددة‪ .‬و ھي مھمة ألنھا تساعد على فصل جزء من‬
‫البرنامج بغرض إعادة استخدامه أكثر من مرة‪ .‬و تنقسم الدوال في ‪ PHP‬الى قسمين‪:‬‬

‫الدوال المبنية مسبقا ‪. Built-in functions‬‬ ‫
‬

‫الدوال المعرفة من قبل المستخدم ‪.User defined functions‬‬ ‫
‬

‫الدوال المبنية مسبقا ‪Built-in functions‬‬

‫تحتوي ‪ PHP‬على أكثر من ‪ ١٠٠٠‬دالة مبنية مسبقا و جاھزة لالستخدام ‪ ،‬كما يتم إضافة العديد من الدوال بشكل‬
‫مستمر ‪ .‬لذلك تعتبر ‪ PHP‬من أكثر لغات برمجة الويب تكيفا مع التوسع الكبير في التطبيقات الخاصة بشبكة‬
‫االنترنت‪ .‬و للمزيد عن دوال ‪ PHP‬الجاھزة يمكن زيارة الموقع‪ http://php.net/quickref.php :‬و اختيار أي‬
‫دالة لإلطالع على كيفية التعامل معھا ‪.‬‬

‫الدوال المعرفة من قبل المستخدم ‪User defined functions‬‬

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

‫معطيات الدالة ‪. parameters‬‬ ‫
‬

‫جسم الدالة ‪.body‬‬ ‫
‬
‫القيمة المرجعة ‪.returning value‬‬ ‫
‬

‫عند تعريف أي دالة يجب البدء بالكلمة المحجوزة ‪ function‬متبوعة باسم الدالة و من ثم قوسين صغيرين متبوعة‬
‫بجسم الدالة كالتالي‪:‬‬

‫‪function‬‬ ‫) (‪function_name‬‬
‫{‬
‫اة ا) دا@ ` ا!ا ‪//‬‬
‫}‬
 ‫‪٤٥‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫في حال كانت الدالة تحتوي على معطيات فيصبح شكل الدالة كما يلي‪:‬‬

‫‪function‬‬ ‫) …‪function_name( arg1, arg2,‬‬

‫{‬
‫اة ا) دا@ ` ا!ا ‪//‬‬
‫}‬
‫بعد تعريف الدالة يجب أن نقوم باستدعاء الدالة‪ .‬و عملية االستدعاء تتم بكتابة اسم الدالة متبوع بقوسين‪ .‬في حال كانت‬
‫الدالة ُمعرفة بمعطيات فيجب كتابة المعطيات عند استدعاء الدالة‪ .‬في حال لم يتم استدعاء الدالة فلن يتم تنفيذھا‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬آ ا‪3‬ء دا !ون )' ت>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫‪<?php‬‬
‫'‪ u‬ا!ا ‪//‬‬

‫)(‪function writeMessage‬‬
‫{‬
‫;'إ‪3‬ء دا !ون )' ت'‪echo‬‬
‫}‬
‫إ‪!%‬ء ا!ا ‪//‬‬
‫;)(‪writeMessage‬‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫كما ھو واضح ‪ ،‬قمنا بتعريف دالة اسمھا )(‪ writeMessage‬بدون معطيات ‪ .‬عند استدعاء الدالة ستقوم بتنفيذ‬
‫جملة الطباعة ‪ echo‬و طباعة النص المضمن بداخلھا‪ .‬المثال التالي يوضح كيفية تعريف و استدعاء دالة بمعطيات‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬آ ا‪3‬ء دا ' ت>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫‪<?php‬‬
‫'‪ u‬دا ' ت ‪//‬‬

‫)‪function add($number1,$number2‬‬
‫{‬
‫;‪$result = $number1 + $number2‬‬
‫;‪  B 3'.$result‬ا} ه ‪echo':‬‬
‫}‬
‫إ‪!%‬ء ا!ا ‪//‬‬
‫;)‪add(10,20‬‬
‫>?‬
‫>‪</body></html‬‬
 ‫‪٤٦‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫إرجاع قيمة دالة ‪returning value‬‬

‫يمكن أن تقوم الدالة بإرجاع قيمة عن طريق العبارة ‪ . return‬عند الوصول للعبارة ‪ return‬فإن الدالة ستتوقف‪ .‬و‬
‫سيتم ارجاع القيمة للسطر من البرنامج الذي تم فيه استدعاء الدالة‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬آ ا‪3‬ء دا ' ت>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫‪<?php‬‬
‫'‪ u‬دا ' ت ‪//‬‬

‫)‪function add($number1,$number2‬‬
‫{‬
‫;‪$result = $number1 + $number2‬‬
‫أرع ? ا> ‪// $result‬‬
‫;‪return $result‬‬
‫}‬
‫ا‪!%‬ء ا!ا و ا‪ -‬ا' )( ا!ا ‪  ` }%‬ا
‪//‬‬
‫;)‪$return_value = add(10,20‬‬
‫;‪  B 3'. $return_value‬ا} ه ‪echo':‬‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫إسناد قيم افتراضية للمعطيات‬

‫يمكن إسناد قيم افتراضية لمعطيات الدالة ‪ parameters‬يتم استخدمھا في حال تم استدعاء الدالة بدون تمرير قيم‬
‫لمعطياتھا‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬آ ا‪3‬ء دا ' ت>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫‪<?php‬‬
‫'‪ u‬دا ' ت ‪//‬‬

‫)‪function add($number1=30,$number2=40‬‬
‫{‬
‫;‪$result = $number1 + $number2‬‬
‫ارع ? ا> ‪// $result‬‬
‫;‪return $result‬‬
‫}‬
 ‫‪٤٧‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫ا‪!%‬ء ا!ا !ون  )' ت ‪//‬‬

‫;)(‪$call_without_values = add‬‬
‫ا‪!%‬ء ا!ا )}  )' ت ‪//‬‬
‫;)‪$call_with_values = add(53,32‬‬

‫;‪ B 3:'. $call_without_values‬ا‪!%‬ء ا!ا !ون )' ت'‪echo‬‬

‫;‪ B 3:'. $call_with_values‬ا‪!%‬ء ا!ا ' ت>‪echo'<br/‬‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ناتج استدعاء الدالة بدون معطيات‪٧٠:‬‬

‫ناتج استدعاء الدالة بمعطيات‪٨٥:‬‬

‫مجال رؤية المتغير ‪variable scope‬‬

‫من المھم أن نعرف أن أي متغير يتم تعريفه داخل جسم الدالة فسوف يكون متاحا للدالة فقط‪ .‬بمعنى أنه من غير‬
‫الممكن االشارة لذلك المتغير خارج إطار الدالة‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪)</title‬ل رؤ ا>>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫‪<?php‬‬
‫'‪ u‬دا ' ت ‪//‬‬
‫)‪function add($number1=30,$number2=40‬‬
‫{‬
‫;‪$result = $number1 + $number2‬‬
‫}‬

‫;)‪add(53,32‬‬
‫;‪ ?: '.$result‬ا> ه
'‪echo‬‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪Notice: Undefined variable: result in C:\xampp\htdocs\test\test2.php on line 16‬‬

‫قيمة المتغير ھي‪:‬‬

‫كما ھو واضح من المثال السابق ‪ ،‬المتغير ‪ $result‬متغير محلي ‪ local‬خاص بالدالة ‪ . add‬عندما قمنا بمحاولة‬
‫طباعة قيمة المتغير خارج الدالة ‪ ،‬عرض مفسر ‪ PHP‬رسالة خطأ تفيد بأن المتغير غير معرف‪.‬‬
 ‫‪٤٨‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫و في حال أردنا أن يكون المتغير ‪ $result‬متاحا داخل و خارج الدالة أيضا ‪ ،‬فنقوم بكتابة العبارة ‪ global‬قبل اسم‬
‫المتغير‪ .‬في ھذه الحالة سيصبح المتغير ‪ $result‬متغيرا عاما ‪ .public‬و سيتأثر بأي تغيير يحدث على المتغير‬
‫خارج إطار الدالة‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬آ ا‪3‬ء دا ' ت>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫‪<?php‬‬

‫;‪$result = 0‬‬
‫'‪ u‬دا ' ت ‪//‬‬
‫)‪function add($number1=30,$number2=40‬‬
‫{‬
‫ا> ا´ن ا‪>) OP‬ا ) ‪//‬‬
‫;‪global $result‬‬
‫;‪$result = $number1 + $number2‬‬
‫}‬

‫;)‪add(53,32‬‬

‫;‪ ?: '.$result‬ا> ه
'‪echo‬‬

‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫قيمة المتغير ھي‪٨٥ :‬‬

‫تضمين شفرة برمجية من ملف آخر ‪PHP file inclusion‬‬

‫تدعم ‪ PHP‬إمكانية تضمين محتوى ملف ‪ PHP‬في ملف ‪ PHP‬آخر قبل أن يقوم الخادم بإتمام عملية التنفيذ‪ .‬ھذه‬
‫الطريقة تساعد في إعادة استخدام الشفرة برمجية ‪ . reusability‬و تكون شائعة في تضمين شفرات برمجية تُستخدم‬
‫بشكل متكرر عند بناء موقع ديناميكي خصوصا ملفات ‪. copy right footer ، header‬‬
‫و لتحقيق ذلك نستطيع استخدام الدالتين التاليتين‪:‬‬

‫) (‪include‬‬ ‫
‬
‫) (‪require‬‬ ‫
‬

‫كال الدالتين تقوم بتضمين شفرة برمجية من ملف آخر‪ .‬لكن الفرق بينھما ھو في كيفية تعامل الدالتين مع األخطاء‪.‬‬

‫في حال استخدمنا ) (‪ ، include‬و كان الملف المضمن الذي يحتوي على الشفرة البرمجية المدرجة غير موجود ‪،‬‬
‫ففي ھذه الحالة سيقوم مفسر ‪ PHP‬بإنشاء رسالة تحذير ‪ warning message‬و من ثم يتابع تنفيذ بقية البرنامج‪.‬‬
 ‫‪٤٩‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫على النقيض تماما في حال استخدمنا الدالة ) (‪ require‬و كان الملف المضمن غير موجود ‪ ،‬فسيقوم مفسر ‪PHP‬‬
‫بإنشاء رسالة خطأ مميت ‪ fatal error‬و من ثم ايقاف تنفيذ البرنامج‪.‬‬

‫‪menu.php‬‬
‫‪<a‬‬ ‫‪</a> -‬ا‪href="home.php">`±‬‬
‫‪<a‬‬ ‫‪)!@</a> -‬ت>"‪href="services.php‬‬
‫‪<a‬‬ ‫‪ #</a> -‬ل ا ?}>"‪href="about.php‬‬
‫‪<a‬‬ ‫>‪</a> <br /‬ا " >"‪href="contactus.php‬‬

‫‪index.php‬‬
‫>‪<html‬‬
‫>"‪<body dir="rtl‬‬
‫>? ;)"‪<?php include("menu.php‬‬
‫>‪ PHP</p‬ه‪2‬ي ‪ (¤ -a‬ات &
>‪<p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫كما ھو واضح من المثال السابق استخدمنا الدالة ) (‪ include‬لتضمين محتوى الملف ‪ menu.php‬في الملف‬
‫‪ .index.php‬و بنفس الطريقة نستطيع استخدام الدالة ) (‪ require‬كذلك‪.‬‬

‫تطبيق عملي‬

‫في ھذا التطبيق سنقوم بتصميم واجھة لموقع تخيلي‪ .‬و الھدف ھو تطبيق ميزة تضمين الملفات في ‪. PHP‬‬
‫عندما نقوم بتصميم الواجھة الرئيسية لموقع فيُنصح دائما بفصل األجزاء المتكررة من ملفات مستقلة بھدف استخدامھا في كامل‬
‫صفحات الموقع‪ .‬فمثال شعار الموقع و القوائم الرئيسية )تسمى رأس الصفحة أو ‪ (header‬تكون ثابتة لذلك نقوم بوضعھا في‬
‫ملف مستقل‪ .‬ايضا حقوق الموقع و التي تظھر عادة في أسفل الصفحة )تسمى ذيل الصفحة أو ‪ (footer‬تكون ثابتة لذلك نقوم‬
‫بوضعھا في ملف مستقل‪ .‬و ھكذا مع أي محتوى يتم استخدامه عبر كل ملفات الموقع فيُنصح أن يوضع في ملف مستقل‪ .‬ھذه‬
‫الطريقة تساعد في إعادة استخدام الشفرة البرمجية ‪ reusability‬كما تسھل من عملية التطوير و الصيانة للموقع‪.‬‬
‫بعد أن نقوم بفصل المحتوى المتكرر نقوم بإنشاء الصفحة الرئيسية للموقع و من ثم تضمين المحتوى المطلوب‬
‫باستخدام ) (‪ include‬أو ) (‪.require‬‬

‫قم بفتح برنامج ‪ .Notepad++‬بعد ذلك سيقوم البرنامج بإنشاء مساحة عمل فارغة‪ .‬قم بكتابة الشفرة التالية‪:‬‬
 ٥٠ Functions in, PHP ‫ الدوال في‬: ‫الفصل السادس‬

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style>
body{
direction:rtl;
margin:0px 200px 0px 200px;
font-family:"Times New Roman", Times, serif;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
text-decoration:underline;
color:#FFF;
}
#logo{
background-color:#6CC;
}
#titleLogo{
text-align:right;
font-size:42px;
font-weight:bold;
padding-right:50px;
}
#menu{
padding-top:5px;
text-align:center;
}
#menu td{
background-color:#6CC;
font-size:16px;
font-weight:bold;
}
#content{
margin-top:20px;
margin-bottom:20px;
font-size:16px;
font-weight:bold;
}

#footer{
margin-top:100px;
padding:2px;
background-color:#6CC;
text-align:center;
font-size:16px;
font-weight:bold;
}
 ‫‪٥١‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫>‪</style‬‬
‫>‪ </title‬ا"  ا?
>‪<title‬‬
‫>‪</head‬‬

‫>‪<body‬‬
‫>"‪<div id="header‬‬
‫>"‪<table width="100%" id="logo‬‬
‫>‪<tr‬‬
‫>‪ </td‬ا"  ا?
>"‪<td width="86%" id="titleLogo‬‬
‫‪<td‬‬ ‫‪width="14%"><img‬‬ ‫"‪src="cammera.png‬‬ ‫"‪width="128‬‬
‫>‪height="128" /></td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫>"‪<table width="100%" cellpadding="3" id="menu‬‬
‫>‪<tr‬‬
‫>‪</a></td‬ا‪<td><a href="home.php">`±‬‬
‫>‪</a></td‬دروس ا" >"‪<td><a href="tutorials.php‬‬
‫>‪ </a></td‬ا)ات>"‪<td><a href="camsworld.php‬‬
‫>‪ #</a></td‬ل ا ?}>"‪<td><a href="about.php‬‬
‫>‪</a></td‬ا " >"‪<td><a href="contact.php‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫>‪</div‬‬
‫>‪ ,3 --‬رأس ا"‪<!-- S‬‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقه ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. header.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬

‫اآلن قم بالضغط على مفتاح ‪ Ctrl+N‬إلنشاء مساحة عمل فارغة ثم قم بكتابة الشفرة التالية‪.‬‬

‫>‪! --‬ا ‪ 2‬ا"‪<!-- S‬‬

‫>"‪<div id="footer‬‬
‫>‪ }&copy;</p‬ا‪ -S‬ق )‪ }?  ¶ S‬ا ا ا?
>‪<p‬‬
‫>‪</p‬اء ?اءة 'ت ا‪!%‬ام ا ?}>‪<p‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقه ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. footer.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬
 ‫‪٥٢‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫مرة أخرى ‪ ،‬قم بالضغط على مفتاح ‪ Ctrl+N‬إلنشاء مساحة عمل فارغة ثم قم بكتابة الشفرة التالية‪.‬‬

‫‪<?php‬‬
‫‪ header.php‬ه ? ‪ S) (¤‬ى ا‪//u‬‬
‫;)'‪require('header.php‬‬
‫>?‬
‫>"‪<div id="content‬‬
‫‪ 
&  #).‬ا"  ا?
‬
‫ه‪2‬ا ا ?} ‪!,‬ف إ‪23 !- /‬ة ( )"ة ( &( ا"  ا?
‬
‫و `'!‪ 3‬أن ‪!-3‬م Œا‪ ±‬ا ا'!! )( ا!روس و ا"‪ # O±‬ل‬
‫‪ (&.‬ا" ‬
‫>‪</div‬‬
‫‪<?php‬‬
‫‪ footer.php‬ه ? ‪ S) (¤‬ى ا‪//u‬‬
‫;)'‪require('footer.php‬‬
‫>?‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقه ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. index.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬

‫بعد االنتھاء من عملية الحفظ ‪،‬افتح متصفح االنترنت و اكتب العنوان التالي‪ http://localhost/index.php :‬و من‬
‫ثم الحظ الناتج‪.‬‬
‫‪٥٣‬‬ ‫الفصل السادس ‪ :‬الدوال في ‪Functions in, PHP‬‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬ما ھي أنواع الدوال في ‪ PHP‬مع ذكر مثال توضيحي عن كل نوع‪.‬‬

‫‪ .٢‬ما ھي الطرق المستخدمة في ‪ PHP‬لتضمين شفرة برمجية من ملف آخر‪ ،‬و ما الفرق بينھا‪.‬‬

‫‪ .٣‬أكتب برنامج يقوم بإنشاء دالة تقوم بتحويل العملة من دوالر أسترالي إلى ﷼ سعودي ‪ ،‬مع‬

‫األخذ في االعتبار أن سعر الصرف غير ثابت‪.‬‬

‫‪ .٤‬ما ھي الفائدة من جعل المحتوى المتكرر في ملفات مستقلة؟‬

 ٥٤ Handling forms ‫ التعامل مع النماذج‬: ‫الفصل السابع‬

:‫ھذا الفصل يغطي‬

‫كيفية التعامل مع البيانات المرسلة من خالل النموذج‬

.‫الطرق المستخدمة في ارسال البيانات و الفرق بينھا‬

‫كيف التعامل مع الروابط التفاعلية‬

‫ لذلك تكون الحاجة ملحة للتعامل مع البيانات المدخلة عن طريق‬.‫ أكثر تعقيدا‬PHP ‫مع مرور الوقت تصبح تطبيقات‬
.HTML forms ‫ و أكثر الشائعة استخداما للتعامل مع ُمدخالت المستخدم ھو عن طريق النماذج‬.‫المستخدم‬

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style>
/*
‫ ة‬css
‫ ا!ول‬,œ) ` ,
‫و ا‬
*/
body{
direction:rtl;
}
form{
font-weight:bold;
}
.button{
font-weight:bold;
width:75px;
}

</style>
</head>
<body>
<form name="contact " method="post" action="contact.php">
<p>%‫ا‬:
<input type="text" name="name" />
</p>
<p>
3‫ا! او‬:
<input type="text" name="email" />
</p>
<p>%‫ا‬:
<textarea name="message" cols="45" rows="5"></textarea>
</p>
<p>
<input class="button" type="submit" name="send"
value="%‫ "أر‬/>
<input class="button" type="reset" name="reset" value="O`)"
/>
</p>
</form>
</body></html>
 ‫‪٥٥‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫من خالل الشفرة السابقة ‪ ،‬قمنا بإنشاء نموذج يحتوي على حقل إلدخال االسم من نوع نص ‪ ، text‬حقل إلدخال البريد‬
‫االلكتروني من نوع نص كذلك‪ .‬باإلضافة الى مساحة نص ‪ textarea‬إلدخال الرسالة ‪ .‬أخيرا لدينا زر إلرسال‬
‫البيانات من نوع ‪ submit‬و زر لمسح قيم الحقول من نوع ‪.reset‬‬
‫كما يجب اإلنتباه الى انه عند الرغبة في التعامل مع بيانات حقل معين‪ ،‬يجب تحديد اسم ذلك الحقل عن طريق‬
‫الخاصية ‪ name‬لنتمكن من استخدامھا الحقا ‪.‬‬
‫بقي أن نشير أن الوسم ‪ form‬يحتوي على خاصيتين مھمتين‪:‬‬

‫
الخاصية ‪ method‬و تستخدم لتحديد كيفية ارسال البيانات و لھا قيمتين‪:‬‬

‫‪post o‬‬
‫‪get o‬‬
‫
و الخاصية األخرى ‪ action‬و تستخدم لتحديد الصفحة التي سوف تستقبل البيانات المرسلة من النموذج‪.‬‬

‫الفرق بين استخدام ‪ post‬و ‪get‬‬

‫‪post‬‬ ‫‪get‬‬ ‫الخاصية‬

‫البيانات المرسلة ال يتم حفظھا‬ ‫البيانات المرسلة يتم حفظھا في تاريخ متصفح‬ ‫التاريخ ‪history‬‬
‫في تاريخ متصفح االنترنت‬ ‫االنترنت ‪.Browser history‬‬
‫‪.Browser history‬‬
‫يتم عرض صندوق حواري‬ ‫يتم تنفيذ البيانات مباشرة‪.‬‬ ‫زر العودة أو تحديث‬
‫للمستخدم لتأكيد عملية التنفيذ‬ ‫الصفحة‬
‫ال يمكن وضعھا في المفضلة‬ ‫يمكن وضعھا في المفضلة‬ ‫المفضلة ‪Bookmark‬‬
‫يمكن ارسالھا و ال تعاني من‬ ‫يمكن ارسالھا لكنھا محدودة و تختلف من متصفح‬ ‫المتغيرات المرسلة‬
‫مشاكل طول البيانات‪.‬‬ ‫آلخر‪.‬‬ ‫‪parameters‬‬
‫صعبة العبث ألن البيانات يتم‬ ‫سھلة العبث ألن البيانات تُعرض للمستخدم في‬ ‫العبث ‪hacking‬‬
‫تشفيرھا و ال تعرض في عنوان‬ ‫عنوان ‪.URL‬‬
‫‪. URL‬‬
‫تُستخدم عند التعامل مع بيانات‬ ‫يجب أن ال يتم استخدامھا عند ارسال بيانات‬ ‫االستخدام ‪usability‬‬
‫تتطلب سرية عالية‪.‬‬ ‫حساسة مثل كلمات المرور أو أرقام بطاقات‬
‫االئتمان‪.‬‬

‫كيفية قراءة البيانات ال ُمرسلة من النموذج‬

‫كما سبق و أن أشرنا في الفصل الخامس ‪ ،‬ھناك عدد من المصفوفات العامة في ‪ PHP‬تُستخدم ألغراض محددة‪ .‬من‬
‫ضمن ھذه المصفوفات المصفوفتين ‪ $_POST‬و ‪ $_GET‬و التي تُستخدمان لجمع البيانات ال ُمرسلة عبر النموذج‪.‬‬
‫بمعنى أننا نقوم بالنظر للنموذج ‪ form‬و تحديدا للخاصية ‪ . method‬إذا كانت القيمة ھي ‪ post‬فإن البيانات ال ُمرسلة‬
‫من النموذج سيتم تخزينھا في المصفوفة العامة ‪ $_POST‬و العكس صحيح إذا كانت القيمة ھي ‪ get‬فإن البيانات‬
‫ال ُمرسلة من النموذج سيتم تخزينھا في المصفوفة العامة ‪.$_GET‬‬
‫بعد ذلك نقوم بكتابة قوسين مربعة ] [ و من ثم نقوم بكتابة اسم الحقل و التي تمثل قيمة الخاصية ‪name‬‬
‫لعناصر النموذج بين عالمات اقتباس مفردة أو مزدوجة‪.‬‬
 ‫‪٥٦‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫‪order.html‬‬
‫‪...‬‬
‫>'‪<form action='ordere.php' method='post‬‬
‫>‪:<input type='text' name='name'/‬ا‪%‬‬
‫>‪: :<input type='text' name='phone'/‬ا‪u ,‬‬
‫‪...‬‬

‫‪order.php‬‬ ‫الصفحة المستقبلة للبيانات‬

‫‪<?php‬‬
‫‪...‬‬
‫;]'‪echo $_POST['name‬‬ ‫طريقة ارسال البيانات ‪post‬‬
‫;]'‪echo $_POST['phone‬‬
‫‪...‬‬
‫>?‬

‫سنقوم اآلن بالعودة للمثال األول في ھذا الفصل و سنقوم بحفظ الشفرة السابقة باسم ‪ contact.html‬و في نفس المكان‬
‫الذي تعودنا لحفظ ملفاتنا فيه )داخل المجلد االفتراضي ‪.( htdocs‬‬

‫اآلن سنقوم بإنشاء الصفحة التي سوف تستقبل البيانات و الموضحة في الخاصية '‪ action=' contact.php‬في‬
‫النموذج السابق‪ .‬و كما ال يجب أن ننسى الخاصية األخرى المھمة و التي تحدد طريقة ارسال البيانات وھي الخاصية‬
‫'‪.method = 'post‬‬

‫‪<?php‬‬
‫*‪/‬‬ ‫&
اŒء ا
? '‪>) u‬ات 
‪ ,& ¸S3‬ا‪-‬‬
‫‪*/‬ا‪|@ () %‬ل ا ذج‬
‫;]'‪$name = $_POST['name‬‬
‫;]'‪$email = $_POST['email‬‬
‫;]'‪$message = $_POST['message‬‬
‫;'>";‪echo'<div style="direction:rtl;font-size:16px‬‬
‫ا أ@
اŒا‪  ±‬ا‪3 ') •P‬ت ر‪echo'<h2> •%‬‬
‫;'>‪:</h2‬آ
‬
‫;'>‪echo'<hr align="right" style="width:500px"/‬‬
‫;">‪:</b>$name</p‬ا‪echo"<p><b>%‬‬
‫;">‪:</b>$email</p‬ا! او‪echo"<p><b>
3‬‬
‫;">‪:</b>$message</p‬ا‪echo"<p><b>%‬‬
‫;'>‪echo'</div‬‬
‫>?‬

‫نقوم بحفظ الشفرة السابقة باسم ‪ contact.php‬داخل المجلد االفتراضي و ستكون ھذه الصفحة ھي المسئولة عن‬
‫استقبال و التعامل مع البيانات المرسلة من الصفحة ‪.contact.html‬‬
‫نقوم اآلن باستدعاء الصفحة التي تحتوي على النموذج كالتالي ‪http://localhost/contact.html‬‬
 ‫‪٥٧‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫]'‪$_POST['name‬‬

‫]'‪$_POST['email‬‬

‫]'‪$_POST['message‬‬

‫نقوم بتعبئة البيانات كما ھو واضح و من ثم نضغط على زر االرسال‪ .‬عند الضغط على زر االرسال سوف تُرسل‬
‫البيانات للصفحة ‪ contact.php‬و التي ستقوم بطباعة البيانات كما يلي‪:‬‬

‫ارسال النموذج لنفس الصفحة‬

‫في بعض الحاالت قد يكون من األفضل ارسال النموذج لنفس الصفحة لتتم معالجته بدال من ارسال الى صفحة أخرى‬
‫مستقلة‪ .‬الفائدة من ھذه الخطوة أن البيانات ال ُمدخلة في النموذج تبقى ‪ ،‬مما يتيح للمستخدم تعديل البيانات الخاطئة‬
‫فقط‪.‬‬
‫لكن ستواجھنا مشكلة بأن مفسر ‪ PHP‬سيقوم بتنفيذ شفرة ‪ PHP‬حتى و إن لم يتم ارسال النموذج؟‬
‫لذلك الحل أن يتم حصر الشفرة البرمجية داخل جملة شرط‪ .‬و يتحقق الشرط فقط عندما يتم ارسال النموذج و بالتالي‬
‫يتم تنفيذ الشفرة البرمجية التي ستتعامل مع البيانات المرسلة من النموذج‪.‬‬
‫و لكي نرسل النموذج لنفس الصفحة سنستخدم المصفوفة العامة الجاھزة ‪ $_SERVER‬مع المتغير‬
‫‪ SCRIPT_NAME‬و الذي يحتوي على اسم الصفحة التي يتم تنفيذھا حاليا و نضعھا داخل الخاصية ‪ action‬في‬
‫النموذج‪ .‬سنقوم بالتعديل على الملفين السابقين ‪ contact.html‬و ‪ contact.php‬بحيث يصبح النموذج والشفرة‬
‫البرمجية في صفحة واحدة‪.‬‬
 ٥٨ Handling forms ‫ التعامل مع النماذج‬: ‫الفصل السابع‬

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style>
body{
direction:rtl;
}
form{
font-weight:bold;
}
.button{
font-weight:bold;
width:75px;
}
</style>
</head>
<body>
<?php
if(array_key_exists('send',$_POST))
{
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
echo'<div style="direction:rtl;font-size:16px;">';
echo'<h2> •%‫ت ر‬3 ') •P‫  ا‬±‫ا أ@
اŒا‬

‫آ‬:</h2>';
echo'<hr align="right" style="width:500px"/>';
echo"<p><b>%‫ا‬:</b>$name</p>";
echo"<p><b>
3‫ا! او‬:</b>$email</p>";
echo"<p><b>%‫ا‬:</b>$message</p>";
echo'</div><br/>';
}
?>
<form name="contact " method="post" action="<?php echo
$_SERVER['SCRIPT_NAME'];?>">
<p>%‫ا‬:
<input type="text" name="name" />
</p>
<p>
3‫ا! او‬:
<input type="text" name="email" />
</p>
<p>%‫ا‬:
<textarea name="message" cols="45" rows="5"></textarea>
<p>
<input class="button" type="submit" name="send"
value="%‫ "أر‬/>
<input class="button" type="reset" name="reset" value="O`)"
/>
</p>
</form></body></html>
 ‫‪٥٩‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫في الشفرة السابقة استخدمنا الدالة ) (‪ array_key_exists‬و التي تأخذ معطيين‪ .‬األول عبارة عن مفتاح ‪ key‬يتم‬
‫البحث عن وجوده في مصفوفة و التي تمثل المعطى الثاني للدالة‪ .‬المفتاح في المثال السابق يمثل اسم زر اإلرسال‬
‫‪ send‬و المصفوفة ھي المصفوفة العامة ‪.$_POST‬‬
‫تقوم الدالة بالبحث عن المفتاح ‪ send‬داخل المصفوفة ‪ $_POST‬ألن طريقة ارسال البيانات في النموذج ھي ‪.post‬‬
‫عند الضغط على زر االرسال سيتم ارسال المفتاح ‪ send‬للمصفوفة ‪ $_POST‬و ستكون نتيجة اختبار الدالة ھي‬
‫‪ true‬و يتم تنفيذ الجزء التابع لجملة الشرط ‪ if‬و العكس صحيح اذا لم يتم ارسال النموذج أي سوف تكون نتيجة‬
‫اختبار الدالة ھي ‪.false‬‬
‫في الجزء ‪ action‬الخاص بالنموذج قمنا بطباعة المتغير العام ]'‪ $_SERVER['SCRIPT_NAME‬و الذي‬
‫سيقوم بإرجاع اسم الصفحة الحالية ‪.contact.php‬‬

‫التعامل مع أزرار االختيار ‪radio‬‬

‫أزرار االختيار ‪ radio‬من العناصر البسيطة و الفعالة عند التعامل مع نماذج ‪ .HTML‬في الوضع االفتراضي‪ ،‬نقوم‬
‫بتحديد أحد أزرار االختيار ‪ radio‬ليكون ھو القيمة االفتراضية وذلك عن طريق أعطاءه الخاصية ‪ checked‬للداللة‬
‫على أن ھذا الحقل ھو القيمة االفتراضية‪ .‬بمعنى أنه‪ ،‬إذا لم يقم المستخدم بإختيار أيا من أزرار االختيار‪ ،‬فسيتم ارسال‬
‫قيمة الحقل المحدد مسبقا كقيمة افتراضية الى ايا من المصفوفتين ‪ $_POST‬أو ‪ $_GET‬عند ارسال النموذج‪.‬‬
‫في حال كانت قيم أزرار االختيار ‪ radio‬مرتبطة ببعضھا‪ ،‬مثل لو أردنا تحديد ما إذا كان المستخدم ذكر أم أنثى‪ .‬ففي‬
‫ھذه الحالة يجب أن نعطي جميع أزرار االختيار نفس االسم‪.‬‬

‫حماية صفحة انترنت‬

‫في بعض الحاالت قد نحتاج الى حماية صفحة انترنت من الوصول اليھا مباشرة عن طريق كتابة عنوان الصفحة في‬
‫شريط عنوان المتصفح‪.‬‬
‫لنفترض أنه لدينا صفحة انترنت باسم ‪ admin.php‬و للوصول لھذه الصفحة بطريقه صحيحة يجب على المستخدم‬
‫المرور أوال عبر الصفحة ‪ login.php‬و تعبئة بيانات الدخول‪ .‬إذا حاول المستخدم الوصول للصفحة ‪admin.php‬‬
‫عن طريق كتابة عنوان الصفحة مباشرة في شريط عنوان المتصفح سنقوم بمنعه و طباعة رسالة مناسبة‪.‬‬

‫‪login.php‬‬ ‫‪admin.php‬‬

‫×‬
 ٦٠ Handling forms ‫ التعامل مع النماذج‬: ‫الفصل السابع‬

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style>
body{
direction:rtl;
}
form{
font-weight:bold;
}
.button{
font-weight:bold;
width:75px;
}
</style>
</head>
<body>
<form method="post" action="admin.php">
<p>‫ ا`!م‬%‫ا‬
<label for="user_name"></label>
<input type="text" name="user_name" id="user_name" />
</p>
<p>‫آ اور‬
<label for="password"></label>
<input type="password" name="password" id="password" />
</p>
<p>
3‫آ‬2
<input type="checkbox" name="remeber_me" id="remeber_me" />
<label for="remeber_me"></label>
</p>
<p>
<input type="submit" name="login" id="login" value="‫"د@ ل‬
/>
</p>
</form>
</body>
</html>

login.php ‫احفظ الصفحة السابقة باسم‬

<?php
if(array_key_exists('login',$_POST))
{
echo'<h1>‫ ادارة‬SP
& • #)</h1>';
}
else
{
echo'S"‫ ا‬12, ‫ ل‬P  #|P •! ';
}
?>
 ‫‪٦١‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫احفظ الصفحة السابقة باسم ‪.admin.php‬‬

‫قم اآلن بكتابة العنوان التالي ‪ http://localhost/login.php‬و من ثم قم بتعبئة النموذج و اضغط على زر دخول‪.‬‬
‫بعد ذلك قم بفتح نافذة جديدة من متصفح االنترنت عن طريق الضغط على ‪ CRTL + N‬و من ثم قم بكتابة العنوان‬
‫التالي ‪ ، http://localhost/admin.php‬اآلن الحظ الناتج‪.‬‬

‫الروابط التفاعلية ‪dynamic links‬‬

‫في الفصول السابقة كنا نقوم بإرسال البيانات عن طريق النماذج باستخدام ‪ POST‬أو ‪ GET‬إلى صفحات ‪PHP‬‬
‫لكي يتم معالجتھا‪ .‬لكن ماذا لو أردنا بدال من إرسال المعلومات عن طريق النماذج أن نقوم بإرسالھا عن طريق‬
‫الروابط التشعبية ضمن الوسم >‪ .<a‬في ھذه الحالة سيتم إرسال البيانات إلى المصفوفة العامة ‪) $_GET‬عبارة عن‬
‫مصفوفة ترابطية ‪ . ( associative array‬و كما ھو معلوم لدينا أنه في المصفوفات الترابطية المفاتيح عبارة عن‬
‫نصوص و ليست أرقام‪ .‬لذلك لو أردنا أن نضيف عنصر داخل المصفوفة ‪ $_GET‬و له القيمة ‪ Ahmad‬فنقوم‬
‫بما يلي ‪:‬‬

‫; "‪$_GET[ 'name' ] = "Ahmad‬‬

‫لكن كيف سيتم إرسال رابط تشعبي و يتم تخزين قيمه داخل المصفوفة ‪ $_GET‬؟‬

‫لكي نقوم بذلك نقوم أوال بكتابة اسم الصفحة التي ستقوم باستقبال البيانات ‪ ،‬مثال ‪ login.php‬متبوعة بعالمة استفھام‬
‫? و من ثم اسم المفتاح متبوعا بعالمة يساوي = يليھا قيمة العنصر كالتالي‪:‬‬
‫>"‪<a href= "login.php?name=Ahmad‬‬

‫القيمة المفتاح اسم الصفحة متبوع بعالمة ?‬

‫في حال أردنا إضافة أكثر من قيمة نقوم بالفصل بين القيم كالتالي‪:‬‬

‫>"‪<A href= "login.php?name=Ahmad&password=12345‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫‪<meta‬‬ ‫"‪http-equiv="Content-Type‬‬ ‫;‪content="text/html‬‬
‫>‪charset=utf-8" /‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪direction:rtl‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<a‬‬
‫ا'
"<اوا‪href="dynamicLinks.php?firstName=T!&&lastName= °‬‬
‫>‪ </a><br /‬ا‬
 ‫‪٦٢‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫‪<?php‬‬
‫)‪if(array_key_exists('firstName',$_GET‬‬
‫))‪&& array_key_exists('lastName',$_GET‬‬
‫{‬
‫]'‪echo'<h2> • #) ' . $_GET['firstName‬‬ ‫‪.‬‬ ‫'‬ ‫'‬ ‫‪.‬‬
‫;'>‪$_GET['lastName'] .'</h2‬‬
‫}‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪http://localhost/dynamicLinks.php‬‬

‫العلي=‪&&lastName‬عبدﷲ=‪http://localhost/dynamicLinks.php?firstName‬‬

‫استخدام الدالة ) (‪trim‬‬

‫تعتبر الدالة ) (‪ trim‬من دوال ‪ PHP‬المبنية مسبقا وتُستخدم إلزالة المسافات الفارغة في بداية و نھاية النص ‪string‬‬
‫‪ .‬و تعتبر من الدوال التي يشيع استخدامھا مع نماذج ‪ HTML‬و ذلك إلزالة أي مساحات فارغة في القيم المدخلة من‬
‫قبل المستخدم قبل إجراء أي عملية على تلك البيانات كتخزينھا في قواعد البيانات مثال‪.‬‬

‫‪<?php‬‬
‫‪// remove leading and trailing whitespace‬‬
‫‪// output 'a b‬‬ ‫'‪c‬‬
‫‪$str = ' a b‬‬ ‫‪c‬‬ ‫;'‬
‫;)‪echo trim($str‬‬
‫>?‬
 ٦٣ Handling forms ‫ التعامل مع النماذج‬: ‫الفصل السابع‬

‫تطبيق عملي‬

‫ وقبل أن يتمكن الزائر من البدء في تعبئة النموذج يجب أن‬.‫في ھذا التطبيق سنقوم بتصميم نموذج تسجيل زائر جديد‬
.‫يقوم الزائر بالموافقة على الشروط التسجيل‬
:‫ قم بكتابة الشفرة التالية‬.‫ بعد ذلك سيقوم البرنامج بإنشاء مساحة عمل فارغة‬.Notepad++ ‫قم بفتح برنامج‬

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>`‫ ذج ا‬3</title>
<style>
body{
direction:rtl;
}
.agreement{
border:1px solid #CCC;
width:350px;
padding:5px;
}
form input{
border:1px solid #CCC;
}
form .button{
width:80px;
}
form fieldset{
width:350px;
border:1px solid #CCC;
}
form fieldset legend{
font-weight:bold;
border:1px solid #CCC;
}

</style>

</head>

<body>
<?php
/*
`‫ ا ? ا‬/ &‫ ا ا‬t ‫ )( ) اذا‬R|@ () -S3 ‫اط‬
 ‫ام‬.
`‫ل  ذج ا‬-3‫ (  ا‬-&‫اذا   ا ا‬
*/
if(!array_key_exists('agreement',$_POST) &&
!array_key_exists('register',$_POST))
{
 ٦٤ Handling forms ‫ التعامل مع النماذج‬: ‫الفصل السابع‬

echo"
<p class='agreement'>
‫ وط‬/ -&‫   ا` &
ا ?} ا ا‬
‫!ام ا ?} " رة‬%‫( ا‬¤
‫ا`  ?} و ا‬
‫ ا ص‬/ ,‫ و!م ا'½  ?} أو ا‬. ....
</p>
<form method='post'>
<p>`‫ وط ا‬/ &‫<أوا‬input type='checkbox'
name='agreement'/></p>
<p><input type='submit' name='accept_agreement'
value='‫ 'ا ة ا‬class='button'/></p>
</form>
";
}
/*
!'   ‫ ا ? ا` و‬/ &‫ )( ان ا`!م وا‬-S3 ‫ه‬
`‫ ا‬
*/
elseif(array_key_exists('agreement',$_POST) &&
!array_key_exists('register',$_POST))
{
?>
<form method='post'>
<fieldset >
<legend>!! ¤ ` ‫ ذج‬3</legend>
<table>
<tr>
<td>)‫ ا‬%‫*ا‬: </td>
<td><input type='text' name='name' id='name'
maxlength="50" /></td>
</tr>
<tr>
<td>
3‫*ا! او‬:</td>
<td><input type='text' name='email' id='email'
maxlength="50" /></td>
</tr>
<tr>
<td>‫ ا`!م‬%‫*ا‬:</td>
<td><input type='text' name='username' id='username'
maxlength="50" /></td>
</tr>
<tr>
<td>‫*آ اور‬:</td>
<td><input type='password' name='password'
id='password' maxlength="50" /></td>
</tr>
<tr>
<td><br />* ‫ )  ب‬-S‫<ا‬/td><td><br /><input
type='submit' name='register' value='`‫'ا م ا‬
class="button"/></td>
</tr>
 ‫‪٦٥‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫>‪</table‬‬
‫>‪</fieldset‬‬
‫>‪</form‬‬
‫‪<?php‬‬
‫}‬
‫‪else‬‬
‫{‬
‫;]'‪$name = $_POST['name‬‬
‫;]'‪$username = $_POST['username‬‬
‫;]'‪$email = $_POST['email‬‬
‫;]'‪$pass = $_POST['password‬‬

‫ا • ا@
اŒا‪ / ±‬ا م  ا`'‪echo‬‬ ‫;'‬

‫;'‪3:‬ت `• آ 
'‪echo‬‬
‫;‪:' . $name‬ا‪ %‬آ)|>‪echo'<br/‬‬
‫;‪:' . $username‬ا‪ %‬ا`!م>‪echo'<br/‬‬
‫;‪:' . $email‬ا! او‪echo'<br/>
3‬‬
‫;‪:' . $pass‬آ اور>‪echo'<br/‬‬
‫}‬
‫>?‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪ .‬و من النافذة التالية قم بما يلي‪:‬‬ ‫بعد االنتھاء من كتابة الشفرة السابقة ‪ ،‬قم بالنقر على زر حفظ‬
‫‪ .١‬قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد ‪.C:\xammp\htdocs‬‬
‫‪ .٢‬قم بتسمية الملف باسم ‪. register.php‬‬
‫‪ .٣‬غير نوع الملف ‪ Save as type‬من القائمة المنسدلة ليصبح )*‪ All types(*.‬أو ‪PHP Hypertext‬‬
‫‪.Preprocessor files‬‬
‫‪ .٤‬انقر على الزر ‪.Save‬‬

‫بعد االنتھاء من عملية الحفظ ‪،‬افتح متصفح االنترنت و اكتب العنوان التالي‪ http://localhost/register.php :‬و‬
‫من ثم الحظ الناتج‪.‬‬
‫‪٦٦‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫‪١‬‬

‫‪٢‬‬

‫‪٣‬‬
‫‪٦٧‬‬ ‫الفصل السابع ‪ :‬التعامل مع النماذج ‪Handling forms‬‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬عند التعامل مع النماذج ما ھو الفرق بين طريقة إرسال البيانات ‪ POST‬و ‪. GET‬‬

‫‪ .٢‬ما وظيفة كال من الدوال التالية‪:‬‬

‫) (‪array_key_exists‬‬ ‫
‬

‫) (‪trim‬‬ ‫
‬

‫‪ .٣‬كيف يمكن التحقق من أزرار االختيار ‪ radio‬في حال كانت تتبع لمجموعة واحدة‪.‬‬

‫‪ .٤‬أين سيتم تخزين القيم المرسلة من خالل الرابط التفاعلي ‪.‬‬

 ‫‪٦٨‬‬ ‫الفصل الثامن ‪ :‬التحقق من بيانات النماذج ‪Form validation‬‬

‫ھذا الفصل يغطي‪:‬‬

‫أھمية عملية التحقق من البيانات ال ُمدخلة‪.‬‬ ‫
‬

‫مفھوم التعبيرات العادية ‪.Regular Expressions‬‬ ‫
‬
‫كيف مطابقة االنماط في ‪.PHP‬‬ ‫
‬

‫عند التعامل مع نماذج ‪ HTML‬بغرض السماح للمستخدمين بإدخال بيانات محددة فيجب علينا التحقق من تلك‬
‫البيانات قبل إجراء أي عملية عليھا‪ .‬و تكمن أھمية إجراء عملية التحقق ألننا ال نضمن أن تكون البيانات ال ُمدخلة‬
‫صحيحة‪ ،‬وبدون إجراء عملية التحقق قد تتسبب تلك البيانات بحدوث نتائج غير متوقعة قد يصعب معالجتھا الحقا‪.‬‬
‫لذلك يجب أن ال نثق في المستخدم ألن األخطاء قد تحدث عمدا أو عن غير قصد‪.‬‬
‫عملية التحقق من البيانات يمكن أن تتم بواسطة طريقتين‪:‬‬

‫عن طريق جھة العميل ‪ client-side‬باستخدام ‪ JavaScript‬مثال‪.‬‬ ‫
‬

‫عن طريق جھة الخادم ‪ server-side‬باستخدام ‪.php‬‬ ‫
‬

‫ما ھي األشياء التي يجب أن نتحقق منھا‬

‫التحقق من الحقول الفارغة‪.‬‬ ‫
‬

‫التحقق من البريد االلكتروني‪.‬‬ ‫
‬
‫طول البيانات ال ُمدخلة‪.‬‬ ‫
‬
‫حقول األرقام فقط‪.‬‬ ‫
‬
‫حقول الحروف فقط‪.‬‬ ‫
‬
‫حقول الحروف و األرقام‪.‬‬ ‫
‬
‫إزالة وسوم ‪.HTML‬‬ ‫
‬

‫و لتحقيق ذلك يوجد طرق كثيرة في ‪ PHP‬و من ضمنھا التعبيرات العادية ‪ . Regular Expressions‬في ھذه‬
‫الطريقة يتم البحث عن نمط ‪ pattern‬ضمن نص محدد‪.‬‬

‫أساسيات التعبيرات العادية ‪Regular Expressions Basics‬‬

‫داخل النص‬ ‫في التعبيرات العادية ُمعظم الحروف تطابق نفسھا‪ .‬فمثال لو بحثنا عن التعبير "‪"foo‬‬
‫"‪ "John plays football‬فستتم المطابقة لظھور التعبير "‪ "foo‬داخل النص السابق‪.‬‬
‫بعض الحروف الخاصة ‪ special characters‬لھا معنى خاص في التعبيرات العادية‪.‬‬
‫فمثال عالمة ‪ $‬تُستخدم للبحث عن نمط في نھاية النص‪ .‬و العالمة ^ تُستخدم للبحث عن نمط في بداية النص‪ .‬و النقطة‬
‫‪ .‬تُستخدم للبحث عن أي حرف ماعدا السطر الجديد‪.‬‬
‫و في حال أردنا البحث عن نمط داخل نص بعدد مرات محدد فيمكن استخدام الرموز التالية‪:‬‬

‫الرمز * للبحث عن نمط داخل نص بعدد صفر أو أكثر من المرات‪.‬‬ ‫
‬

‫الرمز ‪ +‬للبحث عن نمط داخل نص بعدد واحد أو أكثر من المرات ‪.‬‬ ‫
‬
‫الرمز ؟ للبحث عن نمط داخل نص بعدد صفر أو واحد من المرات‪.‬‬ ‫
‬
 ‫‪٦٩‬‬ ‫الفصل الثامن ‪ :‬التحقق من بيانات النماذج ‪Form validation‬‬

‫الرمز } { للبحث عن نمط داخل نص بعدد مرات مختلف‪ .‬فمثال }‪ {n‬على فرض أن ‪ n‬عبارة عن رقم‬ ‫
‬
‫صحيح تعني عدد مرات ظھور النمط داخل النص‪ .‬و التعبير }‪ {n,m‬تعني مرات ظھور النمط داخل النص‬
‫على األقل ‪ n‬و على األكثر ‪. m‬‬

‫الجدول التالي يحتوي على عدد من األمثلة عن التعبيرات العادية‪.‬‬

‫سيتم مطابقة‪..‬‬ ‫التعبير العادي ‪Regular Expression‬‬

‫سيتم مطابقة الكلمة ‪foo‬‬ ‫‪foo‬‬
‫سيتم مطابقة الكلمة ‪ foo‬في بداية النص‬ ‫‪^foo‬‬
‫سيتم مطابقة الكلمة ‪ foo‬في نھاية النص‬ ‫‪foo$‬‬
‫يجب أن يحتوي النص على الكلمة ‪ foo‬فقط‪.‬‬ ‫‪^foo$‬‬
‫سيتم مطابقة ‪ b ، a‬أو ‪c‬‬ ‫]‪[abc‬‬
‫أي حرف صغير‬ ‫]‪[a-z‬‬
‫سيتم مطابقة إما ‪ gif‬أو ‪jpeg‬‬ ‫)‪(gif|jpeg‬‬
‫سيتم مطابقة أي حرف صغير بعدد مرات ظھور مرة أو أكثر‪.‬‬ ‫‪[a-z]+‬‬
‫سيتم مطابقة أي رقم أو نقطة أو اشارة سالب‬ ‫]‪[0-9\.\-‬‬
‫سيتم مطابقة كلمة واحدة فقط تحتوي على األقل على حرف أو‬ ‫‪^[a-zA-Z0-9_]{1,}$‬‬
‫رقم أو شرطة سفلية‪.‬‬
‫أي رمز ) يجب أن ال يكون حرفا أو رقما(‬ ‫]‪[^A-Za-z0-9‬‬
‫سيتم مطابقة أي كلمة تحتوي على ثالثة أحرف أو أربعة أرقام‪.‬‬ ‫)}‪([A-Z]{3}|[0-9]{4‬‬

‫كل األنماط عند استخدامھا بشكل عملي يجب أن توضع بين شرطتين مائلة ‪./ /‬‬

‫للمزيد حول التعبيرات العادية ‪ Regular Expressions‬يمكن زيارة الموقع التالي‪:‬‬

‫‪http://www.regular-expressions.info/‬‬

‫مطابقة األنماط ‪Matching Patterns‬‬

‫أخيرا لمطابقة األنماط في ‪ PHP‬سنقوم بإستخدام الدالة ) (‪ . preg_match‬يتم تمرير عدد من المعطيات‬
‫‪ parameters‬لھذه الدالة‪ .‬من ضمن ھذه المعطيات ‪ ،‬النمط ‪ pattern‬و النص ‪ string‬الذي سيتم البحث داخله‪ .‬في‬
‫حال و جدت الدالة النمط داخل النص ستقوم بإرجاع القيمة ‪) 1‬التي تماثل ‪ (true‬بخالف ذلك ستقوم بإرجاع القيمة ‪0‬‬
‫)التي تماثل ‪.(false‬‬
‫‪<?php‬‬
‫;"‪$string = "abcdef‬‬
‫;'‪$pattern = '/^def/‬‬
‫;)‪echo preg_match($pattern,$string‬‬
‫‪ %‬ن ا ‪//٠ B‬‬
‫>?‬
 ٧٠ Form validation ‫ التحقق من بيانات النماذج‬: ‫الفصل الثامن‬

<?php
$string = "defabc";
$pattern = '/^def/';
echo preg_match($pattern,$string);
//١ B ‫ ن ا‬%
?>

‫تطبيق عملي‬

‫ في ھذا التطبيق لن يتمكن الزائر من إرسال النموذج إال بعد‬.‫في ھذا التطبيق سنقوم بتصميم نموذج تسجيل زائر جديد‬
‫ كما يجب أن تكون المعلومات ال ُمدخلة صحيحة و لتحقيق ذلك سنقوم باستخدام‬.‫أن يقوم بتعبئة كامل النموذج‬
.validation ‫ للقيام بعملية التحقق‬preg_match() ‫ مع الدالة‬Regular Expressions ‫التعبيرات العادية‬
:‫ قم بكتابة الشفرة التالية‬.‫ بعد ذلك سيقوم البرنامج بإنشاء مساحة عمل فارغة‬.Notepad++ ‫قم بفتح برنامج‬

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>` ‫ ذج‬3</title>
<style type="text/css">
body{
direction:rtl;
}

form input{
border:1px solid #CCC;
}
#result{
font-weight:bold;
color:#930;
text-align:center;
}

table{
border:2px solid #0C3;
width:500px;
padding:10px;
}
table caption{
background-color:#0C3;
font-weight:bold;
}
.submit{
width:75px;
}

.errorMessage{
text-align:right;
٧١ Form validation ‫ التحقق من بيانات النماذج‬: ‫الفصل الثامن‬

font-weight:normal;
}
</style>
</head>
<body>
<form action="" method="post">
<table align="center">
<caption>!! ‫ ذج ` )`!م‬3</caption>
<tr><td colspan="2" id="result">
<?php
if(array_key_exists('register',$_POST))
{
$errors=array();

if(empty($_POST['name']))
{
array_push($errors,'%| ? ‫اء إد@ل‬.');
}
elseif(preg_match('/[\'\/~`\!@#\$%\^&\*\(\)_\-
\+=\{\}\[\]\|;:"\<\>,\.\?\\\]/', $_POST['name']))
{
array_push($errors,' Q ? / ‫ ي‬S @!‫ ا‬%‫ا‬
SP.');
}

if(empty($_POST['username']))
{
array_push($errors,' %² ? ‫اد@ل‬ ‫اء‬
‫;)'ا`!م‬
}
elseif(!preg_match("/^[A-Za-z][A-Za-z0-
9_]+$/",$_POST['username']))
{
array_push($errors,' ‫ ا`!م‬%² @!‫ا‬ -‫ا‬
SP Q.');
}

if(empty($_POST['password']))
{
array_push($errors,'  ? ‫اد@ل‬ ‫اء‬
‫;)'اور‬
}
elseif(!preg_match("/^[A-Za-z0-9_]*[A-Z][A-Za-z0-
9_]*$/",$_POST['password']))
{
array_push($errors,' ‫ ا!@  اور‬-‫ا‬
SP Q.');
}
٧٢ Form validation ‫ التحقق من بيانات النماذج‬: ‫الفصل الثامن‬

elseif(strlen($_POST['password'])<6)
{
array_push($errors,' ٦ ( -  ‫آ اور  أن‬
‫ت‬3@.');
}
elseif($_POST['password2'] !== $_POST['password'])
{
array_push($errors,' ‫¿آ! آ اور    آ‬
@!ُ
‫;)'اور ا‬
}
if(empty($_POST['email']))
{
array_push($errors,' ! ? ‫اء اد@ل‬

3‫;)'او‬
}
elseif(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-
9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})]*$/",$_POST['email']))
{
array_push($errors,' ! @!‫ا‬ -‫ا‬
SP Q
3‫و‬²‫ا‬.');
}

if(empty($_POST['phone']))
{
array_push($errors,'u , ? ‫;)'اء اد@ل‬
}
elseif(!preg_match("/^[0-9]{10,12}$/",$_POST['phone']))
{
array_push($errors,' Q u , @!‫ ا‬-‫ا‬
SP.');
}

if(empty($_POST['gender']))
{
array_push($errors,'•` !!S ‫;)'اء‬
}

if(empty($_POST['from']))
{
array_push($errors,'‫!! !ك‬S ‫اء‬.');
}

if(empty($_POST['agreement']))
{
array_push($errors,' ‫وط‬ / -&‫ا ا‬ ‫اء‬
`‫ا‬.');
}
٧٣ Form validation ‫ التحقق من بيانات النماذج‬: ‫الفصل الثامن‬

if($errors)
{
echo'<ol class="errorMessage">';
foreach($errors as $value)
{
echo '<li>'.$value.'</li>';
}
echo'</ol>';
}
else
{
echo'.‫  ا` ح‬t ‫! أ‬- • ‫;' ا‬
}
}
?>
</td></tr>
<tr>
<td>|)‫ آ‬%‫<ا‬/td>
<td><input name="name" id="name" size="20" maxlength="20"
type="text" value="<?php echo @$_POST['name']?>"/>*</td>
</tr>
<tr>
<td>‫ ا`!م‬%‫<ا‬/td>
<td><input name="username" id="username" size="20"
maxlength="20" type="text" value="<?php echo
@$_POST['username']?>"/>*</td>
</tr>
<tr>
<td>‫<آ اور‬/td>
<td><input name="password" id="password" size="20"
maxlength="15" type="password">*</td>
</tr>
<tr>
<td>‫< ¿آ! آ اور‬/td>
<td><input name="password2" id="password2" size="20"
maxlength="15" type="password">*</td>
</tr>
<tr>
<td>
3‫<ا! او‬/td>
<td><input name="email" size="35" maxlength="30"
type="text" value="<?php echo @$_POST['email']?>">*</td>
</tr>
<tr>
<td>u ,‫<ر? ا‬/label></td>
<td><input name="phone" size="15" maxlength="15"
type="text" value="<?php echo @$_POST['phone']?>">*</td>
</tr>
<tr>
<td>‫<ا‬/td>
<td>‫<ذآ‬input name="gender" type="radio" value="male"><br
/>
 ٧٤ Form validation ‫ التحقق من بيانات النماذج‬: ‫الفصل الثامن‬

/*3‫<أ‬input name="gender" type="radio" value="female">*

</td>
</tr>
<tr>
<td>!‫<ا‬/td>
<td>
<select name="from">
<option value="" selected></option>
<option value="‫<ا`' د>"ا`' د‬/option>
<option value=" ?"> ?</option>
<option value="t ‫>"ا‬t ‫<ا‬/option>
</select>*
</td>
</tr>
<tr>
<td>`‫ وط ا‬/ -&‫<ا ا‬/td>
<td><input name="agreement" type="checkbox"/></td>
</tr>
<tr>
<td><input name="register" value="` " type="submit"
class="submit"/></td>
<td align="left">*   ) ‫ ل‬-S‫<ا‬/td>
</tr>
</table>
</form>
</body>
</html>

:‫ و من النافذة التالية قم بما يلي‬. ‫ قم بالنقر على زر حفظ‬، ‫بعد االنتھاء من كتابة الشفرة السابقة‬
.C:\xammp\htdocs ‫ قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد‬.١
. form.php ‫ قم بتسمية الملف باسم‬.٢
PHP Hypertext ‫ أو‬All types(*.*) ‫ من القائمة المنسدلة ليصبح‬Save as type ‫ غير نوع الملف‬.٣
.Preprocessor files
.Save ‫ انقر على الزر‬.٤

‫ و من‬http://localhost/form.php :‫افتح متصفح االنترنت و اكتب العنوان التالي‬، ‫بعد االنتھاء من عملية الحفظ‬
.‫ثم الحظ الناتج‬
 ‫‪٧٥‬‬ ‫الفصل الثامن ‪ :‬التحقق من بيانات النماذج ‪Form validation‬‬

‫في حال قام الزائر بإرسال النموذج بدون إدخال بيانات فسيتم عرض رسائل الخطأ التالية‪.‬‬

‫شرح التطبيق‪:‬‬
‫‪ .١‬قمنا بتعريف المصفوفة ‪ $errors‬لتخزين رسائل األخطاء التي ستحدث أثناء عملية التحقق‪.‬‬
‫‪ .٢‬في حال حدوث أي خطأ أثناء عملية التحقق سنقوم بإدراج رسالة الخطأ المناسبة داخل المصفوفة السابقة‬
‫عن طريق استدعاء الدالة ) (‪ array_push‬و تمرير معطيين لھا‪ .‬األول يمثل إسم المصفوفة و الثاني رسالة‬
‫الخطأ‪.‬‬
‫‪ .٣‬نقوم بالتحقق من الحقول الفارغة عن طريق الدالة ) (‪ empty‬عن طريق تمرير المتغير الذي يحتوي على‬
‫قيمة الحقل المحدد‪ .‬في حال كان الحقل فارغا ستقوم الدالة بإرجاع القيمة ‪.true‬‬
‫‪ .٤‬في حقل االسم استخدمنا النمط التالي‬
‫‪/[\'\/~`\!@#\$%\^&\*\(\)_\-\+=\{\}\[\]\|;:"\<\>,\.\?\\\]/‬‬
‫و الھدف من ھذا النمط أن يتم رفض أي قيم غير الحروف و األرقام و المسافة‪.‬‬
‫‪ .٥‬في حقل اسم المستخدم استخدمنا النمط التالي‬
‫‪/^[A-Za-z][A-Za-z0-9_]*+$/‬‬
‫و ذلك لكي يتم قبول فقط الحروف واألرقم و الشرط السفلية‪.‬‬
 ‫‪٧٦‬‬ ‫الفصل الثامن ‪ :‬التحقق من بيانات النماذج ‪Form validation‬‬

‫‪ .٦‬في حقل كلمة المرور استخدمنا النمط‬

‫‪/^[A-Za-z0-9_]*[A-Z][A-Za-z0-9_]*$/‬‬
‫و ھنا فرضنا ان تحتوي كلمة المرور على حروف وأرقام و شرطة سفلية باإلضافة الى وجوب أن تحتوي‬
‫كلمة المرور على حرف واحد كبير على األقل‪.‬‬
‫‪ .٧‬يجب أن ال تقل كلمة المرور عن ‪ ٦‬خانات و لتحقيق ذلك استخدمنا الدالة ) (‪ strlen‬و التي تستقبل معطى‬
‫واحد يمثل المتغير الذي ستقوم بإرجاع طوله‪.‬‬
‫‪ .٨‬يجب أن تتطابق كلمة المرور ال ُمدخلة مع حقل تأكيد كلمة المرور‪.‬‬
‫‪ .٩‬في حقل البريد االلكتروني استخدمنا النمط التالي‬
‫‪/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-‬‬
‫‪]+)*(\.[a-z]{2,3})]*$/‬‬
‫و ھذا النمط يھدف إلى أن يكون البريد ال ُمدخل بريدا صالحا‪.‬‬
‫‪ .١٠‬في حقل الھاتف استخدمنا النمط ‪ /^[0-9]{10,12}$/‬و باستخدام ھذا النمط فرضنا قبول فقط قيمة‬
‫رقمية ال تقل عن عشرة أرقام و ال تزيد عن اثني عشر رقما‪.‬‬
‫‪ .١١‬بعد االنتھاء من عملية التحقق قمنا بالتأكد من أن المصفوفة ‪ $errors‬فارغة‪ ،‬و في ھذه الحالة و باستخدام‬
‫حلقة التكرار ‪ foreach‬قمنا بطباعة محتوى المصفوفة‪.‬‬
‫‪ .١٢‬بخالف ذلك‪ ،‬إذا كانت المصفوفة فارغة أي أن المستخدم أدخل كل البيانات المطلوبة بشكل صحيح ‪ ،‬عندھا‬
‫قمنا بطباعة رسالة مناسبة‪.‬‬
‫‪ .١٣‬أخيرأ‪ ،‬لضمان أن الزائر ال يقوم بتعبئة الحقول مرة أخرى قمنا بطباعة قيمة الحقل ال ُمرسلة من النموذج كما‬
‫يلي‪:‬‬
‫"‪<input name="name" id="name" size="20" maxlength="20‬‬
‫>‪type="text" value="<?php echo @$_POST['name']?>"/‬‬
‫و كما ھو مالحظ أسبقنا المتغير بالعالمة @ لمنع ظھور الخطأ قبل أن يتم إرسال النموذج‪.‬‬
‫‪٧٧‬‬ ‫الفصل الثامن ‪ :‬التحقق من بيانات النماذج ‪Form validation‬‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬ما أھمية التحقق من البيانات ال ُمدخلة في النموذج؟‬

‫‪ .٢‬أيھما أفضل التحقق من البيانات بواسطة جھة العميل أو جھة الخادم مع ذكر السبب؟‬

‫‪ .٣‬ھل ھناك طريقة أخرى غير استخدام الدالة ) (‪ empty‬للتحقق من الحقول الفارغة ؟‬

‫‪ .٤‬ھل يمكن استخدام وسوم ‪ HTML‬بھدف اإلضرار بتطبيق االنترنت و كيف يمكن منع المستخدم من‬

‫إدخالھا في النموذج؟‬

‫‪ .٥‬مستخدما شبكة اإلنترنت كيف يمكن التغلب على مشكلة ‪ SPAM‬مع النماذج؟‬
‫‪٧٨‬‬ ‫الفصل التاسع ‪ :‬العمل مع ‪ Cookies‬و ‪Sessions‬‬

‫ھذا الفصل يغطي‪:‬‬

‫كيفية التعامل مع ‪.cookie‬‬ ‫
‬

‫كيفية التعامل مع الجلسة ‪.Session‬‬ ‫
‬
‫الطرق ال ُمستخدمة إلعادة توجيه المستخدم‪.‬‬ ‫
‬

‫كما ھو معلوم أن البروتوكول المستخدم في نقل البيانات بين متصفح اإلنترنت و مواقع الويب المختلفة ھو بروتوكول‬
‫نقل النص التشعبي )‪ . HTTP( Hypertext Transfer Protocol‬لكن قد ال يعرف الكثير أن ھذا البرتوكول من‬
‫النوع ‪ stateless‬بمعنى أنه يتعامل مع كل طلب ‪ request‬بشكل مستقل بدون أن يكون ھناك أي عالقة بين الطلب‬
‫الحالي ‪ current request‬و الطلب السابق ‪ . previous request‬لشرح ھذه العملية ‪ ،‬لنتخيل معا كيف يتم العمل‬
‫في المواقع التي تتيح خدمة التسوق اإللكتروني أو ما يسمى بـ ‪ . shopping carts‬الذي يحدث أن الزائر لموقع‬
‫التسوق يقوم باستعراض المنتجات التي يقدمھا الموقع و من ثم يقوم باختيار المنتج و إضافته إلى سلة الشراء‪ .‬في‬
‫الوضع العادي ‪ ،‬إذا انتقل الزائر إلى صفحة أخرى داخل الموقع لعرض منتج آخر فإن القيمة األولى المضافة إلى سلة‬
‫الشراء و التي تمثل المنتج األول الذي قام الزائر بإضافته إلى سلة الشراء سيتم فقدھا !! و السبب كما ذكرنا أن‬
‫البروتوكول ‪ HTTP‬من النوع الذي ال يتذكر ما تم مسبقا مع الطلبات السابقة‪ .‬للتغلب على ھذه المشكلة فإن كثير من‬
‫مواقع الويب تقوم باستخدام ما يسمى بـ ‪ sessions‬و ‪ PHP . cookies‬تقدم دعم كامل لـ ‪ sessions‬و ‪cookies‬‬
‫عن طريق عدد من الدوال المبنية مسبقا و الجاھزة لالستخدام من قبل مطوري الويب‪.‬‬

‫التعامل مع الـ ‪cookies‬‬

‫‪ cookies‬عبارة عن ملفات نصية صغيرة يتم تخزينھا في جھاز المستخدم بواسطة موقع إنترنت‪ .‬ھذه الملفات تحتوي‬
‫على معلومات تسترجع من قبل موقع اإلنترنت الذي قام المستخدم بزيارته‪ .‬و كمثال عليھا المنتديات الحوارية‪ .‬عندما‬
‫يقوم المستخدم بتسجيل الدخول إلى أي منتدى للحوار يقوم بإدخال اسم المستخدم و كلمة المرور ‪ ،‬و في حال قام‬
‫بتحديد صح على مربع )تذكرني( في نموذج الدخول سيقوم الموقع بتخزين ملف ‪ cookie‬داخل جھاز المستخدم يتم‬
‫استخدامھا الحقا اذا قام المستخدم بزيارة الموقع الحقا و يتم تسجيل دخوله تلقائيا عن طريق المعلومات المخزنه داخل‬
‫جھازه‪ .‬تعاني ‪ cookies‬من كثير من النقد ألنھا تستخدم لنقل البيانات بين المستخدم و موقع الويب لذلك توصف دائما‬
‫بأنھا سيئة و غير آمنة‪ .‬لكن الحقيقة أنھا تعتبر كغيرھا من التقنيات يمكن استخدامھا بشكل سلبي أو إيجابي ‪ .‬لكن أكثر‬
‫ما يعيبھا أنه يمكن قراءتھا من قبل أي شخص يستخدم جھاز الكمبيوتر ألنھا ببساطة عبارة عن ملفات نصية‪ .‬لذلك‬
‫يجب تجنب حفظ كلمات المرور باستخدام ‪ cookie‬إال في حال أن يتم تشفير كلمة المرور قبل أن يتم حفظھا و من ثم‬
‫يتم مطابقتھا بكلمة المرور المشفرة و المخزنة على الخادم ‪.web server‬‬

‫أخيرا تتميز ‪ cookie‬بعض الخواص اآلمنة‪:‬‬

‫ملفات ‪ cookies‬يمكن قراءتھا فقط بواسطة موقع اإلنترنت الذي قام بتخزينھا‪.‬‬ ‫
‬
‫كل موقع إنترنت ال يمكنه تخزين أكثر من ‪ ٢٠‬ملف ‪.cookies‬‬ ‫
‬
‫أقصى حجم لملف الـ ‪ cookie‬الواحد ھو ‪ ٤‬كيلوبايت‪.‬‬ ‫
‬
‫أقصى عدد لملفات ‪ cookies‬التي يمكن تخزينھا داخل جھاز المستخدم ھو ‪ ٣٠٠‬ملف‪.‬‬ ‫
‬

‫ألن ملفات ‪ cookies‬سيتم تخزينھا داخل جھاز المستخدم ‪ ،‬لذلك ستكون إمكانية التحكم فيھا محدودة‪ .‬فلو‬
‫قام المستخدم بإبطال دعم ‪) cookies‬من خيارات متصفح اإلنترنت( فلن يتمكن أي موقع من تخزين ملفات‬
‫‪ cookies‬داخل جھاز المستخدم‪.‬‬
‫‪٧٩‬‬ ‫الفصل التاسع ‪ :‬العمل مع ‪ Cookies‬و ‪Sessions‬‬

‫إنشاء ملف ‪cookie‬‬

‫إلنشاء ملف ‪ cookie‬سنقوم باستدعاء الدالة ) (‪ setcookie‬و التي تأخذ القيم التالية‪:‬‬

‫المعطى ‪Parameters‬‬ ‫الوصف ‪Description‬‬

‫‪name‬‬ ‫إسم ملف ‪) cookie‬إجباري(‬
‫‪value‬‬ ‫قيمة ‪cookie‬‬
‫‪expires‬‬ ‫الوقت بالثواني لصالحية ملف ‪cookie‬‬
‫‪domain‬‬ ‫إسم موقع اإلنترنت الذي خزن ملف ‪cookie‬‬
‫‪path‬‬ ‫تقوم بتحديد ما إذا كان ملف ‪ cookie‬سيكون متاحا لكامل الموقع‬
‫أو سيكون متاح لصفحات محددة داخل مجلد يتم تحديده‪ .‬الخيار ) ‪( /‬‬
‫يعني إتاحة الملف لكامل الموقع‪.‬‬
‫‪secure‬‬ ‫ھذا الخيار يحدد أن ملف ‪ cookie‬يتطلب اتصال آمن )‪(https‬‬
‫‪httponly‬‬ ‫ھذا الخيار يتيح إمكانية الوصول لملف ‪ cookie‬فقط عن طريق‬
‫بروتوكول ‪http‬‬

‫بسبب أن ملفات ‪ cookies‬سيتم إعدادھا بواسطة ‪ HTTP headers‬فيجب وضعھا قبل أي عملية طباعة‬
‫بواسطة شفرة ‪ . PHP‬في حال كان ملف ‪ PHP‬مضمنا مع وسوم ‪ HTML‬فيجب وضع الدالة أيضا قبل‬
‫وسوم ‪.HTML‬‬

‫‪<?php‬‬
‫‪setcookie("username", "Ahmad Ali", time()+3600, "/","",‬‬
‫;)‪0,1‬‬
‫;)‪setcookie("language", "ar", time()+3600, "/", "", 0, 1‬‬
‫>?‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>?"  ا‪3‬ء )‪ u‬ا آ
" ‪<?php echo‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫قراءة ملفات الـ ‪cookie‬‬

‫نستطيع قراءة ملف ‪ cookie‬عن طريق المصفوفة العامة ‪ $_COOKIE‬بنفس الطريقة التي كنا نتعامل بھا مع‬
‫النماذج‪.‬‬
‫‪٨٠‬‬ ‫الفصل التاسع ‪ :‬العمل مع ‪ Cookies‬و ‪Sessions‬‬

‫‪<?php‬‬
‫))‪if(array_key_exists('username',$_COOKIE‬‬
‫{‬
‫;'>‪echo $_COOKIE['username'].'<br/‬‬
‫;'>‪echo $_COOKIE['language'].'<br/‬‬
‫}‬
‫‪else‬‬
‫{‬
‫;'‪echo'No cookie‬‬
‫}‬
‫>?‬

‫حذف ملف الـ ‪cookie‬‬

‫لحذف ملف ‪ cookie‬كل ما علينا عمله ھو استدعاء الدالة ) (‪ setcookie‬و نقوم بكتابة نفس قيم ملف ‪ cookie‬الذي‬
‫قمنا بإنشائه مسبقا لكن مع تحديد وقت الصالحية ملف ‪ cookie‬الى وقت سابق باإلضافة ترك القيمة فارغة كالتالي‪:‬‬

‫‪<?php‬‬
‫;)‪setcookie("username", "", time()-3600, "/","", 0,1‬‬
‫;)‪setcookie("language", "", time()-3600, "/", "", 0, 1‬‬
‫>?‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>?"  ‪2#‬ف )‪ u‬ا آ
" ‪<?php echo‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫العمل مع ‪sessions‬‬

‫الجلسة أو ‪ session‬تعمل نفس عمل ‪ cookie‬بتوفير طريقة لالستمرارية ) تذكر الحالة ( مع اختالف بسيط في‬
‫التعامل‪ .‬فبدال من تخزين الملف في جھاز العميل يتم تخزين الملف على جھاز الخادم ‪ web server‬في مجلد مؤقت‬
‫يتم تخزين متغيرات ‪ session‬وقيمھا داخله ‪ .‬و لھذا السبب تعتبر ‪ sessions‬أكثر أمانا من ‪.cookies‬‬
‫أخيرا تنتھي ‪ session‬بمجرد إقفال المستخدم لمتصفح اإلنترنت‪.‬‬

‫إنشاء الجلسة ‪creating session‬‬

‫إلنشاء ‪ session‬كل ما علينا عمله ھو إستدعاء الدالة ) (‪ session_start‬في بداية كل صفحة نرغب بأن تُستخدم في‬
‫الجلسة مع ضرورة االنتباه لما يلي‪:‬‬
‫
ھذه الدالة يجب أن تستدعى مرة واحدة فقط في كل صفحة‪.‬‬
‫
يجب أن نستدعي ھذه الدالة قبل طباعة أي بيانات بواسطة الشفرة البرمجية باإلضافة إلى أنھا يجب أن‬
‫تسبق وسوم ‪.HTML‬‬
‫‪٨١‬‬ ‫الفصل التاسع ‪ :‬العمل مع ‪ Cookies‬و ‪Sessions‬‬

‫إنشاء متغيرات الجلسة ‪creating session variables‬‬

‫إلنشاء متغير الجلسة ‪ ،‬نستطيع إضافته إلى المصفوفة العامة ‪ ) $_SESSION‬ترابطية ‪ ( Associative‬بنفس‬
‫الطريقة التي نتعامل بھا مع المتغيرات‪ .‬فلو أردنا مثال تخزين إسم الزائر و طباعة رسالة ترحيب له‪ .‬فسوف نقوم‬
‫بتخزين إسمه في الجلسة كالتالي‪:‬‬
‫;]'‪$_SESSION['name'] = $_POST['name‬‬

‫كما ھو واضح قمنا بتخزين إسم الزائر و المدخلة عن طريق نموذج التسجيل في المصفوفة العامة ‪.$_SESSION‬‬
‫نستطيع اآلن استخدام متغير الجلسة السابق في كل صفحة تبدأ بـ ) (‪. session_start‬‬

‫حذف متغير الجلسة ‪destroying session variable‬‬

‫في حال أصبح متغير الجلسة غير مطلوب بواسطة الشفرة البرمجية فتسطتيع تدميره‪/‬حذفه عن طريق استدعاء الدالة‬
‫) (‪ unset‬كالتالي‪:‬‬
‫;)]'‪unset($_SESSION['name‬‬
‫في ھذه لن يصبح المتغير السابق متاحا ألي صفحة‪.‬‬

‫حذف الجلسة ‪destroying session‬‬

‫في حال لم يعد ھناك أي حاجة للجلسة الحالية نستطيع تدمير الجلسة عن طريق استدعاء الدالة‬
‫) (‪.session_destroy‬‬

‫إنھاء الجلسة بعد مرور وقت محدد ‪session time-outs‬‬

‫في بعض الحاالت عند التعامل مع نظام تسجيل الدخول ‪ user login system‬في موقع االنترنت تبرز الحاجة‬
‫الستخدام طريقة تضمن انھاء الجلسة في حال لم يقم المستخدم بأي نشاط بعد مرور وقت محدد‪ .‬ھذي الطريقة تساعد‬
‫على منع استخدام النظام من قبل شخص غير مخول له بذلك‪ .‬فلك أن تتخيل في حال نسي المستخدم اقفال صفحة‬
‫حسابه البنكي أو بريده االلكتروني في مقھى انترنت‪.‬‬
‫‪<?php‬‬
‫;)(‪session_start‬‬
‫‪ !!S‬ا ?‪ * t‬ا‪ !S
3‬ا‪ /"?0‬ا`‪ S‬ح *‪/‬‬
‫‪!`*/‬م  س !ون ‪3‬ط دا@ ا"‪S‬‬
‫;‪$inactive = 5‬‬
‫‪// check to see if $_SESSION["timeout"] is set‬‬
‫{ ))]"‪if (isset($_SESSION["timeout‬‬
‫"‪// calculate the session's "time to live‬‬
‫;]"‪$sessionTTL = time() - $_SESSION["timeout‬‬
‫{ )‪if ($sessionTTL > $inactive‬‬
‫;)(‪session_destroy‬‬
‫ا‪ S‬ا‪ t,3‬اء إ!@ ل )ة أ@ى '‪echo‬‬ ‫ا`‬
‫;'œم‬
‫}‬
‫}‬
‫>? ;)(‪$_SESSION["timeout"] = time‬‬
‫‪٨٢‬‬ ‫الفصل التاسع ‪ :‬العمل مع ‪ Cookies‬و ‪Sessions‬‬

‫إعادة توجيه المستخدم ‪redirecting user‬‬

‫في أحيان كثيرة تكون ھناك حاجة إلعادة توجيه المستخدم إلى صفحة أخرى ‪ .‬فلو أردنا مثال منع وصول زوار الموقع‬
‫لصفحة من صفحات الموقع ) بسبب سرية محتوى الصفحة و لتقييد الوصول ( فنستطيع تحقيق ذلك بإعادة توجيه‬
‫متصفح الزائر إلى صفحة أخرى غير الصفحة الحالية التي وصل إليھا ) بكتابة عنوانھا مباشرة في ‪ . ( URL‬إلعادة‬
‫توجيه المستخدم إلى صفحة أخرى نستطيع استخدام إحدى الطرق التالية‪:‬‬

‫عن طريق استدعاء الدالة ) (‪ header‬و التي تقوم بإرسال متصفح الزائر إلى صفحة محددة‪ .‬لكن في ھذه‬ ‫
‬
‫الحالة البد االنتباه إلى الدالة ھذه يجب أن يتم استدعاءھا قبل أي وسوم ‪ HTML‬و قبل أي مخرجات تتم‬
‫عن طريق البرنامج‪.‬‬
‫الطريقة الثانية عن طريق إضافة شفرة جافا سكرت ضمن شفر ‪ .PHP‬و في ھذه الحالة لدينا الحرية في‬ ‫
‬
‫وضعھا في أي مكان داخل شفرة ‪.PHP‬‬

‫المثال التالي يوضح كيفية التعامل مع الدالة ) (‪:header‬‬

‫‪<?php‬‬

‫))]'‪if(!isset($_POST['login‬‬
‫{‬
‫;)"‪header("Location:login.php‬‬
‫}‬

‫>?‬

‫في حال أردنا استخدام شفرة جافا سكربت بدال من ذلك فنستطيع عمل ذلك كما في المثال التالي‪:‬‬

‫‪<?php‬‬

‫))]'‪if(!isset($_POST['login‬‬
‫{‬
‫‪ • S‬ا´ن إ‪ ` SP /‬ا!@ ل" ‪echo‬‬ ‫;"‪%.‬‬
‫"‪echo‬‬
‫>‪<script‬‬
‫;'‪window.location = 'login.php‬‬
‫>‪</script‬‬
‫;"‬
‫}‬

‫>?‬
‫‪٨٣‬‬ ‫الفصل التاسع ‪ :‬العمل مع ‪ Cookies‬و ‪Sessions‬‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬ما الفرق بين ‪ cookie :‬و ‪.session‬‬

‫‪ .٢‬كيف نستطيع حفظ ملف ‪ cookie‬و جعله متاحا للمجلد ‪./foo/‬‬

‫‪ .٣‬ما الفرق بين إستخدام ) (‪ unset‬و ) (‪ session_destroy‬مع الجلسات‪.‬‬

‫‪ .٤‬ما الطرق المستخدمة في إعادة توجيه المستخدم و ما الفرق بينھا‪.‬‬

‫‪٨٤‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫ھذا الفصل يغطي‪:‬‬

‫كيفية االتصال بقاعدة البيانات ‪.‬‬ ‫
‬

‫كيفية انشاء وتنفيذ االستعالمات‪.‬‬ ‫
‬
‫كيفية استرجاع السجالت من قاعدة البيانات والعمل معھا‪.‬‬ ‫
‬

‫واحدة من أھم مزايا ‪ PHP‬أنھا تدعم العمل مع أغلب أنظمة قواعد البيانات المعروفة و الشھيرة‪ .‬من ھذه النظم‬
‫الشھيرة يبرز نظام قواعد البيانات ‪ .MySql‬و كما سبق أن اشرنا في أول فصل بأن ‪ PHP‬و ‪ MySql‬من االنظمة‬
‫مفتوحة المصدر و باستخدامھما معا سيوفر مطور الويب الكثير من األموال لشراء حقوق االستخدام من الشركات‬
‫المنتجة‪.‬‬

‫كيفية االتصال بقاعدة البيانات‬

‫ھناك أكثر من طريقة في ‪ PHP‬لالتصال بقاعدة البيانات ‪ .MySql‬و من ھذه الطرق استخدام اإلضافة ‪ mysqli‬و‬
‫التي تسمح لنا باالتصال بنظام قاعدة البيانات ‪ MySql 4.1‬فما أعلى‪ .‬و يجب اإلشارة أن ھذه االضافة لن تعمل إال‬
‫مع النسخة الخامسة من ‪ PHP‬فما أعلى‪.‬‬

‫إنشاء اتصال بنظام قواعد البيانات ‪MySql‬‬

‫إلنشاء اتصال بـ ‪ MySql‬نقوم باستدعاء الدالة ) (‪ mysqli_connect‬و التي تأخذ أربع معطيات كالتالي‪:‬‬

‫"(‪mysqli_connect‬‬ ‫‪hostname‬‬ ‫‪",‬‬

‫"‬ ‫‪username‬‬ ‫‪",‬‬
‫"‬ ‫‪password‬‬ ‫‪",‬‬
‫"‬ ‫‪database‬‬ ‫;) "‬

‫‪ : hostname‬اسم الجھاز أو عنوانه الذي يحتوي على ‪ ) MySql‬غالبا ما يكون ‪.( localhost‬‬
‫‪ : username‬اسم مستخدم النظام‪.‬‬
‫‪ : password‬كلمة مرور مستخدم النظام‪.‬‬
‫‪ :database‬اسم قاعدة البيانات‪.‬‬

‫‪<?php‬‬

‫;)'‪$conn = mysqli_connect('localhost', 'user30','db456','test‬‬

‫)‪if($conn === false‬‬
‫{‬
‫;)(‪echo "Connection failed! Reason:".mysqli_connect_error‬‬
‫}‬

‫>?‬

‫الدالة ) (‪ mysqli_connect_error‬ال ُمستخدمة في المثال السابق تقوم بعرض وصف نصي آلخر‬
‫خطأ حدث أثناء االتصال بقاعدة البيانات‪.‬‬
‫‪٨٥‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫إغالق االتصال بقاعدة البيانات ‪closing the connection‬‬

‫بالرغم من أن االتصال يتم قطعه بمجرد االنتھاء من تنفيذ الشفرة البرمجية إال انه ينصح إغالقه برمجيا عند االنتھاء‬
‫من العمل مع ‪ MySql‬و ذلك عن طريق استدعاء الدالة ) (‪ . mysqli_close‬ھذه الدالة ستقوم بإرجاع ‪ true‬في‬
‫حال تم اغالق االتصال بخالف ذلك ستقوم بإرجاع ‪.false‬‬

‫‪<?php‬‬

‫;)'‪$conn = mysqli_connect('localhost', 'user30','db456','test‬‬

‫)‪if($conn === false‬‬
‫{‬
‫;)(‪echo "Connection failed! Reason:".mysqli_connect_error‬‬
‫}‬
‫)‪mysqli_close($conn‬‬
‫>?‬

‫تنفيذ االستعالم ‪executing query‬‬

‫عند التعامل مع ‪ MySql‬كنظام قواعد بيانات فيجب أن يكون لدينا القدرة على كتابة االستعالمات باستخدام لغة ‪SQL‬‬
‫)‪ .(Structured Query Language‬و لتنفيذ أي استعالم بواسطة ‪ PHP‬نقوم باستدعاء الدالة‬
‫) (‪ mysqli_query‬و التي تأخذ معطيين األول المتغير الذي يحتوي على معلومات االتصال بقاعدة البيانات و‬
‫الثاني يحتوي على االستعالم‪.‬‬
‫تقوم ھذه الدالة بإرجاع ‪ false‬في حال فشلت في تنفيذ االستعالم‪ .‬و في حال نجحت في تنفيذ االستعالم فلھا حالتين‪:‬‬

‫في حال أن االستعالم سيقوم بإرجاع سجالت من قاعدة البيانات مثل ‪select , describe ,show and‬‬ ‫
‬
‫‪ ، explain‬ففي ھذه الحالة ستقوم الدالة بإرجاع مجموعة نتائج ‪ MySql Result Set‬نتعامل معھا الحقا‬
‫بواسطة الدالة ) (‪.mysqli_fetch_array‬‬
‫أما في حال أن االستعالم لن يقوم بإرجاع سجالت من قاعدة البيانات مثل ‪update , delete , insert ,….‬‬ ‫
‬
‫فستقوم الدالة بإرجاع ‪.true‬‬

‫إنشاء جدول ‪crating database table‬‬

‫نستطيع إنشاء جدول باستخدام ‪ PHP‬في خطوات بسيطة كما يلي‪:‬‬

‫‪ .١‬إنشاء اتصال بقاعدة البيانات باستخدام الدالة ) (‪. mysqli_connect‬‬

‫‪ .٢‬كتابة جملة ‪ SQL‬التي ستقوم بإنشاء الجدول‪.‬‬
‫‪ .٣‬تنفيذ االستعالم باستخدام الدالة ) (‪. mysqli_query‬‬

‫على افتراض أنه لدينا قاعد بيانات باسم ‪ ، test‬سنقوم اآلن بإنشاء جدول لتخزين معلومات عن الكتب‪.‬‬
‫‪٨٦‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫و قبل البدء في إنشاء الجدول يجب نحدد البيانات التي يجب أن نعرفھا عن الكتاب و التي بمعرفتھا سنقوم بإنشاء‬
‫الجدول‪:‬‬

‫رقم الكتاب و يجب أن يكون رقما مميزا غير متكرر ‪.‬‬ ‫
‬
‫اسم الكتاب سيكون نصا بطول ‪ ١٠٠‬حرف‪.‬‬ ‫
‬
‫اسم المؤلف و سيكون نصا بطول ‪ ٦٠‬حرفا‪.‬‬ ‫
‬
‫الناشر و سيكون نصا بطول ‪ ٦٠‬حرفا‪.‬‬ ‫
‬
‫تاريخ النشر و نوعه تاريخ‪.‬‬ ‫
‬
‫سعر الكتاب و نوعه رقم ‪.‬‬ ‫
‬

‫اآلن لم يتبق علينا إال معرفة انواع البيانات ‪ data types‬في ‪ MySql‬و الموضحة في الجداول التالية‪:‬‬

‫الوصف‬ ‫النوع‬
‫سلسلة نصية ثابتة دائما يتم ازاحتھا ناحية اليمين بواسطة مسافة فارغة للوصول للطول المحدد‬ ‫‪char‬‬
‫و بحد أقصى ‪ ٢٥٥‬حرف‪.‬‬
‫سلسلة نصية متغيرة بحد أقصى ‪ ٢٥٥‬حرف‪.‬‬ ‫‪varchar‬‬
‫سلسلة نصية تصل إلى طول ‪ ٦٥٥٣٥‬حرف‪.‬‬ ‫‪text‬‬
‫سلسلة نصية تصل إلى طول ‪ ١٦٧٧٧٢١٥‬حرف‪.‬‬ ‫‪mediumtext‬‬
‫سلسلة نصية تصل إلى طول ‪ ٤٢٩٤٩٦٧٢٩٥‬حرف‪.‬‬ ‫‪longtext‬‬
‫رقم صحيح صغير جدا يتراوح بين ‪ ١٢٨-‬إلى ‪ ١٢٧‬و من ‪ ٠‬إلى ‪ ٢٥٥‬للرقم الصحيح‬ ‫‪tinyint‬‬
‫الموجب‪.‬‬
‫رقم صحيح يتراوح بين ‪ ٢١٤٧٤٨٣٦٤٨-‬إلى ‪ ٢١٤٧٤٨٣٦٤٧‬و من ‪ ٠‬إلى‬ ‫‪int‬‬
‫‪ ٤٢٩٤٩٦٧٢٩٥‬للرقم الصحيح الموجب‪.‬‬
‫رقم صغير مع عالمة عشرية‪.‬‬ ‫‪float‬‬
‫رقم كبير مع عالمة عشرية‪.‬‬ ‫‪double‬‬
‫تاريخ بالصيغة ‪YYYY-MM-DD‬‬ ‫‪date‬‬
‫تركيبة من التاريخ و الوقت بالصيغة ‪YYYY-MM-DD HH:MM:SS‬‬ ‫‪datetime‬‬
‫الطابع الزمني ‪YYYYMMDDHHMMSS‬‬ ‫‪timestamp‬‬
‫الوقت بالصيغة ‪HH:MM:SS‬‬ ‫‪time‬‬

‫ويمكن االطالع على تفصيل أكثر عن أنواع البيانات من خالل زيارة الموقع الرسمي لـ ‪ MySql‬التالي‬
‫‪http://dev.mysql.com/doc/refman/5.0/en/data-type-overview.html‬‬

‫اآلن سنقوم بإنشاء بكتابة شفرة ‪ PHP‬التي ستقوم بإنشاء الجدول ‪. books‬‬

‫‪<?php‬‬
‫ا ة او‪ /‬ه
ا "ل ‪!-‬ة ا‪3‬ت ا‪!S‬دة‪//‬‬
‫;)'‪$conn=mysqli_connect('localhost','root','','test‬‬
‫)‪if($conn === false‬‬
‫{‬
‫‪echo‬‬ ‫"‬ ‫و‬ ‫ا‪3‬ت‬ ‫‪!-‬ة‬ ‫ا "ل‬ ‫أŽء‬ ‫@ ¿‬ ‫‪!#‬ث‬
‫;)(‪".mysqli_connect_error‬ا`‬
‫}‬
‫‪٨٧‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫‪else‬‬
‫{‬
‫ ‪ sql‬ا
‪ -‬م ˜‪3‬ء ا!ول‪//‬‬
‫(‪$query = " CREATE TABLE books‬‬
‫‪isbn‬‬ ‫)‪varchar(16‬‬ ‫‪not‬‬
‫‪null,‬‬
‫‪title‬‬ ‫)‪varchar(100‬‬
‫‪null,‬‬
‫‪author‬‬ ‫)‪varchar(60‬‬ ‫‪null ,‬‬
‫‪publisher‬‬ ‫)‪varchar(60‬‬ ‫‪null,‬‬
‫‪publish_date‬‬ ‫‪date‬‬ ‫‪null,‬‬
‫‪price float null,‬‬
‫)‪primary key(isbn‬‬
‫;")‬
‫ا´ن ‪ -3‬م ‪ 2‬ا‪|'%‬م‪//‬‬
‫;)‪$result = mysqli_query($conn,$query‬‬
‫)‪if($result‬‬
‫{‬
‫;"  ا‪3‬ء ا!ول ا‪!S‬د ح" ‪echo‬‬
‫}‬
‫‪else‬‬
‫{‬
‫‪echo‬‬ ‫"‬ ‫و‬ ‫ا!ول‬ ‫ا‪3‬ء‬ ‫أŽء‬ ‫)‬ ‫‪!#‬ث‬
‫;)‪:".mysqli_error($conn‬ا`‬
‫}‬
‫}‬
‫;) ‪mysqli_close( $conn‬‬
‫>?‬

‫عند تنفيذ الشفرة السابقة سيكون الناتج‪.‬‬

‫تم إنشاء الجدول المحدد بنجاح‬

‫و في حال أعدنا تنفيذ الشفرة السابقة فستظھر رسالة الخطأ التالية‪:‬‬

‫حدث مشكلة أثناء انشاء الجدول و السبب '‪:Table 'books‬‬

‫‪already exists‬‬

‫و معنى رسالة الخطأ أن الجدول ‪ books‬موجود مسبقا و ال يسمح بإنشائه مرة أخرى‪.‬‬

‫عرض رسائل األخطاء ‪printing error messages‬‬

‫في أحيان كثيرة قد نواجه كثير من األخطاء عند كتابة االستعالمات‪ .‬لذلك من الجيد أن نقوم بعرض رسائل األخطاء‬
‫التي تنتج عند تنفيذ االستعالمات لكي يتم التعامل معھا‪ .‬لعرض رسائل األخطاء نقوم باستدعاء الدالة‬
‫) (‪ mysqli_error‬و التي تأخذ معطى واحد كالتالي‪:‬‬
‫;)‪echo mysqli_error($conn‬‬
‫حيث ‪ $conn‬يمثل المتغير الذي يحتوي على معلومات االتصال بقاعدة البيانات‪.‬‬
‫‪٨٨‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫إضافة البيانات ‪inserting data‬‬

‫إلضافة بيانات داخل جدول في قاعدة البيانات نقوم باستخدام األمر ‪ insert‬أحد أوامر ‪ SQL‬و الذي يستخدم إلدراج‬
‫البيانات‪.‬‬
‫لكن يجب الحذر عند اضافة البيانات داخل قاعدة البيانات لكي ال تتضرر من قيام المستخدم بإدخال قيم غير صحيحة‬
‫بھدف االضرار بقاعدة البيانات‪.‬‬
‫و لتفادي ذلك يجب علينا القيام بالخطوات التالية‪:‬‬

‫
إجراء عملية التحقق باستخدام الدالة ) (‪ ) preg_match‬تم شرحھا سابقا في الفصل الثامن( أو أي دالة‬
‫أخرى تقوم بعمل مشابه للتحقق من البيانات المرسلة من خالل النموذج )على افتراض ان البيانات ستُرسل‬
‫لقاعدة البيانات باستخدام نموذج ‪. (HTML‬‬
‫
بعد ذلك يجب أن نقوم باستخدام الدالة ) (‪ mysqli_real_escape_string‬لتجاھل أي رموز خاصة‬
‫يكون لھا داللة في ‪ SQL‬كعالمات االقتباس‪.‬‬

‫اآلن سنقوم بإضافة سجل جديد داخل الجدول السابق ‪ books‬كما يلي‬

‫‪<?php‬‬
‫;)'‪$conn=mysqli_connect('localhost','root','','test‬‬
‫)‪if($conn === false‬‬
‫{‬
‫‪echo‬‬ ‫"‬ ‫و‬ ‫ا‪3‬ت‬ ‫‪!-‬ة‬ ‫ا "ل‬ ‫أŽء‬ ‫@ ¿‬ ‫‪!#‬ث‬
‫;)(‪".mysqli_connect_error‬ا`‬
‫}‬
‫‪else‬‬
‫{‬
‫;'‪$isbn = '978-603-500-045-1‬‬
‫‪-‬ت ا‪!% t33‬ام' = ‪$title‬‬ ‫;'‪ PHP‬ا‪3‬ء‬
‫;'أ‪ !#‬ا'!‪$author = 'T‬‬
‫;'دار ا' = ‪$publisher‬‬
‫;'‪$publish_date ='2006-05-20‬‬
‫;'‪$price ='123.25‬‬

‫;)‪$isbn = mysqli_real_escape_string($conn,$isbn‬‬
‫;)‪$title = mysqli_real_escape_string($conn,$title‬‬
‫;)‪$author = mysqli_real_escape_string($conn,$author‬‬
‫;)‪$publisher = mysqli_real_escape_string($conn,$publisher‬‬
‫‪$publish_date‬‬ ‫=‬
‫;)‪mysqli_real_escape_string($conn,$publish_date‬‬
‫;)‪$price = mysqli_real_escape_string($conn,$price‬‬

‫‪$query‬‬ ‫=‬ ‫‪"insert‬‬ ‫‪into‬‬

‫)‪books(isbn,title,author,publisher,publish_date,price‬‬

‫‪values('$isbn','$title','$author','$publisher','$publish_date',$‬‬
‫;")‪price‬‬

‫;)‪$result = mysqli_query($conn,$query‬‬
‫‪٨٩‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫)‪if($result‬‬
‫{‬
‫;" ‪ t‬ا‪ &Ã‬ا‪3‬ت  ‪echo "O3‬‬
‫}‬
‫‪else‬‬
‫{‬
‫‪echo‬‬ ‫"‬ ‫و‬ ‫ا‪3‬ت‬ ‫ا‪&Ã‬‬ ‫أŽء‬ ‫)‬ ‫‪!#‬ث‬
‫;)‪:".mysqli_error($conn‬ا`‬
‫}‬
‫}‬
‫;) ‪mysqli_close( $conn‬‬
‫>?‬

‫عند تنفيذ الشفرة السابقة سيكون الناتج‪.‬‬

‫تمت اضافة البيانات بشكل ناجح‬

‫و في حال أعدنا تنفيذ الشفرة السابقة فستظھر رسالة الخطأ التالية‪:‬‬

‫حدث مشكلة أثناء اضافة البيانات و السبب ‪:Duplicate entry‬‬

‫'‪'978-603-500-045-' for key 'PRIMARY‬‬

‫و السبب ألن الحقل ‪ isbn‬يحتوي على القيد ‪ primary key‬و الذي ال يسمح بتكرار القيم‪.‬‬

‫استرجاع البيانات ‪retrieving data‬‬

‫بعد أن أصبح اآلن لدينا مجموعة من البيانات داخل قاعدة البيانات ‪ ،‬فمن المھم أن نستطيع استرجاع تلك البيانات و‬
‫من ثم التعامل معھا‪ .‬و السترجاع سجالت من قاعدة البيانات نتبع الخطوات التالية‪:‬‬

‫إنشاء اتصال بقاعدة البيانات باستخدام الدالة ) (‪. mysqli_connect‬‬ ‫‪.١‬‬

‫إنشاء االستعالم عن طريق كتابة أمر ‪. select‬‬ ‫‪.٢‬‬
‫تنفيذ االستعالم باستخدام الدالة ) (‪. mysqli_query‬‬ ‫‪.٣‬‬
‫نقوم باستخالص نتائج االستعالم عن طريق استدعاء الدالة ) (‪.mysqli_fetch_array‬‬ ‫‪.٤‬‬
‫نستخدم حلقة التكرار ‪ while‬لكي نتمكن من قراءة كل السجالت التي قام بإرجاعھا االستعالم‪.‬‬ ‫‪.٥‬‬

‫‪<?php‬‬
‫;)'‪$conn=mysqli_connect('localhost','root','','test‬‬
‫)‪if($conn === false‬‬
‫{‬
‫‪echo‬‬ ‫"‬ ‫و‬ ‫ا‪3‬ت‬ ‫‪!-‬ة‬ ‫ا "ل‬ ‫أŽء‬ ‫@ ¿‬ ‫‪!#‬ث‬
‫;)(‪".mysqli_connect_error‬ا`‬
‫}‬
‫‪else‬‬
‫{‬
‫;"‪$query = "select * from books‬‬
٩٠ ‫ التعامل مع قواعد البيانات‬: ‫الفصل العاشر‬

$result = mysqli_query($conn,$query);
$numberOfRows = mysqli_num_rows($result);
if($result)
{
if($numberOfRows>0)
{
echo'<table border="1" align="center">';
echo'<tr><th> %‫ا‬
‫<اب‬/th><th>uš‫<ا‬/th><th> ‫<ا‬/th><th> ‹‫ر‬
‫<ا‬/th><th>‫' اب‬%</th></tr>';
while($row = mysqli_fetch_array($result))
{

echo'<tr><td>'.$row['title'].'</td><td>'.$row['author'].'<
/td><td>'.$row['publisher'].'</td><td>'.$row['publish_date'].'<
/td><td>'.$row['price'].'</td></tr>';
}
}
else
{
echo'#  ‫ت‬3 !  ‫;' ا‬
}

}
else
{
echo " ‫و‬ ‫ت‬3‫ا‬ &Ã‫ا‬ ‫أŽء‬ ) ‫!ث‬#
`‫ا‬:".mysqli_error($conn);
}
}
mysqli_close( $conn );

?>

‫عند تنفيذ الشفرة السابقة فسيكون الناتج كما يلي‬

‫معرفة عدد نتائج االستعالم‬

‫ كما فعلنا في‬mysqli_num_rows() ‫لمعرفة عدد النتائج )عدد السجالت( الستعالم ما نستطيع استدعاء الدالة‬
.‫ ھذه الدالة تأخذ معطى واحد يمثل المتغير الذي يحتوي على ناتج االستعالم‬.‫المثال السابق‬

mysqli_num_rows( $result )
‫‪٩١‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫إفراغ الذاكرة من ناتج االستعالم األخير‬

‫في بعض الحاالت قد نحتاج لتنفيذ أكثر من استعالم داخل الشفرة البرمجية الواحدة‪ .‬لذلك يُنصح في ھذا الحالة أن يتم‬
‫إفراغ الذاكرة من ناتج االستعالم األخير لكي يتم استخدامه من قبل استعالم آخر‪ .‬و نستطيع تحقيق ذلك عن طريق‬
‫استدعاء الدالة ) (‪ mysqli_free_result‬و التي تأخذ معطى واحد يمثل المتغير الذي يحتوي على ناتج االستعالم‬
‫كما يلي‬
‫) ‪mysqli_free_result( $result‬‬

‫تطبيق عملي‬

‫في ھذا التطبيق سنقوم بتصميم سجل للزوار ‪.‬ھذا التطبيق سيمسح لزائر بطرح تعليقاته حول الموقع‪ .‬و قبل أن نبدأ في‬
‫كتابة شفرة سجل الزوار سنقوم بكتابة شفرة ‪ PHP‬تقوم بإنشاء الجدول ‪ guestbook‬و الذي سيُستخدم لتخزين‬
‫تعليقات الزوار‪.‬‬
‫قم بفتح برنامج ‪ .Notepad++‬بعد ذلك سيقوم البرنامج بإنشاء مساحة عمل فارغة‪ .‬قم بكتابة الشفرة التالية‪:‬‬

‫‪<?php‬‬
‫;)'‪$conn=mysqli_connect('localhost','root','','test‬‬
‫)‪if($conn === false‬‬
‫{‬
‫‪echo‬‬ ‫"‬ ‫و‬ ‫ا‪3‬ت‬ ‫‪!-‬ة‬ ‫ا "ل‬ ‫أŽء‬ ‫@ ¿‬ ‫‪!#‬ث‬
‫;)(‪".mysqli_connect_error‬ا`‬
‫}‬
‫‪else‬‬
‫{‬
‫(‪$query = " CREATE TABLE guestbook‬‬
‫‪id‬‬ ‫‪int primary‬‬ ‫‪key‬‬
‫‪auto_increment,‬‬
‫‪name‬‬ ‫‪varchar(50) not null,‬‬
‫‪email‬‬ ‫‪varchar(50) not null ,‬‬
‫‪comment‬‬ ‫‪text not null,‬‬
‫‪date‬‬ ‫‪datetime‬‬ ‫‪not null‬‬
‫;")‬
‫;)‪$result = mysqli_query($conn,$query‬‬
‫)‪if($result‬‬
‫{‬
‫;"  ا‪3‬ء ا!ول ا‪!S‬د ح" ‪echo‬‬
‫}‬
‫‪else‬‬
‫{‬
‫‪echo‬‬ ‫"‬ ‫و‬ ‫ا!ول‬ ‫ا‪3‬ء‬ ‫أŽء‬ ‫)‬ ‫‪!#‬ث‬
‫;)‪:".mysqli_error($conn‬ا`‬
‫}‬
‫}‬
‫;) ‪mysqli_close( $conn‬‬

‫>?‬
٩٢ ‫ التعامل مع قواعد البيانات‬: ‫الفصل العاشر‬

:‫ و من النافذة التالية قم بما يلي‬. ‫ قم بالنقر على زر حفظ‬، ‫بعد االنتھاء من كتابة الشفرة السابقة‬
.C:\xammp\htdocs ‫ قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد‬.١
. createTable.php ‫ قم بتسمية الملف باسم‬.٢
PHP Hypertext ‫ أو‬All types(*.*) ‫ من القائمة المنسدلة ليصبح‬Save as type ‫ غير نوع الملف‬.٣
.Preprocessor files
.Save ‫ انقر على الزر‬.٤
.http://localhost/createTable.php ‫ قم بتنفيذ الملف عن طريق كتابة العنوان‬.٥

.‫عند تنفيذ الشفرة السابقة سيكون الناتج‬

‫تم انشاء الجدول المحدد بنجاح‬

:‫ و من ثم قم بكتابة الشفرة التالية‬Notepad++ ‫ قم بفتح برنامج‬، ‫بعد ذلك‬

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
direction:rtl;
}
table{
border:1px solid #666;
background-color:#CCC;
}

#messages{
border:1px solid #666;
background-color:#fff;
padding:2px;
}

#messages th{
background-color:#0FC;
}

#messages td{
background-color:#0FF;
}

#addMessage{
margin-right:400px;
color:#960;
font-weight:bold;
}
٩٣ ‫ التعامل مع قواعد البيانات‬: ‫الفصل العاشر‬

hr{
border:1px solid #666;
width:800px;
}
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table width="40%" align="center" cellpadding="3">
<tr>
<td width="27%">%‫<ا‬/td>
<td width="73%"><label for="name"></label>
<input type="text" name="name" id="name"
size="50px"/></td>
</tr>
<tr>
<td>
3‫<ا! او‬/td>
<td><label for="email"></label>
<input type="text" name="email" id="email"
size="50px"/></td>
</tr>
<tr>
<td>'‫<ا‬/td>
<td><label for="comment"></label>
<textarea name="comment" id="comment" cols="45"
rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="add" id="add"
value="‫& ارآ‬Ã‫ "إ‬/></td>
</tr>
</table>
</form>
<hr />
<?php
$conn = mysqli_connect('localhost','root','','test');
if(!$conn)
{
exit(mysqli_connect_error());
}
else
{
if(isset($_POST['add']))
{
echo'<div id="addMessage">';
$errors = array();
if(empty($_POST['name']) || empty($_POST['email']) ||
empty($_POST['comment']))
{
٩٤ ‫ التعامل مع قواعد البيانات‬: ‫الفصل العاشر‬

array_push($errors,'‫ ل‬-S‫ } ا‬¢' ‫;)'اء‬

}
if(preg_match('/[\'\/~`\!@#\$%\^&\*\(\)_\-
\+=\{\}\[\]\|;:"\<\>,\.\?\\\]/', $_POST['name']))
{
array_push($errors,' Q ? / ‫ ي‬S @!‫ ا‬%‫ا‬
SP.');
}
if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-
9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})]*$/",$_POST['email']))
{
array_push($errors,'
3‫و‬²‫ ا!@ ! ا‬-‫ا‬
SP Q.');
}

if($errors)
{
echo'<ol class="errorMessage"> OS" ‫اء‬
‫@ ء ا‬0‫;'ا‬
foreach($errors as $value)
{
echo '<li>'.$value.'</li>';
}
echo'</ol>';
}
else
{
$name =
mysqli_real_escape_string($conn,$_POST['name']);
$email =
mysqli_real_escape_string($conn,$_POST['email']);
$comment =
mysqli_real_escape_string($conn,$_POST['comment']);

$insertQuery = "insert into

guestbook(name,email,comment,date)

values('$name','$email','$comment',NOW())";

$result = mysqli_query($conn,$insertQuery);

if($result)
{
echo' •-' &Ã‫ا‬  !- ، • ‫ا‬
‫;'ح‬
}

else
{
echo mysqli_error($conn);
٩٥ ‫ التعامل مع قواعد البيانات‬: ‫الفصل العاشر‬

}
}
echo'</div>';
}
$query = "select * from guestbook order by date";
$result = mysqli_query($conn,$query);
$numberOfRows = mysqli_num_rows($result);
echo'<table align="center" id="messages" cellspacing="1"
cellpadding="3">';
if($numberOfRows>0)
{
echo'<tr><th>%‫<ا‬/th><th> !‫ا‬

3‫<او‬/th><th>%‫<ا‬/th><th>%‫< ر‹ ا‬/th></tr>';
while($row = mysqli_fetch_array($result))
{

echo'<tr><td>'.$row['name'].'</td><td>'.$row['email'].'</td
><td>'.$row['comment'].'</td><td>'.$row['date'].'</td></tr>';
}
}
else
{
echo'<tr><td> }? ‫ زوار ا‬%
& ‫  ! )رآت‬
#.</td></tr>';
}
echo'<table>';
}
?>
</body>
</html>

:‫ و من النافذة التالية قم بما يلي‬. ‫ قم بالنقر على زر حفظ‬، ‫بعد االنتھاء من كتابة الشفرة السابقة‬
.C:\xammp\htdocs ‫ قم بتغيير مكان الحفظ عن طريق االنتقال للمجلد‬.١
. guestbook.php ‫ قم بتسمية الملف باسم‬.٢
PHP Hypertext ‫ أو‬All types(*.*) ‫ من القائمة المنسدلة ليصبح‬Save as type ‫ غير نوع الملف‬.٣
.Preprocessor files
.Save ‫ انقر على الزر‬.٤
.http://localhost/guestbook.php ‫ قم بتنفيذ الملف السابق عن طريق كتابة العنوان‬.٥
‫‪٩٦‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫و عند إضافة سجل جديد سيكون الناتج كما يلي‪:‬‬

‫و كما ھو واضح في الشفرة السابقة فقد قمنا بإجراء عملية التحقق ‪ validation‬على البيانات ال ُمدخلة قبل إضافتھا‬
‫لقاعدة البيانات‪.‬‬

‫الدالة )(‪ NOW‬ال ُمستخدمة في المثال السابق في جملة ‪ insert‬من دوال ‪ SQL‬و تُستخدم لطباعة‬
‫التاريخ و الوقت الحالي و ال توضع بين عالمات االقتباس‪.‬‬
‫‪٩٦‬‬ ‫الفصل العاشر ‪ :‬التعامل مع قواعد البيانات‬

‫أسئلة نھاية الفصل‬

‫‪ .١‬ما ھي أنظمة قواعد البيانات التي تدعمھا ‪ ) PHP‬استخدم شبكة االنترنت للبحث (‪.‬‬

‫‪ .٢‬كيف نستطيع إنشاء اتصال بقاعدة البيانات ) ‪. ( user‬‬

‫‪ .٣‬ما الفرق بين كال من ‪ mysqli_connect_error( ) :‬و ) (‪.mysqli_error‬‬

‫‪ .٤‬كيف نستطيع معرفة عدد نتائج استعالم ما‪.‬‬

‫‪ .٥‬ما الفائدة من استخدام الدالة ) (‪. mysqli_free_result‬‬