index.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639
  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. <style>
  11. tr.striped:nth-child(even) {
  12. background: #c1c1c1;
  13. }
  14. </style>
  15. <script>
  16. //3 PERSONS
  17. // let a = {
  18. // name:"name1",
  19. // surname:"surname1"
  20. // }
  21. // let b = {
  22. // name:"name2",
  23. // surname:"surname2"
  24. // }
  25. // let c = {
  26. // name:"name3",
  27. // surname:"surname3"
  28. // }
  29. //DIFFERENT FIELDS
  30. // let a = {
  31. // name:"name1",
  32. // surname:"surname1",
  33. // age:32,
  34. // sex:"male"
  35. // }
  36. // let b = {
  37. // name:"name2",
  38. // surname:"surname2",
  39. // age:13,
  40. // fathername:"fathername2"
  41. // }
  42. // let c = {
  43. // name:"name3",
  44. // surname:"surname3",
  45. // sex:"female",
  46. // age:32
  47. // }
  48. //FIELDS CHECK
  49. // let a = {
  50. // name: "name1",
  51. // surname: "surname1",
  52. // age: 32,
  53. // sex: "male",
  54. // };
  55. // let b = {
  56. // name: "name2",
  57. // surname: "surname2",
  58. // age: 13,
  59. // fathername: "fathername2",
  60. // };
  61. // let c = {
  62. // name: "name3",
  63. // surname: "surname3",
  64. // sex: "female",
  65. // age: 32,
  66. // };
  67. // let checkOtherFields = (dict) => {
  68. // for (key in dict) {
  69. // if (key != "name" && key != "surname") {
  70. // alert(key + " " + dict[key]);
  71. // }
  72. // }
  73. // };
  74. // checkOtherFields(a);
  75. // checkOtherFields(b);
  76. // checkOtherFields(c);
  77. //ARRAY OF PERSONS
  78. // let a = {
  79. // name: "name1",
  80. // surname: "surname1",
  81. // age: 32,
  82. // sex: "male",
  83. // };
  84. // let b = {
  85. // name: "name2",
  86. // surname: "surname2",
  87. // age: 13,
  88. // fathername: "fathername2",
  89. // };
  90. // let c = {
  91. // name: "name3",
  92. // surname: "surname3",
  93. // sex: "female",
  94. // age: 32,
  95. // };
  96. // let persons = [a, b, c];
  97. // persons[persons.length] = {
  98. // name: "name4",
  99. // surname: "surname4",
  100. // age: 44,
  101. // };
  102. //LOOP OF PERSONS
  103. // let a = {
  104. // name: "name1",
  105. // surname: "surname1",
  106. // age: 32,
  107. // sex: "male",
  108. // };
  109. // let b = {
  110. // name: "name2",
  111. // surname: "surname2",
  112. // age: 13,
  113. // fathername: "fathername2",
  114. // };
  115. // let c = {
  116. // name: "name3",
  117. // surname: "surname3",
  118. // sex: "female",
  119. // age: 32,
  120. // };
  121. // let persons = [a, b, c];
  122. // persons[persons.length] = {
  123. // name: "name4",
  124. // surname: "surname4",
  125. // age: 44,
  126. // };
  127. // for (let i = 0; i < persons.length; i++) {
  128. // console.log(persons[i]);
  129. // }
  130. //LOOP OF NAME AND SURNAME
  131. // let a = {
  132. // name: "name1",
  133. // surname: "surname1",
  134. // age: 32,
  135. // sex: "male",
  136. // };
  137. // let b = {
  138. // name: "name2",
  139. // surname: "surname2",
  140. // age: 13,
  141. // fathername: "fathername2",
  142. // };
  143. // let c = {
  144. // name: "name3",
  145. // surname: "surname3",
  146. // sex: "female",
  147. // age: 32,
  148. // };
  149. // let persons = [a, b, c];
  150. // persons[persons.length] = {
  151. // name: "name4",
  152. // surname: "surname4",
  153. // age: 44,
  154. // };
  155. // for (persone of persons) {
  156. // console.log(persone["name"] + " " + persone.surname);
  157. // }
  158. //LOOP OF LOOP OF VALUES
  159. // let a = {
  160. // name: "name1",
  161. // surname: "surname1",
  162. // age: 32,
  163. // sex: "male",
  164. // };
  165. // let b = {
  166. // name: "name2",
  167. // surname: "surname2",
  168. // age: 13,
  169. // fathername: "fathername2",
  170. // };
  171. // let c = {
  172. // name: "name3",
  173. // surname: "surname3",
  174. // sex: "female",
  175. // age: 32,
  176. // };
  177. // let persons = [a, b, c];
  178. // persons[persons.length] = {
  179. // name: "name4",
  180. // surname: "surname4",
  181. // age: 44,
  182. // };
  183. // for (persone of persons) {
  184. // for (key in persone) {
  185. // console.log(persone[key]);
  186. // }
  187. // console.log("\n");
  188. // }
  189. //FULLNAME
  190. // let a = {
  191. // name: "name1",
  192. // surname: "surname1",
  193. // age: 32,
  194. // sex: "male",
  195. // };
  196. // let b = {
  197. // name: "name2",
  198. // surname: "surname2",
  199. // age: 13,
  200. // fathername: "fathername2",
  201. // };
  202. // let c = {
  203. // name: "name3",
  204. // surname: "surname3",
  205. // sex: "female",
  206. // age: 32,
  207. // };
  208. // let persons = [a, b, c];
  209. // persons[persons.length] = {
  210. // name: "name4",
  211. // surname: "surname4",
  212. // age: 44,
  213. // };
  214. // for (persone of persons) {
  215. // persone.fullname = ` ${persone.surname} ${persone.name}`;
  216. // persone.fullname += persone.fathername ? ` ${persone.fathername}` : "";
  217. // console.log(persone.fullname);
  218. // }
  219. //SERIALIZE
  220. // let a = {
  221. // name: "name1",
  222. // surname: "surname1",
  223. // age: 32,
  224. // sex: "male",
  225. // };
  226. // let b = {
  227. // name: "name2",
  228. // surname: "surname2",
  229. // age: 13,
  230. // fathername: "fathername2",
  231. // };
  232. // let c = {
  233. // name: "name3",
  234. // surname: "surname3",
  235. // sex: "female",
  236. // age: 32,
  237. // };
  238. // let persons = [a, b, c];
  239. // persons[persons.length] = {
  240. // name: "name4",
  241. // surname: "surname4",
  242. // age: 44,
  243. // };
  244. // let jsonStr = JSON.stringify(persons);
  245. // console.log(jsonStr);
  246. //DESERIALIZE
  247. // let a = {
  248. // name: "name1",
  249. // surname: "surname1",
  250. // age: 32,
  251. // sex: "male",
  252. // };
  253. // let b = {
  254. // name: "name2",
  255. // surname: "surname2",
  256. // age: 13,
  257. // fathername: "fathername2",
  258. // };
  259. // let c = {
  260. // name: "name3",
  261. // surname: "surname3",
  262. // sex: "female",
  263. // age: 32,
  264. // };
  265. // let persons = [a, b, c];
  266. // persons[persons.length] = {
  267. // name: "name4",
  268. // surname: "surname4",
  269. // age: 44,
  270. // };
  271. // persons[persons.length] = JSON.parse(
  272. // '{"name":"name5","surname":"surname5","fathername":"fathername5","age":52,"sex":"male"}'
  273. // );
  274. //HTML
  275. // let a = {
  276. // name: "name1",
  277. // surname: "surname1",
  278. // age: 32,
  279. // sex: "male",
  280. // };
  281. // let b = {
  282. // name: "name2",
  283. // surname: "surname2",
  284. // age: 13,
  285. // fathername: "fathername2",
  286. // };
  287. // let c = {
  288. // name: "name3",
  289. // surname: "surname3",
  290. // sex: "female",
  291. // age: 32,
  292. // };
  293. // let persons = [a, b, c];
  294. // persons[persons.length] = {
  295. // name: "name4",
  296. // surname: "surname4",
  297. // age: 44,
  298. // };
  299. // persons[persons.length] = JSON.parse(
  300. // '{"name":"name5","surname":"surname5","fathername":"fathername5","age":52,"sex":"male"}'
  301. // );
  302. // let str = "<table><tr><td>name</td><td>surname</td></tr>";
  303. // for (persone of persons) {
  304. // str += `<tr><td>${persone.name}</td><td>${persone.surname}</td></tr>`;
  305. // }
  306. // str += "</table>";
  307. // document.write(str);
  308. //HTML OPTIONAL FIELDS
  309. // let a = {
  310. // name: "name1",
  311. // surname: "surname1",
  312. // age: 32,
  313. // sex: "male",
  314. // };
  315. // let b = {
  316. // name: "name2",
  317. // surname: "surname2",
  318. // age: 13,
  319. // fathername: "fathername2",
  320. // };
  321. // let c = {
  322. // name: "name3",
  323. // surname: "surname3",
  324. // sex: "female",
  325. // age: 32,
  326. // };
  327. // let persons = [a, b, c];
  328. // persons[persons.length] = {
  329. // name: "name4",
  330. // surname: "surname4",
  331. // age: 44,
  332. // };
  333. // persons[persons.length] = JSON.parse(
  334. // '{"name":"name5","surname":"surname5","fathername":"fathername5","age":52,"sex":"male"}'
  335. // );
  336. // let str = "<table border=1><tr><td>number</td>";
  337. // let keys = [];
  338. // for (persone of persons) {
  339. // for (key in persone) {
  340. // keys.push(key);
  341. // }
  342. // }
  343. // keys = [...new Set(keys)];
  344. // for (key of keys) {
  345. // str += `<td>${key}</td>`;
  346. // }
  347. // str += "</tr>";
  348. // for (idx in persons) {
  349. // str += `<tr><td>${idx}</td>`;
  350. // for (key of keys) {
  351. // str += `<td>${persons[idx][key] ?? ""}</td>`;
  352. // }
  353. // str += "</tr>";
  354. // }
  355. // str += "</table>";
  356. // document.write(str);
  357. //HTML TR COLOR
  358. // let a = {
  359. // name: "name1",
  360. // surname: "surname1",
  361. // age: 32,
  362. // sex: "male",
  363. // };
  364. // let b = {
  365. // name: "name2",
  366. // surname: "surname2",
  367. // age: 13,
  368. // fathername: "fathername2",
  369. // };
  370. // let c = {
  371. // name: "name3",
  372. // surname: "surname3",
  373. // sex: "female",
  374. // age: 32,
  375. // };
  376. // let persons = [a, b, c];
  377. // persons[persons.length] = {
  378. // name: "name4",
  379. // surname: "surname4",
  380. // age: 44,
  381. // };
  382. // persons[persons.length] = JSON.parse(
  383. // '{"name":"name5","surname":"surname5","fathername":"fathername5","age":52,"sex":"male"}'
  384. // );
  385. // let str = "<table border=1><tr><td>number</td>";
  386. // let keys = [];
  387. // for (persone of persons) {
  388. // for (key in persone) {
  389. // keys.push(key);
  390. // }
  391. // }
  392. // keys = [...new Set(keys)];
  393. // for (key of keys) {
  394. // str += `<td>${key}</td>`;
  395. // }
  396. // str += "</tr>";
  397. // for (idx in persons) {
  398. // str += `<tr class = "striped"><td>${idx}</td>`;
  399. // for (key of keys) {
  400. // str += `<td>${persons[idx][key] ?? ""}</td>`;
  401. // }
  402. // str += "</tr>";
  403. // }
  404. // str += "</table>";
  405. // document.write(str);
  406. // HTML TH OPTIONAL
  407. // let a = {
  408. // name: "name1",
  409. // surname: "surname1",
  410. // age: 32,
  411. // sex: "male",
  412. // };
  413. // let b = {
  414. // name: "name2",
  415. // surname: "surname2",
  416. // age: 13,
  417. // fathername: "fathername2",
  418. // };
  419. // let c = {
  420. // name: "name3",
  421. // surname: "surname3",
  422. // sex: "female",
  423. // age: 32,
  424. // };
  425. // let persons = [a, b, c];
  426. // persons[persons.length] = {
  427. // name: "name4",
  428. // surname: "surname4",
  429. // age: 44,
  430. // };
  431. // persons[persons.length] = JSON.parse(
  432. // '{"name":"name5","surname":"surname5","fathername":"fathername5","age":52,"sex":"male"}'
  433. // );
  434. // let str = "<table border=1><tr><th>number</th>";
  435. // let keys = [];
  436. // for (persone of persons) {
  437. // for (key in persone) {
  438. // keys.push(key);
  439. // }
  440. // }
  441. // keys = [...new Set(keys)];
  442. // keys.sort();
  443. // for (key of keys) {
  444. // str += `<th>${key}</th>`;
  445. // }
  446. // str += "</tr>";
  447. // for (idx in persons) {
  448. // str += `<tr class = "striped"><th>${idx + 1}</th>`;
  449. // for (key of keys) {
  450. // str += `<td>${persons[idx][key] ?? ""}</td>`;
  451. // }
  452. // str += "</tr>";
  453. // }
  454. // str += "</table>";
  455. // document.write(str);
  456. //ЗАДАНИЕ НА СИНИЙ ПОЯС.
  457. // let dictHTML = {
  458. // tagName: "body",
  459. // attrs: {},
  460. // subTags: [
  461. // {
  462. // tagName: "div",
  463. // attrs: {},
  464. // subTags: [
  465. // {
  466. // tagName: "span",
  467. // text: "Enter a data please:",
  468. // attrs: {},
  469. // subTags: [],
  470. // },
  471. // {
  472. // tagName: "br",
  473. // attrs: {},
  474. // subTags: [],
  475. // },
  476. // {
  477. // tagName: "input",
  478. // attrs: {
  479. // type: "text",
  480. // id: "name",
  481. // },
  482. // subTags: [],
  483. // },
  484. // {
  485. // tagName: "input",
  486. // attrs: {
  487. // type: "text",
  488. // id: "surname",
  489. // },
  490. // subTags: [],
  491. // },
  492. // ],
  493. // },
  494. // {
  495. // tagName: "div",
  496. // attrs: {},
  497. // subTags: [
  498. // {
  499. // tagName: "button",
  500. // attrs: {
  501. // id: "ok",
  502. // },
  503. // text: "OK",
  504. // subTags: [],
  505. // },
  506. // {
  507. // tagName: "button",
  508. // attrs: {
  509. // id: "cancel",
  510. // },
  511. // text: "Cancel",
  512. // subTags: [],
  513. // },
  514. // ],
  515. // },
  516. // ],
  517. // };
  518. // function contsractHTML(htmlTree) {
  519. // let str = `<${htmlTree["tagName"]}`;
  520. // for (attrName in htmlTree["attrs"]) {
  521. // str += ` ${attrName}="${htmlTree["attrs"][attrName]}" `;
  522. // }
  523. // str += ">";
  524. // str += htmlTree["text"] ?? "";
  525. // if (htmlTree.subTags) {
  526. // for (tag of htmlTree.subTags) str += contsractHTML(tag);
  527. // }
  528. // str += `</${htmlTree["tagName"]}>`;
  529. // return str;
  530. // }
  531. // let html = contsractHTML(dictHTML);
  532. // document.write(html);
  533. //DESTRUCT ARRAY
  534. // let arr = [1, 2, 3, 4, 5, "a", "b", "c"];
  535. // let [odd1, even1, odd2, even2, odd3, ...rest] = arr;
  536. //DESTRUCT STRING
  537. // let arr = [1, "abc"];
  538. // let [number, [s1, s2, s3]] = arr;
  539. //DESTRUCT 2
  540. // let obj = { name: "Ivan", surname: "Petrov", children: [{ name: "Maria" }, { name: "Nikolay" }] };
  541. // let [{ name: name1 }, { name: name2 }] = obj["children"];
  542. //DESTRUCT 3
  543. // let arr = [1, 2, 3, 4, 5, 6, 7, 10];
  544. // let { 0: a, 1: b, length: length, ...rest } = arr;
  545. //ЗАДАНИЕ НА ЧЕРНЫЙ ПОЯС
  546. // let history = "1111";
  547. // let predictArray = {};
  548. // let input;
  549. // while (true) {
  550. // console.clear();
  551. // for (el of history) console.log(el);
  552. // if (!(history in predictArray)) {
  553. // console.log("now - " + Math.floor(Math.random() * 2));
  554. // } else {
  555. // console.log("now - " + predictArray[history]);
  556. // }
  557. // input = prompt("Enter the number (1 or 0)");
  558. // if (input === null) break;
  559. // input = +input;
  560. // predictArray[history] = input;
  561. // history = history.substr(1);
  562. // history += input;
  563. // }
  564. </script>
  565. </body>
  566. </html>