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.

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 @@ + + + + + + + + + + FooCoding-GITHUB + + + - - - - - - - - - - HYF-GITHUB - - - - - -

- - - - \ 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 @@ - HYF-GITHUB + FooCoding-GITHUB 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 @@ + + + + TV show search + + + + + +

+ + + + 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) pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: