Skip to content

Commit 6a398b9

Browse files
Gabe Rodriguezkvarak
Gabe Rodriguez
authored and
kvarak
committed
Adding lecture notes and exercises for javascript2 week 2
1 parent 918dc70 commit 6a398b9

7 files changed

Lines changed: 101 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ or links, please share them by [opening a pull request](https://github.com/FooCo
55

66
Here you can find course content and homework for the JavaScript2 module
77

8-
|Week|Topic|Read|Homework|
9-
|----|-----|----|--------|
8+
|Week|Topic|Read|Homework|Lecture Notes|
9+
|----|-----|----|--------|--------|
1010
|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)|
11-
|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)|
11+
|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)
1212
|3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
1313

1414
## Test

‎Week2/LECTURENOTES.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
### Lecture Notes Week 2
2+
3+
#### Before class
4+
Slack message students for things they'd like to review before diving into new topics
5+
6+
## Reviewing (11-11:30am)
7+
Cover individual topics that students may still be stuck on from previous lectures and homework
8+
9+
## JSON (11:30am-12pm)
10+
* Illustration on Google Maps. How do people from Sweden speak to people from Sri Lanka?
11+
* [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!
12+
* Douglass Crawford
13+
* What is JSON?
14+
* Javscript Object Notation
15+
* We are fortunate that it's familiar and easy to understand :)
16+
* It is a STRING [PokeAPI](https://pokeapi.co/api/v2/pokemon/squirtle/)
17+
* Not all javascript objects are valid json
18+
* Coding exercise (lecture-exercise.js)
19+
* JSON.parse
20+
* Serialization vs Deserialization
21+
* JSON.stringify()
22+
* Other formats
23+
* protobufs
24+
* XML
25+
* GRPC?!
26+
27+
28+
29+
## Functions + JSON
30+
31+
## Higher order functions
32+
## Arrow functions
33+
34+
35+
36+
37+
## Array Manipulations
38+
## Map and filter
39+
## Reduce (every?)
40+
41+
## Discuss Homework (20mins)
42+

‎Week2/MAKEME.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@ Topics discussed this week:
1111

1212
> [Here](/Week3/README.md) you find the readings you have to complete before the third lecture.
1313
14+
## Step 0: JSON parsing
15+
1. Create an HTML file
16+
2. Insert a script tag that points to squirtle-sprites.js
17+
3. In squirtle-sprites.js, convert pokemonDataJSONString to a javascript object so you can access its properties
18+
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?)
19+
*Bonus Challenge*: Can you use an array method to loop over all sprites so you don't have to manually type each?
20+
1421
## Step 1: More map, filter and `=>`
1522

1623
_Deadline Wednesday_

‎Week2/example.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Sample exercise</title>
6+
<style>
7+
body {
8+
font-family: sans-serif;
9+
}
10+
#advice {
11+
color: slateblue;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<h3>Here is your advice for the day:</h3>
17+
<h1 id="advice"></h1>
18+
<script type="text/javascript" src="./lecture-exercises.js"></script>
19+
</body>
20+
</html>

‎Week2/homework/pokemon-data.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Week2/homework/squirtle-sprites.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const pokemonDataJSONString = require('./pokemon-data.js')
2+
3+
// Step 1: Create an HTML file
4+
// Step 2: Insert a script tag that points to this javascript file
5+
// Step 3: Convert pokemonDataJSONString to a javascript object so you can access its properties
6+
// 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?)
7+
// BONUS CHALLENGE: Can you use an array method to loop over all sprites so you don't have to manually type each?
8+
9+
10+
console.log(JSON.parse(pokemonDataJSONString))

‎Week2/lecture-exercises.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
async function getRandomAdvice() {
2+
const adviceReq = fetch('https://api.adviceslip.com/advice'); // send request
3+
const adviceResponse = await adviceReq; // wait until something comes back
4+
// const jsonString = await adviceResponse.text();
5+
// return jsonString
6+
// const adviceData = JSON.parse(jsonString)
7+
// return jsonString
8+
const adviceData = await adviceResponse.json(); // parses JSON string into native JavaScript object
9+
return adviceData.slip.advice;
10+
}
11+
12+
async function setRandomAdvice() {
13+
const adviceEl = document.getElementById('advice');
14+
adviceEl.innerText = await getRandomAdvice();
15+
}
16+
17+
setRandomAdvice();

0 commit comments

Comments
 (0)