모던 javascript 튜토리얼

alert, prompt, confirm을 이용한 상호작용

crab. 2022. 5. 31. 08:57
반응형

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

**alert**메시지를 보여줍니다.

alert("Hello");

**prompt**사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다.

result = prompt(title, [default]);

**confirm**사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여집니다. 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환합니다.

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

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

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

지금까지 살펴본 세 함수엔 두 가지 제약사항이 있습니다.

  1. 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.
  2. 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.

이런 제약사항은 간결성을 위해 치러야 할 대가입니다. 창을 더 멋지게 꾸미고 복잡한 상호작용을 가능하게 해주는 다른 방법도 있긴 하지만, '멋을 위한 부가 기능’이 필요하지 않다면 지금까지 소개해드린 기본 메서드만으로 충분합니다.

반응형

'모던 javascript 튜토리얼' 카테고리의 다른 글

기본 연산자와 수학  (0) 2022.06.02
형 변환  (0) 2022.06.01
변수와 상수, 자료형  (0) 2022.05.30
엄격 모드  (0) 2022.05.30
Hello, world(script)  (0) 2022.05.30