البي أتش بي من الصفر: الدرس السادس المصفوفات

البي أتش بي من الصفر الدرس السادس المصفوفات

بسم الله والصلاة والسلام على رسول الله.

هذا الدرس جزء من سلسلة البي أتش بي من الصفر:

نبدأ اليوم الدرس السادس في سلسلة تعلم البي أتش بي من الصفر.

أقسام الدرس:

  • ما هي المصفوفة وفائدتها.
  • فائدة المصفوفات.
  • كيفية تعريف المصفوفة.
  • شروط تسمية المفاتيح.
  • قراءة القيم المخزنة.
  • تعديل القيم المخزنة.
  • حذف القيم المخزنة.
  • بعض الدوال المفيدة

ما هي المصفوفة وفائدتها:

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

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

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

<?php

//غير مجدية ومضيعة للوقت

$color1 = "red";

$color2 = "green";

$color3 = "yellow";

$color4 = "pink";

$color5 = "blue";

$color6 = "black";

$color7 = "brown";

$color8 = "gray";

$color9 = "white";

$color10 = "purple";

$color11 = "orange";

$color12 = "violet";

?>

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

يوجد ثلاثة أنواع رئيسية للمصفوفات

1-      المصفوفة المفهرسة (Indexed Arrays): وهي أبسط أنواع المصفوفات تحتوى على قيم مخزنة وتكون قيم المفاتيح رقمية فقط.

2-      المصفوفة الترابطية (Associative Arrays): تختلف من المصفوفة المفهرسة في أن قيم المفاتيح الخاصة بها قد تكون سلاسل نصية أو أرقام ونصوص.

3-      المصفوفة متعددة الأبعاد (Multidimensional Arrays): وهي عبارة عن مصفوفة ولكن أحد القيم المخزنة فيها أو أكثر تكون من نوع مصفوفة أيضا.

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

*يجدر الإشارة أن البي أتش بي لا تفرق بين المصفوفات المفهرسة والمصفوفات الترابطية.

كيفية إنشاء مصفوفة:

لكي نقوم بإنشاء مصفوفة في بي أتش بي نستخدم الدالة array();، وتقوم هذه الدالة بإستقبال أي عدد من القيم مع مفاتيحها مفصولة بعلامة فاصلة “,” ومخرجات هذه الدالة هي مصفوفة بالقيم التي تم تزويدها بها وفي حالة عدم تحديد قيم للمفاتيح تقوم بإسناد مفتاح لكل قيمة بداية من صفر إلى عدد القيم -1.

<?php
$colors = array("red","green","yellow","pink","blue","black","brown","gray","white","purple","orange","violet");
var_dump($colors);
?>

إبتداء من PHP 5.4 يمكننا إستخدم الصيغة المختصرة لإنشاء المصفوفة. فبدلا من إستخدام الدالة array() يمكننا الآن إستخدام الأقواس “[ ]” فقط فيصبح المثال السابق بالشكل التالي

<?php
$colors = ["red","green","yellow","pink","blue","black","brown","gray","white","purple","orange","violet"];

var_dump($colors);
?>

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

<?php

$cars = array("Mohamed" => "Porsche", "Ahmed" => "BMW", "Ali" => "Lamborghini");

var_dump($cars);

?>

تسمية مفاتيح المصفوفة:

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

  • المفاتيح دائما تكون إما رقم صحيح أو نص فقط.
  • في حالة كانت قيمة المفتاح رقم صحيح ولكن تم كتابته كنص فسيتم تحويله تلقائيا لرقم مثلا “623” سيتم تحويلها إلى 623 كرقم، ولكن “0623” ستظل كما هي ولن يتم تحويلها إلى رقم.
  • الأرقام التي تحتوي على فاصة عشرية سيتم دائما تحويلها إلى أرقام صحيحة بإسقاط الفاصلة العشرية والإبقاء على الرقم الصحيح مثلا 3.24 ستصبح 3.
  • المفاتيح من نوع المنطقي true أو false سيتم تحويلها إلى رقم حيث أن true=1 و false=0.
  • القيمة Null عند إستخدامها كمفتاح سيتم تحويلها إلى نص خالي “”.
  • لايمكن إستخدام المصفوفات والكائنات كمفاتيح وإستخدامها سينتج عنه تحذير من نوع “Illegal offset type”.
  • عند إستخدام نفس المفتاح في المصفوفة مع أكثر من قيمة فقط آخر قيمة تم إسنادها لهذا المفتاح سيتم تخزينها.
  • عند توليد المفاتيح الرقمية تلقائيا من قبل بي أتش بي يبدأ توليد القيم الرقمية من أكبر رقم تم إستخدامه من قبل في المصفوفة +1 –حتى إذا تم حذفه-. فإذا كانت المصفوفة جديدة أو لم يتم إستخدام مفتاح رقمي فيها من قبل يبدأ التوليد من الرقم صفر، أما إذا كانت مصفوفة قد تم إستخدام مفاتيح رقمية من قبل فيبدأ التوليد من أكبر رقم+1 حتى إذا تم مسحه، بمعنى لو كان لدينا قيمة ويشير إليها المفتاح رقم 71 أكبر مفتاح حاليا في المصفوفة وقمنا بحذف القيمة والمفتاح فعند توليد مفتاح رقمي جديد من قبل البي أتش بي يكون 72.

قراءة القيم المخزنة:

لتتمكن من قراءة القيم المخزنة في المصفوفة نقوم بإستخدام إسم المتغير وتحديد قيمة المفتاح للقيمة المخزنة بين قوسين “[]” أو “{}” فإذا أردنا قراءة أول لون في مصفوفة الألوان التي قمنا بإنشاءها في المثال السابق:

<?php

echo $colors[0];

?>

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

<?php

for($i=0; $i<count($colors); $i++)

{

echo $colors [$i].’<br />’;

}

?>

قد تنفع الحلقة التكرارية for في قراءة قيم المصفوفة في حالة كانت قيم مفاتيح المصفوفة رقمية ومتتالية لكن كيف سنتصرف إذا كانت القيم غير رقمية. نصية على سبيل المثال؟ أو رقمية ولكن غير متتالية؟ في هذه الحالة نستخدم الحلقة التكرارية foreach لقراءة قيم المفاتيح والمصفوفة معا. مثال:

<?php

foreach($cars as $key => $car)

{

echo ‘name = ‘. $key .’ and car = ‘. $car .’ <br />’;

}

?>

في المثال السابق تقوم الحلقة التكرارية foreach بقراءة قيمة من المصفوفة في كل دورة وتخزين قيم المفتاح “إسم الشخص” في المتغير $key وتخزين القيمة الفعلية “إسم السيارة في المثال” في المتغير $car ويمكننا قراءة القيم من هذه المتغيرات وإستخدامها بالطريقة التي نريد، طباعتها مثلا!.

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

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

<?php

$cars[‘Mohamed’] = “Mercedes-Benz”;

?>

حذف القيم المخزنة:

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

<?php

unset($cars[“Ahmed”]);

?>

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

<?php

unset($cars);

?>

بعض الدوال المفيدة:

هناك بعض الدوال المفيدة عند التعامل مع المصفوفات سنقوم بذكر البعض منها هنا:

count():

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

<?php

echo count($colors);

//النتيجة 12 عدد الألوان المخزنة في المصفوفة في الأمثلة السابقة.

?>

in_array():

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

<?php

if(in_array(“red”, $colors))

{

echo “The color is found in this array”;

}

else

{

echo “the color in not found in this array”;

}

?>

array_key_exist():

هذه الدالة تقوم بنفس ما تقوم به الدالة in_array() ولكن بدل البحث في القيم المخزنة تقوم بالبحث في المفاتيح عن مفتاح معين وتقوم بإرجاع true في حالة إيجاد المفتاح و false في حالة عدم إيجاده

<?php

if(array_key_exist (13, $colors))

{

echo “The key is found in this array”;

}

else

{

echo “the key in not found in this array”;

}

?>

array_unique():

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

<?php

$duplicate_array = array(“first Duplicate” => “1”, “Second Duplicate” => “1”);

$unique_array = array_unique($duplicate_array);

var_dump($unique_array);

?>

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

 

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

البي أتش بي من الصفر: الدرس الخامس الحلقات التكرارية

البي أتش بي من الصفر الدرس الخامس الحلقات التكرارية

بسم الله والصلاة والسلام على رسول الله.

 

هذا الدرس جزء من سلسلة البي أتش بي من الصفر:

 

نبدأ اليوم الدرس الخامس في سلسلة تعلم البي أتش بي من الصفر.

أقسام الدرس:

  • الحلقة التكرارية while.
  • الحلقة التكرارية do .. while.
  • الحلقة التكرارية for.
  • الحلقة التكرارية foreach.

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

الحلقة التكرارية while:

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

<?php
while (condition)
{
code to be executed;
}
?>

حيث تقوم أولا بإختبار شرط التكرار فإذا قام الشرط بإرجاع القيمة TRUE يتم تنفيذ الكود داخل الحلقة وعند إنتهاء الكود يتم إختبار الشرط مرة أخرى فإذا أرجع القيمة TRUE يتم تكرار الكود مرة أخرى وهكذا… حتى يقوم الشرط بإرجاع القيمة FALSE حينها يتوقف تنفيذ الكود داخل الحلقة. مثال للتوضيح:

قم بإنشاء ملف جديد وتسميته while.php وضع بداخله الكود التالي:

<html>
<body>
<?php
$i=1;
while($i<=5)
{
echo "The number is " . $i . "<br>";
$i++;
}
?>
</body>
</html>

يقوم هذا الكود بطباعة الأرقام من 1 إلى 5. يبدأ التنفيذ بإختبار الشرط ونسبة لأن المتغير $i يحمل القيمة 1 وعند إختبار الشرط فإن 1 أصغر من 5 فعليه يتم إرجاع القيمة TRUE وتنفيذ الكود يتم أولا طباعة قيمة المتغير $i ومن ثم زيادته بـ1 وعليه عند إختبار الشرط للمرة الثانية تكون قيمة المتغير 2 ويتم تنفيذ الكود للمرة الثانية وهكذا تستمر الحلقة حتى تصبح قيمة المتغير 6 وعندها يتم إختبار الشرط ويكون ناتج الإختبار FALSE ويتوقف تنفيذ الحلقة التكرارية while.

الحلقة التكرارية dowhile:-

تشبه الحلقة التكرارية dowhile الحلقة التكرارية السابقة while في كل شيء إلا إنها تقوم بتنفيذ الكود المراد تكراره مرة واحدة على الأقل وبنيتها كالتالي:

<?php
do
{
code to be executed;
}
while (condition);
?>

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

قم بإنشاء ملف جديد وتسميته dowhile.php وضع بداخله الكود التالي:

<html>
<body>
<?php
$i=6;
do
{
$i++;
echo "The number is " . $i . "<br>";
}
while ($i<=5);
?>
</body>
</html>

يقوم هذا الكود بطباعة الرقم 6 فقط، وذلك لأنه في الأول يتم تنفيذ الكود المضمن في داخل الحلقة التكرارية dowhile، ومن ثم إختبار الشرط والذي يقتضي لتنفيذ الحلقة مرة أخرى أن تكون قيمة المتغير $i أقل من أو تساوي 5، وسيرجع إختبار الشرط هنا القيمة FALSE نسبة لأن المتغير يحمل القيمة 6.

الحلقة التكرارية for:-

الحلقة التكرارية for هي أكثر الحلقات تعقيدا، وتستخدم غالبا عند معرفة عدد مرات تكرار تنفيذ الكود. وبنيتها كالتالي:

for (init; condition; increment)
{
code to be executed;
}

هنالك ثلاثة أجزاء في الحلقة التكرارية for وهي:
Init: أول جزئية في بنية الحلقة التكرارية for ويتم تنفيذه مرة واحدة فقط عند بداية الحلقة ويستخدم غالبا لضبط العداد الذي ستستخدمه الحلقة التكرارية ولكن يمكن وضع أي كود هنا.
Condition: الجزئية الثانية في بنية الحلقة التكرارية for ويتم تنفيذ هذه الجزئية في بداية كل دورة في الحلقة وهي عبارة عن شرط يتم إختباره في كل دورة فإذا كانت نتيحة الإختبار TRUE يتم المواصلة في تنفيذ الحلقة، أما إذا كانت FALSE فيتم إيقاف تنفيذ الحلقة التكرارية. يمكننا ترك هذه الجزئية فارغة وسيعني هذا أن نتيجة الشرط هي TRUE في كل مرة.
Increment: الجزئية الثالثة والأخيرة في الحلقة التكرارية for ويتم تنفيذ هذه الجزئية في نهاية كل دورة في الحلقة، وغالبا تقوم بزيادة العداد بقيمة معينة في كل دورة، ولكن يمكننا وضع أي كود هنا. مثال للتوضيح:
قم بإنشاء ملف جديد وتسميته for.php وضع بداخله الكود التالي:

<html>
<body>

<?php
for ($i=1; $i<=10; $i++)
{
echo "The number is " . $i . "<br>";
}
?>

</body>
</html>

يقوم هذا الكود بطباعة العدد $i فعليه سيتم طباعة الأرقام من 1 حتى الرقم 10. هيا نتابع تنفيذ الكود: عند تنفيذ الحلقة لأول مرة قمنا بتنفيذ الجزئية الأولى والتي قامت بضبط قيمة العداد وهو المتغير $i بالقيمة 1، وبعد ذلك تم تنفيذ الجزئية الثانية وهي مقارنة العداد $i بالقيمة 10 وبما أن 1 أقل من 10 فإن تنفيذ الحلقة سيستمر. تم تنفيذ الحلقة والتي قامت بطباعة قيمة العداد $i وهي القيمة 1 في أول تنفيذ للحلقة. بعد ذلك تم تنفيذ آخر جزئية في قيمة الحلقة والتي قامت بزيادة قيمة العداد بـ1. في الدورة الثانية يبدأ تنفيذ الحلقة من الجزئية الثانية والتي هي شرط المقارنة حيث أنه كما ذكرنا الجزئية الأولى يتم تنفيذها مرة واحدة بداية الحلقة فقط. ويستمر التنفيذ هكذا حتى تصبح قيمة العداد 11 عندها في الدورة رقم 11 يتم تنفيذ الجزئية الثانية وهي شرطة المقارنة ويتم إرجاع القيمة FALSE ويتم إيقاف الحلقة والخروج منها.

