자바스크립트 모듈은 매뉴얼웍스 6.0.5 버전부터 지원합니다.

자바스크립트 모듈이란?

객체 단락을 이용해서 자바스크립트 모듈을 삽입할 수 있습니다. 따라서 import, export 등의 키워드를 사용해 작성한 자바스크립트를 웹 뷰어에 넣을 수 있습니다.

다음은 자바스크립트 모듈로 작성한 간단한 같은 번호 찾기 게임입니다.

8개의 두자리수의 같은 번호가 있습니다. 연달아 같은 번호를 클릭해서 전체를 맞추는 간단한 게임입니다.

자바스크립트 모듈 넣기

객체 단락으로 자바스크립트 모듈을 넣습니다.

다음을 참고합니다.

객체 단락 유형으로 1자바스크립트 모듈을 선택합니다.
삽입할 2자바스크립트 주소를 넣습니다.
웹 뷰어에서 해당 객체 단락이 화면에 나타날 때 지연된 로딩(Lazy Loading)으로 처리합니다.

위 예제에서 사용한 자바스크립트 주소는 다음과 같습니다.

https://3rabbitz.github.io/javascript-module/find-same-numbers/module.js

참고 사항

자바스크립트 모듈을 사용할 때 다음을 참고합니다.

검증된 자바스크립트 사용

자바스크립트 모듈에서 웹 브라우저의 document 객체 등에 접근할 수 있습니다. 따라서 검증된 자바스크립트만을 사용합니다.

웹 뷰어에서 `Element` 객체 넣기

UI 구성을 위한 Element 객체를 넣는 방법입니다.

const id = new URL(import.meta.url).searchParams.get('id');
const panel = document.getElementById(id);

const button = document.createElement('button');
panel.append(button);

1객체 단락의 id 값을 구합니다.

2document.getElementById 함수로 객체 단락에 접근합니다.

4button과 같은 필요한 Element를 만듭니다.

5Element 객체를 객체 단락에 넣습니다.

동적으로 CSS 파일 넣기

CSS 파일은 다음 코드를 참고해서 추가합니다.

import sheet from './find-same-numbers.css' with  { type: 'css' };

document.adoptedStyleSheets = [sheet];

1./find-same-numbers.css를 실제 CSS 파일 위치로 변경합니다.

PDF, EPUB, MS 워드

자바스크립트 모듈을 지원하지 않는 PDF, EPUB, MS 워드 등의 파일에서는 웹 뷰어로 이동하는 링크를 삽입합니다.

3대안 URL을 설정하면 해당 주소로 이동합니다.