러닝자바스크립트
2 minutes read (About 297 words)

chapter1. 첫 번째 에플리케이션

1.2 사용할 프로그램

1) 문법 하이라이트
2) 괄호 맞추기
3) 코드접기
4) 자동완성

1.3 주석에 관해

1
2
3
4
5
//인라인주석
/*
    들여쓰기 블록주석
*/
/* 들여쓰기 안한 주석 *

1.5 자바스크립트 콘솔

1
console.log("hello world");

1.6 제이쿼리

1
2
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
cs

1.7 단순한 그래픽 그리기

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
    <head>
        <link rel="stylesheet" href="main.css">
        <title></title>
    </head>
    <body>
        <canvas id="mainCanvas"></canvas>
 
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script>
        <script type="text/javascript" src="main.js?v=1.0"></script>
        <script>
        
        </script>
    </body>
</html>
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
    'use strict';
    
    
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));
   
 
    //TODO
    var c = Shape.Circle(200,200,50);
    c.fillColor = 'green';
 
    paper.view.draw();
   console.log("main.js loaded");
});

1.8 반복적인 작업 자동화하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
    'use strict';
    
    
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));
    
 
    //TODO
    var c;
    for(var x=25; x<400; x+=50){
        for(var y=35; y<400;y +=50){
            c = Shape.Circle(x,y,20);
            c.fillColor ='green';
        }
    }
 
    paper.view.draw();
   //console.log("main.js loaded");
});

1.9 사용자 입력 처리하기

비동기적 이벤트 : 이벤트가 언제 일어날지 프로그래머가 전혀 알 수 없는 이벤트
사용자 입력은 항상 “비동기적”이다.
ex) 사용자의 마우스 클릭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(document).ready(function(){
    'use strict';
    
    
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));
   
 
    //TODO
   var tool = new Tool(); //tool 객체 생성
   tool.onMouseDown = function(event){ //onMouseDown 이벤트 핸들러 연결
        var c = Shape.Circle(event.point.x, event.point.y, 20); 
        c.fillColor ="yellow";
   }
 
    paper.view.draw();
   console.log("main.js loaded");
});
chapter2. 자바스크립트 개발 도구

Comentarios

Categorias

Nube de etiquetas

const for git세팅 if let map set var 배열 스코프 이터레이터 인스턴스 제너레이터 제어문 클래스 클로저 프로퍼티
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×