정리공간

스크롤 이동 scrollTo 는 특정 위치로 이동시켜주는 함수다. scrollTo(가로, 세로) 지금 네이버를 켜서 콘솔창에 찍어보면 바로 이동한다. window.scrollTo(0, 3000) 이 함수는 더 자세히 적을수도있는데 window.scrollTo({top: 3000, behavior:'smooth'}) 이렇게도 쓸 수 있다. 옵션인 behavior은 어떻게 이동할지에 대한 옵션으로, smooth: 스크롤이 부드럽게 움직인다. instant : 스크롤이 바로 해당지점으로 움직인다. auto : 기본 움직임 전체 브라우저 스크롤과 DIV내의 스크롤 window.scrollTo는 전체 브라우저의 스크롤을 조절하고, div.scrollTo는 해당 요소 내에서만 스크롤을 조절한다. ex) docume..

예제 let testObject = [ { num : 1, name : '선물상자', price : 1000, count : 10 }, { num : 2, name : '선물포장', price : 700, count : 5 }, { num : 3, name : '볼펜', price : 1500, count : 7 }, { num : 4, name : '모니터', price : 2000, count : 15 }, { num : 5, name : '과자', price : 2000, count : 20 }, { num : 6, name : '선물리본', price : 300, count : 21 } ] 위 예제에서 name => "이름", price => "가격" 등 특정 출력을 위해 키 이름을 변경하고자 한..

예시 let testObject = [ { num : 1, name : '선물상자', price : 1000, count : 10 }, { num : 2, name : '선물포장', price : 700, count : 5 }, { num : 3, name : '볼펜', price : 1500, count : 7 }, { num : 4, name : '모니터', price : 2000, count : 15 }, { num : 5, name : '과자', price : 2000, count : 20 }, { num : 6, name : '선물리본', price : 300, count : 21 } ] 특정 값을 가진 객체만 출력하기 [객체].filter( f => f.[키값] == [조건] ); ex) te..

예시 let str = '나는 오늘도 출근을 한다 나는' let arr = ['사과', '바나나', '수박', '딸기', '홍시'] 1. indexOf(찾는값) : 찾는 값의 첫번째 인덱스를 반환하고, 없으면 -1을 반환한다. str.indexOf('오늘도')// 3 str.indexOf('나는')// 0 str.indexOf('오늘도도')//-1 arr.indexOf('사과')//0 arr.indexOf('수박')//2 arr.indexOf('토마토')//-1 2. includes('찾는값') : 찾는 값이 있으면 true, 없으면 false를 반환한다. str.includes('오늘도')// true str.includes('얍')// false arr.includes('사과')// true arr...

자바스크립트에서 글자를 변경하는 공식은 아래와 같다. replace(변경하고싶은문자, 변경할 문자) 이렇게 도 -> 만으로 글자를 변경할 수 있다. 하지만 원본 텍스트가 바뀌는 것은 아니다. 다시 test를 출력해보니 그대로 "도"로 출력이 되는데, 원본 텍스트를 바꾸려면 바꾼것을 다시 넣어줘야한다. test = test.replace("도", "만") [공백제거] 보통 로그인 기능을 만들때 사용자가 자신도모르게 공백이 들어가는 경우가 있어 공백을 제거하는 과정을 넣는게 좋다. 공백을 제거할때도 replace를 써서 활용할 수 있다. 문자열.replace(/\s/gi, "") [여러글자 한꺼번에 치환] 문자열.replace(/ 글자1 | 글자2 | 글자3 /gi, "변경할 글자") [replace 사용방..

vue 프로젝트에서 화면을 스크롤할때 감지하여 특정 함수를 실행시키고 싶었다. 계속 addEventListener를 해줘도 안되서 뭐지 했는데 뒤에 true를 써줘야 했던것...ㅠㅠㅠ // 이벤트 등록 mounted() { document.addEventListener('scroll', this.scrollEvents, true); }, // 이벤트 해제 beforeUnmount() { window.removeEventListener('scroll', this.scrollEvents); }, methods : { scrollEvents(e) { console.log("스크롤될때마다 이 함수 실행?",e) } } 결과화면 => 스크롤 내릴때마다 함수가 실행된다! 이제 응용해서 만들어야지~

자바스크립트의 내장객체중 하나로, 날짜와 시간정보를 제공한다. 날짜 객체는 월을 표현할때 0~11 로 표현하므로 1월이 0, 12월이 11이고, 요일은 일(0) ~ 토(6) 으로 표현한다. 1. 현재 날짜 형식: 요일 월 일 연도 시:분:초 let day = new Date(); document.write(day); // Sat Jan 29 2022 20:26:38 GMT+0900 (한국 표준시) Date()에 어떤 형태로 날짜를 넣냐에 따라 다르게 출력된다. var day2 = new Date("2022/1/1"); // Sat Jan 01 2022 00:00:00 GMT+0900 (한국 표준시) var day3 = new Date(2022,1,1); // Tue Feb 01 2022 00:00:00 ..

1. 배열 선언 // 1. var arr1 = new Array(1, 2, 3, 4, 5); // 2. var arr2 = [1, 2, 3, 4, 5]; 2. 배열 출력 // 1. 반복문(for)으로 출력 for(var i=0; i b - a); 반대로: arr.reverse()

1. alert("메시지"); ->확인버튼만. 2. confirm("메시지"); ->확인/취소 버튼. 확인/취소 결과에 따라 true/false가 반환된다.

1. 인덱스로 문자 찾기 charAt(인덱스); 문자열[인덱스] test.charAt(3);// 'a' test[3]// 'a' test[20]//undefined test.charAt(20)// '' charAt()과 문자열[]의 차이는 해당 인덱스에 문자가 없을때 나타나는데, charAt은 빈 문자열을 반환하고 문자열[]는 undefined를 출력한다. 2. 특정 문자의 위치 찾기 - 앞에서부터 찾기: indexOf() search() - 뒤에서부터 찾기: lastIndexOf() 찾고싶은 문자가 없으면 -1을 반환한다. var test = "i want to sleep"; // 앞에서부터 찾기 document.write(test.indexOf('t'));// 5 document.write(test...