From 2b4bb92c993d1b62914fbd7e65218564a06b6e37 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Tue, 7 Aug 2018 21:23:00 +0300 Subject: [PATCH 1/2] classwork 20 --- js-core/classworks/classwork-20/index.html | 27 +++ js-core/classworks/classwork-20/main.js | 186 +++++++++++++++++++++ 2 files changed, 213 insertions(+) create mode 100644 js-core/classworks/classwork-20/index.html create mode 100644 js-core/classworks/classwork-20/main.js diff --git a/js-core/classworks/classwork-20/index.html b/js-core/classworks/classwork-20/index.html new file mode 100644 index 0000000..40ed29e --- /dev/null +++ b/js-core/classworks/classwork-20/index.html @@ -0,0 +1,27 @@ + + + + + Lesson_20 + + + + +

Classwork 20

+ + +

+
+ + + + + + + + + +
+ + + \ No newline at end of file diff --git a/js-core/classworks/classwork-20/main.js b/js-core/classworks/classwork-20/main.js new file mode 100644 index 0000000..9e8d221 --- /dev/null +++ b/js-core/classworks/classwork-20/main.js @@ -0,0 +1,186 @@ +/*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 +}*/ + +//--------------------------------------- +const btn = document.querySelector('button'); +const btnAddUser = document.querySelector('#add'); + +const serverRequest = () => { + const url = `http://easycode-js.herokuapp.com/pnv`; + const xhr = new XMLHttpRequest(); + let parent = document.querySelector('p'); + //1 + const serverRequest = xhr.onreadystatechange = () => { //2 + if (xhr.readyState === 4 && xhr.status === 200) { + //if (xhr.readyState === XMLHttpRequest.DONE) тоже прокатит + //console.log(xhr); + console.log(xhr.responseText); + parent.insertAdjacentHTML('beforeEnd', xhr.responseText); + } + } + + xhr.open('GET', url, true); + xhr.send(null); //3 +} + +btn.addEventListener('click', () => { + serverRequest(); +}) + + +const serverAddUser = (email, name) => { + console.log(email, name); + const url = `http://easycode-js.herokuapp.com/pnv/users`; + const xhr2 = new XMLHttpRequest(); + xhr2.addEventListener('readystatechange', () => { + + if (xhr2.readyState === 4 && xhr2.status === 200) { + console.log(xhr2.responseText); + const user = { + fullName: name, + email: email + }; + } + + }) + + /*const user = { + fullName: name, + email: email + };*/ + + console.log(user); + xhr2.open('POST', url, true); + xhr2.setRequestHeader('Content-type', 'application/json');//хотим отдать серверу JSON + + xhr2.send(JSON.stringify(user));// превращаем в JSON и передаем на сервер + +} + +btnAddUser.addEventListener('click', serverAddUser) +//-------------------------------- + +//const [myForm] = documents.forms; +const myForm = document.forms[0];// или так +//const button = document.querySelector('#create'); + +/*button.addEventListener('click', () => { + event.preventDefault(); + if (!myForm.elements.fullName.value) { + //console.log('заполните фуллнейм') + alert('заполните фуллнейм'); + }; + if (!myForm.elements.email.value) { + //console.log('заполните email') + alert('заполните email'); + }; + +})*/ +//---так получше, вешаем сразу на всю форму---------------- +myForm.addEventListener('submit', (event) => { + event.preventDefault(); + + const {email, fullName} = myForm.elements; + + let validation = () => { + + let result = (!email.value ? false : true) || + (!fullName.value ? false : true); + + console.log(result); + +/* if (!email.value) { + alert('заполните фуллнейм'); + }; + if (!fullName.value) { + alert('заполните email'); + }; +*/ + } + if (validation()){ + console.log(1); + serverAddUser(email.value, fullName.value); + }; + +}); + + /*const xhr3 = new XMLHttpRequest(); + + xhr3.addEventListener('readystatechange', () => { + + if (xhr3.readyState === 4 && xhr3.status === 200) { + console.log(xhr3.responseText); + } + + }) + + const user = { + fullName: 'root root', + email: 'qwe@ukr.net' + }; + xhr3.open('POST', `http://easycode-js.herokuapp.com/pnv/users`, true); + xhr3.setRequestHeader('Content-type', 'application/json');//хотим отдать серверу JSON + + xhr3.send(JSON.stringify(user));// превращаем в JSON и передаем на сервер + +})*/ + +//----------------------------------------------- +/*const ajax = function(method, url, callback){ + var xhr4 = new XMLHttpRequest(); + xhr4.onreadystatechange = function(){ + if (xhr4.readyState === 4 && xhr4.status === 200) { + //console.log(xhr); + callback(xhr4.responseText); + } + } + xhr4.open(method, url, callback); + xhr4.setRequestHeader('Content-type', 'application/json');//хотим отдать серверу JSON + + xhr4.send(JSON.stringify(user));// превращаем в JSON и передаем на сервер +} + +const request = function(){ + ajax('GET', 'http://easycode-js.herokuapp.com/pnv/users', response); +} + +const response = function(arr){ + + try { + var arrAnswer = JSON.parse(arr); // парсим пришедший с сервера ответ + console.log(arrAnswer); + } catch (e) { + console.log(e); + return; + } + console.log(arr); + //дальше работаем с arrAnswer +}*/ + +//request(); +//теперь зарегистрировать в свой бд этого чувака----------- From 7c68c3014b8bba88220bd2393146af7be0d9a7b3 Mon Sep 17 00:00:00 2001 From: Nataliia Date: Thu, 9 Aug 2018 14:54:07 +0300 Subject: [PATCH 2/2] hw_20 post request --- js-core/classworks/classwork-20/main.js | 216 +++++++----------- ...0\257\321\200\320\273\321\213\320\272.lnk" | Bin 0 -> 1168 bytes js-core/homeworks/homework-20/index.html | 16 ++ js-core/homeworks/homework-20/main.js | 159 +++++++++++++ 4 files changed, 257 insertions(+), 134 deletions(-) create mode 100644 "js-core/homeworks/homework-19/img/javascript-react-course-viskosa - \320\257\321\200\320\273\321\213\320\272.lnk" create mode 100644 js-core/homeworks/homework-20/index.html create mode 100644 js-core/homeworks/homework-20/main.js diff --git a/js-core/classworks/classwork-20/main.js b/js-core/classworks/classwork-20/main.js index 9e8d221..5c606a3 100644 --- a/js-core/classworks/classwork-20/main.js +++ b/js-core/classworks/classwork-20/main.js @@ -1,3 +1,5 @@ +//-----ПРИМЕР ИСПОЛЬЗОВАНИЯ XHR С КОЛЛБЕКОМ---------------------- + /*let ajax = function(method, url, callback){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ @@ -26,161 +28,107 @@ response = function(arr){ //дальше работаем с arrAnswer }*/ -//--------------------------------------- +//-----Сделать GET запрос на сервер и отобразить вернувшуюся информацию------- +// РЕЗУЛЬТАТ ЗАПРОСА ЗАПШИТЕ В тэг

