<모던 JavaScript 튜토리얼 - 코어 자바스크립트>
https://ko.javascript.info/
👀alert, prompt, confirm을 이용한 상호작용
(1) alert
alert("Hello");
- 사용자가 '확인'버튼을 누를 때까지 메시지를 보여주는 모달 창(modal window)이 뜸.
- '모달'이란 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다.
(2) prompt
- 텍스트 메시지와 '입력 필드(input field)', 확인, 취소 버튼이 있는 모달 창이 뜸.
- 사용자가 입력 필드에 기재한 문자열을 반환
- 사용자가 입력을 취소한 경우
null이 반환
result = prompt(title, [default]);
- title - 사용자에게 보여줄 문자열
- default - 입력 필드의 초깃값
[...]- 매개변수가 필수가 아닌 선택값이라는 의미
let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 -살입니다.
- 프롬프트 함수의 두 번째 매개변수는 선택사항이지만, Internet Explorer(IE) 사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면 아래와 같이 두 번째 매개변수를 항상 전달해 줄 것을 권장.
let test = prompt("Test", ''); // IE 사용자를 위한 매개변수 처리
(3) 컨펌 대화상자
result = confirm(question);
- 매개변수로 받은 question과 확인, 취소 버튼이 있는 모달 창을 띄움
- 사용자가 확인 버튼을 누르면
true, 그 외에는false반환
let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // true,false
(4) 제약사항
- 모달 창의 위치는 브라우저가 결정, 대개 중앙에 위치.
- 모달 창의 모양은 브라우저마다 다름, 개발자가 수정할 수 없음.
(5) 과제
간단한 페이지 만들기
//사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어 보세요.
let userName = prompt("이름이 무엇인가요?", "");
alert(userName);