http://localhost:8080/javascript/ex04/exam10-6.html

scores[0] = new createScore("홍길동", 100, 100, 100);
new로 생성된 객체의 주소가 this에 들어감

① 기본 객체를 생성 ← new
② createScore가 초기화 시킴
③ 초기화 시킨 객체를 리턴

기본 객체에 name, kor, eng, math 등등 추가하는 거

exam10-6은 객체를 바깥에서 만들어서
객체를 만들어서 초기화시킨다는 측면에서는 10-6번이 더 직관적이고 명확해서 이 방법을 더 많이 쓴다.

함수명이 저러면 모름
개발자들 사이에서 관례적으로 함수 이름이 대문자

7)
생성자 역할을 하는 함수의 이름은 대문자로 시작한다.
생성자 이름은 객체의 용도를 표현하는 명사 형태로 짓는다.

자바스크립트는 생성자 문법이 따로 없기 때문에
함수의 이름을 대문자로 시작하여 다른 개발자에게 알려준다.

자바와 다르게 자바스크립트는 생성자 문법이 따로 없다.
생성자 함수는 대문자로 시작하고 명사구 형태

8) 객체에 대해 공통으로 사용하는 함수를 공유하기

생성자를 100번 호출하면 함수도 100개가 생김
메모리 낭비임

해결 방안?
객체에 대해 공통으로 사용하는 함수는 별도의 보관소에 저장한다.

함수 부분 주석처리하면 에러남

// 객체에 대해 공통으로 사용하는 함수는 생성자 객체에 보관한다.
// => 생성자 객체에 prototype 객체가 들어 있는데 여기에 보관해야 한다.
Score.prototype.sum = function() {
	return this.kor + this.eng + this.math;
};

Score.prototype.aver = function() {
	return this.sum() / 3;
};

잘 나옴

함수를 만든다(X) → 함수를 정의한다(O)

http://localhost:8080/javascript/ex04/exam10-7.html

각 객체마다 sum, aver 함수가 들어 있음

http://localhost:8080/javascript/ex04/exam10-8.html

객체마다 함수가 안 들어 있음

함수 하나를 공유하는 거

생성자의 prototype 보관소

① 함수 공유 전

② 함수 공유 후

함수는 한 번만 만들어진다. → 메모리 절약!
변수도 가능

http://localhost:8080/javascript/ex04/exam11-2.html

function f1() {
  console.log(this);
  // 생성자로 동작할 때는 this 내장 변수에 객체 주소가 들어 있다.
}

new f1(); // 생성자로 사용
f1(); // 일반 함수로 사용

function f1() {
}

var obj1 = new Object();
var obj2 = new f1();

console.log(obj1);
console.log(obj2);

function f1() {
}

var obj1 = new Object();
var obj2 = new f1();

// 객체의 constructor 프로퍼티에는 생성자 정보가 들어 있다.
// 그래서 해당 객체가 어떤 생성자를 통해 초기화 되었는지 알 수 있다.
console.log(obj1.constructor);
console.log(obj2.constructor);

console.log(obj1.constructor);
console.log(obj1);

console.log("------------------------");

console.log(obj2.constructor);
console.log(obj2);

생성자를 정의할 때 개발자가 따로 작성하지 않아도
제일 첫 문장에 Object() 생성자를 호출하도록 코드가 자동 삽입된다.
       this.Object()
그래서 자바스크립트의 모든 객체는 Object() 생성자가 추가한 변수나 함수를 갖고 있다.

생성자에 상관없이 모든 객체는 Object() 생성자의 prototype 보관소를 공유한다.
모든 객체는 Object.prototype 보관소에 저장된 변수나 함수를 사용할 수 있다.

모든 함수 객체는 prototype이 있다.

3교시 시작

객체를 생성해주는 일을 하는 함수는 "팩토리(factory) 함수"라 부른다.

객체를 초기화시킨다 → 준비시킨다

http://localhost:8080/javascript/ex04/exam11-5.html

생성자5 - 생성자 상속

function f1(n) {
  this.name = n;
}

