From 76555d27a4b2f16a8fcaddf7097e0531d19d340f Mon Sep 17 00:00:00 2001 From: OkunElya Date: Thu, 26 Feb 2026 20:12:56 +1000 Subject: [PATCH] Faaaah (copy to edit) --- lab1/CSS/style.css | 14 ++ lab1/JavaScript/data.js | 514 ++++++++++++++++++++++++++++++++++++++ lab1/JavaScript/filter.js | 84 +++++++ lab1/JavaScript/main.js | 23 ++ lab1/JavaScript/table.js | 41 +++ lab1/index.html | 54 ++++ lab1/temp.js | 32 +++ 7 files changed, 762 insertions(+) create mode 100644 lab1/CSS/style.css create mode 100644 lab1/JavaScript/data.js create mode 100644 lab1/JavaScript/filter.js create mode 100644 lab1/JavaScript/main.js create mode 100644 lab1/JavaScript/table.js create mode 100644 lab1/index.html create mode 100644 lab1/temp.js diff --git a/lab1/CSS/style.css b/lab1/CSS/style.css new file mode 100644 index 0000000..812a751 --- /dev/null +++ b/lab1/CSS/style.css @@ -0,0 +1,14 @@ +th{ + padding: 5px; + background-color: gray; +} + +td{ + padding: 5px; + background-color: lightgray; +} + +th, td ,table{ + border: solid black thin; + border-collapse: collapse; +} diff --git a/lab1/JavaScript/data.js b/lab1/JavaScript/data.js new file mode 100644 index 0000000..1639a52 --- /dev/null +++ b/lab1/JavaScript/data.js @@ -0,0 +1,514 @@ +buildings= [ + { + "Название": "Бурдж-Халифа", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2010, + "Высота": 828 + }, + { + "Название": "Варшавская радиомачта", + "Тип": "Антенная мачта", + "Страна": "Польша", + "Город": "Константинов", + "Год": 1974, + "Высота": 646.38 + }, + { + "Название": "Tokyo Skytree", + "Тип": "Бетонная башня", + "Страна": "Япония", + "Город": "Токио", + "Год": 2012, + "Высота": 634 + }, + { + "Название": "Шанхайская башня", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 2013, + "Высота": 632 + }, + { + "Название": "Телерадиомачта KVLY-TV", + "Тип": "Радиомачта", + "Страна": "США", + "Город": "Бланчард", + "Год": 1963, + "Высота": 629 + }, + { + "Название": "Телебашня Гуанчжоу", + "Тип": "Гиперболоидная башня", + "Страна": "КНР", + "Город": "Гуанчжоу", + "Год": 2009, + "Высота": 600 + }, + { + "Название": "Международный финансовый центр Пинань", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 2017, + "Высота": 600 + }, + { + "Название": "Lotte World Tower", + "Тип": "Небоскрёб", + "Страна": "Южная Корея", + "Город": "Сеул", + "Год": 2017, + "Высота": 555 + }, + { + "Название": "Си-Эн Тауэр", + "Тип": "Бетонная башня", + "Страна": "Канада", + "Город": "Торонто", + "Год": 1976, + "Высота": 553 + }, + { + "Название": "Останкинская башня", + "Тип": "Бетонная башня", + "Страна": "Россия", + "Город": "Москва", + "Год": 1967, + "Высота": 540.1 + }, + { + "Название": "Уиллис-тауэр", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Чикаго", + "Год": 1974, + "Высота": 527.3 + }, + { + "Название": "Тайбэй 101", + "Тип": "Небоскрёб", + "Страна": "Тайвань", + "Город": "Тайбэй", + "Год": 2004, + "Высота": 509.2 + }, + { + "Название": "Шанхайский всемирный финансовый центр", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 2008, + "Высота": 492 + }, + { + "Название": "Международный коммерческий центр", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 2009, + "Высота": 484 + }, + { + "Название": "Восточная жемчужина", + "Тип": "Бетонная башня", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 1994, + "Высота": 467.9 + }, + { + "Название": "Лахта-центр", + "Тип": "Небоскрёб", + "Страна": "Россия", + "Город": "Санкт-Петербург", + "Год": 2018, + "Высота": 462 + }, + { + "Название": "Landmark 81", + "Тип": "Небоскрёб", + "Страна": "Вьетнам", + "Город": "Хошимин", + "Год": 2018, + "Высота": 461.2 + }, + { + "Название": "875 Норт-Мичиган-авеню", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Чикаго", + "Год": 1969, + "Высота": 457.2 + }, + { + "Название": "Петронас. башня 1 и 2", + "Тип": "Небоскрёб", + "Страна": "Малайзия", + "Город": "Куала-Лумпур", + "Год": 1998, + "Высота": 452 + }, + { + "Название": "Финансовый центр Наньцзин-Гринлэнд", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Нанкин", + "Год": 2009, + "Высота": 450 + }, + { + "Название": "Эмпайр-стейт-билдинг", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Нью-Йорк", + "Год": 1931, + "Высота": 448.7 + }, + { + "Название": "Международный финансовый центр. башня зап.", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Гуанчжоу", + "Год": 2010, + "Высота": 437.5 + }, + { + "Название": "Kingkey 100", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 2011, + "Высота": 439.8 + }, + { + "Название": "Бордже Милад", + "Тип": "Бетонная башня", + "Страна": "Иран", + "Город": "Тегеран", + "Год": 2003, + "Высота": 435 + }, + { + "Название": "Парк-авеню. 432", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Нью-Йорк", + "Год": 2015, + "Высота": 425.5 + }, + { + "Название": "Международная гостиница и башня Трампа", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Чикаго", + "Год": 2009, + "Высота": 423.4 + }, + { + "Название": "Менара Куала-Лумпур", + "Тип": "Бетонная башня", + "Страна": "Малайзия", + "Город": "Куала-Лумпур", + "Год": 1995, + "Высота": 421 + }, + { + "Название": "Цзинь Мао", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 1999, + "Высота": 420.5 + }, + { + "Название": "Экибастузская ГРЭС-2", + "Тип": "Дымовая труба", + "Страна": "Казахстан", + "Город": "Экибастуз", + "Год": 1987, + "Высота": 419.7 + }, + { + "Название": "Международный финансовый центр", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 2003, + "Высота": 415.8 + }, + { + "Название": "Тяньцзиньская телебашня", + "Тип": "Бетонная башня", + "Страна": "КНР", + "Город": "Тяньцзинь", + "Год": 1991, + "Высота": 415.2 + }, + { + "Название": "Башня Аль-Хамра", + "Тип": "Небоскрёб", + "Страна": "Кувейт", + "Город": "Кувейт", + "Год": 2010, + "Высота": 412 + }, + { + "Название": "Пекинская телебашня", + "Тип": "Бетонная башня", + "Страна": "КНР", + "Город": "Пекин", + "Год": 1992, + "Высота": 405 + }, + { + "Название": "Башня CITIC", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Гуанчжоу", + "Год": 1997, + "Высота": 391.1 + }, + { + "Название": "Киевская телебашня", + "Тип": "Решётчатая мачта", + "Страна": "Украина", + "Город": "Киев", + "Год": 1973, + "Высота": 385 + }, + { + "Название": "Башня Сёньхин", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 1996, + "Высота": 384 + }, + { + "Название": "Абу-Даби Плаза", + "Тип": "Небоскрёб", + "Страна": "Казахстан", + "Город": "Астана", + "Год": 2015, + "Высота": 382 + }, + { + "Название": "Бурдж-Мохаммед-бин-Рашид", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Абу-Даби", + "Год": 2014, + "Высота": 381 + }, + { + "Название": "Inco Superstack", + "Тип": "Дымовая труба", + "Страна": "Канада", + "Город": "Copper Cliff", + "Год": 1971, + "Высота": 380 + }, + { + "Название": "Тантекс-Скай-Тауэр", + "Тип": "Небоскрёб", + "Страна": "Тайвань", + "Город": "Гаосюн", + "Год": 1997, + "Высота": 378 + }, + { + "Название": "JW Marriott Marquis Dubai. 1 и 2", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2010, + "Высота": 376 + }, + { + "Название": "Ташкентская телебашня", + "Тип": "Башня", + "Страна": "Узбекистан", + "Город": "Ташкент", + "Год": 1985, + "Высота": 374.9 + }, + { + "Название": "Башня Федерация «Восток»", + "Тип": "Небоскрёб", + "Страна": "Россия", + "Город": "Москва", + "Год": 2016, + "Высота": 374 + }, + { + "Название": "Сентрал-плаза", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 1992, + "Высота": 374 + }, + { + "Название": "Башня Освобождения", + "Тип": "Бетонная башня", + "Страна": "Кувейт", + "Город": "Кувейт", + "Год": 1996, + "Высота": 372 + }, + { + "Название": "Телебашня «Коктобе»", + "Тип": "Башня", + "Страна": "Казахстан", + "Город": "Алматы", + "Год": 1983, + "Высота": 371.5 + }, + { + "Название": "Дымовая труба электростанции", + "Тип": "Дымовая труба", + "Страна": "США", + "Город": "Homer City", + "Год": 1977, + "Высота": 371 + }, + { + "Название": "Дымовая труба Берёзовской ГРЭС", + "Тип": "Дымовая труба", + "Страна": "Россия", + "Город": "Шарыпово", + "Год": 1985, + "Высота": 370 + }, + { + "Название": "Рижская телебашня", + "Тип": "Бетонная башня", + "Страна": "Латвия", + "Город": "Рига", + "Год": 1987, + "Высота": 368.5 + }, + { + "Название": "Берлинская телебашня", + "Тип": "Бетонная башня", + "Страна": "Германия", + "Город": "Берлин", + "Год": 1969, + "Высота": 368 + }, + { + "Название": "Дымовая труба электростанции.", + "Тип": "Дымовая труба", + "Страна": "США", + "Город": "Маундсвилл", + "Год": 1968, + "Высота": 367.6 + }, + { + "Название": "Башня Банка Китая", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 1990, + "Высота": 367.4 + }, + { + "Название": "Башня Банка Америки", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Нью-Йорк", + "Год": 2008, + "Высота": 366 + }, + { + "Название": "Башня Алмас", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2008, + "Высота": 363 + }, + { + "Название": "Дымовая труба электростанции в Трбовле", + "Тип": "Дымовая труба", + "Страна": "Словения", + "Город": "Трбовле", + "Год": 1976, + "Высота": 360 + }, + { + "Название": "Endesa Termic ", + "Тип": "Дымовая труба", + "Страна": "Испания", + "Город": "Ферроль", + "Год": 1974, + "Высота": 356 + }, + { + "Название": "SEG Plaza", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 2000, + "Высота": 355.8 + }, + { + "Название": "First Canadian Place", + "Тип": "Небоскрёб", + "Страна": "Канада", + "Город": "Торонто", + "Год": 1976, + "Высота": 355 + }, + { + "Название": "Эмиратская офисная башня", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2000, + "Высота": 354.6 + }, + { + "Название": "ОКО Южная башня", + "Тип": "Небоскрёб", + "Страна": "Россия", + "Город": "Москва", + "Год": 2015, + "Высота": 354 + }, + { + "Название": "Виннцкая телемачта", + "Тип": "Радиомачта", + "Страна": "Украина", + "Город": "Винница", + "Год": 1961, + "Высота": 354 + }, + { + "Название": "Медеплавильный завод", + "Тип": "Дымовая труба", + "Страна": "Румыния", + "Город": "Бая-Маре", + "Год": 1995, + "Высота": 351.5 + }, + { + "Название": "Стратосфера Лас-Вегас", + "Тип": "Бетонная башня", + "Страна": "США", + "Город": "Лас-Вегас", + "Год": 1996, + "Высота": 350.2 + }, + { + "Название": "Дымовая труба Сырдарьинской электростанции", + "Тип": "Дымовая труба", + "Страна": "Узбекистан", + "Город": "Сырдарья", + "Год": 1980, + "Высота": 350 + } +] \ No newline at end of file diff --git a/lab1/JavaScript/filter.js b/lab1/JavaScript/filter.js new file mode 100644 index 0000000..37dd564 --- /dev/null +++ b/lab1/JavaScript/filter.js @@ -0,0 +1,84 @@ +const correspond = { + "Название": "structure", + "Тип": "category", + "Страна": "country", + "Город": "city", + "Год": ["yearFrom", "yearTo"], + "Высота": ["heightFrom", "heightTo"] +} + + +/* Структура возвращаемого ассоциативного массива: +{ + input_id: input_value, + ... +} +*/ +const dataFilter = (dataForm) => { + let dictFilter = {}; + + // перебираем все элементы формы с фильтрами + for (const item of dataForm.elements) { + + // получаем значение элемента + let valInput = item.value; + + // если поле типа text - приводим его значение к нижнему регистру + if (item.type === "text") { + valInput = valInput.toLowerCase(); + } + + if (item.type === "number"){ + if (valInput.value === ""){ + if(valInput.name.includes("From")){ + valInput = -Infinity; + } + else{ + valInput = Infinity; + } + } + valInput = Number(valInput); + } + // формируем очередной элемент ассоциативного массива + dictFilter[item.id] = valInput; + } + return dictFilter; +} + + +// фильтрация таблицы +const filterTable = (data, idTable, dataForm) =>{ + + // получаем данные из полей формы + const datafilter = dataFilter(dataForm); + + // выбираем данные соответствующие фильтру и формируем таблицу из них + let tableFilter = data.filter(item => { + + /* в этой переменной будут "накапливаться" результаты сравнения данных + с параметрами фильтра */ + let result = true; + + // строка соответствует фильтру, если сравнение всех значения из input + // со значением ячейки очередной строки - истина + Object.entries(item).map(([key, val]) => { + + // текстовые поля проверяем на вхождение + if (typeof val == 'string') { + result &&= val.toLowerCase().includes(datafilter[correspond[key]]) + } + + if (typeof val == 'number') { + result &&= datafilter[correspond[key]+"From"]<=Number(val)&& datafilter[correspond[key]+"To"]>=Number(val) + } + // САМОСТОЯТЕЛЬНО проверить числовые поля на принадлежность интервалу + }); + + return result; + }); + + // САМОСТОЯТЕЛЬНО вызвать функцию, которая удаляет все строки таблицы с id=idTable + clearTable(); + // показать на странице таблицу с отфильтрованными строками + createTable(tableFilter, idTable); +} \ No newline at end of file diff --git a/lab1/JavaScript/main.js b/lab1/JavaScript/main.js new file mode 100644 index 0000000..e55046d --- /dev/null +++ b/lab1/JavaScript/main.js @@ -0,0 +1,23 @@ +document.addEventListener("DOMContentLoaded", function () { + doInit() +}) + +function doInit() { + createTable(buildings, 'list'); + const clearFiltersButton = document.getElementById("clearFiltersButton") + clearFiltersButton.addEventListener("click", (event) => { + clearTable("list") + + }) + + + const applyFiltersButton = document.getElementById("applyFiltersButton") + applyFiltersButton.addEventListener("click", (event) => { + filterTable() + + }) + + + +} + diff --git a/lab1/JavaScript/table.js b/lab1/JavaScript/table.js new file mode 100644 index 0000000..02a9a51 --- /dev/null +++ b/lab1/JavaScript/table.js @@ -0,0 +1,41 @@ +const createTable = (data, idTable) => { + const table = document.getElementById(idTable); + const header = Object.keys(data[0]); + + /* создание шапки таблицы */ + const headerRow = createHeaderRow(header); + table.append(headerRow); + + /* создание тела таблицы */ + const bodyRows = createBodyRows(data); + table.append(bodyRows); +}; + +const clearTable = (idTable) => { + const table = document.getElementById(idTable); + table.removeChild(table.children[1]); +} + +const createHeaderRow = (headers) => { + const tr = document.createElement('tr'); + headers.forEach(header => { + const th = document.createElement('th'); + th.innerHTML = header; + tr.append(th); + }); + return tr; +}; + +const createBodyRows = (rows) =>{ + const body = document.createElement('tbody'); + rows.forEach(row =>{ + const rowElement = document.createElement('tr'); + for (let key in row) { + const td = document.createElement('td'); + td.innerHTML = row[key]; + rowElement.appendChild(td); + } + body.appendChild(rowElement); + }) + return body; +} diff --git a/lab1/index.html b/lab1/index.html new file mode 100644 index 0000000..d1e431c --- /dev/null +++ b/lab1/index.html @@ -0,0 +1,54 @@ + + + + + + Фильтры и сортировка + + + + + + + + + +
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + от + до +

+

+ + от + до +

+ + +
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/lab1/temp.js b/lab1/temp.js new file mode 100644 index 0000000..b9be103 --- /dev/null +++ b/lab1/temp.js @@ -0,0 +1,32 @@ +// const arr = [1, 2, 3, 4, 5]; +// const replaced = arr +// replaced.splice(2,1,100) +// const removed = [...replaced]; +// removed.splice(3,1); +// const updated = [...removed]; +// updated.splice(3,0,200); +// console.log(updated); + +const arr = [2, 2, 4, 1, 6, 12] + +// const ret = arr.map((val, i, array) => { + +// return array.slice(Math.max(0, i - 1), Math.min(array.length - 1, i + 2)) / +// (Math.max(0, i - 1)-Math.min(array.length - 1, i + 1)) +// }) + +// console.log(ret) + +// let min = arr.reduce((acc,x)=>x