Manipuasi onyek HTML (DOM Traversal)

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 fiturfitur 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.