Javascript - DOM, BOM/ prototype(프로토타입)

---

목차

1. DOM, BOM

2. prototype

3. js runtime

---

 

1. DOM, BOM

• DOM (Document Object Model)

console.log(document);
console.dir(document.head);
console.dir(document.body);

console.log(document.body.innerHTML);
// html의 내용, 엘리먼트까지 다 나온다
console.log(document.body.innerText);
// body에 적힌 내용, 엘리먼트없이 나온다

document.body.innerHTML += "<div>추가중</div>";
document.body.innerHTML = "<div>위에 추가</div>" + document.body.innerHTML;

document.getElementById("root").innerHTML += "<div>추가중</div>";

document.getElementById("root").style.border = "1px solid black";

 

 

• BOM (Brower Object Model)

console.log(window);
// window 객체
console.log(window.location);
console.log(window.navigator);
console.log(window.document);

console.log(location);
//위치, 현재 웹페이지(문서)의 위치 , 주소, 라우터 등등으로 얘기하는 모든것
// 페이지이동 a태그로도 할수있지만 javascript내에서 location로 가능하다.

console.log(navigator);
// 어떤 환경에서 접속했는지의 대한 정보를 담고있다. (UX에 관한것)
console.log(navigator.userAgent);
console.log(document);

 

 

2. prototype (프로토타입)

- 자바스크립트는 프로토타입으로 되어있다. (기반이 되는 시스템)

- 프로토타입은 디자인패턴중의 하나이다. → 정형화된 알고리즘 (MVC)

- prototype은 원형이고, 기존의 것이 있다는 의미 (기존의 원본이 있고 그걸 가져다 사용하고 추가하는 방식)

- 도장을 만들고 그 도장을 찍는다고 생각하기!!

function Fruit() {
  this.sugar = 5;
  this.size = 10;
  this.seed = true;
  this.weight = 0;
}

const fruit = new Fruit();
console.log(fruit);

function Strawberry() {
  this.sugar = 4;
  this.size = 1;
  this.weight = 1;
}

Strawberry.prototype = fruit;
const strawberry = new Strawberry();
console.log(strawberry);
const strawberry1 = new Strawberry();
console.log(strawberry.seed);

 

function KingsBerry() {
  this.sugar = 10;
  this.size = 3;
}
KingsBerry.prototype = strawberry1;

const kingsBerry = new KingsBerry();
console.log(kingsBerry.sugar);
console.log(kingsBerry.size);
console.log(kingsBerry.weight);
console.log(kingsBerry.seed);

KingsBerry

 

 

 

3. prototype을 js runtime으로 볼때

 

function Test() {}

Test.prototype = {
  func() {
    console.log("테스트중");
  },
};
const test = new Test();
test.func();

---

 

★ 오늘의 포인트와 남겨두기 ★

 

※ console.log(document.getElementById("root").innerHTML); 

    → root의 내부를 찾음
※ console.log(document.getElementById("root").outerHTML);  

    → root의 전체(여는 태그에서 닫는 태그까지 전부), 사용X

※ MVC

※ 프로토타입안에 정보가 있어서 찾아들어가서 정보를 가져올수있다. (상속이 된다.)

※ console.dir(document.head);

 

*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!

** 목표에 대해 생각하자!!!!!

* 만들고 싶은것의 흐름을 생각해보기