homework.ts 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. "use strict";
  2. //DOM: ДЗ
  3. //Таблица умножения
  4. //Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
  5. //вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:
  6. // const table = document.createElement('table')
  7. // for (let i = 0; i < 10; i++){
  8. // const tr = document.createElement('tr')
  9. // for (let j = 1; j < 11; j++){
  10. // const td = document.createElement('td')
  11. // td.id = String(i) + String(j)
  12. // td.dataset.col = String(i)
  13. // if (j === 10) {
  14. // td.textContent = String(i)
  15. // tr.prepend(td)
  16. // continue
  17. // }
  18. // td.textContent = String((i === 0 ? 1 : i) * j)
  19. // tr.append(td)
  20. // }
  21. // table.append(tr)
  22. // }
  23. // document.body.append(table)
  24. //Подсветить ячейку
  25. //над которой находится курсор мыши. Используйте события mouseover и mouseout,
  26. //и style.backgroundColor для подсветки.
  27. //Читкоды:
  28. //в обработчик события в качестве this передается элемент, на котором событие произошло;
  29. //Внимание: :hover это читерство :-
  30. // let tdId;
  31. // table.onmouseover = function (e: MouseEvent): void {
  32. // const {tagName,id} = e.target
  33. // const oldTd = document.getElementById(tdId)
  34. // if (oldTd) oldTd.style.backgroundColor = 'grey'
  35. // if (tagName === "TD") {
  36. // const td = document.getElementById(id)
  37. // td.style.backgroundColor = 'green'
  38. // tdId = id
  39. // } //event - это объект с информацией о событии,
  40. // //передается первым параметром в обработчик события.
  41. // }
  42. // Подсветить строку и столбец,
  43. //в которой находится подсвеченная ячейка. Используйте parentElement
  44. //(родительский элемент элемента DOM), и список его детей: children.
  45. //Читкоды:
  46. //в обработчик события в качестве this передается элемент, на котором событие произошло;
  47. //у td есть свойство cellIndex, в котором лежит номер ячейки;
  48. //у tr, аналогично есть свойство rowIndex - номер строки;
  49. // table.onmouseover = function ({target : {cellIndex,tagName, id , dataset : {col}}}): void {
  50. // this.childNodes.forEach(element => {
  51. // element.childNodes.forEach(td => {
  52. // if (td.cellIndex === cellIndex) {
  53. // td.style.backgroundColor = 'yellow'
  54. // } else if (td.dataset.col === col) {
  55. // td.style.backgroundColor = 'orange'
  56. // } else {
  57. // td.style.backgroundColor = 'grey'
  58. // }
  59. // });
  60. // });
  61. // if (tagName === "TD") document.getElementById(id).
  62. // style.backgroundColor = 'green'
  63. // }
  64. //Calc
  65. //Сделайте ваш калькулятор из первых занятий используя DOM и элементы input
  66. //(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
  67. //Для запуска раcчета используйте, например < button id = "calc" > и
  68. //Также можете создать поле ввода для результата и записывать результат в value этого поля.
  69. const inputCalc = document.querySelector('.input')
  70. console.log(inputCalc)
  71. let i;
  72. inputCalc.addEventListener('change', updateValue);
  73. function updateValue(e) {
  74. i +=1
  75. console.log(i)
  76. }
  77. console.log(i)
  78. // const calcWrapper = document.getElementsByClassName('calc')[0]
  79. // const handleCalc = (e) => {
  80. // console.log(parseFloat(inputCalc.value))
  81. // console.log(inputCalc)
  82. // e.preventDefault()
  83. // }
  84. // console.log(calcWrapper)
  85. // calcWrapper.addEventListener('submit',handleCalc)