JS Essential (2)

안녕하세요! 공대남입니다!

오늘도 이어 JS 을 배워 볼게요

• class

class User {
	constructor(name, age) { // __init__
        this.name = name;
        this.age = age;
	}
    sayHi() {
        alert(`안녕하세요 저는 ${this.name} 입니다.`)
    }
}
let kim = new User('Kim', 20); // 여기 작성한 인자가 constructor 에 들어가서 데이터 프로퍼티에 할당
kim.sayHi(); // 안녕하세요 저는 Kim 입니다.

• DOM document 접근

// id 는 고유값이므로 하나불러옴
document.getElementById('아이디 이름')
// class, tag는 리스트형태로 불러옴
document.getElementsByClassName('클래스 이름')
document.getElementsByTagName('태그 이름')
// querySelectorAll : 다른 요소들과의 관계로 찾음
let div = document.querySelectorAll('div.second-div');

• 이벤트리스너

let firstBox = document.getElementById('firstBox');

function sayHi() {
    alert('안녕');
}
function sayBye() {
    alert('잘가');
}

firstBox.addEventListener('click', sayHi); // 함수에 () 를 붙이면 안됨!
firstBox.addEventListener('click', sayBye); // 함수에 () 를 붙이면 안됨!

• 함수 호출 스케쥴링

setTimeout(실행할 함수명, 대기 시간, 함수에 필요한 인자1, 함수에 필요한 인자2, ...);
clearTimeout(setTimeout을 할당한 변수)

setInterval(실행할 함수명, 간격 시간, 함수에 필요한 인자1, 함수에 필요한 인자2, ...);
clearInterval(setInterval을 할당한 변수)