21 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/exercises/exercise35/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Advanced JavaScript - Lesson 3 - Exercise 35
5 |
6 |
7 |
8 |
9 |
10 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/exercises/Exercise Numbering:
--------------------------------------------------------------------------------
1 | **Lesson One - Introducing ECMAScript 6**
2 |
3 | Exercise 1: Implementing Block Scope
4 | Exercise 2- Declaring Variables
5 | Exercise 3- Converting Arrow Functions
6 | Exercise 4- Upgrading Arrow Functions
7 | Exercise 5- Converting to Template Literals
8 | Exercise 6: Template Literal Conversion
9 | Exercise 7:Implementing Enhanced Object Properties
10 | Exercise 8- Array Destructuring
11 | Exercise 9- Object Destructuring
12 | Exercise 10- Nested Destructuring
13 | Exercise 11- Implementing Destructuring
14 | Exercise 12- Creating Your Own Class
15 | Exercise 13: Implementing Classes
16 | Exercise 14: Transpiling ES6 Code
17 | Exercise 15- Creating a Generator
18 | Activity 1: Implementing Generators
19 |
20 | **Lesson Two - Asynchronous JavaScript**
21 |
22 | Exercise 16: Handling Asynchronous Code
23 | Exercise 17: Analyzing The JavaScript Event Loop
24 | Exercise 18: Working with Callbacks
25 | Exercise 19: Creating and resolving Your First Promise
26 | Exercise 20: Working With Promises
27 | Activity 2: Using Async/Await
28 |
29 | **Lesson Three -DOM Manipulation and Event Handling**
30 |
31 | Exercise 21: Building the HTML code for an Image
32 | Exercise 22: DOM Manipulation
33 | Exercise 23: Handling Your First Event
34 | Exercise 24: Handling and Delegating Events
35 | Activity 3: Implementing jQuery
36 |
37 | **Lesson Four -Testing JavaScript**
38 |
39 | Exercise 25: Applying Test Driven Development
40 | Exercise 26: Building Unit Tests
41 | Exercise 27: Writing Tests
42 | Exercise 28: Setting Up Mocha
43 | Activity 4: Utilizing Test Environments
44 |
45 | **Lesson Five - Functional Programming**
46 |
47 | Exercise 27: Building Imperative and Declarative Functions
48 | Exercise 28: Building Pure Controllers
49 | Activity 5: Recursive Immutability
50 |
51 | **Lesson Six - JavaScript Ecosystem**
52 |
53 | Exercise 29: Exporting and Importing NPM Modules
54 | Exercise 30: Creating a Basic HTTP Server
55 | Exercise 31: Creating a Basic Express Server
56 | Exercise 32: Building a Backend With Node.js
57 | Activity 6: Building a Frontend with React
58 |
--------------------------------------------------------------------------------
/exercises/exercise16/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function f1() { console.log( 'f1' ); }
4 |
5 | function f2() { console.log( 'f2' ); }
6 |
7 | function f3() {
8 | console.log( 'f3' );
9 | setTimeout( f5, 90 )
10 | }
11 |
12 | function f4() { console.log( 'f4' ); }
13 |
14 | function f5() { console.log( 'f5' ); }
15 |
16 | setTimeout( f1, 105 );
17 | setTimeout( f2, 15 );
18 | setTimeout( f3, 10 );
19 | setTimeout( f4, 100 );
20 |
21 | /* Expected program output:
22 | f3
23 | f2
24 | f4
25 | f5
26 | f1
27 | */
28 |
29 | /*
30 |
31 | Expected stack, queue, and heap output
32 |
33 | step 0
34 | stack:
35 | queue:
36 | heap:
37 |
38 | step 1
39 | stack: , setTimeout( f1, 105 );
40 | queue:
41 | heap:
42 |
43 | step 2
44 | stack: , setTimeout( f2, 15 );
45 | queue:
46 | heap: setTimeout( f1, 105 )
47 |
48 | step 3
49 | stack: , setTimeout( f3, 10 );
50 | queue:
51 | heap: setTimeout( f1, 105 ), setTimeout( f2, 15 )
52 |
53 | step 4
54 | stack: , setTimeout( f4, 100 );
55 | queue:
56 | heap: setTimeout( f1, 105 ), setTimeout( f2, 15 ), setTimeout( f3, 10 )
57 |
58 | step 5
59 | stack:
60 | queue: { event: timeout, handler: f3 }
61 | heap: setTimeout( f1, 105 ), setTimeout( f2, 15 ), setTimeout( f4, 100 )
62 |
63 | step 6
64 | stack: , f3
65 | queue:
66 | heap: setTimeout( f1, 105 ), setTimeout( f2, 15 ), setTimeout( f4, 100 )
67 |
68 | step 7
69 | stack: , f3, console.log( 'f3' )
70 | queue:
71 | heap: setTimeout( f1, 105 ), setTimeout( f2, 15 ), setTimeout( f4, 100 )
72 |
73 | step 8
74 | stack: , f3, setTimeout( f5, 90)
75 | queue:
76 | heap: setTimeout( f1, 105 ), setTimeout( f2, 15 ), setTimeout( f4, 100 )
77 |
78 | step 9
79 | stack: , f3
80 | queue:
81 | heap: setTimeout( f1, 105 ), setTimeout( f2, 15 ), setTimeout( f4, 100 ), setTimeout( f5, 90)
82 |
83 | */
84 |
85 | /* Hints
86 | - Order the timeouts in order of event fire delay
87 | - Two timeouts (f4 & f5) expire at the same ms offset, consider which event gets handled first (f4)?
88 | */
--------------------------------------------------------------------------------
/activities/activity6/activity/lib/index.js:
--------------------------------------------------------------------------------
1 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2 |
3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4 |
5 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
6 |
7 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
8 |
9 | /*BUILD REACT FRONT END HERE*/
10 |
11 | var App = function (_React$Component) {
12 | _inherits(App, _React$Component);
13 |
14 | function App(props) {
15 | _classCallCheck(this, App);
16 |
17 | return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
18 | }
19 |
20 | _createClass(App, [{
21 | key: 'render',
22 | value: function render() {
23 | return React.createElement(
24 | 'div',
25 | null,
26 | 'BUILD APP VIEW HERE'
27 | );
28 | }
29 | }]);
30 |
31 | return App;
32 | }(React.Component);
33 |
34 | ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
--------------------------------------------------------------------------------
/activities/activity5/activity-solution.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Activity F
4 | // Scenario: Your research team has obtained a list of value from your latest experiment however due to a calibration error only some of the data can be used and any data that can be used needs to be scaled. You must to build a utility function that takes in an array, filters out any values less than or equal to 0, scales the remaining values by multiplying them by 2, and returns the final results. First build an imperative function to do this, then build a declarative function to do the same thing.
5 |
6 | function immutable( data ) {
7 | if ( typeof data !== 'object' ) {
8 | return;
9 | }
10 | Object.freeze( data );
11 | Object.values( data ).forEach( immutable );
12 | }
13 |
14 | // Test code. If there are errors then the immutable function does not work as intended
15 | const obj = { a: 10, b: 15, obj: { c: 20 }, arr: [ 1, 5, 10, { test: 'value' } ] };
16 |
17 | const arr = [ 1, 5, [ 5, 6 ], { obj: true } ];
18 |
19 | immutable( obj );
20 | test_try_catch('add property at main object', ()=>{obj.test='test'} );
21 | test_try_catch('add property at nested object', ()=>{obj.obj.test='test'} );
22 | test_try_catch('add property at nested array', ()=>{obj.arr.push('test')} );
23 | test_try_catch('add property at nested array object element', ()=>{obj.arr[3].test='test'} );
24 |
25 | immutable( arr );
26 | test_try_catch('add element', ()=>{arr.push('test')} );
27 | test_try_catch('add element at nested array', ()=>{arr[2].push('test')} );
28 | test_try_catch('edit at nested object', ()=>{arr[3].test='test'} );
29 |
30 | console.log('Passed Tests!');
31 |
32 | function test_try_catch( test, _protected ) {
33 | let success = true;
34 | try {_protected();}
35 | catch ( e ) {success = false;}
36 | if ( success ) {
37 | throw new Error( `Failed test: ${test}` );
38 | }
39 | }
40 |
41 | /* Hints:
42 | - Create a function called immutable that takes in a single argument, data
43 | - If the type of data is not an object then return
44 | -- Use typeof !== 'object'
45 | -- No need to freeze non objects
46 | - Freeze the data object
47 | - Loop through object values and recursively call the immutable function for each
48 |
49 | */
50 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://github.com/TrainingByPackt/Advanced-JavaScript/issues)
2 | [](https://github.com/TrainingByPackt/Advanced-JavaScript/network)
3 | [](https://github.com/TrainingByPackt/Advanced-JavaScript/stargazers)
4 | [](https://github.com/TrainingByPackt/Advanced-JavaScript/pulls)
5 |
6 | # Advanced JavaScript
7 | In this course, you will gain a deep understanding of JavaScript. You will learn how to write JavaScript in a professional environment using the new JavaScript syntax in ES6, leverage on JavaScript's asynchronous nature using callbacks and promises, and understand how to set up test suites and test your code. You will be introduced to JavaScript's functional programming style and you will apply everything learned to build a simple application in various JavaScript frameworks and libraries for backend and frontend development.
8 |
9 | Advanced JavaScript by **Zachary Shute**
10 |
11 | ## What you will learn
12 | * Examine major features in ES6 and implement those features to build applications
13 | * Create promise and callback handlers to work with asynchronous processes
14 | * Develop asynchronous flows using Promise chaining and async/await syntax
15 | * Manipulate the DOM with JavaScript
16 | * Handle JavaScript browser events
17 | * Explore Test Driven Development and build code tests with JavaScript code testing frameworks.
18 | * List the benefits and drawbacks of functional programming compared to other styles
19 | * Construct applications with the Node.js backend framework and the React frontend framework
20 |
21 |
22 |
23 | ### Hardware Requirements
24 | For an optimal student experience, we recommend the following hardware configuration:
25 | * **Processor**: Intel Core i5 or equivalent
26 | * **Memory**: 4GB RAM
27 | * **Storage**: 35GB available space
28 |
29 | ### Software Requirements
30 | You'll also need the following software installed in advance:
31 | * **OS**: Windows 7 SP1 64-bit, Windows 8.1 64-bit or Windows 10 64-bit
32 | * **Browser**: Google Chrome, Latest Version
33 | * **Atom IDE**
34 | * **Babel**
35 | * **Node.js and npm**
36 |
--------------------------------------------------------------------------------
/activities/activity2/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /* Assignment:
4 |
5 | You have been tasked to build a server that interfaces with a database. You must write code to look up set and look up basic user objects in the database. Import the simple_db.js file. Using the get and insert commands, write the following program using async/await syntax.
6 |
7 | 1) Look up the key 'john'. If it exists, log the age field of the result object.
8 | 2) Look up the key 'sam'. If it exists, log the age field of the result object.
9 | 3) Look up your first name as a database key. If it does not exist, insert your first name. Associate an object containing your first name, last name, and age. Look up the new data association and log the age.
10 |
11 | For any db.get operation that fails, save the key into an array. At the end of the program, print the keys that failed.
12 |
13 | DB API:
14 |
15 | db.get( index )
16 | Takes in an index. Returns a promise. Promise is fulfilled with the db entry associated with that index. If index does not exist, the lookup fails, or key is not specified, The promise is rejected with an error.
17 |
18 | db.insert( index, insertData )
19 | Takes in an index and a data. Returns a promise. Promise is fulfilled with the key inserted if the operation completes. If the operation fails, or there is no key or insert data specified, the promise is rejected with an error.
20 |
21 | */
22 |
23 | const db = require( './simple_db' );
24 |
25 | async function main() {
26 |
27 | const missingKeys = [];
28 |
29 | try {
30 | const user = await db.get( 'john' );
31 | console.log( user.age );
32 | } catch ( err ) {
33 | missingKeys.push( 'john' );
34 | }
35 |
36 | try {
37 | const user = await db.get( 'sam' );
38 | console.log( user.age );
39 | } catch ( err ) {
40 | missingKeys.push( 'sam' );
41 | }
42 |
43 | try {
44 | const user = await db.get( 'zach' );
45 | console.log( user.age );
46 | } catch ( err ) {
47 | missingKeys.push( 'zach' );
48 | await db.insert( 'zach', { first: 'zach', last: 'smith', age: 25 } );
49 | try {
50 | const user = await db.get( 'zach' );
51 | console.log( user.age )
52 | } catch ( err ) {
53 | missingKeys.push( 'zach' );
54 | }
55 | }
56 |
57 | return missingKeys;
58 |
59 | }
60 |
61 | main().then( console.log ).catch( ( err ) => console.log( `Error: ${err}` ) );
62 |
63 | /* Expected output;
64 |
65 | 43
66 |
67 | [ 'sam', f ]
68 |
69 | */
70 |
71 | /* Hits:
72 | - Create an async main function so you can await your db calls
73 | - When you call main, you have to attach a .then and .catch handler to catch runtime errors and the return value
74 | - Await the db calls
75 | - either Use try/catch to handle the errors or use promise.catch()
76 | */
--------------------------------------------------------------------------------
/exercises/exercise21/solution.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Advanced JavaScript - Lesson 3 - Exercise 21
5 |
39 |
40 |
41 |
42 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/activities/activity6/solution/src/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Scenario: The Front End team working on your note taking app from Activity B has unexpectedly quit. You must build the front end for this application using React. Your front end should have two views, a Home view and an Edit view. Create a react component for each view. The home view should have a button that changes the view to the edit view. The edit view should have a button that switches back to the home view, a text input that contains the note text, a load button that calls the API load route, and a save button that calls the API save route. A NodeJS server has been provided to you. Write your React code in 'Lesson 6/topic c/activity/src/index.js.' When you are ready to test your code run the build script (defined in package.json) before starting the server. You can reference the index.html file from Activity B for hints on how to call the API routes.
3 | */
4 |
5 | class Home extends React.Component {
6 | goEdit() {
7 | this.props.changeView( 'editor' )
8 | }
9 |
10 | render() {
11 | return (
12 |