WEB BROWSER

Exception Handling

1. Jelaskan pengertian exception!  2. Jelaskan jenis-jenis exception!3. Jelaskan pengertian Try, Catch, Finally, dan Throw!4. Jelaskan perbedaan Catch dan Finally!5. Jelaskan aturan penggunaan try, catch, dan finally!Pembahasan :1. Exception adalah kesalahan kesalahan yang terjadi pada suatu program yang membuat program    tidak dapat di run.2. Jenis- jenis Exception :·         Exception adalah kondisi yang menyebabkan progra menjadi hang atau quit dari alur normal yang       telah ditentuan pada saat program dijalankan.·         Exception ini dipucu oleh runtime error yakni error yang terjadi saat program dinterpretasi oleh interpreter.·         Pada umumnya, eror dalam pemrograman dapat dibagi menjadi 3 jenis.3. Definisi Try, Catch, Finally dan Throwa)      Try adalah keyword yang digunakan untuk mencoba menjalankan block program, kemudian mengenai       dimana munculnya kesalahan yang ingin diproses. Keyword ini juga harus dipasangkan dengan keyword       catch atau keyword finally.b)      Catch dalam java, keyword catch harus dengan try. Kegunaan keyword ini adalah menangkap kesalahan       atau bug yang terjadi dalam block try.c)       Finally adalah keyword yang akan menunjukkan bahwa block program tersebut akan selalu dieksekusi        meskipun adanya kesalahan yang muncu atau pun tidak ada.d)      Throw adalah keyword yang digunakan untuk melemparkan suatu bug yang dibuat secara manual.       Keyword ini digunakan dalam satu method atau kelas yang menghasilkan kesalahan sehingga perlu       ditangkap errornya. 4. Perbedaan Finally dengan Catch adalah jika catch,keyword ini adalah menangkap kesalahan atau     bug yang terjadi dalam block try. Setelah menangkap kesalahan yang terjadi maka developer dapat     melakukan hal apapun pada block catch sesuai keinginan developer. Keyword catch juga dapat     diletakan berulang-ulang sesuai dengan kebutuhan. Sedangkan, Finally merupakan keyword yang     menunjukan bahwa block program tersebut akan selalu dieksekusi meskipun adanya kesalahan     yang muncul atau pun tidak ada.5.   Aturan penggunaan Exception Handling:·         Aturan penggunaan try adalah keyword ini juga harus dipasangkan dengan keyword       catch atau keyword finally.·         Aturan penggunaan catch adalah keyword ini harus dipasangkan oleh keyword try.·         Aturan penggunaan throw adalah menerbitkan exception yang diberikan kepada        method yang dipanggil·         Aturan penggunaan finally adalah keyword ini adalah harus dipasangkan oleh keyword try

Class dan Object pada Pemrograman Java. Java adalah bahasa berorientasi objek. Sebagai bahasa yang memiliki fitur object oriented, Java mendukung konsep dasar berikut ini.

-Polymorphism
-Inheritance
-Encapsulation
-Abstraction
-Classes
-Objects
-Instance
-Method
-Message Parsing

Dalam artikel ini, Kita akan membahas konsep class dan object.

– Class merupakan suatu “Blueprint” atau “Cetakan” untuk menciptakan suatu instant dari object. Class juga merupakan grup suatu object dengan kemiripan attributes/properties, behavior dan relasi ke object lain. Contoh :Class Person, Vehicle, Tree, Fruit dan lainnya.

– Object adalah instance dari class secara umum merepresentasikan (template) sebuah object, sebuah instance adalah representasi nyata dari class itu sendiri.
Contoh : Dari Class Fruit kita dapat membuat object Mangga, Pisang, Apel, dan lainnya.

Object Pada Java

Mari kita lihat lebih dalam apa itu object. Bila kita melihat dunia nyata kita dapat menemukan banyak benda disekitar kita seperti, mobil, kucing, manusia dan lain-lain. Semua object memiliki state(attribute) dan behavior. Jika kita melihat objek kucing, maka state (attribute) tersebut adalah nama, jenis, warna dan behavior(prilaku) tersebut adalah mengeong, bergoyang-goyang, berjalan. Jika Anda membandingkan objek pada software dengan objek dunia nyata, mereka memiliki karakteristik yang sangat mirip. Objek pada software juga memiliki state (Attribute) dan behavior, sebuah state pada objek software disimpan dalam bidang dan behavior ditunjukkan melalui method. Jadi dalam pengembangan software, method beroperasi pada keadaan internal suatu objek dengan komunikasi objek ke objek dilakukan melalui method.

Class Pada Java

Berikut contoh class dibawah ini:

public class cat{

   String breed;

   int age;

   String color;

   void miaow(){

   }

  

