Javascript

Errors di JavaScript: Cara Mengatasi dan Contoh Codenya

Pernyataan try memungkinkan kita untuk menguji blok kode terhadap error atau kesalahan.

Pernyataan catch memungkinkan Anda menangani error tersebut.

Pernyataan throw memungkinkan Anda membuat kesalahan khusus.

Pernyataan finally memungkinkan untuk mengeksekusi kode, setelah try dan throw , apa pun hasilnya.

Kesalahan Akan Terjadi!

Saat menjalankan kode JavaScript, kesalahan apapun dapat terjadi.

Kesalahan dapat berupa kesalahan pengkodean yang dilakukan oleh programmer, kesalahan karena input yang salah, dan hal-hal yang tidak terduga lainnya.

Contoh:
Dalam contoh ini kami telah menulis peringatan sebagai adddlert untuk sengaja menghasilkan error.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p> Contoh ini menunjukkan cara menggunakan <b> catch </b> untuk menampilkan kesalahan. </p>
<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>

JavaScript menangkap adddlert sebagai kesalahan, dan menjalankan kode catch untuk menanganinya.

Try dan Catch JavaScript

Pernyataan try memungkinkan Anda untuk menentukan blok kode yang akan diuji terhadap kesalahan saat sedang dijalankan.

Pernyataan catch memungkinkan Anda untuk menentukan blok kode yang akan dieksekusi, jika terjadi kesalahan di blok percobaan.

Pernyataan JavaScript try dan catch digunakan secara berpasangan:

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

JavaScript Throws Error

Saat terjadi kesalahan, JavaScript biasanya akan berhenti dan menghasilkan pesan kesalahan.

Istilah teknis untuk ini adalah: JavaScript akan mengeluarkan pengecualian (memunculkan kesalahan).

JavaScript sebenarnya akan membuat objek Error dengan dua properti: nama dan pesan.

Statement throw

Pernyataan throw memungkinkan Anda membuat kesalahan khusus.

Secara teknis Anda bisa melempar pengecualian (membuat kesalahan).

Pengecualian dapat berupa String JavaScript, Angka, Boolean, atau Objek:

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

Jika Anda menggunakan throw bersama dengan try dan catch, Anda dapat mengontrol flow program dan menghasilkan pesan kesalahan khusus.

Contoh Validasi Input

Contoh ini membahas tentang inputan. Jika nilainya salah, pengecualian (err) dilemparkan.

Pengecualian (err) ditangkap oleh pernyataan catch dan pesan kesalahan kustom ditampilkan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Harap masukkan angka antara 5 dan 10: </p>
<input id="demo" type="text">
<button type="button" >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 Validation

Kode di atas hanyalah sebuah contoh.

Browser modern akan sering menggunakan kombinasi JavaScript dan validasi HTML bawaan, menggunakan aturan validasi yang telah ditentukan sebelumnya yang ditentukan dalam atribut HTML:

<input id="demo" type="number" min="5" max="10" step="1">

Pernyataan finally

Pernyataan finally memungkinkan Anda mengeksekusi kode, setelah try dan catch, apa pun hasilnya.

Sintaks:

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
}

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Harap masukkan angka antara 5 dan 10: </p>
<input id="demo" type="text">
<button type="button" >

Objek Kesalahan

JavaScript memiliki objek kesalahan bawaan yang memberikan informasi kesalahan saat terjadi kesalahan.

Objek kesalahan menyediakan dua properti yang berguna: nama dan pesan.

Properti Objek Kesalahan

PropertyDescription
nameMengatur atau mengembalikan nama kesalahan
messageMengatur atau mengembalikan pesan kesalahan (string)

Nilai dari Nama Kesalahan

Enam nilai berbeda dapat dikembalikan oleh properti nama kesalahan:

Error NameDeskripsi
EvalErrorTerjadi kesalahan dalam fungsi eval ()
RangeErrorTelah terjadi angka “di luar jangkauan”
ReferenceErrorReferensi ilegal telah terjadi
SyntaxErrorTerjadi kesalahan sintaks
TypeErrorTelah terjadi kesalahan tipe
URIErrorTerjadi kesalahan dalam encodeURI()

Enam nilai berbeda dijelaskan di bawah ini.

Eval Error

EvalError menunjukkan kesalahan dalam fungsi eval().

Versi JavaScript yang lebih baru tidak menampilkan EvalError. Gunakan SyntaxError sebagai gantinya.

Range Error

RangeError dilemparkan jika Anda menggunakan angka yang berada di luar rentang nilai legal.

Misalnya: Anda tidak dapat mengatur jumlah digit signifikan sebuah angka menjadi 500.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat menyetel jumlah digit signifikan dari sebuah angka menjadi 500: </p>
<p id="demo">

<script>
var num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Reference Error

ReferenceError dilempar jika Anda menggunakan (referensi) variabel yang belum dideklarasikan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat menggunakan nilai dari variabel yang tidak ada: </p>
<p id="demo"></p>

<script>
var x;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Syntax Error

SyntaxError muncul jika Anda mencoba mengevaluasi kode dengan kesalahan sintaks.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat mengevaluasi kode yang mengandung kesalahan sintaksis: </p>
<p id="demo"></p>

<script>
try {
  eval("alert('Hello)");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Type Error

TypeError muncul jika Anda menggunakan nilai yang berada di luar kisaran tipe yang diharapkan:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat mengubah angka menjadi huruf besar: </p>
<p id="demo"></p>

<script>
var num = 1;
try {
  num.toUpperCase();
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Kesalahan URI (Uniform Resource Identifier)

URIError muncul jika Anda menggunakan karakter ilegal dalam fungsi URI:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Beberapa karakter tidak dapat didekode dengan decodeURI(): </p>
<p id="demo"></p>

<script>
try {
  decodeURI("%%%");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Properti Objek Kesalahan Non-Standar

Mozilla dan Microsoft mendefinisikan beberapa properti objek kesalahan non-standar, seperti dibawah ini:

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

Jangan gunakan properti ini di situs web publik. Karena tidak akan bekerja di semua browser.


Catur Kurnia Sari

Share
Tags: javascript