반응형 Language/JavaScript64 [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. [JavaScript] window.print() - 프린트 실행 및 프린트 실행 이전/이후 시점 제어하기 스크립트에는 window.print() 라는 메서드가 존재하는데, ctrl + p 와 동일한 기능을 제공하는 프린트 기능이다. ▷ 구문 window.print() 사실 프린트 기능만을 정리하자면 제목에 있는것처럼 window.print()만 있으면 가능하지만 당연하게도 개발을 진행하게되면 여러 상황에 직면하게 되는데 이때 유용하게 도와줄 수 있는 프린트 실행 이전/이후 시점의 처리를 도와줄 방법에 대해서도 알아보자. ▷ 예제1) window.onafterprint / window.onbeforeprint window.onbeforeprint = function () { console.log("onbeforeprint : 프린트 이전에 실행"); } window.onafterprint = function .. 2021. 1. 2. [JavaScript] arr.some() - 배열에 존재하는 값이 특정 조건을 "단 한개"라도 만족하는지 판별하는 함수 (ft. 반복문) Array.prototype.some() 이라는 배열 메서드는 대상 배열에 특정 조건에 만족하는게 "단 하나"라도 존재하는지 확인하는 메서드이다. ▷ 구문 arr.some(callback(curentValue, index, array)[, thisArg]) callback : function 안에서 조건에 맞는게 하나라도 있는지 체크하며, true/false를 반환한다. curentValue: 현재 요소 (ex. 반복문의 현재 요소) index : 현재 요소의 인덱스 array :대상 배열 thisArg : callback을 실행할 때 this로 사용하는 값. 예제를 통해 some() 메서드에 대해 알아보자. ▷ 예제1) var array = [0,1,2,3,4] array.some(function(el.. 2020. 12. 16. 이전 1 2 3 4 5 6 7 8 다음 반응형
