You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+54-24Lines changed: 54 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -11,30 +11,6 @@ A big part of being a programmer means moving data from one place to another. It
11
11
12
12
On top of that you'll also learn how to think differently about _how_ you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done in a smarter, different way. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming!
13
13
14
-
## Learning goals
15
-
16
-
In order to successfully complete this module you will need to master the following:
17
-
18
-
- Learn what an `Application Programming Interface` (API) is
19
-
- Catch up on the `history of JavaScript`
20
-
- Understand how to write more readable `asynchronous JavaScript`
21
-
- Connect with different `public APIs`
22
-
- Build a `Single Page Application` (SPA)
23
-
- Work with pre-existing code
24
-
- Learn about `Object-Oriented Programming`
25
-
26
-
## How to use this repository
27
-
28
-
This repository consists of 3 essential parts:
29
-
30
-
1.`README`: this document contains all the required theory you need to understand **before** class. It's also meant as a reference to understand what you're doing while you're coding.
31
-
2.`MAKEME`: this document contains the instructions for each week's homework.
32
-
3.`LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
33
-
34
-
**Before** the first class of the module you should start off with the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After your first class, you can get started with the [Week 1 Homework](/Week1/MAKEME.md).
35
-
36
-
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
37
-
38
14
## Before you start
39
15
40
16
### Setup Style Guide
@@ -80,6 +56,60 @@ Then execute `git checkout week1-YOURNAME` and you can get started!
80
56
81
57
If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack!
82
58
59
+
## Learning goals
60
+
61
+
In order to successfully complete this module you will need to master the following:
62
+
63
+
- Learn what an `Application Programming Interface` (API) is
64
+
- Catch up on the `history of JavaScript`
65
+
- Understand how to write more readable `asynchronous JavaScript`
66
+
- Connect with different `public APIs`
67
+
- Build a `Single Page Application` (SPA)
68
+
- Work with pre-existing code
69
+
- Learn about `Object-Oriented Programming`
70
+
71
+
## How to use this repository
72
+
73
+
### Repository content
74
+
75
+
This repository consists of 3 essential parts:
76
+
77
+
1.`README`: this document contains all the required theory you need to understand **while** working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the **first thing** you should start with every week
78
+
2.`MAKEME`: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
79
+
3.`LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
80
+
81
+
### How to study
82
+
83
+
Let's say you are just starting out with the JavaScript2 module. This is what you do...
84
+
85
+
1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript2`, that would be [Week1 Reading](/Week1/README.md)
86
+
2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the JavaScript1 module)
87
+
3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript2`, that would be [Week1 Homework](/Week1/MAKEME.md)
88
+
4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have
89
+
5.**DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel
90
+
6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others
91
+
7. You spend **Monday** and **Tuesday** finalizing your homework
92
+
8.**DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor
93
+
9. Start the new week by going back to point 1!
94
+
95
+
In summary:
96
+
97
+

