Penerapan Pustaka Eksternal
Selain menyediakan pustaka bawaan, pada
pemrograman Javascript juga dimungkinkan untuk menggunakan pustaka dari
pengembang (programmer) Javascript
lainnya. Pustaka eksternal sebenarnya adalah program Javascript seperti umumnya
yang dikembangkan oleh perorangan atau instansi agar dapat digunakan oleh orang
atau instansi lainnya. Ada banyak pustaka Javascript yang telah dikembangkan,
seperti Dojo, Ext JS, YUI, dan jQuery. Bentuknya ada yang bersifat terbuka dan
tertutup tergantung dari pengembangnya. Adanya penambahan pustaka eksternal ini
akan dapat menambah fitur dari halaman web yang dihasilkan. Selain itu juga
dapat memberikan kemudahan dalam pengembangan karena adanya penyederhanaan
sejumlah operasi umum dalam Javascript, seperti fungsi-fungsi untuk mengakses
obyek ataupun menjaga kompatibilitas antar browser.
Berikut ini format perintah yang dapat
digunakan untuk menyertakan pustaka eksternal tersebut ke dalam halaman web.
<script src=”lokasi/file/pustaka.js”></script>
Sebagai contoh, apabila menggunakan
jQuery dengan file pustakanya jquery/jquery.min.js dan berada pada lokasi yang
sama dengan aplikasi webnya, maka penyertaannya dapat menggunakan perintah.
<script src=”jquery/jquery.min.js”></script>
Pada pembelajaran kali ini pembahasan
pustaka eksternal akan difokuskan pada penerapan pustaka jQuery.
jQuery saat ini telah sampai pada rilis
1.11.0 untuk yang versi 1 dan 2.1.0 untuk versi 2. Pustaka ini dapat didownload
pada alamat http://jquery.com. Ini merupakan salah satu pustaka yang banyak
diterapkan saat ini dan memiliki sejumlah turunan, diantaranya adalah jQuery
UI, jQuery Mobile dan Twitter Bootstrap. Perkembangan yang pesat dari jQuery
ini dimungkinkan karena sifatnya yang terbuka. Keterbukaannya ini memungkinkan
banyak programmer Javascript untuk berkontribusi mengembangkan fitur-fitur yang
ada pada pustaka ini.
Melalui jQuery permasalahan kompatibilitas
aplikasi antar web browser yang berbeda-beda dapat diatasi, seperti pada contoh
kasus penerapan AJAX pada kegiatan belajar sebelumnya. Beberapa fitur yang
dapat dimanfaatkan dari pustaka ini adalah manipulasi obyek HTML, penanganan
event dan AJAX. Berikut ini merupakan beberapa contoh penerapan pustaka jQuery
terkait fitur-fitur diatas.
MANIPULASI OBYEK HTML (DOM Traversal)
Mengakses obyek HTML melalui tag
1. <div>info
1</div>
2. <div>info
2</div>
3. <script
src="jquery-2.0.3.js"></script>
4. <script>
5. $(document).ready(function(){
6. $('div').html('<u>info 2</u>');
7. });
8. </script>
Perintah pada baris 5 dan 7 pada skrip
diatas digunakan sebagai perintah jquery untuk menangani event ready dari
dokumen HTML. Event ready adalah event yang dikirimkan pada saat dokumen selesai
di tampilkan oleh browser. Sedangkan perintah pada baris 6 digunakan untuk
mengakses obyek HTML dengan tag div, $(‘div’),
dan mengisinya dengan HTML <ul>info
2</u>.
Mengakses obyek HTML melalui atribut id
1. <div>info
1</div>
2. <div
id="info2">info 2</div>
3. <script
src="jquery-2.0.3.js"></script>
4. <script>
5. $(document).ready(function(){
6. $('#info2').html('<u>info 2</u>');
7. });
8. </script>
Program Javascript pada contoh diatas
ini mirip dengan contoh sebelumnya, bedanya pada baris 6, obyek HTML pada
contoh ini diakses melalui atribud id yang ditambahkan pada tag div.
Penunjukkan atribut id oleh jQuery dilakukan dengan menambahkan tanda pagar (#)
diawal id dari tag yang akan diakses. Penerapan atribut id tidak hanya dapat
diberikan pada tag div namun juga untuk tag lainnya.
Apabila dijalankan hanya
tag dengan id info2 yang akan berubah tampilannya. Seperti ditunjukkan pada
gambar berikut.
Mengakses obyek HTML melalui atribut
class
1. <div>info
1</div>
2. <div
class="info2">info 2</div>
3. <script
src="jquery-2.0.3.js"></script>
4. <script>
5. $(document).ready(function(){
6. $('.info2').html('<u>info 2</u>');
7. });
8. </script>
Apabila program ini dijalankan akan
memberikan tampilan yang sama pada contoh sebelumnya. Kalau pada contoh
sebelumnya atribut id ditunjuk dengan menggunakan tanda #, disini penunjukkan
kelas dilakukan dengan menggunakan tanda titik (.) diawal nama kelasnya.
PENANGANAN EVENT
Pemberian event onclick pada obyek HTML
1. <div>info
1</div>
2. <div
id="info2"><b>info 2</b></div>
3. <script
src="jquery-2.0.3.js"></script>
4. <script>
5. $(document).ready(function(){
6. $('#info2').click(function(){
7. alert($('#info2').html());
8. });
9. });
10.
</script>
0 Response to "Penerapan Pustaka Eksternal"
Post a Comment