تعلم البرمجة باستخدام JavaScript


الدرس: تعريف المتغيرات وتعديل قيمها


الصفحة السابقة
لتكون قادرًا على كتابة الكود في ظروف جيدة ، فإن عددًا معينًا من المفاهيم الأساسية ضروري. لنبدأ بالتعرف على المتغيرات وتغيير قيمها.

ما هو المتغير؟



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

javascript
المتغير مثل المستودع الذي نخزن فيه العناصر

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

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

  • ·         استخدام أسماء وصفية في جميع أنحاء التعليمات البرمجية الخاصة بك.
  • هل سبق لك أن مررت بخزانة ملفات قديمة ، مخزنة في صندوق مكتوب عليه "إداري" على الغلاف؟ هل تتذكر كم كانت محبطة؟ من خلال كونها وصفية ودقيقة في أسماء المتغيرات ، تصبح الحياة أسهل بكثير: تصبح الكود أسهل في القراءة والمحافظة عليها. بدلاً من    quantity  (أو حتى أسوأ    qty  )، أضف التفاصيل:    quantityInStock  ،    currentAccountBalance  إلخ. ؛
  • ·         وضّح كل شيء.
  • تجنب استخدام الاختصارات أو الكلمات المختصرة كلما أمكن ذلك ، حتى لو كانت النسخة الأقصر واضحة. على سبيل المثال ،    annualRevenue  سيكون أفضل من    annualRev  ؛
  • ·         اتبع اصطلاح تسمية ثابت.
  • اصطلاح التسمية الأكثر شيوعًا هو حالة الجمل . في هذه الاتفاقية ، تتكون الأسماء من عدة كلمات مع الأحرف الأولى بأحرف كبيرة. على سبيل المثال    numberOfCats  ،    finalAnswer  ،    howLongCanThisVariableNameGet  الخ

أنشئ متغيرًا بالتصريح عنه



لاستخدام متغير في التعليمات البرمجية الخاصة بك ، يجب عليك إنشاؤه. هذا يسمى التصريح عن متغير .

في جافا سكريبت ، يقتصر إعلان المتغير على الكلمة الرئيسية let ، متبوعة باسم المتغير المختار:


let numberOfCats = 2;

 

let numberOfDogs = 4;
 
هنا ، نعلن (إنشاء) ونبدأ (نعطي قيمة) متغيرين:    numberOfCats  و    numberOfDogs  .

تدرب على إنشاء المتغيرات


JavaScript
أقدم لك تمرينًا يتيح لك إنشاء متغيرين وتهيئتهما. نراكم في هذا التمرين CodePen  . ستقوم بإنشاء متغيرين ضروريين لتشغيل المكون الذي أنشأه زميلك. تقوم معًا بإنشاء صفحة قائمة العروض التلفزيونية ، ويحتاج كل عرض إلى متغير لعدد المواسم ، بالإضافة إلى عدد الحلقات لكل موسم.

يطلب منك زميلك تسمية هذه المتغيرات    numberOfSeasons  وأن    numberOfEpisodes  تكون متوافقة مع كودها. اتبع الخطوات التالية:

  1. قم بإنشاء متغير يسمى    numberOfSeasons  وتعيين القيمة 6 بين الأسطر التي تم إنشاؤها لك في محرر JavaScript (علامة التبويب المسماة "JS" ) . تذكر استخدام الكلمة الرئيسية let ، ولا تنس الفاصلة المنقوطة في نهاية السطر!
  2. ثم قم بإنشاء متغير يسمى   numberOfEpisodes  وتعيين القيمة 12.
لقد استخدمت محرر الكود الخاص بي ، والذي يحتوي على واجهة مختلفة قليلاً عن واجهتك. لكن النهج والحل يظلان كما هما! أستخدم أيضًا سطورًا إضافية من التعليمات البرمجية ("تصدير" ، على سبيل المثال) ولكن لا تقلق ، فكل ما تحتاج إلى تغييره هو بين "==="  .

الحل القترح

هل انتهيت ؟ هنا هنا CodePen جديد مع حل.

ملاحظة: في العديد من عروض JavaScript التوضيحية ، يمكنك عبور الكلمة الرئيسية    var  بدلاً من    let  . في حين أن هناك فرقًا دقيقًا بين الاثنين (والذي سنقوم بتفصيله في الفصل الخاص بالنطاق) ، في الوقت الحالي يمكنك فقط التفكير في الأمر على    var  أنه الإصدار القديم من    let  : هذه طريقة أخرى لإنشاء متغير.

تعديل قيمة المتغير



أسهل طريقة لتغيير قيمة المتغير هي ببساطة إعادة تعيينه:


let numberOfCats = 3;

 

numberOfCats = 4;
 
هنا نقوم بتعريف المتغير    numberOfCats  وتهيئته إلى القيمة 3. ثم نعيد تعيينه إلى القيمة 4 (بدون الكلمة الأساسية    let  ، لأن المتغير قد تم التصريح به سابقا).

ومع ذلك ، إذا كانت هذه هي الطريقة الوحيدة لتغيير قيمة المتغير ، فلن يكون هناك الكثير لتفعله به. الآن دعونا نلقي نظرة على بعض العوامل .

العمليات الحسابية - العمل مع الأرقام


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

جمع وطرح


لإضافة متغيرين ، استخدم العلامة    +  :


let totalCDs = 67;

 

let totalVinyls = 34;

 

let totalMusic = totalCDs + totalVinyls;
 
على العكس من ذلك ، يستخدم الطرح العلامة - :

let cookiesInJar = 10;

 