   void hungry(){

   }

  

   void sleeping(){

   }

}

Class dapat berisi salah satu jenis variabel berikut.

Variabel lokal : Variabel didefinisikan didalam method konstruktor atau blok disebut variabel lokal, variabel akan dideklarisasikan dalam method dan variabel akan dihancurkan ketika method telah selesai.

Variabel Instance : Variabel dalam class tetapi diluar method apapun, variabel ini dipakai ketika class dimuat. Variabel instance dapat diakses dari dalam method, konstruktor atau class tertentu.

variabel Class : Variabel dideklarasikan dalam class, diluar method apapun, dengan kata kunci static.

Class dapat memiliki sejumlah method untuk mengakses nilai dari berbagai jenis method. Dalam contoh diatas miaow(), hungry(), dan sleeping() adalah method.

Membuat Objek

Seperti disebut sebelumnya class menyediakan "blueprint" untuk objek jadi pada dasarnya,sebuah objek dibuat dari class.Di java, kata kunci "new" digunakan untuk membuat objek baru.

Ada tiga langkah membuat objek dari class:
Deklarasi: Deklarasi variabel dengan nama variabel dan jenis objek.
Instansiasi: kata kunci "new" digunakan untuk membuat objek.
Inisialisasi: kata kunci "new" diikuti dengangan panggilan untuk konstuktor, panggilan ini menginisialisasi objek baru.

Berikut contoh membuat objek dibawah ini.

Jika code diatas benar maka hasilnya seperti berikut

10.Event

Browser Event

                Untuk dapat menghasilkan dokumen HTML yang menarik, modifikasi elemen-elemen dalam dokumen saja tentu tidak cukup. Terkadang kita memerlukan dokumen yang interaktif; yang memberikan respon terhadap masukan dari pengguna. Terdapat banyak jenis masukan dari pengguna yang dapat diakses oleh browser. Penekanan tombol keyboard adalah masukan. Klik tombol mouse juga adalah masukan. Bahkan pergerakan mouse juga dapat dihitung sebagai masukan. Berbagai masukan dari pengguna ini dibaca dan dipantau oleh browser agar kita dapat mengambil tindakan ketika pengguna memberikan masukan. Karena masukan dianggap sebagai sesuatu yang dilakukan pengguna, atau dengan kata lain kejadian ketika dokumen HTML ditampilkan, maka hasil rekaman peristiwa ini dikenal dengan nama event.

                Cara kerja dari browser event sendiri sangat sederhana. Browser memberikan kita fasilitas untuk memantau kejadian tertentu pada elemen DOM tertentu. Kita kemudian dapat memberikan sebuah fungsi kepada browser, yang nantinya dipanggil ketika peristiwa yang dipantau terjadi. Untuk beberapa peristiwa, misalnya penekanan tombol keyboard seringkali kita akan memerlukan informasi tambahan seperti tombol apa yang ditekan pengguna. Untuk mengakomodasi hal ini browser memberikan objek khusus untuk event yang dapat kita akses melalui fungsi yang kita berikan ke pemantau kejadian.

                Perlu diketahui juga bahwa event dijalankan dari elemen yang paling dalam dari DOM, dan kemudian bergerak naik terus sampai ke elemen paling atas dari DOM (body). Misalkan kita memiliki elemen seperti berikut:

1 2 3 4 5 6

<p>Sebuah paragraf dengan list di dalamnya.    <ul>        <li>List pertama</li>        <li><a href="http://google.com">List kedua</a></li>     </ul> </p>

                Jika pengguna melakukan klik pada teks “List kedua” pada elemen HTML di atas, maka browser terlebih dahulu akan menjalankan event yang ada pada elemen a. Jika kita tidak memantau elemen tersebut, maka browser akan mengecekevent pada elemen li, dan seterusnya sampai kepada elemen p dan akhirnya elemen teratas, body. Jika pada elemenbody juga tidak terdapat event yang dipantau, maka browser akan menjalankan fungsi standar browser. Dalam contoh di atas, browser akan bergerak ke alamat http://google.com. Pola pergerakan event seperti ini kita kenal dengan namaevent bubbilg atau bubbing phrase.

                Seperti yang dapat dilihat sejauh ini, event dalam DOM cukup sederhana dan mudah. Pada dasarnya, untuk menambahkan interaktifitas dalam dokumen HTML kita cukup melakukan dua langkah saja:

1. Buat fungsi yang ingin dipanggil ketika event terjadi.
2. Kaitkan elemen DOM dengan event yang diinginkan, beserta dengan fungsi yang dibuat pada langkah pertama.

Secara umum, browser menyediakan lima fasilitas khusus berkaitan dengan event, yaitu fasilitas untuk:

