JUST WRITE

BOM Browser Object Model Browser를 제어하기 위한 Interface이다. Browser를 객체화해서 JavaScript 같은 Script언어로 제어가 가능하다. Browser 객체들을 대해서 살펴보려 한다. window Browser 창 자체를 의미한다.가장 최상위 객체로 다른 객체를 포함한다.JavaScript에서 window는 노출된 전역 변수로 현재 Browser 창을 의미한다. // window 실습 window.open('https://google.com') // 새로운 구글 Browser 창 생성 window.alert('test') // alert 창 생성 // window 생략 가능 open('https://google.com') // 새로운 구글 Browser 창..

DOM Document Object Model HTML 문서에 접근하기 위한 Interface입니다. Browser마다 요청받은 내용을 화면을 보여주는 Rendering Engine이 존재한다. Browser Rendering Engine IE Trident Edge EdgeHTML, Blink Chrome Webkit, Blink(Version 28 later) Safari Webkit FireFox Gecko Rendering Engine 요청받은 HTML 문서를 한줄 한 줄 해석한다. 해석이 끝나면 문서를 객체화하며, 이 객체를 DOM(Document Object Model)이라고 한다. Script 언어로 HTML 요소를 제어하기 위해 DOM을 이용한다. Tree 구조 제목 안녕하세요 a b c ..

이 글은 Youtube 드림코딩 by 엘리의 '자바스크립트3. 데이터 타입'편을 정리하여 작성한 글입니다. 변수 선언에 사용되는 let과 const는 ES6에 추가되었다. ES6 이전에는 var 키워드를 사용하였다. 이 글에서 var부터 let과 const까지 살펴보려 한다. var var는 Global Scope와 Function/locally Scope를 가진다. Function 밖에서 선언하면 Global Scope를 가진다. Function 안에서 선언하면 Function/locally Scope를 가진다. var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello ..

Web Browser는 HTML를 Rendering할때, CSS, JavaScript를 만날 시 동기적으로 처리한다. 이 부분은 Rendering 속도에 영향을 주게 된다.(사용자 경험 측면, SEO에 영향) HTML Parsing을 멈추고 Script를 가져오고 실행까지 한다. 그 다음 남은 HTML Parsing을 진행한다. async async 속성을 true로 설정하면 CSS, JavaScript 비동기적으로 처리한다. HTML Parsing을 멈추지 않고 Script를 가져오고 실행까지 한다. // async default : true Warning!! async 속성을 설정하고 Script가 DOM에 접근해야될 경우에는 주의! 아직 HTML Parsing이 되지 않은 DOM에 접근하려고 할 수..