본문 바로가기

JavaScript131

이펙트 응용편 - 마우스 이펙트 오번째 마우스 이펙트5 transform 을 이용하여 마우스의 위치에따라 이미지의 각도가 바뀝니다. JS 설명 window.innerWidth / 2 - mousePageX; 를 이용하여 화면전체의 기준점을 가운데로 변경합니다. softPageX += (anglePageX - softPageX) * 0.4; 으로 마우스를 부드럽게 만들고, imgMove.style.transform을 이용하여 rotate 에 마우스의 위치값을 넣어줍니다. 코드 보기 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth / 2 - mousePageX; let centerPageY = win.. 2022. 9. 28.
unshift() / shift() unshift() / shift() unshift() 메서드는 배열 처음 요소에 추가 shift() 메서드는 배열 처음 요소에 삭제 번호 기본값 메서드 리턴값 결과값 // 01 const arrNum = [100, 200, 300, 400, 500]; const arrUnshift = arrNum.unshift(600); // 02 const arrNum2 = [100, 200, 300, 400, 500]; const arrShift = arrNum2.shift(); 2022. 9. 27.
startsWith() / endsWith() startsWith() / endsWith() startsWith() 메서드는 시작하는 문자열에서 문자열을 검색하여 불린으로(true, false) 반환합니다. endsWith() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)을 반환합니다. 사용법 "문자열".startsWith(검색 문자열); "문자열".startsWith(검색 문자열, 위치값); "문자열".endsWith(검색 문자열); "문자열".endsWith(검색 문자열, 위치값); 예제 const str1 = "javascript reference" const currentStr1 = str1.startsWith('javascript'); // true const currentStr2 = str1.startsWith(.. 2022. 9. 27.
splice() splice() splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 번호 기본값 메서드 리턴값 결과값 //01 const arrNum1 = [100, 200, 300, 400, 500]; const result = arrNum1.splice(2); //02 const arrNum2 = [100, 200, 300, 400, 500]; const result2 = arrNum2.splice(2, 3); //03 const arrNum3 = [100, 200, 300, 400, 500]; const result3 = arrNum3.splice(2, 3, "javascript"); //04 const arrNum4 = [100, 200, 300, 40.. 2022. 9. 27.
slice() slice() slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. 번호 기본값 메서드 리턴값 //01 const arrNum1 = [100, 200, 300, 400, 500]; const result = arrNum1.slice(2); //02 const result2 = arrNum1.slice(3); //03 const result3 = arrNum1.slice(2, 4); //04 const result4 = arrNum1.slice(2, 5); //05 const result5 = arrNum1.slice(-2); //06 const result6 = arrNum1.slice(-2, 5); 2022. 9. 27.
reverse() / sort() reverse() / sort() everse() 메서드는 배열 요소의 순서를 반대로 정렬 sort 메서드는 배열 정렬 번호 기본값 메서드 리턴값 // 01 const arrNum = [100, 200, 300, 400, 500]; const arrReverse = arrNum.reverse(); // 02 const arrNum2 = [100, 200, 200, 300, 400, 500]; const arrSort = arrNum2.sort(); // 03 const arrNum3 = [500, 400, 300, 200, 100]; const arrSort3 = arrNum3.sort( (a, b) => b - a ); // 04 const arrNum4 = [500, 400, 300, 200, 100.. 2022. 9. 27.
728x90
반응형

자바스크립트 사진

JavaScript

자세히보기