Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Adding lecture notes and exercises for javascript2 week 2 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 28, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
51 changes: 51 additions & 0 deletions Week2/LECTURENOTES.md
Original file line number Diff line number Diff line change
@@ -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)
18 changes: 13 additions & 5 deletions Week2/MAKEME.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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/)!

Expand Down Expand Up @@ -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)
27 changes: 11 additions & 16 deletions Week2/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!_
20 changes: 20 additions & 0 deletions Week2/example.html
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions Week2/homework/squirtle-sprites.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 17 additions & 0 deletions Week2/lecture-exercises.js
Original file line number Diff line number Diff line change
@@ -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();