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

1. alert

alert 함수가 실행되면 사용자가 확인(OK) 버튼을 누를 때까지 메세지를 보여주는 창이 계속 떠있게된다.

 

예시

alert("Hello");

실행 결과

 

 

 

 

2. prompt

브라우저에서 제공하는 prompt는 두 개의 인수를 받는다.

 

예시

result = prompt(title, [default]);

//title = 사용자에게 보여줄 문자열, default = 입력 필드의 초기값(선택값)

//default 값은 필수 입력 사항이 아니다.

 

 

prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환한다.

이해가 잘 되지 않으므로 예시를 살펴보자.

 

let age = prompt("나이를 입력해주세요.", 100);

alert(`당신의 나이는 ${age}살입니다.`);

 

위의 코드를 실행시키면 다음과 같은 창이 뜬다. 이 창에서 "100" 값은 사용자가 원하는 값으로 입력하여 바꿀 수 있다.

위의 창에서 취소 버튼을 누르면 "null" 값이 반환되어 "당신의 나이는 null살입니다."가 반환된다.

확인 버튼을 누르면 다음과 같은 내용이 출력된다.

 

주의 사항

Internet Explorer(IE)에서는 항상 default 자리에 매개 변수 처리를 해주는 것을 권장한다.

 

예시

let test = prompt("Test", " ");    //IE 사용자를 위한 매개 변수 처리

 

 

 

 

3. confirm 대화 상자

문법

result = confirm(question);

 

confirm 함수는 매개 변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여준다.

사용자가 확인 버튼을 누르면 ture, 그 외의 경우에는 false를 반환한다.

 

예시

let isBoss = confirm("당신이 주인인가요?");

alert(isBoss);    //확인 버튼을 누르면 true, 그 외의 경우에는 false를 반환한다.

 

 

 

 

4. 연습 문제

 

해답

atom을 이용한 코드 작성

코드 실행 결과

출력 결과