본문 바로가기

js

 (28)
제이쿼리없이 마우스 드래그 탈 제이쿼리를 하기위해.. 요즘 작성하는 코드마다 열심히 자바스크립트로 하고 있다. 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 셀 한개에 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..
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..
canvas 크기 설정 시 제대로 적용 안될 때 ( chartjs 등 라이브러리사용시 ) chartjs라던가 라이브러리를 사용하면서 canvas를 사용중이라면 canvas의 크기가 지멋대로 설정되는 듯 느낀 경우가 있을 것이다. 해결 방법은 canvas를 감싸고 있는 부모 엘리먼트에 position:relative 속성을 주어서 해결 할 수 있다. 라이브러리를 사용하다보면, 미처 깨닫지 못한 부분의 영향을 받고 있는데 그걸 발견하지 못해서 생기는 경우가 허다하다. 일단 간단하게 canvas 사용시에는 부모에게 position:relative 속성으로 해결함.
javascript 매개변수 배열 자바스크립트에서 함수에 매개변수를 받을 때, 배열로 받으려면 어떻게 해야 될까? 가볍게 아래와 같이 .... 일단 이렇게 함수를 접근해서 진행해보기로 const testObj = { editPop : function( args ){ const f1 = args[0]; const f2 = args[1]; console.log("Inner : ", f1, f2); } } testObj.editPop(["ab","cd"]);
자바스크립트 이미지 확대 라이브러리 자바스크립트 이미지 확대 라이브러리 뭘 쓸까 하다가 panzoom으로 결정! https://fancyapps.com/panzoom/ Panzoom | Fancyapps fancyapps.com 리액트같은... npm 생태계를 사용하지 않고, 그냥 맨 프로젝트에 적용하는 방법입니다! https://fancyapps.com/panzoom/getting-started/ 여기 링크 getting started를 참고해도 됩니다! Panzoom 사용방법 : 1. cdn 연결 또는 npm 으로 다운받은 다음 js와 css만 가져와서 사용하기 . 1-1). 아무 폴더나 만들고 npm init 해줌. 1-2) npm install --save @fancyapps/ui 입력하여 설치. 1-3) node_modules\@..
자바스크립트 배열 json 형식 데이터에서 정수값 실수로 변경하여 새로운 객체로 만들기 자바스크립트 배열 json 형식 데이터가 있습니다. 속성중에 score가 있는데, 이 부분을 일괄적으로 실수로 변경하고자 합니다. const data = [ {"name": "john", "score": 6}, {"name": "david", "score": 7}, {"name": "philip", "score": 8.9} ]; const new_array = data.map(item => { return { ...item, score: parseFloat((item.score).toFixed(1)) }; }); // 결과 출력 console.log(new_array); data 배열을 map 함수를 사용하여 새로운 new_array를 만들어 줍니다. `map()` 메서드에서 콜백 함수의 중괄호(`{}`..

티스토리툴바