الوحدة 13: التعامل مع الأخطاء (Error Handling) في JavaScript

ahmed nabelByahmed nabel كورس JavaScript

إليك كورس كامل عن الوحدة 13: التعامل مع الأخطاء (Error Handling) في JavaScript، والذي يشرح كيفية التعامل مع الأخطاء في الكود بطريقة منظمة باستخدام الأدوات المختلفة التي تقدمها JavaScript.

الوحدة 13: التعامل مع الأخطاء (Error Handling) في JavaScript

الدرس 1: مقدمة في الأخطاء في JavaScript

  • المفهوم الأساسي: الأخطاء في البرمجة هي المشكلات التي قد تحدث أثناء تنفيذ الكود، مما يوقف سير العمل أو يؤدي إلى نتائج غير متوقعة. التعامل مع الأخطاء بفعالية يساعد في توفير تجربة مستخدم أفضل ويضمن استقرار التطبيق.
  • أنواع الأخطاء في JavaScript:
    1. الأخطاء النحوية (Syntax Errors): تحدث عندما يكون هناك خطأ في تركيب الكود (مثل نسيان الفواصل أو الأقواس).
    2. الأخطاء التشغيلية (Runtime Errors): تحدث أثناء تنفيذ الكود (مثل محاولة الوصول إلى قيمة غير موجودة).
    3. الأخطاء المنطقية (Logical Errors): تحدث عندما يكون الكود صحيحًا من الناحية النحوية والتشغيلية ولكن النتيجة النهائية غير صحيحة.

الدرس 2: كيفية التعامل مع الأخطاء باستخدام try...catch

  • المفهوم: try...catch هو الآلية الأساسية في JavaScript للتعامل مع الأخطاء. تستخدم هذه البنية لمحاولة تنفيذ الكود داخل جزء الـ try، وإذا حدث خطأ يتم الانتقال إلى جزء الـ catch لمعالجة الخطأ.
1. بناء الجملة (Syntax) لـ try...catch:
javascript
try {
// الكود الذي قد يتسبب في خطأ
let result = riskyFunction();
} catch (error) {
// الكود الذي يتم تنفيذه إذا حدث خطأ
console.error("حدث خطأ: " + error.message);
}
  • الشرح:
    • try: يحتوي على الكود الذي قد يسبب خطأ.
    • catch: يحتوي على الكود الذي يعالج الخطأ إذا حدث.
    • error: الكائن الذي يحتوي على تفاصيل الخطأ.
2. مثال عملي:
javascript
try {
let x = 10;
let y = 0;
let result = x / y; // سيؤدي إلى خطأ حسابي
console.log(result);
} catch (error) {
console.error("خطأ في الحساب: " + error.message);
}
  • في هذا المثال، القسمة على صفر ستؤدي إلى حدوث خطأ يتم التعامل معه في جزء الـ catch.

الدرس 3: استخدام finally لضمان تنفيذ الكود

  • المفهوم: finally هو جزء من بنية try...catch يتم تنفيذه دائمًا سواء حدث خطأ أم لا. يُستخدم لضمان تنفيذ بعض العمليات مثل إغلاق الملفات أو تحرير الموارد.
1. بناء الجملة لـ try...catch...finally:
javascript
try {
// الكود الذي قد يتسبب في خطأ
} catch (error) {
// معالجة الخطأ
} finally {
// الكود الذي يتم تنفيذه دائمًا
}
2. مثال عملي:
javascript
try {
let result = riskyFunction();
console.log(result);
} catch (error) {
console.error("حدث خطأ: " + error.message);
} finally {
console.log("تم تنفيذ الكود، سواء حدث خطأ أم لا.");
}
  • في هذا المثال، سيتم تنفيذ الكود في الـ finally بغض النظر عن حدوث خطأ أم لا.

الدرس 4: التعامل مع الأخطاء باستخدام throw

  • المفهوم: throw يُستخدم لإلقاء (رمي) خطأ مخصص يدويًا داخل الكود. يمكن أن يكون هذا مفيدًا عندما تريد التأكد من أن تطبيقك يعالج أخطاء معينة بشكل مناسب.
1. بناء الجملة لـ throw:
javascript
throw new Error("رسالة الخطأ");
2. مثال عملي:
javascript
function validateAge(age) {
if (age < 0) {
throw new Error("العمر لا يمكن أن يكون قيمة سلبية");
}
return age;
}

try {
let age = validateAge(-5);
console.log(age);
} catch (error) {
console.error("حدث خطأ: " + error.message);
}

  • في هذا المثال، إذا كان العمر أقل من صفر، سيتم رمي خطأ باستخدام throw.

