웹 브라우저에서의 입출력

대화상자 표시

window.alert() = 경고 대화상자 표시
window.prompt() = 사용자의 입력을 받는 대화상자 표시
- 입력받은 문자열을 반환한다. (숫자의 경우 parseInt(), parseFloat() 사용)
- 인수로 입력을 보조하는 문구 추가 가능
window.confirm() = 확인/취소 버튼을 가진 대화상자 표시
- 확인, 취소 버튼 클릭에 따라 논리값 true/false 를 반환함.
window. 부분을 생략하고 호출할 수 있다.

console

1. Console 객체의 메서드

부모 창의 동작을 간섭하지 않기 때문에, 프로그램의 동작을 확인하거나 디버깅하는 데 자주 사용된다.
console의 주요 메서드는 다음과 같다.

Method	Description
`console.dir`	객체의 대화형 목록을 출력
`console.error`	오류 메시지 출력 출력
`console.info`	메시지 타입 로그 출력
`console.log`	일반 로그를 출력
`console.time`	처리 시간 측정용 타이머 시작
`console.timeEnd`	처리 시간 측정용 타이머 정지, 시작 후 흐른 시간 출력
`console.trace`	스택 트레이스를 출력
`console.warn`	경고 메시지 출력

2. 콘솔에 텍스트 출력

%s 포맷팅 가능

  var name = "TOM";
  console.log("my name is %s", name);  // -> my name is TOM

3. 실행 시간 측정

console.time, console.timeEnd 를 활용해 특정 코드 실행 시간 측정 가능

  console.time("running_time");
  alert("확인 버튼을 누르세요!");
  console.timeEnd("running_time");  // running_time : 1216.10ms

이벤트 처리기

웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램(Event Driven Program) 이다.
특정 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 것.
이벤트 처리기 란 이벤트가 발생했을 때 실행되는 함수를 말한다.

이벤트 처리 등록 방법

HTML요소의 속성으로 등록

태그의 속성에 이벤트 콜백 함수 정의

  <input type="button" onclick="displayTime();">
  <script>
      function displayTime() {
          var d = new Date();
          console.log("지금은 %s 입니다.", d);
      }
  </script>

DOM 요소(객체)의 프로퍼티로 등록
- DOM객체란 ?
- 자바스크립트 등의 프로그램이 HTML 요소를 조작할수 있게 해주는 인터페이스
- window : window 객체라고 부르며, 웹 브라우저 윈도우 또는 탭 하나
- document : document 객체라고 부르며 HTML 문서 전체를 가리킨다. HTML요소를 새로 만들거나 접근하거나 제거하는등 대부분의 기능을 제공
```
  <head>
  <script>
      // html이 모두 로드되면
      window.onload = function() {
          // 요소 선택
          var button = document.getElementById("btn-1");
          // 이벤트 처리 프로퍼티에 처리할 함수 정의
          button.onclick = function () {
              console.log("이벤트 함수 실행");
          }
      }
  </script>
  </head>
  <body>
      <input type="button" id="btn-1">
  </body>
```
  - 코드 가독성과 유지보수를 위해 html과 js 코드는 분리한다. script 태그는 head의 자식요소로 배치한다.
  - 웹 브라우저는 html 문서를 위에서부터 아래로 차례대로 해석하면서 표시하기 때문에, head에서 먼저 script 태그를 통해 js 코드를 읽었을 때, body 부분을 아직 읽어들이지 못한다.
  - 따라서 window.onload() 메서드를 이용해 html을 모두 읽어들인 이후로 작업을 미룬다.
  - 이벤트 처리기 프로퍼티의 기본값은 모두 null이다. 따라서 이벤트 처리기를 삭제하고 싶으면 null을 대입하면 된다.

addEventListenr 메서드를 사용

  <head>
      <script>
          // html이 모두 로드되면
          window.onload = function() {
              // 요소 선택
              var button = document.getElementById("btn-1");
              // DOM 객체에 이벤트 함수 정의
              button.addEventListener("onclick", function () {
                  console.log('이벤트 함수 호출');
              })
          }
      </script>
      </head>
      <body>
          <input type="button" id="btn-1">
      </body>

타이머

window.setTimeout("함수의 참조", "지연 시간") : 지정된 시간이 흐른 후에 함수 실행
window.setInterval("함수의 참조", "시간 간격") : 일정 시간 간격에 따라 함수 반복 실행
clearInterval( setInterval()의 반환값 ); : 함수 반복 실행 취소

HTML요소를 동적으로 읽고 쓰기

innerHTML 프로퍼티의 사용

요소의 innerHTML 프로퍼티는 그 HTML 요소의 내용을 가리키며, 이를 통해 요소의 내용을 읽거나, 쓸 수 있다.

  <p id="hi">HI!</p>
  <script>
      window.onload = function() {
          var hi = document.getElementById("hi");
          hi.innerHTML = "changed!";
      }
  </script>

form 입력 값 읽기

요소	type속성의 값	값 프로퍼티	설명
`input`	number, text	value	입력된 값을 문자열로 변환한 값
`input`	checkbox, radio	value	항목의 선택 여부를 뜻하는 논리 값
`select`		selectedIndex	선택된 option 요소를 가리키는 인덱스
`textarea`		value	입력된 문자열

Canvas를 활용한 컴퓨터 그래픽스

브라우저에서 그래픽을 처리하기 위해 HTML5에서 추가된 태그
2차원(2d), 3차원(webgl) 그래픽 구현 가능
저수준 API 로, 기본적 기능만 제공
실제 canvas 에 그림을 그릴 일은 없을 것으로 판단됨.

그림 읽어들이기

이미지 리소스에는 URL이 가리키는 이미지 파일
Canvas로 그린 그래픽
img 요소 객체

video 요소 객체

var img = new Image();
img.src = "../../cat1.jpg";
ctx = document.getElementById("canvas-1");
ctx.drawImage(img, x, y);  //(x,y)를 왼쪽위 꼭짓점으로
img.onload = function() {
    ctx.drawImage(img,0,0);
};

ABOUT AUTHOR

ECMAScript6) 웹 브라우저의 입출력