본문 바로가기

Web

(56)
이벤트 전파 이벤트의 전파 단계 위의 그림처럼 HTML요소는 자식이 부모 위에 겹쳐진 형태로 표시된다. 따라서 자식에서 이벤트가 발생해도 컴퓨터는 자식요소를 클릭한 건지 부모를 클릭한 건지 구분하지 못하기 때문에 전체 요소를 검사하며 발생한 이벤트에 반응하는 리스너가 있는지 찾는다. 윈도우 객체 -> document -> Html -> body -> #outer -> #inner1 -> #inner2 순서로 검사가 진행된다. 1) 캡쳐링 단계 윈도우 객체에서 #inner2 즉, 타겟요소에 도달하기까지 이밴트 리스너를 찾는 단계를 캡쳐링 단계라고 한다. 이 과정에서 타겟요소에 도달하기 전에 해당 이벤트에 반응하도록 등록된 리스너가 있다면, 그 리스너가 해당 이벤트를 빼돌린다.(캡처한다) 이렇게 되면 타겟 요소는 이벤트..
마우스 이벤트 연습하기 타켓요소.addEventListener('이벤트타입', 리스너 콜백함수, 이벤트단계(useCapture)); -이벤트 타입은 on을 생략한 이름을 넣는다. ex) onclick (X) , click(O) -같은 요소에 이벤트를 여러개 등록할 수 있다. -removeEventListener메서드로 이벤트를 삭제할 수있다. ※단, 리스너로 익명함수가 등록된 경우엔 removeEventListener 메서드를 호출해서 지울 순 없고 addEventListener에 등록된 익명함수 내에서removeEventListener를 호출하고 두번째 인자로 arguments.callee를 넣어줘야 함. 본론 마우스 이벤트 종류) click - 클릭 dbclick - 더블클릭 mousedown -마우스를 클↘릭↘ 하고 누르..
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,..
에러코드와 메시지를 커스텀 할 수 있다. 백엔드에서 에러 처리를 할 때, 에러코드와 메시지를 아래와 같이 커스텀해서 보낼 수 있다. if (!조건) { return res.status(403).json({ //403코드는 forbidden. 서버에서 해당 요청 거부. errorCode: 1, //위 조건에 해당하는 에러의 코드는 1로 지정 message: '조건이 맞지 않습니다.' // 에러 코드1에 해당하는 에러 메시지 설정 }); } ★ response 해줄 땐 꼭 return을 해주자. 응답이 여러 번 갈 수 있다고 한다.
비트 카운팅 알고리즘 내가 제출한 답 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')으로 문자열 안의..
인피니트 스크롤 구현 공식 *** 인피니트 스크롤 시 *** 스크롤 값 document.documentElement.scrollHeight = 스크롤의 전체 높이(스크롤 쭉 내려셔 있는 하단까지의 높이) document.documentElement.clientHeight = 현재 보고있는 화면 높이(화면에 잡히는 높이) window.scrollY = Y축 스크롤 이동 값 (내가 스크롤 얼마나 내렸는지) 즉, document.documentElement.scrollHeight - 게시물 로드할 지점의 스크롤 값
자주 사용하는 배열 메소드 -map,forEach,reduce,filter 반복 메서드는 배열의 모든 요소를 순회하면서 특정한 작업을 수행하거나, 특정 조건을 만족하는 요소를 가져올 때 사용한다. ★배열.map(function( 처리할 현재 요소, 현재 요소의 인덱스, 원본 배열){ /* 배열 요소 하나 하나에 실행할 로직 */ }); 배열 내의 모든 요소 각각에 대하여 주어진 함수 로직을 실행한 후, 그 결과를 모아 새로운 배열을 반환합니다. (map 메서드의 인수로 넘기는 함수는 무조건 결과를 반환해야 함 => return 문이 들어가야 함) callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받는데, 현재 요소 인덱스와 원본 배열은 옵션이다. 1 2 3 4 5 6 7 8 let array1 = [1, ..
자주 사용하는 배열 메소드 - join,indexOf,slice,concat 접근자 메소드는 배열을 다른 형태로 가공한 새로운 배열을 반환하며, 원본 배열은 수정하지 않는다. 배열.join('구분자') 배열을 문자로 바꿔줌 (수정 메서드의 split과 반대기능) 1 2 3 4 5 6 7 8 let arrayJoin = ['my','name','is','javascript']; let resultJoin = arrayJoin.join('/'); console.log(resultJoin); //expected output: "a/b/c/d/e" //만약 그냥 구분자 없는 문자열로 만들고 싶을 경우 let resultJoin2 = arrayJoin.join(''); //expected output: "abcde" 배열.indexOf(data, index) 일치하는 문자(data)의 인..