[javascript] alert, prompt, confirm을 이용한 상호작용

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능

 

1. 기본적인 사용방법

1) alert

메시지를 지정할 수 있는 경고 대화 상자

 

/*
* alert(message)
*/

var txt = 'alert! 경고!!';
function text(){ return 'alert! 경고!!' }

window.alert('alert! 경고!!')
alert('alert! 경고!!')
alert(txt)
alert(text())
//위의 4개의 alert는 동일한 결과를 도출한다

 

 

2) prompt

사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자

 

/*******************************************************
* prompt(title, [default]);
* Internet Explorer(IE)에서는 항상 '기본값’을 넣어주세요.
* prompt("Test", ''); <-- IE 사용자를 위한 매개변수 처리
********************************************************/

let year = prompt('오늘이 몇년도?', 2021);

alert(`오늘은 ${year}년 입니다.`); // 오늘은 2021년 입니다.

 

확인버튼 일경우	취소버튼 일경우

undefined : 값이 할당되지 않은 상태
null  :  존재하지 않는(nothing) 값, 비어 있는(empty) 값, 알 수 없는(unknown) 값

 

3) confirm

확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자

 

/*******************************************************
* confirm(question);
********************************************************/

let tired = confirm('피곤하십니까?');

alert( tired ); // 확인 -> true,  취소 -> false

 

확인	취소

불린형 : true, false를 나타낼 때

 

 

 

2. 활용 - form

간단한 form을 짜서 유효성 검사 경고창을 띄어보자

<결과물>

See the Pen jOyVymr by JNoony (@jnoony) on CodePen.