2-9 alert, prompt, confirm을 이용한 상호작용

bi_sz·2020년 4월 24일
0

JavaScript

목록 보기
12/22
post-custom-banner

1. 얼럿창

alert(message);

얼럿 ( alert ) 창은 메시지를 보여주는 창이다.
사용자가 얼럿 창의 “ 확인 ( OK ) ” 버튼을 누를 때까지 메시지는 계속 떠 있고 ,
스크립트의 실행이 일시적으로 중단된다.


alert("Hello");

메시지가 있는 작은 창은 모달 창 ( modal window ) 이라고 부른다.
"모달" 이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다.
따라서 사용자는 확인 버튼을 누르기 전까지
모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다.

2. 프롬프트 대화상자

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

result = prompt(title, [default]);

이 함수는 텍스트 메시지와 입력 필드 ( input field ) ,
확인 ( OK ) 및 취소 ( Cancel ) 버튼이 있는 모달 창을 띄워준다.

title

사용자에게 보여줄 문자열.

default

입력 필드의 초깃값 ( 선택사항 ) .

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

prompt 함수 ```

코드를 입력하세요

사용자가 입력 필드에 기재한 문자열을 반환한다. 
사용자가 입력을 취소한 경우는 null이 반환된다.
et age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`);  // 당신의 나이는 100살입니다.

Internet Explorer ( IE ) 에서는 항상 '기본값’을 넣어주어야한다.

프롬프트 함수의 두 번째 매개변수는 선택사항이지만 ,
이 매개변수가 없는 경우 IE는 "undefined" 를 입력 필드에 명시한다.

let test = prompt("Test");

IE 사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면
아래와 같이 두 번째 매개변수를 항상 전달해 줄 것을 권장한다.

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

3. 컨펌 대화상자

result = confirm(question);

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

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

let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력된다.

위 함수들은 모두 모달 창을 띄워주는데 ,
모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다.
사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다.

위 메서드의 두 가지 제약사항

  • 모달 창의 위치는 브라우저가 결정하는데 , 대개 브라우저 중앙에 위치한다.
  • 모달 창의 모양은 브라우저에 마다 다르며, 개발자는 창의 모양을 수정할 수 없다.

4. 과제

간단한 페이지 만들기

사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어 보세요


본문 : https://ko.javascript.info/alert-prompt-confirm

profile
https://li-yo.tistory.com/ 티스토리 블로그 이전 하였습니다.
post-custom-banner

0개의 댓글