Sample exercise

diff --git a/README.md b/README.md index 25dc59dce..a605c9c3f 100644 --- a/README.md +++ b/README.md @@ -5,10 +5,10 @@ or links, please share them by [opening a pull request](https://github.com/FooCo Here you can find course content and homework for the JavaScript2 module -|Week|Topic|Read|Homework| -|----|-----|----|--------| +|Week|Topic|Read|Homework|Lecture Notes| +|----|-----|----|--------|--------| |1.|• Capturing user input through forms
• [Events](http://javascript.info/introduction-browser-events)
• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)
• [Code debugging using the browser](http://javascript.info/debugging-chrome)
• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)
• Structuring code files
• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)
• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| -|2.|• Functions + JSON/Arrays
• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)
• JSON
• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)
• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)| +|2.|• Functions + JSON/Arrays
• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)
• JSON
• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)
• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Notes](/Week2/LECTURENOTES.md) |3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md)
• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| ## Test diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md new file mode 100644 index 000000000..09352a864 --- /dev/null +++ b/Week2/LECTURENOTES.md @@ -0,0 +1,51 @@ +### Lecture Notes Week 2 + +#### Before class +Slack message students for things they'd like to review before diving into new topics + +## Reviewing (11-11:30am) +Cover individual topics that students may still be stuck on from previous lectures and homework + +## JSON (11:30am-12pm) +* Illustration on Google Maps. How do people from Sweden speak to people from Sri Lanka? +* [Advice Slip](https://adviceslip.com/) and [API](https://api.adviceslip.com/#endpoint-random). If they have machines that run on the programming language RUST, how can we communicate with them? They serialize their data to JSON! +* Douglass Crawford +* What is JSON? + * Javscript Object Notation + * We are fortunate that it's familiar and easy to understand :) + * It is a STRING [PokeAPI](https://pokeapi.co/api/v2/pokemon/squirtle/) + * Not all javascript objects are valid json +* Coding exercise (lecture-exercise.js) + * JSON.parse +* Serialization vs Deserialization + * JSON.stringify() + * Other formats + * protobufs + * XML + * GRPC?! +* Cover homework question #3 + +## Functions advanced (12-12:30pm) +* Different ways functions can be made: + * function declaration vs expression + * arrow function + * Omitting return, parameter parenthesis +* What's a method? +* Pure function? or side effects? +* Example: how does a program run this? (example w/ a function, call of that function, and a console log) + * Call stack (stack overflow) +* Params + * Extra params + * Default params +* Recursion (basic example) +* Example function + * pigs example? + * countChar("kakkerlak", "k")? With DOM manipulation? +* Simplicity of functions + * while loop from [Chapter 5](http://eloquentjavascript.net/05_higher_order.html) +* Higher order functions + * repeat(n, action) + * greaterThan10 + +## Array Manipulations +## Map, Filter, Reduce (others? every, some, etc) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 0169b7920..2709da79e 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -2,11 +2,10 @@ ``` Topics discussed this week: -• Functions + JSON/Arrays -• Array Manipulations • JSON -• Map and filter -• Arrow functions +• Functions advanced +• Array Manipulations +• Map, filter, & reduce ``` > [Here](/Week3/README.md) you find the readings you have to complete before the third lecture. @@ -139,7 +138,13 @@ If that's the case, try and fix the error. When done, run the tests again: `npm Repeat the previous step until all (= 2 in this case) tests pass. -## Step 3: ROVER +## Step 3: JSON parsing + +1. Create an HTML file +2. Insert a script tag that points to squirtle-sprites.js +3. In squirtle-sprites.js, call fetchPokemonData() and convert the JSON string it returns to a javascript object so you can access its properties +4. Display the sprite images (located in the parsed object) in the HTML page. You'll need to do some DOM manipulation kinda of stuff (maybe element.appendChild?) +*Bonus Challenge*: Can you use an array method to loop over all sprites so you don't have to manually type each? Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)! @@ -171,3 +176,6 @@ Go over your homework one last time: If the answer is 'yes' to all preceding questions you are ready to follow these instructions: - [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) + +### Do you have even more time? +Read the _Eloquent Javascript_ chapters in the [Week 2 Readme](./README.md) \ No newline at end of file diff --git a/Week2/README.md b/Week2/README.md index c58b21eb5..2b9dd1b9c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -4,37 +4,32 @@ ``` In week two we will discuss the following topics: -• Functions + JSON/Arrays -• Array Manipulations • JSON -• Map and filter -• Arrow functions +• Functions advanced +• Array Manipulations +• Map, filter, & reduce ``` ## Here are resources that we like you to read as a preparation for the coming lecture. ### JSON -- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN) +- [FreeCodeCamp JSON](https://www.youtube.com/watch?v=B-k76DMOj2k) +- [What is JSON and why does one use it?](https://www.quora.com/What-is-JSON-and-why-does-one-use-it/answer/Prid-Speed?ch=10&share=0b6f9763&srid=XxbK) ### Map and Filter - :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos. -### Code conventions -- Code conventions: http://crockford.com/javascript/code.html - ### Array cardio - Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/) -### From _Eloquent JavaScript_ - -- Objects continued: http://eloquentjavascript.net/06_object.html - - ## Recommended readings +These chapters from _Eloquent JavaScript_ are a bit advanced, but give in-depth explanations of the topics that will be discussed during the lecture. If you have the time, try giving these chapters a read. -This chapter from _Eloquent JavaScript_ gives in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits). +- Chapter 3 - [Functions](https://eloquentjavascript.net/03_functions.html) +- Chapter 4 - [Data Structures: Objects and Arrays](https://eloquentjavascript.net/04_data.html) +- Chapter 5 [Higher-Order Functions](https://eloquentjavascript.net/05_higher_order.html) -- Chapter 3 - [Functions](http://eloquentjavascript.net/03_functions.html) -- Chapter 5 - [Higher-Order Functions](http://eloquentjavascript.net/05_higher_order.html) +#### For fun + [The Weird History of JavaScript](https://www.youtube.com/watch?v=Sh6lK57Cuk4) shows just how haphazard the evolution of Javascript actually was. _Please go through the material and come to class prepared!_ \ No newline at end of file diff --git a/Week2/example.html b/Week2/example.html new file mode 100644 index 000000000..374f064c4 --- /dev/null +++ b/Week2/example.html @@ -0,0 +1,20 @@ + + + + + Sample exercise + + + +

