728x90

Web 32

[JS] JavaScript를 이용해서 DOM 변경 감지하기 (Mutation Observer)

창이 열리면 input 태그에 focus를 주어야 하는데 자꾸 다른 곳에서 DOM이 변경되면서 focus가 나가버리는 상황이 있었다. 고민하다가 DOM이 변경될 때 input 태그에 focus를 주는 방법을 없을까? 하고 찾아보니 Mutation Observer가 있었다. 추가하기 1번 아이템 다음과 같이 페이지에서 ul에 li가 추가되거나 텍스트의 내용이 변경되거나 속성이 변경되거나 하는 것들을 감지하고 싶다면 Mutation Observer를 사용하면 된다. Mutation Observer를 이용하면 특정 노드의 DOM 변경을 감지할 수 있다. html 태그나 body 태그에 사용하여 페이지의 전체적인 변경을 감지할 수도 있을 것 같다. 위에 작성한 예제에 ul에 li가 추가될 경우 alert을 띄우..

Web/JS 2020.09.10

[JS] Chart.js 원형 차트, 사용자 지정 범례 그리기!(pie chart, custom legend)

Chart.js를 이용해서 원형 차트를 그리고 사용자 지정 범례를 만들어야 했다. 한 번도 사용한 적이 없어 사용 방법을 찾아보니 그리 어려운 라이브러리는 아니었다. window.onload = function () { pieChartDraw(); } let pieChartData = { labels: ['foo', 'bar', 'baz', 'fie', 'foe', 'fee'], datasets: [{ data: [95, 12, 13, 7, 13, 10], backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 25..

Web/JS 2020.07.13
728x90