هذا الدرس من الدورة التدريبية: تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript
الدرس: تنفيذ بعد وقت معين مع الدالة setTimeout
المدة: 24 دقائق
وصف مختصر:
شرح الدوال المدمجة في JavaScript مع مثال تطبيقي في هذا الدرس، سنتعرف على الدوال المدمجة في JavaScript وكيفية استخدامها بفعالية. هكذا نستخدم...
وصف الدرس
شرح الدوال المدمجة في JavaScript مع مثال تطبيقي
في هذا الدرس، سنتعرف على الدوال المدمجة في JavaScript وكيفية استخدامها بفعالية. هكذا نستخدم بعض الدوال المدمجة مثل `alert` و`console.log` و`setTimeout`، ونرى كيف يمكن استخدامها في تطبيق عملي.
الدوال المدمجة الأساسية
الدوال المدمجة هي دوال توفرها JavaScript لتسهيل العديد من العمليات. هكذا ، الدالة `alert` تستخدم لعرض رسالة منبثقة، بينما تستخدم الدالة `console.log` لطباعة رسائل في وحدة التحكم (Console).
مثال تطبيقي: التحقق من العمر واقتراح الطعام
هكذا يوضح المثال : كيفية استخدام الدوال المدمجة مع دوال مخصصة. لذلك، سنطلب من المستخدم إدخال عمره، ثم نقترح عليه نوع الطعام المناسب بناءً على عمره باستخدام دالة مؤقتة (asynchronous function) تسمى `setTimeout`.
```javascript
var checkAge = prompt('What is your age??'),
age = Number(checkAge);
if (checkAge != null && checkAge != "" && !isNaN(age) && typeof(age) == "number") {
document.write('please wait ...');
function callBackTimer(age) {
suggestFood(age);
}
setTimeout(callBackTimer, 1000, 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. ثم نعرف دالة `callBackTimer` التي تستدعي الدالة `suggestFood` بعد تأخير زمني قدره 1000 مللي ثانية (1 ثانية) باستخدام `setTimeout`.
5. هكذا نعرف دالة `suggestFood` التي تقترح نوع الطعام بناءً على العمر المدخل:
- إذا كان العمر أكبر من 20 نقترح 4 وجبات من اللحم و2 من البيض والسلطة في الأسبوع.
- وإذا كان العمر بين 13 و20 نقترح الحليب والبيض والفواكه والبرتقال والموز واللحم والدجاج.
- كان العمر بين 1 و12 ننصح بالسؤال عن الطعام الصحي من الطبيب.
- هكذا إذا كان المدخل غير صحيح نعرض رسالة بيانات غير صالحة.
الخلاصة
استخدام الدوال المدمجة في JavaScript يمكن أن يجعل البرامج أكثر كفاءة وسهولة في الكتابة. من خلال هذا المثال، رأينا كيفية استخدام دوال مثل `prompt` و`setTimeout` و`alert` مع دوال مخصصة لإنشاء تطبيق متكامل يقوم بالتحقق من عمر المستخدم واقتراح الطعام المناسب بناءً على ذلك.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي تنفيذ بعد وقت معين مع الدالة setTimeout
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية المستخدمة
ملحقات ال PDF
الدروس والاختبارات لتعلم هذه الدورة التدريبية : تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript