[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입

Posted at 2020. 9. 10. 18:20 | Posted in JavaScript & jQuery/JavaScript





■ 날짜 입력 형식에 하이픈(-)기호 자동 삽입





# 소스코드

<html>

<head>

<title>:: JavaScript 날짜 하이픈(-) 삽입 ::</title>

<script type="text/javascript">

    function inputYMDNumber(obj) {


        // @see DELETE 키버튼이 눌리지 않은 경우에만 실행

        if(event.keyCode != 8) {


            // @see 숫자와 하이픈(-)기호의 값만 존재하는 경우 실행

            if(obj.value.replace(/[0-9 \-]/g, "").length == 0) {


                // @see 하이픈(-)기호를 제거한다.

                let numberobj.value.replace(/[^0-9]/g,"");

                let ymd = "";


                // @see 문자열의 길이에 따라 Year, Month, Day 앞에 하이픈(-)기호를 삽입한다.

                if(number.length < 4) {

                    return number;

                } else if(number.length < 6){

                    ymd += number.substr(0, 4);

                    ymd += "-";

                    ymd += number.substr(4);

                } else {

                    ymd += number.substr(0, 4);

                    ymd += "-";

                    ymd += number.substr(4, 2);

                    ymd += "-";

                    ymd += number.substr(6);

                }


                // @see 입력 가능 날짜 제한 기능 - 선택

                // if(ymd.length == 10) {

                //

                //     const birthDay = new Date(number.substr(0,4)+"/"+number.substr(4,2)+"/"+number.substr(6)+" 00:00:00");

                //     const limitDay = new Date("2000/10/04 23:59:59");

                //

                //     if(birthDay > limitDay) {

                //         alert("2000년 10월 04일 이후의 날짜는\n선택할 수 없습니다.");

                //         obj.value = "";

                //         obj.focus();

                //         return false;

                //     }

                // }


                obj.value = ymd;


            } else {

                alert("숫자 이외의 값은 입력하실 수 없습니다.");


                //@see 숫자와 하이픈(-)기호 이외의 모든 값은 삭제한다.

                obj.value = obj.value.replace(/[^0-9 ^\-]/g,"");

                return false;

            }

        } else {

            return false;

        }

    }

</script>

</head>

<body>

    <h1>■ 날짜 자동 하이픈(-)기호 삽입</h1>

    <input type="text" onKeyup="inputYMDNumber(this);" value="" placeholder="YYYY-MM-DD" style="text-align:center;"/>

</body>

</html>





# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 입력 텍스트값 Byte 체크[JavaScript] 입력 텍스트값 Byte 체크

Posted at 2020. 9. 10. 15:43 | Posted in JavaScript & jQuery/JavaScript




참고 : https://zzznara2.tistory.com/458







■ 입력 텍스트 값 자동으로 Byte체크하기





다국어 페이지 제작에 따른 입력 텍스트의 글자( Byte단위 )의 체크가 필요했다.


텍스트 박스에 글자를 입력하다가 해당 텍스트가 정해진 Byte의 단위를 넘어서는 경우가 발생하면


자동으로 더 이상의 텍스트 삽입을 막는 예이다.



# 소스코드

<html>

<head>

<title>:: JavaScript Byte 체크하기 ::</title>

<style type="text/css">

    .contents { width : 99%;height : 100px; }

    .viewByte { font-weight : bold;color : red; }

</style>

<script type="text/javascript">


    // @see     설정된 바이트의 크기를 넘어서지 못하게 체크하는 함수

    function inputLimitByteChecked( obj ) {


        var calByte = {

            getByteLength : function( string ) {


                if( string == null || string.length == 0 ) {

                    return 0;

                }


                let size = 0;


                for( let num = 0; num < string.length; num++ ) {

                    size += this.charByteSize( string.charAt( num ) );

                }


                return size;

            }

            , cutByteLength : function( string, length ) {


                if( string == null || string.length == 0 ) {

                    return 0;

                }


                let size = 0;

                let rIndex = string.length;


                for( let num = 0; num < string.length; num++ ) {


                    size += this.charByteSize( string.charAt( num ) );


                    if( size == length ) {

                        rIndex = num + 1;

                        break;

                    } else if( size > length ) {

                        rIndex = num;

                        break;

                    }

                }


                return string.substring( 0, rIndex );

            }

            , charByteSize : function( ch ) {

                if( ch == null || ch.length == 0 ) {

                    return 0;

                }


                let charCode = ch.charCodeAt( 0 );


                if( charCode <= 0x00007F ) {

                    return 1;

                } else if( charCode <= 0x0007FF ) {

                    return 2;

                } else if( charCode <= 0x00FFFF ) {

                    return 3;

                } else {

                    return 4;

                }

            }

        };


        if( calByte.getByteLength( obj.value) > obj.dataset.byte ) {

            alert("작성할 수 있는 텍스트 글자 범위를 초과하였습니다.");

            obj.value = calByte.cutByteLength( obj.value, obj.dataset.byte );

        } else {

            document.getElementsByClassName( "viewByte" )[0].innerText = calByte.getByteLength( obj.value );

        }

    }

</script>

</head>

<body>

    <h1>■ 입력 텍스트의 자동 Byte 체크</h1>

    <textarea class="contents" onKeyup="inputLimitByteChecked( this );" data-byte="255"></textarea>

    <p><span class="viewByte">0</span>&nbsp;Byte 입니다.</p>

</body>

</html>




이제 해당 코드의 출력결과를 살펴보자.


텍스트 박스에 글자를 계속 입력해 나가면 data-byte 에 설정된 255 값이 넘으면 경고창이 나타날 것이다.




# 출력결과




경고창을 닫으면 255 값이 넘어선 텍스트는 자동으로 삭제가 이루어진다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[참고] 구글 앱스 스크립트[참고] 구글 앱스 스크립트

Posted at 2020. 9. 10. 14:33 | Posted in 카테고리 없음






구글 앱스 스크립트의 활용이 중요시 되고 있다.


잘 정리된 블로그가 있어서


나중 학습을 위해 정리한다.





https://smartagent.blog/2018/05/18/appsscript01/

https://smartagent.blog/2018/06/22/appsscript02/

https://smartagent.blog/2018/07/06/appsscript03/

https://smartagent.blog/2018/07/16/appsscript04/

https://smartagent.blog/2019/04/13/appsscript05/

https://smartagent.blog/2019/04/20/appsscript06/

https://smartagent.blog/2020/01/22/appsscript07/

https://smartagent.blog/2020/04/21/appsscript08/





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript][JavaScript]

Posted at 2020. 9. 9. 18:08 | Posted in JavaScript & jQuery/JavaScript



참고#01 : https://kutar37.tistory.com/232

참고#02 : https://kutar37.tistory.com/233

참고#03 : https://coderwall.com/p/pluhsg/google-spreadsheet-json-api-sql-filtering








 

        /*
        jQuery.ajax({
              url:"https://docs.google.com/spreadsheets/d/1aYCyxPrLVA5gUFpKntNyDYZ0Bj0WOFj3fr6z_m0hq44/gviz/tq?tq=SELECT+A%2cB"
            , type:"GET"
            , dataType: "html"
            , success:function( text ) {


                // alert( text.length );   // 문자열 길이
                // console.log( text.substring(47, (text.length - 2)) );

                // @see 불필요한 데이터를 잘라내고 JSON 형태로 다시 만든다.
                const sheetJson = JSON.parse(text.substring(47, (text.length - 2)));

                console.log( sheetJson.table.rows[0].c[0].v );    // 현재월
                console.log( sheetJson.table.rows[0].c[1].v );    // 현재월의 휴장일

                console.log( sheetJson.table.rows[1].c[0].v );    // 다음월
                console.log( sheetJson.table.rows[1].c[1].v );    // 다음월의 휴장일


                console.log("-----------------------------------");
            }
        });
        */


Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Ubuntu] Ubuntu에 Chromium 브라우저 설치하기[Ubuntu] Ubuntu에 Chromium 브라우저 설치하기

Posted at 2020. 9. 9. 12:51 | Posted in Linux/Ubuntu





■ 우분투에 크로미움 브라우저 설치하기




$ sudo apt-get install chromium-brower






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 자바스크립트로 HWP 파일 제어[JavaScript] 자바스크립트로 HWP 파일 제어

Posted at 2020. 9. 7. 16:31 | Posted in JavaScript & jQuery/JavaScript






GitHub : https://github.com/hahnlee/hwp.js

node.js : https://hanlee.io/hwp.js/



관련 내용이 있어서 북마크 해둔다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] 디렉토리내의 파일 정보 가져오기[Node.js] 디렉토리내의 파일 정보 가져오기

Posted at 2020. 9. 7. 01:18 | Posted in Node.js




■ 폴더내의 파일리스트 정보 가져오기




# 소스코드

 directory_list.js

const fs = require( "fs" );


function directoryFileListRead( callback ) {


    fs.readdir( "./testfolder", function( error, filelist ) {


        const fileArr = new Array();

        let breakPoint = 0;


        filelist.forEach( function( file, idx, arr ) {


            fs.stat("./testfolder/" + file, function ( err, stats ) {


                fileArr.push( { fileName : file, birthTime : stats.birthtimeMs } );


                // 반복문 실행회수를 더한다.

                breakPoint++;


                // 배열의 수와 반복문이 실행된 회수가 같은면, 마지막 값까지 반복문이 실행되면 콜백한다.

                if( arr.length === breakPoint ) {


                    // 오름차순 정렬

                    // fileArr.sort(function(a, b) { return a.fileDate < b.fileDate ? -1 : a.fileDate > b.fileDate ? 1 : 0; }); 


                    // 내림차순 정렬

                    fileArr.sort(function(a, b) { return a.fileDate > b.fileDate ? -1 : a.fileDate < b.fileDate ? 1 : 0; });       

                    callback( fileArr );

                }

            });

        });

    });

}


directoryFileListRead( function( fileArr ) {


    console.log( fileArr );

});





# 출력결과

  $ node directory_list.js













Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] googleapis 사용한 Googel Spread Sheet 연동[Node.js] googleapis 사용한 Googel Spread Sheet 연동

Posted at 2020. 8. 26. 14:41 | Posted in Node.js/Google Spread Sheet




API : https://developers.google.com/sheets/api/reference/rest

참고 : https://www.youtube.com/watch?v=MiPpQzW_ya0










 $ npm install googleapis@59.0.0      // 해당 포스팅은 59.0.0 버전을 사용함








■ 구글 시트 데이터 읽어오고, 출력하기





# 원본데이터 - 구글시트






# 소스코드

 google_sheet_select.js

const {google} = require( "googleapis" );

const keys = require( "./사용자_계정_KEY.json" );


const client = new google.auth.JWT(

      keys.client_email

    , null

    , keys.private_key

    , [ 'https://www.googleapis.com/auth/spreadsheets' ]  // 사용자 시트 및 해당 속성에 대한 읽기/쓰기 액세스 허용

);


client.authorize( function( err, tokens ) {


    if( err ) {

        console.log( err );

        return;

    } else {

        gsrunclient );

    }

});


async function gsrun( client ) {


    const sheetsgoogle.sheets( { version : "v4", auth : client } );


    const request = {

          spreadsheetId : "구글_시트_아이디"

        , range : "시트_이름!A2:D10"

        // , range : "twice"    // 범위를 지정하지 않으면 해당 Sheet의 모든 Shell 값을 가져온다.

    };


    const response = ( await sheets.spreadsheets.values.get( request ) ).data;

    console.log( response );

}






# 출력결과











■ 구글 시트 데이터 읽고, 데이터 가공하기





# 원본데이터 - 구글시트






# 소스코드 

 google_sheet_processing.js

const {google} = require( "googleapis" );

const keys = require( "./사용자_계정_KEY.json" );


const client = new google.auth.JWT(

      keys.client_email

    , null

    , keys.private_key

    , [ 'https://www.googleapis.com/auth/spreadsheets' ]  // 사용자 시트 및 해당 속성에 대한 읽기/쓰기 액세스 허용

);


client.authorize( function( err, tokens ) {


    if( err ) {

        console.log( err );

        return;

    } else {

        gsrunclient );

    }

});


async function gsrun( client ) {


    const sheets = google.sheets( { version : "v4", auth : client } );


    const request = {

          spreadsheetId : "구글_시트_아이디"

        , range : "시트_이름!A2:F7"

    };


    const response = ( await sheets.spreadsheets.values.get( request ) ).data;

    const responseArray = response.values;


    // console.log( responseArray );


    // @see LAST NAME과 FIRST NAME을 합친다

    let realNames = new Array();

    responseArray.map( function( val ) {

        realNames.push( val[2] + " " + val[3] );

        return realNames;

    });


    console.log( realNames );

}












■ 구글 시트 데이터 입력하기




# 소스코드

 google_sheet_appends.js

const {google} = require( "googleapis" );

const keys = require( "./사용자_계정_KEY.json" );


const client = new google.auth.JWT(

      keys.client_email

    , null

    , keys.private_key

    , [ 'https://www.googleapis.com/auth/spreadsheets' ]  // 사용자 시트 및 해당 속성에 대한 읽기/쓰기 액세스 허용

);


client.authorize( function( err, tokens ) {


    if( err ) {

        console.log( err );

        return;

    } else {

        gsrunclient );

    }

});


async function gsrun( client ) {


    const sheets = google.sheets( { version : "v4", auth : client } );


    let memberArray = new Array();

    memberArray[0] = new Array( "1", "윤채경", "1996-07-07", "서브보컬" );

    memberArray[1] = new Array( "2", "김채원", "1997-11-08", "메인보컬" );

    memberArray[2] = new Array( "3", "이나은", "1999-05-05", "센터, 서브보컬" );

    memberArray[3] = new Array( "4", "양예나", "2000-05-22", "메인댄서, 리드래퍼, 서브보컬" );

    memberArray[4] = new Array( "5", "레이첼", "2000-08-28", "메인댄서, 리드댄서, 서브보컬" );

    memberArray[5] = new Array( "6", "이진솔", "2001-12-04", "리드보컬, 막내" );


    const request = {

          spreadsheetId : "구글_시트_아이디"

        , range : "시트_이름"

        , valueInputOption : "USER_ENTERED"

        , insertDataOption : "OVERWRITE"    // OVERWRITE or INSERT_ROWS 선택

        , resource : { values : memberArray }

    };


    const response = await sheets.spreadsheets.values.append( request );

    console.log( response );

}




# valueINputOption 설정

설정값

설명

 INPUT_VALUE_OPTION_UNSPECIFIED

 · 기본 입력 값, 이 값은 사용해서는 안 된다.

 RAW

 · 사용자가 입력한 값은 구문 분석되지 않고 그대로 저장된다.

 USER_ENTERED

 · 사용자가 UI에 입력한 것처럼 값을 구문 분석한다.

 · 숫자는 숫자로 유지되지만 문자열은 구글 시트 UI를 통해 셀에 텍스트를 입력할 때

  적용되는 것과 동일한 규칙에 따라 숫자, 날짜 등으로 변환될 수 있다.




# insertDataOption 설정

설정값

설명

 OVERWRITE

 입력되는 데이터값은, 작성된 영역의 셀서식을 그대로 따른다.

 INSERT_ROWS

 입력되는 데이터값은, 입력이 시작될 행의 바로 위에 위치한 행의 셀서식을 그대로 따른다.





# 출력결과 - 구글시트

 $ node google_sheet_appends.js










■ 구글 시트 데이터 수정하기





# 소스코드

 google_sheet_update.js

const {google} = require( "googleapis" );

const keys = require( "./사용자_계정_KEY.json" );


const client = new google.auth.JWT(

      keys.client_email

    , null

    , keys.private_key

    , [ 'https://www.googleapis.com/auth/spreadsheets' ]  // 사용자 시트 및 해당 속성에 대한 읽기/쓰기 액세스 허용

);


client.authorize( function( err, tokens ) {


    if( err ) {

        console.log( err );

        return;

    } else {

        gsrunclient );

    }

});


async function gsrun( client ) {


    const sheets = google.sheets( { version : "v4", auth : client } );


    let memberArray = new Array();

    memberArray[0] = new Array( "1", "쥬리", "1997-10-06", "서브보컬" );

    memberArray[1] = new Array( "2", "연희", "2000-12-06", "리더, 리드보컬" );

    memberArray[2] = new Array( "3", "수윤", "2001-03-17", "메인보컬" );

    memberArray[3] = new Array( "4", "윤경", "2001-11-01", "메인댄서, 서브보컬" );

    memberArray[4] = new Array( "5", "소희", "2003-08-14", "서브보컬" );

    memberArray[5] = new Array( "6", "다현", "2005-04-29", "서브보컬" );


    const request = {

          spreadsheetId : "구글_시트_아이디"

        , range : "시트_이름!A2"  // 범위를 지정해 주지 않으면 A1 행부터 데이터를 덮어 씌운다.

        , valueInputOption : "USER_ENTERED"

        , resource : { values : memberArray }

    };


    const response = await sheets.spreadsheets.values.update( request );

    console.log( response );

}





# 출력결과 - 구글시트


 $ node google_sheet_update.js












■ 구글 시트 데이터 복사, 붙여넣기






# 소스코드

 google_sheet_copy.js

const {google} = require( "googleapis" );

const keys = require( "./사용자_계정_KEY.json" );


const client = new google.auth.JWT(

      keys.client_email

    , null

    , keys.private_key

    , [ 'https://www.googleapis.com/auth/spreadsheets' ]  // 사용자 시트 및 해당 속성에 대한 읽기/쓰기 액세스 허용

);


client.authorize( function( err, tokens ) {


    if( err ) {

        console.log( err );

        return;

    } else {

        gsrunclient );

    }

});


async function gsrun( client ) {


    const sheets = google.sheets( { version : "v4", auth : client } );


    const selectRequest = {

          spreadsheetId : "구글_시트_아이디"

        , range : "복사할_시트_이름!A2:A6"

    };


    const selectResponse = ( await sheets.spreadsheets.values.get( selectRequest ) ).data;

    const responseArray = selectResponse.values;


    const updateRequest = {

          spreadsheetId : "구글_시트_아이디"

        , range : "붙여넣기할_시트_이름!D2"

        , valueInputOption : "USER_ENTERED"

        , resource : { values : responseArray }

    };


    const response = await sheets.spreadsheets.values.append( updateRequest );

    console.log( response );

}





# 출력결과 - 구글시트


 $ node google_sheet_copy.js














Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] exceljs를 이용하여 Excel 파일 읽기[Node.js] exceljs를 이용하여 Excel 파일 읽기

Posted at 2020. 8. 20. 10:35 | Posted in Node.js




npmjs : https://www.npmjs.com/package/exceljs

github : https://github.com/exceljs/exceljs




 npm install exceljs

 



const exceljs = require("exceljs");

const workbook = new exceljs.Workbook();