1. Mendaftarkan pemantau event.
2. Mengambil objek event.
3. Mengambil informasi dari objek event.
4. Memberikan informasi ke browser bahwa event telah selesai ditangani.
5. Menghapus (melepaskan) pemantau event.

Kelima fasilitas yang ada ini sangat mudah digunakan, walaupun sayangnya beberapa browser mengimplementasikan semuanya dengan cara yang berbeda-beda. Seperti biasa, pembahasan akan kita lakukan hanya untuk browser berbasis Webkit dan Gecko.

Pemantauan Event

                Untuk melihat bagaimana kita dapat memantau event pada sebuah elemen DOM, kita akan bekerja dengan sebuah dokumen sederhana yang memiliki tulisan dan tombol, seperti berikut:

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

<!doctype html>     <html>     <head>         <meta charset="UTF-8">         <title>Event dalam Browser</title>     </head>     <body>         <h1 id="judul">Judul Bab Dokumen</h1>         <p>         <a href="http://www.google.com" id="link">             Link ke Google         </a>     </p>         <input type="button"            id="btnJudul"            value="Ganti Warna Judul Bab">         <input type="button"            id="btnLink"            value="Ganti Warna Link">         <script type="text/javascript" src="script.js"></script>     </body>     </html>

Untuk mengaitkan pemantau event ke salah satu elemen, kita dapat memanggil method addEventListener milik elemen tersebut. addEventListener merupakan method milik objek yang mengimplementasikan antarmuka EventTarget.EventTarget sendiri diimplementasikan oleh seluruh elemen HTML dan beberapa objek khusus lainnya (misal:XMLHttpRequest). addEventListener menerima tiga buah argumen, yaitu:

1. Argumen pertama merupakan string yang berisi teks dari nama event yang ingin dipantau.
2. Argumen kedua menerima objek, atau tepatnya fungsi, yang ingin dijalankan ketika event terjadi.
3. Argumen ketiga yaitu sebuah nilai boolean yang menandakan apakah bubbling phrase harus dijalankan dengan normal (dari dalam ke luar) atau sebaliknya (dari luar ke dalam). Nilai false berarti bubbling phrase berjalan normal, sementara true berarti bubbling phrase berjalan terbalik. Argumen ketiga ini bersifat opsional (tidak harus diisikan). Jika tidak diisikan bubbling phrase akan berjalan normal (nilai false).

Pada umumnya kita hanya akan menggunakan parameter pertama dan kedua, karena masih banyak browser yang tidak mengimplementasikan argumen ketiga. Langsung saja, misalkan jika kita ingin melakukan sesuatu ketika tombol “Ganti Warna Judul Bab” di-klik:

1 2 3 4 5 6 7

var tombol = document.getElementById("btnJudul"); var fungsi = function () {     var jdl = document.getElementById("judul");     jdl.style.color = "#5FF"; }; tombol.addEventListener("click", fungsi);

Kode di atas cukup jelas dan sederhana: ambil elemen yang tepat (tombol) dan kemudian kaitkan event klik ke fungsidengan addEventListener. Setelah menjalankan kode di atas, elemen h1 dengan id judulBab akan berubah warnanya ketika kita menekan tombol “Ganti Warna Judul Bab”.

Untuk menghilangkan atau membuang pemantau event sendiri dapat dilakukan dengan mudah, memanfaatkan fungsiremoveEventListener milik elemen yang bersangkutan. Fungsi ini memiliki parameter yang sama persis denganaddEventListener.

1	tombol.removeEventListener("click", fungsi);

Perhatikan juga bagaimana kita tetap mengirimkan fungsi ke removeEventListener. Hal ini berarti kita harus memiliki akses terhadap fungsi dan tombol ketika memanggil removeEventListener.

Objek Event

Objek Event merupakan sebuah objek yang dibuat ketika sebuah event berjalan. Objek Event dapat kita akses melalui fungsi yang kita kirimkan ke addEventListener:

1 2 3 4 5 6

