fix/final-draft-before-reviews
This commit is contained in:
moT01
committed by
Kristofer Koishigawa
Kristofer Koishigawa
parent
956212cdc0
commit
6e8bbd169b
@ -6,19 +6,18 @@ challengeType: 6
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Javascript started with a small role to play on an otherwise mostly html internet. 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 javascript 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:
|
||||
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>
|
||||
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
|
||||
@ -29,20 +28,18 @@ 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));
|
||||
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));
|
||||
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 -->
|
||||
@ -50,18 +47,15 @@ tests:
|
||||
<!-- add your code above -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<!-- add your code below -->
|
||||
@ -69,6 +63,6 @@ tests:
|
||||
<!-- add your code above -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -11,12 +11,12 @@ There is another <code>export</code> syntax you need to know, known as <dfn>expo
|
||||
Here is a quick example of <code>export default</code>:
|
||||
|
||||
```js
|
||||
export default function add(x,y) {
|
||||
export default function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
```
|
||||
|
||||
Note: Since <code>export default</code> is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use <code>export default</code> with <code>var</code>, <code>let</code>, or <code>const</code>
|
||||
Since <code>export default</code> is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use <code>export default</code> with <code>var</code>, <code>let</code>, or <code>const</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
@ -30,40 +30,31 @@ The following function should be the fallback value for the module. Please add t
|
||||
```yml
|
||||
tests:
|
||||
- text: Your code should use <code>export</code> fallback.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/export\s+default\s+function\s+subtract\(x,y\)\s+{return\s+x\s-\s+y;}/g), 'Your code should use <code>export</code> fallback.');
|
||||
|
||||
testString: assert(code.match(/export\s+default\s+function\s+subtract\s*\(\s*x,\s*y\s*\)\s*{/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
function subtract(x,y) {return x - y;}
|
||||
function subtract(x, y) {
|
||||
return x - y;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
self.exports = function(){};
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
export default function subtract(x,y) {return x - y;}
|
||||
export default function subtract(x, y) {
|
||||
return x - y;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,20 +6,18 @@ challengeType: 1
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the last challenge, you learned about <code>export default</code> and its uses. It is important to note that, to import a default export, you need to use a different <code>import</code> syntax.
|
||||
In the following example, we have a function, <code>add</code>, that is the default export of a file, <code>"math_functions"</code>. Here is how to import it:
|
||||
In the last challenge, you learned about <code>export default</code> and its uses. To import a default export, you need to use a different <code>import</code> syntax. In the following example, <code>add</code> is the default export of the <code>math_functions.js</code> file. Here is how to import it:
|
||||
|
||||
```js
|
||||
import add from "math_functions";
|
||||
add(5,4); // Will return 9
|
||||
import add from "./math_functions.js";
|
||||
```
|
||||
|
||||
The syntax differs in one key place - the imported value, <code>add</code>, is not surrounded by curly braces, <code>{}</code>. Unlike exported values, the primary method of importing a default export is to simply write the value's name after <code>import</code>.
|
||||
The syntax differs in one key place. The imported value, <code>add</code>, is not surrounded by curly braces (<code>{}</code>). The primary method of importing a default export is to simply write the value's name after <code>import</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
In the following code, please import the default export, <code>subtract</code>, from the file <code>"math_functions"</code>, found in the same directory as this file.
|
||||
In the following code, import the default export, <code>subtract</code>, from the file <code>math_functions.js</code>, found in the same directory as this file.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -27,47 +25,33 @@ In the following code, please import the default export, <code>subtract</code>,
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You need to properly import <code>subtract</code> from <code>"math_functions"</code>.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/import\s+subtract\s+from\s+('|")math_functions\1/g), 'You need to properly import <code>subtract</code> from <code>"math_functions"</code>.');
|
||||
|
||||
- text: You should properly import <code>subtract</code> from <code>math_functions.js</code>.
|
||||
testString: assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
|
||||
// add code above this line
|
||||
|
||||
subtract(7,4);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
self.require = function(str) {
|
||||
if (str === 'math_functions') {
|
||||
return function(a, b) {
|
||||
return a - b;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
import subtract from "math_functions";
|
||||
import subtract from "./math_functions.js";
|
||||
// add code above this line
|
||||
|
||||
subtract(7,4);
|
||||
```
|
||||
|
||||
|
||||
@ -6,15 +6,15 @@ challengeType: 1
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>import</code> allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported <code>add</code> from the file <code>math_functions.js</code>. Here's how you can import them into another file:
|
||||
<code>import</code> allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported <code>add</code> from the <code>math_functions.js</code> file. Here's how you can import it to use in another file:
|
||||
|
||||
```js
|
||||
import { add } from './math_functions.js';
|
||||
```
|
||||
|
||||
Here, <code>import</code> will find <code>add</code> in <code>math_functions.js</code>, import just that function for you to use, and ignore the rest. The <code>./</code> tells the import to look for the <code>math_functions.js</code> file in the same folder that the file which uses the import statement is. The relative file path (<code>./</code>) and file extension (<code>.js</code>) are required when using import in this way.
|
||||
Here, <code>import</code> will find <code>add</code> in <code>math_functions.js</code>, import just that function for you to use, and ignore the rest. The <code>./</code> tells the import to look for the <code>math_functions.js</code> file in the same folder as the current file. The relative file path (<code>./</code>) and file extension (<code>.js</code>) are required when using import in this way.
|
||||
|
||||
You can import multiple items like this:
|
||||
You can import more than one item from the file by adding them in the <code>import</code> statement like this:
|
||||
|
||||
```js
|
||||
import { add, subtract } from './math_functions.js';
|
||||
@ -24,7 +24,7 @@ import { add, subtract } from './math_functions.js';
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add the appropriate <code>import</code> statement that will allow the current file to use the <code>capitalizeString</code> and <code>lowerCaseString</code> functions you exported in the previous lesson. These functions are in a file called <code>string_functions.js</code>, which is in the same directory as the current file.
|
||||
Add the appropriate <code>import</code> statement that will allow the current file to use the <code>uppercaseString</code> and <code>lowercaseString</code> functions you exported in the previous lesson. These functions are in a file called <code>string_functions.js</code>, which is in the same directory as the current file.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -32,10 +32,10 @@ Add the appropriate <code>import</code> statement that will allow the current fi
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should properly import <code>capitalizeString</code>.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
|
||||
- text: You should properly import <code>lowerCaseString</code>.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
|
||||
- text: You should properly import <code>uppercaseString</code>.
|
||||
testString: assert(code.match(/import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g));
|
||||
- text: You should properly import <code>lowercaseString</code>.
|
||||
testString: assert(code.match(/import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -45,27 +45,11 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
|
||||
|
||||
|
||||
|
||||
// add code above this line
|
||||
|
||||
console.log(capitalizeString("hello"));
|
||||
console.log(lowerCaseString("WORLD!"));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
self.require = function() {
|
||||
return {
|
||||
capitalizeString: str => str.toUpperCase(),
|
||||
lowerCaseString: str => str.toLowerCase()
|
||||
}
|
||||
};
|
||||
uppercaseString("hello");
|
||||
lowercaseString("WORLD!");
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -76,7 +60,10 @@ self.require = function() {
|
||||
|
||||
```js
|
||||
import { capitalizeString } from './string_functions';
|
||||
capitalizeString("hello!");
|
||||
// add code above this line
|
||||
|
||||
uppercaseString("hello");
|
||||
lowercaseString("WORLD!");
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,28 +6,23 @@ challengeType: 1
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the <code>import * as</code> syntax.
|
||||
Here's an example where the contents of a file named <code>"math_functions"</code> are imported into a file in the same directory:
|
||||
Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the <code>import * as</code> syntax. Here's an example where the contents of a file named <code>math_functions.js</code> are imported into a file in the same directory:
|
||||
|
||||
```js
|
||||
import * as myMathModule from "./math_functions.js";
|
||||
```
|
||||
|
||||
The above <code>import</code> statement will create an object called <code>myMathModule</code>. This is just a variable name, you can name it anything. The object will contain all of the exports from <code>math_functions.js</code> in it, so you can access the functions like you would any other object property. Here's how you can use the <code>add</code> and <code>subtract</code> functions that were imported:
|
||||
|
||||
```js
|
||||
import * as myMathModule from "math_functions";
|
||||
myMathModule.add(2,3);
|
||||
myMathModule.subtract(5,3);
|
||||
```
|
||||
|
||||
And breaking down that code:
|
||||
|
||||
```js
|
||||
import * as object_with_name_of_your_choice from "file_path_goes_here"
|
||||
object_with_name_of_your_choice.imported_function
|
||||
```
|
||||
|
||||
You may use any name following the <code>import * as </code>portion of the statement. In order to utilize this method, it requires an object that receives the imported values (i.e., you must provide a name). From here, you will use the dot notation to call your imported values.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
The code in this file requires the contents of another file, <code>"capitalize_strings"</code>, that is in the same directory as the current file. Add the appropriate <code>import * as</code> statement to the top of the file.
|
||||
The code in this file requires the contents of the file: <code>string_functions.js</code>, that is in the same directory as the current file. Use the <code>import * as</code> syntax to import everything from the file into an object called <code>stringFunctions</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -36,46 +31,35 @@ The code in this file requires the contents of another file, <code>"capitalize_s
|
||||
```yml
|
||||
tests:
|
||||
- text: Properly uses <code>import * as</code> syntax.
|
||||
testString: assert(code.match(/import\s+\*\s+as\s+[a-zA-Z0-9_$]+\s+from\s*"\s*capitalize_strings\s*"\s*;/gi), 'Properly uses <code>import * as</code> syntax.');
|
||||
|
||||
testString: assert(code.match(/import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
|
||||
// add code above this line
|
||||
|
||||
stringFunctions.uppercaseString("hello");
|
||||
stringFunctions.lowercaseString("WORLD!");
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
self.require = function(str) {
|
||||
if (str === 'capitalize_strings') {
|
||||
return {
|
||||
capitalize: str => str.toUpperCase(),
|
||||
lowercase: str => str.toLowerCase()
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
import * as capitalize_strings from "capitalize_strings";
|
||||
import * as stringFunctions from "./string_functions.js";
|
||||
// add code above this line
|
||||
|
||||
stringFunctions.uppercaseString("hello");
|
||||
stringFunctions.lowercaseString("WORLD!");
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -6,7 +6,7 @@ challengeType: 1
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Imagine a file called <code>math_functions.js</code>, it contains several functions related to mathematical operations. One of them is stored in a variable, <code>add</code>, that takes in two numbers and returns the sum of them. You want to use this function in several different javascript files. In order to share it with the files, you need to first <code>export</code> it.
|
||||
Imagine a file called <code>math_functions.js</code>, it contains several functions related to mathematical operations. One of them is stored in a variable, <code>add</code>, that takes in two numbers and returns the sum of them. You want to use this function in several different JavaScript files. In order to share it with the files, you need to first <code>export</code> it.
|
||||
|
||||
```js
|
||||
export const add = (x, y) => {
|
||||
@ -14,7 +14,7 @@ export const add = (x, y) => {
|
||||
}
|
||||
```
|
||||
|
||||
The above is a common way to export a single variable, but you can achieve the same thing like this:
|
||||
The above is a common way to export a single function, but you can achieve the same thing like this:
|
||||
|
||||
```js
|
||||
const add = (x, y) => {
|
||||
@ -24,7 +24,7 @@ const add = (x, y) => {
|
||||
export { add };
|
||||
```
|
||||
|
||||
After you export a variable, you can import it in another file to use without having to rewrite the code. You can export multiple variables one at a time by repeating the first example for each thing you want to export or by placing them all in the export statement of the second example like this:
|
||||
After you export a variable or function, you can import it in another file to use without having to rewrite the code. You can export multiple things by repeating the first example for each thing you want to export, or by placing them all in the export statement of the second example like this:
|
||||
|
||||
```js
|
||||
export { add, subtract };
|
||||
@ -42,23 +42,20 @@ There are two functions related to strings in the editor. Export both of them us
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: You should not alter the functions.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+foo\s*=\s*"bar"/g), '<code>foo</code> is exported.');
|
||||
- text: <code>capitalizeString</code> is properly exported.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/export\s+const\s+bar\s*=\s*"foo"/g), '<code>bar</code> is exported.');
|
||||
- text: <code>lowerCaseString</code> is properly exported.
|
||||
|
||||
- text: You should properly export <code>uppercaseString</code>.
|
||||
testString: assert(code.match(/(export\s+const\s+uppercaseString|export\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)})/g));
|
||||
- text: You should properly export <code>lowercaseString</code>.
|
||||
testString: assert(code.match(/(export\s+const\s+lowercaseString|export\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)})/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const capitalizeString = (string) => {
|
||||
const uppercaseString = (string) => {
|
||||
return string.toUpperCase();
|
||||
}
|
||||
|
||||
@ -68,24 +65,13 @@ const lowercaseString = (string) => {
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
self.exports = function(){};
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
export const capitalizeString = (string) => {
|
||||
export const uppercaseString = (string) => {
|
||||
return string.toUpperCase();
|
||||
}
|
||||
|
||||
@ -93,4 +79,5 @@ export const lowercaseString = (string) => {
|
||||
return string.toLowerCase()
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user