Harjutuste lahendamine – Georgi Blinov Õpimapp

Harjutus 11 Vestlusruum serveri ja klientrakenduse vahel

WebHook — это общедоступная конечная точка HTTP POST, управляемая потребителем событий (прослушивателем событий). Поставщик услуг, поддерживающий WebHook, позволяет вам отправлять HTTP-запрос на адрес потребителя выбранного вами события, когда инициируется определенное событие (отправка события). Таким образом работают множество банковских систем и не только(дискорд бот например)

Создаем папку Vestlusruum в C:\Users\opilane\source\repos

Далее устанавливаем npm init

Создаем файл index.html

Теперь напишем git init в папку с проектом

Создадим мессенджер между двумя бразуерами на той же машине.

Для начала впишем в index.html следующий код:

<!doctype html>
<form name="publish">
  <input type="text" name="message" maxlength="50"/>
  <input type="submit" value="Send"/>
</form>
 
<div id="messages"></div>
 
<script>
  let url = location.host == 'localhost' ?
          'ws://localhost:8080/ws' : location.host == 'javascript.local' ?
                  `ws://javascript.local/article/websocket/chat/ws` : // dev integration with local site
                  `wss://javascript.info/article/websocket/chat/ws`; // prod integration with javascript.info
//создаем объект с вебсокетом
  let socket = new WebSocket(url);
 
  // отправляем сообщение на форму
  document.forms.publish.onsubmit = function() {
    let outgoingMessage = this.message.value;
 
    socket.send(outgoingMessage);
    return false;
  };
 
  // обрабатываем входящие сообщения
  socket.onmessage = function(event) {
    let incomingMessage = event.data;
    showMessage(incomingMessage);
  };
//если пользователь закрыт сокет, то пишем об этом в консоли
  socket.onclose = event => console.log(`Closed ${event.code}`);
 
  // показываем сообщения в div#messages
  function showMessage(message) {
    let messageElem = document.createElement('div');
    messageElem.textContent = message;
    document.getElementById('messages').prepend(messageElem);
  }
</script>

После создаду файл server.js и впишу в него следующее

const http = require('http');
const fs = require('fs');
const ws = new require('ws')
 
//создаем вебсокет сервер
const wss = new ws.Server({noServer: true});
 
//при подключении на адресс /ws, подключаем человека к сокет серверу
function accept(req, res){
    if(req.url === '/ws' && req.headers.upgrade &&
        req.headers.upgrade.toLowerCase() === 'websocket' &&
        req.headers.connection.match(/\bupgrade\b/i)){
        wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);
    } else if(req.url === '/'){
        fs.createReadStream('./index.html').pipe(res);
    } else{
        res.writeHead(404);
        res.end()
    }
}
 
//создаем сет из клиентов
const clients = new Set();
 
//при присоединении к сокету, устанавливем следующие эвенты подключившемуся пользователю
function onSocketConnect(ws){
    clients.add(ws)
//при получении сообщения
    ws.on('message', function(message){
        message = message.slice(0, 50);
        for(let client of clients) {clients.send(message);}
    });
//при закрытии сокета
    ws.on('close', function (){
        log('connection closed');
        clients.delete(ws);
    })
}
 
let log;
 
if(!module["parent"]){
    log = console.log();
//создаем сервер
    http.createServer(accept).listen(8080);
} else {
    log = function () {};
    exports.accept = accept;
}

Пробуем запуск работы:
Запускается сервер localhost и просто index.html из папки

Результат:

Ссылка на работу: Harjutus11

Harjutus 3 Sessionstorage

Что такое sessionStorage?

Свойство sessionStorage, доступное только для чтения, получает доступ к объекту session Storage для текущего происхождения. sessionStorage аналогично localStorage; разница в том, что в то время как данные в localStorage не истекают, данные в sessionStorage очищаются при завершении сеанса страницы.

