EasyCode-JavaScriptReact-v1 · viskosa · Aug 7, 2018 · Aug 9, 2018
diff --git a/js-core/classworks/classwork-20/index.html b/js-core/classworks/classwork-20/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Lesson_20</title>
+
+
+</head>
+<body>
+	<h1>Classwork 20</h1>
+	<button>Server request</button>
+	<button id="add">Add user</button>
+	<p style="width: 400px; display: block"></p>
+	<form action="#" method="post">
+		<input type="text" name="fullName" placeholder="fullname">
+		<input type="email" name="email" placeholder="email">
+
+		<label for="rememberme"></label>
+
+		<input type="checkbox" name="rememberme">
+
+		<button id="create"> CREATE SUCH USER</button>
+
+	</form>
+<script type="text/javascript" src="main.js"></script>
+</body>
+</html>
diff --git a/js-core/classworks/classwork-20/main.js b/js-core/classworks/classwork-20/main.js
@@ -0,0 +1,134 @@
+//-----ПРИМЕР ИСПОЛЬЗОВАНИЯ XHR С КОЛЛБЕКОМ----------------------
+
+/*let ajax = function(method, url, callback){
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function(){
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            //console.log(xhr);
+            callback(xhr.responseText);
+        }
+    }
+    xhr.open(method, url, callback);
+    xhr.send(null);
+}
+
+let request = function(){
+	ajax('GET', '/site/tryCurrency', response.bind(this));
+}
+
+response = function(arr){
+	try {
+		var arrAnswer = JSON.parse(arr); // парсим пришедший с сервера ответ
+		console.log(arrAnswer);
+	} catch (e) {
+		console.log(e);
+		return;
+	}
+
+	//дальше работаем с arrAnswer
+}*/
+
+//-----Сделать GET запрос на сервер и отобразить вернувшуюся информацию-------
+//  РЕЗУЛЬТАТ ЗАПРОСА ЗАПШИТЕ В тэг <p> в HTML
+
+const btn = document.querySelector('button');
+const btnAddUser = document.querySelector('#add');
+const urlForRequest = `http://easycode-js.herokuapp.com/pnv/users`;
+
+//------------------------------------------------
+const serverGETRequest = (url, callback) => {
+	const xhr = new XMLHttpRequest();	//	1 - сначала создаем экземпляр запроса
+	xhr.onreadystatechange = () => {	//  4 - по onreadystatechange выполняем нужные действия
+		if (xhr.readyState === 4 && xhr.status === 200) {
+		//if (xhr.readyState === XMLHttpRequest.DONE) {	// или можно так проверять
+			callback(xhr.responseText);		// и вызываем коллбек, в который передаем ответ от сервера
+		}
+	};
+	xhr.open('GET', url, true);		//  2 - открываем соединение
+	xhr.send(null);					//  3 - отправляем запрос
+}
+
+//------------------------------------------------
+const serverPOSTRequest = (url, data, callback) => {
+	const xhr = new XMLHttpRequest();
+	xhr.onreadystatechange = () => {
+		if (xhr.readyState === 4 && xhr.status === 200) {
+			//console.log(xhr.responseText); //в методе POST тут возвращается тот юзер, которого мы записали в базу 
+			if (callback) {
+				callback(xhr.responseText);
+			}
+		}
+	};
+
+	xhr.open('POST', url, true);
+	xhr.setRequestHeader('Content-type', 'application/json'); // устанавливаем заголовки -
+															  // хотим отдать серверу JSON
+	xhr.send(data);// превращаем в JSON и передаем на сервер
+}
+
+//-----------------------------------------------------
+const getUsersFromDB = (response) => {
+	try {
+		response;
+	} catch(e) {
+		console.log(e);
+		return;
+	}
+	let parent =  document.querySelector('p');
+	//let answer = JSON.parse(response);	//парсим ответ, если нужно, и потом с ним дальше работаем
+	parent.insertAdjacentHTML('beforeEnd', response);
+}
+
+//----------------------------------------------------
+
+const createUser = (name, email) => {
+	let user;
+	if (name && email) {
+		user = {
+				fullName: name,
+				email: email
+			}
+	} else {
+		user = {
+			fullName: 'Sveta Sidorenko',
+			email: 'svet@ukr.net'
+		}
+	}
+
+	console.log(user);
+	console.log(JSON.stringify(user));	
+	return JSON.stringify(user);
+
+}
+
+//-----------------------------------------------------
+btn.addEventListener('click', () => {					//  по клику на кнопку отправляем запрос
+	serverGETRequest(urlForRequest, getUsersFromDB);	//  и передаем url, на который слать запрос
+})
+
+btnAddUser.addEventListener('click', (name, email) => {
+	serverPOSTRequest(urlForRequest, createUser(name, email));
+})
+
+//---------------ФОРМЫ--------------------------------------
+const myForms = document.forms;	//получаем все формы с документа, псевдомассив
+//const [myForms] = document.forms  // или так - сразу делаем из псевдомассива массив
+const myForm = document.forms[0]; //обращаемся к первой форме в документе
+//myForm.elements // - обращение ко всем элементам формы
+
+myForm.addEventListener('submit', (event) => {	// вешаем собыие сразу на всю форму
+	event.preventDefault();	// чтобы не сразу отправлялись данные, а после необходимых нам проверок
+
+	const {email, fullName} = myForm.elements;  // email, fullName - атрибуты name у элементов формы
+								// здесь обратились только к инпутам с name="email" и name="fullName"
+	if (!email.value) { 	// если в поле email нет значения 
+		alert('заполните email');
+	}; 
+	if (!fullName.value) {	// если в поле fullName нет значения 
+		alert('заполните fullName');
+	};	
+
+	serverPOSTRequest(urlForRequest, createUser(fullName.value, email.value));
+
+});
+
diff --git a/js-core/homeworks/homework-19/img/javascript-react-course-viskosa - Ярлык.lnk b/js-core/homeworks/homework-19/img/javascript-react-course-viskosa - Ярлык.lnk
diff --git a/js-core/homeworks/homework-20/index.html b/js-core/homeworks/homework-20/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Homework 20</title>
+
+</head>
+<body>
+	<h1>Homework 20</h1>
+	<button>Server request</button>
+	<button id="add">Add user</button>
+	<p style="width: 400px; display: block"></p>
+
+<script type="text/javascript" src="main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-20/main.js b/js-core/homeworks/homework-20/main.js
@@ -0,0 +1,159 @@
+/* Алгоритмы
+TASK 0
+Проверьте 2 строки и определите изоморфные ли они.
+Две строки являются изоморфными если все их символы
+s, могут быть заменены t.
+Все символы одной строки могут быть заменены такими же символами другой строки, независимо от
+порядка символов.
+Given two strings, determine if they are isomorphic.
+Two strings are isomorphic if the characters in s can be replaced to get t.
+All occurrences of a character must be replaced with another character while preserving the order of characters.
+No two characters may map to the same character but a character may map to itself."
+arguments ["egg", "add"] => expected true
+arguments ["foo", "bar"] => expected false
+arguments ["paper", "title"] => expected true
+arguments ["ca", "ab"] => expected true
+arguments ["aa", "bb"] => expected true
+arguments ["aedor", "eiruw"] => expected true
+*/
+//-------------------------------------------------------------
+/*
+TASK 1
+Изучите API http://easycode-js.herokuapp.com/
+Зарегистрируйте 10 пользователей с разными именами и email
+И ТЕЛЕФОНАМИ! адресами (можно больше пользователей)
+fullName - должно содержать имя и фамилию 'John Smith'
+Используйте XMLHttpRequest => POST
+*/
+
+const btn = document.querySelector('button');
+const btnAddUser = document.querySelector('#add');
+const urlForRequest = `http://easycode-js.herokuapp.com/pnv2/users`;
+
+//------------------------------------------------
+const serverGETRequest = (url, callback) => {
+	const xhr = new XMLHttpRequest();	
+	xhr.onreadystatechange = () => {	
+		if (xhr.readyState === 4 && xhr.status === 200) {
+			callback(xhr.responseText);		
+		}
+	};
+
+	xhr.open('GET', url, true);		
+	xhr.send(null);					
+}
+
+//------------------------------------------------
+const serverPOSTRequest = (url, data) => {
+	const xhr = new XMLHttpRequest();
+	xhr.onreadystatechange = () => {
+		if (xhr.readyState === 4 && xhr.status === 200) {
+			console.log(xhr.responseText); //в методе POST тут возвращается тот юзер, которого мы записали в базу 
+		}
+	};
+
+	xhr.open('POST', url, true);
+	xhr.setRequestHeader('Content-type', 'application/json');
+	xhr.send(data);
+}
+
+//-----------------------------------------------------
+const getUsersFromDB = (response) => {
+	try {
+		response;
+	} catch(e) {
+		console.log(e);
+		return;
+	}
+	let parent =  document.querySelector('p');
+	parent.insertAdjacentHTML('beforeEnd', response);
+}
+
+//-----------------------------------------------------
+btn.addEventListener('click', () => {				
+	serverGETRequest(urlForRequest, getUsersFromDB);	
+})
+
+btnAddUser.addEventListener('click', () => {
+	let users = [
+		{
+			fullName: 'Sveta Sidorenko',
+			email: 'svet@ukr.net',
+			phone:12345678
+		},
+		{
+			fullName: 'Ira Kulich',
+			email: 'ira@ukr.net',
+			phone:23456789
+		},
+				{
+			fullName: 'Misha Mikhailenko',
+			email: 'mixa@ukr.net',
+			phone:34567890
+		},
+				{
+			fullName: 'Oleg Samoilov',
+			email: 'olega@ukr.net',
+			phone:09876543
+		},
+				{
+			fullName: 'Stas Soloviev',
+			email: 'stas@ukr.net',
+			phone:98765432
+		},
+				{
+			fullName: 'Semen Semenov',
+			email: 'semen@ukr.net',
+			phone:87654321
+		},
+				{
+			fullName: 'Nadia Nurri',
+			email: 'nadja@ukr.net',
+			phone:12345678
+		},
+				{
+			fullName: 'Ivan Bocharnikov',
+			email: 'bocha@ukr.net',
+			phone:12345678
+		},
+				{
+			fullName: 'Kirill Spokoinyj',
+			email: 'kir@ukr.net',
+			phone:12345678
+		},
+				{
+			fullName: 'Eugene Timoshenko',
+			email: 'jeka@ukr.net',
+			phone:12345678
+		}
+		]
+
+		users.forEach((item) => {	// наверное это неправильно слать по каждому юзеру запрос? Как добавить сразу всех?
+			serverPOSTRequest(urlForRequest, JSON.stringify(item));
+		})
+
+})
+
+//-------------------------------------------------------------
+/*
+TASK 2
+phone-app. Первая страница.
+Загружайте пользователей с сервера при загрузке странице.
+*/
+//-------------------------------------------------------------
+/*
+// contentEditable
+Сделайте, чтобы на странице add-user.html пользователь
+добавлялся на сервер.
+/*
+//-------------------------------------------------------------
+Добавить возможность из формы, ДОБАВЛЯТЬ Пользователя на сервер
+add-user
+*/
+//-------------------------------------------------------------
+// Для PhoneBook сделайте отдельный репозиторий + gh-pages
+//-------------------------------------------------------------
+// Рекомендую - вам необходимо сделать 1 метод(или отдельный класс)
+// который будет отправлять запросы
+// доступ к этому сервису должен быть в каждом вашем классе
+// url - должен быть константа, т.к url у вас изменяться не будет.