الدرس 5: أنواع الأخطاء في JavaScript

  • المفهوم: يوجد العديد من أنواع الأخطاء في JavaScript يمكن التعامل معها بشكل مختلف.
    1. SyntaxError: يحدث عندما يكون تركيب الكود غير صحيح.
    2. ReferenceError: يحدث عندما يتم الإشارة إلى متغير غير معرف.
    3. TypeError: يحدث عندما يتم التعامل مع نوع بيانات غير مناسب.
    4. RangeError: يحدث عندما يتجاوز عدد معين الحد المسموح به (مثل محاولة تحديد طول مصفوفة أكبر من الحد المسموح به).
    5. URIError: يحدث عند وجود مشكلة في معالجة URI.
1. مثال على TypeError:
javascript
try {
let num = 10;
num.toUpperCase(); // خطأ لأن `toUpperCase` لا يعمل على الأرقام
} catch (error) {
if (error instanceof TypeError) {
console.error("حدث خطأ من النوع TypeError: " + error.message);
}
}

الدرس 6: استخدام أخطاء مخصصة (Custom Errors)

  • المفهوم: يمكنك إنشاء أخطاء مخصصة في JavaScript باستخدام الكائن Error أو وراثته لإنشاء أخطاء تخص التطبيق.
1. بناء الجملة لإنشاء خطأ مخصص:
javascript
class CustomError extends Error {
constructor(message) {
super(message);
this.name = "CustomError";
}
}

try {
throw new CustomError("حدث خطأ مخصص!");
} catch (error) {
console.error(error.name + ": " + error.message);
}

  • في هذا المثال، قمنا بإنشاء خطأ مخصص باستخدام CustomError ووراثته من الكائن Error.

الدرس 7: التعامل مع الأخطاء في البرمجة غير المتزامنة (Asynchronous Error Handling)

  • المفهوم: في JavaScript، عند التعامل مع البرمجة غير المتزامنة باستخدام الـ Promise أو async/await، يمكن أن تحدث الأخطاء أثناء التنفيذ أيضًا. يجب التعامل معها باستخدام طرق خاصة.
1. التعامل مع الأخطاء في الـ Promise:
javascript
let promise = new Promise((resolve, reject) => {
let success = false;
if (success) {
resolve("العملية ناجحة");
} else {
reject("حدث خطأ");
}
});

promise.then((message) => {
console.log(message);
}).catch((error) => {
console.error("خطأ: " + error);
});

2. التعامل مع الأخطاء باستخدام async/await:
javascript
async function getData() {
try {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error("حدث خطأ أثناء جلب البيانات: " + error.message);
}
}

getData();

  • في هذا المثال، يتم استخدام async/await لإجراء طلب HTTP مع التعامل مع الأخطاء باستخدام try...catch.

الدرس 8: تلخيص الوحدة

  • التعامل مع الأخطاء: يمكنك استخدام try...catch لالتقاط الأخطاء وتنفيذ الكود الاحتياطي. كما يمكن استخدام finally لضمان تنفيذ بعض العمليات بغض النظر عن وجود الخطأ.
  • استخدام throw: يمكنك رمي الأخطاء يدويًا باستخدام throw.
  • أنواع الأخطاء: تعرف على أنواع الأخطاء الشائعة مثل SyntaxError و TypeError و ReferenceError.
  • الأخطاء غير المتزامنة: استخدام Promise و async/await للتعامل مع الأخطاء في البرمجة غير المتزامنة.

المشاريع العملية للوحدة 13:

  • مشروع 1: بناء تطبيق يقوم بإجراء العمليات الحسابية والتعامل مع الأخطاء مثل القسمة على صفر.
  • مشروع 2: إنشاء تطبيق يطلب بيانات من API ويتعامل مع الأخطاء مثل فشل الاتصال أو استجابة غير صالحة.
  • مشروع 3: إنشاء تطبيق مخصص لرمي الأخطاء المخصصة واستخدامها في عمليات التحقق من المدخلات.
    ahmed nabel

    Similar Posts

    الوحدة 14: أفضل الممارسات وأسلوب كتابة الكود (Best Practices and Code Style) في JavaScript

    الوحدة 14: أفضل الممارسات وأسلوب كتابة الكود (Best Practices and Code Style) في JavaScript

    ahmed nabelByahmed nabel كورس JavaScript

    إليك كورس كامل عن الوحدة 14: أفضل الممارسات وأسلوب كتابة الكود (Best Practices and Code…

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *