본문 바로가기
반응형

분류 전체보기706

[jsTree] jstree 유용한 함수모음 jstree 사용할 때 마다 계속 찾아서 쓰기 귀찮아서 지금까지 사용한것들 정리한것이다. (사실 더 나은 방법이 있을수 있다 그냥 썼던거 옮겨놓은거라...) var jstreeExtend = {}; /** * jstree 제어 * elem : jstree dom 객체 */ jstreeExtend.jstree = function(elem){ //jstree 객체 $tree = elem; // jstree 생성 //$tree.jstree({ // //core 제어 // 'core' : { // 'data' : data, // "check_callback" : true // plugins 'dnd'와 같이 사용 이동하고싶을때 // }, // "plugins" : ["dnd","types"], // "types.. 2020. 12. 15.
[jQuery] UI draggable options 적용하기 (ft. containment, handle) 앞서 draggable() 메서드를 통해 드래그 기능을 부여하는 게시글을 작성했었는데 [jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable()) [jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable()) - 지정된 dom 요소 드래그 기능 부여하기 - dom 요소를 제어할 때 드래그 기능을 사용해야 하는 경우가 생길수 있는데 최근에 자주 쓰게 되어서 정리해두고자 한다. jQuery UI 에서 제공하는 기능들이 mine-it-record.tistory.com draggable() 메서드에는 각종 options들이 존재하는데 그 중에서 내가 직접 써본 containment 옵션과 handle 옵션에 대.. 2020. 12. 15.
[JavaScript] arr.filter() - 배열에서 원하는 배열값들만 추려내기/반환하기 (ft. Array.prototype.filter()) 스크립트로 배열을 다룰때 많은 값들을 가진 배열에서 원하는 조건에 맞는 값들만 뽑아내 사용하고 싶을때 Array.prototype.filter() 메서드를 사용하면 손쉽게 할 수 있다. 메서드 이름 그대로 배열에 필터링을 건다고 생각하면 쉽다. ▷ 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) callback : callbackFunction 이며 function 안에서 조건에 따라 true를 반환하는 요소만 가지고 배열을 만들어준다. element : 현재 요소 (ex. 반복문의 현재 요소) index : 현재 요소의 인덱스 array : filter 함수를 사용하는 대상 배열 thisArg : callback을 실행할 때 this로 사용.. 2020. 12. 15.
[JavaScript] Math.(round/ceil/floor) - 반올림/올림/내림 스크립트에는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 내장 객체인 Math 객체가 존재한다. Math 객체 안에는 아주 다양한 메서드가 존재하는데 그 중에서 우리는 흔히 쓰이는 반올림(round)/올림(ceil)/내림(floor) 메서드에 대해 알아보고자 한다. ▷ 구문 Math.round(num) : 반올림 Math.ceil(num) : 올림 Math.floor(num) : 내림 예제를 통해 알아보자. ▷ 예제1) Math.round() Math.round(7.5); //8 Math.round(7.4); //7 Math.round(7.48); //7 Math.round(-7.5); //-7 Math.round(-7.6); //-8 ▷ 예제2) Math.ceil() Math.ceil(6... 2020. 12. 15.
[JavaScript] indexOf() - 문자열 및 배열에서 특정 값의 위치(인덱스) 찾기 (ft. include() 대체 메서드) 문자열 또는 배열에서 특정 값의 위치를 파악해야하여 사용하는 경우가 많은데 찾고자하는 특정 값의 인덱스(위치)값을 알려주는 indexOf() 메서드에 대해 알아보고자 한다. 제목과 마찬가지로 배열 또는 문자열에서 사용 가능한 메서드이며 각각 String.prototype.indexOf() 와 Array.prototype.indexOf()를 의미한다. ▷ 구문 .indexOf( searchElement[, fromIndex] ) 첫번째 매개변수에는 찾고자 하는 값/요소 를 입력하고 (문자열의 경우 대소문자 구분) 두번째 매개변수는 생략이 가능하나 사용하고자 하면 시작 위치를 입력할 수 있다 기본값은 0이다. 예제를 통해 알아보자. ▷ 예제1) String.prototype.indexOf() var str .. 2020. 12. 14.
[JavaScript] includes() - 문자열 및 배열에 특정 요소를 포함하고 있는지 판별/확인 하기 스크립트를 사용하는 중에 배열 또는 문자열에서 어떠한 특정 값이 존재하는지 확인해야하는 경우가 생기는데ES6에서 추가된 includes() 메서드에 대해 알아보고자 한다. 제목과 마찬가지로 배열 또는 문자열에서 사용 가능한 메서드이며각각 String.prototype.includes() 와 Array.prototype.includes()를 의미한다. ▷ 구문.includes( valueToFind[, fromIndex] ) 첫번째 매개변수에는 찾고자 하는 값을 입력하고 (문자열의 경우 대소문자 구분)두번째 매개변수는 생략이 가능하나 사용하고자 하면 시작 위치를 입력할 수 있다 기본값은 0이다. 예제를 통해 알아보도록 하자.▷ 예제1) String.prototype.includes()let str = 'i.. 2020. 12. 14.
[OpenLayers] 특정 영역으로 지도 화면 이동하기 (ft. fit() / duration) - view.fit() 사용하여 특정 영역으로 부드럽게 이동하기 - 지도의 특정 영역으로 이동하는 방법은 찾아보면 되게 많은데 여러 방법중에 부드럽게 애니메이션을 사용하여 움직이는 방법에 대해 알아보자. *다른 게시글에 지도 띄운 소스를 기반으로 작성함으로 그부분은 생략한다. view 에서 fit()이라는 함수를 제공해주는데 이 함수에 애니메이션을 추가할 수 있다. fit은 center와 zoom을 동시에 이동시켜주기에 간단하지만 굉장히 유용하다물론 지금까지 많이 사용 안해본 내 입장에서만이다. 일단 extent를 알고 있다고 가정하에 예제를 통해 진행해보자. ▷일반적인 사용방법 (이동) map.getView().fit(extent1);// extent1 : [12962380.601052666, 4004.. 2020. 12. 7.
[OpenLayers] 현재 지도 화면의 영역(extent) 가져오기 (ft. calculateExtent()) - 현재 지도 map 의 extent 가져오기 - 현재 보고있는 map 화면의 영역(extent) 를 가져오자 일단 지도를 띄우기 위해 코드를 작성한다. doctype html> #map { height: 800px; width: 100%; } OpenLayers-vworld OpenLayers_MAP //기본지도 var baseMap = new ol.layer.Tile({ source: new ol.source.XYZ({ //Vworld Tile 변경 url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png' }) }); var map = new ol.Map({ target : 'map', layers: [baseMap], view: new.. 2020. 12. 7.
[JavaScript] 특정 값이 숫자인지 체크하기 (ft. isNaN() / Number.isNaN()) - 특정 값이 숫자가 맞는지 확인하기- 특정 값이 숫자가 맞는지 체크하기 위해서 자바스크립트에서 제공해주는 isNaN() 메서드가 존재한다. 예제를 통해 쉽게 접근해보자. ▷예제1) isNaN("123") //false isNaN("abc") //true 메서드 안에 숫자를 넣었는데 false가 나오고 문자를 넣었는데 true가 나온게 이상해 보일수는 있으나 NaN이 의미하는 것은 Not a Number 이기 때문에 메서드의 매개변수가 숫자일 경우 false, 숫자가 아닐경우 true를 반환한다. 이렇게보면 숫자인지만 체크하는게 아니라 문자도 체크하는것으로도 볼 수 있는데 isNaN() 메서드는 좀 일반적이지 않은 규칙을 가지고 있으므로 조심해서 사용하는게 좋다. 그래서 나온게 제목에 있는것처럼 Numb.. 2020. 12. 7.
반응형
TOP

티스토리툴바