[Front-end🦁] #26 JavaScript DOM

1. 멋사 수업

배운 내용들을 되짚고, 앞으로 배울 내용들을 백신 맞듯이 가볍게 살펴보았다.

객체

• 객체는 반복이 안되기 때문에 (iterable이 아님), iterable로 만들고 싶으면 Symbol.iterator를 사용한다.
• 객체는 클래스의 인스턴스. property와 method를 가진다.
• 변수 선언할 때 파이썬처럼 a=1 하면 var를 암묵적으로 붙여준다.
• String, Number type의 인스턴스도 결국 prototype 객체이기 때문에 값이나 bulit-in method를 활용할 수 있는 것이다.

this

• this는 this가 들어있는 함수를 호출한 객체
• 전역 함수에서 this를 사용하면 this는 전역 객체 window window.전역함수() 이렇게 호출할 수 있다.
• object의 method에서 this는 해당 객체 자체.
• new 생성자함수() 의 생성자함수에서 객체는 생성될 인스턴스.

closure(폐쇄)

• scope와 함께 이해하면 어렵지 않다. (전역, 블록스코프, 함수 스코프가 존재한다)
• 함수 안의 공간처럼 외부에서 접근할 수 없는 공간.

function myFunction() {
    var val1 = "hello"; // 외부에서 접근 불가능함.
    return { getVal1 : function(){return val1} } // closure 는 폐쇄된 공간의 데이터에 접근하기 위한 테크닉. 애초에 그렇게 접근을 한다는건 폐쇄적인 공간을 만들기 위해서 하는 거다. 왜? 변수가 섞이는 것을 막기 위해서.
}
myFunction().getVal1() // val1 값을 가져올 수 있다.

1시~3시 세션 불참

DOM
Document Object Model

• HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할
• 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'
• document 객체를 통해서 HTML 문서에 접근이 가능하다.

js challenge 에서 배운 querySelector, toggle 등에 대한 내용을 배웠다.

classList 를 이용한 DOM control

classList 를 이용해서 색이 바뀌는 것을 구현해 보았다.

const colors = ['mint', 'cornflowerblue', 'gold'];
const box = document.querySelector(".box");
const buttons = document.querySelectorAll('.buttons button');
//
function changeColor(index) {
  //원래는 for... of 문으로 하나씩 삭제했는데 이게 훨씬 깔끔하다.
    box.classList = "box";
    box.classList.add(colors[index]);
}
// HTML element 를 배열로 가져와서 event listener를 붙이려면 마지막 인자로 false를 줘야한다.
// for ... in -> forEach로 바꾸어서 더 간결하게 만들었다.
// event listener의 인자인 함수에 다시 인자를 주는법을 전에는 그냥 가져다 썼었는데, 이제는 이해가 된다!!!
buttons.forEach((x, i) => x.addEventListener("click", (function(index) {
    return function() {
        changeColor(index);
    }
})(i), false));