개발

Class 객체 예제 본문

Frontend/JavaScript

Class 객체 예제

Study 2021. 5. 1. 09:52

객체 내 메서드 생성 후 배열, for문 응용하여 인터벌로 이동 기능 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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 src="../js/lib.js"></script>
<script>
  var arrow=[];
  var arrowCnt=100;
  var colorArray=["red","orange","yellow","green","blue","navy","purple"];
  var textArray=["♭","♩","♪","♬","◆","☆","★","◐","◑","○","●","◎","⊙",
   "◈","◇","△","▲","▽","▼","□","■","◁","◀","▷","▶","◇","◆","♤",
   "♠","♡","♥","♧","♣"];
 
//1회성이 아닌, 추후 두고 두고 써먹을 코드 영역을 지정한 후, 거푸집으로 선언하자!!
//전산에서는 이 코드 단위를 클래스라 한다..    
//2015년부터 ECMAScript(javascript 명칭)에서는 class지원하기 시작함!!
//클래스명은 자바, C# 등에서 첫 철자를 대문자로 작성함이 약속임
class Arrow{    //화살 자체가 아니라, 장차 화살을 만들어 낼 틀!즉 물건 자체가 아니다!!
    //자바스크립트에서는 사물이 보유한 변수는 constructor()라는 함수 즉 생성자 함수내에
    //작성해야 하는 규칙이 있다..
    constructor(y,velX,color,text){
        this.span;
        this.velX=velX; //x좌표의 속도
        this.x=0; //x좌표
        this.y=y;
        this.color=color;
        this.text=text;
    }
 
    //사물이 보유한 함수를 가리켜, 그 사물의 동작방식, 방법을 표현한다고 하여 메서드
    //method라 한다!!
    init(){
        this.span=document.createElement("span");
        this.span.style.position="absolute";
        this.span.style.left=0+"px";
        this.span.style.top=this.y+"px";
        this.span.innerText=this.text;
        this.span.style.fontSize=20+"px";
        this.span.style.color=this.color;
        document.body.appendChild(this.span);//body에 부착!!
    }   
 
    move(){
        this.x = this.x + this.velX; // x= x+10 즉 10씩 누적
        this.span.style.left=this.x+"px";
    }
}
function auto(){
    for(var i=0;i<arrow.length;i++){
        arrow[i].move();
    }
}
window.addEventListener("load", function(){
    //원하는 만큼 거푸집으로부터 화살을 생성해보자! 즉 쇳물 붓기!!!
    for(var i=0;i<arrowCnt;i++){
        arrow[i]=new Arrow(i*10,getRandom(20)+1,
            colorArray[getRandom(colorArray.length)],
            textArray[getRandom(textArray.length)
        ]);
        arrow[i].init();
        arrow[i].move();
    }
    setInterval("auto()", 100);
});    
</script>
</head>
<body>
</body>
</html>
 cs

'Frontend > JavaScript' 카테고리의 다른 글

Json 기초, 구글맵  (0) 2021.06.20
회원관리 페이지 예제  (0) 2021.03.21
팝업 이미지카드 예제  (0) 2021.03.21
베네치아 타자게임 예제  (2) 2021.03.21
그림판 만들기 예제  (0) 2021.03.20
'Frontend/JavaScript' Related Articles more