본문 바로가기

JavaScript23

JavaScript: 스코프, 클로저 스코프와 클로저 함수 내부에서 선언한 변수는 밖에서 접근할 수 없다. 그래서 바깥에서 변수를 먼저 선언해주면 되는데, 그걸로 해결이 되지 않을 수 있다. 그런 경우에는, 함수로 한번 더 감싸거나 필요에 의해 변수를 추가해서 실행시켜야 한다. 반복문과 비동기함수 사이에서 클로저가 자주 발생한다. 2020. 5. 12.
JavaScript: e.target과 e.currentTarget target과 currentTarget은 비슷해 보이지만, 자세히 보면 다르고, 활용도도 다를 수 있다. e.target : 이벤트가 실제로 실행되는 아이 e.currentTarget : eventLister를 단 대상 이 아이의 html소스는 다음과 같다. 1 2 3 4 js파일을 다음과 같이 작성해봤을때, const box = document.querySelector(".box"); function clickHandler(e) { console.log(e.currentTarget); } box.addEventListener("click", clickHandler); box에 이벤트를 추가해줬고, currentTarget을 찍어보면 빨간 박스를 눌러도 e.currentTarget으로 찍히는 아이는 "b.. 2020. 5. 11.
JavaScript: 이벤트 만들기 버튼을 클릭할때 텍스트를 넣을 수 있는 이벤트를 만들어 보겠다. 일단 html내용에는 버튼을 하나 만들고, js파일을 연결시켜준다. 클릭! * js파일은 head에 넣어도 가능하나, 로드가 지연되는 문제때문에 body태그가 끝나기 전에 넣는다. 이제 js파일로 넘어가서, querySelector를 이용하여 이벤트를 달아줄 부분을 선택해주고, 결과가 나올 부분도 선택해준다. const btn = document.querySelector(".clickBtn"); const body = document.querySelector("body"); 이벤트를 달 때는 addEventListener를 이용한다. btn.addEventListener("click", clickHandler); 여기의 clickHandle.. 2020. 5. 10.
JavaScript: 이차원 배열, target, target.parentNode 이차원배열은 행렬처럼 생겼다. for문으로 만들 수 있고, 객체를 object.entries로 이차원배열을 만들 수도 있다. 뭔가를 찾기위해 find()와 함께 이용 할 수 있다. 배열을 생성할때는 세로를 먼저 만들어줘야 한다. target(): 대상찾기 target.parentNode(); 대상의 부모찾기 2020. 5. 9.