학습목표

• JavaScript 언어에 대해 배운다
• JS DOM에 대한 이해도를 높인다
• ES6 문법에 친숙해진다

JavaScript 언어란 무엇일까?

• HTML이나 CSS만으로는 부족한 기능을 보충하기 위해 사용

  • 브라우저에 표시된 HTML이나 CSS 변경 / 정보 읽기

    const toDoList = document.getElementById("todo-list");
    

• 브라우저를 조작하기 위해 사용

  • 크롬, 파이어폭스 등에서 실행할 수 있음

• 웹페이지에 생동감을 불어넣기 위해 만들어짐

  • HTML: 웹 페이지의 콘텐츠 정의
  • CSS: 웹 페이지의 스타일 및 레이아웃 정의
  • JS : 웹 페이지의 동작 정의

비동기 작업에 대한 이해

호이스팅

자료형 정리

DOM에 대한 이해

• DOM (Document Object Model)

  : 문서 객체 모델

  • JS와 같은 프로그래밍 언어들이 마크업 언어(XML, HTML 문서)에 접근하기 위한 인터페이스를 제공하기 위해 객체로 만들어짐

  • 각각의 요소에 접근하여 텍스트, 스타일, 속성 등을 조작할 수 있게 도와줌

    	const button = document.createElement("button");//DOM요소에 접근
      button.innerText = "❌";
      button.addEventListener("click", deleteToDo);//DOM요소에 이벤트 할당
    

  • DOM으로 렌더링된 HTML의 요소들은 JS 등에 의해 동적으로 변경 가능, 변경된 값들은 그대로 HTML에 반영

  • HTML을 파싱하여 모든 요소와 텍스트, 태그들을 **트리 구조(Layer Trees)**로 만듦

    

    출처: https://velog.io/@404/자바스크립트-핵심컨샙33-11.-DOM-and-Layout-Trees

    → DOM tree라고도 불림

• DOM의 특별한 특징들

  • 새 줄과 공백은 노드로 인식됨
  • 태그 이전에 노드를 생성하면 무시됨
  • 뒤에 무언가를 넣어도 자동으로 콘텐츠가 body 안쪽으로 옮겨짐
  • 태그가 없으면 문서 최상위에 태그 자동으로 넣어줌
  • DOM 생성과정에서 브라우저가 문서 에러, 닫는 태그가 없는 에러 등을 자동으로 처리함
  • 주석을 모두 노드로 읽음 (html 안의 모든 내용을 다 다룰 수 있음)