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
|4.|• JSON<br>• Code debugging using the browser<br>• Functions + JSON/Arrays<br>• Code flow (order of execution) <br>• (capturing user input) <br>• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review|
16
-
|5.|• First Git Session with Unmesh :smiling_imp:<br>• Events<br>• Callbacks <br>• XHTTP Requests <br>• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review|
16
+
|5.|• First Git Session with Unmesh :smiling_imp:<br>• Events<br>• Callbacks <br>• XHTTP Requests <br>• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week5/REVIEW.MD)|
17
17
|6.|• Second Git Session :see_no_evil:<br> • Async VS Sync<br>• Polling<br>• Structure for a basic SPA<br> TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review|
Copy file name to clipboardExpand all lines: Week0/README.md
+1Lines changed: 1 addition & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -19,6 +19,7 @@ To test that it was installed and running properly, go to your terminal and run
19
19
Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs):
**XMLHttpRequest** is an object to interact with servers. You can retrieve data from a URL without having to do a full page refresh. XMLHttpRequest is used heavily in Ajax programming - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest).
18
+
19
+
So what is Ajax?
20
+
**Ajax** is a method of exchanging data with a server, and updating parts of a web page without reloading the entire page.
21
+
22
+
Let's dive into the code:
23
+
24
+
First, we need to make an instance from 'XMLHttpRequest' object.
25
+
```js
26
+
var http =newXMLHttpRequest();
27
+
```
28
+
When we are doing a request it goes through 5 states:
29
+
* 0 : request is not initialized.
30
+
* 1 : request has been set up.
31
+
* 2 : request has been sent.
32
+
* 3 : request is in process.
33
+
* 4 : request is complete.
34
+
35
+
In the code below we are checking if the request is complete or not, and we check the status == 200 just to make sure that we do not get a 404 error - Read more about it here: [HTTP Status Code](https://httpstatuses.com).
36
+
```js
37
+
http.onreadystatechange=function() {
38
+
if ( http.readyState==4&&http.status==200) {
39
+
console.log('Response from the server: '+http.response);
40
+
}
41
+
}
42
+
```
43
+
There are methods to deal with a server like (GET, POST, UPDATE, DELETE…)
44
+
45
+
* GET: retrieve data from server.
46
+
* POST: send data to server.
47
+
* UPDATE: update data on the server.
48
+
* DELETE: delete date from the server.
49
+
50
+
To initialize a request we use [open](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open) method. The syntax is:
The parameters _method_ and _url_ are mandatory, _user_ and _password_ are optional. True is a default value for _async_.
55
+
56
+
```js
57
+
http.open("GET", URL, true/false);
58
+
```
59
+
At the end we have to send our request to the server through [send](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send) method. In our situation we are retrieving a data from the server, so we do not have to pass a parameter to the send request.
@@ -53,57 +54,46 @@ Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486
53
54
</script>
54
55
```
55
56
56
-
Rewrite to Async:
57
+
5.Rewrite the code below to Async:
57
58
58
59
```js
59
60
1.
60
61
61
-
var sum =calculateSum(2, 6);
62
+
let sum =calculateSum(2, 6);
62
63
console.log(sum);
63
64
64
65
2.
65
66
66
-
var results =$.getJSON('http://myapi.com');
67
+
let results =$.getJSON('http://myapi.com');
67
68
showResults(results);
68
69
69
70
3.
70
71
71
-
var sum =calculateSum(2, 6);
72
+
let sum =calculateSum(2, 6);
72
73
if (sum >8) {
73
74
console.log('larger than 8');
74
75
}
75
76
76
77
4.
77
78
78
-
var data =$.getJSON('http://myapi.com');
79
+
let data =$.getJSON('http://myapi.com');
79
80
data =data.map(function (x) { return x *8; });
80
81
81
82
writeDataToFile(data);
82
83
```
83
84
84
85
85
-
4. You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it?
86
+
## Step 2: Feedback
86
87
87
-
TODO !!!
88
+
- Create at least 2 issues (bug / feature / code improvement) on another teams github repository. Do this in pairs.
89
+
- Solve the issue proposed by another students in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)
88
90
89
-
Choose two "GET" API endpoints from http://reqres.in
90
-
Use $.getJSON to load data from those two endpoints
91
-
Display the data on your web page.
92
-
It should not matter which endpoint is loaded first, the data should always look the same (you can add "?delay=" after the endpoint to simulate a delay).
91
+
## Step 3: Pair programming homework
93
92
94
-
• Create at least 1 issue (bug / feature / code improvement) on another students github repository. Do this in pairs.
95
-
• solve the issue proposed by another student in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)
93
+
You will complete the TicTacToe game we started building in class. The code we build in class is available here: https://github.com/HackYourFuture/TicTacToeTDD.
94
+
One of your teammates should fork the above repo. Work in this repository *together* so you can see who wrote which code. Make a Pull Request to hand in this part of the homework.
0 commit comments