|
|
@@ -0,0 +1,572 @@
|
|
|
+//Literals
|
|
|
+//Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript. Например:
|
|
|
+
|
|
|
+{
|
|
|
+ const phone = {
|
|
|
+ brand: 'Xiaomi',
|
|
|
+ model: 'mi11',
|
|
|
+ year: '2021',
|
|
|
+ memory: '256'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//Literals expand
|
|
|
+//Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями. Обеспечьте ввод названия ключа и значения через prompt прямо в литерале объекта {}
|
|
|
+
|
|
|
+{
|
|
|
+ const yourPhone = {
|
|
|
+ [prompt('свойство 1')]: prompt('значение свойства 1'),
|
|
|
+ [prompt('свойство 2')]: prompt('значение свойства 2'),
|
|
|
+ [prompt('свойство 3')]: prompt('значение свойства 3'),
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//Literals copy
|
|
|
+//Пусть пользователь введет еще одно свойство в переменную. Вставьте в новый объект эту переменную. Скопируйте объект из предыдущего задания в новый объект.
|
|
|
+
|
|
|
+{
|
|
|
+ const yourPhone = {
|
|
|
+ [prompt('свойство 1')]: prompt('значение свойства 1'),
|
|
|
+ [prompt('свойство 2')]: prompt('значение свойства 2'),
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const property = prompt()
|
|
|
+ const objNew = {
|
|
|
+ [property] : 25,
|
|
|
+ ...yourPhone
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//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
|
|
|
+вложенные тэги будут в поле children
|
|
|
+набор аттрибутов тэга будет в поле attrs.*/
|
|
|
+
|
|
|
+{
|
|
|
+ const body = {
|
|
|
+ tagName : 'body',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName : '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',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName : 'div',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName : 'button',
|
|
|
+ attrs : {
|
|
|
+ id : 'ok'
|
|
|
+ },
|
|
|
+ children : ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName : 'button',
|
|
|
+ attrs : {
|
|
|
+ id : 'cancel'
|
|
|
+ },
|
|
|
+ children : 'Cancel'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+// Выведите значения текста во второй кнопке, используя . и [].
|
|
|
+
|
|
|
+console.log( body.children[1].children[1].children ) ;
|
|
|
+
|
|
|
+//Выведите значение атрибута id во втором input, используя . и [].
|
|
|
+
|
|
|
+console.log( body.children[0].children[3].attrs.id ) ;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// Parent
|
|
|
+// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
|
|
|
+
|
|
|
+{
|
|
|
+ const body = {
|
|
|
+ tagName : 'body',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName : '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',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName : 'div',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName : 'button',
|
|
|
+ attrs : {
|
|
|
+ id : 'ok'
|
|
|
+ },
|
|
|
+ children : ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName : 'button',
|
|
|
+ attrs : {
|
|
|
+ id : 'cancel'
|
|
|
+ },
|
|
|
+ children : 'Cancel'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ body.children[0].parent = body;
|
|
|
+ body.children[0].children[0].parent = body.children[0];
|
|
|
+ body.children[0].children[1].parent = body.children[0];
|
|
|
+ body.children[0].children[2].parent = body.children[0];
|
|
|
+ body.children[0].children[3].parent = body.children[0];
|
|
|
+ body.children[1].parent = body;
|
|
|
+ body.children[1].children[0].parent = body.children[1];
|
|
|
+ body.children[1].children[1].parent = body.children[1];
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//Change OK
|
|
|
+//Добавьте(или измените) любой введенный пользователем атрибут тэга <button id='ok'> из задания HTML Tree. Пользователь также вводит значение этого атрибута.
|
|
|
+
|
|
|
+{
|
|
|
+ const body = {
|
|
|
+ tagName : 'body',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName : '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',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName : 'div',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName : 'button',
|
|
|
+ attrs : {
|
|
|
+ id : 'ok'
|
|
|
+ },
|
|
|
+ children : ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName : 'button',
|
|
|
+ attrs : {
|
|
|
+ id : 'cancel'
|
|
|
+ },
|
|
|
+ children : 'Cancel'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ body.children[0].parent = body;
|
|
|
+ body.children[0].children[0].parent = body.children[0];
|
|
|
+ body.children[0].children[1].parent = body.children[0];
|
|
|
+ body.children[0].children[2].parent = body.children[0];
|
|
|
+ body.children[0].children[3].parent = body.children[0];
|
|
|
+ body.children[1].parent = body;
|
|
|
+ body.children[1].children[0].parent = body.children[1];
|
|
|
+ body.children[1].children[1].parent = body.children[1];
|
|
|
+
|
|
|
+ const buttonIdOk = prompt("введите атрибут <button id='ok'> кторый хотите добавить или изменить");
|
|
|
+ const buttonIdOkValue = prompt("введите значение атрибута " + buttonIdOk);
|
|
|
+ body.children[1].children[0].attrs[buttonIdOk] = buttonIdOkValue
|
|
|
+
|
|
|
+
|
|
|
+//Destructure
|
|
|
+//Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span, Выведите значения текста во второй кнопке и Выведите значение атрибута id во втором input.
|
|
|
+
|
|
|
+
|
|
|
+ const {children : [
|
|
|
+ {children : [
|
|
|
+ {children:[span]},
|
|
|
+ {},
|
|
|
+ {},
|
|
|
+ {attrs :{id:id}}
|
|
|
+ ]},
|
|
|
+ {children : [
|
|
|
+ {},
|
|
|
+ {children : button2}
|
|
|
+ ]}
|
|
|
+ ]} = body
|
|
|
+ console.log(span, button2, id)
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//Destruct array
|
|
|
+/*let arr = [1,2,3,4,5, "a", "b", "c"]
|
|
|
+напишите код, который используя деструктуризацию положит:
|
|
|
+четные числа в переменные even1, even2,
|
|
|
+нечетные в odd1, odd2, odd3,
|
|
|
+буквы в отдельный массив */
|
|
|
+
|
|
|
+{
|
|
|
+ let arr = [1,2,3,4,5, "a", "b", "c"];
|
|
|
+ const [odd1, even1, odd2, even2, odd3, ...Literals] = arr
|
|
|
+}
|
|
|
+
|
|
|
+//Destruct string
|
|
|
+/*let arr = [1, "abc"]
|
|
|
+напишите код, который используя деструктуризацию положит:
|
|
|
+число в переменную number
|
|
|
+букву a в переменную s1
|
|
|
+букву b в переменную s2
|
|
|
+букву c в переменную s3*/
|
|
|
+
|
|
|
+{
|
|
|
+ let arr = [1, "abc"]
|
|
|
+ const [number, [s1, s2, s3]] = arr
|
|
|
+}
|
|
|
+
|
|
|
+/*Destruct 2
|
|
|
+let obj = {name: 'Ivan',
|
|
|
+ surname: 'Petrov',
|
|
|
+ children: [{name: 'Maria'}, {name: 'Nikolay'}]}
|
|
|
+извлеките используя деструктуризацию имена детей в переменные name1 и name2*/
|
|
|
+{
|
|
|
+ let obj = {name: 'Ivan',
|
|
|
+ surname: 'Petrov',
|
|
|
+ children: [{name: 'Maria'}, {name: 'Nikolay'}]}
|
|
|
+
|
|
|
+ let {children:[{name: name1},{name: name2}]} = obj
|
|
|
+}
|
|
|
+
|
|
|
+/*Destruct 3
|
|
|
+let arr = [1,2,3,4, 5,6,7,10]
|
|
|
+извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length*/
|
|
|
+
|
|
|
+{
|
|
|
+ let arr = [1,2,3,4, 5,6,7,10];
|
|
|
+ let {1 : a,
|
|
|
+ 2 : b,
|
|
|
+ length : length} = arr;
|
|
|
+}
|
|
|
+
|
|
|
+/*Copy delete
|
|
|
+Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.*/
|
|
|
+
|
|
|
+{
|
|
|
+ const phone = {
|
|
|
+ brand: 'Xiaomi',
|
|
|
+ model: 'mi11',
|
|
|
+ year: '2021',
|
|
|
+ memory: '256'
|
|
|
+ }
|
|
|
+
|
|
|
+ const newObj = {...phone}
|
|
|
+}
|
|
|
+
|
|
|
+/*Currency real rate
|
|
|
+Ниже приведен код, который скачивает актуальную информацию о курсах валют. Скопируйте ссылку из него вставьте в браузер интереса ради. Реализуйте калькулятор обмена валют следующим образом:
|
|
|
+Пользователь вводит исходную валюту
|
|
|
+Пользователь вводит валюту, в которую происходит конвертация
|
|
|
+Пользователь вводит сумму в исходной валюте
|
|
|
+Пользовател видит результат конвертации*/
|
|
|
+{
|
|
|
+ let currencyStart = prompt('Пользователь вводит исходную валюту').toUpperCase();
|
|
|
+ let currencyFinish = prompt('Пользователь вводит валюту, в которую происходит конвертация').toUpperCase();
|
|
|
+ let summStart = +prompt('Пользователь вводит сумму в исходной валюте');
|
|
|
+ let rateStart
|
|
|
+ let rateFinish
|
|
|
+
|
|
|
+fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ //эта функция запускается когда данные скачиваются.
|
|
|
+ //остальной код работает РАНЬШЕ.
|
|
|
+ //только ТУТ есть переменная data со скачанными данными
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+ rateStart = data.rates[currencyStart];
|
|
|
+ console.log('rateStart' + rateStart);
|
|
|
+ rateFinish = data.rates[currencyFinish];
|
|
|
+ console.log('rateFinish' + rateFinish);
|
|
|
+ summStart / rateStart * rateFinish ? alert(summStart / rateStart * rateFinish) : alert('вы ввели какую -то дичь!')
|
|
|
+ })
|
|
|
+}
|
|
|
+/*Учтите, что пользователь может ввести какую-то дичь или название валют в неверном регистре*/
|
|
|
+
|
|
|
+//Currency drop down
|
|
|
+//Сделайте выпадающий список с названиями всех валют, используя код из прошлого задания и накопление HTML-тэгов в строковой переменной. Для выпадающих списков в HTML предусмотрены тэги <select> и <option>
|
|
|
+
|
|
|
+{
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+
|
|
|
+ console.log(data)
|
|
|
+ let select = '<select>'
|
|
|
+ for (let currency in data.rates){
|
|
|
+ select += '<option>' + currency + '</option>'
|
|
|
+ }
|
|
|
+ select += '</select>'
|
|
|
+ document.write(select)
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/*Currency table
|
|
|
+Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя заготовку из задания Currency real rate:
|
|
|
+
|
|
|
+Используйте только один запрос на сервер. Используйте расчет кросскурса для вычисления курса между любой парой валют*/
|
|
|
+
|
|
|
+{
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+
|
|
|
+ let table = '<table>'
|
|
|
+ table += '<tr><td></td>'
|
|
|
+ for (let currency in data.rates){
|
|
|
+ table += '<td>' + currency + '</td>'
|
|
|
+ }
|
|
|
+ table += '</tr>'
|
|
|
+
|
|
|
+
|
|
|
+ for (let currencyStart in data.rates){
|
|
|
+ table += '<tr><td>' + currencyStart + '</td>';
|
|
|
+
|
|
|
+
|
|
|
+ for (let currencyFinish in data.rates) {
|
|
|
+
|
|
|
+ table += `<td>${data.rates[currencyFinish] / data.rates[currencyStart]}</td>`
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ table += '</table>'
|
|
|
+ document.write(table)
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/*Form
|
|
|
+Напишите код, который их любого объекта создает форму HTML. Например для такого объекта:
|
|
|
+const car = {
|
|
|
+ "Name":"chevrolet chevelle malibu",
|
|
|
+ "Cylinders":8,
|
|
|
+ "Displacement":307,
|
|
|
+ "Horsepower":130,
|
|
|
+ "Weight_in_lbs":3504,
|
|
|
+ "Origin":"USA",
|
|
|
+ "in_production": false
|
|
|
+}
|
|
|
+На экране должна появиться форма из 7 строк, с названиями полей, взятыми из ключей и полями ввода соответствующих типов. Значениями полей ввода должны быть значения из объекта.
|
|
|
+<form>
|
|
|
+ <label>Name: <input type="text" value="chevrolet chevelle malibu"/></label>
|
|
|
+ <label>Cylinders: <input type="number" value="8"/></label>
|
|
|
+ <label>Displacement: <input type="number" value="307"/></label>
|
|
|
+ <label>Horsepower: <input type="number" value="130"/></label>
|
|
|
+ <label>Weight_in_lbs: <input type="number" value="3504"/></label>
|
|
|
+ <label>Origin: <input type="text" value="USA"/></label>
|
|
|
+ <label>in_production: <input type="checkbox" /></label>
|
|
|
+</form>
|
|
|
+Для создания правильного типа тэга input используйте оператор typeof Javascript:
|
|
|
+console.log(typeof 5)//number
|
|
|
+console.log(typeof "5") //string
|
|
|
+console.log(typeof (5 > 2)) //boolean
|
|
|
+
|
|
|
+Соответствие типов
|
|
|
+JS HTML
|
|
|
+number number
|
|
|
+string text
|
|
|
+boolean checkbox*/
|
|
|
+
|
|
|
+{
|
|
|
+ const car = {
|
|
|
+ "Name":"chevrolet chevelle malibu",
|
|
|
+ "Cylinders":8,
|
|
|
+ "Displacement":307,
|
|
|
+ "Horsepower":130,
|
|
|
+ "Weight_in_lbs":3504,
|
|
|
+ "Origin":"USA",
|
|
|
+ "in_production": false
|
|
|
+ }
|
|
|
+
|
|
|
+ let form = '<form>'
|
|
|
+
|
|
|
+ for (let label in car){
|
|
|
+ form += '<label>' + label +':';
|
|
|
+ let type = typeof car[label];
|
|
|
+ let typeHtml
|
|
|
+ if (type === "number") typeHtml = "number";
|
|
|
+ if (type === "string") typeHtml = "text";
|
|
|
+ if (type === "boolean") typeHtml = "checkbox";
|
|
|
+
|
|
|
+ form += `<input type="${typeHtml}" value="${car[label]}"/>`
|
|
|
+
|
|
|
+ form += '</label>';
|
|
|
+ }
|
|
|
+ document.write(form)
|
|
|
+}
|
|
|
+
|
|
|
+//Table
|
|
|
+/*
|
|
|
+Даден любой массив с объектами
|
|
|
+
|
|
|
+const persons = [
|
|
|
+ {
|
|
|
+ name: 'Мария',
|
|
|
+ fatherName: 'Ивановна',
|
|
|
+ surname: 'Иванова',
|
|
|
+ sex: 'female'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Николай',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ age: 15
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Петр',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ married: true
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+Сформировать таблицу (используя накопление тэгов HTML в строке):
|
|
|
+
|
|
|
+name fatherName surname sex age married
|
|
|
+Мария Ивановна Иванова female
|
|
|
+Николай Иванович Иванов 15
|
|
|
+Петр Иванович Иванов true
|
|
|
+
|
|
|
+Алгоритм решения
|
|
|
+Перед непосредственно формированием строк таблицы надо знать все колонки. Для этого нужно предварительно перебрать все объекты и извлечь из них все ключи, что бы сформировать общее множество ключей.
|
|
|
+Первый проход - поиск колонок
|
|
|
+Перебираем массив объектов, перебираем ключи каждого объекта и добавляем в массив колонок, если этого ключа еще там нет. Для примера выше массив получится в шесть элементов. На этом этапе строку HTML создавать еще рано.
|
|
|
+Заголовок
|
|
|
+Начинаем создание таблицы. Используя массив колонок формируем одну строку таблицы с заголовками
|
|
|
+Второй проход - отображение таблицы
|
|
|
+Перебираем массив объектов, перебираем массив колонок для каждого объекта, и используем название колонки как ключ*/
|
|
|
+
|
|
|
+{
|
|
|
+ const persons = [
|
|
|
+ {
|
|
|
+ name: 'Мария',
|
|
|
+ fatherName: 'Ивановна',
|
|
|
+ surname: 'Иванова',
|
|
|
+ sex: 'female'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Николай',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ age: 15
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Петр',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ married: true
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ let arrColumn = [];
|
|
|
+ for ( let obj of persons){
|
|
|
+
|
|
|
+ for (let key in obj ){
|
|
|
+ if ( !(arrColumn.includes(key)) ) {arrColumn.push(key)}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let table = '<table>';
|
|
|
+
|
|
|
+ table += '<tr>'
|
|
|
+ for (let th of arrColumn){
|
|
|
+ table += '<th>' + th + '</th>'
|
|
|
+ }
|
|
|
+ table += '</tr>'
|
|
|
+
|
|
|
+ for ( let obj of persons) {
|
|
|
+ table += '<tr>';
|
|
|
+
|
|
|
+ for (column of arrColumn){
|
|
|
+ table += '<td>'
|
|
|
+ if (obj[column]) { table += obj[column] }
|
|
|
+ table += '</td>'
|
|
|
+ }
|
|
|
+ table += '</tr>';
|
|
|
+ }
|
|
|
+
|
|
|
+ table += '</table>'
|
|
|
+ document.write(table)
|
|
|
+}
|
