JavaScript Form & Date Object

Let's Just Go·2022년 6월 27일

JavaScript

목록 보기

8/10

JavaScript

Form Object

Form

문서 객체의 하위 객체 중 하나
Back에서 검증을 하기 전에 Front에서 JavaScript로 우선 검증을 진행하는게 효율적

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" name="regForm">
        아이디: <input type="text" name="id"> <br>
        비밀번호: <input type="password" name="pw"> <br>
        번호:
        <div>
            <select name="phone">
                <option>010</option>
                <option>011</option>
                <option>018</option>
            </select>
            - <input type="text" name="phone2">
            - <input type="text" name="phone3">
        </div>

        자기소개: <br>
        <textarea name="intro" cols="50" rows="5"></textarea>
        <br>

        분야:
        <input type="checkbox" name="inter">Java
        <input type="checkbox" name="inter">DB
        <input type="checkbox" name="inter">Jsp
        <input type="checkbox" name="inter">JavaScript

        <button type="button" id="regist" onclick="check()">가입</button>
        <!-- form태그인데 submit이 없다는 것은 js로 검증을 한뒤에 submit을 시키겠다 라는 뜻-->
    </form>

    <script>

        /*
            form  
            - form에도 name이 있어야하고 name으로 모두 접근할 수 있음 
            - document.폼이름.인풋이름으로 접근 

            value : 값을 반환 
            checked : 체크되어 있다면 true, 그렇지 않다면 false
            disable : 비활성화라면 true, 그렇지 않다면 false
            length : 요소 길이 반환 
            focus : 요소에 포커싱 
            submit : form을 제출 (action에 지정한 경로로)
            */

        function check() {
            console.log('check 함수 발동');
            const $form = document.regForm
            if ($form.id.value === '') {
                // form태그안에 name이 id인 값이 없다면 
                alert('아이디는 필수 입니다.');
                return;
            } else if ($form.id.value.length <= 4) {
                alert('아이디는 4글자 이상으로 작성해야합니다.')
                return;
            } else if ($form.pw.value === '') {
                alert('비밀번호는 필수입니다.');
                return;
            } else if ($form.pw.value.length < 8) {
                alert('비밀번호는 8글자 이상으로 입력하세요');
                return;
            } else {
                const $inter = document.getElementsByName('inter');
                let flag = false;
                for (let $ele of $inter) {
                    if ($ele.checked) {
                        // inter라는 이름을 가진 check박스가 checked되어 있다면 
                        flag = true;
                        break;
                    }
                }
                if (!flag) {
                    // 한개도 체크 안헸으면
                    alert('분야를 한 개 이상 체크하세요');
                    return;
                }
            }
            if (confirm('회원가입 하시겠습니까?')) {
                $form.submit();
                // 여기서 submit을 진행 
                // 이거 진짜 중요 
                // 프로젝트를 이렇게 바꿔보기
            } else {
                return;
            }
        }
    </script>
</body>

</html>

Date Object

Date

밀리초로 시간의 값을 가져와서 Date객체를 통해 시간을 계산하여 불러올 수 있음

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        let date = new Date();
        // 지금 이 시간의 날짜를 가진 객체 

        console.log(date.getTime());
        // 지금 날짜를 밀리초로 구한 것
        const millis = 169034769483;

        const today = new Date(millis);
        console.log(today.getTime());

        console.log(today);
        // 객체에 매개값으로 밀리초를 주게 되면 getTime()함수를 통해 시간을 알 수 있음
        console.log(today.getFullYear())
        // 년
        console.log(today.getMonth() + 1);
        // 월 (1월을 0으로 체크하기 때문에 +1 해야함)
        console.log(today.getDate());
        // 일 
        console.log(today.getMinutes());
        // 분 
        console.log(today.getSeconds());
        // 초

        const gap = date.getTime() - millis;
        console.log(gap);

        let time;
        if (gap < 60 * 60 * 24 * 1000) {
            // 하루를 뜻함

            if (gap < 60 * 60 * 1000) {

                // 한시간을 뜻함
                time = '방금 전';
            } else {
                time = gap / (60 * 60 * 1000) + '시간 전';
            }
        } else {
            // 1일 이상 넘어간 경우 
            const checktime = new Date(gap);
            console.log(checktime);
            console.log(checktime.getFullYear());
            time = `${checktime.getFullYear() - 1970}년 전`;
            console.log(time);
        }
    </script>

</body>

</html>

Let's Just Go

안녕하세요! 공부한 내용을 기록하는 공간입니다.

이전 포스트

JavaScript Event Propagation

다음 포스트

JavaScript Form & Date Object

JavaScript

JavaScript

Form Object

Date Object

JavaScript Event Propagation

JavaScript BOM

0개의 댓글