자바스크립트 + DOM(Document Object Model) 정리

 

ES5 와 ES6의 변화

 

템플릿 리터럴: console.log( ` 이름은 ${name} 나이는 ${age} `);   # 백틱

익명 함수 표현식 변경:  (a, b) => { console.log( a+b ); };   // 자바 람다식과 비슷

this: ES5에서는 window 객체를 말함, ES6에서는 자신을 둘러싸는 this를 말함

변수: let, const 추가

클래스: 클래스 키워드 추가, 생성자, 메서드, 상속, instanceof

 

 

---

 

 

 

https://github.com/newlecture/javascript-dom-programming-example

GitHub - newlecture/javascript-dom-programming-example

 

 

 

---

자바스크립트

 

✔ 데이터 타입

var과 let의 차이

var는 블록 스코프가 없다.   let은 있다.

var는 중복 변수 사용이 허용된다.(첫번째것 사용)    let은 허용되지 않는다.

var 사용은 자제

 

원시형 타입이 메서드를 사용할 때 순간적으로 Wrapper type이 되었다가

다시 원시형 타입으로 돌아온다.

 

Wrapper type: Boolean, Number(정수, 실수), String(문자, 문자열)

 

 

 

undefined & null

undefined: 선언만 하고 값이 할당되지 않은 상태

null: 빈 값이라고 명시

 

 

 

✔ 연산자

==  값의 비교  (타입 변경해서 비교)

===  값 & 타입의 비교

 

 

 

✔ 함수

자바스크립트에서는 함수도 객체의 일종

하나의 값으로 취급을 한다. 

함수가 다른 함수의 인수로도 넣어지고, 

함수를 리턴할 수도 있다.

 

(1) let f = new Function("매개 인자", "실행문;")

(2) let f = function (x, y) {  }      # 호이스팅 된다.

(3) function f(x, y){  }

(4) let f = (x, y) => {  }

 

함수의 매개 인자는 사실 큰 의미가없다. 전달 받아진 값은 전부 저장한다.

전달된 가변인자는 arguments[index]로 사용가능

 

특이한점

자바와는 다르게 변수를 전역으로 선언하고

함수 내부에서 매개변수로 넘겨주지 않아도, 해당 변수를 사용할 수 있다. (마치 Object처럼) 

변수를 전역으로 선언하면 어디서나 접근 가능 (while, if, else 뿐만 아니라 function에서도)

 

 

함수 즉시 실행 IIEF

(function( ){

})()

 

 

 

✔메서드

객체에 포함되어 있는 함수는 메서드라고 한다.

Math.floor()

 

 

 

✔ 배열

let arr = new Array()

let arr = []

한 배열에 여러 타입을 담을 수 있다.

 

메서드

length()

pop(), push(), shift(), unshift()

slice(start, end)

concat()

indexOf(), lastIndexOf(), includes()

 

for in 은 모든 프로퍼티를 순회하므로 성능 저하. 배열에서는 for of 사용 권장

 

 

 

✔ Object (Map 형태)

let obj = new Object()

let obj = {}

객체는 key : value 프로퍼티를 저장한다.

 

let obj = {name: 'name'}

key: value  # 내부에서는 = 을 사용하지 않고 : 사용

 

다른 언어와 다르게 먼저 정의를 하지 않고 객체를 만든 이후 정의할 수 있다.

(1)   obj.math = 50; 

(2)   obj['math'] = 50 

 

Object의 프로퍼티 키는 항상 문자열이거나, 심볼형이어야 한다.

심볼은 유일성이 보장되는 자료형, 식별자로 사용된다.

함수도 프로퍼티로 저장할 수 있다.

 

this

자바스크립트 this는 런타임때 결정된다.

this가 있는 메서드를 사용하는 객체의 것을 사용한다.

** this 가 화살표 함수 안에서 사용되면 화살표 함수를 감싸는 함수의 this를 사용한다.

 

생성자 함수 

객체의 생성을 해주는 함수다.

규칙: 대문자로 시작, 생성할 땐 new Person()

 

 

 

✔ Class

사용 방법은 자바와 굉장히 유사

 

캡슐화

getter & setter로 접근한다.

   get ---> instanceName.value1   set ---> instanceName.value1= 'value'

프로퍼티를 부르거나, 값을 할당할 때 get, set이 호출되어 사용하므로 캡슐화가 가능하다.

 

class test{
  constructor(value1) {
    this.value1 = value1;
  }

  get value1(){
    return this._value1;
  }

  set value1(value1){
    this._value1 = value1;
  }
}

주의점: get, set 함수 내부에서 this.value1를 사용하면 다시 get이 호출되고, 순환 참조가 발생하므로 this._value1를 사용

