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

6.1 대화상자 표시하기

• 대화상자는 모달(modal) 창 → 부모 창의 작업이 일시적으로 정지, 부모 창 조작할 수 없음
• 대화상자에서는 일반 텍스트만 표시 가능(줄 바꿈 문자는 이스케이프 시퀀스로 표현)
• window.을 빼고 호출 할 수 있음

1. alert

alert("Hello World");

2. prompt

const name = prompt("What's your name?");

초기값 지정할 수 있다.

const name = prompt("What's your name?", "홍길동");

입력 받은 문자열은 prompt의 반환값이 된다.

3. confirm

const okay = confirm("삭제하시겠습니까?");
if (okay) {
    console.log("okay");
} else {
    console.log("no");
}

confirm의 반환값은 boolean형이다. 확인을 누르면 true가 반환된다.

6.2 console

• console 객체의 다양한 메서드(https://developer.mozilla.org/ko/docs/Web/API/Console)
• console.log, console.info, console.warn, console.error 메서드를 이용하면 문자열이나 변수값을 콘솔에 로그로 출력 가능(단, 로그 스타일이 다름)
• console 객체의 메서드는 인수 여러 개를 쉼표로 구분
• 각 값을 문자열로 표현한 후 공백 문자로 구분해서 순서대로 출력

const a = [1, 2, 3];
console.log("배열", a, "의 길이는", a.length, "입니다.");

6.3 이벤트 처리기 등록하기와 타이머

이벤트 주도형 프로그램

• 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행

이벤트 처리기 등록

• HTML 요소의 속성으로 등록

    <button onClick="displayTime()">Time</button>

• DOM 요소의 프로퍼티로 등록

    const btn = document.getElementById('button');
    btn.onclick = displayTime;

• addEventListener 메서드 사용

타이머

// 지정된 시간 흐른 후 함수 실행
setTimeout(function(){
  console.log(new Date());
}, 1000);

// 지정된 시간마다 반복해서 함수 실행
setInterval(function(){
  console.log(new Date());
}, 1000);

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

• HTML 요소의 innerHTML 프로퍼티로 읽고 쓰기

    display.innerHTML = ((now - startTime)/1000).toFixed(2);

• 폼 컨트롤의 입력 값

• document.write

  • 인수로 받은 문자열을 HTML문서의 body 요소 안에 출력
  • HTML 문서의 내용이 바뀌게 됨

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

• Canvas는 웹 브라우저에서 그래픽을 처리하기 위해 추가된 HTML5 구성 요소
• 주요 웹 브라우저에서 사용 가능
• 2차원 그래픽, WebGL을 사용한 3차원 그래픽 구현 가능