# JavaScript Modules Full (ok)

### Ví dụ 1:

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FS7e5mwEttLtk9KvpOpl8%2Fimage.png?alt=media&#x26;token=a2789026-a7e2-4f9c-97ff-848b5f74ac65" alt=""><figcaption></figcaption></figure>

Fujifilm/gbalb-demo.cybozu.com4913/module.html

```html
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>
<p id="demo"></p>
<script type="module">
import message from "./message.js";
document.getElementById("demo").innerHTML = message();
</script>
</body>
</html>
```

Fujifilm/gbalb-demo.cybozu.com4913/message.js

```javascript
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
```

### Ví dụ 2:

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2Fdxz9cFI8wI9q726cGcw5%2Fimage.png?alt=media&#x26;token=cb2bd231-cb47-4e7a-8b82-402b7ad78231" alt=""><figcaption></figcaption></figure>

Fujifilm/gbalb-demo.cybozu.com4913/module.html

```
<!DOCTYPE html>
  <head>
  <script type="module">
    import { fnadd, fnsub, value as val } from './modulemath.js';
    import { hello } from './modulehello.js';
    var r1 = document.getElementById('result1');
    r1.innerHTML = "fnadd: " + fnadd(5,5);
    var r2 = document.getElementById('result2');
    r2.innerHTML = "fnsub: " + fnsub(100,5);
    var v = document.getElementById('value');
    v.innerHTML = val
    var h = document.getElementById('hello');
    h.innerHTML = hello("You")
    import * as mmath from  './modulemath.js';
    localStorage.radd = mmath.fnadd(5,5);
    localStorage.rsub = mmath.fnsub(100,5);
    localStorage.val = mmath.value;
    document.getElementById('result4').innerHTML = localStorage.radd;
    document.getElementById('result5').innerHTML = localStorage.rsub;
    document.getElementById('result6').innerHTML = localStorage.val;
  </script>
  <title>Import Demo</title>
</head>
<body>
  <h1>Import Demo</h1>
    <div id="result1"></div>
    <div id="result2"></div>
    <div id="value"></div>
    <div id="hello"></div>
    <div id="result3"></div>
    <div id="result4"></div>
    <div id="result5"></div>
    <div id="result6"></div>
</body>
</html>
```

Fujifilm/gbalb-demo.cybozu.com4913/modulemath.js

```
export var fnadd = function(a, b) {
  return a + b;
}
export var fnsub = function(a, b) {
  return a - b;
}
export var value = 1000;
```
