HW06.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. // Материал
  2. // Просмотрите, запустите и внимательно проанализируйте все примеры кода из материала лекции.
  3. {
  4. // сделано
  5. }
  6. // Literals
  7. // Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript.Например:
  8. {
  9. const flover = {
  10. type: 'palm',
  11. height: 150,
  12. color: 'green'
  13. }
  14. const dog = {
  15. type: 'york',
  16. sex: 'female',
  17. color: 'red'
  18. }
  19. const wife = {
  20. type: 'creator',
  21. sex: 'female',
  22. height: 165
  23. }
  24. }
  25. // Literals expand
  26. // Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями.Обеспечьте ввод названия ключа и значения через prompt прямо в литерале объекта { }
  27. {
  28. const flover = {
  29. type: 'palm',
  30. height: 150,
  31. color: 'green',
  32. [prompt('Введите первый параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра'),
  33. [prompt('Введите второй параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра')
  34. }
  35. const dog = {
  36. type: 'york',
  37. sex: 'female',
  38. color: 'red',
  39. [prompt('Введите первый параметр для объекта "Собака"')]: prompt('Введите описание этого параметра'),
  40. [prompt('Введите второй параметр для объекта "Собака"')]: prompt('Введите описание этого параметра')
  41. }
  42. const wife = {
  43. type: 'creator',
  44. sex: 'female',
  45. height: 165,
  46. [prompt('Введите первый параметр для объекта "Жена"')]: prompt('Введите описание этого параметра'),
  47. [prompt('Введите второй параметр для объекта "Жена"')]: prompt('Введите описание этого параметра')
  48. }
  49. }
  50. // Literals copy
  51. // Пусть пользователь введет еще одно свойство в переменную.Вставьте в новый объект эту переменную.Скопируйте объект из предыдущего задания в новый объект.
  52. {
  53. }
  54. // Html tree - НЕ РЕШЕНО ДО КОНЦА (последние два пункта не сделаны)
  55. // Сделайте декларативную JSON - структуру для тэгов выше, в которой:
  56. // каждый тэг будет объектом
  57. // имя тэга будет полем tagName
  58. // вложенные тэги будут в поле children
  59. // набор аттрибутов тэга будет в поле attrs.
  60. // Например для обычной таблицы 2x2 это будет выглядеть следующим образом:
  61. // Выведите значения текста во второй кнопке, используя.и[].
  62. // Выведите значение атрибута id во втором input, используя.и[].
  63. {
  64. const dataInput = {
  65. tagName: 'body',
  66. children: [
  67. {
  68. nameTag: 'div',
  69. children: [
  70. {
  71. tagName: 'span',
  72. children: ['Enter a data please:']
  73. },
  74. {
  75. tagName: 'br'
  76. },
  77. {
  78. tagName: 'input',
  79. attrs: {
  80. type: 'text',
  81. id: 'name'
  82. }
  83. },
  84. {
  85. tagName: 'input',
  86. attrs: {
  87. type: 'text',
  88. id: 'surname'
  89. }
  90. }
  91. ]
  92. },
  93. {
  94. nameTag: 'div',
  95. children: [
  96. {
  97. tagName: 'button',
  98. attrs: {
  99. id: 'ok'
  100. },
  101. children: ['OK']
  102. },
  103. {
  104. tagName: 'button',
  105. attrs: {
  106. id: 'cancel'
  107. },
  108. children: ['Cancel']
  109. }
  110. ]
  111. }
  112. ]
  113. }
  114. }
  115. // Parent
  116. // Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
  117. {
  118. const dataInput = {
  119. tagName: 'body',
  120. children: [
  121. {
  122. nameTag: 'div',
  123. children: [
  124. {
  125. tagName: 'span',
  126. children: ['Enter a data please:']
  127. },
  128. {
  129. tagName: 'br'
  130. },
  131. {
  132. tagName: 'input',
  133. attrs: {
  134. type: 'text',
  135. id: 'name'
  136. }
  137. },
  138. {
  139. tagName: 'input',
  140. attrs: {
  141. type: 'text',
  142. id: 'surname'
  143. }
  144. }
  145. ]
  146. },
  147. {
  148. nameTag: 'div',
  149. children: [
  150. {
  151. tagName: 'button',
  152. attrs: {
  153. id: 'ok'
  154. },
  155. children: ['OK']
  156. },
  157. {
  158. tagName: 'button',
  159. attrs: {
  160. id: 'cancel'
  161. },
  162. children: ['Cancel']
  163. }
  164. ]
  165. }
  166. ]
  167. }
  168. dataInput.children[0].father = dataInput
  169. dataInput.children[1].father = dataInput
  170. dataInput.children[1].father = dataInput
  171. dataInput.children[0].children[0].father = dataInput.children[0]
  172. dataInput.children[0].children[1].father = dataInput.children[0]
  173. dataInput.children[0].children[2].father = dataInput.children[0]
  174. dataInput.children[0].children[3].father = dataInput.children[0]
  175. dataInput.children[1].children[0].father = dataInput.children[1]
  176. dataInput.children[1].children[1].father = dataInput.children[1]
  177. }
  178. // Change OK - НЕ РЕШЕНО!!!!!!
  179. // Добавьте(или измените) любой введенный пользователем атрибут тэга < button id = 'ok' > из задания HTML Tree.Пользователь также вводит значение этого атрибута.
  180. {
  181. const dataInput = {
  182. tagName: 'body',
  183. children: [
  184. {
  185. nameTag: 'div',
  186. children: [
  187. {
  188. tagName: 'span',
  189. children: ['Enter a data please:']
  190. },
  191. {
  192. tagName: 'br'
  193. },
  194. {
  195. tagName: 'input',
  196. attrs: {
  197. type: 'text',
  198. id: 'name'
  199. }
  200. },
  201. {
  202. tagName: 'input',
  203. attrs: {
  204. type: 'text',
  205. id: 'surname'
  206. }
  207. }
  208. ]
  209. },
  210. {
  211. nameTag: 'div',
  212. children: [
  213. {
  214. tagName: 'button',
  215. attrs: {
  216. id: 'ok'
  217. },
  218. children: ['OK']
  219. },
  220. {
  221. tagName: 'button',
  222. attrs: {
  223. id: 'cancel'
  224. },
  225. children: ['Cancel']
  226. }
  227. ]
  228. }
  229. ]
  230. }
  231. }