Adding lecture notes and exercises for javascript2 week 2

kvarak · Jun 28, 2019 · Jun 25, 2019 · Jun 26, 2019 · Jun 25, 2019 · 6c6838ade948f5f9175b6d62cd49ea9af406a41e
commit 6c6838ade948f5f9175b6d62cd49ea9af406a41e
diff --git 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 <br>• [Events](http://javascript.info/introduction-browser-events)<br>• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• [Code debugging using the browser](http://javascript.info/debugging-chrome) <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [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<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
+|2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• 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) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
 
 ## Test

diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md
@@ -0,0 +1,42 @@
+### 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?!
+
+
+
+## Functions + JSON
+
+## Higher order functions
+## Arrow functions
+
+
+
+
+## Array Manipulations
+## Map and filter
+## Reduce (every?)
+
+## Discuss Homework (20mins)
+
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -11,6 +11,13 @@ Topics discussed this week:
 
 > [Here](/Week3/README.md) you find the readings you have to complete before the third lecture.
 
+## Step 0: JSON parsing
+1. Create an HTML file
+2. Insert a script tag that points to squirtle-sprites.js
+3. In squirtle-sprites.js, convert pokemonDataJSONString 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?
+
 ## Step 1: More map, filter and `=>`
 
 _Deadline Wednesday_

diff --git a/Week2/example.html b/Week2/example.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Sample exercise</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      #advice {
+        color: slateblue;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Here is your advice for the day:</h3>
+    <h1 id="advice"></h1>
+    <script type="text/javascript" src="./lecture-exercises.js"></script>
+  </body>
+</html>
diff --git a/Week2/homework/pokemon-data.js b/Week2/homework/pokemon-data.js
diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js
@@ -0,0 +1,10 @@
+const pokemonDataJSONString = require('./pokemon-data.js')
+
+// Step 1: Create an HTML file
+// Step 2: Insert a script tag that points to this javascript file
+// Step 3: Convert pokemonDataJSONString to a javascript object so you can access its properties
+// Step 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?
+
+
+console.log(JSON.parse(pokemonDataJSONString))
diff --git a/Week2/lecture-exercises.js 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();