Sunday, January 11, 2015

Fungsi onClick dan Auto Load Javascript

Ada 2 Fungsi Utama dalam Javascript. Dan, ini penting diketahui bagi pemula alias Blogger Blogspot semua, yaitu:
  • Dengan jQuery
  • Tanpa jQuery
jQuery adalah bundel atau paket yang didalamnya telah tercantum mayoritas kebutuhan dalam banyak kegunaan. Untuk mendapatkan jquery ini bisa didownload di web jquery.com atau di code google dan juga ada di github.com
Untuk blogger blogspot karena tidak mungkin bisa mengakses hosting blogger.com maka, pembaca bisa me-link-kan jquery dibawah ini di blogmu (yakni diatas tag </head> atau dibawah tag <head>. Bisa juga diletakkan dibawah sekali alias diatas tag-tutup </body> agar loading blogmu bisa lebih cepat ketimbang di tag <head></head>
Berikut ini adalah link jQuerynya:

http://appacyber.net/_styl/jquery.min.js

jQuery ada dalam 2 paket. Pertama jQuery.Js dan kedua, jQuery.min.js
jQuery dengan akhiran -MIN.JS itulah yang sebaiknya diambil. Karena sudah dikompres dan bisa berjalan dengan cepat. Sedangkan tanpa akhiran -min.js. masih raw alias mentah atau full scripting dan bisa berakibat lelet di blogmu. Tapi bila anda punya website dan kecepatan serba unlimited, jQuery tanpa akhiran -min.js adalah lebih baik.

Contoh Penggunaan:

A. Dengan jQueryTambahkan tanda dollar ($) sebagai tanda bahwa anda menggunakan jQuery. Misalnya:

<script>
 $(document).ready(function(){ //Pembuka
//----------- kode javascriptmu disini -------------
}); //Penutup.
</script>

atau,

<script>
$(function(){//pembuka
//----------- kode javascriptmu disini -------------
});//penutup
</script>

B.Tanpa jQuery
Tidak menggunakan tanda dollar dan fungsi langsung dideklarasikan seperti sbb:

<script>
function ClickLink(){
//----------- kode javascriptmu disini -------------
}
</script>

Berdasarkan penjelasan diatas, apakah ditambah jQuery atau tidak bergantung pada kebutuhanmu. Berikut ini adalah contoh script dengan javascript untuk perintah TOGGLE atau menampilkan dan menyembunyikan obyek dengan javascript.

Menampilkan dan Menyembunyikan Obyek dengan Javascript

<!DOCTYPE html>
<html>
<head>
<script src="
//appacyber.net/_styl/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnprimary").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>Ini adalah Obyek. Obyeknya berupa tag Paragraph</p>
<button id="
btnprimary">Klik Disini</button>
</body>
</html>



Atau, demonya, bisa dilihat disini:

http://jsfiddle.net/fe5dxy0x/



Catatan:
Pada script diatas, yang menjadi indikator aksi tampil-sembunyi adalah ID-Selector berupa #btnprimary. Jadi, ketika button primary diklik, maka aksi tutup atau tampil akan berlaku.

Nah, silahkan mencoba!

No comments:

Post a Comment