١٠ يونيو ٢٠٢٠

المتغيرات

:معظم الوقت, تطبيق الجافاسكربت يحتاج للعمل مع معلومات. يوجد هنا مثالان

  1. متجر علي الانترنت – المعلومات قد تتضمن السلع التي يتم بيعها و عربة التسوق
  2. تطبيق دردشه – المعلومات قد تتضمن المستخدمين والرسائل والمزيد

المتغيرات تُستخدم لتخزين المعلومات.

المتغير

المتغير “يُسمي مخزن” للبيانات. نحن نستطيع استخدام المتغيرات لتخزين السلع والزائرين والبيانات الاخري

لأنشاء متغير في الجافاسكربت, نستخدم الكلمه let

الجمله بالاسفل تُنشئ (بعباره اخري: تعلن) متغير يأخذ اسم “message”

let message;

الان, نستطيع وضع بعض البيانات في هذا المتغير بأستخدام الرمز =:

let message;

message = 'Hello'; // تخزين النص

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

let message;
message = 'Hello!';

alert(message); // يعرض محتوي المتغير

ولكي نختصر عدد السطور, نستطيع دمج تعريف المتغير وتخزين القيمه به في سطر واحد:

let message = 'Hello!'; // تعريف المتغير و تخزين القيمه به

alert(message); // Hello!

نستطيع ايضا الاعلان عن اكثر من متغير في سطر واحد:

let user = 'John', age = 25, message = 'Hello';

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

أستخدام المتغير لكل سطر يكون أطول قليلا, ولكن أسهل للقراءة:

let user = 'John';
let age = 25;
let message = 'Hello';

بعض الناس ايضا يُعرفون المتغيرات بهذه الطريقه:

let user = 'John',
  age = 25,
  message = 'Hello';

…او حتي يكتب الفاصله في اول السطر

let user = 'John'
  , age = 25
  , message = 'Hello';

تقنيا, كل هذه الطرق تؤدي لنفس الشئ. لذلك, انها مسألة ذوق وجمال شخصي.

var بدلا من let

في الاصدارات الاقدم, قد تجد ايضا كلمة اخري: var بدلا من let:

var message = 'Hello';

الكلمة var تكون غالبا نفس الكلمه let. وهي ايضا تعلن عن متغير, ولكن في مظهر مختلف, طريقة “مدرسه قديمه”.

هناك اختلافات دقيقه بين let و var , ولكن لا تُهمنا بعد. نحن سوف نغطي هذه الاختلافات بتفصيل في الفصل إفادة «var» القديمة.

التجانس الحقيقي

نحن نستطيع بسهوله أستيعاب مفهوم المتغير لو تخيلنا انه عباره عن صندوق لتخزين البيانات, ملصوق عليه اسم مخصص له فقط ويحتوي بداخله علي قيمه اهلا بداخله.

نستطيع أن نضع أي قيمة بداخل الصندوق.

ونستطيع أيضا تغيير قيمته أكثر من مره كما نريد.

let message;

message = 'Hello!';

message = 'World!'; // القيمة أتغيرت

alert(message);

عندما تتغير القيمة, البيانات القديمه تُحذف من المتغير:

ونستطيع أيضا تعريف متغيرين و ننسخ القيمه من أحداهما ونضعها في الأخر.

let hello = 'Hello world!';

let message;

// نسخ القيمة "hello world" من المتغير "hello" الي المتغير "message"
message = hello;

// الان المتغييرين يوجد بداخلهم نفس البيانات
alert(hello); // Hello world!
alert(message); // Hello world!
Declaring twice triggers an error

A variable should be declared only once.

A repeated declaration of the same variable is an error:

let message = "This";

// repeated 'let' leads to an error
let message = "That"; // SyntaxError: 'message' has already been declared

So, we should declare a variable once and then refer to it without let.

Functional languages

من المثير للاهتمام ملاحظة وجود وظيفي لغات برمجه, مثل Scala او Erlang تمنع تغيير قيم المتغير.

في هذه اللغات, القيمه الاولي تُخزن في الصندوق, وتكون للابد. و اذا أردنا تخزين قيمه غيرها, اللغه تُنشئ لنا صندوق جديد (تعريف متغير جديد). ولا نستطيع أعاده استخدام المتغير القديم.

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

تسمية المتغير

هناك طريقتان فقط لتسمية المتغير في الجافاسكربت

  1. يجب أن يحتوي الاسم على أحرف أو أرقام أو الرموز $ و_ فقط.
  2. الحرف الاول من الاسم يجب ألا يكون رقم.

أمثله علي الاسماء الصحيحة :

