반응형 Language/JavaScript64 [JavaScript] obj.hasOwnProperty() - 객체가 특정 프로퍼티를 가지고 있는지 확인하기 (ft. Object.prototype.hasOwnProperty()) 객체가 특정 키를 가지고 있는지 확인하는 Object.prototype.hasOwnProperty() 메서드에 대해 알아보자. ▷ 구문 obj.hasOwnProperty(prop) prop: 확인 하고자 하는 프로퍼티 명 예제를 통해 접근해보자. ▷ 예제1) Object.prototype.hasOwnProperty() var obj = {}; obj.mine = 42; console.log(obj.hasOwnProperty('mine')); // true console.log(obj.hasOwnProperty('it')); // false 예제에서 보는것 처럼 해당 객체의 프로퍼티의 존재 유무를 판단하는 것이다, 프로퍼티의 값이 무엇이든 프로퍼티가 존재하기만 하면 true를 반환하고 존재하지 않을경우 f.. 2021. 8. 18. [JavaScript] slice() - 배열 및 문자열 자르기 (ft. 얕은 복사) 스크립트를 사용하는 중에 배열 또는 문자열을 잘라서 사용하는 경우가 많은데 배열 과 문자열을 자르는데 사용하는 동일한 메서드 slice()에 대해 알아보자. 내부적으로는 각각 String.prototype.slice() 와 Array.prototype.slice()로 서로 다르지만 직접 사용을 함에는 같은 방식을 사용한다. ▷ 구문 .slice(beginIndex [, endIndex]) 문자열과 배열 둘다 인덱스를 가지는데 그 인덱스를 가지고 잘라서 사용이 가능하다. 예제를 통해 알아보도록 하자. ▷ 예제1) String.prototype.slice() var str = 'it is mine-it-record tistory blog'; console.log(str.slice(21)); // "tisto.. 2021. 8. 7. [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. 이전 1 2 3 4 5 6 7 8 다음 반응형
