본문 바로가기

Javascript30

Javascript 로더(Loader) 만들기 자바스크립터와 CSS로 간단하게 로더를 만드는 코드입니다.jquery 라이브러리를 함께 사용합니다. CSS.loadingPopup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 1000; justify-content: center; align-items: center;}.spinner { position: absolute; top: 50%; left: 50%; border: 8px solid #f3f3f3; /* Light grey */ border-top: 8px .. 2024. 7. 4.
자바스크립트 크롬에서 엣지로 링크 열기 특별한 경우 크롬에서 엣지 브라우저로 링크를 열어야 하는 경우가 있습니다. 예를 들면 회사에 엣지 기반으로 개발된 시스템은 크롬에서 정상 작동을 하지 않을 경우에 크롬 기반으로 개발하는 시스템에서 엣지 기반의 타 시스템을 엣지로 열어야 할 때입니다. 참고 : 반대로 엣지에서 크롬으로 여는 것은 안되네요. ㅠㅠ 자바스크립트 코드는 간단합니다. URL에 앞에 "microsoft-edge:"를 붙여주기만 하면 됩니다. 자바스크립트 예 window.location = "microsoft-edge:" + "https://www.naver.com"; HTML 예 엣지로 네이버 열기 2023. 11. 8.
자바스크립트 ==와 ===의 차이점 최근 개발하면서 프로그램에 버그가 발생하였습니다. 버그는 자바스크립트로 아래와 같이 처리 했는데, if문이 참이 되어 발생한 것이었습니다. 그래서 === 비교 연산자를 사용하여 버그를 수정하였습니다. var a = 0; var b = ""; if(a == b){ // true ... } ==와 === 비교 연산자의 차이점을 알아야 할 것 같습니다. == 연산자는 값만 비교하고, === 연산자는 값과 타입을 함께 비교하게 됩니다. 즉 1 == "1" 는 true이고, 1 === "1"은 false가 된다는 것입니다. 간단하 예제로 확인해보겠습니다. 숫자와 문자 비교 console.log(1 == "1");// true console.log(1 ==="1");// false 숫자와 참거짓 비교 console.. 2023. 10. 25.
자바스크립트 "YYYY-MM-DD" 형식의 문자 날짜 체크 자바스크립트로 날짜 정확한 날짜를 체크하는 것이 약간 애매합니다. Date.parse를 사용하면 좋은데, 단점이 2월 30일(2023-02-30)을 아규먼트로 넣어도 오류(NaN)가 발생하지 않는 현상이 발생합니다. 그리고 new Date("2023-02-30")로 넣어도 오류가 발생하지 않아 try catch를 할 수 없습니다. 날짜 문자(YYYY-MM-DD)를 체크 로직 순서는 아래과 같이 작성합니다. (1) YYYY-MM-DD 형식 체크 (2) Date.parse를 이용하여 정확한 날짜 체크 (3) new Date(...).toISOString() 함수로 날짜 문자와 Date형으로 형변환한 값이 동일한지 체크 1. YYYY-MM-DD 형식 체크 날짜 문자의 길이는 10이고, "-"로 문자를 분리한 .. 2023. 8. 29.
[SlickGrid] 셀(Cell)에 툴팁(Tooltip) 표시하기 SlickGrid의 Header의 툴팁은 컬럼 정의에서 속성으로 처리를 할 수 있습니다. 셀의 경우는 좀 다르게 처리를 해야 셀에 툴팁을 표시 할 수 있습니다. 즉, 셀에 Format을 적용하여 처리를 해야 하네요. 1. SlickGrid Version 아래의 예는 SlickGrid v2.4에서 테스트 했으며, 하위 버전에서는 작동하지 않을 수도 있습니다. 2. 툴팁을 위한 Format 함수 셀에 툴팀을 표시하기 위해서는 Format의 리턴 값을 JSONObject로 속성 text와 toolTip을 갖고 있어야 합니다. text는 그리드 셀에 표시되고, toolTip은 셀에 마우스 오버가 되면 툴팁으로 표시됩니다. function tooltipCellFormat(row, cell, value, colum.. 2023. 7. 13.
HTML의 특정 Input에 붙여넣기 못하게 처리하는 방법 HTML의 특정 Input에 붙여넣기를 할 수 없도록 처리가 필요한 경우가 있습니다. 이럴경우 paste 이벤트를 등록하여 처리 할 수 있습니다. 아래의 소스를 참고하세요. 이름 설명 2022. 9. 22.
Javascript 숫자 반올림 및 천자리 ","표시 함수 숫자를 특정 소숫점 자리에서 반올림하거나 천자리를 ","를 넣는 작업을 많이 합니다. 자바스크립트로 숫자 반올림 및 천자리 ","표시하는 함수를 만들어서 사용하게 되었습니다. 아래의 함수를 참고하세요. function roundNumberToString(value, roundCnt){ try{ var round = 1; for(var i = 0 ; i < roundCnt ; i++){ round *= 10; } var numValue = parseFloat(value); if(isNaN(numValue)){ throw "Not Number"; } // roundCnt 만큼 반올림 및 수숫점 자리 고정 var returnValue = (Math.round(numValue*round)/round).toFix.. 2022. 9. 19.
SlickGrid 엑셀 익스포트하기 SlickGrid의 데이터를 엑셀로 익스포트하는 방법입니다. 즉 포론트엔드에 표시된 SlickGrid의 데이터를 엑셀로 내려받을 수 있는 기능입니다. 아래의 GitHub의 SlickGrid-Export-to-Excel/dist의 모든 파일을 서버의 특정위치에 복사하세요. 저는 /SlickGrid/dist에 복사했습니다. https://github.com/ranjithprabhuk/SlickGrid-Export-to-Excel GitHub - ranjithprabhuk/SlickGrid-Export-to-Excel: jQuery plugin to export the entire data from slick grid to excel. A client si jQuery plugin to export the e.. 2022. 8. 9.
SlickGrid 데이터 초기화하기 SlickGrid의 데이터를 초기화하는 함수를 작성해서 사용하고 있습니다. SlickGrid의 데이터를 DataView에 넣어서 사용하거나, JSON 데이터를 직접 넣어서 사용하는 경우를 모두 처리 할 수 있는 함수를 만들었습니다. SlickGrid에 DataView 사용하는 코드 var dataView = new Slick.Data.DataView(); var grid = new Slick.Grid("#gridContainer", dataView, gridColumns, options); SlickGrid에 JSON 데이터 사용하는 코드 var datas = [ { "name":"홍길도", "age":50 }, { "name":"이순신", "age":42 }, { "name":"김유신", "age":2.. 2022. 7. 12.
SlickGrid 정렬 관련 구현 SlickGrid로 정렬 기능을 추가하고, 프그램으로 정렬을 하던지 또는 정렬을 초기화 하는 방법에 대해서 알아보겠습니다. 아래의 코드는 SlickGrid 생성 및 정렬 로직입니다. // 그리드 옵션 var options = { editable: true, enableAddRow: false, enableCellNavigation: true, autoHeight: false, enableColumnReorder: false }; // 그리드 컬럼 var columns = [ { id: "COL_ID_01", field: "COL_ID_01", width:80, cssClass: "text_center", formatter: verCellMergedFormatter, sortable: true, name:.. 2022. 6. 29.
SlickGrid 마우스 휠 제대로 작동하지 않을 경우 처리 방법 SlickGrid의 세로 스크롤이 제대로 작동하지 않는 경우가 있습니다. 예를 들면 마우스 휠을 연속으로 내리거나 올릴때 스크롤의 이동이 멈추는 현상이 있습니다. 그리고 컬럼을 고정하는 경우 고정된 컬럼에서는 마우스 휠이 작동하지 않습니다. 해결 방법으로는 SlickGrid 소스 내의 lib/jquery.mousewheel.js 를 페이지내에 포함(include)시키면 문제는 해결됩니다. 2022. 6. 13.
SlickGrid 세로 셀 병합(?)하기 SlickGrid는 무료이고, 대용량을처리하기에 매우 좋습니다. 하지만 상용 Grid에 비해서는 기능이 좀 떨어지기도 하죠. SlickGrid에서 세로 셀을 병합이라고 제목을 쓰기는 했지만, 사실 동일 값에 대해서 두번째 Row부터 값을 표시하지 않도록 처리하는 방법입니다. 하나의 세로 셀만 병합 코드 function verCellMergedFormatter(row, cell, value, columnDef, dataContext) { if(row == 0) return value; var items = dataView.getFilteredItems(); var preValue = items[row - 1][columnDef.field]; if(value == preValue) return ""; els.. 2022. 5. 20.
SlickGrid Cell 수정 중 Grid Data 반영하기 SlickGrid의 Cell을 수정 중에 저장 버튼을 클릭하면 Grid Data에 반영 안됩니다. Cell을 수정하고 SlickGrid의 다른 Cell을 클릭하거나, 엔터키를 입력하면 Grid Data에 반영되지만, 매우 번거롭습니다. 저장 버튼을 클릭 할 때 Grid Data를 반영하는 코드는 아래와 같으며, 취소도 할 수 있습니다. Cell 수정 중인 값 Grid Data반영하기 var grid = new Slick.Grid("#gridContainer", dataView, gridColumns, options); ... grid.getEditController().commitCurrentEdit(); Cell 수정 중인 값 취소하기 var grid = new Slick.Grid("#gridConta.. 2022. 5. 13.
SlickGrid Cell 달력 표시 한글 처리하기 SlickGrid의 Cell 에디터 중 달력(Slick.Editors.Date)의 경우 JQueryUI의 Date Picker사용합니다. 따라서 아래와 같이 처리하면 한글로 표시됩니다. $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', prevText: '이전 달', nextText: '다음 달', monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일', '월', '화'.. 2022. 5. 12.
SlickGrid - Cell 수정 중 저장 버튼 클릭 시 수정 된 데이터 Grid Data에 반영 시키기 SlickGrid의 Cell 편집 모드에서 데이터를 수정 후 엔터키를 입력하거나, SlickGrid의 다른 Cell을 클릭하면 Grid Data에 수정 된 값이 반영된다. 하지만 Input 버튼 등의 onClick 이벤트로 저장을 하려고 하면 수정된 값이 Grid Data에 반영되지 않는다. 따라서 저장 로직을 수행하기 전에 현재 그리드의 수정을 Commit해주어야 한다. function save(){ // 현재 수정을 Commit하여 Grid Data에 반영한다. grid.getEditController().commitCurrentEdit(); // 저장 로직 수행... } 2021. 11. 10.
Javascript JSONObject 배열 정렬하기 JSONObject로 구성된 배열(Array)를 정렬하는 방법입니다. [소스] var arr = [ { "name":"홍길도", "age":50 }, { "name":"이순신", "age":42 }, { "name":"김유신", "age":28 } ]; // 숫자 정렬 arr.sort(function(a,b) { return a.age - b.age; }); console.log(arr); //문저 arr.sort(function(a,b) { if(a.name > b.name) return 1; else if(a.name < b.name) return -1; else return 0; }); console.log(arr); [결과] 2021. 10. 18.
Javascript 숫자에 천단위로 콤마(,) 넣기 쉽게 숫자에 천단위에 콤마를 넣는 방법입니다. Intl.NumberFormat() 사용 var number = 1234567890.123456; // 브라우저의 Local에 따라 표시 console.log(new Intl.NumberFormat().format(number)); // 한국 Local로 표시 console.log(new Intl.NumberFormat('ko-KR').format(number)); // 독일 Local로 표시 // 독일의 경우 천단위에 "."을 소숫점을 ","로 표시함. console.log(new Intl.NumberFormat('de-DE').format(number)); // 천단위 와 소숫점 자리(5자리) 표시 // "0"을 5자리까지 채우지는 않음 console.l.. 2021. 8. 3.
[Javascript] 크롬 브라우저에서 클립보드에 문자 복사하기 크롬 브라우저에서 문자를 클립보드에 복사하는 코드입니다. 아래의 함수에 문자열을 넣으면 클립보드에 문자가 복사됩니다. function copyStringToClipboard (string) { function handler (event){ event.clipboardData.setData('text/plain', string); event.preventDefault(); document.removeEventListener('copy', handler, true); } document.addEventListener('copy', handler, true); document.execCommand('copy'); } 전체소스 2021. 7. 21.
SlickGrid 순번 컬럼 넣기 SlickGrid의 Formatter를 이용하여 순번 컬럼넣는 방법입니다. Formatter를 활용하면 조건에 따라 Sum, 색상 등의 자유롭게 사용가능합니다. 순번 Formatter 소스로 row Index는 0부터 시작이므로 1을 더해주면 순번이 됩니다. function NumberFormatter(row, cell, value, columnDef, dataContext) { return row + 1; } 위의 Formatter를 컴럼에 적용합니다. var columns = [ {id: "no", name: "No", field: "no", formatter: NumberFormatter}, ... ]; 실행하면 첫번째 컬럼에 순번이 표시됩니다. 전체 소스입니다. 2021. 7. 19.
Javascript에서 Json Object의 Key(name), Value 쉽게 얻기 Javascript에서 Json Object의 key, value를 for in 문으로 얻는 방법입니다. 간혹 key와 value를 배열에 넣어서 사용하는 경우가 있는데 아래는 해당 예제입니다. var jsonObj = {ID : 'DOCKO', PW : '1234560', NAME : '이름', AGE : 19}; var keys = []; var values = []; for(var key in jsonObj){ keys.push(key); values.push(jsonObj[key]); console.log(key + " : " + jsonObj[key]); } console.log("키 : " + keys); console.log("값 : " + values); 2021. 7. 16.
Slickgrid 멀티헤더(slickgrid-colgroup-plugin) Slickgrid에서 기본적으로 멀티헤더를 지원하지 않습니다. 그래서 멀티헤더를 지원하는 플러그인(slickgrid-colgroup-plugin)을 이용해야 합니다. Slickgrid의 멀티헤더 플러그인은 slickgrid-colgroup-plugin으로 아래의 URL을 참고하세요. https://github.com/keik/slickgrid-colgroup-plugin keik/slickgrid-colgroup-plugin SlickGrid plugin to create column group in a header. - keik/slickgrid-colgroup-plugin github.com 1. 아래의 URL에서 slick.colgroup.js 소스를 Slickgrid 폴더의 plugins에 생성합.. 2021. 7. 10.

티스토리툴바