해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: 이벤트(Event)란? 이벤트(event)는 어떤 사건을 의미합니다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미합니다. onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행됩니다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 됩니다. 이러한 방식을 이벤트 프로그래밍이라고 합니다. event target target은 이벤트가 일어날 객..

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 이번 포스팅에서는 요소들의 위치와 크기를 알아내보도록 하겠습니다. 자바스크립트 기본 문법 :: 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 알아보도록 하겠습니다. Coding 출력된 문서는 다음과 같습니다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px입니다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px입니다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect인것입니다. 이를 콘솔에서 실행한 결과는 아래와 같습니다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 됩니다. 참고로 getB..

이미지 출처 : https://commons.wikimedia.org/wiki/File:JavaScript-logo.png 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받습니다. 아래는 텍스트 노드를 찾는 예제입니다. 우리가 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점입니다. Hello world Hello world target1의 첫번째 자식은 p 엘리먼트 입니다. 사이에 공백이 없기 때문이죠. 반면 target2 의 첫번째 자식은 text 입니다. 줄바꿈이나 공백 같은 것도 하나의 객체라고 인식하기 때문..

이미지 출처 : https://commons.wikimedia.org/wiki/File:JavaScript-logo.png 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: Document Document 객체는 DOM의 스펙이고, 이것이 웹브라우저에서는 HTMLDocument 객체로 사용됩니다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있습니다. document 는 node 를 상속받았기 때문에, childNodes를 사용가능합니다. 위의 결과는 document 의 첫번째 자식은 이고, 두번째 자식은 html 태그 전체라는 것을 보여줍니다. 자바스크립트 기본 문법 :: Document 주요 AP..