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>
<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>
<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>
<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>
<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.
0 comments:
Post a Comment