본문 바로가기
웹 개발

24. 자바스크립트 다양한 출력들4

by 곽정우 2024. 4. 18.

 

1. 회원가입 기능

 

window.onload = function(){
    const ssn1 = document.getElementById('ssn1');
    ssn1.addEventListener('keyup', () => {
        if(ssn1.value.length >= 6){
            document.getElementById('ssn2').focus();
        }
    });

    const ssn = document.querySelectorAll('.ssn');
    ssn.forEach((s) => {
        // console.log(s);
        s.addEventListener('input', () => {
            document.getElementById('ssncheck').value = 'n';
        })
    })

}

function checkSSN(){
    // alert('주민등록 검증함수!');
    const ssn1 = document.getElementById('ssn1');
    const ssn2 = document.getElementById('ssn2');

    const ssn = ssn1.value + ssn2.value;
    const key = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];

    let total = 0;

    for(let i=0; i<key.length; i++){
        total += parseInt(ssn[i]) * key[i];
    }

    let result = total % 11;
    result = 11 - result;
    if(result >= 10) result = result % 10;

    if(result == ssn[12]){
        alert('유효한 주민등록번호입니다!');
        document.getElementById('ssncheck').value = 'y';
    }else{
        alert('유효하지 않은 주민등록번호입니다');
    }
}

