From 771142bf546d38388c6ef9470ae22b51a1d9b0ad Mon Sep 17 00:00:00 2001 From: Albert Rigo Date: Mon, 4 Mar 2019 17:07:24 +0100 Subject: [PATCH 1/8] link within FooCoding --- README.md | 7 ++++--- Week1/README.md | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index fa97dad57..8e693f1f7 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ > Please help us improve and share your feedback! If you find better tutorials -or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls). +or links, please share them by [opening a pull request](https://github.com/FooCoding/JavaScript3/pulls). -# HackYourFuture JavaScript 3 +# JavaScript 3 Here you can find course content and homework for the JavaScript3 modules @@ -18,6 +18,7 @@ We expect you to __always__ come prepared to the class on Sunday. ### Overall A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear. -*The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)* +--- +Credit goes to [HackYourFuture](https://github.com/HackYourFuture) which this is based upon. Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. diff --git a/Week1/README.md b/Week1/README.md index 6756bb92d..8728329f4 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -31,4 +31,4 @@ Here are resources that we like you to read as a preparation for the first lectu ### Handing in homework using GitHub pull requests -- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) +- [Handing in homework](https://github.com/FooCoding/fundamentals/blob/master/fundamentals/homework_pr.md) From 82ab2f34be9bd92e7c6ae2b7a4615e354d174d41 Mon Sep 17 00:00:00 2001 From: Mattias Lundberg Date: Fri, 5 Jul 2019 13:33:42 +0200 Subject: [PATCH 2/8] Make link properly clickable --- Week1/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index eed3987c8..0476a98b1 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -32,7 +32,7 @@ Figure 1 below shows an example of what your application could look like. Note t Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles. -A live version of this application can be found here: http://hyf-github.netlify.com/ +A live version of this application can be found here: [http://hyf-github.netlify.com/](http://hyf-github.netlify.com/) ### 1.2 The GitHub API From 8196accc6900ad1628f730a94ad4094b1624c953 Mon Sep 17 00:00:00 2001 From: Mattias Lundberg Date: Fri, 5 Jul 2019 13:34:13 +0200 Subject: [PATCH 3/8] HYF -> FooCoding --- Week1/MAKEME.md | 18 +++++++++--------- Week3/MAKEME.md | 2 +- homework/App.js | 4 ++-- homework/index.html | 41 +++++++++++++++++++++-------------------- homework/index.js | 4 ++-- homework/index2.html | 2 +- 6 files changed, 36 insertions(+), 35 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 0476a98b1..e779e2405 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -19,7 +19,7 @@ _This homework is more extensive and challenging than previous homework! Please You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/). -This application should display information about the available [HYF GitHub repositories](https://github.com/hackyourfuture). The functionalities we would like to see in your application are as follows: +This application should display information about the available [FooCoding GitHub repositories](https://github.com/foocoding). The functionalities we would like to see in your application are as follows: - The user should be able to select a repository from a list of available repositories. - The application should display high-level information about the selected repository and show a list of its contributors. @@ -36,15 +36,15 @@ A live version of this application can be found here: [http://hyf-github.netlify ### 1.2 The GitHub API -#### 1.2.1 Get a list of HYF repositories +#### 1.2.1 Get a list of FooCoding repositories -You can fetch a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)): +You can fetch a list of FooCoding repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)): ``` -https://api.github.com/orgs/HackYourFuture/repos?per_page=100 +https://api.github.com/orgs/foocoding/repos?per_page=100 ``` -If you open this URL in the browser (_try it!_) you will receive JSON data about the available HYF repositories. This is the data that you will need to work with in this assignment. +If you open this URL in the browser (_try it!_) you will receive JSON data about the available FooCoding repositories. This is the data that you will need to work with in this assignment. Note the query string `?per_page=100` in the above URL. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30). HackYourFuture has more than 30 repositories but less than 100. @@ -62,7 +62,7 @@ You can find detailed information about the GitHub API by means of the link list ### 1.3 Coding Style -In this homework we will be introducing a preferred coding style and supporting tools to help you write _"clean code"_. A number of popular [_JavaScript Style Guides_](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa) have recently emerged of which the one developed by [Airbnb](https://github.com/airbnb/javascript) has been chosen for this homework and is recommended for subsequent use during the HYF curriculum. It is documented here: +In this homework we will be introducing a preferred coding style and supporting tools to help you write _"clean code"_. A number of popular [_JavaScript Style Guides_](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa) have recently emerged of which the one developed by [Airbnb](https://github.com/airbnb/javascript) has been chosen for this homework and is recommended for subsequent use during the FooCoding curriculum. It is documented here: - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) @@ -146,10 +146,10 @@ _**Do not change or delete any files outside of the `homework` folder!**_ | `createAndAppend` | A utility function for easily creating and appending HTML elements. | | `main` | Contains the start-up code for the application. | - `index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1: + `index.js` also contains a constant with the URL for the FooCoding repositories as listed in section 2.2.1: ```js - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; ``` 3. Open the `index.html` file in your browser. Notice that it produces the same JSON output that you saw previously when you opened the URL directly in the browser. @@ -162,7 +162,7 @@ The assignment is to produce an application similar to the one illustrated in Fi It should include the following components: -1. An HTML `select` element from which the user can select a HYF repository. This `select` element must be populated with `option` elements, one for each HYF repository. +1. An HTML `select` element from which the user can select a FooCoding repository. This `select` element must be populated with `option` elements, one for each FooCoding repository. 2. A left-hand column that displays basic information about the selected repository. 3. A right-hand column that displays a list of contributors to the repository. diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index ab57382f2..df6d0eac9 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -69,7 +69,7 @@ The `App.js`, `Repository.js` and `Contributor.js` files each contain skeleton c _Read:_ -- HYF fundamental: [ES6 Classes](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/oop_classes.md#es6-classes) +- FooCoding fundamental: [ES6 Classes](https://github.com/foocoding/fundamentals/blob/master/fundamentals/oop_classes.md#es6-classes) - More on ES6 classes: [ES6 Classes in Depth](https://ponyfoo.com/articles/es6-classes-in-depth) #### 2.2.3 ARIA-compliance (BONUS) diff --git a/homework/App.js b/homework/App.js index 32b71e34b..5f81a47a1 100644 --- a/homework/App.js +++ b/homework/App.js @@ -76,6 +76,6 @@ class App { } } -const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; -window.onload = () => new App(HYF_REPOS_URL); +window.onload = () => new App(REPOS_URL); diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..cc4b45bcb 100644 --- a/homework/index.html +++ b/homework/index.html @@ -1,23 +1,24 @@ + + + + + + + + + + Codestin Search App + + + - - - - - - - - - - Codestin Search App - - - - - -
- - - - \ No newline at end of file + +
+ + + diff --git a/homework/index.js b/homework/index.js index d3a97645e..d8a04f271 100644 --- a/homework/index.js +++ b/homework/index.js @@ -41,7 +41,7 @@ }); } - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; - window.onload = () => main(HYF_REPOS_URL); + window.onload = () => main(REPOS_URL); } diff --git a/homework/index2.html b/homework/index2.html index 2d1fc8fa7..ab3c22c0c 100644 --- a/homework/index2.html +++ b/homework/index2.html @@ -12,7 +12,7 @@ - Codestin Search App + Codestin Search App From 5fada6f72fc5f176e9bb823d085a779914c39aaf Mon Sep 17 00:00:00 2001 From: Gabe Rodriguez Date: Sun, 4 Aug 2019 10:36:43 +0200 Subject: [PATCH 4/8] Week 1 lecture notes and exercises --- README.md | 10 +++--- Week1/LECTURENOTES.md | 29 +++++++++++++++++ Week1/MAKEME.md | 2 +- Week1/README.md | 2 +- Week1/search.html | 72 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 108 insertions(+), 7 deletions(-) create mode 100644 Week1/LECTURENOTES.md create mode 100644 Week1/search.html diff --git a/README.md b/README.md index 8e693f1f7..d2b95580f 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,11 @@ or links, please share them by [opening a pull request](https://github.com/FooCo Here you can find course content and homework for the JavaScript3 modules -|Week|Topic|Read|Homework| -|----|-----|----|--------| -|1.|• Structure for a basic SPA (Single Page Application)
• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| -|2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md)
• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)| -|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md)
• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)
• call, apply, bind
• [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| +|Week|Topic|Read|Homework|Lecture notes| +|----|-----|----|--------|-------------| +|1.|• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
• API calls
• Structure for a basic SPA (Single Page Application)
|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|[notes](/Week1/LECTURENOTES.md) +|2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md)
• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[notes](/Week2/LECTURENOTES.md) +|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md)
• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)
• call, apply, bind
• [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| __Kind note:__ diff --git a/Week1/LECTURENOTES.md b/Week1/LECTURENOTES.md new file mode 100644 index 000000000..1a1062c0e --- /dev/null +++ b/Week1/LECTURENOTES.md @@ -0,0 +1,29 @@ +## XMLHttpRequests +- What is an Http request? + - Life of a request + - https://dev.to/dangolant/things-i-brushed-up-on-this-week-the-http-request-lifecycle- + - REST + - Verbs + - Headers + - Status codes +- Example w/ curl +- Now how do we send a request with a browser? +- Websites of the early era required a complete page load upon each request (https://en.wikipedia.org/wiki/Ajax_(programming)) + - This is inefficient and provides a bad user experience with full reloads on each action. Example: MapQuest in the early days. +- AJAX + - Gmail in 2004 and Google Maps in 2005 + - A way for browsers to send requests asyncronously! 🎉 + - In 2006, W3C releated XMLHttpRequest specification +- XMLHttpRequest + - Guide: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest + +## API calls +- Open API's without need for auth tokens (https://github.com/public-apis/public-apis/blob/master/README.md). Use one for example. +- Create new HTML file +- Create a button that will have an event listener +- Retrieve data from api with XMLHttpRequest obj + +- ...but callbacks? [joke](https://www.reddit.com/r/ProgrammerHumor/comments/che938/asynchronous_javascript/) + + +## Structure for a basic SPA diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index e779e2405..d3b76a609 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -2,9 +2,9 @@ ``` Topics discussed this week: -• Structure for a basic SPA • XMLHttpRequests • API calls +• Structure for a basic SPA ``` ## Step 1: Single Page Application :sweat_drops: diff --git a/Week1/README.md b/Week1/README.md index 8728329f4..3f0e38109 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -2,9 +2,9 @@ ``` In week one we will discuss the following topics: -• Structure for a basic SPA (Single Page Application) • XMLHttpRequests • API calls +• Structure for a basic SPA ``` Here are resources that we like you to read as a preparation for the first lecture: diff --git a/Week1/search.html b/Week1/search.html new file mode 100644 index 000000000..b5d3f1897 --- /dev/null +++ b/Week1/search.html @@ -0,0 +1,72 @@ + + + + Codestin Search App + + + + + +
+
+ + + + From d3c23d8df2cda88a2fef8fa654523e47b84dd7d3 Mon Sep 17 00:00:00 2001 From: Gabe Rodriguez Date: Mon, 5 Aug 2019 19:27:05 +0200 Subject: [PATCH 5/8] week2 group quiz --- Week2/LECTURENOTES.md | 135 ++++++++++++++++++++++++++++++++++++++++++ Week2/README.md | 6 -- 2 files changed, 135 insertions(+), 6 deletions(-) create mode 100644 Week2/LECTURENOTES.md diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md new file mode 100644 index 000000000..74ad5be77 --- /dev/null +++ b/Week2/LECTURENOTES.md @@ -0,0 +1,135 @@ +## Event Loop +_Split class in groups of two or three_ + +1) How many threads does the browser's Javascript runtime have? + - *Bonus*: What is a thread? + +2) In what order will the colors output to the console? +``` +const foo = () => { + console.log('pink'); +} +const bar = () => { + console.log('black'); + foo(); + console.log('blue'); +} +bar(); +``` + +3) What is "the stack"? + +4) For each line of code below, how many frames are on the call stack? +``` +const getDate = () => new Date().toDateString() + +const greet = (name, greeting) => { + return `${greeting}, ${name}. You arrived on ${getDate()}.` +} + +greet('mike', 'hello') +``` + +5) What is it called when the javascript engine (node or browser) exceeds the amount of frames it can handle on the stack? + +6) What is the order of the colors output to the console? +``` +const foo = () => { + console.log('pink'); +} +const bar = () => { + console.log('black'); + setTimeout(foo, 0); + console.log('blue'); +} +bar(); +``` + +7) What keeps track of these asynchronous webAPI's? + - setTimeout + - addEventListener() + - fetch() + + a) call stack + b) callback que + c) event loop + d) browser + e) Javascript runtime + +8) What is the name of the type of function (called someFunc in the example) that gets called after an asynchronous event? +``` +document.querySelector('button').addEventListener('click', someFunc); +``` + +9) A function you've never seen before... What would you guess this function does? Is it synchronous or asynchronous? +``` +request('http://www.pokemonapi.dev/info/squirtle', function(error, response, body) { + console.log(body); + console.log('Done!'); +}); +``` + +10) In Javascript land, what does it mean for code to be "blocking"? + +11) Which function, when executed, will not block the UI? +``` +const countToOneBillionv1 = () => { + for (let i = 0; i < 10; i++) { + longRunningOperation(i) + } +} + +const countToOneBillionv2 = () => { + for (let i = 0; i < 10; i++) { + setTimeout(() => longRunningOperation(i), 0) + } +} +``` + +12) What is the order of the colors output to the console? +``` +fetch('http://pokemon.dev/api/id/squirtle') + .then(result => { + console.log('blue') + return fetch('http://pokemon.dev/api/id/charmander') + }) + .then(result => { + console.log('red') + }) + +console.log('green') +``` + +13) What is the order of the colors output to the console? +``` +const foo = async () => { + console.log('green') + const result = await fetch('http://pokemon.dev/api/id/squirtle') + console.log('blue') + const result = await fetch('http://pokemon.dev/api/id/charmander') + console.log('red') +} +foo(); +``` + +14) What is the order of the colors output to the console? +``` +const myArray = ['red', 'blue', 'green']; +myArray.forEach(function(item) { + console.log(item); +}); + +setTimeout(function() { + console.log('orange'); +}, 50); + +for (let i=0; i < myArray.length; i++) { + console.log(myArray[i]); + if (i === (myArray.length - 1)) { + setTimeout(function() { + console.log('black'); + }, 0); + } +} + +``` diff --git a/Week2/README.md b/Week2/README.md index e55018f74..98d3d122c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -15,10 +15,4 @@ Here are resources that we like you to read as a preparation for the second lect - Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/ - [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) -### Fundamentals - -- [Event Loop](../../../../fundamentals/blob/master/fundamentals/event_loop.md) -- [Promises](../../../../fundamentals/blob/master/fundamentals/promises.md) - - _Please go through the material and come to class prepared!_ From c004823739010eda3da5453e9251ceb4ae8e98f1 Mon Sep 17 00:00:00 2001 From: Gabe Rodriguez Date: Sat, 10 Aug 2019 19:08:32 +0200 Subject: [PATCH 6/8] Adding week 3 lecture notes --- README.md | 2 +- Week3/LECTURENOTES.md | 153 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 Week3/LECTURENOTES.md diff --git a/README.md b/README.md index d2b95580f..8fe3c5dee 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Here you can find course content and homework for the JavaScript3 modules |----|-----|----|--------|-------------| |1.|• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
• API calls
• Structure for a basic SPA (Single Page Application)
|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|[notes](/Week1/LECTURENOTES.md) |2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md)
• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[notes](/Week2/LECTURENOTES.md) -|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md)
• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)
• call, apply, bind
• [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| +|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md)
• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)
• call, apply, bind
• [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|[notes](/Week3/LECTURENOTES.md) __Kind note:__ diff --git a/Week3/LECTURENOTES.md b/Week3/LECTURENOTES.md new file mode 100644 index 000000000..d0d46ba54 --- /dev/null +++ b/Week3/LECTURENOTES.md @@ -0,0 +1,153 @@ +## ES6 Classes +- I'm trying to make a video game with characters that have names, health points, and armor points. What data structure could be used to represent a character? + - An object nicely encapsulated + ``` + const character = { + name: 'Sekiro', + health: 100, + armor: 20, + } + ``` + - What if we wanted to give it attack methods? + ``` + const character = { + name: 'Sekiro', + health: 100, + armor: 20, + strength: 30, + attack: (character) => { + character.health -= strength; + } + } + ``` + - Each character, can use power-up once to increase their strength for 10 seconds. How do we implement that? + ``` + const character = { + name: 'Sekiro', + health: 100, + armor: 20, + strength: 30, + attack: (opponent) => { + opponent.health -= strength; + }, + powerUpUsed: false + } + + const powerUp = character => { + if (!character.powerUpUsed) { + character.strength = character.strength * 2; + character.powerUpUsed = true; + } + } + + powerUp(character) + ``` + - but what if we want to do... `character.powerUp()`? + + ``` + const character = { + name: 'Sekiro', + health: 100, + armor: 20, + strength: 30, + attack: (opponent) => { + opponent.health -= strength; + }, + _powerUpReady = true, + powerUp: () => { + if (_powerUpReady) { + this.strength = this.strength * 2; + setTimeout(() => { + this.strength = this.strength / 2; + }, 10000) + _powerUpReady = false; + } + } + } + ``` + - Why does _powerUpReady have an underscore? What's different about it? + - Great! But... we need to start create many of these---one for each character. But if we just copy/paste, we will be copying a lot of code redudantly. This is most obvious when it comes to the attack and powerUp methods. What shall we do!? + +- In the old days ---> constructor functions + - Uppercase constructor + ``` + function Character(name, strength) { + this.name = name; + this.health = 100; + this.armor = 20; + this.strength = strength; + this._powerUpReady = true, + } + + Character.prototype.attack = (character) => { + character.health -= strength; + } + Character.prototype.powerUp: () => { + if (this._powerUpReady) { + this.strength = this.strength * 2; + setTimeout(() => { + this.strength = this.strength / 2; + }, 10000) + this._powerUpReady = false; + } + } + ``` + - Then you could instantiate it via... + ``` + const flash = new Character('Flash Gordon', 10) + ``` +- Enter ES6 classes + ``` + class Character { + health = 100; + armor = 20; + _powerUpReady = true; + + constructor(name, strength) { + this.name = name; + this.strength = strength; + } + + attack(character) { + character.health -= this.strength; + } + + powerUp() { + if (this._powerUpReady) { + this.strength = this.strength * 2; + setTimeout(() => { + this.strength = this.strength / 2; + }, 10000) + this._powerUpReady = false; + } + } + } + ``` + +- Prototypes + - Array methods, where do they come from? + - Everything is an object + - instanceOf + - Object.isPrototypeOf() & .\_\_proto\_\_ + +- Inheritance + - We want to create bosses. They have everything a normal character has, but with more health, an evil tagline, and a self-heal method. + - We can use extend! + ``` + class Boss extends Character { + health = 200; + + constructor(name, strength, tagline) { + super(name, strength); + this.tagline = tagline; + } + + sayTagline() { + console.log(this.tagline) + } + + selfHeal() { + this.health += 20; + } + } + ``` \ No newline at end of file From 985f9fa4fd384ac16850488846b413f1d844351e Mon Sep 17 00:00:00 2001 From: Mattias Lundberg Date: Sun, 11 Aug 2019 15:27:05 +0200 Subject: [PATCH 7/8] Add more beginner friendly call/apply/bind reading --- Week3/README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/Week3/README.md b/Week3/README.md index 2c317379f..84694b8e3 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -13,17 +13,16 @@ Here are resources that we like you to read as a preparation for the third lectu - [Object-Oriented Programming & Classes](../../../../fundamentals/blob/master/fundamentals/oop_classes.md) - [What is 'this'?](../../../../fundamentals/blob/master/fundamentals/this.md) +- [Javascript call() & apply() vs bind()?](https://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind) -### `call` `apply`, `bind` +### Extra reading - [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) - [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) - [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) - ## Recommended Readings [Eloquent JavaScript: Chapter 6 - The Secret Life of Objects](http://eloquentjavascript.net/06_object.html). Read up to the section of **Maps**. - -_Please go through the material and come to class prepared!_ \ No newline at end of file +_Please go through the material and come to class prepared!_ From fdcddd44bb3f938a6dc51ef01b6e32d432701753 Mon Sep 17 00:00:00 2001 From: Mattias Lundberg Date: Tue, 20 Aug 2019 08:21:45 +0200 Subject: [PATCH 8/8] Restore removed links from #3 And make them absolute so they work in all forks --- Week2/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Week2/README.md b/Week2/README.md index 98d3d122c..aebcad4e2 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -16,3 +16,8 @@ Here are resources that we like you to read as a preparation for the second lect - [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) _Please go through the material and come to class prepared!_ + +### Fundamentals + +- [Event Loop](https://github.com/foocoding/fundamentals/blob/master/fundamentals/event_loop.md) +- [Promises](https://github.com/foocoding/fundamentals/blob/master/fundamentals/promises.md)