<script type="module">
これにより次のようなことが起こります
・1. this のデフォルト が window ではなく undefined になる。
・2. 実行タイミングが body の後になる( $(document).ready よりかは前 )。
・3. コードは常にStrictモードで実行される。
・4. import / export が使用できるようになる。
・5. 動的なモジュールの読み込みが可能になる。
・6. 同じ <script type="module" src="myfile.js"></script> は何時出しても1度しか実行されない
https://pgmemo.tokyo/livedemo/javascript_type_module/default.html
https://pgmemo.tokyo/livedemo/javascript_type_module/type_module.html
<script>
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById( 'jstext' ).innerHTML += '● 3. DOMContentLoaded ';
});
</script>
<script type="module">
console.log( '● this' );
console.log( this );
document.getElementById( 'jstext' ).innerHTML += '● 2. jsによる出力(type="module") ';
</script>
<div>javascriptのテストを行います。</div>
<script>
document.getElementById( 'jstext' ).innerHTML += '● 1. js text ';
</script>
引用 : https://qiita.com/azukiazusa/items/98845e79807fff0dd3cb
https://hidekazu-blog.com/javascript-module/#toc11
file://
URL を使って) HTML ファイルを読み込もうとすると、JavaScript モジュールのセキュリティ要件のために、CORS エラーが発生します。テストはサーバー経由で行う必要があります。defer
属性 を使う必要はありません。モジュールは自動的に遅延実行されます。<script>
タグで参照されていても一度しか実行されません。windowsオブジェクトに勝手にプロパティーを追加してグローバル変数とします
window.globals = {変数名: 値}