ランニングマシンJavaScript-1.最初のアプリケーション

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

jクエリーをhtmlにリンクし、jクエリー構文も使用したことがあります.本には興味を引くための第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>

Jクエリの機能は、JavaScriptコードを実行する前に、ブラウザがすべての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文を使用して繰り返し操作を行いました.
4行のコードで64個の緑の円を完成します!
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という関数を作成し、イベントハンドラに接続します.
ここのイベントハンドラは2つのことをします.
最初のステップは、マウスクリック時にコードを実行することです.
2つ目はクリックした位置です.
マウスクリックの位置はeventです.point propertyに保存し、x,yがクリックした座標を教えます.
x,y座標を指定せずに位置をスキップするだけで、一番下の行だけで同じ動作を完了できます.

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

いつでも第一章で一緒のハローワールドは、こんなハローワールドなら飽きません!