workbook.xlsx.readFile("./엑셀_파일_이름.xlsx").then(function( ) {


    // 시트네임

    const worksheet = workbook.getWorksheet("투어딜-일반");


    worksheet.eachRow( { includeEmpty:true }, function( row, rowNumber ) {


        console.log( "Row " + rowNumber + " = " + JSON.stringify( row.values ) );

    });

}); 








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] 파일 생성 시간 확인[Node.js] 파일 생성 시간 확인

Posted at 2020. 8. 18. 17:22 | Posted in 카테고리 없음

// sort 참고

// https://ithub.tistory.com/67

// http://dudmy.net/javascript/2015/11/16/javascript-sort/







# 소스코드

const fs = require("fs");


// @see createfolder 폴더에 완성된 파일을 업로드한다.

fs.readdir("./createfolder", function(error, filelist) {

    filelist.forEach(function(file) {

        fs.stat("./createfolder/" + file, function (err, stats) {


            // @see GMT 날짜 데이터 포맷

            let createDate = new Date( stats.birthtimeMs );

            let fileInfo = { fileDate:createDate.ymdhms(), fileName:file };

            console.log(fileInfo);

        });

    });

});


// @see YYYY-MM-DD HH:MM:SS 형식으로 날짜 변경

Date.prototype.ymdhms = function() {

    const year = this.getFullYear().toString();

    const month = (this.getMonth() + 1).toString();

    const date = this.getDate().toString();

    const hour = this.getHours().toString();

    const minute = this.getMinutes().toString();

    const second = this.getSeconds().toString();

    return  year + "-" + (month[1] ? month : "0" + month[0]) + "-" + (date[1] ? date : "0" + date[0])

    + " "

    + (hour[1] ? hour : "0" + hour[0]) + ":" + (minute[1] ? minute : "0" + minute[0]) + ":" + (second[1] ? second : "0" + second[0]);

}




# 출력결과







const fs = require("fs");

const xlsx = require("xlsx");


// @see YYYY-MM-DD HH:MM:SS 형식으로 날짜 변경

Date.prototype.ymdhms = function() {

    const year = this.getFullYear().toString();

    const month = (this.getMonth() + 1).toString();

    const date = this.getDate().toString();

    const hour = this.getHours().toString();

    const minute = this.getMinutes().toString();

    const second = this.getSeconds().toString();

    return  year + "-" + (month[1] ? month : "0" + month[0]) + "-" + (date[1] ? date : "0" + date[0])

    + " "

    + (hour[1] ? hour : "0" + hour[0]) + ":" + (minute[1] ? minute : "0" + minute[0]) + ":" + (second[1] ? second : "0" + second[0]);

}


// 디렉토리 내의 파일을 검색하고 마지막 파일을 리턴한다.

function directoryFileListRead(callback) {


    fs.readdir("./createfolder", function(error, filelist) {


        let fileArr = new Array();

        let breakPoint = 0;


        filelist.forEach(function(file, idx, arr) {


            // 데이터를 일겅온다.

            fs.stat("./createfolder/" + file, function (err, stats) {


                fileArr[idx] = new Array();

                fileArr[idx] = { fileName:file, fileDate:stats.birthtimeMs };


                // 반복문 실행회수를 더한다.

                breakPoint++;


                // 배열의 수와 반복문이 실행된 회수가 같은면 콜백한다.

                if(arr.length === breakPoint) {


                    // fileArr.sort(function(a, b) { return a.fileDate < b.fileDate ? -1 : a.fileDate > b.fileDate ? 1 : 0; });    // 오름차순 정렬

                    fileArr.sort(function(a, b) { return a.fileDate > b.fileDate ? -1 : a.fileDate < b.fileDate ? 1 : 0; });       // 내림차순 정렬


                    // 마지막 데이터를 콜백

                    callback(fileArr[0]);

                }

            });

        });

    });

}


directoryFileListRead(function( fileList ) {


    // 마지막 파일의 정보를 출력한다.

    console.log( fileList );

});






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기