클로리셔 작은 공간

reduce() 기본 문법 reduce() 메서드는 배열의 각 요소에 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환. reduce라는 이름은 배열들을 하나의 값으로 줄이는데 쓰이기 때문에 붙었다. 예로, 배열에 들어있는 숫자를 더하거나 평균을 구하는 것은 배열을 하나의 값으로 줄이는 동작이다. 하지만 reduce가 반환하는 값은 객체일 수도 있고, 다른 배열일 수도 있다. arr.reduce(callback[, initialValue]) 리듀서 함수는 네 개의 인자를 가집니다. 누산기 accumulator (acc) 현재 값 currentValue (cur) 현재 인덱스 currentIndex (idx) 원본 배열 array (src) ◻ accumulator - 콜백의 반환값을 누적한다..

둘 다 JS를 사용해서 HTML코드를 DOM에 넣어 조작하는 메서드다. 1. innerHTML = " html " 로 둘러쌓인 텍스트를 클릭 시 태그로 바꾸는 JS를 작성해보았다. click 안녕하세요, 지금은 'span' 태그입니다. 라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나온다. const btn = document.querySelector("button"); const el = document.querySelector("#el"); btn.addEventListener('click', e => { el.innerHTML = "지금은 'p'태그로 변경되었습니다." }) 클릭하는 순간 태그에서 태그로 덮어씌워진다. innerHTML의 특징 중 하나다. 기존..

회사 또래 직원들끼리 같이 스터디 하기로 했다. 스크립트 미션을 받아서 각자 코드를 짜보고 본인의 코드를 리뷰하면서 더 좋은 방법 알아가는 방식으로 하기로 했다. 첫번째 미션은 자바스크립트를 이용해서 그래프를 만들기 프로젝트!! 일주일동안(~22.02.24) 각자 작업해서 리뷰하기. 하단 이미지처럼만 짜여있는 HTML / CSS 코드를 이용해서, 순수 바닐라 자바스크립트로 하단 바 그래프처럼 표현하기이다. 1) 각 항목에 있는 숫자만큼 바 그래프가 표시되어야한다. 2) 평점 계산, 기준 라인(0, 5, 10, 15…) 표현되어야 한다. 3) 재활용 가능하게 만들어야 한다. 4) 이미지 사용 안된다. - 최대한 HTML을 안건들면서 JS를 이용해 DOM을 조작하..

배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다. 1.문법 var 변수명 = [값1, 값2, 값3......] 배열 사용하는 방법 01 배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다. var arr1 = new Array(); arr1[0] = 100; //첫번째 배열 저장소에 100을 저장 arr1[1] = 200; //두번째 배열 저장소에 200을 저장 배열 사용하는 방법 02 배열을 선언과 동시에 데이터를 넣는 방법입니다. var arr2 = new Array(100,200); 배열 사용하는 방법 02 배열을 선언하지 않고 바로 데이터를 넣는 방법입니다. var arr3 = [100,200]; 2. 배열 객체의 메서드 / 속성 종류 설명 join()..

addEventListener : 특정 이벤트가 발생했을 시, 특정 함수를 실행할 수 있게 해주는 기능. addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 이벤트 명 설명 change 변동이 있을 때 발생 click 클릭 시 발생 focus 포커스를 얻었을 때 발생 keydown 키를 눌렀을 때 발생 keyup 키에서 손을 땟을 때 발생 load 로드가 완료 되었을 때 발생 mousedown 마우스를 클릭 했을 때 발생 mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생 mouseover 마우스가 특정 객체 위로 올려졌을 때 발생 mousemove 마우스가 움직였을 때 발생 mouseup 마우스에서 손을 땟을 때 발생 select option 태그 등에서 선택을..