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

Skip to content

Commit 5b7edc9

Browse files
author
Noer Paanakker
committed
added some stuff about apis in week 1/2
1 parent 9bd7d0d commit 5b7edc9

File tree

10 files changed

+150
-106
lines changed

10 files changed

+150
-106
lines changed

‎README.md

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,51 @@
11
> Please help us improve and share your feedback! If you find better tutorials
2-
or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls).
2+
> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls).
33
4-
# HackYourFuture JavaScript 3
4+
# Module #4 - JavaScript 3: Advanced JavaScript and working with APIs (Frontend)
55

6-
Here you can find course content and homework for the JavaScript3 modules
6+
![JavaScript3](./assets/javascript3.png)
77

8-
|Week|Topic|Read|Homework|
9-
|----|-----|----|--------|
10-
|1.|• Structure for a basic SPA (Single Page Application) <br>• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) <br>• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
11-
|2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md)<br>• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
12-
|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md)<br>• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)<br>• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)<br>• call, apply, bind<br>• [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
8+
## Learning goals
139

14-
__Kind note:__
10+
In order to successfully complete this module you will need to master the following:
1511

16-
We expect you to __always__ come prepared to the class on Sunday.
12+
-
13+
14+
## How to use this repository
15+
16+
This repository consists of 3 essential parts:
17+
18+
1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing.
19+
2. `Homework`: this document contains the instructions for each week's homework.
20+
3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
21+
22+
After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week.
23+
24+
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
25+
26+
Topics:
27+
28+
1. API calls
29+
- XMLHttpRequest
30+
- Fetch
31+
- jQuery
32+
33+
> 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.
34+
35+
| Week | Topic | Reading Materials | Homework | Lesson Plan |
36+
| ---- | ----------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- |
37+
| 1. | Application Programming Interface (API), AJAX, jQuery | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) |
38+
| 2. | Fetch API, Promises, Async/await, Try...Catch | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) |
39+
| 3. | ES6 Classes, 'this' keyword, Arrow functions | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) |
40+
41+
**Kind note:**
42+
43+
We expect you to **always** come prepared to the class on Sunday.
1744

1845
### Overall
46+
1947
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.
2048

21-
*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 :)*
49+
_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 :)_
2250

2351
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.

‎Week1/LESSONPLAN.md

Whitespace-only changes.

‎Week1/MAKEME.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
# Homework Week 1
1+
# Homework JavaScript3 Week 1
22

3-
```
4-
Topics discussed this week:
5-
• Structure for a basic SPA
6-
• XMLHttpRequests
7-
• API calls
8-
```
3+
## **Todo list**
4+
5+
1. Practice the concepts
6+
2. JavaScript exercises
7+
3. Code along
8+
4. PROJECT: Hack Your Repo I
9+
10+
## **1. Practice the concepts**
911

