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..5c606a3 --- /dev/null +++ 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 запрос на сервер и отобразить вернувшуюся информацию------- +// РЕЗУЛЬТАТ ЗАПРОСА ЗАПШИТЕ В тэг

в 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 - \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 0000000..62049e0 Binary files /dev/null and "b/js-core/homeworks/homework-19/img/javascript-react-course-viskosa - \320\257\321\200\320\273\321\213\320\272.lnk" differ diff --git a/js-core/homeworks/homework-20/index.html b/js-core/homeworks/homework-20/index.html new file mode 100644 index 0000000..7670e0d --- /dev/null +++ b/js-core/homeworks/homework-20/index.html @@ -0,0 +1,16 @@ + + + + + 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