Thursday, May 18, 2017

Cara membuat Pustaka script eksternal pada situs web

Advertisement

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


<div>info 1</div>
<div>info 2</div> 
<script src="jquery-2.0.3.js"></script> 
<script> 
$(document).ready(function(){ 
$('div').html('<u>info 2</u>'); 
}); 
</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

 <div>info 1</div> 
 <div id="info2">info 2</div> 
 <script src="jquery-2.0.3.js"></script> 
 <script> 
 $(document).ready(function(){ 
 $('#info2').html('<u>info 2</u>'); 
 }); 
 </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

 <div>info 1</div> 
 <div class="info2">info 2</div> 
 <script src="jquery-2.0.3.js"></script> 
 <script> 
 $(document).ready(function(){ 
 $('.info2').html('<u>info 2</u>');
 }); 
 </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


 <div>info 1</div> 
 <div id="info2"><b>info 2</b></div> 
 <script src="jquery-2.0.3.js"></script> 
 <script> 
 $(document).ready(function(){ 
 $('#info2').click(function(){ 
 alert($('#info2').html()); 
 }); 
 }); 
 </script>

Pada skrip ini penambahan event onclick dilakukan pada obyek dengan id info2, yakni tag div. Skripnya ditunjukkan pada baris 6-8. Apabila tag tersebut diklik maka akan ada alert yang ditampilkan. Hasilnya dapat dilihat pada gambar berikut.


 
RingkasanPenambahan pustaka eksternal pada skripting halaman web dapat memiliki sejumlah nilai tambah. Selain adanya tambahan fitur pustaka eksternal seperti jQuery juga dapat memudahkan dalam memprogram HTML menggunakan Javascript. jQuery merupakan salah satu pustaka eksternal yang banyak digunakan saat ini karena bersifat terbuka dan memiliki banyak fitur dan juga pustaka turunan.


keyword : Cara menambahkan script eksternal di situs web, Cara menambahkan java script eksternal di situs web, Cara menambahkan script java script eksternal di situs web,  Cara menambahkan script eksternal pada situs web,  Cara menambahkan java script eksternal pada  situs web

Artikel Terkait

Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.

Terima Kasih.

EmoticonEmoticon