معاملات التخصيص في جافاسكريب JavaScript Assignment Operators
عوامل التخصيص في لغة البرمجة JavaScript:
مقدمة إلى عوامل التخصيص في JavaScript
تُعد عوامل التخصيص من العناصر الأساسية في لغة البرمجة JavaScript، حيث تُمثل طريقة قوية لتعديل قيم المتغيرات بشكل ديناميكي. تتيح هذه العوامل للمطورين تنفيذ تحديثات فورية على البيانات والتحكم الفعّال في سير البرنامج.
يتضمن هذا الدرس استعراضًا شاملاً لأنواع عوامل التخصيص في JavaScript، حيث سنستكشف كيف يمكننا استخدامها في مجموعة متنوعة من السياقات. سنركز على مفاهيم مثل عوامل التخصيص البسيط (=)، وعوامل التخصيص مع العمليات الحسابية (+=, -=, *=, /=)، وعوامل التخصيص مع العمليات الثنائية (|=, &=, ^=)، وأخيرًا عوامل التخصيص بالتحويل (<<=, >>=, >>>=).
سنقوم بتوفير أمثلة عملية وتفسيرًا وافيًا لكل نوع من هذه العوامل، مما يمكّنك من فهم كيفية استخدامها بفعالية في تطوير تطبيقات JavaScript. استعد لاكتساب مفاهيم جديدة وتحسين مهاراتك في برمجة الواجهة الرسومية والتحكم في البيانات باستخدام هذه الأدوات القوية في لغة JavaScript.
معاملات التخصيص في جافاسكريبت :JavaScript Assignment Operators
في لغة البرمجة JavaScript، تُستخدم عوامل التخصيص (Assignment Operators) لتعيين قيم للمتغيرات. هذه العوامل تساعد في تنفيذ عمليات التخصيص بطرق مختلفة. فيما يلي شرح لبعض عوامل التخصيص الشائعة:
عامل التخصيص البسيط (=):
يُستخدم لتعيين قيمة لمتغير.
مثال:
x = 10;
تعيين قيمة 10 للمتغير x.
*عوامل التخصيص مع العمليات الحسابية (+=, -=, =, /=):
تُستخدم لتعيين قيمة بناءً على القيمة الحالية للمتغير ونتيجة عملية حسابية.
مثال:
x += 5; يعني x = x + 5; y -= 3; يعني y = y - 3; z *= 2; يعني z = z * 2; w /= 4; يعني w = w / 4;
عامل التخصيص باستخدام العمليات الثنائية (|=, &=, ^=):
يُستخدم في حال تنفيذ عمليات على مستوى البتات (bitwise) للأعداد.
مثال:
a |= b; يعني a = a | b; c &= d; يعني c = c & d; e ^= f; يعني e = e ^ f;
عامل التخصيص بالتحويل (<<=, >>=, >>>=):
يستخدم لتحريك البتات لليسار أو لليمين بناءً على القيمة المحددة.
مثال:
num <<= 2;// يعني تحريك البتات لليسار بمقدار 2. value >>= 3; يعني تحريك البتات لليمين بمقدار //3. result >>>= 1;// يعني تحريك البتات لليمين بمقدار 1 مع استخدام الصفر المملوء.
هذه هي بعض العوامل الرئيسية التي تُستخدم في تعيين القيم في لغة JavaScript. يمكن استخدام هذه العوامل لتنفيذ العمليات المختلفة على المتغيرات بطريقة مبسطة وفعالة.
مثال شامل مع الشرح :All Types of JavaScript Assignment Operators
في JavaScript، تُستخدم عوامل التخصيص (Assignment Operators) لتعيين قيم للمتغيرات. هنا هي جميع أنواع عوامل التخصيص في JavaScript مع أمثلة:
عامل التخصيص البسيط (=):
يُستخدم لتعيين قيمة لمتغير.
مثال:
let x = 10;
*عوامل التخصيص مع العمليات الحسابية (+=, -=, =, /=):
تُستخدم لتعيين قيمة بناءً على القيمة الحالية للمتغير ونتيجة عملية حسابية.
مثال:
let y = 5; y += 3; // يعني y = y + 3; console.log(y); // الناتج: 8
عوامل التخصيص باستخدام العمليات الثنائية (|=, &=, ^=):
تُستخدم في حال تنفيذ عمليات على مستوى البتات (bitwise) للأعداد.
مثال:
let a = 5; // بتاته: 0101 a |= 2; // يعني a = a | 2; الناتج: 7 (بتاته: 0111)
عامل التخصيص بالتحويل (<<=, >>=, >>>=):
يستخدم لتحريك البتات لليسار أو لليمين بناءً على القيمة المحددة.
مثال:
let num = 8; // بتاته: 1000 num <<= 2; // يعني تحريك البتات لليسار بمقدار 2. الناتج: 32 (بتاته: 100000)
عوامل التخصيص مع السلاسل (+=):
يُستخدم لدمج (concatenate) سلاسل نصوص.
مثال:
let str = "Hello"; str += " World"; // يعني str = str + " World"; console.log(str); // الناتج: "Hello World"
هذه هي الأنواع الرئيسية لعوامل التخصيص في JavaScript، ويمكن استخدامها بمرونة وفقًا لاحتياجات البرنامج.
مثال شامل في صفحة ويب:عامل التخصيص البسيط (=):
بالتأكيد، يمكننا استخدام عامل التخصيص البسيط (=) في صفحة ويب لتعيين قيمة لمتغير وعرضها في الواجهة. لنفترض أن لدينا صفحة ويب بسيطة تحتوي على نص وزر. عند النقر على الزر، سنقوم بتعيين قيمة لمتغير باستخدام عامل التخصيص البسيط وعرض قيمة هذا المتغير في الصفحة.
كود الصفحة HTML:
<!DOCTYPE html>
<html lang="en" dir=rtl>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment Operator Example</title>
</head>
<body>
<h1>Assignment Operator Example</h1>
<p>قيمة المتغير: <span id="displayValue">-</span></p>
<button onclick="assignValue()">تعيين القيمة</button>
<script>
// JavaScript code
function assignValue() {
// استخدام عامل التخصيص البسيط لتعيين قيمة للمتغير
let myVariable = "Hello, World!";
// عرض قيمة المتغير في الصفحة
document.getElementById("displayValue").textContent = myVariable;
}
</script>
</body>
</html>
في هذا المثال:
لدينا نص في الصفحة يوضح عنوانًا ويحتوي على زر وفقرة (<p>) لعرض قيمة المتغير.
لدينا زر يحتوي على الأمر onclick=”assignValue()”، وهو يعني أنه عند النقر على الزر، سيتم تشغيل الوظيفة assignValue().
لدينا جزء من JavaScript يحتوي على الوظيفة assignValue()، والتي تستخدم عامل التخصيص البسيط (=) لتعيين قيمة “Hello, World!” للمتغير myVariable.
ثم، تقوم الوظيفة بتحديث قيمة العنصر في الصفحة بواسطة document.getElementById(“displayValue”).textContent = myVariable;.
عند تشغيل هذه الصفحة والنقر على الزر، سيتم تعيين قيمة “Hello, World!” للمتغير وعرضها في الواجهة.
مثال شامل :*عوامل التخصيص مع العمليات الحسابية (+=, -=, =, /=):
يمكننا استخدام عوامل التخصيص مع العمليات الحسابية في صفحة ويب لتعديل قيمة متغير باستمرار عند حدوث أحداث. في هذا المثال، سنقوم بإنشاء صفحة تحتوي على متغير وعناصر HTML لعرض وتحديث قيمة المتغير باستخدام عوامل التخصيص مع العمليات الحسابية.
كود الصفحة HTML:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment Operators with Arithmetic Example</title>
</head>
<body>
<h1>Assignment Operators with Arithmetic Example</h1>
<p>قيمة المتغير: <span id="displayValue">0</span></p>
<button onclick="addValue()">إضافة 5</button>
<button onclick="subtractValue()">طرح 3</button>
<button onclick="multiplyValue()">ضرب في 2</button>
<button onclick="divideValue()">قسمة على 4</button>
<script>
// JavaScript code
let myNumber = 0;
function updateDisplay() {
// عرض قيمة المتغير في الصفحة
document.getElementById("displayValue").textContent = myNumber;
}
function addValue() {
// استخدام += لإضافة قيمة إلى المتغير
myNumber += 5;
updateDisplay();
}
function subtractValue() {
// استخدام -= لطرح قيمة من المتغير
myNumber -= 3;
updateDisplay();
}
function multiplyValue() {
// استخدام *= لضرب المتغير في قيمة
myNumber *= 2;
updateDisplay();
}
function divideValue() {
// استخدام /= لقسمة المتغير على قيمة
myNumber /= 4;
updateDisplay();
}
</script>
</body>
</html>في هذا المثال:
لدينا متغير myNumber بقيمة ابتدائية 0.
لدينا عنصر HTML (<span>) يعرض قيمة المتغير في الصفحة.
لدينا أربعة أزرار مع وظائف (addValue(), subtractValue(), multiplyValue(), divideValue())، حيث يتم استخدام عوامل التخصيص مع العمليات الحسابية لتحديث قيمة المتغير بناءً على العمليات المحددة.
عند تشغيل هذه الصفحة والنقر على الأزرار، سيتم تعديل قيمة المتغير وعرضها في الواجهة بناءً على العمليات الحسابية المختارة.
مثال شامل:عوامل التخصيص باستخدام العمليات الثنائية (|=, &=, ^=):
بالتأكيد، يمكننا استخدام عوامل التخصيص باستخدام العمليات الثنائية في صفحة ويب لتنفيذ عمليات على مستوى البتات للأعداد. في هذا المثال، سنقوم بإنشاء صفحة تحتوي على متغير يمثل قيمة بتات، ونستخدم عوامل التخصيص باستخدام العمليات الثنائية لتحديث هذه القيمة عند النقر على الأزرار.
كود الصفحة HTML:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitwise Assignment Operators Example</title>
</head>
<body>
<h1>Bitwise Assignment Operators Example</h1>
<p>قيمة المتغير (بتات): <span id="displayValue">0</span></p>
<button onclick="orOperation()">OR بتي</button>
<button onclick="andOperation()">AND بتي</button>
<button onclick="xorOperation()">XOR بتي</button>
<script>
// JavaScript code
let bitValue = 0;
function updateDisplay() {
// عرض قيمة المتغير في الصفحة
document.getElementById("displayValue").textContent = bitValue;
}
function orOperation() {
// استخدام عامل التخصيص مع العملية الثنائية OR (|)
bitValue |= 2; // القيمة الثنائية للعدد 2 هي 10
updateDisplay();
}
function andOperation() {
// استخدام عامل التخصيص مع العملية الثنائية AND (&)
bitValue &= 3; // القيمة الثنائية للعدد 3 هي 11
updateDisplay();
}
function xorOperation() {
// استخدام عامل التخصيص مع العملية الثنائية XOR (^)
bitValue ^= 1; // القيمة الثنائية للعدد 1 هي 01
updateDisplay();
}
</script>
</body>
</html>في هذا المثال:
لدينا متغير bitValue بقيمة ابتدائية 0 تمثل قيمة بتات.
لدينا عنصر HTML (<span>) يعرض قيمة المتغير في الصفحة.
لدينا ثلاثة أزرار مع وظائف (orOperation(), andOperation(), xorOperation())، حيث يتم استخدام عوامل التخصيص مع العمليات الثنائية لتحديث قيمة المتغير بناءً على العمليات المحددة.
عند تشغيل هذه الصفحة والنقر على الأزرار، ستتم عمليات العمليات الثنائية على قيمة المتغير وعرض النتائج في الواجهة.
مثال شامل:عامل التخصيص بالتحويل (<<=, >>=, >>>=):
بالتأكيد، يمكننا استخدام عوامل التخصيص بالتحويل في صفحة ويب لتحريك البتات لليسار أو لليمين. في هذا المثال، سنقوم بإنشاء صفحة تحتوي على متغير يمثل قيمة بتات، ونستخدم عوامل التخصيص بالتحويل لتحريك البتات وعرض النتائج عند النقر على الأزرار.
كود الصفحة HTML:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitwise Shift Assignment Operators Example</title>
</head>
<body>
<h1>Bitwise Shift Assignment Operators Example</h1>
<p>قيمة المتغير (بتات): <span id="displayValue">0</span></p>
<button onclick="shiftLeft()">تحريك لليسار</button>
<button onclick="shiftRight()">تحريك لليمين</button>
<script>
// JavaScript code
let bitValue = 8;
function updateDisplay() {
// عرض قيمة المتغير في الصفحة
document.getElementById("displayValue").textContent = bitValue;
}
function shiftLeft() {
// استخدام عامل التخصيص بالتحويل لتحريك البتات لليسار (<<)
bitValue <<= 1;
updateDisplay();
}
function shiftRight() {
// استخدام عامل التخصيص بالتحويل لتحريك البتات لليمين (>>)
bitValue >>= 1;
updateDisplay();
}
</script>
</body>
</html>في هذا المثال:
لدينا متغير bitValue بقيمة ابتدائية 8 تمثل قيمة بتات.
لدينا عنصر HTML (<span>) يعرض قيمة المتغير في الصفحة.
لدينا زرين مع وظائف (shiftLeft(), shiftRight())، حيث يتم استخدام عوامل التخصيص بالتحويل لتحريك البتات لليسار أو لليمين بناءً على العمليات المحددة.
عند تشغيل هذه الصفحة والنقر على الأزرار، ستتم عمليات تحريك البتات وعرض النتائج في الواجهة.
تطبيق على هذا الدرس مع الشرح المفصل
مثال شامل:عوامل التخصيص مع السلاسل (+=):
بالطبع، يمكننا استخدام عامل التخصيص مع السلاسل في صفحة ويب لدمج (concatenate) سلاسل نصوص. في هذا المثال، سنقوم بإنشاء صفحة تحتوي على متغير نصي ونستخدم عامل التخصيص مع السلاسل لتحديث قيمة المتغير عند النقر على زر.
كود الصفحة HTML:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Concatenation Assignment Operator Example</title>
</head>
<body>
<h1>String Concatenation Assignment Operator Example</h1>
<p>قيمة المتغير النصي: <span id="displayValue">-</span></p>
<button onclick="concatenateString()">دمج النصوص</button>
<script>
// JavaScript code
let myString = "Hello, ";
function updateDisplay() {
// عرض قيمة المتغير في الصفحة
document.getElementById("displayValue").textContent = myString;
}
function concatenateString() {
// استخدام عامل التخصيص مع السلاسل لدمج النصوص
myString += "World!";
updateDisplay();
}
</script>
</body>
</html>في هذا المثال:
لدينا متغير myString بقيمة ابتدائية “Hello, “.
لدينا عنصر HTML (<span>) يعرض قيمة المتغير في الصفحة.
لدينا زر يحتوي على الأمر onclick=”concatenateString()”، وهو يعني أنه عند النقر على الزر، سيتم تشغيل الوظيفة concatenateString().
لدينا جزء من JavaScript يحتوي على الوظيفة concatenateString()، والتي تستخدم عامل التخصيص مع السلاسل (+=) لدمج النص “World!” مع قيمة المتغير myString.
ثم، تقوم الوظيفة بتحديث قيمة العنصر في الصفحة بواسطة document.getElementById(“displayValue”).textContent = myString;.
عند تشغيل هذه الصفحة والنقر على الزر، ستتم عملية دمج النص “World!” مع النص الموجود في المتغير وعرض النتيجة في الواجهة.
اختبار اختيار من متعدد عن عوامل التخصيص في جافاسكريبت:
1. ما هي لغة برمجة JavaScript تستخدم على نطاق واسع في تطوير الواجهة الرسومية للويب؟
أ) Java
ب) Python
ج) JavaScript
د) C++
الشرح: الإجابة الصحيحة هي “ج) JavaScript”. JavaScript هي لغة برمجة تستخدم بشكل أساسي في تطوير الواجهة الرسومية للويب.
2. ما الذي يقوم به عامل التخصيص (+=) في JavaScript؟
أ) جمع القيمتين
ب) ضرب القيمتين
ج) قسمة القيمتين
د) دمج السلاسل
الشرح: الإجابة الصحيحة هي “د) دمج السلاسل”. عامل التخصيص (+=) في JavaScript يُستخدم لدمج النصوص أو السلاسل.
3. كيف يمكن استخدام عامل التخصيص مع العمليات الحسابية في JavaScript؟
أ) *=
ب) +=
ج) /=
د) &=
الشرح: الإجابة الصحيحة هي “ب) +=”. عامل التخصيص مع العمليات الحسابية (+=) يُستخدم لجمع القيمة الحالية مع قيمة جديدة.
4. ما هي وظيفة عوامل التخصيص بالتحويل (<<=) في JavaScript؟
أ) ضرب القيمة في عدد معين
ب) تحريك البتات لليسار
ج) دمج النصوص
د) قسمة القيمة على عدد معين
الشرح: الإجابة الصحيحة هي “ب) تحريك البتات لليسار”. عوامل التخصيص بالتحويل (<<=) تستخدم لتحريك البتات لليسار في قيمة المتغير.
5. كيف يمكن استخدام عامل التخصيص مع العمليات الثنائية XOR (^) في JavaScript؟
أ) |=
ب) ^=
ج) &=
د) >>=
الشرح: الإجابة الصحيحة هي “ب) ^=”. عامل التخصيص مع العمليات الثنائية XOR (^) يستخدم لتنفيذ العمليات XOR على البتات في المتغير.
6. ما هي نتيجة التعبير التالي: (10 & 6)?
أ) 14
ب) 2
ج) 6
د) 0
الشرح: الإجابة الصحيحة هي “ب) 2”. عملية العمليات الثنائية AND (&) تقوم بإجراء العملية على كل بت بين العددين.
7. ما هو الهدف من استخدام عوامل التخصيص مع السلاسل (+=) في JavaScript؟
أ) جمع الأعداد
ب) ضرب الأعداد
ج) دمج النصوص
د) قسمة الأعداد
الشرح: الإجابة الصحيحة هي “ج) دمج النصوص”. عامل التخصيص مع السلاسل (+=) يستخدم لدمج سلاسل النصوص في JavaScript.
8. كيف يمكن استخدام عوامل التخصيص مع العمليات الحسابية للضرب في JavaScript؟
أ) *=
ب) /=
ج) -=
د) +=
الشرح: الإجابة الصحيحة هي “أ) *=”. عامل التخصيص مع العمليات الحسابية ( *=) يستخدم لضرب القيمة الحالية في قيمة جديدة.
9. ماذا يفعل عامل التخصيص (>>=) في JavaScript؟
أ) يقسم القيمة على عدد معين
ب) ينقل البتات لليمين
ج) ينقل البتات لليسار
د) يضرب القيمة في عدد معين
الشرح: الإجابة الصحيحة هي “ب) ينقل البتات لليمين”. عامل التخصيص بالتحويل (>>=) يستخدم لتحريك البتات لليمين في قيمة المتغير.
10. ما هي قيمة المتغير بعد تنفيذ التعبير التالي: let x = 5; x |= 3;؟
أ) 5
ب) 7
ج) 3
د) 1
الشرح: الإجابة الصحيحة هي “ب) 7”. عملية العمليات الثنائية OR (|) تؤدي إلى جعل البتات المشتركة بين العددين تكون بقيمة 1.