목록WEB FRONT END/JavaScript (3)
Salangdung_i의 기록

👩💻 script 사용시 어떤 순서대로 사용자에게 페이지가 보여지게 될까? 1. script가 header에 있을 경우 브라우저가 html을 한줄씩 읽는다. script를 만나면 html 파싱을 멈추고 자바스크립트를 읽는다. [ feching.js | executing.js ] > 자바스크립트를 다 읽고나면 다시 html을 파싱한다. > 페이지는 준비 완료된다. ❗️ 단점: js파일이 크다면 사용자가 화면을 보기까지의 시간이 많이 소요된다. 2. script가 body의 끝에 있을 경우 ... 브라우저가 html을 전부 parsing한다. 이후 페이지는 준비 완료된다. 이후 script를 읽는다.[feching.js|executing.js] 페이지가 준비가 다 된 다음에 스크립트를 만나서 서버에서 받아..

자바스크립트를 공부하면서 어려웠던 개념은 클로저이다. 클로저는 스코프, 스코프 체인에 대한 지식이 있어야 이해할 수 있다. 스코프란 식별자에 대한 유효범위이다. 이렇게 말하면 어려운데 아래의 코드를 보면 outer라는 함수가 선언되어 있다. 이 outer함수가 실행되면 outer함수에 대한 스코프가 생성된다. function outer() { var a = 'A'; var b = 'B'; } 이 표는 outer 함수에 대한 스코프이다. 코드를 조금 수정해서 outer함수 안에 inner함수를 생성해보자. function outer() { var a = 'A'; var b = 'B'; function inner() { var c = 'C'; var d = 'D'; } } 이렇게 각각의 스코프가 생성된다 그..

유튜브에서 드림코딩 엘리의 강의를 보고 온라인쇼핑몰미니게임을 만들어보았다. index.html Blue Yellow Pink data-* 사용자 정의 데이터 속성이라고 하는 속성 클래스를 형성하여 스크립트에서 사용할 수 있는 HTML 과 DOM 표현 간에 독점 정보를 교환 할 수 있습니다. 이러한 모든 사용자 정의 데이터는 HTMLElement속성이 설정된 요소의 인터페이스를 통해 사용할 수 있습니다 . HTMLElement.dataset속성은 그들에 액세스 할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-dataset Global attributes - HTML: HyperText Markup Langu..