1.1 시작은 브라우저에서
- 이 책은 전통적이고, 현실적이기도 한 이유로 브라우저 기반 프로그램부터 만들어 볼 것이다.
- 또한 브라우저 기반 프로그램부터 만드는 이유는 또 하나가 있는데, 그래픽 라이브러리를 사용하기 편리하다는 점 때문이다. 프로그래밍 개념과 시각적 요소를 결합하여 훨씬 이해하기 쉽도록 하기 위해서이다.
- 이 예제를 선택한 배경에는 이벤트 주도 프로그래밍 같은 중요한 개념으로 자연스럽게 연결된다는 이유도 있다.
1.2 사용할 프로그램
- 프로그램을 만들기 위해 필요한 것은 브라우저와 텍스트 에디터 뿐이다.
- 필자는 프로그래밍에 사용하는 브라우저로 파이어폭스를 선택했고, 앞으로 이 책에서 브라우저를 설명할 때에는 파이어폭스를 기준으로 할 것이다.
- 코드를 작성하려면 텍스트 에디터가 필요하다. 텍스트 에디터는 크게 텍스트 모드 에디터와 창 모드 에디터 두가지로 나뉠 수 있다.
- 텍스트 모드 에디터 중 가장 널리 쓰이는 것은 vi/vim 과 이맥스이다. 텍스트 모드 에디터에 익숙해지면 SSH 등으로 원격 컴퓨터에 접속한 상태에서도 익숙한 에디터로 파일을 편집할 수 있다.
- 창 모드 에디터는 더 세련돼 보이고, 친숙하고 유용한 사용자 인터페이스를 갖추고 있다. 창 모드 에디터 중 가장 유명한 것은 아톰, 서브라임 텍스트, 코다, 비주얼 스튜디오, 노트 패드, 텍스트패드, Xcode 등이다.
- 이들 에디터 중 하나에 익숙하다면 그것을 사용하면 된다. 윈도우 메모장을 제외하고 말이다.
- 에디터의 기능 중 적어도 이 몇가지 기능에는 익숙해야 한다.
- 문법 하이라이트
- 괄호 맞추기
- 코드 접기
- 자동 완성
1.3. 주석에 관해
- 자바 스크립트도 다른 프로그래밍 언어와 마찾가지로 주석을 쓴다. 자바 스크립트는 주석을 완전히 무시하므로 개발자들만을 위한 것이다.
- 자바 스크립트의 주석은 인라인 주석과 블록 주석 두 가지이다. 인라인 주석은 슬래시 두 개(//)로 시작해서 행 끝에서 끝난다. 블록 주석은 /*로 시작해서 */로 끝나며 여러 줄에 걸쳐 쓸 수 있다.
- 곧 알아볼 캐스케이딩 스타일 시트(CSS)도 블록 주석는 자바 스크립트와 같지만 인라인 주석은 지원하지 않는다. 마찬가지로, HTML에도 인라인 주석은 없으먀 블록 주석은 <!--와 -->를 사용한다.
1.4 시작하기
- 먼저 HTML 파일과 CSS 파일, 자바 스크립트 소스 파일 세 가지를 만들면서 시작한다.
- 자바 스크립트와 CSS는 HTML에 포함되므로 HTML 파일 하나에서 모든 일을 다할 수 있으나 분리하면 뚜렷한 장점이 있으므로 분리하여 프로그램을 만들 것이다.
- 이 장은 ES6가 아닌 ES5를 쓰는 유일한 장이다. 그 이유는 ES6를 지원하지 않는 브라우저를 사용하더라도 코드 샘플이 동작하게 하기 위함이다. 2장부터는 ES6를 설명하며, 구식 브라우저에서도 동작하도록 트랜스 컴파일 하는 방법을 배운다.
- 가장 먼저 자바 스크립트를 만든다. 텍스트 에디터를 열어 main.js 파일을 만든다. 지금은 이 파일에 행 하나만 추가한다.
console.log('main.js loaded');
- 그리고 이어 비어있는 main.css 파일을 하나 만든다.
- 마지막으로 index.html 파일을 만들어 이전에 만든 자바스크립트와 CSS 파일을 가져오는 코드를 짠다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>My first application</h1>
<p>Welcome to <i>Learning JavaScript, 3rd Edition</i>.</p>
<script src="main.js"></script>
</body>
</html>
- HTML 문서는 크게 헤드와 바디로 나뉜다.
- 헤드는 브라우저에 내용과 관련이 있으나 직접 브라우저에 표시되지는 않는 정보를 담는다.
- 바디는 브라우저에 렌더링될 페이지 콘텐츠가 들어있다. 물론 <script> 같은 특정 요소는 바디에 있어도 브라우저에 나타나진 않는다.
- 헤드에 있는 <link rel="stylesheet" href="main.css">는 CSS 파일을 문서로 불러오는 링크이며, 바디 마지막에 있는 <script src="main.js"></script>는 자바 스크립트 파일을 문서로 불러오는 링크이다.
- 바디에는 <h1>My first application</h1>가 있다. 이 태그는 최상위 헤더 텍스트, 즉 페이지에서 가장 크고 중요한 텍스트이다.
- <p>(문단) 태그에는 텍스트가 들어있는데 그 중 일부는 이탤릭체이며 <i> 태그로 둘러싸여있다.
- 브라우저에서 index.html을 불러볼 수 있다. 가장 쉬운 방법은 파일 브라우저에서 파일을 더블 클릭해보는 것이며 파일을 브라우저 창에 드래그해도 된다. HTML 파일의 바디 콘텐츠가 보일 것이다.
1.5 자바스크립트 콘솔
- 자바 스크립트 파일에 쓴 console.log('main.js loaded')에서 콘솔은 프로그램을 진단할 때 사용하는 텍스트 전용 도구이다.
- 브라우저마다 콘솔에 접근하는 방법이 다르다. 콘솔을 다루기 위한 키보드 단축키는 다음과 같다.
- 윈도우와 리눅스용 파이어폭스 : Ctrl - Shift - K
- 맥용 파이어폭스 : Command - Option - K
- 윈도우와 리눅스용 크롬 : Ctrl - Shift - J
- 맥용 크롬 : Command - Option - J
- index.html을 불러온 페이지에서 자바스크립트 콘솔을 열면 main.js loaded라는 텍스트가 보여야 한다. 만약 보이지 않으면 페이지를 리로드 해봐라.
- console.log는 원하는 내용을 콘솔에 출력할 때 사용되는 메서드이며 디버깅에도 유용하고, 언어를 배울 때도 유용하다. 또한 자바스크립트 코드를 콘솔에 직접 입력할 수도 있으므로 간단한 테스트를 하거나 자바스크립트 기능을 공부할 수도 있고, 프로그램을 임시로 수정하는 것도 가능하다.
1.6 제이쿼리
- 대단히 인기 있는 클라이언트 스크립트 라이브러리인 제이쿼리를 페이지에 불러올 것이다. 제이쿼리는 거의 어디에서나 쓰이는 라이브러리이며 웹 코드를 작성할 때 거의 항상 가장 먼저 불러오는 라이브러리이다.
- 바디 마지막, main.js를 불러온 행 바로 앞에 제이쿼리 링크를 삽입한다.
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="main.js"></script>
- 인터넷 URL을 통해 콘텐츠 전송 네트워크(CDN)에서 서비스하는 제이쿼리를 링크했으므로 불러오는 속도가 더 빠르다. 오프라인으로 프로젝트를 만든다면 제이쿼리 파일을 다운받아야한다.
- 제이쿼리를 제대로 사용하려면 main.js 파일을 다음과 같이 바꾼다.
$(document).ready(function() {
'use strict';
console.log('main.js loaded');
});
- 이 코드를 통해 제이쿼리는 자바스크립트 코드를 실행하기 전에 브라우저가 HTML을 전부 불러왔는지 확인한다. 바른 습관을 들이기 위해 앞으로 브라우저 기반 자바스크립트를 만들 때마다 이렇게 할 것이다.
- 'use strict'라는 행도 있는데, 이 명령은 간단히 말해, 자바 스크립트 인터프리터에서 코드를 더 엄격하게 처리하라는 뜻이다.
1.7 단순한 그래픽 그리기
- HTML5에서 발전한 것 중에는 표준화된 그래픽 인터페이스도 있다. HTML5 캔버스를 통해 그래픽 사각형이나 원, 다각형 같은 단순한 도형을 그릴 수 있게 되었다.
- 캔버스를 직접 사용하는 일은 매우 어려우므로 그래픽 라이브러리 Paper.js(http://paperjs.org/)를 사용해서 HTM5 캔버스를 사용할 것이다.
- Paper.js로 그림을 그리기 전에 먼저 HTML 캔버스 요소를 준비해야 한다. index.html에서 다음행을 바디에 추가한다.
<canvas id="mainCanvas"></canvas>
- 캔버스에 사용한 id 속성은 자바스크립트와 CSS에서 이 요소를 쉽게 찾기 위한 것이다. 이 상태로는 캔버스에 아무것도 안 그렸을 뿐만 아니라, 캔버스의 너비와 높이도 정하지 않았으므로 브라우저에 아무것도 뜨지 않는다.
- 캔버스가 페이지에 잘 보이도록 main.css에 HTML 요소에 너비와 높이를 설정하고 검은색 테두리를 추가하는 코드를 짠다.
mainCanvas {
width: 400px;
height: 400px;
border: solid 1px black;
}
- 이제 페이지를 리로드하면 캔버스가 잘 보인다.
- index.html에서 캔버스 위에 그리는 작업을 도와줄 Paper.js 라이브러리를 링크하고 제이쿼리 링크를 바로 다음인 main.js 링크 앞에 행을 추가한다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>My first application</h1>
<p>Welcome to <i>Learning JavaScript, 3rd Edition</i>.</p>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/
paper-full.min.js"></script>
<script src="main.js"></script>
<canvas id="mainCanvas"></canvas>
</body>
</html>
- 이번에도 CDN을 통해 Paper.js을 불러왔다. main.js에서 제이쿼리와 Paper.js를 모두 사용해야 하므로 이들을 main.js 보다 먼저 링크해야한다.
- 이제 main.js의 설정 작업이 필요하다. 항상 어떤 일을 하기 전에 먼저 실행해야 하는코드를 보통 템플릿, 또는 보일러플레이트(boilerplate)라고 부른다. 이 코드를 main.js의 'use strict' 바로 다음에 추가한다.
paper.install(window);
paper.setip(document.getElementById('mainCanvas'));
// TODO
paper.view.draw();
- 위의 코드의 첫번째 행에서는 Paper.js를 전역 스코프에 설치했다.
- 두번째 행에서는 Paper.js를 캔버스에 연결하여, Paper.js가 그림을 그릴 수 있도록 준비했다. 중앙의 TODO는 실제로 그림을 그리는 코드가 들어갈 자리이다.
- 마지막 행은 Paper.js에게 실제로 화면에 그림을 그리라는 명령하는 코드이다.
- 이제 캔버스 중앙에 녹색원을 그린다. TODO 주석을 다음 행을 교체하면 된다.
var C = Shaper.Circle(200, 200, 50);
c.fillColor = 'green';
- 첫번째 행은 원 객체를 만들고, 객체를 만들기 위해 세개의 매개변수에 원 중앙의 x,y 좌표와 반지름의 길이를 순서대로 넘겨준다.
- 캔버스의 너비와 높이가 400픽셀이므로 캔버스의 중앙은 (200, 200)이다.
- 반지름 50 픽셀은 캔버스의 너비와 높이의 1/8이다.
- 두번째 행에서는 채울 색깔(fill)을 정했다. Paper.js에서 스트로크(Stroke)라 부르는 외곽선 색깔과는 다르다.
1.8 반복적인 작업 자동화하기
- 원을 하나만 그리지 않고, 캔버스 전체에 바둑판 모양으로 채우고 싶다면, 원의 크기를 줄이고, 원의 중심이 서로 50픽셀씩 떨어지게 하면 캔버스에 64개의 원을 그릴 수 있다.
var c;
for (var x = 25, x < 400; x += 50) {
for (var y = 25; y < 400; y += 50) {
c = Shape.Circle(x, y, 20);
c.fillColor = 'green';
}
}
- 기존의 녹색원 하나를 띄우는 코드를 위의 코드로 바꾸고 브라우저를 새로고침하면 녹색원 64개가 뜬다.
- 이 코드에서는 for 루프를 사용했다. for 루프는 4장에서 자세히 배울 흐름 제어 문법의 일부이다. for 루프를 사용하려면 초깃값(25), 제한 조건(400 미만), 증가분(50)이 필요하다. x축과 y축에서 각각 반복해야하기 때문에 두개의 for 루프를 중첩했다.
- 이 예제는 여러가지 방법으로 만들 수 있다. 여기서 사용한 방법은 원이 어디서 시작하여 간격을 얼마로 해야하는지 명시했으나, 명시하지 않는다면 프로그램이 원의 위치를 정하게 할 수도 있다. 그럼에도 불구하고 좌표를 지정한 것은 루프를 사용하지 않고 코드를 63번 복사해서 붙였다면 위와 비슷하게 원 사이의 간격을 지정했을 것으로 생각하기 때문이다.
1.9 사용자 입력 처리하기
- 지금까지 사용자의 입력을 전혀 받지 않은 채 프로그램을 실행했다. 원을 어디에 그릴지 사용자가 선택할 수 있도록 하여 프로그램을 좀 더 대화형으로 수정해보자.
- 사용자의 입력은 항상 비동기적이라는 사실에 익숙해야 한다. 비동기적 이벤트란 이벤트가 언제 일어날지 프로그래머가 전혀 알 수 없는 이벤트를 말한다. 사용자의 마우스 클릭도 비동기적 이벤트의 일종이다.
- Paper.js는 툴 객체를 통해 사용자의 입력을 처리한다. 바둑판 모양으로 원을 그리는 코드를 다음 코드로 교체하자.
var tool = new tool();
tool.onMouseDown = function(event) {
var c = Shape.Circle(event.point.x, event.point.y, 20);
c.fillColor = 'green';
}
- 위의 코드의 첫 행에서는 tool 객체를 만들었다. 이 객체를 만들면 이 객체에 이벤트 핸들러를 연결할 수 있다. 여기서는 onMouseDown 이벤트 핸들러를 연결했다. 따라서 사용자가 마우스를 클릭할 때마다 이 핸들러에 연결한 함수가 호출된다.
- 기존의 예제에서는 코드가 즉시 실행되었으나, 이 예제에서는 사용자가 캔버스 어딘가를 마우스를 클릭해야만 function 다음에 있는 중괄호 사이의 코드가 실행된다.
- 이 이벤트 핸들러는 두 가지 일을 한다.
- 마우스를 클릭할 때 중괄호 안의 코드를 실행한다.
- 사용자가 어디를 클릭했는지 보고한다.
- 마우스로 클릭한 위치는 매개 변수의 event.point 프로퍼티에 저장된다. event.point의 x와 y 프로퍼티가 마우스로 클릭한 위치의 좌표이다. x와 y 좌표를 각각 지정하지 않고, 클릭한 위치를 바로 넘기면 다음과 같이 좀 더 짧게 쓸 수도 있다.
var c = Shape.Circle(event.point, 20);
1.10 Hello, World
- 텍스트를 추가한다. onMouseDown 핸들러 앞에 다음 코드를 추가한다.
var c = Shape.Circle(200, 200, 80);
c.fillColor = 'black';
var text = new PointText(200, 200);
text.justification = 'center';
text.fontSize = 20;
text.content = 'hello world';
- 텍스트의 배경으로 쓸 다른 원을 하나 더 만들고, 텍스트 객체 PointText를 만들었다.
- 텍스트가 캔버스의 중앙에 위치하도록 하고, 정렬 방식과 색깔, 크기 같은 몇가지 속성을 추가했다.
- 마지막으로 실제 텍스트 콘텐츠인 "hello world"를 지정했다.
