천재교육 풀스택 과정1기 Day6

사용자 객체 만들기

new Object()

var account = new Object(); //new Object()로 빈 객체 생성
account.owner = "황기태"; // 계좌 주인 프로퍼티 생성 및 초기화
account.code = "111"; // 코드 프로퍼티 생성 및 초기화
account.balance = 35000; // 잔액 프로퍼티 생성 및 초기화
account.inquiry = inquiry; // 메소드 작성
account.deposit = deposit; // 메소드 작성
account.withdraw = withdraw; // 메소드 작성

리터럴 표기법

 

var account = {
// 프로퍼티 생성 및 초기화
owner : "황기태", // 계좌 주인 프로퍼티 추가
code : "111", // 계좌 코드 프로퍼티 추가
balance : 35000, // 잔액 프로퍼티 추가
// 메소드 작성
inquiry : function () { return this.balance; }, // 잔금 조회
deposit : function(money) { this.balance += money; }, // 저금. money 만큼 저금
withdraw : function (money) { // 예금 인출, money는 인출하고자 하는 액수
// money가 balance보다 작다고 가정
this.balance -= money;
return money;
}
};

프로토타입

function Student(name, score) {
this.univ = "한국대학"; // this.univ을 이용하여 univ 프로퍼티 작성
this.name = name; // this.name을 이용하여 name 프로퍼티 작성
this.score = score; // this.score를 이용하여 score 프로퍼티 작성
this.getGrade = function () { // getGrade() 메소드 작성
if(this.score > 80) return "A";
else if(this.score > 60) return "B";
else return "F";
}
}

 

var kitae = new Student("황기태", 75); // Student 객체 생성
var jaemoon = new Student("이재문", 93); // Student 객체 생성
document.write(kitae.univ + ", " + kitae.name + "의 학점은 " + kitae.getGrade() + "<br>");
document.write(jaemoon.univ + ", " + jaemoon.name + "의 학점은 " + jaemoon.getGrade() + "<br>")

DOM(Document Object Model)

웹 페이지에 작성된 HTML 태그 당 객체(DOM 객체) 생성

 

Dom Tree

둠은 document가 시작이다.

 

1. document.getElementBtId() - 아이디로 객체를 불러온다.
2. document.querySelector() - 아이디 클래스 상관없이 선택자를 표기하여 객체를 불러온다.
3. Element.innerHTML - 해당 element 요소 안에 html을 추가한다
4. Element.appendChild() - 해당 element의 자식에 html을 추가한다.

event

 

DOM 객체의 이벤트 리스너

• 캡쳐 리스너와 버블 리스너를 모두 소유 가능
  • 이벤트 리스너 등록 시, 캡쳐 리스너인지 버블 리스너인지 구분
• 캡처 리스너와 버블 리스너 등록
  • addEventListener()의 3 번째 매개 변수 이용
    
    • true이면 캡쳐 리스너, false이면 버블 리스너
  • 다른 방법의 이벤트 리스너 등록의 경우
    • 버블 리스너로 자동 등록