bahasa pemrograman berbasis web

Chapter 6: Bahasa pemrograman berbasis web – Troubleshooting Javascript

Dalam kehidupan nyata, fakta menunjukkan bahwa ketika bekerja dengan semua jenis bahasa pemrograman akan selalu ada kesalahan saat kita mengembangkan kode aplikasi. Demikian halnya dengan bahasa pemrograman berbasis web seperti JavaScript. Ada sangat banyak peluang untuk melakukan kesalahan dalam pekerjaan coding untuk menyebabkan segala macam masalah dalam aplikasi web yang kita bangun.

Tapi jangan khawatir – mendapatkan kesalahan dalam aplikasi Anda bukanlah akhir dari dunia. Ada beberapa alat sederhana yang dapat kita gunakan untuk membantu menemukan dan memperbaiki kesalahan tersebut sebelum pengguna aplikasi kita mengalaminya.

Identifikasi kesalahan

Dalam beberapa kesempatan terkadang ada kasus di mana error atau kesalahan dengan mudah bisa kita temukan sehingga penanganan menjadi mudah. Namun ada kalanya error tersebut begitu “halus” sampai-sampai kita tidak menyadarinya. Dalam kasus ini, program yang kita buat terlihat berjalan lancar dan normal, tapi muncul keanehan-keanehan.

Baca juga : Chapter 5: Belajar bahasa pemrograman berbasis web – jQuery event

Cara paling sederhana untuk melakukan jebakan error adalah dengan menyisipkan pernyataan alert() di tempat-tempat strategis dalam kode kita untuk menonton variabel saat kode program memproses sesuatu. Cukup tempelkan variabel yang ingin kita pantau di dalam fungsi alert() untuk mendapatkan tampilan cepat dari nilai yang dikandung variabel pada titik itu.

alert(variabel)
bahasa pemrograman berbasis web
Photo by Markus Spiske on Unsplash

Itu menghasilkan banyak pesan pop-up saat kita menjalankan aplikasi itu, tetapi ini adalah strategi yang bagus untuk membantu kita menyaksikan apa yang terjadi “di belakang layar” dalam kode. Metode ini sangat membantu menemukan kesalahan logika dalam kode – untuk mendeteksi ketika ada sesuatu yang tidak berfungsi seperti yang Anda kira.

Namun metode pemecahan masalah kode lain yang sering digunakan di masa lalu adalah mengomentari bagian kode. JavaScript sebagai bahasa pemrograman web berbasis client side mendukung penambahan baris komentar dalam kode untuk membantu mendokumentasikan apa yang terjadi. Ada dua jenis komentar yang bisa Anda gunakan di JavaScript

  • Komentar satu baris menggunakan simbol : //
  • Komentar beberapa baris : /*…..*/

Contoh komentar satu baris:

// Ini adalah komentar satu baris

Contoh komentar beberapa baris:

/* Ini adalah baris pertama komentar
    dan ini baris kedua
   ini baris selanjutnya
   seterusnya
   ....... */

Saat JavaScript melihat tag komentar, ia akan melewatkan teks apa pun yang ada di dalam komentar. Meskipun ini terutama dimaksudkan untuk menambahkan komentar ke program sehingga programmer (atau orang lain yang membaca kode tersebut) tahu kode apa yang melakukan apa.

Baca juga : Chapter 4: Belajar bahasa pemrograman berbasis web – JQuery

Selain itu juga umumnya untuk kita dapat menggunakan metode ini untuk menghapus baris atau seluruh blok kode dari program tanpa benar-benar menghapusnya. Cukup dengan meletakkan tag komentar JavaScript di sekitar kode yang ingin kita lewati, lalu jalankan program untuk menonton cara kerjanya.

Ini adalah metode pemecahan masalah yang baik, dan kadang-kadang masih berguna, tetapi saat ini bahasa pemrograman berbasis web memiliki teknik pemecahan masalah yang lebih canggih.

Beruntunglah, semua browser web populer saat ini mendukung debugger JavaScript.

Debugger adalah program yang menunjukkan kesalahan program yang terjadi saat Anda menjalankan aplikasi web di browser.

Debugger berasal dari kata debug sebagai kata dasarnya: De + Bug = pencarian bug. Bug dalam bahasa Indonesia = kutu. Sehingga Debug bisa diartikan sebagai aktivitas mencari kutu. Pengertian kutu dalam hal ini adalah kesalahan-kesalahan dalam kode program.

