반응형 Language/JavaScript94 [JavaScript] arr.find() - 특정 조건에 맞는 배열 요소 값 가져오기 (ft. Array.prototype.find()) 특정 조건에 맞는 배열 요소 값의 위치를 찾아내는 Array.prototype.findIndex() 말고도ES6에서 추가된 특정 조건에 맞는 배열 요소 값을 그대로 반환해주는 Array.prototype.find() 메서드 역시 존재한다. findIndex() 메서드에 대해서는 아래 링크를 통해 접해보자.[JavaScript] arr.findIndex() - 조건에 맞는 배열의 특정 값 위치(index) 찾기 (Array.prototype.findIndex()) [JavaScript] arr.findIndex() - 조건에 맞는 배열의 특정 값 위치(index) 찾기 (Array.prototype.findIndex())배열에서 특정 값의 위치(인덱스)를 찾아주는 indexOf 가 존재하는데, 아무래도 상.. 2021. 9. 1. [JavaScript] history.pushState() - 페이지 갱신없이 주소URL 변경하기 스크립트로 페이지를 갱신하지 않고 페이지 주소만 변경하는 방법에 대해 알아보자. 생각외로 url을 이동하지 않은 상태에서 주소창의 url만 변경해야 하는 경우가 생길 수 있다. ▷ 구문 history.pushState(state, title[, url]); state : 세션 히스토리에 넣을 상태 객체 (잘 모르겠으니 null을 넣어주자.) title : 브라우저의 제목 (필요 없을 시 null 사용) url : 변경할 브라우저 URL 예제를 통해 접근해보자. ▷ 예제1) history.pushState() history.pushState(null, null, 'record') ▷ 결과 세번째 매개변수에 넣어준 url로 변경된 것을 확인할 수 있다. 사용하기에 앞서 알아둬야할 것은 HTML5에서 적용된 .. 2021. 8. 25. [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. 이전 1 ··· 4 5 6 7 8 9 10 11 다음 반응형
