|
|
@@ -0,0 +1,104 @@
|
|
|
+'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));
|
