المعاملات الحسابية في جافاسكريبت JavaScript Arithmetic Operators
JavaScript Arithmetic Operators
مقدمة
تعتبر معاملات الحساب في لغة البرمجة JavaScript أساسية لفهم وتنفيذ العمليات الحسابية داخل تطبيقات الويب. توفر هذه المعاملات وسيلة فعالة لأداء الجمع، والطرح، والضرب، والقسمة، بالإضافة إلى القدرة على العديد من العمليات الأخرى.
في هذا الدرس، سنستعرض بشكل شامل هذه المشغلات وكيفية استخدامها بشكل فعال في كتابة الشيفرة البرمجية.
من خلال دراسة هذا الدرس، سنتناول مفاهيم مثل الجمع والطرح، والضرب والقسمة، بالإضافة إلى فهم باقي القسمة والعمليات التحكمية كالزيادة والنقص. سنقدم أمثلة عملية توضيحية وتطبيقات عملية تساعد في فهم كيفية استخدام هذه المشغلات في سياق البرمجة الويب.
يهدف هذا الدرس إلى تمكين المتعلمين من اكتساب المهارات الأساسية في استخدام مشغلات الحساب لحل المشاكل الرياضية وتطبيقات الويب. ستمكن المعرفة الحاصلين عليها من بناء تطبيقات قوية وفعّالة، والتي تعتمد على العمليات الحسابية كجزء أساسي من منطقها البرمجي.
فلنبدأ رحلتنا في استكشاف معاملات الحساب في JavaScript واكتساب الخبرة الضرورية للتعامل مع البيانات الرقمية في عالم تطوير الويب.
في لغة البرمجة JavaScript، تتيح لنا العديد من العمليات الحسابية باستخدام مجموعة من العوامل الحسابية، والتي تعرف بـ “مشغلات الحساب” أو “Arithmetic Operators”. إليك شرح لبعض هذه المشغلات:
الجمع (+):
يُستخدم لجمع قيمتين. على سبيل المثال:
javascript
let x = 5; let y = 3; let sum = x + y; // القيمة النهائية هي 8
الطرح (-):
يُستخدم لطرح قيمة من أخرى. على سبيل المثال:
javascript
let x = 8; let y = 3; let difference = x - y; // القيمة النهائية هي 5
الضرب (*):
يُستخدم لضرب قيمتين. على سبيل المثال:
javascript
let x = 4; let y = 6; let product = x * y; // القيمة النهائية هي 24
القسمة (/):
يُستخدم لقسمة قيمة على قيمة أخرى. على سبيل المثال:
javascript
let x = 10; let y = 2; let quotient = x / y; // القيمة النهائية هي 5
الباقي (%):باقي القسمة
يُستخدم للحصول على باقي القسمة بين قيمتين. على سبيل المثال:
javascript
let x = 11; let y = 3; let remainder = x % y; // القيمة النهائية هي 2 (باقي القسمة)
زيادة بمقدار واحد (++):
يُستخدم لزيادة قيمة متغير بمقدار واحد. على سبيل المثال:
javascript
let x = 5; x++; // القيمة النهائية لـ x هي 6
نقص بمقدار واحد (–):
يُستخدم لنقص قيمة متغير بمقدار واحد. على سبيل المثال:
javascript
let x = 7; x--; // القيمة النهائية لـ x هي 6
تستخدم هذه المشغلات الحسابية بشكل شائع في كتابة البرامج لأداء العمليات الحسابية الأساسية.
امثلة شاملة في صفحة ويب مع الشرح
أمثلة على استخدام معاملات الحساب في صفحة ويب باستخدام لغة JavaScript.
يمكنك إضافة الكود التالي في ملف HTML وفتحه في متصفح الويب لرؤية النتائج:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Arithmetic Operators Example</title>
</head>
<body>
<script>
// الجمع
let additionResult = 5 + 3;
document.write('Addition Result: ' + additionResult + '<br>');
// الطرح
let subtractionResult = 8 - 3;
document.write('Subtraction Result: ' + subtractionResult + '<br>');
// الضرب
let multiplicationResult = 4 * 6;
document.write('Multiplication Result: ' + multiplicationResult + '<br>');
// القسمة
let divisionResult = 10 / 2;
document.write('Division Result: ' + divisionResult + '<br>');
// الباقي
let remainderResult = 11 % 3;
document.write('Remainder Result: ' + remainderResult + '<br>');
// زيادة بمقدار واحد
let x = 5;
x++;
document.write('Increment Result: ' + x + '<br>');
// نقص بمقدار واحد
let y = 7;
y--;
document.write('Decrement Result: ' + y + '<br>');
</script>
</body>
</html>
هذا الكود يحتوي على أمثلة لجميع مشغلات الحساب السابقة، حيث يقوم بأداء العمليات الحسابية وطباعة النتائج في صفحة HTML. تفضل بفتح الملف في متصفح الويب الخاص بك لرؤية النتائج المطبوعة.
تطبيق على هذا الدرس مع الشرح
يمكننا إنشاء تطبيق بسيط باستخدام HTML وJavaScript يستخدم مشغلات الحساب.
سنقوم بإنشاء حاسبة بسيطة تقوم بأربع عمليات حسابية أساسية. إليك الكود مع شرح:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
input, button {
margin: 5px;
}
</style>
</head>
<body>
<h2>Simple Calculator</h2>
<input type="text" id="result" disabled>
<br>
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="appendToResult('+')">+</button>
<br>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('-')">-</button>
<br>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="appendToResult('*')">*</button>
<br>
<button onclick="appendToResult('0')">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToResult('/')">/</button>
<script>
function clearResult() {
document.getElementById('result').value = '';
}
function appendToResult(value) {
document.getElementById('result').value += value;
}
function calculateResult() {
let expression = document.getElementById('result').value;
let result;
try {
result = eval(expression);
} catch (error) {
result = 'Error';
}
document.getElementById('result').value = result;
}
</script>
</body>
</html>
شرح:
تم إنشاء حاسبة بسيطة تحتوي على حقل نصي لعرض النتيجة وأزرار للأرقام والعمليات الحسابية الأساسية.
تم استخدام الأسلوب eval لحساب النتيجة. يجب استخدام هذا الأسلوب بحذر في التطبيقات الحقيقية لتجنب مشاكل الأمان.
تم استخدام وظائف JavaScript لتنفيذ العمليات الأساسية.
قم بفتح هذا الكود في متصفح الويب لرؤية الحاسبة البسيطة وكيفية عملها. يمكنك أيضاً تحسينه وتوسيعه وفقًا لاحتياجات التطبيق الخاص بك.
اختبار عن هذا الدرس مع الشرح
مكننا إنشاء اختبار اختيار من متعدد لاختبار فهمك لمفهوم مشغلات الحساب في JavaScript. فيما يلي اختبار بسيط مع الإجابات وشرح لكل سؤال:
1. ما هو نتيجة العملية التالية: 7 + 3؟
أ) 10
ب) 13
ج) 17
د) 20
الإجابة الصحيحة: ب) 13
الشرح: يتم جمع القيمتين 7 و 3 للحصول على النتيجة 10.
2. ما هو باقي قسمة 15 على 4؟
أ) 1
ب) 2
ج) 3
د) 4
الإجابة الصحيحة: ج) 3
الشرح: باقي القسمة هو القيمة المتبقية بعد القسمة، في هذه الحالة 15 ÷ 4 يعطي باقي قيمته 3.
3. ما هو الناتج من التعبير التالي: 10 * (2 + 3)؟
أ) 50
ب) 60
ج) 70
د) 80
الإجابة الصحيحة: ب) 60
الشرح: يتم حساب ما بين القوسين أولاً (2 + 3) = 5، ثم يتم ضربها في 10 للحصول على النتيجة 50.
4. ما هو الناتج من التعبير التالي: 20 / 4؟
أ) 2
ب) 4
ج) 5
د) 10
الإجابة الصحيحة: ج) 5
الشرح: القسمة بين 20 و 4 تعطي النتيجة 5.
5. ما هو الناتج من التعبير التالي: 18 % 7؟
أ) 1
ب) 2
ج) 3
د) 4
الإجابة الصحيحة: ج) 4
الشرح: باقي القسمة هو 4، لأن 18 ÷ 7 تعطي باقي قيمته 4.
6. ما هو الناتج من التعبير التالي: 5 – (2 * 3)؟
أ) -1
ب) -3
ج) -5
د) -7
الإجابة الصحيحة: ج) -5
الشرح: يتم ضرب 2 في 3 أولاً للحصول على 6، ثم يتم طرحها من 5 للحصول على النتيجة -5.
7. إذا كانت قيمة المتغير x هي 8، ما هو الناتج من التعبير التالي: x++؟
أ) 8
ب) 9
ج) 10
د) 7
الإجابة الصحيحة: ب) 9
الشرح: x++ تعني زيادة قيمة المتغير x بمقدار واحد، لذا إذا كانت قيمة x هي 8، ستصبح 9.
8. ما هو الناتج من التعبير التالي: 15 / 0؟
أ) 0
ب) Infinity
ج) Error
د) 15
الإجابة الصحيحة: ب) Infinity
الشرح: القسمة على صفر تعطي قيمة Infinity في JavaScript.
9. إذا كانت قيمة المتغير y هي 12، ما هو الناتج من التعبير التالي: y–؟
أ) 11
ب) 12
ج) 13
د) 10
الإجابة الصحيحة: أ) 11
الشرح: y– تعني نقص قيمة المتغير y بمقدار واحد، لذا إذا كانت قيمة y هي 12، ستصبح 11.
10. ما هو الناتج من التعبير التالي: (4 + 6) * 2 / 3؟
أ) 6
ب) 8
ج) 10
د) 12
الإجابة الصحيحة: ج) 10
الشرح: يتم جمع 4 و 6 للحصول على 10، ثم يتم ضربها في 2 وأخيرًا يتم قسمها على 3 للحصول على النتيجة 10.