var obj1 = new f1("홍길동");
console.log(obj1);

f1.call(this, n);

function f1(n) {
  this.name = n;
}

function f2(n, k, e, m) {
  // 상위 생성자를 명시적으로 호출한다.
  f1.call(this, n);
  this.kor = k;
  this.eng = e;
  this.math = m;
}

var obj1 = new f1("홍길동");
console.log(obj1);

var obj2 = new f2("홍길동", 100, 90, 80);
console.log(obj2);

생성자6 - 생성자 상속과 prototype 연결

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;
}

var obj1 = new f1("홍길동", 100, 90, 80);
console.log(obj1);
obj1.printName();

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;
}

var obj1 = new f2("홍길동", 100, 90, 80);
console.log(obj1);
obj1.printName();

f2.prototype = Object.create(f1.prototype);

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);

var obj1 = new f2("홍길동", 100, 90, 80);
console.log(obj1);
obj1.printName();

exam11-7.html

생성자7 - typeof와 instanceof

객체를 초기화시킨 생성자가 무엇인지 상관없이 모든 객체의 타입은 "object" 이다.

instanceof 를 사용하면 그 객체를 초기화 시킨 생성자를 확인할 수 있다.

모든 생성자의 최상위 생성자는 Object() 이다.

exam11-8.html

생성자8 - 생성자 상속과 instanceof

function f1() {
  this.name = "홍길동";
}
f1.prototype.test1 = function() {
  console.log("test1()...");
};

function f2() {
  f1.call(this); // 상위 생성자를 호출해야 한다.
  this.email = "hong@test.com";
}
f2.prototype = Object.create(f1.prototype);
f2.prototype.test2 = function() {
  console.log("test2()...");
};

function f3() {
  f2.call(this); // 상위 생성자를 호출해야 한다.
  this.tel = "010-1111-2222";
}
f3.prototype = Object.create(f2.prototype);
f3.prototype.test3 = function() {
  console.log("test3()...");
};

var obj1 = new f1();
var obj2 = new f2();
var obj3 = new f3();

console.log(obj1);
console.log(obj2);
console.log(obj3);
console.log("-----------------------");

console.log(obj3 instanceof f3);
console.log(obj3 instanceof f2);
console.log(obj3 instanceof f1);
console.log(obj3 instanceof Object);
console.log("-----------------------");

console.log(obj2 instanceof f3);
console.log(obj2 instanceof f2);
console.log(obj2 instanceof f1);
console.log(obj2 instanceof Object);
console.log("-----------------------");

console.log(obj1 instanceof f3);
console.log(obj1 instanceof f2);
console.log(obj1 instanceof f1);
console.log(obj1 instanceof Object);
console.log("-----------------------");

f2.prototype.constructor = f2;
f3.prototype.constructor = f3;

exam12

객체 - constructor와 생성자

// 객체를 초기화시킨 생성자를 알아내기
// => constructor 프로퍼티를 사용하라!
console.log(obj1.constructor)

// 생성자의 이름?
console.log(obj1.constructor.name)

DOM API 사용법

CSS 사용법

bitcamp-study\web\app\src\main\resources\static\css\test01_1.html

http://localhost:8080/css/test01_1.html

셀렉터(selector)
=> 스타일을 적용할 대상자를 지정하는 문법

border-style: dotted; ← 테두리 스타일

css border-style 검색

https://developer.mozilla.org/ko/docs/Web/CSS/border-style

web color 검색

https://en.wikipedia.org/wiki/Web_colors

색은 3 byte로 표현
red : FF 00 00
FF = 255
#ffffff 흰색
border-color: rgb(0, 100, 0);
보통은 이름 아니면 #000000 많이 씀

paragraph

ul (unordered list)

id가 중복되더라도 웹 브라우저는 에러는 안 띄움

나중에 나오는 게 덮음

border 색을 따로 지정 안 하면 font 색을 border 색으로 한다.

의사 셀렉터(pseudo selector)
태그가 특정 상태에 놓일 때

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

자손 태그 지정할 때는 space

