property(프로퍼티) : 객체의 속성(CSS)
Method(메서드) : 객체가 어떻게 동작 할 지를 선언해 놓은 함수=객체의 함수. function으로 만드는 함수와는 다르지만 미리 내장되어 있는 함수이므로 함수의 범위에는 들어감
예) Window.alert()의 경우 window가 객체이름, alert가 메서드.
그리고 window처럼 미리 짜여져 있는 객체는 내장 객체 라고 부름
만약 내장 객체에는 없는 것을 써야 한다면 만들어야 하는데 이를 사용자 정의 객체라고 부름
let 객체명{
속성이름:속성값,
함수이름:function(매개변수){함수식}
};위 방법을 리터럴 표기법이라고 한다.
function 객체명(매개변수,여러개면,로 구분){
this.매개변수1=매개변수1;
}
let 다른객체명=new 위에서만든객체명(변수에해당하는값들);위 방법을 생성자 함수 표기법 이라고 한다.
let book{
name:"책이름",
money:"가격"
};과
function infor(name,money){
this.name=name;
this.money=money}
let book=new infor("책이름","가격")는 같은 모양이다.
둘의 차이라면 위의 경우 안의 고정되는 이름은 같은데 객체명과 값이 다르면 복사를 하고 일일히 수정해야 하지만, 아래의 경우 생성자 함수로 만들었기 때문에 마지막 줄 처럼 new를 넣어서 만들 수 있다는 장점이 있다. 특히 아래의 경우 그 만든 객체들을 배열로 다시 묶을수도 있다
DOM(Document Object Model) : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
DOM을 쓰기 전까지는 특정 태그에 특정 스타일을 적용하고 싶다면 CSS에 추가해야 하는 번거로움이 있지만 JS로 DOM을 제어하면 된다.
예)h3 태그를 안보이게 하고 싶다면 h3 style=”visibility:hidden”를 넣었지만 DOM을 쓰는 방식의 경우 document.querySelector(“h3″).style.visibility=”hiddeb” 처럼 쓸 수 있다.
DOM 요소를 접근하는 방식은 여러가지가 있다.
- document.getQuerySelector(All)(“해당태그 or #id이름 or .class이름”)
- document.getElementById(“id이름”)
- document.getElementsByClassName(“class이름”)-class는 elements인 이유는 여러번 사용 할 수 있기 때문에 s를 붙임
속성 접근-getAttribute() / 속성 수정-setAttribute()