prompt() 함수는 JavaScript에서 사용자로부터 입력을 받는 모달 대화 상자를 띄우는 함수입니다. 이 함수는 주로 사용자로부터 텍스트 입력을 받거나 정보를 수집하는 데 사용됩니다. 아래에 prompt() 함수의 구문, 사용된 인수의 정의, 사용 예제, 및 해당 예제에 대한 설명을 제공합니다.
대화상자는 두 가지 종류를 가지고 있습니다. 모달 대화상자와 모달리스 대화상자는 웹 개발에서 사용되는 두 가지 대화 상자 스타일입니다. 이 두 스타일의 주요 차이점은 대화상자가 표시되는 방식과 대화상자가 화면에 표시될 때 다른 요소와 상호작용하는 방식에 있습니다.
l 모달 대화상자 (Modal Dialog): 모달 대화상자는 사용자가 대화상자가 닫힐 때까지 다른 부분에 대한 상호작용을 막는다는 점에서 "모달"이라는 이름을 가집니다. 사용자가 대화상자 외부의 요소를 클릭하거나 키보드 입력을 받아들이지 않습니다.
l 모달리스 대화상자 (Modeless Dialog): 모달리스 대화상자는 다른 요소와의 상호작용을 허용하는 대화상자 스타일입니다. 사용자가 모달리스 대화상자와 다른 부분 사이를 이동하거나 다른 요소를 클릭할 수 있습니다.
| ◎ 1. prompt() 함수구문 |
prompt() 함수는 사용자에게 message로 지정된 메시지와 함께 입력 필드가 있는 모달 대화 상자를 표시합니다. 사용자는 입력 필드에 텍스트를 입력하고 확인 또는 취소 버튼을 클릭할 수 있습니다.
| prompt(message, default) l message (문자열, 필수): 사용자에게 표시할 메시지 또는 질문입니다. l default (문자열, 선택적): 입력 필드에 미리 채울 기본값을 지정할 수 있습니다. |
| ◎ 2. 사용 예제 |
(1) 간단한 사용자 입력 받기
| const userInput = prompt("이름을 입력하세요", "녹두"); |
prompt() 함수는 사용자에게 "이름을 입력하세요"라는 메시지와 함께 입력 필드를 표시하고, 기본값으로 "녹두"를 제공합니다. 사용자는 이름을 입력하고 확인 또는 취소 버튼을 클릭할 수 있습니다. 사용자의 입력 값은 userInput 변수에 저장합니다.
(2) 입력 값 사용하기
| const userInput = prompt("이름을 입력하세요"); if (userInput !== null) { alert("안녕하세요, " + userInput + "님!"); } else { alert("입력이 취소되었습니다."); } |
`prompt()` 함수를 사용하여 사용자로부터 이름을 입력받고, 입력이 취소되지 않았을 경우 환영 메시지를 `alert()` 함수를 통해 표시합니다.
(3) 취소 처리하기
| const userInput = prompt("나이를 입력하세요"); if (userInput === null) { alert("입력이 취소되었습니다."); } else { alert("나이: " + userInput); } |
사용자가 입력 필드를 빈 상태로 취소하면 prompt() 함수는 null을 반환합니다. 이를 통해 사용자가 입력을 취소했을 때 다른 처리를 수행할 수 있습니다. prompt() 함수는 사용자와의 간단한 상호작용을 통해 입력을 수집하는 데 유용합니다. 그러나 이 함수는 브라우저에서 기본 HTML 대화 상자를 사용하며, 대화상자가 단순해 복잡한 기능을 구현할 수 없습니다. 더 많은 컨트롤이 필요한 경우 사용자 정의 모달 대화 상자를 만들거나 더 복잡한 입력 유효성 검사를 수행하는 것을 고려해야 합니다.
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 Math.floor() 함수 사용하는 방법 (0) | 2023.10.22 |
|---|---|
| 자바스크립트 Math.random() 함수 사용하는 방법 (1) | 2023.10.22 |
| 자바스크립트 Javascript 배열에 사용하는 여러 함수들 모음 (0) | 2023.10.22 |
| 자바스크립트 정규 표현식으로 휴대폰 번호 유효성 검사하기 (0) | 2023.10.21 |
| 자바스크립트 Javascript 메시지 출력 alert() 함수 사용하기 (2) | 2023.10.20 |
| 자바스크립트 정규식 표현으로 이름 유효성 검사하기 (1) | 2023.10.19 |
| 자바스크립트 내장함수 eval() 문자열을 수식으로 바꾸는 방법 (1) | 2023.10.11 |
| 자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2회 (0) | 2023.10.11 |
