index.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. // Предварительная подготовка:
  2. // Создать файл с данными в формате JSON
  3. // Это должен быть массив объектов с двумя свойствами: title и ref
  4. // title - название картинки
  5. // ref - ссылка на картинку
  6. // Задание:
  7. // Загрузить данные из JSON-файла
  8. // Распарсить данные в массив
  9. // Вывести на страницу картинки и подписи к ним
  10. var req = new XMLHttpRequest();
  11. req.responseType = 'json';
  12. req.open('GET', 'one.json', true);
  13. req.onload = function() {
  14. var jsonResponse = req.response;
  15. jsonResponse.forEach(element => {
  16. let img = document.body.appendChild(document.createElement('img'));
  17. img.style.width = 600;
  18. img.src = element.ref;
  19. document.body.appendChild(document.createElement('p')).innerText = element.title;
  20. });
  21. };
  22. req.send(null);
  23. // Вариант с fetch
  24. fetch('two.json')
  25. .then(response => response.json())
  26. .then(jsonResponse => jsonResponse.forEach(element => {
  27. document.body.appendChild(document.createElement('img')).src = element.ref;
  28. document.body.appendChild(document.createElement('p')).innerText = element.title;
  29. }));
  30. // Исходные данные
  31. // var messages = [
  32. // "backspace",
  33. // "enter",
  34. // "shift",
  35. // "control",
  36. // "delete",
  37. // "space",
  38. // "subtract"
  39. // ]
  40. // messages.getKey = () => {
  41. // let key = new Date().toLocaleTimeString(), x = 0
  42. // while (log [`${key}[${x}]` ]) { x++ }
  43. // return `${key}[${x}]`
  44. // }
  45. // var log = {}
  46. // sendMessage
  47. // var sendMessage = message => new Promise (
  48. // resolve => setTimeout (
  49. // () => resolve ( message ),
  50. // Math.random () * 7000
  51. // )
  52. // )
  53. // Задача: напилить код, который вызывает функцию sendMessage для каждого элемента массива messages и логирует полученные сообщения в объекте log следующим образом:
  54. // log
  55. // {
  56. // 22:25:57: "backspace"
  57. // 22:25:58: "shift"
  58. // 22:25:59: "subtract"
  59. // 22:25:59[2]: "enter"
  60. // 22:25:59[3]: "delete"
  61. // 22:26:01: "control"
  62. // 22:26:01[2]: "space"
  63. // }
  64. var messages = [
  65. "backspace",
  66. "enter",
  67. "shift",
  68. "control",
  69. "delete",
  70. "space",
  71. "subtract"
  72. ]
  73. messages.getKey = () => {
  74. let key = new Date().toLocaleTimeString(), x = 0
  75. while (log [`${key}[${x}]` ]) { x++ }
  76. return `${key}[${x}]`
  77. }
  78. var log = {}
  79. var sendMessage = message => new Promise (
  80. resolve => setTimeout (
  81. () => resolve ( message ),
  82. Math.random () * 7000
  83. )
  84. );
  85. messages.forEach (
  86. ( message, index, arr ) => sendMessage ( message )
  87. .then (
  88. message => Object.assign ( log,
  89. { [ arr.getKey() ] : message }
  90. ),
  91. console.log(message)
  92. )
  93. );