본문 바로가기

javascript

 (78)
제이쿼리없이 마우스 드래그 탈 제이쿼리를 하기위해.. 요즘 작성하는 코드마다 열심히 자바스크립트로 하고 있다. HTML : 제목 bbbb JS : function drgg(){ const draggableDiv = document.getElementById('draggableDiv'); const title = document.querySelector("#draggableDiv > h1"); let isDragging = false; let offsetX, offsetY; // h1 제목에 마우스 다운 이벤트를 처리. title.addEventListener('mousedown', (e) => { isDragging = true; offsetX = e.clientX - draggableDiv.getBoundingClientRect..
tabulator rowSelected와 rowClick 차이 tabulator rowSelected와 rowClick 차이를 Chat GPT에게 물어봤다. Tabulator 라이브러리에서 "rowSelected"와 "rowClick"은 행(로우)과 관련된 다른 이벤트입니다. 이 두 이벤트는 행을 선택하거나 클릭할 때 발생하며, 각각 다른 동작을 수행하도록 사용됩니다. 1. **rowClick 이벤트**: - **발생 시점**: 이 이벤트는 사용자가 행을 클릭했을 때 발생합니다. - **발생 조건**: 사용자가 어떤 행을 클릭했을 때만 이벤트가 발생합니다. - **주요 용도**: 주로 행을 클릭했을 때 발생하는 동작을 처리하는 데 사용됩니다. 예를 들어, 클릭한 행의 데이터를 가져와 상세 정보를 표시하거나 다른 동작을 수행하는 데 활용됩니다. 2. **rowSele..
타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 예시 코드 : const mainGrid = { createGrid: function(){ mainGrid.grid1 = new Tabulator('#testGrid', { placeholder:"No Data Set", movableRows:true, movableRowsConnectedTables:'#testGrid', movableRowsReceiver: "add", columns: [ { field: "C_ID", visible:false, }, { field: "C_NM", title: "", width:120, }, { field: "QNTY", title: "량", width:50,}, { field: "INCR", ti..
자바스크립트 module 개념 module 모듈 시스템은 2015년에 표준. 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다. 분리된 파일 -> module 대개 클래스 하나 or 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나. script 태그에 type="module" 어트리뷰트를 추가해주면, 이 파일은 모듈로서 동작합니다. 모듈 스코프에서 정의된 이름은 export 구문을 통해 다른 파일에서 사용할 수 있습니다. 주의할 점이 한 가지 있습니다. import 구문과 export 구문은 모듈 간 의존 관계를 나타내는 것일 뿐, 코드를 실행시키라는 명령이 아니라는 것입니다. 모듈은 자신만의 스코프가 있습니다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없습니다. 참고 : h..
openlayers 참고 https://openlayers.org/doc/tutorials/concepts.html OpenLayers - Basic Concepts Basic Concepts Map The core component of OpenLayers is the map (from the ol/Map module). It is rendered to a target container (e.g. a div element on the web page that contains the map). All map properties can either be configured at construction time, or b openlayers.org https://wldnjd2.tistory.com/23 OpenLayers Map 띄..
Tabulator 타블레이터 그리드(테이블) 2개 그리드1 : tableTempData = [ {ORIGIN:"남구", DETINATION:"남구", passage:"999,999", GRP_ID:"01"}, {ORIGIN:"동구", DETINATION:"남구", passage:"999,999", GRP_ID:"02"}, {ORIGIN:"서구", DETINATION:"남구", passage:"999,999", GRP_ID:"03"} ]; dsrcOD.grid1 = new Tabulator('#'+dsrcOD.pv+'Grid_od',{ data : tableTempData, placeholder:"No Data Set", movableRows:true, movableRowsConnectedTables:'#'+dsrcOD.pv+'Grid', movableR..
오픈레이어스 선 긋기 OpenLayers LineString OpenLayers 버전 v7.4.0 오픈레이어스 선 긋기 예제.. 이거 하나 하느라 몇시간을 불태웠는지.. 후.. 역시 알고나면 아무것도 아닌데, 알기전에는 너무 스트레스다. html : js : // OpenLayers에서 맵을 생성합니다. var map = new ol.Map({ target: 'map', // 맵이 표시될 영역의 ID를 지정합니다. layers: [ // 기본적으로 사용할 레이어를 추가합니다. 여기서는 OSM (OpenStreetMap)을 사용합니다. new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([127.0287172, 37.2635620]), /..
canvas 크기 설정 시 제대로 적용 안될 때 ( chartjs 등 라이브러리사용시 ) chartjs라던가 라이브러리를 사용하면서 canvas를 사용중이라면 canvas의 크기가 지멋대로 설정되는 듯 느낀 경우가 있을 것이다. 해결 방법은 canvas를 감싸고 있는 부모 엘리먼트에 position:relative 속성을 주어서 해결 할 수 있다. 라이브러리를 사용하다보면, 미처 깨닫지 못한 부분의 영향을 받고 있는데 그걸 발견하지 못해서 생기는 경우가 허다하다. 일단 간단하게 canvas 사용시에는 부모에게 position:relative 속성으로 해결함.

티스토리툴바