المتغيرات في جافاسكريبت JavaScript Variables

JavaScript Variables

في عالم برمجة الويب، تلعب المتغيرات دورًا حاسمًا في تخزين وتحديث البيانات.

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

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

مفهوم المتغيرات ودورها في برمجة الويب.
أنواع المتغيرات في جافا سكريبت:

التعرف على var و let و const، وفهم الفروق بينهم.
تهيئة المتغيرات:

كيفية إعطاء المتغيرات قيمة أولية.
نطاق المتغيرات (Scope):

فهم نطاق المتغيرات وكيف يؤثر على توفرها.
إعادة تعريف المتغيرات:

القدرة على إعادة تعريف المتغيرات والتحكم في قيمها.
المتغيرات الثابتة (const):

كيفية استخدام const لتعريف متغير لا يمكن إعادة تعريفه.
أفضل الممارسات:

في لغة البرمجة JavaScript، تعتبر المتغيرات (Variables) من أهم المفاهيم.

المتغير :هو مكان في الذاكرة يُخصص لتخزين قيمة.

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

لتعريف متغير في JavaScript، يمكنك استخدام الكلمة الرئيسية “var”، “let”، أو “const“. في النسخ الحديثة من JavaScript، يُفضل استخدام “let” و “const” بدلاً من “var” لأسباب تتعلق بنطاق النطاق والإسقاط.

إليك مثال على كيفية تعريف متغير باستخدام “let”:

;let myVariable

في هذا المثال، تم تعريف متغير باسم “myVariable”.

يمكنك الآن تخزين قيمة في هذا المتغير. على سبيل المثال:

;myVariable = 10

يمكنك أيضًا تعيين قيمة أثناء تعريف المتغير، كما يلي:

;let myVariable = 10

في هذه الحالة، يتم تعريف المتغير “myVariable” وتعيين قيمة 10 له في نفس السطر.

من المهم أن تكون الأسماء التي تختارها للمتغيرات واضحة ووصفية.

يمكنك استخدام المتغيرات لتخزين أنواع مختلفة من البيانات، مثل الأرقام، والسلاسل النصية، والكائنات، وغيرها.

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

;let age = 25
;” Name = “Omar
;let isStudent = true

في النهاية، يُفضل استخدام “const” عندما تكون قيمة المتغير ثابتة ولا تتغير، بينما يمكن استخدام “let” عندما يمكن أن تتغير القيمة فيما بعد.

قواعد تسمية المتغيرات في جافاسكريبت

توجد قواعد تسمية للمتغيرات في لغة البرمجة JavaScript. إليك بعض القواعد الهامة:

يجب أن تبدأ الاسماء بحرف (أو شرطة تحتية _ أو دولار $):

صحيح: myVariable, _count, $total
خاطئ: 2variable, #price

يمكن أن تحتوي الأسماء على أحرف (حروف كبيرة وصغيرة)، أرقام، ورموز خاصة مثل _ و $:

صحيح: myVar123, total_amount, _name
خاطئ: -name, total@amount

تعتبر حالة الأحرف (حروف كبيرة أو صغيرة) مهمة:

myVariable و myvariable هما متغيران مختلفان.

تجنب استخدام كلمات محجوزة (Reserved Keywords):

لا يمكن استخدام كلمات محجوزة كأسماء للمتغيرات. على سبيل المثال، لا يمكنك استخدام if أو function كاسماء للمتغيرات.

استخدم أسماء واضحة وصريحة:

اختر أسماء تعبر بشكل واضح عن المحتوى أو الغرض من المتغير.

تجنب الأسماء القصيرة وغير الواضحة:

تفضل باستخدام أسماء طويلة بما يكفي لتكون واضحة وموضحة.

استخدم الأسلوب القياسي (Camel Case):

في JavaScript، الأسلوب الشائع لتسمية المتغيرات هو السماح ببداية الكلمة الثانية بحرف كبير. مثال: myVariableName.

تفادي استخدام الأسماء العامة:

تجنب استخدام أسماء مثل data, value, temp, وغيرها التي قد تكون مستخدمة بشكل شائع في البرمجة.
من خلال اتباع هذه القواعد، يمكنك كتابة أكواد JavaScript أكثر قراءة وفهما وصيانة.

أمثلة:

