تنفيذ دالة بشكل متكرر كل مدة من الوقت setInterval

الدرس: تنفيذ دالة بشكل متكرر كل مدة من الوقت setInterval

المدة: 13 دقائق

وصف مختصر:

 شرح الدوال المدمجة في JavaScript مع أمثلة تطبيقية في هذا الدرس، سنتعرف على الدوال المدمجة في JavaScript وكيفية استخدامها بفعالية. سنقوم باستخدام...

وصف الدرس

 شرح الدوال المدمجة في JavaScript مع أمثلة تطبيقية


في هذا الدرس، سنتعرف على الدوال المدمجة في JavaScript وكيفية استخدامها بفعالية. سنقوم باستخدام بعض الدوال المدمجة مثل `alert` و`console.log` و`setTimeout` و`setInterval`، ونرى كيف يمكن تطبيقها في سيناريو عملي.

الدوال المدمجة الأساسية


الدوال المدمجة هي دوال توفرها JavaScript لتسهيل العديد من العمليات. هكذا ، الدالة `alert` تُستخدم لعرض رسالة منبثقة، بينما  تُستخدم الدالة `console.log` لطباعة رسائل في وحدة التحكم (Console).
 مثال تطبيقي: التحقق من العمر واقتراح الطعام

هكذا يوضح المثال ، كيفية استخدام الدوال المدمجة مع دوال مخصصة. هكذا، سنطلب من المستخدم إدخال عمره، بينما نقترح عليه نوع الطعام المناسب بناءً على عمره باستخدام دوال مؤقتة (asynchronous functions) مثل `setTimeout` و`setInterval`.

```javascript
var checkAge = prompt('What is your age??'),
age = Number(checkAge);

if (checkAge != null && checkAge != "" && !isNaN(age) && typeof(age) == "number") {
var secounds = 5,
miliSecs = secounds * 1000;

var _timerElement = document.getElementById('timerElement');
_timerElement.innerHTML = secounds;

var waitTextInterval = setInterval(function () {
_timerElement.innerHTML = _timerElement.innerHTML - 1;
}, 1000);

function callBackTimer(age) {
suggestFood(age);
clearInterval(waitTextInterval);
}

setTimeout(callBackTimer, miliSecs, age);
}

function suggestFood(age = 12) {
var message = '';

if (typeof(age) != "number") {
message = 'The age is not a number';
} else if (age > 20) {
message = 'You can eat 4 meals of meat and 2 of eggs and salad per week';
} else if (age > 12) {
message = 'You should have milk, eggs, fruit, orange, banana, meat, chicken';
} else if (age >= 1) {
message = 'You should ask the doctor about the health food for your kids';
} else {
message = 'Invalid data';
}

alert(message);
}
```
 شرح الكود بالتفصيل

1. نطلب من المستخدم إدخال عمره باستخدام الدالة `prompt`.

2. ثم نحول المدخل إلى رقم باستخدام `Number` وذلك نتحقق من صحة المدخل.
3.إذا كان المدخل صحيحًا نعرض رسالة "please wait ..." للمستخدم.
4. حيثما نعرف عدد الثواني ونحولها إلى ميلي ثانية.
5. هكذا نقوم بتحديث عنصر HTML ليعرض عدد الثواني المتبقية باستخدام `setInterval`.
6. بينما نستدعي الدالة `callBackTimer` التي تستدعي بدورها الدالة `suggestFood` لاقتراح الطعام المناسب بناءً على العمر المدخل، ونوقف المؤقت `setInterval`.
7.كذلك نعرف دالة `suggestFood` التي تقترح نوع الطعام بناءً على العمر المدخل:
-فاذا كان العمر أكبر من 20 نقترح 4 وجبات من اللحم و2 من البيض والسلطة في الأسبوع.
-إذا كان العمر بين 13 و20 نقترح الحليب والبيض والفواكه والبرتقال والموز واللحم والدجاج.
-بينما كان العمر بين 1 و12 ننصح بالسؤال عن الطعام الصحي من الطبيب.
-حيثما كان المدخل غير صحيح نعرض رسالة بيانات غير صالحة.
الخلاصة 

هكذا استخدام الدوال المدمجة في JavaScript يمكن أن يجعل البرامج أكثر كفاءة وسهولة في الكتابة. هكذا ، رأينا كيفية استخدام دوال مثل `prompt` و`setTimeout` و`setInterval` و`alert` مع دوال مخصصة لإنشاء تطبيق متكامل يقوم بالتحقق من عمر المستخدم واقتراح الطعام المناسب بناءً على ذلك.

الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

فيديو الدرس التعليمي تنفيذ دالة بشكل متكرر كل مدة من الوقت setInterval

المصادر

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر

الأوامر البرمجية المستخدمة

ملحقات ال PDF

الدروس والاختبارات لتعلم هذه الدورة التدريبية : تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript

has been added to the cart. View Cart