javascript 정리②

BAEJUN SON·2022년 12월 2일

javascript 정리

목록 보기

2/10

1-9

form 태그

<form>
    <div class="my-3">
        <input id="inputId" type="text" class="form-control">
    </div>
    <div class="my-3">
        <input id="inputPw" type="password" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary" id="successLogin">전송</button>
    <button type="button" class="btn btn-danger" id="closeModal">닫기</button>
</form>

form태그를 이용해 입력을 받고 제출을 할 수 있다.

let inputId = $('#inputId').val();
let inputPw = $('#inputPw').val();

이런 식으로 입력창의 값을 갖고 와

$('#successLogin').on('click', function (e) {

});

이렇게 버튼형식으로 처리할수도있고

$('form').on('submit', function (e) {
  
});

요런식으로 처리할수도 있다. 그리고 콜백함수에 파라미터로 들어간 e는 어따써먹냐?

e.preventDefault();

이 코드를 통해서 submit을 강제로 제어할 수 있다.

1-10

if, else if, else를 이용하자

	$('#loginBtn').on('click', function () {
            if ($(this).html() == '로그인') {
                $('#modal').modal('show');
                $('#closeModal').on('click', function () {
                    $('#modal').modal('hide');
                });
                $('#form').on('submit', function (e) {
                    let inputId = $('#inputId').val();
                    let inputPw = $('#inputPw').val();
                    if (inputId == '' && inputPw == '') {
                        alert('아이디와 비밀번호를 입력해주세요.');
                    } else if (inputId == '') {
                        alert('아이디를 입력해주세요');
                    } else if (inputPw == '') {
                        alert('비밀번호를 입력해주세요');
                    } else if (inputPw.length < 6) {
                        alert('지금 비밀번호는 ' + inputPw.length + '자입니다. 6자 이상으로 입력해주세요');
                    } else {
                        e.preventDefault();
                        $('#modal').modal('hide');
                        $('#loginBtn').html('Logout');
                    }
                });

이런식으로 if문을 이용해 입력에 대한 제약사항을 둘 수 있다.

if ($(this).html() == '로그인')

위 코드는 현재 클릭 된 버튼의 텍스트 값을 가져오는 코드!

1-11

change이벤트, input이벤트

change이벤트를 적용하면 input란이 "포커스를 잃는 순간"
input이벤트를 적용하면 input란에 "입력이 일어나는 순간" 리스너 발동!

 $('form').on('change', function (e){
 
 });

요런식으로 코드를 짜면 입력 창에 어떤걸 입력해서 포커스를 잃을때마다 어떠한 동작을 줄 수 있다.

==와 ===의차이

==은 '느슨한 비교'
===은 '엄격한 비교'

1 == '1' //true
1 === '1' //false

==은 알아서 타입변환을 하여 비교한다.
===은 타입까지 맞아야 true이다.

1-12

3,6,9 게임 만들기

원래는 3의 배수이면 박수치는거였는데 혼자 좀 응용하여 각색을 해 보았다. 이건 찐 369게임 룰대로!

function clapGame(num) {
    divideNum = 10;
    clapCount = 0;
    while (true) {
        gameNumber = Math.floor((num % divideNum) / (divideNum / 10));
        if (gameNumber % 3 == 0) {
            clapCount++;
        }
        if (num / divideNum < 1) {
            if (clapCount == 0) {
                console.log('통과');
                break;
            } else {
                console.log('박수 X' + clapCount);
                break;
            }
        } else {
            divideNum *= 10;
        }
    }
}

1-13 ~ 1-14

jquery로 클래스명 변경하기

$('#navbar').attr('class', 'navbar navbar-dark bg-dark');

navbar라는 id값을 찾아 걔의 class명을 'navbar navbar-dark bg-dark'로 변경해라! 라는 attr 메소드

$('.dark').css('background-color', 'black');

참고로 이건 해당 클래스명을 가진 클래스의 css 속성을 변경하는 코드다.

var, let, const

이름	재선언	재할당	특징
var	O	O	함수 이외엔 전역변수로써 사용된다.
let	X	O	호이스팅 선언과 초기화가 분리되어, 선언과 초기화 사이 참조 불가능한 영역이 생긴다.
const	X	X	선언과 동시에 할당되어야 한다.