(1) 자바스크립트의 생성자
exam11-1.html ~ exam11-9.html 참고
- exam11-5 : 생성자 상속
- Function.prototype.call() 함수를 이용한다.
function f1(n) {
this.name = n;
}
function f2(n, k, e, m) {
// 상위 생성자를 명시적으로 호출한다.
f1.call(this,n); //f1의 생성자 호출
this.kor = k;
this.eng = e;
this.math = m;
}- exam11-6 : 생성자 상속과 prototype 연결
- Object.create() 함수를 이용한다.
function f1(n) {
this.name = n;
}
f1.prototype.printName = function() {
console.log("이름: " + this.name);
};
function f2(n, k, e, m) {
// 상위 생성자를 명시적으로 호출한다.
f1.call(this,n);
this.kor = k;
this.eng = e;
this.math = m;
}
// f2() 생성자가 f1() 생성자를 상속 받을 때는
// f2() prototype이 f1의 prototype도 상속받아야 한다.
// 그래야만 f2()로 초기화시킨 객체에서 f1.prototype 에 들어있는 함수를 사용할 수 있다.
f2.prototype = Object.create(f1.prototype);-
exam11-8에서의 상속 개념 부가설명
-
object()의 상위 생성자는 없으므로, 즉 null이다.
-
obj0.test0();를 호출할 때, 현재 객체에 없으면 그 객체를 초기화시킨 프로토타입에서 찾아본다.
-
f1() 에서 this.name = "홍길동"을 통해 key 값에 name, value에 홍길동을 넣어준다.
-
상위생성자의 프로토타입에서 정의된 함수는 하위생성자에서도 사용이 가능하다.
-
(2) CSS 셀렉터 문법
https://github.com/InfraWhale/bitcamp-Study/tree/main/web/app/src/main/resources/static/css
test01_1.html ~ test03_5.html 참고
-
div 태그는 division, p 태그는 paragraph의 약자이다. 전자는 하나의 영역을 묶을 때 쓰고 후자는 여러 개의 문장을 묶을 때 쓴다.
-
다른 태그에 같은 id를 줘도 에러는 나지 않지만 보통 이렇게 쓰진 않는다.
-
단어와 단어 사이에는 "-"를 사용한다. ex) background-color
-
두 개에 클래스에 동시에 소속되어 있으면, style 태그에서 위에 있는걸 아래에 있는게 덮어쓴다.
-
border-color를 따로 지정 안하면 폰트 색깔을 보더 색깔로 쓴다.
(3) DOM API의 Document 객체
exam01-0.html 참고
-
-
자바스크립트에서 생성자는 상위 생성자가 있다. 그림상에선 Object가 가장 상위 생성자이다.
-
빈 객체가 만들어진 후, 번호 순으로 초기화시킨다.
-
초기화시킨다는 개념은 준비시킨다고, 또는 변수나 함수를 추가한다고 생각하면 된다.
