├── .babelrc ├── .gitignore ├── README.md ├── app └── index.js ├── build ├── bundle.js ├── index.css └── index.html ├── course_material ├── coding_exercises │ ├── classes │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ ├── closures │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ ├── evens_odds │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ ├── generators │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ ├── js_syntax │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ ├── maps │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ ├── prototypes │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ ├── sets │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ └── weighing_buddy │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js ├── lectures │ ├── classes │ │ ├── class_definition │ │ │ └── index.js │ │ ├── class_inheritance │ │ │ ├── Animal.js │ │ │ └── index.js │ │ ├── prototypes │ │ │ └── index.js │ │ └── static_methods │ │ │ └── index.js │ ├── closures │ │ ├── closures_scoping │ │ │ └── index.js │ │ ├── function_factories │ │ │ └── index.js │ │ └── private_methods │ │ │ └── index.js │ ├── data_structures │ │ ├── maps │ │ │ └── index.js │ │ └── sets │ │ │ └── index.js │ ├── es6_essentials │ │ ├── arrow_functions │ │ │ └── index.js │ │ ├── assignment_with_let_const │ │ │ └── index.js │ │ ├── block_scoping │ │ │ └── index.js │ │ ├── destructuring_assignment │ │ │ └── index.js │ │ ├── map_filter │ │ │ └── index.js │ │ ├── modules │ │ │ ├── fellowship.js │ │ │ ├── index.js │ │ │ └── math.js │ │ ├── number_checking │ │ │ └── index.js │ │ ├── spread_rest │ │ │ └── index.js │ │ ├── string_helpers │ │ │ └── index.js │ │ └── template_literals │ │ │ └── index.js │ ├── es7 │ │ ├── features │ │ │ └── index.js │ │ ├── proposals_async │ │ │ └── index.js │ │ └── proposals_objects │ │ │ └── index.js │ ├── generators │ │ ├── defining_generators │ │ │ └── index.js │ │ ├── generators_control_flow │ │ │ └── index.js │ │ └── generators_iterators │ │ │ └── index.js │ ├── introducing_js │ │ ├── adding_js_to_html │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── js_dom │ │ │ ├── index.html │ │ │ └── index.js │ │ └── understanding_html │ │ │ └── index.html │ ├── js_essentials │ │ ├── arrays │ │ │ └── index.js │ │ ├── booleans │ │ │ └── index.js │ │ ├── for_loops │ │ │ └── index.js │ │ ├── functions │ │ │ └── index.js │ │ ├── if_statements │ │ │ └── index.js │ │ ├── index.html │ │ ├── index.js │ │ ├── objects │ │ │ └── index.js │ │ ├── operators │ │ │ └── index.js │ │ ├── switch_statements │ │ │ └── index.js │ │ ├── syntax_statements_data_types │ │ │ └── index.js │ │ ├── variables_and_assignment │ │ │ └── index.js │ │ └── while_loops │ │ │ └── index.js │ ├── promises │ │ ├── fetch │ │ │ └── index.js │ │ └── promise_creation │ │ │ └── index.js │ └── react │ │ ├── components │ │ ├── Gallery.js │ │ └── Global.js │ │ └── index.js └── quizzes │ ├── closures │ └── answers.md │ ├── es7 │ └── answers.md │ ├── fetch │ └── answers.md │ ├── generators │ └── answers.md │ ├── methods_and_modules │ └── answers.md │ ├── new_es6_syntax │ └── answers.md │ └── promises │ └── answers.md ├── package.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## The Full JavaScript & ES6 Tutorial - (including ES7 & React) 2 | 3 | #### Please use this resource for the following reasons! 4 | 5 | Find guides to each coding lecture. 6 | 7 | Discover answers to coding challenges and quizzes. 8 | 9 | Build a starter project for es6 in webpack. 10 | 11 | Enjoy the course, and keep coding! 12 | 13 | *** 14 | 15 | Find the original course here: https://www.udemy.com/es6-in-depth/ 16 | -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/15Dkatz/es6-in-depth-tutorial/77c9d157a96377620d2c70bf117d60e0c5424486/app/index.js -------------------------------------------------------------------------------- /build/bundle.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/15Dkatz/es6-in-depth-tutorial/77c9d157a96377620d2c70bf117d60e0c5424486/build/bundle.js -------------------------------------------------------------------------------- /build/index.css: -------------------------------------------------------------------------------- 1 | .Global { 2 | text-align: center; 3 | padding: 10px; 4 | } 5 | 6 | /* Gallery Styles */ 7 | .book { 8 | display: inline-block; 9 | width: 220px; 10 | height: 220px; 11 | margin: 10px; 12 | text-align: left; 13 | cursor: pointer; 14 | position: relative; 15 | } 16 | 17 | .book-img { 18 | width: 220px; 19 | height: 220px; 20 | border: 4px solid #000; 21 | border-radius: 4px; 22 | object-fit: cover; 23 | position: absolute; 24 | } 25 | 26 | .book-text { 27 | background-color: #000; 28 | color: #fff; 29 | opacity: 0.75; 30 | width: 214px; 31 | margin-left: 3px; 32 | text-align: center; 33 | position: absolute; 34 | bottom: 0; 35 | padding: 10px; 36 | } 37 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /course_material/coding_exercises/classes/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Fender Bender (Classes) 2 | 3 | Jacob runs a music shop and has classes that represent each of his instruments. To make his life a little easier, he added a describe method to each class that tells him the name of the instrument and its family type. However, something's wrong with that method, so he needs your help to fix it! 4 | 5 | **Directions** 6 | The 'fender' variable is an instance of the Guitar class with "Fender" and "strings" properties. However, the describe method in the Guitar class is broken. Fix the describe method so that it **returns**: 7 | "I'm a Fender from the strings family." 8 | 9 | Use this.name and this.type in order to log the message! 10 | 11 | ###[Student File](./student.js) 12 | 13 | ###[Solution File]('./solution.js') 14 | 15 | ###[Evaluation File]('./evaluate.js') 16 | -------------------------------------------------------------------------------- /course_material/coding_exercises/classes/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('describe()', function() { 2 | it ('should throw the wrong result if returned', function() { 3 | expect(fender.describe()).toEqual("I'm a Fender from the strings family."); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /course_material/coding_exercises/classes/solution.js: -------------------------------------------------------------------------------- 1 | class Instrument { 2 | constructor(name, type) { 3 | this.name = name; 4 | this.type = type; 5 | } 6 | } 7 | 8 | class Guitar extends Instrument { 9 | describe() { 10 | return `I'm a ${this.name} from the ${this.type} family.`; 11 | } 12 | } 13 | 14 | let fender = new Guitar("Fender", "strings"); 15 | -------------------------------------------------------------------------------- /course_material/coding_exercises/classes/student.js: -------------------------------------------------------------------------------- 1 | class Instrument { 2 | constructor(name, type) { 3 | this.name = name; 4 | this.type = type; 5 | } 6 | } 7 | 8 | class Guitar extends Instrument { 9 | describe() { 10 | return // TODO fill this line 11 | } 12 | } 13 | 14 | let fender = new Guitar("Fender", "strings"); 15 | -------------------------------------------------------------------------------- /course_material/coding_exercises/closures/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Addition Factory (Closures) 2 | 3 | James wants a quick way to add different paris of numbers. Luckily, he knows that he can take advantage of function factories with closures to do so. However, his function factory is incomplete. Help him finish it! 4 | 5 | **Directions** 6 | Fix the function factory, 'addFactory', that has one parameter, 'x'. Within addFactory, return an inner function with one parameter, 'y'. That inner function that returns the result of adding 'x' and 'y'. 7 | 8 | 9 | ###[Student File](./student.js) 10 | 11 | ###[Solution File]('./solution.js') 12 | 13 | ###[Evaluation File]('./evaluate.js') 14 | -------------------------------------------------------------------------------- /course_material/coding_exercises/closures/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('addFactory', function() { 2 | it('should throw the wrong result if returned', function() { 3 | expect(add50(50)).toEqual(100); 4 | expect(add30(50)).toEqual(80); 5 | }) 6 | }) 7 | -------------------------------------------------------------------------------- /course_material/coding_exercises/closures/solution.js: -------------------------------------------------------------------------------- 1 | const addFactory = (x) => { 2 | return (y) => { 3 | return x + y; 4 | }; 5 | }; 6 | 7 | const add50 = addFactory(50); 8 | const add30 = addFactory(30); 9 | -------------------------------------------------------------------------------- /course_material/coding_exercises/closures/student.js: -------------------------------------------------------------------------------- 1 | const addFactory = (x) => { 2 | // TODO 3 | // return an inner function with one parameter, y; 4 | // the inner funcion returns x + y; 5 | }; 6 | 7 | const add50 = addFactory(50); 8 | const add30 = addFactory(30); 9 | -------------------------------------------------------------------------------- /course_material/coding_exercises/evens_odds/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Show Me the Evens - Show me the Odds 2 | 3 | Diana is learning to count and she just learned the difference between odds and even numbers. She wants to have some fun, so she picks a random number. If that number is even, she decides to count all the even numbers up to it. If not, she decides to count all the odd numbers up to that number. 4 | 5 | **Directions** 6 | Fix this count function to return all even numbers starting from 0 up to (but not including) the input. Likewise, it the input is odd, return all odd numbers starting from 1 (but not including) the input. 7 | 8 | 9 | ###[Student File](./student.js) 10 | 11 | ###[Solution File]('./solution.js') 12 | 13 | ###[Evaluation File]('./evaluate.js') 14 | -------------------------------------------------------------------------------- /course_material/coding_exercises/evens_odds/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('count()', function() { 2 | it('should throw the wrong result if returned', function() { 3 | expect(count(10)).toEqual([0, 2, 4, 6, 8]); 4 | expect(count(11)).toEqual([1, 3, 5, 7, 9]); 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /course_material/coding_exercises/evens_odds/solution.js: -------------------------------------------------------------------------------- 1 | function count(x) { 2 | var numbers = []; 3 | if (x % 2 == 0) { 4 | for (var i=0; i { 4 | let letters = new Map(); 5 | for (let i=0; i { 4 | // TODO Create a map called 'letters' 5 | for (let i=0; i { 2 | let letters = word.split(""); 3 | let letter_set = new Set(letters); 4 | return letter_set.has(letter); 5 | }; 6 | 7 | let true_check = contains("west", "e"); 8 | let false_check = contains("north", "e"); 9 | -------------------------------------------------------------------------------- /course_material/coding_exercises/sets/student.js: -------------------------------------------------------------------------------- 1 | const contains = (word, letter) => { 2 | let letters = word.split(""); 3 | // TODO create a set with the above 'letters' array 4 | // TODO return whether the set has the 'letter' 5 | }; 6 | 7 | let true_check = contains("west", "e"); 8 | let false_check = contains("north", "e"); 9 | -------------------------------------------------------------------------------- /course_material/coding_exercises/weighing_buddy/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Weighing Buddy (Functions and Objects) 2 | 3 | Sherry, the local veterinarian wants to know the weight of Buddy, the dog. Help her determine Buddy's weight by fixing this weigh function! 4 | 5 | **Directions:** 6 | Fix the weigh function so that it accepts one parameter *returns* the parameter passed to it. 7 | 8 | 9 | ###[Student File](./student.js) 10 | 11 | ###[Solution File]('./solution.js') 12 | 13 | ###[Evaluation File]('./evaluate.js') 14 | -------------------------------------------------------------------------------- /course_material/coding_exercises/weighing_buddy/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('weigh()', function() { 2 | it('should throw the wrong result if returned', function() { 3 | expect(weigh(60)).toEqual(60); 4 | }) 5 | }) 6 | -------------------------------------------------------------------------------- /course_material/coding_exercises/weighing_buddy/solution.js: -------------------------------------------------------------------------------- 1 | var dog = { 2 | name: 'Buddy', 3 | breed: 'Golden Retriever', 4 | weight: 60 5 | } 6 | 7 | function weigh(weight) { 8 | return weight; 9 | } 10 | 11 | weigh(dog.weight); 12 | -------------------------------------------------------------------------------- /course_material/coding_exercises/weighing_buddy/student.js: -------------------------------------------------------------------------------- 1 | var dog = { 2 | name: 'Buddy', 3 | breed: 'Golden Retriever', 4 | weight: 60 5 | } 6 | 7 | function weigh() { 8 | 9 | } 10 | 11 | weigh(dog.weight); 12 | -------------------------------------------------------------------------------- /course_material/lectures/classes/class_definition/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // class Animal { 3 | // constructor(name, height) { 4 | // this.name = name; 5 | // this.height = height; 6 | // } 7 | // } 8 | // 9 | // var king = new Animal("Mufasa", 4.5); 10 | // console.log(king); 11 | // 12 | // part 2: 13 | // class Animal { 14 | // constructor(name, height) { 15 | // this.name = name; 16 | // this.height = height; 17 | // } 18 | // 19 | // hello() { 20 | // console.log(`Hi! I'm ${this.name} from the Animal kingdom!`); 21 | // } 22 | // } 23 | // 24 | // var king = new Animal("Mufasa", 4.5); 25 | // king.hello(); 26 | -------------------------------------------------------------------------------- /course_material/lectures/classes/class_inheritance/Animal.js: -------------------------------------------------------------------------------- 1 | // class Animal { 2 | // constructor(name, height) { 3 | // this.name = name; 4 | // this.height = height; 5 | // } 6 | // 7 | // hello() { 8 | // console.log(`Hi! I'm ${this.name} from the Animal kingdom!`); 9 | // } 10 | // } 11 | // 12 | // export default Animal; 13 | -------------------------------------------------------------------------------- /course_material/lectures/classes/class_inheritance/index.js: -------------------------------------------------------------------------------- 1 | // // parts 1-3: 2 | // class Animal { 3 | // constructor(name, height) { 4 | // this.name = name; 5 | // this.height = height; 6 | // } 7 | // 8 | // hello() { 9 | // console.log(`Hi! I'm ${this.name} from the Animal kingdom!`); 10 | // } 11 | // } 12 | 13 | 14 | // // part 1: 15 | // class Lion extends Animal { 16 | // 17 | // } 18 | // 19 | // let son = new Lion("Simba", 2); 20 | // console.log(son); 21 | 22 | // // part 2: 23 | // class Lion extends Animal { 24 | // constructor(name, height, color) { 25 | // super(name, height); 26 | // this.color = color; 27 | // } 28 | // } 29 | // 30 | // let son = new Lion("Simba", 2, "golden"); 31 | // console.log(son); 32 | 33 | // // part 3: 34 | // class Lion extends Animal { 35 | // constructor(name, height, color) { 36 | // super(name, height); 37 | // this.color = color; 38 | // } 39 | // 40 | // hello() { 41 | // console.log(`Hi! I'm ${this.name} from Pride Rock!`); 42 | // } 43 | // } 44 | // 45 | // let son = new Lion("Simba", 2, "golden"); 46 | // son.hello(); 47 | 48 | // // part 4: 49 | // import Animal from './Animal'; 50 | // 51 | // class Lion extends Animal { 52 | // constructor(name, height, color) { 53 | // super(name, height); 54 | // this.color = color; 55 | // } 56 | // 57 | // hello() { 58 | // console.log(`Hi! I'm ${this.name} from Pride Rock!`); 59 | // } 60 | // } 61 | // 62 | // let son = new Lion("Simba", 2, "golden"); 63 | // son.hello(); 64 | -------------------------------------------------------------------------------- /course_material/lectures/classes/prototypes/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // function Wizard(name, house, pet) { 3 | // this.name = name; 4 | // this.house = house; 5 | // this.pet = pet; 6 | // } 7 | // 8 | // let harry = new Wizard("Harry Potter", "Gryffindor", "Owl"); 9 | // console.log(harry); 10 | 11 | // // part 2: 12 | // function Wizard(name, house, pet) { 13 | // this.name = name; 14 | // this.house = house; 15 | // this.pet = pet; 16 | // this.greet = () => `I'm ${this.name} from ${this.house}`; 17 | // } 18 | // 19 | // let harry = new Wizard("Harry Potter", "Gryffindor", "Owl"); 20 | // console.log(harry.greet()); 21 | 22 | // // part 3: 23 | // function Wizard(name, house, pet) { 24 | // this.name = name; 25 | // this.house = house; 26 | // this.pet = pet; 27 | // this.greet = () => `I'm ${this.name} from ${this.house}`; 28 | // } 29 | // 30 | // Wizard.prototype.pet_name; 31 | // let harry = new Wizard("Harry Potter", "Gryffindor", "Owl"); 32 | // harry.pet_name = "Hedwig"; 33 | // console.log(harry); 34 | 35 | // parts 4-5: 36 | // function Wizard(name, house, pet) { 37 | // this.name = name; 38 | // this.house = house; 39 | // this.pet = pet; 40 | // this.greet = () => `I'm ${this.name} from ${this.house}`; 41 | // } 42 | 43 | // // part 4: 44 | // Wizard.prototype.pet_name; 45 | // Wizard.prototype.info; 46 | // let harry = new Wizard("Harry Potter", "Gryffindor", "Owl"); 47 | // harry.pet_name = "Hedwig"; 48 | // harry.info = () => { 49 | // return `I have a ${this.pet} named ${this.pet_name}.`; 50 | // } 51 | // console.log(harry.info()); 52 | 53 | // // part 4: 54 | // Wizard.prototype.pet_name; 55 | // Wizard.prototype.info; 56 | // let harry = new Wizard("Harry Potter", "Gryffindor", "Owl"); 57 | // harry.pet_name = "Hedwig"; 58 | // harry.info = function() { 59 | // return `I have a ${this.pet} named ${this.pet_name}.`; 60 | // } 61 | // console.log(harry.info()); 62 | -------------------------------------------------------------------------------- /course_material/lectures/classes/static_methods/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // class Calculator { 3 | // static multiply(a, b) { 4 | // return a*b; 5 | // } 6 | // } 7 | // 8 | // let a = Calculator.multiply(5, 7); 9 | // console.log(a); 10 | 11 | 12 | // // part 2: 13 | // class Calculator { 14 | // static add(a, b) { 15 | // return a+b; 16 | // } 17 | // 18 | // static multiply(a, b) { 19 | // return a*b; 20 | // } 21 | // } 22 | // 23 | // let a = Calculator.add(5, 7); 24 | // console.log(a); 25 | -------------------------------------------------------------------------------- /course_material/lectures/closures/closures_scoping/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // let call = () => { 3 | // let secret = 'ES6 rocks'; 4 | // } 5 | // console.log(secret); // error 6 | 7 | // part 2: 8 | // let call = () => { 9 | // let secret = 'ES6 rocks'; 10 | // let reveal = () => { 11 | // console.log(secret); 12 | // } 13 | // reveal(); 14 | // } 15 | // 16 | // call(); 17 | // 18 | // // part 3: 19 | // let call = () => { 20 | // let secret = 'ES6 rocks'; 21 | // let reveal = () => { 22 | // console.log(secret); 23 | // } 24 | // return reveal; 25 | // } 26 | // 27 | // let unveil = call(); 28 | // unveil(); 29 | -------------------------------------------------------------------------------- /course_material/lectures/closures/function_factories/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // const addSuffix = (x) => { 3 | // const concat = (y) => { 4 | // return y + x; 5 | // } 6 | // return concat; 7 | // } 8 | // 9 | // let add_ness = addSuffix("ness"); 10 | // console.log(add_ness); 11 | // let h = add_ness("happi"); 12 | // console.log(h); 13 | 14 | // // part 2: 15 | // const product = (x) => { 16 | // return y => { 17 | // return x * y; 18 | // } 19 | // }; 20 | // 21 | // let mult5 = product(5); 22 | // console.log(mult5(3)); 23 | // 24 | // let double = product(2); 25 | // console.log(double(9)); 26 | 27 | // // part 3: 28 | // const product = (x) => { 29 | // return y => x * y; 30 | // }; 31 | // 32 | // let double = product(2); 33 | // console.log(double(9)); 34 | // 35 | // // part 4 36 | // const product = (x) => y => x * y; 37 | // 38 | // let double = product(2); 39 | // console.log(double(9)); 40 | -------------------------------------------------------------------------------- /course_material/lectures/closures/private_methods/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // const budget = () => { 3 | // let balance = 0; 4 | // const changeBal = (val) => { 5 | // return balance += val; 6 | // } 7 | // 8 | // const deposit20 = () => changeBal(20); 9 | // return { deposit20: deposit20 }; 10 | // }; 11 | // 12 | // let wallet = budget(); 13 | // console.log(wallet); 14 | // wallet.deposit20(); 15 | 16 | // // part 2: 17 | // const budget = () => { 18 | // let balance = 0; 19 | // const changeBal = (val) => { 20 | // return balance += val; 21 | // } 22 | // 23 | // const deposit20 = () => changeBal(20); 24 | // const check = () => balance; 25 | // return { 26 | // deposit20: deposit20, 27 | // check: check 28 | // }; 29 | // }; 30 | // 31 | // let wallet = budget(); 32 | // wallet.deposit20(); 33 | // console.log(wallet.check()); 34 | 35 | // // part 3: 36 | // const budget = () => { 37 | // let balance = 0; 38 | // const changeBal = (val) => { 39 | // return balance += val; 40 | // } 41 | // 42 | // const deposit20 = () => changeBal(20); 43 | // const withdraw20 = () => changeBal(-20); 44 | // const check = () => balance; 45 | // return { 46 | // deposit20, 47 | // withdraw20, 48 | // check 49 | // }; 50 | // }; 51 | // 52 | // let wallet = budget(); 53 | // wallet.deposit20(); 54 | // wallet.deposit20(); 55 | // wallet.withdraw20(); 56 | // wallet.deposit20(); 57 | // console.log(wallet.check()); 58 | -------------------------------------------------------------------------------- /course_material/lectures/data_structures/maps/index.js: -------------------------------------------------------------------------------- 1 | // // parts 1-2: 2 | // let a = new Map(); 3 | // let key_1 = 'string key'; 4 | // a.set(key_1, 'return value for a string key'); 5 | // 6 | // // part 1: 7 | // console.log(a); 8 | // 9 | // // part 2: 10 | // let key_2 = { a: 'key '}; 11 | // let key_3 = function() {}; 12 | // a.set(key_2, 'return value for an object'); 13 | // a.set(key_3, 'return value for a function'); 14 | // console.log(a); 15 | 16 | // // part 3: 17 | // let twoDee = [[1, 'one'], [2, 'two'], [3, 'three']]; 18 | // let valMap = new Map(twoDee); 19 | // console.log(valMap); 20 | 21 | // // part 4: 22 | // let twoDee = [[1, 'one'], [2, 'two'], [3, 'three']]; 23 | // let valMap = new Map(twoDee); 24 | // for (let [key, value] of valMap.entries()) { 25 | // console.log(`${key} => ${value}`); 26 | // } 27 | 28 | // // part 5: 29 | // let string = "oewiuraowehpamennoawponeienuaperunaewopinu"; 30 | // let letters = new Map(); 31 | // for (let i=0; i { 13 | // console.log("Woohoo!") 14 | // }, 3000); 15 | 16 | // // part 4: 17 | // let cheer = () => { 18 | // console.log("Woohoo!"); 19 | // } 20 | 21 | // // all parts above: 22 | // cheer(); 23 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/assignment_with_let_const/index.js: -------------------------------------------------------------------------------- 1 | // * pre-es6 assignment 2 | // // part 1: 3 | // var limit = 100; 4 | // console.log(limit); 5 | 6 | // * let 7 | // // part 2: 8 | // let limit = 100; 9 | // // limit += 100; 10 | // limit = 200; 11 | // console.log(limit); 12 | 13 | // * const 14 | // // part 3: 15 | // const limit = 200; 16 | // // limit += 100; 17 | // console.log(limit); 18 | 19 | // * scoping 20 | // // part 4: 21 | // const emails = ['frodo@email.com', 'samwise@example.com', 'merry@example.com']; 22 | // // emails = []; // error; 23 | // emails.push('pippin@example.com'); // valid! 24 | // console.log(emails); 25 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/block_scoping/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // let limit = 200; 3 | // console.log(limit); 4 | 5 | // part 2: 6 | // var limit = 200; 7 | // { 8 | // var limit = 10; // error, changes the original limit. 9 | // console.log('backstage limit', limit); 10 | // } 11 | // console.log('venue limit', limit); 12 | 13 | // part 3: 14 | // const limit = 200; 15 | // { 16 | // const limit = 10; // valid! 17 | // console.log('backstage limit', limit); 18 | // } 19 | // console.log('venue limit', limit); 20 | 21 | // part 4: 22 | // function hello() { 23 | // let message = "Hello!"; 24 | // console.log(message); 25 | // } 26 | // 27 | // function greeting() { 28 | // let message = "How are you?"; 29 | // console.log(message); 30 | // } 31 | // 32 | // hello(); 33 | // greeting(); 34 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/destructuring_assignment/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // let z = [4, 5, 6]; 3 | // // let four = z[0]; 4 | // // let five = z[1]; 5 | // let [four, five] = z; 6 | // console.log(four, five); 7 | 8 | // // part 2: 9 | // let animals = ["Simba", "Zazu", "Ed"]; 10 | // let [lion, bird] = animals; 11 | // console.log(lion, bird); 12 | 13 | // // part 3: 14 | // let king = { name: 'Mufasa', kids: 1 }; 15 | // // let name = king.name; 16 | // // let kids = king.kids; 17 | // let { name, kids } = king; 18 | // console.log(name, kids); 19 | 20 | // // part 4: 21 | // let son = { name: 'Simba', parents: 2 }; 22 | // let name, parents; 23 | // // { name, parents } = son; // error; standalone block, not destructuring assigment. 24 | // ({ name, parents } = son); // valid destructuring assignment 25 | // console.log(name, parents); 26 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/map_filter/index.js: -------------------------------------------------------------------------------- 1 | // * map helper method 2 | // parts 1-3: 3 | // let values = [20, 30, 40]; 4 | 5 | // // part 1: 6 | // let double = (n) => { 7 | // return n*2; 8 | // } 9 | // let doubled = values.map(double); 10 | 11 | 12 | // // part 2: 13 | // let doubled = values.map((n) => { 14 | // return n*2; 15 | // }); 16 | 17 | // // part 3: 18 | // let doubled = values.map(n => n*2); 19 | 20 | // all parts above: 21 | // console.log(doubled); 22 | 23 | // * filter helper method 24 | // parts 4-5: 25 | // let points = [7, 16, 21, 4, 3, 22, 5]; 26 | 27 | // part 4: 28 | // let highScores = points.filter((n) => { 29 | // return n > 15; 30 | // }); 31 | 32 | // part 5: 33 | // let highScores = points.filter(n => n>15); 34 | 35 | // parts 4-5: 36 | // console.log(highScores); 37 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/modules/fellowship.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // const fellowship = ['Frodo', 'Samwise', 'Gandalf']; 3 | // export { fellowship }; 4 | // 5 | // // part 2: 6 | // const fellowship = ['Frodo', 'Samwise', 'Gandalf']; 7 | // const total = fellowship.length; 8 | // export { fellowship, total }; 9 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/modules/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // import { fellowship } from './fellowship'; 3 | // console.log(fellowship); 4 | 5 | // // part 2: 6 | // import { fellowship, total } from './fellowship'; 7 | // console.log(fellowship, total); 8 | 9 | // // part 3: 10 | // import { add, multiply } from './math'; 11 | // console.log(add(5, 10)); 12 | 13 | // // part 4: 14 | // import { add, multiply } from './math'; 15 | // console.log(multiply(5, 10)); 16 | 17 | // // part 5: 18 | // import multiply from './math'; 19 | // console.log(multiply(5, 10)); 20 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/modules/math.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // const add = (a, b) => { 3 | // return a+b; 4 | // } 5 | // 6 | // const multiply = (a, b) => { 7 | // return a*b; 8 | // } 9 | // 10 | // export { add, multiply }; 11 | 12 | // part 2: 13 | // export default multiply; 14 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/number_checking/index.js: -------------------------------------------------------------------------------- 1 | // // parts 1-2: 2 | // const addToCart = (item, number) => { 3 | // return Number.isFinite(number); 4 | // } 5 | // 6 | // // part 1: 7 | // console.log(addToCart('shirt', 5)); 8 | // 9 | // // part 2: 10 | // console.log(addToCart('shirt', Infinity)); 11 | // 12 | // // part 3: 13 | // console.log(addToCart('shirt', Math.pow(2, 54))); 14 | 15 | // // part 4: 16 | // const addToCart = (item, number) => { 17 | // return Number.isSafeInteger(number); 18 | // } 19 | // 20 | // console.log(addToCart('shirt', Math.pow(2, 54))); 21 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/spread_rest/index.js: -------------------------------------------------------------------------------- 1 | // * spread operators 2 | // part 1: 3 | // let a = [20, 30, 40]; 4 | // let b = [10, 50]; 5 | 6 | // part 2: 7 | // let a = [20, 30, 40]; 8 | // let b = [10, ...a, 50]; 9 | // console.log(b); 10 | 11 | // part 3: 12 | // let a = ['Dana', 'Erik', 'Frank']; 13 | // let b = ['Alice', 'Bob', 'Carl', ...a]; 14 | // console.log(b); 15 | 16 | // * rest parameters 17 | // function collect(...a) { 18 | // console.log(a); 19 | // } 20 | // 21 | // collect(1, 2, 3, 4, 5); 22 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/string_helpers/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // let b = "wooh" + "oo".repeat(50); 3 | // console.log(b); 4 | 5 | // // part 2: 6 | // let b = "wooh" + " ".repeat(50) + "oo"; 7 | // console.log(b); 8 | 9 | // // part 3: 10 | // console.log("butterfly".startsWith("butter")); // true 11 | // 12 | // // part 4: 13 | // console.log("butterfly".startsWith("fly")); // false 14 | // 15 | // // part 5: 16 | // console.log("butterfly".endsWith("fly")); // true 17 | // 18 | // // part 6: 19 | // console.log("butterfly".includes("fly")); // true 20 | // 21 | // // part 7: 22 | // console.log("butterfly".includes("butter")); // true 23 | // 24 | // // part 8: 25 | // console.log("butterfly".includes("caterpillar")); // false 26 | -------------------------------------------------------------------------------- /course_material/lectures/es6_essentials/template_literals/index.js: -------------------------------------------------------------------------------- 1 | // // all parts: 2 | // let a = `good`; 3 | 4 | // // part 1: 5 | // console.log(a); 6 | 7 | // part 2: 8 | // let greeting = `${a} morning`; 9 | // console.log(greeting); 10 | 11 | // part 3: 12 | // let greeting = a + " morning"; 13 | // console.log(greeting); 14 | 15 | // // part 4: 16 | // let b = 'birthday'; 17 | // let c = `Happy ${b}!` 18 | // console.log(c); 19 | -------------------------------------------------------------------------------- /course_material/lectures/es7/features/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // let a = Math.pow(2, 5); 3 | // console.log(a); 4 | 5 | // // part 2: 6 | // let a = 2**5; 7 | // console.log(a); 8 | 9 | // // part 3: 10 | // let b = "wonderful".includes("wonder"); 11 | // console.log(b); 12 | 13 | // // part 3: 14 | // let b = [2, 3, 4, 5, 6].includes(7); 15 | // console.log(b); 16 | -------------------------------------------------------------------------------- /course_material/lectures/es7/proposals_async/index.js: -------------------------------------------------------------------------------- 1 | // // all parts: 2 | // async function async_one() { 3 | // return "one"; 4 | // } 5 | // 6 | // // part 1: 7 | // async_one().then(response => console.log(response)); 8 | 9 | // // part 2: 10 | // async function async_two() { 11 | // throw new Error('Issue with async!'); 12 | // } 13 | // async_two().catch(error => console.log(error)); 14 | 15 | // // part 3: 16 | // async function async_two() { 17 | // return "two" 18 | // } 19 | // 20 | // // part 4: 21 | // async function async_three() { 22 | // const one = await async_one(); 23 | // console.log(one); 24 | // const two = await async_two(); 25 | // console.log(two); 26 | // } 27 | // // async_three(); 28 | // 29 | // // part 5: 30 | // async function async_four() { 31 | // const [res_one, res_two] = await Promise.all([ 32 | // async_one(), async_two() 33 | // ]) 34 | // console.log(res_one, res_two); 35 | // } 36 | // async_four(); 37 | -------------------------------------------------------------------------------- /course_material/lectures/es7/proposals_objects/index.js: -------------------------------------------------------------------------------- 1 | // // parts 1-2: 2 | // let obj = { 3 | // a: 'one', 4 | // b: 'two', 5 | // c: 'three' 6 | // } 7 | // 8 | // // part 1: 9 | // let keys = Object.keys(obj); 10 | // console.log(keys); 11 | // 12 | // // part 2: 13 | // let values = Object.values(obj); 14 | // console.log(values); 15 | // 16 | // // part 3: 17 | // let entries = Object.entries(obj); 18 | // console.log(entries); 19 | // 20 | // // part 4: 21 | // for (let entry of entries) { 22 | // console.log(`key: ${entry[0]} | value: ${entry[1]}`); 23 | // } 24 | -------------------------------------------------------------------------------- /course_material/lectures/generators/defining_generators/index.js: -------------------------------------------------------------------------------- 1 | // // parts 1-2: 2 | // function* letterMaker() { 3 | // yield 'a'; 4 | // yield 'b'; 5 | // yield 'c'; 6 | // } 7 | // 8 | // let letterGen = letterMaker(); 9 | // 10 | // // part 1: 11 | // console.log(letterGen.next().value); 12 | // 13 | // // part 2: 14 | // console.log(letterGen.next().value); 15 | // console.log(letterGen.next().value); 16 | 17 | // // part 3: 18 | // function* countMaker() { 19 | // let count = 0; 20 | // while (count < 3) { 21 | // yield count += 1; 22 | // } 23 | // } 24 | // 25 | // let countGen = countMaker(); 26 | // console.log(countGen.next().value); 27 | // console.log(countGen.next().value); 28 | // console.log(countGen.next().value); 29 | // console.log(countGen.next().value); // undefined 30 | // 31 | -------------------------------------------------------------------------------- /course_material/lectures/generators/generators_control_flow/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // function* evens() { 3 | // let count = 0; 4 | // while(true) { 5 | // count += 2; 6 | // yield count; 7 | // } 8 | // } 9 | 10 | // let sequence = evens(); 11 | // console.log(sequence.next().value); 12 | // console.log(sequence.next().value); 13 | 14 | // // part 2: 15 | // function* evens() { 16 | // let count = 0; 17 | // while(true) { 18 | // count += 2; 19 | // var reset = yield count; 20 | // if (reset) { 21 | // count = 0; 22 | // } 23 | // } 24 | // } 25 | // 26 | // let sequence = evens(); 27 | // console.log(sequence.next().value); 28 | // console.log(sequence.next().value); 29 | // console.log(sequence.next(true).value); 30 | // console.log(sequence.next().value); 31 | -------------------------------------------------------------------------------- /course_material/lectures/generators/generators_iterators/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // const arrayIterator = (array) => { 3 | // let index = 0; 4 | // 5 | // return { 6 | // next: () => { 7 | // if (index < array.length) { 8 | // let next = array[index]; 9 | // index += 1; 10 | // return next; 11 | // } 12 | // } 13 | // } 14 | // } 15 | // 16 | // var it = arrayIterator([1, 2, 3]); 17 | // console.log(it.next()); 18 | // console.log(it.next()); 19 | // console.log(it.next()); 20 | // console.log(it.next()); 21 | 22 | // // part 2: 23 | // function* arrayIterator() { 24 | // yield arguments; 25 | // } 26 | // 27 | // var it = arrayIterator(1, 2, 3); 28 | // console.log(it.next().value); 29 | 30 | // // part 3: 31 | // function* arrayIterator() { 32 | // for (let arg of arguments) { 33 | // yield arg 34 | // } 35 | // } 36 | // 37 | // var it = arrayIterator(1, 2, 3); 38 | // 39 | // // part 4: 40 | // function* arrayIterator() { 41 | // yield* arguments; 42 | // } 43 | // 44 | // var it = arrayIterator(1, 2, 3); 45 | // 46 | // // part 5: 47 | // var array = [1, 2, 3]; 48 | // var it = arrayIterator(...array); 49 | // 50 | // // parts 2-5: 51 | // console.log(it.next().value); 52 | // console.log(it.next().value); 53 | // console.log(it.next().value); 54 | // console.log(it.next().value); 55 | -------------------------------------------------------------------------------- /course_material/lectures/introducing_js/adding_js_to_html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example Page 6 | 7 | 8 |
Hello, World!
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /course_material/lectures/introducing_js/adding_js_to_html/index.js: -------------------------------------------------------------------------------- 1 | console.log("Hello from JavaScript"); 2 | -------------------------------------------------------------------------------- /course_material/lectures/introducing_js/js_dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example Page 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /course_material/lectures/introducing_js/js_dom/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // console.log(document); 3 | 4 | // // part 2: 5 | // console.log(typeof document); 6 | // 7 | // // part 3: 8 | // document.getElementById('example').innerHTML = 'JavaScript rules!'; 9 | -------------------------------------------------------------------------------- /course_material/lectures/introducing_js/understanding_html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example Page 6 | 7 | 8 |
Hello, World!
9 | 10 | 11 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/arrays/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // var points = [25, 16, 7, 9, 31]; 3 | // console.log(points); 4 | // 5 | // // part 2: 6 | // var points = [25, 16, 7, 9, 31]; 7 | // points.push(8); 8 | // console.log(points); 9 | // 10 | // // part 3: 11 | // var points = [25, 16, 7, 9, 31]; 12 | // var last = points.pop(); 13 | // console.log(points, last); 14 | // 15 | // // part 4: 16 | // var points = [25, 16, 7, 9, 31]; 17 | // var first = points[0]; 18 | // console.log(first); 19 | // 20 | // // part 4: 21 | // var points = [25, 16, 7, 9, 31]; 22 | // console.log(points.length); 23 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/booleans/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // var a = true; 3 | // console.log(a); 4 | 5 | // // part 2: 6 | // var a = false; 7 | // console.log(a); 8 | 9 | // // part 3: 10 | // var a = 5 == 5; 11 | // console.log(a); 12 | 13 | // // part 4: 14 | // var a = 5 == 7; 15 | // console.log(a); 16 | 17 | // // part 5: 18 | // var a = 5 < 7; 19 | // console.log(a); 20 | 21 | // // part 6: 22 | // var a = 5 > 7; 23 | // console.log(a); 24 | 25 | // // part 7: 26 | // var a = 5 <= 7; 27 | // console.log(a); 28 | 29 | // // part 8: 30 | // var a = 5 >= 7; 31 | // console.log(a); 32 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/for_loops/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // console.log(1); 3 | // console.log(2); 4 | // console.log(3); 5 | // // ... 6 | // 7 | // // part 2: 8 | // for (var i=0; i<5; i = i+1) { 9 | // console.log(i); 10 | // } 11 | // 12 | // // part 3: 13 | // for (var i=0; i<5; i += 1) { 14 | // console.log(i); 15 | // } 16 | // 17 | // // part 4: 18 | // for (var i=0; i<5; i++) { 19 | // console.log(i); 20 | // } 21 | // 22 | // // part 5: 23 | // var names = ["Frodo", "Sam", "Merry", "Pippin"]; 24 | // for (var i=0; i 5) { 8 | // console.log("8 is greater!"); 9 | // } 10 | 11 | // // part 3: 12 | // if (8 > 13) { 13 | // console.log("8 is greater!"); 14 | // } 15 | 16 | // // part 4: 17 | // if (8 > 13) { 18 | // console.log("8 is greater!"); 19 | // } else { 20 | // console.log("8 is not greater."); 21 | // } 22 | 23 | // // part 4: 24 | // var x = 10; 25 | // if (8 > x) { 26 | // console.log("8 is greater!"); 27 | // } else if (15 > x) { 28 | // console.log("15 is greater!"); 29 | // } else { 30 | // console.log("8 is not greater."); 31 | // } 32 | 33 | // // part 5: 34 | // function check(number) { 35 | // if (number % 2 == 0) { 36 | // console.log(number + " is even"); 37 | // } else { 38 | // console.log(number + " is odd"); 39 | // } 40 | // } 41 | // 42 | // check(4); 43 | // check(7); 44 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example Page 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/15Dkatz/es6-in-depth-tutorial/77c9d157a96377620d2c70bf117d60e0c5424486/course_material/lectures/js_essentials/index.js -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/objects/index.js: -------------------------------------------------------------------------------- 1 | // // parts 1-2: 2 | // var dog = { 3 | // name: "Buddy", 4 | // breed: "Golden Retriever", 5 | // weight: 60 6 | // }; 7 | // 8 | // // part 1: 9 | // console.log(dog); 10 | // 11 | // // part 2: 12 | // console.log(dog.breed); 13 | // 14 | // // part 3: 15 | // console.log(dog["breed"]); 16 | // 17 | // // part 4: 18 | // var dog = { 19 | // name: "Buddy", 20 | // breed: "Golden Retriever", 21 | // weight: 60, 22 | // bark: function() { 23 | // console.log("Woof!"); 24 | // } 25 | // }; 26 | // dog.bark(); 27 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/operators/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // var z = 10 + 5 - 2; 3 | // console.log(z); 4 | 5 | // // part 2: 6 | // var z = 10 * 5 / 2; 7 | // console.log(z); 8 | 9 | // // part 3: 10 | // var a = "Good" + " " + "day"; 11 | // console.log(a); 12 | 13 | // // part 4: 14 | // var b = 11 % 3; 15 | // console.log(b); 16 | 17 | // // // part 5: 18 | // var b = 9 % 3; 19 | // console.log(b); 20 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/switch_statements/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // var x = 3; 3 | // switch(x) { 4 | // case 1: 5 | // console.log("The number is one!"); 6 | // case 2: 7 | // console.log("The number is two!"); 8 | // case 3: 9 | // console.log("The number is three!"); 10 | // } 11 | // 12 | // // part 2: 13 | // var x = 1; 14 | // switch(x) { 15 | // case 1: 16 | // console.log("The number is one!"); 17 | // break; 18 | // case 2: 19 | // console.log("The number is two!"); 20 | // break; 21 | // case 3: 22 | // console.log("The number is three!"); 23 | // break; 24 | // } 25 | // 26 | // // part 3: 27 | // var x = 13; 28 | // switch(x) { 29 | // case 1: 30 | // console.log("The number is one!"); 31 | // break; 32 | // case 2: 33 | // console.log("The number is two!"); 34 | // break; 35 | // case 3: 36 | // console.log("The number is three!"); 37 | // break; 38 | // default: 39 | // console.log("The number is " + x); 40 | // break; 41 | // } 42 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/syntax_statements_data_types/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // var a, b; 3 | // a = 'hello'; 4 | // b = a + ' world'; 5 | // // b = 'hello world' 6 | 7 | // // part 2: 8 | // var a, b; 9 | // a = "hello"; 10 | // b = a + " world"; 11 | // // b = 'hello world' 12 | 13 | // // part 3: 14 | // var a, b; 15 | // a = 1; 16 | // b = a + 5.5; 17 | // // b = 6.5; 18 | 19 | // // part 4: 20 | /* 21 | This comment 22 | spans multiple lines 23 | */ 24 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/variables_and_assignment/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // var a = 30; 3 | 4 | // // part 2: 5 | // var var = 30; 6 | 7 | // // part 3: 8 | // var 1a = 30; 9 | 10 | // // part 4: 11 | // var $_a = 30; 12 | 13 | // // part 5: 14 | // var first greeting = 'hello'; 15 | 16 | // // part 6: 17 | // var first_greeting = 'hello'; 18 | 19 | // // part 7: 20 | // var firstGreeting = 'hello'; 21 | -------------------------------------------------------------------------------- /course_material/lectures/js_essentials/while_loops/index.js: -------------------------------------------------------------------------------- 1 | // // all parts: 2 | var names = ["Frodo", "Sam", "Merry", "Pippin"]; 3 | // for (var i=0; i { 5 | // // console.log(response); 6 | // return response.json(); 7 | // }) 8 | // .then(json => console.log(json)); 9 | -------------------------------------------------------------------------------- /course_material/lectures/promises/promise_creation/index.js: -------------------------------------------------------------------------------- 1 | // // part 1: 2 | // let p = new Promise((resolve, reject) => { 3 | // resolve('Resolved promise data'); 4 | // }); 5 | // 6 | // p.then(response => console.log(response)); 7 | 8 | // // part 2: 9 | // let p = new Promise((resolve, reject) => { 10 | // reject('Rejected promise data'); 11 | // }); 12 | // 13 | // p.then(response => console.log(response)) 14 | // .catch(error => console.log(error)); 15 | 16 | // // part 3: 17 | // let p = new Promise((resolve, reject) => { 18 | // setTimeout(() => resolve('Resolved promise data'), 3000); 19 | // }); 20 | // 21 | // p.then(response => console.log(response)); 22 | // console.log("after promise consumption"); 23 | -------------------------------------------------------------------------------- /course_material/lectures/react/components/Gallery.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Gallery extends Component { 4 | render() { 5 | let alternate = 'https://cdn0.iconfinder.com/data/icons/thin-photography/57/thin-367_photo_image_wall_unavailable_missing-512.png'; 6 | 7 | return ( 8 |
9 | { 10 | this.props.items.map((item, index) => { 11 | let { title, imageLinks, infoLink } = item.volumeInfo; 12 | return ( 13 | 19 | book 24 |
25 | {title} 26 |
27 | 28 | ) 29 | }) 30 | } 31 |
32 | ) 33 | } 34 | } 35 | 36 | export default Gallery; 37 | -------------------------------------------------------------------------------- /course_material/lectures/react/components/Global.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap'; 3 | import Gallery from './Gallery'; 4 | 5 | class Global extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | query: '', 10 | items: [] 11 | } 12 | } 13 | 14 | search() { 15 | const BASE_URL = `https://www.googleapis.com/books/v1/volumes?q=`; 16 | fetch(`${BASE_URL}${this.state.query}`, { 17 | method: 'GET' 18 | }) 19 | .then(response => response.json()) 20 | .then(json => { 21 | console.log('book items', json); 22 | let { items } = json; 23 | this.setState({items}); 24 | }) 25 | } 26 | 27 | render() { 28 | return ( 29 |
30 |

