Categories: JavaScript

JavaScript 자바스크립트 대화상자 alert, confirm, prompt

javascript

자바스크립트 대화상자란?

자바스크립트 대화상자 alert, confirm, prompt 는 사용자와 상호 작용하기 위한 다양한 방법을 제공하는 함수들입니다. 각각의 함수들은 목적과 특징이 다르며, 이 글에서 자세히 비교하겠습니다.

alert, confirm, prompt 비교

alert: 가장 기본적인 형태로, 메시지를 단순히 표시합니다. 반환 값은 없습니다.

confirm: 사용자에게 확인 또는 취소를 선택하도록 하는 대화상자를 표시하며, 선택 결과에 따라 다른 동작을 수행할 수 있습니다.
사용자가 “확인”을 선택하면 true, “취소”를 선택하면 false를 반환합니다.

prompt: 사용자로부터 텍스트 입력을 받아오는 대화상자를 표시하며,
사용자가 입력한 텍스트를 반환 받습니다.
입력 값을 활용하여 다양한 작업을 수행할 수 있습니다.

alert, confirm, prompt 예제

alert

목적: 간단한 메시지를 사용자에게 보여줍니다. 반환 값은 없습니다.

JavaScript

alert("안녕하세요!");

JavaScript

confirm

목적: 사용자에게 확인 또는 취소를 선택하도록 하는 대화상자를 표시합니다.
반환값: 사용자가 “확인”을 선택하면 true, “취소”를 선택하면 false를 반환합니다.

JavaScript

const userResponse = confirm("계속 진행하시겠습니까?");
if (userResponse) {
  // 사용자가 확인을 선택한 경우
  console.log("true");
} else {
  // 사용자가 취소를 선택한 경우
  console.log("false");
}

JavaScript

prompt

목적: 사용자로부터 텍스트 입력을 받기 위한 대화상자를 표시합니다.
반환값: 사용자가 입력한 텍스트를 반환합니다.

JavaScript

const userName = prompt("이름을 입력하세요");
if (userName) {
  alert("안녕하세요 " + userName + "님!");
} else {
  alert("이름이 입력되지 않았습니다.");
}

JavaScript

결론

alert, confirm, prompt 는 각각 다른 상황에서 사용자와의 상호 작용을 위해 특화되어 있습니다.
적절한 함수 선택은 웹 페이지나 애플리케이션의 사용자 경험을 향상 시키는데 중요합니다.
사용자의 의도에 따라 어떤 함수를 사용할지 결정하고, 반환값을 활용하여 다양한 상황에 대응하는 것이 좋습니다.

suover