전체 글(70)
-
이벤트 전파
이벤트의 전파 단계 위의 그림처럼 HTML요소는 자식이 부모 위에 겹쳐진 형태로 표시된다. 따라서 자식에서 이벤트가 발생해도 컴퓨터는 자식요소를 클릭한 건지 부모를 클릭한 건지 구분하지 못하기 때문에 전체 요소를 검사하며 발생한 이벤트에 반응하는 리스너가 있는지 찾는다. 윈도우 객체 -> document -> Html -> body -> #outer -> #inner1 -> #inner2 순서로 검사가 진행된다. 1) 캡쳐링 단계 윈도우 객체에서 #inner2 즉, 타겟요소에 도달하기까지 이밴트 리스너를 찾는 단계를 캡쳐링 단계라고 한다. 이 과정에서 타겟요소에 도달하기 전에 해당 이벤트에 반응하도록 등록된 리스너가 있다면, 그 리스너가 해당 이벤트를 빼돌린다.(캡처한다) 이렇게 되면 타겟 요소는 이벤트..
2020.02.07 -
마우스 이벤트 연습하기
타켓요소.addEventListener('이벤트타입', 리스너 콜백함수, 이벤트단계(useCapture)); -이벤트 타입은 on을 생략한 이름을 넣는다. ex) onclick (X) , click(O) -같은 요소에 이벤트를 여러개 등록할 수 있다. -removeEventListener메서드로 이벤트를 삭제할 수있다. ※단, 리스너로 익명함수가 등록된 경우엔 removeEventListener 메서드를 호출해서 지울 순 없고 addEventListener에 등록된 익명함수 내에서removeEventListener를 호출하고 두번째 인자로 arguments.callee를 넣어줘야 함. 본론 마우스 이벤트 종류) click - 클릭 dbclick - 더블클릭 mousedown -마우스를 클↘릭↘ 하고 누르..
2020.02.06 -
Javascript 배열( 선언과 초기화 및 활용 ) 틈틈이 추가예정
1. 배열을 생성하는 방법들 let arr = Array(5); //길이가 5인 empty 배열 let arr1 = new Array(3); //new 키워드를 통해 길이가 3인 빈 배열이 생성. empty상태인 배열 let arr2 = []; 2. 2차원 배열 선언하기 const arr = new Array([1,2,3],[4,5,6]); // [[1,2,3],[4,5,6]]이 생성됨 const arr = Array(Array(7,8,9), Array(4,5,6)); const arr = [[0,1,2],[3,4,5]]; //map함수를 통해 각 요소에 또 하나의 Array를 생성해 반환한다. const arr = Array(배열길이).fill().map((v,i) => {return Array(값1,..
2020.02.05 -
에러코드와 메시지를 커스텀 할 수 있다.
백엔드에서 에러 처리를 할 때, 에러코드와 메시지를 아래와 같이 커스텀해서 보낼 수 있다. if (!조건) { return res.status(403).json({ //403코드는 forbidden. 서버에서 해당 요청 거부. errorCode: 1, //위 조건에 해당하는 에러의 코드는 1로 지정 message: '조건이 맞지 않습니다.' // 에러 코드1에 해당하는 에러 메시지 설정 }); } ★ response 해줄 땐 꼭 return을 해주자. 응답이 여러 번 갈 수 있다고 한다.
2020.02.04 -
비트 카운팅 알고리즘
내가 제출한 답 var countBits = function(n) { let result = []; let count = 0; while(n > 1){ result.push(n%2); n = Math.floor(n/2); } result.push(n); result.forEach((elem) => { if( elem === 1) count++; }); return count; }; 저리 간단한 걸 왜 더 어렵게 푼 것 같지. countBits = n => n.toString(2).split('0').join('').length; ---------------★문법 다시 체크----------------- 먼저, 숫자.toString(2)는 숫자를 2진수 문자열로 바꾼다. split('0')으로 문자열 안의..
2020.02.01 -
인피니트 스크롤 구현 공식
*** 인피니트 스크롤 시 *** 스크롤 값 document.documentElement.scrollHeight = 스크롤의 전체 높이(스크롤 쭉 내려셔 있는 하단까지의 높이) document.documentElement.clientHeight = 현재 보고있는 화면 높이(화면에 잡히는 높이) window.scrollY = Y축 스크롤 이동 값 (내가 스크롤 얼마나 내렸는지) 즉, document.documentElement.scrollHeight - 게시물 로드할 지점의 스크롤 값
2020.01.28