Book Explorer

31 | 32 | 33 | {this.setState({query: event.target.value})}} 37 | onKeyPress={event => { 38 | if (event.key == "Enter") { 39 | this.search() 40 | } 41 | }} 42 | /> 43 | this.search()}> 44 | 45 | 46 | 47 | 48 | 49 |
50 | ) 51 | } 52 | } 53 | 54 | export default Global; 55 | -------------------------------------------------------------------------------- /course_material/lectures/react/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Global from './components/Global'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /course_material/quizzes/closures/answers.md: -------------------------------------------------------------------------------- 1 | Optional Quiz: Examining Closures 2 | 3 | Time for an optional quiz! Let's check our newfound knowledge of closures: 4 | 5 | 1) 6 | 7 | What concept in JavaScript to the idea that programs keep track of variable locations to understand where to access them? 8 | 9 | a) function factories 10 | 11 | Explanation: Nope. Function factories return functions with closures to allow for dynamic function creation. 12 | 13 | b) data encapsulation 14 | 15 | Explanation: Incorrect. Data encapsulation pertain more to the restriction of data to certain scopes with private variables and methods. 16 | 17 | **c) lexical scoping** // answer 18 | 19 | Explanation: Correct! 20 | 21 | 22 | 2) 23 | 24 | Which of the following options represents a valid function factory? 25 | 26 | **a) const makeAdd = x => y => x * y;** //answer 27 | 28 | Explanation: Correct! This function returns an inner function. It then multiply's the outer function's parameter and inner functions's parameter. 29 | 30 | b) const makeAdd = function(x) { return new function() { x * y }; } 31 | 32 | Explanation: Incorrect. This will not return a valid function factory for the custom addition of two numbers. 33 | 34 | 35 | 3) Does JavaScript support private methods natively in the same way that languages like Java do? 36 | 37 | a) Yes. 38 | 39 | Explanation: Actually, no. But we can emulate the behavior of private methods with closures! 40 | 41 | **b) No.** //answer 42 | 43 | Explanation: Correct! Even though JavaScript does not support private methods natively in the way languages like Java do, we can still emulate this behavior using closures. 44 | -------------------------------------------------------------------------------- /course_material/quizzes/es7/answers.md: -------------------------------------------------------------------------------- 1 | Optional Quiz: Reviewing ES7 and ES Proposals 2 | 3 | How about going for an optional quiz? Here you have the chance to review ES7 features and some coding details regarding proposals to ES6. 4 | 5 | 6 | 1) 7 | 8 | Which method within ES7 checks if an element exists in an array? 9 | 10 | a) contains() 11 | 12 | Explanation: Incorrect. Previous versions of JavaScript actually supported a method called contains() for strings. 13 | 14 | **b) includes()** //answer 15 | 16 | Explanation: Correct! Array.includes() will check if an element exists within an array. 17 | 18 | c) has() 19 | 20 | Explanation: Incorrect, but close. The has() method checks for values within Maps and Sets but not arrays. 21 | 22 | 23 | 2) 24 | 25 | Which of the following method within the ES7 Object prototype can return both keys and values for an object? 26 | 27 | **a) entries()** //answer 28 | 29 | Explanation: Correct! This function will return an array of two-length arrays that represent the keys and values of an object. 30 | 31 | b) values() 32 | 33 | Explanation: Incorrect. This only returns an array of values for the object. 34 | 35 | c) keys() 36 | 37 | Explanation: Incorrect. This only returns an array of keys for the object. 38 | 39 | 40 | 3) Which keyword tells an async function to wait for a resolved value before continuing to execute code? 41 | 42 | a) async 43 | 44 | Explanation: Incorrect. This keyword actually declares an async function. 45 | 46 | **b) await** //answer 47 | 48 | Explanation: Correct! This keyword will block an async function from continuing until the 'awaited' value returns a valid response. 49 | -------------------------------------------------------------------------------- /course_material/quizzes/fetch/answers.md: -------------------------------------------------------------------------------- 1 | Optional Quiz: Revisiting Fetch and HTTP 2 | 3 | ​Here you have the option to take a quiz on Fetch and HTTP. Hopefully a couple questions will strengthen the knowledge you gained when learning about Fetch and HTTP. 4 | 5 | 1) 6 | 7 | Which HTTP request method retrieves data from a resource and has no secondary effect? 8 | 9 | **a) GET** //answer 10 | 11 | Explanation: Correct! 12 | 13 | b) POST 14 | 15 | Explanation: Incorrect. The POST HTTP request method sends data to a server for it to update existing resources. 16 | 17 | c) HEAD 18 | 19 | Explanation: Incorrect. The HEAD HTTP request method finds meta-information such as the title of a resource. 20 | 21 | 22 | 23 | 2) 24 | 25 | Which of the following demonstrates a proper use of the fetch API function? Assume that 'root' is defined: root = 'https://exampleapi/posts/1'. 26 | 27 | **a) fetch(root, {method: 'GET'})** //answer 28 | 29 | Explanation: Correct! To consume the promised data, add a couple .then() statements to the fetch. 30 | 31 | b) fetch().then(root).then(data => data.json()); 32 | 33 | Explanation: Incorrect. The fetch function takes a path as its first parameter, and any specifications in an object as the optional second parameter. 34 | -------------------------------------------------------------------------------- /course_material/quizzes/generators/answers.md: -------------------------------------------------------------------------------- 1 | Optional Quiz: Generators in ES6 2 | 3 | Time for an optional quiz! Let's check our newfound knowledge of generators. 4 | 5 | 1) 6 | 7 | Do generators follow the typical "run to completion" model of normal functions? 8 | 9 | a) Yes 10 | 11 | Explanation: Nope. Generators break the "run to completion" model and introduce functions with start, pause, and reset functionality. 12 | 13 | **a) No** //answer 14 | 15 | Explanation: Correct! Generators break the "run to completion" model and introduce functions that can start, pause, and reset! 16 | 17 | 18 | 2) 19 | 20 | Which of the following lines demonstrates a proper instance of a generator? 21 | 22 | a) const gen = new generator(); 23 | 24 | Explanation: Close. Generators actually do not use the 'new' keyword to instantiate. 25 | 26 | **b) const gen = generator();** // answer 27 | 28 | Explanation: Correct! Generators actually do not use the 'new' keyword to instantiate. 29 | 30 | 31 | 3) 32 | 33 | Which keyword is used within a generator to tell it to 'pause'? 34 | 35 | a) halt 36 | 37 | Explanation: Incorrect. This is not an ES6 keyword. 38 | 39 | b) stop 40 | 41 | Explanation: Incorrect. This is not an ES6 keyword. 42 | 43 | **c) yield** // correct 44 | 45 | Explanation: Correct! 46 | -------------------------------------------------------------------------------- /course_material/quizzes/methods_and_modules/answers.md: -------------------------------------------------------------------------------- 1 | Quiz: Methods and Modules 2 | 3 | Time for another optional quiz! This will simply reinforce the topics that we just went over: methods and modules. 4 | 5 | 1) 6 | 7 | True or false? 8 | 9 | Arrow functions are anonymous by default. 10 | 11 | **a) true** //answer 12 | 13 | Explanation: Correct! Anonymous functions are always anonymous because they do not use the 'function declaration'. 14 | 15 | b) false 16 | 17 | Explanation: Incorrect. Anonymous functions are always anonymous because they do not the 'function declaration'. 18 | 19 | 2) Which es6 helper method allows us to create arrays by calling a specific function on each element within an initial array? 20 | 21 | **a) map** //answer 22 | 23 | Explanation: Correct! 24 | 25 | b) filter 26 | 27 | Explanation: Nope, this helper method creates new arrays on individual values of an array based on a certain test 28 | 29 | 3) Which choice shows valid use of the 'default' keyword? 30 | 31 | a) export by default multiply; 32 | 33 | Explanation: Incorrect. The default keyword does not follow a 'by' keyword. 34 | 35 | **b) export default multiply;** // answer 36 | 37 | Explanation: Correct! Valid syntax and use of the default keyword. 38 | 39 | c) export { default, multiply } 40 | Explanation: Incorrect. This would export two methods named default and multiply. But it would not export multiply as the default method. 41 | 42 | 4) Which built-in helper method could I use to check if a number is a not greater than 2^53 in JavaScript? 43 | 44 | **a) Number.isSafeInteger()** //answer 45 | 46 | Explanation: Correct! JavaScript limits safe integers to values up to 2^53, which is checked by Number.isSafeInteger() 47 | 48 | b) Number.isFinite() 49 | 50 | Explanation: Incorrect, but close. Numbers beyond 2^53 can be finite, but are they safe? 51 | -------------------------------------------------------------------------------- /course_material/quizzes/new_es6_syntax/answers.md: -------------------------------------------------------------------------------- 1 | Quiz: New ES6 Syntax 2 | 3 | All right, time to get your game face on! The following multiple choice or true/false questions will help reinforce your ES6 knowledge. Note that this exercise is totally optional :) 4 | 5 | 1) 6 | 7 | True or false? 8 | 9 | The 'var' keyword allows for block scoping. 10 | 11 | **a) false** //answer 12 | 13 | Explanation: Correct! The 'var' keyword actually does not allow block scoping. Re-using the same variable with 'var' twice in coding blocks will overwrite data. 14 | 15 | b) true 16 | 17 | Explanation: Incorrect. The 'var' keyword actually does not allow block scoping. Re-using the same variable with 'var' twice in coding blocks will overwrite data. 18 | 19 | 20 | 2) Which es6 keyword declares a variable that cannot be re-assigned or re-declared? 21 | 22 | a) let 23 | 24 | Explanation: Nope, variables declared with 'let' can be re-assigned. 25 | 26 | b) var 27 | 28 | Explanation: Nope, variables declared with 'var' can be re-assigned. 29 | 30 | **c) const** // answer 31 | 32 | Explanation: Yes! The 'const' keyword restricts data from re-assignment. 33 | 34 | 3) Which choice correctly uses the spread operator? 35 | 36 | a) let c = [1, ...a..., b]; 37 | 38 | Explanation: Incorrect. This is invalid syntax. The spread operator is denoted by: ... 39 | 40 | b) let c = ...[a, b]; 41 | 42 | Explanation: Incorrect. This will throw an error because the spread operator expects a variable, not an array. 43 | 44 | **c) let c = [a, ...b];** //answer 45 | Explanation: Correct! This is valid syntax for the spread operator. 46 | 47 | 48 | 4) Say I had, b = 'blastoff'. Which line uses a template literal to set a 'message' variable to '3...2...1... blastoff!' 49 | 50 | a) let message = '3...2...1...' + ' ' + b + '!'; 51 | 52 | Explanation: Incorrect. Although this creates the correct string, this does not use template literals but string concatenation. 53 | 54 | b) let message = `3...2...1... {b}!` 55 | 56 | Explanation: Incorrect. The correct syntax for embedding expressions into a template literal includes a dollar sign: ${...} 57 | 58 | c) **let message = `3...2...1... ${b}!`** //answer 59 | 60 | Explanation: Correct! This properly sets message to the desired string with a template literal. 61 | -------------------------------------------------------------------------------- /course_material/quizzes/promises/answers.md: -------------------------------------------------------------------------------- 1 | Optional Quiz: Examining Promises and Asynchronous Programming 2 | 3 | Here comes an optional quiz. Let's go over important concepts that came up in our exploration of asynchronous programming and ES6 promises. 4 | 5 | 1) 6 | 7 | Which type of programming refers to programs that run on continuous loop to divert blocking operations to different handlers? 8 | 9 | a) synchronous programming 10 | 11 | Explanation: Nope. Synchronous programming refers to a programs that run in sequence, from top to bottom, that may encounter blocking operations. 12 | 13 | **b) asynchronous programming** // answer 14 | 15 | Explanation: Correct! Asynchronous programming runs on a loop and defers blocking operations to handlers in order to maintain a running state. 16 | 17 | 18 | 19 | 2) 20 | 21 | What are the three states that an es6 promise can have? 22 | 23 | **a) Pending, Fulfilled, Rejected** //answer 24 | 25 | Explanation: Correct! Pending, Fulfilled, and Rejected represent the three states in fulfilling a promise. 26 | 27 | b) Almost, Done, Half-Completed 28 | 29 | Explanation: Incorrect. Hint: One of the conventional keywords for consuming a promise in its .then() method is 'reject'. 30 | 31 | c) Paused, Yield, Continue 32 | 33 | Explanation: Incorrect: Hint: One of the conventional keywords for consuming a promise in its .then() method is 'reject'. 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wb4", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --mode development", 8 | "build": "webpack --mode production" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.3", 15 | "babel-loader": "^7.1.4", 16 | "babel-preset-env": "^1.7.0", 17 | "webpack": "^4.12.0", 18 | "webpack-cli": "^3.0.3", 19 | "webpack-dev-server": "^3.1.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: path.resolve(__dirname, 'app'), 5 | output: { 6 | path: path.resolve(__dirname, 'build'), 7 | filename: 'bundle.js' 8 | }, 9 | // module: { 10 | // rules: [ 11 | // { 12 | // test: /\.js$/, 13 | // exclude: /node_modules/, 14 | // use: ['babel-loader'] 15 | // } 16 | // ] 17 | // }, 18 | devServer: { 19 | port: 3000, 20 | contentBase: path.resolve(__dirname, 'build') 21 | } 22 | } --------------------------------------------------------------------------------