[Javascript] alert, prompt, confirm을 이용한 상호작용
📌 참고 사이트
alert, prompt, confirm을 이용한 상호작용 (javascript.info)
alert, prompt, confirm을 이용한 상호작용
ko.javascript.info
📋 alert
➡️ alert 함수가 실행되면 사용자가 확인(ok) 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 된다.
➡️ alert 함수에 인자로 들어간 내용이 곧 보여지는 메시지가 된다.
alert("hello"); // hello 라는 메시지를 담은 창이 뜸.
❓ 모달 창 (modal window)
메시지가 있는 작은 창으로, '모달' 이라는 단어네는 페이지의 나머지 부분과 상호 작용이 불가하다는 의미가 내포되어 있다.
따라서 모달 창이 띄워지면 확인 버튼을 눌러 창이 닫히게 하기 전까지 창 바깥에서의 무언가를 할 수 없다.
📋 prompt
➡️ prompt 함수는 2개의 인수를 받는다.
→ title (첫 번째 인수) : 사용자에게 보여 줄 문자열 (메시지)
→ default (두 번째 인수) : 입력 필드의 초깃값 (선택값)
➡️ 사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있다.
→ 이때 prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환한다.
➡️ 값을 입력하길 원하지 않는 경우는 취소 버튼을 누르거나 esc로 대화 상자를 빠져나갈 수 있다.
→ 이때 prompt 함수는 null을 반환한다.
let age = prompt('나이를 입력해 주세요', 100); // 인수는 차례로 메시지, 입력 초깃값
alert(`당신의 나이는 ${age}살 입니다.`);
// 초깃값을 수정하지 않고 확인을 누른다면
// 당신의 나이는 100살 입니다.
// 취소를 누른다면
// 당신의 나이는 null살 입니다.
📋 confirm
➡️ confirm 함수는 매개변수로 받은 질문과 확인 및 취소 버튼이 있는 모달 창을 보여준다.
→ 사용자가 확인 버튼을 누르면 true를 반환한다.
→ 사용자가 취소 버튼을 누르면 false를 반환한다.
let isBoss = confrim("당신이 주인인가요?");
alert(isBoss); // 확인 버튼을 누르면 true, 취소 버튼을 누르면 false 출력
✏️ 과제
📍 간단한 페이지 만들기
사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어 보자.
💻 HTML에 작성하기
<!DOCTYPE html>
<html>
<body>
<script>
'use strict'
let userName = prompt("당신의 이름은 무엇입니까?", "");
alert(userName);
</script>
</body>
</html>