Here is your advice for the day:

+ + + diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js new file mode 100644 index 000000000..b6b6e2920 --- /dev/null +++ b/Week2/homework/squirtle-sprites.js @@ -0,0 +1,11 @@ +/* eslint-disable */ + +/* + Call this function to get a JSON string of the data + (simulates calling a server to retrieve data) +*/ +function fetchPokemonData() { + return '{"abilities":[{"ability":{"name":"rain-dish","url":"https://pokeapi.co/api/v2/ability/44/"},"is_hidden":true,"slot":3},{"ability":{"name":"torrent","url":"https://pokeapi.co/api/v2/ability/67/"},"is_hidden":false,"slot":1}],"base_experience":63,"forms":[{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-form/7/"}],"height":5,"held_items":[],"id":7,"is_default":true,"location_area_encounters":"https://pokeapi.co/api/v2/pokemon/7/encounters","name":"squirtle","order":10,"species":{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-species/7/"},"sprites":{"back_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/7.png","back_female":null,"back_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/7.png","back_shiny_female":null,"front_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png","front_female":null,"front_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/7.png","front_shiny_female":null},"stats":[{"base_stat":43,"effort":0,"stat":{"name":"speed","url":"https://pokeapi.co/api/v2/stat/6/"}},{"base_stat":64,"effort":0,"stat":{"name":"special-defense","url":"https://pokeapi.co/api/v2/stat/5/"}},{"base_stat":50,"effort":0,"stat":{"name":"special-attack","url":"https://pokeapi.co/api/v2/stat/4/"}},{"base_stat":65,"effort":1,"stat":{"name":"defense","url":"https://pokeapi.co/api/v2/stat/3/"}},{"base_stat":48,"effort":0,"stat":{"name":"attack","url":"https://pokeapi.co/api/v2/stat/2/"}},{"base_stat":44,"effort":0,"stat":{"name":"hp","url":"https://pokeapi.co/api/v2/stat/1/"}}],"types":[{"slot":1,"type":{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"}}],"weight":90}'; +} + +/* Code goes below */ diff --git a/Week2/lecture-exercises.js b/Week2/lecture-exercises.js new file mode 100644 index 000000000..1fdfef4e0 --- /dev/null +++ b/Week2/lecture-exercises.js @@ -0,0 +1,17 @@ +async function getRandomAdvice() { + const adviceReq = fetch('https://api.adviceslip.com/advice'); // send request + const adviceResponse = await adviceReq; // wait until something comes back + // const jsonString = await adviceResponse.text(); + // return jsonString + // const adviceData = JSON.parse(jsonString) + // return jsonString + const adviceData = await adviceResponse.json(); // parses JSON string into native JavaScript object + return adviceData.slip.advice; +} + +async function setRandomAdvice() { + const adviceEl = document.getElementById('advice'); + adviceEl.innerText = await getRandomAdvice(); +} + +setRandomAdvice();