2024/06 3

[JS] DOM: Document Object Model

DOM이란?웹 페이지를 이루는 요소들을 JS가 이용할 수 있게끔, 브라우저가 트리구조로 만든 객체 모델을 의미하며메모리에 웹 페이지 문서 구조를 트리구조로 표현해서, 웹 브라우저가 HTML 페이지를 인식하게 해준다.DOM에서 제공하는 API를 통해 DOM 트리를 조작할 수 있다. * document 는 브라우저에서 제공하는 window 객체의 한 부분 (JS 자체 요소 X) 웹 페이지 빌드 과정 (CRP: Critical Rendering Path)브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있는데웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다  CSSOM이란?  CSS Object ModelJS에서 CSS를 조작할 수 있는 A..

Front-end/Vanila JS 2024.06.20

[JS] Window 객체

Window Oject- 브라우저에 의해 자동으로 생성- 웹 브라우저의 창을 나타낸다- 브라우저의 객체 (JS의 객체 X) - 브라우저의 창에 대한 정보를 알고 제어할 수 있다- var 키워드로 변수/함수를 선언하면 window 객체의 프로퍼티가 된다  let과 const는 블록 스코프이기에window 객체 내부의 블록에서 선언된 것으로 되기에전역 객체의 프로퍼티로 활용될 수 없습니다.var newProp = 'property'var newFunc = () => { return newProp}console.log(window.newProp) // propertyconsole.log(window.newFunc()) // property  // Alertalert('Hello World')// Promptc..

카테고리 없음 2024.06.20

[JS] Loops

forwhilelet i = 0do { console.log(`Number ${i}`) i++ } while (i  *continue : 현재 루프를 skip *break :  루프 자체를 stop  배열 반복// LOOP THROUGH ARRAYconst items = [1, 2, 3]// FORfor (let i = 0; i   작동 여부for forEachbreak문○Xawait○△  평균적인 속도는 for가 forEach보다 조금 더 빠르지만코드에서 중요한 건, 가독성(readability)이기 때문에 큰 차이가 아니라면목적과 가독성에 맞추어 선택하자

Front-end/Vanila JS 2024.06.20