본문 바로가기
Web

WEB Front(javascript)

by _dreamgirl 2024. 5. 15.
반응형

--자바스크립트에서 필터 기능 만들기

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 짝수만 필터링
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

--checkbox 타입의 객체의 값이 있는지 없는지, 아니면 undefined인지 체크하는 방법
var checkbox = document.getElementById("myCheckbox");
var isChecked = checkbox.checked;

if (isChecked !== undefined) {
    console.log("Checkbox value is defined");
} else {
    console.log("Checkbox value is undefined");
}


--INPUT BOX에 number로 해놓고 숫자만 입력가능하게 하기              

<input type="text" id="myTextInput" onkeydown="return isNumberKey(event)">

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    // 숫자 키의 ASCII 코드는 48부터 57까지입니다.
    if (charCode >= 48 && charCode <= 57) {
        return true;
    }
    return false;
}

-- Javascript table의 td 데이터 값 가져오기

//tbody 데이터 부분를 tableId 값으로 준다
var table =document.getElementById('testId');
var tableRows;= new Array();
var rows = table.rows.length;

for (i=1; i<rows ; i++) {
var cells = table.rows[i].getElementsByTagName("td");

var cell_1 =this.cells[0].innerHTML; //TD 칼럼1
var cell_2 =this.cells[1].innerHTML; //TD 칼럼2
var cell_3 =this.cells[2].innerHTML; //TD 칼럼3

console.log("@@ col cell_1 : " + cell_1);
console.log("@@ col cell_2 : " + cell_2);
console.log("@@ col cell_3 : " + cell_3);

tableRows[i] = cell_1 + '|' + cell_2 + "|" + cell_3;
}

var form = document.listForm;
form.target = "_self";
form.action = ".do"'
forhttp://m.tableRows.value = tableRows;
form.submit();

-- 날짜 형식 문자열을 YYYY-MM-DD / YYYYMMDD 형태로 만들어서 반황하기


- YYYY-MM-DD 변환
    /**
     * YYYY-MM-DD 형태의 문자를 YYYYMMDD 형태로 변환
     * @param argDate
     * @returns {XML|string}
     */

    function fncDateToStr(argDate){
        var tmp = '';
        if(argDate !== undefined){
            var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
            tmp = String(argDate).replace(/(^\s*)|(\s*$)/gi, '').replace(regExp, ''); // 공백 및 특수문자 제거
        }
        return tmp;
    }

- YYYYMMDD 형태 변환
    /**
     * YYYYMMDD 형태의 문자를 YYYY-MM-DD 형태로 변환
     * @param argStr : 변환할 데이터
     * @returns 변환된 데이터
     */

    function fncStrToDate (argStr){
        var retVal;
        if(argStr !== undefined && String(argStr) !== ''){
            var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
            var tmp = String(argStr).replace(/(^\s*)|(\s*$)/gi, '').replace(regExp, ''); // 공백 및 특수문자 제거
           if(tmp.length <= 4){
                retVal = tmp;
            } else if(tmp.length > 4 && tmp.length <= 6){
                retVal = tmp.substr(0, 4) + '-' + tmp.substr(4, 2);
            } else if(tmp.length > 6 && tmp.length <= 8){
                retVal = tmp.substr(0, 4) + '-' + tmp.substr(4, 2) + '-' + tmp.substr(6, 2);
            } else {
                alert('날짜 형식이 잘못되었습니다.\n입력된 데이터:'+tmp);
                retVal = '';
            }
        }
        return retVal;
    }

반응형

'Web' 카테고리의 다른 글

WEB Front (jquery, jquery mobile)  (0) 2024.05.15
WEB Front(JSTL)  (0) 2024.05.15
자식 팝업창 열려있느지 체크하기  (0) 2024.01.12
파일 업로드 기능 개발  (2) 2023.12.08
request 파라미터 값 설정 및 조회  (0) 2023.11.13

댓글