Cara menggunakan ES Module JSCroot untuk import function renderHTML, onClick, dan setInner

1. Buka Website JSCroot

Langkah pertama, pastikan sudah membuka website JSCroot di alamat jscroot.if.co.id. Setelah itu, scroll ke bawah hingga menemukan bagian “List of library components” atau langsung klik tautan ini. Simpan link CDN dari module /element.js untuk digunakan nanti.

2. Buat Project Baru atau Edit Project yang Sudah Ada

Selanjutnya, buat project baru menggunakan editor seperti VS Code atau edit project yang sudah ada. Struktur project Anda sebaiknya ditata dengan rapi. Contoh struktur dasar:

• index.html (file utama)
• home.html (file tambahan)
• main.js (file JavaScript utama)

3. Buka File index.html

Isi file index.html seperti berikut :

Penjelasan:

• Gunakan type="module" agar file JavaScript bisa membaca module yang diimpor.
• Tambahkan atribut id="" untuk elemen tertentu karena akan digunakan untuk pemanggilan di main.js.

4. Buat File HTML Tambahan

Buat file HTML tambahan seperti home.html. Isi file ini bebas sesuai kebutuhan. Contoh:

5. Import Module JSCroot di main.js

Buka file main.js dan tambahkan kode berikut di baris pertama:

Penjelasan:

• Pastikan menuliskan nama fungsi yang ingin diimpor di dalam kurung kurawal {}.

6. Gunakan Fungsi renderHTML

Contoh penggunaan fungsi renderHTML:

Penjelasan:

• renderHTML digunakan untuk mengganti isi elemen berdasarkan id dengan konten dari file HTML lain.
• Parameter pertama adalah id dari elemen di index.html.

• Parameter kedua adalah path file HTML yang akan dipanggil.
• Jika berhasil, isi elemen dengan id content akan diganti dengan isi dari file home.html. Jika terjadi error, elemen akan tetap menampilkan teks “Loading...”.

7. Gunakan Fungsi onClick

Contoh penggunaan fungsi onClick:

Penjelasan:

• Fungsi onClick digunakan untuk menambahkan event klik pada elemen dengan id tertentu.
• Parameter pertama adalah id dari elemen yang akan diberi event klik.
• Parameter kedua adalah fungsi yang akan dijalankan ketika elemen diklik.

8. Gunakan Fungsi setInner

Contoh penggunaan fungsi setInner:

Penjelasan:

• Fungsi setInner digunakan untuk mengganti isi elemen secara langsung dari main.js.
• Parameter pertama adalah id dari elemen yang ingin diubah isinya.
• Parameter kedua adalah konten baru dalam format string HTML.

9. Kombinasi Fungsi setInner dengan onClick

Fungsi setInner dapat digabungkan dengan onClick untuk membuat elemen dinamis. Contoh:

Penjelasan:

• Saat elemen dengan id github diklik, fungsi setInner akan mengganti isi elemen dengan teks baru.

Dengan mengikuti langkah-langkah di atas, Anda dapat memanfaatkan ES Module JSCroot untuk membuat aplikasi web yang dinamis dan modular. Semoga tutorial ini bermanfaat!

Sekian dan Terima Kasih!