ITWILL : 아이디와 비번입력, 새로고침location.reload(), 주석한번에 단축키, switch문 출력문 한줄리팩토링

ITWILL학원 : 5강 JS기초 BY 정규태강사

1.아이디와 비번체크

location.reload()는 새로고침의 역할을 한다

1. 아이디와 비번을 존재유무 동시에 체크

const id = "itwill001"
const pw = "it8030909"
let inputId = prompt("아이디를 입력하세요", "")
let inputPw = prompt("비밀번호를 입력하세요", "")

if(id === inputId){
	if(pw === inputPw){
		alert(inputId+"님 환영합니다")
	}else{
		alert("비밀번호가 일치하지 않습니다")
		location.reload();
	}
}else{
	alert("존재하지 않는 회원입니다.")
	location.reload();
}

2. 아이디 존재유무 먼저 체크후 비번 체크

const id = "itwill001"
const pw = "it8030909"
let inputId = prompt("아이디를 입력하세요", "")

if(id === inputId){
	if(pw === inputPw){
		alert(inputId+"님 환영합니다")
		let inputPw = prompt("비밀번호를 입력하세요", "")
	}else{
		alert("비밀번호가 일치하지 않습니다")
		location.reload();
	}
}else{
	alert("존재하지 않는 회원입니다.")
	location.reload();
}

DB를 쓰면 알게되겠지만 2번방법은 아이디한번 비번한번 두번을 가져와야해서 비효율적이다
1번을 사용하는 것을 권장한다

3. html내에서 id로 가져와서 로그인페이지 완성
   내가 궁금해져서 네이버처럼 로그인페이지를 만들어봤다

<img src="https://lh3.googleusercontent.com/proxy/kn4y-1fat85W8voylUnkZF1DBTCAwtNwaTwxKJZ-GYiWk83N6rAd2fKqIzdaPSSZKupHKxA-xyZttfXhyO6EQHKxEQ2NTEeByNqAEZaCdJScbyZcUB3nak6TlxWlKv_lRgwfZtY8gWCwjusDnUmRThBUCTYf7ElOwOvnnj772zC02yDGOB5uI-B4rkSeKZjcw0i6FpG3xsATsSvDIw4A28QN"
	width=100%, height=100%>
<input id="id" type="text" size="40px" placeholder="아이디를 입력하세요"><p>
<input id="pw"type="text" size="40px" placeholder="비밀번호를 입력하세요"><p>
<button id="login"> 로그인 </button><p>
<input type="checkbox" checked>항상 아이디 기억하기


<script type="text/javascript">

let id = document.querySelector('#id');
let id = document.querySelector('#id');
let loginbtn = document.querySelector('login')

loginbtn.addEventListener('click', ()=>{
	console.log(id, pw)

 	if( id === "it"){
 		if(pw === "321"){
 			alert(id1 + "님, 반갑습니다")
 		}else{
 			alert("비밀번호가 일치하지 않습니다")
 			location.reload();
 		}
	}else{
		alert("존재하지 않는 회원입니다.")
		location.reload();
	} 
})

querySelector로 input태그 ID와 PW를 가져오려고 했으나 “존재하지 않는 회원입니다”라는 에러만 겁나 났다

querySelector가 안되는 이유는 Jquery태그를 추가해야한다고했다

그래서 다른 방법인 getElementById()로 진행해봤다.

1. getElementById(‘id’)만 가지고 왔는데도 전혀 입력값을 가져오지못했고 “존재하지 않는 회원입니다”라는 에러
2. getElementById(‘id’).value : 그래서 value를 끝에 추가했지만 그래도 가져오지 못했다
   왜지….
3. 알고보니 결국 스코프 문제였다 addEventListener안에 넣었더니 정상적으로 실행되었다 뿌듯!

<img src="https://lh3.googleusercontent.com/proxy/kn4y-1fat85W8voylUnkZF1DBTCAwtNwaTwxKJZ-GYiWk83N6rAd2fKqIzdaPSSZKupHKxA-xyZttfXhyO6EQHKxEQ2NTEeByNqAEZaCdJScbyZcUB3nak6TlxWlKv_lRgwfZtY8gWCwjusDnUmRThBUCTYf7ElOwOvnnj772zC02yDGOB5uI-B4rkSeKZjcw0i6FpG3xsATsSvDIw4A28QN"
	width=100%, height=100%>
<input id="id" type="text" size="40px" placeholder="아이디를 입력하세요"><p>
<input id="pw"type="text" size="40px" placeholder="비밀번호를 입력하세요"><p>
<button id="login"> 로그인 </button><p>
<input type="checkbox" checked>항상 아이디 기억하기

<script type="text/javascript">

let loginbtn = document.getElementById('login')

loginbtn.addEventListener('click', ()=>{
	let id = document.getElementById('id').value;
	let pw = document.getElementById('pw').value;
	console.log(id, pw)

 	if( id === "it"){
 		if(pw === "321"){
 			alert(id1 + "님, 반갑습니다")
 		}else{
 			alert("비밀번호가 일치하지 않습니다")
 			location.reload();
 		}
	}else{
		alert("존재하지 않는 회원입니다.")
		location.reload();
	} 
})

2. JS주석 한번에 단축키

• ctrl + shift + / : 한번에 주석설정
• ctrl + shift +\ : 한번에 주석제거

3. switch문 출력문 한줄 리팩토링

입력받은 정보를 가지고 학점을 나타내는 switch문을 만들어보자

let score = prompt('점수를 입력하시면 학점이 계산됩니다')

switch (Math.floor(score/10)){
case 10 :
case 9 :
	document.write("A학점")
	break;
case 8 :
	document.write("B학점")
	break;
case 7 :
	document.write("C학점")
	break;
case 6 :
	document.write("D학점")
	break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
	document.write("F학점이라니")
	break;
default : document.write("0~100사이의 점수를 입력하세요")
}

자세히보면 반복되는 출력문이 보인다
이걸 리팩토링해보자
아주 간단하다! 변수만 만들어주면 된다!

//switch case 출력문 한번쓰기
document.write('<hr>')
let score = prompt('점수를 입력하시면 학점이 계산됩니다')
let grade = ""; //변수만들기

switch (Math.floor(score/10)){
case 10 :
case 9 :
	grade ="A"
	break;
case 8 :
	grade ="B"
	break;
case 7 :
	grade ="C"
	break;
case 6 :
	grade ="D"
	break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
	grade ="F"
	break;
default : document.write("0~100사이의 점수를 입력하세요")
}
document.write(grade + "학점")