98
+
99
+
To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack!
100
+
101
+
### Video lectures
102
+
103
+
For each module HackYourFuture provides you with video lectures. These are made by experienced software developers who know what they're talking about. The main teacher for this module will be [Stasel Seldin](https://hackyourfuture.slack.com/team/UQJGC1MSL): senior iOS developer!
104
+
105
+
You can find out more about him here:
106
+
107
+
-[GitHub](https://github.com/Stasel)
108
+
-[@Stasel on Slack](https://hackyourfuture.slack.com/team/UQJGC1MSL)
109
+
110
+
Learn from Stasel in the following playlist of videos he has made for you! (Click on the image to open the link)
Copy file name to clipboardExpand all lines: Week1/README.md
+11-5Lines changed: 11 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -17,6 +17,12 @@ These are the topics for week 1:
17
17
- An example of a library
18
18
- How to use a library
19
19
20
+
## 0. Video Lectures
21
+
22
+
Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 1 - 5](https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX)
Whenever we talk about software development, we'll inevitably end up talking about `Application Programming Interfaces`, or APIs for short. But what is all the fuss about?
Copy file name to clipboardExpand all lines: Week2/README.md
+15-9Lines changed: 15 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -14,6 +14,12 @@ These are the topics for week 2:
14
14
- 'this' keyword
15
15
4. Fetch API
16
16
17
+
## 0. Video Lectures
18
+
19
+
Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 6 - 8](https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX)
You are undoubtedly different than when you were a baby. Back then you couldn't do much except crying. That's pretty much it. But as the years pass you increasingly could do more and more: walking, socializing or playing an instrument.
@@ -58,7 +64,7 @@ But what if you want to have callbacks within callbacks... within callbacks? Thi
58
64
This is where `Promises` come in. The idea of the `Promise` is a product of the evolution within the JavaScript language. A bunch of JavaScript developers wanted to figure out how to solve the problem of callback hell and this is what they came up with. Here's a basic example:
@@ -82,18 +88,18 @@ When a Promises is executed it will first execute the asynchronous code inside.
82
88
What if you need to perform several asynchronous operations, that depend on the result of the one that came before it? For that we can use the `.then()` method: a special function, given to us by the Promise object, that allows us to directly use the return value of the asynchronous operation that happened before. Here's an example:
83
89
84
90
```js
85
-
newPromise(function(resolve, reject) {
91
+
newPromise(function(resolve, reject) {
86
92
setTimeout(() =>resolve(1), 1000); // We wait 1 second and then resolve with value 1
87
93
})
88
-
.then(function(result) {
94
+
.then(function(result) {
89
95
console.log(result); // Result: 1
90
96
return result *2;
91
97
})
92
-
.then(function(result) {
98
+
.then(function(result) {
93
99
alert(result); // Result: 2
94
100
return result *2;
95
101
})
96
-
.catch((error)=> {
102
+
.catch(error=> {
97
103
console.log(error);
98
104
});
99
105
```
@@ -165,7 +171,7 @@ However, this isn't the only value `this` can have. The moment we create a new o
165
171
constwouter= {
166
172
firstName:'Wouter',
167
173
lastName:'Kleijn',
168
-
getFullName:function() {
174
+
getFullName:function() {
169
175
returnthis.firstName+''+this.lastName;
170
176
},
171
177
};
@@ -195,14 +201,14 @@ One of those features added to browsers is an upgraded version of the XHR object
Copy file name to clipboardExpand all lines: Week3/README.md
+11-4Lines changed: 11 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -18,6 +18,12 @@ These are the topics for week 3:
18
18
- Catching errors with try/catch
19
19
4. Thinking like a programmer III
20
20
21
+
## 0. Video Lectures
22
+
23
+
Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 9 - 10](https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX)
So far we've learned about various programming concepts. These are the basics of what makes up any application: it's the **WHAT** of writing applications. However, now that you're familiar with them it's time to go to the next level: the **HOW** of writing applications.
@@ -41,8 +47,8 @@ Take this example:
41
47
```js
42
48
constnumbers= [14, 5, 25, 8];
43
49
44
-
constfilterDoubleDigits=(numbers)=> {
45
-
returnnumbers.filter((number)=> {
50
+
constfilterDoubleDigits=numbers=> {
51
+
returnnumbers.filter(number=> {
46
52
return number <10;
47
53
});
48
54
};
@@ -150,7 +156,7 @@ function createPerson(name, age) {
150
156
var obj = {
151
157
name: name,
152
158
age: age,
153
-
walk:function() {
159
+
walk:function() {
154
160
console.log(`${this.name} is walking!`);
155
161
},
156
162
};
@@ -289,7 +295,7 @@ But before we get into that, we should define "catching errors" a little bit. By
289
295
In the Promise object, we can use the function `catch` to take care of errors. It takes in a callback, which automatically receives an error object. Here's an example:
290
296
291
297
```js
292
-
Promise.catch(function(error) {
298
+
Promise.catch(function(error) {
293
299
console.log(error);
294
300
});
295
301
```
@@ -327,6 +333,7 @@ As a great programmer, you always want to be writing clean code. This means: cod
327
333
There are many ways to write clean code. Some of them you might have heard: Don't Repeat Yourself (DRY) or Keep It Simple, Stupid (KISS) are two things to keep in mind. There are many others and you are encouraged to do your own research!
328
334
329
335
Here are already a couple of them to get you started:
336
+
330
337
-[Top 5 Programming Principles that any software engineer should follow](https://www.youtube.com/watch?v=d-KbEQM0724)
-[The KISS Principle in Software Development — Everything You Need to Know](https://medium.com/@devisha.singh/the-kiss-principle-in-software-development-everything-you-need-to-know-dd8ea6e46bcd)
0 commit comments