let userName;
let test123;

عندما يحتوي الاسم علي أكثر من كلمة, camelCase تكون الطريقة الشائعه للاستخدام. ويكون كذلك: الكلمات تُرتب واحده تلو الاخري, كل كلمه ما عدا الكلمه الاولي تبدأ بحرف كبير:myVeryLongName.

ما المثير للأهتمام – علامة الدولار '$' والتسطير '_' نستطيع أيضا استخدامهم في الاسماء. أنها رموز عاديه, فقط مثل الحروف,وبدون أي معني أخر.

هذه الاسماء تكون صحيحة الكتابة:

let $ = 1; // تعريف متغير يُسمي "$"
let _ = 2; // وتعريف متغير يُسمي "_"

alert($ + _); // 3

أمثلة لأسماء المتغير الخاطئة:

let 1a; // لا نستطيع نبدأ الاسم برقم

let my-name; // الواصلات '-' غير مسموح بها في التسمية
الملاحظه المهمه

المتغيرات التي تُسمي apple و AppLE يكونوا متغيريين مختلفين تماما

يُسمح باستخدام الأحرف غير اللاتينية ، ولكن لا يُنصح بها

من الممكن أستخدام أي لغة, بما في ذلك الحروف السيريلية أو حتى الحروف الهيروغليفية, مثل هذه :

let имя = '...';
let 我 = '...';

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

الأسماء المحجوزه

هناك قائمة من الكلمات المحجوزه, التي لانستطيع أستخدامها كأسماء متغيرات لأنها تُستخدم بواسطة اللغه نفسها.

علي سبيل المثال: let, class, return, و function تكون كلمات محجوزة

الكود بالأسفل يعطي خطأ كتابي:

let let = 5; // لا تستطيع تسمية المتغير  "let", خطأ!
let return = 5; // وأيضا لا تستطيع تسميته "return", خطأ!
تخزين القيم بدون use strict

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

// note: no "use strict" in this example

num = 5; // المتغير "num" أنشئ ولم يكن موجود

alert(num); // 5

هذا تمرين سئ و يسبب خطأ في هذ الوضع:

"use strict";

num = 5; // خطأ: num غير متعرف

الثوابت

لتعريف ثابت (غير متغير), نستخدم const بدلاً من let:

const myBirthday = '18.04.1982';

المتغيرات التي تُعرف بأستخدام const تُسمي “ثوابت”. لا نستطيع أن نغير قيمتها. أذا فعلنا ذلك يحدث خطأ

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // خطأ, لاتستطيع تغيير قيمة الثابت

عندما المبرمج يكون متأكد أن المتغير لن يتغير أبداً, فيجب عليه تعريف المتغير بأستخدام const لضمان هذه الحقيقة وإبلاغها بوضوح للجميع.

ثوابت ذات الحروف الكبيره

هناك ممارسة شائعة لاستخدام الثوابت كأسماء مستعارة للقيم التي يصعب تذكرها والمعروفة قبل التنفيذ.

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

علي سبيل المثال, هيا ننشئ ثوابت للألوان في مسميتها “الويب” (السداسي عشري):

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...عندما نحتاج الي أختيار اللون
let color = COLOR_ORANGE;
alert(color); // #FF7F00

الفوائد:

  • COLOR_ORANGE يكون أسهل بكثير لتزكره عن "#FF7F00".
  • سهل أن تؤدي للخطأ "#FF7F00" اكثر من COLOR_ORANGE.
  • عند قرأءة الكود, COLOR_ORANGE يكون له أكثر معني من #FF7F00.

متي يجب أن نستخدم الحروف الكبيره في تسمية الثوابت ومتي نستخدم الحروف العاديه؟ هيا بنا نوضح ذلك.

الثابت يعني أن قيمة المتغير لن تتغير أبداً. ولكن هناك ثوابت معرفة قبل التنفيذ (مثل الرقم السداسي العشري للون الاحمر) وهناك ثوابت محسوبة في حالة التشغيل, أثناء التنفيذ, ولكن لا تتغير قيمتها الاولية.

علي سبيل المثال:

const pageLoadTime = /* الوقت اللازم لتحضير صفحة الويب */;

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

بمعنى آخر ، تُستخدم الثوابت التي تحمل أسماء كبيرة فقط كأسماء مستعارة لقيم “الثابت الترميز”.

تسمية الاشياء بشكل صحيح

الحديث حول المتغيرات, هناك شئ أخر مهم للغاية.

يجب أن يكون لاسم متغير معنى واضح وواضح يصف البيانات التي يخزنها.

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

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

