Category: Javascript

Belajar Membuat Custom Element Dan Shadow DOM Dasar di Javascript

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 elemen khusus dan mengajarkan tag ...

Apa Itu Shadow DOM?

Shadow DOM dapat mengisolasi sebagian struktur DOM di dalam komponen sehingga tidak dapat disentuh dari luar komponen atau nodenya. Singkatnya kita bisa sebut Shadow DOM sebagai “DOM dalam DOM”. Bagaimana ia bekerja? Perhatikan ilustrasi berikut: Sumber: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM Shadow DOM dapat membuat DOM Tree lain terbentuk secara terisolasi melalui host yang merupakan komponen dari regular DOM Tree ...

Contoh Nested Custom Element Di Javascript

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 secara berulang dengan data yang ...

Cara Membuat Fungsi setTimeout didalam Javascript

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 dibantu?") Jika kita hanya mengenal ...

Cara Membuat Callback Function di Javascript

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 membuat kue, silakan tunggu ....null*/ ...

Constructor didalam Javascript

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 = color;        this.enginesActive = false;  ...