728x90 반응형 JavaScript17 JavaScript] Window sizes and scrolling 출처 : https://javascript.info/size-and-scroll-window browser window의 width, height를 어떻게 구할 수 있을까? document의 full width, height를 어떻게 구할 수 있을까? JavaScript로 page를 어떻게 scroll할 수 있을까? Width/height of the window window 가로세로를 알기 위해서, document.documentElement.clientWidth/clientHeight를 사용할 수 있다. window.innerWidth/innerHeight는 scrollbar를 포함한다. alert( window.innerWidth ); // window 가로 전체 alert( document.doc.. 2022. 11. 14. JavaScript] Document Styles and classes 출처 : https://javascript.info/styles-and-classes element를 style하는 방법은 2가지가 있다. 1. CSS에 class를 생성하고 추가하는 방법 : 2. 직접 style에 properties를 입력하는 방법 : JavaScript는 classes와 style properties 모두 수정이 가능하다. 우리는 1번을 선호해야 하며, 2번은 class로 다룰 수 없는 경우에만 사용해야 한다. 예를들어 element 좌표를 계산해서 JavaScript로 설정해야 하는 경우이다. let top = /* complex calculations */; let left = /* complex calculations */; elem.style.left = left; // e... 2022. 11. 14. JavaScript] document 수정 출처 : https://javascript.info/modifying-document DOM변경의 key는 live page를 생성이다. 어떻게 새로운 element를 생성하고 존재하는 page content를 수정하는지 알아보자. Example: show a message Hi there! You've read an important message. JavaScript로 동일한 div를 만들어보자. Creating an element DOM nodes를 만드는 데 2가지 함수가 있다. let div = document.createElement('div'); // 주어진 tag로 새로운 element node를 생성한다. let textNode = document.createTextNode('Here I.. 2022. 11. 11. JavaScript] HTML attributes and DOM properties 출처 : https://javascript.info/dom-attributes-and-properties 브라우저가 page를 로딩할때, HTML을 읽고 DOM objects를 생성한다. 대부분의 표준 HTML attributes는 자동으로 DOM objects의 properties가 된다. 예를들어 태그가 일때, DOM object는 body.id="page"를 갖는다. 하지만, attribute-property가 1:1 매핑되는 것은 아니다. 둘이 언제 같고 다른지 살펴보자. DOM properties 이미 많은 내장 DOM properties를 살펴보았다. 하지만 기술적으로 그 수가 제한되지 않았으며, 임의로 추가가 가능하다. DOM nodes는 일반 JavaScript Objects이므로, 수정이.. 2022. 11. 8. JavaScript] DOM Node properties 출처 : https://javascript.info/basic-dom-node-properties DOM node classes 다른 DOM nodes는 다른 properties를 갖고 있다. 예를들어 tag에 해당하는 element node는 link와 연관된 properties를 갖는다. 하지만, 공통 properties와 함수도 있다. DOM nodes의 모든 class는 하나의 hierarchy에서 나왔기 때문이다. hierarchy의 근본은 EventTarget이며 Node에 의해 상속된다. EventTarget - root 'abstract' class, 근본 추상 클래스, 따라서 모든 DOM nodes는 'events'를 지원한다. Node - 또한 추상 클래스, core tree 기능(pa.. 2022. 11. 4. JavaScript] Searching: getElement*, querySelector* DOM navigation properties는 elements가 서로 가까이 있을때 유용하다. 하지만 페이지에서 임의의 element에 접근을 해야할때는 어떻게 할 수 있을까? 이런 경우를 위한, 추가 searching methods가 있다. document.getElementById 만약에 element가 id attribute를 갖고 있다면, 우리는 document.getElementById(id) 함수를 이용해서 원하는 element를 찾을 수 있다. id는 unique해야한다. getElementById함수는 document object에서만 호출할 수 있다. Element querySelectorAll 가장 다용도로 사용되는 함수는 elem.querySelectorAll(css)이다. elem.. 2022. 11. 4. 이전 1 2 3 다음 728x90 반응형
