7117919d36
* chore(learn): audit basic algorithm scripting * chore(learn): audit basic data structures * chore(learn): audit basic javascript * chore(learn): audit debugging * chore(learn): audit es6 * chore(learn): audit functional programming * chore(learn): audit intermidate algorithms * chore(learn): audit js projects * chore(learn): audit object oriented programming * chore(learn): audit regex * fix(learn): remove stray . * fix(learn): string to code * fix(learn): missed some * fix(learn): clarify strings Based on Randy's feedback, clarifies string instances where quotes were removed in favour of back ticks. * fix: apply suggestions - thanks Randy! :) Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: non-suggestion comments * chore(learn): remove comments from codes Removes the comments from the description and instruction code blocks to ensure that all relevant information is translatable. * fix: Apply suggestions from code review Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com> * fix: revert crowdin fix * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: Apply suggestions from code review Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com> * fix: Apply suggestions from code review Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com> * chore: change voice * fix: Christopher Nolan * fix: expressions would evaluate * fix: will -> would * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: to work to push * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
74 lines
1.8 KiB
Markdown
74 lines
1.8 KiB
Markdown
---
|
||
id: 5cddbfd622f1a59093ec611d
|
||
title: Create a Module Script
|
||
challengeType: 6
|
||
forumTopicId: 301198
|
||
dashedName: create-a-module-script
|
||
---
|
||
|
||
# --description--
|
||
|
||
JavaScript started with a small role to play on an otherwise mostly HTML web. Today, it’s huge, and some websites are built almost entirely with JavaScript. In order to make JavaScript more modular, clean, and maintainable; ES6 introduced a way to easily share code among JavaScript files. This involves exporting parts of a file for use in one or more other files, and importing the parts you need, where you need them. In order to take advantage of this functionality, you need to create a script in your HTML document with a `type` of `module`. Here’s an example:
|
||
|
||
```html
|
||
<script type="module" src="filename.js"></script>
|
||
```
|
||
|
||
A script that uses this `module` type can now use the `import` and `export` features you will learn about in the upcoming challenges.
|
||
|
||
# --instructions--
|
||
|
||
Add a script to the HTML document of type `module` and give it the source file of `index.js`
|
||
|
||
# --hints--
|
||
|
||
You should create a `script` tag.
|
||
|
||
```js
|
||
assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
|
||
```
|
||
|
||
Your `script` tag should have the `type` attribute with a value of `module`.
|
||
|
||
```js
|
||
assert(
|
||
code.match(
|
||
/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g
|
||
)
|
||
);
|
||
```
|
||
|
||
Your `script` tag should have a `src` of `index.js`.
|
||
|
||
```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>
|
||
```
|