|
|
@@ -0,0 +1,253 @@
|
|
|
+// Материал
|
|
|
+// Просмотрите, запустите и внимательно проанализируйте все примеры кода из материала лекции.
|
|
|
+{
|
|
|
+ // сделано
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Literals
|
|
|
+// Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript.Например:
|
|
|
+{
|
|
|
+ const flover = {
|
|
|
+ type: 'palm',
|
|
|
+ height: 150,
|
|
|
+ color: 'green'
|
|
|
+ }
|
|
|
+
|
|
|
+ const dog = {
|
|
|
+ type: 'york',
|
|
|
+ sex: 'female',
|
|
|
+ color: 'red'
|
|
|
+ }
|
|
|
+
|
|
|
+ const wife = {
|
|
|
+ type: 'creator',
|
|
|
+ sex: 'female',
|
|
|
+ height: 165
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Literals expand
|
|
|
+// Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями.Обеспечьте ввод названия ключа и значения через prompt прямо в литерале объекта { }
|
|
|
+{
|
|
|
+ const flover = {
|
|
|
+ type: 'palm',
|
|
|
+ height: 150,
|
|
|
+ color: 'green',
|
|
|
+ [prompt('Введите первый параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра'),
|
|
|
+ [prompt('Введите второй параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра')
|
|
|
+ }
|
|
|
+
|
|
|
+ const dog = {
|
|
|
+ type: 'york',
|
|
|
+ sex: 'female',
|
|
|
+ color: 'red',
|
|
|
+ [prompt('Введите первый параметр для объекта "Собака"')]: prompt('Введите описание этого параметра'),
|
|
|
+ [prompt('Введите второй параметр для объекта "Собака"')]: prompt('Введите описание этого параметра')
|
|
|
+ }
|
|
|
+
|
|
|
+ const wife = {
|
|
|
+ type: 'creator',
|
|
|
+ sex: 'female',
|
|
|
+ height: 165,
|
|
|
+ [prompt('Введите первый параметр для объекта "Жена"')]: prompt('Введите описание этого параметра'),
|
|
|
+ [prompt('Введите второй параметр для объекта "Жена"')]: prompt('Введите описание этого параметра')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Literals copy
|
|
|
+// Пусть пользователь введет еще одно свойство в переменную.Вставьте в новый объект эту переменную.Скопируйте объект из предыдущего задания в новый объект.
|
|
|
+{
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// Html tree - НЕ РЕШЕНО ДО КОНЦА (последние два пункта не сделаны)
|
|
|
+// Сделайте декларативную JSON - структуру для тэгов выше, в которой:
|
|
|
+// каждый тэг будет объектом
|
|
|
+// имя тэга будет полем tagName
|
|
|
+// вложенные тэги будут в поле children
|
|
|
+// набор аттрибутов тэга будет в поле attrs.
|
|
|
+// Например для обычной таблицы 2x2 это будет выглядеть следующим образом:
|
|
|
+// Выведите значения текста во второй кнопке, используя.и[].
|
|
|
+// Выведите значение атрибута id во втором input, используя.и[].
|
|
|
+{
|
|
|
+ const dataInput = {
|
|
|
+ tagName: 'body',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'span',
|
|
|
+ children: ['Enter a data please:']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'br'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'name'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'surname'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ['Cancel']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Parent
|
|
|
+// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
|
|
|
+{
|
|
|
+ const dataInput = {
|
|
|
+ tagName: 'body',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'span',
|
|
|
+ children: ['Enter a data please:']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'br'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'name'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'surname'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ['Cancel']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ dataInput.children[0].father = dataInput
|
|
|
+ dataInput.children[1].father = dataInput
|
|
|
+ dataInput.children[1].father = dataInput
|
|
|
+ dataInput.children[0].children[0].father = dataInput.children[0]
|
|
|
+ dataInput.children[0].children[1].father = dataInput.children[0]
|
|
|
+ dataInput.children[0].children[2].father = dataInput.children[0]
|
|
|
+ dataInput.children[0].children[3].father = dataInput.children[0]
|
|
|
+ dataInput.children[1].children[0].father = dataInput.children[1]
|
|
|
+ dataInput.children[1].children[1].father = dataInput.children[1]
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Change OK - НЕ РЕШЕНО!!!!!!
|
|
|
+// Добавьте(или измените) любой введенный пользователем атрибут тэга < button id = 'ok' > из задания HTML Tree.Пользователь также вводит значение этого атрибута.
|
|
|
+{
|
|
|
+ const dataInput = {
|
|
|
+ tagName: 'body',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'span',
|
|
|
+ children: ['Enter a data please:']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'br'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'name'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'surname'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ['Cancel']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