من فضلك خذ وقتك في اختيار اسم صحيح للمتغير قبل تعريفه. القيام بذلك سوف يسدد لك بسخاء

بعض القواعد الجيدة لأتباعها وهي :

  • أستخدم أسماء متعارف الانسان عليها مثل userName او shoppingCart.
  • الابتعاد عن الاختصارات أو الأسماء القصيرة مثل a, b, c, ألا اذا كنت تعلم ماذا تفعل.
  • اجعل الأسماء وصفية وموجزة إلى أقصى حد. أمثلة لأسماء سيئة data و value. الاسماء هذه لا تعبر عن شئ. من المقبول استخدامها فقط إذا كان سياق الكود يجعل من الواضح بشكل استثنائي البيانات أو القيمة التي يشير إليها المتغير.
  • وافق على الشروط داخل فريقك وفي ذهنك. إذا كان زائر الموقع يسمى “مستخدم” ، فيجب علينا تسمية المتغيرات ذات الصلة currentUser او newUser بدلا من currentVisitor او newManInTown

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

أعادة أستخدام او أنشاء

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

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

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

المتغير الإضافي جيد ، وليس شرًا.

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

الملخص

نحن نستطيع تعريف المتغيرات لتخزين البيانات بأستخدام الكلمات var, let, او const

  • let – كتابة حديثة للأعلان عن متغير
  • var – طريقة قديمه للأعلان عن متغير. فطبيعياً نحن لا نستخدمها كثيراً, وبكن تم الشرح بوضوح let في الفصل إفادة «var» القديمة, فقط في الحالة التي تحتاجها.
  • const – يكون مثل let, ولكن قيمة المتغير لا نستطيع تغييرها.

يجب علينا تسمية المتغيرات بطريقة تسمح لنا التعرف علي ما بداخلها بسهولة.

مهمه

  1. قم بتعريف متغيريين: admin و name.
  2. ضع القيمة "John" الى name.
  3. أنسخ القيمة من name الي admin.
  4. أعرض قيمة admin بأستخدام alert (يجب أن تكون “John”).

في الكود أدناه ، يتوافق كل سطر مع العنصر في قائمة المهام.

let admin, name; // نستطيع تعريف متغيريين في خطوة واحده

name = "John";

admin = name;

alert( admin ); // "John"
  1. إنشاء متغير باسم كوكبنا. كيف تسمي مثل هذا المتغير؟
  2. أنشئ متغيرًا لتخزين اسم الزائر الحالي لموقع الويب. كيف يمكنك تسمية هذا المتغير؟

المتغير لكوكبنا

ذلك بسيط:

let ourPlanetName = "Earth";

ملاحظة, نحن نستطيع كتابة أسم قصير مثل planet, ولكن قد لا يكون واضحًا ما يشير إليه الكوكب. من الجيد أن تكون أكثر تطولًا. علي الاقل يكون اسم المتغير ليس طويل للغاية.

أسم الزائر الحالي

let currentUserName = "John";

للمرة الثانية, نحن نستطيع كتابة userName أذا كنا نعلم من يكون المستخدم الحالي.

المحررات الحديثة والاكمال الذاتي تنشئ اسماء متغيرات طويلة وسهلة للكتابة. لا تحفظها. الاسم الذي يتكون من ثلاث كلمات يكون جيد.

وأذا كان المحرر الخاص بك لا يحتوي علي خاصية الاكمال الذاتي, يمكنك الحصول عليه واحدة جديده.

أفحص الكود التالي:

const birthday = '18.04.1982';

const age = someCode(birthday);

هنا نحن نمتلك ثابت يحزن قيمة التاريخ birthday و ثابت أخر يسمي age يحسب قيمة العمر من الثابت birthday مع مساعدة الداله بعض الكود (لم يتم توفيرها لتصغيرها ، ولأن التفاصيل لا تهم هنا)

هل من الصحيح أستخدام الحروف الكبيره للثابت birthday ؟ او للثابت age؟ او حتي لكليهما؟

const BIRTHDAY = '18.04.1982'; // هل نجعل الاسم ذات حروف كبيره؟

const AGE = someCode(BIRTHDAY); // هل نجعل الاسم ذات حروف كبيره؟

نستخدم بشكل عام الأحرف الكبيرة للثوابت “ذات الترميز الصلب”. أو بمعنى آخر ، عندما تكون القيمة معروفة قبل التنفيذ ومكتوبة مباشرة في الشفرة.

في هذا الكود, birthday هو بالضبط مثل ذلك. حتى نتمكن من استخدام الحروف الكبيرة لذلك.

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

خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)