Belajar Fungsi Dasar Java Script
Belajar Fungsi Dasar Java Script Setelah mengetahui apa fungsi dari javascript itu sendiri pada postingan Kenali Terlebih Dahulu Apa itu JavaScript...
Home » Penelusuran JavaScript
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.
Aziz Blogger November 26, 2018 Admin Bandung Indonesia
Java Script adalah salah satu bahasa pemrograman berbasis website. Kemampuannya yang bisa mengendalikan website layaknya pengguna membuat Java Script menjadi favorite para programer.
Bahasa pemrograman ini pertama kali dikembangkan oleh Brendan Eich, seorang Co-Founder dari Mozilla (peramban web terbesar di dunia). Sebelum menjadi JavaScript, dulunya diberi nama Mocha, kemudian LiveScript, hingga yang kita kenal saat ini sebagai JavaScript (JS).
Anda mungkin masih bingung apa sih kegunaan dari JavaScript ini. Nah, untuk lebih memahami anda bisa melihat beberapa contoh penggunaan JavaScript berikut ini :
Fungsi lain dari JavaScript adalah membuat slide, bisa dilihat dari contohnya yang sudah banyak digunakan oleh website-website besar seperti kompas.com, telkomsel.com, bahkan web ui.ac.id. Slide sendiri bisa berupa kumpulan gambar yang akan bergantian muncul pada halaman yang telah di atur. Penggunaan slide pada website akan membuat tampilan menjadi lebih menarik tentunya.
Selanjutnya dalam hal validasi, untuk anda yang sering memut from pendaftaran tentunya biasanya bingung bagaimana cara membuat langsung validasi di halaman form. Contohnya untuk inputan tipe email, dengan menggunakan JavaScript anda bisa mendeteksi langsung apakah format yang dimasukkan user sudah benar email atau bukan. Dengan begitu web tidak perlu menunggu user mengisi semua form untuk mendapatkan validasi mana inputan yang salah.
Selain fungsi di atas, sebenarnya masih banyak lagi fungsi-fungsi dari JavaScript. Fungsi-fungsi ini akan dengan sendirinya kita ketahui bila sudah mendalami pemrograman JavaScript.
Aziz Blogger November 01, 2018 Admin Bandung Indonesia
Kenali Terlebih Dahulu Apa itu JavaScript ?
Java Script adalah salah satu bahasa pemrograman berbasis website. Kemampuannya yang bisa mengendalikan website layaknya pengguna membuat Java Script...