var aksesEvent = function (evt) {     // parameter evt merupakan objek Event }; // fungsi aksesEvent akan dapat mengakses objek event tombol.addEventListener("click", fungsi);

Pada kode di atas, kita hanya cukup menambahkan sebuah parameter ke dalam fungsi yang akan dikirimkan untuk dapat mengakses Event. Melalui objek ini kita dapat mengakses berbagai informasi mengenai event yang sedang berjalan. Misalnya, kita bisa mendapatkan elemen yang sedang berinteraksi dengan pengguna melalui properti target:

1  2  3  4  5  6  7  8  9 10 11 12 13 14

var link = document.getElementById("link");     var fungsiLink = function (event) {             // karena pengguna melakukan klik terhadap             // elemen dengan id link, maka kita bisa             // mengambil elemen tersebut melalui Event.target         var el = event.target;         el.style.color = "#F43";         el.style.textDecoration = "none";     };     // ketika di-klik, link akan berubah warna dan     // tidak lagi bergaris bawah     link.addEventListener("click", fungsiLink);

Sayangnya ketika kode penanganan event di atas berjalan kita tidak akan dapat melihat perubahan warna dan tampilan teks karena secara otomatis browser akan berpindah halaman ke Google. Untuk menangani hal ini, kita bisa memanggilmethod preventDefault yang berguna untuk membatalkan aksi standar (default) dari elemen DOM:

1  2  3  4  5  6  7  8  9 10 11 12

var link = document.getElementById("link");     var fungsiLink = function (event) {         var el = event.target;         el.style.color = "#F43";         el.style.textDecoration = "none";         // memaksa elemen link tidak membuat         // browser berpindah ke halaman lain         event.preventDefault();     };     link.addEventListener("click", fungsiLink);

Sekarang kita bisa melihat bagaimana objek Event memiliki properti dan method yang sangat berguna, beserta cara menggunakan fitur-fitur tersebut. Keseluruhan method dan properti yang dimiliki objek Event tidak akan kita bahas di sini. Silahkan baca dokumentasi objek Event pada website yang relevan jika ingin melihat informasi apa saja yang disediakan oleh Event.

Membuat Event Sendiri

Jika memang diperlukan, kita juga dapat membuat event milik kita sendiri. Objek CustomEvent digunakan untuk membuatevent yang kita inginkan. CustomEvent dapat dibuat dengan memanggil constructor objek, seperti berikut:

1 2 3 4 5

var eventBuatan = new CustomEvent("eventBuatan", {         detail: { name: "Event Buatan" },         bubbles: true,         cancelable: true     });

Seperti yang dapat dilihat dari kode di atas, CustomEvent menerima dua buah parameter untuk constructor-nya, yaitu:

1. Nama event yang kita inginkan, dalam contoh ini eventBuatan.
2. Data yang ingin kita berikan kepada event buatan.

Terdapat tiga data utama yang dapat kita berikan, yaitu:

1. bubbles, nilai boolean yang menentukan apakah event akan menjalankan bubble phrase atau tidak.
2. cancelable, nilai boolean untuk memberikan fitur pembatalan event melalui method preventDefault danstopPropagation milik objek Event.
3. detail, yang merupakan sebuah objek berisi data apapun yang ingin kita berikan kepada event.

Untuk menggunakan event buatan, kita dapat mengaitkan event tersebut kepada sebuah elemen DOM, seperti layaknyaevent bawaan dari browser:

1 2 3

link.addEventListener("eventBuatan", function (event) {     // lakukan sesuatu ketika eventBuatan terjadi });

Sayangnya, berbeda dengan event bawaan browser, event buatan kita tidak akan dapat berjalan secara otomatis ketika pengguna melakukan sesuatu dalam dokumen. Untuk event buatan, kita harus memanggil method dispatchEvent ketika ingin menjalankan event tersebut. dispatchEvent sendiri merupakan method milik elemen DOM, sehingga penggunaannya memerlukan keberadaan elemen DOM yang bersangkutan:

1	link.dispatchEvent(eventBuatan);

Karena keterbatasan inilah maka dalam penggunaan di aplikasi biasanya kita menggabungkan event buatan dengan interaksi antar satu objek dengan objek lain, bukan interaksi antara pengguna dengan dokumen HTML.

Keindahan Model Event Browser

Model event yang disediakan oleh DOM sangat sederhana. Tidak hanya sederhana, model yang diberikan oleh DOM juga sangat berguna. Dengan menggunakan model event milik DOM, kita mendapatkan akses terhadap aksi pengguna dari berbagai perangkat, mulai dari PC sampai dengan smartphone! Event memungkinkan kita untuk mengakses apa yang terjadi, kapan sebuah event terjadi, dan kemudian menentukan respon kita terhadap event tersebut dengan sangat mudah. Bagaimana browser mengimplementasikan event tidak terlalu penting - kita dapat dengan tenang mengahlikan fokus kita ke pengembangan aplikasi web yang baik.

Abstraksi yang disediakan oleh event seperti ini sangat patut ditiru. Jika mampu membangun aplikasi dengan mengimplementasikan konsep-konsep yang ada dalam event, kita akan mendapatkan kode aplikasi yang sangat rapi dan mudah dirawat. Framework modern Javascript seperti Backbone.js dan AngularJS banyak menggunakan konsep-konsep sejenis. Jika tertarik dengan konsep yang digunakan oleh model event seperti ini, silahkan baca lebih lanjut mengenai pola pengembangan (design pattern) Observer.