2021-12-23(목) 7주차 4일

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

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

맨 앞에 누가 초기화시켰는지 나옴

console.log(Object.prototype);
console.log(f1.prototype);
console.log(f2.prototype);
console.log(f3.prototype);

Object.prototype.test0= function() {
  console.log("test0()...");
}

11-8 복사해서 11-9 만들기

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

console.log("-------------------------------------")
console.log("Object() 생성자:")
var obj0 = new Object();
console.log(obj0);
console.log(obj0.constructor);
console.log(Object.prototype);
obj0.test0();

prototype 안에 constructor 정보가 들어 있다.

객체에는 key와 value가 있다.

Object()의 상위 생성자의 prototype은 null

현재 객체에 함수라든지 변수가 없으면 그 생성자의 prototype에서 찾아 본다.

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

console.log("-------------------------------------")
console.log("f1() 생성자:")
var obj1 = new f1();
console.log(obj1);
console.log(obj1.constructor);
console.log(f1.prototype);
obj0.test1();

현재 생성된 객체에 name 이라는 변수에 "홍길동"을 집어 넣는다.

객체에 없으면 생성자에 있는 prototype에서 찾는다.

상위 생성자의 prototype과 연결되어 있다.

객체 --> 생성자 prototype --> 상위 생성자 prototype

객체에도 없으면 생성자 prototype에서 찾는다. 거기에도 없으면 상위 생성자의 prototype에서 찾는다.

obj1.test1(); // obj1 --> f1.prototype
obj1.test0(); // obj1 --> f1.prototype --> Object.prototype
obj1.testx(); // obj1 --> f1.prototype --> Object.prototype --> null

에러가 발생하면 script 태그 나가버림

f2.prototype = Object.create(f1.prototype);
→ f1의 prototype을 기반으로 만든다.
상속 받을 때는 이렇게 만들어야 됨
이렇게 안 하면 f2의 생성자는 Object()임

f1이 추가한 name과 f2가 추가한 email

초기화 시킨 생성자의 prototype에서 찾는다.

객체 안에는 모든 값들이 key와 value 형태로

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

var obj3 = new f3();
console.log(obj3);
console.log(obj3.constructor);
console.log(f3.prototype);
obj3.test3(); // obj3 --> f3.prototype
obj3.test2(); // obj3 --> f3.prototype --> f2.prototype
obj3.test1(); // obj3 --> f3.prototype --> f2.prototype --> f1.prototype
obj3.test0(); // obj3 --> f3.prototype --> f2.prototype --> f1.prototype --> Object.prototype
obj3.testx(); // obj2 --> f2.prototype --> f1.prototype --> Object.prototype --> null

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

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

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

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

f2.prototype = Object.create(f1.prototype);
prototype을 덮어쓴다.
f1 prototype과 연결된 prototype을 만든다

object instanceof constructor
document는 객체

값을 리턴하는 문장 ← expression

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

console.log(document);

console.log(document);

// Document()의 함수 존재 여부 확인
console.log(document.createElement); // document --> Document.prototype

// Node()의 함수 존재 여부 확인
console.log(document.appendChild); // document --> Document.prototype --> Node.prototype

// EventTarget()의 함수 존재 여부 확인
console.log(document.addEventListener); // document --> Document.prototype --> Node.prototype --> EventTarget.prototype

// Object()의 함수 존재여부 확인
console.log(document.toString); // document --> Document.prototype --> Node.prototype --> EventTarget.prototype --> Object.prototype

DOM API - id 값으로 태그 찾기
http://localhost:8080/javascript/ex05/exam01-1.html

javascript dom api 검색

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

DOM interfaces

HTML document

prototype에 들어 있는 메소드나 변수를 사용할 때는 함수를 통해서 초기화된 객체를 통해서 호출해야 한다.

console.log(document); // #document

document 객체 안에는 html이 들어 있다.

console.log(Document.prototype);

getElementById()는 Document.prototype에 들어 있음

Document.prototype.getElementById()

Document.querySelector()
Document prototype에 들어 있다는 거

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

초기화된 객체를 통해서 호출해야 됨

prototype에 들어있는 거는 객체를 만들어서 호출

함수 소속 프로퍼티와 객체 소속 프로퍼티

프로퍼티 : 변수나 함수

• 함수 소속 프로퍼티

함수명.프로퍼티명
함수 소속 프로퍼티는 특정 객체와 상관없이 사용하는 함수와 변수

