|
|
@@ -1,104 +1 @@
|
|
|
'use strict';
|
|
|
-//DOM: ДЗ
|
|
|
-//Таблица умножения
|
|
|
-//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
|
|
|
-//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:
|
|
|
-
|
|
|
-const table = document.createElement('table');
|
|
|
-for (let i = 0; i < 10; i++) {
|
|
|
- const tr = document.createElement('tr');
|
|
|
- for (let j = 1; j < 11; j++) {
|
|
|
- const td = document.createElement('td');
|
|
|
- td.id = String(i) + String(j);
|
|
|
- td.dataset.col = String(i);
|
|
|
- if (j === 10) {
|
|
|
- td.textContent = String(i);
|
|
|
- tr.prepend(td);
|
|
|
- continue;
|
|
|
- }
|
|
|
- td.textContent = String((i === 0 ? 1 : i) * j);
|
|
|
- tr.append(td);
|
|
|
- }
|
|
|
- table.append(tr);
|
|
|
-}
|
|
|
-document.body.append(table);
|
|
|
-
|
|
|
-//Подсветить ячейку
|
|
|
-//над которой находится курсор мыши. Используйте события mouseover и mouseout,
|
|
|
-//и style.backgroundColor для подсветки.
|
|
|
-//Читкоды:
|
|
|
-//в обработчик события в качестве this передается элемент, на котором событие произошло;
|
|
|
-//Внимание: :hover это читерство :-
|
|
|
-// let tdId;
|
|
|
-
|
|
|
-// table.onmouseover = function (e): void {
|
|
|
-// const {tagName,id} = e.target
|
|
|
-// const oldTd = document.getElementById(tdId)
|
|
|
-// if (oldTd) oldTd.style.backgroundColor = 'grey'
|
|
|
-// if (tagName === "TD") {
|
|
|
-// const td = document.getElementById(id)
|
|
|
-// td.style.backgroundColor = 'green'
|
|
|
-// tdId = id
|
|
|
-// } //event - это объект с информацией о событии,
|
|
|
-// //передается первым параметром в обработчик события.
|
|
|
-// }
|
|
|
-
|
|
|
-// Подсветить строку и столбец,
|
|
|
-//в которой находится подсвеченная ячейка. Используйте parentElement
|
|
|
-//(родительский элемент элемента DOM), и список его детей: children.
|
|
|
-//Читкоды:
|
|
|
-//в обработчик события в качестве this передается элемент, на котором событие произошло;
|
|
|
-//у td есть свойство cellIndex, в котором лежит номер ячейки;
|
|
|
-//у tr, аналогично есть свойство rowIndex - номер строки;
|
|
|
-
|
|
|
-table.onmouseover = function ({
|
|
|
- target: {
|
|
|
- cellIndex,
|
|
|
- tagName,
|
|
|
- id,
|
|
|
- dataset: { col },
|
|
|
- },
|
|
|
-}) {
|
|
|
- this.childNodes.forEach((element) => {
|
|
|
- element.childNodes.forEach((td) => {
|
|
|
- if (td.cellIndex === cellIndex) {
|
|
|
- td.style.backgroundColor = 'yellow';
|
|
|
- } else if (td.dataset.col === col) {
|
|
|
- td.style.backgroundColor = 'orange';
|
|
|
- } else {
|
|
|
- td.style.backgroundColor = 'grey';
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- if (tagName === 'TD')
|
|
|
- document.getElementById(id).style.backgroundColor = 'green';
|
|
|
-};
|
|
|
-
|
|
|
-//Calc
|
|
|
-//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input
|
|
|
-//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
|
|
|
-//Для запуска раcчета используйте, например < button id = "calc" > и
|
|
|
-//Также можете создать поле ввода для результата и записывать результат в value этого поля.
|
|
|
-
|
|
|
-const btnSubmit = document.getElementById('submitCalc');
|
|
|
-const resultP = document.getElementById('result');
|
|
|
-
|
|
|
-btnSubmit.addEventListener('click', updateValue);
|
|
|
-function updateValue(e) {
|
|
|
- const values = e.target.parentNode.children;
|
|
|
- resultP.textContent = String(+values[0].value * +values[1].value);
|
|
|
-}
|
|
|
-
|
|
|
-//Calc Live
|
|
|
-//Сделайте расчет живым, т. е. обновляющимся по событию oninput каждого поля ввода,
|
|
|
-//влияющего на результат.Нет смысла копировать одну и ту же калькуляцию,
|
|
|
-//поэтому вначале задекларируйте функцию расчета, а потом присвойте её в
|
|
|
-//качестве обработчика события в каждом поле ввода:
|
|
|
-
|
|
|
-const firstInput = document.getElementById('first');
|
|
|
-const secondInput = document.getElementById('second');
|
|
|
-const hadleInputs = (e, inputValue) => {
|
|
|
- resultP.textContent = String(+e.target.value * +inputValue.value);
|
|
|
-};
|
|
|
-firstInput.addEventListener('change', (e) => hadleInputs(e, secondInput));
|
|
|
-secondInput.addEventListener('change', (e) => hadleInputs(e, firstInput));
|
