Setup Menus in Admin Panel

3 Hal Dasar JavaScript Yang Dapat Kamu Lakukan Tanpa Library

Buat kamu yang terbiasa menggunakan jQuery atau library JavaScript lainnya sering kali tidak ingin menggunakan Pure JavaScript karena syntax nya yang terlalu panjang dan lebih parahnya kamu bahkan tidak tahu sama sekali bahwa beberapa fungsi dari library tersebut bisa kamu lakukan dengan mudah pada Pure JavaScript.

Berikut ini adalah 3 hal dasar JavaScript yang dapat kamu lakukan sendiri tanpa menggunakan library apapun.

1. Selector

Selector sudah menjadi hal biasa jika kamu sering menggunakan bahasa yang satu ini, mengapa demikian? Karena ketika kamu ingin memanipulasi DOM maka kamu perlu memilih elemen mana yang ingin kamu manipulasi. Jika pada jQuery kamu dapat melakukannya dengan cara berikut.

$(".myelement") // Mengakses elemen dengan class
$("#myelement") // Mengakses elemen dengan id

Pada syntax diatas maka JavaScript akan menghasilkan bentuk object dari elemen tersebut, setelah mendapatkan object lalu apa? Ketika kamu sudah mendapatkan object dari elemen yang kamu inginkan maka berikutnya kamu dapat memanipulasi elemen tersebut, seperti mengubah isi text, menambah class dan lain sebagainya.

Namun, jika pada pure JavaScript atau JavaScript murni alias tanpa menggunakan library apapun, maka kamu dapat melakukan hal tersebut dengan beberapa cara.

document.getElementById("element"); // Mengakses elemen dengan id

Pada syntax diatas maka kita akan mendapatkan hasil object dari elemen tersebut, namun jika kita menggunakan console.log() maka hasil pada console akan menampilkan isi dari elemen tersebut. Metode ini didukung oleh semua versi browser mulai dari IE6+, Firefox 2+, Chrome 1+, dan lain-lain.

Namun untuk mengakses elemen dengan class kita perlu menulisnya agak sedikit panjang, mengapa? Karena jika kita mengakses elemen dengan class maka secara otomatis kita mengakses semua elemen dengan class yang sama, beda halnya dengan id. Dengan id kita akan secara otomatis dapat mengakses 1 object elemen saja, karena id ini bersifat unique atau tidak boleh sama dengan yang lain, jadi setiap elemen yang diberi id maka harus berbeda dengan elemen yang memiliki id lainnya.

document.getElementsByClassName("element"); // Mengakses elemen dengan nama class

Dengan syntax diatas maka akan menghasilkan jumlah object sesuai dengan jumlah elemen yang memiliki class tersebut. Sebagai contoh:

[HTML]
<div class="element">

</div>
<div class="element">

</div>

[JavaScript]
document.getElementsByClassName("element");

Pada ilustrasi diatas maka hasilnya adalah seperti berikut:

(2) [div.element, div.element]

Akan menghasilkan 2 object elemen, karena kita memiliki 2 elemen dengan class yang sama. Jadi, untuk mengakses setiap elemen tersebut kita harus menggunakan perulangan seperti for().

var elements = document.getElementsByClassName('element');

for(var i=0; i < elements.length; i++) {
  var _this = elements[i];
  // do something here
}

Pada syntax diatas maka kita dapat mengakses setiap elemen HTML dengan variable _this. Namun jika pada jQuery kita dapat melakukannya dengan mudah, seperti ini:

$(".element")

Selain itu, kita dapat mengakses elemen pada HTML dengan metode-metode yang lainnya, seperti menggunakan document.queryselector, element.queryselector. Silahkan explore sendiri ya 😀

Referensi:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

 

2. Event Listener

Berikutnya adalah Event Listener. Apakah itu? Seperti yang kita ketahui bahwa Event Listener adalah memberikan sebuah event pada object HTML. Maksudnya? Maksudnya adalah ketika kita memberikan kode pada sebuah event listener maka kode tersebut akan di proses pada saat event tersebut terjadi, contohnya pada saat click, keyup, keydown.

Pada jQuery kita dapat melakukannya dengan mudah, misalkan kita ingin memberikan event pada sebuah tombol.

[HTML]
<button id="button">Click Me</button>

[JavaScript]
$("#button").click(function() {
  alert('Hello');
});

