1) 빈문자 확인 하는 방법
1-1) === 연산자 활용
if(id === ''){
alert('아이디를 입력해주세요');
}'' 빈문자 표시와 id(변수로 가정)를 비교하는 방법이다.
id(변수)에 담긴 값이 빈문자와 동일한 경우 true를 반환 한다.
1-2) length 속성 활용
if(id.length === 0){
alert('아이디를 입력해주세요');
}
문자의 길이로 빈문자인지 아닌지 판단하는 방법이다.
아무것도 입력되지 않은 빈 문자의 길이는 0과 같으므로 문자의 길이와 0을 비교하여 0과 일치하는 경우 빈문자로 인식한다.
1-3) Boolean 활용
if(!Boolean(id)){
alert('아이디를 입력해주세요');
}값을 boolean으로 변환 해서 비교하는 방식으로 boolean은 값이 null, undefined, 0, false이면 false를 반환한다.
id가 빈문자인 경우 false를 반환하고 부정연산자를 이용해서 값을 변경했으므로
아이디가 빈문자인 경우 아래 조건을 실행한다로 사용하려면 조건문에 !Boolean(id)를 작성해주면 된다.
2) 로그인 창 만들기 (예시)
사실 실제 로그인 창을 만들려면 서버까지 연결해서 해당 값이 존재하는 아이디고 비밀번호가 일치하고 뭐고 여러 조건을 따져봐야겠지만, 여기서는 아이디와 비밀번호를 입력했는지에만 초점을 둬서 자바스크립트로 조건문을 작성해보려고 한다.
2-1) HTML / CSS 이용해서 화면 만들어주기
<form action="test.html" class="test">
<input type="text" class="loginTest">
<input type="password" class="loginTest">
<button type="submit" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close" onclick="displayStatus();">닫기</button>
</form>
대충 만든 로그인 창으로 위와 같은 형태의 임시 로그인 창이 만들어졌다..ㅎㅎ
2-2) 자바스크립트 구조 짜기
지금 만들려고 하는 기능은 아이디랑 비밀번호를 입력하지 않으면 로그인을 할 수 없게 해야 한다.
그러기 위해서 짜야 하는 로직을 정리해보자면
1) 전송 버튼을 누른다
2) 아이디가 비어있는지 확인한다 = 비어있다면 '아이디를 입력해주세요'라는 알림창을 출력한다.
3) 비밀번호가 비어있는지 확인한다 = 비어있다면 '비밀번호를 입력해주세요'라는 알림창을 출력한다.
4) 둘 다 입력이 되어있다면 성공
여기서 한번 더 생각 해야 할 것은, 우리가 submit 버튼을 누른순간 이미 action에서 지정해놓은 장소로 이동해버린다는 것이다.
여기서는 임시로 test.html을 연결을 해놨다. 자바스크립트가 마저 실행되기 전에 action이 먼저 실행되어 화면이 전환되어 버리는 상황이다. 그러니 한가지 로직을 더 추가 해주면 된다. 전송 버튼을 누른 직후 action이 실행되지 못하게 submit 값을 변경해주면 된다.
이렇게 정리해둔 로직을 토대로 자바스크립트 구조를 짜면 끝
1) 전송 버튼을 누른다.
<form action="test.html" class="test">
<input type="text">
<input type="password">
<button type="submit" class="btn btn-primary" onclick="test(this)">전송</button>
<button type="button" class="btn btn-danger" id="close" onclick="displayStatus();">닫기</button>
</form>
이벤트리스너를 사용 할 수도 있지만 일단 간편하게 onclick을 이용했다.
전송 버튼을 누른 직후 해야 할 일은 submit이 실행되지 못하도록 버튼의 값을 임시로 변경해주는 과정이기 때문에 파라미터 값으로 자기자신을 지칭하는 this를 적어 호출해줬다.
2) action이 실행되지 못하게 submit 값을 변경해준다.
function test(e){
e.type = 'button';
}this의 타입을 button으로 변경을 해줬다.
3) 아이디가 비어있는지 확인한다 = 비어있다면 '아이디를 입력해주세요'라는 알림창을 출력한다.
function test(e){
e.type = 'button';
var loginV = document.getElementsByClassName('loginTest')
if(loginV[0].value === ''){
alert('아이디를 입력해주세요');
}
}아이디의 값을 확인하기 위해서 해당 Input에 접근해야 하는데, 아이디를 직접 지정해줘도 되고 쿼리셀렉터를 이용해도 되고...
여기선 클래스를 미리 지정했으니 클래스선택자로 접근해서 변수에 loginV라는 변수에 담아줬다.
4) 비밀번호가 비어있는지 확인한다 = 비어있다면 '비밀번호를 입력해주세요'라는 알림창을 출력한다.
function test(e){
e.type = 'button';
var loginV = document.getElementsByClassName('loginTest')
if(loginV[0].value === ''){
alert('아이디를 입력해주세요');
}else if(loginV[1].vlaue === ''){
alert('비밀번호를 입력해주세요');
}
}
5) 둘 다 입력이 되어있다면 성공처리
function test(e){
e.type = 'button';
var loginV = document.getElementsByClassName('loginTest')
if(loginV[0].value === ''){
alert('아이디를 입력해주세요');
}else if(loginV[0].value != '' && loginV[1].vlaue === ''){
alert('비밀번호를 입력해주세요');
}else{
e.type = 'submit';
}
}조건 확인 로직을 처리하기 위해 맨 처음 button의 타입을 변경해줬는데
모든 조건에 맞다면 버튼의 타입을 다시 submit으로 돌려줘서 form 태그의 기능이 정상적으로 진행되도록 하면
로그인 창 만들기 완성이다 :)