Sebagian besar debugger juga memungkinkan kita untuk melangkah melalui kode JavaScript satu baris pada satu waktu. Ini memberikan kesempatan untuk menonton saat setiap variabel berubah nilai, untuk membantu melacak dengan tepat di mana segala sesuatunya akan kacau.

Semua browser web utama yang digunakan saat ini memiliki debugger JavaScript bawaan atau mudah ditambahkan sebagai plug-in. Ini telah menjadi standar untuk meluncurkan alat debugger dengan menekan tombol F12 saat melihat halaman web.

bahasa pemrograman web berbasis client side
Bahasa pemrograman web berbasis client side

Developer tools bawaan browser

Saat ini sebagian besar browser modern sudah dilengkapi dengan Developer Tools. Cara membuka developer tools biasanya dengan tombol keyboard F12. Ada beberapa tabs di dalam Developer Tools

Baca juga : Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 4)

Explorer DOM

Explorer DOM membedah halaman web dan menampilkannya dalam elemen-elemen HTML. Ia menampilkan struktur hirarki layout sebuah halaman web.

DOM Explorer

Di beberapa browser, ketika mengarahkan kursor mouse ke atas elemen DOM, DOM Explorer menyoroti area halaman web yang dihasilkan elemen DOM. Ini membantu kita mengidentifikasi area mana di halaman web yang dibuat oleh kode HTML.
Sayangnya, Internet Explorer tidak mendukung fitur ini, tetapi Edge sudah mendukung.

Di dalam setiap area ada angka yang menunjukkan bagaimana ukuran area tersebut diatur dalam kode HTML. Yang lebih keren lagi adalah kita dapat mengklik sejumlah area untuk mengeditnya langsung di pohon DOM lalu melihat secara langsung bagaimana perubahan mempengaruhi tata letak elemen di halaman web. Ini adalah cara yang bagus untuk membantu memvisualisasikan dan bereksperimen dengan tata letak halaman web kita.

Baca juga : Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 3)

Untuk nilai posisi yang dihitung oleh browser (seperti persentase dan unit em), DOM Explorer menampilkan nilai yang dikonfigurasi, serta nilai terhitung dalam piksel. Ini adalah alat hebat lainnya untuk bereksperimen dengan struktur tata letak.

DOM Explorer juga memungkinkan kita untuk melakukan pengeditan langsung ke kode HTML terhadap elemen dan kemudian melihat bagaimana perubahan mempengaruhi halaman web secara real time. Ada tiga cara untuk melakukan itu:

  • Dobel klik langsung pada atribut elemen di DOM Explorer untuk mengubah nilai.
  • Dobel klik elemen dan pilih Tambahkan Atribut untuk menambahkan atribut baru.
  • Dobel klik elemen dan pilih Edit sebagai HTML untuk mengedit elemen secara manual.

DOM Explorer juga membantu melacak penanganan event yang dilampirkan kode JavaScript ke event HTML, memungkinkan kita mendeteksi kapan penangan event salah diterapkan atau tidak diterapkan sama sekali.

Console

Konsol berfungsi untuk menampilkan pesan yang diterima oleh browser dari halaman web yang dimuat. Ada tiga kategori pesan yang ditampilkan di Konsol:

  • Kesalahan: Masalah yang menyebabkan halaman web tidak dimuat atau dilakukan dengan benar, seperti kode JavaScript yang tidak benar
  • Peringatan: Masalah yang memungkinkan halaman web dimuat, tetapi itu dapat menyebabkan perilaku tak terduga
  • Informasi: Setiap informasi tambahan yang disediakan oleh halaman web
Console browser

Pada contoh di atas, tab console menampilkan error sintaks pada kode, yang seharusnya ditulis .addClass() tapi salah diketik .addclass() .

Baca juga : Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 2)

Sementara di halaman web, kita tidak melihat kesalahan tadi, sehingga kita tidak dapat mencari tahu di mana letak kesalahan. Namun, pada Konsol tampil pesan kesalahan yang mengidentifikasi dengan tepat apa yang salah. Fungsi .addclass() yang salah penulisan menghasilkan kesalahan di Konsol setiap kali event mouse dipicu.

