Node.appendChild()

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

appendChild로 현재 돔에 위치한 태그를 파라미터로 줄 경우

파라미터로 들어간 태그가 appendChild를 받는 부모 태그의 자식 태그로 이동하는 효과가 있다.

이를 이용해서 쉽게 drag event를 만들 수 있다.

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");
const test = document.querySelector(".draggable");

console.log(test);
console.log(containers[1].appendChild(test));
console.log(draggables);
draggables.forEach((draggable) => {
  draggable.addEventListener("dragstart", () => {
    draggable.classList.add("dragging");
  });

  draggable.addEventListener("dragend", () => {
    draggable.classList.remove("dragging");
  });
});

containers.forEach((container) => {
  container.addEventListener("dragover", () => {
    console.log("drag over");
    const draggable = document.querySelector(".dragging");
    console.log(draggable);
    container.appendChild(draggable);
  });
});

event.stopPropagation();

리터럴 객체 선언

let func = (item1, item2) => item1 + item2;
console.log(func(1,2));

const emptyObject = {};

emptyObject.name = "LEee";
console.log(emptyObject.name);

const user = {
    age:20,
    name:"디디에 드록바",
    get_data: () => (1+2),
};
console.log(typeof user, user);
console.log(user.age);
console.log(user.name);
console.log(user.get_data());


const Lee = {
    age: 25,
    name : "Lee",
    details:{
        hobby: "coding",
        major: "software",
        get_detalis:function(item){
            return this.major;
        }
    },

    get get_age(){
        return this.age;
    },

    set set_age(value){
        this.age = value;
    }
}

console.log(typeof Lee, Lee);
console.log(Lee.age);
console.log(Lee.details.hobby);
console.log(Lee.details.get_detalis(4));

console.log(Lee.get_age);
Lee.set_age = 24;
console.log(Lee.get_age);

const a = new Object();

a.age = 10;
a.name = "Daa";
console.log(a.age, a.name);


function User(age, name){
    this.age = age;
    this.name = name;
}

const Kim = new User(3,"Kim");
console.log(typeof Kim);
console.log(Kim.age, Kim.name);

User.prototype.message = function(){
    return "hellow";
}

console.log(Kim.message());

클래스 객체 선언

class Animal{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

class Dog extends Animal{
    constructor(name, age){
        super(name,age);
        
    }
    
    bark = function(){
        return "war war!";
    };
}


const shunider = new Dog("bbo", 12);
console.log(shunider.name);
console.log(shunider.age);
console.log(shunider.bark());

bbo
abc.js:23 12
abc.js:24 war war!

prototype과 hasOwnProperty

class Animal{
    constructor(name){
        this.name = name;
    }

    get_message(){
        return "Hello";
    }

}


Animal.prototype.age = 10;

const dog = new Animal("dog");
console.log(dog.hasOwnProperty('name')); //true
console.log(dog.hasOwnProperty('age')); //false