자바스크립트는 여러 개의 호스트 환경에서 사용될 수 있습니다. 그 중에서 제일 오래된 호스트이자 우리의 주 무대인 브라우저 환경을 알아봅시다.자바스크립트는 환경에 따라 코어 자바스크립트 외에 사용할 수 있는 것들이 다르므로 브라우저의 구성을 살펴봅시다.브라우저 환경에는
DOM은 자바스크립트로 웹페이지(html)를 제어할 때 쓰는 객체입니다.이 객체는 트리형태로 구조화할 수 있습니다. 객체가 그러하듯이요.웹페이지의 모든 요소가 어떻게 document객체 안에 들어가는지 봅시다.DOM을 이루는 구성요소들을 node라고 부릅니다. node
자바스크립트로 css를 적용하는 방법은 두 가지가 있습니다.클래스에 css를 미리 담아두고 클래스를 넣어주던지, style속성으로 스타일을 적용하는 방법입니다.하지만 style은 css의 우선순위가 깨지기 때문에 클래스로 다룰 수 없을 때만 사용해야합니다.elem.cl
element의 크기/위치에 관한 것이다보니 css의 width, height이 떠오를 수도 있습니다.그러나 css는 box-sizing 속성에도 영향을 받고, auto일 경우에도 정확한 수치값을 얻지 못하는 점을 참고하셔야 합니다.content, padding, bo
이벤트는 갑자기 일상과 다른 무언가가 발생하는 거죠. 마찬가지로 프로그래밍에서도 이벤트는 갑자기 발생한 무언가입니다.이벤트는 DOM에만 한정되는 것은 아닙니다.자주 사용되는 이벤트의 종류에는 마우스 이벤트, 폼요소 이벤트, 키보드 이벤트, 문서 이벤트, css이벤트..
mousedown / mouseup마우스를 누를때/땔 때mouseover / mouseout마우스 포인터가 요소 위에 있을 때/ 요소 위에서 나갈 때mousemove마우스가 움직일 때contextmenu마우스 오른쪽 버튼을 누를 때click클릭할 때dbclick더블 클
keydown - 키보드를 누를 때keyup - 키보드를 눌렀다가 손을 땔 때event.code - 문자 그 자체event.key - 물리적 키 자체과거에는 keypress event가 있었고, 프로퍼티로 event.keyCode, event.charCode, even
폼은 특별한 컬렉션이 있습니다. document.forms, form.elements그들은 name값으로 특정 요소에 접근이 가능합니다.input 에 많이 쓰는 focusing/blur 이벤트value, checked 프로퍼티를 이용해서 접근할 수 있습니다.select
브라우저가 DOM트리를 완성하는 즉시 발생합니다. 외부 자원을 기다리지 않습니다.DOMContentLoaded를 막지 않는 예외1\. async 속성이 있는 스크립트2\. document.createElement('script')로 동적생성되고 웹페이지에 추가된 스크립