function sendit(){
    // alert('폼이 submit 되었음!');
    const userid = document.getElementById('userid');
    const userpw = document.getElementById('userpw');
    const userpw_re = document.getElementById('userpw_re');
    const name = document.getElementById('name');
    const hp = document.getElementById('hp');
    const email = document.getElementById('email');
    const ssncheck = document.getElementById('ssncheck');
    const checkbtn = document.getElementById('checkbtn');


    const expIdText = /^[A-Za-z]{4,20}$/;
    const expPwText = /^(?=.*[A-Za-z])(?=.*[!@#$%^&*+=-])(?=.*[0-9]).{4,20}$/;
    const expNameText = /^[가-힣]+$/;
    const expHpText = /^\d{3}-\d{3,4}-\d{4}$/;
    const expEmailText = /^[A-Za-z0-9\-\.\_]+@[A-Za-z0-9\-]+\.[A-Za-z]+$/



    if(!expIdText.test(userid.value)){
        alert('아이디는 4자이상 20자이하의 영문자로 입력하세요');
        userid.focus();
        return false;
    }

    if(!expPwText.test(userpw.value)){
        alert('비밀번호는 4자이상 20자이하의 영문자,숫자,특수문자를 1자이상 꼭 포함해야합니다');
        userpw.focus();
        return false;
    }

    if(userpw.value != userpw_re.value){
        alert('비밀번호와 비밀번호 확인이 일치하지 않습니다');
        userpw_re.focus();
        return false;
    }

    if(!expNameText.test(name.value)){
        alert('이름은 한글로 입력하세요');
        name.focus();
        return false;
    }

    if(!expHpText.test(hp.value)){
        alert('휴대폰번호 형식이 일치하지 않습니다');
        hp.focus();
        return false;
    }

    if(!expEmailText.test(email.value)){
        alert('이메일 형식이 일치하지 않습니다');
        email.focus();
        return false;
    }

    if(ssncheck.value == 'n'){
        alert('주민등록번호 유효성검사를 해주세요');
        checkbtn.focus();
        return false;
    }

    return true;
}

 

아래는 회원가입 Javascript 코드 입니다

function checkSSN(){
    // alert('주민등록 검증함수!');
    const ssn1 = document.getElementById('ssn1');
    const ssn2 = document.getElementById('ssn2');
    const ssn = ssn1.value + ssn2.value;
    const key = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
    let total = 0;
    for(let i=0; i<key.length; i++){
        total += parseInt(ssn[i]) * key[i];
    }
    let result = total % 11;
    result = 11 - result;
    if(result >= 10) result = result % 10;
    if(result == ssn[12]){
        alert('유효한 주민등록번호입니다!');
    }else{
        alert('유효하지 않은 주민등록번호입니다');
    }
}

2. 이벤트 타입

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 타입</title>
    <script>
        window.onload = function(){
            const text = document.getElementById('text');
            text.innerHTML = "<strong style='color: deeppink;'>HTML 문서가 로드되었습니다</strong>";
        }
        function changeText(el){
            el.innerHTML = "<strong style='color: deepskyblue;'> 문자열이 변경되었습니다!</strong>";
        }
    </script>
</head>
<body>
    <h2>이벤트 타입</h2>
    <p id="text"></p>
    <p id="p" onclick="changeText(this)">문자열을 클릭하세요</p>
</body>
</html>

 

3. 이벤트 리스너

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 리스너</title>
    <script>
        let btn;
        window.onload = function(){
            btn = document.getElementById('eventBtn');
            btn.addEventListener('click', clickBtn);
            btn.addEventListener('mouseover', mouseOverBtn);
            btn.addEventListener('mouseout', mouseOutBtn);
            const delbtn = document.getElementById('delBtn');
            delbtn.addEventListener('click', delEvent);
        }
        function clickBtn(){
            document.getElementById('text').innerHTML = '<strong>버튼을 클릭했어요</strong>';
        }
        function mouseOverBtn(){
            document.getElementById('text').innerHTML = '<strong>버튼위에 커서가 올라갔어요</strong>';
        }
        function mouseOutBtn(){
            document.getElementById('text').innerHTML = '<strong>버튼 밖으로 커서가 나갔어요</strong>';
        }
        function delEvent(){
            btn.removeEventListener('click', clickBtn);
            btn.removeEventListener('mouseover', mouseOverBtn);
            btn.removeEventListener('mouseout', mouseOutBtn);
            document.getElementById('text').innerHTML = '<strong>이벤트 핸들러가 삭제됐어요</strong>';
        }
    </script>
</head>
<body>
    <h2>이벤트 리스너</h2>
    <p><button id="eventBtn">이벤트 버튼</button> <button id="delBtn">이벤트 삭제 버튼</button></p>
    <p id="text"></p>
</body>
</html>

4.  이벤트 객체

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트객체</title>
    <script>
        window.onload = function(){
            const btn = document.getElementById('btn');
            btn.addEventListener('click', clickBtn);
        }

        function clickBtn(e){
            console.log(e);
            console.log(e.target);
            console.log(e.target.id);
            console.log(e.target.value);

            console.log(e.type);
        }
    </script>
</head>
<body>
    <h2>이벤트객체</h2>
    <button type="button" id="btn" value="확인">확인</button> 
</body>
</html>

 

5. 이벤트 객체2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트객체2</title>
    <script>
        window.onload = function(){
            const btn1 = document.getElementById('btn1');
            const btn2 = document.getElementById('btn2');
            const btn3 = document.getElementById('btn3');

            btn1.addEventListener('click', clickBtn);
            btn2.addEventListener('click', clickBtn);
            btn3.addEventListener('click', (e) => {
                console.log('버튼 3이 눌렸어요');
            });
        }

        function clickBtn(e){
            switch(e.target.id){
                case 'btn1':
                    console.log('버튼 1이 눌렸어요');
                    break;
                case 'btn2':
                    console.log('버튼 2가 눌렸어요');
                    break;
                case 'btn3':
                    console.log('버튼 3가 눌렸어요');
                    break;
            }
        }
    </script>
</head>
<body>
    <h2>이벤트객체2</h2>
    <button type="button" id="btn1">버튼1</button> 
    <button type="button" id="btn2">버튼2</button> 
    <button type="button" id="btn3">버튼3</button> 
</body>
</html>

6. 

7. 

8. 

9.

10. 

11. 

12. 

 

 

 

'웹 개발' 카테고리의 다른 글

26. 자바스크립트 다양한 출력들5  (1) 2024.04.18
25. 자바스크립트 고급 정리1(node.js)  (0) 2024.04.18
23. 자바스크립트 기본 정리4  (0) 2024.04.18
22. 자바스크립트 다양한 출력들3  (0) 2024.04.17
21. 자바스크립트 기본 정리3  (0) 2024.04.17

관련글

티스토리툴바