ДЗ: Вложенные декларативные структуры и код в них. Отображение циклических и древовидных структур. Циклы.

html tree

    <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 это будет выглядеть следующим образом:

<table border='1'>
    <tr>
        <td>
            1x1
        </td>
        <td>
            1x2
        </td>
    </tr>
    <tr>
        <td>
            2x1
        </td>
        <td>
            2x2
        </td>
    </tr>
</table>

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:

var text = "Enter a number";
var arr3 = [+prompt(text), +prompt(text), +prompt(text)]; //вводим числа.

Организуйте таким способом заполнение полей в объектах:

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,
}

Например:

var person = {
    name: prompt("Enter a name"),
    surname: prompt("Enter a surname"),
}

Используйте приведение к числу, prompt и confirm в зависимости от типов данных.

object links

Добавьте персоне гаджеты, используя новые поля smartphone и laptop в объекте персоны
Добавьте владельца в гаджеты, используя новое поле owner в объектах телефона и ноутбука.
обратите внимание на цикличность ссылок в объектах, если вы все сделали правильно, то

person.smartphone.owner.laptop.owner.smartphone == person.smartphone

imperative array fill 3

Создайте пустой массив и добавьте в него три элемента, введенные пользователем (prompt), используя императивный подход (несколько операторов подряд)

while confirm

Сделайте цикл с confirm, который продолжается по Отмена и заканчивается по ОК.

array fill

Создайте пустой массив и добавляйте в него элементы, пока пользователь не нажмет Отмена в очередном prompt. Используйте push для удобства: 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.

chess

Сформируйте строку с шахматной доской из вложенных циклов. Для перевода строки используйте \n. Код должен поддерживать легкое изменение размеров доски.

.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.

cubes

Сформируйте массив из N элементов, содержащий в себе кубы индексов, т. е:

[0,1,8,27,64...]

multiply table

C помощью вложенного цикла сформируйте массив массивов "таблица умножения". Для инициализации вложенных массивов используйте

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

Задайте массив с селекторами, например такой:

var selectors = ["#surname", "#name", "#age", "select#sex"];

В цикле прочтите значения всех полей ввода из селекторов и сохраните в объект с ключами-селекторами из массива. То есть, для примера выше:

{
    "#surname": "<текст, который ввел пользователь в поле ввода с id=surname>",
    "#name": "<текст, который ввел пользователь в поле ввода с id=name>",
    "#age": "<текст, который ввел пользователь в поле ввода с id=age>",
    "select#sex": "<текст, который ввел пользователь в поле ввода <select id=sex>",
}

Задание на синий пояс: Треугольник

Сформировать следующую строку - треугольник:

.....#.....
....###....
...#####...
..#######..
.#########.
###########

Задание на черный пояс: Электронная гадалка

Пользователь вводит 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, то:

predictArray[1,1,1,1] = 0; //1,1,1,1 - история, 0 - новое значение
history = [1,1,1,0]        //удаляем старую единицу из истории и добавляем введенный только что 0

Для предсказания следующего достаем значение массива predictArray[1,1,1,0], а после ввода опять записываем туда то, что ввёл пользователь (пусть 1):

predictArray[1,1,1,0] = 1; //1,1,1,0 - история, 1 - новое значение
history = [1,1,0,1]        //удаляем старую единицу из истории и добавляем введенный только что 1

Таким образом в predictArray накапливаются знания о том, что вводит пользователь после определенной истории чисел.

03StructuresAndEvaluationsLoopsHomeWork.md 13 KB Permalink History Raw