الثوابت في جافاسكريبت JavaScript constant
JavaScript Const
JavaScript Const هو طريقة لتعريف المتغيرات في لغة البرمجة JavaScript والتي تستخدم لتعريف القيم الثابتة التي لا يمكن تغييرها بعد تعريفها مرة واحدة. على عكس متغيرات var و let التي يمكن تغيير قيمها، يتم تعريف الثوابت باستخدام الكلمة الرئيسية const.
عندما يتم تعريف متغير باستخدام const، فإن القيمة التي يتم تعيينها لهذا المتغير يجب أن تكون ثابتة ولا يمكن تغييرها لاحقًا في البرنامج.
مثال:
const PI = 3.14; console.log(PI); // سيطبع 3.14 PI = 3.14159; // TypeError: Assignment to constant variable.
في هذا المثال، تم تعريف الثابت PI بقيمة 3.14. وعند محاولة تغيير قيمة PI في وقت لاحق، سيتم إلقاء خطأ TypeError لأن الثوابت لا يمكن تغيير قيمها بمجرد تعريفها.
كيف ننشيء ثابت في جافاسكريبت ؟
؟How to create constant
لإنشاء ثابت في JavaScript، يمكنك استخدام الكلمة الرئيسية const متبوعة بإسم المتغير والقيمة التي تريد تعيينها.
هاكم كيفية إنشاء ثابت:
const MY_CONSTANT = 10;
في هذا المثال، تم إنشاء ثابت بإسم MY_CONSTANT وتعيين قيمة 10 له. بمجرد تعريف الثابت بهذه الطريقة، لا يمكن تغيير قيمته لاحقًا في البرنامج.
تطبيق شامل مع الشرح
تطبيق شامل يمكن أن يكون مثالًا بسيطًا على كيفية استخدام الثوابت في 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>Calculate Circle Area</title>
</head>
<body>
<h1>Calculate Circle Area</h1>
<label for="radius">Enter the radius of the circle:</label>
<input type="number" id="radius">
<button onclick="calculateArea()">Calculate</button>
<p id="result"></p>
<script>
// تعريف الثابت
const PI = 3.14159;
// دالة لحساب مساحة الدائرة
function calculateArea() {
// الحصول على قيمة نصف قطر الدائرة من مدخل المستخدم
const radius = parseFloat(document.getElementById('radius').value);
// حساب مساحة الدائرة باستخدام الثابت PI
const area = PI * radius * radius;
// عرض النتيجة للمستخدم
document.getElementById('result').innerText = `The area of the circle is: ${area}`;
}
</script>
</body>
</html>
هذا التطبيق يتيح للمستخدم إدخال قيمة نصف قطر الدائرة، وعند النقر على الزر “Calculate”، يتم استدعاء الدالة ()calculateArea لحساب مساحة الدائرة باستخدام الثابت PI. يتم عرض النتيجة للمستخدم.
في هذا المثال:
const PI = 3.14159; تعريف الثابت PI.
function calculateArea() دالة لحساب مساحة الدائرة باستخدام قيمة PI.
const radius = parseFloat(document.getElementById(‘radius’).value); الحصول على قيمة نصف قطر الدائرة من مدخل المستخدم.
const area = PI * radius * radius; حساب مساحة الدائرة باستخدام الثابت PI.
هذا مثال بسيط يوضح كيفية استخدام الثوابت في JavaScript لتعريف القيم التي لا تتغير، وكيفية استخدامها في تطبيق فعلي.
متى نستخد الثابت في لغة جافاسكريبت ؟
?When to use JavaScript const
استخدام الثوابت في JavaScript مهم لعدة أسباب، ويعتمد ذلك على طبيعة البيانات التي ترغب في تخزينها واستخدامها في برنامجك. إليك بعض الحالات التي يمكن فيها استخدام الثوابت:
قيم ثابتة:
عندما تكون قيمة متغيرة لا تتغير طوال تنفيذ البرنامج، مثل قيمة الثوابت الرياضية مثل PI.
const PI = 3.14159;
قيم معروفة مسبقًا:
في حال كانت لديك بعض القيم التي تعتقد أنها لن تتغير، فيمكنك استخدام الثوابت لجعل الكود أكثر وضوحًا.
const MAX_SIZE = 100;
تجنب الإعادة الغير مقصودة:
باستخدام الثوابت، يمكنك تجنب تغيير قيم المتغيرات عن طريق الخطأ، مما يسهل فحص وصيانة الكود.
const name = "example"; // لا يمكن تغيير قيمة name بشكل غير مقصود
إيجاد أخطاء البرمجة:
في الأحيان، يمكن أن يساعد استخدام الثوابت في إيجاد الأخطاء في البرنامج بسرعة، حيث أن محاولة تغيير قيمة الثابت ستؤدي إلى رسالة خطأ.
بشكل عام، يمكنك استخدام الثوابت في 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>Temperature Converter</title>
</head>
<body>
<h1>Temperature Converter</h1>
<label for="celsius">Enter temperature in Celsius:</label>
<input type="number" id="celsius">
<button onclick="convert()">Convert</button>
<p id="result"></p>
<script>
// تعريف الثابت لدرجة حرارة التحول
const CELSIUS_TO_FAHRENHEIT = 9 / 5;
// دالة لتحويل درجات الحرارة
function convert() {
// الحصول على قيمة درجة الحرارة من مدخل المستخدم
const celsius = parseFloat(document.getElementById('celsius').value);
// حساب الدرجة المحولة إلى فهرنهايت باستخدام الثابت
const fahrenheit = (celsius * CELSIUS_TO_FAHRENHEIT) + 32;
// عرض النتيجة للمستخدم
document.getElementById('result').innerText = `Temperature in Fahrenheit: ${fahrenheit}`;
}
</script>
</body>
</html>
في هذا التطبيق:
const CELSIUS_TO_FAHRENHEIT = 9 / 5; تعريف الثابت لتحديد القيمة الثابتة لتحويل درجات الحرارة من مقياس مئوي إلى فهرنهايت.
function convert() دالة لتحويل درجات الحرارة.
const celsius = parseFloat(document.getElementById(‘celsius’).value); الحصول على قيمة درجة الحرارة من مدخل المستخدم.
const fahrenheit = (celsius * CELSIUS_TO_FAHRENHEIT) + 32; حساب الدرجة المحولة إلى فهرنهايت باستخدام الثابت.
بهذا التطبيق، يمكن للمستخدم إدخال درجة حرارة في مقياس مئوي، وبالنقر على الزر “Convert”، ستتم محولة الدرجة إلى فهرنهايت وعرض النتيجة للمستخدم.
نطاق تعريف الثابت في جافاسكريب ؟
scopee of javascript constant
نطاق الثوابت في JavaScript يشير إلى الموقع في البرنامج الذي يمكن الوصول فيه إلى قيم الثوابت. في العموم، الثوابت محلية للكتلة التي تم تعريفها فيها، ولا يمكن الوصول إليها خارج هذه الكتلة.
هناك نوعان رئيسيان من النطاق للثوابت:
نطاق الكتلة أو البوك (Block Scope):
عندما يتم تعريف الثوابت داخل كتلة معينة مثل دالة أو كتلة if، فإن نطاق الثابت يكون محدودًا لهذه الكتلة.
على سبيل المثال:
function example() {
const x = 10;
console.log(x); // هنا يمكن الوصول إلى x
}
console.log(x); // سيؤدي إلى خطأ ReferenceError لأن x غير معرفة هنا خارج الدالة
نطاق الدالة (Function Scope):
في حالة استخدام الثوابت داخل دالة، يكون نطاق الثوابت محصورًا داخل هذه الدالة فقط.
على سبيل المثال:
function example() {
const x = 10;
console.log(x); // هنا يمكن الوصول إلى x
}
console.log(x); // سيؤدي إلى خطأ ReferenceError لأن x غير معرفة هنا خارج نطاق الدالة
بالإضافة إلى ذلك، يجب أن نلاحظ أن الثوابت التي تم تعريفها في النطاق العام (global scope)، أي خارج أي دالة أو كتلة، يمكن الوصول إليها من أي مكان في البرنامج. ولكن يجب أن نكون حذرين من استخدام الثوابت في النطاق العام لتجنب تلقيبها بالمتغيرات العملية.
تطبيق شامل مع الشرح
سنقوم بإنشاء تطبيق بسيط باستخدام HTML و JavaScript يستخدم الثوابت في حساب معدل الضريبة على المبيعات.
التطبيق سيسمح للمستخدم بإدخال قيمة المبيعات، ثم سيحسب المعدل الضريبي المطبق على هذه المبيعات ويعرض النتيجة.
الآن دعونا نقوم بكتابة التطبيق:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Tax Calculator</title>
</head>
<body>
<h1>Sales Tax Calculator</h1>
<label for="sales">Enter sales amount:</label>
<input type="number" id="sales">
<button onclick="calculateTax()">Calculate Tax</button>
<p id="result"></p>
<script>
// تعريف الثابت لمعدل الضريبة
const SALES_TAX_RATE = 0.08;
// دالة لحساب المعدل الضريبي
function calculateTax() {
// الحصول على قيمة المبيعات من مدخل المستخدم
const salesAmount = parseFloat(document.getElementById('sales').value);
// حساب المعدل الضريبي باستخدام الثابت
const taxAmount = salesAmount * SALES_TAX_RATE;
// عرض النتيجة للمستخدم
document.getElementById('result').innerText = `Sales Tax: $${taxAmount.toFixed(2)}`;
}
</script>
</body>
</html>
في هذا التطبيق:
const SALES_TAX_RATE = 0.08; تعريف الثابت لمعدل الضريبة.
function calculateTax() دالة لحساب المعدل الضريبي.
const salesAmount = parseFloat(document.getElementById(‘sales’).value); الحصول على قيمة المبيعات من مدخل المستخدم.
const taxAmount = salesAmount * SALES_TAX_RATE; حساب المعدل الضريبي باستخدام الثابت.
document.getElementById(‘result’).innerText = Sales Tax: $${taxAmount.toFixed(2)}; عرض النتيجة للمستخدم.
بهذا التطبيق، يمكن للمستخدم إدخال قيمة المبيعات، وبالنقر على الزر “Calculate Tax”، سيتم حساب المعدل الضريبي وعرض النتيجة للمستخدم.
خصائص الثابت في لغة جافاسكريبت؟
properties of javascript constant
ثوابت JavaScript لها خصائص معينة التي تميزها عن المتغيرات العادية. إليك بعض الخصائص الرئيسية للثوابت في JavaScript:
قيمة غير قابلة للتغيير (Immutable):
عندما يتم تعريف الثابت، لا يمكن تغيير قيمتها بعد التعريف. هذا يعني أنها تحتفظ بقيمتها على مدار دورة حياة البرنامج.
نطاق محدود (Block Scope):
الثوابت لها نطاق (scope) محدود للكتلة التي تم تعريفها فيها. هذا يعني أنها غير مرئية خارج الكتلة التي تم تعريفها فيها، مثل داخل الدالات أو الكتل الشرطية.
لا يمكن إعادة التعريف (Redeclaration):
لا يمكن تعريف الثابت مرة أخرى في نفس النطاق. إذا حاولت إعادة تعريف الثابت بنفس الاسم في نفس النطاق، فسيتم إطلاق خطأ.
مبنية على قيمة (Value-based):
الثوابت تعتمد على قيمة معينة ولا تتغير. هذا يعني أنها تستخدم لتخزين القيم التي لا تتغير مثل الثوابت الرياضية مثل PI أو المعدلات الضريبية.
عرضية للحروف (Case-sensitive):
الثوابت في JavaScript حساسة لحالة الحروف، مما يعني أن الثابت “myConst” و “MyConst” و “MYCONST” ستعتبر أسماء مختلفة.
يمكن تعيين قيمة واحدة فقط في الوقت الذي يتم فيه التعريف (Single Assignment):
يجب تعيين قيمة للثابت في الوقت الذي يتم فيه التعريف، ولا يمكن تأجيل التعيين.
تطبيق شامل مع الشرح
سنقوم بإنشاء تطبيق بسيط يستخدم الثوابت في JavaScript لحساب معدل السرعة. سيتيح التطبيق للمستخدم إدخال المسافة المقطوعة والزمن المستغرق، ثم سيقوم بحساب المعدل السرعة وعرض النتيجة.
دعونا نبدأ بكتابة التطبيق:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Calculator</title>
</head>
<body>
<h1>Speed Calculator</h1>
<label for="distance">Enter distance (in kilometers):</label>
<input type="number" id="distance">
<label for="time">Enter time (in hours):</label>
<input type="number" id="time">
<button onclick="calculateSpeed()">Calculate Speed</button>
<p id="result"></p>
<script>
// تعريف الثوابت
const SECONDS_IN_HOUR = 3600;
const KILOMETERS_TO_METERS = 1000;
// دالة لحساب المعدل السرعة
function calculateSpeed() {
// الحصول على قيمة المسافة والزمن من مدخلات المستخدم
const distance = parseFloat(document.getElementById('distance').value);
const time = parseFloat(document.getElementById('time').value);
// حساب المعدل السرعة بالكيلومتر في الساعة
const speed = (distance * KILOMETERS_TO_METERS) / (time * SECONDS_IN_HOUR);
// عرض النتيجة للمستخدم
document.getElementById('result').innerText = `Speed: ${speed.toFixed(2)} km/h`;
}
</script>
</body>
</html>
شرح التطبيق:
يتيح للمستخدم إدخال المسافة المقطوعة (بالكيلومتر) والزمن المستغرق (بالساعات).
عند النقر على زر “Calculate Speed”، يتم استدعاء دالة calculateSpeed() لحساب المعدل السرعة.
في الدالة، يتم استخدام الثوابت لتحديد عدد الثواني في الساعة وتحويل الكيلومترات إلى أمتار.
يتم ثم حساب المعدل السرعة بالكيلومتر في الساعة باستخدام القيم المدخلة.
تُعرض النتيجة للمستخدم.
بهذا التطبيق، يمكن للمستخدم حساب معدل السرعة باستخدام الثوابت في JavaScript بسهولة وسرعة.
اختبار اختيار من متعدد حول هذا الدرس
اختبار اختيار من متعدد حول الثوابت في JavaScript:
1-ما هو دور الثوابت في JavaScript؟
a. تخزين القيم التي يمكن تغييرها.
b. تخزين القيم التي لا يمكن تغييرها.
c. تخزين القيم الخاصة بالمستخدم.
d. تخزين القيم الرياضية فقط.
2-ما هو النطاق الرئيسي للثوابت في JavaScript؟
a. النطاق العام (Global scope)
b. النطاق الخاص (Private scope)
c. النطاق العمومي (Public scope)
d. النطاق الخاص بالدالة (Function scope)
4-ما النتيجة الصحيحة لتعريف الثابت التالي؟
;const TAX_RATE = 0.08
a. يمكن تغيير قيمة TAX_RATE.
b. TAX_RATE يجب أن تكون معرفة داخل الدالة فقط.
c. قيمة TAX_RATE لا يمكن تغييرها.
d. يمكن تعريف TAX_RATE مرة أخرى داخل نفس الدالة.
5-ماذا يعني أن الثوابت في JavaScript حساسة لحالة الحروف؟
a. يجب أن يتم كتابة أسماء الثوابت بحروف كبيرة فقط.
b. يجب أن يتم كتابة أسماء الثوابت بحروف صغيرة فقط.
c. الثوابت يمكن أن تكون بأي حالة من الحروف.
d. أسماء الثوابت يجب أن تكون بنفس الحالة التي تم تعريفها بها.
6-ما هي الطريقة الصحيحة لتعريف الثابت؟
a. var TAX_RATE = 0.08;
b. let TAX_RATE = 0.08;
c. constant TAX_RATE = 0.08;
d. const TAX_RATE = 0.08;
7-ما هي نتيجة محاولة إعادة تعريف الثابت في JavaScript؟
a. يتم إعادة تعريف الثابت بنفس القيمة.
b. يتم تجاوز القيمة السابقة بالقيمة الجديدة.
c. يتم إطلاق خطأ.
d. يتم تجاهل التعريف الجديد.
8-متى يجب استخدام الثوابت بدلاً من المتغيرات في JavaScript؟
a. عندما تكون القيمة قابلة للتغيير.
b. عندما يكون لديك الحاجة لإعادة تعريف القيمة.
c. عندما تكون القيمة ثابتة ولا تتغير.
d. عندما تكون القيمة معروفة فقط داخل نطاق الدالة.
9-ما هي الفائدة الرئيسية لاستخدام الثوابت في JavaScript؟
a. تغيير القيم بسهولة.
b. تجنب الأخطاء البرمجية والتعديلات غير المقصودة على القيم.
c. زيادة تعقيد الكود.
d. إضافة المزيد من المتغيرات إلى البرنامج.
10-كيف يمكن إعادة استخدام الثوابت في مواقع متعددة في JavaScript؟
a. باستخدام الكلمة الرئيسية “reuse”.
b. باستخدام الكلمة الرئيسية “export”.
c. باستخدام المتغيرات العالمية.
d. باستخدام الاستيراد والتصدير (import/export).
11-ما هي الطريقة الصحيحة للتعريف الثابت؟
a. const TAX_RATE = 0.08;
b. constant TAX_RATE = 0.08;
c. let TAX_RATE = 0.08;
d. var TAX_RATE = 0.08;