Всякий раз, когда документ загружается на определенной вкладке браузера, создается уникальная сессия страницы, которая присваивается этой вкладке. Эта сессия страницы действительна только для данной вкладки. Сеанс страницы длится до тех пор, пока открыта вкладка или браузер, и сохраняется при перезагрузке и восстановлении страницы. Открытие страницы в новой вкладке или окне создает новую сессию со значением контекста просмотра верхнего уровня, что отличается от того, как работают сессионные файлы cookie. Открытие нескольких вкладок/окон с одним и тем же URL создает sessionStorage для каждой вкладки/окна. Дублирование вкладки копирует sessionStorage вкладки в новую вкладку. Закрытие вкладки/окна завершает сеанс и очищает объекты в sessionStorage.

Ход выполнения задания:

Откройте браузер и перейдите по адресу chrome://newtab. Откройте консоль, введите в консоли sessionStorage и нажмите ENTER. Вы увидите, что хранилище сессий пусто.

Создайте новую команду sessionStorage.setItem(‘color’,’ваш любимый цвет’). Эта команда добавила новые данные в Session Storage.

Напишите новую команду sessionStorage.getItem(‘color’), и вы увидите, что ваш любимый цвет выводится из sessionStorage.

Чтобы посмотреть, что было сохранено в Session Storage, перейдите в Application>Session Storage>Responsible domain.

Теперь откройте другую вкладку и перейдите на ту же страницу (chrome://newtab). Снова откройте Application>Session Storage и вы увидите, что он пуст.

Объяснение:

Хранилище сеансов хранит данные только для определенного сеанса. Та, в которой вы делали sessionStorage.setItem() и т.д., является одной сессией, а вторая вкладка, которую вы открыли в пункте 6, была другой сессией.

Harjutus 4 localStorage

Что такое localStorage

Свойство localStorage интерфейса окна, доступное только для чтения, позволяет вам получить доступ к объекту Storage для происхождения документа; хранимые данные сохраняются в течение всех сеансов браузера.

localStorage аналогично sessionStorage, за исключением того, что данные localStorage не имеют времени истечения, а данные sessionStorage очищаются, когда сессия страницы заканчивается – то есть, когда страница закрывается. (Данные localStorage для документа, загруженного в сеансе “приватного просмотра” или “инкогнито”, очищаются при закрытии последней вкладки “приватного просмотра”).

Задание

Вернитесь на вкладку, на которой в последний раз выполнялись команды sessionStorage. Снова откройте консоль и введите localStorage. Вы увидите, что он пуст.

Создайте новую команду localStorage.setItem(‘car’,’your favorite car’). Эта команда добавила новые данные в Local Storage.

Выполните команду localStorage.getItem(car), и вы увидите, что ваш любимый автомобиль выведен в localStorage.

Теперь снова откройте новую вкладку и найдите раздел Приложения>Локальное хранилище. Вы увидите, что он хранится там.

Объяснение:

В локальном хранилище данные хранятся во всех сеансах в определенном домене.

Harjutus 5: Cookie

Cookie

Файлы cookie – это небольшие фрагменты текста, передаваемые в браузер с сайта, который вы открываете. С их помощью сайт запоминает информацию о ваших посещениях. Это упрощает взаимодействие с сайтом и делает его полезнее для вас. В этих целях также используются другие технологии, включая уникальные идентификаторы (они нужны, чтобы различать браузеры, приложения или устройства), пиксели и локальное хранилище.

Set-Cookie

HTTP-заголовок ответа Set-Cookie используется для отправки cookie от сервера к агенту пользователя, чтобы агент пользователя мог позже отправить его обратно серверу. Чтобы отправить несколько cookie, в одном ответе следует отправить несколько заголовков Set-Cookie.

источники: https://developer.mozilla.org/en-US/

Задание:

переходим на сайт:

https://github.com/ducaale/xh/releases

Отправьте запрос на веб-сервер Twitter с помощью приложения командной строки xh и посмотрите, какие файлы cookie возвращает веб-сервер Twitter

Harjutus 8 XML faili kuvamine lehe

Harjutus 8

Распределенное приложение — это приложение, которое разделено на более мелкие приложения, которые взаимодействуют друг с другом по сети.

С точки зрения распространения различают следующие модели архитектуры приложений:

Монолитная архитектура (ничего не разделено),
Клиент-серверная архитектура (один сервер, несколько потребителей или клиентов),
Микросервисная архитектура (сервер состоит из нескольких микросерверов, к которым клиенты обращаются напрямую или через шлюз и которые также могут обмениваться данными друг с другом).

Цели разделения приложений:

Использовать ресурсы нескольких аппаратных устройств,
Минимизировать время простоя всего приложения,
Дать возможность вместо одной большой команды разработчиков, где никто ни за что не отвечает, создать четко определенные зоны ответственности, где каждая команда отвечает за свою часть.
Разные части приложения могут быть написаны на разных языках программирования.

Что такое XML

XML расшифровывается как расширяемый язык разметки и представляет собой язык разметки, похожий на HTML. XML предназначен для хранения и передачи данных. XML не имеет предопределенных тегов. Теги XML определяют структуру и значение данных — что это за данные.

Файлы XML закодированы в виде простого текста, поэтому их можно открыть в любом текстовом редакторе и прочитать четко. Практически любой браузер может открыть файл XML. В Chrome просто откройте новую вкладку и перетащите XML-файл. Другой вариант — щелкнуть правой кнопкой мыши файл XML и выбрать «Открыть с помощью», а затем нажать «Chrome». После этого файл откроется в новой вкладке.

Задание

1. Заходим на сайт CodeSandbox, выбираем Vanilla js.

2. Создаём файл “games.xml” и заполняем его данными:

<?xml version="1.0" encoding="utf-8" ?>
<gameslist>
  <game>
    <title lang="en">Hearthstone</title>
    <price>Free</price>
    <platforms>
      <platform>PC</platform>
      <platform>iOS</platform>
    </platforms>
  </game>
    <game>
    <title lang="en">STALKER</title>
    <price>29,99</price>
    <platforms>
      <platform>PC</platform>
    </platforms>
  </game>
    <game>
    <title lang="en">GTA_5</title>
    <price>24,99</price>
    <platforms>
      <platform>PC</platform>
      <platform>Xbox</platform>
      <platform>PlayStation</platform>
    </platforms>
  </game>
</gameslist>

3. Создаём файл index.js и вставляем следующий код (функция) для чтение из файла”games.xml”:

function loadXMLDoc() {
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      getGameDetails(this);
    }
  };
  xmlhttp.open("GET", "src/games.xml", true);
  xmlhttp.send();
}

