Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1171b5b

Browse files
examples of chapter 3/4/5 uploaded
examples of chapter 3/4/5 uploaded
1 parent 52250fa commit 1171b5b

14 files changed

+522
-0
lines changed
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>3.1-xhr-req-res-live.html</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="3.1-xhr-req-res-live.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>3.1-xhr-req-res-live</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
</body>
25+
26+
</html>
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
console.log('3.1-xhr-req-res-live.js loaded');
2+
3+
// get buttons from html/DOM
4+
const getButton = document.getElementById('getButton');
5+
const postButton = document.getElementById('postButton');
6+
7+
// define function to get data
8+
fn_getData = () => {
9+
console.log('getButton clicked - in fn_getData');
10+
11+
var xhr = new XMLHttpRequest();
12+
// use fake rest api `https://reqres.in/`, below url get list of users
13+
xhr.open('GET', 'https://reqres.in/api/users');
14+
15+
// convert XMLHttpRequest results to 'json' bydefault
16+
xhr.responseType = 'json';
17+
18+
xhr.onload = () => {
19+
let results = xhr.response;
20+
console.log('results:', results);
21+
22+
//convert string data to json/javascript object - ommit by using xhe.responseType = 'json'
23+
// const jsonData = JSON.parse(results);
24+
// console.log('jsonData:', jsonData);
25+
}
26+
27+
xhr.send();
28+
}
29+
30+
// define function to post/send data
31+
fn_postData = () => {
32+
console.log('postButton clicked - in fn_postData');
33+
34+
const postData = {
35+
"email": "eve.holt@reqres.in",
36+
"password": "pistol"
37+
};
38+
39+
var xhr = new XMLHttpRequest();
40+
// use fake rest api `https://reqres.in/`, below url get list of users
41+
xhr.open('POST', 'https://reqres.in/api/register');
42+
43+
// convert XMLHttpRequest results to 'json' bydefault
44+
// xhr.responseType = 'json';
45+
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
46+
47+
xhr.onload = function () {
48+
var results = JSON.parse(xhr.responseText);
49+
console.log(results);
50+
51+
};
52+
53+
xhr.send((JSON.stringify(postData)));
54+
}
55+
56+
// add event listener to button
57+
getButton.addEventListener('click', fn_getData);
58+
postButton.addEventListener('click', fn_postData);
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>3.2-xhr-req-res-live-advanced.html</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="3.2-xhr-req-res-live-advanced.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>3.2-xhr-req-res-live-advanced</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
<section class="user-container">
25+
<h1 class="user-name"></h1>
26+
<span class="user-email"></span> <br/> <br/>
27+
<img class="user-image" src="" />
28+
</section>
29+
30+
</body>
31+
32+
</html>
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
console.log('3.2-xhr-req-res-live-advanced.js loaded');
2+
3+
// get buttons from html/DOM
4+
const getButton = document.getElementById('getButton');
5+
const postButton = document.getElementById('postButton');
6+
7+
// common function to send receive http call
8+
const fn_sendhttpRequest = (httpMethod, httpUrl, data) => {
9+
// promise
10+
const httpPromise = new Promise((resolve, reject) => {
11+
12+
const xhr = new XMLHttpRequest();
13+
14+
// use fake rest api `https://reqres.in/`, below url get list of users
15+
xhr.open(httpMethod, httpUrl);
16+
17+
// convert XMLHttpRequest results to 'json' bydefault
18+
xhr.responseType = 'json';
19+
20+
if (data) {
21+
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
22+
}
23+
24+
xhr.onload = () => {
25+
if (xhr.status >= 400) {
26+
reject(xhr.response);
27+
} else {
28+
resolve(xhr.response);
29+
}
30+
}
31+
32+
xhr.onerror = () => {
33+
reject('Please verify...something went wrong!');
34+
}
35+
36+
xhr.send(JSON.stringify(data));
37+
38+
});
39+
40+
return httpPromise;
41+
42+
}
43+
44+
// define function to get data
45+
const fn_getData = () => {
46+
console.log('getButton clicked - in fn_getData');
47+
48+
fn_sendhttpRequest('GET', 'https://reqres.in/api/users').then(respenseResultData => {
49+
console.log('respenseResultData:', respenseResultData);
50+
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data[0].first_name + ' ' + respenseResultData.data[0].last_name;
51+
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data[0].email;
52+
document.getElementsByClassName('user-image')[0].src = respenseResultData.data[0].avatar;
53+
});
54+
55+
}
56+
57+
// define function to post/send data
58+
const fn_postData = () => {
59+
console.log('postButton clicked - in fn_postData');
60+
61+
const postLoginData = {
62+
"email": "eve.holt@reqres.in",
63+
"password": "pistol"
64+
};
65+
66+
fn_sendhttpRequest('POST', 'https://reqres.in/api/register', postLoginData).then(respenseResultData => {
67+
console.log('respenseResultData:', respenseResultData);
68+
}).catch(err => {
69+
console.log('errors: ', err);
70+
});
71+
72+
}
73+
74+
// add event listener to button
75+
getButton.addEventListener('click', fn_getData);
76+
postButton.addEventListener('click', fn_postData);
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* 3.1. */
2+
.button-container {
3+
width: 80%;
4+
margin: 0 auto;
5+
text-align: center;
6+
border: 2px solid #e4e4e4;
7+
padding: 20px;
8+
}
9+
10+
.button {
11+
padding: 5px 15px;
12+
cursor: pointer;
13+
margin: 0px 5px;
14+
}
15+
16+
.button:hover {
17+
color:teal;
18+
}
19+
20+
/* 3.2. */
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>4.2-fetch-api-advanced</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="4.2-fetch-api-advanced.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>4.2-fetch-api-advanced</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
<section class="user-container">
25+
<h1 class="user-name"></h1>
26+
<span class="user-email"></span> <br/> <br/>
27+
<img class="user-image" src="" />
28+
</section>
29+
30+
</body>
31+
32+
</html>
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
console.log('4.2-fetch-api-advanced.js loaded');
2+
3+
// get buttons from html/DOM
4+
const getButton = document.getElementById('getButton');
5+
const postButton = document.getElementById('postButton');
6+
7+
// common function to send receive http call
8+
const fn_sendhttpRequest = (httpMethod, httpUrl, data) => {
9+
10+
return fetch(httpUrl, {
11+
method: httpMethod,
12+
body: JSON.stringify(data),
13+
headers: data ? {'Content-type': 'application/json'} : {}
14+
}).then(respenseResult => {
15+
console.log('respenseResult:', respenseResult);
16+
if (respenseResult.status >= 400) {
17+
return respenseResult.json().then(errResponseData => {
18+
const error = new Error('Please verify...something went wrong!');
19+
error.data = errResponseData;
20+
throw error;
21+
})
22+
}
23+
// to convert response body: ReadableStream to json
24+
return respenseResult.json();
25+
})
26+
27+
}
28+
29+
// define function to get data
30+
const fn_getData = () => {
31+
console.log('getButton clicked - in fn_getData');
32+
33+
fn_sendhttpRequest('GET', 'https://reqres.in/api/users')
34+
.then(respenseResultData => {
35+
console.log('respenseResultData:', respenseResultData);
36+
37+
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data[0].first_name + ' ' + respenseResultData.data[0].last_name;
38+
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data[0].email;
39+
document.getElementsByClassName('user-image')[0].src = respenseResultData.data[0].avatar;
40+
});
41+
42+
}
43+
44+
// define function to post/send data
45+
const fn_postData = () => {
46+
console.log('postButton clicked - in fn_postData');
47+
48+
const postLoginData = {
49+
email: "eve.holt@reqres.in",
50+
password: "pistol"
51+
};
52+
53+
fn_sendhttpRequest('POST', 'https://reqres.in/api/register', postLoginData)
54+
.then(respenseResultData => {
55+
console.log('respenseResultData:', respenseResultData);
56+
})
57+
.catch(err => {
58+
console.error('Request failed', err)
59+
})
60+
61+
}
62+
63+
// add event listener to button
64+
getButton.addEventListener('click', fn_getData);
65+
postButton.addEventListener('click', fn_postData);
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>4.2-fetch-api</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="4.2-fetch-api.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>4.2-fetch-api</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
<section class="user-container">
25+
<h1 class="user-name"></h1>
26+
<span class="user-email"></span> <br/> <br/>
27+
<img class="user-image" src="" />
28+
</section>
29+
30+
</body>
31+
32+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /