반응형 Language/JavaScript94 [JavaScript] Date() - 년/월/일 날짜 가져오기 (ft. Date.prototype) script 개발을 하게되면 가끔 날짜가 필요한 경우가 생길텐데 Date를 사용하여 년/월/일 날짜를 가져오는 방법에 대해 알아보자. 가볍게 예제를 통해 먼저 알아보자. ▷ 예제1) var date = new Date(); date.getFullYear(); // 2021 date.getMonth() + 1; // 2 date.getDate(); // 12 역시 일반적으로 사용하는게 년 /월 /일 이기 때문에 각각 getFullYear() / getMonth() / getDate() 를 통해 값을 가져올 수 있다. 물론 더 나아가 여러가지 값들을 구할수 있는데 간단하게 몇가지만 알아보자. ▷ 메서드 목록 - getFullYear : 년도 - getMonth : 월 (0 ~ 11 을 반환하기 때문에 +1을.. 2021. 2. 12. [JavaScript] arr.findIndex() - 조건에 맞는 배열의 특정 값 위치(index) 찾기 (Array.prototype.findIndex()) 배열에서 특정 값의 위치(인덱스)를 찾아주는 indexOf 가 존재하는데, 아무래도 상세한 조건에 따라 인덱스를 반환해주는 메서드는 따로 존재한다. Array.prototype.findIndex() 메서드에 대해 알아보자. indexOf와 동일하게 조건에 맞으면 배열의 index를 반환하고 만족하는 요소가 없으면 -1을 반환한다. ▷ 구문 arr.findIndex(callback(element[, index[, array]])[, thisArg]) callback : callbackFunction 이며 function 안에서 조건에 따라 값을 반환한다. (만족 여부에 따라 인덱스 or -1) element : 현재 요소 (ex. 반복문의 현재 요소) index : 현재 요소의 인덱스 array : fin.. 2021. 2. 7. [JavaScript] elem.scrollIntoView() - 특정 요소 위치로 화면 스크롤 이동하기 javascript에서 화면의 특정 위치로 이동시켜주는 함수가 존재한다. 버튼을 눌렀을때 원하는 내용이 있는 위치로 이동시켜야 한다거나 그럴때 사용할 수 있다. scrollIntoView() 메소드가 존재하는데 element기반으로 사용하는거라 특정 element를 기준으로 스크롤을 이동시킨다. ▷ 구문 element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter 보는것처럼 3개의 문법이 존재하는데 첫번째로 아무 매개변수도 사용하지 않고 그냥 사용하는방법과 두번째로 Boolean parameter t.. 2021. 2. 6. [JavaScript] Number.isInteger() - 특정 값의 정수/소수점 여부 확인하기 스크립트에서 특정 값이 정수인지 판별해주는 메서드가 존재하는데, Number.isInteger() 메서드에 대해 알아보자. ▷ 구문 Number.isInteger(value) 가볍게 예제를 통해 접근해보자. ▷ 예제1) Number.isInteger(2) //true Number.isInteger(-2) //true Number.isInteger(2.2) //false Number.isInteger(NaN) //false Number.isInteger(Infinity) //false 아주 손쉽게 정수여부를 확인할 수 있으나 이 역시 IE에서는 사용할 수 없다. 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Object.. 2021. 2. 6. [JavaScript] 정규식을 사용한 숫자 천단위 콤마 찍기 간단하게 정규식 포현을 활용하여 숫자의 천단위 콤마 찍기 와 천단위 콤마 제거에 대해 익혀보자. 정규식 표현식을 자세히 모르지만 인터넷에 널려있기에 기록해둔다. ▷예제1) 천단위 콤마 찍기 "1234123412345".replace(/\B(?=(\d{3})+(?!\d))/g, ","); // "1,234,123,412,345" ▷예제2) 천단위 콤마 제거하기 "1,234,123,412,345".replace(/[^\d]+/g, ""); // "1234123412345" 2021. 1. 10. [JavaScript] Object.keys() - 객체의 key 값들만 뽑아내기 스크립트에는 Object.keys() 라는 메서드를 제공해주는데 특정 객체를 대상으로 key값들만 뽑아서 배열로 반환하는 메서드이다. ▷ 구문 Object.keys(obj) 예제를 통해 알아보도록 하자. ▷ 예제1) var obj = { a: 2, b: 42, c: 4 }; Object.keys(obj); // [a, b, c] 이렇게 특정 객체의 key값들만 뽑아서 배열로 반환해주는게 있는가 하면 당연히 value값들만 뽑아서 배열로 반환해주는 메서드도 존재한다. [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 객체에 담아서 사용하다보면 key값들만 뽑아서 사용하거나 val.. 2021. 1. 10. [JavaScript] Object.assign() - 서로 다른 객체 병합하기/합치기 앞서 스크립트에서의 서로다른 문자열 또는 배열을 합치는 방법에 대해 알아봤는데 이번에는 서로 다른 객체를 병합하는 방법에 대해 알아보고자 한다. ▷ 구문 Object.assign(target, ...sources) target: 기준이 될 객체를 의미한다. sources : 기준이 될 객체에 합치려는 객체들을 의미한다. 이제 예제를 통해 알아보도록 하자. ▷ 예제1) 기존의 객체 변수에 병합하기 var mine = {a : 0 , b : 1}; var it = {b : 3, c : 7}; Object.assign(mine, it); // mine = {a: 0, b: 3, c: 7} 위 구문에서 target 과 sources로 나뉘어 있다고 명시해 뒀는데, 예제와 마찬가지로 target이 되는 mine .. 2021. 1. 6. [JavaScript] concat() - 서로 다른 문자열 또는 배열 병합하기/합치기 스크립트를 사용하는 중에 서로 다른 배열 또는 문자열을 합쳐야 하는 경우가 생길 수 있는데, concat() 이라는 메서드에 대해 알아보고자 한다. 제목 그대로 문자열끼리 혹은 배열끼리 사용이 가능한 메서드이며 각각 String.prototype.concat() / Array.prototype.concat()을 의미한다. ▷ 구문 .concat(value1[, value2, value2, ..., valueN]) 예제를 통해 알아보도록 하자. ▷ 예제1) String.prototype.concat() var str1 = 'mine'; var str2 = 'it'; var str3 = 'record'; console.log(str1.concat(str2, str3)); // "mineitrecord" co.. 2021. 1. 5. [JavaScript] canvas 이미지 클립보드에 복사하기 최근 html2canvas.js를 활용하여 canvas에 스크린샷을 찍어서 보여주는 기능을 만들었는데 여기에 추가적으로 클립보드에 복사할 수 있는 기능이 필요하다하여 기록해둔다. 일단 예제를 통해 접근해보자. ▷ 예제1) canvas.toBlob(function(blob){ var item = new ClipboardItem({ "image/png": blob }); navigator.clipboard.write([item]); }); 코드는 일단 canvas에 html2canvas.js를 활용한 스크린샷 이미지가 존재한다는 가정하에 사용이 가능하며 코드 자체는 길지 않다. 다만 몇가지 주의 사항이 있는데 일단 IE에서는 사용이 불가능하다. (IE에서는 역시 되는게 없다...) 그림 출처 : https:.. 2021. 1. 4. 이전 1 ··· 5 6 7 8 9 10 11 다음 반응형