ul > li ← ul의 직계 자식만

형제 태그
img + ul ← img 태그 바로 다음에 오는 ul 태그에 대해서만

셀렉터(selector) III
특정 조건을 갖는 대상자를 지정하기
=> 대상자를 지정할 때 조건을 나열할 수 있다.
=> 문법
대상자#id명
대상자.class명
대상자:상태명
대상자[속성명]

div#content ← div 중에서 content 라는 id를 갖는 div

div#menu li.c2 ← 'id가 menu인 div'의 자식 태그 중에서 'class가 c2인 li'

ul.c1.c2 ← class가 c1, c2 둘 다 있는 ul 태그

input[value][type="text"] ← 타입이 text인 것 중에서 value 속성이 있는 거

input[name^="office"] ← 속성의 값이 특정 문자열로 시작하는 경우

input[name$="fax"] ← 속성의 값이 특정 문자열로 끝나는 경우

div:nth-child(2) ← div 중에서 둘째 자식인 div
태그에 상관없이 몇 번째 자식인지
위에 다른 태그여도 상관없음

li:first-child ← li 중에서 첫번째 자식인 li

text-decoration은 하위 태그들에게도 다 영향을 끼친다.

a:link 평상시 링크를 무슨 색으로 할 건지

a:active 마우스로 누를 때 active 상태

태그에 대해서 스타일을 지정하는 것보다 class로 스타일 지정이 우선순위가 더 높다

DOM API

bitcamp-study\web\app\src\main\resources\static\javascript\ex05\exam01-0.html

http://localhost:8080/javascript/ex05/exam01-0.html

DOM API - document 객체

자바스크립트는 태그를 다루는 도구를 제공한다.
그 도구를 "DOM(Document Object Model) API"라 부른다.

// document의 타입은?
// => 즉 document 객체를 초기화시킨 생성자는?
console.log(document.constructor.name);

document 객체를 통해 사용할 수 있는 함수나 변수는?
=> HTMLDocument 생성자가 추가한 함수나 변수이다.

dom api htmldocument 검색

https://developer.mozilla.org/ko/docs/Web/API/HTMLDocument

https://developer.mozilla.org/ko/docs/Web/API/Document

DOM API - document 객체

④ Document() --> ③ Node() --> ② EventTarget() --> ① Object()

Document()는 Node()를 상속 받음
Node()는 EventTarget()을 상속 받음
EventTarget()는 Object()를 상속 받음
모든 생성자의 제일 꼭대기에는 Object()가 있다

document 객체에 있는 변수나 메소드 중에서 일부는 Object()가 추가한 변수, 함수고 일부는 EventTarget() 생성자가 추가한 변수, 함수고 일부는 Node() 생성자가 추가한 변수, 함수고 일부는 Document()가 추가한 변수, 함수가 document 객체 안에 있다.

생성자의 상속 관계...

// Object() 생성자가 추가한 함수 존재여부 확인
console.log(document.toString);

// EventTarget() 생성자가 추가한 함수 존재 여부 확인
console.log(document.addEventListener);

// Node() 생성자가 추가한 함수 존재 여부 확인
console.log(document.appendChild);

// Document() 생성자가 추가한 함수 존재 여부 확인
console.log(document.createElement);

자바스크립트에 들어 있는 함수나 변수가 언제 추가되었는지
객체는 그 객체를 초기화시킨 생성자가 있다
자바스크립트에서 생성자는 상위 생성자가 있다
제일 꼭대기는 무조건 Object() 생성자

new Document()

제일 먼저 ① Object()가 초기화시키고, 그 다음 ② EventTarget()이 초기화시키고,
그 다음 ③ Node()가 초기화시키고, ④ Document()가 초기화시킴

초기화 : 준비시키는 것. 변수나 함수를 추가하는 것.

문서

API 문서 : DOM API, AJAX API, jQuery API

언어 문서: JavaScript

생성자의 상속 관계에 대한 이해가 있어야 상위 생성자까지 문서를 찾아볼 수 있다.

0개의 댓글