자바스크립트 입문과 웹UI 정리

 

폼 만들기

<div class="black-bg">
    <div class="white-bg">
        <h4>로그인하세요</h4>
        <form action="success.html">
            <div class="my-3">
                <input type="text" class="form-control" id="text_id">
            </div>
            <div class="my-3">
                <input type="password" class="form-control" id="text_pass">
            </div>
            <button type="submit" class="btn btn-primary" id="send">전송</button>
            <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form>
    </div>
</div>
<button id="test_btn">버튼</button>
<script>
    $('#test_btn').on('click', function () {
        $('.black-bg').addClass('btn_show');
    })
    $('#close').on('click', function () {
        $('.black-bg').removeClass('btn_show');
    })

    $('.black-bg').on('click', function(e){

        // e.target; //유저가 실제로 누른 것
        // e.currentTarget; //이벤트리스너 달린 곳
        console.log($(e.target))
        console.log($('.black-bg'))
        // $('.black-bg').removeClass('btn_show');

        if ($(e.target).is($('.black-bg'))){
            $('.black-bg').removeClass('btn_show');
        }
    })

    $('form').on('submit', function(e){
        let text_id = document.getElementById('text_id').value;
        let text_pass = document.getElementById('text_pass').value;
        let text_id_length = document.getElementById('text_id').value.length;
        let text_pass_length = document.getElementById('text_pass').value.length;

        console.log(text_id_length)
        if (text_id == 0){
            alert('아이디 입력하셈');
            e.preventDefault();
        } else if (text_pass == 0) {
            alert('비밀번호 입력하셈');
            e.preventDefault();
        } else if(text_pass_length < 6){
            alert('비밀번호 더 길게 입력하셈');
            e.preventDefault();
        } else{
            e.preventDefault();
        }
    });
</script>

- 제이쿼리의 $(select).on('click', function(){})은 자바스크립트 select.addEventListener('click', fucntion(){})과 같은 의미

- 제이쿼리의 $(select).on('click', function(e){}) 함수 안에 `e`를 넣으면 `e.target`은 유저가 실제로 누른 것을 불러옴

- $(select).is(select)는 괄호 안의 값에 따라 `true`와 `false`로 반환함

- `.preventDefault()`는 `a`나 `submit`같이 페이지 이동이나 새로고침의 동작을 막아줌

(비슷한 예시로 `.stopPropagation`도 사용할 수 있는데 이 메서드는 이벤트버블링을 막아줌)

 

 

다크모드

<nav class="navbar navbar-light bg-ligh">
    <div class="container-fluid">
        <span class="navbar-brand">JSShop</span>
        <span class="badge bg-dark">Dark</span>
        <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

<script>
    var count = 0;

    $('.badge').on('click', function () {
        count++;
        if (count % 2 == 1) {
            $(".badge").removeClass("bg-dark");
            $(".badge").addClass("bg-light");
            $(".badge").html("Light");
        } else {
            $(".badge").removeClass("bg-light");
            $(".badge").addClass("bg-dark");
            $(".badge").html("Dark");
        }
    })
</script>

- 다크모드를 만드는 방법은 여러 개가 있는데 위 방법은 카운트를 사용해서 구현(카운트가 홀수면 기본모드, 짝수면 다크모드)

- 다크모드를 클릭하면 각 클래스에서 기본모드 클래스를 지우고 다크모드 클래스를 추가하는 방식

 

 

setInterval, setTimeout 메소드

<div class="alert alert-danger" id="txt">
    5초 이내 구매시 사은품 증정!
</div>

<script>
    var second = 5;
    setInterval(reduce, 1000);
    setTimeout(dissapear, 5000);
    function reduce(){
        second--;
        document.getElementById('txt').innerHTML =  second + "초 이내 구매시 사은품 증정!";
    }
    function dissapear(){
        $('#txt').hide();
    }
</script>

- `setInteravl()`메소드는 일정시간 간격으로 계속 실행

- `setTimeout()`메소드는 일정시간 이후 한 번만 실행

 

 

if구문 return

console.log(vat(8000));
function vat(a){
    var num = (a * 0.12 * .741 * 1.5).toFixed();
    parseFloat(num);
    if(isNaN(num)) {
        console.log("num은 숫자가 아닙니다.")
    }else if(isNaN(num) == false) {
        console.log("num은 숫자가 맞습니다.")
    }
    return num
}

- `.toFixed()`는 소수점을 지정하는 함수 (괄호 안의 숫자만큼 소수점을 나타냄)

- `parseFloat()`는 문자열을 숫자로 변환해 주는 함수. 첫 글자가 무조건 숫자로 시작해야 함 (parseFloat(abc) => NaN, parseFloat(1.12abc) => 1.12(뒤의 알파벳 무시))

- `isNaN()`은 숫자인지 확인하는 함수. 숫자가 아닐 경우 true, 숫자가 맞을 경우 false