74 lines
2.5 KiB
Markdown
74 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
id: 5cddbfd622f1a59093ec611d
|
|||
|
|
title: Створіть модульний скрипт
|
|||
|
|
challengeType: 6
|
|||
|
|
forumTopicId: 301198
|
|||
|
|
dashedName: create-a-module-script
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Спочатку мова JavaScript відігравала незначну роль на веб-сторінках HTML, створених по-іншому. Сьогодні вона має величезне значення. Деякі сайти навіть створюються майже повністю за допомогою JavaScript. Для того, щоб мова JavaScript була більш модульною, точною і зручною у користуванні, ES6 створив новий спосіб для доступної передачі коду між файлами JavaScript. Таким чином, ви можете експортувати частини файлу і використати їх в більше ніж одному іншому файлі, а також імпортувати потрібні вам уривки. Щоб скористатися таким функціоналом, необхідно створити скрипт у вашому HTML-документі з `module` `type`. Наприклад:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<script type="module" src="filename.js"></script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Скрипт, що використовує тип `module`, відтепер може використовувати функції `import` і `export`, про які ви дізнаєтеся більше у наступних завданнях.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Додайте скрипт до HTML-документа типу `module` та зробіть його вихідним файлом `index.js`
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Ви маєте створити тег `script`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш тег `script` повинен мати атрибут `type` зі значенням `module`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
code.match(
|
|||
|
|
/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш тег `script` повинен мати `index.js` `src`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
code.match(
|
|||
|
|
/<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<html>
|
|||
|
|
<body>
|
|||
|
|
<!-- Only change code below this line -->
|
|||
|
|
|
|||
|
|
<!-- Only change code above this line -->
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<html>
|
|||
|
|
<body>
|
|||
|
|
<script type="module" src="index.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|