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

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

■ 자바스크립트의 내부 함수 중에서 alert()와 prompt() 함수에 대해서 알아볼 텐데요. prompt 함수는 사용자가 어떤 데이터값을 입력할 수 있도록 다이얼로그를 띄어주는 함수이구요. alert 함수는 사용자에게 메시지를 보여주는 역할을 하는 함수 입니다. 이것들의 형식을 알아보고, 예제를 만들어 볼게요. 

 

 

▣ prompt()의 형식

 prompt(다이얼로그에 표시할 메시지, 기본값);

형식대로 HTML 문서에 넣어보겠습니다. 

■ 다이얼로그에 표시할 메시지는 "이름을 입력하세요."라고 했구요. 기본값은 "홍길동"으로 설정하고 브라우저에서 실행하겠습니다. 

■ 이렇게 다이얼로그가 뜨고, 메시지와 기본값이 출력되고 있습니다. prompt가 어떤 기능인지 아시겠죠? 지금은 이 정도 개념만 잡고, 아래쪽에서 alert 함수도 알아보고, 두 내장 함수를 이용해서 예제를 하나 만들어볼게요. 

▣ alert()의 형식

 alert("대화상자에 표시할 메시지");

■ 형식에 맞게 입력하고 출력해보겠습니다. 

■ 이렇게 입력한 메시지가 그대로 출력되는 대화상자가 나타나게 됩니다.

 이제 두 대화상자를 이용해서 간단한 프로그램을 만들어 볼 텐데요. prompt() 함수를 이용해서 이름을 입력받고, 입력받은 데이터를 변수에 저장하고, 그 변수의 데이터를 alert()를 이용해서 출력해보겠습니다. 

■ 예제의 내용을 살펴보면 prompt 대화상자에서 입력받은 데이터를 name 변수에 넣구요. 이 변수의 값을 alert를 이용해서 출력하고 있는 내용입니다. 

■ 브라우저에서 실행하면 그림처럼 prompt 창이 뜨고, 이름을 입력하고 [확인] 버튼을 클릭하면, 입력한 값이 name 변수에 저장됩니다. 그리고 이 변수에 저장된 이름은 아래 그림처럼 alert() 대화상자에 출력됩니다. 

■ 이렇게 해서 prompt() 함수와 alert() 함수에 대해서 알아봤습니다. 몇 줄 안 되는 내용이니까 직접 입력해서 확인해보셔요. 수고하셨습니다.