자바스크립트 메시지 박스: alert, confirm, prompt 사용법 및 예제

자바스크립트 메시지 박스: alert, confirm, prompt 사용법 및 예제

프로그램을 개발하다 보면 사용자에게 적절한 메시지를 표시해야 할 때가 많이 있습니다. 자바스크립트에서는 메시지를 표시할 때 세 가지 내장 함수를 제공하고 있습니다. 그럼 자바스크립트에서 제공하는 세 가지 메시지 함수인 alert(), confirm(), prompt()에 대해서 알아보겠습니다.

alert(), confirm(), prompt() 함수들은 모두 브라우저에서 제공하는 기본 대화상자입니다. 기본 대화상자를 사용하면 간단하게 사용자와 상호작용할 수 있습니다. 하지만 이러한 기본 대화상자의 디자인은 브라우저마다 다를 수 있고 디자인을 변경할 수 없습니다.

1. alert 함수

alert 함수는 메시지를 표시하는 가장 간단한 방법입니다. 사용자에게 알림을 주는 용도로 사용합니다.

1. 사용법

alert(message);

2. 사용 예제

<script>
// 1. alert함수
alert("BlueShare 블로그 입니다.");
</script>

3. 결과 화면

▼ OK 버튼을 클릭하면 메시지가 사라집니다.

alert 함수 사용 예제 실행 결과 화면입니다.

2. confirm 함수

confirm 함수는 사용자에게 질문을 포함한 확인 대화상자를 표시합니다. 사용자는 “확인” 또는 “취소” 버튼을 클릭할 수 있습니다.

1. 사용법

confirm(message);

☞ “message”는 표시할 문자열입니다. 사용자가 “확인” 버튼을 클릭하면 true를 “취소” 버튼을 클릭하면 false를 반환합니다.

2. 사용 예제

<script>
    
  let message = "선택한 건을 정말 삭제하시겠습니까?"
  
  if (confirm(message)) {
      // true인 경우인 경우 작업 수행
      document.write("정상적으로 삭제했습니다.");
  } else {
      // false인 경우인 경우 작업 수행
      document.write("삭제를 취소했습니다.");
  }
  
  </script>

3. 결과 화면

confirm 함수 사용 예제 실행 결과 화면입니다.

3. prompt 함수

prompt 함수는 사용자로부터 값을 입력받는 대화상자를 표시합니다. 사용자는 “확인” 또는 “취소” 버튼을 클릭할 수 있습니다.

1. 사용법

prompt(message, default);

☞ 첫 번째 매개변수는 표시할 메시지이고 두 번째 매개변수는 표시될 기본값입니다. 두 번째 매개변수는 생략할 수 있으며 생략하면 기본값으로 빈 문자열이 사용됩니다. 사용자가 “확인” 버튼을 클릭하면 입력한 값을 반환하고 “취소” 버튼을 클릭하면 null을 반환합니다.

2. 사용 예제

<script>
  
let name = prompt("당신의 이름을 입력하세요.", "영어로 입력하세요.");

if (name) {
     document.write("안녕하세요! " + name + "님!");
} else {
     document.write("이름을 입력하지 않으셨습니다.");
}

</script>

3. 결과 화면

prompt 함수 사용 예제 실행 결과 화면입니다.

자바스크립트 기초 이전 게시물

  1. 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
  2. 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
  3. 자바스크립트 자료형 종류 및 사용 예시
  4. 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
  5. 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
  6. 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
  7. 자바스크립트 반복문: for, while, do-while등 사용법과 예제
  8. 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
  9. 자바스크립트 이스케이프 문자와 템플릿 문자열 사용법과 예제
  10. 자바스크립트 URI 인코딩 처리: encodeURI(), encodeURIComponent() 함수
위로 스크롤