امتحان JS 5: البرمجة غير المتزامنة و APIs (10 تمارين مركبة)
امتحان JS 5: البرمجة غير المتزامنة و APIs
اختبر قدرتك على التعامل مع العمليات غير المتزامنة، جلب البيانات من الخوادم، والتعامل مع JSON.
تمرين 1
المؤقتات (SetTimeout)
قم بتنفيذ كود بعد فترة زمنية:
- استخدم `setTimeout` لطباعة "مرحباً" بعد 3 ثوانٍ.
- تأكد من كتابة الدالة بداخل `setTimeout` كدالة سهمية.
الحل
setTimeout(() => {
console.log("مرحباً");
}, 3000);
تمرين 2
المؤقتات المتكررة (SetInterval)
أنشئ عداداً:
- استخدم `setInterval` لطباعة رقم يتزايد كل ثانية (1, 2, 3...).
- قم بإيقاف العداد (clearInterval) عندما يصل الرقم إلى 5.
الحل
let count = 0;
const intervalId = setInterval(() => {
count++;
console.log(count);
if (count === 5) {
clearInterval(intervalId);
}
}, 1000);
تمرين 3
الوعود (Promises)
أنشئ وعداً بسيطاً:
- أنشئ `Promise` يتحقق من متغير `success`.
- إذا كان `true`، قم بحل الوعد (`resolve`) برسالة "نجاح".
- إذا كان `false`، قم برفض الوعد (`reject`) برسالة "فشل".
- استخدم `.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:
- لديك نص JSON: `'{"name": "Ali", "age": 25}'`.
- حوله إلى كائن JavaScript باستخدام `JSON.parse()`.
- اطبع خاصية `name` من الكائن الناتج.
الحل
const jsonString = '{"name": "Ali", "age": 25}';
const user = JSON.parse(jsonString);
console.log(user.name); // Ali
تمرين 5
تحويل إلى JSON (JSON Stringify)
حول كائناً إلى نص JSON:
- لديك كائن `product = { id: 1, title: "Phone" }`.
- حوله إلى سلسلة نصية JSON باستخدام `JSON.stringify()`.
- اطبع النتيجة.
الحل
const product = { id: 1, title: "Phone" };
const jsonString = JSON.stringify(product);
console.log(jsonString); // '{"id":1,"title":"Phone"}'
تمرين 6
جلب البيانات (Fetch API - GET)
اجلب بيانات من رابط وهمي:
- استخدم `fetch` لجلب البيانات من `https://api.example.com/data`.
- حول الاستجابة إلى JSON.
- اطبع البيانات في الكونسول.
الحل
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:
- أنشئ دالة غير متزامنة `async function getData()`.
- استخدم `await` لانتظار الـ fetch وتحويل الـ json.
- ضع الكود داخل كتلة `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)
أرسل بيانات إلى الخادم:
- استخدم `fetch` لإرسال طلب `POST` إلى `https://api.example.com/users`.
- حدد الـ `method` والـ `headers` (Content-Type: application/json).
- أرسل الجسم (`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)
نفذ عدة وعود في نفس الوقت:
- لديك وعدين `p1` و `p2`.
- استخدم `Promise.all([p1, p2])` لانتظار اكتمال الاثنين معاً.
- اطبع النتائج عند الانتهاء.
الحل
const p1 = Promise.resolve("الأول");
const p2 = Promise.resolve("الثاني");
Promise.all([p1, p2]).then(results => {
console.log(results); // ["الأول", "الثاني"]
});
تمرين 10
التخزين المحلي (Local Storage)
احفظ بيانات في المتصفح:
- احفظ قيمة "dark" في مفتاح "theme" باستخدام `localStorage.setItem`.
- اقرأ القيمة المحفوظة واطبعها باستخدام `localStorage.getItem`.
الحل
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
console.log(theme); // dark