الشروط والحلقات والدوال
ما تعرفه من بايثون تكتبه الآن بلغة المتصفح. ⏱ نحو 25 دقيقة.
- تكتب الشروط بـ
ifوelse ifوelse. - تستخدم =
==و && و || في المقارنات. - تكتب حلقتي
forوwhile. - تكتب دالة تُرجع قيمة، وتتعرف على الدالة السهمية.
١الفكرة نفسها، كتابة مختلفة
تعرف من مقرر 111 الشروط والحلقات والدوال. في JavaScript الأفكار هي نفسها، والفرق في الكتابة:
| بايثون | JavaScript | |
|---|---|---|
| الكتلة | نقطتان ومسافة بادئة | أقواس معقوفة { } |
| الشرط | if x > 5: | if (x > 5) { |
| وإلا إذا | elif | else if |
| و / أو / ليس | and or not | && || ! |
| يساوي | == | === (ثلاث علامات) |
| الدالة | def area(w, h): | function area(w, h) { |
٢الشروط
const mark = 78; if (mark >= 90) { console.log("ممتاز");} else if (mark >= 75) { console.log("جيد جدًّا");} else if (mark >= 60) { console.log("ناجح");} else { console.log("راسب");} const age = 20;const hasId = true;if (age >= 18 && hasId) { console.log("يُسمح بالدخول");}
الشرط بين قوسين دائريين ( )، والأوامر بين قوسين معقوفين { }. المسافة البادئة ليست إجبارية هنا، لكنها ضرورية لتقرأ كودك.
٣الحلقات
// for: عدّاد من 1 إلى 5for (let i = 1; i <= 5; i++) { console.log("الحلقة رقم", i);} // while: ما دام الشرط صحيحًاlet money = 100;while (money > 30) { money = money - 30;}console.log("بقي", money);
حلقة for لها ثلاثة أجزاء بين القوسين مفصولة بفاصلة منقوطة:
| الجزء | المثال | معناه |
|---|---|---|
| البداية | let i = 1 | تُنفّذ مرة واحدة. |
| الشرط | i <= 5 | يُفحص قبل كل دورة. |
| الخطوة | i++ | بعد كل دورة: زد i بواحد (مثل i += 1). |
٤الدوال
function area(width, height) { return width * height;} console.log(area(4, 5));console.log(area(10, 2)); // دالة سهمية: كتابة مختصرة للدالة نفسهاconst square = (n) => n * n;console.log(square(6));
function مثل def، و return كما هي. والدالة السهمية => اختصار شائع جدًّا ستراه في الأكواد الحديثة وفي React لاحقًا.
٥الدالة مع الصفحة
الدوال هي ما يربط JavaScript بالصفحة: سنكتب دالة تُنفّذ عند الضغط على زر في الوحدة القادمة. هذا مثال صغير لما سيأتي:
<button onclick="greet()">اضغطني</button>function greet() { console.log("أهلًا! ضغطت الزر");}
توقّع وتحقّق
ما المقابل لـ elif في JavaScript؟
else if.ما المقابل لـ and؟
ما ناتج "5" === 5؟
كم مرة تتكرر for (let i = 0; i < 3; i++)؟
i = 0 و 1 و 2.الخلاصة
- الشرط بين
( )والأوامر بين{ }. else ifبدلelif، و && و || و ! بدلandوorوnot.- =
==تقارن القيمة والنوع، فاستخدمها دائمًا. for(let i = 0;i < n;i++) للعد، وwhileللتكرار بشرط.function name(a){return…; } أو المختصرة(a)=> …
تحدٍّ برمجي: جدول الضرب والتقدير
متوسطاكتب دالة grade(mark) تُرجع التقدير: «ممتاز» من 90، و«جيد» من 75، و«مقبول» من 60، وإلا «راسب». ثم استخدم حلقة for لطباعة تقدير الدرجات 95 و 80 و 65 و 40.
- دالة اسمها grade تأخذ الدرجة وتُرجع
(return)التقدير. - حلقة for تمر على الدرجات الأربع.
- يطبع كل سطر بالشكل: 95: ممتاز
👀 اعرض شكل الناتج المطلوب
grade(92)تُرجع «ممتاز».grade(75)تُرجع «جيد» وgrade(60)تُرجع «مقبول».grade(59)تُرجع «راسب».- يطبع الأسطر الأربعة بالشكل المطلوب.
💡 تلميح 1
💡 تلميح 2
{marks[i]}: ${grade(marks[i])}`);حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
function grade(mark) { if (mark >= 90) { return "ممتاز"; } else if (mark >= 75) { return "جيد"; } else if (mark >= 60) { return "مقبول"; } else { return "راسب"; }} const marks = [95, 80, 65, 40];for (let i = 0; i < marks.length; i++) { console.log(`${marks[i]}: ${grade(marks[i])}`);}