إليك بعض الأمثلة على تسميات المتغيرات وكيفية تكوينها بمراعاة القواعد:

استخدام Camel Case:

;”let Name = “Omar
;let Age = 25
;let totalAmount = 100.5

تفادي الكلمات المحجوزة:

// خاطئ
;let if = true
;let function = () => { /* some code */ }

// صحيح
;let isAvailable = true
;let calculateTotal = () => { /* some code */ }

تجنب الأسماء القصيرة وغير الواضحة:

// خاطئ
;let x = 10
;”let data = “Some information

// صحيح
;let itemCount = 10
;”let Info = “Some information about the

استخدام أحرف مختلفة:

;”let _name = “Alice
;let totalAmount$ = 150.75

استخدام الأسلوب المفضل (Camel Case):

;”let myVariableName = “This is a variable
;let numberOfItemsInCart = 5

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

كيف يمكن الاعلان عن متغير في جافاسكريبت؟

How you can declare a variable in JavaScript

في JavaScript، يمكنك إعلان (تعريف) متغير باستخدام الكلمات الرئيسية المخصصة مثل var، let، أو const. إليك كيفية إعلان متغير في JavaScript:

استخدام var:

var كانت تُستخدم بشكل شائع في السابق، ولكن تم تقديم let و const في إصدارات JavaScript الأحدث لتحسين نطاق المتغيرات والإسقاط. ومع ذلك، يمكنك استخدام var في بعض الأمثلة.

var myVariable = “Hello, World!”;

استخدام let:

let تُستخدم لتعريف متغير قابل للتغيير (mutable)، ويمكن تحديث قيمته في وقت لاحق.
javascript

let myNumber = 42;

استخدام const:

const تُستخدم لتعريف متغير بقيمة ثابتة، لا يمكن تغيير قيمته بعد التعريف.

const piValue = 3.14;

في الأمثلة أعلاه، تم إعلان المتغيرات myVariable، myNumber، و piValue وتم تعيين قيم لها.

يمكنك استخدام هذه المتغيرات لتخزين والعمل مع البيانات في برنامج JavaScript الخاص بك.

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

مثال شامل في صفحة اتش تي ام ال

 إليك مثالًا شاملاً لصفحة HTML تستخدم JavaScript لتعريف متغير وعرض قيمته في صفحة الويب:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Variable Example</title>
</head>
<body>

<h1>مثال على استخدام المتغيرات في JavaScript</h1>

<script>
// تعريف متغير باستخدام let
let myVariable = "Hello, World!";

// عرض قيمة المتغير في صفحة HTML
document.write("<p>قيمة المتغير: " + myVariable + "</p>");
</script>

</body>
</html>

في هذا المثال، تم إنشاء صفحة HTML بسيطة تحتوي على عنوان (<h1>) وتضم كود JavaScript داخل عنصر <script>.

تم تعريف متغير باستخدام let بإسم myVariable وتم تعيين قيمة “Hello, World!” له.
تم استخدام document.write لعرض نص يحتوي على قيمة المتغير داخل عنصر <p> في صفحة HTML.
عند فتح هذه الصفحة في متصفح الويب، سترى عنوانًا (مثال على استخدام المتغيرات في JavaScript) وفقرة (قيمة المتغير: Hello, World!).

ما هو  الفرق بين:  var, let, and const keywords.

في JavaScript، هناك ثلاث كلمات رئيسية لتعريف المتغيرات هي var، let، و const.

الفرق الرئيسي بينهم يتعلق بنطاق النطاق (Scope) وإمكانية إعادة تعريف المتغير (Reassignment).

إليك شرح موجز وأمثلة لتوضيح الفروق:

1. var:

نطاق النطاق (Scope): يكون محددًا داخل الدالة التي يتم تعريفه فيها.
إعادة التعريف (Reassignment): يُسمح بإعادة تعريف المتغير في نفس النطاق.

function exampleVar() {
if (true) {
var x = 10;
console.log(x); // 10
}
console.log(x); // 10 (قابل للوصول خارج الكتلة)
}

exampleVar();

2. let:

نطاق النطاق (Scope): يكون محددًا داخل الكتلة (Block Scope) التي يتم تعريفه فيها.
إعادة التعريف (Reassignment): يُسمح بإعادة تعريف المتغير في نفس النطاق.

