17 Class 메소드로 5행 5열글씨-그림 5개 넣기-수업내용

[손자병법]

17 Class 메소드로 5행 5열글씨-그림 5개 넣기-수업내용.zip

205.47KB

/*
    배열 : const nameA = new Array();
           const nameA = ["홍길동", "이동수"];
    Object : 배열, 함수 포함
            const Obj = {
                nameA = ["홍길동", "이동수"];
                함수 = function() {
                    ....;
                }
            }
    class : 배열, Object, 함수 -하나의 틀(형태);
*/

/*
class User {
    constructor( name, age ) {
        this.name = name;
        this.age = age;
    }
    user_func() {
        console.log( "멤버함수 : " + this.name + ", " + this.age );
    }

//  생성자 호출시 데이터 값을 자동으로 체크해 주는 함수 setter이고
//  seeter가 성공적으로 저장이 되면 getter가 호출이 가능하다.
    get age() {
        return this._age;
    }
    set age( value ) {
        this._age = value > 100 ? 0 : value;
    }
}
window.xxxxonload = function() {
    let us1 = new User("홍길동", 200);
    us1.user_func();
    console.log( "멤버변수 직접 호웊 : " +  us1.name + ", " + us1.age );
}
*/

/*
class Person {
    constructor(name, power, deps, inv) {
        this.name = name;
        this.power = power;
        this.deps = deps;
        this.inv = inv;
    }
}
const PersonA = [
    {name: "홍길동", power: 10, deps: 100, inv: 1},
    {name: "이동수", power: 20, deps: 200, inv: 2},
    {name: "김철수", power: 30, deps: 300, inv: 3},
    {name: "강수정", power: 40, deps: 400, inv: 4},
    {name: "최연희", power: 50, deps: 500, inv: 5},
]

// 그림 오브젝트
const imgA = [
    {img: "img0.jfif", name: "첫 번째"},
    {img: "img1.jfif", name: "두 번째"},
    {img: "img2.jfif", name: "세 번째"},
    {img: "img3.jfif", name: "네 번째"},
    {img: "img4.jfif", name: "다섯 번째"},
]
class Img {
    constructor(img, name) {
        this.img = img;
        this.name = name;
    }
    print() {
        str="";
        for(i=0; i<5; i++) {
            this["img" + i] = new Img( imgA[i].img );

            str += "<div class='img" + i + "'> <img src='img/" + imgA[i].img + "'> <p class=img_p" + i + ">" + imgA[i].name +"</p> </div>";
        }
    }
}
window.xxxxonload = function() {
    // 이름, 파워, 수비력, 공격력 오브젝트에서 읽어다가 클래스 생성시 construct에 대입하여 출력하기 (5행, 5열)
    str = "";
    for(i=0; i<5; i++) {
        this["per"+i] = new Person(PersonA[i].name, PersonA[i].power, PersonA[i].deps, PersonA[i].inv );

        str += "<div class='perBox" + i + "'>" + PersonA[i].name + "</div>";
        str += "<div class='perBox" + i + "'>" + PersonA[i].power + "</div>";
        str += "<div class='perBox" + i + "'>" + PersonA[i].deps + "</div>";
        str += "<div class='perBox" + i + "'>" + PersonA[i].inv + "</div>";
    }
    $(".box").html( str );

    // 생성자에 데이터 전달(construct)된 것을 클래스 메소드를 통해서 (그림과 설명)출력하기
    for(i=0; i<5; i++) {
        this["img"+i] = new Img( imgA[i].img, imgA[i].name );
        this["img"+i].print();
    }
    $(".imgBox").html( str );

}
*/

class Job {
    constructor( name, age ) {
        this.name = name;
        this.age = age;
    }
    show() {
        console.log( "메소드에서 출력 : " + this.name );
    }
}
window.xxxxonload=function() {
    let a = new Job("홍길동", 20);
    a.show();
    console.log("직접 객체에서 출력 : " + a.name);
    console.log( "클래스 a의 데이터형 : " + a );
    for(n in a) {
        console.log( a );
    }
}