|
|
@@ -0,0 +1,281 @@
|
|
|
+# ДЗ: Вложенные декларативные структуры и код в них. Отображение циклических и древовидных структур. Циклы.
|
|
|
+
|
|
|
+## 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` в зависимости от типов данных.
|
|
|
+
|
|
|
+## 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 накапливаются знания о том, что вводит пользователь после определенной истории чисел.
|
|
|
+
|
