[Javascript] 동적 생성한 요소에 이벤트 추가하기 (addEventListener)

todo-list 삭제 버튼에 추가한 이벤트가 제대로 적용되는지 확인하려는데 html 파일을 실행하자마자 콘솔에 빨간 불이 들어왔다.미리 버튼을 추가해두고 테스트했을 때는 발생하지 않았는데, 기존에 있던 테스트용 요소들을 모두 지우고 실행했을 때 발생하는 것으로 보아 addEventListener는 버튼이 생기기도 전에 호출되는데 해당 아이디를 가진 object가 없으니 이런 오류가 나는구나 추측이 됐다.  알아야 할 것동적으로 생성한 요소에 이벤트를 추가하기 위해 생각해야하는 것은 다음과 같다.1) addEventListener는 EventTarget 인터페이스의 메서드로, 가장 일반적으로 DOM 객체에 어떤 이벤트가 발생했을 때 어떤 동작을 수행할지 설정하는 기능을 한다.2) createElement..

• format_list_bulleted JavaScript
• · 2024. 7. 3.
• textsms

Javascript에서 false로 간주되는 값들 (falsy)

프로그래머스 대충만든 자판 문제를 풀이하다가 NaN과 논리연산에 의문이 생겨 조금 더 알아보았다! 우선 프로그래머스 문제의 조건은 다음과 같다.1) 자판에 문자가 1개 이상 할당될 수 있고, 두번째에 할당되어있는 문자를 입력하려면 해당 자판을 두번 누르면 된다.2) 문자열 배열이 주어졌을 때 그 문자들을 자판으로 입력하기위해 필요한 '자판을 누르는 최소 수'를 구한다. 내가 접근한 방법1) 자판으로 입력할 수 있는 문자들을 객체의 키로 만들고, 여러 자판을 눌렀을 때 그 문자가 나오는 가장 작은 수를 구해둔다.-> 매번 가장 작은 수를 구하지 않고 저장해뒀다가 활용하기 위함2) 문자열 배열을 돌며 각 문자를 입력하기 위해 필요한 수를 객체에서 찾아 더한다. 궁금했던 부분function solution(k..

• format_list_bulleted JavaScript
• · 2024. 7. 1.
• textsms

DOM이란 무엇일까?

DOM (Document Object Model, 문서 객체 모델)DOM은 HTML, XML 문서에 접근하기 위한 인터페이스이다. Javascript와 같은 언어가 문서에 접근할 수 있도록 콘텐츠, 구조, 스타일 요소를 구조화시켜 제공하고, 이를 변경할 수 있도록 한다. Javascript가 DOM을 다루는 대표적인 언어이긴 하지만, 이외의 다른 프로그래밍 언어들도 DOM에 접근하고 사용할 수 있다! DOM은 웹페이지(HTML 문서)를 트리 구조로 표현한다. 즉, 웹페이지는 하나의 최상위 노드(root 노드)에서 시작하는 자식 노드들을 가진다. 노드의 타입은 총 12개이며, 주요 노드는 아래의 4가지이다.  DOM 트리의 주요 노드1) document node (문서 노드): DOM 트리 구조의 최상위 ..

• format_list_bulleted JavaScript
• · 2024. 6. 29.
• textsms

[jQuery] 간단한 메뉴바 만들기 (클릭한 요소 스타일 바꾸기)

배열에있는 한식 메뉴들을 화면에 출력하는 과제를 진행하며, 카테고리를 나누고 선택하는 카테고리의 메뉴만 볼 수 있는 기능을 추가하고싶어 메뉴바를 만들어보았다.이전에 사용해본 jQuery의 attr()을 활용해보았다.  간단 요약1) 선택할 수 있는 카테고리 메뉴들을 나열한다.2) 선택한 카테고리에 입힐 스타일을 css로 작성한다.3-1) 카테고리가 클릭됐을 때 호출하는 함수에서 해당 요소를 받아 저장해둔다.3-2) 이전 선택 요소를 기본 상태로 돌려주고, 선택된 요소를 선택됨 상태로 지정한다.  적용한 방법1) 카테고리들을 나열한다. 전체보기 밥 국/찌개 전 카테고리들의 나열이므로, ul을 활용해 묶어주었다.  2) 선택한 카테고리에 입힐 스타일을 작성한다..categoryItem:..

• format_list_bulleted JavaScript
• · 2024. 6. 24.
• textsms

[Javascript] 시간 간격을 두고 함수 호출하기 (setTimeout / setInterval)

숫자맞추기 게임을 만들며 제한시간을 화면에 표시하고싶어 setInterval을 사용해보았다.알아본 내용을 정리해보자. setTimeout사용법지정한 시간만큼 기다렸다가 함수를 실행해야할 때 사용할 수 있다!setTimeout(실행할 함수, 기다릴 시간);setTimeout(() => { console.log("1초 지남");}, 1000);setTimeout(foo, 3000);function foo() { console.log("3초 지남");} 실행할 함수를 바로 작성해주거나 함수명을 적어주고, 기다릴 시간을 ms 단위로 작성해주면 된다. (1000ms == 1초) clearTimeout중간에 실행을 취소하고 싶은 경우 clearTimeout()을 사용하면 된다!setTimeout을 실행할 때 ID가..

• format_list_bulleted JavaScript
• · 2024. 6. 19.
• textsms

[Javascript/jQuery] 사용자 입력 비활성화하기 (text / button)

무작위의 숫자를 띄우고 일정 시간이 지나면 숫자를 가린 뒤 사용자의 입력을 받아 정답인지 확인하는 과제를 진행했다.과제에서 제시하는 기본적인 기능을 구현하고나니 전혀 어렵지가 않아서 게임같이 느껴지는 기능을 더 추가하고싶었다!우선은 숫자가 보여지는 동안은 정답을 입력할 수 없도록 제한하는 기능을 추가해보기로 했다.  disabledinput 의 attribute 중 입력을 제한하는 것이 분명 있을 것 같아 어떤 것들이 있는지 살펴보았다.가장 먼저 눈에 띈 것이 disabled였고, 바로 적용해보았다.기본적으로 숫자 입력과 제출 버튼을 비활성화 시켜두었다가 숫자를 암기할 수 있는 제한시간이 지나면 숫자 숨김 / 입력 활성화 / 제출버튼 활성화 되도록 했다.  위와 같이 disabled를 태그에 추가하면 해..

• format_list_bulleted JavaScript
• · 2024. 6. 18.
• textsms