10-
## Step 1: Single Page Application :sweat_drops:
12+
- [Introduction to jQuery](https://www.codecademy.com/learn/learn-jquery)
1113

12-
**_Deadline Thursday_**
14+
## **2. JavaScript exercises**
1315

14-
_This homework is more extensive and challenging than previous homework! Please read the instructions below carefully and follow them with great attention to detail. Start this homework as soon as you can and allow time for discussion and questions (slack!)._
16+
## **3. Code along**
1517

16-
### 1.1 Introduction
18+
## **4. PROJECT: Hack Your Repo I**
1719

1820
> 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.
1921

‎Week1/README.md

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,60 @@
1-
# Reading material for the first lecture:
1+
# Reading Material JavaScript3 Week 1
22

3-
```
4-
In week one we will discuss the following topics:
5-
• Structure for a basic SPA (Single Page Application)
6-
• XMLHttpRequests
7-
• API calls
8-
```
3+
## Agenda
94

10-
Here are resources that we like you to read as a preparation for the first lecture:
5+
These are the topics for week 1:
116

12-
### Fundamentals
7+
1. Application Programming Interface (API)
8+
- Public/private APIs
9+
- Connecting with APIs
10+
2. Asynchronous JavaScript and XML (AJAX)
11+
- XMLHttpRequest (XHR)
12+
- What is JSON?
13+
3. jQuery
14+
- What's a module/package?
15+
- What's a library?
16+
- Using jQuery to make AJAX requests
1317

14-
- [XMLHttpRequest](../../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
18+
## 1. Application Programming Interface (API)
19+
20+
- [What are APIs - series](https://www.youtube.com/watch?v=cpRcK4GS068&list=PLcgRuP1JhcBP8Kh0MC53GH_pxqfOhTVLa)
21+
22+
### Public/private APIs
23+
24+
There are 2 different types of APIs: **public** and **private** APIs.
25+
26+
An API is **public** when software companies publish parts of their software to be freely used by developers from the outside world. If you were to integrate the Facebook API as a login sytem in your application, you would be using their API as a public API.
27+
28+
Conversely, there are also **private** APIs: software companies that grant access to parts of their backend applications to internal developers only, in order to develop new services to be used either internally or for the outside world.
1529

16-
### APIs
30+
In reality, there are way more private than public APIs. This is because it's usually in the company's best interest to keep their code base hidden from the public eye: it would be like giving your secret recipe away for nothing.
1731

18-
- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work
32+
Understand this fundamental truth: programming is a means to serving a business end. In this course you're learning how to program, to make nice-looking functional applications. However, this is always done within a business context. This is to say: does this software lead to making more money?
1933

20-
### XMLHttpRequests
34+
- [The Business Impact of Private, Partner and Public APIs](https://www.youtube.com/watch?v=Bk50AYGvs-g)
2135

36+
### Connecting with APIs
37+
38+
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?
39+
40+
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!".
41+
42+
> Anytime a request to an API is made this is called an `API call`. However, in practice people use different terms for the same thing. Synonyms for `API call` are `API request`, `Network call/request` or`HTTP call/request`. Which do you prefer?
43+
44+
- [Working with APIs in JavaScript](https://www.youtube.com/watch?v=ecT42O6I_WI)
2245
- [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm)
2346

24-
### Clean Code
47+
## 2. Asynchronous JavaScript and XML (AJAX)
48+
49+
### XMLHttpRequests (XHR)
2550

26-
- [How to write clean code? Lessons learnt from “The Clean Code” — Robert C. Martin](https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c).
51+
- [XMLHttpRequest](../../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
52+
- [AJAX Crash Course](https://www.youtube.com/watch?v=82hnvUYY6QA)
2753

28-
> Note that this article includes some code examples writte in Java, but the same principles can equally be applied to JavaScript.
54+
## 3. jQuery
2955

30-
- [Clean Code concepts adapted for JavaScript](https://github.com/ryanmcdermott/clean-code-javascript)
56+
### What's a module/package?
3157

32-
### Handing in homework using GitHub pull requests
58+
### What's a library?
3359

34-
- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
60+
### Using jQuery to make AJAX requests

‎Week2/LESSONPLAN.md

Whitespace-only changes.

‎Week2/MAKEME.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
# Homework JavaScript3 Week 2
2+
3+
## **Todo list**
4+
5+
1. Practice the concepts
6+
2. JavaScript exercises
7+
3. Code along
8+
4. PROJECT: Hack Your Repo II
9+
10+
## **1. Practice the concepts**
11+
12+
## **2. JavaScript exercises**
13+
14+
## **3. Code along**
15+
16+
- [Build a Weather App with Vanilla JavaScript Tutorial](https://www.youtube.com/watch?v=wPElVpR1rwA)
17+
18+
## **4. PROJECT: Hack Your Repo II**
19+
120
# Homework Week 2
221

322
```

‎Week2/README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
## 1. Promises
2+
3+
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
4+
5+
- [Callback Hell](http://callbackhell.com/)
6+
7+
- [Async JS Crash Course](https://www.youtube.com/watch?v=PoRJizFvM7s)
8+
9+
## 2. Fetch API
10+
11+
Last week you learned about making API calls. For repetition's sake
12+
13+
- [fetch()](https://www.youtube.com/watch?v=tc8DU14qX6I)
14+
15+
## 3.
16+
117
# Reading material for the second lecture:
218

319
```
@@ -20,5 +36,4 @@ Here are resources that we like you to read as a preparation for the second lect
2036
- [Event Loop](../../../../fundamentals/blob/master/fundamentals/event_loop.md)
2137
- [Promises](../../../../fundamentals/blob/master/fundamentals/promises.md)
2238

23-
2439
_Please go through the material and come to class prepared!_

‎Week3/LESSONPLAN.md

Whitespace-only changes.

‎Week3/MAKEME.md

Lines changed: 18 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
# Homework JavaScript3 Week 3
2+
3+
## **Todo list**
4+
5+
1. Practice the concepts
6+
2. JavaScript exercises
7+
3. Code along
8+
4. PROJECT: Hack Your Repo III
9+
10+
## **1. Practice the concepts**
11+
12+
## **2. JavaScript exercises**
13+
14+
## **3. Code along**
15+
16+
## **4. PROJECT: Hack Your Repo III**
17+
118
# Homework Week 3
219

320
```
@@ -38,8 +55,7 @@ The homework for week 3 will build on the work you did in week 2. You will creat
3855
This week you will work with all JavaScript files in the `src` folder. The assignment consists of two parts:
3956

4057
1. Refactor all `.then()` and `.catch()` methods with `async`/`await` and `try...catch`.
41-
2. Make your app ARIA-compliant (see below).
42-
3. Refactor your application to use ES6 classes.
58+
2. Refactor your application to use ES6 classes.
4359

4460
#### 2.2.1 async/await
4561

@@ -71,65 +87,3 @@ _Read:_
7187

7288
- HYF fundamental: [ES6 Classes](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/oop_classes.md#es6-classes)
7389
- More on ES6 classes: [ES6 Classes in Depth](https://ponyfoo.com/articles/es6-classes-in-depth)
74-
75-
#### 2.2.3 ARIA-compliance (BONUS)
76-
77-
Please review the material from the HTML/CSS module: [Get familiar with Accessible Rich Internet Applications (ARIA)](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1#get-familiar-with-accessible-rich-internet-applications-aria).
78-
79-
For the GitHub application ARIA-compliance means that the Contributors list should either be a native HTML list (i.e. using `ul` and `li` elements) or otherwise marked with an appropriate ARIA **role**. Furthermore, a user should be able to navigate through all interactive elements using the keyboard (e.g., using the **Tab** key). Pressing **Enter** on such an element should be equivalent to clicking the mouse.
80-
81-
#### 2.2.4 Handing in your homework
82-
83-
If necessary, review the instructions how to [Hand in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) using GitHub pull request.
84-
85-
To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLinr errors. Open a terminal window in VSCode and type the following command:
86-
87-
```
88-
npm test
89-
```
90-
91-
If any errors or warnings are reported by this command you need to fix them before submitting a pull request.
92-
93-
In addition, check for the following:
94-
95-
- Have you removed all commented out code (should never be present in a PR)?
96-
- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
97-
- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))?
98-
99-
If the answer is 'yes' to the preceding questions you are ready to follow these instructions:
100-
101-
1. Push your `week3` branch to GitHub:
102-
103-
```
104-
git push -u origin week3
105-
```
106-
107-
2. Create a pull request for your `week3` branch.
108-
109-
## Step 3: Read before next lecture
110-
111-
_Deadline Sunday morning_
112-
113-
Go trough the reading material in the [README.md](https://github.com/HackYourFuture/Node.js) of the Node repository to prepare for your next class.
114-
115-
## Alternative _BONUS_ : Code Kata Race
116-
117-
If you haven't already join our clan: "Hack Your Future" in codewars
118-
119-
Solve the following problems:
120-
121-
- [Problem 1](https://www.codewars.com/kata/keep-up-the-hoop)
122-
- [Problem 2](https://www.codewars.com/kata/find-the-first-non-consecutive-number)
123-
- [Problem 3](https://www.codewars.com/kata/negation-of-a-value)
124-
- Some more [Homework](https://www.codewars.com/collections/hyf-homework-1)
125-
126-
_Hints_
127-
128-
- Hint for Q1: split your code into two parts, one part for the case that one of the two strings has an extra letter at the start or the end but is otherwise identical & one part for the case that the strings are the same length but one character is different in one of the strings
129-
- Also for Q1 this function on strings might be useful: [JavaScript String slice() method](https://www.w3schools.com/jsref/jsref_slice_string.asp)
130-
- Also potentially useful: [JavaScript String charAt() Method](https://www.w3schools.com/jsref/jsref_charat.asp)
131-
- [Hint for Q2](https://www.w3schools.com/jsref/jsref_sort.asp) Also there are no sample tests, you need to use submit
132-
133-
Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without us assigning them - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) -->
134-
135-
-[MORE BONUS](https://www.codewars.com/collections/hyf-homework-1-bonus-credit) :collision:

‎assets/javascript3.png

95.7 KB
Loading

0 commit comments

Comments
 (0)