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

Skip to content

Commit 96b54c5

Browse files
author
Noer Paanakker
committed
added content and exercises
1 parent d3304aa commit 96b54c5

File tree

4 files changed

+88
-46
lines changed

4 files changed

+88
-46
lines changed

Week1/MAKEME.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ In the following tutorial you'll learn how to make a small web application that
120120

121121
- [Build an Issue Tracker](https://www.youtube.com/watch?v=NYq9J-Eur9U)
122122

123-
## **4. PROJECT: Random quote Generator**
123+
## **4. PROJECT: Random Quote Generator**
124124

125125
> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
126126

Week2/README.md

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ This is also how JavaScript by default operates. Only one operation can happen a
3030

3131
### Asynchronous
3232

33-
Sometimes we want to do multiple things, without them being dependent on each other. Consider the following analogy:
33+
Sometimes we want to do multiple things, without each action to be dependent on each other. Consider the following analogy:
3434

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!
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!
3636
37-
In this example Wouter reads a book, but that doesn't affect his meal from being prepared. Other
37+
In this example Wouter reads a book, but that doesn't affect his meal from being prepared. [TO BE CONTINUED]
3838

3939
Take a look at the following diagram:
4040

@@ -54,7 +54,7 @@ second();
5454

5555
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.
5656

57-
On the other hand we have
57+
On the other hand we have [TO BE CONTINUED]
5858

5959
Executing each block of code (whether it's a line or a loop/function/etc.) after each other is called
6060

@@ -66,9 +66,19 @@ Asynchronous execution avoids this bottleneck. You are essentially saying, “I
6666

6767
Imagine the following situation:
6868

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
69+
> It's 15.00 and you're 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 you 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 break or have a snack as well. On the other line your friend hangs up the phone and continues along with their day: they go out grocery shopping, cleaning the house and cooking dinner. After finishing your studies you call your friend and makes plans to go out together.
7070
71-
By default JavaScript works **synchronously**, as we've learned in the previous section.
71+
In this example there is one process: life. In technical terms you could call it the program. Life contains many things, but in this example it only contains two things: you and your friend. Let's call them mini programs, or `functions`. The function called "You" does various things: studying,
72+
73+
This example illustrates the concept of **asynchronicity**: there are multiple processes happening simultaneously, without any single thing being dependent upon another thing. Your friend is not waiting by the phone until you have the answer. Or in technical terms: until the callback (which is you) has the return value (the asnwer to your friend's request to hang out).
74+
75+
As we've learned in the previous section, by default JavaScript works **synchronously**. In short this means that only one command gets executed (and finishes) until the next command gets executed.
76+
77+
Take this insight to heart: **Synchronicity is the process, callbacks are the implementation**. Let's clarify that:
78+
79+
- Saying that the proces is synchronous, is saying that there can only be an execution of commands in a single sequence. But this process can be changed to be asynchronous, which means that the process can handle
80+
81+
to initiate that process change from synchronous to asynchronous.
7282

7383
This is why callbacks are important: it allows us to introduce asynchronicity in the control flow of a program.
7484

Week3/MAKEME.md

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,48 @@
99

1010
## **1. Practice the concepts**
1111

12-
## **2. JavaScript exercises**
12+
Let's get familiar with basic Javascript concepts, with interactive exercises! Check out the following resources:
13+
14+
- [Introduction to JavaScript: Scope (Codecademy)](https://www.codecademy.com/courses/introduction-to-javascript/lessons/scope/exercises/scope)
1315

14-
### Scope/closure exercises
16+
## **2. JavaScript exercises**
1517

1618
**Exercise 1: Add six**
1719

18-
Write a function that would allow you to do this:
20+
Declare a function called `createBase`. It should return a closure, that adds a number to the base number argument.
21+
22+
Call the function three times. The return values should be:
23+
24+
1. 15
25+
2. 24
26+
3. 36
27+
28+
It should look a little like this:
1929

2030
```js
31+
function createBase() {
32+
// Put here your logic...
33+
}
34+
2135
const addSix = createBase(6);
22-
addSix(10); // returns 16
23-
addSix(21); // returns 27
36+
37+
// Put here your function calls...
38+
addSix();
39+
```
40+
41+
**Exercise 2: Take out the duplicates**
42+
43+
Write a function called `removeDuplicates`, that takes in an array as an argument:
44+
45+
```js
46+
const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b'];
2447
```
2548

26-
**Exercise 2: asds**
49+
The function should remove duplicate letters. So the result should be:
2750

28-
Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number).
51+
```js
52+
letters === ['a', 'b', 'c', 'd', 'e', 'f'];
53+
```
2954

3055
**Exercise 3: Guess the output**
3156

@@ -80,39 +105,16 @@ Now spreading the soya magarine
80105
Spreading jam
81106
```
82107

83-
**Exercise 5**
108+
**Exercise 5: The lottery machine**
84109

85-
We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example:
110+
Don't you just love the thrill of the lottery? What if I told you we can make our own lottery machine? Let's get started!
86111

87-
```js
88-
function doIt() {
89-
console.log('I am done');
90-
}
91-
setTimeout(doIt, 5000);
92-
```
93-
94-
> If you run the above code it will wait 5 seconds and then print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`).
95-
96-
**2.1** We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it.
97-
98-
```js
99-
function foo(func) {
100-
// What to do here?
101-
}
102-
103-
function bar() {
104-
console.log('Hello, I am bar!');
105-
}
106-
107-
foo(bar);
108-
```
109-
110-
**2.2** You must write a function that takes 4 arguments.
112+
Write a function that takes 4 arguments.
111113

112114
- A start value
113115
- An end value
114-
- A callback to call if the number is divisible by 3
115-
- A callback to use if the number is divisible by 5
116+
- A callback that executes if the number is divisible by 3
117+
- A callback that executes if the number is divisible by 5
116118

117119
The function should first generate an array containing values from start value to end value (inclusive).
118120

@@ -133,9 +135,19 @@ threeFive(10, 15, sayThree, sayFive);
133135

134136
// Should create an array [10,11,12,13,14,15]
135137
// and call sayFive, sayThree, sayThree, sayFive
136-
// please make sure you see why these calls are made before you start coding
137138
```
138139

140+
We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example:
141+
142+
```js
143+
function doIt() {
144+
console.log('I am done');
145+
}
146+
setTimeout(doIt, 5000);
147+
```
148+
149+
**2.2**
150+
139151
> Note: The following assignments include some problems from _freeCodeCamp_. Note that some _freeCodeCamp_ examples still mention `var`. However you can safely replace them with `let` and `const` as appropriate.
140152
141153
**2.5** Nested loops

Week3/README.md

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,19 @@ These are the topics for week 3:
1818

1919
On of the central concepts in programming is the idea of `context`: the meaning of any particular thing is only determined in relation to its direct surroundings. Let's take language for example. If I say the following sentence:
2020

21-
> asdas
21+
> I never said she stole my money.
2222
23-
Reading this it's not obvious how to interpret what's said. It depends on `context` for me to know how to look at it correctly.
23+
Reading this it's not obvious how to interpret what the situation is about. Depending on the emphasis of the words it could mean any of the following:
2424

25-
In JavaScript, scope refers to the current context of your code.
25+
- _I_ never said she stole my money.
26+
- I _never_ said she stole my money.
27+
- I never _said_ she stole my money.
28+
- I never said _she_ stole my money.
29+
- I never said she _stole_ my money.
30+
- I never said she stole _my_ money.
31+
- I never said she stole my _money_.
32+
33+
It depends on `context` for me to know what really happened. In programming, the term `scope` refers to the relevant variables that are involved in
2634

2735
### Global vs. local (function and block)
2836

@@ -31,6 +39,15 @@ In JavaScript, scope refers to the current context of your code.
3139

3240
### Const and let
3341

42+
Quick refresher: Variables are used to store information to be referenced and manipulated in a computer program. They also provide a way of labeling data with a descriptive name, so our programs can be understood more clearly by the reader and ourselves. It is helpful to think of variables as containers that hold information. Their sole purpose is to label and store data in memory. This data can then be used throughout your program.
43+
44+
In JavaScript we define them using the keyword `var`:
45+
46+
```js
47+
var
48+
49+
```
50+
3451
## 2. Hoisting
3552

3653
If you look up the term "hoisting" in any dictionary, you'll find something like this:
@@ -55,10 +72,13 @@ Hoisting happens during `compile-time`.
5572

5673
## 3. Closures
5774

75+
Simply put, a closure is a function that is defined inside another function.
76+
5877
For further study please check the following resources:
5978

6079
- [The Ultimate Guide to Execution Contexts, Hoisting, Scoping and Closures in JavaScript](https://www.youtube.com/watch?v=Nt-qa_LlUH0)
6180
- [Understanding Closures](https://www.youtube.com/watch?v=rBBwrBRoOOY)
81+
- [Let's Learn JavaScript Closures](https://www.freecodecamp.org/news/lets-learn-javascript-closures-66feb44f6a44/)
6282

6383
## 4. Thinking like a programmer II
6484

0 commit comments

Comments
 (0)