الجزء 10 شرح أهمية المتغيرات بلغة الجافا سكريبت بمثال عملي

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

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

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

لنبدأ وميضا جديدا لتكون سعيدا ومفيدا 

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

سأقوم الآن بإنشائه متغيرا ورسميه mainPrice أعطيه قيمة  500 دولار أقوم بإنشاء 4 أوامر من الأمر div  كالتالي ولكن بملف خارجي ثم أقوم بأستدعاءه 

<div id= "price"> </ div>">   سأقوم بوضع السعر الأساسي mainprice

<div id= "product1"> </ div>"> 

<div id= "product2"> </ div>"> 

<div id= "product3"> </ div>">

<script scr=”main.js”></script>

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

var mainPrice =500;

;docuoment.getElementById(“price”).innterHTML = mainprice

;docuoment.getElementById(“product1”).innterHTML =mainprice

;docuoment.getElementById(“product2”).innterHTML =mainprice

;docuoment.getElementById(“product3”).innterHTML =mainprice

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

;var mainPrice =500;

;docuoment.getElementById(“price”).innterHTML = mainprice - myDiscount

;docuoment.getElementById(“product1”).innterHTML = mainprice - myDiscount

;docuoment.getElementById(“product2”).innterHTML =mainprice - myDiscount

;docuoment.getElementById(“product3”).innterHTML =mainprice -  myDiscount

هل يمكنك توقع ما الذي سيظهر على الشاشة إذا كانت البرمجة صحيحة لقد قمت بإضافة الأمر التالي 500 سعر المتغير mainPrice ومن ثم طلبت من المصحح بأن يقوم بطرح القيمة المتغير myDiscount  وهي 50  فما سيظهر هو 500 - 50 فيظهر الرقم 450 أربع مرات 

التمرين الثاني أريد إخبار البرمجة بأن هناك خصم أحر وهو 100 وهناك myDiscountقيمته  200 وخصم آخر وهذا خصم كبير فكيف سأقوم بتنفيذ ما أريد فعله   فسأقوم بتغير اسم المتغيرmySmallDiscount وأعطيه القيمة 50  بتعريف متغير آخر باسم myةMyMediumDiscount وأعطيه القيمة 100 والمتغير الأخير اسمية myBigDiscount وأعطيه القيمة 250 فعليك تغير أسماء المتغيرات وطباعة نفس الكود السابق فستكون البرمجة كالتالي 

var mainPrice =500;

var myDiscount = 50;

var myMediumlDiscount = 100;

var myMyBigDiscount = 250;

docuoment.getElementById(“price”).innterHTML = mainprice - myDiscount;  

docuoment.getElementById(“product1”).innterHTML = mainprice - mySmallDiscount;  

docuoment.getElementById(“product2”).innterHTML =mainprice - myMediumDiscount;

docuoment.getElementById(“product2”).innterHTML  = mainprice - myMyBigDiscount;

سنقوم بشرح آلية عمل الكود الذي قمنا بكتابته المنتج الأساسي سعره 500 وهو المتغير الأول mainprice أما السطر الثاني هو المنتج 500 طرح قيمة المتغير myDiscount  والسطر الثالث يقوم بطرح قيمة المنتج الأساسي من قيمة الخصم myMediumlDiscount والسطر الرابع هو طرح قيمة المتغير الأساسي  mainPrice  من القيمة الخصم الكبير myMyBigDiscount إذا ما سيظهر على الشاشة البرمجة هو

 500 وتحته 450 وتحته 400 وتحته 250

;docuoment.getElementById(“price”).innterHTML = mainprice - myDiscount

;docuoment.getElementById(“product1”).innterHTML = mainprice - myDiscount

;docuoment.getElementById(“product2”).innterHTML =mainprice - myDiscount

;docuoment.getElementById(“product3”).innterHTML =mainprice -  myDiscount

ونفس العملية تكون لو أخبرنا بإنشاء عملية حسابية غير الطرح - وهناك إشارة * وهناك إشارة القسمة /  الضرب* وهناك إشارة نفس الإشارة  + الجمع وكل الإشارات الموجودة بالرياضيات  التي تراها بالعمليات الحسابية س

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

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

ملاحظة : كل أمر برمجي ستقوم بكتابة tags  الخاص بالمتغير وهو var لو أن هناك شيء لم تفهمه بالمتغير فإنك ستفهمه بالالمقالات التالية بإذن الله تعالى وسنقوم بالمقال التاي شرح أنواع الداتا الخاصة بلغة الجافا سكريبت وستفهم المتغيرات بالدروس التالية بأمثلة أكثر صعوبة وشكرا لكم على حست المتابعة لقد تم نشر أكثر من 64 مقال  في مجالات مختلفة منها البرمجة تعلم اللغات الذاتية ومهاراتي الحوار تنظيم الوقت والإدارة تعليم اللغات وخاصة للغة التركية سأقوم بنشر مقالات عن كافة القواعد بلغة التركية ما يساعد بنشر المعرفة بشكل مجاني وتكون هذه المقالات مرجع لك لا تنسى التعليق بكلمة لدعمنا لنشر المزيد بأذن الله والمشاركة لكل شخص مهتم بتعلم هذه الأشياء والسلام لكل من فهم الكلام وسعى إلى تطبيقها إلى أن نلتقي بلقاء أخر والسلام عليكم ورحمة الله وبركاته 

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