let cookiesRemoved = 2;

 

let cookiesLeftInJar = cookiesInJar - cookiesRemoved;
 
لإضافة أو طرح رقم من متغير ، يمكنك استخدام عوامل التشغيل += و -= :

let cookiesInJar = 10;

 

/* اكل اثنين من الكوكيز */

 

cookiesInJar -= 2;  //بقي لنا 8 كوكيز

 

/* خبز دفعة جديدة من الكوكيز*/

 

cookiesInJar += 12; // لدينا الان 20 كوكيز في الصندوق
 
أخيرًا ، يمكنك استخدام ++ أو -- إضافة أو طرح 1 (زيادة أو إنقاص):

let numberOfLikes = 10;

 

numberOfLikes++;  // هذا يساوي 11

 

numberOfLikes--; // و نعود الى 10
 

الضرب والقسمة


تستخدم عمليات الضرب والقسمة عوامل التشغيل    *  و    /  :


let costPerProduct = 20;

 

let numberOfProducts = 5;

 

let totalCost = costPerProduct * numberOfProducts;

 

let averageCostPerProduct = totalCost / numberOfProducts;
 
كما هو الحال مع الجمع والطرح، وهناك أيضا شركات *= و /= لضرب أو قسمة رقم:

let numberOfCats = 2;

 

numberOfCats *= 6;  // numberOfCats vaut maintenant 2*6 = 12;

 

numberOfCats /= 3;  // numberOfCats vaut maintenant 12/3 = 4;
 

تدرب على استخدام المشغلين


JavaScript
للتدرب على إنشاء الثوابت ، انتقل إلى تمرين CodePen هذا .

الآن دعنا نضيف عنصرًا جديدًا إلى المكون لدينا: إجمالي وقت المشاهدة لمسلسل ما (معلومات أساسية لمحبي مشاهدة المسلسلات!).

  1. في محرر جافا سكريبت، إنشاء اثنين من المتغيرات،   episodeTime   و   commercialTime  ( "الوقت حلقة" و "وقت إعلان")، مع القيم المناسبة (45 و 5، على سبيل المثال).
  2. باستخدام متغيري الوقت اللذين أنشأتهما للتو ، جنبًا إلى جنب مع عدد الحلقات وعدد المواسم (المتغيرات الموجودة مسبقًا) ، قم بإنشاء متغير مسمى   totalShowTime  يحتوي على إجمالي وقت المشاهدة لتلك السلسلة.
المتغيرات   numberOfSeasons  و   numberOfEpisodes  سبق أن أُعلن عنهما لك.

الحل المقترح



اعلم أن هناك العديد من الطرق الأخرى للتعامل مع المتغيرات ، وسترى المزيد في بقية هذه الدورة!

تغير المتغيرات

المتغير هو قاعدة قابلة للتغيير ، وهذا يعني أنه يمكن أن يتغير بمرور الوقت. يتم الإعلان عنه بالكلمة الأساسية   let  متبوعة باسم متغير ويتم تعيين قيمة البداية له. بعد ذلك ، سنتمكن من تغيير قيمة هذا المتغير عدة مرات كما نريد.

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

مثال:


let compteur = 0;
compteur++;
compteur = 10;
 

اكتشف الثوابت



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

إنها ببساطة متغيرات لن تكون قابلة للتغيير . سنقدم قيمة ابتدائية ولن نتمكن من تغيير القيمة بعد ذلك. لذلك إذا كان هناك خطأ منطقي في التعليمات البرمجية الخاصة بك يغير قيمة المتغير (الثابت) والذي لا يجب أن يتغير ، فإن جافا سكريبت ستعيد خطأ.

مثلا :


const nombrePostParPage = 20;

nombrePostParPage = 30; // سيعود خطأ في وحدة التحكم لأننا لسنا قادرين على تغيير قيمته
 
لا تقلق ، ستجد هذا المصطلح في نهاية الدورة .

تدرب على الثوابت


JavaScript
حان الوقت الآن لتنفيذ ما تعلمته عن المشغلين! نراكم في هذا التمرين CodePen   .

هنا عنصر يفكك اليوم بالساعات والدقائق والثواني.

كل ما عليك فعله هو إنشاء الثوابت الثلاثة التي تحدد عدد الساعات في اليوم وعدد الدقائق في الساعة وعدد الثواني في الدقيقة.

تلاعب بهذه القيم قليلاً ، وسترى بسرعة أهمية وجود القيم الثابتة الصحيحة في التطبيق!

في المساحة المخصصة ، قم بإنشاء الثوابت الثلاثة التالية:

  • hoursPerDay : عدد ساعات اليوم
  • minutesPerHour : عدد الدقائق في الساعة
  • secondsPerMinute : عدد الثواني في الدقيقة
قم بتهيئتها بالقيم الصحيحة.

الحل المقترح


هنا CodePen جديد مع حل للتمرين.

باختصار



في هذا الفصل ، تعلمت أساسيات المتغيرات في JavaScript . أنت تعرف الآن:

  • قم بتعريف المتغيرات باستخدام الكلمة الرئيسية let واسم في "camel case" ، وقم بتهيئتها باستخدام عامل التشغيل = ؛
  • تعديل محتوى المتغير عن طريق إعادة تعيينه ، أو باستخدام عوامل التشغيل ؛
  • استخدام الثوابت لتجنب استبدال عناصر البيانات الأساسية.
في الفصل التالي ، سنرى سمة مهمة للمتغيرات: نوعها .

في الفصل التالي ، ستتعلم كيفية حفظ بياناتك بأنواع البيانات.