|
1 | | -# Reading Material JavaScript2 Week 3 |
| 1 | +# Reading Material JavaScript2 Week 2 |
2 | 2 |
|
3 | 3 | ## Agenda |
4 | 4 |
|
5 | | -These are the topics for week 3: |
| 5 | +These are the topics for week 2: |
6 | 6 |
|
7 | | -1. Callbacks |
8 | | -2. Event Loop |
9 | | -3. Developer Tools |
10 | | -4. Web Storage |
| 7 | +1. Synchronous vs. asynchronous |
| 8 | + - Synchronous |
| 9 | + - Asynchronous |
| 10 | +2. Callbacks |
| 11 | +3. Event Loop |
11 | 12 |
|
12 | | -## 1. Callbacks |
| 13 | +## 1. Synchronous vs. asynchronous |
13 | 14 |
|
14 | | -## 2. Event Loop |
| 15 | +### Synchronous |
15 | 16 |
|
16 | | -How does the browser know what to do first? This is where the Event Loop comes in. |
| 17 | +In the previous module you've learned about **control flow**. In short: it's the order in which the computer executes statements in a script. In JavaScript this goes from left to right, top to bottom. |
17 | 18 |
|
18 | | -For further study, check out the following resources |
| 19 | +Let's look at code execution from another angle. The program that executes your code can do it in two basic ways: synchronous or asynchronous. Whenever code blocks are executed line after line (from top to bottom) we call this **synchronous execution**. |
19 | 20 |
|
20 | | -- [What the heck is an event loop?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) |
21 | | -- [JavaScript Event Loop](https://www.youtube.com/watch?v=XzXIMZMN9k4) |
| 21 | +Imagine the following scenario: |
22 | 22 |
|
23 | | -## 3. Developer Tools |
| 23 | +> Noer wants to have breakfast but he doesn't have any food at home. He decides he want to eat oatmeal. The ingredients (oats and milk) can be bought at the supermarket. How to do this? First Noer takes a shower. Then he puts on some clothes. Then some shoes. Then he opens the door and goes outside. Then he jumps on the bike and goes to the closest supermarket. After looking for some time he finds the ingredients. Then Noer buys the ingredients. Then he jump back on the bike and go home. Then he mixes the ingredients and makes oatmeal. Then Noer eats and feels amazing! |
24 | 24 |
|
25 | | -- [Google Chrome Developer Tools Crash Course](https://www.youtube.com/watch?v=8aGhZQkoFbQ) |
| 25 | +In this example, each action could only happen after the previous has been completed. Noer can't put on his shoes and then take a shower. Or, he can't eat oatmeal before he has bought the ingredients. |
26 | 26 |
|
27 | | -## Finished? |
| 27 | +As you can see, each action is executed in a **synchronous** manner. This is to say: in a logical order sequentially and only one action at a time. |
28 | 28 |
|
29 | | -Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md). |
| 29 | +This is also how JavaScript by default operates. Only one operation can happen at a time. If something else wants to start, it has to wait until the current action has finished. |
| 30 | + |
| 31 | +### Asynchronous |
| 32 | + |
| 33 | +Sometimes we want to do multiple things, without them being dependent on each other. Consider the following analogy: |
| 34 | + |
| 35 | +> Wouter is feeling hungry so he decides to go to a restaurant. He arrives there and gets into the line to order food. After ordering he takes a seat and, while he waits, reads a book. Occassionally he looks around and sees different things happening: new people enter the restaurant, some people get their food served and others are just talking. After a short while Wouter's food arrives and it's time to dig in! |
| 36 | +
|
| 37 | +In this example Wouter reads a book, but that doesn't affect his meal from being prepared. Other |
| 38 | + |
| 39 | +Take a look at the following diagram: |
| 40 | + |
| 41 | + |
| 42 | + |
| 43 | +```js |
| 44 | +function first() { |
| 45 | + console.log('this finishes first'); |
| 46 | +} |
| 47 | +function second() { |
| 48 | + console.log('this finishes second'); |
| 49 | +} |
30 | 50 |
|
31 | | -## Here are resources that we like you to read as a preparation for the coming lecture. |
| 51 | +first(); |
| 52 | +second(); |
| 53 | +``` |
32 | 54 |
|
33 | | -### JSON |
| 55 | +In this example, only after `first()` has been executed will `second()` be executed. Only one thing happens at a time, and the next thing will ONLY happen after the previous thing has finished. This synchronous execution happens predictably and sequentially, without exception. |
34 | 56 |
|
35 | | -- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN) |
| 57 | +On the other hand we have |
36 | 58 |
|
37 | | -### Map and Filter |
| 59 | +Executing each block of code (whether it's a line or a loop/function/etc.) after each other is called |
38 | 60 |
|
39 | | -- :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos. |
| 61 | +This method of execution can have undesirable ramifications. Suppose a function is called to start a time consuming process. What if you want to stop the lengthy process? With synchronous execution, your program is “stuck,” waiting for the process to end, with no way out. |
40 | 62 |
|
41 | | -### Code conventions |
| 63 | +Asynchronous execution avoids this bottleneck. You are essentially saying, “I know this function call is going to take a great deal of time, but my program doesn’t want to wait around while it executes.” |
42 | 64 |
|
43 | | -- Code conventions: http://crockford.com/javascript/code.html |
| 65 | +## 2. Callbacks |
44 | 66 |
|
45 | | -### Array cardio |
| 67 | +Imagine the following situation: |
46 | 68 |
|
47 | | -- Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/) |
| 69 | +> It's 15.00 and you studying at home for an exam on the next day. Suddenly, your phone rings. You pick up and find it's your best friend! They ask if you'd like to hang out later. What do you do? On the one hand, you'd love to hang out have fun. On the other hand, you really should study some more. You don't know so tell your friend that you're going to call back later with your answer. You end the conversation and go back to studying. Maybe you take a short break and |
48 | 70 |
|
49 | | -### From _Eloquent JavaScript_ |
| 71 | +By default JavaScript works **synchronously**, as we've learned in the previous section. |
50 | 72 |
|
51 | | -- Objects continued: http://eloquentjavascript.net/06_object.html |
| 73 | +This is why callbacks are important: it allows us to introduce asynchronicity in the control flow of a program. |
52 | 74 |
|
53 | | -## Recommended readings |
| 75 | +A concrete example for why this might be useful is when you want to |
54 | 76 |
|
55 | | -This chapter from _Eloquent JavaScript_ gives in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits). |
| 77 | +Study the following resources to learn more about the importance of callbacks: |
56 | 78 |
|
57 | | -- Chapter 3 - [Functions](http://eloquentjavascript.net/03_functions.html) |
58 | | -- Chapter 5 - [Higher-Order Functions](http://eloquentjavascript.net/05_higher_order.html) |
| 79 | +- [Asynchronous JavaScript JavaScript](https://www.youtube.com/watch?v=YxWMxJONp7E) |
| 80 | +- [Understanding JavaScript Callbacks](https://www.youtube.com/watch?v=Nau-iEEgEoM) |
| 81 | +- [Callback Functions](https://www.youtube.com/watch?v=QRq2zMHlBz4) |
59 | 82 |
|
60 | | -_Please go through the material and come to class prepared!_ |
| 83 | +## 3. Event Loop |
| 84 | + |
| 85 | +If a webpage contains JavaScript, then the browser knows it has to execute these instructions at some point. But how does the browser know what to do first? This is where the `Event Loop` comes in. |
| 86 | + |
| 87 | +In layman's terms, the `Event Loop` is |
| 88 | + |
| 89 | +For further study, check out the following resources |
| 90 | + |
| 91 | +- [What the heck is an event loop?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) |
| 92 | +- [JavaScript Event Loop](https://www.youtube.com/watch?v=XzXIMZMN9k4) |
| 93 | + |
| 94 | +## Finished? |
| 95 | + |
| 96 | +Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md). |
0 commit comments