با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
در این جلسه قصد داریم تا مدیریت خطا در جاوا اسکریپت JavaScript و دستورات try و catch در جاوا اسکریپت را به شما آموزش دهیم.
استفاده از مدیریت کننده های خطا در جاوا اسکریپت باعث می شود تا اگر خطایی در برنامه رخ داد، اجرای برنامه متوقف نشود و برنامه واکنش مناسبی را نشان دهد.
برای مدیریت خطا در جاوا اسکریپت از چند دستور استفاده خواهیم کرد:
هنگام اجرای کد جاوا اسکریپت ممکن است خطاهای مختلف رخ دهد.
خطاها می توانند خطاهای برنامه نویسی شده توسط برنامه نویسان، اشتباهات مربوط به ورود اشتباه و سایر موارد غیر قابل پیش بینی باشد.
1 2 3 4 5 6 7 8 9 10 | <p id="demo"></p> <script> try { adddlert("Welcome guest!"); } catch(err) { document.getElementById("demo").innerHTML = err.message; } </script> |
نکته : جاوا اسکریپت adddlert را به عنوان یک خطا تفسیر کرده و catch را برای اجرای آن اجرا می کند.
دستور try این امکان را به ما می دهد تا بلوکی را تعریف کنیم تا خطا های احتمالی در آن رخ دهد.
دستور catch این امکان را به ما می دهد تا بلوکی را تعریف کنیم تا پردازش و مدیریت خطا در آن انجام شود.
ساختار دستور:
1 2 3 4 5 6 | try { Block of code to try } catch(err) { Block of code to handle errors } |
وقتی خطایی در برنامه رخ می دهد، جاوا اسکریپت برنامه را متوقف کرده و پیغام حزا تولید میکند.
در واقع یک خطا را پرتاب throw می کند.
نکته : جاوا اسکریپت یک شی Error با دو ویژگی: نام و پیام ایجاد خواهد کرد.
دستور throw در جاوا اسکریپت به شما این امکان را می دهد تا یک خطای سفرشی ایجاد کنید. (در واقع شما با دستور throw به جاوا اسکریپت می گویید که این قطعه کد ممکن است خطا تولید کند)
1 2 | throw "Too big"; // throw a text throw 500; // throw a number |
با استفاده از این دستور به همراه try و catch می توانید جریان اجرای برنامه را کنترل کرده و یک پیغام خطا سفاشی شده بسازید.
در این مثال ما یک فیلد ورودی را بررسی می کنیم. اگر مقدار ورودی استباه باشد یک خطا یا استثنا (err) پرتاب می شود.
استثنا (err) در بلوک catch گرفته شده و پیغام خطا نمایش داده می شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <body> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="p01"></p> <script> function myFunction() { var message, x; message = document.getElementById("p01"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "empty"; if(isNaN(x)) throw "not a number"; x = Number(x); if(x < 5) throw "too low"; if(x > 10) throw "too high"; } catch(err) { message.innerHTML = "Input is " + err; } } </script> </body> </html> |
مثال فوق یک مثال ساده بود.
در مرورگر های مدرن امروزی ما اغلب از جاوا اسکریپت و HTML برای کنترل ورودی و مدیریت استثنا استفاده می کنیم:
1 | <input id="demo" type="number" min="5" max="10" step="1" |
از دستور finally برای اجرا شدن قطعه کدی بعد از اجرای بلوک های try و catch استفاده می کنیم.
ساختار دستور:
1 2 3 4 5 6 7 8 9 | try { Block of code to try } catch(err) { Block of code to handle errors } finally { Block of code to be executed regardless of the try / catch result } |
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function myFunction() { var message, x; message = document.getElementById("p01"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "is empty"; if(isNaN(x)) throw "is not a number"; x = Number(x); if(x > 10) throw "is too high"; if(x < 5) throw "is too low"; } catch(err) { message.innerHTML = "Error: " + err + "."; } finally { document.getElementById("demo").value = ""; } } |
جاوا اسکریپت یک شئ خطا دارد که اطلاعاتی را پیرامون خطا به ما می دهد. (در مثال بالا این شئ err نام دارد)
این شئ دو پروپرتی دارد: name و message
توضیحات | Property |
نام خطا رخ داده را بر می گرداند | name |
پیغام خطا را بر می گرداند. | message |
پروپرتی name 6 نوع مقدار مختلف را می تواند بر گرداند:
توضیحات | نام خطا |
یک خطا در تابع ()eval رخ داده است | EvalError |
عدد خارج از محدوده | RangeError |
مرجع refrence غیر مجاز | ReferenceError |
خطای سینتکسی (ساختار دستوری) | SyntaxError |
خطا ی نوع | TypeError |
یک خطا در تابع ()encodeURI رخ داده است | URIError |
شش مورد از مقادیر مختلف در زیر شرح داده شده است:
یک EvalError خطایی را در تابع ()eval نشان می دهد.
نکته : نسخه های جدیدتر جاوا اسکریپت هیچ EvalError را اجرا نمی کنند. به جای آن از SyntaxError استفاده کنید.
RangeError اگر شما از یک شماره خارج از دامنه مقادیر قانونی استفاده کنید، اجرا می شود.
به عنوان مثال: شما نمی توانید تعداد رقم های قابل توجهی از یک عدد را به ۵۰۰ تنظیم کنید.
1 2 3 4 5 6 7 | var num = 1; try { num.toPrecision(500); // A number cannot have 500 significant digits } catch(err) { document.getElementById("demo").innerHTML = err.name; } |
اگر از مرجع یک متغیر که اعلام نشده است استفاده کنید ReferenceError اجرا می شود:
1 2 3 4 5 6 7 | var x; try { x = y + 1; // y cannot be referenced (used) } catch(err) { document.getElementById("demo").innerHTML = err.name; } |
اگر شما سعی می کنید کد را با یک خطای سینتکس ارزیابی کنید، یک SyntaxError رخ می دهد.
1 2 3 4 5 6 | try { eval("alert('Hello)"); // Missing ' will produce an error } catch(err) { document.getElementById("demo").innerHTML = err.name; } |
اگر از یک مقدار خارج از محدوده انواع مورد انتظار استفاده می کنید، TypeError رخ می دهد:
1 2 3 4 5 6 7 | var num = 1; try { num.toUpperCase(); // You cannot convert a number to upper case } catch(err) { document.getElementById("demo").innerHTML = err.name; } |
اگر شما از کاراکترهای غیرقانونی در یک تابع URI استفاده کنید، URIError رخ می دهد:
1 2 3 4 5 6 | try { decodeURI("%%%"); // You cannot URI decode percent signs } catch(err) { document.getElementById("demo").innerHTML = err.name; } |
موزیلا و مایکروسافت برخی ویژگی های آبجکت خطای غیر استاندارد را بیان می کنند:
fileName (موزیلا)
lineNumber (موزیلا)
ستون شماره (موزیلا)
پشته (موزیلا)
توضیحات (مایکروسافت)
شماره (مایکروسافت)
از این ویژگی ها در وب سایت های عمومی استفاده نکنید. آنها در همه مرورگرها کار نخواهند کرد.
جلسه مدیریت خطا در جاوا اسکریپت JavaScript نیز به پایان رسید.
در جلسه بعدی به آموزش استفاده از Strict Mode در جاوا اسکریپت خواهیم پرداخت. با ما همراه باشید.