Ihsan Magazine – Kali ini kita akan mencoba belajar membuat Custom Element dasar di Javascript, apa itu Custom Element? Gampang nya Custom Element seperti kita Membuat Tag HTML baru untuk Front End Developer. Bisa untuk memperluas elemen bawaan HTML, dan masih banyak lagi, dasarnya menggunakan Elements global digunakan untuk mendefinisikan …

Ketika menggunakan custom element, mungkin terdapat keadaan di mana kita membutuhkan custom element berada di dalam custom element lain. Contohnya, banyak website saat ini yang menampilkan data berupa list, entah itu daftar artikel ataupun item belanja.  Biasanya setiap daftar yang ditampilkan ditampung dalam sebuah container <div>. Kemudian item yang sama ditampilkan …

Hal yang membuat bingung ketika kita bekerja dengan synchronous dan asynchronous program adalah bagaimana menangani suatu nilai yang didapatkan secara asynchronous pada program yang berjalan secara synchronous.  Contohnya seperti kode berikut: const getCake = () => { let cake = null; console.log("Sedang membuat kue, silakan tunggu ....") setTimeout(() => {   cake = "Kue Selesai!" }, 3000) return cake;} const cake = getCake();console.log(cake); /*output:Sedang …

Fungsi setTimeout() merupakan cara yang paling mudah untuk membuat kode kita dijalankan secara asynchronous. Fungsi ini menerima dua buah parameter.  Pertama adalah fungsi yang akan dijalankan secara asynchronous, dan kedua adalah nilai number dalam milisecond sebagai nilai tunggu sebelum fungsi dijalankan. Contoh penggunaannya adalah seperti ini: console.log("Selamat datang!");setTimeout(() => { console.log("Terimakasih sudah mampir, silakan datang kembali!")}, 3000)console.log("Ada yang bisa …

Seluruh kendaraan pasti butuh yang namanya perawatan bukan? Jika iya, tentu kita perlu membuat method repair untuk memperbaiki kendaraan tersebut.  Dalam analogi dunia nyata, ketika kendaraan mengalami kerusakan maka kendaraan tersebut akan diperbaiki di bengkel (factory), sehingga kita perlu membuat class baru yang berperan sebagai factory, sebutlah class tersebut VehicleFactory. Di dalam kelas VehicleFactory terdapat …

Dalam gambaran dunia nyata, banyak objek yang berbeda tetapi punya kesamaan atau kemiripan tertentu.  Contohnya mobil dengan motor memiliki banyak kesamaan karena objek tersebut merupakan kendaraan. Mobil merupakan kendaraan darat begitu juga dengan motor. Mungkin yang membedakan objek tersebut adalah jumlah roda dan kapasitas penumpang yang dapat ditampung.  Sama halnya …

Untuk menambahkan method pada class, kita juga cukup menuliskannya pada body class, tidak perlu melalui prototype seperti menggunakan constructor function. class Car {    constructor(manufacture, color) {        this.manufacture = manufacture;        this.color = color;        this.enginesActive = false;    }        startEngines() {        console.log("Mesin dinyalakan");  …

Melalui objek class kita juga dapat mengubah nilai properti seperti ini: class Car {    constructor(manufacture, color) {        this.manufacture = manufacture;        this.color = color;        this.enginesActive = false;    }} const johnCar = new Car("Honda", "Red");console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: Red johnCar.color = "White"; // Mengubah nilai properti color menjadi white console.log(`Warna mobil: ${johnCar.color}`); // …

Setelah kita membuat class pada JavaScript, lantas bagaimana cara membuat instance dari class tersebut?  Tapi sebelumnya, apa itu instance? Instance merupakan objek yang memiliki properti dan method yang telah ditentukan oleh blueprint-nya (class), atau singkatnya adalah objek yang merupakan hasil realisasi dari sebuah blueprint. Sama seperti constructor function, untuk membuat instance dari class pada ES6 kita …

Deklarasi class menggunakan ES6 memiliki sifat yang sama seperti pembuatan class menggunakan function constructor (seperti contoh sebelumnya).  Namun alih-alih menggunakan function constructor dalam menginisialisasi propertinya, class ini memisahkan constructornya dan ditempatkan pada body class menggunakan method spesial yang dinamakan constructor.  class Car {    constructor(manufacture, color) {        this.manufacture = manufacture;        this.color = …