|
|
@@ -0,0 +1,647 @@
|
|
|
+// Материал
|
|
|
+// Просмотрите, запустите и внимательно проанализируйте все примеры кода из материала лекции.
|
|
|
+{
|
|
|
+ // сделано
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Literals
|
|
|
+// Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript.Например:
|
|
|
+{
|
|
|
+ const flover = {
|
|
|
+ type: 'palm',
|
|
|
+ height: 150,
|
|
|
+ color: 'green'
|
|
|
+ }
|
|
|
+
|
|
|
+ const dog = {
|
|
|
+ type: 'york',
|
|
|
+ sex: 'female',
|
|
|
+ color: 'red'
|
|
|
+ }
|
|
|
+
|
|
|
+ const wife = {
|
|
|
+ type: 'creator',
|
|
|
+ sex: 'female',
|
|
|
+ height: 165
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Literals expand
|
|
|
+// Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями.Обеспечьте ввод названия ключа и значения через prompt прямо в литерале объекта { }
|
|
|
+{
|
|
|
+ const flover = {
|
|
|
+ type: 'palm',
|
|
|
+ height: 150,
|
|
|
+ color: 'green',
|
|
|
+ [prompt('Введите первый параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра'),
|
|
|
+ [prompt('Введите второй параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра')
|
|
|
+ }
|
|
|
+
|
|
|
+ const dog = {
|
|
|
+ type: 'york',
|
|
|
+ sex: 'female',
|
|
|
+ color: 'red',
|
|
|
+ [prompt('Введите первый параметр для объекта "Собака"')]: prompt('Введите описание этого параметра'),
|
|
|
+ [prompt('Введите второй параметр для объекта "Собака"')]: prompt('Введите описание этого параметра')
|
|
|
+ }
|
|
|
+
|
|
|
+ const wife = {
|
|
|
+ type: 'creator',
|
|
|
+ sex: 'female',
|
|
|
+ height: 165,
|
|
|
+ [prompt('Введите первый параметр для объекта "Жена"')]: prompt('Введите описание этого параметра'),
|
|
|
+ [prompt('Введите второй параметр для объекта "Жена"')]: prompt('Введите описание этого параметра')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Literals copy
|
|
|
+// Пусть пользователь введет еще одно свойство в переменную.Вставьте в новый объект эту переменную.Скопируйте объект из предыдущего задания в новый объект.
|
|
|
+{
|
|
|
+ const flover = {
|
|
|
+ type: 'palm',
|
|
|
+ height: 150,
|
|
|
+ color: 'green'
|
|
|
+ }
|
|
|
+
|
|
|
+ const dog = {
|
|
|
+ type: 'york',
|
|
|
+ sex: 'female',
|
|
|
+ color: 'red'
|
|
|
+ }
|
|
|
+
|
|
|
+ const wife = {
|
|
|
+ type: 'creator',
|
|
|
+ sex: 'female',
|
|
|
+ height: 165
|
|
|
+ }
|
|
|
+
|
|
|
+ const newObj = { ...flover }
|
|
|
+ newObj[prompt('Введите имя ключа в поле ниже')] = prompt('Введите значение для указанного ранее ключа')
|
|
|
+ console.log(newObj)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Html tree
|
|
|
+// Сделайте декларативную JSON - структуру для тэгов выше, в которой:
|
|
|
+// каждый тэг будет объектом
|
|
|
+// имя тэга будет полем tagName
|
|
|
+// вложенные тэги будут в поле children
|
|
|
+// набор аттрибутов тэга будет в поле attrs.
|
|
|
+// Выведите значения текста во второй кнопке, используя.и[].
|
|
|
+// Выведите значение атрибута id во втором input, используя.и[].
|
|
|
+{
|
|
|
+ const dataInput = {
|
|
|
+ tagName: 'body',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ nameTag: '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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ['Cancel']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(dataInput.children[1].children[1].children[0])
|
|
|
+ console.log(dataInput.children[0].children[3].attrs.id)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Parent
|
|
|
+// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
|
|
|
+{
|
|
|
+ const dataInput = {
|
|
|
+ tagName: 'body',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ nameTag: '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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ['Cancel']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ dataInput.children[0].father = dataInput
|
|
|
+ dataInput.children[1].father = dataInput
|
|
|
+ dataInput.children[0].children[0].father = dataInput.children[0]
|
|
|
+ dataInput.children[0].children[1].father = dataInput.children[0]
|
|
|
+ dataInput.children[0].children[2].father = dataInput.children[0]
|
|
|
+ dataInput.children[0].children[3].father = dataInput.children[0]
|
|
|
+ dataInput.children[1].children[0].father = dataInput.children[1]
|
|
|
+ dataInput.children[1].children[1].father = dataInput.children[1]
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Change OK
|
|
|
+// Добавьте(или измените) любой введенный пользователем атрибут тэга < button id = 'ok' > из задания HTML Tree.Пользователь также вводит значение этого атрибута.
|
|
|
+{
|
|
|
+ const dataInput = {
|
|
|
+ tagName: 'body',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ nameTag: '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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ['Cancel']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ dataInput.children[1].children[0].attrs[prompt('ВВедите любой атрибут для тега "button"')] = prompt('Введите значение для этого атрибута')
|
|
|
+ console.log(dataInput.children[1].children[0].attrs)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Destructure
|
|
|
+// Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span, Выведите значения текста во второй кнопке и Выведите значение атрибута id во втором input.
|
|
|
+{
|
|
|
+ const dataInput = {
|
|
|
+ tagName: 'body',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ nameTag: '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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ nameTag: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ['OK']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ['Cancel']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ const { children: [{ children: [{ children: [span] }] }] } = dataInput
|
|
|
+ console.log(span)
|
|
|
+ const { children: [, { children: [, { children: [button] }] }] } = dataInput
|
|
|
+ console.log(button)
|
|
|
+ const { children: [{ children: [, , , { attrs: { id } }] }] } = dataInput
|
|
|
+ console.log(id)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Destruct array
|
|
|
+// напишите код, который используя деструктуризацию положит:
|
|
|
+// четные числа в переменные even1, even2,
|
|
|
+// нечетные в odd1, odd2, odd3,
|
|
|
+// буквы в отдельный массив
|
|
|
+{
|
|
|
+ let arr = [1, 2, 3, 4, 5, "a", "b", "c"]
|
|
|
+ const [odd1, even1, odd2, even2, odd3, ...letters] = arr
|
|
|
+ console.log(even1, even2, odd1, odd2, odd3, letters)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Destruct string
|
|
|
+// напишите код, который используя деструктуризацию положит:
|
|
|
+// число в переменную number
|
|
|
+// букву a в переменную s1
|
|
|
+// букву b в переменную s2
|
|
|
+// букву c в переменную s3
|
|
|
+{
|
|
|
+ let arr = [1, "abc"]
|
|
|
+ const [number, [s1, s2, s3]] = arr
|
|
|
+ console.log(number, s1, s2, s3)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Destruct 2
|
|
|
+// извлеките используя деструктуризацию имена детей в переменные name1 и name2
|
|
|
+{
|
|
|
+ let obj = {
|
|
|
+ name: 'Ivan',
|
|
|
+ surname: 'Petrov',
|
|
|
+ children: [{ name: 'Maria' }, { name: 'Nikolay' }]
|
|
|
+ }
|
|
|
+ const { children: [{ name: name1 }, { name: name2 }] } = obj
|
|
|
+ console.log(name1)
|
|
|
+ console.log(name2)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Destruct 3
|
|
|
+// извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length
|
|
|
+{
|
|
|
+ let arr = [1, 2, 3, 4, 5, 6, 7, 10]
|
|
|
+ const { 0: a, 1: b, length } = arr
|
|
|
+ console.log(a)
|
|
|
+ console.log(b)
|
|
|
+ console.log(length)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Copy delete
|
|
|
+// Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.
|
|
|
+{
|
|
|
+ const flover = {
|
|
|
+ type: 'palm',
|
|
|
+ height: 150,
|
|
|
+ color: 'green',
|
|
|
+ [prompt('Введите первый параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра'),
|
|
|
+ [prompt('Введите второй параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра')
|
|
|
+ }
|
|
|
+ const { type, height, color, ...rest } = flover
|
|
|
+ const floverCopy = { type, height, color }
|
|
|
+ console.log(floverCopy)
|
|
|
+ console.log(flover === floverCopy)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Currency real rate
|
|
|
+// Ниже приведен код, который скачивает актуальную информацию о курсах валют.Скопируйте ссылку из него вставьте в браузер интереса ради.Реализуйте калькулятор обмена валют следующим образом:
|
|
|
+// Пользователь вводит исходную валюту
|
|
|
+// Пользователь вводит валюту, в которую происходит конвертация
|
|
|
+// Пользователь вводит сумму в исходной валюте
|
|
|
+// Пользовател видит результат конвертации
|
|
|
+// Учтите, что пользователь может ввести какую - то дичь или название валют в неверном регистре
|
|
|
+{
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ let startCurrency = prompt('Введите исходную валюту').toUpperCase()
|
|
|
+ startCurrency = startCurrency in data.rates ? startCurrency : alert('такая валюта не поддерживается')
|
|
|
+ let finishCurrency = prompt('Введите конечную валюту').toUpperCase()
|
|
|
+ finishCurrency = finishCurrency in data.rates ? finishCurrency : alert('такая валюта не поддерживается')
|
|
|
+ const summ = prompt('Введите сумму для обмена в исходной валюте')
|
|
|
+
|
|
|
+ const { rates: { [startCurrency]: startCurrencValue } } = data
|
|
|
+ const { rates: { [finishCurrency]: finishCurrencValue } } = data
|
|
|
+ const result = (startCurrency === 'USD' ? summ * finishCurrencValue / startCurrencValue : summ * finishCurrencValue / startCurrencValue).toFixed(2)
|
|
|
+ alert(isNaN(result) ? 'Вы ввели неправильно один или несколько араметров' : result)
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Currency drop down
|
|
|
+// Сделайте выпадающий список с названиями всех валют, используя код из прошлого задания и накопление HTML - тэгов в строковой переменной.Для выпадающих списков в HTML предусмотрены тэги < select > и < option >
|
|
|
+{
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ const currencies = Object.keys(data.rates)
|
|
|
+ let str = '<select>'
|
|
|
+ for (let currency of currencies) {
|
|
|
+ str += `<option>${currency}</option>`
|
|
|
+ }
|
|
|
+ str += '</select>'
|
|
|
+ document.write(str)
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Currency table
|
|
|
+// Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя заготовку из задания Currency real rate:
|
|
|
+// Используйте только один запрос на сервер.Используйте расчет кросскурса для вычисления курса между любой парой валют
|
|
|
+{
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ // создали массив заголовков-названий валют
|
|
|
+ const currencies = []
|
|
|
+ for (const currency in data.rates) {
|
|
|
+ currencies.push(currency)
|
|
|
+ }
|
|
|
+ // создали строку заголовков валют
|
|
|
+ let str = `<table style="text-align: center; border-collapse: collapse">`
|
|
|
+ str += `<tr><td></td>`
|
|
|
+ for (const currency of currencies) {
|
|
|
+ str += `<td style="padding: 5px 10px;background-color: grey;">${currency}</td>`
|
|
|
+ }
|
|
|
+ str += `</tr>`
|
|
|
+
|
|
|
+ // создали таблицу с кросс-курсами
|
|
|
+ let i = 0
|
|
|
+ for (const [key, value] of Object.entries(data.rates)) {
|
|
|
+ str += (i % 2) ? `<tr style = "background-color:#0000001f">` : `<tr>`
|
|
|
+ i++
|
|
|
+ // str += `<tr>`
|
|
|
+ str += `<td style="background-color: grey;">${key}</td>`
|
|
|
+ for (const num of Object.values(data.rates)) {
|
|
|
+ str += `<td style="padding: 5px 10px;">${(num / value).toFixed(2)}</td>`
|
|
|
+ }
|
|
|
+ str += `</tr>`
|
|
|
+ }
|
|
|
+
|
|
|
+ document.write(str)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Form
|
|
|
+// Напишите код, который их любого объекта создает форму HTML.Например для такого объекта
|
|
|
+// На экране должна появиться форма из 7 строк, с названиями полей, взятыми из ключей и полями ввода соответствующих типов.Значениями полей ввода должны быть значения из объекта.
|
|
|
+// Для создания правильного типа тэга input используйте оператор typeof Javascript:
|
|
|
+{
|
|
|
+ const car = {
|
|
|
+ "Name": "chevrolet chevelle malibu",
|
|
|
+ "Cylinders": 8,
|
|
|
+ "Displacement": 307,
|
|
|
+ "Horsepower": 130,
|
|
|
+ "Weight_in_lbs": 3504,
|
|
|
+ "Origin": "USA",
|
|
|
+ "in_production": false
|
|
|
+ }
|
|
|
+ let str = `<form>`
|
|
|
+ for (let [key, value] of Object.entries(car)) {
|
|
|
+ str += `<label>${key}: <input type="${typeof value === 'string' ? 'text' : typeof value === 'number' ? 'number' : 'checkbox'}" value="${value}" /></label></br></br>`
|
|
|
+ }
|
|
|
+ str += `</form>`
|
|
|
+ document.write(str)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Table
|
|
|
+// Даден любой массив с объектами
|
|
|
+// Сформировать таблицу(используя накопление тэгов HTML в строке):
|
|
|
+{
|
|
|
+ const persons = [
|
|
|
+ {
|
|
|
+ name: 'Мария',
|
|
|
+ fatherName: 'Ивановна',
|
|
|
+ surname: 'Иванова',
|
|
|
+ sex: 'female'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Николай',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ age: 15
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Петр',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ married: true
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ // Первый проход - поиск колонок
|
|
|
+ const keys = []
|
|
|
+ for (const child of persons) {
|
|
|
+ for (const key in child) {
|
|
|
+ if (!keys.includes(key)) {
|
|
|
+ keys.push(key);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Заголовок
|
|
|
+ let str = `<table style="border-collapse: collapse; text-align: center;">`
|
|
|
+ str += `<tr style="background-color: grey;">`
|
|
|
+ for (let key of keys) {
|
|
|
+ str += `<td style="border: 1px solid black; padding: 5px 10px">${key}</td>`
|
|
|
+ }
|
|
|
+ str += `</tr>`
|
|
|
+
|
|
|
+ // Второй проход - отображение таблицы
|
|
|
+ for (const child of persons) {
|
|
|
+ str += `<tr>`
|
|
|
+ for (const num of keys) {
|
|
|
+ str += `<td style="border: 1px solid black; padding: 5px 10px">${(Object.keys(child)).includes(num) ? child[num] : ''}</td>`
|
|
|
+ }
|
|
|
+ str += `</tr>`
|
|
|
+ }
|
|
|
+
|
|
|
+ str += `</table>`
|
|
|
+ document.write(str)
|
|
|
+}
|
|
|
+
|
|
|
+// Тестовые данные
|
|
|
+
|
|
|
+{
|
|
|
+ const persons = [
|
|
|
+ {
|
|
|
+ "Name": "chevrolet chevelle malibu",
|
|
|
+ "Cylinders": 8,
|
|
|
+ "Displacement": 307,
|
|
|
+ "Horsepower": 130,
|
|
|
+ "Weight_in_lbs": 3504,
|
|
|
+ "Origin": "USA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "Name": "buick skylark 320",
|
|
|
+ "Miles_per_Gallon": 15,
|
|
|
+ "Cylinders": 8,
|
|
|
+ "Displacement": 350,
|
|
|
+ "Horsepower": 165,
|
|
|
+ "Weight_in_lbs": 3693,
|
|
|
+ "Acceleration": 11.5,
|
|
|
+ "Year": "1970-01-01",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "Miles_per_Gallon": 18,
|
|
|
+ "Cylinders": 8,
|
|
|
+ "Displacement": 318,
|
|
|
+ "Horsepower": 150,
|
|
|
+ "Weight_in_lbs": 3436,
|
|
|
+ "Year": "1970-01-01",
|
|
|
+ "Origin": "USA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "Name": "amc rebel sst",
|
|
|
+ "Miles_per_Gallon": 16,
|
|
|
+ "Cylinders": 8,
|
|
|
+ "Displacement": 304,
|
|
|
+ "Horsepower": 150,
|
|
|
+ "Year": "1970-01-01",
|
|
|
+ "Origin": "USA"
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ const keys = []
|
|
|
+ for (const child of persons) {
|
|
|
+ for (const key in child) {
|
|
|
+ if (!keys.includes(key)) {
|
|
|
+ keys.push(key);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let str = `<table style="border-collapse: collapse; text-align: center;">`
|
|
|
+ str += `<tr style="background-color: grey;">`
|
|
|
+ for (let key of keys) {
|
|
|
+ str += `<td style="border: 1px solid black; padding: 5px 10px">${key}</td>`
|
|
|
+ }
|
|
|
+ str += `</tr>`
|
|
|
+
|
|
|
+ for (const child of persons) {
|
|
|
+ str += `<tr>`
|
|
|
+ for (const num of keys) {
|
|
|
+ str += `<td style="border: 1px solid black; padding: 5px 10px">${(Object.keys(child)).includes(num) ? child[num] : ''}</td>`
|
|
|
+ }
|
|
|
+ str += `</tr>`
|
|
|
+ }
|
|
|
+
|
|
|
+ str += `</table>`
|
|
|
+ document.write(str)
|
|
|
+}
|