в 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 serverRequest = () => { - const url = `http://easycode-js.herokuapp.com/pnv`; +//------------------------------------------------ +const serverPOSTRequest = (url, data, callback) => { const xhr = new XMLHttpRequest(); - let parent = document.querySelector('p'); - //1 - const serverRequest = xhr.onreadystatechange = () => { //2 - if (xhr.readyState === 4 && xhr.status === 200) { - //if (xhr.readyState === XMLHttpRequest.DONE) тоже прокатит - //console.log(xhr); - console.log(xhr.responseText); - parent.insertAdjacentHTML('beforeEnd', xhr.responseText); - } - } + xhr.onreadystatechange = () => { + if (xhr.readyState === 4 && xhr.status === 200) { + //console.log(xhr.responseText); //в методе POST тут возвращается тот юзер, которого мы записали в базу + if (callback) { + callback(xhr.responseText); + } + } + }; - xhr.open('GET', url, true); - xhr.send(null); //3 + xhr.open('POST', url, true); + xhr.setRequestHeader('Content-type', 'application/json'); // устанавливаем заголовки - + // хотим отдать серверу JSON + xhr.send(data);// превращаем в JSON и передаем на сервер } -btn.addEventListener('click', () => { - serverRequest(); -}) +//----------------------------------------------------- +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 serverAddUser = (email, name) => { - console.log(email, name); - const url = `http://easycode-js.herokuapp.com/pnv/users`; - const xhr2 = new XMLHttpRequest(); - xhr2.addEventListener('readystatechange', () => { - - if (xhr2.readyState === 4 && xhr2.status === 200) { - console.log(xhr2.responseText); - const user = { +const createUser = (name, email) => { + let user; + if (name && email) { + user = { fullName: name, email: email - }; - } - - }) - - /*const user = { - fullName: name, - email: email - };*/ + } + } else { + user = { + fullName: 'Sveta Sidorenko', + email: 'svet@ukr.net' + } + } console.log(user); - xhr2.open('POST', url, true); - xhr2.setRequestHeader('Content-type', 'application/json');//хотим отдать серверу JSON - - xhr2.send(JSON.stringify(user));// превращаем в JSON и передаем на сервер + console.log(JSON.stringify(user)); + return JSON.stringify(user); } -btnAddUser.addEventListener('click', serverAddUser) -//-------------------------------- - -//const [myForm] = documents.forms; -const myForm = document.forms[0];// или так -//const button = document.querySelector('#create'); +//----------------------------------------------------- +btn.addEventListener('click', () => { // по клику на кнопку отправляем запрос + serverGETRequest(urlForRequest, getUsersFromDB); // и передаем url, на который слать запрос +}) -/*button.addEventListener('click', () => { - event.preventDefault(); - if (!myForm.elements.fullName.value) { - //console.log('заполните фуллнейм') - alert('заполните фуллнейм'); - }; - if (!myForm.elements.email.value) { - //console.log('заполните email') - alert('заполните email'); - }; - -})*/ -//---так получше, вешаем сразу на всю форму---------------- -myForm.addEventListener('submit', (event) => { - event.preventDefault(); +btnAddUser.addEventListener('click', (name, email) => { + serverPOSTRequest(urlForRequest, createUser(name, email)); +}) - const {email, fullName} = myForm.elements; +//---------------ФОРМЫ-------------------------------------- +const myForms = document.forms; //получаем все формы с документа, псевдомассив +//const [myForms] = document.forms // или так - сразу делаем из псевдомассива массив +const myForm = document.forms[0]; //обращаемся к первой форме в документе +//myForm.elements // - обращение ко всем элементам формы - let validation = () => { +myForm.addEventListener('submit', (event) => { // вешаем собыие сразу на всю форму + event.preventDefault(); // чтобы не сразу отправлялись данные, а после необходимых нам проверок - let result = (!email.value ? false : true) || - (!fullName.value ? false : true); + const {email, fullName} = myForm.elements; // email, fullName - атрибуты name у элементов формы + // здесь обратились только к инпутам с name="email" и name="fullName" + if (!email.value) { // если в поле email нет значения + alert('заполните email'); + }; + if (!fullName.value) { // если в поле fullName нет значения + alert('заполните fullName'); + }; - console.log(result); - -/* if (!email.value) { - alert('заполните фуллнейм'); - }; - if (!fullName.value) { - alert('заполните email'); - }; -*/ - } - if (validation()){ - console.log(1); - serverAddUser(email.value, fullName.value); - }; + serverPOSTRequest(urlForRequest, createUser(fullName.value, email.value)); }); - /*const xhr3 = new XMLHttpRequest(); - - xhr3.addEventListener('readystatechange', () => { - - if (xhr3.readyState === 4 && xhr3.status === 200) { - console.log(xhr3.responseText); - } - - }) - - const user = { - fullName: 'root root', - email: 'qwe@ukr.net' - }; - xhr3.open('POST', `http://easycode-js.herokuapp.com/pnv/users`, true); - xhr3.setRequestHeader('Content-type', 'application/json');//хотим отдать серверу JSON - - xhr3.send(JSON.stringify(user));// превращаем в JSON и передаем на сервер - -})*/ - -//----------------------------------------------- -/*const ajax = function(method, url, callback){ - var xhr4 = new XMLHttpRequest(); - xhr4.onreadystatechange = function(){ - if (xhr4.readyState === 4 && xhr4.status === 200) { - //console.log(xhr); - callback(xhr4.responseText); - } - } - xhr4.open(method, url, callback); - xhr4.setRequestHeader('Content-type', 'application/json');//хотим отдать серверу JSON - - xhr4.send(JSON.stringify(user));// превращаем в JSON и передаем на сервер -} - -const request = function(){ - ajax('GET', 'http://easycode-js.herokuapp.com/pnv/users', response); -} - -const response = function(arr){ - - try { - var arrAnswer = JSON.parse(arr); // парсим пришедший с сервера ответ - console.log(arrAnswer); - } catch (e) { - console.log(e); - return; - } - console.log(arr); - //дальше работаем с arrAnswer -}*/ - -//request(); -//теперь зарегистрировать в свой бд этого чувака----------- diff --git "a/js-core/homeworks/homework-19/img/javascript-react-course-viskosa - \320\257\321\200\320\273\321\213\320\272.lnk" "b/js-core/homeworks/homework-19/img/javascript-react-course-viskosa - \320\257\321\200\320\273\321\213\320\272.lnk" new file mode 100644 index 0000000000000000000000000000000000000000..62049e003ed34f4499f6abc8c1595e3d7c82dc25 GIT binary patch literal 1168 zcmbtTUr3Wt6hEJRgiEN2HY_TqBrWpOsXer%rB2jhHgm8PMmoN&{FK_-owEph6N(Ia z5qzmEG^2kY^yjJct&otB66r(q5@>%IR-h3WZ`n!c<8Hk}3YI!1=O)Jw=E)PwOD%)K*=y z{hXvyY9$v%sGR~7hSfwXtn*Goi;>h|S6Bo@l6A~E5oHgv8jka^vvjVMa0d*MN=t23RM73j1OE>$NH)!E%52Pq{ZF=$sb&!vufFKp@ z8g@rWffj&G)%Dex6~t4Qru@5)Sy(h_dWZqMGOo3M9**B7EMzWZQC%!Dh@nx|L8=(SoW{ zV%66@O`n=}T{%>JJu+Kun(LLEc^*;NJC`{yJdhthllS(2{vSA)foQM=Y$fhS_h;+V zSqELL8(E5F4T%%^6|nm`Q!cO>Slu!~X0nij>?r*Ar?H#2=;H+>6I&Mwp2X|68iyCs z+WM}2ymu7#4IIJ5W?-$i#l>v`@c1wu6zl&IKY9Hja~8g%T-hogl + + + + Homework 20 + + + +

Homework 20

+ + +

+ + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-20/main.js b/js-core/homeworks/homework-20/main.js new file mode 100644 index 0000000..dcc00f1 --- /dev/null +++ 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 у вас изменяться не будет. \ No newline at end of file