الحلقة التكرارية foreach:-

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

<html>
<body>

<?php
foreach ($array as $value)
{
code to be executed;
}
?>

</body>
</html>

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

<html>
<body>
<?php
$colors = array("red","green","blue","yellow");
foreach ($colors as $value)
{
echo "$value <br>";
}
?>
</body>
</html>

سيقوم هذا الكود بطباعة قيم المصفوفة $colors كل لون في سطر منفصل. في كل دورة من دورات الحلقة التكرارية foreach يتم أخذ القيمة الحالية من المصفوفة $colors ووضعها في المتغير $value، ومن ثم طباعة قيمة المتغير $value. وفي الدورة التالية يتم أخذ اللون التالي وطباعته. وهكذا حتى يتم المرور على جميع عناصر المصفوفة بالترتيب. وينتهي تنفيذ الحلقة التكرارية بعد المرور على كل عناصر المصفوفة.

 

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

التحميل الزائد لدوال جافاسكربت JavaScript Functions Oveloading

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه.

نقدم لكم اليوم مرورا سريعا على موضوع التحميل الزائد في دوال جافاسكربت JavaScript Functions/Methods Overloading ونعني بذلك إمكانية أن تقبل الدالة عدداً من المتغيرات كـ Parameters بعدد مساوي أو أقل من الـ Parameters المحدد عند إنشائها، وقد يشمل المفهوم أيضاً أن تكون أنواع هذه المتغيرات مختلفة ( Number, Float, Double ،String, Object , Array … وغيرها) .

