Jean Gkol Blogging Tips: Javascript

Berdasarkan request, berikut ini adalah tips singkat cara memahami Fungsi OnClick dan OnLoad dalam Javascript.

Fungsi Onclick

Scriptnya sebagai berikut:

<script>
function onClickOke(){
alert('Hallo');
}
</script>

onClickOke adalah nama fungsinya.
Perhatikan berikut ini:

Misalnya ada sebuah BUTTON dan ketika LINK itu diklik maka akan muncul sesuatu. Jadi, scriptnya sbb:

<script>
function onClickOke(){
alert('Hallo');
}
</script>
<button type="button" name="btn" onclick="onClickOke()">Click</button>

Contoh praktek seperti dibawah ini:

Fungsi OnLoad

Berbeda dengan fungsi OnClick, kalo OnLoad diletakkan di tag <body> sehingga menjadi:
<body onLoad="onClickOke()">

Gampang bukan?

Selamat mencoba!

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!

Jean Gkol Blogging Tips

Monday, January 12, 2015

Fungsi OnClick dan OnLoad dalam Javascript

Fungsi Onclick

Fungsi OnLoad

Sunday, January 11, 2015

Fungsi onClick dan Auto Load Javascript

`Menampilkan dan Menyembunyikan Obyek dengan Javascript`