Pengertian Javascript
JavaScript adalah bahasa pemrograman tingkat tinggi yang digunakan untuk mengembangkan aplikasi web interaktif dan dinamis. Bahasa ini sangat populer di kalangan pengembang web karena kemampuannya untuk memanipulasi HTML dan CSS, membuat animasi, mengambil input dari pengguna, dan berkomunikasi dengan server untuk mengambil atau menyimpan data.
JavaScript dapat dijalankan di sisi klien (client-side) pada browser pengguna atau di sisi server (server-side) dengan menggunakan platform seperti Node.js. Bahasa ini memiliki sintaks yang mirip dengan bahasa pemrograman lain seperti Java atau C++, namun lebih mudah dipelajari karena lebih fleksibel dan mudah digunakan.
addEventListener Click pada Javascript
Pada tutorial ini saya akan membahas tentang addEventListener Click pada Javascript dan menerapkannya pada contoh praktek.
sebelum kita bahas dulu pengertian addEventListener Click pada Javascript, addEventListener adalah metode pada objek DOM (Document Object Model) di JavaScript yang digunakan untuk menambahkan fungsi event handler ke elemen HTML. Dalam hal ini, click adalah salah satu event yang dapat di-handle menggunakan addEventListener.
Sekarang tanpa banyak materi kita langsung saja masuk ke prakteknya.
Pada praktek ini dibutuhkan aplikasi editor, bisa menggunakan aplikasi editor apa saja dan disini saya menggunakan Visual Studio Code. saya sarankan untuk menggunakan aplikasi editor yang sama agar memudahkan kamu dalam mengikuti praktek ini.
Setelah menyiapkan aplikasi editor nya, sekarang kita membuat sebuah folder dengan nama sesuai keinginakan sendiri.
Silakan buka aplikasi editor nya dan dipojok kiri atas pilih FILE dan pilih OPEN FOLDER lalu bukan folder yang sudah dibuatkan sebelumnya.
Setelah itu silakan klik kanan pada folder tersebut dan pilih NEW FILE dan beri nama index.html.
Lalu lakukan hal sama untuk membuat file style.css dan main.js
Pastikan ke tiga file tersebut dibuat dalam folder yang sama dan menggunakan huruf kecil.
Membuat kode html
Setelah semua nya selesai dan tidak ada masalah, sekarang saatnya mulai ngoding.
Silakan buka file index.html dan ketik atau copy paste kode berikut ini.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Event in javascript</title>
</head>
<body>
<div class="container">
<button id="tombol">Klik saya</button>
<h3 id="hasil"></h3>
</div>
<script src="main.js"></script>
</body>
</html>
Kode tersebut adalah struktur html yang mana didalamnya berisi kode yang akan ditampikan di browser.
Kode ini <link rel="stylesheet" href="style.css"/> adalah kode yang digunakan untuk menghubungkan html dan css.
Kode ini <title>Event in javascript</title> adalah kode yang tampil di browser sebagai judul dari website.
Kode ini <script src="main.js"></script> adalah kode yang digunakan untuk menghubungkan html dan javascript.
Kode ini <div class="container"></div> adalah kode yang memiliki identitas class yang berfungsi sebagai perent dari semua elemen kode didalamnya.
Kode ini <button id="tombol">Klik saya</button> adalah kode yang berfungsi sebagai tombol dengan value Klik saya. value tersebut akan muncul di browser sebagai tombol.
Kode ini <h3 id="hasil"></h3> adalah Heading Tiga atau dalam kode disingkat dengan H3, disini kode tersebut sengaja kita kosongkan tanpa value yang nantinya didalam Javascript nya kita manipulasi dengan DOM atau Document Object Model.
Didalam tag button dan h3 kita menggunakan id untuk menentukan identitas unik yang nanti kita gunakan didalam Javascript untuk merepresentasikan elemennya.
Membuat kode css
Setelah kita membuat kode html nya, sekarang yang kita lakukan adalah membuat kode css nya.
Silakan buka file style.css dan ketik atau copy paste kode berikut ini.
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Pada tutorial ini kita membuat kode yang sangat sederhana untuk mendesain html kita. jika ingin menambahkan kode css lain silakan disempunakan sendiri untuk mempercantik tampilan html nya.
Kode ini dibawah ini digunakan untuk reset keseluruhan margin dan paddingnya hal ini bertujuan untuk mempermudah kita dalam mendesain html selanjutnya.
margin: 0;
padding: 0;
}
Kode dibawah ini digunakan untuk mendesain halaman website, dimana disini kita mengatur width atau lebarnya menjadi 100% dan height atau tingginya kita atur menjadi 100vh atau vewheight port, kedua kode tersebut menghasilkan lebar dan tinggi memenuhi layar display yang kita gunakan entah itu laptop, hp dan lain lain.
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Membuat kode Javascript
Setelah kita membuat kode html dan css seperti diatas, sekarang kita membuat kode Javascriptnya.
Silakan buka file main.js dan ketik atau copy paste kode berikut ini.
const hasil = document.getElementById("hasil");
tombol.addEventListener("click", function () {
hasil.innerHTML = "Tombol sudah di Klik";
tombol.style.display = "none";
setTimeout(() => {
tombol.style.display = "block";
hasil.style.display = "none";
}, 3000);
});
Setelah dipastekan kode tersebut, perhatikan penjelasan saya untuk dapat memahami fungsi dan tujuan kodenya.
Kode dibawah ini berfungsi untuk merepresentasikan atau menyeleksi elemen html yang kita buat sebelumnya. kita menyeleksi elemen html berdasarkan id itulah sebabnya kita menggunakan id dikode html kita sebagai identitas unik.
Pada kode ini kita mendeklarasikan dua buah variabel dan melakukan assignment pada variabel tersebut dengan nama tombol dan hasil. penamaan variabel ini bisa menggunakan apa saja, yang perlu diperhatikan adalah nama variabel yang kita gunakan harus mewakili value yang akan kita berikan. setelah kita melakukan deklarasi variabel, kita menyeleksi elemen html berdasarkan id untuk itu kita menggunakan method getElementById.
const hasil = document.getElementById("hasil");
Kode dibawah ini digunakan untuk menangani event click pada button yang kita buat sebelumnya.
dimana tombol adalah variabel yang kita yang kita seleksi sebelumnya, addEventListener adalah sebuah method object pada javascript yang digunakan untuk menentukan jenis event yang akan kita gunakan, click adalah sebuah event yang kita gunakan untuk merepresentasikan sebuah kejadian atau peristiwa pada button yang kita buat sebelumnya, function(){} digunakan untuk menjalankan aksi saat button di klik.
tombol.addEventListener("click", function () {});
Kode dibawah ini, kita memanggil variabel hasil lalu kita manipulasi isi dari html dengan .innerHTML dan mengganti isi nya menjadi "Tombol sudah diklik"
hasil.innerHTML = "Tombol sudah di Klik";
Kode bawah ini, kita memanggil variabel tombol lalu kita menggunakan .style.display dan kita ubah value nya menjadi "none" hal ini akan membuat tombol menghilang pada saat diklik dan menampilkan tulisan "Tombol sudah diklik".
tombol.style.display = "none";
Kode dibawah ini, kita menggunakan callback yaitu setTimeout untuk memanggil kembali variabel tombol dan hasil dalam rentan waktu 3 detik atau 3000 milidetik. pada kode tersebut setelah 3 detik akan muncul kembali tombol yang kita hilangkan tadi dari "none" menjadi "block" dan tulisan "Tombol sudah diklik" akan menghilang hal ini karena kita memberikan value "none".
tombol.style.display = "block";
hasil.style.display = "none";
}, 3000);
Jika sudah selesai dipahami jangan lupa save semua kode tersebut termasuk index.html, style.css dan main.js. lalu silakan jalankan atau run kodingan tersebut dan silakan lihat hasilnya.
Sekarang praktek Tutorial addeventlistener click pada Javascript sudah selesai, jika ada pertanyaan atau ada kendala dalam kodingan ini silakan ajukan pertanyaan di kolom komentar.
Saya berharap dengan Tutorial addeventlistener click pada Javascript ini bisa memberikan manfaat untuk untuk yang sedang belajar dan bisa mengaplikasikan kode tersebut pada project atau kodingan lainnya.
Terima kasih dan salam sehat!
2 komentar