[100DaysOfCode] 33강

 

length property

let userName = "yeonsu";
let hobbies = ["Sports", "Cooking", "Reading"];

 

문자열의 길이	userName.length
배열 요소의 개수	hobbies.length

 

💡 배열과 문자열은 비슷하다!
     문자열: 문자의 모음
     배열: 종류의 제한이 없는 값의 모음

 

---

Window 객체와 Document 객체 비교

Built - in Variables & Functions
Global "window" Object	The "document" Object
Holds information and functionality related to the active browser window / tab	Holds information and functionality to the loaded website content
e.g. current location, utility functions like alert()	utility functions to access HTML elements

 

1️⃣ Window 객체

정의

1. 브라우저 안의 모든 요소(변수, 함수, ...)들이 소속된 객체(최상위에 존재하기 때문에 '전역 객체'라고도 한다)
2. 일반적으로는 우리가 열고있는 브라우저 창과 탭을 의미하며, 관련된 정보와 기능을 가지고 있다 (ex. 현재 위치, 유틸리티 기능 alert() 등등)

 

console.log(window);

 

 

개발자 도구에서 console 탭을 보면 window 객체에 많은 기능이 있는 것을 알 수 있다!

 

alert(); 유틸리티 같은 경우 window.alert();지만 window는 전역 객체이기 때문에 일반적으로 생략할 수 있다

 

 

2️⃣ Document 객체

웹사이트의 콘텐츠와 관련된 정보와 기능을 포함하고 있다, 화면에 출력

ex) 사용자의 클릭 동작에 반응하기 위해 이벤트 수신자를 특정 요소에 추가

 

Window 객체	document 객체
브라우저 창 대변	브라우저 내에서 컨텐츠를 보여주는 웹 페이지 자체를 대변
웹페이지	웹페이지를 객체화한 것

 

 

3️⃣ DOM (Document Object Model)

웹 개발 개념

작성된 html 코드를 분석해서 데이터와 브라우저의 내부를 표현한다

 

브라우저는 html 코드를 js 코드 묶음으로 해석해준다

HTML 구조를 대변하기 위해 서로 중첩된다

 

Document 객체를 통해 DOM에 접근할 수 있다

 

브라우저는 HTML 코드를 분석하고 자바스크립트 객체와 같은 모든 요소들을 저장한다
자바스크립트 코드는 DOM과 상호작용 할 수 있고, DOM으로부터 데이터를 추출하거나 조작할 수 있다

 

 

예시)

input field 요소

특정 이벤트를 수신하고, 현재 입력된 문자수를 세서 스타일을 변경하는 기능 등을 한다

브라우저에서 HTML 코드를 바꾸거나 값을 추출하기 위해서 분석된 HTML 코드에 접속할 방법이 필요하다(DOM이 중요한 이유)