[모던 자바스크립트 입문] 6장. 웹 브라우저에서의 입출력

2021. 2. 5. 18:28

웹 브라우저에 내장된 대화상자를 활용하여 입출력하는 방법을 배웁니다. 대화상자는 실제로 프로그래밍을 할 때 자주 사용되는 요소는 아니지만 입출력이 간단하기 때문에 프로그래밍을 학습할 때 자주 사용된다.

대화상자

웹 브라우저의 전역 객체인 Window 객체에는 대화상자를 표시하기 위한 메서드가 세 개 있다.

alert
prompt
confirm

window.alert : 경고 대화상자를 표시

alert("안녕하세요")

window.prompt : 사용자의 문자열 입력을 받는 대화상자를 표시

var name = prompt ("이름을 입력하세요");
//초기값 지정
var name = prompt ("이름을 입력하세요" , "이현규" );
//prompt가 반환하는 값은 문자열이므로 숫자 값을 구 하려면 parseInt나 parseFloat 메서드를 이용해야한다.
var age = parseInt(prompt("나이를 입력하세요");

window.confirm : [확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시

var ret = confirm("취소, 확인 버튼을 클릭하세요");

console

console.dir : 객체의 대화형 목록 출력
console.error : 오류 메세지를 출력
console.info : 메시지 타입 로그를 출력
console.log : 일반 로그를 출력
console.time : 처리 시간 측정용 타이머 시작
console.tiomeEnd : 흐른 시간을 밀리초 단위로 출력
console.trace : 스택 트레이스를 출력
console.warn : 경고 메세지를 출력

타이머

console.time("answer_time");

alert("확인 버튼을 누르십시오");

console.timeEnd("answeR_time"); //answer_time :1236.106ms.

HTML 요소의 석성에 이벤트 처리기 등록하기

HTML 요소에 이벤트 처리기 속서을 설정하면 그 요소에 이벤트가 발생했을 때 동작하는 이벤트 처리기를 등록할 수 있습니다. 예제를 살펴보면 예제 6-1 CLICK 버튼을 클릭하면 콘솔에 현재 시각을 표시하는 프로그램입니다.

<!DOCTYPE html>
<html">
<head>
  <meta charset="utf-8">
  <title>시각을 콘솔에 표시하기</title>
  <script type="text/javascript">
      function displayTime(){
        var d =new Date();
        console.log("현재시각은 " + d.toLocaleString() + "입니다");
        
      }

    </script>
</head>
<body>
    <input type="button" value = "click" onclick = "displayTime()">
</body>
</html>

위의 소스에서 가장 핵심은 onclick="displayTime()" 이며 input 요소를 클릭 했을 때 함수 displayTime이 실행되는 것이다.

'Web > JS' 카테고리의 다른 글

JavaScript 관련 용어 (라이브러리, 플러그인, 함수, 확장 라이브러리) (0)	2021.02.09
[모던 자바스크립트 입문] 8장. 함수 호출하기 (0)	2021.02.08
[Web 2강] HTML과 JS의 만남 (0)	2021.02.05

WantAirpod