|
|
@@ -1 +1,95 @@
|
|
|
-console.log('hello')
|
|
|
+"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: MouseEvent): 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}}}): void {
|
|
|
+// 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 inputCalc = document.querySelector('.input')
|
|
|
+console.log(inputCalc)
|
|
|
+let i;
|
|
|
+inputCalc.addEventListener('change', updateValue);
|
|
|
+
|
|
|
+function updateValue(e) {
|
|
|
+ i +=1
|
|
|
+ console.log(i)
|
|
|
+}
|
|
|
+console.log(i)
|
|
|
+// const calcWrapper = document.getElementsByClassName('calc')[0]
|
|
|
+// const handleCalc = (e) => {
|
|
|
+// console.log(parseFloat(inputCalc.value))
|
|
|
+// console.log(inputCalc)
|
|
|
+// e.preventDefault()
|
|
|
+// }
|
|
|
+// console.log(calcWrapper)
|
|
|
+// calcWrapper.addEventListener('submit',handleCalc)
|
