[JS] 02. 데이터 입력 받기

자바스크립트를 사용하는 데 기초적으로 주로 사용했던 것들은

1) (window.)alert | window.confirm

2) (window.)propmt

이렇게 있다.

 

이번 게시글에서는 이러한 기능들과 어떻게 사용하는 지를 다시 한 번 정리하려고 한다.

 

 1) [window.]alert('출력하고싶은 문구') | window.confirm('질문내용')

alert는 단순 확인 버튼만 생성되며 confirm은 확인/취소 버튼이 생성된다.

확인을 누를 경우엔 true가 반환되며, 취소를 누를 경우 false가 반환된다.

코드와 예시 버튼을 만들어서 확인해보자.

<button onclick="testConfirm();">클릭</button>

<div id="area"></div>

<script>
	function testConfirm() {
    	var result = confirm('확인 누르면 1, 취소 누르면 2');
 		
        var divEl = document.getElementById("area");
        
        if(result) {
        	divEl.innerHTML = "<h3>1</h3>";
        } else {
        	divEl.innerHTML = "<h3>2</h3>";
        }
    }
</script>

다음과 같이 코드를 작성한 후 script 태그 안에 confrm을 사용했다.

위에서 말한 것처럼 confirm은 true | false의 boolean 값을 반환하기 때문에 result라는 변수안에 논리값이 담길 것이다.

위 코드를 확인 해보자.

 

 

확인을 누르면 버튼 밑에 있는 div 영역에 1이, 취소를 누르면 2가 생성되는 것을 확인 할 수 있다.

 

코드에서 innerHTML이 사용됐는 데 innerHTML은 밑에서 확인해보자.

 

2) [window.]prompt('질문내용')

confirm이 단순 확인, 취소(true, false)를 반환하는 기능이라면

prompt는 텍스트 상자를 만들어줘서 우리가 입력한 값을 문자열로 반환해준다.

여기서 숫자만 입력해도 문자열로 반환해준다는 것을 알고 있으면 된다. 

prompt 역시 코드로 알아보면

 

<button onclick="testPrompt1();">클릭</button>
<div id="area3"></div>

    <script>
        function testPrompt1() {
            var name = prompt("당신의 이름은 무엇입니까?");
            var age = prompt("당신의 나이는 몇살입니까?");

            var divEl = document.getElementById("area3");

            divEl.innerHTML = "<b>? " + age + "살 " + name + " ㅎㅇ" + "</b>";
        }
    </script>

 

확인 버튼을 누르게 되면 이름을 입력받는 창 한번과 나이를 입력받은 창이 한번씩 뜨게 되고 그 값들은 각각 name, age에 담기게 된다. 

그리고 div영역에 우리가 입력한 내용이 출력되게 된다.