Pesan kesalahan mengarahkan kita ke fungsi yang salah nama dan nomor baris yang muncul di kode. Ini adalah bantuan besar dalam mencari tahu apa yang salah ketika tindakan dinamis tidak berfungsi dengan benar di halaman web.

Selain melihat kesalahan dan pesan peringatan yang dihasilkan halaman web, kita dapat membuat pesan sendiri di Konsol. Fungsi JavaScript console.log() memungkinkan kita menampilkan pesan langsung ke Konsol untuk dilihat. Cukup dengan menambahkan baris di mana saja dalam kode JavaScript kita untuk menampilkan informasi yang berguna ke Konsol. Misalnya, salah satu metode yang sering digunakan saat bekerja dengan event adalah menambahkan fungsi console.log() untuk mengidentifikasi setiap kali peristiwa dipicu dalam kode JavaScript:

Contoh program berikut menunjukkan penggunaan console.log :

<!DOCTYPE html>
<html>
<head>
  <title>Event Mouse</title>
  <style>
    .kuning {
      background-color: yellow;
      width: 400px;
    }
    .merah {
      background-color: red;
      width: 400px;
    }
  </style>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    jQuery(document).ready( function() {
      $("p").hover( function() {
        console.log("Merubah latar belakang menjadi merah")
        $(this).addClass("merah");
      },
      function() {
        console.log("Menghapus latar belakang yang merah")
        $(this).removeClass("merah");
      });
    });
  </script>
</head>
<body>
  <h1>Latihan Event Mouse</h1>
  <p class="kuning">Ini adalah bagian konten yang berubah warna!</p>
  <p>Ini juga bagian konten yang mengalami perubahan!</p>
</body>
</html>

Hasilnya seperti dalam screenshot berikut ini:

bahasa pemrograman berbasis web
Contoh penggunaan console.log()

Baca juga : Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 1)

Debugger

Debugger memungkinkan kita untuk menyaksikan proses kerja kode Javascript. Alat ini sangat berguna untuk melihat langkah demi langkah kode Javascript dalam aplikasi. Debugger memungkinkan kita untuk melakukan jeda eksekusi kode Javascript kapan saja dalam program dan melihat hal-hal seperti berikut:

  • Jalur yang menyebabkan program untuk mendapatkan di mana itu
  • Nilai dari setiap variabel yang telah ditetapkan oleh kode
  • Bagaimana variabel berubah pada setiap pernyataan setelah tahap tersebut

Untuk mengatur agar program Javascript berhenti sejenak di Debugger, kita perlu mengatur satu atau beberapa breakpoint dalam kode. Breakpoint memberi sinyal ke browser untuk menghentikan pemrosesan kode dan memasukkan jendela Debugger.

Pada browser Chromium yang saya gunakan, tab debugger bernama Sources. Sedangkan pada browser

bahasa pemrograman berbasis web - javascript debugger
Debugger browser Chromium

Baca juga : Covid 19 News mengajarkan kita tentang percepatan era revolusi industri 4.0

Tab Sources memiliki 3 bagian Panel:

  1. Panel Navigasi File : berisi semua file yang direquest oleh halaman browser
  2. Panel Editor Code: berisi konten dari file-file pada panel navigasi (Nomor 1). Setiap kali file pada panel navigasi dipilih, konten file tersebut akan tampil di panel ini.
  3. Panel Javascript Debugging : berisi semua fitur debugging Javascript.

Pada umumnya debugger entah Javascript atau dalam bahasa pemrograman lain memiliki fitur-fitur umum seperti dalam tabel berikut:

KontrolDeskripsi
Pause BreakpointsAtur breakpoint sehingga kita dapat menjeda kode di tengah eksekusinya.
Step OverBerlanjut ke baris kode berikutnya. Jika baris berikutnya adalah fungsi, Debugger menjalankan
kode fungsi, tetapi tidak dalam mode debug
Step IntoBerlanjut ke baris kode berikutnya. Jika baris berikutnya adalah fungsi, Debugger mengikuti
ke dalam kode fungsi.
Step OutKeluar dari fungsi yang dipanggil dan kembali ke program utama
Break on New WorkerKeluar dari Debugger ketika halaman baru dibuat
Exception ControlMengatur cara menangani eksepsi saat disisipkan ke dalam kode
Show Next StatementMemungkinkan melewati baris kode untuk dieksekusi dalam program
ContinueMenghilangkan jeda pada kode dan melanjutkan dengan baris pernyataan berikutnya
Run to CursorMelanjutkan eksekusi kode hingga baris dalam kode di mana kursor berada.
Set Next StatementMelewati pernyataan dalam fungsi tanpa menjalankannya
Tabel Breakpoint debugger

