러닝 자바스크립트: ES6로 제대로 입문하는 모던 자바스크립트 웹 개발

46

러닝 자바스크립트

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

개가 나타납니다. 프로그래밍 경험이 없다면 앞의 코드가

좀 어렵게 느껴질 수도 있겠지만,

128

줄을 손으로 작성하는 것보다는 훨씬 낫다는 건 이해할

수 있을 겁니다.

여기서 사용한 것은

for

루프입니다.

for

루프는

4

장에서 자세히 배울 흐름 제어 문법의 일부

입니다.

for

루프를 사용하려면 초깃값 (

25

), 제한 조건(

400

미만), 증가분(

50

)이 필요합니

다.

x

축과

y

축에서 각각 반복해야 하므로 루프를 두 번 썼습니다.

이 예제는 여러 가지 방법으로 만들 수 있습니다. 여기서 사용한 방법은

x

,

y

좌표를 중요하게 취급

했습니다. 원이 어디서 시작하는지, 원 사이의 간격은 얼마가 되어야 하는지 명시적으로 지정했습니다. 다른

방법을 쓸 수도 있습니다. 예를 들어 좌표와 상관없이 원의 숫자(

64

)만 중요하다고 판단한다면, 프로그램에서

원을 캔버스 어디에 배치할지 정하게 만들 수도 있습니다. 여기서 좌표를 지정하는 방법을 쓴 이유는, 만약 루

프를 사용하지 않고 코드를