tfunction exampleLet() {

if (true) {
let y = 20;
console.log(y); // 20
}
// console.log(y); // يُسبب خطأ، y غير معرف هنا
}

exampleLet();

3. const:

نطاق النطاق (Scope): يكون محددًا داخل الكتلة (Block Scope) التي يتم تعريفه فيها.
إعادة التعريف (Reassignment): لا يُسمح بإعادة تعريف المتغير بعد تعريفه.

function exampleConst() {
if (true) {
const z = 30;
console.log(z); // 30
// z = 31; // يُسبب خطأ، لا يمكن إعادة تعريف const
}
// console.log(z); // يُسبب خطأ، z غير معرف هنا
}

exampleConst();

باستخدام let و const، يمكنك الحفاظ على تنظيم أفضل للشيفرة المصدرية وتجنب بعض المشاكل المحتملة مع نطاق النطاق وإعادة التعريف.

مثال شامل في صفحة اتش تي ام ال

 إليك مثال شامل لصفحة HTML تستخدم JavaScript بالاعتماد على var، let، و const:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال شامل باستخدام متغيرات JavaScript</title>
</head>
<body>

<h1>مثال شامل باستخدام متغيرات JavaScript</h1>

<script>
// تعريف متغير باستخدام var
var globalVariable = "أنا متغير عام";

// تعريف متغير باستخدام let
let localVariable = "أنا متغير محلي";

// تعريف متغير باستخدام const
const piValue = 3.14;

document.write("<p>المتغير العام: " + globalVariable + "</p>");
document.write("<p>المتغير المحلي: " + localVariable + "</p>");
document.write("<p>قيمة ثابتة: " + piValue + "</p>");

// تغيير قيمة المتغير المحلي
localVariable = "تم تغيير القيمة";
document.write("<p>المتغير المحلي بعد التغيير: " + localVariable + "</p>");

// إعادة تعريف المتغير العام
var globalVariable = "تم إعادة تعريف القيمة";
document.write("<p>المتغير العام بعد إعادة التعريف: " + globalVariable + "</p>");
</script>

</body>
</html>

في هذا المثال:

تم تعريف متغير عام باستخدام var ومتغير محلي باستخدام let، وثابت باستخدام const.
تم عرض قيم هذه المتغيرات في صفحة HTML باستخدام document.write.
تم تغيير قيمة المتغير المحلي (localVariable) وعرض القيمة المحدثة.
تم إعادة تعريف المتغير العام (globalVariable) وعرض القيمة المحدثة.
يرجى ملاحظة أنه عند استخدام var، يمكن إعادة تعريف المتغير في نفس النطاق، وهذا ما يحدث في هذا المثال.

تعيين قيمة المتغير اثناء تعريفه :

JavaScript variable initialization

في JavaScript، تهيئة المتغير (Initialization) تعني تعيين قيمة للمتغير عند تعريفه.

يمكنك تعيين قيمة للمتغير في نفس اللحظة التي تقوم فيها بتعريفه، وهذا يسمى بعملية التهيئة.

إليك بعض الأمثلة على تهيئة المتغيرات في JavaScript:

مثال باستخدام var:

var age; // تعريف المتغير
age = 25; // تهيئة المتغير بقيمة 25

يمكنك أيضاً تعريف المتغير وتهيئته في نفس السطر:

var age = 25; // تعريف وتهيئة المتغير في نفس السطر

مثال باستخدام let:

let Name; // تعريف المتغير
Name = "Omar"; // تهيئة المتغير بقيمة "Omar"
أو في نفس السطر:

let Name = "Omar"; // تعريف وتهيئة المتغير في نفس السطر

مثال باستخدام const:

const piValue = 3.14; // تعريف وتهيئة المتغير بقيمة ثابتة

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

مثال شامل في صفحة اتش تي ام ال مع الشرح

بالطبع، إليك مثال شامل على تعريف وتهيئة متغيرات في صفحة HTML باستخدام HTML وJavaScript مع استخدام var، let، و const:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال على تعريف وتهيئة المتغيرات في JavaScript</title>
</head>
<body>

<h1>تعريف وتهيئة المتغيرات في JavaScript</h1>

<script>
// تعريف وتهيئة متغير باستخدام var
var age = 25;

