index.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // ДЗ Объекты (ассоциативные массивы)
  12. // задание 1 Literals
  13. {
  14. const chair = {
  15. material: 'wood',
  16. color: 'brown',
  17. numLegs: 4,
  18. };
  19. }
  20. {
  21. const lamp = {
  22. type: 'desk lamp',
  23. color: 'white',
  24. power: 60,
  25. };
  26. }
  27. {
  28. const garden = {
  29. size: 1000, //в квадратных метрах
  30. plants: ['roses', 'tulips', 'daisies'],
  31. };
  32. }
  33. // задание 2 Literals expand
  34. {
  35. // Добавление свойств к объекту 'chair'
  36. const chair = {
  37. material: 'wood',
  38. color: 'brown',
  39. numLegs: 4,
  40. };
  41. const chairProp1 = prompt('Введите название первого свойства для стула');
  42. const chairProp1Value = prompt('Введите значение первого свойства для стула');
  43. chair[chairProp1] = chairProp1Value;
  44. const chairProp2 = prompt('Введите название второго свойства для стула');
  45. const chairProp2Value = prompt('Введите значение второго свойства для стула');
  46. chair[chairProp2] = chairProp2Value;
  47. console.log(chair); // выведет объект с добавленными свойствами
  48. {
  49. // Добавление свойств к объекту 'lamp'
  50. const lamp = {
  51. type: 'desk lamp',
  52. color: 'white',
  53. power: 60,
  54. };
  55. const lampProp1 = prompt('Введите название первого свойства для лампы');
  56. const lampProp1Value = prompt('Введите значение первого свойства для лампы');
  57. lamp[lampProp1] = lampProp1Value;
  58. const lampProp2 = prompt('Введите название второго свойства для лампы');
  59. const lampProp2Value = prompt('Введите значение второго свойства для лампы');
  60. lamp[lampProp2] = lampProp2Value;
  61. console.log(lamp); // выведет объект с добавленными свойствами
  62. }
  63. {
  64. // Добавление свойств к объекту 'garden'
  65. const garden = {
  66. size: 1000,
  67. plants: ['roses', 'tulips', 'daisies'],
  68. };
  69. const gardenProp1 = prompt('Введите название первого свойства для сада');
  70. const gardenProp1Value = prompt('Введите значение первого свойства для сада');
  71. garden[gardenProp1] = gardenProp1Value;
  72. const gardenProp2 = prompt('Введите название второго свойства для сада');
  73. const gardenProp2Value = prompt('Введите значение второго свойства для сада');
  74. garden[gardenProp2] = gardenProp2Value;
  75. console.log(garden); // выведет объект с добавленными свойствами
  76. }
  77. }
  78. // задание 3 Literals copy
  79. {
  80. // Получение от пользователя названия ключа и значения
  81. const newProp = prompt('Введите название нового свойства');
  82. const newPropValue = prompt('Введите значение нового свойства');
  83. // Создание нового объекта и добавление в него нового свойства
  84. const newObj = {
  85. [newProp]: newPropValue,
  86. };
  87. console.log(newObj); // выведет объект с новым свойством
  88. // Копирование объекта 'chair' в новый объект
  89. const chairCopy = Object.assign({}, chair);
  90. console.log(chairCopy); // выведет копию объекта 'chair'
  91. }
  92. // задание 4 Html tree
  93. {
  94. const html = {
  95. tagName: 'body',
  96. children: [
  97. {
  98. tagName: 'div',
  99. children: [
  100. {
  101. tagName: 'span',
  102. children: ['Enter a data please:'],
  103. },
  104. {
  105. tagName: 'br',
  106. },
  107. {
  108. tagName: 'input',
  109. attrs: {
  110. type: 'text',
  111. id: 'name',
  112. },
  113. },
  114. {
  115. tagName: 'input',
  116. attrs: {
  117. type: 'text',
  118. id: 'surname',
  119. },
  120. },
  121. ],
  122. },
  123. {
  124. tagName: 'div',
  125. children: [
  126. {
  127. tagName: 'button',
  128. attrs: {
  129. id: 'ok',
  130. },
  131. children: ['OK'],
  132. },
  133. {
  134. tagName: 'button',
  135. attrs: {
  136. id: 'cancel',
  137. },
  138. children: ['Cancel'],
  139. },
  140. ],
  141. },
  142. ],
  143. };
  144. }
  145. {
  146. console.log(html.children[1].children[1].children[0]); // выведет "Cancel"
  147. }
  148. {
  149. console.log(html.children[0].children[2].attrs.id); // выведет "surname"
  150. }
  151. // задание 5 Parent
  152. {
  153. const htmlTree = {
  154. tagName: 'body',
  155. children: [
  156. {
  157. tagName: 'div',
  158. parent: this,
  159. children: [
  160. {
  161. tagName: 'span',
  162. parent: this,
  163. children: ['Enter a data please:'],
  164. },
  165. {
  166. tagName: 'br',
  167. parent: this,
  168. },
  169. {
  170. tagName: 'input',
  171. attrs: {
  172. type: 'text',
  173. id: 'name',
  174. },
  175. parent: this,
  176. },
  177. {
  178. tagName: 'input',
  179. attrs: {
  180. type: 'text',
  181. id: 'surname',
  182. },
  183. parent: this,
  184. },
  185. ],
  186. },
  187. {
  188. tagName: 'div',
  189. parent: this,
  190. children: [
  191. {
  192. tagName: 'button',
  193. attrs: {
  194. id: 'ok',
  195. },
  196. parent: this,
  197. children: ['OK'],
  198. },
  199. {
  200. tagName: 'button',
  201. attrs: {
  202. id: 'cancel',
  203. },
  204. parent: this,
  205. children: ['Cancel'],
  206. },
  207. ],
  208. },
  209. ],
  210. };
  211. }
  212. // задание 6 Change OK
  213. {
  214. const json = [
  215. {
  216. tagName: 'body',
  217. children: [
  218. {
  219. tagName: 'div',
  220. children: [
  221. {
  222. tagName: 'span',
  223. children: ['Enter a data please:'],
  224. },
  225. {
  226. tagName: 'br',
  227. },
  228. {
  229. tagName: 'input',
  230. attrs: {
  231. type: 'text',
  232. id: 'name',
  233. },
  234. },
  235. {
  236. tagName: 'input',
  237. attrs: {
  238. type: 'text',
  239. id: 'surname',
  240. },
  241. },
  242. ],
  243. },
  244. {
  245. tagName: 'div',
  246. children: [
  247. {
  248. tagName: 'button',
  249. attrs: {
  250. id: 'ok',
  251. },
  252. children: ['OK'],
  253. },
  254. {
  255. tagName: 'button',
  256. attrs: {
  257. id: 'cancel',
  258. },
  259. children: ['Cancel'],
  260. },
  261. ],
  262. },
  263. ],
  264. },
  265. ];
  266. const attributeName = prompt('Введите название атрибута:');
  267. const attributeValue = prompt('Введите значение атрибута:');
  268. json[0].children[1].children[0].attrs[attributeName] = attributeValue;
  269. console.log(json[0].children[1].children[0].attrs); // выведет объект с новым атрибутом
  270. }
  271. {
  272. // получаем ссылку на объект тега button с id='ok'
  273. const buttonOk = html.children[1].children[0];
  274. // запрашиваем у пользователя имя и значение атрибута
  275. const attrName = prompt('Введите имя атрибута:');
  276. const attrValue = prompt('Введите значение атрибута:');
  277. // добавляем или изменяем атрибут в объекте тега
  278. buttonOk.attrs[attrName] = attrValue;
  279. }
  280. // задание 7 Destructure
  281. {
  282. const structure = [
  283. {
  284. tagName: 'body',
  285. children: [
  286. {
  287. tagName: 'div',
  288. children: [
  289. {
  290. tagName: 'span',
  291. children: ['Enter a data please:'],
  292. },
  293. {
  294. tagName: 'br',
  295. },
  296. {
  297. tagName: 'input',
  298. attrs: {
  299. type: 'text',
  300. id: 'name',
  301. },
  302. },
  303. {
  304. tagName: 'input',
  305. attrs: {
  306. type: 'text',
  307. id: 'surname',
  308. },
  309. },
  310. ],
  311. },
  312. {
  313. tagName: 'div',
  314. children: [
  315. {
  316. tagName: 'button',
  317. attrs: {
  318. id: 'ok',
  319. },
  320. children: ['OK'],
  321. },
  322. {
  323. tagName: 'button',
  324. attrs: {
  325. id: 'cancel',
  326. },
  327. children: ['Cancel'],
  328. },
  329. ],
  330. },
  331. ],
  332. },
  333. ];
  334. {
  335. const [
  336. {
  337. children: [
  338. {
  339. children: [
  340. {
  341. children: [spanText],
  342. },
  343. ],
  344. },
  345. {
  346. children: [
  347. ,
  348. {
  349. children: [buttonText],
  350. },
  351. ],
  352. },
  353. {
  354. children: [
  355. {
  356. attrs: { id: inputId },
  357. },
  358. ],
  359. },
  360. ],
  361. },
  362. ] = structure;
  363. console.log(spanText);
  364. console.log(buttonText);
  365. console.log(inputId);
  366. }
  367. }
  368. // задание 8 Destruct array
  369. {
  370. let arr = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
  371. let [even1, even2, odd1, odd2, odd3, ...letters] = arr;
  372. console.log(even1); // 2
  373. console.log(even2); // 4
  374. console.log(odd1); // 1
  375. console.log(odd2); // 3
  376. console.log(odd3); // 5
  377. console.log(letters); // ["a", "b", "c"]
  378. }
  379. // задание 9 Destruct string
  380. {
  381. let arr = [1, 'abc'];
  382. let [number, s1, s2, s3] = arr;
  383. console.log(number); // 1
  384. console.log(s1); // "a"
  385. console.log(s2); // "b"
  386. console.log(s3); // "c"
  387. }
  388. // задание 10 Destruct 2
  389. {
  390. let obj = {
  391. name: 'Ivan',
  392. surname: 'Petrov',
  393. children: [{ name: 'Maria' }, { name: 'Nikolay' }],
  394. };
  395. let {
  396. children: [{ name: name1 }, { name: name2 }],
  397. } = obj;
  398. console.log(name1); // "Maria"
  399. console.log(name2); // "Nikolay"
  400. }
  401. // задание 11 Destruct 3
  402. {
  403. let arr = [1, 2, 3, 4, 5, 6, 7, 10];
  404. let [a, b, ...rest] = arr;
  405. console.log(a); // 1
  406. console.log(b); // 2
  407. console.log(rest); // [3, 4, 5, 6, 7, 10]
  408. console.log(arr.length); // 8
  409. }
  410. // задание 12 Copy delete
  411. {
  412. const chair = {
  413. material: 'wood',
  414. color: 'brown',
  415. numLegs: 4,
  416. };
  417. const keyToDelete = prompt('Enter the key to delete');
  418. // Создаем копию объекта с помощью оператора расширения
  419. const chairCopy = { ...chair };
  420. // Удаляем ключ, который ввел пользователь
  421. delete chairCopy[keyToDelete];
  422. console.log(chairCopy);
  423. }
  424. // задание 13 Currency real rate
  425. {
  426. // Запрашиваем текущие курсы валют с сервера
  427. fetch('https://open.er-api.com/v6/latest/USD')
  428. .then((res) => res.json())
  429. .then((data) => {
  430. // Получаем объект с курсами валют
  431. const rates = data.rates;
  432. // Получаем исходную валюту от пользователя
  433. const sourceCurrency = prompt('Введите исходную валюту:');
  434. // Получаем валюту, в которую происходит конвертация, от пользователя
  435. const targetCurrency = prompt('Введите валюту, в которую происходит конвертация:');
  436. // Получаем сумму в исходной валюте от пользователя
  437. const amount = parseFloat(prompt('Введите сумму в исходной валюте:'));
  438. // Конвертируем валюту
  439. const result = (amount * rates[targetCurrency]) / rates[sourceCurrency];
  440. // Выводим результат конвертации
  441. console.log(`${amount} ${sourceCurrency} = ${result} ${targetCurrency}`);
  442. });
  443. }
  444. // задание 14 Currency drop down
  445. {
  446. let currencyList = '<select id="currencySelect">';
  447. // Запрашиваем текущие курсы валют с сервера
  448. fetch('https://open.er-api.com/v6/latest/USD')
  449. .then((res) => res.json())
  450. .then((data) => {
  451. // Получаем объект с курсами валют
  452. const rates = data.rates;
  453. // Перебираем курсы валют и формируем HTML-код выпадающего списка
  454. for (const currency in rates) {
  455. currencyList += `<option value="${currency}">${currency}</option>`;
  456. }
  457. currencyList += '</select>';
  458. // Вставляем HTML-код выпадающего списка в документ
  459. document.getElementById('currencyDropdown').innerHTML = currencyList;
  460. });
  461. }
  462. // задание 15 Currency table
  463. {
  464. // Запрашиваем текущие курсы валют с сервера
  465. fetch('https://open.er-api.com/v6/latest/USD')
  466. .then((res) => res.json())
  467. .then((data) => {
  468. // Получаем объект с курсами валют
  469. const rates = data.rates;
  470. // Формируем HTML-код таблицы
  471. let table = '<table><tr><th></th>';
  472. for (const currency in rates) {
  473. table += `<th>${currency}</th>`;
  474. }
  475. table += '</tr>';
  476. for (const currency1 in rates) {
  477. table += `<tr><th>${currency1}</th>`;
  478. for (const currency2 in rates) {
  479. // Рассчитываем кросскурс между валютами
  480. const crossRate = rates[currency1] / rates[currency2];
  481. table += `<td>${crossRate}</td>`;
  482. }
  483. table += '</tr>';
  484. }
  485. table += '</table>';
  486. // Вставляем HTML-код таблицы в документ
  487. document.getElementById('currencyTable').innerHTML = table;
  488. });
  489. }
  490. // задание 16 Form
  491. {
  492. const createFormFromObject = (obj) => {
  493. let form = document.createElement('form');
  494. for (const key in obj) {
  495. if (obj.hasOwnProperty(key)) {
  496. const value = obj[key];
  497. let inputType;
  498. switch (typeof value) {
  499. case 'string':
  500. inputType = 'text';
  501. break;
  502. case 'number':
  503. inputType = 'number';
  504. break;
  505. case 'boolean':
  506. inputType = 'checkbox';
  507. break;
  508. default:
  509. inputType = 'text';
  510. }
  511. let label = document.createElement('label');
  512. let input = document.createElement('input');
  513. input.type = inputType;
  514. input.value = value;
  515. label.appendChild(document.createTextNode(`${key}: `));
  516. label.appendChild(input);
  517. form.appendChild(label);
  518. }
  519. }
  520. return form;
  521. };
  522. const car = {
  523. Name: 'chevrolet chevelle malibu',
  524. Cylinders: 8,
  525. Displacement: 307,
  526. Horsepower: 130,
  527. Weight_in_lbs: 3504,
  528. Origin: 'USA',
  529. in_production: false,
  530. };
  531. document.body.appendChild(createFormFromObject(car));
  532. }
  533. // задание 17 Table
  534. {
  535. const persons = [
  536. {
  537. name: 'Мария',
  538. fatherName: 'Ивановна',
  539. surname: 'Иванова',
  540. sex: 'female',
  541. },
  542. {
  543. name: 'Николай',
  544. fatherName: 'Иванович',
  545. surname: 'Иванов',
  546. age: 15,
  547. },
  548. {
  549. name: 'Петр',
  550. fatherName: 'Иванович',
  551. surname: 'Иванов',
  552. married: true,
  553. },
  554. ];
  555. // Первый проход - поиск колонок
  556. const columns = [];
  557. persons.forEach((person) => {
  558. for (const key in person) {
  559. if (!columns.includes(key)) {
  560. columns.push(key);
  561. }
  562. }
  563. });
  564. // Начинаем создание таблицы
  565. let tableHTML = '<table><tr>';
  566. // Формируем строку с заголовками
  567. columns.forEach((column) => {
  568. tableHTML += `<th>${column}</th>`;
  569. });
  570. tableHTML += '</tr>';
  571. // Второй проход - отображение таблицы
  572. persons.forEach((person) => {
  573. tableHTML += '<tr>';
  574. columns.forEach((column) => {
  575. tableHTML += `<td>${person[column]}</td>`;
  576. });
  577. tableHTML += '</tr>';
  578. });
  579. tableHTML += '</table>';
  580. console.log(tableHTML);
  581. }
  582. </script>
  583. </body>
  584. </html>