الدرس مفصل الثاني Fla :- مقدمة عن أوامر الشرط

[admin]

السلام عليكم ورحمة الله

الدرس مفصل الثاني في ورشة دروس الفلاش


الدرس مفصل الثاني Fla :- مقدمة عن أوامر الشرط .


أوامر الشرط ـ( if )ـ


س - ما معنى أوامر الشرط ؟

ج - وهي تتيح لنا أن نقوم بعمل شيء معين عندما يتحقق شرط معين فمثلاً ..
إذا قام المستخدم بإدخال اسم مستخدم وكلمة مرور بشكل صحيح انتقل للصفحة الثانية ( if ) .
وأيضًا إذا أدخل كلمة المرور واسم المستخدم بشكل خاطئ اطلب منه إدخالها بشكل صحيح (else ).

بالبداية أحب أقول إن أوامر الشرط من أسهل الأوامر بالفلاش ونحن راح نأخذ نبذه بسيطه عنها لا أكثر .. يعني لا أحد يخاف ويقفل الصفحة ترا تعبت بإعداد الدرس مفصل http://www.dzbatna.com/images/smilies/nosweat.gif

==================================================

لنأخذ بعض الأمثلة الفعلية على أمر الشرط if

افتح الفلاش واختر http://www.dzbatna.com/attachments/280637d1217796098-as_2.gif

وغير لون المسرح ( لأننا راح نرسم مربع بالمسرح لونه أبيض نبيه يظهر لا أكثر )

تابع الصورة

http://upload.dzbatna.net/upfiles/I3j84459.gif

ثم اختر أداة الكتابة [ http://upload.dzbatna.net/upfiles/ZsA84491.gif ] من قائمة الأدوات على يسار الشاشة


ارسم مربع نصي بالمسرح

http://upload.dzbatna.net/upfiles/RLu84512.gif

الآن نعطيه اسم معين بمربع Instance Name ..
تابع الصورة

http://upload.dzbatna.net/upfiles/KDS92465.gif

مثلاً فلنسميه : s ( احفظ اللي كتبته) .. أو أي ثاني كما تريد لكن احفظه مثل ما قلت .
ومن ثم من قائمة الخصائص ( Properties ) اجعل نوعه : Input Text
تابع الصورة

http://upload.dzbatna.net/upfiles/VwH84533.gif

س 1 - ما الفائدة من تسمية الحقل النصي ؟
ج - وذلك لكي نستطيع استخدامه في الأكشن سكريبت script بعد تعريفه في مربع Instance Name

س 2 - لماذا جعلنا نوع الحقل Input Text ؟
ج - وذلك لأننا سوف نجعله مثل حقل ملء بيانات ( سنكتب فيه ) .

الشكل النهائي لإعدادات المربع النصي راح تكون مثل الذي بالصورة :

http://upload.dzbatna.net/upfiles/hNf84562.gif


ثم ارسم شكل بالمسرح بإستخدام إحدى أدوات الرسم الجاهزة [ http://upload.dzbatna.net/upfiles/PiR84591.gif ] (اضغط مطولاً على الشكل حتى تظهر بقية الأشكال ) لكي نقوم بتحويل الشكل إلى زر

قم بتحديد الشكل الذي رسمته بالماوس ثم اضغط F8 واختر كما هو موضح بالصورة

http://upload.dzbatna.net/upfiles/KEh84617.gif


بعدها اضغط على F9 لفتح نافذة الأكشن سكريبت script , اختر كما هو موضح بالصورة

1
http://upload.dzbatna.net/upfiles/dnX84645.gif

2
http://upload.dzbatna.net/upfiles/Gt284669.gif
3
http://upload.dzbatna.net/upfiles/KPp84695.gif

هذا الكود code الذي سيظهر :


رمز Code:
on (press) { if () { } }
س- ما الفرق بين القوسين () و القوسين {} الموجودان في الدالة if ؟
ج - القوسين () : هنا نكتب الشرط .
القوسين {} : هنا نكتب الحدث المفترض أن يحدث إذا تحقق الشرط .

الآن لنكتب الشرط داخل القوسين () ونكتب الحدث داخل {}

لنكمل عملنا على الكود code :

http://upload.dzbatna.net/upfiles/s3B84983.gif

كما تلاحظ كتبنا الشرط داخل القوسين ()

حيث:

1- s هو اسم المربع النصي الذي رسمناه وكتبنا s داخل مربع الـ Instance Name بالأعلى ( لا تقول نسيت http://www.dzbatna.com/images/smilies/nosweat.gif )

2- يجب تعريف نوع الكائن s هل هو موفي , صوت , مصفوفه , نص .. إلخ
ونحن حددناه على إنه نص كم تلاحظ فنكتب : .text بعد اسم الكائن s

3- علامتي الـ == : تفيد مقارنة قيمتين , قيمة الحقل النصي s مع قيمة ما بعد علامتي الـ ==

4- علامتي التنصيص "" : لكي تكتب نص إذا كان مساويًا للذي سوف تكتبه بالمربع النصي s
يقوم بتحقيق الشرط ويظهر الحدث الذي تريده ( اكتب ما شئت بينهما أنا كتبت TRAIDNT ) .



الآن نقوم بإدخال الحدث الذي نريده إذا تحقق الشرط

سنقوم بإظهار كلمة معينة في الـ Output إذا تحقق الشرط
كيف يتم إظهار الكتابه في الـ Output .. ؟ هل تذكر الدرس مفصل الأول ؟

اقتباس
trace : وهي غالبًا تُظهر لك الأخطاء البرمجية التي تحدث في العمل ويمكنك كتابة أي كلام ( حتى لو بالعربي ) لتظهر في هذه النافذة بالجهة اليمنى من الشاشة عند تجربة العمل تحت نافذة
Debugging

الآن لنكتب ببين القوسين {} الحدث المطلوب :
تابع الصوره

http://upload.dzbatna.net/upfiles/2v385213.gif

الكود code راح يكون شكله هكذا بعد إضافة الحدث :

رمز Code:
on (press) { if (s.text == "TRAIDNT") { trace(); } }
الحدث هو trace لنضيف علامتي التنصيص للأمر trace(); لأني أريد إظهار نص وليس رقم .

- إذا كان ما تريد إظهاره نص يجب وضع علامتي التنصيص .
- إذا كان ما تريد إظهاره رقم لا يجب وضع علامتي التنصيص ( يعني ما تفرق ) .

الكود code النهائي على الزر اللي اشتغلنا عليه http://www.dzbatna.com/images/smilies/showoff.gif :

رمز Code:
on (press) { if (s.text == "TRAIDNT") { trace("Hi ! i am FLASHEN") ; } }
الفاصله المنقوطه ; مهمة لإنهاء كل أمر تكتبه بالأكشن مثل اغلب لغات البرمجه الأخرى .


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

:::::::::::::::::::::::::::::::::::::

طيب مثلاً يا فلاشين لو ما كتب المستخدم الشرط صح وش يصير ؟؟
ما يصير أي شئ كأنك ما اشتغلت وكتبت حاجه

طيب .. والحل يعني ؟؟

بسيطه نكتب الأمر else ونعطيه جواب آخر يُكتب له بالـ Output

تابع الصورة :

http://upload.dzbatna.net/upfiles/zMd85304.gif

انتبه لازم يكون الأمر else داخل أقواس الـ on {} وخارج أقواس الـ if {}

ملاحظة / من المحتمل أن يزيد معك قوس { قبل كلمة else لهذا امسحه لكي لا يؤثر على الكود code .

وبعدها أضيف الأمر trace مثل ما سوينا فوق

رمز Code:
trace("") ;
واكتب بين علامتي التنصيص الذي تريده أن يظهر إذا لم يتحقق الشرط .


الكود code النهائي اللي أنا كتبته http://www.dzbatna.com/images/smilies/shiny01.gif


رمز Code:
on (press) { if (s.text == "TRAIDNT") { trace("Hi ! i am FLASHEN") ; } else { trace("Are you kidding me?"); } }
ملاحظات نهائية على الكود code :

{} : أقواس الـ if
{} : أقواس الـ else
{} : أقواس حدث الزر الـ on

قلبنا حصه فنيه كلها ألوان http://www.dzbatna.com/images/smilies/nosweat.gif

الآن بعد ما خلصت جرب شغلك اضغط على Ctrl + Enter واكتب الشرط صح بداخل المربع النصي واضغط الزر وشوف وش يطلع معك .. وكذلك اكتب الشرط خطأ واضغط الزر وشوف وش يطلع معك ..

على هذا انتهى الجزء الأول من أوامر الشرط .


==================================================


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


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


هام : لمن لا تظهر له الصور حملها بملف مضغوط rar من هـــنـــا (http://upload.ps/uicziqlnv0ow/Lesson_2.zip.htm) .







محبكم /


فلاشين



تحيتي


الصور المصغرة المرفقة http://www.traidnt.net/vb/attachments/280618d1217793752t-123.jpg (http://www.traidnt.net/vb/attachments/280618d1217793752-123.jpg)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©