Mohon untuk bersikap bijak dalam setiap menyikapi infomasi dan berita yang beredar di internet karena tidak semua berita itu benar, terkadang di salah gunakan oknum tertentu untuk membuat kekacauan dan fitnah

Belajar Fungsi Dasar Java Script

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul Belajar Fungsi Dasar Java Script, semoga bermanfaat dan selamat membaca


Belajar Fungsi Dasar Java Script Setelah mengetahui apa fungsi dari javascript itu sendiri pada postingan Kenali Terlebih Dahulu Apa itu JavaScript ?

Sekarang mari kita belajar penggunaan fungsi dasar Java Script. Fungsi dasar yang akan kita gunakan seperti :

1. Onclick
2. Onmouseenter
3. Onmouseleave
4. Ondblclick

Disini sambil berteori saya akan memberikan script langsung untuk anda yang ingin mencoba langsung penggunaan javascript yang saya maksudkan di atas. Ayo simak penjelasan dibawah :

1. Onclick

Fungsi ini berfungsi agar ketika suatu tag di click maka akan terjadi fungsi sesuai dengan yang anda instruksikan pada javascript. Fungsi onclick ini bisa anda gunakan untuk berpindah alamat. Jika biasanya kita bisa menggunakan <a href="http://codingrakitan.blogspot.com">Coding Rakitan</a> maka dengan onclick anda bisa menuliskan <a onclick="window.location='http://codingrakitan.blogspot.com';">Coding Rakitan</a>. Kelebihan dengan menggunakan onclick anda bisa memasangnya pada tag apa saja misalnya tag <div onclick="window.location='http://codingrakitan.blogspot.com';">Coding Rakitan</div> maka fungsi perpindahan alamat itu tetap berjalan.

Pindah alamat hanya salah satu fungsi dari onclick, fungsi lainnya anda bisa menambahkan style pada tag tertentu. Misalnya seperti contoh dibawah ketika tombol button di klik maka warna akan berubah menjadi merah.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button onclick="klik()">Fungsi Onclick</button>
<div class="coba" id="coba">

</div>
<script type="text/javascript">
function klik() {
document.getElementById('coba').style="background:red;";
}
</script>
</body>
</html>




Pada kasus di atas, ketika button di klik function "klik()" dimana ini merupakan method yang di instruksikan dalam kode javascript <script type="text/javascript"> function klik() { document.getElementById('coba').style="background:red;"; } </script> . Anda bisa saja menginstruksikan seperti ini <button onclick="document.getElementById('coba').style='background:red;';">Fungsi Onclick</button>. Tetapi itu akan terlihat tidak proporsional, dan tidak cocok bila aksi yang ingin di jalankan lebih dari satu.

2. Onmouseenter

Ini menginstruksikan agar suatu fungsi atau function berjalan ketika mouse di arahkan pada tag atau objek yang sudah di pasangkan onmouse enter. Penggunaanya sangat mudah anda hanya tinggal menambahakan seperti ini <a onmouseenter="klik()"></a>. Klik() disini adalah function yang nantinya akan di jalankan, anda bisa membuat nama function sesuai dengan yang anda inginkan.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba2{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button onmouseenter="klik2()">Fungsi Onmouseenter</button>
<div class="coba2" id="coba2">

</div>
<script type="text/javascript">
function klik2() {
document.getElementById('coba2').style="background:red;";
}
</script>
</body>
</html>




3. Onmouseleave

Selanjutnya adalah onmouseleave dimana ini adalah kebalikan dari onmouseenter. Function akan berjalan jika mouse atau kursor di pindahkan menjauhi objek yang telah di tentukan. Akan tetapi agar function dapat berjalan, kursor terlebih dahulu harus sudah focus atau berada di objek.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba3{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button onmouseleave="klik3()">Fungsi Onmouseleave</button>
<div class="coba3" id="coba3">

</div>
<script type="text/javascript">
function klik3() {
document.getElementById('coba3').style="background:red;";
}
</script>
</body>
</html>






4. Ondblclick

Ondblclick menginstruksikan agar ketika objek di klik dua kali maka function akan berjalan. Anda pengguna komputer pasti sudah tidak asing dengan klik dua kali bukan. Dengan javascript anda bisa memasang instruksi seperti ini pada web anda. Ingat dalam melakukan double klik atau klik dua kali anda harus cepat jangan memberi jeda, bila anda memberi jeda maka program akan membacanya sebagai satu kali klik.



<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba4{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button ondblclick="klik4()">Fungsi Ondblclick</button>
<div class="coba4" id="coba4">

</div>
<script type="text/javascript">
function klik4() {
document.getElementById('coba4').style="background:red;";
}
</script>
</body>
</html>




Itulah beberapa fungsi dasar javascript yang harus anda ketahui. Sebanrnya masih banyak lagi, akan tetapi mungkin akan saya bahas lagi di postingan selanjunya. Sekian dan terima kasih.

Labels: JavaScript

Thanks for reading Belajar Fungsi Dasar Java Script. Please share...!

0 Komentar untuk "Belajar Fungsi Dasar Java Script"

Back To Top