1. Перейдіть на сторінку jscroot.if.co.id
Для того щоб прочитати більш детальну документацію, натисніть JSCroot : A Pure Vanilla JavaScript ES6+ Modules Static Web Transformator Transform Static Web into Dynamic Website | jscroot2.
2. Відкрийте улюблений редактор коду
- Створіть нову папку
- Створіть новий файл
Новий файл
3. Заповніть файл index.html наступним кодом
Loading, please wait...
COBA KLIK TOMBOL DI BAWAH
Click
//LINK YANG HARUS DI MASUKAN DI PALING BAWAH TAG BODY
4. Заповніть файл page2.html наступним кодом
5. Заповніть файл index.js наступним кодом
Це частина функції renderHTML: “loading” — це виклик id, що знаходиться в файлі index.html. Якщо хочете дізнатися більше про бібліотеки/модулі, натисніть тут, після цього можна натискати Ctrl+F і шукати renderHTML та зрозуміти, якщо все ще незрозуміло.
“page2.html” — це параметр, який використовується для об'єднання сторінок index.html і page2.html.
import {renderHTML} from "https://cdn.jsdelivr.net/gh/jscroot/[email protected]/element.js";
renderHTML("loading", "page2.html")
Якщо все ще не зрозуміло, ви можете змінити “id”, щоб зрозуміти, як це працює.
6. Заповніть файл index.js наступним кодом
У функції setInner параметр “tombolSaya” викликається з id, яке знаходиться в файлі index.html. “DAH DI KLIK BRO” — це контент, який замінює вміст параметра id “tombolSaya”. Щоб перевірити, спробуйте це зробити.
import {onClick, setInner} from "https://cdn.jsdelivr.net/gh/jscroot/[email protected]/element.js";
function actionFunction() {
setInner("tombolSaya", "DAH DI KLIK BRO")
}
onClick("tombolSaya", actionFunction)
У функції onClick параметр “tombolSaya” викликається з id, яке знаходиться в файлі index.html. При натисканні на нього виконується actionFunction, яка в свою чергу викликає функцію setInner з модуля JSCroot. Якщо хочете більше зрозуміти, відкрийте документацію cdn jsdelivr.
Щоб перевірити, спробуйте це зробити.
УСПІХІВ В ДОСЛІДЖЕННІ, ГАЙС
Перекладено з: Penggunaan ES Module Menggunakan JSCroot Dengan Import Fungsi renderHTML, onClick dan setInner