# ДЗ: Вложенные декларативные структуры и код в них. Отображение циклических и древовидных структур. Циклы.
## html tree
```html
<body>
<div>
<span>Enter a data please:</span><br/>
<input type='text' id='name'>
<input type='text' id='surname'>
</div>
<div>
<button id='ok'>OK</button>
<button id='cancel'>Cancel</button>
</div>
</body>
```
Сделайте декларативную JSON-структуру для тэгов выше, в которой:
- каждый тэг будет объектом
- имя тэга будет полем `tagName`
- вложенные тэги будут в поле `subTags`
- текст в тэге будет в поле `text`
- набор аттрибутов тэга будет в поле `attrs`.
Например для обычной таблицы 2x2 это будет выглядеть следующим образом:
```html
<table border='1'>
<tr>
<td>
1x1
</td>
<td>
1x2
</td>
</tr>
<tr>
<td>
2x1
</td>
<td>
2x2
</td>
</tr>
</table>
```
```javascript
var table = {
tagName: 'table',
attrs: {
border: "1",
},
subTags: [
{
tagName: 'tr',
subTags: [
{
tagName: "td",
text: "1x1",
},
{
tagName: "td",
text: "1x2",
},
]
},
{
tagName: 'tr',
subTags: [
{
tagName: "td",
text: "2x1",
},
{
tagName: "td",
text: "2x2",
},
]
}
]
}
```
Выведите значения текста во второй кнопке, используя `.` и `[]`.
Выведите значение атрибута `id` во втором `input`, используя `.` и `[]`.
## declarative fields
Как известно, элемент массива и объекта может быть любого типа данных **JS**, т. е. в коде может быть любое выражение, которое вычисляется в то или иное значение типа данных. А значит, мы можем применять функции для ввода данных типа `confirm` или `prompt`:
```javascript
var text = "Enter a number";
var arr3 = [+prompt(text), +prompt(text), +prompt(text)]; //вводим числа.
```
Организуйте таким способом заполнение полей в объектах:
```javascript
var notebook = {
brand: "HP",
type: "440 G4",
model: "Y7Z75EA",
ram: 4,
size: "14",
weight: 1.8,
resolution: {
width: 1920,
height: 1080,
},
};
var phone = {
brand: "meizu",
model: "m2",
ram: 2,
color: "black",
};
var person = {
name: "Donald",
surname: "Trump",
married: true,
}
```
Например:
```javascript
var person = {
name: prompt("Enter a name"),
surname: prompt("Enter a surname"),
}
```
Используйте приведение к числу, `prompt` и `confirm` в зависимости от типов данных.
## object links
- Добавьте персоне гаджеты, используя новые поля `smartphone` и `laptop` в объекте персоны
- Добавьте владельца в гаджеты, используя новое поле `owner` в объектах телефона и ноутбука.
- обратите внимание на цикличность ссылок в объектах, если вы все сделали правильно, то
```javascript
person.smartphone.owner.laptop.owner.smartphone == person.smartphone
```
## imperative array fill 3
Создайте пустой массив и добавьте в него три элемента, введенные пользователем (`prompt`), используя императивный подход (несколько операторов подряд)
## while confirm
Сделайте цикл с `confirm`, который продолжается по **Отмена** и заканчивается по **ОК**.
## array fill
Создайте пустой массив и добавляйте в него элементы, пока пользователь не нажмет `Отмена` в очередном `prompt`. Используйте `push` для удобства: [push](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
## array fill nopush
Сделайте предыдущее задание, не используя `push`, а обращаясь к элементам по индексу.
## infinite probability
Создайте бесконечный цикл, который прерывается с помощью конструкции `break`, когда Math.random() > 0.9. Код должен подсчитывать количество итераций и вывести это число с помощью `alert`.
## empty loop
Сделайте цикл с `prompt`, который прерывается по нажатию **OK** и продолжается по нажатию "**Отмена**" **c пустым телом цикла**.
## progression sum
Подсчитать сумму арифметической прогрессии от 1 до N c шагом 3 (1,4,7....) используя цикл `for`.
## chess one line
Сформировать строку `" # # # # # "` с помощью цикла `for`. Длина строки может быть четной и нечетной, и указывается в одном месте в коде.
## numbers
Сформировать строку c помощью вложенных циклов. Для перевода строки используйте **\n**.
<pre>
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
</pre>
## chess
Сформируйте строку с шахматной доской из вложенных циклов. Для перевода строки используйте `\n`. Код должен поддерживать легкое изменение размеров
доски.
<pre>
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
</pre>
## cubes
Сформируйте массив из N элементов, содержащий в себе кубы индексов, т. е:
```javascript
[0,1,8,27,64...]
```
## multiply table
C помощью вложенного цикла сформируйте массив массивов "таблица умножения". Для инициализации вложенных массивов используйте
```javascript
arr[i] = [] //в i-тый элемент массива заносится новый пустой массив
```
`arr[5][6]` должен быть равен, соответственно, 30, `arr[7][2]` == 14 и так далее.
## matrix to html table
Сделайте вложенный цикл, который формирует HTML-таблицу в переменной строкового типа из любого двумерного массива. Т. е. если в нём использовать результат работы
предыдущего задания, то получится таблица умножения в HTML.
## jQ person
Создайте форму с полями "Фамилия", "Имя", "Возраст" и кнопкой "Сохранить". Используя jQuery при нажатии на кнопку создайте объект с этими полями. Используйте jQuery `click` и `val`.
## jQ collect
Задайте массив с селекторами, например такой:
```javascript
var selectors = ["#surname", "#name", "#age", "select#sex"];
```
В цикле прочтите значения всех полей ввода из селекторов и сохраните в объект с ключами-селекторами из массива. То есть, для примера выше:
```javascript
{
"#surname": "<текст, который ввел пользователь в поле ввода с id=surname>",
"#name": "<текст, который ввел пользователь в поле ввода с id=name>",
"#age": "<текст, который ввел пользователь в поле ввода с id=age>",
"select#sex": "<текст, который ввел пользователь в поле ввода <select id=sex>",
}
```
## **Задание на синий пояс**: Треугольник
Сформировать следующую строку - треугольник:
<pre>
.....#.....
....###....
...#####...
..#######..
.#########.
###########
</pre>
## **Задание на черный пояс**: Электронная гадалка
Пользователь вводит 0 или 1. Гадалка пытается угадать, что введет пользователь (естественно **перед** его вводом), но не показывает пользователю,
что бы пользователь не выбрал противоположный вариант, а выводит предполагаемый вариант в консоль, скрытую от пользователя.
### Как это работает?
Гадалка хранит историю ввода (4 последних числа) пользователя в массиве history. Каждое следующее число добавляется с помощью `push` в конец массива,
при этом первое число из массива (самое старое) удаляется с помощью `shift`.
Гадалка запоминает что пользователь ввёл в предыдущий раз после такой истории. То есть, если пользователь вводил 0,1,0,1,0, то логично предположить,
что с историей 0,1,0,1 следующим вариантом будет 0. Для хранения используется 4х мерный массив, индексами которого является история:
predictArray[history[0]][history[1]][history[2]][history[3]] равно тому, что пользователь ввёл после истории в предыдущий раз.
### Алгоритм:
Изначально predictArray содержит, например, -1, или иные значения, которые отличаются от пользовательского ввода. История пусть состоит из единиц:
`history = [1,1,1,1];`, Т. е. считается что пользователь нажимал 1 четыре ряда подряд. Пока мы не можем предсказать, так как в массиве еще не сохранилось
то, что вводил пользователь, мы используем Math.random в качестве предсказания, и записываем ввод пользователя в массив predictArray, добавляя новые значения в history, и
сдвигая его. Т. е. если пользователь ввел 0, то:
```javascript
predictArray[1,1,1,1] = 0; //1,1,1,1 - история, 0 - новое значение
history = [1,1,1,0] //удаляем старую единицу из истории и добавляем введенный только что 0
```
Для предсказания следующего достаем значение массива predictArray[1,1,1,0], а после ввода опять записываем туда то, что ввёл пользователь (пусть 1):
```javascript
predictArray[1,1,1,0] = 1; //1,1,1,0 - история, 1 - новое значение
history = [1,1,0,1] //удаляем старую единицу из истории и добавляем введенный только что 1
```
Таким образом в predictArray накапливаются знания о том, что вводит пользователь после определенной истории чисел.