.github
api-server
client
config
curriculum
challenges
_meta
arabic
chinese
english
01-responsive-web-design
02-javascript-algorithms-and-data-structures
basic-algorithm-scripting
basic-data-structures
basic-javascript
debugging
es6
compare-scopes-of-the-var-and-let-keywords.english.md
complete-a-promise-with-resolve-and-reject.english.md
create-a-javascript-promise.english.md
create-a-module-script.english.md
create-an-export-fallback-with-export-default.english.md
create-strings-using-template-literals.english.md
declare-a-read-only-variable-with-the-const-keyword.english.md
explore-differences-between-the-var-and-let-keywords.english.md
handle-a-fulfilled-promise-with-then.english.md
handle-a-rejected-promise-with-catch.english.md
import-a-default-export.english.md
mutate-an-array-declared-with-const.english.md
prevent-object-mutation.english.md
reuse-javascript-code-using-import.english.md
set-default-parameters-for-your-functions.english.md
use--to-import-everything-from-a-file.english.md
use-arrow-functions-to-write-concise-anonymous-functions.english.md
use-class-syntax-to-define-a-constructor-function.english.md
use-destructuring-assignment-to-assign-variables-from-arrays.english.md
use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md
use-destructuring-assignment-to-assign-variables-from-objects.english.md
use-destructuring-assignment-to-extract-values-from-objects.english.md
use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.english.md
use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.english.md
use-export-to-share-a-code-block.english.md
use-getters-and-setters-to-control-access-to-an-object.english.md
use-the-rest-parameter-with-function-parameters.english.md
use-the-spread-operator-to-evaluate-arrays-in-place.english.md
write-arrow-functions-with-parameters.english.md
write-concise-declarative-functions-with-es6.english.md
write-concise-object-literal-declarations-using-object-property-shorthand.english.md
functional-programming
intermediate-algorithm-scripting
javascript-algorithms-and-data-structures-projects
object-oriented-programming
regular-expressions
03-front-end-libraries
04-data-visualization
05-apis-and-microservices
06-information-security-and-quality-assurance
08-coding-interview-prep
09-certificates
portuguese
russian
spanish
schema
test
.babelrc
.editorconfig
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
commitizen.config.js
commitlint.config.js
create-challenge-bundle.js
getChallenges.js
gulpfile.js
index.js
lib.js
md-translation.js
package-entry.js
package-lock.json
package.json
utils.js
docs
search-indexing
tools
utils
.editorconfig
.eslintignore
.eslintrc.json
.gitattributes
.gitignore
.gitpod.yml
.node-inspectorrc
.prettierignore
.prettierrc
.snyk
.travis.yml
.vcmrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Dockerfile.tests
HoF.md
LICENSE.md
README.md
SECURITY.md
change_volumes_owner.sh
docker-compose-shared.yml
docker-compose.tests.yml
docker-compose.yml
lerna.json
package-lock.json
package.json
sample.env
70 lines
2.1 KiB
Markdown
70 lines
2.1 KiB
Markdown
---
|
||
id: 5cddbfd622f1a59093ec611d
|
||
title: Create a Module Script
|
||
challengeType: 6
|
||
forumTopicId: 301198
|
||
---
|
||
|
||
## Description
|
||
<section id='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 <code>module</code>. Here’s an example:
|
||
|
||
```html
|
||
<script type="module" src="filename.js"></script>
|
||
```
|
||
|
||
A script that uses this <code>module</code> type can now use the <code>import</code> and <code>export</code> features you will learn about in the upcoming challenges.
|
||
</section>
|
||
|
||
## Instructions
|
||
<section id='instructions'>
|
||
Add a script to the HTML document of type <code>module</code> and give it the source file of <code>index.js</code>
|
||
</section>
|
||
|
||
## Tests
|
||
<section id='tests'>
|
||
|
||
```yml
|
||
tests:
|
||
- text: You should create a <code>script</code> tag.
|
||
testString: assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
|
||
- text: Your <code>script</code> tag should be of type <code>module</code>.
|
||
testString: assert(code.match(/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g));
|
||
- text: Your <code>script</code> tag should have a <code>src</code> of <code>index.js</code>.
|
||
testString: assert(code.match(/<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g));
|
||
```
|
||
|
||
</section>
|
||
|
||
## Challenge Seed
|
||
<section id='challengeSeed'>
|
||
<div id='html-seed'>
|
||
|
||
```html
|
||
<html>
|
||
<body>
|
||
<!-- add your code below -->
|
||
|
||
<!-- add your code above -->
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
</div>
|
||
</section>
|
||
|
||
## Solution
|
||
<section id='solution'>
|
||
|
||
```html
|
||
<html>
|
||
<body>
|
||
<!-- add your code below -->
|
||
<script type="module" src="index.js"></script>
|
||
<!-- add your code above -->
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
</section>
|