자바스크립트67 [자바스크립트] 콜 스택(Call stack), 블로킹(Blocking) 개념 이해 이벤트 루프에 대해 어려움을 겪던 중 이 영상을 보게 되었다. 우선, 자바스크립트는 싱글 스레드(single threaded) 프로그래밍 언어이다. 싱글 스레드라는 건, 한 번에 하나의 call stack을 갖고 있고, 그 말은 다시 말해 한 번에 하나씩만 일 처리를 할 수 있다는 말 Call stack A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what function.. 2021. 1. 8. [자바스크립트] localStorage 데이터 저장/삭제 해결 방법 이전에 TO DO LIST와 유사한 쇼핑목록 웹사이트를 만들었다. 입력, 삭제가 가능하지만 페이지를 새로고침 하면 사라졌다. [JavaScript] (해결) 동적으로 font awesome 아이콘 추가하기 나는 쇼핑목록 앱을 만들고있다. TO DO LIST처럼 쇼핑할 물건들을 적는 리스트이다. 현재 문제점 : appendChild, innerHTML 등을 이용하여 font awesome icon을 추가하려한다. 이런식으로. 다만 x 표시(빨간색 breathtaking-life.tistory.com 이제는 더 나아가 페이지를 새로 고침해도 데이터가 남아 있게 만들고 싶었다. 구글링 해보니 localStorage가 있었다. 참고: Window.localStorage - Web APIs | MDN The .. 2021. 1. 7. [자바스크립트] 버블링과 캡쳐링 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 body * { margin: 10px; border: 1px solid blue; } FORM DIV P 가장 안쪽의 를 클릭하면 순서대로 다음과 같은 일이 벌어집니다. 에 할당된 onclick 핸들러가 동작합니다. 바깥의 에 할당된 핸들러가 동작합니다. 그 바깥의 에 할당된 핸들러가 동작합니다. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. 즉 p->div->form 순서로 창이 열린다. 이러한 흐름을 '이벤트 버블링'이라고 한다. (거의 모든 이벤트들은 버블링이 일어난다. focus()같은 이벤트를 제외하면.) Introduction to e.. 2021. 1. 5. [JavaScript] 렌더링 트리(Critical Rendering Tree) 카테고리가 JavaScript에 국한된 건 아니지만, 이미 카테고리를 세부적으로 나누었기에 여기에 업로드! 렌더링 트리 생성, 레이아웃 및 페인트 | Web | Google Developers TODO developers.google.com *Critical Rendering Path * Render Tree 형성은 DOM, CSSOM의 결합 * DOM Tree에서 - 일부 노드는 표시되지 않으며(예: 스크립트 태그, 메타 태그 등), 렌더링된 출력에 반영되지 않으므로 생략됩니다. - 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어,---위의 예시에서---span 노드의 경우 'display: none' 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누.. 2021. 1. 3. [JavaScript] clientX/Y, pageX/Y, MouseEvent -clientX, clientY는 window 창에서 시작다. -pageX, pageY는 page의 제일 상위부터 시작한다. (페이지의 시작점부터) MouseEvent.clientX - Web APIs | MDN The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page). For example, clicking on the left edge of the viewpo developer.mozilla.org .. 2021. 1. 1. [JavaScript] document.querySelector * document.querySelector(css 선택자) Syntax: element = document.querySelector(CSS selectors); - name, id 를 제한 X - css선택자로 요소를 찾는다. - This string must be a valid CSS selector string; if it isn't, a SYNTAX_ERR exception is thrown * document.querySelectorAll(css 선택자) Syntax: element = document.querySelectorAll(CSS selectors); 기능과 사용법은 document.querySelector와 동일하지만, css 선택자를 사용하여 모든 요소를 찾는다.. 2021. 1. 1. 이전 1 ··· 8 9 10 11 12 다음
