본문 바로가기

JavaScript

 (41)
JS프론트엔드 기초 개념 정리 화살표 함수와 일반 함수의 차이화살표 함수(Arrow Function)는 ES6에서 도입된 함수 표현식으로, 기존의 function 키워드를 사용하는 일반 함수와 차이점이 존재한다.차이점this 바인딩화살표 함수는 자신만의 this를 가지지 않고, 선언된 스코프의 this를 그대로 사용한다.일반 함수는 호출 방식에 따라 this가 달라진다.arguments 객체화살표 함수는 arguments 객체를 가지지 않으며, 필요할 경우 rest parameter (...args)를 사용해야 한다.일반 함수는 arguments 객체를 사용할 수 있다.사용 방식화살표 함수는 짧고 간결하게 작성할 수 있으며, 익명 함수로 주로 사용된다.일반 함수는 생성자 함수, 프로토타입 메서드 등에서 사용될 수 있다.function..
DOM* 이벤트 객체와 전파 이벤트 전파이벤트 전파 (event propagation)는 이벤트가 다른 요소에게 전이되는 것을 의미합니다   캡쳐링(capturing): 이벤트가 상위요소에서 하위요소로 전파타깃 단계(target phase): 이벤트가 타깃에 도달버블링(bubbling): 이벤트가 하위요소에서 상위요소로 전파 이벤트 캡처링(Event Capturing)캡처링을 사용하려면, addEventListener 함수에 세 번째 인자로 true 값을 주어야 합니다. 예를 들어: element.addEventListener('click', function(event) { // 핸들러 로직}, true); // 캡처링 단계에서 이벤트를 처리하기 위해 true 값을 설정   이벤트 버블링(Event Bubbling)버블링을 막으려..
DOM* 이벤트 핸들러 ​   마우스 이벤트click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생합니다.dblclick – 요소 위에서 마우스 왼쪽 버튼을 두번 빠르게 눌렀을 때 발생합니다.contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.mouseover와 mouseup – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생합니다.mouseleave과 mouseout – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생합니다.mousemove – 마우스를 움직일 때 발생합니다  키보드 이벤트keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생합니다. 폼 요소 이벤트submit..
DOM* 속성 노드 어트리뷰트(attribute) HTML 요소는 여러 개의 속성(어트리뷰트)을 가질 수 있습니다.문서가 파싱될 때 HTML 요소의 속성은 어트리뷰트 노드로 변환되어 요소 노드의 형제 노드로 추가됩니다.이 때 속성 하나당 하나의 어트리뷰트 노드가 생성됩니다. 즉 위 예시의 경우 3개의 어트리뷰트 노드가 생성됩니다.모든 어트리뷰트 노드의 참조는 유사 배열 객체인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장됩니다.  HTML 속성 조작하기속성 추가, 변경하기  setAttribute() 메서드는 요소노드의 속성값을 추가하거나 변경할 때 사용합니다.첫번째 인자 name에 속성이름 (ex: src)을 넣고 두번째 인자 value에 추가하거나 변경할 속성값을 전달합니다.속성이..
DOM* 2 텍스트, HTML 조작      태그 생성 및 추가       태그 중간 삽입하기      태그 교체 및 삭제
DOM* 1 DOM을 이용해서 자바스크립트, css, html을 이어준다        css 선택자로 태그 가져오기.    자식 부모형제 노드 탐색 및 getElementById, querySelector
JavaScript* sort 함수 // 배열 데이터 정렬하기const nums = [6, 11, 3, 7, 9, 10, 2, 4, 1]console.log(nums);nums.sort((a, b) => a - b); // 오름차console.log(nums);nums.sort((a, b) => b - a); // 내림차console.log(nums);//nums.reverse(); // 내림차//console.log(nums); 숫자를 정렬하는 법은 비교적 문자에 비해 간단하다. 한줄로 활용하능하다.  userList.sort((a, b) => { if (a.userName > b.userName) return -1; else if (a.userName 문자의 경우에는 조건문으로 앞서올 문자를 구분해주면 된다. 리턴-1 처리 된쪽이..
JavaScript* 함수 Quiz2 // 4. **각 도시별로 발생한 총 거래액을 객체 형태로 매핑해주세요.// 예를 들어, `{서울: 총거래액, 부산: 총거래액}`과 같은 형태입니다.**console.log('=============================');const totalByCity = traders.reduce((totalByCity, trs) => { const city = trs.trader.city; totalByCity[city] = (totalByCity[city] || 0) + trs.value; return totalByCity;}, {});console.log(totalByCity);traders에서 reduce를 이용해 돌려준다 돌리는과정에 trs.trader.city를 다쓰기 귀찮으니 city값..

티스토리툴바