|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "90a3c32c3377f83ab750c2447c77ab98",
|
|
|
"translation_date": "2025-10-22T14:05:37+00:00",
|
|
|
"source_file": "2-js-basics/3-making-decisions/README.md",
|
|
|
"language_code": "ar"
|
|
|
}
|
|
|
-->
|
|
|
# أساسيات JavaScript: اتخاذ القرارات
|
|
|
|
|
|
|
|
|
|
|
|
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
هل تساءلت يومًا كيف تتخذ التطبيقات قرارات ذكية؟ مثل كيفية اختيار نظام الملاحة أسرع طريق، أو كيف يقرر منظم الحرارة تشغيل التدفئة؟ هذا هو المفهوم الأساسي لاتخاذ القرارات في البرمجة.
|
|
|
|
|
|
كما تم تصميم محرك التحليل الخاص بـ Charles Babbage لاتباع تسلسلات مختلفة من العمليات بناءً على الظروف، تحتاج برامج JavaScript الحديثة إلى اتخاذ خيارات بناءً على ظروف متغيرة. هذه القدرة على التفرع واتخاذ القرارات هي ما يحول الكود الثابت إلى تطبيقات ذكية ومتجاوبة.
|
|
|
|
|
|
في هذا الدرس، ستتعلم كيفية تنفيذ المنطق الشرطي في برامجك. سنستكشف العبارات الشرطية، وعوامل المقارنة، والتعبيرات المنطقية التي تسمح لكودك بتقييم المواقف والاستجابة بشكل مناسب.
|
|
|
|
|
|
## اختبار ما قبل المحاضرة
|
|
|
|
|
|
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/11)
|
|
|
|
|
|
القدرة على اتخاذ القرارات والتحكم في تدفق البرنامج هي جانب أساسي من البرمجة. يغطي هذا القسم كيفية التحكم في مسار تنفيذ برامج JavaScript الخاصة بك باستخدام القيم المنطقية والمنطق الشرطي.
|
|
|
|
|
|
[](https://youtube.com/watch?v=SxTp8j-fMMY "اتخاذ القرارات")
|
|
|
|
|
|
> 🎥 انقر على الصورة أعلاه لمشاهدة فيديو حول اتخاذ القرارات.
|
|
|
|
|
|
> يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
|
|
|
|
|
|
## لمحة سريعة عن القيم المنطقية
|
|
|
|
|
|
قبل استكشاف اتخاذ القرارات، دعونا نراجع القيم المنطقية من درسنا السابق. سميت هذه القيم على اسم عالم الرياضيات George Boole، وهي تمثل حالات ثنائية – إما `true` أو `false`. لا يوجد غموض، ولا وسط.
|
|
|
|
|
|
تشكل هذه القيم الثنائية أساس كل المنطق الحسابي. كل قرار يتخذه برنامجك في النهاية يتقلص إلى تقييم منطقي.
|
|
|
|
|
|
إنشاء متغيرات منطقية أمر بسيط:
|
|
|
|
|
|
```javascript
|
|
|
let myTrueBool = true;
|
|
|
let myFalseBool = false;
|
|
|
```
|
|
|
|
|
|
هذا ينشئ متغيرين بقيم منطقية صريحة.
|
|
|
|
|
|
✅ القيم المنطقية سميت على اسم عالم الرياضيات والفيلسوف والمنطقي الإنجليزي George Boole (1815–1864).
|
|
|
|
|
|
## عوامل المقارنة والقيم المنطقية
|
|
|
|
|
|
في الواقع، نادرًا ما تقوم بتعيين القيم المنطقية يدويًا. بدلاً من ذلك، ستقوم بإنشائها عن طريق تقييم الشروط: "هل هذا الرقم أكبر من ذلك؟" أو "هل هذه القيم متساوية؟"
|
|
|
|
|
|
تتيح عوامل المقارنة هذه التقييمات. تقارن القيم وتعيد نتائج منطقية بناءً على العلاقة بين العوامل.
|
|
|
|
|
|
| الرمز | الوصف | المثال |
|
|
|
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
|
|
| `<` | **أقل من**: يقارن بين قيمتين ويعيد نوع البيانات المنطقية `true` إذا كانت القيمة على الجانب الأيسر أقل من الجانب الأيمن | `5 < 6 // true` |
|
|
|
| `<=` | **أقل من أو يساوي**: يقارن بين قيمتين ويعيد نوع البيانات المنطقية `true` إذا كانت القيمة على الجانب الأيسر أقل من أو تساوي الجانب الأيمن | `5 <= 6 // true` |
|
|
|
| `>` | **أكبر من**: يقارن بين قيمتين ويعيد نوع البيانات المنطقية `true` إذا كانت القيمة على الجانب الأيسر أكبر من الجانب الأيمن | `5 > 6 // false` |
|
|
|
| `>=` | **أكبر من أو يساوي**: يقارن بين قيمتين ويعيد نوع البيانات المنطقية `true` إذا كانت القيمة على الجانب الأيسر أكبر من أو تساوي الجانب الأيمن | `5 >= 6 // false` |
|
|
|
| `===` | **المساواة الصارمة**: يقارن بين قيمتين ويعيد نوع البيانات المنطقية `true` إذا كانت القيم على اليمين واليسار متساوية وتكون من نفس نوع البيانات. | `5 === 6 // false` |
|
|
|
| `!==` | **عدم المساواة**: يقارن بين قيمتين ويعيد القيمة المنطقية المعاكسة لما سيعيده عامل المساواة الصارمة | `5 !== 6 // true` |
|
|
|
|
|
|
✅ تحقق من معرفتك بكتابة بعض المقارنات في وحدة التحكم الخاصة بالمتصفح. هل تفاجأت بأي بيانات تم إرجاعها؟
|
|
|
|
|
|
## عبارة If
|
|
|
|
|
|
عبارة `if` تشبه طرح سؤال في الكود الخاص بك. "إذا كان هذا الشرط صحيحًا، فقم بهذا الشيء." إنها على الأرجح الأداة الأكثر أهمية التي ستستخدمها لاتخاذ القرارات في JavaScript.
|
|
|
|
|
|
إليك كيفية عملها:
|
|
|
|
|
|
```javascript
|
|
|
if (condition) {
|
|
|
// Condition is true. Code in this block will run.
|
|
|
}
|
|
|
```
|
|
|
|
|
|
يذهب الشرط داخل الأقواس، وإذا كان `true`، يقوم JavaScript بتشغيل الكود داخل الأقواس المتعرجة. إذا كان `false`، يتخطى JavaScript تلك الكتلة بالكامل.
|
|
|
|
|
|
غالبًا ما تستخدم عوامل المقارنة لإنشاء هذه الشروط. دعونا نرى مثالًا عمليًا:
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 1000;
|
|
|
let laptopPrice = 800;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
// Condition is true. Code in this block will run.
|
|
|
console.log("Getting a new laptop!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
نظرًا لأن `1000 >= 800` يتم تقييمه إلى `true`، يتم تنفيذ الكود داخل الكتلة، ويعرض "الحصول على جهاز كمبيوتر محمول جديد!" في وحدة التحكم.
|
|
|
|
|
|
## عبارة If..Else
|
|
|
|
|
|
ولكن ماذا لو كنت تريد أن يقوم برنامجك بشيء مختلف عندما يكون الشرط خاطئًا؟ هنا يأتي دور `else` – إنها مثل وجود خطة احتياطية.
|
|
|
|
|
|
عبارة `else` تمنحك طريقة لتقول "إذا لم يكن هذا الشرط صحيحًا، قم بهذا الشيء الآخر بدلاً من ذلك."
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 500;
|
|
|
let laptopPrice = 800;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
// Condition is true. Code in this block will run.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
// Condition is false. Code in this block will run.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
الآن، نظرًا لأن `500 >= 800` هو `false`، يتخطى JavaScript الكتلة الأولى ويقوم بتشغيل كتلة `else` بدلاً من ذلك. سترى "لا يمكنني شراء جهاز كمبيوتر محمول جديد بعد!" في وحدة التحكم.
|
|
|
|
|
|
✅ اختبر فهمك لهذا الكود والكود التالي عن طريق تشغيله في وحدة التحكم الخاصة بالمتصفح. قم بتغيير قيم المتغيرات currentMoney و laptopPrice لتغيير النتيجة `console.log()`.
|
|
|
|
|
|
## عبارة Switch
|
|
|
|
|
|
في بعض الأحيان تحتاج إلى مقارنة قيمة واحدة مع خيارات متعددة. على الرغم من أنه يمكنك ربط عدة عبارات `if..else`، إلا أن هذا النهج يصبح غير عملي. توفر عبارة `switch` هيكلًا أنظف للتعامل مع قيم متعددة منفصلة.
|
|
|
|
|
|
يشبه المفهوم أنظمة التبديل الميكانيكية المستخدمة في مقاسم الهاتف المبكرة – تحدد قيمة الإدخال مسار التنفيذ المحدد.
|
|
|
|
|
|
```javascript
|
|
|
switch (expression) {
|
|
|
case x:
|
|
|
// code block
|
|
|
break;
|
|
|
case y:
|
|
|
// code block
|
|
|
break;
|
|
|
default:
|
|
|
// code block
|
|
|
}
|
|
|
```
|
|
|
|
|
|
إليك كيفية هيكلتها:
|
|
|
- يقوم JavaScript بتقييم التعبير مرة واحدة
|
|
|
- يبحث في كل `case` للعثور على تطابق
|
|
|
- عندما يجد تطابقًا، يقوم بتشغيل كتلة الكود تلك
|
|
|
- يخبر `break` JavaScript بالتوقف والخروج من switch
|
|
|
- إذا لم تتطابق أي حالات، يقوم بتشغيل كتلة `default` (إذا كانت موجودة)
|
|
|
|
|
|
```javascript
|
|
|
// Program using switch statement for day of week
|
|
|
let dayNumber = 2;
|
|
|
let dayName;
|
|
|
|
|
|
switch (dayNumber) {
|
|
|
case 1:
|
|
|
dayName = "Monday";
|
|
|
break;
|
|
|
case 2:
|
|
|
dayName = "Tuesday";
|
|
|
break;
|
|
|
case 3:
|
|
|
dayName = "Wednesday";
|
|
|
break;
|
|
|
default:
|
|
|
dayName = "Unknown day";
|
|
|
break;
|
|
|
}
|
|
|
console.log(`Today is ${dayName}`);
|
|
|
```
|
|
|
|
|
|
في هذا المثال، يرى JavaScript أن `dayNumber` هو `2`، يجد تطابقًا مع `case 2`، يحدد `dayName` إلى "الثلاثاء"، ثم يخرج من switch. النتيجة؟ "اليوم هو الثلاثاء" يتم تسجيله في وحدة التحكم.
|
|
|
|
|
|
✅ اختبر فهمك لهذا الكود والكود التالي عن طريق تشغيله في وحدة التحكم الخاصة بالمتصفح. قم بتغيير قيم المتغير a لتغيير النتيجة `console.log()`.
|
|
|
|
|
|
## عوامل منطقية وقيم منطقية
|
|
|
|
|
|
غالبًا ما تتطلب القرارات المعقدة تقييم شروط متعددة في وقت واحد. تمامًا كما يسمح الجبر المنطقي للرياضيين بدمج التعبيرات المنطقية، توفر البرمجة عوامل منطقية لربط شروط منطقية متعددة.
|
|
|
|
|
|
تتيح هذه العوامل منطقًا شرطيًا متطورًا من خلال الجمع بين تقييمات بسيطة صحيحة/خاطئة.
|
|
|
|
|
|
| الرمز | الوصف | المثال |
|
|
|
| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
|
| `&&` | **AND المنطقي**: يقارن بين تعبيرين منطقيين. يعيد true **فقط** إذا كان كلا الجانبين صحيحًا | `(5 > 3) && (5 < 10) // كلا الجانبين صحيح. يعيد true` |
|
|
|
| `\|\|` | **OR المنطقي**: يقارن بين تعبيرين منطقيين. يعيد true إذا كان على الأقل أحد الجانبين صحيحًا | `(5 > 10) \|\| (5 < 10) // أحد الجانبين خاطئ، الآخر صحيح. يعيد true` |
|
|
|
| `!` | **NOT المنطقي**: يعيد القيمة المعاكسة لتعبير منطقي | `!(5 > 10) // 5 ليس أكبر من 10، لذا "!" يجعله صحيحًا` |
|
|
|
|
|
|
تتيح لك هذه العوامل الجمع بين الشروط بطرق مفيدة:
|
|
|
- AND (`&&`) يعني أن كلا الشرطين يجب أن يكونا صحيحين
|
|
|
- OR (`||`) يعني أن على الأقل أحد الشرطين يجب أن يكون صحيحًا
|
|
|
- NOT (`!`) يقلب صحيح إلى خاطئ (والعكس صحيح)
|
|
|
|
|
|
## الشروط والقرارات باستخدام العوامل المنطقية
|
|
|
|
|
|
دعونا نرى هذه العوامل المنطقية قيد التنفيذ مع مثال أكثر واقعية:
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 600;
|
|
|
let laptopPrice = 800;
|
|
|
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off
|
|
|
|
|
|
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
|
|
|
// Condition is true. Code in this block will run.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
// Condition is false. Code in this block will run.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
في هذا المثال: نحسب سعر الخصم بنسبة 20% (640)، ثم نقيم ما إذا كانت أموالنا المتاحة تغطي السعر الكامل أو السعر المخفض. نظرًا لأن 600 تفي بحد السعر المخفض البالغ 640، يتم تقييم الشرط إلى true.
|
|
|
|
|
|
### عامل النفي
|
|
|
|
|
|
في بعض الأحيان يكون من الأسهل التفكير في متى يكون شيء ما غير صحيح. مثل بدلاً من السؤال "هل المستخدم مسجل الدخول؟"، قد ترغب في السؤال "هل المستخدم غير مسجل الدخول؟" يقوم عامل التعجب (`!`) بقلب المنطق لك.
|
|
|
|
|
|
```javascript
|
|
|
if (!condition) {
|
|
|
// runs if condition is false
|
|
|
} else {
|
|
|
// runs if condition is true
|
|
|
}
|
|
|
```
|
|
|
|
|
|
عامل `!` يشبه قول "عكس..." – إذا كان شيء ما `true`، يجعل `!` ذلك `false`، والعكس صحيح.
|
|
|
|
|
|
### التعبيرات الثلاثية
|
|
|
|
|
|
للتعيينات الشرطية البسيطة، توفر JavaScript **العامل الثلاثي**. يتيح لك هذا التركيب المختصر كتابة تعبير شرطي في سطر واحد، وهو مفيد عندما تحتاج إلى تعيين أحد القيمتين بناءً على شرط.
|
|
|
|
|
|
```javascript
|
|
|
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
|
|
|
```
|
|
|
|
|
|
يقرأ مثل سؤال: "هل هذا الشرط صحيح؟ إذا نعم، استخدم هذه القيمة. إذا لا، استخدم تلك القيمة."
|
|
|
|
|
|
فيما يلي مثال أكثر واقعية:
|
|
|
|
|
|
```javascript
|
|
|
let firstNumber = 20;
|
|
|
let secondNumber = 10;
|
|
|
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
|
|
|
```
|
|
|
|
|
|
✅ خذ دقيقة لقراءة هذا الكود عدة مرات. هل تفهم كيف تعمل هذه العوامل؟
|
|
|
|
|
|
إليك ما يقوله هذا السطر: "هل `firstNumber` أكبر من `secondNumber`؟ إذا نعم، ضع `firstNumber` في `biggestNumber`. إذا لا، ضع `secondNumber` في `biggestNumber`."
|
|
|
|
|
|
العامل الثلاثي هو مجرد طريقة أقصر لكتابة عبارة `if..else` التقليدية:
|
|
|
|
|
|
```javascript
|
|
|
let biggestNumber;
|
|
|
if (firstNumber > secondNumber) {
|
|
|
biggestNumber = firstNumber;
|
|
|
} else {
|
|
|
biggestNumber = secondNumber;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
كلا النهجين ينتجان نفس النتائج. يوفر العامل الثلاثي الاختصار، بينما قد يكون هيكل if-else التقليدي أكثر قابلية للقراءة للشروط المعقدة.
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 التحدي
|
|
|
|
|
|
قم بإنشاء برنامج مكتوب أولاً باستخدام العوامل المنطقية، ثم أعد كتابته باستخدام تعبير ثلاثي. ما هي التركيبة التي تفضلها؟
|
|
|
|
|
|
---
|
|
|
|
|
|
## تحدي GitHub Copilot Agent 🚀
|
|
|
|
|
|
استخدم وضع Agent لإكمال التحدي التالي:
|
|
|
|
|
|
**الوصف:** قم بإنشاء آلة حاسبة شاملة للدرجات تعرض مفاهيم اتخاذ القرارات المتعددة من هذا الدرس، بما في ذلك عبارات if-else، وعبارات switch، والعوامل المنطقية، والتعبيرات الثلاثية.
|
|
|
|
|
|
**المهمة:** اكتب برنامج JavaScript يأخذ درجة الطالب الرقمية (0-100) ويحدد درجته الحرفية باستخدام المعايير التالية:
|
|
|
- A: 90-100
|
|
|
- B: 80-89
|
|
|
- C: 70-79
|
|
|
- D: 60-69
|
|
|
- F: أقل من 60
|
|
|
|
|
|
المتطلبات:
|
|
|
1. استخدم عبارة if-else لتحديد الدرجة الحرفية
|
|
|
2. استخدم العوامل المنطقية للتحقق مما إذا كان الطالب ناجحًا (الدرجة >= 60) ولديه تفوق (الدرجة >= 90)
|
|
|
3. استخدم عبارة switch لتقديم ملاحظات محددة لكل درجة حرفية
|
|
|
4. استخدم العامل الثلاثي لتحديد ما إذا كان الطالب مؤهلًا للدورة التالية (الدرجة >= 70)
|
|
|
5. قم بتضمين التحقق من صحة الإدخال للتأكد من أن الدرجة بين 0 و100
|
|
|
|
|
|
اختبر برنامجك مع درجات مختلفة بما في ذلك الحالات الحدية مثل 59، 60، 89، 90، ومدخلات غير صالحة.
|
|
|
|
|
|
تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
|
|
|
|
|
|
## اختبار ما بعد المحاضرة
|
|
|
|
|
|
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/12)
|
|
|
|
|
|
## المراجعة والدراسة الذاتية
|
|
|
|
|
|
اقرأ المزيد عن العديد من العوامل المتاحة للمستخدم [على MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
|
|
|
|
|
|
استعرض دليل Josh Comeau الرائع [للعوامل](https://joshwcomeau.com/operator-lookup/)!
|
|
|
|
|
|
## الواجب
|
|
|
|
|
|
[العوامل](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**إخلاء المسؤولية**:
|
|
|
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة. |