Untuk melakukan pengecekan baris per baris dalam kode Javascript, gunakan ikon kontrol Step Into. Jika kita masuk ke dalam fungsi kode Javascript seperti fungsi getElementById(), menggunakan Step Into akan masuk ke dalam pustaka Javascript yang mengimplementasikan fungsi tersebut. Ini kadang-kadang bisa agak membosankan, karena beberapa fungsi Javascript membutuhkan ratusan atau bahkan ribuan baris kode untuk diterapkan, sebelum kita kembali ke kode kita sendiri!

Untuk menghindarinya, gunakan kontrol Step Over. Fitur Step Over berjalan melalui kode pustaka Javascript yang mengimplementasikan fungsi, tetapi kemudian menjeda lagi saat kontrol kembali ke kode kita.

Bila sudah selesai men-debug kode, klik kontrol Continue untuk kembali ke operasi normal program.

Untuk lebih mudah memahami mari kita coba dengan program bernama klikMouse.html berikut ini:

<!DOCTYPE html>
<html>
<head>
  <title>Latihan Event Klik Mouse</title>
  <script>
    function klik(pilihan) {
      if (pilihan == "makan") {
        alert("Anda ingin makan?");
      } else if (pilihan == "minum") {
        alert("Anda ingin minum?");
      } else if (pilihan == "tidur") {
        alert("Anda ingin tidur");
      }
    }
  </script>
</head>
<body>
  <h1>Pilihan aktivitas</h1>
  <p>Pilih salah satu aktivitas di bawah ini:</p>
  <button onclick="klik('tidur')">Tidur</button>
  <button onclick="klik('minum')">Minum</button>
  <button onclick="klik('makan')">Makan</button>
</body>
</html>

Jalankan di browser, kemudian injak tombol F12 untuk membuka Developer Tools. Saya menggunakan Chromium browser, maka tab debugger yang saya gunakan bernama Sources

Berikut langkah-langkah debugnya:

  1. Pada panel Navigasi File, pilih file yang aktif pada halaman browser klikMouse.html.
  2. Akan terbuka panel Editor Code yang berisi kode dari file halaman web. Klik pada nomor baris kode yang hendak dipasang Breakpoint.
  3. Klik salah satu tombol. Maka eksekusi program akan berhenti pada baris yang terpasang Breakpoint.
  4. Pada panel debugger pilih Step Into. Debugger akan mengecek pilihan yang kita buat melalui tombol yang kita klik tadi. Pada contoh di atas, ada 3 pilihan. Ketika kondisi yang diperiksa oleh debugger cocok dengan pilihan yang kita ambil maka debugger akan melanjutkan (Step Into) ke eksekusi kode yang telah ditentukan apabila sesuai. Apabila tidak sesuai, maka debugger akan melanjutkan pengecekan pada kondisi berikutnya, sampai ketemu kondisi yang sesuai.
  5. Debugger akan melanjutkan terus langkah-langkahnya sampai jalannya program berakhir.
  6. Silakan mencoba sendiri menggunakan pilihan Kontrol debugger sesuai referensi pada tabel debugger di atas.
Bahasa pemrograman berbasis web - debug javascript
Langkah-langkah debug program Javascript

Jebakan error/kesalahan – bahasa pemrograman berbasis web

Dalam pekerjaan pembuatan aplikasi seringkali ditemui masalah program berhenti bekerja karena beberapa jenis kesalahan dalam kode program. Sebagai pemrograman web berbasis client, hal paling umum adalah mengambil data dari pengguna/pengunjung. Tentu saja ada peluang untuk terjadinya kesalahan input sehingga kesalahan input mesti dicegah dari sisi pemrograman. Jangan sampai hanya karena kesalahan input, programnya menjadi crash.

Salah satu cara cara untuk mencegah terjadinya program crash akibat “human error” adalah dengan membuat mekanisme error catching atau mencegat kesalahan. Dengan metode ini, program mendeteksi ketika ada sesuatu yang salah dalam input dan menyediakan beberapa kode alternatif untuk dijalankan browser, lalu melewati laur kode normal yang berpeluang menghasilkan kesalahan fatal tersebut.