4. Теперь здесь же, мы пишем код (функция) для отображения данных в виде таблицы, на страницу:

function getGameDetails(xml) {
  const xmlDoc = xml.responseXML;
  let tableRows = "<tr><th>Title</th><th>Price</th><th>Platforms</th></tr>";
  let gameElements = xmlDoc.getElementsByTagName("game");
  for (let i = 0; i < gameElements.length; i++) {
    tableRows +=
      "<tr><td>" +
      gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
      "</td><td>";
    let platforms = gameElements[i].getElementsByTagName("platform");
    for (let j = 0; j < platforms.length; j++) {
      tableRows += platforms[j].childNodes[0].nodeValue + "/";
    }
    tableRows += "</td></tr>";
  }
  document.getElementById("xmlTable").innerHTML = tableRows;
}

document.getElementById("app").innerHTML = `<table id="xmlTable"></table>`;

loadXMLDoc();

5. Так должен выглядеть полный код:

import "./styles.css";

function loadXMLDoc() {
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      getGameDetails(this);
    }
  };
  xmlhttp.open("GET", "src/games.xml", true);
  xmlhttp.send();
}

function getGameDetails(xml) {
  const xmlDoc = xml.responseXML;
  let tableRows = "<tr><th>Title</th><th>Price</th><th>Platforms</th></tr>";
  let gameElements = xmlDoc.getElementsByTagName("game");
  for (let i = 0; i < gameElements.length; i++) {
    tableRows +=
      "<tr><td>" +
      gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
      "</td><td>";
    let platforms = gameElements[i].getElementsByTagName("platform");
    for (let j = 0; j < platforms.length; j++) {
      tableRows += platforms[j].childNodes[0].nodeValue + "/";
    }
    tableRows += "</td></tr>";
  }
  document.getElementById("xmlTable").innerHTML = tableRows;
}

