본문 바로가기
반응형

javascript91

[JavaScript] 객체를 문자열로 변환하기 (ft. JSON) javascript에서 사용하는 객체를 문자열로 변환하는 방법에 대해 알아보자. 사실 객체를 문자열로 변환하고자 할때 toString()이라는 메서드에 대해 많이 들어왔을텐데 script에서 객체를 대상으로 toString()을 사용한다면 전혀 생각지도 못한 결과가 나온다. 아래 예제를 통해 결과를 확인해보자. ▷예제1) obj.toString() var it = {a: 'mine', b : 'it', c : 'record'} it.toString(); // "[object Object]" 이렇게 되면 "[object Object]"라는 반환값을 얻게 되는데 이게 도통 뭔지 모르겠다... (아래 잘 정리된 게시글이 있으니 확인해보자. 좀 어려울 수 있다.) ▶ 자바스크립트에서 [object Object].. 2021. 7. 21.
[JavaScript] arr.join() - 배열을 특정 구분자를 기준으로 문자열로 변환하기 (ft. Array.prototype.join()) 스크립트로 배열을 다룰때 배열안에 있는 값들을 특정 구분자를 기준으로 문자열로 변환해주는 Array.prototype.join() 메서드에 대해 알아보자. ▷ 구문 arr.join([separator]) separator: 배열의 각 요소를 구분할 문자열을 지정한다. 일명 구분자로 생략 시 기본값은 쉼표(,)이다. 예제를 통해 알아보자. ▷ 예제1) Array.prototype.join() 기본 사용법 var arr = ['mine', 'it', 'record'] // mine,it,record var joinA = arr.join(); // mine-it-record var joinB = arr.join('-'); // mineitrecord var joinC = arr.join(''); ▷ 예제2) .. 2021. 3. 27.
[JavaScript] iframe 부모창 새로고침하기 iframe을 사용해보면 알겠지만 iframe 특성상 새로고침이나 url 이동을 하게되면 해당 iframe 창만 새로고침되고 이동하게 되는 상황이 발생한다. 이때 그냥 페이지 자체를 새로고침 하고 싶은데 그 방법에 대해 가볍게 알아보자. 그냥 별다른거 없이 parent에 접근만 해주면된다. window.parent.location.reload(); // 부모창 새로고침 window.parent.location.href = url; //url 입력 2021. 3. 13.
[JavaScript] 현재 브라우저 버전 체크하기 (ft. navigator.userAgent) 언제 사용될지는 모르겠지만 나 같은 경우는 Edge 버전을 체크하는데 사용하였다. Edge역시 구버전 신버전(Chromium)이 존재하는데 이 역시 사용 가능한 함수들이 다르기때문에 체크해주었다. 일단 현재 브라우저 버전 체크에 사용되는 navigator.userAgent를 예제를 통해 살펴보자. ▶예제1) 브라우저 별 navigator.userAgnet ▷ IE (익스플로러) Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko ▷ Edge (엣지) Mozilla/5.0 (Windows NT.. 2021. 3. 13.
[JavaScript] IE 에서 Edge browser 열기 (ft. microsoft-edge) 끔찍한 IE에서 접근했을 시 Edge browser를 강제로 여는 방법에 대해 알아보자. 사실 그렇게 어려운 코드는 아니다. window.location에 'microsoft-edge:'를 추가해주면된다. 일단 이걸 사용하기에 앞서서 현재 브라우저의 상태를 체크해주는게 존재하는데 navigator.userAgent 라는 녀석이다. 이걸 염두에 두고 예제를 통해 알아보자. ▶예제1) if(navigator.userAgent.indexOf("Trident") > 0){ console.log("exLog") window.location = 'microsoft-edge:' + url //url : 이동할 주소 } else if(/MSIE \d |Trident.*rv:/.test(navigator.userAgen.. 2021. 3. 13.
[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.
반응형
TOP