앱 만들기/JavaScript study

자바스크립트 입력 팝업창 만들기

나도처음이야 2022. 12. 30.
반응형

자바스크립트 함수 중 입력필드를 가진 팝업창을 만들어 봅니다.

바로, prompt() 함수입니다.

영어로 prompt라는 뜻은 입력을 받을 준비하고 있는 컴퓨팅 상태를 의미합니다.

결과를 먼저 본다면 하기와 같습니다.

 

예제를 만들어 봅니다.

1. 자바스크립트 파일을 만듭니다.

var phone = prompt('전화번호를 입력하세요', '010-1234-5678');

prompt() 함수 대소문자에 주의해야 합니다.

인자값은 "" , '' 두 개다 지원합니다.  두 번째 인자값은 필드영역에 들어갈 기본 값입니다.

두 번째 인자값이 없을 때는 필드가 공란으로 보입니다.

 

2. HTML 파일에서 자바스크립트 파일을 연결합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="merryChristmas.js"></script>
</body>
</html>

확인 버튼을 선택하면, 필드에 입력된 값이 phone 변수에 저장이 됩니다.

해당 값은 여러방법으로 확인이 가능하지만, 하기 코드로도 손쉽게 웹페이지에서 확인이 가능합니다.

document.write() 함수는 다음 포스팅에서 확인해 봅니다.

document.write("입력받은 전화번호는" + phone + "입니다"  );

오늘은, 자바스크립트 필드 팝업창 함수인 prompt() function 에 대해서 알아보았습니다.

감사합니다.

반응형

댓글