클로리셔 작은 공간

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의 특징 중 하나다. 기존..

requestAnimationFrame() 바닐라 자바스크립트로 애니메이션 개념잡기 간단하게 개념을 잡기위해 필요한 기본 HTML 코드는 버튼과 작은 박스 '#box' 를 준비했다. HTML click CSS button{padding: 10px 20px; margin: 50px; } #box{width: 300px; height: 300px; background: aqua;} 01. requestAnimationFrame() 이용해서 반복하는 스크립트 짜보기 JS const btn = document.querySelector('button'); const box = document.querySelector('#box'); let num = 0; btn.addEventListener("click", e ..

01. style(CSS) 속성값을 변경해보기 1) CSS 속성을 추가하기 - element.style.color * [ style.css속성명 ]은 기존 정의 된 style에서 새로운 속성 추가된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. const text = document.querySelector("p"); text.style.color = "hotpink"; 2) CSS 속성 여러개 추가하기 - element.style.cssText * [ style.cssText ]는 기존 정의된 style 지우고, 새로운 속성으로 덮어쓴다. Lorem ipsum dolor sit amet consectetur adipisicing elit. co..

sort( ) / reverse( ) 함수로 순서 정렬하기 01. sort() : 알파벳 순서로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.sort(); console.log(names); // ['Andy', 'Chloe', 'David', 'Jake'] 02. reverse() : 역순으로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.reverse(); console.log(names); // ['Jake', 'David', 'Chloe', 'Andy'] sort( ) 함수로 올림차순/내림차순 최소값/최대값 반환 sort((a, b) => {return a-b}) : ..

addEventListener 이벤트 작업을 하다가 몰랐던 이벤트들도 많길래 한번 정리를 해보았다. 자주보다보면 익숙해지겠지..ㅎㅎ 자주쓰는 메서드는 따로 표시 해두도록 해야지! 이제 나도 이벤트 메서드 전문가!!! 브라우저 UI와 상호작용 이벤트 이벤트 설명 load 웹 페이지 로드 완료되었을때 unload 웹 페이지가 언로드 될 때(새로운 페이지 요청한 경우) error 오류를 만났거나 요청한 자원이 없을 때 resize 브라우저 창 크기를 조정했을 때 scroll 사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 - 사용자가 키보드를 작동했을 때 이벤트 설명 keydown 사용자가 키를 눌렀을 때 keyup 사용자가 키를 뗄 때 keypress 사용자가 눌렀던 키의 문자가 입력 되었을 때 마우..

변수에 넣어논 특정값들을 변수에 쉽게 담을 수 있는데 그것을 비구조화 할당이라고 한다. 만약 비구조할당이 없을때는 어떻게 작업을 해야했는지에 대한 불편함을 알아보자. 1. 배열 데이터값을 이용한 비구조화 할당 const names = ["Chloe", "Jake", "David", "Tom"]; const name1 = names[0]; const name2 = names[1]; const name3 = names[2]; const name4 = names[3]; console.log(name1);//Chloe console.log(name2);//Jake 이렇게 배열에 담긴 값들을 변수 하나 하나 각자 생성해서 각 [ index ] 넘버를 지정 설정하면서 할당했다. 4개까지는 쌉가능이지만... 만약 배..

문자를 숫자로 변환할 수 있는 내장함수 1. parseInt (변환할 값) - 해당값을 정수로 반환 const num = "5"; const num1 = "5.7" console.log(parseInt(num)); // 5 console.log(parseInt(num1)); // 5 // 반올림 상관없이 정수로 무조건 반환. 2. parseFloat (변환할 값) -해당값을 실수로 반환 const num = "5.8"; const num1 = "5.3"; console.log(parseFloat(num)); // 5.8 console.log(parseFloat(num1)); // 5.3 // 소수점 살려서 실수로 무조건 반환

1. indexOf( ) - 찾고자하는 문자열의 위치 반환 2. slice( ) - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환 3. substr( ) - 문자열에서 특정 부분 잘라냄 4. replace( ) - 문자열에서 특정 문자값 바꿔치기 5. split( ) - 문자열을 배열로 반환 1. 문자열.indexOf() - 찾고자하는 문자열의 위치 반환 const txt = "Hello World"; console.log(txt.indexOf("apple")); // -1 apple이란 단어를 찾기했을 때, 값이 없으면 -1을 반환한다. 만약 글자가 있다면 그 글자의 위치를 찾아서 숫자로 반환. indexOf는 단어가 있는지 없는지 확인할 때 사용을 많이 한다고한다. 2. 문자열.slice() - ..