본문 바로가기
[ javascript ]

[java script 함수] 내장함수 - 입력창 : prompt( ), alert(), confirm(), 로그인창 만들기

by 히앤님 2020. 8. 11.
반응형
SMALL

.prompt( "윈도우 문자열" , "입력창 문자열" )


자바스크립트 자체에서 미리 만들어져 제공하는 내장함수의 한 종류이다.

 "윈도우 문자열" 은 프롬프트에 띄워줄 메시지이고, "입력창 문자열" 은 입력창에 미리 삽입되는 문자열이다.

입력창을 공백으로 유지하고 싶은 경우 ""로 둔다. (이 경우, defalt값이 들어가 있는 것.)

입력창을 만들기 원하지 않을 경우 "입력창 문자열" 을 생략한다.

Internet Explorer 프롬프트 창
Chrome 프롬프트창
입력창 문자열을 입력했을 경우

 

.alert( "윈도우 문자열"


alert는 입력한 메시지만 전달한다. 반환하는 값이 없다.

 

alert 상자 : 변수 안의 데이터가 "abc" 가 아닐 때

 

.confirm( "윈도우 문자열" )


confirm은 true 또는 false 값을 반환한다.

확인을 누르면 true를 리턴하고 취소를 누르면 false를 리턴한다.

 

confirm 상자 : 확인(true), 취소(false)
확인을 누르면 다음 구문이 실행된다.

 

 

<예제1> 간단한 아이디 암호 입력창을 만들어보자.

 

1. 변수 ID를 선언하고 안에 데이터가 "abc"면 반복문 중단, 아니면 alert 상자 띄우기

while(true){
			
	//변수 ID 선언
	var id = prompt("아이디 입력 요망","");
			
	//id 변수 안의 데이터가 "abc"면 반복문 중단
	if(id=="abc"){ break; }
			
	//id 변수 안의 데이터가 "abc"가 아니면 alert 상자 띄우기
	else{ alert("아이디가 틀립니다. 재입력 요망"); }

}

 

2. 변수 pwd를 선언하고 안에 데이터가 "123"면 반복문 중단, 아니면 alert 상자 띄우기

while(true){
			
	//변수 pwd 선언
	var pwd = prompt("암호 입력 요망","");
			
	//pwd 변수 안의 데이터가 "123"면 반복문 중단
	if(pwd=="abc"){ break; }
			
	//id 변수 안의 데이터가 "123"가 아니면 alert 상자 띄우기
	else{ alert("암호가 틀립니다. 재입력 요망"); }

}

 

3. 변수 login을 선언하고 안에 ture를 리턴하면 다음 구문 실행, 아니면 멈춤.

var login = confirm("로그인 하시겠습니까?");
document.write( "로그인 되었습니다." );

 


<예제2> 아이디 암호 입력 횟수를 제한해보자.

 

1. 아이디와 암호 입력 횟수를 저장하는 변수를 선언

//아이디 잘못 입력 횟수 저장하는 변수 선언
var id_error_cnt=0;

//암호 잘못 입력 횟수 저장하는 변수 선언
var pwd_error_cnt=0;

//아이디 잘못 입력 기회 횟수 저장 변수선언
var id_chance_cnt=3;

//암호 잘못 입력 기회 횟수 저장 변수선언
var pwd_chance_cnt=3;

 

2. ID, pwd 변수를 선언하고 안에 데이터가 "abc", "123"면 반복문 중단, 아니면 잘못 입력 횟수 증가

while(true){

	//변수 ID 선언
	var id = prompt("아이디 입력 요망","");
			
	//id 변수 안의 데이터가 "abc"면 반복문 중단
	if(id=="abc"){break;}
	
	//id 변수 안의 데이터가 "abc"가 아니면 아이디 잘못입력 횟수 증가
	else{id_error_cnt++;}
		
	//만약 아이디 잘못 입력 횟수가 3회 이상이면 반복문 중단
	if(id_error_cnt>=id_chance_cnt){break;}
}

		
//만약 아이디 잘못 입력 횟수가 3 미만이면
if(id_error_cnt<id_chance_cnt){

	//맞는 암호를 입력 받을 때까지 계속 반복하는 반복문 선언
	while(true){
    
    	//변수 pwd 선언
		var pwd = prompt("암호 입력 요망","");
        
        //pwd 변수 안의 데이터가 "123"면 반복문 중단
		if(pwd=="123"){break;}
        
  		//pwd 변수 안의 데이터가 "123"가 아니면 암호 잘못입력 횟수 증가      
		else{pwd_error_cnt++;}
        
        //만약 암호 잘못 입력 횟수가 3회 이상이면 반복문 중단
		if(pwd_error_cnt>=pwd_chance_cnt){break;}
	}
}

-> while문 안에 if - else - if 형식으로 있어서 로직이 복잡해 보일 수 있다. 

    변수 선언 후 프롬프트 입력창에 abc가 출력되거나(if) 출력되지 않는(else) 두가지 경우의 수 갈림길에 선다.

    반복문이 중단되는 경우는 abc가 출력되지 않은 else 이후이다.

    즉, else까지 종료된 첫 번째 조건문 이후에 수행되는 두번째 조건문이며,

    입력값이 abc일 경우 break; 되어 두 번째 if문에 도착하지 않는다.

 

3. 로그인 결과 출력하기

//만약 id_error_cnt 변수 안의 데이터가 id_chance_cnt 변수 안의 숫자보다 같거나 크다면
if(id_error_cnt>=id_chance_cnt){
	//로그인 실패 출력
	document.write( "아이디 "+ id_error_cnt + "회 잘못 입력으로 로그인 실패");
}

//만약 pwd_error_cnt 변수 안의 데이터가 pwd_chance_cnt 변수 안의 숫자보다 같거나 크다면
else if(pwd_error_cnt>=pwd_chance_cnt){
	//로그인 실패 출력
	document.write( "암호 "+ pwd_error_cnt + "회 잘못 입력으로 로그인 실패");
}

//그 외의 경우라면(=로그인이 성공한 경우)
else{document.write( id + "님! 방문을 환영합니다.");}

 


<예제3> 함수를 이용해서 로그인 창을 만들어보자.

 

1. 전역변수 선언

var idErrorCnt = 0; //아이디 입력 실패 횟수 저장
var pwdErrorCnt = 0; //암호 입력 실패 횟수 저장
var lastChance = 3;  //입력 실패 허용 횟수 저장

 

2. 아이디를 체크하는 함수 선언

function check_id(){
	var id = prompt("아이디 입력 요망","");

	//만약 아이디가 "abc"가 아니면 idErrorCnt 변수 안의 데이터 1 증가
	if (id!="abc"){idErrorCnt++;

		//만약 아이디가 idErrorCnt 변수 안의 데이터가 3미만이면 check_id() 함수 호출
		if(idErrorCnt<lastChance){check_id();}
	}
}

-> <예제2>와 다르다. 이 경우, function 속 조건문 안에 또다른 조건문이 있는 형식이다.

    변수 선언 후 프롬프트 입력창에 abc이 아니면(if) idErrorCnt를 1 증가시킨다.(실행구문)

    그 후 if으로 내려가서 idErrorCnt가 lastChance보다 작은지 확인한다. 

    프롬프트창은 사라지지 않았기 때문에 결과값이 작으면 또다시 입력창에 아이디를 입력할 수 있다.

    때문에 idErrorCnt가 설정한 값 이상이 될 때까지 반복된다.

    반복문이 중단되는 경우는 idErrorCnt가 lastChance보다 커졌을 경우이다.

 

3. 암호를 체크하는 함수 선언

function check_pwd(){
	var pwd = prompt("암호 입력 요망","");

	//만약 암호가 "123"이 아니면 pwdErrorCnt 변수 안의 데이터 1 증가
	if (pwd!="123"){pwdErrorCnt++;

		//만약 암호가 pwdErrorCnt 변수 안의 데이터가 3미만이면 check_pwd() 함수 호출
		if(pwdErrorCnt<lastChance){check_pwd();}
	}
}

<주의>check_id()함수가 완전히 끝나야 check_pwd() 함수가 실행되고, check_pwd() 함수가 실행되고 완전히 끝나야 "로그인 성공"을 출력한다.

 

3. 프로그램 전체를 컨트롤하는 함수 선언

function control(){

	//check_id() 함수 호출.
	check_id();

	//만약 아이디 입력 실패가 3번이면 경고하고, 로그인 실패 메시지를 출력하고 함수 중단하기.
	if(idErrorCnt==lastChance){
		document.write("[아이디]" + lastChance + "회 잘못 입력으로 로그인 실패");
		return;
	}

	//check_pwd() 함수 호출.
	check_pwd();

	//만약 암호 입력 실패가 3번이면 경고하고, 로그인 실패 메시지를 출력하고 함수 중단하기.
	if(pwdErrorCnt==lastChance){
		document.write("[암호]" + lastChance + "회 잘못 입력으로 로그인 실패");
		return;
	}
}

return(); -> 함수에서 return이 나오면 그 자리에서 멈추고 오른쪽 값을 주는 것.

break; -> 반복문에서 어떠한 조건을 달성하면 멈춤.

따라서 만약 에러횟수와 기회가 같으면, 문구를 출력하고 난 뒤 return;에서 함수 시행을 멈춘다.

 

<주의> check_id()함수에서 id를 3회 이전에 맞추거나 3회 이상 틀리면 함수가 종료되어 다음 코딩이 실행된다.

          check_pwd()함수에서 pwd를 3회 이전에 맞추거나 3회 이상 틀리면 함수가 종료되어 다음 코딩이 실행된다.

 

4. control() 함수를 실행한다.

control();

 

반응형
LIST

댓글