오늘의 공부
오늘은 제시된 HTML 계산기 목업에 버튼별 기능을 구현했다. 자세한 코드는 강의자료이기 때문에 코드에서 배운 것들, 하면서 배운 것들을 정리하려고 한다.
DOM
- DOM은 The Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 그들이 문서 구조, 스타일 내용 등을 변경할 수 있게 한다.
- nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
- DOM은 웹 페이지의 객체 지향 표현이며, Javascript 등의 스크립팅 언어를 통해 수정할 수 있다.
document.querySelector()
- document는 최상의 node window의 객체로 DOM을 담은 브라우저로 이해했다.
ㄴ 아직 명쾌히 이해되지 않는다. 차차 더 읽어 봐야겠다.
- window 객체 안에 수많은 객체들이 담겨있다.
- document 객체 안에도 수많은 객체가 담겨있다. 이전에 배운 HTML 요소들인 head, title, link 등도 볼 수 있다. 아래로 내려보면 각종 속성들과 메소드들이 적혀있다. 불러서 사용하는 메소드들이 이런 식으로 객체에 담겨서 프로퍼티, 키로 담겨있는 것을 알게됐다.
- document.querySelector(선택자)는 선택자 또는 선택자 뭉치와 일치하는 문서내 첫 요소를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
EventTarget.addEventListener()
- 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.
- .addEventListener()의 매개변수는 (type // 이벤트유형, listener // 수신할 객체, option or useCapture) 이뤄진다.
- 함수는 미리 선언된 함수나 익명함수, 화살표 함수 등을 매개변수로 사용할 수 있다.
마무리
오늘 Javascript에 document.querySelector()를 통해 변수에 해당 클래스를 할당했다. 해당 클래스에 클릭이 됐을 때 함수를 실행시키는 .addEventListener()에서 해당 요소를 조작하기 위한 과정으로 이해했다. 오늘 .addEventListener()는 익명함수를 통해 사용했는데 listener를 따로 선언하거나, 익명함수를 사용해 동작하는 방식은 이해가 됐지만, 하지만 다른 부분은 문서를 봐도 아직 잘 이해가 되질 않는다.
익명함수의 매개변수에 event가 들어가고, event.target 속성을 통해 그 객체를 가르키는 것은 굉장히 직관적이라 이해가 쉬웠다. event.target를 변수에 할당해 그 객체 또는 요소의 클래스나 id를 받아올 수도 있고 또는 그 요소의 텍스트 정보를 받아올 수도 있었다. 매우 사용도가 높다고 생각한다.
오늘 구현해본 계산기 목업에 계산기 기능 넣기를 하면서 많은 개념을 학습했다. 완전히 이해되진 않는다. 너무 생소한 단어들이 많지만 오늘 사용한 부분에 대해선 조금 이해했다고 생각하지만,, 안다고 말할 수 없다. 앞으로 남은 unit들에서 더 배울 수 있다고 예상한다. 그렇지만 더 많이 복습 해야겠다는 생각이 든다.