** 함수명은 필드 접근 방법이고, 내부적으로는 _value에 값을 저장

 

static

static 필드와 static 메서드가 있다.

 

상속

extends 키워드로 상속한다.

메서드 오버라이딩이 된다.  super() 키워드도 사용 가능

instanceof로 인스턴스 타입 검사도 가능

 

 

 

✔ JSON(javascript object notation)

자바스크립트 오브젝트를 String으로 표현한 방식

표현식을 간단하게 할 수 있다. 사용 방법이 간단하여 다목적으로 사용됨.

 

문자열, 문자는 전부 ' ' 로 표기하는 것이 html " " 과의 충돌 방지가 된다.

 

object내부의 메서드, 심볼, undefined는 무시된다.

 

 

 

✔ JSON 파서

JSON 데이터가 문자열로 왔을 때 사용한다.

 

eval()

eval("var aa = 50;")

eval("var bb =" + data + ";")

 

parse() 

json -> object

 

stringify()

JSON.stringify("{id : 50 , name = "cha" }") ==> {"id":50, "name" = "cha"}

object -> json

 

 

 

 

---

 

 

✔ 제어문

다른 언어와 제어문은 동일하다.

 

for Key in Object

[배열일 경우 index], [object일 경우 key]

 

for Element of Array

배열일 경우 사용 권장

 

 

 

 

✔ 호이스팅

<script> 지역내 모든 선언된 function은 상단에서 먼저 선언 된다. 

 

함수 표현식 - 값처럼 선언을 하면 먼저 선언되지 않고 실행 흐름에 맞게 선언된다.

블록 스코프 안에서 선언된 경우이다.

 

 

 

✔프로토타입

일종의 템플릿 객체

종류별로 해당되는 종류가 같이 공유하는 객체이다. 

따로 생성하지 않고, 하나의 프로토타입 메서드를 거치면 이용하면 효율적이기 때문이다.

Array.prototype.adddddd = () => "추가"

 

 

 

---

DOM을 다루기 전 준비

 

브라우저 객체(BOM)

window

window.history

window.location

window.document

 

DOM(Document Object Model)

BOM(Browser Object Model)의 하위

html 요소들을 객체화(js object)하여 js가 조작할 수 있게 함

 

요소 객체 정보 보기

console.dir(요소)

 

---

 

 

이벤트 조작

(1) html 속성에 이벤트 동작

html 태그에 속성 onclick = 함수() 

html에 스크립트 코드를 적어 사용하게 할 수 있다.

js 와 html 이 결합되어 좋은 방식은 아니다.

 

(2) id, class, name으로 접근하여 이벤트 동작

html과 js가 분리

 

 

 

JS 코드 초기화

(defer src 사용하면 쓰지않아도 된다.)

윈도우가 로드가 완료되었을 때 js를 로드 시킨다.

window.onload는 덮어씌우기 때문에 이전 js 파일을 동작시키지 않는다.

addEventListener는 중복으로 정의해도 누적되어 정상동작한다.

window.addEventListener("load", function(){ // load 이후 동작, 여러 load를 누적시킨다.

         

            };

});

 

 

JS 코드 분리

<script defer src =" js파일 경로 "  ></script>

 

---

노드

 

노드의 Type

document(노드의 최상위)

document type - 옛날에는 DOM type이 여러개였다.

element(태그) - attr(태그안 속성), entity(예약어 - lt, gt < >), entityReference(예약어 사용 보조 & ;), text

comment - 주석

cdata section(예약어를 많이 사용할 때 감싸서 편하게 사용)