Kita dapat melakukan mencegat kesalahan dalam JavaScript dengan metode statemen try…catch. Statemen try…catch terdiri dari dua blok kode. Blok kode try untuk menjalankan dan memantau kesalahan, dan blok kode catch untuk dijalankan jika ada kesalahan yang terdeteksi dalam blok kode try. Berikut format untuk statemen try…catch:

try {
 kode yang dicoba
} catch (err) {
 kode yang dijalankan apabila ada kesalahan
}

Fungsi catch() mengambil satu parameter — variabel untuk menempatkan objek kesalahan yang dihasilkan JavaScript untuk menggambarkan kesalahan yang terjadi. Objek Kesalahan memiliki dua properti:

  • nama: Mengembalikan nama tipe kesalahan
  • pesan: Pesan string yang menjelaskan kesalahan secara lebih rinci

Nama kesalahan mengidentifikasi tipe galat yang terjadi dalam blok kode coba. Ada enam tipe kesalahan berbeda yang didukung di JavaScript:

ErrorDeskripsi
EvalErrorFungsi eval() telah menghasilkan kesalahan
RangeErrorNilai di luar rentang nilai tersebut
ReferenceErrorLokasi yang tak sah telah direferensikan dalam kode.
SyntaxErrorTerjadi kesalahan sintaks kode javascript
TypeErrorTipe data salah
URIErrorKesalahan dalam fungsi encodedURI()
Tabel tangkapan kesalahan javascript

Di samping penanganan error secara otomatis kita juga dapat membuat jebakan kesalahan sendiri:

try {
 if (umur < 17) throw "Masih di bawah umur";
 if (umur > 16) throw "sudah cukup umur";
} catch (err) {
 alert(err);
}

String yang ditetapkan ke pernyataan throw ditampilkan sebagai bagian dari objek Error.

Untuk menunjukkan penggunaan metode try…catch ke kode JavaScript, mari kita coba dengan membuat program latihan sederhana. Ikuti langkah-langkah berikut untuk membuat demo

Buat sebuah file bernama tangkapError.html menggunakan editor kode anda, kemudian masukkan kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Latihan menangkap kesalahan</title>
  <style>
    fieldset {
      width: 650px;
    }
      label, input {
      margin: 10px;
    }
    #hasil {
      font-weight: bolder;
    }
  </style>
  <script>
    function hitung() {
      var ujian, nilai, array, total, ratarata, hasil;
      ujian = document.getElementById("ujian").value;
      nilai = document.getElementById("nilai").value;
      array = nilai.split(',');
      console.log(array.length);

      total = 0;
      for(i = 0; i < array.length; i++) {
        total = total + parseInt(array[i]);
      }

      try {
        if (ujian == 0) {
          throw "Masukkan jumlah berapa kali ujian yang valid";
        } else if (ujian == "") {
          throw "Masukkan jumlah berapa kali ujian yang valid";
        } else if (isNaN(ujian)) {
          throw "Masukkan jumlah berapa kali ujian yang valid";
        } else if (array.length < ujian) {
          throw "Jumlah nilai kurang dari jumlah ujian"
        } else if (array.length > ujian) {
          throw "Jumlah ujian kurang dari jumlah nilai"
        }

        ratarata = total / ujian;
        hasil = "Nilai rata-rata: " + ratarata;
        document.getElementById("hasil").innerHTML = hasil;
      } catch (err) {
        document.getElementById("hasil").innerHTML = err;
      }
    }
  </script>
</head>
<body>
  <fieldset>
    <legend>Menghitung nilai rata-rata</legend>
    <label>Berapa kali ujian</label>
    <input type="text" id="ujian" size="3"><br>
    <label>Masukkan nilai-nilai, dipisahkan dengan koma</label>
    <input type="text" id="nilai" size="20"><br>
    <button onclick="hitung()">
      Hitung nilai rata-rata
    </button>
    <p id="hasil"></p>
  </fieldset>
</body>
</html>

Program di atas menghitung nilai-rata-rata sederhana. Silakan coba dijalankan di browser, lalu masukkan nilai-nilai yang ingin dihitung untuk dicari rata-ratanya.

bahasa pemrograman berbasis web - error catching

Leave a Reply