index.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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>HW-5</title>
  8. </head>
  9. <body>
  10. <script>
  11. //3 persons + different fields
  12. // let a = {
  13. // name: "Polina",
  14. // surname: "Kobtseva",
  15. // fathername: "Vladislavovna",
  16. // age: 23,
  17. // sex: "female",
  18. // }
  19. // let b = {
  20. // name: "Ivan",
  21. // surname: "Ivanovv",
  22. // }
  23. // let c = {
  24. // name: "Petr",
  25. // surname: "Petrov",
  26. // city: "Kharkiv",
  27. // }
  28. // b.country = "Ukraine"
  29. // b.studies = "University"
  30. // c.children = "no"
  31. //fields check
  32. //a
  33. typeof a.age
  34. if (a == true) {
  35. alert(a.age)
  36. }
  37. if ("sex" in a) {
  38. alert(a.sex)
  39. }
  40. //b
  41. typeof b.age
  42. if (b == true) {
  43. alert(b.age)
  44. }
  45. if ("country" in b) {
  46. alert(b.country)
  47. }
  48. //c
  49. typeof c.fathername
  50. if (c == true) {
  51. alert(c.fathername)
  52. }
  53. if ("city" in c) {
  54. alert(c.city)
  55. }
  56. //array of persons
  57. let person = [a, b, c, {
  58. surname: "Pupkin",
  59. name: "Vasya",
  60. fathername: "Ivanovich",
  61. age: "14",
  62. city: "Kyiv"
  63. }];
  64. //loop of persons
  65. for (let key in person) {
  66. console.log(key, person[key])
  67. }
  68. //loop of name and surname
  69. for (let key of person) {
  70. console.log(key.surname + ' ' + key.name)
  71. }
  72. //loop of loop of values
  73. for (let i = 0; i < person.length; i++) {
  74. for (let key in person[i]) {
  75. console.log(person[i][key])
  76. }
  77. }
  78. //fullName
  79. for (let newObject of person) {
  80. if (newObject.name && newObject.surname) {
  81. newObject.fullname = newObject.name + " " + newObject.surname;
  82. }
  83. console.log(person)
  84. }
  85. //serialize
  86. JSON.stringify(person);
  87. //deserialize
  88. let newPerson = '{"name": "Galina", "surname": "Bulka", "fathername": "Antonavna", "age": "50"}'
  89. JSON.parse(newPerson)
  90. person[4] = JSON.parse(newPerson)
  91. //HTML
  92. let a = {
  93. name: "Polina",
  94. surname: "Kobtseva",
  95. fathername: "Vladislavovna",
  96. age: 23,
  97. sex: "female",
  98. }
  99. let b = {
  100. name: "Ivan",
  101. surname: "Ivanovv",
  102. country: "Ukraine",
  103. studies: "University",
  104. }
  105. let c = {
  106. name: "Petr",
  107. surname: "Petrov",
  108. city: "Kharkiv",
  109. }
  110. let d = {
  111. name: "Vasya",
  112. surname: "Pupkin",
  113. fathername: "Ivanovich",
  114. age: "14",
  115. city: "Kyiv",
  116. }
  117. let e = {
  118. name: "Galina",
  119. surname: "Bulka",
  120. fathername: "Antonavna",
  121. age: "50",
  122. }
  123. //
  124. let person = [a, b, c, d, e];
  125. for (var key in person) {
  126. console.log(key, person[key]);
  127. }
  128. //
  129. let str = '<table border = "1">'
  130. for (let key in person) {
  131. str +=
  132. `<tr> <td> name </td> <td> ${person[key].name} </td> <td> surname </td> <td> ${person[key].surname} </td> </tr> \n`;
  133. }
  134. str += "</table>"
  135. console.log(str)
  136. document.write(str)
  137. //HTML optional fields
  138. let str2 = '<table border = "1">'
  139. for (g = 0; g < 5; g++) {
  140. for (let key in person[g]) {
  141. str2 += `<tr> <td> ${key} </td> <td> ${person[g][key]} </td> </tr> \n`;
  142. }
  143. }
  144. str2 += "</table>"
  145. console.log(str2)
  146. document.write(str2)
  147. //HTML tr color
  148. let str3 = '<table border = "1">'
  149. for (g = 0; g < 5; g++) {
  150. for (let key in person[g]) {
  151. str3 +=
  152. `<tr style = "background-color: violet; "> <td style = "color: black";> ${key} </td> <td> ${person[g][key]} </td> </tr> \n`;
  153. }
  154. }
  155. str3 += "</table>"
  156. console.log(str3)
  157. document.write(str3)
  158. //HTML th optional
  159. //destruct array
  160. let [odd1, even1, odd2, even2, odd3, ...box] = [1, 2, 3, 4, 5, "a", "b", "c"]
  161. //destruct string
  162. let arr = [1, "abc"]
  163. let [number, [s1, s2, s3]] = arr
  164. //destruct 2
  165. let obj = {
  166. name: 'Ivan',
  167. surname: 'Petrov',
  168. children: [{
  169. name: 'Maria'
  170. }, {
  171. name: 'Nikolay'
  172. }]
  173. }
  174. let { children: [{name: name1}, {name: name2}]} = obj
  175. //destruct 3
  176. let arr2 = [1,2,3,4, 5,6,7,10]
  177. let [a1, b1, { length = arr2.length }] = arr2
  178. </script>
  179. </body>
  180. </html>