امتحان JS 5: البرمجة غير المتزامنة و APIs (10 تمارين مركبة)

امتحان JS 5: البرمجة غير المتزامنة و APIs

اختبر قدرتك على التعامل مع العمليات غير المتزامنة، جلب البيانات من الخوادم، والتعامل مع JSON.

تمرين 1 المؤقتات (SetTimeout)

قم بتنفيذ كود بعد فترة زمنية:

  1. استخدم `setTimeout` لطباعة "مرحباً" بعد 3 ثوانٍ.
  2. تأكد من كتابة الدالة بداخل `setTimeout` كدالة سهمية.
الحل
setTimeout(() => {
    console.log("مرحباً");
}, 3000);
تمرين 2 المؤقتات المتكررة (SetInterval)

أنشئ عداداً:

  1. استخدم `setInterval` لطباعة رقم يتزايد كل ثانية (1, 2, 3...).
  2. قم بإيقاف العداد (clearInterval) عندما يصل الرقم إلى 5.
الحل
let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log(count);
    if (count === 5) {
        clearInterval(intervalId);
    }
}, 1000);
تمرين 3 الوعود (Promises)

أنشئ وعداً بسيطاً:

  1. أنشئ `Promise` يتحقق من متغير `success`.
  2. إذا كان `true`، قم بحل الوعد (`resolve`) برسالة "نجاح".
  3. إذا كان `false`، قم برفض الوعد (`reject`) برسالة "فشل".
  4. استخدم `.then()` و `.catch()` للتعامل مع النتيجة.
الحل
const myPromise = new Promise((resolve, reject) => {
    const success = true;
    if (success) {
        resolve("نجاح");
    } else {
        reject("فشل");
    }
});

myPromise
    .then(msg => console.log(msg))
    .catch(err => console.error(err));
تمرين 4 تحويل البيانات (JSON Parsing)

تعامل مع بيانات JSON:

  1. لديك نص JSON: `'{"name": "Ali", "age": 25}'`.
  2. حوله إلى كائن JavaScript باستخدام `JSON.parse()`.
  3. اطبع خاصية `name` من الكائن الناتج.
الحل
const jsonString = '{"name": "Ali", "age": 25}';
const user = JSON.parse(jsonString);

console.log(user.name); // Ali
تمرين 5 تحويل إلى JSON (JSON Stringify)

حول كائناً إلى نص JSON:

  1. لديك كائن `product = { id: 1, title: "Phone" }`.
  2. حوله إلى سلسلة نصية JSON باستخدام `JSON.stringify()`.
  3. اطبع النتيجة.
الحل
const product = { id: 1, title: "Phone" };
const jsonString = JSON.stringify(product);

console.log(jsonString); // '{"id":1,"title":"Phone"}'
تمرين 6 جلب البيانات (Fetch API - GET)

اجلب بيانات من رابط وهمي:

  1. استخدم `fetch` لجلب البيانات من `https://api.example.com/data`.
  2. حول الاستجابة إلى JSON.
  3. اطبع البيانات في الكونسول.
الحل
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
تمرين 7 الدوال غير المتزامنة (Async/Await)

أعد كتابة كود Fetch باستخدام Async/Await:

  1. أنشئ دالة غير متزامنة `async function getData()`.
  2. استخدم `await` لانتظار الـ fetch وتحويل الـ json.
  3. ضع الكود داخل كتلة `try...catch` لمعالجة الأخطاء.
الحل
async function getData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();
تمرين 8 إرسال البيانات (Fetch API - POST)

أرسل بيانات إلى الخادم:

  1. استخدم `fetch` لإرسال طلب `POST` إلى `https://api.example.com/users`.
  2. حدد الـ `method` والـ `headers` (Content-Type: application/json).
  3. أرسل الجسم (`body`) كبيانات JSON: `{ name: "Ali" }`.
الحل
fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: "Ali" })
})
.then(res => res.json())
.then(data => console.log(data));
تمرين 9 انتظار وعود متعددة (Promise.all)

نفذ عدة وعود في نفس الوقت:

  1. لديك وعدين `p1` و `p2`.
  2. استخدم `Promise.all([p1, p2])` لانتظار اكتمال الاثنين معاً.
  3. اطبع النتائج عند الانتهاء.
الحل
const p1 = Promise.resolve("الأول");
const p2 = Promise.resolve("الثاني");

Promise.all([p1, p2]).then(results => {
    console.log(results); // ["الأول", "الثاني"]
});
تمرين 10 التخزين المحلي (Local Storage)

احفظ بيانات في المتصفح:

  1. احفظ قيمة "dark" في مفتاح "theme" باستخدام `localStorage.setItem`.
  2. اقرأ القيمة المحفوظة واطبعها باستخدام `localStorage.getItem`.
الحل
localStorage.setItem("theme", "dark");

const theme = localStorage.getItem("theme");
console.log(theme); // dark
المحرر الذكي

اكتب الكود وشاهد النتيجة فوراً

جرب الآن مجاناً
قناة ديف عربي

تابع أحدث الدروس والتحديثات مباشرة على واتساب

انضم الآن