document.getElementById("app").innerHTML = `<table id="xmlTable"></table>`;

loadXMLDoc();

6. Заходим в файл style.css и пишем следующий код:

body {
  font-family: sans-serif;
  background-color: Teal;
}
table,
tr,
th,
td {
  border: solid black 2px;
}

Ссылка на работу: Harjutus8

Harjutus 6 Request Bacon

AJAX

AJAX (асинхронный JavaScript и XML) — это метод обмена данными с сервером и обновления частей веб-страницы без перезагрузки всей страницы. AJAX — это не язык программирования.

AJAX использует комбинацию:

Встроенный в браузер объект XMLHttpRequest (для запроса данных с веб-сервера)
JavaScript и HTML DOM (для отображения или использования данных)

Заходим в CodeSandbox и выбераем static

далее прописываем вот такую html страницу.

это показывает нам кнопку которая выводит информацию про бекон

сайт с текстом про бекон

 xhttp.open("GET", "https://baconipsum.com/api/?type=all-meat");

Результат:

при нажатии выводиться такая вот информация

Ссылка на код sandbox Harjutus 6 Request Bacon

Harjutus 7 Github andmete kasutamine API kaudu

Заходим в CodeSandbox и создаем Vanilla версию

Код работает так, что при вводе имени пользователя ты можешь перейти в его github

То есть ты вводишь имя пользователя, оно подставляется под ссылку и открывает тебе страницу человека, которого github ты хотел посмотреть

После ввода имени пользователя при нажатии Enter тебе ниже будет показана информация о профиле человека, то есть его ID, кол-во репозиториев, а так же ссылка на сам github

await fetch(`https://api.github.com/users/${profile}`)

let profile = "";
let Name = "";
let Id = "";
let Link = "";
let Repos = "";

function RenderPage() {
  document.getElementById("app").innerHTML = `
<div>
  <h1>Github profile viewer</h1>
  <p>Please enter profile name: </p>
  <input id="input" />
  <div class="content">
    <h1 id="name">Name: ${Name} </h1>
    <p id="id">Id: ${Id} | </p>
    <p id="repos">Public repos: ${Repos} </p>
    <a id="profileurl"href="${Link}" target=" blank">Link: ${Name}</a>
  </div>
</div>
    `;
}

let fetchProfile = async () => {
  let fetchedData;

  await fetch(`https://api.github.com/users/${profile}`)
    .then((response) => response.json())
    .then((data) => (fetchedData = data));
  console.log(fetchedData);

  Name = fetchedData.login;
  Id = fetchedData.id;
  Link = fetchedData.html_url;
  Repos = fetchedData.public_repos;

  RenderPage();
};

RenderPage();

const input = document.getElementById("input");
input.addEventListener("change", updateValue);
async function updateValue(e) {
  profile = e.target.value;
  await fetchProfile();
}

Ссылка на работу: Harjutus 7

Harjutus 13: Kuidas genereerida turvaline räsi?

const bcrypt = require('bcrypt');
const myPassword = "Georgi Blinov";

console.time('Time to generate salt')
const salt = bcrypt.genSaltSync(20)
console.log("This is ur salt: "+salt)
console.timeEnd(  "Time to generate salt")

console.time('Time to generate hash')
const hashedPassword = bcrypt.genSaltSync(20)
console.log(myPassword + " is your password and this is ur hashed" +
    "password: " + hashedPassword)
console.timeEnd("Time to generate hash")

Ссылка на github: Harjutus-13

Kõige huvitavam:

Kõige rohkem meeldis mulle seitsmes ülesanne, nii et see annab suvalises githubis siksu

E	T	K	N	R	L	P
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30