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
| 2. | Fetch API, Promises, JavaScript Versions, Thinking like a programmer III |[Reading W2](/Week2/README.md)|[Homework W2](/Week2/MAKEME.md)|[Lesson Plan W1](/Week1/LESSONPLAN.md)|
> In practice, the terms `API call`, `network request` and `network call` are all used to refer to the same thing: sending a request from the client to some kind of server in order to get data.
We expect you to **always** come prepared to the class on Sunday.
44
-
45
-
### Overall
46
-
47
-
A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
41
+
If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Node.js) to go to Node.js!
48
42
49
43
_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_
Copy file name to clipboardExpand all lines: Week1/MAKEME.md
+20-2Lines changed: 20 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9,22 +9,40 @@
9
9
10
10
## **1. Practice the concepts**
11
11
12
+
This week's concepts can be challenging, therefore let's get an easy introduction using some interactive exercises! Check the following resources out and start practicing:
13
+
12
14
-[Introduction to jQuery](https://www.codecademy.com/learn/learn-jquery)
13
15
14
16
## **2. JavaScript exercises**
15
17
18
+
**Exercise 1: Place the kitten**
19
+
20
+
Write an function that makes an API call to https://wwww.placekitten.com/api
21
+
22
+
XHR, jQuery and fetch
23
+
24
+
**Exercise 2: Who do we have here?**
25
+
26
+
Wouldn't it cool to make a new friend with just the click of a button?
27
+
28
+
Write a function that makes an aPI call to https://www.randomuser.me/api
29
+
30
+
**Exercise 3: asdsa**
31
+
**Exercise 4: asdsa**
32
+
**Exercise 5: asdsa**
33
+
16
34
## **3. Code along**
17
35
18
36
Now that you've learned about APIs and how to connect with them, let's apply it in the context of a complete application.
19
37
20
-
In
38
+
In the following two applications you'll be making API calls to two different services. In the first you'll make
-[Build a JavaScript & jQuery Movie Info App](https://www.youtube.com/watch?v=YsPqjYGauns)
24
42
25
43
## **4. PROJECT: Hack Your Repo I**
26
44
27
-
> In this assignment you will built upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week.
45
+
> In this assignment you will build upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week.
28
46
29
47
You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
Copy file name to clipboardExpand all lines: Week1/README.md
+45-6Lines changed: 45 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -8,18 +8,28 @@ These are the topics for week 1:
8
8
- Public/private APIs
9
9
- Connecting with APIs
10
10
2. Asynchronous JavaScript and XML (AJAX)
11
+
- JavaScript Object Notation (JSON)?
11
12
- XMLHttpRequest (XHR)
12
-
- What is JSON?
13
13
3. jQuery
14
14
- What's a module?
15
15
- What's a library?
16
16
- Using jQuery to make AJAX requests
17
17
18
18
## 1. Application Programming Interface (API)
19
19
20
-
An Application Programming Interface, or API for short, is
20
+
Whenever we talk development we'll inevitably end up talking about Application Programming Interfaces, or APIs for short. But what is all the fuss about?
21
21
22
-
You can think of APIs in the following manner: Imagine you want to rent out a room in your house through Airbnb.
22
+
The first thing we need to understand is that API means different things to different people. Some people use it to refer to a complete application (frontend + backend), others use it to only refer to the server, or there's even people who use it to refer to any
23
+
24
+
For our purposes it's useful to stick to one definition, while keeping in mind that others will use it differently. Here's the definition we'll use:
25
+
26
+
```markdown
27
+
An API is that part of the server that is open to requests from the client (whether it's a from a frontend or another server).
28
+
```
29
+
30
+
You can think of an API in the following manner: Imagine you want to rent out a room in your house through Airbnb. Everyone who has a key to this room can freely enter and make use of whatever is inside.
31
+
32
+
For more research, check out the following resources:
23
33
24
34
-[What are APIs - series](https://www.youtube.com/watch?v=cpRcK4GS068&list=PLcgRuP1JhcBP8Kh0MC53GH_pxqfOhTVLa)
25
35
@@ -39,7 +49,7 @@ Understand this fundamental truth: programming is a means to serving a business
39
49
40
50
### Connecting with APIs
41
51
42
-
A big part of what applications do is **moving data from one place to another**. Let's say you are on the HackYourFuture website and feel like donating some money. First of all, that's very nice of you! You head out to the website and click on the donate button. You type in the amount and click on "donate"! You'll notice you immediately get redirected to a different website, namely Mollie.com. How did Mollie know to do this?
52
+
A big part of what applications do is **moving data from one place to another**. Let's say you are on the HackYourFuture website and feel like donating some money. First of all, that's very nice of you! You head out to the website and click on the donate button. You type in the amount and click on "donate". You'll notice you immediately get redirected to a different website, namely Mollie.com. How did Mollie know how to do this?
43
53
44
54
It's because the HackYourFuture website sends an **API call** to Mollie. The request basically says "Hey Mollie, some user from the HackYourFuture site wants to make a digital payment, can you handle that?". As a response Mollie answers "Of course, send the user to this specific URL and I'll take it from there!".
45
55
@@ -52,11 +62,36 @@ For further study of how to make API calls, check out the following resources:
52
62
53
63
## 2. Asynchronous JavaScript and XML (AJAX)
54
64
55
-
AJAX is the idea that data can be loaded into a webpage without refreshing the entire website. The term is a
65
+
AJAX is the idea that data can be loaded into a webpage without refreshing the entire website. The term is an acronym for `asynchronous JavaScript and XML`. Let's pick that apart:
66
+
67
+
- Asynchronous JavaScript refers to the fact that an asynchronous function is used. As we've learned in the previous module, an asynchronous function allows the browser to do multiple things simultaneously.
68
+
- XML is a data format used to send information from a server to a client, and vice versa.
69
+
70
+
The name AJAX is actually a misnomer, because XML isn't really used any more. Instead, another data format has taken its place: `JSON`.
71
+
72
+
### JSON
73
+
74
+
In AJAX we make a client request to a web server, that in response sends us back information to be used in the frontend. Generally speaking, this data will be send in `JSON` format.
75
+
76
+
So, technically speaking, the term would actually be AJAJ
In order to make an AJAX request we have to make use of a special type of object, called `XMLHttpRequest`(shortened to XHR). It's an object predefined for us by the `window` object in the browser.
83
+
84
+
> The `window` object is the most top-level object available to us in the browser. It contains the `document`, which contains all the HTML/CSS and JavaScript we write. Besides this, the `window` also contains a lot of other things we use when writing frontend code: `setTimeout()`, alert() and it even contains a reference to the `console` (from which we get `console.log()`). Try it out in the console if you want to see for yourself!
85
+
86
+
By creating a new instance of this object we can start making AJAX requests!
87
+
88
+
```js
89
+
constxhr=newXMLHttpRequest();
90
+
```
91
+
92
+
Check the following resources to learn more about XHR.
@@ -92,3 +127,7 @@ At it's most fundamental level it means that others have written functions and o
92
127
One of the most well-known and often used libraries in JavaScript is called `jQuery`. It's a library that was designed to make DOM manipulation, as well as event handling, CSS animation and AJAX operations much easier to perform.
By now you should've had some practice using callbacks. To reiterate, we use callbacks **as a way to create asynchronicity** in our application: we want to
Last week you learned about making API calls. For repetition's sake
16
+
You are undoubtably different than when you were a baby. Back then you couldn't really do much: crying, laughing and taking dumps. That's pretty much it. But as the years past you increasingly could do more and more: walking, socializing or playing an instrument.
-[The Weird History of JavaScript](https://www.youtube.com/watch?v=Sh6lK57Cuk4)
14
21
15
-
## 3.
22
+
## 2. Promises
16
23
17
-
#Reading material for the second lecture:
24
+
### Callback Hell
18
25
19
-
```
20
-
In week two we will discuss the following topics:
21
-
• Async vs Sync
22
-
• Event Loop (order of execution)
23
-
• Promises
24
-
```
26
+
By now you should've had some practice using callbacks. To reiterate, we use callbacks **as a way to create asynchronicity** in our application: we want to enable our application to do multiple things simultaneously.
27
+
28
+
But what if you want to have multiple
29
+
30
+
-[Callback Hell](http://callbackhell.com/)
25
31
26
-
Here are resources that we like you to read as a preparation for the second lecture:
32
+
This is where Promises come in. The concept of a Promise, in execution, doesn't add anything new. It does exactly what callbacks aim to do, which is enabling asynchronous actions: for example, clicking a button to load in an image, while still being able to navigate the webpage.
27
33
28
-
### Async VS Sync
34
+
What
35
+
36
+
So, in effect, you could call Promises the updated version of callbacks. Callbacks version 2.0.
37
+
38
+
-[A Simple Guide to ES6 Promises](https://codeburst.io/a-simple-guide-to-es6-promises-d71bacd2e13a)
- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/
32
-
-[Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
45
+
-[Fetch() - Working with Data and APIs in JavaScript](https://www.youtube.com/watch?v=tc8DU14qX6I)
0 commit comments