diff --git a/curriculum/challenges/_meta/es6/meta.json b/curriculum/challenges/_meta/es6/meta.json index 4070b7df75..fa536e30b3 100644 --- a/curriculum/challenges/_meta/es6/meta.json +++ b/curriculum/challenges/_meta/es6/meta.json @@ -93,13 +93,17 @@ "Use getters and setters to Control Access to an Object" ], [ - "587d7b8c367417b2b2512b55", - "Understand the Differences Between import and require" + "5cddbfd622f1a59093ec611d", + "Create a Module Script" ], [ "587d7b8c367417b2b2512b56", "Use export to Reuse a Code Block" ], + [ + "587d7b8c367417b2b2512b55", + "Share Javascript Code Using import" + ], [ "587d7b8c367417b2b2512b57", "Use * to Import Everything from a File" diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md new file mode 100644 index 0000000000..0bef05a8a8 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md @@ -0,0 +1,61 @@ +--- +id: 5cddbfd622f1a59093ec611d +title: Create a Module Script +challengeType: 1 +--- + +## 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 easily share code amongst javascript files. This involves exporting parts of a javascript file for use in one or more other files, and importing the parts you need to each file. In order to take advantage of this functionality, you need to create a script in your html file with a type of module. Here’s an example: + +```html + +``` + +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 +
+ +## Tests +
+ +```yml +tests: + - text: var should not exist in code. + testString: getUserInput => assert(!getUserInput('index').match(/var/g),'var should not exist in code.'); + +``` + +
+ +## Challenge Seed +
+
+ +```html + + // add your code below + + // add your code above + +``` + +
+
+ +## Solution +
+ +```html + + // add your code below + + // add your code above + +``` +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/share-javascript-code-using-import.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/share-javascript-code-using-import.english.md new file mode 100644 index 0000000000..2f060f42a9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/share-javascript-code-using-import.english.md @@ -0,0 +1,73 @@ +--- +id: 587d7b8c367417b2b2512b55 +title: Share Javascript Code Using import +challengeType: 1 +--- + +## Description +
+In the past, require() was used to add things from external files. While handy, this presents a problem: some files are rather large and you may only need certain parts of those external resources. +ES6 gives you a very handy tool known as import. With it, you can choose which parts of a file or module to load, saving time and memory. +Imagine a file that has 20 functions, but you only need to use one of those functions. require() would force you to bring in all 20 functions. With the import syntax, you can bring in just the one you need, like so: +
import { desired_function } from './other_file';
+Here, import will find desired_function in other_file, import just that function for you to use, and ignore the rest. The ./ tells the import to look for the other_file in the same folder that the file which uses the import statement is in. The whitespace around the function inside the curly braces is best practice for readability. +You can import multiple items like this: +
import { item1, item2 } from './other_file';
+There are a few ways to write an import statement, but the above are a very common use-case. +
+ +## Instructions +
+Add the appropriate import statement that will allow the current file to use the capitalizeString function. The file where this function lives is called string_functions, and it is in the same directory as the current file. +
+ +## Tests +
+ +```yml +tests: + - text: Use a valid import statement + testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g)); +``` + +
+ +## Challenge Seed +
+ +
+ +```js +"use strict"; + +capitalizeString("hello!"); +``` + +
+ +### Before Test +
+ +```js +self.require = function (str) { + if (str === 'string_functions') { + return { + capitalizeString: str => str.toUpperCase() + } + } +}; +``` + +
+ +
+ +## Solution +
+ +```js +import { capitalizeString } from './string_functions'; +capitalizeString("hello!"); +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md deleted file mode 100644 index 290e858631..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 587d7b8c367417b2b2512b55 -title: Understand the Differences Between import and require -challengeType: 1 ---- - -## Description -
-In the past, the function require() would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources. -ES6 gives us a very handy tool known as import. With it, we can choose which parts of a module or file to load into a given file, saving time and memory. -Consider the following example. Imagine that math_array_functions has about 20 functions, but I only need one, countItems, in my current file. The old require() approach would force me to bring in all 20 functions. With this new import syntax, I can bring in just the desired function, like so: - -```js -import { countItems } from "math_array_functions" -``` - -A description of the above code: - -```js -import { function } from "file_path_goes_here" -// We can also import variables the same way! -``` - -There are a few ways to write an import statement, but the above is a very common use-case. -Note
The whitespace surrounding the function inside the curly braces is a best practice - it makes it easier to read the import statement. -Note
The lessons in this section handle non-browser features. import, and the statements we introduce in the rest of these lessons, won't work on a browser directly. However, we can use various tools to create code out of this to make it work in browser. -Note
In most cases, the file path requires a ./ before it; otherwise, node will look in the node_modules directory first trying to load it as a dependency. -
- -## Instructions -
-Add the appropriate import statement that will allow the current file to use the capitalizeString function. The file where this function lives is called "string_functions", and it is in the same directory as the current file. -
- -## Tests -
- -```yml -tests: - - text: valid import statement - testString: getUserInput => assert(getUserInput('index').match(/import\s+\{\s*capitalizeString\s*\}\s+from\s+("|')string_functions\1/g), 'valid import statement'); - -``` - -
- -## Challenge Seed -
- -
- -```js -"use strict"; -capitalizeString("hello!"); -``` - -
- -### Before Test -
- -```js -self.require = function (str) { - if (str === 'string_functions') { - return { - capitalizeString: str => str.toUpperCase() - } - } -}; -``` - -
- -
- -## Solution -
- -```js -import { capitalizeString } from 'string_functions'; -capitalizeString("hello!"); -``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-reuse-a-code-block.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-reuse-a-code-block.english.md index c28c0f8521..aa2e3ca0f6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-reuse-a-code-block.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-reuse-a-code-block.english.md @@ -6,33 +6,29 @@ challengeType: 1 ## Description
-In the previous challenge, you learned about import and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with import, known as export. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like import, export is a non-browser feature. -The following is what we refer to as a named export. With this, we can import any code we export into another file with the import syntax you learned in the last lesson. Here's an example: +Imagine you have a function, capitalizeFirstLetter, that simply takes in a string, and returns the string with the first letter capitalized. You want to use this function in three different javascript files. In order to share the function with the files, you need to first export it. ```js -const capitalizeString = (string) => { +export const capitalizeFirstLetter = (string) => { return string.charAt(0).toUpperCase() + string.slice(1); } -export { capitalizeString } // How to export functions. -export const foo = "bar"; // How to export variables. ``` -Alternatively, if you would like to compact all your export statements into one line, you can take this approach: +The above is a common way to export a single function, but you can achieve the same thing like this: ```js -const capitalizeString = (string) => { +const capitalizeFirstLetter = (string) => { return string.charAt(0).toUpperCase() + string.slice(1); } -const foo = "bar"; -export { capitalizeString, foo } + +export { capitalizeFirstLetter }; ``` -Either approach is perfectly acceptable.
## Instructions
-Below are two variables that I want to make available for other files to use. Utilizing the first way I demonstrated export, export the two variables. +Create and export a variable named
## Tests