JSON.parse()
JSON.stringify()

JSON.parse()

• 객체 소속 프로퍼티

객체.프로퍼티명
객체 소속 프로퍼티는 특정 객체를 다루는 함수와 변수

Array.prototype.push()
Array.prototype.indexOf()

var arr = new Array();
arr.push("aaa");

함수 소속
객체 소속

용도?
함수 소속 프로퍼티는 특정 객체와 상관없이 사용하는 함수와 변수
객체 소속 프로퍼티는 특정 객체를 다루는 함수와 변수

객체 - 프로퍼티의 소속과 사용법
http://localhost:8080/javascript/ex04/exam14-1.html

객체 - 프로퍼티의 소속과 사용법
http://localhost:8080/javascript/ex04/exam14-2.html

객체 - 프로퍼티의 소속과 사용법
http://localhost:8080/javascript/ex04/exam14-3.html

함수 소속 프로퍼티는
그 함수가 초기화시킨 객체를 통해 사용할 수 없다.
즉 객체를 다루는 용도가 아닌 경우에 함수 소속 프로퍼티로 만든다.

객체 - 프로퍼티의 소속과 사용법
http://localhost:8080/javascript/ex04/exam14-4.html

score1.sum()
이 객체에 대해서 합계를 구한 거

Score.count
특정 객체와 관련된 게 아님
Score 전체에 대해서 사용하는 거

prototype에 들어 있는 건 특정 객체로 사용

함수에 들어 있는 건 함수를 통해서 사용

특정 지점에 대해서 일을 시키는 거 / 본사에 일을 시키는 거

JSON

Document.getElementById()
Document.prototype.getElementById()
↑ 함수에 소속된 게 아니라 prototype에 들어 있는 함수임
prototype에 들어 있다는 건 그 객체에 대해서 사용할 수 있다는 거

문서 볼 때 조심하기!
문서에는 착각하게 나와 있는데 다 prototype에 소속된 함수
근데 어떤 메소드는 진짜 그 함수에 소속인 경우도 있긴 함
어떤 경우는 그 함수를 통해서 초기화된 객체에 대해서 사용하는 즉 prototype에 소속된 함수일 수도 있다.

문서의 문맥을 읽어 보고 또는 예제를 보고 파악하기

문서 볼 때 상위 생성자로 가서 보기

DOM API - id 값으로 태그 찾기
http://localhost:8080/javascript/ex05/exam01-1.html

Document.prototype.getElementById("태그아이디")
Document.getElementById("태그아이디")

prototype에 있는 메소드니까 객체를 통해서 호출해야 됨
document.

var e1 = document.getElementById("header4"); // HTMLHeadingElement

⇒ 리턴 값: HTMLElement 하위 생성자에 의해 초기화된 객체를 리턴

생성자 상속 관계
HTMLHeadingElement() ---> HTMLElement() ---> Element() ---> Node() ---> EventTarget() ---> Object()

제일 먼저 Object()가 초기화시키고, 그다음 EventTarget()이 초기화시키고, 그다음 Node()가 초기화시키고...

문서 찾아볼 때 HTMLHeadingElement만 보지 말고 상위 생성자로 가서 메소드 찾아 보기
계속 상위 생성자로 올라가면서 찾아 보기

getElementById는 태그 정보를 담은 객체를 리턴한다.
해당 아이디의 태그를 찾아서 그 태그 정보를 담은 객체를 리턴한다.
그 객체는 HTML 관련 생성자에 의해서 초기화된 객체들이다.

HTML의 모든 태그는 HTMLElement() --> Element() --> Node() --> EventTarget()에 있는 메소드는 다 사용할 수 있다.

DOM API - 태그이름으로 태그 찾기
http://localhost:8080/javascript/ex05/exam01-2.html

Document.prototype.getElementsByTagName("태그이름")
⇒ HTMLCollection 객체 리턴
⇒ HTMLCollection은 배열이 아니다!
반복문은 돌릴 수 있어도 for...in 안 됨
for...of는 가능

var el = document.getElementsByTagName("h2");

console.log(el.constructor.name); // HTMLCollection

HTMLCollection은 iterable 규칙을 구현하였기 때문에 for...of 반복문을 사용할 수 있다.
for (var 변수 of 배열 또는 iterable 구현체) {...}

for (var e of el) {
    console.log(e.innerHTML);
}

e ← element