Pada syntax diatas maka kita akan melihat 1 buah tombol ketika di klik maka akan muncul sebuah alert pada browser.

Bagaimana pada Pure JavaScript? Pada Pure JavaScript maka akan dituliskan seperti berikut.

[HTML]
<button id="button">Click Me</button>

[JavaScript]
document.getElementById("button").addEventListener("click", function() {
  alert('Hello');
});

Walaupun secara penulisan berbeda, namun akan menampilkan hasil yang sama.

Pada Pure JavaScript kita dapat menggunakan method .addEventListener(event, callback) yang dimana memiliki 2 parameterParameter 1 diisi dengan event yang kita inginkan seperti: click, keyup, mousedown, etc. Parameter 2 diisi dengan function  yang kita inginkan setelah event tersebut dijalankan.

Referensi:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

 

3. Add & Remove Class

Kegiatan ini adalah hal yang biasa atau bahkan sering dilakukan oleh Front-end ataupun Back-end Developer. Mengapa? Karena ketika kita ingin membuat komponen seperti show/hide element dan lain sebagainya maka kita perlu melakukan metode ini.

Sebagai contoh, ketika kita memliki kode HTML seperti ini:

<div class="my-text">Hello, world!</div>

Dan CSS seperti ini:

.my-text {
  font-size: 20px;
}

.my-text.hide {
  display: none;
}

Maka text pada elemen dengan class “my-text” maka akan memiliki ukuran font 12 pixel. Dan ketika kita memberikan class tambahan yaitu “hide” maka elemen tersebut akan hilang. Nah, bagaimana jika kita ingin menghilangkan elemen tersebut atau menambahkan class “hide” tadi pada event atau kejadian tertentu? Misal kita ingin menghilangkan elemen tersebut pada saat mengklik sebuah tombol. Tentu, kita dapat melakukannya dengan mudah apabila menggunakan jQuery.

[HTML]
<div class="my-text">Hello, world!</div>
<button id="hide-text">Hide Text</button>

[JavaScript]
$("#hide-text").click(function() {
  $(".my-text").addClass("hide");
});

Pada kode diatas maka kita akan melihat sebuah tombol dan ketika kita klik tombol tersebut maka akan menambahkan class baru yaitu “hide” pada elemen dengan class “my-text” atau dapat dilihat sebagai berikut:

<div class="my-text">Hello, world!</div> // Sebelum tombol diklik

<div class="my-text hide">Hello, world!</div> // Setelah tombol diklik

Maka secara otomatis elemen tersebut akan hilang, karena pada CSS kita menambahkan property display:none; pada selector .my-text.hide.

Untuk melakukan add class pada Pure JavaScript maka kita dapat menggunakan cara seperti ini:

document.getElementById("hide-text").addEventListener("click", function() {
  document.getElementsByClassName("my-text")[0].classList += ' hide';
});

Fokus pada baris kedua pada kode diatas, kita menggunakan [0] setelah getElementsByClassName(“my-text”) karena seperti yang kita ketahui bahwa metode getElementsByClassName akan menampilkan 1 atau lebih dari 1 object dari elemen dengan class yang sama tergantung jumlah elemen dengan class tersebut maka gunakan [0] untuk mengakses object pertama saja karena kita hanya memiliki satu elemen saja dengan class “my-text”.

Untuk melakukan penghapusan class pada elemen kita dapat menggunakan metode .removeClass() pada jQuery dan kita dapat menggunakan metode .remove() pada Pure JavaScript. Sebagai contoh:

$(selector).removeClass("nama_class"); // Pada jQuery
[selector].remove("nama_class"); // Pada Pure JavaScript

Sebagai contoh kita akan membuat 2 buah tombol yang dimana tombol 1 akan menambahkan class “hide” dan tombol yang 1 nya lagi akan menghapus class hide. Jika pada Pure JavaScript kita dapat melakukannya seperti berikut:


Final Words

Menggunakan sebuah library hal yang baik ketika sedang membangun sebuah project, namun kita juga perlu tahu “pure code” pada bahasa tersebut. Boleh saja menggunakan jQuery, Meteor, AngularJS, dsb namun kita juga perlu tahu pure JavaScript agar kita bisa lebih memahami dan tidak salah paham mana kode asli dari JavaScript dan mana kode yang berasal dari library tersebut. Semoga Bermanfaat.

Digital Ocean baner
December 28, 2017
Copyright © Kodinger 2018. Powered by Multinity

X