// 이 코드는 모던 자바스크립트 입문(徹底マスターJavaScriptの教科書) 에서 인용한 것입니다.
// [ISBN #978-4797388640]. Copyright 2017 by 磯博
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function* randomWalk(c,x0,y0,d){
var dx = [1,0,-1,0], dy = [0,1,0,-1];
var x = x0;
var y = y0;
c.strokeStyle = "red"; //디폴트 값으로 잡기.
c.globalAlpha = 1;
var i = 0,j = 0, k=0;
while(true){
yield;
c.strokeStyle = "rgb("+i+","+j+","+k+")";
c.beginPath();
c.moveTo(x,y);
var dir = Math.floor(Math.random()*4);
x += d*dx[dir];
y += d*dy[dir];
c.lineTo(x,y);
c.stroke();
i = Math.floor(Math.random()*255);
j = Math.floor(Math.random()*255);
k = Math.floor(Math.random()*255);
}
}
window.onload = function(){
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var iter = randomWalk(ctx,300,300,4,"red");
setInterval(function(){iter.next();},1);
}
</script>
<style>
#mycanvas{border: 1px solid gray;}
</style>
</head>
<body>
<canvas id="mycanvas" width=600 height=600></canvas>
</body>
</html>
모던 자바스크립트 입문 중에서 8장 (함수) 의 8-22 예제를 첨부한다.
원래예제와는 조금 다르게 선이 뻗어나갈때마다 색이 바뀌도록설정했다.
재밌는 예제다.
위처럼 랜덤으로 선이 뻗어나간다.
시간이 별로 없어서 책을 빠르게 읽었는데 중간에 있던 예제들은 그냥 지나칠 수가 없어서 하나 하나 전부 만들어봤는데
정말 재밌는 예제가 많다. 서평이 굉장히 좋은 책이었는데 맞는것같다. (물론 무슨 코드지? 하고 한동안 들여다본 코드들도 있다. 특히 좌표관련 코드이다. 그것들도 막 이해가 안되는 그런게 아니라 좀 들여다보면 이해가 갈 정도의 코드다.)
자바를 공부하다가 자바스크립트를 배우면서 조금 이질감이 들긴했다. 다른 언어를 공부하다가 C 나 C++같은 또다른 언어를 공부한다고 해서 느껴지는 잠깐동안의 사소한 구문들에서의 헷갈림이 아니라 음... 뭐라고 해야되지. 약간 엥? 하는 부분들이 있었다. 이게 왜 이렇게 되지... 라거나 신기한 개념들이 많았던 것 같다. 나름 재밌다... 예전에 어느 블로그에서 자바스크립트의 이질감에 대해서 자스의 탄생과 관련해서 풀어낸 글이 있었는데, 기억은 잘 안나지만 나중에 다시 읽으면 좋을 듯 싶다.
그런 이질감을 제외하면, 상당히 재밌는 언어라고 생각한다.
다른 언어들에서 느껴지는 그런 고리타분함이 아니라 정말 결과물을 바로 바로 만들어서 재미를 느낄 수 있는 류의 언어인 것 같다.
반응형
'Web > javascript' 카테고리의 다른 글
| [JS] JS/TS 그리고 웹에 대한 개인적인 생각 (0) | 2023.10.20 |
|---|---|
| [JS] call, apply, bind (0) | 2021.03.01 |
| [JS] 자바스크립트 with 문 (0) | 2021.02.28 |
| [JS] 자바스크립트의 함수는 1급 객체이다. (0) | 2021.02.28 |
| [JS] 가중산술평균과 이미지 필터링 기능의 구현 (0) | 2021.02.26 |