JS 문법 - 입출력

강의 소개

현재 수강하고 있는 멀티캠퍼스 k-digital 지능형 웹서비스 풀 스택 과정을 수강하며 적은 내용입니다.

교재로는 모던 자바스크립트 입문을 사용하고 있습니다.

---

 

출력

1. window.alert() 메서드

브라우저 위에 별도의 대화 상자를 띄워서 사용자에게 데이터를 확인시켜준다.

이때, 사용자가 확인을 눌러 대화 상자를 없애기 전까지 다른 작업을 못하게 한다.

참고로, 자바스크립트에서 window객체는 호출 시 window. 을 생략할 수 있다. 따라서 아래 코드와 같이 alert로 쓸 수 있다.

<script>
    function alertBox() {
        alert("대화상자 띄우기. 확인누를 때까지 다른 작업 물가.");
    }
</script>

 

 

2. document.write() 메서드

웹 페이지에서 확인할 수 있게 브라우저 상에서 출력한다. 정확히는 현재 문서의 body에 출력한다.

테스트나 디버깅 용도로 많이 사용된다.

<script>
    document.write("웹 페이지에서 확인");
</script>

 

3. console.log() 메서드

디버깅 용도로 많이 사용된다. 개발자 모드의 콘솔 화면에서 출력 결과를 볼 수 있다.

<script>
    console.log('개발자 도구(윈도우에서 F12)에서 확인');
</script>

 

---

 

대화 상자

원래 내용을 가리고 띄워지는 대화 상자이다. 이 창을 닫지 않으면 뒤의 창에서 작업이 불가하다.

종류는 3가지가 있는데, 앞서 출력으로 소개한 alert메서드를 제외하고 나머지 2개는 입력으로 볼 수 있다.

또한, 이 3가지 메서드 모두 window객체 제공으로 window. 을 생략하고 메서드명만으로 사용할 수 있다.

 

1. window.alert() 메서드

출력에서 소개한 메서드로 입력을 받지 않는다. 따라서 리턴 값도 없다.

 

2.  window.confirm() 메서드

대화 상자에 대해서 사용자가 확인, 취소 2개 중 하나를 선택할 수 있다. 사용자 선택에 따라 리턴 값이 true, false로 반환된다.

<script>
	window.confirm("확인을 누르면 true, 취소를 누르면 false반환");
</script>

 

3. window.prompt() 메서드

대화 상자에 사용자가 입력한 텍스트를 문자열 형태로 리턴한다. 하지만 콘솔에서만 확인할 수 있다. 따라서 사용자에게 보여줄 수 없다.

<script>
	window.prompt("이름을 입력해주세요: ");
</script>

 

+) 입력 시 confirm, propmpt 외에도 form태그 밑의 input 태그들로도 사용자의 입력값을 받을 수 있다.