هذا المفهوم هو مفهوم برمجي عام ويوجد في لغات برمجة أخرى مثل ( Ada, C++, C#, D, and Java ) .

نلاحظ المثال التالي حيث لدينا الدالة welcome تستقبل اسم الشخص واسم المدينة وتقوم بعرض رسالة ترحيب.
هذه هي الدالة :

function welcome (PersonName,CityName) {

// سنقوم هنا باختبار صلاحية ما استقبلته الدالة
// PersonName و CityName
    PersonNameIsValid=(PersonName!=undefined)&&(PersonName!='');//returns true or false
    CityNameIsValid=(CityName!=undefined)&&(CityName!='');//returns true or false

//اسم الشخص والمدينة
    if(PersonNameIsValid&&CityNameIsValid)
        alert('Welcome '+ PersonName +' to '+CityName+'!');
//اسم الشخص فقط
    else if(PersonNameIsValid)
        alert('Welcome '+ PersonName +'!');
//اسم المدينة فقط
    else if(CityNameIsValid)
        alert('Welcome to '+CityName+'!');

//Parameters  بدون 
    else alert('Welcome!!!');
}//end welcome func

//******* tests الاختبارات ********
// welcome('ali','khartoum');//  welcome ali to khartoum!

// welcome('ali');//  welcome ali!
// welcome('ali','');//  welcome ali!

// welcome('','khartoum');  welcome to khartoum!
// welcome(khartoum');  welcome khartoum! نلاحظ هنا اعتبر ان الخرطوم هو اسم الشخص لأنه تم إمراره على أنه المتغير الأول

// welcome('','');//  welcome!
// welcome();//  welcome!

ما فائدة Overload ؟
هذه الخاصية تتيح لك استخدام نفس الدالة لمهام عديدة ، وتوفر مجهود إنشاء دوال أخرى.

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

لتجربة الدالة قوموا بفتح أدوات المطور في قوقل كروم وافتحوا ال console ثم قوموا بنسخ الدالة welcome ولصقها في ال console ثم مفتاح Enter.
الآن قومو بكتابة welcome() في الــ Console ثم غيروا ال parameters .

console

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

———————————-
المصادر:
John Resig – JavaScript Method Overloading
http://stackoverflow.com – Function overloading in Javascript – Best practices
مصدر الصورة

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه وسلم – والحمدلله رب العالمين
#

أدوات المطوّر في قوقل كروم – Developer Tools ؟ (الجزء 1)

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم-

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

  • Firebug و يعمل في Firefox
  • DragonFly يعمل في متصفح Opera
    تحديث في 17.7.2013 : Opera الآن يعمل بمحرك Blink (مبني على Webkit) أي أنه صار مثل الكروم 28+ ويتوقف العمل بالـ DragonFly في الإصدارة الحالية Opera 15 مع احتمال عودته مجدداً في الإصدارات القادمة.
  • Developer Tools ويعمل في IE8 فما فوق.
  • وأخيراً Webkit Dev Tools يعمل في Google Chrome و Apple Safari .. و Opera 15+

على الرغن من أنه تم عمل إصدارة Firebug خصيصاً لـ Google Chrome ، إلا أنها ليست بنفس فعالية الإصدارة الأصلية في Firefox .

المتصفحّات وأدوات التطوير

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

واجهة أدوات التطوير

بداية نستخدم F12 أو Ctrl+Shift+i لإظهار أدوات التطوير، تتكون الواجهة من ألسنة Tabs تحتوي أيقونات الوصول للأدوات المختلفة وهي :

1. Elements : غالب العمل سيكون في هذا الجزء الذي يقوم بإظهار عناصر الصفحة في الجهة اليسرى من الشاشة وتفاصيل كل عنصر في الجهة اليمنى.

1-elements

 

2. Resources : وتحتوي هذه النافذة على جميع محتويات الصفحة ، مثل frames والصور وملفات الجافاسكربت والخطوط وملفات الستايل والـ Cookies في الجهة اليسرى وتفاصيل كل جزء في الجهة اليمنى.

2-resources

 

3. Network : تقوم هذه النافذه بإظهار الطلبات Requests الخارجة من هذه الصفحة وتفاصيل كل طلب.3-network

 

 

4. Sources : من هذه النافذة يمكن عرض وتحرير ملفات CSS و JavaScript مباشرة في المتصفح، كما يمكن متابعة وفحص وتحليل عمل الـ JavaScript في الصفحة .

4-source

5. و 6. Timeline, Profiles : كما في نافذة Network ، تعطيك هذه النوافذ معلومات دقيقة حول الأشياء التي تحدث في الصفحة مثلا من سرعة التحميل ، تفاصيل تنفيذ دوال جافاسكربت، حركة مؤشر الماوس، تقريباً جميع الأحداث Events التي تحدث في الصفحة يتم تسجيلها بصورة متسلسة ومتزامنة ، لا أذكر أني استخدمت هذه النوافذ من قبل! ولكن سنتحدّث عنها في وقت لاحق إن شاء الله.

 

7. Audits : تقوم هذه الأداة بتحليل صفحتك من ناحية استخدام الـ CSS والـ Cookies و تفاصيل عن الـ Caching وتقوم إعطاءك معلومات ونصائح حول ما يجب عليك عمله لتحسين أداء الصفحة.

5-audit

 

 

8. Console : يمكن تصنيفه كـ Command Line Tool للمتصفح ، يمكن من خلاله التفاعل مباشرة مع الصفحة من خلال الجافاسكربت .

مثال :

إذا قمنا بكتابة document.title فسيعرض عنوان الصفحة الحالية.

مثال آخر

  window.scrollTo(0,900)

سيقوم بعمل  scroll على بعد 900 بكسل من أعلى الصفحة

الصورة التالية فيها بعض الأمثلة :

6-console

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

وصلى الله وسلم وبارك على سيدنا محمد والحمد لله رب العالمين.

#

مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class

مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class

بسم الله والحمدلله والصلاة والسلام على رسول الله – صلى الله عليه وسلم – .

أثناء العمل على صفحة ويب احتجت أن أضيف بعض التفاعلية مع المستخدم ، مثل الاستجابة لضغطة الماوس (mouse click event) على عنصر معين ، ولكن واجهتني مشكلة عند استخدامي لـ Vanilla.js (فانلا هي اسم رمزي للجافاسريبت كما هي plain !) لإنشاء Event Listener لعدة عناصر من نفس التصنيف لهذا الحدث وإليكم السيناريو:

  • لدي عدة عناصر من نفس التصنيف Class وأريد أن أنفذ دالة معينة عند مرور مؤشر الماوس فوق أي من تلك العناصر.
  • مثلا ظهور صندوق Alert() فيه محتويات العنصر
  • توفر الجافاسكربت إمكانية عمل listener ولكن فقط باستخدام ID الخاص بالعناصر ولا يمكن استخدام Class ..
  • Vanilla.js تمكنك من إضافة Listener ولكن باستخدام الـ ID ولا يمكن ذلك باستخدام الـ Class  كالآتي :

    singleItem=document.getElementById('onlyOne');
    singleItem.addEventListener('mouseover',doTheAction);
    
    

    نلاحظ أن الحدث Event هو مرور مؤشر الماوس والنتيجة هي تنفيذ الدالة doTheAction.
  • ولكن كما ذكرنا سابقا ينطبق ذلك فقط على ID وليس مع الClass

الاستماع للجميع

الاستماع للجميع.. هذا هو العدل.. ولكن لكي يكون صوتك مسموعاً يجب أن يكون لديك هوية..

الحل هو إضافة ID للعناصر ثم إضافة مستمع Listener لكل عنصر على حدة :

نفترض أن هذه هي العناصر

<div class="colors">Green</div>
<div class="colors">Yellow</div>
<div class="colors">Blue</div>

بداية يجب أن نتحصل علها

all_elements=document.getElementsByClassName('colors');

ثم سنقوم بالمرور على مجوعة العناصر باستخدام حلقة التكرار for loop ثم نضيف ID لكل عنصر وبذلك يكون جاهزاً ليتم ربطه مع مستمع Event Listener

for (var i =0;  i <= all_elemnts.length - 1; i++) {

// هنا يحصل العنصر على رقم هوية جديد 
// ID
all_elemnts[i].id="el"+i;

//نضعه في متغير
el=document.getElementById('el'+i);

//الآن أصبح للعنصر  
// ID
// ويمكننا ربطه
el.addEventListener('mouseover',doTheAction);
}//endForLoop

//والدالة :
function doTheAction(){
// ستعرض محتوى العنصر
alert(this.innerHTML);
}

بالإمكان استخدام مكتبة جيكويري jQuery لهذه المهمة ولكن الموضوع أبسط من تضمين المكتبة بكاملها (91Kb) لصفحة صغيرة!
سنعرض الآن الحل الذي تجنبنا استخدامه بالجيكويري jQuery :
وهو عبارة عن سطر واحد فقط!!

$('.colors').on('mouseover',doTheAction);

الحل بسيط كما ذكرنا مسبقاً ولكنه مكلف من ناحية سرعة تحميل الصفحة.

ملحوظة

Vanilla.js ليست مكتبة، ليست إطار عمل، إنه مصطلح أُطلق على الجافاسكربت كما هي بدون تعديلات Plain .. وتم إطلاق هذا الاسم لجذب الاهتمام.. حيث أصبح المطورين يبحثون عن مكتبات الجافاسكربت وربما لا يعرف أحدهم شيئا عن صيغة Syntax الجافاسكريبت وماهيتها.. هم فقط يعرفون صيغة المكتبات مثل الجيكويري وغيرها.. للتوضيح الجافاسكريبت للجيكويري مثل البي اتش بي للكودإجنايتر… مافي أبسط من كده!

احصل على المثال

روابط مفيدة لتعلم الجافاسريت :

ختاما نتمنى لكم أوقاتا ممتعة مع الجافاسكربت.
#

وصلى الله وسلم وبارك على سيدنا محمد صلى الله عليه وسلم والحمدلله رب العالمين

تصميم قالب ووردبريس – الجزء 2 – التخطيط

بسم الله والحمدلله و الصلاة والسلام على سيدنا رسول الله صلى الله عليه و على آله و صحبه و سلم .

قد يمر التصميم بعدّة مراحل ابتداء من الرسم بالورقة والقلم Sketch ثم التخطيط الأولي Wireframe ثم التخطيط المفصل Mockup ، ونواصل اليوم الجزء الثاني من سلسة كيفية تصميم قالب ووردبريس وسنقوم في هذا الجزء إن شاء لله بعمل التخطيط الأوّلي للموقع (Wireframe) وهو تخطيط سريع للموقع تحدد فيه المعالم الرئيسية لشكل الموقع و كيفية توزيع العناصر فيه . يجب أن لا يستغرق التخطيط الأولي وقتا طويلا فالغرض هنا هو كما ذكرنا مسبقاً تحديد الشكل العام والذي هو الأساس الذي سيُبنى عليه التصميم .

 

المراحل المحتملة لتصميم واجهة موقع للويب :

لا توجد طريقة واحدة يعمل بها مصممو الويب ولا توجد خطوات ثابته مُتّبعة. أنت تعمل بالطريقة التي تُمكِّنك من تقديم جودة عالية في أقل وقت ممكن و بأقل تكاليف.

 

ولأننا لن نقوم بالخطوة الأولى ، أردت أن أعرض نموذجا لعملية Sketching  لموقع.

مثال لسكيتش Sketch :

 

الصورة مأخوذة  من   markotaali

 

Moqups !

 

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

(!) رغم أن هذه الأداة تسمى Moqups و هي أقرب إلى Mockup فإني أعتبرها أداة للـ Wireframing . لا أريد أن يلتبس عليك الأمر!

 

واجهة الموقع:

 

moqups_home

واجهة الموقع بسيطة  وتنقسم إلى ثلاثة أقسام :

الجزء العلوي :
يحوي عدد من ادوات التحكم في منطقة العمل (الصفحات ، قياسات منطقة العمل ، ترتيب العناصر عموديا..الخ) و خصائص الحساب الشخصي .

الجزء الكبير في المنتصف:
من الواضح أن هذه هي منطقة العمل!

الجزء الأيسر :
يحوي العناصر التي من خلالها يتم بناء التخطيط. و تعمل بطريقة السحب والإسقاط Drag n Drop ، حيث يقوم المستخدم بسحب العنصر من القائمة اليسرى إلى منطقة العمل.

الآن إلى العمل!!..قمت بإعداد تخطيط سريع مبسط لموقع يتكون من عمودين .

وكانت النتيجة! :

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

 

الخاتمة :

إن خطوات تصميم المواقع تحتلف من شخص لآخر فهنالك من يسبق خطوة التصميم الأولي بعمل سكيتش sketch أو مسودّة سريعة للموقع على الورق. وهنالك من يبدأ في كتابة الكود مباشرة ويستخدم طريقة Rapid Prototyping حيث يكون التخطيط الأولي هو تصميم حي مبسط للموقع ( صفحة ويب  : HTML ،CSS و Javascript ) يتم إضافة المزيد من التفاصيل إليه لاحقا ليكون هو المنتج النهائي ،  وهنالك الكثير من الأدوات المستخدمة في هذا النوع ولكن أشهرها TwitterBootstrap ، Foundation وربما Gumby .

الأدوات السابقة ليست فقط من أجل Rapid Prototyping و لكن يمكن ايضا استخدامها مع التخطيط المفصّل ( Mockup ) حيث يوفر بعضها ملفات جاهزة تحوي خطوط إرشادية و عناصر واجهة مستخدم جاهزة ( User Interface Elements) لرسم الموقع بالفوتوشوب أو بأي برنامج آخر حسب نوع الملف.

 

الفكرة من التصميم والتخطيط الأولي و المفصّل هو أن تضع المنتج النهائي نصب عينيك (Begin with end in mind) الشيء الذي يساعدك على المضي قدماً.

 

نواصل في الجزء إن شاء الله لنبدأ مرحلة التخطيط النهائي (Mockup) والذي يكون عادة باستخدام الفوتوشوب أو ما يوازيه من البرامج الأخرى التجارية مثل Fireworks أو Illustrator أو حتى المجانية مثل GIMP أو Inkscape والذي يجب تكون الصورة فيه قريبة من التصميم الفعلي للموقع بنسبة كبيرة +95%.

و صلى اللهم وسلم وبارك على سيدنا محمد وعلى آله آله وصحبه و سلم والحمدلله رب العالمين.

تصميم قالب ووردبريس – الجزء 1 – الأدوات

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

 

الأجزاء :

  1. الجزء 1 – الأدوات.
  2. الجزء 2 – تخطيط الموقع.
  3. الجزء 3 – رسم الموقع على Photoshop / Gimp .
  4. الجزء 4 – تحويل التصميم لـ HTML/CSS .
  5. الجزء 5 – الجافاسكريبت .
  6. الجزء 7 – تحويل HTML/CSS لقالب ووردبريس.

الأدوات المطلوبة :

برنامج التخطيط :

خدمة Moqups المجانية (تطبيق ويب Web based application) .

يوفر لك إمكانية عمل تخطيط سريع للمواقع (wireframe) ويدعم تعدد الصفحات ورفع صورك الخاصة و العديد من المزايا الأخرى.

رابط الموقع

 

برنامج الرسم وتحرير الصور :

برنامج الفوتوشوب Adobe Photoshop CS5 ME أو CS6 .

ربما يفضل البعض البرامج مفتوحة المصدر مثل  Gimp أو Inkscape  !

 

برنامج لتحرير النصوص Text-Editor :

أي محرر نصوص موجّه للبرمجة سيفي بالغرض عموما يفضل استخدام Notepad Plus Plus.

يمكنكم تنزيله من الموقع الرسمي

المتصفح:

متصفح قوقل كروم Google Chrome أي إصدارة و لكن يفضّل الإصدارة 20 فما فوق. أو فايرفوكس Firefox . إذا كنت من محبي السفاري Safari فبإمكانك استخدامه الإصدارة 5 فما فوق.

 

الخادم (السيرفر) :

سيرفر xampp الشهير . يمكنكم تنزيله من صفحة المشروع في سورسفورج sourceforge .

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

وصلى اللهم وسلم وبارك على سيدنا محمد وعلى آله وصحبه وسلم والحمدلله رب العالمين

البي أتش بي من الصفر: الدرس الرابع إتخاذ القرار

البي أتش بي من الصفر الدرس الرابع إتخاذ القرار

بسم الله والصلاة والسلام على رسول الله.

 

هذا الدرس جزء من سلسلة البي أتش بي من الصفر:

 

نبدأ اليوم الدرس الرابع من سلسلة تعلم البي أتش بي من الصفر

أقسام الدرس:

  • الجملة الشرطية IF.
  • الجملة الشرطية IF…ELSE.
  • SWITCH.
  • عمليات المقارنة.
  • العمليات المنطقية.

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

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

<?php
if (condition is true)
execute this code
?>

في المثال التالي سنقوم بطباعة عبارة “I NEED COFFEE” إذا كان المتغير $X والذي يحمل القيمة 3 يساوي 3 فعلا!!:

<?php
$x = 3;
if($x == 3)
echo 'I NEED COFFEE';

if($x == 2)
echo 'I DONT NEED COFFEE';
?>

قم بتنفيذ الكود السابق وسيقوم بطباعة العبارة “I NEED COFFEE” ولن يقوم بطباعة العبارة التالية “I DON’T NEED COFFEE” نسبة لتحقق الشرط الأول وعدم تحقق الشرط الثاني.
لاحظ في الكود السابق عملية المقارنة تمت بإستخدام علامتين “=” وهذا ما يستخدم في المقارنة أما علامة “=” واحدة فتستخدم في الإسناد. في الكود السابق قمنا بتنفيذ تعليمة برمجية واحدة فقط عندما نريد أن نقوم بتنفيذ أكثر من عملية برمجية يجب علينا أن نضع الكود بداخل القوسين “{ }” لأن الجملة الشرطية IF تقوم بتنفيذ أول عملية برمجية بعدها مباشرة فقط. مثال:

<?php
$x = 8;
if($x == 8)
{
echo '$x = '.$x;
$x = 4;
}

if($x == 4)
{
echo '$x = '.$x;
}
?>

في هذا الكود يتم طباعة قيمة المتغير $x ومن ثم تغير قيمته إلى 4 وفي المرة الثانية بعد تحقق الشرط يتم طباعة قيمته الجديدة 4. عموما تعتبر كتابة الأقواس من الممارسات الجيدة والتي يجب على المبرمج إتباعها حتى ولو كان الكود الذي سيتم تنفيذه عبارة عن سطر واحد أو تعليمة برمجية واحدة.

الجملة الشرطية IF…ELSE:

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

<?php
$x = 3;
if($x == 3)
{
echo 'I NEED COFFEE';
}
else
{
echo 'I DONT NEED COFFEE';
}
?>

في حالة كان المتغير $x يساوي 3 سيتم طباعة العبارة “I NEED COFFEE” وفي حالة لم يساوي 3 سيتم طباعة “I DON’T NEED COFFEE”.
طبعا يمكننا القيام بكتابة الجمل الشرطية داخل بعضها البعض لتنفيذ مجموعة من التعليمات البرمجية المختلفة بناء على تحقق أو عدم تحقق مجموعة من الشروط المختلفة، وتكون الصيغة بصورة عامة كالآتي:

<?php
if (condition)
{
//في حالة أن الشرط صحيح قم بتنفيذ هذا الكود
}
else
if (condition)
{
// في حالة أن الشرط الأول غير صحيح والشرط الثاني صحيح قم بتنفيذ هذا الكود
}
else
{
// في حالة أن الشرط الأول غير صحيح والشرط الثاني غير صحيح قم بتنفيذ هذ الكود.
}
?>

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

<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
{
echo "Have a nice weekend!";
}
elseif ($d=="Sun")
{
echo "Have a nice Sunday!";
}
else
{
echo "Have a nice day!";
}
?>
</body>
</html>

في المثال السابق إستخدمنا الدالة date وهي دالة للتعامل مع التاريخ والوقت. قمنا بإستخدامها لجلب اليوم ومن ثم مقارنة اليوم في الشرط

SWITCH:

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

<?php
switch (n)
{
case value1:
//الكود المراد تنفيذه في حالة القيمة الآولى
break;

case value2:
//الكود المراد تنفيذه في حالة القيمة الثانية
break:

case value3:
//الكود المراد تنفيذه في حالة القيمة الثالثة
break:

default:
//الكود المراد تنفيذه في حالة عدم مطابقة التعبير أعلاه لأي من القيم
}
?>

يتم في العبارة switch تنفيذ أحد الأكواد التابعة لها “case” بناء على قيمة المتغير أو التعبير البرمجي الموضوع أعلاه في هذه الحالة “n”. حيث يتم أخذ قيمة “n” ومقارنتها بالقيم الموجودة (value1, value2, value3) وفي حالة مطابقة إحدى القيم للقيمة “n” يتم تنفيذ الكود البرمجي التابع لها ويبدأ الكود من بعد الكلمة case وحتى الكلمة break والتي تمنع إستمرار تنفيذ الكود الموجود في الجزء التالي. وفي حالة لم يتم إيجاد قيمة مشابهه يتم تنفيذ الجزء الأخير من الكود “default” وهو جزء إختياري يمكن وضعه أو تجاهله حسب متطلباتك الخاصة. مثال:

<html>
 <body>
 <?php
 $x=1;
 switch ($x)
 {
 case 1:
echo "Number 1";
break;
 case 2:
echo "Number 2";
break;
 case 3:
echo "Number 3";
break;
 default:
echo "No number between 1 and 3";
 }
 ?>
 </body>
 </html>

 

عمليات المقارنة:

تسمح لك عمليات المقارنة بمقارنة قيمتين، وغالبا ما نستخدم عمليات المقارنة في بناء الشروط التي تستخدم في الجمل الشرطية. في مثال الجملة الشرطية IF إستخدمنا عملية المقارنة == لمقارنة قيمة المتغير $x والرقم 3 ومعرفة هل يتساويان أم لا. فيما يلي جدول بكل عمليات المقارنة:

العملية الإسم الوصف مثال
س == ص يساوي تقوم بإرجاع TRUE في حالة كانت س تساوي ص 5==8 ترجع FALSE
س === ص تطابق تقوم بإرجاع قيمة TRUE في حالة كانت س تساوي ص وهما من نفس نوع البيانات 5===”5″ returns false
س != ص لا يساوي تقوم بإرجاع قيمة TRUE في حالة كانت س لا تساوي ص 5!=8 ترجع TRUE
س <> ص لا يساوي تقوم بإرجاع قيمة TRUE في حالة كانت س لا تساوي ص 5<>8 ترجع TRUE
س !== ص غير متطابق تقوم بإرجاع قيمة TRUE في حالة أن س لا تساوي ص أو أنهما ليسا من نفس نوع البيانات 5!==”5″ ترجع TRUE
س > ص أكبر من تقوم بإرجاع قيمة TRUE في حالة كانت س أكبر من ص 5>8 ترجع FALSE
س < ص أصغر من تقوم بإرجاع قيمة TRUE في حالة كانت س أصغر من ص 5<8 ترجع TRUE
س >= ص أكبر من أو يساوي تقوم بإرجاع قيمة TRUE إذا كانت س أكبر من أو تساوي ص 5>=8 ترجع FALSE
س <= ص أصغر من أو يساوي تقوم بإرجاع قيمة TRUE إذا كانت س أصغر من أو تساوي ص 5<=8 ترجع TRUE

 

العمليات المنطقية:

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

العملية الإسم الوصف مثال
س and ص
أو
x && y
And, و ترجع القيمة TRUE في حالة أن الشرط الأول والشرط الثاني كلاهما TRUE x=6, y=3
(x < 10 and y > 1)
(x < 10 && y > 1)
ترجع true
س or ص
أو
x || y
Or, أو ترجع القيمة TRUE في حالة أن كلا الشرطين أو أحدهما TRUE x=6, y=3
(x==6 or y==5)
(x==6 || y==5)
ترجع true
س xor ص Xor, نفي أو ترجع القيمة TRUE في حالة أن أحد الشرطين TRUE ولكن ليس كلاهما x=6, y=3
(x==6 xor y==3) ترجع false
! س Not, النفي ترجع القيمة TRUE في حالة أن الشرط أرجع القيمة FALSE x=6, y=3
!(x==y) ترجع true

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

البي أتش بي من الصفر: الدرس الثالث

البي أتش بي من الصفر الدرس الثالث المتغيرات الثوابت العمليات

بسم الله والصلاة والسلام على رسول الله.

 

هذا الدرس جزء من سلسلة البي أتش بي من الصفر:

 

نبدأ اليوم الدرس الثالث في سلسلة البي أتش بي من الصفر.
أقسام الدرس:

  • المتغيرات.
  • الثوابت.
  • العمليات الحسابية.
  • عمليات الإسناد.
  • عمليات الزيادة والنقصان بواحد.

 

المتغيرات:

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

س = 3.

ص = س+5.

في هذه العملية الرياضية لدينا المعطيات س وتحمل القيمة 3،  والعملية الرياضية أن الحرف ص يساوي ناتج جمع المعطى س والرقم 5. عليه تكون قيمة ص تساوي 8.

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

هناك عدة شروط لتسمية المتغيرات:

  • يبدأ إسم المتغير في لغة البي أتش بي بعلامة الدولار “$” ومن ثم يليها إسم المتغير.
  • يجب أن يبدأ إسم المتغير بحرف أو علامة “_”.
  • لا يحتوي إسم المتغير إلا على التالي (أحرف، أرقام و علامة “_”).
  • لا يمكن أن يحتوي إسم المتغير على مسافة.
  • وأخير المعلومة التي ذكرت في الدرس الثاني أن إسم المتغير حساس لحالة الأحرف.

لنقم الآن بتعريف عدد من المتغيرات:

<?php
$var1=12;
$var2=2.7
$var3='a';
$var4='variable';
?>

قم بإنشاء مجلد بإسم lesson3 في مجلد htdocs وداخل المجلد أنشئ ملف variables.php وقم بنسخ ولصق الكود السابق. وللتنفيذ يمكنك التوجه للرابط:
http://localhost/lesson1/variables.php

حسنا لقد قمنا بتعريف أربعة متغيرات وأسندنا إليها قيم مختلفة. فالمتغير الأول يحمل العدد 12، والمتغير الثاني يحمل رقم بفاصلة عشرية 2.7، أما المتغير الثالث فيحتوي على الحرف a، والمتغير الأخير يحمل قيمة نصية variable. لاحظ أننا قمنا بوضع فاصلة منقوطة بنهاية كل تعريف لمتغير لنفصل بين التعليمات البرمجية المختلفة كما ذكرنا في الدرس السابق. في المتغير الثالث والرابع قمنا بوضع قيمة المتغير بين ‘ ‘ وهي تستخدم في القيم النصية أي في حالة إسناد الأحرف أو الكلمات والعبارات.

ربما قد لاحظت أننا لم نقوم بتحديد نوع المتغيرات عندما قمنا بإسناد قيم لها على الرغم من إختلاف أنواع القيم المسندة، وهذا نسبة لأن البي أتش بي “Loosely Typed Language” وهي اللغات التي لا تحتاج لتعريف نوع المتغير قبل إسناد قيمة إليه، على عكس “Strongly Typed Language” مثل الجافا والسي شارب والتي تشترط تعريف نوع المتغير. ففي البي أتش بي يتم تعريف المتغيرات عندما تقوم بإسناد قيمة لها، وعندها تقوم لغة البي أتش بي بصورة تلقائية بتحديد نوع القيمة المسندة للمتغير وتغير نوع المتغير إلى النوع الصحيح.

إسناد القيم للمتغيرات في لغة البي أتش بي دائما يتم بما يسمى الإسناد بالقيمة وهو يعني عند إسناد قيمة لمتغير فإن كامل القيمة يتم وضعها في المتغير وتصبح قيمة قائمة بذاتها فإذا قمنا بتعريف متغير ووضع قيمة 3 فيه، ومن ثم قمنا بتعريف متغير آخر وقمنا بوضع المتغير الأول في المتغير الثاني فإن المتغير الثاني يصبح يحمل نفس قيمة المتغير الأول ولكن ليس له علاقة بالمتغير الأول وعليه إذا قمنا بتغير قيمة المتغير الأول فلن يتأثر المتغير الثاني. النوع الثاني من الإسناد والذي تتيحه لغة البي أتش بي هو ما يسمى الإسناد بالإشارة وهنا عند إسناد المتغير الأول بالإشارة للمتغير الثاني فإنه عندما نقوم بتغير قيمة المتغير الأول تتغير تلقائيا قيمة المتغير الثاني وبالعكس وهذا لأنه عند الإسناد بالإشارة يقوم المتغير بعمل مؤشر للقيمة الخاصة بالمتغير الأول فقط ولا يملك فيمة خاصة به أي أنهما يتشاركان نفس القيمة فعليا فإذا قام أحدهما بالتغير عليها يظهر التغير في المتغير الآخر أيضا. لإستخدام الإسناد بالإشارة نسبق المتغير الأول بعلامة “&” عند الإسناد، ملحوظة مهمة الإسناد بالإشارة يستخدم فقط عند إسناد متغير لمتغير وليس قيمة لمتغير. إليك المثال التالي:

<?php

//الإسناد بالقيمة
echo 'الإسناد بالقيمة<br/>';

$var1 = 3;
$var2 = $var1;

//طباعة قيمة المتغيرين قبل تغير قيمة الأول
echo '$var1 = '.$var1.'<br/>';
echo '$var2 = '.$var2.'<br/>';

//تغير قيمة المتغير الأول
$var1 = 55;

//طباعة قيمتهما بعد تغير قيمة المتغير الأول
echo '$var1 = '.$var1.'<br/>';
echo '$var2 = '.$var2.'<br/>';

//الإسناد بالإشارة
echo '<br/><br/>الإسناد بالإشارة<br/>';

$var3 = 6;
$var4 = &amp;$var3;

//طباعة قيمة المتغيرين قبل تغير قيمة المتغير الثاني
echo '$var3 = '.$var3.'<br/>';
echo '$var4 = '.$var4.'<br/>';

//تغير قيمة المتغير الثاني
$var4 = 77;

//طباعة قيمتهما بعد تغير قيمة المتغير الثاني
echo '$var3 = '.$var3.'<br/>';
echo '$var4 = '.$var4.'<br/>';

?>

قم بفتح الملف variables.php ونسخ ولصق الكود في النهاية للتجريب.

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

<?php
$x = 5;
isset($x);
?>

نطاق المتغيرات:

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

  • محلي
  • عالمي
  • ثابت
  • متغير

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

الثوابت:

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

  • الثوابت لا تسبقها علامة “$”.
  • يتم تعريف الثوابت بإستخدام الدالة define فقط، وليس بالإسناد العادي كما في المتغيرات.
  • يمكن تعريف الثوابت فأي مكان داخل الكود من غير الإهتمام بقوانين نطاق المتغيرات.
  • لايمكن إعادة تعريف المتغيرات أو إلغاءها بعد تعريفها.
  • فقط أنواع البيانات الأساسية (boolean, integer, float and string) يجب أن توضع في الثوابت.

لنقم الآن بتعريف بعض الثوابت:

<?php

define('CONST_ONE', 2);

define('CONST_TOW', 10.345);

define('CONST_THREE', TRUE);

define('CONST_FOUR', 'this is a constant');

echo CONST_ONE.'<br/>';
echo CONST_TOW.'<br/>';
echo CONST_THREE.'<br/>';
echo CONST_FOUR.'<br/>';
?>

قم بإنشاء ملف constant.php داخل مجلد الدرس وقم بنسخ ولصق الكود السابق ومن ثم التنفيذ في المتصفح من خلال الرابط التالي:
http://localhost/lesson3/constant .php
يقوم الكود السابق بتعريف الثوابت ومن ثم طباعة قيمها على الشاشة. نلاحظ في الكود السابق أننا قمنا بتسمية الثوابت فقط بإستخدام الأحرف الكبيرة وهذا ليس شرط ولكن هذه هي الطريقة المثلى والمتعارف عليها.
ربما تتسائل ما هي الفائدة من الثوابت حيث أنها تقريبا تقوم بنفس عمل المتغيرات، وبل تتفوق عليها المتغيرات لأنها يمكن تغيير قيمها أثناء التنفيذ!! حسنا إليك فائدتين للثوابت:

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

من الدوال المفيدة عند التعامل مع الثوابت الدلة defined والتي تقوم بإختبار هل الثابت موجود أم لا وهي تقوم بإرجاع قيمة TRUE  في حالة وجود ثابت بالإسم المحدد و FALSE في حالة عدم وجوده. الدالة الثانية هي الدالة get_defined_constants وهي تقوم بإرجاع مصفوفة (سنتناول المصفوفات فالدروس القادمة الآن يمكنك التفكير فيها على أن الدالة تقوم بإرجاع قائمة) بكل الثوابت التي تم تعريفها في الكود.

<?php

if(defined('CONST_ONE')){

echo 'الثابت معرف';

}

print_r(get_defined_constants());

?>

قم بنسخ الكود ولصقه في آخر الملف constant.php السابق. عند التنفيذ مرة أخرى بالإضافة إلى المخرجات السابقة يجب أن نرى الآن جملة “الثابت معرف” ونص كبير غريب قد ظهر على الشاشة يحتوى هذا النص على كل الثوابت المعرفة لحظة تنفيذ الكود سواء من قبلنا أو ثوابت قامت البي أتش بي بتعريفها. في الكود السابق إستخدمنا الجملة الشرطية if وسنقوم بشرحها في الدرس القادم إن شاء الله لكن بصورة مبسطة هي تقوم بعمل إختبار لقيمة أو معادلة فإذا كان ناتج القيمة أو المعادلة true تقوم بتنفيذ الكود الذي يليها والموضوع داخل القوسين {} وإذا كان ناتج القيمة أو المعادلة false لا تقوم بتنفيذ هذا الكود في حالتنا هذه قمنا بعمل إختبار للتحقق من وجود الثابت وعندما قامت الدالة بإرجاع القيمة true إلى الجملة الشرطية قامت مباشرة بتنفيذ الكود. الدالة الأخرى print_r بصورة مبسطة تقوم بطباعة المتغيرات بصورة مقروءة للإنسان.

 

العمليات الحسابية:

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

فيما يلي جدول يوضح العمليات الحسابية:

العملية الإسم الوصف مثال النتيجة
س + ص الجمع حاصل جمع س و ص 2 + 2 4
س – ص الطرح الفرق بين س و ص 5 – 2 3
س * ص الضرب حاصل ضرب س في ص 5 * 2 10
س / ص القسمة حاصل قسمة س على ص 15 / 5 3
س % ص باقي القسمة باقي قسمة س على ص 5 % 2
10 % 8
10 % 2
1
2
0
س . ص الوصل تقوم بوصل أو لصق نصين مع بعضهما “مر” . “حبا” مرحبا

 

عمليات الإسناد:

هي عملية إسناد التعبير البرمجي يمين علامة “=” إلى التعبير البرمجي يسار علامة “=” كما هو موضح بالأمثلة السابقة. بدمج علامة “=” مع العمليات الرياضية نحصل على عمليات إسناد أخرى مختصرة كما بالجدول التالي:

الإسناد يوازي الوصف
س = ص س = ص الطرف الأيسر يحصل على نفس قيمة الطرف الأيمن
س += ص س = س + ص الجمع
س -= ص س = س – ص الطرح
س *= ص س = س * ص الضرب
س /= ص س = س / ص القسمة
س %= ص س = س % ص باقي القسمة
س .= ص س = س.ص وصل أو لصق نصين مع بعضهما

 

عمليات الزيادة والنقصان بواحد:

هي إختصار للعملية س= س +1 أو س = س – 1. الجدول التالي يوضح:

العملية الوصف
++س زيادة بواحد قبل الإسناد
س++ زيادة بواحد بعد الإسناد
– -س نقص بواحد قبل الإسناد
س- – نقص بواحد بعد الإسناد

مثال لشرح الزيادة والنقصان بواحد:

<?php
//مثال على الزيادة بواحد بعد الإسناد
$x = 6;
$y = $x++;

echo '$x = '.$x.'
';
echo '$y = '.$y.'
';
/* لاحظ أنه تم إسناد القيمة القديمة أولا ومن ثم تم زيادة قيمة المتغير وعليه
$x = 7
$y = 6
*/

//مثال على الزيادة بواحد قبل الإسناد
$w = 3;
$z = ++$w;

echo '$w = '.$w.'
';
echo '$z = '.$z.'
';
/* لاحظ أنه تم زيادة قيمة المتغير أولا ومن ثم إسناد القيمة الجديدة وعليه
$w = 4
$z = 4
*/

//نفس المفهوم يطبق على عملية الطرح

?>

قم بإنشاء ملف جديد داخل مجلد الدرس بإسم incdec.php وقم بنسخ ولصق الكود السابق للتجربة.

 

بهذا نكون وصلنا إلى نهاية هذا الدرس ترقبو الدرس القادم بإذن الله

البي أتش بي من الصفر: الدرس الثاني مرحبا بالعالم

البي أتش بي من الصفر: الدرس الثاني مرحبا بالعالم

بسم الله والصلاة والسلام على رسول الله عليه أفضل الصلاة وأتم التسليم.

 

هذا الدرس جزء من سلسلة البي أتش بي من الصفر:

 

نبدأ اليوم الدرس الثاني في سلسلة البي أتش بي من الصفر.
أقسام الدرس:

  • البداية.
  • التعليقات في لغة البي أتش بي.
  • هل لغة البي أتش بي حساسة لحالة الأحرف؟

البداية:

يتم كتابة كود البي أتش بي في ملفات نصية تحمل الإمتداد .php، ودائما يتم تنفيذ كود البي أتش بي في السيرفر وينتج عنه كود أتش تي أم أل يتم إرساله إلى المتصفح. بعد إنشاء ملف البي أتش بي يجب أن نقوم بوضع وسم بداية ونهاية البي أتش بي، حيث يبدأ كل كود بي أتش بي بـ <?php وينتهي بـ ?> ويمكن وضعهما في أي مكان داخل الملف بشرط أن يلي وسم بداية كود البي أتش بي وسم نهاية، وداخل هذين الوسمين فقط نقوم بكتابة كود البي أتش بي.

<?php 

?>

يحتوي كل ملف بي أتش بي في العادة على كود أتش تي أم أل بالإضافة لكود بي أتش بي، فيما يلي مثال على كود بي أتش بي يقوم بإرسال عبارة “مرحبا بالعالم” إلى المتصفح:

<html>
<body>
<?php
echo "مرحبا بالعالم";
?>
</body>
</html>

قم بإنشاء مجلد بإسم lesson1 في مجلد htdocs الموجود داخل مجلد السيرفر xampp والذي قمنا بتنصيبه في الدرس السابق، داخل هذا المجلد أنشىء ملف بالإسم التالي helloworld.php وقم بنسخ ولصق الكود السابق. ومن ثم لتنفيذ الكود السابق إذهب إلى العنوان التالي:
http://localhost/lesson1/helloworld.php

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

<html>
<body>
مرحبا بالعالم
</body>
</html>

لكن أين ذهب كود البي أتش البي الذي قمنا بكتابته للتو؟؟!!. كما قلنا في السابق قام السيرفر بتنفيذ كود البي أتش بي وتجهيز كود الصفحة إتش تي أم أل النهائي وإرساله إلى المتصفح ليتم عرضه.
في لغة البي أتش بي يجب أن ينتهي كل سطر بفاصلة منقوطة “;”، وتستخدم الفاصلة المنقوطة كفاصل بين التعليمات البرمجية المختلفة وعليه يجب عليك أن لاتنسى وضع الفاصلة المنقوطة في نهاية كل سطر كود تكتبه وإلا سيظهر خطأ أثناء التنفيذ.

 

التعليقات في لغة البي أتش بي:

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

أولا التعليقات التي تكتب في سطر واحد: يمكنك إستخدام العلامة “//” إذا كان التعليق سيكتب في سطر واحد فقط مثلا:

<html>
<body>
<?php
//هذا تعليق: يطبع السطر التالي عبارة مرحبا بالعالم.
echo "مرحبا بالعالم";
?>
</body>
</html>

ثانيا التعليقات التي تكتب في أكثر من سطر واحد: يتم في هذه الحالة كتابة التعليق بين هاتين العلامتين “/*” و “*/” مثلا:

<html>
<body>
<?php
/*
هذا التعليق سيكتب في أكثر من سطر
يطبع السطر التالي عبارة
مرحبا بالعالم
*/
echo "مرحبا بالعالم";
?>
</body>
</html>

 

هل البي أتش بي حساسة لحالة الأحرف؟

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

  • أسماء المتغيرات
  • أسماء الثوابت

أهم الأجزاء الغير حساسة لحالة الأحرف:

  • أسماء الدوال
  • الكلمات المفتاحية أو الكلمات المحجوزة بواسطة لغة البي أتش بي مثل (IF, WhIle, truE…).

 

بهذا نكون وصلنا إلى آخر هذا الدرس ترقبو الدرس القادم إن شاء الله.