러닝 자바스크립트 - 1. 첫 번째 애플리케이션

어이없는 실수로 부트캠프에서 재수강을 맞이했는데, 자바스크립트를 어느정도 배운 시점에서 점검 겸 복습 차원으로 새로운 책을 활용해 공부를 시작해보려고 한다. 
jquery도 처음 사용해보고, 처음 써 보는 코드들도 마주할 수 있었다.

제이쿼리를 html에 링크하고 제이쿼리 문법도 써보았다. 흥미를 이끌어내기 위한 1장이라고 책에 나와있었는데 딱 맞는 말이었다.

jquery와 Paper.js를 html에 연결

<!-- jquery load / 항상 제이쿼리를 먼저 링크하기 -->
<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>

제이쿼리는 자바스크립트 코드를 실행하기 전에 브라우저가 HTML을 모두 불러왔는지 확인하는 기능을 한다고 한다. 앞으로 바른 습관을 들이기 위해 책 내용을 수행할 때 항상 처음 스크립트 하게 될 것이라고 한다.

단순한 그래픽 그리기

간단하게 만들어 본 원.
JS로 원을 만들 일이 있을까 싶지만 아무튼 신기했다!

// jquery load
$(document).ready(function() {
// javasctipt codes start
	'use strict'; // javascript 엄격모드 실행
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));
    	var c = Shape.Circle(200, 200, 50);
        c.fillColor = 'green';

반복적인 작업 자동화 하기

for문을 사용해서 반복 작업을 수행했다.
녹색 원 64개를 단 4줄의 코드로 완성!

x, y좌표를 지정하고 일정한 간격, 크기로 반복 실행해준 모습

    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';
        }
    }
    

                  ~~환공포증 주의~~

사용자 입력 처리하기

이벤트 핸들러가 벌써 나왔다. 사용자가 클릭하는 위치에 원이 생기게 만들어 주는 이벤트 생성

    var tool = new Tool();
    tool.onMouseDown = function (event) {
        var c = Shape.Circle(event.point.x, event.point.y, 20);
        var c = Shape.Circle(event.point, 20);

tool이라는 함수를 만들고 이벤트 핸들러를 연결시켜줬다.
여기서의 이벤트 핸들러는 두가지 일을 한다.
첫번째는 마우스의 클릭이 일어날 때 코드를 실행해주고,
두번째는 클릭한 위치를 넘겨준다.
마우스로 클릭한 위치는 event.point 프로퍼티에 저장되고 x, y가 클릭한 좌표를 알려준다.

x, y 좌표를 지정하지 않고 위치만 넘긴다면 맨 아래 한 줄만로도 똑같이 동작한다.

Hello World

저자가 헬로 월드를 좋아하나보다. 책에서도 중간중간 언급이 되고 전통의 hello world를 안 써보고는 넘어갈 수 없었던 모양. 이 책에서는 새로운 방식으로 hello world를 출력하고 1장을 마무리 한다.

        var c = Shape.Circle(200, 200, 80);
        c.fillColor = 'black';
        var text = new PointText(200, 200);
        text.justification = 'center'
        text.fillColor = 'white'
        text.fontsize = 20;
        text.content = 'hello world';

언제나 첫 장에서 함께하는 hello world 지만 이런식의 hello world 라면 지겹지 않다!