notation(속성의 값 - #ffff,px)

 

 

 

✔ 노드 선택

querySelector()   첫번째 하나만 가져옴

querySelectorAll()   배열로 전부 가져옴

 

클래스 선택: document.querySelector(".class")

id 선택: document.querySelector("#id")

태그 선택: div1.querySelector("태그") 

태그 속성 선택: document.querySelector("input[name='x']") 

 - css 셀렉터 방식이 된다.

 

 

지역화 노드 선택

let qs = querySelector() 를 통해 (지역화를 시키고)

qs.querySelector()를 통해 자식 노드를 가져올 수 있다. (지역화 내에서 가져오기)

 

id - 유일

("#id")

class - 여러개 지정 가능

(".class")

name - 여러개 지정 가능

(input[name="name"]) 

 - id로 지역화 시키고, class, 태그를 사용하는 방식

 

 

 

✔ 노드의 부모, 자식

parentElement: 부모 노드로 이동할 수 있다. 자식 노드 전부 포함

childNode: Element, 공백, 주석, 텍스트도 모든 Node로 포함

children: Element만 자식으로 포함

배열로 사용된다.

 

 

 

 

✔ 노드 추가

노드 생성 기능은 document 객체가 갖고 있다.

태그, 텍스트를 주로 생성한다.

 

 

append(텍스트 or 노드 ...)

appendChild는 인자로 노드만 받는다.

 - 배열을 추가해도 자식 노드의 가장 아래에 붙기 때문에 array 순서가 맞는다.

 

 

 

innerHTML 이용 (사용 권장 x)

innerHTML += 은 가져온 후 수정한 후 돌려준다.  이 방식은 성능 이슈를 일으킨다.

 

매번 노드를 create하는 방식 보다 innerHTML을 이용해서 생성

let new1 =  '<a href="">' + data + '</a>';

var li2 = document.createElement("li");

li2.innerHTML = new1;

div.append(li2);

 - 가장 밖 태그를 document.create로 만든 후 innerHTML로 붙여주는 방식

 

 

 

insertAdjacentHMTL

append()와 같이 문자열을 html로 만들어 준다.

let str = '<li><p>text</p></li>';

ul1.insertAdjacentHTML("afterbegin", str);

 - append(), insertAdjacentHMTL()가 유용

 

 

 

✔ 노드 삭제

노드.remove()

부모를 통해 접근하지 않고 바로 지울 수 있다. 

하위 노드들도 모두 삭제

 

 

 

✔ 노드 복제

cloneNode(true) - 내부 태그까지 전부 복사한다.

cloneNode(false) - 껍데기만 복사한다.

 

template

복사할 태그가 없을 수도 있으므로 html <template></template> 태그를 이용해줄 수 있다.

template 태그는 화면에 보이지 않고, 복제를 위해 이용된다.

template 태그 하위를 querySelector를 쓰려면 .content를 사용해야 한다. 또는 importNode

 

 

 

✔ 노드 삽입 및 대체

모든 노드 선택              태그 노드만 선택

parentNode               parentElementNode

firstChild                     firstElementChild

lastChild                      lastElementChild

previousSibling        previousElementSibling

nextSibling                 nextElementSibling

 

부모노드.insertBefore(삽입 노드, 기준 노드) // 기준 노드 앞에 insert

 

 

기준노드.insertAdjacentElement(position, node)

position - beforbegin, <target> afterbegin, beforeend, </target> afterend

 

 

insertAdjacentElement, insertAdjacentHMTL

자주 사용되고 편하다.

 

 

 

✔ HTML 태그 이용 & CSS스타일 변경

node.src = 경로

일반적으로 HTML의 속성과 노드 속성의 이름이 일치한다.

 

node.style.border = "100px"

css는 style을 명시해줘야함

 

카멜 케이스로 css style 변경 가능 (수치 단위도 같이 넣어줘야한다.)

img.style.borderColor = "#ffffff"

---

이벤트 객체

 

✔ 이벤트 객체에 따라서 갖고 있는 기능이 다르다.

keyboardEvent, inputEvent, mouseEvent, focusEvent, compositionEvent

상위 인터페이스인 Event를 전부 상속 받았다.

 

 

target (이벤트 발생 정보)

클릭이 발생하면 event 객체가 전달된다. 이벤트 객체에는 이벤트의 정보가 있다.

function(event){

    event.target.태그

}

 

 

✔ 이벤트 버블링

하위 태그를 클릭하면 상위 태그들에게도 이벤트가 전파된다.

상위 태그로 전파되므로 상위 태그에서 이벤트를 잡아서 처리하면 여러 하위 태그의 이벤트를 한번에 처리해줄 수 있다.

event 객체가 클릭된 하위 태그 정보를 갖고 있다.

 

 

e.target.classList.contains("사용할 class")

bookBinding.addEventListener("click", (event) => {
  if(!event.target.classList.contains("loanBtn"))
    return;

특히, 동적으로 생성된 HTML에 addEventListner는 동작하지 않는다.

이벤트 버블링으로 동적 생성 되지않은 태그에서 이벤트를 처리해주어야 한다.

 

 

버블링 멈추기 & 태그 기본행위 막기

event.stopPropagation() 

상위태그로의 전파를 차단한다.

 

event.preventDefault()

a태그는 page load가 기본 행위, 이를 막아줄 수 있다.

 

 

 

✔ 이벤트 트리거

<input type="file"> 인 경우 브라우저에 따라 모양이 다르게 나온다.

일관되게 보이도록 다른 UI버튼을 만들어 <input type="file"> 이 동작하게 만든다.

 

트리거버튼.onclick = function(){

    var event = new MouseEvent("click", {

        'view' : window,

        'bubbles' : true,

        'cancelable' : true

    });

    트리거대상.dispatcherEvent(event);

};