123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- // Материал
- // Просмотрите, запустите и внимательно проанализируйте все примеры кода из материала лекции.
- {
- // сделано
- }
- // 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']
- }
- ]
- }
- ]
- }
- }
|