하루하루 꾸준히, 인생은 되는대로

카테고리 없음

자바스크립트 alert, prompt, confirm을 이용한 상호작용

긤효중 2022. 5. 12. 11:55

alert, prompt, confirm에 대해 알아보자.

 

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

예시를 살펴보자.

alert('HELLO')

 

메세지가 있는 작은 창은 모달 창 이라고 부른다. '모달'이란 단어에는 페이지의 나머지 부분과 상호작용이 불가능 하다는 것을 내포한다.

따라서 사용자는 모달 창 밖에 있는 버튼을 누르는 것 등의 행동에 제약을 받는다.

확인버튼을 누를떄까지 제약을 받는다.

모달 창 밖에 있는 행동에 제약이 걸린다.


 

Prompt

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

 

result = prompt(title,[default])

이 함수가 실행되면 텍스트 메세지와 입력 필드(input field), 확인(ok) 및 취소(cancel) 버튼이 있는 모달 창을 띄워준다.

 

title  : 사용자에게 보여줄 문자열

default  : 입력 필드의 초기값(선택값)

 

사용자는 프롬포트 대화상자의 입력필드에 원하는 값을 입력하고, 확인을 누를 수 있다. 값을 입력하길 원하지 않는 경우 취소(Cancel)버튼을 누르거나 ESC를 눌러 대화상자를 빠져나가면 된다.

 

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

 

let age = prompt('나이를 입력해주세요',100);
alert('당신의 나이는 ${age}살 입니다.');

Confirm

 

result = confirm(question)

 

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

사용자가 확인을 누르면 True, 그 외에는 False를 반환한다.

 

let isBOSS = confirm('당신이 주인인가요?');
alert(isBOSS);

요약

브라우저는 사용자와 상호작용 할 수 있는 세가지 함수를 준다.

 

alert -> 메세지를 보여준다

prompt->사용자에게 텍스트를 입력하라는 메세지를 띄워줌과 동시에 , 입력필드를 함께 제공한다.

확인을 누르면 사용자가 입력한 문자열을 반환하고, 취소 또는 ESC를 누르면 NULL을 반환한다.

 

confirm -> 사용자가 확인 또는 취소버튼을 누를떄까지 메세지가 창에 보여진다. 사용자가 확인 버튼을 누르면 TRUE를 취소버튼이나 ESC를 누르면 FALSE를 반환한다.


모달창이 떠있는 동안은 스크립트의 실행이 잠시 중단된다. 사용자가 창을 닫기 전까지 나머지 페이지와 상호 작용이 불가능하다.