for...in 에서는 배열이 아니고 일반 객체인 경우 프로퍼티 개수 만큼 반복한다.

getElementsByTagName 리턴값은 HTMLCollection 객체다
= HTMLCollection 생성자가 초기화시킨 객체다
= HTMLCollection interface 객체다
= HTMLCollection 규칙에 따라서 만든 객체다
= HTMLCollection 객체다
= HTMLCollection 타입의 객체다

태그를 못 찾아도 length가 0인 HTMLCollection 리턴
HTMLCollection []

조건에 해당하는 태그를 찾지 못했다면?
⇒ 리턴 값은 null이다.

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

querySelectorAll("CSS selector 문법")
=> NodeList 객체 리턴

for in 쓰지 말기

조건에 해당하는 태그를 찾을 수 없다면?
=> 빈 NodeList 객체이다.

element = 시작태그 + 콘텐트 + 끝태그

innerHTML ← HTML 태그를 그대로 리턴

textContent ← 태그의 콘텐트에서 HTML 코드를 제거한 후 텍스트만 리턴한다.

article:first-child > p
부모로부터 첫번째 자식 article의 직계 자식 중에서 p 태그

Element.innerHTML : DOMString
=> Element() 생성자가 추가한 프로퍼티이다.
=> HTML 코드로 태그의 콘텐트를 설정할 수 있다.
=> HTML 태그가 그대로 렌더링 된다.

Node.textContent
=> Node() 생성자가 추가한 프로퍼티이다.
=> 텍스트를 설정할 때 사용한다. 텍스트 안에 HTML 코드는 그냥 일반 텍스트로 취급한다.
텍스트 안에 있는 HTML 코드는 웹브라우저가 인식하지 않는다.

https://helloworldjavascript.net/pages/260-iteration.html

bitcamp-study\web\app\src\main\resources\static\javascript\ex02\exam19-4.html

http://localhost:8080/javascript/ex02/exam19-6.html

이터레이터는 next

while (true) {
  var {value, done} = obj2.next();
  if (done) {
    break;
  }
  var v = value;
  console.log(v);
}

값을 꺼냈으면 false
값을 꺼낼 게 없으면 true

for (var v of obj) {
  console.log(v);
}

while (true) {
  var item = obj2.next();  // yield 명령을 통해 리턴된 값을 담고 있는 객체 리턴
  if (item.done) {  // 더 이상 꺼낸 값이 없다면, item.done == true
    break;
  }
  var v = item.value;
  console.log(v);
}

동일한 방법으로 값을 꺼낸다

http://localhost:8080/javascript/ex02/exam19-7.html

console.log(contactMap);

console.log(contactMap[Symbol.iterator]());

var propName = "name";
score.name
score["name"]
score['name']

Symbol ← 상징

console.log(typeof Symbol.iterator);

// 1) Map 객체에서 iterator 객체를 꺼낸다.
console.log(typeof Symbol.iterator);
var iterator = contactMap[Symbol.iterator]();
while (true) {
  var entry = iterator.next(); // 보통 key/value 한 쌍으로 되어 있는 값을 가리킬 때 entry라 한다.
  if (entry.done) {
    break;
  }
  var v = entry.value;
  console.log(v);
}

for...of 라는 문법을 만듦

이 객체에 Symbol.iterator 이름으로 등록된 함수가 있을 경우 이 자리에 둘 수 있다 ↓

for (var v of contactMap) {
  console.log(v);
}

http://localhost:8080/javascript/ex05/exam03-1.html

document.querySelector("article:nth-child(2) a")
article 중에서 두 번째가 아니라 모든 자식 중에서 두 번째

링크 바뀜

http://localhost:8080/javascript/ex05/exam03-2.html

DOM API - 태그에 속성(attribute)을 추가하기

웹브라우저의 개발 도구에서 디버깅할 때 추가된 속성을 볼 수 없다.

h1.innerHTML = "제목입니다."; // innerHTML에 직접 값을 넣을 수 도 있다.

http://localhost:8080/javascript/ex05/exam04-1.html

자식 태그 추가

부모 태그를 알아낸다.
=> Node.parentElement 또는 Node.parentNode를 사용한다.

setInterval
지금 호출하라는 게 아니라 등록한다는 거

첫 번째 이미지를 찾는다.
var img = document.querySelector("section > img:first-child");
첫 번째 이미지가 맨 뒤로 붙는다.

내일은 EventListener

operator

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