JavaScript Errors

<< مبحث قبلی مبحث بعدی >>

try و catch

هنگام اجرای کدهای جاوا اسکریپت، خطاهای متفاوتی ممکن است رخ دهد. این خطاها ممکن است مربوط به خود کد باشد و توسط برنامه‌نویس ایجاد شود، ممکن است به خاطر ورودی اشتباه باشد و یا به دلایل غیرقابل پیش‌بینی روی دهد.

با استفاده از عبارت try می‌توانید یک بلوک کد را برای خطاهای احتمالی مورد آزمایش قرار دهید. و با استفاده از عبارت catch می‌توانید بلوک کدی را تعریف کنید که در صورت وجود خطا در بلوک try اجرا شود. در حقیقت این دو به همراه هم می‌آیند:

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

مثال:


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Error Handling </h2>
    <p> This example demonstrates how to use catch to diplay an error. </p>
    <p id = "demo"> </p>
    <script>
      try {
        adddlert("Welcome guest!");
      }
      catch(err) {
        document.getElementById("demo").innerHTML = err.message;
      }
    </script>
  </body>
</html>

خروجی:

JavaScript Throw Errors

زمانی که خطا روی دهد، جاوا اسکریپت اجرای برنامه را متوقف و یک پیام خطا را تولید می‌کند. در اصطلاح فنی به این عمل می‌گویند: JavaScript will throw an exception (throw an error).

در حقیقت جاوا اسکریپت یک شیء خطا را با دو خصوصیت اسم و پیام ایجاد می‌کند.

عبارت throw

عبارت throw این امکان را به شما می‌دهد که خطای دلخواه خودتان را تولید کنید. به اصطلاح فنی خودتان عمل throw exception را انجام دهید. خطای ایجاد شده می‌تواند رشته، عدد، بولین و یا یک شیء باشد.

throw "Too big"; // throw a text
throw 500; // throw a number

اگر از throw به همراه try و catch استفاده کنید، می‌توانید جریان برنامه را کنترل و پیام خطای مورد نظر خود را تولید کنید.

یک مثال از اعتبارسنجی ورودی

در مثال زیر ورودی مورد سنجش قرار می‌گیرد و اگر مقدار آن اشتباه باشد، یک خطا ایجاد می‌شود.


<!DOCTYPE HTML>
<html>
  <body>
    <h2>JavaScript try catch </h2>
    <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() {
        const message = document.getElementById("p01");
        message.innerHTML = "";
        let 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>

خروجی: در کادر مشخص شده مقداری را وارد کنید و سپس دکمه test input را کلیک کنید و نتیجه را مشاهده نمائید.

JavaScript try catch

Please input a number between 5 and 10:

کد بالا تنها یک مثال ساده است. مرورگرهای جدید اغلب از ترکیب جاوا اسکریپت با اعتبارسنجی‌های داخلی HTML استفاده می‌کنند. در فصل‌های بعدی بیشتر در مورد اعتبارسنجی بحث خواهیم کرد.

عبارت finally

عبارت finally به شما این امکان را می‌دهد که بعد از try و catch فارغ از نتیجه یک بلوک کد را اجرا کنید.

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
}

مثال:


<!DOCTYPE HTML>
<html>
  <body>
    <h2>JavaScript try catch </h2>
    <p> Please input a number between 5 and 10: </p>
    <input id="demo1" type="text" />
    <button type="button" onclick="myFunction1()"> Test Input </button>
    <p id = "p02"> </p>
    <script>
      function myFunction() {
        const message = document.getElementById("p01");
        message.innerHTML = "";
        let 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 " + err;
        }
        finally {
          document.getElementById("demo").value = "";
        }
      }
    </script>
  </body>
</html>

خروجی: در کادر مشخص شده مقداری را وارد کنید و سپس دکمه test input را کلیک کنید و نتیجه را مشاهده نمائید.

JavaScript try catch

Please input a number between 5 and 10:

The Error Object

جاوا اسکریپت یک شیء خطای درونی (built in error object) دارد که در مورد خطای ایجاد شده اطلاعاتی را فراهم می‌آورد. شیء خطا دو خصوصیت مفید را فراهم می‌کند: اسم و پیام.

6 مقدار متفاوت توسط خصوصیت اسم خطا می‌تواند برگردانده شود:

اسم خطا توضیح
EvalError خطایی در تابع eval() رخ داده است.
RangeError عددی "خارج از محدوده" اتفاق افتاده است.
ReferenceError یک رفرنس غیرمجاز رخ داده است.
SyntaxError یک خطای نوشتاری رخ داده است.
TypeError یک خطای نوع رخ داده است.
URIError یک خطا در encodeURI() رخ داده است.

در زیر هر یک از این خطاها را بررسی می‌کنیم.

Eval Error

در نسخه‌های جدیدتر جاوا اسکریپت این خطا به کار نمی‌رود و به جای آن از خطای SyntaxError استفاده می‌شود.

Range Error

هرگاه از عددی که خارج از محدوده مقادیر مجاز است استفاده کنید این خطا ایجاد می‌شود. برای مثال در کد زیر این خطا به دلیل آنکه نمی‌توان یک عدد را با 500 رقم نوشت ایجاد می‌شود.


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Errors </h2>
    <p> You cannot set the number of significant digits of a number to 500: </p>
    <p id = "demo"> </p>
    <script>
      let num = 1;
      try {
        num.toPrecision(500);
      }
      catch(err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

خروجی:

Reference Error

این خطا زمانی ایجاد می‌شود که به متغیری که ایجاد نشده رفرنس (ارجاع) بدهید.


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Errors </h2>
    <p> You cannot use the value of a non-existing variable: </p>
    <p id = "demo"> </p>
    <script>
      let x = 5;
      try {
        x = y + 1;
      }
      catch(err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

خروجی:

Syntax Error

اگر بخواهید کدی که دارای اشتباه نوشتاری است را محاسبه (evaluate) کنید این خطا ایجاد می‌شود.


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Errors </h2>
    <p> You cannot evaluate code that contains a syntax error: </p>
    <p id = "demo"> </p>
    <script>
      try {
        eval("alert('Hello)");
      }
      catch(err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

خروجی:

Type Error

اگر از مقداری که خارج از محدوده نوع مورد انتظار است استفاده کنید این خطا به وجود می‌آید.


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Errors </h2>
    <p> You cannot convert a number to upper case: </p>
    <p id = "demo"> </p>
    <script>
      let num = 1;
      try {
        num.toUpperCase();
      }
      catch(err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

خروجی:

URI (Uniform Resource Identifier) Error

اگر از کاراکترهای غیرمجاز در تابع URI استفاده کنید، این خطا به وجود می‌آید.


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Errors </h2>
    <p> Some characters cannot be decoded with decodeURI(): </p>
    <p id = "demo"> </p>
    <script>
      try {
        decodeURI("%%%");
      }
      catch(err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

خروجی:

جهت مشاهده رفرنس کامل خطاها اینجا را کلیک کنید.

<< مبحث قبلی مبحث بعدی >>