// تعريف وتهيئة متغير باستخدام let
let Name = "Omar";

// تعريف وتهيئة متغير باستخدام const
const piValue = 3.14;

// عرض قيم المتغيرات في صفحة HTML
document.write("<p>العمر: " + age + "</p>");
document.write("<p>اسم المستخدم: " + Name + "</p>");
document.write("<p>قيمة ثابتة لـ Pi: " + piValue + "</p>");

// تغيير قيمة المتغير الذي تم تعريفه باستخدام var
age = 30;
document.write("<p>العمر بعد التغيير: " + age + "</p>");

// محاولة تغيير قيمة المتغير الذي تم تعريفه باستخدام const (ستؤدي إلى خطأ)
// piValue = 3.1416; // يُسبب خطأ

// تعريف متغير محلي باستخدام let داخل كتلة
if (true) {
let localVariable = "متغير محلي في كتلة";
document.write("<p>" + localVariable + "</p>");
}
// console.log(localVariable); // سيؤدي إلى خطأ لأن localVariable ليس معرفًا خارج الكتلة
</script>

</body>
</html>

الشرح:
تم تعريف وتهيئة متغيرات باستخدام var، let، و const.
قيم المتغيرات عرضت في صفحة HTML باستخدام document.write.
تم تغيير قيمة المتغير الذي تم تعريفه باستخدام var.
تم محاولة تغيير قيمة المتغير الذي تم تعريفه باستخدام const، والتي أدت إلى خطأ لأن const لا يسمح بتغيير القيمة بعد التهيئة.
تم تعريف متغير محلي باستخدام let داخل كتلة، وتم عرض قيمته داخل هذه الكتلة.

تخصيص قيم للمتغير في جافاسكريبت

:JavaScript variable assignment

في JavaScript، عملية تعيين المتغير (Variable Assignment) تشير إلى إعطاء قيمة لمتغير.

يمكن تعيين قيمة للمتغير عند تعريفه أو في وقت لاحق في الشيفرة المصدرية.

لنقم بشرح هذه العملية بالتفصيل:

تعيين قيمة أثناء تعريف المتغير:

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

باستخدام var:

var age = 25;

باستخدام let:

let Name = "Omar";

باستخدام const:

const piValue = 3.14;

تعيين قيمة في وقت لاحق:
يمكنك أيضًا تعيين قيمة للمتغير في وقت لاحق في الشيفرة المصدرية.

var count;
count = 10; // تعيين قيمة في وقت لاحق

تغيير قيمة المتغير:

يمكنك تغيير قيمة المتغير في وقت لاحق باستخدام العمليات السابقة مع الكلمات الرئيسية المخصصة var، let، أو const.

let quantity = 5;
quantity = quantity + 1; // تغيير قيمة المتغير

• الشرح:
  تعريف المتغير وتعيين القيمة: يتم تعريف المتغير باستخدام var، let، أو const.
  يتم تعيين القيمة للمتغير أثناء التعريف.
  تعيين قيمة في وقت لاحق: يمكن تعيين قيمة للمتغير في وقت لاحق باستخدام عملية التعيين.
  تغيير قيمة المتغير:يمكن تغيير قيمة المتغير في وقت لاحق باستخدام عمليات الرياضيات أو أي عملية أخرى.

مثال شامل في صفحة اتش تي ام ال مع الشرح

هنا مثال على تعريف وتعيين قيم لمتغيرات في صفحة HTML باستخدام JavaScript ومفاهيم var، let، و const. سنقوم بتوضيح الخطوات والتعليقات للتوضيح:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال على تعريف وتعيين قيم لمتغيرات في JavaScript</title>
</head>
<body>

<h1>تعريف وتعيين قيم لمتغيرات في JavaScript</h1>

<script>
// تعريف متغير باستخدام var وتعيين قيمة
var age = 25;

// تعريف متغير باستخدام let وتعيين قيمة
let Name = "Omar";

// تعريف متغير باستخدام const وتعيين قيمة
const piValue = 3.14;

// عرض قيم المتغيرات في صفحة HTML
document.write("<p>العمر: " + age + "</p>");
document.write("<p>اسم المستخدم: " + Name + "</p>");
document.write("<p>قيمة ثابتة لـ Pi: " + piValue + "</p>");

// تغيير قيمة المتغير الذي تم تعريفه باستخدام var
age = 30;
document.write("<p>العمر بعد التغيير: " + age + "</p>");

// محاولة تغيير قيمة المتغير الذي تم تعريفه باستخدام const (ستؤدي إلى خطأ)
// piValue = 3.1416; // يُسبب خطأ

// تعريف متغير محلي باستخدام let داخل كتلة
if (true) {
let localVariable = "متغير محلي في كتلة";
document.write("<p>" + localVariable + "</p>");
}
// console.log(localVariable); // سيؤدي إلى خطأ لأن localVariable ليس معرفًا خارج الكتلة
</script>

</body>
</html>

الشرح:
تعريف المتغيرات وتعيين القيم:تم تعريف متغيرات باستخدام var، let، و const.
تم تعيين القيم لهذه المتغيرات.
عرض قيم المتغيرات:تم استخدام document.write لعرض قيم المتغيرات في صفحة HTML.
تغيير قيمة المتغير:تم تغيير قيمة المتغير الذي تم تعريفه باستخدام var.
محاولة تغيير قيمة متغير ثابت:تم محاولة تغيير قيمة المتغير الذي تم تعريفه باستخدام const، والتي أدت إلى خطأ لأن const لا يسمح بتغيير القيمة بعد التعيين.
تعريف متغير محلي:تم تعريف متغير محلي باستخدام let داخل كتلة، وتم عرض قيمته داخل هذه الكتلة.

 اختبار اختيار من معتدد عن هذا الدرس

 إليك اختبار بسيط حول موضوع المتغيرات في JavaScript. قم بالإجابة على الأسئلة واستعراض الإجابات في نهاية الاختبار.

1-ما هي الكلمة الرئيسية التي تُستخدم لتعريف المتغير في JavaScript؟

a) variable
b) var
c) let
d) const

2-ما هو النطاق الذي يمكن الوصول إليه لمتغير يتم تعريفه باستخدام let؟

a) نطاق الكتلة (Block Scope)
b) نطاق الدالة (Function Scope)
c) النطاق العام (Global Scope)

3-ما الكلمة التي تُستخدم لتعريف متغير ثابت في JavaScript؟

a) constant
b) var
c) let
d) const

4-هل يمكن إعادة تعريف متغير يتم تعريفه باستخدام const؟

a) نعم
b) لا

5-كيف يمكن تهيئة متغير في JavaScript؟

a) باستخدام initialize
b) باستخدام assign
c) باستخدام var, let, أو const مع إعطاء القيمة عند التعريف
d) باستخدام set

الإجابات:
1-b) var
2-a) نطاق الكتلة (Block Scope)
3-d) const
4-b) لا
5-c) باستخدام var, let, أو const مع إعطاء القيمة عند التعريف

1-كيف يمكنك إعادة تعريف متغير يتم تعريفه باستخدام let؟

a) باستخدام reassign
b) باستخدام let مرة أخرى
c) ببساطة باستخدام اسم المتغير وإعطاءه قيمة جديدة

2-في أي حالة يفضل استخدام const بدلاً من let؟

a) عندما تحتاج إلى تعديل قيمة المتغير
b) عندما تكون قيمة المتغير ثابتة ولا تتغير
c) في جميع الحالات

3-ما هو الفرق بين let و var فيما يتعلق بالنطاق (Scope)؟

a) let لديه نطاق الكتلة (Block Scope) و var لديه نطاق الدالة (Function Scope)
b) let لديه نطاق الدالة و var لديه نطاق الكتلة
c) لا يوجد فرق بينهما من حيث النطاق

4-هل يمكن تعريف متغير باستخدام const دون إعطائه قيمة فوريًا؟

a) نعم
b) لا

5-كيف يمكنك إزالة قيمة متغير في JavaScript؟

a) remove
b) delete
c) undefine
الإجابات:
1-c) ببساطة باستخدام اسم المتغير وإعطاءه قيمة جديدة
2-b) عندما تكون قيمة المتغير ثابتة ولا تتغير
3-a) let لديه نطاق الكتلة (Block Scope) و var لديه نطاق الدالة (Function Scope)
4-b) لا
5-c) undefine (لكن الطريقة الصحيحة هي undefined)