[Javascript] prompt(), confirm(), alert() 사용 방법

---

목차

 

1. prompt()

2. confirm()

3. alert()

4. confirm()과 alert()의 차이

5. 퀴즈

---

 

 

 

1. prompt() 함수

---

- 문자열을 입력할 때 사용합니다.

 

- 숫자를 입력해야 한다면 입력한 값을 숫자로 변환하여 사용해야 합니다.

 

- prompt("메세지", "디폴트 값") 에서 첫번째 파라미터는 입력 창에 띄워지는 메세지이며 두번째 파라미터는 입력 부분의 기본 디폴트 값 입니다.

 

let promptObj = prompt('값을 입력하세요', 'Default Value');

 

- prompt() 만 사용하는 경우 아무런 설명없이 문자열만 입력받습니다.

 

 

 

 

 

 

 

예제

---

 

 

prompt() 함수를 사용해보겠습니다.

 

let promptObj = prompt('값을 입력하세요', 'Default Value');

 

 

 

실행 결과

 

 

 

위의 창에서 '확인'을 클릭한 경우 사용자가 입력한 값을 문자열로 반환하고 '취소'를 클릭한 경우 null 값을 반환합니다.

만약 사용자 입력 값을 숫자로 얻고 싶다면 타입을 변환하면 됩니다. 

 

 

 

 

나이를 묻는 예제를 통해 입력 값을 숫자로 얻고 싶은 경우를 알아보겠습니다.

---

 

let agePrompt = prompt('나이를 입력하세요.');

let age = Number(agePrompt);

if(age >= 20) {
  alert('통과');
}

 

 

 

실행결과

 

30을 입력하고 확인 버튼 클릭시

 

 

 

 

'통과' 알림창이 뜹니다.

 

 

 

 

만약 값을 문자나 20 미만의 숫자를 입력한다면 undefined값을 반환합니다.

 

 

위 예제에서 알 수 있듯 Number() 함수는 문자 자료형을 숫자 자료형으로 변환시켜줍니다.

따라서 prompt()로 입력받은 값을 Number()에 한 번 돌려주면 데이터가 정수로 변환되어서 연산할 수 있습니다.

 

 

 

 

 

2. confirm() 함수

---

 

- 불린 값을 입력 받을 때 사용합니다.

- 확인을 누르면 true를 리턴합니다.

- 취소를 누르면 false를 리턴합니다.

 

 

 

 

 

 

 

예제

---

 

let input = confirm('작성하시겠습니까?');
alert(input);

 

 

 

실행결과

 

 

alert 창이 뜨고

 

 

 

 

확인 버튼을 누르면 true를 리턴합니다.

 

 

 

 

 

 

3. alert() 함수

---

이 함수는 자바스크립트에서 가장 많이 사용되는 '메세지창' 입니다.

 

사용자로부터 입력을 받을 필요가 없고 단순히 메세지를 나타내고자 할 때 사용됩니다.

사용법 또한 매우 간단한데 예제를 통해 알아보겠습니다.

 

 

 

 

예제

---

 

alert('hello world');

 

 

 

실행결과

 

 

 

 

 

 

 

 

4. confirm()과 alert()의 차이

---

 

alert 함수는 단순히 안내 메세지를 띄우는 메세지 창이지만 confirm 함수는 선택을 할 수 있는 확인 메세지 창 입니다.

 

따라서 confirm 함수는 확인과 취소 버튼을 가지는 메세지 상자이며, 확인을 클릭하게 되면 프로그램 안에서 true의 값으로 인식하고 취소를 선택하면 false값으로 인식하게 됩니다.

 

 

 

 

 

5. 퀴즈

---

 

- prompt() 함수는 문자열을 입력할 때 사용하는 함수이다. ( O / X )

 

- alert() 함수는 불린 값을 이용받을 때 사용하는 함수이다. ( O / X )