Belajar Fungsi Dasar Java Script Setelah mengetahui apa fungsi dari javascript itu sendiri pada postingan Kenali Terlebih Dahulu Apa itu JavaScript ?
Sekarang mari kita mencar ilmu penggunaan fungsi dasar Java Script. Fungsi dasar yang akan kita gunakan menyerupai :
1. Onclick
2. Onmouseenter
3. Onmouseleave
4. Ondblclick
Disini sambil berteori daqu akan menunjukkan script eksklusif untuk anda yang ingin mencoba eksklusif penggunaan javascript yang daqu maksudkan di atas. Ayo simak pengertian dibawah :
1. Onclick
Fungsi ini berfungsi biar saat suatu tag di click maka akan terjadi fungsi sesuai dengan yang anda instruksikan pada javascript. Fungsi onclick ini sanggup anda gunakan untuk berpindah alamat. Jika biasanya kita sanggup memakai <a href="http://serhamo.net"></a> maka dengan onclick anda sanggup menuliskan <a onclick="window.location='http://serhamo.net';"></a>. Kelebihan dengan memakai onclick anda sanggup memasangnya pada tag apa saja contohnya tag <div onclick="window.location='http://serhamo.net';"></div> maka fungsi perpindahan alamat itu tetap berjalan.Pindah alamat hanya salah satu fungsi dari onclick, fungsi lainnya anda sanggup menambahkan style pada tag tertentu. Misalnya menyerupai rujukan dibawah saat tombol button di klik maka warna akan berkembang 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, saat 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 sanggup saja menginstruksikan menyerupai ini <button onclick="document.getElementById('coba').style='background:red;';">Fungsi Onclick</button>. Tetapi itu akan terlihat tidak proporsional, dan tidak cocok bila agresi yang ingin di jalankan lebih dari satu.
2. Onmouseenter
Ini menginstruksikan biar suatu fungsi atau function berjalan saat mouse di arahkan pada tag atau objek yang sudah di pasangkan onmouse enter. Penggunaanya sangat gampang anda hanya tinggal menambahakan menyerupai ini <a onmouseenter="klik()"></a>. Klik() disini merupakan function yang nantinya akan di jalankan, anda sanggup menciptakan 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 merupakan onmouseleave dimana ini merupakan kebalikan dari onmouseenter. Function akan berjalan jikalau mouse atau kursor di pindahkan menjauhi objek yang telah di tentukan. Akan tetapi biar function sanggup 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 biar saat objek di klik dua kali maka function akan berjalan. Anda pengguna komputer niscaya sudah tidak absurd dengan klik dua kali bukan. Dengan javascript anda sanggup memasang isyarat menyerupai ini pada web anda. Ingat dalam melanekan double klik atau klik dua kali anda harus cepat jangan memberi jeda, bila anda memberi jeda maka aktivitas 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 daqu bahas lagi di postingan selanjunya. Sekian dan terima kasih.
Post a Comment