|
|
@@ -0,0 +1,298 @@
|
|
|
+//3 persons
|
|
|
+//Сделать три ассоциативных массива a, b, c, в каждом из которых должны быть поля name и surname.
|
|
|
+
|
|
|
+const a = new Map([
|
|
|
+ ['name', 'yaho'],
|
|
|
+ ['surname', 'google'],
|
|
|
+]);
|
|
|
+const b = new Map([
|
|
|
+ ['name', 'Liza'],
|
|
|
+ ['surname', 'Babay'],
|
|
|
+]);
|
|
|
+const c = new Map([
|
|
|
+ ['name', 'Coconut'],
|
|
|
+ ['surname', 'Fish'],
|
|
|
+]);
|
|
|
+
|
|
|
+//different fields
|
|
|
+//Добавьте некоторые другие поля (например age, fathername, sex (пол)) так,
|
|
|
+//что бы набор полей отличался у разных объектов
|
|
|
+
|
|
|
+a.set('age', 16);
|
|
|
+b.set('fatherName', 'Bob');
|
|
|
+c.set('sex', 'male');
|
|
|
+
|
|
|
+//fields check
|
|
|
+//Проверьте наличие необязательных полей у каждого из этих массивов.
|
|
|
+//Если поле найдено, выведите его с помощью alert.Проверку делайте по typeof или in в if.
|
|
|
+
|
|
|
+// if (a.has('age')) alert(`${a.get('age')} this is field`);
|
|
|
+// if (b.has('fatherName')) alert(`${b.get('fatherName')} this is field`);
|
|
|
+// if (b.has('sex')) alert(`${b.get('sex')} this is field`);
|
|
|
+
|
|
|
+//array of persons
|
|
|
+//Добавьте несколько ассоциативных массивов с персонами в обычный массив persons,
|
|
|
+//например a, b, c.Так же добавьте персону литерально({ ...}).
|
|
|
+//Получится обычный массив с элементами - ассоциативными массивами с персонами.
|
|
|
+
|
|
|
+const persons = [a, b, c];
|
|
|
+
|
|
|
+//loop of persons
|
|
|
+//Сделайте цикл, который выводит весь массив persons
|
|
|
+//в форме объектов console.log(persons[i])
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// console.log(persons[i]);
|
|
|
+// }
|
|
|
+
|
|
|
+//loop of name and surname
|
|
|
+//Сделайте цикл, который выводит весь массив persons, но только Имя и Фамилию каждой персоны.
|
|
|
+
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// const name = persons[i].get('name');
|
|
|
+// const surname = persons[i].get('surname');
|
|
|
+// console.log(name, surname);
|
|
|
+// }
|
|
|
+
|
|
|
+//loop of loop of values
|
|
|
+//Сделайте цикл, который выводит весь массив persons,
|
|
|
+//но только значения всех полей из объектов.Используйте вложенный цикл
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// for (let person of persons[i]) {
|
|
|
+// console.log(...person);
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+//fullName
|
|
|
+//Сделайте цикл, которых добавляет поле fullName в каждый объект,
|
|
|
+//содержащий ФИО.Учтите, что поле fathername не является обязательным.
|
|
|
+
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// persons[i].set('fullName', i);
|
|
|
+// }
|
|
|
+
|
|
|
+//serialize
|
|
|
+//Создайте JSON-строку из persons
|
|
|
+// const serialize = JSON.stringify(persons.map((arr) => [...arr]));
|
|
|
+// console.log(jsonPersons);
|
|
|
+//deserialize
|
|
|
+//Создайте ассоциативный массив с одной персоной из JSON-строки. Добавьте её в persons
|
|
|
+// const deserialize = JSON.parse(serialize);
|
|
|
+// persons.push(new Map(deserialize[0]));
|
|
|
+// console.log(persons);
|
|
|
+
|
|
|
+//HTML
|
|
|
+//Сделайте цикл, который выводит весь массив persons, в форме HTML-таблицы.
|
|
|
+//Имя и Фамилия - колонки.Таблицы в HTML Пример кода:
|
|
|
+//Модифицируйте код так, что бы он выводил массив persons
|
|
|
+// const tableWrapper = document.getElementById('wrapper');
|
|
|
+// let stringTable = "<table border='1'>";
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// stringTable += `<tr><td>${persons[i].get('name')}</td><td>${persons[i].get(
|
|
|
+// 'surname'
|
|
|
+// )}</td></tr>`;
|
|
|
+// }
|
|
|
+// stringTable += '</table>';
|
|
|
+// tableWrapper.innerHTML += stringTable;
|
|
|
+
|
|
|
+//HTML optional fields
|
|
|
+//Сделайте цикл, который выводит весь массив persons, в форме HTML-таблицы.
|
|
|
+//Имя и Фамилия, а так же другие поля при наличии.Колонки: поля, строки таблицы - персоны.
|
|
|
+// const tableWrapper = document.getElementById('wrapper');
|
|
|
+// let stringTable = "<table border='1'>";
|
|
|
+// persons[0].set('dddd', 'justForCheckDoesItWorks?');
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// stringTable += '<tr>';
|
|
|
+// for (let value of persons[i].values()) {
|
|
|
+// stringTable += `<td>${value}</td>`;
|
|
|
+// }
|
|
|
+// stringTable += '</tr>';
|
|
|
+// }
|
|
|
+// stringTable += '</table>';
|
|
|
+
|
|
|
+// tableWrapper.innerHTML += stringTable;
|
|
|
+
|
|
|
+//HTML tr color
|
|
|
+//Добавьте к предыдущему примеру раскраску через строчку используя другой стиль тэга tr.
|
|
|
+
|
|
|
+// const tableWrapper = document.getElementById('wrapper');
|
|
|
+// let stringTable = "<table border='1'>";
|
|
|
+// persons[0].set('dddd', 'justForCheckDoesItWorks?');
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// stringTable += `<tr style="color:green">`;
|
|
|
+// for (let value of persons[i].values()) {
|
|
|
+// stringTable += `<td>${value}</td>`;
|
|
|
+// }
|
|
|
+// stringTable += '</tr>';
|
|
|
+// }
|
|
|
+// stringTable += '</table>';
|
|
|
+
|
|
|
+// tableWrapper.innerHTML += stringTable;
|
|
|
+
|
|
|
+//HTML th optional
|
|
|
+//Переработайте вывод persons в HTML с поиском всех возможных колонок во всех записях, выводом
|
|
|
+//названий колонок в заголовок HTML - таблицы.Для решения этой задачи вначале узнайте
|
|
|
+//множество полей(ключей) во всех записях(они не совпадают), выведите HTML - заголовок используя тэги < th >,
|
|
|
+//а потом выводите все записи.Ниже выведите все персоны построчно.Следите за корректностью колонок.
|
|
|
+//Для этого вам нужно итерировать общий набор колонок, а не каждую персону, колонки из которой могут отличаться от предыдущей.
|
|
|
+
|
|
|
+// const tableWrapper = document.getElementById('wrapper');
|
|
|
+// let stringTable = "<table border='1'>";
|
|
|
+// persons[0].set('IsWorks?', 'justForCheckDoesItWorks?');
|
|
|
+// for (let i = 0; i < persons.length; i++) {
|
|
|
+// stringTable += `<tr ">`;
|
|
|
+// for (let [key, value] of persons[i].entries()) {
|
|
|
+// stringTable += `<th style="color:blue">${key}</th>`;
|
|
|
+// stringTable += `<td style="color:green">${value}</td>`;
|
|
|
+// }
|
|
|
+// stringTable += '</tr>';
|
|
|
+// }
|
|
|
+// stringTable += '</table>';
|
|
|
+
|
|
|
+// tableWrapper.innerHTML += stringTable;
|
|
|
+
|
|
|
+// Задание на синий пояс.
|
|
|
+//Сделать HTML-конструктор из деревянной структуры, которая была на прошлом занятии:
|
|
|
+const someTree = {
|
|
|
+ tagName: 'div', //html tag
|
|
|
+ subTags: [
|
|
|
+ //вложенные тэги
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ subTags: [
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ text: 'some text',
|
|
|
+ attrs: {
|
|
|
+ color: 'green',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ text: 'some text 2',
|
|
|
+ attrs: {
|
|
|
+ color: 'blue',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ attrs: {
|
|
|
+ 'font-size': '48px',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ attrs: {
|
|
|
+ border: 1,
|
|
|
+ 'background-color': '#92cd00',
|
|
|
+ width: '500px',
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+//Для начала сделайте конструктор для верхнего уровня (в примере - table).
|
|
|
+//Потом с помощью копипасты сделайте то же самое с вложенным уровнем nestedTags(tr).Аналогично для уровня td.
|
|
|
+//Конструктор должен поддерживать вложенность до 3его уровня (как в примере).
|
|
|
+//В результате работы конструктора из примера выше должен получиться следующий HTML(в строке str):
|
|
|
+{
|
|
|
+ /* <table border=1>
|
|
|
+ <tr>
|
|
|
+ <td>some text</td>
|
|
|
+ <td>some text 2</td>
|
|
|
+ </tr>
|
|
|
+</table> */
|
|
|
+}
|
|
|
+//Переносы строк и отступы в результате не принципиальны, главное - структура HTML Проверьте ваш код на других структурах.
|
|
|
+
|
|
|
+// const tableWrapper = document.getElementById('wrapper');
|
|
|
+// let stringTable = '';
|
|
|
+// const htmlConstructor = (obj) => {
|
|
|
+// stringTable += `<${obj.tagName} style="`;
|
|
|
+// for (const [key, value] of Object.entries(obj.attrs)) {
|
|
|
+// stringTable += `${key}:${value};`;
|
|
|
+// }
|
|
|
+// stringTable += `">`;
|
|
|
+// for (const secondLevel of obj.subTags) {
|
|
|
+// stringTable += `<${obj.tagName} style="`;
|
|
|
+// for (const [key, value] of Object.entries(secondLevel.attrs)) {
|
|
|
+// stringTable += `${key}:${value};`;
|
|
|
+// }
|
|
|
+// stringTable += '">';
|
|
|
+// for (const thierdLevel of secondLevel.subTags) {
|
|
|
+// stringTable += `<${obj.tagName} style="`;
|
|
|
+// for (const [key, value] of Object.entries(thierdLevel.attrs)) {
|
|
|
+// stringTable += `${key}:${value};`;
|
|
|
+// }
|
|
|
+// stringTable += '">';
|
|
|
+// stringTable += `${thierdLevel.text}`;
|
|
|
+// stringTable += `</${thierdLevel.tagName}>`;
|
|
|
+// }
|
|
|
+// stringTable += `</${secondLevel.tagName}>`;
|
|
|
+// }
|
|
|
+// stringTable += `</${obj.tagName}>`;
|
|
|
+// };
|
|
|
+
|
|
|
+// htmlConstructor(someTree);
|
|
|
+
|
|
|
+// tableWrapper.innerHTML += stringTable;
|
|
|
+
|
|
|
+//destruct array
|
|
|
+//напишите код, который используя деструктуризацию положит:
|
|
|
+//четные числа в переменные even1, even2,
|
|
|
+//нечетные в odd1, odd2, odd3,буквы в отдельный массив
|
|
|
+// const [odd1, even1, odd2, even2, odd3, ...restArr] = [
|
|
|
+// 1,
|
|
|
+// 2,
|
|
|
+// 3,
|
|
|
+// 4,
|
|
|
+// 5,
|
|
|
+// 'a',
|
|
|
+// 'b',
|
|
|
+// 'c',
|
|
|
+// ];
|
|
|
+// console.log(odd1, even1, odd2, even2, odd3, restArr);
|
|
|
+
|
|
|
+//destruct string
|
|
|
+// число в переменную number
|
|
|
+// букву a в переменную s1
|
|
|
+// букву b в переменную s2
|
|
|
+// букву c в переменную s3
|
|
|
+
|
|
|
+// const [number, [s1, s2, s3]] = [1, 'abc'];
|
|
|
+// console.log(number, s1, s2, s3);
|
|
|
+
|
|
|
+//destruct 2
|
|
|
+//извлеките используя деструктуризацию имена детей в переменные name1 и name2
|
|
|
+// const {
|
|
|
+// children: [{ name: name1 }, { name: name2 }],
|
|
|
+// } = {
|
|
|
+// name: 'Ivan',
|
|
|
+// surname: 'Petrov',
|
|
|
+// children: [{ name: 'Maria' }, { name: 'Nikolay' }],
|
|
|
+// };
|
|
|
+// console.log(name1, name2);
|
|
|
+
|
|
|
+//destruct 3
|
|
|
+//извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length
|
|
|
+// const [first, second, ...restArr] = [1, 2, 3, 4, 5, 6, 7, 10];
|
|
|
+// const { length } = restArr;
|
|
|
+// console.log(first, second, length);
|
|
|
+
|
|
|
+//Задание на черный пояс
|
|
|
+//Сделать предыдущее задание на черный пояс в упрощенном виде: не использовать четырехмерный массив
|
|
|
+//для хранения истории, а использовать ассоциативный массив: Например, если пользователь ввел 1212
|
|
|
+//за последние четыре хода, то мы ищем то, что было введено последний раз после такой последовательности:
|
|
|
+
|
|
|
+// const predictArray = new Map();
|
|
|
+// let hystory = '';
|
|
|
+
|
|
|
+// const internalGame = () => {
|
|
|
+// const answer = confirm('Choose OK or Cancel') ? 0 : 1;
|
|
|
+// console.log(predictArray);
|
|
|
+// if (hystory.length === 3) {
|
|
|
+// hystory += answer;
|
|
|
+// predictArray.set(hystory, answer);
|
|
|
+// hystory = '';
|
|
|
+// } else {
|
|
|
+// hystory += answer;
|
|
|
+// }
|
|
|
+// internalGame();
|
|
|
+// };
|
|
|
+
|
|
|
+// internalGame();
|
