lib

Element Functions

• English Version

Pendahuluan

Modul ini menyediakan kumpulan fungsi JavaScript untuk mempermudah manipulasi DOM, penanganan event, dan pengelolaan konten dinamis.

Instalasi

Cukup sertakan file JavaScript dalam proyek Anda atau impor fungsi-fungsinya sebagai modul ES:

import { onClick, onClicks, onChange, onChanges, onInput, onInputs, container, setValue, getValue, renderHTML, addJS, addCSS } from 'https://cdn.jsdelivr.net/gh/jscroot/lib@0.2.6/element.js';

Fungsi dan Penggunaan

Pemilihan Elemen DOM

container(id)

Mengambil elemen berdasarkan ID.

const element = container('myElement');

Penanganan Event

onClick(id, actionFunction)

Menambahkan event klik ke elemen berdasarkan ID.

Contoh tanpa argumen:

function handleClick() {
    console.log("Tombol diklik!");
}

onClick('myButton', handleClick);

Contoh dengan argumen:

function handleClickWithArgs(target) {
    console.log("Tombol diklik!", target.id);
}

onClick('myButton', handleClickWithArgs);

onClicks(className, actionFunction)

Menambahkan event klik ke semua elemen dengan class tertentu.

Contoh tanpa argumen:

function handleMultipleClicks() {
    console.log("Sebuah elemen diklik!");
}

onClicks('myClass', handleMultipleClicks);

Contoh dengan argumen:

function handleMultipleClicksWithArgs(element) {
    console.log("Elemen yang diklik:", element.className);
}

onClicks('myClass', handleMultipleClicksWithArgs);

onChange(id, actionFunction)

Menambahkan event perubahan nilai ke elemen berdasarkan ID.

function handleChange(element) {
    console.log("Input berubah:", element.value);
}

onChange('myInput', handleChange);

onChanges(className, actionFunction)

Menambahkan event perubahan nilai ke semua elemen dengan class tertentu.

function handleMultipleChanges(element) {
    console.log("Input diubah:", element.value);
}

onChanges('myClass', handleMultipleChanges);

onInput(id, actionFunction)

Menambahkan event input ke elemen berdasarkan ID.

function handleInput(element) {
    console.log("Nilai input:", element.value);
}

onInput('myInput', handleInput);

onInputs(className, actionFunction)

Menambahkan event input ke semua elemen dengan class tertentu.

function handleMultipleInputs(element) {
    console.log("Input berubah secara real-time:", element.value);
}

onInputs('myClass', handleMultipleInputs);

Manipulasi DOM

setValue(id, valueContent)

Mengatur nilai dari input field.

setValue('myInput', 'Nilai Baru');

getValue(id)

Mengambil nilai dari input field.

const value = getValue('myInput');
console.log(value);

setInner(id, content)

Mengatur inner HTML dari elemen.

setInner('myDiv', '<p>Halo Dunia</p>');

setInnerText(id, content)

Mengatur inner text dari elemen.

setInnerText('myDiv', 'Halo Dunia');

Visibilitas dan Gaya

show(id)

Menampilkan elemen dengan mengatur display: block.

show('myDiv');

hide(id)

Menyembunyikan elemen dengan mengatur display: none.

hide('myDiv');

Pemuatan Konten Dinamis

renderHTML(id, urlHTML, callback = null)

Memuat konten HTML eksternal ke dalam elemen.

function afterContentLoad() {
    console.log('Konten berhasil dimuat');
}

renderHTML('content', 'content/home.html', afterContentLoad);

replaceTag

Fungsi replaceTag digunakan untuk menggantikan elemen dengan ID tertentu di dalam dokumen dengan elemen dari file HTML eksternal.

replaceTag('myElement', 'component.html', () => {
    console.log('Elemen berhasil diganti!');
});

Parameter

• id (String) - ID dari elemen yang akan diganti.
• urlHTML (String) - URL dari file HTML yang akan digunakan sebagai pengganti.
• callback (Function, opsional) - Fungsi yang akan dijalankan setelah elemen berhasil diganti.

Contoh Penggunaan

<div id="content">Ini akan diganti</div>
<script>
    replaceTag('content', 'newContent.html', () => {
        console.log('Penggantian berhasil!');
    });
</script>

Fungsi replaceTag untuk menggantikan elemen dengan ID yang diberikan dengan elemen dari file HTML eksternal

Pengelolaan Script dan CSS

addJSInHead(src)

Menambahkan file JavaScript secara dinamis ke dalam dokumen.

await addJSInHead('https://example.com/script.js');

addCSSInHead(href)

Menambahkan file CSS secara dinamis ke dalam dokumen.

await addCSSInHead('https://example.com/styles.css');

isCSSLoaded(href)

Memeriksa apakah file CSS sudah dimuat.

if (isCSSLoaded('styles.css')) {
    console.log('CSS sudah dimuat');
}

isJSLoaded(src)

Memeriksa apakah file JavaScript sudah dimuat.

if (isJSLoaded('script.js')) {
    console.log('JS sudah dimuat');
}

addJS(src)

Menambahkan file JavaScript ke dalam dokumen hanya jika belum dimuat sebelumnya.

await addJS('https://example.com/script.js');

addCSS(href)

Menambahkan file CSS ke dalam dokumen hanya jika belum dimuat sebelumnya.

await addCSS('https://example.com/styles.css');

Kesimpulan

Modul utilitas ini menyederhanakan interaksi dengan DOM dan penanganan event, sehingga mempermudah pengelolaan aplikasi web dinamis. Gunakan fungsi-fungsi ini untuk merapikan kode JavaScript Anda!

This site is open source. Improve this page.