بسم الله الرحمن الرحيم..
::الدرس الأول :: أساسيات الجافاسكريبت..
++++++++++++++ أكواد تفيدنا في الكتابة والجمل الشرطية في الجافاسكريبت ++++++++++++++
في هذا الدرس سأقوم بشرح الآتي:
1) أكواد تفيدنا في كتابة أكوادنا بالجافاسكريبت مثل alert, write وغيرهم..
2) الجمل الشرطية مثل if و if...else و Switch وطريقة التعامل معهم وأيضا فائدتهم!!
،،،،،،،،،،،،،
شرح (1): أكواد تفيدنا في كتابة أكوادنا بالجافاسكريبت مثل alert, write وغيرهم..
في هذا الدرس سأتكلم بإذن الله عن طريقة طباعة جمله او كلمه في الجافاسكريبت وطريقة استخدام بعض أكوادها المتعارف عليها والتي ستفيدنا في كتابة أكوادنا الخاصه.. سيتضح كل شيء قريبا باذن الله 
عندما تريد أن تقوم بطباعة جمله معينه نستخدم هذا الامر
كود:
document.write( " تضع هنا الجمله التي تريد كتابتها " );
او يمكنك طباعة جمله تكون تحت تأثير style معين مثلا لون الخط او نوع الخط وحجمه ووالخ من خلال كتابة
كود:
document.write( "<h1 style= \"color : blue\" \"size : 20pt \"> تضع هنا الجمله التي تريد كتابتها </h1>" );
**ملاحظه: يجب وضع الجمله بين علامتي التنصيص (") لكي نوضح للكود ان هذه الجمله String و نعنى بكلمة String هي الأحرف والكلمات والجمل فجميعها يطلق عليها كلمة String اما الاحرف فقط فيطلق عليها Characters
وعندما تريد ان تطبع جمله و محتويات متغير قمت انت بتكوينه (أتذكر الصندوق الذي اسميناه Salam وقمنا بوضع رقم 5 بداخله؟ في الدرس الاول!!)
فعندما تريد ان تطبع جمله ومحتويات المتغير Salam الذي يحتوي على رقم 5 فببساطه تقوم بكتابة التالي:
كود:
document.write( " تضع هنا الجمله التي تريدها " + Salam);
او
كود:
document.write( " تضع هنا الجمله التي تريدها " + Salam + " جمله اخرى ");
**ملاحظه: عندما تريد ان تكتب جمله او جملتين وبينهم يكون المتغير يجب عليك اضافة + بين المتغير والجمله كما هو موضح في الكود السابق..
وتستطيع ان تقوم بطباعة محتويات المتغير Salam فقط باستخدام التالي:
كود:
document.write( Salam );
وبامكاننا طباعة قيمة المتغير Salam برسالة تنبيه من خلال
كود:
window.alert( Salam );
وأيضا نستطيع ان نأخذ من المستخدم قيمه سواء كانت جمله او رقم ونقوم بحفظها في المتغير الذي قمنا بإنشائه باستخدام الكود التالي:
كود:
window.prompt( "هنا تقوم بكتابة ماتريده من المستخدم", " هنا تقوم بكتابة طلب ادخال القيمه التي تريدها من المستخدم " );
سنأخذ مثال ونوضح طريقة عمل كل مما سبق ليتضح معنا الكود ونستطيع فهمه أكثر 
هذا مثال لكود قمت بكتابته..




بعض الاوامر التي يستفاد منها في الكتابه داخل كود alert الخاص بالتنبيه..

مثال:
كود:
window.alert( "Hi \n السلام عليكم");
حيث سيقوم الكود السابق بكتابة Hi ثم يطبع سطر جديد ويكتب (السلام عليكم).. بإمكانك استخدام أي من الأوامر المتوفره بالجدول الأعلى لتنظيم كتابتك أثناء عرضها في صندوق alert..
تستطيع بعد أخذ القيمه من المستخدم من خلال استعمال كود
كود:
window.prompt( " اكتب اسمك من فضلك", "ادخل اسمك" );
ان تقوم باظهار رسالة تأكيد للمستخدم بأن البيانات او الاسم الذي ادخله صحيح ام لا من خلال كتابة هذا الكود:
كود:
var okay = confirm( " هل اسمك صحيح؟ " );
هنا قمنا بإظهار للمستخدم بعد ادخال اسمه رسالة تأكيد بأن اسمه صحيح ام لا.. وسيتم حفظ الإجابه في المتغير okay الذي قمنا بإنشاءه لنستفيد من الاجابه لاحقا..
كمثال اذا كان المتغير okay (نعم) سنطبق كود معين، اما اذا (لا) سنقوم بتطبيق كود معين نحن نحدده لاحقا أثناء كتابتنا للكود.. الأهم هو الآن معرفة طريقة كتابة الكود ومن ثم التنسيق ووضع الخطط لأكوادك ستكون من نصيبك 
*العمليات الحسابيه: مثلا نريد أن نجمع متغيرين مع بعض! او طرحهم او قسمتهم او لمعرفة باقي قسمة الأول على الآخر..الخ
للجمع نستخدم +
مثال
x + y
للطرح نستخدم -
مثال
x - y
للقسمه نستخدم /
مثال
x / y
لمعرفة باقي القسمه نستخدم %
مثال
x % y
للضرب نستخدم *
مثال
x * y
*العمليات المنطقيه مثل (المتغير x اكبر من المتغير y او المتغير x اصغر من y ....الخ)..

سنأخذ الآن أمثله لبعض من العمليات..
كود:
var first = 4;
first = first + 4;
او يمكنك كتابتها هكذا
عند كتابة الكود سيقوم اول بإنشاء المتغير ووضع القيمه 4 بداخله، وعندما يصل الى first+=4; سيقوم باضافة 4 الى العدد المخزن داخل المتغير
بحيث عند طباعة المتغير سيظهر لنا الرقم 8، لأن الرقم المخزن داخل المتغير هو 4 وتم الجمع عليه رقم 4 فسيكون الناتج 8..
وتستطيع عمل التالي
فسيقوم الكود السابق بضرب العدد 4 بنفسه فعند طباعة المتغير سيظهر لنا العدد 16
فالكود السابق تماما كأنه هكذا
كود:
first = first * first;
اي المتغير (سيحفظ قيمه جديده ألا وهي) = 4 * 4
تم الانتهاء الآن من شرح (1) اكواد يجب عليك معرفتها لتساعدك في كتابة برامجك بالجافاسكريبت وعمليات مختلفه تعلمتها من هذا الدرس مثل العمليات المنطقيه والحسابيه..
،،،،،،،،،،،،،
شرح (2): الجمل الشرطية مثل if و if...else و Switch وطريقة التعامل معهم وأيضا فائدتهم!!
ماهي الجمل الشرطيه؟ وكيفية التعامل معها؟ هذا ماسنتكلم عنه الآن باذن الله، وستكون هناك أمثله كافيه ووافيه لشرح فكرتها، فلا تتذمر من الآن لأنها سهله جدا وتستخدم بكثره ^_^
نستخدم الجمل الشرطية في أكوادنا وبرامجنا لنحدد الناتج الذي نريده، مثلا:
اذا طلبت من المستخدم أن يدخل (اسمه) مثلاً ولكنه قام بإدخال رقم!! فالجمل الشرطيه هي الحل لذلك،
او مثلا اذا أردت ان تتأكد من قيمه قام بإدخالها المستخدم فسوف نستخدم الجمل الشرطيه.. هل اتضحت الفكره؟
سوف أقوم بترجمتها واقعياً:
عندما ترجع من المدرسه وتكون درجاتك منخفضه وانت متشائم، فتقوم بتحديد أفكار برأسك مثلا (اذا رأى أبي الشهاده وزعل لأجل درجاتي المنخفضه، سيكون جوابي له بأني سأبذل قصارى جهدي باذن الله لأحصل على الدرجات المرتفعه في الامتحانات القادمه..
أما اذا كان أبي راض عن درجاتي فسوف أتفاءل ويمكن يسمح لي بالخروج مع أصدقائي..)!!
هل فهمتها؟ اذا نحن بالمثال الواقعي قمنا بتحديد جملتين شرطيتين (اذا ابي زعل لأجل درجاتي المنخفضه *فسأطبق الحل.. بأني سأبذل جهدي..الخ* ، او اذا كان ابي راض عن درجاتي...)
هل رأيت! كل هذا نستطيع عمله بالبرمجه، من خلال استخدامنا للجمل الشرطيه التاليه:
if statement
if..else statement
switch
نأخذها بالترتيب:
** الجمله الشرطية if statement:
ونقوم بكتابة ال if statement كما يلي:
كود:
if( الشرط الذي نريد التحقق منه )
{
اذا كان الشرط صحيحا فسيتم تنفيذ الكود الذي يوضع هنا، اما اذا كان غير صحيح فلن يتم تنفيذ الكود الذي يوضع هنا
}
انظر الى الكود التالي، وسأقوم بشرحه لكي تفهمه باذن الله:

المثال حي:



** الجمله الشرطيه if..else statement:
بالمناسبه هذي الجمله الشرطيه تعتبر تابعه لل if statement
بمعنى أتذكر المثال الواقعي الذي قمت بذكره؟
الشرط الأول الذي قمت (اذا أبي زعل من درجاتي المنخفضه...) هذا هو ال if، أما (اذا كان أبي راض عن درجاتي..) هذي هي ال else statement
أي ان لم يتحقق الشرط الاول، فسنقوم بتفيذ شيء آخر..
لنكمل على الكود السابق ونضيف اليه ال else، فسيكون هكذا..


ملاحظه: في بعض الأكواد ستجد انه المبرمجين يكتبون if statement اكثر من واحده (كل جمله شرطيه داخل الأخرى) مثال:
كود:
if (....)
{
if(..)
{
...
}
}
نفس الشيء لل else فهذا يسمى ال nested code فهم يستخدمونها للحصول على نتائج أكثر ايجابيه من المستخدم مثلا في ال if الأولى تقوم بالتأكد اذا كان العمر موجب، وفي ال if الثانيه تقوم بالتأكد اذا كان عدد صحيح او عشري...الخ
** الجمله الشرطيه Switch:
أنا افضل هذي، لكن كل جمله شرطيه لها استخدامها فهذه الجمله الشرطيه تغنيك عن ال if وأيضا عن ال if..else
مثال لطريقة كتابة ال Switch ومثال حي للكود..
كود:
<script type="text/javascript">
var Hi;
Hi = window.prompt(" أدخل عمرك لو سمحت", "عمرك: " );
switch( Hi )
{
case 0:
window.alert(" كيف يكون عمرك صفرا!!");
break;
case Hi > 0:
window.alert("العمر كله ان شاء الله :)");
break;
default:
window.alert("أدخلت قيمه خطأ");
}
</script>
في هذه الحاله سنقوم بطلب من المستخدم بأن يدخل عمره، ثم سنقوم بحفظ القيمه التي أدخلها المستخدم في المتغير Hi
ثم سوف ندخل المتغير في ال switch(Hi) حيث switch(اسم المتغير هنا)
ثم سوف نمر على cases التي قمنا بكتابتها
case 0: (أي اذا كانت القميه التي أدخلها المستخدم صفراً فسوف نقوم باظهار تنبيه له (كيف يكون العمر صفراً!!) )
case Hi > 0: (أي اذا كان العمر أكبر من صفرا فسوف نقوم بإظهار (العمر كله ان شاء الله
) )
default: (أي اذا لم يتحقق أحد الشروط بالأعلى فسوف نقوم بتطبيق هذا الشرط الافتراضي، حينها عندما يدخل المستخدمه اسمه فلن تتحقق ال two cases حينها سوف نقوم بإظهار رسالة تنبيه (أدخلت قيمه خطأ) )
ألا تلاحظ ان بعد كل case يوجد (break
!!
نستفيد من break في الخروج عن ال switch في حين تحقق شرط معين، مثلاً عندما يقوم المستخدم بإدخال 13 فسوف تدخل القيمه لكي يتم التأكد بأنها ليست صفراً في case 0: فعندها لن يتحقق الشرط عندها ستذهب القيمه الى case Hi > 0: فسوف يتحقق الشرط حينها سوف نذهب الى break وفائدتها ان نخرج من ال switch دون المرور بالشروط الأخرى.. break تفيد جدًا في السرعه لأننا اذا لم نقم بكتابة break وعندما يتحقق الشرط case Hi>0: فسوف أيضاً نقوم بالمرور بال cases الأخرى مما يؤدي الى بطئ العمليه وهذا يدخل في ال slowing the memory عندما يكون لدينا أكثر من 30 او 50 case!!!!
أتمنى أن يكون شرحي لهذا الدرس كان سهلاً وممتعاً لك كقارئ..
أترك لكم المجال الآن لمن يريد أن يسأل أسئله بخصوص المواضيع التي قمت بشرحها..
لاتنسى: HomeWork قم بالعمل عليه، واذا عندك سؤال في نقطه لم تفهمها يمكنك كتابة سؤالك او استفسارك، لكن لن أقوم بحل ال HomeWork لك..
السؤال الأول:
أكتب برنامج يأخذ من المستخدم رقم موجب لقطر دائرة، ومن ثم تقوم أن بإعطائه معلومات عن الدائره (نصف القطر و مساحتها).
السؤال الثاني:
قم بكتابة برنامج بحيث يأخذ من المستخدم رقم موجب، ومن ثم يقوم بإبلاغه اذا كان الرقم الذي أدخله زوجي او فردي.
والحمدلله رب العالمين 
:::ClickClick Forums::: • مشاهدة الموضوع - ::الدرس الثاني:: أكواد تفيدنا والجمل الشرطية في الجافاسكريبت